From c30071b36d52c79ff333543ec8890de90b775eaf Mon Sep 17 00:00:00 2001
From: ritesh301 <riteshpradhan301@gmail.com>
Date: Fri, 12 Sep 2025 00:04:10 +0530
Subject: [PATCH 1/6] design landing,features , signin, and signup pages

---
 apps/web/app/(auth)/signin/page.tsx           | 262 +++----
 apps/web/app/(auth)/signup/page.tsx           | 337 ++++----
 apps/web/app/components/theme-provider.tsx    |  11 +
 apps/web/app/components/ui/accordion.tsx      |  66 ++
 apps/web/app/components/ui/alert-dialog.tsx   | 157 ++++
 apps/web/app/components/ui/alert.tsx          |  66 ++
 apps/web/app/components/ui/aspect-ratio.tsx   |  11 +
 apps/web/app/components/ui/avatar.tsx         |  53 ++
 apps/web/app/components/ui/badge.tsx          |  46 ++
 apps/web/app/components/ui/breadcrumb.tsx     | 109 +++
 apps/web/app/components/ui/button.tsx         |  59 ++
 apps/web/app/components/ui/calendar.tsx       | 213 +++++
 apps/web/app/components/ui/card.tsx           |  92 +++
 apps/web/app/components/ui/carousel.tsx       | 241 ++++++
 apps/web/app/components/ui/chart.tsx          | 353 +++++++++
 apps/web/app/components/ui/checkbox.tsx       |  32 +
 apps/web/app/components/ui/collapsible.tsx    |  33 +
 apps/web/app/components/ui/command.tsx        | 184 +++++
 apps/web/app/components/ui/context-menu.tsx   | 252 ++++++
 apps/web/app/components/ui/dialog.tsx         | 143 ++++
 apps/web/app/components/ui/drawer.tsx         | 135 ++++
 apps/web/app/components/ui/dropdown-menu.tsx  | 257 +++++++
 apps/web/app/components/ui/form.tsx           | 167 ++++
 apps/web/app/components/ui/hover-card.tsx     |  44 ++
 apps/web/app/components/ui/input-otp.tsx      |  77 ++
 apps/web/app/components/ui/input.tsx          |  21 +
 apps/web/app/components/ui/label.tsx          |  24 +
 apps/web/app/components/ui/menubar.tsx        | 276 +++++++
 .../web/app/components/ui/navigation-menu.tsx | 168 ++++
 apps/web/app/components/ui/pagination.tsx     | 127 +++
 apps/web/app/components/ui/popover.tsx        |  48 ++
 apps/web/app/components/ui/progress.tsx       |  31 +
 apps/web/app/components/ui/radio-group.tsx    |  45 ++
 apps/web/app/components/ui/resizable.tsx      |  56 ++
 apps/web/app/components/ui/scroll-area.tsx    |  58 ++
 apps/web/app/components/ui/select.tsx         | 185 +++++
 apps/web/app/components/ui/separator.tsx      |  28 +
 apps/web/app/components/ui/sheet.tsx          | 139 ++++
 apps/web/app/components/ui/sidebar.tsx        | 726 ++++++++++++++++++
 apps/web/app/components/ui/skeleton.tsx       |  13 +
 apps/web/app/components/ui/slider.tsx         |  63 ++
 apps/web/app/components/ui/sonner.tsx         |  25 +
 apps/web/app/components/ui/switch.tsx         |  31 +
 apps/web/app/components/ui/table.tsx          | 116 +++
 apps/web/app/components/ui/tabs.tsx           |  66 ++
 apps/web/app/components/ui/textarea.tsx       |  18 +
 apps/web/app/components/ui/toast.tsx          | 129 ++++
 apps/web/app/components/ui/toaster.tsx        |  35 +
 apps/web/app/components/ui/toggle-group.tsx   |  73 ++
 apps/web/app/components/ui/toggle.tsx         |  47 ++
 apps/web/app/components/ui/tooltip.tsx        |  61 ++
 apps/web/app/components/ui/use-mobile.tsx     |  19 +
 apps/web/app/components/ui/use-toast.ts       | 191 +++++
 apps/web/app/features/page.tsx                | 417 ++++++++++
 apps/web/app/globals.css                      |  98 ++-
 apps/web/app/lib/utils.ts                     |   6 +
 apps/web/app/page.tsx                         | 533 ++++++++++++-
 apps/web/app/public/placeholder-logo.png      | Bin 0 -> 568 bytes
 apps/web/app/public/placeholder-logo.svg      |   1 +
 apps/web/app/public/placeholder-user.jpg      | Bin 0 -> 1635 bytes
 apps/web/app/public/placeholder.jpg           | Bin 0 -> 1064 bytes
 apps/web/app/public/placeholder.svg           |   1 +
 apps/web/components.json                      |  22 +
 apps/web/components/ui/badge.tsx              |  36 +
 apps/web/components/ui/button.tsx             |  57 ++
 apps/web/components/ui/card.tsx               |  76 ++
 apps/web/components/ui/input.tsx              |  22 +
 apps/web/components/ui/label.tsx              |  26 +
 apps/web/lib/utils.ts                         |   6 +
 apps/web/package.json                         |   7 +
 .../20250911181640_init/migration.sql         |  82 ++
 .../web/prisma/migrations/migration_lock.toml |   3 +
 apps/web/tailwind.config.js                   |  55 +-
 pnpm-lock.yaml                                | 138 +++-
 74 files changed, 7437 insertions(+), 368 deletions(-)
 create mode 100644 apps/web/app/components/theme-provider.tsx
 create mode 100644 apps/web/app/components/ui/accordion.tsx
 create mode 100644 apps/web/app/components/ui/alert-dialog.tsx
 create mode 100644 apps/web/app/components/ui/alert.tsx
 create mode 100644 apps/web/app/components/ui/aspect-ratio.tsx
 create mode 100644 apps/web/app/components/ui/avatar.tsx
 create mode 100644 apps/web/app/components/ui/badge.tsx
 create mode 100644 apps/web/app/components/ui/breadcrumb.tsx
 create mode 100644 apps/web/app/components/ui/button.tsx
 create mode 100644 apps/web/app/components/ui/calendar.tsx
 create mode 100644 apps/web/app/components/ui/card.tsx
 create mode 100644 apps/web/app/components/ui/carousel.tsx
 create mode 100644 apps/web/app/components/ui/chart.tsx
 create mode 100644 apps/web/app/components/ui/checkbox.tsx
 create mode 100644 apps/web/app/components/ui/collapsible.tsx
 create mode 100644 apps/web/app/components/ui/command.tsx
 create mode 100644 apps/web/app/components/ui/context-menu.tsx
 create mode 100644 apps/web/app/components/ui/dialog.tsx
 create mode 100644 apps/web/app/components/ui/drawer.tsx
 create mode 100644 apps/web/app/components/ui/dropdown-menu.tsx
 create mode 100644 apps/web/app/components/ui/form.tsx
 create mode 100644 apps/web/app/components/ui/hover-card.tsx
 create mode 100644 apps/web/app/components/ui/input-otp.tsx
 create mode 100644 apps/web/app/components/ui/input.tsx
 create mode 100644 apps/web/app/components/ui/label.tsx
 create mode 100644 apps/web/app/components/ui/menubar.tsx
 create mode 100644 apps/web/app/components/ui/navigation-menu.tsx
 create mode 100644 apps/web/app/components/ui/pagination.tsx
 create mode 100644 apps/web/app/components/ui/popover.tsx
 create mode 100644 apps/web/app/components/ui/progress.tsx
 create mode 100644 apps/web/app/components/ui/radio-group.tsx
 create mode 100644 apps/web/app/components/ui/resizable.tsx
 create mode 100644 apps/web/app/components/ui/scroll-area.tsx
 create mode 100644 apps/web/app/components/ui/select.tsx
 create mode 100644 apps/web/app/components/ui/separator.tsx
 create mode 100644 apps/web/app/components/ui/sheet.tsx
 create mode 100644 apps/web/app/components/ui/sidebar.tsx
 create mode 100644 apps/web/app/components/ui/skeleton.tsx
 create mode 100644 apps/web/app/components/ui/slider.tsx
 create mode 100644 apps/web/app/components/ui/sonner.tsx
 create mode 100644 apps/web/app/components/ui/switch.tsx
 create mode 100644 apps/web/app/components/ui/table.tsx
 create mode 100644 apps/web/app/components/ui/tabs.tsx
 create mode 100644 apps/web/app/components/ui/textarea.tsx
 create mode 100644 apps/web/app/components/ui/toast.tsx
 create mode 100644 apps/web/app/components/ui/toaster.tsx
 create mode 100644 apps/web/app/components/ui/toggle-group.tsx
 create mode 100644 apps/web/app/components/ui/toggle.tsx
 create mode 100644 apps/web/app/components/ui/tooltip.tsx
 create mode 100644 apps/web/app/components/ui/use-mobile.tsx
 create mode 100644 apps/web/app/components/ui/use-toast.ts
 create mode 100644 apps/web/app/features/page.tsx
 create mode 100644 apps/web/app/lib/utils.ts
 create mode 100644 apps/web/app/public/placeholder-logo.png
 create mode 100644 apps/web/app/public/placeholder-logo.svg
 create mode 100644 apps/web/app/public/placeholder-user.jpg
 create mode 100644 apps/web/app/public/placeholder.jpg
 create mode 100644 apps/web/app/public/placeholder.svg
 create mode 100644 apps/web/components.json
 create mode 100644 apps/web/components/ui/badge.tsx
 create mode 100644 apps/web/components/ui/button.tsx
 create mode 100644 apps/web/components/ui/card.tsx
 create mode 100644 apps/web/components/ui/input.tsx
 create mode 100644 apps/web/components/ui/label.tsx
 create mode 100644 apps/web/lib/utils.ts
 create mode 100644 apps/web/prisma/migrations/20250911181640_init/migration.sql
 create mode 100644 apps/web/prisma/migrations/migration_lock.toml

diff --git a/apps/web/app/(auth)/signin/page.tsx b/apps/web/app/(auth)/signin/page.tsx
index 049865c..2435564 100644
--- a/apps/web/app/(auth)/signin/page.tsx
+++ b/apps/web/app/(auth)/signin/page.tsx
@@ -5,7 +5,13 @@ import { signIn } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 
-export default function SignIn() {
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Code, ArrowLeft } from "lucide-react";
+
+export default function SignInPage() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [isLoading, setIsLoading] = useState(false);
@@ -25,14 +31,14 @@ export default function SignIn() {
       });
 
       if (result?.error) {
-        setError("Invalid credentials");
+        setError("Invalid email or password. Please try again.");
       } else {
-        router.push("/");
+        router.push("/dashboard"); // Redirect to dashboard on success
         router.refresh();
       }
     } catch (error: unknown) {
       console.error("Sign in error:", error);
-      setError("An error occurred. Please try again.");
+      setError("An unexpected error occurred. Please try again.");
     } finally {
       setIsLoading(false);
     }
@@ -40,144 +46,138 @@ export default function SignIn() {
 
   const handleOAuthSignIn = async (provider: string) => {
     setIsLoading(true);
-    await signIn(provider, { callbackUrl: "/" });
+    await signIn(provider, { callbackUrl: "/dashboard" });
+    // No need to setIsLoading(false) here, as the page will redirect
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
-      <div className="max-w-md w-full space-y-8">
-        <div>
-          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
-            Sign in to your account
-          </h2>
-          <p className="mt-2 text-center text-sm text-gray-600">
-            Or{" "}
-            <Link
-              href="/signup"
-              className="font-medium text-indigo-600 hover:text-indigo-500"
-            >
-              create a new account
-            </Link>
-          </p>
-        </div>
-        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
-          {error && (
-            <div className="rounded-md bg-red-50 p-4">
-              <div className="flex">
-                <div className="ml-3">
-                  <h3 className="text-sm font-medium text-red-800">{error}</h3>
-                </div>
+    <div className="min-h-screen bg-background flex flex-col">
+      {/* Header */}
+      <header className="border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex h-16 items-center justify-between">
+            <Link href="/" className="flex items-center space-x-2">
+              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+                <Code className="h-5 w-5" />
               </div>
-            </div>
-          )}
-          <div className="rounded-md shadow-sm -space-y-px">
-            <div>
-              <label htmlFor="email-address" className="sr-only">
-                Email address
-              </label>
-              <input
-                id="email-address"
-                name="email"
-                type="email"
-                autoComplete="email"
-                required
-                className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
-                placeholder="Email address"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-              />
-            </div>
-            <div>
-              <label htmlFor="password" className="sr-only">
-                Password
-              </label>
-              <input
-                id="password"
-                name="password"
-                type="password"
-                autoComplete="current-password"
-                required
-                className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
-                placeholder="Password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-              />
-            </div>
+              <span className="text-xl font-bold text-foreground">Dev8.dev</span>
+            </Link>
+            <Button variant="ghost" size="sm" onClick={() => router.push("/")}>
+              <ArrowLeft className="mr-2 h-4 w-4" />
+              Back to Home
+            </Button>
           </div>
+        </div>
+      </header>
 
-          <div>
-            <button
-              type="submit"
-              disabled={isLoading}
-              className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
-            >
-              {isLoading ? "Signing in..." : "Sign in"}
-            </button>
+      {/* Sign In Form */}
+      <div className="flex-1 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+        <div className="w-full max-w-md space-y-8">
+          <div className="text-center">
+            <h2 className="text-3xl font-bold tracking-tight text-foreground">Welcome back</h2>
+            <p className="mt-2 text-muted-foreground">Sign in to access your Dev8.dev workspace</p>
           </div>
 
-          <div className="mt-6">
-            <div className="relative">
-              <div className="absolute inset-0 flex items-center">
-                <div className="w-full border-t border-gray-300" />
-              </div>
-              <div className="relative flex justify-center text-sm">
-                <span className="px-2 bg-gray-50 text-gray-500">
-                  Or continue with
-                </span>
-              </div>
-            </div>
-
-            <div className="mt-6 grid grid-cols-2 gap-3">
-              <button
-                type="button"
-                onClick={() => handleOAuthSignIn("google")}
-                disabled={isLoading}
-                className="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50"
-              >
-                <svg className="w-5 h-5" viewBox="0 0 24 24">
-                  <path
-                    fill="currentColor"
-                    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="currentColor"
-                    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="currentColor"
-                    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"
+          <Card className="border-border/50 bg-card/50 backdrop-blur">
+            <CardHeader className="space-y-1 text-center">
+              <CardTitle className="text-2xl">Sign In</CardTitle>
+              <CardDescription>Enter your credentials to continue</CardDescription>
+            </CardHeader>
+            <CardContent>
+              {error && (
+                <div className="mb-4 rounded-md border border-destructive/50 bg-destructive/10 p-3">
+                  <p className="text-sm font-medium text-destructive">{error}</p>
+                </div>
+              )}
+              <form onSubmit={handleSubmit} className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="email">Email</Label>
+                  <Input
+                    id="email"
+                    name="email"
+                    type="email"
+                    autoComplete="email"
+                    placeholder="Enter your email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    required
+                    disabled={isLoading}
                   />
-                  <path
-                    fill="currentColor"
-                    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"
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="password">Password</Label>
+                  <Input
+                    id="password"
+                    name="password"
+                    type="password"
+                    autoComplete="current-password"
+                    placeholder="Enter your password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    required
+                    disabled={isLoading}
                   />
-                </svg>
-                <span className="ml-2">Google</span>
-              </button>
+                </div>
+                <Button type="submit" className="w-full" disabled={isLoading}>
+                  {isLoading ? "Signing In..." : "Sign In with Email"}
+                </Button>
+              </form>
 
-              <button
-                type="button"
-                onClick={() => handleOAuthSignIn("github")}
-                disabled={isLoading}
-                className="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50"
-              >
-                <svg
-                  className="w-5 h-5"
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-                <span className="ml-2">GitHub</span>
-              </button>
-            </div>
-          </div>
-        </form>
+              <div className="relative my-6">
+                <div className="absolute inset-0 flex items-center">
+                  <span className="w-full border-t border-border" />
+                </div>
+                <div className="relative flex justify-center text-xs uppercase">
+                  <span className="bg-card px-2 text-muted-foreground">Or continue with</span>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-3">
+                <Button variant="outline" type="button" onClick={() => handleOAuthSignIn("google")} disabled={isLoading}>
+                  <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24">
+                    <path
+                      fill="currentColor"
+                      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="currentColor"
+                      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="currentColor"
+                      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="currentColor"
+                      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>
+                  Google
+                </Button>
+                <Button variant="outline" type="button" onClick={() => handleOAuthSignIn("github")} disabled={isLoading}>
+                  <svg className="mr-2 h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
+                    <path
+                      fillRule="evenodd"
+                      d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                  GitHub
+                </Button>
+              </div>
+
+              <div className="mt-6 text-center">
+                <p className="text-sm text-muted-foreground">
+                  Don't have an account?{" "}
+                  <Link href="/signup" className="font-medium text-primary hover:underline">
+                    Sign up
+                  </Link>
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/apps/web/app/(auth)/signup/page.tsx b/apps/web/app/(auth)/signup/page.tsx
index 457015d..178ebf0 100644
--- a/apps/web/app/(auth)/signup/page.tsx
+++ b/apps/web/app/(auth)/signup/page.tsx
@@ -5,7 +5,13 @@ import { signIn } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 
-export default function SignUp() {
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Code, ArrowLeft } from "lucide-react";
+
+export default function SignUpPage() {
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
@@ -44,19 +50,18 @@ export default function SignUp() {
       const data = await response.json();
 
       if (!response.ok) {
-        setError(data.error || "An error occurred");
+        setError(data.error || "An error occurred during registration.");
         return;
       }
 
-      setSuccess("Account created successfully! You can now sign in.");
+      setSuccess("Account created successfully! Redirecting to sign in...");
 
-      // Optionally auto-sign in the user
       setTimeout(() => {
         router.push("/signin");
       }, 2000);
     } catch (error: unknown) {
       console.error("Sign up error:", error);
-      setError("An error occurred. Please try again.");
+      setError("An unexpected error occurred. Please try again.");
     } finally {
       setIsLoading(false);
     }
@@ -64,187 +69,171 @@ export default function SignUp() {
 
   const handleOAuthSignIn = async (provider: string) => {
     setIsLoading(true);
-    await signIn(provider, { callbackUrl: "/" });
+    await signIn(provider, { callbackUrl: "/dashboard" });
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
-      <div className="max-w-md w-full space-y-8">
-        <div>
-          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
-            Create your account
-          </h2>
-          <p className="mt-2 text-center text-sm text-gray-600">
-            Or{" "}
-            <Link
-              href="/signin"
-              className="font-medium text-indigo-600 hover:text-indigo-500"
-            >
-              sign in to your existing account
-            </Link>
-          </p>
-        </div>
-        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
-          {error && (
-            <div className="rounded-md bg-red-50 p-4">
-              <div className="flex">
-                <div className="ml-3">
-                  <h3 className="text-sm font-medium text-red-800">{error}</h3>
-                </div>
+    <div className="min-h-screen bg-background flex flex-col">
+      {/* Header */}
+      <header className="border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex h-16 items-center justify-between">
+            <Link href="/" className="flex items-center space-x-2">
+              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+                <Code className="h-5 w-5" />
               </div>
-            </div>
-          )}
-          {success && (
-            <div className="rounded-md bg-green-50 p-4">
-              <div className="flex">
-                <div className="ml-3">
-                  <h3 className="text-sm font-medium text-green-800">
-                    {success}
-                  </h3>
-                </div>
-              </div>
-            </div>
-          )}
-          <div className="rounded-md shadow-sm space-y-4">
-            <div>
-              <label htmlFor="name" className="sr-only">
-                Name
-              </label>
-              <input
-                id="name"
-                name="name"
-                type="text"
-                autoComplete="name"
-                required
-                className="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
-                placeholder="Full name"
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-              />
-            </div>
-            <div>
-              <label htmlFor="email-address" className="sr-only">
-                Email address
-              </label>
-              <input
-                id="email-address"
-                name="email"
-                type="email"
-                autoComplete="email"
-                required
-                className="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
-                placeholder="Email address"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-              />
-            </div>
-            <div>
-              <label htmlFor="password" className="sr-only">
-                Password
-              </label>
-              <input
-                id="password"
-                name="password"
-                type="password"
-                autoComplete="new-password"
-                required
-                className="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
-                placeholder="Password (min 8 characters)"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-              />
-            </div>
-            <div>
-              <label htmlFor="confirm-password" className="sr-only">
-                Confirm Password
-              </label>
-              <input
-                id="confirm-password"
-                name="confirm-password"
-                type="password"
-                autoComplete="new-password"
-                required
-                className="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
-                placeholder="Confirm password"
-                value={confirmPassword}
-                onChange={(e) => setConfirmPassword(e.target.value)}
-              />
-            </div>
+              <span className="text-xl font-bold text-foreground">Dev8.dev</span>
+            </Link>
+            <Button variant="ghost" size="sm" onClick={() => router.push("/")}>
+              <ArrowLeft className="mr-2 h-4 w-4" />
+              Back to Home
+            </Button>
           </div>
+        </div>
+      </header>
 
-          <div>
-            <button
-              type="submit"
-              disabled={isLoading}
-              className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
-            >
-              {isLoading ? "Creating account..." : "Create account"}
-            </button>
+      {/* Sign Up Form */}
+      <div className="flex-1 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+        <div className="w-full max-w-md space-y-8">
+          <div className="text-center">
+            <h2 className="text-3xl font-bold tracking-tight text-foreground">Create your account</h2>
+            <p className="mt-2 text-muted-foreground">Start coding in the cloud in seconds</p>
           </div>
 
-          <div className="mt-6">
-            <div className="relative">
-              <div className="absolute inset-0 flex items-center">
-                <div className="w-full border-t border-gray-300" />
-              </div>
-              <div className="relative flex justify-center text-sm">
-                <span className="px-2 bg-gray-50 text-gray-500">
-                  Or continue with
-                </span>
-              </div>
-            </div>
-
-            <div className="mt-6 grid grid-cols-2 gap-3">
-              <button
-                type="button"
-                onClick={() => handleOAuthSignIn("google")}
-                disabled={isLoading}
-                className="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50"
-              >
-                <svg className="w-5 h-5" viewBox="0 0 24 24">
-                  <path
-                    fill="currentColor"
-                    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="currentColor"
-                    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"
+          <Card className="border-border/50 bg-card/50 backdrop-blur">
+            <CardHeader className="space-y-1 text-center">
+              <CardTitle className="text-2xl">Sign Up</CardTitle>
+              <CardDescription>Create your Dev8.dev account to get started</CardDescription>
+            </CardHeader>
+            <CardContent>
+              {error && (
+                <div className="mb-4 rounded-md border border-destructive/50 bg-destructive/10 p-3">
+                  <p className="text-sm font-medium text-destructive">{error}</p>
+                </div>
+              )}
+              {success && (
+                <div className="mb-4 rounded-md border border-green-500/50 bg-green-500/10 p-3">
+                  <p className="text-sm font-medium text-green-600">{success}</p>
+                </div>
+              )}
+              <form onSubmit={handleSubmit} className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="name">Full Name</Label>
+                  <Input
+                    id="name"
+                    name="name"
+                    type="text"
+                    autoComplete="name"
+                    placeholder="Enter your full name"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    required
+                    disabled={isLoading}
                   />
-                  <path
-                    fill="currentColor"
-                    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"
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="email">Email</Label>
+                  <Input
+                    id="email"
+                    name="email"
+                    type="email"
+                    autoComplete="email"
+                    placeholder="john@example.com"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    required
+                    disabled={isLoading}
                   />
-                  <path
-                    fill="currentColor"
-                    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"
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="password">Password</Label>
+                  <Input
+                    id="password"
+                    name="password"
+                    type="password"
+                    autoComplete="new-password"
+                    placeholder="Create a strong password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    required
+                    disabled={isLoading}
                   />
-                </svg>
-                <span className="ml-2">Google</span>
-              </button>
-
-              <button
-                type="button"
-                onClick={() => handleOAuthSignIn("github")}
-                disabled={isLoading}
-                className="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50"
-              >
-                <svg
-                  className="w-5 h-5"
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z"
-                    clipRule="evenodd"
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="confirmPassword">Confirm Password</Label>
+                  <Input
+                    id="confirmPassword"
+                    name="confirmPassword"
+                    type="password"
+                    autoComplete="new-password"
+                    placeholder="Confirm your password"
+                    value={confirmPassword}
+                    onChange={(e) => setConfirmPassword(e.target.value)}
+                    required
+                    disabled={isLoading}
                   />
-                </svg>
-                <span className="ml-2">GitHub</span>
-              </button>
-            </div>
-          </div>
-        </form>
+                </div>
+
+                <Button type="submit" className="w-full" disabled={isLoading}>
+                  {isLoading ? "Creating Account..." : "Create Account"}
+                </Button>
+              </form>
+              
+              <div className="relative my-6">
+                <div className="absolute inset-0 flex items-center">
+                  <span className="w-full border-t border-border" />
+                </div>
+                <div className="relative flex justify-center text-xs uppercase">
+                  <span className="bg-card px-2 text-muted-foreground">Or continue with</span>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-3">
+                <Button variant="outline" type="button" onClick={() => handleOAuthSignIn("google")} disabled={isLoading}>
+                <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24">
+                    <path
+                      fill="currentColor"
+                      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="currentColor"
+                      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="currentColor"
+                      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="currentColor"
+                      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>
+                  Google
+                </Button>
+                <Button variant="outline" type="button" onClick={() => handleOAuthSignIn("github")} disabled={isLoading}>
+                <svg className="mr-2 h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
+                    <path
+                      fillRule="evenodd"
+                      d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                  GitHub
+                </Button>
+              </div>
+
+              <div className="mt-6 text-center">
+                <p className="text-sm text-muted-foreground">
+                  Already have an account?{" "}
+                  <Link href="/signin" className="font-medium text-primary hover:underline">
+                    Sign in
+                  </Link>
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/apps/web/app/components/theme-provider.tsx b/apps/web/app/components/theme-provider.tsx
new file mode 100644
index 0000000..55c2f6e
--- /dev/null
+++ b/apps/web/app/components/theme-provider.tsx
@@ -0,0 +1,11 @@
+'use client'
+
+import * as React from 'react'
+import {
+  ThemeProvider as NextThemesProvider,
+  type ThemeProviderProps,
+} from 'next-themes'
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}
diff --git a/apps/web/app/components/ui/accordion.tsx b/apps/web/app/components/ui/accordion.tsx
new file mode 100644
index 0000000..e538a33
--- /dev/null
+++ b/apps/web/app/components/ui/accordion.tsx
@@ -0,0 +1,66 @@
+'use client'
+
+import * as React from 'react'
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { ChevronDownIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn('border-b last:border-b-0', className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn('pt-0 pb-4', className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/apps/web/app/components/ui/alert-dialog.tsx b/apps/web/app/components/ui/alert-dialog.tsx
new file mode 100644
index 0000000..9704452
--- /dev/null
+++ b/apps/web/app/components/ui/alert-dialog.tsx
@@ -0,0 +1,157 @@
+'use client'
+
+import * as React from 'react'
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          'bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn('text-lg font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: 'outline' }), className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}
diff --git a/apps/web/app/components/ui/alert.tsx b/apps/web/app/components/ui/alert.tsx
new file mode 100644
index 0000000..e6751ab
--- /dev/null
+++ b/apps/web/app/components/ui/alert.tsx
@@ -0,0 +1,66 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+  {
+    variants: {
+      variant: {
+        default: 'bg-card text-card-foreground',
+        destructive:
+          'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        'col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/apps/web/app/components/ui/aspect-ratio.tsx b/apps/web/app/components/ui/aspect-ratio.tsx
new file mode 100644
index 0000000..40bb120
--- /dev/null
+++ b/apps/web/app/components/ui/aspect-ratio.tsx
@@ -0,0 +1,11 @@
+'use client'
+
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'
+
+function AspectRatio({
+  ...props
+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
+}
+
+export { AspectRatio }
diff --git a/apps/web/app/components/ui/avatar.tsx b/apps/web/app/components/ui/avatar.tsx
new file mode 100644
index 0000000..aa98465
--- /dev/null
+++ b/apps/web/app/components/ui/avatar.tsx
@@ -0,0 +1,53 @@
+'use client'
+
+import * as React from 'react'
+import * as AvatarPrimitive from '@radix-ui/react-avatar'
+
+import { cn } from '@/lib/utils'
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        'relative flex size-8 shrink-0 overflow-hidden rounded-full',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn('aspect-square size-full', className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        'bg-muted flex size-full items-center justify-center rounded-full',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/apps/web/app/components/ui/badge.tsx b/apps/web/app/components/ui/badge.tsx
new file mode 100644
index 0000000..fc4126b
--- /dev/null
+++ b/apps/web/app/components/ui/badge.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const badgeVariants = cva(
+  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+        destructive:
+          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'span'> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'span'
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/apps/web/app/components/ui/breadcrumb.tsx b/apps/web/app/components/ui/breadcrumb.tsx
new file mode 100644
index 0000000..1750ff2
--- /dev/null
+++ b/apps/web/app/components/ui/breadcrumb.tsx
@@ -0,0 +1,109 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { ChevronRight, MoreHorizontal } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn('inline-flex items-center gap-1.5', className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<'a'> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot : 'a'
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn('hover:text-foreground transition-colors', className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn('text-foreground font-normal', className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn('[&>svg]:size-3.5', className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn('flex size-9 items-center justify-center', className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}
diff --git a/apps/web/app/components/ui/button.tsx b/apps/web/app/components/ui/button.tsx
new file mode 100644
index 0000000..815443b
--- /dev/null
+++ b/apps/web/app/components/ui/button.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+        ghost:
+          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : 'button'
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
diff --git a/apps/web/app/components/ui/calendar.tsx b/apps/web/app/components/ui/calendar.tsx
new file mode 100644
index 0000000..5c42b91
--- /dev/null
+++ b/apps/web/app/components/ui/calendar.tsx
@@ -0,0 +1,213 @@
+'use client'
+
+import * as React from 'react'
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from 'lucide-react'
+import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker'
+
+import { cn } from '@/lib/utils'
+import { Button, buttonVariants } from '@/components/ui/button'
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = 'label',
+  buttonVariant = 'ghost',
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>['variant']
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        'bg-background group/calendar p-3 [--cell-size: var(--spacing-8);] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className,
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString('default', { month: 'short' }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn('w-fit', defaultClassNames.root),
+        months: cn(
+          'flex gap-4 flex-col md:flex-row relative',
+          defaultClassNames.months,
+        ),
+        month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
+        nav: cn(
+          'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between',
+          defaultClassNames.nav,
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
+          defaultClassNames.button_previous,
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
+          defaultClassNames.button_next,
+        ),
+        month_caption: cn(
+          'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)',
+          defaultClassNames.month_caption,
+        ),
+        dropdowns: cn(
+          'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5',
+          defaultClassNames.dropdowns,
+        ),
+        dropdown_root: cn(
+          'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md',
+          defaultClassNames.dropdown_root,
+        ),
+        dropdown: cn(
+          'absolute bg-popover inset-0 opacity-0',
+          defaultClassNames.dropdown,
+        ),
+        caption_label: cn(
+          'select-none font-medium',
+          captionLayout === 'label'
+            ? 'text-sm'
+            : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5',
+          defaultClassNames.caption_label,
+        ),
+        table: 'w-full border-collapse',
+        weekdays: cn('flex', defaultClassNames.weekdays),
+        weekday: cn(
+          'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none',
+          defaultClassNames.weekday,
+        ),
+        week: cn('flex w-full mt-2', defaultClassNames.week),
+        week_number_header: cn(
+          'select-none w-(--cell-size)',
+          defaultClassNames.week_number_header,
+        ),
+        week_number: cn(
+          'text-[0.8rem] select-none text-muted-foreground',
+          defaultClassNames.week_number,
+        ),
+        day: cn(
+          'relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none',
+          defaultClassNames.day,
+        ),
+        range_start: cn(
+          'rounded-l-md bg-accent',
+          defaultClassNames.range_start,
+        ),
+        range_middle: cn('rounded-none', defaultClassNames.range_middle),
+        range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
+        today: cn(
+          'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none',
+          defaultClassNames.today,
+        ),
+        outside: cn(
+          'text-muted-foreground aria-selected:text-muted-foreground',
+          defaultClassNames.outside,
+        ),
+        disabled: cn(
+          'text-muted-foreground opacity-50',
+          defaultClassNames.disabled,
+        ),
+        hidden: cn('invisible', defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === 'left') {
+            return (
+              <ChevronLeftIcon className={cn('size-4', className)} {...props} />
+            )
+          }
+
+          if (orientation === 'right') {
+            return (
+              <ChevronRightIcon
+                className={cn('size-4', className)}
+                {...props}
+              />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn('size-4', className)} {...props} />
+          )
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70',
+        defaultClassNames.day,
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }
diff --git a/apps/web/app/components/ui/card.tsx b/apps/web/app/components/ui/card.tsx
new file mode 100644
index 0000000..b1cee30
--- /dev/null
+++ b/apps/web/app/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn('leading-none font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn('px-6', className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
diff --git a/apps/web/app/components/ui/carousel.tsx b/apps/web/app/components/ui/carousel.tsx
new file mode 100644
index 0000000..d4a768e
--- /dev/null
+++ b/apps/web/app/components/ui/carousel.tsx
@@ -0,0 +1,241 @@
+'use client'
+
+import * as React from 'react'
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from 'embla-carousel-react'
+import { ArrowLeft, ArrowRight } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: 'horizontal' | 'vertical'
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error('useCarousel must be used within a <Carousel />')
+  }
+
+  return context
+}
+
+function Carousel({
+  orientation = 'horizontal',
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & CarouselProps) {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === 'horizontal' ? 'x' : 'y',
+    },
+    plugins,
+  )
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+  const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+  const onSelect = React.useCallback((api: CarouselApi) => {
+    if (!api) return
+    setCanScrollPrev(api.canScrollPrev())
+    setCanScrollNext(api.canScrollNext())
+  }, [])
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev()
+  }, [api])
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext()
+  }, [api])
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault()
+        scrollPrev()
+      } else if (event.key === 'ArrowRight') {
+        event.preventDefault()
+        scrollNext()
+      }
+    },
+    [scrollPrev, scrollNext],
+  )
+
+  React.useEffect(() => {
+    if (!api || !setApi) return
+    setApi(api)
+  }, [api, setApi])
+
+  React.useEffect(() => {
+    if (!api) return
+    onSelect(api)
+    api.on('reInit', onSelect)
+    api.on('select', onSelect)
+
+    return () => {
+      api?.off('select', onSelect)
+    }
+  }, [api, onSelect])
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation:
+          orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}
+    >
+      <div
+        onKeyDownCapture={handleKeyDown}
+        className={cn('relative', className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  )
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<'div'>) {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div
+      ref={carouselRef}
+      className="overflow-hidden"
+      data-slot="carousel-content"
+    >
+      <div
+        className={cn(
+          'flex',
+          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn(
+        'min-w-0 shrink-0 grow-0 basis-full',
+        orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CarouselPrevious({
+  className,
+  variant = 'outline',
+  size = 'icon',
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-previous"
+      variant={variant}
+      size={size}
+      className={cn(
+        'absolute size-8 rounded-full',
+        orientation === 'horizontal'
+          ? 'top-1/2 -left-12 -translate-y-1/2'
+          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+        className,
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+}
+
+function CarouselNext({
+  className,
+  variant = 'outline',
+  size = 'icon',
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-next"
+      variant={variant}
+      size={size}
+      className={cn(
+        'absolute size-8 rounded-full',
+        orientation === 'horizontal'
+          ? 'top-1/2 -right-12 -translate-y-1/2'
+          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+        className,
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+}
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}
diff --git a/apps/web/app/components/ui/chart.tsx b/apps/web/app/components/ui/chart.tsx
new file mode 100644
index 0000000..63b2240
--- /dev/null
+++ b/apps/web/app/components/ui/chart.tsx
@@ -0,0 +1,353 @@
+'use client'
+
+import * as React from 'react'
+import * as RechartsPrimitive from 'recharts'
+
+import { cn } from '@/lib/utils'
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: '', dark: '.dark' } as const
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode
+    icon?: React.ComponentType
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  )
+}
+
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error('useChart must be used within a <ChartContainer />')
+  }
+
+  return context
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  ...props
+}: React.ComponentProps<'div'> & {
+  config: ChartConfig
+  children: React.ComponentProps<
+    typeof RechartsPrimitive.ResponsiveContainer
+  >['children']
+}) {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot="chart"
+        data-chart={chartId}
+        className={cn(
+          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          className,
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  )
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme || config.color,
+  )
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+  .join('\n')}
+}
+`,
+          )
+          .join('\n'),
+      }}
+    />
+  )
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = 'dot',
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+  React.ComponentProps<'div'> & {
+    hideLabel?: boolean
+    hideIndicator?: boolean
+    indicator?: 'line' | 'dot' | 'dashed'
+    nameKey?: string
+    labelKey?: string
+  }) {
+  const { config } = useChart()
+
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null
+    }
+
+    const [item] = payload
+    const key = `${labelKey || item?.dataKey || item?.name || 'value'}`
+    const itemConfig = getPayloadConfigFromPayload(config, item, key)
+    const value =
+      !labelKey && typeof label === 'string'
+        ? config[label as keyof typeof config]?.label || label
+        : itemConfig?.label
+
+    if (labelFormatter) {
+      return (
+        <div className={cn('font-medium', labelClassName)}>
+          {labelFormatter(value, payload)}
+        </div>
+      )
+    }
+
+    if (!value) {
+      return null
+    }
+
+    return <div className={cn('font-medium', labelClassName)}>{value}</div>
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey,
+  ])
+
+  if (!active || !payload?.length) {
+    return null
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== 'dot'
+
+  return (
+    <div
+      className={cn(
+        'border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl',
+        className,
+      )}
+    >
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload.map((item, index) => {
+          const key = `${nameKey || item.name || item.dataKey || 'value'}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+          const indicatorColor = color || item.payload.fill || item.color
+
+          return (
+            <div
+              key={item.dataKey}
+              className={cn(
+                '[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5',
+                indicator === 'dot' && 'items-center',
+              )}
+            >
+              {formatter && item?.value !== undefined && item.name ? (
+                formatter(item.value, item.name, item, index, item.payload)
+              ) : (
+                <>
+                  {itemConfig?.icon ? (
+                    <itemConfig.icon />
+                  ) : (
+                    !hideIndicator && (
+                      <div
+                        className={cn(
+                          'shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)',
+                          {
+                            'h-2.5 w-2.5': indicator === 'dot',
+                            'w-1': indicator === 'line',
+                            'w-0 border-[1.5px] border-dashed bg-transparent':
+                              indicator === 'dashed',
+                            'my-0.5': nestLabel && indicator === 'dashed',
+                          },
+                        )}
+                        style={
+                          {
+                            '--color-bg': indicatorColor,
+                            '--color-border': indicatorColor,
+                          } as React.CSSProperties
+                        }
+                      />
+                    )
+                  )}
+                  <div
+                    className={cn(
+                      'flex flex-1 justify-between leading-none',
+                      nestLabel ? 'items-end' : 'items-center',
+                    )}
+                  >
+                    <div className="grid gap-1.5">
+                      {nestLabel ? tooltipLabel : null}
+                      <span className="text-muted-foreground">
+                        {itemConfig?.label || item.name}
+                      </span>
+                    </div>
+                    {item.value && (
+                      <span className="text-foreground font-mono font-medium tabular-nums">
+                        {item.value.toLocaleString()}
+                      </span>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+const ChartLegend = RechartsPrimitive.Legend
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = 'bottom',
+  nameKey,
+}: React.ComponentProps<'div'> &
+  Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
+    hideIcon?: boolean
+    nameKey?: string
+  }) {
+  const { config } = useChart()
+
+  if (!payload?.length) {
+    return null
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-center gap-4',
+        verticalAlign === 'top' ? 'pb-3' : 'pt-3',
+        className,
+      )}
+    >
+      {payload.map((item) => {
+        const key = `${nameKey || item.dataKey || 'value'}`
+        const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+        return (
+          <div
+            key={item.value}
+            className={cn(
+              '[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3',
+            )}
+          >
+            {itemConfig?.icon && !hideIcon ? (
+              <itemConfig.icon />
+            ) : (
+              <div
+                className="h-2 w-2 shrink-0 rounded-[2px]"
+                style={{
+                  backgroundColor: item.color,
+                }}
+              />
+            )}
+            {itemConfig?.label}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string,
+) {
+  if (typeof payload !== 'object' || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    'payload' in payload &&
+    typeof payload.payload === 'object' &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+
+  let configLabelKey: string = key
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === 'string'
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config]
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+}
diff --git a/apps/web/app/components/ui/checkbox.tsx b/apps/web/app/components/ui/checkbox.tsx
new file mode 100644
index 0000000..37d340f
--- /dev/null
+++ b/apps/web/app/components/ui/checkbox.tsx
@@ -0,0 +1,32 @@
+'use client'
+
+import * as React from 'react'
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import { CheckIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }
diff --git a/apps/web/app/components/ui/collapsible.tsx b/apps/web/app/components/ui/collapsible.tsx
new file mode 100644
index 0000000..3cbdff6
--- /dev/null
+++ b/apps/web/app/components/ui/collapsible.tsx
@@ -0,0 +1,33 @@
+'use client'
+
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/apps/web/app/components/ui/command.tsx b/apps/web/app/components/ui/command.tsx
new file mode 100644
index 0000000..4833ca8
--- /dev/null
+++ b/apps/web/app/components/ui/command.tsx
@@ -0,0 +1,184 @@
+'use client'
+
+import * as React from 'react'
+import { Command as CommandPrimitive } from 'cmdk'
+import { SearchIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = 'Command Palette',
+  description = 'Search for a command to run...',
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn('overflow-hidden p-0', className)}
+        showCloseButton={showCloseButton}
+      >
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        'max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn('bg-border -mx-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_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=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
diff --git a/apps/web/app/components/ui/context-menu.tsx b/apps/web/app/components/ui/context-menu.tsx
new file mode 100644
index 0000000..986b478
--- /dev/null
+++ b/apps/web/app/components/ui/context-menu.tsx
@@ -0,0 +1,252 @@
+'use client'
+
+import * as React from 'react'
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu'
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function ContextMenu({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
+}
+
+function ContextMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return (
+    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
+  )
+}
+
+function ContextMenuGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return (
+    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+  )
+}
+
+function ContextMenuPortal({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return (
+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+  )
+}
+
+function ContextMenuSub({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return (
+    <ContextMenuPrimitive.RadioGroup
+      data-slot="context-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      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",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </ContextMenuPrimitive.SubTrigger>
+  )
+}
+
+function ContextMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.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}
+    />
+  )
+}
+
+function ContextMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.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}
+      />
+    </ContextMenuPrimitive.Portal>
+  )
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: 'default' | 'destructive'
+}) {
+  return (
+    <ContextMenuPrimitive.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
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+  return (
+    <ContextMenuPrimitive.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">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  )
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+  return (
+    <ContextMenuPrimitive.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">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  )
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.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
+}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}
diff --git a/apps/web/app/components/ui/dialog.tsx b/apps/web/app/components/ui/dialog.tsx
new file mode 100644
index 0000000..243fb19
--- /dev/null
+++ b/apps/web/app/components/ui/dialog.tsx
@@ -0,0 +1,143 @@
+'use client'
+
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { XIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          'bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn('text-lg leading-none font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/apps/web/app/components/ui/drawer.tsx b/apps/web/app/components/ui/drawer.tsx
new file mode 100644
index 0000000..307bdce
--- /dev/null
+++ b/apps/web/app/components/ui/drawer.tsx
@@ -0,0 +1,135 @@
+'use client'
+
+import * as React from 'react'
+import { Drawer as DrawerPrimitive } from 'vaul'
+
+import { cn } from '@/lib/utils'
+
+function Drawer({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
+}
+
+function DrawerTrigger({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+}
+
+function DrawerPortal({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
+}
+
+function DrawerClose({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        className={cn(
+          'group/drawer-content bg-background fixed z-50 flex h-auto flex-col',
+          'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b',
+          'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t',
+          'data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm',
+          'data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm',
+          className,
+        )}
+        {...props}
+      >
+        <div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  )
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        'flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn('text-foreground font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}
diff --git a/apps/web/app/components/ui/dropdown-menu.tsx b/apps/web/app/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..c14a37d
--- /dev/null
+++ b/apps/web/app/components/ui/dropdown-menu.tsx
@@ -0,0 +1,257 @@
+'use client'
+
+import * as React from 'react'
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        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-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: 'default' | 'destructive'
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-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 DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-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">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-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">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      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',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-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-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}
diff --git a/apps/web/app/components/ui/form.tsx b/apps/web/app/components/ui/form.tsx
new file mode 100644
index 0000000..6233f94
--- /dev/null
+++ b/apps/web/app/components/ui/form.tsx
@@ -0,0 +1,167 @@
+'use client'
+
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { Slot } from '@radix-ui/react-slot'
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from 'react-hook-form'
+
+import { cn } from '@/lib/utils'
+import { Label } from '@/components/ui/label'
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue,
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState } = useFormContext()
+  const formState = useFormState({ name: fieldContext.name })
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error('useFormField should be used within <FormField>')
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue,
+)
+
+function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn('grid gap-2', className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  )
+}
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn('data-[error=true]:text-destructive', className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<'p'>) {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? '') : props.children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn('text-destructive text-sm', className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
diff --git a/apps/web/app/components/ui/hover-card.tsx b/apps/web/app/components/ui/hover-card.tsx
new file mode 100644
index 0000000..55d6f76
--- /dev/null
+++ b/apps/web/app/components/ui/hover-card.tsx
@@ -0,0 +1,44 @@
+'use client'
+
+import * as React from 'react'
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
+
+import { cn } from '@/lib/utils'
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  )
+}
+
+function HoverCardContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        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 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+          className,
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }
diff --git a/apps/web/app/components/ui/input-otp.tsx b/apps/web/app/components/ui/input-otp.tsx
new file mode 100644
index 0000000..3f6c477
--- /dev/null
+++ b/apps/web/app/components/ui/input-otp.tsx
@@ -0,0 +1,77 @@
+'use client'
+
+import * as React from 'react'
+import { OTPInput, OTPInputContext } from 'input-otp'
+import { MinusIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string
+}) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn(
+        'flex items-center gap-2 has-disabled:opacity-50',
+        containerClassName,
+      )}
+      className={cn('disabled:cursor-not-allowed', className)}
+      {...props}
+    />
+  )
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn('flex items-center', className)}
+      {...props}
+    />
+  )
+}
+
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}: React.ComponentProps<'div'> & {
+  index: number
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(
+        'data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]',
+        className,
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div data-slot="input-otp-separator" role="separator" {...props}>
+      <MinusIcon />
+    </div>
+  )
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
diff --git a/apps/web/app/components/ui/input.tsx b/apps/web/app/components/ui/input.tsx
new file mode 100644
index 0000000..75fee7d
--- /dev/null
+++ b/apps/web/app/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
diff --git a/apps/web/app/components/ui/label.tsx b/apps/web/app/components/ui/label.tsx
new file mode 100644
index 0000000..5d66da2
--- /dev/null
+++ b/apps/web/app/components/ui/label.tsx
@@ -0,0 +1,24 @@
+'use client'
+
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+
+import { cn } from '@/lib/utils'
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
diff --git a/apps/web/app/components/ui/menubar.tsx b/apps/web/app/components/ui/menubar.tsx
new file mode 100644
index 0000000..791360c
--- /dev/null
+++ b/apps/web/app/components/ui/menubar.tsx
@@ -0,0 +1,276 @@
+'use client'
+
+import * as React from 'react'
+import * as MenubarPrimitive from '@radix-ui/react-menubar'
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Menubar({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
+  return (
+    <MenubarPrimitive.Root
+      data-slot="menubar"
+      className={cn(
+        'bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarMenu({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
+}
+
+function MenubarGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
+}
+
+function MenubarPortal({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
+}
+
+function MenubarRadioGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+  return (
+    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
+  )
+}
+
+function MenubarTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
+  return (
+    <MenubarPrimitive.Trigger
+      data-slot="menubar-trigger"
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarContent({
+  className,
+  align = 'start',
+  alignOffset = -4,
+  sideOffset = 8,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
+  return (
+    <MenubarPortal>
+      <MenubarPrimitive.Content
+        data-slot="menubar-content"
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in 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-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md',
+          className,
+        )}
+        {...props}
+      />
+    </MenubarPortal>
+  )
+}
+
+function MenubarItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
+  inset?: boolean
+  variant?: 'default' | 'destructive'
+}) {
+  return (
+    <MenubarPrimitive.Item
+      data-slot="menubar-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 MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
+  return (
+    <MenubarPrimitive.CheckboxItem
+      data-slot="menubar-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs 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">
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.CheckboxItem>
+  )
+}
+
+function MenubarRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
+  return (
+    <MenubarPrimitive.RadioItem
+      data-slot="menubar-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs 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">
+        <MenubarPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.RadioItem>
+  )
+}
+
+function MenubarLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.Label
+      data-slot="menubar-label"
+      data-inset={inset}
+      className={cn(
+        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
+  return (
+    <MenubarPrimitive.Separator
+      data-slot="menubar-separator"
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function MenubarShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="menubar-shortcut"
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSub({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
+}
+
+function MenubarSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.SubTrigger
+      data-slot="menubar-sub-trigger"
+      data-inset={inset}
+      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-none select-none data-[inset]:pl-8',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto h-4 w-4" />
+    </MenubarPrimitive.SubTrigger>
+  )
+}
+
+function MenubarSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
+  return (
+    <MenubarPrimitive.SubContent
+      data-slot="menubar-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-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Menubar,
+  MenubarPortal,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarGroup,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarItem,
+  MenubarShortcut,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+}
diff --git a/apps/web/app/components/ui/navigation-menu.tsx b/apps/web/app/components/ui/navigation-menu.tsx
new file mode 100644
index 0000000..342e406
--- /dev/null
+++ b/apps/web/app/components/ui/navigation-menu.tsx
@@ -0,0 +1,168 @@
+import * as React from 'react'
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'
+import { cva } from 'class-variance-authority'
+import { ChevronDownIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function NavigationMenu({
+  className,
+  children,
+  viewport = true,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+  viewport?: boolean
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      data-viewport={viewport}
+      className={cn(
+        'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  )
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn(
+        'group flex flex-1 list-none items-center justify-center gap-1',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn('relative', className)}
+      {...props}
+    />
+  )
+}
+
+const navigationMenuTriggerStyle = cva(
+  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1',
+)
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), 'group', className)}
+      {...props}
+    >
+      {children}{' '}
+      <ChevronDownIcon
+        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  )
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto',
+        'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+  return (
+    <div
+      className={cn(
+        'absolute top-full left-0 isolate z-50 flex justify-center',
+      )}
+    >
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]',
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
+        className,
+      )}
+      {...props}
+    >
+      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+    </NavigationMenuPrimitive.Indicator>
+  )
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
+}
diff --git a/apps/web/app/components/ui/pagination.tsx b/apps/web/app/components/ui/pagination.tsx
new file mode 100644
index 0000000..ce8f25d
--- /dev/null
+++ b/apps/web/app/components/ui/pagination.tsx
@@ -0,0 +1,127 @@
+import * as React from 'react'
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+} from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Button, buttonVariants } from '@/components/ui/button'
+
+function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn('mx-auto flex w-full justify-center', className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<'ul'>) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn('flex flex-row items-center gap-1', className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<'li'>) {
+  return <li data-slot="pagination-item" {...props} />
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<React.ComponentProps<typeof Button>, 'size'> &
+  React.ComponentProps<'a'>
+
+function PaginationLink({
+  className,
+  isActive,
+  size = 'icon',
+  ...props
+}: PaginationLinkProps) {
+  return (
+    <a
+      aria-current={isActive ? 'page' : undefined}
+      data-slot="pagination-link"
+      data-active={isActive}
+      className={cn(
+        buttonVariants({
+          variant: isActive ? 'outline' : 'ghost',
+          size,
+        }),
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function PaginationPrevious({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn('gap-1 px-2.5 sm:pl-2.5', className)}
+      {...props}
+    >
+      <ChevronLeftIcon />
+      <span className="hidden sm:block">Previous</span>
+    </PaginationLink>
+  )
+}
+
+function PaginationNext({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn('gap-1 px-2.5 sm:pr-2.5', className)}
+      {...props}
+    >
+      <span className="hidden sm:block">Next</span>
+      <ChevronRightIcon />
+    </PaginationLink>
+  )
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn('flex size-9 items-center justify-center', className)}
+      {...props}
+    >
+      <MoreHorizontalIcon className="size-4" />
+      <span className="sr-only">More pages</span>
+    </span>
+  )
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+}
diff --git a/apps/web/app/components/ui/popover.tsx b/apps/web/app/components/ui/popover.tsx
new file mode 100644
index 0000000..b4fc827
--- /dev/null
+++ b/apps/web/app/components/ui/popover.tsx
@@ -0,0 +1,48 @@
+'use client'
+
+import * as React from 'react'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+
+import { cn } from '@/lib/utils'
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        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 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
diff --git a/apps/web/app/components/ui/progress.tsx b/apps/web/app/components/ui/progress.tsx
new file mode 100644
index 0000000..ab38305
--- /dev/null
+++ b/apps/web/app/components/ui/progress.tsx
@@ -0,0 +1,31 @@
+'use client'
+
+import * as React from 'react'
+import * as ProgressPrimitive from '@radix-ui/react-progress'
+
+import { cn } from '@/lib/utils'
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
+        className,
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="bg-primary h-full w-full flex-1 transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }
diff --git a/apps/web/app/components/ui/radio-group.tsx b/apps/web/app/components/ui/radio-group.tsx
new file mode 100644
index 0000000..e9af867
--- /dev/null
+++ b/apps/web/app/components/ui/radio-group.tsx
@@ -0,0 +1,45 @@
+'use client'
+
+import * as React from 'react'
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
+import { CircleIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn('grid gap-3', className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }
diff --git a/apps/web/app/components/ui/resizable.tsx b/apps/web/app/components/ui/resizable.tsx
new file mode 100644
index 0000000..5c2f91d
--- /dev/null
+++ b/apps/web/app/components/ui/resizable.tsx
@@ -0,0 +1,56 @@
+'use client'
+
+import * as React from 'react'
+import { GripVerticalIcon } from 'lucide-react'
+import * as ResizablePrimitive from 'react-resizable-panels'
+
+import { cn } from '@/lib/utils'
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+  return (
+    <ResizablePrimitive.PanelGroup
+      data-slot="resizable-panel-group"
+      className={cn(
+        'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ResizablePanel({
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) {
+  return (
+    <ResizablePrimitive.PanelResizeHandle
+      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-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+        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.PanelResizeHandle>
+  )
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
diff --git a/apps/web/app/components/ui/scroll-area.tsx b/apps/web/app/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..dc98eb0
--- /dev/null
+++ b/apps/web/app/components/ui/scroll-area.tsx
@@ -0,0 +1,58 @@
+'use client'
+
+import * as React from 'react'
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
+
+import { cn } from '@/lib/utils'
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn('relative', className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = 'vertical',
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        'flex touch-none p-px transition-colors select-none',
+        orientation === 'vertical' &&
+          'h-full w-2.5 border-l border-l-transparent',
+        orientation === 'horizontal' &&
+          'h-2.5 flex-col border-t border-t-transparent',
+        className,
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }
diff --git a/apps/web/app/components/ui/select.tsx b/apps/web/app/components/ui/select.tsx
new file mode 100644
index 0000000..5db0bca
--- /dev/null
+++ b/apps/web/app/components/ui/select.tsx
@@ -0,0 +1,185 @@
+'use client'
+
+import * as React from 'react'
+import * as SelectPrimitive from '@radix-ui/react-select'
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = 'default',
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: 'sm' | 'default'
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = 'popper',
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+          position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          className,
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            'p-1',
+            position === 'popper' &&
+              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1',
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 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 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        'flex cursor-default items-center justify-center py-1',
+        className,
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        'flex cursor-default items-center justify-center py-1',
+        className,
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
diff --git a/apps/web/app/components/ui/separator.tsx b/apps/web/app/components/ui/separator.tsx
new file mode 100644
index 0000000..f43aaf5
--- /dev/null
+++ b/apps/web/app/components/ui/separator.tsx
@@ -0,0 +1,28 @@
+'use client'
+
+import * as React from 'react'
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+
+import { cn } from '@/lib/utils'
+
+function Separator({
+  className,
+  orientation = 'horizontal',
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
diff --git a/apps/web/app/components/ui/sheet.tsx b/apps/web/app/components/ui/sheet.tsx
new file mode 100644
index 0000000..51041fa
--- /dev/null
+++ b/apps/web/app/components/ui/sheet.tsx
@@ -0,0 +1,139 @@
+'use client'
+
+import * as React from 'react'
+import * as SheetPrimitive from '@radix-ui/react-dialog'
+import { XIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = 'right',
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: 'top' | 'right' | 'bottom' | 'left'
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+          side === 'right' &&
+            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+          side === 'left' &&
+            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+          side === 'top' &&
+            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+          side === 'bottom' &&
+            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn('flex flex-col gap-1.5 p-4', className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn('text-foreground font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
diff --git a/apps/web/app/components/ui/sidebar.tsx b/apps/web/app/components/ui/sidebar.tsx
new file mode 100644
index 0000000..ee74343
--- /dev/null
+++ b/apps/web/app/components/ui/sidebar.tsx
@@ -0,0 +1,726 @@
+'use client'
+
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, VariantProps } from 'class-variance-authority'
+import { PanelLeftIcon } from 'lucide-react'
+
+import { useIsMobile } from '@/hooks/use-mobile'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Separator } from '@/components/ui/separator'
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet'
+import { Skeleton } from '@/components/ui/skeleton'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+
+const SIDEBAR_COOKIE_NAME = 'sidebar_state'
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = '16rem'
+const SIDEBAR_WIDTH_MOBILE = '18rem'
+const SIDEBAR_WIDTH_ICON = '3rem'
+const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
+
+type SidebarContextProps = {
+  state: 'expanded' | 'collapsed'
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error('useSidebar must be used within a SidebarProvider.')
+  }
+
+  return context
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & {
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}) {
+  const isMobile = useIsMobile()
+  const [openMobile, setOpenMobile] = React.useState(false)
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen)
+  const open = openProp ?? _open
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === 'function' ? value(open) : value
+      if (setOpenProp) {
+        setOpenProp(openState)
+      } else {
+        _setOpen(openState)
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+    },
+    [setOpenProp, open],
+  )
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
+  }, [isMobile, setOpen, setOpenMobile])
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault()
+        toggleSidebar()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [toggleSidebar])
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? 'expanded' : 'collapsed'
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
+  )
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <TooltipProvider delayDuration={0}>
+        <div
+          data-slot="sidebar-wrapper"
+          style={
+            {
+              '--sidebar-width': SIDEBAR_WIDTH,
+              '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+              ...style,
+            } as React.CSSProperties
+          }
+          className={cn(
+            'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </TooltipProvider>
+    </SidebarContext.Provider>
+  )
+}
+
+function Sidebar({
+  side = 'left',
+  variant = 'sidebar',
+  collapsible = 'offcanvas',
+  className,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & {
+  side?: 'left' | 'right'
+  variant?: 'sidebar' | 'floating' | 'inset'
+  collapsible?: 'offcanvas' | 'icon' | 'none'
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+  if (collapsible === 'none') {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          style={
+            {
+              '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  return (
+    <div
+      className="group peer text-sidebar-foreground hidden md:block"
+      data-state={state}
+      data-collapsible={state === 'collapsed' ? collapsible : ''}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+          'group-data-[collapsible=offcanvas]:w-0',
+          'group-data-[side=right]:rotate-180',
+          variant === 'floating' || variant === 'inset'
+            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        className={cn(
+          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
+          side === 'left'
+            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+          // Adjust the padding for floating and inset variants.
+          variant === 'floating' || variant === 'inset'
+            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+          className,
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon"
+      className={cn('size-7', className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
+        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+        'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        'bg-background relative flex w-full flex-1 flex-col',
+        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn('bg-background h-8 w-full shadow-none', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn('flex flex-col gap-2 p-2', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn('flex flex-col gap-2 p-2', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn('bg-sidebar-border mx-2 w-auto', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'div'> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'div'
+
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'button'
+
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        // Increases the hit area of the button on mobile.
+        'after:absolute after:-inset-2 md:after:hidden',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn('w-full text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn('flex w-full min-w-0 flex-col gap-1', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn('group/menu-item relative', className)}
+      {...props}
+    />
+  )
+}
+
+const sidebarMenuButtonVariants = cva(
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        outline:
+          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+      },
+      size: {
+        default: 'h-8 text-sm',
+        sm: 'h-7 text-xs',
+        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = 'default',
+  size = 'default',
+  tooltip,
+  className,
+  ...props
+}: React.ComponentProps<'button'> & {
+  asChild?: boolean
+  isActive?: boolean
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const Comp = asChild ? Slot : 'button'
+  const { isMobile, state } = useSidebar()
+
+  const button = (
+    <Comp
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+      {...props}
+    />
+  )
+
+  if (!tooltip) {
+    return button
+  }
+
+  if (typeof tooltip === 'string') {
+    tooltip = {
+      children: tooltip,
+    }
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== 'collapsed' || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  )
+}
+
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}: React.ComponentProps<'button'> & {
+  asChild?: boolean
+  showOnHover?: boolean
+}) {
+  const Comp = asChild ? Slot : 'button'
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        // Increases the hit area of the button on mobile.
+        'after:absolute after:-inset-2 md:after:hidden',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        showOnHover &&
+          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
+        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<'div'> & {
+  showIcon?: boolean
+}) {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  }, [])
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            '--skeleton-width': width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn('group/menu-sub-item relative', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubButton({
+  asChild = false,
+  size = 'md',
+  isActive = false,
+  className,
+  ...props
+}: React.ComponentProps<'a'> & {
+  asChild?: boolean
+  size?: 'sm' | 'md'
+  isActive?: boolean
+}) {
+  const Comp = asChild ? Slot : 'a'
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+        size === 'sm' && 'text-xs',
+        size === 'md' && 'text-sm',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}
diff --git a/apps/web/app/components/ui/skeleton.tsx b/apps/web/app/components/ui/skeleton.tsx
new file mode 100644
index 0000000..e3beb90
--- /dev/null
+++ b/apps/web/app/components/ui/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from '@/lib/utils'
+
+function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn('bg-accent animate-pulse rounded-md', className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/apps/web/app/components/ui/slider.tsx b/apps/web/app/components/ui/slider.tsx
new file mode 100644
index 0000000..60087c6
--- /dev/null
+++ b/apps/web/app/components/ui/slider.tsx
@@ -0,0 +1,63 @@
+'use client'
+
+import * as React from 'react'
+import * as SliderPrimitive from '@radix-ui/react-slider'
+
+import { cn } from '@/lib/utils'
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max],
+  )
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
+        className,
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className={cn(
+          'bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5',
+        )}
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className={cn(
+            'bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full',
+          )}
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }
diff --git a/apps/web/app/components/ui/sonner.tsx b/apps/web/app/components/ui/sonner.tsx
new file mode 100644
index 0000000..0626caf
--- /dev/null
+++ b/apps/web/app/components/ui/sonner.tsx
@@ -0,0 +1,25 @@
+'use client'
+
+import { useTheme } from 'next-themes'
+import { Toaster as Sonner, ToasterProps } from 'sonner'
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = 'system' } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps['theme']}
+      className="toaster group"
+      style={
+        {
+          '--normal-bg': 'var(--popover)',
+          '--normal-text': 'var(--popover-foreground)',
+          '--normal-border': 'var(--border)',
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
diff --git a/apps/web/app/components/ui/switch.tsx b/apps/web/app/components/ui/switch.tsx
new file mode 100644
index 0000000..f4741e9
--- /dev/null
+++ b/apps/web/app/components/ui/switch.tsx
@@ -0,0 +1,31 @@
+'use client'
+
+import * as React from 'react'
+import * as SwitchPrimitive from '@radix-ui/react-switch'
+
+import { cn } from '@/lib/utils'
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0',
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }
diff --git a/apps/web/app/components/ui/table.tsx b/apps/web/app/components/ui/table.tsx
new file mode 100644
index 0000000..fcdd10c
--- /dev/null
+++ b/apps/web/app/components/ui/table.tsx
@@ -0,0 +1,116 @@
+'use client'
+
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Table({ className, ...props }: React.ComponentProps<'table'>) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn('w-full caption-bottom text-sm', className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn('[&_tr]:border-b', className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn('[&_tr:last-child]:border-0', className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<'caption'>) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn('text-muted-foreground mt-4 text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
diff --git a/apps/web/app/components/ui/tabs.tsx b/apps/web/app/components/ui/tabs.tsx
new file mode 100644
index 0000000..ff67104
--- /dev/null
+++ b/apps/web/app/components/ui/tabs.tsx
@@ -0,0 +1,66 @@
+'use client'
+
+import * as React from 'react'
+import * as TabsPrimitive from '@radix-ui/react-tabs'
+
+import { cn } from '@/lib/utils'
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn('flex flex-col gap-2', className)}
+      {...props}
+    />
+  )
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn('flex-1 outline-none', className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/apps/web/app/components/ui/textarea.tsx b/apps/web/app/components/ui/textarea.tsx
new file mode 100644
index 0000000..3809775
--- /dev/null
+++ b/apps/web/app/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
diff --git a/apps/web/app/components/ui/toast.tsx b/apps/web/app/components/ui/toast.tsx
new file mode 100644
index 0000000..40eedf5
--- /dev/null
+++ b/apps/web/app/components/ui/toast.tsx
@@ -0,0 +1,129 @@
+'use client'
+
+import * as React from 'react'
+import * as ToastPrimitives from '@radix-ui/react-toast'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { X } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
+      className,
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+  {
+    variants: {
+      variant: {
+        default: 'border bg-background text-foreground',
+        destructive:
+          'destructive group border-destructive bg-destructive text-destructive-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
+      className,
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
+      className,
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn('text-sm font-semibold', className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn('text-sm opacity-90', className)}
+    {...props}
+  />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+}
diff --git a/apps/web/app/components/ui/toaster.tsx b/apps/web/app/components/ui/toaster.tsx
new file mode 100644
index 0000000..3b91885
--- /dev/null
+++ b/apps/web/app/components/ui/toaster.tsx
@@ -0,0 +1,35 @@
+'use client'
+
+import { useToast } from '@/hooks/use-toast'
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from '@/components/ui/toast'
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}
diff --git a/apps/web/app/components/ui/toggle-group.tsx b/apps/web/app/components/ui/toggle-group.tsx
new file mode 100644
index 0000000..0ab9971
--- /dev/null
+++ b/apps/web/app/components/ui/toggle-group.tsx
@@ -0,0 +1,73 @@
+'use client'
+
+import * as React from 'react'
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'
+import { type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+import { toggleVariants } from '@/components/ui/toggle'
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: 'default',
+  variant: 'default',
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      className={cn(
+        'group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs',
+        className,
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }
diff --git a/apps/web/app/components/ui/toggle.tsx b/apps/web/app/components/ui/toggle.tsx
new file mode 100644
index 0000000..ad6b286
--- /dev/null
+++ b/apps/web/app/components/ui/toggle.tsx
@@ -0,0 +1,47 @@
+'use client'
+
+import * as React from 'react'
+import * as TogglePrimitive from '@radix-ui/react-toggle'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline:
+          'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        default: 'h-9 px-2 min-w-9',
+        sm: 'h-8 px-1.5 min-w-8',
+        lg: 'h-10 px-2.5 min-w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }
diff --git a/apps/web/app/components/ui/tooltip.tsx b/apps/web/app/components/ui/tooltip.tsx
new file mode 100644
index 0000000..72078ba
--- /dev/null
+++ b/apps/web/app/components/ui/tooltip.tsx
@@ -0,0 +1,61 @@
+'use client'
+
+import * as React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+
+import { cn } from '@/lib/utils'
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/apps/web/app/components/ui/use-mobile.tsx b/apps/web/app/components/ui/use-mobile.tsx
new file mode 100644
index 0000000..4331d5c
--- /dev/null
+++ b/apps/web/app/components/ui/use-mobile.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener('change', onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener('change', onChange)
+  }, [])
+
+  return !!isMobile
+}
diff --git a/apps/web/app/components/ui/use-toast.ts b/apps/web/app/components/ui/use-toast.ts
new file mode 100644
index 0000000..8932bc5
--- /dev/null
+++ b/apps/web/app/components/ui/use-toast.ts
@@ -0,0 +1,191 @@
+'use client'
+
+// Inspired by react-hot-toast library
+import * as React from 'react'
+
+import type { ToastActionElement, ToastProps } from '@/components/ui/toast'
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: 'ADD_TOAST',
+  UPDATE_TOAST: 'UPDATE_TOAST',
+  DISMISS_TOAST: 'DISMISS_TOAST',
+  REMOVE_TOAST: 'REMOVE_TOAST',
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType['ADD_TOAST']
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType['UPDATE_TOAST']
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType['DISMISS_TOAST']
+      toastId?: ToasterToast['id']
+    }
+  | {
+      type: ActionType['REMOVE_TOAST']
+      toastId?: ToasterToast['id']
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: 'REMOVE_TOAST',
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case 'ADD_TOAST':
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case 'UPDATE_TOAST':
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t,
+        ),
+      }
+
+    case 'DISMISS_TOAST': {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t,
+        ),
+      }
+    }
+    case 'REMOVE_TOAST':
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, 'id'>
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: 'UPDATE_TOAST',
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })
+
+  dispatch({
+    type: 'ADD_TOAST',
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
+  }
+}
+
+export { useToast, toast }
diff --git a/apps/web/app/features/page.tsx b/apps/web/app/features/page.tsx
new file mode 100644
index 0000000..7abb698
--- /dev/null
+++ b/apps/web/app/features/page.tsx
@@ -0,0 +1,417 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import {
+  ArrowLeft,
+  Code,
+  Cloud,
+  Shield,
+  Zap,
+  Terminal,
+  GitBranch,
+  Users,
+  Server,
+  Database,
+  Lock,
+  Rocket,
+} from "lucide-react"
+import { useRouter } from "next/navigation"
+
+export default function FeaturesPage() {
+  const router = useRouter()
+
+  const coreFeatures = [
+    {
+      icon: Terminal,
+      title: "Browser-Based VS Code",
+      description:
+        "Full VS Code experience in your browser with all your favorite extensions, themes, and settings. No installation required.",
+      details: [
+        "Complete extension marketplace access",
+        "Custom themes and settings sync",
+        "Integrated terminal with full shell access",
+        "Multi-tab editing with split views",
+      ],
+    },
+    {
+      icon: Cloud,
+      title: "Instant Environments",
+      description:
+        "Spin up containerized development environments in seconds with Docker integration and pre-configured templates.",
+      details: [
+        "30-second environment startup",
+        "Pre-built language templates",
+        "Custom Dockerfile support",
+        "Environment versioning and snapshots",
+      ],
+    },
+    {
+      icon: Shield,
+      title: "Persistent Storage",
+      description:
+        "Never lose your work with persistent Docker volumes, automatic backups, and seamless file synchronization.",
+      details: [
+        "Automatic file backup every 5 minutes",
+        "Cross-session persistence",
+        "Git integration with auto-sync",
+        "File history and version control",
+      ],
+    },
+    {
+      icon: GitBranch,
+      title: "Remote SSH Access",
+      description:
+        "Connect from your desktop VS Code, terminal, or any SSH client for maximum flexibility and familiar workflows.",
+      details: [
+        "Desktop VS Code integration",
+        "Terminal SSH access",
+        "SFTP file transfer support",
+        "Port forwarding for local testing",
+      ],
+    },
+    {
+      icon: Users,
+      title: "Team Collaboration",
+      description:
+        "Share environments with your team, collaborate in real-time, and manage permissions with enterprise-grade controls.",
+      details: [
+        "Real-time collaborative editing",
+        "Team workspace management",
+        "Role-based access control",
+        "Shared project templates",
+      ],
+    },
+    {
+      icon: Rocket,
+      title: "Multi-Cloud Ready",
+      description: "Local-first demo with future support for AWS, GCP, Azure, and hybrid cloud deployments.",
+      details: [
+        "Local development mode",
+        "Cloud provider flexibility",
+        "Hybrid deployment options",
+        "Enterprise scaling capabilities",
+      ],
+    },
+  ]
+
+  const technicalFeatures = [
+    {
+      icon: Server,
+      title: "Docker Integration",
+      description: "Full Docker support with custom containers, multi-stage builds, and container orchestration.",
+      details: [
+        "Custom Dockerfile support",
+        "Multi-container environments",
+        "Container networking",
+        "Resource management",
+      ],
+    },
+    {
+      icon: Database,
+      title: "Development Databases",
+      description: "Integrated database support with PostgreSQL, MySQL, MongoDB, and Redis containers.",
+      details: ["One-click database setup", "Database migration tools", "Connection pooling", "Backup and restore"],
+    },
+    {
+      icon: Lock,
+      title: "Security & Isolation",
+      description: "Enterprise-grade security with container isolation, encrypted connections, and audit logging.",
+      details: ["Container sandboxing", "Encrypted data transmission", "Audit trail logging", "Compliance ready"],
+    },
+    {
+      icon: Zap,
+      title: "Performance Optimization",
+      description: "Optimized for speed with intelligent caching, resource allocation, and network optimization.",
+      details: [
+        "Intelligent caching layers",
+        "Dynamic resource scaling",
+        "Network optimization",
+        "Performance monitoring",
+      ],
+    },
+  ]
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Header */}
+      <header className="border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex h-16 items-center justify-between">
+            <div className="flex items-center space-x-4">
+              <Button variant="ghost" size="sm" onClick={() => router.back()} className="flex items-center gap-2">
+                <ArrowLeft className="h-4 w-4" />
+                Back
+              </Button>
+              <div className="flex items-center space-x-2">
+                <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+                  <Code className="h-5 w-5" />
+                </div>
+                <span className="text-xl font-bold text-foreground">Dev8.dev</span>
+              </div>
+            </div>
+            <nav className="hidden md:flex items-center space-x-8">
+              <Button variant="outline" size="sm" onClick={() => router.push("/signin")}>
+                Sign In
+              </Button>
+            </nav>
+          </div>
+        </div>
+      </header>
+
+      {/* Hero Section */}
+      <section className="relative overflow-hidden py-16 sm:py-20">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="mx-auto max-w-4xl text-center">
+            <Badge variant="secondary" className="mb-6">
+              <Zap className="mr-1 h-3 w-3" />
+              Complete Feature Overview
+            </Badge>
+            <h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-6xl text-balance">
+              Everything You Need for <span className="text-primary">Cloud Development</span>
+            </h1>
+            <p className="mt-6 text-lg leading-8 text-muted-foreground text-pretty max-w-2xl mx-auto">
+              Discover all the powerful features that make Dev8.dev the ultimate cloud-based development platform. From
+              instant environments to enterprise-grade security.
+            </p>
+            <div className="mt-10 flex items-center justify-center gap-x-6">
+              <Button size="lg" className="h-12 px-8" onClick={() => router.push("/register")}>
+                Start Using These Features
+                <ArrowLeft className="ml-2 h-4 w-4 rotate-180" />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Core Features Section */}
+      <section className="py-12 sm:py-16 bg-muted/30">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="mx-auto max-w-2xl text-center mb-12">
+            <h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl text-balance">
+              Core Development Features
+            </h2>
+            <p className="mt-4 text-lg text-muted-foreground text-pretty">
+              Essential tools and capabilities for modern development workflows
+            </p>
+          </div>
+
+          <div className="mx-auto max-w-7xl">
+            <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
+              {coreFeatures.map((feature, index) => (
+                <Card key={index} className="relative overflow-hidden border-border/50 bg-card/50 backdrop-blur">
+                  <CardHeader className="pb-6">
+                    <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 mb-4">
+                      <feature.icon className="h-6 w-6 text-primary" />
+                    </div>
+                    <CardTitle className="text-xl">{feature.title}</CardTitle>
+                    <CardDescription className="text-base leading-relaxed">{feature.description}</CardDescription>
+                    <div className="mt-4 space-y-2">
+                      {feature.details.map((detail, detailIndex) => (
+                        <div key={detailIndex} className="flex items-center gap-2 text-sm text-muted-foreground">
+                          <div className="h-1.5 w-1.5 rounded-full bg-primary/60"></div>
+                          {detail}
+                        </div>
+                      ))}
+                    </div>
+                  </CardHeader>
+                </Card>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Technical Features Section */}
+      <section className="py-12 sm:py-16">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="mx-auto max-w-2xl text-center mb-12">
+            <h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl text-balance">
+              Technical Capabilities
+            </h2>
+            <p className="mt-4 text-lg text-muted-foreground text-pretty">
+              Advanced technical features for professional development teams
+            </p>
+          </div>
+
+          <div className="mx-auto max-w-7xl">
+            <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-2">
+              {technicalFeatures.map((feature, index) => (
+                <Card key={index} className="relative overflow-hidden border-border/50 bg-card/50 backdrop-blur">
+                  <CardHeader className="pb-6">
+                    <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 mb-4">
+                      <feature.icon className="h-6 w-6 text-primary" />
+                    </div>
+                    <CardTitle className="text-xl">{feature.title}</CardTitle>
+                    <CardDescription className="text-base leading-relaxed">{feature.description}</CardDescription>
+                    <div className="mt-4 space-y-2">
+                      {feature.details.map((detail, detailIndex) => (
+                        <div key={detailIndex} className="flex items-center gap-2 text-sm text-muted-foreground">
+                          <div className="h-1.5 w-1.5 rounded-full bg-primary/60"></div>
+                          {detail}
+                        </div>
+                      ))}
+                    </div>
+                  </CardHeader>
+                </Card>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Tech Stack Section */}
+      <section className="py-12 sm:py-16 bg-muted/30">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="mx-auto max-w-2xl text-center">
+            <h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl text-balance">
+              Built with Modern Technology
+            </h2>
+            <p className="mt-4 text-lg text-muted-foreground text-pretty">
+              Powered by industry-leading tools and frameworks
+            </p>
+          </div>
+
+          <div className="mx-auto mt-16 max-w-4xl">
+            <div className="grid grid-cols-2 gap-8 sm:grid-cols-4">
+              <div className="flex flex-col items-center text-center">
+                <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-card border border-border">
+                  <span className="text-2xl font-mono font-bold text-primary">D</span>
+                </div>
+                <h3 className="mt-4 text-sm font-semibold text-foreground">Docker</h3>
+                <p className="mt-1 text-xs text-muted-foreground">Containerization</p>
+              </div>
+
+              <div className="flex flex-col items-center text-center">
+                <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-card border border-border">
+                  <Code className="h-8 w-8 text-primary" />
+                </div>
+                <h3 className="mt-4 text-sm font-semibold text-foreground">Code-Server</h3>
+                <p className="mt-1 text-xs text-muted-foreground">VS Code in Browser</p>
+              </div>
+
+              <div className="flex flex-col items-center text-center">
+                <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-card border border-border">
+                  <span className="text-2xl font-mono font-bold text-primary">N</span>
+                </div>
+                <h3 className="mt-4 text-sm font-semibold text-foreground">Node.js</h3>
+                <p className="mt-1 text-xs text-muted-foreground">Runtime Environment</p>
+              </div>
+
+              <div className="flex flex-col items-center text-center">
+                <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-card border border-border">
+                  <span className="text-2xl font-mono font-bold text-primary">V</span>
+                </div>
+                <h3 className="mt-4 text-sm font-semibold text-foreground">Volumes</h3>
+                <p className="mt-1 text-xs text-muted-foreground">Persistent Storage</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section className="py-12 sm:py-16 bg-primary/5">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="mx-auto max-w-2xl text-center">
+            <h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl text-balance">
+              Ready to experience these features?
+            </h2>
+            <p className="mt-4 text-lg text-muted-foreground text-pretty">
+              Start using Dev8.dev today and transform your development workflow with cloud-based environments.
+            </p>
+            <div className="mt-8 flex items-center justify-center gap-x-6">
+              <Button size="lg" className="h-12 px-8" onClick={() => router.push("/register")}>
+                Get Started Free
+                <ArrowLeft className="ml-2 h-4 w-4 rotate-180" />
+              </Button>
+              <Button variant="outline" size="lg" className="h-12 px-8 bg-transparent" onClick={() => router.push("/")}>
+                Back to Home
+              </Button>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="border-t border-border bg-muted/30">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-12">
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+            <div className="col-span-1 md:col-span-2">
+              <div className="flex items-center space-x-2 mb-4">
+                <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+                  <Code className="h-5 w-5" />
+                </div>
+                <span className="text-xl font-bold text-foreground">Dev8.dev</span>
+              </div>
+              <p className="text-muted-foreground text-sm max-w-md">
+                The future of development is in the cloud. Start coding instantly with our containerized environments.
+              </p>
+            </div>
+
+            <div>
+              <h3 className="font-semibold text-foreground mb-4">Product</h3>
+              <ul className="space-y-2 text-sm text-muted-foreground">
+                <li>
+                  <button
+                    onClick={() => router.push("/features")}
+                    className="hover:text-foreground transition-colors text-left"
+                  >
+                    Features
+                  </button>
+                </li>
+                <li>
+                  <button
+                    onClick={() => router.push("/register")}
+                    className="hover:text-foreground transition-colors text-left"
+                  >
+                    Get Started
+                  </button>
+                </li>
+              </ul>
+            </div>
+
+            <div>
+              <h3 className="font-semibold text-foreground mb-4">Support</h3>
+              <ul className="space-y-2 text-sm text-muted-foreground">
+                <li>
+                  <a href="#" className="hover:text-foreground transition-colors">
+                    Help Center
+                  </a>
+                </li>
+                <li>
+                  <a href="#" className="hover:text-foreground transition-colors">
+                    Community
+                  </a>
+                </li>
+                <li>
+                  <a href="#" className="hover:text-foreground transition-colors">
+                    Contact Us
+                  </a>
+                </li>
+                <li>
+                  <a href="#" className="hover:text-foreground transition-colors">
+                    Status
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <div className="mt-8 pt-8 border-t border-border flex flex-col sm:flex-row justify-between items-center">
+            <p className="text-xs text-muted-foreground">© 2024 Dev8.dev. All rights reserved.</p>
+            <div className="flex space-x-6 mt-4 sm:mt-0">
+              <a href="#" className="text-xs text-muted-foreground hover:text-foreground transition-colors">
+                Privacy Policy
+              </a>
+              <a href="#" className="text-xs text-muted-foreground hover:text-foreground transition-colors">
+                Terms of Service
+              </a>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  )
+}
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index a0ccb1f..b340ca1 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -2,29 +2,12 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
 html,
 body {
   max-width: 100vw;
   overflow-x: hidden;
 }
 
-body {
-  color: var(--foreground);
-  background: var(--background);
-}
-
 * {
   box-sizing: border-box;
   padding: 0;
@@ -52,3 +35,84 @@ a {
     display: unset;
   }
 }
+
+
+
+
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --primary: 262.1 83.3% 57.8%;
+    --primary-foreground: 0 0% 100%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 215.4 16.3% 46.9%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 262.1 83.3% 57.8%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    /* You can define dark mode violet colors here later if you want */
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 262.1 83.3% 57.8%;
+    --primary-foreground: 0 0% 100%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 262.1 83.3% 57.8%;
+  }
+}
+
+
+
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/apps/web/app/lib/utils.ts b/apps/web/app/lib/utils.ts
new file mode 100644
index 0000000..fed2fe9
--- /dev/null
+++ b/apps/web/app/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index 416379d..3d5ffa3 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -1,59 +1,510 @@
-import Link from "next/link";
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { ArrowRight, Code, Cloud, Shield, Zap, Terminal, GitBranch, Users } from "lucide-react"
+import { useRouter } from "next/navigation"
 
 export default function HomePage() {
+  const router = useRouter()
+
+  const handleNavigation = (path: string) => {
+    router.push(path)
+  }
+
   return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
-      <div className="container mx-auto px-4 py-16">
-        <div className="text-center">
-          <h1 className="text-4xl font-bold text-gray-900 mb-4">
-            Welcome to Dev8.dev
-          </h1>
-          <p className="text-xl text-gray-600 mb-8">
-            Your development platform for modern web applications
-          </p>
-
-          <div className="space-y-4">
-            <p className="text-lg text-gray-700">
-              Get started with your development journey
-            </p>
-            <div className="space-x-4">
-              <Link
-                href="/signin"
-                className="inline-block bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors"
+    <div className="min-h-screen bg-background relative overflow-hidden">
+      <div className="fixed inset-0 -z-20">
+        <div className="absolute inset-0 bg-gradient-to-br from-background via-primary/3 to-violet-500/5"></div>
+        <div className="absolute top-0 left-1/4 w-96 h-96 bg-primary/8 rounded-full blur-3xl animate-pulse"></div>
+        <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-violet-500/8 rounded-full blur-3xl animate-pulse delay-1000"></div>
+        <div className="absolute top-1/2 left-1/2 w-64 h-64 bg-purple-500/6 rounded-full blur-2xl animate-pulse delay-500"></div>
+      </div>
+
+      {/* Header */}
+      <header className="border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex h-16 items-center justify-between">
+            <div className="flex items-center space-x-2">
+              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+                <Code className="h-5 w-5" />
+              </div>
+              <span className="text-xl font-bold text-foreground">Dev8.dev</span>
+            </div>
+            <nav className="hidden md:flex items-center space-x-8">
+              <button
+                onClick={() => handleNavigation("/features")}
+                className="text-muted-foreground hover:text-foreground transition-colors"
               >
+                Features
+              </button>
+              <Button variant="outline" size="sm" onClick={() => handleNavigation("/signin")}>
                 Sign In
-              </Link>
-              <Link
-                href="/signup"
-                className="inline-block bg-green-600 text-white px-6 py-3 rounded-lg hover:bg-green-700 transition-colors"
+              </Button>
+            </nav>
+          </div>
+        </div>
+      </header>
+
+      {/* Hero Section */}
+      <section className="relative overflow-hidden py-16 sm:py-24 bg-gradient-to-b from-background to-primary/5">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+          <div className="mx-auto max-w-4xl text-center">
+            <Badge variant="secondary" className="mb-6">
+              <Zap className="mr-1 h-3 w-3" />
+              Zero to coding in 30 seconds
+            </Badge>
+            <h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-6xl text-balance">
+              Your Development Environment in the <span className="text-primary">Cloud</span>
+            </h1>
+            <p className="mt-6 text-lg leading-8 text-muted-foreground text-pretty max-w-2xl mx-auto">
+              Dev8.dev provides instant, containerized development environments with full VS Code experience. Code
+              anywhere, anytime, with persistent storage and seamless collaboration.
+            </p>
+            <div className="mt-10 flex items-center justify-center gap-x-6">
+              <Button size="lg" className="h-12 px-8" onClick={() => handleNavigation("/signup")}>
+                Start Coding Now
+                <ArrowRight className="ml-2 h-4 w-4" />
+              </Button>
+              <Button
+                variant="outline"
+                size="lg"
+                className="h-12 px-8 bg-transparent"
+                onClick={() => {
+                  document.getElementById("features")?.scrollIntoView({ behavior: "smooth" })
+                }}
               >
-                Sign Up
-              </Link>
+                View Demo
+              </Button>
+            </div>
+            <div className="mt-8 flex items-center justify-center gap-x-8 text-sm text-muted-foreground">
+              <div className="flex items-center gap-x-2">
+                <div className="h-2 w-2 rounded-full bg-green-500"></div>
+                No setup required
+              </div>
+              <div className="flex items-center gap-x-2">
+                <div className="h-2 w-2 rounded-full bg-green-500"></div>
+                Free tier available
+              </div>
+              <div className="flex items-center gap-x-2">
+                <div className="h-2 w-2 rounded-full bg-green-500"></div>
+                Enterprise ready
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80">
+          <div className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-primary via-violet-500 to-purple-600 opacity-20 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"></div>
+        </div>
+        <div className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]">
+          <div className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-violet-400 to-primary opacity-15 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"></div>
+        </div>
+      </section>
+
+      {/* Stats Section */}
+      <section className="py-12 bg-gradient-to-b from-primary/5 via-violet-500/8 to-primary/10 relative">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+          <div className="grid grid-cols-1 gap-8 sm:grid-cols-3 text-center">
+            <div>
+              <div className="text-3xl font-bold text-primary">30s</div>
+              <div className="text-sm text-muted-foreground">Environment Setup Time</div>
+            </div>
+            <div>
+              <div className="text-3xl font-bold text-primary">100%</div>
+              <div className="text-sm text-muted-foreground">Browser Compatible</div>
+            </div>
+            <div>
+              <div className="text-3xl font-bold text-primary">24/7</div>
+              <div className="text-sm text-muted-foreground">Cloud Availability</div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Features Section */}
+      <section
+        id="features"
+        className="py-16 sm:py-20 bg-gradient-to-b from-primary/10 via-background to-violet-500/8 relative"
+      >
+        <div className="absolute inset-0 overflow-hidden pointer-events-none">
+          <div className="absolute top-20 left-10 w-4 h-4 bg-primary/20 rounded-full animate-bounce delay-300"></div>
+          <div className="absolute top-40 right-20 w-6 h-6 bg-violet-500/20 rounded-full animate-bounce delay-700"></div>
+          <div className="absolute bottom-40 left-1/4 w-3 h-3 bg-purple-500/20 rounded-full animate-bounce delay-1000"></div>
+          <div className="absolute bottom-20 right-1/3 w-5 h-5 bg-primary/20 rounded-full animate-bounce delay-500"></div>
+        </div>
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+          <div className="mx-auto max-w-2xl text-center">
+            <h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl text-balance">
+              Everything you need to code in the cloud
+            </h2>
+            <p className="mt-4 text-lg text-muted-foreground text-pretty">
+              Powerful features designed for modern development workflows
+            </p>
+          </div>
+
+          <div className="mx-auto mt-16 max-w-7xl">
+            <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+              {/* Feature 1 */}
+              <Card className="relative overflow-hidden border-border/50 bg-card/50 backdrop-blur">
+                <CardHeader>
+                  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
+                    <Terminal className="h-6 w-6 text-primary" />
+                  </div>
+                  <CardTitle className="text-xl">Browser-Based VS Code</CardTitle>
+                  <CardDescription>
+                    Full VS Code experience in your browser with all your favorite extensions and themes.
+                  </CardDescription>
+                </CardHeader>
+              </Card>
+
+              {/* Feature 2 */}
+              <Card className="relative overflow-hidden border-border/50 bg-card/50 backdrop-blur">
+                <CardHeader>
+                  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
+                    <Cloud className="h-6 w-6 text-primary" />
+                  </div>
+                  <CardTitle className="text-xl">Instant Environments</CardTitle>
+                  <CardDescription>
+                    Spin up containerized development environments in seconds with Docker integration.
+                  </CardDescription>
+                </CardHeader>
+              </Card>
+
+              {/* Feature 3 */}
+              <Card className="relative overflow-hidden border-border/50 bg-card/50 backdrop-blur">
+                <CardHeader>
+                  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
+                    <Shield className="h-6 w-6 text-primary" />
+                  </div>
+                  <CardTitle className="text-xl">Persistent Storage</CardTitle>
+                  <CardDescription>
+                    Never lose your work with persistent Docker volumes and automatic backups.
+                  </CardDescription>
+                </CardHeader>
+              </Card>
+
+              {/* Feature 4 */}
+              <Card className="relative overflow-hidden border-border/50 bg-card/50 backdrop-blur">
+                <CardHeader>
+                  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
+                    <GitBranch className="h-6 w-6 text-primary" />
+                  </div>
+                  <CardTitle className="text-xl">Remote SSH Access</CardTitle>
+                  <CardDescription>
+                    Connect from your desktop VS Code or any SSH client for maximum flexibility.
+                  </CardDescription>
+                </CardHeader>
+              </Card>
+
+              {/* Feature 5 */}
+              <Card className="relative overflow-hidden border-border/50 bg-card/50 backdrop-blur">
+                <CardHeader>
+                  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
+                    <Users className="h-6 w-6 text-primary" />
+                  </div>
+                  <CardTitle className="text-xl">Team Collaboration</CardTitle>
+                  <CardDescription>
+                    Share environments with your team and collaborate in real-time on projects.
+                  </CardDescription>
+                </CardHeader>
+              </Card>
+
+              {/* Feature 6 */}
+              <Card className="relative overflow-hidden border-border/50 bg-card/50 backdrop-blur">
+                <CardHeader>
+                  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
+                    <Zap className="h-6 w-6 text-primary" />
+                  </div>
+                  <CardTitle className="text-xl">Multi-Cloud Ready</CardTitle>
+                  <CardDescription>
+                    Local-first demo with future support for AWS, GCP, and Azure deployments.
+                  </CardDescription>
+                </CardHeader>
+              </Card>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* How It Works Section */}
+      <section className="py-16 sm:py-20 bg-gradient-to-b from-violet-500/8 via-primary/5 to-background relative">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+          <div className="mx-auto max-w-2xl text-center">
+            <h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl text-balance">
+              How Dev8.dev Works
+            </h2>
+            <p className="mt-4 text-lg text-muted-foreground text-pretty">Get started in three simple steps</p>
+          </div>
+
+          <div className="mx-auto mt-16 max-w-4xl">
+            <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
+              <div className="text-center">
+                <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-primary text-primary-foreground font-bold text-xl">
+                  1
+                </div>
+                <h3 className="mt-4 text-lg font-semibold text-foreground">Sign Up & Choose Template</h3>
+                <p className="mt-2 text-sm text-muted-foreground">
+                  Create your account and select from pre-configured development templates or start from scratch.
+                </p>
+              </div>
+
+              <div className="text-center">
+                <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-primary text-primary-foreground font-bold text-xl">
+                  2
+                </div>
+                <h3 className="mt-4 text-lg font-semibold text-foreground">Launch Environment</h3>
+                <p className="mt-2 text-sm text-muted-foreground">
+                  Your containerized development environment spins up in seconds with VS Code ready to use.
+                </p>
+              </div>
+
+              <div className="text-center">
+                <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-primary text-primary-foreground font-bold text-xl">
+                  3
+                </div>
+                <h3 className="mt-4 text-lg font-semibold text-foreground">Start Coding</h3>
+                <p className="mt-2 text-sm text-muted-foreground">
+                  Begin coding immediately with full VS Code features, extensions, and persistent file storage.
+                </p>
+              </div>
             </div>
           </div>
         </div>
+      </section>
 
-        <div className="mt-16 grid md:grid-cols-3 gap-8">
-          <div className="bg-white p-6 rounded-lg shadow-md">
-            <h3 className="text-xl font-semibold mb-3">Modern Stack</h3>
-            <p className="text-gray-600">
-              Built with Next.js, TypeScript, and modern development tools
+      {/* Tech Stack Section */}
+      <section className="py-16 sm:py-20 bg-gradient-to-b from-background via-primary/8 to-violet-500/10 relative">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+          <div className="mx-auto max-w-2xl text-center">
+            <h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl text-balance">
+              Built with Modern Technology
+            </h2>
+            <p className="mt-4 text-lg text-muted-foreground text-pretty">
+              Powered by industry-leading tools and frameworks
             </p>
           </div>
-          <div className="bg-white p-6 rounded-lg shadow-md">
-            <h3 className="text-xl font-semibold mb-3">Authentication</h3>
-            <p className="text-gray-600">
-              Secure authentication with NextAuth.js and multiple providers
+
+          <div className="mx-auto mt-16 max-w-4xl">
+            <div className="grid grid-cols-2 gap-8 sm:grid-cols-4">
+              <div className="flex flex-col items-center text-center">
+                <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-card border border-border">
+                  <span className="text-2xl font-mono font-bold text-primary">D</span>
+                </div>
+                <h3 className="mt-4 text-sm font-semibold text-foreground">Docker</h3>
+                <p className="mt-1 text-xs text-muted-foreground">Containerization</p>
+              </div>
+
+              <div className="flex flex-col items-center text-center">
+                <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-card border border-border">
+                  <Code className="h-8 w-8 text-primary" />
+                </div>
+                <h3 className="mt-4 text-sm font-semibold text-foreground">Code-Server</h3>
+                <p className="mt-1 text-xs text-muted-foreground">VS Code in Browser</p>
+              </div>
+
+              <div className="flex flex-col items-center text-center">
+                <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-card border border-border">
+                  <span className="text-2xl font-mono font-bold text-primary">N</span>
+                </div>
+                <h3 className="mt-4 text-sm font-semibold text-foreground">Node.js</h3>
+                <p className="mt-1 text-xs text-muted-foreground">Runtime Environment</p>
+              </div>
+
+              <div className="flex flex-col items-center text-center">
+                <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-card border border-border">
+                  <span className="text-2xl font-mono font-bold text-primary">V</span>
+                </div>
+                <h3 className="mt-4 text-sm font-semibold text-foreground">Volumes</h3>
+                <p className="mt-1 text-xs text-muted-foreground">Persistent Storage</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Use Cases Section */}
+      <section className="py-16 sm:py-20 bg-gradient-to-b from-violet-500/10 via-primary/6 to-background relative">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+          <div className="mx-auto max-w-2xl text-center">
+            <h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl text-balance">
+              Perfect for Every Developer
+            </h2>
+            <p className="mt-4 text-lg text-muted-foreground text-pretty">
+              Whether you're a student, freelancer, or enterprise team
             </p>
           </div>
-          <div className="bg-white p-6 rounded-lg shadow-md">
-            <h3 className="text-xl font-semibold mb-3">Go Services</h3>
-            <p className="text-gray-600">
-              High-performance backend services built with Go
+
+          <div className="mx-auto mt-16 max-w-6xl">
+            <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
+              <Card className="border-border/50 bg-card/50">
+                <CardHeader>
+                  <CardTitle className="text-lg">Students & Learning</CardTitle>
+                  <CardDescription>
+                    No setup required - jump straight into coding assignments and projects without configuration
+                    hassles.
+                  </CardDescription>
+                </CardHeader>
+              </Card>
+
+              <Card className="border-border/50 bg-card/50">
+                <CardHeader>
+                  <CardTitle className="text-lg">Remote Teams</CardTitle>
+                  <CardDescription>
+                    Standardized environments ensure everyone works with the same tools and configurations.
+                  </CardDescription>
+                </CardHeader>
+              </Card>
+
+              <Card className="border-border/50 bg-card/50">
+                <CardHeader>
+                  <CardTitle className="text-lg">Quick Prototyping</CardTitle>
+                  <CardDescription>
+                    Test ideas rapidly without polluting your local machine with temporary dependencies.
+                  </CardDescription>
+                </CardHeader>
+              </Card>
+
+              <Card className="border-border/50 bg-card/50">
+                <CardHeader>
+                  <CardTitle className="text-lg">Code Reviews</CardTitle>
+                  <CardDescription>
+                    Spin up environments for specific branches or pull requests for thorough testing.
+                  </CardDescription>
+                </CardHeader>
+              </Card>
+
+              <Card className="border-border/50 bg-card/50">
+                <CardHeader>
+                  <CardTitle className="text-lg">Workshops & Training</CardTitle>
+                  <CardDescription>
+                    Provide consistent environments for coding workshops and technical training sessions.
+                  </CardDescription>
+                </CardHeader>
+              </Card>
+
+              <Card className="border-border/50 bg-card/50">
+                <CardHeader>
+                  <CardTitle className="text-lg">Legacy Projects</CardTitle>
+                  <CardDescription>
+                    Isolate older projects with specific dependency versions without affecting your main setup.
+                  </CardDescription>
+                </CardHeader>
+              </Card>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section className="py-16 sm:py-20 bg-gradient-to-b from-background via-primary/8 to-violet-500/12 relative">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+          <div className="mx-auto max-w-2xl text-center">
+            <h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl text-balance">
+              Ready to start coding in the cloud?
+            </h2>
+            <p className="mt-4 text-lg text-muted-foreground text-pretty">
+              Join thousands of developers who have already made the switch to cloud-based development.
             </p>
+            <div className="mt-8 flex items-center justify-center gap-x-6">
+              <Button size="lg" className="h-12 px-8" onClick={() => handleNavigation("/signup")}>
+                Get Started Free
+                <ArrowRight className="ml-2 h-4 w-4" />
+              </Button>
+              <Button
+                variant="outline"
+                size="lg"
+                className="h-12 px-8 bg-transparent"
+                onClick={() => {
+                  document.getElementById("features")?.scrollIntoView({ behavior: "smooth" })
+                }}
+              >
+                Schedule Demo
+              </Button>
+            </div>
           </div>
         </div>
-      </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="border-t border-border bg-gradient-to-b from-violet-500/12 to-muted/20 relative">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-12 relative z-10">
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+            <div className="col-span-1 md:col-span-2">
+              <div className="flex items-center space-x-2 mb-4">
+                <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+                  <Code className="h-5 w-5" />
+                </div>
+                <span className="text-xl font-bold text-foreground">Dev8.dev</span>
+              </div>
+              <p className="text-muted-foreground text-sm max-w-md">
+                The future of development is in the cloud. Start coding instantly with our containerized environments.
+              </p>
+            </div>
+
+            <div>
+              <h3 className="font-semibold text-foreground mb-4">Product</h3>
+              <ul className="space-y-2 text-sm text-muted-foreground">
+                <li>
+                  <button
+                    onClick={() => handleNavigation("/features")}
+                    className="hover:text-foreground transition-colors text-left"
+                  >
+                    Features
+                  </button>
+                </li>
+                <li>
+                  <button
+                    onClick={() => handleNavigation("/signup")}
+                    className="hover:text-foreground transition-colors text-left"
+                  >
+                    Get Started
+                  </button>
+                </li>
+              </ul>
+            </div>
+
+            <div>
+              <h3 className="font-semibold text-foreground mb-4">Support</h3>
+              <ul className="space-y-2 text-sm text-muted-foreground">
+                <li>
+                  <a href="#" className="hover:text-foreground transition-colors">
+                    Help Center
+                  </a>
+                </li>
+                <li>
+                  <a href="#" className="hover:text-foreground transition-colors">
+                    Community
+                  </a>
+                </li>
+                <li>
+                  <a href="#" className="hover:text-foreground transition-colors">
+                    Contact Us
+                  </a>
+                </li>
+                <li>
+                  <a href="#" className="hover:text-foreground transition-colors">
+                    Status
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <div className="mt-8 pt-8 border-t border-border flex flex-col sm:flex-row justify-between items-center">
+            <p className="text-xs text-muted-foreground">© 2024 Dev8.dev. All rights reserved.</p>
+            <div className="flex space-x-6 mt-4 sm:mt-0">
+              <a href="#" className="text-xs text-muted-foreground hover:text-foreground transition-colors">
+                Privacy Policy
+              </a>
+              <a href="#" className="text-xs text-muted-foreground hover:text-foreground transition-colors">
+                Terms of Service
+              </a>
+            </div>
+          </div>
+        </div>
+      </footer>
     </div>
-  );
-}
+  )
+}
\ No newline at end of file
diff --git a/apps/web/app/public/placeholder-logo.png b/apps/web/app/public/placeholder-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..8a792ac2ddfbe047639f7907c82f14c73e3de3d9
GIT binary patch
literal 568
zcmeAS@N?(olHy`uVBq!ia0y~yU<5K5Ca^FANm1Vwi-43tfKP}kNR$*1WiP`GRL@@$
z<QL3vU!lR_fWZ6t2>}KL6V^XjP|gFiXN9MWV@SoVw>S2B83zimJup|_^-FbrjeV<v
z*lw|=xs0x-S#nsL%^x(0FVKj%;qsQ{U_)>3it>ba2M!&I{-9Oz_xPcYF3oFZ=eo>b
ztd*bf%*2|<`prCX7bFlbJSYChhATpnZHm_gDmxOE$M3Ov^QCh;k9GZ#-G|g`wsZ1y
zY-hCA6Y*4%kP@8PzH+9qgqG>UuX7G~Jv3yxb4X!L$WkVer)+Lao)20%*YwyPoNauk
zS!$0_-Kr#3+3w{V4Ccu^47H4DY>j<sazVM=;K3pHk{C5Z9+CU(_C~D2hB~a*&VI>P
zOx?nl+kWZD?x4qFw+?-2Jz{$0yTXmVj$U6an>Gc>YVI}tW1#2eCg2#H$RT;W`9jE4
z<(d!P-_Kw0oV0yf*RuH&47YRnuIuc%FZkt*pVIL&DpPv8{<u#M`yJBCefwlcT-?&n
zjxSV#cP<yr(CFAcO<MeKYtwf3*yMaAuj@PF;;yRSvlUx1ZJp{~pm)R1n_XBvJ$&o^
z@|B67@3(7p1LcJx-KQrXz4I$U-A#P^e%a;@1bFc|j=?m3v(EJ3b*iA~_jL7hS?83{
F1OR^s+sXg{

literal 0
HcmV?d00001

diff --git a/apps/web/app/public/placeholder-logo.svg b/apps/web/app/public/placeholder-logo.svg
new file mode 100644
index 0000000..b1695aa
--- /dev/null
+++ b/apps/web/app/public/placeholder-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="215" height="48" fill="none"><path fill="#000" d="M57.588 9.6h6L73.828 38h-5.2l-2.36-6.88h-11.36L52.548 38h-5.2l10.24-28.4Zm7.16 17.16-4.16-12.16-4.16 12.16h8.32Zm23.694-2.24c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.486-7.72.12 3.4c.534-1.227 1.307-2.173 2.32-2.84 1.04-.693 2.267-1.04 3.68-1.04 1.494 0 2.76.387 3.8 1.16 1.067.747 1.827 1.813 2.28 3.2.507-1.44 1.294-2.52 2.36-3.24 1.094-.747 2.414-1.12 3.96-1.12 1.414 0 2.64.307 3.68.92s1.84 1.52 2.4 2.72c.56 1.2.84 2.667.84 4.4V38h-4.96V25.92c0-1.813-.293-3.187-.88-4.12-.56-.96-1.413-1.44-2.56-1.44-.906 0-1.68.213-2.32.64-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.84-.48 3.04V38h-4.56V25.92c0-1.2-.133-2.213-.4-3.04-.24-.827-.626-1.453-1.16-1.88-.506-.427-1.133-.64-1.88-.64-.906 0-1.68.227-2.32.68-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.827-.48 3V38h-4.96V16.8h4.48Zm26.723 10.6c0-2.24.427-4.187 1.28-5.84.854-1.68 2.067-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.84 0 3.494.413 4.96 1.24 1.467.827 2.64 2.08 3.52 3.76.88 1.653 1.347 3.693 1.4 6.12v1.32h-15.08c.107 1.813.614 3.227 1.52 4.24.907.987 2.134 1.48 3.68 1.48.987 0 1.88-.253 2.68-.76a4.803 4.803 0 0 0 1.84-2.2l5.08.36c-.64 2.027-1.84 3.64-3.6 4.84-1.733 1.173-3.733 1.76-6 1.76-2.08 0-3.906-.453-5.48-1.36-1.573-.907-2.786-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84Zm15.16-2.04c-.213-1.733-.76-3.013-1.64-3.84-.853-.827-1.893-1.24-3.12-1.24-1.44 0-2.6.453-3.48 1.36-.88.88-1.44 2.12-1.68 3.72h9.92ZM163.139 9.6V38h-5.04V9.6h5.04Zm8.322 7.2.24 5.88-.64-.36c.32-2.053 1.094-3.56 2.32-4.52 1.254-.987 2.787-1.48 4.6-1.48 2.32 0 4.107.733 5.36 2.2 1.254 1.44 1.88 3.387 1.88 5.84V38h-4.96V25.92c0-1.253-.12-2.28-.36-3.08-.24-.8-.64-1.413-1.2-1.84-.533-.427-1.253-.64-2.16-.64-1.44 0-2.573.48-3.4 1.44-.8.933-1.2 2.307-1.2 4.12V38h-4.96V16.8h4.48Zm30.003 7.72c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.443 8.16V38h-5.6v-5.32h5.6Z"/><path fill="#171717" fill-rule="evenodd" d="m7.839 40.783 16.03-28.054L20 6 0 40.783h7.839Zm8.214 0H40L27.99 19.894l-4.02 7.032 3.976 6.914H20.02l-3.967 6.943Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/apps/web/app/public/placeholder-user.jpg b/apps/web/app/public/placeholder-user.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6fa7543d38ed8fdb38f03b5c0f40ad2d66827d4a
GIT binary patch
literal 1635
zcmex=<NpH&0WUXCHwH#V1_nkTWcYuZ!I^=Jot=}Njf<0mlbf51hhI{FpO24UPE1@#
zQbj>cRarq<NkiAtKtsz+TS?i-#mLOs*1^F+&A`pu)y~V(-oX}R2qQN)H$N}Gtbl;5
zt){Z3Ey>{jAqGJXh7$}Ym>C5bm;@P_1sVSzVUPwol9>?*7~p`Fjh%&&i5Vy<f-DS?
z|9^{thnbOqNq|`ZC~&g@u8VX=&D0{3NxJM8pgPZVC{;A7_ZmRB%rg%6?s#L-<8jAt
z0z{;6M(1w%g+C<%x63v_L_Qop_vlnupKyXLgwOCqL#0qDzHbAR3#0hCCI(yZ^Dhe6
zF%4q6JX@HXcv8TZpNd?b`6dvt1)_(e?F$%`&(vJvb^z&QR@8F^nq++Vvq=Gn&*oGp
ztH8i`B#KuC#AReE29iQ7J3t)rfIKjWodp;enVA?_x!E~6A*KL>o`r#xP0%qgXfnHy
zn7E>$Lug{-LIb0a!ifhj3W%7RB^MNLx}>0_tP&7BY4IaqjBo(siP4_n_ky5FEmL(`
zmhdc@Jb`OxUUPQK!#s<ks4a^p%H4WwDH~SypW$=Z+Y7nHVuC7`f>q(C`ZJd3YCA-U
zh)gnS;tOzhJ@#Yf$<H#|T_Xi0EycfeiDqs%zjsG4=iCqeb2guta$W3tyl3m%@RzH%
zw$)BNFmug&r#)BuLRM|CQ!V1T5}m5A6W-@iJL|m54!fk=sdn?qW<?z@Q0vqR3!XAL
zY<6+j>SRGl2DVF#R;SL@d2ijhdh5m?{S3~XPpnp*$)2k2D4JJuYTMD;n0K36=Y8OJ
z-mS1ZZC1<AQ;7$xFJ;KI$coB-@#?w#R%S(^Vy12TlL^0+jun3QbGz*s)t|7a{K#C>
z49BdqoLo<WB68%O^mTUSWN*BC$H7x@u4>M_v$9v)Hm?5W<`Stp{n4{)u7wjb{~fvi
z!T;47&))dGMoGtVj(5+GENxwrz4z{INB>V}1-4JUxp@DgJ8LKAUAQWhoR~X5%Wp!~
z<DEyIh54}GuHDORee^nG{=GJ{6F;tQFYa8gBi;RW!?hOKPp@w0bZ55BxNw^zr`q$9
z|Cgg0imF};Dm+VO?a6Cq6V!EZKX>=~v%IB`XWv<uso3&rOQXBsJ*#tZSFUs9{Y^K{
zS>>j>XTei(%h-3q0fm1bY5udCHKmu^f&G@&$==-St!-gGk?J$~inXs)aj#q07WR4-
zM=rxkFUy8C!QJtD_bgKux*|B+dhW6{-z2Xe?@~0Ks(ijMro-3a&Mj#N$xpGBRnmWt
zTsUxz-_bhtPj<sMeuw`I#q*`&SU0SnCF#EM>F={K-%Z^<th=u9Px?QDVDQ^dYbW_s
zu35R9EqP8RyTuy$o@<vb=I^oyx%njXt>57b<}UkWR&Lo)qWhnrV2yD?(SL?Q-l9d;
zHS6^j9!_Ejaqqemoyn}=@ptvvS-S7I7N7FZ5}(WNv3l;#-@XTLOmcJGRz1a7FhcBC
z-nPY(UsETGE4&Rdme=pC+jj2j;!j+6o-!m}7oD?jz2dGcAvK4%qSmfE=U+z7Z+`#j
z$Mx4a@1yJ$R+zt@y0z(yW_ISH^4k|<^!Al@?-M=r`gz3ehXgqVyM1>}k-Q}GF<-;)
z*LLGyVd)Qk|Ji$(J?dTY-07-((_=n&#1_`3T&d5FiH|guzja;wny>q}tw+C34*a{8
zfJ9i0DbumfeTVp1E#|(wudjdSJE%AnL@H&$nSBB{^D;34Gp|fN9u>e68m!_b0O__-
AD*ylh

literal 0
HcmV?d00001

diff --git a/apps/web/app/public/placeholder.jpg b/apps/web/app/public/placeholder.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6bfe96336dbe567f5f1e9129f5bccdc78b114bba
GIT binary patch
literal 1064
zcmb7@Nla5w6o$`zL;Ko7c&|)~7+MC)5J;K9giwZ-mWToZDl29|7tA;;v?z!g5*b9%
zRSP(-1ZOwO;J6Z;05{Ybq6y%HZtA^{7Ghj^Zu0K`Ud}o9eCM5OpR~^apJ^}|03iS)
zUSPLDyMAv~1wd97gaQBuEK&lE6~YUU53r&J$VBT_bS?^Z_)q|CRlqoW3h_=1XC~2(
zowlIWj23Fe8(HX8O~UM7AR)W5x}mzhvbshU9ifGUR8tm1vSSl<kSO`*>)WSJzz{QQ
zmi2yKN<Cm70f8eW(?|eHK(v7DW8jCYV3BBI7ywN%hy{t1lgSm>VU))a_#4eg7^#He
zB=v{_T40oFHqzanm!#xGc@)<MNSjrish-x{=)u4et=Dkfcv@G?A<ni{7gXvUJKtU3
zmz_Rzcws|cT-nKnk)nx~{xvmkH2V1RtND!sJ)^CQ&kRlGw;2T$*JSdwKEWZO35gqx
zrp#^IcNFfdtlG6_@4o#<+KwJO-f`-5@0qifbLTHyyma}>^&2;D-M({g?EZs?j~+jH
z`uxSqSCdoIGw<Gi`1omd?(4VjKYlL#`b{Wtcb6gYQ{*HN47*B+TS8$@nxa{Xr5L6S
z;U3YvQq8C$Q`}jte^ic#P7)nZoa$Md8`GQ}*lA50^pcjuZk-<wDjH6=)h&1*Dvhhz
zpwH{l^iAOAtr0omF^C}pqvRJ5n6mN;!c*VS*hHAjhg({gxw=pGETi=gIN*k^UUTq`
zj5-OQIT7EybwDnzP`-vVP;i`_lPcsgxvPu9Rq#~`Zf=7AS|1PJkif9e;6RNgJW3ZI
zu1(TvGzps$lhX7?lQArAOa5j<o-V_vx8o$p#nn}C6VytjS|6c_(EqpDr@@65+b7`R
zn%j-vIox%`QU^te2QL{dOFV{7i9nK!9mXJ<Cs%<YhW{A=rNHy5j!elZu5IqL4i3+c
z^R@+*R+n8=WA3nAx%YI&c|fxI?q6r~ek7ehemM<@V)2~gYb`?{s3UotPgOhL*=!vg
XAGR(0la3V0lXM&+MLHyoCvxf!Qm;2N

literal 0
HcmV?d00001

diff --git a/apps/web/app/public/placeholder.svg b/apps/web/app/public/placeholder.svg
new file mode 100644
index 0000000..e763910
--- /dev/null
+++ b/apps/web/app/public/placeholder.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/apps/web/components.json b/apps/web/components.json
new file mode 100644
index 0000000..36ef86e
--- /dev/null
+++ b/apps/web/components.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}
diff --git a/apps/web/components/ui/badge.tsx b/apps/web/components/ui/badge.tsx
new file mode 100644
index 0000000..e87d62b
--- /dev/null
+++ b/apps/web/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/apps/web/components/ui/button.tsx b/apps/web/components/ui/button.tsx
new file mode 100644
index 0000000..65d4fcd
--- /dev/null
+++ b/apps/web/components/ui/button.tsx
@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
diff --git a/apps/web/components/ui/card.tsx b/apps/web/components/ui/card.tsx
new file mode 100644
index 0000000..cabfbfc
--- /dev/null
+++ b/apps/web/components/ui/card.tsx
@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/apps/web/components/ui/input.tsx b/apps/web/components/ui/input.tsx
new file mode 100644
index 0000000..69b64fb
--- /dev/null
+++ b/apps/web/components/ui/input.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }
diff --git a/apps/web/components/ui/label.tsx b/apps/web/components/ui/label.tsx
new file mode 100644
index 0000000..5341821
--- /dev/null
+++ b/apps/web/components/ui/label.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
diff --git a/apps/web/lib/utils.ts b/apps/web/lib/utils.ts
new file mode 100644
index 0000000..bd0c391
--- /dev/null
+++ b/apps/web/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/apps/web/package.json b/apps/web/package.json
index c54b4b9..981dda2 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -19,14 +19,21 @@
   "dependencies": {
     "@auth/prisma-adapter": "^2.10.0",
     "@prisma/client": "^6.14.0",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
     "@repo/ui": "workspace:*",
     "@types/bcryptjs": "^3.0.0",
     "bcryptjs": "^3.0.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.544.0",
     "next": "^15.5.0",
     "next-auth": "^4.24.11",
     "prisma": "^6.14.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss-animate": "^1.0.7",
     "zod": "^4.1.1"
   },
   "devDependencies": {
diff --git a/apps/web/prisma/migrations/20250911181640_init/migration.sql b/apps/web/prisma/migrations/20250911181640_init/migration.sql
new file mode 100644
index 0000000..1cc7d33
--- /dev/null
+++ b/apps/web/prisma/migrations/20250911181640_init/migration.sql
@@ -0,0 +1,82 @@
+-- CreateTable
+CREATE TABLE "public"."User" (
+    "id" TEXT NOT NULL,
+    "name" TEXT,
+    "email" TEXT NOT NULL,
+    "emailVerified" TIMESTAMP(3),
+    "image" TEXT,
+    "password" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "User_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "public"."Account" (
+    "userId" TEXT NOT NULL,
+    "type" TEXT NOT NULL,
+    "provider" TEXT NOT NULL,
+    "providerAccountId" TEXT NOT NULL,
+    "refresh_token" TEXT,
+    "access_token" TEXT,
+    "expires_at" INTEGER,
+    "token_type" TEXT,
+    "scope" TEXT,
+    "id_token" TEXT,
+    "session_state" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "Account_pkey" PRIMARY KEY ("provider","providerAccountId")
+);
+
+-- CreateTable
+CREATE TABLE "public"."Session" (
+    "sessionToken" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "expires" TIMESTAMP(3) NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL
+);
+
+-- CreateTable
+CREATE TABLE "public"."VerificationToken" (
+    "identifier" TEXT NOT NULL,
+    "token" TEXT NOT NULL,
+    "expires" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "VerificationToken_pkey" PRIMARY KEY ("identifier","token")
+);
+
+-- CreateTable
+CREATE TABLE "public"."Authenticator" (
+    "credentialID" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "providerAccountId" TEXT NOT NULL,
+    "credentialPublicKey" TEXT NOT NULL,
+    "counter" INTEGER NOT NULL,
+    "credentialDeviceType" TEXT NOT NULL,
+    "credentialBackedUp" BOOLEAN NOT NULL,
+    "transports" TEXT,
+
+    CONSTRAINT "Authenticator_pkey" PRIMARY KEY ("userId","credentialID")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_email_key" ON "public"."User"("email");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Session_sessionToken_key" ON "public"."Session"("sessionToken");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Authenticator_credentialID_key" ON "public"."Authenticator"("credentialID");
+
+-- AddForeignKey
+ALTER TABLE "public"."Account" ADD CONSTRAINT "Account_userId_fkey" FOREIGN KEY ("userId") REFERENCES "public"."User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "public"."Session" ADD CONSTRAINT "Session_userId_fkey" FOREIGN KEY ("userId") REFERENCES "public"."User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "public"."Authenticator" ADD CONSTRAINT "Authenticator_userId_fkey" FOREIGN KEY ("userId") REFERENCES "public"."User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/apps/web/prisma/migrations/migration_lock.toml b/apps/web/prisma/migrations/migration_lock.toml
new file mode 100644
index 0000000..044d57c
--- /dev/null
+++ b/apps/web/prisma/migrations/migration_lock.toml
@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (e.g., Git)
+provider = "postgresql"
diff --git a/apps/web/tailwind.config.js b/apps/web/tailwind.config.js
index e91f7ff..d2cd25e 100644
--- a/apps/web/tailwind.config.js
+++ b/apps/web/tailwind.config.js
@@ -1,12 +1,61 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
+    darkMode: ['class'],
+    content: [
     './pages/**/*.{js,ts,jsx,tsx,mdx}',
     './components/**/*.{js,ts,jsx,tsx,mdx}',
     './app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
-    extend: {},
+  	extend: {
+  		borderRadius: {
+  			lg: 'var(--radius)',
+  			md: 'calc(var(--radius) - 2px)',
+  			sm: 'calc(var(--radius) - 4px)'
+  		},
+  		colors: {
+  			background: 'hsl(var(--background))',
+  			foreground: 'hsl(var(--foreground))',
+  			card: {
+  				DEFAULT: 'hsl(var(--card))',
+  				foreground: 'hsl(var(--card-foreground))'
+  			},
+  			popover: {
+  				DEFAULT: 'hsl(var(--popover))',
+  				foreground: 'hsl(var(--popover-foreground))'
+  			},
+  			primary: {
+  				DEFAULT: 'hsl(var(--primary))',
+  				foreground: 'hsl(var(--primary-foreground))'
+  			},
+  			secondary: {
+  				DEFAULT: 'hsl(var(--secondary))',
+  				foreground: 'hsl(var(--secondary-foreground))'
+  			},
+  			muted: {
+  				DEFAULT: 'hsl(var(--muted))',
+  				foreground: 'hsl(var(--muted-foreground))'
+  			},
+  			accent: {
+  				DEFAULT: 'hsl(var(--accent))',
+  				foreground: 'hsl(var(--accent-foreground))'
+  			},
+  			destructive: {
+  				DEFAULT: 'hsl(var(--destructive))',
+  				foreground: 'hsl(var(--destructive-foreground))'
+  			},
+  			border: 'hsl(var(--border))',
+  			input: 'hsl(var(--input))',
+  			ring: 'hsl(var(--ring))',
+  			chart: {
+  				'1': 'hsl(var(--chart-1))',
+  				'2': 'hsl(var(--chart-2))',
+  				'3': 'hsl(var(--chart-3))',
+  				'4': 'hsl(var(--chart-4))',
+  				'5': 'hsl(var(--chart-5))'
+  			}
+  		}
+  	}
   },
-  plugins: [],
+  plugins: [require("tailwindcss-animate")],
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5a60db2..2ebbbc2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -74,6 +74,12 @@ importers:
       '@prisma/client':
         specifier: ^6.14.0
         version: 6.14.0(prisma@6.14.0(typescript@5.9.2))(typescript@5.9.2)
+      '@radix-ui/react-label':
+        specifier: ^2.1.7
+        version: 2.1.7(@types/react-dom@19.1.1(@types/react@19.1.0))(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot':
+        specifier: ^1.2.3
+        version: 1.2.3(@types/react@19.1.0)(react@19.1.0)
       '@repo/ui':
         specifier: workspace:*
         version: link:../../packages/ui
@@ -83,12 +89,21 @@ importers:
       bcryptjs:
         specifier: ^3.0.2
         version: 3.0.2
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      lucide-react:
+        specifier: ^0.544.0
+        version: 0.544.0(react@19.1.0)
       next:
         specifier: ^15.5.0
         version: 15.5.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       next-auth:
         specifier: ^4.24.11
-        version: 4.24.11(next@15.5.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+        version: 4.24.11(@auth/core@0.40.0)(next@15.5.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       prisma:
         specifier: ^6.14.0
         version: 6.14.0(typescript@5.9.2)
@@ -98,6 +113,12 @@ importers:
       react-dom:
         specifier: ^19.1.0
         version: 19.1.0(react@19.1.0)
+      tailwind-merge:
+        specifier: ^3.3.1
+        version: 3.3.1
+      tailwindcss-animate:
+        specifier: ^1.0.7
+        version: 1.0.7(tailwindcss@3.4.17)
       zod:
         specifier: ^4.1.1
         version: 4.1.1
@@ -534,6 +555,50 @@ packages:
   '@prisma/get-platform@6.14.0':
     resolution: {integrity: sha512-7VjuxKNwjnBhKfqPpMeWiHEa2sVjYzmHdl1slW6STuUCe9QnOY0OY1ljGSvz6wpG4U8DfbDqkG1yofd/1GINww==}
 
+  '@radix-ui/react-compose-refs@1.1.2':
+    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-label@2.1.7':
+    resolution: {integrity: sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==}
+    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
+
+  '@radix-ui/react-primitive@2.1.3':
+    resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
+    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
+
+  '@radix-ui/react-slot@1.2.3':
+    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@standard-schema/spec@1.0.0':
     resolution: {integrity: sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==}
 
@@ -777,9 +842,16 @@ packages:
   citty@0.1.6:
     resolution: {integrity: sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==}
 
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
   client-only@0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
 
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -1377,6 +1449,11 @@ packages:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
 
+  lucide-react@0.544.0:
+    resolution: {integrity: sha512-t5tS44bqd825zAW45UQxpG2CvcC4urOwn2TrwSH8u+MjeE+1NnWl6QqeQ/6NdjMqdOygyiT9p3Ev0p1NJykxjw==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -1880,6 +1957,14 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  tailwind-merge@3.3.1:
+    resolution: {integrity: sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==}
+
+  tailwindcss-animate@1.0.7:
+    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+
   tailwindcss@3.4.17:
     resolution: {integrity: sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==}
     engines: {node: '>=14.0.0'}
@@ -2324,6 +2409,37 @@ snapshots:
     dependencies:
       '@prisma/debug': 6.14.0
 
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.1.0)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.0
+
+  '@radix-ui/react-label@2.1.7(@types/react-dom@19.1.1(@types/react@19.1.0))(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.1(@types/react@19.1.0))(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.0
+      '@types/react-dom': 19.1.1(@types/react@19.1.0)
+
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.1.1(@types/react@19.1.0))(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.0)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.0
+      '@types/react-dom': 19.1.1(@types/react@19.1.0)
+
+  '@radix-ui/react-slot@1.2.3(@types/react@19.1.0)(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.0)(react@19.1.0)
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.0
+
   '@standard-schema/spec@1.0.0': {}
 
   '@swc/helpers@0.5.15':
@@ -2639,8 +2755,14 @@ snapshots:
     dependencies:
       consola: 3.4.2
 
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
   client-only@0.0.1: {}
 
+  clsx@2.1.1: {}
+
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
@@ -3341,6 +3463,10 @@ snapshots:
     dependencies:
       yallist: 4.0.0
 
+  lucide-react@0.544.0(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+
   math-intrinsics@1.1.0: {}
 
   merge2@1.4.1: {}
@@ -3372,7 +3498,7 @@ snapshots:
 
   natural-compare@1.4.0: {}
 
-  next-auth@4.24.11(next@15.5.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+  next-auth@4.24.11(@auth/core@0.40.0)(next@15.5.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
       '@babel/runtime': 7.28.3
       '@panva/hkdf': 1.2.1
@@ -3386,6 +3512,8 @@ snapshots:
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
       uuid: 8.3.2
+    optionalDependencies:
+      '@auth/core': 0.40.0
 
   next@15.5.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
@@ -3900,6 +4028,12 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  tailwind-merge@3.3.1: {}
+
+  tailwindcss-animate@1.0.7(tailwindcss@3.4.17):
+    dependencies:
+      tailwindcss: 3.4.17
+
   tailwindcss@3.4.17:
     dependencies:
       '@alloc/quick-lru': 5.2.0

From a91b6028279aed0c09ee280f4851a4783c230d61 Mon Sep 17 00:00:00 2001
From: Ritesh Pradhan <163156876+ritesh301@users.noreply.github.com>
Date: Thu, 2 Oct 2025 19:45:33 +0530
Subject: [PATCH 2/6] Update apps/web/app/features/page.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 apps/web/app/features/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/app/features/page.tsx b/apps/web/app/features/page.tsx
index 7abb698..9c7c59b 100644
--- a/apps/web/app/features/page.tsx
+++ b/apps/web/app/features/page.tsx
@@ -176,7 +176,7 @@ export default function FeaturesPage() {
               instant environments to enterprise-grade security.
             </p>
             <div className="mt-10 flex items-center justify-center gap-x-6">
-              <Button size="lg" className="h-12 px-8" onClick={() => router.push("/register")}>
+              <Button size="lg" className="h-12 px-8" onClick={() => router.push("/signup")}>
                 Start Using These Features
                 <ArrowLeft className="ml-2 h-4 w-4 rotate-180" />
               </Button>

From c578d0659b91b842d304f13f376005a7617ce839 Mon Sep 17 00:00:00 2001
From: Vaibhav Patil <vpatil5212@gmail.com>
Date: Thu, 9 Oct 2025 16:38:33 +0530
Subject: [PATCH 3/6] Apply suggestion from @coderabbitai[bot]

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 apps/web/app/components/ui/button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/app/components/ui/button.tsx b/apps/web/app/components/ui/button.tsx
index 815443b..b639cd4 100644
--- a/apps/web/app/components/ui/button.tsx
+++ b/apps/web/app/components/ui/button.tsx
@@ -50,7 +50,7 @@ function Button({
   return (
     <Comp
       data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
+      className={cn(buttonVariants({ variant, size }), className)}
       {...props}
     />
   )

From d7f92d9f545f2e59dcb17f7f56ea38dfe70e5874 Mon Sep 17 00:00:00 2001
From: ritesh301 <riteshpradhan301@gmail.com>
Date: Wed, 22 Oct 2025 21:08:08 +0530
Subject: [PATCH 4/6] intializing ui

---
 apps/web/app/(auth)/signin/page.tsx | 167 +++++---
 apps/web/app/(auth)/signup/page.tsx | 239 +++++++----
 apps/web/app/dashboard/page.tsx     | 395 +++++++++--------
 apps/web/app/globals.css            | 203 +++++----
 apps/web/app/page.tsx               | 638 ++++++++--------------------
 apps/web/components/glow-menu.tsx   | 126 ++++++
 apps/web/components/icons.tsx       |  62 +++
 apps/web/components/sidebar.tsx     | 177 ++++++++
 8 files changed, 1138 insertions(+), 869 deletions(-)
 create mode 100644 apps/web/components/glow-menu.tsx
 create mode 100644 apps/web/components/icons.tsx
 create mode 100644 apps/web/components/sidebar.tsx

diff --git a/apps/web/app/(auth)/signin/page.tsx b/apps/web/app/(auth)/signin/page.tsx
index 2435564..117ba37 100644
--- a/apps/web/app/(auth)/signin/page.tsx
+++ b/apps/web/app/(auth)/signin/page.tsx
@@ -4,12 +4,11 @@ import { useState } from "react";
 import { signIn } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
-
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Code, ArrowLeft } from "lucide-react";
+import { Code, ArrowLeft, Mail, Lock, Loader2 } from "lucide-react";
 
 export default function SignInPage() {
   const [email, setEmail] = useState("");
@@ -33,7 +32,7 @@ export default function SignInPage() {
       if (result?.error) {
         setError("Invalid email or password. Please try again.");
       } else {
-        router.push("/dashboard"); // Redirect to dashboard on success
+        router.push("/dashboard");
         router.refresh();
       }
     } catch (error: unknown) {
@@ -44,23 +43,24 @@ export default function SignInPage() {
     }
   };
 
-  const handleOAuthSignIn = async (provider: string) => {
-    setIsLoading(true);
-    await signIn(provider, { callbackUrl: "/dashboard" });
-    // No need to setIsLoading(false) here, as the page will redirect
-  };
-
   return (
-    <div className="min-h-screen bg-background flex flex-col">
+    <div className="min-h-screen bg-background flex flex-col relative overflow-hidden">
+      {/* Animated Background */}
+      <div className="fixed inset-0 -z-10 grid-background opacity-20" />
+      <div className="fixed inset-0 -z-10">
+        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/20 rounded-full blur-3xl pulse-glow" />
+        <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-secondary/20 rounded-full blur-3xl pulse-glow" style={{ animationDelay: "1s" }} />
+      </div>
+
       {/* Header */}
-      <header className="border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <header className="border-b border-border bg-background/80 backdrop-blur-lg sticky top-0 z-50">
         <div className="container mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex h-16 items-center justify-between">
             <Link href="/" className="flex items-center space-x-2">
-              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
-                <Code className="h-5 w-5" />
+              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-primary to-secondary glow-primary">
+                <Code className="h-5 w-5 text-black" />
               </div>
-              <span className="text-xl font-bold text-foreground">Dev8.dev</span>
+              <span className="text-xl font-bold text-glow-primary">Dev8.dev</span>
             </Link>
             <Button variant="ghost" size="sm" onClick={() => router.push("/")}>
               <ArrowLeft className="mr-2 h-4 w-4" />
@@ -72,68 +72,108 @@ export default function SignInPage() {
 
       {/* Sign In Form */}
       <div className="flex-1 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
-        <div className="w-full max-w-md space-y-8">
+        <div className="w-full max-w-md space-y-8 fade-in">
           <div className="text-center">
-            <h2 className="text-3xl font-bold tracking-tight text-foreground">Welcome back</h2>
-            <p className="mt-2 text-muted-foreground">Sign in to access your Dev8.dev workspace</p>
+            <h2 className="text-4xl font-bold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary">
+              Welcome back
+            </h2>
+            <p className="mt-2 text-muted-foreground">Sign in to access your workspace</p>
           </div>
 
-          <Card className="border-border/50 bg-card/50 backdrop-blur">
+          <Card className="border-border bg-card/50 backdrop-blur hover:glow-primary transition-all duration-300">
             <CardHeader className="space-y-1 text-center">
               <CardTitle className="text-2xl">Sign In</CardTitle>
               <CardDescription>Enter your credentials to continue</CardDescription>
             </CardHeader>
-            <CardContent>
+            <CardContent className="space-y-4">
               {error && (
-                <div className="mb-4 rounded-md border border-destructive/50 bg-destructive/10 p-3">
+                <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-3 glow-primary">
                   <p className="text-sm font-medium text-destructive">{error}</p>
                 </div>
               )}
+
               <form onSubmit={handleSubmit} className="space-y-4">
                 <div className="space-y-2">
-                  <Label htmlFor="email">Email</Label>
-                  <Input
-                    id="email"
-                    name="email"
-                    type="email"
-                    autoComplete="email"
-                    placeholder="Enter your email"
-                    value={email}
-                    onChange={(e) => setEmail(e.target.value)}
-                    required
-                    disabled={isLoading}
-                  />
+                  <Label htmlFor="email" className="text-foreground">Email</Label>
+                  <div className="relative">
+                    <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
+                    <Input
+                      id="email"
+                      name="email"
+                      type="email"
+                      autoComplete="email"
+                      placeholder="you@example.com"
+                      value={email}
+                      onChange={(e) => setEmail(e.target.value)}
+                      required
+                      disabled={isLoading}
+                      className="pl-10 bg-input border-border focus:border-primary focus:ring-primary"
+                    />
+                  </div>
                 </div>
+
                 <div className="space-y-2">
-                  <Label htmlFor="password">Password</Label>
-                  <Input
-                    id="password"
-                    name="password"
-                    type="password"
-                    autoComplete="current-password"
-                    placeholder="Enter your password"
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    required
-                    disabled={isLoading}
-                  />
+                  <Label htmlFor="password" className="text-foreground">Password</Label>
+                  <div className="relative">
+                    <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
+                    <Input
+                      id="password"
+                      name="password"
+                      type="password"
+                      autoComplete="current-password"
+                      placeholder="••••••••"
+                      value={password}
+                      onChange={(e) => setPassword(e.target.value)}
+                      required
+                      disabled={isLoading}
+                      className="pl-10 bg-input border-border focus:border-primary focus:ring-primary"
+                    />
+                  </div>
                 </div>
-                <Button type="submit" className="w-full" disabled={isLoading}>
-                  {isLoading ? "Signing In..." : "Sign In with Email"}
+
+                <Button
+                  type="submit"
+                  className="w-full bg-gradient-to-r from-primary to-secondary hover:glow-primary"
+                  disabled={isLoading}
+                >
+                  {isLoading ? (
+                    <>
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      Signing in...
+                    </>
+                  ) : (
+                    "Sign In"
+                  )}
                 </Button>
               </form>
 
               <div className="relative my-6">
                 <div className="absolute inset-0 flex items-center">
-                  <span className="w-full border-t border-border" />
+                  <div className="w-full border-t border-border"></div>
                 </div>
                 <div className="relative flex justify-center text-xs uppercase">
                   <span className="bg-card px-2 text-muted-foreground">Or continue with</span>
                 </div>
               </div>
 
-              <div className="grid grid-cols-2 gap-3">
-                <Button variant="outline" type="button" onClick={() => handleOAuthSignIn("google")} disabled={isLoading}>
+              <div className="grid grid-cols-2 gap-4">
+                <Button
+                  variant="outline"
+                  onClick={() => signIn("github", { callbackUrl: "/dashboard" })}
+                  disabled={isLoading}
+                  className="border-border hover:bg-muted hover:glow-secondary"
+                >
+                  <svg className="mr-2 h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
+                  </svg>
+                  GitHub
+                </Button>
+                <Button
+                  variant="outline"
+                  onClick={() => signIn("google", { callbackUrl: "/dashboard" })}
+                  disabled={isLoading}
+                  className="border-border hover:bg-muted hover:glow-secondary"
+                >
                   <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24">
                     <path
                       fill="currentColor"
@@ -154,30 +194,21 @@ export default function SignInPage() {
                   </svg>
                   Google
                 </Button>
-                <Button variant="outline" type="button" onClick={() => handleOAuthSignIn("github")} disabled={isLoading}>
-                  <svg className="mr-2 h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
-                    <path
-                      fillRule="evenodd"
-                      d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z"
-                      clipRule="evenodd"
-                    />
-                  </svg>
-                  GitHub
-                </Button>
               </div>
 
-              <div className="mt-6 text-center">
-                <p className="text-sm text-muted-foreground">
-                  Don't have an account?{" "}
-                  <Link href="/signup" className="font-medium text-primary hover:underline">
-                    Sign up
-                  </Link>
-                </p>
-              </div>
+              <p className="text-center text-sm text-muted-foreground mt-6">
+                Don't have an account?{" "}
+                <Link
+                  href="/signup"
+                  className="font-medium text-primary hover:text-primary/80 transition-colors"
+                >
+                  Sign up
+                </Link>
+              </p>
             </CardContent>
           </Card>
         </div>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/web/app/(auth)/signup/page.tsx b/apps/web/app/(auth)/signup/page.tsx
index 178ebf0..5649b62 100644
--- a/apps/web/app/(auth)/signup/page.tsx
+++ b/apps/web/app/(auth)/signup/page.tsx
@@ -4,12 +4,11 @@ import { useState } from "react";
 import { signIn } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
-
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Code, ArrowLeft } from "lucide-react";
+import { Code, ArrowLeft, Mail, Lock, User, Loader2, CheckCircle } from "lucide-react";
 
 export default function SignUpPage() {
   const [name, setName] = useState("");
@@ -33,6 +32,12 @@ export default function SignUpPage() {
       return;
     }
 
+    if (password.length < 8) {
+      setError("Password must be at least 8 characters long");
+      setIsLoading(false);
+      return;
+    }
+
     try {
       const response = await fetch("/api/auth/register", {
         method: "POST",
@@ -67,22 +72,24 @@ export default function SignUpPage() {
     }
   };
 
-  const handleOAuthSignIn = async (provider: string) => {
-    setIsLoading(true);
-    await signIn(provider, { callbackUrl: "/dashboard" });
-  };
-
   return (
-    <div className="min-h-screen bg-background flex flex-col">
+    <div className="min-h-screen bg-background flex flex-col relative overflow-hidden">
+      {/* Animated Background */}
+      <div className="fixed inset-0 -z-10 grid-background opacity-20" />
+      <div className="fixed inset-0 -z-10">
+        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/20 rounded-full blur-3xl pulse-glow" />
+        <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-secondary/20 rounded-full blur-3xl pulse-glow" style={{ animationDelay: "1s" }} />
+      </div>
+
       {/* Header */}
-      <header className="border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <header className="border-b border-border bg-background/80 backdrop-blur-lg sticky top-0 z-50">
         <div className="container mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex h-16 items-center justify-between">
             <Link href="/" className="flex items-center space-x-2">
-              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
-                <Code className="h-5 w-5" />
+              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-primary to-secondary glow-primary">
+                <Code className="h-5 w-5 text-black" />
               </div>
-              <span className="text-xl font-bold text-foreground">Dev8.dev</span>
+              <span className="text-xl font-bold text-glow-primary">Dev8.dev</span>
             </Link>
             <Button variant="ghost" size="sm" onClick={() => router.push("/")}>
               <ArrowLeft className="mr-2 h-4 w-4" />
@@ -94,103 +101,156 @@ export default function SignUpPage() {
 
       {/* Sign Up Form */}
       <div className="flex-1 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
-        <div className="w-full max-w-md space-y-8">
+        <div className="w-full max-w-md space-y-8 fade-in">
           <div className="text-center">
-            <h2 className="text-3xl font-bold tracking-tight text-foreground">Create your account</h2>
+            <h2 className="text-4xl font-bold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary">
+              Create your account
+            </h2>
             <p className="mt-2 text-muted-foreground">Start coding in the cloud in seconds</p>
           </div>
 
-          <Card className="border-border/50 bg-card/50 backdrop-blur">
+          <Card className="border-border bg-card/50 backdrop-blur hover:glow-primary transition-all duration-300">
             <CardHeader className="space-y-1 text-center">
               <CardTitle className="text-2xl">Sign Up</CardTitle>
-              <CardDescription>Create your Dev8.dev account to get started</CardDescription>
+              <CardDescription>Enter your details to get started</CardDescription>
             </CardHeader>
-            <CardContent>
+            <CardContent className="space-y-4">
               {error && (
-                <div className="mb-4 rounded-md border border-destructive/50 bg-destructive/10 p-3">
+                <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-3 glow-primary">
                   <p className="text-sm font-medium text-destructive">{error}</p>
                 </div>
               )}
+
               {success && (
-                <div className="mb-4 rounded-md border border-green-500/50 bg-green-500/10 p-3">
-                  <p className="text-sm font-medium text-green-600">{success}</p>
+                <div className="rounded-lg border border-accent/50 bg-accent/10 p-3 glow-accent">
+                  <div className="flex items-center gap-2">
+                    <CheckCircle className="h-4 w-4 text-accent" />
+                    <p className="text-sm font-medium text-accent">{success}</p>
+                  </div>
                 </div>
               )}
+
               <form onSubmit={handleSubmit} className="space-y-4">
                 <div className="space-y-2">
-                  <Label htmlFor="name">Full Name</Label>
-                  <Input
-                    id="name"
-                    name="name"
-                    type="text"
-                    autoComplete="name"
-                    placeholder="Enter your full name"
-                    value={name}
-                    onChange={(e) => setName(e.target.value)}
-                    required
-                    disabled={isLoading}
-                  />
+                  <Label htmlFor="name" className="text-foreground">Full Name</Label>
+                  <div className="relative">
+                    <User className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
+                    <Input
+                      id="name"
+                      name="name"
+                      type="text"
+                      autoComplete="name"
+                      placeholder="John Doe"
+                      value={name}
+                      onChange={(e) => setName(e.target.value)}
+                      required
+                      disabled={isLoading}
+                      className="pl-10 bg-input border-border focus:border-primary focus:ring-primary"
+                    />
+                  </div>
                 </div>
+
                 <div className="space-y-2">
-                  <Label htmlFor="email">Email</Label>
-                  <Input
-                    id="email"
-                    name="email"
-                    type="email"
-                    autoComplete="email"
-                    placeholder="john@example.com"
-                    value={email}
-                    onChange={(e) => setEmail(e.target.value)}
-                    required
-                    disabled={isLoading}
-                  />
+                  <Label htmlFor="email" className="text-foreground">Email</Label>
+                  <div className="relative">
+                    <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
+                    <Input
+                      id="email"
+                      name="email"
+                      type="email"
+                      autoComplete="email"
+                      placeholder="you@example.com"
+                      value={email}
+                      onChange={(e) => setEmail(e.target.value)}
+                      required
+                      disabled={isLoading}
+                      className="pl-10 bg-input border-border focus:border-primary focus:ring-primary"
+                    />
+                  </div>
                 </div>
+
                 <div className="space-y-2">
-                  <Label htmlFor="password">Password</Label>
-                  <Input
-                    id="password"
-                    name="password"
-                    type="password"
-                    autoComplete="new-password"
-                    placeholder="Create a strong password"
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    required
-                    disabled={isLoading}
-                  />
+                  <Label htmlFor="password" className="text-foreground">Password</Label>
+                  <div className="relative">
+                    <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
+                    <Input
+                      id="password"
+                      name="password"
+                      type="password"
+                      autoComplete="new-password"
+                      placeholder="••••••••"
+                      value={password}
+                      onChange={(e) => setPassword(e.target.value)}
+                      required
+                      disabled={isLoading}
+                      className="pl-10 bg-input border-border focus:border-primary focus:ring-primary"
+                    />
+                  </div>
                 </div>
+
                 <div className="space-y-2">
-                  <Label htmlFor="confirmPassword">Confirm Password</Label>
-                  <Input
-                    id="confirmPassword"
-                    name="confirmPassword"
-                    type="password"
-                    autoComplete="new-password"
-                    placeholder="Confirm your password"
-                    value={confirmPassword}
-                    onChange={(e) => setConfirmPassword(e.target.value)}
-                    required
-                    disabled={isLoading}
-                  />
+                  <Label htmlFor="confirmPassword" className="text-foreground">Confirm Password</Label>
+                  <div className="relative">
+                    <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
+                    <Input
+                      id="confirmPassword"
+                      name="confirmPassword"
+                      type="password"
+                      autoComplete="new-password"
+                      placeholder="••••••••"
+                      value={confirmPassword}
+                      onChange={(e) => setConfirmPassword(e.target.value)}
+                      required
+                      disabled={isLoading}
+                      className="pl-10 bg-input border-border focus:border-primary focus:ring-primary"
+                    />
+                  </div>
                 </div>
 
-                <Button type="submit" className="w-full" disabled={isLoading}>
-                  {isLoading ? "Creating Account..." : "Create Account"}
+                <Button
+                  type="submit"
+                  className="w-full bg-gradient-to-r from-primary to-secondary hover:glow-primary"
+                  disabled={isLoading}
+                >
+                  {isLoading ? (
+                    <>
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      Creating account...
+                    </>
+                  ) : (
+                    "Sign Up"
+                  )}
                 </Button>
               </form>
-              
+
               <div className="relative my-6">
                 <div className="absolute inset-0 flex items-center">
-                  <span className="w-full border-t border-border" />
+                  <div className="w-full border-t border-border"></div>
                 </div>
                 <div className="relative flex justify-center text-xs uppercase">
                   <span className="bg-card px-2 text-muted-foreground">Or continue with</span>
                 </div>
               </div>
 
-              <div className="grid grid-cols-2 gap-3">
-                <Button variant="outline" type="button" onClick={() => handleOAuthSignIn("google")} disabled={isLoading}>
-                <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24">
+              <div className="grid grid-cols-2 gap-4">
+                <Button
+                  variant="outline"
+                  onClick={() => signIn("github", { callbackUrl: "/dashboard" })}
+                  disabled={isLoading}
+                  className="border-border hover:bg-muted hover:glow-secondary"
+                >
+                  <svg className="mr-2 h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
+                  </svg>
+                  GitHub
+                </Button>
+                <Button
+                  variant="outline"
+                  onClick={() => signIn("google", { callbackUrl: "/dashboard" })}
+                  disabled={isLoading}
+                  className="border-border hover:bg-muted hover:glow-secondary"
+                >
+                  <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24">
                     <path
                       fill="currentColor"
                       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"
@@ -210,30 +270,21 @@ export default function SignUpPage() {
                   </svg>
                   Google
                 </Button>
-                <Button variant="outline" type="button" onClick={() => handleOAuthSignIn("github")} disabled={isLoading}>
-                <svg className="mr-2 h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
-                    <path
-                      fillRule="evenodd"
-                      d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z"
-                      clipRule="evenodd"
-                    />
-                  </svg>
-                  GitHub
-                </Button>
               </div>
 
-              <div className="mt-6 text-center">
-                <p className="text-sm text-muted-foreground">
-                  Already have an account?{" "}
-                  <Link href="/signin" className="font-medium text-primary hover:underline">
-                    Sign in
-                  </Link>
-                </p>
-              </div>
+              <p className="text-center text-sm text-muted-foreground mt-6">
+                Already have an account?{" "}
+                <Link
+                  href="/signin"
+                  className="font-medium text-primary hover:text-primary/80 transition-colors"
+                >
+                  Sign in
+                </Link>
+              </p>
             </CardContent>
           </Card>
         </div>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/web/app/dashboard/page.tsx b/apps/web/app/dashboard/page.tsx
index 277bef7..f34d665 100644
--- a/apps/web/app/dashboard/page.tsx
+++ b/apps/web/app/dashboard/page.tsx
@@ -1,223 +1,252 @@
 "use client";
 
-import { useSession, signOut } from "next-auth/react";
+import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
-import { useEffect } from "react";
-import Link from "next/link";
-import Image from "next/image";
+import { useEffect, useState } from "react";
+import { Sidebar } from "@/components/sidebar";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import {
+  Activity,
+  Code,
+  GitBranch,
+  Terminal,
+  Zap,
+  TrendingUp,
+  Clock,
+  Loader2,
+} from "lucide-react";
 
 export default function Dashboard() {
   const { data: session, status } = useSession();
   const router = useRouter();
+  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
-    if (status === "loading") return; // Still loading
+    setMounted(true);
+  }, []);
 
+  useEffect(() => {
+    if (status === "loading") return;
     if (!session) {
       router.push("/signin");
     }
   }, [session, status, router]);
 
-  if (status === "loading") {
+  if (!mounted || status === "loading") {
     return (
-      <div className="min-h-screen flex items-center justify-center">
-        <div className="text-lg">Loading...</div>
+      <div className="min-h-screen flex items-center justify-center bg-background">
+        <div className="flex flex-col items-center gap-4">
+          <Loader2 className="h-8 w-8 animate-spin text-primary" />
+          <div className="text-lg text-muted-foreground">Loading your workspace...</div>
+        </div>
       </div>
     );
   }
 
   if (!session) {
-    return null; // Will redirect
+    return null;
   }
 
+  const recentProjects = [
+    {
+      name: "my-next-app",
+      language: "TypeScript",
+      lastModified: "2 hours ago",
+      status: "active",
+    },
+    {
+      name: "api-backend",
+      language: "Node.js",
+      lastModified: "5 hours ago",
+      status: "idle",
+    },
+    {
+      name: "portfolio-site",
+      language: "React",
+      lastModified: "1 day ago",
+      status: "deployed",
+    },
+  ];
+
+  const stats = [
+    {
+      title: "Total Projects",
+      value: "12",
+      icon: Code,
+      trend: "+2 this week",
+      color: "primary",
+    },
+    {
+      title: "Active Sessions",
+      value: "3",
+      icon: Activity,
+      trend: "2 running now",
+      color: "accent",
+    },
+    {
+      title: "Deployments",
+      value: "24",
+      icon: Zap,
+      trend: "+6 this month",
+      color: "secondary",
+    },
+    {
+      title: "Build Time",
+      value: "2.3s",
+      icon: Clock,
+      trend: "25% faster",
+      color: "primary",
+    },
+  ];
+
   return (
-    <div className="min-h-screen bg-gray-50">
-      <nav className="bg-white shadow">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between h-16">
-            <div className="flex items-center">
-              <Link href="/" className="text-xl font-bold text-gray-900">
-                Dev8.dev
-              </Link>
-            </div>
-            <div className="flex items-center space-x-4">
-              <span className="text-gray-700">
-                {session.user?.name || session.user?.email}
-              </span>
-              <button
-                onClick={() => signOut()}
-                className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md text-sm font-medium"
-              >
-                Sign Out
-              </button>
+    <div className="min-h-screen bg-background relative overflow-hidden">
+      <div className="fixed inset-0 -z-10 grid-background opacity-20" />
+      <div className="fixed inset-0 -z-10">
+        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/10 rounded-full blur-3xl pulse-glow" />
+        <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-secondary/10 rounded-full blur-3xl pulse-glow" style={{ animationDelay: "1s" }} />
+      </div>
+
+      <Sidebar />
+
+      <main className="ml-64 min-h-screen transition-all duration-300">
+        <div className="container mx-auto px-8 py-8">
+          <div className="flex items-center justify-between mb-8">
+            <div>
+              <h1 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary">
+                Welcome back, {session.user?.name || "Developer"}!
+              </h1>
+              <p className="text-muted-foreground mt-2">
+                Here&apos;s what&apos;s happening with your projects today
+              </p>
             </div>
+            <Button
+              onClick={() => router.push("/editor")}
+              className="bg-gradient-to-r from-primary to-secondary hover:glow-primary"
+            >
+              <Code className="mr-2 h-4 w-4" />
+              New Project
+            </Button>
           </div>
-        </div>
-      </nav>
-
-      <main className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
-        <div className="md:flex md:items-center md:justify-between mb-8">
-          <div className="flex-1 min-w-0">
-            <h2 className="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
-              Dashboard
-            </h2>
-            <p className="mt-1 text-sm text-gray-500">
-              Welcome to your protected dashboard!
-            </p>
-          </div>
-        </div>
 
-        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
-          {/* Profile Card */}
-          <div className="bg-white overflow-hidden shadow rounded-lg">
-            <div className="p-5">
-              <div className="flex items-center">
-                <div className="flex-shrink-0">
-                  {session.user?.image ? (
-                    <Image
-                      className="h-10 w-10 rounded-full"
-                      src={session.user.image}
-                      alt="Profile"
-                      width={40}
-                      height={40}
-                    />
-                  ) : (
-                    <div className="h-10 w-10 rounded-full bg-gray-300 flex items-center justify-center">
-                      <span className="text-gray-600 font-medium">
-                        {session.user?.name?.[0] ||
-                          session.user?.email?.[0] ||
-                          "U"}
-                      </span>
-                    </div>
-                  )}
-                </div>
-                <div className="ml-5 w-0 flex-1">
-                  <dl>
-                    <dt className="text-sm font-medium text-gray-500 truncate">
-                      Profile
-                    </dt>
-                    <dd className="text-lg font-medium text-gray-900">
-                      {session.user?.name || "Anonymous User"}
-                    </dd>
-                  </dl>
-                </div>
-              </div>
-            </div>
-            <div className="bg-gray-50 px-5 py-3">
-              <div className="text-sm">
-                <Link
-                  href="/profile"
-                  className="font-medium text-indigo-600 hover:text-indigo-500"
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+            {stats.map((stat, index) => {
+              const Icon = stat.icon;
+              return (
+                <Card
+                  key={index}
+                  className="border-border bg-card/50 backdrop-blur hover:glow-primary hover-lift transition-all duration-300"
                 >
-                  View profile
-                </Link>
-              </div>
-            </div>
+                  <CardHeader className="flex flex-row items-center justify-between pb-2">
+                    <CardTitle className="text-sm font-medium text-muted-foreground">
+                      {stat.title}
+                    </CardTitle>
+                    <div className="p-2 rounded-lg bg-primary/10">
+                      <Icon className="h-4 w-4 text-primary" />
+                    </div>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="text-3xl font-bold text-foreground">{stat.value}</div>
+                    <p className="text-xs text-muted-foreground mt-1 flex items-center gap-1">
+                      <TrendingUp className="h-3 w-3" />
+                      {stat.trend}
+                    </p>
+                  </CardContent>
+                </Card>
+              );
+            })}
           </div>
 
-          {/* Session Info Card */}
-          <div className="bg-white overflow-hidden shadow rounded-lg">
-            <div className="p-5">
-              <div className="flex items-center">
-                <div className="flex-shrink-0">
-                  <svg
-                    className="h-8 w-8 text-gray-400"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
-                    />
-                  </svg>
-                </div>
-                <div className="ml-5 w-0 flex-1">
-                  <dl>
-                    <dt className="text-sm font-medium text-gray-500 truncate">
-                      Session Status
-                    </dt>
-                    <dd className="text-lg font-medium text-gray-900">
-                      Active
-                    </dd>
-                  </dl>
+          <Card className="border-border bg-card/50 backdrop-blur mb-8">
+            <CardHeader>
+              <div className="flex items-center justify-between">
+                <div>
+                  <CardTitle className="text-2xl">Recent Projects</CardTitle>
+                  <CardDescription>Your most recently active projects</CardDescription>
                 </div>
+                <Button variant="outline" className="hover:glow-secondary">
+                  View All
+                </Button>
               </div>
-            </div>
-            <div className="bg-gray-50 px-5 py-3">
-              <div className="text-sm">
-                <span className="font-medium text-green-600">
-                  Authenticated
-                </span>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                {recentProjects.map((project, index) => (
+                  <div
+                    key={index}
+                    className="flex items-center justify-between p-4 rounded-lg border border-border bg-card hover:bg-muted/50 transition-all cursor-pointer hover-lift"
+                  >
+                    <div className="flex items-center gap-4">
+                      <div className="p-3 rounded-lg bg-primary/10">
+                        <Code className="h-5 w-5 text-primary" />
+                      </div>
+                      <div>
+                        <h3 className="font-semibold text-foreground">{project.name}</h3>
+                        <p className="text-sm text-muted-foreground">{project.language}</p>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-4">
+                      <div className="text-right">
+                        <p className="text-sm text-muted-foreground">{project.lastModified}</p>
+                      </div>
+                      <Badge
+                        variant={
+                          project.status === "active"
+                            ? "default"
+                            : project.status === "deployed"
+                            ? "secondary"
+                            : "outline"
+                        }
+                        className={
+                          project.status === "active"
+                            ? "bg-accent/20 text-accent border-accent/50"
+                            : ""
+                        }
+                      >
+                        {project.status}
+                      </Badge>
+                      <Button variant="ghost" size="sm">
+                        <Terminal className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </div>
+                ))}
               </div>
-            </div>
-          </div>
+            </CardContent>
+          </Card>
 
-          {/* Settings Card */}
-          <div className="bg-white overflow-hidden shadow rounded-lg">
-            <div className="p-5">
-              <div className="flex items-center">
-                <div className="flex-shrink-0">
-                  <svg
-                    className="h-8 w-8 text-gray-400"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
-                    />
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                    />
-                  </svg>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <Card className="border-border bg-card/50 backdrop-blur hover:glow-primary hover-lift cursor-pointer transition-all duration-300">
+              <CardHeader>
+                <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 mb-2">
+                  <GitBranch className="h-6 w-6 text-primary" />
                 </div>
-                <div className="ml-5 w-0 flex-1">
-                  <dl>
-                    <dt className="text-sm font-medium text-gray-500 truncate">
-                      Settings
-                    </dt>
-                    <dd className="text-lg font-medium text-gray-900">
-                      Account Settings
-                    </dd>
-                  </dl>
+                <CardTitle>Clone Repository</CardTitle>
+                <CardDescription>Import a project from GitHub, GitLab, or Bitbucket</CardDescription>
+              </CardHeader>
+            </Card>
+
+            <Card className="border-border bg-card/50 backdrop-blur hover:glow-secondary hover-lift cursor-pointer transition-all duration-300">
+              <CardHeader>
+                <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-secondary/10 mb-2">
+                  <Terminal className="h-6 w-6 text-secondary" />
                 </div>
-              </div>
-            </div>
-            <div className="bg-gray-50 px-5 py-3">
-              <div className="text-sm">
-                <Link
-                  href="/settings"
-                  className="font-medium text-indigo-600 hover:text-indigo-500"
-                >
-                  Manage settings
-                </Link>
-              </div>
-            </div>
-          </div>
-        </div>
+                <CardTitle>New Terminal</CardTitle>
+                <CardDescription>Open a new terminal session in the cloud</CardDescription>
+              </CardHeader>
+            </Card>
 
-        {/* Session Details */}
-        <div className="mt-8">
-          <div className="bg-white overflow-hidden shadow rounded-lg">
-            <div className="px-4 py-5 sm:p-6">
-              <h3 className="text-lg leading-6 font-medium text-gray-900 mb-4">
-                Session Details
-              </h3>
-              <div className="bg-gray-50 rounded-md p-4">
-                <pre className="text-sm text-gray-800 overflow-x-auto">
-                  {JSON.stringify(session, null, 2)}
-                </pre>
-              </div>
-            </div>
+            <Card className="border-border bg-card/50 backdrop-blur hover:glow-accent hover-lift cursor-pointer transition-all duration-300">
+              <CardHeader>
+                <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-accent/10 mb-2">
+                  <Zap className="h-6 w-6 text-accent" />
+                </div>
+                <CardTitle>Deploy Project</CardTitle>
+                <CardDescription>Deploy your application with one click</CardDescription>
+              </CardHeader>
+            </Card>
           </div>
         </div>
       </main>
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index b340ca1..f772663 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -19,100 +19,161 @@ a {
   text-decoration: none;
 }
 
-.imgDark {
-  display: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
+@layer base {
+  :root {
+    --background: 0 0% 3%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 6%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 4%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 189 100% 50%;
+    --primary-foreground: 0 0% 0%;
+    --secondary: 271 81% 56%;
+    --secondary-foreground: 0 0% 100%;
+    --accent: 142 76% 56%;
+    --accent-foreground: 0 0% 0%;
+    --muted: 0 0% 12%;
+    --muted-foreground: 0 0% 65%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 0 0% 15%;
+    --input: 0 0% 12%;
+    --ring: 189 100% 50%;
+    --radius: 0.75rem;
+    --glow-primary: 189 100% 50%;
+    --glow-secondary: 271 81% 56%;
+    --glow-accent: 142 76% 56%;
+    --glow-intensity: 0.6;
+    --sidebar-width: 280px;
+    --sidebar-collapsed-width: 80px;
+    --grid-color: 0 0% 10%;
+    --grid-size: 20px;
   }
 
-  .imgLight {
-    display: none;
+  * {
+    @apply border-border;
   }
-  .imgDark {
-    display: unset;
+  
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
   }
 }
 
+@layer utilities {
+  .glow-primary {
+    box-shadow: 
+      0 0 20px hsla(var(--glow-primary), var(--glow-intensity)),
+      0 0 40px hsla(var(--glow-primary), calc(var(--glow-intensity) * 0.6)),
+      0 0 60px hsla(var(--glow-primary), calc(var(--glow-intensity) * 0.3));
+  }
 
+  .glow-secondary {
+    box-shadow: 
+      0 0 20px hsla(var(--glow-secondary), var(--glow-intensity)),
+      0 0 40px hsla(var(--glow-secondary), calc(var(--glow-intensity) * 0.6)),
+      0 0 60px hsla(var(--glow-secondary), calc(var(--glow-intensity) * 0.3));
+  }
 
-
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-
-    --primary: 262.1 83.3% 57.8%;
-    --primary-foreground: 0 0% 100%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 215.4 16.3% 46.9%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 262.1 83.3% 57.8%;
-
-    --radius: 0.5rem;
+  .glow-accent {
+    box-shadow: 
+      0 0 20px hsla(var(--glow-accent), var(--glow-intensity)),
+      0 0 40px hsla(var(--glow-accent), calc(var(--glow-intensity) * 0.6)),
+      0 0 60px hsla(var(--glow-accent), calc(var(--glow-intensity) * 0.3));
   }
 
-  .dark {
-    /* You can define dark mode violet colors here later if you want */
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
+  .text-glow-primary {
+    text-shadow: 
+      0 0 10px hsla(var(--glow-primary), 0.8),
+      0 0 20px hsla(var(--glow-primary), 0.5),
+      0 0 30px hsla(var(--glow-primary), 0.3);
+  }
 
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
+  .text-glow-secondary {
+    text-shadow: 
+      0 0 10px hsla(var(--glow-secondary), 0.8),
+      0 0 20px hsla(var(--glow-secondary), 0.5),
+      0 0 30px hsla(var(--glow-secondary), 0.3);
+  }
 
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
+  .text-glow-accent {
+    text-shadow: 
+      0 0 10px hsla(var(--glow-accent), 0.8),
+      0 0 20px hsla(var(--glow-accent), 0.5),
+      0 0 30px hsla(var(--glow-accent), 0.3);
+  }
 
-    --primary: 262.1 83.3% 57.8%;
-    --primary-foreground: 0 0% 100%;
+  .grid-background {
+    background-image: 
+      linear-gradient(hsla(var(--grid-color), 0.5) 1px, transparent 1px),
+      linear-gradient(90deg, hsla(var(--grid-color), 0.5) 1px, transparent 1px);
+    background-size: var(--grid-size) var(--grid-size);
+  }
 
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
+  .scanlines {
+    position: relative;
+  }
 
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
+  .scanlines::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(transparent 50%, hsla(0, 0%, 0%, 0.05) 50%);
+    background-size: 100% 4px;
+    pointer-events: none;
+    z-index: 1;
+  }
 
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
+  .animated-border {
+    position: relative;
+    background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--secondary)), hsl(var(--accent)));
+    background-size: 200% 200%;
+    animation: border-animation 3s ease infinite;
+  }
 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
+  @keyframes border-animation {
+    0%, 100% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+  }
 
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 262.1 83.3% 57.8%;
+  .fade-in {
+    animation: fadeIn 0.6s ease-in;
   }
-}
 
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
 
+  .hover-lift {
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+  }
 
+  .hover-lift:hover {
+    transform: translateY(-4px);
+  }
 
-@layer base {
-  * {
-    @apply border-border;
+  @keyframes pulse-glow {
+    0%, 100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
   }
-  body {
-    @apply bg-background text-foreground;
+
+  .pulse-glow {
+    animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   }
 }
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index 3d5ffa3..4fd7831 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -1,510 +1,242 @@
-"use client"
-
-import { Button } from "@/components/ui/button"
-import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { Badge } from "@/components/ui/badge"
-import { ArrowRight, Code, Cloud, Shield, Zap, Terminal, GitBranch, Users } from "lucide-react"
-import { useRouter } from "next/navigation"
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { GlowMenu } from "@/components/glow-menu";
+import { useRouter } from "next/navigation";
+import {
+  Code,
+  Zap,
+  Shield,
+  Cloud,
+  Terminal,
+  GitBranch,
+  Layers,
+  Activity,
+  ArrowRight,
+  ChevronRight,
+  Sparkles,
+} from "lucide-react";
 
 export default function HomePage() {
-  const router = useRouter()
-
-  const handleNavigation = (path: string) => {
-    router.push(path)
-  }
+  const router = useRouter();
+
+  const menuItems = [
+    { label: "Features", href: "#features", icon: <Sparkles className="h-4 w-4" /> },
+    { label: "Pricing", href: "#pricing", icon: <Zap className="h-4 w-4" /> },
+    { label: "Docs", href: "#docs", icon: <Code className="h-4 w-4" /> },
+  ];
+
+  const features = [
+    {
+      icon: Code,
+      title: "Cloud IDE",
+      description: "Full-featured code editor with syntax highlighting and IntelliSense",
+    },
+    {
+      icon: Terminal,
+      title: "Integrated Terminal",
+      description: "Built-in terminal with full shell access and command execution",
+    },
+    {
+      icon: GitBranch,
+      title: "Git Integration",
+      description: "Seamless version control with GitHub, GitLab, and Bitbucket",
+    },
+    {
+      icon: Zap,
+      title: "Instant Deploy",
+      description: "Deploy your applications with a single click to the cloud",
+    },
+    {
+      icon: Layers,
+      title: "Multi-Language",
+      description: "Support for 50+ programming languages and frameworks",
+    },
+    {
+      icon: Shield,
+      title: "Secure & Private",
+      description: "Enterprise-grade security with encrypted connections",
+    },
+    {
+      icon: Cloud,
+      title: "Cloud Storage",
+      description: "Store and sync your projects across all devices",
+    },
+    {
+      icon: Activity,
+      title: "Real-time Collaboration",
+      description: "Code together with your team in real-time",
+    },
+  ];
 
   return (
     <div className="min-h-screen bg-background relative overflow-hidden">
-      <div className="fixed inset-0 -z-20">
-        <div className="absolute inset-0 bg-gradient-to-br from-background via-primary/3 to-violet-500/5"></div>
-        <div className="absolute top-0 left-1/4 w-96 h-96 bg-primary/8 rounded-full blur-3xl animate-pulse"></div>
-        <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-violet-500/8 rounded-full blur-3xl animate-pulse delay-1000"></div>
-        <div className="absolute top-1/2 left-1/2 w-64 h-64 bg-purple-500/6 rounded-full blur-2xl animate-pulse delay-500"></div>
+      {/* Animated Background */}
+      <div className="fixed inset-0 -z-10 grid-background opacity-20" />
+      <div className="fixed inset-0 -z-10">
+        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/20 rounded-full blur-3xl pulse-glow" />
+        <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-secondary/20 rounded-full blur-3xl pulse-glow" style={{ animationDelay: "1s" }} />
+        <div className="absolute top-1/2 left-1/2 w-64 h-64 bg-accent/20 rounded-full blur-3xl pulse-glow" style={{ animationDelay: "2s" }} />
       </div>
 
       {/* Header */}
-      <header className="border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50">
+      <header className="sticky top-0 z-50 border-b border-border bg-background/80 backdrop-blur-lg">
         <div className="container mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex h-16 items-center justify-between">
             <div className="flex items-center space-x-2">
-              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
-                <Code className="h-5 w-5" />
+              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-primary via-secondary to-accent glow-primary">
+                <Code className="h-6 w-6 text-black" />
               </div>
-              <span className="text-xl font-bold text-foreground">Dev8.dev</span>
+              <span className="text-2xl font-bold text-glow-primary">Dev8.dev</span>
             </div>
-            <nav className="hidden md:flex items-center space-x-8">
-              <button
-                onClick={() => handleNavigation("/features")}
-                className="text-muted-foreground hover:text-foreground transition-colors"
+
+            <div className="hidden md:block">
+              <GlowMenu items={menuItems} />
+            </div>
+
+            <div className="flex items-center space-x-4">
+              <Button
+                variant="ghost"
+                onClick={() => router.push("/signin")}
+                className="text-foreground hover:text-primary"
               >
-                Features
-              </button>
-              <Button variant="outline" size="sm" onClick={() => handleNavigation("/signin")}>
                 Sign In
               </Button>
-            </nav>
-          </div>
-        </div>
-      </header>
-
-      {/* Hero Section */}
-      <section className="relative overflow-hidden py-16 sm:py-24 bg-gradient-to-b from-background to-primary/5">
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
-          <div className="mx-auto max-w-4xl text-center">
-            <Badge variant="secondary" className="mb-6">
-              <Zap className="mr-1 h-3 w-3" />
-              Zero to coding in 30 seconds
-            </Badge>
-            <h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-6xl text-balance">
-              Your Development Environment in the <span className="text-primary">Cloud</span>
-            </h1>
-            <p className="mt-6 text-lg leading-8 text-muted-foreground text-pretty max-w-2xl mx-auto">
-              Dev8.dev provides instant, containerized development environments with full VS Code experience. Code
-              anywhere, anytime, with persistent storage and seamless collaboration.
-            </p>
-            <div className="mt-10 flex items-center justify-center gap-x-6">
-              <Button size="lg" className="h-12 px-8" onClick={() => handleNavigation("/signup")}>
-                Start Coding Now
-                <ArrowRight className="ml-2 h-4 w-4" />
-              </Button>
               <Button
-                variant="outline"
-                size="lg"
-                className="h-12 px-8 bg-transparent"
-                onClick={() => {
-                  document.getElementById("features")?.scrollIntoView({ behavior: "smooth" })
-                }}
+                onClick={() => router.push("/signup")}
+                className="bg-gradient-to-r from-primary to-secondary hover:glow-primary"
               >
-                View Demo
+                Get Started
+                <ChevronRight className="ml-2 h-4 w-4" />
               </Button>
             </div>
-            <div className="mt-8 flex items-center justify-center gap-x-8 text-sm text-muted-foreground">
-              <div className="flex items-center gap-x-2">
-                <div className="h-2 w-2 rounded-full bg-green-500"></div>
-                No setup required
-              </div>
-              <div className="flex items-center gap-x-2">
-                <div className="h-2 w-2 rounded-full bg-green-500"></div>
-                Free tier available
-              </div>
-              <div className="flex items-center gap-x-2">
-                <div className="h-2 w-2 rounded-full bg-green-500"></div>
-                Enterprise ready
-              </div>
-            </div>
           </div>
         </div>
+      </header>
 
-        <div className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80">
-          <div className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-primary via-violet-500 to-purple-600 opacity-20 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"></div>
-        </div>
-        <div className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]">
-          <div className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-violet-400 to-primary opacity-15 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"></div>
-        </div>
-      </section>
-
-      {/* Stats Section */}
-      <section className="py-12 bg-gradient-to-b from-primary/5 via-violet-500/8 to-primary/10 relative">
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
-          <div className="grid grid-cols-1 gap-8 sm:grid-cols-3 text-center">
-            <div>
-              <div className="text-3xl font-bold text-primary">30s</div>
-              <div className="text-sm text-muted-foreground">Environment Setup Time</div>
-            </div>
-            <div>
-              <div className="text-3xl font-bold text-primary">100%</div>
-              <div className="text-sm text-muted-foreground">Browser Compatible</div>
-            </div>
-            <div>
-              <div className="text-3xl font-bold text-primary">24/7</div>
-              <div className="text-sm text-muted-foreground">Cloud Availability</div>
-            </div>
+      {/* Hero Section */}
+      <section className="container mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32">
+        <div className="text-center space-y-8 fade-in">
+          <div className="inline-flex items-center space-x-2 rounded-full border border-primary/50 bg-primary/10 px-4 py-2 text-sm">
+            <Sparkles className="h-4 w-4 text-primary" />
+            <span className="text-primary font-medium">Now with AI-powered code completion</span>
           </div>
-        </div>
-      </section>
 
-      {/* Features Section */}
-      <section
-        id="features"
-        className="py-16 sm:py-20 bg-gradient-to-b from-primary/10 via-background to-violet-500/8 relative"
-      >
-        <div className="absolute inset-0 overflow-hidden pointer-events-none">
-          <div className="absolute top-20 left-10 w-4 h-4 bg-primary/20 rounded-full animate-bounce delay-300"></div>
-          <div className="absolute top-40 right-20 w-6 h-6 bg-violet-500/20 rounded-full animate-bounce delay-700"></div>
-          <div className="absolute bottom-40 left-1/4 w-3 h-3 bg-purple-500/20 rounded-full animate-bounce delay-1000"></div>
-          <div className="absolute bottom-20 right-1/3 w-5 h-5 bg-primary/20 rounded-full animate-bounce delay-500"></div>
-        </div>
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
-          <div className="mx-auto max-w-2xl text-center">
-            <h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl text-balance">
-              Everything you need to code in the cloud
-            </h2>
-            <p className="mt-4 text-lg text-muted-foreground text-pretty">
-              Powerful features designed for modern development workflows
-            </p>
+          <h1 className="text-5xl md:text-7xl font-bold tracking-tight">
+            Code in the
+            <span className="block text-transparent bg-clip-text bg-gradient-to-r from-primary via-secondary to-accent text-glow-primary">
+              Cloud, Deploy Instantly
+            </span>
+          </h1>
+
+          <p className="mx-auto max-w-2xl text-xl text-muted-foreground">
+            The most powerful cloud development environment. Write, test, and deploy your applications
+            with zero configuration. Start coding in seconds.
+          </p>
+
+          <div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-4">
+            <Button
+              size="lg"
+              onClick={() => router.push("/signup")}
+              className="bg-gradient-to-r from-primary to-secondary hover:glow-primary text-lg px-8"
+            >
+              Start Building Free
+              <ArrowRight className="ml-2 h-5 w-5" />
+            </Button>
+            <Button size="lg" variant="outline" className="text-lg px-8 hover:glow-secondary">
+              Watch Demo
+            </Button>
           </div>
 
-          <div className="mx-auto mt-16 max-w-7xl">
-            <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
-              {/* Feature 1 */}
-              <Card className="relative overflow-hidden border-border/50 bg-card/50 backdrop-blur">
-                <CardHeader>
-                  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
-                    <Terminal className="h-6 w-6 text-primary" />
-                  </div>
-                  <CardTitle className="text-xl">Browser-Based VS Code</CardTitle>
-                  <CardDescription>
-                    Full VS Code experience in your browser with all your favorite extensions and themes.
-                  </CardDescription>
-                </CardHeader>
-              </Card>
-
-              {/* Feature 2 */}
-              <Card className="relative overflow-hidden border-border/50 bg-card/50 backdrop-blur">
-                <CardHeader>
-                  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
-                    <Cloud className="h-6 w-6 text-primary" />
-                  </div>
-                  <CardTitle className="text-xl">Instant Environments</CardTitle>
-                  <CardDescription>
-                    Spin up containerized development environments in seconds with Docker integration.
-                  </CardDescription>
-                </CardHeader>
-              </Card>
-
-              {/* Feature 3 */}
-              <Card className="relative overflow-hidden border-border/50 bg-card/50 backdrop-blur">
-                <CardHeader>
-                  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
-                    <Shield className="h-6 w-6 text-primary" />
-                  </div>
-                  <CardTitle className="text-xl">Persistent Storage</CardTitle>
-                  <CardDescription>
-                    Never lose your work with persistent Docker volumes and automatic backups.
-                  </CardDescription>
-                </CardHeader>
-              </Card>
-
-              {/* Feature 4 */}
-              <Card className="relative overflow-hidden border-border/50 bg-card/50 backdrop-blur">
-                <CardHeader>
-                  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
-                    <GitBranch className="h-6 w-6 text-primary" />
-                  </div>
-                  <CardTitle className="text-xl">Remote SSH Access</CardTitle>
-                  <CardDescription>
-                    Connect from your desktop VS Code or any SSH client for maximum flexibility.
-                  </CardDescription>
-                </CardHeader>
-              </Card>
-
-              {/* Feature 5 */}
-              <Card className="relative overflow-hidden border-border/50 bg-card/50 backdrop-blur">
-                <CardHeader>
-                  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
-                    <Users className="h-6 w-6 text-primary" />
-                  </div>
-                  <CardTitle className="text-xl">Team Collaboration</CardTitle>
-                  <CardDescription>
-                    Share environments with your team and collaborate in real-time on projects.
-                  </CardDescription>
-                </CardHeader>
-              </Card>
-
-              {/* Feature 6 */}
-              <Card className="relative overflow-hidden border-border/50 bg-card/50 backdrop-blur">
-                <CardHeader>
-                  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
-                    <Zap className="h-6 w-6 text-primary" />
-                  </div>
-                  <CardTitle className="text-xl">Multi-Cloud Ready</CardTitle>
-                  <CardDescription>
-                    Local-first demo with future support for AWS, GCP, and Azure deployments.
-                  </CardDescription>
-                </CardHeader>
-              </Card>
+          <div className="flex items-center justify-center gap-8 pt-8 text-sm text-muted-foreground">
+            <div className="flex items-center gap-2">
+              <div className="h-2 w-2 rounded-full bg-accent animate-pulse" />
+              <span>No credit card required</span>
             </div>
-          </div>
-        </div>
-      </section>
-
-      {/* How It Works Section */}
-      <section className="py-16 sm:py-20 bg-gradient-to-b from-violet-500/8 via-primary/5 to-background relative">
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
-          <div className="mx-auto max-w-2xl text-center">
-            <h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl text-balance">
-              How Dev8.dev Works
-            </h2>
-            <p className="mt-4 text-lg text-muted-foreground text-pretty">Get started in three simple steps</p>
-          </div>
-
-          <div className="mx-auto mt-16 max-w-4xl">
-            <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
-              <div className="text-center">
-                <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-primary text-primary-foreground font-bold text-xl">
-                  1
-                </div>
-                <h3 className="mt-4 text-lg font-semibold text-foreground">Sign Up & Choose Template</h3>
-                <p className="mt-2 text-sm text-muted-foreground">
-                  Create your account and select from pre-configured development templates or start from scratch.
-                </p>
-              </div>
-
-              <div className="text-center">
-                <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-primary text-primary-foreground font-bold text-xl">
-                  2
-                </div>
-                <h3 className="mt-4 text-lg font-semibold text-foreground">Launch Environment</h3>
-                <p className="mt-2 text-sm text-muted-foreground">
-                  Your containerized development environment spins up in seconds with VS Code ready to use.
-                </p>
-              </div>
-
-              <div className="text-center">
-                <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-primary text-primary-foreground font-bold text-xl">
-                  3
-                </div>
-                <h3 className="mt-4 text-lg font-semibold text-foreground">Start Coding</h3>
-                <p className="mt-2 text-sm text-muted-foreground">
-                  Begin coding immediately with full VS Code features, extensions, and persistent file storage.
-                </p>
-              </div>
+            <div className="flex items-center gap-2">
+              <div className="h-2 w-2 rounded-full bg-accent animate-pulse" />
+              <span>Free forever plan</span>
             </div>
           </div>
         </div>
       </section>
 
-      {/* Tech Stack Section */}
-      <section className="py-16 sm:py-20 bg-gradient-to-b from-background via-primary/8 to-violet-500/10 relative">
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
-          <div className="mx-auto max-w-2xl text-center">
-            <h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl text-balance">
-              Built with Modern Technology
-            </h2>
-            <p className="mt-4 text-lg text-muted-foreground text-pretty">
-              Powered by industry-leading tools and frameworks
-            </p>
-          </div>
-
-          <div className="mx-auto mt-16 max-w-4xl">
-            <div className="grid grid-cols-2 gap-8 sm:grid-cols-4">
-              <div className="flex flex-col items-center text-center">
-                <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-card border border-border">
-                  <span className="text-2xl font-mono font-bold text-primary">D</span>
-                </div>
-                <h3 className="mt-4 text-sm font-semibold text-foreground">Docker</h3>
-                <p className="mt-1 text-xs text-muted-foreground">Containerization</p>
-              </div>
-
-              <div className="flex flex-col items-center text-center">
-                <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-card border border-border">
-                  <Code className="h-8 w-8 text-primary" />
-                </div>
-                <h3 className="mt-4 text-sm font-semibold text-foreground">Code-Server</h3>
-                <p className="mt-1 text-xs text-muted-foreground">VS Code in Browser</p>
-              </div>
-
-              <div className="flex flex-col items-center text-center">
-                <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-card border border-border">
-                  <span className="text-2xl font-mono font-bold text-primary">N</span>
-                </div>
-                <h3 className="mt-4 text-sm font-semibold text-foreground">Node.js</h3>
-                <p className="mt-1 text-xs text-muted-foreground">Runtime Environment</p>
-              </div>
-
-              <div className="flex flex-col items-center text-center">
-                <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-card border border-border">
-                  <span className="text-2xl font-mono font-bold text-primary">V</span>
-                </div>
-                <h3 className="mt-4 text-sm font-semibold text-foreground">Volumes</h3>
-                <p className="mt-1 text-xs text-muted-foreground">Persistent Storage</p>
-              </div>
-            </div>
-          </div>
+      {/* Features Grid */}
+      <section id="features" className="container mx-auto px-4 sm:px-6 lg:px-8 py-20">
+        <div className="text-center space-y-4 mb-16">
+          <h2 className="text-3xl md:text-5xl font-bold">
+            Everything you need to
+            <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary"> build faster</span>
+          </h2>
+          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+            A complete development environment with all the tools you need, accessible from anywhere
+          </p>
         </div>
-      </section>
 
-      {/* Use Cases Section */}
-      <section className="py-16 sm:py-20 bg-gradient-to-b from-violet-500/10 via-primary/6 to-background relative">
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
-          <div className="mx-auto max-w-2xl text-center">
-            <h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl text-balance">
-              Perfect for Every Developer
-            </h2>
-            <p className="mt-4 text-lg text-muted-foreground text-pretty">
-              Whether you're a student, freelancer, or enterprise team
-            </p>
-          </div>
-
-          <div className="mx-auto mt-16 max-w-6xl">
-            <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
-              <Card className="border-border/50 bg-card/50">
-                <CardHeader>
-                  <CardTitle className="text-lg">Students & Learning</CardTitle>
-                  <CardDescription>
-                    No setup required - jump straight into coding assignments and projects without configuration
-                    hassles.
-                  </CardDescription>
-                </CardHeader>
-              </Card>
-
-              <Card className="border-border/50 bg-card/50">
-                <CardHeader>
-                  <CardTitle className="text-lg">Remote Teams</CardTitle>
-                  <CardDescription>
-                    Standardized environments ensure everyone works with the same tools and configurations.
-                  </CardDescription>
-                </CardHeader>
-              </Card>
-
-              <Card className="border-border/50 bg-card/50">
-                <CardHeader>
-                  <CardTitle className="text-lg">Quick Prototyping</CardTitle>
-                  <CardDescription>
-                    Test ideas rapidly without polluting your local machine with temporary dependencies.
-                  </CardDescription>
-                </CardHeader>
-              </Card>
-
-              <Card className="border-border/50 bg-card/50">
-                <CardHeader>
-                  <CardTitle className="text-lg">Code Reviews</CardTitle>
-                  <CardDescription>
-                    Spin up environments for specific branches or pull requests for thorough testing.
-                  </CardDescription>
-                </CardHeader>
-              </Card>
-
-              <Card className="border-border/50 bg-card/50">
-                <CardHeader>
-                  <CardTitle className="text-lg">Workshops & Training</CardTitle>
-                  <CardDescription>
-                    Provide consistent environments for coding workshops and technical training sessions.
-                  </CardDescription>
-                </CardHeader>
-              </Card>
-
-              <Card className="border-border/50 bg-card/50">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+          {features.map((feature, index) => {
+            const Icon = feature.icon;
+            return (
+              <Card
+                key={index}
+                className="group border-border bg-card/50 backdrop-blur hover:bg-card hover:glow-primary hover-lift transition-all duration-300 cursor-pointer"
+              >
                 <CardHeader>
-                  <CardTitle className="text-lg">Legacy Projects</CardTitle>
-                  <CardDescription>
-                    Isolate older projects with specific dependency versions without affecting your main setup.
+                  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 group-hover:bg-primary/20 transition-colors mb-4">
+                    <Icon className="h-6 w-6 text-primary" />
+                  </div>
+                  <CardTitle className="text-xl">{feature.title}</CardTitle>
+                  <CardDescription className="text-muted-foreground">
+                    {feature.description}
                   </CardDescription>
                 </CardHeader>
               </Card>
-            </div>
-          </div>
+            );
+          })}
         </div>
       </section>
 
       {/* CTA Section */}
-      <section className="py-16 sm:py-20 bg-gradient-to-b from-background via-primary/8 to-violet-500/12 relative">
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
-          <div className="mx-auto max-w-2xl text-center">
-            <h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl text-balance">
-              Ready to start coding in the cloud?
-            </h2>
-            <p className="mt-4 text-lg text-muted-foreground text-pretty">
-              Join thousands of developers who have already made the switch to cloud-based development.
-            </p>
-            <div className="mt-8 flex items-center justify-center gap-x-6">
-              <Button size="lg" className="h-12 px-8" onClick={() => handleNavigation("/signup")}>
-                Get Started Free
-                <ArrowRight className="ml-2 h-4 w-4" />
-              </Button>
+      <section className="container mx-auto px-4 sm:px-6 lg:px-8 py-20">
+        <Card className="border-primary/50 bg-gradient-to-br from-card via-primary/5 to-secondary/5 glow-primary">
+          <CardHeader className="text-center space-y-6 py-16">
+            <CardTitle className="text-4xl md:text-5xl font-bold">
+              Ready to start building?
+            </CardTitle>
+            <CardDescription className="text-xl text-muted-foreground max-w-2xl mx-auto">
+              Join thousands of developers who are already building amazing projects with Dev8.dev
+            </CardDescription>
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-4">
               <Button
-                variant="outline"
                 size="lg"
-                className="h-12 px-8 bg-transparent"
-                onClick={() => {
-                  document.getElementById("features")?.scrollIntoView({ behavior: "smooth" })
-                }}
+                onClick={() => router.push("/signup")}
+                className="bg-gradient-to-r from-primary to-secondary hover:glow-primary text-lg px-8"
               >
-                Schedule Demo
+                Get Started Now
+                <ArrowRight className="ml-2 h-5 w-5" />
               </Button>
             </div>
-          </div>
-        </div>
+          </CardHeader>
+        </Card>
       </section>
 
       {/* Footer */}
-      <footer className="border-t border-border bg-gradient-to-b from-violet-500/12 to-muted/20 relative">
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-12 relative z-10">
-          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
-            <div className="col-span-1 md:col-span-2">
-              <div className="flex items-center space-x-2 mb-4">
-                <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
-                  <Code className="h-5 w-5" />
-                </div>
-                <span className="text-xl font-bold text-foreground">Dev8.dev</span>
+      <footer className="border-t border-border bg-card/30 backdrop-blur">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+          <div className="flex flex-col md:flex-row items-center justify-between gap-4">
+            <div className="flex items-center space-x-2">
+              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-primary to-secondary">
+                <Code className="h-5 w-5 text-black" />
               </div>
-              <p className="text-muted-foreground text-sm max-w-md">
-                The future of development is in the cloud. Start coding instantly with our containerized environments.
-              </p>
-            </div>
-
-            <div>
-              <h3 className="font-semibold text-foreground mb-4">Product</h3>
-              <ul className="space-y-2 text-sm text-muted-foreground">
-                <li>
-                  <button
-                    onClick={() => handleNavigation("/features")}
-                    className="hover:text-foreground transition-colors text-left"
-                  >
-                    Features
-                  </button>
-                </li>
-                <li>
-                  <button
-                    onClick={() => handleNavigation("/signup")}
-                    className="hover:text-foreground transition-colors text-left"
-                  >
-                    Get Started
-                  </button>
-                </li>
-              </ul>
-            </div>
-
-            <div>
-              <h3 className="font-semibold text-foreground mb-4">Support</h3>
-              <ul className="space-y-2 text-sm text-muted-foreground">
-                <li>
-                  <a href="#" className="hover:text-foreground transition-colors">
-                    Help Center
-                  </a>
-                </li>
-                <li>
-                  <a href="#" className="hover:text-foreground transition-colors">
-                    Community
-                  </a>
-                </li>
-                <li>
-                  <a href="#" className="hover:text-foreground transition-colors">
-                    Contact Us
-                  </a>
-                </li>
-                <li>
-                  <a href="#" className="hover:text-foreground transition-colors">
-                    Status
-                  </a>
-                </li>
-              </ul>
-            </div>
-          </div>
-
-          <div className="mt-8 pt-8 border-t border-border flex flex-col sm:flex-row justify-between items-center">
-            <p className="text-xs text-muted-foreground">© 2024 Dev8.dev. All rights reserved.</p>
-            <div className="flex space-x-6 mt-4 sm:mt-0">
-              <a href="#" className="text-xs text-muted-foreground hover:text-foreground transition-colors">
-                Privacy Policy
-              </a>
-              <a href="#" className="text-xs text-muted-foreground hover:text-foreground transition-colors">
-                Terms of Service
-              </a>
+              <span className="text-lg font-bold">Dev8.dev</span>
             </div>
+            <p className="text-sm text-muted-foreground">
+              © 2025 Dev8.dev. All rights reserved.
+            </p>
           </div>
         </div>
       </footer>
     </div>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/apps/web/components/glow-menu.tsx b/apps/web/components/glow-menu.tsx
new file mode 100644
index 0000000..0625d54
--- /dev/null
+++ b/apps/web/components/glow-menu.tsx
@@ -0,0 +1,126 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+
+interface GlowMenuItem {
+  label: string;
+  href: string;
+  icon?: React.ReactNode;
+}
+
+interface GlowMenuProps {
+  items: GlowMenuItem[];
+  className?: string;
+  orientation?: "horizontal" | "vertical";
+}
+
+export function GlowMenu({ items, className, orientation = "horizontal" }: GlowMenuProps) {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [hoverIndex, setHoverIndex] = useState<number | null>(null);
+
+  return (
+    <nav
+      className={cn(
+        "relative flex rounded-lg border border-border bg-card/50 backdrop-blur-sm p-1",
+        orientation === "vertical" ? "flex-col" : "flex-row",
+        className
+      )}
+    >
+      {items.map((item, index) => {
+        const isActive = activeIndex === index;
+        const isHovered = hoverIndex === index;
+
+        return (
+          <Link
+            key={item.href}
+            href={item.href}
+            onClick={() => setActiveIndex(index)}
+            onMouseEnter={() => setHoverIndex(index)}
+            onMouseLeave={() => setHoverIndex(null)}
+            className={cn(
+              "relative z-10 flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-all duration-300",
+              orientation === "vertical" ? "w-full" : "flex-1 justify-center",
+              isActive
+                ? "text-primary"
+                : isHovered
+                ? "text-foreground"
+                : "text-muted-foreground"
+            )}
+          >
+            {/* Glow Effect */}
+            {(isActive || isHovered) && (
+              <div
+                className={cn(
+                  "absolute inset-0 -z-10 rounded-md transition-all duration-300",
+                  isActive
+                    ? "bg-primary/20 glow-primary"
+                    : "bg-muted"
+                )}
+              />
+            )}
+
+            {item.icon && <span className="flex-shrink-0">{item.icon}</span>}
+            <span>{item.label}</span>
+
+            {/* Active Indicator */}
+            {isActive && (
+              <div
+                className={cn(
+                  "absolute bg-primary",
+                  orientation === "vertical"
+                    ? "left-0 top-1/2 h-8 w-1 -translate-y-1/2 rounded-r-full"
+                    : "bottom-0 left-1/2 h-1 w-8 -translate-x-1/2 rounded-t-full"
+                )}
+              />
+            )}
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}
+
+interface FloatingGlowMenuProps {
+  items: GlowMenuItem[];
+  className?: string;
+}
+
+export function FloatingGlowMenu({ items, className }: FloatingGlowMenuProps) {
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-2 rounded-full border border-border bg-card/80 backdrop-blur-md px-2 py-1.5 shadow-lg",
+        className
+      )}
+    >
+      {items.map((item, index) => (
+        <Link
+          key={item.href}
+          href={item.href}
+          onMouseEnter={() => setHoveredIndex(index)}
+          onMouseLeave={() => setHoveredIndex(null)}
+          className={cn(
+            "relative flex h-10 w-10 items-center justify-center rounded-full transition-all duration-300",
+            hoveredIndex === index
+              ? "bg-primary/20 text-primary scale-110 glow-primary"
+              : "text-muted-foreground hover:text-foreground"
+          )}
+        >
+          {item.icon}
+
+          {/* Tooltip */}
+          {hoveredIndex === index && (
+            <div className="absolute -top-12 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-popover px-3 py-1.5 text-xs font-medium text-popover-foreground shadow-lg border border-border animate-in fade-in slide-in-from-bottom-2">
+              {item.label}
+              <div className="absolute -bottom-1 left-1/2 h-2 w-2 -translate-x-1/2 rotate-45 bg-popover border-r border-b border-border" />
+            </div>
+          )}
+        </Link>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/web/components/icons.tsx b/apps/web/components/icons.tsx
new file mode 100644
index 0000000..d268139
--- /dev/null
+++ b/apps/web/components/icons.tsx
@@ -0,0 +1,62 @@
+import { LucideProps } from "lucide-react";
+
+export function IconWrapper({
+  children,
+  className,
+  glow = false,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  glow?: boolean;
+}) {
+  return (
+    <div
+      className={`inline-flex items-center justify-center ${
+        glow ? "glow-primary" : ""
+      } ${className || ""}`}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function GlowIcon({
+  Icon,
+  className,
+  glowColor = "primary",
+  ...props
+}: {
+  Icon: React.ComponentType<LucideProps>;
+  className?: string;
+  glowColor?: "primary" | "secondary" | "accent";
+} & LucideProps) {
+  const glowClass = `glow-${glowColor}`;
+
+  return (
+    <div className={`inline-flex ${glowClass}`}>
+      <Icon className={className} {...props} />
+    </div>
+  );
+}
+
+interface AnimatedIconProps extends LucideProps {
+  Icon: React.ComponentType<LucideProps>;
+  animation?: "pulse" | "spin" | "bounce";
+  className?: string;
+}
+
+export function AnimatedIcon({
+  Icon,
+  animation = "pulse",
+  className,
+  ...props
+}: AnimatedIconProps) {
+  const animationClass =
+    animation === "pulse"
+      ? "animate-pulse"
+      : animation === "spin"
+      ? "animate-spin"
+      : "animate-bounce";
+
+  return <Icon className={`${animationClass} ${className || ""}`} {...props} />;
+}
diff --git a/apps/web/components/sidebar.tsx b/apps/web/components/sidebar.tsx
new file mode 100644
index 0000000..3792676
--- /dev/null
+++ b/apps/web/components/sidebar.tsx
@@ -0,0 +1,177 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+import {
+  Home,
+  Code,
+  FileCode,
+  Settings,
+  User,
+  LogOut,
+  ChevronLeft,
+  ChevronRight,
+  Terminal,
+  Zap,
+  Layers,
+  Activity,
+} from "lucide-react";
+
+interface SidebarProps {
+  className?: string;
+}
+
+interface NavItem {
+  title: string;
+  href: string;
+  icon: React.ComponentType<{ className?: string }>;
+  badge?: string;
+}
+
+const navItems: NavItem[] = [
+  { title: "Dashboard", href: "/dashboard", icon: Home },
+  { title: "Projects", href: "/projects", icon: Layers },
+  { title: "Code Editor", href: "/editor", icon: Code },
+  { title: "Terminal", href: "/terminal", icon: Terminal },
+  { title: "Files", href: "/files", icon: FileCode },
+  { title: "Activity", href: "/activity", icon: Activity },
+  { title: "Deploy", href: "/deploy", icon: Zap, badge: "New" },
+];
+
+const bottomNavItems: NavItem[] = [
+  { title: "Profile", href: "/profile", icon: User },
+  { title: "Settings", href: "/settings", icon: Settings },
+];
+
+export function Sidebar({ className }: SidebarProps) {
+  const [collapsed, setCollapsed] = useState(false);
+  const pathname = usePathname();
+
+  return (
+    <aside
+      className={cn(
+        "fixed left-0 top-0 z-40 h-screen border-r border-border bg-card transition-all duration-300",
+        collapsed ? "w-20" : "w-64",
+        className
+      )}
+    >
+      <div className="flex h-full flex-col">
+        {/* Logo/Brand */}
+        <div className="flex h-16 items-center justify-between border-b border-border px-4">
+          {!collapsed && (
+            <Link href="/" className="flex items-center space-x-2">
+              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-primary to-secondary glow-primary">
+                <Code className="h-5 w-5 text-black" />
+              </div>
+              <span className="text-xl font-bold text-glow-primary">Dev8.dev</span>
+            </Link>
+          )}
+          {collapsed && (
+            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-primary to-secondary glow-primary mx-auto">
+              <Code className="h-5 w-5 text-black" />
+            </div>
+          )}
+        </div>
+
+        {/* Toggle Button */}
+        <button
+          onClick={() => setCollapsed(!collapsed)}
+          className="absolute -right-3 top-20 z-50 flex h-6 w-6 items-center justify-center rounded-full border border-border bg-card text-muted-foreground hover:text-foreground hover:glow-primary transition-all"
+        >
+          {collapsed ? (
+            <ChevronRight className="h-4 w-4" />
+          ) : (
+            <ChevronLeft className="h-4 w-4" />
+          )}
+        </button>
+
+        {/* Navigation */}
+        <nav className="flex-1 space-y-1 overflow-y-auto px-3 py-4">
+          {navItems.map((item) => {
+            const Icon = item.icon;
+            const isActive = pathname === item.href;
+
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={cn(
+                  "group relative flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all",
+                  isActive
+                    ? "bg-primary/20 text-primary glow-primary"
+                    : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                  collapsed && "justify-center"
+                )}
+              >
+                <Icon className={cn("h-5 w-5 flex-shrink-0", isActive && "text-primary")} />
+                {!collapsed && (
+                  <>
+                    <span className="flex-1">{item.title}</span>
+                    {item.badge && (
+                      <span className="rounded-full bg-accent px-2 py-0.5 text-xs font-semibold text-accent-foreground">
+                        {item.badge}
+                      </span>
+                    )}
+                  </>
+                )}
+                {collapsed && (
+                  <span className="absolute left-full ml-6 hidden w-auto min-w-max rounded-md bg-popover px-2 py-1 text-xs text-popover-foreground group-hover:block border border-border shadow-lg">
+                    {item.title}
+                  </span>
+                )}
+              </Link>
+            );
+          })}
+        </nav>
+
+        {/* Bottom Navigation */}
+        <div className="border-t border-border p-3 space-y-1">
+          {bottomNavItems.map((item) => {
+            const Icon = item.icon;
+            const isActive = pathname === item.href;
+
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={cn(
+                  "group relative flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all",
+                  isActive
+                    ? "bg-primary/20 text-primary glow-primary"
+                    : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                  collapsed && "justify-center"
+                )}
+              >
+                <Icon className={cn("h-5 w-5 flex-shrink-0", isActive && "text-primary")} />
+                {!collapsed && <span className="flex-1">{item.title}</span>}
+                {collapsed && (
+                  <span className="absolute left-full ml-6 hidden w-auto min-w-max rounded-md bg-popover px-2 py-1 text-xs text-popover-foreground group-hover:block border border-border shadow-lg">
+                    {item.title}
+                  </span>
+                )}
+              </Link>
+            );
+          })}
+
+          {/* Logout */}
+          <button
+            className={cn(
+              "group relative flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-muted-foreground hover:bg-destructive/20 hover:text-destructive transition-all",
+              collapsed && "justify-center"
+            )}
+          >
+            <LogOut className="h-5 w-5 flex-shrink-0" />
+            {!collapsed && <span className="flex-1">Logout</span>}
+            {collapsed && (
+              <span className="absolute left-full ml-6 hidden w-auto min-w-max rounded-md bg-popover px-2 py-1 text-xs text-popover-foreground group-hover:block border border-border shadow-lg">
+                Logout
+              </span>
+            )}
+          </button>
+        </div>
+      </div>
+    </aside>
+  );
+}

From a38bfcd423c6650681f8ef1622e77990eac2bad0 Mon Sep 17 00:00:00 2001
From: ritesh301 <riteshpradhan301@gmail.com>
Date: Fri, 24 Oct 2025 19:39:50 +0530
Subject: [PATCH 5/6] create all the webpages

---
 apps/web/app/(auth)/signin/page.tsx           |   7 +-
 apps/web/app/ai-agents/page.tsx               | 225 +++++++++++++
 apps/web/app/api/_state/workspaces.ts         |  78 +++++
 apps/web/app/api/account/connections/route.ts |  26 ++
 apps/web/app/api/account/delete/route.ts      |   7 +
 apps/web/app/api/account/password/route.ts    |  10 +
 apps/web/app/api/ai/agents/route.ts           |  27 ++
 apps/web/app/api/ai/mcp-config/route.ts       |  24 ++
 apps/web/app/api/billing/invoice/route.ts     |   9 +
 apps/web/app/api/billing/route.ts             |  58 ++++
 apps/web/app/api/reporting/route.ts           |  62 ++++
 apps/web/app/api/templates/route.ts           |  11 +
 .../app/api/workspaces/[id]/action/route.ts   |  20 ++
 .../app/api/workspaces/[id]/details/route.ts  |  17 +
 .../app/api/workspaces/[id]/metrics/route.ts  |  16 +
 .../api/workspaces/[id]/snapshots/route.ts    |  18 +
 .../app/api/workspaces/[id]/terminal/route.ts |  27 ++
 apps/web/app/api/workspaces/estimate/route.ts |  35 ++
 apps/web/app/api/workspaces/options/route.ts  |  31 ++
 apps/web/app/api/workspaces/route.ts          |  45 +++
 apps/web/app/billing-usage/page.tsx           | 201 +++++++++++
 apps/web/app/components/theme-provider.tsx    |   9 +-
 apps/web/app/dashboard/page.tsx               | 289 ++++++----------
 apps/web/app/profile/page.tsx                 |  26 +-
 apps/web/app/reporting/page.tsx               | 219 ++++++++++++
 .../web/app/settings/change-password/page.tsx |  67 ++++
 apps/web/app/settings/page.tsx                | 312 ++++++++----------
 apps/web/app/workspaces/[id]/ide/page.tsx     | 188 +++++++++++
 apps/web/app/workspaces/new/page.tsx          | 221 +++++++++++++
 apps/web/app/workspaces/page.tsx              | 211 ++++++++++++
 apps/web/components/sidebar.tsx               | 114 +++----
 apps/web/package.json                         |   1 +
 apps/web/tsconfig.json                        |   4 +-
 pnpm-lock.yaml                                |  14 +
 34 files changed, 2196 insertions(+), 433 deletions(-)
 create mode 100644 apps/web/app/ai-agents/page.tsx
 create mode 100644 apps/web/app/api/_state/workspaces.ts
 create mode 100644 apps/web/app/api/account/connections/route.ts
 create mode 100644 apps/web/app/api/account/delete/route.ts
 create mode 100644 apps/web/app/api/account/password/route.ts
 create mode 100644 apps/web/app/api/ai/agents/route.ts
 create mode 100644 apps/web/app/api/ai/mcp-config/route.ts
 create mode 100644 apps/web/app/api/billing/invoice/route.ts
 create mode 100644 apps/web/app/api/billing/route.ts
 create mode 100644 apps/web/app/api/reporting/route.ts
 create mode 100644 apps/web/app/api/templates/route.ts
 create mode 100644 apps/web/app/api/workspaces/[id]/action/route.ts
 create mode 100644 apps/web/app/api/workspaces/[id]/details/route.ts
 create mode 100644 apps/web/app/api/workspaces/[id]/metrics/route.ts
 create mode 100644 apps/web/app/api/workspaces/[id]/snapshots/route.ts
 create mode 100644 apps/web/app/api/workspaces/[id]/terminal/route.ts
 create mode 100644 apps/web/app/api/workspaces/estimate/route.ts
 create mode 100644 apps/web/app/api/workspaces/options/route.ts
 create mode 100644 apps/web/app/api/workspaces/route.ts
 create mode 100644 apps/web/app/billing-usage/page.tsx
 create mode 100644 apps/web/app/reporting/page.tsx
 create mode 100644 apps/web/app/settings/change-password/page.tsx
 create mode 100644 apps/web/app/workspaces/[id]/ide/page.tsx
 create mode 100644 apps/web/app/workspaces/new/page.tsx
 create mode 100644 apps/web/app/workspaces/page.tsx

diff --git a/apps/web/app/(auth)/signin/page.tsx b/apps/web/app/(auth)/signin/page.tsx
index 117ba37..cc23a46 100644
--- a/apps/web/app/(auth)/signin/page.tsx
+++ b/apps/web/app/(auth)/signin/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import dynamic from "next/dynamic";
 import { signIn } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
@@ -10,7 +11,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Code, ArrowLeft, Mail, Lock, Loader2 } from "lucide-react";
 
-export default function SignInPage() {
+function SignInPage() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [isLoading, setIsLoading] = useState(false);
@@ -72,7 +73,7 @@ export default function SignInPage() {
 
       {/* Sign In Form */}
       <div className="flex-1 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
-        <div className="w-full max-w-md space-y-8 fade-in">
+        <div className="w-full max-w-md space-y-8 fade-in" suppressHydrationWarning>
           <div className="text-center">
             <h2 className="text-4xl font-bold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary">
               Welcome back
@@ -212,3 +213,5 @@ export default function SignInPage() {
     </div>
   );
 }
+
+export default dynamic(() => Promise.resolve(SignInPage), { ssr: false });
diff --git a/apps/web/app/ai-agents/page.tsx b/apps/web/app/ai-agents/page.tsx
new file mode 100644
index 0000000..f4d1bbd
--- /dev/null
+++ b/apps/web/app/ai-agents/page.tsx
@@ -0,0 +1,225 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { useSession } from "next-auth/react";
+import { Sidebar } from "@/components/sidebar";
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Bot, ServerCog, Loader2, CheckCircle2, XCircle, CircleDot } from "lucide-react";
+
+interface Agent {
+  id: string;
+  name: string;
+  status: "connected" | "disconnected" | "warning";
+}
+
+interface McpConfig {
+  url: string;
+  apiKey: string;
+}
+
+export default function AiAgentsPage() {
+  const router = useRouter();
+  const { data: session, status } = useSession();
+  const [mounted, setMounted] = useState(false);
+
+  const [agents, setAgents] = useState<Agent[]>([]);
+  const [loadingAgents, setLoadingAgents] = useState(true);
+  const [savingAgentId, setSavingAgentId] = useState<string | null>(null);
+
+  const [config, setConfig] = useState<McpConfig>({ url: "", apiKey: "" });
+  const [savingConfig, setSavingConfig] = useState(false);
+
+  const [recent, setRecent] = useState<string[]>([]);
+
+  useEffect(() => setMounted(true), []);
+
+  useEffect(() => {
+    if (status === "loading") return;
+    if (!session) router.push("/signin");
+  }, [status, session, router]);
+
+  // Fetch dynamic data
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        setLoadingAgents(true);
+        const [a, c] = await Promise.all([
+          fetch("/api/ai/agents").then((r) => r.json()),
+          fetch("/api/ai/mcp-config").then((r) => r.json()),
+        ]);
+        setAgents(a.agents ?? []);
+        setConfig({ url: c.url ?? "", apiKey: c.apiKey ?? "" });
+        setRecent(c.recent ?? []);
+      } catch (e) {
+        console.error(e);
+      } finally {
+        setLoadingAgents(false);
+      }
+    }
+    if (mounted) fetchData();
+  }, [mounted]);
+
+  async function toggleAgent(agent: Agent) {
+    setSavingAgentId(agent.id);
+    try {
+      const res = await fetch("/api/ai/agents", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ id: agent.id, action: agent.status === "connected" ? "disconnect" : "connect" }),
+      });
+      const data = await res.json();
+      setAgents(data.agents);
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setSavingAgentId(null);
+    }
+  }
+
+  async function saveConfig() {
+    setSavingConfig(true);
+    try {
+      const res = await fetch("/api/ai/mcp-config", {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(config),
+      });
+      const data = await res.json();
+      setRecent(data.recent ?? []);
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setSavingConfig(false);
+    }
+  }
+
+  function StatusDot({ s }: { s: Agent["status"] }) {
+    const color = s === "connected" ? "bg-emerald-500" : s === "warning" ? "bg-amber-500" : "bg-rose-500";
+    return <span className={`inline-block h-2.5 w-2.5 rounded-full ${color}`} />;
+  }
+
+  if (!mounted || status === "loading") {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-background">
+        <div className="flex flex-col items-center gap-4">
+          <Loader2 className="h-8 w-8 animate-spin text-primary" />
+          <div className="text-lg text-muted-foreground">Loading AI Agents...</div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!session) return null;
+
+  return (
+    <div className="min-h-screen bg-background relative overflow-hidden">
+      <div className="fixed inset-0 -z-10 grid-background opacity-20" />
+      <div className="fixed inset-0 -z-10">
+        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/10 rounded-full blur-3xl pulse-glow" />
+        <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-secondary/10 rounded-full blur-3xl pulse-glow" style={{ animationDelay: "1s" }} />
+      </div>
+
+      <Sidebar />
+
+      <main className="ml-64 min-h-screen transition-all duration-300">
+        <div className="container mx-auto px-8 py-8">
+          {/* Header area to mirror dashboard top spacing */}
+          <div className="flex items-center justify-between mb-6">
+            <h1 className="text-xl font-semibold">AI Agents</h1>
+            <div className="flex items-center gap-3">
+              <button className="h-9 w-9 rounded-md bg-card border border-border flex items-center justify-center text-muted-foreground">🔔</button>
+              <div className="h-9 w-9 rounded-full bg-card border border-border flex items-center justify-center text-muted-foreground">R</div>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            {/* Left: Agents list (2 cols) */}
+            <Card className="lg:col-span-2 border-border bg-card/50">
+              <div className="p-4 md:p-6">
+                <div className="flex items-center gap-2 mb-4">
+                  <Bot className="h-5 w-5 text-primary" />
+                  <h2 className="text-sm font-medium">AI Coding Agents</h2>
+                </div>
+
+                <div className="space-y-4">
+                  {(loadingAgents ? [1,2,3].map(n => ({ id: String(n), name: "", status: "disconnected" as const })) : agents).map((agent, idx) => (
+                    <div key={agent.id || idx} className="flex items-center justify-between rounded-md border border-border bg-card px-4 py-3">
+                      <div className="flex items-center gap-3">
+                        <div className="h-9 w-9 rounded-md bg-primary/10 flex items-center justify-center text-primary">
+                          <Bot className="h-5 w-5" />
+                        </div>
+                        <div>
+                          <div className="font-medium text-foreground">{agent.name || "Loading..."}</div>
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-3">
+                        <StatusDot s={agent.status} />
+                        <Button
+                          size="sm"
+                          variant={agent.status === "connected" ? "secondary" : "default"}
+                          className={agent.status === "connected" ? "" : "bg-primary"}
+                          onClick={() => toggleAgent(agent)}
+                          disabled={savingAgentId === agent.id || loadingAgents}
+                        >
+                          {savingAgentId === agent.id ? (
+                            <Loader2 className="h-4 w-4 animate-spin" />
+                          ) : agent.status === "connected" ? (
+                            "Disconnect"
+                          ) : (
+                            "Connect"
+                          )}
+                        </Button>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </Card>
+
+            {/* Right: MCP server config */}
+            <Card className="border-border bg-card/50">
+              <div className="p-4 md:p-6 space-y-4">
+                <div className="flex items-center gap-2">
+                  <ServerCog className="h-5 w-5 text-primary" />
+                  <h2 className="text-sm font-medium">MCP Server Configuration</h2>
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="mcpUrl">MCP Server URL</Label>
+                  <Input id="mcpUrl" placeholder="https://..." value={config.url} onChange={(e) => setConfig({ ...config, url: e.target.value })} />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="mcpKey">API Key</Label>
+                  <Input id="mcpKey" type="password" placeholder="••••••••" value={config.apiKey} onChange={(e) => setConfig({ ...config, apiKey: e.target.value })} />
+                </div>
+                <div>
+                  <Button onClick={saveConfig} disabled={savingConfig} className="bg-primary">
+                    {savingConfig ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
+                    Save Configuration
+                  </Button>
+                </div>
+              </div>
+            </Card>
+          </div>
+
+          {/* Recent configs */}
+          <Card className="mt-6 border-border bg-card/50">
+            <div className="p-4 md:p-6">
+              <h3 className="text-sm font-medium mb-3">Recent MCP Server Configurations</h3>
+              <ul className="list-disc pl-5 space-y-1 text-sm text-muted-foreground">
+                {recent.length === 0 ? (
+                  <li>No recent configurations.</li>
+                ) : (
+                  recent.map((r, i) => <li key={i}>{r}</li>)
+                )}
+              </ul>
+            </div>
+          </Card>
+        </div>
+      </main>
+    </div>
+  );
+}
diff --git a/apps/web/app/api/_state/workspaces.ts b/apps/web/app/api/_state/workspaces.ts
new file mode 100644
index 0000000..8cd9577
--- /dev/null
+++ b/apps/web/app/api/_state/workspaces.ts
@@ -0,0 +1,78 @@
+// Shared in-memory workspace state for dev/demo. Not for production use.
+
+export type WorkspaceState = {
+  id: string;
+  name: string;
+  provider: string; // aws | gcp | azure | local
+  size: string; // small | medium | large
+  region: string; // us-east | etc
+  status: "running" | "stopped";
+  metrics: {
+    cpu: number; // percent
+    memory: { usedGb: number; totalGb: number };
+    disk: { usedGb: number; totalGb: number };
+    network: { inMb: number; outMb: number };
+  };
+  terminal: string[];
+  snapshots: Array<{ id: string; createdAt: number; location: string }>;
+  assistant: { tips: string[]; note: string };
+  lastUpdate: number;
+};
+
+const store = new Map<string, WorkspaceState>();
+
+let seed = Date.now() % 100000;
+function rnd() {
+  seed = (seed * 1664525 + 1013904223) % 4294967296;
+  return seed / 4294967296;
+}
+
+export function jitter(n: number, pct = 0.15, min = 0, max = Number.POSITIVE_INFINITY) {
+  const j = 1 + (rnd() * 2 - 1) * pct;
+  const v = Math.max(min, Math.min(max, n * j));
+  return Math.round(v * 100) / 100;
+}
+
+function defaultTips(name: string) {
+  return [
+    "You can improve startup time by updating packages.",
+    "Enable hot-reload caching for faster builds.",
+    `Run tests in watch mode inside ${name} for quicker feedback.`,
+  ];
+}
+
+export function ensureWorkspace(id: string): WorkspaceState {
+  const key = String(id);
+  if (store.has(key)) return store.get(key)!;
+  const sizes = { small: { cpu: 2, ram: 4 }, medium: { cpu: 4, ram: 8 }, large: { cpu: 8, ram: 16 } } as const;
+  const keys = Object.keys(sizes) as Array<keyof typeof sizes>;
+  const pickSize = keys[Math.floor(rnd() * keys.length)] ?? "small";
+  const ws: WorkspaceState = {
+    id: key,
+    name: `my-nextjs-app-${key}`,
+    provider: "aws",
+  size: String(pickSize),
+    region: "us-east-1",
+    status: "running",
+    metrics: {
+      cpu: Math.round(25 + rnd() * 40),
+  memory: { usedGb: Math.round(2 + rnd() * 6), totalGb: sizes[pickSize].ram },
+      disk: { usedGb: Math.round(20 + rnd() * 40), totalGb: 100 },
+      network: { inMb: Math.round(80 + rnd() * 80), outMb: Math.round(120 + rnd() * 120) },
+    },
+    terminal: [
+      `ritesh@cloudidex:~$ npm run dev`,
+      `> web@ dev`,
+      `Server ready on http://localhost:3000 🚀`,
+    ],
+    snapshots: [],
+    assistant: { tips: defaultTips(`app-${key}`), note: "Predicted CPU load ~60% in next 10 mins" },
+    lastUpdate: Date.now(),
+  };
+  store.set(key, ws);
+  return ws;
+}
+
+export function getStore() {
+  return store;
+}
diff --git a/apps/web/app/api/account/connections/route.ts b/apps/web/app/api/account/connections/route.ts
new file mode 100644
index 0000000..8698a8d
--- /dev/null
+++ b/apps/web/app/api/account/connections/route.ts
@@ -0,0 +1,26 @@
+import { NextResponse } from "next/server";
+import { prisma } from "@/lib/prisma";
+import { auth } from "@/lib/auth";
+
+type Conn = { provider: string; connected: boolean };
+
+export async function GET() {
+  // Derive connections for the signed-in user from the Accounts table
+  const session = await auth();
+  if (!session?.user?.id) {
+    return NextResponse.json({ connections: [], updatedAt: new Date().toISOString() });
+  }
+
+  const accounts = await prisma.account.findMany({
+    where: { userId: session.user.id },
+    select: { provider: true },
+  });
+
+  const connected = new Set(accounts.map((a) => a.provider.toLowerCase()));
+  const providers: Conn[] = [
+    { provider: "Google", connected: connected.has("google") },
+    { provider: "GitHub", connected: connected.has("github") },
+  ];
+
+  return NextResponse.json({ connections: providers, updatedAt: new Date().toISOString() });
+}
diff --git a/apps/web/app/api/account/delete/route.ts b/apps/web/app/api/account/delete/route.ts
new file mode 100644
index 0000000..e865cbb
--- /dev/null
+++ b/apps/web/app/api/account/delete/route.ts
@@ -0,0 +1,7 @@
+import { NextResponse } from "next/server";
+
+export async function POST() {
+  // TODO: hook into your real user deletion logic
+  // For now, just simulate success so the button works end-to-end
+  return NextResponse.json({ ok: true }, { status: 200 });
+}
diff --git a/apps/web/app/api/account/password/route.ts b/apps/web/app/api/account/password/route.ts
new file mode 100644
index 0000000..d2ec0d7
--- /dev/null
+++ b/apps/web/app/api/account/password/route.ts
@@ -0,0 +1,10 @@
+import { NextResponse } from "next/server";
+
+export async function POST(req: Request) {
+  // This is a placeholder implementation; validate and change password in your auth system here
+  const { current, next } = await req.json();
+  if (!next || next.length < 8) {
+    return NextResponse.json({ ok: false, error: "Password too short" }, { status: 400 });
+  }
+  return NextResponse.json({ ok: true });
+}
diff --git a/apps/web/app/api/ai/agents/route.ts b/apps/web/app/api/ai/agents/route.ts
new file mode 100644
index 0000000..c828af0
--- /dev/null
+++ b/apps/web/app/api/ai/agents/route.ts
@@ -0,0 +1,27 @@
+import { NextResponse } from "next/server";
+
+type Agent = { id: string; name: string; status: "connected" | "disconnected" | "warning" };
+
+// In-memory store for demo; replace with DB/service
+let agents: Agent[] = [
+  { id: "code-expo-pilot", name: "Code Expo Pilot", status: "connected" },
+  { id: "cloud-code-copilot", name: "Cloud Code Copilot", status: "disconnected" },
+  { id: "custom-agents", name: "Custom Agents", status: "warning" },
+];
+
+export async function GET() {
+  return NextResponse.json({ agents });
+}
+
+export async function POST(req: Request) {
+  const { id, action } = await req.json();
+  agents = agents.map((a) =>
+    a.id === id
+      ? {
+          ...a,
+          status: action === "connect" ? "connected" : action === "disconnect" ? "disconnected" : a.status,
+        }
+      : a
+  );
+  return NextResponse.json({ ok: true, agents });
+}
diff --git a/apps/web/app/api/ai/mcp-config/route.ts b/apps/web/app/api/ai/mcp-config/route.ts
new file mode 100644
index 0000000..1be0711
--- /dev/null
+++ b/apps/web/app/api/ai/mcp-config/route.ts
@@ -0,0 +1,24 @@
+import { NextResponse } from "next/server";
+
+let config = { url: "", apiKey: "" };
+let recent: string[] = [
+  "10 Oct - AWS Workspace - Auto Snapshot",
+  "09 Oct - GCP Workspace - Manual Backup",
+  "08 Oct - Azure VM - Auto Snapshot",
+];
+
+export async function GET() {
+  return NextResponse.json({ ...config, recent });
+}
+
+export async function PUT(req: Request) {
+  const body = await req.json();
+  config = { url: body.url ?? "", apiKey: body.apiKey ?? "" };
+  if (config.url) {
+    recent = [
+      `${new Date().toLocaleDateString("en-GB", { day: "2-digit", month: "short" })} - ${config.url} - Saved`,
+      ...recent,
+    ].slice(0, 8);
+  }
+  return NextResponse.json({ ok: true, ...config, recent });
+}
diff --git a/apps/web/app/api/billing/invoice/route.ts b/apps/web/app/api/billing/invoice/route.ts
new file mode 100644
index 0000000..d86f4e4
--- /dev/null
+++ b/apps/web/app/api/billing/invoice/route.ts
@@ -0,0 +1,9 @@
+export async function GET() {
+  const content = `Invoice\nPlan: Pro Developer Plan\nAmount: 4820.00 INR\nDate: ${new Date().toISOString()}\n(This is a placeholder invoice. Replace with PDF generation.)`;
+  return new Response(content, {
+    headers: {
+      "Content-Type": "text/plain",
+      "Content-Disposition": `attachment; filename=invoice-${new Date().toISOString().slice(0, 7)}.txt`,
+    },
+  });
+}
diff --git a/apps/web/app/api/billing/route.ts b/apps/web/app/api/billing/route.ts
new file mode 100644
index 0000000..8319c68
--- /dev/null
+++ b/apps/web/app/api/billing/route.ts
@@ -0,0 +1,58 @@
+import { NextResponse } from "next/server";
+
+// In-memory dynamic data to simulate real-time updates
+let state = {
+  monthTotal: 4820,
+  computeCost: 3200,
+  storageCost: 950,
+  networkCost: 670,
+  compute: { instances: 12, vcpuHours: 390, gpuHours: 24, region: "us-east-1" },
+  storage: { totalGb: 120, snapshots: 16, avgOpsPerDay: 10000 },
+  network: { dataOutGb: 420, bandwidthMb: 310, regionsActive: 3 },
+};
+
+function jitter(n: number, delta: number) {
+  const d = (Math.random() - 0.5) * 2 * delta;
+  return Math.max(0, Math.round((n + d) * 100) / 100);
+}
+
+export async function GET() {
+  // Nudge values a bit to simulate changes
+  state.computeCost = jitter(state.computeCost, 5);
+  state.storageCost = jitter(state.storageCost, 2);
+  state.networkCost = jitter(state.networkCost, 2);
+  state.monthTotal = Math.round((state.computeCost + state.storageCost + state.networkCost) * 100) / 100;
+
+  state.compute.vcpuHours = Math.round(state.compute.vcpuHours + Math.random() * 3);
+  state.storage.avgOpsPerDay = Math.round(state.storage.avgOpsPerDay + (Math.random() - 0.5) * 100);
+  state.network.bandwidthMb = Math.round(state.network.bandwidthMb + (Math.random() - 0.5) * 5);
+
+  const today = new Date();
+  const start = new Date(today.getFullYear(), today.getMonth(), 1);
+  const end = new Date(today.getFullYear(), today.getMonth() + 1, 0);
+
+  return NextResponse.json({
+    monthTotal: state.monthTotal,
+    computeCost: state.computeCost,
+    storageCost: state.storageCost,
+    networkCost: state.networkCost,
+    cycle: {
+      start: start.toLocaleDateString("en-US", { month: "short", day: "numeric" }),
+      end: end.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }),
+    },
+    computeUsage: state.compute,
+    storageUsage: state.storage,
+    networkUsage: state.network,
+    details: {
+      plan: "Pro Developer Plan",
+      accountEmail: "ritesh@cloudidex.com",
+      payment: "Visa **** 4872",
+      nextInvoice: new Date(today.getFullYear(), today.getMonth() + 1, 1).toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+      }),
+    },
+    updatedAt: new Date().toISOString(),
+  });
+}
diff --git a/apps/web/app/api/reporting/route.ts b/apps/web/app/api/reporting/route.ts
new file mode 100644
index 0000000..81dc26a
--- /dev/null
+++ b/apps/web/app/api/reporting/route.ts
@@ -0,0 +1,62 @@
+import { NextResponse } from "next/server";
+
+type Range = "last_24h" | "last_7d" | "last_30d" | "this_month";
+
+let seed = Date.now() % 1000;
+function rnd() {
+  // simple deterministic PRNG for jitter
+  seed = (seed * 9301 + 49297) % 233280;
+  return seed / 233280;
+}
+
+function jitter(n: number, pct = 0.1) {
+  const j = 1 + (rnd() * 2 - 1) * pct;
+  return Math.max(0, Math.round(n * j));
+}
+
+function makeTimeseries(points: number, base: number, volatility = 0.15) {
+  const out: Array<{ t: number; v: number }> = [];
+  let v = base;
+  for (let i = points - 1; i >= 0; i--) {
+    v = Math.max(0, v + (rnd() * 2 - 1) * base * volatility);
+    out.push({ t: Date.now() - i * 60 * 60 * 1000, v: Math.round(v) });
+  }
+  return out;
+}
+
+export async function GET(req: Request) {
+  const { searchParams } = new URL(req.url);
+  const range = (searchParams.get("range") as Range) || "last_7d";
+
+  const points = range === "last_24h" ? 24 : range === "last_7d" ? 7 * 24 : 30 * 24;
+
+  const activeUsers = jitter(1280, 0.12);
+  const builds = jitter(420, 0.2);
+  const errors = jitter(18, 0.4);
+  const cpu = Math.min(100, Math.max(3, Math.round(30 + rnd() * 50)));
+  const memory = Math.min(100, Math.max(8, Math.round(40 + rnd() * 40)));
+  const network = jitter(320, 0.25); // Mbps
+
+  const topProjects = [
+    { name: "ai-search-service", usage: jitter(34, 0.3) },
+    { name: "web-frontend", usage: jitter(28, 0.3) },
+    { name: "worker-queue", usage: jitter(22, 0.3) },
+    { name: "analytics-pipeline", usage: jitter(16, 0.3) },
+  ];
+
+  const timeseries = {
+    cpu: makeTimeseries(points, 55, 0.25),
+    mem: makeTimeseries(points, 60, 0.2),
+    net: makeTimeseries(points, 300, 0.35),
+    builds: makeTimeseries(points, 18, 0.5),
+    errors: makeTimeseries(points, 1.2, 0.8),
+  };
+
+  return NextResponse.json({
+    range,
+    summary: { activeUsers, builds, errors, cpu, memory, network },
+    topProjects,
+    timeseries,
+    updatedAt: Date.now(),
+  });
+}
diff --git a/apps/web/app/api/templates/route.ts b/apps/web/app/api/templates/route.ts
new file mode 100644
index 0000000..4a22ca2
--- /dev/null
+++ b/apps/web/app/api/templates/route.ts
@@ -0,0 +1,11 @@
+import { NextResponse } from "next/server";
+
+export async function POST(req: Request) {
+  try {
+    const body = await req.json();
+    // TODO: persist to database/service
+    return NextResponse.json({ ok: true, template: body }, { status: 201 });
+  } catch (err) {
+    return NextResponse.json({ ok: false, error: "Invalid request" }, { status: 400 });
+  }
+}
diff --git a/apps/web/app/api/workspaces/[id]/action/route.ts b/apps/web/app/api/workspaces/[id]/action/route.ts
new file mode 100644
index 0000000..8a088f2
--- /dev/null
+++ b/apps/web/app/api/workspaces/[id]/action/route.ts
@@ -0,0 +1,20 @@
+import { NextResponse } from "next/server";
+import { ensureWorkspace } from "@/app/api/_state/workspaces";
+
+export async function POST(req: Request, { params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const ws = ensureWorkspace(id);
+  const { action } = await req.json();
+  if (action === "restart") {
+    ws.status = "running";
+    ws.terminal.push("Restarting services...", "Server ready on http://localhost:3000 🚀");
+  } else if (action === "stop") {
+    ws.status = "stopped";
+    ws.terminal.push("Shutting down...");
+  } else if (action === "start") {
+    ws.status = "running";
+    ws.terminal.push("Starting workspace...");
+  }
+  ws.terminal = ws.terminal.slice(-120);
+  return NextResponse.json({ ok: true, status: ws.status });
+}
diff --git a/apps/web/app/api/workspaces/[id]/details/route.ts b/apps/web/app/api/workspaces/[id]/details/route.ts
new file mode 100644
index 0000000..d4d1e0b
--- /dev/null
+++ b/apps/web/app/api/workspaces/[id]/details/route.ts
@@ -0,0 +1,17 @@
+import { NextResponse } from "next/server";
+import { ensureWorkspace } from "@/app/api/_state/workspaces";
+
+export async function GET(_: Request, { params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const ws = ensureWorkspace(id);
+  return NextResponse.json({
+    id: ws.id,
+    name: ws.name,
+    provider: ws.provider,
+    size: ws.size,
+    region: ws.region,
+    status: ws.status,
+    assistant: ws.assistant,
+    updatedAt: Date.now(),
+  });
+}
diff --git a/apps/web/app/api/workspaces/[id]/metrics/route.ts b/apps/web/app/api/workspaces/[id]/metrics/route.ts
new file mode 100644
index 0000000..0058b63
--- /dev/null
+++ b/apps/web/app/api/workspaces/[id]/metrics/route.ts
@@ -0,0 +1,16 @@
+import { NextResponse } from "next/server";
+import { ensureWorkspace, jitter } from "@/app/api/_state/workspaces";
+
+export async function GET(_: Request, { params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const ws = ensureWorkspace(id);
+  // update with gentle jitter
+  ws.metrics.cpu = Math.max(1, Math.min(100, Math.round(jitter(ws.metrics.cpu, 0.2))));
+  ws.metrics.memory.usedGb = Math.max(1, Math.min(ws.metrics.memory.totalGb, Math.round(jitter(ws.metrics.memory.usedGb, 0.15))));
+  ws.metrics.disk.usedGb = Math.max(5, Math.min(ws.metrics.disk.totalGb, Math.round(jitter(ws.metrics.disk.usedGb, 0.1))));
+  ws.metrics.network.inMb = Math.max(10, Math.round(jitter(ws.metrics.network.inMb, 0.3)));
+  ws.metrics.network.outMb = Math.max(10, Math.round(jitter(ws.metrics.network.outMb, 0.3)));
+  ws.lastUpdate = Date.now();
+
+  return NextResponse.json({ ...ws.metrics, updatedAt: ws.lastUpdate });
+}
diff --git a/apps/web/app/api/workspaces/[id]/snapshots/route.ts b/apps/web/app/api/workspaces/[id]/snapshots/route.ts
new file mode 100644
index 0000000..c86e9da
--- /dev/null
+++ b/apps/web/app/api/workspaces/[id]/snapshots/route.ts
@@ -0,0 +1,18 @@
+import { NextResponse } from "next/server";
+import { ensureWorkspace } from "@/app/api/_state/workspaces";
+
+export async function GET(_: Request, { params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const ws = ensureWorkspace(id);
+  return NextResponse.json({ snapshots: ws.snapshots });
+}
+
+export async function POST(_: Request, { params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const ws = ensureWorkspace(id);
+  const snapId = `${Date.now()}`;
+  ws.snapshots.unshift({ id: snapId, createdAt: Date.now(), location: `s3://cloudidex/backups/${ws.id}/${snapId}` });
+  // keep only last 8
+  ws.snapshots = ws.snapshots.slice(0, 8);
+  return NextResponse.json({ ok: true, snapshots: ws.snapshots });
+}
diff --git a/apps/web/app/api/workspaces/[id]/terminal/route.ts b/apps/web/app/api/workspaces/[id]/terminal/route.ts
new file mode 100644
index 0000000..2726f4a
--- /dev/null
+++ b/apps/web/app/api/workspaces/[id]/terminal/route.ts
@@ -0,0 +1,27 @@
+import { NextResponse } from "next/server";
+import { ensureWorkspace } from "@/app/api/_state/workspaces";
+
+const sampleLines = [
+  "Compiling...",
+  "Bundling client...",
+  "Bundling server...",
+  "Server ready on http://localhost:3000 🚀",
+  "GET / 200 38ms",
+  "GET /api/health 200 12ms",
+  "Hot reload applied",
+];
+
+export async function GET(_: Request, { params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const ws = ensureWorkspace(id);
+  // append 0-2 random lines
+  const count = Math.floor(Math.random() * 3);
+  for (let i = 0; i < count; i++) {
+    const idx = Math.floor(Math.random() * sampleLines.length);
+    const line = sampleLines[idx] ?? "";
+    ws.terminal.push(line);
+  }
+  // keep last 120 lines
+  if (ws.terminal.length > 120) ws.terminal = ws.terminal.slice(-120);
+  return NextResponse.json({ lines: ws.terminal, updatedAt: Date.now() });
+}
diff --git a/apps/web/app/api/workspaces/estimate/route.ts b/apps/web/app/api/workspaces/estimate/route.ts
new file mode 100644
index 0000000..4e3c71e
--- /dev/null
+++ b/apps/web/app/api/workspaces/estimate/route.ts
@@ -0,0 +1,35 @@
+import { NextResponse } from "next/server";
+
+type Body = {
+  provider: string;
+  size: "small" | "medium" | "large";
+  region?: string;
+  hoursPerDay?: number; // optional usage for estimate
+};
+
+const BASE_PRICING = {
+  aws: { small: 0.07, medium: 0.16, large: 0.36 },
+  gcp: { small: 0.065, medium: 0.15, large: 0.34 },
+  azure: { small: 0.075, medium: 0.17, large: 0.38 },
+  local: { small: 0.02, medium: 0.05, large: 0.1 },
+} as const; // USD per hour
+
+export async function POST(req: Request) {
+  const body = (await req.json()) as Body;
+  const provider = (body.provider || "aws") as keyof typeof BASE_PRICING;
+  const size = (body.size || "small") as keyof (typeof BASE_PRICING)["aws"];
+  const hrs = typeof body.hoursPerDay === "number" ? Math.max(0, Math.min(24, body.hoursPerDay)) : 8;
+
+  const hourly = BASE_PRICING[provider][size];
+  const daily = hourly * hrs;
+  const monthly = daily * 30;
+  const currency = "USD";
+
+  return NextResponse.json({
+    provider,
+    size,
+    hoursPerDay: hrs,
+    cost: { hourly, daily, monthly, currency },
+    updatedAt: Date.now(),
+  });
+}
diff --git a/apps/web/app/api/workspaces/options/route.ts b/apps/web/app/api/workspaces/options/route.ts
new file mode 100644
index 0000000..ad6d3f8
--- /dev/null
+++ b/apps/web/app/api/workspaces/options/route.ts
@@ -0,0 +1,31 @@
+import { NextResponse } from "next/server";
+
+const OPTIONS = {
+  providers: [
+    { id: "aws", name: "AWS" },
+    { id: "gcp", name: "GCP" },
+    { id: "azure", name: "Azure" },
+    { id: "local", name: "Local" },
+  ],
+  images: [
+    { id: "ubuntu-22", label: "Ubuntu 22.04" },
+    { id: "ubuntu-20", label: "Ubuntu 20.04" },
+    { id: "debian-12", label: "Debian 12" },
+    { id: "docker", label: "Dockerfile" },
+  ],
+  sizes: [
+    { id: "small", cpu: 2, ramGb: 4 },
+    { id: "medium", cpu: 4, ramGb: 8 },
+    { id: "large", cpu: 8, ramGb: 16 },
+  ],
+  regions: [
+    { id: "us-east", label: "US East" },
+    { id: "us-west", label: "US West" },
+    { id: "eu-west", label: "EU West" },
+    { id: "ap-south", label: "AP South" },
+  ],
+};
+
+export async function GET() {
+  return NextResponse.json(OPTIONS);
+}
diff --git a/apps/web/app/api/workspaces/route.ts b/apps/web/app/api/workspaces/route.ts
new file mode 100644
index 0000000..d3e9d29
--- /dev/null
+++ b/apps/web/app/api/workspaces/route.ts
@@ -0,0 +1,45 @@
+import { NextResponse } from "next/server";
+
+type WS = { id: number; name: string; status: "running" | "stopped" };
+
+let workspaces: WS[] = [
+  { id: 1, name: "Workspace #1 - AWS EC2 XL", status: "running" },
+  { id: 2, name: "Workspace #2 - GCP VM", status: "stopped" },
+  { id: 3, name: "Workspace #3 - Azure VM", status: "running" },
+];
+
+export async function GET() {
+  // add tiny random toggles to look alive
+  if (Math.random() < 0.1) {
+    const i = Math.floor(Math.random() * workspaces.length);
+    const w = workspaces[i];
+    if (w) workspaces[i] = { ...w, status: w.status === "running" ? "stopped" : "running" };
+  }
+  return NextResponse.json({ workspaces, updatedAt: new Date().toISOString() });
+}
+
+export async function POST(req: Request) {
+  const body = await req.json();
+  const { id, action } = body;
+  if (action === "toggle") {
+    workspaces = workspaces.map((w) => (w.id === Number(id) ? { ...w, status: w.status === "running" ? "stopped" : "running" } : w));
+  } else if (action === "clone") {
+    const src = workspaces.find((w) => w.id === Number(id));
+    if (src) {
+      const maxId = workspaces.reduce((m, w) => Math.max(m, w.id), 0);
+      workspaces.push({ id: maxId + 1, name: src.name + " (Clone)", status: "stopped" });
+    }
+  } else if (action === "delete") {
+    workspaces = workspaces.filter((w) => w.id !== Number(id));
+  } else if (action === "create") {
+    // Create a new workspace from provided payload
+    const maxId = workspaces.reduce((m, w) => Math.max(m, w.id), 0);
+    const name: string = body?.name || `Workspace #${maxId + 1}`;
+    const provider: string = body?.provider ?? "multi";
+    const image: string = body?.image ?? "docker";
+    const size: string = body?.size ?? "small";
+    const created: WS = { id: maxId + 1, name: `${name} - ${provider.toUpperCase()} (${image}/${size})`, status: "running" };
+    workspaces = [...workspaces, created];
+  }
+  return NextResponse.json({ ok: true, workspaces });
+}
diff --git a/apps/web/app/billing-usage/page.tsx b/apps/web/app/billing-usage/page.tsx
new file mode 100644
index 0000000..8b2a556
--- /dev/null
+++ b/apps/web/app/billing-usage/page.tsx
@@ -0,0 +1,201 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/navigation";
+import { Sidebar } from "@/components/sidebar";
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Loader2, CreditCard, Database, Cpu, Globe2 } from "lucide-react";
+
+interface BillingData {
+  monthTotal: number;
+  computeCost: number;
+  storageCost: number;
+  networkCost: number;
+  cycle: { start: string; end: string };
+  computeUsage: { instances: number; vcpuHours: number; gpuHours: number; region: string };
+  storageUsage: { totalGb: number; snapshots: number; avgOpsPerDay: number };
+  networkUsage: { dataOutGb: number; bandwidthMb: number; regionsActive: number };
+  details: { plan: string; accountEmail: string; payment: string; nextInvoice: string };
+  updatedAt: string;
+}
+
+const inr = new Intl.NumberFormat("en-IN", {
+  style: "currency",
+  currency: "INR",
+  maximumFractionDigits: 2,
+});
+
+export default function BillingUsagePage() {
+  const router = useRouter();
+  const { data: session, status } = useSession();
+  const [data, setData] = useState<BillingData | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (status === "loading") return;
+    if (!session) router.push("/signin");
+  }, [status, session, router]);
+
+  useEffect(() => {
+    let timer: ReturnType<typeof setInterval> | undefined;
+    async function load() {
+      try {
+        const res = await fetch("/api/billing", { cache: "no-store" });
+        const j = (await res.json()) as BillingData;
+        setData(j);
+      } catch (e) {
+        console.error(e);
+      } finally {
+        setLoading(false);
+      }
+    }
+    if (status === "authenticated") {
+      load();
+      timer = setInterval(load, 10000); // realtime-ish polling
+    }
+    return () => {
+      if (timer) clearInterval(timer);
+    };
+  }, [status]);
+
+  if (status === "loading" || loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-background">
+        <div className="flex items-center gap-3 text-muted-foreground">
+          <Loader2 className="h-5 w-5 animate-spin" /> Loading billing data...
+        </div>
+      </div>
+    );
+  }
+
+  if (!session || !data) return null;
+
+  async function downloadInvoice() {
+    try {
+      const res = await fetch("/api/billing/invoice", { method: "GET" });
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `invoice-${new Date().toISOString().slice(0, 7)}.txt`;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      URL.revokeObjectURL(url);
+    } catch (e) {
+      console.error(e);
+      alert("Could not download invoice.");
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-background relative overflow-hidden">
+      <div className="fixed inset-0 -z-10 grid-background opacity-20" />
+      <div className="fixed inset-0 -z-10">
+        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/10 rounded-full blur-3xl pulse-glow" />
+        <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-secondary/10 rounded-full blur-3xl pulse-glow" style={{ animationDelay: "1s" }} />
+      </div>
+
+      <Sidebar />
+
+      <main className="ml-64 min-h-screen transition-all duration-300">
+        <div className="container mx-auto px-8 py-8">
+          {/* Header */}
+          <div className="flex items-center justify-between mb-6">
+            <div className="text-sm text-muted-foreground">Cloud-IDEX → Billing / Usage Dashboard</div>
+            <div className="flex items-center gap-3">
+              <button className="h-9 w-9 rounded-md bg-card border border-border flex items-center justify-center text-muted-foreground">🔔</button>
+              <div className="h-9 w-9 rounded-full bg-card border border-border flex items-center justify-center text-muted-foreground">R</div>
+            </div>
+          </div>
+
+          {/* Monthly Billing Summary & Trend */}
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
+            <Card className="lg:col-span-2 border-border bg-card/50">
+              <div className="p-4 md:p-6 space-y-2">
+                <div className="flex items-center gap-2 text-sm font-medium">
+                  <CreditCard className="h-4 w-4 text-primary" /> Monthly Billing Summary
+                </div>
+                <div className="text-lg font-semibold text-foreground">
+                  Total Cost (This Month): <span className="text-primary">{inr.format(data.monthTotal)}</span>
+                </div>
+                <div className="text-sm text-muted-foreground">
+                  • Compute: {inr.format(data.computeCost)} • Storage: {inr.format(data.storageCost)} • Network: {inr.format(data.networkCost)}
+                </div>
+                <div className="text-xs text-muted-foreground">Billing Cycle: {data.cycle.start} – {data.cycle.end}</div>
+              </div>
+            </Card>
+            <Card className="border-border bg-card/50">
+              <div className="p-4 md:p-6">
+                <div className="text-sm font-medium mb-2">Cost Trend (Last 6 Months)</div>
+                <div className="h-24 rounded-md border border-border bg-muted/30 flex items-center justify-center text-xs text-muted-foreground">Bar / Line Chart Placeholder</div>
+              </div>
+            </Card>
+          </div>
+
+          {/* Usage Breakdown by Resource */}
+          <div className="mb-3 text-sm font-medium flex items-center gap-2">
+            <span className="inline-flex h-4 w-4 items-center justify-center rounded-sm border border-border">📊</span>
+            Usage Breakdown by Resource
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
+            <Card className="border-border bg-card/50">
+              <div className="p-4 md:p-6 space-y-1">
+                <div className="flex items-center gap-2 text-sm font-medium"><Cpu className="h-4 w-4 text-primary" /> Compute Usage</div>
+                <div className="text-xs text-muted-foreground">Instances: {data.computeUsage.instances}</div>
+                <div className="text-xs text-muted-foreground">Total vCPU Hours: {data.computeUsage.vcpuHours} hrs</div>
+                <div className="text-xs text-muted-foreground">GPU Usage: {data.computeUsage.gpuHours} hrs</div>
+                <div className="text-xs text-muted-foreground">Region: {data.computeUsage.region}</div>
+              </div>
+            </Card>
+
+            <Card className="border-border bg-card/50">
+              <div className="p-4 md:p-6 space-y-1">
+                <div className="flex items-center gap-2 text-sm font-medium"><Database className="h-4 w-4 text-primary" /> Storage Usage</div>
+                <div className="text-xs text-muted-foreground">Total S3 Storage: {data.storageUsage.totalGb} GB</div>
+                <div className="text-xs text-muted-foreground">Snapshots: {data.storageUsage.snapshots}</div>
+                <div className="text-xs text-muted-foreground">Average Read/Write Ops: {data.storageUsage.avgOpsPerDay.toLocaleString()} / day</div>
+              </div>
+            </Card>
+
+            <Card className="border-border bg-card/50">
+              <div className="p-4 md:p-6 space-y-1">
+                <div className="flex items-center gap-2 text-sm font-medium"><Globe2 className="h-4 w-4 text-primary" /> Network Usage</div>
+                <div className="text-xs text-muted-foreground">Data Transfer Out: {data.networkUsage.dataOutGb} GB</div>
+                <div className="text-xs text-muted-foreground">Bandwidth Avg: {data.networkUsage.bandwidthMb} MB/s</div>
+                <div className="text-xs text-muted-foreground">Regions Active: {data.networkUsage.regionsActive}</div>
+              </div>
+            </Card>
+          </div>
+
+          {/* Monthly Cost Distribution + Billing Details */}
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <Card className="lg:col-span-2 border-border bg-card/50">
+              <div className="p-4 md:p-6">
+                <div className="text-sm font-medium mb-2">Monthly Cost Distribution</div>
+                <div className="h-40 rounded-md border border-border bg-muted/30 flex items-center justify-center text-xs text-muted-foreground">
+                  Stacked Bar Chart (Compute / Storage / Network)
+                </div>
+              </div>
+            </Card>
+
+            <Card className="border-border bg-card/50">
+              <div className="p-4 md:p-6 space-y-2">
+                <div className="text-sm font-medium">Billing Details</div>
+                <div className="text-xs text-muted-foreground">Plan: {data.details.plan}</div>
+                <div className="text-xs text-muted-foreground">Billing Account: {data.details.accountEmail}</div>
+                <div className="text-xs text-muted-foreground">Payment Method: {data.details.payment}</div>
+                <div className="text-xs text-muted-foreground">Next Invoice: {data.details.nextInvoice}</div>
+                <div className="pt-2">
+                  <Button onClick={downloadInvoice} className="bg-primary">Download Invoice</Button>
+                </div>
+              </div>
+            </Card>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}
diff --git a/apps/web/app/components/theme-provider.tsx b/apps/web/app/components/theme-provider.tsx
index 55c2f6e..1eebc9d 100644
--- a/apps/web/app/components/theme-provider.tsx
+++ b/apps/web/app/components/theme-provider.tsx
@@ -1,11 +1,10 @@
 'use client'
 
 import * as React from 'react'
-import {
-  ThemeProvider as NextThemesProvider,
-  type ThemeProviderProps,
-} from 'next-themes'
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
 
-export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+type Props = React.ComponentProps<typeof NextThemesProvider>
+
+export function ThemeProvider({ children, ...props }: Props) {
   return <NextThemesProvider {...props}>{children}</NextThemesProvider>
 }
diff --git a/apps/web/app/dashboard/page.tsx b/apps/web/app/dashboard/page.tsx
index f34d665..c604b75 100644
--- a/apps/web/app/dashboard/page.tsx
+++ b/apps/web/app/dashboard/page.tsx
@@ -23,17 +23,41 @@ export default function Dashboard() {
   const router = useRouter();
   const [mounted, setMounted] = useState(false);
 
-  useEffect(() => {
-    setMounted(true);
-  }, []);
+  useEffect(() => setMounted(true), []);
 
   useEffect(() => {
     if (status === "loading") return;
-    if (!session) {
-      router.push("/signin");
-    }
+    if (!session) router.push("/signin");
   }, [session, status, router]);
 
+  // Workspace data hooks must be declared before any return to keep hook order stable
+  type Workspace = { id: string | number; name: string; status: "running" | "stopped" };
+  const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
+  const [loadingWs, setLoadingWs] = useState(true);
+
+  // Fetch dynamic workspaces and keep them fresh
+  useEffect(() => {
+    let timer: ReturnType<typeof setInterval> | undefined;
+    async function load() {
+      try {
+        const res = await fetch("/api/workspaces", { cache: "no-store" });
+        const j = await res.json();
+        setWorkspaces(j.workspaces ?? []);
+      } catch (e) {
+        console.error(e);
+      } finally {
+        setLoadingWs(false);
+      }
+    }
+    if (session) {
+      load();
+      timer = setInterval(load, 10000);
+    }
+    return () => {
+      if (timer) clearInterval(timer);
+    };
+  }, [session]);
+
   if (!mounted || status === "loading") {
     return (
       <div className="min-h-screen flex items-center justify-center bg-background">
@@ -45,61 +69,9 @@ export default function Dashboard() {
     );
   }
 
-  if (!session) {
-    return null;
-  }
+  if (!session) return null;
 
-  const recentProjects = [
-    {
-      name: "my-next-app",
-      language: "TypeScript",
-      lastModified: "2 hours ago",
-      status: "active",
-    },
-    {
-      name: "api-backend",
-      language: "Node.js",
-      lastModified: "5 hours ago",
-      status: "idle",
-    },
-    {
-      name: "portfolio-site",
-      language: "React",
-      lastModified: "1 day ago",
-      status: "deployed",
-    },
-  ];
-
-  const stats = [
-    {
-      title: "Total Projects",
-      value: "12",
-      icon: Code,
-      trend: "+2 this week",
-      color: "primary",
-    },
-    {
-      title: "Active Sessions",
-      value: "3",
-      icon: Activity,
-      trend: "2 running now",
-      color: "accent",
-    },
-    {
-      title: "Deployments",
-      value: "24",
-      icon: Zap,
-      trend: "+6 this month",
-      color: "secondary",
-    },
-    {
-      title: "Build Time",
-      value: "2.3s",
-      icon: Clock,
-      trend: "25% faster",
-      color: "primary",
-    },
-  ];
+  
 
   return (
     <div className="min-h-screen bg-background relative overflow-hidden">
@@ -113,139 +85,98 @@ export default function Dashboard() {
 
       <main className="ml-64 min-h-screen transition-all duration-300">
         <div className="container mx-auto px-8 py-8">
+          {/* Top bar with search + new workspace */}
           <div className="flex items-center justify-between mb-8">
-            <div>
-              <h1 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary">
-                Welcome back, {session.user?.name || "Developer"}!
-              </h1>
-              <p className="text-muted-foreground mt-2">
-                Here&apos;s what&apos;s happening with your projects today
-              </p>
+            <div className="flex items-center gap-4 w-full max-w-2xl">
+              <div className="relative w-full">
+                <input
+                  aria-label="Search workspaces"
+                  placeholder="Search workspaces..."
+                  className="w-full rounded-lg border border-border bg-card px-4 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/30"
+                />
+              </div>
             </div>
-            <Button
-              onClick={() => router.push("/editor")}
-              className="bg-gradient-to-r from-primary to-secondary hover:glow-primary"
-            >
-              <Code className="mr-2 h-4 w-4" />
-              New Project
-            </Button>
-          </div>
 
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-            {stats.map((stat, index) => {
-              const Icon = stat.icon;
-              return (
-                <Card
-                  key={index}
-                  className="border-border bg-card/50 backdrop-blur hover:glow-primary hover-lift transition-all duration-300"
-                >
-                  <CardHeader className="flex flex-row items-center justify-between pb-2">
-                    <CardTitle className="text-sm font-medium text-muted-foreground">
-                      {stat.title}
-                    </CardTitle>
-                    <div className="p-2 rounded-lg bg-primary/10">
-                      <Icon className="h-4 w-4 text-primary" />
-                    </div>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="text-3xl font-bold text-foreground">{stat.value}</div>
-                    <p className="text-xs text-muted-foreground mt-1 flex items-center gap-1">
-                      <TrendingUp className="h-3 w-3" />
-                      {stat.trend}
-                    </p>
-                  </CardContent>
-                </Card>
-              );
-            })}
+            <div className="flex items-center gap-4">
+              <Button onClick={() => router.push("/workspaces/new")} className="bg-gradient-to-r from-primary to-secondary">
+                + New Workspace
+              </Button>
+              <button className="h-9 w-9 rounded-md bg-card border border-border flex items-center justify-center text-muted-foreground">
+                <span>🔔</span>
+              </button>
+              <div className="h-9 w-9 rounded-full bg-card border border-border flex items-center justify-center text-muted-foreground">R</div>
+            </div>
           </div>
 
-          <Card className="border-border bg-card/50 backdrop-blur mb-8">
-            <CardHeader>
-              <div className="flex items-center justify-between">
-                <div>
-                  <CardTitle className="text-2xl">Recent Projects</CardTitle>
-                  <CardDescription>Your most recently active projects</CardDescription>
-                </div>
-                <Button variant="outline" className="hover:glow-secondary">
-                  View All
-                </Button>
-              </div>
-            </CardHeader>
-            <CardContent>
-              <div className="space-y-4">
-                {recentProjects.map((project, index) => (
-                  <div
-                    key={index}
-                    className="flex items-center justify-between p-4 rounded-lg border border-border bg-card hover:bg-muted/50 transition-all cursor-pointer hover-lift"
-                  >
-                    <div className="flex items-center gap-4">
-                      <div className="p-3 rounded-lg bg-primary/10">
-                        <Code className="h-5 w-5 text-primary" />
-                      </div>
-                      <div>
-                        <h3 className="font-semibold text-foreground">{project.name}</h3>
-                        <p className="text-sm text-muted-foreground">{project.language}</p>
-                      </div>
+          {/* Heading */}
+          <h2 className="text-2xl font-semibold mb-4">Your Workspaces</h2>
+
+          {/* Workspace cards */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
+            {(loadingWs ? [1,2,3].map(n => ({ id: n, name: "Loading...", status: "running" as const })) : workspaces).map((ws) => (
+              <Card key={ws.id} className="border-border bg-card/50 backdrop-blur">
+                <div className="p-4">
+                  <div className="flex items-start justify-between">
+                    <div>
+                      <h3 className="text-lg font-semibold text-foreground">{ws.name}</h3>
+                      <p className={`text-sm mt-1 ${ws.status === "running" ? "text-green-500" : "text-rose-500"}`}>
+                        {ws.status === "running" ? "Running" : "Stopped"}
+                      </p>
                     </div>
+                  </div>
+
+                  <div className="h-px my-4 bg-border" />
+
+                  <div className="flex items-center justify-between text-sm text-muted-foreground">
                     <div className="flex items-center gap-4">
-                      <div className="text-right">
-                        <p className="text-sm text-muted-foreground">{project.lastModified}</p>
-                      </div>
-                      <Badge
-                        variant={
-                          project.status === "active"
-                            ? "default"
-                            : project.status === "deployed"
-                            ? "secondary"
-                            : "outline"
-                        }
-                        className={
-                          project.status === "active"
-                            ? "bg-accent/20 text-accent border-accent/50"
-                            : ""
-                        }
+                      <button onClick={() => router.push(`/workspaces/${ws.id}/ide`)} className="text-primary hover:underline">Open IDE</button>
+                      <button
+                        onClick={async () => {
+                          try { await fetch('/api/workspaces', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: ws.id, action: 'toggle' }) }); } catch {}
+                        }}
+                        className="hover:underline"
                       >
-                        {project.status}
-                      </Badge>
-                      <Button variant="ghost" size="sm">
-                        <Terminal className="h-4 w-4" />
-                      </Button>
+                        {ws.status === 'running' ? 'Stop' : 'Start'}
+                      </button>
+                      <button
+                        onClick={async () => { try { await fetch('/api/workspaces', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: ws.id, action: 'clone' }) }); } catch {} }}
+                        className="hover:underline"
+                      >
+                        Clone
+                      </button>
+                      <button
+                        onClick={async () => { try { await fetch('/api/workspaces', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: ws.id, action: 'delete' }) }); } catch {} }}
+                        className="text-rose-500 hover:underline"
+                      >
+                        Delete
+                      </button>
                     </div>
+                    <div className="text-xs text-muted-foreground">&nbsp;</div>
                   </div>
-                ))}
-              </div>
-            </CardContent>
-          </Card>
-
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-            <Card className="border-border bg-card/50 backdrop-blur hover:glow-primary hover-lift cursor-pointer transition-all duration-300">
-              <CardHeader>
-                <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 mb-2">
-                  <GitBranch className="h-6 w-6 text-primary" />
                 </div>
-                <CardTitle>Clone Repository</CardTitle>
-                <CardDescription>Import a project from GitHub, GitLab, or Bitbucket</CardDescription>
-              </CardHeader>
-            </Card>
+              </Card>
+            ))}
+          </div>
 
-            <Card className="border-border bg-card/50 backdrop-blur hover:glow-secondary hover-lift cursor-pointer transition-all duration-300">
-              <CardHeader>
-                <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-secondary/10 mb-2">
-                  <Terminal className="h-6 w-6 text-secondary" />
-                </div>
-                <CardTitle>New Terminal</CardTitle>
-                <CardDescription>Open a new terminal session in the cloud</CardDescription>
-              </CardHeader>
+          {/* Two panels below */}
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <Card className="border-border bg-card/50 px-4 py-6">
+              <h3 className="text-lg font-semibold">Create a Custom Template</h3>
+              <p className="text-sm text-muted-foreground mt-2">Build a base environment with your preferred tools and dotfiles.</p>
+              <div className="mt-4">
+                <Button onClick={() => router.push('/templates/new')} className="bg-gradient-to-r from-primary to-secondary">
+                  Build Template
+                </Button>
+              </div>
             </Card>
 
-            <Card className="border-border bg-card/50 backdrop-blur hover:glow-accent hover-lift cursor-pointer transition-all duration-300">
-              <CardHeader>
-                <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-accent/10 mb-2">
-                  <Zap className="h-6 w-6 text-accent" />
-                </div>
-                <CardTitle>Deploy Project</CardTitle>
-                <CardDescription>Deploy your application with one click</CardDescription>
-              </CardHeader>
+            <Card className="border-border bg-card/50 px-4 py-6">
+              <h3 className="text-lg font-semibold">Start from a Repository</h3>
+              <p className="text-sm text-muted-foreground mt-2">Create a new workspace directly from a Git repository URL.</p>
+              <div className="mt-4 flex gap-2">
+                <input placeholder="Paste a Git Repository URL..." className="flex-1 rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground" />
+                <Button variant="outline" disabled className="opacity-60">Create</Button>
+              </div>
             </Card>
           </div>
         </div>
diff --git a/apps/web/app/profile/page.tsx b/apps/web/app/profile/page.tsx
index ed63300..f9cf019 100644
--- a/apps/web/app/profile/page.tsx
+++ b/apps/web/app/profile/page.tsx
@@ -2,13 +2,14 @@
 
 import { useSession, signOut } from "next-auth/react";
 import { useRouter } from "next/navigation";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import Link from "next/link";
 import Image from "next/image";
 
 export default function Profile() {
   const { data: session, status } = useSession();
   const router = useRouter();
+  const [connections, setConnections] = useState<Array<{ provider: string; connected: boolean }>>([]);
 
   useEffect(() => {
     if (status === "loading") return;
@@ -29,6 +30,17 @@ export default function Profile() {
     return null;
   }
 
+  useEffect(() => {
+    async function load() {
+      try {
+        const r = await fetch("/api/account/connections", { cache: "no-store" });
+        const j = await r.json();
+        setConnections(j.connections ?? []);
+      } catch {}
+    }
+    if (status === "authenticated") load();
+  }, [status]);
+
   return (
     <div className="min-h-screen bg-gray-50">
       <nav className="bg-white shadow">
@@ -140,6 +152,18 @@ export default function Profile() {
                 </button>
               </div>
             </div>
+
+            <div className="mt-8 pt-8 border-t border-gray-200">
+              <h4 className="text-md font-medium text-gray-900 mb-4">Connected Accounts</h4>
+              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                {connections.map((c) => (
+                  <div key={c.provider} className="flex items-center justify-between rounded-md border border-gray-200 bg-white px-4 py-3">
+                    <div className="text-sm font-medium text-gray-900">{c.provider}</div>
+                    <span className={`text-xs ${c.connected ? 'text-emerald-600' : 'text-rose-600'}`}>{c.connected ? 'Connected' : 'Disconnected'}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
           </div>
         </div>
       </main>
diff --git a/apps/web/app/reporting/page.tsx b/apps/web/app/reporting/page.tsx
new file mode 100644
index 0000000..ee7bf2a
--- /dev/null
+++ b/apps/web/app/reporting/page.tsx
@@ -0,0 +1,219 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/navigation";
+import { Sidebar } from "@/components/sidebar";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Loader2, Activity, BarChart3, Users2, Cpu, Database, Network } from "lucide-react";
+
+type Summary = {
+  activeUsers: number;
+  builds: number;
+  errors: number;
+  cpu: number; // percent
+  memory: number; // percent
+  network: number; // Mbps
+};
+
+type ReportingResponse = {
+  range: string;
+  summary: Summary;
+  topProjects: { name: string; usage: number }[];
+  timeseries: {
+    cpu: { t: number; v: number }[];
+    mem: { t: number; v: number }[];
+    net: { t: number; v: number }[];
+    builds: { t: number; v: number }[];
+    errors: { t: number; v: number }[];
+  };
+  updatedAt: number;
+};
+
+const ranges = [
+  { key: "last_24h", label: "Last 24h" },
+  { key: "last_7d", label: "Last 7d" },
+  { key: "last_30d", label: "Last 30d" },
+  { key: "this_month", label: "This month" },
+] as const;
+
+export default function ReportingPage() {
+  const { data: session, status } = useSession();
+  const router = useRouter();
+  const [mounted, setMounted] = useState(false);
+  const [range, setRange] = useState<(typeof ranges)[number]["key"]>("last_7d");
+  const [data, setData] = useState<ReportingResponse | null>(null);
+
+  useEffect(() => setMounted(true), []);
+  useEffect(() => {
+    if (status === "loading") return;
+    if (!session) router.push("/signin");
+  }, [session, status, router]);
+
+  useEffect(() => {
+    let timer: ReturnType<typeof setInterval> | undefined;
+    async function load() {
+      try {
+        const res = await fetch(`/api/reporting?range=${range}`, { cache: "no-store" });
+        const j = (await res.json()) as ReportingResponse;
+        setData(j);
+      } catch (e) {
+        console.error(e);
+      }
+    }
+    if (session) {
+      load();
+      timer = setInterval(load, 10000);
+    }
+    return () => timer && clearInterval(timer);
+  }, [session, range]);
+
+  if (!mounted || status === "loading") {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-background">
+        <div className="flex flex-col items-center gap-4">
+          <Loader2 className="h-8 w-8 animate-spin text-primary" />
+          <div className="text-lg text-muted-foreground">Loading reporting...</div>
+        </div>
+      </div>
+    );
+  }
+  if (!session) return null;
+
+  return (
+    <div className="min-h-screen bg-background relative">
+      <div className="fixed inset-0 -z-10 grid-background opacity-20" />
+      <Sidebar />
+      <main className="ml-64 min-h-screen transition-all duration-300">
+        <div className="container mx-auto px-8 py-8">
+          <div className="flex items-center justify-between mb-6">
+            <h1 className="text-2xl font-semibold">Reporting</h1>
+            <div className="flex items-center gap-2">
+              {ranges.map((r) => (
+                <Button
+                  key={r.key}
+                  variant={range === r.key ? "default" : "outline"}
+                  onClick={() => setRange(r.key)}
+                  className={range === r.key ? "bg-gradient-to-r from-primary to-secondary" : ""}
+                >
+                  {r.label}
+                </Button>
+              ))}
+            </div>
+          </div>
+
+          {/* Summary cards */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-6">
+            <Card className="bg-card/50 backdrop-blur border-border">
+              <CardHeader className="flex flex-row items-center justify-between pb-2">
+                <CardTitle className="text-sm font-medium">Active Users</CardTitle>
+                <Users2 className="h-4 w-4 text-muted-foreground" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-3xl font-bold">{data?.summary.activeUsers ?? "—"}</div>
+                <p className="text-xs text-muted-foreground">Unique across selected range</p>
+              </CardContent>
+            </Card>
+
+            <Card className="bg-card/50 backdrop-blur border-border">
+              <CardHeader className="flex flex-row items-center justify-between pb-2">
+                <CardTitle className="text-sm font-medium">Builds</CardTitle>
+                <BarChart3 className="h-4 w-4 text-muted-foreground" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-3xl font-bold">{data?.summary.builds ?? "—"}</div>
+                <p className="text-xs text-muted-foreground">Triggered pipelines</p>
+              </CardContent>
+            </Card>
+
+            <Card className="bg-card/50 backdrop-blur border-border">
+              <CardHeader className="flex flex-row items-center justify-between pb-2">
+                <CardTitle className="text-sm font-medium">Errors</CardTitle>
+                <Activity className="h-4 w-4 text-rose-500" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-3xl font-bold">{data?.summary.errors ?? "—"}</div>
+                <p className="text-xs text-muted-foreground">Across services</p>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Resource cards */}
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mt-6">
+            <Card className="bg-card/50 backdrop-blur border-border">
+              <CardHeader className="flex items-center justify-between pb-2">
+                <CardTitle className="text-sm font-medium flex items-center gap-2"><Cpu className="h-4 w-4" />CPU</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="text-3xl font-bold">{data?.summary.cpu ?? "—"}%</div>
+                <p className="text-xs text-muted-foreground">Avg utilization</p>
+              </CardContent>
+            </Card>
+
+            <Card className="bg-card/50 backdrop-blur border-border">
+              <CardHeader className="flex items-center justify-between pb-2">
+                <CardTitle className="text-sm font-medium flex items-center gap-2"><Database className="h-4 w-4" />Memory</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="text-3xl font-bold">{data?.summary.memory ?? "—"}%</div>
+                <p className="text-xs text-muted-foreground">Avg utilization</p>
+              </CardContent>
+            </Card>
+
+            <Card className="bg-card/50 backdrop-blur border-border">
+              <CardHeader className="flex items-center justify-between pb-2">
+                <CardTitle className="text-sm font-medium flex items-center gap-2"><Network className="h-4 w-4" />Network</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="text-3xl font-bold">{data?.summary.network ?? "—"} Mbps</div>
+                <p className="text-xs text-muted-foreground">Avg throughput</p>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Top projects + builds spark */}
+          <div className="grid grid-cols-1 xl:grid-cols-2 gap-6 mt-6">
+            <Card className="bg-card/50 backdrop-blur border-border">
+              <CardHeader>
+                <CardTitle className="text-sm font-medium">Top Projects by Activity</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-3">
+                  {data?.topProjects?.map((p) => (
+                    <div key={p.name} className="flex items-center justify-between">
+                      <div className="flex items-center gap-3">
+                        <div className="h-2.5 w-2.5 rounded-full bg-primary" />
+                        <div className="text-sm">{p.name}</div>
+                      </div>
+                      <Badge variant="secondary" className="bg-secondary/20">{p.usage}%</Badge>
+                    </div>
+                  )) || <div className="text-sm text-muted-foreground">No data</div>}
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card className="bg-card/50 backdrop-blur border-border">
+              <CardHeader>
+                <CardTitle className="text-sm font-medium">Builds Over Time</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="h-28 w-full flex items-end gap-1">
+                  {data?.timeseries.builds.slice(-60).map((p, i) => (
+                    <div
+                      key={i}
+                      className="flex-1 bg-primary/60"
+                      style={{ height: `${Math.min(100, 10 + (p.v / 30) * 100)}%` }}
+                    />
+                  ))}
+                </div>
+                <p className="text-xs text-muted-foreground mt-2">Lightweight spark bars (no chart lib)</p>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}
diff --git a/apps/web/app/settings/change-password/page.tsx b/apps/web/app/settings/change-password/page.tsx
new file mode 100644
index 0000000..f754a00
--- /dev/null
+++ b/apps/web/app/settings/change-password/page.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Sidebar } from "@/components/sidebar";
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Loader2 } from "lucide-react";
+
+export default function ChangePasswordPage() {
+  const router = useRouter();
+  const [current, setCurrent] = useState("");
+  const [next, setNext] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  async function submit() {
+    setBusy(true);
+    try {
+      const res = await fetch("/api/account/password", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ current, next }),
+      });
+      if (!res.ok) throw new Error("Password update failed");
+      alert("Password updated (demo)");
+      router.push("/settings");
+    } catch (e) {
+      console.error(e);
+      alert("Unable to update password right now.");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-background relative overflow-hidden">
+      <div className="fixed inset-0 -z-10 grid-background opacity-20" />
+      <Sidebar />
+      <main className="ml-64 min-h-screen transition-all duration-300">
+        <div className="container mx-auto px-8 py-8">
+          <h1 className="text-xl font-semibold mb-6">Change Password</h1>
+          <Card className="max-w-xl border-border bg-card/50">
+            <div className="p-6 space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="cur">Current password</Label>
+                <Input id="cur" type="password" value={current} onChange={(e) => setCurrent(e.target.value)} />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="next">New password</Label>
+                <Input id="next" type="password" value={next} onChange={(e) => setNext(e.target.value)} />
+              </div>
+              <div className="flex items-center gap-3">
+                <Button variant="outline" onClick={() => router.back()}>Cancel</Button>
+                <Button onClick={submit} disabled={busy} className="bg-primary">
+                  {busy ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
+                  Update Password
+                </Button>
+              </div>
+            </div>
+          </Card>
+        </div>
+      </main>
+    </div>
+  );
+}
diff --git a/apps/web/app/settings/page.tsx b/apps/web/app/settings/page.tsx
index f2636e5..10ec33a 100644
--- a/apps/web/app/settings/page.tsx
+++ b/apps/web/app/settings/page.tsx
@@ -2,217 +2,173 @@
 
 import { useSession, signOut } from "next-auth/react";
 import { useRouter } from "next/navigation";
-import { useEffect } from "react";
-import Link from "next/link";
+import { useEffect, useState } from "react";
+import { Sidebar } from "@/components/sidebar";
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Loader2, Shield, LogOut, Trash2, Link2 } from "lucide-react";
+
+type Conn = { provider: string; connected: boolean };
 
 export default function Settings() {
   const { data: session, status } = useSession();
   const router = useRouter();
+  const [deleting, setDeleting] = useState(false);
+  const [connections, setConnections] = useState<Conn[]>([]);
 
+  // fetch dynamic connection statuses
   useEffect(() => {
-    if (status === "loading") return;
-    if (!session) {
-      router.push("/signin");
+    async function load() {
+      try {
+        const r = await fetch("/api/account/connections", { cache: "no-store" });
+        const j = await r.json();
+        setConnections(j.connections ?? []);
+      } catch (e) {
+        console.error(e);
+      }
     }
+    if (status === "authenticated") load();
+  }, [status]);
+
+  useEffect(() => {
+    if (status === "loading") return;
+    if (!session) router.push("/signin");
   }, [session, status, router]);
 
   if (status === "loading") {
     return (
-      <div className="min-h-screen flex items-center justify-center">
-        <div className="text-lg">Loading...</div>
+      <div className="min-h-screen flex items-center justify-center bg-background">
+        <div className="flex items-center gap-3 text-muted-foreground">
+          <Loader2 className="h-5 w-5 animate-spin" /> Loading settings...
+        </div>
       </div>
     );
   }
 
-  if (!session) {
-    return null;
+  if (!session) return null;
+
+  async function handleDelete() {
+    setDeleting(true);
+    try {
+      const res = await fetch("/api/account/delete", { method: "POST" });
+      if (!res.ok) throw new Error("Delete failed");
+      await signOut({ callbackUrl: "/" });
+    } catch (e) {
+      console.error(e);
+      alert("Unable to delete account right now.");
+    } finally {
+      setDeleting(false);
+    }
   }
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      <nav className="bg-white shadow">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between h-16">
-            <div className="flex items-center">
-              <Link href="/" className="text-xl font-bold text-gray-900">
-                Dev8.dev
-              </Link>
-            </div>
-            <div className="flex items-center space-x-4">
-              <Link
-                href="/dashboard"
-                className="text-gray-700 hover:text-gray-900"
-              >
-                Dashboard
-              </Link>
-              <Link
-                href="/profile"
-                className="text-gray-700 hover:text-gray-900"
-              >
-                Profile
-              </Link>
-              <span className="text-gray-700">
-                {session.user?.name || session.user?.email}
-              </span>
-              <button
-                onClick={() => signOut()}
-                className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md text-sm font-medium"
-              >
-                Sign Out
-              </button>
+    <div className="min-h-screen bg-background relative overflow-hidden">
+      <div className="fixed inset-0 -z-10 grid-background opacity-20" />
+      <div className="fixed inset-0 -z-10">
+        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/10 rounded-full blur-3xl pulse-glow" />
+        <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-secondary/10 rounded-full blur-3xl pulse-glow" style={{ animationDelay: "1s" }} />
+      </div>
+
+      <Sidebar />
+
+      <main className="ml-64 min-h-screen transition-all duration-300">
+        <div className="container mx-auto px-8 py-8">
+          <div className="flex items-center justify-between mb-6">
+            <h1 className="text-xl font-semibold">Settings</h1>
+            <div className="flex items-center gap-3 text-sm text-muted-foreground">
+              {session.user?.name || session.user?.email}
+              <Button variant="destructive" onClick={() => signOut()}>
+                <LogOut className="h-4 w-4 mr-2" /> Sign Out
+              </Button>
             </div>
           </div>
-        </div>
-      </nav>
-
-      <main className="max-w-3xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
-        <div className="space-y-6">
-          <div className="bg-white shadow rounded-lg">
-            <div className="px-4 py-5 sm:p-6">
-              <h3 className="text-lg leading-6 font-medium text-gray-900 mb-6">
-                Account Settings
-              </h3>
-
-              <div className="space-y-6">
-                <div className="border-b border-gray-200 pb-6">
-                  <h4 className="text-md font-medium text-gray-900 mb-4">
-                    Security
-                  </h4>
-                  <div className="space-y-4">
-                    <div className="flex justify-between items-center">
-                      <div>
-                        <p className="text-sm font-medium text-gray-900">
-                          Password
-                        </p>
-                        <p className="text-sm text-gray-500">
-                          Change your account password
-                        </p>
-                      </div>
-                      <button className="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium">
-                        Change Password
-                      </button>
-                    </div>
 
-                    <div className="flex justify-between items-center">
-                      <div>
-                        <p className="text-sm font-medium text-gray-900">
-                          Two-Factor Authentication
-                        </p>
-                        <p className="text-sm text-gray-500">
-                          Add an extra layer of security
-                        </p>
-                      </div>
-                      <button className="bg-gray-300 text-gray-600 px-4 py-2 rounded-md text-sm font-medium cursor-not-allowed">
-                        Coming Soon
-                      </button>
-                    </div>
-                  </div>
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            {/* Security */}
+            <Card className="border-border bg-card/50">
+              <div className="p-4 md:p-6 space-y-4">
+                <div className="flex items-center gap-2">
+                  <Shield className="h-5 w-5 text-primary" />
+                  <h2 className="text-sm font-medium">Security</h2>
                 </div>
 
-                <div className="border-b border-gray-200 pb-6">
-                  <h4 className="text-md font-medium text-gray-900 mb-4">
-                    Connected Accounts
-                  </h4>
-                  <div className="space-y-4">
-                    <div className="flex justify-between items-center">
-                      <div className="flex items-center">
-                        <svg className="w-5 h-5 mr-3" viewBox="0 0 24 24">
-                          <path
-                            fill="currentColor"
-                            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="currentColor"
-                            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="currentColor"
-                            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="currentColor"
-                            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-sm font-medium text-gray-900">
-                            Google
-                          </p>
-                          <p className="text-sm text-gray-500">
-                            OAuth connection
-                          </p>
-                        </div>
-                      </div>
-                      <span className="text-sm text-green-600">Connected</span>
-                    </div>
+                <div className="flex items-center justify-between rounded-md border border-border bg-card px-4 py-3">
+                  <div>
+                    <div className="text-sm font-medium">Password</div>
+                    <div className="text-xs text-muted-foreground">Change your account password</div>
+                  </div>
+                  <Button onClick={() => router.push("/settings/change-password")} className="bg-primary">Change Password</Button>
+                </div>
 
-                    <div className="flex justify-between items-center">
-                      <div className="flex items-center">
-                        <svg
-                          className="w-5 h-5 mr-3"
-                          fill="currentColor"
-                          viewBox="0 0 20 20"
-                        >
-                          <path
-                            fillRule="evenodd"
-                            d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z"
-                            clipRule="evenodd"
-                          />
-                        </svg>
-                        <div>
-                          <p className="text-sm font-medium text-gray-900">
-                            GitHub
-                          </p>
-                          <p className="text-sm text-gray-500">
-                            OAuth connection
-                          </p>
-                        </div>
-                      </div>
-                      <span className="text-sm text-green-600">Connected</span>
-                    </div>
+                <div className="flex items-center justify-between rounded-md border border-border bg-card px-4 py-3">
+                  <div>
+                    <div className="text-sm font-medium">Two-Factor Authentication</div>
+                    <div className="text-xs text-muted-foreground">Add an extra layer of security</div>
                   </div>
+                  <Button variant="outline" disabled>Coming Soon</Button>
                 </div>
+              </div>
+            </Card>
 
-                <div className="pt-6">
-                  <h4 className="text-md font-medium text-gray-900 mb-4">
-                    Danger Zone
-                  </h4>
-                  <div className="bg-red-50 border border-red-200 rounded-md p-4">
-                    <div className="flex">
-                      <div className="flex-shrink-0">
-                        <svg
-                          className="h-5 w-5 text-red-400"
-                          viewBox="0 0 20 20"
-                          fill="currentColor"
-                        >
-                          <path
-                            fillRule="evenodd"
-                            d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-                            clipRule="evenodd"
-                          />
-                        </svg>
-                      </div>
-                      <div className="ml-3">
-                        <h3 className="text-sm font-medium text-red-800">
-                          Delete Account
-                        </h3>
-                        <div className="mt-2 text-sm text-red-700">
-                          <p>
-                            Once you delete your account, there is no going
-                            back. Please be certain.
-                          </p>
-                        </div>
-                        <div className="mt-4">
-                          <button className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md text-sm font-medium">
-                            Delete Account
-                          </button>
+            {/* Connected Accounts */}
+            <Card className="border-border bg-card/50">
+              <div className="p-4 md:p-6 space-y-4">
+                <div className="flex items-center gap-2">
+                  <Link2 className="h-5 w-5 text-primary" />
+                  <h2 className="text-sm font-medium">Connected Accounts</h2>
+                </div>
+
+                {connections.length === 0 ? (
+                  <div className="text-xs text-muted-foreground">Loading connections...</div>
+                ) : (
+                  connections.map((c) => (
+                    <div key={c.provider} className="flex items-center justify-between rounded-md border border-border bg-card px-4 py-3">
+                      <div className="flex items-center gap-3">
+                        <div className="h-8 w-8 rounded-md bg-primary/10" />
+                        <div>
+                          <div className="text-sm font-medium">{c.provider}</div>
+                          <div className="text-xs text-muted-foreground">OAuth connection</div>
                         </div>
                       </div>
+                      {c.connected ? (
+                        <span className="text-xs text-emerald-500">Connected</span>
+                      ) : (
+                        <Button
+                          variant="outline"
+                          onClick={() => {
+                            const p = c.provider.toLowerCase();
+                            // Kick off OAuth sign-in to link account
+                            window.location.href = `/api/auth/signin/${p}`;
+                          }}
+                        >
+                          Connect
+                        </Button>
+                      )}
                     </div>
+                  ))
+                )}
+              </div>
+            </Card>
+
+            {/* Danger Zone */}
+            <Card className="lg:col-span-2 border border-destructive/30 bg-destructive/5">
+              <div className="p-4 md:p-6">
+                <div className="flex items-center gap-2 text-destructive mb-2">
+                  <Trash2 className="h-5 w-5" />
+                  <h2 className="text-sm font-medium">Danger Zone</h2>
+                </div>
+                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between rounded-md border border-destructive/40 bg-background px-4 py-3">
+                  <div>
+                    <div className="text-sm font-medium text-foreground">Delete Account</div>
+                    <div className="text-xs text-muted-foreground">Once you delete your account, there is no going back.</div>
                   </div>
+                  <Button variant="destructive" onClick={handleDelete} disabled={deleting} className="mt-3 sm:mt-0">
+                    {deleting ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
+                    Delete Account
+                  </Button>
                 </div>
               </div>
-            </div>
+            </Card>
           </div>
         </div>
       </main>
diff --git a/apps/web/app/workspaces/[id]/ide/page.tsx b/apps/web/app/workspaces/[id]/ide/page.tsx
new file mode 100644
index 0000000..d5a7d49
--- /dev/null
+++ b/apps/web/app/workspaces/[id]/ide/page.tsx
@@ -0,0 +1,188 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useSession } from "next-auth/react";
+import { useParams, useRouter } from "next/navigation";
+import { Sidebar } from "@/components/sidebar";
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Loader2, Play, Square, RotateCw } from "lucide-react";
+
+type Details = {
+  id: string;
+  name: string;
+  provider: string;
+  size: string;
+  region: string;
+  status: "running" | "stopped";
+  assistant: { tips: string[]; note: string };
+  updatedAt: number;
+};
+type Metrics = {
+  cpu: number;
+  memory: { usedGb: number; totalGb: number };
+  disk: { usedGb: number; totalGb: number };
+  network: { inMb: number; outMb: number };
+  updatedAt: number;
+};
+
+export default function WorkspaceIDEPage() {
+  const params = useParams<{ id: string }>();
+  const id = params?.id;
+  const router = useRouter();
+  const { data: session, status } = useSession();
+
+  const [details, setDetails] = useState<Details | null>(null);
+  const [metrics, setMetrics] = useState<Metrics | null>(null);
+  const [terminal, setTerminal] = useState<string[]>([]);
+  const [snapshots, setSnapshots] = useState<Array<{ id: string; createdAt: number; location: string }>>([]);
+  const [loading, setLoading] = useState(true);
+  const [acting, setActing] = useState<"start" | "stop" | "restart" | null>(null);
+
+  useEffect(() => {
+    if (status === "loading") return;
+    if (!session) router.push("/signin");
+  }, [status, session, router]);
+
+  async function loadAll(signal?: AbortSignal) {
+    try {
+      const [d, m, t, s] = await Promise.all([
+        fetch(`/api/workspaces/${id}/details`, { cache: "no-store", signal }).then((r) => r.json()),
+        fetch(`/api/workspaces/${id}/metrics`, { cache: "no-store", signal }).then((r) => r.json()),
+        fetch(`/api/workspaces/${id}/terminal`, { cache: "no-store", signal }).then((r) => r.json()),
+        fetch(`/api/workspaces/${id}/snapshots`, { cache: "no-store", signal }).then((r) => r.json()),
+      ]);
+      setDetails(d);
+      setMetrics(m);
+      setTerminal(t.lines);
+      setSnapshots(s.snapshots);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    if (!id || status !== "authenticated") return;
+    const controller = new AbortController();
+    let timer: ReturnType<typeof setInterval> | undefined;
+    loadAll(controller.signal);
+    timer = setInterval(() => loadAll(controller.signal), 5000);
+    return () => {
+      controller.abort();
+      if (timer) clearInterval(timer);
+    };
+  }, [id, status]);
+
+  async function doAction(action: "start" | "stop" | "restart") {
+    setActing(action);
+    try {
+      await fetch(`/api/workspaces/${id}/action`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action }),
+      });
+      await loadAll();
+    } finally {
+      setActing(null);
+    }
+  }
+
+  async function createSnapshot() {
+    await fetch(`/api/workspaces/${id}/snapshots`, { method: "POST" });
+    const s = await fetch(`/api/workspaces/${id}/snapshots`, { cache: "no-store" }).then((r) => r.json());
+    setSnapshots(s.snapshots);
+  }
+
+  if (status === "loading" || loading || !details || !metrics) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-background">
+        <div className="flex items-center gap-3 text-muted-foreground">
+          <Loader2 className="h-5 w-5 animate-spin" /> Opening workspace IDE...
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-background relative overflow-hidden">
+      <div className="fixed inset-0 -z-10 grid-background opacity-20" />
+      <Sidebar />
+
+      <main className="ml-64 min-h-screen transition-all duration-300">
+        <div className="container mx-auto px-8 py-6">
+          {/* Header */}
+          <div className="flex items-center justify-between mb-4">
+            <div className="text-sm text-muted-foreground">
+              Workspace: <span className="text-foreground font-medium">{details.name}</span> ({details.provider.toUpperCase()} {details.size} • {details.region})
+            </div>
+            <div className="flex items-center gap-2">
+              <Button variant="outline" onClick={() => doAction("restart")} disabled={!!acting}><RotateCw className="h-4 w-4 mr-1"/> Restart</Button>
+              {details.status === "running" ? (
+                <Button variant="destructive" onClick={() => doAction("stop")} disabled={!!acting}><Square className="h-4 w-4 mr-1"/> Stop</Button>
+              ) : (
+                <Button onClick={() => doAction("start")} disabled={!!acting}><Play className="h-4 w-4 mr-1"/> Start</Button>
+              )}
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
+            {/* VS Code Editor placeholder */}
+            <Card className="xl:col-span-2 border-border bg-card/50">
+              <div className="p-4 md:p-6 h-80 md:h-[420px] rounded-md border border-dashed border-border flex items-center justify-center text-sm text-muted-foreground">
+                VS Code Editor (Web)
+              </div>
+            </Card>
+
+            {/* System Metrics + Snapshots */}
+            <div className="space-y-6">
+              <Card className="border-border bg-card/50">
+                <div className="p-4 md:p-6 space-y-1">
+                  <div className="text-sm font-medium">System Metrics</div>
+                  <div className="text-xs text-muted-foreground">CPU: {metrics.cpu}%</div>
+                  <div className="text-xs text-muted-foreground">Memory: {metrics.memory.usedGb}GB / {metrics.memory.totalGb}GB</div>
+                  <div className="text-xs text-muted-foreground">Disk: {metrics.disk.usedGb}GB / {metrics.disk.totalGb}GB</div>
+                  <div className="text-xs text-muted-foreground">Network: {metrics.network.inMb}MB/s | {metrics.network.outMb}MB/s</div>
+                </div>
+              </Card>
+
+              <Card className="border-border bg-card/50">
+                <div className="p-4 md:p-6 space-y-3">
+                  <div className="text-sm font-medium">Snapshots & Backups</div>
+                  <div className="text-xs text-muted-foreground">Last snapshot: {snapshots[0] ? new Date(snapshots[0].createdAt).toLocaleTimeString() : "—"}</div>
+                  <div className="text-xs text-muted-foreground">Next auto-backup: 3 hrs</div>
+                  <Button variant="outline" onClick={createSnapshot}>Create Snapshot</Button>
+                </div>
+              </Card>
+
+              <Card className="border-border bg-card/50">
+                <div className="p-4 md:p-6 space-y-2">
+                  <div className="text-sm font-medium">AI Assistant</div>
+                  <ul className="list-disc pl-5 text-xs text-muted-foreground space-y-1">
+                    {details.assistant.tips.map((t, i) => (
+                      <li key={i}>{t}</li>
+                    ))}
+                  </ul>
+                  <div className="text-[11px] text-muted-foreground/80">💡 {details.assistant.note}</div>
+                </div>
+              </Card>
+            </div>
+          </div>
+
+          {/* Terminal */}
+          <div className="mt-6">
+            <Card className="border-border bg-card/50">
+              <div className="p-4">
+                <div className="text-sm font-medium mb-2">Terminal</div>
+                <div className="h-48 overflow-auto rounded-md bg-slate-900/80 text-slate-100 text-xs p-3 font-mono">
+                  {terminal.map((l, i) => (
+                    <div key={i}>{l}</div>
+                  ))}
+                </div>
+              </div>
+            </Card>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}
diff --git a/apps/web/app/workspaces/new/page.tsx b/apps/web/app/workspaces/new/page.tsx
new file mode 100644
index 0000000..e640bb5
--- /dev/null
+++ b/apps/web/app/workspaces/new/page.tsx
@@ -0,0 +1,221 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/navigation";
+import { Sidebar } from "@/components/sidebar";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Loader2 } from "lucide-react";
+
+type Options = {
+  providers: { id: string; name: string }[];
+  images: { id: string; label: string }[];
+  sizes: { id: "small" | "medium" | "large"; cpu: number; ramGb: number }[];
+  regions: { id: string; label: string }[];
+};
+
+export default function NewWorkspacePage() {
+  const { data: session, status } = useSession();
+  const router = useRouter();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  useEffect(() => {
+    if (status === "loading") return;
+    if (!session) router.push("/signin");
+  }, [session, status, router]);
+
+  const [options, setOptions] = useState<Options | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [submitting, setSubmitting] = useState(false);
+
+  const [name, setName] = useState("");
+  const [provider, setProvider] = useState("aws");
+  const [image, setImage] = useState("ubuntu-22");
+  const [size, setSize] = useState<"small" | "medium" | "large">("small");
+  const [region, setRegion] = useState("us-east");
+  const [hoursPerDay, setHoursPerDay] = useState(8);
+
+  const [estimate, setEstimate] = useState<{ hourly: number; daily: number; monthly: number; currency: string } | null>(null);
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const res = await fetch("/api/workspaces/options", { cache: "no-store" });
+        const j = (await res.json()) as Options;
+        setOptions(j);
+      } finally {
+        setLoading(false);
+      }
+    }
+    load();
+  }, []);
+
+  useEffect(() => {
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    async function calc() {
+      try {
+        const res = await fetch("/api/workspaces/estimate", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ provider, size, hoursPerDay }),
+        });
+        const j = await res.json();
+        setEstimate(j.cost);
+      } catch (e) {
+        console.error(e);
+      }
+    }
+    // debounce quick changes
+    timer = setTimeout(calc, 200);
+    return () => timer && clearTimeout(timer);
+  }, [provider, size, hoursPerDay]);
+
+  async function onSubmit() {
+    setSubmitting(true);
+    try {
+      await fetch("/api/workspaces", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "create", name, provider, image, size, region }),
+      });
+      router.push("/dashboard");
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  if (!mounted || status === "loading" || loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-background">
+        <div className="flex flex-col items-center gap-4">
+          <Loader2 className="h-8 w-8 animate-spin text-primary" />
+          <div className="text-lg text-muted-foreground">Preparing new workspace...</div>
+        </div>
+      </div>
+    );
+  }
+  if (!session) return null;
+
+  return (
+    <div className="min-h-screen bg-background relative">
+      <div className="fixed inset-0 -z-10 grid-background opacity-20" />
+      <Sidebar />
+      <main className="ml-64 min-h-screen transition-all duration-300">
+        <div className="container mx-auto px-8 py-8">
+          <div className="flex items-center justify-between mb-6">
+            <h1 className="text-2xl font-semibold">Create New Workspace</h1>
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <Card className="bg-card/50 backdrop-blur border-border lg:col-span-2">
+              <CardHeader>
+                <CardTitle className="text-sm font-medium">Configuration</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div>
+                    <Label htmlFor="name">Workspace Name</Label>
+                    <Input id="name" placeholder="e.g. api-backend-dev" value={name} onChange={(e) => setName(e.target.value)} />
+                  </div>
+                  <div>
+                    <Label htmlFor="provider">Provider</Label>
+                    <select
+                      id="provider"
+                      className="w-full rounded-md border border-border bg-card px-3 py-2 text-sm"
+                      value={provider}
+                      onChange={(e) => setProvider(e.target.value)}
+                    >
+                      {options?.providers.map((p) => (
+                        <option key={p.id} value={p.id}>{p.name}</option>
+                      ))}
+                    </select>
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 items-start">
+                  <div className="min-w-0">
+                    <Label htmlFor="image">Base Image</Label>
+                    <select
+                      id="image"
+                      className="w-full rounded-md border border-border bg-card px-3 py-2 text-sm"
+                      value={image}
+                      onChange={(e) => setImage(e.target.value)}
+                    >
+                      {options?.images.map((img) => (
+                        <option key={img.id} value={img.id}>{img.label}</option>
+                      ))}
+                    </select>
+                  </div>
+                  <div className="min-w-0">
+                    <Label>Size</Label>
+                    <div className="flex flex-wrap items-center gap-2 mt-2">
+                      {options?.sizes.map((s) => (
+                        <Button
+                          key={s.id}
+                          variant={size === s.id ? "default" : "outline"}
+                          onClick={() => setSize(s.id)}
+                          className={(size === s.id ? "bg-gradient-to-r from-primary to-secondary " : "") + "whitespace-nowrap shrink-0"}
+                        >
+                          {s.id.toUpperCase()} • {s.cpu} CPU / {s.ramGb} GB
+                        </Button>
+                      ))}
+                    </div>
+                  </div>
+                  <div className="min-w-0">
+                    <Label htmlFor="region">Region</Label>
+                    <select
+                      id="region"
+                      className="mt-2 w-full rounded-md border border-border bg-card px-3 py-2 text-sm"
+                      value={region}
+                      onChange={(e) => setRegion(e.target.value)}
+                    >
+                      {options?.regions.map((r) => (
+                        <option key={r.id} value={r.id}>{r.label}</option>
+                      ))}
+                    </select>
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                  <div>
+                    <Label htmlFor="hours">Expected Usage (hrs/day)</Label>
+                    <Input id="hours" type="number" min={0} max={24} value={hoursPerDay} onChange={(e) => setHoursPerDay(Number(e.target.value))} />
+                  </div>
+                </div>
+
+                <div className="flex justify-end">
+                  <Button onClick={onSubmit} disabled={submitting} className="bg-gradient-to-r from-primary to-secondary">
+                    {submitting ? <><Loader2 className="h-4 w-4 animate-spin mr-2" /> Creating...</> : "Create Workspace"}
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card className="bg-card/50 backdrop-blur border-border">
+              <CardHeader>
+                <CardTitle className="text-sm font-medium">Estimate</CardTitle>
+              </CardHeader>
+              <CardContent>
+                {estimate ? (
+                  <div className="space-y-2 text-sm">
+                    <div className="flex items-center justify-between"><span>Hourly</span><span className="font-semibold">{estimate.currency} {estimate.hourly.toFixed(2)}</span></div>
+                    <div className="flex items-center justify-between"><span>Daily</span><span className="font-semibold">{estimate.currency} {estimate.daily.toFixed(2)}</span></div>
+                    <div className="flex items-center justify-between"><span>Monthly</span><span className="font-semibold">{estimate.currency} {estimate.monthly.toFixed(2)}</span></div>
+                    <p className="text-xs text-muted-foreground mt-3">Estimates depend on actual usage and provider rates.</p>
+                  </div>
+                ) : (
+                  <div className="text-sm text-muted-foreground">Adjust options to see cost estimate.</div>
+                )}
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}
diff --git a/apps/web/app/workspaces/page.tsx b/apps/web/app/workspaces/page.tsx
new file mode 100644
index 0000000..96b0fda
--- /dev/null
+++ b/apps/web/app/workspaces/page.tsx
@@ -0,0 +1,211 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { useSession } from "next-auth/react";
+import { Sidebar } from "@/components/sidebar";
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Loader2 } from "lucide-react";
+
+export default function WorkspacesPage() {
+  const router = useRouter();
+  const { data: session, status } = useSession();
+  const [mounted, setMounted] = useState(false);
+
+  // UI state
+  const [baseType, setBaseType] = useState<"image" | "dockerfile">("image");
+  const [dockerImage, setDockerImage] = useState("");
+  const [dockerfile, setDockerfile] = useState("");
+  const [script, setScript] = useState(`# Install Node.js and other tools\nsudo apt-get update\nsudo apt-get install -y nodejs npm\n\nnpm install -g typescript`);
+  const [templateName, setTemplateName] = useState("");
+  const [description, setDescription] = useState("");
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => setMounted(true), []);
+
+  useEffect(() => {
+    if (status === "loading") return;
+    if (!session) router.push("/signin");
+  }, [status, session, router]);
+
+  async function handleSave() {
+    setSaving(true);
+    try {
+      const payload = {
+        name: templateName,
+        description,
+        base: baseType,
+        dockerImage: baseType === "image" ? dockerImage : undefined,
+        dockerfile: baseType === "dockerfile" ? dockerfile : undefined,
+        script,
+      };
+      // POST to backend (endpoint to be implemented server-side)
+      const res = await fetch("/api/templates", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      });
+      if (!res.ok) throw new Error("Failed to save template");
+      // Navigate or show success
+      router.push("/dashboard");
+    } catch (err) {
+      console.error(err);
+      alert("Could not save template. Please try again.");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  if (!mounted || status === "loading") {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-background">
+        <div className="flex flex-col items-center gap-4">
+          <Loader2 className="h-8 w-8 animate-spin text-primary" />
+          <div className="text-lg text-muted-foreground">Loading your workspace...</div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!session) return null;
+
+  return (
+    <div className="min-h-screen bg-background relative overflow-hidden">
+      <div className="fixed inset-0 -z-10 grid-background opacity-20" />
+      <div className="fixed inset-0 -z-10">
+        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/10 rounded-full blur-3xl pulse-glow" />
+        <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-secondary/10 rounded-full blur-3xl pulse-glow" style={{ animationDelay: "1s" }} />
+      </div>
+
+      <Sidebar />
+
+      <main className="ml-64 min-h-screen transition-all duration-300">
+        <div className="container mx-auto px-8 py-8">
+          {/* Top bar (same style as dashboard) */}
+          <div className="flex items-center justify-between mb-8">
+            <div className="relative w-full max-w-2xl">
+              <input
+                aria-label="Search workspaces"
+                placeholder="Search workspaces..."
+                className="w-full rounded-lg border border-border bg-card px-4 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/30"
+              />
+            </div>
+            <div className="flex items-center gap-4">
+              <Button onClick={() => router.push("/workspaces/new")} className="bg-gradient-to-r from-primary to-secondary">
+                + New Workspace
+              </Button>
+              <button className="h-9 w-9 rounded-md bg-card border border-border flex items-center justify-center text-muted-foreground">🔔</button>
+              <div className="h-9 w-9 rounded-full bg-card border border-border flex items-center justify-center text-muted-foreground">R</div>
+            </div>
+          </div>
+
+          <h1 className="text-xl font-semibold mb-6">Create a New Workspace Template</h1>
+
+          <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
+            {/* LEFT: main form (spans 2 cols) */}
+            <Card className="xl:col-span-2 border-border bg-card/50">
+              <div className="p-4 md:p-6 space-y-6">
+                {/* Base Environment */}
+                <div className="space-y-3">
+                  <h2 className="text-sm font-medium text-foreground">Base Environment</h2>
+                  <div className="flex gap-3">
+                    <button
+                      onClick={() => setBaseType("image")}
+                      className={`rounded-md border px-3 py-2 text-sm ${
+                        baseType === "image" ? "border-primary text-primary bg-primary/10" : "border-border text-muted-foreground hover:text-foreground"
+                      }`}
+                    >
+                      From a Base Image
+                    </button>
+                    <button
+                      onClick={() => setBaseType("dockerfile")}
+                      className={`rounded-md border px-3 py-2 text-sm ${
+                        baseType === "dockerfile" ? "border-primary text-primary bg-primary/10" : "border-border text-muted-foreground hover:text-foreground"
+                      }`}
+                    >
+                      From a Dockerfile
+                    </button>
+                  </div>
+
+                  {baseType === "image" ? (
+                    <div className="mt-3">
+                      <Label htmlFor="dockerImage">Docker Image URL</Label>
+                      <Input
+                        id="dockerImage"
+                        placeholder="e.g., mcr.microsoft.com/devcontainers/base:ubuntu"
+                        value={dockerImage}
+                        onChange={(e) => setDockerImage(e.target.value)}
+                        className="mt-2"
+                      />
+                    </div>
+                  ) : (
+                    <div className="mt-3">
+                      <Label htmlFor="dockerfile">Dockerfile</Label>
+                      <textarea
+                        id="dockerfile"
+                        value={dockerfile}
+                        onChange={(e) => setDockerfile(e.target.value)}
+                        placeholder={`# paste your Dockerfile content here\nFROM ubuntu:22.04`}
+                        className="mt-2 w-full min-h-[160px] rounded-md border border-border bg-muted/40 px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground"
+                      />
+                    </div>
+                  )}
+                </div>
+
+                {/* Customization Script */}
+                <div className="space-y-3">
+                  <h2 className="text-sm font-medium text-foreground">Customization Script</h2>
+                  <p className="text-xs text-muted-foreground">Run these commands to install tools and configure your environment.</p>
+                  <textarea
+                    value={script}
+                    onChange={(e) => setScript(e.target.value)}
+                    className="w-full min-h-[220px] rounded-md border border-border bg-muted/60 px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground shadow-inner"
+                  />
+                </div>
+              </div>
+            </Card>
+
+            {/* RIGHT: details panel */}
+            <Card className="border-border bg-card/50">
+              <div className="p-4 md:p-6 space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="templateName">Template Name</Label>
+                  <Input
+                    id="templateName"
+                    placeholder="e.g., Node.js Project"
+                    value={templateName}
+                    onChange={(e) => setTemplateName(e.target.value)}
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="desc">Description</Label>
+                  <textarea
+                    id="desc"
+                    placeholder="Describe the template"
+                    value={description}
+                    onChange={(e) => setDescription(e.target.value)}
+                    className="w-full min-h-[120px] rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground"
+                  />
+                </div>
+
+                <div className="flex items-center justify-end gap-3 pt-2">
+                  <Button variant="outline" onClick={() => router.back()}>
+                    Cancel
+                  </Button>
+                  <Button onClick={handleSave} disabled={saving} className="bg-gradient-to-r from-primary to-secondary">
+                    {saving ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
+                    Save Template
+                  </Button>
+                </div>
+              </div>
+            </Card>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}
diff --git a/apps/web/components/sidebar.tsx b/apps/web/components/sidebar.tsx
index 3792676..9470725 100644
--- a/apps/web/components/sidebar.tsx
+++ b/apps/web/components/sidebar.tsx
@@ -5,18 +5,15 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { cn } from "@/lib/utils";
 import {
-  Home,
-  Code,
-  FileCode,
+  Cloud,
+  LayoutDashboard,
+  Boxes,
+  Bot,
   Settings,
-  User,
-  LogOut,
+  CreditCard,
+  BarChart3,
   ChevronLeft,
   ChevronRight,
-  Terminal,
-  Zap,
-  Layers,
-  Activity,
 } from "lucide-react";
 
 interface SidebarProps {
@@ -31,20 +28,17 @@ interface NavItem {
 }
 
 const navItems: NavItem[] = [
-  { title: "Dashboard", href: "/dashboard", icon: Home },
-  { title: "Projects", href: "/projects", icon: Layers },
-  { title: "Code Editor", href: "/editor", icon: Code },
-  { title: "Terminal", href: "/terminal", icon: Terminal },
-  { title: "Files", href: "/files", icon: FileCode },
-  { title: "Activity", href: "/activity", icon: Activity },
-  { title: "Deploy", href: "/deploy", icon: Zap, badge: "New" },
-];
-
-const bottomNavItems: NavItem[] = [
-  { title: "Profile", href: "/profile", icon: User },
+  { title: "Dashboard", href: "/dashboard", icon: LayoutDashboard },
+  { title: "Workspaces", href: "/workspaces", icon: Boxes },
+  { title: "Ai Agents", href: "/ai-agents", icon: Bot },
   { title: "Settings", href: "/settings", icon: Settings },
+  { title: "Billing/Usage", href: "/billing-usage", icon: CreditCard },
+  { title: "Reporting", href: "/reporting", icon: BarChart3 },
 ];
 
+// No bottom nav items for this sidebar design
+const bottomNavItems: NavItem[] = [];
+
 export function Sidebar({ className }: SidebarProps) {
   const [collapsed, setCollapsed] = useState(false);
   const pathname = usePathname();
@@ -63,14 +57,14 @@ export function Sidebar({ className }: SidebarProps) {
           {!collapsed && (
             <Link href="/" className="flex items-center space-x-2">
               <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-primary to-secondary glow-primary">
-                <Code className="h-5 w-5 text-black" />
+                <Cloud className="h-5 w-5 text-black" />
               </div>
-              <span className="text-xl font-bold text-glow-primary">Dev8.dev</span>
+              <span className="text-xl font-bold text-glow-primary">CloudIDEX</span>
             </Link>
           )}
           {collapsed && (
             <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-primary to-secondary glow-primary mx-auto">
-              <Code className="h-5 w-5 text-black" />
+              <Cloud className="h-5 w-5 text-black" />
             </div>
           )}
         </div>
@@ -126,51 +120,37 @@ export function Sidebar({ className }: SidebarProps) {
           })}
         </nav>
 
-        {/* Bottom Navigation */}
-        <div className="border-t border-border p-3 space-y-1">
-          {bottomNavItems.map((item) => {
-            const Icon = item.icon;
-            const isActive = pathname === item.href;
-
-            return (
-              <Link
-                key={item.href}
-                href={item.href}
-                className={cn(
-                  "group relative flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all",
-                  isActive
-                    ? "bg-primary/20 text-primary glow-primary"
-                    : "text-muted-foreground hover:bg-muted hover:text-foreground",
-                  collapsed && "justify-center"
-                )}
-              >
-                <Icon className={cn("h-5 w-5 flex-shrink-0", isActive && "text-primary")} />
-                {!collapsed && <span className="flex-1">{item.title}</span>}
-                {collapsed && (
-                  <span className="absolute left-full ml-6 hidden w-auto min-w-max rounded-md bg-popover px-2 py-1 text-xs text-popover-foreground group-hover:block border border-border shadow-lg">
-                    {item.title}
-                  </span>
-                )}
-              </Link>
-            );
-          })}
+        {/* Bottom Navigation - intentionally left minimal to match design */}
+        {bottomNavItems.length > 0 && (
+          <div className="border-t border-border p-3 space-y-1">
+            {bottomNavItems.map((item) => {
+              const Icon = item.icon;
+              const isActive = pathname === item.href;
 
-          {/* Logout */}
-          <button
-            className={cn(
-              "group relative flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-muted-foreground hover:bg-destructive/20 hover:text-destructive transition-all",
-              collapsed && "justify-center"
-            )}
-          >
-            <LogOut className="h-5 w-5 flex-shrink-0" />
-            {!collapsed && <span className="flex-1">Logout</span>}
-            {collapsed && (
-              <span className="absolute left-full ml-6 hidden w-auto min-w-max rounded-md bg-popover px-2 py-1 text-xs text-popover-foreground group-hover:block border border-border shadow-lg">
-                Logout
-              </span>
-            )}
-          </button>
-        </div>
+              return (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  className={cn(
+                    "group relative flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all",
+                    isActive
+                      ? "bg-primary/20 text-primary glow-primary"
+                      : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                    collapsed && "justify-center"
+                  )}
+                >
+                  <Icon className={cn("h-5 w-5 flex-shrink-0", isActive && "text-primary")} />
+                  {!collapsed && <span className="flex-1">{item.title}</span>}
+                  {collapsed && (
+                    <span className="absolute left-full ml-6 hidden w-auto min-w-max rounded-md bg-popover px-2 py-1 text-xs text-popover-foreground group-hover:block border border-border shadow-lg">
+                      {item.title}
+                    </span>
+                  )}
+                </Link>
+              );
+            })}
+          </div>
+        )}
       </div>
     </aside>
   );
diff --git a/apps/web/package.json b/apps/web/package.json
index 981dda2..5351f21 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -29,6 +29,7 @@
     "lucide-react": "^0.544.0",
     "next": "^15.5.0",
     "next-auth": "^4.24.11",
+    "next-themes": "^0.3.0",
     "prisma": "^6.14.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index 0bc2a17..fe1529e 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -19,6 +19,8 @@
     ".next/types/**/*.ts"
   ],
   "exclude": [
-    "node_modules"
+    "node_modules",
+    // Exclude unused shadcn/radix demo components under app/components/ui
+    "app/components/ui/**"
   ]
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2ebbbc2..d210001 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -104,6 +104,9 @@ importers:
       next-auth:
         specifier: ^4.24.11
         version: 4.24.11(@auth/core@0.40.0)(next@15.5.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      next-themes:
+        specifier: ^0.3.0
+        version: 0.3.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       prisma:
         specifier: ^6.14.0
         version: 6.14.0(typescript@5.9.2)
@@ -1505,6 +1508,12 @@ packages:
       nodemailer:
         optional: true
 
+  next-themes@0.3.0:
+    resolution: {integrity: sha512-/QHIrsYpd6Kfk7xakK4svpDI5mmXP0gfvCoJdGpZQ2TOrQZmsW0QxjaiLn8wbIKjtm4BTSqLoix4lxYYOnLJ/w==}
+    peerDependencies:
+      react: ^16.8 || ^17 || ^18
+      react-dom: ^16.8 || ^17 || ^18
+
   next@15.5.0:
     resolution: {integrity: sha512-N1lp9Hatw3a9XLt0307lGB4uTKsXDhyOKQo7uYMzX4i0nF/c27grcGXkLdb7VcT8QPYLBa8ouIyEoUQJ2OyeNQ==}
     engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
@@ -3515,6 +3524,11 @@ snapshots:
     optionalDependencies:
       '@auth/core': 0.40.0
 
+  next-themes@0.3.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
   next@15.5.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
       '@next/env': 15.5.0

From 00305f74d80f19b13682be2b37a001601140eb47 Mon Sep 17 00:00:00 2001
From: ritesh301 <riteshpradhan301@gmail.com>
Date: Sat, 25 Oct 2025 19:45:33 +0530
Subject: [PATCH 6/6] finilizing entire frontend with all webpages

---
 apps/web/app/api/account/connections/route.ts |  52 ++++---
 apps/web/app/profile/page.tsx                 |  16 ++-
 apps/web/app/settings/page.tsx                |  22 ++-
 apps/web/app/workspaces/[id]/ide/page.tsx     |  89 ++++++++++--
 apps/web/components/ide/CodeEditor.tsx        |  39 +++++
 apps/web/components/ide/SandboxRunner.tsx     |  58 ++++++++
 apps/web/lib/auth-config.ts                   |   7 +-
 apps/web/middleware.ts                        |   3 +-
 apps/web/package.json                         |   4 +
 pnpm-lock.yaml                                | 134 ++++++++++++++++++
 10 files changed, 384 insertions(+), 40 deletions(-)
 create mode 100644 apps/web/components/ide/CodeEditor.tsx
 create mode 100644 apps/web/components/ide/SandboxRunner.tsx

diff --git a/apps/web/app/api/account/connections/route.ts b/apps/web/app/api/account/connections/route.ts
index 8698a8d..d311b24 100644
--- a/apps/web/app/api/account/connections/route.ts
+++ b/apps/web/app/api/account/connections/route.ts
@@ -1,26 +1,44 @@
 import { NextResponse } from "next/server";
 import { prisma } from "@/lib/prisma";
-import { auth } from "@/lib/auth";
+import { getServerSession } from "next-auth";
+import { createAuthConfig } from "@/lib/auth-config";
 
-type Conn = { provider: string; connected: boolean };
+type Conn = { provider: string; connected: boolean; available: boolean };
 
 export async function GET() {
-  // Derive connections for the signed-in user from the Accounts table
-  const session = await auth();
-  if (!session?.user?.id) {
-    return NextResponse.json({ connections: [], updatedAt: new Date().toISOString() });
-  }
+  try {
+    // Determine provider availability from env
+    const googleAvailable = Boolean(process.env.AUTH_GOOGLE_ID && process.env.AUTH_GOOGLE_SECRET);
+    const githubAvailable = Boolean(process.env.AUTH_GITHUB_ID && process.env.AUTH_GITHUB_SECRET);
+
+  // Derive connections for the signed-in user from the Accounts table (if signed in)
+  const session = await getServerSession(createAuthConfig());
 
-  const accounts = await prisma.account.findMany({
-    where: { userId: session.user.id },
-    select: { provider: true },
-  });
+    let connected = new Set<string>();
+    if (session?.user?.id) {
+      try {
+        const accounts = await prisma.account.findMany({
+          where: { userId: session.user.id },
+          select: { provider: true },
+        });
+        connected = new Set(accounts.map((a) => a.provider.toLowerCase()));
+      } catch (e) {
+        console.error("/api/account/connections prisma error", e);
+      }
+    }
 
-  const connected = new Set(accounts.map((a) => a.provider.toLowerCase()));
-  const providers: Conn[] = [
-    { provider: "Google", connected: connected.has("google") },
-    { provider: "GitHub", connected: connected.has("github") },
-  ];
+    const providers: Conn[] = [
+      { provider: "Google", connected: connected.has("google"), available: googleAvailable },
+      { provider: "GitHub", connected: connected.has("github"), available: githubAvailable },
+    ];
 
-  return NextResponse.json({ connections: providers, updatedAt: new Date().toISOString() });
+    return NextResponse.json({ connections: providers, updatedAt: new Date().toISOString() });
+  } catch (e) {
+    console.error("/api/account/connections route error", e);
+    // Always return JSON to avoid client JSON parsing errors
+    return NextResponse.json(
+      { connections: [], error: "failed_to_load_connections" },
+      { status: 500 },
+    );
+  }
 }
diff --git a/apps/web/app/profile/page.tsx b/apps/web/app/profile/page.tsx
index f9cf019..f05e0d7 100644
--- a/apps/web/app/profile/page.tsx
+++ b/apps/web/app/profile/page.tsx
@@ -31,14 +31,24 @@ export default function Profile() {
   }
 
   useEffect(() => {
+    let timer: ReturnType<typeof setInterval> | undefined;
     async function load() {
       try {
         const r = await fetch("/api/account/connections", { cache: "no-store" });
-        const j = await r.json();
+        if (!r.ok) return;
+        const text = await r.text();
+        if (!text) return;
+        const j = JSON.parse(text);
         setConnections(j.connections ?? []);
-      } catch {}
+      } catch (e) {
+        console.error("profile: connections fetch error", e);
+      }
     }
-    if (status === "authenticated") load();
+    if (status === "authenticated") {
+      load();
+      timer = setInterval(load, 8000);
+    }
+    return () => { if (timer) clearInterval(timer); };
   }, [status]);
 
   return (
diff --git a/apps/web/app/settings/page.tsx b/apps/web/app/settings/page.tsx
index 10ec33a..ff831ad 100644
--- a/apps/web/app/settings/page.tsx
+++ b/apps/web/app/settings/page.tsx
@@ -8,7 +8,7 @@ import { Card } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Loader2, Shield, LogOut, Trash2, Link2 } from "lucide-react";
 
-type Conn = { provider: string; connected: boolean };
+type Conn = { provider: string; connected: boolean; available?: boolean };
 
 export default function Settings() {
   const { data: session, status } = useSession();
@@ -18,16 +18,24 @@ export default function Settings() {
 
   // fetch dynamic connection statuses
   useEffect(() => {
+    let timer: ReturnType<typeof setInterval> | undefined;
     async function load() {
       try {
         const r = await fetch("/api/account/connections", { cache: "no-store" });
-        const j = await r.json();
+        if (!r.ok) return; // don't attempt to parse error pages
+        const text = await r.text();
+        if (!text) return; // guard against empty body
+        const j = JSON.parse(text);
         setConnections(j.connections ?? []);
       } catch (e) {
-        console.error(e);
+        console.error("settings: connections fetch error", e);
       }
     }
-    if (status === "authenticated") load();
+    if (status === "authenticated") {
+      load();
+      timer = setInterval(load, 8000);
+    }
+    return () => { if (timer) clearInterval(timer); };
   }, [status]);
 
   useEffect(() => {
@@ -132,13 +140,15 @@ export default function Settings() {
                       </div>
                       {c.connected ? (
                         <span className="text-xs text-emerald-500">Connected</span>
+                      ) : c.available === false ? (
+                        <span className="text-xs text-rose-500">Unavailable</span>
                       ) : (
                         <Button
                           variant="outline"
                           onClick={() => {
                             const p = c.provider.toLowerCase();
-                            // Kick off OAuth sign-in to link account
-                            window.location.href = `/api/auth/signin/${p}`;
+                            // Kick off OAuth sign-in to link account and return here
+                            window.location.href = `/api/auth/signin/${p}?callbackUrl=${encodeURIComponent('/settings')}`;
                           }}
                         >
                           Connect
diff --git a/apps/web/app/workspaces/[id]/ide/page.tsx b/apps/web/app/workspaces/[id]/ide/page.tsx
index d5a7d49..0667139 100644
--- a/apps/web/app/workspaces/[id]/ide/page.tsx
+++ b/apps/web/app/workspaces/[id]/ide/page.tsx
@@ -1,12 +1,18 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import { useSession } from "next-auth/react";
 import { useParams, useRouter } from "next/navigation";
 import { Sidebar } from "@/components/sidebar";
 import { Card } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Loader2, Play, Square, RotateCw } from "lucide-react";
+import { CodeEditor } from "@/components/ide/CodeEditor";
+import { SandboxRunner, SandboxRunnerHandle } from "@/components/ide/SandboxRunner";
+import prettier from "prettier/standalone";
+import parserBabel from "prettier/plugins/babel";
+import pluginEstree from "prettier/plugins/estree";
+import parserTypescript from "prettier/plugins/typescript";
 
 type Details = {
   id: string;
@@ -38,6 +44,14 @@ export default function WorkspaceIDEPage() {
   const [snapshots, setSnapshots] = useState<Array<{ id: string; createdAt: number; location: string }>>([]);
   const [loading, setLoading] = useState(true);
   const [acting, setActing] = useState<"start" | "stop" | "restart" | null>(null);
+  const [language, setLanguage] = useState<"javascript" | "typescript">("javascript");
+  const [code, setCode] = useState<string>(
+    `// Welcome to CloudIDEX web IDE\n` +
+    `// Click Run to execute.\n` +
+    `function greet(name){ return 'Hello, ' + name + '!'; }\n` +
+    `console.log(greet('world'));\n`
+  );
+  const runnerRef = useRef<SandboxRunnerHandle>(null);
 
   useEffect(() => {
     if (status === "loading") return;
@@ -47,15 +61,32 @@ export default function WorkspaceIDEPage() {
   async function loadAll(signal?: AbortSignal) {
     try {
       const [d, m, t, s] = await Promise.all([
-        fetch(`/api/workspaces/${id}/details`, { cache: "no-store", signal }).then((r) => r.json()),
-        fetch(`/api/workspaces/${id}/metrics`, { cache: "no-store", signal }).then((r) => r.json()),
-        fetch(`/api/workspaces/${id}/terminal`, { cache: "no-store", signal }).then((r) => r.json()),
-        fetch(`/api/workspaces/${id}/snapshots`, { cache: "no-store", signal }).then((r) => r.json()),
+        fetch(`/api/workspaces/${id}/details`, { cache: "no-store", signal }).then(async (r) => {
+          if (!r.ok) throw new Error(`details ${r.status}`);
+          return r.json();
+        }),
+        fetch(`/api/workspaces/${id}/metrics`, { cache: "no-store", signal }).then(async (r) => {
+          if (!r.ok) throw new Error(`metrics ${r.status}`);
+          return r.json();
+        }),
+        fetch(`/api/workspaces/${id}/terminal`, { cache: "no-store", signal }).then(async (r) => {
+          if (!r.ok) throw new Error(`terminal ${r.status}`);
+          return r.json();
+        }),
+        fetch(`/api/workspaces/${id}/snapshots`, { cache: "no-store", signal }).then(async (r) => {
+          if (!r.ok) throw new Error(`snapshots ${r.status}`);
+          return r.json();
+        }),
       ]);
       setDetails(d);
       setMetrics(m);
-      setTerminal(t.lines);
-      setSnapshots(s.snapshots);
+      setTerminal(Array.isArray(t?.lines) ? t.lines : []);
+      setSnapshots(Array.isArray(s?.snapshots) ? s.snapshots : []);
+    } catch (e: unknown) {
+      // Ignore abort errors caused by effect cleanup or route changes
+      const name = (e as any)?.name || '';
+      if (name === 'AbortError' || e instanceof DOMException) return;
+      console.error('IDE loadAll error', e);
     } finally {
       setLoading(false);
     }
@@ -93,6 +124,26 @@ export default function WorkspaceIDEPage() {
     setSnapshots(s.snapshots);
   }
 
+  function appendTerminal(line: string) {
+    setTerminal((prev) => [...prev, line].slice(-120));
+  }
+
+  function runCode() {
+    appendTerminal(`$ Running (${language})...`);
+    runnerRef.current?.run(code, language);
+  }
+
+  async function formatCode() {
+    try {
+      const parser = language === "typescript" ? "typescript" : "babel";
+      const plugins = parser === "typescript" ? [parserTypescript, pluginEstree] : [parserBabel, pluginEstree];
+      const formatted = await prettier.format(code, { parser, plugins });
+      setCode(formatted);
+    } catch (e) {
+      appendTerminal(`format error: ${String((e as any)?.message || e)}`);
+    }
+  }
+
   if (status === "loading" || loading || !details || !metrics) {
     return (
       <div className="min-h-screen flex items-center justify-center bg-background">
@@ -126,10 +177,28 @@ export default function WorkspaceIDEPage() {
           </div>
 
           <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
-            {/* VS Code Editor placeholder */}
+            {/* Editor */}
             <Card className="xl:col-span-2 border-border bg-card/50">
-              <div className="p-4 md:p-6 h-80 md:h-[420px] rounded-md border border-dashed border-border flex items-center justify-center text-sm text-muted-foreground">
-                VS Code Editor (Web)
+              <div className="p-3 md:p-4 space-y-3">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2 text-xs">
+                    <span className="text-muted-foreground">Language</span>
+                    <select
+                      value={language}
+                      onChange={(e) => setLanguage(e.target.value as any)}
+                      className="h-7 rounded border border-border bg-background px-2 text-xs"
+                    >
+                      <option value="javascript">JavaScript</option>
+                      <option value="typescript">TypeScript</option>
+                    </select>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Button variant="outline" onClick={formatCode} className="h-8 px-3">Format</Button>
+                    <Button onClick={runCode} className="h-8 px-3 bg-primary"><Play className="h-4 w-4 mr-1"/> Run</Button>
+                  </div>
+                </div>
+                <CodeEditor value={code} language={language} onChange={setCode} height={420} />
+                <SandboxRunner ref={runnerRef} className="hidden" onLog={(l) => appendTerminal(l)} />
               </div>
             </Card>
 
diff --git a/apps/web/components/ide/CodeEditor.tsx b/apps/web/components/ide/CodeEditor.tsx
new file mode 100644
index 0000000..0d37eee
--- /dev/null
+++ b/apps/web/components/ide/CodeEditor.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import * as React from "react";
+
+// Load Monaco editor only on client
+const Monaco = dynamic(() => import("@monaco-editor/react"), { ssr: false });
+
+export type CodeEditorProps = {
+  value: string;
+  language: "javascript" | "typescript" | "json" | "css" | "html";
+  onChange: (code: string) => void;
+  className?: string;
+  height?: number | string;
+};
+
+export function CodeEditor({ value, language, onChange, className, height = 420 }: CodeEditorProps) {
+  return (
+    <div className={className}>
+      <Monaco
+        height={typeof height === "number" ? `${height}px` : height}
+        language={language}
+        theme="vs-dark"
+        value={value}
+        onChange={(v) => onChange(v ?? "")}
+        options={{
+          minimap: { enabled: false },
+          fontSize: 13,
+          scrollBeyondLastLine: false,
+          automaticLayout: true,
+          tabSize: 2,
+          wordWrap: "on",
+          padding: { top: 8 },
+          renderWhitespace: "selection",
+        }}
+      />
+    </div>
+  );
+}
diff --git a/apps/web/components/ide/SandboxRunner.tsx b/apps/web/components/ide/SandboxRunner.tsx
new file mode 100644
index 0000000..b3a2397
--- /dev/null
+++ b/apps/web/components/ide/SandboxRunner.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import * as React from "react";
+
+export type SandboxRunnerHandle = {
+  run: (code: string, language: "javascript" | "typescript") => void;
+  clear: () => void;
+};
+
+export type SandboxRunnerProps = {
+  onLog?: (line: string) => void;
+  className?: string;
+};
+
+export const SandboxRunner = React.forwardRef<SandboxRunnerHandle, SandboxRunnerProps>(
+  function SandboxRunner({ onLog, className }, ref) {
+    const iframeRef = React.useRef<HTMLIFrameElement | null>(null);
+
+    React.useImperativeHandle(ref, () => ({
+      run(code, language) {
+        const iframe = iframeRef.current;
+        if (!iframe) return;
+        // Very simple sandbox that reroutes console to parent and evaluates JS/TS
+        // For TS, we transpile with a naive approach: strip types via a tiny regex as a placeholder.
+        // For production, use a real transpiler like sucrase or swc in a web worker.
+        const js = language === "typescript" ? code.replace(/:\s*[^=;,)]+/g, "") : code;
+        const html = `<!doctype html><html><head><meta charset=\"utf-8\" /><style>body{font:12px monospace;color:#e2e8f0;background:#0f172a;padding:8px}</style></head><body><script>
+          const send = (type, args) => parent.postMessage({ type, args }, '*');
+          const origLog = console.log, origErr = console.error;
+          console.log = (...a) => { send('log', a.map(x=>String(x))); origLog(...a); };
+          console.error = (...a) => { send('error', a.map(x=>String(x))); origErr(...a); };
+          try { 
+            ${js}
+          } catch (e) { console.error(e && e.stack ? e.stack : String(e)); }
+        <\/script></body></html>`;
+        iframe.srcdoc = html;
+      },
+      clear() {
+        const iframe = iframeRef.current;
+        if (iframe) iframe.srcdoc = "<html><body></body></html>";
+      },
+    }));
+
+    React.useEffect(() => {
+      const handler = (ev: MessageEvent) => {
+        if (ev?.data?.type === "log") {
+          onLog?.(ev.data.args.join(" "));
+        } else if (ev?.data?.type === "error") {
+          onLog?.(ev.data.args.join(" "));
+        }
+      };
+      window.addEventListener("message", handler);
+      return () => window.removeEventListener("message", handler);
+    }, [onLog]);
+
+    return <iframe ref={iframeRef} className={className} sandbox="allow-scripts" />;
+  }
+);
diff --git a/apps/web/lib/auth-config.ts b/apps/web/lib/auth-config.ts
index fd55e53..599aceb 100644
--- a/apps/web/lib/auth-config.ts
+++ b/apps/web/lib/auth-config.ts
@@ -122,10 +122,11 @@ export function createAuthConfig(): AuthOptions {
       signIn: "/signin",
     },
     secret: (() => {
-      if (process.env.NODE_ENV === "production" && !process.env.AUTH_SECRET) {
-        throw new Error("AUTH_SECRET must be set in production environments.");
+      const secret = process.env.AUTH_SECRET || process.env.NEXTAUTH_SECRET || "development-secret";
+      if (process.env.NODE_ENV === "production" && !secret) {
+        throw new Error("AUTH_SECRET or NEXTAUTH_SECRET must be set in production environments.");
       }
-      return process.env.AUTH_SECRET || "development-secret";
+      return secret;
     })(),
   };
 }
diff --git a/apps/web/middleware.ts b/apps/web/middleware.ts
index a72309e..b8e6af3 100644
--- a/apps/web/middleware.ts
+++ b/apps/web/middleware.ts
@@ -12,7 +12,8 @@ export async function middleware(req: NextRequest) {
   const { nextUrl } = req;
 
   // Get the token using next-auth/jwt which works with Edge Runtime
-  const token = await getToken({ req, secret: process.env.NEXTAUTH_SECRET });
+  // Use the same secret as NextAuth config; prefer AUTH_SECRET, fallback to NEXTAUTH_SECRET for compatibility
+  const token = await getToken({ req, secret: process.env.AUTH_SECRET || process.env.NEXTAUTH_SECRET });
   const isLoggedIn = !!token;
 
   // Check if current route is public
diff --git a/apps/web/package.json b/apps/web/package.json
index 5351f21..209c045 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@auth/prisma-adapter": "^2.10.0",
+    "@monaco-editor/react": "^4.7.0",
     "@prisma/client": "^6.14.0",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-slot": "^1.2.3",
@@ -30,6 +31,9 @@
     "next": "^15.5.0",
     "next-auth": "^4.24.11",
     "next-themes": "^0.3.0",
+    "prettier": "^3.6.2",
+    "prettier-plugin-organize-imports": "^4.3.0",
+    "prettier-plugin-tailwindcss": "^0.7.1",
     "prisma": "^6.14.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d210001..c75eb3a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -71,6 +71,9 @@ importers:
       '@auth/prisma-adapter':
         specifier: ^2.10.0
         version: 2.10.0(@prisma/client@6.14.0(prisma@6.14.0(typescript@5.9.2))(typescript@5.9.2))
+      '@monaco-editor/react':
+        specifier: ^4.7.0
+        version: 4.7.0(monaco-editor@0.54.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@prisma/client':
         specifier: ^6.14.0
         version: 6.14.0(prisma@6.14.0(typescript@5.9.2))(typescript@5.9.2)
@@ -107,6 +110,15 @@ importers:
       next-themes:
         specifier: ^0.3.0
         version: 0.3.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      prettier:
+        specifier: ^3.6.2
+        version: 3.6.2
+      prettier-plugin-organize-imports:
+        specifier: ^4.3.0
+        version: 4.3.0(prettier@3.6.2)(typescript@5.9.2)
+      prettier-plugin-tailwindcss:
+        specifier: ^0.7.1
+        version: 0.7.1(prettier-plugin-organize-imports@4.3.0(prettier@3.6.2)(typescript@5.9.2))(prettier@3.6.2)
       prisma:
         specifier: ^6.14.0
         version: 6.14.0(typescript@5.9.2)
@@ -455,6 +467,16 @@ packages:
   '@jridgewell/trace-mapping@0.3.30':
     resolution: {integrity: sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==}
 
+  '@monaco-editor/loader@1.6.1':
+    resolution: {integrity: sha512-w3tEnj9HYEC73wtjdpR089AqkUPskFRcdkxsiSFt3SoUc3OHpmu+leP94CXBm4mHfefmhsdfI0ZQu6qJ0wgtPg==}
+
+  '@monaco-editor/react@4.7.0':
+    resolution: {integrity: sha512-cyzXQCtO47ydzxpQtCGSQGOC8Gk3ZUeBXFAxD+CWXYFo5OqZyZUonFl0DwUlTyAfRHntBfw2p3w4s9R6oe1eCA==}
+    peerDependencies:
+      monaco-editor: '>= 0.25.0 < 1'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   '@next/env@15.5.0':
     resolution: {integrity: sha512-sDaprBAfzCQiOgo2pO+LhnV0Wt2wBgartjrr+dpcTORYVnnXD0gwhHhiiyIih9hQbq+JnbqH4odgcFWhqCGidw==}
 
@@ -955,6 +977,9 @@ packages:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
     engines: {node: '>=0.10.0'}
 
+  dompurify@3.1.7:
+    resolution: {integrity: sha512-VaTstWtsneJY8xzy7DekmYWEOZcmzIe3Qb3zPd4STve1OBTa+e+WmS1ITQec1fZYXI3HCsOZZiSMpG6oxoWMWQ==}
+
   dotenv@16.0.3:
     resolution: {integrity: sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==}
     engines: {node: '>=12'}
@@ -1457,6 +1482,11 @@ packages:
     peerDependencies:
       react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
+  marked@14.0.0:
+    resolution: {integrity: sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==}
+    engines: {node: '>= 18'}
+    hasBin: true
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -1480,6 +1510,9 @@ packages:
     resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
     engines: {node: '>=16 || 14 >=14.17'}
 
+  monaco-editor@0.54.0:
+    resolution: {integrity: sha512-hx45SEUoLatgWxHKCmlLJH81xBo0uXP4sRkESUpmDQevfi+e7K1VuiSprK6UpQ8u4zOcKNiH0pMvHvlMWA/4cw==}
+
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
@@ -1737,6 +1770,71 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
+  prettier-plugin-organize-imports@4.3.0:
+    resolution: {integrity: sha512-FxFz0qFhyBsGdIsb697f/EkvHzi5SZOhWAjxcx2dLt+Q532bAlhswcXGYB1yzjZ69kW8UoadFBw7TyNwlq96Iw==}
+    peerDependencies:
+      prettier: '>=2.0'
+      typescript: '>=2.9'
+      vue-tsc: ^2.1.0 || 3
+    peerDependenciesMeta:
+      vue-tsc:
+        optional: true
+
+  prettier-plugin-tailwindcss@0.7.1:
+    resolution: {integrity: sha512-Bzv1LZcuiR1Sk02iJTS1QzlFNp/o5l2p3xkopwOrbPmtMeh3fK9rVW5M3neBQzHq+kGKj/4LGQMTNcTH4NGPtQ==}
+    engines: {node: '>=20.19'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-hermes': '*'
+      '@prettier/plugin-oxc': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      '@zackad/prettier-plugin-twig': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-multiline-arrays: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-sort-imports: '*'
+      prettier-plugin-svelte: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-hermes':
+        optional: true
+      '@prettier/plugin-oxc':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      '@zackad/prettier-plugin-twig':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-multiline-arrays:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-sort-imports:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+
   prettier@3.6.2:
     resolution: {integrity: sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==}
     engines: {node: '>=14'}
@@ -1897,6 +1995,9 @@ packages:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
+  state-local@1.0.7:
+    resolution: {integrity: sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==}
+
   stop-iteration-iterator@1.1.0:
     resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
     engines: {node: '>= 0.4'}
@@ -2336,6 +2437,17 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  '@monaco-editor/loader@1.6.1':
+    dependencies:
+      state-local: 1.0.7
+
+  '@monaco-editor/react@4.7.0(monaco-editor@0.54.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@monaco-editor/loader': 1.6.1
+      monaco-editor: 0.54.0
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
   '@next/env@15.5.0': {}
 
   '@next/eslint-plugin-next@15.5.0':
@@ -2863,6 +2975,8 @@ snapshots:
     dependencies:
       esutils: 2.0.3
 
+  dompurify@3.1.7: {}
+
   dotenv@16.0.3: {}
 
   dotenv@16.6.1: {}
@@ -3476,6 +3590,8 @@ snapshots:
     dependencies:
       react: 19.1.0
 
+  marked@14.0.0: {}
+
   math-intrinsics@1.1.0: {}
 
   merge2@1.4.1: {}
@@ -3495,6 +3611,11 @@ snapshots:
 
   minipass@7.1.2: {}
 
+  monaco-editor@0.54.0:
+    dependencies:
+      dompurify: 3.1.7
+      marked: 14.0.0
+
   ms@2.1.3: {}
 
   mz@2.7.0:
@@ -3741,6 +3862,17 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
+  prettier-plugin-organize-imports@4.3.0(prettier@3.6.2)(typescript@5.9.2):
+    dependencies:
+      prettier: 3.6.2
+      typescript: 5.9.2
+
+  prettier-plugin-tailwindcss@0.7.1(prettier-plugin-organize-imports@4.3.0(prettier@3.6.2)(typescript@5.9.2))(prettier@3.6.2):
+    dependencies:
+      prettier: 3.6.2
+    optionalDependencies:
+      prettier-plugin-organize-imports: 4.3.0(prettier@3.6.2)(typescript@5.9.2)
+
   prettier@3.6.2: {}
 
   pretty-format@3.8.0: {}
@@ -3950,6 +4082,8 @@ snapshots:
 
   source-map-js@1.2.1: {}
 
+  state-local@1.0.7: {}
+
   stop-iteration-iterator@1.1.0:
     dependencies:
       es-errors: 1.3.0