diff --git a/entry/obfuscation-rules.txt b/entry/obfuscation-rules.txt
index 69c4d6a8a5531548e4886fa766090c5c157a87d9..272efb6ca3f240859091bbbfc7c5802d52793b0b 100644
--- a/entry/obfuscation-rules.txt
+++ b/entry/obfuscation-rules.txt
@@ -15,4 +15,9 @@
 
 # Keep options:
 # -keep-property-name: specifies property names that you want to keep
-# -keep-global-name: specifies names that you want to keep in the global scope
\ No newline at end of file
+# -keep-global-name: specifies names that you want to keep in the global scope
+
+-enable-property-obfuscation
+-enable-toplevel-obfuscation
+-enable-filename-obfuscation
+-enable-export-obfuscation
\ No newline at end of file
diff --git a/entry/src/main/ets/common/CommonConstants.ets b/entry/src/main/ets/common/CommonConstants.ets
index beb7c240e71fe440efac5279a43666f2941e6ed6..730a632f3e1ab42d41d1c3c99729e03b5119d182 100644
--- a/entry/src/main/ets/common/CommonConstants.ets
+++ b/entry/src/main/ets/common/CommonConstants.ets
@@ -138,4 +138,43 @@ export class CommonConstants {
    * Column space inside.
    */
   static readonly COLUMN_SPACE_INSIDE: number = 8;
-}
\ No newline at end of file
+  /**
+   * 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';
+}
+
+export class BreakpointType<T> {
+  sm: T
+  md: T
+  lg: T
+
+  constructor(sm: T, md: T, lg: T) {
+    this.sm = sm;
+    this.md = md;
+    this.lg = lg;
+  }
+
+  GetValue(currentBreakpoint: string) {
+    if (currentBreakpoint === 'sm') {
+      return this.sm;
+    }
+    if (currentBreakpoint === 'md') {
+      return this.md;
+    }
+    if (currentBreakpoint === 'lg') {
+      return this.lg;
+    }
+    return undefined;
+  }
+};
\ 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 7592f47e01b4717265b8cd910855e6ee0779ec2a..4e6abb5742c56d83ab9de969f14701598d2390c7 100644
--- a/entry/src/main/ets/entryability/EntryAbility.ets
+++ b/entry/src/main/ets/entryability/EntryAbility.ets
@@ -13,14 +13,44 @@
  * limitations under the License.
  */
 
-import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
+import { AbilityConstant, ConfigurationConstant, UIAbility, Want, Configuration } from '@kit.AbilityKit';
 import { hilog } from '@kit.PerformanceAnalysisKit';
-import { window } from '@kit.ArkUI';
+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);
+  }
+
+  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);
+    }
   }
 
   onDestroy(): void {
@@ -31,6 +61,22 @@ export default class EntryAbility extends UIAbility {
     // Main window is created, set main page for this ability
     hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
 
+    windowStage.getMainWindow().then((windowObj: window.Window) => {
+      let type = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR;
+      let avoidArea = windowObj.getWindowAvoidArea(type);
+      let bottomRectHeight = avoidArea.bottomRect.height;
+      AppStorage.setOrCreate('bottomRectHeight', bottomRectHeight);
+      type = window.AvoidAreaType.TYPE_SYSTEM;
+      avoidArea = windowObj.getWindowAvoidArea(type);
+      let topRectHeight = avoidArea.topRect.height;
+      AppStorage.setOrCreate('topRectHeight', topRectHeight);
+      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) ?? '');
@@ -52,10 +98,7 @@ export default class EntryAbility extends UIAbility {
 
       windowClass.setWindowLayoutFullScreen(true);
       let sysBarProps: window.SystemBarProperties = {
-        statusBarColor: '#000000',
-        navigationBarColor: '#000000',
-        statusBarContentColor: '#ffffff',
-        navigationBarContentColor: '#ffffff'
+        statusBarContentColor: '#FFFFFF'
       };
       windowClass.setWindowSystemBarProperties(sysBarProps);
     })
@@ -75,4 +118,4 @@ export default class EntryAbility extends UIAbility {
     // Ability has back to background
     hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
   }
-}
+}
\ No newline at end of file
diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets
index e7350757d18873e11c2df8bf9cfecf8059b9cc51..15da35a2871c680f4fb3656fc276d8c8c517579a 100644
--- a/entry/src/main/ets/pages/Index.ets
+++ b/entry/src/main/ets/pages/Index.ets
@@ -13,10 +13,10 @@
  * limitations under the License.
  */
 
