diff --git a/public/fakecheck/index.php b/public/fakecheck/index.php
index c40c5a2..bf9cf17 100644
--- a/public/fakecheck/index.php
+++ b/public/fakecheck/index.php
@@ -1,59 +1,193 @@
 <?php
-// Pfade relativ zum Projekt-Root anpassen (je nachdem wo dein include-Ordner liegt)
-//echo __DIR__;
-require_once __DIR__ . '/../partials/header.php';
+// Sprachlogik (wie auf der Startseite)
+$lang = $_GET['lang'] ?? 'en';
+$lang = in_array($lang, ['de','en','it','fr']) ? $lang : 'en';
+
+// User-Dummy (später über Login ersetzen)
+$userInitials = null;
 ?>
+<!DOCTYPE html>
+<html lang="<?= htmlspecialchars($lang) ?>">
+<head>
+    <meta charset="UTF-8">
+    <title>usbcheck.it – Fake USB Check</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
-<div class="page-wrapper">
+    <!-- Description -->
+    <meta name="description" content="Fake USB-Sticks erkennen: Browser-basierter Schnelltest für Kapazität, Schreib-/Lesegeschwindigkeit und Datenintegrität.">
 
-    <!-- Page Title -->
-    <section class="section hero">
-        <h1 class="title">USB Fake Check</h1>
-        <p class="subtitle">Prüfe USB-Sticks direkt im Browser – schnell, sicher und ohne Installation.</p>
-    </section>
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Montserrat:wght@600;700;800&display=swap" rel="stylesheet">
 
-    <!-- Main App Wrapper -->
-    <section class="section app-container" id="usbcheck-app">
+    <!-- Tailwind (Dev) -->
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
 
-        <!-- Platzhalter für die späteren Komponenten -->
-        <div class="app-card">
-            <h2>Browser-Testmodi</h2>
-            <p>Hier erscheinen später Quick-Test, Light-Benchmark und Write/Verify.</p>
+<body class="bg-brand-bg text-brand-text font-sans antialiased scroll-smooth">
+<div class="min-h-screen flex flex-col">
 
-            <button id="startButton" class="btn-primary">
-                Starte Web-Test
-            </button>
-        </div>
+    <!-- HEADER -->
+    <?php include __DIR__ . '/../partials/header.php'; ?>
 
-        <!-- Ergebnisbereich -->
-        <div class="app-results hidden" id="resultContainer">
-            <h3>Ergebnis</h3>
-            <pre id="resultOutput" class="result-box"></pre>
-        </div>
+    <!-- MAIN CONTENT -->
+    <main class="flex-1">
+        <!-- Hero -->
+        <section id="hero" class="relative overflow-hidden border-b border-brand-border/70">
+            <div class="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(8,47,73,0.5),_transparent_60%)] pointer-events-none"></div>
 
