diff --git a/src/app/features/global-masters/states/pages/state-list/state-list.ts b/src/app/features/global-masters/states/pages/state-list/state-list.ts
index 63931e44..2d7fc24c 100644
--- a/src/app/features/global-masters/states/pages/state-list/state-list.ts
+++ b/src/app/features/global-masters/states/pages/state-list/state-list.ts
@@ -1,14 +1,9 @@
 import { Component, DestroyRef, OnInit, inject, signal, viewChild } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
-<<<<<<< HEAD
-import { ToastrService } from 'ngx-toastr';
-import { finalize, map } from 'rxjs/operators';
-=======
 import { of } from 'rxjs';
 import { catchError, finalize, map } from 'rxjs/operators';
 import { NotificationService } from '../../../../../core/services/common/notification.service';
->>>>>>> dev
 
 import { CountryLookupDto, CountryService } from '../../../countries/public-api';
 import { StateDto } from '../../models/state.model';
@@ -29,12 +24,7 @@ import {
   AutocompleteValueFn
 } from '../../../../../shared/components/form/autocomplete/autocomplete.types';
 import { ConfirmDialog } from '../../../../../shared/components/confirm-dialog/confirm-dialog';
-<<<<<<< HEAD
-import { DataTableToolbarDirective } from '../../../../../shared/directives/data-table-toolbar/data-table-toolbar.directive';
-import { DataTableFilterActionsDirective } from '../../../../../shared/directives/data-table-filter-actions/data-table-filter-actions.directive';
-=======
 import { Button as AppButton } from '../../../../../shared/components/button/button';
->>>>>>> dev
 import { StateFormModalComponent } from '../../components/state-form-modal/state-form-modal';
 
 interface StateTableRow extends DataTableRecord {
@@ -57,12 +47,7 @@ interface StateTableRow extends DataTableRecord {
     ReactiveFormsModule,
     Autocomplete,
     ConfirmDialog,
-<<<<<<< HEAD
-    DataTableToolbarDirective,
-    DataTableFilterActionsDirective,
-=======
     AppButton,
->>>>>>> dev
     StateFormModalComponent
   ],
   providers: [DataTableStore],
@@ -84,8 +69,6 @@ export class StateList implements OnInit {
   readonly showFilters = signal(false);
   readonly deleteConfirmDialog = viewChild(ConfirmDialog);
 
-  readonly showFilters = signal(false);
-
   readonly countryFilterForm = this.formBuilder.nonNullable.group({
     countryId: ['']
   });
@@ -229,8 +212,4 @@ export class StateList implements OnInit {
       }
     });
   }
-
-   onToggleFilters(): void {
-    this.showFilters.update(value => !value);
-  }
 }
diff --git a/src/app/shared/components/data-table/data-table.html b/src/app/shared/components/data-table/data-table.html
index ad601a66..92638c8a 100644
--- a/src/app/shared/components/data-table/data-table.html
+++ b/src/app/shared/components/data-table/data-table.html
@@ -8,12 +8,6 @@
         </h5>
         <div class="flex flex-wrap items-center gap-3">
           @if(showFilterButton()){
-<<<<<<< HEAD
-          <div animate.enter="filter-btn-enter" animate.leave="filter-btn-leave">
-            <app-button action="custom" icon="ti ti-filter" label="Filter" size="sm" iconClass="!text-[1rem]"
-              [variant]="filterActive() ? 'primary-full' : 'light'" className="!rounded-full shadow-sm !whitespace-nowrap"
-              (buttonClicked)="onFilterClick($event)" />
-=======
           <div animate.enter="filter-btn-enter" animate.leave="filter-btn-leave" class="flex items-center">
             <app-button action="custom" icon="ti ti-filter" label="Filter" size="sm" iconClass="!text-[1rem]"
               [variant]="filterActive() ? 'primary-full' : 'outline-primary'"
@@ -26,7 +20,6 @@
               className="!rounded-full shadow-sm !mb-0" (buttonClicked)="onImportClick($event)" />
             <app-button action="custom" icon="ri-download-2-line" label="Export" variant="secondary" size="sm"
               className="!rounded-full shadow-sm !mb-0" (buttonClicked)="onExportClick($event)" />
->>>>>>> dev
           </div>
           }
           @if(showAddButton()){
@@ -38,9 +31,11 @@
           }
           @if (showSearch()) {
           <div class="search-wrapper flex items-center">
-            <i class="ri-search-line search-icon"></i>
-            <input #searchInput class="form-control form-control-sm brdr-clr" type="text"
-              [placeholder]="searchPlaceholder()" aria-label="table search" (input)="onSearch(searchInput.value)">
+            <p-iconfield>
+              <p-inputicon class="ri-search-line search-icon" />
+              <input #searchInput pInputText class="form-control form-control-sm brdr-clr" type="text"
+                [placeholder]="searchPlaceholder()" aria-label="table search" (input)="onSearch(searchInput.value)">
+            </p-iconfield>
           </div>
           }
 
