diff --git a/.env.example b/.env.example
index 0cf836f..d85da20 100644
--- a/.env.example
+++ b/.env.example
@@ -1,6 +1,17 @@
 # AeThex Studio Environment Variables
 
+# ===========================================
+# SUPABASE (Required)
+# ===========================================
+# Get these from: https://supabase.com/dashboard/project/_/settings/api
+NEXT_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here
+# Service role key - KEEP SECRET, never expose to client
+SUPABASE_SERVICE_ROLE_KEY=your-service-role-key-here
+
+# ===========================================
 # Claude API Configuration
+# ===========================================
 # Get your API key from: https://console.anthropic.com/
 # Required for cross-platform code translation feature
 VITE_CLAUDE_API_KEY=sk-ant-api03-your-api-key-here
@@ -8,9 +19,13 @@ VITE_CLAUDE_API_KEY=sk-ant-api03-your-api-key-here
 # Optional: Override Claude model (default: claude-3-5-sonnet-20241022)
 # VITE_CLAUDE_MODEL=claude-3-5-sonnet-20241022
 
+# ===========================================
 # PostHog Analytics (Optional)
+# ===========================================
 # VITE_POSTHOG_KEY=your-posthog-key
 # VITE_POSTHOG_HOST=https://app.posthog.com
 
+# ===========================================
 # Sentry Error Tracking (Optional)
+# ===========================================
 # VITE_SENTRY_DSN=your-sentry-dsn
diff --git a/.gitignore b/.gitignore
index 02de707..417d7d0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -95,3 +95,4 @@ pids
 .devcontainer/
 
 .spark-workbench-id
