diff --git a/scripts/patch-build.ts b/scripts/patch-build.ts
index e10ecbc..df1b85a 100644
--- a/scripts/patch-build.ts
+++ b/scripts/patch-build.ts
@@ -54,6 +54,17 @@ var handleUpgrade = (request, bunServer) => {
 		}
 	}
 
+	// Handle terminal attach WebSocket
+	if (url.pathname.includes('/api/containers/') && url.pathname.includes('/attach')) {
+		const pathParts = url.pathname.split('/');
+		const containerIdIndex = pathParts.indexOf('containers') + 1;
+		const containerId = pathParts[containerIdIndex];
+		const envId = url.searchParams.get('envId') ? parseInt(url.searchParams.get('envId'), 10) : undefined;
+		if (bunServer.upgrade(request, { data: { type: 'terminal', mode: 'attach', containerId, envId } })) {
+			return new Response(null, { status: 101 });
+		}
+	}
+
 	// Handle Hawser Edge WebSocket
 	if (url.pathname === '/api/hawser/connect') {
 		if (bunServer.upgrade(request, { data: { type: 'hawser' } })) {
@@ -415,10 +426,11 @@ const combinedWebsocket = {
 		const connId = 'ws-' + (++_wsConnCounter);
 		ws.data = ws.data || {};
 		ws.data.connId = connId;
-		const { containerId, shell, user, envId } = ws.data;
+		const { containerId, shell, user, envId, mode } = ws.data;
 		if (!containerId) { ws.send(JSON.stringify({ type: 'error', message: 'No container ID' })); ws.close(); return; }
 		const target = await _getDockerTarget(envId);
-		console.log('[WS] Open:', connId, containerId, 'target:', target.type);
+		const isAttach = mode === 'attach';
+		console.log('[WS] Open:', connId, containerId, 'mode:', mode || 'exec', 'target:', target.type);
 
 		// Handle Hawser Edge terminal
 		if (target.type === 'hawser-edge') {
@@ -427,13 +439,32 @@ const combinedWebsocket = {
 			const execId = crypto.randomUUID();
 			_edgeExecSessions.set(execId, { ws, execId, environmentId: target.environmentId });
 			ws.data.edgeExecId = execId;
-			conn.ws.send(JSON.stringify({ type: 'exec_start', execId, containerId, cmd: shell || '/bin/sh', user: user || 'root', cols: 120, rows: 30 }));
+			if (isAttach) {
+				conn.ws.send(JSON.stringify({ type: 'attach', containerId, attachId: execId }));
+			} else {
+				conn.ws.send(JSON.stringify({ type: 'exec_start', execId, containerId, cmd: shell || '/bin/sh', user: user || 'root', cols: 120, rows: 30 }));
+			}
 			return;
 		}
 
 		try {
-			const exec = await createExec(containerId, [shell || '/bin/sh'], user || 'root', target);
-			const execId = exec.Id;
+			let execId;
+			let httpRequest;
+			
+			if (isAttach) {
+				// Attach directly to container streams
+				execId = crypto.randomUUID();
+				const tokenHeader = target.type === 'tcp' && target.hawserToken ? 'X-Hawser-Token: ' + target.hawserToken + '\\r\\n' : '';
+				httpRequest = 'POST /containers/' + containerId + '/attach?stream=1&stdout=1&stderr=1&stdin=1 HTTP/1.1\\r\\nHost: localhost\\r\\nContent-Type: application/json\\r\\n' + tokenHeader + 'Connection: Upgrade\\r\\nUpgrade: tcp\\r\\nContent-Length: 0\\r\\n\\r\\n';
+			} else {
+				// Create exec instance for shell
+				const exec = await createExec(containerId, [shell || '/bin/sh'], user || 'root', target);
+				execId = exec.Id;
+				const body = JSON.stringify({ Detach: false, Tty: true });
+				const tokenHeader = target.type === 'tcp' && target.hawserToken ? 'X-Hawser-Token: ' + target.hawserToken + '\\r\\n' : '';
+				httpRequest = 'POST /exec/' + execId + '/start HTTP/1.1\\r\\nHost: localhost\\r\\nContent-Type: application/json\\r\\n' + tokenHeader + 'Connection: Upgrade\\r\\nUpgrade: tcp\\r\\nContent-Length: ' + body.length + '\\r\\n\\r\\n' + body;
+			}
+			
 			let dockerStream;
 			let headersStripped = false;
 			let isChunked = false;
@@ -454,9 +485,7 @@ const combinedWebsocket = {
 				close() { if (ws.readyState === 1) { ws.send(JSON.stringify({ type: 'exit' })); ws.close(); } },
 				error() {},
 				open(socket) {
-					const body = JSON.stringify({ Detach: false, Tty: true });
-					const tokenHeader = target.type === 'tcp' && target.hawserToken ? 'X-Hawser-Token: ' + target.hawserToken + '\\r\\n' : '';
-					socket.write('POST /exec/' + execId + '/start HTTP/1.1\\r\\nHost: localhost\\r\\nContent-Type: application/json\\r\\n' + tokenHeader + 'Connection: Upgrade\\r\\nUpgrade: tcp\\r\\nContent-Length: ' + body.length + '\\r\\n\\r\\n' + body);
+					socket.write(httpRequest);
 				}
 			};
 			if (target.type === 'unix') {
diff --git a/src/lib/data/dependencies.json b/src/lib/data/dependencies.json
index 61afae1..732c300 100644
--- a/src/lib/data/dependencies.json
+++ b/src/lib/data/dependencies.json
@@ -5,12 +5,6 @@
     "license": "MIT",
     "repository": "https://github.com/codemirror/autocomplete"
   },
-  {
-    "name": "@codemirror/commands",
-    "version": "6.10.0",
-    "license": "MIT",
-    "repository": "https://github.com/codemirror/commands"
-  },
   {
     "name": "@codemirror/commands",
     "version": "6.10.1",
@@ -157,7 +151,7 @@
   },
   {
     "name": "@lezer/html",
-    "version": "1.3.12",
+    "version": "1.3.13",
     "license": "MIT",
     "repository": "https://github.com/lezer-parser/html"
   },
@@ -175,13 +169,13 @@
   },
   {
     "name": "@lezer/lr",
-    "version": "1.4.4",
+    "version": "1.4.7",
     "license": "MIT",
     "repository": "https://github.com/lezer-parser/lr"
   },
   {
     "name": "@lezer/markdown",
-    "version": "1.6.1",
+    "version": "1.6.3",
     "license": "MIT",
     "repository": "https://github.com/lezer-parser/markdown"
   },
@@ -235,7 +229,7 @@
   },
   {
     "name": "@types/node",
-    "version": "24.10.1",
+    "version": "25.0.7",
     "license": "MIT",
     "repository": "https://github.com/DefinitelyTyped/DefinitelyTyped"
   },
@@ -343,7 +337,7 @@
   },
   {
     "name": "devalue",
-    "version": "5.5.0",
+    "version": "5.6.1",
     "license": "MIT",
     "repository": "https://github.com/sveltejs/devalue"
   },
@@ -355,7 +349,7 @@
   },
   {
     "name": "dockhand",
-    "version": "1.0.3",
+    "version": "1.0.7",
     "license": "UNLICENSED",
     "repository": null
   },
@@ -553,7 +547,7 @@
   },
   {
     "name": "svelte",
-    "version": "5.46.1",
+    "version": "5.46.3",
     "license": "MIT",
     "repository": "https://github.com/sveltejs/svelte"
   },
@@ -589,7 +583,7 @@
   },
   {
     "name": "webidl-conversions",
-    "version": "8.0.0",
+    "version": "8.0.1",
     "license": "BSD-2-Clause",
     "repository": "https://github.com/jsdom/webidl-conversions"
   },
