diff --git a/src/angular/hq/src/app/holiday/holiday-list/holiday-list.component.html b/src/angular/hq/src/app/holiday/holiday-list/holiday-list.component.html
index 897db692..4105d1a6 100644
--- a/src/angular/hq/src/app/holiday/holiday-list/holiday-list.component.html
+++ b/src/angular/hq/src/app/holiday/holiday-list/holiday-list.component.html
@@ -4,35 +4,27 @@ <h1 class="font-rajdhani font-semibold text-3xl">Holidays</h1>
   <div class="grid gap-7 grid-flow-col auto-cols-max pt-3">&nbsp;</div>
 </div>
 <div class="px-5 pt-4 pb-2">
-  <hq-client-details-search-filter></hq-client-details-search-filter>
+  <div class="flex w-full flex-1 items-center gap-[20px] mb-[8px] xl:mb-0">
+    <hq-search-input [formControl]="listService.search"></hq-search-input>
+  </div>
 </div>
-<table class="min-w-full border-spacing-0 border-separate">
+<hq-table class="min-w-full border-spacing-0 border-separate">
   <thead>
     <tr class="sticky top-0 text-left">
       <th
         scope="col"
         class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5 cursor-pointer"
-        (click)="onSortClick(sortColumn.Name)"
+        [hq-sort-header]="sortColumn.Name"
       >
         Name
-        <hq-sort-icon
-          [column]="sortColumn.Name"
-          [activeColumn]="sortOption$ | async"
-          [activeSortDirection]="sortDirection$ | async"
-        />
       </th>
 
       <th
         scope="col"
         class="bg-blue-900 border-steel-blue-600 border-y py-3 cursor-pointer"
-        (click)="onSortClick(sortColumn.Date)"
+        [hq-sort-header]="sortColumn.Date"
       >
         Date
-        <hq-sort-icon
-          [column]="sortColumn.Date"
-          [activeColumn]="sortOption$ | async"
-          [activeSortDirection]="sortDirection$ | async"
-        />
       </th>
 
       <th scope="col" class="bg-blue-900 border-steel-blue-600 border-y py-3">
@@ -56,13 +48,13 @@ <h1 class="font-rajdhani font-semibold text-3xl">Holidays</h1>
       </th>
     </tr>
   </thead>
