diff --git a/apps/edr-freight-web/portal/src/pages/contracts/ContractDetailPage.tsx b/apps/edr-freight-web/portal/src/pages/contracts/ContractDetailPage.tsx
index 6ead1c1b2..42b577327 100644
--- a/apps/edr-freight-web/portal/src/pages/contracts/ContractDetailPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/contracts/ContractDetailPage.tsx
@@ -67,6 +67,20 @@ export default function ContractDetailPage() {
     enabled: !!id && contract?.status !== "DRAFT",
   });
 
+  const poolLines = pool ?? [];
+
+  // Overall utilization across every pool line — drives the header ring + stat.
+  // Declared before the early returns so hook order stays stable across renders.
+  const totals = useMemo(() => {
+    const contracted = poolLines.reduce(
+      (s, l) => s + (l.contractedQuantity || 0),
+      0,
+    );
+    const ordered = poolLines.reduce((s, l) => s + (l.orderedQuantity || 0), 0);
+    const pct = contracted > 0 ? Math.round((ordered / contracted) * 100) : 0;
+    return { contracted, ordered, pct };
+  }, [poolLines]);
+
   if (isLoading) {
     return (
       <Center mih={400} p="xl">
@@ -98,20 +112,8 @@ export default function ContractDetailPage() {
   const isContainer = contract.freightType === "CONTAINER";
   const isActive = contract.status === "CONTRACT_ACTIVE";
   const awaitingPayment = contract.status === "FULLY_EXECUTED";
-  const poolLines = pool ?? [];
   const showPool = contract.status !== "DRAFT";
 
-  // Overall utilization across every pool line — drives the header ring + stat.
-  const totals = useMemo(() => {
-    const contracted = poolLines.reduce(
-      (s, l) => s + (l.contractedQuantity || 0),
-      0,
-    );
-    const ordered = poolLines.reduce((s, l) => s + (l.orderedQuantity || 0), 0);
-    const pct = contracted > 0 ? Math.round((ordered / contracted) * 100) : 0;
-    return { contracted, ordered, pct };
-  }, [poolLines]);
-
   return (
     <Box style={{ padding: "28px 32px 40px" }}>
       <Stack gap="lg">