diff --git a/src/app/portfolio/[slug]/components/dataTable.tsx b/src/app/portfolio/[slug]/components/dataTable.tsx
index 0e63aac5..142cfc22 100644
--- a/src/app/portfolio/[slug]/components/dataTable.tsx
+++ b/src/app/portfolio/[slug]/components/dataTable.tsx
@@ -4,6 +4,7 @@ import {
   ColumnDef,
   ColumnFiltersState,
   SortingState,
+  PaginationState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
@@ -45,14 +46,19 @@ export default function DataTable<TData extends Record<string, any>>({
   columns,
 }: DataTableProps<TData>) {
   const [sorting, setSorting] = useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] =
-    useState<ColumnFiltersState>([]);
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
   const [globalFilter, setGlobalFilter] = useState("");
-  const [currentPageIndex, setCurrentPageIndex] = useState(0);
+
+  // ✅ REQUIRED pagination state (fixes TS error)
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 7,
+  });
 
   const table = useReactTable({
-    data, 
+    data,
     columns,
+
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
@@ -61,6 +67,7 @@ export default function DataTable<TData extends Record<string, any>>({
     onSortingChange: setSorting,
     onColumnFiltersChange: setColumnFilters,
     onGlobalFilterChange: setGlobalFilter,
+    onPaginationChange: setPagination,
 
     globalFilterFn: fuzzyFilter,
 
@@ -68,10 +75,7 @@ export default function DataTable<TData extends Record<string, any>>({
       sorting,
       columnFilters,
       globalFilter,
-      pagination: {
-        pageIndex: currentPageIndex,
-        pageSize: 7,
-      },
+      pagination,
     },
   });
 
@@ -104,20 +108,14 @@ export default function DataTable<TData extends Record<string, any>>({
               >
                 {row.getVisibleCells().map((cell) => (
                   <TableCell key={cell.id}>
-                    {flexRender(
-                      cell.column.columnDef.cell,
-                      cell.getContext()
-                    )}
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
                   </TableCell>
                 ))}
               </TableRow>
             ))
           ) : (
             <TableRow>
-              <TableCell
-                colSpan={columns.length}
-                className="h-24 text-center"
-              >
+              <TableCell colSpan={columns.length} className="h-24 text-center">
                 No results.
               </TableCell>
             </TableRow>
@@ -126,11 +124,7 @@ export default function DataTable<TData extends Record<string, any>>({
       </Table>
 
       <div className="mb-2">
-        <DataTablePagination
-          table={table}
-          currentPageIndex={currentPageIndex}
-          setCurrentPageIndex={setCurrentPageIndex}
-        />
+        <DataTablePagination table={table} />
       </div>
     </div>
   );
diff --git a/src/app/portfolio/[slug]/components/propertyTablePagination.tsx b/src/app/portfolio/[slug]/components/propertyTablePagination.tsx
index 006a0898..19ed8cef 100644
--- a/src/app/portfolio/[slug]/components/propertyTablePagination.tsx
+++ b/src/app/portfolio/[slug]/components/propertyTablePagination.tsx
@@ -5,96 +5,62 @@ import {
   ChevronDoubleLeftIcon,
 } from "@heroicons/react/24/outline";
 import { Table } from "@tanstack/react-table";
-
 import { Button } from "@/app/shadcn_components/ui/button";
 
 interface DataTablePaginationProps<TData> {
   table: Table<TData>;
-  loadPaginatedData: () => void;
-  currentPageIndex: number;
-  setCurrentPageIndex: (index: number) => void;
 }
 
 export function DataTablePagination<TData>({
   table,
-  loadPaginatedData,
-  currentPageIndex,
-  setCurrentPageIndex,
 }: DataTablePaginationProps<TData>) {
-  // Check if the user has reached the last page
-
-  const requestMoreData = () => {
-    // Check if the next page is the last one
-    if (
-      table.getState().pagination.pageIndex + 1 ===
-      table.getPageCount() - 1
-    ) {
-      console.log("requesting more data");
-      loadPaginatedData();
-    }
-  };
-
-  const goToFinalPage = () => {
-    console.log("Go to final page");
-    // Check if the next page is the last one
-    loadPaginatedData();
-  };
+  const { pageIndex } = table.getState().pagination;
 
   return (
     <div className="flex items-center justify-end px-2">
       <div className="flex items-center space-x-6 lg:space-x-8">
-        <div className="flex w-[100px] items-center justify-center text-sm font-medium">
-          Page{" "}
-          {table.getPageCount() === 0
-            ? 0
-            : table.getState().pagination.pageIndex + 1}{" "}
-          of {table.getPageCount()}
+        <div className="flex w-[120px] items-center justify-center text-sm font-medium">
+          Page {pageIndex + 1} of {table.getPageCount()}
         </div>
+
         <div className="flex items-center space-x-2">
+          {/* First page */}
           <Button
             variant="outline"
             className="hidden h-8 w-8 p-0 lg:flex"
-            onClick={() => {
-              setCurrentPageIndex(0);
-            }}
+            onClick={() => table.setPageIndex(0)}
             disabled={!table.getCanPreviousPage()}
           >
-            <span className="sr-only">Go to first page</span>
             <ChevronDoubleLeftIcon className="h-4 w-4" />
           </Button>
+
+          {/* Previous */}
           <Button
             variant="outline"
             className="h-8 w-8 p-0"
-            onClick={() => {
-              setCurrentPageIndex(currentPageIndex - 1);
-            }}
+            onClick={() => table.previousPage()}
             disabled={!table.getCanPreviousPage()}
           >
-            <span className="sr-only">Go to previous page</span>
             <ChevronLeftIcon className="h-4 w-4" />
           </Button>
+
+          {/* Next */}
           <Button
             variant="outline"
             className="h-8 w-8 p-0"
-            onClick={() => {
-              requestMoreData();
-              setCurrentPageIndex(currentPageIndex + 1);
-            }}
+            onClick={() => table.nextPage()}
             disabled={!table.getCanNextPage()}
           >
-            <span className="sr-only">Go to next page</span>
             <ChevronRightIcon className="h-4 w-4" />
           </Button>
+
+          {/* Last */}
           <Button
             variant="outline"
             className="hidden h-8 w-8 p-0 lg:flex"
-            onClick={() => {
-              goToFinalPage();
-              setCurrentPageIndex(table.getPageCount() - 1);
-            }}
+            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
             disabled={!table.getCanNextPage()}
           >
-            <span className="sr-only">Go to last page</span>
             <ChevronDoubleRightIcon className="h-4 w-4" />
           </Button>
         </div>