diff --git a/frontend/components.json b/frontend/components.json
new file mode 100644
index 0000000..ec9d463
--- /dev/null
+++ b/frontend/components.json
@@ -0,0 +1,11 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "baseColor": "slate",
+  "aliases": {
+    "components": "./src/components",
+    "utils": "./src/lib/utils"
+  }
+}
diff --git a/frontend/src/app/dashboard/layout.tsx b/frontend/src/app/dashboard/layout.tsx
new file mode 100644
index 0000000..58e1da6
--- /dev/null
+++ b/frontend/src/app/dashboard/layout.tsx
@@ -0,0 +1,27 @@
+'use client'
+
+import { SidebarProvider, SidebarInset, SidebarTrigger } from '@/components/ui/sidebar'
+import { AppSidebar } from '@/components/app-sidebar'
+import { Separator } from '@/components/ui/separator'
+
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <h1 className="text-xl font-semibold">Dashboard</h1>
+        </header>
+        <main className="flex flex-1 flex-col gap-4 p-4">
+          {children}
+        </main>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/frontend/src/app/dashboard/page.tsx b/frontend/src/app/dashboard/page.tsx
index 6c34461..314b11a 100644
--- a/frontend/src/app/dashboard/page.tsx
+++ b/frontend/src/app/dashboard/page.tsx
@@ -19,12 +19,8 @@ import {
   Play,
   CheckCircle,
   AlertCircle,
-  LogOut,
-  Shield,
   Container as ContainerIcon,
 } from "lucide-react";
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
-import Link from "next/link";
 
 export default function DashboardPage() {
   const router = useRouter();
@@ -111,11 +107,6 @@ export default function DashboardPage() {
     }
   };
 