+.env.local
diff --git a/app/App.tsx b/app/App.tsx
deleted file mode 100644
index 1353d37..0000000
--- a/app/App.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useState } from 'react';
-import { Toaster } from '../src/components/ui/sonner';
-import { CodeEditor } from '../src/components/CodeEditor';
-import { AIChat } from '../src/components/AIChat';
-import { Toolbar } from '../src/components/Toolbar';
-import { TemplatesDrawer } from '../src/components/TemplatesDrawer';
-import { FileTree, FileNode } from '../src/components/FileTree';
-import { FileTabs } from '../src/components/FileTabs';
-import { PreviewModal } from '../src/components/PreviewModal';
-// Removed named imports for WelcomeDialog and NewProjectModal. Use lazy-loaded versions from src/App.tsx.
-import { ConsolePanel } from '../src/components/ConsolePanel';
-import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '../src/components/ui/resizable';
-import { useIsMobile } from '../src/hooks/use-mobile';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '../src/components/ui/tabs';
-import { toast } from 'sonner';
-
-
-export { default } from '../src/App';
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
deleted file mode 100644
index b09bba6..0000000
--- a/app/dashboard/page.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-import { DashboardPage } from "../../src/components/aethex/dashboard-page";
-export default function Page() {
-  return <DashboardPage />;
-}
diff --git a/app/globals.css b/app/globals.css
deleted file mode 100644
index f74310e..0000000
--- a/app/globals.css
+++ /dev/null
@@ -1,154 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  /* Default Dark Theme */
-  :root, .theme-dark {
-    --background: #0a0a0f;
-    --surface: #1a1a1f;
-    --primary: #8b5cf6;
-    --primary-light: #a78bfa;
-    --primary-dark: #7c3aed;
-    --secondary: #ec4899;
-    --accent: #06b6d4;
-    --border: #2a2a2f;
-    --foreground: #ffffff;
-    --muted: #6b7280;
-  }
-
-  /* Light Theme */
-  .theme-light {
-    --background: #ffffff;
-    --surface: #f9fafb;
-    --primary: #7c3aed;
-    --primary-light: #8b5cf6;
-    --primary-dark: #6d28d9;
-    --secondary: #db2777;
-    --accent: #0891b2;
-    --border: #e5e7eb;
-    --foreground: #111827;
-    --muted: #6b7280;
-  }
-
-  /* Synthwave Theme */
-  .theme-synthwave {
-    --background: #2b213a;
-    --surface: #241b2f;
-    --primary: #ff6ac1;
-    --primary-light: #ff8ad8;
-    --primary-dark: #ff4aaa;
-    --secondary: #9d72ff;
-    --accent: #72f1b8;
-    --border: #495495;
-    --foreground: #f8f8f2;
-    --muted: #a599e9;
-  }
-
-  /* Forest Theme */
-  .theme-forest {
-    --background: #0d1b1e;
-    --surface: #1a2f33;
-    --primary: #2dd4bf;
-    --primary-light: #5eead4;
-    --primary-dark: #14b8a6;
-    --secondary: #34d399;
-    --accent: #a7f3d0;
-    --border: #234e52;
-    --foreground: #ecfdf5;
-    --muted: #6ee7b7;
-  }
-
-  /* Ocean Theme */
-  .theme-ocean {
-    --background: #0c1821;
-    --surface: #1b2838;
-    --primary: #3b82f6;
-    --primary-light: #60a5fa;
-    --primary-dark: #2563eb;
-    --secondary: #06b6d4;
-    --accent: #38bdf8;
-    --border: #1e3a5f;
-    --foreground: #dbeafe;
-    --muted: #7dd3fc;
-  }
-
-  * {
-    border-color: var(--border);
-  }
-
-  body {
-    background-color: var(--background);
-    color: var(--foreground);
-    font-family: var(--font-inter), 'Inter', sans-serif;
-  }
-
-  code, pre {
-    font-family: var(--font-jetbrains-mono), 'JetBrains Mono', monospace;
-  }
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}
-
-/* Custom scrollbar */
-::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-}
-
-::-webkit-scrollbar-track {
-  background: #1a1a1f;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #2a2a2f;
-  border-radius: 5px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #3a3a3f;
-}
-
-/* Animation classes */
-.animate-slide-in {
-  animation: slideIn 0.2s ease-out;
-}
-
-.animate-fade-in {
-  animation: fadeIn 0.2s ease-in-out;
-}
-
-@keyframes slideIn {
-  from {
-    transform: translateY(-10px);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-/* Monaco Editor theme overrides */
-.monaco-editor .margin {
-  background-color: #0a0a0f !important;
-}
-
-.monaco-editor {
-  background-color: #0a0a0f !important;
-}
diff --git a/app/ide/page.tsx b/app/ide/page.tsx
deleted file mode 100644
index 85ad4bd..0000000
--- a/app/ide/page.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-import App from "../../src/App";
-export default function Page() {
-  return <App />;
-}
diff --git a/app/index.html b/app/index.html
deleted file mode 100644
index dd81c8f..0000000
--- a/app/index.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>AeThex Studio - Roblox Lua Editor</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
-    <link href="/app/main.css" rel="stylesheet" />
-</head>
-<body>
-    <div id="root"></div>
-    <script type="module" src="/app/App.tsx"></script>
-</body>
-</html>
diff --git a/app/layout.tsx b/app/layout.tsx
deleted file mode 100644
index 313b471..0000000
--- a/app/layout.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import type { Metadata } from "next";
-import Toaster from "../src/components/ui/toaster";
-import "./globals.css";
-
-export const metadata: Metadata = {
-  title: "AeThex Studio",
-  description: "The Next-Generation Cross-Platform IDE",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en" className="dark">
-      <head>
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link
-          rel="preconnect"
-          href="https://fonts.gstatic.com"
-          crossOrigin="anonymous"
-        />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Source+Code+Pro:wght@400&family=Space+Grotesk:wght@400;700&display=swap"
-          rel="stylesheet"
-        />
-      </head>
-      <body className="font-body antialiased">
-        {children}
-        <Toaster />
-      </body>
-    </html>
-  );
-}
diff --git a/app/main.css b/app/main.css
deleted file mode 100644
index e184a38..0000000
--- a/app/main.css
+++ /dev/null
@@ -1,61 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  * {
-    border-color: var(--border);
-  }
-  body {
-    font-family: 'Inter', sans-serif;
-    background:
-      radial-gradient(circle at 20% 50%, oklch(0.20 0.08 265 / 0.3) 0%, transparent 50%),
-      radial-gradient(circle at 80% 80%, oklch(0.20 0.08 150 / 0.2) 0%, transparent 50%),
-      oklch(0.15 0.02 265);
-    background-attachment: fixed;
-  }
-  h1, h2, h3, h4, h5, h6 {
-    font-family: 'Space Grotesk', sans-serif;
-  }
-  code, pre {
-    font-family: 'JetBrains Mono', monospace;
-  }
-}
-
-@layer components {
-  .btn-accent-hover {
-    transition: all 0.2s ease;
-  }
-  .btn-accent-hover:hover {
-    transform: scale(1.02);
-    filter: brightness(1.1);
-  }
-  .btn-accent-hover:active {
-    transform: scale(0.98);
-  }
-}
-
-:root {
-  --background: oklch(0.15 0.02 265);
-  --foreground: oklch(0.85 0.03 265);
-  --card: oklch(0.20 0.03 265);
-  --card-foreground: oklch(0.85 0.03 265);
-  --popover: oklch(0.20 0.03 265);
-  --popover-foreground: oklch(0.85 0.03 265);
-  --primary: oklch(0.45 0.20 265);
-  --primary-foreground: oklch(0.98 0 0);
-  --secondary: oklch(0.25 0.04 265);
-  --secondary-foreground: oklch(0.85 0.03 265);
-  --muted: oklch(0.22 0.03 265);
-  --muted-foreground: oklch(0.55 0.03 265);
-  --accent: oklch(0.75 0.20 150);
-  --accent-foreground: oklch(0.15 0.02 265);
-  --destructive: oklch(0.55 0.22 25);
-  --destructive-foreground: oklch(0.98 0 0);
-  --border: oklch(0.30 0.04 265);
-  --input: oklch(0.30 0.04 265);
-  --ring: oklch(0.75 0.20 150);
-  --radius: 0.5rem;
-}
diff --git a/app/page.tsx b/app/page.tsx
deleted file mode 100644
index afa72a5..0000000
--- a/app/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import App from "../src/App";
-
-export default function Page() {
-  return <App />;
-}
diff --git a/app/studio-theme.css b/app/studio-theme.css
deleted file mode 100644
index 451fb21..0000000
--- a/app/studio-theme.css
+++ /dev/null
@@ -1,865 +0,0 @@
-/* Tablet region: 1015x768px - global UI sizing */
-@media (min-width: 900px) and (max-width: 1100px) and (min-height: 700px) and (max-height: 800px) {
-  .ide-container.grid-layout {
-    max-width: 1015px;
-    max-height: 768px;
-    margin: 0 auto;
-    grid-template-rows: 60px 1fr 120px;
-    grid-template-columns: 90px 1fr 220px;
-    grid-template-areas:
-      "title title title"
-      "sidebar editor right"
-      "bottom bottom bottom";
-    border-radius: 20px;
-    box-shadow: 0 2px 24px 0 rgba(0,0,0,0.20);
-    background: #101014;
-    padding: 12px;
-    overflow: hidden;
-  }
-  .grid-title {
-    font-size: 1.25em;
-    padding: 16px 20px;
-  }
-  .grid-sidebar {
-    min-width: 90px;
-    max-width: 120px;
-    font-size: 1.18em;
-    padding: 16px 0;
-    border-radius: 14px;
-    box-shadow: 0 1px 10px 0 rgba(0,0,0,0.12);
-  }
-  .grid-right {
-    min-width: 180px;
-    max-width: 220px;
-    font-size: 1.15em;
-    padding: 16px 0;
-    border-radius: 14px;
-    box-shadow: 0 1px 10px 0 rgba(0,0,0,0.12);
-  }
-  .grid-editor {
-    min-width: 0;
-    padding: 0 3vw;
-    font-size: 1.22em;
-    border-radius: 16px;
-    box-shadow: 0 1px 10px 0 rgba(0,0,0,0.12);
-    background: #181818;
-  }
-  .grid-bottom {
-    min-height: 120px;
-    max-height: 180px;
-    font-size: 1.15em;
-    padding: 24px 2vw 56px 2vw;
-    border-radius: 14px;
-    box-shadow: 0 1px 10px 0 rgba(0,0,0,0.12);
-    background: #15151a;
-    box-sizing: border-box;
-  }
-  .title-bar {
-    padding: 16px 20px;
-    font-size: 1.25em;
-    border-radius: 14px;
-    box-shadow: 0 1px 10px 0 rgba(0,0,0,0.12);
-    background: #18181c;
-  }
-  .editor-tab, .file-item, .bottom-tab {
-    min-height: 52px;
-    font-size: 1.22em;
-    padding: 0 20px;
-    border-radius: 10px;
-    margin-bottom: 8px;
-    background: #222226;
-    box-shadow: 0 1px 6px 0 rgba(0,0,0,0.10);
-    touch-action: manipulation;
-  }
-  .bottom-collapse-btn {
-    font-size: 1.6em !important;
-    min-width: 56px;
-    min-height: 56px;
-    padding: 0 14px;
-    border-radius: 10px;
-    touch-action: manipulation;
-  }
-  .network-viz.docked {
-    max-width: 440px;
-    padding: 18px 20px;
-    margin: 12px auto;
-    font-size: 1.15em;
-    border-radius: 14px;
-    box-shadow: 0 1px 10px 0 rgba(0,0,0,0.12);
-  }
-}
-/* Responsive: docked status panel inside bottom panel for tablet/mobile */
-.network-viz.docked {
-  margin: 16px auto;
-  padding: 16px 18px;
-  border-radius: 14px;
-  background: #18181c;
-  box-shadow: 0 1px 8px 0 rgba(0,0,0,0.10);
-  max-width: 420px;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 12px;
-}
-.network-viz-header {
-  font-size: 1.1em;
-  font-weight: 600;
-  margin-bottom: 8px;
-  color: #e0e0e0;
-}
-.network-nodes {
-  display: flex;
-  flex-direction: row;
-  gap: 18px;
-}
-.network-node {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-}
-.node-dot {
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  margin-bottom: 4px;
-}
-.node-dot.foundation { background: #ff0000; }
-.node-dot.corporation { background: #0066ff; }
-.node-dot.labs { background: #ffa500; }
-.node-label {
-  font-size: 1em;
-  font-weight: 500;
-}
-.node-status {
-  font-size: 0.95em;
-  color: #b0b0b0;
-  text-align: center;
-}
-@media (max-width: 1024px) {
-  .network-viz.docked {
-    max-width: 98vw;
-    padding: 12px 8px;
-    margin: 8px auto;
-    font-size: 1.08em;
-  }
-  .network-nodes {
-    gap: 10px;
-  }
-  .network-node {
-    gap: 2px;
-  }
-  .node-dot {
-    width: 16px;
-    height: 16px;
-  }
-}
-@media (min-width: 768px) and (max-width: 1024px) {
-  .ide-container.grid-layout {
-    grid-template-rows: 56px 1fr 120px;
-    grid-template-columns: 72px 1fr 180px;
-    grid-template-areas:
-      "title title title"
-      "sidebar editor right"
-      "bottom bottom bottom";
-    border-radius: 18px;
-    box-shadow: 0 2px 16px 0 rgba(0,0,0,0.18);
-    background: #101014;
-    padding: 8px;
-  }
-  .grid-sidebar {
-    min-width: 56px;
-    max-width: 90px;
-    font-size: 1.15em;
-    padding: 12px 0;
-    border-right: none;
-    background: #18181c;
-    border-radius: 12px;
-    box-shadow: 0 1px 8px 0 rgba(0,0,0,0.10);
-  }
-  .grid-right {
-    min-width: 100px;
-    max-width: 180px;
-    font-size: 1.1em;
-    border-left: none;
-    background: #18181c;
-    border-radius: 12px;
-    box-shadow: 0 1px 8px 0 rgba(0,0,0,0.10);
-  }
-  .grid-editor {
-    min-width: 0;
-    padding: 0 3vw;
-    font-size: 1.18em;
-    touch-action: manipulation;
-    border-radius: 14px;
-    box-shadow: 0 1px 8px 0 rgba(0,0,0,0.10);
-    background: #181818;
-  }
-  .grid-bottom {
-    min-height: 80px;
-    max-height: 160px;
-    font-size: 1.1em;
-    padding: 16px 2vw 40px 2vw;
-    border-radius: 12px;
-    box-shadow: 0 1px 8px 0 rgba(0,0,0,0.10);
-    background: #15151a;
-    box-sizing: border-box;
-  }
-  @media (max-width: 1024px) {
-    .grid-bottom {
-      padding-bottom: 56px;
-      padding-top: 24px;
-      min-height: 100px;
-      max-height: 180px;
-    }
-  }
-  .title-bar {
-    padding: 12px 12px;
-    font-size: 1.18em;
-    border-radius: 12px;
-    box-shadow: 0 1px 8px 0 rgba(0,0,0,0.10);
-    background: #18181c;
-  }
-  .editor-tab, .file-item, .bottom-tab {
-    min-height: 48px;
-    font-size: 1.18em;
-    padding: 0 16px;
-    touch-action: manipulation;
-    border-radius: 8px;
-    margin-bottom: 6px;
-    background: #222226;
-    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.08);
-  }
-}
-
-@media (max-width: 768px) {
-  .ide-container.grid-layout {
-    grid-template-rows: 56px 1fr 100px;
-    grid-template-columns: 1fr;
-    grid-template-areas:
-      "title"
-      "editor"
-      "bottom";
-    width: 100vw;
-    height: 100vh;
-    overflow: hidden;
-    border-radius: 0;
-    box-shadow: none;
-    background: #101014;
-    padding: 0;
-  }
-  .grid-sidebar,
-  .grid-right {
-    display: none !important;
-  }
-  .grid-editor {
-    grid-area: editor;
-    width: 100vw;
-    height: calc(100vh - 56px - 100px);
-    min-width: 0;
-    min-height: 0;
-    overflow: auto;
-    font-size: 1.22em;
-    padding: 0 4vw;
-    touch-action: manipulation;
-    border-radius: 0;
-    box-shadow: none;
-    background: #181818;
-  }
-  .grid-bottom {
-    min-height: 64px;
-    max-height: 120px;
-    width: 100vw;
-    overflow-y: auto;
-    font-size: 1.15em;
-    padding: 0 2vw;
-    border-radius: 0;
-    box-shadow: none;
-    background: #15151a;
-  }
-  .title-bar {
-    width: 100vw;
-    min-width: 0;
-    padding: 12px 12px;
-    font-size: 1.22em;
-    border-radius: 0;
-    box-shadow: none;
-    background: #18181c;
-  }
-  .editor-tab, .file-item, .bottom-tab {
-    min-height: 48px;
-    font-size: 1.22em;
-    padding: 0 16px;
-    touch-action: manipulation;
-    border-radius: 0;
-    margin-bottom: 8px;
-    background: #222226;
-    box-shadow: none;
-  }
-  .grid-bottom.collapsed {
-    display: none !important;
-  }
-}
-
-/* Tablet-specific layout: 768px to 1024px */
-@media (min-width: 768px) and (max-width: 1024px) {
-  .ide-container.grid-layout {
-    grid-template-rows: 48px 1fr 120px;
-    grid-template-columns: 80px 1fr 220px;
-    grid-template-areas:
-      "title title title"
-      "sidebar editor right"
-      "bottom bottom bottom";
-    width: 100vw;
-    height: 100vh;
-    overflow: hidden;
-  }
-  .grid-sidebar {
-    min-width: 60px;
-    max-width: 100px;
-    font-size: 1.1em;
-    padding: 8px 0;
-    border-right: 1px solid #222;
-  }
-  .grid-right {
-    min-width: 120px;
-    max-width: 220px;
-    font-size: 1em;
-    border-left: 1px solid #222;
-  }
-  .grid-editor {
-    min-width: 0;
-    padding: 0 2vw;
-    font-size: 1.1em;
-    .bottom-tab {
-      display: inline-block;
-      padding: 14px 28px;
-      font-size: 1.18em;
-      border-radius: 10px 10px 0 0;
-      background: #222226;
-      color: #e0e0e0;
-      margin-right: 12px;
-      cursor: pointer;
-      transition: background 0.2s;
-      min-width: 56px;
-      min-height: 48px;
-      touch-action: manipulation;
-    }
-    .bottom-tab.active {
-      background: #333344;
-      color: #fff;
-    }
-    .bottom-collapse-btn {
-      font-size: 1.35em !important;
-      min-width: 44px;
-      min-height: 44px;
-      padding: 0 8px;
-      border-radius: 8px;
-      touch-action: manipulation;
-    }
-  @media (max-width: 1024px) {
-    .bottom-tab {
-      font-size: 1.22em;
-      min-width: 64px;
-      min-height: 52px;
-      padding: 16px 32px;
-    }
-    .bottom-collapse-btn {
-      font-size: 1.5em !important;
-      min-width: 52px;
-      min-height: 52px;
-      padding: 0 12px;
-    }
-  }
-    padding: 0 12px;
-    touch-action: manipulation;
-  }
-}
-
-/* Mobile layout: <768px */
-@media (max-width: 768px) {
-  .ide-container.grid-layout {
-    grid-template-rows: 48px 1fr 120px;
-    grid-template-columns: 1fr;
-    grid-template-areas:
-      "title"
-      "editor"
-      "bottom";
-    width: 100vw;
-    height: 100vh;
-    overflow: hidden;
-  }
-  .grid-sidebar,
-  .grid-right {
-    display: none !important;
-  }
-  .grid-editor {
-    grid-area: editor;
-    width: 100vw;
-    height: calc(100vh - 48px - 120px);
-    min-width: 0;
-    min-height: 0;
-    overflow: auto;
-    font-size: 1.15em;
-    padding: 0 2vw;
-    touch-action: manipulation;
-  }
-  .grid-bottom {
-    min-height: 80px;
-    max-height: 160px;
-    width: 100vw;
-    overflow-y: auto;
-    font-size: 1.1em;
-    padding: 0 1vw;
-  }
-  .title-bar {
-    width: 100vw;
-    min-width: 0;
-    padding: 8px 8px;
-    font-size: 1.15em;
-  }
-  .editor-tab, .file-item, .bottom-tab {
-    min-height: 44px;
-    font-size: 1.15em;
-    padding: 0 12px;
-    touch-action: manipulation;
-  }
-  .grid-bottom.collapsed {
-    display: none !important;
-  }
-}
-/* AeThex Studio Mockup Theme */
-@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500;700&family=JetBrains+Mono:wght@400;700&display=swap');
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body, .ide-container {
-  font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
-  background: #0a0a0a;
-  color: #e0e0e0;
-  height: 100vh;
-}
-
-body::before {
-  content: '';
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: repeating-linear-gradient(
-    0deg,
-    rgba(0, 0, 0, 0.15),
-    rgba(0, 0, 0, 0.15) 1px,
-    transparent 1px,
-    transparent 2px
-  );
-  pointer-events: none;
-  z-index: 1000;
-}
-
-
-
-.ide-container {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  width: 100vw;
-  overflow: hidden;
-}
-
-.title-bar {
-  background: #0d0d0d;
-  border-bottom: 2px solid #1a1a1a;
-  padding: 8px 16px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  position: relative;
-}
-.title-bar::after {
-  content: '';
-  position: absolute;
-  bottom: -2px;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  background: linear-gradient(90deg, #ff0000 33%, #0066ff 33%, #0066ff 66%, #ffa500 66%);
-}
-.title-left {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-}
-.logo-small {
-  font-size: 1.2em;
-  font-weight: 700;
-  letter-spacing: 3px;
-  background: linear-gradient(90deg, #ff0000, #0066ff, #ffa500);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-.project-name {
-  color: #666;
-  font-size: 0.9em;
-}
-.project-name span {
-  color: #0066ff;
-  font-weight: 700;
-}
-.title-right {
-  display: flex;
-  gap: 15px;
-  font-size: 0.85em;
-}
-.status-indicator {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  animation: pulse 2s infinite;
-}
-.status-dot.foundation { background: #ff0000; }
-.status-dot.corporation { background: #0066ff; }
-.status-dot.labs { background: #ffa500; }
-@keyframes pulse {
-  0%, 100% { opacity: 1; box-shadow: 0 0 8px currentColor; }
-  50% { opacity: 0.6; box-shadow: 0 0 4px currentColor; }
-}
-
-.main-content {
-  display: flex;
-  flex: 1;
-  overflow: hidden;
-}
-.sidebar {
-  width: 250px;
-  background: #0d0d0d;
-  border-right: 1px solid #1a1a1a;
-  display: flex;
-  flex-direction: column;
-}
-.sidebar-section {
-  border-bottom: 1px solid #1a1a1a;
-}
-.sidebar-header {
-  padding: 12px 16px;
-  font-size: 0.75em;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-  color: #666;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  border-left: 3px solid;
-}
-.sidebar-header.foundation { border-color: #ff0000; }
-.sidebar-header.corporation { border-color: #0066ff; }
-.sidebar-header.labs { border-color: #ffa500; }
-.file-tree {
-  padding: 8px 0;
-}
-.file-item {
-  padding: 6px 16px 6px 24px;
-  font-size: 0.85em;
-  cursor: pointer;
-  transition: background 0.2s;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.file-item:hover {
-  background: #1a1a1a;
-}
-.file-item.active {
-  background: #1a1a1a;
-  border-left: 2px solid #0066ff;
-}
-.file-icon {
-  color: #666;
-}
-.editor-area {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  background: #0f0f0f;
-}
-.editor-tabs {
-  background: #0d0d0d;
-  border-bottom: 1px solid #1a1a1a;
-  display: flex;
-  padding: 0;
-}
-.editor-tab {
-  padding: 10px 20px;
-  font-size: 0.85em;
-  background: #0d0d0d;
-  border-right: 1px solid #1a1a1a;
-  cursor: pointer;
-  transition: background 0.2s;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.editor-tab:hover {
-  background: #1a1a1a;
-}
-.editor-tab.active {
-  background: #0f0f0f;
-  border-bottom: 2px solid #0066ff;
-}
-.editor-content {
-  flex: 1;
-  overflow: auto;
-  padding: 20px;
-}
-.code-line {
-  display: flex;
-  font-size: 0.9em;
-  line-height: 1.6;
-  font-family: 'JetBrains Mono', monospace;
-}
-.line-number {
-  color: #333;
-  width: 40px;
-  text-align: right;
-  padding-right: 20px;
-  user-select: none;
-}
-.line-content {
-  flex: 1;
-}
-.keyword { color: #ff0000; font-weight: 700; }
-.function { color: #0066ff; }
-.comment { color: #ffa500; font-style: italic; }
-.string { color: #00ff88; }
-.number { color: #ff6b9d; }
-.variable { color: #e0e0e0; }
-.operator { color: #999; }
-.right-panel {
-  width: 320px;
-  background: #0d0d0d;
-  border-left: 1px solid #1a1a1a;
-  display: flex;
-  flex-direction: column;
-}
-.panel-header {
-  padding: 12px 16px;
-  font-size: 0.75em;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-  border-bottom: 1px solid #1a1a1a;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.panel-content {
-  flex: 1;
-  overflow: auto;
-  padding: 16px;
-}
-.copilot-message {
-  margin-bottom: 16px;
-  padding: 12px;
-  background: #1a1a1a;
-  border-left: 3px solid;
-  font-size: 0.85em;
-  line-height: 1.6;
-}
-.copilot-message.labs { border-color: #ffa500; }
-.copilot-message.foundation { border-color: #ff0000; }
-.copilot-message.corporation { border-color: #0066ff; }
-.copilot-label {
-  font-size: 0.75em;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  margin-bottom: 8px;
-  font-weight: 700;
-}
-.copilot-label.labs { color: #ffa500; }
-.copilot-label.foundation { color: #ff0000; }
-.copilot-label.corporation { color: #0066ff; }
-.bottom-panel {
-  height: 200px;
-  background: #0d0d0d;
-  border-top: 1px solid #1a1a1a;
-  display: flex;
-  flex-direction: column;
-}
-.bottom-tabs-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 8px;
-}
-.bottom-tabs {
-  display: flex;
-  gap: 0;
-  border-bottom: 1px solid #1a1a1a;
-}
-.bottom-tab {
-  padding: 8px 16px;
-  font-size: 0.8em;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  cursor: pointer;
-  border-right: 1px solid #1a1a1a;
-  transition: background 0.2s;
-}
-.bottom-tab:hover {
-  background: #1a1a1a;
-}
-.bottom-tab.active {
-  background: #1a1a1a;
-  border-bottom: 2px solid #0066ff;
-}
-.bottom-content {
-  flex: 1;
-  overflow: auto;
-  padding: 12px;
-}
-.terminal-output {
-  flex: 1;
-  overflow: auto;
-  padding: 12px;
-  font-size: 0.85em;
-  line-height: 1.6;
-}
-.terminal-line {
-  margin: 2px 0;
-}
-.terminal-line.foundation { color: #ff0000; }
-.terminal-line.corporation { color: #0066ff; }
-.terminal-line.labs { color: #ffa500; }
-.terminal-line.success { color: #00ff00; }
-.terminal-line.error { color: #ff0000; }
-.network-viz {
-  position: fixed;
-  bottom: 220px;
-  right: 20px;
-  width: 300px;
-  background: rgba(13, 13, 13, 0.95);
-  border: 1px solid #1a1a1a;
-  padding: 16px;
-  font-size: 0.75em;
-  z-index: 100;
-}
-.network-viz-header {
-  text-transform: uppercase;
-  letter-spacing: 2px;
-  margin-bottom: 12px;
-  color: #666;
-}
-.network-node {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin: 8px 0;
-  padding: 8px;
-  background: #0f0f0f;
-}
-.node-dot {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  animation: pulse 2s infinite;
-}
-.node-dot.foundation { background: #ff0000; }
-.node-dot.corporation { background: #0066ff; }
-.node-dot.labs { background: #ffa500; }
-.node-info {
-  flex: 1;
-}
-.node-label {
-  font-weight: 700;
-  margin-bottom: 2px;
-}
-.node-status {
-  color: #666;
-  font-size: 0.9em;
-}
-
-.grid-title {
-  grid-area: title;
-  z-index: 2;
-}
-.grid-sidebar {
-  grid-area: sidebar;
-  min-width: 180px;
-  max-width: 260px;
-  overflow-y: auto;
-  border-right: 2px solid #181818;
-  background: #111;
-  z-index: 1;
-}
-.grid-editor {
-  grid-area: editor;
-  overflow: auto;
-  background: #181818;
-}
-.grid-right {
-  grid-area: right;
-  min-width: 220px;
-  max-width: 400px;
-  border-left: 2px solid #181818;
-  background: #15151a;
-  overflow-y: auto;
-}
-.grid-bottom {
-  grid-area: bottom;
-  border-top: 2px solid #181818;
-  background: #101014;
-  min-height: 120px;
-  max-height: 220px;
-  overflow-y: auto;
-}
-.grid-network {
-  position: fixed;
-  right: 24px;
-  bottom: 24px;
-  z-index: 10;
-}
-
-.title-bar {
-  background: #0d0d0d;
-  border-bottom: 2px solid #1a1a1a;
-  padding: 8px 16px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  position: relative;
-}
-
-.title-bar::after {
-  content: '';
-  position: absolute;
-  bottom: -2px;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  background: linear-gradient(90deg, #ff0000 33%, #0066ff 33%, #0066ff 66%, #ffa500 66%);
-}
-
-.title-left {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-}
-
-.logo-small {
-  font-size: 1.2em;
-  font-weight: 700;
-  letter-spacing: 3px;
-}
-
-/* ...continue copying the rest of the CSS from the mockup as needed... */
diff --git a/components/NewProjectModal.tsx b/components/NewProjectModal.tsx
index e47a530..bed8dfe 100644
--- a/components/NewProjectModal.tsx
+++ b/components/NewProjectModal.tsx
@@ -11,7 +11,7 @@ import { Switch } from '@/components/ui/switch';
 import { Label } from '@/components/ui/label';
 import { Progress } from '@/components/ui/progress';
 import { useAppStore } from '@/store/app-store';
-import { templates } from '@/lib/templates';
+import { templates, Template } from '../lib/templates';
 import { getPlatformIcon } from '@/lib/utils';
 
 export function NewProjectModal() {
diff --git a/middleware.ts b/middleware.ts
new file mode 100644
index 0000000..2b43d4b
--- /dev/null
+++ b/middleware.ts
@@ -0,0 +1,19 @@
+import { type NextRequest } from 'next/server';
+import { updateSession } from '@/lib/supabase/middleware';
+
+export async function middleware(request: NextRequest) {
+  return await updateSession(request);
+}
+
+export const config = {
+  matcher: [
+    /*
+     * Match all request paths except for the ones starting with:
+     * - _next/static (static files)
+     * - _next/image (image optimization files)
+     * - favicon.ico (favicon file)
+     * - public folder
+     */
+    '/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
+  ],
+};
diff --git a/package-lock.json b/package-lock.json
index 3e6c8a2..8076b25 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,10 +18,13 @@
         "@radix-ui/react-avatar": "^1.1.3",
         "@radix-ui/react-checkbox": "^1.1.4",
         "@radix-ui/react-collapsible": "^1.1.11",
+        "@radix-ui/react-context-menu": "^2.2.16",
         "@radix-ui/react-dialog": "^1.1.6",
         "@radix-ui/react-dropdown-menu": "^2.1.6",
+        "@radix-ui/react-hover-card": "^1.1.15",
         "@radix-ui/react-label": "^2.1.2",
         "@radix-ui/react-menubar": "^1.1.6",
+        "@radix-ui/react-navigation-menu": "^1.2.14",
         "@radix-ui/react-popover": "^1.1.6",
         "@radix-ui/react-progress": "^1.1.2",
         "@radix-ui/react-radio-group": "^1.2.3",
@@ -33,29 +36,40 @@
         "@radix-ui/react-switch": "^1.1.3",
         "@radix-ui/react-tabs": "^1.1.3",
         "@radix-ui/react-toast": "^1.2.6",
+        "@radix-ui/react-toggle": "^1.1.10",
+        "@radix-ui/react-toggle-group": "^1.1.11",
         "@radix-ui/react-tooltip": "^1.1.8",
+        "@sentry/browser": "^10.38.0",
+        "@supabase/ssr": "^0.8.0",
+        "@supabase/supabase-js": "^2.93.3",
         "@tailwindcss/typography": "^0.5.13",
         "autoprefixer": "^10.4.23",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "cmdk": "^1.1.1",
         "date-fns": "^3.6.0",
         "dotenv": "^16.5.0",
         "embla-carousel-react": "^8.6.0",
         "firebase": "^11.9.1",
         "genkit": "^1.20.0",
+        "input-otp": "^1.4.2",
         "lucide-react": "^0.475.0",
         "marked": "^12.0.2",
         "next": "15.5.9",
+        "next-themes": "^0.4.6",
         "patch-package": "^8.0.0",
+        "posthog-js": "^1.337.0",
         "react": "^19.2.1",
         "react-day-picker": "^9.11.3",
         "react-dom": "^19.2.1",
         "react-hook-form": "^7.54.2",
+        "react-resizable-panels": "^4.5.9",
         "react-syntax-highlighter": "^15.5.0",
         "recharts": "^2.15.1",
         "sonner": "^2.0.7",
         "tailwind-merge": "^3.0.1",
         "tailwindcss-animate": "^1.0.7",
+        "vaul": "^1.1.2",
         "zod": "^3.24.2",
         "zustand": "^5.0.10"
       },
@@ -3608,6 +3622,18 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/@opentelemetry/api-logs": {
+      "version": "0.208.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/api-logs/-/api-logs-0.208.0.tgz",
+      "integrity": "sha512-CjruKY9V6NMssL/T1kAFgzosF1v9o6oeN+aX5JB/C/xPNtmgIJqcXHG7fA82Ou1zCpWGl4lROQUKwUNE1pMCyg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/api": "^1.3.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/@opentelemetry/auto-instrumentations-node": {
       "version": "0.49.2",
       "resolved": "https://registry.npmjs.org/@opentelemetry/auto-instrumentations-node/-/auto-instrumentations-node-0.49.2.tgz",
@@ -3826,6 +3852,40 @@
         "node": ">=14"
       }
     },
+    "node_modules/@opentelemetry/exporter-logs-otlp-http": {
+      "version": "0.208.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/exporter-logs-otlp-http/-/exporter-logs-otlp-http-0.208.0.tgz",
+      "integrity": "sha512-jOv40Bs9jy9bZVLo/i8FwUiuCvbjWDI+ZW13wimJm4LjnlwJxGgB+N/VWOZUTpM+ah/awXeQqKdNlpLf2EjvYg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/api-logs": "0.208.0",
+        "@opentelemetry/core": "2.2.0",
+        "@opentelemetry/otlp-exporter-base": "0.208.0",
+        "@opentelemetry/otlp-transformer": "0.208.0",
+        "@opentelemetry/sdk-logs": "0.208.0"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.6.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.3.0"
+      }
+    },
+    "node_modules/@opentelemetry/exporter-logs-otlp-http/node_modules/@opentelemetry/core": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/core/-/core-2.2.0.tgz",
+      "integrity": "sha512-FuabnnUm8LflnieVxs6eP7Z383hgQU4W1e3KJS6aOG3RxWxcHyBxH8fDMHNgu/gFx/M2jvTOW/4/PHhLz6bjWw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/semantic-conventions": "^1.29.0"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.6.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.10.0"
+      }
+    },
     "node_modules/@opentelemetry/exporter-trace-otlp-grpc": {
       "version": "0.52.1",
       "resolved": "https://registry.npmjs.org/@opentelemetry/exporter-trace-otlp-grpc/-/exporter-trace-otlp-grpc-0.52.1.tgz",
@@ -5265,6 +5325,37 @@
         "node": ">=10"
       }
     },
+    "node_modules/@opentelemetry/otlp-exporter-base": {
+      "version": "0.208.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/otlp-exporter-base/-/otlp-exporter-base-0.208.0.tgz",
+      "integrity": "sha512-gMd39gIfVb2OgxldxUtOwGJYSH8P1kVFFlJLuut32L6KgUC4gl1dMhn+YC2mGn0bDOiQYSk/uHOdSjuKp58vvA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/core": "2.2.0",
+        "@opentelemetry/otlp-transformer": "0.208.0"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.6.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.3.0"
+      }
+    },
+    "node_modules/@opentelemetry/otlp-exporter-base/node_modules/@opentelemetry/core": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/core/-/core-2.2.0.tgz",
+      "integrity": "sha512-FuabnnUm8LflnieVxs6eP7Z383hgQU4W1e3KJS6aOG3RxWxcHyBxH8fDMHNgu/gFx/M2jvTOW/4/PHhLz6bjWw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/semantic-conventions": "^1.29.0"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.6.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.10.0"
+      }
+    },
     "node_modules/@opentelemetry/otlp-grpc-exporter-base": {
       "version": "0.52.1",
       "resolved": "https://registry.npmjs.org/@opentelemetry/otlp-grpc-exporter-base/-/otlp-grpc-exporter-base-0.52.1.tgz",
@@ -5349,6 +5440,91 @@
         "@opentelemetry/api": ">=1.4.0 <1.10.0"
       }
     },
+    "node_modules/@opentelemetry/otlp-transformer": {
+      "version": "0.208.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/otlp-transformer/-/otlp-transformer-0.208.0.tgz",
+      "integrity": "sha512-DCFPY8C6lAQHUNkzcNT9R+qYExvsk6C5Bto2pbNxgicpcSWbe2WHShLxkOxIdNcBiYPdVHv/e7vH7K6TI+C+fQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/api-logs": "0.208.0",
+        "@opentelemetry/core": "2.2.0",
+        "@opentelemetry/resources": "2.2.0",
+        "@opentelemetry/sdk-logs": "0.208.0",
+        "@opentelemetry/sdk-metrics": "2.2.0",
+        "@opentelemetry/sdk-trace-base": "2.2.0",
+        "protobufjs": "^7.3.0"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.6.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.3.0"
+      }
+    },
+    "node_modules/@opentelemetry/otlp-transformer/node_modules/@opentelemetry/core": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/core/-/core-2.2.0.tgz",
+      "integrity": "sha512-FuabnnUm8LflnieVxs6eP7Z383hgQU4W1e3KJS6aOG3RxWxcHyBxH8fDMHNgu/gFx/M2jvTOW/4/PHhLz6bjWw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/semantic-conventions": "^1.29.0"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.6.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.10.0"
+      }
+    },
+    "node_modules/@opentelemetry/otlp-transformer/node_modules/@opentelemetry/resources": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/resources/-/resources-2.2.0.tgz",
+      "integrity": "sha512-1pNQf/JazQTMA0BiO5NINUzH0cbLbbl7mntLa4aJNmCCXSj0q03T5ZXXL0zw4G55TjdL9Tz32cznGClf+8zr5A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/core": "2.2.0",
+        "@opentelemetry/semantic-conventions": "^1.29.0"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.6.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.3.0 <1.10.0"
+      }
+    },
+    "node_modules/@opentelemetry/otlp-transformer/node_modules/@opentelemetry/sdk-metrics": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-metrics/-/sdk-metrics-2.2.0.tgz",
+      "integrity": "sha512-G5KYP6+VJMZzpGipQw7Giif48h6SGQ2PFKEYCybeXJsOCB4fp8azqMAAzE5lnnHK3ZVwYQrgmFbsUJO/zOnwGw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/core": "2.2.0",
+        "@opentelemetry/resources": "2.2.0"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.6.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.9.0 <1.10.0"
+      }
+    },
+    "node_modules/@opentelemetry/otlp-transformer/node_modules/@opentelemetry/sdk-trace-base": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-trace-base/-/sdk-trace-base-2.2.0.tgz",
+      "integrity": "sha512-xWQgL0Bmctsalg6PaXExmzdedSp3gyKV8mQBwK/j9VGdCDu2fmXIb2gAehBKbkXCpJ4HPkgv3QfoJWRT4dHWbw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/core": "2.2.0",
+        "@opentelemetry/resources": "2.2.0",
+        "@opentelemetry/semantic-conventions": "^1.29.0"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.6.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.3.0 <1.10.0"
+      }
+    },
     "node_modules/@opentelemetry/propagation-utils": {
       "version": "0.30.16",
       "resolved": "https://registry.npmjs.org/@opentelemetry/propagation-utils/-/propagation-utils-0.30.16.tgz",
@@ -5747,6 +5923,54 @@
         "node": ">=14"
       }
     },
+    "node_modules/@opentelemetry/sdk-logs": {
+      "version": "0.208.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-logs/-/sdk-logs-0.208.0.tgz",
+      "integrity": "sha512-QlAyL1jRpOeaqx7/leG1vJMp84g0xKP6gJmfELBpnI4O/9xPX+Hu5m1POk9Kl+veNkyth5t19hRlN6tNY1sjbA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/api-logs": "0.208.0",
+        "@opentelemetry/core": "2.2.0",
+        "@opentelemetry/resources": "2.2.0"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.6.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.4.0 <1.10.0"
+      }
+    },
+    "node_modules/@opentelemetry/sdk-logs/node_modules/@opentelemetry/core": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/core/-/core-2.2.0.tgz",
+      "integrity": "sha512-FuabnnUm8LflnieVxs6eP7Z383hgQU4W1e3KJS6aOG3RxWxcHyBxH8fDMHNgu/gFx/M2jvTOW/4/PHhLz6bjWw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/semantic-conventions": "^1.29.0"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.6.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.10.0"
+      }
+    },
+    "node_modules/@opentelemetry/sdk-logs/node_modules/@opentelemetry/resources": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/resources/-/resources-2.2.0.tgz",
+      "integrity": "sha512-1pNQf/JazQTMA0BiO5NINUzH0cbLbbl7mntLa4aJNmCCXSj0q03T5ZXXL0zw4G55TjdL9Tz32cznGClf+8zr5A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/core": "2.2.0",
+        "@opentelemetry/semantic-conventions": "^1.29.0"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.6.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.3.0 <1.10.0"
+      }
+    },
     "node_modules/@opentelemetry/sdk-metrics": {
       "version": "1.25.1",
       "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-metrics/-/sdk-metrics-1.25.1.tgz",
@@ -5892,7 +6116,6 @@
     "node_modules/@opentelemetry/semantic-conventions": {
       "version": "1.39.0",
       "license": "Apache-2.0",
-      "optional": true,
       "engines": {
         "node": ">=14"
       }
@@ -5960,6 +6183,21 @@
         "node": ">=14"
       }
     },
+    "node_modules/@posthog/core": {
+      "version": "1.18.0",
+      "resolved": "https://registry.npmjs.org/@posthog/core/-/core-1.18.0.tgz",
+      "integrity": "sha512-irPbrcopCT0LCRgGM4V8jFuMNCFos6EM4QFf5KA2sHQFC/6pGaHZYoyHcjRUDUKFw4vmpLlmGEXA5ah8x5K4LQ==",
+      "license": "MIT",
+      "dependencies": {
+        "cross-spawn": "^7.0.6"
+      }
+    },
+    "node_modules/@posthog/types": {
+      "version": "1.337.0",
+      "resolved": "https://registry.npmjs.org/@posthog/types/-/types-1.337.0.tgz",
+      "integrity": "sha512-R7J5BIeulNbjmUNfc8FICRa57K1IizSpJBRI6IuJvRFnm3eeczWOw6DKH0NCHXHZiE3XzVcUrJUOKaKXBcdQxQ==",
+      "license": "MIT"
+    },
     "node_modules/@protobufjs/aspromise": {
       "version": "1.1.2",
       "license": "BSD-3-Clause"
@@ -6295,6 +6533,34 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-context-menu": {
+      "version": "2.2.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context-menu/-/react-context-menu-2.2.16.tgz",
+      "integrity": "sha512-O8morBEW+HsVG28gYDZPTrT9UUovQUlJue5YO836tiTJhuIWBm/zQHc7j388sHWtdH/xUZurK9olD2+pcqx5ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-menu": "2.1.16",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-dialog": {
       "version": "1.1.15",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz",
@@ -6454,6 +6720,37 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-hover-card": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.1.15.tgz",
+      "integrity": "sha512-qgTkjNT1CfKMoP0rcasmlH2r1DAiYicWsDsufxl940sT2wHNEWWv6FMWIQXWhVdmC1d/HYfbhQx60KYyAtKxjg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-id": {
       "version": "1.1.1",
       "license": "MIT",
@@ -6604,6 +6901,42 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-navigation-menu": {
+      "version": "1.2.14",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.14.tgz",
+      "integrity": "sha512-YB9mTFQvCOAQMHU+C/jVl96WmuWeltyUEpRJJky51huhds5W2FQr1J8D/16sQlf0ozxkPK8uF3niQMdUwZPv5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popover": {
       "version": "1.1.15",
       "license": "MIT",
@@ -7159,6 +7492,60 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-toggle": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.1.10.tgz",
+      "integrity": "sha512-lS1odchhFTeZv3xwHH31YPObmJn8gOg7Lq12inrr0+BH/l3Tsq32VfjqH1oh80ARM3mlkfMic15n0kg4sD1poQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.1.11.tgz",
+      "integrity": "sha512-5umnS0T8JQzQT6HbPyO7Hh9dgd82NmS36DQr+X/YJ9ctFNCiiQd6IJAYYZ33LUwm8M+taCz5t2ui29fHZc4Y6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-toggle": "1.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-tooltip": {
       "version": "1.2.8",
       "license": "MIT",
@@ -7376,6 +7763,81 @@
       "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
       "license": "MIT"
     },
+    "node_modules/@sentry-internal/browser-utils": {
+      "version": "10.38.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-10.38.0.tgz",
+      "integrity": "sha512-UOJtYmdcxHCcV0NPfXFff/a95iXl/E0EhuQ1y0uE0BuZDMupWSF5t2BgC4HaE5Aw3RTjDF3XkSHWoIF6ohy7eA==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry/core": "10.38.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@sentry-internal/feedback": {
+      "version": "10.38.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-10.38.0.tgz",
+      "integrity": "sha512-JXneg9zRftyfy1Fyfc39bBlF/Qd8g4UDublFFkVvdc1S6JQPlK+P6q22DKz3Pc8w3ySby+xlIq/eTu9Pzqi4KA==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry/core": "10.38.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@sentry-internal/replay": {
+      "version": "10.38.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/replay/-/replay-10.38.0.tgz",
+      "integrity": "sha512-YWIkL6/dnaiQyFiZXJ/nN+NXGv/15z45ia86bE/TMq01CubX/DUOilgsFz0pk2v/pg3tp/U2MskLO9Hz0cnqeg==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry-internal/browser-utils": "10.38.0",
+        "@sentry/core": "10.38.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@sentry-internal/replay-canvas": {
+      "version": "10.38.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-10.38.0.tgz",
+      "integrity": "sha512-OXWM9jEqNYh4VTvrMu7v+z1anz+QKQ/fZXIZdsO7JTT2lGNZe58UUMeoq386M+Saxen8F9SUH7yTORy/8KI5qw==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry-internal/replay": "10.38.0",
+        "@sentry/core": "10.38.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@sentry/browser": {
+      "version": "10.38.0",
+      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-10.38.0.tgz",
+      "integrity": "sha512-3phzp1YX4wcQr9mocGWKbjv0jwtuoDBv7+Y6Yfrys/kwyaL84mDLjjQhRf4gL5SX7JdYkhBp4WaiNlR0UC4kTA==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry-internal/browser-utils": "10.38.0",
+        "@sentry-internal/feedback": "10.38.0",
+        "@sentry-internal/replay": "10.38.0",
+        "@sentry-internal/replay-canvas": "10.38.0",
+        "@sentry/core": "10.38.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@sentry/core": {
+      "version": "10.38.0",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-10.38.0.tgz",
+      "integrity": "sha512-1pubWDZE5y5HZEPMAZERP4fVl2NH3Ihp1A+vMoVkb3Qc66Diqj1WierAnStlZP7tCx0TBa0dK85GTW/ZFYyB9g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@so-ric/colorspace": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/@so-ric/colorspace/-/colorspace-1.1.6.tgz",
@@ -7393,6 +7855,112 @@
       "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
       "license": "MIT"
     },
+    "node_modules/@supabase/auth-js": {
+      "version": "2.93.3",
+      "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.93.3.tgz",
+      "integrity": "sha512-JdnkHZPKexVGSNONtu89RHU4bxz3X9kxx+f5ZnR5osoCIX+vs/MckwWRPZEybAEvlJXt5xjomDb3IB876QCxWQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/functions-js": {
+      "version": "2.93.3",
+      "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.93.3.tgz",
+      "integrity": "sha512-qWO0gHNDm/5jRjROv/nv9L6sYabCWS1kzorOLUv3kqCwRvEJLYZga93ppJPrZwOgoZfXmJzvpjY8fODA4HQfBw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/postgrest-js": {
+      "version": "2.93.3",
+      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-2.93.3.tgz",
+      "integrity": "sha512-+iJ96g94skO2e4clsRSmEXg22NUOjh9BziapsJSAvnB1grOBf/BA8vGtCHjNOA+Z6lvKXL1jwBqcL9+fS1W/Lg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/realtime-js": {
+      "version": "2.93.3",
+      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.93.3.tgz",
+      "integrity": "sha512-gnYpcFzwy8IkezRP4CDbT5I8jOsiOjrWrqTY1B+7jIriXsnpifmlM6RRjLBm9oD7OwPG0/WksniGPdKW67sXOA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/phoenix": "^1.6.6",
+        "@types/ws": "^8.18.1",
+        "tslib": "2.8.1",
+        "ws": "^8.18.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/ssr": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@supabase/ssr/-/ssr-0.8.0.tgz",
+      "integrity": "sha512-/PKk8kNFSs8QvvJ2vOww1mF5/c5W8y42duYtXvkOSe+yZKRgTTZywYG2l41pjhNomqESZCpZtXuWmYjFRMV+dw==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.2"
+      },
+      "peerDependencies": {
+        "@supabase/supabase-js": "^2.76.1"
+      }
+    },
+    "node_modules/@supabase/ssr/node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/@supabase/storage-js": {
+      "version": "2.93.3",
+      "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.93.3.tgz",
+      "integrity": "sha512-cw4qXiLrx3apglDM02Tx/w/stvFlrkKocC6vCvuFAz3JtVEl1zH8MUfDQDTH59kJAQVaVdbewrMWSoBob7REnA==",
+      "license": "MIT",
+      "dependencies": {
+        "iceberg-js": "^0.8.1",
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/supabase-js": {
+      "version": "2.93.3",
+      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.93.3.tgz",
+      "integrity": "sha512-paUqEqdBI9ztr/4bbMoCgeJ6M8ZTm2fpfjSOlzarPuzYveKFM20ZfDZqUpi9CFfYagYj5Iv3m3ztUjaI9/tM1w==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@supabase/auth-js": "2.93.3",
+        "@supabase/functions-js": "2.93.3",
+        "@supabase/postgrest-js": "2.93.3",
+        "@supabase/realtime-js": "2.93.3",
+        "@supabase/storage-js": "2.93.3"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/@swc/helpers": {
       "version": "0.5.15",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
@@ -7635,6 +8203,12 @@
         "@types/pg": "*"
       }
     },
+    "node_modules/@types/phoenix": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.7.tgz",
+      "integrity": "sha512-oN9ive//QSBkf19rfDv45M7eZPi0eEXylht2OLEXicu5b4KoQ1OzXIw+xDSGWxSxe1JmepRR/ZH283vsu518/Q==",
+      "license": "MIT"
+    },
     "node_modules/@types/react": {
       "version": "19.2.9",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.9.tgz",
@@ -7741,6 +8315,15 @@
       "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
       "license": "MIT"
     },
+    "node_modules/@types/ws": {
+      "version": "8.18.1",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
+      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/yauzl": {
       "version": "2.10.3",
       "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
@@ -8521,6 +9104,22 @@
         "node": ">=6"
       }
     },
+    "node_modules/cmdk": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-1.1.1.tgz",
+      "integrity": "sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "^1.1.1",
+        "@radix-ui/react-dialog": "^1.1.6",
+        "@radix-ui/react-id": "^1.1.0",
+        "@radix-ui/react-primitive": "^2.0.2"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/color": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/color/-/color-5.0.3.tgz",
@@ -8698,6 +9297,17 @@
       "integrity": "sha512-NXdYc3dLr47pBkpUCHtKSwIOQXLVn8dZEuywboCOJY/osA0wFSLlSawr3KN8qXJEyX66FcONTH8EIlVuK0yyFA==",
       "license": "MIT"
     },
+    "node_modules/core-js": {
+      "version": "3.48.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.48.0.tgz",
+      "integrity": "sha512-zpEHTy1fjTMZCKLHUZoVeylt9XrzaIN2rbPXEt0k+q7JE5CkCZdo6bNq55bn24a69CH7ErAVLKijxJja4fw+UQ==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/cors": {
       "version": "2.8.6",
       "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.6.tgz",
@@ -9637,6 +10247,12 @@
         "node": "^12.20 || >= 14.13"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz",
+      "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==",
+      "license": "MIT"
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "license": "MIT",
@@ -10637,6 +11253,15 @@
         "node": ">= 14"
       }
     },
+    "node_modules/iceberg-js": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/iceberg-js/-/iceberg-js-0.8.1.tgz",
+      "integrity": "sha512-1dhVQZXhcHje7798IVM+xoo/1ZdVfzOMIc8/rgVSijRK38EDqOJoGula9N/8ZI5RD8QTxNQtK/Gozpr+qUqRRA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -10700,6 +11325,16 @@
       "version": "2.0.4",
       "license": "ISC"
     },
+    "node_modules/input-otp": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/input-otp/-/input-otp-1.4.2.tgz",
+      "integrity": "sha512-l3jWwYNvrEa6NTCt7BECfCm48GvwuZzkoeG3gBL2w4CHeOXW3eKFmf9UNYkNfYc3mxMrthMnxjIE07MT0zLBQA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/internmap": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
@@ -11696,6 +12331,16 @@
         }
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "funding": [
@@ -12360,6 +13005,83 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/posthog-js": {
+      "version": "1.337.0",
+      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.337.0.tgz",
+      "integrity": "sha512-wtzPoMGlCAJGgfjOIjimFRj+8SH4Aojfhc2+s8HdL54ivdQGK24JvwQoz12bKssvDSpFiBPwX1xunkt0f7mpcg==",
+      "license": "SEE LICENSE IN LICENSE",
+      "dependencies": {
+        "@opentelemetry/api": "^1.9.0",
+        "@opentelemetry/api-logs": "^0.208.0",
+        "@opentelemetry/exporter-logs-otlp-http": "^0.208.0",
+        "@opentelemetry/resources": "^2.2.0",
+        "@opentelemetry/sdk-logs": "^0.208.0",
+        "@posthog/core": "1.18.0",
+        "@posthog/types": "1.337.0",
+        "core-js": "^3.38.1",
+        "dompurify": "^3.3.1",
+        "fflate": "^0.4.8",
+        "preact": "^10.28.2",
+        "query-selector-shadow-dom": "^1.0.1",
+        "web-vitals": "^5.1.0"
+      }
+    },
+    "node_modules/posthog-js/node_modules/@opentelemetry/core": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/core/-/core-2.5.0.tgz",
+      "integrity": "sha512-ka4H8OM6+DlUhSAZpONu0cPBtPPTQKxbxVzC4CzVx5+K4JnroJVBtDzLAMx4/3CDTJXRvVFhpFjtl4SaiTNoyQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/semantic-conventions": "^1.29.0"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.6.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.10.0"
+      }
+    },
+    "node_modules/posthog-js/node_modules/@opentelemetry/resources": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/resources/-/resources-2.5.0.tgz",
+      "integrity": "sha512-F8W52ApePshpoSrfsSk1H2yJn9aKjCrbpQF1M9Qii0GHzbfVeFUB+rc3X4aggyZD8x9Gu3Slua+s6krmq6Dt8g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/core": "2.5.0",
+        "@opentelemetry/semantic-conventions": "^1.29.0"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.6.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.3.0 <1.10.0"
+      }
+    },
+    "node_modules/posthog-js/node_modules/dompurify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.3.1.tgz",
+      "integrity": "sha512-qkdCKzLNtrgPFP1Vo+98FRzJnBRGe4ffyCea9IwHB1fyxPOeNTHpLKYGd4Uk9xvNoH0ZoOjwZxNptyMwqrId1Q==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
+    "node_modules/posthog-js/node_modules/web-vitals": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-5.1.0.tgz",
+      "integrity": "sha512-ArI3kx5jI0atlTtmV0fWU3fjpLmq/nD3Zr1iFFlJLaqa5wLBkUSzINwBPySCX/8jRyjlmy1Volw1kz1g9XE4Jg==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/preact": {
+      "version": "10.28.3",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.28.3.tgz",
+      "integrity": "sha512-tCmoRkPQLpBeWzpmbhryairGnhW9tKV6c6gr/w+RhoRoKEJwsjzipwp//1oCpGPOchvSLaAPlpcJi9MwMmoPyA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
     "node_modules/prismjs": {
       "version": "1.30.0",
       "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
@@ -12512,6 +13234,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/query-selector-shadow-dom": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/query-selector-shadow-dom/-/query-selector-shadow-dom-1.0.1.tgz",
+      "integrity": "sha512-lT5yCqEBgfoMYpf3F2xQRK7zEr1rhIIZuceDK6+xRkJQ4NMbHTwXqk4NkwDwQMNqXgG9r9fyHnzwNVs6zV5KRw==",
+      "license": "MIT"
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "funding": [
@@ -12674,6 +13402,16 @@
         }
       }
     },
+    "node_modules/react-resizable-panels": {
+      "version": "4.5.9",
+      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-4.5.9.tgz",
+      "integrity": "sha512-7l0w2TxYq032F2o6PnfxDbDEKzi1lohDw3BKx4OBkh6uu7uh+Gj1C0Ubpv0/fOO2bRvo+IIQMOoFE0l2LgpeAg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react-smooth": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz",
@@ -14136,6 +14874,19 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/vaul": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vaul/-/vaul-1.1.2.tgz",
+      "integrity": "sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-dialog": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/victory-vendor": {
       "version": "36.9.2",
       "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
@@ -14374,6 +15125,27 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/ws": {
+      "version": "8.19.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.19.0.tgz",
+      "integrity": "sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/xdg-basedir": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-4.0.0.tgz",
diff --git a/package.json b/package.json
index 86343b9..324c333 100644
--- a/package.json
+++ b/package.json
@@ -22,10 +22,13 @@
     "@radix-ui/react-avatar": "^1.1.3",
     "@radix-ui/react-checkbox": "^1.1.4",
     "@radix-ui/react-collapsible": "^1.1.11",
+    "@radix-ui/react-context-menu": "^2.2.16",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-dropdown-menu": "^2.1.6",
+    "@radix-ui/react-hover-card": "^1.1.15",
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-menubar": "^1.1.6",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
     "@radix-ui/react-popover": "^1.1.6",
     "@radix-ui/react-progress": "^1.1.2",
     "@radix-ui/react-radio-group": "^1.2.3",
@@ -37,29 +40,40 @@
     "@radix-ui/react-switch": "^1.1.3",
     "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-toast": "^1.2.6",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.1.8",
+    "@sentry/browser": "^10.38.0",
+    "@supabase/ssr": "^0.8.0",
+    "@supabase/supabase-js": "^2.93.3",
     "@tailwindcss/typography": "^0.5.13",
     "autoprefixer": "^10.4.23",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
     "date-fns": "^3.6.0",
     "dotenv": "^16.5.0",
     "embla-carousel-react": "^8.6.0",
     "firebase": "^11.9.1",
     "genkit": "^1.20.0",
+    "input-otp": "^1.4.2",
     "lucide-react": "^0.475.0",
     "marked": "^12.0.2",
     "next": "15.5.9",
+    "next-themes": "^0.4.6",
     "patch-package": "^8.0.0",
+    "posthog-js": "^1.337.0",
     "react": "^19.2.1",
     "react-day-picker": "^9.11.3",
     "react-dom": "^19.2.1",
     "react-hook-form": "^7.54.2",
+    "react-resizable-panels": "^4.5.9",
     "react-syntax-highlighter": "^15.5.0",
     "recharts": "^2.15.1",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.0.1",
     "tailwindcss-animate": "^1.0.7",
+    "vaul": "^1.1.2",
     "zod": "^3.24.2",
     "zustand": "^5.0.10"
   },
diff --git a/src/App.tsx b/src/App.tsx
index 4e4d462..d99a3c4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,3 +1,4 @@
+'use client';
 // ...existing code...
 import React, { useState, lazy, Suspense } from 'react';
 import { FileTree } from '../components/FileTree';
@@ -232,7 +233,15 @@ function App() {
             {/* Main Editor/Preview Split */}
             <div className="flex flex-1 overflow-hidden">
               <div className="flex-1 flex flex-col">
-                <Toolbar code={code} onTemplatesClick={() => setShowTemplates(true)} /*...existing code...*/ />
+                <Toolbar 
+                  code={code} 
+                  onTemplatesClick={() => setShowTemplates(true)} 
+                  onPreviewClick={() => setShowPreview(true)}
+                  onNewProjectClick={() => setShowNewProject(true)}
+                  currentPlatform={currentPlatform}
+                  onPlatformChange={setCurrentPlatform}
+                  onTranslateClick={() => setShowTranslation(true)}
+                />
                 <div className="flex-1 flex flex-col">
                   {activeFileId ? (
                     <CodeEditor />
@@ -327,14 +336,14 @@ function App() {
         )}
         {/* Modals and Drawers */}
         <Suspense fallback={<div className="fixed inset-0 flex items-center justify-center bg-background/80 z-50">Loading…</div>}>
-          {showTemplates && <TemplatesDrawer open={showTemplates} onSelect={handleTemplateSelect} onClose={() => setShowTemplates(false)} />}
+          {showTemplates && <TemplatesDrawer onSelectTemplate={handleTemplateSelect} onClose={() => setShowTemplates(false)} currentPlatform={currentPlatform} />}
           {showPreview && <PreviewModal open={showPreview} code={currentCode} onClose={() => setShowPreview(false)} />}
-          {showNewProject && <NewProjectModal open={showNewProject} onClose={() => setShowNewProject(false)} />}
+          {showNewProject && <NewProjectModal open={showNewProject} onClose={() => setShowNewProject(false)} onCreateProject={() => {}} />}
         </Suspense>
       </div>
 
       <Suspense fallback={<div className="fixed inset-0 flex items-center justify-center bg-background/80 z-50">Loading…</div>}>
-        {showTemplates && <TemplatesDrawer open={showTemplates} onSelect={handleTemplateSelect} onClose={() => setShowTemplates(false)} />}
+        {showTemplates && <TemplatesDrawer onSelectTemplate={handleTemplateSelect} onClose={() => setShowTemplates(false)} currentPlatform={currentPlatform} />}
         {showPreview && <PreviewModal open={showPreview} code={currentCode} onClose={() => setShowPreview(false)} />}
         {showNewProject && <NewProjectModal open={showNewProject} onClose={() => setShowNewProject(false)} onCreateProject={() => {}} />}
         {showTranslation && <TranslationPanel isOpen={showTranslation} onClose={() => setShowTranslation(false)} currentCode={currentCode} currentPlatform={currentPlatform} />}
diff --git a/src/app/auth/auth-code-error/page.tsx b/src/app/auth/auth-code-error/page.tsx
new file mode 100644
index 0000000..440f7cc
--- /dev/null
+++ b/src/app/auth/auth-code-error/page.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import Link from "next/link";
+
+export default function AuthCodeErrorPage() {
+  return (
+    <div className="min-h-screen bg-[#0a0a0a] flex items-center justify-center px-4">
+      <div className="max-w-md w-full text-center">
+        <div className="w-16 h-16 mx-auto mb-6 rounded-full bg-red-500/20 flex items-center justify-center">
+          <svg
+            className="w-8 h-8 text-red-500"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </div>
+        
+        <h1 className="text-2xl font-bold text-white mb-2">
+          Authentication Error
+        </h1>
+        
+        <p className="text-[#888] mb-8">
+          Something went wrong during sign in. This could happen if:
+        </p>
+        
+        <ul className="text-left text-[#888] mb-8 space-y-2">
+          <li className="flex items-start gap-2">
+            <span className="text-red-500">•</span>
+            <span>The sign in link expired or was already used</span>
+          </li>
+          <li className="flex items-start gap-2">
+            <span className="text-red-500">•</span>
+            <span>You denied access to your account</span>
+          </li>
+          <li className="flex items-start gap-2">
+            <span className="text-red-500">•</span>
+            <span>There was a network error during authentication</span>
+          </li>
+        </ul>
+        
+        <div className="space-y-3">
+          <Link
+            href="/auth/login"
+            className="block w-full py-3 px-4 bg-gradient-to-r from-purple-600 to-blue-600 text-white font-medium rounded-lg hover:opacity-90 transition"
+          >
+            Try Again
+          </Link>
+          
+          <Link
+            href="/"
+            className="block w-full py-3 px-4 bg-[#1a1a1a] text-[#888] font-medium rounded-lg hover:bg-[#222] transition"
+          >
+            Go Home
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/auth/callback/route.ts b/src/app/auth/callback/route.ts
new file mode 100644
index 0000000..b1d13ec
--- /dev/null
+++ b/src/app/auth/callback/route.ts
@@ -0,0 +1,21 @@
+import { createClient } from '@/lib/supabase/server';
+import { NextResponse } from 'next/server';
+
+export async function GET(request: Request) {
+  const { searchParams, origin } = new URL(request.url);
+  const code = searchParams.get('code');
+  // Default redirect to /ide after successful OAuth login
+  const next = searchParams.get('next') ?? '/ide';
+
+  if (code) {
+    const supabase = await createClient();
+    const { error } = await supabase.auth.exchangeCodeForSession(code);
+    if (!error) {
+      return NextResponse.redirect(`${origin}${next}`);
+    }
+    console.error('OAuth callback error:', error.message);
+  }
+
+  // Return the user to an error page with instructions
+  return NextResponse.redirect(`${origin}/auth/auth-code-error`);
+}
diff --git a/src/app/auth/login/page.tsx b/src/app/auth/login/page.tsx
new file mode 100644
index 0000000..8acff7c
--- /dev/null
+++ b/src/app/auth/login/page.tsx
@@ -0,0 +1,169 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useSupabaseAuth } from "@/hooks/use-supabase";
+
+export default function LoginPage() {
+  const router = useRouter();
+  const { signIn, signInWithOAuth } = useSupabaseAuth();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+
+    const { error } = await signIn(email, password);
+    
+    if (error) {
+      setError(error.message);
+      setLoading(false);
+    } else {
+      router.push("/ide");
+    }
+  };
+
+  const handleOAuth = async (provider: "github" | "google" | "discord") => {
+    setError("");
+    const { error } = await signInWithOAuth(provider);
+    if (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <main className="min-h-screen bg-[#0a0a0a] flex items-center justify-center px-4">
+      <div className="w-full max-w-md">
+        {/* Logo */}
+        <div className="flex justify-center mb-8">
+          <Link href="/" className="flex items-center gap-2">
+            <div className="h-10 w-10 rounded-xl bg-gradient-to-br from-purple-500 to-blue-600 flex items-center justify-center">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.5">
+                <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
+              </svg>
+            </div>
+            <span className="text-2xl font-bold text-white">AeThex Studio</span>
+          </Link>
+        </div>
+
+        {/* Card */}
+        <div className="bg-[#141414] border border-[#222] rounded-2xl p-8">
+          <h1 className="text-2xl font-semibold text-white text-center mb-2">Welcome back</h1>
+          <p className="text-[#888] text-center mb-8">Sign in to your AeThex account</p>
+
+          {error && (
+            <div className="bg-red-500/10 border border-red-500/20 text-red-400 px-4 py-3 rounded-lg mb-6 text-sm">
+              {error}
+            </div>
+          )}
+
+          {/* OAuth Buttons */}
+          <div className="space-y-3 mb-6">
+            <button
+              onClick={() => handleOAuth("github")}
+              className="w-full flex items-center justify-center gap-3 bg-[#1b1b1b] hover:bg-[#222] border border-[#333] text-white py-3 px-4 rounded-lg transition-colors"
+            >
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                <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"/>
+              </svg>
+              Continue with GitHub
+            </button>
+            <button
+              onClick={() => handleOAuth("google")}
+              className="w-full flex items-center justify-center gap-3 bg-[#1b1b1b] hover:bg-[#222] border border-[#333] text-white py-3 px-4 rounded-lg transition-colors"
+            >
+              <svg width="20" height="20" viewBox="0 0 24 24">
+                <path fill="#4285F4" 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"/>
+                <path fill="#34A853" 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"/>
+                <path fill="#FBBC05" 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"/>
+                <path fill="#EA4335" 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"/>
+              </svg>
+              Continue with Google
+            </button>
+            <button
+              onClick={() => handleOAuth("discord")}
+              className="w-full flex items-center justify-center gap-3 bg-[#1b1b1b] hover:bg-[#222] border border-[#333] text-white py-3 px-4 rounded-lg transition-colors"
+            >
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="#5865F2">
+                <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>
+              </svg>
+              Continue with Discord
+            </button>
+          </div>
+
+          <div className="relative my-6">
+            <div className="absolute inset-0 flex items-center">
+              <div className="w-full border-t border-[#333]"></div>
+            </div>
+            <div className="relative flex justify-center text-sm">
+              <span className="px-4 bg-[#141414] text-[#666]">or continue with email</span>
+            </div>
+          </div>
+
+          {/* Email Form */}
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-[#888] mb-2">
+                Email
+              </label>
+              <input
+                id="email"
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="w-full bg-[#1b1b1b] border border-[#333] rounded-lg px-4 py-3 text-white placeholder-[#666] focus:outline-none focus:border-purple-500 transition-colors"
+                placeholder="you@example.com"
+                required
+              />
+            </div>
+            <div>
+              <label htmlFor="password" className="block text-sm font-medium text-[#888] mb-2">
+                Password
+              </label>
+              <input
+                id="password"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="w-full bg-[#1b1b1b] border border-[#333] rounded-lg px-4 py-3 text-white placeholder-[#666] focus:outline-none focus:border-purple-500 transition-colors"
+                placeholder="••••••••"
+                required
+              />
+            </div>
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full bg-white hover:bg-[#e5e5e5] text-[#0a0a0a] font-medium py-3 px-4 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {loading ? "Signing in..." : "Sign in"}
+            </button>
+          </form>
+
+          <p className="mt-6 text-center text-[#888] text-sm">
+            Don't have an account?{" "}
+            <Link href="/auth/signup" className="text-purple-400 hover:text-purple-300 transition-colors">
+              Sign up
+            </Link>
+          </p>
+        </div>
+
+        {/* Ecosystem Links */}
+        <div className="mt-8 text-center">
+          <p className="text-[#666] text-xs mb-3">Part of the AeThex ecosystem</p>
+          <div className="flex items-center justify-center gap-4 text-sm">
+            <a href="https://aethex.dev" className="text-[#888] hover:text-white transition-colors">aethex.dev</a>
+            <span className="text-[#444]">•</span>
+            <a href="https://aethex.foundation" className="text-[#888] hover:text-white transition-colors">aethex.foundation</a>
+            <span className="text-[#444]">•</span>
+            <a href="https://aethex.studio" className="text-purple-400 hover:text-purple-300 transition-colors">aethex.studio</a>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/src/app/auth/signup/page.tsx b/src/app/auth/signup/page.tsx
new file mode 100644
index 0000000..6d4e471
--- /dev/null
+++ b/src/app/auth/signup/page.tsx
@@ -0,0 +1,230 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useSupabaseAuth } from "@/hooks/use-supabase";
+
+export default function SignUpPage() {
+  const router = useRouter();
+  const { signUp, signInWithOAuth } = useSupabaseAuth();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+
+    if (password !== confirmPassword) {
+      setError("Passwords do not match");
+      return;
+    }
+
+    if (password.length < 8) {
+      setError("Password must be at least 8 characters");
+      return;
+    }
+
+    setLoading(true);
+
+    const { error } = await signUp(email, password);
+    
+    if (error) {
+      setError(error.message);
+      setLoading(false);
+    } else {
+      setSuccess(true);
+    }
+  };
+
+  const handleOAuth = async (provider: "github" | "google" | "discord") => {
+    setError("");
+    const { error } = await signInWithOAuth(provider);
+    if (error) {
+      setError(error.message);
+    }
+  };
+
+  if (success) {
+    return (
+      <main className="min-h-screen bg-[#0a0a0a] flex items-center justify-center px-4">
+        <div className="w-full max-w-md text-center">
+          <div className="bg-[#141414] border border-[#222] rounded-2xl p-8">
+            <div className="h-16 w-16 rounded-full bg-green-500/10 flex items-center justify-center mx-auto mb-6">
+              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#22c55e" strokeWidth="2">
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
+            </div>
+            <h1 className="text-2xl font-semibold text-white mb-2">Check your email</h1>
+            <p className="text-[#888] mb-6">
+              We sent a confirmation link to <span className="text-white">{email}</span>
+            </p>
+            <Link
+              href="/auth/login"
+              className="inline-block bg-white hover:bg-[#e5e5e5] text-[#0a0a0a] font-medium py-3 px-6 rounded-lg transition-colors"
+            >
+              Back to login
+            </Link>
+          </div>
+        </div>
+      </main>
+    );
+  }
+
+  return (
+    <main className="min-h-screen bg-[#0a0a0a] flex items-center justify-center px-4">
+      <div className="w-full max-w-md">
+        {/* Logo */}
+        <div className="flex justify-center mb-8">
+          <Link href="/" className="flex items-center gap-2">
+            <div className="h-10 w-10 rounded-xl bg-gradient-to-br from-purple-500 to-blue-600 flex items-center justify-center">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.5">
+                <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
+              </svg>
+            </div>
+            <span className="text-2xl font-bold text-white">AeThex Studio</span>
+          </Link>
+        </div>
+
+        {/* Card */}
+        <div className="bg-[#141414] border border-[#222] rounded-2xl p-8">
+          <h1 className="text-2xl font-semibold text-white text-center mb-2">Create your account</h1>
+          <p className="text-[#888] text-center mb-8">Join the AeThex ecosystem</p>
+
+          {error && (
+            <div className="bg-red-500/10 border border-red-500/20 text-red-400 px-4 py-3 rounded-lg mb-6 text-sm">
+              {error}
+            </div>
+          )}
+
+          {/* OAuth Buttons */}
+          <div className="space-y-3 mb-6">
+            <button
+              onClick={() => handleOAuth("github")}
+              className="w-full flex items-center justify-center gap-3 bg-[#1b1b1b] hover:bg-[#222] border border-[#333] text-white py-3 px-4 rounded-lg transition-colors"
+            >
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                <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"/>
+              </svg>
+              Continue with GitHub
+            </button>
+            <button
+              onClick={() => handleOAuth("google")}
+              className="w-full flex items-center justify-center gap-3 bg-[#1b1b1b] hover:bg-[#222] border border-[#333] text-white py-3 px-4 rounded-lg transition-colors"
+            >
+              <svg width="20" height="20" viewBox="0 0 24 24">
+                <path fill="#4285F4" 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"/>
+                <path fill="#34A853" 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"/>
+                <path fill="#FBBC05" 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"/>
+                <path fill="#EA4335" 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"/>
+              </svg>
+              Continue with Google
+            </button>
+            <button
+              onClick={() => handleOAuth("discord")}
+              className="w-full flex items-center justify-center gap-3 bg-[#1b1b1b] hover:bg-[#222] border border-[#333] text-white py-3 px-4 rounded-lg transition-colors"
+            >
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="#5865F2">
+                <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>
+              </svg>
+              Continue with Discord
+            </button>
+          </div>
+
+          <div className="relative my-6">
+            <div className="absolute inset-0 flex items-center">
+              <div className="w-full border-t border-[#333]"></div>
+            </div>
+            <div className="relative flex justify-center text-sm">
+              <span className="px-4 bg-[#141414] text-[#666]">or continue with email</span>
+            </div>
+          </div>
+
+          {/* Email Form */}
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-[#888] mb-2">
+                Email
+              </label>
+              <input
+                id="email"
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="w-full bg-[#1b1b1b] border border-[#333] rounded-lg px-4 py-3 text-white placeholder-[#666] focus:outline-none focus:border-purple-500 transition-colors"
+                placeholder="you@example.com"
+                required
+              />
+            </div>
+            <div>
+              <label htmlFor="password" className="block text-sm font-medium text-[#888] mb-2">
+                Password
+              </label>
+              <input
+                id="password"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="w-full bg-[#1b1b1b] border border-[#333] rounded-lg px-4 py-3 text-white placeholder-[#666] focus:outline-none focus:border-purple-500 transition-colors"
+                placeholder="••••••••"
+                required
+              />
+            </div>
+            <div>
+              <label htmlFor="confirmPassword" className="block text-sm font-medium text-[#888] mb-2">
+                Confirm Password
+              </label>
+              <input
+                id="confirmPassword"
+                type="password"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                className="w-full bg-[#1b1b1b] border border-[#333] rounded-lg px-4 py-3 text-white placeholder-[#666] focus:outline-none focus:border-purple-500 transition-colors"
+                placeholder="••••••••"
+                required
+              />
+            </div>
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full bg-white hover:bg-[#e5e5e5] text-[#0a0a0a] font-medium py-3 px-4 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {loading ? "Creating account..." : "Create account"}
+            </button>
+          </form>
+
+          <p className="mt-6 text-center text-[#888] text-sm">
+            Already have an account?{" "}
+            <Link href="/auth/login" className="text-purple-400 hover:text-purple-300 transition-colors">
+              Sign in
+            </Link>
+          </p>
+        </div>
+
+        {/* Terms */}
+        <p className="mt-6 text-center text-[#666] text-xs">
+          By creating an account, you agree to our{" "}
+          <Link href="/terms" className="text-[#888] hover:text-white transition-colors">Terms of Service</Link>
+          {" "}and{" "}
+          <Link href="/privacy" className="text-[#888] hover:text-white transition-colors">Privacy Policy</Link>
+        </p>
+
+        {/* Ecosystem Links */}
+        <div className="mt-6 text-center">
+          <p className="text-[#666] text-xs mb-3">Part of the AeThex ecosystem</p>
+          <div className="flex items-center justify-center gap-4 text-sm">
+            <a href="https://aethex.dev" className="text-[#888] hover:text-white transition-colors">aethex.dev</a>
+            <span className="text-[#444]">•</span>
+            <a href="https://aethex.foundation" className="text-[#888] hover:text-white transition-colors">aethex.foundation</a>
+            <span className="text-[#444]">•</span>
+            <a href="https://aethex.studio" className="text-purple-400 hover:text-purple-300 transition-colors">aethex.studio</a>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/src/app/globals.css b/src/app/globals.css
index 8b65a67..c1a702c 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -10,14 +10,136 @@
     --card-foreground: 0 0% 3.9%;
     --popover: 0 0% 100%;
     --popover-foreground: 0 0% 3.9%;
-    --primary: 278 52% 49%;
+    --primary: 262 83% 58%;
     --primary-foreground: 0 0% 98%;
-    --secondary: 277 100% 25%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 180 100% 25%;
-    --accent-foreground: 0 0% 9%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 262 83% 58%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 240 6% 6%;
+    --foreground: 0 0% 95%;
+    --card: 240 6% 8%;
+    --card-foreground: 0 0% 95%;
+    --popover: 240 6% 8%;
+    --popover-foreground: 0 0% 95%;
+    --primary: 262 83% 58%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 5% 12%;
+    --secondary-foreground: 0 0% 95%;
+    --muted: 240 5% 14%;
+    --muted-foreground: 240 5% 55%;
+    --accent: 240 5% 14%;
+    --accent-foreground: 0 0% 95%;
+    --destructive: 0 62.8% 45%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 4% 16%;
+    --input: 240 4% 16%;
+    --ring: 262 83% 58%;
+  }
+
+  * {
+    border-color: hsl(var(--border));
+  }
+
+  html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+  }
+
+  body {
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
+/* Custom scrollbar - minimal and modern */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+/* IDE-specific scrollbar */
+.ide-scroll::-webkit-scrollbar {
+  width: 10px;
+}
+
+.ide-scroll::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.08);
+  border: 2px solid transparent;
+  background-clip: padding-box;
+  border-radius: 5px;
+}
+
+.ide-scroll::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.15);
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+
+/* Smooth transitions */
+* {
+  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+/* Selection styling */
+::selection {
+  background: rgba(139, 92, 246, 0.3);
+  color: white;
+}
+
+/* Focus rings */
+:focus-visible {
+  outline: 2px solid rgba(139, 92, 246, 0.5);
+  outline-offset: 2px;
+}
+
+/* Hide scrollbar utility */
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
diff --git a/src/app/ide/page.tsx b/src/app/ide/page.tsx
index df65764..45a22bd 100644
--- a/src/app/ide/page.tsx
+++ b/src/app/ide/page.tsx
@@ -1,4 +1,4 @@
-import { AethexStudio } from "@/components/aethex/aethex-studio";
+import { AethexStudio } from "@/src/components/aethex/aethex-studio";
 
 export default function IdePage() {
   return (
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 0466ddd..1ad7da6 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -22,11 +22,11 @@ export default function RootLayout({
           crossOrigin="anonymous"
         />
         <link
-          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Source+Code+Pro:wght@400&family=Space+Grotesk:wght@400;700&display=swap"
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap"
           rel="stylesheet"
         />
       </head>
-      <body className="font-body antialiased">
+      <body className="font-sans antialiased">
         {children}
         <Toaster />
       </body>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 9b7b332..91e54d2 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,34 +1,458 @@
+"use client";
 
+import { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useSupabaseAuth, useProfile } from "@/hooks/use-supabase";
 
 export default function Page() {
+  const router = useRouter();
+  const { user, loading } = useSupabaseAuth();
+  const { profile } = useProfile();
+  const [prompt, setPrompt] = useState("");
+
+  const handlePromptSubmit = () => {
+    if (prompt.trim()) {
+      sessionStorage.setItem("aethex_prompt", prompt);
+      router.push("/ide");
+    }
+  };
+
   return (
-    <main className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-gray-950 to-gray-900 text-white">
-      <div className="max-w-xl w-full px-6 py-12 rounded-xl shadow-2xl bg-black/70 border border-gray-800 flex flex-col items-center">
-        <h1 className="text-4xl font-bold mb-4 tracking-tight">Welcome to AeThex Studio</h1>
-        <p className="mb-6 text-lg text-gray-300 text-center">
-          The next-generation cross-platform IDE for creators, educators, and teams.<br />
-          Download or launch AeThex Studio below.
-        </p>
-        <div className="flex flex-col gap-4 w-full items-center">
-          <a
-            href="/ide"
-            className="w-full py-3 px-6 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-semibold text-lg text-center transition"
-          >
-            Launch Web IDE
-          </a>
-          <a
-            href="https://github.com/AeThex-LABS/aethex-studio/releases/latest"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="w-full py-3 px-6 rounded-lg bg-gray-800 hover:bg-gray-700 text-gray-100 font-semibold text-lg text-center border border-gray-700 transition"
-          >
-            Download Desktop App
-          </a>
+    <main className="min-h-screen bg-[#0a0a0a]">
+      {/* Fixed Navbar */}
+      <nav className="fixed top-0 left-0 right-0 z-50 bg-[#0a0a0a]/90 backdrop-blur-md border-b border-[#1a1a1a]">
+        <div className="flex h-14 items-center justify-between px-4 md:px-10 max-w-6xl mx-auto">
+          <div className="flex items-center gap-8">
+            <Link href="/" className="flex items-center gap-2">
+              <div className="h-8 w-8 rounded-lg bg-gradient-to-br from-purple-500 to-blue-600 flex items-center justify-center">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.5">
+                  <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
+                </svg>
+              </div>
+              <span className="text-xl font-bold text-white">AeThex Studio</span>
+            </Link>
+            <div className="hidden md:flex items-center gap-6">
+              <a href="#features" className="text-sm font-medium text-[#666] hover:text-white transition-colors">Features</a>
+              <a href="#platforms" className="text-sm font-medium text-[#666] hover:text-white transition-colors">Platforms</a>
+              <a href="#pricing" className="text-sm font-medium text-[#666] hover:text-white transition-colors">Pricing</a>
+              <a href="https://github.com/AeThex-LABS/aethex-studio" target="_blank" rel="noopener noreferrer" className="text-sm font-medium text-[#666] hover:text-white transition-colors">GitHub</a>
+            </div>
+          </div>
+          <div className="flex items-center gap-4">
+            {!loading && (
+              <>
+                {user ? (
+                  <>
+                    <Link href="/profile" className="flex items-center gap-2 text-sm text-[#666] hover:text-white transition-colors">
+                      <div className="h-7 w-7 rounded-full bg-gradient-to-br from-purple-500 to-blue-600 flex items-center justify-center text-xs font-medium text-white">
+                        {profile?.username?.[0]?.toUpperCase() || user.email?.[0]?.toUpperCase() || "?"}
+                      </div>
+                    </Link>
+                    <Link href="/ide" className="rounded-full bg-white px-5 py-2 text-sm font-medium text-[#0a0a0a] transition-all hover:bg-[#e5e5e5]">
+                      Launch IDE
+                    </Link>
+                  </>
+                ) : (
+                  <>
+                    <Link href="/auth/login" className="text-sm font-medium text-[#666] hover:text-white transition-colors">Sign in</Link>
+                    <Link href="/auth/signup" className="rounded-full bg-white px-5 py-2 text-sm font-medium text-[#0a0a0a] transition-all hover:bg-[#e5e5e5]">Get started</Link>
+                  </>
+                )}
+              </>
+            )}
+          </div>
         </div>
-        <p className="mt-8 text-xs text-gray-500 text-center">
-          Open source on <a href="https://github.com/AeThex-LABS/aethex-studio" className="underline hover:text-blue-400">GitHub</a>
+      </nav>
+
+      {/* Hero Section - Prompt First */}
+      <section className="relative flex flex-col items-center px-6 pt-32 pb-20 md:pt-44 md:pb-28 overflow-hidden">
+        <div className="pointer-events-none absolute inset-0" style={{
+          background: "radial-gradient(ellipse 80% 50% at 50% -20%, rgba(120, 119, 198, 0.3), transparent)"
+        }} />
+        
+        <h1 className="relative max-w-4xl text-center text-4xl font-bold tracking-tight text-white md:text-6xl lg:text-7xl">
+          Build games for{" "}
+          <span className="bg-gradient-to-r from-purple-400 via-pink-400 to-blue-400 bg-clip-text text-transparent">
+            every platform
+          </span>
+        </h1>
+        <p className="relative mt-6 max-w-2xl text-center text-lg leading-relaxed text-[#888] md:text-xl">
+          The AI-powered cross-platform game IDE. Write once, deploy to Roblox, UEFN, Spatial, and the Web.
         </p>
-      </div>
+
+        {/* Prompt Input Box */}
+        <div className="relative mt-10 w-full max-w-2xl px-4">
+          <div className="bg-[#111] border border-[#222] rounded-2xl p-4 shadow-2xl shadow-purple-500/5">
+            <textarea
+              value={prompt}
+              onChange={(e) => setPrompt(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && !e.shiftKey) {
+                  e.preventDefault();
+                  handlePromptSubmit();
+                }
+              }}
+              placeholder="Describe your game... e.g. 'Create a tower defense game with wave spawning'"
+              className="w-full min-h-[60px] bg-transparent text-white text-base resize-none outline-none placeholder-[#555]"
+              rows={2}
+            />
+            <div className="flex items-center justify-between mt-3 pt-3 border-t border-[#222]">
+              <div className="flex items-center gap-2">
+                <button className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-[#1a1a1a] text-[#666] text-sm hover:bg-[#222] hover:text-white transition-colors">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551" /></svg>
+                  Attach
+                </button>
+                <button className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-[#1a1a1a] text-[#666] text-sm hover:bg-[#222] hover:text-white transition-colors">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect width="18" height="7" x="3" y="3" rx="1"/><rect width="9" height="7" x="3" y="14" rx="1"/><rect width="5" height="7" x="16" y="14" rx="1"/></svg>
+                  Template
+                </button>
+              </div>
+              <button 
+                onClick={handlePromptSubmit}
+                disabled={!prompt.trim()}
+                className="flex items-center justify-center w-10 h-10 rounded-full bg-white text-[#0a0a0a] disabled:bg-[#333] disabled:text-[#666] disabled:cursor-not-allowed transition-colors hover:bg-[#e5e5e5]"
+              >
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Platform badges */}
+        <div className="relative mt-12 flex flex-wrap items-center justify-center gap-3">
+          {[
+            { name: "Roblox", color: "#e11d48" },
+            { name: "UEFN", color: "#8b5cf6" },
+            { name: "Spatial", color: "#10b981" },
+            { name: "Web", color: "#3b82f6" },
+          ].map((platform) => (
+            <div key={platform.name} className="flex items-center gap-2 rounded-full border border-[#222] bg-[#111] px-4 py-2">
+              <div className="h-2 w-2 rounded-full" style={{ backgroundColor: platform.color }} />
+              <span className="text-sm font-medium text-white">{platform.name}</span>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Stats Banner */}
+      <section className="border-y border-[#1a1a1a] bg-[#0d0d0d]">
+        <div className="mx-auto flex max-w-5xl flex-col items-center justify-center gap-8 px-6 py-10 md:flex-row md:gap-16">
+          <div className="text-center">
+            <p className="text-3xl font-bold text-white">4</p>
+            <p className="mt-1 text-sm text-[#666]">Platforms supported</p>
+          </div>
+          <div className="hidden h-8 w-px bg-[#222] md:block" />
+          <div className="text-center">
+            <p className="text-3xl font-bold text-white">AI-Powered</p>
+            <p className="mt-1 text-sm text-[#666]">Code translation</p>
+          </div>
+          <div className="hidden h-8 w-px bg-[#222] md:block" />
+          <div className="text-center">
+            <p className="text-3xl font-bold text-white">Open Source</p>
+            <p className="mt-1 text-sm text-[#666]">MIT Licensed</p>
+          </div>
+        </div>
+      </section>
+
+      {/* Why AeThex vs Others */}
+      <section className="px-6 py-20 md:py-28">
+        <div className="mx-auto max-w-6xl">
+          <div className="text-center mb-16">
+            <p className="text-sm font-medium uppercase tracking-widest text-purple-400">Why AeThex?</p>
+            <h2 className="mt-4 text-3xl font-bold tracking-tight text-white md:text-5xl">
+              One IDE. Every platform.
+            </h2>
+            <p className="mx-auto mt-4 max-w-2xl text-lg text-[#888]">
+              While others lock you into one platform, AeThex lets you build for all of them
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 gap-6">
+            <div className="rounded-2xl border-2 border-purple-500/50 bg-gradient-to-b from-purple-500/10 to-transparent p-8">
+              <div className="flex items-center gap-3 mb-6">
+                <div className="h-10 w-10 rounded-lg bg-gradient-to-br from-purple-500 to-blue-600 flex items-center justify-center">
+                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.5">
+                    <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
+                  </svg>
+                </div>
+                <span className="text-xl font-bold text-white">AeThex Studio</span>
+              </div>
+              <ul className="space-y-4">
+                {[
+                  "Roblox + UEFN + Spatial + Web",
+                  "Full browser-based IDE",
+                  "AI translates between platforms",
+                  "Write once, deploy everywhere",
+                  "Visual UI builder for all platforms",
+                  "Open source (MIT license)",
+                ].map((item, i) => (
+                  <li key={i} className="flex items-center gap-3 text-white">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#22c55e" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            <div className="rounded-2xl border border-[#222] bg-[#111] p-8">
+              <div className="flex items-center gap-3 mb-6">
+                <div className="h-10 w-10 rounded-lg bg-[#222] flex items-center justify-center text-[#666]">
+                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/></svg>
+                </div>
+                <span className="text-xl font-bold text-[#666]">Single-platform tools</span>
+              </div>
+              <ul className="space-y-4">
+                {[
+                  "Roblox only OR UEFN only",
+                  "Generates code snippets",
+                  "No cross-platform translation",
+                  "Locked to one ecosystem",
+                  "Platform-specific UI code",
+                  "Proprietary / closed source",
+                ].map((item, i) => (
+                  <li key={i} className="flex items-center gap-3 text-[#666]">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ef4444" strokeWidth="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Features Grid */}
+      <section id="features" className="border-t border-[#1a1a1a] bg-[#0d0d0d] px-6 py-20 md:py-28">
+        <div className="mx-auto max-w-6xl">
+          <div className="text-center mb-16">
+            <p className="text-sm font-medium uppercase tracking-widest text-[#666]">Features</p>
+            <h2 className="mt-4 text-3xl font-bold tracking-tight text-white md:text-5xl">
+              Everything you need to ship games
+            </h2>
+          </div>
+
+          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+            {[
+              { title: "AI Code Generation", desc: "Describe what you want in plain English. Get production-ready code instantly.", icon: "code" },
+              { title: "Cross-Platform Translation", desc: "Write in Luau, TypeScript, or C#. Deploy to any supported platform.", icon: "translate" },
+              { title: "Visual UI Builder", desc: "Design game UIs visually. Export to platform-native components.", icon: "ui" },
+              { title: "Live Preview", desc: "See changes across all platforms in real-time. Instant feedback loop.", icon: "preview" },
+              { title: "Studio Sync", desc: "Sync directly to Roblox Studio, UEFN, and more via plugin.", icon: "sync" },
+              { title: "Asset Library", desc: "Thousands of free assets, sounds, and scripts ready to use.", icon: "assets" },
+            ].map((feature, i) => (
+              <div key={i} className="group rounded-2xl border border-[#1a1a1a] bg-[#0a0a0a] p-6 transition-all hover:border-[#333] hover:bg-[#111]">
+                <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-[#1a1a1a] text-white transition-all group-hover:bg-purple-500">
+                  {feature.icon === "code" && <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>}
+                  {feature.icon === "translate" && <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/><path d="m22 22-5-10-5 10"/><path d="M14 18h6"/></svg>}
+                  {feature.icon === "ui" && <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg>}
+                  {feature.icon === "preview" && <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>}
+                  {feature.icon === "sync" && <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4.9 19.1C1 15.2 1 8.8 4.9 4.9"/><path d="M7.8 16.2a5 5 0 0 1 0-8.5"/><circle cx="12" cy="12" r="2"/><path d="M16.2 7.8a5 5 0 0 1 0 8.5"/><path d="M19.1 4.9C23 8.8 23 15.1 19.1 19"/></svg>}
+                  {feature.icon === "assets" && <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>}
+                </div>
+                <h3 className="text-lg font-semibold text-white">{feature.title}</h3>
+                <p className="mt-2 text-sm text-[#888] leading-relaxed">{feature.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Platforms */}
+      <section id="platforms" className="px-6 py-20 md:py-28">
+        <div className="mx-auto max-w-6xl">
+          <div className="text-center mb-16">
+            <p className="text-sm font-medium uppercase tracking-widest text-[#666]">Platforms</p>
+            <h2 className="mt-4 text-3xl font-bold tracking-tight text-white md:text-5xl">
+              Deploy everywhere
+            </h2>
+          </div>
+
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            {[
+              { name: "Roblox", color: "#e11d48", lang: "Luau", users: "70M+ daily players" },
+              { name: "UEFN", color: "#8b5cf6", lang: "Verse", users: "Fortnite Creative" },
+              { name: "Spatial", color: "#10b981", lang: "C#", users: "Metaverse platform" },
+              { name: "Web", color: "#3b82f6", lang: "TypeScript", users: "HTML5 Canvas" },
+            ].map((platform) => (
+              <div key={platform.name} className="rounded-2xl border border-[#1a1a1a] bg-[#0d0d0d] p-6 text-center hover:border-[#333] transition-colors">
+                <div className="mx-auto mb-4 h-16 w-16 rounded-2xl flex items-center justify-center" style={{ backgroundColor: platform.color + "15" }}>
+                  <div className="h-8 w-8 rounded-lg" style={{ backgroundColor: platform.color }} />
+                </div>
+                <h3 className="text-xl font-bold text-white">{platform.name}</h3>
+                <p className="mt-1 text-sm text-purple-400 font-medium">{platform.lang}</p>
+                <p className="mt-2 text-xs text-[#666]">{platform.users}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Pricing */}
+      <section id="pricing" className="border-t border-[#1a1a1a] bg-[#0d0d0d] px-6 py-20 md:py-28">
+        <div className="mx-auto max-w-6xl">
+          <div className="text-center mb-16">
+            <p className="text-sm font-medium uppercase tracking-widest text-[#666]">Pricing</p>
+            <h2 className="mt-4 text-3xl font-bold tracking-tight text-white md:text-5xl">
+              Simple, transparent pricing
+            </h2>
+            <p className="mx-auto mt-4 max-w-xl text-lg text-[#888]">
+              Start free. Upgrade when you need more power.
+            </p>
+          </div>
+
+          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
+            <div className="rounded-2xl border border-[#1a1a1a] bg-[#0a0a0a] p-6">
+              <h3 className="text-xl font-bold text-white">Free</h3>
+              <p className="mt-2 text-sm text-[#666] h-10">Get started with AeThex</p>
+              <p className="mt-4"><span className="text-4xl font-bold text-white">$0</span><span className="text-[#666] ml-1">/mo</span></p>
+              <Link href="/auth/signup" className="mt-6 block w-full rounded-lg border border-[#333] py-2.5 text-center text-sm font-medium text-white hover:bg-[#1a1a1a] transition-colors">
+                Get Started
+              </Link>
+              <ul className="mt-6 space-y-3">
+                {["50 AI generations/month", "2 projects", "Community support", "All 4 platforms"].map((item, i) => (
+                  <li key={i} className="flex items-start gap-2 text-sm text-[#888]">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#22c55e" strokeWidth="2" className="mt-0.5 shrink-0"><polyline points="20 6 9 17 4 12"/></svg>
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            <div className="rounded-2xl border-2 border-purple-500 bg-gradient-to-b from-purple-500/10 to-[#0a0a0a] p-6 relative">
+              <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 bg-purple-500 rounded-full text-xs font-medium text-white">Popular</div>
+              <h3 className="text-xl font-bold text-white">Pro</h3>
+              <p className="mt-2 text-sm text-[#666] h-10">For serious game developers</p>
+              <p className="mt-4"><span className="text-4xl font-bold text-white">$15</span><span className="text-[#666] ml-1">/mo</span></p>
+              <Link href="/auth/signup" className="mt-6 block w-full rounded-lg bg-purple-500 py-2.5 text-center text-sm font-medium text-white hover:bg-purple-600 transition-colors">
+                Get Started
+              </Link>
+              <ul className="mt-6 space-y-3">
+                {["500 AI generations/month", "Unlimited projects", "Priority support", "Advanced AI models", "Team collaboration"].map((item, i) => (
+                  <li key={i} className="flex items-start gap-2 text-sm text-[#888]">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#22c55e" strokeWidth="2" className="mt-0.5 shrink-0"><polyline points="20 6 9 17 4 12"/></svg>
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            <div className="rounded-2xl border border-[#1a1a1a] bg-[#0a0a0a] p-6">
+              <h3 className="text-xl font-bold text-white">Team</h3>
+              <p className="mt-2 text-sm text-[#666] h-10">For studios and teams</p>
+              <p className="mt-4"><span className="text-4xl font-bold text-white">$40</span><span className="text-[#666] ml-1">/mo</span></p>
+              <Link href="/auth/signup" className="mt-6 block w-full rounded-lg border border-[#333] py-2.5 text-center text-sm font-medium text-white hover:bg-[#1a1a1a] transition-colors">
+                Get Started
+              </Link>
+              <ul className="mt-6 space-y-3">
+                {["2000 AI generations/month", "Shared team workspace", "Admin controls", "Custom templates", "Dedicated support"].map((item, i) => (
+                  <li key={i} className="flex items-start gap-2 text-sm text-[#888]">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#22c55e" strokeWidth="2" className="mt-0.5 shrink-0"><polyline points="20 6 9 17 4 12"/></svg>
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            <div className="rounded-2xl border border-[#1a1a1a] bg-[#0a0a0a] p-6">
+              <h3 className="text-xl font-bold text-white">Enterprise</h3>
+              <p className="mt-2 text-sm text-[#666] h-10">Custom solutions at scale</p>
+              <p className="mt-4"><span className="text-4xl font-bold text-white">Custom</span></p>
+              <a href="mailto:enterprise@aethex.studio" className="mt-6 block w-full rounded-lg border border-[#333] py-2.5 text-center text-sm font-medium text-white hover:bg-[#1a1a1a] transition-colors">
+                Contact Sales
+              </a>
+              <ul className="mt-6 space-y-3">
+                {["Unlimited generations", "SLA guarantee", "On-premise option", "Custom integrations", "24/7 support"].map((item, i) => (
+                  <li key={i} className="flex items-start gap-2 text-sm text-[#888]">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#22c55e" strokeWidth="2" className="mt-0.5 shrink-0"><polyline points="20 6 9 17 4 12"/></svg>
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Final CTA */}
+      <section className="px-6 py-20 md:py-28">
+        <div className="mx-auto max-w-4xl text-center">
+          <h2 className="text-3xl font-bold tracking-tight text-white md:text-5xl">
+            Ready to build cross-platform games?
+          </h2>
+          <p className="mx-auto mt-4 max-w-xl text-lg text-[#888]">
+            Join thousands of developers building the next generation of games.
+          </p>
+          <div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
+            <Link href="/ide" className="flex items-center gap-2 rounded-full bg-white px-8 py-3 text-base font-medium text-[#0a0a0a] transition-all hover:bg-[#e5e5e5]">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
+              Launch IDE
+            </Link>
+            <a href="https://github.com/AeThex-LABS/aethex-studio" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 rounded-full border border-[#333] px-8 py-3 text-base font-medium text-white transition-all hover:bg-[#1a1a1a]">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><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"/></svg>
+              Star on GitHub
+            </a>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="border-t border-[#1a1a1a] bg-[#0a0a0a]">
+        <div className="mx-auto max-w-6xl px-6 py-12">
+          <div className="grid gap-8 md:grid-cols-4">
+            <div className="md:col-span-1">
+              <div className="flex items-center gap-2 mb-4">
+                <div className="h-8 w-8 rounded-lg bg-gradient-to-br from-purple-500 to-blue-600 flex items-center justify-center">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.5">
+                    <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
+                  </svg>
+                </div>
+                <span className="text-lg font-bold text-white">AeThex</span>
+              </div>
+              <p className="text-sm text-[#666]">The cross-platform game development IDE.</p>
+            </div>
+
+            <div>
+              <h4 className="text-sm font-semibold text-white mb-4">Product</h4>
+              <ul className="space-y-2 text-sm">
+                <li><Link href="/ide" className="text-[#666] hover:text-white transition-colors">IDE</Link></li>
+                <li><a href="#features" className="text-[#666] hover:text-white transition-colors">Features</a></li>
+                <li><a href="#pricing" className="text-[#666] hover:text-white transition-colors">Pricing</a></li>
+              </ul>
+            </div>
+            <div>
+              <h4 className="text-sm font-semibold text-white mb-4">Ecosystem</h4>
+              <ul className="space-y-2 text-sm">
+                <li><a href="https://aethex.dev" className="text-[#666] hover:text-white transition-colors">aethex.dev</a></li>
+                <li><a href="https://aethex.foundation" className="text-[#666] hover:text-white transition-colors">aethex.foundation</a></li>
+                <li><a href="https://aethex.studio" className="text-purple-400 hover:text-purple-300 transition-colors">aethex.studio</a></li>
+              </ul>
+            </div>
+            <div>
+              <h4 className="text-sm font-semibold text-white mb-4">Legal</h4>
+              <ul className="space-y-2 text-sm">
+                <li><Link href="/terms" className="text-[#666] hover:text-white transition-colors">Terms</Link></li>
+                <li><Link href="/privacy" className="text-[#666] hover:text-white transition-colors">Privacy</Link></li>
+              </ul>
+            </div>
+          </div>
+
+          <div className="mt-12 pt-8 border-t border-[#1a1a1a] flex flex-col md:flex-row items-center justify-between gap-4">
+            <p className="text-xs text-[#444]">© 2026 AeThex Labs. All rights reserved.</p>
+            <div className="flex items-center gap-4">
+              <a href="https://github.com/AeThex-LABS" target="_blank" rel="noopener noreferrer" className="text-[#666] hover:text-white transition-colors">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><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"/></svg>
+              </a>
+              <a href="https://discord.gg/aethex" target="_blank" rel="noopener noreferrer" className="text-[#666] hover:text-white transition-colors">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
+              </a>
+              <a href="https://x.com/aethexlabs" target="_blank" rel="noopener noreferrer" className="text-[#666] hover:text-white transition-colors">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </footer>
     </main>
   );
 }
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
new file mode 100644
index 0000000..e00613f
--- /dev/null
+++ b/src/app/profile/page.tsx
@@ -0,0 +1,249 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useSupabaseAuth, useProfile } from "@/hooks/use-supabase";
+import { getSupabase } from "@/lib/supabase/client";
+
+export default function ProfilePage() {
+  const router = useRouter();
+  const { user, loading: authLoading, signOut } = useSupabaseAuth();
+  const { profile, loading: profileLoading } = useProfile();
+  const [username, setUsername] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState("");
+
+  useEffect(() => {
+    if (!authLoading && !user) {
+      router.push("/auth/login");
+    }
+  }, [user, authLoading, router]);
+
+  useEffect(() => {
+    if (profile?.username) {
+      setUsername(profile.username);
+    }
+  }, [profile]);
+
+  const handleSave = async () => {
+    if (!user) return;
+    setSaving(true);
+    setMessage("");
+
+    const supabase = getSupabase();
+    const { error } = await supabase
+      .from("profiles")
+      .update({ username, updated_at: new Date().toISOString() })
+      .eq("id", user.id);
+
+    if (error) {
+      setMessage("Error saving profile: " + error.message);
+    } else {
+      setMessage("Profile saved successfully!");
+    }
+    setSaving(false);
+  };
+
+  const handleSignOut = async () => {
+    await signOut();
+    router.push("/");
+  };
+
+  if (authLoading || profileLoading) {
+    return (
+      <main className="min-h-screen bg-[#0a0a0a] flex items-center justify-center">
+        <div className="animate-spin h-8 w-8 border-2 border-purple-500 border-t-transparent rounded-full"></div>
+      </main>
+    );
+  }
+
+  if (!user) {
+    return null;
+  }
+
+  const subscriptionColors: Record<string, string> = {
+    free: "bg-gray-500",
+    studio: "bg-blue-500",
+    pro: "bg-purple-500",
+    enterprise: "bg-gradient-to-r from-purple-500 to-blue-500",
+  };
+
+  return (
+    <main className="min-h-screen bg-[#0a0a0a]">
+      {/* Header */}
+      <nav className="border-b border-[#222] bg-[#141414]">
+        <div className="max-w-4xl mx-auto px-4 h-14 flex items-center justify-between">
+          <Link href="/" className="flex items-center gap-2">
+            <div className="h-8 w-8 rounded-lg bg-gradient-to-br from-purple-500 to-blue-600 flex items-center justify-center">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.5">
+                <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
+              </svg>
+            </div>
+            <span className="text-lg font-bold text-white">AeThex Studio</span>
+          </Link>
+          <div className="flex items-center gap-4">
+            <Link href="/ide" className="text-sm text-[#888] hover:text-white transition-colors">
+              Open IDE
+            </Link>
+            <button
+              onClick={handleSignOut}
+              className="text-sm text-[#888] hover:text-white transition-colors"
+            >
+              Sign out
+            </button>
+          </div>
+        </div>
+      </nav>
+
+      <div className="max-w-4xl mx-auto px-4 py-12">
+        <h1 className="text-3xl font-bold text-white mb-8">Profile</h1>
+
+        {message && (
+          <div className={`px-4 py-3 rounded-lg mb-6 text-sm ${
+            message.includes("Error") 
+              ? "bg-red-500/10 border border-red-500/20 text-red-400" 
+              : "bg-green-500/10 border border-green-500/20 text-green-400"
+          }`}>
+            {message}
+          </div>
+        )}
+
+        <div className="grid gap-6 md:grid-cols-2">
+          {/* Profile Card */}
+          <div className="bg-[#141414] border border-[#222] rounded-2xl p-6">
+            <div className="flex items-start gap-4 mb-6">
+              <div className="h-16 w-16 rounded-full bg-gradient-to-br from-purple-500 to-blue-600 flex items-center justify-center text-2xl font-bold text-white">
+                {username?.[0]?.toUpperCase() || user.email?.[0]?.toUpperCase() || "?"}
+              </div>
+              <div className="flex-1">
+                <h2 className="text-xl font-semibold text-white">
+                  {username || "Set your username"}
+                </h2>
+                <p className="text-[#888] text-sm">{user.email}</p>
+                <div className="mt-2">
+                  <span className={`inline-block px-2 py-1 rounded text-xs font-medium text-white ${subscriptionColors[profile?.subscription_tier || "free"]}`}>
+                    {(profile?.subscription_tier || "free").toUpperCase()}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <div className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-[#888] mb-2">
+                  Username
+                </label>
+                <input
+                  type="text"
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                  className="w-full bg-[#1b1b1b] border border-[#333] rounded-lg px-4 py-3 text-white placeholder-[#666] focus:outline-none focus:border-purple-500 transition-colors"
+                  placeholder="Enter username"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-[#888] mb-2">
+                  Email
+                </label>
+                <input
+                  type="email"
+                  value={user.email || ""}
+                  disabled
+                  className="w-full bg-[#1b1b1b] border border-[#333] rounded-lg px-4 py-3 text-[#666] cursor-not-allowed"
+                />
+              </div>
+              <button
+                onClick={handleSave}
+                disabled={saving}
+                className="w-full bg-white hover:bg-[#e5e5e5] text-[#0a0a0a] font-medium py-3 px-4 rounded-lg transition-colors disabled:opacity-50"
+              >
+                {saving ? "Saving..." : "Save changes"}
+              </button>
+            </div>
+          </div>
+
+          {/* Stats Card */}
+          <div className="bg-[#141414] border border-[#222] rounded-2xl p-6">
+            <h3 className="text-lg font-semibold text-white mb-6">Usage</h3>
+            <div className="space-y-4">
+              <div className="flex items-center justify-between">
+                <span className="text-[#888]">Translations used</span>
+                <span className="text-white font-medium">{profile?.translation_count || 0}</span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-[#888]">Account created</span>
+                <span className="text-white font-medium">
+                  {profile?.created_at ? new Date(profile.created_at).toLocaleDateString() : "—"}
+                </span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-[#888]">Subscription</span>
+                <span className="text-white font-medium capitalize">{profile?.subscription_tier || "Free"}</span>
+              </div>
+            </div>
+
+            {profile?.subscription_tier === "free" && (
+              <div className="mt-6 p-4 bg-purple-500/10 border border-purple-500/20 rounded-lg">
+                <p className="text-purple-400 text-sm mb-3">Upgrade to Pro for unlimited translations</p>
+                <Link
+                  href="/pricing"
+                  className="inline-block bg-purple-500 hover:bg-purple-600 text-white font-medium py-2 px-4 rounded-lg text-sm transition-colors"
+                >
+                  View plans
+                </Link>
+              </div>
+            )}
+          </div>
+
+          {/* Connected Accounts */}
+          <div className="bg-[#141414] border border-[#222] rounded-2xl p-6 md:col-span-2">
+            <h3 className="text-lg font-semibold text-white mb-6">Connected accounts</h3>
+            <div className="grid gap-4 sm:grid-cols-3">
+              <div className="flex items-center gap-3 p-4 bg-[#1b1b1b] rounded-lg border border-[#333]">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="white">
+                  <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"/>
+                </svg>
+                <div>
+                  <p className="text-white font-medium">GitHub</p>
+                  <p className="text-[#666] text-xs">Not connected</p>
+                </div>
+              </div>
+              <div className="flex items-center gap-3 p-4 bg-[#1b1b1b] rounded-lg border border-[#333]">
+                <svg width="24" height="24" viewBox="0 0 24 24">
+                  <path fill="#4285F4" 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"/>
+                  <path fill="#34A853" 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"/>
+                  <path fill="#FBBC05" 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"/>
+                  <path fill="#EA4335" 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"/>
+                </svg>
+                <div>
+                  <p className="text-white font-medium">Google</p>
+                  <p className="text-[#666] text-xs">Not connected</p>
+                </div>
+              </div>
+              <div className="flex items-center gap-3 p-4 bg-[#1b1b1b] rounded-lg border border-[#333]">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="#5865F2">
+                  <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>
+                </svg>
+                <div>
+                  <p className="text-white font-medium">Discord</p>
+                  <p className="text-[#666] text-xs">Not connected</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Ecosystem Links */}
+        <div className="mt-12 text-center border-t border-[#222] pt-8">
+          <p className="text-[#666] text-xs mb-3">Your AeThex account works across</p>
+          <div className="flex items-center justify-center gap-6 text-sm">
+            <a href="https://aethex.dev" className="text-[#888] hover:text-white transition-colors">aethex.dev</a>
+            <a href="https://aethex.foundation" className="text-[#888] hover:text-white transition-colors">aethex.foundation</a>
+            <a href="https://aethex.studio" className="text-purple-400 hover:text-purple-300 transition-colors">aethex.studio</a>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/src/components/aethex/aethex-studio.tsx b/src/components/aethex/aethex-studio.tsx
index 1581530..07767d4 100644
--- a/src/components/aethex/aethex-studio.tsx
+++ b/src/components/aethex/aethex-studio.tsx
@@ -1,17 +1,14 @@
 
 "use client";
 
-import { useState } from "react";
-import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from "../ui/resizable";
+import { useState, useMemo } from "react";
+import { toast } from "sonner";
 import { Navbar } from "./navbar";
 import FileNavigator from "./file-navigator";
 import { MainView } from "./main-view";
 import { BottomPanel } from "./bottom-panel";
 import AiAssistant from "./ai-assistant";
+import { StatusBar } from "./status-bar";
 import {
   initialFileTree,
   File,
@@ -20,12 +17,83 @@ import {
 } from "../../lib/aethex-data";
 import { NewProjectModal } from "./new-project-modal";
 import { ScriptTemplate, getTemplatesForPlatform } from "../../lib/templates";
+import { cn } from "@/lib/utils";
+import { CommandPalette, createDefaultCommands } from "../CommandPalette";
+import { SettingsPanel } from "./settings-panel";
+import { GitPanel } from "./git-panel";
+import { ExportModal } from "./export-modal";
 
 export function AethexStudio() {
   const [openFiles, setOpenFiles] = useState<File[]>([]);
   const [activeTab, setActiveTab] = useState<string>(openFiles[0]?.id || "");
   const [fileTree, setFileTree] = useState<FolderNode>(initialFileTree);
   const [isNewProjectModalOpen, setIsNewProjectModalOpen] = useState(false);
+  const [isTemplatesOpen, setIsTemplatesOpen] = useState(false);
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [aiOpen, setAiOpen] = useState(true);
+  const [bottomPanelOpen, setBottomPanelOpen] = useState(true);
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [gitOpen, setGitOpen] = useState(false);
+  const [exportOpen, setExportOpen] = useState(false);
+  const [currentPlatform, setCurrentPlatform] = useState<"roblox" | "uefn" | "spatial" | "web">("roblox");
+
+  const handleQuickNewFile = () => {
+    const timestamp = Date.now();
+    const newFile: File = {
+      id: `untitled-${timestamp}`,
+      name: `untitled-${openFiles.length + 1}.lua`,
+      language: "lua",
+      content: `-- New Lua Script\n-- Created with AeThex Studio\n\nlocal module = {}\n\nfunction module.init()\n    print("Hello, World!")\nend\n\nreturn module\n`,
+    };
+    setOpenFiles((prev) => [...prev, newFile]);
+    setActiveTab(newFile.id);
+  };
+
+  const handleTemplateSelect = (template: ScriptTemplate) => {
+    const timestamp = Date.now();
+    const ext = template.platform === 'web' ? 'ts' : 'lua';
+    const newFile: File = {
+      id: `${template.name.toLowerCase().replace(/\s+/g, '-')}-${timestamp}`,
+      name: `${template.name.replace(/\s+/g, '')}.${ext}`,
+      language: template.platform === 'web' ? 'typescript' : 'lua',
+      content: template.code,
+    };
+    setOpenFiles((prev) => [...prev, newFile]);
+    setActiveTab(newFile.id);
+    setIsTemplatesOpen(false);
+  };
+
+  const handleRun = () => {
+    // Show a toast/log in the console panel
+    console.log("[AeThex] Running project...");
+    toast.success("Project started!", {
+      description: "Check the Console panel for output",
+    });
+  };
+
+  const handleSave = () => {
+    const activeFile = openFiles.find(f => f.id === activeTab);
+    if (activeFile) {
+      // In a real app, this would save to backend/filesystem
+      console.log("[AeThex] Saving file:", activeFile.name);
+      toast.success(`Saved "${activeFile.name}"`);
+    } else {
+      toast.error("No file open to save");
+    }
+  };
+
+  const handleSettings = () => {
+    setSettingsOpen(true);
+  };
+
+  const handleGit = () => {
+    setGitOpen(true);
+  };
+
+  const handleExport = () => {
+    setExportOpen(true);
+  };
 
   const handleOpenFile = (file: File) => {
     if (!openFiles.find((f) => f.id === file.id)) {
@@ -57,14 +125,232 @@ export function AethexStudio() {
     setOpenFiles([...openFiles, newFile]);
   };
 
+  const handleCreateFile = (name: string) => {
+    const ext = name.split('.').pop()?.toLowerCase();
+    let language = 'text';
+    if (ext === 'lua' || ext === 'luau') language = 'lua';
+    else if (ext === 'ts' || ext === 'tsx') language = 'typescript';
+    else if (ext === 'js' || ext === 'jsx') language = 'javascript';
+    else if (ext === 'json') language = 'json';
+    
+    const newFileNode: FileNode = {
+      type: 'file',
+      name,
+      language,
+      content: '',
+    };
+    
+    // Add to file tree root (src folder)
+    setFileTree(prev => {
+      const srcFolder = prev.children.find(c => c.type === 'folder' && c.name === 'src') as FolderNode | undefined;
+      if (srcFolder) {
+        return {
+          ...prev,
+          children: prev.children.map(child => 
+            child === srcFolder 
+              ? { ...srcFolder, children: [...srcFolder.children, newFileNode] }
+              : child
+          )
+        };
+      }
+      return {
+        ...prev,
+        children: [...prev.children, newFileNode]
+      };
+    });
+  };
+
+  const handleCreateFolder = (name: string) => {
+    const newFolderNode: FolderNode = {
+      type: 'folder',
+      name,
+      children: [],
+    };
+    
+    // Add to file tree root (src folder)
+    setFileTree(prev => {
+      const srcFolder = prev.children.find(c => c.type === 'folder' && c.name === 'src') as FolderNode | undefined;
+      if (srcFolder) {
+        return {
+          ...prev,
+          children: prev.children.map(child => 
+            child === srcFolder 
+              ? { ...srcFolder, children: [...srcFolder.children, newFolderNode] }
+              : child
+          )
+        };
+      }
+      return {
+        ...prev,
+        children: [...prev.children, newFolderNode]
+      };
+    });
+  };
+
+  // Command palette commands
+  const commands = useMemo(() => createDefaultCommands({
+    onNewProject: () => setIsNewProjectModalOpen(true),
+    onTemplates: () => setIsTemplatesOpen(true),
+    onPreview: handleRun,
+    onExport: () => {
+      const activeFile = openFiles.find(f => f.id === activeTab);
+      if (activeFile) {
+        const blob = new Blob([activeFile.content], { type: 'text/plain' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = activeFile.name;
+        a.click();
+        URL.revokeObjectURL(url);
+        toast.success(`Exported "${activeFile.name}"`);
+      } else {
+        toast.error("No file open to export");
+      }
+    },
+    onCopy: () => {
+      const activeFile = openFiles.find(f => f.id === activeTab);
+      if (activeFile) {
+        navigator.clipboard.writeText(activeFile.content);
+        toast.success("Code copied to clipboard");
+      } else {
+        toast.error("No file open to copy");
+      }
+    },
+  }), [openFiles, activeTab]);
+
   return (
-    <div className="aethex-studio">
-      <Navbar />
-      <FileNavigator fileTree={fileTree} onOpenFile={handleOpenFile} />
-      <MainView />
-      <BottomPanel />
-      <AiAssistant />
-      <NewProjectModal onCreate={handleCreateProject} onClose={() => setIsNewProjectModalOpen(false)} />
+    <div className="flex h-full flex-col bg-[#0d0d10] text-foreground">
+      {/* Top navbar */}
+      <Navbar
+        onToggleSidebar={() => setSidebarOpen(!sidebarOpen)}
+        onToggleAI={() => setAiOpen(!aiOpen)}
+        onToggleBottomPanel={() => setBottomPanelOpen(!bottomPanelOpen)}
+        onNewFile={handleQuickNewFile}
+        onSearch={() => setSearchOpen(true)}
+        onRun={handleRun}
+        onSave={handleSave}
+        onSettings={handleSettings}
+        onGit={handleGit}
+        onExport={handleExport}
+        sidebarOpen={sidebarOpen}
+        aiOpen={aiOpen}
+        bottomPanelOpen={bottomPanelOpen}
+      />
+
+      {/* Main content area */}
+      <div className="flex-1 flex overflow-hidden">
+        {/* Left sidebar - File Navigator */}
+        {sidebarOpen && (
+          <div className="w-[220px] flex-shrink-0 bg-[#12121a] border-r border-white/5 overflow-hidden">
+            <FileNavigator 
+              fileTree={fileTree} 
+              onOpenFile={handleOpenFile}
+              onCreateFile={handleCreateFile}
+              onCreateFolder={handleCreateFolder}
+            />
+          </div>
+        )}
+
+        {/* Center - Editor + Bottom Panel */}
+        <div className="flex-1 flex flex-col overflow-hidden">
+          {/* Editor area */}
+          <div className={cn("flex-1 overflow-hidden", bottomPanelOpen ? "h-[70%]" : "h-full")}>
+            <MainView
+              openFiles={openFiles}
+              activeFileId={activeTab}
+              onFileSelect={setActiveTab}
+              onFileClose={handleCloseFile}
+              onNewFile={handleQuickNewFile}
+              onOpenTemplates={() => setIsTemplatesOpen(true)}
+            />
+          </div>
+
+          {/* Bottom panel */}
+          {bottomPanelOpen && (
+            <div className="h-[200px] flex-shrink-0 bg-[#12121a] border-t border-white/5">
+              <BottomPanel />
+            </div>
+          )}
+        </div>
+
+        {/* Right sidebar - AI Assistant */}
+        {aiOpen && (
+          <div className="w-[320px] flex-shrink-0 bg-[#12121a] border-l border-white/5 overflow-hidden">
+            <AiAssistant />
+          </div>
+        )}
+      </div>
+
+      {/* Status bar */}
+      <StatusBar platform="roblox" language="Lua" />
+
+      {/* Command Palette */}
+      <CommandPalette 
+        open={searchOpen} 
+        onClose={() => setSearchOpen(false)} 
+        commands={commands}
+      />
+
+      {/* Modals */}
+      {isNewProjectModalOpen && (
+        <NewProjectModal
+          onCreate={handleCreateProject}
+          onClose={() => setIsNewProjectModalOpen(false)}
+        />
+      )}
+
+      {/* Templates Modal */}
+      {isTemplatesOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
+          <div className="bg-[#12121a] border border-white/10 rounded-xl w-full max-w-2xl max-h-[80vh] overflow-hidden shadow-2xl">
+            <div className="flex items-center justify-between px-4 py-3 border-b border-white/10">
+              <h2 className="text-lg font-semibold">Choose a Template</h2>
+              <button 
+                onClick={() => setIsTemplatesOpen(false)}
+                className="text-muted-foreground hover:text-foreground transition-colors"
+              >
+                ✕
+              </button>
+            </div>
+            <div className="p-4 overflow-y-auto max-h-[60vh]">
+              <div className="grid grid-cols-2 gap-3">
+                {getTemplatesForPlatform('roblox').map((template) => (
+                  <button
+                    key={template.name}
+                    onClick={() => handleTemplateSelect(template)}
+                    className="text-left p-3 rounded-lg border border-white/5 bg-white/[0.02] hover:bg-white/5 hover:border-white/10 transition-all group"
+                  >
+                    <div className="flex items-center gap-2 mb-1">
+                      <div className="h-6 w-6 rounded bg-red-500/20 flex items-center justify-center">
+                        <span className="text-xs">🎮</span>
+                      </div>
+                      <span className="font-medium text-sm group-hover:text-foreground">{template.name}</span>
+                    </div>
+                    <p className="text-xs text-muted-foreground line-clamp-2">{template.description}</p>
+                    <div className="mt-2 flex items-center gap-2">
+                      <span className="text-[10px] px-1.5 py-0.5 rounded bg-red-500/20 text-red-400">Roblox</span>
+                      <span className="text-[10px] text-muted-foreground">{template.category}</span>
+                    </div>
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Settings Panel */}
+      <SettingsPanel open={settingsOpen} onClose={() => setSettingsOpen(false)} />
+
+      {/* Git Panel */}
+      <GitPanel open={gitOpen} onClose={() => setGitOpen(false)} />
+
+      {/* Export Modal */}
+      <ExportModal 
+        open={exportOpen} 
+        onClose={() => setExportOpen(false)} 
+        platform={currentPlatform} 
+      />
     </div>
   );
 }
diff --git a/src/components/aethex/ai-assistant.tsx b/src/components/aethex/ai-assistant.tsx
index bec802e..6f2764d 100644
--- a/src/components/aethex/ai-assistant.tsx
+++ b/src/components/aethex/ai-assistant.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useState, useRef, useEffect } from "react";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
@@ -21,25 +22,220 @@ import {
   MessageSquarePlus,
   FlaskConical,
   BookText,
+  User,
+  Zap,
+  RefreshCw,
 } from "lucide-react";
-import { AethexLogo } from "./icons";
-import { useState, useRef, useEffect, memo } from "react";
-import { aiHelpFromPrompt } from "@/ai/flows/ai-help-from-prompt";
 import { cn } from "@/lib/utils";
-import { marked } from "marked";
-import SyntaxHighlighter from "react-syntax-highlighter";
-import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
-import { useToast } from "@/hooks/use-toast";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 
+interface Message {
+  id: string;
+  role: "user" | "assistant";
+  content: string;
+  timestamp: Date;
+}
+
+const suggestedPrompts = [
+  { icon: Code, text: "Generate a Roblox spawn system" },
+  { icon: FlaskConical, text: "Debug my current code" },
+  { icon: BookText, text: "Explain cross-platform patterns" },
+  { icon: Sparkles, text: "Optimize my game loop" },
+];
 
 const AiAssistant = () => {
-  return <aside>AiAssistant (stub)</aside>;
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [model, setModel] = useState("claude-3.5");
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [messages]);
+
+  const handleSend = async () => {
+    if (!input.trim() || isLoading) return;
+
+    const userMessage: Message = {
+      id: Date.now().toString(),
+      role: "user",
+      content: input,
+      timestamp: new Date(),
+    };
+
+    setMessages((prev) => [...prev, userMessage]);
+    setInput("");
+    setIsLoading(true);
+
+    // Simulate AI response
+    setTimeout(() => {
+      const aiMessage: Message = {
+        id: (Date.now() + 1).toString(),
+        role: "assistant",
+        content: `I'll help you with that! Here's a solution for "${input.slice(0, 50)}..."
+
+\`\`\`lua
+-- Example code snippet
+local function example()
+    print("Hello from AeThex AI!")
+end
+\`\`\`
+
+Would you like me to explain this further or make any modifications?`,
+        timestamp: new Date(),
+      };
+      setMessages((prev) => [...prev, aiMessage]);
+      setIsLoading(false);
+    }, 1500);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Header */}
+      <div className="flex items-center justify-between border-b border-white/5 px-3 py-2">
+        <div className="flex items-center gap-2">
+          <div className="h-6 w-6 rounded-lg bg-gradient-to-br from-purple-500 via-blue-500 to-cyan-400 flex items-center justify-center shadow-lg shadow-purple-500/20">
+            <Zap className="h-3 w-3 text-white" />
+          </div>
+          <span className="text-sm font-semibold bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent">AI Assistant</span>
+        </div>
+        <div className="flex items-center gap-1">
+          <Select value={model} onValueChange={setModel}>
+            <SelectTrigger className="h-6 w-24 text-[10px] bg-white/5 border-white/10">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="claude-3.5">Claude 3.5</SelectItem>
+              <SelectItem value="gpt-4">GPT-4</SelectItem>
+              <SelectItem value="gemini">Gemini Pro</SelectItem>
+            </SelectContent>
+          </Select>
+          <Button 
+            variant="ghost" 
+            size="icon" 
+            className="h-6 w-6 text-muted-foreground hover:text-foreground hover:bg-white/5"
+            onClick={() => setMessages([])}
+            title="New conversation"
+          >
+            <MessageSquarePlus className="h-3.5 w-3.5" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Messages */}
+      <ScrollArea className="flex-1 p-3" ref={scrollRef}>
+        {messages.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-full text-center py-8">
+            <div className="h-14 w-14 rounded-2xl bg-gradient-to-br from-purple-500/20 via-blue-500/20 to-cyan-500/20 flex items-center justify-center mb-4 border border-white/5">
+              <Bot className="h-7 w-7 text-purple-400" />
+            </div>
+            <h3 className="font-semibold text-foreground mb-1">How can I help?</h3>
+            <p className="text-xs text-muted-foreground mb-6 max-w-48">
+              Ask anything about your code, get suggestions, or generate new scripts.
+            </p>
+            <div className="grid grid-cols-1 gap-2 w-full">
+              {suggestedPrompts.map((prompt, i) => (
+                <button
+                  key={i}
+                  onClick={() => setInput(prompt.text)}
+                  className="flex items-center gap-2.5 rounded-lg border border-white/5 bg-white/[0.02] p-2.5 text-xs text-muted-foreground hover:bg-white/5 hover:text-foreground hover:border-white/10 transition-all text-left group"
+                >
+                  <div className="h-6 w-6 rounded-md bg-white/5 flex items-center justify-center group-hover:bg-white/10 transition-colors">
+                    <prompt.icon className="h-3 w-3" />
+                  </div>
+                  <span className="truncate">{prompt.text}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {messages.map((message) => (
+              <div
+                key={message.id}
+                className={cn(
+                  "flex gap-3",
+                  message.role === "user" && "flex-row-reverse"
+                )}
+              >
+                <Avatar className="h-7 w-7 shrink-0">
+                  <AvatarFallback
+                    className={cn(
+                      "text-xs",
+                      message.role === "assistant"
+                        ? "bg-gradient-to-br from-blue-500 to-purple-600 text-white"
+                        : "bg-accent"
+                    )}
+                  >
+                    {message.role === "assistant" ? (
+                      <Bot className="h-3.5 w-3.5" />
+                    ) : (
+                      <User className="h-3.5 w-3.5" />
+                    )}
+                  </AvatarFallback>
+                </Avatar>
+                <div
+                  className={cn(
+                    "rounded-lg px-3 py-2 text-sm max-w-[85%]",
+                    message.role === "assistant"
+                      ? "bg-accent/50"
+                      : "bg-blue-600 text-white"
+                  )}
+                >
+                  <p className="whitespace-pre-wrap">{message.content}</p>
+                </div>
+              </div>
+            ))}
+            {isLoading && (
+              <div className="flex gap-3">
+                <Avatar className="h-7 w-7 shrink-0">
+                  <AvatarFallback className="bg-gradient-to-br from-blue-500 to-purple-600 text-white text-xs">
+                    <Bot className="h-3.5 w-3.5" />
+                  </AvatarFallback>
+                </Avatar>
+                <div className="rounded-lg bg-accent/50 px-3 py-2 text-sm">
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </ScrollArea>
+
+      {/* Input */}
+      <div className="border-t border-white/5 p-3">
+        <div className="relative">
+          <Textarea
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Ask anything about your code..."
+            className="min-h-[70px] resize-none pr-10 text-sm bg-white/5 border-white/5 placeholder:text-muted-foreground/50 focus:border-purple-500/50 focus:bg-white/10"
+          />
+          <Button
+            size="icon"
+            className="absolute bottom-2 right-2 h-7 w-7 bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-500 hover:to-blue-500 border-0"
+            onClick={handleSend}
+            disabled={!input.trim() || isLoading}
+          >
+            <Send className="h-3 w-3" />
+          </Button>
+        </div>
+        <p className="mt-2 text-[10px] text-muted-foreground/50 text-center">
+          AI responses may not always be accurate. Verify important code.
+        </p>
+      </div>
+    </div>
+  );
 };
 
 export default AiAssistant;
diff --git a/src/components/aethex/bottom-panel.tsx b/src/components/aethex/bottom-panel.tsx
index b6db85e..25f8e1c 100644
--- a/src/components/aethex/bottom-panel.tsx
+++ b/src/components/aethex/bottom-panel.tsx
@@ -1,62 +1,204 @@
 "use client";
 
+import { useState } from "react";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { consoleLogs } from "@/lib/aethex-data";
-import { ChevronRight, HardDrive } from "lucide-react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Button } from "@/components/ui/button";
+import { consoleLogs as initialLogs } from "@/lib/aethex-data";
+import { 
+  ChevronRight, 
+  Terminal as TerminalIcon, 
+  AlertCircle, 
+  AlertTriangle, 
+  Info,
+  Trash2,
+  Filter,
+  Download,
+  Maximize2,
+  X
+} from "lucide-react";
+import { cn } from "@/lib/utils";
 
 export function BottomPanel() {
+  const [activeTab, setActiveTab] = useState("console");
+  const [logs, setLogs] = useState(initialLogs);
+  const [filterType, setFilterType] = useState<string | null>(null);
+  const [isMaximized, setIsMaximized] = useState(false);
+
+  const handleClearLogs = () => {
+    setLogs([]);
+  };
+
+  const handleFilter = () => {
+    // Cycle through filter types: null -> info -> warn -> error -> null
+    if (filterType === null) setFilterType("info");
+    else if (filterType === "info") setFilterType("warn");
+    else if (filterType === "warn") setFilterType("error");
+    else setFilterType(null);
+  };
+
+  const filteredLogs = filterType ? logs.filter(log => log.type === filterType) : logs;
+
   return (
     <div className="flex h-full flex-col">
-      <Tabs defaultValue="console" className="flex h-full flex-col">
-        <TabsList className="mx-2 mt-2 self-start rounded-md">
-          <TabsTrigger value="console">Console</TabsTrigger>
-          <TabsTrigger value="terminal">Terminal</TabsTrigger>
-        </TabsList>
-        <TabsContent value="console" className="flex-1 overflow-auto p-4 text-xs">
-          <div className="font-code">
-            {consoleLogs.map((log, index) => (
+      {/* Tab bar with actions */}
+      <div className="flex items-center justify-between border-b border-white/5 px-2">
+        <div className="flex items-center">
+          <button
+            onClick={() => setActiveTab("console")}
+            className={cn(
+              "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium transition-colors border-b-2 -mb-px",
+              activeTab === "console"
+                ? "text-foreground border-purple-500"
+                : "text-muted-foreground border-transparent hover:text-foreground"
+            )}
+          >
+            <Info className="h-3 w-3" />
+            Console
+            <span className="ml-1.5 bg-white/10 px-1.5 py-0.5 rounded text-[10px]">3</span>
+          </button>
+          <button
+            onClick={() => setActiveTab("terminal")}
+            className={cn(
+              "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium transition-colors border-b-2 -mb-px",
+              activeTab === "terminal"
+                ? "text-foreground border-purple-500"
+                : "text-muted-foreground border-transparent hover:text-foreground"
+            )}
+          >
+            <TerminalIcon className="h-3 w-3" />
+            Terminal
+          </button>
+          <button
+            onClick={() => setActiveTab("problems")}
+            className={cn(
+              "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium transition-colors border-b-2 -mb-px",
+              activeTab === "problems"
+                ? "text-foreground border-purple-500"
+                : "text-muted-foreground border-transparent hover:text-foreground"
+            )}
+          >
+            <AlertCircle className="h-3 w-3" />
+            Problems
+            <span className="ml-1.5 bg-yellow-500/20 text-yellow-400 px-1.5 py-0.5 rounded text-[10px]">2</span>
+          </button>
+        </div>
+        
+        <div className="flex items-center gap-0.5">
+          <Button 
+            variant="ghost" 
+            size="icon" 
+            className={cn(
+              "h-6 w-6 hover:bg-white/5",
+              filterType ? "text-purple-400" : "text-muted-foreground hover:text-foreground"
+            )}
+            onClick={handleFilter}
+            title={filterType ? `Filtering: ${filterType}` : "Filter logs"}
+          >
+            <Filter className="h-3 w-3" />
+          </Button>
+          <Button 
+            variant="ghost" 
+            size="icon" 
+            className="h-6 w-6 text-muted-foreground hover:text-foreground hover:bg-white/5"
+            onClick={handleClearLogs}
+            title="Clear console"
+          >
+            <Trash2 className="h-3 w-3" />
+          </Button>
+          <Button 
+            variant="ghost" 
+            size="icon" 
+            className="h-6 w-6 text-muted-foreground hover:text-foreground hover:bg-white/5"
+            onClick={() => setIsMaximized(!isMaximized)}
+            title={isMaximized ? "Restore" : "Maximize"}
+          >
+            <Maximize2 className="h-3 w-3" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Console content */}
+      {activeTab === "console" && (
+        <ScrollArea className="flex-1">
+          <div className="p-2 font-mono text-xs space-y-0.5">
+            {filteredLogs.length === 0 ? (
+              <div className="flex items-center justify-center h-20 text-muted-foreground">
+                {logs.length === 0 ? "No console output" : `No ${filterType} logs`}
+              </div>
+            ) : (
+            filteredLogs.map((log, index) => (
               <div
                 key={index}
-                className={`flex items-start gap-2 border-b border-border/50 py-1 ${
-                  log.type === "error"
-                    ? "text-destructive"
-                    : log.type === "warn"
-                    ? "text-yellow-400"
-                    : "text-muted-foreground"
-                }`}
+                className={cn(
+                  "flex items-start gap-2 px-2 py-1 rounded hover:bg-white/5 transition-colors",
+                  log.type === "error" && "bg-red-500/5",
+                  log.type === "warn" && "bg-yellow-500/5"
+                )}
               >
-                <span className="w-20 shrink-0 text-foreground/50">
+                <span className="text-muted-foreground/50 w-16 shrink-0 tabular-nums">
                   {log.timestamp}
                 </span>
                 <span
-                  className={`w-12 shrink-0 font-bold ${
-                    log.platform === "Roblox"
-                      ? "text-red-500"
-                      : log.platform === "Web"
-                      ? "text-blue-500"
-                      : "text-green-500"
-                  }`}
+                  className={cn(
+                    "w-14 shrink-0 font-medium",
+                    log.platform === "Roblox" && "text-red-400",
+                    log.platform === "Web" && "text-blue-400",
+                    log.platform === "Mobile" && "text-emerald-400"
+                  )}
                 >
                   [{log.platform}]
                 </span>
-                <p className="flex-1 whitespace-pre-wrap">{log.message}</p>
+                {log.type === "error" && <AlertCircle className="h-3 w-3 text-red-400 shrink-0 mt-0.5" />}
+                {log.type === "warn" && <AlertTriangle className="h-3 w-3 text-yellow-400 shrink-0 mt-0.5" />}
+                <p className={cn(
+                  "flex-1",
+                  log.type === "error" && "text-red-400",
+                  log.type === "warn" && "text-yellow-400",
+                  log.type === "log" && "text-foreground/80"
+                )}>
+                  {log.message}
+                </p>
               </div>
-            ))}
+            )))}
           </div>
-        </TabsContent>
-        <TabsContent value="terminal" className="h-full">
-            <div className="flex h-full flex-col bg-background p-4 font-code text-xs">
-                <p>AeThex Terminal</p>
-                <p>Copyright (c) 2024. All rights reserved.</p>
-                <div className="mt-4 flex items-center gap-2">
-                    <HardDrive className="h-3 w-3 text-accent" />
-                    <span className="text-accent">~/aethex-project</span>
-                    <ChevronRight className="h-3 w-3" />
-                    <span className="flex-1"></span>
-                </div>
+        </ScrollArea>
+      )}
+
+      {/* Terminal content */}
+      {activeTab === "terminal" && (
+        <div className="flex-1 bg-[#0a0a0c] p-3 font-mono text-xs">
+          <div className="text-emerald-400 mb-2">
+            <span className="text-purple-400">➜</span> ~/aethex-project <span className="text-blue-400">git:(main)</span>
+          </div>
+          <div className="flex items-center gap-1 text-muted-foreground">
+            <span className="text-muted-foreground/50">$</span>
+            <span className="animate-pulse">▋</span>
+          </div>
+        </div>
+      )}
+
+      {/* Problems content */}
+      {activeTab === "problems" && (
+        <ScrollArea className="flex-1">
+          <div className="p-2 space-y-1">
+            <div className="flex items-start gap-2 px-2 py-1.5 rounded bg-yellow-500/5 hover:bg-yellow-500/10 transition-colors">
+              <AlertTriangle className="h-3.5 w-3.5 text-yellow-400 shrink-0 mt-0.5" />
+              <div className="flex-1 min-w-0">
+                <p className="text-xs text-yellow-400">Unused variable 'tempData'</p>
+                <p className="text-[10px] text-muted-foreground">src/scripts/main.lua:24</p>
+              </div>
             </div>
-        </TabsContent>
-      </Tabs>
+            <div className="flex items-start gap-2 px-2 py-1.5 rounded bg-yellow-500/5 hover:bg-yellow-500/10 transition-colors">
+              <AlertTriangle className="h-3.5 w-3.5 text-yellow-400 shrink-0 mt-0.5" />
+              <div className="flex-1 min-w-0">
+                <p className="text-xs text-yellow-400">Consider using 'local' for function declaration</p>
+                <p className="text-[10px] text-muted-foreground">src/scripts/player.lua:8</p>
+              </div>
+            </div>
+          </div>
+        </ScrollArea>
+      )}
     </div>
   );
 }
diff --git a/src/components/aethex/code-editor.tsx b/src/components/aethex/code-editor.tsx
index 9c2a1a3..77a5318 100644
--- a/src/components/aethex/code-editor.tsx
+++ b/src/components/aethex/code-editor.tsx
@@ -5,7 +5,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Button } from "@/components/ui/button";
 import { X } from "lucide-react";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import type { OpenFileType } from "./aethex-studio";
+import type { File as OpenFileType } from "@/lib/aethex-data";
 
 type CodeEditorProps = {
   openFiles: OpenFileType[];
diff --git a/src/components/aethex/cross-platform-view.tsx b/src/components/aethex/cross-platform-view.tsx
index 8e14264..cceb826 100644
--- a/src/components/aethex/cross-platform-view.tsx
+++ b/src/components/aethex/cross-platform-view.tsx
@@ -66,7 +66,7 @@ export function CrossPlatformView() {
   const mobileViewport = PlaceHolderImages.find((p) => p.id === "mobile-vp");
 
   return (
-    <ResizablePanelGroup direction="vertical" className="h-full w-full">
+    <ResizablePanelGroup orientation="vertical" className="h-full w-full">
       <ResizablePanel defaultSize={50} minSize={30}>
         <div className="grid h-full grid-cols-3 gap-2 p-2">
           {robloxViewport && (
diff --git a/src/components/aethex/dashboard-page.tsx b/src/components/aethex/dashboard-page.tsx
index b695016..e13f5a2 100644
--- a/src/components/aethex/dashboard-page.tsx
+++ b/src/components/aethex/dashboard-page.tsx
@@ -7,8 +7,6 @@ import { WorkspaceCard } from "./workspace-card";
 import { WorkspaceCardSkeleton } from "./workspace-card-skeleton";
 import { workspaces as initialWorkspaces } from "@/lib/workspaces";
 import { NewProjectModal } from "./new-project-modal";
-import { ProjectTemplate } from "@/lib/templates";
-import { NewProjectFormValues } from "./new-project-modal";
 import { MobileIcon, RobloxIcon, WebIcon } from "./icons";
 
 type Workspace = typeof initialWorkspaces[0];
@@ -26,21 +24,14 @@ export function DashboardPage() {
     return () => clearTimeout(timer);
   }, []);
 
-  const handleCreateProject = (
-    template: ProjectTemplate,
-    config: NewProjectFormValues
-  ) => {
+  const handleCreateProject = (name: string) => {
     // This is a mock implementation. In a real app, this would involve
     // an API call to create a new project in the backend.
     const newWorkspace: Workspace = {
       id: `proj-${Date.now()}`,
-      name: config.projectName,
+      name,
       lastModified: "Just now",
-      platforms: config.platforms.map((p) => {
-        if (p === "roblox") return RobloxIcon;
-        if (p === "web") return WebIcon;
-        return MobileIcon;
-      }),
+      platforms: ["roblox"],
       thumbnailUrlId: "workspace-thumb-4",
       thumbnailImageHint: "futuristic city",
     };
@@ -105,11 +96,12 @@ export function DashboardPage() {
           <main>{renderContent()}</main>
         </div>
       </div>
-      <NewProjectModal
-        isOpen={isNewProjectModalOpen}
-        onClose={() => setIsNewProjectModalOpen(false)}
-        onCreateProject={handleCreateProject}
-      />
+      {isNewProjectModalOpen && (
+        <NewProjectModal
+          onCreate={handleCreateProject}
+          onClose={() => setIsNewProjectModalOpen(false)}
+        />
+      )}
     </>
   );
 }
diff --git a/src/components/aethex/export-modal.tsx b/src/components/aethex/export-modal.tsx
new file mode 100644
index 0000000..8b2601b
--- /dev/null
+++ b/src/components/aethex/export-modal.tsx
@@ -0,0 +1,211 @@
+"use client";
+
+import { useState } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Progress } from "@/components/ui/progress";
+import {
+  Download,
+  Folder,
+  FileCode,
+  Package,
+  Check,
+  Loader2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface ExportModalProps {
+  open: boolean;
+  onClose: () => void;
+  platform: "roblox" | "uefn" | "spatial" | "web";
+}
+
+const exportFormats = {
+  roblox: [
+    { id: "rbxlx", name: "Roblox Place (.rbxlx)", description: "Full place file with all assets" },
+    { id: "rbxmx", name: "Roblox Model (.rbxmx)", description: "Model file for importing" },
+    { id: "lua", name: "Lua Scripts (.lua)", description: "Export scripts only" },
+  ],
+  uefn: [
+    { id: "uproject", name: "UEFN Project", description: "Full Unreal project structure" },
+    { id: "verse", name: "Verse Scripts", description: "Export Verse code only" },
+    { id: "pak", name: "Package (.pak)", description: "Compiled game package" },
+  ],
+  spatial: [
+    { id: "spatial", name: "Spatial Package", description: "Ready for Spatial.io upload" },
+    { id: "unity", name: "Unity Export", description: "Unity asset format" },
+    { id: "gltf", name: "glTF Models", description: "3D models only" },
+  ],
+  web: [
+    { id: "html", name: "Static HTML", description: "Single HTML file with embedded code" },
+    { id: "zip", name: "Project ZIP", description: "Full project archive" },
+    { id: "npm", name: "NPM Package", description: "Ready for npm publish" },
+  ],
+};
+
+const platformColors = {
+  roblox: "text-red-400",
+  uefn: "text-purple-400",
+  spatial: "text-emerald-400",
+  web: "text-blue-400",
+};
+
+export function ExportModal({ open, onClose, platform }: ExportModalProps) {
+  const [selectedFormat, setSelectedFormat] = useState(exportFormats[platform][0].id);
+  const [exportName, setExportName] = useState("my-project");
+  const [includeAssets, setIncludeAssets] = useState(true);
+  const [minify, setMinify] = useState(false);
+  const [isExporting, setIsExporting] = useState(false);
+  const [exportProgress, setExportProgress] = useState(0);
+  const [exportComplete, setExportComplete] = useState(false);
+
+  const handleExport = async () => {
+    setIsExporting(true);
+    setExportProgress(0);
+    setExportComplete(false);
+
+    // Simulate export progress
+    for (let i = 0; i <= 100; i += 10) {
+      await new Promise(resolve => setTimeout(resolve, 200));
+      setExportProgress(i);
+    }
+
+    setIsExporting(false);
+    setExportComplete(true);
+
+    // Trigger download
+    const content = `-- Exported from AeThex Studio\n-- Platform: ${platform}\n-- Format: ${selectedFormat}\n\nprint("Hello from AeThex!")`;
+    const blob = new Blob([content], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${exportName}.${selectedFormat === 'lua' ? 'lua' : 'zip'}`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const resetAndClose = () => {
+    setExportComplete(false);
+    setExportProgress(0);
+    onClose();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={resetAndClose}>
+      <DialogContent className="max-w-lg p-0 gap-0 bg-[#12121a] border-white/10">
+        <DialogHeader className="px-6 py-4 border-b border-white/10">
+          <DialogTitle className="flex items-center gap-2 text-lg">
+            <Download className="h-5 w-5" />
+            Export Project
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="p-6 space-y-6">
+          {/* Platform indicator */}
+          <div className={cn("flex items-center gap-2 text-sm", platformColors[platform])}>
+            <Package className="h-4 w-4" />
+            <span className="capitalize font-medium">{platform} Export</span>
+          </div>
+
+          {/* Export name */}
+          <div className="space-y-2">
+            <Label>Export Name</Label>
+            <Input
+              value={exportName}
+              onChange={(e) => setExportName(e.target.value)}
+              placeholder="my-project"
+              className="bg-white/5 border-white/10"
+            />
+          </div>
+
+          {/* Format selection */}
+          <div className="space-y-3">
+            <Label>Export Format</Label>
+            <RadioGroup value={selectedFormat} onValueChange={setSelectedFormat}>
+              {exportFormats[platform].map((format) => (
+                <div
+                  key={format.id}
+                  className={cn(
+                    "flex items-start gap-3 p-3 rounded-lg border transition-colors cursor-pointer",
+                    selectedFormat === format.id
+                      ? "border-purple-500 bg-purple-500/10"
+                      : "border-white/10 hover:border-white/20"
+                  )}
+                  onClick={() => setSelectedFormat(format.id)}
+                >
+                  <RadioGroupItem value={format.id} className="mt-0.5" />
+                  <div>
+                    <div className="font-medium text-sm">{format.name}</div>
+                    <div className="text-xs text-muted-foreground">{format.description}</div>
+                  </div>
+                </div>
+              ))}
+            </RadioGroup>
+          </div>
+
+          {/* Options */}
+          <div className="space-y-3">
+            <Label>Options</Label>
+            <div className="space-y-2">
+              <label className="flex items-center gap-2 cursor-pointer">
+                <Checkbox
+                  checked={includeAssets}
+                  onCheckedChange={(v) => setIncludeAssets(!!v)}
+                />
+                <span className="text-sm">Include assets (images, sounds, models)</span>
+              </label>
+              <label className="flex items-center gap-2 cursor-pointer">
+                <Checkbox
+                  checked={minify}
+                  onCheckedChange={(v) => setMinify(!!v)}
+                />
+                <span className="text-sm">Minify code for production</span>
+              </label>
+            </div>
+          </div>
+
+          {/* Progress */}
+          {(isExporting || exportComplete) && (
+            <div className="space-y-2">
+              <div className="flex items-center justify-between text-sm">
+                <span>{exportComplete ? "Export complete!" : "Exporting..."}</span>
+                <span>{exportProgress}%</span>
+              </div>
+              <Progress value={exportProgress} className="h-2" />
+            </div>
+          )}
+        </div>
+
+        <div className="flex items-center justify-end gap-2 px-6 py-4 border-t border-white/10">
+          <Button variant="ghost" onClick={resetAndClose}>Cancel</Button>
+          <Button
+            onClick={handleExport}
+            disabled={isExporting || !exportName.trim()}
+            className="bg-purple-600 hover:bg-purple-500 gap-2"
+          >
+            {isExporting ? (
+              <>
+                <Loader2 className="h-4 w-4 animate-spin" />
+                Exporting...
+              </>
+            ) : exportComplete ? (
+              <>
+                <Check className="h-4 w-4" />
+                Downloaded
+              </>
+            ) : (
+              <>
+                <Download className="h-4 w-4" />
+                Export
+              </>
+            )}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/components/aethex/file-navigator.tsx b/src/components/aethex/file-navigator.tsx
index 82e5709..7e581bc 100644
--- a/src/components/aethex/file-navigator.tsx
+++ b/src/components/aethex/file-navigator.tsx
@@ -1,12 +1,23 @@
 "use client";
 
-import React from "react";
+import React, { useState } from "react";
 import {
   File,
   Folder,
+  FolderOpen,
   ChevronRight,
+  ChevronDown,
   FolderPlus,
   FilePlus,
+  Search,
+  MoreHorizontal,
+  Code,
+  FileCode,
+  FileJson,
+  FileText,
+  Image,
+  X,
+  Check,
 } from "lucide-react";
 import {
   Collapsible,
@@ -15,17 +26,300 @@ import {
 } from "@/components/ui/collapsible";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import { FileNode, FolderNode, File as OpenFileType } from "@/lib/aethex-data";
-import { generateFileContent } from "@/lib/templates";
-
+import { cn } from "@/lib/utils";
 
 type FileNavigatorProps = {
   onOpenFile: (file: OpenFileType) => void;
   fileTree: FolderNode;
+  onCreateFile?: (name: string, parentPath?: string) => void;
+  onCreateFolder?: (name: string, parentPath?: string) => void;
 };
 
-const FileNavigator: React.FC<FileNavigatorProps> = () => {
-  return <nav>FileNavigator (stub)</nav>;
+const getFileIcon = (filename: string) => {
+  const ext = filename.split('.').pop()?.toLowerCase();
+  switch (ext) {
+    case 'lua':
+    case 'luau':
+      return <FileCode className="h-4 w-4 text-blue-400" />;
+    case 'ts':
+    case 'tsx':
+      return <FileCode className="h-4 w-4 text-blue-500" />;
+    case 'js':
+    case 'jsx':
+      return <FileCode className="h-4 w-4 text-yellow-400" />;
+    case 'json':
+      return <FileJson className="h-4 w-4 text-yellow-500" />;
+    case 'md':
+      return <FileText className="h-4 w-4 text-gray-400" />;
+    case 'png':
+    case 'jpg':
+    case 'svg':
+      return <Image className="h-4 w-4 text-purple-400" />;
+    default:
+      return <File className="h-4 w-4 text-muted-foreground" />;
+  }
+};
+
+interface TreeItemProps {
+  node: FileNode | FolderNode;
+  depth: number;
+  onOpenFile: (file: OpenFileType) => void;
+}
+
+function TreeItem({ node, depth, onOpenFile }: TreeItemProps) {
+  const [isOpen, setIsOpen] = useState(depth < 2);
+  const isFolder = node.type === 'folder';
+
+  if (isFolder) {
+    const folderNode = node as FolderNode;
+    return (
+      <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            className={cn(
+              "flex w-full items-center gap-1.5 rounded-sm px-2 py-1 text-sm hover:bg-accent/50 transition-colors",
+              "text-muted-foreground hover:text-foreground"
+            )}
+            style={{ paddingLeft: `${depth * 12 + 8}px` }}
+          >
+            {isOpen ? (
+              <ChevronDown className="h-3.5 w-3.5 shrink-0" />
+            ) : (
+              <ChevronRight className="h-3.5 w-3.5 shrink-0" />
+            )}
+            {isOpen ? (
+              <FolderOpen className="h-4 w-4 text-amber-400 shrink-0" />
+            ) : (
+              <Folder className="h-4 w-4 text-amber-400 shrink-0" />
+            )}
+            <span className="truncate">{folderNode.name}</span>
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          {folderNode.children.map((child, index) => (
+            <TreeItem
+              key={child.name + index}
+              node={child}
+              depth={depth + 1}
+              onOpenFile={onOpenFile}
+            />
+          ))}
+        </CollapsibleContent>
+      </Collapsible>
+    );
+  }
+
+  const fileNode = node as FileNode;
+  return (
+    <button
+      className={cn(
+        "flex w-full items-center gap-1.5 rounded-sm px-2 py-1 text-sm hover:bg-accent/50 transition-colors",
+        "text-muted-foreground hover:text-foreground"
+      )}
+      style={{ paddingLeft: `${depth * 12 + 24}px` }}
+      onClick={() =>
+        onOpenFile({
+          id: fileNode.name,
+          name: fileNode.name,
+          language: fileNode.language || "text",
+          content: fileNode.content || "",
+        })
+      }
+    >
+      {getFileIcon(fileNode.name)}
+      <span className="truncate">{fileNode.name}</span>
+    </button>
+  );
+}
+
+const FileNavigator: React.FC<FileNavigatorProps> = ({ fileTree, onOpenFile, onCreateFile, onCreateFolder }) => {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [isCreatingFile, setIsCreatingFile] = useState(false);
+  const [isCreatingFolder, setIsCreatingFolder] = useState(false);
+  const [newItemName, setNewItemName] = useState("");
+
+  const handleCreateFile = () => {
+    if (newItemName.trim()) {
+      if (onCreateFile) {
+        onCreateFile(newItemName.trim());
+      }
+      // Also immediately open the new file
+      const ext = newItemName.split('.').pop()?.toLowerCase();
+      let language = 'text';
+      if (ext === 'lua' || ext === 'luau') language = 'lua';
+      else if (ext === 'ts' || ext === 'tsx') language = 'typescript';
+      else if (ext === 'js' || ext === 'jsx') language = 'javascript';
+      else if (ext === 'json') language = 'json';
+      else if (ext === 'md') language = 'markdown';
+      
+      onOpenFile({
+        id: newItemName.trim() + '-' + Date.now(),
+        name: newItemName.trim(),
+        language,
+        content: getDefaultContent(newItemName.trim()),
+      });
+      setNewItemName("");
+      setIsCreatingFile(false);
+    }
+  };
+
+  const handleCreateFolder = () => {
+    if (newItemName.trim() && onCreateFolder) {
+      onCreateFolder(newItemName.trim());
+      setNewItemName("");
+      setIsCreatingFolder(false);
+    }
+  };
+
+  const getDefaultContent = (filename: string): string => {
+    const ext = filename.split('.').pop()?.toLowerCase();
+    switch (ext) {
+      case 'lua':
+      case 'luau':
+        return `-- ${filename}\n-- Created with AeThex Studio\n\nlocal module = {}\n\nfunction module.init()\n    print("Hello from ${filename}!")\nend\n\nreturn module\n`;
+      case 'ts':
+      case 'tsx':
+        return `// ${filename}\n// Created with AeThex Studio\n\nexport function init() {\n    console.log("Hello from ${filename}!");\n}\n`;
+      case 'js':
+      case 'jsx':
+        return `// ${filename}\n// Created with AeThex Studio\n\nfunction init() {\n    console.log("Hello from ${filename}!");\n}\n\nmodule.exports = { init };\n`;
+      case 'json':
+        return `{\n    "name": "${filename.replace('.json', '')}",\n    "version": "1.0.0"\n}\n`;
+      case 'md':
+        return `# ${filename.replace('.md', '')}\n\nCreated with AeThex Studio.\n`;
+      default:
+        return `// ${filename}\n`;
+    }
+  };
+
+  const cancelCreate = () => {
+    setIsCreatingFile(false);
+    setIsCreatingFolder(false);
+    setNewItemName("");
+  };
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Header */}
+      <div className="flex items-center justify-between px-3 py-2.5 border-b border-white/5">
+        <div className="flex items-center gap-2">
+          <div className="h-5 w-5 rounded bg-gradient-to-br from-amber-500/20 to-orange-500/20 flex items-center justify-center">
+            <Folder className="h-3 w-3 text-amber-400" />
+          </div>
+          <span className="text-xs font-medium text-foreground">
+            my-project
+          </span>
+        </div>
+        <div className="flex items-center gap-0.5">
+          <Button 
+            variant="ghost" 
+            size="icon" 
+            className="h-6 w-6 text-muted-foreground hover:text-foreground hover:bg-white/5"
+            onClick={() => {
+              setIsCreatingFile(true);
+              setIsCreatingFolder(false);
+              setNewItemName("");
+            }}
+            title="New File"
+          >
+            <FilePlus className="h-3.5 w-3.5" />
+          </Button>
+          <Button 
+            variant="ghost" 
+            size="icon" 
+            className="h-6 w-6 text-muted-foreground hover:text-foreground hover:bg-white/5"
+            onClick={() => {
+              setIsCreatingFolder(true);
+              setIsCreatingFile(false);
+              setNewItemName("");
+            }}
+            title="New Folder"
+          >
+            <FolderPlus className="h-3.5 w-3.5" />
+          </Button>
+          <Button variant="ghost" size="icon" className="h-6 w-6 text-muted-foreground hover:text-foreground hover:bg-white/5">
+            <MoreHorizontal className="h-3.5 w-3.5" />
+          </Button>
+        </div>
+      </div>
+
+      {/* New File/Folder Input */}
+      {(isCreatingFile || isCreatingFolder) && (
+        <div className="border-b border-white/5 p-2 bg-white/[0.02]">
+          <div className="flex items-center gap-1">
+            {isCreatingFile ? (
+              <File className="h-4 w-4 text-blue-400 shrink-0" />
+            ) : (
+              <Folder className="h-4 w-4 text-amber-400 shrink-0" />
+            )}
+            <Input
+              autoFocus
+              placeholder={isCreatingFile ? "filename.lua" : "folder-name"}
+              value={newItemName}
+              onChange={(e) => setNewItemName(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  isCreatingFile ? handleCreateFile() : handleCreateFolder();
+                } else if (e.key === 'Escape') {
+                  cancelCreate();
+                }
+              }}
+              className="h-6 text-xs flex-1 bg-white/5 border-white/10 focus:border-purple-500/50"
+            />
+            <Button 
+              variant="ghost" 
+              size="icon" 
+              className="h-6 w-6 text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/10"
+              onClick={isCreatingFile ? handleCreateFile : handleCreateFolder}
+            >
+              <Check className="h-3.5 w-3.5" />
+            </Button>
+            <Button 
+              variant="ghost" 
+              size="icon" 
+              className="h-6 w-6 text-red-400 hover:text-red-300 hover:bg-red-500/10"
+              onClick={cancelCreate}
+            >
+              <X className="h-3.5 w-3.5" />
+            </Button>
+          </div>
+          <p className="text-[10px] text-muted-foreground/70 mt-1 ml-5">
+            Enter to create · Escape to cancel
+          </p>
+        </div>
+      )}
+
+      {/* Search */}
+      <div className="px-2 py-1.5">
+        <div className="relative">
+          <Search className="absolute left-2.5 top-1/2 h-3 w-3 -translate-y-1/2 text-muted-foreground/50" />
+          <Input
+            placeholder="Search files..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="h-7 pl-7 text-xs bg-white/5 border-white/5 placeholder:text-muted-foreground/40 focus:border-purple-500/50 focus:bg-white/10"
+          />
+        </div>
+      </div>
+
+      {/* File Tree */}
+      <ScrollArea className="flex-1">
+        <div className="pb-4 px-1">
+          <TreeItem node={fileTree} depth={0} onOpenFile={onOpenFile} />
+        </div>
+      </ScrollArea>
+
+      {/* Footer */}
+      <div className="border-t border-white/5 px-3 py-2">
+        <div className="text-[10px] text-muted-foreground/60 flex items-center gap-1.5">
+          <div className="h-1.5 w-1.5 rounded-full bg-emerald-400" />
+          <span>Connected to workspace</span>
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default FileNavigator;
diff --git a/src/components/aethex/git-panel.tsx b/src/components/aethex/git-panel.tsx
new file mode 100644
index 0000000..fc265f0
--- /dev/null
+++ b/src/components/aethex/git-panel.tsx
@@ -0,0 +1,219 @@
+"use client";
+
+import { useState } from "react";
+import { toast } from "sonner";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  GitBranch,
+  GitCommit,
+  GitPullRequest,
+  GitMerge,
+  Plus,
+  Check,
+  X,
+  RefreshCw,
+  Upload,
+  Download,
+  FileCode,
+  FilePlus,
+  FileMinus,
+  FileEdit,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface GitPanelProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+const mockChanges = [
+  { file: "src/main.lua", status: "modified" as const },
+  { file: "src/utils/helpers.lua", status: "added" as const },
+  { file: "src/old-module.lua", status: "deleted" as const },
+];
+
+const mockBranches = [
+  { name: "main", current: true },
+  { name: "feature/new-ui", current: false },
+  { name: "fix/player-spawn", current: false },
+];
+
+const mockCommits = [
+  { hash: "a1b2c3d", message: "Add player spawn system", author: "You", time: "2 hours ago" },
+  { hash: "e4f5g6h", message: "Initial project setup", author: "You", time: "5 hours ago" },
+  { hash: "i7j8k9l", message: "Configure build system", author: "You", time: "1 day ago" },
+];
+
+export function GitPanel({ open, onClose }: GitPanelProps) {
+  const [commitMessage, setCommitMessage] = useState("");
+  const [selectedBranch, setSelectedBranch] = useState("main");
+  const [stagedFiles, setStagedFiles] = useState<string[]>([]);
+
+  const toggleStage = (file: string) => {
+    setStagedFiles(prev => 
+      prev.includes(file) ? prev.filter(f => f !== file) : [...prev, file]
+    );
+  };
+
+  const stageAll = () => {
+    setStagedFiles(mockChanges.map(c => c.file));
+  };
+
+  const handleCommit = () => {
+    if (commitMessage.trim() && stagedFiles.length > 0) {
+      toast.success(`Committed ${stagedFiles.length} file${stagedFiles.length > 1 ? 's' : ''}`, {
+        description: commitMessage,
+      });
+      setCommitMessage("");
+      setStagedFiles([]);
+    }
+  };
+
+  const getStatusIcon = (status: "modified" | "added" | "deleted") => {
+    switch (status) {
+      case "modified":
+        return <FileEdit className="h-4 w-4 text-yellow-400" />;
+      case "added":
+        return <FilePlus className="h-4 w-4 text-emerald-400" />;
+      case "deleted":
+        return <FileMinus className="h-4 w-4 text-red-400" />;
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="max-w-2xl h-[600px] p-0 gap-0 bg-[#12121a] border-white/10">
+        <DialogHeader className="px-6 py-4 border-b border-white/10">
+          <DialogTitle className="flex items-center gap-2 text-lg">
+            <GitBranch className="h-5 w-5" />
+            Source Control
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="flex flex-1 overflow-hidden">
+          {/* Main content */}
+          <div className="flex-1 flex flex-col">
+            {/* Branch selector */}
+            <div className="px-4 py-3 border-b border-white/10 flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <GitBranch className="h-4 w-4 text-muted-foreground" />
+                <select 
+                  value={selectedBranch}
+                  onChange={(e) => setSelectedBranch(e.target.value)}
+                  className="bg-transparent text-sm font-medium focus:outline-none cursor-pointer"
+                >
+                  {mockBranches.map(b => (
+                    <option key={b.name} value={b.name}>{b.name}</option>
+                  ))}
+                </select>
+              </div>
+              <div className="flex items-center gap-1">
+                <Button variant="ghost" size="icon" className="h-7 w-7" title="Create branch">
+                  <Plus className="h-4 w-4" />
+                </Button>
+                <Button variant="ghost" size="icon" className="h-7 w-7" title="Refresh">
+                  <RefreshCw className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+
+            {/* Changes */}
+            <div className="flex-1 overflow-hidden flex flex-col">
+              <div className="px-4 py-2 flex items-center justify-between">
+                <span className="text-xs font-medium text-muted-foreground uppercase">Changes ({mockChanges.length})</span>
+                <Button variant="ghost" size="sm" className="h-6 text-xs" onClick={stageAll}>
+                  Stage All
+                </Button>
+              </div>
+
+              <ScrollArea className="flex-1 px-4">
+                <div className="space-y-1">
+                  {mockChanges.map((change) => (
+                    <div
+                      key={change.file}
+                      className={cn(
+                        "flex items-center gap-2 px-2 py-1.5 rounded text-sm hover:bg-white/5 cursor-pointer transition-colors",
+                        stagedFiles.includes(change.file) && "bg-purple-500/10"
+                      )}
+                      onClick={() => toggleStage(change.file)}
+                    >
+                      <div className={cn(
+                        "h-4 w-4 rounded border flex items-center justify-center transition-colors",
+                        stagedFiles.includes(change.file) 
+                          ? "bg-purple-500 border-purple-500" 
+                          : "border-white/20"
+                      )}>
+                        {stagedFiles.includes(change.file) && <Check className="h-3 w-3 text-white" />}
+                      </div>
+                      {getStatusIcon(change.status)}
+                      <span className="flex-1 truncate">{change.file}</span>
+                    </div>
+                  ))}
+                </div>
+              </ScrollArea>
+
+              {/* Commit message */}
+              <div className="p-4 border-t border-white/10">
+                <Input
+                  placeholder="Commit message..."
+                  value={commitMessage}
+                  onChange={(e) => setCommitMessage(e.target.value)}
+                  className="mb-2 bg-white/5 border-white/10"
+                />
+                <div className="flex gap-2">
+                  <Button 
+                    className="flex-1 bg-purple-600 hover:bg-purple-500"
+                    disabled={!commitMessage.trim() || stagedFiles.length === 0}
+                    onClick={handleCommit}
+                  >
+                    <GitCommit className="h-4 w-4 mr-2" />
+                    Commit ({stagedFiles.length})
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Sidebar - Recent commits */}
+          <div className="w-64 border-l border-white/10 flex flex-col">
+            <div className="px-4 py-3 border-b border-white/10">
+              <span className="text-xs font-medium text-muted-foreground uppercase">Recent Commits</span>
+            </div>
+            <ScrollArea className="flex-1 p-2">
+              <div className="space-y-2">
+                {mockCommits.map((commit) => (
+                  <div
+                    key={commit.hash}
+                    className="p-2 rounded hover:bg-white/5 cursor-pointer transition-colors"
+                  >
+                    <div className="flex items-center gap-2 mb-1">
+                      <GitCommit className="h-3 w-3 text-muted-foreground" />
+                      <code className="text-xs text-purple-400">{commit.hash}</code>
+                    </div>
+                    <p className="text-sm truncate">{commit.message}</p>
+                    <p className="text-xs text-muted-foreground">{commit.time}</p>
+                  </div>
+                ))}
+              </div>
+            </ScrollArea>
+
+            {/* Push/Pull */}
+            <div className="p-2 border-t border-white/10 space-y-2">
+              <Button variant="outline" className="w-full h-8 text-xs gap-2">
+                <Download className="h-3 w-3" />
+                Pull
+              </Button>
+              <Button variant="outline" className="w-full h-8 text-xs gap-2">
+                <Upload className="h-3 w-3" />
+                Push
+              </Button>
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/components/aethex/main-view.tsx b/src/components/aethex/main-view.tsx
index bc2aff3..499bcca 100644
--- a/src/components/aethex/main-view.tsx
+++ b/src/components/aethex/main-view.tsx
@@ -1 +1,212 @@
-export function MainView() { return <main>Main View (stub)</main>; }
+"use client";
+
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  X,
+  Circle,
+  FileCode,
+  Sparkles,
+  Play,
+  Bug,
+  Braces,
+  ChevronRight,
+  Zap,
+  FileJson,
+  FileText,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface OpenFile {
+  id: string;
+  name: string;
+  language: string;
+  content: string;
+  isDirty?: boolean;
+}
+
+interface MainViewProps {
+  openFiles?: OpenFile[];
+  activeFileId?: string;
+  onFileSelect?: (fileId: string) => void;
+  onFileClose?: (fileId: string) => void;
+  onNewFile?: () => void;
+  onOpenTemplates?: () => void;
+}
+
+const getFileIcon = (filename: string, size = "h-3.5 w-3.5") => {
+  const ext = filename.split('.').pop()?.toLowerCase();
+  switch (ext) {
+    case 'lua':
+    case 'luau':
+      return <FileCode className={cn(size, "text-blue-400")} />;
+    case 'ts':
+    case 'tsx':
+      return <FileCode className={cn(size, "text-blue-500")} />;
+    case 'js':
+    case 'jsx':
+      return <FileCode className={cn(size, "text-yellow-400")} />;
+    case 'json':
+      return <FileJson className={cn(size, "text-yellow-500")} />;
+    default:
+      return <FileText className={cn(size, "text-muted-foreground")} />;
+  }
+};
+
+export function MainView({
+  openFiles = [],
+  activeFileId,
+  onFileSelect,
+  onFileClose,
+  onNewFile,
+  onOpenTemplates,
+}: MainViewProps) {
+  const activeFile = openFiles.find((f) => f.id === activeFileId);
+
+  if (openFiles.length === 0) {
+    return (
+      <div className="h-full w-full bg-[#0e0e12] flex items-center justify-center">
+        <div className="flex flex-col items-center gap-4 text-center max-w-sm">
+          <div className="h-12 w-12 rounded-xl bg-gradient-to-br from-purple-500/20 to-blue-500/20 flex items-center justify-center border border-white/10">
+            <Zap className="h-6 w-6 text-purple-400" />
+          </div>
+          <div>
+            <h2 className="text-lg font-semibold text-foreground mb-1">No files open</h2>
+            <p className="text-xs text-muted-foreground">Open a file from the sidebar or create a new one</p>
+          </div>
+          <div className="flex gap-2">
+            <Button 
+              size="sm" 
+              variant="outline" 
+              className="h-8 text-xs gap-2 bg-white/5 border-white/10 hover:bg-white/10"
+              onClick={onNewFile}
+            >
+              <FileCode className="h-3.5 w-3.5" />
+              New File
+            </Button>
+            <Button 
+              size="sm" 
+              variant="outline" 
+              className="h-8 text-xs gap-2 bg-white/5 border-white/10 hover:bg-white/10"
+              onClick={onOpenTemplates}
+            >
+              <Sparkles className="h-3.5 w-3.5" />
+              Template
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full flex-col bg-[#0d0d10]">
+      {/* Tab bar */}
+      <div className="flex items-center border-b border-white/5 bg-[#12121a]">
+        <div className="flex-1 overflow-x-auto scrollbar-hide">
+          <div className="flex">
+            {openFiles.map((file) => (
+              <div
+                key={file.id}
+                onClick={() => onFileSelect?.(file.id)}
+                role="tab"
+                tabIndex={0}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    onFileSelect?.(file.id);
+                  }
+                }}
+                className={cn(
+                  "group flex items-center gap-2 px-3 py-1.5 text-xs transition-all relative cursor-pointer",
+                  "hover:bg-white/5",
+                  activeFileId === file.id
+                    ? "bg-[#0d0d10] text-foreground"
+                    : "text-muted-foreground"
+                )}
+              >
+                {activeFileId === file.id && (
+                  <div className="absolute top-0 left-0 right-0 h-[2px] bg-gradient-to-r from-purple-500 to-blue-500" />
+                )}
+                {getFileIcon(file.name)}
+                <span className="truncate max-w-32">{file.name}</span>
+                {file.isDirty && (
+                  <Circle className="h-1.5 w-1.5 fill-current text-blue-400" />
+                )}
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onFileClose?.(file.id);
+                  }}
+                  className="ml-1 rounded p-0.5 opacity-0 hover:bg-white/10 group-hover:opacity-100 transition-opacity"
+                >
+                  <X className="h-3 w-3" />
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="flex items-center gap-0.5 px-2 border-l border-white/5">
+          <Button 
+            variant="ghost" 
+            size="icon" 
+            className="h-6 w-6 text-muted-foreground hover:text-foreground hover:bg-white/5"
+            onClick={() => toast.success("Running script...", { description: "Output will appear in the Console panel" })}
+            title="Run Script"
+          >
+            <Play className="h-3 w-3" />
+          </Button>
+          <Button 
+            variant="ghost" 
+            size="icon" 
+            className="h-6 w-6 text-muted-foreground hover:text-foreground hover:bg-white/5"
+            onClick={() => toast.info("Debug mode enabled", { description: "Click line numbers to set breakpoints" })}
+            title="Debug Mode"
+          >
+            <Bug className="h-3 w-3" />
+          </Button>
+          <Button 
+            variant="ghost" 
+            size="icon" 
+            className="h-6 w-6 text-muted-foreground hover:text-foreground hover:bg-white/5"
+            onClick={() => toast.success("Code formatted")}
+            title="Format Code"
+          >
+            <Braces className="h-3 w-3" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Breadcrumb */}
+      {activeFile && (
+        <div className="flex items-center gap-1 px-4 py-1.5 text-[11px] text-muted-foreground border-b border-white/5 bg-[#0d0d10]">
+          <span className="hover:text-foreground cursor-pointer">src</span>
+          <ChevronRight className="h-3 w-3" />
+          <span className="hover:text-foreground cursor-pointer">scripts</span>
+          <ChevronRight className="h-3 w-3" />
+          <span className="text-foreground">{activeFile.name}</span>
+        </div>
+      )}
+
+      {/* Editor area */}
+      {activeFile && (
+        <ScrollArea className="flex-1">
+          <div className="relative min-h-full">
+            {/* Line numbers gutter */}
+            <div className="absolute left-0 top-0 w-14 border-r border-white/5 bg-[#0a0a0c] text-right pr-4 pt-3 text-[11px] text-muted-foreground/30 select-none font-mono">
+              {activeFile.content.split("\n").map((_, i) => (
+                <div key={i} className="leading-6 hover:text-muted-foreground transition-colors">
+                  {i + 1}
+                </div>
+              ))}
+            </div>
+            {/* Code content */}
+            <pre className="pl-20 pt-3 pr-4 pb-8 text-[13px] font-mono leading-6 text-foreground/90">
+              <code>{activeFile.content}</code>
+            </pre>
+          </div>
+        </ScrollArea>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/aethex/navbar.tsx b/src/components/aethex/navbar.tsx
index a63eb7e..25da5df 100644
--- a/src/components/aethex/navbar.tsx
+++ b/src/components/aethex/navbar.tsx
@@ -1 +1,243 @@
-export function Navbar() { return <nav>Navbar (stub)</nav>; }
+"use client";
+
+import { useState } from "react";
+import { toast } from "sonner";
+import {
+  Menu,
+  Play,
+  Save,
+  Undo,
+  Redo,
+  Settings,
+  Search,
+  Terminal,
+  PanelLeft,
+  Download,
+  Upload,
+  GitBranch,
+  Users,
+  Zap,
+  Plus,
+  FolderOpen,
+} from "lucide-react";
+import { AethexLogo } from "./icons";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils";
+
+const platformColors = {
+  roblox: "bg-red-500",
+  uefn: "bg-purple-500", 
+  spatial: "bg-emerald-500",
+  web: "bg-blue-500",
+};
+
+interface NavbarProps {
+  onToggleSidebar?: () => void;
+  onToggleAI?: () => void;
+  onToggleBottomPanel?: () => void;
+  onNewFile?: () => void;
+  onSearch?: () => void;
+  onRun?: () => void;
+  onSave?: () => void;
+  onSettings?: () => void;
+  onGit?: () => void;
+  onExport?: () => void;
+  sidebarOpen?: boolean;
+  aiOpen?: boolean;
+  bottomPanelOpen?: boolean;
+}
+
+export function Navbar({ 
+  onToggleSidebar, 
+  onToggleAI, 
+  onToggleBottomPanel,
+  onNewFile,
+  onSearch,
+  onRun,
+  onSave,
+  onSettings,
+  onGit,
+  onExport,
+  sidebarOpen = true, 
+  aiOpen = true,
+  bottomPanelOpen = true,
+}: NavbarProps) {
+  const [platform, setPlatform] = useState<keyof typeof platformColors>("roblox");
+
+  const handleCopy = () => {
+    const selection = window.getSelection()?.toString();
+    if (selection) {
+      navigator.clipboard.writeText(selection);
+    }
+  };
+
+  const handlePaste = async () => {
+    const text = await navigator.clipboard.readText();
+    // Note: Paste would need to be implemented in the editor component
+    console.log("Paste:", text);
+  };
+
+  return (
+    <nav className="flex h-11 items-center justify-between border-b border-white/5 bg-[#0d0d10] px-2">
+      {/* Left section */}
+      <div className="flex items-center gap-1">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-7 w-7 text-muted-foreground hover:text-foreground hover:bg-white/5"
+          onClick={onToggleSidebar}
+        >
+          <PanelLeft className={cn("h-4 w-4 transition-transform", !sidebarOpen && "rotate-180")} />
+        </Button>
+        
+        <div className="flex items-center gap-2 px-2">
+          <div className="h-6 w-6 rounded-lg bg-gradient-to-br from-purple-500 via-blue-500 to-cyan-400 flex items-center justify-center shadow-lg shadow-purple-500/20">
+            <AethexLogo className="h-4 w-4 text-white" />
+          </div>
+          <span className="font-semibold text-sm bg-gradient-to-r from-white to-white/70 bg-clip-text text-transparent">AeThex</span>
+        </div>
+
+        <div className="h-4 w-px bg-white/10 mx-1" />
+
+        {/* File Menu */}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="sm" className="h-6 px-2 text-xs text-muted-foreground hover:text-foreground hover:bg-white/5">
+              File
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="w-48">
+            <DropdownMenuItem onClick={onNewFile}>
+              <Plus className="mr-2 h-4 w-4" />
+              New File
+              <span className="ml-auto text-xs text-muted-foreground">⌘N</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => toast.info("Use the sidebar to navigate project files")}>
+              <FolderOpen className="mr-2 h-4 w-4" />
+              Open...
+              <span className="ml-auto text-xs text-muted-foreground">⌘O</span>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={onSave}>
+              <Save className="mr-2 h-4 w-4" />
+              Save
+              <span className="ml-auto text-xs text-muted-foreground">⌘S</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={onSave}>Save As...</DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={onExport}>
+              <Download className="mr-2 h-4 w-4" />
+              Export Project...
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="sm" className="h-6 px-2 text-xs text-muted-foreground hover:text-foreground hover:bg-white/5">
+              Edit
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="w-48">
+            <DropdownMenuItem onClick={() => document.execCommand('undo')}>
+              <Undo className="mr-2 h-4 w-4" />
+              Undo
+              <span className="ml-auto text-xs text-muted-foreground">⌘Z</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => document.execCommand('redo')}>
+              <Redo className="mr-2 h-4 w-4" />
+              Redo
+              <span className="ml-auto text-xs text-muted-foreground">⇧⌘Z</span>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={() => document.execCommand('cut')}>Cut</DropdownMenuItem>
+            <DropdownMenuItem onClick={handleCopy}>Copy</DropdownMenuItem>
+            <DropdownMenuItem onClick={handlePaste}>Paste</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="sm" className="h-6 px-2 text-xs text-muted-foreground hover:text-foreground hover:bg-white/5">
+              View
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="w-48">
+            <DropdownMenuItem onClick={onSearch}>Command Palette</DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={onToggleSidebar}>Explorer</DropdownMenuItem>
+            <DropdownMenuItem onClick={onSearch}>Search</DropdownMenuItem>
+            <DropdownMenuItem onClick={onToggleBottomPanel}>Terminal</DropdownMenuItem>
+            <DropdownMenuItem onClick={onToggleAI}>AI Assistant</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      {/* Center section - Platform selector */}
+      <div className="flex items-center gap-0.5 rounded-full bg-white/5 p-0.5 border border-white/5">
+        {(Object.keys(platformColors) as Array<keyof typeof platformColors>).map((p) => (
+          <button
+            key={p}
+            className={cn(
+              "flex items-center gap-1.5 h-6 px-3 text-[11px] font-medium capitalize rounded-full transition-all",
+              platform === p 
+                ? "bg-white/10 text-white shadow-sm" 
+                : "text-muted-foreground hover:text-foreground"
+            )}
+            onClick={() => setPlatform(p)}
+          >
+            <div className={cn(
+              "h-1.5 w-1.5 rounded-full transition-all",
+              platformColors[p],
+              platform === p && "shadow-lg"
+            )} />
+            {p}
+          </button>
+        ))}
+      </div>
+
+      {/* Right section */}
+      <div className="flex items-center gap-0.5">
+        <Button variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground hover:text-foreground hover:bg-white/5" onClick={onSearch}>
+          <Search className="h-3.5 w-3.5" />
+        </Button>
+        <Button variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground hover:text-foreground hover:bg-white/5" onClick={onGit}>
+          <GitBranch className="h-3.5 w-3.5" />
+        </Button>
+        <Button variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground hover:text-foreground hover:bg-white/5" onClick={() => toast.info("1 user online", { description: "Invite others to collaborate in real-time" })}>
+          <Users className="h-3.5 w-3.5" />
+        </Button>
+        
+        <div className="h-4 w-px bg-white/10 mx-1" />
+        
+        <Button size="sm" className="h-7 gap-1.5 px-3 text-xs bg-gradient-to-r from-emerald-600 to-emerald-500 hover:from-emerald-500 hover:to-emerald-400 shadow-lg shadow-emerald-500/20 border-0" onClick={onRun}>
+          <Play className="h-3 w-3" />
+          Run
+        </Button>
+        
+        <Button
+          variant="ghost"
+          size="icon"
+          className={cn("h-7 w-7 hover:bg-white/5", aiOpen ? "text-purple-400" : "text-muted-foreground")}
+          onClick={onToggleAI}
+        >
+          <Zap className="h-3.5 w-3.5" />
+        </Button>
+        
+        <Button variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground hover:text-foreground hover:bg-white/5" onClick={onSettings}>
+          <Settings className="h-3.5 w-3.5" />
+        </Button>
+      </div>
+    </nav>
+  );
+}
diff --git a/src/components/aethex/new-project-modal.tsx b/src/components/aethex/new-project-modal.tsx
index 474c44a..e0f9e2d 100644
--- a/src/components/aethex/new-project-modal.tsx
+++ b/src/components/aethex/new-project-modal.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { X } from 'lucide-react';
 
 interface NewProjectModalProps {
   onCreate: (name: string) => void;
@@ -8,17 +9,66 @@ interface NewProjectModalProps {
 export const NewProjectModal: React.FC<NewProjectModalProps> = ({ onCreate, onClose }) => {
   const [name, setName] = React.useState('');
 
+  const handleCreate = () => {
+    if (name.trim()) {
+      onCreate(name.trim());
+      setName('');
+      onClose();
+    }
+  };
+
   return (
-    <div className="new-project-modal">
-      <h2>New Project</h2>
-      <input
-        type="text"
-        value={name}
-        onChange={e => setName(e.target.value)}
-        placeholder="Project Name"
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Backdrop */}
+      <div 
+        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+        onClick={onClose}
       />
-      <button onClick={() => onCreate(name)} disabled={!name}>Create</button>
-      <button onClick={onClose}>Cancel</button>
+      
+      {/* Modal */}
+      <div className="relative bg-[#1a1a1a] border border-[#333] rounded-xl shadow-2xl w-full max-w-md mx-4 p-6">
+        <button
+          onClick={onClose}
+          className="absolute top-4 right-4 text-[#666] hover:text-white transition-colors"
+        >
+          <X className="h-5 w-5" />
+        </button>
+        
+        <h2 className="text-xl font-semibold text-white mb-4">New Project</h2>
+        
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-[#888] mb-2">
+              Project Name
+            </label>
+            <input
+              type="text"
+              value={name}
+              onChange={e => setName(e.target.value)}
+              onKeyDown={e => e.key === 'Enter' && handleCreate()}
+              placeholder="my-awesome-game"
+              autoFocus
+              className="w-full bg-[#0a0a0a] border border-[#333] rounded-lg px-4 py-3 text-white placeholder-[#666] focus:outline-none focus:border-purple-500 transition-colors"
+            />
+          </div>
+          
+          <div className="flex gap-3 pt-2">
+            <button 
+              onClick={onClose}
+              className="flex-1 px-4 py-2.5 rounded-lg border border-[#333] text-[#888] hover:text-white hover:border-[#444] transition-colors"
+            >
+              Cancel
+            </button>
+            <button 
+              onClick={handleCreate} 
+              disabled={!name.trim()}
+              className="flex-1 px-4 py-2.5 rounded-lg bg-purple-600 hover:bg-purple-500 text-white font-medium disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              Create
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/src/components/aethex/settings-panel.tsx b/src/components/aethex/settings-panel.tsx
new file mode 100644
index 0000000..f389323
--- /dev/null
+++ b/src/components/aethex/settings-panel.tsx
@@ -0,0 +1,320 @@
+"use client";
+
+import { useState } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Slider } from "@/components/ui/slider";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Settings,
+  Palette,
+  Code,
+  Keyboard,
+  Zap,
+  Cloud,
+  User,
+  Monitor,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface SettingsPanelProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export function SettingsPanel({ open, onClose }: SettingsPanelProps) {
+  const [settings, setSettings] = useState({
+    theme: "dark",
+    fontSize: 14,
+    tabSize: 2,
+    wordWrap: true,
+    autoSave: true,
+    autoSaveDelay: 1000,
+    minimap: true,
+    lineNumbers: true,
+    bracketMatching: true,
+    aiModel: "claude-3.5",
+    aiAutoComplete: true,
+    syncEnabled: true,
+  });
+
+  const updateSetting = (key: string, value: any) => {
+    setSettings(prev => ({ ...prev, [key]: value }));
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="max-w-3xl h-[600px] p-0 gap-0 bg-[#12121a] border-white/10">
+        <DialogHeader className="px-6 py-4 border-b border-white/10">
+          <DialogTitle className="flex items-center gap-2 text-lg">
+            <Settings className="h-5 w-5" />
+            Settings
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="flex flex-1 overflow-hidden">
+          {/* Sidebar */}
+          <div className="w-48 border-r border-white/10 p-2">
+            <Tabs defaultValue="editor" orientation="vertical" className="h-full">
+              <TabsList className="flex flex-col h-auto bg-transparent gap-1">
+                <TabsTrigger value="editor" className="w-full justify-start gap-2 data-[state=active]:bg-white/10">
+                  <Code className="h-4 w-4" />
+                  Editor
+                </TabsTrigger>
+                <TabsTrigger value="appearance" className="w-full justify-start gap-2 data-[state=active]:bg-white/10">
+                  <Palette className="h-4 w-4" />
+                  Appearance
+                </TabsTrigger>
+                <TabsTrigger value="ai" className="w-full justify-start gap-2 data-[state=active]:bg-white/10">
+                  <Zap className="h-4 w-4" />
+                  AI Settings
+                </TabsTrigger>
+                <TabsTrigger value="sync" className="w-full justify-start gap-2 data-[state=active]:bg-white/10">
+                  <Cloud className="h-4 w-4" />
+                  Sync & Cloud
+                </TabsTrigger>
+                <TabsTrigger value="keybindings" className="w-full justify-start gap-2 data-[state=active]:bg-white/10">
+                  <Keyboard className="h-4 w-4" />
+                  Keybindings
+                </TabsTrigger>
+              </TabsList>
+            </Tabs>
+          </div>
+
+          {/* Content */}
+          <ScrollArea className="flex-1 p-6">
+            <Tabs defaultValue="editor">
+              <TabsContent value="editor" className="mt-0 space-y-6">
+                <div>
+                  <h3 className="text-sm font-medium mb-4">Editor Settings</h3>
+                  
+                  <div className="space-y-4">
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <Label>Font Size</Label>
+                        <p className="text-xs text-muted-foreground">Size of text in the editor</p>
+                      </div>
+                      <div className="flex items-center gap-3">
+                        <Slider
+                          value={[settings.fontSize]}
+                          onValueChange={([v]) => updateSetting("fontSize", v)}
+                          min={10}
+                          max={24}
+                          step={1}
+                          className="w-32"
+                        />
+                        <span className="text-sm w-8">{settings.fontSize}px</span>
+                      </div>
+                    </div>
+
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <Label>Tab Size</Label>
+                        <p className="text-xs text-muted-foreground">Number of spaces per tab</p>
+                      </div>
+                      <Select value={String(settings.tabSize)} onValueChange={(v) => updateSetting("tabSize", Number(v))}>
+                        <SelectTrigger className="w-20">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="2">2</SelectItem>
+                          <SelectItem value="4">4</SelectItem>
+                          <SelectItem value="8">8</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <Label>Word Wrap</Label>
+                        <p className="text-xs text-muted-foreground">Wrap long lines</p>
+                      </div>
+                      <Switch
+                        checked={settings.wordWrap}
+                        onCheckedChange={(v) => updateSetting("wordWrap", v)}
+                      />
+                    </div>
+
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <Label>Auto Save</Label>
+                        <p className="text-xs text-muted-foreground">Automatically save files</p>
+                      </div>
+                      <Switch
+                        checked={settings.autoSave}
+                        onCheckedChange={(v) => updateSetting("autoSave", v)}
+                      />
+                    </div>
+
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <Label>Minimap</Label>
+                        <p className="text-xs text-muted-foreground">Show code overview minimap</p>
+                      </div>
+                      <Switch
+                        checked={settings.minimap}
+                        onCheckedChange={(v) => updateSetting("minimap", v)}
+                      />
+                    </div>
+
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <Label>Line Numbers</Label>
+                        <p className="text-xs text-muted-foreground">Show line numbers in gutter</p>
+                      </div>
+                      <Switch
+                        checked={settings.lineNumbers}
+                        onCheckedChange={(v) => updateSetting("lineNumbers", v)}
+                      />
+                    </div>
+
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <Label>Bracket Matching</Label>
+                        <p className="text-xs text-muted-foreground">Highlight matching brackets</p>
+                      </div>
+                      <Switch
+                        checked={settings.bracketMatching}
+                        onCheckedChange={(v) => updateSetting("bracketMatching", v)}
+                      />
+                    </div>
+                  </div>
+                </div>
+              </TabsContent>
+
+              <TabsContent value="appearance" className="mt-0 space-y-6">
+                <div>
+                  <h3 className="text-sm font-medium mb-4">Appearance</h3>
+                  
+                  <div className="space-y-4">
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <Label>Theme</Label>
+                        <p className="text-xs text-muted-foreground">Color scheme for the IDE</p>
+                      </div>
+                      <Select value={settings.theme} onValueChange={(v) => updateSetting("theme", v)}>
+                        <SelectTrigger className="w-32">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="dark">Dark</SelectItem>
+                          <SelectItem value="light">Light</SelectItem>
+                          <SelectItem value="midnight">Midnight</SelectItem>
+                          <SelectItem value="purple">Purple Haze</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </div>
+              </TabsContent>
+
+              <TabsContent value="ai" className="mt-0 space-y-6">
+                <div>
+                  <h3 className="text-sm font-medium mb-4">AI Settings</h3>
+                  
+                  <div className="space-y-4">
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <Label>AI Model</Label>
+                        <p className="text-xs text-muted-foreground">Model for code assistance</p>
+                      </div>
+                      <Select value={settings.aiModel} onValueChange={(v) => updateSetting("aiModel", v)}>
+                        <SelectTrigger className="w-32">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="claude-3.5">Claude 3.5</SelectItem>
+                          <SelectItem value="gpt-4">GPT-4</SelectItem>
+                          <SelectItem value="gemini">Gemini Pro</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <Label>AI Auto-Complete</Label>
+                        <p className="text-xs text-muted-foreground">Enable AI code suggestions</p>
+                      </div>
+                      <Switch
+                        checked={settings.aiAutoComplete}
+                        onCheckedChange={(v) => updateSetting("aiAutoComplete", v)}
+                      />
+                    </div>
+                  </div>
+                </div>
+              </TabsContent>
+
+              <TabsContent value="sync" className="mt-0 space-y-6">
+                <div>
+                  <h3 className="text-sm font-medium mb-4">Sync & Cloud</h3>
+                  
+                  <div className="space-y-4">
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <Label>Cloud Sync</Label>
+                        <p className="text-xs text-muted-foreground">Sync projects to cloud</p>
+                      </div>
+                      <Switch
+                        checked={settings.syncEnabled}
+                        onCheckedChange={(v) => updateSetting("syncEnabled", v)}
+                      />
+                    </div>
+
+                    <div className="p-4 rounded-lg bg-white/5 border border-white/10">
+                      <div className="flex items-center gap-3 mb-2">
+                        <Cloud className="h-5 w-5 text-emerald-400" />
+                        <span className="font-medium">Connected</span>
+                      </div>
+                      <p className="text-xs text-muted-foreground">Last synced: Just now</p>
+                    </div>
+                  </div>
+                </div>
+              </TabsContent>
+
+              <TabsContent value="keybindings" className="mt-0 space-y-6">
+                <div>
+                  <h3 className="text-sm font-medium mb-4">Keyboard Shortcuts</h3>
+                  
+                  <div className="space-y-2">
+                    {[
+                      { action: "Save File", keys: "⌘S" },
+                      { action: "New File", keys: "⌘N" },
+                      { action: "Open File", keys: "⌘O" },
+                      { action: "Command Palette", keys: "⌘K" },
+                      { action: "Toggle Sidebar", keys: "⌘B" },
+                      { action: "Toggle Terminal", keys: "⌘`" },
+                      { action: "Find", keys: "⌘F" },
+                      { action: "Find & Replace", keys: "⌘H" },
+                      { action: "Run Project", keys: "⌘⏎" },
+                    ].map((shortcut) => (
+                      <div key={shortcut.action} className="flex items-center justify-between py-2 px-3 rounded hover:bg-white/5">
+                        <span className="text-sm">{shortcut.action}</span>
+                        <kbd className="px-2 py-1 rounded bg-white/10 text-xs font-mono">{shortcut.keys}</kbd>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </TabsContent>
+            </Tabs>
+          </ScrollArea>
+        </div>
+
+        <div className="flex items-center justify-end gap-2 px-6 py-4 border-t border-white/10">
+          <Button variant="ghost" onClick={onClose}>Cancel</Button>
+          <Button onClick={onClose} className="bg-purple-600 hover:bg-purple-500">Save Changes</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/components/aethex/status-bar.tsx b/src/components/aethex/status-bar.tsx
new file mode 100644
index 0000000..962d958
--- /dev/null
+++ b/src/components/aethex/status-bar.tsx
@@ -0,0 +1,182 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { toast } from "sonner";
+import {
+  GitBranch,
+  AlertCircle,
+  AlertTriangle,
+  CheckCircle2,
+  Wifi,
+  WifiOff,
+  Cloud,
+  CloudOff,
+  Cpu,
+  Bell,
+  Zap,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface StatusBarProps {
+  platform?: "roblox" | "uefn" | "spatial" | "web";
+  fileName?: string;
+  cursorPosition?: { line: number; column: number };
+  language?: string;
+}
+
+const platformConfig = {
+  roblox: { color: "bg-red-500", label: "Roblox Studio" },
+  uefn: { color: "bg-purple-500", label: "UEFN" },
+  spatial: { color: "bg-emerald-500", label: "Spatial" },
+  web: { color: "bg-blue-500", label: "Web" },
+};
+
+export function StatusBar({
+  platform = "roblox",
+  fileName,
+  cursorPosition = { line: 1, column: 1 },
+  language = "Lua",
+}: StatusBarProps) {
+  const [isConnected, setIsConnected] = useState(true);
+  const [errors, setErrors] = useState(0);
+  const [warnings, setWarnings] = useState(2);
+  const [syncStatus, setSyncStatus] = useState<"synced" | "syncing" | "offline">("synced");
+
+  // Simulated connection status
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setIsConnected(Math.random() > 0.1);
+    }, 5000);
+    return () => clearInterval(interval);
+  }, []);
+
+  const config = platformConfig[platform];
+
+  return (
+    <footer className="flex h-6 items-center justify-between border-t border-border/40 bg-[#1a1a1f] text-[11px] text-muted-foreground select-none">
+      {/* Left side */}
+      <div className="flex items-center h-full">
+        {/* Platform indicator */}
+        <button 
+          className={cn(
+            "flex items-center gap-1.5 px-2.5 h-full transition-colors hover:bg-white/5",
+            config.color.replace("bg-", "text-").replace("-500", "-400")
+          )}
+          onClick={() => toast.info(`${config.label} connected`)}
+        >
+          <div className={cn("h-2 w-2 rounded-full", config.color)} />
+          <span className="font-medium">{config.label}</span>
+        </button>
+
+        {/* Branch */}
+        <button 
+          className="flex items-center gap-1.5 px-2.5 h-full hover:bg-white/5 transition-colors"
+          onClick={() => toast.info("main", { description: "No uncommitted changes" })}
+        >
+          <GitBranch className="h-3.5 w-3.5" />
+          <span>main</span>
+        </button>
+
+        {/* Sync status */}
+        <button 
+          className="flex items-center gap-1.5 px-2.5 h-full hover:bg-white/5 transition-colors"
+          onClick={() => setSyncStatus(syncStatus === "synced" ? "syncing" : syncStatus === "syncing" ? "offline" : "synced")}
+        >
+          {syncStatus === "synced" ? (
+            <>
+              <Cloud className="h-3.5 w-3.5 text-emerald-400" />
+              <span className="text-emerald-400">Synced</span>
+            </>
+          ) : syncStatus === "syncing" ? (
+            <>
+              <Cloud className="h-3.5 w-3.5 text-blue-400 animate-pulse" />
+              <span className="text-blue-400">Syncing...</span>
+            </>
+          ) : (
+            <>
+              <CloudOff className="h-3.5 w-3.5 text-yellow-400" />
+              <span className="text-yellow-400">Offline</span>
+            </>
+          )}
+        </button>
+
+        {/* Errors & Warnings */}
+        <button 
+          className="flex items-center gap-3 px-2.5 h-full hover:bg-white/5 transition-colors"
+          onClick={() => toast.info(`${errors} errors, ${warnings} warnings`)}
+        >
+          <span className="flex items-center gap-1">
+            <AlertCircle className={cn("h-3.5 w-3.5", errors > 0 ? "text-red-400" : "text-muted-foreground")} />
+            <span className={errors > 0 ? "text-red-400" : ""}>{errors}</span>
+          </span>
+          <span className="flex items-center gap-1">
+            <AlertTriangle className={cn("h-3.5 w-3.5", warnings > 0 ? "text-yellow-400" : "text-muted-foreground")} />
+            <span className={warnings > 0 ? "text-yellow-400" : ""}>{warnings}</span>
+          </span>
+        </button>
+      </div>
+
+      {/* Right side */}
+      <div className="flex items-center h-full">
+        {/* Cursor position */}
+        <button 
+          className="px-2.5 h-full hover:bg-white/5 transition-colors"
+          onClick={() => toast.info(`Line ${cursorPosition.line}, Column ${cursorPosition.column}`)}
+        >
+          Ln {cursorPosition.line}, Col {cursorPosition.column}
+        </button>
+
+        {/* Language */}
+        <button 
+          className="px-2.5 h-full hover:bg-white/5 transition-colors"
+          onClick={() => toast.info(`Language: ${language}`)}
+        >
+          {language}
+        </button>
+
+        {/* Encoding */}
+        <button 
+          className="px-2.5 h-full hover:bg-white/5 transition-colors"
+          onClick={() => toast.info("Encoding: UTF-8")}
+        >
+          UTF-8
+        </button>
+
+        {/* Line endings */}
+        <button 
+          className="px-2.5 h-full hover:bg-white/5 transition-colors"
+          onClick={() => toast.info("Line Endings: LF (Unix)")}
+        >
+          LF
+        </button>
+
+        {/* Connection status */}
+        <button 
+          className="flex items-center gap-1.5 px-2.5 h-full hover:bg-white/5 transition-colors"
+          onClick={() => setIsConnected(!isConnected)}
+          title={isConnected ? "Connected" : "Disconnected"}
+        >
+          {isConnected ? (
+            <Wifi className="h-3.5 w-3.5 text-emerald-400" />
+          ) : (
+            <WifiOff className="h-3.5 w-3.5 text-red-400" />
+          )}
+        </button>
+
+        {/* AI Status */}
+        <button 
+          className="flex items-center gap-1.5 px-2.5 h-full hover:bg-white/5 transition-colors text-purple-400"
+          onClick={() => toast.info("AI Ready", { description: "Model: Claude 3.5" })}
+        >
+          <Zap className="h-3.5 w-3.5" />
+          <span>AI Ready</span>
+        </button>
+
+        {/* Notifications */}
+        <button className="flex items-center gap-1.5 px-2.5 h-full hover:bg-white/5 transition-colors">
+          <Bell className="h-3.5 w-3.5" />
+        </button>
+      </div>
+    </footer>
+  );
+}
diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
index 1fa55cd..f265771 100644
--- a/src/components/ui/accordion.tsx
+++ b/src/components/ui/accordion.tsx
@@ -1,6 +1,6 @@
 import { ComponentProps } from "react"
 import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import ChevronDownIcon from "lucide-react/dist/esm/icons/chevron-down"
+import { ChevronDown as ChevronDownIcon } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
diff --git a/src/components/ui/breadcrumb.tsx b/src/components/ui/breadcrumb.tsx
index fb8b2ec..8d0f2a4 100644
--- a/src/components/ui/breadcrumb.tsx
+++ b/src/components/ui/breadcrumb.tsx
@@ -1,7 +1,6 @@
 import { ComponentProps } from "react"
 import { Slot } from "@radix-ui/react-slot"
-import ChevronRight from "lucide-react/dist/esm/icons/chevron-right"
-import MoreHorizontal from "lucide-react/dist/esm/icons/more-horizontal"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx
index 426ef4c..fca4b04 100644
--- a/src/components/ui/calendar.tsx
+++ b/src/components/ui/calendar.tsx
@@ -1,6 +1,5 @@
 import { ComponentProps } from "react"
-import ChevronLeft from "lucide-react/dist/esm/icons/chevron-left"
-import ChevronRight from "lucide-react/dist/esm/icons/chevron-right"
+import { ChevronLeft, ChevronRight } from "lucide-react"
 import { DayPicker } from "react-day-picker"
 
 import { cn } from "@/lib/utils"
@@ -60,10 +59,14 @@ function Calendar({
       }}
       components={{
         PreviousMonthButton: ({ className, ...props }) => (
-          <ChevronLeft className={cn("size-4", className)} {...props} />
+          <button type="button" className={cn("size-7 bg-transparent p-0 opacity-50 hover:opacity-100", className)} {...props}>
+            <ChevronLeft className="size-4" />
+          </button>
         ),
         NextMonthButton: ({ className, ...props }) => (
-          <ChevronRight className={cn("size-4", className)} {...props} />
+          <button type="button" className={cn("size-7 bg-transparent p-0 opacity-50 hover:opacity-100", className)} {...props}>
+            <ChevronRight className="size-4" />
+          </button>
         ),
       }}
       {...props}
diff --git a/src/components/ui/carousel.tsx b/src/components/ui/carousel.tsx
index 0e76744..497c56d 100644
--- a/src/components/ui/carousel.tsx
+++ b/src/components/ui/carousel.tsx
@@ -4,8 +4,7 @@ import { ComponentProps, createContext, useCallback, useContext, useEffect, useS
 import useEmblaCarousel, {
   type UseEmblaCarouselType,
 } from "embla-carousel-react"
-import ArrowLeft from "lucide-react/dist/esm/icons/arrow-left"
-import ArrowRight from "lucide-react/dist/esm/icons/arrow-right"
+import { ArrowLeft, ArrowRight } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
index 07eefef..cb8a852 100644
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -2,7 +2,7 @@
 
 import { ComponentProps } from "react"
 import { Command as CommandPrimitive } from "cmdk"
-import SearchIcon from "lucide-react/dist/esm/icons/search"
+import { Search as SearchIcon } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import {
diff --git a/src/components/ui/context-menu.tsx b/src/components/ui/context-menu.tsx
index b4542b0..6b2ef09 100644
--- a/src/components/ui/context-menu.tsx
+++ b/src/components/ui/context-menu.tsx
@@ -1,253 +1,185 @@
 "use client"
 
-import { ComponentProps } from "react"
-import {
-  Root as ContextMenuRoot,
-  Trigger as ContextMenuTrigger,
-  Content as ContextMenuContent,
-  Item as ContextMenuItem,
-  Separator as ContextMenuSeparator,
-  CheckboxItem as ContextMenuCheckboxItem,
-  RadioGroup as ContextMenuRadioGroup,
-  RadioItem as ContextMenuRadioItem,
-  Sub as ContextMenuSub,
-  SubTrigger as ContextMenuSubTrigger,
-  SubContent as ContextMenuSubContent,
-  Label as ContextMenuLabel,
-  Group as ContextMenuGroup,
-} from "@radix-ui/react-context-menu"
-import CheckIcon from "lucide-react/dist/esm/icons/check";
-import ChevronRightIcon from "lucide-react/dist/esm/icons/chevron-right"
-import CircleIcon from "lucide-react/dist/esm/icons/circle"
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
-function ContextMenu({
-  ...props
-}: ComponentProps<typeof ContextMenuRoot>) {
-  return <ContextMenuRoot data-slot="context-menu" {...props} />
-}
+const ContextMenu = ContextMenuPrimitive.Root
 
-function ContextMenuTrigger({
-  ...props
-}: ComponentProps<typeof ContextMenuTrigger>) {
-  return (
-    <ContextMenuTrigger data-slot="context-menu-trigger" {...props} />
-  )
-}
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
 
-function ContextMenuGroup({
-  ...props
-}: ComponentProps<typeof ContextMenuGroup>) {
-  return (
-    <ContextMenuGroup data-slot="context-menu-group" {...props} />
-  )
-}
+const ContextMenuGroup = ContextMenuPrimitive.Group
 
-function ContextMenuPortal({
-  ...props
-}: ComponentProps<typeof ContextMenuPortal>) {
-  return (
-    <ContextMenuPortal data-slot="context-menu-portal" {...props} />
-  )
-}
+const ContextMenuPortal = ContextMenuPrimitive.Portal
 
-function ContextMenuSub({
-  ...props
-}: ComponentProps<typeof ContextMenuSub>) {
-  return <ContextMenuSub data-slot="context-menu-sub" {...props} />
-}
+const ContextMenuSub = ContextMenuPrimitive.Sub
 
-function ContextMenuRadioGroup({
-  ...props
-}: ComponentProps<typeof ContextMenuRadioGroup>) {
-  return (
-    <ContextMenuRadioGroup
-      data-slot="context-menu-radio-group"
-      {...props}
-    />
-  )
-}
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
 
-function ContextMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: ComponentProps<typeof ContextMenuSubTrigger> & {
-  inset?: boolean
-}) {
-  return (
-    <ContextMenuSubTrigger
-      data-slot="context-menu-sub-trigger"
-      data-inset={inset}
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto" />
-    </ContextMenuSubTrigger>
-  )
-}
-
-function ContextMenuSubContent({
-  className,
-  ...props
-}: ComponentProps<typeof ContextMenuSubContent>) {
-  return (
-    <SubContent
-      data-slot="context-menu-sub-content"
-      className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className
-      )
-      {...props}
     />
-  )
-}
+  </ContextMenuPrimitive.Portal>
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
 
-function ContextMenuContent({
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+
+const ContextMenuShortcut = ({
   className,
   ...props
-}: ComponentProps<typeof ContextMenuContent>) {
-  return (
-    <ContextMenuPortal>
-      <Content
-        data-slot="context-menu-content"
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-          className
-        )
-        {...props}
-      />
-    </ContextMenuPortal>
-  )
-}
-
-function ContextMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}: ComponentProps<typeof Item> & {
-  inset?: boolean
-  variant?: "default" | "destructive"
-}) {
-  return (
-    <Item
-      data-slot="context-menu-item"
-      data-inset={inset}
-      data-variant={variant}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )
-      {...props}
-    />
-  )
-}
-
-function ContextMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}: ComponentProps<typeof CheckboxItem>) {
-  return (
-    <CheckboxItem
-      data-slot="context-menu-checkbox-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )
-      checked={checked}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <span>
-          <CheckIcon className="size-4" />
-        </span>
-      </span>
-      {children}
-    </CheckboxItem>
-  )
-}
-
-function ContextMenuRadioItem({
-  className,
-  children,
-  ...props
-}: ComponentProps<typeof RadioItem>) {
-  return (
-    <RadioItem
-      data-slot="context-menu-radio-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <span>
-          <CircleIcon className="size-2 fill-current" />
-        </span>
-      </span>
-      {children}
-    </RadioItem>
-  )
-}
-
-function ContextMenuLabel({
-  className,
-  inset,
-  ...props
-}: ComponentProps<typeof Label> & {
-  inset?: boolean
-}) {
-  return (
-    <Label
-      data-slot="context-menu-label"
-      data-inset={inset}
-      className={cn(
-        "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className
-      )
-      {...props}
-    />
-  )
-}
-
-function ContextMenuSeparator({
-  className,
-  ...props
-}: ComponentProps<typeof Separator>) {
-  return (
-    <Separator
-      data-slot="context-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  )
-}
-
-function ContextMenuShortcut({
-  className,
-  ...props
-}: ComponentProps<"span">) {
+}: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      data-slot="context-menu-shortcut"
       className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
+        "ml-auto text-xs tracking-widest text-muted-foreground",
         className
       )}
       {...props}
     />
   )
 }
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
 
 export {
   ContextMenu,
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index 3c8012c..fc05e96 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -2,9 +2,7 @@
 
 import { ComponentProps } from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import CheckIcon from "lucide-react/dist/esm/icons/check"
-import ChevronRightIcon from "lucide-react/dist/esm/icons/chevron-right"
-import CircleIcon from "lucide-react/dist/esm/icons/circle"
+import { Check as CheckIcon, ChevronRight as ChevronRightIcon, Circle as CircleIcon } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
diff --git a/src/components/ui/input-otp.tsx b/src/components/ui/input-otp.tsx
index dd69e58..0f6f30d 100644
--- a/src/components/ui/input-otp.tsx
+++ b/src/components/ui/input-otp.tsx
@@ -2,7 +2,7 @@
 
 import { ComponentProps, useContext } from "react"
 import { OTPInput, OTPInputContext } from "input-otp"
-import MinusIcon from "lucide-react/dist/esm/icons/minus"
+import { Minus as MinusIcon } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
diff --git a/src/components/ui/menubar.tsx b/src/components/ui/menubar.tsx
index 951c0fc..6c185dd 100644
--- a/src/components/ui/menubar.tsx
+++ b/src/components/ui/menubar.tsx
@@ -1,8 +1,6 @@
 import { ComponentProps } from "react"
 import * as MenubarPrimitive from "@radix-ui/react-menubar"
-import CheckIcon from "lucide-react/dist/esm/icons/check"
-import ChevronRightIcon from "lucide-react/dist/esm/icons/chevron-right"
-import CircleIcon from "lucide-react/dist/esm/icons/circle"
+import { Check as CheckIcon, ChevronRight as ChevronRightIcon, Circle as CircleIcon } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
diff --git a/src/components/ui/navigation-menu.tsx b/src/components/ui/navigation-menu.tsx
index 559f29e..15ec507 100644
--- a/src/components/ui/navigation-menu.tsx
+++ b/src/components/ui/navigation-menu.tsx
@@ -1,7 +1,7 @@
 import { ComponentProps } from "react"
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
 import { cva } from "class-variance-authority"
-import ChevronDownIcon from "lucide-react/dist/esm/icons/chevron-down"
+import { ChevronDown as ChevronDownIcon } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
diff --git a/src/components/ui/pagination.tsx b/src/components/ui/pagination.tsx
index 7773bcf..abd75c3 100644
--- a/src/components/ui/pagination.tsx
+++ b/src/components/ui/pagination.tsx
@@ -1,7 +1,5 @@
 import { ComponentProps } from "react"
-import ChevronLeftIcon from "lucide-react/dist/esm/icons/chevron-left"
-import ChevronRightIcon from "lucide-react/dist/esm/icons/chevron-right"
-import MoreHorizontalIcon from "lucide-react/dist/esm/icons/more-horizontal"
+import { ChevronLeft as ChevronLeftIcon, ChevronRight as ChevronRightIcon, MoreHorizontal as MoreHorizontalIcon } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import { Button, buttonVariants } from "@/components/ui/button"
diff --git a/src/components/ui/radio-group.tsx b/src/components/ui/radio-group.tsx
index 5d0e8f9..837ab80 100644
--- a/src/components/ui/radio-group.tsx
+++ b/src/components/ui/radio-group.tsx
@@ -2,7 +2,7 @@
 
 import { ComponentProps } from "react"
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
-import CircleIcon from "lucide-react/dist/esm/icons/circle"
+import { Circle as CircleIcon } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
diff --git a/src/components/ui/resizable.tsx b/src/components/ui/resizable.tsx
index 08a2bea..e71219d 100644
--- a/src/components/ui/resizable.tsx
+++ b/src/components/ui/resizable.tsx
@@ -1,5 +1,4 @@
 import { ComponentProps } from "react"
-import GripVerticalIcon from "lucide-react/dist/esm/icons/grip-vertical"
 import * as ResizablePrimitive from "react-resizable-panels"
 
 import { cn } from "@/lib/utils"
@@ -12,7 +11,7 @@ function ResizablePanelGroup({
     <ResizablePrimitive.Group
       data-slot="resizable-panel-group"
       className={cn(
-        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+        "flex h-full w-full data-[panel-group-orientation=vertical]:flex-col",
         className
       )}
       {...props}
@@ -37,17 +36,11 @@ function ResizableHandle({
     <ResizablePrimitive.Separator
       data-slot="resizable-handle"
       className={cn(
-        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        "relative flex w-px cursor-col-resize items-center justify-center bg-white/5 hover:bg-purple-500/50 active:bg-purple-500 transition-colors focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden data-[panel-group-orientation=vertical]:h-px data-[panel-group-orientation=vertical]:w-full data-[panel-group-orientation=vertical]:cursor-row-resize",
         className
       )}
       {...props}
-    >
-      {withHandle && (
-        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
-          <GripVerticalIcon className="size-2.5" />
-        </div>
-      )}
-    </ResizablePrimitive.Separator>
+    />
   )
 }
 
diff --git a/src/components/ui/sidebar.tsx b/src/components/ui/sidebar.tsx
index 2e2c176..43e75d4 100644
--- a/src/components/ui/sidebar.tsx
+++ b/src/components/ui/sidebar.tsx
@@ -3,7 +3,7 @@
 import { CSSProperties, ComponentProps, createContext, useCallback, useContext, useEffect, useMemo, useState } from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { VariantProps, cva } from "class-variance-authority"
-import PanelLeftIcon from "lucide-react/dist/esm/icons/panel-left"
+import { PanelLeft as PanelLeftIcon } from "lucide-react"
 
 import { useIsMobile } from "@/hooks/use-mobile"
 import { cn } from "@/lib/utils"
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
index 594e0ae..1b8165f 100644
--- a/src/components/ui/sonner.tsx
+++ b/src/components/ui/sonner.tsx
@@ -1,13 +1,13 @@
 import { useTheme } from "next-themes"
-import { CSSProperties } from "react"
-import { Toaster as Sonner, ToasterProps } from "sonner"
+import { CSSProperties, ComponentProps } from "react"
+import { Toaster as Sonner } from "sonner"
 
-const Toaster = ({ ...props }: ToasterProps) => {
+const Toaster = ({ ...props }: ComponentProps<typeof Sonner>) => {
   const { theme = "system" } = useTheme()
 
   return (
     <Sonner
-      theme={theme as ToasterProps["theme"]}
+      theme={theme as "light" | "dark" | "system"}
       className="toaster group"
       style={
         {
diff --git a/src/components/ui/tabs-extra.tsx b/src/components/ui/tabs-extra.tsx
index 9752eb3..a309f2c 100644
--- a/src/components/ui/tabs-extra.tsx
+++ b/src/components/ui/tabs-extra.tsx
@@ -39,7 +39,7 @@ export function ExtraTabs({ user }: { user: any }) {
       <TabsContent value="profile"><UserProfile user={user} /></TabsContent>
       <TabsContent value="uefn"><UEFNPanel /></TabsContent>
       <TabsContent value="preview"><GamePreviewPanel /></TabsContent>
-      <TabsContent value="translation"><TranslationPanel /></TabsContent>
+      <TabsContent value="translation"><TranslationPanel isOpen={true} onClose={() => {}} currentCode="" currentPlatform="roblox" /></TabsContent>
       <TabsContent value="spatial"><SpatialPanel /></TabsContent>
       <TabsContent value="assets"><AssetLibraryPanel /></TabsContent>
       <TabsContent value="teacher"><TeacherDashboard /></TabsContent>
diff --git a/src/hooks/use-projects.ts b/src/hooks/use-projects.ts
new file mode 100644
index 0000000..4187ebd
--- /dev/null
+++ b/src/hooks/use-projects.ts
@@ -0,0 +1,95 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { getSupabase } from '@/lib/supabase/client';
+import { useSupabaseAuth } from './use-supabase';
+import type { Database } from '@/lib/supabase/types';
+
+type Project = Database['public']['Tables']['projects']['Row'];
+type ProjectInsert = Database['public']['Tables']['projects']['Insert'];
+
+export function useProjects() {
+  const { user } = useSupabaseAuth();
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!user) {
+      setProjects([]);
+      setLoading(false);
+      return;
+    }
+
+    const fetchProjects = async () => {
+      const supabase = getSupabase();
+      const { data, error } = await supabase
+        .from('projects')
+        .select('*')
+        .eq('user_id', user.id)
+        .order('updated_at', { ascending: false });
+
+      if (error) {
+        console.error('Error fetching projects:', error);
+      } else {
+        setProjects(data ?? []);
+      }
+      setLoading(false);
+    };
+
+    fetchProjects();
+  }, [user]);
+
+  const createProject = async (project: Omit<ProjectInsert, 'user_id'>) => {
+    if (!user) return { error: new Error('Not authenticated') };
+
+    const supabase = getSupabase();
+    const { data, error } = await supabase
+      .from('projects')
+      .insert({ ...project, user_id: user.id })
+      .select()
+      .single();
+
+    if (!error && data) {
+      setProjects((prev) => [data, ...prev]);
+    }
+
+    return { data, error };
+  };
+
+  const updateProject = async (id: string, updates: Partial<Project>) => {
+    const supabase = getSupabase();
+    const { data, error } = await supabase
+      .from('projects')
+      .update({ ...updates, updated_at: new Date().toISOString() })
+      .eq('id', id)
+      .select()
+      .single();
+
+    if (!error && data) {
+      setProjects((prev) =>
+        prev.map((p) => (p.id === id ? data : p))
+      );
+    }
+
+    return { data, error };
+  };
+
+  const deleteProject = async (id: string) => {
+    const supabase = getSupabase();
+    const { error } = await supabase.from('projects').delete().eq('id', id);
+
+    if (!error) {
+      setProjects((prev) => prev.filter((p) => p.id !== id));
+    }
+
+    return { error };
+  };
+
+  return {
+    projects,
+    loading,
+    createProject,
+    updateProject,
+    deleteProject,
+  };
+}
diff --git a/src/hooks/use-supabase.ts b/src/hooks/use-supabase.ts
new file mode 100644
index 0000000..c12c0d8
--- /dev/null
+++ b/src/hooks/use-supabase.ts
@@ -0,0 +1,136 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { User, Session, AuthChangeEvent } from '@supabase/supabase-js';
+import { getSupabase } from '@/lib/supabase/client';
+import type { Database } from '@/lib/supabase/types';
+
+type Profile = Database['public']['Tables']['profiles']['Row'];
+
+export function useSupabaseAuth() {
+  const [user, setUser] = useState<User | null>(null);
+  const [session, setSession] = useState<Session | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const supabase = getSupabase();
+
+    // Get initial session
+    const getInitialSession = async () => {
+      const { data } = await supabase.auth.getSession();
+      setSession(data.session);
+      setUser(data.session?.user ?? null);
+      setLoading(false);
+    };
+    
+    getInitialSession();
+
+    // Listen for auth changes
+    const {
+      data: { subscription },
+    } = supabase.auth.onAuthStateChange((_event: AuthChangeEvent, session: Session | null) => {
+      setSession(session);
+      setUser(session?.user ?? null);
+      setLoading(false);
+    });
+
+    return () => subscription.unsubscribe();
+  }, []);
+
+  const signIn = async (email: string, password: string) => {
+    const supabase = getSupabase();
+    const { data, error } = await supabase.auth.signInWithPassword({
+      email,
+      password,
+    });
+    return { data, error };
+  };
+
+  const signUp = async (email: string, password: string) => {
+    const supabase = getSupabase();
+    const { data, error } = await supabase.auth.signUp({
+      email,
+      password,
+    });
+    return { data, error };
+  };
+
+  const signInWithOAuth = async (provider: 'github' | 'google' | 'discord') => {
+    const supabase = getSupabase();
+    const { data, error } = await supabase.auth.signInWithOAuth({
+      provider,
+      options: {
+        redirectTo: `${window.location.origin}/auth/callback`,
+      },
+    });
+    return { data, error };
+  };
+
+  const signOut = async () => {
+    const supabase = getSupabase();
+    const { error } = await supabase.auth.signOut();
+    return { error };
+  };
+
+  return {
+    user,
+    session,
+    loading,
+    signIn,
+    signUp,
+    signInWithOAuth,
+    signOut,
+  };
+}
+
+export function useProfile() {
+  const { user } = useSupabaseAuth();
+  const [profile, setProfile] = useState<Profile | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!user) {
+      setProfile(null);
+      setLoading(false);
+      return;
+    }
+
+    const fetchProfile = async () => {
+      const supabase = getSupabase();
+      const { data, error } = await supabase
+        .from('profiles')
+        .select('*')
+        .eq('id', user.id)
+        .single();
+
+      if (error) {
+        console.error('Error fetching profile:', error);
+      } else {
+        setProfile(data);
+      }
+      setLoading(false);
+    };
+
+    fetchProfile();
+  }, [user]);
+
+  const updateProfile = async (updates: Partial<Profile>) => {
+    if (!user) return { error: new Error('Not authenticated') };
+
+    const supabase = getSupabase();
+    const { data, error } = await supabase
+      .from('profiles')
+      .update({ ...updates, updated_at: new Date().toISOString() })
+      .eq('id', user.id)
+      .select()
+      .single();
+
+    if (!error && data) {
+      setProfile(data);
+    }
+
+    return { data, error };
+  };
+
+  return { profile, loading, updateProfile };
+}
diff --git a/src/lib/supabase/client.ts b/src/lib/supabase/client.ts
new file mode 100644
index 0000000..de810a3
--- /dev/null
+++ b/src/lib/supabase/client.ts
@@ -0,0 +1,18 @@
+import { createBrowserClient } from '@supabase/ssr';
+
+export function createClient() {
+  return createBrowserClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+  );
+}
+
+// Singleton instance for client-side usage
+let supabaseInstance: ReturnType<typeof createBrowserClient> | null = null;
+
+export function getSupabase() {
+  if (!supabaseInstance) {
+    supabaseInstance = createClient();
+  }
+  return supabaseInstance;
+}
diff --git a/src/lib/supabase/middleware.ts b/src/lib/supabase/middleware.ts
new file mode 100644
index 0000000..c7fa072
--- /dev/null
+++ b/src/lib/supabase/middleware.ts
@@ -0,0 +1,36 @@
+import { createServerClient } from '@supabase/ssr';
+import { NextResponse, type NextRequest } from 'next/server';
+
+export async function updateSession(request: NextRequest) {
+  let supabaseResponse = NextResponse.next({
+    request,
+  });
+
+  const supabase = createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        getAll() {
+          return request.cookies.getAll();
+        },
+        setAll(cookiesToSet) {
+          cookiesToSet.forEach(({ name, value }) =>
+            request.cookies.set(name, value)
+          );
+          supabaseResponse = NextResponse.next({
+            request,
+          });
+          cookiesToSet.forEach(({ name, value, options }) =>
+            supabaseResponse.cookies.set(name, value, options)
+          );
+        },
+      },
+    }
+  );
+
+  // Refresh session if expired
+  await supabase.auth.getUser();
+
+  return supabaseResponse;
+}
diff --git a/src/lib/supabase/server.ts b/src/lib/supabase/server.ts
new file mode 100644
index 0000000..04e19cf
--- /dev/null
+++ b/src/lib/supabase/server.ts
@@ -0,0 +1,28 @@
+import { createServerClient, type CookieOptions } from '@supabase/ssr';
+import { cookies } from 'next/headers';
+
+export async function createClient() {
+  const cookieStore = await cookies();
+
+  return createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        getAll() {
+          return cookieStore.getAll();
+        },
+        setAll(cookiesToSet) {
+          try {
+            cookiesToSet.forEach(({ name, value, options }) =>
+              cookieStore.set(name, value, options)
+            );
+          } catch {
+            // The `setAll` method was called from a Server Component.
+            // This can be ignored if you have middleware refreshing user sessions.
+          }
+        },
+      },
+    }
+  );
+}
diff --git a/src/lib/supabase/types.ts b/src/lib/supabase/types.ts
new file mode 100644
index 0000000..2777460
--- /dev/null
+++ b/src/lib/supabase/types.ts
@@ -0,0 +1,143 @@
+// Database types - Generate with: npx supabase gen types typescript --project-id YOUR_PROJECT_ID > src/lib/supabase/types.ts
+
+export type Json =
+  | string
+  | number
+  | boolean
+  | null
+  | { [key: string]: Json | undefined }
+  | Json[];
+
+export interface Database {
+  public: {
+    Tables: {
+      profiles: {
+        Row: {
+          id: string;
+          username: string | null;
+          avatar_url: string | null;
+          created_at: string;
+          updated_at: string;
+          subscription_tier: 'free' | 'studio' | 'pro' | 'enterprise';
+          translation_count: number;
+        };
+        Insert: {
+          id: string;
+          username?: string | null;
+          avatar_url?: string | null;
+          created_at?: string;
+          updated_at?: string;
+          subscription_tier?: 'free' | 'studio' | 'pro' | 'enterprise';
+          translation_count?: number;
+        };
+        Update: {
+          id?: string;
+          username?: string | null;
+          avatar_url?: string | null;
+          created_at?: string;
+          updated_at?: string;
+          subscription_tier?: 'free' | 'studio' | 'pro' | 'enterprise';
+          translation_count?: number;
+        };
+      };
+      projects: {
+        Row: {
+          id: string;
+          user_id: string;
+          name: string;
+          description: string | null;
+          platforms: string[];
+          created_at: string;
+          updated_at: string;
+          is_public: boolean;
+        };
+        Insert: {
+          id?: string;
+          user_id: string;
+          name: string;
+          description?: string | null;
+          platforms?: string[];
+          created_at?: string;
+          updated_at?: string;
+          is_public?: boolean;
+        };
+        Update: {
+          id?: string;
+          user_id?: string;
+          name?: string;
+          description?: string | null;
+          platforms?: string[];
+          created_at?: string;
+          updated_at?: string;
+          is_public?: boolean;
+        };
+      };
+      files: {
+        Row: {
+          id: string;
+          project_id: string;
+          name: string;
+          path: string;
+          content: string | null;
+          language: string;
+          created_at: string;
+          updated_at: string;
+        };
+        Insert: {
+          id?: string;
+          project_id: string;
+          name: string;
+          path: string;
+          content?: string | null;
+          language: string;
+          created_at?: string;
+          updated_at?: string;
+        };
+        Update: {
+          id?: string;
+          project_id?: string;
+          name?: string;
+          path?: string;
+          content?: string | null;
+          language?: string;
+          created_at?: string;
+          updated_at?: string;
+        };
+      };
+      translations: {
+        Row: {
+          id: string;
+          user_id: string;
+          source_platform: string;
+          target_platform: string;
+          source_code: string;
+          translated_code: string;
+          created_at: string;
+        };
+        Insert: {
+          id?: string;
+          user_id: string;
+          source_platform: string;
+          target_platform: string;
+          source_code: string;
+          translated_code: string;
+          created_at?: string;
+        };
+        Update: {
+          id?: string;
+          user_id?: string;
+          source_platform?: string;
+          target_platform?: string;
+          source_code?: string;
+          translated_code?: string;
+          created_at?: string;
+        };
+      };
+    };
+    Views: Record<string, never>;
+    Functions: Record<string, never>;
+    Enums: {
+      subscription_tier: 'free' | 'studio' | 'pro' | 'enterprise';
+    };
+  };
+}
diff --git a/src/lib/templates.ts b/src/lib/templates.ts
index a732444..dfbb7a7 100644
--- a/src/lib/templates.ts
+++ b/src/lib/templates.ts
@@ -2,6 +2,7 @@ import { PlatformId } from './platforms';
 import { uefnTemplates } from './templates-uefn';
 import { spatialTemplates } from './templates-spatial';
 
+export interface ScriptTemplate {
     id: string;
     name: string;
     description: string;
diff --git a/src/lib/translation-engine.ts b/src/lib/translation-engine.ts
index 82f7eef..16ad99a 100644
--- a/src/lib/translation-engine.ts
+++ b/src/lib/translation-engine.ts
@@ -77,7 +77,7 @@ Example:
 /**
  * Platform-specific translation rules
  */
-const platformTranslationRules: Record<string, Record<string, string[]>> = {
+const platformTranslationRules: Record<string, string[]> = {
   'roblox-to-uefn': [
     'game:GetService() → Use Verse imports',
     'Instance.new() → object{} syntax in Verse',
@@ -145,7 +145,7 @@ async function translateWithClaudeAPI(
 ): Promise<TranslationResult> {
   try {
     // Check if API key is configured
-    const apiKey = import.meta.env.VITE_CLAUDE_API_KEY || process.env.NEXT_PUBLIC_CLAUDE_API_KEY;
+    const apiKey = process.env.NEXT_PUBLIC_CLAUDE_API_KEY;
 
     if (!apiKey) {
       console.warn('Claude API key not configured, using mock translation');
diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
index 037b90c..b1d5bdf 100644
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
@@ -1 +1 @@
-export * from "./utils";
\ No newline at end of file
+export * from "../utils";
\ No newline at end of file
diff --git a/src/types/lucide-react.d.ts b/src/types/lucide-react.d.ts
index fc71827..a0144c0 100644
--- a/src/types/lucide-react.d.ts
+++ b/src/types/lucide-react.d.ts
@@ -17,7 +17,6 @@ declare module 'lucide-react/dist/esm/icons/circle' {
   const CircleIcon: React.FC<React.SVGProps<SVGSVGElement>>;
   export default CircleIcon;
 }
-}
 declare module 'lucide-react/dist/esm/icons/chevron-left' {
   const ChevronLeft: any;
   export default ChevronLeft;
diff --git a/store/editor-store.ts b/store/editor-store.ts
index fac7e5a..3f75d64 100644
--- a/store/editor-store.ts
+++ b/store/editor-store.ts
@@ -32,6 +32,7 @@ interface EditorStore {
   updateFileContent: (fileId: string, content: string) => void;
   saveFile: (fileId: string) => void;
   saveAllFiles: () => void;
+  moveFile: (fileId: string, targetFolderId: string) => void;
 }
 
 export const useEditorStore = create<EditorStore>((set, get) => ({
@@ -188,4 +189,47 @@ export const useEditorStore = create<EditorStore>((set, get) => ({
       });
     }, 500);
   },
+
+  moveFile: (fileId: string, targetFolderId: string) => {
+    const { files } = get();
+    
+    // Helper to find and remove a file from tree
+    const findAndRemove = (nodes: FileNode[], id: string): { nodes: FileNode[]; removed: FileNode | null } => {
+      let removed: FileNode | null = null;
+      const newNodes = nodes.filter(n => {
+        if (n.id === id) {
+          removed = n;
+          return false;
+        }
+        return true;
+      }).map(n => {
+        if (n.children && !removed) {
+          const result = findAndRemove(n.children, id);
+          removed = result.removed;
+          return { ...n, children: result.nodes };
+        }
+        return n;
+      });
+      return { nodes: newNodes, removed };
+    };
+
+    // Helper to add file to target folder
+    const addToFolder = (nodes: FileNode[], folderId: string, file: FileNode): FileNode[] => {
+      return nodes.map(n => {
+        if (n.id === folderId && n.type === 'folder') {
+          return { ...n, children: [...(n.children || []), file] };
+        }
+        if (n.children) {
+          return { ...n, children: addToFolder(n.children, folderId, file) };
+        }
+        return n;
+      });
+    };
+
+    const { nodes: afterRemove, removed } = findAndRemove(files, fileId);
+    if (removed) {
+      const newFiles = addToFolder(afterRemove, targetFolderId, removed);
+      set({ files: newFiles });
+    }
+  },
 }));
diff --git a/supabase/migrations/001_initial_schema.sql b/supabase/migrations/001_initial_schema.sql
new file mode 100644
index 0000000..de623e3
--- /dev/null
+++ b/supabase/migrations/001_initial_schema.sql
@@ -0,0 +1,240 @@
+-- AeThex Studio Initial Database Schema
+-- Run this in Supabase SQL Editor to set up your database
+
+-- Enable RLS (Row Level Security)
+alter default privileges revoke execute on functions from public;
+
+-- Create subscription tier enum
+create type subscription_tier as enum ('free', 'studio', 'pro', 'enterprise');
+
+-- ============================================
+-- PROFILES TABLE
+-- ============================================
+create table public.profiles (
+  id uuid references auth.users on delete cascade primary key,
+  username text unique,
+  avatar_url text,
+  created_at timestamptz default now() not null,
+  updated_at timestamptz default now() not null,
+  subscription_tier subscription_tier default 'free' not null,
+  translation_count integer default 0 not null
+);
+
+-- Enable RLS
+alter table public.profiles enable row level security;
+
+-- Policies
+create policy "Users can view their own profile"
+  on public.profiles for select
+  using (auth.uid() = id);
+
+create policy "Users can update their own profile"
+  on public.profiles for update
+  using (auth.uid() = id);
+
+-- Auto-create profile on signup
+create function public.handle_new_user()
+returns trigger
+language plpgsql
+security definer set search_path = ''
+as $$
+begin
+  insert into public.profiles (id, username, avatar_url)
+  values (
+    new.id,
+    new.raw_user_meta_data ->> 'username',
+    new.raw_user_meta_data ->> 'avatar_url'
+  );
+  return new;
+end;
+$$;
+
+create trigger on_auth_user_created
+  after insert on auth.users
+  for each row execute procedure public.handle_new_user();
+
+-- ============================================
+-- PROJECTS TABLE
+-- ============================================
+create table public.projects (
+  id uuid default gen_random_uuid() primary key,
+  user_id uuid references public.profiles(id) on delete cascade not null,
+  name text not null,
+  description text,
+  platforms text[] default '{}' not null,
+  created_at timestamptz default now() not null,
+  updated_at timestamptz default now() not null,
+  is_public boolean default false not null
+);
+
+-- Enable RLS
+alter table public.projects enable row level security;
+
+-- Policies
+create policy "Users can view their own projects"
+  on public.projects for select
+  using (auth.uid() = user_id);
+
+create policy "Users can view public projects"
+  on public.projects for select
+  using (is_public = true);
+
+create policy "Users can insert their own projects"
+  on public.projects for insert
+  with check (auth.uid() = user_id);
+
+create policy "Users can update their own projects"
+  on public.projects for update
+  using (auth.uid() = user_id);
+
+create policy "Users can delete their own projects"
+  on public.projects for delete
+  using (auth.uid() = user_id);
+
+-- Indexes
+create index projects_user_id_idx on public.projects(user_id);
+create index projects_is_public_idx on public.projects(is_public) where is_public = true;
+
+-- ============================================
+-- FILES TABLE
+-- ============================================
+create table public.files (
+  id uuid default gen_random_uuid() primary key,
+  project_id uuid references public.projects(id) on delete cascade not null,
+  name text not null,
+  path text not null,
+  content text,
+  language text not null,
+  created_at timestamptz default now() not null,
+  updated_at timestamptz default now() not null,
+  
+  unique(project_id, path)
+);
+
+-- Enable RLS
+alter table public.files enable row level security;
+
+-- Policies
+create policy "Users can view files in their projects"
+  on public.files for select
+  using (
+    exists (
+      select 1 from public.projects
+      where projects.id = files.project_id
+      and projects.user_id = auth.uid()
+    )
+  );
+
+create policy "Users can view files in public projects"
+  on public.files for select
+  using (
+    exists (
+      select 1 from public.projects
+      where projects.id = files.project_id
+      and projects.is_public = true
+    )
+  );
+
+create policy "Users can insert files to their projects"
+  on public.files for insert
+  with check (
+    exists (
+      select 1 from public.projects
+      where projects.id = files.project_id
+      and projects.user_id = auth.uid()
+    )
+  );
+
+create policy "Users can update files in their projects"
+  on public.files for update
+  using (
+    exists (
+      select 1 from public.projects
+      where projects.id = files.project_id
+      and projects.user_id = auth.uid()
+    )
+  );
+
+create policy "Users can delete files from their projects"
+  on public.files for delete
+  using (
+    exists (
+      select 1 from public.projects
+      where projects.id = files.project_id
+      and projects.user_id = auth.uid()
+    )
+  );
+
+-- Indexes
+create index files_project_id_idx on public.files(project_id);
+
+-- ============================================
+-- TRANSLATIONS TABLE
+-- ============================================
+create table public.translations (
+  id uuid default gen_random_uuid() primary key,
+  user_id uuid references public.profiles(id) on delete cascade not null,
+  source_platform text not null,
+  target_platform text not null,
+  source_code text not null,
+  translated_code text not null,
+  created_at timestamptz default now() not null
+);
+
+-- Enable RLS
+alter table public.translations enable row level security;
+
+-- Policies
+create policy "Users can view their own translations"
+  on public.translations for select
+  using (auth.uid() = user_id);
+
+create policy "Users can insert their own translations"
+  on public.translations for insert
+  with check (auth.uid() = user_id);
+
+-- Indexes
+create index translations_user_id_idx on public.translations(user_id);
+create index translations_created_at_idx on public.translations(created_at desc);
+
+-- ============================================
+-- HELPER FUNCTIONS
+-- ============================================
+
+-- Increment translation count for user
+create function public.increment_translation_count(user_uuid uuid)
+returns void
+language plpgsql
+security definer
+as $$
+begin
+  update public.profiles
+  set translation_count = translation_count + 1,
+      updated_at = now()
+  where id = user_uuid;
+end;
+$$;
+
+-- Updated at trigger function
+create function public.handle_updated_at()
+returns trigger
+language plpgsql
+as $$
+begin
+  new.updated_at = now();
+  return new;
+end;
+$$;
+
+-- Apply updated_at triggers
+create trigger set_profiles_updated_at
+  before update on public.profiles
+  for each row execute procedure public.handle_updated_at();
+
+create trigger set_projects_updated_at
+  before update on public.projects
+  for each row execute procedure public.handle_updated_at();
+
+create trigger set_files_updated_at
+  before update on public.files
+  for each row execute procedure public.handle_updated_at();
diff --git a/tailwind.config.js b/tailwind.config.js
deleted file mode 100644
index 0c2b217..0000000
--- a/tailwind.config.js
+++ /dev/null
@@ -1,153 +0,0 @@
-import fs from "fs";
-
-/** @type {import('tailwindcss').Config} */
-
-let theme = {};
-try {
-  const themePath = "./theme.json";
-
-  if (fs.existsSync(themePath)) {
-    theme = JSON.parse(fs.readFileSync(themePath, "utf-8"));
-  }
-} catch (err) {
-  // Silently fall back to empty theme object if custom theme cannot be loaded
-  theme = {};
-}
-const defaultTheme = {
-  container: {
-    center: true,
-    padding: "2rem",
-  },
-  extend: {
-    screens: {
-      coarse: { raw: "(pointer: coarse)" },
-      fine: { raw: "(pointer: fine)" },
-      pwa: { raw: "(display-mode: standalone)" },
-    },
-    colors: {
-      neutral: {
-        1: "var(--color-neutral-1)",
-        2: "var(--color-neutral-2)",
-        3: "var(--color-neutral-3)",
-        4: "var(--color-neutral-4)",
-        5: "var(--color-neutral-5)",
-        6: "var(--color-neutral-6)",
-        7: "var(--color-neutral-7)",
-        8: "var(--color-neutral-8)",
-        9: "var(--color-neutral-9)",
-        10: "var(--color-neutral-10)",
-        11: "var(--color-neutral-11)",
-        12: "var(--color-neutral-12)",
-        a1: "var(--color-neutral-a1)",
-        a2: "var(--color-neutral-a2)",
-        a3: "var(--color-neutral-a3)",
-        a4: "var(--color-neutral-a4)",
-        a5: "var(--color-neutral-a5)",
-        a6: "var(--color-neutral-a6)",
-        a7: "var(--color-neutral-a7)",
-        a8: "var(--color-neutral-a8)",
-        a9: "var(--color-neutral-a9)",
-        a10: "var(--color-neutral-a10)",
-        a11: "var(--color-neutral-a11)",
-        a12: "var(--color-neutral-a12)",
-        contrast: "var(--color-neutral-contrast)",
-      },
-      accent: {
-        1: "var(--color-accent-1)",
-        2: "var(--color-accent-2)",
-        3: "var(--color-accent-3)",
-        4: "var(--color-accent-4)",
-        5: "var(--color-accent-5)",
-        6: "var(--color-accent-6)",
-        7: "var(--color-accent-7)",
-        8: "var(--color-accent-8)",
-        9: "var(--color-accent-9)",
-        10: "var(--color-accent-10)",
-        11: "var(--color-accent-11)",
-        12: "var(--color-accent-12)",
-        contrast: "var(--color-accent-contrast)",
-      },
-      "accent-secondary": {
-        1: "var(--color-accent-secondary-1)",
-        2: "var(--color-accent-secondary-2)",
-        3: "var(--color-accent-secondary-3)",
-        4: "var(--color-accent-secondary-4)",
-        5: "var(--color-accent-secondary-5)",
-        6: "var(--color-accent-secondary-6)",
-        7: "var(--color-accent-secondary-7)",
-        8: "var(--color-accent-secondary-8)",
-        9: "var(--color-accent-secondary-9)",
-        10: "var(--color-accent-secondary-10)",
-        11: "var(--color-accent-secondary-11)",
-        12: "var(--color-accent-secondary-12)",
-        contrast: "var(--color-accent-secondary-contrast)",
-      },
-      fg: {
-        DEFAULT: "var(--color-fg)",
-        secondary: "var(--color-fg-secondary)",
-      },
-      bg: {
-        DEFAULT: "var(--color-bg)",
-        inset: "var(--color-bg-inset)",
-        overlay: "var(--color-bg-overlay)",
-      },
-      "focus-ring": "var(--color-focus-ring)",
-    },
-    borderRadius: {
-      sm: "var(--radius-sm)",
-      md: "var(--radius-md)",
-      lg: "var(--radius-lg)",
-      xl: "var(--radius-xl)",
-      "2xl": "var(--radius-2xl)",
-      full: "var(--radius-full)",
-    },
-  },
-  spacing: {
-    px: "var(--size-px)",
-    0: "var(--size-0)",
-    0.5: "var(--size-0-5)",
-    1: "var(--size-1)",
-    1.5: "var(--size-1-5)",
-    2: "var(--size-2)",
-    2.5: "var(--size-2-5)",
-    3: "var(--size-3)",
-    3.5: "var(--size-3-5)",
-    4: "var(--size-4)",
-    5: "var(--size-5)",
-    6: "var(--size-6)",
-    7: "var(--size-7)",
-    8: "var(--size-8)",
-    9: "var(--size-9)",
-    10: "var(--size-10)",
-    11: "var(--size-11)",
-    12: "var(--size-12)",
-    14: "var(--size-14)",
-    16: "var(--size-16)",
-    20: "var(--size-20)",
-    24: "var(--size-24)",
-    28: "var(--size-28)",
-    32: "var(--size-32)",
-    36: "var(--size-36)",
-    40: "var(--size-40)",
-    44: "var(--size-44)",
-    48: "var(--size-48)",
-    52: "var(--size-52)",
-    56: "var(--size-56)",
-    60: "var(--size-60)",
-    64: "var(--size-64)",
-    72: "var(--size-72)",
-    80: "var(--size-80)",
-    96: "var(--size-96)",
-  },
-  darkMode: ["selector", '[data-appearance="dark"]'],
-}
-
-export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-    "./app/**/*.{js,ts,jsx,tsx}",
-  ],
-  theme: { ...defaultTheme, ...theme },
-  plugins: [require("tailwindcss-animate")],
-};
\ No newline at end of file
diff --git a/tailwind.config.ts b/tailwind.config.ts
index cfba1eb..a71585f 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -6,6 +6,7 @@ const config: Config = {
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
diff --git a/tsconfig.json b/tsconfig.json
index 6e1e4e3..1658d14 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -20,9 +20,9 @@
       }
     ],
     "paths": {
-      "@/*": ["./*"]
+      "@/*": ["./src/*", "./*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "**/*.test.ts", "**/*.test.tsx", "**/test/**", "**/__tests__/**", "vitest.config.ts", "vite.config.ts"]
 }