diff --git a/projects/saas-ui/src/app/main/components/billing-plan/billing-plan.component.html b/projects/saas-ui/src/app/main/components/billing-plan/billing-plan.component.html
index 9585709..f9dbdcd 100644
--- a/projects/saas-ui/src/app/main/components/billing-plan/billing-plan.component.html
+++ b/projects/saas-ui/src/app/main/components/billing-plan/billing-plan.component.html
@@ -6,8 +6,8 @@ <h2 class="heading">Billing Details</h2>
       <div class="grid">
         <ag-grid-angular
           class="ag-theme-quartz"
-          [rowData]="rowData"
           [columnDefs]="colDefs"
+          [gridOptions]="gridOptions"
         >
         </ag-grid-angular>
       </div>
diff --git a/projects/saas-ui/src/app/main/components/billing-plan/billing-plan.component.ts b/projects/saas-ui/src/app/main/components/billing-plan/billing-plan.component.ts
index 00d3150..53b75b6 100644
--- a/projects/saas-ui/src/app/main/components/billing-plan/billing-plan.component.ts
+++ b/projects/saas-ui/src/app/main/components/billing-plan/billing-plan.component.ts
@@ -1,23 +1,30 @@
 import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
-import {AnyObject} from '@project-lib/core/api';
+import {AnyObject, BackendFilter, Count} from '@project-lib/core/api';
 import {RouteComponentBaseDirective} from '@project-lib/core/route-component-base';
-import {ColDef} from 'ag-grid-community';
-import {takeUntil} from 'rxjs';
+import {
+  ColDef,
+  GridApi,
+  GridOptions,
+  IDatasource,
+  IGetRowsParams,
+} from 'ag-grid-community';
+import {Observable, combineLatest, map, takeUntil} from 'rxjs';
 import {Location} from '@angular/common';
 
 import {BillingPlanService} from '../../../shared/services/billing-plan-service';
 import {SubscriptionStatus} from '../../../shared/enum/subscription-status.enum';
+import {Plan} from '../../../shared/models';
 
 @Component({
   selector: 'app-billing-plan',
   templateUrl: './billing-plan.component.html',
   styleUrls: ['./billing-plan.component.scss'],
 })
-export class BillingPlanComponent
-  extends RouteComponentBaseDirective
-  implements OnInit
-{
+export class BillingPlanComponent extends RouteComponentBaseDirective {
+  gridApi: GridApi;
+  gridOptions: GridOptions;
+  limit = 5;
   colDefs: ColDef[] = [
     {field: 'companyName', width: 200, minWidth: 20},
     {field: 'userName', width: 200, minWidth: 20},
@@ -37,18 +44,47 @@ export class BillingPlanComponent
     private readonly billingplanService: BillingPlanService,
   ) {
     super(route, location);
+    this.gridOptions = {
+      pagination: true,
+      rowModelType: 'infinite',
+      paginationPageSize: this.limit,
+      paginationPageSizeSelector: [this.limit, 10, 20, 50, 100],
+      cacheBlockSize: this.limit,
+      onGridReady: this.onGridReady.bind(this),
+      rowHeight: 60,
+      defaultColDef: {flex: 1},
+    };
   }
 
-  ngOnInit(): void {
-    this.getBillingPlan();
+  onGridReady(params: AnyObject) {
+    this.gridApi = params.api;
+    const dataSource: IDatasource = {
+      getRows: (params: IGetRowsParams) => {
+        const page = params.endRow / this.limit;
+        const paginatedLeads = this.getPaginatedBillPlans(page, this.limit);
+        const totalLead = this.getTotal();
+        combineLatest([paginatedLeads, totalLead]).subscribe(
+          ([data, count]) => {
+            params.successCallback(data, count.count);
+          },
+
+          err => {
+            params.failCallback();
+          },
+        );
+      },
+    };
+    params.api.setDatasource(dataSource);
   }
 
-  getBillingPlan() {
-    this.billingplanService
-      .getBillingDetails()
-      .pipe(takeUntil(this._destroy$))
-      .subscribe(res => {
-        this.rowData = res.map(item => {
+  getPaginatedBillPlans(page: number, limit: number): Observable<AnyObject[]> {
+    const filter: BackendFilter<Plan> = {
+      offset: limit * (page - 1),
+      limit: limit,
+    };
+    return this.billingplanService.getBillingDetails(filter).pipe(
+      map(res => {
+        const rows = res.map(item => {
           return {
             companyName: item.companyName,
             userName: item.userName,
@@ -58,6 +94,12 @@ export class BillingPlanComponent
             status: SubscriptionStatus[item.status],
           };
         });
-      });
+        return rows;
+      }),
+    );
+  }
+
+  getTotal(): Observable<Count> {
+    return this.billingplanService.getTotalBillingPlan();
   }
 }
diff --git a/projects/saas-ui/src/app/shared/services/billing-plan-service.ts b/projects/saas-ui/src/app/shared/services/billing-plan-service.ts
index e53aa44..3874578 100644
--- a/projects/saas-ui/src/app/shared/services/billing-plan-service.ts
+++ b/projects/saas-ui/src/app/shared/services/billing-plan-service.ts
@@ -66,12 +66,22 @@ export class BillingPlanService {
     };
     return command.execute();
   }
-  getBillingDetails() {
+
+  getBillingDetails(filter?: BackendFilter<AnyObject>) {
     const command: GetBillingDetails<AnyObject> = new GetBillingDetails(
       this.apiService,
       this.anyAdapter,
       this.appConfig,
     );
+    const backendFilter: BackendFilter<AnyObject> = filter
+      ? {
+          where: filter.where,
+          offset: filter.offset,
+          limit: filter.limit,
+          order: filter.order,
+          include: filter.include || [], // Adding include from filter parameter
+        }
+      : {};
     return command.execute();
   }
   getCurrencyDetails() {