diff --git a/client/public/apple-touch-icon.svg b/client/public/apple-touch-icon.svg
deleted file mode 100644
index 4693628..0000000
--- a/client/public/apple-touch-icon.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180" fill="none">
-  <defs>
-    <linearGradient id="configflowAppleGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#6366f1;stop-opacity:1" />
-      <stop offset="100%" style="stop-color:#a855f7;stop-opacity:1" />
-    </linearGradient>
-  </defs>
-  <rect width="180" height="180" fill="url(#configflowAppleGrad)" rx="40"/>
-  <g fill="#ffffff">
-    <rect x="43" y="43" width="36" height="36" rx="10"/>
-    <rect x="92" y="43" width="26" height="26" rx="8" opacity="0.92"/>
-    <rect x="43" y="92" width="26" height="26" rx="8" opacity="0.92"/>
-    <rect x="81" y="81" width="39" height="39" rx="11"/>
-  </g>
-</svg>
diff --git a/client/public/configflow-logo-1024px.png b/client/public/configflow-logo-1024px.png
new file mode 100644
index 0000000..412de9b
Binary files /dev/null and b/client/public/configflow-logo-1024px.png differ
diff --git a/client/public/configflow-logo.svg b/client/public/configflow-logo.svg
new file mode 100644
index 0000000..9efd449
--- /dev/null
+++ b/client/public/configflow-logo.svg
@@ -0,0 +1,59 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 350" width="500" height="350">
+  <defs>
+    
+  </defs>
+  
+  <g >
+    <!-- Connection Circuit Lines -->
+    <path
+      d="M 130 120 V 60 H 270 V 140"
+      fill="none"
+      stroke="#FF6B00"
+      stroke-width="10"
+      stroke-linejoin="miter"
+      stroke-linecap="square"
+    />
+    <path
+      d="M 300 170 H 360"
+      fill="none"
+      stroke="#FF6B00"
+      stroke-width="10"
+      stroke-linejoin="miter"
+      stroke-linecap="square"
+    />
+    <path
+      d="M 130 220 V 280 H 390 V 200"
+      fill="none"
+      stroke="#FF6B00"
+      stroke-width="10"
+      stroke-linejoin="miter"
+      stroke-linecap="square"
+    />
+
+    <!-- Architectural Nodes -->
+    <rect
+      x="70"
+      y="110"
+      width="120"
+      height="120"
+      rx="17.5"
+      fill="#FF6B00"
+    />
+    <rect
+      x="230"
+      y="130"
+      width="80"
+      height="80"
+      rx="14"
+      fill="#FF6B00"
+    />
+    <rect
+      x="350"
+      y="130"
+      width="80"
+      height="80"
+      rx="14"
+      fill="#FF6B00"
+    />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/client/public/favicon.svg b/client/public/favicon.svg
index 8bd2cc9..9efd449 100644
--- a/client/public/favicon.svg
+++ b/client/public/favicon.svg
@@ -1,15 +1,59 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180" fill="none">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 350" width="500" height="350">
   <defs>
-    <linearGradient id="configflowFaviconGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#6366f1;stop-opacity:1" />
-      <stop offset="100%" style="stop-color:#a855f7;stop-opacity:1" />
-    </linearGradient>
+    
   </defs>
-  <rect width="180" height="180" fill="url(#configflowFaviconGrad)" rx="40"/>
-  <g fill="#ffffff">
-    <rect x="43" y="43" width="36" height="36" rx="10"/>
-    <rect x="92" y="43" width="26" height="26" rx="8" opacity="0.92"/>
-    <rect x="43" y="92" width="26" height="26" rx="8" opacity="0.92"/>
-    <rect x="81" y="81" width="39" height="39" rx="11"/>
+  
+  <g >
+    <!-- Connection Circuit Lines -->
+    <path
+      d="M 130 120 V 60 H 270 V 140"
+      fill="none"
+      stroke="#FF6B00"
+      stroke-width="10"
+      stroke-linejoin="miter"
+      stroke-linecap="square"
+    />
+    <path
+      d="M 300 170 H 360"
+      fill="none"
+      stroke="#FF6B00"
+      stroke-width="10"
+      stroke-linejoin="miter"
+      stroke-linecap="square"
+    />
+    <path
+      d="M 130 220 V 280 H 390 V 200"
+      fill="none"
+      stroke="#FF6B00"
+      stroke-width="10"
+      stroke-linejoin="miter"
+      stroke-linecap="square"
+    />
+
+    <!-- Architectural Nodes -->
+    <rect
+      x="70"
+      y="110"
+      width="120"
+      height="120"
+      rx="17.5"
+      fill="#FF6B00"
+    />
+    <rect
+      x="230"
+      y="130"
+      width="80"
+      height="80"
+      rx="14"
+      fill="#FF6B00"
+    />
+    <rect
+      x="350"
+      y="130"
+      width="80"
+      height="80"
+      rx="14"
+      fill="#FF6B00"
+    />
   </g>
 </svg>
