diff --git a/README.en.md b/README.en.md
deleted file mode 100644
index be1dd0597463c33afcb4d85e0e165520cefb3e0b..0000000000000000000000000000000000000000
--- a/README.en.md
+++ /dev/null
@@ -1,36 +0,0 @@
-# StatusManagementV2
-
-#### Description
-此Codelab主要介绍状态管理V2所属装饰器的含义和使用场景。
-
-#### Software Architecture
-Software architecture description
-
-#### Installation
-
-1.  xxxx
-2.  xxxx
-3.  xxxx
-
-#### Instructions
-
-1.  xxxx
-2.  xxxx
-3.  xxxx
-
-#### Contribution
-
-1.  Fork the repository
-2.  Create Feat_xxx branch
-3.  Commit your code
-4.  Create Pull Request
-
-
-#### Gitee Feature
-
-1.  You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
-2.  Gitee blog [blog.gitee.com](https://blog.gitee.com)
-3.  Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
-4.  The most valuable open source project [GVP](https://gitee.com/gvp)
-5.  The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
-6.  The most popular members  [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
diff --git a/README.md b/README.md
index 266d6bb92e3922bcf73a07dcf5d1a2c99525aad2..02e7915c13fb4b95f631e0d7895f23e22a64b60a 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# 实现状态管理V2装饰器原子级场景
+# 实现状态管理V2装饰器场景
 
 ## 项目简介
 
@@ -67,7 +67,7 @@
 
 ## 约束与限制
 
-1. 本示例仅支持标准系统上运行，支持设备：华为手机。
+1. 本示例仅支持标准系统上运行，支持设备：手机。
 2. HarmonyOS系统：HarmonyOS 6.0.0 Release及以上。
 3. DevEco Studio版本：DevEco Studio 6.0.0 Release及以上。
 4. HarmonyOS SDK版本：HarmonyOS 6.0.0 Release SDK及以上。
\ No newline at end of file
diff --git a/entry/src/main/ets/pages/ComponentInternalStatus.ets b/entry/src/main/ets/pages/ComponentInternalStatus.ets
index e9d251ce8e0c98b5e93c2a5d45a3616fd1a8bbf8..a0b65943a6f3009d2e926c3822d428e38b8e751d 100644
--- a/entry/src/main/ets/pages/ComponentInternalStatus.ets
+++ b/entry/src/main/ets/pages/ComponentInternalStatus.ets
@@ -14,10 +14,10 @@
  */
 
 /*
- * @Local装饰器：组件内部状态
- * 当被@Local装饰的变量变化时，会刷新使用该变量的组件
- * 组件内状态
- * 01-定义组件内状态
+ * @Local Decorator: Internal state of the component
+ * When a variable decorated with @Local changes, the component that uses that variable will be refreshed
+ * The state within the component
+ * 01- Define the state within the component
  */
 @Entry
 @ComponentV2
@@ -26,57 +26,102 @@ struct ComponentInternalStatus {
   public value2: number = 0;
 
   build() {
-    Column({ space: 20 }) {
-      Text($r('app.string.counter'))
-        .fontSize(40)
-        .fontWeight(FontWeight.Bold)
-        .fontColor('#1E40AF')
-        .margin({ bottom: 60 })
-      Row() {
-        Text('value1：')
-          .fontSize(40)
-          .fontWeight(FontWeight.Bold)
-          .fontColor('#1E40AF')
-        Text(this.value1.toString())
-          .fontSize(40)
-          .fontWeight(FontWeight.Bold)
-          .fontColor('#1E40AF')
-      }
-
-      Row() {
-        Text('value2：')
-          .fontSize(40)
-          .fontWeight(FontWeight.Bold)
-          .fontColor('#1E40AF')
-        Text(this.value2.toString())
-          .fontSize(40)
-          .fontWeight(FontWeight.Bold)
-          .fontColor('#1E40AF')
-      }
-
-      Row({ space: 20 }) {
-        Button($r('app.string.count', '-1'))
-          .fontSize(24)
-          .fontWeight(FontWeight.Medium)
-          .fontColor(Color.White)
-          .backgroundColor('#3B82F6')
-          .borderRadius(12)
-          .onClick(() => {
-            this.value1--;
-            this.value2--;
+    Column() {
+      Column() {
+        Column({ space: 20 }) {
+          Text($r('app.string.counter'))
+            .fontSize(22)
+            .fontWeight(FontWeight.Bold)
+          Row() {
+            Text('value1')
+              .fontSize(22)
+              .fontWeight(FontWeight.Bold)
+            Text(this.value1.toString())
+              .fontSize(40)
+              .fontColor('rgba(10, 89, 247, 1)')
+              .fontWeight(FontWeight.Bold)
+          }
+          .justifyContent(FlexAlign.SpaceBetween)
+          .padding({
+            left: 15,
+            right: 15,
+            top: 10,
+            bottom: 10
           })
+          .width('90%')
+          .borderWidth(1)
+          .borderRadius(25)
+          .borderColor('rgba(10, 89, 247, 1)')
 
-        Button($r('app.string.count', '+1'))
-          .fontSize(24)
-          .fontWeight(FontWeight.Medium)
-          .fontColor(Color.White)
-          .backgroundColor('#3B82F6')
-          .borderRadius(12)
-          .onClick(() => {
-            this.value1++;
-            this.value2++;
+          Row() {
+            Text('value2')
+              .fontSize(22)
+              .fontWeight(FontWeight.Bold)
+            Text(this.value2.toString())
+              .fontSize(40)
+              .fontColor('rgba(10, 89, 247, 1)')
+              .fontWeight(FontWeight.Bold)
+          }
+          .justifyContent(FlexAlign.SpaceBetween)
+          .width('90%')
+          .padding({
+            left: 15,
+            right: 15,
+            top: 10,
+            bottom: 10
           })
-      }.margin({ top: 60 })
+          .borderWidth(1)
+          .borderRadius(25)
+          .borderColor('rgba(10, 89, 247, 1)')
+
+          Row({ space: 20 }) {
+            Button('-1')
+              .fontSize(20)
+              .fontWeight(FontWeight.Bold)
+              .fontColor('rgba(10, 89, 247, 1)')
+              .width('45%')
+              .height(46)
+              .backgroundColor('rgba(10, 89, 247, 0.1)')
+              .borderWidth(1)
+              .borderRadius(23)
+              .borderColor('rgba(10, 89, 247, 1)')
+              .onClick(() => {
+                this.value1--;
+                this.value2--;
+              })
+
+            Button('+1')
+              .fontSize(20)
+              .fontWeight(FontWeight.Bold)
+              .fontColor('rgba(10, 89, 247, 1)')
+              .width('45%')
+              .height(46)
+              .backgroundColor('rgba(10, 89, 247, 0.1)')
+              .borderWidth(1)
+              .borderRadius(23)
+              .borderColor('rgba(10, 89, 247, 1)')
+              .onClick(() => {
+                this.value1++;
+                this.value2++;
+              })
+          }
+          .width('90%')
+          .justifyContent(FlexAlign.SpaceBetween)
+          .margin({ top: 10 })
+        }
+        .width('85%')
+        .justifyContent(FlexAlign.Center)
+        .backgroundColor(Color.White)
+        .borderWidth(1)
+        .borderRadius(25)
+        .borderColor('rgba(10, 89, 247, 1)')
+        .padding({ top: 17, bottom: 17 })
+      }
+      .width(326)
+      .height(370)
+      .justifyContent(FlexAlign.Center)
+      .backgroundColor('rgba(10, 89, 247, 0.1)')
+      .borderRadius(25)
     }
     .width('100%')
     .height('100%')
diff --git a/entry/src/main/ets/pages/EventCommunication.ets b/entry/src/main/ets/pages/EventCommunication.ets
index f71ed529451698c94cf6a46998bbed5deec30417..4c6664f33135d0dd602685796d6bf0735432e902 100644
--- a/entry/src/main/ets/pages/EventCommunication.ets
+++ b/entry/src/main/ets/pages/EventCommunication.ets
@@ -14,10 +14,10 @@
  */
 
 /*
- * @Event装饰器：规范组件输出
- * @Event主要配合@Param实现数据的双向同步。
- * 事件通讯
- * 03-事件通信
+ * @Event decorator: Standardizes component output
+ * @Event mainly works in conjunction with @Param to achieve bidirectional data synchronization.
+ * Event Communication
+ * 03- Event Communication
  */
 @ComponentV2
 struct Child {
@@ -26,29 +26,53 @@ struct Child {
 
   build() {
     Column({ space: 10 }) {
-      Text('Child')
-        .fontSize(30)
-        .fontWeight(FontWeight.Bold)
-        .fontColor('#1E40AF')
-      Text(`Child index：${this.index}`)
-        .fontSize(36)
-        .fontWeight(FontWeight.Bold)
-        .fontColor('#1E40AF')
-      Button('Change to 20')
-        .fontSize(24)
-        .fontWeight(FontWeight.Medium)
-        .fontColor(Color.White)
-        .backgroundColor('#3B82F6')
-        .borderRadius(12)
-        .onClick(() => {
-          this.changeIndex(20);
-        })
+      Row() {
+        Text('Child')
+          .fontSize(18)
+          .fontWeight(700)
+          .fontColor(Color.Black)
+      }
+
+      Row() {
+        Text(this.index.toString())
+          .fontSize(36)
+          .fontWeight(700)
+          .fontColor(Color.Black)
+      }
+
+      Row() {
+        Text('Child index')
+          .fontSize(14)
+          .fontWeight(400)
+          .fontColor('rgba(0,0,0,0.6)')
+      }
+
+      Row() {
+        Button('Change to 20')
+          .width(228)
+          .height(40)
+          .fontSize(18)
+          .fontWeight(700)
+          .fontColor('rgba(10,89,247,1)')
+          .backgroundColor('rgba(10,89,247,0.1)')
+          .borderRadius(23)
+          .borderWidth(1)
+          .borderColor('rgba(10,89,247,1)')
+          .onClick(() => {
+            this.changeIndex(20);
+          })
+      }
+      .margin({ top: 14 })
     }
+    .width(260)
+    .height(195)
+    .margin({ left: 16, right: 16, bottom: 16 })
+    .padding(16)
     .backgroundColor(Color.White)
-    .padding(20)
-    .borderRadius(12)
-    .borderWidth(2)
-    .borderColor('#3B82F6')
+    .borderRadius(25)
+    .borderWidth(1)
+    .borderColor('rgba(10,89,247,1)')
+    .alignItems(HorizontalAlign.Start)
   }
 }
 
@@ -58,21 +82,30 @@ struct Parent {
   @Local index: number = 0;
 
   build() {
-    Column({ space: 20 }) {
-      Text('Parent')
-        .fontSize(30)
-        .fontWeight(FontWeight.Bold)
-        .fontColor('#1E40AF')
-      Child({
-        index: this.index,
-        changeIndex: (val: number) => {
-          this.index = val;
+    Column() {
+      Column() {
+        Row() {
+          Text('Parent')
+            .fontSize(18)
+            .fontWeight(700)
+            .fontColor(Color.Black)
         }
-      })
+        .height(48)
+
+        Child({
+          index: this.index,
+          changeIndex: (val: number) => {
+            this.index = val;
+          }
+        })
+      }
+      .width(292)
+      .height(259)
+      .backgroundColor('rgba(10,89,247,0.1)')
+      .borderRadius(25)
     }
     .width('100%')
     .height('100%')
-    .backgroundColor($r('app.color.pages_background'))
     .justifyContent(FlexAlign.Center)
   }
 }
\ No newline at end of file
diff --git a/entry/src/main/ets/pages/EventSynchronizationAfter.ets b/entry/src/main/ets/pages/EventSynchronizationAfter.ets
index 641e91dd0d0a0b08d1484193da2133bfd263d372..6258d7fac3b6b106432e832e3837c49723f90710 100644
--- a/entry/src/main/ets/pages/EventSynchronizationAfter.ets
+++ b/entry/src/main/ets/pages/EventSynchronizationAfter.ets
@@ -14,10 +14,10 @@
  */
 
 /*
- * @Provider装饰器和@Consumer装饰器：跨组件层级双向同步
- * @Provider和@Consumer用于跨组件层级数据双向同步，可以使得开发者不用拘泥于组件层级。
- * 事件同步优化后
- * 04-跨组件共享状态-事件同步
+ * @Provider decorator and @Consumer decorator: Bidirectional synchronization across component levels
+ * @Provider and @Consumer are used for two-way data synchronization across component levels, which enables developers to avoid being confined to the component level.
+ * After event synchronization optimization
+ * 04- Sharing status across components - Event synchronization
  */
 @ComponentV2
 struct Child {
@@ -27,50 +27,76 @@ struct Child {
 
   build() {
     Column({ space: 10 }) {
-      Text('Child')
-        .fontSize(30)
-        .fontWeight(FontWeight.Bold)
-        .fontColor('#1E40AF')
-      Text(`Child index：${this.index}`)
-        .fontSize(36)
-        .fontWeight(FontWeight.Bold)
-        .fontColor('#1E40AF')
-      Button('Change to 20')
-        .fontSize(24)
-        .fontWeight(FontWeight.Medium)
-        .fontColor(Color.White)
-        .backgroundColor('#3B82F6')
-        .borderRadius(12)
-        .onClick(() => {
-          this.changeIndex(20);
-        })
+      Row() {
+        Text('Child')
+          .fontSize(18)
+          .fontWeight(700)
+          .fontColor(Color.Black)
+      }
+
+      Row() {
+        Text(this.index.toString())
+          .fontSize(36)
+          .fontWeight(700)
+          .fontColor(Color.Black)
+      }
+
+      Row() {
+        Text('Child index')
+          .fontSize(14)
+          .fontWeight(400)
+          .fontColor('rgba(0,0,0,0.6)')
+      }
+
+      Row() {
+        Button('Change to 20')
+          .width(228)
+          .height(40)
+          .fontSize(18)
+          .fontWeight(700)
+          .fontColor('rgba(10,89,247,1)')
+          .backgroundColor('rgba(10,89,247,0.1)')
+          .borderRadius(23)
+          .borderWidth(1)
+          .borderColor('rgba(10,89,247,1)')
+          .onClick(() => {
+            this.changeIndex(20);
+          })
+      }
+      .margin({ top: 14 })
     }
+    .width(260)
+    .height(195)
+    .margin({ left: 16, right: 16, bottom: 12 })
+    .padding(16)
     .backgroundColor(Color.White)
-    .padding(20)
-    .borderRadius(12)
-    .borderWidth(2)
-    .borderColor('#87B6EE')
+    .borderRadius(25)
+    .borderWidth(1)
+    .borderColor('rgba(10,89,247,1)')
+    .alignItems(HorizontalAlign.Start)
   }
 }
 
 @ComponentV2
 struct ChildList {
   build() {
-    Column({ space: 10 }) {
-      Text('ChildList')
-        .fontSize(30)
-        .fontWeight(FontWeight.Bold)
-        .fontColor('#1E40AF')
+    Column() {
+      Row() {
+        Text('ChildList')
+          .fontSize(18)
+          .fontWeight(700)
+          .fontColor(Color.Black)
+      }
+      .height(48)
 
       Child()
       Child()
       Child()
     }
-    .backgroundColor('#EDF5FD')
-    .padding(20)
-    .borderRadius(12)
-    .borderWidth(2)
-    .borderColor('#3B82F6')
+    .width(292)
+    .height(673)
+    .backgroundColor('rgba(10,89,247,0.1)')
+    .borderRadius(25)
   }
 }
 
@@ -83,17 +109,25 @@ struct Parent {
   }
 
   build() {
-    Column({ space: 20 }) {
-      Text('Parent')
-        .fontSize(30)
-        .fontWeight(FontWeight.Bold)
-        .fontColor('#1E40AF')
-      ChildList()
+    Column() {
+      Column() {
+        Row() {
+          Text('Parent')
+            .fontSize(18)
+            .fontWeight(700)
+            .fontColor(Color.Black)
+        }
+        .height(48)
+
+        ChildList()
+      }
+      .width(340)
+      .height(745)
+      .backgroundColor('rgba(10,89,247,0.05)')
+      .borderRadius(25)
     }
     .width('100%')
     .height('100%')
-    .backgroundColor($r('app.color.pages_background'))
-    .padding({ top: 20 })
-    .justifyContent(FlexAlign.Start)
+    .justifyContent(FlexAlign.Center)
   }
 }
\ No newline at end of file
diff --git a/entry/src/main/ets/pages/EventSynchronizationBefore.ets b/entry/src/main/ets/pages/EventSynchronizationBefore.ets
index cadf5959f1ff2ac100a28a8e619ae9721ebbfce6..b2f53e32d2daf314f54fadd9da3dd4dc749ac0ac 100644
--- a/entry/src/main/ets/pages/EventSynchronizationBefore.ets
+++ b/entry/src/main/ets/pages/EventSynchronizationBefore.ets
@@ -14,9 +14,9 @@
  */
 
 /*
- * @Event主要配合@Param实现数据的双向同步。
- * 事件同步优化前
- * 04-跨组件共享状态-事件同步
+ * @Event mainly works in conjunction with @Param to achieve bidirectional data synchronization.
+ * Before event synchronization optimization
+ * 04- Sharing status across components - Event synchronization
  */
 @ComponentV2
 struct Child {
@@ -25,29 +25,53 @@ struct Child {
 
   build() {
     Column({ space: 10 }) {
-      Text('Child')
-        .fontSize(30)
-        .fontWeight(FontWeight.Bold)
-        .fontColor('#1E40AF')
-      Text(`Child index：${this.index}`)
-        .fontSize(36)
-        .fontWeight(FontWeight.Bold)
-        .fontColor('#1E40AF')
-      Button('Change to 20')
-        .fontSize(24)
-        .fontWeight(FontWeight.Medium)
-        .fontColor(Color.White)
-        .backgroundColor('#3B82F6')
-        .borderRadius(12)
-        .onClick(() => {
-          this.changeIndex(20);
-        })
+      Row() {
+        Text('Child')
+          .fontSize(18)
+          .fontWeight(700)
+          .fontColor(Color.Black)
+      }
+
+      Row() {
+        Text(this.index.toString())
+          .fontSize(36)
+          .fontWeight(700)
+          .fontColor(Color.Black)
+      }
+
+      Row() {
+        Text('Child index')
+          .fontSize(14)
+          .fontWeight(400)
+          .fontColor('rgba(0,0,0,0.6)')
+      }
+
+      Row() {
+        Button('Change to 20')
+          .width(228)
+          .height(40)
+          .fontSize(18)
+          .fontWeight(700)
+          .fontColor('rgba(10,89,247,1)')
+          .backgroundColor('rgba(10,89,247,0.1)')
+          .borderRadius(23)
+          .borderWidth(1)
+          .borderColor('rgba(10,89,247,1)')
+          .onClick(() => {
+            this.changeIndex(20);
+          })
+      }
+      .margin({ top: 14 })
     }
+    .width(260)
+    .height(195)
+    .margin({ left: 16, right: 16, bottom: 12 })
+    .padding(16)
     .backgroundColor(Color.White)
-    .padding(20)
-    .borderRadius(12)
-    .borderWidth(2)
-    .borderColor('#87B6EE')
+    .borderRadius(25)
+    .borderWidth(1)
+    .borderColor('rgba(10,89,247,1)')
+    .alignItems(HorizontalAlign.Start)
   }
 }
 
@@ -56,21 +80,23 @@ struct ChildList {
   @Event changeIndex: (val: number) => void;
 
   build() {
-    Column({ space: 10 }) {
-      Text('ChildList')
-        .fontSize(30)
-        .fontWeight(FontWeight.Bold)
-        .fontColor('#1E40AF')
+    Column() {
+      Row() {
+        Text('ChildList')
+          .fontSize(18)
+          .fontWeight(700)
+          .fontColor(Color.Black)
+      }
+      .height(48)
 
       Child({ changeIndex: this.changeIndex })
       Child({ changeIndex: this.changeIndex })
       Child({ changeIndex: this.changeIndex })
     }
-    .backgroundColor('#EDF5FD')
-    .padding(20)
-    .borderRadius(12)
-    .borderWidth(2)
-    .borderColor('#3B82F6')
+    .width(292)
+    .height(673)
+    .backgroundColor('rgba(10,89,247,0.1)')
+    .borderRadius(25)
   }
 }
 
@@ -80,21 +106,29 @@ struct Parent {
   @Provider('index') index: number = 0;
 
   build() {
-    Column({ space: 20 }) {
-      Text('Parent')
-        .fontSize(30)
-        .fontWeight(FontWeight.Bold)
-        .fontColor('#1E40AF')
-      ChildList({
-        changeIndex: (val: number) => {
-          this.index = val;
+    Column() {
+      Column() {
+        Row() {
+          Text('Parent')
+            .fontSize(18)
+            .fontWeight(700)
+            .fontColor(Color.Black)
         }
-      })
+        .height(48)
+
+        ChildList({
+          changeIndex: (val: number) => {
+            this.index = val;
+          }
+        })
+      }
+      .width(340)
+      .height(745)
+      .backgroundColor('rgba(10,89,247,0.05)')
+      .borderRadius(25)
     }
     .width('100%')
     .height('100%')
-    .backgroundColor($r('app.color.pages_background'))
-    .padding({ top: 20 })
-    .justifyContent(FlexAlign.Start)
+    .justifyContent(FlexAlign.Center)
   }
 }
\ No newline at end of file
diff --git a/entry/src/main/ets/pages/Monitoring.ets b/entry/src/main/ets/pages/Monitoring.ets
index 08154786e67cba1bd060b28d55f1bcf807589f59..3fff3cc2fe5c534d403fa73d934298ba88adcc22 100644
--- a/entry/src/main/ets/pages/Monitoring.ets
+++ b/entry/src/main/ets/pages/Monitoring.ets
@@ -14,9 +14,9 @@
  */
 
 /*
- * @Monitor装饰器：状态变量修改监听
- * 状态监听
- * 06-监听状态变化
+ * @Monitor Decorator: Listener for modifying state variables
+ * Status monitoring
+ * 06- Monitor status changes
  */
 @Entry
 @ComponentV2
@@ -30,25 +30,55 @@ struct Monitoring {
   }
 
   build() {
-    Column({ space: 20 }) {
-      Button(`Change index:${this.index}`)
-        .fontSize(24)
-        .fontWeight(FontWeight.Medium)
-        .fontColor(Color.White)
-        .height(50)
-        .backgroundColor('#3B82F6')
-        .borderRadius(12)
-        .onClick(() => {
-          this.index = 20;
-        })
+    Column() {
+      Column() {
+        Column({ space: 20 }) {
+          Button() {
+            Row() {
+              Text('Change index')
+                .width('65%')
+                .fontSize(24)
+                .fontWeight(FontWeight.Bold)
+                .fontColor('rgba(10, 89, 247, 1)')
+                .textAlign(TextAlign.Center)
+              Text(`${this.index}`)
+                .width('20%')
+                .fontSize(24)
+                .fontWeight(FontWeight.Bold)
+                .fontColor('rgba(10, 89, 247, 1)')
+                .textAlign(TextAlign.Center)
+            }
+            .width('100%')
+            .justifyContent(FlexAlign.Center)
+          }
+          .height(46)
+          .backgroundColor('rgba(10, 89, 247, 0.1)')
+          .borderWidth(1)
+          .borderRadius(23)
+          .borderColor('rgba(10, 89, 247, 1)')
+          .onClick(() => {
+            this.index = 20;
+          })
 
-      Text(this.change)
-        .fontSize(20)
-        .fontWeight(FontWeight.Bold)
-        .fontColor('#1E40AF')
-        .width(300)
-        .textAlign(TextAlign.End)
-        .margin({ right: 16 })
+          Text(this.change)
+            .width('100%')
+            .fontSize(19)
+            .width(300)
+            .textAlign(TextAlign.Center)
+        }
+        .width('100%')
+        .height(120)
+        .backgroundColor(Color.White)
+        .borderWidth(1)
+        .borderRadius(25)
+        .borderColor('rgba(10, 89, 247, 1)')
+        .padding(15)
+      }
+      .width(330)
+      .height(160)
+      .borderRadius(25)
+      .backgroundColor('rgba(10, 89, 247, 0.1)')
+      .padding(20)
     }
     .width('100%')
     .height('100%')
diff --git a/entry/src/main/ets/pages/MonitoringBatch.ets b/entry/src/main/ets/pages/MonitoringBatch.ets
index 0b557868ded32ed5767944561e63d711dca1526f..aeff055b1de8aa00a656cb5f417b6572b0f6bbb2 100644
--- a/entry/src/main/ets/pages/MonitoringBatch.ets
+++ b/entry/src/main/ets/pages/MonitoringBatch.ets
@@ -14,9 +14,9 @@
  */
 
 /*
- * @Monitor装饰器：状态变量修改监听
- * 批量监听
- * 06-监听状态变化
+ * @Monitor Decorator: Listener for modifying state variables
+ * Batch monitoring
+ * 06- Monitor status changes
  */
 @Entry
 @ComponentV2
@@ -33,35 +33,84 @@ struct MonitoringBatch {
   }
 
   build() {
-    Column({ space: 20 }) {
-      Button(`Change index1:${this.index1}`)
-        .fontSize(24)
-        .fontWeight(FontWeight.Medium)
-        .fontColor(Color.White)
-        .height(50)
-        .backgroundColor('#3B82F6')
-        .borderRadius(12)
-        .onClick(() => {
-          this.index1 = 20;
-        })
-      Button(`Change index2:${this.index2}`)
-        .fontSize(24)
-        .fontWeight(FontWeight.Medium)
-        .fontColor(Color.White)
-        .height(50)
-        .backgroundColor('#3B82F6')
-        .borderRadius(12)
-        .onClick(() => {
-          this.index2 = 200;
-        })
+    Column() {
+      Column() {
+        Column({ space: 20 }) {
+          Button() {
+            Row() {
+              Text('Change index1')
+                .width('65%')
+                .fontSize(24)
+                .fontWeight(FontWeight.Bold)
+                .fontColor('rgba(10, 89, 247, 1)')
+                .textAlign(TextAlign.Center)
+              Text(`${this.index2}`)
+                .width('20%')
+                .fontSize(24)
+                .fontWeight(FontWeight.Bold)
+                .fontColor('rgba(10, 89, 247, 1)')
+                .textAlign(TextAlign.Center)
+            }
+            .width('100%')
+            .justifyContent(FlexAlign.Center)
+          }
+          .height(46)
+          .width('100%')
+          .backgroundColor('rgba(10, 89, 247, 0.1)')
+          .borderWidth(1)
+          .borderRadius(23)
+          .borderColor('rgba(10, 89, 247, 1)')
+          .onClick(() => {
+            this.index1 = 20;
+          })
 
-      Text(this.change)
-        .fontSize(20)
-        .fontWeight(FontWeight.Bold)
-        .fontColor('#1E40AF')
-        .width(300)
-        .textAlign(TextAlign.End)
-        .margin({ right: 16 })
+          Button() {
+            Row() {
+              Text('Change index2')
+                .width('65%')
+                .fontSize(24)
+                .fontWeight(FontWeight.Bold)
+                .fontColor('rgba(10, 89, 247, 1)')
+                .textAlign(TextAlign.Center)
+              Text(`${this.index2}`)
+                .width('20%')
+                .fontSize(24)
+                .fontWeight(FontWeight.Bold)
+                .fontColor('rgba(10, 89, 247, 1)')
+                .textAlign(TextAlign.Center)
+            }
+            .width('100%')
+            .justifyContent(FlexAlign.Center)
+          }
+          .height(46)
+          .width('100%')
+          .backgroundColor('rgba(10, 89, 247, 0.1)')
+          .borderWidth(1)
+          .borderRadius(23)
+          .borderColor('rgba(10, 89, 247, 1)')
+          .onClick(() => {
+            this.index2 = 200;
+          })
+
+          Text(this.change)
+            .width('100%')
+            .fontSize(20)
+            .fontWeight(FontWeight.Bold)
+            .width(300)
+            .textAlign(TextAlign.Center)
+        }
+        .width('100%')
+        .height(190)
+        .backgroundColor(Color.White)
+        .borderWidth(1)
+        .borderRadius(25)
+        .borderColor('rgba(10, 89, 247, 1)')
+        .padding(15)
+      }
+      .width(350)
+      .borderRadius(25)
+      .backgroundColor('rgba(10, 89, 247, 0.1)')
+      .padding(20)
     }
     .width('100%')
     .height('100%')
diff --git a/entry/src/main/ets/pages/ParameterInput.ets b/entry/src/main/ets/pages/ParameterInput.ets
index b1ceda8b48097393745c65448aafdd56f19d659a..a7541d86cd5d4aedd5b706794d7614dd1eadedc3 100644
--- a/entry/src/main/ets/pages/ParameterInput.ets
+++ b/entry/src/main/ets/pages/ParameterInput.ets
@@ -14,9 +14,9 @@
  */
 
 /*
- * @Param：组件外部输入
- * 参数输入
- * 02-参数输入
+ * @Param: External input of the component
+ * Parameter input
+ * 02- Parameter Input
  */
 @ComponentV2
 struct MyCounter {
@@ -26,14 +26,24 @@ struct MyCounter {
   build() {
     Row() {
       Text(`${this.title}：`)
-        .fontSize(40)
+        .fontSize(22)
         .fontWeight(FontWeight.Bold)
-        .fontColor('#1E40AF')
       Text(this.value.toString())
         .fontSize(40)
+        .fontColor('rgba(10, 89, 247, 1)')
         .fontWeight(FontWeight.Bold)
-        .fontColor('#1E40AF')
     }
+    .justifyContent(FlexAlign.SpaceBetween)
+    .padding({
+      left: 15,
+      right: 15,
+      top: 10,
+      bottom: 10
+    })
+    .width('90%')
+    .borderWidth(1)
+    .borderRadius(25)
+    .borderColor('rgba(10, 89, 247, 1)')
   }
 }
 
@@ -44,39 +54,64 @@ struct ParameterInput {
   @Local value2: number = 0;
 
   build() {
-    Column({ space: 20 }) {
-      Text($r('app.string.counter'))
-        .fontSize(40)
-        .fontWeight(FontWeight.Bold)
-        .fontColor('#1E40AF')
-        .margin({ bottom: 60 })
+    Column() {
+      Column() {
+        Column({ space: 20 }) {
+          Text($r('app.string.counter'))
+            .fontSize(22)
+            .fontWeight(FontWeight.Bold)
 
-      MyCounter({ title: 'value1', value: this.value1 })
-      MyCounter({ title: 'value2', value: this.value2 })
+          MyCounter({ title: 'value1', value: this.value1 })
+          MyCounter({ title: 'value2', value: this.value2 })
 
-      Row({ space: 20 }) {
-        Button($r('app.string.count', '-1'))
-          .fontSize(24)
-          .fontWeight(FontWeight.Medium)
-          .fontColor(Color.White)
-          .backgroundColor('#3B82F6')
-          .borderRadius(12)
-          .onClick(() => {
-            this.value1--;
-            this.value2--;
-          })
+          Row({ space: 20 }) {
+            Button('-1')
+              .fontSize(20)
+              .fontWeight(FontWeight.Bold)
+              .fontColor('rgba(10, 89, 247, 1)')
+              .width('45%')
+              .height(46)
+              .backgroundColor('rgba(10, 89, 247, 0.1)')
+              .borderWidth(1)
+              .borderRadius(23)
+              .borderColor('rgba(10, 89, 247, 1)')
+              .onClick(() => {
+                this.value1--;
+                this.value2--;
+              })
 
-        Button($r('app.string.count', '+1'))
-          .fontSize(24)
-          .fontWeight(FontWeight.Medium)
-          .fontColor(Color.White)
-          .backgroundColor('#3B82F6')
-          .borderRadius(12)
-          .onClick(() => {
-            this.value1++;
-            this.value2++;
-          })
-      }.margin({ top: 60 })
+            Button('+1')
+              .fontSize(20)
+              .fontWeight(FontWeight.Bold)
+              .fontColor('rgba(10, 89, 247, 1)')
+              .width('45%')
+              .height(46)
+              .backgroundColor('rgba(10, 89, 247, 0.1)')
+              .borderWidth(1)
+              .borderRadius(23)
+              .borderColor('rgba(10, 89, 247, 1)')
+              .onClick(() => {
+                this.value1++;
+                this.value2++;
+              })
+          }
+          .width('90%')
+          .justifyContent(FlexAlign.SpaceBetween)
+          .margin({ top: 10 })
+        }
+        .width('85%')
+        .justifyContent(FlexAlign.Center)
+        .backgroundColor(Color.White)
+        .borderWidth(1)
+        .borderRadius(25)
+        .borderColor('rgba(10, 89, 247, 1)')
+        .padding({ top: 17, bottom: 17 })
+      }
+      .width(326)
+      .height(370)
+      .justifyContent(FlexAlign.Center)
+      .backgroundColor('rgba(10, 89, 247, 0.1)')
+      .borderRadius(25)
     }
     .width('100%')
     .height('100%')
diff --git a/entry/src/main/ets/pages/StateCacheAfter.ets b/entry/src/main/ets/pages/StateCacheAfter.ets
index b2beb139502496e03fb1fe1525af4ea838ad329e..a7e6c2e972d20d6132edae3336515ab61017108c 100644
--- a/entry/src/main/ets/pages/StateCacheAfter.ets
+++ b/entry/src/main/ets/pages/StateCacheAfter.ets
@@ -14,9 +14,9 @@
  */
 
 /*
- * @Computed装饰器：计算属性
- * 状态缓存优化后
- * 05-使用状态缓存
+ * @Computed Decorator: Computed properties
+ * After the state cache is optimized
+ * 05- Use state caching
  */
 @Entry
 @ComponentV2
@@ -30,68 +30,81 @@ struct StateCacheAfter {
   }
 
   build() {
-    Column({ space: 20 }) {
-      Row() {
-        Text(this.count.toString())
-          .fontSize(40)
-          .fontWeight(FontWeight.Bold)
-          .fontColor('#1E40AF')
+    Column() {
+      Column({ space: 18 }) {
+        Column() {
+          Text($r('app.string.apple'))
+            .fontSize(22)
+            .fontWeight(FontWeight.Bold)
+          Text($r('app.string.price', this.price.toString()))
+            .fontSize(16)
+            .fontColor('rgba(10, 89, 247, 1)')
+        }
 
-        Text($r('app.string.counts'))
-          .fontSize(40)
-          .fontWeight(FontWeight.Bold)
-          .fontColor('#1E40AF')
-      }
-
-      Row() {
-        Text($r('app.string.unit_price'))
-          .fontSize(40)
-          .fontColor('#69687A')
-          .textAlign(TextAlign.Start)
-
-        Text(this.price.toString())
-          .fontSize(40)
-          .fontColor('#69687A')
-          .textAlign(TextAlign.Start)
-      }
-
-      Row() {
-        Text($r('app.string.money'))
-          .fontSize(40)
-          .fontColor('#1E40AF')
-          .fontWeight(FontWeight.Bold)
-          .textAlign(TextAlign.Start)
+        Row() {
+          Column() {
+            Text(this.getTotal.toString())
+              .fontSize(42)
+              .fontWeight(FontWeight.Bold)
+            Text($r('app.string.total_price'))
+              .fontSize(16)
+              .fontColor('rgba(0, 0, 0, 0.6)')
 
-        Text(this.getTotal.toString())
-          .fontSize(40)
-          .fontColor('#1E40AF')
-          .fontWeight(FontWeight.Bold)
-          .textAlign(TextAlign.Start)
-      }
+            Button($r('app.string.reduce'))
+              .fontSize(20)
+              .fontWeight(FontWeight.Bold)
+              .fontColor('rgba(10, 89, 247, 1)')
+              .width('40%')
+              .height(46)
+              .backgroundColor('rgba(10, 89, 247, 0.1)')
+              .borderWidth(1)
+              .borderRadius(23)
+              .borderColor('rgba(10, 89, 247, 1)')
+              .margin({ top: 27 })
+              .onClick(() => {
+                if (this.count > 0) {
+                  this.count--;
+                }
+              })
+          }
 
-      Row({ space: 20 }) {
-        Button($r('app.string.count', '-1'))
-          .fontSize(24)
-          .fontWeight(FontWeight.Medium)
-          .fontColor(Color.White)
-          .backgroundColor('#3B82F6')
-          .borderRadius(12)
-          .onClick(() => {
-            if (this.count > 0) {
-              this.count--;
-            }
-          })
+          Column() {
+            Text(this.count.toString())
+              .fontSize(42)
+              .fontWeight(FontWeight.Bold)
+            Text($r('app.string.quantity'))
+              .fontSize(16)
+              .fontColor('rgba(0, 0, 0, 0.6)')
 
-        Button($r('app.string.count', '+1'))
-          .fontSize(24)
-          .fontWeight(FontWeight.Medium)
-          .fontColor(Color.White)
-          .backgroundColor('#3B82F6')
-          .borderRadius(12)
-          .onClick(() => {
-            this.count++;
-          })
+            Button($r('app.string.add'))
+              .fontSize(20)
+              .fontWeight(FontWeight.Bold)
+              .fontColor('rgba(10, 89, 247, 1)')
+              .width('40%')
+              .height(46)
+              .backgroundColor('rgba(10, 89, 247, 0.1)')
+              .borderWidth(1)
+              .borderRadius(23)
+              .borderColor('rgba(10, 89, 247, 1)')
+              .margin({ top: 27 })
+              .onClick(() => {
+                this.count++;
+              })
+          }
+        }
+        .width('86%')
+        .justifyContent(FlexAlign.SpaceAround)
+        .backgroundColor(Color.White)
+        .borderRadius(25)
+        .padding({ top: 20, bottom: 17 })
       }
+      .width('82%')
+      .height('38%')
+      .padding({ top: 15, bottom: 15 })
+      .backgroundColor('rgba(10, 89, 247, 0.1)')
+      .borderWidth(1)
+      .borderRadius(25)
+      .borderColor('rgba(10, 89, 247, 1)')
     }
     .width('100%')
     .height('100%')
diff --git a/entry/src/main/ets/pages/StateCacheBefore.ets b/entry/src/main/ets/pages/StateCacheBefore.ets
index b75350a19eb954b085805ba17ab3316b622e34bd..71b6dca3dbe84a17cc9d094b48af2fdc0b1f11d9 100644
--- a/entry/src/main/ets/pages/StateCacheBefore.ets
+++ b/entry/src/main/ets/pages/StateCacheBefore.ets
@@ -14,8 +14,8 @@
  */
 
 /*
- * 状态缓存优化前
- * 05-使用状态缓存
+ * Before the state cache optimization
+ * 05- Use state caching
  */
 @Entry
 @ComponentV2
@@ -25,69 +25,83 @@ struct StateCacheBefore {
   @Local total: number = 0;
 
   build() {
-    Column({ space: 20 }) {
-      Row() {
-        Text(this.count.toString())
-          .fontSize(40)
-          .fontWeight(FontWeight.Bold)
-          .fontColor('#1E40AF')
-        Text($r('app.string.counts'))
-          .fontSize(40)
-          .fontWeight(FontWeight.Bold)
-          .fontColor('#1E40AF')
-      }
-
-      Row() {
-        Text($r('app.string.unit_price'))
-          .fontSize(40)
-          .fontColor('#69687A')
-          .textAlign(TextAlign.Start)
+    Column() {
+      Column({ space: 18 }) {
+        Column() {
+          Text($r('app.string.apple'))
+            .fontSize(22)
+            .fontWeight(FontWeight.Bold)
+          Text($r('app.string.price', this.price.toString()))
+            .fontSize(16)
+            .fontColor('rgba(10, 89, 247, 1)')
+        }
 
-        Text(this.price.toString())
-          .fontSize(40)
-          .fontColor('#69687A')
-          .textAlign(TextAlign.Start)
-      }
+        Row() {
+          Column() {
+            Text(this.total.toString())
+              .fontSize(42)
+              .fontWeight(FontWeight.Bold)
+            Text($r('app.string.total_price'))
+              .fontSize(16)
+              .fontColor('rgba(0, 0, 0, 0.6)')
 
-      Row() {
-        Text($r('app.string.money'))
-          .fontSize(40)
-          .fontColor('#1E40AF')
-          .fontWeight(FontWeight.Bold)
-          .textAlign(TextAlign.Start)
-
-        Text(this.total.toString())
-          .fontSize(40)
-          .fontColor('#1E40AF')
-          .fontWeight(FontWeight.Bold)
-          .textAlign(TextAlign.Start)
-      }
+            Button($r('app.string.reduce'))
+              .fontSize(20)
+              .fontWeight(FontWeight.Bold)
+              .fontColor('rgba(10, 89, 247, 1)')
+              .width('40%')
+              .height(46)
+              .backgroundColor('rgba(10, 89, 247, 0.1)')
+              .borderWidth(1)
+              .borderRadius(23)
+              .borderColor('rgba(10, 89, 247, 1)')
+              .margin({ top: 27 })
+              .onClick(() => {
+                if (this.count > 0) {
+                  this.count--;
+                  this.total = this.count * this.price;
+                }
+              })
+          }
 
-      Row({ space: 20 }) {
-        Button($r('app.string.count', '-1'))
-          .fontSize(24)
-          .fontWeight(FontWeight.Medium)
-          .fontColor(Color.White)
-          .backgroundColor('#3B82F6')
-          .borderRadius(12)
-          .onClick(() => {
-            if (this.count > 0) {
-              this.count--;
-              this.total = this.count * this.price;
-            }
-          })
+          Column() {
+            Text(this.count.toString())
+              .fontSize(42)
+              .fontWeight(FontWeight.Bold)
+            Text($r('app.string.quantity'))
+              .fontSize(16)
+              .fontColor('rgba(0, 0, 0, 0.6)')
 
-        Button($r('app.string.count', '+1'))
-          .fontSize(24)
-          .fontWeight(FontWeight.Medium)
-          .fontColor(Color.White)
-          .backgroundColor('#3B82F6')
-          .borderRadius(12)
-          .onClick(() => {
-            this.count++;
-            this.total = this.count * this.price;
-          })
+            Button($r('app.string.add'))
+              .fontSize(20)
+              .fontWeight(FontWeight.Bold)
+              .fontColor('rgba(10, 89, 247, 1)')
+              .width('40%')
+              .height(46)
+              .backgroundColor('rgba(10, 89, 247, 0.1)')
+              .borderWidth(1)
+              .borderRadius(23)
+              .borderColor('rgba(10, 89, 247, 1)')
+              .margin({ top: 27 })
+              .onClick(() => {
+                this.count++;
+                this.total = this.count * this.price;
+              })
+          }
+        }
+        .width('85%')
+        .justifyContent(FlexAlign.SpaceAround)
+        .backgroundColor(Color.White)
+        .borderRadius(25)
+        .padding({ top: 20, bottom: 17 })
       }
+      .width('82%')
+      .height('38%')
+      .padding({ top: 15, bottom: 15 })
+      .backgroundColor('rgba(10, 89, 247, 0.1)')
+      .borderWidth(1)
+      .borderRadius(25)
+      .borderColor('rgba(10, 89, 247, 1)')
     }
     .width('100%')
     .height('100%')
diff --git a/entry/src/main/ets/pages/StateSynchronizationAfter.ets b/entry/src/main/ets/pages/StateSynchronizationAfter.ets
index 23c845ee90ed944b6dd0971b2ba58b5de6479c73..3263495f4ee2d000632d61a079ac825a7f11a7d7 100644
--- a/entry/src/main/ets/pages/StateSynchronizationAfter.ets
+++ b/entry/src/main/ets/pages/StateSynchronizationAfter.ets
@@ -14,9 +14,9 @@
  */
 
 /*
- * @Provider装饰器和@Consumer装饰器：跨组件层级双向同步
- * 状态同步优化后
- * 04-跨组件共享状态-状态同步
+ * @Provider decorator and @Consumer decorator: Bidirectional synchronization across component levels
+ * After the status synchronization optimization
+ * 04- Sharing state across components - State synchronization
  */
 @ComponentV2
 struct Child {
@@ -25,53 +25,78 @@ struct Child {
 
   build() {
     Column({ space: 10 }) {
-      Text('Child')
-        .fontSize(30)
-        .fontWeight(FontWeight.Bold)
-        .fontColor('#1E40AF')
-      Text(`Child index：${this.index}`)
-        .fontSize(36)
-        .fontWeight(FontWeight.Bold)
-        .fontColor('#1E40AF')
-      Button('Change to 20')
-        .fontSize(24)
-        .fontWeight(FontWeight.Medium)
-        .fontColor(Color.White)
-        .backgroundColor('#3B82F6')
-        .borderRadius(12)
-        .onClick(() => {
-          this.changeIndex(20);
-        })
+      Row() {
+        Text('Child')
+          .fontSize(18)
+          .fontWeight(700)
+          .fontColor(Color.Black)
+      }
+
+      Row() {
+        Text(this.index.toString())
+          .fontSize(36)
+          .fontWeight(700)
+          .fontColor(Color.Black)
+      }
+
+      Row() {
+        Text('Child index')
+          .fontSize(14)
+          .fontWeight(400)
+          .fontColor('rgba(0,0,0,0.6)')
+      }
+
+      Row() {
+        Button('Change to 20')
+          .width(228)
+          .height(40)
+          .fontSize(18)
+          .fontWeight(700)
+          .fontColor('rgba(10,89,247,1)')
+          .backgroundColor('rgba(10,89,247,0.1)')
+          .borderRadius(23)
+          .borderWidth(1)
+          .borderColor('rgba(10,89,247,1)')
+          .onClick(() => {
+            this.changeIndex(20);
+          })
+      }
+      .margin({ top: 14 })
     }
+    .width(260)
+    .height(195)
+    .margin({ left: 16, right: 16, bottom: 12 })
+    .padding(16)
     .backgroundColor(Color.White)
-    .padding(20)
-    .borderRadius(12)
-    .borderWidth(2)
-    .borderColor('#87B6EE')
+    .borderRadius(25)
+    .borderWidth(1)
+    .borderColor('rgba(10,89,247,1)')
+    .alignItems(HorizontalAlign.Start)
   }
 }
 
 @ComponentV2
 struct ChildList {
-  @Param index: number = 0;
   @Event changeIndex: (val: number) => void;
 
   build() {
-    Column({ space: 10 }) {
-      Text('ChildList')
-        .fontSize(30)
-        .fontWeight(FontWeight.Bold)
-        .fontColor('#1E40AF')
+    Column() {
+      Row() {
+        Text('ChildList')
+          .fontSize(18)
+          .fontWeight(700)
+          .fontColor(Color.Black)
+      }
+      .height(48)
 
       Child({ changeIndex: this.changeIndex })
       Child({ changeIndex: this.changeIndex })
       Child({ changeIndex: this.changeIndex })
     }
-    .backgroundColor('#EDF5FD')
-    .padding(20)
-    .borderRadius(12)
-    .borderWidth(2)
-    .borderColor('#3B82F6')
+    .width(292)
+    .height(673)
+    .backgroundColor('rgba(10,89,247,0.1)')
+    .borderRadius(25)
   }
 }
 
@@ -81,21 +106,29 @@ struct Parent {
   @Provider('index') index: number = 0;
 
   build() {
-    Column({ space: 20 }) {
-      Text('Parent')
-        .fontSize(30)
-        .fontWeight(FontWeight.Bold)
-        .fontColor('#1E40AF')
-      ChildList({
-        changeIndex: (val: number) => {
-          this.index = val;
+    Column() {
+      Column() {
+        Row() {
+          Text('Parent')
+            .fontSize(18)
+            .fontWeight(700)
+            .fontColor(Color.Black)
         }
-      })
+        .height(48)
+
+        ChildList({
+          changeIndex: (val: number) => {
+            this.index = val;
+          }
+        })
+      }
+      .width(340)
+      .height(745)
+      .backgroundColor('rgba(10,89,247,0.05)')
+      .borderRadius(25)
     }
     .width('100%')
     .height('100%')
-    .backgroundColor($r('app.color.pages_background'))
-    .padding({ top: 20 })
-    .justifyContent(FlexAlign.Start)
+    .justifyContent(FlexAlign.Center)
   }
 }
\ No newline at end of file
diff --git a/entry/src/main/ets/pages/StateSynchronizationBefore.ets b/entry/src/main/ets/pages/StateSynchronizationBefore.ets
index 1dbd4ed25a3d81fa70c1a2eec4518f1e300e61e6..77a8360c27a808b18f7fa44b76ec9a358b2ac4ae 100644
--- a/entry/src/main/ets/pages/StateSynchronizationBefore.ets
+++ b/entry/src/main/ets/pages/StateSynchronizationBefore.ets
@@ -14,9 +14,9 @@
  */
 
 /*
- * @Param：组件外部输入
- * 状态同步优化前
- * 04-跨组件共享状态-状态同步
+ * @Param: External input of the component
+ Before the state synchronization optimization
+ * 04- Sharing state across components - State synchronization
  */
 @ComponentV2
 struct Child {
@@ -25,29 +25,53 @@ struct Child {
 
   build() {
     Column({ space: 10 }) {
-      Text('Child')
-        .fontSize(30)
-        .fontWeight(FontWeight.Bold)
-        .fontColor('#1E40AF')
-      Text(`Child index：${this.index}`)
-        .fontSize(36)
-        .fontWeight(FontWeight.Bold)
-        .fontColor('#1E40AF')
-      Button('Change to 20')
-        .fontSize(24)
-        .fontWeight(FontWeight.Medium)
-        .fontColor(Color.White)
-        .backgroundColor('#3B82F6')
-        .borderRadius(12)
-        .onClick(() => {
-          this.changeIndex(20);
-        })
+      Row() {
+        Text('Child')
+          .fontSize(18)
+          .fontWeight(700)
+          .fontColor(Color.Black)
+      }
+
+      Row() {
+        Text(this.index.toString())
+          .fontSize(36)
+          .fontWeight(700)
+          .fontColor(Color.Black)
+      }
+
+      Row() {
+        Text('Child index')
+          .fontSize(14)
+          .fontWeight(400)
+          .fontColor('rgba(0,0,0,0.6)')
+      }
+
+      Row() {
+        Button('Change to 20')
+          .width(228)
+          .height(40)
+          .fontSize(18)
+          .fontWeight(700)
+          .fontColor('rgba(10,89,247,1)')
+          .backgroundColor('rgba(10,89,247,0.1)')
+          .borderRadius(23)
+          .borderWidth(1)
+          .borderColor('rgba(10,89,247,1)')
+          .onClick(() => {
+            this.changeIndex(20);
+          })
+      }
+      .margin({ top: 14 })
     }
+    .width(260)
+    .height(195)
+    .margin({ left: 16, right: 16, bottom: 12 })
+    .padding(16)
     .backgroundColor(Color.White)
-    .padding(20)
-    .borderRadius(12)
-    .borderWidth(2)
-    .borderColor('#87B6EE')
+    .borderRadius(25)
+    .borderWidth(1)
+    .borderColor('rgba(10,89,247,1)')
+    .alignItems(HorizontalAlign.Start)
   }
 }
 
@@ -57,21 +81,23 @@ struct ChildList {
   @Event changeIndex: (val: number) => void;
 
   build() {
-    Column({ space: 10 }) {
-      Text('ChildList')
-        .fontSize(30)
-        .fontWeight(FontWeight.Bold)
-        .fontColor('#1E40AF')
+    Column() {
+      Row() {
+        Text('ChildList')
+          .fontSize(18)
+          .fontWeight(700)
+          .fontColor(Color.Black)
+      }
+      .height(48)
 
       Child({ index: this.index, changeIndex: this.changeIndex })
       Child({ index: this.index, changeIndex: this.changeIndex })
       Child({ index: this.index, changeIndex: this.changeIndex })
     }
-    .backgroundColor('#EDF5FD')
-    .padding(20)
-    .borderRadius(12)
-    .borderWidth(2)
-    .borderColor('#3B82F6')
+    .width(292)
+    .height(673)
+    .backgroundColor('rgba(10,89,247,0.1)')
+    .borderRadius(25)
   }
 }
 
@@ -81,22 +107,30 @@ struct Parent {
   @Local index: number = 0;
 
   build() {
-    Column({ space: 20 }) {
-      Text('Parent')
-        .fontSize(30)
-        .fontWeight(FontWeight.Bold)
-        .fontColor('#1E40AF')
-      ChildList({
-        index: this.index,
-        changeIndex: (val: number) => {
-          this.index = val;
+    Column() {
+      Column() {
+        Row() {
+          Text('Parent')
+            .fontSize(18)
+            .fontWeight(700)
+            .fontColor(Color.Black)
         }
-      })
+        .height(48)
+
+        ChildList({
+          index: this.index,
+          changeIndex: (val: number) => {
+            this.index = val;
+          }
+        })
+      }
+      .width(340)
+      .height(745)
+      .backgroundColor('rgba(10,89,247,0.05)')
+      .borderRadius(25)
     }
     .width('100%')
     .height('100%')
-    .backgroundColor($r('app.color.pages_background'))
-    .padding({ top: 20 })
-    .justifyContent(FlexAlign.Start)
+    .justifyContent(FlexAlign.Center)
   }
 }
\ No newline at end of file
diff --git a/entry/src/main/ets/pages/Status.ets b/entry/src/main/ets/pages/Status.ets
index 5a2d1f64f2e4ccc90ff440a941bf7d9ef26876ac..87f47a53d30677e524623cca4222f5401496e2e5 100644
--- a/entry/src/main/ets/pages/Status.ets
+++ b/entry/src/main/ets/pages/Status.ets
@@ -14,42 +14,59 @@
  */
 
 /*
- * 开关状态&计数器
- * 01-什么是状态
+ * Switch status & counter
+ * 01- What is state
  */
 @ComponentV2
 struct SwitchStatus {
   @Local isOpen: boolean = true;
 
   build() {
-    Column({ space: 10 }) {
-      Text($r('app.string.switch_status'))
-        .fontSize(30)
-        .fontWeight(FontWeight.Bold)
-        .fontColor('#1E40AF')
-      Column() {
-        Text(this.isOpen ? $r('app.string.OPEN') : $r('app.string.CLOSE'))
-          .fontSize(24)
+    Column() {
+      Column({ space: 10 }) {
+        Text($r('app.string.switch_status'))
+          .fontSize(18)
           .fontWeight(FontWeight.Bold)
-          .fontColor('#1E40AF')
-        Toggle({ type: ToggleType.Switch, isOn: true })
-          .selectedColor($r('app.color.toggle_selected_color'))
-          .switchPointColor($r('app.color.toggle_switch_point_color'))
-          .onChange(() => {
-            this.isOpen = !this.isOpen;
-          })
+          .textAlign(TextAlign.Center)
+          .margin({ bottom: 5 })
+        Row() {
+          Text(this.isOpen ? $r('app.string.OPEN') : $r('app.string.CLOSE'))
+            .fontSize(18)
+            .fontWeight(FontWeight.Bold)
+          Toggle({ type: ToggleType.Switch, isOn: true })
+            .selectedColor('rgba(10, 89, 247, 1)')
+            .switchPointColor($r('app.color.toggle_switch_point_color'))
+            .onChange(() => {
+              this.isOpen = !this.isOpen;
+            })
+        }
+        .justifyContent(FlexAlign.SpaceBetween)
+        .padding({
+          left: 15,
+          right: 15,
+          top: 10,
+          bottom: 10
+        })
+        .width(228)
+        .height(56)
+        .borderWidth(1)
+        .borderRadius(20)
+        .borderColor('rgba(10, 89, 247, 1)')
       }
-      .width(100)
-      .height(100)
-      .justifyContent(FlexAlign.Center)
-      .borderRadius(12)
-      .backgroundColor('#EEF6FD')
+      .padding(16)
+      .width(260)
+      .height(192)
+      .borderWidth(1)
+      .borderRadius(20)
+      .borderColor('rgba(10, 89, 247, 1)')
+      .backgroundColor(Color.White)
     }
-    .backgroundColor(Color.White)
-    .padding(20)
-    .borderRadius(12)
-    .borderWidth(2)
-    .borderColor('#87B6EE')
+    .width(292)
+    .height(224)
+    .justifyContent(FlexAlign.Center)
+    .backgroundColor('rgba(10, 89, 247, 0.1)')
+    .borderRadius(20)
+    .padding(16)
   }
 }
 
@@ -58,35 +75,64 @@ struct Counters {
   @Local index: number = 0;
 
   build() {
-    Column({ space: 10 }) {
-      Text($r('app.string.counter'))
-        .fontSize(30)
-        .fontWeight(FontWeight.Bold)
-        .fontColor('#1E40AF')
-      Text(this.index.toString())
-        .width(80)
-        .height(80)
-        .textAlign(TextAlign.Center)
-        .fontSize(36)
-        .fontWeight(FontWeight.Bold)
-        .fontColor('#1E40AF')
-        .borderRadius(12)
-        .backgroundColor('#EEF6FD')
-      Button('+1')
-        .fontSize(24)
-        .fontWeight(FontWeight.Medium)
-        .fontColor(Color.White)
-        .backgroundColor('#3B82F6')
-        .borderRadius(12)
-        .onClick(() => {
-          this.index++;
+    Column() {
+      Column({ space: 10 }) {
+        Text($r('app.string.counter'))
+          .fontSize(18)
+          .fontWeight(FontWeight.Bold)
+          .margin({ bottom: 5 })
+        Row() {
+          Text('value')
+            .fontSize(22)
+            .fontWeight(FontWeight.Bold)
+          Text(this.index.toString())
+            .fontSize(40)
+            .fontColor('rgba(10, 89, 247, 1)')
+            .fontWeight(FontWeight.Bold)
+            .margin({ top: -5 })
+        }
+        .justifyContent(FlexAlign.SpaceBetween)
+        .padding({
+          left: 15,
+          right: 15,
+          top: 10,
+          bottom: 10
         })
+        .width(228)
+        .height(56)
+        .borderWidth(1)
+        .borderRadius(20)
+        .borderColor('rgba(10, 89, 247, 1)')
+
+        Button('+1')
+          .fontSize(16)
+          .fontWeight(FontWeight.Bold)
+          .fontColor('rgba(10, 89, 247, 1)')
+          .width(228)
+          .height(40)
+          .backgroundColor('rgba(10, 89, 247, 0.1)')
+          .borderWidth(1)
+          .borderRadius(23)
+          .borderColor('rgba(10, 89, 247, 1)')
+          .margin({ top: 15 })
+          .onClick(() => {
+            this.index++;
+          })
+      }
+      .padding(16)
+      .width(260)
+      .height(192)
+      .borderWidth(1)
+      .borderRadius(20)
+      .borderColor('rgba(10, 89, 247, 1)')
+      .backgroundColor(Color.White)
     }
-    .backgroundColor(Color.White)
-    .padding(20)
-    .borderRadius(12)
-    .borderWidth(2)
-    .borderColor('#87B6EE')
+    .width(292)
+    .height(224)
+    .justifyContent(FlexAlign.Center)
+    .backgroundColor('rgba(10, 89, 247, 0.1)')
+    .borderRadius(20)
+    .padding(16)
   }
 }
 
@@ -100,7 +146,6 @@ struct Status {
     }
     .width('100%')
     .height('100%')
-    .padding({ top: 20 })
     .justifyContent(FlexAlign.Center)
   }
 }
\ No newline at end of file
diff --git a/entry/src/main/ets/pages/StatusOfManagementObjectsAfter.ets b/entry/src/main/ets/pages/StatusOfManagementObjectsAfter.ets
index d861df38a9a40ad5e19052b60b88b1b61ba4f800..3e6b75cda43e70f3eb6b54c02929b86efbcd9719 100644
--- a/entry/src/main/ets/pages/StatusOfManagementObjectsAfter.ets
+++ b/entry/src/main/ets/pages/StatusOfManagementObjectsAfter.ets
@@ -14,88 +14,145 @@
  */
 
 /*
- * @ObservedV2装饰器和@Trace装饰器：类属性变化观测
- * 管理对象状态优化后
- * 07-管理对象状态
+ * @ObservedV2 decorator and @Trace decorator: Observation of class attribute changes
+ * After optimizing the state of the management object
+ * 07- Manage object status
  */
+
 @ObservedV2
+class Major {
+  @Trace className: ResourceStr = '';
+}
+
 class Student {
   name: ResourceStr = '';
   age: number = 17;
-  @Trace major: ResourceStr = '';
+  major: Major = new Major();
 
-  constructor(name: ResourceStr, age: number, major: ResourceStr) {
+  constructor(name: ResourceStr, age: number, className: ResourceStr) {
     this.name = name;
     this.age = age;
-    this.major = major;
+    this.major.className = className;
   }
 }
 
 @Entry
 @ComponentV2
 struct StatusOfManagementObjectsAfter {
-  @Local student: Student = new Student($r('app.string.student_name'), 18, $r('app.string.software_engineering'));
+  @Local student: Student = new Student($r('app.string.student_name'),18,$r('app.string.software_engineering'));
+
+  @Monitor('student.major.className')
+  majorChange(monitor: IMonitor) {
+      console.log(`student.major.className change from ${monitor.value()?.before} to ${monitor.value()?.now}`);
+  }
 
   build() {
-    Column({ space: 20 }) {
-      Row() {
-        Text($r('app.string.names'))
-          .fontSize(34)
-          .fontWeight(FontWeight.Bold)
-          .fontColor('#1E40AF')
-          .width(140)
-          .textAlign(TextAlign.End)
-          .margin({ right: 16 })
-        Text(this.student.name)
-          .fontSize(34)
-          .fontWeight(FontWeight.Bold)
-          .fontColor('#1E40AF')
-          .width(200)
-          .textAlign(TextAlign.Start)
-      }
+    Column() {
+      Column() {
+        Column() {
+          Row() {
+            Row() {
+              Column() {
+                Text($r('app.string.name_hua'))
+                  .fontColor('rgba(10,89,247,1)')
+                  .fontSize(24)
+                  .fontWeight(700)
+              }
+              .width(56)
+              .height(56)
+              .borderRadius(28)
+              .backgroundColor('rgba(10,89,247,0.1)')
+              .padding({
+                left: 16,
+                right: 16,
+                top: 16,
+                bottom: 16
+              })
 
-      Row() {
-        Text($r('app.string.age'))
-          .fontSize(34)
-          .fontWeight(FontWeight.Bold)
-          .fontColor('#1E40AF')
-          .width(140)
-          .textAlign(TextAlign.End)
-          .margin({ right: 16 })
-        Text(this.student.age.toString())
-          .fontSize(34)
-          .fontWeight(FontWeight.Bold)
-          .fontColor('#1E40AF')
-          .width(200)
-          .textAlign(TextAlign.Start)
-      }
+              Column() {
+                Row() {
+                  Text(this.student.name)
+                    .fontSize(18)
+                    .fontWeight(700)
+                    .fontColor(Color.Black)
+                }
 
-      Row() {
-        Text($r('app.string.major'))
-          .fontSize(34)
-          .fontWeight(FontWeight.Bold)
-          .fontColor('#1E40AF')
-          .width(140)
-          .textAlign(TextAlign.End)
-          .margin({ right: 16 })
-        Text(this.student.major)
-          .fontSize(34)
-          .fontWeight(FontWeight.Bold)
-          .fontColor('#1E40AF')
-          .width(200)
-          .textAlign(TextAlign.Start)
-      }
+                Row() {
+                  Text($r('app.string.years_old', this.student.age.toString()))
+                    .fontSize(14)
+                    .fontWeight(400)
+                    .fontColor('rgba(0,0,0,0.6)')
+                }
+                .margin({ left: 5, top: 4, right: 7 })
+              }
+              .margin({ left: 12 })
+
+            }
+            .width(104)
+            .height(56)
+            .margin({
+              left: 0,
+              right: 16,
+              top: 16,
+              bottom: 16
+            })
+            .justifyContent(FlexAlign.SpaceBetween)
 
-      Button($r('app.string.change_major'))
-        .fontSize(24)
-        .fontWeight(FontWeight.Medium)
-        .fontColor(Color.White)
-        .height(50)
-        .backgroundColor('#3B82F6')
-        .borderRadius(12)
-        .onClick(() => {
-          this.student.major = $r('app.string.internet_of_things');
-        })
+            Column() {
+              Row() {
+                Text(this.student.major.className)
+                  .fontSize(18)
+                  .fontWeight(700)
+                  .fontColor(Color.Black)
+              }
+              .width(80)
+              .align(Alignment.Start)
+
+              Row() {
+                Text($r('app.string.major'))
+                  .fontSize(14)
+                  .fontWeight(400)
+                  .fontColor('rgba(0,0,0,0.6)')
+              }
+              .margin({ left: 0, top: 4, right: 52 })
+            }
+            .margin({ left: 53 })
+          }
+          .width(269)
+          .height(88)
+
+          Row() {
+            Button($r('app.string.change_major'))
+              .width(260)
+              .height(40)
+              .borderRadius(23)
+              .borderColor('rgba(10,89,247,1)')
+              .borderWidth(1)
+              .backgroundColor(Color.White)
+              .fontSize(24)
+              .fontWeight(700)
+              .fontSize(16)
+              .fontColor('rgba(10,89,247,1)')
+              .onClick(() => {
+                this.student.major.className = $r('app.string.internet_of_things');
+              })
+          }
+          .width(295)
+          .height(72)
+          .padding(16)
+        }
+        .width(295)
+        .height(160)
+        .margin(16)
+        .backgroundColor(Color.White)
+        .borderRadius(25)
+        .borderColor('rgba(10,89,247,1)')
+        .borderWidth(1)
+      }
+      .width(327)
+      .height(192)
+      .backgroundColor('rgba(10,89,247,0.1)')
+      .borderRadius(25)
     }
     .width('100%')
     .height('100%')
diff --git a/entry/src/main/ets/pages/StatusOfManagementObjectsBefore.ets b/entry/src/main/ets/pages/StatusOfManagementObjectsBefore.ets
index 2731d02d53af158afc3250add017a2f30d5651b5..0c04a17f68e5b2856698a877676fd1ed31cad793 100644
--- a/entry/src/main/ets/pages/StatusOfManagementObjectsBefore.ets
+++ b/entry/src/main/ets/pages/StatusOfManagementObjectsBefore.ets
@@ -14,14 +14,15 @@
  */
 
 /*
- * @Local装饰器：组件内部状态
- * 管理对象状态优化前
- * 07-管理对象状态
+ * @Local Decorator: Internal state of the component
+ * Before optimizing the state of the management object
+ * 07- Manage object status
  */
+@ObservedV2
 class Student {
   name: ResourceStr = '';
   age: number = 17;
-  major: ResourceStr = '';
+  @Trace major: ResourceStr = '';
 
   constructor(name: ResourceStr, age: number, major: ResourceStr) {
     this.name = name;
@@ -36,65 +37,112 @@ struct StatusOfManagementObjectsBefore {
   @Local student: Student = new Student($r('app.string.student_name'), 18, $r('app.string.software_engineering'));
 
   build() {
-    Column({ space: 20 }) {
-      Row() {
-        Text($r('app.string.names'))
-          .fontSize(34)
-          .fontWeight(FontWeight.Bold)
-          .fontColor('#1E40AF')
-          .width(140)
-          .textAlign(TextAlign.End)
-          .margin({ right: 16 })
-        Text(this.student.name)
-          .fontSize(34)
-          .fontWeight(FontWeight.Bold)
-          .fontColor('#1E40AF')
-          .width(200)
-          .textAlign(TextAlign.Start)
-      }
+    Column() {
+      Column() {
+        Column() {
+          Row() {
+            Row() {
+              Column() {
+                Text($r('app.string.name_hua'))
+                  .fontColor('rgba(10,89,247,1)')
+                  .fontSize(24)
+                  .fontWeight(700)
+              }
+              .width(56)
+              .height(56)
+              .borderRadius(28)
+              .backgroundColor('rgba(10,89,247,0.1)')
+              .padding({
+                left: 16,
+                right: 16,
+                top: 16,
+                bottom: 16
+              })
 
-      Row() {
-        Text($r('app.string.age'))
-          .fontSize(34)
-          .fontWeight(FontWeight.Bold)
-          .fontColor('#1E40AF')
-          .width(140)
-          .textAlign(TextAlign.End)
-          .margin({ right: 16 })
-        Text(this.student.age.toString())
-          .fontSize(34)
-          .fontWeight(FontWeight.Bold)
-          .fontColor('#1E40AF')
-          .width(200)
-          .textAlign(TextAlign.Start)
-      }
+              Column() {
+                Row() {
+                  Text(this.student.name)
+                    .fontSize(18)
+                    .fontWeight(700)
+                    .fontColor(Color.Black)
+                }
 
-      Row() {
-        Text($r('app.string.major'))
-          .fontSize(34)
-          .fontWeight(FontWeight.Bold)
-          .fontColor('#1E40AF')
-          .width(140)
-          .textAlign(TextAlign.End)
-          .margin({ right: 16 })
-        Text(this.student.major)
-          .fontSize(34)
-          .fontWeight(FontWeight.Bold)
-          .fontColor('#1E40AF')
-          .width(200)
-          .textAlign(TextAlign.Start)
-      }
+                Row() {
+                  Text($r('app.string.years_old', this.student.age.toString()))
+                    .fontSize(14)
+                    .fontWeight(400)
+                    .fontColor('rgba(0,0,0,0.6)')
+                }
+                .margin({ left: 5, top: 4, right: 7 })
+              }
+              .margin({ left: 12 })
+
+            }
+            .width(104)
+            .height(56)
+            .margin({
+              left: 0,
+              right: 16,
+              top: 16,
+              bottom: 16
+            })
+            .justifyContent(FlexAlign.SpaceBetween)
 
-      Button($r('app.string.change_major'))
-        .fontSize(24)
-        .fontWeight(FontWeight.Medium)
-        .fontColor(Color.White)
-        .height(50)
-        .backgroundColor('#3B82F6')
-        .borderRadius(12)
-        .onClick(() => {
-          this.student.major = $r('app.string.internet_of_things');
-        })
+            Column() {
+              Row() {
+                Text(this.student.major)
+                  .fontSize(18)
+                  .fontWeight(700)
+                  .fontColor(Color.Black)
+              }
+              .width(80)
+              .align(Alignment.Start)
+
+              Row() {
+                Text($r('app.string.major'))
+                  .fontSize(14)
+                  .fontWeight(400)
+                  .fontColor('rgba(0,0,0,0.6)')
+              }
+              .margin({ left: 0, top: 4, right: 52 })
+            }
+            .margin({ left: 53 })
+          }
+          .width(269)
+          .height(88)
+
+          Row() {
+            Button($r('app.string.change_major'))
+              .width(260)
+              .height(40)
+              .borderRadius(23)
+              .borderColor('rgba(10,89,247,1)')
+              .borderWidth(1)
+              .backgroundColor(Color.White)
+              .fontSize(24)
+              .fontWeight(700)
+              .fontSize(16)
+              .fontColor('rgba(10,89,247,1)')
+              .onClick(() => {
+                this.student.major = $r('app.string.internet_of_things');
+              })
+          }
+          .width(295)
+          .height(72)
+          .padding(16)
+        }
+        .width(295)
+        .height(160)
+        .margin(16)
+        .backgroundColor(Color.White)
+        .borderRadius(25)
+        .borderColor('rgba(10,89,247,1)')
+        .borderWidth(1)
+      }
+      .width(327)
+      .height(192)
+      .backgroundColor('rgba(10,89,247,0.1)')
+      .borderRadius(25)
     }
     .width('100%')
     .height('100%')
diff --git a/entry/src/main/resources/base/element/color.json b/entry/src/main/resources/base/element/color.json
index d4967344d0dea2b871004cce4b2ed591918cdd93..0936866b07ab8e692face0670e69e65540b4e7e7 100644
--- a/entry/src/main/resources/base/element/color.json
+++ b/entry/src/main/resources/base/element/color.json
@@ -4,14 +4,6 @@
       "name": "start_window_background",
       "value": "#FFFFFF"
     },
-    {
-      "name": "pages_background",
-      "value": "#F1F3F5"
-    },
-    {
-      "name": "toggle_selected_color",
-      "value": "#007DFF"
-    },
     {
       "name": "toggle_switch_point_color",
       "value": "#FFFFFF"
diff --git a/entry/src/main/resources/base/element/string.json b/entry/src/main/resources/base/element/string.json
index 5438be4c796a64bacc23d54b53e2c04afc5415a3..901e2127ee334fa79697b2f436bbcd9a74c1b930 100644
--- a/entry/src/main/resources/base/element/string.json
+++ b/entry/src/main/resources/base/element/string.json
@@ -14,55 +14,43 @@
     },
     {
       "name": "counter",
-      "value": "counter"
+      "value": "Counter"
     },
     {
       "name": "count",
       "value": "%s count"
     },
-    {
-      "name": "counts",
-      "value": " counts \uD83C\uDF4E"
-    },
-    {
-      "name": "unit_price",
-      "value": "unit price："
-    },
-    {
-      "name": "money",
-      "value": "money："
-    },
     {
       "name": "switch_status",
       "value": "Switch Status"
     },
     {
       "name": "OPEN",
-      "value": "OPEN"
+      "value": "Open"
     },
     {
       "name": "CLOSE",
-      "value": "CLOSE"
+      "value": "Close"
     },
     {
-      "name": "student_name",
-      "value": "Li hua"
+      "name": "name_hua",
+      "value": "Hua"
     },
     {
-      "name": "names",
-      "value": "Name："
+      "name": "student_name",
+      "value": "Li hua"
     },
     {
       "name": "software_engineering",
       "value": "Software Engineering"
     },
     {
-      "name": "age",
-      "value": "Age："
+      "name": "years_old",
+      "value": "%s years old"
     },
     {
       "name": "major",
-      "value": "Major："
+      "value": "Major"
     },
     {
       "name": "internet_of_things",
@@ -70,7 +58,31 @@
     },
     {
       "name": "change_major",
-      "value": "Change major to: IOT"
+      "value": "Change major to IOT"
+    },
+    {
+      "name": "apple",
+      "value": "Apple"
+    },
+    {
+      "name": "price",
+      "value": "Unit price %s"
+    },
+    {
+      "name": "total_price",
+      "value": "Total price"
+    },
+    {
+      "name": "reduce",
+      "value": "Subtract one"
+    },
+    {
+      "name": "add",
+      "value": "Add one"
+    },
+    {
+      "name": "quantity",
+      "value": "Quantity"
     }
   ]
 }
\ No newline at end of file
diff --git a/entry/src/main/resources/base/profile/main_pages.json b/entry/src/main/resources/base/profile/main_pages.json
index dbb0a8a3c5ce7285dc17cf58f4f362460231e44b..06f87e572520d0a8b2915bb971d9431ca196dd03 100644
--- a/entry/src/main/resources/base/profile/main_pages.json
+++ b/entry/src/main/resources/base/profile/main_pages.json
@@ -1,5 +1,5 @@
 {
   "src": [
-    "pages/Status"
+    "pages/StatusOfManagementObjectsAfter"
   ]
 }
\ 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 5438be4c796a64bacc23d54b53e2c04afc5415a3..ff606de77a309580acc802e81720315d23e73fc8 100644
--- a/entry/src/main/resources/en_US/element/string.json
+++ b/entry/src/main/resources/en_US/element/string.json
@@ -14,7 +14,7 @@
     },
     {
       "name": "counter",
-      "value": "counter"
+      "value": "Counter"
     },
     {
       "name": "count",
@@ -38,31 +38,31 @@
     },
     {
       "name": "OPEN",
-      "value": "OPEN"
+      "value": "Open"
     },
     {
       "name": "CLOSE",
-      "value": "CLOSE"
+      "value": "Close"
     },
     {
-      "name": "student_name",
-      "value": "Li hua"
+      "name": "name_hua",
+      "value": "Hua"
     },
     {
-      "name": "names",
-      "value": "Name："
+      "name": "student_name",
+      "value": "Li hua"
     },
     {
       "name": "software_engineering",
       "value": "Software Engineering"
     },
     {
-      "name": "age",
-      "value": "Age："
+      "name": "years_old",
+      "value": "%s years old"
     },
     {
       "name": "major",
-      "value": "Major："
+      "value": "Major"
     },
     {
       "name": "internet_of_things",
@@ -70,7 +70,31 @@
     },
     {
       "name": "change_major",
-      "value": "Change major to: IOT"
+      "value": "Change major to IOT"
+    },
+    {
+      "name": "apple",
+      "value": "Apple"
+    },
+    {
+      "name": "price",
+      "value": "Unit price %s"
+    },
+    {
+      "name": "total_price",
+      "value": "Total price"
+    },
+    {
+      "name": "reduce",
+      "value": "Subtract one"
+    },
+    {
+      "name": "add",
+      "value": "Add one"
+    },
+    {
+      "name": "quantity",
+      "value": "Quantity"
     }
   ]
 }
\ 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 da571f4cb56a889a416a8c8495a4a2de5e2e8afd..9caf3b1a72199c316bfd545cc4c21ee023486903 100644
--- a/entry/src/main/resources/zh_CN/element/string.json
+++ b/entry/src/main/resources/zh_CN/element/string.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "EntryAbility_label",
-      "value": "状态管理V2-原子级场景案例"
+      "value": "状态管理V2-场景案例"
     },
     {
       "name": "counter",
@@ -20,18 +20,6 @@
       "name": "count",
       "value": "%s 个"
     },
-    {
-      "name": "counts",
-      "value": " 个 \uD83C\uDF4E"
-    },
-    {
-      "name": "unit_price",
-      "value": "单价："
-    },
-    {
-      "name": "money",
-      "value": "金额："
-    },
     {
       "name": "switch_status",
       "value": "开关状态"
@@ -45,24 +33,24 @@
       "value": "关闭"
     },
     {
-      "name": "student_name",
-      "value": "李华"
+      "name": "name_hua",
+      "value": "华"
     },
     {
-      "name": "names",
-      "value": "姓名："
+      "name": "student_name",
+      "value": "李华"
     },
     {
       "name": "software_engineering",
       "value": "软件工程"
     },
     {
-      "name": "age",
-      "value": "年龄："
+      "name": "years_old",
+      "value": "%s 岁"
     },
     {
       "name": "major",
-      "value": "专业："
+      "value": "专业"
     },
     {
       "name": "internet_of_things",
@@ -70,7 +58,31 @@
     },
     {
       "name": "change_major",
-      "value": "修改专业为：物联网"
+      "value": "专业改为物联网"
+    },
+    {
+      "name": "apple",
+      "value": "苹果"
+    },
+    {
+      "name": "price",
+      "value": "单价 %s"
+    },
+    {
+      "name": "total_price",
+      "value": "总价"
+    },
+    {
+      "name": "reduce",
+      "value": "-1个"
+    },
+    {
+      "name": "add",
+      "value": "+1 个"
+    },
+    {
+      "name": "quantity",
+      "value": "数量"
     }
   ]
 }
\ No newline at end of file
diff --git a/screenshots/device/result.png b/screenshots/device/result.png
index 4bb9479286127ff3f03c06d9d7974c3360fb2b99..573d5ca8b2ac439c6874c52ada457d1b7c8036d6 100644
Binary files a/screenshots/device/result.png and b/screenshots/device/result.png differ
diff --git a/screenshots/device/result_en.png b/screenshots/device/result_en.png
index 87a91120c8fa245d3e32b751f7093422d603e39a..cc80edf200e197e14d614d042c35313b9c7c6539 100644
Binary files a/screenshots/device/result_en.png and b/screenshots/device/result_en.png differ