diff --git a/src/Web/StellaOps.Web/src/app/features/topology/topology-graph-page.component.ts b/src/Web/StellaOps.Web/src/app/features/topology/topology-graph-page.component.ts
index 86c144d13..46c1794f4 100644
--- a/src/Web/StellaOps.Web/src/app/features/topology/topology-graph-page.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/topology/topology-graph-page.component.ts
@@ -44,7 +44,7 @@ import { TopologyTarget, TopologyHost } from './topology.models';
             <span>{{ layout()?.metadata?.promotionPathCount ?? 0 }} paths</span>
           </div>
           <app-topology-graph
-            [layout]="layout()"
+            [layout]="stageFilteredLayout()"
             (nodeSelected)="onNodeSelected($event)"
             (edgeSelected)="onEdgeSelected($event)"
           />
@@ -445,6 +445,36 @@ export class TopologyGraphPageComponent {
     return '';
   });
 
+  readonly stageFilteredLayout = computed((): TopologyLayoutResponse | null => {
+    const data = this.layout();
+    if (!data) return null;
+
+    const stage = this.context.stage();
+    if (!stage || stage === 'all') return data;
+
+    const matchedEnvIds = new Set<string>();
+    const matchedRegionIds = new Set<string>();
+
+    const filteredNodes = data.nodes.filter((n) => {
+      if (n.kind === 'region') return true;
+      const matches = n.environmentType === stage;
+      if (matches) {
+        matchedEnvIds.add(n.id);
+        if (n.parentNodeId) matchedRegionIds.add(n.parentNodeId);
+      }
+      return matches;
+    }).filter((n) => {
+      if (n.kind === 'region') return matchedRegionIds.has(n.id);
+      return true;
+    });
+
+    const filteredEdges = data.edges.filter(
+      (e) => matchedEnvIds.has(e.sourceNodeId) && matchedEnvIds.has(e.targetNodeId),
+    );
+
+    return { ...data, nodes: filteredNodes, edges: filteredEdges };
+  });
+
   constructor() {
     this.context.initialize();