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 1a49d9cbd6..fd8925df56 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
@@ -5,77 +5,17 @@
         <h5 class="card-title">{{ 'AbpIdentity::Roles' | abpLocalization }}</h5>
       </div>
       <div class="text-right col col-md-6">
-        <button
-          *abpPermission="'AbpIdentity.Roles.Create'"
-          id="create-role"
-          class="btn btn-primary"
-          type="button"
-          (click)="add()"
-        >
-          <i class="fa fa-plus mr-1"></i>
-          <span>{{ 'AbpIdentity::NewRole' | abpLocalization }}</span>
-        </button>
+        <abp-page-toolbar [record]="data$ | async"></abp-page-toolbar>
       </div>
     </div>
   </div>
 
   <div class="card-body">
-    <ngx-datatable [rows]="data$ | async" [count]="totalCount$ | async" [list]="list" default>
-      <ngx-datatable-column
-        [name]="'AbpIdentity::Actions' | abpLocalization"
-        [maxWidth]="150"
-        [sortable]="false"
-      >
-        <ng-template let-row="row" ngx-datatable-cell-template>
-          <div ngbDropdown container="body" class="d-inline-block">
-            <button
-              class="btn btn-primary btn-sm dropdown-toggle"
-              data-toggle="dropdown"
-              aria-haspopup="true"
-              ngbDropdownToggle
-            >
-              <i class="fa fa-cog mr-1"></i>{{ 'AbpIdentity::Actions' | abpLocalization }}
-            </button>
-            <div ngbDropdownMenu>
-              <button
-                *abpPermission="'AbpIdentity.Roles.Update'"
-                ngbDropdownItem
-                (click)="edit(row.id)"
-              >
-                {{ 'AbpIdentity::Edit' | abpLocalization }}
-              </button>
-              <button
-                *abpPermission="'AbpIdentity.Roles.ManagePermissions'"
-                ngbDropdownItem
-                (click)="openPermissionsModal(row.name)"
-              >
-                {{ 'AbpIdentity::Permissions' | abpLocalization }}
-              </button>
-              <ng-container *ngIf="!row.isStatic">
-                <button
-                  *abpPermission="'AbpIdentity.Roles.Delete'"
-                  ngbDropdownItem
-                  (click)="delete(row.id, row.name)"
-                >
-                  {{ 'AbpIdentity::Delete' | abpLocalization }}
-                </button>
-              </ng-container>
-            </div>
-          </div>
-        </ng-template>
-      </ngx-datatable-column>
-      <ngx-datatable-column [name]="'AbpIdentity::RoleName' | abpLocalization" prop="name">
-        <ng-template let-row="row" ngx-datatable-cell-template>
-          {{ row.name }}
-          <span *ngIf="row.isDefault" class="badge badge-pill badge-success ml-1">{{
-            'AbpIdentity::DisplayName:IsDefault' | abpLocalization
-          }}</span>
-          <span *ngIf="row.isPublic" class="badge badge-pill badge-info ml-1">{{
-            'AbpIdentity::DisplayName:IsPublic' | abpLocalization
-          }}</span>
-        </ng-template>
-      </ngx-datatable-column>
-    </ngx-datatable>
+    <abp-extensible-table
+      [data]="data$ | async"
+      [recordsTotal]="totalCount$ | async"
+      [list]="list"
+    ></abp-extensible-table>
   </div>
 </div>
 
@@ -85,36 +25,8 @@
   </ng-template>
 
   <ng-template #abpBody>
