diff --git a/npm/ng-packs/angular.json b/npm/ng-packs/angular.json
index 7138cb5a38..14416d1d3a 100644
--- a/npm/ng-packs/angular.json
+++ b/npm/ng-packs/angular.json
@@ -200,50 +200,50 @@
                 "bundleName": "bootstrap-dim"
               },
               {
-                  "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/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/@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/@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/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/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/@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/@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.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/@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,
@@ -756,7 +756,7 @@
         }
       },
       "tags": [],
-      "implicitDependencies": ["core","oauth"]
+      "implicitDependencies": ["core", "oauth"]
     }
   }
 }
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 7873adf6ea..bcc6a378a2 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
@@ -55,12 +55,18 @@
               *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"
+              <abp-checkbox 
+                *abpReplaceableTemplate="{
+                  inputs: {
+                    checkBoxId:'roles-' + i,
+                    formControl:roleGroup.controls[roles[i].name]
+                  },
+                  componentKey: inputKey
+                }"
                 [formControl]="roleGroup.controls[roles[i].name]"
-              />
+                [checkboxId]="'roles-' + i"
+              >
+              </abp-checkbox>
               <label class="form-check-label" [attr.for]="'roles-' + i">{{ roles[i].name }}</label>
             </div>
           </ng-template>
diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts
index 0734f04d1f..460e637958 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts
+++ b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts
@@ -6,7 +6,7 @@ import {
   IdentityUserService,
 } from '@abp/ng.identity/proxy';
 import { ePermissionManagementComponents } from '@abp/ng.permission-management';
-import {Confirmation, ConfirmationService, ToasterService} from '@abp/ng.theme.shared';
+import {Confirmation, ConfirmationService, eFormComponets, ToasterService} from '@abp/ng.theme.shared';
 import {
   EXTENSIONS_IDENTIFIER,
   FormPropData,
@@ -60,7 +60,7 @@ export class UsersComponent implements OnInit {
   permissionManagementKey = ePermissionManagementComponents.PermissionManagement;
 
   entityDisplayName: string;
-
+  inputKey=eFormComponets.FormCheckboxComponent
   trackByFn: TrackByFunction<AbstractControl> = (index, item) => Object.keys(item)[0] || index;
 
   onVisiblePermissionChange = event => {
diff --git a/npm/ng-packs/tsconfig.base.json b/npm/ng-packs/tsconfig.base.json
index ac29fd53ad..71e32f80ed 100644
--- a/npm/ng-packs/tsconfig.base.json
+++ b/npm/ng-packs/tsconfig.base.json
@@ -30,6 +30,7 @@
       "@abp/ng.identity": ["packages/identity/src/public-api.ts"],
       "@abp/ng.identity/config": ["packages/identity/config/src/public-api.ts"],
       "@abp/ng.identity/proxy": ["packages/identity/proxy/src/public-api.ts"],
+      "@abp/ng.oauth": ["packages/oauth/src/public-api.ts"],
       "@abp/ng.permission-management": ["packages/permission-management/src/public-api.ts"],
       "@abp/ng.permission-management/proxy": [
         "packages/permission-management/proxy/src/public-api.ts"
@@ -43,8 +44,7 @@
       "@abp/ng.theme.basic/testing": ["packages/theme-basic/testing/src/public-api.ts"],
       "@abp/ng.theme.shared": ["packages/theme-shared/src/public-api.ts"],
       "@abp/ng.theme.shared/extensions": ["packages/theme-shared/extensions/src/public-api.ts"],
-      "@abp/ng.theme.shared/testing": ["packages/theme-shared/testing/src/public-api.ts"],
-      "@abp/ng.oauth": ["packages/oauth/src/public-api.ts"]
+      "@abp/ng.theme.shared/testing": ["packages/theme-shared/testing/src/public-api.ts"]
     }
   },
   "exclude": ["node_modules", "tmp"]