diff --git a/README.md b/README.md
index cd3490340b723409d2b13b0a44b485e8104ec9de..aaae7441bb337984fbcc65276d5dbf5a407dc76a 100644
--- a/README.md
+++ b/README.md
@@ -59,9 +59,6 @@
 ### 约束与限制
 
 1. 本示例仅支持标准系统上运行，支持设备：华为手机。
-
-2. HarmonyOS系统：HarmonyOS NEXT Developer Beta1及以上。
-
-3. DevEco Studio版本：DevEco Studio NEXT Developer Beta1及以上。
-
-4. HarmonyOS SDK版本：HarmonyOS NEXT Developer Beta1 SDK及以上。
\ No newline at end of file
+2. HarmonyOS系统：HarmonyOS 5.0.0 Release及以上。
+3. DevEco Studio版本：DevEco Studio 5.0.0 Release及以上。
+4. HarmonyOS SDK版本：HarmonyOS 5.0.0 Release SDK及以上。
\ No newline at end of file
diff --git a/README_EN.md b/README_EN.md
index 34ca24335a0b18782bb54b325c76fafa93031f09..c68493f6b7311deb3587837f1ed119c9d8c4ad36 100644
--- a/README_EN.md
+++ b/README_EN.md
@@ -61,8 +61,9 @@ N/A
 
 1. The sample app is supported only on Huawei phones running the standard system.
 
-2. The HarmonyOS version must be HarmonyOS NEXT Developer Beta1 or later.
+2. The HarmonyOS version must be HarmonyOS 5.0.0 Release or later.
 
-3. The DevEco Studio version must be DevEco Studio NEXT Developer Beta1 or later.
+3. The DevEco Studio version must be DevEco Studio 5.0.0 Release or later.
+
+4. The HarmonyOS SDK version must be HarmonyOS 5.0.0 Release or later.
 
-4. The HarmonyOS SDK version must be HarmonyOS NEXT Developer Beta1 SDK or later.
diff --git a/entry/obfuscation-rules.txt b/entry/obfuscation-rules.txt
new file mode 100644
index 0000000000000000000000000000000000000000..a1dfa0bd175984dc49e641436aa67b1de1b8abeb
--- /dev/null
+++ b/entry/obfuscation-rules.txt
@@ -0,0 +1,22 @@
+# Define project specific obfuscation rules here.
+# You can include the obfuscation configuration files in the current module's build-profile.json5.
+#
+# For more details, see
+#   https://gitee.com/openharmony/arkcompiler_ets_frontend/blob/master/arkguard/README.md
+
+# Obfuscation options:
+# -disable-obfuscation: disable all obfuscations
+# -enable-property-obfuscation: obfuscate the property names
+# -enable-toplevel-obfuscation: obfuscate the names in the global scope
+# -compact: remove unnecessary blank spaces and all line feeds
+# -remove-log: remove all console.* statements
+# -print-namecache: print the name cache that contains the mapping from the old names to new names
+# -apply-namecache: reuse the given cache file
+
+# 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
+-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/constants/CommonConstants.ets b/entry/src/main/ets/common/constants/CommonConstants.ets
index ba247171f84ae3cfcf7b59e06fa67c02c602f5a3..83ed7f47a56bdcc181d6b1b0b2d08aa7da3a586d 100644
--- a/entry/src/main/ets/common/constants/CommonConstants.ets
+++ b/entry/src/main/ets/common/constants/CommonConstants.ets
@@ -65,5 +65,41 @@ export class CommonConstants {
    * String for init name.
    */
   static readonly INIT_NAME: string = 'developer1';
+  /**
+   * 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;
+  }
+}
diff --git a/entry/src/main/ets/entryability/EntryAbility.ets b/entry/src/main/ets/entryability/EntryAbility.ets
index 8bd1dd3bfc74906b9c7d9d2b22d2b67fc3de24ec..11c1583f94ee88951b943dfc4d4b0f1950b62aa8 100644
--- a/entry/src/main/ets/entryability/EntryAbility.ets
+++ b/entry/src/main/ets/entryability/EntryAbility.ets
@@ -13,13 +13,45 @@
  * limitations under the License.
  */
 
-import { UIAbility } from '@kit.AbilityKit';
+import { AbilityConstant, Configuration, ConfigurationConstant, UIAbility, Want } from '@kit.AbilityKit';
+import { display, window } from '@kit.ArkUI';
 import { hilog } from '@kit.PerformanceAnalysisKit';
-import { window } from '@kit.ArkUI';
+import { BusinessError } from '@kit.BasicServicesKit';
+import { resourceManager } from '@kit.LocalizationKit';
 
 export default class EntryAbility extends UIAbility {
-  onCreate(): void {
+  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 {
@@ -27,15 +59,39 @@ export default class EntryAbility extends UIAbility {
   }
 
   onWindowStageCreate(windowStage: window.WindowStage): void {
+    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);
+      })
+    });
     // Main window is created, set main page for this ability
     hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