@@ -58,12 +53,8 @@
             </div>
             }
           </div>
-<<<<<<< HEAD
-          <button type="button" class="ti-btn ti-btn-icon ti-btn-sm ti-btn-light !rounded-full !m-0 shrink-0 filter-close-btn"
-=======
           <button type="button"
             class="ti-btn ti-btn-icon ti-btn-sm ti-btn-light !rounded-full !m-0 shrink-0 filter-close-btn"
->>>>>>> dev
             aria-label="Close filter" (click)="onFilterClick($event)">
             <i class="ti ti-x"></i>
           </button>
@@ -73,8 +64,8 @@
 
       <div class="box-body !p-0 modern-table-body">
         <div class="table-responsive overflow-x-auto overflow-y-visible modern-table-wrapper">
-          <table [class]="tableClass()">
-            <thead>
+          <p-table [value]="rows()" [loading]="loading()" [tableStyleClass]="tableClass()" dataKey="id">
+            <ng-template pTemplate="header">
               <tr [class]="trHeadClass()">
                 @for (column of columns(); track column.key) {
                 <th scope="col" [class]="getHeaderClass(column)" [style.width]="column.width || null"
@@ -93,43 +84,10 @@
                 <th scope="col" [class]="composeClass(actionHeaderClass(), 'relative overflow-visible')">Action</th>
                 }
               </tr>
-            </thead>
+            </ng-template>
 
