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 db52b77f82..c6d86b5968 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
@@ -24,7 +24,7 @@
     </div>
     <p-table
       *ngIf="[130, 200] as columnWidths"
-      [value]="data$ | async"
+      [value]="data$ | async | abpSort: sortOrder:sortKey"
       [lazy]="true"
       [lazyLoadOnInit]="false"
       [paginator]="true"
@@ -51,11 +51,9 @@
       <ng-template pTemplate="header" let-columns>
         <tr>
           <th>{{ 'AbpIdentity::Actions' | abpLocalization }}</th>
-          <th pResizableColumn (click)="changeSortOrder()">
+          <th pResizableColumn (click)="sortByKey('name')">
             {{ 'AbpIdentity::RoleName' | abpLocalization }}
-            <span class="float-right"
-              ><i [ngClass]="['fa', sortOrder === 'desc' ? 'fa-sort-desc' : 'fa-sort-asc']"></i
-            ></span>
+            <abp-sort-order-icon key="name" [selectedKey]="sortKey" [order]="sortOrder"></abp-sort-order-icon>
           </th>
         </tr>
       </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 7ebda6be18..f179e6b713 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
@@ -11,7 +11,7 @@ import { IdentityState } from '../../states/identity.state';
 
 @Component({
   selector: 'abp-roles',
-  templateUrl: './roles.component.html'
+  templateUrl: './roles.component.html',
 })
 export class RolesComponent {
   @Select(IdentityState.getRoles)
@@ -30,15 +30,15 @@ export class RolesComponent {
 
   providerKey: string;
 
-  pageQuery: ABP.PageQueryParams = {
-    sorting: 'name'
-  };
+  pageQuery: ABP.PageQueryParams = {};
 
   loading = false;
 
   modalBusy = false;
 
-  sortOrder = 'asc';
+  sortOrder: string = '';
+
+  sortKey: string = '';
 
   @ViewChild('modalContent', { static: false })
   modalContent: TemplateRef<any>;
@@ -54,10 +54,10 @@ export class RolesComponent {
     this.form = this.fb.group({
       name: new FormControl({ value: this.selected.name || '', disabled: this.selected.isStatic }, [
         Validators.required,
-        Validators.maxLength(256)
+        Validators.maxLength(256),
       ]),
       isDefault: [this.selected.isDefault || false],
-      isPublic: [this.selected.isPublic || false]
+      isPublic: [this.selected.isPublic || false],
     });
   }
 
@@ -89,7 +89,7 @@ export class RolesComponent {
       .dispatch(
         this.selected.id
           ? new UpdateRole({ ...this.form.value, id: this.selected.id })
-          : new CreateRole(this.form.value)
+          : new CreateRole(this.form.value),
       )
       .subscribe(() => {
         this.modalBusy = false;
@@ -100,7 +100,7 @@ export class RolesComponent {
   delete(id: string, name: string) {
     this.confirmationService
       .warn('AbpIdentity::RoleDeletionConfirmationMessage', 'AbpIdentity::AreYouSure', {
-        messageLocalizationParams: [name]
+        messageLocalizationParams: [name],
       })
       .subscribe((status: Toaster.Status) => {
         if (status === Toaster.Status.confirm) {
@@ -124,7 +124,21 @@ export class RolesComponent {
       .subscribe();
   }
 
-  changeSortOrder() {
-    this.sortOrder = this.sortOrder.toLowerCase() === 'asc' ? 'desc' : 'asc';
+  sortByKey(sortKey: string) {
+    this.sortKey = sortKey;
+    switch (this.sortOrder) {
+      case '':
+        this.sortOrder = 'asc';
+        break;
+      case 'asc':
+        this.sortOrder = 'desc';
+        break;
+      case 'desc':
+        this.sortOrder = '';
+        this.sortKey = '';
+        break;
+      default:
+        break;
+    }
   }
 }
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 c17fd7f7c0..84746413fe 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
@@ -30,7 +30,7 @@
     </div>
     <p-table
       *ngIf="[130, 200, 200, 200] as columnWidths"
-      [value]="data$ | async"
+      [value]="data$ | async | abpSort: sortOrder:sortKey"
       [lazy]="true"
       [lazyLoadOnInit]="false"
       [paginator]="true"
@@ -57,14 +57,18 @@
       <ng-template pTemplate="header">
         <tr>
           <th>{{ 'AbpIdentity::Actions' | abpLocalization }}</th>
-          <th pResizableColumn (click)="changeSortOrder()">
+          <th pResizableColumn (click)="sortByKey('userName')">
             {{ 'AbpIdentity::UserName' | abpLocalization }}
-            <span class="float-right"
-              ><i [ngClass]="['fa', sortOrder === 'desc' ? 'fa-sort-desc' : 'fa-sort-asc']"></i
-            ></span>
+            <abp-sort-order-icon key="userName" [selectedKey]="sortKey" [order]="sortOrder"></abp-sort-order-icon>
+          </th>
+          <th pResizableColumn (click)="sortByKey('email')">
+            {{ 'AbpIdentity::EmailAddress' | abpLocalization }}
+            <abp-sort-order-icon key="email" [selectedKey]="sortKey" [order]="sortOrder"></abp-sort-order-icon>
+          </th>
+          <th pResizableColumn (click)="sortByKey('phoneNumber')">
+            {{ 'AbpIdentity::PhoneNumber' | abpLocalization }}
+            <abp-sort-order-icon key="phoneNumber" [selectedKey]="sortKey" [order]="sortOrder"></abp-sort-order-icon>
           </th>
-          <th pResizableColumn>{{ 'AbpIdentity::EmailAddress' | abpLocalization }}</th>
-          <th pResizableColumn>{{ 'AbpIdentity::PhoneNumber' | abpLocalization }}</th>
         </tr>
       </ng-template>
       <ng-template pTemplate="body" let-data>
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 18f7507f29..16fadcfa63 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
@@ -12,13 +12,13 @@ import {
   GetUserById,
   GetUserRoles,
   GetUsers,
-  UpdateUser
+  UpdateUser,
 } from '../../actions/identity.actions';
 import { Identity } from '../../models/identity';
 import { IdentityState } from '../../states/identity.state';
 @Component({
   selector: 'abp-users',
-  templateUrl: './users.component.html'
+  templateUrl: './users.component.html',
 })
 export class UsersComponent {
   @Select(IdentityState.getUsers)
@@ -42,9 +42,7 @@ export class UsersComponent {
 
   providerKey: string;
 
-  pageQuery: ABP.PageQueryParams = {
-    sorting: 'userName'
-  };
+  pageQuery: ABP.PageQueryParams = {};
 
   isModalVisible: boolean;
 
@@ -52,7 +50,9 @@ export class UsersComponent {
 
   modalBusy = false;
 
-  sortOrder = 'asc';
+  sortOrder: string = '';
+
+  sortKey: string = '';
 
   trackByFn: TrackByFunction<AbstractControl> = (index, item) => Object.keys(item)[0] || index;
 
@@ -80,10 +80,10 @@ export class UsersComponent {
       roleNames: this.fb.array(
         this.roles.map(role =>
           this.fb.group({
-            [role.name]: [!!snq(() => this.selectedUserRoles.find(userRole => userRole.id === role.id))]
-          })
-        )
-      )
+            [role.name]: [!!snq(() => this.selectedUserRoles.find(userRole => userRole.id === role.id))],
+          }),
+        ),
+      ),
     });
     if (!this.selected.userName) {
       this.form.addControl('password', new FormControl('', [Validators.required, Validators.maxLength(32)]));
@@ -107,7 +107,7 @@ export class UsersComponent {
       .pipe(
         switchMap(() => this.store.dispatch(new GetUserRoles(id))),
         pluck('IdentityState'),
-        take(1)
+        take(1),
       )
       .subscribe((state: Identity.State) => {
         this.selected = state.selectedUser;
@@ -123,7 +123,7 @@ export class UsersComponent {
     const { roleNames } = this.form.value;
     const mappedRoleNames = snq(
       () => roleNames.filter(role => !!role[Object.keys(role)[0]]).map(role => Object.keys(role)[0]),
-      []
+      [],
     );
 
     this.store
@@ -132,12 +132,12 @@ export class UsersComponent {
           ? new UpdateUser({
               ...this.form.value,
               id: this.selected.id,
-              roleNames: mappedRoleNames
+              roleNames: mappedRoleNames,
             })
           : new CreateUser({
               ...this.form.value,
-              roleNames: mappedRoleNames
-            })
+              roleNames: mappedRoleNames,
+            }),
       )
       .subscribe(() => {
         this.modalBusy = false;
@@ -148,7 +148,7 @@ export class UsersComponent {
   delete(id: string, userName: string) {
     this.confirmationService
       .warn('AbpIdentity::UserDeletionConfirmationMessage', 'AbpIdentity::AreYouSure', {
-        messageLocalizationParams: [userName]
+        messageLocalizationParams: [userName],
       })
       .subscribe((status: Toaster.Status) => {
         if (status === Toaster.Status.confirm) {
@@ -172,7 +172,21 @@ export class UsersComponent {
       .subscribe();
   }
 
-  changeSortOrder() {
-    this.sortOrder = this.sortOrder.toLowerCase() === 'asc' ? 'desc' : 'asc';
+  sortByKey(sortKey: string) {
+    this.sortKey = sortKey;
+    switch (this.sortOrder) {
+      case '':
+        this.sortOrder = 'asc';
+        break;
+      case 'asc':
+        this.sortOrder = 'desc';
+        break;
+      case 'desc':
+        this.sortOrder = '';
+        this.sortKey = '';
+        break;
+      default:
+        break;
+    }
   }
 }