diff --git a/docs/Dockerfile b/docs/Dockerfile
new file mode 100644
index 000000000..8cf6f4554
--- /dev/null
+++ b/docs/Dockerfile
@@ -0,0 +1,7 @@
+# Mintlify Docs Deployment
+FROM node:20-alpine
+WORKDIR /app
+RUN npm install -g mintlify@latest
+COPY . .
+EXPOSE 3000
+CMD ["sh", "-c", "mintlify dev --port ${PORT:-3000}"]
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cbcf2975f..fdaba957d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -100,6 +100,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      cmdk:
+        specifier: ^1.1.1
+        version: 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       diff:
         specifier: ^8.0.3
         version: 8.0.3
@@ -112,6 +115,9 @@ importers:
       next-auth:
         specifier: ^4.24.13
         version: 4.24.13(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      next-themes:
+        specifier: ^0.4.6
+        version: 0.4.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       radix-ui:
         specifier: ^1.4.3
         version: 1.4.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -2806,6 +2812,12 @@ packages:
     resolution: {integrity: sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA==}
     engines: {node: '>=0.10.0'}
 
+  cmdk@1.1.1:
+    resolution: {integrity: sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==}
+    peerDependencies:
+      react: ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^18 || ^19 || ^19.0.0-rc
+
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -3981,6 +3993,12 @@ packages:
       nodemailer:
         optional: true
 
+  next-themes@0.4.6:
+    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
+    peerDependencies:
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+
   next@16.1.6:
     resolution: {integrity: sha512-hkyRkcu5x/41KoqnROkfTm2pZVbKxvbZRuNvKXLRXxs3VfyO0WhY50TQS40EuKO9SW3rBj/sF3WbVwDACeMZyw==}
     engines: {node: '>=20.9.0'}
@@ -7809,6 +7827,18 @@ snapshots:
 
   cluster-key-slot@1.1.2: {}
 
+  cmdk@1.1.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
@@ -9025,6 +9055,11 @@ snapshots:
       react-dom: 19.2.4(react@19.2.4)
       uuid: 8.3.2
 
+  next-themes@0.4.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+
   next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
     dependencies:
       '@next/env': 16.1.6
diff --git a/railway.json b/railway.json
new file mode 100644
index 000000000..4c4efc029
--- /dev/null
+++ b/railway.json
@@ -0,0 +1,11 @@
+{
+  "$schema": "https://railway.app/railway.schema.json",
+  "build": {
+    "builder": "DOCKERFILE",
+    "dockerfilePath": "docs/Dockerfile"
+  },
+  "deploy": {
+    "restartPolicyType": "ON_FAILURE",
+    "restartPolicyMaxRetries": 3
+  }
+}
diff --git a/web/package.json b/web/package.json
index 03d349dac..de463cb4f 100644
--- a/web/package.json
+++ b/web/package.json
@@ -20,6 +20,7 @@
     "@radix-ui/react-slot": "^1.2.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
     "diff": "^8.0.3",
     "lucide-react": "^0.525.0",
     "next": "^16.1.6",
diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
index 349e48ef1..389047e00 100644
--- a/web/src/app/layout.tsx
+++ b/web/src/app/layout.tsx
@@ -13,7 +13,7 @@ export const metadata: Metadata = {
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en" className="dark" suppressHydrationWarning>
+    <html lang="en" suppressHydrationWarning>
       <body className={inter.className}>
         <Providers>{children}</Providers>
       </body>
diff --git a/web/src/components/dashboard/config-sections/AiSection.tsx b/web/src/components/dashboard/config-sections/AiSection.tsx
index e8fce6b68..c0b271572 100644
--- a/web/src/components/dashboard/config-sections/AiSection.tsx
+++ b/web/src/components/dashboard/config-sections/AiSection.tsx
@@ -1,8 +1,9 @@
 'use client';
 
 import { SystemPromptEditor } from '@/components/dashboard/system-prompt-editor';
-import { ToggleSwitch } from '@/components/dashboard/toggle-switch';
 import { Card, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
 import type { GuildConfig } from '@/lib/config-utils';
 import { SYSTEM_PROMPT_MAX_LENGTH } from '@/types/config';
 
@@ -28,12 +29,18 @@ export function AiSection({
               <CardTitle className="text-base">AI Chat</CardTitle>
               <CardDescription>Configure the AI assistant behavior.</CardDescription>
             </div>
-            <ToggleSwitch
-              checked={draftConfig.ai?.enabled ?? false}
-              onChange={onEnabledChange}
-              disabled={saving}
-              label="AI Chat"
-            />
+            <div className="flex items-center gap-2">
+              <Switch
+                id="ai-toggle"
+                checked={draftConfig.ai?.enabled ?? false}
+                onCheckedChange={onEnabledChange}
+                disabled={saving}
+                aria-label="Toggle AI Chat"
+              />
+              <Label htmlFor="ai-toggle" className="sr-only">
+                AI Chat
+              </Label>
+            </div>
           </div>
         </CardHeader>
       </Card>
diff --git a/web/src/components/dashboard/config-sections/ModerationSection.tsx b/web/src/components/dashboard/config-sections/ModerationSection.tsx
index 3f4d804b8..58abc3482 100644
--- a/web/src/components/dashboard/config-sections/ModerationSection.tsx
+++ b/web/src/components/dashboard/config-sections/ModerationSection.tsx
@@ -1,12 +1,11 @@
 'use client';
 
-import { ToggleSwitch } from '@/components/dashboard/toggle-switch';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
 import type { GuildConfig } from '@/lib/config-utils';
 
-const inputClasses =
-  'w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50';
-
 interface ModerationSectionProps {
   draftConfig: GuildConfig;
   saving: boolean;
@@ -36,56 +35,65 @@ export function ModerationSection({
               Configure moderation, escalation, and logging settings.
             </CardDescription>
           </div>
-          <ToggleSwitch
+          <Switch
             checked={draftConfig.moderation?.enabled ?? false}
-            onChange={onEnabledChange}
+            onCheckedChange={onEnabledChange}
             disabled={saving}
-            label="Moderation"
+            aria-label="Toggle Moderation"
           />
         </div>
       </CardHeader>
       <CardContent className="space-y-4">
-        <label className="space-y-2">
-          <span className="text-sm font-medium">Alert Channel ID</span>
-          <input
+        <div className="space-y-2">
+          <Label htmlFor="alert-channel">Alert Channel ID</Label>
+          <Input
+            id="alert-channel"
             type="text"
             value={draftConfig.moderation?.alertChannelId ?? ''}
             onChange={(e) => onFieldChange('alertChannelId', e.target.value)}
             disabled={saving}
-            className={inputClasses}
             placeholder="Channel ID for moderation alerts"
           />
-        </label>
+        </div>
         <div className="flex items-center justify-between">
-          <span className="text-sm font-medium">Auto-delete flagged messages</span>
-          <ToggleSwitch
+          <Label htmlFor="auto-delete" className="text-sm font-medium">
+            Auto-delete flagged messages
+          </Label>
+          <Switch
+            id="auto-delete"
             checked={draftConfig.moderation?.autoDelete ?? false}
-            onChange={(v) => onFieldChange('autoDelete', v)}
+            onCheckedChange={(v) => onFieldChange('autoDelete', v)}
             disabled={saving}
-            label="Auto Delete"
+            aria-label="Toggle auto-delete"
           />
         </div>
         <fieldset className="space-y-2">
           <legend className="text-sm font-medium">DM Notifications</legend>
           {(['warn', 'timeout', 'kick', 'ban'] as const).map((action) => (
             <div key={action} className="flex items-center justify-between">
-              <span className="text-sm capitalize text-muted-foreground">{action}</span>
-              <ToggleSwitch
+              <Label htmlFor={`dm-${action}`} className="text-sm capitalize text-muted-foreground">
+                {action}
+              </Label>
+              <Switch
+                id={`dm-${action}`}
                 checked={draftConfig.moderation?.dmNotifications?.[action] ?? false}
-                onChange={(v) => onDmNotificationChange(action, v)}
+                onCheckedChange={(v) => onDmNotificationChange(action, v)}
                 disabled={saving}
-                label={`DM on ${action}`}
+                aria-label={`DM on ${action}`}
               />
             </div>
           ))}
         </fieldset>
         <div className="flex items-center justify-between">
-          <span className="text-sm font-medium">Escalation Enabled</span>
-          <ToggleSwitch
+          <Label htmlFor="escalation" className="text-sm font-medium">
+            Escalation Enabled
+          </Label>
+          <Switch
+            id="escalation"
             checked={draftConfig.moderation?.escalation?.enabled ?? false}
-            onChange={(v) => onEscalationChange(v)}
+            onCheckedChange={(v) => onEscalationChange(v)}
             disabled={saving}
-            label="Escalation"
+            aria-label="Toggle escalation"
           />
         </div>
       </CardContent>
diff --git a/web/src/components/dashboard/config-sections/NumberField.tsx b/web/src/components/dashboard/config-sections/NumberField.tsx
index a013320b4..fd174c6c5 100644
--- a/web/src/components/dashboard/config-sections/NumberField.tsx
+++ b/web/src/components/dashboard/config-sections/NumberField.tsx
@@ -1,5 +1,9 @@
-const inputClasses =
-  'w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50';
+'use client';
+
+import { useId } from 'react';
+
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 
 interface NumberFieldProps {
   label: string;
@@ -11,10 +15,12 @@ interface NumberFieldProps {
 }
 
 export function NumberField({ label, value, onChange, disabled, min, step }: NumberFieldProps) {
+  const id = useId();
   return (
-    <label className="space-y-2">
-      <span className="text-sm font-medium">{label}</span>
-      <input
+    <div className="space-y-2">
+      <Label htmlFor={id}>{label}</Label>
+      <Input
+        id={id}
         type="number"
         step={step}
         min={min}
@@ -27,8 +33,7 @@ export function NumberField({ label, value, onChange, disabled, min, step }: Num
           onChange(num);
         }}
         disabled={disabled}
-        className={inputClasses}
       />
-    </label>
+    </div>
   );
 }
diff --git a/web/src/components/dashboard/config-sections/TriageSection.tsx b/web/src/components/dashboard/config-sections/TriageSection.tsx
index 393510c43..bc91eebd0 100644
--- a/web/src/components/dashboard/config-sections/TriageSection.tsx
+++ b/web/src/components/dashboard/config-sections/TriageSection.tsx
@@ -1,13 +1,12 @@
 'use client';
 
-import { ToggleSwitch } from '@/components/dashboard/toggle-switch';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
 import type { GuildConfig } from '@/lib/config-utils';
 import { NumberField } from './NumberField';
 
-const inputClasses =
-  'w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50';
-
 interface TriageSectionProps {
   draftConfig: GuildConfig;
   saving: boolean;
@@ -33,37 +32,37 @@ export function TriageSection({
               Configure message triage classifier, responder models, and channels.
             </CardDescription>
           </div>
-          <ToggleSwitch
+          <Switch
             checked={draftConfig.triage?.enabled ?? false}
-            onChange={onEnabledChange}
+            onCheckedChange={onEnabledChange}
             disabled={saving}
-            label="Triage"
+            aria-label="Toggle Triage"
           />
         </div>
       </CardHeader>
       <CardContent className="space-y-4">
-        <label className="space-y-2">
-          <span className="text-sm font-medium">Classify Model</span>
-          <input
+        <div className="space-y-2">
+          <Label htmlFor="classify-model">Classify Model</Label>
+          <Input
+            id="classify-model"
             type="text"
             value={draftConfig.triage?.classifyModel ?? ''}
             onChange={(e) => onFieldChange('classifyModel', e.target.value)}
             disabled={saving}
-            className={inputClasses}
             placeholder="e.g. claude-haiku-4-5"
           />
-        </label>
-        <label className="space-y-2">
-          <span className="text-sm font-medium">Respond Model</span>
-          <input
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="respond-model">Respond Model</Label>
+          <Input
+            id="respond-model"
             type="text"
             value={draftConfig.triage?.respondModel ?? ''}
             onChange={(e) => onFieldChange('respondModel', e.target.value)}
             disabled={saving}
-            className={inputClasses}
             placeholder="e.g. claude-sonnet-4-6"
           />
-        </label>
+        </div>
         <div className="grid grid-cols-2 gap-4">
           <NumberField
             label="Classify Budget"
@@ -115,43 +114,52 @@ export function TriageSection({
           />
         </div>
         <div className="flex items-center justify-between">
-          <span className="text-sm font-medium">Streaming</span>
-          <ToggleSwitch
+          <Label htmlFor="streaming" className="text-sm font-medium">
+            Streaming
+          </Label>
+          <Switch
+            id="streaming"
             checked={draftConfig.triage?.streaming ?? false}
-            onChange={(v) => onFieldChange('streaming', v)}
+            onCheckedChange={(v) => onFieldChange('streaming', v)}
             disabled={saving}
-            label="Streaming"
+            aria-label="Toggle streaming"
           />
         </div>
         <div className="flex items-center justify-between">
-          <span className="text-sm font-medium">Moderation Response</span>
-          <ToggleSwitch
+          <Label htmlFor="moderation-response" className="text-sm font-medium">
+            Moderation Response
+          </Label>
+          <Switch
+            id="moderation-response"
             checked={draftConfig.triage?.moderationResponse ?? false}
-            onChange={(v) => onFieldChange('moderationResponse', v)}
+            onCheckedChange={(v) => onFieldChange('moderationResponse', v)}
             disabled={saving}
-            label="Moderation Response"
+            aria-label="Toggle moderation response"
           />
         </div>
         <div className="flex items-center justify-between">
-          <span className="text-sm font-medium">Debug Footer</span>
-          <ToggleSwitch
+          <Label htmlFor="debug-footer" className="text-sm font-medium">
+            Debug Footer
+          </Label>
+          <Switch
+            id="debug-footer"
             checked={draftConfig.triage?.debugFooter ?? false}
-            onChange={(v) => onFieldChange('debugFooter', v)}
+            onCheckedChange={(v) => onFieldChange('debugFooter', v)}
             disabled={saving}
-            label="Debug Footer"
+            aria-label="Toggle debug footer"
           />
         </div>
-        <label className="space-y-2">
-          <span className="text-sm font-medium">Moderation Log Channel</span>
-          <input
+        <div className="space-y-2">
+          <Label htmlFor="mod-log-channel">Moderation Log Channel</Label>
+          <Input
+            id="mod-log-channel"
             type="text"
             value={draftConfig.triage?.moderationLogChannel ?? ''}
             onChange={(e) => onFieldChange('moderationLogChannel', e.target.value)}
             disabled={saving}
-            className={inputClasses}
             placeholder="Channel ID for moderation logs"
           />
-        </label>
+        </div>
       </CardContent>
     </Card>
   );
diff --git a/web/src/components/dashboard/config-sections/WelcomeSection.tsx b/web/src/components/dashboard/config-sections/WelcomeSection.tsx
index a908b58f4..349ae39a8 100644
--- a/web/src/components/dashboard/config-sections/WelcomeSection.tsx
+++ b/web/src/components/dashboard/config-sections/WelcomeSection.tsx
@@ -1,12 +1,11 @@
 'use client';
 
-import { ToggleSwitch } from '@/components/dashboard/toggle-switch';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { Textarea } from '@/components/ui/textarea';
 import type { GuildConfig } from '@/lib/config-utils';
 
-const inputClasses =
-  'w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50';
-
 interface WelcomeSectionProps {
   draftConfig: GuildConfig;
   saving: boolean;
@@ -28,27 +27,27 @@ export function WelcomeSection({
             <CardTitle className="text-base">Welcome Messages</CardTitle>
             <CardDescription>Greet new members when they join the server.</CardDescription>
           </div>
-          <ToggleSwitch
+          <Switch
             checked={draftConfig.welcome?.enabled ?? false}
-            onChange={onEnabledChange}
+            onCheckedChange={onEnabledChange}
             disabled={saving}
-            label="Welcome Messages"
+            aria-label="Toggle Welcome Messages"
           />
         </div>
       </CardHeader>
       <CardContent>
-        <label className="space-y-2">
-          <span className="text-sm font-medium">Welcome Message</span>
-          <textarea
+        <div className="space-y-2">
+          <Label htmlFor="welcome-message">Welcome Message</Label>
+          <Textarea
+            id="welcome-message"
             value={draftConfig.welcome?.message ?? ''}
             onChange={(e) => onMessageChange(e.target.value)}
             rows={4}
             disabled={saving}
-            className={inputClasses}
             placeholder="Welcome message template..."
             aria-describedby="welcome-message-hint"
           />
-        </label>
+        </div>
         <p id="welcome-message-hint" className="mt-1 text-xs text-muted-foreground">
           Use {'{user}'} for the member mention and {'{memberCount}'} for the server member count.
         </p>
diff --git a/web/src/components/layout/header.tsx b/web/src/components/layout/header.tsx
index f0f14939d..75f0a3ebc 100644
--- a/web/src/components/layout/header.tsx
+++ b/web/src/components/layout/header.tsx
@@ -16,6 +16,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { Skeleton } from '@/components/ui/skeleton';
 import { MobileSidebar } from './mobile-sidebar';
+import { ThemeToggle } from '@/components/theme-toggle';
 
 export function Header() {
   const { data: session, status } = useSession();
@@ -46,6 +47,7 @@ export function Header() {
       </div>
 
       <div className="ml-auto flex items-center gap-4">
+        <ThemeToggle />
         {status === 'loading' && (
           <Skeleton className="h-8 w-8 rounded-full" data-testid="header-skeleton" />
         )}
diff --git a/web/src/components/providers.tsx b/web/src/components/providers.tsx
index 2f14aac84..2ea51d46c 100644
--- a/web/src/components/providers.tsx
+++ b/web/src/components/providers.tsx
@@ -3,21 +3,31 @@
 import { SessionProvider } from 'next-auth/react';
 import type { ReactNode } from 'react';
 import { Toaster } from 'sonner';
+import { ThemeProvider } from '@/components/theme-provider';
 
 /**
- * Wraps application UI with NextAuth session context and a global toast container.
+ * Wraps application UI with NextAuth session context, theme provider, and a global toast container.
  *
  * Session error handling (e.g. RefreshTokenError) is handled elsewhere (the Header component),
  * which signs out and redirects to /login.
  *
- * @returns A React element that renders a SessionProvider around `children` and mounts a Toaster
+ * Theme defaults to system preference with CSS variable-based dark/light mode support.
+ *
+ * @returns A React element that renders providers around `children` and mounts a Toaster
  *          positioned at the bottom-right with system theme and rich colors enabled.
  */
 export function Providers({ children }: { children: ReactNode }) {
   return (
     <SessionProvider>
-      {children}
-      <Toaster position="bottom-right" theme="system" richColors />
+      <ThemeProvider
+        attribute="class"
+        defaultTheme="system"
+        enableSystem
+        disableTransitionOnChange={false}
+      >
+        {children}
+        <Toaster position="bottom-right" theme="system" richColors />
+      </ThemeProvider>
     </SessionProvider>
   );
 }
diff --git a/web/src/components/theme-provider.tsx b/web/src/components/theme-provider.tsx
new file mode 100644
index 000000000..103c7a87f
--- /dev/null
+++ b/web/src/components/theme-provider.tsx
@@ -0,0 +1,14 @@
+'use client';
+
+import { ThemeProvider as NextThemesProvider } from 'next-themes';
+import type { ThemeProviderProps } from 'next-themes';
+
+/**
+ * Theme provider wrapper for next-themes.
+ *
+ * Provides system-aware dark/light mode support with CSS variable theming.
+ * Defaults to system preference on first load.
+ */
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}
diff --git a/web/src/components/theme-toggle.tsx b/web/src/components/theme-toggle.tsx
new file mode 100644
index 000000000..62b18d82c
--- /dev/null
+++ b/web/src/components/theme-toggle.tsx
@@ -0,0 +1,54 @@
+'use client';
+
+import { Moon, Sun } from 'lucide-react';
+import { useTheme } from 'next-themes';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { useEffect, useState } from 'react';
+
+/**
+ * Theme toggle dropdown component.
+ *
+ * Displays a button with sun/moon icons that toggles between
+ * light, dark, and system themes. Uses next-themes for state management.
+ */
+export function ThemeToggle() {
+  const { setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  // Prevent hydration mismatch by only rendering after mount
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return (
+      <Button variant="ghost" size="icon" disabled>
+        <Sun className="h-[1.2rem] w-[1.2rem]" />
+        <span className="sr-only">Toggle theme</span>
+      </Button>
+    );
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme('light')}>Light</DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('dark')}>Dark</DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('system')}>System</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/web/src/components/ui/channel-selector.tsx b/web/src/components/ui/channel-selector.tsx
new file mode 100644
index 000000000..23a5ba36a
--- /dev/null
+++ b/web/src/components/ui/channel-selector.tsx
@@ -0,0 +1,390 @@
+'use client';
+
+import {
+  Check,
+  ChevronsUpDown,
+  Hash,
+  Headphones,
+  Loader2,
+  Megaphone,
+  StickyNote,
+  Text,
+  Video,
+  X,
+} from 'lucide-react';
+import * as React from 'react';
+
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { cn } from '@/lib/utils';
+
+export interface DiscordChannel {
+  id: string;
+  name: string;
+  type: number;
+}
+
+// Discord channel types
+const CHANNEL_TYPES = {
+  GUILD_TEXT: 0,
+  DM: 1,
+  GUILD_VOICE: 2,
+  GROUP_DM: 3,
+  GUILD_CATEGORY: 4,
+  GUILD_ANNOUNCEMENT: 5,
+  ANNOUNCEMENT_THREAD: 10,
+  PUBLIC_THREAD: 11,
+  PRIVATE_THREAD: 12,
+  GUILD_STAGE_VOICE: 13,
+  GUILD_DIRECTORY: 14,
+  GUILD_FORUM: 15,
+  GUILD_MEDIA: 16,
+} as const;
+
+type ChannelTypeFilter = 'all' | 'text' | 'voice' | 'announcement' | 'thread' | 'forum';
+
+interface ChannelSelectorProps {
+  guildId: string;
+  selected: string[];
+  onChange: (selected: string[]) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  maxSelections?: number;
+  filter?: ChannelTypeFilter;
+}
+
+function getChannelIcon(type: number) {
+  switch (type) {
+    case CHANNEL_TYPES.GUILD_TEXT:
+      return <Hash className="h-4 w-4" />;
+    case CHANNEL_TYPES.GUILD_VOICE:
+      return <Headphones className="h-4 w-4" />;
+    case CHANNEL_TYPES.GUILD_ANNOUNCEMENT:
+      return <Megaphone className="h-4 w-4" />;
+    case CHANNEL_TYPES.ANNOUNCEMENT_THREAD:
+    case CHANNEL_TYPES.PUBLIC_THREAD:
+    case CHANNEL_TYPES.PRIVATE_THREAD:
+      return <Text className="h-4 w-4" />;
+    case CHANNEL_TYPES.GUILD_STAGE_VOICE:
+      return <Video className="h-4 w-4" />;
+    case CHANNEL_TYPES.GUILD_FORUM:
+    case CHANNEL_TYPES.GUILD_MEDIA:
+      return <StickyNote className="h-4 w-4" />;
+    case CHANNEL_TYPES.GUILD_CATEGORY:
+      return null;
+    default:
+      return <Hash className="h-4 w-4" />;
+  }
+}
+
+function getChannelTypeLabel(type: number): string {
+  switch (type) {
+    case CHANNEL_TYPES.GUILD_TEXT:
+      return 'Text';
+    case CHANNEL_TYPES.GUILD_VOICE:
+      return 'Voice';
+    case CHANNEL_TYPES.GUILD_CATEGORY:
+      return 'Category';
+    case CHANNEL_TYPES.GUILD_ANNOUNCEMENT:
+      return 'Announcement';
+    case CHANNEL_TYPES.ANNOUNCEMENT_THREAD:
+      return 'Thread';
+    case CHANNEL_TYPES.PUBLIC_THREAD:
+      return 'Thread';
+    case CHANNEL_TYPES.PRIVATE_THREAD:
+      return 'Private Thread';
+    case CHANNEL_TYPES.GUILD_STAGE_VOICE:
+      return 'Stage';
+    case CHANNEL_TYPES.GUILD_FORUM:
+      return 'Forum';
+    case CHANNEL_TYPES.GUILD_MEDIA:
+      return 'Media';
+    default:
+      return 'Channel';
+  }
+}
+
+function filterChannelsByType(
+  channels: DiscordChannel[],
+  filter: ChannelTypeFilter,
+): DiscordChannel[] {
+  if (filter === 'all') return channels;
+
+  return channels.filter((channel) => {
+    switch (filter) {
+      case 'text':
+        return channel.type === CHANNEL_TYPES.GUILD_TEXT;
+      case 'voice':
+        return (
+          channel.type === CHANNEL_TYPES.GUILD_VOICE ||
+          channel.type === CHANNEL_TYPES.GUILD_STAGE_VOICE
+        );
+      case 'announcement':
+        return channel.type === CHANNEL_TYPES.GUILD_ANNOUNCEMENT;
+      case 'thread':
+        return (
+          channel.type === CHANNEL_TYPES.ANNOUNCEMENT_THREAD ||
+          channel.type === CHANNEL_TYPES.PUBLIC_THREAD ||
+          channel.type === CHANNEL_TYPES.PRIVATE_THREAD
+        );
+      case 'forum':
+        return (
+          channel.type === CHANNEL_TYPES.GUILD_FORUM || channel.type === CHANNEL_TYPES.GUILD_MEDIA
+        );
+      default:
+        return true;
+    }
+  });
+}
+
+export function ChannelSelector({
+  guildId,
+  selected,
+  onChange,
+  placeholder = 'Select channels...',
+  disabled = false,
+  className,
+  maxSelections,
+  filter = 'all',
+}: ChannelSelectorProps) {
+  const [open, setOpen] = React.useState(false);
+  const [channels, setChannels] = React.useState<DiscordChannel[]>([]);
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+  const abortControllerRef = React.useRef<AbortController | null>(null);
+
+  React.useEffect(() => {
+    if (!guildId || !open) return;
+
+    async function fetchChannels() {
+      abortControllerRef.current?.abort();
+      const controller = new AbortController();
+      abortControllerRef.current = controller;
+
+      setLoading(true);
+      setError(null);
+      setChannels([]);
+
+      try {
+        const response = await fetch(`/api/guilds/${encodeURIComponent(guildId)}/channels`, {
+          signal: controller.signal,
+        });
+
+        if (response.status === 401) {
+          window.location.href = '/login';
+          return;
+        }
+
+        if (!response.ok) {
+          throw new Error(`Failed to fetch channels: ${response.statusText}`);
+        }
+
+        const data: unknown = await response.json();
+
+        if (!Array.isArray(data)) {
+          throw new Error('Invalid response: expected array');
+        }
+
+        const fetchedChannels = data.filter(
+          (c): c is DiscordChannel =>
+            typeof c === 'object' &&
+            c !== null &&
+            typeof (c as Record<string, unknown>).id === 'string' &&
+            typeof (c as Record<string, unknown>).name === 'string' &&
+            typeof (c as Record<string, unknown>).type === 'number',
+        );
+
+        const sortedChannels = fetchedChannels.sort((a, b) => {
+          if (a.type === CHANNEL_TYPES.GUILD_CATEGORY && b.type !== CHANNEL_TYPES.GUILD_CATEGORY)
+            return 1;
+          if (b.type === CHANNEL_TYPES.GUILD_CATEGORY && a.type !== CHANNEL_TYPES.GUILD_CATEGORY)
+            return -1;
+          return a.name.localeCompare(b.name);
+        });
+
+        setChannels(sortedChannels);
+      } catch (err) {
+        if (err instanceof DOMException && err.name === 'AbortError') return;
+        setError(err instanceof Error ? err.message : 'Failed to load channels');
+      } finally {
+        if (abortControllerRef.current === controller) {
+          setLoading(false);
+        }
+      }
+    }
+
+    void fetchChannels();
+
+    return () => {
+      abortControllerRef.current?.abort();
+    };
+  }, [guildId, open]);
+
+  const filteredChannels = React.useMemo(
+    () => filterChannelsByType(channels, filter),
+    [channels, filter],
+  );
+
+  const toggleChannel = React.useCallback(
+    (channelId: string) => {
+      if (selected.includes(channelId)) {
+        onChange(selected.filter((id) => id !== channelId));
+      } else if (!maxSelections || selected.length < maxSelections) {
+        onChange([...selected, channelId]);
+      }
+    },
+    [selected, onChange, maxSelections],
+  );
+
+  const removeChannel = React.useCallback(
+    (channelId: string) => {
+      onChange(selected.filter((id) => id !== channelId));
+    },
+    [selected, onChange],
+  );
+
+  const selectedChannels = React.useMemo(
+    () => channels.filter((channel) => selected.includes(channel.id)),
+    [channels, selected],
+  );
+
+  const unknownSelectedIds = React.useMemo(
+    () => selected.filter((id) => !channels.some((channel) => channel.id === id)),
+    [channels, selected],
+  );
+
+  const atMaxSelection = maxSelections !== undefined && selected.length >= maxSelections;
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            disabled={disabled || loading}
+            className="w-full justify-between"
+          >
+            <span className="truncate">
+              {selected.length > 0
+                ? `${selected.length} channel${selected.length === 1 ? '' : 's'} selected`
+                : placeholder}
+            </span>
+            {loading ? (
+              <Loader2 className="ml-2 h-4 w-4 shrink-0 animate-spin opacity-50" />
+            ) : (
+              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[300px] p-0">
+          <Command>
+            <CommandInput placeholder="Search channels..." />
+            <CommandList>
+              <CommandEmpty>
+                {loading ? (
+                  <div className="flex items-center justify-center py-4">
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    <span className="ml-2">Loading...</span>
+                  </div>
+                ) : error ? (
+                  <div className="text-destructive text-sm">{error}</div>
+                ) : (
+                  'No channels found.'
+                )}
+              </CommandEmpty>
+              <CommandGroup>
+                {filteredChannels.map((channel) => {
+                  const isSelected = selected.includes(channel.id);
+                  const isDisabled = !isSelected && atMaxSelection;
+                  const isCategory = channel.type === CHANNEL_TYPES.GUILD_CATEGORY;
+                  const icon = getChannelIcon(channel.type);
+
+                  return (
+                    <CommandItem
+                      key={channel.id}
+                      value={`${channel.name} ${getChannelTypeLabel(channel.type)}`}
+                      onSelect={() => toggleChannel(channel.id)}
+                      disabled={isDisabled || isCategory}
+                      className={cn(
+                        'flex items-center gap-2',
+                        (isDisabled || isCategory) && 'cursor-not-allowed opacity-50',
+                        isCategory && 'font-semibold bg-muted/50 mt-1',
+                      )}
+                    >
+                      {icon && <span className="text-muted-foreground">{icon}</span>}
+                      <span className="flex-1 truncate">{channel.name}</span>
+                      {!isCategory && (
+                        <Check
+                          className={cn('h-4 w-4', isSelected ? 'opacity-100' : 'opacity-0')}
+                        />
+                      )}
+                    </CommandItem>
+                  );
+                })}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+
+      {(selectedChannels.length > 0 || unknownSelectedIds.length > 0) && (
+        <div className="flex flex-wrap gap-1">
+          {selectedChannels.map((channel) => {
+            const icon = getChannelIcon(channel.type);
+            return (
+              <Badge key={channel.id} variant="secondary" className="flex items-center gap-1 pr-1">
+                {icon && <span className="text-muted-foreground scale-75">{icon}</span>}
+                <span className="truncate max-w-[150px]">#{channel.name}</span>
+                <button
+                  type="button"
+                  onClick={() => removeChannel(channel.id)}
+                  className="ml-1 rounded-full p-0.5 hover:bg-black/10 dark:hover:bg-white/10"
+                  disabled={disabled}
+                  aria-label={`Remove #${channel.name}`}
+                >
+                  <X className="h-3 w-3" />
+                </button>
+              </Badge>
+            );
+          })}
+          {unknownSelectedIds.map((id) => (
+            <Badge key={id} variant="secondary" className="flex items-center gap-1 pr-1">
+              <span className="text-muted-foreground scale-75"><Hash className="h-4 w-4" /></span>
+              <span className="truncate max-w-[150px]">#unknown-channel</span>
+              <button
+                type="button"
+                onClick={() => removeChannel(id)}
+                className="ml-1 rounded-full p-0.5 hover:bg-black/10 dark:hover:bg-white/10"
+                disabled={disabled}
+                aria-label={`Remove unknown channel ${id}`}
+              >
+                <X className="h-3 w-3" />
+              </button>
+            </Badge>
+          ))}
+        </div>
+      )}
+
+      {maxSelections !== undefined && (
+        <p className="text-muted-foreground text-xs">
+          {selected.length} of {maxSelections} maximum channels selected
+        </p>
+      )}
+    </div>
+  );
+}
+
+export { CHANNEL_TYPES, getChannelIcon, getChannelTypeLabel };
+export type { ChannelTypeFilter };
diff --git a/web/src/components/ui/checkbox.tsx b/web/src/components/ui/checkbox.tsx
new file mode 100644
index 000000000..25fa67dc9
--- /dev/null
+++ b/web/src/components/ui/checkbox.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import * as React from 'react';
+import { CheckIcon } from 'lucide-react';
+import { Checkbox as CheckboxPrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };
diff --git a/web/src/components/ui/command.tsx b/web/src/components/ui/command.tsx
new file mode 100644
index 000000000..23337323d
--- /dev/null
+++ b/web/src/components/ui/command.tsx
@@ -0,0 +1,161 @@
+'use client';
+
+import * as React from 'react';
+import { Command as CommandPrimitive } from 'cmdk';
+import { SearchIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+
+function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandDialog({
+  title = 'Command Palette',
+  description = 'Search for a command to run...',
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string;
+  description?: string;
+  className?: string;
+  showCloseButton?: boolean;
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogContent
+        className={cn('overflow-hidden p-0', className)}
+        showCloseButton={showCloseButton}
+      >
+        <DialogHeader className="sr-only">
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground *:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div data-slot="command-input-wrapper" className="flex h-9 items-center gap-2 border-b px-3">
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', className)}
+      {...props}
+    />
+  );
+}
+
+function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  );
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn('bg-border -mx-1 h-px', className)}
+      {...props}
+    />
+  );
+}
+
+function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandShortcut({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};
diff --git a/web/src/components/ui/dialog.tsx b/web/src/components/ui/dialog.tsx
index 624c9a1d7..a81826fff 100644
--- a/web/src/components/ui/dialog.tsx
+++ b/web/src/components/ui/dialog.tsx
@@ -1,100 +1,144 @@
 'use client';
 
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { X } from 'lucide-react';
 import * as React from 'react';
+import { XIcon } from 'lucide-react';
+import { Dialog as DialogPrimitive } from 'radix-ui';
+
 import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+
+function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
 
-const Dialog = DialogPrimitive.Root;
-const DialogTrigger = DialogPrimitive.Trigger;
-const DialogPortal = DialogPrimitive.Portal;
-const DialogClose = DialogPrimitive.Close;
+function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
 
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-      className,
-    )}
-    {...props}
-  />
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
 
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
         className,
       )}
       {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
+    />
+  );
+}
 
-const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
-);
-DialogHeader.displayName = 'DialogHeader';
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
 
-const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
-    {...props}
-  />
-);
-DialogFooter.displayName = 'DialogFooter';
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  );
+}
 
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
-    {...props}
-  />
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  );
+}
 
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
-    {...props}
-  />
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn('text-lg leading-none font-semibold', className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
 
 export {
   Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogTrigger,
   DialogClose,
   DialogContent,
-  DialogHeader,
+  DialogDescription,
   DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
   DialogTitle,
-  DialogDescription,
+  DialogTrigger,
 };
diff --git a/web/src/components/ui/form.tsx b/web/src/components/ui/form.tsx
new file mode 100644
index 000000000..02462c52f
--- /dev/null
+++ b/web/src/components/ui/form.tsx
@@ -0,0 +1,156 @@
+'use client';
+
+import * as React from 'react';
+import type { Label as LabelPrimitive } from 'radix-ui';
+import { Slot } from 'radix-ui';
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from 'react-hook-form';
+
+import { cn } from '@/lib/utils';
+import { Label } from '@/components/ui/label';
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue | null>(null);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  if (!fieldContext) {
+    throw new Error('useFormField should be used within <FormField>');
+  }
+
+  const itemContext = React.useContext(FormItemContext);
+  if (!itemContext) {
+    throw new Error('useFormField should be used within <FormItem>');
+  }
+
+  const { getFieldState } = useFormContext();
+  const formState = useFormState({ name: fieldContext.name });
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue | null>(null);
+
+function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div data-slot="form-item" className={cn('grid gap-2', className)} {...props} />
+    </FormItemContext.Provider>
+  );
+}
+
+function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn('data-[error=true]:text-destructive', className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot.Root>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+
+  return (
+    <Slot.Root
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<'p'>) {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? '') : props.children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn('text-destructive text-sm', className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};
diff --git a/web/src/components/ui/popover.tsx b/web/src/components/ui/popover.tsx
new file mode 100644
index 000000000..053fa202e
--- /dev/null
+++ b/web/src/components/ui/popover.tsx
@@ -0,0 +1,74 @@
+'use client';
+
+import * as React from 'react';
+import { Popover as PopoverPrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+}
+
+function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="popover-header"
+      className={cn('flex flex-col gap-1 text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+function PopoverTitle({ className, ...props }: React.ComponentProps<'h2'>) {
+  return <h2 data-slot="popover-title" className={cn('font-medium', className)} {...props} />;
+}
+
+function PopoverDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p
+      data-slot="popover-description"
+      className={cn('text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverAnchor,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverDescription,
+};
diff --git a/web/src/components/ui/role-selector.tsx b/web/src/components/ui/role-selector.tsx
new file mode 100644
index 000000000..2017725dc
--- /dev/null
+++ b/web/src/components/ui/role-selector.tsx
@@ -0,0 +1,279 @@
+'use client';
+
+import { Check, ChevronsUpDown, Loader2, X } from 'lucide-react';
+import * as React from 'react';
+
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { cn } from '@/lib/utils';
+
+export interface DiscordRole {
+  id: string;
+  name: string;
+  color: number;
+}
+
+interface RoleSelectorProps {
+  guildId: string;
+  selected: string[];
+  onChange: (selected: string[]) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  maxSelections?: number;
+}
+
+function discordColorToHex(color: number): string | null {
+  if (!color) return null;
+  return `#${color.toString(16).padStart(6, '0')}`;
+}
+
+export function RoleSelector({
+  guildId,
+  selected,
+  onChange,
+  placeholder = 'Select roles...',
+  disabled = false,
+  className,
+  maxSelections,
+}: RoleSelectorProps) {
+  const [open, setOpen] = React.useState(false);
+  const [roles, setRoles] = React.useState<DiscordRole[]>([]);
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+  const abortControllerRef = React.useRef<AbortController | null>(null);
+
+  React.useEffect(() => {
+    if (!guildId || !open) return;
+
+    async function fetchRoles() {
+      abortControllerRef.current?.abort();
+      const controller = new AbortController();
+      abortControllerRef.current = controller;
+
+      setLoading(true);
+      setRoles([]);
+      setError(null);
+
+      try {
+        const response = await fetch(`/api/guilds/${encodeURIComponent(guildId)}/roles`, {
+          signal: controller.signal,
+        });
+
+        if (response.status === 401) {
+          window.location.href = '/login';
+          return;
+        }
+
+        if (!response.ok) {
+          throw new Error(`Failed to fetch roles: ${response.statusText}`);
+        }
+
+        const data: unknown = await response.json();
+
+        if (!Array.isArray(data)) {
+          throw new Error('Invalid response: expected array');
+        }
+
+        const fetchedRoles = data.filter(
+          (r): r is DiscordRole =>
+            typeof r === 'object' &&
+            r !== null &&
+            typeof (r as Record<string, unknown>).id === 'string' &&
+            typeof (r as Record<string, unknown>).name === 'string' &&
+            typeof (r as Record<string, unknown>).color === 'number',
+        );
+
+        setRoles(fetchedRoles);
+      } catch (err) {
+        if (err instanceof DOMException && err.name === 'AbortError') return;
+        setError(err instanceof Error ? err.message : 'Failed to load roles');
+      } finally {
+        if (abortControllerRef.current === controller) {
+          setLoading(false);
+        }
+      }
+    }
+
+    void fetchRoles();
+
+    return () => {
+      abortControllerRef.current?.abort();
+    };
+  }, [guildId, open]);
+
+  const toggleRole = React.useCallback(
+    (roleId: string) => {
+      if (selected.includes(roleId)) {
+        onChange(selected.filter((id) => id !== roleId));
+      } else if (!maxSelections || selected.length < maxSelections) {
+        onChange([...selected, roleId]);
+      }
+    },
+    [selected, onChange, maxSelections],
+  );
+
+  const removeRole = React.useCallback(
+    (roleId: string) => {
+      onChange(selected.filter((id) => id !== roleId));
+    },
+    [selected, onChange],
+  );
+
+  const selectedRoles = React.useMemo(
+    () => roles.filter((role) => selected.includes(role.id)),
+    [roles, selected],
+  );
+
+  const unknownSelectedIds = React.useMemo(
+    () => selected.filter((id) => !roles.some((role) => role.id === id)),
+    [roles, selected],
+  );
+
+  const atMaxSelection = maxSelections !== undefined && selected.length >= maxSelections;
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            disabled={disabled || loading}
+            className="w-full justify-between"
+          >
+            <span className="truncate">
+              {selected.length > 0
+                ? `${selected.length} role${selected.length === 1 ? '' : 's'} selected`
+                : placeholder}
+            </span>
+            {loading ? (
+              <Loader2 className="ml-2 h-4 w-4 shrink-0 animate-spin opacity-50" />
+            ) : (
+              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[300px] p-0">
+          <Command>
+            <CommandInput placeholder="Search roles..." />
+            <CommandList>
+              <CommandEmpty>
+                {loading ? (
+                  <div className="flex items-center justify-center py-4">
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    <span className="ml-2">Loading...</span>
+                  </div>
+                ) : error ? (
+                  <div className="text-destructive text-sm">{error}</div>
+                ) : (
+                  'No roles found.'
+                )}
+              </CommandEmpty>
+              <CommandGroup>
+                {roles.map((role) => {
+                  const isSelected = selected.includes(role.id);
+                  const isDisabled = !isSelected && atMaxSelection;
+                  const colorHex = discordColorToHex(role.color);
+
+                  return (
+                    <CommandItem
+                      key={role.id}
+                      value={role.name}
+                      onSelect={() => toggleRole(role.id)}
+                      disabled={isDisabled}
+                      className={cn(
+                        'flex items-center gap-2',
+                        isDisabled && 'cursor-not-allowed opacity-50',
+                      )}
+                    >
+                      <div
+                        className="h-3 w-3 rounded-full border border-black/10"
+                        style={{ backgroundColor: colorHex ?? '#99aab5' }}
+                      />
+                      <span className="flex-1 truncate">{role.name}</span>
+                      <Check className={cn('h-4 w-4', isSelected ? 'opacity-100' : 'opacity-0')} />
+                    </CommandItem>
+                  );
+                })}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+
+      {(selectedRoles.length > 0 || unknownSelectedIds.length > 0) && (
+        <div className="flex flex-wrap gap-1">
+          {selectedRoles.map((role) => {
+            const colorHex = discordColorToHex(role.color);
+            return (
+              <Badge
+                key={role.id}
+                variant="secondary"
+                className="flex items-center gap-1 pr-1"
+                style={
+                  colorHex
+                    ? {
+                        backgroundColor: `${colorHex}20`,
+                        borderColor: colorHex,
+                        color: colorHex,
+                      }
+                    : undefined
+                }
+              >
+                <div
+                  className="h-2 w-2 rounded-full"
+                  style={{ backgroundColor: colorHex ?? '#99aab5' }}
+                />
+                <span className="truncate max-w-[150px]">{role.name}</span>
+                <button
+                  type="button"
+                  onClick={() => removeRole(role.id)}
+                  className="ml-1 rounded-full p-0.5 hover:bg-black/10 dark:hover:bg-white/10"
+                  disabled={disabled}
+                  aria-label={`Remove ${role.name}`}
+                >
+                  <X className="h-3 w-3" />
+                </button>
+              </Badge>
+            );
+          })}
+          {unknownSelectedIds.map((id) => (
+            <Badge key={id} variant="secondary" className="flex items-center gap-1 pr-1">
+              <div
+                className="h-2 w-2 rounded-full"
+                style={{ backgroundColor: '#99aab5' }}
+              />
+              <span className="truncate max-w-[150px]">Unknown role</span>
+              <button
+                type="button"
+                onClick={() => removeRole(id)}
+                className="ml-1 rounded-full p-0.5 hover:bg-black/10 dark:hover:bg-white/10"
+                disabled={disabled}
+                aria-label={`Remove unknown role ${id}`}
+              >
+                <X className="h-3 w-3" />
+              </button>
+            </Badge>
+          ))}
+        </div>
+      )}
+
+      {maxSelections !== undefined && (
+        <p className="text-muted-foreground text-xs">
+          {selected.length} of {maxSelections} maximum roles selected
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/web/src/components/ui/switch.tsx b/web/src/components/ui/switch.tsx
new file mode 100644
index 000000000..f368229b1
--- /dev/null
+++ b/web/src/components/ui/switch.tsx
@@ -0,0 +1,35 @@
+'use client';
+
+import * as React from 'react';
+import { Switch as SwitchPrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+function Switch({
+  className,
+  size = 'default',
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+  size?: 'sm' | 'default';
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6',
+        className,
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0',
+        )}
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch };