diff --git a/firmware/website/.gemini/settings.json b/firmware/website/.gemini/settings.json
new file mode 100644
index 0000000..74e4040
--- /dev/null
+++ b/firmware/website/.gemini/settings.json
@@ -0,0 +1,8 @@
+{
+	"$schema": "https://raw.githubusercontent.com/google-gemini/gemini-cli/main/schemas/settings.schema.json",
+	"mcpServers": {
+		"svelte": {
+			"url": "https://mcp.svelte.dev/mcp"
+		}
+	}
+}
diff --git a/firmware/website/.mcp.json b/firmware/website/.mcp.json
new file mode 100644
index 0000000..0b7b5c6
--- /dev/null
+++ b/firmware/website/.mcp.json
@@ -0,0 +1,8 @@
+{
+	"mcpServers": {
+		"svelte": {
+			"type": "http",
+			"url": "https://mcp.svelte.dev/mcp"
+		}
+	}
+}
diff --git a/firmware/website/.vscode/mcp.json b/firmware/website/.vscode/mcp.json
new file mode 100644
index 0000000..5182f3a
--- /dev/null
+++ b/firmware/website/.vscode/mcp.json
@@ -0,0 +1,7 @@
+{
+	"servers": {
+		"svelte": {
+			"url": "https://mcp.svelte.dev/mcp"
+		}
+	}
+}
diff --git a/firmware/website/AGENTS.md b/firmware/website/AGENTS.md
new file mode 100644
index 0000000..a6e66ff
--- /dev/null
+++ b/firmware/website/AGENTS.md
@@ -0,0 +1,23 @@
+You are able to use the Svelte MCP server, where you have access to comprehensive Svelte 5 and SvelteKit documentation. Here's how to use the available tools effectively:
+
+## Available MCP Tools:
+
+### 1. list-sections
+
+Use this FIRST to discover all available documentation sections. Returns a structured list with titles, use_cases, and paths.
+When asked about Svelte or SvelteKit topics, ALWAYS use this tool at the start of the chat to find relevant sections.
+
+### 2. get-documentation
+
+Retrieves full documentation content for specific sections. Accepts single or multiple sections.
+After calling the list-sections tool, you MUST analyze the returned documentation sections (especially the use_cases field) and then use the get-documentation tool to fetch ALL documentation sections that are relevant for the user's task.
+
+### 3. svelte-autofixer
+
+Analyzes Svelte code and returns issues and suggestions.
+You MUST use this tool whenever writing Svelte code before sending it to the user. Keep calling it until no issues or suggestions are returned.
+
+### 4. playground-link
+
+Generates a Svelte Playground link with the provided code.
+After completing the code, ask the user if they want a playground link. Only call this tool after user confirmation and NEVER if code was written to files in their project.
diff --git a/firmware/website/CLAUDE.md b/firmware/website/CLAUDE.md
new file mode 100644
index 0000000..a6e66ff
--- /dev/null
+++ b/firmware/website/CLAUDE.md
@@ -0,0 +1,23 @@
+You are able to use the Svelte MCP server, where you have access to comprehensive Svelte 5 and SvelteKit documentation. Here's how to use the available tools effectively:
+
+## Available MCP Tools:
+
+### 1. list-sections
+
+Use this FIRST to discover all available documentation sections. Returns a structured list with titles, use_cases, and paths.
+When asked about Svelte or SvelteKit topics, ALWAYS use this tool at the start of the chat to find relevant sections.
+
+### 2. get-documentation
+
+Retrieves full documentation content for specific sections. Accepts single or multiple sections.
+After calling the list-sections tool, you MUST analyze the returned documentation sections (especially the use_cases field) and then use the get-documentation tool to fetch ALL documentation sections that are relevant for the user's task.
+
+### 3. svelte-autofixer
+
+Analyzes Svelte code and returns issues and suggestions.
+You MUST use this tool whenever writing Svelte code before sending it to the user. Keep calling it until no issues or suggestions are returned.
+
+### 4. playground-link
+
+Generates a Svelte Playground link with the provided code.
+After completing the code, ask the user if they want a playground link. Only call this tool after user confirmation and NEVER if code was written to files in their project.
diff --git a/firmware/website/GEMINI.md b/firmware/website/GEMINI.md
new file mode 100644
index 0000000..a6e66ff
--- /dev/null
+++ b/firmware/website/GEMINI.md
@@ -0,0 +1,23 @@
+You are able to use the Svelte MCP server, where you have access to comprehensive Svelte 5 and SvelteKit documentation. Here's how to use the available tools effectively:
+
+## Available MCP Tools:
+
+### 1. list-sections
+
+Use this FIRST to discover all available documentation sections. Returns a structured list with titles, use_cases, and paths.
+When asked about Svelte or SvelteKit topics, ALWAYS use this tool at the start of the chat to find relevant sections.
+
+### 2. get-documentation
+
+Retrieves full documentation content for specific sections. Accepts single or multiple sections.
+After calling the list-sections tool, you MUST analyze the returned documentation sections (especially the use_cases field) and then use the get-documentation tool to fetch ALL documentation sections that are relevant for the user's task.
+
+### 3. svelte-autofixer
+
+Analyzes Svelte code and returns issues and suggestions.
+You MUST use this tool whenever writing Svelte code before sending it to the user. Keep calling it until no issues or suggestions are returned.
+
+### 4. playground-link
+
+Generates a Svelte Playground link with the provided code.
+After completing the code, ask the user if they want a playground link. Only call this tool after user confirmation and NEVER if code was written to files in their project.
diff --git a/firmware/website/public/captive.html b/firmware/website/public/captive.html
new file mode 100644
index 0000000..371a9f8
--- /dev/null
+++ b/firmware/website/public/captive.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WLAN Setup - Modellbahn</title>
+    <style>
+        *, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; }
+        body { margin: 0; line-height: inherit; font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; background-color: #121212; color: #ffffff; display: flex; flex-direction: column; align-items: center; min-height: 100vh; padding-top: 2rem; }
+        .card { background-color: #1e1e1e; padding: 2rem; border-radius: 1rem; width: calc(100% - 2rem); max-width: 24rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); border: 1px solid #2c2c2e; }
+        h1 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; text-align: left; display: flex; align-items: center; }
+        p { color: #8e8e93; font-size: 0.875rem; margin-bottom: 1.5rem; text-align: left; }
+        .space-y-4 > * + * { margin-top: 1rem; }
+        label { display: block; font-size: 0.75rem; font-weight: 500; margin-bottom: 0.25rem; color: #aeaeb2; text-align: left; }
+        input { width: 100%; padding: 0.75rem; border-radius: 0.5rem; border: 1px solid #3a3a3c; background-color: #2c2c2e; color: #ffffff; font-size: 1rem; outline: none; transition: border-color 0.2s; }
+        input:focus { border-color: #5856d6; }
+        button { width: 100%; padding: 0.75rem; border-radius: 0.5rem; background-color: #5856d6; color: #ffffff; font-weight: 600; font-size: 1rem; cursor: pointer; transition: opacity 0.2s; margin-top: 1rem; }
+        button:hover { opacity: 0.9; }
+        button:disabled { opacity: 0.5; cursor: not-allowed; }
+        .success-bar { display: inline-block; width: 0.25rem; height: 1.25rem; background-color: #34c759; border-radius: 9999px; margin-right: 0.5rem; }
+    </style>
+</head>
+<body>
+    <div class="card">
+        <h1>
+            <span class="success-bar"></span>WLAN Setup
+        </h1>
+        <p>Gib die Daten deines Heimnetzwerks ein.</p>
+        
+        <form action="/api/wifi/config" method="POST" id="wifiForm" class="space-y-4">
+            <div>
+                <label for="ssid">Netzwerkname (SSID)</label>
+                <input type="text" id="ssid" name="ssid" placeholder="z.B. FritzBox" required autofocus>
+            </div>
+
+            <div>
+                <label for="password">Passwort</label>
+                <input type="password" id="password" name="password" placeholder="••••••••" required>
+            </div>
+
+            <button type="submit" id="submitBtn">Speichern & Verbinden</button>
+        </form>
+    </div>
+
+    <script>
+        document.getElementById('wifiForm').onsubmit = function() {
+            const btn = document.getElementById('submitBtn');
+            btn.disabled = true;
+            btn.textContent = 'Verbindung wird geprüft...';
+        };
+    </script>
+</body>
+</html>
diff --git a/firmware/website/public/success.html b/firmware/website/public/success.html
new file mode 100644
index 0000000..0d72eb7
--- /dev/null
+++ b/firmware/website/public/success.html
@@ -0,0 +1 @@
+<HTML><HEAD><TITLE>Success</TITLE></HEAD><BODY>Success</BODY></HTML>
diff --git a/firmware/website/src/app.svelte b/firmware/website/src/app.svelte
index 486730f..9a3c881 100644
--- a/firmware/website/src/app.svelte
+++ b/firmware/website/src/app.svelte
@@ -10,7 +10,6 @@
 		'/': Index,
 		'/control': Index,
 		'/config': Index,
-		'/captive': Captive,
 		// Fallback route
 		'*': Index
 	};
@@ -27,7 +26,5 @@
 		<Router {routes} />
 	</main>
 
-	{#if $location !== "/captive"}
-		<Footer />
-	{/if}
+	<Footer />
 </div>
diff --git a/firmware/website/src/components/common/button.svelte b/firmware/website/src/components/common/button.svelte
index 137f094..c23dff2 100644
--- a/firmware/website/src/components/common/button.svelte
+++ b/firmware/website/src/components/common/button.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	const { label, icon, ariaLabel, onClick } = $props<{
 		label: string;
-		icon: string;
+		icon?: string;
 		ariaLabel: string;
 		onClick?: () => void;
 	}>();
@@ -12,6 +12,8 @@
 	class="flex items-center justify-center cursor-pointer p-2 gap-2 bg-card rounded-lg text-text-muted text-sm transition-all border-solid border-border border-x border-y hover:border-success min-w-28"
 	onclick={onClick}
 >
-	<span class="text-xl" id="icon">{icon}</span>
+	{#if icon}
+		<span class="text-xl" id="icon">{icon}</span>
+	{/if}
 	<span class="label" id="label">{label}</span>
 </button>
diff --git a/firmware/website/src/routes/captive.svelte b/firmware/website/src/routes/captive.svelte
deleted file mode 100644
index 2b6b8d6..0000000
--- a/firmware/website/src/routes/captive.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script lang="ts">
-	import { t } from "../i18n/store";
-</script>
-
-<h1>{$t("welcome")} - Captive Portal</h1>