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 d010fe1983..c1199cb294 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
@@ -4,7 +4,7 @@
       <div class="col col-md-6">
         <h5 class="card-title">{{ 'AbpIdentity::Roles' | abpLocalization }}</h5>
       </div>
-      <div class="text-right col col-md-6">
+      <div class="text-end col col-md-6">
         <abp-page-toolbar [record]="data.items"></abp-page-toolbar>
       </div>
     </div>
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 881726d490..9ca051348b 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
@@ -4,7 +4,7 @@
       <div class="col col-md-6">
         <h5 class="card-title">{{ 'AbpIdentity::Users' | abpLocalization }}</h5>
       </div>
-      <div class="text-right col col-md-6">
+      <div class="text-end col col-md-6">
         <abp-page-toolbar [record]="data.items"></abp-page-toolbar>
       </div>
     </div>
@@ -53,17 +53,15 @@
           <ng-template ngbNavContent>
             <div
               *ngFor="let roleGroup of roleGroups; let i = index; trackBy: trackByFn"
-              class="custom-checkbox custom-control mb-2"
+              class="form-check mb-2"
             >
               <input
                 type="checkbox"
-                class="custom-control-input"
+                class="form-check-input"
                 [attr.id]="'roles-' + i"
                 [formControl]="roleGroup.controls[roles[i].name]"
               />
-              <label class="custom-control-label" [attr.for]="'roles-' + i">{{
-                roles[i].name
-              }}</label>
+              <label class="form-check-label" [attr.for]="'roles-' + i">{{ roles[i].name }}</label>
             </div>
           </ng-template>
         </li>
diff --git a/npm/ng-packs/packages/identity/src/lib/defaults/default-roles-entity-props.ts b/npm/ng-packs/packages/identity/src/lib/defaults/default-roles-entity-props.ts
index bd3a49def2..b81f86aa68 100644
--- a/npm/ng-packs/packages/identity/src/lib/defaults/default-roles-entity-props.ts
+++ b/npm/ng-packs/packages/identity/src/lib/defaults/default-roles-entity-props.ts
@@ -17,12 +17,12 @@ export const DEFAULT_ROLES_ENTITY_PROPS = EntityProp.createMany<IdentityRoleDto>
       return of(
         name +
           (isDefault
-            ? `<span class="badge badge-pill badge-success ml-1">${t(
+            ? `<span class="badge rounded-pill bg-success ms-1">${t(
                 'AbpIdentity::DisplayName:IsDefault',
               )}</span>`
             : '') +
           (isPublic
-            ? `<span class="badge badge-pill badge-info ml-1">${t(
+            ? `<span class="badge rounded-pill bg-info ms-1">${t(
                 'AbpIdentity::DisplayName:IsPublic',
               )}</span>`
             : ''),