-            <tbody>
-              @if (loading()) {
-              <tr class="border-b border-defaultborder">
-                <td [attr.colspan]="totalVisibleColumns()" class="py-10">
-                  <div class="flex flex-col items-center justify-center gap-3 text-center">
-                    <i class="ti ti-loader-2 animate-spin text-[1.5rem]"></i>
-                    <span class="text-[0.875rem]">Loading data...</span>
-                  </div>
-                </td>
-              </tr>
-              } @else if (rows().length === 0) {
-              <tr class="border-b border-defaultborder bg-white dark:bg-black/10">
-                <td [attr.colspan]="totalVisibleColumns()" class="p-0">
-                  <div class="flex min-h-[140px] flex-col items-center justify-center px-4 py-8 text-center">
-                    <div
-                      class="mb-3 inline-flex h-11 w-11 items-center justify-center rounded-full bg-primary/10 text-primary dark:bg-primary/15">
-                      <i class="ti ti-database-off text-[1.25rem]" aria-hidden="true"></i>
-                    </div>
-
-                    <p class="text-sm font-semibold text-defaulttextcolor dark:text-white/80">
-                      {{ emptyMessage() }}
-                    </p>
-
-                    @if (emptyDescription()) {
-                    <p class="mt-1 max-w-md text-sm text-textmuted">
-                      {{ emptyDescription() }}
-                    </p>
-                    }
-                  </div>
-                </td>
-              </tr>
-              } @else
-              {
-              @for (row of rows(); track row['id'] ?? $index; let rowIndex = $index) {
-              <tr [class]="getRowClass(row, $index)" (click)="onRowClick(row)">
+            <ng-template pTemplate="body" let-row let-rowIndex="rowIndex">
+              <tr [class]="getRowClass(row, rowIndex)" (click)="onRowClick(row)">
                 @for (column of columns(); track column.key) {
                 <td [class]="getCellClass(column)">
                   @if (getCellTemplate(column); as customTemplate) {
@@ -203,10 +161,42 @@
                 </td>
                 }
               </tr>
-              }
-              }
-            </tbody>
-          </table>
+            </ng-template>
+
+            <ng-template pTemplate="loadingbody">
+              <tr class="border-b border-defaultborder">
+                <td [attr.colspan]="totalVisibleColumns()" class="py-10">
+                  <div class="flex flex-col items-center justify-center gap-3 text-center">
+                    <i class="ti ti-loader-2 animate-spin text-[1.5rem]"></i>
+                    <span class="text-[0.875rem]">Loading data...</span>
+                  </div>
+                </td>
+              </tr>
+            </ng-template>
+
+            <ng-template pTemplate="emptymessage">
+              <tr class="border-b border-defaultborder bg-white dark:bg-black/10">
+                <td [attr.colspan]="totalVisibleColumns()" class="p-0">
+                  <div class="flex min-h-[140px] flex-col items-center justify-center px-4 py-8 text-center">
+                    <div
+                      class="mb-3 inline-flex h-11 w-11 items-center justify-center rounded-full bg-primary/10 text-primary dark:bg-primary/15">
+                      <i class="ti ti-database-off text-[1.25rem]" aria-hidden="true"></i>
+                    </div>
+
+                    <p class="text-sm font-semibold text-defaulttextcolor dark:text-white/80">
+                      {{ emptyMessage() }}
+                    </p>
+
+                    @if (emptyDescription()) {
+                    <p class="mt-1 max-w-md text-sm text-textmuted">
+                      {{ emptyDescription() }}
+                    </p>
+                    }
+                  </div>
+                </td>
+              </tr>
+            </ng-template>
+          </p-table>
         </div>
       </div>
       @if (showPaginator()) {
@@ -233,7 +223,7 @@
               </label>
 
               <select id="dataTablePageSize"
-                class="form-select form-select-sm !w-[80px] !py-1 !ps-2.5 !pe-6 text-defaulttextcolor bg-white dark:bg-bodybg border border-defaultborder rounded-md"
+                class="form-select form-select-sm page-size-select !w-[80px] !py-1 !ps-2.5 !pe-6 text-defaulttextcolor bg-white dark:bg-bodybg border rounded-md"
                 [value]="pageSize()"
                 (change)="onPageSizeChange($event)">
                 @for (size of pageSizeOptions(); track size) {
@@ -253,37 +243,11 @@
 
           <!-- Pagination -->
           <nav aria-label="Table page navigation">
-            <ul class="ti-pagination mb-0">
-
-              <!-- Previous -->
-              <li class="page-item" [class.disabled]="pageIndex() <= 1">
-                <button type="button" class="page-link px-3 py-[0.375rem]" [disabled]="pageIndex() <= 1"
-                  (click)="goToPage(pageIndex() - 1)">
-                  Previous
-                </button>
-              </li>
-
-              <!-- Page numbers -->
-              @for (page of visiblePages(); track page) {
-              <li class="page-item" [class.active]="page === pageIndex()">
-                <button type="button" class="page-link px-3 py-[0.375rem]" [class.active]="page === pageIndex()"
-                  [attr.aria-current]="
-                  page === pageIndex() ? 'page' : null
-                " (click)="goToPage(page)">
-                  {{ page }}
-                </button>
-              </li>
-              }
-
-              <!-- Next -->
-              <li class="page-item" [class.disabled]="pageIndex() >= totalPages()">
-                <button type="button" class="page-link px-3 py-[0.375rem]" [disabled]="pageIndex() >= totalPages()"
-                  (click)="goToPage(pageIndex() + 1)">
-                  Next
-                </button>
-              </li>
-
-            </ul>
+            <p-paginator [first]="(pageIndex() - 1) * pageSize()" [rows]="pageSize()" [totalRecords]="totalRecords()"
+              [showFirstLastIcon]="false" [showPageLinks]="true" (onPageChange)="onPaginatorPageChange($event)">
+              <ng-template pTemplate="previouspagelinkicon">Previous</ng-template>
+              <ng-template pTemplate="nextpagelinkicon">Next</ng-template>
+            </p-paginator>
           </nav>
 
         </div>
diff --git a/src/app/shared/components/data-table/data-table.scss b/src/app/shared/components/data-table/data-table.scss
index 0d1bca41..95ee71d2 100644
--- a/src/app/shared/components/data-table/data-table.scss
+++ b/src/app/shared/components/data-table/data-table.scss
@@ -233,17 +233,39 @@
   color: var(--color-defaulttextcolor);
 }
 
+/* p-iconfield wrapper (search input) — PrimeNG renders its own internal DOM,
+   which lives outside this component's emulated style scope, so ::ng-deep
+   is required to reach it. */
+.search-wrapper ::ng-deep .p-iconfield {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+}
+
+.search-wrapper ::ng-deep .p-inputicon.search-icon {
+  position: absolute;
+  left: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--color-textmuted, #8c9097);
+  font-size: 0.8125rem;
+  pointer-events: none;
+}
+
 /* Table body / wrapper */
 .modern-table-body {
   padding: 0 !important;
 }
 
 .modern-table-wrapper {
-  border-radius: 0 0 0.75rem 0.75rem;
+  border-radius: 0 0 0.40rem 0.40rem;
 }
 
-/* Table */
-.data-table-modern .table {
+/* Table — PrimeNG's p-table renders <table>/<thead>/<tbody> inside its own
+   component view (outside this component's emulated style scope), so
+   ::ng-deep is required to reach it. */
+.data-table-modern ::ng-deep .table {
   width: 100%;
   margin-bottom: 0;
   border-collapse: separate;
@@ -251,26 +273,26 @@
   font-size: 0.8125rem;
 }
 
-.data-table-modern .table.table-bordered,
-.data-table-modern .table.table-bordered thead th,
-.data-table-modern .table.table-bordered tbody td {
+.data-table-modern ::ng-deep .table.table-bordered,
+.data-table-modern ::ng-deep .table.table-bordered thead th,
+.data-table-modern ::ng-deep .table.table-bordered tbody td {
   border: none;
 }
 
-.data-table-modern .table thead {
+.data-table-modern ::ng-deep .table thead {
   background: #7C3AED;
   color: var(--color-white);
 }
 
-.data-table-modern .table thead tr:first-child th:first-child {
+.data-table-modern ::ng-deep .table thead tr:first-child th:first-child {
   border-top-left-radius: 0.75rem;
 }
 
-.data-table-modern .table thead tr:first-child th:last-child {
+.data-table-modern ::ng-deep .table thead tr:first-child th:last-child {
   border-top-right-radius: 0.75rem;
 }
 
-.data-table-modern .table thead th {
+.data-table-modern ::ng-deep .table thead th {
   padding: 0.5rem 0.75rem;
   font-weight: 700;
   font-size: 0.75rem;
@@ -283,7 +305,7 @@
   border: none;
 }
 
-.data-table-modern .table tbody td {
+.data-table-modern ::ng-deep .table tbody td {
   padding: 0.5rem 1rem;
   vertical-align: middle;
   color: var(--color-defaulttextcolor);
@@ -291,13 +313,11 @@
   font-size: 0.8125rem;
 }
 
-.data-table-modern .table tbody tr:hover {
-  // background-color: var(--color-light);
-
+.data-table-modern ::ng-deep .table tbody tr:hover {
   background-color: #e1d0ff;
 }
 
-:host-context(.dark) .data-table-modern .table tbody tr:hover {
+:host-context(.dark) .data-table-modern ::ng-deep .table tbody tr:hover {
   background-color: color-mix(in srgb, #fff 6%, transparent);
 }
 
@@ -318,32 +338,63 @@
   background-color: color-mix(in srgb, var(--color-primary) 6%, transparent);
 }
 
-/* Pagination */
-.data-table-modern .ti-pagination {
+/* Page-size select box border */
+.data-table-modern .page-size-select {
+  border-color: #845adf !important;
+}
+
+/* Pagination (PrimeNG p-paginator) — its internal DOM lives inside its own
+   component view (outside this component's emulated style scope), so
+   ::ng-deep is required to reach it. */
+.data-table-modern ::ng-deep .p-paginator {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: none;
+}
+
+.data-table-modern ::ng-deep .p-paginator .p-paginator-pages {
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
-  padding: 0;
-  margin: 0;
 }
 
-.data-table-modern .ti-pagination li.page-item {
-  display: inline-flex;
-  border: 1px solid var(--color-primary);
-  border-radius: 9999px;
-}
-
-.data-table-modern .ti-pagination li.page-item.disabled {
-  opacity: 0.4;
-}
-
-.data-table-modern .ti-pagination li .page-link {
+/* Previous / Next — pill buttons with a visible border, like the rest of the app */
+.data-table-modern ::ng-deep .p-paginator .p-paginator-prev,
+.data-table-modern ::ng-deep .p-paginator .p-paginator-next {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 1.5rem;
-  height: 1.5rem;
-  padding: 0 0.5rem;
+  height: 1.75rem;
+  padding: 0 0.75rem;
+  border-radius: 0.375rem;
+  border: 1px solid var(--color-primary);
+  background-color: transparent;
+  color: var(--color-defaulttextcolor);
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1;
+  transition: all 0.15s ease;
+  cursor: pointer;
+}
+
+.data-table-modern ::ng-deep .p-paginator .p-paginator-prev:hover:not(.p-disabled),
+.data-table-modern ::ng-deep .p-paginator .p-paginator-next:hover:not(.p-disabled) {
+  background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
+  color: var(--color-primary);
+}
+
+/* Page number — plain circle, filled solid when selected */
+.data-table-modern ::ng-deep .p-paginator .p-paginator-page {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
   border-radius: 9999px;
   border: none;
   background-color: transparent;
@@ -352,40 +403,44 @@
   font-weight: 500;
   line-height: 1;
   transition: all 0.15s ease;
+  cursor: pointer;
 }
 
-.data-table-modern .ti-pagination li .page-link:hover:not(:disabled) {
+.data-table-modern ::ng-deep .p-paginator .p-paginator-page:hover:not(.p-disabled):not(.p-paginator-page-selected) {
   background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
   color: var(--color-primary);
 }
 
-  .data-table-modern .ti-pagination li.active .page-link,
-  .data-table-modern .ti-pagination li .page-link.active {
-    background-color: var(--color-primary) !important;
-    color: var(--color-white);
-    box-shadow: 0 2px 6px color-mix(in srgb, var(--color-primary) 30%, transparent);
-  }
+.data-table-modern ::ng-deep .p-paginator .p-paginator-page-selected {
+  background-color: var(--color-primary) !important;
+  color: var(--color-white);
+  box-shadow: 0 2px 6px color-mix(in srgb, var(--color-primary) 30%, transparent);
+}
 
-.data-table-modern .ti-pagination li.disabled .page-link {
+.data-table-modern ::ng-deep .p-paginator .p-disabled {
+  opacity: 0.4;
   cursor: not-allowed;
   background-color: transparent;
 }
 
-:host-context(.dark) .data-table-modern .ti-pagination li .page-link {
+:host-context(.dark) .data-table-modern ::ng-deep .p-paginator .p-paginator-page,
+:host-context(.dark) .data-table-modern ::ng-deep .p-paginator .p-paginator-prev,
+:host-context(.dark) .data-table-modern ::ng-deep .p-paginator .p-paginator-next {
   background-color: transparent;
   color: color-mix(in srgb, var(--color-defaulttextcolor) 80%, #fff);
 }
 
-:host-context(.dark) .data-table-modern .ti-pagination li .page-link:hover:not(:disabled) {
+:host-context(.dark) .data-table-modern ::ng-deep .p-paginator .p-paginator-page:hover:not(.p-disabled):not(.p-paginator-page-selected),
+:host-context(.dark) .data-table-modern ::ng-deep .p-paginator .p-paginator-prev:hover:not(.p-disabled),
+:host-context(.dark) .data-table-modern ::ng-deep .p-paginator .p-paginator-next:hover:not(.p-disabled) {
   background-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
   color: var(--color-primary);
 }
 
-  :host-context(.dark) .data-table-modern .ti-pagination li.active .page-link,
-  :host-context(.dark) .data-table-modern .ti-pagination li .page-link.active {
-    color: var(--color-white);
-    background-color: var(--color-primary) !important;
-  }
+:host-context(.dark) .data-table-modern ::ng-deep .p-paginator .p-paginator-page-selected {
+  color: var(--color-white);
+  background-color: var(--color-primary) !important;
+}
 
 /* Responsive scroll */
 .table-responsive {
@@ -394,8 +449,8 @@
   overflow-y: visible;
 }
 
-.table th,
-.table td {
+::ng-deep .table th,
+::ng-deep .table td {
   vertical-align: middle;
 }
 
diff --git a/src/app/shared/components/data-table/data-table.ts b/src/app/shared/components/data-table/data-table.ts
index 772ad62b..1edad349 100644
--- a/src/app/shared/components/data-table/data-table.ts
+++ b/src/app/shared/components/data-table/data-table.ts
@@ -6,6 +6,11 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DataTableCellDirective } from '../../directives/data-table-cell.directive';
 import { CdkConnectedOverlay, CdkOverlayOrigin, ConnectedPosition } from '@angular/cdk/overlay';
+import { TableModule } from 'primeng/table';
+import { Paginator, PaginatorState } from 'primeng/paginator';
+import { IconField } from 'primeng/iconfield';
+import { InputIcon } from 'primeng/inputicon';
+import { InputText } from 'primeng/inputtext';
 
 import { DataTableAction, DataTableActionEvent, DataTableCellContext, DataTableColumn, DataTablePageEvent, DataTableRecord, DataTableSortEvent } from './data-table.types';
 
@@ -20,6 +25,11 @@ import { DataTableFilterActionsDirective } from '../../directives/data-table-fil
     MatPaginatorModule,
     CdkOverlayOrigin,
     CdkConnectedOverlay,
+    TableModule,
+    Paginator,
+    IconField,
+    InputIcon,
+    InputText,
     Button],
   templateUrl: './data-table.html',
   styleUrl: './data-table.scss',
@@ -39,34 +49,6 @@ export class DataTable<T extends DataTableRecord = DataTableRecord> {
   readonly filterRowOverflowing = signal(false);
   private filterRowResizeObserver?: ResizeObserver;
 
-  private readonly filterRowContentEffect = effect(onCleanup => {
-    const element = this.filterRowContent()?.nativeElement;
-
-    this.filterRowResizeObserver?.disconnect();
-
-    if (!element) {
-      this.filterRowOverflowing.set(false);
-      return;
-    }
-
-    const checkOverflow = () => {
-      this.filterRowOverflowing.set(element.scrollWidth > element.clientWidth + 1);
-    };
-
-    checkOverflow();
-
-    this.filterRowResizeObserver = new ResizeObserver(checkOverflow);
-    this.filterRowResizeObserver.observe(element);
-
-    onCleanup(() => this.filterRowResizeObserver?.disconnect());
-  });
-
-   readonly filterActionsTemplate = contentChild(DataTableFilterActionsDirective);
-
-  readonly filterRowContent = viewChild<ElementRef<HTMLElement>>('filterRowContent');
-  readonly filterRowOverflowing = signal(false);
-  private filterRowResizeObserver?: ResizeObserver;
-
   private readonly filterRowContentEffect = effect(onCleanup => {
     const element = this.filterRowContent()?.nativeElement;
 
@@ -167,8 +149,6 @@ export class DataTable<T extends DataTableRecord = DataTableRecord> {
   searchDebounceTime = input(300);
   emptyMessage = input('No records found');
   emptyDescription = input('There is currently no data to display.');
-  showFilterButton = input<boolean>(false);
-  filterActive = input<boolean>(false);
   showImportExportButtons = input<boolean>(false);
   /*---------------------------*/
 
@@ -342,6 +322,17 @@ export class DataTable<T extends DataTableRecord = DataTableRecord> {
     this.closeActionMenu();
   }
 
+  onPaginatorPageChange(event: PaginatorState): void {
+    const rows = event.rows ?? this.pageSize();
+    const page = event.page ?? Math.floor((event.first ?? 0) / rows);
+
+    this.onPageChange({
+      pageIndex: page,
+      pageSize: rows,
+      length: this.totalRecords()
+    });
+  }
+
   onActionClick(event: MouseEvent, action: DataTableAction<T>, row: T): void {
     event.stopPropagation();
 
diff --git a/src/styles.scss b/src/styles.scss
index ab390361..bcc3b06e 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -72,22 +72,6 @@ body {
   line-height: 1.25;
 }
 
-<<<<<<< HEAD
-/* Center currency modal floating label on empty invalid fields */
-currency-list .custom-floating-field.has-error.is-empty .custom-floating-input:not(:focus) ~ .custom-floating-label {
-  top: 35% !important;
-  transform: translateY(-50%) !important;
-}
-
-/* Remove unwanted bottom margin from primary-full buttons */
-.ti-btn-primary-full {
-  margin-bottom: 0 !important;
-}
-
-.ti-form-select {
-  border: 1px solid #7c3deb !important;
-}
-=======
 /* Remove unwanted bottom margin from buttons */
 .ti-btn {
   margin-bottom: 0 !important;
@@ -258,4 +242,3 @@ currency-list .custom-floating-field.has-error.is-empty .custom-floating-input:n
     }
   }
 }
->>>>>>> dev