diff --git a/apps/web-client-base-net/src/WebClientBase.Client/Layout/MainLayout.razor b/apps/web-client-base-net/src/WebClientBase.Client/Layout/MainLayout.razor
index 9fbe9def..1cd4cab7 100644
--- a/apps/web-client-base-net/src/WebClientBase.Client/Layout/MainLayout.razor
+++ b/apps/web-client-base-net/src/WebClientBase.Client/Layout/MainLayout.razor
@@ -6,13 +6,19 @@
 <MudSnackbarProvider />
 
 <MudLayout>
-    <MudAppBar Elevation="0" Class="border-b border-solid mud-border-lines-default">
-        <MudIconButton Icon="@Icons.Material.Rounded.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@ToggleDrawer" />
-        <MudText Typo="Typo.h6" Class="ml-3 font-weight-bold">GoodGo</MudText>
+    <MudAppBar Elevation="0" Class="border-b border-solid mud-border-lines-default" Fixed="true" Style="background-color: var(--bg-primary); backdrop-filter: blur(12px);">
+        <MudIconButton Icon="@Icons.Material.Rounded.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@ToggleDrawer" Class="d-md-none" />
+        <MudText Typo="Typo.h6" Class="ml-3 font-weight-bold" Style="font-family: 'Inter', sans-serif;">GoodGo</MudText>
         <MudSpacer />
-        <MudButton Variant="Variant.Text" Color="Color.Inherit" Class="mr-4 d-none d-md-flex">Features</MudButton>
-        <MudButton Variant="Variant.Text" Color="Color.Inherit" Class="mr-4 d-none d-md-flex">Enterprise</MudButton>
-        <MudButton Variant="Variant.Text" Color="Color.Inherit" Class="mr-4 d-none d-md-flex">Pricing</MudButton>
+        
+        <!-- Desktop Navigation -->
+        <MudStack Row="true" Spacing="4" Class="d-none d-md-flex align-center mr-8">
+            <MudLink Href="/" Color="Color.Inherit" Underline="Underline.None" Class="mud-nav-link px-3 py-2">Home</MudLink>
+            <MudLink Href="/features" Color="Color.Inherit" Underline="Underline.None" Class="mud-nav-link px-3 py-2">Features</MudLink>
+            <MudLink Href="/enterprise" Color="Color.Inherit" Underline="Underline.None" Class="mud-nav-link px-3 py-2">Enterprise</MudLink>
+            <MudLink Href="/pricing" Color="Color.Inherit" Underline="Underline.None" Class="mud-nav-link px-3 py-2">Pricing</MudLink>
+        </MudStack>
+
         <MudStack Row="true" Spacing="2">
             <MudButton Variant="Variant.Outlined" Color="Color.Inherit" Class="rounded-lg">Sign in</MudButton>
             <MudButton Variant="Variant.Filled" Color="Color.Primary" Class="rounded-lg">Download</MudButton>
@@ -23,19 +29,20 @@
                        OnClick="@ToggleDarkMode" />
     </MudAppBar>
 
-    <MudDrawer @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2">
+    <MudDrawer @bind-Open="_drawerOpen" Variant="@DrawerVariant.Temporary" Elevation="1">
+        <MudDrawerHeader>
+            <MudText Typo="Typo.h6">GoodGo</MudText>
+        </MudDrawerHeader>
         <NavMenu />
     </MudDrawer>
 
