diff --git a/product/phone/src/main/ets/pages/system/homePage.ets b/product/phone/src/main/ets/pages/system/homePage.ets
index 3bff1e9e3c4890612c28e8dfff8db50a48e4660d..9485c2950e7f4223cb78f84d9a9635eceb605dac 100644
--- a/product/phone/src/main/ets/pages/system/homePage.ets
+++ b/product/phone/src/main/ets/pages/system/homePage.ets
@@ -36,39 +36,46 @@ struct SystemSettings {
 
   build() {
     Column() {
-      GridContainer({ gutter: ConfigData.GRID_CONTAINER_GUTTER_24, margin: ConfigData.GRID_CONTAINER_MARGIN_24 }) {
-        Column() {
-          HeadComponent({ headName: $r('app.string.systemTab'), isActive: true });
-
+      Scroll() {
+        GridContainer({ gutter: ConfigData.GRID_CONTAINER_GUTTER_24, margin: ConfigData.GRID_CONTAINER_MARGIN_24 }) {
           Column() {
-            SoftwareUpdateComponent({ title: $r("app.string.softwareUpdates") })
-              .margin({ bottom: $r('sys.float.ohos_id_card_margin_start') })
+            HeadComponent({ headName: $r('app.string.systemTab'), isActive: true });
+
+            Column() {
+              SoftwareUpdateComponent({ title: $r("app.string.softwareUpdates") })
+                .margin({ bottom: $r('sys.float.ohos_id_card_margin_start') })
 
-            SubEntryComponent({ targetPage: "pages/restoreFactorySettings", title: $r("app.string.restoreFactoryTab") })
-              .margin({ bottom: $r('sys.float.ohos_id_card_margin_start') })
+              SubEntryComponent({ targetPage: "pages/restoreFactorySettings", title: $r("app.string.restoreFactoryTab") })
+                .margin({ bottom: $r('sys.float.ohos_id_card_margin_start') })
 
-            SubEntryComponent({
-              targetPage: 'pages/system/languageSettings/homePage',
-              title: $r("app.string.setlanguage")
-            })
-              .margin({ bottom: $r('sys.float.ohos_id_card_margin_start') })
+              SubEntryComponent({
+                targetPage: 'pages/system/languageSettings/homePage',
+                title: $r("app.string.setlanguage")
+              })
+                .margin({ bottom: $r('sys.float.ohos_id_card_margin_start') })
 
-            SubEntryComponent({ targetPage: "pages/dateAndTime", title: $r("app.string.dateAndTimeTab") })
-              .margin({ bottom: $r('sys.float.ohos_id_card_margin_start') })
-              .visibility(this.disallowModifyDateTime === true ? Visibility.None : Visibility.Visible)
+              SubEntryComponent({ targetPage: "pages/dateAndTime", title: $r("app.string.dateAndTimeTab") })
+                .margin({ bottom: $r('sys.float.ohos_id_card_margin_start') })
+                .visibility(this.disallowModifyDateTime === true ? Visibility.None : Visibility.Visible)
 
-            SubEntryComponent({ targetPage: "pages/developerOptions", title: $r("app.string.developerOptionsTab") })
+              SubEntryComponent({ targetPage: "pages/developerOptions", title: $r("app.string.developerOptionsTab") })
+            }
+            .margin({ top: $r("app.float.distance_8") })
           }
-          .margin({ top: $r("app.float.distance_8") })
+          .useSizeType({
+            sm: { span: 4, offset: 0 },
+            md: { span: 6, offset: 1 },
+            lg: { span: 8, offset: 2 }
+          })
         }
-        .useSizeType({
-          sm: { span: 4, offset: 0 },
-          md: { span: 6, offset: 1 },
-          lg: { span: 8, offset: 2 }
-        })
+        .width(ConfigData.WH_100_100)
       }
+      .scrollable(ScrollDirection.Vertical)
+      .scrollBar(BarState.Off)
+      .scrollBarWidth(0)
       .width(ConfigData.WH_100_100)
-      .height(ConfigData.WH_100_100)
+      .align(Alignment.TopStart)
+      .layoutWeight(ConfigData.LAYOUT_WEIGHT_1)
     }
     .backgroundColor($r("sys.color.ohos_id_color_sub_background"))
     .width(ConfigData.WH_100_100)
diff --git a/product/phone/src/main/ets/pages/volumeControl.ets b/product/phone/src/main/ets/pages/volumeControl.ets
index f5b18610db843615e6e5ca6077979a8429e34918..eb15a11e478ac46babab953975d2af86d361d5ac 100644
--- a/product/phone/src/main/ets/pages/volumeControl.ets
+++ b/product/phone/src/main/ets/pages/volumeControl.ets
@@ -33,29 +33,36 @@ export struct VolumeControl {
 
   build() {
     Column() {
-      GridContainer({ gutter: ConfigData.GRID_CONTAINER_GUTTER_24, margin: ConfigData.GRID_CONTAINER_MARGIN_24 }) {
-        Column() {
-          //head
-          HeadComponent({ headName: $r('app.string.volumeControlTab') });
+      Scroll() {
+        GridContainer({ gutter: ConfigData.GRID_CONTAINER_GUTTER_24, margin: ConfigData.GRID_CONTAINER_MARGIN_24 }) {
+          Column() {
+            //head
+            HeadComponent({ headName: $r('app.string.volumeControlTab') });
 
-          SubHeader({ titleContent: $r('app.string.soundMode') });
+            SubHeader({ titleContent: $r('app.string.soundMode') });
 
-          // sound mode
-          AudioRingerModeComponent();
+            // sound mode
+            AudioRingerModeComponent();
 
-          SubHeader({ titleContent: $r('app.string.volumeControl') });
+            SubHeader({ titleContent: $r('app.string.volumeControl') });
 
-          // volume control
-          VolumeControlComponent();
+            // volume control
+            VolumeControlComponent();
+          }
+          .useSizeType({
+            sm: { span: 4, offset: 0 },
+            md: { span: 6, offset: 1 },
+            lg: { span: 8, offset: 2 }
+          })
         }
-        .useSizeType({
-          sm: { span: 4, offset: 0 },
-          md: { span: 6, offset: 1 },
-          lg: { span: 8, offset: 2 }
-        })
+        .width(ConfigData.WH_100_100)
       }
+      .scrollable(ScrollDirection.Vertical)
+      .scrollBar(BarState.Off)
+      .scrollBarWidth(0)
       .width(ConfigData.WH_100_100)
-      .height(ConfigData.WH_100_100)
+      .align(Alignment.TopStart)
+      .layoutWeight(ConfigData.LAYOUT_WEIGHT_1)
     }
     .backgroundColor($r("sys.color.ohos_id_color_sub_background"))
     .width(ConfigData.WH_100_100)