diff --git a/npm/ng-packs/angular.json b/npm/ng-packs/angular.json
index 01e482cd85..7138cb5a38 100644
--- a/npm/ng-packs/angular.json
+++ b/npm/ng-packs/angular.json
@@ -195,15 +195,55 @@
             "assets": ["apps/dev-app/src/favicon.ico", "apps/dev-app/src/assets"],
             "styles": [
               {
-                "input": "node_modules/bootstrap/dist/css/bootstrap.rtl.min.css",
+                "input": "node_modules/@volo/ngx-lepton-x.lite/assets/css/bootstrap-dim.css",
                 "inject": false,
-                "bundleName": "bootstrap-rtl.min"
+                "bundleName": "bootstrap-dim"
               },
               {
-                "input": "node_modules/bootstrap/dist/css/bootstrap.min.css",
-                "inject": true,
-                "bundleName": "bootstrap-ltr.min"
+                  "input": "node_modules/@volo/ngx-lepton-x.lite/assets/css/ng-bundle.css",
+                  "inject": false,
+                  "bundleName": "ng-bundle"
+              },
+              {
+                  "input": "node_modules/@volo/ngx-lepton-x.lite/assets/css/side-menu/layout-bundle.css",
+                  "inject": false,
+                  "bundleName": "layout-bundle"
+              },
+              {
+                  "input": "node_modules/@abp/ng.theme.lepton-x/assets/css/abp-bundle.css",
+                  "inject": false,
+                  "bundleName": "abp-bundle"
+              },
+              {
+                  "input": "node_modules/@volo/ngx-lepton-x.lite/assets/css/bootstrap-dim.rtl.css",
+                  "inject": false,
+                  "bundleName": "bootstrap-dim.rtl"
+              },
+              {
+                  "input": "node_modules/@volo/ngx-lepton-x.lite/assets/css/ng-bundle.rtl.css",
+                  "inject": false,
+                  "bundleName": "ng-bundle.rtl"
+              },
+              {
+                  "input": "node_modules/@volo/ngx-lepton-x.lite/assets/css/side-menu/layout-bundle.rtl.css",
+                  "inject": false,
+                  "bundleName": "layout-bundle.rtl"
+              },
+              {
+                  "input": "node_modules/@abp/ng.theme.lepton-x/assets/css/abp-bundle.rtl.css",
+                  "inject": false,
+                  "bundleName": "abp-bundle.rtl"
+              },
+              {
+                  "input":"node_modules/@volo/ngx-lepton-x.lite/assets/css/font-bundle.rtl.css",
+                  "inject":false,
+                  "bundleName":"font-bundle.rtl"
               },
+              {
+                  "input":"node_modules/@volo/ngx-lepton-x.lite/assets/css/font-bundle.css",
+                  "inject":false,
+                  "bundleName":"font-bundle"
+              },            
               {
                 "input": "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
                 "inject": true,
@@ -234,6 +274,7 @@
                 "inject": false,
                 "bundleName": "ng-zorro-antd-tree"
               },
+              "node_modules/bootstrap-icons/font/bootstrap-icons.css",
               "apps/dev-app/src/styles.scss"
             ],
             "scripts": []
diff --git a/npm/ng-packs/apps/dev-app/src/app/app.module.ts b/npm/ng-packs/apps/dev-app/src/app/app.module.ts
index 52ebd38362..86e29cf0d1 100644
--- a/npm/ng-packs/apps/dev-app/src/app/app.module.ts
+++ b/npm/ng-packs/apps/dev-app/src/app/app.module.ts
@@ -4,7 +4,8 @@ import { registerLocale } from '@abp/ng.core/locale';
 import { IdentityConfigModule } from '@abp/ng.identity/config';
 import { SettingManagementConfigModule } from '@abp/ng.setting-management/config';
 import { TenantManagementConfigModule } from '@abp/ng.tenant-management/config';
-import { ThemeBasicModule } from '@abp/ng.theme.basic';
+import { ThemeLeptonXModule } from "@abp/ng.theme.lepton-x";
+import { SideMenuLayoutModule } from "@abp/ng.theme.lepton-x/layouts";
 import { ThemeSharedModule } from '@abp/ng.theme.shared';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
@@ -34,7 +35,8 @@ import { AbpOAuthModule } from '@abp/ng.oauth';
     TenantManagementConfigModule.forRoot(),
     FeatureManagementModule.forRoot(),
     SettingManagementConfigModule.forRoot(),
-    ThemeBasicModule.forRoot(),
+    ThemeLeptonXModule.forRoot(),
+    SideMenuLayoutModule.forRoot()
   ],
   providers: [APP_ROUTE_PROVIDER],
   declarations: [AppComponent],
diff --git a/npm/ng-packs/package.json b/npm/ng-packs/package.json
index 7e302ee20d..600c047ff4 100644
--- a/npm/ng-packs/package.json
+++ b/npm/ng-packs/package.json
@@ -42,6 +42,18 @@
   },
   "private": true,
   "devDependencies": {
+    "@abp/ng.account": "~7.1.0-rc.1",
+    "@abp/ng.account.core": "~7.1.0-rc.1",
+    "@abp/ng.core": "~7.1.0-rc.1",
+    "@abp/ng.feature-management": "~7.1.0-rc.1",
+    "@abp/ng.identity": "~7.1.0-rc.1",
+    "@abp/ng.oauth": "~7.1.0-rc.1",
+    "@abp/ng.permission-management": "~7.1.0-rc.1",
+    "@abp/ng.schematics": "~7.1.0-rc.1",
+    "@abp/ng.setting-management": "~7.1.0-rc.1",
+    "@abp/ng.tenant-management": "~7.1.0-rc.1",
+    "@abp/ng.theme.basic": "~7.1.0-rc.1",
+    "@abp/ng.theme.shared": "~7.1.0-rc.1",
     "@abp/utils": "~7.1.0-rc.1",
     "@angular-devkit/build-angular": "~15.0.1",
     "@angular-devkit/build-ng-packagr": "^0.1002.0",
@@ -61,18 +73,6 @@
     "@angular/platform-browser": "~15.0.1",
     "@angular/platform-browser-dynamic": "~15.0.1",
     "@angular/router": "~15.0.1",
-    "@abp/ng.account": "~7.1.0-rc.1",
-    "@abp/ng.account.core": "~7.1.0-rc.1",
-    "@abp/ng.core": "~7.1.0-rc.1",
-    "@abp/ng.oauth": "~7.1.0-rc.1",
-    "@abp/ng.feature-management": "~7.1.0-rc.1",
-    "@abp/ng.identity": "~7.1.0-rc.1",
-    "@abp/ng.permission-management": "~7.1.0-rc.1",
-    "@abp/ng.schematics": "~7.1.0-rc.1",
-    "@abp/ng.setting-management": "~7.1.0-rc.1",
-    "@abp/ng.tenant-management": "~7.1.0-rc.1",
-    "@abp/ng.theme.basic": "~7.1.0-rc.1",
-    "@abp/ng.theme.shared": "~7.1.0-rc.1",
     "@fortawesome/fontawesome-free": "^5.15.4",
     "@ng-bootstrap/ng-bootstrap": "^14.0.0",
     "@ngneat/spectator": "^10.0.0",
@@ -129,7 +129,10 @@
     "typescript": "4.8.4",
     "zone.js": "0.11.4"
   },
-  "dependencies": {},
+  "dependencies": {
+    "@abp/ng.theme.lepton-x": "^2.1.0-rc.1",
+    "bootstrap-icons": "^1.10.3"
+  },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx}": [
       "npx prettier --write --config .prettierrc "