diff --git a/apps/arc-web/app/routes/run-configuration.tsx b/apps/arc-web/app/routes/run-configuration.tsx
index 614b5936a..4ebdd239c 100644
--- a/apps/arc-web/app/routes/run-configuration.tsx
+++ b/apps/arc-web/app/routes/run-configuration.tsx
@@ -4,7 +4,7 @@ import { DocumentTextIcon, MapIcon } from "@heroicons/react/24/outline";
 import { CollapsibleFile } from "../components/collapsible-file";
 import { apiFetch, apiJson } from "../api-client";
 import { formatDurationSecs } from "../lib/format";
-import type { RunStage } from "@qltysh/arc-api-client";
+import type { PaginatedRunStageList } from "@qltysh/arc-api-client";
 import type { Route } from "./+types/run-configuration";
 
 export const handle = { wide: true };
@@ -26,8 +26,8 @@ const statusConfig: Record<StageStatus, { icon: typeof CheckCircleIcon; color: s
 };
 
 export async function loader({ request, params }: Route.LoaderArgs) {
-  const [apiStages, configRes] = await Promise.all([
-    apiJson<RunStage[]>(`/runs/${params.id}/stages`, { request }),
+  const [{ data: apiStages }, configRes] = await Promise.all([
+    apiJson<PaginatedRunStageList>(`/runs/${params.id}/stages`, { request }),
     apiFetch(`/runs/${params.id}/configuration`, { request }),
   ]);
   const stages: Stage[] = apiStages.map((s) => ({
diff --git a/apps/arc-web/app/routes/run-graph.tsx b/apps/arc-web/app/routes/run-graph.tsx
index 2c43ab7da..d7b79b088 100644
--- a/apps/arc-web/app/routes/run-graph.tsx
+++ b/apps/arc-web/app/routes/run-graph.tsx
@@ -7,7 +7,7 @@ import { useTheme } from "../lib/theme";
 import { getGraphTheme } from "../lib/graph-theme";
 import { apiFetch, apiJson } from "../api-client";
 import { formatDurationSecs } from "../lib/format";
-import type { RunStage } from "@qltysh/arc-api-client";
+import type { PaginatedRunStageList } from "@qltysh/arc-api-client";
 import type { Route } from "./+types/run-graph";
 
 export const handle = { wide: true };
@@ -23,8 +23,8 @@ interface Stage {
 }
 
 export async function loader({ request, params }: Route.LoaderArgs) {
-  const [apiStages, graphRes] = await Promise.all([
-    apiJson<RunStage[]>(`/runs/${params.id}/stages`, { request }),
+  const [{ data: apiStages }, graphRes] = await Promise.all([
+    apiJson<PaginatedRunStageList>(`/runs/${params.id}/stages`, { request }),
     apiFetch(`/runs/${params.id}/graph`, { request }),
   ]);
   const stages: Stage[] = apiStages.map((s) => ({
diff --git a/apps/arc-web/app/routes/run-overview.tsx b/apps/arc-web/app/routes/run-overview.tsx
index c28fe80e1..916cd35b0 100644
--- a/apps/arc-web/app/routes/run-overview.tsx
+++ b/apps/arc-web/app/routes/run-overview.tsx
@@ -7,7 +7,7 @@ import { useTheme } from "../lib/theme";
 import { getGraphTheme } from "../lib/graph-theme";
 import { apiJson } from "../api-client";
 import { formatDurationSecs } from "../lib/format";
-import type { RunStage, PaginatedRunList, WorkflowDetail } from "@qltysh/arc-api-client";
+import type { PaginatedRunStageList, PaginatedRunList, WorkflowDetail } from "@qltysh/arc-api-client";
 import type { Route } from "./+types/run-overview";
 
 export const handle = { wide: true };
@@ -22,8 +22,8 @@ interface Stage {
 }
 
 export async function loader({ request, params }: Route.LoaderArgs) {
-  const [apiStages, response] = await Promise.all([
-    apiJson<RunStage[]>(`/runs/${params.id}/stages`, { request }),
+  const [{ data: apiStages }, response] = await Promise.all([
+    apiJson<PaginatedRunStageList>(`/runs/${params.id}/stages`, { request }),
     apiJson<PaginatedRunList>("/runs", { request }),
   ]);
   const stages: Stage[] = apiStages.map((s) => ({