-    <form #formRef [formGroup]="form" (ngSubmit)="save()" validateOnSubmit>
-      <div class="form-group">
-        <label for="role-name">{{ 'AbpIdentity::RoleName' | abpLocalization }}</label
-        ><span> * </span>
-        <input autofocus type="text" id="role-name" class="form-control" formControlName="name" />
-      </div>
-
-      <div class="custom-checkbox custom-control mb-2">
-        <input
-          type="checkbox"
-          id="role-is-default"
-          class="custom-control-input"
-          formControlName="isDefault"
-        />
-        <label class="custom-control-label" for="role-is-default">{{
-          'AbpIdentity::DisplayName:IsDefault' | abpLocalization
-        }}</label>
-      </div>
-
-      <div class="custom-checkbox custom-control mb-2">
-        <input
-          type="checkbox"
-          id="role-is-public"
-          class="custom-control-input"
-          formControlName="isPublic"
-        />
-        <label class="custom-control-label" for="role-is-public">{{
-          'AbpIdentity::DisplayName:IsPublic' | abpLocalization
-        }}</label>
-      </div>
+    <form [formGroup]="form" (ngSubmit)="save()" validateOnSubmit>
+      <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
     </form>
   </ng-template>
 
@@ -122,7 +34,7 @@
     <button type="button" class="btn btn-secondary" #abpClose>
       {{ 'AbpIdentity::Cancel' | abpLocalization }}
     </button>
-    <abp-button iconClass="fa fa-check" [disabled]="form?.invalid" (click)="onClickSaveButton()">{{
+    <abp-button iconClass="fa fa-check" [disabled]="form?.invalid" (click)="save()">{{
       'AbpIdentity::Save' | abpLocalization
     }}</abp-button>
   </ng-template>
diff --git a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts
index 8df9762b97..c1410ff148 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts
+++ b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts
@@ -1,8 +1,13 @@
 import { ListService, PagedAndSortedResultRequestDto } from '@abp/ng.core';
 import { ePermissionManagementComponents } from '@abp/ng.permission-management';
 import { Confirmation, ConfirmationService } from '@abp/ng.theme.shared';
-import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import {
+  EXTENSIONS_IDENTIFIER,
+  FormPropData,
+  generateFormFromProps,
+} from '@abp/ng.theme.shared/extensions';
+import { Component, ElementRef, Injector, OnInit, ViewChild } from '@angular/core';
+import { FormGroup } from '@angular/forms';
 import { Select, Store } from '@ngxs/store';
 import { Observable } from 'rxjs';
 import { finalize, pluck } from 'rxjs/operators';
@@ -13,13 +18,20 @@ import {
   GetRoles,
   UpdateRole,
 } from '../../actions/identity.actions';
+import { eIdentityComponents } from '../../enums/components';
 import { IdentityRoleDto } from '../../proxy/identity/models';
 import { IdentityState } from '../../states/identity.state';
 
 @Component({
   selector: 'abp-roles',
   templateUrl: './roles.component.html',
-  providers: [ListService],
+  providers: [
+    ListService,
+    {
+      provide: EXTENSIONS_IDENTIFIER,
+      useValue: eIdentityComponents.Roles,
+    },
+  ],
 })
 export class RolesComponent implements OnInit {
   @Select(IdentityState.getRoles)
@@ -51,9 +63,9 @@ export class RolesComponent implements OnInit {
 
   constructor(
     public readonly list: ListService<PagedAndSortedResultRequestDto>,
-    private confirmationService: ConfirmationService,
-    private fb: FormBuilder,
-    private store: Store,
+    protected confirmationService: ConfirmationService,
+    protected store: Store,
+    protected injector: Injector,
   ) {}
 
   ngOnInit() {
@@ -61,14 +73,8 @@ export class RolesComponent implements OnInit {
   }
 
   buildForm() {
-    this.form = this.fb.group({
-      name: new FormControl({ value: this.selected.name || '', disabled: this.selected.isStatic }, [
-        Validators.required,
-        Validators.maxLength(256),
-      ]),
-      isDefault: [this.selected.isDefault || false],
-      isPublic: [this.selected.isPublic || false],
-    });
+    const data = new FormPropData(this.injector, this.selected);
+    this.form = generateFormFromProps(data);
   }
 
   openModal() {