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 59fa3f4199..cf238a4249 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
@@ -12,7 +12,8 @@
           type="button"
           (click)="add()"
         >
-          <i class="fa fa-plus mr-1"></i> <span>{{ 'AbpIdentity::NewRole' | abpLocalization }}</span>
+          <i class="fa fa-plus mr-1"></i>
+          <span>{{ 'AbpIdentity::NewRole' | abpLocalization }}</span>
         </button>
       </div>
     </div>
@@ -73,7 +74,11 @@
                 <i class="fa fa-cog mr-1"></i>{{ 'AbpIdentity::Actions' | abpLocalization }}
               </button>
               <div ngbDropdownMenu>
-                <button *abpPermission="'AbpIdentity.Roles.Update'" ngbDropdownItem (click)="edit(data.id)">
+                <button
+                  *abpPermission="'AbpIdentity.Roles.Update'"
+                  ngbDropdownItem
+                  (click)="edit(data.id)"
+                >
                   {{ 'AbpIdentity::Edit' | abpLocalization }}
                 </button>
                 <button
@@ -93,7 +98,15 @@
               </div>
             </div>
           </td>
-          <td>{{ data.name }}</td>
+          <td>
+            {{ data.name
+            }}<span *ngIf="data.isDefault" class="badge badge-pill badge-success ml-1">{{
+              'AbpIdentity::DisplayName:IsDefault' | abpLocalization
+            }}</span>
+            <span *ngIf="data.isPublic" class="badge badge-pill badge-info ml-1">{{
+              'AbpIdentity::DisplayName:IsPublic' | abpLocalization
+            }}</span>
+          </td>
         </tr>
       </ng-template>
     </p-table>
@@ -114,14 +127,24 @@
       </div>
 
       <div class="custom-checkbox custom-control mb-2">
-        <input type="checkbox" id="role-is-default" class="custom-control-input" formControlName="isDefault" />
+        <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" />
+        <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>
@@ -139,5 +162,9 @@
   </ng-template>
 </abp-modal>
 
-<abp-permission-management [(visible)]="visiblePermissions" providerName="R" [providerKey]="providerKey">
+<abp-permission-management
+  [(visible)]="visiblePermissions"
+  providerName="R"
+  [providerKey]="providerKey"
+>
 </abp-permission-management>
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 4e3193ca25..48bbe5964f 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
@@ -5,7 +5,13 @@ import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms'
 import { Select, Store } from '@ngxs/store';
 import { Observable } from 'rxjs';
 import { finalize, pluck } from 'rxjs/operators';
-import { CreateRole, DeleteRole, GetRoleById, GetRoles, UpdateRole } from '../../actions/identity.actions';
+import {
+  CreateRole,
+  DeleteRole,
+  GetRoleById,
+  GetRoles,
+  UpdateRole,
+} from '../../actions/identity.actions';
 import { Identity } from '../../models/identity';
 import { IdentityState } from '../../states/identity.state';
 
@@ -43,7 +49,11 @@ export class RolesComponent implements OnInit {
   @ViewChild('formRef', { static: false, read: ElementRef })
   formRef: ElementRef<HTMLFormElement>;
 
-  constructor(private confirmationService: ConfirmationService, private fb: FormBuilder, private store: Store) {}
+  constructor(
+    private confirmationService: ConfirmationService,
+    private fb: FormBuilder,
+    private store: Store,
+  ) {}
 
   ngOnInit() {
     this.get();
@@ -93,6 +103,7 @@ export class RolesComponent implements OnInit {
       .pipe(finalize(() => (this.modalBusy = false)))
       .subscribe(() => {
         this.isModalVisible = false;
+        this.get();
       });
   }
 
@@ -103,7 +114,7 @@ export class RolesComponent implements OnInit {
       })
       .subscribe((status: Toaster.Status) => {
         if (status === Toaster.Status.confirm) {
-          this.store.dispatch(new DeleteRole(id));
+          this.store.dispatch(new DeleteRole(id)).subscribe(() => this.get());
         }
       });
   }
@@ -124,6 +135,8 @@ export class RolesComponent implements OnInit {
   }
 
   onClickSaveButton() {
-    this.formRef.nativeElement.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
+    this.formRef.nativeElement.dispatchEvent(
+      new Event('submit', { bubbles: true, cancelable: true }),
+    );
   }
 }