-
+    let context = this.context;
+    let resourceManager: resourceManager.ResourceManager = context.resourceManager;
+    AppStorage.setOrCreate('resourceManager', resourceManager);
     windowStage.loadContent('pages/Index', (err, data) => {
       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. Data: %{public}s', JSON.stringify(data) ?? '');
+      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));
+      });
     });
   }
 
@@ -53,4 +109,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 245fd09785c8ea59787002abcdabee7515bcdbc3..5ad975d27b620c35d941fae9990b5c106114de74 100644
--- a/entry/src/main/ets/pages/Index.ets
+++ b/entry/src/main/ets/pages/Index.ets
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { CommonConstants } from '../common/constants/CommonConstants';
+import { BreakpointType, CommonConstants } from '../common/constants/CommonConstants';
 import CommonUtils from '../common/utils/CommonUtils';
 import dbUtils from '../common/utils/DBUtils';
 import { User } from '../viewmodel/UserInfo';
@@ -38,6 +38,9 @@ struct Index {
   // Check whether the loading dynamic effect is displayed.
   @State isShowLoading: boolean = false;
   @State isUpdate: boolean = false;
+  @StorageProp('currentBreakpoint') curBp: string = CommonConstants.BREAK_POINT_SM;
+  @StorageProp('topRectHeight')
+  topRectHeight: number = 0;
   versionUpdateInfo: string[] = [];
   subscript: number = 2;
   dialogController: CustomDialogController = new CustomDialogController({
@@ -70,195 +73,235 @@ struct Index {
 
   build() {
     Column() {
-      Column() {
-        Text($r('app.string.Sequence_diagram'))
-          .width($r('app.float.default_312'))
-          .height($r('app.float.default_32'))
-          .fontSize($r('app.float.default_font_24'))
-          .fontWeight(CommonConstants.NUMBER_500)
-          .margin({
-            top: $r('app.float.default_12'),
-            bottom: $r('app.float.default_12'),
-            left: $r('app.float.default_12'),
-            right: $r('app.float.default_24')
-          })
-      }
-      .width($r('app.float.default_360'))
-      .height($r('app.float.default_56'))
-
-      Row() {
-        Text($r('app.string.input_field'))
-          .width('190vp')
-          .fontWeight(CommonConstants.NUMBER_500)
-          .fontSize($r('app.float.default_font_16'))
-        Select([
-          { value: $r('app.string.username') },
-          { value: $r('app.string.account') },
-          { value: $r('app.string.nickname') },
-          { value: $r('app.string.age') }
-        ])
-          .backgroundColor($r('app.color.start_window_background'))
-          .selected(0)
-          .font({ weight: CommonConstants.NUMBER_500, size: $r('app.float.default_font_16') })
-          .value($r('app.string.username'))
-          .onSelect((index: number) => {
-            this.index = index;
-          })
-      }
-      .justifyContent(FlexAlign.SpaceBetween)
-      .width($r('app.float.default_312'))
-      .height($r('app.float.default_48'))
+      Text($r('app.string.title'))
+        .fontWeight(FontWeight.Bold)
+        .fontSize($r('app.float.big_font_size'))
+        .height($r('app.float.list_item_height'))
+        .textAlign(TextAlign.Start)
+        .width('100%')
+        .fontColor($r('sys.color.font_primary'))
+        .margin({
+          bottom: $r('sys.float.padding_level8'),
+          top: $r('sys.float.padding_level32')
+        })
 
-      Column() {
-        Column() {
-          Text($r('app.string.field_value'))
-            .textAlign(TextAlign.Center)
-            .fontSize($r('app.float.default_font_16'))
-            .fontWeight(CommonConstants.NUMBER_500)
-        }
-        .justifyContent(FlexAlign.Center)
-        .alignItems(HorizontalAlign.Start)
-        .width($r('app.float.default_312'))
-        .height($r('app.float.default_48'))
+      WaterFlow() {
+        FlowItem() {
+          Column() {
+            Text($r('app.string.user_info_show'))
+              .width('100%')
+              .fontWeight(CommonConstants.NUMBER_500)
+              .fontSize($r('app.float.default_font_18'))
+              .alignSelf(ItemAlign.Start)
+              .padding({ left: $r('sys.float.padding_level6'), bottom: $r('sys.float.padding_level4') })
+              .fontColor($r('sys.color.font_secondary'))
 
-        TextInput({ placeholder: CommonConstants.INIT_NAME })
-          .enableKeyboardOnFocus(false)
-          .backgroundColor($r('app.color.input_background'))
-          .borderRadius(0)
-          .width($r('app.float.default_312'))
-          .height($r('app.float.default_48'))
-          .onChange((value: string) => {
-            this.content = value;
-          })
-        Row() {
-          Button($r('app.string.version_update'))
-            .margin({ right: $r('app.float.default_12') })
-            .fontSize($r('app.float.default_font_16'))
-            .fontWeight(CommonConstants.NUMBER_500)
-            .width($r('app.float.default_150'))
-            .height($r('app.float.default_40'))
-            .onClick(() => {
-              this.isCanceled = false;
-              this.dialogController.open();
-            })
-          Button($r('app.string.version_rollback'))
-            .backgroundColor($r('app.color.rollback_background'))
-            .opacity(!this.isUpdate ? 0.5 : 1)
-            .fontColor($r('app.color.font_color'))
-            .fontSize($r('app.float.default_font_16'))
-            .fontWeight(CommonConstants.NUMBER_500)
-            .width($r('app.float.default_150'))
-            .height($r('app.float.default_40'))
-            .onClick(async () => {
-              if (!this.isUpdate) {
-                CommonUtils.showToast($r('app.string.rollback_failed'));
-              } else {
-                dbUtils.restore(() => {
-                  dbUtils.queryData(this.flags).then((value: User) => {
-                    this.res = value;
-                    CommonUtils.showToast($r('app.string.rollback_success'));
-                  })
-                });
-                this.isUpdate = false;
-                this.flags[this.index]--;
+            Column() {
+              if (this.flags[0] <= 0 && this.flags[1] <= 0 && this.flags[2] <= 0 && this.flags[3] <= 0) {
+                Text($r('app.string.user_info'))
+                  .width('100%')
+                  .fontWeight(CommonConstants.NUMBER_500)
+                  .fontSize($r('app.float.default_font_16'))
+                  .alignSelf(ItemAlign.Start)
+                  .fontColor($r('sys.color.font_secondary'))
               }
-            })
-        }
-        .width($r('app.float.default_312'))
-        .height($r('app.float.default_40'))
-        .justifyContent(FlexAlign.Start)
-        .margin({ top: $r('app.float.default_24') })
-      }
-      .borderRadius($r('app.float.default_16'))
-      .backgroundColor($r('app.color.input_background'))
-      .width($r('app.float.default_336'))
-      .height($r('app.float.default_176'))
 
-      Column() {
-        Column() {
-          Text($r('app.string.user_info'))
-            .width($r('app.float.default_288'))
-            .height($r('app.float.default_56'))
-            .fontWeight(CommonConstants.NUMBER_500)
-            .fontSize($r('app.float.default_font_20'))
-        }
-        .justifyContent(FlexAlign.Center)
-        .alignItems(HorizontalAlign.Start)
-        .width($r('app.float.default_312'))
-        .height($r('app.float.default_56'))
+              Column() {
+                Row() {
+                  if (this.flags[0] > 0) {
+                    Text($r('app.string.username'))
+                      .fontSize($r('app.float.default_font_16'))
+                      .fontWeight(CommonConstants.NUMBER_500)
+                      .textAlign(TextAlign.Center)
+                      .margin({ right: 12 })
+                    Text(this.res?.name)
+                      .textAlign(TextAlign.Center)
+                      .fontSize($r('app.float.default_font_16'))
+                      .fontWeight(CommonConstants.NUMBER_400)
+                  }
+                }
+                .width('100%')
+                .justifyContent(FlexAlign.Start)
+                .height(this.flags[0] > 0 ? 32 : $r('app.float.default_0'))
 
-        Row() {
-          if (this.flags[0] > 0) {
-            Text($r('app.string.username'))
-              .fontSize($r('app.float.default_font_16'))
-              .fontWeight(CommonConstants.NUMBER_500)
-              .textAlign(TextAlign.Center)
-            Text(this.res?.name)
-              .textAlign(TextAlign.Center)
-              .fontSize($r('app.float.default_font_14'))
-              .fontWeight(CommonConstants.NUMBER_400)
-          }
-        }
-        .justifyContent(FlexAlign.SpaceBetween)
-        .width($r('app.float.default_312'))
-        .height(this.flags[0] > 0 ? $r('app.float.default_48') : $r('app.float.default_0'))
+                Row() {
+                  if (this.flags[1] > 0) {
+                    Text($r('app.string.account'))
+                      .fontSize($r('app.float.default_font_16'))
+                      .fontWeight(CommonConstants.NUMBER_500)
+                      .textAlign(TextAlign.Center)
+                      .margin({ right: 12 })
+                    Text(this.res?.account)
+                      .textAlign(TextAlign.Center)
+                      .fontSize($r('app.float.default_font_16'))
+                      .fontWeight(CommonConstants.NUMBER_400)
+                  }
+                }
+                .width('100%')
+                .justifyContent(FlexAlign.Start)
+                .height(this.flags[1] > 0 ? 32 : $r('app.float.default_0'))
 
-        Row() {
-          if (this.flags[1] > 0) {
-            Text($r('app.string.account'))
-              .fontSize($r('app.float.default_font_16'))
-              .fontWeight(CommonConstants.NUMBER_500)
-              .textAlign(TextAlign.Center)
-            Text(this.res?.account)
-              .textAlign(TextAlign.Center)
-              .fontSize($r('app.float.default_font_14'))
-              .fontWeight(CommonConstants.NUMBER_400)
-          }
-        }
-        .justifyContent(FlexAlign.SpaceBetween)
-        .width($r('app.float.default_312'))
-        .height(this.flags[1] > 0 ? $r('app.float.default_48') : $r('app.float.default_0'))
+                Row() {
+                  if (this.flags[2] > 0) {
+                    Text($r('app.string.nickname'))
+                      .fontSize($r('app.float.default_font_16'))
+                      .fontWeight(CommonConstants.NUMBER_500)
+                      .textAlign(TextAlign.Center)
+                      .margin({ right: 12 })
+                    Text(this.res?.nickname)
+                      .textAlign(TextAlign.Center)
+                      .fontSize($r('app.float.default_font_16'))
+                      .fontWeight(CommonConstants.NUMBER_400)
+                  }
+                }
+                .width('100%')
+                .justifyContent(FlexAlign.Start)
+                .height(this.flags[2] > 0 ? 32 : $r('app.float.default_0'))
 
-        Row() {
-          if (this.flags[2] > 0) {
-            Text($r('app.string.nickname'))
-              .fontSize($r('app.float.default_font_16'))
-              .fontWeight(CommonConstants.NUMBER_500)
-              .textAlign(TextAlign.Center)
-            Text(this.res?.nickname)
-              .textAlign(TextAlign.Center)
-              .fontSize($r('app.float.default_font_14'))
-              .fontWeight(CommonConstants.NUMBER_400)
+                Row() {
+                  if (this.flags[3] > 0) {
+                    Text($r('app.string.age'))
+                      .fontSize($r('app.float.default_font_16'))
+                      .fontWeight(CommonConstants.NUMBER_500)
+                      .textAlign(TextAlign.Center)
+                      .margin({ right: 12 })
+                    Text(this.res?.age)
+                      .textAlign(TextAlign.Center)
+                      .fontSize($r('app.float.default_font_16'))
+                      .fontWeight(CommonConstants.NUMBER_400)
+                  }
+                }
+                .width('100%')
+                .justifyContent(FlexAlign.Start)
+                .height(this.flags[3] > 0 ? 32 : $r('app.float.default_0'))
+              }
+              .margin({ top: $r('sys.float.padding_level4') })
+              .justifyContent(FlexAlign.SpaceEvenly)
+            }
+            .padding($r('sys.float.padding_level6'))
+            .width('100%')
+            .borderRadius($r('app.float.default_16'))
+            .height($r('app.float.default_176'))
+            .backgroundColor($r('sys.color.comp_background_primary'))
           }
         }
-        .justifyContent(FlexAlign.SpaceBetween)
-        .width($r('app.float.default_312'))
-        .height(this.flags[2] > 0 ? $r('app.float.default_48') : $r('app.float.default_0'))
+        .width('100%')
 
-        Row() {
-          if (this.flags[3] > 0) {
-            Text($r('app.string.age'))
-              .fontSize($r('app.float.default_font_16'))
+        FlowItem() {
+          Column() {
+            Text($r('app.string.user_info_set'))
+              .width('100%')
               .fontWeight(CommonConstants.NUMBER_500)
-              .textAlign(TextAlign.Center)
-            Text(this.res?.age)
-              .textAlign(TextAlign.Center)
-              .fontSize($r('app.float.default_14'))
-              .fontWeight(CommonConstants.NUMBER_400)
+              .fontSize($r('app.float.default_font_18'))
+              .alignSelf(ItemAlign.Start)
+              .fontColor($r('sys.color.font_secondary'))
+              .padding({ left: $r('sys.float.padding_level6'), bottom: $r('sys.float.padding_level4') })
+            Column() {
+              Row() {
+                Text($r('app.string.input_field'))
+                  .fontWeight(CommonConstants.NUMBER_500)
+                  .fontSize($r('app.float.default_font_16'))
+                Select([
+                  { value: $r('app.string.username') },
+                  { value: $r('app.string.account') },
+                  { value: $r('app.string.nickname') },
+                  { value: $r('app.string.age') }
+                ])
+                  .backgroundColor($r('sys.color.comp_background_primary'))
+                  .selected(0)
+                  .fontColor($r('sys.color.font_primary'))
+                  .font({ weight: CommonConstants.NUMBER_500, size: $r('sys.float.ohos_id_text_size_button1') })
+                  .value($r('app.string.username'))
+                  .onSelect((index: number) => {
+                    this.index = index;
+                  })
+              }
+              .padding({ left: $r('sys.float.padding_level6') })
+              .borderRadius($r('sys.float.corner_radius_level8'))
+              .backgroundColor($r('sys.color.comp_background_primary'))
+              .justifyContent(FlexAlign.SpaceBetween)
+              .width('100%')
+              .height($r('app.float.default_56'))
+
+              Row() {
+                Text($r('app.string.field_value'))
+                  .fontWeight(CommonConstants.NUMBER_500)
+                  .fontSize($r('app.float.default_font_16'))
+                TextInput({ placeholder: $r('app.string.input') })
+                  .fontSize($r('app.float.default_14'))
+                  .textAlign(TextAlign.End)
+                  .enableKeyboardOnFocus(false)
+                  .backgroundColor($r('sys.color.comp_background_primary'))
+                  .width(new BreakpointType(150, 150, 300).GetValue(this.curBp))
+                  .onChange((value: string) => {
+                    this.content = value;
+                  })
+              }
+              .padding({ left: $r('sys.float.padding_level6') })
+              .borderRadius($r('sys.float.corner_radius_level8'))
+              .backgroundColor($r('sys.color.comp_background_primary'))
+              .justifyContent(FlexAlign.SpaceBetween)
+              .width('100%')
+              .height($r('app.float.default_56'))
+
+              Row() {
+                Button($r('app.string.version_rollback'))
+                  .backgroundColor($r('app.color.rollback_background'))
+                  .opacity(!this.isUpdate ? 0.5 : 1)
+                  .fontColor($r('app.color.font_color'))
+                  .fontSize($r('app.float.default_font_16'))
+                  .fontWeight(CommonConstants.NUMBER_500)
+                  .width($r('app.float.default_150'))
+                  .height($r('app.float.default_40'))
+                  .onClick(async () => {
+                    if (!this.isUpdate) {
+                      CommonUtils.showToast($r('app.string.rollback_failed'));
+                    } else {
+                      dbUtils.restore(() => {
+                        dbUtils.queryData(this.flags).then((value: User) => {
+                          this.res = value;
+                          CommonUtils.showToast($r('app.string.rollback_success'));
+                        })
+                      });
+                      this.isUpdate = false;
+                      this.flags[this.index]--;
+                    }
+                  })
+                Button($r('app.string.version_update'))
+                  .fontSize($r('app.float.default_font_16'))
+                  .fontWeight(CommonConstants.NUMBER_500)
+                  .width($r('app.float.default_150'))
+                  .height($r('app.float.default_40'))
+                  .onClick(() => {
+                    this.isCanceled = false;
+                    this.dialogController.open();
+                  })
+              }
+              .width('100%')
+              .height($r('app.float.default_40'))
+              .justifyContent(FlexAlign.SpaceAround)
+            }
+            .justifyContent(FlexAlign.SpaceBetween)
+            .height($r('app.float.default_176'))
           }
         }
-        .justifyContent(FlexAlign.SpaceBetween)
-        .width($r('app.float.default_312'))
-        .height(this.flags[3] > 0 ? $r('app.float.default_48') : $r('app.float.default_0'))
+        .margin({
+          top: new BreakpointType($r('sys.float.padding_level16'), $r('sys.float.padding_level0'),
+            $r('sys.float.padding_level0')).GetValue(this.curBp)
+        })
       }
-      .borderRadius($r('app.float.default_16'))
-      .margin({ top: $r('app.float.default_12') })
-      .backgroundColor($r('app.color.input_background'))
-      .width($r('app.float.default_336'))
-      .height($r('app.float.default_256'))
+      .columnsGap($r('sys.float.padding_level6'))
+      .columnsTemplate(new BreakpointType('1fr', '1fr 1fr', '1fr 1fr').GetValue(this.curBp))
     }
+    .padding({
+      top: px2vp(this.topRectHeight),
+      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),
+    })
     .width(CommonConstants.PERCENT_WIDTH)
     .height(CommonConstants.PERCENT_WIDTH)
-    .backgroundColor($r('app.color.start_window_background'))
+    .backgroundColor($r('sys.color.background_secondary'))
   }
 }
diff --git a/entry/src/main/module.json5 b/entry/src/main/module.json5
index 8a7a1606e2be5ec1a7c4332d3293d7593c2a4f13..6c07d9d8839ac9716809c6e06c21805d52c138fe 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/dimen.json b/entry/src/main/resources/base/element/dimen.json
index cd1964923b670c2ea17d5f8fd9124d6f6b50ff34..1475a58819e938566afd1b6d7a76a95d412295e9 100644
--- a/entry/src/main/resources/base/element/dimen.json
+++ b/entry/src/main/resources/base/element/dimen.json
@@ -118,7 +118,7 @@
     },
     {
       "name": "default_150",
-      "value": "150vp"
+      "value": "120vp"
     },
     {
       "name": "default_176",
@@ -134,7 +134,7 @@
     },
     {
       "name": "default_256",
-      "value": "256vp"
+      "value": "230vp"
     },
     {
       "name": "default_29",
@@ -160,6 +160,10 @@
       "name": "default_font_16",
       "value": "16fp"
     },
+    {
+      "name": "default_font_18",
+      "value": "18fp"
+    },
     {
       "name": "default_font_14",
       "value": "14fp"
diff --git a/entry/src/main/resources/base/element/float.json b/entry/src/main/resources/base/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..b85133fb4b8b31a372b44956815e8c5fd5617764
--- /dev/null
+++ b/entry/src/main/resources/base/element/float.json
@@ -0,0 +1,12 @@
+{
+  "float": [
+    {
+      "name": "big_font_size",
+      "value": "30fp"
+    },
+    {
+      "name": "list_item_height",
+      "value": "56vp"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/entry/src/main/resources/base/element/string.json b/entry/src/main/resources/base/element/string.json
index 651a4dc29e9ef85734b10c04aa7939df70ea82d5..0390cab6c015d75196ddd0cb181f3c4221a06bd5 100644
--- a/entry/src/main/resources/base/element/string.json
+++ b/entry/src/main/resources/base/element/string.json
@@ -22,7 +22,7 @@
     },
     {
       "name": "input_field",
-      "value": "Select the field to add."
+      "value": "Field Name"
     },
     {
       "name": "field_value",
@@ -62,7 +62,7 @@
     },
     {
       "name": "user_info",
-      "value": "User info"
+      "value": "Please fill in the user information first"
     },
     {
       "name": "updating",
@@ -75,6 +75,22 @@
     {
       "name": "update_success",
       "value": "The update is successful"
+    },
+    {
+      "name": "title",
+      "value": "Database backup and recovery"
+    },
+    {
+      "name": "user_info_show",
+      "value": "User information display"
+    },
+    {
+      "name": "user_info_set",
+      "value": "User Information Settings"
+    },
+    {
+      "name": "input",
+      "value": "Input"
     }
   ]
 }
\ No newline at end of file
diff --git a/entry/src/main/resources/en_US/element/string.json b/entry/src/main/resources/en_US/element/string.json
index 651a4dc29e9ef85734b10c04aa7939df70ea82d5..0390cab6c015d75196ddd0cb181f3c4221a06bd5 100644
--- a/entry/src/main/resources/en_US/element/string.json
+++ b/entry/src/main/resources/en_US/element/string.json
@@ -22,7 +22,7 @@
     },
     {
       "name": "input_field",
-      "value": "Select the field to add."
+      "value": "Field Name"
     },
     {
       "name": "field_value",
@@ -62,7 +62,7 @@
     },
     {
       "name": "user_info",
-      "value": "User info"
+      "value": "Please fill in the user information first"
     },
     {
       "name": "updating",
@@ -75,6 +75,22 @@
     {
       "name": "update_success",
       "value": "The update is successful"
+    },
+    {
+      "name": "title",
+      "value": "Database backup and recovery"
+    },
+    {
+      "name": "user_info_show",
+      "value": "User information display"
+    },
+    {
+      "name": "user_info_set",
+      "value": "User Information Settings"
+    },
+    {
+      "name": "input",
+      "value": "Input"
     }
   ]
 }
\ No newline at end of file
diff --git a/entry/src/main/resources/zh_CN/element/string.json b/entry/src/main/resources/zh_CN/element/string.json
index f099ac8884d3c777505b26f8fe6b8308bd90fef5..753b21e5dc43aa7f4fb5810d9ccbc70119522e9d 100644
--- a/entry/src/main/resources/zh_CN/element/string.json
+++ b/entry/src/main/resources/zh_CN/element/string.json
@@ -22,7 +22,7 @@
     },
     {
       "name": "input_field",
-      "value": "请选择你要添加的字段名"
+      "value": "字段名"
     },
     {
       "name": "field_value",
@@ -62,7 +62,7 @@
     },
     {
       "name": "user_info",
-      "value": "用户信息展示"
+      "value": "请先填写用户信息"
     },
     {
       "name": "updating",
@@ -75,6 +75,22 @@
     {
       "name": "update_success",
       "value": "更新成功"
+    },
+    {
+      "name": "title",
+      "value": "数据库备份与恢复"
+    },
+    {
+      "name": "user_info_show",
+      "value": "用户信息展示"
+    },
+    {
+      "name": "user_info_set",
+      "value": "用户信息填写"
+    },
+    {
+      "name": "input",
+      "value": "输入内容"
     }
   ]
 }
\ No newline at end of file