-  <tbody>
-    @if ((holiday$ | async)?.length === 0) {
+  <tbody hq-table-body>
+    @if ((listService.records$ | async)?.length === 0) {
       <td colspan="10" class="bg-black-alt">
         <h1 class="text-center py-4 font-bold">No matching records found</h1>
       </td>
     }
-    @for (member of holiday$ | async; track $index) {
+    @for (member of listService.records$ | async; track $index) {
       <tr class="even:bg-gray-850 odd:bg-black-alt">
         <td class="border-b border-black py-2 pl-5">
           {{ member.name }}
@@ -90,31 +82,4 @@ <h1 class="text-center py-4 font-bold">No matching records found</h1>
       </tr>
     }
   </tbody>
-</table>
-<div
-  class="justify-between items-center grid grid-cols-3 py-3 px-5 bg-blue-900 border-y border-steel-blue-600"
->
-  <div>
-    <select
-      class="bg-black-alt border border-gray-300 rounded py-1 px-2 mr-2"
-      [formControl]="itemsPerPage"
-    >
-      <option [ngValue]="20">20</option>
-      <option [ngValue]="25">25</option>
-      <option [ngValue]="50">50</option>
-      <option [ngValue]="100">100</option>
-      <!-- Add more options as needed -->
-    </select>
-    <span>items per page</span>
-  </div>
-  <hq-paginator
-    [total]="(totalRecords$ | async) ?? 0"
-    [pageSize]="itemsPerPage.value"
-    [currentPage]="page.value"
-    (page)="goToPage($event)"
-  ></hq-paginator>
-  <div class="flex justify-end text-xs">
-    {{ skipDisplay$ | async }}-{{ takeToDisplay$ | async }} /
-    {{ totalRecords$ | async }} items
-  </div>
-</div>
+</hq-table>
diff --git a/src/angular/hq/src/app/holiday/holiday-list/holiday-list.component.ts b/src/angular/hq/src/app/holiday/holiday-list/holiday-list.component.ts
index a4ada5a1..e672a10b 100644
--- a/src/angular/hq/src/app/holiday/holiday-list/holiday-list.component.ts
+++ b/src/angular/hq/src/app/holiday/holiday-list/holiday-list.component.ts
@@ -2,28 +2,18 @@ import { SortColumn } from './../../models/holiday/get-holiday-v1';
 import { Component } from '@angular/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, RouterLink } from '@angular/router';
-import {
-  startWith,
-  combineLatest,
-  map,
-  tap,
-  debounceTime,
-  switchMap,
-  shareReplay,
-  BehaviorSubject,
-} from 'rxjs';
-import { Observable } from 'rxjs';
-import { ClientDetailsServiceToReplace } from '../../clients/client-details.service';
+
 import { SortDirection } from '../../models/common/sort-direction';
 import { HQService } from '../../services/hq.service';
 import { CommonModule } from '@angular/common';
-import { ClientDetailsSearchFilterComponent } from '../../clients/client-details/client-details-search-filter/client-details-search-filter.component';
 import { PaginatorComponent } from '../../common/paginator/paginator.component';
 import { SortIconComponent } from '../../common/sort-icon/sort-icon.component';
-import { GetHolidayV1Record } from '../../models/holiday/get-holiday-v1';
 import { HQRole } from '../../enums/hqrole';
 import { InRolePipe } from '../../pipes/in-role.pipe';
 import { Jurisdiciton } from '../../enums/jurisdiciton';
+import { CoreModule } from '../../core/core.module';
+import { HolidayListService } from './holiday-list.service';
+import { BaseListService } from '../../core/services/base-list.service';
 
 @Component({
   selector: 'hq-holiday-list',
@@ -34,20 +24,22 @@ import { Jurisdiciton } from '../../enums/jurisdiciton';
     ReactiveFormsModule,
     PaginatorComponent,
     SortIconComponent,
-    ClientDetailsSearchFilterComponent,
     RouterLink,
     InRolePipe,
+    CoreModule,
+  ],
+  providers: [
+    {
+      provide: BaseListService,
+      useExisting: HolidayListService,
+    },
   ],
   templateUrl: './holiday-list.component.html',
 })
 export class HolidayListComponent {
   apiErrors: string[] = [];
-  holiday$: Observable<GetHolidayV1Record[]>;
-  skipDisplay$: Observable<number>;
-  takeToDisplay$: Observable<number>;
-  totalRecords$: Observable<number>;
-  sortOption$: BehaviorSubject<SortColumn>;
-  sortDirection$: BehaviorSubject<SortDirection>;
+  sortOption = SortColumn;
+  sortDirection$ = SortDirection;
   Jurisdiction = Jurisdiciton;
 
   itemsPerPage = new FormControl(20, { nonNullable: true });
@@ -60,77 +52,25 @@ export class HolidayListComponent {
   constructor(
     private hqService: HQService,
     private route: ActivatedRoute,
-    private clientDetailService: ClientDetailsServiceToReplace,
-  ) {
-    const itemsPerPage$ = this.itemsPerPage.valueChanges.pipe(
-      startWith(this.itemsPerPage.value),
-    );
-    this.sortOption$ = new BehaviorSubject<SortColumn>(SortColumn.Name);
-    this.sortDirection$ = new BehaviorSubject<SortDirection>(SortDirection.Asc);
-    const page$ = this.page.valueChanges.pipe(startWith(this.page.value));
-
-    const skip$ = combineLatest([itemsPerPage$, page$]).pipe(
-      map(([itemsPerPage, page]) => (page - 1) * itemsPerPage),
-      startWith(0),
-    );
-    const search$ = clientDetailService.search.valueChanges.pipe(
-      tap(() => this.goToPage(1)),
-      startWith(clientDetailService.search.value),
-    );
-
-    this.skipDisplay$ = skip$.pipe(map((skip) => skip + 1));
-
-    const request$ = combineLatest({
-      search: search$,
-      skip: skip$,
-      take: itemsPerPage$,
-      sortBy: this.sortOption$,
-      sortDirection: this.sortDirection$,
-    });
-
-    const response$ = request$.pipe(
-      debounceTime(500),
-      switchMap((request) => this.hqService.getHolidayV1(request)),
-      shareReplay({ bufferSize: 1, refCount: false }),
-    );
-
-    this.holiday$ = response$.pipe(
-      map((response) => {
-        return response.records;
-      }),
-    );
-
-    this.totalRecords$ = response$.pipe(map((t) => t.total!));
-
-    this.takeToDisplay$ = combineLatest([
-      skip$,
-      itemsPerPage$,
-      this.totalRecords$,
-    ]).pipe(
-      map(([skip, itemsPerPage, totalRecords]) =>
-        Math.min(skip + itemsPerPage, totalRecords),
-      ),
-    );
-
-    this.clientDetailService.resetFilters();
-    this.clientDetailService.hideProjectStatus();
-  }
+    public listService: HolidayListService,
+  ) {}
 
   goToPage(page: number) {
-    this.page.setValue(page);
+    this.listService.page.setValue(page);
   }
 
   onSortClick(sortColumn: SortColumn) {
-    if (this.sortOption$.value == sortColumn) {
-      this.sortDirection$.next(
-        this.sortDirection$.value == SortDirection.Asc
+    if (this.listService.sortOption$.value == sortColumn) {
+      this.listService.sortDirection$.next(
+        this.listService.sortDirection$.value == SortDirection.Asc
           ? SortDirection.Desc
           : SortDirection.Asc,
       );
     } else {
-      this.sortOption$.next(sortColumn);
-      this.sortDirection$.next(SortDirection.Asc);
+      this.listService.sortOption$.next(sortColumn);
+      this.listService.sortDirection$.next(SortDirection.Asc);
     }
-    this.page.setValue(1);
+
+    this.listService.page.setValue(1);
   }
 }
diff --git a/src/angular/hq/src/app/holiday/holiday-list/holiday-list.service.ts b/src/angular/hq/src/app/holiday/holiday-list/holiday-list.service.ts
new file mode 100644
index 00000000..ab2dc6d0
--- /dev/null
+++ b/src/angular/hq/src/app/holiday/holiday-list/holiday-list.service.ts
@@ -0,0 +1,38 @@
+import { Observable, combineLatest, debounceTime, tap, switchMap } from 'rxjs';
+import { BaseListService } from '../../core/services/base-list.service';
+import { SortDirection } from '../../models/common/sort-direction';
+import {
+  GetHolidayV1Record,
+  GetHolidayV1Response,
+  SortColumn,
+} from '../../models/holiday/get-holiday-v1';
+import { HQService } from '../../services/hq.service';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class HolidayListService extends BaseListService<
+  GetHolidayV1Response,
+  GetHolidayV1Record,
+  SortColumn
+> {
+  protected override getResponse(): Observable<GetHolidayV1Response> {
+    return combineLatest({
+      search: this.search$,
+      skip: this.skip$,
+      take: this.itemsPerPage$,
+      sortBy: this.sortOption$,
+      sortDirection: this.sortDirection$,
+    }).pipe(
+      debounceTime(500),
+      tap(() => this.loadingSubject.next(true)),
+      switchMap((request) => this.hqService.getHolidayV1(request)),
+      tap(() => this.loadingSubject.next(false)),
+    );
+  }
+
+  constructor(private hqService: HQService) {
+    super(SortColumn.Name, SortDirection.Asc);
+  }
+}