diff --git a/src/lib/server/docker.ts b/src/lib/server/docker.ts
index 050953e..fbe94e0 100644
--- a/src/lib/server/docker.ts
+++ b/src/lib/server/docker.ts
@@ -103,6 +103,7 @@ export interface ContainerInspectResult {
 		Hostname: string;
 		User: string;
 		Tty: boolean;
+		OpenStdin: boolean;
 		Env: string[];
 		Cmd: string[];
 		Image: string;
@@ -661,6 +662,7 @@ export interface ContainerInfo {
 	mounts: Array<{ type: string; source: string; destination: string; mode: string; rw: boolean }>;
 	labels: { [key: string]: string };
 	command: string;
+	attachable?: boolean
 }
 
 export interface ImageInfo {
@@ -682,6 +684,9 @@ export async function listContainers(all = true, envId?: number | null): Promise
 	const restartCounts = new Map<string, number>();
 	const restartingContainers = containers.filter(c => c.State === 'restarting');
 
+	const attachableMap = new Map<string, boolean>();
+	const runningContainers = containers.filter(c => c.State === 'running');
+
 	await Promise.all(
 		restartingContainers.map(async (container) => {
 			try {
@@ -693,6 +698,20 @@ export async function listContainers(all = true, envId?: number | null): Promise
 		})
 	);
 
+	await Promise.all(
+		runningContainers.map(async (container) => {
+			try {
+				const inspect = await inspectContainer(container.Id, envId);
+
+				const attachable = (inspect.Config.Tty && inspect.Config.OpenStdin) || false;
+
+				attachableMap.set(container.Id, attachable);
+			} catch (error) {
+				attachableMap.set(container.Id, false);
+			}
+		})
+	)
+
 	return containers.map((container) => {
 		// Extract network info with IP addresses
 		const networks: { [networkName: string]: { ipAddress: string } } = {};
@@ -736,7 +755,8 @@ export async function listContainers(all = true, envId?: number | null): Promise
 			restartCount: restartCounts.get(container.Id) || 0,
 			mounts,
 			labels: container.Labels || {},
-			command: container.Command || ''
+			command: container.Command || '',
+			attachable: attachableMap.get(container.Id) || false
 		};
 	});
 }
diff --git a/src/lib/server/subprocess-manager.ts b/src/lib/server/subprocess-manager.ts
index f29c770..1b30440 100644
--- a/src/lib/server/subprocess-manager.ts
+++ b/src/lib/server/subprocess-manager.ts
@@ -26,6 +26,13 @@ function getSubprocessPath(name: string): string {
 	if (existsSync(prodPath)) {
 		return prodPath;
 	}
+
+	// Local build path - when running built version locally
+	const localBuildPath = path.join(process.cwd(), 'build', 'subprocesses', `${name}.js`);
+	
+	if(existsSync(localBuildPath)) {
+		return localBuildPath;
+	}
 	// Development path (relative to this file) - raw TS files
 	return path.join(__dirname, 'subprocesses', `${name}.ts`);
 }
diff --git a/src/routes/api/containers/[id]/attach/+server.ts b/src/routes/api/containers/[id]/attach/+server.ts
new file mode 100644
index 0000000..fd03312
--- /dev/null
+++ b/src/routes/api/containers/[id]/attach/+server.ts
@@ -0,0 +1,38 @@
+import { authorize } from '$lib/server/authorize';
+import { getDockerConnectionInfo } from "$lib/server/docker";
+import { json } from "@sveltejs/kit";
+import type { RequestHandler } from "./$types";
+
+export const POST: RequestHandler = async ({ params, cookies, url }) => {
+    const auth = await authorize(cookies);
+
+    if (auth.authEnabled && !auth.isAuthenticated) {
+        return json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const containerId = params.id;
+    const envIdParam = url.searchParams.get("envId");
+    const envId = envIdParam ? parseInt(envIdParam, 10) : undefined;
+
+    // Permission check with environment context
+    if (!(await auth.can("containers", "attach", envId))) {
+        return json({ error: "Permission denied" }, { status: 403 });
+    }
+
+    try {
+        const connectionInfo = await getDockerConnectionInfo(envId);
+
+        return json({
+            containerId,
+            connectionInfo: {
+                type: connectionInfo.type,
+                host: connectionInfo.host,
+                port: connectionInfo.port,
+            },
+        });
+    } catch (error) {
+        console.error("Error attaching to container:", error);
+
+        return json({ error: "Failed to attach to container" }, { status: 500 });
+    }
+};
diff --git a/src/routes/attach/AttachPanel.svelte b/src/routes/attach/AttachPanel.svelte
new file mode 100644
index 0000000..0609d01
--- /dev/null
+++ b/src/routes/attach/AttachPanel.svelte
@@ -0,0 +1,188 @@
+<script lang="ts">
+	import { Copy, RefreshCw, Trash2, X } from 'lucide-svelte';
+	import { onDestroy, onMount } from 'svelte';
+	import AttachTerminal from './AttachTerminal.svelte';
+
+	interface Props {
+		containerId: string;
+		containerName: string;
+		visible: boolean;
+		envId: number | null;
+		fillHeight?: boolean;
+		onClose: () => void;
+	}
+
+	let { containerId, containerName, visible, envId, fillHeight = false, onClose }: Props = $props();
+
+	let attachComponent: ReturnType<typeof AttachTerminal>;
+	let panelRef: HTMLDivElement;
+	let connected = $state(false);
+
+	// Font size options
+	let fontSize = $state(13);
+	const fontSizeOptions = [10, 12, 13, 14, 16];
+
+	// Panel height with localStorage persistence
+	const STORAGE_KEY = 'dockhand-attach-panel-height';
+	const SETTINGS_STORAGE_KEY = 'dockhand-attach-settings';
+	const DEFAULT_HEIGHT = 300;
+	const MIN_HEIGHT = 150;
+	const MAX_HEIGHT = 600;
+
+	let panelHeight = $state(DEFAULT_HEIGHT);
+	let isDragging = $state(false);
+
+	// Load saved settings from localStorage
+	function loadSettings() {
+		if (typeof window !== 'undefined') {
+			// Load height
+			const savedHeight = localStorage.getItem(STORAGE_KEY);
+			if (savedHeight) {
+				const h = parseInt(savedHeight);
+				if (!isNaN(h) && h >= MIN_HEIGHT && h <= MAX_HEIGHT) {
+					panelHeight = h;
+				}
+			}
+			// Load other settings
+			const savedSettings = localStorage.getItem(SETTINGS_STORAGE_KEY);
+			if (savedSettings) {
+				try {
+					const settings = JSON.parse(savedSettings);
+					if (settings.fontSize !== undefined && fontSizeOptions.includes(settings.fontSize)) {
+						fontSize = settings.fontSize;
+					}
+				} catch {
+					// ignore parsing errors
+				}
+			}
+		}
+	}
+
+	// Save height to localStorage
+	function saveHeight() {
+		if (typeof window !== 'undefined') {
+			localStorage.setItem(STORAGE_KEY, String(panelHeight));
+		}
+	}
+
+	// Save settings to localStorage
+	function saveSettings() {
+		if (typeof window !== 'undefined') {
+			localStorage.setItem(
+				SETTINGS_STORAGE_KEY,
+				JSON.stringify({
+					fontSize
+				})
+			);
+		}
+	}
+
+	// Drag handle functionality
+	function startDrag(e: MouseEvent) {
+		e.preventDefault();
+		isDragging = true;
+		document.addEventListener('mousemove', handleDrag);
+		document.addEventListener('mouseup', stopDrag);
+	}
+
+	function handleDrag(e: MouseEvent) {
+		if (!isDragging || !panelRef) return;
+		const newHeight = window.innerHeight - e.clientY;
+		panelHeight = Math.max(MIN_HEIGHT, Math.min(MAX_HEIGHT, newHeight));
+	}
+
+	function stopDrag() {
+		isDragging = false;
+		document.removeEventListener('mousemove', handleDrag);
+		document.removeEventListener('mouseup', stopDrag);
+		saveHeight();
+		// Fit terminal after resize
+		setTimeout(() => attachComponent?.fit(), 50);
+	}
+
+	// Poll connected state
+	function pollConnected() {
+		if (attachComponent) {
+			connected = attachComponent.getConnected();
+		}
+	}
+
+	onMount(() => {
+		loadSettings();
+		const pollInterval = setInterval(pollConnected, 500);
+		return () => clearInterval(pollInterval);
+	});
+
+	onDestroy(() => {
+		document.removeEventListener('mousemove', handleDrag);
+		document.removeEventListener('mouseup', stopDrag);
+	});
+</script>
+
+<div
+	bind:this={panelRef}
+	class="border-t {isDragging ? 'cursor-row-resize' : ''}"
+	style={fillHeight ? 'height: 100%;' : `height: ${panelHeight}px;`}
+>
+	<div class="flex items-center justify-between h-9 px-3 py-1.5 border-b bg-muted/50 shrink-0">
+		<div class="flex items-center gap-2 min-w-0 flex-1">
+			<span class="text-xs font-medium truncate text-muted-foreground">Attach: {containerName}</span
+			>
+			{#if connected}
+				<span class="inline-flex items-center gap-1 text-xs text-green-500 whitespace-nowrap">
+					<span class="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse"></span>
+					Attached
+				</span>
+			{:else}
+				<span class="text-xs text-zinc-500 whitespace-nowrap">Detached</span>
+			{/if}
+		</div>
+		<div class="flex items-center gap-2 shrink-0">
+			<button
+				onclick={() => attachComponent?.copyOutput()}
+				title="Copy output"
+				class="p-1 rounded hover:bg-background transition-colors"
+			>
+				<Copy class="w-3.5 h-3.5 text-muted-foreground hover:text-foreground" />
+			</button>
+			<button
+				onclick={() => attachComponent?.clear()}
+				title="Clear"
+				class="p-1 rounded hover:bg-background transition-colors"
+			>
+				<Trash2 class="w-3.5 h-3.5 text-muted-foreground hover:text-foreground" />
+			</button>
+			<button
+				onclick={() => attachComponent?.reconnect()}
+				title="Reconnect"
+				class="p-1 rounded hover:bg-background transition-colors"
+			>
+				<RefreshCw class="w-3.5 h-3.5 text-muted-foreground hover:text-foreground" />
+			</button>
+			<button
+				onclick={onClose}
+				title="Close"
+				class="p-1 rounded hover:bg-background transition-colors"
+			>
+				<X class="w-3.5 h-3.5 text-muted-foreground hover:text-foreground" />
+			</button>
+		</div>
+	</div>
+
+	{#if !fillHeight}
+		<div
+			class="h-1 bg-border hover:bg-primary/30 cursor-row-resize transition-colors"
+			onmousedown={startDrag}
+		></div>
+	{/if}
+
+	<div class="flex-1 min-h-0 overflow-hidden">
+		<AttachTerminal bind:this={attachComponent} {containerId} {containerName} {envId} {fontSize} />
+	</div>
+</div>
+
+<style>
+	:global(.attach-terminal-container) {
+		height: 100%;
+	}
+</style>
diff --git a/src/routes/attach/AttachTerminal.svelte b/src/routes/attach/AttachTerminal.svelte
new file mode 100644
index 0000000..03519da
--- /dev/null
+++ b/src/routes/attach/AttachTerminal.svelte
@@ -0,0 +1,287 @@
+<script lang="ts">
+	import { themeStore } from '$lib/stores/theme';
+	import { getMonospaceFont } from '$lib/themes';
+	import { onDestroy, onMount } from 'svelte';
+
+	// Dynamic imports for browser-only xterm
+	let TerminalClass: any;
+	let FitAddon: any;
+	let WebLinksAddon: any;
+	let xtermLoaded = $state(false);
+
+	interface Props {
+		containerId: string;
+		containerName: string;
+		envId: number | null;
+		fontSize?: number;
+		autoConnect?: boolean;
+	}
+
+	let { containerId, containerName, envId, fontSize = 13, autoConnect = true }: Props = $props();
+
+	let terminal: any = null;
+	let fitAddon: any = null;
+	let ws: WebSocket | null = null;
+	let terminalRef: HTMLDivElement;
+
+	let connected = $state(false);
+	let error = $state<string | null>(null);
+
+	// Expose these via bindable props
+	export function getConnected() {
+		return connected;
+	}
+	export function getError() {
+		return error;
+	}
+
+	export function clear() {
+		terminal?.clear();
+		terminal?.focus();
+	}
+
+	export function focus() {
+		terminal?.focus();
+	}
+
+	export function fit() {
+		fitAddon?.fit();
+	}
+
+	export async function copyOutput(): Promise<string> {
+		if (!terminal) return '';
+		const buffer = terminal.buffer.active;
+		let text = '';
+		for (let i = 0; i < buffer.length; i++) {
+			const line = buffer.getLine(i);
+			if (line) {
+				text += line.translateToString(true) + '\n';
+			}
+		}
+		try {
+			await navigator.clipboard.writeText(text.trim());
+		} catch {
+			// Ignore clipboard errors
+		}
+		terminal.focus();
+		return text.trim();
+	}
+
+	export function setFontSize(size: number) {
+		if (terminal) {
+			terminal.options.fontSize = size;
+			fitAddon?.fit();
+		}
+	}
+
+	export function reconnect() {
+		if (ws) {
+			ws.close();
+			ws = null;
+		}
+		connected = false;
+		terminal?.writeln('\x1b[90m\r\nReconnecting...\x1b[0m');
+		connect();
+	}
+
+	export function disconnect() {
+		if (ws) {
+			ws.close();
+			ws = null;
+		}
+		connected = false;
+	}
+
+	export function dispose() {
+		if (ws) ws.close();
+		if (terminal) terminal.dispose();
+		ws = null;
+		terminal = null;
+		fitAddon = null;
+	}
+
+	function getTerminalFontFamily(): string {
+		const fontMeta = getMonospaceFont($themeStore.terminalFont);
+		return fontMeta?.family || 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace';
+	}
+
+	function initTerminal() {
+		if (!terminalRef || !xtermLoaded || terminal) return;
+
+		terminal = new TerminalClass({
+			cursorBlink: true,
+			fontFamily: getTerminalFontFamily(),
+			fontSize,
+			theme: {
+				background: '#0c0c0c',
+				foreground: '#cccccc',
+				cursor: '#ffffff',
+				cursorAccent: '#000000',
+				selectionBackground: '#264f78',
+				black: '#0c0c0c',
+				red: '#c50f1f',
+				green: '#13a10e',
+				yellow: '#c19c00',
+				blue: '#0037da',
+				magenta: '#881798',
+				cyan: '#3a96dd',
+				white: '#cccccc',
+				brightBlack: '#767676',
+				brightRed: '#e74856',
+				brightGreen: '#16c60c',
+				brightYellow: '#f9f1a5',
+				brightBlue: '#3b78ff',
+				brightMagenta: '#b4009e',
+				brightCyan: '#61d6d6',
+				brightWhite: '#f2f2f2'
+			}
+		});
+
+		fitAddon = new FitAddon();
+		terminal.loadAddon(fitAddon);
+		terminal.loadAddon(new WebLinksAddon());
+
+		terminal.open(terminalRef);
+		fitAddon.fit();
+
+		// Handle Ctrl+L to clear terminal
+		terminal.attachCustomKeyEventHandler((e: KeyboardEvent) => {
+			if ((e.ctrlKey || e.metaKey) && e.key === 'l') {
+				e.preventDefault();
+				clear();
+				return false;
+			}
+			return true;
+		});
+
+		// Handle terminal input
+		terminal.onData((data: string) => {
+			if (ws && ws.readyState === WebSocket.OPEN) {
+				ws.send(JSON.stringify({ type: 'input', data: data }));
+			}
+		});
+
+		// Handle resize
+		terminal.onResize(({ cols, rows }: { cols: number; rows: number }) => {
+			if (ws && ws.readyState === WebSocket.OPEN) {
+				ws.send(JSON.stringify({ type: 'resize', cols, rows }));
+			}
+		});
+
+		if (autoConnect) {
+			connect();
+		}
+	}
+
+	function connect() {
+		if (!terminal) return;
+
+		error = null;
+		const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+		const wsHost = window.location.hostname;
+		// In dev mode (vite), connect directly to the WS server on port 5174
+		// In production, connect to the same port as the app
+		const isDev = import.meta.env.DEV;
+		const portPart = isDev ? ':5174' : window.location.port ? `:${window.location.port}` : '';
+		let wsUrl = `${protocol}//${wsHost}${portPart}/api/containers/${containerId}/attach`;
+
+		if (envId) {
+			wsUrl += `?envId=${envId}`;
+		}
+
+		terminal.writeln(`\x1b[90mAttaching to ${containerName}...\x1b[0m`);
+		terminal.writeln('');
+
+		ws = new WebSocket(wsUrl);
+
+		ws.onopen = () => {
+			connected = true;
+			terminal?.focus();
+			if (fitAddon && terminal) {
+				const dims = fitAddon.proposeDimensions();
+				if (dims) {
+					ws?.send(JSON.stringify({ type: 'resize', cols: dims.cols, rows: dims.rows }));
+				}
+			}
+		};
+
+		ws.onmessage = (event) => {
+			try {
+				const msg = JSON.parse(event.data);
+				if (msg.type === 'output') {
+					terminal?.write(msg.data);
+				} else if (msg.type === 'error') {
+					error = msg.message;
+					terminal?.writeln(`\x1b[31mError: ${msg.message}\x1b[0m`);
+				} else if (msg.type === 'exit') {
+					terminal?.writeln('\x1b[90m\r\nAttachment ended.\x1b[0m');
+					connected = false;
+				}
+			} catch {
+				terminal?.write(event.data);
+			}
+		};
+
+		ws.onerror = () => {
+			error = 'Connection error';
+			terminal?.writeln('\x1b[31mConnection error\x1b[0m');
+		};
+
+		ws.onclose = () => {
+			connected = false;
+			terminal?.writeln('\x1b[90mDetached.\x1b[0m');
+		};
+	}
+
+	function handleResize() {
+		fitAddon?.fit();
+	}
+
+	$effect(() => {
+		if (xtermLoaded && terminalRef && !terminal) {
+			setTimeout(initTerminal, 50);
+		}
+	});
+
+	// Update font when terminal font preference changes
+	$effect(() => {
+		if (terminal && $themeStore.terminalFont) {
+			const fontFamily = getTerminalFontFamily();
+			terminal.options.fontFamily = fontFamily;
+			fitAddon?.fit();
+		}
+	});
+
+	onMount(async () => {
+		window.addEventListener('resize', handleResize);
+
+		const xtermModule = await import('@xterm/xterm');
+		const fitModule = await import('@xterm/addon-fit');
+		const webLinksModule = await import('@xterm/addon-web-links');
+
+		TerminalClass = xtermModule.Terminal || xtermModule.default?.Terminal;
+		FitAddon = fitModule.FitAddon || fitModule.default?.FitAddon;
+		WebLinksAddon = webLinksModule.WebLinksAddon || webLinksModule.default?.WebLinksAddon;
+
+		await import('@xterm/xterm/css/xterm.css');
+		xtermLoaded = true;
+	});
+
+	onDestroy(() => {
+		window.removeEventListener('resize', handleResize);
+		dispose();
+	});
+</script>
+
+<div bind:this={terminalRef} class="h-full w-full terminal-container"></div>
+
+<style>
+	.terminal-container :global(.xterm) {
+		height: 100%;
+		padding: 4px;
+	}
+
+	.terminal-container :global(.xterm-viewport) {
+		overflow-y: auto !important;
+	}
+</style>
diff --git a/src/routes/attach/[id]/+page.svelte b/src/routes/attach/[id]/+page.svelte
new file mode 100644
index 0000000..b10badb
--- /dev/null
+++ b/src/routes/attach/[id]/+page.svelte
@@ -0,0 +1,340 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { appendEnvParam, currentEnvironment } from '$lib/stores/environment';
+	import type { ContainerInfo } from '$lib/types';
+	import { Terminal as TerminalIcon } from 'lucide-svelte';
+	import { onDestroy, onMount } from 'svelte';
+
+	// Dynamic imports for browser-only xterm
+	let Terminal: any;
+	let FitAddon: any;
+	let WebLinksAddon: any;
+	let xtermLoaded = $state(false);
+
+	let terminalRef = $state<HTMLDivElement | undefined>();
+	let terminal = $state<any>(null);
+	let fitAddon = $state<any>(null);
+	let ws = $state<WebSocket | null>(null);
+	let connected = $state(false);
+	let error = $state<string | null>(null);
+	let containerName = $state('');
+	let containerValid = $state(false);
+	let validationError = $state<string | null>(null);
+	let envId = $state<number | null>(null);
+	let containerInfo = $state<ContainerInfo | null>(null);
+
+	// Get params from URL
+	let containerId = $derived($page.params.id);
+	let name = $derived($page.url.searchParams.get('name') || 'Container');
+
+	// Subscribe to environment changes
+	currentEnvironment.subscribe((env) => {
+		envId = env?.id ?? null;
+		if (env) {
+			validateContainer();
+		}
+	});
+
+	// Check if container can be attached to
+	function canAttachToContainer(container: ContainerInfo): boolean {
+		// Container must be running
+		if (container.state !== 'running') {
+			return false;
+		}
+		return true;
+	}
+
+	// Get validation error message for a container
+	function getAttachValidationError(container: ContainerInfo): string | null {
+		if (container.state !== 'running') {
+			return `Container is ${container.state} (must be running)`;
+		}
+		return null;
+	}
+
+	async function validateContainer() {
+		try {
+			const response = await fetch(appendEnvParam(`/api/containers/${containerId}`, envId));
+			if (!response.ok) {
+				validationError = 'Container not found';
+				containerValid = false;
+				return;
+			}
+
+			const container = await response.json();
+			containerInfo = container;
+
+			if (!canAttachToContainer(container)) {
+				validationError = getAttachValidationError(container);
+				containerValid = false;
+			} else {
+				validationError = null;
+				containerValid = true;
+			}
+		} catch (err) {
+			console.error('Failed to validate container:', err);
+			validationError = 'Failed to validate container';
+			containerValid = false;
+		}
+	}
+
+	function initTerminal() {
+		if (!terminalRef || terminal || !xtermLoaded) return;
+
+		// Validate container before initializing terminal
+		if (!containerValid || !containerInfo) {
+			return;
+		}
+
+		containerName = containerInfo.name || name;
+
+		terminal = new Terminal({
+			cursorBlink: true,
+			fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+			fontSize: 14,
+			theme: {
+				background: '#0c0c0c',
+				foreground: '#cccccc',
+				cursor: '#ffffff',
+				cursorAccent: '#000000',
+				selectionBackground: '#264f78',
+				black: '#0c0c0c',
+				red: '#c50f1f',
+				green: '#13a10e',
+				yellow: '#c19c00',
+				blue: '#0037da',
+				magenta: '#881798',
+				cyan: '#3a96dd',
+				white: '#cccccc',
+				brightBlack: '#767676',
+				brightRed: '#e74856',
+				brightGreen: '#16c60c',
+				brightYellow: '#f9f1a5',
+				brightBlue: '#3b78ff',
+				brightMagenta: '#b4009e',
+				brightCyan: '#61d6d6',
+				brightWhite: '#f2f2f2'
+			}
+		});
+
+		fitAddon = new FitAddon();
+		terminal.loadAddon(fitAddon);
+		terminal.loadAddon(new WebLinksAddon());
+
+		terminal.open(terminalRef);
+		fitAddon.fit();
+
+		// Handle Ctrl+L to clear terminal
+		terminal.attachCustomKeyEventHandler((e: KeyboardEvent) => {
+			if ((e.ctrlKey || e.metaKey) && e.key === 'l') {
+				e.preventDefault();
+				terminal?.clear();
+				return false;
+			}
+			return true;
+		});
+
+		// Handle terminal input
+		terminal.onData((data: string) => {
+			if (ws && ws.readyState === WebSocket.OPEN) {
+				ws.send(JSON.stringify({ type: 'input', data }));
+			}
+		});
+
+		// Handle resize
+		terminal.onResize(({ cols, rows }: { cols: number; rows: number }) => {
+			if (ws && ws.readyState === WebSocket.OPEN) {
+				ws.send(JSON.stringify({ type: 'resize', cols, rows }));
+			}
+		});
+
+		// Connect to container
+		connect();
+	}
+
+	function connect() {
+		if (!terminal || !containerValid) return;
+
+		error = null;
+		const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+		const isDev = import.meta.env.DEV;
+		const wsHost = window.location.hostname;
+		const portPart = isDev ? ':5174' : window.location.port ? `:${window.location.port}` : '';
+		let wsUrl = `${protocol}//${wsHost}${portPart}/api/containers/${containerId}/attach`;
+		if (envId) {
+			wsUrl += `?envId=${envId}`;
+		}
+
+		terminal.writeln(`\x1b[90mAttaching to ${containerName}...\x1b[0m`);
+		terminal.writeln(`\x1b[90mContainer: ${containerInfo?.image || 'unknown'}\x1b[0m`);
+		terminal.writeln('');
+
+		ws = new WebSocket(wsUrl);
+
+		ws.onopen = () => {
+			connected = true;
+			document.title = `Attach - ${containerName}`;
+			terminal?.focus();
+			// Send initial resize
+			if (fitAddon && terminal) {
+				const dims = fitAddon.proposeDimensions();
+				if (dims) {
+					ws?.send(JSON.stringify({ type: 'resize', cols: dims.cols, rows: dims.rows }));
+				}
+			}
+		};
+
+		ws.onmessage = (event) => {
+			try {
+				const msg = JSON.parse(event.data);
+				if (msg.type === 'output') {
+					terminal?.write(msg.data);
+				} else if (msg.type === 'error') {
+					error = msg.message;
+					terminal?.writeln(`\x1b[31mError: ${msg.message}\x1b[0m`);
+				} else if (msg.type === 'exit') {
+					terminal?.writeln('\x1b[90m\r\nAttachment ended.\x1b[0m');
+					connected = false;
+				}
+			} catch (e) {
+				terminal?.write(event.data);
+			}
+		};
+
+		ws.onerror = (e) => {
+			console.error('WebSocket error:', e);
+			error = 'Connection error';
+			terminal?.writeln('\x1b[31mConnection error\x1b[0m');
+		};
+
+		ws.onclose = () => {
+			connected = false;
+			terminal?.writeln('\x1b[90mDetached.\x1b[0m');
+		};
+	}
+
+	function disconnect() {
+		if (ws) {
+			ws.close();
+			ws = null;
+		}
+	}
+
+	function cleanup() {
+		disconnect();
+		if (terminal) {
+			terminal.dispose();
+			terminal = null;
+		}
+		fitAddon = null;
+	}
+
+	// Handle window resize
+	function handleResize() {
+		if (fitAddon && terminal) {
+			fitAddon.fit();
+		}
+	}
+
+	onMount(async () => {
+		window.addEventListener('resize', handleResize);
+
+		// Validate container immediately
+		await validateContainer();
+
+		// Dynamically load xterm modules (browser only)
+		const xtermModule = await import('@xterm/xterm');
+		const fitModule = await import('@xterm/addon-fit');
+		const webLinksModule = await import('@xterm/addon-web-links');
+
+		// Handle both ESM and CommonJS exports
+		Terminal = xtermModule.Terminal || xtermModule.default?.Terminal;
+		FitAddon = fitModule.FitAddon || fitModule.default?.FitAddon;
+		WebLinksAddon = webLinksModule.WebLinksAddon || webLinksModule.default?.WebLinksAddon;
+
+		// Load CSS
+		await import('@xterm/xterm/css/xterm.css');
+		xtermLoaded = true;
+
+		// Initialize terminal after xterm is loaded
+		setTimeout(() => {
+			initTerminal();
+		}, 100);
+	});
+
+	onDestroy(() => {
+		window.removeEventListener('resize', handleResize);
+		cleanup();
+	});
+</script>
+
+<svelte:head>
+	<title>Attach - {containerName || 'Loading...'}</title>
+</svelte:head>
+
+<div class="h-screen w-screen flex flex-col bg-[#0c0c0c]">
+	<!-- Header -->
+	<div
+		class="flex items-center justify-between px-4 py-2 bg-zinc-900 border-b border-zinc-800 shrink-0"
+	>
+		<div class="flex items-center gap-2">
+			<TerminalIcon class="w-4 h-4 text-zinc-400" />
+			<span class="text-sm text-zinc-200 font-medium">{containerName || containerId}</span>
+			{#if containerValid}
+				{#if connected}
+					<span class="inline-flex items-center gap-1 text-xs text-green-500">
+						<span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
+						Attached
+					</span>
+				{:else}
+					<span class="text-xs text-zinc-500">Connecting...</span>
+				{/if}
+			{:else if validationError}
+				<span class="text-xs text-red-500">{validationError}</span>
+			{:else}
+				<span class="text-xs text-zinc-500">Validating...</span>
+			{/if}
+		</div>
+		<div class="flex items-center gap-2 text-xs text-zinc-500">
+			<span>Attach Mode</span>
+		</div>
+	</div>
+
+	<!-- Terminal or Error message -->
+	<div class="flex-1 p-2 overflow-hidden flex flex-col">
+		{#if validationError}
+			<div class="flex items-center justify-center h-full">
+				<div class="text-center">
+					<TerminalIcon class="w-12 h-12 mx-auto mb-3 opacity-50 text-red-500" />
+					<p class="text-zinc-400 mb-2">{validationError}</p>
+					<p class="text-zinc-600 text-sm">
+						Go back to <a href="/attach" class="text-blue-500 hover:text-blue-400">attach</a> page
+					</p>
+				</div>
+			</div>
+		{:else if xtermLoaded && containerValid}
+			<div bind:this={terminalRef} class="h-full w-full"></div>
+		{:else}
+			<div class="h-full w-full flex items-center justify-center">
+				<span class="text-zinc-500">Loading...</span>
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	:global(body) {
+		margin: 0;
+		padding: 0;
+		overflow: hidden;
+	}
+
+	:global(.xterm) {
+		height: 100%;
+		padding: 8px;
+	}
+
+	:global(.xterm-viewport) {
+		overflow-y: auto !important;
+	}
+</style>
diff --git a/src/routes/containers/+page.svelte b/src/routes/containers/+page.svelte
index 5984f2e..8018400 100644
--- a/src/routes/containers/+page.svelte
+++ b/src/routes/containers/+page.svelte
@@ -51,9 +51,11 @@
 		ShieldX,
 		Shield,
 		ShieldCheck,
-		Box
+		Box,
+		Zap
 	} from 'lucide-svelte';
 	import { broom } from '@lucide/lab';
+	import AttachPanel from '../attach/AttachPanel.svelte';
 	import CreateContainerModal from './CreateContainerModal.svelte';
 	import EditContainerModal from './EditContainerModal.svelte';
 	import TerminalPanel from '../terminal/TerminalPanel.svelte';
@@ -206,11 +208,27 @@
 		user: string;
 	}
 	let activeTerminals = $state<ActiveTerminal[]>([]);
-	let currentTerminalContainerId = $state<string | null>(null);
 	let terminalPopoverStates = $state<Record<string, boolean>>({});
 	let terminalShell = $state('/bin/bash');
 	let terminalUser = $state('root');
 
+	// Attach state - track active attach sessions per container
+	interface ActiveAttach {
+		containerId: string;
+		containerName: string;
+	}
+	let activeAttach = $state<ActiveAttach[]>([]);
+
+	// Helper to check if container has active terminal
+	function hasActiveAttach(containerId: string): boolean {
+		return activeAttach.some(t => t.containerId === containerId);
+	}
+
+	// Helper to get active terminal
+	function getActiveAttach(containerId: string): ActiveAttach | undefined {
+		return activeAttach.find(t => t.containerId === containerId);
+	}
+
 	// Confirmation popover state
 	let confirmStopId = $state<string | null>(null);
 	let confirmRestartId = $state<string | null>(null);
@@ -524,7 +542,6 @@
 		containerName: string;
 	}
 	let activeLogs = $state<ActiveLogs[]>([]);
-	let currentLogsContainerId = $state<string | null>(null);
 
 	// Helper to check if container has active logs
 	function hasActiveLogs(containerId: string): boolean {
@@ -1017,8 +1034,7 @@
 		const existingTerminal = getActiveTerminal(container.id);
 		if (existingTerminal) {
 			// Just show the existing terminal
-			currentTerminalContainerId = container.id;
-			terminalPopoverStates[container.id] = false;
+			return;
 		} else {
 			// Show popover to configure new terminal
 			terminalPopoverStates[container.id] = true;
@@ -1026,6 +1042,11 @@
 	}
 
 	function startTerminal(container: ContainerInfo) {
+		// Check if we already have 2 active sessions
+		if (activeTerminals.length + activeAttach.length >= 2) {
+			toast.error('Maximum 2 terminal sessions allowed');
+			return;
+		}
 		// Create new terminal session
 		const terminal: ActiveTerminal = {
 			containerId: container.id,
@@ -1034,22 +1055,35 @@
 			user: terminalUser
 		};
 		activeTerminals = [...activeTerminals, terminal];
-		currentTerminalContainerId = container.id;
-		terminalPopoverStates[container.id] = false;
 	}
 
 	function closeTerminal(containerId: string) {
 		activeTerminals = activeTerminals.filter(t => t.containerId !== containerId);
-		if (currentTerminalContainerId === containerId) {
-			currentTerminalContainerId = null;
+	}
+
+	function startAttach(container: ContainerInfo) {
+		// Check if we already have 2 active sessions
+		if (activeTerminals.length + activeAttach.length >= 2) {
+			toast.error('Maximum 2 terminal sessions allowed');
+			return;
 		}
+		// Create new attach session - automatically open it
+		const attach: ActiveAttach = {
+			containerId: container.id,
+			containerName: container.name
+		};
+		activeAttach = [...activeAttach, attach];
+	}
+
+	function closeAttach(containerId: string) {
+		activeAttach = activeAttach.filter((a) => a.containerId !== containerId);
 	}
 
 	function showLogs(container: ContainerInfo) {
 		// Check if there's already active logs for this container
 		if (hasActiveLogs(container.id)) {
 			// Just show the existing logs
-			currentLogsContainerId = container.id;
+			return;
 		} else {
 			// Create new logs session
 			const logs: ActiveLogs = {
@@ -1057,33 +1091,15 @@
 				containerName: container.name
 			};
 			activeLogs = [...activeLogs, logs];
-			currentLogsContainerId = container.id;
 		}
 	}
 
 	function closeLogs(containerId: string) {
 		activeLogs = activeLogs.filter(l => l.containerId !== containerId);
-		if (currentLogsContainerId === containerId) {
-			currentLogsContainerId = null;
-		}
 	}
 
 	function selectContainer(container: ContainerInfo) {
-		// Handle logs - show if container has active logs, hide otherwise
-		if (hasActiveLogs(container.id)) {
-			currentLogsContainerId = container.id;
-		} else if (currentLogsContainerId) {
-			// Hide current logs but keep the session active
-			currentLogsContainerId = null;
-		}
-
-		// Handle terminal - show if container has active terminal, hide otherwise
-		if (hasActiveTerminal(container.id)) {
-			currentTerminalContainerId = container.id;
-		} else if (currentTerminalContainerId) {
-			// Hide current terminal but keep the session active
-			currentTerminalContainerId = null;
-		}
+		// No longer needed since all panels are shown
 	}
 
 	function editContainer(id: string) {
@@ -1370,42 +1386,32 @@
 				defaultIcon={Box}
 			/>
 			<div class="flex gap-2">
-				{#if $canAccess('containers', 'create')}
-				<Button size="sm" variant="secondary" onclick={() => (showCreateModal = true)}>
-					<Plus class="w-3.5 h-3.5 mr-1" />
-					Create
-				</Button>
-				{/if}
-				<Button
-					size="sm"
-					variant="outline"
-					onclick={checkForUpdates}
-					disabled={updateCheckStatus === 'checking'}
-					title="Check for available updates"
-				>
-					{#if updateCheckStatus === 'checking'}
-						<CircleArrowUp class="w-3.5 h-3.5 mr-1 animate-spin" />
-					{:else if updateCheckStatus === 'none' || updateCheckStatus === 'found'}
-						<Check class="w-3.5 h-3.5 mr-1 text-green-600" />
-					{:else if updateCheckStatus === 'error'}
-						<XCircle class="w-3.5 h-3.5 mr-1 text-destructive" />
-					{:else}
-						<CircleArrowUp class="w-3.5 h-3.5 mr-1" />
+					{#if $canAccess('containers', 'create')}
+					<Button size="sm" variant="secondary" onclick={() => (showCreateModal = true)}>
+						<Plus class="w-3.5 h-3.5 mr-1" />
+						Create
+					</Button>
 					{/if}
-					Check for updates
-				</Button>
-				{#if batchUpdateContainerIds.length > 0}
-				<Button
-					size="sm"
-					variant="outline"
-					onclick={updateAllContainers}
-					class="border-amber-500/40 text-amber-600 hover:bg-amber-500/10 hover:border-amber-500"
-					title="Update all containers with available updates"
-				>
-					<CircleArrowUp class="w-3.5 h-3.5 mr-1" />
-					Update all ({batchUpdateContainerIds.length})
-				</Button>
-				{/if}
+
+					<!-- Check for updates -->
+					<Button size="sm" variant="outline" onclick={checkForUpdates} title="Check for container updates">
+						{#if updateCheckStatus === 'checking'}
+							<CircleArrowUp class="w-3.5 h-3.5 mr-1 animate-spin" />
+						{:else if updateCheckStatus === 'none' || updateCheckStatus === 'found'}
+							<Check class="w-3.5 h-3.5 mr-1 text-green-600" />
+						{:else if updateCheckStatus === 'error'}
+							<XCircle class="w-3.5 h-3.5 mr-1 text-destructive" />
+						{:else}
+							<CircleArrowUp class="w-3.5 h-3.5 mr-1" />
+						{/if}
+						Check for updates
+					</Button>
+
+					<!-- Update all (open batch modal) -->
+					<Button size="sm" variant="outline" onclick={updateAllContainers} disabled={batchUpdateContainerIds.length === 0} title="Update all containers with available updates">
+						<CircleArrowUp class="w-3.5 h-3.5 mr-1" />
+						Update all ({batchUpdateContainerIds.length})
+					</Button>
 				{#if $canAccess('containers', 'remove')}
 				<ConfirmPopover
 					open={confirmPrune}
@@ -1618,15 +1624,12 @@
 				highlightedKey={highlightedRowId}
 				rowClass={(container) => {
 					let classes = '';
-					if (currentLogsContainerId === container.id) classes += 'bg-blue-500/10 hover:bg-blue-500/15 ';
-					if (currentTerminalContainerId === container.id) classes += 'bg-green-500/10 hover:bg-green-500/15 ';
+					if (hasActiveLogs(container.id)) classes += 'bg-blue-500/10 hover:bg-blue-500/15 ';
+					if (hasActiveTerminal(container.id)) classes += 'bg-green-500/10 hover:bg-green-500/15 ';
 					if ($appSettings.highlightUpdates && containersWithUpdatesSet.has(container.id)) classes += 'has-update ';
 					return classes;
 				}}
 				onRowClick={(container, e) => {
-					if (activeLogs.length > 0 || activeTerminals.length > 0) {
-						selectContainer(container);
-					}
 					highlightedRowId = highlightedRowId === container.id ? null : container.id;
 				}}
 			>
@@ -1900,8 +1903,8 @@
 							{#if hasActiveLogs(container.id)}
 								<button
 									type="button"
-									onclick={(e) => { e.stopPropagation(); currentLogsContainerId = container.id; }}
-									title="Show logs"
+									onclick={(e) => { e.stopPropagation(); closeLogs(container.id); }}
+									title="Close logs"
 									class="p-0.5 rounded hover:bg-muted transition-colors opacity-70 hover:opacity-100 cursor-pointer"
 								>
 									<FileText class="w-4 h-4 text-blue-400" style="filter: drop-shadow(0 0 4px rgba(96,165,250,0.9)) drop-shadow(0 0 8px rgba(96,165,250,0.6));" strokeWidth={2.5} />
@@ -1917,74 +1920,112 @@
 								</button>
 							{/if}
 							{/if}
-							{#if container.state === 'running' && $canAccess('containers', 'exec')}
-							{#if hasActiveTerminal(container.id)}
-								<button
-									type="button"
-									onclick={(e) => { e.stopPropagation(); currentTerminalContainerId = container.id; }}
-									title="Show terminal"
-									class="p-0.5 rounded hover:bg-muted transition-colors opacity-70 hover:opacity-100 cursor-pointer"
-								>
-									<Terminal class="w-4 h-4 text-green-400" style="filter: drop-shadow(0 0 4px rgba(74,222,128,0.9)) drop-shadow(0 0 8px rgba(74,222,128,0.6));" strokeWidth={2.5} />
-								</button>
-							{:else}
-								<Popover.Root open={terminalPopoverStates[container.id] ?? false} onOpenChange={(open) => { terminalPopoverStates[container.id] = open; }}>
-									<Popover.Trigger
-										onclick={(e: MouseEvent) => e.stopPropagation()}
-										class="p-0.5 rounded hover:bg-muted transition-colors opacity-70 hover:opacity-100 cursor-pointer"
+							   {#if container.state === 'running' && $canAccess('containers', 'exec')}
+							   {#if hasActiveTerminal(container.id) || hasActiveAttach(container.id)}
+								   <button
+									   type="button"
+									   onclick={(e) => {
+										   e.stopPropagation();
+										   if (hasActiveTerminal(container.id)) {
+											   closeTerminal(container.id);
+										   } else if (hasActiveAttach(container.id)) {
+											   closeAttach(container.id);
+										   }
+									   }}
+									   title={hasActiveTerminal(container.id) || hasActiveAttach(container.id) ? "Close terminal" : "Open terminal"}
+									   class="p-0.5 rounded hover:bg-muted transition-colors opacity-70 hover:opacity-100 cursor-pointer"
+								   >
+									   {#if hasActiveAttach(container.id) && hasActiveTerminal(container.id)}
+										   <Terminal
+											   class="w-4 h-4 text-cyan-400"
+											   style="filter: drop-shadow(0 0 4px #06b6d4) drop-shadow(0 0 8px #06b6d4);"
+											   strokeWidth={2.5}
+										   />
+									   {:else if hasActiveAttach(container.id)}
+										   <Terminal
+											   class="w-4 h-4 text-yellow-400"
+											   style="filter: drop-shadow(0 0 4px #facc15) drop-shadow(0 0 8px #facc15);"
+											   strokeWidth={2.5}
+										   />
+									   {:else}
+										   <Terminal
+											   class="w-4 h-4 text-green-400"
+											   style="filter: drop-shadow(0 0 4px #4ade80) drop-shadow(0 0 8px #4ade80);"
+											   strokeWidth={2.5}
+										   />
+									   {/if}
+								   </button>
+							   {:else}
+									<Popover.Root
+										open={terminalPopoverStates[container.id] ?? false}
+										onOpenChange={(open) => {
+											terminalPopoverStates[container.id] = open;
+										}}
 									>
-										<Terminal class="w-3 h-3 text-muted-foreground hover:text-foreground" />
-									</Popover.Trigger>
-									<Popover.Content class="w-56 p-0" align="end" sideOffset={5}>
-										<div class="px-3 py-2 border-b bg-muted/50">
-											<div class="flex items-center gap-2">
+										<Popover.Trigger
+											onclick={(e: MouseEvent) => e.stopPropagation()}
+											class="p-0.5 rounded hover:bg-muted transition-colors opacity-70 hover:opacity-100 cursor-pointer"
+										>
+											<Terminal class="w-3 h-3 text-muted-foreground hover:text-foreground" />
+										</Popover.Trigger>
+										<Popover.Content class="w-60 p-0" align="end" sideOffset={5}>
+											<div class="px-3 py-2 border-b bg-muted/50 flex items-center gap-2">
 												<Terminal class="w-3.5 h-3.5 text-muted-foreground" />
 												<span class="text-xs font-medium truncate" title={container.name}>{container.name}</span>
 											</div>
-										</div>
-										<div class="p-3 space-y-3">
-											<div class="space-y-1.5">
-												<Label class="text-xs">Shell</Label>
-												<Select.Root type="single" bind:value={terminalShell}>
-													<Select.Trigger class="w-full h-8 text-xs">
-														<Shell class="w-3 h-3 mr-1.5 text-muted-foreground" />
-														<span>{shellOptions.find(o => o.value === terminalShell)?.label || 'Select'}</span>
+
+											<div class="p-3 space-y-4">
+												<!-- Exec -->
+												{#if $canAccess('containers', 'exec')}
+												<div class="space-y-2">
+													<Label class="text-xs">Exec</Label>
+													<Select.Root type="single" bind:value={terminalShell}>
+													<Select.Trigger class="w-full h-7 text-xs">
+														<Shell class="w-3 h-3 mr-1 text-muted-foreground" />
+														<span>{shellOptions.find((o) => o.value === terminalShell)?.label || 'Shell'}</span>
 													</Select.Trigger>
 													<Select.Content>
 														{#each shellOptions as option}
-															<Select.Item value={option.value} label={option.label}>
-																<Shell class="w-3 h-3 mr-1.5 text-muted-foreground" />
-																{option.label}
-															</Select.Item>
+														<Select.Item value={option.value} label={option.label}>
+															<Shell class="w-3 h-3 mr-1 text-muted-foreground" /> {option.label}
+														</Select.Item>
 														{/each}
 													</Select.Content>
-												</Select.Root>
-											</div>
-											<div class="space-y-1.5">
-												<Label class="text-xs">User</Label>
-												<Select.Root type="single" bind:value={terminalUser}>
-													<Select.Trigger class="w-full h-8 text-xs">
-														<User class="w-3 h-3 mr-1.5 text-muted-foreground" />
-														<span>{userOptions.find(o => o.value === terminalUser)?.label || 'Select'}</span>
+													</Select.Root>
+
+													<Select.Root type="single" bind:value={terminalUser}>
+													<Select.Trigger class="w-full h-7 text-xs">
+														<User class="w-3 h-3 mr-1 text-muted-foreground" />
+														<span>{userOptions.find((o) => o.value === terminalUser)?.label || 'User'}</span>
 													</Select.Trigger>
 													<Select.Content>
 														{#each userOptions as option}
-															<Select.Item value={option.value} label={option.label}>
-																<User class="w-3 h-3 mr-1.5 text-muted-foreground" />
-																{option.label}
-															</Select.Item>
+														<Select.Item value={option.value} label={option.label}>
+															<User class="w-3 h-3 mr-1 text-muted-foreground" /> {option.label}
+														</Select.Item>
 														{/each}
 													</Select.Content>
-												</Select.Root>
+													</Select.Root>
+
+													<Button size="sm" class="w-full h-7 text-xs" onclick={() => startTerminal(container)}>
+													<Terminal class="w-3 h-3 mr-1" /> Connect
+													</Button>
+												</div>
+												{/if}
+
+												<!-- Attach -->
+												{#if container.attachable && $canAccess('containers', 'attach')}
+												<div class="space-y-2">
+													<Label class="text-xs">Attach</Label>
+													<Button size="sm" class="w-full h-7 text-xs" onclick={() => startAttach(container)}>
+													<Zap class="w-3 h-3 mr-1" /> Connect
+													</Button>
+												</div>
+												{/if}
 											</div>
-											<Button size="sm" class="w-full h-7 text-xs" onclick={() => startTerminal(container)}>
-												<Terminal class="w-3 h-3 mr-1" />
-												Connect
-											</Button>
-										</div>
-									</Popover.Content>
-								</Popover.Root>
-							{/if}
+										</Popover.Content>
+									</Popover.Root>
+								{/if}
 							{/if}
 							{#if $canAccess('containers', 'remove')}
 							<ConfirmPopover
@@ -2003,9 +2044,9 @@
 							{/if}
 							{#if operationError?.id === container.id}
 								<div class="absolute bottom-full right-0 mb-1 z-50 bg-destructive text-destructive-foreground rounded-md shadow-lg p-2 text-xs whitespace-nowrap flex items-center gap-2 max-w-xs">
-									<AlertTriangle class="w-3 h-3 flex-shrink-0" />
+									   <AlertTriangle class="w-3 h-3 shrink-0" />
 									<span class="truncate">{operationError.message}</span>
-									<button onclick={() => operationError = null} class="flex-shrink-0 hover:bg-white/20 rounded p-0.5">
+									   <button onclick={() => operationError = null} class="shrink-0 hover:bg-white/20 rounded p-0.5">
 										<X class="w-3 h-3" />
 									</button>
 								</div>
@@ -2016,7 +2057,7 @@
 			</DataGrid>
 
 			<!-- Panels section - in vertical mode this is a column on the right with resize handle -->
-			{#if layoutMode === 'vertical' && (currentLogsContainerId || currentTerminalContainerId)}
+			{#if layoutMode === 'vertical' && (activeLogs.length > 0 || activeTerminals.length > 0 || activeAttach.length > 0)}
 				<!-- Vertical resize handle -->
 				<div
 					role="separator"
@@ -2028,76 +2069,89 @@
 				</div>
 
 				<div class="flex flex-col gap-3 h-full overflow-hidden" style="width: {panelWidth}px; flex-shrink: 0;">
-					<!-- Current Logs Panel -->
-					{#if currentLogsContainerId}
-						{@const activeLog = activeLogs.find(l => l.containerId === currentLogsContainerId)}
-						{#if activeLog}
-							<div class="flex-1 min-h-0">
-								<LogsPanel
-									containerId={activeLog.containerId}
-									containerName={activeLog.containerName}
-									visible={true}
-									envId={envId}
-									fillHeight={true}
-									onClose={() => closeLogs(activeLog.containerId)}
-								/>
-							</div>
-						{/if}
-					{/if}
-
-					<!-- Current Terminal Panel -->
-					{#if currentTerminalContainerId}
-						{@const activeTerminal = activeTerminals.find(t => t.containerId === currentTerminalContainerId)}
-						{#if activeTerminal}
-							<div class="flex-1 min-h-0">
-								<TerminalPanel
-									containerId={activeTerminal.containerId}
-									containerName={activeTerminal.containerName}
-									shell={activeTerminal.shell}
-									user={activeTerminal.user}
-									visible={true}
-									envId={envId}
-									fillHeight={true}
-									onClose={() => closeTerminal(activeTerminal.containerId)}
-								/>
-							</div>
-						{/if}
-					{/if}
+					<!-- All Logs Panels -->
+					{#each activeLogs as activeLog (activeLog.containerId)}
+						<div class="flex-1 min-h-0">
+							<LogsPanel
+								containerId={activeLog.containerId}
+								containerName={activeLog.containerName}
+								visible={true}
+								envId={envId}
+								fillHeight={true}
+								onClose={() => closeLogs(activeLog.containerId)}
+							/>
+						</div>
+					{/each}
+
+					<!-- All Terminal Panels -->
+					{#each activeTerminals as activeTerminal (activeTerminal.containerId)}
+						<div class="flex-1 min-h-0">
+							<TerminalPanel
+								containerId={activeTerminal.containerId}
+								containerName={activeTerminal.containerName}
+								shell={activeTerminal.shell}
+								user={activeTerminal.user}
+								visible={true}
+								envId={envId}
+								fillHeight={true}
+								onClose={() => closeTerminal(activeTerminal.containerId)}
+							/>
+						</div>
+					{/each}
+
+					<!-- All Attach Panels -->
+					{#each activeAttach as activeAtt (activeAtt.containerId)}
+						<div class="flex-1 min-h-0">
+							<AttachPanel
+								containerId={activeAtt.containerId}
+								containerName={activeAtt.containerName}
+								visible={true}
+								{envId}
+								fillHeight={true}
+								onClose={() => closeAttach(activeAtt.containerId)}
+							/>
+						</div>
+					{/each}
 				</div>
 			{/if}
 		</div>
 
 		<!-- Panels for horizontal mode - below the table, full width -->
-		{#if layoutMode === 'horizontal'}
-			<!-- Show current logs panel -->
-			{#if currentLogsContainerId}
-				{@const activeLog = activeLogs.find(l => l.containerId === currentLogsContainerId)}
-				{#if activeLog}
-					<LogsPanel
-						containerId={activeLog.containerId}
-						containerName={activeLog.containerName}
-						visible={true}
-						envId={envId}
-						onClose={() => closeLogs(activeLog.containerId)}
-					/>
-				{/if}
-			{/if}
-
-			<!-- Show current terminal panel -->
-			{#if currentTerminalContainerId}
-				{@const activeTerminal = activeTerminals.find(t => t.containerId === currentTerminalContainerId)}
-				{#if activeTerminal}
-					<TerminalPanel
-						containerId={activeTerminal.containerId}
-						containerName={activeTerminal.containerName}
-						shell={activeTerminal.shell}
-						user={activeTerminal.user}
-						visible={true}
-						envId={envId}
-						onClose={() => closeTerminal(activeTerminal.containerId)}
-					/>
-				{/if}
-			{/if}
+		{#if layoutMode === 'horizontal' && (activeLogs.length > 0 || activeTerminals.length > 0 || activeAttach.length > 0)}
+			<!-- All Logs Panels -->
+			{#each activeLogs as activeLog (activeLog.containerId)}
+				<LogsPanel
+					containerId={activeLog.containerId}
+					containerName={activeLog.containerName}
+					visible={true}
+					envId={envId}
+					onClose={() => closeLogs(activeLog.containerId)}
+				/>
+			{/each}
+
+			<!-- All Terminal Panels -->
+			{#each activeTerminals as activeTerminal (activeTerminal.containerId)}
+				<TerminalPanel
+					containerId={activeTerminal.containerId}
+					containerName={activeTerminal.containerName}
+					shell={activeTerminal.shell}
+					user={activeTerminal.user}
+					visible={true}
+					envId={envId}
+					onClose={() => closeTerminal(activeTerminal.containerId)}
+				/>
+			{/each}
+
+			<!-- All Attach Panels -->
+			{#each activeAttach as activeAtt (activeAtt.containerId)}
+				<AttachPanel
+					containerId={activeAtt.containerId}
+					containerName={activeAtt.containerName}
+					visible={true}
+					{envId}
+					onClose={() => closeAttach(activeAtt.containerId)}
+				/>
+			{/each}
 		{/if}
 	{/if}
 </div>
diff --git a/src/routes/terminal/+page.svelte b/src/routes/terminal/+page.svelte
index 4dd3fc2..ebd6ca3 100644
--- a/src/routes/terminal/+page.svelte
+++ b/src/routes/terminal/+page.svelte
@@ -1,26 +1,31 @@
 <script lang="ts">
-	import { onMount, onDestroy } from 'svelte';
 	import { page } from '$app/stores';
+	import PageHeader from '$lib/components/PageHeader.svelte';
 	import { Button } from '$lib/components/ui/button';
+	import { NoEnvironment } from '$lib/components/ui/empty-state';
 	import { Input } from '$lib/components/ui/input';
 	import { Label } from '$lib/components/ui/label';
 	import * as Select from '$lib/components/ui/select';
-	import { Search, ChevronDown, Terminal as TerminalIcon, Unplug, RefreshCw, Trash2, Copy, Shell, User } from 'lucide-svelte';
-	import PageHeader from '$lib/components/PageHeader.svelte';
+	import { appendEnvParam, currentEnvironment, environments } from '$lib/stores/environment';
 	import type { ContainerInfo } from '$lib/types';
-	import { currentEnvironment, environments, appendEnvParam } from '$lib/stores/environment';
+	import { ChevronDown, Copy, RefreshCw, Search, Shell, Terminal as TerminalIcon, Trash2, Unplug, User, Zap } from 'lucide-svelte';
+	import { onDestroy, onMount } from 'svelte';
+	import AttachTerminal from '../attach/AttachTerminal.svelte';
 	import Terminal from './Terminal.svelte';
-	import { NoEnvironment } from '$lib/components/ui/empty-state';
 
 	// Track if we've handled the initial container from URL
 	let initialContainerHandled = $state(false);
 
+	// Mode toggle
+	let mode = $state<'exec' | 'attach'>('exec');
+
 	let containers = $state<ContainerInfo[]>([]);
 	let selectedContainer = $state<ContainerInfo | null>(null);
 	let envId = $state<number | null>(null);
 
 	// Terminal component reference
 	let terminalComponent: ReturnType<typeof Terminal> | undefined;
+	let attachComponent: ReturnType<typeof AttachTerminal> | undefined;
 	let connected = $state(false);
 
 	// Shell/user options
@@ -59,20 +64,22 @@
 	let filteredContainers = $derived(() => {
 		if (!searchQuery.trim()) return containers;
 		const query = searchQuery.toLowerCase();
-		return containers.filter(c =>
-			c.name.toLowerCase().includes(query) ||
-			c.image.toLowerCase().includes(query)
-		);
+		return containers.filter((c) => c.name.toLowerCase().includes(query) || c.image.toLowerCase().includes(query));
 	});
 
 	async function fetchContainers() {
 		try {
 			const response = await fetch(appendEnvParam('/api/containers', envId));
 			const allContainers = await response.json();
-			// Only show running containers
-			containers = allContainers.filter((c: ContainerInfo) => c.state === 'running');
+			// In exec mode, only show running containers
+			// In attach mode, only show running containers that are attachable
+			if (mode === 'attach') {
+				containers = allContainers.filter((c: ContainerInfo) => c.state === 'running' && c.attachable);
+			} else {
+				containers = allContainers.filter((c: ContainerInfo) => c.state === 'running');
+			}
 
-			// If selected container is no longer running, clear selection
+			// If selected container is no longer valid, clear selection
 			if (selectedContainer && !containers.find((c) => c.id === selectedContainer?.id)) {
 				clearSelection();
 			}
@@ -82,9 +89,20 @@
 	}
 
 	function selectContainer(container: ContainerInfo) {
+		// If already selected, do nothing
+		if (selectedContainer && selectedContainer.id === container.id) {
+			dropdownOpen = false;
+			return;
+		}
+
 		// Disconnect from previous container
-		if (selectedContainer && terminalComponent) {
-			terminalComponent.dispose();
+		if (selectedContainer) {
+			if (mode === 'exec' && terminalComponent) {
+				terminalComponent.dispose();
+				terminalComponent = undefined;
+			} else if (mode === 'attach' && attachComponent) {
+				attachComponent.dispose();
+			}
 		}
 		selectedContainer = container;
 		searchQuery = '';
@@ -92,8 +110,11 @@
 	}
 
 	function clearSelection() {
-		if (terminalComponent) {
+		if (mode === 'exec' && terminalComponent) {
 			terminalComponent.dispose();
+			terminalComponent = undefined;
+		} else if (mode === 'attach' && attachComponent) {
+			attachComponent.dispose();
 		}
 		selectedContainer = null;
 		searchQuery = '';
@@ -122,12 +143,20 @@
 	// Change font size
 	function changeFontSize(newSize: number) {
 		terminalFontSize = newSize;
-		terminalComponent?.setFontSize(newSize);
+		if (mode === 'exec') {
+			terminalComponent?.setFontSize(newSize);
+		} else if (mode === 'attach') {
+			attachComponent?.setFontSize(newSize);
+		}
 	}
 
 	// Handle window resize
 	function handleResize() {
-		terminalComponent?.fit();
+		if (mode === 'exec') {
+			terminalComponent?.fit();
+		} else if (mode === 'attach') {
+			attachComponent?.fit();
+		}
 	}
 
 	onMount(async () => {
@@ -137,7 +166,7 @@
 		const urlContainerId = $page.url.searchParams.get('container');
 		if (urlContainerId && !initialContainerHandled) {
 			initialContainerHandled = true;
-			const container = containers.find(c => c.id === urlContainerId || c.id.startsWith(urlContainerId));
+			const container = containers.find((c) => c.id === urlContainerId || c.id.startsWith(urlContainerId));
 			if (container) {
 				selectContainer(container);
 			}
@@ -147,8 +176,10 @@
 
 		// Poll connected state from terminal component
 		const connectedPollInterval = setInterval(() => {
-			if (terminalComponent) {
+			if (mode === 'exec' && terminalComponent) {
 				connected = terminalComponent.getConnected();
+			} else if (mode === 'attach' && attachComponent) {
+				connected = attachComponent.getConnected();
 			}
 		}, 500);
 
@@ -163,6 +194,7 @@
 	onDestroy(() => {
 		window.removeEventListener('resize', handleResize);
 		terminalComponent?.dispose();
+		attachComponent?.dispose();
 	});
 </script>
 
@@ -172,169 +204,203 @@
 		<NoEnvironment />
 	</div>
 {:else}
-<div class="flex flex-col flex-1 min-h-0 h-full gap-3">
-	<!-- Header with container selector -->
-	<div class="flex items-center gap-4 flex-wrap">
-		<PageHeader icon={TerminalIcon} title="Shell" />
-		<div class="relative flex-1 max-w-md min-w-[200px]">
-			<!-- Search input - always visible, shows selected container or placeholder -->
-			<div class="relative">
-				<Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
-				<Input
-					type="text"
-					placeholder={selectedContainer ? selectedContainer.name : "Search running containers..."}
-					bind:value={searchQuery}
-					onfocus={handleInputFocus}
-					onblur={handleInputBlur}
-					onkeydown={handleInputKeydown}
-					class="pl-10 pr-10 h-9 {selectedContainer && !searchQuery ? 'text-foreground' : ''}"
-				/>
-				<ChevronDown class="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+	<div class="flex flex-col flex-1 min-h-0 h-full gap-3">
+		<!-- Header with container selector -->
+		<div class="flex items-center gap-4 flex-wrap">
+			<div class="flex items-center gap-3">
+				<PageHeader icon={TerminalIcon} title="Terminal" />
+				<div class="flex items-center rounded-lg bg-muted p-1">
+					<Button
+						size="sm"
+						variant="ghost"
+						onclick={() => {
+							mode = 'exec';
+							clearSelection();
+							fetchContainers();
+						}}
+						class="h-7 px-2.5 text-xs rounded gap-1.5 {mode === 'exec' ? 'text-foreground bg-accent/50' : 'text-muted-foreground hover:text-foreground'}"
+					>
+						<Shell class="w-3.5 h-3.5" />
+						<span>Exec</span>
+					</Button>
+					<div class="w-px h-4 bg-border"></div>
+					<Button
+						size="sm"
+						variant="ghost"
+						onclick={() => {
+							mode = 'attach';
+							clearSelection();
+							fetchContainers();
+						}}
+						class="h-7 px-2.5 text-xs rounded gap-1.5 {mode === 'attach' ? 'text-foreground bg-accent/50' : 'text-muted-foreground hover:text-foreground'}"
+					>
+						<Zap class="w-3.5 h-3.5" />
+						<span>Attach</span>
+					</Button>
+				</div>
 			</div>
-
-			<!-- Dropdown -->
-			{#if dropdownOpen}
-				<div class="absolute top-full left-0 right-0 mt-1 border rounded-md bg-popover shadow-lg z-50 max-h-64 overflow-auto">
-					{#if filteredContainers().length === 0}
-						<div class="px-3 py-2 text-sm text-muted-foreground">
-							{containers.length === 0 ? 'No running containers' : 'No matches found'}
-						</div>
-					{:else}
-						{#each filteredContainers() as container}
-							<button
-								type="button"
-								onclick={() => selectContainer(container)}
-								class="w-full px-3 py-2 text-left text-sm hover:bg-muted transition-colors flex items-center gap-2 {selectedContainer?.id === container.id ? 'bg-muted' : ''}"
-							>
-								<span class="font-medium truncate">{container.name}</span>
-								<span class="text-muted-foreground text-xs truncate">({container.image})</span>
-								{#if selectedContainer?.id === container.id}
-									<span class="ml-auto text-xs text-primary">connected</span>
-								{/if}
-							</button>
-						{/each}
-					{/if}
+			<div class="relative flex-1 max-w-md min-w-50">
+				<!-- Search input - always visible, shows selected container or placeholder -->
+				<div class="relative">
+					<Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+					<Input
+						type="text"
+						placeholder={selectedContainer ? selectedContainer.name : mode === 'exec' ? 'Search running containers...' : 'Search containers...'}
+						bind:value={searchQuery}
+						onfocus={handleInputFocus}
+						onblur={handleInputBlur}
+						onkeydown={handleInputKeydown}
+						class="pl-10 pr-10 h-9 {selectedContainer && !searchQuery ? 'text-foreground' : ''}"
+					/>
+					<ChevronDown class="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
 				</div>
+
+				<!-- Dropdown -->
+				{#if dropdownOpen}
+					<div class="absolute top-full left-0 right-0 mt-1 border rounded-md bg-popover shadow-lg z-50 max-h-64 overflow-auto">
+						{#if filteredContainers().length === 0}
+							<div class="px-3 py-2 text-sm text-muted-foreground">
+								{containers.length === 0 ? (mode === 'exec' ? 'No running containers' : 'No containers') : 'No matches found'}
+							</div>
+						{:else}
+							{#each filteredContainers() as container}
+								<button type="button" onclick={() => selectContainer(container)} class="w-full px-3 py-2 text-left text-sm hover:bg-muted transition-colors flex items-center gap-2 {selectedContainer?.id === container.id ? 'bg-muted' : ''}">
+									<span class="font-medium truncate">{container.name}</span>
+									<span class="text-muted-foreground text-xs truncate">({container.image})</span>
+									{#if selectedContainer?.id === container.id}
+										<span class="ml-auto text-xs text-primary">connected</span>
+									{/if}
+								</button>
+							{/each}
+						{/if}
+					</div>
+				{/if}
+			</div>
+
+			{#if selectedContainer}
+				<Button size="sm" variant="ghost" onclick={clearSelection} class="h-9 px-3 text-sm text-muted-foreground hover:text-foreground">
+					<Unplug class="w-4 h-4 mr-1.5" />
+					Disconnect
+				</Button>
 			{/if}
-		</div>
 
-		{#if selectedContainer}
-			<Button size="sm" variant="ghost" onclick={clearSelection} class="h-9 px-3 text-sm text-muted-foreground hover:text-foreground">
-				<Unplug class="w-4 h-4 mr-1.5" />
-				Disconnect
-			</Button>
-		{/if}
-
-		{#if !selectedContainer}
-			<div class="flex items-center gap-2">
-				<Label class="text-sm text-muted-foreground">Shell:</Label>
-				<Select.Root type="single" bind:value={selectedShell}>
-					<Select.Trigger class="h-9 w-36">
-						<Shell class="w-4 h-4 mr-2 text-muted-foreground" />
-						<span>{shellOptions.find(o => o.value === selectedShell)?.label || 'Select'}</span>
-					</Select.Trigger>
-					<Select.Content>
-						{#each shellOptions as option}
-							<Select.Item value={option.value} label={option.label}>
+			{#if !selectedContainer}
+				{#if mode === 'exec'}
+					<div class="flex items-center gap-2">
+						<Label class="text-sm text-muted-foreground">Shell:</Label>
+						<Select.Root type="single" bind:value={selectedShell}>
+							<Select.Trigger class="h-9 w-36">
 								<Shell class="w-4 h-4 mr-2 text-muted-foreground" />
-								{option.label}
-							</Select.Item>
-						{/each}
-					</Select.Content>
-				</Select.Root>
-			</div>
-			<div class="flex items-center gap-2">
-				<Label class="text-sm text-muted-foreground">User:</Label>
-				<Select.Root type="single" bind:value={selectedUser}>
-					<Select.Trigger class="h-9 w-40">
-						<User class="w-4 h-4 mr-2 text-muted-foreground" />
-						<span>{userOptions.find(o => o.value === selectedUser)?.label || 'Select'}</span>
-					</Select.Trigger>
-					<Select.Content>
-						{#each userOptions as option}
-							<Select.Item value={option.value} label={option.label}>
+								<span>{shellOptions.find((o) => o.value === selectedShell)?.label || 'Select'}</span>
+							</Select.Trigger>
+							<Select.Content>
+								{#each shellOptions as option}
+									<Select.Item value={option.value} label={option.label}>
+										<Shell class="w-4 h-4 mr-2 text-muted-foreground" />
+										{option.label}
+									</Select.Item>
+								{/each}
+							</Select.Content>
+						</Select.Root>
+					</div>
+					<div class="flex items-center gap-2">
+						<Label class="text-sm text-muted-foreground">User:</Label>
+						<Select.Root type="single" bind:value={selectedUser}>
+							<Select.Trigger class="h-9 w-40">
 								<User class="w-4 h-4 mr-2 text-muted-foreground" />
-								{option.label}
-							</Select.Item>
-						{/each}
-					</Select.Content>
-				</Select.Root>
-			</div>
-		{/if}
-	</div>
+								<span>{userOptions.find((o) => o.value === selectedUser)?.label || 'Select'}</span>
+							</Select.Trigger>
+							<Select.Content>
+								{#each userOptions as option}
+									<Select.Item value={option.value} label={option.label}>
+										<User class="w-4 h-4 mr-2 text-muted-foreground" />
+										{option.label}
+									</Select.Item>
+								{/each}
+							</Select.Content>
+						</Select.Root>
+					</div>
+				{/if}
+			{/if}
+		</div>
 
-	<!-- Shell output - full height -->
-	<div class="flex-1 min-h-0 border rounded-lg bg-zinc-950 overflow-hidden flex flex-col">
-		{#if !selectedContainer}
-			<div class="flex items-center justify-center h-full text-muted-foreground">
-				<div class="text-center">
-					<TerminalIcon class="w-12 h-12 mx-auto mb-3 opacity-50" />
-					<p>Select a container to open shell</p>
+		<!-- Shell output - full height -->
+		<div class="flex-1 min-h-0 border rounded-lg bg-zinc-950 overflow-hidden flex flex-col">
+			{#if !selectedContainer}
+				<div class="flex items-center justify-center h-full text-muted-foreground">
+					<div class="text-center">
+						<TerminalIcon class="w-12 h-12 mx-auto mb-3 opacity-50" />
+						<p>Select a container to {mode === 'exec' ? 'open shell' : 'attach'}</p>
+					</div>
 				</div>
-			</div>
-		{:else}
-			<!-- Header bar inside black area -->
-			<div class="flex items-center justify-between px-3 py-1.5 border-b border-zinc-800 bg-zinc-900/50 shrink-0">
-				<div class="flex items-center gap-2">
-					{#if connected}
-						<span class="inline-flex items-center gap-1 text-xs text-green-500">
-							<span class="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse"></span>
-							Connected
-						</span>
-					{:else}
-						<span class="text-xs text-zinc-500">Disconnected</span>
-					{/if}
+			{:else}
+				<!-- Header bar inside black area -->
+				<div class="flex items-center justify-between px-3 py-1.5 border-b border-zinc-800 bg-zinc-900/50 shrink-0">
+					<div class="flex items-center gap-2">
+						{#if connected}
+							<span class="inline-flex items-center gap-1 text-xs text-green-500">
+								<span class="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse"></span>
+								{mode === 'exec' ? 'Connected' : 'Attached'}
+							</span>
+						{:else}
+							<span class="text-xs text-zinc-500">{mode === 'exec' ? 'Disconnected' : 'Detached'}</span>
+						{/if}
+					</div>
+					<div class="flex items-center gap-3">
+						<Select.Root type="single" value={String(terminalFontSize)} onValueChange={(v) => changeFontSize(Number(v))}>
+							<Select.Trigger class="h-5! py-0! w-14 bg-zinc-800 border-zinc-700 text-xs text-zinc-300 px-1.5 [&_svg]:size-3">
+								<span>{terminalFontSize}px</span>
+							</Select.Trigger>
+							<Select.Content>
+								{#each fontSizeOptions as size}
+									<Select.Item value={String(size)} label="{size}px" class="pe-2 [&>span:first-child]:hidden">{size}px</Select.Item>
+								{/each}
+							</Select.Content>
+						</Select.Root>
+						<button
+							onclick={() => {
+								if (mode === 'exec') terminalComponent?.copyOutput();
+								else attachComponent?.copyOutput();
+							}}
+							class="p-1 rounded hover:bg-zinc-800 transition-colors"
+							title="Copy output"
+						>
+							<Copy class="w-3 h-3 text-zinc-500 hover:text-zinc-300" />
+						</button>
+						<button
+							onclick={() => {
+								if (mode === 'exec') terminalComponent?.clear();
+								else attachComponent?.clear();
+							}}
+							class="p-1 rounded hover:bg-zinc-800 transition-colors"
+							title="Clear (Cmd+L)"
+						>
+							<Trash2 class="w-3 h-3 text-zinc-500 hover:text-zinc-300" />
+						</button>
+						<button
+							onclick={() => {
+								if (mode === 'exec') terminalComponent?.reconnect();
+								else attachComponent?.reconnect();
+							}}
+							class="p-1 rounded hover:bg-zinc-800 transition-colors"
+							title="Reconnect"
+						>
+							<RefreshCw class="w-3 h-3 text-zinc-500 hover:text-zinc-300" />
+						</button>
+					</div>
 				</div>
-				<div class="flex items-center gap-3">
-					<Select.Root type="single" value={String(terminalFontSize)} onValueChange={(v) => changeFontSize(Number(v))}>
-						<Select.Trigger class="!h-5 !py-0 w-14 bg-zinc-800 border-zinc-700 text-xs text-zinc-300 px-1.5 [&_svg]:size-3">
-							<span>{terminalFontSize}px</span>
-						</Select.Trigger>
-						<Select.Content>
-							{#each fontSizeOptions as size}
-								<Select.Item value={String(size)} label="{size}px" class="pe-2 [&>span:first-child]:hidden">{size}px</Select.Item>
-							{/each}
-						</Select.Content>
-					</Select.Root>
-					<button
-						onclick={() => terminalComponent?.copyOutput()}
-						class="p-1 rounded hover:bg-zinc-800 transition-colors"
-						title="Copy output"
-					>
-						<Copy class="w-3 h-3 text-zinc-500 hover:text-zinc-300" />
-					</button>
-					<button
-						onclick={() => terminalComponent?.clear()}
-						class="p-1 rounded hover:bg-zinc-800 transition-colors"
-						title="Clear (Cmd+L)"
-					>
-						<Trash2 class="w-3 h-3 text-zinc-500 hover:text-zinc-300" />
-					</button>
-					<button
-						onclick={() => terminalComponent?.reconnect()}
-						class="p-1 rounded hover:bg-zinc-800 transition-colors"
-						title="Reconnect"
-					>
-						<RefreshCw class="w-3 h-3 text-zinc-500 hover:text-zinc-300" />
-					</button>
+				<div class="flex-1 min-h-0 w-full">
+					{#key `${selectedContainer.id}-${mode}`}
+						{#if mode === 'exec'}
+							<Terminal bind:this={terminalComponent} containerId={selectedContainer.id} containerName={selectedContainer.name} shell={selectedShell} user={selectedUser} {envId} fontSize={terminalFontSize} />
+						{:else if mode === 'attach'}
+							<AttachTerminal bind:this={attachComponent} containerId={selectedContainer.id} containerName={selectedContainer.name} {envId} fontSize={terminalFontSize} />
+						{/if}
+					{/key}
 				</div>
-			</div>
-			<div class="flex-1 min-h-0 w-full">
-				{#key selectedContainer.id}
-					<Terminal
-						bind:this={terminalComponent}
-						containerId={selectedContainer.id}
-						containerName={selectedContainer.name}
-						shell={selectedShell}
-						user={selectedUser}
-						{envId}
-						fontSize={terminalFontSize}
-					/>
-				{/key}
-			</div>
-		{/if}
+			{/if}
+		</div>
 	</div>
-</div>
 {/if}
 
 <style>
diff --git a/src/routes/terminal/Terminal.svelte b/src/routes/terminal/Terminal.svelte
index dd550ba..ebb3226 100644
--- a/src/routes/terminal/Terminal.svelte
+++ b/src/routes/terminal/Terminal.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { onMount, onDestroy } from 'svelte';
 	import { themeStore } from '$lib/stores/theme';
 	import { getMonospaceFont } from '$lib/themes';
+	import { onDestroy, onMount } from 'svelte';
 
 	// Dynamic imports for browser-only xterm
 	let TerminalClass: any;
@@ -180,7 +180,7 @@
 		// In dev mode (vite), connect directly to the WS server on port 5174
 		// In production, connect to the same port as the app
 		const isDev = import.meta.env.DEV;
-		const portPart = isDev ? ':5174' : (window.location.port ? `:${window.location.port}` : '');
+		const portPart = isDev ? ':5174' : window.location.port ? `:${window.location.port}` : '';
 		let wsUrl = `${protocol}//${wsHost}${portPart}/api/containers/${containerId}/exec?shell=${encodeURIComponent(shell)}&user=${encodeURIComponent(user)}`;
 		if (envId) {
 			wsUrl += `&envId=${envId}`;
diff --git a/vite.config.ts b/vite.config.ts
index 5f1c578..2a48236 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,11 +1,11 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import tailwindcss from '@tailwindcss/vite';
-import { defineConfig, type Plugin } from 'vite';
+import { Database } from 'bun:sqlite';
 import { execSync } from 'child_process';
 import { existsSync } from 'fs';
 import { homedir } from 'os';
 import { join } from 'path';
-import { Database } from 'bun:sqlite';
+import { defineConfig, type Plugin } from 'vite';
 
 const WS_PORT = 5174;
 
@@ -69,6 +69,14 @@ function buildExecStartHttpRequest(execId: string, target: DockerTarget): string
 	return `POST /exec/${execId}/start HTTP/1.1\r\nHost: localhost\r\nContent-Type: application/json\r\n${tokenHeader}Connection: Upgrade\r\nUpgrade: tcp\r\nContent-Length: ${body.length}\r\n\r\n${body}`;
 }
 
+// ============ Attach API Helpers ===========
+
+function buildAttachHttpRequest(containerId: string, target: DockerTarget): string {
+	const tokenHeader =
+		target.type === 'tcp' && target.hawserToken ? `X-Hawser-Token: ${target.hawserToken}\r\n` : '';
+	return `POST /containers/${containerId}/attach?stream=1&stdout=1&stderr=1&stdin=1 HTTP/1.1\r\nHost: localhost\r\n${tokenHeader}Connection: Upgrade\r\nUpgrade: tcp\r\n\r\n`;
+}
+
 // ============ Stream Processing ============
 
 function processTerminalOutput(
@@ -442,6 +450,8 @@ function webSocketPlugin(): Plugin {
 						const containerIdIndex = pathParts.indexOf('containers') + 1;
 						const containerId = pathParts[containerIdIndex];
 
+						const isAttach = url.pathname.includes('/attach');
+
 						const shell = url.searchParams.get('shell') || '/bin/sh';
 						const user = url.searchParams.get('user') || 'root';
 						const envIdParam = url.searchParams.get('envId');
@@ -453,8 +463,10 @@ function webSocketPlugin(): Plugin {
 							return;
 						}
 
+						console.log(envId)
 						const target = getDockerTarget(envId);
-						console.log('[Terminal WS] Open connId:', connId, 'container:', containerId, 'target:', target.type);
+						const mode = isAttach ? 'attach' : 'exec';
+						console.log('[Terminal WS] Open connId:', connId, 'container:', containerId, 'target:', 'mode:', mode, target.type);
 
 						try {
 							// Handle Hawser Edge mode differently - use WebSocket protocol
@@ -466,6 +478,17 @@ function webSocketPlugin(): Plugin {
 									return;
 								}
 
+								if(isAttach) {
+									// For attach, send attach_start message
+									const attachId = crypto.randomUUID();
+									console.log('[Terminal WS] Starting Edge attach:', attachId, 'container:', containerId);
+									edgeExecSessions.set(attachId, { ws, execId: attachId, environmentId: target.environmentId });
+
+									(ws.data as any).edgeExecId = attachId;
+									conn.ws.send(JSON.stringify({ type: 'attach', containerId, attachId }));
+									return;
+								}
+
 								// Generate unique exec ID
 								const execId = crypto.randomUUID();
 								console.log('[Terminal WS] Starting Edge exec:', execId, 'container:', containerId);
@@ -480,9 +503,20 @@ function webSocketPlugin(): Plugin {
 								return;
 							}
 
-							// Direct Docker connection (unix or tcp/hawser-standard)
-							const exec = await createExecForWs(containerId, [shell], user, target);
-							const execId = exec.Id;
+							let httpRequest: string
+							let execId: string;
+
+							if(isAttach) {
+								// Attach mode
+								execId = crypto.randomUUID();
+								httpRequest = buildAttachHttpRequest(containerId, target);
+								console.log("[Terminal WS] Attaching to container: ", containerId, "execId:", execId);
+							} else {
+								// Exec mode
+								const exec = await createExecForWs(containerId, [shell], user, target);
+								httpRequest = buildExecStartHttpRequest(exec.Id, target);
+								console.log("[Terminal WS] Created exec: ", exec.Id, "for container:", containerId);
+							}
 
 							// Track connection state (using object for mutability across closures)
 							let headersStripped = false;
@@ -526,8 +560,6 @@ function webSocketPlugin(): Plugin {
 								},
 								error() {},
 								open(socket: any) {
-									// Send exec start request (using shared helper)
-									const httpRequest = buildExecStartHttpRequest(execId, target);
 									socket.write(httpRequest);
 								}
 							};