diff --git a/entry/src/main/ets/constant/StackConstant.ets b/entry/src/main/ets/constant/StackConstant.ets
index 49d3773fb4b6bb85c19a07c769f843c2b44570a6..5ce2e8617987c5bf4b7a3d3e5cb21f6d2c8a7cd7 100644
--- a/entry/src/main/ets/constant/StackConstant.ets
+++ b/entry/src/main/ets/constant/StackConstant.ets
@@ -103,4 +103,19 @@ export class StackConstant {
    * 100 percent.
    */
   static readonly FULL_PERCENT: string = '100%';
+
+  /**
+   * Breakpoint sm.
+   */
+  static readonly BREAK_POINT_SM: string = 'sm';
+
+  /**
+   * Breakpoint md.
+   */
+  static readonly BREAK_POINT_MD: string = 'md';
+
+  /**
+   * Breakpoint lg.
+   */
+  static readonly BREAK_POINT_LG: string = 'lg';
 }
\ No newline at end of file
diff --git a/entry/src/main/ets/entryability/EntryAbility.ets b/entry/src/main/ets/entryability/EntryAbility.ets
index 9609513b9936d939241f2fdc9c650288591f86cc..8b5988f87636eb98f32ac5ddefb0a4b4be66d47b 100644
--- a/entry/src/main/ets/entryability/EntryAbility.ets
+++ b/entry/src/main/ets/entryability/EntryAbility.ets
@@ -13,30 +13,76 @@
  * limitations under the License.
  */
 
-import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
+import { AbilityConstant, Configuration, ConfigurationConstant, UIAbility, Want } from '@kit.AbilityKit';
 import { hilog } from '@kit.PerformanceAnalysisKit';
 import { display, window } from '@kit.ArkUI';
 import { BusinessError } from '@kit.BasicServicesKit';
 
 export default class EntryAbility extends UIAbility {
+  private windowObj?: window.Window;
+  private curBp: string = '';
+
+  private updateBreakpoint(windowWidth: number): void {
+    let windowWidthVp = windowWidth / display.getDefaultDisplaySync().densityPixels;
+    let newBp: string = '';
+    if (windowWidthVp < 600) {
+      newBp = 'sm';
+    } else if (windowWidthVp < 840) {
+      newBp = 'md';
+    } else {
+      newBp = 'lg';
+    }
+    if (this.curBp !== newBp) {
+      this.curBp = newBp;
+      AppStorage.setOrCreate('currentBreakpoint', this.curBp);
+    }
+  }
+
+
   onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
     hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
+    AppStorage.setOrCreate('systemColorMode', this.context.config.colorMode);
+    this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);
   }
 
   onDestroy(): void {
     hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
   }
 
+  onConfigurationUpdate(newConfig: Configuration): void {
+    let newColorMode: ConfigurationConstant.ColorMode =
+      newConfig.colorMode || ConfigurationConstant.ColorMode.COLOR_MODE_DARK;
+    let currentColorMode = AppStorage.get<ConfigurationConstant.ColorMode>('systemColorMode');
+    if (newColorMode !== currentColorMode) {
+      AppStorage.setOrCreate('systemColorMode', newColorMode);
+    }
+  }
+
   onWindowStageCreate(windowStage: window.WindowStage): void {
     // Main window is created, set main page for this ability.
     hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
 
+    windowStage.getMainWindow().then((windowObj: window.Window) => {
+      this.windowObj = windowObj;
+      this.updateBreakpoint(windowObj.getWindowProperties().windowRect.width);
+      windowObj.on('windowSizeChange', (windowSize) => {
+        this.updateBreakpoint(windowSize.width);
+      })
+    });
+
     windowStage.loadContent('pages/Index', (err) => {
       if (err.code) {
         hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
         return;
       }
       hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
+      let windowClass: window.Window = windowStage.getMainWindowSync();
+      let isLayoutFullScreen = true;
+      windowClass.setWindowLayoutFullScreen(isLayoutFullScreen).then(() => {
+        console.info('Succeeded in setting the window layout to full-screen mode.');
+      }).catch((err: BusinessError) => {
+        console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err));
+      });
     });
     let windowClass: window.Window | undefined = undefined;
     window.getLastWindow(this.context, (err: BusinessError, data) => {
@@ -66,9 +112,11 @@ export default class EntryAbility extends UIAbility {
         displayClass = display.getDefaultDisplaySync();
         screenHeight = displayClass.height;
       } catch (exception) {
-        hilog.error(0x0000, 'testTag', 'Failed to obtain the default display object. Code: ' + JSON.stringify(exception));
+        hilog.error(0x0000, 'testTag',
+          'Failed to obtain the default display object. Code: ' + JSON.stringify(exception));
       }
-      hilog.info(0x0000, 'testTag', 'Succeeded to obtain the default display object. Code: ' + JSON.stringify(displayClass));
+      hilog.info(0x0000, 'testTag',
+        'Succeeded to obtain the default display object. Code: ' + JSON.stringify(displayClass));
       AppStorage.setOrCreate('screenHeight', screenHeight);
     });
   }
diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets
index c1a599e95661375a67024429e268fe67d9abfaa3..c28903fd717825ca9595ee22f8f09a14d699fad5 100644
--- a/entry/src/main/ets/pages/Index.ets
+++ b/entry/src/main/ets/pages/Index.ets
@@ -31,24 +31,24 @@ struct Index {
   @StorageLink('statusHeight') statusHeight: number = 0;
   @StorageLink('bottomHeight') bottomHeight: number = 0;
   @StorageLink('screenHeight') screenHeight: number = 0;
+  @StorageLink('currentBreakpoint') curBp: string = StackConstant.BREAK_POINT_SM;
   private scroller: Scroller = new Scroller();
   private scroller2: Scroller = new Scroller();
 
   build() {
     Stack({ alignContent: Alignment.Top }) {
       Flex({ justifyContent: FlexAlign.SpaceBetween }) {
-        Image($r("app.media.user_portrait"))
-          .width($r('app.integer.user_portrait_width'))
+        SymbolGlyph($r('sys.symbol.person_crop_circle_fill_1'))
+          .fontSize($r('app.integer.user_portrait_width'))
+          .fontColor([$r('sys.color.icon_secondary')])
           .aspectRatio(1)
-          .borderRadius($r('app.integer.user_portrait_border_radius'))
 
-        Image($r("app.media.stack_scan"))
-          .width($r('app.integer.scan_width'))
+        SymbolGlyph($r('sys.symbol.line_viewfinder'))
+          .fontSize($r('app.integer.user_portrait_width'))
+          .fontColor([$r('sys.color.icon_secondary')])
           .aspectRatio(1)
       }
       .padding({
-        left: $r('app.integer.flex_padding_left'),
-        right: $r('app.integer.flex_padding_right'),
         top: $r('app.integer.flex_padding_top')
       })
       .width(StackConstant.FULL_PERCENT)
@@ -57,23 +57,23 @@ struct Index {
       Scroll(this.scroller) {
         Column() {
           Row() {
-            Image($r('app.media.search'))
-              .width($r('app.integer.search_width'))
+            SymbolGlyph($r('sys.symbol.magnifyingglass'))
+              .fontSize($r('app.integer.search_width'))
+              .fontColor([$r('sys.color.icon_secondary')])
               .aspectRatio(1)
               .margin({ left: $r('app.integer.search_icon_margin_left') })
 
             Text($r('app.string.search_title'))
-              .opacity(StackConstant.OPACITY)
-              .fontColor(Color.Black)
+              .fontColor($r('sys.color.font_primary'))
               .fontSize($r('app.integer.search_font_size'))
               .margin({ left: $r('app.integer.search_text_margin_left') })
           }
           .width(StackConstant.FULL_PERCENT)
           .height(this.searchHeight)
-          .backgroundColor(Color.White)
+          .backgroundColor($r('sys.color.comp_background_primary'))
           .borderRadius($r('app.integer.search_border_radius'))
-          .onClick(()=>{
-            promptAction.showToast({ message: $r('app.string.component_stack_other_function')});
+          .onClick(() => {
+            promptAction.showToast({ message: $r('app.string.component_stack_other_function') });
           });
 
           Stack({ alignContent: Alignment.Top }) {
@@ -81,7 +81,7 @@ struct Index {
               Row() {
                 IconList3({ marginSpace: this.marginSpace })
               }
-              .backgroundColor($r('app.color.ohos_id_color_sub_background'))
+              .backgroundColor($r('sys.color.comp_background_primary'))
               .width(StackConstant.FULL_PERCENT)
               .height($r('app.integer.icon_list_height3'))
               .opacity(this.opacityList)
@@ -101,7 +101,7 @@ struct Index {
                   IconList2({ ratio: this.ratio })
                 }
                 .width(StackConstant.FULL_PERCENT)
-                .height(this.heightList2)
+                .height($r('app.integer.icon_view_height3'))
                 .opacity(this.opacityList2)
 
                 ProductList()
@@ -149,7 +149,7 @@ struct Index {
         .width(StackConstant.FULL_PERCENT)
         .margin({ top: $r('app.integer.margin_search_view') })
       }
-      .padding({ left: $r('app.integer.scroll_padding'), right: $r('app.integer.scroll_padding') })
+      //.padding({ left: $r('app.integer.scroll_padding'), right: $r('app.integer.scroll_padding') })
       .width(StackConstant.FULL_PERCENT)
       .height(StackConstant.FULL_PERCENT)
       .scrollBar(BarState.Off)
@@ -162,7 +162,13 @@ struct Index {
     }
     .width(StackConstant.FULL_PERCENT)
     .layoutWeight(1)
-    .backgroundColor($r('app.color.ohos_id_color_sub_background'))
-    .padding({ top: $r('app.integer.stack_padding_top') })
+    .backgroundColor($r('sys.color.background_secondary'))
+    .padding({
+      top: px2vp(this.statusHeight),
+      left: this.curBp === 'sm' ? $r('sys.float.padding_level8') :
+        this.curBp === 'md' ? $r('sys.float.padding_level12') : $r('sys.float.padding_level16'),
+      right: this.curBp === 'sm' ? $r('sys.float.padding_level8') :
+        this.curBp === 'md' ? $r('sys.float.padding_level12') : $r('sys.float.padding_level16'),
+    })
   }
 }
\ No newline at end of file
diff --git a/entry/src/main/ets/view/IconView.ets b/entry/src/main/ets/view/IconView.ets
index b1ef39bb7cc43ebb6615015158176a9c5f4c465d..78df7253668281a5af85aebe81dddbe7e22eed59 100644
--- a/entry/src/main/ets/view/IconView.ets
+++ b/entry/src/main/ets/view/IconView.ets
@@ -32,17 +32,17 @@ struct IconView1 {
         .objectFit(ImageFit.Contain)
 
       Text(this.title)
-        .fontSize($r('app.integer.icon_view_title_font_size'))
-        .fontColor(Color.Black)
+        .fontSize($r('sys.float.Body_S'))
+        .fontColor($r('sys.color.font_primary'))
         .textAlign(TextAlign.Center)
     }
     .width(StackConstant.FULL_PERCENT)
     .height($r('app.integer.icon_view_height'))
     .justifyContent(FlexAlign.Center)
-    .backgroundColor(Color.White)
+    .backgroundColor($r('sys.color.comp_background_primary'))
     .borderRadius($r('app.integer.icon_view_border_radius'))
-    .onClick(()=>{
-      promptAction.showToast({ message: $r('app.string.component_stack_other_function')});
+    .onClick(() => {
+      promptAction.showToast({ message: $r('app.string.component_stack_other_function') });
     })
   }
 }
@@ -56,9 +56,8 @@ struct IconView2 {
   build() {
     Row() {
       Text(this.title)
-        .fontSize($r('app.integer.icon_view_title_font_size2'))
-        .fontColor(Color.Black)
-
+        .fontSize($r('sys.float.Body_M'))
+        .fontColor($r('sys.color.font_primary'))
       Image(this.icon)
         .width($r('app.integer.icon_view_width2'))
         .aspectRatio(1)
@@ -68,10 +67,10 @@ struct IconView2 {
     .width(StackConstant.FULL_PERCENT)
     .height($r('app.integer.icon_view_height2'))
     .justifyContent(FlexAlign.Center)
-    .backgroundColor(Color.White)
+    .backgroundColor($r('sys.color.comp_background_primary'))
     .borderRadius($r('app.integer.icon_view_border_radius'))
-    .onClick(()=>{
-      promptAction.showToast({ message: $r('app.string.component_stack_other_function')});
+    .onClick(() => {
+      promptAction.showToast({ message: $r('app.string.component_stack_other_function') });
     })
   }
 }
@@ -85,20 +84,19 @@ struct IconView3 {
   build() {
     Column({ space: StackConstant.ICON_VIEW_SPACE }) {
       Image(this.icon)
-        .width($r('app.integer.icon_view_width'))
+        .width(30)
         .aspectRatio(1)
         .objectFit(ImageFit.Contain)
-
       Text(this.title)
-        .fontSize($r('app.integer.icon_view_title_font_size'))
-        .fontColor(Color.Black)
+        .fontSize($r('sys.float.Body_S'))
+        .fontColor($r('sys.color.font_primary'))
         .textAlign(TextAlign.Center)
     }
     .width(StackConstant.FULL_PERCENT)
     .height($r('app.integer.icon_view_height3'))
     .justifyContent(FlexAlign.Center)
-    .onClick(()=>{
-      promptAction.showToast({ message: $r('app.string.component_stack_other_function')});
+    .onClick(() => {
+      promptAction.showToast({ message: $r('app.string.component_stack_other_function') });
     })
   }
 }
diff --git a/entry/src/main/ets/view/ProductList.ets b/entry/src/main/ets/view/ProductList.ets
index 15319ac6ab8412bb0d1327f3665c4704e02cd48d..fcccaa058f824f2c2a3bef8cb846651d54446db5 100644
--- a/entry/src/main/ets/view/ProductList.ets
+++ b/entry/src/main/ets/view/ProductList.ets
@@ -22,6 +22,7 @@ import { StackConstant } from '../constant/StackConstant';
 @Component
 export struct ProductList {
   private productData: ProductDataSource = new ProductDataSource();
+  @StorageLink('currentBreakpoint') curBp: string = StackConstant.BREAK_POINT_SM;
 
   aboutToAppear() {
     this.productData.pushData(PRODUCT_DATA);
@@ -44,7 +45,7 @@ export struct ProductList {
               .width(StackConstant.FULL_PERCENT)
               .fontSize($r('app.integer.water_flow_title_font_size'))
               .fontWeight(FontWeight.Bold)
-              .fontColor(Color.Black)
+              .fontColor($r('sys.color.font_primary'))
 
             Text(item.price)
               .width(StackConstant.FULL_PERCENT)
@@ -71,10 +72,10 @@ export struct ProductList {
           .padding({ left: $r('app.integer.water_flow_column_padding_left') })
           .width(StackConstant.FULL_PERCENT)
           .height($r('app.integer.water_flow_column_height'))
-          .backgroundColor(Color.White)
+          .backgroundColor($r('sys.color.comp_background_primary'))
           .borderRadius($r('app.integer.water_flow_column_border_radius'))
-          .onClick(()=>{
-            promptAction.showToast({ message: $r('app.string.component_stack_other_function')});
+          .onClick(() => {
+            promptAction.showToast({ message: $r('app.string.component_stack_other_function') });
           });
         }
       }, (item: ProductDataModel) => item.id.toString())
@@ -83,7 +84,7 @@ export struct ProductList {
       scrollForward: NestedScrollMode.PARENT_FIRST,
       scrollBackward: NestedScrollMode.SELF_FIRST
     })
-    .columnsTemplate('1fr 1fr')
+    .columnsTemplate(this.curBp === 'sm' ? '1fr 1fr' : this.curBp === 'md' ? '1fr 1fr 1fr' : '1fr 1fr 1fr 1fr')
     .columnsGap(StackConstant.COLUMNS_GAP)
     .rowsGap(StackConstant.ROWS_GAP)
     .padding({ bottom: $r('app.integer.water_flow_padding_bottom') })
diff --git a/entry/src/main/resources/base/element/integer.json b/entry/src/main/resources/base/element/integer.json
index 3bad191fd832fcea3d63224c6a23b500b19fbe9e..fe7301b3038f8845398b397f22c3c438c89e6695 100644
--- a/entry/src/main/resources/base/element/integer.json
+++ b/entry/src/main/resources/base/element/integer.json
@@ -34,7 +34,7 @@
     },
     {
       "name": "search_width",
-      "value": 20
+      "value": 24
     },
     {
       "name": "search_icon_margin_left",
@@ -114,7 +114,7 @@
     },
     {
       "name": "icon_view_height3",
-      "value": 95
+      "value": 70
     },
     {
       "name": "icon_view_border_radius",