-    <MudMainContent Class="pt-16 px-4">
-        <MudContainer MaxWidth="MaxWidth.Large" Class="my-4">
-            @Body
-        </MudContainer>
+    <MudMainContent Class="pt-16">
+        @Body
     </MudMainContent>
 </MudLayout>
 
 @code {
-    private bool _drawerOpen = true;
+    private bool _drawerOpen = false;
     private bool _isDarkMode = false;
 
     private MudTheme _theme = new()
diff --git a/apps/web-client-base-net/src/WebClientBase.Client/Pages/Home.razor b/apps/web-client-base-net/src/WebClientBase.Client/Pages/Home.razor
index 5bdf2982..21035601 100644
--- a/apps/web-client-base-net/src/WebClientBase.Client/Pages/Home.razor
+++ b/apps/web-client-base-net/src/WebClientBase.Client/Pages/Home.razor
@@ -1,71 +1,75 @@
 @page "/"
 
-<PageTitle>Home - GoodGo</PageTitle>
+<PageTitle>GoodGo - The AI Code Editor</PageTitle>
 
-<MudText Typo="Typo.h3" GutterBottom="true">Welcome to GoodGo</MudText>
-<MudText Typo="Typo.body1" Class="mb-4">
-    Enterprise frontend application built with Blazor WebAssembly and MudBlazor.
-</MudText>
+<MudContainer MaxWidth="MaxWidth.Large" Class="px-4 py-16">
+    <!-- Hero Section -->
+    <MudStack AlignItems="AlignItems.Center" Spacing="6" Class="py-12 text-center">
+        <MudText Typo="Typo.h1" Class="hero-title" Style="font-weight: 700; line-height: 1.1; letter-spacing: -0.02em;">
+            The AI Code Editor
+        </MudText>
+        <MudText Typo="Typo.h5" Class="hero-subtitle mb-6" Style="color: var(--text-secondary); max-width: 600px;">
+            Built to make you extraordinarily productive, GoodGo is the best way to code with AI.
+        </MudText>
+        
+        <MudStack Row="true" Spacing="3" Class="justify-center">
+            <MudButton Variant="Variant.Filled" Color="Color.Primary" Size="Size.Large" Class="px-8 py-3 rounded-lg" 
+                       Style="font-weight: 600; font-size: 1.1rem;">
+                Download for Mac
+            </MudButton>
+            <MudButton Variant="Variant.Outlined" Color="Color.Inherit" Size="Size.Large" Class="px-8 py-3 rounded-lg"
+                       Style="border-color: var(--border-default); font-weight: 500;">
+                Read the Manifesto
+            </MudButton>
+        </MudStack>
+        
+        <MudText Typo="Typo.caption" Class="mt-4" Style="color: var(--text-tertiary);">
+            Free to use. No credit card required.
+        </MudText>
+    </MudStack>
 
-<MudGrid>
-    <MudItem xs="12" sm="6" md="4">
-        <MudCard Elevation="2">
-            <MudCardHeader>
-                <CardHeaderAvatar>
-                    <MudAvatar Color="Color.Primary">
-                        <MudIcon Icon="@Icons.Material.Filled.ShoppingCart" />
-                    </MudAvatar>
-                </CardHeaderAvatar>
-                <CardHeaderContent>
-                    <MudText Typo="Typo.h6">Products</MudText>
-                    <MudText Typo="Typo.body2">Manage your product catalog</MudText>
-                </CardHeaderContent>
-            </MudCardHeader>
-            <MudCardActions>
-                <MudButton Variant="Variant.Text" Color="Color.Primary" Href="/products">View Products</MudButton>
-            </MudCardActions>
-        </MudCard>
-    </MudItem>
+    <!-- Demo / Visual Section -->
+    <div class="mt-12 mx-auto rounded-xl overflow-hidden glass-card" style="max-width: 1000px; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-default);">
+        <MudText Typo="Typo.h6" Style="color: var(--text-tertiary);">[ Interactive Demo Placeholder ]</MudText>
+    </div>
 
-    <MudItem xs="12" sm="6" md="4">
-        <MudCard Elevation="2">
-            <MudCardHeader>
-                <CardHeaderAvatar>
-                    <MudAvatar Color="Color.Secondary">
-                        <MudIcon Icon="@Icons.Material.Filled.Person" />
-                    </MudAvatar>
-                </CardHeaderAvatar>
-                <CardHeaderContent>
-                    <MudText Typo="Typo.h6">Authentication</MudText>
-                    <MudText Typo="Typo.body2">Login and registration</MudText>
-                </CardHeaderContent>
-            </MudCardHeader>
-            <MudCardActions>
-                <MudButton Variant="Variant.Text" Color="Color.Secondary" Href="/auth">Go to Auth</MudButton>
-            </MudCardActions>
-        </MudCard>
-    </MudItem>
+    <!-- Features Section -->
+    <MudGrid Class="mt-24" Spacing="4">
+        <MudItem xs="12" md="4">
+            <div class="feature-card p-6 rounded-lg" style="border: 1px solid var(--border-default);">
+                <MudIcon Icon="@Icons.Material.Rounded.AutoFixHigh" Size="Size.Large" Class="mb-4" />
+                <MudText Typo="Typo.h6" Class="mb-2 font-weight-bold">Tab to Autocomplete</MudText>
+                <MudText Style="color: var(--text-secondary);">GoodGo predicts your next edit, so you can just hit tab to fly through changes.</MudText>
+            </div>
+        </MudItem>
+        <MudItem xs="12" md="4">
+            <div class="feature-card p-6 rounded-lg" style="border: 1px solid var(--border-default);">
+                <MudIcon Icon="@Icons.Material.Rounded.ChatBubble" Size="Size.Large" Class="mb-4" />
+                <MudText Typo="Typo.h6" Class="mb-2 font-weight-bold">Chat with Your Codebase</MudText>
+                <MudText Style="color: var(--text-secondary);">No more alt-tabbing. Get answers to codebase-wide questions strictly from your editor.</MudText>
+            </div>
+        </MudItem>
+        <MudItem xs="12" md="4">
+            <div class="feature-card p-6 rounded-lg" style="border: 1px solid var(--border-default);">
+                <MudIcon Icon="@Icons.Material.Rounded.Security" Size="Size.Large" Class="mb-4" />
+                <MudText Typo="Typo.h6" Class="mb-2 font-weight-bold">Privacy First</MudText>
+                <MudText Style="color: var(--text-secondary);">Your code never leaves your machine unless you explicitly choose to use cloud AI models.</MudText>
+            </div>
+        </MudItem>
+    </MudGrid>
+</MudContainer>
 
-    <MudItem xs="12" sm="6" md="4">
-        <MudCard Elevation="2">
-            <MudCardHeader>
-                <CardHeaderAvatar>
-                    <MudAvatar Color="Color.Tertiary">
-                        <MudIcon Icon="@Icons.Material.Filled.Api" />
-                    </MudAvatar>
-                </CardHeaderAvatar>
-                <CardHeaderContent>
-                    <MudText Typo="Typo.h6">BFF Architecture</MudText>
-                    <MudText Typo="Typo.body2">YARP reverse proxy to microservices</MudText>
-                </CardHeaderContent>
-            </MudCardHeader>
-            <MudCardActions>
-                <MudButton Variant="Variant.Text" Color="Color.Tertiary" Href="/swagger">API Docs</MudButton>
-            </MudCardActions>
-        </MudCard>
-    </MudItem>
-</MudGrid>
-
-<MudAlert Severity="Severity.Info" Class="mt-4">
-    <MudText>This app uses the <strong>Backend for Frontend (BFF)</strong> pattern with YARP to proxy API calls to microservices.</MudText>
-</MudAlert>
+<style>
+    .hero-title {
+        font-size: 3rem;
+    }
+    @@media (min-width: 600px) {
+        .hero-title {
+            font-size: 5rem;
+        }
+    }
+    .glass-card {
+        background: var(--bg-secondary);
+        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    }
+</style>