diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/deployment-network-view.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/deployment-network-view.tsx
index 1ef510e368..aa28aebd5a 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/deployment-network-view.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/deployment-network-view.tsx
@@ -1,11 +1,14 @@
 "use client";
 import { trpc } from "@/lib/trpc/client";
-import { useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useDeployment } from "../layout-provider";
 import {
+  COLLAPSE_THRESHOLD,
+  DEFAULT_NODE_HEIGHT,
+  DEFAULT_NODE_WIDTH,
   type DeploymentNode,
   InfiniteCanvas,
-  InstanceNode,
+  type InstanceNode as InstanceNodeType,
   InternalDevTreeGenerator,
   LiveIndicator,
   NodeDetailsPanel,
@@ -21,6 +24,7 @@ import {
   isSentinelNode,
   isSkeletonNode,
 } from "./unkey-flow";
+import { InstanceNode } from "./unkey-flow/components/nodes/instance-node";
 
 interface DeploymentNetworkViewProps {
   showProjectDetails?: boolean;
@@ -34,6 +38,8 @@ export function DeploymentNetworkView({
   const { deployment } = useDeployment();
   const [generatedTree, setGeneratedTree] = useState<DeploymentNode | null>(null);
   const [selectedNode, setSelectedNode] = useState<DeploymentNode | null>(null);
+  const [collapsedSentinelIds, setCollapsedSentinelIds] = useState<Set<string>>(new Set());
+  const hasAutoCollapsed = useRef(false);
 
   const { data: defaultTree, isLoading } = trpc.deploy.network.get.useQuery(
     {
@@ -45,6 +51,140 @@ export function DeploymentNetworkView({
   const currentTree = generatedTree ?? defaultTree ?? SKELETON_TREE;
   const isShowingSkeleton = isLoading && !generatedTree;
 
+  const toggleSentinel = useCallback((id: string) => {
+    setCollapsedSentinelIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  }, []);
+
+  useEffect(() => {
+    if (hasAutoCollapsed.current || !defaultTree) {
+      return;
+    }
+    hasAutoCollapsed.current = true;
+    const toCollapse = new Set<string>();
+    if (isOriginNode(defaultTree)) {
+      for (const child of defaultTree.children ?? []) {
+        if (
+          isSentinelNode(child) &&
+          (child.children ?? []).filter(isInstanceNode).length > COLLAPSE_THRESHOLD
+        ) {
+          toCollapse.add(child.id);
+        }
+      }
+    }
+    if (toCollapse.size > 0) {
+      setCollapsedSentinelIds(toCollapse);
+    }
+  }, [defaultTree]);
+
+  const { visibleTree, sentinelChildrenMap } = useMemo(() => {
+    const map = new Map<string, InstanceNodeType[]>();
+
+    function collapse(node: DeploymentNode): DeploymentNode {
+      if (isOriginNode(node)) {
+        return { ...node, children: node.children?.map((c) => collapse(c)) };
+      }
+      if (isSentinelNode(node)) {
+        const instanceChildren = (node.children ?? []).filter(isInstanceNode);
+        map.set(node.id, instanceChildren);
+
+        return collapsedSentinelIds.has(node.id) && instanceChildren.length > COLLAPSE_THRESHOLD
+          ? { ...node, children: instanceChildren.slice(0, 1) }
+          : node;
+      }
+      return node;
+    }
+
+    return { visibleTree: collapse(currentTree), sentinelChildrenMap: map };
+  }, [currentTree, collapsedSentinelIds]);
+
+  const renderDeploymentNode = useCallback(
+    (node: DeploymentNode, parent?: DeploymentNode): React.ReactNode => {
+      if (isSkeletonNode(node)) {
+        return <SkeletonNode />;
+      }
+
+      if (isOriginNode(node)) {
+        return <OriginNode node={node} />;
+      }
+
+      if (isSentinelNode(node)) {
+        return (
+          <SentinelNode
+            node={node}
+            deploymentId={deployment.id}
+            isCollapsed={collapsedSentinelIds.has(node.id)}
+            onToggleCollapse={isShowingSkeleton ? undefined : () => toggleSentinel(node.id)}
+          />
+        );
+      }
+
+      if (isInstanceNode(node)) {
+        if (!parent || !isSentinelNode(parent)) {
+          throw new Error("Instance node requires parent sentinel");
+        }
+        if (collapsedSentinelIds.has(parent.id)) {
+          const instances = sentinelChildrenMap.get(parent.id) ?? [];
+          const totalLayers = instances.length;
+          const step = 10;
+          const frontOffset = (totalLayers - 1) * step;
+          // pointer-events-none: stacked instances are not individually interactive
+          // users must expand the sentinel first via its toggle button
+          return (
+            <div
+              className="relative pointer-events-none"
+              style={{
+                height: frontOffset + DEFAULT_NODE_HEIGHT,
+                width: frontOffset + DEFAULT_NODE_WIDTH,
+              }}
+            >
+              {instances
+                .slice(1)
+                .reverse()
+                .map((inst, i) => (
+                  <div key={inst.id} className="absolute" style={{ top: i * step, left: i * step }}>
+                    <InstanceNode
+                      node={inst}
+                      flagCode={parent.metadata.flagCode}
+                      deploymentId={deployment.id}
+                      stacked
+                    />
+                  </div>
+                ))}
+              <div className="absolute" style={{ top: frontOffset, left: frontOffset }}>
+                <InstanceNode
+                  node={node}
+                  flagCode={parent.metadata.flagCode}
+                  deploymentId={deployment.id}
+                  stacked
+                />
+              </div>
+            </div>
+          );
+        }
+        return (
+          <InstanceNode
+            node={node}
+            flagCode={parent.metadata.flagCode}
+            deploymentId={deployment.id}
+          />
+        );
+      }
+
+      // This will yell at you if you don't handle a node type
+      const _exhaustive: never = node;
+      return _exhaustive;
+    },
+    [deployment.id, collapsedSentinelIds, toggleSentinel, isShowingSkeleton, sentinelChildrenMap],
+  );
+
   return (
     <InfiniteCanvas
       defaultZoom={0.85}
@@ -67,10 +207,10 @@ export function DeploymentNetworkView({
       }
     >
       <TreeLayout
-        data={currentTree}
+        data={visibleTree}
         nodeSpacing={{ x: 75, y: 100 }}
         onNodeClick={isShowingSkeleton ? undefined : (node) => setSelectedNode(node)}
-        renderNode={(node, parent) => renderDeploymentNode(node, parent, deployment.id)}
+        renderNode={renderDeploymentNode}
         renderConnection={(path, parent, child) => (
           <TreeConnectionLine key={`${parent.id}-${child.id}`} path={path} />
         )}
@@ -78,35 +218,3 @@ export function DeploymentNetworkView({
     </InfiniteCanvas>
   );
 }
-
-// renderDeployment function does not narrow types without type guards.
-function renderDeploymentNode(
-  node: DeploymentNode,
-  parent?: DeploymentNode,
-  deploymentId?: string,
-): React.ReactNode {
-  if (isSkeletonNode(node)) {
-    return <SkeletonNode />;
-  }
-
-  if (isOriginNode(node)) {
-    return <OriginNode node={node} />;
-  }
-
-  if (isSentinelNode(node)) {
-    return <SentinelNode node={node} deploymentId={deploymentId} />;
-  }
-
-  if (isInstanceNode(node)) {
-    if (!parent || !isSentinelNode(parent)) {
-      throw new Error("Instance node requires parent sentinel");
-    }
-    return (
-      <InstanceNode node={node} flagCode={parent.metadata.flagCode} deploymentId={deploymentId} />
-    );
-  }
-
-  // This will yell at you if you don't handle a node type
-  const _exhaustive: never = node;
-  return _exhaustive;
-}
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/nodes/index.ts b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/nodes/index.ts
index ddbb1decd8..c2244b1e91 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/nodes/index.ts
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/nodes/index.ts
@@ -7,9 +7,13 @@ export * from "./skeleton-node/skeleton-node";
 export * from "./origin-node";
 
 export {
+  COLLAPSE_THRESHOLD,
+  DEFAULT_NODE_HEIGHT,
+  DEFAULT_NODE_WIDTH,
   isOriginNode,
   isSentinelNode,
   isInstanceNode,
   isSkeletonNode,
   type DeploymentNode,
+  type InstanceNode,
 } from "./types";
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/nodes/instance-node.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/nodes/instance-node.tsx
index dfa1681d75..41af47ee2e 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/nodes/instance-node.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/nodes/instance-node.tsx
@@ -9,9 +9,10 @@ type InstanceNodeProps = {
   node: InstanceNodeType;
   flagCode: SentinelNodeType["metadata"]["flagCode"];
   deploymentId?: string;
+  stacked?: boolean;
 };
 
-export function InstanceNode({ node, flagCode, deploymentId }: InstanceNodeProps) {
+export function InstanceNode({ node, flagCode, deploymentId, stacked }: InstanceNodeProps) {
   const { cpu, memory, health } = node.metadata;
 
   const { data: rps } = trpc.deploy.network.getInstanceRps.useQuery(
@@ -19,13 +20,13 @@ export function InstanceNode({ node, flagCode, deploymentId }: InstanceNodeProps
       instanceId: node.id,
     },
     {
-      enabled: Boolean(deploymentId),
+      enabled: Boolean(deploymentId) && !stacked,
       refetchInterval: 5000,
     },
   );
 
   return (
-    <NodeWrapper health={health}>
+    <NodeWrapper health={health} showBanner={!stacked}>
       <CardHeader
         type="instance"
         icon={
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/nodes/node-wrapper/health-banner.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/nodes/node-wrapper/health-banner.tsx
index 8c8ae15210..6f53d922da 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/nodes/node-wrapper/health-banner.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/nodes/node-wrapper/health-banner.tsx
@@ -1,6 +1,5 @@
 import { cn } from "@unkey/ui/src/lib/utils";
 import { type HealthStatus, STATUS_CONFIG } from "../status/status-config";
-import { DEFAULT_NODE_WIDTH } from "../types";
 
 type HealthBannerProps = {
   healthStatus: HealthStatus;
@@ -17,7 +16,7 @@ export function HealthBanner({ healthStatus }: HealthBannerProps) {
   const Icon = config.icon;
 
   return (
-    <div className={`mx-auto w-[${DEFAULT_NODE_WIDTH}px] -m-[20px]`}>
+    <div className="w-full -mt-[20px] -mb-[20px]">
       <div
         className={cn(
           "h-12 border rounded-t-[14px]",
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/nodes/node-wrapper/node-wrapper.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/nodes/node-wrapper/node-wrapper.tsx
index e5da4bb74c..54a626d0f6 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/nodes/node-wrapper/node-wrapper.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/nodes/node-wrapper/node-wrapper.tsx
@@ -7,9 +7,10 @@ import { HealthBanner } from "./health-banner";
 
 type NodeWrapperProps = PropsWithChildren<{
   health: HealthStatus;
+  showBanner?: boolean;
 }>;
 
-export function NodeWrapper({ health, children }: NodeWrapperProps) {
+export function NodeWrapper({ health, children, showBanner = true }: NodeWrapperProps) {
   const isDisabled = health === "disabled";
   const { ring, glow } = getHealthStyles(health);
 
@@ -27,7 +28,7 @@ export function NodeWrapper({ health, children }: NodeWrapperProps) {
             ),
       )}
     >
-      <HealthBanner healthStatus={health} />
+      {showBanner && <HealthBanner healthStatus={health} />}
       <div
         className={cn(
           "w-[282px] h-[100px] border border-grayA-4 rounded-[14px] flex flex-col bg-white dark:bg-black shadow-[0_2px_8px_-2px_rgba(0,0,0,0.1)]",
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/nodes/sentinel-node.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/nodes/sentinel-node.tsx
index 0a88090633..c768b49716 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/nodes/sentinel-node.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/nodes/sentinel-node.tsx
@@ -1,18 +1,26 @@
 import { RegionFlag } from "@/app/(app)/[workspaceSlug]/projects/[projectId]/components/region-flag";
 import { trpc } from "@/lib/trpc/client";
+import { ChevronDown, ChevronUp, Layers3 } from "@unkey/icons";
 import { InfoTooltip } from "@unkey/ui";
 import { CardFooter } from "./components/card-footer";
 import { CardHeader } from "./components/card-header";
 import { NodeWrapper } from "./node-wrapper/node-wrapper";
-import { REGION_INFO, type SentinelNode as SentinelNodeType } from "./types";
+import { COLLAPSE_THRESHOLD, REGION_INFO, type SentinelNode as SentinelNodeType } from "./types";
 
 type SentinelNodeProps = {
   node: SentinelNodeType;
   deploymentId?: string;
+  isCollapsed?: boolean;
+  onToggleCollapse?: () => void;
 };
 
-export function SentinelNode({ node, deploymentId }: SentinelNodeProps) {
-  const { flagCode, cpu, memory, health, replicas } = node.metadata;
+export function SentinelNode({
+  node,
+  deploymentId,
+  isCollapsed,
+  onToggleCollapse,
+}: SentinelNodeProps) {
+  const { flagCode, cpu, memory, health, replicas, instances } = node.metadata;
 
   const { data: rps } = trpc.deploy.network.getSentinelRps.useQuery(
     {
@@ -31,24 +39,42 @@ export function SentinelNode({ node, deploymentId }: SentinelNodeProps) {
       : `${replicas} available ${replicas === 1 ? "replica" : "replicas"}`;
 
   return (
-    <NodeWrapper health={health}>
-      <CardHeader
-        type="sentinel"
-        icon={
-          <InfoTooltip
-            content={`AWS region ${node.label} (${regionInfo.location})`}
-            variant="primary"
-            className="px-2.5 py-1 rounded-[10px] bg-white dark:bg-blackA-12 text-xs z-30"
-            position={{ align: "center", side: "top", sideOffset: 5 }}
-          >
-            <RegionFlag flagCode={flagCode} size="md" shape="rounded" />
-          </InfoTooltip>
-        }
-        title={node.label}
-        subtitle={replicaText}
-        health={health}
-      />
-      <CardFooter type="sentinel" rps={rps} cpu={cpu} memory={memory} />
-    </NodeWrapper>
+    <div className="relative flex flex-col items-end">
+      <NodeWrapper health={health}>
+        <CardHeader
+          type="sentinel"
+          icon={
+            <InfoTooltip
+              content={`AWS region ${node.label} (${regionInfo.location})`}
+              variant="primary"
+              className="px-2.5 py-1 rounded-[10px] bg-white dark:bg-blackA-12 text-xs z-30"
+              position={{ align: "center", side: "top", sideOffset: 5 }}
+            >
+              <RegionFlag flagCode={flagCode} size="md" shape="rounded" />
+            </InfoTooltip>
+          }
+          title={node.label}
+          subtitle={replicaText}
+          health={health}
+        />
+        <CardFooter type="sentinel" rps={rps} cpu={cpu} memory={memory} />
+      </NodeWrapper>
+
+      {instances > COLLAPSE_THRESHOLD && onToggleCollapse && (
+        <button
+          onClick={onToggleCollapse}
+          className="mt-2 flex items-center gap-1.5 border border-grayA-4 bg-grayA-2 hover:bg-grayA-3 pl-2 pr-2.5 py-1 rounded-full text-xs text-gray-11 font-medium transition-colors shadow-sm"
+          type="button"
+        >
+          <Layers3 iconSize="sm-regular" className="text-gray-9" />
+          <span className="w-7 text-center">{isCollapsed ? "Show" : "Hide"}</span> instances
+          {isCollapsed ? (
+            <ChevronDown iconSize="sm-regular" className="text-gray-9" />
+          ) : (
+            <ChevronUp iconSize="sm-regular" className="text-gray-9" />
+          )}
+        </button>
+      )}
+    </div>
   );
 }
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/nodes/skeleton-node/skeleton-node.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/nodes/skeleton-node/skeleton-node.tsx
index 5648ae6276..a81c336369 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/nodes/skeleton-node/skeleton-node.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/nodes/skeleton-node/skeleton-node.tsx
@@ -1,9 +1,12 @@
-import { DEFAULT_NODE_WIDTH } from "../types";
+import { DEFAULT_NODE_HEIGHT, DEFAULT_NODE_WIDTH } from "../types";
 
 export const SkeletonNode = () => {
   return (
-    <div className={`relative rounded-[14px] w-[${DEFAULT_NODE_WIDTH}px]`}>
-      <div className="relative z-20 h-[100px] border border-grayA-4 rounded-[14px] flex flex-col bg-white dark:bg-black shadow-[0_2px_8px_-2px_rgba(0,0,0,0.1)]">
+    <div className="relative rounded-[14px]" style={{ width: DEFAULT_NODE_WIDTH }}>
+      <div
+        className="relative z-20 border border-grayA-4 rounded-[14px] flex flex-col bg-white dark:bg-black shadow-[0_2px_8px_-2px_rgba(0,0,0,0.1)]"
+        style={{ height: DEFAULT_NODE_HEIGHT }}
+      >
         {/* Header */}
         <div
           className="border-b border-grayA-4 rounded-t-[14px] px-3 py-2.5 flex"
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/nodes/types.ts b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/nodes/types.ts
index ec5c0be6c0..4391549989 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/nodes/types.ts
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/nodes/types.ts
@@ -81,6 +81,8 @@ const REGION_INFO: Record<SentinelNode["metadata"]["flagCode"], RegionInfo> = {
 } as const;
 
 const DEFAULT_NODE_WIDTH = 230;
+const DEFAULT_NODE_HEIGHT = 70;
+const COLLAPSE_THRESHOLD = 3;
 type NodeSize = { width: number; height: number };
 /**
  * Since our nodes are custom-made, we can optimize layout through static heights and widths.
@@ -88,9 +90,9 @@ type NodeSize = { width: number; height: number };
  */
 const NODE_SIZES: Record<DeploymentNode["metadata"]["type"], NodeSize> = {
   origin: { width: 70, height: 20 },
-  sentinel: { width: DEFAULT_NODE_WIDTH, height: 70 },
-  instance: { width: DEFAULT_NODE_WIDTH, height: 70 },
-  skeleton: { width: DEFAULT_NODE_WIDTH, height: 70 },
+  sentinel: { width: DEFAULT_NODE_WIDTH, height: DEFAULT_NODE_HEIGHT },
+  instance: { width: DEFAULT_NODE_WIDTH, height: DEFAULT_NODE_HEIGHT },
+  skeleton: { width: DEFAULT_NODE_WIDTH, height: DEFAULT_NODE_HEIGHT },
 } as const;
 
 export type {
@@ -109,6 +111,8 @@ export {
   isSentinelNode,
   isInstanceNode,
   isSkeletonNode,
+  COLLAPSE_THRESHOLD,
+  DEFAULT_NODE_HEIGHT,
   DEFAULT_NODE_WIDTH,
   REGION_INFO,
   NODE_SIZES,