-    </section>
+            <div class="relative mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 py-14 sm:py-20 flex flex-col lg:flex-row gap-10 items-center">
+                <!-- Left: Text -->
+                <div class="flex-1 space-y-6">
+                    <p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="fake_hero_kicker">
+                        FakeCheck – Browser-Modus
+                    </p>
+                    <h1 class="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight text-white" data-i18n="fake_hero_title">
+                        Ist mein USB-Stick fake?
+                    </h1>
+                    <p class="text-base sm:text-lg text-brand-muted max-w-xl" data-i18n="fake_hero_lead">
+                        Der FakeCheck hilft dir, typische Fake-Sticks aufzuspüren: Browser-basierte Schreib-/Lesetests und Plausibilitätsprüfungen der nutzbaren Kapazität – ohne Installation.
+                    </p>
+
+                    <div class="flex flex-col sm:flex-row gap-3 sm:gap-4">
+                        <button
+                            id="startButton"
+                            class="inline-flex items-center justify-center rounded-full px-5 py-2.5 text-sm font-semibold bg-brand-primary text-brand-bg shadow-soft hover:bg-cyan-400 transition-colors"
+                            data-i18n="fake_cta_start">
+                            Browser-Test starten
+                        </button>
+
+                        <a href="/?lang=<?= htmlspecialchars($lang) ?>"
+                           class="inline-flex items-center justify-center rounded-full px-5 py-2.5 text-sm font-medium border border-brand-border text-brand-muted hover:border-brand-primary hover:text-brand-primary transition-colors"
+                           data-i18n="fake_cta_back_home">
+                            Zur Übersicht zurück
+                        </a>
+                    </div>
+
+                    <p class="text-xs text-brand-muted/80 max-w-md" data-i18n="fake_hero_hint">
+                        Der FakeCheck im Browser arbeitet mit Testdateien und Lese-/Schreibmustern, die du in einem ausgewählten Ordner anlegst. Deine echten Dateien bleiben unangetastet.
+                    </p>
+                </div>
+
+                <!-- Right: Small explainer card -->
+                <div class="flex-1 max-w-md w-full">
+                    <div class="rounded-2xl border border-brand-border bg-brand-surface/80 p-5 sm:p-6 shadow-soft space-y-4">
+                        <h2 class="font-heading text-lg sm:text-xl font-semibold text-white" data-i18n="fake_box_title">
+                            Was der Browser-Test leisten kann
+                        </h2>
+                        <ul class="space-y-3 text-sm text-brand-muted">
+                            <li class="flex gap-2">
+                                <span class="mt-0.5 h-5 w-5 flex items-center justify-center rounded-full bg-brand-primary/15 text-[11px] font-semibold text-brand-primary">1</span>
+                                <div>
+                                    <p class="font-medium text-brand-text" data-i18n="fake_box_point1_title">Schreib-/Lesetest mit Testdateien</p>
+                                    <p data-i18n="fake_box_point1_text">
+                                        Der Browser legt Testdateien im gewählten Ordner an, misst Schreib- und Leseraten und prüft, ob gelesene Daten mit den geschriebenen Mustern übereinstimmen.
+                                    </p>
+                                </div>
+                            </li>
+                            <li class="flex gap-2">
+                                <span class="mt-0.5 h-5 w-5 flex items-center justify-center rounded-full bg-brand-primary/15 text-[11px] font-semibold text-brand-primary">2</span>
+                                <div>
+                                    <p class="font-medium text-brand-text" data-i18n="fake_box_point2_title">Plausibilitätscheck der Kapazität</p>
+                                    <p data-i18n="fake_box_point2_text">
+                                        Aus der Menge der erfolgreich geschriebenen und verifizierten Daten ergibt sich ein realistischer Eindruck, wie viel Nutzkapazität tatsächlich stabil ankommt.
+                                    </p>
+                                </div>
+                            </li>
+                            <li class="flex gap-2">
+                                <span class="mt-0.5 h-5 w-5 flex items-center justify-center rounded-full bg-brand-primary/15 text-[11px] font-semibold text-brand-primary">3</span>
+                                <div>
+                                    <p class="font-medium text-brand-text" data-i18n="fake_box_point3_title">JSON-Report für deine Dokumentation</p>
+                                    <p data-i18n="fake_box_point3_text">
+                                        Alle Ergebnisse werden in einem strukturierten JSON-Report gesammelt, den du speichern, hochladen oder für spätere Vergleiche nutzen kannst.
+                                    </p>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- App / Demo-Bereich -->
+        <section id="webcheck" class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 py-12 sm:py-16">
+            <div class="grid gap-8 lg:grid-cols-[minmax(0,2fr)_minmax(0,1.4fr)] items-start">
+                <!-- Links: Test-Steuerung (Platzhalter) -->
+                <div class="space-y-6">
+                    <div class="rounded-2xl border border-brand-border bg-brand-surface/80 p-6 sm:p-7 shadow-soft">
+                        <h2 class="font-heading text-xl sm:text-2xl font-semibold mb-2 text-white" data-i18n="fake_app_title">
+                            Browser-Testoberfläche (Preview)
+                        </h2>
+                        <p class="text-sm text-brand-muted mb-4" data-i18n="fake_app_intro">
+                            Hier entsteht die eigentliche FakeCheck-Web-App: Auswahl des Testordners, Konfiguration der Testmenge, Fortschrittsanzeige und Ergebnisübersicht. Aktuell zeigt der Button oben nur eine Demo-Ausgabe.
+                        </p>
+
+                        <ul class="space-y-2 text-xs text-brand-muted">
+                            <li data-i18n="fake_app_point1">• Quick-Test mit kleiner Datenmenge.</li>
+                            <li data-i18n="fake_app_point2">• Light-Benchmark: Schreib-/Lesegeschwindigkeit über begrenzte Zeit.</li>
+                            <li data-i18n="fake_app_point3">• Write/Verify: Testdateien schreiben und direkt wieder verifizieren.</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <!-- Rechts: Ergebnis / JSON-Report-Preview -->
+                <div class="space-y-4">
+                    <div id="resultContainer" class="hidden rounded-2xl border border-brand-border bg-brand-surface/80 p-5 sm:p-6 shadow-soft">
+                        <h3 class="font-heading text-lg font-semibold mb-2 text-white" data-i18n="fake_result_title">
+                            Demo-Ausgabe des Browser-Tests
+                        </h3>
+                        <p class="text-xs text-brand-muted mb-3" data-i18n="fake_result_hint">
+                            Diese Ausgabe dient nur als Vorschau. Später wird hier der echte JSON-Report aus dem Browser-Test angezeigt.
+                        </p>
+                        <pre id="resultOutput"
+                             class="text-[11px] whitespace-pre-wrap bg-black/40 text-brand-muted rounded-xl p-3 font-mono overflow-x-auto min-h-[140px]">
+                        </pre>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <!-- FOOTER -->
+    <?php include __DIR__ . '/../partials/footer.php'; ?>
 
 </div>
 
