diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index aacf7b5..3c19668 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -7,7 +7,12 @@
       "Bash(go run:*)",
       "Bash(go build:*)",
       "Bash(go doc:*)",
-      "Bash(go test:*)"
+      "Bash(go test:*)",
+      "WebFetch(domain:lucia-auth.com)",
+      "WebFetch(domain:v3.lucia-auth.com)",
+      "Bash(bun install:*)",
+      "Bash(bunx svelte-kit sync:*)",
+      "Bash(bun run check:*)"
     ]
   }
 }
diff --git a/DOCUMENTATION.md b/DOCUMENTATION.md
index 113e845..2e3c66b 100644
--- a/DOCUMENTATION.md
+++ b/DOCUMENTATION.md
@@ -700,6 +700,12 @@ A web dashboard (`dashboard/` directory) for browsing, triaging, and downloading
   - Individual file download and bulk ZIP download (all files + report metadata)
   - Report deletion with confirmation dialog
   - Dark mode UI matching EMLy's aesthetic
+- **Authentication**: Session-based auth with Lucia v3 + Drizzle ORM adapter
+  - Default admin account: username `admin`, password `admin` (seeded on first migration)
+  - Password hashing with argon2 via `@node-rs/argon2`
+  - Session cookies with automatic refresh
+  - Role-based access: `admin` and `user` roles
+- **User Management**: Admin-only `/users` page for creating/deleting dashboard users
 - **Development**: `cd dashboard && bun install && bun dev` (localhost:3001)
 
 #### Configuration (config.ini)
diff --git a/config.ini b/config.ini
index 839e7a9..2d8dec6 100644
--- a/config.ini
+++ b/config.ini
@@ -1,11 +1,11 @@
 [EMLy]
-SDK_DECODER_SEMVER          = 1.3.2
-SDK_DECODER_RELEASE_CHANNEL = stable
-GUI_SEMVER                  = 1.5.4
+SDK_DECODER_SEMVER          = 1.4.1
+SDK_DECODER_RELEASE_CHANNEL = beta
+GUI_SEMVER                  = 1.5.5
 GUI_RELEASE_CHANNEL         = beta
 LANGUAGE                    = it
 UPDATE_CHECK_ENABLED        = false
 UPDATE_PATH                 = 
-UPDATE_AUTO_CHECK           = true
+UPDATE_AUTO_CHECK           = false
 BUGREPORT_API_URL           = "https://api.whiskr.it"
 BUGREPORT_API_KEY           = "emly_1BaQdBknsMGcY5DynSby71JnWOKXtJvnuUprkgWT0pujpLFxj5HaTXP9vtJAMk63"
\ No newline at end of file
diff --git a/server/dashboard/components.json b/server/dashboard/components.json
new file mode 100644
index 0000000..e44a4eb
--- /dev/null
+++ b/server/dashboard/components.json
@@ -0,0 +1,16 @@
+{
+	"$schema": "https://shadcn-svelte.com/schema.json",
+	"tailwind": {
+		"css": "src\\app.css",
+		"baseColor": "neutral"
+	},
+	"aliases": {
+		"components": "$lib/components",
+		"utils": "$lib/utils",
+		"ui": "$lib/components/ui",
+		"hooks": "$lib/hooks",
+		"lib": "$lib"
+	},
+	"typescript": true,
+	"registry": "https://shadcn-svelte.com/registry"
+}
diff --git a/server/dashboard/package.json b/server/dashboard/package.json
index 1b67641..eafdd10 100644
--- a/server/dashboard/package.json
+++ b/server/dashboard/package.json
@@ -9,24 +9,31 @@
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {
+    "@internationalized/date": "^3.10.0",
+    "@lucide/svelte": "^0.561.0",
     "@sveltejs/adapter-node": "^5.5.3",
     "@sveltejs/kit": "^2.51.0",
     "@sveltejs/vite-plugin-svelte": "^5.1.1",
     "@tailwindcss/vite": "^4.1.18",
     "@types/node": "^25.2.3",
+    "drizzle-kit": "^0.31.9",
     "svelte": "^5.51.1",
     "svelte-check": "^4.4.0",
     "tailwindcss": "^4.1.18",
+    "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3",
     "vite": "^6.4.1"
   },
   "dependencies": {
+    "@lucia-auth/adapter-drizzle": "^1.1.0",
+    "@node-rs/argon2": "^2.0.2",
     "drizzle-orm": "^0.38.4",
+    "lucia": "^3.2.2",
     "mysql2": "^3.17.1",
-    "bits-ui": "^1.8.0",
+    "bits-ui": "^2.14.4",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.4.0",
-    "tailwind-variants": "^0.3.1",
+    "tailwind-variants": "^3.2.2",
     "jszip": "^3.10.1",
     "lucide-svelte": "^0.469.0"
   },
diff --git a/server/dashboard/src/app.css b/server/dashboard/src/app.css
index 2ac6589..ac256d3 100644
--- a/server/dashboard/src/app.css
+++ b/server/dashboard/src/app.css
@@ -1,42 +1,121 @@
 @import "tailwindcss";
 
+@import "tw-animate-css";
+
 @custom-variant dark (&:is(.dark *));
 
-@theme {
-	--color-background: hsl(222.2 84% 4.9%);
-	--color-foreground: hsl(210 40% 98%);
-	--color-card: hsl(222.2 84% 4.9%);
-	--color-card-foreground: hsl(210 40% 98%);
-	--color-popover: hsl(222.2 84% 4.9%);
-	--color-popover-foreground: hsl(210 40% 98%);
-	--color-primary: hsl(217.2 91.2% 59.8%);
-	--color-primary-foreground: hsl(222.2 47.4% 11.2%);
-	--color-secondary: hsl(217.2 32.6% 17.5%);
-	--color-secondary-foreground: hsl(210 40% 98%);
-	--color-muted: hsl(217.2 32.6% 17.5%);
-	--color-muted-foreground: hsl(215 20.2% 65.1%);
-	--color-accent: hsl(217.2 32.6% 17.5%);
-	--color-accent-foreground: hsl(210 40% 98%);
-	--color-destructive: hsl(0 62.8% 30.6%);
-	--color-destructive-foreground: hsl(210 40% 98%);
-	--color-border: hsl(217.2 32.6% 17.5%);
-	--color-input: hsl(217.2 32.6% 17.5%);
-	--color-ring: hsl(224.3 76.3% 48%);
-	--radius: 0.5rem;
-
-	--color-sidebar: hsl(222.2 84% 3.5%);
-	--color-sidebar-foreground: hsl(210 40% 98%);
-	--color-sidebar-border: hsl(217.2 32.6% 12%);
-
-	--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
 }
 
-* {
-	border-color: var(--color-border);
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
 }
 
