diff --git a/build-profile.json5 b/build-profile.json5
index d209fee432db4515940449ca8f4516144ae32cf6..8a82d0592de091b1e9f5181cb366b282e3b047cd 100644
--- a/build-profile.json5
+++ b/build-profile.json5
@@ -20,8 +20,8 @@
   },
   "modules": [
     {
-      "name": "entry",
-      "srcPath": "./entry",
+      "name": "multicolumnssample",
+      "srcPath": "./multicolumnssample",
       "targets": [
         {
           "name": "default",
@@ -30,6 +30,10 @@
           ]
         }
       ]
+    },
+    {
+      "name": "multicolumnslibrary",
+      "srcPath": "./multicolumnslibrary",
     }
   ]
 }
\ No newline at end of file
diff --git a/entry/src/main/ets/application/Settings.ets b/entry/src/main/ets/application/Settings.ets
deleted file mode 100644
index 699a478e047c84bf72871c1538fa224f74ef05ee..0000000000000000000000000000000000000000
--- a/entry/src/main/ets/application/Settings.ets
+++ /dev/null
@@ -1,154 +0,0 @@
-/*
- * Copyright (c) 2024 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { BreakpointType } from '../common/BreakpointSystem';
-import { MainItem } from '../common/SettingItem';
-import { WlanItem } from '../common/WlanItem';
-
-let storage = LocalStorage.getShared();
-
-@Entry(storage)
-@Component
-struct Settings {
-  @State pathInfo: NavPathStack = new NavPathStack();
-  @LocalStorageLink('currentBreakPoint') currentBreakPoint: string = 'md';
-
-  @Builder
-  myRouter(name: string, param?: number | undefined) {
-    WlanItem()
-  }
-
-  @Builder
-  CustomDivider() {
-    Divider()
-      .strokeWidth(0.5)
-      .color($r('sys.color.ohos_id_color_list_separator'))
-      .margin({ left: 8, right: 8 })
-  }
-
-  aboutToAppear() {
-    this.pathInfo.pushPath({ name: 'one' });
-  }
-
-  build() {
-    GridRow() {
-      GridCol({ span: { sm: 12, md: 12, lg: 12 } }) {
-        Navigation(this.pathInfo) {
-          List({ space: 12 }) {
-            ListItem() {
-              Search({ placeholder: $r('app.string.search') })
-                .backgroundColor($r('sys.color.comp_background_primary'))
-                .margin({ top: 16 })
-            }
-            .width('100%')
-
-            ListItem() {
-              MainItem({ isUserItem: true, src: $r('app.media.ic_mine_normal') })
-                .backgroundColor($r('sys.color.comp_background_primary'))
-                .borderRadius(16)
-                .padding({ top: 12, bottom: 12 })
-            }
-
-            ListItem() {
-              Column() {
-                MainItem({
-                  itemDesc: $r('app.string.WLAN'),
-                  src: $r('app.media.wlan'),
-                  itemStatusDesc: $r('app.string.closed')
-                })
-                this.CustomDivider()
-                MainItem({
-                  itemDesc: $r('app.string.bluetooth'),
-                  src: $r('app.media.blueTooth'),
-                  itemStatusDesc: $r('app.string.closed')
-                })
-                this.CustomDivider()
-                MainItem({ itemDesc: $r('app.string.mobileData'), src: $r('app.media.mobileData') })
-                this.CustomDivider()
-                MainItem({
-                  itemDesc: $r('app.string.moreConnections'),
-                  src: $r('app.media.ic_settings_more_connections')
-                })
-              }.width('100%')
-              .borderRadius(16)
-              .backgroundColor($r('sys.color.comp_background_primary'))
-              .padding({ top: 4, bottom: 4 })
-            }
-
-            ListItem() {
-              Column() {
-                MainItem({ itemDesc: $r('app.string.desktopAndWallpaper'), src: $r('app.media.desk') })
-                this.CustomDivider()
-                MainItem({ itemDesc: $r('app.string.displayAndBrightness'), src: $r('app.media.displayAndBrightness') })
-              }.width('100%')
-              .borderRadius(16)
-              .backgroundColor($r('sys.color.comp_background_primary'))
-              .padding({ top: 4, bottom: 4 })
-            }
-
-            ListItem() {
-              Column() {
-                MainItem({ itemDesc: $r('app.string.soundAndVibration'), src: $r('app.media.volume') })
-                this.CustomDivider()
-                MainItem({ itemDesc: $r('app.string.notice'), src: $r('app.media.notify') })
-                this.CustomDivider()
-                MainItem({ itemDesc: $r('app.string.storage'), src: $r('app.media.storage') })
-                this.CustomDivider()
-                MainItem({ itemDesc: $r('app.string.safe'), src: $r('app.media.security') })
-                this.CustomDivider()
-                MainItem({ itemDesc: $r('app.string.privacy'), src: $r('app.media.privacy') })
-              }.width('100%')
-              .borderRadius(24)
-              .backgroundColor($r('sys.color.comp_background_primary'))
-              .padding({ top: 4, bottom: 4 })
-            }
-
-            ListItem() {
-              Column() {
-                MainItem({ itemDesc: $r('app.string.userAccounts'), src: $r('app.media.userAccounts') })
-                this.CustomDivider()
-                MainItem({ itemDesc: $r('app.string.system'), src: $r('app.media.system') })
-                this.CustomDivider()
-                MainItem({ itemDesc: $r('app.string.aboutDevice'), src: $r('app.media.aboutDevice') })
-              }.width('100%')
-              .borderRadius(16)
-              .backgroundColor($r('sys.color.comp_background_primary'))
-              .padding(4)
-            }
-          }
-          .scrollBar(BarState.Off)
-          .width('100%')
-          .height('100%')
-          .padding({
-            left: new BreakpointType(16, 16, 16).GetValue(this.currentBreakPoint),
-            right: new BreakpointType(16, 16, 16).GetValue(this.currentBreakPoint)
-          })
-        }
-        .navBarWidth(293)
-        .title($r('app.string.settings'))
-        .backgroundColor($r('sys.color.background_secondary'))
-        .width('100%')
-        .height('100%')
-        .navDestination(this.myRouter)
-      }
-    }
-    .borderWidth({ right: 0.5 })
-    .borderColor({ right: $r('sys.color.comp_divider') })
-    .backgroundColor($r('sys.color.background_secondary'))
-    .onBreakpointChange((breakpoint: string) => {
-      this.currentBreakPoint = breakpoint;
-    })
-  }
-}
\ 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
deleted file mode 100644
index 478fd38d5f32007baf215d06a81056752e8845cd..0000000000000000000000000000000000000000
--- a/entry/src/main/resources/base/profile/main_pages.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "src": [
-    "pages/Index",
-    "application/PhotoAlbum",
-    "application/MailBox",
-    "application/Settings"
-  ]
-}
diff --git a/multicolumnslibrary/.gitignore b/multicolumnslibrary/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..e2713a2779c5a3e0eb879efe6115455592caeea5
--- /dev/null
+++ b/multicolumnslibrary/.gitignore
@@ -0,0 +1,6 @@
+/node_modules
+/oh_modules
+/.preview
+/build
+/.cxx
+/.test
\ No newline at end of file
diff --git a/multicolumnslibrary/Index.ets b/multicolumnslibrary/Index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..2fc7e9a8c9003e8a9d57b97b2429859ff364a7fc
--- /dev/null
+++ b/multicolumnslibrary/Index.ets
@@ -0,0 +1,2 @@
+export { MultiColumnsPage} from './src/main/ets/pages/MultiColumnsPage'
+export { WindowUtil} from './src/main/ets/utils/WindowUtils'
\ No newline at end of file
diff --git a/multicolumnslibrary/build-profile.json5 b/multicolumnslibrary/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..e6773f9f5d76a66d6d19fddc9c6ddb3f5621d3b1
--- /dev/null
+++ b/multicolumnslibrary/build-profile.json5
@@ -0,0 +1,31 @@
+{
+  "apiType": "stageMode",
+  "buildOption": {
+  },
+  "buildOptionSet": [
+    {
+      "name": "release",
+      "arkOptions": {
+        "obfuscation": {
+          "ruleOptions": {
+            "enable": false,
+            "files": [
+              "./obfuscation-rules.txt"
+            ]
+          },
+          "consumerFiles": [
+            "./consumer-rules.txt"
+          ]
+        }
+      },
+    },
+  ],
+  "targets": [
+    {
+      "name": "default"
+    },
+    {
+      "name": "ohosTest"
+    }
+  ]
+}
diff --git a/multicolumnslibrary/consumer-rules.txt b/multicolumnslibrary/consumer-rules.txt
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/multicolumnslibrary/hvigorfile.ts b/multicolumnslibrary/hvigorfile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..42187071482d292588ad40babeda74f7b8d97a23
--- /dev/null
+++ b/multicolumnslibrary/hvigorfile.ts
@@ -0,0 +1,6 @@
+import { harTasks } from '@ohos/hvigor-ohos-plugin';
+
+export default {
+    system: harTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
+    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+}
diff --git a/multicolumnslibrary/obfuscation-rules.txt b/multicolumnslibrary/obfuscation-rules.txt
new file mode 100644
index 0000000000000000000000000000000000000000..272efb6ca3f240859091bbbfc7c5802d52793b0b
--- /dev/null
+++ b/multicolumnslibrary/obfuscation-rules.txt
@@ -0,0 +1,23 @@
+# 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://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/source-obfuscation-V5
+
+# 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/oh-package.json5 b/multicolumnslibrary/oh-package.json5
similarity index 59%
rename from entry/oh-package.json5
rename to multicolumnslibrary/oh-package.json5
index 225946cb11a2c405c8dc81eea89c22f923556638..e7446f1ec7962ad3145d94034b5da16c2aa536d1 100644
--- a/entry/oh-package.json5
+++ b/multicolumnslibrary/oh-package.json5
@@ -1,10 +1,9 @@
 {
-  "license": "",
-  "devDependencies": {},
-  "author": "",
-  "name": "entry",
-  "description": "Please describe the basic information.",
-  "main": "",
+  "name": "multicolumnslibrary",
   "version": "1.0.0",
+  "description": "Please describe the basic information.",
+  "main": "Index.ets",
+  "author": "",
+  "license": "Apache-2.0",
   "dependencies": {}
 }
diff --git a/entry/src/main/ets/application/MailBox.ets b/multicolumnslibrary/src/main/ets/application/MailBox.ets
similarity index 39%
rename from entry/src/main/ets/application/MailBox.ets
rename to multicolumnslibrary/src/main/ets/application/MailBox.ets
index e157a7bbe9aff531ca398a9e9217c3b0e530366d..74e7e32e87fe7b2f69490813a9ad15f17acdf6b0 100644
--- a/entry/src/main/ets/application/MailBox.ets
+++ b/multicolumnslibrary/src/main/ets/application/MailBox.ets
@@ -13,12 +13,17 @@
  * limitations under the License.
  */
 
