diff --git a/dashboard/src/api/control-layer/client.ts b/dashboard/src/api/control-layer/client.ts
index 3b4e96689..8da33b2fc 100644
--- a/dashboard/src/api/control-layer/client.ts
+++ b/dashboard/src/api/control-layer/client.ts
@@ -796,7 +796,9 @@ const paymentsApi = {
 
     if (!response.ok) {
       const errorData = await response.json().catch(() => ({}));
-      throw new Error(errorData.message || `Failed to create payment: ${response.status}`);
+      throw new Error(
+        errorData.message || `Failed to create payment: ${response.status}`,
+      );
     }
 
     return response.json();
@@ -1046,13 +1048,13 @@ const filesApi = {
 
   // Get file content as JSONL (supports limit/offset query params)
   // Returns content, whether there are more results, and the last line number
-  async getContent(
+  async getFileContent(
     id: string,
-    options?: { limit?: number; offset?: number },
+    options?: { limit?: number; skip?: number },
   ): Promise<{ content: string; incomplete: boolean; lastLine: number }> {
     const params = new URLSearchParams();
     if (options?.limit) params.set("limit", options.limit.toString());
-    if (options?.offset) params.set("offset", options.offset.toString());
+    if (options?.skip) params.set("skip", options.skip.toString());
 
     const url = `/ai/v1/files/${id}/content${params.toString() ? "?" + params.toString() : ""}`;
     const response = await fetch(url);
diff --git a/dashboard/src/api/control-layer/hooks.ts b/dashboard/src/api/control-layer/hooks.ts
index 0dbfe69d8..2d4d62c2f 100644
--- a/dashboard/src/api/control-layer/hooks.ts
+++ b/dashboard/src/api/control-layer/hooks.ts
@@ -694,14 +694,28 @@ export function useFile(id: string) {
   });
 }
 
-// Deprecated: Use dwctlApi.files.getContent() with useQuery directly instead
-// export function useFileRequests(id: string, options?: FileRequestsListQuery) {
-//   return useQuery({
-//     queryKey: queryKeys.files.requestsList(id, options || {}),
-//     queryFn: () => dwctlApi.files.getContent(id, {limit: options?.limit, offset: options?.skip}),
-//     enabled: !!id,
-//   });
-// }
+export function useFileContent(
+  id: string,
+  options?: { limit?: number; skip?: number },
+) {
+  const queryClient = useQueryClient();
+
+  return useQuery({
+    queryKey: queryKeys.files.requestsList(id, options || {}),
+    queryFn: () => dwctlApi.files.getFileContent(id, options),
+    enabled: !!id,
+    // Prefetch next page
+    select: (data) => {
+      if (data.incomplete && options?.limit && options?.skip) {
+        queryClient.prefetchQuery({
+          queryKey: queryKeys.files.requestsList(id, options),
+          queryFn: () => dwctlApi.files.getFileContent(id, options),
+        });
+      }
+      return data;
+    },
+  });
+}
 
 export function useUploadFile() {
   const queryClient = useQueryClient();
@@ -928,7 +942,7 @@ export function useProcessPayment(options?: {
   return useMutation({
     mutationKey: ["payments", "process"],
     mutationFn: async (sessionId: string) => {
-      await dwctlApi.payments.process(sessionId)
+      await dwctlApi.payments.process(sessionId);
     },
     onSuccess: () => {
       // Refetch user data to update balance after successful payment
diff --git a/dashboard/src/components/features/batches/Batches/Batches.pagination.test.tsx b/dashboard/src/components/features/batches/Batches/Batches.pagination.test.tsx
index 56147ffaf..bc4b16f3f 100644
--- a/dashboard/src/components/features/batches/Batches/Batches.pagination.test.tsx
+++ b/dashboard/src/components/features/batches/Batches/Batches.pagination.test.tsx
@@ -185,18 +185,24 @@ describe("Batches - Pagination", () => {
         ).toBeInTheDocument();
       });
 
-      // Verify we're on page 1
-      expect(within(container).getByText(/Page 1/i)).toBeInTheDocument();
+      // Verify we're on page 1 - look for the active pagination link
+      const activePage = within(container).getByRole("link", {
+        current: "page",
+      });
+      expect(activePage).toHaveTextContent("1");
 
-      // Click Next button
-      const nextButton = within(container).getByRole("button", {
-        name: /Next/i,
+      // Click Next button - uses aria-label "Go to next page"
+      const nextButton = within(container).getByRole("link", {
+        name: /go to next page/i,
       });
       await user.click(nextButton);
 
       // Verify page 2 is shown
       await waitFor(() => {
-        expect(within(container).getByText(/Page 2/i)).toBeInTheDocument();
+        const activePage2 = within(container).getByRole("link", {
+          current: "page",
+        });
+        expect(activePage2).toHaveTextContent("2");
       });
 
       // Verify the correct cursor was used (last item from page 1)
@@ -280,28 +286,34 @@ describe("Batches - Pagination", () => {
       });
 
       // Navigate to page 2
-      const nextButton = within(container).getByRole("button", {
-        name: /Next/i,
+      const nextButton = within(container).getByRole("link", {
+        name: /go to next page/i,
       });
       await user.click(nextButton);
 
       await waitFor(() => {
-        expect(within(container).getByText(/Page 2/i)).toBeInTheDocument();
+        const activePage2 = within(container).getByRole("link", {
+          current: "page",
+        });
+        expect(activePage2).toHaveTextContent("2");
       });
 
       // Now click Previous - should go back to page 1 using cursor history
-      const prevButton = within(container).getByRole("button", {
-        name: /Previous/i,
+      const prevButton = within(container).getByRole("link", {
+        name: /go to previous page/i,
       });
       await user.click(prevButton);
 
       // Should be back on page 1
       await waitFor(() => {
-        expect(within(container).getByText(/Page 1/i)).toBeInTheDocument();
+        const activePage1 = within(container).getByRole("link", {
+          current: "page",
+        });
+        expect(activePage1).toHaveTextContent("1");
       });
 
-      // The previous button should now be disabled (we're on page 0)
-      expect(prevButton).toBeDisabled();
+      // The previous button should have pointer-events-none class (disabled)
+      expect(prevButton).toHaveClass("pointer-events-none");
     });
 
     it("should show First button only when on page 2 or higher", async () => {
@@ -385,37 +397,43 @@ describe("Batches - Pagination", () => {
 
       // Page 1: No First button
       expect(
-        within(container).queryByRole("button", { name: /First/i }),
+        within(container).queryByRole("link", { name: /First/i }),
       ).not.toBeInTheDocument();
 
       // Navigate to page 2
-      const nextButton = within(container).getByRole("button", {
-        name: /Next/i,
+      const nextButton = within(container).getByRole("link", {
+        name: /go to next page/i,
       });
       await user.click(nextButton);
 
       await waitFor(() => {
-        expect(within(container).getByText(/Page 2/i)).toBeInTheDocument();
+        const activePage2 = within(container).getByRole("link", {
+          current: "page",
+        });
+        expect(activePage2).toHaveTextContent("2");
       });
 
-      // Page 2: Still no First button (only shows on page 3+)
+      // Page 2: First button should now appear (currentPage > 1)
       expect(
-        within(container).queryByRole("button", { name: /First/i }),
-      ).not.toBeInTheDocument();
+        within(container).getByRole("link", { name: /First/i }),
+      ).toBeInTheDocument();
 
       // Navigate to page 3
-      const nextButton2 = within(container).getByRole("button", {
-        name: /Next/i,
+      const nextButton2 = within(container).getByRole("link", {
+        name: /go to next page/i,
       });
       await user.click(nextButton2);
 
       await waitFor(() => {
-        expect(within(container).getByText(/Page 3/i)).toBeInTheDocument();
+        const activePage3 = within(container).getByRole("link", {
+          current: "page",
+        });
+        expect(activePage3).toHaveTextContent("3");
       });
 
-      // Page 3: First button should appear
+      // Page 3: First button should still appear
       expect(
-        within(container).getByRole("button", { name: /First/i }),
+        within(container).getByRole("link", { name: /First/i }),
       ).toBeInTheDocument();
     });
 
@@ -512,36 +530,45 @@ describe("Batches - Pagination", () => {
       });
 
       // Navigate to page 2, then page 3
-      const nextButton = within(container).getByRole("button", {
-        name: /Next/i,
+      const nextButton = within(container).getByRole("link", {
+        name: /go to next page/i,
       });
       await user.click(nextButton);
       await waitFor(() => {
-        expect(within(container).getByText(/Page 2/i)).toBeInTheDocument();
+        const activePage2 = within(container).getByRole("link", {
+          current: "page",
+        });
+        expect(activePage2).toHaveTextContent("2");
       });
 
-      const nextButton2 = within(container).getByRole("button", {
-        name: /Next/i,
+      const nextButton2 = within(container).getByRole("link", {
+        name: /go to next page/i,
       });
       await user.click(nextButton2);
       await waitFor(() => {
-        expect(within(container).getByText(/Page 3/i)).toBeInTheDocument();
+        const activePage3 = within(container).getByRole("link", {
+          current: "page",
+        });
+        expect(activePage3).toHaveTextContent("3");
       });
 
       // Click First button
-      const firstButton = within(container).getByRole("button", {
+      const firstButton = within(container).getByRole("link", {
         name: /First/i,
       });
       await user.click(firstButton);
 
       // Should be back on page 1
       await waitFor(() => {
-        expect(within(container).getByText(/Page 1/i)).toBeInTheDocument();
+        const activePage1 = within(container).getByRole("link", {
+          current: "page",
+        });
+        expect(activePage1).toHaveTextContent("1");
       });
 
       // First button should no longer be visible
       expect(
-        within(container).queryByRole("button", { name: /First/i }),
+        within(container).queryByRole("link", { name: /First/i }),
       ).not.toBeInTheDocument();
     });
 
@@ -616,13 +643,16 @@ describe("Batches - Pagination", () => {
       });
 
       // Navigate to page 2
-      const nextButton = within(container).getByRole("button", {
-        name: /Next/i,
+      const nextButton = within(container).getByRole("link", {
+        name: /go to next page/i,
       });
       await user.click(nextButton);
 
       await waitFor(() => {
-        expect(within(container).getByText(/Page 2/i)).toBeInTheDocument();
+        const activePage2 = within(container).getByRole("link", {
+          current: "page",
+        });
+        expect(activePage2).toHaveTextContent("2");
       });
 
       // Change page size by clicking the combobox trigger
@@ -643,13 +673,17 @@ describe("Batches - Pagination", () => {
 
       // Should reset to page 1 after changing page size
       await waitFor(() => {
-        expect(within(container).getByText(/Page 1/i)).toBeInTheDocument();
+        const activePage1 = within(container).getByRole("link", {
+          current: "page",
+        });
+        expect(activePage1).toHaveTextContent("1");
       });
 
-      // Previous button should be disabled (back at page 1)
-      expect(
-        within(container).getByRole("button", { name: /Previous/i }),
-      ).toBeDisabled();
+      // Previous button should have pointer-events-none class (disabled)
+      const prevButton = within(container).getByRole("link", {
+        name: /go to previous page/i,
+      });
+      expect(prevButton).toHaveClass("pointer-events-none");
     });
   });
 
@@ -714,17 +748,23 @@ describe("Batches - Pagination", () => {
       );
 
       await waitFor(() => {
-        expect(within(container).getByText(/Page 1/i)).toBeInTheDocument();
+        const activePage = within(container).getByRole("link", {
+          current: "page",
+        });
+        expect(activePage).toHaveTextContent("1");
       });
 
       // Navigate to page 2
-      const nextButton = within(container).getByRole("button", {
-        name: /Next/i,
+      const nextButton = within(container).getByRole("link", {
+        name: /go to next page/i,
       });
       await user.click(nextButton);
 
       await waitFor(() => {
-        expect(within(container).getByText(/Page 2/i)).toBeInTheDocument();
+        const activePage2 = within(container).getByRole("link", {
+          current: "page",
+        });
+        expect(activePage2).toHaveTextContent("2");
       });
     });
 
@@ -788,31 +828,40 @@ describe("Batches - Pagination", () => {
       );
 
       await waitFor(() => {
-        expect(within(container).getByText(/Page 1/i)).toBeInTheDocument();
+        const activePage = within(container).getByRole("link", {
+          current: "page",
+        });
+        expect(activePage).toHaveTextContent("1");
       });
 
       // Navigate to page 2
-      const nextButton = within(container).getByRole("button", {
-        name: /Next/i,
+      const nextButton = within(container).getByRole("link", {
+        name: /go to next page/i,
       });
       await user.click(nextButton);
 
       await waitFor(() => {
-        expect(within(container).getByText(/Page 2/i)).toBeInTheDocument();
+        const activePage2 = within(container).getByRole("link", {
+          current: "page",
+        });
+        expect(activePage2).toHaveTextContent("2");
       });
 
       // Navigate back to page 1
-      const prevButton = within(container).getByRole("button", {
-        name: /Previous/i,
+      const prevButton = within(container).getByRole("link", {
+        name: /go to previous page/i,
       });
       await user.click(prevButton);
 
       await waitFor(() => {
-        expect(within(container).getByText(/Page 1/i)).toBeInTheDocument();
+        const activePage1 = within(container).getByRole("link", {
+          current: "page",
+        });
+        expect(activePage1).toHaveTextContent("1");
       });
 
-      // Previous button should be disabled on page 1
-      expect(prevButton).toBeDisabled();
+      // Previous button should have pointer-events-none class (disabled) on page 1
+      expect(prevButton).toHaveClass("pointer-events-none");
     });
   });
 });
diff --git a/dashboard/src/components/features/batches/Batches/Batches.tsx b/dashboard/src/components/features/batches/Batches/Batches.tsx
index 34be44007..d665e957f 100644
--- a/dashboard/src/components/features/batches/Batches/Batches.tsx
+++ b/dashboard/src/components/features/batches/Batches/Batches.tsx
@@ -20,6 +20,7 @@ import {
   SelectValue,
 } from "../../../ui/select";
 import { DataTable } from "../../../ui/data-table";
+import { CursorPagination } from "../../../ui/cursor-pagination";
 import { createFileColumns } from "../FilesTable/columns";
 import { createBatchColumns } from "../BatchesTable/columns";
 import { useFiles, useBatches } from "../../../../api/control-layer/hooks";
@@ -597,48 +598,21 @@ export function Batches({
                   </div>
                 }
               />
-              {/* Server-side pagination controls */}
-              <div className="flex items-center justify-between px-2 py-0">
-                <div className="text-sm text-gray-700">
-                  Showing {filesPage * filesPageSize + 1} -{" "}
-                  {filesPage * filesPageSize + files.length}
-                  {filesHasMore && " of many"}
-                </div>
-                <div className="flex items-center gap-2">
-                  {filesPage > 1 && (
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={() => {
-                        setFilesAfterCursor(undefined);
-                        filesCursorHistory.current = []; // Clear history when jumping to first page
-                        updateFilesPagination(0, filesPageSize);
-                      }}
-                    >
-                      First
-                    </Button>
-                  )}
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={handleFilesPrevPage}
-                    disabled={filesPage === 0}
-                  >
-                    Previous
-                  </Button>
-                  <span className="text-sm text-gray-700">
-                    Page {filesPage + 1}
-                  </span>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={handleFilesNextPage}
-                    disabled={!filesHasMore}
-                  >
-                    Next
-                  </Button>
-                </div>
-              </div>
+              <CursorPagination
+                currentPage={filesPage + 1}
+                itemsPerPage={filesPageSize}
+                onNextPage={handleFilesNextPage}
+                onPrevPage={handleFilesPrevPage}
+                onFirstPage={() => {
+                  setFilesAfterCursor(undefined);
+                  filesCursorHistory.current = [];
+                  updateFilesPagination(0, filesPageSize);
+                }}
+                hasNextPage={filesHasMore}
+                hasPrevPage={filesPage > 0}
+                currentPageItemCount={files.length}
+                itemName="files"
+              />
             </>
           )}
         </TabsContent>
@@ -726,48 +700,21 @@ export function Batches({
                   </div>
                 }
               />
-              {/* Server-side pagination controls */}
-              <div className="flex items-center justify-between px-2 py-0">
-                <div className="text-sm text-gray-700">
-                  Showing {batchesPage * batchesPageSize + 1} -{" "}
-                  {batchesPage * batchesPageSize + filteredBatches.length}
-                  {batchesHasMore && " of many"}
-                </div>
-                <div className="flex items-center gap-2">
-                  {batchesPage > 1 && (
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={() => {
-                        setBatchesAfterCursor(undefined);
-                        batchesCursorHistory.current = []; // Clear history when jumping to first page
-                        updateBatchesPagination(0, batchesPageSize);
-                      }}
-                    >
-                      First
-                    </Button>
-                  )}
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={handleBatchesPrevPage}
-                    disabled={batchesPage === 0}
-                  >
-                    Previous
-                  </Button>
-                  <span className="text-sm text-gray-700">
-                    Page {batchesPage + 1}
-                  </span>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={handleBatchesNextPage}
-                    disabled={!batchesHasMore}
-                  >
-                    Next
-                  </Button>
-                </div>
-              </div>
+              <CursorPagination
+                currentPage={batchesPage + 1}
+                itemsPerPage={batchesPageSize}
+                onNextPage={handleBatchesNextPage}
+                onPrevPage={handleBatchesPrevPage}
+                onFirstPage={() => {
+                  setBatchesAfterCursor(undefined);
+                  batchesCursorHistory.current = [];
+                  updateBatchesPagination(0, batchesPageSize);
+                }}
+                hasNextPage={batchesHasMore}
+                hasPrevPage={batchesPage > 0}
+                currentPageItemCount={filteredBatches.length}
+                itemName="batches"
+              />
             </>
           )}
         </TabsContent>
diff --git a/dashboard/src/components/features/batches/FileRequests/FileRequests.tsx b/dashboard/src/components/features/batches/FileRequests/FileRequests.tsx
index 2fb6388a9..4055cdfd7 100644
--- a/dashboard/src/components/features/batches/FileRequests/FileRequests.tsx
+++ b/dashboard/src/components/features/batches/FileRequests/FileRequests.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { useParams, useNavigate, useSearchParams } from "react-router-dom";
 import {
   ArrowLeft,
@@ -6,11 +6,10 @@ import {
   FileCheck,
   AlertCircle,
   Download,
-  Loader2,
 } from "lucide-react";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Button } from "../../../ui/button";
 import { DataTable } from "../../../ui/data-table";
+import { CursorPagination } from "../../../ui/cursor-pagination";
 import {
   Select,
   SelectContent,
@@ -18,8 +17,11 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../../../ui/select";
-import { dwctlApi } from "../../../../api/control-layer/client";
-import { useFile, useBatches } from "../../../../api/control-layer/hooks";
+import {
+  useFile,
+  useBatches,
+  useFileContent,
+} from "../../../../api/control-layer/hooks";
 import {
   createFileRequestsColumns,
   type FileRequestOrResponse,
@@ -38,7 +40,6 @@ import type { FileRequest } from "../../../../api/control-layer/types";
 export function FileRequests() {
   const { fileId } = useParams<{ fileId: string }>();
   const navigate = useNavigate();
-  const queryClient = useQueryClient();
   const [searchParams, setSearchParams] = useSearchParams();
   const [downloadModalOpen, setDownloadModalOpen] = useState(false);
 
@@ -50,15 +51,20 @@ export function FileRequests() {
     useState<FileRequestOrResponse | null>(null);
   const [requestBodyModalOpen, setRequestBodyModalOpen] = useState(false);
 
-  // Get pagination from URL or use defaults
-  const page = parseInt(searchParams.get("page") || "0", 10);
-  const pageSize = parseInt(searchParams.get("pageSize") || "10", 10);
+  // Pagination state (1-based page number)
+  const currentPage = Number(searchParams.get("page")) || 1;
+  const pageSize = Number(searchParams.get("pageSize")) || 10;
+
+  // Calculate 0-based offset for API
+  const offset = (currentPage - 1) * pageSize;
 
-  // Update URL when pagination changes
-  const updatePagination = (newPage: number, newPageSize: number) => {
+  // Update pagination in URL
+  const updatePagination = (page: number, size: number) => {
     const params = new URLSearchParams(searchParams);
-    params.set("page", newPage.toString());
-    params.set("pageSize", newPageSize.toString());
+    params.set("page", String(page));
+    params.set("pageSize", String(size));
+    // Preserve returnTab
+    if (returnTab) params.set("returnTab", returnTab);
     setSearchParams(params, { replace: true });
   };
 
@@ -79,31 +85,12 @@ export function FileRequests() {
         ["validating", "in_progress", "finalizing"].includes(b.status),
     );
 
-  // Fetch file content with pagination
-  const { data, isLoading } = useQuery({
-    queryKey: ["file-content", fileId, page, pageSize],
-    queryFn: () =>
-      dwctlApi.files.getContent(fileId || "", {
-        limit: pageSize,
-        offset: page * pageSize,
-      }),
-    enabled: !!fileId,
+  // Fetch file content with pagination using custom hook
+  const { data, isLoading } = useFileContent(fileId || "", {
+    limit: pageSize,
+    skip: offset,
   });
 
-  // Prefetch next page
-  useEffect(() => {
-    if (fileId && data?.incomplete) {
-      queryClient.prefetchQuery({
-        queryKey: ["file-content", fileId, page + 1, pageSize],
-        queryFn: () =>
-          dwctlApi.files.getContent(fileId, {
-            limit: pageSize,
-            offset: (page + 1) * pageSize,
-          }),
-      });
-    }
-  }, [fileId, page, pageSize, data?.incomplete, queryClient]);
-
   // Parse JSONL into requests (could be templates or responses)
   const requests: FileRequestOrResponse[] = data?.content
     ? data.content
@@ -136,7 +123,7 @@ export function FileRequests() {
       <div className="mb-6 flex items-center gap-4">
         <button
           onClick={() => navigate(`/batches?tab=${returnTab}`)}
-          className="p-2 text-gray-500 hover:bg-gray-100 rounded-lg transition-colors flex-shrink-0"
+          className="p-2 text-gray-500 hover:bg-gray-100 rounded-lg transition-colors shrink-0"
           aria-label="Back to Batches"
           title="Back to Batches"
         >
@@ -151,26 +138,16 @@ export function FileRequests() {
               <span className="truncate flex items-center gap-2">
                 <span className="font-medium">File:</span>
                 {file.purpose === "batch" && (
-                  <FileInput className="w-4 h-4 text-gray-500 flex-shrink-0" />
+                  <FileInput className="w-4 h-4 text-gray-500 shrink-0" />
                 )}
                 {file.purpose === "batch_output" && (
-                  <FileCheck className="w-4 h-4 text-green-600 flex-shrink-0" />
+                  <FileCheck className="w-4 h-4 text-green-600 shrink-0" />
                 )}
                 {file.purpose === "batch_error" && (
-                  <AlertCircle className="w-4 h-4 text-red-500 flex-shrink-0" />
+                  <AlertCircle className="w-4 h-4 text-red-500 shrink-0" />
                 )}
                 {file.filename}
               </span>
-              <span className="flex-shrink-0">
-                <span className="font-medium">Showing:</span>{" "}
-                {page * pageSize + 1}-{page * pageSize + requests.length}
-                {isPartial && (
-                  <span className="inline-flex items-center gap-1 text-blue-600 ml-2">
-                    <Loader2 className="w-3 h-3 animate-spin" />
-                    Partial results (batch in progress)
-                  </span>
-                )}
-              </span>
             </div>
           )}
         </div>
@@ -223,10 +200,10 @@ export function FileRequests() {
                 <Select
                   value={pageSize.toString()}
                   onValueChange={(value) => {
-                    updatePagination(0, Number(value)); // Reset to first page when changing page size
+                    updatePagination(1, Number(value)); // Reset to first page when changing page size
                   }}
                 >
-                  <SelectTrigger className="w-[80px] h-8">
+                  <SelectTrigger className="w-20 h-8">
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
@@ -241,44 +218,19 @@ export function FileRequests() {
               </div>
             }
           />
-          {/* Server-side pagination controls */}
-          <div className="flex items-center justify-between px-2 py-4">
-            <div className="text-sm text-gray-700">
-              Showing {page * pageSize + 1} -{" "}
-              {page * pageSize + requests.length}
-              {hasMore && " of many"}
-            </div>
-            <div className="flex items-center gap-2">
-              {page > 1 && (
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => updatePagination(0, pageSize)}
-                >
-                  First
-                </Button>
-              )}
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() =>
-                  updatePagination(Math.max(0, page - 1), pageSize)
-                }
-                disabled={page === 0}
-              >
-                Previous
-              </Button>
-              <span className="text-sm text-gray-700">Page {page + 1}</span>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => updatePagination(page + 1, pageSize)}
-                disabled={!hasMore}
-              >
-                Next
-              </Button>
-            </div>
-          </div>
+          <CursorPagination
+            currentPage={currentPage}
+            itemsPerPage={pageSize}
+            onNextPage={() => updatePagination(currentPage + 1, pageSize)}
+            onPrevPage={() =>
+              updatePagination(Math.max(1, currentPage - 1), pageSize)
+            }
+            onFirstPage={() => updatePagination(1, pageSize)}
+            hasNextPage={hasMore}
+            hasPrevPage={currentPage > 1}
+            currentPageItemCount={requests.length}
+            itemName="requests"
+          />
         </>
       )}
 
diff --git a/dashboard/src/components/modals/FileRequestsModal/ViewFileRequestsModal.tsx b/dashboard/src/components/modals/FileRequestsModal/ViewFileRequestsModal.tsx
index 37d3b79b4..e2230ad4f 100644
--- a/dashboard/src/components/modals/FileRequestsModal/ViewFileRequestsModal.tsx
+++ b/dashboard/src/components/modals/FileRequestsModal/ViewFileRequestsModal.tsx
@@ -76,9 +76,9 @@ export function ViewFileRequestsModal({
   const { data, isLoading } = useQuery({
     queryKey: ["file-content", file?.id, page],
     queryFn: () =>
-      dwctlApi.files.getContent(file?.id || "", {
+      dwctlApi.files.getFileContent(file?.id || "", {
         limit: pageSize,
-        offset: page * pageSize,
+        skip: page * pageSize,
       }),
     enabled: !!file?.id && isOpen,
   });
diff --git a/dashboard/src/components/ui/cursor-pagination.tsx b/dashboard/src/components/ui/cursor-pagination.tsx
new file mode 100644
index 000000000..791c7faf6
--- /dev/null
+++ b/dashboard/src/components/ui/cursor-pagination.tsx
@@ -0,0 +1,102 @@
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "./pagination";
+
+interface CursorPaginationProps {
+  currentPage: number;
+  itemsPerPage: number;
+  onNextPage: () => void;
+  onPrevPage: () => void;
+  onFirstPage?: () => void;
+  hasNextPage: boolean;
+  hasPrevPage: boolean;
+  currentPageItemCount: number;
+  itemName?: string;
+  className?: string;
+}
+
+export function CursorPagination({
+  currentPage,
+  itemsPerPage,
+  onNextPage,
+  onPrevPage,
+  onFirstPage,
+  hasNextPage,
+  hasPrevPage,
+  currentPageItemCount,
+  itemName = "items",
+  className = "",
+}: CursorPaginationProps) {
+  return (
+    <>
+      <Pagination className={`mt-8 ${className}`}>
+        <PaginationContent>
+          {/* First page button - only show if we're beyond page 1 */}
+          {onFirstPage && currentPage > 1 && (
+            <PaginationItem>
+              <PaginationLink
+                href="#"
+                onClick={(e) => {
+                  e.preventDefault();
+                  onFirstPage();
+                }}
+              >
+                First
+              </PaginationLink>
+            </PaginationItem>
+          )}
+          {/* Previous button */}
+          <PaginationItem>
+            <PaginationPrevious
+              href="#"
+              onClick={(e) => {
+                e.preventDefault();
+                if (hasPrevPage) onPrevPage();
+              }}
+              className={
+                !hasPrevPage
+                  ? "pointer-events-none opacity-50"
+                  : "cursor-pointer"
+              }
+            />
+          </PaginationItem>
+
+          {/* Current page indicator */}
+          <PaginationItem>
+            <PaginationLink href="#" isActive>
+              {currentPage}
+            </PaginationLink>
+          </PaginationItem>
+
+          {/* Next button */}
+          <PaginationItem>
+            <PaginationNext
+              href="#"
+              onClick={(e) => {
+                e.preventDefault();
+                if (hasNextPage) onNextPage();
+              }}
+              className={
+                !hasNextPage
+                  ? "pointer-events-none opacity-50"
+                  : "cursor-pointer"
+              }
+            />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+
+      {/* Item count display */}
+      <div className="flex items-center justify-center mt-4 text-sm text-gray-600">
+        Showing {itemsPerPage * (currentPage - 1) + 1}-
+        {itemsPerPage * (currentPage - 1) + currentPageItemCount}
+        {hasNextPage && " of many"} {itemName}
+      </div>
+    </>
+  );
+}
diff --git a/dashboard/src/components/ui/data-table.tsx b/dashboard/src/components/ui/data-table.tsx
index 4ef586472..06d6829bb 100644
--- a/dashboard/src/components/ui/data-table.tsx
+++ b/dashboard/src/components/ui/data-table.tsx
@@ -13,7 +13,7 @@ import {
   getSortedRowModel,
   useReactTable,
 } from "@tanstack/react-table";
-import { ChevronLeft, ChevronRight, Search } from "lucide-react";
+import { Search } from "lucide-react";
 
 import {
   Table,
@@ -31,6 +31,7 @@ import {
   DropdownMenuContent,
   DropdownMenuTrigger,
 } from "./dropdown-menu";
+import { TablePagination } from "./table-pagination";
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
@@ -303,41 +304,13 @@ export function DataTable<TData, TValue>({
         </Table>
       </div>
       {showPagination && (
-        <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
-          <div className="text-sm text-muted-foreground text-center sm:text-left">
-            Showing{" "}
-            {table.getState().pagination.pageIndex *
-              table.getState().pagination.pageSize +
-              1}{" "}
-            to{" "}
-            {Math.min(
-              (table.getState().pagination.pageIndex + 1) *
-                table.getState().pagination.pageSize,
-              table.getFilteredRowModel().rows.length,
-            )}{" "}
-            of {table.getFilteredRowModel().rows.length} results
-          </div>
-          <div className="flex items-center space-x-2">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => table.previousPage()}
-              disabled={!table.getCanPreviousPage()}
-            >
-              <ChevronLeft className="h-4 w-4" />
-              <span className="hidden sm:inline">Previous</span>
-            </Button>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => table.nextPage()}
-              disabled={!table.getCanNextPage()}
-            >
-              <span className="hidden sm:inline">Next</span>
-              <ChevronRight className="h-4 w-4" />
-            </Button>
-          </div>
-        </div>
+        <TablePagination
+          currentPage={table.getState().pagination.pageIndex + 1}
+          itemsPerPage={table.getState().pagination.pageSize}
+          onPageChange={(page) => table.setPageIndex(page - 1)}
+          totalItems={table.getFilteredRowModel().rows.length}
+          itemName="results"
+        />
       )}
     </div>
   );