diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/paginator/paginator.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/paginator/paginator.component.html
new file mode 100644
index 0000000000..56e1e5545f
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/paginator/paginator.component.html
@@ -0,0 +1,38 @@
+<div
+  class="ui-paginator-bottom ui-paginator ui-widget ui-widget-header ui-unselectable-text ui-helper-clearfix"
+>
+  <a
+    class="ui-paginator-first ui-paginator-element ui-state-default ui-corner-all"
+    [class.ui-state-disabled]="value === 1"
+    tabindex="-1"
+    (click)="changePage(1)"
+    ><span class="ui-paginator-icon pi pi-step-backward"></span></a
+  ><a
+    class="ui-paginator-prev ui-paginator-element ui-state-default ui-corner-all"
+    [class.ui-state-disabled]="value === 1"
+    tabindex="-1"
+    (click)="changePage(value - 1)"
+    ><span class="ui-paginator-icon pi pi-caret-left"></span></a
+  ><span class="ui-paginator-pages"
+    ><a
+      *ngFor="let page of pageArray"
+      (click)="changePage(page)"
+      class="ui-paginator-page ui-paginator-element ui-state-default ui-corner-all"
+      [class.ui-state-active]="page === value"
+      tabindex="0"
+      >{{ page }}</a
+    ></span
+  ><a
+    class="ui-paginator-next ui-paginator-element ui-state-default ui-corner-all"
+    [class.ui-state-disabled]="value === totalPages"
+    tabindex="0"
+    (click)="changePage(value + 1)"
+    ><span class="ui-paginator-icon pi pi-caret-right"></span></a
+  ><a
+    class="ui-paginator-last ui-paginator-element ui-state-default ui-corner-all"
+    [class.ui-state-disabled]="value === totalPages"
+    tabindex="0"
+    (click)="changePage(totalPages)"
+    ><span class="ui-paginator-icon pi pi-step-forward"></span
+  ></a>
+</div>
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/paginator/paginator.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/paginator/paginator.component.ts
new file mode 100644
index 0000000000..453b79193d
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/paginator/paginator.component.ts
@@ -0,0 +1,51 @@
+import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'abp-paginator',
+  templateUrl: 'paginator.component.html',
+})
+export class PaginatorComponent implements OnInit {
+  private _value = 1;
+  @Input()
+  get value(): number {
+    return this._value;
+  }
+  set value(newValue: number) {
+    if (newValue < 1) return;
+    else if (newValue > this.totalPages) return;
+
+    this._value = newValue;
+    this.valueChange.emit(newValue);
+  }
+
+  @Output()
+  readonly valueChange = new EventEmitter<number>();
+
+  @Input()
+  totalPages = 0;
+
+  get pageArray(): number[] {
+    const count = this.totalPages < 5 ? this.totalPages : 5;
+
+    if (this.value === 1 || this.value === 2) {
+      return Array.from(new Array(count)).map((_, index) => index + 1);
+    } else if (this.value === this.totalPages || this.value === this.totalPages - 1) {
+      return Array.from(new Array(count)).map((_, index) => this.totalPages - count + 1 + index);
+    } else {
+      return [this.value - 2, this.value - 1, this.value, this.value + 1, this.value + 2];
+    }
+  }
+
+  ngOnInit() {
+    if (!this.value || this.value < 1 || this.value > this.totalPages) {
+      this.value = 1;
+    }
+  }
+
+  changePage(page: number) {
+    if (page < 1) return;
+    else if (page > this.totalPages) return;
+
+    this.value = page;
+  }
+}