diff --git a/Dockerfile b/Dockerfile
index 6f8aa0d..9a08239 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -59,7 +59,7 @@ RUN chmod +x /usr/local/bin/docker-entrypoint.sh
 
 # Copy emergency scripts (only the emergency subfolder, not license generation scripts)
 COPY scripts/emergency/ ./scripts/
-RUN chmod +x ./scripts/*.sh 2>/dev/null || true
+RUN chmod +x ./scripts/*.sh ./scripts/**/*.sh 2>/dev/null || true
 
 # Create directories with proper ownership
 RUN mkdir -p /home/dockhand/.dockhand/stacks /app/data \
diff --git a/docker-entrypoint.sh b/docker-entrypoint.sh
index ecbc9b2..3f00ec4 100644
--- a/docker-entrypoint.sh
+++ b/docker-entrypoint.sh
@@ -12,6 +12,60 @@ if [ "$(id -u)" = "0" ]; then
     RUNNING_AS_ROOT=true
 fi
 
+# === Non-root mode (user: directive in compose) ===
+# If container started as non-root, skip all user management and run directly
+if [ "$RUNNING_AS_ROOT" = "false" ]; then
+    echo "Running as user $(id -u):$(id -g) (set via container user directive)"
+
+    # Ensure data directories exist (user must have write access to DATA_DIR via volume mount)
+    DATA_DIR="${DATA_DIR:-/app/data}"
+    if [ ! -d "$DATA_DIR/db" ]; then
+        echo "Creating database directory at $DATA_DIR/db"
+        mkdir -p "$DATA_DIR/db" 2>/dev/null || {
+            echo "ERROR: Cannot create $DATA_DIR/db directory"
+            echo "Ensure the data volume is mounted with correct permissions for user $(id -u):$(id -g)"
+            echo ""
+            echo "Example docker-compose.yml:"
+            echo "  volumes:"
+            echo "    - ./data:/app/data  # This directory must be writable by user $(id -u)"
+            exit 1
+        }
+    fi
+    if [ ! -d "$DATA_DIR/stacks" ]; then
+        mkdir -p "$DATA_DIR/stacks" 2>/dev/null || true
+    fi
+
+    # Check Docker socket access if mounted
+    SOCKET_PATH="/var/run/docker.sock"
+    if [ -S "$SOCKET_PATH" ]; then
+        if test -r "$SOCKET_PATH" 2>/dev/null; then
+            echo "Docker socket accessible at $SOCKET_PATH"
+            # Detect hostname from Docker if not set
+            if [ -z "$DOCKHAND_HOSTNAME" ]; then
+                DETECTED_HOSTNAME=$(curl -s --unix-socket "$SOCKET_PATH" http://localhost/info 2>/dev/null | sed -n 's/.*"Name":"\([^"]*\)".*/\1/p')
+                if [ -n "$DETECTED_HOSTNAME" ]; then
+                    export DOCKHAND_HOSTNAME="$DETECTED_HOSTNAME"
+                    echo "Detected Docker host hostname: $DOCKHAND_HOSTNAME"
+                fi
+            fi
+        else
+            SOCKET_GID=$(stat -c '%g' "$SOCKET_PATH" 2>/dev/null || echo "unknown")
+            echo "WARNING: Docker socket not readable by user $(id -u)"
+            echo "Add --group-add $SOCKET_GID to your docker run command"
+        fi
+    else
+        echo "No Docker socket found at $SOCKET_PATH"
+        echo "Configure Docker environments via the web UI (Settings > Environments)"
+    fi
+
+    # Run directly as current user (no su-exec needed)
+    if [ "$1" = "" ]; then
+        exec bun run ./build/index.js
+    else
+        exec "$@"
+    fi
+fi
+
 # === User Setup ===
 # Root mode: PUID=0 requested OR already running as root with default PUID/PGID
 if [ "$PUID" = "0" ]; then
diff --git a/src/images/logo.webp b/src/images/logo.webp
deleted file mode 100644
index 421abdf..0000000
Binary files a/src/images/logo.webp and /dev/null differ
diff --git a/src/lib/components/CodeEditor.svelte b/src/lib/components/CodeEditor.svelte
index f49406f..4cac179 100644
--- a/src/lib/components/CodeEditor.svelte
+++ b/src/lib/components/CodeEditor.svelte
@@ -3,11 +3,51 @@
 	import { EditorState, StateField, StateEffect, RangeSet } from '@codemirror/state';
 	import { EditorView, keymap, lineNumbers, highlightActiveLine, highlightActiveLineGutter, gutter, GutterMarker, Decoration, WidgetType, type DecorationSet } from '@codemirror/view';
 	import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
-	import { syntaxHighlighting, defaultHighlightStyle, indentOnInput, bracketMatching } from '@codemirror/language';
+	import { syntaxHighlighting, defaultHighlightStyle, indentOnInput, bracketMatching, StreamLanguage, type StreamParser } from '@codemirror/language';
 	import { searchKeymap, highlightSelectionMatches } from '@codemirror/search';
 	import { autocompletion, completionKeymap, closeBrackets, closeBracketsKeymap, type CompletionContext, type CompletionResult } from '@codemirror/autocomplete';
 	import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
 
+	// Simple dotenv/env file language parser
+	const dotenvParser: StreamParser<{ inValue: boolean }> = {
+		startState() {
+			return { inValue: false };
+		},
+		token(stream, state) {
+			// Start of line
+			if (stream.sol()) {
+				state.inValue = false;
+				// Skip leading whitespace
+				stream.eatSpace();
+				// Comment line
+				if (stream.peek() === '#') {
+					stream.skipToEnd();
+					return 'comment';
+				}
+			}
+			// If in value part, consume the rest
+			if (state.inValue) {
+				stream.skipToEnd();
+				return 'string';
+			}
+			// Variable name before =
+			if (stream.match(/^[a-zA-Z_][a-zA-Z0-9_]*/)) {
+				if (stream.peek() === '=') {
+					return 'variableName.definition';
+				}
+				return 'variableName';
+			}
+			// Equals sign - switch to value mode
+			if (stream.eat('=')) {
+				state.inValue = true;
+				return 'operator';
+			}
+			// Skip anything else
+			stream.next();
+			return null;
+		}
+	};
+
 	// Docker Compose keywords for autocomplete
 	const COMPOSE_TOP_LEVEL = ['services', 'networks', 'volumes', 'configs', 'secrets', 'name', 'version'];
 
@@ -453,6 +493,9 @@
 			case 'sh':
 				// No dedicated shell/dockerfile support, use basic highlighting
 				return [];
+			case 'dotenv':
+			case 'env':
+				return StreamLanguage.define(dotenvParser);
 			default:
 				return [];
 		}
@@ -542,6 +585,13 @@
 	// Track if we're initialized (prevents multiple createEditor calls)
 	let initialized = false;
 
+	// Debounce timer for marker updates (prevents flicker during fast typing)
+	let markerUpdateTimer: ReturnType<typeof setTimeout> | null = null;
+	const MARKER_UPDATE_DEBOUNCE_MS = 300;
+
+	// Track last applied markers to avoid redundant updates
+	let lastAppliedMarkersJson = '';
+
 	function createEditor() {
 		if (!container || view || initialized) return;
 		initialized = true;
@@ -551,12 +601,14 @@
 			: [dockhandLight, syntaxHighlighting(defaultHighlightStyle)];
 
 		// Build autocompletion config - add Docker Compose completions for YAML
+		// Note: activateOnTyping can interfere with key repeat, so we disable it
+		// Users can still trigger autocomplete manually with Ctrl+Space
 		const autocompletionConfig = language === 'yaml'
 			? autocompletion({
 				override: [composeCompletions, composeValueCompletions],
-				activateOnTyping: true
+				activateOnTyping: false
 			})
-			: autocompletion();
+			: autocompletion({ activateOnTyping: false });
 
 		const extensions = [
 			lineNumbers(),
@@ -594,18 +646,25 @@
 			extensions
 		});
 
-		// Custom transaction handler - this is SYNCHRONOUS and more reliable than updateListener
+		// Custom transaction handler - applies transactions synchronously but defers callback
 		// Based on the Svelte Playground pattern: https://svelte.dev/playground/91649ba3e0ce4122b3b34f3a95a00104
 		const dispatchTransactions = (trs: readonly import('@codemirror/state').Transaction[]) => {
 			if (!view) return;
 
-			// Apply all transactions
+			// Apply all transactions synchronously (required by CodeMirror)
 			view.update(trs);
 
 			// Check if any transaction changed the document
 			const lastChangingTr = trs.findLast(tr => tr.docChanged);
 			if (lastChangingTr && onchangeRef) {
-				onchangeRef(lastChangingTr.newDoc.toString());
+				// Defer callback to next microtask to avoid blocking input handling
+				// This allows key repeat to work properly
+				const newContent = lastChangingTr.newDoc.toString();
+				queueMicrotask(() => {
+					if (onchangeRef) {
+						onchangeRef(newContent);
+					}
+				});
 			}
 		};
 
@@ -615,7 +674,6 @@
 			dispatchTransactions
 		});
 
