diff --git a/npm/ng-packs/packages/setting-management/package.json b/npm/ng-packs/packages/setting-management/package.json
index 43c56f8216..31bae4be53 100644
--- a/npm/ng-packs/packages/setting-management/package.json
+++ b/npm/ng-packs/packages/setting-management/package.json
@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@abp/ng.theme.shared": "~4.2.2",
+    "@abp/ng.components": "~4.2.2",
     "tslib": "^2.0.0"
   },
   "publishConfig": {
diff --git a/npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.html b/npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.html
index 345f818890..90b3fe9c9e 100644
--- a/npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.html
+++ b/npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.html
@@ -1,46 +1,36 @@
-<div class="row entry-row">
-  <div class="col-auto">
-    <h1 class="content-header-title">{{ 'AbpSettingManagement::Settings' | abpLocalization }}</h1>
-  </div>
-  <div id="breadcrumb" class="col-lg-auto pl-lg-0">
-    <abp-breadcrumb></abp-breadcrumb>
-  </div>
-  <div class="col">
-    <div class="text-lg-right pt-2" id="AbpContentToolbar"></div>
-  </div>
-</div>
-
-<div id="SettingManagementWrapper">
-  <div class="card">
-    <div class="card-body">
-      <div class="row">
-        <div class="col-12 col-md-3">
-          <ul class="nav flex-column nav-pills" id="nav-tab" role="tablist">
-            <ng-container *abpFor="let setting of settings; trackBy: trackByFn">
-              <li
-                (click)="selected = setting"
-                class="nav-item pointer"
-                *abpPermission="setting.requiredPolicy"
-              >
-                <a
-                  class="nav-link"
-                  [id]="setting.name + '-tab'"
-                  role="tab"
-                  [class.active]="setting.name === selected.name"
-                  >{{ setting.name | abpLocalization }}</a
+<abp-page [title]="'AbpSettingManagement::Settings' | abpLocalization" [toolbarVisible]="false">
+  <div id="SettingManagementWrapper">
+    <div class="card">
+      <div class="card-body">
+        <div class="row">
+          <div class="col-12 col-md-3">
+            <ul class="nav flex-column nav-pills" id="nav-tab" role="tablist">
+              <ng-container *abpFor="let setting of settings; trackBy: trackByFn">
+                <li
+                  (click)="selected = setting"
+                  class="nav-item pointer"
+                  *abpPermission="setting.requiredPolicy"
                 >
-              </li>
-            </ng-container>
-          </ul>
-        </div>
-        <div class="col-12 col-md-9">
-          <div *ngIf="settings.length" class="tab-content">
-            <div class="tab-pane fade show active" [id]="selected.name + '-tab'" role="tabpanel">
-              <ng-container *ngComponentOutlet="selected.component"></ng-container>
+                  <a
+                    class="nav-link"
+                    [id]="setting.name + '-tab'"
+                    role="tab"
+                    [class.active]="setting.name === selected.name"
+                    >{{ setting.name | abpLocalization }}</a
+                  >
+                </li>
+              </ng-container>
+            </ul>
+          </div>
+          <div class="col-12 col-md-9">
+            <div *ngIf="settings.length" class="tab-content">
+              <div class="tab-pane fade show active" [id]="selected.name + '-tab'" role="tabpanel">
+                <ng-container *ngComponentOutlet="selected.component"></ng-container>
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
-</div>
+</abp-page>
diff --git a/npm/ng-packs/packages/setting-management/src/lib/setting-management.module.ts b/npm/ng-packs/packages/setting-management/src/lib/setting-management.module.ts
index fe2c0fdacc..c0df97dc22 100644
--- a/npm/ng-packs/packages/setting-management/src/lib/setting-management.module.ts
+++ b/npm/ng-packs/packages/setting-management/src/lib/setting-management.module.ts
@@ -2,6 +2,7 @@ import { CoreModule, LazyModuleFactory } from '@abp/ng.core';
 import { ThemeSharedModule } from '@abp/ng.theme.shared';
 import { ModuleWithProviders, NgModule, NgModuleFactory } from '@angular/core';
 import { NgxsModule } from '@ngxs/store';
+import { PageModule } from '@abp/ng.components/page';
 import { SettingManagementComponent } from './components/setting-management.component';
 import { SettingManagementRoutingModule } from './setting-management-routing.module';
 import { SettingManagementState } from './states/setting-management.state';
@@ -13,6 +14,7 @@ import { SettingManagementState } from './states/setting-management.state';
     SettingManagementRoutingModule,
     CoreModule,
     ThemeSharedModule,
+    PageModule,
     NgxsModule.forFeature([SettingManagementState]),
   ],
 })