\ No newline at end of file
diff --git a/client/public/icon-192.png b/client/public/icon-192.png
index 46f9ff1..3d66282 100644
Binary files a/client/public/icon-192.png and b/client/public/icon-192.png differ
diff --git a/client/public/icon-192.svg b/client/public/icon-192.svg
deleted file mode 100644
index 1bc7572..0000000
--- a/client/public/icon-192.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 192" fill="none">
-  <defs>
-    <linearGradient id="configflow192Grad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#6366f1;stop-opacity:1" />
-      <stop offset="100%" style="stop-color:#a855f7;stop-opacity:1" />
-    </linearGradient>
-  </defs>
-  <rect width="192" height="192" fill="url(#configflow192Grad)" rx="40"/>
-  <g fill="#ffffff">
-    <rect x="46" y="46" width="38" height="38" rx="10"/>
-    <rect x="98" y="46" width="28" height="28" rx="8" opacity="0.92"/>
-    <rect x="46" y="98" width="28" height="28" rx="8" opacity="0.92"/>
-    <rect x="86" y="86" width="40" height="40" rx="11"/>
-  </g>
-</svg>
diff --git a/client/public/icon-512.png b/client/public/icon-512.png
new file mode 100644
index 0000000..18bc974
Binary files /dev/null and b/client/public/icon-512.png differ
diff --git a/client/public/icon-512.svg b/client/public/icon-512.svg
deleted file mode 100644
index 3980678..0000000
--- a/client/public/icon-512.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="none">
-  <defs>
-    <linearGradient id="configflow512Grad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#6366f1;stop-opacity:1" />
-      <stop offset="100%" style="stop-color:#a855f7;stop-opacity:1" />
-    </linearGradient>
-  </defs>
-  <rect width="512" height="512" fill="url(#configflow512Grad)" rx="108"/>
-  <g fill="#ffffff">
-    <rect x="122" y="122" width="102" height="102" rx="28"/>
-    <rect x="261" y="122" width="75" height="75" rx="20" opacity="0.92"/>
-    <rect x="122" y="261" width="75" height="75" rx="20" opacity="0.92"/>
-    <rect x="229" y="229" width="107" height="107" rx="30"/>
-  </g>
-</svg>
diff --git a/client/public/icon-maskable-192.png b/client/public/icon-maskable-192.png
new file mode 100644
index 0000000..3d66282
Binary files /dev/null and b/client/public/icon-maskable-192.png differ
diff --git a/client/public/icon-maskable-192.svg b/client/public/icon-maskable-192.svg
deleted file mode 100644
index 0d7ab22..0000000
--- a/client/public/icon-maskable-192.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 192" fill="none">
-  <defs>
-    <linearGradient id="configflowMask192Grad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#6366f1;stop-opacity:1" />
-      <stop offset="100%" style="stop-color:#a855f7;stop-opacity:1" />
-    </linearGradient>
-  </defs>
-  <rect width="192" height="192" fill="url(#configflowMask192Grad)" rx="56"/>
-  <g fill="#ffffff">
-    <rect x="56" y="56" width="34" height="34" rx="10"/>
-    <rect x="98" y="56" width="24" height="24" rx="7" opacity="0.92"/>
-    <rect x="56" y="98" width="24" height="24" rx="7" opacity="0.92"/>
-    <rect x="88" y="88" width="36" height="36" rx="10"/>
-  </g>
-</svg>
diff --git a/client/public/icon-maskable-512.png b/client/public/icon-maskable-512.png
new file mode 100644
index 0000000..18bc974
Binary files /dev/null and b/client/public/icon-maskable-512.png differ
diff --git a/client/public/icon-maskable-512.svg b/client/public/icon-maskable-512.svg
deleted file mode 100644
index af4564c..0000000
--- a/client/public/icon-maskable-512.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="none">
-  <defs>
-    <linearGradient id="configflowMask512Grad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#6366f1;stop-opacity:1" />
-      <stop offset="100%" style="stop-color:#a855f7;stop-opacity:1" />
-    </linearGradient>
-  </defs>
-  <rect width="512" height="512" fill="url(#configflowMask512Grad)" rx="140"/>
-  <g fill="#ffffff">
-    <rect x="144" y="144" width="92" height="92" rx="26"/>
-    <rect x="262" y="144" width="66" height="66" rx="18" opacity="0.92"/>
-    <rect x="144" y="262" width="66" height="66" rx="18" opacity="0.92"/>
-    <rect x="238" y="238" width="96" height="96" rx="28"/>
-  </g>
-</svg>
diff --git a/client/src/app/builder/[appId]/[[...slug]]/layout.tsx b/client/src/app/(app)/builder/[appId]/[[...slug]]/layout.tsx
similarity index 100%
rename from client/src/app/builder/[appId]/[[...slug]]/layout.tsx
rename to client/src/app/(app)/builder/[appId]/[[...slug]]/layout.tsx
diff --git a/client/src/app/builder/[appId]/[[...slug]]/page.tsx b/client/src/app/(app)/builder/[appId]/[[...slug]]/page.tsx
similarity index 100%
rename from client/src/app/builder/[appId]/[[...slug]]/page.tsx
rename to client/src/app/(app)/builder/[appId]/[[...slug]]/page.tsx
diff --git a/client/src/app/builder/[appId]/auth/page.tsx b/client/src/app/(app)/builder/[appId]/auth/page.tsx
similarity index 100%
rename from client/src/app/builder/[appId]/auth/page.tsx
rename to client/src/app/(app)/builder/[appId]/auth/page.tsx
diff --git a/client/src/app/builder/[appId]/layout.tsx b/client/src/app/(app)/builder/[appId]/layout.tsx
similarity index 68%
rename from client/src/app/builder/[appId]/layout.tsx
rename to client/src/app/(app)/builder/[appId]/layout.tsx
index 5c0555c..e076483 100644
--- a/client/src/app/builder/[appId]/layout.tsx
+++ b/client/src/app/(app)/builder/[appId]/layout.tsx
@@ -63,12 +63,12 @@ export default function BuilderLayout({ children }: { children: React.ReactNode
 
   if (loadError) {
     return (
-      <div className="min-h-screen flex flex-col items-center justify-center bg-[#0A0A0A] text-white p-4 gap-4">
-        <ArrowLeft className="w-12 h-12 text-amber-400" />
-        <p className="text-white/60 text-center max-w-md">{loadError}</p>
+      <div className="min-h-screen flex flex-col items-center justify-center bg-surface text-on-surface p-4 gap-4">
+        <ArrowLeft className="w-12 h-12 text-error" />
+        <p className="text-on-surface-variant font-body-md text-center max-w-md">{loadError}</p>
         <button
           onClick={() => router.push("/dashboard")}
-          className="flex items-center gap-2 bg-white text-black px-4 py-2 rounded-lg text-sm font-semibold hover:bg-gray-200 transition-colors"
+          className="flex items-center gap-2 bg-surface-container-high text-on-surface px-4 py-2 rounded border border-outline-hairline text-label-tech font-label-tech hover:bg-surface-variant transition-colors"
         >
           <ArrowLeft className="w-4 h-4" />
           Back to Dashboard
@@ -78,27 +78,27 @@ export default function BuilderLayout({ children }: { children: React.ReactNode
   }
 
   if (loading || !isAuthenticated || !appData) {
-    return <div className="min-h-screen bg-[#0A0A0A]"></div>;
+    return <div className="min-h-screen bg-surface"></div>;
   }
 
   return (
-    <div className="min-h-[100svh] flex flex-col bg-[#0A0A0A] text-white overflow-hidden">
+    <div className="min-h-[100svh] flex flex-col bg-surface text-on-surface overflow-hidden font-sans">
       
       {/* Builder Header */}
-      <header className="border-b border-white/10 bg-black px-3 py-3 sm:px-4 shrink-0 z-50 shadow-2xl">
+      <header className="border-b border-outline-hairline bg-surface-container-lowest px-3 py-3 sm:px-4 shrink-0 z-50">
         <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
         <div className="flex items-center gap-3 min-w-0">
           <button 
             onClick={() => router.push("/dashboard")}
-            className="p-2.5 hover:bg-white/10 rounded-lg text-white/50 hover:text-white transition-colors shrink-0"
+            className="p-2.5 hover:bg-surface-variant rounded text-on-surface-variant hover:text-on-surface transition-colors shrink-0"
           >
             <ArrowLeft className="w-4 h-4" />
           </button>
           <div className="flex items-center gap-2 min-w-0">
-            <span className="font-bold tracking-tight truncate max-w-[10rem] sm:max-w-[16rem] lg:max-w-none">{appData.name}</span>
-            <div className="hidden sm:flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-emerald-500/10 border border-emerald-500/20 shrink-0">
-              <div className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></div>
-              <span className="text-[10px] font-bold text-emerald-400 uppercase tracking-wider">
+            <span className="font-headline-md text-lg truncate max-w-[10rem] sm:max-w-[16rem] lg:max-w-none">{appData.name}</span>
+            <div className="hidden sm:flex items-center gap-1.5 px-2 py-0.5 rounded-sm bg-tertiary-container/10 border border-tertiary-container/30 shrink-0">
+              <div className="w-1.5 h-1.5 rounded-full bg-tertiary animate-pulse"></div>
+              <span className="text-[10px] font-label-caps text-tertiary-container tracking-wider">
                 Live Preview
               </span>
             </div>
@@ -106,24 +106,24 @@ export default function BuilderLayout({ children }: { children: React.ReactNode
         </div>
 
         {/* View Toggle */}
-        <div className="flex self-center lg:absolute lg:left-1/2 lg:-translate-x-1/2 bg-white/5 p-1 rounded-xl border border-white/10 shadow-inner w-full lg:w-auto justify-between lg:justify-center">
+        <div className="flex self-center lg:absolute lg:left-1/2 lg:-translate-x-1/2 bg-surface-container p-1 rounded border border-outline-hairline w-full lg:w-auto justify-between lg:justify-center">
           <button
             onClick={() => setActiveTab("preview")}
-            className={`flex flex-1 lg:flex-none items-center justify-center gap-2 px-4 sm:px-6 py-2 rounded-lg text-sm font-semibold transition-all duration-200 ${
+            className={`flex flex-1 lg:flex-none items-center justify-center gap-2 px-4 sm:px-6 py-1.5 rounded text-label-tech font-label-tech transition-all duration-200 ${
               activeTab === "preview" 
-                ? "bg-white text-black shadow-lg scale-105" 
-                : "text-white/40 hover:text-white hover:bg-white/5"
+                ? "bg-surface-bright text-on-surface border border-outline-hairline shadow-sm scale-105" 
+                : "text-on-surface-variant hover:text-on-surface hover:bg-surface-variant"
             }`}
           >
-            <Play className={`w-4 h-4 ${activeTab === "preview" ? "fill-black" : ""}`} />
+            <Play className={`w-4 h-4 ${activeTab === "preview" ? "fill-current" : ""}`} />
             Preview
           </button>
           <button
             onClick={() => setActiveTab("code")}
-            className={`flex flex-1 lg:flex-none items-center justify-center gap-2 px-4 sm:px-6 py-2 rounded-lg text-sm font-semibold transition-all duration-200 ${
+            className={`flex flex-1 lg:flex-none items-center justify-center gap-2 px-4 sm:px-6 py-1.5 rounded text-label-tech font-label-tech transition-all duration-200 ${
               activeTab === "code" 
-                ? "bg-white text-black shadow-lg scale-105" 
-                : "text-white/40 hover:text-white hover:bg-white/5"
+                ? "bg-surface-bright text-on-surface border border-outline-hairline shadow-sm scale-105" 
+                : "text-on-surface-variant hover:text-on-surface hover:bg-surface-variant"
             }`}
           >
             <Code2 className="w-4 h-4" />
@@ -137,7 +137,7 @@ export default function BuilderLayout({ children }: { children: React.ReactNode
           <button
             onClick={handleDownload}
             disabled={isExporting}
-            className="group relative flex items-center justify-center gap-2 px-4 sm:px-5 py-2 bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-bold rounded-xl transition-all active:scale-95 disabled:opacity-50 shadow-lg shadow-indigo-500/20 min-w-[9rem]"
+            className="group relative flex items-center justify-center gap-2 px-4 sm:px-5 py-2 bg-primary-container hover:bg-orange-600 text-white font-label-tech text-label-tech rounded transition-all active:scale-95 disabled:opacity-50 shadow-[0_0_10px_rgba(255,107,0,0.3)] min-w-[9rem]"
           >
             {isExporting ? <Loader2 className="w-4 h-4 animate-spin" /> : <Download className="w-4 h-4 group-hover:-translate-y-0.5 transition-transform" />}
             {isExporting ? "Zipping..." : "Download ZIP"}
@@ -147,7 +147,7 @@ export default function BuilderLayout({ children }: { children: React.ReactNode
       </header>
 
       {/* Main Workspace Area */}
-      <main className="flex-1 relative overflow-hidden bg-[#0A0A0A]">
+      <main className="flex-1 relative overflow-hidden bg-surface-dim">
         {activeTab === "preview" ? (
           <div className="absolute inset-0">
             {/* The children are already wrapped in AppShell at the page level */}
diff --git a/client/src/app/(app)/builder/page.tsx b/client/src/app/(app)/builder/page.tsx
new file mode 100644
index 0000000..cedc1fb
--- /dev/null
+++ b/client/src/app/(app)/builder/page.tsx
@@ -0,0 +1,142 @@
+"use client";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import api from "@/lib/api";
+import Link from "next/link";
+
+export default function BuilderPage() {
+  const [selectedMode, setSelectedMode] = useState<"manual" | null>("manual");
+  
+  // Dummy Placeholder JSON
+  // Dummy Placeholder JSON
+  const [jsonConfig, setJsonConfig] = useState(
+`{
+  // Remove this and write your own JSON config
+  "project": {
+    "name": "ARCHITECT_OS_CORE",
+    "version": "1.0.4-stable",
+    "active_environment": "production"
+  },
+  "configuration": {
+    "features": {
+      "enable_telemetry": false,
+      "max_concurrent_builds": 4,
+      "experimental_rendering": true
+    },
+    "modules": [
+      {
+        "id": "mod_ui_core",
+        "path": "/src/core/ui",
+        "lazy_load": false
+      },
+      {
+        "id": "mod_data_pipeline",
+        "path": "/src/pipelines/data",
+        "lazy_load": true
+      }
+    ]
+  },
+  "deployment": {
+    "targets": ["aws_us_east_1", "aws_eu_central_1"],
+    "auto_scaling": true,
+    "min_instances": 2,
+    "max_instances": 10
+  }
+}`
+  );
+
+  return (
+    <div className="p-8 max-w-4xl mx-auto w-full">
+      
+      {/* Page Header */}
+      <div className="mb-8 border-b border-outline-hairline pb-6">
+        <h1 className="text-headline-lg font-headline-lg text-on-surface mb-2">Create New Project</h1>
+        <p className="text-body-md text-on-surface-variant">Choose how you want to define your application architecture.</p>
+      </div>
+
+      {/* Selection Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
+        
+        {/* Manual JSON Mode */}
+        <button 
+          onClick={() => setSelectedMode("manual")}
+          className={`flex flex-col items-start text-left p-6 rounded-xl border transition-all duration-200 ${
+            selectedMode === "manual" 
+              ? "bg-primary-container/10 border-primary-container shadow-[0_0_20px_rgba(255,107,0,0.15)]" 
+              : "bg-surface-elevated border-outline-hairline hover:border-outline-variant"
+          }`}
+        >
+          <span className="material-symbols-outlined text-3xl mb-4 text-primary-container">data_object</span>
+          <h3 className="text-headline-md font-headline-md text-on-surface mb-2">JSON Configuration</h3>
+          <p className="text-sm font-body-md text-on-surface-variant leading-relaxed">
+            Manually define your strict architecture schema, endpoints, and UI components using our standard format.
+          </p>
+        </button>
+
+        {/* AI Assisted Mode (Disabled) */}
+        <div className="flex flex-col items-start text-left p-6 rounded-xl border border-outline-hairline bg-surface-elevated opacity-50 cursor-not-allowed relative overflow-hidden">
+          <div className="absolute top-4 right-4 px-2 py-1 rounded bg-tertiary/20 border border-tertiary/30 font-label-caps text-[10px] text-tertiary tracking-widest">
+            COMING SOON
+          </div>
+          <span className="material-symbols-outlined text-3xl mb-4 text-on-surface-variant">auto_awesome</span>
+          <h3 className="text-headline-md font-headline-md text-on-surface mb-2">AI Assisted</h3>
+          <p className="text-sm font-body-md text-on-surface-variant leading-relaxed">
+            Describe your application in plain English and let Architect OS generate the underlying schema for you.
+          </p>
+        </div>
+
+      </div>
+
+      {/* JSON Editor Area (Only shows if Manual is selected) */}
+      {selectedMode === "manual" && (
+        <div className="glass-panel border border-outline-hairline rounded-xl overflow-hidden flex flex-col shadow-xl animate-in fade-in slide-in-from-bottom-4 duration-500">
+          
+          {/* Editor Header */}
+          <div className="bg-surface-container-lowest border-b border-outline-hairline px-4 py-3 flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <span className="material-symbols-outlined text-[16px] text-primary-container">code</span>
+              <span className="font-label-tech text-label-tech text-on-surface">config.json</span>
+            </div>
+            
+            {/* Action Buttons */}
+            <div className="flex gap-3">
+              <button onClick={() => setJsonConfig("")} className="px-4 py-1.5 rounded font-label-tech text-label-tech text-on-surface-variant hover:text-on-surface transition-colors">
+                Clear
+              </button>
+              <button 
+                onClick={async () => {
+                  try {
+                    const parsed = JSON.parse(jsonConfig);
+                    await api.post("/apps", parsed).then(async (res) => {
+                      if (!res.data.success) throw new Error(res.data.error);
+                      toast.success("App Generated successfully!");
+                      window.location.href = `/builder/${res.data.data.id}`;
+                    });
+                  } catch (e: any) {
+                    alert("Failed to parse or submit JSON: " + (e.response?.data?.error || e.message));
+                  }
+                }}
+                className="bg-primary-container hover:bg-orange-600 text-white px-5 py-1.5 rounded font-label-tech text-label-tech transition-colors shadow-[0_0_10px_rgba(255,107,0,0.3)] flex items-center gap-2">
+                <span className="material-symbols-outlined text-[16px]">bolt</span>
+                Generate App
+              </button>
+            </div>
+          </div>
+          
+          {/* The Textarea */}
+          <div className="p-4 bg-terminal-bg">
+            <textarea
+              value={jsonConfig}
+              onChange={(e) => setJsonConfig(e.target.value)}
+              className="w-full h-[400px] bg-transparent text-primary font-code-base text-sm resize-none outline-none border-none focus:ring-0 leading-relaxed"
+              spellCheck="false"
+              placeholder="Paste your JSON configuration here..."
+            />
+          </div>
+          
+        </div>
+      )}
+
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/client/src/app/(app)/dashboard/page.tsx b/client/src/app/(app)/dashboard/page.tsx
new file mode 100644
index 0000000..c3407d7
--- /dev/null
+++ b/client/src/app/(app)/dashboard/page.tsx
@@ -0,0 +1,126 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import api from "@/lib/api";
+import toast from "react-hot-toast";
+
+interface Project {
+  id: string;
+  name: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export default function DashboardPage() {
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const fetchProjects = async () => {
+    try {
+      const response = await api.get("/apps");
+      setProjects(response.data.data || []);
+    } catch (error: any) {
+      toast.error("Failed to load projects");
+      console.error(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    if (!confirm("Are you sure you want to delete this project?")) return;
+    
+    try {
+      await api.delete(`/apps/${id}`);
+      toast.success("Project deleted");
+      fetchProjects();
+    } catch (error) {
+      toast.error("Failed to delete project");
+    }
+  };
+
+  useEffect(() => {
+    fetchProjects();
+  }, []);
+
+  return (
+    <div className="p-8 max-w-6xl mx-auto w-full">
+      
+      {/* Top Header */}
+      <div className="flex flex-col md:flex-row md:items-end justify-between mb-10 gap-4 border-b border-outline-hairline pb-6">
+        <div>
+          <h1 className="text-headline-md font-headline-md text-on-surface mb-2">Projects</h1>
+          <p className="text-sm font-code-base text-on-surface-variant">Manage and orchestrate your generated applications.</p>
+        </div>
+        <Link 
+          href="/builder"
+          className="bg-primary-container hover:bg-orange-600 text-white px-5 py-2.5 rounded font-label-tech text-label-tech transition-all flex items-center gap-2 shadow-[0_0_10px_rgba(255,107,0,0.3)] active:scale-95"
+        >
+          <span className="material-symbols-outlined text-[18px]">add</span>
+          Create New Project
+        </Link>
+      </div>
+
+      {/* Project Grid */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
+        
+        {isLoading ? (
+          <div className="text-on-surface-variant font-label-tech">Loading projects...</div>
+        ) : (
+          <>
+            {projects.map((project) => (
+              <div key={project.id} className="glass-panel border border-outline-hairline rounded-lg overflow-hidden group hover:border-primary-container/50 transition-colors flex flex-col">
+                {/* Status Line */}
+                <div className="h-1 bg-gradient-to-r from-tertiary to-tertiary-container w-full"></div>
+                
+                <div className="p-5 flex-1">
+                  <div className="flex justify-between items-start mb-3">
+                    <h3 className="font-headline-md text-lg text-on-surface">{project.name}</h3>
+                    <button onClick={() => handleDelete(project.id)} className="text-on-surface-variant hover:text-error-red transition-colors">
+                      <span className="material-symbols-outlined text-[20px]">delete</span>
+                    </button>
+                  </div>
+                  
+                  <p className="text-xs font-code-base text-on-surface-variant mb-6 leading-relaxed">
+                    ConfigFlow generated application architecture.
+                  </p>
+                  
+                  {/* Environment Badges */}
+                  <div className="flex items-center gap-3 mb-4">
+                    <span className="px-2 py-0.5 rounded-sm bg-tertiary-container/10 border border-tertiary-container/30 text-[10px] font-label-caps text-tertiary-container tracking-widest">
+                      PRODUCTION
+                    </span>
+                    <span className="text-[11px] font-code-base text-on-surface-variant flex items-center gap-1">
+                      <span className="w-1.5 h-1.5 rounded-full bg-tertiary animate-pulse"></span>
+                      Healthy
+                    </span>
+                  </div>
+                </div>
+
+                {/* Card Footer */}
+                <div className="border-t border-outline-hairline bg-surface-elevated/50 p-3.5 flex justify-between items-center">
+                  <div className="flex items-center gap-2 text-[11px] font-code-base text-on-surface-variant">
+                    <span className="material-symbols-outlined text-[14px]">calendar_today</span>
+                    {new Date(project.createdAt).toLocaleDateString()}
+                  </div>
+                  <Link href={`/builder/${project.id}`} className="text-xs font-label-tech text-primary-container hover:text-primary transition-colors flex items-center gap-1">
+                    Open Builder <span className="material-symbols-outlined text-[14px]">arrow_forward</span>
+                  </Link>
+                </div>
+              </div>
+            ))}
+
+            {/* Empty State Card */}
+            <Link href="/builder" className="glass-panel border border-outline-hairline border-dashed rounded-lg flex flex-col items-center justify-center p-8 hover:border-primary-container/50 hover:bg-primary-container/5 transition-all text-on-surface-variant hover:text-primary-container group min-h-[220px]">
+              <div className="w-12 h-12 rounded-full bg-surface-elevated border border-outline-hairline flex items-center justify-center mb-4 group-hover:scale-110 transition-transform shadow-lg">
+                <span className="material-symbols-outlined text-2xl">add</span>
+              </div>
+              <span className="font-label-tech text-sm">Create New Project</span>
+            </Link>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/client/src/app/(app)/layout.tsx b/client/src/app/(app)/layout.tsx
new file mode 100644
index 0000000..c34b651
--- /dev/null
+++ b/client/src/app/(app)/layout.tsx
@@ -0,0 +1,61 @@
+import Link from "next/link";
+
+export default function AppLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex h-screen bg-background text-on-surface overflow-hidden font-body-md">
+      
+      {/* IDE Sidebar Panel */}
+      <aside className="w-64 flex-shrink-0 border-r border-outline-hairline bg-surface-elevated/50 flex flex-col z-10">
+        
+        {/* Workspace Switcher */}
+        <div className="h-14 border-b border-outline-hairline flex items-center px-4 hover:bg-surface-variant/50 cursor-pointer transition-colors">
+          <div className="flex items-center gap-3 w-full">
+            <div className="w-6 h-6 rounded bg-primary-container flex items-center justify-center text-[12px] font-bold text-white shadow-[0_0_10px_rgba(255,107,0,0.3)]">
+              C
+            </div>
+            <span className="font-label-tech text-sm truncate flex-1">ConfigFlow Corp</span>
+            <span className="material-symbols-outlined text-sm text-on-surface-variant">unfold_more</span>
+          </div>
+        </div>
+
+        {/* Navigation */}
+        <nav className="flex-1 py-4 overflow-y-auto hide-scroll space-y-1 px-3">
+          <div className="text-label-caps text-on-surface-variant/50 px-2 mb-3 mt-2">WORKSPACE</div>
+          
+          <Link href="/dashboard" className="flex items-center gap-3 px-3 py-2 rounded-md bg-surface-variant/50 text-on-surface border border-outline-hairline">
+            <span className="material-symbols-outlined text-[18px] text-primary-container" style={{ fontVariationSettings: "'FILL' 1" }}>grid_view</span>
+            <span className="font-label-tech">Projects</span>
+          </Link>
+          
+          <Link href="#" className="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-surface-variant/30 text-on-surface-variant transition-colors">
+            <span className="material-symbols-outlined text-[18px]">cloud</span>
+            <span className="font-label-tech">Environments</span>
+          </Link>
+          
+          <Link href="#" className="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-surface-variant/30 text-on-surface-variant transition-colors">
+            <span className="material-symbols-outlined text-[18px]">group</span>
+            <span className="font-label-tech">Team Access</span>
+          </Link>
+        </nav>
+
+        {/* User Profile Footer */}
+        <div className="h-14 border-t border-outline-hairline flex items-center px-4 hover:bg-surface-variant/30 cursor-pointer transition-colors">
+           <div className="w-6 h-6 rounded-full bg-surface-variant flex items-center justify-center border border-outline-hairline overflow-hidden text-on-surface-variant">
+             <span className="material-symbols-outlined text-[14px]">person</span>
+           </div>
+           <span className="ml-3 font-code-base text-xs text-on-surface-variant truncate">dev@company.com</span>
+        </div>
+      </aside>
+
+      {/* Main Stage Panel */}
+      <main className="flex-1 flex flex-col min-w-0 overflow-y-auto bg-background relative">
+        {/* Subtle grid background for the workspace */}
+        <div className="absolute inset-0 bg-grid opacity-30 pointer-events-none"></div>
+        <div className="relative z-10 w-full h-full">
+            {children}
+        </div>
+      </main>
+      
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/client/src/app/auth/callback/callback-content.tsx b/client/src/app/(auth)/auth/callback/callback-content.tsx
similarity index 74%
rename from client/src/app/auth/callback/callback-content.tsx
rename to client/src/app/(auth)/auth/callback/callback-content.tsx
index 8413307..b39ff12 100644
--- a/client/src/app/auth/callback/callback-content.tsx
+++ b/client/src/app/(auth)/auth/callback/callback-content.tsx
@@ -46,21 +46,21 @@ function VerifyErrorPanel({ kind, email }: { kind: VerifyError; email: string |
   const config = {
     expired: {
       icon: <Clock className="h-8 w-8 text-amber-400" />,
-      iconBg: "bg-amber-400/10 ring-amber-400/20",
+      iconBg: "bg-surface-elevated ring-amber-400/20",
       title: "Link expired",
       desc: "This verification link has expired. Links are valid for 30 minutes.",
       canResend: true,
     },
     used: {
-      icon: <ShieldX className="h-8 w-8 text-indigo-400" />,
-      iconBg: "bg-indigo-400/10 ring-indigo-400/20",
+      icon: <ShieldX className="h-8 w-8 text-primary" />,
+      iconBg: "bg-surface-elevated ring-primary/20",
       title: "Link already used",
       desc: "This verification link has already been used. If you're still having trouble signing in, request a new one.",
       canResend: true,
     },
     invalid: {
-      icon: <AlertCircle className="h-8 w-8 text-red-400" />,
-      iconBg: "bg-red-400/10 ring-red-400/20",
+      icon: <AlertCircle className="h-8 w-8 text-error" />,
+      iconBg: "bg-surface-elevated ring-error/20",
       title: "Invalid link",
       desc: "This verification link is not valid. It may have been copied incorrectly.",
       canResend: false,
@@ -70,18 +70,18 @@ function VerifyErrorPanel({ kind, email }: { kind: VerifyError; email: string |
   if (resendSuccess) {
     return (
       <div className="text-center">
-        <div className="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-2xl bg-emerald-500/10 ring-1 ring-emerald-400/20">
+        <div className="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded bg-surface-elevated ring-1 ring-emerald-400/20">
           <CheckCircle2 className="h-8 w-8 text-emerald-400" />
         </div>
-        <h1 className="text-xl font-semibold text-white mb-2">Verification email sent</h1>
-        <p className="text-sm text-white/60 mb-6">
+        <h1 className="text-xl font-headline-md text-on-surface mb-2">Verification email sent</h1>
+        <p className="text-sm font-code-base text-on-surface-variant mb-6">
           We sent a new link to{" "}
-          <span className="font-medium text-white">{email}</span>.{" "}
+          <span className="font-bold text-on-surface">{email}</span>.{" "}
           Check your inbox and click the link to verify your account.
         </p>
         <button
           onClick={() => router.replace("/login")}
-          className="inline-flex items-center justify-center rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white hover:bg-indigo-500 transition-colors"
+          className="inline-flex items-center justify-center rounded bg-primary-container px-5 py-2.5 text-sm font-label-tech text-white hover:bg-orange-600 transition-colors shadow-[0_0_10px_rgba(255,107,0,0.3)]"
         >
           Back to login
         </button>
@@ -92,15 +92,15 @@ function VerifyErrorPanel({ kind, email }: { kind: VerifyError; email: string |
   return (
     <div className="text-center">
       {/* Icon */}
-      <div className={`mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-2xl ring-1 ${config.iconBg}`}>
+      <div className={`mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded ring-1 ${config.iconBg}`}>
         {config.icon}
       </div>
 
-      <h1 className="text-xl font-semibold text-white mb-2">{config.title}</h1>
-      <p className="text-sm text-white/60 mb-6 leading-relaxed">{config.desc}</p>
+      <h1 className="text-xl font-headline-md text-on-surface mb-2">{config.title}</h1>
+      <p className="text-sm font-code-base text-on-surface-variant mb-6 leading-relaxed">{config.desc}</p>
 
       {resendError && (
-        <div className="mb-4 flex items-center gap-2 rounded-xl border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-400">
+        <div className="mb-4 flex items-center gap-2 rounded border border-error/20 bg-error/10 px-4 py-3 text-sm font-code-base text-error">
           <AlertCircle className="h-4 w-4 flex-shrink-0" />
           {resendError}
         </div>
@@ -111,7 +111,7 @@ function VerifyErrorPanel({ kind, email }: { kind: VerifyError; email: string |
           <button
             onClick={resend}
             disabled={resendLoading}
-            className="inline-flex items-center justify-center gap-2 rounded-xl bg-white px-5 py-3 text-sm font-semibold text-gray-900 transition-colors hover:bg-emerald-50 disabled:cursor-not-allowed disabled:opacity-60"
+            className="inline-flex items-center justify-center gap-2 rounded bg-surface-elevated px-5 py-3 text-sm font-label-tech text-on-surface transition-colors hover:bg-surface-variant border border-outline-hairline disabled:cursor-not-allowed disabled:opacity-60"
           >
             {resendLoading ? (
               <Loader2 className="h-4 w-4 animate-spin" />
@@ -124,14 +124,14 @@ function VerifyErrorPanel({ kind, email }: { kind: VerifyError; email: string |
 
         <button
           onClick={() => router.replace("/register")}
-          className="inline-flex items-center justify-center rounded-xl border border-white/10 bg-white/5 px-5 py-3 text-sm font-semibold text-white transition-colors hover:bg-white/10"
+          className="inline-flex items-center justify-center rounded border border-outline-hairline bg-surface-container px-5 py-3 text-sm font-label-tech text-on-surface transition-colors hover:bg-surface-variant"
         >
           Back to sign up
         </button>
 
         <button
           onClick={() => router.replace("/login")}
-          className="text-sm text-white/40 hover:text-white transition-colors"
+          className="text-sm font-label-tech text-on-surface-variant hover:text-on-surface transition-colors"
         >
           Already verified? Sign in
         </button>
@@ -145,12 +145,12 @@ function GenericErrorPanel({ message }: { message: string }) {
   const router = useRouter();
   return (
     <div className="text-center">
-      <AlertCircle className="mx-auto mb-3 h-8 w-8 text-red-400" />
-      <h1 className="text-lg font-semibold text-white mb-2">Sign in failed</h1>
-      <p className="text-sm text-white/60 mb-6">{message}</p>
+      <AlertCircle className="mx-auto mb-3 h-8 w-8 text-error" />
+      <h1 className="text-lg font-headline-md text-on-surface mb-2">Sign in failed</h1>
+      <p className="text-sm font-code-base text-on-surface-variant mb-6">{message}</p>
       <button
         onClick={() => router.replace("/login")}
-        className="inline-flex items-center justify-center rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-medium text-white hover:bg-indigo-500 transition-colors"
+        className="inline-flex items-center justify-center rounded bg-primary-container px-5 py-2.5 text-sm font-label-tech text-white hover:bg-orange-600 transition-colors shadow-[0_0_10px_rgba(255,107,0,0.3)]"
       >
         Back to login
       </button>
@@ -238,8 +238,8 @@ export default function OAuthCallbackContent() {
   // ── Verification error states ──
   if (verifyError) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-gray-950 px-6">
-        <div className="w-full max-w-sm rounded-3xl border border-white/10 bg-white/5 p-8 shadow-2xl backdrop-blur-sm">
+      <div className="min-h-screen flex items-center justify-center bg-surface px-6">
+        <div className="w-full max-w-sm rounded border border-outline-hairline bg-surface-elevated p-8 shadow-2xl">
           <VerifyErrorPanel kind={verifyError} email={verifyEmail} />
         </div>
       </div>
@@ -249,8 +249,8 @@ export default function OAuthCallbackContent() {
   // ── Generic error ──
   if (authError) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-gray-950 px-6">
-        <div className="w-full max-w-md rounded-2xl border border-white/10 bg-white/5 p-6">
+      <div className="min-h-screen flex items-center justify-center bg-surface px-6">
+        <div className="w-full max-w-md rounded border border-outline-hairline bg-surface-elevated p-6">
           <GenericErrorPanel message={authError} />
         </div>
       </div>
@@ -259,12 +259,12 @@ export default function OAuthCallbackContent() {
 
   // ── Loading / completing auth ──
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-950 px-6">
-      <div className="w-full max-w-md rounded-2xl border border-white/10 bg-white/5 p-6 text-center">
+    <div className="min-h-screen flex items-center justify-center bg-surface px-6">
+      <div className="w-full max-w-md rounded border border-outline-hairline bg-surface-elevated p-6 text-center">
         <div className="flex justify-center mb-4">
-          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-500" />
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
         </div>
-        <p className="text-sm text-white/60">Completing sign in…</p>
+        <p className="text-sm font-code-base text-on-surface-variant">Completing sign in…</p>
       </div>
     </div>
   );
diff --git a/client/src/app/auth/callback/page.tsx b/client/src/app/(auth)/auth/callback/page.tsx
similarity index 100%
rename from client/src/app/auth/callback/page.tsx
rename to client/src/app/(auth)/auth/callback/page.tsx
diff --git a/client/src/app/(auth)/layout.tsx b/client/src/app/(auth)/layout.tsx
new file mode 100644
index 0000000..eadb692
--- /dev/null
+++ b/client/src/app/(auth)/layout.tsx
@@ -0,0 +1,37 @@
+import Link from "next/link";
+
+export default function AuthLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="bg-background text-on-surface font-body-md text-body-md antialiased min-h-screen relative overflow-hidden flex flex-col">
+      <div className="absolute inset-0 bg-background/40 -z-10"></div>
+      
+      {/* Header */}
+      <header className="w-full px-margin-safe py-6 flex justify-between items-center z-10">
+        <div className="flex items-center gap-2">
+          <Link href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 350" width="32" height="22" className="flex-shrink-0">
+              <g>
+                <path d="M 130 120 V 60 H 270 V 140" fill="none" stroke="#FF6B00" strokeWidth="10" strokeLinejoin="miter" strokeLinecap="square" />
+                <path d="M 300 170 H 360" fill="none" stroke="#FF6B00" strokeWidth="10" strokeLinejoin="miter" strokeLinecap="square" />
+                <path d="M 130 220 V 280 H 390 V 200" fill="none" stroke="#FF6B00" strokeWidth="10" strokeLinejoin="miter" strokeLinecap="square" />
+                <rect x="70" y="110" width="120" height="120" rx="17.5" fill="#FF6B00" />
+                <rect x="230" y="130" width="80" height="80" rx="14" fill="#FF6B00" />
+                <rect x="350" y="130" width="80" height="80" rx="14" fill="#FF6B00" />
+              </g>
+            </svg>
+            <span className="font-headline-md text-headline-md font-black tracking-tighter text-on-surface">ConfigFlow</span>
+          </Link>
+        </div>
+        <Link className="text-on-surface-variant hover:text-primary transition-colors duration-200 flex items-center gap-2 font-label-caps text-label-caps" href="/">
+          <span>Back to Home</span>
+          <span className="material-symbols-outlined text-[16px]">arrow_forward</span>
+        </Link>
+      </header>
+
+      {/* Main Content Area */}
+      <main className="flex-1 flex flex-col items-center justify-center px-gutter py-12 z-10 w-full max-w-[480px] mx-auto">
+        {children}
+      </main>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/client/src/app/(auth)/login/page.tsx b/client/src/app/(auth)/login/page.tsx
new file mode 100644
index 0000000..902e89a
--- /dev/null
+++ b/client/src/app/(auth)/login/page.tsx
@@ -0,0 +1,125 @@
+"use client";
+
+import Link from "next/link";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import toast from "react-hot-toast";
+import { useAuth } from "@/lib/auth-context";
+
+export default function LoginPage() {
+  const router = useRouter();
+  
+  const { login } = useAuth();
+  
+  // State for our form inputs
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  // The function that talks to your Express backend
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+
+    try {
+      await login(email, password);
+      
+      toast.success("Welcome back!");
+      router.push("/dashboard"); // Send them to the IDE!
+      
+    } catch (error: any) {
+      toast.error(error.message || "Invalid email or password.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const API_BASE = process.env.NEXT_PUBLIC_API_URL || "http://localhost:4000";
+
+  const handleGoogleLogin = () => {
+    window.location.href = `${API_BASE}/api/auth/google/start`;
+  };
+
+  const handleGithubLogin = () => {
+    window.location.href = `${API_BASE}/api/auth/github/start`;
+  };
+
+  return (
+    <>
+      <div className="glass-panel rounded-xl w-full border border-outline-hairline p-8 shadow-2xl flex flex-col gap-6 relative overflow-hidden animate-in fade-in zoom-in-95 duration-300">
+        <div className="text-center">
+          <h1 className="font-headline-lg text-headline-lg text-on-surface mb-2">Welcome back.</h1>
+          <p className="font-body-md text-body-md text-on-surface-variant">Sign in to continue to your workspace.</p>
+        </div>
+
+        {/* OAuth Buttons */}
+        <div className="flex flex-col gap-3">
+          <button onClick={handleGithubLogin} type="button" className="w-full flex items-center justify-center gap-3 py-2.5 px-4 rounded border border-outline-hairline bg-surface-container-high hover:bg-surface-variant transition-colors text-on-surface font-label-tech text-label-tech">
+            <svg className="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path></svg>
+            Continue with GitHub
+          </button>
+          <button onClick={handleGoogleLogin} type="button" className="w-full flex items-center justify-center gap-3 py-2.5 px-4 rounded border border-outline-hairline bg-surface-container-high hover:bg-surface-variant transition-colors text-on-surface font-label-tech text-label-tech">
+            <svg className="w-4 h-4" viewBox="0 0 24 24"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"></path><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"></path><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"></path><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"></path></svg>
+            Continue with Google
+          </button>
+        </div>
+
+        {/* Divider */}
+        <div className="flex items-center gap-4">
+          <div className="flex-1 h-px bg-outline-hairline"></div>
+          <span className="font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider">or</span>
+          <div className="flex-1 h-px bg-outline-hairline"></div>
+        </div>
+
+        {/* The Wired-Up Form */}
+        <form onSubmit={handleLogin} className="flex flex-col gap-4">
+          <div className="flex flex-col gap-1.5">
+            <label className="font-label-tech text-label-tech text-on-surface-variant ml-1">EMAIL ADDRESS</label>
+            <input 
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="w-full bg-surface-container/50 border border-outline-hairline rounded px-4 py-2 text-on-surface font-code-base text-code-base input-glow outline-none transition-shadow" 
+              placeholder="name@company.com" 
+              required 
+              type="email" 
+            />
+          </div>
+          
+          <div className="flex flex-col gap-1.5">
+            <label className="font-label-tech text-label-tech text-on-surface-variant ml-1">PASSWORD</label>
+            <input 
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="w-full bg-surface-container/50 border border-outline-hairline rounded px-4 py-2 text-on-surface font-code-base text-code-base input-glow outline-none transition-shadow" 
+              placeholder="••••••••" 
+              required 
+              type="password" 
+            />
+          </div>
+          
+          <div className="flex justify-end -mt-2">
+            <a className="font-label-tech text-label-tech text-on-surface-variant hover:text-primary transition-colors" href="#">Forgot password?</a>
+          </div>
+          
+          <button 
+            type="submit" 
+            disabled={isLoading}
+            className="w-full text-center bg-primary-container text-white font-headline-md text-body-md py-3 rounded mt-2 hover:bg-orange-600 transition-colors shadow-[0_0_15px_rgba(255,107,0,0.3)] disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {isLoading ? "Signing In..." : "Sign In"}
+          </button>
+        </form>
+
+        <div className="text-center mt-2">
+          <span className="font-body-md text-body-md text-on-surface-variant">Don't have an account? </span>
+          <Link className="font-body-md text-body-md text-primary hover:text-primary-fixed transition-colors" href="/register">Sign up.</Link>
+        </div>
+      </div>
+
+      <div className="mt-8 flex items-center justify-center gap-2 text-on-surface-variant opacity-70">
+        <span className="material-symbols-outlined text-[14px]">lock</span>
+        <span className="font-label-tech text-label-tech">Secure 256-bit encryption. We never share your data.</span>
+      </div>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/client/src/app/(auth)/register/page.tsx b/client/src/app/(auth)/register/page.tsx
new file mode 100644
index 0000000..7f6cb54
--- /dev/null
+++ b/client/src/app/(auth)/register/page.tsx
@@ -0,0 +1,136 @@
+"use client";
+
+import Link from "next/link";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import toast from "react-hot-toast";
+import { useAuth } from "@/lib/auth-context";
+
+export default function RegisterPage() {
+  const router = useRouter();
+  
+  const { register } = useAuth();
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleRegister = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+
+    try {
+      await register(email, password, name);
+      toast.success("Check your email to verify your account!");
+      router.push("/login"); 
+    } catch (error: any) {
+      toast.error(error.message || "Failed to create account.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const API_BASE = process.env.NEXT_PUBLIC_API_URL || "http://localhost:4000";
+
+  const handleGoogleLogin = () => {
+    window.location.href = `${API_BASE}/api/auth/google/start`;
+  };
+
+  const handleGithubLogin = () => {
+    window.location.href = `${API_BASE}/api/auth/github/start`;
+  };
+
+  return (
+    <>
+      <div className="glass-card w-full border border-outline-hairline rounded-xl p-8 flex flex-col shadow-2xl relative overflow-hidden animate-in fade-in zoom-in-95 duration-300">
+        
+        {/* Subtle accent top line */}
+        <div className="absolute top-0 left-0 right-0 h-[2px] bg-gradient-to-r from-transparent via-primary-container to-transparent opacity-50"></div>
+        
+        <div className="text-center mb-8">
+          <h1 className="font-headline-lg text-headline-lg text-on-surface mb-2">Start generating software.</h1>
+          <p className="font-label-tech text-label-tech text-on-surface-variant">Create your workspace to begin.</p>
+        </div>
+
+        {/* OAuth Actions */}
+        <div className="flex flex-col gap-3 mb-6">
+          <button onClick={handleGithubLogin} type="button" className="w-full flex items-center justify-center gap-3 py-2.5 px-4 rounded border border-outline-hairline bg-surface-container-high hover:bg-surface-variant transition-colors text-on-surface font-label-tech text-label-tech">
+            <svg className="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path></svg>
+            Continue with GitHub
+          </button>
+          <button onClick={handleGoogleLogin} type="button" className="w-full flex items-center justify-center gap-3 py-2.5 px-4 rounded border border-outline-hairline bg-surface-container-high hover:bg-surface-variant transition-colors text-on-surface font-label-tech text-label-tech">
+            <svg className="w-4 h-4" viewBox="0 0 24 24"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"></path><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"></path><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"></path><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"></path></svg>
+            Continue with Google
+          </button>
+        </div>
+
+        {/* Divider */}
+        <div className="flex items-center gap-4 mb-6">
+          <div className="flex-1 h-px bg-outline-hairline"></div>
+          <span className="font-label-tech text-label-tech text-on-surface-variant">or</span>
+          <div className="flex-1 h-px bg-outline-hairline"></div>
+        </div>
+
+        {/* The Wired-Up Form */}
+        <form onSubmit={handleRegister} className="flex flex-col gap-4 mb-8">
+          <div className="flex flex-col gap-1.5">
+            <label className="font-label-tech text-label-tech text-on-surface-variant ml-1">FULL NAME</label>
+            <input 
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="input-field w-full bg-surface-dim/50 text-on-surface border-0 border-b border-outline-variant px-0 py-3 focus:ring-0 focus:border-primary placeholder-on-surface-variant font-code-base text-code-base transition-colors bg-transparent" 
+              placeholder="Jane Doe" 
+              required 
+              type="text" 
+            />
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <label className="font-label-tech text-label-tech text-on-surface-variant ml-1">EMAIL ADDRESS</label>
+            <input 
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="input-field w-full bg-surface-dim/50 text-on-surface border-0 border-b border-outline-variant px-0 py-3 focus:ring-0 focus:border-primary placeholder-on-surface-variant font-code-base text-code-base transition-colors bg-transparent" 
+              placeholder="work@company.com" 
+              required 
+              type="email" 
+            />
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <label className="font-label-tech text-label-tech text-on-surface-variant ml-1">PASSWORD</label>
+            <input 
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="input-field w-full bg-surface-dim/50 text-on-surface border-0 border-b border-outline-variant px-0 py-3 focus:ring-0 focus:border-primary placeholder-on-surface-variant font-code-base text-code-base transition-colors bg-transparent" 
+              placeholder="••••••••" 
+              required 
+              type="password" 
+              minLength={8}
+            />
+          </div>
+          <div className="pt-4">
+            <button 
+              type="submit" 
+              disabled={isLoading}
+              className="glow-button w-full bg-primary-container text-white font-headline-md text-[16px] py-3 px-4 rounded font-bold tracking-wide hover:bg-orange-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {isLoading ? "Creating Account..." : "Create Account"}
+            </button>
+          </div>
+        </form>
+
+        {/* Login Link */}
+        <div className="text-center">
+          <p className="font-body-md text-body-md text-on-surface-variant">
+            Already have an account? <Link className="text-primary hover:text-primary-fixed transition-colors underline underline-offset-4 decoration-primary/30" href="/login">Log in.</Link>
+          </p>
+        </div>
+      </div>
+
+      {/* Trust Indicator */}
+      <div className="mt-8 flex items-center justify-center gap-2 text-on-surface-variant opacity-70">
+        <span className="material-symbols-outlined text-[16px]">lock</span>
+        <span className="font-label-tech text-label-tech">Secure 256-bit encryption. We never share your data.</span>
+      </div>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/client/src/app/(marketing)/layout.tsx b/client/src/app/(marketing)/layout.tsx
new file mode 100644
index 0000000..e8d4583
--- /dev/null
+++ b/client/src/app/(marketing)/layout.tsx
@@ -0,0 +1,18 @@
+import Navbar from "@/components/layout/Navbar";
+import Footer from "@/components/layout/Footer";
+
+export default function MarketingLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="min-h-screen flex flex-col bg-cf-dark text-white pt-16">
+      <Navbar />
+      <main className="flex-grow">
+        {children}
+      </main>
+      <Footer />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/client/src/app/(marketing)/mission/page.tsx b/client/src/app/(marketing)/mission/page.tsx
new file mode 100644
index 0000000..cca5528
--- /dev/null
+++ b/client/src/app/(marketing)/mission/page.tsx
@@ -0,0 +1,71 @@
+import Link from "next/link";
+
+export default function MissionPage() {
+  return (
+    <div className="font-body-md antialiased bg-background min-h-screen pt-24 pb-32">
+      <div className="max-w-5xl mx-auto px-margin-safe">
+        
+        {/* Header */}
+        <div className="mb-16">
+          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-outline-variant bg-surface-container-low mb-8">
+            <span className="w-2 h-2 rounded-full bg-tertiary animate-pulse"></span>
+            <span className="text-label-caps font-label-caps text-on-surface-variant uppercase tracking-widest">Our Mission</span>
+          </div>
+          <h1 className="text-display-hero font-display-hero text-on-surface mb-6">
+            Software should be <span className="text-primary-container">generated</span>, not written.
+          </h1>
+        </div>
+
+        {/* Content */}
+        <div className="space-y-8 text-body-lg text-on-surface-variant leading-relaxed">
+          <p>
+            For the past two decades, the software industry has been trapped in a cycle of writing the same boilerplate code over and over again. Every new project requires setting up a database, configuring authentication, wiring up API routes, and building basic CRUD interfaces.
+          </p>
+          <p>
+            We believe that human engineers are too valuable to spend their time writing boilerplate. 
+          </p>
+          
+          <div className="glass-panel p-8 my-12 rounded-xl border-l-4 border-l-primary-container">
+            <h3 className="text-headline-md font-headline-md text-on-surface mb-4">The ConfigFlow Manifesto</h3>
+            <ul className="space-y-4 text-body-md font-code-base">
+              <li className="flex items-start gap-4">
+                <span className="text-primary-container">01.</span>
+                <span>Architecture should be defined declaratively, not imperatively.</span>
+              </li>
+              <li className="flex items-start gap-4">
+                <span className="text-primary-container">02.</span>
+                <span>Machines should write the boilerplate. Humans should write the business logic.</span>
+              </li>
+              <li className="flex items-start gap-4">
+                <span className="text-primary-container">03.</span>
+                <span>Generated code must be clean, standard, and vendor-agnostic. No lock-in.</span>
+              </li>
+            </ul>
+          </div>
+
+          <p>
+            ConfigFlow was built to bridge the gap between idea and production. By defining your architecture in a single, strictly-typed JSON configuration, our engine can orchestrate the entire full-stack application in minutes.
+          </p>
+          <p>
+            We are building the operating system for software generation. We invite you to build the future with us.
+          </p>
+        </div>
+
+        {/* CTA */}
+        <div className="mt-20 pt-12 border-t border-outline-hairline flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <span className="material-symbols-outlined text-4xl text-primary-container">account_tree</span>
+            <div>
+              <div className="text-label-caps font-label-caps text-on-surface">THE CONFIGFLOW TEAM</div>
+              <div className="text-sm text-on-surface-variant">Rajasthan, India</div>
+            </div>
+          </div>
+          <Link href="/register" className="bg-surface-elevated hover:bg-surface-container-high border border-outline-variant text-on-surface px-6 py-3 rounded-md text-sm font-bold transition-colors">
+            Join the Platform
+          </Link>
+        </div>
+
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/client/src/app/(marketing)/page.tsx b/client/src/app/(marketing)/page.tsx
new file mode 100644
index 0000000..2fd7288
--- /dev/null
+++ b/client/src/app/(marketing)/page.tsx
@@ -0,0 +1,369 @@
+"use client";
+import Link from "next/link";
+import { useEffect, useRef } from "react";
+
+export default function Home() {
+  const heroRef = useRef<HTMLElement>(null);
+  const glowRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const heroSection = heroRef.current;
+    const mouseGlow = glowRef.current;
+
+    if (heroSection && mouseGlow) {
+      const handleMouseMove = (e: MouseEvent) => {
+        const rect = heroSection.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        mouseGlow.style.left = `${x}px`;
+        mouseGlow.style.top = `${y}px`;
+      };
+
+      heroSection.addEventListener('mousemove', handleMouseMove);
+      heroSection.addEventListener('mouseleave', () => {
+        mouseGlow.style.left = '50%';
+        mouseGlow.style.top = '50%';
+      });
+
+      return () => {
+        heroSection.removeEventListener('mousemove', handleMouseMove);
+      };
+    }
+  }, []);
+
+  return (
+    <div className="font-body-md antialiased selection:bg-primary-container selection:text-white bg-grid min-h-screen">
+      {/* Hero Section */}
+      <section ref={heroRef} className="relative max-w-container-max mx-auto px-margin-safe py-20 lg:py-32 flex flex-col lg:flex-row items-center gap-12" id="hero-section">
+        <div ref={glowRef} id="mouse-glow" style={{ left: '50%', top: '50%' }}></div>
+        <div className="flex-1 z-10 relative">
+          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-outline-variant bg-surface-container-low mb-6">
+            <span className="w-2 h-2 rounded-full bg-primary-container animate-pulse"></span>
+            <span className="text-label-caps font-label-caps text-on-surface-variant uppercase tracking-widest">Configuration is the new compiler</span>
+          </div>
+          <h1 className="text-display-hero font-display-hero text-on-surface mb-6">
+            <div className="reveal-text-1">Define it.</div>
+            <div className="reveal-text-2">Generate it.</div>
+            <div className="reveal-text-3 text-primary-container">Ship it.</div>
+          </h1>
+          <p className="text-body-lg font-body-lg text-on-surface-variant mb-10 max-w-xl">
+            Describe your software architecture in JSON. ConfigFlow's generation engine orchestrates the architecture and generates a production-ready Next.js system in minutes.
+          </p>
+          <div className="flex flex-wrap items-center gap-4">
+            <Link href="/register" className="bg-primary-container hover:bg-orange-600 text-white px-6 py-3 rounded-md text-body-md font-bold transition-all shadow-[0_0_20px_rgba(255,107,0,0.5)] flex items-center gap-2 shine-effect">
+              Start Building Free
+              <span className="material-symbols-outlined text-sm">arrow_forward</span>
+            </Link>
+            <Link href="#how-it-works" className="glass-panel hover:bg-white/5 text-on-surface px-6 py-3 rounded-md text-body-md font-medium transition-colors flex items-center gap-2 shine-effect">
+              <span className="material-symbols-outlined text-sm">play_circle</span>
+              See How It Works
+            </Link>
+          </div>
+          <div className="mt-12 pt-8 border-t border-outline-hairline flex gap-8">
+            <div className="flex items-center gap-2">
+              <span className="material-symbols-outlined text-primary-container text-sm">memory</span>
+              <span className="text-label-tech font-label-tech text-on-surface-variant">Config-Driven Architecture</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="material-symbols-outlined text-primary-container text-sm">verified</span>
+              <span className="text-label-tech font-label-tech text-on-surface-variant">Production Ready</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Abstract Isometric Diagram */}
+        <div className="flex-1 relative w-full lg:h-[600px] flex items-center justify-center overflow-hidden">
+          <div className="absolute inset-0 bg-grid opacity-20"></div>
+          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-primary-container/5 blur-[120px] rounded-full pointer-events-none"></div>
+          <div className="absolute w-full h-[1px] bg-outline-variant/20 top-1/2"></div>
+          <div className="absolute h-full w-[1px] bg-outline-variant/20 left-1/2"></div>
+          <div className="absolute w-[400px] h-[400px] border border-outline-variant/10 rounded-full"></div>
+          <div className="absolute w-[250px] h-[250px] border border-outline-variant/20 rounded-full"></div>
+
+          <div className="relative z-10 flex items-start justify-between w-full max-w-2xl px-4 float-diagram pt-8">
+            <div className="absolute top-[64px] left-[5rem] right-[5rem] h-[2px] bg-outline-variant/30 -z-10"></div>
+            <div className="absolute top-[64px] left-[5rem] w-[calc(50%-7rem)] h-[2px] -z-10 overflow-hidden">
+              <div className="absolute top-0 h-full w-12 bg-gradient-to-r from-transparent via-primary-container to-primary-container animate-[circuitPulse1_3s_linear_infinite]"></div>
+            </div>
+            <div className="absolute top-[64px] right-[5rem] w-[calc(50%-7rem)] h-[2px] -z-10 overflow-hidden">
+              <div className="absolute top-0 h-full w-12 bg-gradient-to-r from-transparent via-primary-container to-primary-container animate-[circuitPulse2_3s_linear_infinite]"></div>
+            </div>
+
+            <div className="flex flex-col items-center gap-4 bg-background px-2 relative z-10 w-24">
+              <div className="w-16 h-16 rounded bg-surface-container border border-outline-variant flex items-center justify-center hover-lift cursor-default relative">
+                <span className="material-symbols-outlined text-on-surface-variant/60">chat_bubble_outline</span>
+              </div>
+              <span className="text-label-caps font-label-caps text-on-surface-variant/40 tracking-[0.2em] text-[9px] text-center">DEFINE</span>
+            </div>
+
+            <div className="flex flex-col items-center gap-4 bg-background px-2 relative z-10 w-32 -mt-4">
+              <div className="w-20 h-24 rounded border-2 border-primary-container/30 bg-surface-elevated flex flex-col items-center justify-center relative hover-lift cursor-default animate-[circuitEngine_3s_ease-in-out_infinite]">
+                <span className="material-symbols-outlined text-primary-container text-3xl mb-2">code</span>
+                <div className="w-10 h-1 bg-primary-container/30 rounded-full mb-1"></div>
+                <div className="w-6 h-1 bg-primary-container/30 rounded-full"></div>
+                <div className="absolute top-full left-1/2 -translate-x-1/2 w-[1px] h-24 bg-gradient-to-b from-primary-container to-transparent opacity-50"></div>
+              </div>
+              <span className="text-label-caps font-label-caps text-primary-container tracking-[0.3em] text-[10px] font-bold text-center mt-2">CONFIG</span>
+            </div>
+
+            <div className="flex flex-col items-center gap-4 bg-background px-2 relative z-10 w-24">
+              <div className="w-16 h-16 rounded bg-surface-container border border-tertiary-container/30 flex items-center justify-center hover-lift cursor-default shadow-[0_0_20px_rgba(0,174,120,0.1)] relative">
+                <span className="material-symbols-outlined text-tertiary-container">layers</span>
+              </div>
+              <span className="text-label-caps font-label-caps text-tertiary-container/80 tracking-[0.2em] text-[9px] text-center">PRODUCTION</span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Tech Stack Band */}
+      <section className="border-y border-outline-hairline bg-surface-container-low py-8">
+        <div className="max-w-container-max mx-auto px-margin-safe flex flex-wrap justify-center items-center gap-8 md:gap-16 opacity-60">
+          <div className="flex items-center gap-2 text-on-surface-variant">
+            <span className="material-symbols-outlined">language</span>
+            <span className="text-label-caps font-label-caps">NEXT.JS</span>
+          </div>
+          <div className="flex items-center gap-2 text-on-surface-variant">
+            <span className="material-symbols-outlined">code</span>
+            <span className="text-label-caps font-label-caps">REACT</span>
+          </div>
+          <div className="flex items-center gap-2 text-on-surface-variant">
+            <span className="material-symbols-outlined">api</span>
+            <span className="text-label-caps font-label-caps">EXPRESS</span>
+          </div>
+          <div className="flex items-center gap-2 text-on-surface-variant">
+            <span className="material-symbols-outlined">database</span>
+            <span className="text-label-caps font-label-caps">POSTGRESQL</span>
+          </div>
+          <div className="flex items-center gap-2 text-on-surface-variant">
+            <span className="material-symbols-outlined">schema</span>
+            <span className="text-label-caps font-label-caps">PRISMA</span>
+          </div>
+          <div className="flex items-center gap-2 text-on-surface-variant">
+            <span className="material-symbols-outlined">palette</span>
+            <span className="text-label-caps font-label-caps">TAILWIND CSS</span>
+          </div>
+        </div>
+      </section>
+
+      {/* Problem / Workflow Comparison */}
+      <section className="max-w-container-max mx-auto px-margin-safe py-20 border-t border-outline-hairline">
+        <div className="text-center mb-16">
+          <h2 className="text-label-caps font-label-caps text-primary-container tracking-widest mb-2">THE PROBLEM</h2>
+          <h3 className="text-headline-lg font-headline-lg text-on-surface mb-4">Stop writing boilerplate.</h3>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+
+          {/* Traditional */}
+          <div className="glass-panel p-8 rounded-xl border border-error-container/30">
+            <h4 className="text-headline-md font-headline-md text-on-surface mb-6 flex items-center gap-2">
+              <span className="material-symbols-outlined text-error">warning</span>
+              Traditional Development
+            </h4>
+            <div className="space-y-4">
+              <div className="flex justify-between items-center border-b border-outline-variant/30 pb-4">
+                <span className="text-on-surface-variant text-body-md">Timeline</span>
+                <span className="text-error font-label-tech">Weeks to Months</span>
+              </div>
+              <div className="flex justify-between items-center border-b border-outline-variant/30 pb-4">
+                <span className="text-on-surface-variant text-body-md">APIs</span>
+                <span className="text-error font-label-tech">Manual implementation</span>
+              </div>
+              <div className="flex justify-between items-center border-b border-outline-variant/30 pb-4">
+                <span className="text-on-surface-variant text-body-md">Database</span>
+                <span className="text-error font-label-tech">Manual schemas & migrations</span>
+              </div>
+              <div className="flex justify-between items-center">
+                <span className="text-on-surface-variant text-body-md">UI Components</span>
+                <span className="text-error font-label-tech">Manual wiring & state</span>
+              </div>
+            </div>
+          </div>
+
+          {/* ConfigFlow */}
+          <div className="glass-panel p-8 rounded-xl border border-primary-container/30 relative overflow-hidden">
+            <div className="absolute top-0 right-0 p-4 opacity-10">
+              <span className="material-symbols-outlined text-9xl text-primary-container">bolt</span>
+            </div>
+            <h4 className="text-headline-md font-headline-md text-on-surface mb-6 flex items-center gap-2 relative z-10">
+              <span className="material-symbols-outlined text-primary-container">check_circle</span>
+              ConfigFlow
+            </h4>
+            <div className="space-y-4 relative z-10">
+              <div className="flex justify-between items-center border-b border-outline-variant/30 pb-4">
+                <span className="text-on-surface-variant text-body-md">Timeline</span>
+                <span className="text-primary-container font-label-tech">Minutes</span>
+              </div>
+              <div className="flex justify-between items-center border-b border-outline-variant/30 pb-4">
+                <span className="text-on-surface-variant text-body-md">APIs</span>
+                <span className="text-primary-container font-label-tech">Auto-generated CRUD</span>
+              </div>
+              <div className="flex justify-between items-center border-b border-outline-variant/30 pb-4">
+                <span className="text-on-surface-variant text-body-md">Database</span>
+                <span className="text-primary-container font-label-tech">Auto-generated schemas</span>
+              </div>
+              <div className="flex justify-between items-center">
+                <span className="text-on-surface-variant text-body-md">UI Components</span>
+                <span className="text-primary-container font-label-tech">Auto-generated & wired</span>
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </section>
+
+      {/* Generate Section (Showpiece) */}
+      <section className="max-w-container-max mx-auto px-margin-safe py-20 border-t border-outline-hairline" id="how-it-works">
+        <div className="text-center mb-16">
+          <h2 className="text-label-caps font-label-caps text-primary-container tracking-widest mb-2">THE ENGINE</h2>
+          <h3 className="text-headline-lg font-headline-lg text-on-surface mb-4">A complete, production-ready architecture.</h3>
+          <p className="text-body-lg text-on-surface-variant max-w-2xl mx-auto">Every layer. Every file. Every configuration. Generated, connected, and ready to scale.</p>
+        </div>
+        <div className="glass-panel rounded-xl border border-outline-hairline p-1 lg:p-8">
+          <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
+
+            {/* JSON Input Left */}
+            <div className="lg:col-span-4 rounded bg-terminal-bg border border-outline-variant/50 p-4 font-code-base text-code-base h-full flex flex-col">
+              <div className="flex gap-2 mb-4 pb-2 border-b border-outline-variant/50">
+                <div className="w-3 h-3 rounded-full bg-error-red/50"></div>
+                <div className="w-3 h-3 rounded-full bg-warning-amber/50"></div>
+                <div className="w-3 h-3 rounded-full bg-tertiary/50"></div>
+                <span className="text-label-tech text-on-surface-variant ml-2">config.json</span>
+              </div>
+              <pre className="text-on-surface-variant overflow-x-auto hide-scroll text-sm">
+                {`{
+  "`}<span className="text-code-indigo">project</span>{`": "`}<span className="text-primary">SaaS CRM</span>{`",
+  "`}<span className="text-code-indigo">models</span>{`": [
+    {
+      "`}<span className="text-code-indigo">name</span>{`": "`}<span className="text-primary">Customer</span>{`",
+      "`}<span className="text-code-indigo">fields</span>{`": {
+        "`}<span className="text-code-indigo">email</span>{`": "`}<span className="text-primary">String @unique</span>{`",
+        "`}<span className="text-code-indigo">status</span>{`": "`}<span className="text-primary">Enum</span>{`"
+      }
+    }
+  ],
+  "`}<span className="text-code-indigo">features</span>{`": [
+    "`}<span className="text-primary">auth</span>{`",
+    "`}<span className="text-primary">api_routes</span>{`",
+    "`}<span className="text-primary">dashboard_ui</span>{`"
+  ]
+}`}
+              </pre>
+            </div>
+
+            {/* Engine Core Middle */}
+            <div className="lg:col-span-4 flex flex-col items-center justify-center relative py-12">
+              <div className="hidden lg:block absolute left-0 top-1/2 w-full h-[1px] bg-gradient-to-r from-outline-variant via-primary-container to-outline-variant -z-10"></div>
+              <div className="w-24 h-24 rounded-2xl bg-surface-elevated border border-primary-container shadow-[0_0_40px_rgba(255,107,0,0.2)] flex items-center justify-center relative z-10 hover-lift">
+                <span className="material-symbols-outlined text-4xl text-primary-container animate-pulse">settings_b_roll</span>
+              </div>
+              <div className="mt-4 text-label-caps font-label-caps text-primary tracking-widest text-center">
+                GENERATION ENGINE<br />
+                <span className="text-[9px] text-on-surface-variant">RESOLVING DEPENDENCIES</span>
+              </div>
+            </div>
+
+            {/* Outputs Right */}
+            <div className="lg:col-span-4 space-y-4">
+              <div className="glass-panel p-4 rounded border-l-2 border-l-tertiary-container flex items-center gap-4 hover-lift">
+                <span className="material-symbols-outlined text-tertiary-container">database</span>
+                <div>
+                  <div className="text-label-caps text-on-surface font-label-caps mb-1">DATABASE</div>
+                  <div className="text-code-base font-code-base text-on-surface-variant text-xs">schema.prisma generated</div>
+                </div>
+              </div>
+              <div className="glass-panel p-4 rounded border-l-2 border-l-secondary-container flex items-center gap-4 hover-lift">
+                <span className="material-symbols-outlined text-secondary-container">api</span>
+                <div>
+                  <div className="text-label-caps text-on-surface font-label-caps mb-1">BACKEND API</div>
+                  <div className="text-code-base font-code-base text-on-surface-variant text-xs">Next.js Route Handlers</div>
+                </div>
+              </div>
+              <div className="glass-panel p-4 rounded border-l-2 border-l-primary-container flex items-center gap-4 hover-lift">
+                <span className="material-symbols-outlined text-primary-container">web</span>
+                <div>
+                  <div className="text-label-caps text-on-surface font-label-caps mb-1">FRONTEND</div>
+                  <div className="text-code-base font-code-base text-on-surface-variant text-xs">React Server Components</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Features Grid */}
+      <section className="max-w-container-max mx-auto px-margin-safe py-20 border-t border-outline-hairline" id="features">
+        <div className="text-center mb-16">
+          <h2 className="text-label-caps font-label-caps text-primary-container tracking-widest mb-2">FEATURES</h2>
+          <h3 className="text-headline-lg font-headline-lg text-on-surface mb-4">Everything you need. Out of the box.</h3>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <div className="glass-panel p-6 rounded-xl border border-outline-variant/30 flex flex-col gap-4">
+            <span className="material-symbols-outlined text-3xl text-primary-container">table_chart</span>
+            <h4 className="text-body-lg font-bold text-on-surface">Dynamic Data Tables</h4>
+            <p className="text-sm text-on-surface-variant">Auto-generated tables with sorting, filtering, and pagination built-in.</p>
+          </div>
+          <div className="glass-panel p-6 rounded-xl border border-outline-variant/30 flex flex-col gap-4">
+            <span className="material-symbols-outlined text-3xl text-primary-container">format_align_left</span>
+            <h4 className="text-body-lg font-bold text-on-surface">Smart Forms</h4>
+            <p className="text-sm text-on-surface-variant">Client and server-side validation derived directly from your schema.</p>
+          </div>
+          <div className="glass-panel p-6 rounded-xl border border-outline-variant/30 flex flex-col gap-4">
+            <span className="material-symbols-outlined text-3xl text-primary-container">monitoring</span>
+            <h4 className="text-body-lg font-bold text-on-surface">Dashboards & Charts</h4>
+            <p className="text-sm text-on-surface-variant">Visual components wired to aggregate your data automatically.</p>
+          </div>
+          <div className="glass-panel p-6 rounded-xl border border-outline-variant/30 flex flex-col gap-4">
+            <span className="material-symbols-outlined text-3xl text-primary-container">admin_panel_settings</span>
+            <h4 className="text-body-lg font-bold text-on-surface">Built-in Auth</h4>
+            <p className="text-sm text-on-surface-variant">Secure user management, roles, and session handling ready to go.</p>
+          </div>
+          <div className="glass-panel p-6 rounded-xl border border-outline-variant/30 flex flex-col gap-4">
+            <span className="material-symbols-outlined text-3xl text-primary-container">offline_bolt</span>
+            <h4 className="text-body-lg font-bold text-on-surface">PWA Support</h4>
+            <p className="text-sm text-on-surface-variant">Offline caching and installability configured by default.</p>
+          </div>
+          <div className="glass-panel p-6 rounded-xl border border-outline-variant/30 flex flex-col gap-4">
+            <span className="material-symbols-outlined text-3xl text-primary-container">file_download</span>
+            <h4 className="text-body-lg font-bold text-on-surface">Standalone Export</h4>
+            <p className="text-sm text-on-surface-variant">Export clean, standard Next.js code. No vendor lock-in.</p>
+          </div>
+        </div>
+      </section>
+
+      {/* Use Cases Section */}
+      <section className="max-w-container-max mx-auto px-margin-safe py-20 border-t border-outline-hairline bg-surface-container-low/50" id="use-cases">
+        <div className="text-center mb-16">
+          <h2 className="text-label-caps font-label-caps text-primary-container tracking-widest mb-2">USE CASES</h2>
+          <h3 className="text-headline-lg font-headline-lg text-on-surface mb-4">Built for any domain.</h3>
+        </div>
+        <div className="flex flex-wrap justify-center gap-6">
+          <div className="glass-panel px-8 py-6 rounded-full border border-outline-variant/50 text-center min-w-[200px]">
+            <span className="text-body-md font-bold text-on-surface">Internal Tools</span>
+          </div>
+          <div className="glass-panel px-8 py-6 rounded-full border border-outline-variant/50 text-center min-w-[200px]">
+            <span className="text-body-md font-bold text-on-surface">Admin Panels</span>
+          </div>
+          <div className="glass-panel px-8 py-6 rounded-full border border-outline-variant/50 text-center min-w-[200px]">
+            <span className="text-body-md font-bold text-on-surface">CRMs</span>
+          </div>
+          <div className="glass-panel px-8 py-6 rounded-full border border-outline-variant/50 text-center min-w-[200px]">
+            <span className="text-body-md font-bold text-on-surface">Inventory Management</span>
+          </div>
+          <div className="glass-panel px-8 py-6 rounded-full border border-outline-variant/50 text-center min-w-[200px]">
+            <span className="text-body-md font-bold text-on-surface">MVPs</span>
+          </div>
+        </div>
+      </section>
+
+      {/* Final CTA */}
+      <section className="max-w-container-max mx-auto px-margin-safe py-32 text-center">
+        <h2 className="text-headline-lg font-headline-lg text-on-surface mb-6">Ready to build your next app in minutes?</h2>
+        <p className="text-body-md text-on-surface-variant mb-10">Join developers who are shipping faster with ConfigFlow.</p>
+        <Link href="/register" className="inline-block bg-primary-container hover:bg-orange-600 text-white px-8 py-4 rounded-md text-body-lg font-bold transition-all shadow-[0_0_20px_rgba(255,107,0,0.5)] shine-effect">
+          Start Building Now
+        </Link>
+      </section>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/client/src/app/(marketing)/support/page.tsx b/client/src/app/(marketing)/support/page.tsx
new file mode 100644
index 0000000..0bc4743
--- /dev/null
+++ b/client/src/app/(marketing)/support/page.tsx
@@ -0,0 +1,62 @@
+import Link from "next/link";
+
+export default function SupportPage() {
+  return (
+    <main className="flex-grow flex flex-col items-center justify-center p-gutter md:p-margin-safe max-w-container-max mx-auto w-full relative min-h-screen">
+      
+      {/* Hero Section */}
+      <section className="text-center mb-16 relative z-10 pt-20">
+        <h1 className="font-display-hero text-display-hero mb-6 text-on-surface">How can we help?</h1>
+        <p className="font-body-lg text-body-lg text-on-surface-variant max-w-2xl mx-auto">
+          Need help with JSON schemas, want to report a bug, or have a feature request? Select the appropriate channel below.
+        </p>
+      </section>
+
+      {/* Bento Grid */}
+      <section className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full max-w-5xl z-10 mb-20">
+        
+        {/* Card 1: GitHub */}
+        <div className="bento-card rounded-xl p-8 flex flex-col items-start gap-4 h-full min-h-[250px]">
+          <div className="text-primary glow-icon mb-2">
+            <span className="material-symbols-outlined text-4xl" style={{ fontVariationSettings: "'FILL' 1" }}>bug_report</span>
+          </div>
+          <h2 className="font-headline-md text-headline-md text-on-surface">Report a Bug or Contribute</h2>
+          <p className="font-body-md text-body-md text-on-surface-variant flex-grow">Help us improve the core engine. Submit issues or PRs directly to our repository.</p>
+          <a href="#" className="mt-4 border border-outline-hairline text-on-surface hover:border-primary hover:text-primary transition-colors px-6 py-2 rounded font-label-tech text-label-tech">Open GitHub Issue</a>
+        </div>
+
+        {/* Card 2: Roadmap */}
+        <div className="bento-card rounded-xl p-8 flex flex-col items-start gap-4 h-full min-h-[250px]">
+          <div className="text-primary glow-icon mb-2">
+            <span className="material-symbols-outlined text-4xl" style={{ fontVariationSettings: "'FILL' 1" }}>tips_and_updates</span>
+          </div>
+          <h2 className="font-headline-md text-headline-md text-on-surface">Request a Feature</h2>
+          <p className="font-body-md text-body-md text-on-surface-variant flex-grow">Have an idea for a new component or configuration option? Let us know.</p>
+          <a href="#" className="mt-4 border border-outline-hairline text-on-surface hover:border-primary hover:text-primary transition-colors px-6 py-2 rounded font-label-tech text-label-tech">View Roadmap</a>
+        </div>
+
+        {/* Card 3: Discord */}
+        <div className="bento-card rounded-xl p-8 flex flex-col items-start gap-4 h-full min-h-[250px]">
+          <div className="text-primary glow-icon mb-2">
+            <span className="material-symbols-outlined text-4xl" style={{ fontVariationSettings: "'FILL' 1" }}>forum</span>
+          </div>
+          <h2 className="font-headline-md text-headline-md text-on-surface">Developer Discord</h2>
+          <p className="font-body-md text-body-md text-on-surface-variant flex-grow">Join the community. Get real-time help, discuss schemas, and connect with other engineers.</p>
+          <a href="#" className="mt-4 bg-primary-container text-white px-6 py-2 rounded font-label-tech text-label-tech shadow-[0_0_15px_rgba(255,107,0,0.4)] hover:opacity-90 transition-opacity">Join Discord</a>
+        </div>
+
+        {/* Card 4: Direct Support */}
+        <div className="bento-card rounded-xl p-8 flex flex-col items-start gap-4 h-full min-h-[250px]">
+          <div className="text-primary glow-icon mb-2">
+            <span className="material-symbols-outlined text-4xl" style={{ fontVariationSettings: "'FILL' 1" }}>mail</span>
+          </div>
+          <h2 className="font-headline-md text-headline-md text-on-surface">Direct Support</h2>
+          <p className="font-body-md text-body-md text-on-surface-variant flex-grow">For private inquiries, billing issues, or enterprise support SLAs.</p>
+          <a href="#" className="mt-4 border border-outline-hairline text-on-surface hover:border-primary hover:text-primary transition-colors px-6 py-2 rounded font-label-tech text-label-tech">Contact Us</a>
+        </div>
+
+      </section>
+      
+    </main>
+  );
+}
\ No newline at end of file
diff --git a/client/src/app/apple-icon.png b/client/src/app/apple-icon.png
new file mode 100644
index 0000000..4ffb8c8
Binary files /dev/null and b/client/src/app/apple-icon.png differ
diff --git a/client/src/app/dashboard/page.tsx b/client/src/app/dashboard/page.tsx
deleted file mode 100644
index 2fd7216..0000000
--- a/client/src/app/dashboard/page.tsx
+++ /dev/null
@@ -1,298 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
-import { useAuth } from "@/lib/auth-context";
-import api from "@/lib/api";
-import { ArrowRight, Trash2, Clock, AppWindow, Plus, Bell } from "lucide-react";
-import Image from "next/image";
-
-import { useTranslation } from "@/i18n/useTranslation";
-import { toast } from "react-hot-toast";
-import LanguageSwitcher from "@/components/LanguageSwitcher";
-import NotificationSidebar from "@/components/NotificationSidebar";
-import ConfirmDialog from "@/components/ConfirmDialog";
-
-interface AppRecord {
-  id: string;
-  name: string;
-  createdAt: string;
-  updatedAt: string;
-}
-
-interface NotificationRecord {
-  id: string;
-  title: string;
-  message: string;
-  type: string;
-  isRead: boolean;
-  createdAt: string;
-}
-
-export default function DashboardPage() {
-  const { isAuthenticated, loading, logout, user, token } = useAuth();
-  const router = useRouter();
-  const [apps, setApps] = useState<AppRecord[]>([]);
-  const [isLoadingApps, setIsLoadingApps] = useState(true);
-  const [notifications, setNotifications] = useState<NotificationRecord[]>([]);
-  const [isLoadingNotifications, setIsLoadingNotifications] = useState(true);
-  const [isNotificationSidebarOpen, setIsNotificationSidebarOpen] = useState(false);
-  const [deleteAppId, setDeleteAppId] = useState<string | null>(null);
-
-  const { t } = useTranslation();
-
-  const unreadCount = notifications.filter(n => !n.isRead).length;
-
-  const deleteApp = async (id: string, e: React.MouseEvent) => {
-    e.stopPropagation();
-    setDeleteAppId(id);
-  };
-
-  const confirmDeleteApp = async (id: string) => {
-    try {
-      await api.delete(`/apps/${id}`);
-      setApps(prev => prev.filter(app => app.id !== id));
-      toast.success("Application deleted");
-      setDeleteAppId(null);
-    } catch {
-      toast.error(t('common.error'));
-      setDeleteAppId(null);
-    }
-  };
-
-  useEffect(() => {
-    if (!loading && !isAuthenticated) {
-      router.push("/login");
-    }
-  }, [loading, isAuthenticated, router]);
-
-  useEffect(() => {
-    if (isAuthenticated) {
-      const loadApps = async () => {
-        try {
-          const res = await api.get("/apps");
-          if (res.data.success) {
-            setApps(res.data.data);
-          }
-        } catch {
-          console.error("Failed to load apps");
-        } finally {
-          setIsLoadingApps(false);
-        }
-      };
-      loadApps();
-    }
-  }, [isAuthenticated]);
-
-  useEffect(() => {
-    if (isAuthenticated) {
-      const loadNotifications = async () => {
-        try {
-          const res = await api.get("/notifications");
-          if (res.data.success) {
-            setNotifications(res.data.data.notifications || []);
-          }
-        } catch {
-          console.error("Failed to load notifications");
-        } finally {
-          setIsLoadingNotifications(false);
-        }
-      };
-
-      loadNotifications();
-    }
-  }, [isAuthenticated, user?.email]);
-
-  // Real-time updates via Server-Sent Events (SSE)
-  useEffect(() => {
-    if (!isAuthenticated || !token) return;
-
-    const API_BASE = process.env.NEXT_PUBLIC_API_URL || "http://localhost:4000";
-    const sseUrl = `${API_BASE}/api/notifications/stream?token=${encodeURIComponent(token)}`;
-
-    const es = new EventSource(sseUrl);
-
-    const onNotification = (ev: MessageEvent) => {
-      try {
-        const payload = JSON.parse(ev.data);
-        // Prepend new notification if not already present
-        setNotifications((cur) => {
-          if (cur.some((n) => n.id === payload.id)) return cur;
-          return [payload, ...cur];
-        });
-      } catch (e) {
-        console.error("Failed to parse SSE notification", e);
-      }
-    };
-
-    es.addEventListener("notification", onNotification as EventListener);
-
-    es.addEventListener("error", (err) => {
-      // reconnect handled by EventSource in the browser; log for debugging
-      console.warn("SSE error", err);
-    });
-
-    return () => {
-      es.close();
-    };
-  }, [isAuthenticated, token]);
-
-  const markNotificationRead = async (notificationId: string) => {
-    try {
-      await api.patch(`/notifications/${notificationId}/read`);
-      setNotifications((current) => current.map((item) => (item.id === notificationId ? { ...item, isRead: true } : item)));
-    } catch {
-      toast.error(t('common.error'));
-    }
-  };
-
-  const markAllAsRead = async () => {
-    try {
-      const res = await api.post(`/notifications/mark-all-read`);
-      if (res.data.success) {
-        setNotifications((cur) => cur.map((n) => ({ ...n, isRead: true })));
-        toast.success("All notifications marked as read");
-      }
-    } catch (e) {
-      console.error("Failed to mark all read", e);
-      toast.error(t('common.error'));
-    }
-  };
-
-  if (loading || !isAuthenticated) {
-    return <div className="min-h-screen bg-[#0A0A0A]"></div>;
-  }
-
-  return (
-    <div className="min-h-screen bg-[#0A0A0A] text-white">
-      {/* Top Nav */}
-      <nav className="border-b border-white/10 bg-black/50 backdrop-blur-md sticky top-0 z-50 safe-area-inset-top">
-        <div className="max-w-7xl mx-auto px-4 md:px-6 h-14 md:h-16 flex items-center justify-between">
-          <div className="flex items-center gap-2 cursor-pointer min-w-0" onClick={() => router.push("/")}>
-            <Image src="/favicon.svg" alt="ConfigFlow" width={32} height={32} className="w-7 h-7 md:w-8 md:h-8 rounded-lg flex-shrink-0 object-contain" />
-            <span className="font-bold tracking-tight text-base md:text-lg truncate">ConfigFlow</span>
-          </div>
-          <div className="flex items-center gap-3 md:gap-6 flex-shrink-0">
-            <span className="text-xs md:text-sm text-white/50 truncate max-w-xs md:max-w-none">{user?.email}</span>
-            <LanguageSwitcher />
-            {/* Notification Bell */}
-            <button
-              onClick={() => setIsNotificationSidebarOpen(true)}
-              className="relative p-2 rounded-lg hover:bg-white/10 transition-colors group"
-            >
-              <Bell className="w-5 h-5 text-white/70 group-hover:text-white" />
-              {unreadCount > 0 && (
-                <span className="absolute top-0 right-0 flex items-center justify-center w-5 h-5 text-xs font-bold text-white bg-red-500 rounded-full">
-                  {unreadCount > 9 ? "9+" : unreadCount}
-                </span>
-              )}
-            </button>
-            <button
-              onClick={logout}
-              className="text-xs md:text-sm text-white/70 hover:text-white transition-colors whitespace-nowrap hidden sm:inline"
-            >
-              {t('nav.logout')}
-            </button>
-          </div>
-        </div>
-      </nav>
-
-      <main className="max-w-7xl mx-auto px-4 md:px-6 py-8 md:py-12 safe-area-inset-bottom">
-        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 md:gap-12 mb-8 md:mb-12">
-          <div className="min-w-0">
-            <h1 className="text-2xl md:text-3xl font-bold mb-2">{t('dashboard.title')}</h1>
-            <p className="text-sm md:text-base text-white/50">{t('dashboard.welcome')}</p>
-          </div>
-          <button
-            onClick={() => router.push("/")}
-            className="flex items-center justify-center gap-2 bg-white text-black px-4 md:px-5 py-2 md:py-2.5 rounded-full font-medium hover:bg-gray-200 transition-colors whitespace-nowrap text-sm md:text-base active:scale-95"
-          >
-            <Plus className="w-4 h-4" />
-            {t('home.newApplication')}
-          </button>
-        </div>
-
-        <section className="grid gap-6 mb-8 md:mb-10">
-          {isLoadingApps ? (
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-              {[1, 2, 3].map(i => (
-                <div key={i} className="h-48 bg-white/5 animate-pulse rounded-2xl border border-white/10"></div>
-              ))}
-            </div>
-          ) : apps.length === 0 ? (
-            <div className="text-center py-24 border border-dashed border-white/10 rounded-2xl">
-              <div className="w-16 h-16 bg-white/5 rounded-full flex items-center justify-center mx-auto mb-4">
-                <AppWindow className="w-8 h-8 text-white/40" />
-              </div>
-              <h2 className="text-xl font-medium mb-2">{t('common.noData')}</h2>
-              <p className="text-white/40 mb-6">{t('dashboard.recentTasks')}</p>
-              <button
-                onClick={() => router.push("/")}
-                className="inline-flex items-center gap-2 bg-indigo-600 hover:bg-indigo-500 text-white px-6 py-3 rounded-full font-medium transition-colors"
-              >
-                {t('home.newApplication')}
-              </button>
-            </div>
-          ) : (
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-              {apps.map(app => (
-                <div 
-                  key={app.id}
-                  onClick={() => router.push(`/builder/${app.id}`)}
-                  className="group relative bg-[#111111] border border-white/10 rounded-2xl p-6 hover:border-indigo-500/50 hover:bg-[#161616] transition-all cursor-pointer overflow-hidden"
-                >
-                  <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-indigo-500 to-purple-500 opacity-0 group-hover:opacity-100 transition-opacity"></div>
-                  
-                  <div className="flex items-start justify-between mb-4">
-                    <div className="w-12 h-12 bg-white/5 rounded-xl flex items-center justify-center text-indigo-400 group-hover:scale-110 transition-transform">
-                      <AppWindow className="w-6 h-6" />
-                    </div>
-                    <button 
-                      onClick={(e) => deleteApp(app.id, e)}
-                      className="p-2 text-white/20 hover:text-red-400 hover:bg-red-400/10 rounded-lg transition-colors"
-                    >
-                      <Trash2 className="w-4 h-4" />
-                    </button>
-                  </div>
-                  
-                  <h3 className="text-xl font-semibold mb-2">{app.name}</h3>
-                  
-                  <div className="flex items-center gap-2 text-xs text-white/40 mt-6">
-                    <Clock className="w-3 h-3" />
-                    <span>{t('common.created', 'Created')} {new Date(app.createdAt).toLocaleDateString()}</span>
-                  </div>
-                  
-                  <div className="absolute bottom-6 right-6 opacity-0 group-hover:opacity-100 transition-opacity translate-x-4 group-hover:translate-x-0">
-                    <ArrowRight className="w-5 h-5 text-indigo-400" />
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </section>
-      </main>
-
-      {/* Notification Sidebar */}
-      <NotificationSidebar
-        notifications={notifications}
-        isOpen={isNotificationSidebarOpen}
-        onClose={() => setIsNotificationSidebarOpen(false)}
-        onMarkRead={markNotificationRead}
-        onMarkAllRead={markAllAsRead}
-        isLoading={isLoadingNotifications}
-      />
-
-      {/* Delete App Confirmation Dialog */}
-      <ConfirmDialog
-        isOpen={deleteAppId !== null}
-        title="Delete Application"
-        message="This action cannot be undone. All data associated with this application will be permanently deleted."
-        confirmText="Delete"
-        cancelText="Cancel"
-        isDangerous={true}
-        onConfirm={() => deleteAppId && confirmDeleteApp(deleteAppId)}
-        onCancel={() => setDeleteAppId(null)}
-      />
-    </div>
-  );
-}
diff --git a/client/src/app/favicon.ico b/client/src/app/favicon.ico
index 718d6fe..f9c81ca 100644
Binary files a/client/src/app/favicon.ico and b/client/src/app/favicon.ico differ
diff --git a/client/src/app/globals.css b/client/src/app/globals.css
index 5462503..4d26b1f 100644
--- a/client/src/app/globals.css
+++ b/client/src/app/globals.css
@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+html {
+  scroll-behavior: smooth;
+}
+
 :root {
   --font-inter: "Inter", sans-serif;
 }
@@ -46,3 +50,143 @@ input[type="date"],
 input[type="datetime-local"] {
   color-scheme: dark;
 }
+
+/* Custom ConfigFlow Styles & Animations */
+.bg-grid {
+  background-size: 32px 32px;
+  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+}
+.glass-panel {
+  background: rgba(17, 17, 17, 0.6);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+.hide-scroll::-webkit-scrollbar { display: none; }
+.hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }
+
+@keyframes slideUpFade {
+  from { opacity: 0; transform: translateY(30px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes bloom {
+  0% { text-shadow: 0 0 0 rgba(255, 107, 0, 0); }
+  50% { text-shadow: 0 0 30px rgba(255, 107, 0, 0.8), 0 0 60px rgba(255, 107, 0, 0.5); }
+  100% { text-shadow: 0 0 15px rgba(255, 107, 0, 0.5); }
+}
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-15px); }
+}
+@keyframes enginePulse {
+  0%, 100% { transform: scale(1); box-shadow: 0 0 30px rgba(255,107,0,0.15); }
+  50% { transform: scale(1.08); box-shadow: 0 0 60px rgba(255,107,0,0.4); }
+}
+@keyframes circuitPulse1 {
+  0% { left: -20px; opacity: 0; }
+  5% { opacity: 1; }
+  40% { left: 100%; opacity: 1; }
+  45%, 100% { left: 100%; opacity: 0; }
+}
+@keyframes circuitPulse2 {
+  0%, 50% { left: -20px; opacity: 0; }
+  55% { opacity: 1; }
+  90% { left: 100%; opacity: 1; }
+  95%, 100% { left: 100%; opacity: 0; }
+}
+@keyframes circuitEngine {
+  0%, 35%, 65%, 100% { box-shadow: 0 0 20px rgba(255,107,0,0.1); border-color: rgba(255,107,0,0.3); transform: scale(1); }
+  45%, 55% { box-shadow: 0 0 50px rgba(255,107,0,0.7); border-color: rgba(255,107,0,1); transform: scale(1.05); }
+}
+
+.reveal-text-1 { animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }
+.reveal-text-2 { animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards; opacity: 0; }
+.reveal-text-3 { animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards, bloom 2s ease-out 0.8s forwards; opacity: 0; }
+.float-diagram { animation: float 6s ease-in-out infinite; }
+.hover-lift { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease, border-color 0.3s ease; }
+.hover-lift:hover { transform: translateY(-8px) scale(1.05); box-shadow: 0 15px 30px -5px rgba(255,107,0,0.4); border-color: rgba(255,107,0,0.6); z-index: 20; }
+.shine-effect { position: relative; overflow: hidden; }
+.shine-effect::after {
+  content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
+  background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent);
+  transform: skewX(-20deg); transition: all 0.6s;
+}
+.shine-effect:hover::after { left: 150%; }
+#mouse-glow {
+  position: absolute; width: 800px; height: 800px;
+  background: radial-gradient(circle, rgba(255,107,0,0.06) 0%, transparent 60%);
+  border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%);
+  z-index: 0; transition: left 0.2s cubic-bezier(0.2, 0, 0, 1), top 0.2s cubic-bezier(0.2, 0, 0, 1);
+}
+
+.glass-card {
+    background-color: rgba(17, 17, 17, 0.6);
+    backdrop-filter: blur(24px);
+    -webkit-backdrop-filter: blur(24px);
+}
+.glow-button {
+    box-shadow: 0 0 20px rgba(255, 107, 0, 0.4);
+    transition: all 0.2s ease-in-out;
+}
+.glow-button:hover {
+    box-shadow: 0 0 30px rgba(255, 107, 0, 0.6);
+    transform: translateY(-1px);
+}
+.input-field {
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+.input-field:focus {
+    box-shadow: 0 1px 0 0 #ff6b00;
+}
+
+.input-glow:focus {
+    box-shadow: 0 0 0 2px rgba(255, 107, 0, 0.5);
+    border-color: #ff6b00;
+}
+
+.bento-card {
+    background-color: #0F1115;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+.bento-card::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(circle at top right, rgba(255, 107, 0, 0.1), transparent 50%);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+.bento-card:hover {
+    border-color: rgba(255, 107, 0, 0.5);
+    box-shadow: 0 0 20px rgba(255, 107, 0, 0.1);
+}
+.bento-card:hover::before {
+    opacity: 1;
+}
+.glow-icon {
+    filter: drop-shadow(0 0 8px rgba(255, 107, 0, 0.5));
+}
+
+.glow-orange {
+    box-shadow: 0 0 12px rgba(255, 107, 0, 0.4);
+}
+.glow-orange-text {
+    text-shadow: 0 0 8px rgba(255, 107, 0, 0.6);
+}
+/* Custom scrollbar for editors */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+::-webkit-scrollbar-thumb {
+    background: rgba(255,255,255,0.1);
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(255,255,255,0.2);
+}
\ No newline at end of file
diff --git a/client/src/app/icon.png b/client/src/app/icon.png
new file mode 100644
index 0000000..a439045
Binary files /dev/null and b/client/src/app/icon.png differ
diff --git a/client/src/app/icon.svg b/client/src/app/icon.svg
new file mode 100644
index 0000000..d610dbd
--- /dev/null
+++ b/client/src/app/icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="1024" height="717" viewBox="0 0 1024 717"><metadata><rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"><rdf:Description><dc:creator>RealFaviconGenerator</dc:creator><dc:source>https://realfavicongenerator.net</dc:source></rdf:Description></rdf:RDF></metadata><image width="1024" height="717" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAALNCAYAAACxuxPTAAAQAElEQVR4AezdCZxtWVUf4HVedzNERFEZVIQAIiKgJo7gkEYjgga0I6MMoiJtTyC2IAqRRoKItoI926IyBEQZIsoPHFBARUFNRIKAiqIhktBBoyiCNF0nq3p8Qw13OMPe+3zvd8+rqnvP2Xutb93bvPuvR70j4RcBAgQIECBAgAABAgQIECDQukAIAJofsQYJECBAgAABAgQIECBAgEAIADwJCBAgQIAAAQIECBAgQIBA8wLZoL8BkAhuBAgQIECAAAECBAgQIECgZYHd3gQAuwoOAgQIECBAgAABAgQIECDQrsDVnQkArmbwGwECBAgQIECAAAECBAgQaFXgmr4EANc4+J0AAQIECBAgQIAAAQIECLQpcG1XAoBrIXwgQIAAAQIECBAgQIAAAQItClzXkwDgOgkfCRAgQIAAAQIECBAgQIBAewLXdyQAuJ7CJwQIECBAgAABAgQIECBAoDWBG/oRANxg4TMCBAgQIECAAAECBAgQINCWwFHdCACOwvApAQIECBAgQIAAAQIECBBoSeDoXgQAR2v4nAABAgQIECBAgAABAgQItCNwTCcCgGM4fEGAAAECBAgQIECAAAECBFoROLYPAcCxHr4iQIAAAQIECBAgQIAAAQJtCBzXhQDgOBBfEiBAgAABAgQIECBAgACBFgSO70EAcLyIrwkQIECAAAECBAgQIECAQP0CJ3QgADiBxB0ECBAgQIAAAQIECBAgQKB2gRPrFwCcaOIeAgQIECBAgAABAgQIECBQt8Ae1QsA9kBxFwECBAgQIECAAAECBAgQqFlgr9oFAHupuI8AAQIECBAgQIAAAQIECNQrsGflAoA9WdxJgAABAgQIECBAgAABAgRqFdi7bgHA3i7uJUCAAAECBAgQIECAAAECdQrsU7UAYB8YdxMgQIAAAQIECBAgQIAAgRoF9qtZALCfjPsJECBAgAABAgQIECBAgEB9AvtWLADYl8YDBAgQIECAAAECBAgQIECgNoH96xUA7G/jEQIECBAgQIAAAQIECBAgUJfAAdUKAA7A8RABAgQIECBAgAABAgQIEKhJ4KBaBQAH6XiMAAECBAgQIECAAAECBAjUI3BgpQKAA3k8SIAAAQIECBAgQIAAAQIEahE4uE4BwME+HiVAgAABAgQIECBAgAABAnUIHFKlAOAQIA8TIECAAAECBAgQIECAAIEaBA6rUQBwmJDHCRAgQIAAAQIECBAgQIBA+QKHVigAOJTICQQIECBAgAABAgQIECBAoHSBw+sTABxu5AwCBAgQIECAAAECBAgQIFC2wArVCQBWQHIKAQIECBAgQIAAAQIECBAoWWCV2gQAqyg5hwABAgQIECBAgAABAgQIlCuwUmUCgJWYnESAAAECBAgQIECAAAECBEoVWK0uAcBqTs4iQIAAAQIECBAgQIAAAQJlCqxYlQBgRSinESBAgAABAgQIECBAgACBEgVWrUkAsKqU8wgQIECAAAECBAgQIECAQHkCK1ckAFiZyokECBAgQIAAAQIECBAgQKA0gdXrEQCsbuVMAgQIECBAgAABAgQIECBQlsAa1QgA1sByKgECBAgQIECAAAECBAgQKElgnVoEAOtoOZcAAQIECBAgQIAAAQIECJQjsFYlAoC1uJxMgAABAgQIECBAgAABAgRKEVivDgHAel7OJkCAAAECBAgQIECAAAECZQisWYUAYE0wpxMgQIAAAQIECBAgQIAAgRIE1q1BALCumPMJECBAgAABAgQIECBAgMD8AmtXIABYm8wFBAgQIECAAAECBAgQIEBgboH19xcArG/mCgIECBAgQIAAAQIECBAgMK/ABrsLADZAcwkBAgQIECBAgAABAgQIEJhTYJO9BQCbqLmGAAECBAgQIECAAAECBAjMJ7DRzgKAjdhcRIAAAQIECBAgQIAAAQIE5hLYbF8BwGZuriJAgAABAgQIECBAgAABAvMIbLirAGBDOJcRIECAAAECBAgQIECAAIE5BDbdUwCwqZzrCBAgQIAAAQIECBAgQIDA9AIb7ygA2JjOhQQIECBAgAABAgQIECBAYGqBzfcTAGxu50oCBAgQIECAAAECBAgQIDCtwBa7CQC2wHMpAQIECBAgQIAAAQIECBCYUmCbvQQA2+i5lgABAgQIECBAgAABAgQITCew1U4CgK34XEyAAAECBAgQIECAAAECBKYS2G4fAcB2fq4mQIAAAQIECBAgQIAAAQLTCGy5iwBgS0CXEyBAgAABAgQIECBAgACBKQS23UMAsK2g6wkQIECAAAECBAgQIECAwPgCW+8gANia0AIECBAgQIAAAQIECBAgQGBsge3XFwBsb2gFAgQIECBAgAABAgQI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AgQItCdQTkcCgHJmoRICBAgQIECAAAECBAgQaE2goH4EAAUNQykECBAgQIAAAQIECBAg0JZASd0IAEqahloIECBAgAABAgQIECBAoCWBonoRABQ1DsUQIECAAAECBAgQIECAQDsCZXUiAChrHqohQIAAAQIECBAgQIAAgVYECutDAFDYQJRDgAABAgQIECBAgAABAm0IlNaFAKC0iaiHAAECBAgQIECAAAECBFoQKK4HAUBxI1EQAQIECBAgQIAAAQIECNQvUF4HAoDyZqIiAgQIECBAgAABAgQIEKhdoMD6BQAFDkVJBAgQIECAAAECBAgQIFC3QInVCwBKnIqaCBAgQIAAAQIECBAgQKBmgSJrFwAUORZFESBAgAABAgQIECBAgEC9AmVWLgAocy6qIkCAAAECBAgQIECAAIFaBQqtWwBQ6GCURYAAAQIECBAgQIAAAQJ1CpRatQCg1MmoiwABAgQIECBAgAABAgRqFCi2ZgFAsaNRGAECBAgQIECAAAECBAjUJ1BuxQKAcmejMgIECBAgQIAAAQIECBCoTaDgegUABQ9HaQQIECBAgAABAgQIECBQl0DJ1QoASp6O2ggQIECAAAECBAgQIECgJoGiaxUAFD0exREgQIAAAQIECBAgQIBAPQJlVyoAKHs+qiNAgAABAgQIECBAgACBWgQKr1MAUPiAlEeAAAECBAgQIECAAAECdQiU+VllJwAAEABJREFUXqUAoPQJqY8AAQIECBAgQIAAAQIEahAovkYBQPEjUiABAgQIECBAgAABAgQIlC9QfoUCgPJnpEICBAgQIECAAAECBAgQKF2ggvoEABUMSYkECBAgQIAAAQIECBAgULZADdUJAGqYkhoJECBAgAABAgQIECBAoGSBKmoTAFQxJkUSIECAAAECBAgQIECAQLkCdVQmAKhjTqokQIAAAQIECBAgQIAAgVIFKqlLAFDJoJRJgAABAgQIECBAgAABAmUK1FKVAKCWSamTAAECBAgQIECAAAECBEoUqKYmAUA1o1IoAQIECBAgQIAAAQIECJQnUE9FAoB6ZqVSAgQIECBAgAABAgQIEChNoKJ6BAAVDUupBAgQIECAAAECBAgQIFCWQE3VCABqmpZaCRAgQIAAAQIECBAgQKAkgapqEQBUNS7FEiBAgAABAgQIECBAgEA5AnVVIgCoa16qJUCAAAECBAgQIECAAIFSBCqrQwBQ2cCUS4AAAQIECBAgQIAAAQJlCNRWhQCgtomplwABAgQIECBAgAABAgRKEKiuBgFAdSNTMAECBAgQIECAAAECBAjML1BfBQKA+mamYgIECBAgQIAAAQIECBCYW6DC/QUAFQ5NyQQIECBAgAABAgQIECAwr0CNuwsAapyamgkQIECAAAECBAgQIEBgToEq9xYAVDk2RRMgQIAAAQIECBAgQIDAfAJ17iwAqHNuqiZAgAABAgQIECBAgACBuQQq3VcAUOnglE2AAAECBAgQIECAAAEC8wjUuqsAoNbJqZsAAQIECBAgQIAAAQIE5hCodk8BQLWjUzgBAgQIECBAgAABAgQITC9Q744CgHpnp3ICBAgQIECAAAECBAgQmFqg4v0EABUPT+kECBAgQIAAAQIECBAgMK1AzbsJAGqentoJECBAgAABAgQIECBAYEqBqvcSAFQ9PsUTIECAAAECBAgQIECAwHQCde8kAKh7fqonQIAAAQIECBAgQIAAgakEKt9HAFD5AJVPgAABAgQIECBAgAABAtMI1L6LAKD2CaqfAAECBAgQIECAAAECBKYQqH4PAUD1I9QAAQIECBAgQIAAAQIECIwvUP8OAoD6Z6gDAgQIECBAgAABAgQIEBhboIH1BQANDFELBAgQIECAAAECBAgQIDCuQAurCwBamKIeCBAgQIAAAQIECBAgQGBMgSbWFgA0MUZNECBAgAABAgQIECBAgMB4Am2sLABoY466IECAAAECBAgQIECAAIGxBBpZVwDQyCC1QYAAAQIECBAgQIAAAQLjCLSyqgCglUnqgwABAgQIECBAgAABAgTGEGhmTQFAM6PUCAECBAgQIECAAAECBAgML9DOigKAdmapEwIECBAgQIAAAQIECBAYWqCh9QQADQ1TKwQIECBAgAABAgQIECAwrEBLqwkAWpqmXggQIECAAAECBAgQIEBgSIGm1hIANDVOzRAgQIAAAQIECBAgQIDAcAJtrSQAaGueuiFAgAABAgQIECBAgACBoQQaW0cA0NhAtUOAAAECBAgQIECAAAECwwi0tooAoLWJ6ocAAQIECBAgQIAAAQIEhhBobg0BQHMj1RABAgQIECBAgAABAgQIbC/Q3goCgPZmqiMCBAgQIECAAAECBAgQ2FagwesFAA0OVUsECBAgQIAAAQIECBAg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BAgQIECAAAECBAgQIFCGgCrWFBAArAnmdAIECBAgQIAAAQIECBAoQUAN6woIANYVcz4BAgQIECBAgAABAgQIzC+ggrUFBABrk7mAAAECBAgQIECAAAECBOYWsP/6AgKA9c1cQYAAAQIECBAgQIAAAQLzCth9AwEBwAZoLiFAgAABAgQIECBAgACBOQXsvYmAAGATNdcQIECAAAECBAgQIECAwHwCdt5IQACwEZuLCBAgQIAAAQIECBAgQGAuAftuJiAA2MzNVQQIECBAgAABAgQIECAwj4BdNxQQAGwI5zICBAgQIECAAAECBAgQmEPAnpsKCAA2lXMdAQIECBAgQIAAAQIECEwvYMeNBQQAG9O5kAABAgQIECBAgAABAgSmFrDf5gICgM3tXEmAAAECBAgQIECAAAEC0wrYbQsBAcAWeC4lQIAAAQIECBAgQIAAgSkF7LWNgABgGz3XEiBAgAABAgQIECBAgMB0AnbaSkAAsBWfiwkQIECAAAECBAgQIEBgKgH7bCcgANjOz9UECBAgQIAAAQIECBAgMI2AXbYUEABsCehyAgQIECBAgAABAgQIEJhCwB7bCggAthV0PQECBAgQIECAAAECBAiML2CHrQUEAFsTWoAAAQIECBAgQIAAAQIExhaw/vYCAoDtDa1AgAABAgQIECBAgAABAuMKWH0AAQHAAIiWIECAAAECBAgQIECAAIExBaw9hIAAYAhFaxAgQIAAAQIECBAgQIDAeAJWHkRAADAIo0UIECBAgAABAgQIECBAYCwB6w4jIAAYxtEqBAgQIECAAAECBAgQIDCOgFUHEhAADARpGQIECBAgQIAAAQIECBAYQ8CaQwkIAIaStA4BAgQIECBAgAABAgQIDC9gxcEEBACDUVqIAAECBAgQIECAAAECBIYWsN5wAgKA4SytRIAAAQIECBAgQIAAAQLDClhtQAEBwICYliJAgAABAgQIECBAgACBIQWsNaSAAGBITWsRIECAAAECBAgQIECAwHACVhpUQAAwKKfFCBAgQIAAAQIECBAgQGAoAesMKyAAGNbTagQIECBAgAABAgQIECAwjIBVBhYQAAwMajkCBAgQIECAAAECBAgQGELAGkMLCACGFrUeAQIECBAgQKAcgdv3Z8WVju0Moou3lDNSlRBYkIBWBxcQAAxOakECBAgQIECAQFECJ2c1jojNDbo4KfwiQGByARsOL3Bk+CWtSIAAAQIECBAgQIAAAQIEthJw8QgCAoARUC1JgAABAgQIECBAgAABAtsIuHYMAQHAGKrWJECAAAECBAgQIECAAIHNBVw5ioAAYBRWixIgQIAAAQIECBAgQIDApgKuG0dAADCOq1UJECBAgAABAgQIECBAYDMBV40kIAAYCdayBAgQIECAAAECBAgQILCJgGvGEhAAjCVrXQIECBAgQIAAAQIECBBYX8AVowkIAEajtTABAgQIECBAgAABAgQIrCvg/PEEBADj2VqZAAECBAgQIECAAAECBNYTcPaIAgKAEXEtTYAAAQIECBAgQIAAAQLrCDh3TAEBwJi61iZAgAABAgQIECBAgACB1QWcOaqAAGBUXosTIECAAAECBAgQIECAwKoCzhtXQAAwrq/VCRAgQIAAAQIECBAgQGA1AWeNLCAAGBnY8gQIECBAgAABAgQIECCwioBzxhYQAIwtbH0CBAgQIECAAAECBAgQOFzAGaMLCABGJ7YBAQIECBAgQIAAAQIECBwm4PHxBQQA4xvbgQABAgQIECBAgAABAgQOFvDoBAICgAmQbUGAAAECBAgQIECAAAECBwl4bAoBAcAUyvYgQIAAAQIECMwj8PfRx3mOLQ124vLwiwCBcQWsPomAAGASZpsQIECAAAECBGYR+Ifukni6YzuDnJwAIBHcCIwpYO1pBAQA0zjbhQABAgQIECBAgAABAgT2FnDvRAICgImgbUOAAAECBAgQIECAAAECewm4byoBAcBU0vYhQIAAAQIECBAgQIAAgRMF3DOZgABgMmobESBAgAABAgQIECBAgMDxAr6eTkAAMJ21nQgQIECAAAECBAgQIEDgWAFfTSggAJgQ21YECBAgQIAAAQIECBAgcLSAz6cUEABMqW0vAgQIECBAgAABAgQIELhBwGeTCggAJuW2GQECBAgQIECAAAECBAhcJ+DjtAICgGm97UaAAAECBAgQIECAAAEC1wj4fWIBAcDE4LYjQIAAAQIECBAgQIAAgV0Bx9QCAoCpxe1HgAABAgQIECBAgAABAhEMJhcQAExObkMCBAgQIECAAAECBAgQIDC9gABgenM7EiBAgAABAgQIECBAYOkC+p9BQAAwA7otCRAgQIAAAQIECBAgsGwB3c8hIACYQ92eBAgQIECAAAECBAgQWLKA3mcR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HCbg8TYFBABtznUxXXU/HX/XXRTvye+KvqO7LN7uWM9ghCfKFWaw3gyu9ro4/iyfx+/L57EfgjnCk9KSBAgQIECAwNoCLmhUQADQ6GC1RYAAAQIECBAgQIAAgc0EXNWqgACg1cnqiwABAgQIECBAgAABApsIuKZZAQFAs6PVGAECBAgQIECAAAECBNYXcEW7AgKAdmerMwIECBAgQIAAAQIECKwr4PyGBQQADQ9XawQIECBAgAABAgQIEFhPwNktCwgAWp6u3ggQIECAAAECBAgQILCOgHObFhAAND1ezREgQIAAAQIECBAgQGB1AWe2LSAAaHu+uiNAgAABAgQIECBAgMCqwNbPYQAAEABJREFUAs5rXEAA0PiAtUeAAAECBAgQIECAAIHVBJzVuoAAoPUJ648AAQIECBAgQIAAAQKrCDineQEBQPMj1iABAgQIECBAgAABAgQOF3BG+wICgPZnrEMCBAgQIECAAAECBAgcJuDxBQgIABYwZC0SIECAAAECBAgQIEDgYAGPLkFAALCEKeuRAAECBAgQIECAAAECBwl4bBECAoBFjFmTBAgQIECAAAECBAgQ2F/AI8sQEAAsY866JECAAAECBAgQIECAwH4C7l+IgABgIYPWJgECBAgQIECAAAECBPYWcO9SBAQAS5m0PgkQIECAAAECBAgQILCXgPsWIyAAWMyoNUqAAAECBAgQIECAAIETBdyzHAEBwHJmrVMCBAgQIECAAAECBAgcL+DrBQkIABY0bK0SIECAAAECBAgQIEDgWAFfLUlAALCkaeuVAAECBAgQIECAAAECRwv4fFECAoBFjVuzBAgQIECAAAECBAgQuEHAZ8sSEAAsa966JUCAAAECBAgQIECAwHUCPi5MQACwsIFrlwABAgQIECBAgAABAtcI+H1pAgKApU1cvwQIECBAgAABAgQIENgVcCxOQACwuJFrmAABAgQIECBAgAABAhEMlicgAFjezHVMgAABAgQIECBAgAABAgsUEAAscOhaJkCAAAECBAgQIEBg6QL6X6KAAGCJU9czAQIECBAgQIAAAQLLFtD9IgUEAIscu6YJECBAgAABAgQIEFiygN6XKSAAWObcdU2AAAECBAgQIECAwHIFdL5QAQHAQgevbQIECBAgQIAAAQIEliqg76UKCACWOnl9EyBAgAABAgQIECCwTAFdL1ZAALDY0WucAAECBAgQIECAAIElCuh5uQICgOXOXucECBAgQIAAAQIECCxPQMcLFhAALHj4WidAgAABAgQIECBAYGkC+l2ygABgydPXOwECBAgQIECAAAECyxLQ7aIFBACLHr/mCRAgQIAAAQIECBBYkoBely0gAFj2/HVPgAABAgQIECBAgMByBHS6cAEBwMKfANonQIAAAQIECBAgQGApAvpcuoAAYOnPAP0TIECAAAECBAgQILAMAV0uXkAAsPinAAACBAgQIECAAAECBJYgoEcCAgDPAQIECBAgQIAAAQIECLQvoEMCIQDwJCBAgAABAgQIECBAgEDzAhokEAIATwICBAgQIECAAAECBAg0L6BBAingbwAkghsBAgQIECBAgAABAgRaFtAbgV0BAcCugoMAAQIECBAgQIAAAQLtCuiMwNUCAoCrGfxGgAABAgQIECBAgACBVgX0ReAaAQHANQ5+J0CAAAECBAgQIECAQJsCuiJwrYAA4FoIHwgQIECAAAECBAgQINCigJ4IXCcgALhOwkcCBAgQIECAAAECBAi0J6AjAtcLCACup/AJAQIECBAgQIAAAQIEWhPQD4EbBAQAN1j4jAABAgQIECBAgAABAm0J6IbAUQICgKMwfEqAAAECBAgQIECAAIGWBPRC4GgBAcDRGj4nQIAAAQIECBAgQIBAOwI6IXCMgADgGA5fECBAgAABAgQIECBAoBUBfRA4VkAAcKyHrwgQIECAAAECBAgQINCGgC4IHCcgADgOxJcECBAgQIAAAQIECBBoQUAPBI4XEAAcL+JrAgQIECBAgAABAgQI1C+gAwInCAgATiBxBwECBAgQIECAAAECBGoXUD+BEwUEACeauIcAAQIECBAgQIAAAQJ1C6iewB4CAoA9UNxFgAABAgQIECBAgACBmgXUTmAvAQHAXiruI0CAAAECBAgQIECAQL0CKiewp4AAYE8WdxIgQIAAAQIECBAgQKBWAXUT2FtAALC3i3sJECBAgAABAgQIECBQp4CqCewjIADYB8bdBAgQIECAAAECBAgQqFFAzQT2ExAA7CfjfgIECBAgQIAAAQIECNQnoGIC+woIAPal8QABAgQIECBAgAABAgRqE1Avgf0FBAD723iEAAECBAgQIECAAAECdQmolsABAgKAA3A8RIAAAQIECBAgQIAAgZoE1ErgIAEBwEE6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N7YDAQIECBAgQIAAAQIEDhbwKIEJBAQAEyDbggABAgQIECBAgAABAgcJeIzAFAICgCmU7UGAAAECBAgQIECAAIH9BTxCYBIBAcAkzDYhQIAAAQIECBAgQIDAfgLuJzCNgABgGme7ECBAgAABAgQIECBAYG8B9xKYSEAAMBG0bQgQIECAAAECBAgQILCXgPsITCUgAJhK2j4ECBAgQIAAAQIECBA4UcA9BCYTEABMRm0jAgQIECBAgAABAgQIHC/gawLTCQgAprO2EwECBAgQIECAAAECBI4V8BWBCQUEABNi24oAAQIECBAgQIAAAQJHC/icwJQCAoApte1FgAABAgQIECBAgACBGwR8RmBSAQHApNw2I0CAAAECBAgQIECAwHUCPhKYVkAAMK233QgQIECAAAECBAgQIHCNgN8JTCwgAJgY3HYECBAgQIAAAQIECBDYFXAQmFpAADC1uP0IECBAgAABAgQIECAQwYDA5AICgMnJbUiAAAECBAgQIECAAAECBKYXEABMb25HAgQIECBAgAABAgSWLqB/AjMICABmQLclAQIECBAgQIAAAQLLFtA9gTkEBABzqNuTAAECBAgQIECAAIElC+idwCwCAoBZ2G1KgAABAgQIECBAgMByBXROYB4BAcA87nYlQIAAAQIECBAgQGCpAvomMJOAAGAmeNsSIECAAAECBAgQILBMAV0TmEtAADCXvH0JECBAgAABAgQIEFiigJ4JzCYgAJiN3sYECBAgQIAAAQIECCxPQMcE5hMQAMxnb2cCBAgQIECAAAECBJYmoF8CMwoIAGbEtzUBAgQIECBAgAABAssS0C2BOQUEAHPq25sAAQIECBAgQIAAgSUJ6JXArAICgFn5bU6AAAECBAgQIECAwHIEdEpgXgEBwLz+didAgAABAgQIECBAYCkC+iQws4AAYOYB2J4AAQIECBAgQIAAgWUI6JLA3AICgLknYH8CBAgQIECAAAECBJYgoEcCswsIAGYfgQIIECBAgAABAgQIEGhfQKQqJfUAAAa8SURBVIcE5hcQAMw/AxUQIECAAAECBAgQINC6gP4IFCAgAChgCEogQIAAAQIECBAgQKBtAd0RKEFAAFDCFNRAgAABAgQIECBAgEDLAnojUISAAKCIMSiCAAECBAgQIECAAIF2BXRGoAwBAUAZc1AFAQIECBAgQIAAAQKtCuiLQCECAoBCBqEMAgQIECBAgAABAgTaFNAVgVIEBAClTEIdBAgQIECAAAECBAi0KKAnAsUICACKGYVCCBAgQIAAAQIECBBoT0BHBMoREACUMwuVECBAgAABAgQIECDQmoB+CBQkIAAoaBhKIUCAAAECBAgQIECgLQHdEChJQABQ0jTUQoAAAQIECBAgQIBASwJ6IVCUgACgqHEohgABAgQIECBAgACBdgR0QqAsAQFAWfNQDQECBAgQIECAAAECrQjog0BhAgKAwgaiHAIECBAgQIAAAQIE2hDQBYHSBAQApU1EPQQIECBAgAABAgQItCCgBwLFCQgAihuJgggQIECAAAECBAgQqF9ABwTKExAAlDcTFREgQIAAAQIECBAgULuA+gkUKCAAKHAoSiJAgAABAgQIECBAoG4B1RMoUUAAUOJU1ESAAAECBAgQIECAQM0CaidQpIAAoMixKIoAAQIECBAgQIAAgXoFVE6gTAEBQJlzURUBAgQIECBAgAABArUKqJtAoQICgEIHoywCBAgQIECAAAECBOoUUDWBUgUEAKVORl0ECBAgQIAAAQIECNQooGYCxQoIAIodjcIIECBAgAABAgQIEKhPQMUEyhUQAJQ7G5URIECAAAECBAgQIFCbgHoJFCwgACh4OEojQIAAAQIECBAgQKAuAdUSKFlAAFDydNRGgAABAgQIECBAgEBNAmolULSAAKDo8SiOAAECBAgQIECAAIF6BFRKoGwBAUDZ81EdAQIECBAgQIAAAQK1CKiTQOECAoDCB6Q8AgQIECBAgAABAgTqEFAlgdIFBAClT0h9BAgQIECAAAECBAjUIKBGAsULCACKH5ECCRAgQIAAAQIECBAoX0CFBMoXEACUPyMVEiBAgAABAgQIECBQuoD6CFQgIACoYEhKJECAAAECBAgQIECgbAHVEahBQABQw5TUSIAAAQIECBAgQIBAyQJqI1CFgACgijEpkgABAgQIECBAgACBcgVURqAOAQFAHXNSJQECBAgQIECAAAECpQqoi0AlAgKASgalTAIECBAgQIAAAQIEyhRQFYFaBAQAtUxKnQQIECBAgAABAgQIlCigJgLVCAgAqhmVQgkQIECAAAECBAgQKE9ARQTqERAA1DMrlRIgQIAAAQIECBAgUJqAeghUJCAAqGhYSiVAgAABAgQIECBAoCwB1RCoSUAAUNO01EqAAAECBAgQIECAQEkCaiFQlYAAoKpxKZYAAQIECBAgQIAAgXIEVEKgLgEBQF3zUi0BAgQIECBAgAABAqUIqINAZQICgMoGplwCBAgQIECAAAECBMoQUAWB2gQEALVNTL0ECBAgQIAAAQIECJQgoAYC1QkIAKobmYIJECBAgAABAgQIEJhfQAUE6hMQANQ3MxUTIECAAAECBAgQIDC3gP0JVCggAKhwaEomQIAAAQIECBAgQGBeAbsTqFFAAFDj1NRMgAABAgQIECBAgMCcAvYmUKWAAKDKsSmaAAECBAgQIECAAIH5BOxMoE4BAUCdc1M1AQIECBAgQIAAAQJzCdiXQKUCAoBKB6dsAgQIECBAgAABAgTmEbArgVoFBAC1Tk7dBAgQIECAAAECBAjMIWBPAtUKCACqHZ3CCRAgQIAAAQIECBCYXsCOBOoVEADUOzuVEyBAgAABAgQIECAwtYD9CFQsIACoeHhKJ0CAAAECBAgQIEBgWgG7EahZQABQ8/TUToAAAQIECBAgQIDAlAL2IlC1gACg6vEpngABAgQIECBAgACB6QTsRKBuAQFA3fNTPQECBAgQIECAAAECUwnYh0DlAgKAygeofAIECBAgQIAAAQIEphGwC4HaBQQAtU9Q/QQIECBAgAABAgQITCFgDwLVCwgAqh+hBggQIECAAAECBAgQGF/ADgTqFxAA1D9DHRAgQIAAAQIECBAgMLaA9Qk0ICAAaGCIWiBAgAABAgQIECBAYFwBqxNoQUAA0MIU9UCAAAECBAgQIECAwJgC1ibQhIAAoIkxaoIAAQIECBAgQIAAgfEErEygDQEBQBtz1AUBAgQIECBAgAABAmMJWJdAIwICgEYGqQ0CBAgQIECAAAECBMYRsCqBVgQEAK1MUh8ECBAgQIAAAQIECIwhYE0CzQj8fwAAAP//Mc0udwAAAAZJREFUAwBTEWYhDfDeGgAAAABJRU5ErkJggg=="></image></svg>
\ No newline at end of file
diff --git a/client/src/app/layout.tsx b/client/src/app/layout.tsx
index 732cffe..8208d85 100644
--- a/client/src/app/layout.tsx
+++ b/client/src/app/layout.tsx
@@ -60,6 +60,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       <head>
         <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
         <link rel="apple-touch-icon" href="/apple-touch-icon.svg" />
+        <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet" />
       </head>
       <body className={`${inter.variable} font-sans antialiased bg-gray-950 text-white`}>
         <Providers>
diff --git a/client/src/app/login/page.tsx b/client/src/app/login/page.tsx
deleted file mode 100644
index 5e21aca..0000000
--- a/client/src/app/login/page.tsx
+++ /dev/null
@@ -1,254 +0,0 @@
-"use client";
-
-import React, { useEffect, useState } from "react";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useAuth } from "@/lib/auth-context";
-import { Blocks, Loader2, AlertCircle, Mail } from "lucide-react";
-
-import { useTranslation } from "@/i18n/useTranslation";
-import LanguageSwitcher from "@/components/LanguageSwitcher";
-
-function GoogleLogo({ className = "w-4 h-4" }: { className?: string }) {
-  return (
-    <svg viewBox="0 0 24 24" className={className} aria-hidden="true">
-      <path fill="#EA4335" d="M12 10.2v3.9h5.4c-.2 1.2-.9 2.2-1.9 2.9l3 2.3c1.8-1.6 2.8-3.9 2.8-6.7 0-.7-.1-1.4-.2-2H12z" />
-      <path fill="#34A853" d="M12 22c2.6 0 4.8-.9 6.4-2.4l-3-2.3c-.8.6-2 .9-3.4.9-2.6 0-4.8-1.8-5.6-4.2H3.3v2.6C4.9 19.8 8.2 22 12 22z" />
-      <path fill="#4A90E2" d="M6.4 14c-.2-.6-.3-1.3-.3-2s.1-1.4.3-2V7.4H3.3A10 10 0 002 12c0 1.7.4 3.4 1.3 4.6L6.4 14z" />
-      <path fill="#FBBC05" d="M12 5.8c1.5 0 2.8.5 3.8 1.5l2.8-2.8C16.8 2.8 14.6 2 12 2 8.2 2 4.9 4.2 3.3 7.4L6.4 10c.8-2.4 3-4.2 5.6-4.2z" />
-    </svg>
-  );
-}
-
-function GitHubLogo({ className = "w-4 h-4" }: { className?: string }) {
-  return (
-    <svg viewBox="0 0 24 24" className={className} aria-hidden="true">
-      <path
-        fill="currentColor"
-        d="M12 .5C5.6.5.5 5.7.5 12.1c0 5.1 3.3 9.5 7.9 11.1.6.1.8-.2.8-.6v-2.2c-3.2.7-3.9-1.4-3.9-1.4-.5-1.4-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.9 1.3 1.9 1.3 1.1 1.9 2.9 1.3 3.6 1 .1-.8.4-1.3.8-1.6-2.5-.3-5.2-1.3-5.2-5.8 0-1.3.5-2.4 1.2-3.3-.1-.3-.5-1.6.1-3.2 0 0 1-.3 3.3 1.2a11.5 11.5 0 016 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.6.2 2.9.1 3.2.8.9 1.2 2 1.2 3.3 0 4.6-2.7 5.5-5.2 5.8.4.3.8 1 .8 2v3c0 .4.2.7.8.6a11.6 11.6 0 007.9-11.1C23.5 5.7 18.4.5 12 .5z"
-      />
-    </svg>
-  );
-}
-
-export default function LoginPage() {
-  const { login } = useAuth();
-  const router = useRouter();
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [error, setError] = useState<string | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [oauthLoading, setOauthLoading] = useState<"google" | "github" | null>(null);
-  const [unverifiedEmail, setUnverifiedEmail] = useState<string | null>(null);
-  const [resendLoading, setResendLoading] = useState(false);
-  const [resendSuccess, setResendSuccess] = useState(false);
-
-  const { t } = useTranslation();
-  const API_BASE = process.env.NEXT_PUBLIC_API_URL || "http://localhost:4000";
-
-  const startOAuth = async (provider: "google" | "github") => {
-    setError(null);
-    setOauthLoading(provider);
-
-    try {
-      const res = await fetch(`${API_BASE}/api/auth/${provider}/start?mode=json`);
-      const data = await res.json();
-
-      if (!res.ok || !data?.success || !data?.data?.url) {
-        throw new Error(data?.error || `${provider} sign in is not configured`);
-      }
-
-      window.location.href = data.data.url as string;
-    } catch (err: any) {
-      setError(err?.message || `${provider} sign in failed`);
-      setOauthLoading(null);
-    }
-  };
-
-  useEffect(() => {
-    const resetOAuthLoading = () => setOauthLoading(null);
-    const onVisibilityChange = () => {
-      if (document.visibilityState === "visible") {
-        resetOAuthLoading();
-      }
-    };
-
-    // If user returns from provider page (back/cancel), unlock OAuth buttons.
-    window.addEventListener("focus", resetOAuthLoading);
-    window.addEventListener("pageshow", resetOAuthLoading);
-    document.addEventListener("visibilitychange", onVisibilityChange);
-
-    return () => {
-      window.removeEventListener("focus", resetOAuthLoading);
-      window.removeEventListener("pageshow", resetOAuthLoading);
-      document.removeEventListener("visibilitychange", onVisibilityChange);
-    };
-  }, []);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError(null);
-    setUnverifiedEmail(null);
-    setResendSuccess(false);
-    setLoading(true);
-
-    try {
-      await login(email, password);
-      router.push("/dashboard");
-    } catch (err: any) {
-      const serverError: string = err.response?.data?.error || err.message || "Login failed";
-      setError(serverError);
-      // Detect unverified-account error (server returns 403)
-      if (
-        err.response?.status === 403 ||
-        /verify/i.test(serverError)
-      ) {
-        setUnverifiedEmail(email);
-      }
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const resendVerification = async () => {
-    if (!unverifiedEmail) return;
-    setResendLoading(true);
-    setResendSuccess(false);
-    setError(null);
-    try {
-      const res = await fetch(`${API_BASE}/api/auth/resend-verification`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ email: unverifiedEmail }),
-      });
-      const data = await res.json();
-      if (!res.ok || !data?.success) {
-        throw new Error(data?.error || "Unable to resend verification email");
-      }
-      setResendSuccess(true);
-    } catch (err: any) {
-      setError(err?.message || "Unable to resend verification email");
-    } finally {
-      setResendLoading(false);
-    }
-  };
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-950 px-4 sm:px-6 safe-area-inset-top safe-area-inset-bottom">
-      <div className="w-full max-w-sm">
-        {/* Logo */}
-        <div className="text-center mb-6 md:mb-8">
-          <div className="w-12 h-12 md:w-14 md:h-14 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg shadow-indigo-500/20 flex-shrink-0">
-            <Blocks className="w-6 h-6 md:w-7 md:h-7 text-white" />
-          </div>
-          <h1 className="text-xl md:text-2xl font-bold text-white">{t('auth.login')}</h1>
-          <p className="text-white/40 text-xs md:text-sm mt-1">{t('auth.signInDescription')}</p>
-          <div className="mt-4 flex justify-center">
-            <LanguageSwitcher />
-          </div>
-        </div>
-
-        <form onSubmit={handleSubmit} className="space-y-3 md:space-y-4">
-          {error && (
-            <div className="rounded-lg border border-red-500/30 bg-red-500/10 p-3 text-xs md:text-sm">
-              <div className="flex items-center gap-2 text-red-400">
-                <AlertCircle className="w-4 h-4 flex-shrink-0" />
-                {error}
-              </div>
-
-              {/* Unverified account — offer resend inline */}
-              {unverifiedEmail && !resendSuccess && (
-                <button
-                  type="button"
-                  onClick={resendVerification}
-                  disabled={resendLoading}
-                  className="mt-3 inline-flex w-full items-center justify-center gap-2 rounded-lg bg-white px-4 py-2 text-sm font-semibold text-gray-900 transition-colors hover:bg-amber-50 disabled:cursor-not-allowed disabled:opacity-60"
-                >
-                  <Mail className="h-4 w-4" />
-                  {resendLoading ? "Sending…" : "Resend verification email"}
-                </button>
-              )}
-            </div>
-          )}
-
-          {/* Resend success confirmation */}
-          {resendSuccess && (
-            <div className="flex items-start gap-2 rounded-lg border border-emerald-500/30 bg-emerald-500/10 p-3 text-xs md:text-sm text-emerald-300">
-              <Mail className="mt-0.5 h-4 w-4 flex-shrink-0" />
-              <span>Verification email sent to <strong>{unverifiedEmail}</strong>. Check your inbox and click the link to activate your account.</span>
-            </div>
-          )}
-
-          <div>
-            <label className="block text-xs md:text-sm font-medium text-white/60 mb-1 md:mb-1.5">{t('auth.email')}</label>
-            <input
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              required
-              className="w-full bg-white/5 border border-white/10 rounded-lg px-3 md:px-4 py-2 md:py-2.5 text-white placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 text-sm md:text-base"
-              placeholder="you@example.com"
-            />
-          </div>
-
-          <div>
-            <label className="block text-xs md:text-sm font-medium text-white/60 mb-1 md:mb-1.5">{t('auth.password')}</label>
-            <input
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              required
-              minLength={6}
-              className="w-full bg-white/5 border border-white/10 rounded-lg px-3 md:px-4 py-2 md:py-2.5 text-white placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 text-sm md:text-base"
-              placeholder="••••••••"
-            />
-          </div>
-
-          <button
-            type="submit"
-            disabled={loading}
-            className="w-full py-2 md:py-2.5 bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 rounded-lg text-white font-medium transition-colors flex items-center justify-center gap-2 text-sm md:text-base active:scale-95"
-          >
-            {loading && <Loader2 className="w-4 h-4 animate-spin" />}
-            {t('auth.login')}
-          </button>
-        </form>
-
-        <div className="my-4 flex items-center gap-3">
-          <div className="h-px flex-1 bg-white/10" />
-          <span className="text-xs text-white/40">{t("auth.orContinueWith", "Or continue with")}</span>
-          <div className="h-px flex-1 bg-white/10" />
-        </div>
-
-        <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
-          <button
-            type="button"
-            disabled={!!oauthLoading}
-            onClick={() => startOAuth("google")}
-            className="w-full py-2 md:py-2.5 bg-white/5 hover:bg-white/10 disabled:opacity-50 border border-white/10 rounded-lg text-white font-medium transition-colors flex items-center justify-center gap-2 text-sm md:text-base"
-          >
-            {oauthLoading === "google" ? <Loader2 className="w-4 h-4 animate-spin" /> : <GoogleLogo className="w-4 h-4" />}
-            {t("auth.continueWithGoogle", "Google")}
-          </button>
-
-          <button
-            type="button"
-            disabled={!!oauthLoading}
-            onClick={() => startOAuth("github")}
-            className="w-full py-2 md:py-2.5 bg-white/5 hover:bg-white/10 disabled:opacity-50 border border-white/10 rounded-lg text-white font-medium transition-colors flex items-center justify-center gap-2 text-sm md:text-base"
-          >
-            {oauthLoading === "github" ? <Loader2 className="w-4 h-4 animate-spin" /> : <GitHubLogo className="w-4 h-4" />}
-            {t("auth.continueWithGithub", "GitHub")}
-          </button>
-        </div>
-
-        <p className="text-center text-xs md:text-sm text-white/40 mt-6 md:mt-8">
-          {t('auth.noAccount')}{" "}
-          <Link href="/register" className="text-indigo-400 hover:text-indigo-300 font-medium">
-            {t('auth.signup')}
-          </Link>
-        </p>
-      </div>
-    </div>
-  );
-}
diff --git a/client/src/app/manifest.ts b/client/src/app/manifest.ts
index 20982ac..15e5ae0 100644
--- a/client/src/app/manifest.ts
+++ b/client/src/app/manifest.ts
@@ -10,31 +10,31 @@ export default function manifest(): MetadataRoute.Manifest {
     display: "standalone",
     orientation: "portrait-primary",
     background_color: "#0a0a0a",
-    theme_color: "#6366f1",
+    theme_color: "#ff6b00",
     categories: ["productivity", "utilities"],
     icons: [
       {
-        src: "/icon-192.svg",
+        src: "/icon-192.png",
         sizes: "192x192",
-        type: "image/svg+xml",
+        type: "image/png",
         purpose: "any",
       },
       {
-        src: "/icon-512.svg",
+        src: "/icon-512.png",
         sizes: "512x512",
-        type: "image/svg+xml",
+        type: "image/png",
         purpose: "any",
       },
       {
-        src: "/icon-maskable-192.svg",
+        src: "/icon-maskable-192.png",
         sizes: "192x192",
-        type: "image/svg+xml",
+        type: "image/png",
         purpose: "maskable",
       },
       {
-        src: "/icon-maskable-512.svg",
+        src: "/icon-maskable-512.png",
         sizes: "512x512",
-        type: "image/svg+xml",
+        type: "image/png",
         purpose: "maskable",
       },
     ],
diff --git a/client/src/app/page.tsx b/client/src/app/page.tsx
deleted file mode 100644
index 6e1c488..0000000
--- a/client/src/app/page.tsx
+++ /dev/null
@@ -1,274 +0,0 @@
-"use client";
-
-import { useState, useEffect, useCallback } from "react";
-import { useRouter } from "next/navigation";
-import Image from "next/image";
-import { useAuth } from "@/lib/auth-context";
-import { ArrowRight, Code2, Database, LayoutTemplate, Zap } from "lucide-react";
-import api from "@/lib/api";
-
-import { useTranslation } from "@/i18n/useTranslation";
-import LanguageSwitcher from "@/components/LanguageSwitcher";
-import PwaRegister from "@/components/PwaRegister";
-import { toast } from "react-hot-toast";
-const SAMPLE_CONFIG = {
-  "app": {
-    "name": "Task Manager",
-    "description": "Personal task tracking app",
-    "theme": { "primaryColor": "#6366f1", "mode": "light" },
-    "auth": { "enabled": true }
-  },
-  "entities": {
-    "task": {
-      "userScoped": true,
-      "displayField": "title",
-      "fields": {
-        "title":       { "type": "string", "required": true, "label": "Task Title" },
-        "description": { "type": "text", "label": "Description" },
-        "status":      { "type": "enum", "options": ["todo", "in_progress", "done"], "default": "todo", "label": "Status" },
-        "priority":    { "type": "number", "min": 1, "max": 5, "default": 3, "label": "Priority" },
-        "dueDate":     { "type": "date", "label": "Due Date" },
-        "isUrgent":    { "type": "boolean", "default": false, "label": "Urgent?" }
-      }
-    }
-  },
-  "pages": [
-    {
-      "type": "table", "name": "All Tasks", "path": "/tasks",
-      "entity": "task",
-      "columns": ["title", "status", "priority", "dueDate", "isUrgent"],
-      "actions": ["create", "edit", "delete"],
-      "filters": ["status", "priority"],
-      "searchable": true,
-      "pageSize": 10
-    },
-    {
-      "type": "form", "name": "New Task", "path": "/tasks/new",
-      "entity": "task",
-      "fields": ["title", "description", "status", "priority", "dueDate", "isUrgent"]
-    },
-    {
-      "type": "dashboard", "name": "Dashboard", "path": "/dashboard",
-      "widgets": [
-        { "type": "stat", "label": "Total Tasks", "entity": "task", "operation": "count" },
-        { "type": "stat", "label": "Avg Priority", "entity": "task", "operation": "avg", "field": "priority" },
-        { "type": "chart", "label": "Tasks by Status", "entity": "task", "groupBy": "status", "chartType": "pie" },
-        { "type": "list", "label": "Recent Tasks", "entity": "task" }
-      ]
-    }
-  ]
-};
-
-export default function HomePage() {
-  const { isAuthenticated, loading } = useAuth();
-  const router = useRouter();
-  const [jsonInput, setJsonInput] = useState(JSON.stringify(SAMPLE_CONFIG, null, 2));
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [error, setError] = useState("");
-
-  const { t, direction } = useTranslation();
-  const handleGenerate = useCallback(async (configString: string) => {
-    try {
-      setIsGenerating(true);
-      setError("");
-      const configJson = JSON.parse(configString);
-
-      const response = await api.post("/apps", configJson);
-      if (response.data.success) {
-        toast.success("Application created");
-        router.push(`/builder/${response.data.data.id}`);
-      }
-    } catch (err: unknown) {
-      let message = "Invalid JSON or server error";
-      if (typeof err === "object" && err !== null) {
-        const e = err as { response?: { data?: { error?: unknown } }; message?: unknown };
-        if (typeof e.response?.data?.error === "string") {
-          message = e.response!.data!.error as string;
-        } else if (typeof e.message === "string") {
-          message = e.message;
-        }
-      } else if (typeof err === "string") {
-        message = err;
-      }
-      setError(message);
-    } finally {
-      setIsGenerating(false);
-    }
-  }, [router]);
-
-  useEffect(() => {
-    // If returning from login with a pending config, generate it
-    const pendingConfig = localStorage.getItem("pending_app_config");
-    if (isAuthenticated && pendingConfig) {
-      localStorage.removeItem("pending_app_config");
-      // defer to avoid calling setState synchronously during rendering
-      setTimeout(() => handleGenerate(pendingConfig), 0);
-    }
-  }, [isAuthenticated, handleGenerate]);
-
-  useEffect(() => {
-    if (typeof window !== "undefined") {
-      const searchParams = new URLSearchParams(window.location.search);
-      const sharedText = searchParams.get("text") || searchParams.get("title");
-      const sharedUrl = searchParams.get("url");
-
-      let contentToParse = sharedText || "";
-      if (sharedUrl && !contentToParse.includes(sharedUrl)) {
-        contentToParse = contentToParse ? `${contentToParse}\n${sharedUrl}` : sharedUrl;
-      }
-
-      if (contentToParse) {
-        try {
-          const trimmed = contentToParse.trim();
-          if (trimmed.startsWith("{") && trimmed.endsWith("}")) {
-            const parsed = JSON.parse(trimmed);
-            setJsonInput(JSON.stringify(parsed, null, 2));
-            toast.success("Imported shared configuration!");
-            
-            // Clean up query string from URL
-            const cleanUrl = window.location.pathname;
-            window.history.replaceState({}, document.title, cleanUrl);
-          }
-        } catch (e) {
-          // not valid JSON
-        }
-      }
-    }
-  }, []);
-
-  const handleGenerateClick = () => {
-    if (!isAuthenticated) {
-      localStorage.setItem("pending_app_config", jsonInput);
-      router.push("/login?redirect=generate");
-      return;
-    }
-    handleGenerate(jsonInput);
-  };
-
-  return (
-    <div className="min-h-screen bg-[#0A0A0A] text-white selection:bg-indigo-500/30 font-sans" dir={direction === "rtl" ? "ltr" : undefined}>
-      <PwaRegister />
-      {/* Navigation */}
-      <nav className="border-b border-white/10 bg-black/50 backdrop-blur-md fixed top-0 w-full z-50 safe-area-inset-top">
-        <div className="max-w-7xl mx-auto px-4 md:px-6 h-14 md:h-16 flex items-center justify-between">
-          <div className="flex items-center gap-2 min-w-0">
-            <Image src="/favicon.svg" alt="ConfigFlow" width={32} height={32} className="w-7 h-7 md:w-8 md:h-8 rounded-lg flex-shrink-0 object-contain" />
-            <span className="font-bold tracking-tight text-base md:text-lg truncate">ConfigFlow</span>
-          </div>
-          <div className="flex items-center gap-2 md:gap-4 flex-shrink-0">
-            {loading ? null : isAuthenticated ? (
-              <button
-                onClick={() => router.push("/dashboard")}
-                className="text-xs md:text-sm font-medium hover:text-indigo-400 transition-colors whitespace-nowrap"
-              >
-                {t('nav.dashboard')}
-              </button>
-            ) : (
-              <>
-                <button
-                  onClick={() => router.push("/login")}
-                  className="text-xs md:text-sm font-medium text-white/70 hover:text-white transition-colors whitespace-nowrap"
-                >
-                  {t('auth.login')}
-                </button>
-                <button
-                  onClick={() => router.push("/register")}
-                  className="text-xs md:text-sm font-medium bg-white text-black px-3 md:px-4 py-1.5 md:py-2 rounded-full hover:bg-gray-200 transition-colors whitespace-nowrap"
-                >
-                  {t('auth.signup')}
-                </button>
-              </>
-            )}
-                      <LanguageSwitcher />
-          </div>
-        </div>
-      </nav>
-
-      {/* Hero Section */}
-      <main className="pt-20 md:pt-32 pb-12 md:pb-16 px-4 md:px-6 safe-area-inset-bottom">
-        <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-8 md:gap-16 items-center">
-          
-          {/* Left: Copy */}
-          <div className="order-1 lg:order-1">
-            <div className={`inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-xs md:text-sm text-indigo-300 mb-4 md:mb-6 ${direction === "rtl" ? "justify-end text-right self-start" : ""}`}>
-              <Zap className="w-4 h-4 flex-shrink-0" />
-              <span className="truncate">{t('header.tagline')}</span>
-            </div>
-            <h1 className={`max-w-2xl text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black tracking-tight leading-[0.95] mb-4 md:mb-6 ${direction === "rtl" ? "text-right" : ""}`}>
-              <span className="block text-white">{t('home.title')}</span>
-              <span className="block text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400 mt-2">
-                {t('home.subtitle')}
-              </span>
-            </h1>
-            <p className={`max-w-xl text-base sm:text-lg md:text-xl text-white/60 mb-6 md:mb-8 leading-relaxed ${direction === "rtl" ? "text-right" : ""}`}>
-              {t('header.description')}
-            </p>
-            
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 md:gap-6 mb-6 md:mb-8">
-              <Feature rtl={direction === "rtl"} icon={<Database />} title={t('home.featureDatabase')} desc={t('home.featureDatabaseDesc')} />
-              <Feature rtl={direction === "rtl"} icon={<LayoutTemplate />} title={t('home.featureNext')} desc={t('home.featureNextDesc')} />
-              <Feature rtl={direction === "rtl"} icon={<Code2 />} title={t('home.featureExport')} desc={t('home.featureExportDesc')} />
-            </div>
-          </div>
-
-          {/* Right: The Prompt Box (JSON Editor) */}
-          <div className="relative group order-2 lg:order-2 mb-8 lg:mb-0">
-            <div className="absolute -inset-1 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 rounded-2xl blur opacity-25 group-hover:opacity-40 transition duration-1000"></div>
-            <div className="relative bg-[#111111] border border-white/10 rounded-xl md:rounded-2xl shadow-2xl overflow-hidden flex flex-col h-80 sm:h-96 md:h-[600px]">
-              
-              {/* Editor Header */}
-              <div className="h-10 md:h-12 bg-black/40 border-b border-white/5 flex items-center justify-between px-3 md:px-4 flex-shrink-0">
-                <div className="flex gap-2">
-                  <div className="w-2 h-2 md:w-3 md:h-3 rounded-full bg-red-500/50"></div>
-                  <div className="w-2 h-2 md:w-3 md:h-3 rounded-full bg-yellow-500/50"></div>
-                  <div className="w-2 h-2 md:w-3 md:h-3 rounded-full bg-green-500/50"></div>
-                </div>
-                <div className="text-xs text-white/40 font-mono">app-config.json</div>
-                <div className="w-8 md:w-10"></div>
-              </div>
-
-              {/* Editor Body */}
-              <div className="flex-1 p-0 relative overflow-hidden">
-                <textarea
-                  value={jsonInput}
-                  onChange={(e) => setJsonInput(e.target.value)}
-                  className="w-full h-full bg-transparent text-xs sm:text-sm md:text-sm font-mono text-indigo-200 p-3 md:p-6 focus:outline-none resize-none leading-relaxed"
-                  spellCheck={false}
-                />
-              </div>
-
-              {/* Editor Footer / Action */}
-              <div className="p-3 md:p-4 bg-black/40 border-t border-white/5 flex-shrink-0">
-                {error && <div className="text-red-400 text-xs md:text-sm mb-2 md:mb-3 px-2 truncate">{error}</div>}
-                <button
-                  onClick={handleGenerateClick}
-                  disabled={isGenerating}
-                  className="w-full flex items-center justify-center gap-2 bg-indigo-600 hover:bg-indigo-500 active:scale-95 text-white font-medium py-2.5 md:py-4 px-4 md:px-6 rounded-lg md:rounded-xl transition-all disabled:opacity-50 text-sm md:text-base"
-                >
-                  {isGenerating ? t('common.loading') : t('home.newApplication')}
-                  {!isGenerating && <ArrowRight className="w-4 h-4 md:w-5 md:h-5" />}
-                </button>
-              </div>
-              
-            </div>
-          </div>
-
-        </div>
-      </main>
-    </div>
-  );
-}
-
-function Feature({ rtl, icon, title, desc }: { rtl?: boolean; icon: React.ReactNode; title: string; desc: string }) {
-  return (
-    <div className="flex items-start gap-3">
-      <div className="p-2 rounded-lg bg-white/5 text-indigo-400">
-        {icon}
-      </div>
-      <div>
-        <h3 className={`font-medium text-white ${rtl ? "text-right" : ""}`}>{title}</h3>
-        <p className={`text-sm text-white/50 ${rtl ? "text-right" : ""}`}>{desc}</p>
-      </div>
-    </div>
-  );
-}
diff --git a/client/src/app/register/page.tsx b/client/src/app/register/page.tsx
deleted file mode 100644
index cfad52c..0000000
--- a/client/src/app/register/page.tsx
+++ /dev/null
@@ -1,377 +0,0 @@
-"use client";
-
-import React, { useEffect, useState } from "react";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useAuth } from "@/lib/auth-context";
-import { Blocks, Loader2, AlertCircle, CheckCircle2, Mail, ArrowLeft } from "lucide-react";
-
-import { useTranslation } from "@/i18n/useTranslation";
-import LanguageSwitcher from "@/components/LanguageSwitcher";
-
-function GoogleLogo({ className = "w-4 h-4" }: { className?: string }) {
-  return (
-    <svg viewBox="0 0 24 24" className={className} aria-hidden="true">
-      <path fill="#EA4335" d="M12 10.2v3.9h5.4c-.2 1.2-.9 2.2-1.9 2.9l3 2.3c1.8-1.6 2.8-3.9 2.8-6.7 0-.7-.1-1.4-.2-2H12z" />
-      <path fill="#34A853" d="M12 22c2.6 0 4.8-.9 6.4-2.4l-3-2.3c-.8.6-2 .9-3.4.9-2.6 0-4.8-1.8-5.6-4.2H3.3v2.6C4.9 19.8 8.2 22 12 22z" />
-      <path fill="#4A90E2" d="M6.4 14c-.2-.6-.3-1.3-.3-2s.1-1.4.3-2V7.4H3.3A10 10 0 002 12c0 1.7.4 3.4 1.3 4.6L6.4 14z" />
-      <path fill="#FBBC05" d="M12 5.8c1.5 0 2.8.5 3.8 1.5l2.8-2.8C16.8 2.8 14.6 2 12 2 8.2 2 4.9 4.2 3.3 7.4L6.4 10c.8-2.4 3-4.2 5.6-4.2z" />
-    </svg>
-  );
-}
-
-function GitHubLogo({ className = "w-4 h-4" }: { className?: string }) {
-  return (
-    <svg viewBox="0 0 24 24" className={className} aria-hidden="true">
-      <path
-        fill="currentColor"
-        d="M12 .5C5.6.5.5 5.7.5 12.1c0 5.1 3.3 9.5 7.9 11.1.6.1.8-.2.8-.6v-2.2c-3.2.7-3.9-1.4-3.9-1.4-.5-1.4-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.9 1.3 1.9 1.3 1.1 1.9 2.9 1.3 3.6 1 .1-.8.4-1.3.8-1.6-2.5-.3-5.2-1.3-5.2-5.8 0-1.3.5-2.4 1.2-3.3-.1-.3-.5-1.6.1-3.2 0 0 1-.3 3.3 1.2a11.5 11.5 0 016 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.6.2 2.9.1 3.2.8.9 1.2 2 1.2 3.3 0 4.6-2.7 5.5-5.2 5.8.4.3.8 1 .8 2v3c0 .4.2.7.8.6a11.6 11.6 0 007.9-11.1C23.5 5.7 18.4.5 12 .5z"
-      />
-    </svg>
-  );
-}
-
-function getErrorMessage(error: unknown, fallback: string) {
-  // Prefer structured server response (axios-like)
-  if (typeof error === "object" && error !== null) {
-    const maybe = error as {
-      response?: { status?: number; data?: { error?: string } };
-      message?: string;
-    };
-
-    const serverError = maybe.response?.data?.error;
-    const status = maybe.response?.status;
-
-    if (status === 409) {
-      // Conflict — common case: email already exists / needs verification
-      if (serverError && /verify/i.test(serverError)) {
-        return "An account with that email already exists. Check your inbox for the verification link or click 'Resend verification' to request a new one.";
-      }
-
-      if (serverError && /already registered/i.test(serverError)) {
-        return "This email is already registered. Try signing in or request a verification link if you haven't verified your address.";
-      }
-
-      return serverError || "This email is already in use. Try signing in or request a new verification link.";
-    }
-
-    if (serverError) return serverError;
-    if (maybe.message) return maybe.message;
-  }
-
-  if (error instanceof Error) {
-    return error.message || fallback;
-  }
-
-  return fallback;
-}
-
-export default function RegisterPage() {
-  const { register } = useAuth();
-  const router = useRouter();
-  const [name, setName] = useState("");
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
-  const [error, setError] = useState<string | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [verificationSent, setVerificationSent] = useState(false);
-  const [verificationDeliveryProblem, setVerificationDeliveryProblem] = useState(false);
-  const [resendLoading, setResendLoading] = useState(false);
-  const [oauthLoading, setOauthLoading] = useState<"google" | "github" | null>(null);
-
-  const { t } = useTranslation();
-  const API_BASE = process.env.NEXT_PUBLIC_API_URL || "http://localhost:4000";
-
-  const startOAuth = async (provider: "google" | "github") => {
-    setError(null);
-    setOauthLoading(provider);
-
-    try {
-      const res = await fetch(`${API_BASE}/api/auth/${provider}/start?mode=json`);
-      const data = await res.json();
-
-      if (!res.ok || !data?.success || !data?.data?.url) {
-        throw new Error(data?.error || `${provider} sign in is not configured`);
-      }
-
-      window.location.href = data.data.url as string;
-    } catch (error: unknown) {
-      setError(getErrorMessage(error, `${provider} sign in failed`));
-      setOauthLoading(null);
-    }
-  };
-
-  useEffect(() => {
-    const resetOAuthLoading = () => setOauthLoading(null);
-    const onVisibilityChange = () => {
-      if (document.visibilityState === "visible") {
-        resetOAuthLoading();
-      }
-    };
-
-    // If user returns from provider page (back/cancel), unlock OAuth buttons.
-    window.addEventListener("focus", resetOAuthLoading);
-    window.addEventListener("pageshow", resetOAuthLoading);
-    document.addEventListener("visibilitychange", onVisibilityChange);
-
-    return () => {
-      window.removeEventListener("focus", resetOAuthLoading);
-      window.removeEventListener("pageshow", resetOAuthLoading);
-      document.removeEventListener("visibilitychange", onVisibilityChange);
-    };
-  }, []);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError(null);
-    setLoading(true);
-    setVerificationSent(false);
-    setVerificationDeliveryProblem(false);
-
-    if (password !== confirmPassword) {
-      setError(t('auth.passwordMismatch'));
-      setLoading(false);
-      return;
-    }
-
-    try {
-      const result = await register(email, password, name || undefined);
-      setVerificationSent(true);
-      setVerificationDeliveryProblem(result.verificationEmailSent === false);
-      setPassword("");
-      setConfirmPassword("");
-    } catch (error: unknown) {
-      setError(getErrorMessage(error, "Registration failed"));
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const resendVerification = async () => {
-    setError(null);
-    setResendLoading(true);
-
-    try {
-      const res = await fetch(`${API_BASE}/api/auth/resend-verification`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ email }),
-      });
-      const data = await res.json();
-
-      if (!res.ok || !data?.success) {
-        throw new Error(data?.error || "Unable to resend verification email");
-      }
-
-      // Show the verification panel so the user has clear next steps
-      setVerificationSent(true);
-      // If the server indicates delivery failed, surface that state
-      setVerificationDeliveryProblem(data?.data?.verificationEmailSent === false);
-    } catch (error: unknown) {
-      setError(getErrorMessage(error, "Unable to resend verification email"));
-    } finally {
-      setResendLoading(false);
-    }
-  };
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-950 px-4 sm:px-6 safe-area-inset-top safe-area-inset-bottom">
-      <div className="w-full max-w-sm">
-        <div className="text-center mb-6 md:mb-8">
-          <div className="w-12 h-12 md:w-14 md:h-14 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg shadow-indigo-500/20 flex-shrink-0">
-            <Blocks className="w-6 h-6 md:w-7 md:h-7 text-white" />
-          </div>
-          <h1 className="text-xl md:text-2xl font-bold text-white">{t('auth.signup')}</h1>
-          <p className="text-white/40 text-xs md:text-sm mt-1">{t('header.tagline')}</p>
-          <div className="mt-4 flex justify-center">
-            <LanguageSwitcher />
-          </div>
-        </div>
-
-        {verificationSent ? (
-          <div className="relative overflow-hidden rounded-3xl border border-emerald-500/20 bg-gradient-to-b from-emerald-500/12 via-emerald-500/8 to-white/5 p-6 md:p-7 text-center shadow-2xl shadow-emerald-950/10">
-            <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-emerald-300/50 to-transparent" />
-
-            <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-emerald-500/15 ring-1 ring-emerald-400/20">
-              <CheckCircle2 className="h-7 w-7 text-emerald-300" />
-            </div>
-
-            <h2 className="text-2xl font-semibold tracking-tight text-white">Check your inbox</h2>
-
-            <p className="mt-3 text-sm leading-6 text-white/70">
-              We sent a verification link to
-              <span className="mx-1 inline-flex items-center gap-1 rounded-full border border-white/10 bg-black/20 px-2 py-0.5 font-medium text-white">
-                <Mail className="h-3.5 w-3.5 text-emerald-300" />
-                {email}
-              </span>
-              Open it to finish creating your account and sign in automatically.
-            </p>
-
-            <div className="mt-4 rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-white/65">
-              Didn’t receive it? Check spam or resend a fresh verification link below.
-            </div>
-
-            {verificationDeliveryProblem && (
-              <div className="mt-3 rounded-2xl border border-amber-400/20 bg-amber-400/10 px-4 py-3 text-sm text-amber-200">
-                The email could not be delivered automatically. Use resend to try again.
-              </div>
-            )}
-
-            <div className="mt-5 grid grid-cols-1 gap-3 sm:grid-cols-2">
-              <button
-                type="button"
-                onClick={resendVerification}
-                disabled={resendLoading}
-                className="inline-flex items-center justify-center gap-2 rounded-xl bg-white px-4 py-3 text-sm font-semibold text-gray-900 transition-colors hover:bg-emerald-100 disabled:cursor-not-allowed disabled:opacity-60"
-              >
-                <Mail className="h-4 w-4" />
-                {resendLoading ? "Sending..." : "Resend email"}
-              </button>
-
-              <button
-                type="button"
-                onClick={() => setVerificationSent(false)}
-                className="inline-flex items-center justify-center gap-2 rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm font-semibold text-white transition-colors hover:bg-white/10"
-              >
-                <ArrowLeft className="h-4 w-4" />
-                Change email
-              </button>
-            </div>
-
-            <button
-              type="button"
-              onClick={() => router.push("/login")}
-              className="mt-4 inline-flex items-center justify-center text-sm font-medium text-white/55 underline-offset-4 transition-colors hover:text-white hover:underline"
-            >
-              Back to login
-            </button>
-          </div>
-        ) : (
-        <form onSubmit={handleSubmit} className="space-y-3 md:space-y-4">
-          {error && (
-            <div className="flex items-center gap-2 p-3 bg-red-500/10 border border-red-500/30 rounded-lg text-red-400 text-xs md:text-sm">
-              <AlertCircle className="w-4 h-4 flex-shrink-0" />
-              {error}
-            </div>
-          )}
-
-          {email && error && /already|verify|verification|resend/i.test(error) && (
-            <div className="mt-3 flex gap-2">
-              <button
-                type="button"
-                onClick={resendVerification}
-                disabled={resendLoading}
-                className="inline-flex items-center justify-center gap-2 rounded-xl bg-white px-4 py-2 text-sm font-semibold text-gray-900 transition-colors hover:bg-emerald-100 disabled:cursor-not-allowed disabled:opacity-60"
-              >
-                <Mail className="h-4 w-4" />
-                {resendLoading ? "Sending..." : "Resend verification"}
-              </button>
-
-              <button
-                type="button"
-                onClick={() => router.push("/login")}
-                className="inline-flex items-center justify-center gap-2 rounded-xl border border-white/10 bg-white/5 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-white/10"
-              >
-                Back to login
-              </button>
-            </div>
-          )}
-
-          <div>
-            <label className="block text-xs md:text-sm font-medium text-white/60 mb-1 md:mb-1.5">{t('auth.name')}</label>
-            <input
-              type="text"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              className="w-full bg-white/5 border border-white/10 rounded-lg px-3 md:px-4 py-2 md:py-2.5 text-white placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 text-sm md:text-base"
-              placeholder={t('auth.fullName')}
-            />
-          </div>
-
-          <div>
-            <label className="block text-xs md:text-sm font-medium text-white/60 mb-1 md:mb-1.5">{t('auth.email')}</label>
-            <input
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              required
-              className="w-full bg-white/5 border border-white/10 rounded-lg px-3 md:px-4 py-2 md:py-2.5 text-white placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 text-sm md:text-base"
-              placeholder="you@example.com"
-            />
-          </div>
-
-          <div>
-            <label className="block text-xs md:text-sm font-medium text-white/60 mb-1 md:mb-1.5">{t('auth.password')}</label>
-            <input
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              required
-              minLength={6}
-              className="w-full bg-white/5 border border-white/10 rounded-lg px-3 md:px-4 py-2 md:py-2.5 text-white placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 text-sm md:text-base"
-              placeholder="••••••••"
-            />
-          </div>
-
-          <div>
-            <label className="block text-xs md:text-sm font-medium text-white/60 mb-1 md:mb-1.5">{t('auth.confirmPassword')}</label>
-            <input
-              type="password"
-              value={confirmPassword}
-              onChange={(e) => setConfirmPassword(e.target.value)}
-              required
-              className="w-full bg-white/5 border border-white/10 rounded-lg px-3 md:px-4 py-2 md:py-2.5 text-white placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 text-sm md:text-base"
-              placeholder="••••••••"
-            />
-          </div>
-
-          <button
-            type="submit"
-            disabled={loading}
-            className="w-full py-2 md:py-2.5 bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 rounded-lg text-white font-medium transition-colors flex items-center justify-center gap-2 text-sm md:text-base active:scale-95"
-          >
-            {loading && <Loader2 className="w-4 h-4 animate-spin" />}
-            {t('auth.signup')}
-          </button>
-        </form>
-        )}
-
-        <div className="my-4 flex items-center gap-3">
-          <div className="h-px flex-1 bg-white/10" />
-          <span className="text-xs text-white/40">{t("auth.orContinueWith", "Or continue with")}</span>
-          <div className="h-px flex-1 bg-white/10" />
-        </div>
-
-        <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
-          <button
-            type="button"
-            disabled={!!oauthLoading}
-            onClick={() => startOAuth("google")}
-            className="w-full py-2 md:py-2.5 bg-white/5 hover:bg-white/10 disabled:opacity-50 border border-white/10 rounded-lg text-white font-medium transition-colors flex items-center justify-center gap-2 text-sm md:text-base"
-          >
-            {oauthLoading === "google" ? <Loader2 className="w-4 h-4 animate-spin" /> : <GoogleLogo className="w-4 h-4" />}
-            {t("auth.continueWithGoogle", "Google")}
-          </button>
-
-          <button
-            type="button"
-            disabled={!!oauthLoading}
-            onClick={() => startOAuth("github")}
-            className="w-full py-2 md:py-2.5 bg-white/5 hover:bg-white/10 disabled:opacity-50 border border-white/10 rounded-lg text-white font-medium transition-colors flex items-center justify-center gap-2 text-sm md:text-base"
-          >
-            {oauthLoading === "github" ? <Loader2 className="w-4 h-4 animate-spin" /> : <GitHubLogo className="w-4 h-4" />}
-            {t("auth.continueWithGithub", "GitHub")}
-          </button>
-        </div>
-
-        <p className="text-center text-xs md:text-sm text-white/40 mt-6 md:mt-8">
-          {t('auth.haveAccount')}{" "}
-          <Link href="/login" className="text-indigo-400 hover:text-indigo-300 font-medium">
-            {t('auth.login')}
-          </Link>
-        </p>
-      </div>
-    </div>
-  );
-}
diff --git a/client/src/components/layout/Footer.tsx b/client/src/components/layout/Footer.tsx
new file mode 100644
index 0000000..e5416fe
--- /dev/null
+++ b/client/src/components/layout/Footer.tsx
@@ -0,0 +1,107 @@
+import Link from "next/link";
+
+export default function Footer() {
+  return (
+    <footer className="border-t border-outline-hairline bg-surface-container-lowest pt-16 pb-8">
+      <div className="max-w-container-max mx-auto px-margin-safe grid grid-cols-2 md:grid-cols-4 gap-8 mb-16">
+        <div className="col-span-2 md:col-span-1">
+          <div className="flex items-center gap-2 mb-4">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 350" width="58" height="40" className="flex-shrink-0">
+              <defs>
+
+              </defs>
+
+              <g >
+                {/* Connection Circuit Lines  */}
+                <path
+                  d="M 130 120 V 60 H 270 V 140"
+                  fill="none"
+                  stroke="#FF6B00"
+                  strokeWidth="10"
+                  strokeLinejoin="miter"
+                  strokeLinecap="square"
+                />
+                <path
+                  d="M 300 170 H 360"
+                  fill="none"
+                  stroke="#FF6B00"
+                  strokeWidth="10"
+                  strokeLinejoin="miter"
+                  strokeLinecap="square"
+                />
+                <path
+                  d="M 130 220 V 280 H 390 V 200"
+                  fill="none"
+                  stroke="#FF6B00"
+                  strokeWidth="10"
+                  strokeLinejoin="miter"
+                  strokeLinecap="square"
+                />
+
+                {/* Architectural Nodes  */}
+                <rect
+                  x="70"
+                  y="110"
+                  width="120"
+                  height="120"
+                  rx="17.5"
+                  fill="#FF6B00"
+                />
+                <rect
+                  x="230"
+                  y="130"
+                  width="80"
+                  height="80"
+                  rx="14"
+                  fill="#FF6B00"
+                />
+                <rect
+                  x="350"
+                  y="130"
+                  width="80"
+                  height="80"
+                  rx="14"
+                  fill="#FF6B00"
+                />
+              </g>
+            </svg>
+            <span className="text-body-md font-bold text-on-surface">ConfigFlow</span>
+
+          </div>
+          <p className="text-label-tech text-on-surface-variant">The operating system for software generation.</p>
+        </div>
+                <div>
+          <h4 className="text-label-caps font-label-caps text-on-surface mb-4 tracking-widest">PRODUCT</h4>
+          <ul className="space-y-2 text-sm text-on-surface-variant">
+            <li><Link href="/#how-it-works" className="hover:text-primary transition-colors">How it Works</Link></li>
+            <li><Link href="/#features" className="hover:text-primary transition-colors">Features</Link></li>
+          </ul>
+        </div>
+        <div>
+          <h4 className="text-label-caps font-label-caps text-on-surface mb-4 tracking-widest">COMPANY</h4>
+          <ul className="space-y-2 text-sm text-on-surface-variant">
+            <li><Link href="/mission" className="hover:text-primary transition-colors">Mission</Link></li>
+            <li><Link href="#" className="hover:text-primary transition-colors">Blog (Coming Soon)</Link></li>
+          </ul>
+        </div>
+        <div>
+          <h4 className="text-label-caps font-label-caps text-on-surface mb-4 tracking-widest">SUPPORT</h4>
+          <ul className="space-y-2 text-sm text-on-surface-variant">
+            <li><Link href="#" className="hover:text-primary transition-colors">Contact Support (Coming Soon)</Link></li>
+            <li><Link href="#" className="hover:text-primary transition-colors">Documentation (Coming Soon)</Link></li>
+          </ul>
+        </div>
+      </div>
+      <div className="max-w-container-max mx-auto px-margin-safe pt-8 border-t border-outline-hairline flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-on-surface-variant">
+        <div>© 2024 ConfigFlow Engineering. All rights reserved.</div>
+        <div className="flex items-center gap-4">
+          <Link href="#" className="hover:text-primary transition-colors">Privacy</Link>
+          <Link href="#" className="hover:text-primary transition-colors">Terms</Link>
+          <div className="flex items-center gap-2">
+            <span className="w-2 h-2 rounded-full bg-tertiary"></span> System Operational
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
\ No newline at end of file
diff --git a/client/src/components/layout/Navbar.tsx b/client/src/components/layout/Navbar.tsx
new file mode 100644
index 0000000..f7ece39
--- /dev/null
+++ b/client/src/components/layout/Navbar.tsx
@@ -0,0 +1,73 @@
+"use client";
+import Link from "next/link";
+import { useState, useEffect } from "react";
+
+export default function Navbar() {
+  const [scrolled, setScrolled] = useState(false);
+
+  // Listen for scroll events to trigger the glass effect
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 20);
+    };
+    
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  return (
+    <nav 
+      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
+        scrolled 
+          ? "bg-surface-container/80 backdrop-blur-md border-b border-outline-variant/50 shadow-lg" 
+          : "bg-transparent border-b border-transparent"
+      }`}
+    >
+      <div className="flex justify-between items-center w-full px-margin-safe h-16 max-w-container-max mx-auto">
+        <div className="flex items-center gap-2">
+          
+          <Link href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 350" width="46" height="32" className="flex-shrink-0">
+              <g>
+                <path d="M 130 120 V 60 H 270 V 140" fill="none" stroke="#FF6B00" strokeWidth="10" strokeLinejoin="miter" strokeLinecap="square" />
+                <path d="M 300 170 H 360" fill="none" stroke="#FF6B00" strokeWidth="10" strokeLinejoin="miter" strokeLinecap="square" />
+                <path d="M 130 220 V 280 H 390 V 200" fill="none" stroke="#FF6B00" strokeWidth="10" strokeLinejoin="miter" strokeLinecap="square" />
+                <rect x="70" y="110" width="120" height="120" rx="17.5" fill="#FF6B00" />
+                <rect x="230" y="130" width="80" height="80" rx="14" fill="#FF6B00" />
+                <rect x="350" y="130" width="80" height="80" rx="14" fill="#FF6B00" />
+              </g>
+            </svg>
+            <span className="text-headline-md font-headline-md font-black tracking-tighter text-on-surface">
+              ConfigFlow
+            </span>
+          </Link>
+
+        </div>
+        
+        <div className="hidden md:flex items-center gap-8">
+          <Link href="/#how-it-works" className="text-on-surface-variant font-medium hover:text-primary transition-colors duration-200">
+            How it Works
+          </Link>
+          <Link href="/#features" className="text-on-surface-variant font-medium hover:text-primary transition-colors duration-200">
+            Features
+          </Link>
+          <Link href="/#use-cases" className="text-on-surface-variant font-medium hover:text-primary transition-colors duration-200">
+            Use Cases
+          </Link>
+          <Link href="/mission" className="text-on-surface-variant font-medium hover:text-primary transition-colors duration-200">
+            Mission
+          </Link>
+        </div>
+        
+        <div className="flex items-center gap-4">
+          <Link href="/login" className="text-on-surface hover:text-primary transition-colors text-sm font-medium">
+            Login
+          </Link>
+          <Link href="/register" className="bg-primary-container hover:bg-orange-600 text-white px-4 py-2 rounded text-sm font-bold transition-colors shadow-[0_0_15px_rgba(255,107,0,0.4)]">
+            Start Building
+          </Link>
+        </div>
+      </div>
+    </nav>
+  );
+}
\ No newline at end of file
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index bcc5a41..b9bf331 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -6,10 +6,86 @@ module.exports = {
   darkMode: "class",
   theme: {
     extend: {
+      colors: {
+        // Semantic Surface Colors
+        'surface': '#131313',
+        'surface-dim': '#131313',
+        'surface-bright': '#3a3939',
+        'surface-container-lowest': '#0e0e0e',
+        'surface-container-low': '#1c1b1b',
+        'surface-container': '#201f1f',
+        'surface-container-high': '#2a2a2a',
+        'surface-container-highest': '#353534',
+        
+        // Semantic Text/Icon Colors
+        'on-surface': '#e5e2e1',
+        'on-surface-variant': '#e2bfb0',
+        'inverse-surface': '#e5e2e1',
+        'inverse-on-surface': '#313030',
+        
+        // Borders and Outlines
+        'outline': '#a98a7d',
+        'outline-variant': '#5a4136',
+        'outline-hairline': 'rgba(255, 255, 255, 0.1)',
+        
+        // Primary (Warm Orange)
+        'primary': '#ffb693',
+        'on-primary': '#561f00',
+        'primary-container': '#ff6b00',
+        'on-primary-container': '#572000',
+        'primary-fixed': '#ffdbcc',
+        'primary-fixed-dim': '#ffb693',
+        
+        // Secondary & Tertiary
+        'secondary': '#c0c1ff',
+        'secondary-container': '#3131c0',
+        'tertiary': '#4edea3',
+        'tertiary-container': '#00ae78',
+        
+        // Backgrounds & Utilities
+        'background': '#131313',
+        'terminal-bg': '#09090B',
+        'surface-elevated': '#111111',
+        'code-indigo': '#C7D2FE',
+        'error-red': '#EF4444',
+        'warning-amber': '#F59E0B',
+      },
       fontFamily: {
-        sans: ["var(--font-inter)", "system-ui", "sans-serif"],
+        'display-hero': ['Inter', 'sans-serif'],
+        'headline-lg': ['Inter', 'sans-serif'],
+        'headline-md': ['Inter', 'sans-serif'],
+        'body-lg': ['Inter', 'sans-serif'],
+        'body-md': ['Inter', 'sans-serif'],
+        'code-base': ['Geist Mono', 'monospace'],
+        'label-caps': ['Geist Mono', 'monospace'],
+        'label-tech': ['Geist Mono', 'monospace'],
+      },
+      fontSize: {
+        'display-hero': ['72px', { lineHeight: '1.1', letterSpacing: '-0.04em', fontWeight: '900' }],
+        'headline-lg': ['32px', { lineHeight: '1.2', letterSpacing: '-0.02em', fontWeight: '700' }],
+        'headline-md': ['24px', { lineHeight: '1.3', fontWeight: '700' }],
+        'body-lg': ['18px', { lineHeight: '1.6', fontWeight: '400' }],
+        'body-md': ['15px', { lineHeight: '1.5', fontWeight: '400' }],
+        'code-base': ['14px', { lineHeight: '1.6', fontWeight: '400' }],
+        'label-caps': ['11px', { lineHeight: '1.0', letterSpacing: '0.15em', fontWeight: '700' }],
+        'label-tech': ['12px', { lineHeight: '1.2', fontWeight: '500' }],
+      },
+      spacing: {
+        'base': '4px',
+        'gutter': '16px',
+        'margin-safe': '32px',
+        'panel-gap': '1px',
+        'container-max': '1440px',
       },
+      borderRadius: {
+        'sm': '0.125rem',
+        DEFAULT: '0.25rem',
+        'md': '0.375rem',
+        'lg': '0.5rem',
+        'xl': '0.75rem',
+        'full': '9999px',
+      }
     },
   },
   plugins: [],
-};
+};
\ No newline at end of file