diff --git a/app/next-client-app/app/(protected)/scanreports/[id]/page.tsx b/app/next-client-app/app/(protected)/scanreports/[id]/page.tsx
index 1a528c5d8..71275cda0 100644
--- a/app/next-client-app/app/(protected)/scanreports/[id]/page.tsx
+++ b/app/next-client-app/app/(protected)/scanreports/[id]/page.tsx
@@ -8,6 +8,7 @@ import { DataTable } from "@/components/data-table";
 import { objToQuery } from "@/lib/client-utils";
 import { FilterParameters } from "@/types/filter";
 import { DataTableFilter } from "@/components/data-table/DataTableFilter";
+import ScanReportsTableClient from "@/components/jobs/SRTableTest";
 
 interface ScanReportsTableProps {
   params: {
@@ -24,7 +25,6 @@ export default async function ScanReportsTable({
 
   const combinedParams = { ...defaultParams, ...searchParams };
   const query = objToQuery(combinedParams);
-  const filter = <DataTableFilter filter="name" />;
 
   const scanReportsTables = await getScanReportTables(id, query);
   const permissions = await getScanReportPermissions(id);
@@ -42,12 +42,16 @@ export default async function ScanReportsTable({
   return (
     <div>
       <div>
-        <DataTable
+        {/* <DataTable
           columns={columns}
           data={scanReportsResult}
           count={scanReportsTables.count}
           Filter={filter}
           linkPrefix="tables/"
+        /> */}
+        <ScanReportsTableClient
+          scanReportId={id}
+          initialScanReportsResult={scanReportsResult}
         />
       </div>
     </div>
diff --git a/app/next-client-app/components/data-table/index.tsx b/app/next-client-app/components/data-table/index.tsx
index 023ad9369..342291b30 100644
--- a/app/next-client-app/components/data-table/index.tsx
+++ b/app/next-client-app/components/data-table/index.tsx
@@ -29,6 +29,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { DataTablePagination } from "./DataTablePagination";
 import { Columns3 } from "lucide-react";
+import { RefreshJobsButton } from "../jobs/RefreshButton";
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
@@ -39,6 +40,7 @@ interface DataTableProps<TData, TValue> {
   clickableRow?: boolean;
   viewColumns?: boolean;
   paginated?: boolean;
+  RefreshJobsButton?: JSX.Element;
   defaultPageSize?: 10 | 20 | 30 | 40 | 50;
 }
 
@@ -55,6 +57,7 @@ export function DataTable<TData, TValue>({
   clickableRow = true,
   viewColumns = true,
   paginated = true,
+  RefreshJobsButton,
   defaultPageSize,
 }: DataTableProps<TData, TValue>) {
   const [columnVisibility, setColumnVisibility] =
@@ -92,8 +95,9 @@ export function DataTable<TData, TValue>({
 
   return (
     <div>
-      <div className="flex justify-between mb-3">
+      <div className="flex justify-between items-center mb-3">
         {Filter}
+        {RefreshJobsButton}
         {/* Views Columns Menu */}
         {viewColumns && (
           <DropdownMenu>
diff --git a/app/next-client-app/components/jobs/RefreshButton.tsx b/app/next-client-app/components/jobs/RefreshButton.tsx
new file mode 100644
index 000000000..d9e66893f
--- /dev/null
+++ b/app/next-client-app/components/jobs/RefreshButton.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { RefreshCw } from "lucide-react";
+import { getJobs } from "@/api/scanreports";
+
+interface RefreshJobsButtonProps {
+  scanReportId: string;
+  onJobsRefresh: (updatedJobs: Job[]) => void;
+}
+
+export function RefreshJobsButton({
+  scanReportId,
+  onJobsRefresh,
+}: RefreshJobsButtonProps) {
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  const handleRefresh = async () => {
+    try {
+      setIsRefreshing(true);
+
+      // Fetch updated jobs
+      const updatedJobs = await getJobs(scanReportId);
+      if (updatedJobs) {
+        onJobsRefresh(updatedJobs);
+      }
+      // Call the provided callback to update parent component
+    } catch (error) {
+      console.error("Failed to refresh jobs:", error);
+      // Optionally add error toast or notification
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+
+  return (
+    <Button
+      variant="outline"
+      onClick={handleRefresh}
+      disabled={isRefreshing}
+      className="ml-2"
+    >
+      {isRefreshing ? (
+        <>Refreshing...</>
+      ) : (
+        <>
+          <RefreshCw className="mr-2 h-4 w-4" />
+          Refresh Jobs Progress
+        </>
+      )}
+    </Button>
+  );
+}
diff --git a/app/next-client-app/components/jobs/SRTableTest.tsx b/app/next-client-app/components/jobs/SRTableTest.tsx
new file mode 100644
index 000000000..7dd0b2b8a
--- /dev/null
+++ b/app/next-client-app/components/jobs/SRTableTest.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import { useState } from "react";
+
+import { DataTable } from "@/components/data-table";
+import { RefreshJobsButton } from "./RefreshButton";
+import { columns } from "@/app/(protected)/scanreports/[id]/columns";
+import { DataTableFilter } from "../data-table/DataTableFilter";
+
+export default function ScanReportsTableClient({
+  initialScanReportsResult,
+  scanReportId,
+}: {
+  initialScanReportsResult: ScanReportTable[];
+  scanReportId: string;
+}) {
+  const filter = <DataTableFilter filter="name" />;
+  const [scanReportsResult, setScanReportsResult] = useState(
+    initialScanReportsResult
+  );
+
+  const handleJobsRefresh = (updatedJobs: Job[]) => {
+    // Update the jobs for each table row
+    const updatedScanReportsResult = scanReportsResult.map((table) => ({
+      ...table,
+      jobs: updatedJobs,
+    }));
+
+    setScanReportsResult(updatedScanReportsResult);
+  };
+
+  return (
+    <div>
+      <DataTable
+        columns={columns}
+        data={scanReportsResult}
+        count={scanReportsResult.length}
+        Filter={filter}
+        RefreshJobsButton={
+          <RefreshJobsButton
+            scanReportId={scanReportId}
+            onJobsRefresh={handleJobsRefresh}
+          />
+        }
+        linkPrefix="tables/"
+      />
+    </div>
+  );
+}