-
 		// Push initial markers if provided
 		if (variableMarkers.length > 0) {
 			view.dispatch({
@@ -625,11 +683,16 @@
 	}
 
 	function destroyEditor() {
+		if (markerUpdateTimer) {
+			clearTimeout(markerUpdateTimer);
+			markerUpdateTimer = null;
+		}
 		if (view) {
 			view.destroy();
 			view = null;
 		}
 		initialized = false;
+		lastAppliedMarkersJson = '';
 	}
 
 	// Get current editor content
@@ -656,11 +719,35 @@
 	}
 
 	// Update variable markers - this is the key method for parent to call
-	export function updateVariableMarkers(markers: VariableMarker[]) {
-		if (view) {
-			view.dispatch({
-				effects: updateMarkersEffect.of(markers)
-			});
+	// Debounced to prevent flicker during fast typing
+	export function updateVariableMarkers(markers: VariableMarker[], immediate = false) {
+		if (!view) return;
+
+		// Check if markers actually changed (compare by content, not reference)
+		const newJson = JSON.stringify(markers);
+		if (newJson === lastAppliedMarkersJson) {
+			return; // No change, skip update
+		}
+
+		// Clear any pending update
+		if (markerUpdateTimer) {
+			clearTimeout(markerUpdateTimer);
+			markerUpdateTimer = null;
+		}
+
+		const applyUpdate = () => {
+			if (view) {
+				lastAppliedMarkersJson = newJson;
+				view.dispatch({
+					effects: updateMarkersEffect.of(markers)
+				});
+			}
+		};
+
+		if (immediate) {
+			applyUpdate();
+		} else {
+			markerUpdateTimer = setTimeout(applyUpdate, MARKER_UPDATE_DEBOUNCE_MS);
 		}
 	}
 
@@ -693,12 +780,11 @@
 	});
 
 	// Update markers when prop changes (backup mechanism, parent should also call updateVariableMarkers)
+	// Uses the debounced update to prevent flicker during fast typing
 	$effect(() => {
 		const markers = variableMarkers;
 		if (view && markers) {
-			view.dispatch({
-				effects: updateMarkersEffect.of(markers)
-			});
+			updateVariableMarkers(markers);
 		}
 	});
 </script>
@@ -706,7 +792,6 @@
 <div
 	bind:this={container}
 	class="h-full w-full overflow-hidden {className}"
-	onkeydown={(e) => e.stopPropagation()}
 ></div>
 
 <style>
diff --git a/src/lib/components/PullTab.svelte b/src/lib/components/PullTab.svelte
index 6854f39..83091be 100644
--- a/src/lib/components/PullTab.svelte
+++ b/src/lib/components/PullTab.svelte
@@ -46,6 +46,8 @@
 	let status = $state<PullStatus>('idle');
 	let image = $state(initialImageName);
 	let duration = $state(0);
+	// Track whether image was set from initial prop vs typed by user
+	let hasAutoStarted = $state(false);
 
 	// Notify parent of status changes
 	$effect(() => {
@@ -82,8 +84,10 @@
 		onImageChange?.(image);
 	});
 
+	// Auto-start only once for prefilled images, not when user is typing
 	$effect(() => {
-		if (autoStart && image && status === 'idle') {
+		if (autoStart && initialImageName && image === initialImageName && status === 'idle' && !hasAutoStarted) {
+			hasAutoStarted = true;
 			startPull();
 		}
 	});
@@ -133,6 +137,7 @@
 		layerOrder = 0;
 		outputLines = [];
 		duration = 0;
+		hasAutoStarted = false;
 	}
 
 	export function getImage() {
diff --git a/src/lib/components/StackEnvVarsEditor.svelte b/src/lib/components/StackEnvVarsEditor.svelte
index 76bb626..53b1f0b 100644
--- a/src/lib/components/StackEnvVarsEditor.svelte
+++ b/src/lib/components/StackEnvVarsEditor.svelte
@@ -99,7 +99,7 @@
 <div class="space-y-3">
 	<!-- Variables List -->
 	<div class="space-y-3">
-		{#each variables as variable, index}
+		{#each variables as variable, index (index)}
 			{@const source = getSource(variable.key)}
 			{@const isVarRequired = isRequired(variable.key)}
 			{@const isVarOptional = isOptional(variable.key)}
diff --git a/src/lib/components/StackEnvVarsPanel.svelte b/src/lib/components/StackEnvVarsPanel.svelte
index 15446ec..482a896 100644
--- a/src/lib/components/StackEnvVarsPanel.svelte
+++ b/src/lib/components/StackEnvVarsPanel.svelte
@@ -1,12 +1,15 @@
 <script lang="ts">
+	import { tick, untrack } from 'svelte';
 	import { Button } from '$lib/components/ui/button';
 	import StackEnvVarsEditor, { type EnvVar, type ValidationResult } from '$lib/components/StackEnvVarsEditor.svelte';
+	import CodeEditor from '$lib/components/CodeEditor.svelte';
 	import ConfirmPopover from '$lib/components/ConfirmPopover.svelte';
-	import { Plus, Info, Upload, Trash2 } from 'lucide-svelte';
+	import { Plus, Info, Upload, Trash2, List, FileText, AlertTriangle } from 'lucide-svelte';
 	import * as Tooltip from '$lib/components/ui/tooltip';
 
 	interface Props {
-		variables: EnvVar[];
+		variables: EnvVar[]; // Bindable - kept in sync with rawContent
+		rawContent?: string; // The actual content saved to disk - source of truth
 		validation?: ValidationResult | null;
 		readonly?: boolean;
 		showSource?: boolean;
@@ -19,7 +22,8 @@
 	}
 
 	let {
-		variables = $bindable(),
+		variables = $bindable([]),
+		rawContent = $bindable(''),
 		validation = null,
 		readonly = false,
 		showSource = false,
@@ -31,44 +35,194 @@
 		onchange
 	}: Props = $props();
 
+	const STORAGE_KEY_VIEW_MODE = 'dockhand-env-vars-view-mode';
+
 	let fileInputRef: HTMLInputElement;
+	let viewMode = $state<'form' | 'text'>(
+		(typeof localStorage !== 'undefined' && localStorage.getItem(STORAGE_KEY_VIEW_MODE) as 'form' | 'text') || 'form'
+	);
+	let confirmClearOpen = $state(false);
+	let contentAreaRef: HTMLDivElement;
+	let parseWarnings = $state<string[]>([]);
+	let editorTheme = $state<'light' | 'dark'>('dark');
 
-	function addEnvVariable() {
-		variables = [...variables, { key: '', value: '', isSecret: false }];
-	}
+	// Track previous variables to detect form changes
+	let prevVariablesJson = $state('');
 
-	function handleLoadFromFile() {
-		fileInputRef?.click();
-	}
+	// Track if initial sync has been done (to distinguish initial load from user action)
+	let initialized = $state(false);
 
-	function parseEnvFile(content: string): EnvVar[] {
-		const lines = content.split('\n');
-		const envVars: EnvVar[] = [];
+	// Parse raw content to EnvVar array
+	function parseRawContent(content: string): { vars: EnvVar[], warnings: string[] } {
+		const result: EnvVar[] = [];
+		const warnings: string[] = [];
+		let lineNum = 0;
 
-		for (const line of lines) {
-			// Skip empty lines and comments
+		for (const line of content.split('\n')) {
+			lineNum++;
 			const trimmed = line.trim();
 			if (!trimmed || trimmed.startsWith('#')) continue;
 
-			// Parse KEY=VALUE format
 			const eqIndex = trimmed.indexOf('=');
-			if (eqIndex === -1) continue;
+			if (eqIndex === -1) {
+				warnings.push(`Line ${lineNum}: "${trimmed.slice(0, 30)}${trimmed.length > 30 ? '...' : ''}" (no = found)`);
+				continue;
+			}
 
 			const key = trimmed.slice(0, eqIndex).trim();
-			let value = trimmed.slice(eqIndex + 1).trim();
+			let value = trimmed.slice(eqIndex + 1);
 
-			// Remove surrounding quotes if present
 			if ((value.startsWith('"') && value.endsWith('"')) ||
 			    (value.startsWith("'") && value.endsWith("'"))) {
 				value = value.slice(1, -1);
 			}
 
 			if (key) {
-				envVars.push({ key, value, isSecret: false });
+				if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(key)) {
+					warnings.push(`Line ${lineNum}: "${key}" (invalid variable name)`);
+					continue;
+				}
+				result.push({
+					key,
+					value,
+					isSecret: existingSecretKeys.has(key) || false
+				});
 			}
 		}
 
-		return envVars;
+		return { vars: result, warnings };
+	}
+
+	// Update rawContent when variables change - replace var lines by position, preserve comments
+	function syncRawContentFromVariables(newVars: EnvVar[]) {
+		const lines = rawContent.split('\n');
+		const resultLines: string[] = [];
+		const varsWithKeys = newVars.filter(v => v.key.trim());
+		let varIdx = 0;
+
+		for (const line of lines) {
+			const trimmed = line.trim();
+			// Keep comments and blank lines
+			if (!trimmed || trimmed.startsWith('#')) {
+				resultLines.push(line);
+				continue;
+			}
+
+			const eqIndex = trimmed.indexOf('=');
+			if (eqIndex > 0) {
+				const key = trimmed.slice(0, eqIndex).trim();
+				if (/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(key)) {
+					// This is a valid variable line - replace with var at current index
+					if (varIdx < varsWithKeys.length) {
+						const v = varsWithKeys[varIdx];
+						resultLines.push(`${v.key.trim()}=${v.value}`);
+						varIdx++;
+					}
+					// If we have fewer vars, this line is deleted
+					continue;
+				}
+			}
+			// Keep invalid lines as-is
+			resultLines.push(line);
+		}
+
+		// Append any new variables
+		while (varIdx < varsWithKeys.length) {
+			const v = varsWithKeys[varIdx];
+			resultLines.push(`${v.key.trim()}=${v.value}`);
+			varIdx++;
+		}
+
+		let result = resultLines.join('\n');
+		if (result && !result.endsWith('\n')) {
+			result += '\n';
+		}
+		return result;
+	}
+
+	// When rawContent changes externally (text view, file load), update variables
+	$effect(() => {
+		const { vars, warnings } = parseRawContent(rawContent);
+		parseWarnings = warnings;
+
+		// Initial load with no .env file: don't overwrite DB-loaded variables
+		// Let the second $effect generate rawContent from the existing variables instead
+		if (!initialized && !rawContent.trim() && variables.length > 0) {
+			initialized = true;
+			return;
+		}
+		initialized = true;
+
+		// When rawContent has content, merge parsed vars with existing DB secrets
+		// This handles the case where .env file exists but DB has additional secrets
+		let finalVars = vars;
+		if (rawContent.trim()) {
+			const parsedKeys = new Set(vars.map(v => v.key));
+			const existingSecrets = untrack(() =>
+				variables.filter(v => v.isSecret && !parsedKeys.has(v.key))
+			);
+			if (existingSecrets.length > 0) {
+				finalVars = [...vars, ...existingSecrets];
+			}
+		}
+
+		const newJson = JSON.stringify(finalVars.map(v => ({ key: v.key, value: v.value })));
+		// Use untrack to read variables without creating a dependency on it
+		// This prevents the effect from running when variables changes (only rawContent should trigger it)
+		const currentNonEmptyJson = untrack(() =>
+			JSON.stringify(variables.filter(v => v.key.trim()).map(v => ({ key: v.key, value: v.value })))
+		);
+
+		if (newJson !== currentNonEmptyJson) {
+			variables = finalVars;
+			prevVariablesJson = newJson;
+		}
+	});
+
+	// When variables change from form edits, update rawContent
+	$effect(() => {
+		const currentJson = JSON.stringify(variables.map(v => ({ key: v.key, value: v.value })));
+
+		// Only sync if variables actually changed (not from parsing rawContent)
+		if (currentJson !== prevVariablesJson) {
+			prevVariablesJson = currentJson;
+			const newRaw = syncRawContentFromVariables(variables);
+			if (newRaw !== rawContent) {
+				rawContent = newRaw;
+			}
+		}
+	});
+
+	function handleTextChange(value: string) {
+		rawContent = value;
+		onchange?.();
+	}
+
+	function handleViewModeChange(newMode: 'form' | 'text') {
+		viewMode = newMode;
+		localStorage.setItem(STORAGE_KEY_VIEW_MODE, newMode);
+	}
+
+	async function addEnvVariable() {
+		variables = [...variables, { key: '', value: '', isSecret: false }];
+		onchange?.();
+		await tick();
+		if (contentAreaRef) {
+			contentAreaRef.scrollTop = contentAreaRef.scrollHeight;
+		}
+	}
+
+	async function addMissingVariable(key: string) {
+		variables = [...variables, { key, value: '', isSecret: false }];
+		onchange?.();
+		await tick();
+		if (contentAreaRef) {
+			contentAreaRef.scrollTop = contentAreaRef.scrollHeight;
+		}
+	}
+
+	function handleLoadFromFile() {
+		fileInputRef?.click();
 	}
 
 	function handleFileSelect(event: Event) {
@@ -78,90 +232,90 @@
 
 		const reader = new FileReader();
 		reader.onload = (e) => {
-			const content = e.target?.result as string;
-			const parsedVars = parseEnvFile(content);
-
-			if (parsedVars.length > 0) {
-				// Get existing keys to avoid duplicates
-				const existingKeys = new Set(variables.filter(v => v.key.trim()).map(v => v.key.trim()));
-
-				// Filter empty entries from current variables
-				const nonEmptyVars = variables.filter(v => v.key.trim());
-
-				// Add new variables, updating existing ones or appending new
-				for (const newVar of parsedVars) {
-					if (existingKeys.has(newVar.key)) {
-						// Update existing variable
-						const idx = nonEmptyVars.findIndex(v => v.key.trim() === newVar.key);
-						if (idx !== -1) {
-							nonEmptyVars[idx] = { ...nonEmptyVars[idx], value: newVar.value };
-						}
-					} else {
-						// Add new variable
-						nonEmptyVars.push(newVar);
-						existingKeys.add(newVar.key);
-					}
-				}
-
-				variables = nonEmptyVars;
-				// Notify parent of change (important for async file load)
-				onchange?.();
-			}
+			rawContent = e.target?.result as string;
+			onchange?.();
 		};
 		reader.readAsText(file);
-
-		// Reset input so the same file can be selected again
 		input.value = '';
 	}
 
-	function clearAllVariables() {
+	function clearAll() {
+		rawContent = '';
 		variables = [];
+		onchange?.();
 	}
 
-	// Count of non-empty variables
-	const hasVariables = $derived(variables.some(v => v.key.trim()));
+	const hasContent = $derived(!!rawContent?.trim() || variables.some(v => v.key.trim()));
 </script>
 
 <div class="flex flex-col h-full {className}">
 	<!-- Header -->
 	<div class="px-4 py-2.5 border-b border-zinc-200 dark:border-zinc-700 flex flex-col gap-1.5">
-		<div class="flex items-center justify-between">
-			<div class="flex items-center gap-2">
+		<div class="flex items-center justify-between gap-2">
+			<div class="flex items-center gap-2 flex-nowrap min-w-0">
 				<span class="text-xs text-zinc-500 dark:text-zinc-400">Environment variables</span>
 				{#if infoText}
 					<Tooltip.Root>
 						<Tooltip.Trigger>
 							<Info class="w-3.5 h-3.5 text-blue-400" />
 						</Tooltip.Trigger>
-						<Tooltip.Content class="max-w-md">
-							<p class="text-xs">{infoText}</p>
-						</Tooltip.Content>
+						<Tooltip.Portal>
+							<Tooltip.Content side="bottom" sideOffset={8} class="max-w-xs w-64 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 border-zinc-200 dark:border-zinc-700">
+								<p class="text-xs text-left">{infoText}</p>
+							</Tooltip.Content>
+						</Tooltip.Portal>
 					</Tooltip.Root>
 				{/if}
+				<!-- View mode toggle -->
+				<div class="flex items-center gap-0.5 bg-zinc-100 dark:bg-zinc-800 rounded p-0.5 ml-1">
+					<button
+						type="button"
+						class="flex items-center gap-1 px-1.5 py-0.5 rounded text-2xs transition-colors {viewMode === 'form' ? 'bg-white dark:bg-zinc-700 text-zinc-800 dark:text-zinc-100 shadow-sm' : 'text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200'}"
+						onclick={() => handleViewModeChange('form')}
+						title="Form view"
+					>
+						<List class="w-3 h-3" />
+					</button>
+					<button
+						type="button"
+						class="flex items-center gap-1 px-1.5 py-0.5 rounded text-2xs transition-colors {viewMode === 'text' ? 'bg-white dark:bg-zinc-700 text-zinc-800 dark:text-zinc-100 shadow-sm' : 'text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200'}"
+						onclick={() => handleViewModeChange('text')}
+						title="Text view (raw .env file)"
+					>
+						<FileText class="w-3 h-3" />
+					</button>
+				</div>
 			</div>
 			{#if !readonly}
-				<div class="flex items-center gap-1">
+				<div class="flex items-center gap-1 shrink-0 ml-4">
 					<Button type="button" size="sm" variant="ghost" onclick={handleLoadFromFile} class="h-6 text-xs px-2">
 						<Upload class="w-3.5 h-3.5 mr-1" />
 						Load .env
 					</Button>
-					<Button type="button" size="sm" variant="ghost" onclick={addEnvVariable} class="h-6 text-xs px-2">
-						<Plus class="w-3.5 h-3.5 mr-1" />
-						Add
-					</Button>
-					{#if hasVariables}
-						<ConfirmPopover
-							title="Clear all variables"
-							description="This will remove all environment variables. This cannot be undone."
-							confirmText="Clear all"
-							onConfirm={clearAllVariables}
-						>
-							<Button type="button" size="sm" variant="ghost" class="h-6 text-xs px-2 text-destructive hover:text-destructive">
-								<Trash2 class="w-3.5 h-3.5 mr-1" />
-								Clear
-							</Button>
-						</ConfirmPopover>
+					{#if viewMode === 'form'}
+						<Button type="button" size="sm" variant="ghost" onclick={addEnvVariable} class="h-6 text-xs px-2">
+							<Plus class="w-3.5 h-3.5 mr-1" />
+							Add
+						</Button>
 					{/if}
+					<div class="{hasContent ? '' : 'invisible'}">
+						<ConfirmPopover
+							bind:open={confirmClearOpen}
+							title="Clear all variables?"
+							action="clear"
+							itemType="environment variables"
+							confirmText="Clear all"
+							onConfirm={clearAll}
+							onOpenChange={(o) => confirmClearOpen = o}
+						>
+							{#snippet children({ open })}
+								<Button type="button" size="sm" variant="ghost" class="h-6 text-xs px-2 text-destructive hover:text-destructive">
+									<Trash2 class="w-3.5 h-3.5 mr-1" />
+									Clear
+								</Button>
+							{/snippet}
+						</ConfirmPopover>
+					</div>
 				</div>
 				<input
 					bind:this={fileInputRef}
@@ -172,47 +326,44 @@
 				/>
 			{/if}
 		</div>
-		<!-- Variable syntax help -->
-		<div class="flex flex-wrap gap-x-3 gap-y-0.5 text-2xs text-zinc-400 dark:text-zinc-500 font-mono">
-			<span><span class="text-zinc-500 dark:text-zinc-400">${`{VAR}`}</span> required</span>
-			<span><span class="text-zinc-500 dark:text-zinc-400">${`{VAR:-default}`}</span> optional</span>
-			<span><span class="text-zinc-500 dark:text-zinc-400">${`{VAR:?error}`}</span> required w/ error</span>
-		</div>
-		<!-- Validation status pills -->
-		{#if validation}
-			<div class="flex flex-wrap gap-1">
-				{#if validation.missing.length > 0}
-					<span class="inline-flex items-center px-1.5 py-0.5 rounded text-2xs font-medium bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300">
-						{validation.missing.length} missing
-					</span>
-				{/if}
-				{#if validation.required.length > 0}
-					<span class="inline-flex items-center px-1.5 py-0.5 rounded text-2xs font-medium bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300">
-						{validation.required.length - validation.missing.length} required
-					</span>
-				{/if}
-				{#if validation.optional.length > 0}
-					<span class="inline-flex items-center px-1.5 py-0.5 rounded text-2xs font-medium bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300">
-						{validation.optional.length} optional
-					</span>
-				{/if}
-				{#if validation.unused.length > 0}
-					<span class="inline-flex items-center px-1.5 py-0.5 rounded text-2xs font-medium bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300">
-						{validation.unused.length} unused
-					</span>
-				{/if}
+		<!-- Help text -->
+		{#if viewMode === 'form'}
+			<div class="flex flex-wrap gap-x-3 gap-y-0.5 text-2xs text-zinc-400 dark:text-zinc-500 font-mono">
+				<span><span class="text-zinc-500 dark:text-zinc-400">${`{VAR}`}</span> required</span>
+				<span><span class="text-zinc-500 dark:text-zinc-400">${`{VAR:-default}`}</span> optional</span>
+				<span><span class="text-zinc-500 dark:text-zinc-400">${`{VAR:?error}`}</span> required w/ error</span>
+			</div>
+		{:else}
+			<div class="text-2xs text-zinc-400 dark:text-zinc-500">
+				Raw .env file (comments preserved, saved exactly as typed)
 			</div>
 		{/if}
-		<!-- Add missing variables -->
-		{#if validation && validation.missing.length > 0 && !readonly}
+		<!-- Parse warnings (form mode only) -->
+		{#if viewMode === 'form' && parseWarnings.length > 0}
+			<div class="flex items-start gap-2 px-2 py-1.5 rounded bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800/50">
+				<AlertTriangle class="w-3.5 h-3.5 text-amber-500 shrink-0 mt-0.5" />
+				<div class="text-2xs text-amber-700 dark:text-amber-300">
+					<span class="font-medium">Some lines couldn't be parsed:</span>
+					<ul class="mt-0.5 list-disc list-inside">
+						{#each parseWarnings.slice(0, 3) as warning}
+							<li>{warning}</li>
+						{/each}
+						{#if parseWarnings.length > 3}
+							<li>...and {parseWarnings.length - 3} more</li>
+						{/if}
+					</ul>
+					<p class="mt-1 text-amber-600 dark:text-amber-400">Switch to text view to edit these lines.</p>
+				</div>
+			</div>
+		{/if}
+		<!-- Add missing variables (form mode only) -->
+		{#if viewMode === 'form' && validation && validation.missing.length > 0 && !readonly}
 			<div class="flex flex-wrap gap-1 items-center">
 				<span class="text-xs text-muted-foreground mr-1">Add missing:</span>
 				{#each validation.missing as missing}
 					<button
 						type="button"
-						onclick={() => {
-							variables = [...variables, { key: missing, value: '', isSecret: false }];
-						}}
+						onclick={() => addMissingVariable(missing)}
 						class="text-xs px-1.5 py-0.5 rounded bg-red-100 text-red-700 hover:bg-red-200 dark:bg-red-900/30 dark:text-red-300 dark:hover:bg-red-900/50 transition-colors"
 					>
 						{missing}
@@ -221,16 +372,27 @@
 			</div>
 		{/if}
 	</div>
-	<!-- Variables list -->
-	<div class="flex-1 overflow-auto px-4 py-3">
-		<StackEnvVarsEditor
-			bind:variables
-			{validation}
-			{readonly}
-			{showSource}
-			{sources}
-			{placeholder}
-			{existingSecretKeys}
-		/>
+	<!-- Content area -->
+	<div bind:this={contentAreaRef} class="flex-1 overflow-auto px-4 py-3">
+		{#if viewMode === 'form'}
+			<StackEnvVarsEditor
+				bind:variables
+				{validation}
+				{readonly}
+				{showSource}
+				{sources}
+				{placeholder}
+				{existingSecretKeys}
+			/>
+		{:else}
+			<CodeEditor
+				value={rawContent}
+				language="dotenv"
+				theme={editorTheme}
+				readonly={readonly}
+				onchange={handleTextChange}
+				class="h-full min-h-[200px] rounded-md overflow-hidden border border-zinc-200 dark:border-zinc-700"
+			/>
+		{/if}
 	</div>
 </div>
diff --git a/src/lib/data/changelog.json b/src/lib/data/changelog.json
index 74b1be9..cb0081a 100644
--- a/src/lib/data/changelog.json
+++ b/src/lib/data/changelog.json
@@ -1,4 +1,24 @@
 [
+  {
+    "version": "1.0.5",
+    "date": "2026-01-01",
+    "changes": [
+      { "type": "feature", "text": "Clicking container name opens container details" },
+      { "type": "feature", "text": "Clicking stack name opens stack editor (internal stacks)" },
+      { "type": "feature", "text": "Stack env editor now supports freestyle text entry for pasting env contents" },
+      { "type": "feature", "text": "Stack env vars saved as .env file next to compose, respecting external edits" },
+      { "type": "feature", "text": "Additional container options: ulimits, security options, DNS settings" },
+      { "type": "fix", "text": "More detailed error messages when stack fails to start" },
+      { "type": "fix", "text": "Container startup with user: directive in compose" },
+      { "type": "fix", "text": "Stack editor flickering when typing fast" },
+      { "type": "fix", "text": "Container unhealthy notifications not triggering" },
+      { "type": "fix", "text": "tlsSkipVerify not being saved in environment settings" },
+      { "type": "fix", "text": "MFA available to all users without enterprise license" },
+      { "type": "fix", "text": "Socket proxy documentation and examples" },
+      { "type": "fix", "text": "Edit container modal reloading during editing" }
+    ],
+    "imageTag": "fnsys/dockhand:v1.0.5"
+  },
   {
     "version": "1.0.4",
     "date": "2025-12-28",
diff --git a/src/lib/server/auth.ts b/src/lib/server/auth.ts
index dd862bd..360c85d 100644
--- a/src/lib/server/auth.ts
+++ b/src/lib/server/auth.ts
@@ -747,12 +747,70 @@ function getAttributeValue(entry: any, attribute: string): string | undefined {
 }
 
 // ============================================
-// MFA (TOTP)
+// MFA (TOTP) with Backup Codes
 // ============================================
 
 import * as OTPAuth from 'otpauth';
 import * as QRCode from 'qrcode';
 
+// MFA data stored in mfaSecret field as JSON
+interface MfaData {
+	secret: string;           // TOTP secret (base32)
+	backupCodes: string[];    // Hashed backup codes (unused ones)
+}
+
+/**
+ * Generate 10 random backup codes (8 characters each, alphanumeric)
+ */
+function generateBackupCodes(): string[] {
+	const codes: string[] = [];
+	const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789'; // Removed confusable chars: 0, O, 1, I
+	for (let i = 0; i < 10; i++) {
+		let code = '';
+		for (let j = 0; j < 8; j++) {
+			code += chars.charAt(Math.floor(Math.random() * chars.length));
+		}
+		codes.push(code);
+	}
+	return codes;
+}
+
+/**
+ * Hash a backup code for storage
+ */
+async function hashBackupCode(code: string): Promise<string> {
+	// Normalize: uppercase, remove spaces and dashes
+	const normalized = code.toUpperCase().replace(/[\s-]/g, '');
+	const hasher = new Bun.CryptoHasher('sha256');
+	hasher.update(normalized);
+	return hasher.digest('hex');
+}
+
+/**
+ * Parse MFA data from database field
+ */
+function parseMfaData(mfaSecret: string | null | undefined): MfaData | null {
+	if (!mfaSecret) return null;
+
+	try {
+		// Try parsing as JSON first (new format)
+		const parsed = JSON.parse(mfaSecret);
+		if (parsed && typeof parsed.secret === 'string') {
+			return {
+				secret: parsed.secret,
+				backupCodes: parsed.backupCodes || []
+			};
+		}
+	} catch {
+		// Legacy format: plain base32 secret string
+		return {
+			secret: mfaSecret,
+			backupCodes: []
+		};
+	}
+	return null;
+}
+
 /**
  * Generate MFA secret and QR code for setup
  */
@@ -787,18 +845,24 @@ export async function generateMfaSetup(userId: number): Promise<{
 		margin: 2
 	});
 
-	// Store secret temporarily (user must verify before it's enabled)
-	await updateUser(userId, { mfaSecret: secretBase32 });
+	// Store secret temporarily as JSON (user must verify before it's enabled)
+	// Backup codes will be generated after verification
+	const mfaData: MfaData = { secret: secretBase32, backupCodes: [] };
+	await updateUser(userId, { mfaSecret: JSON.stringify(mfaData) });
 
 	return { secret: secretBase32, qrDataUrl };
 }
 
 /**
  * Verify MFA token and enable MFA if valid
+ * Returns backup codes on success (shown only once)
  */
-export async function verifyAndEnableMfa(userId: number, token: string): Promise<boolean> {
+export async function verifyAndEnableMfa(userId: number, token: string): Promise<{ success: false } | { success: true; backupCodes: string[] }> {
 	const user = await getUser(userId);
-	if (!user || !user.mfaSecret) return false;
+	if (!user || !user.mfaSecret) return { success: false };
+
+	const mfaData = parseMfaData(user.mfaSecret);
+	if (!mfaData) return { success: false };
 
 	const totp = new OTPAuth.TOTP({
 		issuer: 'Dockhand',
@@ -806,35 +870,74 @@ export async function verifyAndEnableMfa(userId: number, token: string): Promise
 		algorithm: 'SHA1',
 		digits: 6,
 		period: 30,
-		secret: OTPAuth.Secret.fromBase32(user.mfaSecret)
+		secret: OTPAuth.Secret.fromBase32(mfaData.secret)
 	});
 
 	const delta = totp.validate({ token, window: 1 });
-	if (delta === null) return false;
+	if (delta === null) return { success: false };
 
-	// Enable MFA
-	await updateUser(userId, { mfaEnabled: true });
-	return true;
+	// Generate backup codes
+	const plainBackupCodes = generateBackupCodes();
+	const hashedBackupCodes = await Promise.all(plainBackupCodes.map(hashBackupCode));
+
+	// Update MFA data with hashed backup codes and enable MFA
+	const updatedMfaData: MfaData = {
+		secret: mfaData.secret,
+		backupCodes: hashedBackupCodes
+	};
+	await updateUser(userId, {
+		mfaEnabled: true,
+		mfaSecret: JSON.stringify(updatedMfaData)
+	});
+
+	// Return plain backup codes (shown only once)
+	return { success: true, backupCodes: plainBackupCodes };
 }
 
 /**
- * Verify MFA token during login
+ * Verify MFA token during login (accepts TOTP code or backup code)
  */
 export async function verifyMfaToken(userId: number, token: string): Promise<boolean> {
 	const user = await getUser(userId);
 	if (!user || !user.mfaEnabled || !user.mfaSecret) return false;
 
+	const mfaData = parseMfaData(user.mfaSecret);
+	if (!mfaData) return false;
+
+	// First, try TOTP verification
 	const totp = new OTPAuth.TOTP({
 		issuer: 'Dockhand',
 		label: user.username,
 		algorithm: 'SHA1',
 		digits: 6,
 		period: 30,
-		secret: OTPAuth.Secret.fromBase32(user.mfaSecret)
+		secret: OTPAuth.Secret.fromBase32(mfaData.secret)
 	});
 
 	const delta = totp.validate({ token, window: 1 });
-	return delta !== null;
+	if (delta !== null) return true;
+
+	// If TOTP fails, try backup code
+	if (mfaData.backupCodes && mfaData.backupCodes.length > 0) {
+		const hashedInput = await hashBackupCode(token);
+		const codeIndex = mfaData.backupCodes.indexOf(hashedInput);
+
+		if (codeIndex !== -1) {
+			// Remove used backup code
+			const updatedBackupCodes = [...mfaData.backupCodes];
+			updatedBackupCodes.splice(codeIndex, 1);
+
+			const updatedMfaData: MfaData = {
+				secret: mfaData.secret,
+				backupCodes: updatedBackupCodes
+			};
+			await updateUser(userId, { mfaSecret: JSON.stringify(updatedMfaData) });
+
+			return true;
+		}
+	}
+
+	return false;
 }
 
 /**
diff --git a/src/lib/server/db.ts b/src/lib/server/db.ts
index fd2225c..6426230 100644
--- a/src/lib/server/db.ts
+++ b/src/lib/server/db.ts
@@ -156,6 +156,7 @@ export async function updateEnvironment(id: number, env: Partial<Environment>):
 	if (env.tlsCa !== undefined) updateData.tlsCa = env.tlsCa;
 	if (env.tlsCert !== undefined) updateData.tlsCert = env.tlsCert;
 	if (env.tlsKey !== undefined) updateData.tlsKey = env.tlsKey;
+	if (env.tlsSkipVerify !== undefined) updateData.tlsSkipVerify = env.tlsSkipVerify;
 	if (env.icon !== undefined) updateData.icon = env.icon;
 	if (env.socketPath !== undefined) updateData.socketPath = env.socketPath;
 	if (env.collectActivity !== undefined) updateData.collectActivity = env.collectActivity;
@@ -808,6 +809,7 @@ export interface SmtpConfig {
 	from_email: string;
 	from_name?: string;
 	to_emails: string[];
+	skipTlsVerify?: boolean; // Skip TLS certificate verification (useful for self-signed certs)
 }
 
 export interface AppriseConfig {
diff --git a/src/lib/server/db/schema/index.ts b/src/lib/server/db/schema/index.ts
index 8f78d85..aeab9e6 100644
--- a/src/lib/server/db/schema/index.ts
+++ b/src/lib/server/db/schema/index.ts
@@ -181,7 +181,7 @@ export const users = sqliteTable('users', {
 	avatar: text('avatar'),
 	authProvider: text('auth_provider').default('local'), // e.g., 'local', 'oidc:Keycloak', 'ldap:AD'
 	mfaEnabled: integer('mfa_enabled', { mode: 'boolean' }).default(false),
-	mfaSecret: text('mfa_secret'),
+	mfaSecret: text('mfa_secret'), // JSON: { secret: string, backupCodes: string[] }
 	isActive: integer('is_active', { mode: 'boolean' }).default(true),
 	lastLogin: text('last_login'),
 	createdAt: text('created_at').default(sql`CURRENT_TIMESTAMP`),
diff --git a/src/lib/server/db/schema/pg-schema.ts b/src/lib/server/db/schema/pg-schema.ts
index 8533357..6b37bf6 100644
--- a/src/lib/server/db/schema/pg-schema.ts
+++ b/src/lib/server/db/schema/pg-schema.ts
@@ -184,7 +184,7 @@ export const users = pgTable('users', {
 	avatar: text('avatar'),
 	authProvider: text('auth_provider').default('local'), // e.g., 'local', 'oidc:Keycloak', 'ldap:AD'
 	mfaEnabled: boolean('mfa_enabled').default(false),
-	mfaSecret: text('mfa_secret'),
+	mfaSecret: text('mfa_secret'), // JSON: { secret: string, backupCodes: string[] }
 	isActive: boolean('is_active').default(true),
 	lastLogin: timestamp('last_login', { mode: 'string' }),
 	createdAt: timestamp('created_at', { mode: 'string' }).defaultNow(),
diff --git a/src/lib/server/docker.ts b/src/lib/server/docker.ts
index f16d1d5..0b76f45 100644
--- a/src/lib/server/docker.ts
+++ b/src/lib/server/docker.ts
@@ -677,10 +677,13 @@ export async function listContainers(all = true, envId?: number | null): Promise
 		}));
 
 		// Extract health status from Status string
+		// Docker formats: "(healthy)", "(unhealthy)", "(health: starting)"
 		let health: string | undefined;
-		const healthMatch = container.Status?.match(/\((healthy|unhealthy|starting)\)/i);
+		const healthMatch = container.Status?.match(/\((healthy|unhealthy|health:\s*starting)\)/i);
 		if (healthMatch) {
-			health = healthMatch[1].toLowerCase();
+			const matched = healthMatch[1].toLowerCase();
+			// Normalize "health: starting" to just "starting"
+			health = matched.includes('starting') ? 'starting' : matched;
 		}
 
 		return {
@@ -803,6 +806,7 @@ export interface CreateContainerOptions {
 	labels?: { [key: string]: string };
 	cmd?: string[];
 	restartPolicy?: string;
+	restartMaxRetries?: number;
 	networkMode?: string;
 	networks?: string[];
 	user?: string;
@@ -831,7 +835,10 @@ export async function createContainer(options: CreateContainerOptions, envId?: n
 		Labels: options.labels || {},
 		HostConfig: {
 			RestartPolicy: {
-				Name: options.restartPolicy || 'no'
+				Name: options.restartPolicy || 'no',
+				...(options.restartPolicy === 'on-failure' && options.restartMaxRetries !== undefined
+					? { MaximumRetryCount: options.restartMaxRetries }
+					: {})
 			}
 		}
 	};
@@ -888,9 +895,9 @@ export async function createContainer(options: CreateContainerOptions, envId?: n
 	if (options.networks && options.networks.length > 0) {
 		containerConfig.HostConfig.NetworkMode = options.networks[0];
 		containerConfig.NetworkingConfig = {
-			EndpointsConfig: {
-				[options.networks[0]]: {}
-			}
+			EndpointsConfig: Object.fromEntries(
+				options.networks.map(network => [network, {}])
+			)
 		};
 	}
 
@@ -963,21 +970,6 @@ export async function createContainer(options: CreateContainerOptions, envId?: n
 		envId
 	);
 
-	// Connect to additional networks after container creation
-	if (options.networks && options.networks.length > 1) {
-		for (let i = 1; i < options.networks.length; i++) {
-			await dockerFetch(
-				`/networks/${options.networks[i]}/connect`,
-				{
-					method: 'POST',
-					headers: { 'Content-Type': 'application/json' },
-					body: JSON.stringify({ Container: result.Id })
-				},
-				envId
-			);
-		}
-	}
-
 	return { id: result.Id, start: () => startContainer(result.Id, envId) };
 }
 
diff --git a/src/lib/server/git.ts b/src/lib/server/git.ts
index 00d8d55..c7f109e 100644
--- a/src/lib/server/git.ts
+++ b/src/lib/server/git.ts
@@ -1,5 +1,5 @@
 import { existsSync, mkdirSync, rmSync, chmodSync } from 'node:fs';
-import { join, resolve } from 'node:path';
+import { join, resolve, dirname } from 'node:path';
 import {
 	getGitRepository,
 	getGitCredential,
@@ -134,7 +134,9 @@ export interface SyncResult {
 	success: boolean;
 	commit?: string;
 	composeContent?: string;
+	composeDir?: string; // Directory containing the compose file (for copying all files)
 	envFileVars?: Record<string, string>; // Variables from .env file in repo
+	envFileContent?: string; // Raw .env file content (for Hawser deployments)
 	error?: string;
 	updated?: boolean;
 }
@@ -609,16 +611,21 @@ export async function syncGitStack(stackId: number): Promise<SyncResult> {
 		console.log(`${logPrefix} Compose content:`);
 		console.log(composeContent);
 
+		// Determine the compose directory (for copying all files)
+		const composeDir = dirname(composePath);
+		console.log(`${logPrefix} Compose directory:`, composeDir);
+
 		// Read env file if configured (optional - don't fail if missing)
 		let envFileVars: Record<string, string> | undefined;
+		let envFileContent: string | undefined;
 		if (gitStack.envFilePath) {
 			const envFilePath = join(repoPath, gitStack.envFilePath);
 			console.log(`${logPrefix} Looking for env file at:`, envFilePath);
 			if (existsSync(envFilePath)) {
 				try {
 					console.log(`${logPrefix} Reading env file...`);
-					const envContent = await Bun.file(envFilePath).text();
-					envFileVars = parseEnvFileContent(envContent, gitStack.stackName);
+					envFileContent = await Bun.file(envFilePath).text();
+					envFileVars = parseEnvFileContent(envFileContent, gitStack.stackName);
 					console.log(`${logPrefix} Env file parsed, vars count:`, Object.keys(envFileVars).length);
 				} catch (err) {
 					// Log but don't fail - env file is optional
@@ -653,6 +660,7 @@ export async function syncGitStack(stackId: number): Promise<SyncResult> {
 			success: true,
 			commit: currentCommit,
 			composeContent,
+			composeDir,
 			envFileVars,
 			updated
 		};
@@ -719,11 +727,13 @@ export async function deployGitStack(stackId: number, options?: { force?: boolea
 	// This ensures containers pick up new env var values even if compose file didn't change
 	// Note: Without this, docker compose only detects compose file changes, not env var changes
 	console.log(`${logPrefix} Calling deployStack...`);
+	console.log(`${logPrefix} Source directory (composeDir):`, syncResult.composeDir);
 	const result = await deployStack({
 		name: gitStack.stackName,
 		compose: syncResult.composeContent!,
 		envId: gitStack.environmentId,
 		envFileVars: syncResult.envFileVars,
+		sourceDir: syncResult.composeDir, // Copy entire directory from git repo
 		forceRecreate
 	});
 
@@ -917,6 +927,9 @@ export async function deployGitStackWithProgress(
 
 		const composeContent = await Bun.file(composePath).text();
 
+		// Determine the compose directory (for copying all files)
+		const composeDir = dirname(composePath);
+
 		// Read env file if configured (optional - don't fail if missing)
 		let envFileVars: Record<string, string> | undefined;
 		if (gitStack.envFilePath) {
@@ -951,7 +964,8 @@ export async function deployGitStackWithProgress(
 			name: gitStack.stackName,
 			compose: composeContent,
 			envId: gitStack.environmentId,
-			envFileVars
+			envFileVars,
+			sourceDir: composeDir // Copy entire directory from git repo
 		});
 
 		if (result.success) {
diff --git a/src/lib/server/notifications.ts b/src/lib/server/notifications.ts
index 555e239..c83c545 100644
--- a/src/lib/server/notifications.ts
+++ b/src/lib/server/notifications.ts
@@ -27,6 +27,9 @@ async function sendSmtpNotification(config: SmtpConfig, payload: NotificationPay
 			auth: config.username ? {
 				user: config.username,
 				pass: config.password
+			} : undefined,
+			tls: config.skipTlsVerify ? {
+				rejectUnauthorized: false
 			} : undefined
 		});
 
diff --git a/src/lib/server/stacks.ts b/src/lib/server/stacks.ts
index d4c99a1..4bcb09e 100644
--- a/src/lib/server/stacks.ts
+++ b/src/lib/server/stacks.ts
@@ -5,11 +5,12 @@
  * All lifecycle operations use docker compose commands.
  */
 
-import { existsSync, mkdirSync, rmSync, readdirSync } from 'node:fs';
+import { existsSync, mkdirSync, rmSync, readdirSync, cpSync, statSync } from 'node:fs';
 import { join, resolve } from 'node:path';
 import {
 	getEnvironment,
 	getStackEnvVarsAsRecord,
+	setStackEnvVars,
 	getStackSource,
 	upsertStackSource,
 	deleteStackSource,
@@ -76,6 +77,7 @@ export interface DeployStackOptions {
 	compose: string;
 	envId?: number | null;
 	envFileVars?: Record<string, string>;
+	sourceDir?: string; // Directory to copy all files from (for git stacks)
 	forceRecreate?: boolean;
 }
 
@@ -156,6 +158,35 @@ async function withStackLock<T>(stackName: string, fn: () => Promise<T>): Promis
 const COMPOSE_TIMEOUT_MS = 5 * 60 * 1000; // 5 minutes
 const COMPOSE_KILL_GRACE_MS = 5000; // 5 seconds grace period before SIGKILL
 
+/**
+ * Read all files from a directory as a map of relative path -> content.
+ * Used to send files to Hawser for remote deployments.
+ */
+async function readDirFilesAsMap(dirPath: string): Promise<Record<string, string>> {
+	const files: Record<string, string> = {};
+
+	async function scanDir(currentPath: string, relativePath: string = ''): Promise<void> {
+		const entries = readdirSync(currentPath, { withFileTypes: true });
+		for (const entry of entries) {
+			const fullPath = join(currentPath, entry.name);
+			const relPath = relativePath ? `${relativePath}/${entry.name}` : entry.name;
+
+			if (entry.isDirectory()) {
+				// Skip .git directory
+				if (entry.name === '.git') continue;
+				await scanDir(fullPath, relPath);
+			} else if (entry.isFile()) {
+				// Read file content
+				const content = await Bun.file(fullPath).text();
+				files[relPath] = content;
+			}
+		}
+	}
+
+	await scanDir(dirPath);
+	return files;
+}
+
 // =============================================================================
 // DEBUG UTILITIES
 // =============================================================================
@@ -316,6 +347,7 @@ interface ComposeCommandOptions {
 	envId?: number | null;
 	forceRecreate?: boolean;
 	removeVolumes?: boolean;
+	stackFiles?: Record<string, string>; // All files to send to Hawser
 }
 
 /**
@@ -338,11 +370,14 @@ async function executeLocalCompose(
 	const composeFile = join(stackDir, 'docker-compose.yml');
 	await Bun.write(composeFile, composeContent);
 
+	// Note: .env file is written when env vars are saved via API
+	// Docker compose automatically reads .env from the stack directory
+	// We only need to pass env vars to process environment for variable substitution
+	// in case the .env file doesn't exist yet (e.g., first deploy)
 	const spawnEnv: Record<string, string> = { ...(process.env as Record<string, string>) };
 	if (dockerHost) {
 		spawnEnv.DOCKER_HOST = dockerHost;
 	}
-	// Add stack-specific environment variables
 	if (envVars) {
 		Object.assign(spawnEnv, envVars);
 	}
@@ -479,7 +514,8 @@ async function executeComposeViaHawser(
 	envId: number,
 	envVars?: Record<string, string>,
 	forceRecreate?: boolean,
-	removeVolumes?: boolean
+	removeVolumes?: boolean,
+	stackFiles?: Record<string, string>
 ): Promise<StackOperationResult> {
 	const logPrefix = `[Stack:${stackName}]`;
 	// Import dockerFetch dynamically to avoid circular dependency
@@ -497,13 +533,28 @@ async function executeComposeViaHawser(
 		console.log(`${logPrefix} Env vars being sent (masked):`, JSON.stringify(maskSecrets(envVars), null, 2));
 	}
 	console.log(`${logPrefix} Compose content length:`, composeContent.length, 'chars');
+	console.log(`${logPrefix} Stack files count:`, stackFiles ? Object.keys(stackFiles).length : 0);
+	if (stackFiles && Object.keys(stackFiles).length > 0) {
+		console.log(`${logPrefix} Stack files:`, Object.keys(stackFiles).join(', '));
+	}
 
 	try {
+		// Build files map - include .env file if envVars provided
+		const files: Record<string, string> = { ...(stackFiles || {}) };
+		if (envVars && Object.keys(envVars).length > 0) {
+			const envContent = Object.entries(envVars)
+				.map(([key, value]) => `${key}=${value}`)
+				.join('\n');
+			files['.env'] = envContent;
+			console.log(`${logPrefix} Added .env file to files map with ${Object.keys(envVars).length} variables`);
+		}
+
 		const body = JSON.stringify({
 			operation,
 			projectName: stackName,
 			composeFile: composeContent,
 			envVars: envVars || {},
+			files, // All files including .env
 			forceRecreate: forceRecreate || false,
 			removeVolumes: removeVolumes || false
 		});
@@ -567,7 +618,7 @@ async function executeComposeCommand(
 	composeContent: string,
 	envVars?: Record<string, string>
 ): Promise<StackOperationResult> {
-	const { stackName, envId, forceRecreate, removeVolumes } = options;
+	const { stackName, envId, forceRecreate, removeVolumes, stackFiles } = options;
 
 	// Get environment configuration
 	const env = envId ? await getEnvironment(envId) : null;
@@ -595,7 +646,8 @@ async function executeComposeCommand(
 				envId!,
 				envVars,
 				forceRecreate,
-				removeVolumes
+				removeVolumes,
+				stackFiles
 			);
 
 		case 'direct': {
@@ -808,7 +860,38 @@ async function requireComposeFile(
 	}
 
 	// Get environment variables from database
-	const envVars = await getStackEnvVarsAsRecord(stackName, envId);
+	const dbEnvVars = await getStackEnvVarsAsRecord(stackName, envId);
+
+	// Also read from .env file and merge (file + DB are equal sources)
+	// DB values take precedence for secrets, file values for new/changed vars
+	const stackDir = join(getStacksDir(), stackName);
+	const envFilePath = join(stackDir, '.env');
+	let fileEnvVars: Record<string, string> = {};
+
+	if (existsSync(envFilePath)) {
+		try {
+			const content = await Bun.file(envFilePath).text();
+			for (const line of content.split('\n')) {
+				const trimmed = line.trim();
+				if (!trimmed || trimmed.startsWith('#')) continue;
+				const eqIndex = trimmed.indexOf('=');
+				if (eqIndex > 0) {
+					const key = trimmed.substring(0, eqIndex).trim();
+					let value = trimmed.substring(eqIndex + 1);
+					if ((value.startsWith('"') && value.endsWith('"')) ||
+					    (value.startsWith("'") && value.endsWith("'"))) {
+						value = value.slice(1, -1);
+					}
+					fileEnvVars[key] = value;
+				}
+			}
+		} catch {
+			// Ignore file read errors
+		}
+	}
+
+	// Merge: file values as base, DB values override (DB is authoritative for managed vars)
+	const envVars = { ...fileEnvVars, ...dbEnvVars };
 
 	return { content: composeResult.content!, envVars };
 }
@@ -1018,7 +1101,7 @@ export async function removeStack(
  * Uses stack locking to prevent concurrent deployments.
  */
 export async function deployStack(options: DeployStackOptions): Promise<StackOperationResult> {
-	const { name, compose, envId, envFileVars, forceRecreate } = options;
+	const { name, compose, envId, envFileVars, sourceDir, forceRecreate } = options;
 	const logPrefix = `[Stack:${name}]`;
 
 	console.log(`${logPrefix} ========================================`);
@@ -1026,6 +1109,7 @@ export async function deployStack(options: DeployStackOptions): Promise<StackOpe
 	console.log(`${logPrefix} ========================================`);
 	console.log(`${logPrefix} Environment ID:`, envId ?? '(none - local)');
 	console.log(`${logPrefix} Force recreate:`, forceRecreate ?? false);
+	console.log(`${logPrefix} Source directory:`, sourceDir ?? '(none)');
 	console.log(`${logPrefix} Env file vars provided:`, envFileVars ? Object.keys(envFileVars).length : 0);
 	if (envFileVars && Object.keys(envFileVars).length > 0) {
 		console.log(`${logPrefix} Env file var keys:`, Object.keys(envFileVars).join(', '));
@@ -1043,14 +1127,34 @@ export async function deployStack(options: DeployStackOptions): Promise<StackOpe
 	}
 
 	return withStackLock(name, async () => {
-		// Ensure stack directory exists and write compose file (for local reference)
 		const stacksDir = getStacksDir();
 		const stackDir = join(stacksDir, name);
-		mkdirSync(stackDir, { recursive: true });
 
-		const composeFile = join(stackDir, 'docker-compose.yml');
-		await Bun.write(composeFile, compose);
-		console.log(`${logPrefix} Compose file written to:`, composeFile);
+		// Read all files from source directory if provided (for Hawser deployments)
+		let stackFiles: Record<string, string> | undefined;
+		if (sourceDir && existsSync(sourceDir)) {
+			stackFiles = await readDirFilesAsMap(sourceDir);
+			console.log(`${logPrefix} Read ${Object.keys(stackFiles).length} files from source directory`);
+			console.log(`${logPrefix} Files:`, Object.keys(stackFiles).join(', '));
+		}
+
+		// Handle stack directory setup
+		if (sourceDir && existsSync(sourceDir)) {
+			// Copy entire source directory to stack directory (for git stacks)
+			console.log(`${logPrefix} Copying source directory to stack directory...`);
+			if (existsSync(stackDir)) {
+				rmSync(stackDir, { recursive: true, force: true });
+			}
+			cpSync(sourceDir, stackDir, { recursive: true });
+			console.log(`${logPrefix} Copied ${sourceDir} -> ${stackDir}`);
+		} else {
+			// Traditional behavior: create directory and write compose file only
+			mkdirSync(stackDir, { recursive: true });
+			const composeFile = join(stackDir, 'docker-compose.yml');
+			await Bun.write(composeFile, compose);
+			console.log(`${logPrefix} Compose file written to:`, composeFile);
+		}
+
 		console.log(`${logPrefix} Compose content length:`, compose.length, 'chars');
 		console.log(`${logPrefix} Compose content (full):`);
 		console.log(compose);
@@ -1072,7 +1176,7 @@ export async function deployStack(options: DeployStackOptions): Promise<StackOpe
 		}
 
 		console.log(`${logPrefix} Calling executeComposeCommand...`);
-		const result = await executeComposeCommand('up', { stackName: name, envId, forceRecreate }, compose, envVars);
+		const result = await executeComposeCommand('up', { stackName: name, envId, forceRecreate, stackFiles }, compose, envVars);
 		console.log(`${logPrefix} ========================================`);
 		console.log(`${logPrefix} DEPLOY STACK RESULT`);
 		console.log(`${logPrefix} ========================================`);
@@ -1099,6 +1203,66 @@ export async function pullStackImages(
 	return executeComposeCommand('pull', { stackName, envId }, content, envVars);
 }
 
+// =============================================================================
+// ENVIRONMENT VARIABLE HELPERS
+// =============================================================================
+
+/**
+ * Save environment variables for a stack to the database (for secret tracking)
+ */
+export async function saveStackEnvVarsToDb(
+	stackName: string,
+	variables: { key: string; value: string; isSecret?: boolean }[],
+	envId?: number | null
+): Promise<void> {
+	await setStackEnvVars(stackName, envId ?? null, variables);
+}
+
+/**
+ * Write environment variables to the .env file on disk (simple key=value format)
+ *
+ * WARNING: This generates a simple key=value file WITHOUT comments or formatting.
+ * ONLY use during initial stack CREATION when no .env file exists.
+ *
+ * For EDITS, use PUT /api/stacks/[name]/env/raw which preserves the raw content
+ * including all comments, formatting, and structure.
+ */
+export async function writeStackEnvFile(
+	stackName: string,
+	variables: { key: string; value: string; isSecret?: boolean }[]
+): Promise<void> {
+	const stacksDir = getStacksDir();
+	const envFilePath = join(stacksDir, stackName, '.env');
+
+	const rawContent = variables
+		.filter(v => v.key?.trim())
+		.map(v => `${v.key.trim()}=${v.value}`)
+		.join('\n') + '\n';
+
+	await Bun.write(envFilePath, rawContent);
+}
+
+/**
+ * Save environment variables for a stack (both to database and .env file)
+ *
+ * WARNING: Only use during initial stack CREATION - this generates a simple
+ * key=value file that does NOT preserve comments or formatting.
+ *
+ * For EDITS, the StackModal saves to:
+ * - PUT /api/stacks/[name]/env/raw (preserves raw content with comments)
+ * - PUT /api/stacks/[name]/env (updates secret flags in DB only)
+ */
+export async function saveStackEnvVars(
+	stackName: string,
+	variables: { key: string; value: string; isSecret?: boolean }[],
+	envId?: number | null
+): Promise<void> {
+	// Save to database for secret tracking
+	await saveStackEnvVarsToDb(stackName, variables, envId);
+	// Write .env file to disk for Docker Compose
+	await writeStackEnvFile(stackName, variables);
+}
+
 // =============================================================================
 // RE-EXPORTS FOR BACKWARDS COMPATIBILITY
 // =============================================================================
diff --git a/src/lib/server/subprocesses/event-subprocess.ts b/src/lib/server/subprocesses/event-subprocess.ts
index 5b6a6c4..bf37d58 100644
--- a/src/lib/server/subprocesses/event-subprocess.ts
+++ b/src/lib/server/subprocesses/event-subprocess.ts
@@ -134,10 +134,16 @@ function processEvent(event: DockerEvent, envId: number) {
 	if (event.Type !== 'container') return;
 
 	// Map Docker action to our action type
-	const action = event.Action.split(':')[0] as ContainerEventAction;
+	// For health_status events, Docker sends "health_status: unhealthy" or "health_status: healthy"
+	// We need to preserve the full string for notifications to distinguish healthy vs unhealthy
+	const rawAction = event.Action;
+	const baseAction = rawAction.split(':')[0] as ContainerEventAction;
 
 	// Skip actions we don't care about
-	if (!CONTAINER_ACTIONS.includes(action)) return;
+	if (!CONTAINER_ACTIONS.includes(baseAction)) return;
+
+	// For notifications, preserve full action for health_status to enable proper mapping
+	const action = rawAction.startsWith('health_status') ? rawAction : baseAction;
 
 	const containerId = event.Actor?.ID;
 	const containerName = event.Actor?.Attributes?.name;
@@ -169,14 +175,17 @@ function processEvent(event: DockerEvent, envId: number) {
 	const timestamp = new Date(Math.floor(event.timeNano / 1000000)).toISOString();
 
 	// Prepare notification data
-	const actionLabel = action.charAt(0).toUpperCase() + action.slice(1);
+	// For health_status events, create a cleaner label
+	const actionLabel = action.startsWith('health_status')
+		? action.includes('unhealthy') ? 'Unhealthy' : 'Healthy'
+		: action.charAt(0).toUpperCase() + action.slice(1);
 	const containerLabel = containerName || containerId.substring(0, 12);
 	const notificationType =
-		action === 'die' || action === 'kill' || action === 'oom'
+		action === 'die' || action === 'kill' || action === 'oom' || action.includes('unhealthy')
 			? 'error'
 			: action === 'stop'
 				? 'warning'
-				: action === 'start'
+				: action === 'start' || (action.includes('healthy') && !action.includes('unhealthy'))
 					? 'success'
 					: 'info';
 
diff --git a/src/routes/api/environments/+server.ts b/src/routes/api/environments/+server.ts
index 790d946..d97c978 100644
--- a/src/routes/api/environments/+server.ts
+++ b/src/routes/api/environments/+server.ts
@@ -86,6 +86,7 @@ export const POST: RequestHandler = async ({ request, cookies }) => {
 			tlsCa: data.tlsCa,
 			tlsCert: data.tlsCert,
 			tlsKey: data.tlsKey,
+			tlsSkipVerify: data.tlsSkipVerify || false,
 			icon: data.icon || 'globe',
 			socketPath: data.socketPath || '/var/run/docker.sock',
 			collectActivity: data.collectActivity !== false,
diff --git a/src/routes/api/environments/[id]/+server.ts b/src/routes/api/environments/[id]/+server.ts
index e290ac2..52c4ac6 100644
--- a/src/routes/api/environments/[id]/+server.ts
+++ b/src/routes/api/environments/[id]/+server.ts
@@ -65,6 +65,7 @@ export const PUT: RequestHandler = async ({ params, request, cookies }) => {
 			tlsCa: data.tlsCa,
 			tlsCert: data.tlsCert,
 			tlsKey: data.tlsKey,
+			tlsSkipVerify: data.tlsSkipVerify,
 			icon: data.icon,
 			socketPath: data.socketPath,
 			collectActivity: data.collectActivity,
diff --git a/src/routes/api/stacks/+server.ts b/src/routes/api/stacks/+server.ts
index 50b5a16..1d2ce02 100644
--- a/src/routes/api/stacks/+server.ts
+++ b/src/routes/api/stacks/+server.ts
@@ -1,5 +1,5 @@
 import { json } from '@sveltejs/kit';
-import { listComposeStacks, deployStack, saveStackComposeFile } from '$lib/server/stacks';
+import { listComposeStacks, deployStack, saveStackComposeFile, saveStackEnvVars } from '$lib/server/stacks';
 import { EnvironmentNotFoundError } from '$lib/server/docker';
 import { upsertStackSource, getStackSources } from '$lib/server/db';
 import { authorize } from '$lib/server/authorize';
@@ -78,7 +78,7 @@ export const POST: RequestHandler = async ({ request, url, cookies }) => {
 
 	try {
 		const body = await request.json();
-		const { name, compose, start } = body;
+		const { name, compose, start, envVars } = body;
 
 		if (!name || typeof name !== 'string') {
 			return json({ error: 'Stack name is required' }, { status: 400 });
@@ -95,6 +95,11 @@ export const POST: RequestHandler = async ({ request, url, cookies }) => {
 				return json({ error: result.error }, { status: 400 });
 			}
 
+			// Save environment variables if provided (to both DB and .env file)
+			if (envVars && Array.isArray(envVars) && envVars.length > 0) {
+				await saveStackEnvVars(name, envVars, envIdNum);
+			}
+
 			// Record the stack as internally created
 			await upsertStackSource({
 				stackName: name,
@@ -105,6 +110,14 @@ export const POST: RequestHandler = async ({ request, url, cookies }) => {
 			return json({ success: true, started: false });
 		}
 
+		// Save environment variables BEFORE deploying so they're available during start
+		if (envVars && Array.isArray(envVars) && envVars.length > 0) {
+			// First ensure the stack directory exists by saving compose file
+			await saveStackComposeFile(name, compose, true);
+			// Save to both DB and .env file
+			await saveStackEnvVars(name, envVars, envIdNum);
+		}
+
 		// Deploy and start the stack
 		const result = await deployStack({
 			name,
diff --git a/src/routes/api/stacks/[name]/env/+server.ts b/src/routes/api/stacks/[name]/env/+server.ts
index 23d7a4a..2855b65 100644
--- a/src/routes/api/stacks/[name]/env/+server.ts
+++ b/src/routes/api/stacks/[name]/env/+server.ts
@@ -1,11 +1,96 @@
 import { json } from '@sveltejs/kit';
 import { getStackEnvVars, setStackEnvVars } from '$lib/server/db';
+import { getStacksDir } from '$lib/server/stacks';
 import { authorize } from '$lib/server/authorize';
+import { existsSync } from 'node:fs';
+import { join } from 'node:path';
 import type { RequestHandler } from './$types';
 
+/**
+ * Parse a .env file content into key-value pairs
+ */
+function parseEnvFile(content: string): Record<string, string> {
+	const result: Record<string, string> = {};
+	for (const line of content.split('\n')) {
+		const trimmed = line.trim();
+		// Skip empty lines and comments
+		if (!trimmed || trimmed.startsWith('#')) continue;
+		const eqIndex = trimmed.indexOf('=');
+		if (eqIndex > 0) {
+			const key = trimmed.substring(0, eqIndex).trim();
+			let value = trimmed.substring(eqIndex + 1);
+			// Remove surrounding quotes if present
+			if ((value.startsWith('"') && value.endsWith('"')) ||
+			    (value.startsWith("'") && value.endsWith("'"))) {
+				value = value.slice(1, -1);
+			}
+			result[key] = value;
+		}
+	}
+	return result;
+}
+
+/**
+ * Merge new variables into existing .env file content.
+ * - Keeps comments and formatting
+ * - Updates values for existing keys
+ * - REMOVES keys that are not in newVars (user deleted them)
+ * - Appends new keys at the end
+ */
+function mergeEnvFileContent(
+	existingContent: string,
+	newVars: { key: string; value: string }[]
+): string {
+	const newVarsMap = new Map(newVars.map(v => [v.key, v.value]));
+	const handledKeys = new Set<string>();
+	const lines = existingContent.split('\n');
+	const resultLines: string[] = [];
+
+	for (const line of lines) {
+		const trimmed = line.trim();
+
+		// Keep comments and blank lines as-is
+		if (!trimmed || trimmed.startsWith('#')) {
+			resultLines.push(line);
+			continue;
+		}
+
+		// Check if this is a variable line
+		const eqIndex = trimmed.indexOf('=');
+		if (eqIndex > 0) {
+			const key = trimmed.substring(0, eqIndex).trim();
+
+			if (newVarsMap.has(key)) {
+				// Update existing variable with new value from UI
+				resultLines.push(`${key}=${newVarsMap.get(key)}`);
+				handledKeys.add(key);
+			}
+			// If key not in newVarsMap, it was deleted - skip it (don't add to resultLines)
+		} else {
+			// Not a valid variable line, keep as-is
+			resultLines.push(line);
+		}
+	}
+
+	// Append any new variables that weren't in the original file
+	for (const v of newVars) {
+		if (!handledKeys.has(v.key)) {
+			resultLines.push(`${v.key}=${v.value}`);
+		}
+	}
+
+	// Ensure file ends with newline
+	let result = resultLines.join('\n');
+	if (!result.endsWith('\n')) {
+		result += '\n';
+	}
+	return result;
+}
+
 /**
  * GET /api/stacks/[name]/env?env=X
  * Get all environment variables for a stack.
+ * Merges variables from database with .env file (file values shown if different).
  * Secrets are masked with '***' in the response.
  */
 export const GET: RequestHandler = async ({ params, url, cookies }) => {
@@ -25,15 +110,52 @@ export const GET: RequestHandler = async ({ params, url, cookies }) => {
 
 	try {
 		const stackName = decodeURIComponent(params.name);
-		const variables = await getStackEnvVars(stackName, envIdNum, true);
 
-		return json({
-			variables: variables.map(v => ({
-				key: v.key,
-				value: v.value,
-				isSecret: v.isSecret
-			}))
-		});
+		// Get variables from database
+		const dbVariables = await getStackEnvVars(stackName, envIdNum, true);
+		const dbByKey = new Map(dbVariables.map(v => [v.key, v]));
+
+		// Try to read .env file from stack directory
+		const stacksDir = getStacksDir();
+		const envFilePath = join(stacksDir, stackName, '.env');
+		let fileVars: Record<string, string> = {};
+
+		if (existsSync(envFilePath)) {
+			try {
+				const content = await Bun.file(envFilePath).text();
+				fileVars = parseEnvFile(content);
+			} catch (e) {
+				// Ignore file read errors
+			}
+		}
+
+		// Merge: start with DB variables, add any new keys from file
+		const mergedKeys = new Set([...dbByKey.keys(), ...Object.keys(fileVars)]);
+		const variables: { key: string; value: string; isSecret: boolean }[] = [];
+
+		for (const key of mergedKeys) {
+			const dbVar = dbByKey.get(key);
+			const fileValue = fileVars[key];
+
+			if (dbVar) {
+				// Variable exists in DB
+				if (dbVar.isSecret) {
+					// Keep secret masked
+					variables.push({ key, value: dbVar.value, isSecret: true });
+				} else if (fileValue !== undefined && fileValue !== dbVar.value) {
+					// File has different value - use file value (user may have edited it)
+					variables.push({ key, value: fileValue, isSecret: false });
+				} else {
+					// Use DB value
+					variables.push({ key, value: dbVar.value, isSecret: false });
+				}
+			} else if (fileValue !== undefined) {
+				// Variable only in file - add it as non-secret
+				variables.push({ key, value: fileValue, isSecret: false });
+			}
+		}
+
+		return json({ variables });
 	} catch (error) {
 		console.error('Error getting stack env vars:', error);
 		return json({ error: 'Failed to get environment variables' }, { status: 500 });
@@ -114,6 +236,32 @@ export const PUT: RequestHandler = async ({ params, url, cookies, request }) =>
 
 		await setStackEnvVars(stackName, envIdNum, variablesToSave);
 
+		// Also write the .env file to the stack directory
+		// This allows users to see/edit variables outside of Dockhand
+		const stacksDir = getStacksDir();
+		const stackDir = join(stacksDir, stackName);
+		const envFilePath = join(stackDir, '.env');
+
+		// Only write if stack directory exists
+		if (existsSync(stackDir)) {
+			// Read existing file to preserve comments and formatting
+			let existingContent = '';
+			if (existsSync(envFilePath)) {
+				try {
+					existingContent = await Bun.file(envFilePath).text();
+				} catch {
+					// File read failed, start fresh
+				}
+			}
+
+			// Merge UI vars with existing file (preserves comments, keeps file vars)
+			const envContent = mergeEnvFileContent(
+				existingContent,
+				variablesToSave.map((v: { key: string; value: string }) => ({ key: v.key, value: v.value }))
+			);
+			await Bun.write(envFilePath, envContent);
+		}
+
 		return json({ success: true, count: variablesToSave.length });
 	} catch (error) {
 		console.error('Error setting stack env vars:', error);
diff --git a/src/routes/api/users/+server.ts b/src/routes/api/users/+server.ts
index ea0f4ab..4d3616d 100644
--- a/src/routes/api/users/+server.ts
+++ b/src/routes/api/users/+server.ts
@@ -128,9 +128,15 @@ export const POST: RequestHandler = async ({ request, cookies }) => {
 		}, { status: 201 });
 	} catch (error: any) {
 		console.error('Failed to create user:', error);
-		if (error.message?.includes('UNIQUE constraint failed')) {
+		console.error('Error details:', {
+			message: error.message,
+			code: error.code,
+			name: error.name,
+			stack: error.stack
+		});
+		if (error.message?.includes('UNIQUE constraint failed') || error.code === '23505') {
 			return json({ error: 'Username already exists' }, { status: 409 });
 		}
-		return json({ error: 'Failed to create user' }, { status: 500 });
+		return json({ error: 'Failed to create user', details: error.message }, { status: 500 });
 	}
 };
diff --git a/src/routes/api/users/[id]/mfa/+server.ts b/src/routes/api/users/[id]/mfa/+server.ts
index 4fac9c4..d767452 100644
--- a/src/routes/api/users/[id]/mfa/+server.ts
+++ b/src/routes/api/users/[id]/mfa/+server.ts
@@ -1,9 +1,7 @@
 import { json } from '@sveltejs/kit';
 import type { RequestHandler } from '@sveltejs/kit';
-import { isEnterprise } from '$lib/server/license';
 import {
 	validateSession,
-	checkPermission,
 	generateMfaSetup,
 	verifyAndEnableMfa,
 	disableMfa
@@ -11,11 +9,6 @@ import {
 
 // POST /api/users/[id]/mfa - Setup MFA (generate QR code)
 export const POST: RequestHandler = async ({ params, request, cookies }) => {
-	// Check enterprise license
-	if (!(await isEnterprise())) {
-		return json({ error: 'Enterprise license required' }, { status: 403 });
-	}
-
 	const currentUser = await validateSession(cookies);
 
 	if (!params.id) {
@@ -38,12 +31,16 @@ export const POST: RequestHandler = async ({ params, request, cookies }) => {
 				return json({ error: 'MFA token is required' }, { status: 400 });
 			}
 
-			const success = await verifyAndEnableMfa(userId, body.token);
-			if (!success) {
+			const result = await verifyAndEnableMfa(userId, body.token);
+			if (!result.success) {
 				return json({ error: 'Invalid MFA code' }, { status: 400 });
 			}
 
-			return json({ success: true, message: 'MFA enabled successfully' });
+			return json({
+				success: true,
+				message: 'MFA enabled successfully',
+				backupCodes: result.backupCodes
+			});
 		}
 
 		// Generate new MFA setup
@@ -64,11 +61,6 @@ export const POST: RequestHandler = async ({ params, request, cookies }) => {
 
 // DELETE /api/users/[id]/mfa - Disable MFA
 export const DELETE: RequestHandler = async ({ params, cookies }) => {
-	// Check enterprise license
-	if (!(await isEnterprise())) {
-		return json({ error: 'Enterprise license required' }, { status: 403 });
-	}
-
 	const currentUser = await validateSession(cookies);
 
 	if (!params.id) {
diff --git a/src/routes/containers/+page.svelte b/src/routes/containers/+page.svelte
index 8fa394a..438ad50 100644
--- a/src/routes/containers/+page.svelte
+++ b/src/routes/containers/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
+	import { goto } from '$app/navigation';
 	import { toast } from 'svelte-sonner';
 	import * as Dialog from '$lib/components/ui/dialog';
 	import * as Popover from '$lib/components/ui/popover';
@@ -1626,7 +1627,12 @@
 					{@const ports = formatPorts(container.ports)}
 					{@const stack = getComposeProject(container.labels)}
 					{#if column.id === 'name'}
-						<span class="text-xs font-medium truncate block" title={container.name}>{container.name}</span>
+						<button
+							type="button"
+							class="text-xs font-medium truncate block text-left hover:text-primary hover:underline cursor-pointer"
+							title={container.name}
+							onclick={(e) => { e.stopPropagation(); inspectContainer(container); }}
+						>{container.name}</button>
 					{:else if column.id === 'image'}
 						<div class="flex items-center gap-1.5 {$appSettings.highlightUpdates && containersWithUpdatesSet.has(container.id) ? 'update-border' : ''}">
 							{#if containersWithUpdatesSet.has(container.id)}
@@ -1765,7 +1771,13 @@
 						{/if}
 					{:else if column.id === 'stack'}
 						{#if stack}
-							<Badge variant="outline" class="text-xs py-0 px-1.5">{stack}</Badge>
+							<button
+								type="button"
+								onclick={(e) => { e.stopPropagation(); goto(appendEnvParam(`/stacks?search=${encodeURIComponent(stack)}`, envId)); }}
+								class="cursor-pointer"
+							>
+								<Badge variant="outline" class="text-xs py-0 px-1.5 hover:bg-primary/10 hover:border-primary/50 transition-colors">{stack}</Badge>
+							</button>
 						{:else}
 							<span class="text-gray-400 dark:text-gray-600 text-xs">-</span>
 						{/if}
diff --git a/src/routes/containers/CreateContainerModal.svelte b/src/routes/containers/CreateContainerModal.svelte
index 6796704..0620e78 100644
--- a/src/routes/containers/CreateContainerModal.svelte
+++ b/src/routes/containers/CreateContainerModal.svelte
@@ -1,33 +1,16 @@
 <script lang="ts">
 	import { tick } from 'svelte';
 	import * as Dialog from '$lib/components/ui/dialog';
-	import * as Select from '$lib/components/ui/select';
-	import { Label } from '$lib/components/ui/label';
-	import { Input } from '$lib/components/ui/input';
 	import { Button } from '$lib/components/ui/button';
-	import { Checkbox } from '$lib/components/ui/checkbox';
-	import { TogglePill, ToggleGroup } from '$lib/components/ui/toggle-pill';
-	import { Plus, Trash2, Settings2, RefreshCw, Network, X, Ban, RotateCw, AlertTriangle, PauseCircle, Share2, Server, CircleOff, ChevronDown, ChevronRight, ArrowBigRight, Cpu, Shield, HeartPulse, Wifi, HardDrive, Lock, User, Loader2, Download, CheckCircle2, XCircle, ShieldCheck, ShieldAlert, ShieldX, Package, AlertCircle, Play } from 'lucide-svelte';
+	import { ArrowBigRight, Settings2, Shield, Loader2, Download, CheckCircle2, XCircle, ShieldCheck, ShieldAlert, ShieldX, AlertTriangle, X, Play } from 'lucide-svelte';
 	import { toast } from 'svelte-sonner';
-	import AutoUpdateSettings from './AutoUpdateSettings.svelte';
-	import { Badge } from '$lib/components/ui/badge';
-	import { currentEnvironment, appendEnvParam } from '$lib/stores/environment';
+	import { currentEnvironment } from '$lib/stores/environment';
 	import { focusFirstInput } from '$lib/utils';
 	import PullTab from '$lib/components/PullTab.svelte';
 	import ScanTab from '$lib/components/ScanTab.svelte';
 	import type { ScanResult } from '$lib/components/ScanTab.svelte';
-
-	// Protocol options for ports
-	const protocolOptions = [
-		{ value: 'tcp', label: 'TCP' },
-		{ value: 'udp', label: 'UDP' }
-	];
-
-	// Mode options for volumes
-	const volumeModeOptions = [
-		{ value: 'rw', label: 'RW' },
-		{ value: 'ro', label: 'RO' }
-	];
+	import ContainerSettingsTab from './ContainerSettingsTab.svelte';
+	import type { VulnerabilityCriteria } from '$lib/components/VulnerabilityCriteriaSelector.svelte';
 
 	// Parse shell command respecting quotes
 	function parseShellCommand(cmd: string): string[] {
@@ -101,6 +84,7 @@
 	let image = $state('');
 	let command = $state('');
 	let restartPolicy = $state('no');
+	let restartMaxRetries = $state<number | ''>('');
 	let networkMode = $state('bridge');
 	let startAfterCreate = $state(true);
 
@@ -132,15 +116,8 @@
 	// Auto-update settings
 	let autoUpdateEnabled = $state(false);
 	let autoUpdateCronExpression = $state('0 3 * * *');
-	let vulnerabilityCriteria = $state<string>('never');
+	let vulnerabilityCriteria = $state<VulnerabilityCriteria>('never');
 
-	// Collapsible sections state
-	let showResources = $state(false);
-	let showSecurity = $state(false);
-	let showHealth = $state(false);
-	let showDns = $state(false);
-	let showDevices = $state(false);
-	let showUlimits = $state(false);
 
 	// User/Group
 	let containerUser = $state('');
@@ -161,18 +138,12 @@
 	let memoryReservation = $state('');
 	let cpuShares = $state('');
 	let nanoCpus = $state('');
+	let cpuQuota = $state('');
+	let cpuPeriod = $state('');
 
 	// Capabilities
 	let capAdd = $state<string[]>([]);
 	let capDrop = $state<string[]>([]);
-	let capabilityInput = $state('');
-
-	const commonCapabilities = [
-		'SYS_ADMIN', 'SYS_PTRACE', 'NET_ADMIN', 'NET_RAW', 'IPC_LOCK',
-		'SYS_TIME', 'SYS_RESOURCE', 'MKNOD', 'AUDIT_WRITE', 'SETFCAP',
-		'CHOWN', 'DAC_OVERRIDE', 'FOWNER', 'FSETID', 'KILL', 'SETGID',
-		'SETUID', 'SETPCAP', 'NET_BIND_SERVICE', 'SYS_CHROOT', 'AUDIT_CONTROL'
-	];
 
 	// Devices
 	let deviceMappings = $state<{ hostPath: string; containerPath: string; permissions: string }[]>([]);
@@ -181,17 +152,12 @@
 	let dnsServers = $state<string[]>([]);
 	let dnsSearch = $state<string[]>([]);
 	let dnsOptions = $state<string[]>([]);
-	let dnsInput = $state('');
-	let dnsSearchInput = $state('');
-	let dnsOptionInput = $state('');
 
 	// Security options
 	let securityOptions = $state<string[]>([]);
-	let securityOptionInput = $state('');
 
 	// Ulimits
 	let ulimits = $state<{ name: string; soft: string; hard: string }[]>([]);
-	const commonUlimits = ['nofile', 'nproc', 'core', 'memlock', 'stack', 'cpu', 'fsize', 'locks'];
 
 	let loading = $state(false);
 	let errors = $state<{ name?: string; image?: string }>({});
@@ -342,157 +308,6 @@
 		}
 	}
 
-	function applyConfigSet(configSetId: string) {
-		selectedConfigSetId = configSetId;
-		if (!configSetId) return;
-
-		const configSet = configSets.find((c) => c.id === parseInt(configSetId));
-		if (!configSet) return;
-
-		if (configSet.env_vars && configSet.env_vars.length > 0) {
-			envVars = configSet.env_vars.map((e) => ({ ...e }));
-		}
-		if (configSet.labels && configSet.labels.length > 0) {
-			labels = configSet.labels.map((l) => ({ ...l }));
-		}
-		if (configSet.ports && configSet.ports.length > 0) {
-			portMappings = configSet.ports.map((p) => ({ ...p }));
-		}
-		if (configSet.volumes && configSet.volumes.length > 0) {
-			volumeMappings = configSet.volumes.map((v) => ({ ...v }));
-		}
-		if (configSet.network_mode) {
-			networkMode = configSet.network_mode;
-		}
-		if (configSet.restart_policy) {
-			restartPolicy = configSet.restart_policy;
-		}
-	}
-
-	// Helper functions for form
-	function addPortMapping() {
-		portMappings = [...portMappings, { hostPort: '', containerPort: '', protocol: 'tcp' }];
-	}
-
-	function removePortMapping(index: number) {
-		portMappings = portMappings.filter((_, i) => i !== index);
-	}
-
-	function addVolumeMapping() {
-		volumeMappings = [...volumeMappings, { hostPath: '', containerPath: '', mode: 'rw' }];
-	}
-
-	function removeVolumeMapping(index: number) {
-		volumeMappings = volumeMappings.filter((_, i) => i !== index);
-	}
-
-	function addEnvVar() {
-		envVars = [...envVars, { key: '', value: '' }];
-	}
-
-	function removeEnvVar(index: number) {
-		envVars = envVars.filter((_, i) => i !== index);
-	}
-
-	function addLabel() {
-		labels = [...labels, { key: '', value: '' }];
-	}
-
-	function removeLabel(index: number) {
-		labels = labels.filter((_, i) => i !== index);
-	}
-
-	function addNetwork(networkId: string) {
-		if (networkId && !selectedNetworks.includes(networkId)) {
-			selectedNetworks = [...selectedNetworks, networkId];
-		}
-	}
-
-	function removeNetwork(networkId: string) {
-		selectedNetworks = selectedNetworks.filter((n) => n !== networkId);
-	}
-
-	function addDeviceMapping() {
-		deviceMappings = [...deviceMappings, { hostPath: '', containerPath: '', permissions: 'rwm' }];
-	}
-
-	function removeDeviceMapping(index: number) {
-		deviceMappings = deviceMappings.filter((_, i) => i !== index);
-	}
-
-	function addUlimit() {
-		ulimits = [...ulimits, { name: 'nofile', soft: '', hard: '' }];
-	}
-
-	function removeUlimit(index: number) {
-		ulimits = ulimits.filter((_, i) => i !== index);
-	}
-
-	function addCapability(type: 'add' | 'drop', cap: string) {
-		if (!cap) return;
-		const capUpper = cap.toUpperCase();
-		if (type === 'add') {
-			if (!capAdd.includes(capUpper)) {
-				capAdd = [...capAdd, capUpper];
-			}
-		} else {
-			if (!capDrop.includes(capUpper)) {
-				capDrop = [...capDrop, capUpper];
-			}
-		}
-	}
-
-	function removeCapability(type: 'add' | 'drop', cap: string) {
-		if (type === 'add') {
-			capAdd = capAdd.filter(c => c !== cap);
-		} else {
-			capDrop = capDrop.filter(c => c !== cap);
-		}
-	}
-
-	function addDnsServer() {
-		if (dnsInput.trim() && !dnsServers.includes(dnsInput.trim())) {
-			dnsServers = [...dnsServers, dnsInput.trim()];
-			dnsInput = '';
-		}
-	}
-
-	function removeDnsServer(server: string) {
-		dnsServers = dnsServers.filter(s => s !== server);
-	}
-
-	function addDnsSearch() {
-		if (dnsSearchInput.trim() && !dnsSearch.includes(dnsSearchInput.trim())) {
-			dnsSearch = [...dnsSearch, dnsSearchInput.trim()];
-			dnsSearchInput = '';
-		}
-	}
-
-	function removeDnsSearch(domain: string) {
-		dnsSearch = dnsSearch.filter(d => d !== domain);
-	}
-
-	function addDnsOption() {
-		if (dnsOptionInput.trim() && !dnsOptions.includes(dnsOptionInput.trim())) {
-			dnsOptions = [...dnsOptions, dnsOptionInput.trim()];
-			dnsOptionInput = '';
-		}
-	}
-
-	function removeDnsOption(option: string) {
-		dnsOptions = dnsOptions.filter(o => o !== option);
-	}
-
-	function addSecurityOption() {
-		if (securityOptionInput.trim() && !securityOptions.includes(securityOptionInput.trim())) {
-			securityOptions = [...securityOptions, securityOptionInput.trim()];
-			securityOptionInput = '';
-		}
-	}
-
-	function removeSecurityOption(option: string) {
-		securityOptions = securityOptions.filter(o => o !== option);
-	}
 
 	function parseMemory(value: string): number | undefined {
 		if (!value) return undefined;
@@ -516,18 +331,6 @@
 		return Math.floor(num * 1e9);
 	}
 
-	function getDriverBadgeClasses(driver: string): string {
-		const base = 'text-2xs px-1.5 py-0.5 rounded font-medium';
-		switch (driver.toLowerCase()) {
-			case 'bridge': return `${base} bg-emerald-100 text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-300`;
-			case 'host': return `${base} bg-sky-100 text-sky-700 dark:bg-sky-900/50 dark:text-sky-300`;
-			case 'null': case 'none': return `${base} bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400`;
-			case 'overlay': return `${base} bg-violet-100 text-violet-700 dark:bg-violet-900/50 dark:text-violet-300`;
-			case 'macvlan': return `${base} bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300`;
-			default: return `${base} bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400`;
-		}
-	}
-
 	async function handleSubmit(e: Event) {
 		e.preventDefault();
 		errors = {};
@@ -611,6 +414,7 @@
 				labels: Object.keys(labelsObj).length > 0 ? labelsObj : undefined,
 				cmd,
 				restartPolicy,
+				restartMaxRetries: restartPolicy === 'on-failure' && restartMaxRetries !== '' ? Number(restartMaxRetries) : undefined,
 				networkMode,
 				networks: selectedNetworks.length > 0 ? selectedNetworks : undefined,
 				startAfterCreate,
@@ -621,6 +425,8 @@
 				memoryReservation: parseMemory(memoryReservation),
 				cpuShares: cpuShares ? parseInt(cpuShares) : undefined,
 				nanoCpus: parseNanoCpus(nanoCpus),
+				cpuQuota: cpuQuota ? parseInt(cpuQuota) : undefined,
+				cpuPeriod: cpuPeriod ? parseInt(cpuPeriod) : undefined,
 				capAdd: capAdd.length > 0 ? capAdd : undefined,
 				capDrop: capDrop.length > 0 ? capDrop : undefined,
 				devices: devices.length > 0 ? devices : undefined,
@@ -688,6 +494,7 @@
 		image = '';
 		command = '';
 		restartPolicy = 'no';
+		restartMaxRetries = '';
 		networkMode = 'bridge';
 		startAfterCreate = true;
 		portMappings = [{ hostPort: '', containerPort: '', protocol: 'tcp' }];
@@ -700,12 +507,6 @@
 		vulnerabilityCriteria = 'never';
 		errors = {};
 		selectedConfigSetId = '';
-		showResources = false;
-		showSecurity = false;
-		showHealth = false;
-		showDns = false;
-		showDevices = false;
-		showUlimits = false;
 		containerUser = '';
 		privilegedMode = false;
 		healthcheckEnabled = false;
@@ -718,18 +519,15 @@
 		memoryReservation = '';
 		cpuShares = '';
 		nanoCpus = '';
+		cpuQuota = '';
+		cpuPeriod = '';
 		capAdd = [];
 		capDrop = [];
-		capabilityInput = '';
 		deviceMappings = [];
 		dnsServers = [];
 		dnsSearch = [];
 		dnsOptions = [];
-		dnsInput = '';
-		dnsSearchInput = '';
-		dnsOptionInput = '';
 		securityOptions = [];
-		securityOptionInput = '';
 		ulimits = [];
 		// Reset pull/scan state
 		activeTab = skipPullTab ? 'container' : 'pull';
@@ -841,7 +639,7 @@
 				imageName={image}
 				envId={$currentEnvironment?.id}
 				showImageInput={!autoPull}
-				autoStart={pullStarted && pullStatus === 'idle'}
+				autoStart={pullStarted && pullStatus === 'idle' && !!prefilledImage}
 				onComplete={handlePullComplete}
 				onError={handlePullError}
 				onStatusChange={handlePullStatusChange}
@@ -867,766 +665,66 @@
 					<div class="text-center">
 						<Shield class="w-12 h-12 text-muted-foreground/50 mx-auto mb-2" />
 						<p class="text-sm text-muted-foreground">Vulnerability scanning is disabled for this environment.</p>
-						<p class="text-xs text-muted-foreground mt-1">Enable it in Settings → Environments to scan images.</p>
+						<p class="text-xs text-muted-foreground mt-1">Enable it in Settings -> Environments to scan images.</p>
 					</div>
 				</div>
 			{/if}
 		</div>
 
 		<!-- Container Settings Tab -->
-		<div class="px-5 py-4 space-y-5 flex-1 overflow-y-auto" class:hidden={activeTab !== 'container'}>
-			<!-- Image Summary -->
-				<div class="p-3 rounded-lg bg-muted/50 border">
-					<div class="flex items-center gap-3">
-						<Package class="w-5 h-5 text-muted-foreground" />
-						<div>
-							<p class="text-sm font-medium">Image: <code class="bg-muted px-1.5 py-0.5 rounded">{image || 'Not set'}</code></p>
-							{#if isPulling || isScanning}
-								<p class="text-xs text-blue-600 flex items-center gap-1 mt-0.5">
-									<Loader2 class="w-3 h-3 animate-spin" />
-									{isScanning ? 'Scanning...' : 'Pulling...'}
-								</p>
-							{:else if imageReady}
-								<p class="text-xs text-muted-foreground flex items-center gap-1 mt-0.5">
-									<CheckCircle2 class="w-3 h-3" />
-									Image pulled and ready
-									{#if scanResults.length > 0}
-										• <span class="{hasCriticalOrHigh ? 'text-red-600' : totalVulnerabilities > 0 ? 'text-amber-600' : 'text-green-600'}">{totalVulnerabilities} vulnerabilities</span>
-									{/if}
-								</p>
-							{:else if !image && !skipPullTab}
-								<p class="text-xs text-amber-600 flex items-center gap-1 mt-0.5">
-									<AlertTriangle class="w-3 h-3" />
-									Go to "Pull" tab to set the image
-								</p>
-							{/if}
-						</div>
-					</div>
-				</div>
-
-				<!-- Config Set Selector -->
-				{#if configSets.length > 0}
-					<div class="space-y-2">
-						<div class="flex items-center gap-2 pb-2 border-b">
-							<Settings2 class="w-4 h-4 text-muted-foreground" />
-							<h3 class="text-sm font-semibold text-foreground">Config set</h3>
-						</div>
-						<div class="flex gap-2 items-end">
-							<div class="flex-1">
-								<Select.Root type="single" value={selectedConfigSetId} onValueChange={applyConfigSet}>
-									<Select.Trigger class="w-full h-9">
-										<span>{selectedConfigSetId ? configSets.find(c => c.id === parseInt(selectedConfigSetId))?.name : 'Select a config set to pre-fill values...'}</span>
-									</Select.Trigger>
-									<Select.Content>
-										{#each configSets as configSet}
-											<Select.Item value={String(configSet.id)} label={configSet.name}>
-												<div class="flex flex-col">
-													<span>{configSet.name}</span>
-													{#if configSet.description}
-														<span class="text-xs text-muted-foreground">{configSet.description}</span>
-													{/if}
-												</div>
-											</Select.Item>
-										{/each}
-									</Select.Content>
-								</Select.Root>
-							</div>
-						</div>
-					</div>
-				{/if}
-
-				<!-- Basic Settings -->
-				<div class="space-y-3">
-					<div class="flex items-center gap-2 pb-2 border-b">
-						<h3 class="text-sm font-semibold text-foreground">Basic settings</h3>
-					</div>
-
-					<div class="space-y-1.5">
-						<Label for="name" class="text-xs font-medium">Container name *</Label>
-						<Input
-							id="name"
-							bind:value={name}
-							placeholder="my-container"
-							required
-							class="h-9 {errors.name ? 'border-destructive focus-visible:ring-destructive' : ''}"
-							oninput={() => errors.name = undefined}
-						/>
-						{#if errors.name}
-							<p class="text-xs text-destructive">{errors.name}</p>
-						{/if}
-					</div>
-
-					<div class="space-y-1.5">
-						<Label for="command" class="text-xs font-medium">Command (optional)</Label>
-						<Input id="command" bind:value={command} placeholder="/bin/sh -c 'echo hello'" class="h-9" />
-					</div>
-
-					<div class="grid grid-cols-2 gap-3">
-						<div class="space-y-1.5">
-							<Label class="text-xs font-medium">Restart policy</Label>
-							<Select.Root type="single" bind:value={restartPolicy}>
-								<Select.Trigger id="restartPolicy" tabindex={0} class="w-full h-9">
-									<span class="flex items-center">
-										{#if restartPolicy === 'no'}
-											<Ban class="w-3.5 h-3.5 mr-2 text-muted-foreground" />
-										{:else if restartPolicy === 'always'}
-											<RotateCw class="w-3.5 h-3.5 mr-2 text-green-500" />
-										{:else if restartPolicy === 'on-failure'}
-											<AlertTriangle class="w-3.5 h-3.5 mr-2 text-amber-500" />
-										{:else}
-											<PauseCircle class="w-3.5 h-3.5 mr-2 text-blue-500" />
-										{/if}
-										{restartPolicy === 'no' ? 'No' : restartPolicy === 'always' ? 'Always' : restartPolicy === 'on-failure' ? 'On failure' : 'Unless stopped'}
-									</span>
-								</Select.Trigger>
-								<Select.Content>
-									<Select.Item value="no">
-										{#snippet children()}
-											<Ban class="w-3.5 h-3.5 mr-2 text-muted-foreground" />
-											No
-										{/snippet}
-									</Select.Item>
-									<Select.Item value="always">
-										{#snippet children()}
-											<RotateCw class="w-3.5 h-3.5 mr-2 text-green-500" />
-											Always
-										{/snippet}
-									</Select.Item>
-									<Select.Item value="on-failure">
-										{#snippet children()}
-											<AlertTriangle class="w-3.5 h-3.5 mr-2 text-amber-500" />
-											On failure
-										{/snippet}
-									</Select.Item>
-									<Select.Item value="unless-stopped">
-										{#snippet children()}
-											<PauseCircle class="w-3.5 h-3.5 mr-2 text-blue-500" />
-											Unless stopped
-										{/snippet}
-									</Select.Item>
-								</Select.Content>
-							</Select.Root>
-						</div>
-
-						<div class="space-y-1.5">
-							<Label class="text-xs font-medium">Network mode</Label>
-							<Select.Root type="single" bind:value={networkMode}>
-								<Select.Trigger id="networkMode" tabindex={0} class="w-full h-9">
-									<span class="flex items-center">
-										{#if networkMode === 'bridge'}
-											<Share2 class="w-3.5 h-3.5 mr-2 text-emerald-500" />
-										{:else if networkMode === 'host'}
-											<Server class="w-3.5 h-3.5 mr-2 text-sky-500" />
-										{:else}
-											<CircleOff class="w-3.5 h-3.5 mr-2 text-muted-foreground" />
-										{/if}
-										{networkMode === 'bridge' ? 'Bridge' : networkMode === 'host' ? 'Host' : 'None'}
-									</span>
-								</Select.Trigger>
-								<Select.Content>
-									<Select.Item value="bridge">
-										{#snippet children()}
-											<Share2 class="w-3.5 h-3.5 mr-2 text-emerald-500" />
-											Bridge
-										{/snippet}
-									</Select.Item>
-									<Select.Item value="host">
-										{#snippet children()}
-											<Server class="w-3.5 h-3.5 mr-2 text-sky-500" />
-											Host
-										{/snippet}
-									</Select.Item>
-									<Select.Item value="none">
-										{#snippet children()}
-											<CircleOff class="w-3.5 h-3.5 mr-2 text-muted-foreground" />
-											None
-										{/snippet}
-									</Select.Item>
-								</Select.Content>
-							</Select.Root>
-						</div>
-					</div>
-
-					<div class="flex items-center gap-3 pt-1">
-						<Label class="text-xs font-normal">Start container after creation</Label>
-						<TogglePill bind:checked={startAfterCreate} />
-					</div>
-				</div>
-
-				<!-- Networks -->
-				{#if availableNetworks.length > 0}
-					<div class="space-y-2">
-						<div class="flex justify-between items-center pb-2 border-b">
-							<div class="flex items-center gap-2">
-								<Network class="w-4 h-4 text-muted-foreground" />
-								<h3 class="text-sm font-semibold text-foreground">Networks</h3>
-							</div>
-						</div>
-
-						<div class="space-y-2">
-							<Select.Root type="single" value="" onValueChange={addNetwork}>
-								<Select.Trigger tabindex={0} class="w-full h-9">
-									<span class="text-muted-foreground">Select network to add...</span>
-								</Select.Trigger>
-								<Select.Content>
-									{#each availableNetworks.filter(n => !selectedNetworks.includes(n.name) && !['bridge', 'host', 'none'].includes(n.name)) as network}
-										<Select.Item value={network.name}>
-											{#snippet children()}
-												<div class="flex items-center justify-between w-full">
-													<span>{network.name}</span>
-													<span class={getDriverBadgeClasses(network.driver)}>{network.driver}</span>
-												</div>
-											{/snippet}
-										</Select.Item>
-									{/each}
-								</Select.Content>
-							</Select.Root>
-
-							{#if selectedNetworks.length > 0}
-								<div class="flex flex-wrap gap-2 pt-1">
-									{#each selectedNetworks as networkName}
-										{@const network = availableNetworks.find(n => n.name === networkName)}
-										<Badge variant="secondary" class="flex items-center gap-1.5 pr-1">
-											{networkName}
-											{#if network}
-												<span class={getDriverBadgeClasses(network.driver)}>{network.driver}</span>
-											{/if}
-											<button
-												type="button"
-												onclick={() => removeNetwork(networkName)}
-												class="ml-0.5 hover:bg-destructive/20 rounded p-0.5"
-											>
-												<X class="w-3 h-3" />
-											</button>
-										</Badge>
-									{/each}
-								</div>
-							{/if}
-						</div>
-					</div>
-				{/if}
-
-				<!-- Port Mappings -->
-				<div class="space-y-2">
-					<div class="flex justify-between items-center pb-2 border-b">
-						<h3 class="text-sm font-semibold text-foreground">Port mappings</h3>
-						<Button type="button" size="sm" variant="ghost" onclick={addPortMapping} class="h-7 text-xs">
-							<Plus class="w-3.5 h-3.5 mr-1" />
-							Add
-						</Button>
-					</div>
-
-					<div class="space-y-2">
-						{#each portMappings as mapping, index}
-							<div class="flex gap-2 items-center">
-								<div class="flex-1 relative">
-									<span class="absolute -top-2 left-2 text-2xs text-muted-foreground bg-background px-1">Host</span>
-									<Input bind:value={mapping.hostPort} type="number" class="h-9" />
-								</div>
-								<div class="flex-1 relative">
-									<span class="absolute -top-2 left-2 text-2xs text-muted-foreground bg-background px-1">Container</span>
-									<Input bind:value={mapping.containerPort} type="number" class="h-9" />
-								</div>
-								<ToggleGroup
-									value={mapping.protocol}
-									options={protocolOptions}
-									onchange={(v) => { portMappings[index].protocol = v; }}
-								/>
-								<Button
-									type="button"
-									size="icon"
-									variant="ghost"
-									onclick={() => removePortMapping(index)}
-									disabled={portMappings.length === 1}
-									class="h-9 w-9 text-muted-foreground hover:text-destructive"
-								>
-									<Trash2 class="w-4 h-4" />
-								</Button>
-							</div>
-						{/each}
-					</div>
-				</div>
-
-				<!-- Volume Mappings -->
-				<div class="space-y-2">
-					<div class="flex justify-between items-center pb-2 border-b">
-						<h3 class="text-sm font-semibold text-foreground">Volume mappings</h3>
-						<Button type="button" size="sm" variant="ghost" onclick={addVolumeMapping} class="h-7 text-xs">
-							<Plus class="w-3.5 h-3.5 mr-1" />
-							Add
-						</Button>
-					</div>
-
-					<div class="space-y-2">
-						{#each volumeMappings as mapping, index}
-							<div class="flex gap-2 items-center">
-								<div class="flex-1 relative">
-									<span class="absolute -top-2 left-2 text-2xs text-muted-foreground bg-background px-1">Host path</span>
-									<Input bind:value={mapping.hostPath} class="h-9" />
-								</div>
-								<div class="flex-1 relative">
-									<span class="absolute -top-2 left-2 text-2xs text-muted-foreground bg-background px-1">Container path</span>
-									<Input bind:value={mapping.containerPath} class="h-9" />
-								</div>
-								<ToggleGroup
-									value={mapping.mode}
-									options={volumeModeOptions}
-									onchange={(v) => { volumeMappings[index].mode = v; }}
-								/>
-								<Button
-									type="button"
-									size="icon"
-									variant="ghost"
-									onclick={() => removeVolumeMapping(index)}
-									disabled={volumeMappings.length === 1}
-									class="h-9 w-9 text-muted-foreground hover:text-destructive"
-								>
-									<Trash2 class="w-4 h-4" />
-								</Button>
-							</div>
-						{/each}
-					</div>
-				</div>
-
-				<!-- Environment Variables -->
-				<div class="space-y-2">
-					<div class="flex justify-between items-center pb-2 border-b">
-						<h3 class="text-sm font-semibold text-foreground">Environment variables</h3>
-						<Button type="button" size="sm" variant="ghost" onclick={addEnvVar} class="h-7 text-xs">
-							<Plus class="w-3.5 h-3.5 mr-1" />
-							Add
-						</Button>
-					</div>
-
-					<div class="space-y-2">
-						{#each envVars as envVar, index}
-							<div class="flex gap-2 items-center">
-								<div class="flex-1 relative">
-									<span class="absolute -top-2 left-2 text-2xs text-muted-foreground bg-background px-1">Key</span>
-									<Input bind:value={envVar.key} class="h-9" />
-								</div>
-								<div class="flex-1 relative">
-									<span class="absolute -top-2 left-2 text-2xs text-muted-foreground bg-background px-1">Value</span>
-									<Input bind:value={envVar.value} class="h-9" />
-								</div>
-								<Button
-									type="button"
-									size="icon"
-									variant="ghost"
-									onclick={() => removeEnvVar(index)}
-									disabled={envVars.length === 1}
-									class="h-9 w-9 text-muted-foreground hover:text-destructive"
-								>
-									<Trash2 class="w-4 h-4" />
-								</Button>
-							</div>
-						{/each}
-					</div>
-				</div>
-
-				<!-- Labels -->
-				<div class="space-y-2">
-					<div class="flex justify-between items-center pb-2 border-b">
-						<h3 class="text-sm font-semibold text-foreground">Labels</h3>
-						<Button type="button" size="sm" variant="ghost" onclick={addLabel} class="h-7 text-xs">
-							<Plus class="w-3.5 h-3.5 mr-1" />
-							Add
-						</Button>
-					</div>
-
-					<div class="space-y-2">
-						{#each labels as label, index}
-							<div class="flex gap-2 items-center">
-								<div class="flex-1 relative">
-									<span class="absolute -top-2 left-2 text-2xs text-muted-foreground bg-background px-1">Key</span>
-									<Input bind:value={label.key} class="h-9" />
-								</div>
-								<div class="flex-1 relative">
-									<span class="absolute -top-2 left-2 text-2xs text-muted-foreground bg-background px-1">Value</span>
-									<Input bind:value={label.value} class="h-9" />
-								</div>
-								<Button
-									type="button"
-									size="icon"
-									variant="ghost"
-									onclick={() => removeLabel(index)}
-									disabled={labels.length === 1}
-									class="h-9 w-9 text-muted-foreground hover:text-destructive"
-								>
-									<Trash2 class="w-4 h-4" />
-								</Button>
-							</div>
-						{/each}
-					</div>
-				</div>
-
-				<!-- Advanced Options Header -->
-				<div class="pt-2">
-					<p class="text-xs text-muted-foreground mb-3">Advanced container options (click to expand)</p>
-				</div>
-
-				<!-- Resources Section (Collapsible) -->
-				<div class="border rounded-lg">
-					<button
-						type="button"
-						onclick={() => showResources = !showResources}
-						class="w-full flex items-center justify-between p-3 hover:bg-muted/50 transition-colors"
-					>
-						<div class="flex items-center gap-2">
-							<Cpu class="w-4 h-4 text-muted-foreground" />
-							<span class="text-sm font-medium">Resources</span>
-							{#if memoryLimit || nanoCpus || cpuShares}
-								<Badge variant="secondary" class="text-2xs">configured</Badge>
-							{/if}
-						</div>
-						{#if showResources}
-							<ChevronDown class="w-4 h-4 text-muted-foreground" />
-						{:else}
-							<ChevronRight class="w-4 h-4 text-muted-foreground" />
-						{/if}
-					</button>
-					{#if showResources}
-						<div class="px-3 pb-3 space-y-3 border-t">
-							<p class="text-xs text-muted-foreground pt-2">Configure memory and CPU limits for this container</p>
-							<div class="grid grid-cols-2 gap-3">
-								<div class="space-y-1.5">
-									<Label for="memoryLimit" class="text-xs font-medium">Memory limit</Label>
-									<Input id="memoryLimit" bind:value={memoryLimit} placeholder="e.g., 512m, 1g" class="h-9" />
-								</div>
-								<div class="space-y-1.5">
-									<Label for="memoryReservation" class="text-xs font-medium">Memory reservation</Label>
-									<Input id="memoryReservation" bind:value={memoryReservation} placeholder="e.g., 256m" class="h-9" />
-								</div>
-							</div>
-							<div class="grid grid-cols-2 gap-3">
-								<div class="space-y-1.5">
-									<Label for="nanoCpus" class="text-xs font-medium">CPU limit</Label>
-									<Input id="nanoCpus" bind:value={nanoCpus} placeholder="e.g., 0.5, 1.5, 2" class="h-9" />
-								</div>
-								<div class="space-y-1.5">
-									<Label for="cpuShares" class="text-xs font-medium">CPU shares</Label>
-									<Input id="cpuShares" bind:value={cpuShares} type="number" placeholder="1024" class="h-9" />
-								</div>
-							</div>
-						</div>
-					{/if}
-				</div>
-
-				<!-- Security Section (Collapsible) -->
-				<div class="border rounded-lg">
-					<button
-						type="button"
-						onclick={() => showSecurity = !showSecurity}
-						class="w-full flex items-center justify-between p-3 hover:bg-muted/50 transition-colors"
-					>
-						<div class="flex items-center gap-2">
-							<Shield class="w-4 h-4 text-muted-foreground" />
-							<span class="text-sm font-medium">Security</span>
-							{#if privilegedMode || containerUser || capAdd.length > 0 || capDrop.length > 0}
-								<Badge variant="secondary" class="text-2xs">configured</Badge>
-							{/if}
-						</div>
-						{#if showSecurity}
-							<ChevronDown class="w-4 h-4 text-muted-foreground" />
-						{:else}
-							<ChevronRight class="w-4 h-4 text-muted-foreground" />
-						{/if}
-					</button>
-					{#if showSecurity}
-						<div class="px-3 pb-3 space-y-3 border-t">
-							<div class="grid grid-cols-2 gap-3 pt-2">
-								<div class="space-y-1.5">
-									<Label for="containerUser" class="text-xs font-medium">User</Label>
-									<Input id="containerUser" bind:value={containerUser} placeholder="user:group or UID:GID" class="h-9" />
-								</div>
-								<div class="space-y-1.5 flex flex-col justify-center pt-4">
-									<div class="flex items-center space-x-2">
-										<Checkbox id="privilegedMode" bind:checked={privilegedMode} />
-										<Label for="privilegedMode" class="text-xs font-normal flex items-center gap-1">
-											<Lock class="w-3 h-3 text-amber-500" />
-											Privileged mode
-										</Label>
-									</div>
-								</div>
-							</div>
-
-							<div class="space-y-2">
-								<Label class="text-xs font-medium">Add capabilities</Label>
-								<Select.Root type="single" value="" onValueChange={(v) => { addCapability('add', v); }}>
-									<Select.Trigger class="h-9">
-										<span class="text-muted-foreground">Select capability to add...</span>
-									</Select.Trigger>
-									<Select.Content>
-										{#each commonCapabilities.filter(c => !capAdd.includes(c)) as cap}
-											<Select.Item value={cap} label={cap} />
-										{/each}
-									</Select.Content>
-								</Select.Root>
-								{#if capAdd.length > 0}
-									<div class="flex flex-wrap gap-1.5">
-										{#each capAdd as cap}
-											<Badge variant="outline" class="text-2xs bg-green-50 text-green-700 dark:bg-green-900/30 dark:text-green-400">
-												+{cap}
-												<button type="button" onclick={() => removeCapability('add', cap)} class="ml-1 hover:text-destructive">
-													<X class="w-3 h-3" />
-												</button>
-											</Badge>
-										{/each}
-									</div>
-								{/if}
-							</div>
-
-							<div class="space-y-2">
-								<Label class="text-xs font-medium">Drop capabilities</Label>
-								<Select.Root type="single" value="" onValueChange={(v) => { addCapability('drop', v); }}>
-									<Select.Trigger class="h-9">
-										<span class="text-muted-foreground">Select capability to drop...</span>
-									</Select.Trigger>
-									<Select.Content>
-										{#each commonCapabilities.filter(c => !capDrop.includes(c)) as cap}
-											<Select.Item value={cap} label={cap} />
-										{/each}
-									</Select.Content>
-								</Select.Root>
-								{#if capDrop.length > 0}
-									<div class="flex flex-wrap gap-1.5">
-										{#each capDrop as cap}
-											<Badge variant="outline" class="text-2xs bg-red-50 text-red-700 dark:bg-red-900/30 dark:text-red-400">
-												-{cap}
-												<button type="button" onclick={() => removeCapability('drop', cap)} class="ml-1 hover:text-destructive">
-													<X class="w-3 h-3" />
-												</button>
-											</Badge>
-										{/each}
-									</div>
-								{/if}
-							</div>
-						</div>
-					{/if}
-				</div>
-
-				<!-- Health Section (Collapsible) -->
-				<div class="border rounded-lg">
-					<button
-						type="button"
-						onclick={() => showHealth = !showHealth}
-						class="w-full flex items-center justify-between p-3 hover:bg-muted/50 transition-colors"
-					>
-						<div class="flex items-center gap-2">
-							<HeartPulse class="w-4 h-4 text-muted-foreground" />
-							<span class="text-sm font-medium">Healthcheck</span>
-							{#if healthcheckEnabled}
-								<Badge variant="secondary" class="text-2xs">enabled</Badge>
-							{/if}
-						</div>
-						{#if showHealth}
-							<ChevronDown class="w-4 h-4 text-muted-foreground" />
-						{:else}
-							<ChevronRight class="w-4 h-4 text-muted-foreground" />
-						{/if}
-					</button>
-					{#if showHealth}
-						<div class="px-3 pb-3 space-y-3 border-t">
-							<div class="flex items-center space-x-2 pt-2">
-								<Checkbox id="healthcheckEnabled" bind:checked={healthcheckEnabled} />
-								<Label for="healthcheckEnabled" class="text-xs font-normal">Enable healthcheck</Label>
-							</div>
-							{#if healthcheckEnabled}
-								<div class="space-y-1.5">
-									<Label for="healthcheckCommand" class="text-xs font-medium">Command</Label>
-									<Input id="healthcheckCommand" bind:value={healthcheckCommand} placeholder="e.g., curl -f http://localhost/ || exit 1" class="h-9" />
-								</div>
-								<div class="grid grid-cols-4 gap-3">
-									<div class="space-y-1.5">
-										<Label for="healthcheckInterval" class="text-xs font-medium">Interval (s)</Label>
-										<Input id="healthcheckInterval" type="number" bind:value={healthcheckInterval} min="1" class="h-9" />
-									</div>
-									<div class="space-y-1.5">
-										<Label for="healthcheckTimeout" class="text-xs font-medium">Timeout (s)</Label>
-										<Input id="healthcheckTimeout" type="number" bind:value={healthcheckTimeout} min="1" class="h-9" />
-									</div>
-									<div class="space-y-1.5">
-										<Label for="healthcheckRetries" class="text-xs font-medium">Retries</Label>
-										<Input id="healthcheckRetries" type="number" bind:value={healthcheckRetries} min="1" class="h-9" />
-									</div>
-									<div class="space-y-1.5">
-										<Label for="healthcheckStartPeriod" class="text-xs font-medium">Start (s)</Label>
-										<Input id="healthcheckStartPeriod" type="number" bind:value={healthcheckStartPeriod} min="0" class="h-9" />
-									</div>
-								</div>
-							{/if}
-						</div>
-					{/if}
-				</div>
-
-				<!-- DNS Section (Collapsible) -->
-				<div class="border rounded-lg">
-					<button
-						type="button"
-						onclick={() => showDns = !showDns}
-						class="w-full flex items-center justify-between p-3 hover:bg-muted/50 transition-colors"
-					>
-						<div class="flex items-center gap-2">
-							<Wifi class="w-4 h-4 text-muted-foreground" />
-							<span class="text-sm font-medium">DNS settings</span>
-							{#if dnsServers.length > 0 || dnsSearch.length > 0}
-								<Badge variant="secondary" class="text-2xs">configured</Badge>
-							{/if}
-						</div>
-						{#if showDns}
-							<ChevronDown class="w-4 h-4 text-muted-foreground" />
-						{:else}
-							<ChevronRight class="w-4 h-4 text-muted-foreground" />
-						{/if}
-					</button>
-					{#if showDns}
-						<div class="px-3 pb-3 space-y-3 border-t">
-							<div class="space-y-2 pt-2">
-								<Label class="text-xs font-medium">DNS servers</Label>
-								<div class="flex gap-2">
-									<Input
-										bind:value={dnsInput}
-										placeholder="e.g., 8.8.8.8"
-										class="h-9 flex-1"
-										onkeydown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addDnsServer(); } }}
-									/>
-									<Button type="button" size="sm" variant="outline" onclick={addDnsServer} class="h-9">
-										<Plus class="w-4 h-4" />
-									</Button>
-								</div>
-								{#if dnsServers.length > 0}
-									<div class="flex flex-wrap gap-1.5">
-										{#each dnsServers as server}
-											<Badge variant="secondary" class="text-2xs">
-												{server}
-												<button type="button" onclick={() => removeDnsServer(server)} class="ml-1 hover:text-destructive">
-													<X class="w-3 h-3" />
-												</button>
-											</Badge>
-										{/each}
-									</div>
-								{/if}
-							</div>
-						</div>
-					{/if}
-				</div>
-
-				<!-- Devices Section (Collapsible) -->
-				<div class="border rounded-lg">
-					<button
-						type="button"
-						onclick={() => showDevices = !showDevices}
-						class="w-full flex items-center justify-between p-3 hover:bg-muted/50 transition-colors"
-					>
-						<div class="flex items-center gap-2">
-							<HardDrive class="w-4 h-4 text-muted-foreground" />
-							<span class="text-sm font-medium">Devices</span>
-							{#if deviceMappings.length > 0}
-								<Badge variant="secondary" class="text-2xs">{deviceMappings.length}</Badge>
-							{/if}
-						</div>
-						{#if showDevices}
-							<ChevronDown class="w-4 h-4 text-muted-foreground" />
-						{:else}
-							<ChevronRight class="w-4 h-4 text-muted-foreground" />
-						{/if}
-					</button>
-					{#if showDevices}
-						<div class="px-3 pb-3 space-y-3 border-t">
-							<div class="flex justify-end pt-2">
-								<Button type="button" size="sm" variant="ghost" onclick={addDeviceMapping} class="h-7 text-xs">
-									<Plus class="w-3.5 h-3.5 mr-1" />
-									Add device
-								</Button>
-							</div>
-							{#each deviceMappings as mapping, index}
-								<div class="flex gap-2 items-center">
-									<Input bind:value={mapping.hostPath} placeholder="/dev/sda" class="h-9 flex-1" />
-									<Input bind:value={mapping.containerPath} placeholder="/dev/sda" class="h-9 flex-1" />
-									<Button
-										type="button"
-										size="icon"
-										variant="ghost"
-										onclick={() => removeDeviceMapping(index)}
-										class="h-9 w-9 text-muted-foreground hover:text-destructive"
-									>
-										<Trash2 class="w-4 h-4" />
-									</Button>
-								</div>
-							{/each}
-						</div>
-					{/if}
-				</div>
-
-				<!-- Ulimits Section (Collapsible) -->
-				<div class="border rounded-lg">
-					<button
-						type="button"
-						onclick={() => showUlimits = !showUlimits}
-						class="w-full flex items-center justify-between p-3 hover:bg-muted/50 transition-colors"
-					>
-						<div class="flex items-center gap-2">
-							<Settings2 class="w-4 h-4 text-muted-foreground" />
-							<span class="text-sm font-medium">Ulimits</span>
-							{#if ulimits.length > 0}
-								<Badge variant="secondary" class="text-2xs">{ulimits.length}</Badge>
-							{/if}
-						</div>
-						{#if showUlimits}
-							<ChevronDown class="w-4 h-4 text-muted-foreground" />
-						{:else}
-							<ChevronRight class="w-4 h-4 text-muted-foreground" />
-						{/if}
-					</button>
-					{#if showUlimits}
-						<div class="px-3 pb-3 space-y-3 border-t">
-							<div class="flex justify-end pt-2">
-								<Button type="button" size="sm" variant="ghost" onclick={addUlimit} class="h-7 text-xs">
-									<Plus class="w-3.5 h-3.5 mr-1" />
-									Add ulimit
-								</Button>
-							</div>
-							{#each ulimits as ulimit, index}
-								<div class="flex gap-2 items-center">
-									<Select.Root type="single" bind:value={ulimit.name}>
-										<Select.Trigger class="w-32 h-9">
-											<span>{ulimit.name}</span>
-										</Select.Trigger>
-										<Select.Content>
-											{#each commonUlimits as name}
-												<Select.Item value={name} label={name} />
-											{/each}
-										</Select.Content>
-									</Select.Root>
-									<Input bind:value={ulimit.soft} type="number" placeholder="Soft" class="h-9 flex-1" />
-									<Input bind:value={ulimit.hard} type="number" placeholder="Hard" class="h-9 flex-1" />
-									<Button
-										type="button"
-										size="icon"
-										variant="ghost"
-										onclick={() => removeUlimit(index)}
-										class="h-9 w-9 text-muted-foreground hover:text-destructive"
-									>
-										<Trash2 class="w-4 h-4" />
-									</Button>
-								</div>
-							{/each}
-						</div>
-					{/if}
-				</div>
-
-				<!-- Auto-update Settings -->
-				<div class="space-y-3">
-					<div class="flex items-center gap-2 pb-2 border-b">
-						<RefreshCw class="w-4 h-4 text-muted-foreground" />
-						<h3 class="text-sm font-semibold text-foreground">Auto-update</h3>
-					</div>
-					<AutoUpdateSettings
-						bind:enabled={autoUpdateEnabled}
-						bind:cronExpression={autoUpdateCronExpression}
-						bind:vulnerabilityCriteria={vulnerabilityCriteria}
-					/>
-				</div>
+		<div class="px-5 py-4 flex-1 overflow-y-auto" class:hidden={activeTab !== 'container'}>
+			<ContainerSettingsTab
+				mode="create"
+				bind:name
+				bind:image
+				bind:command
+				bind:restartPolicy
+				bind:restartMaxRetries
+				bind:networkMode
+				bind:startAfterCreate
+				bind:portMappings
+				bind:volumeMappings
+				bind:envVars
+				bind:labels
+				{availableNetworks}
+				bind:selectedNetworks
+				bind:containerUser
+				bind:privilegedMode
+				bind:healthcheckEnabled
+				bind:healthcheckCommand
+				bind:healthcheckInterval
+				bind:healthcheckTimeout
+				bind:healthcheckRetries
+				bind:healthcheckStartPeriod
+				bind:memoryLimit
+				bind:memoryReservation
+				bind:cpuShares
+				bind:nanoCpus
+				bind:cpuQuota
+				bind:cpuPeriod
+				bind:capAdd
+				bind:capDrop
+				bind:securityOptions
+				bind:deviceMappings
+				bind:dnsServers
+				bind:dnsSearch
+				bind:dnsOptions
+				bind:ulimits
+				bind:autoUpdateEnabled
+				bind:autoUpdateCronExpression
+				bind:vulnerabilityCriteria
+				{configSets}
+				bind:selectedConfigSetId
+				bind:errors
+				imageSummary={{
+					isPulling,
+					isScanning,
+					imageReady,
+					scanResults,
+					totalVulnerabilities,
+					hasCriticalOrHigh
+				}}
+			/>
 		</div>
 
 		<div class="flex justify-between gap-2 px-5 py-3 border-t bg-muted/30 shrink-0">
diff --git a/src/routes/containers/EditContainerModal.svelte b/src/routes/containers/EditContainerModal.svelte
index f0f41f3..4f86092 100644
--- a/src/routes/containers/EditContainerModal.svelte
+++ b/src/routes/containers/EditContainerModal.svelte
@@ -1,17 +1,11 @@
 <script lang="ts">
 	import * as Dialog from '$lib/components/ui/dialog';
-	import * as Select from '$lib/components/ui/select';
-	import { Label } from '$lib/components/ui/label';
-	import { Input } from '$lib/components/ui/input';
 	import { Button } from '$lib/components/ui/button';
-	import { Checkbox } from '$lib/components/ui/checkbox';
-	import { Plus, Trash2, Settings2, RefreshCw, Network, X, Ban, RotateCw, AlertTriangle, PauseCircle, Share2, Server, CircleOff, Pencil, Check, Loader2, CircleArrowUp, Info, Layers } from 'lucide-svelte';
-	import { TogglePill } from '$lib/components/ui/toggle-pill';
-	import { Badge } from '$lib/components/ui/badge';
-	import { onMount } from 'svelte';
+	import { Pencil, Check, Loader2, X, Layers } from 'lucide-svelte';
 	import { currentEnvironment, appendEnvParam } from '$lib/stores/environment';
 	import { focusFirstInput } from '$lib/utils';
-	import AutoUpdateSettings from './AutoUpdateSettings.svelte';
+	import ContainerSettingsTab from './ContainerSettingsTab.svelte';
+	import type { VulnerabilityCriteria } from '$lib/components/VulnerabilityCriteriaSelector.svelte';
 
 	// Parse shell command respecting quotes
 	function parseShellCommand(cmd: string): string[] {
@@ -71,6 +65,9 @@
 	let configSets = $state<ConfigSet[]>([]);
 	let selectedConfigSetId = $state<string>('');
 
+	// Guard to prevent reloading data while user is editing
+	let hasLoadedData = $state(false);
+
 	async function fetchConfigSets() {
 		try {
 			const response = await fetch('/api/config-sets');
@@ -82,61 +79,12 @@
 		}
 	}
 
-	function applyConfigSet(configSetId: string) {
-		selectedConfigSetId = configSetId;
-		if (!configSetId) return;
-
-		const configSet = configSets.find((c) => c.id === parseInt(configSetId));
-		if (!configSet) return;
-
-		// Apply env vars (merge with existing)
-		if (configSet.env_vars && configSet.env_vars.length > 0) {
-			const existingKeys = new Set(envVars.map(e => e.key).filter(k => k));
-			const newEnvVars = configSet.env_vars.filter(e => !existingKeys.has(e.key));
-			envVars = [...envVars.filter(e => e.key), ...newEnvVars.map(e => ({ ...e }))];
-			if (envVars.length === 0) envVars = [{ key: '', value: '' }];
-		}
-
-		// Apply labels (merge with existing)
-		if (configSet.labels && configSet.labels.length > 0) {
-			const existingKeys = new Set(labels.map(l => l.key).filter(k => k));
-			const newLabels = configSet.labels.filter(l => !existingKeys.has(l.key));
-			labels = [...labels.filter(l => l.key), ...newLabels.map(l => ({ ...l }))];
-			if (labels.length === 0) labels = [{ key: '', value: '' }];
-		}
-
-		// Apply ports (merge with existing)
-		if (configSet.ports && configSet.ports.length > 0) {
-			const existingPorts = new Set(portMappings.map(p => `${p.hostPort}:${p.containerPort}`).filter(p => p !== ':'));
-			const newPorts = configSet.ports.filter(p => !existingPorts.has(`${p.hostPort}:${p.containerPort}`));
-			portMappings = [...portMappings.filter(p => p.hostPort || p.containerPort), ...newPorts.map(p => ({ ...p }))];
-			if (portMappings.length === 0) portMappings = [{ hostPort: '', containerPort: '', protocol: 'tcp' }];
-		}
-
-		// Apply volumes (merge with existing)
-		if (configSet.volumes && configSet.volumes.length > 0) {
-			const existingPaths = new Set(volumeMappings.map(v => v.containerPath).filter(p => p));
-			const newVolumes = configSet.volumes.filter(v => !existingPaths.has(v.containerPath));
-			volumeMappings = [...volumeMappings.filter(v => v.hostPath || v.containerPath), ...newVolumes.map(v => ({ ...v }))];
-			if (volumeMappings.length === 0) volumeMappings = [{ hostPath: '', containerPath: '', mode: 'rw' }];
-		}
-
-		// Apply network mode
-		if (configSet.network_mode) {
-			networkMode = configSet.network_mode;
-		}
-
-		// Apply restart policy
-		if (configSet.restart_policy) {
-			restartPolicy = configSet.restart_policy;
-		}
-	}
-
-	// Form state
+	// Form state - Basic
 	let name = $state('');
 	let image = $state('');
 	let command = $state('');
 	let restartPolicy = $state('no');
+	let restartMaxRetries = $state<number | ''>('');
 	let networkMode = $state('bridge');
 	let startAfterUpdate = $state(true);
 
@@ -165,11 +113,50 @@
 	let availableNetworks = $state<DockerNetwork[]>([]);
 	let selectedNetworks = $state<string[]>([]);
 
+	// User/Group
+	let containerUser = $state('');
+
+	// Privileged mode
+	let privilegedMode = $state(false);
+
+	// Healthcheck settings
+	let healthcheckEnabled = $state(false);
+	let healthcheckCommand = $state('');
+	let healthcheckInterval = $state(30);
+	let healthcheckTimeout = $state(30);
+	let healthcheckRetries = $state(3);
+	let healthcheckStartPeriod = $state(0);
+
+	// Resource limits
+	let memoryLimit = $state('');
+	let memoryReservation = $state('');
+	let cpuShares = $state('');
+	let nanoCpus = $state('');
+	let cpuQuota = $state('');
+	let cpuPeriod = $state('');
+
+	// Capabilities
+	let capAdd = $state<string[]>([]);
+	let capDrop = $state<string[]>([]);
+
+	// Devices
+	let deviceMappings = $state<{ hostPath: string; containerPath: string; permissions: string }[]>([]);
+
+	// DNS settings
+	let dnsServers = $state<string[]>([]);
+	let dnsSearch = $state<string[]>([]);
+	let dnsOptions = $state<string[]>([]);
+
+	// Security options
+	let securityOptions = $state<string[]>([]);
+
+	// Ulimits
+	let ulimits = $state<{ name: string; soft: string; hard: string }[]>([]);
+
 	// Auto-update settings
 	let autoUpdateEnabled = $state(false);
 	let autoUpdateCronExpression = $state('0 3 * * *');
-	let vulnerabilityCriteria = $state<string>('never');
-	let envHasScanning = $state(false);
+	let vulnerabilityCriteria = $state<VulnerabilityCriteria>('never');
 	let currentEnvId = $state<number | null>(null);
 	currentEnvironment.subscribe(env => currentEnvId = env?.id || null);
 
@@ -185,6 +172,29 @@
 		envVars: typeof envVars;
 		labels: typeof labels;
 		selectedNetworks: string[];
+		// Advanced options
+		containerUser: string;
+		privilegedMode: boolean;
+		healthcheckEnabled: boolean;
+		healthcheckCommand: string;
+		healthcheckInterval: number;
+		healthcheckTimeout: number;
+		healthcheckRetries: number;
+		healthcheckStartPeriod: number;
+		memoryLimit: string;
+		memoryReservation: string;
+		cpuShares: string;
+		nanoCpus: string;
+		cpuQuota: string;
+		cpuPeriod: string;
+		capAdd: string[];
+		capDrop: string[];
+		securityOptions: string[];
+		deviceMappings: typeof deviceMappings;
+		dnsServers: string[];
+		dnsSearch: string[];
+		dnsOptions: string[];
+		ulimits: typeof ulimits;
 	} | null>(null);
 
 	// Compose container detection
@@ -229,7 +239,6 @@
 	function startEditingTitle() {
 		editTitleName = name;
 		isEditingTitle = true;
-		// Focus after DOM updates
 		setTimeout(() => {
 			titleInputRef?.focus();
 			titleInputRef?.select();
@@ -246,27 +255,22 @@
 			cancelEditingTitle();
 			return;
 		}
-		// Just update the local name state - the actual rename happens on form submit
 		name = editTitleName.trim();
 		isEditingTitle = false;
 	}
 
 	async function checkScannerSettings() {
 		if (!currentEnvId) {
-			envHasScanning = false;
 			return;
 		}
 		try {
 			const response = await fetch(`/api/settings/scanner?env=${currentEnvId}&settingsOnly=true`);
 			if (response.ok) {
 				const data = await response.json();
-				// Scanner settings are nested under 'settings' key
 				const settings = data.settings || data;
-				envHasScanning = settings.scanner !== 'none';
 			}
 		} catch (err) {
 			console.error('Failed to check scanner settings:', err);
-			envHasScanning = false;
 		}
 	}
 
@@ -282,7 +286,6 @@
 				autoUpdateEnabled = data.enabled || false;
 				autoUpdateCronExpression = data.cronExpression || '0 3 * * *';
 				vulnerabilityCriteria = data.vulnerabilityCriteria || 'never';
-				// Store original auto-update settings
 				originalAutoUpdate = {
 					enabled: autoUpdateEnabled,
 					cronExpression: autoUpdateCronExpression,
@@ -311,33 +314,38 @@
 		}
 	}
 
+	function formatBytes(bytes: number): string {
+		if (bytes === 0) return '';
+		const k = 1024;
+		const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+		const i = Math.floor(Math.log(bytes) / Math.log(k));
+		return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + sizes[i];
+	}
+
 	async function loadContainerData() {
 		loadingData = true;
 		try {
 			const response = await fetch(appendEnvParam(`/api/containers/${containerId}`, $currentEnvironment?.id));
 			const data = await response.json();
 
-			// Check if API returned an error
 			if (!response.ok || data.error) {
 				throw new Error(data.error || `Failed to fetch container: ${response.status}`);
 			}
 
-			// Parse container data
+			// Parse basic container data
 			name = data.Name.replace(/^\//, '');
 			image = data.Config.Image;
-			// Preserve command by quoting arguments that contain spaces
 			command = data.Config.Cmd ? data.Config.Cmd.map((arg: string) =>
 				arg.includes(' ') ? `"${arg}"` : arg
 			).join(' ') : '';
 			restartPolicy = data.HostConfig.RestartPolicy?.Name || 'no';
+			restartMaxRetries = data.HostConfig.RestartPolicy?.MaximumRetryCount ?? '';
 
-			// Normalize network mode - Docker returns custom network names as NetworkMode
-			// but we only support bridge/host/none in the dropdown
+			// Normalize network mode
 			const rawNetworkMode = data.HostConfig.NetworkMode || 'bridge';
 			if (['bridge', 'host', 'none', 'default'].includes(rawNetworkMode)) {
 				networkMode = rawNetworkMode === 'default' ? 'bridge' : rawNetworkMode;
 			} else {
-				// Custom network - default to bridge mode (container is already connected via Networks)
 				networkMode = 'bridge';
 			}
 
@@ -401,6 +409,80 @@
 			const networks = data.NetworkSettings?.Networks || {};
 			selectedNetworks = Object.keys(networks);
 
+			// Parse advanced options - User
+			containerUser = data.Config.User || '';
+
+			// Parse advanced options - Privileged
+			privilegedMode = data.HostConfig.Privileged || false;
+
+			// Parse advanced options - Healthcheck
+			const healthcheck = data.Config.Healthcheck;
+			if (healthcheck && healthcheck.Test && healthcheck.Test.length > 0) {
+				healthcheckEnabled = true;
+				// Extract command from Test array (first element is usually CMD-SHELL or CMD)
+				if (healthcheck.Test[0] === 'CMD-SHELL') {
+					healthcheckCommand = healthcheck.Test.slice(1).join(' ');
+				} else if (healthcheck.Test[0] === 'CMD') {
+					healthcheckCommand = healthcheck.Test.slice(1).join(' ');
+				} else if (healthcheck.Test[0] === 'NONE') {
+					healthcheckEnabled = false;
+				} else {
+					healthcheckCommand = healthcheck.Test.join(' ');
+				}
+				healthcheckInterval = Math.floor((healthcheck.Interval || 30e9) / 1e9);
+				healthcheckTimeout = Math.floor((healthcheck.Timeout || 30e9) / 1e9);
+				healthcheckRetries = healthcheck.Retries || 3;
+				healthcheckStartPeriod = Math.floor((healthcheck.StartPeriod || 0) / 1e9);
+			}
+
+			// Parse advanced options - Resources
+			if (data.HostConfig.Memory) {
+				memoryLimit = formatBytes(data.HostConfig.Memory);
+			}
+			if (data.HostConfig.MemoryReservation) {
+				memoryReservation = formatBytes(data.HostConfig.MemoryReservation);
+			}
+			if (data.HostConfig.CpuShares && data.HostConfig.CpuShares !== 0) {
+				cpuShares = String(data.HostConfig.CpuShares);
+			}
+			if (data.HostConfig.NanoCpus) {
+				nanoCpus = String(data.HostConfig.NanoCpus / 1e9);
+			}
+			if (data.HostConfig.CpuQuota) {
+				cpuQuota = String(data.HostConfig.CpuQuota);
+			}
+			if (data.HostConfig.CpuPeriod) {
+				cpuPeriod = String(data.HostConfig.CpuPeriod);
+			}
+
+			// Parse advanced options - Capabilities
+			capAdd = data.HostConfig.CapAdd || [];
+			capDrop = data.HostConfig.CapDrop || [];
+
+			// Parse advanced options - Devices
+			const devices = data.HostConfig.Devices || [];
+			deviceMappings = devices.map((d: any) => ({
+				hostPath: d.PathOnHost || '',
+				containerPath: d.PathInContainer || '',
+				permissions: d.CgroupPermissions || 'rwm'
+			}));
+
+			// Parse advanced options - DNS
+			dnsServers = data.HostConfig.Dns || [];
+			dnsSearch = data.HostConfig.DnsSearch || [];
+			dnsOptions = data.HostConfig.DnsOptions || [];
+
+			// Parse advanced options - Security options
+			securityOptions = data.HostConfig.SecurityOpt || [];
+
+			// Parse advanced options - Ulimits
+			const ulimitsList = data.HostConfig.Ulimits || [];
+			ulimits = ulimitsList.map((u: any) => ({
+				name: u.Name || '',
+				soft: String(u.Soft || 0),
+				hard: String(u.Hard || 0)
+			}));
+
 			// Fetch available networks and auto-update settings
 			await fetchNetworks();
 			await fetchAutoUpdateSettings(name);
@@ -416,94 +498,53 @@
 				volumeMappings: JSON.parse(JSON.stringify(volumeMappings)),
 				envVars: JSON.parse(JSON.stringify(envVars)),
 				labels: JSON.parse(JSON.stringify(labels)),
-				selectedNetworks: [...selectedNetworks]
+				selectedNetworks: [...selectedNetworks],
+				// Advanced options
+				containerUser,
+				privilegedMode,
+				healthcheckEnabled,
+				healthcheckCommand,
+				healthcheckInterval,
+				healthcheckTimeout,
+				healthcheckRetries,
+				healthcheckStartPeriod,
+				memoryLimit,
+				memoryReservation,
+				cpuShares,
+				nanoCpus,
+				cpuQuota,
+				cpuPeriod,
+				capAdd: [...capAdd],
+				capDrop: [...capDrop],
+				securityOptions: [...securityOptions],
+				deviceMappings: JSON.parse(JSON.stringify(deviceMappings)),
+				dnsServers: [...dnsServers],
+				dnsSearch: [...dnsSearch],
+				dnsOptions: [...dnsOptions],
+				ulimits: JSON.parse(JSON.stringify(ulimits))
 			};
 		} catch (err) {
 			error = 'Failed to load container data: ' + String(err);
 		} finally {
 			loadingData = false;
-			// Show dialog after data is loaded and a frame to let it render
 			requestAnimationFrame(() => {
 				visible = true;
-				// Focus first input after form renders
 				focusFirstInput();
 			});
 		}
 	}
 
-	function addPortMapping() {
-		portMappings = [...portMappings, { hostPort: '', containerPort: '', protocol: 'tcp' }];
-	}
-
-	function removePortMapping(index: number) {
-		portMappings = portMappings.filter((_, i) => i !== index);
-	}
-
-	function addVolumeMapping() {
-		volumeMappings = [...volumeMappings, { hostPath: '', containerPath: '', mode: 'rw' }];
-	}
-
-	function removeVolumeMapping(index: number) {
-		volumeMappings = volumeMappings.filter((_, i) => i !== index);
-	}
-
-	function addEnvVar() {
-		envVars = [...envVars, { key: '', value: '' }];
-	}
-
-	function removeEnvVar(index: number) {
-		envVars = envVars.filter((_, i) => i !== index);
-	}
-
-	function addLabel() {
-		labels = [...labels, { key: '', value: '' }];
-	}
-
-	function removeLabel(index: number) {
-		labels = labels.filter((_, i) => i !== index);
-	}
-
-	function addNetwork(networkId: string) {
-		if (networkId && !selectedNetworks.includes(networkId)) {
-			selectedNetworks = [...selectedNetworks, networkId];
-		}
-	}
-
-	function removeNetwork(networkId: string) {
-		selectedNetworks = selectedNetworks.filter((n) => n !== networkId);
-	}
-
-	function getDriverBadgeClasses(driver: string): string {
-		const base = 'text-2xs px-1.5 py-0.5 rounded font-medium';
-		switch (driver.toLowerCase()) {
-			case 'bridge':
-				return `${base} bg-emerald-100 text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-300`;
-			case 'host':
-				return `${base} bg-sky-100 text-sky-700 dark:bg-sky-900/50 dark:text-sky-300`;
-			case 'null':
-			case 'none':
-				return `${base} bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400`;
-			case 'overlay':
-				return `${base} bg-violet-100 text-violet-700 dark:bg-violet-900/50 dark:text-violet-300`;
-			case 'macvlan':
-				return `${base} bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300`;
-			default:
-				return `${base} bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400`;
-		}
-	}
-
 	// Check if container configuration has changed
 	function hasContainerConfigChanged(): boolean {
 		if (!originalConfig) return true;
 
-		// Compare simple fields
+		// Basic options
 		if (name.trim() !== originalConfig.name) return true;
 		if (image.trim() !== originalConfig.image) return true;
 		if (command.trim() !== originalConfig.command) return true;
 		if (restartPolicy !== originalConfig.restartPolicy) return true;
 		if (networkMode !== originalConfig.networkMode) return true;
 
-		// Compare arrays (filter out empty entries for comparison)
 		const currentPorts = portMappings.filter(p => p.containerPort && p.hostPort);
 		const originalPorts = originalConfig.portMappings.filter(p => p.containerPort && p.hostPort);
 		if (JSON.stringify(currentPorts) !== JSON.stringify(originalPorts)) return true;
@@ -520,13 +561,49 @@
 		const originalLabels = originalConfig.labels.filter(l => l.key);
 		if (JSON.stringify(currentLabels) !== JSON.stringify(originalLabels)) return true;
 
-		// Compare networks
 		if (JSON.stringify([...selectedNetworks].sort()) !== JSON.stringify([...originalConfig.selectedNetworks].sort())) return true;
 
+		// Advanced options - User & Security
+		if (containerUser !== originalConfig.containerUser) return true;
+		if (privilegedMode !== originalConfig.privilegedMode) return true;
+		if (JSON.stringify([...capAdd].sort()) !== JSON.stringify([...originalConfig.capAdd].sort())) return true;
+		if (JSON.stringify([...capDrop].sort()) !== JSON.stringify([...originalConfig.capDrop].sort())) return true;
+		if (JSON.stringify([...securityOptions].sort()) !== JSON.stringify([...originalConfig.securityOptions].sort())) return true;
+
+		// Advanced options - Healthcheck
+		if (healthcheckEnabled !== originalConfig.healthcheckEnabled) return true;
+		if (healthcheckCommand !== originalConfig.healthcheckCommand) return true;
+		if (healthcheckInterval !== originalConfig.healthcheckInterval) return true;
+		if (healthcheckTimeout !== originalConfig.healthcheckTimeout) return true;
+		if (healthcheckRetries !== originalConfig.healthcheckRetries) return true;
+		if (healthcheckStartPeriod !== originalConfig.healthcheckStartPeriod) return true;
+
+		// Advanced options - Resources
+		if (memoryLimit !== originalConfig.memoryLimit) return true;
+		if (memoryReservation !== originalConfig.memoryReservation) return true;
+		if (cpuShares !== originalConfig.cpuShares) return true;
+		if (nanoCpus !== originalConfig.nanoCpus) return true;
+		if (cpuQuota !== originalConfig.cpuQuota) return true;
+		if (cpuPeriod !== originalConfig.cpuPeriod) return true;
+
+		// Advanced options - Devices
+		const currentDevices = deviceMappings.filter(d => d.hostPath && d.containerPath);
+		const originalDevices = originalConfig.deviceMappings.filter(d => d.hostPath && d.containerPath);
+		if (JSON.stringify(currentDevices) !== JSON.stringify(originalDevices)) return true;
+
+		// Advanced options - DNS
+		if (JSON.stringify([...dnsServers]) !== JSON.stringify([...originalConfig.dnsServers])) return true;
+		if (JSON.stringify([...dnsSearch]) !== JSON.stringify([...originalConfig.dnsSearch])) return true;
+		if (JSON.stringify([...dnsOptions]) !== JSON.stringify([...originalConfig.dnsOptions])) return true;
+
+		// Advanced options - Ulimits
+		const currentUlimits = ulimits.filter(u => u.name && u.soft && u.hard);
+		const originalUlimits = originalConfig.ulimits.filter(u => u.name && u.soft && u.hard);
+		if (JSON.stringify(currentUlimits) !== JSON.stringify(originalUlimits)) return true;
+
 		return false;
 	}
 
-	// Check if auto-update settings have changed
 	function hasAutoUpdateChanged(): boolean {
 		if (!originalAutoUpdate) return true;
 		return (
@@ -536,7 +613,6 @@
 		);
 	}
 
-	// Serialize current form state for comparison (excluding name for rename detection)
 	function serializeConfigWithoutName() {
 		return JSON.stringify({
 			image: image.trim(),
@@ -551,7 +627,6 @@
 		});
 	}
 
-	// Serialize original config without name
 	function serializeOriginalConfigWithoutName() {
 		if (!originalConfig) return null;
 		return JSON.stringify({
@@ -567,32 +642,48 @@
 		});
 	}
 
-	// Check if ONLY the container name changed (no other config)
 	function hasOnlyNameChanged(): boolean {
 		if (!originalConfig) return false;
-		if (name.trim() === originalConfig.name) return false; // Name didn't change
-
-		// Compare everything except name
+		if (name.trim() === originalConfig.name) return false;
 		return serializeConfigWithoutName() === serializeOriginalConfigWithoutName();
 	}
 
-	// Check if config changes other than name occurred
 	function hasConfigChangedBesidesName(): boolean {
 		if (!originalConfig) return false;
 		return serializeConfigWithoutName() !== serializeOriginalConfigWithoutName();
 	}
 
-	// Derived state for warnings
 	let showComposeRenameWarning = $derived(isComposeContainer && hasOnlyNameChanged());
 	let showComposeConfigWarning = $derived(isComposeContainer && hasConfigChangedBesidesName());
 
+	function parseMemory(value: string): number | undefined {
+		if (!value) return undefined;
+		const match = value.trim().toLowerCase().match(/^(\d+(?:\.\d+)?)\s*([kmgt]?b?)?$/);
+		if (!match) return undefined;
+		const num = parseFloat(match[1]);
+		const unit = match[2] || '';
+		switch (unit) {
+			case 'k': case 'kb': return Math.floor(num * 1024);
+			case 'm': case 'mb': return Math.floor(num * 1024 * 1024);
+			case 'g': case 'gb': return Math.floor(num * 1024 * 1024 * 1024);
+			case 't': case 'tb': return Math.floor(num * 1024 * 1024 * 1024 * 1024);
+			default: return Math.floor(num);
+		}
+	}
+
+	function parseNanoCpus(value: string): number | undefined {
+		if (!value) return undefined;
+		const num = parseFloat(value);
+		if (isNaN(num)) return undefined;
+		return Math.floor(num * 1e9);
+	}
+
 	async function handleSubmit(e: Event) {
 		e.preventDefault();
 		error = '';
 		errors = {};
 		statusMessage = '';
 
-		// Validate required fields
 		let hasErrors = false;
 		if (!name.trim()) {
 			errors.name = 'Container name is required';
@@ -613,7 +704,6 @@
 		const containerConfigChanged = hasContainerConfigChanged();
 		const autoUpdateChanged = hasAutoUpdateChanged();
 
-		// If nothing changed, just close
 		if (!containerConfigChanged && !autoUpdateChanged) {
 			onClose();
 			loading = false;
@@ -621,7 +711,7 @@
 		}
 
 		try {
-			// If only name changed, use the rename endpoint (preserves labels, no restart)
+			// If only name changed, use the rename endpoint
 			if (hasOnlyNameChanged()) {
 				statusMessage = 'Renaming container...';
 
@@ -644,7 +734,6 @@
 
 				statusMessage = 'Container renamed successfully!';
 
-				// Save auto-update settings if changed (use new name)
 				if (autoUpdateChanged) {
 					await saveAutoUpdateSettings(name.trim());
 				}
@@ -660,7 +749,6 @@
 			if (containerConfigChanged) {
 				statusMessage = 'Updating container...';
 
-				// Build ports object
 				const ports: any = {};
 				portMappings
 					.filter((p) => p.containerPort && p.hostPort)
@@ -669,17 +757,14 @@
 						ports[key] = { HostPort: String(p.hostPort) };
 					});
 
-				// Build volume binds
 				const volumeBinds = volumeMappings
 					.filter((v) => v.hostPath && v.containerPath)
 					.map((v) => `${v.hostPath}:${v.containerPath}:${v.mode}`);
 
-				// Build env array
 				const env = envVars
 					.filter((e) => e.key && e.value)
 					.map((e) => `${e.key}=${e.value}`);
 
-				// Build labels object
 				const labelsObj: any = {};
 				labels
 					.filter((l) => l.key && l.value)
@@ -687,9 +772,35 @@
 						labelsObj[l.key] = l.value;
 					});
 
-				// Build command array - parse shell command properly respecting quotes
 				const cmd = command.trim() ? parseShellCommand(command.trim()) : undefined;
 
+				let healthcheck: any = undefined;
+				if (healthcheckEnabled && healthcheckCommand.trim()) {
+					healthcheck = {
+						test: ['CMD-SHELL', healthcheckCommand.trim()],
+						interval: healthcheckInterval * 1e9,
+						timeout: healthcheckTimeout * 1e9,
+						retries: healthcheckRetries,
+						startPeriod: healthcheckStartPeriod * 1e9
+					};
+				}
+
+				const devices = deviceMappings
+					.filter(d => d.hostPath && d.containerPath)
+					.map(d => ({
+						hostPath: d.hostPath,
+						containerPath: d.containerPath,
+						permissions: d.permissions || 'rwm'
+					}));
+
+				const ulimitsArray = ulimits
+					.filter(u => u.name && u.soft && u.hard)
+					.map(u => ({
+						name: u.name,
+						soft: parseInt(u.soft) || 0,
+						hard: parseInt(u.hard) || 0
+					}));
+
 				const payload = {
 					name: name.trim(),
 					image: image.trim(),
@@ -699,9 +810,27 @@
 					labels: Object.keys(labelsObj).length > 0 ? labelsObj : undefined,
 					cmd,
 					restartPolicy,
+					restartMaxRetries: restartPolicy === 'on-failure' && restartMaxRetries !== '' ? Number(restartMaxRetries) : undefined,
 					networkMode,
 					networks: selectedNetworks.length > 0 ? selectedNetworks : undefined,
-					startAfterUpdate
+					startAfterUpdate,
+					user: containerUser.trim() || undefined,
+					privileged: privilegedMode || undefined,
+					healthcheck,
+					memory: parseMemory(memoryLimit),
+					memoryReservation: parseMemory(memoryReservation),
+					cpuShares: cpuShares ? parseInt(cpuShares) : undefined,
+					nanoCpus: parseNanoCpus(nanoCpus),
+					cpuQuota: cpuQuota ? parseInt(cpuQuota) : undefined,
+					cpuPeriod: cpuPeriod ? parseInt(cpuPeriod) : undefined,
+					capAdd: capAdd.length > 0 ? capAdd : undefined,
+					capDrop: capDrop.length > 0 ? capDrop : undefined,
+					devices: devices.length > 0 ? devices : undefined,
+					dns: dnsServers.length > 0 ? dnsServers : undefined,
+					dnsSearch: dnsSearch.length > 0 ? dnsSearch : undefined,
+					dnsOptions: dnsOptions.length > 0 ? dnsOptions : undefined,
+					securityOpt: securityOptions.length > 0 ? securityOptions : undefined,
+					ulimits: ulimitsArray.length > 0 ? ulimitsArray : undefined
 				};
 
 				const response = await fetch(appendEnvParam(`/api/containers/${containerId}/update`, $currentEnvironment?.id), {
@@ -723,7 +852,6 @@
 				statusMessage = 'Container updated successfully!';
 			}
 
-			// Save auto-update settings if changed
 			if (autoUpdateChanged) {
 				if (!containerConfigChanged) {
 					statusMessage = 'Saving auto-update settings...';
@@ -734,7 +862,6 @@
 				}
 			}
 
-			// Brief delay to show success message
 			await new Promise(resolve => setTimeout(resolve, 500));
 
 			onSuccess();
@@ -751,18 +878,20 @@
 	}
 
 	$effect(() => {
-		if (open && containerId) {
+		if (open && containerId && !hasLoadedData) {
 			visible = false;
 			loadingData = true;
+			name = ''; // Reset to prevent showing stale name in header
 			statusMessage = '';
 			error = '';
+			hasLoadedData = true;
 			loadContainerData();
 			fetchConfigSets();
 			selectedConfigSetId = '';
 		} else if (!open) {
-			// Reset states when closed
 			loadingData = true;
 			visible = false;
+			hasLoadedData = false;
 		}
 	});
 </script>
@@ -820,467 +949,79 @@
 				Loading container data...
 			</div>
 		{:else}
-			<div class="px-5 py-4 space-y-5 flex-1 overflow-y-auto">
-				<!-- Config Set Selector -->
-				{#if configSets.length > 0}
-					<div class="space-y-2">
-						<div class="flex items-center gap-2 pb-2 border-b">
-							<Settings2 class="w-4 h-4 text-muted-foreground" />
-							<h3 class="text-sm font-semibold text-foreground">Apply config set</h3>
-						</div>
-						<div class="flex gap-2 items-end">
-							<div class="flex-1">
-								<Select.Root type="single" value={selectedConfigSetId} onValueChange={applyConfigSet}>
-									<Select.Trigger class="w-full h-9">
-										<span>{selectedConfigSetId ? configSets.find(c => c.id === parseInt(selectedConfigSetId))?.name : 'Select a config set to merge values...'}</span>
-									</Select.Trigger>
-									<Select.Content>
-										{#each configSets as configSet}
-											<Select.Item value={String(configSet.id)} label={configSet.name}>
-												<div class="flex flex-col">
-													<span>{configSet.name}</span>
-													{#if configSet.description}
-														<span class="text-xs text-muted-foreground">{configSet.description}</span>
-													{/if}
-												</div>
-											</Select.Item>
-										{/each}
-									</Select.Content>
-								</Select.Root>
-							</div>
-						</div>
-						{#if selectedConfigSetId}
-							{@const selectedSet = configSets.find(c => c.id === parseInt(selectedConfigSetId))}
-							{#if selectedSet?.description}
-								<p class="text-xs text-muted-foreground">{selectedSet.description}</p>
-							{/if}
-						{/if}
-						<p class="text-xs text-muted-foreground">Note: Values from the config set will be merged with existing settings. Existing keys won't be overwritten.</p>
+			<div class="px-5 py-4 flex-1 overflow-y-auto">
+				<!-- Compose warning banners -->
+				{#if showComposeRenameWarning}
+					<div class="mb-4 px-3 py-2 text-xs text-amber-700 dark:text-amber-300 bg-amber-100/50 dark:bg-amber-900/30 rounded-md flex items-start gap-2">
+						<Layers class="w-4 h-4 shrink-0 mt-0.5" />
+						<span>This container is part of the <strong>{composeStackName}</strong> compose stack. Renaming it may cause issues with stack management.</span>
 					</div>
 				{/if}
-
-				<!-- Compose Container Warnings -->
 				{#if showComposeConfigWarning}
-					<div class="bg-destructive/10 border border-destructive/30 rounded-lg p-3 flex items-start gap-3">
-						<AlertTriangle class="w-5 h-5 text-destructive shrink-0 mt-0.5" />
-						<div class="text-sm">
-							<p class="font-medium text-destructive">
-								This container belongs to stack "{composeStackName}"
-							</p>
-							<p class="text-muted-foreground mt-1">
-								Modifying settings will remove this container from the stack. The container will be recreated and lose its stack association. To avoid this, edit the stack's compose file instead.
-							</p>
-						</div>
-					</div>
-				{:else if showComposeRenameWarning}
-					<div class="bg-sky-500/10 border border-sky-500/30 rounded-lg p-3 flex items-start gap-3">
-						<Info class="w-5 h-5 text-sky-500 shrink-0 mt-0.5" />
-						<div class="text-sm">
-							<p class="font-medium text-sky-600 dark:text-sky-400">
-								Renaming container from stack "{composeStackName}"
-							</p>
-							<p class="text-muted-foreground mt-1">
-								The container will stay in the stack, but the compose file will be out of sync. Running <code class="text-xs bg-muted px-1 py-0.5 rounded">docker compose up</code> may recreate it with the original name.
-							</p>
-						</div>
-					</div>
-				{:else if isComposeContainer}
-					<div class="bg-muted/50 border rounded-lg p-3 flex items-start gap-3">
-						<Layers class="w-5 h-5 text-muted-foreground shrink-0 mt-0.5" />
-						<div class="text-sm">
-							<p class="font-medium text-foreground">
-								Stack container: {composeStackName}
-							</p>
-							<p class="text-muted-foreground mt-1">
-								This container is managed by a Docker Compose stack.
-							</p>
-						</div>
+					<div class="mb-4 px-3 py-2 text-xs text-amber-700 dark:text-amber-300 bg-amber-100/50 dark:bg-amber-900/30 rounded-md flex items-start gap-2">
+						<Layers class="w-4 h-4 shrink-0 mt-0.5" />
+						<span>This container is part of the <strong>{composeStackName}</strong> compose stack. Changes may be overwritten when the stack is redeployed.</span>
 					</div>
 				{/if}
 
-				<!-- Basic Settings -->
-				<div class="space-y-3">
-					<div class="flex items-center gap-2 pb-2 border-b">
-						<h3 class="text-sm font-semibold text-foreground">Basic settings</h3>
-					</div>
-
-					<div class="grid grid-cols-2 gap-3">
-						<div class="space-y-1.5">
-							<Label for="name" class="text-xs font-medium">Container name *</Label>
-							<Input
-								id="name"
-								bind:value={name}
-								placeholder="my-container"
-								required
-								class="h-9 {errors.name ? 'border-destructive focus-visible:ring-destructive' : ''}"
-								oninput={() => errors.name = undefined}
-							/>
-							{#if errors.name}
-								<p class="text-xs text-destructive">{errors.name}</p>
-							{/if}
-						</div>
-						<div class="space-y-1.5">
-							<Label for="image" class="text-xs font-medium">Image *</Label>
-							<Input
-								id="image"
-								bind:value={image}
-								placeholder="nginx:latest"
-								required
-								class="h-9 {errors.image ? 'border-destructive focus-visible:ring-destructive' : ''}"
-								oninput={() => errors.image = undefined}
-							/>
-							{#if errors.image}
-								<p class="text-xs text-destructive">{errors.image}</p>
-							{/if}
-						</div>
-					</div>
-
-					<div class="space-y-1.5">
-						<Label for="command" class="text-xs font-medium">Command (optional)</Label>
-						<Input id="command" bind:value={command} placeholder="/bin/sh -c 'echo hello'" class="h-9" />
-					</div>
-
-					<div class="grid grid-cols-2 gap-3">
-						<div class="space-y-1.5">
-							<Label for="restartPolicy" class="text-xs font-medium">Restart policy</Label>
-							<Select.Root type="single" bind:value={restartPolicy}>
-								<Select.Trigger class="w-full h-9">
-									<span class="flex items-center">
-										{#if restartPolicy === 'no'}
-											<Ban class="w-3.5 h-3.5 mr-2 text-muted-foreground" />
-										{:else if restartPolicy === 'always'}
-											<RotateCw class="w-3.5 h-3.5 mr-2 text-green-500" />
-										{:else if restartPolicy === 'on-failure'}
-											<AlertTriangle class="w-3.5 h-3.5 mr-2 text-amber-500" />
-										{:else}
-											<PauseCircle class="w-3.5 h-3.5 mr-2 text-blue-500" />
-										{/if}
-										{restartPolicy === 'no' ? 'No' : restartPolicy === 'always' ? 'Always' : restartPolicy === 'on-failure' ? 'On failure' : 'Unless stopped'}
-									</span>
-								</Select.Trigger>
-								<Select.Content>
-									<Select.Item value="no">
-										{#snippet children()}
-											<Ban class="w-3.5 h-3.5 mr-2 text-muted-foreground" />
-											No
-										{/snippet}
-									</Select.Item>
-									<Select.Item value="always">
-										{#snippet children()}
-											<RotateCw class="w-3.5 h-3.5 mr-2 text-green-500" />
-											Always
-										{/snippet}
-									</Select.Item>
-									<Select.Item value="on-failure">
-										{#snippet children()}
-											<AlertTriangle class="w-3.5 h-3.5 mr-2 text-amber-500" />
-											On failure
-										{/snippet}
-									</Select.Item>
-									<Select.Item value="unless-stopped">
-										{#snippet children()}
-											<PauseCircle class="w-3.5 h-3.5 mr-2 text-blue-500" />
-											Unless stopped
-										{/snippet}
-									</Select.Item>
-								</Select.Content>
-							</Select.Root>
-						</div>
-
-						<div class="space-y-1.5">
-							<Label for="networkMode" class="text-xs font-medium">Network mode</Label>
-							<Select.Root type="single" bind:value={networkMode}>
-								<Select.Trigger class="w-full h-9">
-									<span class="flex items-center">
-										{#if networkMode === 'bridge'}
-											<Share2 class="w-3.5 h-3.5 mr-2 text-emerald-500" />
-										{:else if networkMode === 'host'}
-											<Server class="w-3.5 h-3.5 mr-2 text-sky-500" />
-										{:else}
-											<CircleOff class="w-3.5 h-3.5 mr-2 text-muted-foreground" />
-										{/if}
-										{networkMode === 'bridge' ? 'Bridge' : networkMode === 'host' ? 'Host' : 'None'}
-									</span>
-								</Select.Trigger>
-								<Select.Content>
-									<Select.Item value="bridge">
-										{#snippet children()}
-											<Share2 class="w-3.5 h-3.5 mr-2 text-emerald-500" />
-											Bridge
-										{/snippet}
-									</Select.Item>
-									<Select.Item value="host">
-										{#snippet children()}
-											<Server class="w-3.5 h-3.5 mr-2 text-sky-500" />
-											Host
-										{/snippet}
-									</Select.Item>
-									<Select.Item value="none">
-										{#snippet children()}
-											<CircleOff class="w-3.5 h-3.5 mr-2 text-muted-foreground" />
-											None
-										{/snippet}
-									</Select.Item>
-								</Select.Content>
-							</Select.Root>
-						</div>
-					</div>
-
-					<div class="flex items-center space-x-2 pt-1">
-						<Checkbox id="startAfterUpdate" bind:checked={startAfterUpdate} />
-						<Label for="startAfterUpdate" class="text-xs font-normal">Start container after update</Label>
-					</div>
-				</div>
-
-				<!-- Networks -->
-				{#if availableNetworks.length > 0}
-					<div class="space-y-2">
-						<div class="flex justify-between items-center pb-2 border-b">
-							<div class="flex items-center gap-2">
-								<Network class="w-4 h-4 text-muted-foreground" />
-								<h3 class="text-sm font-semibold text-foreground">Networks</h3>
-							</div>
-						</div>
-
-						<div class="space-y-2">
-							<Select.Root type="single" value="" onValueChange={addNetwork}>
-								<Select.Trigger class="w-full h-9">
-									<span class="text-muted-foreground">Select network to add...</span>
-								</Select.Trigger>
-								<Select.Content>
-									{#each availableNetworks.filter(n => !selectedNetworks.includes(n.name) && !['bridge', 'host', 'none'].includes(n.name)) as network}
-										<Select.Item value={network.name}>
-											{#snippet children()}
-												<div class="flex items-center justify-between w-full">
-													<span>{network.name}</span>
-													<span class={getDriverBadgeClasses(network.driver)}>{network.driver}</span>
-												</div>
-											{/snippet}
-										</Select.Item>
-									{/each}
-								</Select.Content>
-							</Select.Root>
-
-							{#if selectedNetworks.length > 0}
-								<div class="flex flex-wrap gap-2 pt-1">
-									{#each selectedNetworks as networkName}
-										{@const network = availableNetworks.find(n => n.name === networkName)}
-										<Badge variant="secondary" class="flex items-center gap-1.5 pr-1">
-											{networkName}
-											{#if network}
-												<span class={getDriverBadgeClasses(network.driver)}>{network.driver}</span>
-											{/if}
-											<button
-												type="button"
-												onclick={() => removeNetwork(networkName)}
-												class="ml-0.5 hover:bg-destructive/20 rounded p-0.5"
-											>
-												<X class="w-3 h-3" />
-											</button>
-										</Badge>
-									{/each}
-								</div>
-							{/if}
-							<p class="text-xs text-muted-foreground">Container will be connected to selected networks in addition to the network mode above</p>
-						</div>
-					</div>
-				{/if}
-
-				<!-- Port Mappings -->
-				<div class="space-y-2">
-					<div class="flex justify-between items-center pb-2 border-b">
-						<h3 class="text-sm font-semibold text-foreground">Port mappings</h3>
-						<Button type="button" size="sm" variant="ghost" onclick={addPortMapping} class="h-7 text-xs">
-							<Plus class="w-3.5 h-3.5 mr-1" />
-							Add
-						</Button>
-					</div>
-
-					<div class="space-y-2">
-						{#each portMappings as mapping, index}
-							<div class="flex gap-2 items-center">
-								<div class="flex-1 relative">
-									<span class="absolute -top-2 left-2 text-2xs text-muted-foreground bg-background px-1">Host</span>
-									<Input bind:value={mapping.hostPort} type="number" class="h-9" />
-								</div>
-								<div class="flex-1 relative">
-									<span class="absolute -top-2 left-2 text-2xs text-muted-foreground bg-background px-1">Container</span>
-									<Input bind:value={mapping.containerPort} type="number" class="h-9" />
-								</div>
-								<div class="relative">
-									<span class="absolute -top-2 left-2 text-2xs text-muted-foreground bg-background px-1 z-10">Protocol</span>
-									<Select.Root type="single" bind:value={mapping.protocol}>
-										<Select.Trigger class="w-20 h-9">
-											<span>{mapping.protocol.toUpperCase()}</span>
-										</Select.Trigger>
-										<Select.Content>
-											<Select.Item value="tcp" label="TCP" />
-											<Select.Item value="udp" label="UDP" />
-										</Select.Content>
-									</Select.Root>
-								</div>
-								<Button
-									type="button"
-									size="icon"
-									variant="ghost"
-									onclick={() => removePortMapping(index)}
-									disabled={portMappings.length === 1}
-									class="h-9 w-9 text-muted-foreground hover:text-destructive"
-								>
-									<Trash2 class="w-4 h-4" />
-								</Button>
-							</div>
-						{/each}
-					</div>
-				</div>
-
-				<!-- Volume Mappings -->
-				<div class="space-y-2">
-					<div class="flex justify-between items-center pb-2 border-b">
-						<h3 class="text-sm font-semibold text-foreground">Volume mappings</h3>
-						<Button type="button" size="sm" variant="ghost" onclick={addVolumeMapping} class="h-7 text-xs">
-							<Plus class="w-3.5 h-3.5 mr-1" />
-							Add
-						</Button>
-					</div>
-
-					<div class="space-y-2">
-						{#each volumeMappings as mapping, index}
-							<div class="flex gap-2 items-center">
-								<div class="flex-1 relative">
-									<span class="absolute -top-2 left-2 text-2xs text-muted-foreground bg-background px-1">Host path</span>
-									<Input bind:value={mapping.hostPath} class="h-9" />
-								</div>
-								<div class="flex-1 relative">
-									<span class="absolute -top-2 left-2 text-2xs text-muted-foreground bg-background px-1">Container path</span>
-									<Input bind:value={mapping.containerPath} class="h-9" />
-								</div>
-								<div class="relative">
-									<span class="absolute -top-2 left-2 text-2xs text-muted-foreground bg-background px-1 z-10">Mode</span>
-									<Select.Root type="single" bind:value={mapping.mode}>
-										<Select.Trigger class="w-16 h-9">
-											<span>{mapping.mode.toUpperCase()}</span>
-										</Select.Trigger>
-										<Select.Content>
-											<Select.Item value="rw" label="RW" />
-											<Select.Item value="ro" label="RO" />
-										</Select.Content>
-									</Select.Root>
-								</div>
-								<Button
-									type="button"
-									size="icon"
-									variant="ghost"
-									onclick={() => removeVolumeMapping(index)}
-									disabled={volumeMappings.length === 1}
-									class="h-9 w-9 text-muted-foreground hover:text-destructive"
-								>
-									<Trash2 class="w-4 h-4" />
-								</Button>
-							</div>
-						{/each}
-					</div>
-				</div>
-
-				<!-- Environment Variables -->
-				<div class="space-y-2">
-					<div class="flex justify-between items-center pb-2 border-b">
-						<h3 class="text-sm font-semibold text-foreground">Environment variables</h3>
-						<Button type="button" size="sm" variant="ghost" onclick={addEnvVar} class="h-7 text-xs">
-							<Plus class="w-3.5 h-3.5 mr-1" />
-							Add
-						</Button>
-					</div>
-
-					<div class="space-y-2">
-						{#each envVars as envVar, index}
-							<div class="flex gap-2 items-center">
-								<div class="flex-1 relative">
-									<span class="absolute -top-2 left-2 text-2xs text-muted-foreground bg-background px-1">Key</span>
-									<Input bind:value={envVar.key} class="h-9" />
-								</div>
-								<div class="flex-1 relative">
-									<span class="absolute -top-2 left-2 text-2xs text-muted-foreground bg-background px-1">Value</span>
-									<Input bind:value={envVar.value} class="h-9" />
-								</div>
-								<Button
-									type="button"
-									size="icon"
-									variant="ghost"
-									onclick={() => removeEnvVar(index)}
-									disabled={envVars.length === 1}
-									class="h-9 w-9 text-muted-foreground hover:text-destructive"
-								>
-									<Trash2 class="w-4 h-4" />
-								</Button>
-							</div>
-						{/each}
-					</div>
-				</div>
-
-				<!-- Labels -->
-				<div class="space-y-2">
-					<div class="flex justify-between items-center pb-2 border-b">
-						<h3 class="text-sm font-semibold text-foreground">Labels</h3>
-						<Button type="button" size="sm" variant="ghost" onclick={addLabel} class="h-7 text-xs">
-							<Plus class="w-3.5 h-3.5 mr-1" />
-							Add
-						</Button>
-					</div>
-
-					<div class="space-y-2">
-						{#each labels as label, index}
-							<div class="flex gap-2 items-center">
-								<div class="flex-1 relative">
-									<span class="absolute -top-2 left-2 text-2xs text-muted-foreground bg-background px-1">Key</span>
-									<Input bind:value={label.key} class="h-9" />
-								</div>
-								<div class="flex-1 relative">
-									<span class="absolute -top-2 left-2 text-2xs text-muted-foreground bg-background px-1">Value</span>
-									<Input bind:value={label.value} class="h-9" />
-								</div>
-								<Button
-									type="button"
-									size="icon"
-									variant="ghost"
-									onclick={() => removeLabel(index)}
-									disabled={labels.length === 1}
-									class="h-9 w-9 text-muted-foreground hover:text-destructive"
-								>
-									<Trash2 class="w-4 h-4" />
-								</Button>
-							</div>
-						{/each}
-					</div>
-				</div>
-
-				<!-- Auto-update Settings -->
-				<div class="space-y-3">
-					<div class="flex items-center gap-2 pb-2 border-b">
-						<CircleArrowUp class="w-4 h-4 text-muted-foreground" />
-						<h3 class="text-sm font-semibold text-foreground">Auto-update</h3>
-					</div>
-
-				<AutoUpdateSettings
-					bind:enabled={autoUpdateEnabled}
-					bind:cronExpression={autoUpdateCronExpression}
-					bind:vulnerabilityCriteria={vulnerabilityCriteria}
+				<ContainerSettingsTab
+					mode="edit"
+					bind:name
+					bind:image
+					bind:command
+					bind:restartPolicy
+					bind:restartMaxRetries
+					bind:networkMode
+					startAfterCreate={startAfterUpdate}
+					bind:portMappings
+					bind:volumeMappings
+					bind:envVars
+					bind:labels
+					{availableNetworks}
+					bind:selectedNetworks
+					bind:containerUser
+					bind:privilegedMode
+					bind:healthcheckEnabled
+					bind:healthcheckCommand
+					bind:healthcheckInterval
+					bind:healthcheckTimeout
+					bind:healthcheckRetries
+					bind:healthcheckStartPeriod
+					bind:memoryLimit
+					bind:memoryReservation
+					bind:cpuShares
+					bind:nanoCpus
+					bind:cpuQuota
+					bind:cpuPeriod
+					bind:capAdd
+					bind:capDrop
+					bind:securityOptions
+					bind:deviceMappings
+					bind:dnsServers
+					bind:dnsSearch
+					bind:dnsOptions
+					bind:ulimits
+					bind:autoUpdateEnabled
+					bind:autoUpdateCronExpression
+					bind:vulnerabilityCriteria
+					{configSets}
+					bind:selectedConfigSetId
+					bind:errors
 				/>
-				</div>
 
 				{#if statusMessage}
-					<div class="px-3 py-2 text-xs text-primary bg-primary/10 rounded-md">
+					<div class="mt-4 px-3 py-2 text-xs text-primary bg-primary/10 rounded-md">
 						{statusMessage}
 					</div>
 				{/if}
 
 				{#if error}
-					<div class="px-3 py-2 text-xs text-destructive bg-destructive/10 rounded-md">
+					<div class="mt-4 px-3 py-2 text-xs text-destructive bg-destructive/10 rounded-md">
 						{error}
 					</div>
 				{/if}
-
 			</div>
+
 			<div class="flex justify-end gap-2 px-5 py-3 border-t bg-muted/30 shrink-0">
 				<Button type="button" variant="outline" onclick={handleClose} disabled={loading} size="sm">
 					Cancel
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index 039aafb..7a84821 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -270,17 +270,14 @@
 							<Input
 								id="mfaToken"
 								type="text"
-								placeholder="Enter 6-digit code"
+								placeholder="Enter code"
 								bind:value={mfaToken}
 								required
 								disabled={loading}
 								autocomplete="one-time-code"
-								inputmode="numeric"
-								pattern="[0-9]*"
-								maxlength={6}
 							/>
 							<p class="text-xs text-muted-foreground">
-								Enter the code from your authenticator app
+								Enter the 6-digit code from your authenticator app, or use a backup code
 							</p>
 						</div>
 					{/if}
diff --git a/src/routes/logs/+page.svelte b/src/routes/logs/+page.svelte
index bdfe0c6..f32fad9 100644
--- a/src/routes/logs/+page.svelte
+++ b/src/routes/logs/+page.svelte
@@ -294,7 +294,8 @@ import type { FavoriteGroup } from '../api/preferences/favorite-groups/+server';
 		}
 
 		if (urlContainerId) {
-			// Single container from URL
+			// Single container from URL - always switch to single mode
+			layoutMode = 'single';
 			const container = fetchedContainers.find(c => c.id === urlContainerId || c.id.startsWith(urlContainerId));
 			if (container) {
 				selectContainer(container);
diff --git a/src/routes/profile/+page.svelte b/src/routes/profile/+page.svelte
index 1ab3b21..50b22aa 100644
--- a/src/routes/profile/+page.svelte
+++ b/src/routes/profile/+page.svelte
@@ -26,7 +26,6 @@
 	} from 'lucide-svelte';
 	import { authStore } from '$lib/stores/auth';
 	import * as Alert from '$lib/components/ui/alert';
-	import { licenseStore } from '$lib/stores/license';
 	import AvatarCropper from '$lib/components/AvatarCropper.svelte';
 	import * as Avatar from '$lib/components/ui/avatar';
 	import ChangePasswordModal from './ChangePasswordModal.svelte';
@@ -542,26 +541,19 @@
 									</p>
 								</div>
 							</div>
-							{#if $licenseStore.isEnterprise}
-								{#if profile.mfaEnabled}
-									<Button variant="outline" onclick={() => showDisableMfaModal = true}>
-										Disable MFA
-									</Button>
-								{:else}
-									<Button onclick={setupMfa} disabled={mfaLoading}>
-										{#if mfaLoading}
-											<RefreshCw class="w-4 h-4 mr-1 animate-spin" />
-										{:else}
-											<QrCode class="w-4 h-4 mr-1" />
-										{/if}
-										Setup MFA
-									</Button>
-								{/if}
+							{#if profile.mfaEnabled}
+								<Button variant="outline" onclick={() => showDisableMfaModal = true}>
+									Disable MFA
+								</Button>
 							{:else}
-								<Badge variant="outline" class="gap-1 rounded-sm">
-									<Crown class="w-3 h-3" />
-									Enterprise
-								</Badge>
+								<Button onclick={setupMfa} disabled={mfaLoading}>
+									{#if mfaLoading}
+										<RefreshCw class="w-4 h-4 mr-1 animate-spin" />
+									{:else}
+										<QrCode class="w-4 h-4 mr-1" />
+									{/if}
+									Setup MFA
+								</Button>
 							{/if}
 						</div>
 					{:else}
diff --git a/src/routes/profile/MfaSetupModal.svelte b/src/routes/profile/MfaSetupModal.svelte
index c41370d..2241188 100644
--- a/src/routes/profile/MfaSetupModal.svelte
+++ b/src/routes/profile/MfaSetupModal.svelte
@@ -3,7 +3,7 @@
 	import * as Dialog from '$lib/components/ui/dialog';
 	import { Label } from '$lib/components/ui/label';
 	import { Input } from '$lib/components/ui/input';
-	import { QrCode, RefreshCw, ShieldCheck, TriangleAlert } from 'lucide-svelte';
+	import { QrCode, RefreshCw, ShieldCheck, TriangleAlert, Copy, Download, Check } from 'lucide-svelte';
 	import * as Alert from '$lib/components/ui/alert';
 	import { focusFirstInput } from '$lib/utils';
 
@@ -21,10 +21,16 @@
 	let token = $state('');
 	let loading = $state(false);
 	let error = $state('');
+	let backupCodes = $state<string[]>([]);
+	let showBackupCodes = $state(false);
+	let copied = $state(false);
 
 	function resetForm() {
 		token = '';
 		error = '';
+		backupCodes = [];
+		showBackupCodes = false;
+		copied = false;
 	}
 
 	async function verifyAndEnableMfa() {
@@ -43,11 +49,12 @@
 				body: JSON.stringify({ action: 'verify', token })
 			});
 
+			const data = await response.json();
+
 			if (response.ok) {
-				onSuccess();
-				onClose();
+				backupCodes = data.backupCodes || [];
+				showBackupCodes = true;
 			} else {
-				const data = await response.json();
 				error = data.error || 'Invalid verification code';
 			}
 		} catch (e) {
@@ -57,61 +64,143 @@
 		}
 	}
 
+	function formatBackupCodes(): string {
+		return backupCodes.map((code, i) => `${i + 1}. ${code}`).join('\n');
+	}
+
+	async function copyBackupCodes() {
+		try {
+			await navigator.clipboard.writeText(formatBackupCodes());
+			copied = true;
+			setTimeout(() => copied = false, 2000);
+		} catch {
+			error = 'Failed to copy to clipboard';
+		}
+	}
+
+	function downloadBackupCodes() {
+		const content = `Dockhand MFA Backup Codes\n${'='.repeat(30)}\n\nThese codes can be used to sign in if you lose access to your authenticator app.\nEach code can only be used once.\n\n${formatBackupCodes()}\n\nGenerated: ${new Date().toISOString()}`;
+		const blob = new Blob([content], { type: 'text/plain' });
+		const url = URL.createObjectURL(blob);
+		const a = document.createElement('a');
+		a.href = url;
+		a.download = 'dockhand-backup-codes.txt';
+		document.body.appendChild(a);
+		a.click();
+		document.body.removeChild(a);
+		URL.revokeObjectURL(url);
+	}
+
+	function handleDone() {
+		onSuccess();
+		onClose();
+	}
+
 </script>
 
-<Dialog.Root bind:open onOpenChange={(o) => { if (o) { resetForm(); focusFirstInput(); } else onClose(); }}>
+<Dialog.Root bind:open onOpenChange={(o) => { if (o) { resetForm(); focusFirstInput(); } else if (!showBackupCodes) onClose(); }}>
 	<Dialog.Content class="max-w-md">
 		<Dialog.Header>
 			<Dialog.Title class="flex items-center gap-2">
-				<QrCode class="w-5 h-5" />
-				Setup two-factor authentication
+				{#if showBackupCodes}
+					<ShieldCheck class="w-5 h-5 text-green-500" />
+					MFA enabled successfully
+				{:else}
+					<QrCode class="w-5 h-5" />
+					Setup two-factor authentication
+				{/if}
 			</Dialog.Title>
 		</Dialog.Header>
-		<div class="space-y-4">
-			{#if error}
-				<Alert.Root variant="destructive">
+
+		{#if showBackupCodes}
+			<!-- Backup codes view -->
+			<div class="space-y-4">
+				<Alert.Root>
 					<TriangleAlert class="h-4 w-4" />
-					<Alert.Description>{error}</Alert.Description>
+					<Alert.Description>
+						Save these backup codes in a safe place. Each code can only be used once to sign in if you lose access to your authenticator app.
+					</Alert.Description>
 				</Alert.Root>
-			{/if}
 
-			<p class="text-sm text-muted-foreground">
-				Scan this QR code with your authenticator app (Google Authenticator, Authy, etc.)
-			</p>
-
-			{#if qrCode}
-				<div class="flex justify-center p-4 bg-white rounded-lg">
-					<img src={qrCode} alt="MFA QR Code" class="w-48 h-48" />
+				<div class="grid grid-cols-2 gap-2 p-3 bg-muted rounded-lg font-mono text-sm">
+					{#each backupCodes as code, i}
+						<div class="flex items-center gap-2">
+							<span class="text-muted-foreground w-4">{i + 1}.</span>
+							<span>{code}</span>
+						</div>
+					{/each}
 				</div>
-			{/if}
 
-			<div class="space-y-2">
-				<Label class="text-xs text-muted-foreground">Or enter this code manually:</Label>
-				<code class="block p-2 bg-muted rounded text-sm font-mono break-all">{secret}</code>
+				<div class="flex gap-2">
+					<Button variant="outline" class="flex-1" onclick={copyBackupCodes}>
+						{#if copied}
+							<Check class="w-4 h-4 mr-1" />
+							Copied!
+						{:else}
+							<Copy class="w-4 h-4 mr-1" />
+							Copy codes
+						{/if}
+					</Button>
+					<Button variant="outline" class="flex-1" onclick={downloadBackupCodes}>
+						<Download class="w-4 h-4 mr-1" />
+						Download
+					</Button>
+				</div>
 			</div>
-
-			<div class="space-y-2">
-				<Label>Verification code</Label>
-				<Input
-					bind:value={token}
-					placeholder="Enter 6-digit code"
-					maxlength={6}
-				/>
-				<p class="text-xs text-muted-foreground">
-					Enter the code from your authenticator app to verify setup
-				</p>
-			</div>
-		</div>
-		<Dialog.Footer>
-			<Button variant="outline" onclick={onClose}>Cancel</Button>
-			<Button onclick={verifyAndEnableMfa} disabled={loading || !token}>
-				{#if loading}
-					<RefreshCw class="w-4 h-4 mr-1 animate-spin" />
-				{:else}
+			<Dialog.Footer>
+				<Button onclick={handleDone}>
 					<ShieldCheck class="w-4 h-4 mr-1" />
+					Done
+				</Button>
+			</Dialog.Footer>
+		{:else}
+			<!-- Setup view -->
+			<div class="space-y-4">
+				{#if error}
+					<Alert.Root variant="destructive">
+						<TriangleAlert class="h-4 w-4" />
+						<Alert.Description>{error}</Alert.Description>
+					</Alert.Root>
 				{/if}
-				Enable MFA
-			</Button>
-		</Dialog.Footer>
+
+				<p class="text-sm text-muted-foreground">
+					Scan this QR code with your authenticator app (Google Authenticator, Authy, etc.)
+				</p>
+
+				{#if qrCode}
+					<div class="flex justify-center p-4 bg-white rounded-lg">
+						<img src={qrCode} alt="MFA QR Code" class="w-48 h-48" />
+					</div>
+				{/if}
+
+				<div class="space-y-2">
+					<Label class="text-xs text-muted-foreground">Or enter this code manually:</Label>
+					<code class="block p-2 bg-muted rounded text-sm font-mono break-all">{secret}</code>
+				</div>
+
+				<div class="space-y-2">
+					<Label>Verification code</Label>
+					<Input
+						bind:value={token}
+						placeholder="Enter 6-digit code"
+						maxlength={6}
+					/>
+					<p class="text-xs text-muted-foreground">
+						Enter the code from your authenticator app to verify setup
+					</p>
+				</div>
+			</div>
+			<Dialog.Footer>
+				<Button variant="outline" onclick={onClose}>Cancel</Button>
+				<Button onclick={verifyAndEnableMfa} disabled={loading || !token}>
+					{#if loading}
+						<RefreshCw class="w-4 h-4 mr-1 animate-spin" />
+					{:else}
+						<ShieldCheck class="w-4 h-4 mr-1" />
+					{/if}
+					Enable MFA
+				</Button>
+			</Dialog.Footer>
+		{/if}
 	</Dialog.Content>
 </Dialog.Root>
diff --git a/src/routes/settings/auth/users/UserModal.svelte b/src/routes/settings/auth/users/UserModal.svelte
index 3868419..f8d96a4 100644
--- a/src/routes/settings/auth/users/UserModal.svelte
+++ b/src/routes/settings/auth/users/UserModal.svelte
@@ -235,7 +235,7 @@
 				toast.success('User created');
 			} else {
 				const data = await response.json();
-				formError = data.error || 'Failed to create user';
+				formError = data.details ? `${data.error}: ${data.details}` : (data.error || 'Failed to create user');
 				toast.error(formError);
 			}
 		} catch {
diff --git a/src/routes/settings/notifications/NotificationModal.svelte b/src/routes/settings/notifications/NotificationModal.svelte
index a619064..a4debff 100644
--- a/src/routes/settings/notifications/NotificationModal.svelte
+++ b/src/routes/settings/notifications/NotificationModal.svelte
@@ -45,6 +45,7 @@
 	let formSmtpHost = $state('');
 	let formSmtpPort = $state(587);
 	let formSmtpSecure = $state(false);
+	let formSmtpSkipTlsVerify = $state(false);
 	let formSmtpUsername = $state('');
 	let formSmtpPassword = $state('');
 	let formSmtpFromEmail = $state('');
@@ -68,6 +69,7 @@
 		formSmtpHost = '';
 		formSmtpPort = 587;
 		formSmtpSecure = false;
+		formSmtpSkipTlsVerify = false;
 		formSmtpUsername = '';
 		formSmtpPassword = '';
 		formSmtpFromEmail = '';
@@ -98,6 +100,7 @@
 					formSmtpHost = notification.config.host || '';
 					formSmtpPort = notification.config.port || 587;
 					formSmtpSecure = notification.config.secure || false;
+					formSmtpSkipTlsVerify = notification.config.skipTlsVerify || false;
 					formSmtpUsername = notification.config.username || '';
 					formSmtpPassword = '';
 					formSmtpFromEmail = notification.config.from_email || '';
@@ -133,6 +136,7 @@
 				host: formSmtpHost.trim(),
 				port: formSmtpPort,
 				secure: formSmtpSecure,
+				skipTlsVerify: formSmtpSkipTlsVerify || undefined,
 				username: formSmtpUsername.trim() || undefined,
 				password: formSmtpPassword || undefined,
 				from_email: formSmtpFromEmail.trim(),
@@ -350,9 +354,15 @@
 							<Input id="notif-smtp-port" type="number" bind:value={formSmtpPort} />
 						</div>
 					</div>
-					<div class="flex items-center gap-2">
-						<Label>TLS/SSL</Label>
-						<TogglePill bind:checked={formSmtpSecure} onLabel="Yes" offLabel="No" />
+					<div class="flex items-center gap-4">
+						<div class="flex items-center gap-2">
+							<Label>TLS/SSL</Label>
+							<TogglePill bind:checked={formSmtpSecure} onLabel="Yes" offLabel="No" />
+						</div>
+						<div class="flex items-center gap-2">
+							<Label class="text-muted-foreground">Skip TLS verify</Label>
+							<TogglePill bind:checked={formSmtpSkipTlsVerify} onLabel="Yes" offLabel="No" />
+						</div>
 					</div>
 					<div class="grid grid-cols-2 gap-4">
 						<div class="space-y-2">
diff --git a/src/routes/stacks/+page.svelte b/src/routes/stacks/+page.svelte
index d2b939d..24d6f3f 100644
--- a/src/routes/stacks/+page.svelte
+++ b/src/routes/stacks/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
 	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
 	import { toast } from 'svelte-sonner';
 	import { Badge } from '$lib/components/ui/badge';
 	import { Button } from '$lib/components/ui/button';
@@ -671,8 +672,9 @@
 			const response = await fetch(appendEnvParam(`/api/stacks/${encodeURIComponent(name)}/start`, envId), { method: 'POST' });
 			if (!response.ok) {
 				const data = await response.json();
-				operationError = { id: name, message: data.error || 'Failed to start stack' };
-				toast.error(`Failed to start ${name}`);
+				const errorMsg = data.error || 'Failed to start stack';
+				operationError = { id: name, message: errorMsg };
+				toast.error(errorMsg);
 				clearErrorAfterDelay(name);
 				return;
 			}
@@ -680,8 +682,9 @@
 			await fetchStacks();
 		} catch (error) {
 			console.error('Failed to start stack:', error);
-			operationError = { id: name, message: 'Failed to start stack' };
-			toast.error(`Failed to start ${name}`);
+			const errorMsg = error instanceof Error ? error.message : 'Failed to start stack';
+			operationError = { id: name, message: errorMsg };
+			toast.error(errorMsg);
 			clearErrorAfterDelay(name);
 		} finally {
 			stackActionLoading = null;
@@ -695,8 +698,9 @@
 			const response = await fetch(appendEnvParam(`/api/stacks/${encodeURIComponent(name)}/stop`, envId), { method: 'POST' });
 			if (!response.ok) {
 				const data = await response.json();
-				operationError = { id: name, message: data.error || 'Failed to stop stack' };
-				toast.error(`Failed to stop ${name}`);
+				const errorMsg = data.error || 'Failed to stop stack';
+				operationError = { id: name, message: errorMsg };
+				toast.error(errorMsg);
 				clearErrorAfterDelay(name);
 				return;
 			}
@@ -704,8 +708,9 @@
 			await fetchStacks();
 		} catch (error) {
 			console.error('Failed to stop stack:', error);
-			operationError = { id: name, message: 'Failed to stop stack' };
-			toast.error(`Failed to stop ${name}`);
+			const errorMsg = error instanceof Error ? error.message : 'Failed to stop stack';
+			operationError = { id: name, message: errorMsg };
+			toast.error(errorMsg);
 			clearErrorAfterDelay(name);
 		} finally {
 			stackActionLoading = null;
@@ -719,8 +724,9 @@
 			const response = await fetch(appendEnvParam(`/api/stacks/${encodeURIComponent(name)}/restart`, envId), { method: 'POST' });
 			if (!response.ok) {
 				const data = await response.json();
-				operationError = { id: name, message: data.error || 'Failed to restart stack' };
-				toast.error(`Failed to restart ${name}`);
+				const errorMsg = data.error || 'Failed to restart stack';
+				operationError = { id: name, message: errorMsg };
+				toast.error(errorMsg);
 				clearErrorAfterDelay(name);
 				return;
 			}
@@ -728,8 +734,9 @@
 			await fetchStacks();
 		} catch (error) {
 			console.error('Failed to restart stack:', error);
-			operationError = { id: name, message: 'Failed to restart stack' };
-			toast.error(`Failed to restart ${name}`);
+			const errorMsg = error instanceof Error ? error.message : 'Failed to restart stack';
+			operationError = { id: name, message: errorMsg };
+			toast.error(errorMsg);
 			clearErrorAfterDelay(name);
 		} finally {
 			stackActionLoading = null;
@@ -743,8 +750,9 @@
 			const response = await fetch(appendEnvParam(`/api/stacks/${encodeURIComponent(name)}/down`, envId), { method: 'POST' });
 			if (!response.ok) {
 				const data = await response.json();
-				operationError = { id: name, message: data.error || 'Failed to bring down stack' };
-				toast.error(`Failed to bring down ${name}`);
+				const errorMsg = data.error || 'Failed to bring down stack';
+				operationError = { id: name, message: errorMsg };
+				toast.error(errorMsg);
 				clearErrorAfterDelay(name);
 				return;
 			}
@@ -752,8 +760,9 @@
 			await fetchStacks();
 		} catch (error) {
 			console.error('Failed to bring down stack:', error);
-			operationError = { id: name, message: 'Failed to bring down stack' };
-			toast.error(`Failed to bring down ${name}`);
+			const errorMsg = error instanceof Error ? error.message : 'Failed to bring down stack';
+			operationError = { id: name, message: errorMsg };
+			toast.error(errorMsg);
 			clearErrorAfterDelay(name);
 		} finally {
 			stackActionLoading = null;
@@ -779,8 +788,9 @@
 			const response = await fetch(appendEnvParam(`/api/stacks/${encodeURIComponent(name)}?force=true`, envId), { method: 'DELETE' });
 			if (!response.ok) {
 				const data = await response.json();
-				operationError = { id: name, message: data.error || 'Failed to remove stack' };
-				toast.error(`Failed to remove ${name}`);
+				const errorMsg = data.error || 'Failed to remove stack';
+				operationError = { id: name, message: errorMsg };
+				toast.error(errorMsg);
 				clearErrorAfterDelay(name);
 				return;
 			}
@@ -788,8 +798,9 @@
 			await fetchStacks();
 		} catch (error) {
 			console.error('Failed to remove stack:', error);
-			operationError = { id: name, message: 'Failed to remove stack' };
-			toast.error(`Failed to remove ${name}`);
+			const errorMsg = error instanceof Error ? error.message : 'Failed to remove stack';
+			operationError = { id: name, message: errorMsg };
+			toast.error(errorMsg);
 			clearErrorAfterDelay(name);
 		}
 	}
@@ -835,8 +846,9 @@
 			const response = await fetch(appendEnvParam(`/api/containers/${containerId}/start`, envId), { method: 'POST' });
 			if (!response.ok) {
 				const data = await response.json();
-				operationError = { id: containerId, message: data.error || 'Failed to start container' };
-				toast.error('Failed to start container');
+				const errorMsg = data.error || 'Failed to start container';
+				operationError = { id: containerId, message: errorMsg };
+				toast.error(errorMsg);
 				clearErrorAfterDelay(containerId);
 				return;
 			}
@@ -844,8 +856,9 @@
 			await fetchStacks();
 		} catch (error) {
 			console.error('Failed to start container:', error);
-			operationError = { id: containerId, message: 'Failed to start container' };
-			toast.error('Failed to start container');
+			const errorMsg = error instanceof Error ? error.message : 'Failed to start container';
+			operationError = { id: containerId, message: errorMsg };
+			toast.error(errorMsg);
 			clearErrorAfterDelay(containerId);
 		} finally {
 			containerActionLoading = null;
@@ -859,8 +872,9 @@
 			const response = await fetch(appendEnvParam(`/api/containers/${containerId}/stop`, envId), { method: 'POST' });
 			if (!response.ok) {
 				const data = await response.json();
-				operationError = { id: containerId, message: data.error || 'Failed to stop container' };
-				toast.error('Failed to stop container');
+				const errorMsg = data.error || 'Failed to stop container';
+				operationError = { id: containerId, message: errorMsg };
+				toast.error(errorMsg);
 				clearErrorAfterDelay(containerId);
 				return;
 			}
@@ -868,8 +882,9 @@
 			await fetchStacks();
 		} catch (error) {
 			console.error('Failed to stop container:', error);
-			operationError = { id: containerId, message: 'Failed to stop container' };
-			toast.error('Failed to stop container');
+			const errorMsg = error instanceof Error ? error.message : 'Failed to stop container';
+			operationError = { id: containerId, message: errorMsg };
+			toast.error(errorMsg);
 			clearErrorAfterDelay(containerId);
 		} finally {
 			containerActionLoading = null;
@@ -883,8 +898,9 @@
 			const response = await fetch(appendEnvParam(`/api/containers/${containerId}/restart`, envId), { method: 'POST' });
 			if (!response.ok) {
 				const data = await response.json();
-				operationError = { id: containerId, message: data.error || 'Failed to restart container' };
-				toast.error('Failed to restart container');
+				const errorMsg = data.error || 'Failed to restart container';
+				operationError = { id: containerId, message: errorMsg };
+				toast.error(errorMsg);
 				clearErrorAfterDelay(containerId);
 				return;
 			}
@@ -892,8 +908,9 @@
 			await fetchStacks();
 		} catch (error) {
 			console.error('Failed to restart container:', error);
-			operationError = { id: containerId, message: 'Failed to restart container' };
-			toast.error('Failed to restart container');
+			const errorMsg = error instanceof Error ? error.message : 'Failed to restart container';
+			operationError = { id: containerId, message: errorMsg };
+			toast.error(errorMsg);
 			clearErrorAfterDelay(containerId);
 		} finally {
 			containerActionLoading = null;
@@ -907,8 +924,9 @@
 			const response = await fetch(appendEnvParam(`/api/containers/${containerId}/pause`, envId), { method: 'POST' });
 			if (!response.ok) {
 				const data = await response.json();
-				operationError = { id: containerId, message: data.error || 'Failed to pause container' };
-				toast.error('Failed to pause container');
+				const errorMsg = data.error || 'Failed to pause container';
+				operationError = { id: containerId, message: errorMsg };
+				toast.error(errorMsg);
 				clearErrorAfterDelay(containerId);
 				return;
 			}
@@ -916,8 +934,9 @@
 			await fetchStacks();
 		} catch (error) {
 			console.error('Failed to pause container:', error);
-			operationError = { id: containerId, message: 'Failed to pause container' };
-			toast.error('Failed to pause container');
+			const errorMsg = error instanceof Error ? error.message : 'Failed to pause container';
+			operationError = { id: containerId, message: errorMsg };
+			toast.error(errorMsg);
 			clearErrorAfterDelay(containerId);
 		} finally {
 			containerActionLoading = null;
@@ -932,8 +951,9 @@
 			const response = await fetch(appendEnvParam(`/api/containers/${containerId}/unpause`, envId), { method: 'POST' });
 			if (!response.ok) {
 				const data = await response.json();
-				operationError = { id: containerId, message: data.error || 'Failed to unpause container' };
-				toast.error('Failed to unpause container');
+				const errorMsg = data.error || 'Failed to unpause container';
+				operationError = { id: containerId, message: errorMsg };
+				toast.error(errorMsg);
 				clearErrorAfterDelay(containerId);
 				return;
 			}
@@ -941,8 +961,9 @@
 			await fetchStacks();
 		} catch (error) {
 			console.error('Failed to unpause container:', error);
-			operationError = { id: containerId, message: 'Failed to unpause container' };
-			toast.error('Failed to unpause container');
+			const errorMsg = error instanceof Error ? error.message : 'Failed to unpause container';
+			operationError = { id: containerId, message: errorMsg };
+			toast.error(errorMsg);
 			clearErrorAfterDelay(containerId);
 		} finally {
 			containerActionLoading = null;
@@ -1013,6 +1034,13 @@
 		loadExpandedState();
 		loadStatusFilter();
 
+		// Check for search query param from URL (e.g., from container stack link)
+		const urlSearch = $page.url.searchParams.get('search');
+		if (urlSearch) {
+			searchInput = urlSearch;
+			searchQuery = urlSearch;
+		}
+
 		// Initial fetch is handled by $effect - no need to duplicate here
 
 		// Listen for tab visibility changes to refresh when user returns
@@ -1258,7 +1286,17 @@
 			{#snippet cell(column, stack, rowState)}
 				{@const source = getStackSource(stack.name)}
 				{#if column.id === 'name'}
-					<span class="font-medium text-xs">{stack.name}</span>
+					{#if source.sourceType === 'internal'}
+						<button
+							type="button"
+							class="font-medium text-xs hover:text-primary hover:underline cursor-pointer text-left"
+							onclick={() => editStack(stack.name)}
+						>
+							{stack.name}
+						</button>
+					{:else}
+						<span class="font-medium text-xs">{stack.name}</span>
+					{/if}
 					{#if stackEnvVarCounts[stack.name]}
 						<Tooltip.Root>
 							<Tooltip.Trigger>
diff --git a/src/routes/stacks/GitStackModal.svelte b/src/routes/stacks/GitStackModal.svelte
index 93baa84..af6fa47 100644
--- a/src/routes/stacks/GitStackModal.svelte
+++ b/src/routes/stacks/GitStackModal.svelte
@@ -5,7 +5,8 @@
 	import { Label } from '$lib/components/ui/label';
 	import { Input } from '$lib/components/ui/input';
 	import { TogglePill } from '$lib/components/ui/toggle-pill';
-	import { Loader2, GitBranch, RefreshCw, Webhook, Rocket, RefreshCcw, Copy, Check, FolderGit2, Github, Key, KeyRound, Lock, FileText } from 'lucide-svelte';
+	import { Loader2, GitBranch, RefreshCw, Webhook, Rocket, RefreshCcw, Copy, Check, FolderGit2, Github, Key, KeyRound, Lock, FileText, HelpCircle } from 'lucide-svelte';
+	import * as Tooltip from '$lib/components/ui/tooltip';
 	import CronEditor from '$lib/components/cron-editor.svelte';
 	import StackEnvVarsPanel from '$lib/components/StackEnvVarsPanel.svelte';
 	import { type EnvVar, type ValidationResult } from '$lib/components/StackEnvVarsEditor.svelte';
@@ -582,9 +583,23 @@
 				<p class="text-xs text-muted-foreground">Path to the compose file within the repository</p>
 			</div>
 
-			<!-- .env file path -->
+			<!-- Additional env file for variable substitution -->
 			<div class="space-y-2">
-				<Label for="env-file-path">.env file path</Label>
+				<div class="flex items-center gap-1.5">
+					<Label for="env-file-path">Additional .env file (optional)</Label>
+					<Tooltip.Root>
+						<Tooltip.Trigger>
+							<HelpCircle class="w-3.5 h-3.5 text-muted-foreground cursor-help" />
+						</Tooltip.Trigger>
+						<Tooltip.Content>
+							<div class="w-80">
+								<p class="text-xs">All files in the git repository are cloned automatically, including any files referenced by <code class="bg-muted px-1 rounded">env_file:</code> directives.</p>
+								<p class="text-xs mt-2">Only use this field for additional environment variables to be passed to Docker Compose.</p>
+								<p class="text-xs mt-2">The contents will be parsed and passed as shell environment variables.</p>
+							</div>
+						</Tooltip.Content>
+					</Tooltip.Root>
+				</div>
 				{#if gitStack && envFiles.length > 0}
 					<!-- Dropdown selector for existing stacks with discovered .env files -->
 					<Select.Root
@@ -633,7 +648,9 @@
 						placeholder=".env"
 					/>
 				{/if}
-				<p class="text-xs text-muted-foreground">Path to the .env file within the repository (optional)</p>
+				<p class="text-xs text-muted-foreground">
+				For variable substitution from a file outside the compose directory.
+			</p>
 			</div>
 
 			<!-- Auto-update section -->
@@ -740,15 +757,17 @@
 
 			<!-- Deploy now option (only for new stacks) -->
 			{#if !gitStack}
-				<div class="flex items-center gap-3">
-					<div class="flex items-center gap-2 flex-1">
-						<Rocket class="w-4 h-4 text-muted-foreground" />
-						<div class="flex-1">
-							<Label class="text-sm font-normal">Deploy now</Label>
-							<p class="text-xs text-muted-foreground">Clone and deploy the stack immediately</p>
+				<div class="space-y-3 p-3 bg-muted/50 rounded-md">
+					<div class="flex items-center gap-3">
+						<div class="flex items-center gap-2 flex-1">
+							<Rocket class="w-4 h-4 text-muted-foreground" />
+							<div class="flex-1">
+								<Label class="text-sm font-normal">Deploy now</Label>
+								<p class="text-xs text-muted-foreground">Clone and deploy the stack immediately</p>
+							</div>
 						</div>
+						<TogglePill bind:checked={formDeployNow} />
 					</div>
-					<TogglePill bind:checked={formDeployNow} />
 				</div>
 			{/if}
 
diff --git a/src/routes/stacks/StackModal.svelte b/src/routes/stacks/StackModal.svelte
index 8ed7b7c..7171cd9 100644
--- a/src/routes/stacks/StackModal.svelte
+++ b/src/routes/stacks/StackModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { onMount, onDestroy, tick } from 'svelte';
 	import * as Dialog from '$lib/components/ui/dialog';
 	import { Button } from '$lib/components/ui/button';
 	import { Input } from '$lib/components/ui/input';
@@ -7,12 +7,16 @@
 	import CodeEditor, { type VariableMarker } from '$lib/components/CodeEditor.svelte';
 	import StackEnvVarsPanel from '$lib/components/StackEnvVarsPanel.svelte';
 	import { type EnvVar, type ValidationResult } from '$lib/components/StackEnvVarsEditor.svelte';
-	import { Layers, Save, Play, Code, GitGraph, Loader2, AlertCircle, X, Sun, Moon, TriangleAlert, ChevronsLeft, ChevronsRight, Variable } from 'lucide-svelte';
+	import { Layers, Save, Play, Code, GitGraph, Loader2, AlertCircle, X, Sun, Moon, TriangleAlert, ChevronsLeft, ChevronsRight, Variable, HelpCircle, GripVertical } from 'lucide-svelte';
+	import * as Tooltip from '$lib/components/ui/tooltip';
 	import { currentEnvironment, appendEnvParam } from '$lib/stores/environment';
 	import { focusFirstInput } from '$lib/utils';
 	import * as Alert from '$lib/components/ui/alert';
 	import ComposeGraphViewer from './ComposeGraphViewer.svelte';
 
+	// localStorage key for persisted split ratio
+	const STORAGE_KEY_SPLIT = 'dockhand-stack-modal-split';
+
 	interface Props {
 		open: boolean;
 		mode: 'create' | 'edit';
@@ -39,6 +43,8 @@
 	// Environment variables state
 	let envVars = $state<EnvVar[]>([]);
 	let originalEnvVars = $state<EnvVar[]>([]);
+	let rawEnvContent = $state('');
+	let originalRawEnvContent = $state('');
 	let envValidation = $state<ValidationResult | null>(null);
 	let validating = $state(false);
 	let existingSecretKeys = $state<Set<string>>(new Set());
@@ -49,6 +55,11 @@
 	// ComposeGraphViewer reference for resize on panel toggle
 	let graphViewerRef: ComposeGraphViewer | null = $state(null);
 
+	// Resizable split panel state
+	let splitRatio = $state(60); // percentage for compose panel
+	let isDraggingSplit = $state(false);
+	let containerRef: HTMLDivElement | null = $state(null);
+
 	// Debounce timer for validation
 	let validateTimer: ReturnType<typeof setTimeout> | null = null;
 
@@ -143,20 +154,22 @@ services:
 		if (validateTimer) clearTimeout(validateTimer);
 		validateTimer = setTimeout(() => {
 			validateEnvVars();
-		}, 500);
+		}, 1000);
 	}
 
-	// Explicitly push markers to the editor
+	// Explicitly push markers to the editor (immediate=true since this is called after validation)
 	function updateEditorMarkers() {
 		if (!codeEditorRef) return;
-		codeEditorRef.updateVariableMarkers(variableMarkers);
+		codeEditorRef.updateVariableMarkers(variableMarkers, true);
 	}
 
 	// Check for env var changes (compare by serializing)
 	const hasEnvVarChanges = $derived.by(() => {
-		const current = JSON.stringify(envVars.filter(v => v.key));
-		const original = JSON.stringify(originalEnvVars);
-		return current !== original;
+		const currentVars = JSON.stringify(envVars.filter(v => v.key));
+		const originalVars = JSON.stringify(originalEnvVars);
+		const varsChanged = currentVars !== originalVars;
+		const rawChanged = rawEnvContent !== originalRawEnvContent;
+		return varsChanged || rawChanged;
 	});
 
 	const hasChanges = $derived(hasComposeChanges || hasEnvVarChanges);
@@ -173,8 +186,48 @@ services:
 			// Fallback to system preference
 			editorTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
 		}
+
+		// Load saved split ratio
+		const savedSplit = localStorage.getItem(STORAGE_KEY_SPLIT);
+		if (savedSplit) {
+			const ratio = parseFloat(savedSplit);
+			if (!isNaN(ratio) && ratio >= 30 && ratio <= 80) {
+				splitRatio = ratio;
+			}
+		}
+
+		// Add global mouse event listeners for split dragging
+		window.addEventListener('mousemove', handleMouseMove);
+		window.addEventListener('mouseup', handleMouseUp);
 	});
 
+	onDestroy(() => {
+		window.removeEventListener('mousemove', handleMouseMove);
+		window.removeEventListener('mouseup', handleMouseUp);
+	});
+
+	// Split panel drag handlers
+	function startSplitDrag(e: MouseEvent) {
+		e.preventDefault();
+		isDraggingSplit = true;
+	}
+
+	function handleMouseMove(e: MouseEvent) {
+		if (isDraggingSplit && containerRef) {
+			const rect = containerRef.getBoundingClientRect();
+			const newRatio = ((e.clientX - rect.left) / rect.width) * 100;
+			splitRatio = Math.max(30, Math.min(80, newRatio));
+		}
+	}
+
+	function handleMouseUp() {
+		if (isDraggingSplit) {
+			isDraggingSplit = false;
+			// Save split ratio
+			localStorage.setItem(STORAGE_KEY_SPLIT, splitRatio.toString());
+		}
+	}
+
 	async function loadComposeFile() {
 		if (mode !== 'edit' || !stackName) return;
 
@@ -196,17 +249,29 @@ services:
 			composeContent = data.content;
 			originalContent = data.content;
 
-			// Load environment variables
+			// Load environment variables (parsed)
 			const envResponse = await fetch(appendEnvParam(`/api/stacks/${encodeURIComponent(stackName)}/env`, envId));
 			if (envResponse.ok) {
 				const envData = await envResponse.json();
 				envVars = envData.variables || [];
-				originalEnvVars = JSON.parse(JSON.stringify(envData.variables || []));
 				// Track existing secret keys (secrets loaded from DB cannot have visibility toggled)
 				existingSecretKeys = new Set(
 					envVars.filter(v => v.isSecret && v.key.trim()).map(v => v.key.trim())
 				);
 			}
+
+			// Load raw .env file content
+			const rawEnvResponse = await fetch(appendEnvParam(`/api/stacks/${encodeURIComponent(stackName)}/env/raw`, envId));
+			if (rawEnvResponse.ok) {
+				const rawEnvData = await rawEnvResponse.json();
+				rawEnvContent = rawEnvData.content || '';
+			}
+
+			// Wait for $effects in StackEnvVarsPanel to settle (parses raw content, syncs variables)
+			// Then set originals to the post-effect state to avoid false "unsaved changes"
+			await tick();
+			originalEnvVars = JSON.parse(JSON.stringify(envVars.filter(v => v.key.trim())));
+			originalRawEnvContent = rawEnvContent;
 		} catch (e: any) {
 			loadError = e.message;
 		} finally {
@@ -276,14 +341,22 @@ services:
 		try {
 			const envId = $currentEnvironment?.id ?? null;
 
-			// Create the stack
+			// Collect environment variables
+			const definedVars = envVars.filter(v => v.key.trim());
+
+			// Create the stack (include env vars so they're available before start)
 			const response = await fetch(appendEnvParam('/api/stacks', envId), {
 				method: 'POST',
 				headers: { 'Content-Type': 'application/json' },
 				body: JSON.stringify({
 					name: newStackName.trim(),
 					compose: content,
-					start
+					start,
+					envVars: definedVars.length > 0 ? definedVars.map(v => ({
+						key: v.key.trim(),
+						value: v.value,
+						isSecret: v.isSecret
+					})) : undefined
 				})
 			});
 
@@ -292,26 +365,6 @@ services:
 				throw new Error(data.error || 'Failed to create stack');
 			}
 
-			// Save environment variables if any are defined
-			const definedVars = envVars.filter(v => v.key.trim());
-			if (definedVars.length > 0) {
-				const envResponse = await fetch(appendEnvParam(`/api/stacks/${encodeURIComponent(newStackName.trim())}/env`, envId), {
-					method: 'PUT',
-					headers: { 'Content-Type': 'application/json' },
-					body: JSON.stringify({
-						variables: definedVars.map(v => ({
-							key: v.key.trim(),
-							value: v.value,
-							isSecret: v.isSecret
-						}))
-					})
-				});
-
-				if (!envResponse.ok) {
-					console.error('Failed to save environment variables');
-				}
-			}
-
 			onSuccess();
 			handleClose();
 		} catch (e: any) {
@@ -354,31 +407,59 @@ services:
 				throw new Error(data.error || 'Failed to save compose file');
 			}
 
-			// Save environment variables if any are defined
+			// Save environment variables
+			// Always save to raw endpoint for consistency
+			// If no raw content but has env vars, generate raw content from vars (backward compat)
 			const definedVars = envVars.filter(v => v.key.trim());
-			if (definedVars.length > 0 || originalEnvVars.length > 0) {
-				const envResponse = await fetch(
-					appendEnvParam(`/api/stacks/${encodeURIComponent(stackName)}/env`, envId),
+			let contentToSave = rawEnvContent;
+
+			// Backward compatibility: if no raw file but has DB envs, generate raw content
+			if (!contentToSave.trim() && definedVars.length > 0) {
+				contentToSave = definedVars.map(v => `${v.key.trim()}=${v.value}`).join('\n') + '\n';
+			}
+
+			// Save if there's any content OR if we need to clear an existing file
+			if (contentToSave.trim() || originalRawEnvContent.trim() || definedVars.length > 0 || originalEnvVars.length > 0) {
+				const rawEnvResponse = await fetch(
+					appendEnvParam(`/api/stacks/${encodeURIComponent(stackName)}/env/raw`, envId),
 					{
 						method: 'PUT',
 						headers: { 'Content-Type': 'application/json' },
-						body: JSON.stringify({
-							variables: definedVars.map(v => ({
-								key: v.key.trim(),
-								value: v.value,
-								isSecret: v.isSecret
-							}))
-						})
+						body: JSON.stringify({ content: contentToSave })
 					}
 				);
 
-				if (!envResponse.ok) {
-					console.error('Failed to save environment variables');
+				if (!rawEnvResponse.ok) {
+					console.error('Failed to save environment file');
+				}
+
+				// Also save to DB for secret tracking
+				if (definedVars.some(v => v.isSecret)) {
+					const envResponse = await fetch(
+						appendEnvParam(`/api/stacks/${encodeURIComponent(stackName)}/env`, envId),
+						{
+							method: 'PUT',
+							headers: { 'Content-Type': 'application/json' },
+							body: JSON.stringify({
+								variables: definedVars.map(v => ({
+									key: v.key.trim(),
+									value: v.value,
+									isSecret: v.isSecret
+								}))
+							})
+						}
+					);
+
+					if (!envResponse.ok) {
+						console.error('Failed to save secret markers to database');
+					}
 				}
 			}
 
 			originalContent = composeContent;
-			originalEnvVars = JSON.parse(JSON.stringify(definedVars));
+			originalEnvVars = JSON.parse(JSON.stringify(envVars.filter(v => v.key.trim())));
+			originalRawEnvContent = contentToSave; // Use what was actually saved
+			rawEnvContent = contentToSave; // Sync raw content if it was generated
 			onSuccess();
 
 			if (!restart) {
@@ -417,6 +498,8 @@ services:
 		originalContent = '';
 		envVars = [];
 		originalEnvVars = [];
+		rawEnvContent = '';
+		originalRawEnvContent = '';
 		envValidation = null;
 		existingSecretKeys = new Set();
 		activeTab = 'editor';
@@ -462,7 +545,7 @@ services:
 		// Debounce to avoid too many API calls while typing
 		const timeout = setTimeout(() => {
 			validateEnvVars();
-		}, 300);
+		}, 800);
 
 		return () => clearTimeout(timeout);
 	});
@@ -484,8 +567,11 @@ services:
 		}
 	}}
 >
-	<Dialog.Content class="max-w-7xl w-[95vw] h-[90vh] flex flex-col p-0 gap-0 shadow-xl border-zinc-200 dark:border-zinc-700" showCloseButton={false}>
-		<Dialog.Header class="px-5 py-3 border-b border-zinc-200 dark:border-zinc-700 flex-shrink-0 bg-zinc-50 dark:bg-zinc-800">
+	<Dialog.Content
+		class="max-w-none w-[calc(100vw-12rem)] h-[95vh] ml-[4.5rem] flex flex-col p-0 gap-0 shadow-xl border-zinc-200 dark:border-zinc-700"
+		showCloseButton={false}
+	>
+		<Dialog.Header class="px-5 py-3 border-b border-zinc-200 dark:border-zinc-700 flex-shrink-0">
 			<div class="flex items-center justify-between">
 				<div class="flex items-center gap-3">
 					<div class="flex items-center gap-2">
@@ -529,7 +615,7 @@ services:
 					</div>
 				</div>
 
-				<div class="flex items-center gap-2">
+				<div class="flex items-center gap-1">
 					<!-- Theme toggle (only in editor mode) -->
 					{#if activeTab === 'editor'}
 						<button
@@ -612,10 +698,10 @@ services:
 				{/if}
 
 				<!-- Content area -->
-				<div class="flex-1 min-h-0 flex">
+				<div bind:this={containerRef} class="flex-1 min-h-0 flex {isDraggingSplit ? 'select-none' : ''}">
 					{#if activeTab === 'editor'}
 						<!-- Editor tab: Code editor + Env panel side by side -->
-						<div class="w-[60%] flex-shrink-0 border-r border-zinc-200 dark:border-zinc-700 flex flex-col min-w-0">
+						<div class="flex-shrink-0 flex flex-col min-w-0" style="width: {splitRatio}%">
 							{#if open}
 								<div class="flex-1 p-3 min-h-0">
 									<CodeEditor
@@ -630,18 +716,66 @@ services:
 								</div>
 							{/if}
 						</div>
+						<!-- Resizable divider -->
+						<div
+							class="w-1 flex-shrink-0 bg-zinc-200 dark:bg-zinc-700 hover:bg-blue-400 dark:hover:bg-blue-500 cursor-col-resize transition-colors flex items-center justify-center group {isDraggingSplit ? 'bg-blue-500 dark:bg-blue-400' : ''}"
+							onmousedown={startSplitDrag}
+							role="separator"
+							aria-orientation="vertical"
+							tabindex="0"
+						>
+							<div class="w-4 h-8 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity {isDraggingSplit ? 'opacity-100' : ''}">
+								<GripVertical class="w-3 h-3 text-white" />
+							</div>
+						</div>
 						<!-- Environment variables panel -->
 						<div class="flex-1 min-w-0 flex flex-col overflow-hidden bg-zinc-50 dark:bg-zinc-800/50">
 							<div class="flex items-center gap-1.5 px-3 py-1.5 border-b border-zinc-200 dark:border-zinc-700 text-xs font-medium text-zinc-600 dark:text-zinc-300">
 								<Variable class="w-3.5 h-3.5" />
 								Environment variables
+								<Tooltip.Root>
+									<Tooltip.Trigger>
+										<HelpCircle class="w-3.5 h-3.5 text-muted-foreground cursor-help" />
+									</Tooltip.Trigger>
+									<Tooltip.Content>
+										<div class="w-64">
+											<p class="text-xs">These variables will be written to a <code class="bg-muted px-1 rounded">.env</code> file in the stack directory.</p>
+										</div>
+									</Tooltip.Content>
+								</Tooltip.Root>
+								<!-- Validation status pills -->
+								{#if envValidation}
+									<div class="flex gap-1 ml-auto">
+										{#if envValidation.missing.length > 0}
+											<span class="inline-flex items-center px-1.5 py-0.5 rounded text-2xs font-medium bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300">
+												{envValidation.missing.length} missing
+											</span>
+										{/if}
+										{#if envValidation.required.length > 0}
+											<span class="inline-flex items-center px-1.5 py-0.5 rounded text-2xs font-medium bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300">
+												{envValidation.required.length - envValidation.missing.length} required
+											</span>
+										{/if}
+										{#if envValidation.optional.length > 0}
+											<span class="inline-flex items-center px-1.5 py-0.5 rounded text-2xs font-medium bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300">
+												{envValidation.optional.length} optional
+											</span>
+										{/if}
+										{#if envValidation.unused.length > 0}
+											<span class="inline-flex items-center px-1.5 py-0.5 rounded text-2xs font-medium bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300">
+												{envValidation.unused.length} unused
+											</span>
+										{/if}
+									</div>
+								{/if}
 							</div>
 							<div class="flex-1 min-h-0 overflow-hidden">
 								<StackEnvVarsPanel
 									bind:variables={envVars}
+									bind:rawContent={rawEnvContent}
 									validation={envValidation}
 									existingSecretKeys={mode === 'edit' ? existingSecretKeys : new Set()}
-									onchange={() => validateEnvVars()}
+									onchange={debouncedValidate}
 								/>
 							</div>
 						</div>
@@ -659,7 +793,7 @@ services:
 		</div>
 
 		<!-- Footer -->
-		<div class="px-5 py-2.5 border-t border-zinc-200 dark:border-zinc-700 flex items-center justify-between flex-shrink-0 bg-zinc-50 dark:bg-zinc-800">
+		<div class="px-5 py-2.5 border-t border-zinc-200 dark:border-zinc-700 flex items-center justify-between flex-shrink-0">
 			<div class="text-xs text-zinc-500 dark:text-zinc-400">
 				{#if hasChanges}
 					<span class="text-amber-600 dark:text-amber-500">Unsaved changes</span>