diff --git a/src/app/(protected)/dashboard/_components/dispatcher-tables-section.tsx b/src/app/(protected)/dashboard/_components/dispatcher-tables-section.tsx
new file mode 100644
index 00000000..05e1f301
--- /dev/null
+++ b/src/app/(protected)/dashboard/_components/dispatcher-tables-section.tsx
@@ -0,0 +1,60 @@
+import type { UseQueryResult } from "@tanstack/react-query";
+import {
+  DISPATCHER_PAGE_SIZE,
+  type DispatcherPage,
+} from "@/domain/dashboard/types/dashboard-dispatcher-page";
+import type { DashboardRangeKey } from "@/domain/dashboard/types/dashboard-range";
+import type { DispatcherPerformanceRow } from "@/domain/dashboard/types/dashboard-performance";
+import type { DispatcherWorkloadRow } from "@/domain/dashboard/types/dashboard-workload";
+import { DispatcherPerformanceCard } from "./dispatcher-performance-card";
+import { DispatcherWorkloadCard } from "./dispatcher-workload-card";
+
+interface DispatcherTablesSectionProps {
+  range: DashboardRangeKey;
+  workload: UseQueryResult<DispatcherPage<DispatcherWorkloadRow>, Error>;
+  performance: UseQueryResult<DispatcherPage<DispatcherPerformanceRow>, Error>;
+  workloadPage: number;
+  performancePage: number;
+  onWorkloadPageChange: (page: number) => void;
+  onPerformancePageChange: (page: number) => void;
+}
+
+/**
+ * The two paged dispatcher tables. Kept as a fragment so both cards stay direct
+ * children of the dashboard grid, and so the paging view-model derivation lives
+ * here rather than inflating the page component.
+ */
+export function DispatcherTablesSection({
+  range,
+  workload,
+  performance,
+  workloadPage,
+  performancePage,
+  onWorkloadPageChange,
+  onPerformancePageChange,
+}: DispatcherTablesSectionProps) {
+  return (
+    <>
+      <DispatcherWorkloadCard
+        rows={workload.data?.items ?? []}
+        range={range}
+        page={workloadPage}
+        pageSize={workload.data?.pageSize ?? DISPATCHER_PAGE_SIZE}
+        totalDispatchers={workload.data?.totalDispatchers ?? 0}
+        onPageChange={onWorkloadPageChange}
+        isLoading={workload.isLoading}
+        error={workload.error}
+      />
+      <DispatcherPerformanceCard
+        rows={performance.data?.items ?? []}
+        range={range}
+        page={performancePage}
+        pageSize={performance.data?.pageSize ?? DISPATCHER_PAGE_SIZE}
+        totalDispatchers={performance.data?.totalDispatchers ?? 0}
+        onPageChange={onPerformancePageChange}
+        isLoading={performance.isLoading}
+        error={performance.error}
+      />
+    </>
+  );
+}
diff --git a/src/app/(protected)/dashboard/index.tsx b/src/app/(protected)/dashboard/index.tsx
index 988dd493..cb20c9b4 100644
--- a/src/app/(protected)/dashboard/index.tsx
+++ b/src/app/(protected)/dashboard/index.tsx
@@ -8,12 +8,10 @@ import { PageHeader } from "@/components/ui/page-header";
 import { DashboardKpiCard } from "@/app/(protected)/dashboard/_components/dashboard-kpi-card";
 import { DashboardRangeToggle } from "@/app/(protected)/dashboard/_components/dashboard-range-toggle";
 import { DashboardTrendCard } from "@/app/(protected)/dashboard/_components/dashboard-trend-card";
-import { DispatcherPerformanceCard } from "@/app/(protected)/dashboard/_components/dispatcher-performance-card";
-import { DispatcherWorkloadCard } from "@/app/(protected)/dashboard/_components/dispatcher-workload-card";
+import { DispatcherTablesSection } from "@/app/(protected)/dashboard/_components/dispatcher-tables-section";
 import { VendorInsightsCard } from "@/app/(protected)/dashboard/_components/vendor-insights-card";
 import { WorkOrderBreakdownCard } from "@/app/(protected)/dashboard/_components/work-order-breakdown-card";
 import { WorkOrdersByRegionCard } from "@/app/(protected)/dashboard/_components/work-orders-by-region-card";
-import { DISPATCHER_PAGE_SIZE } from "@/domain/dashboard/types/dashboard-dispatcher-page";
 import {
   DEFAULT_DASHBOARD_RANGE,
   type DashboardRangeKey,
@@ -113,25 +111,14 @@ export default function DashboardPage() {
           isLoading={regions.isLoading}
           error={regions.error}
         />
-        <DispatcherWorkloadCard
-          rows={workload.data?.items ?? []}
+        <DispatcherTablesSection
           range={range}
-          page={workloadPage}
-          pageSize={workload.data?.pageSize ?? DISPATCHER_PAGE_SIZE}
-          totalDispatchers={workload.data?.totalDispatchers ?? 0}
-          onPageChange={setWorkloadPage}
-          isLoading={workload.isLoading}
-          error={workload.error}
-        />
-        <DispatcherPerformanceCard
-          rows={performance.data?.items ?? []}
-          range={range}
-          page={performancePage}
-          pageSize={performance.data?.pageSize ?? DISPATCHER_PAGE_SIZE}
-          totalDispatchers={performance.data?.totalDispatchers ?? 0}
-          onPageChange={setPerformancePage}
-          isLoading={performance.isLoading}
-          error={performance.error}
+          workload={workload}
+          performance={performance}
+          workloadPage={workloadPage}
+          performancePage={performancePage}
+          onWorkloadPageChange={setWorkloadPage}
+          onPerformancePageChange={setPerformancePage}
         />
       </Box>
       <DashboardTrendCard range={range} />