diff --git a/cmd/server/main.go b/cmd/server/main.go
index b0e0c80..88f1a46 100644
--- a/cmd/server/main.go
+++ b/cmd/server/main.go
@@ -82,7 +82,7 @@ func main() {
 	if err != nil {
 		log.Fatalf("ensure webhook secret: %v", err)
 	}
-	log.Printf("Webhook secret: %s", secret)
+	log.Printf("Webhook secret configured (use /api/settings/webhook-url to retrieve)")
 
 	// Initialize registry poller.
 	poller := registry.NewPoller(db, dep, encKey)
diff --git a/internal/api/registries.go b/internal/api/registries.go
index 6f018b3..ea73c33 100644
--- a/internal/api/registries.go
+++ b/internal/api/registries.go
@@ -195,10 +195,10 @@ func (s *Server) testRegistry(w http.ResponseWriter, r *http.Request) {
 	if token != "" {
 		decrypted, err := crypto.Decrypt(s.encKey, token)
 		if err != nil {
-			token = reg.Token // Fall back to raw token.
-		} else {
-			token = decrypted
+			respondError(w, http.StatusInternalServerError, "failed to decrypt registry token")
+			return
 		}
+		token = decrypted
 	}
 
 	client, err := registry.NewClient(reg.Type, reg.URL, token)
@@ -239,10 +239,10 @@ func (s *Server) listRegistryTags(w http.ResponseWriter, r *http.Request) {
 	if token != "" {
 		decrypted, err := crypto.Decrypt(s.encKey, token)
 		if err != nil {
-			token = reg.Token
-		} else {
-			token = decrypted
+			respondError(w, http.StatusInternalServerError, "failed to decrypt registry token")
+			return
 		}
+		token = decrypted
 	}
 
 	client, err := registry.NewClient(reg.Type, reg.URL, token)
diff --git a/internal/api/router.go b/internal/api/router.go
index 198876b..347e4c7 100644
--- a/internal/api/router.go
+++ b/internal/api/router.go
@@ -35,6 +35,8 @@ func NewServer(
 }
 
 // Router returns a chi router with all API routes mounted.
+// NOTE: Authentication middleware is added in Phase 12 (Hardening).
+// Until then, this API should only be exposed on trusted networks.
 func (s *Server) Router() chi.Router {
 	r := chi.NewRouter()
 
diff --git a/internal/api/settings.go b/internal/api/settings.go
index 071722e..bbcf69a 100644
--- a/internal/api/settings.go
+++ b/internal/api/settings.go
@@ -111,8 +111,7 @@ func (s *Server) getWebhookURL(w http.ResponseWriter, r *http.Request) {
 	}
 
 	respondJSON(w, http.StatusOK, map[string]string{
-		"webhook_url":    webhookURL,
-		"webhook_secret": settings.WebhookSecret,
+		"webhook_url": webhookURL,
 	})
 }
 
diff --git a/plans/docker-watcher-core/PLAN.md b/plans/docker-watcher-core/PLAN.md
index 3dbcb0a..37f5bb4 100644
--- a/plans/docker-watcher-core/PLAN.md
+++ b/plans/docker-watcher-core/PLAN.md
@@ -53,7 +53,7 @@ A self-hosted tool that automates Docker container deployment with Nginx Proxy M
 | Phase 5: Registry & Poller | backend | ✅ Complete | ✅ Pass w/ fixes | ⏭️ Skip (Big Bang) | ✅ |
 | Phase 6: Webhook Handler | backend | ✅ Complete | ✅ Pass w/ fixes | ⏭️ Skip (Big Bang) | ✅ |
 | Phase 7: Deployer & Health | backend | ✅ Complete | ✅ Pass w/ fixes | ⏭️ Skip (Big Bang) | ✅ |
-| Phase 8: API Layer | backend | ✅ Complete | ⬜ Pending | ⏭️ Skip (Big Bang) | ⬜ |
+| Phase 8: API Layer | backend | ✅ Complete | ✅ Pass w/ fixes | ⏭️ Skip (Big Bang) | ✅ |
 | Phase 9: Dashboard | frontend | ⬜ Not Started | ⬜ | ⏭️ Skip (Big Bang) | ⬜ |
 | Phase 10: Settings & Deploy | frontend | ⬜ Not Started | ⬜ | ⏭️ Skip (Big Bang) | ⬜ |
 | Phase 11: Embed & SSE | fullstack | ⬜ Not Started | ⬜ | ⏭️ Skip (Big Bang) | ⬜ |
diff --git a/web/package.json b/web/package.json
new file mode 100644
index 0000000..e0b709d
--- /dev/null
+++ b/web/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "docker-watcher-web",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-static": "^3.0.8",
+    "@sveltejs/kit": "^2.15.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@tailwindcss/vite": "^4.0.0",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0"
+  },
+  "type": "module"
+}
diff --git a/web/src/app.css b/web/src/app.css
new file mode 100644
index 0000000..d4b5078
--- /dev/null
+++ b/web/src/app.css
@@ -0,0 +1 @@
+@import 'tailwindcss';
diff --git a/web/src/app.html b/web/src/app.html
new file mode 100644
index 0000000..77a5ff5
--- /dev/null
+++ b/web/src/app.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
diff --git a/web/src/lib/api.ts b/web/src/lib/api.ts
new file mode 100644
index 0000000..e07f93b
--- /dev/null
+++ b/web/src/lib/api.ts
@@ -0,0 +1,211 @@
+import type {
+	ApiEnvelope,
+	Deploy,
+	DeployLog,
+	InspectResult,
+	Instance,
+	Project,
+	ProjectDetail,
+	Registry,
+	Settings
+} from './types';
+
+// ── Helpers ─────────────────────────────────────────────────────────
+
+class ApiError extends Error {
+	constructor(
+		message: string,
+		public readonly status: number
+	) {
+		super(message);
+		this.name = 'ApiError';
+	}
+}
+
+async function request<T>(path: string, init?: RequestInit): Promise<T> {
+	const res = await fetch(path, {
+		...init,
+		headers: {
+			'Content-Type': 'application/json',
+			...init?.headers
+		}
+	});
+
+	const envelope: ApiEnvelope<T> = await res.json();
+
+	if (!envelope.success) {
+		throw new ApiError(envelope.error ?? 'Unknown API error', res.status);
+	}
+
+	return envelope.data as T;
+}
+
+function get<T>(path: string): Promise<T> {
+	return request<T>(path);
+}
+
+function post<T>(path: string, body?: unknown): Promise<T> {
+	return request<T>(path, {
+		method: 'POST',
+		body: body !== undefined ? JSON.stringify(body) : undefined
+	});
+}
+
+function put<T>(path: string, body: unknown): Promise<T> {
+	return request<T>(path, {
+		method: 'PUT',
+		body: JSON.stringify(body)
+	});
+}
+
+function del<T>(path: string): Promise<T> {
+	return request<T>(path, { method: 'DELETE' });
+}
+
+// ── Projects ────────────────────────────────────────────────────────
+
+export function listProjects(): Promise<Project[]> {
+	return get<Project[]>('/api/projects');
+}
+
+export function getProject(id: string): Promise<ProjectDetail> {
+	return get<ProjectDetail>(`/api/projects/${id}`);
+}
+
+export function createProject(data: Partial<Project>): Promise<Project> {
+	return post<Project>('/api/projects', data);
+}
+
+export function updateProject(id: string, data: Partial<Project>): Promise<Project> {
+	return put<Project>(`/api/projects/${id}`, data);
+}
+
+export function deleteProject(id: string): Promise<{ deleted: string }> {
+	return del<{ deleted: string }>(`/api/projects/${id}`);
+}
+
+// ── Instances ───────────────────────────────────────────────────────
+
+export function listInstances(projectId: string, stageId: string): Promise<Instance[]> {
+	return get<Instance[]>(`/api/projects/${projectId}/stages/${stageId}/instances`);
+}
+
+export function deployInstance(
+	projectId: string,
+	stageId: string,
+	imageTag: string
+): Promise<{ status: string }> {
+	return post<{ status: string }>(`/api/projects/${projectId}/stages/${stageId}/instances`, {
+		image_tag: imageTag
+	});
+}
+
+export function removeInstance(
+	projectId: string,
+	stageId: string,
+	instanceId: string
+): Promise<{ deleted: string }> {
+	return del<{ deleted: string }>(
+		`/api/projects/${projectId}/stages/${stageId}/instances/${instanceId}`
+	);
+}
+
+export function stopInstance(
+	projectId: string,
+	stageId: string,
+	instanceId: string
+): Promise<{ status: string }> {
+	return post<{ status: string }>(
+		`/api/projects/${projectId}/stages/${stageId}/instances/${instanceId}/stop`
+	);
+}
+
+export function startInstance(
+	projectId: string,
+	stageId: string,
+	instanceId: string
+): Promise<{ status: string }> {
+	return post<{ status: string }>(
+		`/api/projects/${projectId}/stages/${stageId}/instances/${instanceId}/start`
+	);
+}
+
+export function restartInstance(
+	projectId: string,
+	stageId: string,
+	instanceId: string
+): Promise<{ status: string }> {
+	return post<{ status: string }>(
+		`/api/projects/${projectId}/stages/${stageId}/instances/${instanceId}/restart`
+	);
+}
+
+// ── Deploys ─────────────────────────────────────────────────────────
+
+export function listDeploys(limit = 50): Promise<Deploy[]> {
+	return get<Deploy[]>(`/api/deploys?limit=${limit}`);
+}
+
+export function getDeployLogs(deployId: string): Promise<DeployLog[]> {
+	return get<DeployLog[]>(`/api/deploys/${deployId}/logs`);
+}
+
+export function inspectImage(image: string): Promise<InspectResult> {
+	return post<InspectResult>('/api/deploy/inspect', { image });
+}
+
+export function quickDeploy(data: {
+	name?: string;
+	image: string;
+	tag?: string;
+	registry?: string;
+	port?: number;
+}): Promise<{ project: Project; status: string }> {
+	return post<{ project: Project; status: string }>('/api/deploy/quick', data);
+}
+
+// ── Registries ──────────────────────────────────────────────────────
+
+export function listRegistries(): Promise<Registry[]> {
+	return get<Registry[]>('/api/registries');
+}
+
+export function createRegistry(data: Partial<Registry>): Promise<Registry> {
+	return post<Registry>('/api/registries', data);
+}
+
+export function updateRegistry(id: string, data: Partial<Registry>): Promise<Registry> {
+	return put<Registry>(`/api/registries/${id}`, data);
+}
+
+export function deleteRegistry(id: string): Promise<{ deleted: string }> {
+	return del<{ deleted: string }>(`/api/registries/${id}`);
+}
+
+export function testRegistry(id: string): Promise<{ status: string }> {
+	return post<{ status: string }>(`/api/registries/${id}/test`);
+}
+
+export function listRegistryTags(registryId: string, image: string): Promise<string[]> {
+	return get<string[]>(`/api/registries/${registryId}/tags/${encodeURIComponent(image)}`);
+}
+
+// ── Settings ────────────────────────────────────────────────────────
+
+export function getSettings(): Promise<Settings> {
+	return get<Settings>('/api/settings');
+}
+
+export function updateSettings(data: Partial<Settings>): Promise<Settings> {
+	return put<Settings>('/api/settings', data);
+}
+
+export function getWebhookUrl(): Promise<{ url: string }> {
+	return get<{ url: string }>('/api/settings/webhook-url');
+}
+
+export function regenerateWebhookUrl(): Promise<{ url: string }> {
+	return post<{ url: string }>('/api/settings/webhook-url/regenerate');
+}
+
+export { ApiError };
diff --git a/web/src/lib/components/ConfirmDialog.svelte b/web/src/lib/components/ConfirmDialog.svelte
new file mode 100644
index 0000000..b165a14
--- /dev/null
+++ b/web/src/lib/components/ConfirmDialog.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+	interface Props {
+		open: boolean;
+		title: string;
+		message: string;
+		confirmLabel?: string;
+		confirmVariant?: 'danger' | 'primary';
+		onconfirm: () => void;
+		oncancel: () => void;
+	}
+
+	const {
+		open,
+		title,
+		message,
+		confirmLabel = 'Confirm',
+		confirmVariant = 'primary',
+		onconfirm,
+		oncancel
+	}: Props = $props();
+
+	const confirmClass = $derived(
+		confirmVariant === 'danger'
+			? 'bg-red-600 hover:bg-red-700 focus-visible:outline-red-600'
+			: 'bg-indigo-600 hover:bg-indigo-700 focus-visible:outline-indigo-600'
+	);
+</script>
+
+{#if open}
+	<!-- Backdrop -->
+	<div class="fixed inset-0 z-40 bg-black/30" role="presentation" onclick={oncancel}></div>
+
+	<!-- Dialog -->
+	<div class="fixed inset-0 z-50 flex items-center justify-center p-4">
+		<div class="w-full max-w-md rounded-lg bg-white p-6 shadow-xl">
+			<h3 class="text-lg font-semibold text-gray-900">{title}</h3>
+			<p class="mt-2 text-sm text-gray-600">{message}</p>
+
+			<div class="mt-6 flex justify-end gap-3">
+				<button
+					type="button"
+					class="rounded-md px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100"
+					onclick={oncancel}
+				>
+					Cancel
+				</button>
+				<button
+					type="button"
+					class="rounded-md px-3 py-2 text-sm font-medium text-white {confirmClass} focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+					onclick={onconfirm}
+				>
+					{confirmLabel}
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}
diff --git a/web/src/lib/components/FormField.svelte b/web/src/lib/components/FormField.svelte
new file mode 100644
index 0000000..9bf3426
--- /dev/null
+++ b/web/src/lib/components/FormField.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+	interface Props {
+		label: string;
+		name: string;
+		type?: string;
+		value?: string;
+		placeholder?: string;
+		required?: boolean;
+		disabled?: boolean;
+		error?: string;
+		helpText?: string;
+		oninput?: (e: Event) => void;
+	}
+
+	let {
+		label,
+		name,
+		type = 'text',
+		value = $bindable(''),
+		placeholder = '',
+		required = false,
+		disabled = false,
+		error = '',
+		helpText = '',
+		oninput
+	}: Props = $props();
+</script>
+
+<div class="flex flex-col gap-1">
+	<label for={name} class="text-sm font-medium text-gray-700">
+		{label}
+		{#if required}
+			<span class="text-red-500">*</span>
+		{/if}
+	</label>
+
+	{#if type === 'textarea'}
+		<textarea
+			id={name}
+			{name}
+			bind:value
+			{placeholder}
+			{required}
+			{disabled}
+			{oninput}
+			class="rounded-md border px-3 py-2 text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500
+				{error ? 'border-red-500 focus:ring-red-500' : 'border-gray-300'}
+				{disabled ? 'bg-gray-100 text-gray-500' : 'bg-white'}"
+			rows="3"
+		></textarea>
+	{:else}
+		<input
+			id={name}
+			{name}
+			{type}
+			bind:value
+			{placeholder}
+			{required}
+			{disabled}
+			{oninput}
+			class="rounded-md border px-3 py-2 text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500
+				{error ? 'border-red-500 focus:ring-red-500' : 'border-gray-300'}
+				{disabled ? 'bg-gray-100 text-gray-500' : 'bg-white'}"
+		/>
+	{/if}
+
+	{#if error}
+		<p class="text-xs text-red-600">{error}</p>
+	{/if}
+
+	{#if helpText && !error}
+		<p class="text-xs text-gray-500">{helpText}</p>
+	{/if}
+</div>
diff --git a/web/src/lib/components/InstanceCard.svelte b/web/src/lib/components/InstanceCard.svelte
new file mode 100644
index 0000000..8c49705
--- /dev/null
+++ b/web/src/lib/components/InstanceCard.svelte
@@ -0,0 +1,164 @@
+<script lang="ts">
+	import type { Instance } from '$lib/types';
+	import StatusBadge from './StatusBadge.svelte';
+	import ConfirmDialog from './ConfirmDialog.svelte';
+	import * as api from '$lib/api';
+
+	interface Props {
+		instance: Instance;
+		projectId: string;
+		onchange?: () => void;
+	}
+
+	const { instance, projectId, onchange }: Props = $props();
+
+	let loading = $state(false);
+	let error = $state('');
+	let confirmAction = $state<'stop' | 'restart' | 'remove' | null>(null);
+
+	const subdomainUrl = $derived(
+		instance.subdomain ? `https://${instance.subdomain}` : ''
+	);
+
+	const timeSinceCreated = $derived(() => {
+		const created = new Date(instance.created_at);
+		const now = new Date();
+		const diffMs = now.getTime() - created.getTime();
+		const diffMins = Math.floor(diffMs / 60_000);
+		if (diffMins < 60) return `${diffMins}m ago`;
+		const diffHours = Math.floor(diffMins / 60);
+		if (diffHours < 24) return `${diffHours}h ago`;
+		const diffDays = Math.floor(diffHours / 24);
+		return `${diffDays}d ago`;
+	});
+
+	async function handleAction(action: 'stop' | 'start' | 'restart' | 'remove') {
+		loading = true;
+		error = '';
+		confirmAction = null;
+		try {
+			switch (action) {
+				case 'stop':
+					await api.stopInstance(projectId, instance.stage_id, instance.id);
+					break;
+				case 'start':
+					await api.startInstance(projectId, instance.stage_id, instance.id);
+					break;
+				case 'restart':
+					await api.restartInstance(projectId, instance.stage_id, instance.id);
+					break;
+				case 'remove':
+					await api.removeInstance(projectId, instance.stage_id, instance.id);
+					break;
+			}
+			onchange?.();
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Action failed';
+		} finally {
+			loading = false;
+		}
+	}
+
+	function requestConfirm(action: 'stop' | 'restart' | 'remove') {
+		confirmAction = action;
+	}
+
+	const confirmMessages: Record<string, string> = {
+		stop: 'This will stop the running container. The instance can be started again later.',
+		restart: 'This will restart the container, causing brief downtime.',
+		remove: 'This will permanently remove the container and its proxy configuration. This cannot be undone.'
+	};
+</script>
+
+<div class="rounded-lg border border-gray-200 bg-white p-4 shadow-sm">
+	<div class="flex items-start justify-between">
+		<div class="min-w-0 flex-1">
+			<div class="flex items-center gap-2">
+				<span class="truncate font-mono text-sm font-medium text-gray-900">
+					{instance.image_tag}
+				</span>
+				<StatusBadge status={instance.status} size="sm" />
+			</div>
+
+			{#if subdomainUrl}
+				<a
+					href={subdomainUrl}
+					target="_blank"
+					rel="noopener noreferrer"
+					class="mt-1 block truncate text-xs text-indigo-600 hover:text-indigo-800"
+				>
+					{instance.subdomain}
+				</a>
+			{/if}
+
+			<div class="mt-1 flex items-center gap-3 text-xs text-gray-500">
+				<span>Port {instance.port}</span>
+				<span>{timeSinceCreated()}</span>
+			</div>
+		</div>
+
+		<div class="ml-3 flex items-center gap-1">
+			{#if instance.status === 'running'}
+				<button
+					type="button"
+					class="rounded p-1.5 text-gray-400 hover:bg-gray-100 hover:text-yellow-600 disabled:opacity-50"
+					title="Stop"
+					disabled={loading}
+					onclick={() => requestConfirm('stop')}
+				>
+					<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+						<rect x="6" y="6" width="12" height="12" rx="1" />
+					</svg>
+				</button>
+				<button
+					type="button"
+					class="rounded p-1.5 text-gray-400 hover:bg-gray-100 hover:text-blue-600 disabled:opacity-50"
+					title="Restart"
+					disabled={loading}
+					onclick={() => requestConfirm('restart')}
+				>
+					<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+						<path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182" />
+					</svg>
+				</button>
+			{:else if instance.status === 'stopped'}
+				<button
+					type="button"
+					class="rounded p-1.5 text-gray-400 hover:bg-gray-100 hover:text-green-600 disabled:opacity-50"
+					title="Start"
+					disabled={loading}
+					onclick={() => handleAction('start')}
+				>
+					<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+						<path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z" />
+					</svg>
+				</button>
+			{/if}
+			<button
+				type="button"
+				class="rounded p-1.5 text-gray-400 hover:bg-gray-100 hover:text-red-600 disabled:opacity-50"
+				title="Remove"
+				disabled={loading}
+				onclick={() => requestConfirm('remove')}
+			>
+				<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+					<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+				</svg>
+			</button>
+		</div>
+	</div>
+
+	{#if error}
+		<p class="mt-2 text-xs text-red-600">{error}</p>
+	{/if}
+</div>
+
+<ConfirmDialog
+	open={confirmAction !== null}
+	title="{confirmAction ? confirmAction.charAt(0).toUpperCase() + confirmAction.slice(1) : ''} Instance"
+	message={confirmAction ? confirmMessages[confirmAction] ?? '' : ''}
+	confirmLabel={confirmAction ? confirmAction.charAt(0).toUpperCase() + confirmAction.slice(1) : ''}
+	confirmVariant={confirmAction === 'remove' ? 'danger' : 'primary'}
+	onconfirm={() => { if (confirmAction) handleAction(confirmAction); }}
+	oncancel={() => { confirmAction = null; }}
+/>
diff --git a/web/src/lib/components/ProjectCard.svelte b/web/src/lib/components/ProjectCard.svelte
new file mode 100644
index 0000000..3ce5b12
--- /dev/null
+++ b/web/src/lib/components/ProjectCard.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+	import type { Project, Instance } from '$lib/types';
+	import StatusBadge from './StatusBadge.svelte';
+
+	interface Props {
+		project: Project;
+		instances?: Instance[];
+	}
+
+	const { project, instances = [] }: Props = $props();
+
+	const runningCount = $derived(instances.filter((i) => i.status === 'running').length);
+	const stoppedCount = $derived(instances.filter((i) => i.status === 'stopped').length);
+	const failedCount = $derived(instances.filter((i) => i.status === 'failed').length);
+	const totalCount = $derived(instances.length);
+
+	const overallStatus = $derived<string>(() => {
+		if (failedCount > 0) return 'failed';
+		if (runningCount > 0) return 'running';
+		if (stoppedCount > 0) return 'stopped';
+		return 'stopped';
+	});
+</script>
+
+<a
+	href="/projects/{project.id}"
+	class="block rounded-lg border border-gray-200 bg-white p-5 shadow-sm transition hover:border-indigo-300 hover:shadow-md"
+>
+	<div class="flex items-start justify-between">
+		<div class="min-w-0 flex-1">
+			<h3 class="truncate text-base font-semibold text-gray-900">{project.name}</h3>
+			<p class="mt-1 truncate text-sm text-gray-500">{project.image}</p>
+		</div>
+		<StatusBadge status={overallStatus()} size="sm" />
+	</div>
+
+	<div class="mt-4 flex items-center gap-4 text-sm text-gray-600">
+		{#if totalCount > 0}
+			<span class="flex items-center gap-1">
+				<span class="h-2 w-2 rounded-full bg-green-500"></span>
+				{runningCount} running
+			</span>
+			{#if stoppedCount > 0}
+				<span class="flex items-center gap-1">
+					<span class="h-2 w-2 rounded-full bg-gray-400"></span>
+					{stoppedCount} stopped
+				</span>
+			{/if}
+			{#if failedCount > 0}
+				<span class="flex items-center gap-1">
+					<span class="h-2 w-2 rounded-full bg-red-500"></span>
+					{failedCount} failed
+				</span>
+			{/if}
+		{:else}
+			<span class="text-gray-400">No instances</span>
+		{/if}
+	</div>
+
+	<div class="mt-3 flex items-center gap-3 text-xs text-gray-400">
+		{#if project.port}
+			<span>Port {project.port}</span>
+		{/if}
+		{#if project.healthcheck}
+			<span>HC: {project.healthcheck}</span>
+		{/if}
+	</div>
+</a>
diff --git a/web/src/lib/components/StatusBadge.svelte b/web/src/lib/components/StatusBadge.svelte
new file mode 100644
index 0000000..769cf79
--- /dev/null
+++ b/web/src/lib/components/StatusBadge.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	import type { InstanceStatus, DeployStatus } from '$lib/types';
+
+	type Status = InstanceStatus | DeployStatus | string;
+
+	interface Props {
+		status: Status;
+		size?: 'sm' | 'md';
+	}
+
+	const { status, size = 'md' }: Props = $props();
+
+	const colorMap: Record<string, string> = {
+		running: 'bg-green-100 text-green-800',
+		success: 'bg-green-100 text-green-800',
+		stopped: 'bg-gray-100 text-gray-800',
+		failed: 'bg-red-100 text-red-800',
+		rolled_back: 'bg-red-100 text-red-800',
+		removing: 'bg-yellow-100 text-yellow-800',
+		pending: 'bg-blue-100 text-blue-800',
+		pulling: 'bg-blue-100 text-blue-800',
+		starting: 'bg-yellow-100 text-yellow-800',
+		configuring_proxy: 'bg-yellow-100 text-yellow-800',
+		health_checking: 'bg-yellow-100 text-yellow-800'
+	};
+
+	const dotColorMap: Record<string, string> = {
+		running: 'bg-green-500',
+		success: 'bg-green-500',
+		stopped: 'bg-gray-400',
+		failed: 'bg-red-500',
+		rolled_back: 'bg-red-500',
+		removing: 'bg-yellow-500',
+		pending: 'bg-blue-500',
+		pulling: 'bg-blue-500',
+		starting: 'bg-yellow-500',
+		configuring_proxy: 'bg-yellow-500',
+		health_checking: 'bg-yellow-500'
+	};
+
+	const colorClass = $derived(colorMap[status] ?? 'bg-gray-100 text-gray-800');
+	const dotClass = $derived(dotColorMap[status] ?? 'bg-gray-400');
+	const sizeClass = $derived(size === 'sm' ? 'text-xs px-2 py-0.5' : 'text-sm px-2.5 py-0.5');
+	const dotSize = $derived(size === 'sm' ? 'h-1.5 w-1.5' : 'h-2 w-2');
+	const label = $derived(status.replace(/_/g, ' '));
+</script>
+
+<span class="inline-flex items-center gap-1.5 rounded-full font-medium {colorClass} {sizeClass}">
+	<span class="rounded-full {dotClass} {dotSize}"></span>
+	{label}
+</span>
diff --git a/web/src/lib/components/Toast.svelte b/web/src/lib/components/Toast.svelte
new file mode 100644
index 0000000..c660573
--- /dev/null
+++ b/web/src/lib/components/Toast.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { toasts, type ToastType } from '$lib/stores/toast';
+
+	const colorMap: Record<ToastType, string> = {
+		success: 'bg-green-600',
+		error: 'bg-red-600',
+		warning: 'bg-yellow-500',
+		info: 'bg-blue-600'
+	};
+
+	const iconMap: Record<ToastType, string> = {
+		success: '&#10003;',
+		error: '&#10007;',
+		warning: '&#9888;',
+		info: '&#8505;'
+	};
+</script>
+
+<div class="fixed top-4 right-4 z-50 flex flex-col gap-2 pointer-events-none">
+	{#each $toasts as toast (toast.id)}
+		<div
+			class="pointer-events-auto flex items-center gap-3 rounded-lg px-4 py-3 text-white shadow-lg transition-all duration-300 {colorMap[toast.type]}"
+			role="alert"
+		>
+			<span class="text-lg" aria-hidden="true">{@html iconMap[toast.type]}</span>
+			<span class="flex-1 text-sm font-medium">{toast.message}</span>
+			<button
+				class="ml-2 text-white/80 hover:text-white transition-colors"
+				onclick={() => toasts.remove(toast.id)}
+				aria-label="Dismiss notification"
+			>
+				&#10005;
+			</button>
+		</div>
+	{/each}
+</div>
diff --git a/web/src/lib/stores/toast.ts b/web/src/lib/stores/toast.ts
new file mode 100644
index 0000000..6f487cc
--- /dev/null
+++ b/web/src/lib/stores/toast.ts
@@ -0,0 +1,61 @@
+import { writable } from 'svelte/store';
+
+export type ToastType = 'success' | 'error' | 'info' | 'warning';
+
+export interface Toast {
+	id: string;
+	message: string;
+	type: ToastType;
+	duration: number;
+}
+
+function createToastStore() {
+	const { subscribe, update } = writable<Toast[]>([]);
+
+	let counter = 0;
+
+	function add(message: string, type: ToastType = 'info', duration = 5000): string {
+		const id = `toast-${++counter}-${Date.now()}`;
+		const toast: Toast = { id, message, type, duration };
+
+		update((toasts) => [...toasts, toast]);
+
+		if (duration > 0) {
+			setTimeout(() => remove(id), duration);
+		}
+
+		return id;
+	}
+
+	function remove(id: string): void {
+		update((toasts) => toasts.filter((t) => t.id !== id));
+	}
+
+	function success(message: string, duration = 5000): string {
+		return add(message, 'success', duration);
+	}
+
+	function error(message: string, duration = 7000): string {
+		return add(message, 'error', duration);
+	}
+
+	function warning(message: string, duration = 5000): string {
+		return add(message, 'warning', duration);
+	}
+
+	function info(message: string, duration = 5000): string {
+		return add(message, 'info', duration);
+	}
+
+	return {
+		subscribe,
+		add,
+		remove,
+		success,
+		error,
+		warning,
+		info
+	};
+}
+
+export const toasts = createToastStore();
diff --git a/web/src/lib/types.ts b/web/src/lib/types.ts
new file mode 100644
index 0000000..ef83665
--- /dev/null
+++ b/web/src/lib/types.ts
@@ -0,0 +1,118 @@
+// Types matching the Go backend store models (internal/store/models.go).
+
+export interface Project {
+	id: string;
+	name: string;
+	registry: string;
+	image: string;
+	port: number;
+	healthcheck: string;
+	env: string;
+	volumes: string;
+	created_at: string;
+	updated_at: string;
+}
+
+export interface Stage {
+	id: string;
+	project_id: string;
+	name: string;
+	tag_pattern: string;
+	auto_deploy: boolean;
+	max_instances: number;
+	confirm: boolean;
+	promote_from: string;
+	subdomain: string;
+	created_at: string;
+	updated_at: string;
+}
+
+export interface Instance {
+	id: string;
+	stage_id: string;
+	project_id: string;
+	container_id: string;
+	image_tag: string;
+	subdomain: string;
+	npm_proxy_id: number;
+	status: InstanceStatus;
+	port: number;
+	created_at: string;
+	updated_at: string;
+}
+
+export type InstanceStatus = 'running' | 'stopped' | 'failed' | 'removing';
+
+export interface Deploy {
+	id: string;
+	project_id: string;
+	stage_id: string;
+	instance_id: string;
+	image_tag: string;
+	status: DeployStatus;
+	started_at: string;
+	finished_at: string;
+	error: string;
+}
+
+export type DeployStatus =
+	| 'pending'
+	| 'pulling'
+	| 'starting'
+	| 'configuring_proxy'
+	| 'health_checking'
+	| 'success'
+	| 'failed'
+	| 'rolled_back';
+
+export interface DeployLog {
+	id: number;
+	deploy_id: string;
+	message: string;
+	level: 'info' | 'warn' | 'error';
+	created_at: string;
+}
+
+export interface Registry {
+	id: string;
+	name: string;
+	url: string;
+	type: string;
+	token: string;
+	created_at: string;
+	updated_at: string;
+}
+
+export interface Settings {
+	domain: string;
+	server_ip: string;
+	network: string;
+	subdomain_pattern: string;
+	notification_url: string;
+	npm_url: string;
+	npm_email: string;
+	npm_password: string;
+	webhook_secret: string;
+	polling_interval: string;
+	updated_at: string;
+}
+
+/** Standard API envelope returned by all backend endpoints. */
+export interface ApiEnvelope<T> {
+	success: boolean;
+	data?: T;
+	error?: string;
+}
+
+/** Response shape for GET /api/projects/:id */
+export interface ProjectDetail {
+	project: Project;
+	stages: Stage[];
+}
+
+/** Response shape for POST /api/deploy/inspect */
+export interface InspectResult {
+	image: string;
+	port: number;
+	healthcheck: string;
+}
diff --git a/web/src/routes/deploy/+page.svelte b/web/src/routes/deploy/+page.svelte
new file mode 100644
index 0000000..3cb0dca
--- /dev/null
+++ b/web/src/routes/deploy/+page.svelte
@@ -0,0 +1,320 @@
+<script lang="ts">
+	import { api } from '$lib/api';
+	import type { InspectResult, QuickDeployRequest } from '$lib/types';
+	import FormField from '$lib/components/FormField.svelte';
+	import { toasts } from '$lib/stores/toast';
+
+	let imageUrl = $state('');
+	let inspecting = $state(false);
+	let deploying = $state(false);
+	let inspected = $state(false);
+
+	let inspectResult: InspectResult | null = $state(null);
+
+	// Form fields populated after inspect
+	let projectName = $state('');
+	let port = $state('');
+	let healthcheck = $state('');
+	let stage = $state('dev');
+	let subdomain = $state('');
+	let envVars = $state('');
+
+	// Validation errors
+	let errors = $state<Record<string, string>>({});
+
+	function validateImageUrl(url: string): string {
+		if (!url.trim()) return 'Image URL is required';
+		if (!/^[a-zA-Z0-9._\-/]+:[a-zA-Z0-9._\-]+$/.test(url.trim())) {
+			return 'Invalid image URL format (e.g., registry.example.com/org/app:tag)';
+		}
+		return '';
+	}
+
+	function validatePort(value: string): string {
+		if (!value.trim()) return 'Port is required';
+		const num = parseInt(value, 10);
+		if (isNaN(num) || num < 1 || num > 65535) return 'Port must be between 1 and 65535';
+		return '';
+	}
+
+	function validateProjectName(value: string): string {
+		if (!value.trim()) return 'Project name is required';
+		if (!/^[a-z0-9][a-z0-9\-]*[a-z0-9]$/.test(value.trim()) && value.trim().length > 1) {
+			return 'Must be lowercase alphanumeric with hyphens (e.g., my-app)';
+		}
+		return '';
+	}
+
+	function validateAll(): boolean {
+		const newErrors: Record<string, string> = {};
+		const nameErr = validateProjectName(projectName);
+		if (nameErr) newErrors.projectName = nameErr;
+		const portErr = validatePort(port);
+		if (portErr) newErrors.port = portErr;
+		errors = newErrors;
+		return Object.keys(newErrors).length === 0;
+	}
+
+	async function handleInspect() {
+		const urlError = validateImageUrl(imageUrl);
+		if (urlError) {
+			errors = { imageUrl: urlError };
+			return;
+		}
+		errors = {};
+
+		inspecting = true;
+		try {
+			const result = await api.post<InspectResult>('/api/deploy/inspect', {
+				image: imageUrl.trim()
+			});
+			inspectResult = result;
+
+			// Auto-fill form with inspection results
+			projectName = result.project_name ?? '';
+			port = result.port?.toString() ?? '';
+			healthcheck = result.healthcheck ?? '';
+			stage = 'dev';
+			subdomain = result.suggested_subdomain ?? '';
+			envVars = result.env_vars ? result.env_vars.map((e) => `${e.key}=${e.value}`).join('\n') : '';
+			inspected = true;
+			toasts.success('Image inspected successfully');
+		} catch (err) {
+			const message = err instanceof Error ? err.message : 'Failed to inspect image';
+			toasts.error(message);
+		} finally {
+			inspecting = false;
+		}
+	}
+
+	async function handleDeploy() {
+		if (!validateAll()) return;
+
+		deploying = true;
+		try {
+			const envMap: Record<string, string> = {};
+			if (envVars.trim()) {
+				for (const line of envVars.split('\n')) {
+					const eqIndex = line.indexOf('=');
+					if (eqIndex > 0) {
+						envMap[line.substring(0, eqIndex).trim()] = line.substring(eqIndex + 1).trim();
+					}
+				}
+			}
+
+			const payload: QuickDeployRequest = {
+				image: imageUrl.trim(),
+				project_name: projectName.trim(),
+				port: parseInt(port, 10),
+				healthcheck: healthcheck.trim() || undefined,
+				stage: stage,
+				subdomain: subdomain.trim() || undefined,
+				env: Object.keys(envMap).length > 0 ? envMap : undefined
+			};
+
+			await api.post('/api/deploy/quick', payload);
+			toasts.success(`Deployed ${projectName} successfully!`);
+
+			// Reset form
+			imageUrl = '';
+			inspected = false;
+			inspectResult = null;
+			projectName = '';
+			port = '';
+			healthcheck = '';
+			stage = 'dev';
+			subdomain = '';
+			envVars = '';
+		} catch (err) {
+			const message = err instanceof Error ? err.message : 'Deployment failed';
+			toasts.error(message);
+		} finally {
+			deploying = false;
+		}
+	}
+</script>
+
+<svelte:head>
+	<title>Quick Deploy - Docker Watcher</title>
+</svelte:head>
+
+<div class="mx-auto max-w-2xl space-y-6">
+	<div>
+		<h1 class="text-2xl font-bold text-gray-900">Quick Deploy</h1>
+		<p class="mt-1 text-sm text-gray-500">
+			Deploy a container image with zero configuration. Paste an image URL, review the defaults,
+			and deploy.
+		</p>
+	</div>
+
+	<!-- Step 1: Image URL input -->
+	<div class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
+		<h2 class="mb-4 text-lg font-semibold text-gray-800">1. Enter Image URL</h2>
+		<div class="flex gap-3">
+			<div class="flex-1">
+				<FormField
+					label="Image URL"
+					name="imageUrl"
+					bind:value={imageUrl}
+					placeholder="registry.example.com/org/app:tag"
+					required
+					error={errors.imageUrl ?? ''}
+					helpText="Full image URL including tag (e.g., git.example.com/user/app:dev-abc123)"
+					disabled={inspecting}
+				/>
+			</div>
+			<div class="flex items-end">
+				<button
+					onclick={handleInspect}
+					disabled={inspecting || !imageUrl.trim()}
+					class="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
+				>
+					{#if inspecting}
+						<span class="inline-flex items-center gap-2">
+							<svg class="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
+								<circle
+									class="opacity-25"
+									cx="12"
+									cy="12"
+									r="10"
+									stroke="currentColor"
+									stroke-width="4"
+								></circle>
+								<path
+									class="opacity-75"
+									fill="currentColor"
+									d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+								></path>
+							</svg>
+							Inspecting...
+						</span>
+					{:else}
+						Inspect
+					{/if}
+				</button>
+			</div>
+		</div>
+	</div>
+
+	<!-- Step 2: Review and configure (shown after inspect) -->
+	{#if inspected}
+		<div class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
+			<h2 class="mb-4 text-lg font-semibold text-gray-800">2. Review Configuration</h2>
+			<p class="mb-4 text-sm text-gray-500">
+				These defaults were detected from the image. Adjust as needed before deploying.
+			</p>
+
+			<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+				<FormField
+					label="Project Name"
+					name="projectName"
+					bind:value={projectName}
+					placeholder="my-app"
+					required
+					error={errors.projectName ?? ''}
+					helpText="Lowercase with hyphens"
+				/>
+
+				<FormField
+					label="Port"
+					name="port"
+					type="number"
+					bind:value={port}
+					placeholder="3000"
+					required
+					error={errors.port ?? ''}
+					helpText="Container port to expose (1-65535)"
+				/>
+
+				<FormField
+					label="Health Check Path"
+					name="healthcheck"
+					bind:value={healthcheck}
+					placeholder="/api/health"
+					helpText="Optional HTTP path for health verification"
+				/>
+
+				<div class="flex flex-col gap-1">
+					<label for="stage" class="text-sm font-medium text-gray-700">Stage</label>
+					<select
+						id="stage"
+						bind:value={stage}
+						class="rounded-md border border-gray-300 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+					>
+						<option value="dev">Development</option>
+						<option value="rel">Release</option>
+						<option value="prod">Production</option>
+					</select>
+					<p class="text-xs text-gray-500">Deployment stage for this image</p>
+				</div>
+
+				<FormField
+					label="Subdomain Override"
+					name="subdomain"
+					bind:value={subdomain}
+					placeholder="auto-generated"
+					helpText="Leave empty to use the default subdomain pattern"
+				/>
+			</div>
+
+			<div class="mt-4">
+				<FormField
+					label="Environment Variables"
+					name="envVars"
+					type="textarea"
+					bind:value={envVars}
+					placeholder="KEY=value&#10;ANOTHER_KEY=another_value"
+					helpText="One per line, KEY=VALUE format"
+				/>
+			</div>
+		</div>
+
+		<!-- Step 3: Deploy -->
+		<div class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
+			<h2 class="mb-4 text-lg font-semibold text-gray-800">3. Deploy</h2>
+			<p class="mb-4 text-sm text-gray-500">
+				A new project will be created and the container will be deployed immediately.
+			</p>
+			<div class="flex gap-3">
+				<button
+					onclick={handleDeploy}
+					disabled={deploying}
+					class="rounded-md bg-green-600 px-6 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
+				>
+					{#if deploying}
+						<span class="inline-flex items-center gap-2">
+							<svg class="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
+								<circle
+									class="opacity-25"
+									cx="12"
+									cy="12"
+									r="10"
+									stroke="currentColor"
+									stroke-width="4"
+								></circle>
+								<path
+									class="opacity-75"
+									fill="currentColor"
+									d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+								></path>
+							</svg>
+							Deploying...
+						</span>
+					{:else}
+						Deploy
+					{/if}
+				</button>
+				<button
+					onclick={() => {
+						inspected = false;
+						inspectResult = null;
+					}}
+					disabled={deploying}
+					class="rounded-md border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 disabled:opacity-50"
+				>
+					Cancel
+				</button>
+			</div>
+		</div>
+	{/if}
+</div>
diff --git a/web/src/routes/settings/+layout.svelte b/web/src/routes/settings/+layout.svelte
new file mode 100644
index 0000000..24701ee
--- /dev/null
+++ b/web/src/routes/settings/+layout.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { page } from '$app/stores';
+
+	interface Props {
+		children: Snippet;
+	}
+
+	let { children }: Props = $props();
+
+	const navItems = [
+		{ href: '/settings', label: 'General' },
+		{ href: '/settings/registries', label: 'Registries' },
+		{ href: '/settings/credentials', label: 'Credentials' }
+	];
+
+	let currentPath = $derived($page.url.pathname);
+
+	function isActive(href: string): boolean {
+		if (href === '/settings') {
+			return currentPath === '/settings';
+		}
+		return currentPath.startsWith(href);
+	}
+</script>
+
+<div class="mx-auto max-w-4xl">
+	<h1 class="mb-6 text-2xl font-bold text-gray-900">Settings</h1>
+
+	<div class="flex gap-6">
+		<!-- Sub-navigation -->
+		<nav class="w-48 flex-shrink-0">
+			<ul class="space-y-1">
+				{#each navItems as item}
+					<li>
+						<a
+							href={item.href}
+							class="block rounded-md px-3 py-2 text-sm font-medium transition-colors
+								{isActive(item.href)
+								? 'bg-blue-50 text-blue-700'
+								: 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'}"
+						>
+							{item.label}
+						</a>
+					</li>
+				{/each}
+			</ul>
+		</nav>
+
+		<!-- Settings content -->
+		<div class="flex-1">
+			{@render children()}
+		</div>
+	</div>
+</div>
diff --git a/web/svelte.config.js b/web/svelte.config.js
new file mode 100644
index 0000000..75bccab
--- /dev/null
+++ b/web/svelte.config.js
@@ -0,0 +1,21 @@
+import adapter from '@sveltejs/adapter-static';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	preprocess: vitePreprocess(),
+	kit: {
+		adapter: adapter({
+			pages: 'build',
+			assets: 'build',
+			fallback: 'index.html',
+			precompress: false,
+			strict: true
+		}),
+		alias: {
+			$lib: './src/lib'
+		}
+	}
+};
+
+export default config;
diff --git a/web/tsconfig.json b/web/tsconfig.json
new file mode 100644
index 0000000..a8f10c8
--- /dev/null
+++ b/web/tsconfig.json
@@ -0,0 +1,14 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+}
diff --git a/web/vite.config.ts b/web/vite.config.ts
new file mode 100644
index 0000000..fbb8c0f
--- /dev/null
+++ b/web/vite.config.ts
@@ -0,0 +1,15 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import tailwindcss from '@tailwindcss/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [tailwindcss(), sveltekit()],
+	server: {
+		proxy: {
+			'/api': {
+				target: 'http://localhost:8080',
+				changeOrigin: true
+			}
+		}
+	}
+});