diff --git a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html
index 09dcdb1be3..af51baa372 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html
+++ b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html
@@ -1,48 +1,38 @@
-<div id="identity-roles-wrapper" class="card">
-  <div class="card-header">
-    <div class="row">
-      <div class="col col-md-6">
-        <h5 class="card-title">{{ 'AbpIdentity::Roles' | abpLocalization }}</h5>
-      </div>
-      <div class="text-end col col-md-6">
-        <abp-page-toolbar [record]="data.items"></abp-page-toolbar>
-      </div>
+<abp-page [title]="'AbpIdentity::Roles' | abpLocalization" [toolbar]="data.items">
+  <div id="identity-roles-wrapper" class="card">
+    <div class="card-body">
+      <abp-extensible-table
+        [data]="data.items"
+        [recordsTotal]="data.totalCount"
+        [list]="list"
+      ></abp-extensible-table>
     </div>
   </div>
 
-  <div class="card-body">
-    <abp-extensible-table
-      [data]="data.items"
-      [recordsTotal]="data.totalCount"
-      [list]="list"
-    ></abp-extensible-table>
-  </div>
-</div>
-
-<abp-modal [(visible)]="isModalVisible" [busy]="modalBusy">
-  <ng-template #abpHeader>
-    <h3>{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewRole') | abpLocalization }}</h3>
-  </ng-template>
+  <abp-modal [(visible)]="isModalVisible" [busy]="modalBusy">
+    <ng-template #abpHeader>
+      <h3>{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewRole') | abpLocalization }}</h3>
+    </ng-template>
 
-  <ng-template #abpBody>
-    <form [formGroup]="form" (ngSubmit)="save()" validateOnSubmit>
-      <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
-    </form>
-  </ng-template>
+    <ng-template #abpBody>
+      <form [formGroup]="form" (ngSubmit)="save()" validateOnSubmit>
+        <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
+      </form>
+    </ng-template>
 
-  <ng-template #abpFooter>
-    <button type="button" class="btn btn-secondary" abpClose>
-      {{ 'AbpIdentity::Cancel' | abpLocalization }}
-    </button>
-    <abp-button iconClass="fa fa-check" [disabled]="form?.invalid" (click)="save()">{{
-      'AbpIdentity::Save' | abpLocalization
-    }}</abp-button>
-  </ng-template>
-</abp-modal>
+    <ng-template #abpFooter>
+      <button type="button" class="btn btn-secondary" abpClose>
+        {{ 'AbpIdentity::Cancel' | abpLocalization }}
+      </button>
+      <abp-button iconClass="fa fa-check" [disabled]="form?.invalid" (click)="save()">{{
+        'AbpIdentity::Save' | abpLocalization
+        }}</abp-button>
+    </ng-template>
+  </abp-modal>
 
-<abp-permission-management
-  #abpPermissionManagement="abpPermissionManagement"
-  *abpReplaceableTemplate="
+  <abp-permission-management
+    #abpPermissionManagement="abpPermissionManagement"
+    *abpReplaceableTemplate="
     {
       inputs: {
         providerName: { value: 'R' },
@@ -55,6 +45,7 @@
     };
     let init = initTemplate
   "
-  (abpInit)="init(abpPermissionManagement)"
->
-</abp-permission-management>
+    (abpInit)="init(abpPermissionManagement)"
+  >
+  </abp-permission-management>
+</abp-page>
diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
index 91ce6876ef..0b7db30ace 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
+++ b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
@@ -1,89 +1,83 @@
-<div id="identity-roles-wrapper" class="card">
-  <div class="card-header">
-    <div class="row">
-      <div class="col col-md-6">
-        <h5 class="card-title">{{ 'AbpIdentity::Users' | abpLocalization }}</h5>
-      </div>
-      <div class="text-end col col-md-6">
-        <abp-page-toolbar [record]="data.items"></abp-page-toolbar>
-      </div>
-    </div>
-  </div>
-  <div class="card-body">
-    <div id="data-tables-table-filter" class="data-tables-filter mb-3">
-      <div class="input-group">
-        <input
-          type="search"
-          class="form-control"
-          [placeholder]="'AbpUi::PagerSearch' | abpLocalization"
-          [(ngModel)]="list.filter"
-        />
+<abp-page [title]="'AbpIdentity::Users' | abpLocalization" [toolbar]="data.items">
+
+  <div id="identity-roles-wrapper" class="card">
+    <div class="card-body">
+      <div id="data-tables-table-filter" class="data-tables-filter mb-3">
+        <div class="input-group">
+          <input
+            type="search"
+            class="form-control"
+            [placeholder]="'AbpUi::PagerSearch' | abpLocalization"
+            [(ngModel)]="list.filter"
+          />
+        </div>
       </div>
-    </div>
 
-    <abp-extensible-table
-      [data]="data.items"
-      [recordsTotal]="data.totalCount"
-      [list]="list"
-    ></abp-extensible-table>
+      <abp-extensible-table
+        [data]="data.items"
+        [recordsTotal]="data.totalCount"
+        [list]="list"
+      ></abp-extensible-table>
+    </div>
   </div>
-</div>
 
-<abp-modal [(visible)]="isModalVisible" [busy]="modalBusy">
-  <ng-template #abpHeader>
-    <h3>{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewUser') | abpLocalization }}</h3>
-  </ng-template>
+  <abp-modal [(visible)]="isModalVisible" [busy]="modalBusy">
+    <ng-template #abpHeader>
+      <h3>{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewUser') | abpLocalization }}</h3>
+    </ng-template>
 
-  <ng-template #abpBody>
-    <ng-template #loaderRef
-      ><div class="text-center"><i class="fa fa-pulse fa-spinner"></i></div
-    ></ng-template>
+    <ng-template #abpBody>
+      <ng-template #loaderRef
+      >
+        <div class="text-center"><i class="fa fa-pulse fa-spinner"></i></div
+        >
+      </ng-template>
 
-    <form *ngIf="form; else loaderRef" [formGroup]="form" (ngSubmit)="save()">
-      <ul ngbNav #nav="ngbNav" class="nav-tabs">
-        <li ngbNavItem>
-          <a ngbNavLink>{{ 'AbpIdentity::UserInformations' | abpLocalization }}</a>
-          <ng-template ngbNavContent>
-            <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
-          </ng-template>
-        </li>
+      <form *ngIf="form; else loaderRef" [formGroup]="form" (ngSubmit)="save()">
+        <ul ngbNav #nav="ngbNav" class="nav-tabs">
+          <li ngbNavItem>
+            <a ngbNavLink>{{ 'AbpIdentity::UserInformations' | abpLocalization }}</a>
+            <ng-template ngbNavContent>
+              <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
+            </ng-template>
+          </li>
 
-        <li ngbNavItem>
-          <a ngbNavLink>{{ 'AbpIdentity::Roles' | abpLocalization }}</a>
-          <ng-template ngbNavContent>
-            <div
-              *ngFor="let roleGroup of roleGroups; let i = index; trackBy: trackByFn"
-              class="form-check mb-2"
-            >
-              <input
-                type="checkbox"
-                class="form-check-input"
-                [attr.id]="'roles-' + i"
-                [formControl]="roleGroup.controls[roles[i].name]"
-              />
-              <label class="form-check-label" [attr.for]="'roles-' + i">{{ roles[i].name }}</label>
-            </div>
-          </ng-template>
-        </li>
-      </ul>
+          <li ngbNavItem>
+            <a ngbNavLink>{{ 'AbpIdentity::Roles' | abpLocalization }}</a>
+            <ng-template ngbNavContent>
+              <div
+                *ngFor="let roleGroup of roleGroups; let i = index; trackBy: trackByFn"
+                class="form-check mb-2"
+              >
+                <input
+                  type="checkbox"
+                  class="form-check-input"
+                  [attr.id]="'roles-' + i"
+                  [formControl]="roleGroup.controls[roles[i].name]"
+                />
+                <label class="form-check-label" [attr.for]="'roles-' + i">{{ roles[i].name }}</label>
+              </div>
+            </ng-template>
+          </li>
+        </ul>
 
-      <div class="mt-2 fade-in-top" [ngbNavOutlet]="nav"></div>
-    </form>
-  </ng-template>
+        <div class="mt-2 fade-in-top" [ngbNavOutlet]="nav"></div>
+      </form>
+    </ng-template>
 
-  <ng-template #abpFooter>
-    <button type="button" class="btn btn-secondary" abpClose>
-      {{ 'AbpIdentity::Cancel' | abpLocalization }}
-    </button>
-    <abp-button iconClass="fa fa-check" [disabled]="form?.invalid" (click)="save()">{{
-      'AbpIdentity::Save' | abpLocalization
-    }}</abp-button>
-  </ng-template>
-</abp-modal>
+    <ng-template #abpFooter>
+      <button type="button" class="btn btn-secondary" abpClose>
+        {{ 'AbpIdentity::Cancel' | abpLocalization }}
+      </button>
+      <abp-button iconClass="fa fa-check" [disabled]="form?.invalid" (click)="save()">{{
+        'AbpIdentity::Save' | abpLocalization
+        }}</abp-button>
+    </ng-template>
+  </abp-modal>
 
-<abp-permission-management
-  #abpPermissionManagement="abpPermissionManagement"
-  *abpReplaceableTemplate="
+  <abp-permission-management
+    #abpPermissionManagement="abpPermissionManagement"
+    *abpReplaceableTemplate="
     {
       inputs: {
         providerName: { value: 'U' },
@@ -95,7 +89,8 @@
     };
     let init = initTemplate
   "
-  [entityDisplayName]="entityDisplayName"
-  (abpInit)="init(abpPermissionManagement)"
->
-</abp-permission-management>
+    [entityDisplayName]="entityDisplayName"
+    (abpInit)="init(abpPermissionManagement)"
+  >
+  </abp-permission-management>
+</abp-page>
diff --git a/npm/ng-packs/packages/identity/src/lib/identity.module.ts b/npm/ng-packs/packages/identity/src/lib/identity.module.ts
index e217a710a0..e6c11d195e 100644
--- a/npm/ng-packs/packages/identity/src/lib/identity.module.ts
+++ b/npm/ng-packs/packages/identity/src/lib/identity.module.ts
@@ -17,6 +17,7 @@ import {
   IDENTITY_ENTITY_PROP_CONTRIBUTORS,
   IDENTITY_TOOLBAR_ACTION_CONTRIBUTORS,
 } from './tokens/extensions.token';
+import { PageModule } from '@abp/ng.components/page';
 
 @NgModule({
   declarations: [RolesComponent, UsersComponent],
@@ -30,6 +31,7 @@ import {
     NgbDropdownModule,
     PermissionManagementModule,
     NgxValidateCoreModule,
+    PageModule,
   ],
 })
 export class IdentityModule {
diff --git a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html
index 2aeb5f5b4a..bb0a27a6b2 100644
--- a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html
+++ b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html
@@ -1,63 +1,55 @@
-<div id="wrapper" class="card">
-  <div class="card-header">
-    <div class="row">
-      <div class="col col-md-6">
-        <h5 class="card-title">{{ 'AbpTenantManagement::Tenants' | abpLocalization }}</h5>
-      </div>
-      <div class="text-end col col-md-6">
-        <abp-page-toolbar [record]="data.items"></abp-page-toolbar>
-      </div>
-    </div>
-  </div>
+<abp-page [title]="'AbpTenantManagement::Tenants' | abpLocalization" [toolbar]="data.items">
 
-  <div class="card-body">
-    <div id="data-tables-table-filter" class="data-tables-filter mb-3">
-      <div class="input-group">
-        <input
-          type="search"
-          class="form-control"
-          [placeholder]="'AbpUi::PagerSearch' | abpLocalization"
-          [(ngModel)]="list.filter"
-        />
+
+  <div id="wrapper" class="card">
+    <div class="card-body">
+      <div id="data-tables-table-filter" class="data-tables-filter mb-3">
+        <div class="input-group">
+          <input
+            type="search"
+            class="form-control"
+            [placeholder]="'AbpUi::PagerSearch' | abpLocalization"
+            [(ngModel)]="list.filter"
+          />
+        </div>
       </div>
-    </div>
 
-    <abp-extensible-table
-      [data]="data.items || []"
-      [recordsTotal]="data.totalCount || 0"
-      [list]="list"
-    ></abp-extensible-table>
+      <abp-extensible-table
+        [data]="data.items || []"
+        [recordsTotal]="data.totalCount || 0"
+        [list]="list"
+      ></abp-extensible-table>
+    </div>
   </div>
-</div>
 
-<abp-modal [(visible)]="isModalVisible" [busy]="modalBusy">
-  <ng-template #abpHeader>
-    <h3>
-      {{
+  <abp-modal [(visible)]="isModalVisible" [busy]="modalBusy">
+    <ng-template #abpHeader>
+      <h3>
+        {{
         (selected?.id ? 'AbpTenantManagement::Edit' : 'AbpTenantManagement::NewTenant')
           | abpLocalization
-      }}
-    </h3>
-  </ng-template>
+        }}
+      </h3>
+    </ng-template>
 
-  <ng-template #abpBody>
-    <form [formGroup]="tenantForm" (ngSubmit)="save()" [validateOnSubmit]="true">
-      <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
-    </form>
-  </ng-template>
+    <ng-template #abpBody>
+      <form [formGroup]="tenantForm" (ngSubmit)="save()" [validateOnSubmit]="true">
+        <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
+      </form>
+    </ng-template>
 
-  <ng-template #abpFooter>
-    <button abpClose type="button" class="btn btn-secondary">
-      {{ 'AbpTenantManagement::Cancel' | abpLocalization }}
-    </button>
-    <abp-button iconClass="fa fa-check" (click)="save()" [disabled]="tenantForm?.invalid">{{
-      'AbpTenantManagement::Save' | abpLocalization
-    }}</abp-button>
-  </ng-template>
-</abp-modal>
+    <ng-template #abpFooter>
+      <button abpClose type="button" class="btn btn-secondary">
+        {{ 'AbpTenantManagement::Cancel' | abpLocalization }}
+      </button>
+      <abp-button iconClass="fa fa-check" (click)="save()" [disabled]="tenantForm?.invalid">{{
+        'AbpTenantManagement::Save' | abpLocalization
+        }}</abp-button>
+    </ng-template>
+  </abp-modal>
 
-<abp-feature-management
-  *abpReplaceableTemplate="{
+  <abp-feature-management
+    *abpReplaceableTemplate="{
     inputs: {
       providerName: { value: 'T' },
       providerKey: { value: providerKey },
@@ -66,8 +58,9 @@
     outputs: { visibleChange: $any(onVisibleFeaturesChange) },
     componentKey: featureManagementKey
   }"
-  [(visible)]="visibleFeatures"
-  providerName="T"
-  [providerKey]="providerKey"
->
-</abp-feature-management>
+    [(visible)]="visibleFeatures"
+    providerName="T"
+    [providerKey]="providerKey"
+  >
+  </abp-feature-management>
+</abp-page>
diff --git a/npm/ng-packs/packages/tenant-management/src/lib/tenant-management.module.ts b/npm/ng-packs/packages/tenant-management/src/lib/tenant-management.module.ts
index 1aca283a29..535ee38aaa 100644
--- a/npm/ng-packs/packages/tenant-management/src/lib/tenant-management.module.ts
+++ b/npm/ng-packs/packages/tenant-management/src/lib/tenant-management.module.ts
@@ -16,6 +16,7 @@ import {
   TENANT_MANAGEMENT_ENTITY_PROP_CONTRIBUTORS,
   TENANT_MANAGEMENT_TOOLBAR_ACTION_CONTRIBUTORS,
 } from './tokens/extensions.token';
+import { PageModule } from '@abp/ng.components/page';
 
 @NgModule({
   declarations: [TenantsComponent],
@@ -28,6 +29,7 @@ import {
     NgbDropdownModule,
     FeatureManagementModule,
     UiExtensionsModule,
+    PageModule,
   ],
 })
 export class TenantManagementModule {
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/page-toolbar/page-toolbar.component.html b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/page-toolbar/page-toolbar.component.html
index dc481700d4..e60ed6695f 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/page-toolbar/page-toolbar.component.html
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/page-toolbar/page-toolbar.component.html
@@ -1,6 +1,6 @@
 <div class="row justify-content-end mx-0 gap-2" id="AbpContentToolbar">
   <div
-    class="col-auto px-0 pt-0 pt-md-2"
+    class="col-auto px-0 pt-0 "
     [class.pe-0]="last"
     *ngFor="let action of actionList; trackBy: trackByFn; let last = last"
   >