-  const handleLogout = async () => {
-    await logout();
-    router.push("/login");
-  };
-
   if (authLoading || !user) {
     return (
       <div className="flex min-h-screen items-center justify-center">
@@ -125,136 +116,95 @@ export default function DashboardPage() {
   }
 
   return (
-    <div className="min-h-screen bg-muted/50">
-      {/* Header */}
-      <header className="border-b bg-background">
-        <div className="container mx-auto flex h-16 items-center justify-between px-4">
-          <div className="flex items-center gap-2">
-            <ContainerIcon className="h-6 w-6 text-primary" />
-            <span className="text-lg font-semibold">Container Spawner</span>
-          </div>
-          <div className="flex items-center gap-4">
-            {/* Admin-Link */}
-            {user.is_admin && (
-              <Link href="/admin">
-                <Button variant="outline" size="sm">
-                  <Shield className="mr-2 h-4 w-4" />
-                  Admin
-                </Button>
-              </Link>
-            )}
-            <div className="flex items-center gap-2">
-              <Avatar className="h-8 w-8">
-                <AvatarFallback className="text-xs">
-                  {user.email.slice(0, 2).toUpperCase()}
-                </AvatarFallback>
-              </Avatar>
-              <span className="text-sm font-medium">{user.email}</span>
-              {user.is_admin && (
-                <Badge variant="secondary" className="text-xs">
-                  Admin
-                </Badge>
-              )}
-            </div>
-            <Button variant="ghost" size="sm" onClick={handleLogout}>
-              <LogOut className="mr-2 h-4 w-4" />
-              Abmelden
-            </Button>
-          </div>
+    <>
+      <div className="mb-6">
+        <h2 className="text-2xl font-bold">Deine Container</h2>
+        <p className="text-muted-foreground">
+          Verwalte deine Development- und Production-Container
+        </p>
+      </div>
+
+      {error && (
+        <div className="mb-6 rounded-md bg-destructive/10 p-4 text-sm text-destructive">
+          {error}
         </div>
-      </header>
+      )}
 
-      {/* Main Content */}
-      <main className="container mx-auto px-4 py-8">
-        <div className="mb-8">
-          <h1 className="text-3xl font-bold">Dashboard</h1>
-          <p className="text-muted-foreground">
-            Verwalte deine Development- und Production-Container
-          </p>
+      {loading ? (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
         </div>
-
-        {error && (
-          <div className="mb-6 rounded-md bg-destructive/10 p-4 text-sm text-destructive">
-            {error}
-          </div>
-        )}
-
-        {loading ? (
-          <div className="flex items-center justify-center py-12">
-            <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-          </div>
-        ) : (
-          <div className="grid gap-6 md:grid-cols-2">
-            {containers.map((container) => (
-              <Card key={container.type} className="relative">
-                <CardHeader>
-                  <div className="flex items-start justify-between">
-                    <div>
-                      <CardTitle className="flex items-center gap-2">
-                        <ContainerIcon className="h-5 w-5" />
-                        {container.display_name}
-                      </CardTitle>
-                      <CardDescription>{container.description}</CardDescription>
-                    </div>
-                    {getStatusIcon(container.status)}
+      ) : (
+        <div className="grid gap-6 md:grid-cols-2">
+          {containers.map((container) => (
+            <Card key={container.type} className="relative">
+              <CardHeader>
+                <div className="flex items-start justify-between">
+                  <div>
+                    <CardTitle className="flex items-center gap-2">
+                      <ContainerIcon className="h-5 w-5" />
+                      {container.display_name}
+                    </CardTitle>
+                    <CardDescription>{container.description}</CardDescription>
                   </div>
-                </CardHeader>
-                <CardContent>
-                  <div className="space-y-4">
+                  {getStatusIcon(container.status)}
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-4">
+                  <div className="text-sm">
+                    <p className="text-muted-foreground">Status:</p>
+                    <p className="font-medium">{getStatusText(container.status)}</p>
+                  </div>
+
+                  {container.last_used && (
                     <div className="text-sm">
-                      <p className="text-muted-foreground">Status:</p>
-                      <p className="font-medium">{getStatusText(container.status)}</p>
+                      <p className="text-muted-foreground">Zuletzt verwendet:</p>
+                      <p className="font-medium">
+                        {new Date(container.last_used).toLocaleString("de-DE")}
+                      </p>
                     </div>
+                  )}
 
-                    {container.last_used && (
-                      <div className="text-sm">
-                        <p className="text-muted-foreground">Zuletzt verwendet:</p>
-                        <p className="font-medium">
-                          {new Date(container.last_used).toLocaleString("de-DE")}
-                        </p>
-                      </div>
+                  <div className="flex gap-2">
+                    {container.status === "running" ? (
+                      <Button
+                        className="flex-1"
+                        onClick={() =>
+                          window.open(container.service_url, "_blank")
+                        }
+                      >
+                        <ExternalLink className="mr-2 h-4 w-4" />
+                        Service öffnen
+                      </Button>
+                    ) : (
+                      <Button
+                        className="flex-1"
+                        onClick={() => handleLaunchContainer(container.type)}
+                        disabled={launching === container.type}
+                      >
+                        {launching === container.type ? (
+                          <>
+                            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                            Wird gestartet...
+                          </>
+                        ) : (
+                          <>
+                            <Play className="mr-2 h-4 w-4" />
+                            {container.status === "not_created"
+                              ? "Erstellen & Öffnen"
+                              : "Starten & Öffnen"}
+                          </>
+                        )}
+                      </Button>
                     )}
-
-                    <div className="flex gap-2">
-                      {container.status === "running" ? (
-                        <Button
-                          className="flex-1"
-                          onClick={() =>
-                            window.open(container.service_url, "_blank")
-                          }
-                        >
-                          <ExternalLink className="mr-2 h-4 w-4" />
-                          Service öffnen
-                        </Button>
-                      ) : (
-                        <Button
-                          className="flex-1"
-                          onClick={() => handleLaunchContainer(container.type)}
-                          disabled={launching === container.type}
-                        >
-                          {launching === container.type ? (
-                            <>
-                              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                              Wird gestartet...
-                            </>
-                          ) : (
-                            <>
-                              <Play className="mr-2 h-4 w-4" />
-                              {container.status === "not_created"
-                                ? "Erstellen & Öffnen"
-                                : "Starten & Öffnen"}
-                            </>
-                          )}
-                        </Button>
-                      )}
-                    </div>
                   </div>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-        )}
-      </main>
-    </div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+    </>
   );
 }
diff --git a/frontend/src/app/dashboard/settings/page.tsx b/frontend/src/app/dashboard/settings/page.tsx
new file mode 100644
index 0000000..05c9d42
--- /dev/null
+++ b/frontend/src/app/dashboard/settings/page.tsx
@@ -0,0 +1,76 @@
+'use client'
+
+import { useAuth } from '@/hooks/use-auth'
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+
+export default function SettingsPage() {
+  const { user } = useAuth()
+
+  return (
+    <>
+      <div className="mb-6">
+        <h2 className="text-2xl font-bold">Einstellungen</h2>
+        <p className="text-muted-foreground">
+          Verwalte deine Account-Einstellungen
+        </p>
+      </div>
+
+      <div className="grid gap-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>Profil</CardTitle>
+            <CardDescription>Deine Account-Informationen</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div>
+              <span className="text-sm font-medium text-muted-foreground">Email</span>
+              <p className="text-base font-semibold">{user?.email}</p>
+            </div>
+            <div>
+              <span className="text-sm font-medium text-muted-foreground">Slug</span>
+              <p className="text-base font-semibold">{user?.slug}</p>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-sm font-medium text-muted-foreground">Status</span>
+              <Badge variant={user?.state === 'verified' ? 'default' : 'secondary'}>
+                {user?.state === 'verified' ? 'Verifiziert' : user?.state === 'active' ? 'Aktiv' : 'Registriert'}
+              </Badge>
+            </div>
+            {user?.is_admin && (
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-medium text-muted-foreground">Rolle</span>
+                <Badge variant="default">Administrator</Badge>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Account-Info</CardTitle>
+            <CardDescription>Zusätzliche Informationen</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {user?.created_at && (
+              <div>
+                <span className="text-sm font-medium text-muted-foreground">Erstellt am</span>
+                <p className="text-base font-semibold">
+                  {new Date(user.created_at).toLocaleString('de-DE')}
+                </p>
+              </div>
+            )}
+            {user?.last_used && (
+              <div>
+                <span className="text-sm font-medium text-muted-foreground">Zuletzt verwendet</span>
+                <p className="text-base font-semibold">
+                  {new Date(user.last_used).toLocaleString('de-DE')}
+                </p>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </>
+  )
+}
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 10c2d37..bdba020 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -23,6 +23,14 @@
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
+    --sidebar: 0 0% 100%;
+    --sidebar-foreground: 222.2 84% 4.9%;
+    --sidebar-primary: 222.2 47.4% 11.2%;
+    --sidebar-primary-foreground: 210 40% 98%;
+    --sidebar-accent: 210 40% 96.1%;
+    --sidebar-accent-foreground: 222.2 47.4% 11.2%;
+    --sidebar-border: 214.3 31.8% 91.4%;
+    --sidebar-ring: 222.2 84% 4.9%;
     --radius: 0.5rem;
   }
 
@@ -46,6 +54,14 @@
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;
+    --sidebar: 217.2 32.6% 17.5%;
+    --sidebar-foreground: 210 40% 98%;
+    --sidebar-primary: 210 40% 98%;
+    --sidebar-primary-foreground: 222.2 47.4% 11.2%;
+    --sidebar-accent: 217.2 32.6% 17.5%;
+    --sidebar-accent-foreground: 210 40% 98%;
+    --sidebar-border: 217.2 32.6% 17.5%;
+    --sidebar-ring: 212.7 26.8% 83.9%;
   }
 }
 
diff --git a/frontend/src/components/app-sidebar.tsx b/frontend/src/components/app-sidebar.tsx
new file mode 100644
index 0000000..bed4b87
--- /dev/null
+++ b/frontend/src/components/app-sidebar.tsx
@@ -0,0 +1,129 @@
+'use client'
+
+import { Home, Settings, Shield, LogOut } from 'lucide-react'
+import { useAuth } from '@/hooks/use-auth'
+import { useRouter, usePathname } from 'next/navigation'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/components/ui/sidebar'
+import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import { Separator } from '@/components/ui/separator'
+import Link from 'next/link'
+
+export function AppSidebar() {
+  const { user, logout } = useAuth()
+  const router = useRouter()
+  const pathname = usePathname()
+
+  const navItems = [
+    { title: 'Dashboard', url: '/dashboard', icon: Home },
+    { title: 'Einstellungen', url: '/dashboard/settings', icon: Settings },
+  ]
+
+  const adminItems = user?.is_admin ? [
+    { title: 'Admin', url: '/admin', icon: Shield }
+  ] : []
+
+  const handleLogout = async () => {
+    await logout()
+    router.push('/login')
+  }
+
+  return (
+    <Sidebar>
+      <SidebarHeader>
+        <div className="flex items-center gap-2 px-4 py-2">
+          <h2 className="text-lg font-semibold">Container Spawner</h2>
+        </div>
+      </SidebarHeader>
+
+      <Separator />
+
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Navigation</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {navItems.map((item) => (
+                <SidebarMenuItem key={item.url}>
+                  <SidebarMenuButton
+                    asChild
+                    isActive={pathname === item.url}
+                  >
+                    <Link href={item.url}>
+                      <item.icon className="h-4 w-4" />
+                      <span>{item.title}</span>
+                    </Link>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        {adminItems.length > 0 && (
+          <>
+            <Separator />
+            <SidebarGroup>
+              <SidebarGroupLabel>Administration</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {adminItems.map((item) => (
+                    <SidebarMenuItem key={item.url}>
+                      <SidebarMenuButton
+                        asChild
+                        isActive={pathname === item.url}
+                      >
+                        <Link href={item.url}>
+                          <item.icon className="h-4 w-4" />
+                          <span>{item.title}</span>
+                        </Link>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </>
+        )}
+      </SidebarContent>
+
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <div className="flex items-center gap-2 px-4 py-2">
+              <Avatar className="h-8 w-8">
+                <AvatarFallback>
+                  {user?.email?.charAt(0).toUpperCase() || 'U'}
+                </AvatarFallback>
+              </Avatar>
+              <div className="flex flex-col flex-1 min-w-0">
+                <span className="text-sm font-medium truncate">
+                  {user?.email}
+                </span>
+                <span className="text-xs text-muted-foreground">
+                  {user?.is_admin ? 'Administrator' : 'Benutzer'}
+                </span>
+              </div>
+            </div>
+          </SidebarMenuItem>
+          <SidebarMenuItem>
+            <SidebarMenuButton onClick={handleLogout}>
+              <LogOut className="h-4 w-4" />
+              <span>Abmelden</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+    </Sidebar>
+  )
+}
diff --git a/frontend/src/components/ui/sidebar.tsx b/frontend/src/components/ui/sidebar.tsx
new file mode 100644
index 0000000..bd285fe
--- /dev/null
+++ b/frontend/src/components/ui/sidebar.tsx
@@ -0,0 +1,488 @@
+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 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 SidebarContextType = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextType | undefined>(undefined)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+const SidebarProvider = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & {
+    defaultOpen?: boolean
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+  }
+>(
+  (
+    {
+      defaultOpen = true,
+      open: openProp,
+      onOpenChange: setOpenProp,
+      className,
+      style,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const isMobile = useIsMobile()
+    const [openMobile, setOpenMobile] = React.useState(false)
+
+    const [_open, _setOpen] = React.useState(defaultOpen)
+    const open = openProp ?? _open
+    const setOpen = React.useCallback(
+      (open: boolean) => {
+        setOpenProp?.(open)
+        _setOpen(open)
+
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+      },
+      [setOpenProp]
+    )
+
+    const state = open ? "expanded" : "collapsed"
+
+    const toggleSidebar = React.useCallback(() => {
+      return isMobile ? setOpenMobile(!openMobile) : setOpen(!open)
+    }, [isMobile, open, setOpen, openMobile])
+
+    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])
+
+    return (
+      <SidebarContext.Provider
+        value={{
+          state,
+          open,
+          setOpen,
+          isMobile,
+          openMobile,
+          setOpenMobile,
+          toggleSidebar,
+        }}
+      >
+        <div
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH,
+              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+              ...style,
+            } as React.CSSProperties
+          }
+          className="flex h-full w-full"
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </div>
+      </SidebarContext.Provider>
+    )
+  }
+)
+SidebarProvider.displayName = "SidebarProvider"
+
+const Sidebar = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & {
+    side?: "left" | "right"
+    variant?: "sidebar" | "floating" | "inset"
+    collapsible?: "offcanvas" | "icon" | "none"
+  }
+>(
+  (
+    {
+      side = "left",
+      variant = "sidebar",
+      collapsible = "offcanvas",
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+    if (collapsible === "none") {
+      return (
+        <div
+          className={cn(
+            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
+            className
+          )}
+          ref={ref}
+          {...props}
+        />
+      )
+    }
+
+    if (isMobile) {
+      return (
+        <Sheet open={openMobile} onOpenChange={setOpenMobile}>
+          <SheetContent side={side} className="w-[--sidebar-width-mobile] bg-sidebar p-0 text-sidebar-foreground">
+            <div className="flex h-full w-full flex-col" {...props} ref={ref} />
+          </SheetContent>
+        </Sheet>
+      )
+    }
+
+    return (
+      <div
+        className={cn(
+          "group peer hidden md:flex md:flex-col",
+          state === "collapsed" && "md:w-[--sidebar-width-icon]",
+          state === "expanded" && "md:w-[--sidebar-width]",
+          "h-full transition-[width] duration-300 ease-in-out",
+          variant === "inset" && "border-r"
+        )}
+      >
+        <div
+          className={cn(
+            "flex h-full w-full flex-col bg-sidebar text-sidebar-foreground",
+            className
+          )}
+          ref={ref}
+          {...props}
+        />
+      </div>
+    )
+  }
+)
+Sidebar.displayName = "Sidebar"
+
+const SidebarTrigger = React.forwardRef<
+  React.ElementRef<"button">,
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ className, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      ref={ref}
+      onClick={toggleSidebar}
+      className={cn(
+        "inline-flex h-8 w-8 items-center justify-center rounded-md border border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground",
+        className
+      )}
+      {...props}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="h-4 w-4"
+      >
+        <rect width="18" height="18" x="3" y="3" rx="2" />
+        <path d="M9 3v18" />
+      </svg>
+    </button>
+  )
+})
+SidebarTrigger.displayName = "SidebarTrigger"
+
+const SidebarInset = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("relative flex min-h-screen w-full flex-col bg-background", className)}
+    {...props}
+  />
+))
+SidebarInset.displayName = "SidebarInset"
+
+const SidebarContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col gap-4 overflow-hidden px-2 py-4 flex-1", className)}
+    {...props}
+  />
+))
+SidebarContent.displayName = "SidebarContent"
+
+const SidebarHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col gap-2 overflow-hidden px-2 py-4", className)}
+    {...props}
+  />
+))
+SidebarHeader.displayName = "SidebarHeader"
+
+const SidebarFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col gap-2 overflow-hidden px-2 py-4", className)}
+    {...props}
+  />
+))
+SidebarFooter.displayName = "SidebarFooter"
+
+const SidebarSeparator = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("-mx-2 my-2 h-px bg-sidebar-border", className)}
+    {...props}
+  />
+))
+SidebarSeparator.displayName = "SidebarSeparator"
+
+const SidebarGroup = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("overflow-hidden px-2 py-4", className)}
+    {...props}
+  />
+))
+SidebarGroup.displayName = "SidebarGroup"
+
+const SidebarGroupLabel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-xs font-medium text-sidebar-foreground/70",
+      className
+    )}
+    {...props}
+  />
+))
+SidebarGroupLabel.displayName = "SidebarGroupLabel"
+
+const SidebarGroupContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("w-full", className)} {...props} />
+))
+SidebarGroupContent.displayName = "SidebarGroupContent"
+
+const SidebarMenu = React.forwardRef<
+  HTMLUListElement,
+  React.HTMLAttributes<HTMLUListElement>
+>(({ className, ...props }, ref) => (
+  <ul ref={ref} className={cn("flex w-full flex-col gap-1", className)} {...props} />
+))
+SidebarMenu.displayName = "SidebarMenu"
+
+const SidebarMenuItem = React.forwardRef<
+  HTMLLIElement,
+  React.HTMLAttributes<HTMLLIElement>
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("w-full", className)} {...props} />
+))
+SidebarMenuItem.displayName = "SidebarMenuItem"
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-sm font-medium outline-none ring-sidebar-ring transition-all 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 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      isActive: {
+        true: "bg-sidebar-accent text-sidebar-accent-foreground",
+        false: "text-sidebar-foreground",
+      },
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "border border-sidebar-border bg-background text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:border-sidebar-accent",
+      },
+      size: {
+        default: "h-8 px-2",
+        sm: "h-7 px-1.5 text-xs",
+        lg: "h-12 px-2 text-base",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const SidebarMenuButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement> &
+    VariantProps<typeof sidebarMenuButtonVariants> & {
+      asChild?: boolean
+      isActive?: boolean
+    }
+>(
+  (
+    { asChild = false, isActive = false, variant = "default", size = "default", ...props },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        ref={ref}
+        className={sidebarMenuButtonVariants({
+          isActive,
+          variant,
+          size,
+          className: props.className,
+        })}
+        {...props}
+      />
+    )
+  }
+)
+SidebarMenuButton.displayName = "SidebarMenuButton"
+
+// Sheet component for mobile
+const Sheet = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & {
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+  }
+>(({ open, onOpenChange, children, ...props }, ref) => {
+  const [isOpen, setIsOpen] = React.useState(open ?? false)
+
+  React.useEffect(() => {
+    if (open !== undefined) {
+      setIsOpen(open)
+    }
+  }, [open])
+
+  return (
+    <>
+      {isOpen && (
+        <div
+          className="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm"
+          onClick={() => {
+            setIsOpen(false)
+            onOpenChange?.(false)
+          }}
+        />
+      )}
+      <div ref={ref} {...props}>
+        {children}
+      </div>
+    </>
+  )
+})
+Sheet.displayName = "Sheet"
+
+interface SheetContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  side?: "left" | "right" | "top" | "bottom"
+}
+
+const SheetContent = React.forwardRef<
+  HTMLDivElement,
+  SheetContentProps
+>(({ side = "left", className, ...props }, ref) => {
+  const sideClasses = {
+    left: "left-0 top-0 h-full w-[--sidebar-width-mobile] border-r",
+    right: "right-0 top-0 h-full w-[--sidebar-width-mobile] border-l",
+    top: "top-0 left-0 right-0 h-auto border-b",
+    bottom: "bottom-0 left-0 right-0 h-auto border-t",
+  }
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "fixed z-50 bg-background transition-all duration-300",
+        sideClasses[side],
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SheetContent.displayName = "SheetContent"
+
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mq = window.matchMedia("(max-width: 768px)")
+    setIsMobile(mq.matches)
+
+    const onChange = (m: MediaQueryListEvent) => {
+      setIsMobile(m.matches)
+    }
+
+    mq.addEventListener("change", onChange)
+    return () => mq.removeEventListener("change", onChange)
+  }, [])
+
+  return isMobile ?? false
+}
+
+export {
+  Sidebar,
+  SidebarProvider,
+  SidebarTrigger,
+  SidebarContent,
+  SidebarHeader,
+  SidebarFooter,
+  SidebarSeparator,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  SidebarInset,
+  Sheet,
+  SheetContent,
+  useSidebar,
+}
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index f81d790..b2c1ff3 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -43,6 +43,16 @@ const config: Config = {
           DEFAULT: "hsl(var(--card))",
           foreground: "hsl(var(--card-foreground))",
         },
+        sidebar: {
+          DEFAULT: "hsl(var(--sidebar))",
+          foreground: "hsl(var(--sidebar-foreground))",
+          primary: "hsl(var(--sidebar-primary))",
+          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+          accent: "hsl(var(--sidebar-accent))",
+          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+          border: "hsl(var(--sidebar-border))",
+          ring: "hsl(var(--sidebar-ring))",
+        },
       },
       borderRadius: {
         lg: "var(--radius)",