-import { DataSource, PhotoData } from '../util/DataSource';
-import { CommonConstants } from '../common//CommonConstants';
 import { common } from '@kit.AbilityKit';
 import { display } from '@kit.ArkUI';
+import { DataSource, PhotoData } from '../util/DataSource';
+import { BreakpointType, CommonConstants } from '../common//CommonConstants';
 
 @Entry
 @Component
@@ -32,6 +32,9 @@ struct Index {
   @State slide: boolean = false;
   @State foldStatus: number = 2;
   @State isFoldable: boolean = false;
+  @StorageProp('bottomRectHeight') bottomRectHeight: number = 0;
+  @StorageProp('topRectHeight') topRectHeight: number = 0;
+  @StorageProp('currentBreakpoint') curBp: string = CommonConstants.BREAK_POINT_SM;
   scroller: Scroller = new Scroller();
 
   aboutToAppear(): void {
@@ -46,7 +49,7 @@ struct Index {
       display.on('change', callback);
     }
     let list: PhotoData[] = [];
-    for (let i = 1; i <= 7; i++) {
+    for (let i = 1; i <= 4; i++) {
       let newPhotoData = new PhotoData();
       newPhotoData.id = i;
       list.push(newPhotoData);
@@ -104,16 +107,6 @@ struct Index {
 
   build() {
     Column() {
-      Row() {
-        Image($r('app.media.back'))
-          .width($r('app.float.image_width'))
-          .height($r('app.float.image_height'))
-          .margin({ top: $r('app.float.image_margin_top') })
-      }
-      .width(CommonConstants.FULL_PERCENT)
-      .height($r('app.float.row_image_height'))
-      .padding({ left: $r('app.float.padding_left'), right: $r('app.float.padding_right') })
-
       Stack({ alignContent: Alignment.BottomStart }) {
         Scroll() {
           List() {
@@ -121,8 +114,7 @@ struct Index {
               Swiper(this.swiperController) {
                 LazyForEach(this.data, (item: PhotoData, index: number) => {
                   Image($r(`app.media.` + item.id))
-                    .width(this.foldStatus === 2 ? CommonConstants.FULL_PERCENT: CommonConstants.Foldable_PERCENT)
-                    .height(CommonConstants.FULL_PERCENT)
+                    .width(CommonConstants.FULL_PERCENT)
                 }, (item: PhotoData) => JSON.stringify(item))
               }
               .cachedCount(CommonConstants.SWIPER_CACHED_COUNT)
@@ -155,13 +147,11 @@ struct Index {
               })
             }
             .width(CommonConstants.FULL_PERCENT)
-            .height(this.swiperMaxHeight)
+            .height(CommonConstants.FULL_PERCENT)
           }
           .width(CommonConstants.FULL_PERCENT)
           .height(CommonConstants.FULL_PERCENT)
-          .sticky(StickyStyle.Footer)
         }
-        .layoutWeight(CommonConstants.LAYOUT_WEIGHT)
 
         Column() {
           Column({ space: CommonConstants.COLUMN_SPACE }) {
@@ -170,50 +160,48 @@ struct Index {
               .height($r('app.float.image_height'))
               .borderRadius($r('app.float.image_borderRadius'))
             Column({ space: CommonConstants.COLUMN_SPACE_INSIDE }) {
-              Image($r("app.media.favor"))
-                .width($r('app.float.image_width_inside'))
-                .height($r('app.float.image_height_inside'))
+              SymbolGlyph($r('sys.symbol.heart_fill'))
+                .fontSize(29)
+                .fontColor([$r('sys.color.multi_color_08')])
               Text($r('app.string.collection'))
                 .fontSize($r('app.float.text_font_size'))
                 .fontColor(Color.White)
             }
-            .width($r('app.float.column_width'))
-            .height($r('app.float.column_height'))
+            .width($r('app.float.image_width'))
+            .height($r('app.float.image_height'))
 
             Column({ space: CommonConstants.COLUMN_SPACE_INSIDE }) {
-              Image($r('app.media.comments'))
-                .width($r('app.float.image_width_inside'))
-                .height($r('app.float.image_height_inside'))
+              SymbolGlyph($r('sys.symbol.ellipsis_bubble'))
+                .fontSize(29)
+                .fontColor([$r('sys.color.font_on_primary')])
               Text($r('app.string.Comments'))
                 .fontSize($r('app.float.text_font_size'))
                 .fontColor(Color.White)
             }
-            .width($r('app.float.column_width'))
-            .height($r('app.float.column_height'))
+            .width($r('app.float.image_width'))
+            .height($r('app.float.image_height'))
 
             Column({ space: CommonConstants.COLUMN_SPACE_INSIDE }) {
-              Image($r('app.media.share'))
-                .width($r('app.float.image_width_inside'))
-                .height($r('app.float.image_height_inside'))
+              SymbolGlyph($r('sys.symbol.share'))
+                .fontSize(29)
+                .fontColor([$r('sys.color.font_on_primary')])
               Text($r('app.string.share'))
                 .fontSize($r('app.float.text_font_size'))
                 .fontColor(Color.White)
             }
-            .width($r('app.float.column_width'))
-            .height($r('app.float.column_height'))
-
-            Image($r('app.media.recording'))
-              .width($r('app.float.image_width'))
-              .height($r('app.float.image_height'))
-              .borderRadius($r('app.float.image_borderRadius'))
+            .width($r('app.float.image_width'))
+            .height($r('app.float.image_height'))
           }
+          .padding({
+            right: new BreakpointType($r('sys.float.padding_level8'), $r('sys.float.padding_level12'),
+              $r('sys.float.padding_level16')).GetValue(this.curBp)
+          })
           .margin({ top: $r('app.float.column_image_margin_top') })
         }
         .width(CommonConstants.FULL_PERCENT)
         .height(CommonConstants.FULL_PERCENT)
         .alignItems(HorizontalAlign.End)
         .justifyContent(FlexAlign.Center)
-        .padding({ left: $r('app.float.column_padding_left'), right: $r('app.float.column_padding_right') })
         .hitTestBehavior(HitTestMode.Transparent)
 
         Column() {
@@ -248,25 +236,34 @@ struct Index {
             this.progressComponent();
           }
 
-          TextInput({ placeholder: $r('app.string.placeholder') })
-            .width(CommonConstants.FULL_PERCENT)
-            .backgroundColor($r('app.color.textInput_backgroundColor'))
-            .fontColor(Color.White)
-            .placeholderColor(Color.White)
-            .focusable(false)
+          Row() {
+            TextInput({ placeholder: $r('app.string.placeholder') })
+              .width(new BreakpointType(CommonConstants.FULL_PERCENT, '308vp', '400vp').GetValue(this.curBp))
+              .backgroundColor($r('app.color.textInput_backgroundColor'))
+              .fontColor(Color.White)
+              .placeholderColor(Color.White)
+              .focusable(false)
+          }
+          .padding({
+            bottom: new BreakpointType($r('sys.float.padding_level4'), $r('sys.float.padding_level8'),
+              $r('sys.float.padding_level12')).GetValue(this.curBp)
+          })
+          .justifyContent(FlexAlign.End)
+          .width(CommonConstants.FULL_PERCENT)
         }
         .width(CommonConstants.FULL_PERCENT)
         .height($r('app.float.description_column_height'))
         .padding({
-          left: $r('app.float.padding_left'),
-          right: $r('app.float.padding_right'),
-          bottom: $r('app.float.padding_bottom')
+          left: new BreakpointType($r('sys.float.padding_level8'), $r('sys.float.padding_level12'),
+            $r('sys.float.padding_level16')).GetValue(this.curBp),
+          right: new BreakpointType($r('sys.float.padding_level8'), $r('sys.float.padding_level12'),
+            $r('sys.float.padding_level16')).GetValue(this.curBp),
+          bottom: px2vp(this.bottomRectHeight)
         })
         .hitTestBehavior(HitTestMode.Transparent)
         .justifyContent(FlexAlign.SpaceBetween)
       }
-      .margin({ top: $r('app.float.stack_margin_top'), })
-      .height($r('app.float.stack_height'))
+      .layoutWeight(1)
     }
     .backgroundColor(Color.Black)
     .height(CommonConstants.FULL_PERCENT)
diff --git a/entry/src/main/module.json5 b/entry/src/main/module.json5
index ad219d733f6afa5ea07f85f580208b08cc3b9041..a1cea8b6a4560cee7bda7a2db52f310c035ab6c8 100644
--- a/entry/src/main/module.json5
+++ b/entry/src/main/module.json5
@@ -5,7 +5,9 @@
     "description": "$string:module_desc",
     "mainElement": "EntryAbility",
     "deviceTypes": [
-      "phone"
+      "phone",
+      "tablet",
+      "2in1"
     ],
     "deliveryWithInstall": true,
     "installationFree": false,
diff --git a/entry/src/main/resources/base/element/string.json b/entry/src/main/resources/base/element/string.json
index 0d958bd80f746369c3ba51bc092b7e5cb24c188d..8de51966425427c6ca1616898ee0f05324a5de30 100644
--- a/entry/src/main/resources/base/element/string.json
+++ b/entry/src/main/resources/base/element/string.json
@@ -46,7 +46,7 @@
     },
     {
       "name": "Comments",
-      "value": "Comments"
+      "value": "6"
     },
     {
       "name": "share",
diff --git a/entry/src/main/resources/base/media/1.jpg b/entry/src/main/resources/base/media/1.jpg
deleted file mode 100644
index 288336ad1a3047d23a1efb8a1f4197a0eb158f0f..0000000000000000000000000000000000000000
Binary files a/entry/src/main/resources/base/media/1.jpg and /dev/null differ
diff --git a/entry/src/main/resources/base/media/1.png b/entry/src/main/resources/base/media/1.png
new file mode 100644
index 0000000000000000000000000000000000000000..5a39a5df51385f77d9f1aefc4404a4fd46071a36
Binary files /dev/null and b/entry/src/main/resources/base/media/1.png differ
diff --git a/entry/src/main/resources/base/media/2.jpg b/entry/src/main/resources/base/media/2.jpg
deleted file mode 100644
index dee92d99ec2b8094d62c505f044a2cae8acf08d7..0000000000000000000000000000000000000000
Binary files a/entry/src/main/resources/base/media/2.jpg and /dev/null differ
diff --git a/entry/src/main/resources/base/media/2.png b/entry/src/main/resources/base/media/2.png
new file mode 100644
index 0000000000000000000000000000000000000000..5f4aca510894e606263a8df2a9f90dd29a0b44cf
Binary files /dev/null and b/entry/src/main/resources/base/media/2.png differ
diff --git a/entry/src/main/resources/base/media/3.jpg b/entry/src/main/resources/base/media/3.jpg
deleted file mode 100644
index d57f20d03d74e980878e44292e7d89132020e097..0000000000000000000000000000000000000000
Binary files a/entry/src/main/resources/base/media/3.jpg and /dev/null differ
diff --git a/entry/src/main/resources/base/media/3.png b/entry/src/main/resources/base/media/3.png
new file mode 100644
index 0000000000000000000000000000000000000000..49d27f976871fe0ee3eb4b3ab005738c42b85131
Binary files /dev/null and b/entry/src/main/resources/base/media/3.png differ
diff --git a/entry/src/main/resources/base/media/4.jpg b/entry/src/main/resources/base/media/4.jpg
deleted file mode 100644
index 679228c56459fb4701894c558aaa567b822cdfe8..0000000000000000000000000000000000000000
Binary files a/entry/src/main/resources/base/media/4.jpg and /dev/null differ
diff --git a/entry/src/main/resources/base/media/4.png b/entry/src/main/resources/base/media/4.png
new file mode 100644
index 0000000000000000000000000000000000000000..b2e1c0fca3e0f42e2553632413e4e668dfbcf7e2
Binary files /dev/null and b/entry/src/main/resources/base/media/4.png differ
diff --git a/entry/src/main/resources/en_US/element/string.json b/entry/src/main/resources/en_US/element/string.json
index 0d958bd80f746369c3ba51bc092b7e5cb24c188d..8de51966425427c6ca1616898ee0f05324a5de30 100644
--- a/entry/src/main/resources/en_US/element/string.json
+++ b/entry/src/main/resources/en_US/element/string.json
@@ -46,7 +46,7 @@
     },
     {
       "name": "Comments",
-      "value": "Comments"
+      "value": "6"
     },
     {
       "name": "share",
diff --git a/entry/src/main/resources/zh_CN/element/string.json b/entry/src/main/resources/zh_CN/element/string.json
index 20307eb0072b108e55f6f54317eb7f8df6e36da2..21ce68631903fe9e86068c750c480cf3a7a5ea44 100644
--- a/entry/src/main/resources/zh_CN/element/string.json
+++ b/entry/src/main/resources/zh_CN/element/string.json
@@ -46,7 +46,7 @@
     },
     {
       "name": "Comments",
-      "value": "评论"
+      "value": "6"
     },
     {
       "name": "share",