diff --git a/npm/ng-packs/packages/identity/src/lib/actions/identity.actions.ts b/npm/ng-packs/packages/identity/src/lib/actions/identity.actions.ts
index 577569bf9d..03a99aab83 100644
--- a/npm/ng-packs/packages/identity/src/lib/actions/identity.actions.ts
+++ b/npm/ng-packs/packages/identity/src/lib/actions/identity.actions.ts
@@ -3,6 +3,7 @@ import { ABP } from '@abp/ng.core';
 
 export class IdentityGetRoles {
   static readonly type = '[Identity] Get Roles';
+  constructor(public payload?: ABP.PageQueryParams) {}
 }
 
 export class IdentityGetRoleById {
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 e0717ae3f5..da17738c1d 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
@@ -17,11 +17,20 @@
         ><input
           type="search"
           class="form-control form-control-sm"
-          placeholder="Search"
-          (input)="dt.filterGlobal($event.target.value, 'contains')"
+          [placeholder]="'AbpUi::PagerSearch' | abpLocalization"
+          (input)="search$.next($event.target.value)"
       /></label>
     </div>
-    <p-table #dt [value]="roles$ | async" [globalFilterFields]="['name']" [paginator]="true" [rows]="10">
+    <p-table
+      [value]="data$ | async"
+      [lazy]="true"
+      [lazyLoadOnInit]="false"
+      [paginator]="true"
+      [rows]="10"
+      [totalRecords]="totalCount$ | async"
+      [loading]="loading"
+      (onLazyLoad)="onPageChange($event)"
+    >
       <ng-template pTemplate="header">
         <tr>
           <th>{{ 'AbpIdentity::Actions' | abpLocalization }}</th>
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 9d01d40fb3..af52f274bb 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,6 +1,6 @@
-import { Component, TemplateRef, ViewChild } from '@angular/core';
+import { Component, TemplateRef, ViewChild, OnInit } from '@angular/core';
 import { Select, Store } from '@ngxs/store';
-import { Observable } from 'rxjs';
+import { Observable, Subject } from 'rxjs';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { IdentityState } from '../../states/identity.state';
 import { Identity } from '../../models/identity';
@@ -9,17 +9,22 @@ import {
   IdentityAddRole,
   IdentityDeleteRole,
   IdentityGetRoleById,
+  IdentityGetRoles,
 } from '../../actions/identity.actions';
-import { pluck } from 'rxjs/operators';
+import { pluck, debounceTime, finalize } from 'rxjs/operators';
 import { ConfirmationService, Toaster } from '@abp/ng.theme.shared';
+import { ABP } from '@abp/ng.core';
 
 @Component({
   selector: 'abp-roles',
   templateUrl: './roles.component.html',
 })
-export class RolesComponent {
+export class RolesComponent implements OnInit {
   @Select(IdentityState.getRoles)
-  roles$: Observable<Identity.RoleItem[]>;
+  data$: Observable<Identity.RoleItem[]>;
+
+  @Select(IdentityState.getRolesTotalCount)
+  totalCount$: Observable<number>;
 
   form: FormGroup;
 
@@ -31,11 +36,26 @@ export class RolesComponent {
 
   providerKey: string;
 
+  pageQuery: ABP.PageQueryParams = {
+    sorting: 'name',
+  };
+
+  loading: boolean = false;
+
+  search$ = new Subject<string>();
+
   @ViewChild('modalContent', { static: false })
   modalContent: TemplateRef<any>;
 
   constructor(private confirmationService: ConfirmationService, private fb: FormBuilder, private store: Store) {}
 
+  ngOnInit() {
+    this.search$.pipe(debounceTime(300)).subscribe(value => {
+      this.pageQuery.filter = value;
+      this.get();
+    });
+  }
+
   createForm() {
     this.form = this.fb.group({
       name: [this.selected.name || '', [Validators.required, Validators.maxLength(256)]],
@@ -89,4 +109,19 @@ export class RolesComponent {
         }
       });
   }
+
+  onPageChange(data) {
+    this.pageQuery.skipCount = data.first;
+    this.pageQuery.maxResultCount = data.rows;
+
+    this.get();
+  }
+
+  get() {
+    this.loading = true;
+    this.store
+      .dispatch(new IdentityGetRoles(this.pageQuery))
+      .pipe(finalize(() => (this.loading = false)))
+      .subscribe();
+  }
 }
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 436e5c3dd0..e7f4646039 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
@@ -23,7 +23,7 @@
         ><input
           type="search"
           class="form-control form-control-sm"
-          placeholder="Search"
+          [placeholder]="'AbpUi::PagerSearch' | abpLocalization"
           (input)="search$.next($event.target.value)"
       /></label>
     </div>
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 1bfa9a5b93..830631728e 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
@@ -4,7 +4,7 @@ import { Component, OnInit, TemplateRef, TrackByFunction, ViewChild } from '@ang
 import { AbstractControl, FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Select, Store } from '@ngxs/store';
 import { combineLatest, Observable, Subject } from 'rxjs';
-import { debounceTime, filter, map, pluck, take } from 'rxjs/operators';
+import { debounceTime, filter, map, pluck, take, finalize } from 'rxjs/operators';
 import snq from 'snq';
 import {
   IdentityAddUser,
@@ -163,6 +163,9 @@ export class UsersComponent implements OnInit {
 
   get() {
     this.loading = true;
-    this.store.dispatch(new IdentityGetUsers(this.pageQuery)).subscribe(() => (this.loading = false));
+    this.store
+      .dispatch(new IdentityGetUsers(this.pageQuery))
+      .pipe(finalize(() => (this.loading = false)))
+      .subscribe();
   }
 }
diff --git a/npm/ng-packs/packages/identity/src/lib/services/identity.service.ts b/npm/ng-packs/packages/identity/src/lib/services/identity.service.ts
index 58801cd5f5..93436f3878 100644
--- a/npm/ng-packs/packages/identity/src/lib/services/identity.service.ts
+++ b/npm/ng-packs/packages/identity/src/lib/services/identity.service.ts
@@ -9,10 +9,11 @@ import { Identity } from '../models/identity';
 export class IdentityService {
   constructor(private rest: RestService) {}
 
-  getRoles(): Observable<Identity.RoleResponse> {
+  getRoles(params = {} as ABP.PageQueryParams): Observable<Identity.RoleResponse> {
     const request: Rest.Request<null> = {
       method: 'GET',
       url: '/api/identity/roles',
+      params,
     };
 
     return this.rest.request<null, Identity.RoleResponse>(request);
diff --git a/npm/ng-packs/packages/identity/src/lib/states/identity.state.ts b/npm/ng-packs/packages/identity/src/lib/states/identity.state.ts
index ad2d31c3ff..33b7d5cafe 100644
--- a/npm/ng-packs/packages/identity/src/lib/states/identity.state.ts
+++ b/npm/ng-packs/packages/identity/src/lib/states/identity.state.ts
@@ -44,8 +44,8 @@ export class IdentityState {
   constructor(private identityService: IdentityService) {}
 
   @Action(IdentityGetRoles)
-  getRoles({ patchState }: StateContext<Identity.State>) {
-    return this.identityService.getRoles().pipe(
+  getRoles({ patchState }: StateContext<Identity.State>, { payload }: IdentityGetRoles) {
+    return this.identityService.getRoles(payload).pipe(
       tap(roles =>
         patchState({
           roles,
diff --git a/npm/ng-packs/packages/tenant-management/src/lib/actions/tenant-management.actions.ts b/npm/ng-packs/packages/tenant-management/src/lib/actions/tenant-management.actions.ts
index c9c2af5c11..74034507e8 100644
--- a/npm/ng-packs/packages/tenant-management/src/lib/actions/tenant-management.actions.ts
+++ b/npm/ng-packs/packages/tenant-management/src/lib/actions/tenant-management.actions.ts
@@ -1,7 +1,9 @@
 import { TenantManagement } from '../models/tenant-management';
+import { ABP } from '@abp/ng.core';
 
 export class TenantManagementGet {
   static readonly type = '[TenantManagement] Get';
+  constructor(public payload?: ABP.PageQueryParams) {}
 }
 
 export class TenantManagementGetById {
diff --git a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html
index 6bf58659ef..e7632b7e9c 100644
--- a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html
+++ b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html
@@ -26,11 +26,20 @@
         ><input
           type="search"
           class="form-control form-control-sm"
-          placeholder="Search"
-          (input)="dt.filterGlobal($event.target.value, 'contains')"
+          [placeholder]="'AbpUi::PagerSearch' | abpLocalization"
+          (input)="search$.next($event.target.value)"
       /></label>
     </div>
-    <p-table #dt [value]="datas$ | async" [globalFilterFields]="['name']" [paginator]="true" [rows]="10">
+    <p-table
+      [value]="data$ | async"
+      [lazy]="true"
+      [lazyLoadOnInit]="false"
+      [paginator]="true"
+      [rows]="10"
+      [totalRecords]="totalCount$ | async"
+      [loading]="loading"
+      (onLazyLoad)="onPageChange($event)"
+    >
       <ng-template pTemplate="header">
         <tr>
           <th>{{ 'AbpTenantManagement::Actions' | abpLocalization }}</th>
@@ -112,7 +121,7 @@
     <div class="mt-2">
       <div class="form-group">
         <label for="name">{{ 'AbpTenantManagement::TenantName' | abpLocalization }}</label>
-        <input type="text" id="name" class="form-control" formControlName="name" autofocus/>
+        <input type="text" id="name" class="form-control" formControlName="name" autofocus />
       </div>
     </div>
   </form>
@@ -123,7 +132,13 @@
     <div class="mt-2">
       <div class="form-group">
         <div class="form-check">
-          <input id="useSharedDatabase" type="checkbox" class="form-check-input" formControlName="useSharedDatabase" autofocus/>
+          <input
+            id="useSharedDatabase"
+            type="checkbox"
+            class="form-check-input"
+            formControlName="useSharedDatabase"
+            autofocus
+          />
           <label for="useSharedDatabase" class="font-check-label">{{
             'AbpTenantManagement::DisplayName:UseSharedDatabase' | abpLocalization
           }}</label>
diff --git a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts
index a18667570c..b6fad6851c 100644
--- a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts
+++ b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts
@@ -1,13 +1,14 @@
 import { ABP } from '@abp/ng.core';
 import { ConfirmationService, Toaster } from '@abp/ng.theme.shared';
-import { Component, TemplateRef, ViewChild } from '@angular/core';
+import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Select, Store } from '@ngxs/store';
-import { Observable } from 'rxjs';
-import { pluck, switchMap, take } from 'rxjs/operators';
+import { Observable, Subject } from 'rxjs';
+import { debounceTime, finalize, pluck, switchMap, take } from 'rxjs/operators';
 import {
   TenantManagementAdd,
   TenantManagementDelete,
+  TenantManagementGet,
   TenantManagementGetById,
   TenantManagementUpdate,
 } from '../../actions/tenant-management.actions';
@@ -24,9 +25,12 @@ type SelectedModalContent = {
   selector: 'abp-tenants',
   templateUrl: './tenants.component.html',
 })
-export class TenantsComponent {
+export class TenantsComponent implements OnInit {
   @Select(TenantManagementState.get)
-  datas$: Observable<ABP.BasicItem[]>;
+  data$: Observable<ABP.BasicItem[]>;
+
+  @Select(TenantManagementState.getTenantsTotalCount)
+  totalCount$: Observable<number>;
 
   selected: ABP.BasicItem;
 
@@ -42,6 +46,14 @@ export class TenantsComponent {
 
   _useSharedDatabase: boolean;
 
+  pageQuery: ABP.PageQueryParams = {
+    sorting: 'name',
+  };
+
+  loading: boolean = false;
+
+  search$ = new Subject<string>();
+
   get useSharedDatabase(): boolean {
     return this.defaultConnectionStringForm.get('useSharedDatabase').value;
   }
@@ -66,6 +78,13 @@ export class TenantsComponent {
     private store: Store,
   ) {}
 
+  ngOnInit() {
+    this.search$.pipe(debounceTime(300)).subscribe(value => {
+      this.pageQuery.filter = value;
+      this.get();
+    });
+  }
+
   private createTenantForm() {
     this.tenantForm = this.fb.group({
       name: [this.selected.name || '', [Validators.required, Validators.maxLength(256)]],
@@ -178,4 +197,19 @@ export class TenantsComponent {
         }
       });
   }
+
+  onPageChange(data) {
+    this.pageQuery.skipCount = data.first;
+    this.pageQuery.maxResultCount = data.rows;
+
+    this.get();
+  }
+
+  get() {
+    this.loading = true;
+    this.store
+      .dispatch(new TenantManagementGet(this.pageQuery))
+      .pipe(finalize(() => (this.loading = false)))
+      .subscribe();
+  }
 }
diff --git a/npm/ng-packs/packages/tenant-management/src/lib/services/tenant-management.service.ts b/npm/ng-packs/packages/tenant-management/src/lib/services/tenant-management.service.ts
index 99ec24e8e3..8639fba755 100644
--- a/npm/ng-packs/packages/tenant-management/src/lib/services/tenant-management.service.ts
+++ b/npm/ng-packs/packages/tenant-management/src/lib/services/tenant-management.service.ts
@@ -9,10 +9,11 @@ import { TenantManagement } from '../models/tenant-management';
 export class TenantManagementService {
   constructor(private rest: RestService) {}
 
-  get(): Observable<TenantManagement.Response> {
+  get(params = {} as ABP.PageQueryParams): Observable<TenantManagement.Response> {
     const request: Rest.Request<null> = {
       method: 'GET',
       url: '/api/multi-tenancy/tenants',
+      params,
     };
 
     return this.rest.request<null, TenantManagement.Response>(request);
diff --git a/npm/ng-packs/packages/tenant-management/src/lib/states/tenant-management.state.ts b/npm/ng-packs/packages/tenant-management/src/lib/states/tenant-management.state.ts
index d4bce9955e..cd108dd225 100644
--- a/npm/ng-packs/packages/tenant-management/src/lib/states/tenant-management.state.ts
+++ b/npm/ng-packs/packages/tenant-management/src/lib/states/tenant-management.state.ts
@@ -21,11 +21,16 @@ export class TenantManagementState {
     return result.items || [];
   }
 
+  @Selector()
+  static getTenantsTotalCount({ result }: TenantManagement.State): number {
+    return result.totalCount;
+  }
+
   constructor(private tenantManagementService: TenantManagementService) {}
 
   @Action(TenantManagementGet)
-  get({ patchState }: StateContext<TenantManagement.State>) {
-    return this.tenantManagementService.get().pipe(
+  get({ patchState }: StateContext<TenantManagement.State>, { payload }: TenantManagementGet) {
+    return this.tenantManagementService.get(payload).pipe(
       tap(result =>
         patchState({
           result,