-import { BreakpointType } from '../common/BreakpointSystem';
+import { BreakpointType } from '../utils/BreakpointSystem';
 import { MailNavigation } from '../common/MailNavigation';
 import { MailSideBar } from '../common/MailSideBar';
 
 let storage = LocalStorage.getShared();
 
+@Builder
+export function MailBoxBuilder() {
+  MailBox();
+}
+
 @Entry(storage)
 @Component
 struct MailBox {
@@ -28,48 +33,52 @@ struct MailBox {
   @StorageProp('topRectHeight') topRectHeight: number = 0;
 
   build() {
-    GridRow() {
-      GridCol({ span: { sm: 12, md: 12, lg: 12 } }) {
-        SideBarContainer(SideBarContainerType.AUTO) {
-          // Area A
-          Column() {
-            MailSideBar()
-          }
-          .borderWidth({ right: 0.5 })
-          .borderColor({ right: $r('sys.color.comp_divider') })
-          .width('100%')
-          .height('100%')
-          .backgroundColor($r('sys.color.background_primary'))
+    NavDestination() {
+      GridRow() {
+        GridCol({ span: { sm: 12, md: 12, lg: 12 } }) {
+          SideBarContainer(SideBarContainerType.AUTO) {
+            // Area A
+            Column() {
+              MailSideBar()
+            }
+            .borderWidth({ right: 0.5 })
+            .borderColor({ right: $r('sys.color.comp_divider') })
+            .width('100%')
+            .height('100%')
+            .backgroundColor($r('sys.color.background_primary'))
 
-          // Area B+C
-          Column() {
-            Stack() {
-              MailNavigation()
-              if (this.isFold && this.currentBreakPoint !== 'lg') {
-                Column().width('100%').height('100%').backgroundColor('#33000000')
+            // Area B+C
+            Column() {
+              Stack() {
+                MailNavigation()
+                if (this.isFold && this.currentBreakPoint !== 'lg') {
+                  Column().width('100%').height('100%').backgroundColor('#33000000')
+                }
               }
-            }
-          }.height('100%').width('100%')
+            }.height('100%').width('100%')
+          }
+          .divider({ color: $r('sys.color.comp_divider'), strokeWidth: 0 })
+          .sideBarWidth(this.sideBarWidth)
+          .minSideBarWidth(240)
+          .minContentWidth(this.currentBreakPoint === 'sm' ? '100%' : 600)
+          .controlButton({
+            left: new BreakpointType({ sm: 16, md: 24, lg: 32 }).getValue(this.currentBreakPoint),
+            top: px2vp(this.topRectHeight),
+            width: 24,
+            height: 24
+          })
+          .showSideBar(this.currentBreakPoint === 'lg')
+          .onChange((value: boolean) => {
+            this.isFold = value;
+          })
         }
-        .divider({ color: $r('sys.color.comp_divider'), strokeWidth: 0 })
-        .sideBarWidth(this.sideBarWidth)
-        .minSideBarWidth(240)
-        .minContentWidth(this.currentBreakPoint === 'sm' ? '100%' : 600)
-        .controlButton({
-          left: new BreakpointType(16, 24, 32).GetValue(this.currentBreakPoint),
-          top: px2vp(this.topRectHeight),
-          width: 24,
-          height: 24
-        })
-        .showSideBar(this.currentBreakPoint === 'lg')
-        .onChange((value: boolean) => {
-          this.isFold = value;
-        })
       }
+      .onBreakpointChange((breakpoint: string) => {
+        this.currentBreakPoint = breakpoint;
+      })
     }
-    .onBreakpointChange((breakpoint: string) => {
-      this.currentBreakPoint = breakpoint;
-    })
+    .hideTitleBar(true)
+    .padding({ top: px2vp(this.topRectHeight) })
   }
 }
 
diff --git a/entry/src/main/ets/application/PhotoAlbum.ets b/multicolumnslibrary/src/main/ets/application/PhotoAlbum.ets
similarity index 50%
rename from entry/src/main/ets/application/PhotoAlbum.ets
rename to multicolumnslibrary/src/main/ets/application/PhotoAlbum.ets
index e70f41585ddefbeccc719702e01df0ca05332af3..b77623dd1984ffea3a8b3c145a36298304fda0ed 100644
--- a/entry/src/main/ets/application/PhotoAlbum.ets
+++ b/multicolumnslibrary/src/main/ets/application/PhotoAlbum.ets
@@ -13,13 +13,18 @@
  * limitations under the License.
  */
 
-import { BreakpointType } from '../common/BreakpointSystem';
+import { BreakpointType } from '../utils/BreakpointSystem';
 import { CommonConstants } from '../common/CommonConstants';
 import { PhotoContent } from '../common/PhotoContent';
 import { PhotoSideBar } from '../common/PhotoSideBar';
 
 let storage = LocalStorage.getShared();
 
+@Builder
+export function PhotoAlbumBuilder() {
+  PhotoAlbum();
+}
+
 @Entry(storage)
 @Component
 struct PhotoAlbum {
@@ -29,33 +34,37 @@ struct PhotoAlbum {
   @StorageProp('topRectHeight') topRectHeight: number = 0;
 
   build() {
-    GridRow() {
-      GridCol({ span: { sm: 12, md: 12, lg: 12 } }) {
-        SideBarContainer(SideBarContainerType.AUTO) {
-          Column() {
-            PhotoSideBar()
-          }
-          .backgroundColor($r('sys.color.comp_background_primary'))
+    NavDestination() {
+      GridRow() {
+        GridCol({ span: { sm: 12, md: 12, lg: 12 } }) {
+          SideBarContainer(SideBarContainerType.AUTO) {
+            Column() {
+              PhotoSideBar()
+            }
+            .backgroundColor($r('sys.color.comp_background_primary'))
 
-          Column() {
-            PhotoContent({ sideBarStatus: $sideBarStatus })
+            Column() {
+              PhotoContent({ sideBarStatus: $sideBarStatus })
+            }
+            .backgroundColor($r('sys.color.background_secondary'))
           }
-          .backgroundColor($r('sys.color.background_secondary'))
+          .divider({ strokeWidth: 0.5, color: $r('sys.color.comp_divider') })
+          .controlButton({
+            left: new BreakpointType({ sm: 16, md: 24, lg: 32 }).getValue(this.curBp),
+            top: px2vp(this.topRectHeight),
+            width: 24,
+            height: 24
+          })
+          .onChange((value: boolean) => {
+            this.sideBarStatus = value;
+          })
         }
-        .divider({ strokeWidth: 0.5, color: $r('sys.color.comp_divider') })
-        .controlButton({
-          left: new BreakpointType(16, 24, 32).GetValue(this.curBp),
-          top: px2vp(this.topRectHeight),
-          width: 24,
-          height: 24
-        })
-        .onChange((value: boolean) => {
-          this.sideBarStatus = value;
-        })
       }
+      .onBreakpointChange((breakpoint: string) => {
+        this.currentBreakPoint = breakpoint;
+      })
     }
-    .onBreakpointChange((breakpoint: string) => {
-      this.currentBreakPoint = breakpoint;
-    })
+    .hideTitleBar(true)
+    .padding({ top: px2vp(this.topRectHeight), })
   }
 }
\ No newline at end of file
diff --git a/multicolumnslibrary/src/main/ets/application/Settings.ets b/multicolumnslibrary/src/main/ets/application/Settings.ets
new file mode 100644
index 0000000000000000000000000000000000000000..d6057851b7748ab5555f1d08bb5e869b5e10515b
--- /dev/null
+++ b/multicolumnslibrary/src/main/ets/application/Settings.ets
@@ -0,0 +1,167 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointType } from '../utils/BreakpointSystem';
+import { MainItem } from '../common/SettingItem';
+import { WlanItem } from '../common/WlanItem';
+
+let storage = LocalStorage.getShared();
+
+@Builder
+export function SettingsBuilder() {
+  Settings();
+}
+
+@Entry(storage)
+@Component
+struct Settings {
+  @State pathInfo: NavPathStack = new NavPathStack();
+  @LocalStorageLink('currentBreakPoint') currentBreakPoint: string = 'md';
+  @StorageProp('topRectHeight') topRectHeight: number = 0;
+
+  @Builder
+  myRouter(name: string, param?: number | undefined) {
+    WlanItem()
+  }
+
+  @Builder
+  CustomDivider() {
+    Divider()
+      .strokeWidth(0.5)
+      .color($r('sys.color.ohos_id_color_list_separator'))
+      .margin({ left: 8, right: 8 })
+  }
+
+  aboutToAppear() {
+    this.pathInfo.pushPath({ name: 'one' });
+  }
+
+  build() {
+    NavDestination() {
+      GridRow() {
+        GridCol({ span: { sm: 12, md: 12, lg: 12 } }) {
+          Navigation(this.pathInfo) {
+            List({ space: 12 }) {
+              ListItem() {
+                Search({ placeholder: $r('app.string.search') })
+                  .backgroundColor($r('sys.color.comp_background_primary'))
+                  .margin({ top: 16 })
+              }
+              .width('100%')
+
+              ListItem() {
+                MainItem({ isUserItem: true, src: $r('app.media.ic_mine_normal') })
+                  .backgroundColor($r('sys.color.comp_background_primary'))
+                  .borderRadius(16)
+                  .padding({ top: 12, bottom: 12 })
+              }
+
+              ListItem() {
+                Column() {
+                  MainItem({
+                    itemDesc: $r('app.string.WLAN'),
+                    src: $r('app.media.wlan'),
+                    itemStatusDesc: $r('app.string.closed')
+                  })
+                  this.CustomDivider()
+                  MainItem({
+                    itemDesc: $r('app.string.bluetooth'),
+                    src: $r('app.media.blueTooth'),
+                    itemStatusDesc: $r('app.string.closed')
+                  })
+                  this.CustomDivider()
+                  MainItem({ itemDesc: $r('app.string.mobileData'), src: $r('app.media.mobileData') })
+                  this.CustomDivider()
+                  MainItem({
+                    itemDesc: $r('app.string.moreConnections'),
+                    src: $r('app.media.ic_settings_more_connections')
+                  })
+                }.width('100%')
+                .borderRadius(16)
+                .backgroundColor($r('sys.color.comp_background_primary'))
+                .padding({ top: 4, bottom: 4 })
+              }
+
+              ListItem() {
+                Column() {
+                  MainItem({ itemDesc: $r('app.string.desktopAndWallpaper'), src: $r('app.media.desk') })
+                  this.CustomDivider()
+                  MainItem({
+                    itemDesc: $r('app.string.displayAndBrightness'),
+                    src: $r('app.media.displayAndBrightness')
+                  })
+                }.width('100%')
+                .borderRadius(16)
+                .backgroundColor($r('sys.color.comp_background_primary'))
+                .padding({ top: 4, bottom: 4 })
+              }
+
+              ListItem() {
+                Column() {
+                  MainItem({ itemDesc: $r('app.string.soundAndVibration'), src: $r('app.media.volume') })
+                  this.CustomDivider()
+                  MainItem({ itemDesc: $r('app.string.notice'), src: $r('app.media.notify') })
+                  this.CustomDivider()
+                  MainItem({ itemDesc: $r('app.string.storage'), src: $r('app.media.storage') })
+                  this.CustomDivider()
+                  MainItem({ itemDesc: $r('app.string.safe'), src: $r('app.media.security') })
+                  this.CustomDivider()
+                  MainItem({ itemDesc: $r('app.string.privacy'), src: $r('app.media.privacy') })
+                }.width('100%')
+                .borderRadius(24)
+                .backgroundColor($r('sys.color.comp_background_primary'))
+                .padding({ top: 4, bottom: 4 })
+              }
+
+              ListItem() {
+                Column() {
+                  MainItem({ itemDesc: $r('app.string.userAccounts'), src: $r('app.media.userAccounts') })
+                  this.CustomDivider()
+                  MainItem({ itemDesc: $r('app.string.system'), src: $r('app.media.system') })
+                  this.CustomDivider()
+                  MainItem({ itemDesc: $r('app.string.aboutDevice'), src: $r('app.media.aboutDevice') })
+                }.width('100%')
+                .borderRadius(16)
+                .backgroundColor($r('sys.color.comp_background_primary'))
+                .padding(4)
+              }
+            }
+            .scrollBar(BarState.Off)
+            .width('100%')
+            .height('100%')
+            .padding({
+              left: new BreakpointType({ sm: 16, md: 16, lg: 16 }).getValue(this.currentBreakPoint),
+              right: new BreakpointType({ sm: 16, md: 16, lg: 16 }).getValue(this.currentBreakPoint)
+            })
+          }
+          .navBarWidth(293)
+          .title($r('app.string.settings'))
+          .backgroundColor($r('sys.color.background_secondary'))
+          .width('100%')
+          .height('100%')
+          .navDestination(this.myRouter)
+        }
+      }
+      .borderWidth({ right: 0.5 })
+      .borderColor({ right: $r('sys.color.comp_divider') })
+      .backgroundColor($r('sys.color.background_secondary'))
+      .onBreakpointChange((breakpoint: string) => {
+        this.currentBreakPoint = breakpoint;
+      })
+    }
+    .hideTitleBar(true)
+    .padding({ top: px2vp(this.topRectHeight) })
+  }
+}
\ No newline at end of file
diff --git a/entry/src/main/ets/common/CommonConstants.ets b/multicolumnslibrary/src/main/ets/common/CommonConstants.ets
similarity index 86%
rename from entry/src/main/ets/common/CommonConstants.ets
rename to multicolumnslibrary/src/main/ets/common/CommonConstants.ets
index b2f6854da1078ab18bc7348c48faebb9ded618b1..5b3ebeab8b365ab91ea4471f6303412fccba8a5b 100644
--- a/entry/src/main/ets/common/CommonConstants.ets
+++ b/multicolumnslibrary/src/main/ets/common/CommonConstants.ets
@@ -42,13 +42,13 @@ export class CommonConstants {
    */
   public static readonly ROUTES: Route[] = [
     {
-      text: $r('app.string.first_title'), to: 'application/MailBox'
+      text: $r('app.string.first_title'), to: 'MailBox'
     },
     {
-      text: $r('app.string.second_title'), to: 'application/PhotoAlbum'
+      text: $r('app.string.second_title'), to: 'PhotoAlbum'
     },
     {
-      text: $r('app.string.third_title'), to: 'application/Settings'
+      text: $r('app.string.third_title'), to: 'Settings'
     }
   ];
 }
diff --git a/entry/src/main/ets/common/MailContent.ets b/multicolumnslibrary/src/main/ets/common/MailContent.ets
similarity index 95%
rename from entry/src/main/ets/common/MailContent.ets
rename to multicolumnslibrary/src/main/ets/common/MailContent.ets
index c0791504e740f0450bb844cbd90d290d32e2f6ba..aa560d56623d8cc1bac7e9b08ce8f31fc8eced16 100644
--- a/entry/src/main/ets/common/MailContent.ets
+++ b/multicolumnslibrary/src/main/ets/common/MailContent.ets
@@ -14,7 +14,7 @@
  */
 
 import { OperateTabs } from '../model/dataType';
-import { BreakpointType } from './BreakpointSystem';
+import { BreakpointType } from '../utils/BreakpointSystem';
 import { CommonConstants } from './CommonConstants';
 
 @Component
@@ -80,8 +80,8 @@ export struct MailContent {
         }
         .layoutWeight(1)
         .padding({
-          left: new BreakpointType(16, 24, 32).GetValue(this.curBp),
-          right: new BreakpointType(16, 24, 32).GetValue(this.curBp),
+          left: new BreakpointType({ sm: 16, md: 24, lg: 32 }).getValue(this.curBp),
+          right: new BreakpointType({ sm: 16, md: 24, lg: 32 }).getValue(this.curBp),
         })
         .alignItems(HorizontalAlign.Start)
 
diff --git a/entry/src/main/ets/common/MailNavigation.ets b/multicolumnslibrary/src/main/ets/common/MailNavigation.ets
similarity index 87%
rename from entry/src/main/ets/common/MailNavigation.ets
rename to multicolumnslibrary/src/main/ets/common/MailNavigation.ets
index bbdf13ee315bd5ecb29d4d24bc139a51adf5f96c..a7576f786cc1f10e7daba269cce703b6b2b8a1fd 100644
--- a/entry/src/main/ets/common/MailNavigation.ets
+++ b/multicolumnslibrary/src/main/ets/common/MailNavigation.ets
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { BreakpointType } from './BreakpointSystem';
+import { BreakpointType } from '../utils/BreakpointSystem';
 import { MailContent } from './MailContent';
 
 @Component
@@ -62,8 +62,8 @@ export struct MailNavigation {
     .width('100%')
     .padding({
       top: 80,
-      left: new BreakpointType(16, 24, 32).GetValue(this.currentBreakPoint),
-      right: new BreakpointType(16, 24, 32).GetValue(this.currentBreakPoint)
+      left: new BreakpointType({ sm: 16, md: 24, lg: 32 }).getValue(this.currentBreakPoint),
+      right: new BreakpointType({ sm: 16, md: 24, lg: 32 }).getValue(this.currentBreakPoint)
     })
   }
 
@@ -116,8 +116,8 @@ export struct MailNavigation {
         }
         .height('100%').width('100%')
         .padding({
-          left: new BreakpointType(16, 24, 32).GetValue(this.currentBreakPoint),
-          right: new BreakpointType(16, 24, 32).GetValue(this.currentBreakPoint)
+          left: new BreakpointType({ sm: 16, md: 24, lg: 32 }).getValue(this.currentBreakPoint),
+          right: new BreakpointType({ sm: 16, md: 24, lg: 32 }).getValue(this.currentBreakPoint)
         })
 
         if (this.currentBreakPoint !== 'lg') {
@@ -125,7 +125,7 @@ export struct MailNavigation {
         }
       }
     }
-    .navBarWidth(new BreakpointType(321, 321, 390).GetValue(this.currentBreakPoint) as number | Length)
+    .navBarWidth(new BreakpointType({ sm: 321, md: 321, lg: 390 }).getValue(this.currentBreakPoint) as number | Length)
     .navDestination(this.myRouter)
     .menus(this.NavigationMenus)
     .width('100%')
diff --git a/entry/src/main/ets/common/MailSideBar.ets b/multicolumnslibrary/src/main/ets/common/MailSideBar.ets
similarity index 95%
rename from entry/src/main/ets/common/MailSideBar.ets
rename to multicolumnslibrary/src/main/ets/common/MailSideBar.ets
index 597fc7c89b29a1d0a66d3c6935750a46e74bbe1e..5a816798f133d38c570503aa5362fd94a41ba215 100644
--- a/entry/src/main/ets/common/MailSideBar.ets
+++ b/multicolumnslibrary/src/main/ets/common/MailSideBar.ets
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 import { MailType } from '../model/dataType';
-import { BreakpointType } from './BreakpointSystem';
+import { BreakpointType } from '../utils/BreakpointSystem';
 import { CommonConstants } from './CommonConstants';
 
 @Extend(Text)
@@ -99,8 +99,8 @@ struct AccountInfo {
       .divider({ strokeWidth: 0.5, color: $r('sys.color.comp_divider') })
     }
     .padding({
-      left: new BreakpointType(16, 24, 32).GetValue(this.curBp),
-      right: new BreakpointType(16, 24, 32).GetValue(this.curBp)
+      left: new BreakpointType({ sm: 16, md: 24, lg: 32 }).getValue(this.curBp),
+      right: new BreakpointType({ sm: 16, md: 24, lg: 32 }).getValue(this.curBp)
     })
   }
 }
diff --git a/entry/src/main/ets/common/PhotoContent.ets b/multicolumnslibrary/src/main/ets/common/PhotoContent.ets
similarity index 95%
rename from entry/src/main/ets/common/PhotoContent.ets
rename to multicolumnslibrary/src/main/ets/common/PhotoContent.ets
index b8fca8ed0892beb208922b34df895cf3a49ccbb9..6c46b0ecaa834ad3f93d73548abc2d93c2de0c8c 100644
--- a/entry/src/main/ets/common/PhotoContent.ets
+++ b/multicolumnslibrary/src/main/ets/common/PhotoContent.ets
@@ -14,7 +14,7 @@
  */
 
 import { PhotoType } from '../model/dataType';
-import { BreakpointType } from './BreakpointSystem';
+import { BreakpointType } from '../utils/BreakpointSystem';
 import { CommonConstants } from './CommonConstants';
 
 @Component
@@ -111,8 +111,8 @@ export struct PhotoContent {
       .margin({ top: 24 })
     }
     .padding({
-      left: new BreakpointType(16, 24, 32).GetValue(this.currentBreakPoint),
-      right: new BreakpointType(16, 24, 32).GetValue(this.currentBreakPoint)
+      left: new BreakpointType({ sm: 16, md: 24, lg: 32 }).getValue(this.currentBreakPoint),
+      right: new BreakpointType({ sm: 16, md: 24, lg: 32 }).getValue(this.currentBreakPoint)
     })
   }
 }
\ No newline at end of file
diff --git a/entry/src/main/ets/common/PhotoSideBar.ets b/multicolumnslibrary/src/main/ets/common/PhotoSideBar.ets
similarity index 95%
rename from entry/src/main/ets/common/PhotoSideBar.ets
rename to multicolumnslibrary/src/main/ets/common/PhotoSideBar.ets
index 91ea1ab61de4a4fc02ddb09c53a44baa1873764f..d7879088dc68e62caf5a6532d6f01b746ad99b52 100644
--- a/entry/src/main/ets/common/PhotoSideBar.ets
+++ b/multicolumnslibrary/src/main/ets/common/PhotoSideBar.ets
@@ -14,7 +14,7 @@
  */
 
 import { PhotoType } from '../model/dataType';
-import { BreakpointType } from './BreakpointSystem';
+import { BreakpointType } from '../utils/BreakpointSystem';
 import { CommonConstants } from './CommonConstants';
 
 @Component
@@ -113,8 +113,8 @@ export struct PhotoSideBar {
     .width('100%').height('100%')
     .padding({
       top: px2vp(this.topRectHeight),
-      left: new BreakpointType(16, 24, 32).GetValue(this.curBp),
-      right: new BreakpointType(16, 24, 32).GetValue(this.curBp)
+      left: new BreakpointType({sm:16,md: 24,lg: 32}).getValue(this.curBp),
+      right: new BreakpointType({sm:16,md: 24,lg: 32}).getValue(this.curBp)
     })
   }
 }
\ No newline at end of file
diff --git a/entry/src/main/ets/common/SettingItem.ets b/multicolumnslibrary/src/main/ets/common/SettingItem.ets
similarity index 100%
rename from entry/src/main/ets/common/SettingItem.ets
rename to multicolumnslibrary/src/main/ets/common/SettingItem.ets
diff --git a/entry/src/main/ets/common/WlanItem.ets b/multicolumnslibrary/src/main/ets/common/WlanItem.ets
similarity index 93%
rename from entry/src/main/ets/common/WlanItem.ets
rename to multicolumnslibrary/src/main/ets/common/WlanItem.ets
index 926aae47a61b523e858ab2e1f9fe8890d8a97ffb..3c5db643bc3489dcf0c8ff2ddf5c8a0311b850f4 100644
--- a/entry/src/main/ets/common/WlanItem.ets
+++ b/multicolumnslibrary/src/main/ets/common/WlanItem.ets
@@ -14,14 +14,14 @@
  */
 
 import { SubItem } from './SettingItem';
-import { router } from '@kit.ArkUI';
-import { BreakpointType } from './BreakpointSystem';
+import { BreakpointType } from '../utils/BreakpointSystem';
 
 @Component
 export struct WlanItem {
   @State netWorkStatus: Resource = $r('app.string.closed');
   @LocalStorageProp('currentBreakPoint') currentBreakPoint: string = 'md';
   @StorageProp('topRectHeight') topRectHeight: number = 0;
+  @Consume('pathStack') pageStack: NavPathStack;
 
   @Builder
   CustomDivider() {
@@ -44,7 +44,7 @@ export struct WlanItem {
           .aspectRatio(1)
           .backgroundColor($r('sys.color.comp_background_tertiary'))
           .onClick(() => {
-            router.back();
+            this.pageStack.pop()
           })
         }
         Text('WLAN')
@@ -155,8 +155,8 @@ export struct WlanItem {
       .height('92%')
     }
     .padding({
-      left: new BreakpointType(16, 16, 16).GetValue(this.currentBreakPoint),
-      right: new BreakpointType(16, 16, 16).GetValue(this.currentBreakPoint),
+      left: new BreakpointType({ sm: 16, md: 16, lg: 16 }).getValue(this.currentBreakPoint),
+      right: new BreakpointType({ sm: 16, md: 16, lg: 16 }).getValue(this.currentBreakPoint),
       top: px2vp(this.topRectHeight)
     })
     .hideTitleBar(true)
diff --git a/entry/src/main/ets/model/dataType.ets b/multicolumnslibrary/src/main/ets/model/dataType.ets
similarity index 100%
rename from entry/src/main/ets/model/dataType.ets
rename to multicolumnslibrary/src/main/ets/model/dataType.ets
diff --git a/entry/src/main/ets/pages/Index.ets b/multicolumnslibrary/src/main/ets/pages/MultiColumnsPage.ets
similarity index 35%
rename from entry/src/main/ets/pages/Index.ets
rename to multicolumnslibrary/src/main/ets/pages/MultiColumnsPage.ets
index c21e2316e455c5e15de4e093d98cd3a49ad7b781..7aa4c730b61776a96e51a52658409c70c01bca3e 100644
--- a/entry/src/main/ets/pages/Index.ets
+++ b/multicolumnslibrary/src/main/ets/pages/MultiColumnsPage.ets
@@ -13,60 +13,65 @@
  * limitations under the License.
  */
 
-import { router } from '@kit.ArkUI';
-import { CommonConstants, Route } from '../common/CommonConstants';
 import { hilog } from '@kit.PerformanceAnalysisKit';
 import { BusinessError } from '@kit.BasicServicesKit';
+import { CommonConstants, Route } from '../common/CommonConstants';
 
-@Entry
 @Component
-struct Index {
+export struct MultiColumnsPage {
   @StorageProp('currentBreakpoint') curBp: string = CommonConstants.BREAK_POINT_SM;
   @StorageProp('bottomRectHeight') bottomRectHeight: number = 0;
   @StorageProp('topRectHeight') topRectHeight: number = 0;
+  @Provide('pathStack') pathStack: NavPathStack = new NavPathStack();
   private routes: Route[] = CommonConstants.ROUTES;
 
   build() {
-    Column() {
-      Text($r('app.string.project_name'))
-        .fontWeight(FontWeight.Bold)
-        .fontColor($r('sys.color.font_primary'))
-        .fontSize($r('sys.float.Title_L'))
-        .alignSelf(ItemAlign.Start)
-        .margin({
-          left: this.curBp === 'sm' ? $r('sys.float.padding_level0') :
-            this.curBp === 'md' ? $r('sys.float.padding_level4') : $r('sys.float.padding_level8')
-        })
+    Navigation(this.pathStack) {
       Column() {
-        ForEach(this.routes, (item: Route) => {
-          Button(item.text)
-            .fontSize($r('sys.float.Subtitle_M'))
-            .fontColor($r('sys.color.font_on_primary'))
-            .width(this.curBp === 'sm' ? '100%' : $r('app.float.index_button_width_lg'))
-            .height($r('app.float.button_height'))
-            .margin({ top: $r('sys.float.padding_level6') })
-            .backgroundColor($r('sys.color.comp_background_emphasize'))
-            .onClick(() => {
-              try {
-                router.pushUrl({ url: item.to });
-              } catch (error) {
-                hilog.error(0x0000, 'testTag', `Push url fail. Cause: ${(error as BusinessError).message}`);
-              }
-            })
-        }, (item: Route) => JSON.stringify(item))
+        Text($r('app.string.project_name'))
+          .fontWeight(FontWeight.Bold)
+          .fontColor($r('sys.color.font_primary'))
+          .fontSize($r('sys.float.Title_L'))
+          .alignSelf(ItemAlign.Start)
+          .margin({
+            left: this.curBp === 'sm' ? $r('sys.float.padding_level0') :
+              this.curBp === 'md' ? $r('sys.float.padding_level4') : $r('sys.float.padding_level8')
+          })
+        Column() {
+          ForEach(this.routes, (item: Route) => {
+            Button(item.text)
+              .fontSize($r('sys.float.Subtitle_M'))
+              .fontColor($r('sys.color.font_on_primary'))
+              .width(this.curBp === 'sm' ? '100%' : $r('app.float.index_button_width_lg'))
+              .height($r('app.float.button_height'))
+              .margin({ top: $r('sys.float.padding_level6') })
+              .backgroundColor($r('sys.color.comp_background_emphasize'))
+              .onClick(() => {
+                try {
+                  hilog.info(0x0000, '1111111111', `Push url fail. Cause: ${item.to}`);
+
+                  this.pathStack.pushPathByName(item.to, null)
+                } catch (error) {
+                  hilog.error(0x0000, 'testTag', `Push url fail. Cause: ${(error as BusinessError).message}`);
+                }
+              })
+          }, (item: Route) => JSON.stringify(item))
+        }
+        .width(CommonConstants.FULL_WIDTH)
       }
+      .backgroundColor($r('sys.color.background_primary'))
       .width(CommonConstants.FULL_WIDTH)
+      .height(CommonConstants.FULL_HEIGHT)
+      .alignItems(HorizontalAlign.Center)
+      .justifyContent(FlexAlign.SpaceBetween)
+      .padding({
+        left: $r('sys.float.padding_level8'),
+        right: $r('sys.float.padding_level8'),
+        top: CommonConstants.PADDING_TOP_INDEX + px2vp(this.topRectHeight),
+        bottom: CommonConstants.PADDING_BOTTOM_INDEX + px2vp(this.bottomRectHeight)
+      })
     }
-    .backgroundColor($r('sys.color.background_primary'))
-    .width(CommonConstants.FULL_WIDTH)
-    .height(CommonConstants.FULL_HEIGHT)
-    .alignItems(HorizontalAlign.Center)
-    .justifyContent(FlexAlign.SpaceBetween)
-    .padding({
-      left: $r('sys.float.padding_level8'),
-      right: $r('sys.float.padding_level8'),
-      top: CommonConstants.PADDING_TOP_INDEX + px2vp(this.topRectHeight),
-      bottom: CommonConstants.PADDING_BOTTOM_INDEX + px2vp(this.bottomRectHeight)
-    })
+    .hideTitleBar(true)
+    .padding({ top: this.topRectHeight })
   }
 }
\ No newline at end of file
diff --git a/multicolumnslibrary/src/main/ets/utils/BreakpointSystem.ets b/multicolumnslibrary/src/main/ets/utils/BreakpointSystem.ets
new file mode 100644
index 0000000000000000000000000000000000000000..f1c87347334c3abc307130bc0f7405016735ac95
--- /dev/null
+++ b/multicolumnslibrary/src/main/ets/utils/BreakpointSystem.ets
@@ -0,0 +1,118 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { window } from '@kit.ArkUI';
+import type { BusinessError } from '@kit.BasicServicesKit';
+import { hilog } from '@kit.PerformanceAnalysisKit';
+
+const TAG: string = '[BreakpointSystem]';
+
+export enum BreakpointTypeEnum {
+  XS = 'xs',
+  SM = 'sm',
+  MD = 'md',
+  LG = 'lg',
+  XL = 'xl',
+}
+
+export interface BreakpointTypes<T> {
+  xs?: T;
+  sm: T;
+  md: T;
+  lg: T;
+  xl?: T;
+}
+
+export class BreakpointType<T> {
+  private xs: T;
+  private sm: T;
+  private md: T;
+  private lg: T;
+  private xl: T;
+
+  public constructor(param: BreakpointTypes<T>) {
+    this.xs = param.xs || param.sm;
+    this.sm = param.sm;
+    this.md = param.md;
+    this.lg = param.lg;
+    this.xl = param.xl || param.lg;
+  }
+
+  public getValue(currentBreakpoint: string): T {
+    if (currentBreakpoint === BreakpointTypeEnum.XS) {
+      return this.xs;
+    }
+    if (currentBreakpoint === BreakpointTypeEnum.SM) {
+      return this.sm;
+    }
+    if (currentBreakpoint === BreakpointTypeEnum.MD) {
+      return this.md;
+    }
+    if (currentBreakpoint === BreakpointTypeEnum.XL) {
+      return this.xl;
+    }
+    return this.lg;
+  }
+}
+
+export class BreakpointSystem {
+  private static instance: BreakpointSystem;
+  private currentBreakpoint: BreakpointTypeEnum = BreakpointTypeEnum.MD;
+  private uiContext?: UIContext;
+
+  private constructor() {
+  }
+
+  public static getInstance(): BreakpointSystem {
+    if (!BreakpointSystem.instance) {
+      BreakpointSystem.instance = new BreakpointSystem();
+    }
+    return BreakpointSystem.instance;
+  }
+
+  public updateCurrentBreakpoint(breakpoint: BreakpointTypeEnum): void {
+    if (this.currentBreakpoint !== breakpoint) {
+      this.currentBreakpoint = breakpoint;
+      AppStorage.setOrCreate('currentBreakpoint', this.currentBreakpoint);
+    }
+  }
+
+  public onWindowSizeChange(window: window.Window): void {
+    this.updateWidthBp(window);
+  }
+
+  public updateWidthBp(window: window.Window): void {
+    try {
+      this.uiContext = window.getUIContext();
+      const windowWidth: WidthBreakpoint = this.uiContext.getWindowWidthBreakpoint();
+      let widthBp: BreakpointTypeEnum = BreakpointTypeEnum.MD;
+      if (windowWidth === WidthBreakpoint.WIDTH_XS) {
+        widthBp = BreakpointTypeEnum.XS;
+      } else if (windowWidth === WidthBreakpoint.WIDTH_SM) {
+        widthBp = BreakpointTypeEnum.SM;
+      } else if (windowWidth === WidthBreakpoint.WIDTH_MD) {
+        widthBp = BreakpointTypeEnum.MD;
+      } else if (windowWidth === WidthBreakpoint.WIDTH_LG) {
+        widthBp = BreakpointTypeEnum.LG;
+      } else {
+        widthBp = BreakpointTypeEnum.XL;
+      }
+      this.updateCurrentBreakpoint(widthBp);
+    } catch (error) {
+      const err: BusinessError = error as BusinessError;
+      hilog.error(0x0000, TAG, `UpdateBreakpoint fail, error code: ${err.code}, message: ${err.message}`);
+    }
+  }
+}
\ No newline at end of file
diff --git a/multicolumnslibrary/src/main/ets/utils/WindowUtils.ets b/multicolumnslibrary/src/main/ets/utils/WindowUtils.ets
new file mode 100644
index 0000000000000000000000000000000000000000..e059b5d42a30b23c32d1a60fc6c899fb809a72d2
--- /dev/null
+++ b/multicolumnslibrary/src/main/ets/utils/WindowUtils.ets
@@ -0,0 +1,70 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { window } from '@kit.ArkUI';
+import type { BusinessError } from '@kit.BasicServicesKit';
+import { BreakpointSystem } from './BreakpointSystem';
+import { hilog } from '@kit.PerformanceAnalysisKit';
+
+const TAG: string = '[WindowUtil]';
+
+export class WindowUtil {
+  public static requestFullScreen(windowStage: window.WindowStage): void {
+    windowStage.getMainWindow((err: BusinessError, data: window.Window) => {
+      if (err.code) {
+        return;
+      }
+      const windowClass: window.Window = data;
+      // Realize the immersive effect.
+      try {
+        const promise: Promise<void> = windowClass.setWindowLayoutFullScreen(true);
+        promise.then(() => {
+          hilog.info(0x0000, TAG, 'Succeeded in setting the window layout to full-screen mode.');
+        }).catch((err: BusinessError) => {
+          hilog.info(0x0000, TAG,
+            `Failed to set the window layout to full-screen mode. Cause: ${err.code}, ${err.message}`);
+        });
+      } catch {
+        hilog.error(0x0000, TAG, 'Failed to set the window layout to full-screen mode. ');
+      }
+    });
+  }
+
+  public static registerBreakPoint(windowStage: window.WindowStage) {
+    windowStage.getMainWindow((err: BusinessError, data: window.Window) => {
+      if (err.code) {
+        hilog.error(0x0000, TAG, `Failed to get main window: ${err.message}`);
+        return;
+      }
+      BreakpointSystem.getInstance().updateWidthBp(data);
+      data.on('windowSizeChange', () => BreakpointSystem.getInstance().onWindowSizeChange(data));
+      data.on('avoidAreaChange', (avoidAreaOption) => {
+        if (avoidAreaOption.type === window.AvoidAreaType.TYPE_SYSTEM ||
+          avoidAreaOption.type === window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR) {
+          WindowUtil.setAvoidArea(avoidAreaOption.type, avoidAreaOption.area);
+        }
+      });
+    })
+  }
+
+  // Get status bar height and indicator height.
+  public static setAvoidArea(type: window.AvoidAreaType, area: window.AvoidArea) {
+    if (type === window.AvoidAreaType.TYPE_SYSTEM) {
+      AppStorage.setOrCreate('topRectHeight', px2vp(area.topRect.height));
+    } else {
+      AppStorage.setOrCreate('bottomRectHeight', px2vp(area.bottomRect.height));
+    }
+  }
+}
\ No newline at end of file
diff --git a/multicolumnslibrary/src/main/module.json5 b/multicolumnslibrary/src/main/module.json5
new file mode 100644
index 0000000000000000000000000000000000000000..00a28f3f83bb415023c4d15a881a9eb2988d3e4f
--- /dev/null
+++ b/multicolumnslibrary/src/main/module.json5
@@ -0,0 +1,12 @@
+{
+  "module": {
+    "name": "multicolumnslibrary",
+    "type": "har",
+    "deviceTypes": [
+      "default",
+      "tablet",
+      "2in1"
+    ],
+    "routerMap": "$profile:route_map"
+  }
+}
diff --git a/entry/src/main/resources/base/element/color.json b/multicolumnslibrary/src/main/resources/base/element/color.json
similarity index 100%
rename from entry/src/main/resources/base/element/color.json
rename to multicolumnslibrary/src/main/resources/base/element/color.json
diff --git a/entry/src/main/resources/base/element/float.json b/multicolumnslibrary/src/main/resources/base/element/float.json
similarity index 100%
rename from entry/src/main/resources/base/element/float.json
rename to multicolumnslibrary/src/main/resources/base/element/float.json
diff --git a/entry/src/main/resources/base/element/string.json b/multicolumnslibrary/src/main/resources/base/element/string.json
similarity index 100%
rename from entry/src/main/resources/base/element/string.json
rename to multicolumnslibrary/src/main/resources/base/element/string.json
diff --git a/entry/src/main/resources/base/media/P1.png b/multicolumnslibrary/src/main/resources/base/media/P1.png
similarity index 100%
rename from entry/src/main/resources/base/media/P1.png
rename to multicolumnslibrary/src/main/resources/base/media/P1.png
diff --git a/entry/src/main/resources/base/media/P2.png b/multicolumnslibrary/src/main/resources/base/media/P2.png
similarity index 100%
rename from entry/src/main/resources/base/media/P2.png
rename to multicolumnslibrary/src/main/resources/base/media/P2.png
diff --git a/entry/src/main/resources/base/media/P3.png b/multicolumnslibrary/src/main/resources/base/media/P3.png
similarity index 100%
rename from entry/src/main/resources/base/media/P3.png
rename to multicolumnslibrary/src/main/resources/base/media/P3.png
diff --git a/entry/src/main/resources/base/media/P4.png b/multicolumnslibrary/src/main/resources/base/media/P4.png
similarity index 100%
rename from entry/src/main/resources/base/media/P4.png
rename to multicolumnslibrary/src/main/resources/base/media/P4.png
diff --git a/entry/src/main/resources/base/media/P5.png b/multicolumnslibrary/src/main/resources/base/media/P5.png
similarity index 100%
rename from entry/src/main/resources/base/media/P5.png
rename to multicolumnslibrary/src/main/resources/base/media/P5.png
diff --git a/entry/src/main/resources/base/media/P6.png b/multicolumnslibrary/src/main/resources/base/media/P6.png
similarity index 100%
rename from entry/src/main/resources/base/media/P6.png
rename to multicolumnslibrary/src/main/resources/base/media/P6.png
diff --git a/entry/src/main/resources/base/media/P7.png b/multicolumnslibrary/src/main/resources/base/media/P7.png
similarity index 100%
rename from entry/src/main/resources/base/media/P7.png
rename to multicolumnslibrary/src/main/resources/base/media/P7.png
diff --git a/entry/src/main/resources/base/media/P8.png b/multicolumnslibrary/src/main/resources/base/media/P8.png
similarity index 100%
rename from entry/src/main/resources/base/media/P8.png
rename to multicolumnslibrary/src/main/resources/base/media/P8.png
diff --git a/entry/src/main/resources/base/media/aboutDevice.svg b/multicolumnslibrary/src/main/resources/base/media/aboutDevice.svg
similarity index 100%
rename from entry/src/main/resources/base/media/aboutDevice.svg
rename to multicolumnslibrary/src/main/resources/base/media/aboutDevice.svg
diff --git a/entry/src/main/resources/base/media/allFolders.svg b/multicolumnslibrary/src/main/resources/base/media/allFolders.svg
similarity index 100%
rename from entry/src/main/resources/base/media/allFolders.svg
rename to multicolumnslibrary/src/main/resources/base/media/allFolders.svg
diff --git a/entry/src/main/resources/base/media/blueTooth.png b/multicolumnslibrary/src/main/resources/base/media/blueTooth.png
similarity index 100%
rename from entry/src/main/resources/base/media/blueTooth.png
rename to multicolumnslibrary/src/main/resources/base/media/blueTooth.png
diff --git a/entry/src/main/resources/base/media/desk.png b/multicolumnslibrary/src/main/resources/base/media/desk.png
similarity index 100%
rename from entry/src/main/resources/base/media/desk.png
rename to multicolumnslibrary/src/main/resources/base/media/desk.png
diff --git a/entry/src/main/resources/base/media/displayAndBrightness.png b/multicolumnslibrary/src/main/resources/base/media/displayAndBrightness.png
similarity index 100%
rename from entry/src/main/resources/base/media/displayAndBrightness.png
rename to multicolumnslibrary/src/main/resources/base/media/displayAndBrightness.png
diff --git a/entry/src/main/resources/base/media/ic_favourites.svg b/multicolumnslibrary/src/main/resources/base/media/ic_favourites.svg
similarity index 100%
rename from entry/src/main/resources/base/media/ic_favourites.svg
rename to multicolumnslibrary/src/main/resources/base/media/ic_favourites.svg
diff --git a/entry/src/main/resources/base/media/ic_mine_normal.png b/multicolumnslibrary/src/main/resources/base/media/ic_mine_normal.png
similarity index 100%
rename from entry/src/main/resources/base/media/ic_mine_normal.png
rename to multicolumnslibrary/src/main/resources/base/media/ic_mine_normal.png
diff --git a/entry/src/main/resources/base/media/ic_public_list_add_light.svg b/multicolumnslibrary/src/main/resources/base/media/ic_public_list_add_light.svg
similarity index 100%
rename from entry/src/main/resources/base/media/ic_public_list_add_light.svg
rename to multicolumnslibrary/src/main/resources/base/media/ic_public_list_add_light.svg
diff --git a/entry/src/main/resources/base/media/ic_settings_arrow.svg b/multicolumnslibrary/src/main/resources/base/media/ic_settings_arrow.svg
similarity index 100%
rename from entry/src/main/resources/base/media/ic_settings_arrow.svg
rename to multicolumnslibrary/src/main/resources/base/media/ic_settings_arrow.svg
diff --git a/entry/src/main/resources/base/media/ic_settings_more_connections.png b/multicolumnslibrary/src/main/resources/base/media/ic_settings_more_connections.png
similarity index 100%
rename from entry/src/main/resources/base/media/ic_settings_more_connections.png
rename to multicolumnslibrary/src/main/resources/base/media/ic_settings_more_connections.png
diff --git a/entry/src/main/resources/base/media/icon.png b/multicolumnslibrary/src/main/resources/base/media/icon.png
similarity index 100%
rename from entry/src/main/resources/base/media/icon.png
rename to multicolumnslibrary/src/main/resources/base/media/icon.png
diff --git a/entry/src/main/resources/base/media/inbox.svg b/multicolumnslibrary/src/main/resources/base/media/inbox.svg
similarity index 100%
rename from entry/src/main/resources/base/media/inbox.svg
rename to multicolumnslibrary/src/main/resources/base/media/inbox.svg
diff --git a/entry/src/main/resources/base/media/mobileData.png b/multicolumnslibrary/src/main/resources/base/media/mobileData.png
similarity index 100%
rename from entry/src/main/resources/base/media/mobileData.png
rename to multicolumnslibrary/src/main/resources/base/media/mobileData.png
diff --git a/entry/src/main/resources/base/media/notify.png b/multicolumnslibrary/src/main/resources/base/media/notify.png
similarity index 100%
rename from entry/src/main/resources/base/media/notify.png
rename to multicolumnslibrary/src/main/resources/base/media/notify.png
diff --git a/entry/src/main/resources/base/media/orange.png b/multicolumnslibrary/src/main/resources/base/media/orange.png
similarity index 100%
rename from entry/src/main/resources/base/media/orange.png
rename to multicolumnslibrary/src/main/resources/base/media/orange.png
diff --git a/entry/src/main/resources/base/media/privacy.svg b/multicolumnslibrary/src/main/resources/base/media/privacy.svg
similarity index 100%
rename from entry/src/main/resources/base/media/privacy.svg
rename to multicolumnslibrary/src/main/resources/base/media/privacy.svg
diff --git a/entry/src/main/resources/base/media/security.svg b/multicolumnslibrary/src/main/resources/base/media/security.svg
similarity index 100%
rename from entry/src/main/resources/base/media/security.svg
rename to multicolumnslibrary/src/main/resources/base/media/security.svg
diff --git a/entry/src/main/resources/base/media/storage.svg b/multicolumnslibrary/src/main/resources/base/media/storage.svg
similarity index 100%
rename from entry/src/main/resources/base/media/storage.svg
rename to multicolumnslibrary/src/main/resources/base/media/storage.svg
diff --git a/entry/src/main/resources/base/media/system.svg b/multicolumnslibrary/src/main/resources/base/media/system.svg
similarity index 100%
rename from entry/src/main/resources/base/media/system.svg
rename to multicolumnslibrary/src/main/resources/base/media/system.svg
diff --git a/entry/src/main/resources/base/media/unread.svg b/multicolumnslibrary/src/main/resources/base/media/unread.svg
similarity index 100%
rename from entry/src/main/resources/base/media/unread.svg
rename to multicolumnslibrary/src/main/resources/base/media/unread.svg
diff --git a/entry/src/main/resources/base/media/userAccounts.svg b/multicolumnslibrary/src/main/resources/base/media/userAccounts.svg
similarity index 100%
rename from entry/src/main/resources/base/media/userAccounts.svg
rename to multicolumnslibrary/src/main/resources/base/media/userAccounts.svg
diff --git a/entry/src/main/resources/base/media/volume.png b/multicolumnslibrary/src/main/resources/base/media/volume.png
similarity index 100%
rename from entry/src/main/resources/base/media/volume.png
rename to multicolumnslibrary/src/main/resources/base/media/volume.png
diff --git a/entry/src/main/resources/base/media/wlan.png b/multicolumnslibrary/src/main/resources/base/media/wlan.png
similarity index 100%
rename from entry/src/main/resources/base/media/wlan.png
rename to multicolumnslibrary/src/main/resources/base/media/wlan.png
diff --git a/entry/src/main/resources/base/media/wlan1.svg b/multicolumnslibrary/src/main/resources/base/media/wlan1.svg
similarity index 100%
rename from entry/src/main/resources/base/media/wlan1.svg
rename to multicolumnslibrary/src/main/resources/base/media/wlan1.svg
diff --git a/entry/src/main/resources/base/media/wlan2.svg b/multicolumnslibrary/src/main/resources/base/media/wlan2.svg
similarity index 100%
rename from entry/src/main/resources/base/media/wlan2.svg
rename to multicolumnslibrary/src/main/resources/base/media/wlan2.svg
diff --git a/entry/src/main/resources/base/media/wlan3.svg b/multicolumnslibrary/src/main/resources/base/media/wlan3.svg
similarity index 100%
rename from entry/src/main/resources/base/media/wlan3.svg
rename to multicolumnslibrary/src/main/resources/base/media/wlan3.svg
diff --git a/multicolumnslibrary/src/main/resources/base/profile/route_map.json b/multicolumnslibrary/src/main/resources/base/profile/route_map.json
new file mode 100644
index 0000000000000000000000000000000000000000..d7fe41757e7a2ec9165d3ef2526ef7e21278d443
--- /dev/null
+++ b/multicolumnslibrary/src/main/resources/base/profile/route_map.json
@@ -0,0 +1,28 @@
+{
+  "routerMap": [
+    {
+      "name": "MailBox",
+      "pageSourceFile": "src/main/ets/application/MailBox.ets",
+      "buildFunction": "MailBoxBuilder",
+      "data": {
+        "description": "this is MailBox"
+      }
+    },
+    {
+      "name": "PhotoAlbum",
+      "pageSourceFile": "src/main/ets/application/PhotoAlbum.ets",
+      "buildFunction": "PhotoAlbumBuilder",
+      "data": {
+        "description": "this is PhotoAlbum"
+      }
+    },
+    {
+      "name": "Settings",
+      "pageSourceFile": "src/main/ets/application/Settings.ets",
+      "buildFunction": "SettingsBuilder",
+      "data": {
+        "description": "this is Settings"
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/entry/src/main/resources/en_US/element/string.json b/multicolumnslibrary/src/main/resources/en_US/element/string.json
similarity index 100%
rename from entry/src/main/resources/en_US/element/string.json
rename to multicolumnslibrary/src/main/resources/en_US/element/string.json
diff --git a/entry/src/main/resources/zh_CN/element/string.json b/multicolumnslibrary/src/main/resources/zh_CN/element/string.json
similarity index 100%
rename from entry/src/main/resources/zh_CN/element/string.json
rename to multicolumnslibrary/src/main/resources/zh_CN/element/string.json
diff --git a/entry/build-profile.json5 b/multicolumnssample/build-profile.json5
similarity index 100%
rename from entry/build-profile.json5
rename to multicolumnssample/build-profile.json5
diff --git a/entry/hvigorfile.ts b/multicolumnssample/hvigorfile.ts
similarity index 100%
rename from entry/hvigorfile.ts
rename to multicolumnssample/hvigorfile.ts
diff --git a/entry/obfuscation-rules.txt b/multicolumnssample/obfuscation-rules.txt
similarity index 100%
rename from entry/obfuscation-rules.txt
rename to multicolumnssample/obfuscation-rules.txt
diff --git a/multicolumnssample/oh-package.json5 b/multicolumnssample/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..6a0600f62db748f2cc5d602b901bfd2eed709e61
--- /dev/null
+++ b/multicolumnssample/oh-package.json5
@@ -0,0 +1,12 @@
+{
+  "license": "",
+  "devDependencies": {},
+  "author": "",
+  "name": "multicolumnssample",
+  "description": "Please describe the basic information.",
+  "main": "",
+  "version": "1.0.0",
+  "dependencies": {
+    "multicolumnslibrary": "file:../multicolumnslibrary"
+  }
+}
\ No newline at end of file
diff --git a/entry/src/main/ets/entryability/EntryAbility.ets b/multicolumnssample/src/main/ets/entryability/EntryAbility.ets
similarity index 49%
rename from entry/src/main/ets/entryability/EntryAbility.ets
rename to multicolumnssample/src/main/ets/entryability/EntryAbility.ets
index c698329a02416c333312baeafe6b59f5ba4703aa..0570d52a61a2ede9158ebe4bb8d7383013ce9138 100644
--- a/entry/src/main/ets/entryability/EntryAbility.ets
+++ b/multicolumnssample/src/main/ets/entryability/EntryAbility.ets
@@ -14,32 +14,12 @@
  */
 
 import { ConfigurationConstant, UIAbility } from '@kit.AbilityKit';
-import { display, window } from '@kit.ArkUI';
+import {  window } from '@kit.ArkUI';
 import { hilog } from '@kit.PerformanceAnalysisKit';
 import { BusinessError } from '@kit.BasicServicesKit';
+import { WindowUtil } from 'multicolumnslibrary';
 
 export default class EntryAbility extends UIAbility {
-  private curBp: string = '';
-
-  private updateBreakpoint(windowWidth: number): void {
-    try {
-      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);
-      }
-    } catch (error) {
-      hilog.error(0x0000, 'testTag', `Update breakpoint fail. Cause: ${(error as BusinessError).message}`);
-    }
-  }
 
   onCreate(): void {
     hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
@@ -53,36 +33,14 @@ export default class EntryAbility extends UIAbility {
   onWindowStageCreate(windowStage: window.WindowStage): void {
     // Main window is created, set main page for this ability
     hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
-    windowStage.getMainWindow().then((windowObj: window.Window) => {
-      try {
-        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.updateBreakpoint(windowObj.getWindowProperties().windowRect.width);
-        windowObj.on('windowSizeChange', (windowSize) => {
-          this.updateBreakpoint(windowSize.width);
-        })
-        windowObj.setWindowLayoutFullScreen(true).then(() => {
-          hilog.info(0x0000, 'testTag', 'Succeeded in setting the window layout to full-screen mode.');
-        }).catch((err: BusinessError) => {
-          hilog.error(0x0000, 'testTag', `Failed to set the window layout to full-screen mode. Cause: ${err.message}`);
-        });
-      } catch (error) {
-        hilog.error(0x0000, 'testTag', `Update window size fail. Cause: ${(error as BusinessError).message}`);
-      }
-    }).catch((err: BusinessError) => {
-      hilog.error(0x0000, 'testTag', `Failed to get main window. Cause: ${err.message}`);
-    });
+    WindowUtil.requestFullScreen(windowStage)
+
     windowStage.loadContent('pages/Index', (err: BusinessError) => {
       if (err.code) {
         hilog.error(0x0000, 'testTag', `Failed to load the content. Cause: ${err.message}`);
         return;
       }
+      WindowUtil.registerBreakPoint(windowStage)
     });
   }
 
diff --git a/entry/src/main/ets/common/BreakpointSystem.ets b/multicolumnssample/src/main/ets/pages/Index.ets
similarity index 58%
rename from entry/src/main/ets/common/BreakpointSystem.ets
rename to multicolumnssample/src/main/ets/pages/Index.ets
index 3e70feb9ab5230c7934cfa973e98ba6dc75489da..07aa7f74fbe8e87de6e67783707d40f2d0397304 100644
--- a/entry/src/main/ets/common/BreakpointSystem.ets
+++ b/multicolumnssample/src/main/ets/pages/Index.ets
@@ -13,27 +13,14 @@
  * limitations under the License.
  */
 
-export class BreakpointType<T> {
-  private sm: T
-  private md: T
-  private lg: T
+import { MultiColumnsPage } from 'multicolumnslibrary'
 
-  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;
+@Entry
+@Component
+struct Index {
+  build() {
+    Stack() {
+      MultiColumnsPage()
     }
-    return undefined;
   }
-}
+}
\ No newline at end of file
diff --git a/entry/src/main/module.json5 b/multicolumnssample/src/main/module.json5
similarity index 54%
rename from entry/src/main/module.json5
rename to multicolumnssample/src/main/module.json5
index 680337265e32ac241d96a491834ff01c6424e859..816e32151292dd2049128df542b51fa3bf0769f6 100644
--- a/entry/src/main/module.json5
+++ b/multicolumnssample/src/main/module.json5
@@ -1,20 +1,6 @@
-/*
- * Copyright (c) 2023 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
 {
   "module": {
-    "name": "entry",
+    "name": "multicolumnssample",
     "type": "entry",
     "description": "$string:module_desc",
     "mainElement": "EntryAbility",
@@ -28,14 +14,14 @@
     "pages": "$profile:main_pages",
     "abilities": [
       {
-        "name": "EntryAbility",
+        "name": "MulticolumnssampleAbility",
         "srcEntry": "./ets/entryability/EntryAbility.ets",
         "description": "$string:EntryAbility_desc",
         "icon": "$media:icon",
         "label": "$string:EntryAbility_label",
         "startWindowIcon": "$media:icon",
         "startWindowBackground": "$color:start_window_background",
-        "exported": false,
+        "exported": true,
         "skills": [
           {
             "entities": [
diff --git a/multicolumnssample/src/main/resources/base/profile/main_pages.json b/multicolumnssample/src/main/resources/base/profile/main_pages.json
new file mode 100644
index 0000000000000000000000000000000000000000..1898d94f58d6128ab712be2c68acc7c98e9ab9ce
--- /dev/null
+++ b/multicolumnssample/src/main/resources/base/profile/main_pages.json
@@ -0,0 +1,5 @@
+{
+  "src": [
+    "pages/Index"
+  ]
+}