-body {
-	background-color: var(--color-background);
-	color: var(--color-foreground);
-	font-family: var(--font-sans);
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
 }
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
\ No newline at end of file
diff --git a/server/dashboard/src/app.d.ts b/server/dashboard/src/app.d.ts
new file mode 100644
index 0000000..c0087e0
--- /dev/null
+++ b/server/dashboard/src/app.d.ts
@@ -0,0 +1,10 @@
+declare global {
+	namespace App {
+		interface Locals {
+			user: import('lucia').User | null;
+			session: import('lucia').Session | null;
+		}
+	}
+}
+
+export {};
diff --git a/server/dashboard/src/hooks.server.ts b/server/dashboard/src/hooks.server.ts
new file mode 100644
index 0000000..474ba4a
--- /dev/null
+++ b/server/dashboard/src/hooks.server.ts
@@ -0,0 +1,34 @@
+import type { Handle } from '@sveltejs/kit';
+import { lucia } from '$lib/server/auth';
+
+export const handle: Handle = async ({ event, resolve }) => {
+	const sessionId = event.cookies.get(lucia.sessionCookieName);
+
+	if (!sessionId) {
+		event.locals.user = null;
+		event.locals.session = null;
+		return resolve(event);
+	}
+
+	const { session, user } = await lucia.validateSession(sessionId);
+
+	if (session && session.fresh) {
+		const sessionCookie = lucia.createSessionCookie(session.id);
+		event.cookies.set(sessionCookie.name, sessionCookie.value, {
+			path: '.',
+			...sessionCookie.attributes
+		});
+	}
+
+	if (!session) {
+		const sessionCookie = lucia.createBlankSessionCookie();
+		event.cookies.set(sessionCookie.name, sessionCookie.value, {
+			path: '.',
+			...sessionCookie.attributes
+		});
+	}
+
+	event.locals.user = user;
+	event.locals.session = session;
+	return resolve(event);
+};
diff --git a/server/dashboard/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte b/server/dashboard/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
new file mode 100644
index 0000000..a005691
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.ActionProps = $props();
+</script>
+
+<AlertDialogPrimitive.Action
+	bind:ref
+	data-slot="alert-dialog-action"
+	class={cn(buttonVariants(), className)}
+	{...restProps}
+/>
diff --git a/server/dashboard/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte b/server/dashboard/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
new file mode 100644
index 0000000..a7b0cf7
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.CancelProps = $props();
+</script>
+
+<AlertDialogPrimitive.Cancel
+	bind:ref
+	data-slot="alert-dialog-cancel"
+	class={cn(buttonVariants({ variant: "outline" }), className)}
+	{...restProps}
+/>
diff --git a/server/dashboard/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte b/server/dashboard/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
new file mode 100644
index 0000000..236bcad
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import AlertDialogPortal from "./alert-dialog-portal.svelte";
+	import AlertDialogOverlay from "./alert-dialog-overlay.svelte";
+	import { cn, type WithoutChild, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		...restProps
+	}: WithoutChild<AlertDialogPrimitive.ContentProps> & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof AlertDialogPortal>>;
+	} = $props();
+</script>
+
+<AlertDialogPortal {...portalProps}>
+	<AlertDialogOverlay />
+	<AlertDialogPrimitive.Content
+		bind:ref
+		data-slot="alert-dialog-content"
+		class={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
+		)}
+		{...restProps}
+	/>
+</AlertDialogPortal>
diff --git a/server/dashboard/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte b/server/dashboard/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
new file mode 100644
index 0000000..2ec67dc
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.DescriptionProps = $props();
+</script>
+
+<AlertDialogPrimitive.Description
+	bind:ref
+	data-slot="alert-dialog-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>
diff --git a/server/dashboard/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte b/server/dashboard/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
new file mode 100644
index 0000000..f78b97a
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-footer"
+	class={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/server/dashboard/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte b/server/dashboard/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
new file mode 100644
index 0000000..1835d91
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-header"
+	class={cn("flex flex-col gap-2 text-center sm:text-start", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/server/dashboard/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte b/server/dashboard/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
new file mode 100644
index 0000000..a64ee76
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.OverlayProps = $props();
+</script>
+
+<AlertDialogPrimitive.Overlay
+	bind:ref
+	data-slot="alert-dialog-overlay"
+	class={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
+	)}
+	{...restProps}
+/>
diff --git a/server/dashboard/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte b/server/dashboard/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte
new file mode 100644
index 0000000..f0a19a8
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	let { ...restProps }: AlertDialogPrimitive.PortalProps = $props();
+</script>
+
+<AlertDialogPrimitive.Portal {...restProps} />
diff --git a/server/dashboard/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte b/server/dashboard/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
new file mode 100644
index 0000000..7ef2b5f
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.TitleProps = $props();
+</script>
+
+<AlertDialogPrimitive.Title
+	bind:ref
+	data-slot="alert-dialog-title"
+	class={cn("text-lg font-semibold", className)}
+	{...restProps}
+/>
diff --git a/server/dashboard/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte b/server/dashboard/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte
new file mode 100644
index 0000000..b22d1d5
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: AlertDialogPrimitive.TriggerProps = $props();
+</script>
+
+<AlertDialogPrimitive.Trigger bind:ref data-slot="alert-dialog-trigger" {...restProps} />
diff --git a/server/dashboard/src/lib/components/ui/alert-dialog/alert-dialog.svelte b/server/dashboard/src/lib/components/ui/alert-dialog/alert-dialog.svelte
new file mode 100644
index 0000000..7ea78bb
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/alert-dialog/alert-dialog.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: AlertDialogPrimitive.RootProps = $props();
+</script>
+
+<AlertDialogPrimitive.Root bind:open {...restProps} />
diff --git a/server/dashboard/src/lib/components/ui/alert-dialog/index.ts b/server/dashboard/src/lib/components/ui/alert-dialog/index.ts
new file mode 100644
index 0000000..269538e
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/alert-dialog/index.ts
@@ -0,0 +1,37 @@
+import Root from "./alert-dialog.svelte";
+import Portal from "./alert-dialog-portal.svelte";
+import Trigger from "./alert-dialog-trigger.svelte";
+import Title from "./alert-dialog-title.svelte";
+import Action from "./alert-dialog-action.svelte";
+import Cancel from "./alert-dialog-cancel.svelte";
+import Footer from "./alert-dialog-footer.svelte";
+import Header from "./alert-dialog-header.svelte";
+import Overlay from "./alert-dialog-overlay.svelte";
+import Content from "./alert-dialog-content.svelte";
+import Description from "./alert-dialog-description.svelte";
+
+export {
+	Root,
+	Title,
+	Action,
+	Cancel,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	//
+	Root as AlertDialog,
+	Title as AlertDialogTitle,
+	Action as AlertDialogAction,
+	Cancel as AlertDialogCancel,
+	Portal as AlertDialogPortal,
+	Footer as AlertDialogFooter,
+	Header as AlertDialogHeader,
+	Trigger as AlertDialogTrigger,
+	Overlay as AlertDialogOverlay,
+	Content as AlertDialogContent,
+	Description as AlertDialogDescription,
+};
diff --git a/server/dashboard/src/lib/components/ui/button/button.svelte b/server/dashboard/src/lib/components/ui/button/button.svelte
new file mode 100644
index 0000000..a8296ae
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/button/button.svelte
@@ -0,0 +1,82 @@
+<script lang="ts" module>
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const buttonVariants = tv({
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-xs",
+				destructive:
+					"bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white shadow-xs",
+				outline:
+					"bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs",
+				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-xs",
+				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 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+				icon: "size-9",
+				"icon-sm": "size-8",
+				"icon-lg": "size-10",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+	export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			variant?: ButtonVariant;
+			size?: ButtonSize;
+		};
+</script>
+
+<script lang="ts">
+	let {
+		class: className,
+		variant = "default",
+		size = "default",
+		ref = $bindable(null),
+		href = undefined,
+		type = "button",
+		disabled,
+		children,
+		...restProps
+	}: ButtonProps = $props();
+</script>
+
+{#if href}
+	<a
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		href={disabled ? undefined : href}
+		aria-disabled={disabled}
+		role={disabled ? "link" : undefined}
+		tabindex={disabled ? -1 : undefined}
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		{type}
+		{disabled}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}
diff --git a/server/dashboard/src/lib/components/ui/button/index.ts b/server/dashboard/src/lib/components/ui/button/index.ts
new file mode 100644
index 0000000..fb585d7
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/button/index.ts
@@ -0,0 +1,17 @@
+import Root, {
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
+	buttonVariants,
+} from "./button.svelte";
+
+export {
+	Root,
+	type ButtonProps as Props,
+	//
+	Root as Button,
+	buttonVariants,
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
+};
diff --git a/server/dashboard/src/lib/components/ui/card/card-action.svelte b/server/dashboard/src/lib/components/ui/card/card-action.svelte
new file mode 100644
index 0000000..cc36c56
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/card/card-action.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-action"
+	class={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/server/dashboard/src/lib/components/ui/card/card-content.svelte b/server/dashboard/src/lib/components/ui/card/card-content.svelte
new file mode 100644
index 0000000..bc90b83
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/card/card-content.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} data-slot="card-content" class={cn("px-6", className)} {...restProps}>
+	{@render children?.()}
+</div>
diff --git a/server/dashboard/src/lib/components/ui/card/card-description.svelte b/server/dashboard/src/lib/components/ui/card/card-description.svelte
new file mode 100644
index 0000000..9b20ac7
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/card/card-description.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
+</script>
+
+<p
+	bind:this={ref}
+	data-slot="card-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</p>
diff --git a/server/dashboard/src/lib/components/ui/card/card-footer.svelte b/server/dashboard/src/lib/components/ui/card/card-footer.svelte
new file mode 100644
index 0000000..2d4d0f2
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/card/card-footer.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-footer"
+	class={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/server/dashboard/src/lib/components/ui/card/card-header.svelte b/server/dashboard/src/lib/components/ui/card/card-header.svelte
new file mode 100644
index 0000000..2501788
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/card/card-header.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-header"
+	class={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
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/server/dashboard/src/lib/components/ui/card/card-title.svelte b/server/dashboard/src/lib/components/ui/card/card-title.svelte
new file mode 100644
index 0000000..7447231
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/card/card-title.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-title"
+	class={cn("leading-none font-semibold", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/server/dashboard/src/lib/components/ui/card/card.svelte b/server/dashboard/src/lib/components/ui/card/card.svelte
new file mode 100644
index 0000000..99448cc
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/card/card.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card"
+	class={cn(
+		"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/server/dashboard/src/lib/components/ui/card/index.ts b/server/dashboard/src/lib/components/ui/card/index.ts
new file mode 100644
index 0000000..4d3fce4
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/card/index.ts
@@ -0,0 +1,25 @@
+import Root from "./card.svelte";
+import Content from "./card-content.svelte";
+import Description from "./card-description.svelte";
+import Footer from "./card-footer.svelte";
+import Header from "./card-header.svelte";
+import Title from "./card-title.svelte";
+import Action from "./card-action.svelte";
+
+export {
+	Root,
+	Content,
+	Description,
+	Footer,
+	Header,
+	Title,
+	Action,
+	//
+	Root as Card,
+	Content as CardContent,
+	Description as CardDescription,
+	Footer as CardFooter,
+	Header as CardHeader,
+	Title as CardTitle,
+	Action as CardAction,
+};
diff --git a/server/dashboard/src/lib/components/ui/dialog/dialog-close.svelte b/server/dashboard/src/lib/components/ui/dialog/dialog-close.svelte
new file mode 100644
index 0000000..840b2f6
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/dialog/dialog-close.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: DialogPrimitive.CloseProps = $props();
+</script>
+
+<DialogPrimitive.Close bind:ref data-slot="dialog-close" {...restProps} />
diff --git a/server/dashboard/src/lib/components/ui/dialog/dialog-content.svelte b/server/dashboard/src/lib/components/ui/dialog/dialog-content.svelte
new file mode 100644
index 0000000..5c6ee6d
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/dialog/dialog-content.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import DialogPortal from "./dialog-portal.svelte";
+	import XIcon from "@lucide/svelte/icons/x";
+	import type { Snippet } from "svelte";
+	import * as Dialog from "./index.js";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		children,
+		showCloseButton = true,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DialogPortal>>;
+		children: Snippet;
+		showCloseButton?: boolean;
+	} = $props();
+</script>
+
+<DialogPortal {...portalProps}>
+	<Dialog.Overlay />
+	<DialogPrimitive.Content
+		bind:ref
+		data-slot="dialog-content"
+		class={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
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		{#if showCloseButton}
+			<DialogPrimitive.Close
+				class="ring-offset-background focus:ring-ring absolute end-4 top-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 class="sr-only">Close</span>
+			</DialogPrimitive.Close>
+		{/if}
+	</DialogPrimitive.Content>
+</DialogPortal>
diff --git a/server/dashboard/src/lib/components/ui/dialog/dialog-description.svelte b/server/dashboard/src/lib/components/ui/dialog/dialog-description.svelte
new file mode 100644
index 0000000..3845023
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/dialog/dialog-description.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.DescriptionProps = $props();
+</script>
+
+<DialogPrimitive.Description
+	bind:ref
+	data-slot="dialog-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>
diff --git a/server/dashboard/src/lib/components/ui/dialog/dialog-footer.svelte b/server/dashboard/src/lib/components/ui/dialog/dialog-footer.svelte
new file mode 100644
index 0000000..e7ff446
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/dialog/dialog-footer.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dialog-footer"
+	class={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/server/dashboard/src/lib/components/ui/dialog/dialog-header.svelte b/server/dashboard/src/lib/components/ui/dialog/dialog-header.svelte
new file mode 100644
index 0000000..4e5c447
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/dialog/dialog-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dialog-header"
+	class={cn("flex flex-col gap-2 text-center sm:text-start", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/server/dashboard/src/lib/components/ui/dialog/dialog-overlay.svelte b/server/dashboard/src/lib/components/ui/dialog/dialog-overlay.svelte
new file mode 100644
index 0000000..f81ad83
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.OverlayProps = $props();
+</script>
+
+<DialogPrimitive.Overlay
+	bind:ref
+	data-slot="dialog-overlay"
+	class={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
+	)}
+	{...restProps}
+/>
diff --git a/server/dashboard/src/lib/components/ui/dialog/dialog-portal.svelte b/server/dashboard/src/lib/components/ui/dialog/dialog-portal.svelte
new file mode 100644
index 0000000..ccfa79c
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/dialog/dialog-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { ...restProps }: DialogPrimitive.PortalProps = $props();
+</script>
+
+<DialogPrimitive.Portal {...restProps} />
diff --git a/server/dashboard/src/lib/components/ui/dialog/dialog-title.svelte b/server/dashboard/src/lib/components/ui/dialog/dialog-title.svelte
new file mode 100644
index 0000000..e4d4b34
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/dialog/dialog-title.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.TitleProps = $props();
+</script>
+
+<DialogPrimitive.Title
+	bind:ref
+	data-slot="dialog-title"
+	class={cn("text-lg leading-none font-semibold", className)}
+	{...restProps}
+/>
diff --git a/server/dashboard/src/lib/components/ui/dialog/dialog-trigger.svelte b/server/dashboard/src/lib/components/ui/dialog/dialog-trigger.svelte
new file mode 100644
index 0000000..9d1e801
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/dialog/dialog-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: DialogPrimitive.TriggerProps = $props();
+</script>
+
+<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {...restProps} />
diff --git a/server/dashboard/src/lib/components/ui/dialog/dialog.svelte b/server/dashboard/src/lib/components/ui/dialog/dialog.svelte
new file mode 100644
index 0000000..211672c
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/dialog/dialog.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: DialogPrimitive.RootProps = $props();
+</script>
+
+<DialogPrimitive.Root bind:open {...restProps} />
diff --git a/server/dashboard/src/lib/components/ui/dialog/index.ts b/server/dashboard/src/lib/components/ui/dialog/index.ts
new file mode 100644
index 0000000..076cef5
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/dialog/index.ts
@@ -0,0 +1,34 @@
+import Root from "./dialog.svelte";
+import Portal from "./dialog-portal.svelte";
+import Title from "./dialog-title.svelte";
+import Footer from "./dialog-footer.svelte";
+import Header from "./dialog-header.svelte";
+import Overlay from "./dialog-overlay.svelte";
+import Content from "./dialog-content.svelte";
+import Description from "./dialog-description.svelte";
+import Trigger from "./dialog-trigger.svelte";
+import Close from "./dialog-close.svelte";
+
+export {
+	Root,
+	Title,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	Close,
+	//
+	Root as Dialog,
+	Title as DialogTitle,
+	Portal as DialogPortal,
+	Footer as DialogFooter,
+	Header as DialogHeader,
+	Trigger as DialogTrigger,
+	Overlay as DialogOverlay,
+	Content as DialogContent,
+	Description as DialogDescription,
+	Close as DialogClose,
+};
diff --git a/server/dashboard/src/lib/components/ui/empty/empty-content.svelte b/server/dashboard/src/lib/components/ui/empty/empty-content.svelte
new file mode 100644
index 0000000..f5a9c68
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/empty/empty-content.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty-content"
+	class={cn(
+		"flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/server/dashboard/src/lib/components/ui/empty/empty-description.svelte b/server/dashboard/src/lib/components/ui/empty/empty-description.svelte
new file mode 100644
index 0000000..85a866c
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/empty/empty-description.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty-description"
+	class={cn(
+		"text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/server/dashboard/src/lib/components/ui/empty/empty-header.svelte b/server/dashboard/src/lib/components/ui/empty/empty-header.svelte
new file mode 100644
index 0000000..296eaf8
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/empty/empty-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty-header"
+	class={cn("flex max-w-sm flex-col items-center gap-2 text-center", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/server/dashboard/src/lib/components/ui/empty/empty-media.svelte b/server/dashboard/src/lib/components/ui/empty/empty-media.svelte
new file mode 100644
index 0000000..0b4e45d
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/empty/empty-media.svelte
@@ -0,0 +1,41 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const emptyMediaVariants = tv({
+		base: "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		variants: {
+			variant: {
+				default: "bg-transparent",
+				icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type EmptyMediaVariant = VariantProps<typeof emptyMediaVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		variant = "default",
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { variant?: EmptyMediaVariant } = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty-icon"
+	data-variant={variant}
+	class={cn(emptyMediaVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/server/dashboard/src/lib/components/ui/empty/empty-title.svelte b/server/dashboard/src/lib/components/ui/empty/empty-title.svelte
new file mode 100644
index 0000000..8c237aa
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/empty/empty-title.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty-title"
+	class={cn("text-lg font-medium tracking-tight", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/server/dashboard/src/lib/components/ui/empty/empty.svelte b/server/dashboard/src/lib/components/ui/empty/empty.svelte
new file mode 100644
index 0000000..4ccf060
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/empty/empty.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty"
+	class={cn(
+		"flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/server/dashboard/src/lib/components/ui/empty/index.ts b/server/dashboard/src/lib/components/ui/empty/index.ts
new file mode 100644
index 0000000..ae4c106
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/empty/index.ts
@@ -0,0 +1,22 @@
+import Root from "./empty.svelte";
+import Header from "./empty-header.svelte";
+import Media from "./empty-media.svelte";
+import Title from "./empty-title.svelte";
+import Description from "./empty-description.svelte";
+import Content from "./empty-content.svelte";
+
+export {
+	Root,
+	Header,
+	Media,
+	Title,
+	Description,
+	Content,
+	//
+	Root as Empty,
+	Header as EmptyHeader,
+	Media as EmptyMedia,
+	Title as EmptyTitle,
+	Description as EmptyDescription,
+	Content as EmptyContent,
+};
diff --git a/server/dashboard/src/lib/components/ui/input/index.ts b/server/dashboard/src/lib/components/ui/input/index.ts
new file mode 100644
index 0000000..f47b6d3
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/input/index.ts
@@ -0,0 +1,7 @@
+import Root from "./input.svelte";
+
+export {
+	Root,
+	//
+	Root as Input,
+};
diff --git a/server/dashboard/src/lib/components/ui/input/input.svelte b/server/dashboard/src/lib/components/ui/input/input.svelte
new file mode 100644
index 0000000..ff1a4c8
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/input/input.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	type InputType = Exclude<HTMLInputTypeAttribute, "file">;
+
+	type Props = WithElementRef<
+		Omit<HTMLInputAttributes, "type"> &
+			({ type: "file"; files?: FileList } | { type?: InputType; files?: undefined })
+	>;
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		type,
+		files = $bindable(),
+		class: className,
+		"data-slot": dataSlot = "input",
+		...restProps
+	}: Props = $props();
+</script>
+
+{#if type === "file"}
+	<input
+		bind:this={ref}
+		data-slot={dataSlot}
+		class={cn(
+			"selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50",
+			"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
+		)}
+		type="file"
+		bind:files
+		bind:value
+		{...restProps}
+	/>
+{:else}
+	<input
+		bind:this={ref}
+		data-slot={dataSlot}
+		class={cn(
+			"border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-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
+		)}
+		{type}
+		bind:value
+		{...restProps}
+	/>
+{/if}
diff --git a/server/dashboard/src/lib/components/ui/label/index.ts b/server/dashboard/src/lib/components/ui/label/index.ts
new file mode 100644
index 0000000..8bfca0b
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/label/index.ts
@@ -0,0 +1,7 @@
+import Root from "./label.svelte";
+
+export {
+	Root,
+	//
+	Root as Label,
+};
diff --git a/server/dashboard/src/lib/components/ui/label/label.svelte b/server/dashboard/src/lib/components/ui/label/label.svelte
new file mode 100644
index 0000000..d71afbc
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/label/label.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Label as LabelPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: LabelPrimitive.RootProps = $props();
+</script>
+
+<LabelPrimitive.Root
+	bind:ref
+	data-slot="label"
+	class={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
+	)}
+	{...restProps}
+/>
diff --git a/server/dashboard/src/lib/components/ui/select/index.ts b/server/dashboard/src/lib/components/ui/select/index.ts
new file mode 100644
index 0000000..4dec358
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/select/index.ts
@@ -0,0 +1,37 @@
+import Root from "./select.svelte";
+import Group from "./select-group.svelte";
+import Label from "./select-label.svelte";
+import Item from "./select-item.svelte";
+import Content from "./select-content.svelte";
+import Trigger from "./select-trigger.svelte";
+import Separator from "./select-separator.svelte";
+import ScrollDownButton from "./select-scroll-down-button.svelte";
+import ScrollUpButton from "./select-scroll-up-button.svelte";
+import GroupHeading from "./select-group-heading.svelte";
+import Portal from "./select-portal.svelte";
+
+export {
+	Root,
+	Group,
+	Label,
+	Item,
+	Content,
+	Trigger,
+	Separator,
+	ScrollDownButton,
+	ScrollUpButton,
+	GroupHeading,
+	Portal,
+	//
+	Root as Select,
+	Group as SelectGroup,
+	Label as SelectLabel,
+	Item as SelectItem,
+	Content as SelectContent,
+	Trigger as SelectTrigger,
+	Separator as SelectSeparator,
+	ScrollDownButton as SelectScrollDownButton,
+	ScrollUpButton as SelectScrollUpButton,
+	GroupHeading as SelectGroupHeading,
+	Portal as SelectPortal,
+};
diff --git a/server/dashboard/src/lib/components/ui/select/select-content.svelte b/server/dashboard/src/lib/components/ui/select/select-content.svelte
new file mode 100644
index 0000000..4b9ca43
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/select/select-content.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import SelectPortal from "./select-portal.svelte";
+	import SelectScrollUpButton from "./select-scroll-up-button.svelte";
+	import SelectScrollDownButton from "./select-scroll-down-button.svelte";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+	import type { WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		portalProps,
+		children,
+		preventScroll = true,
+		...restProps
+	}: WithoutChild<SelectPrimitive.ContentProps> & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SelectPortal>>;
+	} = $props();
+</script>
+
+<SelectPortal {...portalProps}>
+	<SelectPrimitive.Content
+		bind:ref
+		{sideOffset}
+		{preventScroll}
+		data-slot="select-content"
+		class={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-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--bits-select-content-available-height) min-w-[8rem] origin-(--bits-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md 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
+		)}
+		{...restProps}
+	>
+		<SelectScrollUpButton />
+		<SelectPrimitive.Viewport
+			class={cn(
+				"h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-1 p-1"
+			)}
+		>
+			{@render children?.()}
+		</SelectPrimitive.Viewport>
+		<SelectScrollDownButton />
+	</SelectPrimitive.Content>
+</SelectPortal>
diff --git a/server/dashboard/src/lib/components/ui/select/select-group-heading.svelte b/server/dashboard/src/lib/components/ui/select/select-group-heading.svelte
new file mode 100644
index 0000000..1fab5f0
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/select/select-group-heading.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: ComponentProps<typeof SelectPrimitive.GroupHeading> = $props();
+</script>
+
+<SelectPrimitive.GroupHeading
+	bind:ref
+	data-slot="select-group-heading"
+	class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</SelectPrimitive.GroupHeading>
diff --git a/server/dashboard/src/lib/components/ui/select/select-group.svelte b/server/dashboard/src/lib/components/ui/select/select-group.svelte
new file mode 100644
index 0000000..a1f43bf
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/select/select-group.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: SelectPrimitive.GroupProps = $props();
+</script>
+
+<SelectPrimitive.Group bind:ref data-slot="select-group" {...restProps} />
diff --git a/server/dashboard/src/lib/components/ui/select/select-item.svelte b/server/dashboard/src/lib/components/ui/select/select-item.svelte
new file mode 100644
index 0000000..b85eef6
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/select/select-item.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import CheckIcon from "@lucide/svelte/icons/check";
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		label,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<SelectPrimitive.ItemProps> = $props();
+</script>
+
+<SelectPrimitive.Item
+	bind:ref
+	{value}
+	data-slot="select-item"
+	class={cn(
+		"data-[highlighted]:bg-accent data-[highlighted]: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 ps-2 pe-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 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ selected, highlighted })}
+		<span class="absolute end-2 flex size-3.5 items-center justify-center">
+			{#if selected}
+				<CheckIcon class="size-4" />
+			{/if}
+		</span>
+		{#if childrenProp}
+			{@render childrenProp({ selected, highlighted })}
+		{:else}
+			{label || value}
+		{/if}
+	{/snippet}
+</SelectPrimitive.Item>
diff --git a/server/dashboard/src/lib/components/ui/select/select-label.svelte b/server/dashboard/src/lib/components/ui/select/select-label.svelte
new file mode 100644
index 0000000..4696025
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/select/select-label.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="select-label"
+	class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/server/dashboard/src/lib/components/ui/select/select-portal.svelte b/server/dashboard/src/lib/components/ui/select/select-portal.svelte
new file mode 100644
index 0000000..424bcdd
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/select/select-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+
+	let { ...restProps }: SelectPrimitive.PortalProps = $props();
+</script>
+
+<SelectPrimitive.Portal {...restProps} />
diff --git a/server/dashboard/src/lib/components/ui/select/select-scroll-down-button.svelte b/server/dashboard/src/lib/components/ui/select/select-scroll-down-button.svelte
new file mode 100644
index 0000000..3629205
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/select/select-scroll-down-button.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollDownButton
+	bind:ref
+	data-slot="select-scroll-down-button"
+	class={cn("flex cursor-default items-center justify-center py-1", className)}
+	{...restProps}
+>
+	<ChevronDownIcon class="size-4" />
+</SelectPrimitive.ScrollDownButton>
diff --git a/server/dashboard/src/lib/components/ui/select/select-scroll-up-button.svelte b/server/dashboard/src/lib/components/ui/select/select-scroll-up-button.svelte
new file mode 100644
index 0000000..1aa2300
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/select/select-scroll-up-button.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import ChevronUpIcon from "@lucide/svelte/icons/chevron-up";
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollUpButton
+	bind:ref
+	data-slot="select-scroll-up-button"
+	class={cn("flex cursor-default items-center justify-center py-1", className)}
+	{...restProps}
+>
+	<ChevronUpIcon class="size-4" />
+</SelectPrimitive.ScrollUpButton>
diff --git a/server/dashboard/src/lib/components/ui/select/select-separator.svelte b/server/dashboard/src/lib/components/ui/select/select-separator.svelte
new file mode 100644
index 0000000..0eac3eb
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/select/select-separator.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { Separator as SeparatorPrimitive } from "bits-ui";
+	import { Separator } from "$lib/components/ui/separator/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<Separator
+	bind:ref
+	data-slot="select-separator"
+	class={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+	{...restProps}
+/>
diff --git a/server/dashboard/src/lib/components/ui/select/select-trigger.svelte b/server/dashboard/src/lib/components/ui/select/select-trigger.svelte
new file mode 100644
index 0000000..dbb81df
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/select/select-trigger.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		size = "default",
+		...restProps
+	}: WithoutChild<SelectPrimitive.TriggerProps> & {
+		size?: "sm" | "default";
+	} = $props();
+</script>
+
+<SelectPrimitive.Trigger
+	bind:ref
+	data-slot="select-trigger"
+	data-size={size}
+	class={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 select-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
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronDownIcon class="size-4 opacity-50" />
+</SelectPrimitive.Trigger>
diff --git a/server/dashboard/src/lib/components/ui/select/select.svelte b/server/dashboard/src/lib/components/ui/select/select.svelte
new file mode 100644
index 0000000..05eb663
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/select/select.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+
+	let {
+		open = $bindable(false),
+		value = $bindable(),
+		...restProps
+	}: SelectPrimitive.RootProps = $props();
+</script>
+
+<SelectPrimitive.Root bind:open bind:value={value as never} {...restProps} />
diff --git a/server/dashboard/src/lib/components/ui/separator/index.ts b/server/dashboard/src/lib/components/ui/separator/index.ts
new file mode 100644
index 0000000..82442d2
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/separator/index.ts
@@ -0,0 +1,7 @@
+import Root from "./separator.svelte";
+
+export {
+	Root,
+	//
+	Root as Separator,
+};
diff --git a/server/dashboard/src/lib/components/ui/separator/separator.svelte b/server/dashboard/src/lib/components/ui/separator/separator.svelte
new file mode 100644
index 0000000..f40999f
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/separator/separator.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Separator as SeparatorPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		"data-slot": dataSlot = "separator",
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<SeparatorPrimitive.Root
+	bind:ref
+	data-slot={dataSlot}
+	class={cn(
+		"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:min-h-full data-[orientation=vertical]:w-px",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/server/dashboard/src/lib/components/ui/sheet/index.ts b/server/dashboard/src/lib/components/ui/sheet/index.ts
new file mode 100644
index 0000000..28d7da1
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/sheet/index.ts
@@ -0,0 +1,34 @@
+import Root from "./sheet.svelte";
+import Portal from "./sheet-portal.svelte";
+import Trigger from "./sheet-trigger.svelte";
+import Close from "./sheet-close.svelte";
+import Overlay from "./sheet-overlay.svelte";
+import Content from "./sheet-content.svelte";
+import Header from "./sheet-header.svelte";
+import Footer from "./sheet-footer.svelte";
+import Title from "./sheet-title.svelte";
+import Description from "./sheet-description.svelte";
+
+export {
+	Root,
+	Close,
+	Trigger,
+	Portal,
+	Overlay,
+	Content,
+	Header,
+	Footer,
+	Title,
+	Description,
+	//
+	Root as Sheet,
+	Close as SheetClose,
+	Trigger as SheetTrigger,
+	Portal as SheetPortal,
+	Overlay as SheetOverlay,
+	Content as SheetContent,
+	Header as SheetHeader,
+	Footer as SheetFooter,
+	Title as SheetTitle,
+	Description as SheetDescription,
+};
diff --git a/server/dashboard/src/lib/components/ui/sheet/sheet-close.svelte b/server/dashboard/src/lib/components/ui/sheet/sheet-close.svelte
new file mode 100644
index 0000000..ae382c1
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/sheet/sheet-close.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: SheetPrimitive.CloseProps = $props();
+</script>
+
+<SheetPrimitive.Close bind:ref data-slot="sheet-close" {...restProps} />
diff --git a/server/dashboard/src/lib/components/ui/sheet/sheet-content.svelte b/server/dashboard/src/lib/components/ui/sheet/sheet-content.svelte
new file mode 100644
index 0000000..065fe04
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/sheet/sheet-content.svelte
@@ -0,0 +1,60 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+	export const sheetVariants = tv({
+		base: "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",
+		variants: {
+			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",
+				bottom: "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+				left: "data-[state=closed]:slide-out-to-start data-[state=open]:slide-in-from-start inset-y-0 start-0 h-full w-3/4 border-e sm:max-w-sm",
+				right: "data-[state=closed]:slide-out-to-end data-[state=open]:slide-in-from-end inset-y-0 end-0 h-full w-3/4 border-s sm:max-w-sm",
+			},
+		},
+		defaultVariants: {
+			side: "right",
+		},
+	});
+
+	export type Side = VariantProps<typeof sheetVariants>["side"];
+</script>
+
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import XIcon from "@lucide/svelte/icons/x";
+	import type { Snippet } from "svelte";
+	import SheetPortal from "./sheet-portal.svelte";
+	import SheetOverlay from "./sheet-overlay.svelte";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		side = "right",
+		portalProps,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SheetPortal>>;
+		side?: Side;
+		children: Snippet;
+	} = $props();
+</script>
+
+<SheetPortal {...portalProps}>
+	<SheetOverlay />
+	<SheetPrimitive.Content
+		bind:ref
+		data-slot="sheet-content"
+		class={cn(sheetVariants({ side }), className)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<SheetPrimitive.Close
+			class="ring-offset-background focus-visible:ring-ring absolute end-4 top-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none"
+		>
+			<XIcon class="size-4" />
+			<span class="sr-only">Close</span>
+		</SheetPrimitive.Close>
+	</SheetPrimitive.Content>
+</SheetPortal>
diff --git a/server/dashboard/src/lib/components/ui/sheet/sheet-description.svelte b/server/dashboard/src/lib/components/ui/sheet/sheet-description.svelte
new file mode 100644
index 0000000..333b17a
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/sheet/sheet-description.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SheetPrimitive.DescriptionProps = $props();
+</script>
+
+<SheetPrimitive.Description
+	bind:ref
+	data-slot="sheet-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>
diff --git a/server/dashboard/src/lib/components/ui/sheet/sheet-footer.svelte b/server/dashboard/src/lib/components/ui/sheet/sheet-footer.svelte
new file mode 100644
index 0000000..dd9ed84
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/sheet/sheet-footer.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sheet-footer"
+	class={cn("mt-auto flex flex-col gap-2 p-4", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/server/dashboard/src/lib/components/ui/sheet/sheet-header.svelte b/server/dashboard/src/lib/components/ui/sheet/sheet-header.svelte
new file mode 100644
index 0000000..757a6a5
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/sheet/sheet-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sheet-header"
+	class={cn("flex flex-col gap-1.5 p-4", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/server/dashboard/src/lib/components/ui/sheet/sheet-overlay.svelte b/server/dashboard/src/lib/components/ui/sheet/sheet-overlay.svelte
new file mode 100644
index 0000000..345e197
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/sheet/sheet-overlay.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SheetPrimitive.OverlayProps = $props();
+</script>
+
+<SheetPrimitive.Overlay
+	bind:ref
+	data-slot="sheet-overlay"
+	class={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
+	)}
+	{...restProps}
+/>
diff --git a/server/dashboard/src/lib/components/ui/sheet/sheet-portal.svelte b/server/dashboard/src/lib/components/ui/sheet/sheet-portal.svelte
new file mode 100644
index 0000000..f3085a3
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/sheet/sheet-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+
+	let { ...restProps }: SheetPrimitive.PortalProps = $props();
+</script>
+
+<SheetPrimitive.Portal {...restProps} />
diff --git a/server/dashboard/src/lib/components/ui/sheet/sheet-title.svelte b/server/dashboard/src/lib/components/ui/sheet/sheet-title.svelte
new file mode 100644
index 0000000..9fda327
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/sheet/sheet-title.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SheetPrimitive.TitleProps = $props();
+</script>
+
+<SheetPrimitive.Title
+	bind:ref
+	data-slot="sheet-title"
+	class={cn("text-foreground font-semibold", className)}
+	{...restProps}
+/>
diff --git a/server/dashboard/src/lib/components/ui/sheet/sheet-trigger.svelte b/server/dashboard/src/lib/components/ui/sheet/sheet-trigger.svelte
new file mode 100644
index 0000000..e266975
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/sheet/sheet-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: SheetPrimitive.TriggerProps = $props();
+</script>
+
+<SheetPrimitive.Trigger bind:ref data-slot="sheet-trigger" {...restProps} />
diff --git a/server/dashboard/src/lib/components/ui/sheet/sheet.svelte b/server/dashboard/src/lib/components/ui/sheet/sheet.svelte
new file mode 100644
index 0000000..5bf9783
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/sheet/sheet.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: SheetPrimitive.RootProps = $props();
+</script>
+
+<SheetPrimitive.Root bind:open {...restProps} />
diff --git a/server/dashboard/src/lib/components/ui/sidebar/constants.ts b/server/dashboard/src/lib/components/ui/sidebar/constants.ts
new file mode 100644
index 0000000..4de4435
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/sidebar/constants.ts
@@ -0,0 +1,6 @@
+export const SIDEBAR_COOKIE_NAME = "sidebar:state";
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+export const SIDEBAR_WIDTH = "16rem";
+export const SIDEBAR_WIDTH_MOBILE = "18rem";
+export const SIDEBAR_WIDTH_ICON = "3rem";
+export const SIDEBAR_KEYBOARD_SHORTCUT = "b";
diff --git a/server/dashboard/src/lib/components/ui/sidebar/context.svelte.ts b/server/dashboard/src/lib/components/ui/sidebar/context.svelte.ts
new file mode 100644
index 0000000..15248ad
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/sidebar/context.svelte.ts
@@ -0,0 +1,81 @@
+import { IsMobile } from "$lib/hooks/is-mobile.svelte.js";
+import { getContext, setContext } from "svelte";
+import { SIDEBAR_KEYBOARD_SHORTCUT } from "./constants.js";
+
+type Getter<T> = () => T;
+
+export type SidebarStateProps = {
+	/**
+	 * A getter function that returns the current open state of the sidebar.
+	 * We use a getter function here to support `bind:open` on the `Sidebar.Provider`
+	 * component.
+	 */
+	open: Getter<boolean>;
+
+	/**
+	 * A function that sets the open state of the sidebar. To support `bind:open`, we need
+	 * a source of truth for changing the open state to ensure it will be synced throughout
+	 * the sub-components and any `bind:` references.
+	 */
+	setOpen: (open: boolean) => void;
+};
+
+class SidebarState {
+	readonly props: SidebarStateProps;
+	open = $derived.by(() => this.props.open());
+	openMobile = $state(false);
+	setOpen: SidebarStateProps["setOpen"];
+	#isMobile: IsMobile;
+	state = $derived.by(() => (this.open ? "expanded" : "collapsed"));
+
+	constructor(props: SidebarStateProps) {
+		this.setOpen = props.setOpen;
+		this.#isMobile = new IsMobile();
+		this.props = props;
+	}
+
+	// Convenience getter for checking if the sidebar is mobile
+	// without this, we would need to use `sidebar.isMobile.current` everywhere
+	get isMobile() {
+		return this.#isMobile.current;
+	}
+
+	// Event handler to apply to the `<svelte:window>`
+	handleShortcutKeydown = (e: KeyboardEvent) => {
+		if (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey)) {
+			e.preventDefault();
+			this.toggle();
+		}
+	};
+
+	setOpenMobile = (value: boolean) => {
+		this.openMobile = value;
+	};
+
+	toggle = () => {
+		return this.#isMobile.current
+			? (this.openMobile = !this.openMobile)
+			: this.setOpen(!this.open);
+	};
+}
+
+const SYMBOL_KEY = "scn-sidebar";
+
+/**
+ * Instantiates a new `SidebarState` instance and sets it in the context.
+ *
+ * @param props The constructor props for the `SidebarState` class.
+ * @returns  The `SidebarState` instance.
+ */
+export function setSidebar(props: SidebarStateProps): SidebarState {
+	return setContext(Symbol.for(SYMBOL_KEY), new SidebarState(props));
+}
+
+/**
+ * Retrieves the `SidebarState` instance from the context. This is a class instance,
+ * so you cannot destructure it.
+ * @returns The `SidebarState` instance.
+ */
+export function useSidebar(): SidebarState {
+	return getContext(Symbol.for(SYMBOL_KEY));
+}
diff --git a/server/dashboard/src/lib/components/ui/sidebar/index.ts b/server/dashboard/src/lib/components/ui/sidebar/index.ts
new file mode 100644
index 0000000..318a341
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/sidebar/index.ts
@@ -0,0 +1,75 @@
+import { useSidebar } from "./context.svelte.js";
+import Content from "./sidebar-content.svelte";
+import Footer from "./sidebar-footer.svelte";
+import GroupAction from "./sidebar-group-action.svelte";
+import GroupContent from "./sidebar-group-content.svelte";
+import GroupLabel from "./sidebar-group-label.svelte";
+import Group from "./sidebar-group.svelte";
+import Header from "./sidebar-header.svelte";
+import Input from "./sidebar-input.svelte";
+import Inset from "./sidebar-inset.svelte";
+import MenuAction from "./sidebar-menu-action.svelte";
+import MenuBadge from "./sidebar-menu-badge.svelte";
+import MenuButton from "./sidebar-menu-button.svelte";
+import MenuItem from "./sidebar-menu-item.svelte";
+import MenuSkeleton from "./sidebar-menu-skeleton.svelte";
+import MenuSubButton from "./sidebar-menu-sub-button.svelte";
+import MenuSubItem from "./sidebar-menu-sub-item.svelte";
+import MenuSub from "./sidebar-menu-sub.svelte";
+import Menu from "./sidebar-menu.svelte";
+import Provider from "./sidebar-provider.svelte";
+import Rail from "./sidebar-rail.svelte";
+import Separator from "./sidebar-separator.svelte";
+import Trigger from "./sidebar-trigger.svelte";
+import Root from "./sidebar.svelte";
+
+export {
+	Content,
+	Footer,
+	Group,
+	GroupAction,
+	GroupContent,
+	GroupLabel,
+	Header,
+	Input,
+	Inset,
+	Menu,
+	MenuAction,
+	MenuBadge,
+	MenuButton,
+	MenuItem,
+	MenuSkeleton,
+	MenuSub,
+	MenuSubButton,
+	MenuSubItem,
+	Provider,
+	Rail,
+	Root,
+	Separator,
+	//
+	Root as Sidebar,
+	Content as SidebarContent,
+	Footer as SidebarFooter,
+	Group as SidebarGroup,
+	GroupAction as SidebarGroupAction,
+	GroupContent as SidebarGroupContent,
+	GroupLabel as SidebarGroupLabel,
+	Header as SidebarHeader,
+	Input as SidebarInput,
+	Inset as SidebarInset,
+	Menu as SidebarMenu,
+	MenuAction as SidebarMenuAction,
+	MenuBadge as SidebarMenuBadge,
+	MenuButton as SidebarMenuButton,
+	MenuItem as SidebarMenuItem,
+	MenuSkeleton as SidebarMenuSkeleton,
+	MenuSub as SidebarMenuSub,
+	MenuSubButton as SidebarMenuSubButton,
+	MenuSubItem as SidebarMenuSubItem,
+	Provider as SidebarProvider,
+	Rail as SidebarRail,
+	Separator as SidebarSeparator,
+	Trigger as SidebarTrigger,
+	Trigger,
+	useSidebar,
+};
diff --git a/server/dashboard/src/lib/components/ui/sidebar/sidebar-content.svelte b/server/dashboard/src/lib/components/ui/sidebar/sidebar-content.svelte
new file mode 100644
index 0000000..f121800
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/sidebar/sidebar-content.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-content"
+	data-sidebar="content"
+	class={cn(
+		"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/server/dashboard/src/lib/components/ui/sidebar/sidebar-footer.svelte b/server/dashboard/src/lib/components/ui/sidebar/sidebar-footer.svelte
new file mode 100644
index 0000000..6259cb9
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/sidebar/sidebar-footer.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-footer"
+	data-sidebar="footer"
+	class={cn("flex flex-col gap-2 p-2", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/server/dashboard/src/lib/components/ui/sidebar/sidebar-group-action.svelte b/server/dashboard/src/lib/components/ui/sidebar/sidebar-group-action.svelte
new file mode 100644
index 0000000..a76dfe1
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/sidebar/sidebar-group-action.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		child,
+		...restProps
+	}: WithElementRef<HTMLButtonAttributes> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+	} = $props();
+
+	const mergedProps = $derived({
+		class: cn(
+			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute end-3 top-3.5 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
+		),
+		"data-slot": "sidebar-group-action",
+		"data-sidebar": "group-action",
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button bind:this={ref} {...mergedProps}>
+		{@render children?.()}
+	</button>
+{/if}
diff --git a/server/dashboard/src/lib/components/ui/sidebar/sidebar-group-content.svelte b/server/dashboard/src/lib/components/ui/sidebar/sidebar-group-content.svelte
new file mode 100644
index 0000000..415255f
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/sidebar/sidebar-group-content.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-group-content"
+	data-sidebar="group-content"
+	class={cn("w-full text-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/server/dashboard/src/lib/components/ui/sidebar/sidebar-group-label.svelte b/server/dashboard/src/lib/components/ui/sidebar/sidebar-group-label.svelte
new file mode 100644
index 0000000..b2e72b6
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/sidebar/sidebar-group-label.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		children,
+		child,
+		class: className,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+	} = $props();
+
+	const mergedProps = $derived({
+		class: 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
+		),
+		"data-slot": "sidebar-group-label",
+		"data-sidebar": "group-label",
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div bind:this={ref} {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}
diff --git a/server/dashboard/src/lib/components/ui/sidebar/sidebar-group.svelte b/server/dashboard/src/lib/components/ui/sidebar/sidebar-group.svelte
new file mode 100644
index 0000000..ec18a69
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/sidebar/sidebar-group.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-group"
+	data-sidebar="group"
+	class={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/server/dashboard/src/lib/components/ui/sidebar/sidebar-header.svelte b/server/dashboard/src/lib/components/ui/sidebar/sidebar-header.svelte
new file mode 100644
index 0000000..a1b2db1
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/sidebar/sidebar-header.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-header"
+	data-sidebar="header"
+	class={cn("flex flex-col gap-2 p-2", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/server/dashboard/src/lib/components/ui/sidebar/sidebar-input.svelte b/server/dashboard/src/lib/components/ui/sidebar/sidebar-input.svelte
new file mode 100644
index 0000000..19b3666
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/sidebar/sidebar-input.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { ComponentProps } from "svelte";
+	import { Input } from "$lib/components/ui/input/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(""),
+		class: className,
+		...restProps
+	}: ComponentProps<typeof Input> = $props();
+</script>
+
+<Input
+	bind:ref
+	bind:value
+	data-slot="sidebar-input"
+	data-sidebar="input"
+	class={cn("bg-background h-8 w-full shadow-none", className)}
+	{...restProps}
+/>
diff --git a/server/dashboard/src/lib/components/ui/sidebar/sidebar-inset.svelte b/server/dashboard/src/lib/components/ui/sidebar/sidebar-inset.svelte
new file mode 100644
index 0000000..7d6d459
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/sidebar/sidebar-inset.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<main
+	bind:this={ref}
+	data-slot="sidebar-inset"
+	class={cn(
+		"bg-background relative flex w-full flex-1 flex-col",
+		"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</main>
diff --git a/server/dashboard/src/lib/components/ui/sidebar/sidebar-menu-action.svelte b/server/dashboard/src/lib/components/ui/sidebar/sidebar-menu-action.svelte
new file mode 100644
index 0000000..d3fe295
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/sidebar/sidebar-menu-action.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		showOnHover = false,
+		children,
+		child,
+		...restProps
+	}: WithElementRef<HTMLButtonAttributes> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+		showOnHover?: boolean;
+	} = $props();
+
+	const mergedProps = $derived({
+		class: 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 end-1 top-1.5 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
+		),
+		"data-slot": "sidebar-menu-action",
+		"data-sidebar": "menu-action",
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button bind:this={ref} {...mergedProps}>
+		{@render children?.()}
+	</button>
+{/if}
diff --git a/server/dashboard/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte b/server/dashboard/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte
new file mode 100644
index 0000000..e8ecdb4
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-menu-badge"
+	data-sidebar="menu-badge"
+	class={cn(
+		"text-sidebar-foreground pointer-events-none absolute end-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
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/server/dashboard/src/lib/components/ui/sidebar/sidebar-menu-button.svelte b/server/dashboard/src/lib/components/ui/sidebar/sidebar-menu-button.svelte
new file mode 100644
index 0000000..0acd1ec
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/sidebar/sidebar-menu-button.svelte
@@ -0,0 +1,103 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const sidebarMenuButtonVariants = tv({
+		base: "peer/menu-button ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-start text-sm outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pe-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium [&>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 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_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",
+		},
+	});
+
+	export type SidebarMenuButtonVariant = VariantProps<
+		typeof sidebarMenuButtonVariants
+	>["variant"];
+	export type SidebarMenuButtonSize = VariantProps<typeof sidebarMenuButtonVariants>["size"];
+</script>
+
+<script lang="ts">
+	import * as Tooltip from "$lib/components/ui/tooltip/index.js";
+	import { cn, type WithElementRef, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import { mergeProps } from "bits-ui";
+	import type { ComponentProps, Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { useSidebar } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		child,
+		variant = "default",
+		size = "default",
+		isActive = false,
+		tooltipContent,
+		tooltipContentProps,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
+		isActive?: boolean;
+		variant?: SidebarMenuButtonVariant;
+		size?: SidebarMenuButtonSize;
+		tooltipContent?: Snippet | string;
+		tooltipContentProps?: WithoutChildrenOrChild<ComponentProps<typeof Tooltip.Content>>;
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+	} = $props();
+
+	const sidebar = useSidebar();
+
+	const buttonProps = $derived({
+		class: cn(sidebarMenuButtonVariants({ variant, size }), className),
+		"data-slot": "sidebar-menu-button",
+		"data-sidebar": "menu-button",
+		"data-size": size,
+		"data-active": isActive,
+		...restProps,
+	});
+</script>
+
+{#snippet Button({ props }: { props?: Record<string, unknown> })}
+	{@const mergedProps = mergeProps(buttonProps, props)}
+	{#if child}
+		{@render child({ props: mergedProps })}
+	{:else}
+		<button bind:this={ref} {...mergedProps}>
+			{@render children?.()}
+		</button>
+	{/if}
+{/snippet}
+
+{#if !tooltipContent}
+	{@render Button({})}
+{:else}
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			{#snippet child({ props })}
+				{@render Button({ props })}
+			{/snippet}
+		</Tooltip.Trigger>
+		<Tooltip.Content
+			side="right"
+			align="center"
+			hidden={sidebar.state !== "collapsed" || sidebar.isMobile}
+			{...tooltipContentProps}
+		>
+			{#if typeof tooltipContent === "string"}
+				{tooltipContent}
+			{:else if tooltipContent}
+				{@render tooltipContent()}
+			{/if}
+		</Tooltip.Content>
+	</Tooltip.Root>
+{/if}
diff --git a/server/dashboard/src/lib/components/ui/sidebar/sidebar-menu-item.svelte b/server/dashboard/src/lib/components/ui/sidebar/sidebar-menu-item.svelte
new file mode 100644
index 0000000..4db4453
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/sidebar/sidebar-menu-item.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement> = $props();
+</script>
+
+<li
+	bind:this={ref}
+	data-slot="sidebar-menu-item"
+	data-sidebar="menu-item"
+	class={cn("group/menu-item relative", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</li>
diff --git a/server/dashboard/src/lib/components/ui/sidebar/sidebar-menu-skeleton.svelte b/server/dashboard/src/lib/components/ui/sidebar/sidebar-menu-skeleton.svelte
new file mode 100644
index 0000000..68604e2
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/sidebar/sidebar-menu-skeleton.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import { Skeleton } from "$lib/components/ui/skeleton/index.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		showIcon = false,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> & {
+		showIcon?: boolean;
+	} = $props();
+
+	// Random width between 50% and 90%
+	const width = `${Math.floor(Math.random() * 40) + 50}%`;
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-menu-skeleton"
+	data-sidebar="menu-skeleton"
+	class={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+	{...restProps}
+>
+	{#if showIcon}
+		<Skeleton class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
+	{/if}
+	<Skeleton
+		class="h-4 max-w-(--skeleton-width) flex-1"
+		data-sidebar="menu-skeleton-text"
+		style="--skeleton-width: {width};"
+	/>
+	{@render children?.()}
+</div>
diff --git a/server/dashboard/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte b/server/dashboard/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte
new file mode 100644
index 0000000..c8cd4ff
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		children,
+		child,
+		class: className,
+		size = "md",
+		isActive = false,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+		size?: "sm" | "md";
+		isActive?: boolean;
+	} = $props();
+
+	const mergedProps = $derived({
+		class: 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
+		),
+		"data-slot": "sidebar-menu-sub-button",
+		"data-sidebar": "menu-sub-button",
+		"data-size": size,
+		"data-active": isActive,
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<a bind:this={ref} {...mergedProps}>
+		{@render children?.()}
+	</a>
+{/if}
diff --git a/server/dashboard/src/lib/components/ui/sidebar/sidebar-menu-sub-item.svelte b/server/dashboard/src/lib/components/ui/sidebar/sidebar-menu-sub-item.svelte
new file mode 100644
index 0000000..681d0f1
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/sidebar/sidebar-menu-sub-item.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		children,
+		class: className,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLLIElement>> = $props();
+</script>
+
+<li
+	bind:this={ref}
+	data-slot="sidebar-menu-sub-item"
+	data-sidebar="menu-sub-item"
+	class={cn("group/menu-sub-item relative", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</li>
diff --git a/server/dashboard/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte b/server/dashboard/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte
new file mode 100644
index 0000000..76bd1d9
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLUListElement>> = $props();
+</script>
+
+<ul
+	bind:this={ref}
+	data-slot="sidebar-menu-sub"
+	data-sidebar="menu-sub"
+	class={cn(
+		"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-s px-2.5 py-0.5",
+		"group-data-[collapsible=icon]:hidden",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</ul>
diff --git a/server/dashboard/src/lib/components/ui/sidebar/sidebar-menu.svelte b/server/dashboard/src/lib/components/ui/sidebar/sidebar-menu.svelte
new file mode 100644
index 0000000..946ccce
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/sidebar/sidebar-menu.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLUListElement>, HTMLUListElement> = $props();
+</script>
+
+<ul
+	bind:this={ref}
+	data-slot="sidebar-menu"
+	data-sidebar="menu"
+	class={cn("flex w-full min-w-0 flex-col gap-1", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</ul>
diff --git a/server/dashboard/src/lib/components/ui/sidebar/sidebar-provider.svelte b/server/dashboard/src/lib/components/ui/sidebar/sidebar-provider.svelte
new file mode 100644
index 0000000..5b0d0aa
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/sidebar/sidebar-provider.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+	import * as Tooltip from "$lib/components/ui/tooltip/index.js";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import {
+		SIDEBAR_COOKIE_MAX_AGE,
+		SIDEBAR_COOKIE_NAME,
+		SIDEBAR_WIDTH,
+		SIDEBAR_WIDTH_ICON,
+	} from "./constants.js";
+	import { setSidebar } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		open = $bindable(true),
+		onOpenChange = () => {},
+		class: className,
+		style,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		open?: boolean;
+		onOpenChange?: (open: boolean) => void;
+	} = $props();
+
+	const sidebar = setSidebar({
+		open: () => open,
+		setOpen: (value: boolean) => {
+			open = value;
+			onOpenChange(value);
+
+			// This sets the cookie to keep the sidebar state.
+			document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+		},
+	});
+</script>
+
+<svelte:window onkeydown={sidebar.handleShortcutKeydown} />
+
+<Tooltip.Provider delayDuration={0}>
+	<div
+		data-slot="sidebar-wrapper"
+		style="--sidebar-width: {SIDEBAR_WIDTH}; --sidebar-width-icon: {SIDEBAR_WIDTH_ICON}; {style}"
+		class={cn(
+			"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+			className
+		)}
+		bind:this={ref}
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
+</Tooltip.Provider>
diff --git a/server/dashboard/src/lib/components/ui/sidebar/sidebar-rail.svelte b/server/dashboard/src/lib/components/ui/sidebar/sidebar-rail.svelte
new file mode 100644
index 0000000..704d54f
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/sidebar/sidebar-rail.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { useSidebar } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> = $props();
+
+	const sidebar = useSidebar();
+</script>
+
+<button
+	bind:this={ref}
+	data-sidebar="rail"
+	data-slot="sidebar-rail"
+	aria-label="Toggle Sidebar"
+	tabIndex={-1}
+	onclick={sidebar.toggle}
+	title="Toggle Sidebar"
+	class={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]:-end-4 group-data-[side=right]:start-0 after:absolute after:inset-y-0 after:start-[calc(1/2*100%-1px)] 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:start-full",
+		"[[data-side=left][data-collapsible=offcanvas]_&]:-end-2",
+		"[[data-side=right][data-collapsible=offcanvas]_&]:-start-2",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</button>
diff --git a/server/dashboard/src/lib/components/ui/sidebar/sidebar-separator.svelte b/server/dashboard/src/lib/components/ui/sidebar/sidebar-separator.svelte
new file mode 100644
index 0000000..5a7deda
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/sidebar/sidebar-separator.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Separator } from "$lib/components/ui/separator/index.js";
+	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: ComponentProps<typeof Separator> = $props();
+</script>
+
+<Separator
+	bind:ref
+	data-slot="sidebar-separator"
+	data-sidebar="separator"
+	class={cn("bg-sidebar-border", className)}
+	{...restProps}
+/>
diff --git a/server/dashboard/src/lib/components/ui/sidebar/sidebar-trigger.svelte b/server/dashboard/src/lib/components/ui/sidebar/sidebar-trigger.svelte
new file mode 100644
index 0000000..1825182
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/sidebar/sidebar-trigger.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+	import PanelLeftIcon from "@lucide/svelte/icons/panel-left";
+	import type { ComponentProps } from "svelte";
+	import { useSidebar } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		onclick,
+		...restProps
+	}: ComponentProps<typeof Button> & {
+		onclick?: (e: MouseEvent) => void;
+	} = $props();
+
+	const sidebar = useSidebar();
+</script>
+
+<Button
+	data-sidebar="trigger"
+	data-slot="sidebar-trigger"
+	variant="ghost"
+	size="icon"
+	class={cn("size-7", className)}
+	type="button"
+	onclick={(e) => {
+		onclick?.(e);
+		sidebar.toggle();
+	}}
+	{...restProps}
+>
+	<PanelLeftIcon />
+	<span class="sr-only">Toggle Sidebar</span>
+</Button>
diff --git a/server/dashboard/src/lib/components/ui/sidebar/sidebar.svelte b/server/dashboard/src/lib/components/ui/sidebar/sidebar.svelte
new file mode 100644
index 0000000..bac55d8
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/sidebar/sidebar.svelte
@@ -0,0 +1,104 @@
+<script lang="ts">
+	import * as Sheet from "$lib/components/ui/sheet/index.js";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { SIDEBAR_WIDTH_MOBILE } from "./constants.js";
+	import { useSidebar } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		side = "left",
+		variant = "sidebar",
+		collapsible = "offcanvas",
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		side?: "left" | "right";
+		variant?: "sidebar" | "floating" | "inset";
+		collapsible?: "offcanvas" | "icon" | "none";
+	} = $props();
+
+	const sidebar = useSidebar();
+</script>
+
+{#if collapsible === "none"}
+	<div
+		class={cn(
+			"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+			className
+		)}
+		bind:this={ref}
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
+{:else if sidebar.isMobile}
+	<Sheet.Root
+		bind:open={() => sidebar.openMobile, (v) => sidebar.setOpenMobile(v)}
+		{...restProps}
+	>
+		<Sheet.Content
+			data-sidebar="sidebar"
+			data-slot="sidebar"
+			data-mobile="true"
+			class="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+			style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"
+			{side}
+		>
+			<Sheet.Header class="sr-only">
+				<Sheet.Title>Sidebar</Sheet.Title>
+				<Sheet.Description>Displays the mobile sidebar.</Sheet.Description>
+			</Sheet.Header>
+			<div class="flex h-full w-full flex-col">
+				{@render children?.()}
+			</div>
+		</Sheet.Content>
+	</Sheet.Root>
+{:else}
+	<div
+		bind:this={ref}
+		class="text-sidebar-foreground group peer hidden md:block"
+		data-state={sidebar.state}
+		data-collapsible={sidebar.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"
+			class={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))+2px)]"
+					: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+			)}
+		></div>
+		<div
+			data-slot="sidebar-container"
+			class={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"
+					? "start-0 group-data-[collapsible=offcanvas]:start-[calc(var(--sidebar-width)*-1)]"
+					: "end-0 group-data-[collapsible=offcanvas]:end-[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-e group-data-[side=right]:border-s",
+				className
+			)}
+			{...restProps}
+		>
+			<div
+				data-sidebar="sidebar"
+				data-slot="sidebar-inner"
+				class="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"
+			>
+				{@render children?.()}
+			</div>
+		</div>
+	</div>
+{/if}
diff --git a/server/dashboard/src/lib/components/ui/skeleton/index.ts b/server/dashboard/src/lib/components/ui/skeleton/index.ts
new file mode 100644
index 0000000..186db21
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/skeleton/index.ts
@@ -0,0 +1,7 @@
+import Root from "./skeleton.svelte";
+
+export {
+	Root,
+	//
+	Root as Skeleton,
+};
diff --git a/server/dashboard/src/lib/components/ui/skeleton/skeleton.svelte b/server/dashboard/src/lib/components/ui/skeleton/skeleton.svelte
new file mode 100644
index 0000000..c7e3d26
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/skeleton/skeleton.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="skeleton"
+	class={cn("bg-accent animate-pulse rounded-md", className)}
+	{...restProps}
+></div>
diff --git a/server/dashboard/src/lib/components/ui/table/index.ts b/server/dashboard/src/lib/components/ui/table/index.ts
new file mode 100644
index 0000000..14695c8
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/table/index.ts
@@ -0,0 +1,28 @@
+import Root from "./table.svelte";
+import Body from "./table-body.svelte";
+import Caption from "./table-caption.svelte";
+import Cell from "./table-cell.svelte";
+import Footer from "./table-footer.svelte";
+import Head from "./table-head.svelte";
+import Header from "./table-header.svelte";
+import Row from "./table-row.svelte";
+
+export {
+	Root,
+	Body,
+	Caption,
+	Cell,
+	Footer,
+	Head,
+	Header,
+	Row,
+	//
+	Root as Table,
+	Body as TableBody,
+	Caption as TableCaption,
+	Cell as TableCell,
+	Footer as TableFooter,
+	Head as TableHead,
+	Header as TableHeader,
+	Row as TableRow,
+};
diff --git a/server/dashboard/src/lib/components/ui/table/table-body.svelte b/server/dashboard/src/lib/components/ui/table/table-body.svelte
new file mode 100644
index 0000000..29e9687
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/table/table-body.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<tbody
+	bind:this={ref}
+	data-slot="table-body"
+	class={cn("[&_tr:last-child]:border-0", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</tbody>
diff --git a/server/dashboard/src/lib/components/ui/table/table-caption.svelte b/server/dashboard/src/lib/components/ui/table/table-caption.svelte
new file mode 100644
index 0000000..4696cff
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/table/table-caption.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<caption
+	bind:this={ref}
+	data-slot="table-caption"
+	class={cn("text-muted-foreground mt-4 text-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</caption>
diff --git a/server/dashboard/src/lib/components/ui/table/table-cell.svelte b/server/dashboard/src/lib/components/ui/table/table-cell.svelte
new file mode 100644
index 0000000..2c0c26a
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/table/table-cell.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLTdAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLTdAttributes> = $props();
+</script>
+
+<td
+	bind:this={ref}
+	data-slot="table-cell"
+	class={cn(
+		"bg-clip-padding p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</td>
diff --git a/server/dashboard/src/lib/components/ui/table/table-footer.svelte b/server/dashboard/src/lib/components/ui/table/table-footer.svelte
new file mode 100644
index 0000000..b9b14eb
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/table/table-footer.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<tfoot
+	bind:this={ref}
+	data-slot="table-footer"
+	class={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</tfoot>
diff --git a/server/dashboard/src/lib/components/ui/table/table-head.svelte b/server/dashboard/src/lib/components/ui/table/table-head.svelte
new file mode 100644
index 0000000..b67a6f9
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/table/table-head.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLThAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLThAttributes> = $props();
+</script>
+
+<th
+	bind:this={ref}
+	data-slot="table-head"
+	class={cn(
+		"text-foreground h-10 bg-clip-padding px-2 text-start align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pe-0",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</th>
diff --git a/server/dashboard/src/lib/components/ui/table/table-header.svelte b/server/dashboard/src/lib/components/ui/table/table-header.svelte
new file mode 100644
index 0000000..f47d259
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/table/table-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<thead
+	bind:this={ref}
+	data-slot="table-header"
+	class={cn("[&_tr]:border-b", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</thead>
diff --git a/server/dashboard/src/lib/components/ui/table/table-row.svelte b/server/dashboard/src/lib/components/ui/table/table-row.svelte
new file mode 100644
index 0000000..0df769e
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/table/table-row.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableRowElement>> = $props();
+</script>
+
+<tr
+	bind:this={ref}
+	data-slot="table-row"
+	class={cn(
+		"hover:[&,&>svelte-css-wrapper]:[&>th,td]:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</tr>
diff --git a/server/dashboard/src/lib/components/ui/table/table.svelte b/server/dashboard/src/lib/components/ui/table/table.svelte
new file mode 100644
index 0000000..a334956
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/table/table.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { HTMLTableAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLTableAttributes> = $props();
+</script>
+
+<div data-slot="table-container" class="relative w-full overflow-x-auto">
+	<table
+		bind:this={ref}
+		data-slot="table"
+		class={cn("w-full caption-bottom text-sm", className)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</table>
+</div>
diff --git a/server/dashboard/src/lib/components/ui/textarea/index.ts b/server/dashboard/src/lib/components/ui/textarea/index.ts
new file mode 100644
index 0000000..ace797a
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/textarea/index.ts
@@ -0,0 +1,7 @@
+import Root from "./textarea.svelte";
+
+export {
+	Root,
+	//
+	Root as Textarea,
+};
diff --git a/server/dashboard/src/lib/components/ui/textarea/textarea.svelte b/server/dashboard/src/lib/components/ui/textarea/textarea.svelte
new file mode 100644
index 0000000..124e9d0
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/textarea/textarea.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
+	import type { HTMLTextareaAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		"data-slot": dataSlot = "textarea",
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
+</script>
+
+<textarea
+	bind:this={ref}
+	data-slot={dataSlot}
+	class={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
+	)}
+	bind:value
+	{...restProps}
+></textarea>
diff --git a/server/dashboard/src/lib/components/ui/tooltip/index.ts b/server/dashboard/src/lib/components/ui/tooltip/index.ts
new file mode 100644
index 0000000..1718604
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/tooltip/index.ts
@@ -0,0 +1,19 @@
+import Root from "./tooltip.svelte";
+import Trigger from "./tooltip-trigger.svelte";
+import Content from "./tooltip-content.svelte";
+import Provider from "./tooltip-provider.svelte";
+import Portal from "./tooltip-portal.svelte";
+
+export {
+	Root,
+	Trigger,
+	Content,
+	Provider,
+	Portal,
+	//
+	Root as Tooltip,
+	Content as TooltipContent,
+	Trigger as TooltipTrigger,
+	Provider as TooltipProvider,
+	Portal as TooltipPortal,
+};
diff --git a/server/dashboard/src/lib/components/ui/tooltip/tooltip-content.svelte b/server/dashboard/src/lib/components/ui/tooltip/tooltip-content.svelte
new file mode 100644
index 0000000..2662522
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+	import TooltipPortal from "./tooltip-portal.svelte";
+	import type { ComponentProps } from "svelte";
+	import type { WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 0,
+		side = "top",
+		children,
+		arrowClasses,
+		portalProps,
+		...restProps
+	}: TooltipPrimitive.ContentProps & {
+		arrowClasses?: string;
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof TooltipPortal>>;
+	} = $props();
+</script>
+
+<TooltipPortal {...portalProps}>
+	<TooltipPrimitive.Content
+		bind:ref
+		data-slot="tooltip-content"
+		{sideOffset}
+		{side}
+		class={cn(
+			"bg-foreground text-background 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-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--bits-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<TooltipPrimitive.Arrow>
+			{#snippet child({ props })}
+				<div
+					class={cn(
+						"bg-foreground z-50 size-2.5 rotate-45 rounded-[2px]",
+						"data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%_+_2px)]",
+						"data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%_+_1px)]",
+						"data-[side=right]:translate-x-[calc(50%_+_2px)] data-[side=right]:translate-y-1/2",
+						"data-[side=left]:-translate-y-[calc(50%_-_3px)]",
+						arrowClasses
+					)}
+					{...props}
+				></div>
+			{/snippet}
+		</TooltipPrimitive.Arrow>
+	</TooltipPrimitive.Content>
+</TooltipPortal>
diff --git a/server/dashboard/src/lib/components/ui/tooltip/tooltip-portal.svelte b/server/dashboard/src/lib/components/ui/tooltip/tooltip-portal.svelte
new file mode 100644
index 0000000..d234f7d
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/tooltip/tooltip-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+	let { ...restProps }: TooltipPrimitive.PortalProps = $props();
+</script>
+
+<TooltipPrimitive.Portal {...restProps} />
diff --git a/server/dashboard/src/lib/components/ui/tooltip/tooltip-provider.svelte b/server/dashboard/src/lib/components/ui/tooltip/tooltip-provider.svelte
new file mode 100644
index 0000000..8150bef
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/tooltip/tooltip-provider.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+	let { ...restProps }: TooltipPrimitive.ProviderProps = $props();
+</script>
+
+<TooltipPrimitive.Provider {...restProps} />
diff --git a/server/dashboard/src/lib/components/ui/tooltip/tooltip-trigger.svelte b/server/dashboard/src/lib/components/ui/tooltip/tooltip-trigger.svelte
new file mode 100644
index 0000000..1acdaa4
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/tooltip/tooltip-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps = $props();
+</script>
+
+<TooltipPrimitive.Trigger bind:ref data-slot="tooltip-trigger" {...restProps} />
diff --git a/server/dashboard/src/lib/components/ui/tooltip/tooltip.svelte b/server/dashboard/src/lib/components/ui/tooltip/tooltip.svelte
new file mode 100644
index 0000000..0b0f9ce
--- /dev/null
+++ b/server/dashboard/src/lib/components/ui/tooltip/tooltip.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: TooltipPrimitive.RootProps = $props();
+</script>
+
+<TooltipPrimitive.Root bind:open {...restProps} />
diff --git a/server/dashboard/src/lib/hooks/is-mobile.svelte.ts b/server/dashboard/src/lib/hooks/is-mobile.svelte.ts
new file mode 100644
index 0000000..4829c00
--- /dev/null
+++ b/server/dashboard/src/lib/hooks/is-mobile.svelte.ts
@@ -0,0 +1,9 @@
+import { MediaQuery } from "svelte/reactivity";
+
+const DEFAULT_MOBILE_BREAKPOINT = 768;
+
+export class IsMobile extends MediaQuery {
+	constructor(breakpoint: number = DEFAULT_MOBILE_BREAKPOINT) {
+		super(`max-width: ${breakpoint - 1}px`);
+	}
+}
diff --git a/server/dashboard/src/lib/schema.ts b/server/dashboard/src/lib/schema.ts
index c6557b5..9d946eb 100644
--- a/server/dashboard/src/lib/schema.ts
+++ b/server/dashboard/src/lib/schema.ts
@@ -6,6 +6,7 @@ import {
 	json,
 	mysqlEnum,
 	timestamp,
+	datetime,
 	customType
 } from 'drizzle-orm/mysql-core';
 
@@ -49,6 +50,23 @@ export const bugReportFiles = mysqlTable('bug_report_files', {
 	created_at: timestamp('created_at').notNull().defaultNow()
 });
 
+export const userTable = mysqlTable('user', {
+	id: varchar('id', { length: 255 }).primaryKey(),
+	username: varchar('username', { length: 255 }).notNull().unique(),
+	displayname: varchar('displayname', { length: 255 }).notNull().default(''),
+	passwordHash: varchar('password_hash', { length: 255 }).notNull(),
+	role: mysqlEnum('role', ['admin', 'user']).notNull().default('user'),
+	createdAt: timestamp('created_at').notNull().defaultNow()
+});
+
+export const sessionTable = mysqlTable('session', {
+	id: varchar('id', { length: 255 }).primaryKey(),
+	userId: varchar('user_id', { length: 255 })
+		.notNull()
+		.references(() => userTable.id),
+	expiresAt: datetime('expires_at').notNull()
+});
+
 export type BugReport = typeof bugReports.$inferSelect;
 export type BugReportFile = typeof bugReportFiles.$inferSelect;
 export type BugReportStatus = BugReport['status'];
diff --git a/server/dashboard/src/lib/server/auth.ts b/server/dashboard/src/lib/server/auth.ts
new file mode 100644
index 0000000..590e6b0
--- /dev/null
+++ b/server/dashboard/src/lib/server/auth.ts
@@ -0,0 +1,36 @@
+import { Lucia } from 'lucia';
+import { DrizzleMySQLAdapter } from '@lucia-auth/adapter-drizzle';
+import { db } from './db';
+import { sessionTable, userTable } from '$lib/schema';
+import { dev } from '$app/environment';
+
+const adapter = new DrizzleMySQLAdapter(db, sessionTable, userTable);
+
+export const lucia = new Lucia(adapter, {
+	sessionCookie: {
+		attributes: {
+			secure: !dev
+		}
+	},
+	getUserAttributes: (attributes) => {
+		return {
+			username: attributes.username,
+			role: attributes.role,
+			displayname: attributes.displayname
+		};
+	}
+});
+
+declare module 'lucia' {
+	interface Register {
+		Lucia: typeof lucia;
+		DatabaseUserAttributes: DatabaseUserAttributes;
+	}
+}
+
+interface DatabaseUserAttributes {
+	username: string;
+	role: 'admin' | 'user';
+	displayname: string;
+}
+// End of file
diff --git a/server/dashboard/src/lib/utils.ts b/server/dashboard/src/lib/utils.ts
index 10803a7..3cebf9a 100644
--- a/server/dashboard/src/lib/utils.ts
+++ b/server/dashboard/src/lib/utils.ts
@@ -1,5 +1,5 @@
-import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
 	return twMerge(clsx(inputs));
@@ -37,3 +37,10 @@ export const statusLabels: Record<string, string> = {
 	resolved: 'Resolved',
 	closed: 'Closed'
 };
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChild<T> = T extends { child?: any } ? Omit<T, "child"> : T;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, "children"> : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?: U | null };
diff --git a/server/dashboard/src/routes/+layout.server.ts b/server/dashboard/src/routes/+layout.server.ts
index c3760d9..d95b760 100644
--- a/server/dashboard/src/routes/+layout.server.ts
+++ b/server/dashboard/src/routes/+layout.server.ts
@@ -1,15 +1,25 @@
 import type { LayoutServerLoad } from './$types';
+import { redirect } from '@sveltejs/kit';
 import { db } from '$lib/server/db';
 import { bugReports } from '$lib/schema';
 import { eq, count } from 'drizzle-orm';
 
-export const load: LayoutServerLoad = async () => {
+export const load: LayoutServerLoad = async ({ locals, url }) => {
+	if (url.pathname === '/login') {
+		return { newCount: 0, user: null };
+	}
+
+	if (!locals.user) {
+		redirect(302, '/login');
+	}
+
 	const [result] = await db
 		.select({ count: count() })
 		.from(bugReports)
 		.where(eq(bugReports.status, 'new'));
 
 	return {
-		newCount: result.count
+		newCount: result.count,
+		user: locals.user
 	};
 };
diff --git a/server/dashboard/src/routes/+layout.svelte b/server/dashboard/src/routes/+layout.svelte
index a97862d..56ada1d 100644
--- a/server/dashboard/src/routes/+layout.svelte
+++ b/server/dashboard/src/routes/+layout.svelte
@@ -1,61 +1,121 @@
 <script lang="ts">
 	import '../app.css';
 	import { page } from '$app/stores';
-	import { Bug, LayoutDashboard } from 'lucide-svelte';
+	import { enhance } from '$app/forms';
+	import { Bug, LayoutDashboard, Users, LogOut } from 'lucide-svelte';
+	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+	import { Separator } from '$lib/components/ui/separator';
 
 	let { children, data } = $props();
 </script>
 
-<div class="flex h-screen overflow-hidden">
-	<!-- Sidebar -->
-	<aside class="flex w-56 flex-col border-r border-sidebar-border bg-sidebar text-sidebar-foreground">
-		<div class="flex items-center gap-2 border-b border-sidebar-border px-4 py-4">
-			<Bug class="h-6 w-6 text-primary" />
-			<span class="text-lg font-semibold">EMLy Dashboard</span>
-		</div>
-		<nav class="flex-1 px-2 py-3">
-			<a
-				href="/"
-				class="flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors {$page.url
-					.pathname === '/'
-					? 'bg-accent text-accent-foreground'
-					: 'text-muted-foreground hover:bg-accent/50 hover:text-foreground'}"
-			>
-				<LayoutDashboard class="h-4 w-4" />
-				Reports
-			</a>
-		</nav>
-		<div class="border-t border-sidebar-border px-4 py-3 text-xs text-muted-foreground">
-			EMLy Bug Reports
-		</div>
-	</aside>
-
-	<!-- Main content -->
-	<div class="flex flex-1 flex-col overflow-hidden">
-		<!-- Top bar -->
-		<header
-			class="flex h-14 items-center justify-between border-b border-border bg-card px-6"
-		>
-			<h1 class="text-lg font-semibold">
-				{#if $page.url.pathname === '/'}
-					Bug Reports
-				{:else if $page.url.pathname.startsWith('/reports/')}
-					Report Detail
-				{:else}
-					Dashboard
-				{/if}
-			</h1>
-			{#if data.newCount > 0}
-				<div class="flex items-center gap-2 rounded-md bg-blue-500/10 px-3 py-1.5 text-sm text-blue-400">
-					<span class="inline-block h-2 w-2 rounded-full bg-blue-400"></span>
-					{data.newCount} new {data.newCount === 1 ? 'report' : 'reports'}
+{#if !data.user}
+	{@render children()}
+{:else}
+	<Sidebar.Provider>
+		<Sidebar.Root>
+			<Sidebar.Header>
+				<div class="flex items-center justify-center border-b border-border p-3" style="padding: 12px; display: flex; justify-content: center;">
+					<Bug class="h-6 w-6 text-primary" />
+					<span class="mt-2 pl-3 text-lg font-bold">EMLy Dashboard</span>
 				</div>
-			{/if}
-		</header>
-
-		<!-- Page content -->
-		<main class="flex-1 overflow-auto p-6">
-			{@render children()}
-		</main>
-	</div>
-</div>
+			</Sidebar.Header>
+			<Sidebar.Content>
+				<Sidebar.Group>
+					<Sidebar.GroupLabel>Menu</Sidebar.GroupLabel>
+					<Sidebar.GroupContent>
+						<Sidebar.Menu>
+							<Sidebar.MenuItem>
+								<Sidebar.MenuButton isActive={$page.url.pathname === '/'}>
+									{#snippet child({ props })}
+										<a href="/" {...props}>
+											<LayoutDashboard />
+											<span>Reports</span>
+										</a>
+									{/snippet}
+								</Sidebar.MenuButton>
+							</Sidebar.MenuItem>
+							{#if data.user.role === 'admin'}
+								<Sidebar.MenuItem>
+									<Sidebar.MenuButton isActive={$page.url.pathname === '/users'}>
+										{#snippet child({ props })}
+											<a href="/users" {...props}>
+												<Users />
+												<span>Users</span>
+											</a>
+										{/snippet}
+									</Sidebar.MenuButton>
+								</Sidebar.MenuItem>
+							{/if}
+						</Sidebar.Menu>
+					</Sidebar.GroupContent>
+				</Sidebar.Group>
+			</Sidebar.Content>
+			<Sidebar.Footer>
+				<Sidebar.Menu>
+					<Sidebar.MenuItem>
+						<Sidebar.MenuButton
+							size="lg"
+							class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+						>
+							{#snippet child({ props })}
+								<div {...props}>
+									<div class="grid flex-1 text-left text-sm leading-tight">
+										<span class="pb-1 truncate font-semibold">{data.user.displayname || data.user.username}</span>
+										<span
+											class="w-fit inline-flex rounded-full border px-2 py-0.5 text-xs font-medium truncate {data.user.role ===
+											'admin'
+												? 'bg-purple-500/20 text-purple-400 border-purple-500/30'
+												: 'bg-zinc-500/20 text-zinc-400 border-zinc-500/30'}"
+										>
+											{data.user.role}
+										</span>
+									</div>
+									<form method="POST" action="/logout" use:enhance>
+										<button type="submit" title="Sign out">
+											<LogOut class="ml-auto size-4" />
+										</button>
+									</form>
+								</div>
+							{/snippet}
+						</Sidebar.MenuButton>
+					</Sidebar.MenuItem>
+				</Sidebar.Menu>
+			</Sidebar.Footer>
+		</Sidebar.Root>
+		<Sidebar.Inset>
+			<header
+				class="flex h-16 shrink-0 items-center justify-between border-b px-4 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12"
+			>
+				<div class="flex flex-1 items-center gap-2 px-4">
+					<Sidebar.Trigger class="-ml-1" />
+					<Separator orientation="vertical" class="mr-2 h-4" />
+					<h1 class="text-lg font-semibold">
+						{#if $page.url.pathname === '/'}
+							Bug Reports
+						{:else if $page.url.pathname.startsWith('/reports/')}
+							Report Detail
+						{:else if $page.url.pathname === '/users'}
+							User Management
+						{:else}
+							Dashboard
+						{/if}
+					</h1>
+				</div>
+				<div class="flex items-center gap-2 px-4">
+					{#if data.newCount > 0}
+						<div
+							class="ml-4 flex items-center gap-2 rounded-md bg-blue-500/10 px-3 py-1.5 text-sm text-blue-400"
+						>
+							<span class="inline-block h-2 w-2 rounded-full bg-blue-400"></span>
+							{data.newCount} new {data.newCount === 1 ? 'report' : 'reports'}
+						</div>
+					{/if}
+				</div>
+			</header>
+			<div class="flex flex-1 flex-col gap-4 p-4 pt-0 mt-2">
+				{@render children()}
+			</div>
+		</Sidebar.Inset>
+	</Sidebar.Provider>
+{/if}
diff --git a/server/dashboard/src/routes/+page.svelte b/server/dashboard/src/routes/+page.svelte
index 44d914b..84b8900 100644
--- a/server/dashboard/src/routes/+page.svelte
+++ b/server/dashboard/src/routes/+page.svelte
@@ -2,13 +2,25 @@
 	import { goto, invalidateAll } from '$app/navigation';
 	import { page } from '$app/stores';
 	import { statusColors, statusLabels, formatDate } from '$lib/utils';
-	import { Search, ChevronLeft, ChevronRight, Filter, Paperclip, RefreshCcw } from 'lucide-svelte';
+	import { Search, ChevronLeft, ChevronRight, Filter, Paperclip, RefreshCcw, Inbox } from 'lucide-svelte';
+	import { Button } from '$lib/components/ui/button';
+	import { Input } from '$lib/components/ui/input';
+	import * as Table from '$lib/components/ui/table';
+	import * as Select from '$lib/components/ui/select';
+	import * as Empty from '$lib/components/ui/empty';
 
 	let { data } = $props();
 
 	let searchInput = $state('');
 	let statusFilter = $state('');
 
+	const statusOptions = [
+		{ value: 'new', label: 'New' },
+		{ value: 'in_review', label: 'In Review' },
+		{ value: 'resolved', label: 'Resolved' },
+		{ value: 'closed', label: 'Closed' }
+	];
+
 	$effect(() => {
 		searchInput = data.filters.search;
 		statusFilter = data.filters.status;
@@ -48,7 +60,7 @@
 	<div class="flex flex-wrap items-center gap-3">
 		<div class="relative flex-1 min-w-50 max-w-sm">
 			<Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-			<input
+			<Input
 				type="text"
 				placeholder="Search hostname, user, name, email..."
 				bind:value={searchInput}
@@ -56,97 +68,116 @@
 				class="w-full rounded-md border border-input bg-background py-2 pl-9 pr-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
 			/>
 		</div>
-		<select
-			bind:value={statusFilter}
-			onchange={applyFilters}
-			class="rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
-		>
-			<option value="">All statuses</option>
-			<option value="new">New</option>
-			<option value="in_review">In Review</option>
-			<option value="resolved">Resolved</option>
-			<option value="closed">Closed</option>
-		</select>
-		<button
-			onclick={applyFilters}
-			class="inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
-		>
+		<Select.Root type="single" bind:value={statusFilter} onValueChange={() => applyFilters()}>
+			<Select.Trigger class="w-37.5">
+				{statusOptions.find((o) => o.value === statusFilter)?.label || 'All statuses'}
+			</Select.Trigger>
+			<Select.Content>
+				<Select.Item value="" label="All statuses" />
+				{#each statusOptions as option}
+					<Select.Item value={option.value} label={option.label} />
+				{/each}
+			</Select.Content>
+		</Select.Root>
+		<Button onclick={applyFilters}>
 			<Filter class="h-4 w-4" />
 			Filter
-		</button>
-		<button
-			onclick={refreshReports}
-			class="inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
-		>
+		</Button>
+		<Button onclick={refreshReports}>
 			<RefreshCcw class="h-4 w-4" />
 			Refresh
-		</button>
+		</Button>
 		{#if data.filters.search || data.filters.status}
-			<button
-				onclick={clearFilters}
-				class="rounded-md border border-input px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
-			>
+			<Button variant="outline" onclick={clearFilters}>
 				Clear
-			</button>
+			</Button>
 		{/if}
 	</div>
 
 	<!-- Table -->
-	<div class="overflow-hidden rounded-lg border border-border">
-		<table class="w-full text-sm">
-			<thead>
-				<tr class="border-b border-border bg-muted/50">
-					<th class="px-4 py-3 text-left font-medium text-muted-foreground">ID</th>
-					<th class="px-4 py-3 text-left font-medium text-muted-foreground">Hostname</th>
-					<th class="px-4 py-3 text-left font-medium text-muted-foreground">User</th>
-					<th class="px-4 py-3 text-left font-medium text-muted-foreground">Reporter</th>
-					<th class="px-4 py-3 text-left font-medium text-muted-foreground">Status</th>
-					<th class="px-4 py-3 text-left font-medium text-muted-foreground">Files</th>
-					<th class="px-4 py-3 text-left font-medium text-muted-foreground">Created</th>
-				</tr>
-			</thead>
-			<tbody>
-				{#each data.reports as report (report.id)}
-					<tr
-						class="border-b border-border transition-colors hover:bg-muted/30 cursor-pointer"
-						onclick={() => goto(`/reports/${report.id}`)}
-					>
-						<td class="px-4 py-3 font-mono text-muted-foreground">#{report.id}</td>
-						<td class="px-4 py-3">{report.hostname || '—'}</td>
-						<td class="px-4 py-3">{report.os_user || '—'}</td>
-						<td class="px-4 py-3">
-							<div>{report.name}</div>
-							<div class="text-xs text-muted-foreground">{report.email}</div>
-						</td>
-						<td class="px-4 py-3">
-							<span
-								class="inline-flex rounded-full border px-2 py-0.5 text-xs font-medium {statusColors[report.status]}"
-							>
-								{statusLabels[report.status]}
-							</span>
-						</td>
-						<td class="px-4 py-3">
-							{#if report.file_count > 0}
-								<span class="inline-flex items-center gap-1 text-muted-foreground">
-									<Paperclip class="h-3.5 w-3.5" />
-									{report.file_count}
-								</span>
-							{:else}
-								<span class="text-muted-foreground">—</span>
-							{/if}
-						</td>
-						<td class="px-4 py-3 text-muted-foreground">{formatDate(report.created_at)}</td>
-					</tr>
+	{#if data.reports.length === 0}
+		<div class="rounded-lg border border-border bg-card">
+			<Empty.Root class="p-8">
+				<Empty.Header>
+					<Empty.Media variant="icon">
+						<Inbox class="h-10 w-10 text-muted-foreground" />
+					</Empty.Media>
+					<Empty.Title>No reports found</Empty.Title>
+					<Empty.Description>
+						There are no bug reports matching your current filters.
+					</Empty.Description>
+				</Empty.Header>
+				{#if data.filters.search || data.filters.status}
+					<Empty.Content>
+						<Button variant="outline" onclick={clearFilters}>
+							Clear Filters
+						</Button>
+					</Empty.Content>
 				{:else}
-					<tr>
-						<td colspan="7" class="px-4 py-12 text-center text-muted-foreground">
-							No reports found.
-						</td>
-					</tr>
-				{/each}
-			</tbody>
-		</table>
-	</div>
+					<Empty.Content>
+						<Button variant="outline" onclick={refreshReports}>
+							<RefreshCcw class="mr-2 h-4 w-4" />
+							Refresh
+						</Button>
+					</Empty.Content>
+				{/if}
+			</Empty.Root>
+		</div>
+	{:else}
+		<div class="overflow-hidden rounded-lg border border-border">
+			<Table.Root>
+				<Table.Header>
+					<Table.Row>
+						<Table.Head class="w-[80px]">ID</Table.Head>
+						<Table.Head>Hostname</Table.Head>
+						<Table.Head>User</Table.Head>
+						<Table.Head>Reporter</Table.Head>
+						<Table.Head>Status</Table.Head>
+						<Table.Head>Files</Table.Head>
+						<Table.Head class="text-right">Created</Table.Head>
+					</Table.Row>
+				</Table.Header>
+				<Table.Body>
+					{#each data.reports as report (report.id)}
+						<Table.Row
+							class="cursor-pointer"
+							onclick={() => goto(`/reports/${report.id}`)}
+						>
+							<Table.Cell class="font-mono text-muted-foreground">#{report.id}</Table.Cell>
+							<Table.Cell>{report.hostname || '—'}</Table.Cell>
+							<Table.Cell>{report.os_user || '—'}</Table.Cell>
+							<Table.Cell>
+								<div class="font-medium">{report.name}</div>
+								<div class="text-xs text-muted-foreground">{report.email}</div>
+							</Table.Cell>
+							<Table.Cell>
+								<span
+									class="inline-flex rounded-full border px-2 py-0.5 text-xs font-medium {statusColors[
+										report.status
+									]}"
+								>
+									{statusLabels[report.status]}
+								</span>
+							</Table.Cell>
+							<Table.Cell>
+								{#if report.file_count > 0}
+									<span class="inline-flex items-center gap-1 text-muted-foreground">
+										<Paperclip class="h-3.5 w-3.5" />
+										{report.file_count}
+									</span>
+								{:else}
+									<span class="text-muted-foreground">—</span>
+								{/if}
+							</Table.Cell>
+							<Table.Cell class="text-right text-muted-foreground">
+								{formatDate(report.created_at)}
+							</Table.Cell>
+						</Table.Row>
+					{/each}
+				</Table.Body>
+			</Table.Root>
+		</div>
+	{/if}
 
 	<!-- Pagination -->
 	{#if data.pagination.totalPages > 1}
@@ -158,35 +189,35 @@
 				)} of {data.pagination.total} reports
 			</p>
 			<div class="flex items-center gap-1">
-				<button
+				<Button
+					variant="outline"
+					size="icon"
 					onclick={() => goToPage(data.pagination.page - 1)}
 					disabled={data.pagination.page <= 1}
-					class="inline-flex items-center rounded-md border border-input p-2 text-sm hover:bg-accent disabled:opacity-50 disabled:pointer-events-none"
 				>
 					<ChevronLeft class="h-4 w-4" />
-				</button>
+				</Button>
 				{#each Array.from({ length: data.pagination.totalPages }, (_, i) => i + 1) as p}
 					{#if p === 1 || p === data.pagination.totalPages || (p >= data.pagination.page - 1 && p <= data.pagination.page + 1)}
-						<button
+						<Button
+							variant={p === data.pagination.page ? 'default' : 'outline'}
+							size="icon"
 							onclick={() => goToPage(p)}
-							class="inline-flex h-9 w-9 items-center justify-center rounded-md text-sm {p ===
-							data.pagination.page
-								? 'bg-primary text-primary-foreground'
-								: 'border border-input hover:bg-accent'}"
 						>
 							{p}
-						</button>
+						</Button>
 					{:else if p === data.pagination.page - 2 || p === data.pagination.page + 2}
 						<span class="px-1 text-muted-foreground">...</span>
 					{/if}
 				{/each}
-				<button
+				<Button
+					variant="outline"
+					size="icon"
 					onclick={() => goToPage(data.pagination.page + 1)}
 					disabled={data.pagination.page >= data.pagination.totalPages}
-					class="inline-flex items-center rounded-md border border-input p-2 text-sm hover:bg-accent disabled:opacity-50 disabled:pointer-events-none"
 				>
 					<ChevronRight class="h-4 w-4" />
-				</button>
+				</Button>
 			</div>
 		</div>
 	{/if}
diff --git a/server/dashboard/src/routes/login/+page.server.ts b/server/dashboard/src/routes/login/+page.server.ts
new file mode 100644
index 0000000..fc52c9c
--- /dev/null
+++ b/server/dashboard/src/routes/login/+page.server.ts
@@ -0,0 +1,59 @@
+import type { Actions, PageServerLoad } from './$types';
+import { fail, redirect } from '@sveltejs/kit';
+import { verify } from '@node-rs/argon2';
+import { lucia } from '$lib/server/auth';
+import { db } from '$lib/server/db';
+import { userTable } from '$lib/schema';
+import { eq } from 'drizzle-orm';
+
+export const load: PageServerLoad = async ({ locals }) => {
+	if (locals.user) {
+		redirect(302, '/');
+	}
+};
+
+export const actions: Actions = {
+	default: async ({ request, cookies }) => {
+		const formData = await request.formData();
+		const username = formData.get('username');
+		const password = formData.get('password');
+
+		if (typeof username !== 'string' || typeof password !== 'string') {
+			return fail(400, { message: 'Invalid input' });
+		}
+
+		if (!username || !password) {
+			return fail(400, { message: 'Username and password are required' });
+		}
+
+		const [user] = await db
+			.select()
+			.from(userTable)
+			.where(eq(userTable.username, username))
+			.limit(1);
+
+		if (!user) {
+			return fail(400, { message: 'Invalid username or password' });
+		}
+
+		const validPassword = await verify(user.passwordHash, password, {
+			memoryCost: 19456,
+			timeCost: 2,
+			outputLen: 32,
+			parallelism: 1
+		});
+
+		if (!validPassword) {
+			return fail(400, { message: 'Invalid username or password' });
+		}
+
+		const session = await lucia.createSession(user.id, {});
+		const sessionCookie = lucia.createSessionCookie(session.id);
+		cookies.set(sessionCookie.name, sessionCookie.value, {
+			path: '.',
+			...sessionCookie.attributes
+		});
+
+		redirect(302, '/');
+	}
+};
diff --git a/server/dashboard/src/routes/login/+page.svelte b/server/dashboard/src/routes/login/+page.svelte
new file mode 100644
index 0000000..2c74fee
--- /dev/null
+++ b/server/dashboard/src/routes/login/+page.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import { Bug } from 'lucide-svelte';
+
+	let { form } = $props();
+</script>
+
+<div class="flex min-h-screen items-center justify-center bg-background">
+	<div class="w-full max-w-sm rounded-lg border border-border bg-card p-8">
+		<div class="mb-6 flex flex-col items-center gap-2">
+			<Bug class="h-10 w-10 text-primary" />
+			<h1 class="text-xl font-semibold text-foreground">EMLy Dashboard</h1>
+			<p class="text-sm text-muted-foreground">Sign in to continue</p>
+		</div>
+
+		{#if form?.message}
+			<div class="mb-4 rounded-md bg-destructive/10 px-3 py-2 text-sm text-red-400">
+				{form.message}
+			</div>
+		{/if}
+
+		<form method="POST" use:enhance class="space-y-4">
+			<div>
+				<label for="username" class="mb-1 block text-sm font-medium text-foreground">
+					Username
+				</label>
+				<input
+					type="text"
+					id="username"
+					name="username"
+					required
+					autocomplete="username"
+					class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+					placeholder="Enter username"
+				/>
+			</div>
+
+			<div>
+				<label for="password" class="mb-1 block text-sm font-medium text-foreground">
+					Password
+				</label>
+				<input
+					type="password"
+					id="password"
+					name="password"
+					required
+					autocomplete="current-password"
+					class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+					placeholder="Enter password"
+				/>
+			</div>
+
+			<button
+				type="submit"
+				class="w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+			>
+				Sign in
+			</button>
+		</form>
+	</div>
+</div>
diff --git a/server/dashboard/src/routes/logout/+page.server.ts b/server/dashboard/src/routes/logout/+page.server.ts
new file mode 100644
index 0000000..67b748e
--- /dev/null
+++ b/server/dashboard/src/routes/logout/+page.server.ts
@@ -0,0 +1,24 @@
+import type { Actions, PageServerLoad } from './$types';
+import { redirect } from '@sveltejs/kit';
+import { lucia } from '$lib/server/auth';
+
+export const load: PageServerLoad = async () => {
+	redirect(302, '/');
+};
+
+export const actions: Actions = {
+	default: async ({ locals, cookies }) => {
+		if (!locals.session) {
+			redirect(302, '/login');
+		}
+
+		await lucia.invalidateSession(locals.session.id);
+		const sessionCookie = lucia.createBlankSessionCookie();
+		cookies.set(sessionCookie.name, sessionCookie.value, {
+			path: '.',
+			...sessionCookie.attributes
+		});
+
+		redirect(302, '/login');
+	}
+};
diff --git a/server/dashboard/src/routes/reports/[id]/+page.svelte b/server/dashboard/src/routes/reports/[id]/+page.svelte
index eb43c0a..9a9e713 100644
--- a/server/dashboard/src/routes/reports/[id]/+page.svelte
+++ b/server/dashboard/src/routes/reports/[id]/+page.svelte
@@ -10,14 +10,17 @@
 		Monitor,
 		Settings,
 		Database,
-		ChevronDown,
-		ChevronRight,
 		Mail
 	} from 'lucide-svelte';
+	import * as AlertDialog from '$lib/components/ui/alert-dialog';
+	import * as Card from '$lib/components/ui/card';
+	import * as Select from '$lib/components/ui/select';
+	import * as Table from '$lib/components/ui/table';
+	import { Button } from '$lib/components/ui/button';
+	import { Textarea } from '$lib/components/ui/textarea';
 
 	let { data } = $props();
 	let showDeleteDialog = $state(false);
-	let showSystemInfo = $state(false);
 	let statusUpdating = $state(false);
 	let deleting = $state(false);
 
@@ -64,216 +67,213 @@
 
 <div class="space-y-6">
 	<!-- Back button -->
-	<a
-		href="/"
-		class="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground"
-	>
+	<Button variant="ghost" class="gap-1.5 pl-0 hover:bg-transparent hover:text-foreground" href="/">
 		<ArrowLeft class="h-4 w-4" />
 		Back to Reports
-	</a>
+	</Button>
 
 	<!-- Header card -->
-	<div class="rounded-lg border border-border bg-card p-6">
-		<div class="flex items-start justify-between">
-			<div>
-				<div class="flex items-center gap-3">
-					<h2 class="text-xl font-semibold">Report #{data.report.id}</h2>
-					<span
-						class="inline-flex rounded-full border px-2.5 py-0.5 text-xs font-medium {statusColors[data.report.status]}"
-					>
-						{statusLabels[data.report.status]}
-					</span>
+	<Card.Root>
+		<Card.Header class="pb-4">
+			<div class="flex items-start justify-between">
+				<div>
+					<div class="flex items-center gap-3">
+						<Card.Title class="text-xl">Report #{data.report.id}</Card.Title>
+						<span
+							class="inline-flex rounded-full border px-2.5 py-0.5 text-xs font-medium {statusColors[data.report.status]}"
+						>
+							{statusLabels[data.report.status]}
+						</span>
+					</div>
+					<Card.Description class="mt-1">
+						Submitted by {data.report.name} ({data.report.email})
+					</Card.Description>
 				</div>
-				<p class="mt-1 text-sm text-muted-foreground">
-					Submitted by {data.report.name} ({data.report.email})
-				</p>
-			</div>
-			<div class="flex items-center gap-2">
-				<!-- Status selector -->
-				<select
-					value={data.report.status}
-					onchange={(e) => updateStatus(e.currentTarget.value)}
-					disabled={statusUpdating}
-					class="rounded-md border border-input bg-background px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50"
-				>
-					<option value="new">New</option>
-					<option value="in_review">In Review</option>
-					<option value="resolved">Resolved</option>
-					<option value="closed">Closed</option>
-				</select>
+				<div class="flex items-center gap-2">
+					<!-- Status selector -->
+					<Select.Root
+						type="single"
+						value={data.report.status}
+						disabled={statusUpdating}
+						onValueChange={(val) => updateStatus(val)}
+					>
+						<Select.Trigger class="w-35 disabled:cursor-not-allowed disabled:opacity-50" disabled={statusUpdating}>
+							{statusLabels[data.report.status]}
+						</Select.Trigger>
+						<Select.Content>
+							<Select.Item value="new" label="New" />
+							<Select.Item value="in_review" label="In Review" />
+							<Select.Item value="resolved" label="Resolved" />
+							<Select.Item value="closed" label="Closed" />
+						</Select.Content>
+					</Select.Root>
 
-				<!-- Download ZIP -->
-				<a
-					href="/api/reports/{data.report.id}/download"
-					class="inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90"
-				>
-					<Download class="h-4 w-4" />
-					ZIP
-				</a>
+					<!-- Download ZIP -->
+					<Button variant="default" class="gap-1.5" href="/api/reports/{data.report.id}/download">
+						<Download class="h-4 w-4" />
+						ZIP
+					</Button>
 
-				<!-- Delete -->
-				<button
-					onclick={() => (showDeleteDialog = true)}
-					class="inline-flex items-center gap-1.5 rounded-md border border-destructive px-3 py-1.5 text-sm font-medium text-destructive-foreground bg-destructive hover:bg-destructive/80"
-				>
-					<Trash2 class="h-4 w-4" />
-					Delete
-				</button>
+					<!-- Delete -->
+					<Button
+						variant="destructive"
+						class="gap-1.5"
+						onclick={() => (showDeleteDialog = true)}
+					>
+						<Trash2 class="h-4 w-4" />
+						Delete
+					</Button>
+				</div>
 			</div>
-		</div>
-
-		<!-- Metadata grid -->
-		<div class="mt-6 grid grid-cols-2 gap-4 md:grid-cols-4">
-			<div>
-				<p class="text-xs font-medium text-muted-foreground">Hostname</p>
-				<p class="mt-1 text-sm">{data.report.hostname || '—'}</p>
+		</Card.Header>
+		<Card.Content>
+			<!-- Metadata grid -->
+			<div class="grid grid-cols-2 gap-4 md:grid-cols-4">
+				<div>
+					<p class="text-xs font-medium text-muted-foreground">Hostname</p>
+					<p class="mt-1 text-sm">{data.report.hostname || '—'}</p>
+				</div>
+				<div>
+					<p class="text-xs font-medium text-muted-foreground">OS User</p>
+					<p class="mt-1 text-sm">{data.report.os_user || '—'}</p>
+				</div>
+				<div>
+					<p class="text-xs font-medium text-muted-foreground">HWID</p>
+					<p class="mt-1 font-mono text-xs break-all">{data.report.hwid || '—'}</p>
+				</div>
+				<div>
+					<p class="text-xs font-medium text-muted-foreground">IP Address</p>
+					<p class="mt-1 text-sm">{data.report.submitter_ip || '—'}</p>
+				</div>
+				<div>
+					<p class="text-xs font-medium text-muted-foreground">Created</p>
+					<p class="mt-1 text-sm">{formatDate(data.report.created_at)}</p>
+				</div>
+				<div>
+					<p class="text-xs font-medium text-muted-foreground">Updated</p>
+					<p class="mt-1 text-sm">{formatDate(data.report.updated_at)}</p>
+				</div>
 			</div>
-			<div>
-				<p class="text-xs font-medium text-muted-foreground">OS User</p>
-				<p class="mt-1 text-sm">{data.report.os_user || '—'}</p>
-			</div>
-			<div>
-				<p class="text-xs font-medium text-muted-foreground">HWID</p>
-				<p class="mt-1 font-mono text-xs break-all">{data.report.hwid || '—'}</p>
-			</div>
-			<div>
-				<p class="text-xs font-medium text-muted-foreground">IP Address</p>
-				<p class="mt-1 text-sm">{data.report.submitter_ip || '—'}</p>
-			</div>
-			<div>
-				<p class="text-xs font-medium text-muted-foreground">Created</p>
-				<p class="mt-1 text-sm">{formatDate(data.report.created_at)}</p>
-			</div>
-			<div>
-				<p class="text-xs font-medium text-muted-foreground">Updated</p>
-				<p class="mt-1 text-sm">{formatDate(data.report.updated_at)}</p>
-			</div>
-		</div>
-	</div>
+		</Card.Content>
+	</Card.Root>
 
 	<!-- Description -->
-	<div class="rounded-lg border border-border bg-card p-6">
-		<h3 class="text-sm font-medium text-muted-foreground">Description</h3>
-		<p class="mt-2 whitespace-pre-wrap text-sm">{data.report.description}</p>
-	</div>
+	<Card.Root>
+		<Card.Header>
+			<Card.Title class="text-lg">Description</Card.Title>
+		</Card.Header>
+		<Card.Content>
+			<p class="whitespace-pre-wrap text-sm">{data.report.description}</p>
+		</Card.Content>
+	</Card.Root>
 
 	<!-- System Info -->
 	{#if data.report.system_info}
-		<div class="rounded-lg border border-border bg-card">
-			<button
-				onclick={() => (showSystemInfo = !showSystemInfo)}
-				class="flex w-full items-center gap-2 px-6 py-4 text-left text-sm font-medium text-muted-foreground hover:text-foreground"
-			>
-				{#if showSystemInfo}
-					<ChevronDown class="h-4 w-4" />
-				{:else}
-					<ChevronRight class="h-4 w-4" />
-				{/if}
-				System Information
-			</button>
-			{#if showSystemInfo}
-				<div class="border-t border-border px-6 py-4">
-					<pre class="overflow-auto rounded-md bg-muted/50 p-4 text-xs">{data.report.system_info}</pre>
+		<Card.Root class="overflow-hidden">
+			<Card.Header>
+				<Card.Title class="text-lg">System Information</Card.Title>
+			</Card.Header>
+			<Card.Content>
+				<div>
+					<Textarea
+						readonly
+						class="font-mono text-xs h-128 resize-none"
+						value={data.report.system_info}
+					/>
 				</div>
-			{/if}
-		</div>
+			</Card.Content>
+		</Card.Root>
 	{/if}
 
-	<!-- Files -->
-	<div class="rounded-lg border border-border bg-card p-6">
-		<h3 class="mb-4 text-sm font-medium text-muted-foreground">
-			Attached Files ({data.files.length})
-		</h3>
-		{#if data.files.length > 0}
-			<!-- Screenshot previews -->
-			{@const screenshots = data.files.filter((f) => f.file_role === 'screenshot')}
-			{#if screenshots.length > 0}
-				<div class="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2">
-					{#each screenshots as file}
-						<div class="overflow-hidden rounded-md border border-border">
-							<img
-								src="/api/reports/{data.report.id}/files/{file.id}"
-								alt={file.filename}
-								class="w-full"
-							/>
-							<div class="px-3 py-2 text-xs text-muted-foreground">{file.filename}</div>
-						</div>
-					{/each}
-				</div>
-			{/if}
 
-			<div class="overflow-hidden rounded-md border border-border">
-				<table class="w-full text-sm">
-					<thead>
-						<tr class="border-b border-border bg-muted/50">
-							<th class="px-4 py-2 text-left text-xs font-medium text-muted-foreground">Role</th>
-							<th class="px-4 py-2 text-left text-xs font-medium text-muted-foreground">Filename</th>
-							<th class="px-4 py-2 text-left text-xs font-medium text-muted-foreground">Size</th>
-							<th class="px-4 py-2 text-right text-xs font-medium text-muted-foreground">Action</th>
-						</tr>
-					</thead>
-					<tbody>
-						{#each data.files as file}
-							{@const Icon = roleIcons[file.file_role] || FileText}
-							<tr class="border-b border-border last:border-0">
-								<td class="px-4 py-2">
-									<span class="inline-flex items-center gap-1.5 text-muted-foreground">
-										<Icon class="h-3.5 w-3.5" />
-										{roleLabels[file.file_role] || file.file_role}
-									</span>
-								</td>
-								<td class="px-4 py-2 font-mono text-xs">{file.filename}</td>
-								<td class="px-4 py-2 text-muted-foreground">{formatBytes(file.file_size)}</td>
-								<td class="px-4 py-2 text-right">
-									<a
-										href="/api/reports/{data.report.id}/files/{file.id}"
-										class="inline-flex items-center gap-1 rounded-md border border-input px-2 py-1 text-xs hover:bg-accent"
-									>
-										<Download class="h-3 w-3" />
-										Download
-									</a>
-								</td>
-							</tr>
+	<!-- Files -->
+	<Card.Root>
+		<Card.Header>
+			<Card.Title class="text-lg">Attached Files ({data.files.length})</Card.Title>
+		</Card.Header>
+		<Card.Content>
+			{#if data.files.length > 0}
+				<!-- Screenshot previews -->
+				{@const screenshots = data.files.filter((f) => f.file_role === 'screenshot')}
+				{#if screenshots.length > 0}
+					<div class="mb-6 grid grid-cols-1 gap-4 md:grid-cols-2">
+						{#each screenshots as file}
+							<div class="overflow-hidden rounded-md border border-border">
+								<img
+									src="/api/reports/{data.report.id}/files/{file.id}"
+									alt={file.filename}
+									class="w-full"
+								/>
+								<div class="bg-muted/50 px-3 py-2 text-xs text-muted-foreground">{file.filename}</div>
+							</div>
 						{/each}
-					</tbody>
-				</table>
-			</div>
-		{:else}
-			<p class="text-sm text-muted-foreground">No files attached.</p>
-		{/if}
-	</div>
+					</div>
+				{/if}
+
+				<div class="rounded-md border">
+					<Table.Root>
+						<Table.Header>
+							<Table.Row>
+								<Table.Head>Role</Table.Head>
+								<Table.Head>Filename</Table.Head>
+								<Table.Head>Size</Table.Head>
+								<Table.Head class="text-right">Action</Table.Head>
+							</Table.Row>
+						</Table.Header>
+						<Table.Body>
+							{#each data.files as file}
+								{@const Icon = roleIcons[file.file_role] || FileText}
+								<Table.Row>
+									<Table.Cell>
+										<span class="inline-flex items-center gap-2 text-muted-foreground">
+											<Icon class="h-4 w-4" />
+											{roleLabels[file.file_role] || file.file_role}
+										</span>
+									</Table.Cell>
+									<Table.Cell class="font-mono text-xs">{file.filename}</Table.Cell>
+									<Table.Cell class="text-muted-foreground">{formatBytes(file.file_size)}</Table.Cell>
+									<Table.Cell class="text-right">
+										<Button
+											variant="outline"
+											size="sm"
+											class="h-7 gap-1"
+											href="/api/reports/{data.report.id}/files/{file.id}"
+										>
+											<Download class="h-3 w-3" />
+											
+										</Button>
+									</Table.Cell>
+								</Table.Row>
+							{/each}
+						</Table.Body>
+					</Table.Root>
+				</div>
+			{:else}
+				<p class="text-sm text-muted-foreground">No files attached.</p>
+			{/if}
+		</Card.Content>
+	</Card.Root>
 </div>
 
 <!-- Delete confirmation dialog -->
-{#if showDeleteDialog}
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div
-		class="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
-		onkeydown={(e) => e.key === 'Escape' && (showDeleteDialog = false)}
-	>
-		<!-- svelte-ignore a11y_click_events_have_key_events -->
-		<div class="absolute inset-0" onclick={() => (showDeleteDialog = false)}></div>
-		<div class="relative rounded-lg border border-border bg-card p-6 shadow-xl max-w-md w-full">
-			<h3 class="text-lg font-semibold">Delete Report</h3>
-			<p class="mt-2 text-sm text-muted-foreground">
+<AlertDialog.Root bind:open={showDeleteDialog}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>Delete Report</AlertDialog.Title>
+			<AlertDialog.Description>
 				Are you sure you want to delete report #{data.report.id}? This will permanently remove the
 				report and all attached files. This action cannot be undone.
-			</p>
-			<div class="mt-4 flex justify-end gap-2">
-				<button
-					onclick={() => (showDeleteDialog = false)}
-					class="rounded-md border border-input px-4 py-2 text-sm hover:bg-accent"
-				>
-					Cancel
-				</button>
-				<button
-					onclick={deleteReport}
-					disabled={deleting}
-					class="rounded-md bg-destructive px-4 py-2 text-sm font-medium text-destructive-foreground hover:bg-destructive/80 disabled:opacity-50"
-				>
-					{deleting ? 'Deleting...' : 'Delete'}
-				</button>
-			</div>
-		</div>
-	</div>
-{/if}
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel onclick={() => (showDeleteDialog = false)}>Cancel</AlertDialog.Cancel>
+			<Button
+				variant="destructive"
+				onclick={deleteReport}
+				disabled={deleting}
+			>
+				{deleting ? 'Deleting...' : 'Delete'}
+			</Button>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>
diff --git a/server/dashboard/src/routes/users/+page.server.ts b/server/dashboard/src/routes/users/+page.server.ts
new file mode 100644
index 0000000..6399d53
--- /dev/null
+++ b/server/dashboard/src/routes/users/+page.server.ts
@@ -0,0 +1,215 @@
+import type { Actions, PageServerLoad } from './$types';
+import { fail, redirect } from '@sveltejs/kit';
+import { hash } from '@node-rs/argon2';
+import { generateIdFromEntropySize } from 'lucia';
+import { db } from '$lib/server/db';
+import { userTable } from '$lib/schema';
+import { eq } from 'drizzle-orm';
+
+const PASSWORD_MIN_LENGTH = 8;
+const PASSWORD_MAX_LENGTH = 255;
+
+function validatePassword(password: string): string | null {
+	if (password.length < PASSWORD_MIN_LENGTH || password.length > PASSWORD_MAX_LENGTH) {
+		return `Password must be ${PASSWORD_MIN_LENGTH}-${PASSWORD_MAX_LENGTH} characters`;
+	}
+	if (!/[A-Z]/.test(password)) {
+		return 'Password must contain at least one uppercase letter';
+	}
+	if (!/[a-z]/.test(password)) {
+		return 'Password must contain at least one lowercase letter';
+	}
+	if (!/[0-9]/.test(password)) {
+		return 'Password must contain at least one number';
+	}
+	if (!/[^A-Za-z0-9]/.test(password)) {
+		return 'Password must contain at least one special character';
+	}
+	return null;
+}
+
+async function hashPassword(password: string): Promise<string> {
+	return hash(password, {
+		memoryCost: 19456,
+		timeCost: 2,
+		outputLen: 32,
+		parallelism: 1
+	});
+}
+
+export const load: PageServerLoad = async ({ locals }) => {
+	if (!locals.user || locals.user.role !== 'admin') {
+		redirect(302, '/');
+	}
+
+	const users = await db
+		.select({
+			id: userTable.id,
+			username: userTable.username,
+			displayname: userTable.displayname,
+			role: userTable.role,
+			createdAt: userTable.createdAt
+		})
+		.from(userTable)
+		.orderBy(userTable.createdAt);
+
+	return { users };
+};
+
+export const actions: Actions = {
+	create: async ({ request, locals }) => {
+		if (!locals.user || locals.user.role !== 'admin') {
+			return fail(403, { message: 'Unauthorized' });
+		}
+
+		const formData = await request.formData();
+		const username = formData.get('username');
+		const displayname = formData.get('displayname') || '';
+		const password = formData.get('password');
+		const confirmPassword = formData.get('confirmPassword');
+		const role = formData.get('role');
+
+		if (
+			typeof username !== 'string' ||
+			typeof displayname !== 'string' ||
+			typeof password !== 'string' ||
+			typeof confirmPassword !== 'string' ||
+			typeof role !== 'string'
+		) {
+			return fail(400, { message: 'Invalid input' });
+		}
+
+		if (!username || !password) {
+			return fail(400, { message: 'Username and password are required' });
+		}
+
+		if (username.length < 3 || username.length > 255) {
+			return fail(400, { message: 'Username must be 3-255 characters' });
+		}
+
+		if (password !== confirmPassword) {
+			return fail(400, { message: 'Passwords do not match' });
+		}
+
+		const passwordError = validatePassword(password);
+		if (passwordError) {
+			return fail(400, { message: passwordError });
+		}
+
+		if (role !== 'admin' && role !== 'user') {
+			return fail(400, { message: 'Invalid role' });
+		}
+
+		// Check if username already exists
+		const [existing] = await db
+			.select({ id: userTable.id })
+			.from(userTable)
+			.where(eq(userTable.username, username))
+			.limit(1);
+
+		if (existing) {
+			return fail(400, { message: 'Username already exists' });
+		}
+
+		const passwordHash = await hashPassword(password);
+		const userId = generateIdFromEntropySize(10);
+
+		await db.insert(userTable).values({
+			id: userId,
+			username,
+			displayname,
+			passwordHash,
+			role: role as 'admin' | 'user'
+		});
+
+		return { success: true };
+	},
+
+	updateDisplayname: async ({ request, locals }) => {
+		if (!locals.user || locals.user.role !== 'admin') {
+			return fail(403, { message: 'Unauthorized' });
+		}
+
+		const formData = await request.formData();
+		const userId = formData.get('userId');
+		const displayname = formData.get('displayname');
+
+		if (typeof userId !== 'string' || typeof displayname !== 'string') {
+			return fail(400, { message: 'Invalid input' });
+		}
+
+		await db.update(userTable).set({ displayname }).where(eq(userTable.id, userId));
+
+		return { success: true };
+	},
+
+	resetPassword: async ({ request, locals }) => {
+		if (!locals.user || locals.user.role !== 'admin') {
+			return fail(403, { message: 'Unauthorized' });
+		}
+
+		const formData = await request.formData();
+		const userId = formData.get('userId');
+
+		if (typeof userId === 'string' && userId === locals.user.id) {
+			return fail(400, { message: 'Cannot reset your own password from here' });
+		}
+		const newPassword = formData.get('newPassword');
+		const confirmPassword = formData.get('confirmPassword');
+
+		if (
+			typeof userId !== 'string' ||
+			typeof newPassword !== 'string' ||
+			typeof confirmPassword !== 'string'
+		) {
+			return fail(400, { message: 'Invalid input' });
+		}
+
+		if (newPassword !== confirmPassword) {
+			return fail(400, { message: 'Passwords do not match' });
+		}
+
+		const passwordError = validatePassword(newPassword);
+		if (passwordError) {
+			return fail(400, { message: passwordError });
+		}
+
+		const passwordHash = await hashPassword(newPassword);
+
+		await db.update(userTable).set({ passwordHash }).where(eq(userTable.id, userId));
+
+		return { success: true };
+	},
+
+	delete: async ({ request, locals }) => {
+		if (!locals.user || locals.user.role !== 'admin') {
+			return fail(403, { message: 'Unauthorized' });
+		}
+
+		const formData = await request.formData();
+		const userId = formData.get('userId');
+
+		if (typeof userId !== 'string') {
+			return fail(400, { message: 'Invalid input' });
+		}
+
+		if (userId === locals.user.id) {
+			return fail(400, { message: 'Cannot delete your own account' });
+		}
+
+		// Prevent deleting admin users
+		const [targetUser] = await db
+			.select({ role: userTable.role })
+			.from(userTable)
+			.where(eq(userTable.id, userId))
+			.limit(1);
+
+		if (targetUser?.role === 'admin') {
+			return fail(400, { message: 'Cannot delete an admin user' });
+		}
+
+		await db.delete(userTable).where(eq(userTable.id, userId));
+
+		return { success: true };
+	}
+};
diff --git a/server/dashboard/src/routes/users/+page.svelte b/server/dashboard/src/routes/users/+page.svelte
new file mode 100644
index 0000000..2459172
--- /dev/null
+++ b/server/dashboard/src/routes/users/+page.svelte
@@ -0,0 +1,476 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import { formatDate } from '$lib/utils';
+	import { Trash2, UserPlus, Pencil, KeyRound, Check, X } from 'lucide-svelte';
+	import { Button } from '$lib/components/ui/button';
+	import { Input } from '$lib/components/ui/input';
+	import { Label } from '$lib/components/ui/label';
+	import * as Select from '$lib/components/ui/select';
+	import * as Dialog from '$lib/components/ui/dialog';
+	import * as AlertDialog from '$lib/components/ui/alert-dialog';
+
+	let { data, form } = $props();
+
+	// Create user dialog visibility
+	let showCreateForm = $state(false);
+
+	// Password policy state
+	let password = $state('');
+	let confirmPassword = $state('');
+	let role = $state('user');
+
+	const policies = $derived({
+		minLength: password.length >= 8,
+		uppercase: /[A-Z]/.test(password),
+		lowercase: /[a-z]/.test(password),
+		number: /[0-9]/.test(password),
+		special: /[^A-Za-z0-9]/.test(password),
+		match: password.length > 0 && password === confirmPassword
+	});
+
+	const allPoliciesMet = $derived(
+		policies.minLength &&
+			policies.uppercase &&
+			policies.lowercase &&
+			policies.number &&
+			policies.special &&
+			policies.match
+	);
+
+	// Dialog states
+	let displaynameDialogOpen = $state(false);
+	let deleteDialogOpen = $state(false);
+	let selectedUser = $state<{ id: string; username: string; displayname: string } | null>(null);
+	let newDisplayname = $state('');
+
+	function openDisplaynameDialog(user: typeof selectedUser) {
+		selectedUser = user;
+		newDisplayname = user?.displayname || '';
+		displaynameDialogOpen = true;
+	}
+
+	function openDeleteDialog(user: typeof selectedUser) {
+		selectedUser = user;
+		deleteDialogOpen = true;
+	}
+
+	// Reset password dialog state
+	let resetDialogOpen = $state(false);
+	let resetUserId = $state('');
+	let resetUsername = $state('');
+	let resetPassword = $state('');
+	let resetConfirmPassword = $state('');
+
+	const resetPolicies = $derived({
+		minLength: resetPassword.length >= 8,
+		uppercase: /[A-Z]/.test(resetPassword),
+		lowercase: /[a-z]/.test(resetPassword),
+		number: /[0-9]/.test(resetPassword),
+		special: /[^A-Za-z0-9]/.test(resetPassword),
+		match: resetPassword.length > 0 && resetPassword === resetConfirmPassword
+	});
+
+	const allResetPoliciesMet = $derived(
+		resetPolicies.minLength &&
+			resetPolicies.uppercase &&
+			resetPolicies.lowercase &&
+			resetPolicies.number &&
+			resetPolicies.special &&
+			resetPolicies.match
+	);
+
+	function openResetDialog(userId: string, username: string) {
+		resetUserId = userId;
+		resetUsername = username;
+		resetPassword = '';
+		resetConfirmPassword = '';
+		resetDialogOpen = true;
+	}
+</script>
+
+<div class="space-y-6">
+	<Button onclick={() => (showCreateForm = true)}>
+		<UserPlus class="h-4 w-4" />
+		Create User
+	</Button>
+
+	<!-- Users Table -->
+	<div class="overflow-hidden rounded-lg border border-border">
+		<table class="w-full text-sm">
+			<thead>
+				<tr class="border-b border-border bg-muted/50">
+					<th class="px-4 py-3 text-left font-medium text-muted-foreground">Username</th>
+					<th class="px-4 py-3 text-left font-medium text-muted-foreground">Display Name</th>
+					<th class="px-4 py-3 text-left font-medium text-muted-foreground">Role</th>
+					<th class="px-4 py-3 text-left font-medium text-muted-foreground">Created</th>
+					<th class="px-4 py-3 text-left font-medium text-muted-foreground">Actions</th>
+				</tr>
+			</thead>
+			<tbody>
+				{#each data.users as user (user.id)}
+					<tr class="border-b border-border transition-colors hover:bg-muted/30">
+						<td class="px-4 py-3 font-mono">{user.username}</td>
+						<td class="px-4 py-3">{user.displayname || '—'}</td>
+						<td class="px-4 py-3">
+							<span
+								class="inline-flex rounded-full border px-2 py-0.5 text-xs font-medium {user.role ===
+								'admin'
+									? 'bg-purple-500/20 text-purple-400 border-purple-500/30'
+									: 'bg-zinc-500/20 text-zinc-400 border-zinc-500/30'}"
+							>
+								{user.role}
+							</span>
+						</td>
+						<td class="px-4 py-3 text-muted-foreground">
+							{user.createdAt ? formatDate(user.createdAt) : '—'}
+						</td>
+						<td class="px-4 py-3">
+							{#if user.id === data.user?.id}
+								<span class="text-xs text-muted-foreground">Current user</span>
+							{:else}
+								<div class="flex items-center gap-1">
+									<Button
+										variant="ghost"
+										size="icon"
+										class="h-8 w-8"
+										onclick={() => openResetDialog(user.id, user.username)}
+										title="Change Password"
+									>
+										<KeyRound class="h-4 w-4" />
+									</Button>
+									<Button
+										variant="ghost"
+										size="icon"
+										class="h-8 w-8"
+										onclick={() => openDisplaynameDialog(user)}
+										title="Change Display Name"
+									>
+										<Pencil class="h-4 w-4" />
+									</Button>
+									{#if user.id !== data.user?.id && data.user?.role === 'admin'}
+										<Button
+											variant="ghost"
+											size="icon"
+											class="h-8 w-8 text-red-400 hover:text-red-500 hover:bg-red-500/10"
+											onclick={() => openDeleteDialog(user)}
+											title="Delete User"
+										>
+											<Trash2 class="h-4 w-4" />
+										</Button>
+									{/if}
+								</div>
+							{/if}
+						</td>
+					</tr>
+				{:else}
+					<tr>
+						<td colspan="5" class="px-4 py-12 text-center text-muted-foreground">
+							No users found.
+						</td>
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+	</div>
+</div>
+
+<!-- Create User Dialog -->
+<Dialog.Root bind:open={showCreateForm}>
+	<Dialog.Content class="sm:max-w-lg">
+		<Dialog.Header>
+			<Dialog.Title>Create User</Dialog.Title>
+			<Dialog.Description>Add a new user account with role assignment</Dialog.Description>
+		</Dialog.Header>
+
+		<form
+			method="POST"
+			action="?/create"
+			use:enhance={() => {
+				return async ({ result, update }) => {
+					if (result.type === 'success') {
+						showCreateForm = false;
+						password = '';
+						confirmPassword = '';
+						role = 'user';
+					}
+					await update();
+				};
+			}}
+			class="space-y-4"
+		>
+			{#if form?.message}
+				<div class="rounded-md bg-destructive/10 px-3 py-2 text-sm text-red-400">
+					{form.message}
+				</div>
+			{/if}
+
+			<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+				<div class="space-y-2">
+					<Label for="username">Username</Label>
+					<Input
+						type="text"
+						id="username"
+						name="username"
+						required
+						minlength={3}
+						maxlength={255}
+						placeholder="Username"
+					/>
+				</div>
+				<div class="space-y-2">
+					<Label for="displayname">Display Name</Label>
+					<Input
+						type="text"
+						id="displayname"
+						name="displayname"
+						maxlength={255}
+						placeholder="Display Name (optional)"
+					/>
+				</div>
+				<div class="space-y-2 sm:col-span-2">
+					<Label for="role">Role</Label>
+					<input type="hidden" name="role" value={role} />
+					<Select.Root type="single" bind:value={role}>
+						<Select.Trigger class="w-full">
+							{role === 'admin' ? 'Admin' : 'User'}
+						</Select.Trigger>
+						<Select.Content>
+							<Select.Item value="user" label="User" />
+							<Select.Item value="admin" label="Admin" />
+						</Select.Content>
+					</Select.Root>
+				</div>
+			</div>
+
+			<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+				<div class="space-y-2">
+					<Label for="password">Password</Label>
+					<Input
+						type="password"
+						id="password"
+						name="password"
+						required
+						minlength={8}
+						maxlength={255}
+						placeholder="Password"
+						bind:value={password}
+					/>
+				</div>
+				<div class="space-y-2">
+					<Label for="confirmPassword">Confirm Password</Label>
+					<Input
+						type="password"
+						id="confirmPassword"
+						name="confirmPassword"
+						required
+						minlength={8}
+						maxlength={255}
+						placeholder="Confirm password"
+						bind:value={confirmPassword}
+					/>
+				</div>
+			</div>
+
+			{#if password.length > 0}
+				<div class="grid grid-cols-2 gap-x-4 gap-y-1 text-xs sm:grid-cols-3">
+					<span class={policies.minLength ? 'text-green-400' : 'text-muted-foreground'}>
+						{policies.minLength ? '✓' : '○'} Min 8 characters
+					</span>
+					<span class={policies.uppercase ? 'text-green-400' : 'text-muted-foreground'}>
+						{policies.uppercase ? '✓' : '○'} Uppercase letter
+					</span>
+					<span class={policies.lowercase ? 'text-green-400' : 'text-muted-foreground'}>
+						{policies.lowercase ? '✓' : '○'} Lowercase letter
+					</span>
+					<span class={policies.number ? 'text-green-400' : 'text-muted-foreground'}>
+						{policies.number ? '✓' : '○'} Number
+					</span>
+					<span class={policies.special ? 'text-green-400' : 'text-muted-foreground'}>
+						{policies.special ? '✓' : '○'} Special character
+					</span>
+					<span class={policies.match ? 'text-green-400' : 'text-muted-foreground'}>
+						{policies.match ? '✓' : '○'} Passwords match
+					</span>
+				</div>
+			{/if}
+
+			<Dialog.Footer>
+				<Button type="button" variant="outline" onclick={() => (showCreateForm = false)}>
+					Cancel
+				</Button>
+				<Button type="submit" disabled={!allPoliciesMet}>
+					<UserPlus class="h-4 w-4" />
+					Create User
+				</Button>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>
+
+<!-- Reset Password Dialog -->
+<Dialog.Root bind:open={resetDialogOpen}>
+	<Dialog.Content class="sm:max-w-md">
+		<Dialog.Header>
+			<Dialog.Title>Reset Password</Dialog.Title>
+			<Dialog.Description>
+				Set a new password for <span class="font-medium text-foreground">{resetUsername}</span>
+			</Dialog.Description>
+		</Dialog.Header>
+
+		<form
+			method="POST"
+			action="?/resetPassword"
+			use:enhance={() => {
+				return async ({ result, update }) => {
+					if (result.type === 'success') {
+						resetDialogOpen = false;
+					}
+					await update();
+				};
+			}}
+			class="space-y-4"
+		>
+			<input type="hidden" name="userId" value={resetUserId} />
+
+			<div class="space-y-2">
+				<Label for="resetNewPassword">New Password</Label>
+				<Input
+					type="password"
+					id="resetNewPassword"
+					name="newPassword"
+					required
+					minlength={8}
+					maxlength={255}
+					placeholder="New password"
+					bind:value={resetPassword}
+				/>
+			</div>
+
+			<div class="space-y-2">
+				<Label for="resetConfirmPassword">Confirm New Password</Label>
+				<Input
+					type="password"
+					id="resetConfirmPassword"
+					name="confirmPassword"
+					required
+					minlength={8}
+					maxlength={255}
+					placeholder="Confirm new password"
+					bind:value={resetConfirmPassword}
+				/>
+			</div>
+
+			{#if resetPassword.length > 0}
+				<div class="grid grid-cols-2 gap-x-4 gap-y-1 text-xs">
+					<span class={resetPolicies.minLength ? 'text-green-400' : 'text-muted-foreground'}>
+						{resetPolicies.minLength ? '✓' : '○'} Min 8 characters
+					</span>
+					<span class={resetPolicies.uppercase ? 'text-green-400' : 'text-muted-foreground'}>
+						{resetPolicies.uppercase ? '✓' : '○'} Uppercase letter
+					</span>
+					<span class={resetPolicies.lowercase ? 'text-green-400' : 'text-muted-foreground'}>
+						{resetPolicies.lowercase ? '✓' : '○'} Lowercase letter
+					</span>
+					<span class={resetPolicies.number ? 'text-green-400' : 'text-muted-foreground'}>
+						{resetPolicies.number ? '✓' : '○'} Number
+					</span>
+					<span class={resetPolicies.special ? 'text-green-400' : 'text-muted-foreground'}>
+						{resetPolicies.special ? '✓' : '○'} Special character
+					</span>
+					<span class={resetPolicies.match ? 'text-green-400' : 'text-muted-foreground'}>
+						{resetPolicies.match ? '✓' : '○'} Passwords match
+					</span>
+				</div>
+			{/if}
+
+			<Dialog.Footer>
+				<Button type="button" variant="outline" onclick={() => (resetDialogOpen = false)}>
+					Cancel
+				</Button>
+				<Button type="submit" disabled={!allResetPoliciesMet}>
+					Reset Password
+				</Button>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>
+
+<!-- Update Displayname Dialog -->
+<Dialog.Root bind:open={displaynameDialogOpen}>
+	<Dialog.Content class="sm:max-w-md">
+		<Dialog.Header>
+			<Dialog.Title>Update Display Name</Dialog.Title>
+			<Dialog.Description>
+				Update display name for <span class="font-medium text-foreground">{selectedUser?.username}</span>
+			</Dialog.Description>
+		</Dialog.Header>
+
+		<form
+			method="POST"
+			action="?/updateDisplayname"
+			use:enhance={() => {
+				return async ({ result, update }) => {
+					if (result.type === 'success') {
+						displaynameDialogOpen = false;
+					}
+					await update();
+				};
+			}}
+			class="space-y-4"
+		>
+			<input type="hidden" name="userId" value={selectedUser?.id} />
+
+			<div class="space-y-2">
+				<Label for="updateDisplayname">Display Name</Label>
+				<Input
+					type="text"
+					id="updateDisplayname"
+					name="displayname"
+					maxlength={255}
+					placeholder="Display Name"
+					bind:value={newDisplayname}
+				/>
+			</div>
+
+			<Dialog.Footer>
+				<Button type="button" variant="outline" onclick={() => (displaynameDialogOpen = false)}>
+					Cancel
+				</Button>
+				<Button type="submit">
+					Update
+				</Button>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>
+
+<!-- Delete User Alert Dialog -->
+<AlertDialog.Root bind:open={deleteDialogOpen}>
+	<AlertDialog.Trigger />
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
+			<AlertDialog.Description>
+				This action cannot be undone. This will permanently delete the user account
+				<span class="font-medium text-foreground">{selectedUser?.username}</span> and remove their
+				data from our servers.
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel onclick={() => (deleteDialogOpen = false)}>Cancel</AlertDialog.Cancel>
+			<form method="POST" action="?/delete" use:enhance={() => {
+				return async ({ result, update }) => {
+					if (result.type === 'success') {
+						deleteDialogOpen = false;
+					}
+					await update();
+				};
+			}}>
+				<input type="hidden" name="userId" value={selectedUser?.id} />
+				<Button type="submit" variant="destructive">
+					Delete User
+				</Button>
+			</form>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>
diff --git a/server/package.json b/server/package.json
index 987b510..85edc65 100644
--- a/server/package.json
+++ b/server/package.json
@@ -7,6 +7,7 @@
     "start": "bun run src/index.ts"
   },
   "dependencies": {
+    "@node-rs/argon2": "^2.0.2",
     "elysia": "^1.2.0",
     "mysql2": "^3.11.0"
   },
diff --git a/server/src/db/migrate.ts b/server/src/db/migrate.ts
index ad65da3..350680c 100644
--- a/server/src/db/migrate.ts
+++ b/server/src/db/migrate.ts
@@ -1,5 +1,7 @@
 import { readFileSync } from "fs";
 import { join } from "path";
+import { randomUUID } from "crypto";
+import { hash } from "@node-rs/argon2";
 import { getPool } from "./connection";
 
 export async function runMigrations(): Promise<void> {
@@ -33,5 +35,23 @@ export async function runMigrations(): Promise<void> {
     }
   }
 
+  // Seed default admin user if user table is empty
+  const [rows] = await pool.execute("SELECT COUNT(*) as count FROM `user`");
+  const userCount = (rows as Array<{ count: number }>)[0].count;
+  if (userCount === 0) {
+    const passwordHash = await hash("admin", {
+      memoryCost: 19456,
+      timeCost: 2,
+      outputLen: 32,
+      parallelism: 1
+    });
+    const id = randomUUID();
+    await pool.execute(
+      "INSERT INTO `user` (`id`, `username`, `password_hash`, `role`) VALUES (?, ?, ?, ?)",
+      [id, "admin", passwordHash, "admin"]
+    );
+    console.log("Default admin user created (username: admin, password: admin)");
+  }
+
   console.log("Database migrations completed");
 }
diff --git a/server/src/db/schema.sql b/server/src/db/schema.sql
index 034406c..73b1726 100644
--- a/server/src/db/schema.sql
+++ b/server/src/db/schema.sql
@@ -36,3 +36,19 @@ CREATE TABLE IF NOT EXISTS `rate_limit_hwid` (
   `window_start` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
   `count` INT UNSIGNED NOT NULL DEFAULT 0
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+CREATE TABLE IF NOT EXISTS `user` (
+  `id` VARCHAR(255) PRIMARY KEY,
+  `username` VARCHAR(255) NOT NULL UNIQUE,
+  `password_hash` VARCHAR(255) NOT NULL,
+  `role` ENUM('admin', 'user') NOT NULL DEFAULT 'user',
+  `created_at` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  `displayname` VARCHAR(255) NOT NULL DEFAULT ''
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+CREATE TABLE IF NOT EXISTS `session` (
+  `id` VARCHAR(255) PRIMARY KEY,
+  `user_id` VARCHAR(255) NOT NULL,
+  `expires_at` DATETIME NOT NULL,
+  CONSTRAINT `fk_session_user` FOREIGN KEY (`user_id`) REFERENCES `user`(`id`) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;