diff --git a/src/routes/networks/NetworkGraphViewer.svelte b/src/routes/networks/NetworkGraphViewer.svelte
new file mode 100644
index 0000000..142b9ab
--- /dev/null
+++ b/src/routes/networks/NetworkGraphViewer.svelte
@@ -0,0 +1,832 @@
+<script lang="ts">
+	import { onMount, onDestroy } from "svelte";
+	import cytoscape from "cytoscape";
+	import {
+		Box,
+		Database,
+		Network,
+		ZoomIn,
+		ZoomOut,
+		Maximize2,
+		RotateCcw,
+		X,
+		ChevronDown,
+		Sun,
+		Moon,
+		LayoutGrid,
+		GitBranch,
+		Circle,
+		Target,
+		Sparkles,
+		Share2,
+		Server,
+		Globe,
+		MonitorSmartphone,
+		Cpu,
+		CircleOff,
+	} from "lucide-svelte";
+	import { Button } from "$lib/components/ui/button";
+	import { Input } from "$lib/components/ui/input";
+	import type { NetworkInfo } from "$lib/types";
+
+	interface Props {
+		networks: NetworkInfo[];
+		class?: string;
+	}
+
+	let { networks, class: className = "" }: Props = $props();
+
+	let containerEl: HTMLDivElement | null = $state(null);
+	let cy: cytoscape.Core | null = null;
+	let graphInitialized = $state(false);
+	let selectedNode = $state<any>(null);
+	let selectedEdge = $state<any>(null);
+
+	// Theme state
+	let graphTheme = $state<"light" | "dark">("light");
+
+	// Layout state
+	type LayoutType = "breadthfirst" | "grid" | "circle" | "concentric" | "cose";
+	let currentLayout = $state<LayoutType>("breadthfirst");
+	let showLayoutMenu = $state(false);
+
+	const layoutOptions: { value: LayoutType; label: string; icon: string }[] = [
+		{ value: "breadthfirst", label: "Tree", icon: "tree" },
+		{ value: "grid", label: "Grid", icon: "grid" },
+		{ value: "circle", label: "Circle", icon: "circle" },
+		{ value: "concentric", label: "Radial", icon: "radial" },
+		{ value: "cose", label: "Force", icon: "force" },
+	];
+
+	function buildGraphElements(nets: NetworkInfo[]) {
+		interface ContainerResult {
+			containerId: string;
+			containerName: string;
+			networks: {
+				ipv4: string;
+				netName: string;
+			}[];
+		}
+		const elements: cytoscape.ElementDefinition[] = [];
+		const networks = nets;
+
+		// Derive services from networks
+		const serviceMap = networks.reduce<Record<string, ContainerResult>>((svcs, network) => {
+			Object.entries(network.containers).forEach(([id, config]) => {
+				if (!svcs[id]) {
+					svcs[id] = {
+						containerId: id,
+						containerName: config.name,
+						networks: [],
+					};
+				}
+
+				svcs[id].networks.push({
+					ipv4: config.ipv4Address,
+					netName: network.name,
+				});
+			});
+
+			return svcs;
+		}, {});
+		const services = Object.values(serviceMap);
+
+		// Add service nodes
+		services.forEach((service) => {
+			elements.push({
+				data: {
+					id: `service-${service.containerName}`,
+					label: service.containerName,
+					caption: '',
+					type: "service",
+					config: service,
+				},
+			});
+		});
+
+		// Add network nodes
+		networks.forEach((network) => {
+			const driver = network.driver;
+			elements.push({
+				data: {
+					id: `network-${network.name}`,
+					label: network.name,
+					caption: driver,
+					type: "network",
+					driver: driver,
+					external: !network.internal,
+					config: network,
+				},
+			});
+		});
+
+		// Connect services to networks
+		services.forEach((service) => {
+			const serviceNetworks = service.networks;
+			if (serviceNetworks) {
+				serviceNetworks.forEach((network) => {
+					const netName = network.netName;
+					const foundName = networks.find((network) => network.name === netName);
+					if (foundName || netName === "default") {
+						const targetId = foundName ? `network-${netName}` : "network-default";
+						const defaultNet = networks.find((network) => network.name === "default");
+						if (netName === "default" && !defaultNet) {
+							const defaultExists = elements.find((e) => e.data.id === "network-default");
+							if (!defaultExists) {
+								elements.push({
+									data: {
+										id: "network-default",
+										label: "default",
+										type: "network",
+										driver: "bridge",
+										external: false,
+									},
+								});
+							}
+						}
+						elements.push({
+							data: {
+								id: `net-${service.containerName}-${netName}`,
+								source: `service-${service.containerName}`,
+								target: targetId,
+								type: "network-connection",
+							},
+						});
+					}
+				});
+			}
+		});
+
+		return elements;
+	}
+
+	// SVG icons as data URLs for nodes
+	function getSvgIcon(type: string, color: string): string {
+		const icons: Record<string, string> = {
+			service: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/></svg>`,
+			network: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="16" y="16" width="6" height="6" rx="1"/><rect x="2" y="16" width="6" height="6" rx="1"/><rect x="9" y="2" width="6" height="6" rx="1"/><path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3"/><path d="M12 12V8"/></svg>`,
+		};
+		const svg = icons[type] || icons.service;
+		return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+	}
+
+	function createGraph(useExistingData = false, skipLayout = false) {
+		if (!containerEl) return;
+
+		// Even if parsing failed, we get at least an empty structure to render
+		if (!networks) {
+			networks = [];
+		}
+
+		const elements = buildGraphElements(networks);
+
+		// If skipping layout, store current positions before destroying
+		let savedPositions: Map<string, { x: number; y: number }> | null = null;
+		if (skipLayout && cy) {
+			savedPositions = new Map();
+			cy.nodes().forEach((node) => {
+				const pos = node.position();
+				savedPositions!.set(node.id(), { x: pos.x, y: pos.y });
+			});
+		}
+
+		if (cy) {
+			cy.destroy();
+		}
+
+		// Theme-based colors
+		const isDark = graphTheme === "dark";
+		const colors = {
+			service: {
+				bg: isDark ? "#3b82f6" : "#dbeafe",
+				border: isDark ? "#2563eb" : "#93c5fd",
+				text: isDark ? "#ffffff" : "#1e3a5f",
+				icon: isDark ? "#ffffff" : "#2563eb",
+			},
+			network: {
+				bg: isDark ? "#8b5cf6" : "#ede9fe",
+				border: isDark ? "#7c3aed" : "#c4b5fd",
+				text: isDark ? "#ffffff" : "#3b1e5f",
+				icon: isDark ? "#ffffff" : "#7c3aed",
+			},
+			edge: isDark ? "#64748b" : "#94a3b8",
+			selected: isDark ? "#fbbf24" : "#18181b",
+			caption: isDark ? "rgba(255,255,255,0.7)" : "rgba(0,0,0,0.5)",
+		};
+
+		cy = cytoscape({
+			container: containerEl,
+			elements,
+			style: [
+				// Service nodes
+				{
+					selector: 'node[type="service"]',
+					style: {
+						"background-color": colors.service.bg,
+						"border-color": colors.service.border,
+						"border-width": 2,
+						label: (ele: any) => `${ele.data("label")}\n${ele.data("caption") || ""}`,
+						color: colors.service.text,
+						"text-valign": "center",
+						"text-halign": "center",
+						"font-size": "10px",
+						"font-weight": 600,
+						width: 150,
+						height: 55,
+						shape: "roundrectangle",
+						"text-wrap": "wrap",
+						"text-max-width": "115px",
+						"text-overflow-wrap": "anywhere",
+						"line-height": 1.2,
+						"background-image": getSvgIcon("service", colors.service.icon),
+						"background-width": "16px",
+						"background-height": "16px",
+						"background-position-x": "8px",
+						"background-position-y": "50%",
+						"background-clip": "none",
+						"text-margin-x": 10,
+					},
+				},
+				// Network nodes
+				{
+					selector: 'node[type="network"]',
+					style: {
+						"background-color": colors.network.bg,
+						"border-color": colors.network.border,
+						"border-width": 2,
+						label: (ele: any) => `${ele.data("label")}\nnetwork: ${ele.data("caption") || "bridge"}`,
+						color: colors.network.text,
+						"text-valign": "center",
+						"text-halign": "center",
+						"font-size": "9px",
+						"font-weight": 600,
+						width: 120,
+						height: 46,
+						shape: "roundrectangle",
+						"text-wrap": "wrap",
+						"text-max-width": "90px",
+						"text-overflow-wrap": "anywhere",
+						"line-height": 1.2,
+						"background-image": getSvgIcon("network", colors.network.icon),
+						"background-width": "14px",
+						"background-height": "14px",
+						"background-position-x": "6px",
+						"background-position-y": "50%",
+						"background-clip": "none",
+						"text-margin-x": 8,
+					},
+				},
+				// Link edges
+				{
+					selector: 'edge[type="link"]',
+					style: {
+						width: 2,
+						"line-color": "#64748b",
+						"target-arrow-color": "#64748b",
+						"target-arrow-shape": "triangle",
+						"curve-style": "bezier",
+						"line-style": "dashed",
+					},
+				},
+				// Network connection edges
+				{
+					selector: 'edge[type="network-connection"]',
+					style: {
+						width: 1.5,
+						"line-color": "#a78bfa",
+						"curve-style": "bezier",
+						"line-style": "dotted",
+					},
+				},
+				// Selected node
+				{
+					selector: "node:selected",
+					style: {
+						"border-width": 3,
+						"border-color": "#18181b",
+						"overlay-color": "#18181b",
+						"overlay-padding": 3,
+						"overlay-opacity": 0.15,
+					},
+				},
+				// Selected edge
+				{
+					selector: "edge:selected",
+					style: {
+						width: 3,
+						"line-color": "#f59e0b",
+						"target-arrow-color": "#f59e0b",
+					},
+				},
+				// Connection mode - highlight services
+				{
+					selector: "node.connection-source",
+					style: {
+						"border-width": 4,
+						"border-color": "#22c55e",
+						"overlay-color": "#22c55e",
+						"overlay-padding": 5,
+						"overlay-opacity": 0.3,
+					},
+				},
+				{
+					selector: "node.connection-target",
+					style: {
+						"border-color": "#3b82f6",
+						"border-width": 3,
+						"overlay-color": "#3b82f6",
+						"overlay-padding": 3,
+						"overlay-opacity": 0.2,
+					},
+				},
+			],
+			layout:
+				skipLayout && savedPositions
+					? { name: "preset" }
+					: {
+							name: "breadthfirst",
+							directed: true,
+							padding: 50,
+							spacingFactor: 1.5,
+							avoidOverlap: true,
+							nodeDimensionsIncludeLabels: true,
+						},
+			wheelSensitivity: 0.3,
+			minZoom: 0.3,
+			maxZoom: 3,
+		});
+
+		// Restore saved positions if skipping layout
+		if (skipLayout && savedPositions) {
+			cy.nodes().forEach((node) => {
+				const savedPos = savedPositions!.get(node.id());
+				if (savedPos) {
+					node.position(savedPos);
+				}
+			});
+		}
+
+		// Handle node selection
+		cy.on("tap", "node", (evt) => {
+			const nodeData = evt.target.data();
+			console.log("Node tapped:", nodeData);
+
+			selectedNode = nodeData;
+			selectedEdge = null;
+			console.log("selectedNode set to:", selectedNode);
+		});
+
+		// Handle edge selection
+		cy.on("tap", "edge", (evt) => {
+			selectedEdge = evt.target.data();
+			selectedNode = null;
+		});
+
+		cy.on("tap", (evt) => {
+			if (evt.target === cy) {
+				selectedNode = null;
+				selectedEdge = null;
+			}
+		});
+
+		graphInitialized = true;
+
+		// Ensure the graph renders correctly after container is sized
+		setTimeout(() => {
+			if (cy) {
+				cy.resize();
+				cy.fit(undefined, 50);
+			}
+		}, 100);
+	}
+
+	function zoomIn() {
+		if (cy) cy.zoom(cy.zoom() * 1.2);
+	}
+
+	function zoomOut() {
+		if (cy) cy.zoom(cy.zoom() / 1.2);
+	}
+
+	function fitToScreen() {
+		if (cy) cy.fit(undefined, 50);
+	}
+
+	// Exported function to handle container resize
+	export function resize() {
+		if (cy && containerEl) {
+			// Cytoscape caches container dimensions aggressively
+			// We need to unmount and remount to the container
+			cy!.unmount();
+
+			// Wait for DOM to update
+			requestAnimationFrame(() => {
+				if (cy && containerEl) {
+					cy!.mount(containerEl);
+					cy!.resize();
+					cy!.fit(undefined, 50);
+				}
+			});
+		}
+	}
+
+	function getLayoutConfig(layoutName: LayoutType): cytoscape.LayoutOptions {
+		const baseConfig = {
+			padding: 50,
+			avoidOverlap: true,
+			nodeDimensionsIncludeLabels: true,
+		};
+
+		switch (layoutName) {
+			case "breadthfirst":
+				return {
+					...baseConfig,
+					name: "breadthfirst",
+					directed: true,
+					spacingFactor: 1.5,
+				};
+			case "grid":
+				return {
+					...baseConfig,
+					name: "grid",
+					rows: undefined,
+					cols: undefined,
+				};
+			case "circle":
+				return {
+					...baseConfig,
+					name: "circle",
+					spacingFactor: 1.2,
+				};
+			case "concentric":
+				return {
+					...baseConfig,
+					name: "concentric",
+					minNodeSpacing: 50,
+					concentric: (node: any) => {
+						// Services at center, resources around
+						return node.data("type") === "service" ? 2 : 1;
+					},
+					levelWidth: () => 1,
+				};
+			case "cose":
+				return {
+					...baseConfig,
+					name: "cose",
+					idealEdgeLength: () => 100,
+					nodeOverlap: 20,
+					animate: true,
+					animationDuration: 500,
+				};
+			default:
+				return { ...baseConfig, name: layoutName };
+		}
+	}
+
+	function applyLayout(layoutName: LayoutType) {
+		if (!cy) return;
+		currentLayout = layoutName;
+		showLayoutMenu = false;
+		cy.layout(getLayoutConfig(layoutName)).run();
+		cy.fit(undefined, 50);
+	}
+
+	function resetLayout() {
+		if (cy) {
+			cy.layout(getLayoutConfig(currentLayout)).run();
+			cy.fit(undefined, 50);
+		}
+	}
+
+	onMount(() => {
+		// Follow app theme from localStorage
+		const appTheme = localStorage.getItem("theme");
+		if (appTheme === "dark" || appTheme === "light") {
+			graphTheme = appTheme;
+		} else {
+			// Fallback to system preference
+			graphTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+		}
+	});
+
+	// Create graph when container element becomes available
+	$effect(() => {
+		if (containerEl && networks && !graphInitialized) {
+			createGraph();
+		}
+	});
+
+	onDestroy(() => {
+		if (cy) {
+			cy.destroy();
+			cy = null;
+		}
+	});
+
+	function toggleGraphTheme() {
+		graphTheme = graphTheme === "light" ? "dark" : "light";
+		createGraph(true); // Recreate graph with new theme, preserve local edits
+	}
+
+	function getNodeIcon(type: string) {
+		switch (type) {
+			case "service":
+				return Box;
+			case "network":
+				return Network;
+			default:
+				return Database;
+		}
+	}
+
+	function getNodeColor(type: string) {
+		switch (type) {
+			case "service":
+				return "bg-blue-500";
+			case "network":
+				return "bg-violet-500";
+			default:
+				return "bg-slate-500";
+		}
+	}
+</script>
+
+<div class="flex flex-col h-full {className}">
+	<!-- Toolbar -->
+	<div class="flex items-center justify-between px-2 py-1.5 border-b border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 min-h-[40px]">
+		<div class="flex items-center gap-2 flex-wrap"></div>
+		<!-- Controls -->
+		<div class="flex items-center gap-0.5">
+			<!-- Layout selector -->
+			<div class="relative">
+				<button
+					onclick={() => (showLayoutMenu = !showLayoutMenu)}
+					class="h-6 px-2 flex items-center gap-1 rounded text-xs text-zinc-600 dark:text-zinc-300 hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors"
+					title="Change layout"
+				>
+					{#if currentLayout === "breadthfirst"}
+						<GitBranch class="w-3 h-3" />
+					{:else if currentLayout === "grid"}
+						<LayoutGrid class="w-3 h-3" />
+					{:else if currentLayout === "circle"}
+						<Circle class="w-3 h-3" />
+					{:else if currentLayout === "concentric"}
+						<Target class="w-3 h-3" />
+					{:else}
+						<Sparkles class="w-3 h-3" />
+					{/if}
+					<ChevronDown class="w-3 h-3" />
+				</button>
+				{#if showLayoutMenu}
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div
+						class="absolute right-0 top-full mt-1 bg-white dark:bg-zinc-800 rounded-lg shadow-lg border border-zinc-200 dark:border-zinc-700 py-1 z-20 min-w-[120px]"
+						onmouseleave={() => (showLayoutMenu = false)}
+					>
+						<button
+							class="w-full px-3 py-1.5 text-left text-xs flex items-center gap-2 hover:bg-zinc-100 dark:hover:bg-zinc-700 {currentLayout === 'breadthfirst'
+								? 'text-blue-600 dark:text-blue-400 font-medium'
+								: 'text-zinc-700 dark:text-zinc-200'}"
+							onclick={() => applyLayout("breadthfirst")}
+						>
+							<GitBranch class="w-3.5 h-3.5" />
+							Tree
+						</button>
+						<button
+							class="w-full px-3 py-1.5 text-left text-xs flex items-center gap-2 hover:bg-zinc-100 dark:hover:bg-zinc-700 {currentLayout === 'grid'
+								? 'text-blue-600 dark:text-blue-400 font-medium'
+								: 'text-zinc-700 dark:text-zinc-200'}"
+							onclick={() => applyLayout("grid")}
+						>
+							<LayoutGrid class="w-3.5 h-3.5" />
+							Grid
+						</button>
+						<button
+							class="w-full px-3 py-1.5 text-left text-xs flex items-center gap-2 hover:bg-zinc-100 dark:hover:bg-zinc-700 {currentLayout === 'circle'
+								? 'text-blue-600 dark:text-blue-400 font-medium'
+								: 'text-zinc-700 dark:text-zinc-200'}"
+							onclick={() => applyLayout("circle")}
+						>
+							<Circle class="w-3.5 h-3.5" />
+							Circle
+						</button>
+						<button
+							class="w-full px-3 py-1.5 text-left text-xs flex items-center gap-2 hover:bg-zinc-100 dark:hover:bg-zinc-700 {currentLayout === 'concentric'
+								? 'text-blue-600 dark:text-blue-400 font-medium'
+								: 'text-zinc-700 dark:text-zinc-200'}"
+							onclick={() => applyLayout("concentric")}
+						>
+							<Target class="w-3.5 h-3.5" />
+							Radial
+						</button>
+						<button
+							class="w-full px-3 py-1.5 text-left text-xs flex items-center gap-2 hover:bg-zinc-100 dark:hover:bg-zinc-700 {currentLayout === 'cose'
+								? 'text-blue-600 dark:text-blue-400 font-medium'
+								: 'text-zinc-700 dark:text-zinc-200'}"
+							onclick={() => applyLayout("cose")}
+						>
+							<Sparkles class="w-3.5 h-3.5" />
+							Force
+						</button>
+					</div>
+				{/if}
+			</div>
+			<div class="w-px h-4 bg-zinc-300 dark:bg-zinc-600 mx-1"></div>
+			<!-- Theme toggle -->
+			<button
+				onclick={toggleGraphTheme}
+				class="h-6 w-6 flex items-center justify-center rounded text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors"
+				title={graphTheme === "light" ? "Switch to dark theme" : "Switch to light theme"}
+			>
+				{#if graphTheme === "light"}
+					<Moon class="w-3.5 h-3.5" />
+				{:else}
+					<Sun class="w-3.5 h-3.5" />
+				{/if}
+			</button>
+			<div class="w-px h-4 bg-zinc-300 dark:bg-zinc-600 mx-1"></div>
+			<Button variant="ghost" size="sm" onclick={zoomOut} class="h-6 w-6 p-0 text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200">
+				<ZoomOut class="w-3.5 h-3.5" />
+			</Button>
+			<Button variant="ghost" size="sm" onclick={zoomIn} class="h-6 w-6 p-0 text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200">
+				<ZoomIn class="w-3.5 h-3.5" />
+			</Button>
+			<Button variant="ghost" size="sm" onclick={fitToScreen} class="h-6 w-6 p-0 text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200">
+				<Maximize2 class="w-3.5 h-3.5" />
+			</Button>
+			<Button variant="ghost" size="sm" onclick={resetLayout} class="h-6 w-6 p-0 text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200">
+				<RotateCcw class="w-3.5 h-3.5" />
+			</Button>
+		</div>
+	</div>
+
+	<div class="flex-1 flex min-h-0 h-full">
+		<!-- Graph container -->
+		<div class="flex-1 relative h-full {graphTheme === 'dark' ? 'bg-zinc-900' : 'bg-zinc-100'}">
+			<div bind:this={containerEl} class="w-full h-full"></div>
+
+			<!-- Footer: Legend -->
+			<div class="absolute bottom-2 left-2 pointer-events-none z-10">
+				<div
+					class="flex items-center gap-2 text-xs bg-white/80 dark:bg-zinc-800/80 backdrop-blur-sm rounded px-2 py-1 shadow-sm border border-zinc-200/50 dark:border-zinc-700/50 whitespace-nowrap"
+				>
+					<div class="flex items-center gap-1 flex-shrink-0">
+						<div class="w-2 h-2 rounded-sm bg-blue-500 flex-shrink-0"></div>
+						<span class="text-zinc-600 dark:text-zinc-300">Service</span>
+					</div>
+					<div class="flex items-center gap-1 flex-shrink-0">
+						<div class="w-2 h-2 rounded-sm bg-violet-500 flex-shrink-0"></div>
+						<span class="text-zinc-600 dark:text-zinc-300">Network</span>
+					</div>
+				</div>
+			</div>
+			<!-- Details panel (overlay) -->
+			{#if selectedNode || selectedEdge}
+				<div class="absolute top-0 right-0 bottom-0 w-[420px] border-l border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/95 shadow-lg z-20 flex flex-col">
+					<!-- Sticky header -->
+					{#if selectedNode}
+						{@const NodeIcon = getNodeIcon(selectedNode.type)}
+						<div class="sticky top-0 z-10 p-3 border-b border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/95">
+							<div class="flex items-center justify-between">
+								<div class="flex items-center gap-2">
+									<div class="p-1.5 rounded {getNodeColor(selectedNode.type)}">
+										<NodeIcon class="w-3.5 h-3.5 text-white" />
+									</div>
+									<div>
+										<h3 class="font-semibold text-sm text-zinc-800 dark:text-zinc-100">
+											{selectedNode.label}
+										</h3>
+										<p class="text-xs text-zinc-500 dark:text-zinc-400 capitalize">
+											{selectedNode.type}
+										</p>
+									</div>
+								</div>
+								<div class="flex items-center gap-1">
+									<Button
+										variant="ghost"
+										size="sm"
+										class="h-6 w-6 p-0 text-zinc-500 hover:text-zinc-600 hover:bg-zinc-100 dark:hover:bg-zinc-700"
+										onclick={() => {
+											selectedNode = null;
+											selectedEdge = null;
+										}}
+										title="Close"
+									>
+										<X class="w-3.5 h-3.5" />
+									</Button>
+								</div>
+							</div>
+						</div>
+					{:else if selectedEdge}
+						<!-- Sticky header for edge -->
+						<div class="sticky top-0 z-10 p-3 border-b border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/95">
+							<div class="flex items-center justify-between">
+								<div>
+									<h3 class="font-semibold text-sm text-zinc-800 dark:text-zinc-100 capitalize">
+										{selectedEdge.type.replace("-", " ")}
+									</h3>
+									<p class="text-xs text-zinc-500 dark:text-zinc-400">
+										{selectedEdge.source.replace(/^(service|network)-/, "")}
+										→
+										{selectedEdge.target.replace(/^(service|network)-/, "")}
+									</p>
+								</div>
+								<div class="flex items-center gap-1">
+									<Button
+										variant="ghost"
+										size="sm"
+										class="h-6 w-6 p-0 text-zinc-500 hover:text-zinc-600 hover:bg-zinc-100 dark:hover:bg-zinc-700"
+										onclick={() => {
+											selectedNode = null;
+											selectedEdge = null;
+										}}
+										title="Close"
+									>
+										<X class="w-3.5 h-3.5" />
+									</Button>
+								</div>
+							</div>
+						</div>
+					{/if}
+					<!-- Scrollable content -->
+					<div class="flex-1 overflow-y-auto p-3">
+						{#if selectedNode}
+							{#if selectedNode.type === "service"}
+								<div class="space-y-3 text-sm">
+									<!-- Container Id -->
+									<div class="space-y-1.5">
+										<div class="flex items-center justify-between">
+											<span class="text-xs font-medium text-zinc-600 dark:text-zinc-300">Container Id</span>
+										</div>
+										<Input value={selectedNode.config.containerId} placeholder="containerId" class="h-8 text-xs" readonly />
+									</div>
+								</div>
+							{:else if selectedNode.type === "network"}
+								<div class="space-y-3 text-sm">
+									<!-- Driver -->
+									<div class="space-y-1.5">
+										<span class="text-xs font-medium text-zinc-600 dark:text-zinc-300">Driver</span>
+										<!-- Simulate the select element -->
+										<div class="flex items-center justify-between w-fit h-8 px-3 py-2 text-xs border rounded-md border-input bg-background shadow-sm dark:bg-input/30">
+											<span class="flex items-center gap-1.5">
+												{#if selectedNode.config.driver === "bridge"}
+													<Share2 class="w-3.5 h-3.5 text-emerald-500" />
+												{:else if selectedNode.config.driver === "host"}
+													<Server class="w-3.5 h-3.5 text-sky-500" />
+												{:else if selectedNode.config.driver === "overlay"}
+													<Globe class="w-3.5 h-3.5 text-violet-500" />
+												{:else if selectedNode.config.driver === "macvlan"}
+													<MonitorSmartphone class="w-3.5 h-3.5 text-amber-500" />
+												{:else if selectedNode.config.driver === "ipvlan"}
+													<Cpu class="w-3.5 h-3.5 text-orange-500" />
+												{:else}
+													<CircleOff class="w-3.5 h-3.5 text-muted-foreground" />
+												{/if}
+												<span class="capitalize">{selectedNode.config.driver}</span>
+											</span>
+										</div>
+									</div>
+
+									<!-- IPAM Config -->
+									<div class="space-y-1.5">
+										<span class="text-xs font-medium text-zinc-600 dark:text-zinc-300">IPAM configuration</span>
+										<div class="space-y-4 pt-2">
+											<div class="relative">
+												<span class="absolute -top-2 left-2 text-[9px] text-zinc-400 bg-white dark:bg-zinc-800 px-1 z-10">Subnet</span>
+												<Input value={selectedNode.config.ipam?.config?.[0].subnet} placeholder="172.20.0.0/16" class="h-9 pt-3 text-xs" readonly />
+											</div>
+											<div class="relative">
+												<span class="absolute -top-2 left-2 text-[9px] text-zinc-400 bg-white dark:bg-zinc-800 px-1 z-10">Gateway</span>
+												<Input value={selectedNode.config.ipam?.config?.[0].gateway} placeholder="172.20.0.1" class="h-9 pt-3 text-xs" readonly />
+											</div>
+										</div>
+									</div>
+
+									<!-- Boolean flags -->
+									<div class="space-y-2 pointer-events-none select-none">
+										<label class="flex items-center gap-2 cursor-pointer">
+											<input type="checkbox" bind:checked={selectedNode.config.external} class="rounded border-zinc-300" />
+											<span class="text-xs text-zinc-600">External network</span>
+										</label>
+										<label class="flex items-center gap-2 cursor-pointer">
+											<input type="checkbox" bind:checked={selectedNode.config.internal} class="rounded border-zinc-300" />
+											<span class="text-xs text-zinc-600">Internal network</span>
+										</label>
+										<label class="flex items-center gap-2 cursor-pointer">
+											<input type="checkbox" bind:checked={selectedNode.config.attachable} class="rounded border-zinc-300" />
+											<span class="text-xs text-zinc-600">Attachable</span>
+										</label>
+									</div>
+								</div>
+							{/if}
+						{:else if selectedEdge}
+							{#if selectedEdge.type === "network-connection"}
+								<p class="text-xs text-zinc-500 dark:text-zinc-400">Service connected to this network.</p>
+							{/if}
+						{/if}
+					</div>
+				</div>
+			{/if}
+		</div>
+	</div>
+</div>