+<!-- i18n / Sprachlogik -->
+<script src="/assets/js/lang.js"></script>
+
+<!-- Seiteigener JS-Placeholder für die spätere Web-App-Logik -->
 <script>
-// Minimales Demo-Skript — später ersetzen wir das durch echte Web-App-Logik.
-// Hier nur als Platzhalter für funktionierenden Browser-Code:
+document.addEventListener("DOMContentLoaded", function () {
+    const startButton = document.getElementById("startButton");
+    const resultContainer = document.getElementById("resultContainer");
+    const resultOutput = document.getElementById("resultOutput");
 
-document.getElementById('startButton').addEventListener('click', () => {
-    const resultBox = document.getElementById('resultContainer');
-    const output = document.getElementById('resultOutput');
+    if (!startButton || !resultContainer || !resultOutput) return;
 
-    output.textContent = "Web-Test gestartet...\n\n" +
-                         "Hier erscheinen später:\n" +
-                         "- Quick-Test\n" +
-                         "- Light-Benchmark\n" +
-                         "- Write/Verify\n" +
-                         "- JSON-Report\n";
+    startButton.addEventListener("click", function () {
+        const now = new Date().toISOString();
+        const demoReport = {
+            meta: {
+                tool: "usbcheck.it/fakecheck",
+                mode: "browser-demo",
+                timestamp: now,
+                locale: "<?= htmlspecialchars($lang) ?>"
+            },
+            tests: [
+                { id: "quick_test", label: "Quick-Test (Demo)", status: "pending" },
+                { id: "light_benchmark", label: "Light-Benchmark (Demo)", status: "pending" },
+                { id: "write_verify", label: "Write/Verify (Demo)", status: "pending" }
+            ],
+            note: "Dies ist nur eine Platzhalter-Ausgabe. Die echte Web-Testlogik (File System Access, Fortschritt, realer JSON-Report) implementieren wir im nächsten Schritt."
+        };
 
-    resultBox.classList.remove('hidden');
+        resultOutput.textContent = JSON.stringify(demoReport, null, 2);
+        resultContainer.classList.remove("hidden");
+        resultContainer.scrollIntoView({ behavior: "smooth", block: "start" });
+    });
 });
 </script>
-
-<?php
-require_once __DIR__ . '/../partials/footer.php';
-?>
+</body>
+</html>
