From eae0d7ce56ee996ecb42711683239e9ca8dd1237 Mon Sep 17 00:00:00 2001
From: asepharyana <superaseph@gmail.com>
Date: Sun, 26 Jul 2026 15:13:18 +0700
Subject: [PATCH] feat: enhance MessagesPanel with improved UI components and
 functionality

- Refactored MessagesPanel to utilize new UI components such as Avatar, Badge, Button, Card, Dialog, Input, Progress, ScrollArea, Select, Skeleton, and Tabs.
- Improved error handling and loading states with enhanced user feedback.
- Updated message rendering logic to support new design patterns and animations.
- Added support for image previews and improved layout for message details.
- Enhanced mobile responsiveness with useIsMobile hook adjustments.
- Cleaned up utility functions for better readability and consistency.
---
 .../frontend/src/app/dashboard/layout.tsx     |  32 +-
 services/frontend/src/app/dashboard/page.tsx  | 132 +--
 services/frontend/src/app/globals.css         | 237 ++++-
 services/frontend/src/app/layout.tsx          |   7 +-
 .../frontend/src/components/layout/header.tsx | 111 ++-
 .../src/components/layout/mobile-tab-bar.tsx  |  45 +-
 .../src/components/layout/sidebar.tsx         | 147 +++-
 services/frontend/src/components/ui/chart.tsx |   2 +-
 .../features/dashboard/dashboard-panel.tsx    | 818 ++++++++++--------
 .../frontend/src/features/live/live-panel.tsx | 671 +++++++-------
 .../src/features/mascot/mascot-chatbot.tsx    | 198 +++--
 .../src/features/messages/messages-panel.tsx  | 780 +++++++++--------
 services/frontend/src/hooks/use-mobile.ts     |  24 +-
 services/frontend/src/lib/utils.ts            |   6 +-
 14 files changed, 1907 insertions(+), 1303 deletions(-)

diff --git a/services/frontend/src/app/dashboard/layout.tsx b/services/frontend/src/app/dashboard/layout.tsx
index fa43a6f..8d258ca 100644
--- a/services/frontend/src/app/dashboard/layout.tsx
+++ b/services/frontend/src/app/dashboard/layout.tsx
@@ -2,9 +2,11 @@
 
 import { useRouter, useSearchParams } from "next/navigation";
 import { Suspense, useEffect, useRef } from "react";
+
 import { Header } from "@/components/layout/header";
 import { MobileTabBar } from "@/components/layout/mobile-tab-bar";
 import { Sidebar } from "@/components/layout/sidebar";
+import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
 import { MascotChatbot } from "@/features/mascot/mascot-chatbot";
 import { uiStateApi } from "@/lib/api";
 import { WsProvider } from "@/lib/ws/context";
@@ -48,12 +50,14 @@ function DashboardShell({ children }: { children: React.ReactNode }) {
   }, [activeTab]);
 
   return (
-    <div className="min-h-screen bg-background">
+    <div className="flex min-h-screen bg-background">
       <Sidebar activeTab={activeTab} />
-      <div className="md:pl-56 flex flex-col min-h-screen">
+      <SidebarInset className="flex flex-col">
         <Header />
-        <main className="flex-1 p-4 md:p-6 pb-20 md:pb-6">{children}</main>
-      </div>
+        <main className="flex-1 p-4 md:p-6 pb-20 md:pb-6 animate-fade-in-up">
+          {children}
+        </main>
+      </SidebarInset>
       <MobileTabBar activeTab={activeTab} />
     </div>
   );
@@ -66,15 +70,17 @@ export default function DashboardLayout({
 }) {
   return (
     <WsProvider>
-      <Suspense
-        fallback={
-          <div className="flex min-h-screen items-center justify-center">
-            <div className="size-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
-          </div>
-        }
-      >
-        <DashboardShell>{children}</DashboardShell>
-      </Suspense>
+      <SidebarProvider defaultOpen={true}>
+        <Suspense
+          fallback={
+            <div className="flex min-h-screen items-center justify-center">
+              <div className="size-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+            </div>
+          }
+        >
+          <DashboardShell>{children}</DashboardShell>
+        </Suspense>
+      </SidebarProvider>
       <MascotChatbot />
     </WsProvider>
   );
diff --git a/services/frontend/src/app/dashboard/page.tsx b/services/frontend/src/app/dashboard/page.tsx
index 76b4667..d92764b 100644
--- a/services/frontend/src/app/dashboard/page.tsx
+++ b/services/frontend/src/app/dashboard/page.tsx
@@ -1,8 +1,18 @@
 "use client";
 
-import { Loader2, RefreshCw } from "lucide-react";
+import { AlertCircle, RefreshCw } from "lucide-react";
 import { useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
 import { DashboardPanel } from "@/features/dashboard/dashboard-panel";
 import { LivePanel } from "@/features/live/live-panel";
 import { MessagesPanel } from "@/features/messages/messages-panel";
@@ -67,14 +77,28 @@ export default function DashboardPage() {
     }
   }, [configLoading, guildsLoading, resolveGuild, selectedGuildId]);
 
-  const handleGuildChange = useCallback((guildId: string) => {
-    setSelectedGuildId(guildId);
+  const handleGuildChange = useCallback((guildId: string | null) => {
+    if (guildId) setSelectedGuildId(guildId);
+  }, []);
+
+  const handleRetry = useCallback(() => {
+    setGuildsLoading(true);
+    setGuildsError(null);
+    voiceApi
+      .getGuilds()
+      .then(setGuilds)
+      .catch((err) =>
+        setGuildsError(
+          err instanceof Error ? err.message : "Failed to load guilds",
+        ),
+      )
+      .finally(() => setGuildsLoading(false));
   }, []);
 
   const isReady = !configLoading && !guildsLoading;
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-5">
       {/* Guild selector bar */}
       <GuildBar
         guilds={guilds}
@@ -82,31 +106,22 @@ export default function DashboardPage() {
         error={guildsError}
         selectedGuildId={selectedGuildId}
         onChange={handleGuildChange}
-        onRetry={() => {
-          setGuildsLoading(true);
-          setGuildsError(null);
-          voiceApi
-            .getGuilds()
-            .then(setGuilds)
-            .catch((err) =>
-              setGuildsError(
-                err instanceof Error ? err.message : "Failed to load guilds",
-              ),
-            )
-            .finally(() => setGuildsLoading(false));
-        }}
+        onRetry={handleRetry}
       />
 
       {/* Main panel */}
       {isReady ? (
-        <>
+        <div className="animate-fade-in-up">
           {tab === "live" && <LivePanel />}
           {tab === "dashboard" && <DashboardPanel guildId={selectedGuildId} />}
           {tab === "messages" && <MessagesPanel guildId={selectedGuildId} />}
-        </>
+        </div>
       ) : (
-        <div className="flex items-center justify-center py-16">
-          <Loader2 className="size-6 animate-spin text-muted-foreground" />
+        <div className="flex items-center justify-center py-24">
+          <div className="flex flex-col items-center gap-3">
+            <div className="size-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+            <p className="text-sm text-muted-foreground">Loading dashboard…</p>
+          </div>
         </div>
       )}
     </div>
@@ -127,7 +142,7 @@ function GuildBar({
   loading: boolean;
   error: string | null;
   selectedGuildId: string;
-  onChange: (id: string) => void;
+  onChange: (id: string | null) => void;
   onRetry: () => void;
 }) {
   // No guild bar if there's only one guild and it's already selected
@@ -135,61 +150,60 @@ function GuildBar({
 
   if (loading) {
     return (
-      <div className="flex items-center gap-2 rounded-lg border p-3">
-        <Loader2 className="size-4 animate-spin text-muted-foreground" />
-        <span className="text-sm text-muted-foreground">Loading guilds…</span>
+      <div className="flex items-center gap-3 rounded-xl border border-border/50 bg-card p-3">
+        <Skeleton className="h-8 w-36" />
+        <Skeleton className="h-8 w-8 rounded-full" />
       </div>
     );
   }
 
   if (error) {
     return (
-      <div className="flex items-center justify-between rounded-lg border border-destructive/30 bg-destructive/5 p-3">
-        <p className="text-sm text-muted-foreground">
-          Could not load guilds: {error}
-        </p>
-        <button
-          type="button"
-          onClick={onRetry}
-          className="inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs font-medium hover:bg-muted transition-colors"
-        >
-          <RefreshCw className="size-3" />
+      <div className="flex items-center justify-between rounded-xl border border-destructive/20 bg-destructive/5 p-3">
+        <div className="flex items-center gap-2">
+          <AlertCircle className="size-4 text-destructive shrink-0" />
+          <p className="text-sm text-muted-foreground">
+            Could not load guilds: {error}
+          </p>
+        </div>
+        <Button variant="outline" size="sm" onClick={onRetry}>
+          <RefreshCw className="size-3 mr-1" />
           Retry
-        </button>
+        </Button>
       </div>
     );
   }
 
   if (guilds.length === 0) {
     return (
-      <div className="rounded-lg border border-yellow-500/30 bg-yellow-500/5 p-3">
-        <p className="text-sm text-muted-foreground">
-          No guilds available. Make sure the Discord gateway is connected.
-        </p>
+      <div className="rounded-xl border border-yellow-500/20 bg-yellow-500/5 p-3">
+        <div className="flex items-center gap-2">
+          <AlertCircle className="size-4 text-yellow-500 shrink-0" />
+          <p className="text-sm text-muted-foreground">
+            No guilds available. Make sure the Discord gateway is connected.
+          </p>
+        </div>
       </div>
     );
   }
 
   return (
-    <div className="flex items-center gap-2 rounded-lg border p-3">
-      <label
-        htmlFor="guild-select"
-        className="text-sm font-medium text-muted-foreground whitespace-nowrap"
-      >
-        Guild:
-      </label>
-      <select
-        id="guild-select"
-        value={selectedGuildId}
-        onChange={(e) => onChange(e.target.value)}
-        className="flex-1 h-8 rounded-md border border-input bg-background px-2 text-sm"
-      >
-        {guilds.map((g) => (
-          <option key={g.id} value={g.id}>
-            {g.name}
-          </option>
-        ))}
-      </select>
+    <div className="flex items-center gap-3 rounded-xl border border-border/50 bg-card p-3">
+      <Badge variant="outline" className="shrink-0 text-xs font-normal">
+        Guild
+      </Badge>
+      <Select value={selectedGuildId} onValueChange={onChange}>
+        <SelectTrigger className="h-8 w-full max-w-xs">
+          <SelectValue placeholder="Select a guild…" />
+        </SelectTrigger>
+        <SelectContent>
+          {guilds.map((g) => (
+            <SelectItem key={g.id} value={g.id}>
+              {g.name}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
     </div>
   );
 }
diff --git a/services/frontend/src/app/globals.css b/services/frontend/src/app/globals.css
index e9318c5..4ee4fbd 100644
--- a/services/frontend/src/app/globals.css
+++ b/services/frontend/src/app/globals.css
@@ -46,6 +46,15 @@
   --radius-2xl: calc(var(--radius) * 1.8);
   --radius-3xl: calc(var(--radius) * 2.2);
   --radius-4xl: calc(var(--radius) * 2.6);
+
+  /* Sky blue accent gradient */
+  --accent-gradient: linear-gradient(135deg, oklch(0.65 0.18 240), oklch(0.65 0.15 200), oklch(0.65 0.12 180));
+  --accent-gradient-subtle: linear-gradient(135deg, oklch(0.65 0.18 240 / 0.15), oklch(0.65 0.12 180 / 0.05));
+
+  /* Glass morphism */
+  --glass-bg: oklch(1 0 0 / 0.05);
+  --glass-border: oklch(1 0 0 / 0.1);
+  --glass-shadow: 0 8px 32px oklch(0 0 0 / 0.3);
 }
 
 :root {
@@ -53,68 +62,88 @@
   --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: oklch(0.55 0.18 240);
   --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: oklch(0.95 0 0);
   --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
+  --accent: oklch(0.65 0.15 220);
   --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.87 0 0);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
+  --ring: oklch(0.65 0.18 240);
+  --chart-1: oklch(0.55 0.18 240);
+  --chart-2: oklch(0.55 0.15 200);
+  --chart-3: oklch(0.55 0.12 180);
+  --chart-4: oklch(0.55 0.2 260);
+  --chart-5: oklch(0.55 0.15 280);
   --radius: 0.625rem;
   --sidebar: oklch(0.985 0 0);
   --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary: oklch(0.55 0.18 240);
   --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-accent: oklch(0.95 0 0);
+  --sidebar-accent-foreground: oklch(0.145 0 0);
   --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --sidebar-ring: oklch(0.65 0.18 240);
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
 }
 
 .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.87 0 0);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
-  --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);
+  /* Deep navy-slate base */
+  --background: oklch(0.12 0.02 240);
+  --foreground: oklch(0.92 0.01 240);
+
+  /* Slightly lighter card */
+  --card: oklch(0.16 0.025 240);
+  --card-foreground: oklch(0.92 0.01 240);
+
+  --popover: oklch(0.16 0.025 240);
+  --popover-foreground: oklch(0.92 0.01 240);
+
+  /* Sky blue primary */
+  --primary: oklch(0.65 0.18 240);
+  --primary-foreground: oklch(0.98 0 0);
+
+  --secondary: oklch(0.22 0.02 240);
+  --secondary-foreground: oklch(0.92 0.01 240);
+
+  --muted: oklch(0.2 0.015 240);
+  --muted-foreground: oklch(0.6 0.02 240);
+
+  --accent: oklch(0.7 0.15 220);
+  --accent-foreground: oklch(0.98 0 0);
+
+  --destructive: oklch(0.6 0.22 25);
+
+  --border: oklch(1 0 0 / 0.08);
+  --input: oklch(1 0 0 / 0.12);
+
+  --ring: oklch(0.65 0.18 240);
+
+  /* Blue-teal-cyan chart palette */
+  --chart-1: oklch(0.65 0.18 240);
+  --chart-2: oklch(0.6 0.15 200);
+  --chart-3: oklch(0.6 0.12 180);
+  --chart-4: oklch(0.7 0.15 220);
+  --chart-5: oklch(0.55 0.15 260);
+
+  /* Deeper sidebar */
+  --sidebar: oklch(0.1 0.015 240);
+  --sidebar-foreground: oklch(0.92 0.01 240);
+  --sidebar-primary: oklch(0.65 0.18 240);
+  --sidebar-primary-foreground: oklch(0.98 0 0);
+  --sidebar-accent: oklch(0.2 0.02 240);
+  --sidebar-accent-foreground: oklch(0.92 0.01 240);
+  --sidebar-border: oklch(1 0 0 / 0.06);
+  --sidebar-ring: oklch(0.65 0.18 240);
+
+  /* Glass overrides for dark */
+  --glass-bg: oklch(1 0 0 / 0.05);
+  --glass-border: oklch(1 0 0 / 0.1);
 }
 
 @layer base {
@@ -125,6 +154,122 @@
     @apply bg-background text-foreground;
   }
   html {
-    @apply font-sans;
+    @apply font-sans scroll-smooth;
   }
-}
\ No newline at end of file
+
+  /* Custom selection color */
+  ::selection {
+    background: oklch(0.65 0.18 240 / 0.3);
+    color: inherit;
+  }
+
+  .dark ::selection {
+    background: oklch(0.65 0.18 240 / 0.4);
+  }
+
+  /* Scrollbar styling */
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: oklch(1 0 0 / 0.1);
+    border-radius: 999px;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: oklch(1 0 0 / 0.2);
+  }
+}
+
+/* ── Utility classes ─────────────────────────── */
+
+/* Glass card effect */
+.glass {
+  background: var(--glass-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--glass-border);
+  box-shadow: var(--glass-shadow);
+}
+
+/* Gradient text */
+.text-gradient {
+  background: var(--accent-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Gradient border (via pseudo-element trick) */
+.gradient-border {
+  position: relative;
+}
+.gradient-border::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  background: var(--accent-gradient);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
+
+/* Animated background */
+@keyframes gradient-shift {
+  0%,
+  100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+.animate-gradient {
+  background: linear-gradient(
+    -45deg,
+    oklch(0.65 0.18 240 / 0.1),
+    oklch(0.6 0.15 200 / 0.05),
+    oklch(0.12 0.02 240 / 1),
+    oklch(0.65 0.12 180 / 0.08)
+  );
+  background-size: 400% 400%;
+  animation: gradient-shift 15s ease infinite;
+}
+
+/* Counter animation placeholder - will be done in JS */
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in-up {
+  animation: fade-in-up 0.3s ease-out forwards;
+}
+
+/* Pulse ring for live indicators */
+@keyframes pulse-ring {
+  0% {
+    transform: scale(0.8);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(2.5);
+    opacity: 0;
+  }
+}
+
+.live-pulse-ring {
+  animation: pulse-ring 1.5s ease-out infinite;
+}
diff --git a/services/frontend/src/app/layout.tsx b/services/frontend/src/app/layout.tsx
index 576a678..8c2dbaa 100644
--- a/services/frontend/src/app/layout.tsx
+++ b/services/frontend/src/app/layout.tsx
@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import Script from "next/script";
+import { Toaster } from "@/components/ui/sonner";
+import { TooltipProvider } from "@/components/ui/tooltip";
 import "./globals.css";
 
 const geistSans = Geist({
@@ -34,7 +36,10 @@ export default function RootLayout({
           {`try{const t=localStorage.getItem('theme')||'dark';document.documentElement.classList.add(t)}catch(e){}`}
         </Script>
       </head>
-      <body className="min-h-full flex flex-col">{children}</body>
+      <body className="min-h-full flex flex-col">
+        <TooltipProvider delay={500}>{children}</TooltipProvider>
+        <Toaster position="bottom-right" richColors closeButton />
+      </body>
     </html>
   );
 }
diff --git a/services/frontend/src/components/layout/header.tsx b/services/frontend/src/components/layout/header.tsx
index 29cd979..b7f7ee4 100644
--- a/services/frontend/src/components/layout/header.tsx
+++ b/services/frontend/src/components/layout/header.tsx
@@ -1,7 +1,16 @@
 "use client";
 
-import { AlertCircle, Moon, Sun, Wifi, WifiOff } from "lucide-react";
+import { Moon, Sun } from "lucide-react";
 import { useEffect, useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { SidebarTrigger } from "@/components/ui/sidebar";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
 import { useWebSocket } from "@/lib/ws/context";
 
 export function Header() {
@@ -21,48 +30,82 @@ export function Header() {
     document.documentElement.classList.add(next);
   };
 
+  const statusVariant =
+    status === "connected"
+      ? "default"
+      : status === "connecting"
+        ? "secondary"
+        : "destructive";
+
+  const statusLabel =
+    status === "connected"
+      ? "Connected"
+      : status === "connecting"
+        ? "Connecting"
+        : status === "error"
+          ? "Error"
+          : "Disconnected";
+
   return (
-    <header className="sticky top-0 z-10 flex h-14 items-center gap-4 border-b bg-background px-4 md:px-6">
+    <header className="sticky top-0 z-10 flex h-14 items-center gap-3 border-b border-border/50 bg-background/60 backdrop-blur-lg px-4 md:px-6">
+      <SidebarTrigger className="-ml-1 size-8 text-muted-foreground hover:text-foreground" />
+
       <div className="flex-1" />
 
       {/* Connection status */}
-      <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
-        {status === "connected" ? (
-          <>
-            <Wifi className="size-3 text-green-500" />
-            <span className="hidden sm:inline">Connected</span>
-          </>
-        ) : status === "connecting" ? (
-          <>
-            <Wifi className="size-3 text-yellow-500" />
-            <span className="hidden sm:inline">Connecting</span>
-          </>
-        ) : status === "error" ? (
-          <>
-            <AlertCircle className="size-3 text-destructive" />
-            <span className="hidden sm:inline">Error</span>
-          </>
-        ) : (
-          <>
-            <WifiOff className="size-3 text-destructive" />
-            <span className="hidden sm:inline">Disconnected</span>
-          </>
-        )}
-      </div>
+      <Tooltip>
+        <TooltipTrigger>
+          <span>
+            <Badge
+              variant={statusVariant}
+              className="gap-1.5 px-2.5 py-1 cursor-default select-none"
+            >
+              <span
+                className={cn(
+                  "size-1.5 rounded-full",
+                  status === "connected" &&
+                    "bg-green-500 shadow-[0_0_6px] shadow-green-500/60",
+                  status === "connecting" && "bg-yellow-500 animate-pulse",
+                  (status === "disconnected" || status === "error") &&
+                    "bg-destructive",
+                )}
+              />
+              <span className="hidden sm:inline text-xs">{statusLabel}</span>
+            </Badge>
+          </span>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">
+          <p>WebSocket: {statusLabel}</p>
+        </TooltipContent>
+      </Tooltip>
 
       {/* Theme toggle */}
-      <button
-        type="button"
+      <Button
+        variant="ghost"
+        size="icon"
         onClick={toggleTheme}
-        className="inline-flex size-8 items-center justify-center rounded-lg border hover:bg-muted transition-colors"
         aria-label="Toggle theme"
+        className="size-8"
       >
-        {theme === "dark" ? (
-          <Sun className="size-4" />
-        ) : (
-          <Moon className="size-4" />
-        )}
-      </button>
+        <div className="relative size-4">
+          <Sun
+            className={cn(
+              "absolute inset-0 size-4 transition-all duration-300",
+              theme === "dark"
+                ? "opacity-0 rotate-90 scale-75"
+                : "opacity-100 rotate-0 scale-100",
+            )}
+          />
+          <Moon
+            className={cn(
+              "absolute inset-0 size-4 transition-all duration-300",
+              theme === "dark"
+                ? "opacity-100 rotate-0 scale-100"
+                : "opacity-0 -rotate-90 scale-75",
+            )}
+          />
+        </div>
+      </Button>
     </header>
   );
 }
diff --git a/services/frontend/src/components/layout/mobile-tab-bar.tsx b/services/frontend/src/components/layout/mobile-tab-bar.tsx
index 905ace3..d7bcf4f 100644
--- a/services/frontend/src/components/layout/mobile-tab-bar.tsx
+++ b/services/frontend/src/components/layout/mobile-tab-bar.tsx
@@ -2,30 +2,41 @@
 
 import { useRouter, useSearchParams } from "next/navigation";
 import { type TabId, tabs } from "@/lib/tabs";
+import { cn } from "@/lib/utils";
 
 export function MobileTabBar({ activeTab }: { activeTab: TabId }) {
   const router = useRouter();
   const searchParams = useSearchParams();
 
   return (
-    <nav className="md:hidden fixed bottom-0 inset-x-0 z-10 border-t bg-background">
+    <nav className="md:hidden fixed bottom-0 inset-x-0 z-10 border-t border-border/50 bg-background/80 backdrop-blur-lg">
       <div className="flex">
-        {tabs.map(({ id, label, icon: Icon }) => (
-          <button
-            key={id}
-            type="button"
-            onClick={() => {
-              const params = new URLSearchParams(searchParams.toString());
-              params.set("tab", id);
-              router.push(`/dashboard?${params}`);
-            }}
-            data-active={activeTab === id ? "" : undefined}
-            className="flex-1 flex flex-col items-center gap-0.5 py-2 text-xs font-medium text-muted-foreground data-[active]:text-primary transition-colors"
-          >
-            <Icon className="size-5" />
-            {label}
-          </button>
-        ))}
+        {tabs.map(({ id, label, icon: Icon }) => {
+          const isActive = activeTab === id;
+          return (
+            <button
+              key={id}
+              type="button"
+              onClick={() => {
+                const params = new URLSearchParams(searchParams.toString());
+                params.set("tab", id);
+                router.push(`/dashboard?${params}`);
+              }}
+              className={cn(
+                "flex-1 flex flex-col items-center gap-0.5 py-2 text-xs font-medium transition-all duration-200 relative",
+                isActive
+                  ? "text-sky-400"
+                  : "text-muted-foreground hover:text-foreground",
+              )}
+            >
+              <Icon className="size-5" />
+              <span>{label}</span>
+              {isActive && (
+                <span className="absolute -top-px left-1/4 right-1/4 h-0.5 rounded-full bg-gradient-to-r from-sky-400 to-cyan-400" />
+              )}
+            </button>
+          );
+        })}
       </div>
     </nav>
   );
diff --git a/services/frontend/src/components/layout/sidebar.tsx b/services/frontend/src/components/layout/sidebar.tsx
index 8299e9e..8064814 100644
--- a/services/frontend/src/components/layout/sidebar.tsx
+++ b/services/frontend/src/components/layout/sidebar.tsx
@@ -1,12 +1,29 @@
 "use client";
 
-import { Radio } from "lucide-react";
+import { type LucideIcon, Radio } from "lucide-react";
 import { useRouter, useSearchParams } from "next/navigation";
+import {
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  Sidebar as SidebarPrimitive,
+  useSidebar,
+} from "@/components/ui/sidebar";
 import { type TabId, tabs } from "@/lib/tabs";
+import { cn } from "@/lib/utils";
+import { useWebSocket } from "@/lib/ws/context";
 
 export function Sidebar({ activeTab }: { activeTab: TabId }) {
   const router = useRouter();
   const searchParams = useSearchParams();
+  const { state } = useSidebar();
+  const { status } = useWebSocket();
+  const collapsed = state === "collapsed";
 
   const handleTabClick = (tabId: TabId) => {
     const params = new URLSearchParams(searchParams.toString());
@@ -14,29 +31,111 @@ export function Sidebar({ activeTab }: { activeTab: TabId }) {
     router.push(`/dashboard?${params}`);
   };
 
-  return (
-    <aside className="hidden md:flex md:w-56 md:flex-col md:fixed md:inset-y-0 border-r bg-sidebar">
-      <div className="flex h-14 items-center gap-2 border-b px-4">
-        <div className="size-7 rounded-full bg-primary/10 flex items-center justify-center">
-          <Radio className="size-4 text-primary" />
-        </div>
-        <span className="font-semibold text-sm">Bete</span>
-      </div>
+  const connectionLabel = {
+    connected: "Connected",
+    connecting: "Connecting",
+    disconnected: "Disconnected",
+    error: "Error",
+  }[status];
 
-      <nav className="flex-1 space-y-1 p-3">
-        {tabs.map(({ id, label, icon: Icon }) => (
-          <button
-            key={id}
-            type="button"
-            onClick={() => handleTabClick(id)}
-            data-active={activeTab === id ? "" : undefined}
-            className="w-full flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground data-[active]:bg-sidebar-accent data-[active]:text-sidebar-accent-foreground"
-          >
-            <Icon className="size-4 shrink-0" />
-            {label}
-          </button>
-        ))}
-      </nav>
-    </aside>
+  const connectionColor = {
+    connected: "bg-green-500",
+    connecting: "bg-yellow-500",
+    disconnected: "bg-destructive",
+    error: "bg-destructive",
+  }[status];
+
+  return (
+    <SidebarPrimitive variant="sidebar" collapsible="icon">
+      <SidebarHeader className="border-b border-sidebar-border/50">
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton
+              size="lg"
+              className="group-data-[collapsible=icon]:!p-0"
+            >
+              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-gradient-to-br from-sky-500 to-cyan-400 text-sidebar-primary-foreground">
+                <Radio className="size-4" />
+              </div>
+              <div
+                className={cn(
+                  "flex flex-col gap-0.5 leading-none",
+                  collapsed && "hidden",
+                )}
+              >
+                <span className="text-base font-bold tracking-tight">
+                  <span className="text-gradient">Bete</span>
+                </span>
+                <span className="text-[10px] text-muted-foreground tracking-widest uppercase">
+                  Dashboard
+                </span>
+              </div>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {tabs.map(({ id, label, icon: Icon }) => {
+                const isActive = activeTab === id;
+                return (
+                  <SidebarMenuItem key={id}>
+                    <SidebarMenuButton
+                      isActive={isActive}
+                      onClick={() => handleTabClick(id)}
+                      tooltip={collapsed ? label : undefined}
+                      className={cn(
+                        "relative transition-all duration-200",
+                        isActive &&
+                          "bg-sidebar-accent/80 text-sidebar-accent-foreground font-medium",
+                      )}
+                    >
+                      <Icon
+                        className={cn(
+                          "size-4 transition-all duration-200",
+                          isActive && "text-sky-400 scale-110",
+                        )}
+                      />
+                      <span>{label}</span>
+                      {isActive && (
+                        <div className="absolute right-0 top-1/2 -translate-y-1/2 w-0.5 h-5 rounded-full bg-gradient-to-b from-sky-400 to-cyan-400" />
+                      )}
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                );
+              })}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+
+      <SidebarFooter className="border-t border-sidebar-border/50 p-3">
+        <div className="flex items-center gap-2">
+          <span className="relative flex size-2 shrink-0">
+            <span
+              className={cn(
+                "absolute inline-flex size-full rounded-full opacity-75",
+                connectionColor,
+                status === "connected" && "animate-ping",
+              )}
+            />
+            <span
+              className={cn(
+                "relative inline-flex size-2 rounded-full",
+                connectionColor,
+              )}
+            />
+          </span>
+          {!collapsed && (
+            <span className="text-xs text-muted-foreground truncate">
+              {connectionLabel}
+            </span>
+          )}
+        </div>
+      </SidebarFooter>
+    </SidebarPrimitive>
   );
 }
diff --git a/services/frontend/src/components/ui/chart.tsx b/services/frontend/src/components/ui/chart.tsx
index 82cce52..f52b7d9 100644
--- a/services/frontend/src/components/ui/chart.tsx
+++ b/services/frontend/src/components/ui/chart.tsx
@@ -195,7 +195,7 @@ function ChartTooltipContent({
       <div className="grid gap-1.5">
         {payload
           .filter((item) => item.type !== "none")
-          .map((item) => {
+          .map((item, index) => {
             const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
             const itemConfig = getPayloadConfigFromPayload(config, item, key);
             const indicatorColor = color ?? item.payload?.fill ?? item.color;
diff --git a/services/frontend/src/features/dashboard/dashboard-panel.tsx b/services/frontend/src/features/dashboard/dashboard-panel.tsx
index e9f1317..54d8361 100644
--- a/services/frontend/src/features/dashboard/dashboard-panel.tsx
+++ b/services/frontend/src/features/dashboard/dashboard-panel.tsx
@@ -5,14 +5,23 @@ import {
   ArrowLeft,
   BarChart3,
   ChevronRight,
+  Clock,
   Hash,
   RefreshCw,
   Search,
   Shield,
+  Sparkles,
   Users,
 } from "lucide-react";
 import Image from "next/image";
 import { useCallback, useEffect, useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Progress } from "@/components/ui/progress";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { dashboardApi } from "@/lib/api";
 import type {
   DashboardChannel,
@@ -21,6 +30,7 @@ import type {
   DashboardUser,
   DashboardUserDetail,
 } from "@/lib/types";
+import { cn } from "@/lib/utils";
 
 type View = "stats" | "users" | "channels" | "user-detail" | "channel-detail";
 
@@ -35,7 +45,7 @@ export function DashboardPanel({ guildId }: { guildId: string }) {
   const renderView = () => {
     switch (view) {
       case "stats":
-        return <StatsView onNavigate={(v) => setView(v)} />;
+        return <StatsView />;
       case "users":
         return (
           <UsersView
@@ -84,47 +94,42 @@ export function DashboardPanel({ guildId }: { guildId: string }) {
   };
 
   return (
-    <div className="space-y-4">
-      {/* Sub-navigation */}
-      <div className="flex gap-1 rounded-lg border p-1 w-fit">
-        <button
-          onClick={() => setView("stats")}
-          data-active={view === "stats" ? "" : undefined}
-          className="rounded-md px-3 py-1.5 text-sm font-medium transition-colors data-[active]:bg-primary data-[active]:text-primary-foreground hover:bg-muted"
-        >
-          <BarChart3 className="size-4 inline mr-1.5" />
-          Stats
-        </button>
-        <button
-          onClick={() => setView("users")}
-          data-active={
-            view === "users" || view === "user-detail" ? "" : undefined
-          }
-          className="rounded-md px-3 py-1.5 text-sm font-medium transition-colors data-[active]:bg-primary data-[active]:text-primary-foreground hover:bg-muted"
-        >
-          <Users className="size-4 inline mr-1.5" />
-          Users
-        </button>
-        <button
-          onClick={() => setView("channels")}
-          data-active={
-            view === "channels" || view === "channel-detail" ? "" : undefined
-          }
-          className="rounded-md px-3 py-1.5 text-sm font-medium transition-colors data-[active]:bg-primary data-[active]:text-primary-foreground hover:bg-muted"
-        >
-          <Hash className="size-4 inline mr-1.5" />
-          Channels
-        </button>
-      </div>
+    <div className="space-y-5">
+      {/* Sub-navigation using shadcn Tabs */}
+      <Tabs
+        value={
+          view === "user-detail"
+            ? "users"
+            : view === "channel-detail"
+              ? "channels"
+              : view
+        }
+        onValueChange={(v) => setView(v as View)}
+      >
+        <TabsList>
+          <TabsTrigger value="stats" onClick={() => setView("stats")}>
+            <BarChart3 className="size-4" />
+            Stats
+          </TabsTrigger>
+          <TabsTrigger value="users" onClick={() => setView("users")}>
+            <Users className="size-4" />
+            Users
+          </TabsTrigger>
+          <TabsTrigger value="channels" onClick={() => setView("channels")}>
+            <Hash className="size-4" />
+            Channels
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
 
       {renderView()}
     </div>
   );
 }
 
-// ── Stats View ────────────────────────────────────────────
+// ── Stats View ──────────────────────────────────
 
-function StatsView(_props: { onNavigate: (view: View) => void }) {
+function StatsView() {
   const [stats, setStats] = useState<DashboardStats | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -148,114 +153,136 @@ function StatsView(_props: { onNavigate: (view: View) => void }) {
 
   if (error) {
     return (
-      <div className="flex flex-col items-center justify-center py-16 text-center">
-        <AlertCircle className="size-8 text-destructive mb-2" />
-        <p className="text-sm text-muted-foreground mb-4">{error}</p>
-        <button
-          onClick={fetchStats}
-          className="inline-flex items-center gap-2 rounded-lg border px-4 py-2 text-sm font-medium hover:bg-muted transition-colors"
-        >
-          <RefreshCw className="size-4" />
+      <div className="flex flex-col items-center justify-center py-20 text-center">
+        <AlertCircle className="size-10 text-destructive mb-3" />
+        <p className="text-sm text-muted-foreground mb-4 max-w-sm">{error}</p>
+        <Button variant="outline" onClick={fetchStats}>
+          <RefreshCw className="size-4 mr-2" />
           Retry
-        </button>
+        </Button>
       </div>
     );
   }
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-5 animate-fade-in-up">
       {/* Metric cards */}
       {loading ? (
         <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
-          {Array.from({ length: 8 }, (_, i) => `stat-sk-${i}`).map((key) => (
-            <div key={key} className="rounded-lg border p-4 space-y-2">
-              <div className="h-3 w-16 bg-muted rounded animate-pulse" />
-              <div className="h-8 w-20 bg-muted rounded animate-pulse" />
-            </div>
+          {Array.from({ length: 8 }, (_, i) => (
+            <Skeleton key={i} className="h-28 rounded-xl" />
           ))}
         </div>
       ) : stats ? (
         <>
           <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
-            <MetricCard label="Total Messages" value={stats.total_messages} />
-            <MetricCard label="Today" value={stats.today_messages} />
-            <MetricCard label="Users" value={stats.total_users} />
-            <MetricCard label="Active 24h" value={stats.active_users_24h} />
-            <MetricCard
+            <StatCard
+              label="Total Messages"
+              value={stats.total_messages}
+              icon={Hash}
+            />
+            <StatCard label="Today" value={stats.today_messages} icon={Clock} />
+            <StatCard label="Users" value={stats.total_users} icon={Users} />
+            <StatCard
+              label="Active 24h"
+              value={stats.active_users_24h}
+              icon={Sparkles}
+            />
+            <StatCard
               label="Flagged"
               value={stats.total_flagged}
-              variant="destructive"
+              variant="danger"
+              icon={AlertCircle}
             />
-            <MetricCard
+            <StatCard
               label="Clean"
               value={stats.total_clean}
               variant="success"
+              icon={Shield}
             />
-            <MetricCard
+            <StatCard
               label="Voice Recordings"
               value={stats.total_voice_recordings}
+              icon={Hash}
+            />
+            <StatCard
+              label="AI Profiles"
+              value={stats.total_profiles}
+              icon={Sparkles}
             />
-            <MetricCard label="AI Profiles" value={stats.total_profiles} />
           </div>
 
           {/* Top Channels + Moderation Queue */}
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div className="rounded-lg border p-4 space-y-3">
-              <h3 className="text-sm font-semibold flex items-center gap-2">
-                <Hash className="size-4 text-muted-foreground" />
-                Top Channels
-              </h3>
-              {stats.top_channels.length === 0 ? (
-                <p className="text-sm text-muted-foreground">
-                  No channel data yet.
-                </p>
-              ) : (
-                <div className="space-y-2">
-                  {stats.top_channels.map((ch) => (
-                    <div
-                      key={ch.channel_id}
-                      className="flex items-center justify-between"
-                    >
-                      <span className="text-sm truncate">
-                        #{ch.channel_name ?? ch.channel_id.slice(0, 8)}
-                      </span>
-                      <span className="text-sm font-semibold">
-                        {formatNumber(ch.message_count)}
-                      </span>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2 text-sm font-semibold">
+                  <Hash className="size-4 text-muted-foreground" />
+                  Top Channels
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                {stats.top_channels.length === 0 ? (
+                  <p className="text-sm text-muted-foreground py-6 text-center">
+                    No channel data yet.
+                  </p>
+                ) : (
+                  <div className="space-y-2">
+                    {stats.top_channels.map((ch, i) => {
+                      const maxCount = stats.top_channels[0].message_count;
+                      const pct =
+                        maxCount > 0 ? (ch.message_count / maxCount) * 100 : 0;
+                      return (
+                        <div key={ch.channel_id} className="space-y-1">
+                          <div className="flex items-center justify-between text-sm">
+                            <span className="truncate font-medium">
+                              #{ch.channel_name ?? ch.channel_id.slice(0, 8)}
+                            </span>
+                            <span className="text-muted-foreground tabular-nums">
+                              {formatNumber(ch.message_count)}
+                            </span>
+                          </div>
+                          <Progress value={pct} className="h-1.5" />
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
+              </CardContent>
+            </Card>
 
-            <div className="rounded-lg border p-4 space-y-3">
-              <h3 className="text-sm font-semibold flex items-center gap-2">
-                <Shield className="size-4 text-muted-foreground" />
-                Moderation Queue
-              </h3>
-              <div className="grid grid-cols-3 gap-3">
-                <div className="rounded-lg bg-muted p-3 text-center space-y-1">
-                  <div className="text-2xl font-semibold">
-                    {stats.moderation_overview.pending}
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2 text-sm font-semibold">
+                  <Shield className="size-4 text-muted-foreground" />
+                  Moderation Queue
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="grid grid-cols-3 gap-3">
+                  <div className="rounded-lg bg-muted/50 p-3 text-center space-y-1.5">
+                    <div className="text-2xl font-bold tabular-nums">
+                      {stats.moderation_overview.pending}
+                    </div>
+                    <div className="text-xs text-muted-foreground">Pending</div>
                   </div>
-                  <div className="text-xs text-muted-foreground">Pending</div>
-                </div>
-                <div className="rounded-lg bg-yellow-500/10 p-3 text-center space-y-1">
-                  <div className="text-2xl font-semibold text-yellow-600 dark:text-yellow-400">
-                    {stats.moderation_overview.processing}
+                  <div className="rounded-lg bg-yellow-500/10 p-3 text-center space-y-1.5">
+                    <div className="text-2xl font-bold tabular-nums text-yellow-500">
+                      {stats.moderation_overview.processing}
+                    </div>
+                    <div className="text-xs text-muted-foreground">
+                      Processing
+                    </div>
                   </div>
-                  <div className="text-xs text-muted-foreground">
-                    Processing
+                  <div className="rounded-lg bg-destructive/10 p-3 text-center space-y-1.5">
+                    <div className="text-2xl font-bold tabular-nums text-destructive">
+                      {stats.moderation_overview.error}
+                    </div>
+                    <div className="text-xs text-muted-foreground">Errors</div>
                   </div>
                 </div>
-                <div className="rounded-lg bg-destructive/10 p-3 text-center space-y-1">
-                  <div className="text-2xl font-semibold text-destructive">
-                    {stats.moderation_overview.error}
-                  </div>
-                  <div className="text-xs text-muted-foreground">Errors</div>
-                </div>
-              </div>
-            </div>
+              </CardContent>
+            </Card>
           </div>
         </>
       ) : null}
@@ -263,32 +290,52 @@ function StatsView(_props: { onNavigate: (view: View) => void }) {
   );
 }
 
-function MetricCard({
+function StatCard({
   label,
   value,
   variant,
+  icon: Icon,
 }: {
   label: string;
   value: number;
-  variant?: "default" | "destructive" | "success";
+  variant?: "default" | "danger" | "success";
+  icon: React.ComponentType<{ className?: string }>;
 }) {
-  const colorMap = {
-    default: "",
-    destructive: "text-destructive",
-    success: "text-green-600 dark:text-green-400",
-  };
-
   return (
-    <div className="rounded-lg border p-4 space-y-1">
-      <p className="text-xs text-muted-foreground">{label}</p>
-      <p className={`text-2xl font-semibold ${colorMap[variant ?? "default"]}`}>
-        {formatNumber(value)}
-      </p>
-    </div>
+    <Card>
+      <CardContent className="p-4">
+        <div className="flex items-start justify-between">
+          <div className="space-y-1.5">
+            <p className="text-xs text-muted-foreground">{label}</p>
+            <p
+              className={cn(
+                "text-2xl font-bold tabular-nums tracking-tight",
+                variant === "danger" && "text-destructive",
+                variant === "success" && "text-green-500",
+              )}
+            >
+              {formatNumber(value)}
+            </p>
+          </div>
+          <div
+            className={cn(
+              "flex size-9 shrink-0 items-center justify-center rounded-lg",
+              variant === "danger"
+                ? "bg-destructive/10 text-destructive"
+                : variant === "success"
+                  ? "bg-green-500/10 text-green-500"
+                  : "bg-primary/10 text-primary",
+            )}
+          >
+            <Icon className="size-4" />
+          </div>
+        </div>
+      </CardContent>
+    </Card>
   );
 }
 
-// ── Users View ────────────────────────────────────────────
+// ── Users View ──────────────────────────────────
 
 function UsersView({
   onSelectUser,
@@ -326,78 +373,82 @@ function UsersView({
   }, [search, fetchUsers]);
 
   return (
-    <div className="space-y-3">
+    <div className="space-y-4 animate-fade-in-up">
       <div className="relative">
         <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
-        <input
+        <Input
           type="text"
           placeholder="Search users…"
           value={search}
           onChange={(e) => setSearch(e.target.value)}
-          className="w-full h-9 rounded-lg border border-input bg-background pl-9 pr-3 text-sm"
+          className="pl-9 h-9"
         />
       </div>
 
       {loading ? (
         <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-          {Array.from({ length: 6 }, (_, i) => `user-sk-${i}`).map((key) => (
-            <div key={key} className="rounded-lg border p-4 space-y-2">
-              <div className="flex items-center gap-3">
-                <div className="size-10 rounded-full bg-muted animate-pulse" />
-                <div className="flex-1 space-y-1">
-                  <div className="h-4 w-24 bg-muted rounded animate-pulse" />
-                  <div className="h-3 w-16 bg-muted rounded animate-pulse" />
-                </div>
-              </div>
-            </div>
+          {Array.from({ length: 6 }, (_, i) => (
+            <Skeleton key={i} className="h-20 rounded-xl" />
           ))}
         </div>
       ) : (
         <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-          {users.map((user) => (
-            <button
-              key={user.user_id}
-              onClick={() => onSelectUser(user.user_id)}
-              className="rounded-lg border p-4 text-left hover:bg-muted/50 transition-colors"
-            >
-              <div className="flex items-center gap-3">
-                <div className="size-10 shrink-0 rounded-full bg-muted flex items-center justify-center text-sm font-medium overflow-hidden">
-                  {user.avatar_url ? (
-                    <Image
-                      src={user.avatar_url}
-                      alt=""
-                      width={40}
-                      height={40}
-                      className="size-full object-cover"
-                    />
-                  ) : (
-                    (user.username ?? "?").charAt(0).toUpperCase()
-                  )}
-                </div>
-                <div className="flex-1 min-w-0">
-                  <p className="text-sm font-medium truncate">
-                    {user.username ?? "Unknown"}
-                  </p>
-                  <p className="text-xs text-muted-foreground">
-                    {user.total_messages} msgs
-                    {user.flagged_count > 0 && (
-                      <span className="text-destructive ml-2">
-                        {user.flagged_count} flagged
-                      </span>
-                    )}
-                  </p>
-                </div>
-                <ChevronRight className="size-4 text-muted-foreground shrink-0" />
-              </div>
-            </button>
-          ))}
+          {users.length === 0 ? (
+            <div className="col-span-full flex flex-col items-center justify-center py-16 text-center">
+              <Users className="size-10 text-muted-foreground/40 mb-3" />
+              <p className="text-sm text-muted-foreground">No users found.</p>
+            </div>
+          ) : (
+            users.map((user) => (
+              <Card
+                key={user.user_id}
+                className="cursor-pointer hover:bg-accent/5 transition-colors"
+                onClick={() => onSelectUser(user.user_id)}
+              >
+                <CardContent className="p-3">
+                  <div className="flex items-center gap-3">
+                    <div className="size-10 shrink-0 rounded-full bg-muted flex items-center justify-center text-sm font-medium overflow-hidden ring-1 ring-border">
+                      {user.avatar_url ? (
+                        <Image
+                          src={user.avatar_url}
+                          alt=""
+                          width={40}
+                          height={40}
+                          className="size-full object-cover"
+                        />
+                      ) : (
+                        (user.username ?? "?").charAt(0).toUpperCase()
+                      )}
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-medium truncate">
+                        {user.username ?? "Unknown"}
+                      </p>
+                      <p className="text-xs text-muted-foreground flex items-center gap-2">
+                        <span>{user.total_messages} messages</span>
+                        {user.flagged_count > 0 && (
+                          <Badge
+                            variant="destructive"
+                            className="text-[10px] px-1.5 py-0 h-4"
+                          >
+                            {user.flagged_count} flagged
+                          </Badge>
+                        )}
+                      </p>
+                    </div>
+                    <ChevronRight className="size-4 text-muted-foreground shrink-0" />
+                  </div>
+                </CardContent>
+              </Card>
+            ))
+          )}
         </div>
       )}
     </div>
   );
 }
 
-// ── Channels View ─────────────────────────────────────────
+// ── Channels View ───────────────────────────────
 
 function ChannelsView({
   onSelectChannel,
@@ -442,65 +493,79 @@ function ChannelsView({
   }, [search, fetchChannels]);
 
   return (
-    <div className="space-y-3">
+    <div className="space-y-4 animate-fade-in-up">
       <div className="relative">
         <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
-        <input
+        <Input
           type="text"
           placeholder="Search channels…"
           value={search}
           onChange={(e) => setSearch(e.target.value)}
-          className="w-full h-9 rounded-lg border border-input bg-background pl-9 pr-3 text-sm"
+          className="pl-9 h-9"
         />
       </div>
 
       {loading ? (
         <div className="space-y-2">
-          {Array.from({ length: 6 }, (_, i) => `ch-sk-${i}`).map((key) => (
-            <div key={key} className="rounded-lg border p-4 space-y-2">
-              <div className="h-4 w-32 bg-muted rounded animate-pulse" />
-              <div className="h-3 w-24 bg-muted rounded animate-pulse" />
-            </div>
+          {Array.from({ length: 6 }, (_, i) => (
+            <Skeleton key={i} className="h-20 rounded-xl" />
           ))}
         </div>
       ) : (
         <div className="space-y-2">
-          {channels.map((ch) => (
-            <button
-              key={ch.channel_id}
-              onClick={() => onSelectChannel(ch.channel_id)}
-              className="w-full rounded-lg border p-4 text-left hover:bg-muted/50 transition-colors"
-            >
-              <div className="flex items-center justify-between">
-                <div className="min-w-0">
-                  <p className="text-sm font-medium truncate">
-                    #{ch.channel_name ?? ch.channel_id.slice(0, 8)}
-                  </p>
-                  <p className="text-xs text-muted-foreground">
-                    {ch.total_messages} messages
-                    {ch.flagged_count > 0 && (
-                      <span className="text-destructive ml-2">
-                        {ch.flagged_count} flagged
-                      </span>
-                    )}
-                  </p>
-                </div>
-                <ChevronRight className="size-4 text-muted-foreground shrink-0" />
-              </div>
-              {ch.culture_summary && (
-                <p className="text-xs text-muted-foreground mt-2 italic line-clamp-2">
-                  {ch.culture_summary}
-                </p>
-              )}
-            </button>
-          ))}
+          {channels.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-16 text-center">
+              <Hash className="size-10 text-muted-foreground/40 mb-3" />
+              <p className="text-sm text-muted-foreground">
+                No channels found.
+              </p>
+            </div>
+          ) : (
+            channels.map((ch) => (
+              <Card
+                key={ch.channel_id}
+                className="cursor-pointer hover:bg-accent/5 transition-colors"
+                onClick={() => onSelectChannel(ch.channel_id)}
+              >
+                <CardContent className="p-4">
+                  <div className="flex items-center justify-between">
+                    <div className="min-w-0 flex-1">
+                      <div className="flex items-center gap-2">
+                        <Hash className="size-3.5 text-muted-foreground shrink-0" />
+                        <p className="text-sm font-medium truncate">
+                          {ch.channel_name ?? ch.channel_id.slice(0, 8)}
+                        </p>
+                      </div>
+                      <p className="text-xs text-muted-foreground mt-0.5 flex items-center gap-2">
+                        <span>{ch.total_messages} messages</span>
+                        {ch.flagged_count > 0 && (
+                          <Badge
+                            variant="destructive"
+                            className="text-[10px] px-1.5 py-0 h-4"
+                          >
+                            {ch.flagged_count} flagged
+                          </Badge>
+                        )}
+                      </p>
+                    </div>
+                    <ChevronRight className="size-4 text-muted-foreground shrink-0 ml-2" />
+                  </div>
+                  {ch.culture_summary && (
+                    <p className="text-xs text-muted-foreground/70 mt-2 italic line-clamp-2 border-t border-border/50 pt-2">
+                      "{ch.culture_summary}"
+                    </p>
+                  )}
+                </CardContent>
+              </Card>
+            ))
+          )}
         </div>
       )}
     </div>
   );
 }
 
-// ── User Detail View ──────────────────────────────────────
+// ── User Detail View ────────────────────────────
 
 function UserDetailView({
   user,
@@ -510,83 +575,99 @@ function UserDetailView({
   onBack: () => void;
 }) {
   return (
-    <div className="space-y-4">
-      <button
-        onClick={onBack}
-        className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
-      >
-        <ArrowLeft className="size-4" />
-        Back to users
-      </button>
-
-      <div className="rounded-lg border p-6 space-y-4">
-        <div className="flex items-center gap-4">
-          <div className="size-16 rounded-full bg-muted flex items-center justify-center text-xl font-medium overflow-hidden">
-            {user.avatar_url ? (
-              <Image
-                src={user.avatar_url}
-                alt=""
-                width={64}
-                height={64}
-                className="size-full object-cover"
-              />
-            ) : (
-              (user.username ?? "?").charAt(0).toUpperCase()
-            )}
-          </div>
-          <div>
-            <h2 className="text-xl font-semibold">
-              {user.username ?? "Unknown"}
-            </h2>
-            <p className="text-sm text-muted-foreground">#{user.user_id}</p>
-          </div>
-        </div>
-
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
-          <DetailStat label="Messages" value={user.total_messages} />
-          <DetailStat
-            label="Flagged"
-            value={user.flagged_count}
-            variant="destructive"
-          />
-          <DetailStat
-            label="Clean Streak"
-            value={user.clean_message_streak ?? 0}
-          />
-          <DetailStat
-            label="Trust Score"
-            value={user.trust_score ?? 0}
-            suffix="%"
-          />
-        </div>
-
-        {user.profile_summary && (
-          <div className="rounded-lg bg-muted/50 p-3">
-            <p className="text-xs text-muted-foreground mb-1">AI Profile</p>
-            <p className="text-sm">{user.profile_summary}</p>
-          </div>
-        )}
-
-        {/* Recent messages */}
-        {user.recent_messages.length > 0 && (
-          <div className="space-y-3">
-            <h3 className="text-sm font-semibold">Recent Messages</h3>
-            {user.recent_messages.slice(0, 5).map((msg) => (
-              <div key={msg.id} className="rounded-lg border p-3">
-                <p className="text-xs text-muted-foreground mb-1">
-                  {new Date(msg.created_at).toLocaleString()}
-                </p>
-                <p className="text-sm">{msg.content}</p>
-              </div>
-            ))}
-          </div>
-        )}
+    <div className="space-y-5 animate-fade-in-up">
+      <div className="flex items-center gap-3">
+        <Button variant="ghost" size="sm" onClick={onBack}>
+          <ArrowLeft className="size-4 mr-1" />
+          Back
+        </Button>
       </div>
+
+      <Card>
+        <CardContent className="p-6 space-y-5">
+          <div className="flex items-center gap-4">
+            <div className="size-14 shrink-0 rounded-full bg-muted flex items-center justify-center text-xl font-medium overflow-hidden ring-2 ring-border">
+              {user.avatar_url ? (
+                <Image
+                  src={user.avatar_url}
+                  alt=""
+                  width={56}
+                  height={56}
+                  className="size-full object-cover"
+                />
+              ) : (
+                (user.username ?? "?").charAt(0).toUpperCase()
+              )}
+            </div>
+            <div className="min-w-0">
+              <h2 className="text-lg font-semibold">
+                {user.username ?? "Unknown"}
+              </h2>
+              <p className="text-sm text-muted-foreground font-mono text-xs">
+                {user.user_id}
+              </p>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+            <DetailStat label="Messages" value={user.total_messages} />
+            <DetailStat
+              label="Flagged"
+              value={user.flagged_count}
+              variant="danger"
+            />
+            <DetailStat
+              label="Clean Streak"
+              value={user.clean_message_streak ?? 0}
+            />
+            <DetailStat
+              label="Trust Score"
+              value={user.trust_score ?? 0}
+              suffix="%"
+            />
+          </div>
+
+          {user.profile_summary && (
+            <div className="rounded-lg bg-gradient-to-br from-primary/5 to-primary/[0.02] border border-primary/10 p-4">
+              <div className="flex items-center gap-2 mb-2">
+                <Sparkles className="size-4 text-primary" />
+                <p className="text-xs text-muted-foreground font-medium uppercase tracking-wider">
+                  AI Profile
+                </p>
+              </div>
+              <p className="text-sm leading-relaxed">{user.profile_summary}</p>
+            </div>
+          )}
+
+          {user.recent_messages.length > 0 && (
+            <div className="space-y-3">
+              <h3 className="text-sm font-semibold flex items-center gap-2">
+                <Clock className="size-4 text-muted-foreground" />
+                Recent Messages
+              </h3>
+              <div className="space-y-2 max-h-80 overflow-y-auto">
+                {user.recent_messages.slice(0, 5).map((msg) => (
+                  <div
+                    key={msg.id}
+                    className="rounded-lg border border-border/50 bg-muted/20 p-3 text-sm"
+                  >
+                    <p className="text-xs text-muted-foreground mb-1 flex items-center gap-2">
+                      <Clock className="size-3" />
+                      {new Date(msg.created_at).toLocaleString()}
+                    </p>
+                    <p className="text-sm">{msg.content}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
     </div>
   );
 }
 
-// ── Channel Detail View ───────────────────────────────────
+// ── Channel Detail View ─────────────────────────
 
 function ChannelDetailView({
   channel,
@@ -596,68 +677,87 @@ function ChannelDetailView({
   onBack: () => void;
 }) {
   return (
-    <div className="space-y-4">
-      <button
-        onClick={onBack}
-        className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
-      >
-        <ArrowLeft className="size-4" />
-        Back to channels
-      </button>
-
-      <div className="rounded-lg border p-6 space-y-4">
-        <div>
-          <h2 className="text-xl font-semibold">
-            #{channel.channel_name ?? channel.channel_id.slice(0, 8)}
-          </h2>
-          <p className="text-sm text-muted-foreground">{channel.channel_id}</p>
-        </div>
-
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
-          <DetailStat label="Messages" value={channel.total_messages} />
-          <DetailStat
-            label="Flagged"
-            value={channel.flagged_count}
-            variant="destructive"
-          />
-          <DetailStat
-            label="Clean"
-            value={channel.clean_count}
-            variant="success"
-          />
-        </div>
-
-        {channel.culture_summary && (
-          <div className="rounded-lg bg-muted/50 p-3">
-            <p className="text-xs text-muted-foreground mb-1">
-              Channel Culture
-            </p>
-            <p className="text-sm">{channel.culture_summary}</p>
-          </div>
-        )}
-
-        {channel.recent_messages.length > 0 && (
-          <div className="space-y-3">
-            <h3 className="text-sm font-semibold">Recent Messages</h3>
-            {channel.recent_messages.slice(0, 5).map((msg) => (
-              <div key={msg.id} className="rounded-lg border p-3">
-                <div className="flex items-center gap-2 mb-1">
-                  <span className="text-sm font-medium">{msg.username}</span>
-                  <span className="text-xs text-muted-foreground">
-                    {new Date(msg.created_at).toLocaleString()}
-                  </span>
-                </div>
-                <p className="text-sm">{msg.content}</p>
-              </div>
-            ))}
-          </div>
-        )}
+    <div className="space-y-5 animate-fade-in-up">
+      <div className="flex items-center gap-3">
+        <Button variant="ghost" size="sm" onClick={onBack}>
+          <ArrowLeft className="size-4 mr-1" />
+          Back
+        </Button>
       </div>
+
+      <Card>
+        <CardContent className="p-6 space-y-5">
+          <div>
+            <h2 className="text-lg font-semibold flex items-center gap-2">
+              <Hash className="size-5 text-muted-foreground" />
+              {channel.channel_name ?? channel.channel_id.slice(0, 8)}
+            </h2>
+            <p className="text-xs text-muted-foreground font-mono mt-0.5">
+              {channel.channel_id}
+            </p>
+          </div>
+
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+            <DetailStat label="Messages" value={channel.total_messages} />
+            <DetailStat
+              label="Flagged"
+              value={channel.flagged_count}
+              variant="danger"
+            />
+            <DetailStat
+              label="Clean"
+              value={channel.clean_count}
+              variant="success"
+            />
+          </div>
+
+          {channel.culture_summary && (
+            <div className="rounded-lg bg-gradient-to-br from-primary/5 to-primary/[0.02] border border-primary/10 p-4">
+              <div className="flex items-center gap-2 mb-2">
+                <Sparkles className="size-4 text-primary" />
+                <p className="text-xs text-muted-foreground font-medium uppercase tracking-wider">
+                  Channel Culture
+                </p>
+              </div>
+              <p className="text-sm leading-relaxed italic">
+                "{channel.culture_summary}"
+              </p>
+            </div>
+          )}
+
+          {channel.recent_messages.length > 0 && (
+            <div className="space-y-3">
+              <h3 className="text-sm font-semibold flex items-center gap-2">
+                <Clock className="size-4 text-muted-foreground" />
+                Recent Messages
+              </h3>
+              <div className="space-y-2">
+                {channel.recent_messages.slice(0, 5).map((msg) => (
+                  <div
+                    key={msg.id}
+                    className="rounded-lg border border-border/50 bg-muted/20 p-3 text-sm"
+                  >
+                    <div className="flex items-center gap-2 mb-1">
+                      <span className="text-sm font-medium">
+                        {msg.username}
+                      </span>
+                      <span className="text-xs text-muted-foreground">
+                        {new Date(msg.created_at).toLocaleString()}
+                      </span>
+                    </div>
+                    <p className="text-sm">{msg.content}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
     </div>
   );
 }
 
-// ── Shared Components ─────────────────────────────────────
+// ── Shared Components ───────────────────────────
 
 function DetailStat({
   label,
@@ -667,27 +767,29 @@ function DetailStat({
 }: {
   label: string;
   value: number;
-  variant?: "default" | "destructive" | "success";
+  variant?: "default" | "danger" | "success";
   suffix?: string;
 }) {
-  const colorMap = {
-    default: "",
-    destructive: "text-destructive",
-    success: "text-green-600 dark:text-green-400",
-  };
-
   return (
-    <div className="rounded-lg border p-3">
-      <p className="text-xs text-muted-foreground">{label}</p>
-      <p className={`text-lg font-semibold ${colorMap[variant ?? "default"]}`}>
-        {formatNumber(value)}
-        {suffix}
-      </p>
-    </div>
+    <Card>
+      <CardContent className="p-3">
+        <p className="text-xs text-muted-foreground">{label}</p>
+        <p
+          className={cn(
+            "text-lg font-bold tabular-nums",
+            variant === "danger" && "text-destructive",
+            variant === "success" && "text-green-500",
+          )}
+        >
+          {formatNumber(value)}
+          {suffix}
+        </p>
+      </CardContent>
+    </Card>
   );
 }
 
-// ── Helpers ───────────────────────────────────────────────
+// ── Helpers ─────────────────────────────────────
 
 function formatNumber(n: number): string {
   return n.toLocaleString();
diff --git a/services/frontend/src/features/live/live-panel.tsx b/services/frontend/src/features/live/live-panel.tsx
index 9f42edb..5bea0f4 100644
--- a/services/frontend/src/features/live/live-panel.tsx
+++ b/services/frontend/src/features/live/live-panel.tsx
@@ -3,19 +3,35 @@
 import {
   Disc3,
   Download,
+  Headphones,
   Loader2,
   Mic,
-  MicOff,
+  Music,
   Play,
   Radio,
   RadioOff,
   SkipForward,
   Square,
   Trash2,
+  UserCheck,
   Volume2,
 } from "lucide-react";
 import Image from "next/image";
 import { useCallback, useEffect, useState } from "react";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Slider } from "@/components/ui/slider";
+import { Switch } from "@/components/ui/switch";
 import { recordingsApi, voiceApi } from "@/lib/api";
 import type {
   ActiveSpeaker,
@@ -23,6 +39,7 @@ import type {
   VoiceRecording,
   VoiceStatus,
 } from "@/lib/types";
+import { cn } from "@/lib/utils";
 import { useWebSocket } from "@/lib/ws/context";
 
 export function LivePanel() {
@@ -86,7 +103,6 @@ export function LivePanel() {
     fetchRecordings();
   }, [fetchVoiceStatus, fetchGuilds, fetchRecordings]);
 
-  // Media status
   const fetchMediaStatus = useCallback(async () => {
     try {
       const state = await voiceApi.getMediaStatus();
@@ -130,14 +146,14 @@ export function LivePanel() {
     };
   }, [ws]);
 
-  // Voice connect handler
-  const handleGuildChange = useCallback(async (guildId: string) => {
-    setSelectedGuild(guildId);
-    setSelectedChannel("");
+  const handleGuildChange = useCallback(async (guildId: string | null) => {
     if (!guildId) {
+      setSelectedGuild("");
       setVoiceChannels([]);
       return;
     }
+    setSelectedGuild(guildId);
+    setSelectedChannel("");
     try {
       const channels = await voiceApi.getVoiceChannels(guildId);
       setVoiceChannels(channels);
@@ -145,6 +161,7 @@ export function LivePanel() {
       setVoiceChannels([]);
     }
   }, []);
+
   const handleConnect = useCallback(async () => {
     if (!selectedGuild || !selectedChannel) return;
     setVoiceLoading(true);
@@ -166,7 +183,6 @@ export function LivePanel() {
     }
   }, []);
 
-  // Media handlers
   const handleQueueMedia = useCallback(async () => {
     if (!queueUrl.trim()) return;
     try {
@@ -196,16 +212,19 @@ export function LivePanel() {
     }
   }, []);
 
-  const handleVolume = useCallback(async (volume: number) => {
-    try {
-      const state = await voiceApi.mediaVolume(volume);
-      setMediaState(state);
-    } catch {
-      // ignore
-    }
-  }, []);
+  const handleVolume = useCallback(
+    async (value: number | readonly number[]) => {
+      const vol = Array.isArray(value) ? value[0] : value;
+      try {
+        const state = await voiceApi.mediaVolume(vol);
+        setMediaState(state);
+      } catch {
+        // ignore
+      }
+    },
+    [],
+  );
 
-  // Delete recording
   const handleDeleteRecording = useCallback(async (id: string) => {
     try {
       await recordingsApi.delete(id);
@@ -216,315 +235,357 @@ export function LivePanel() {
   }, []);
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-5 animate-fade-in-up">
       {/* Voice Connection */}
-      <div className="rounded-lg border p-4 space-y-4">
-        <div className="flex items-center justify-between">
-          <h2 className="text-sm font-semibold flex items-center gap-2">
-            <Radio className="size-4" />
-            Voice Connection
-          </h2>
-          <span
-            className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
-              voiceStatus?.connected
-                ? "bg-green-500/15 text-green-600 dark:text-green-400"
-                : "bg-muted text-muted-foreground"
-            }`}
-          >
-            {voiceStatus?.connected ? "Connected" : "Disconnected"}
-          </span>
-        </div>
-
-        {voiceStatus?.connected && voiceStatus.activeChannelName && (
-          <p className="text-sm text-muted-foreground">
-            Connected to{" "}
-            <span className="font-medium text-foreground">
-              {voiceStatus.activeChannelName}
-            </span>
-          </p>
-        )}
-
-        <div className="flex flex-col sm:flex-row gap-2">
-          <select
-            value={selectedGuild}
-            onChange={(e) => handleGuildChange(e.target.value)}
-            className="flex-1 h-9 rounded-lg border border-input bg-background px-3 text-sm"
-          >
-            <option value="">Select guild…</option>
-            {guilds.map((g) => (
-              <option key={g.id} value={g.id}>
-                {g.name}
-              </option>
-            ))}
-          </select>
-          <select
-            value={selectedChannel}
-            onChange={(e) => setSelectedChannel(e.target.value)}
-            className="flex-1 h-9 rounded-lg border border-input bg-background px-3 text-sm"
-          >
-            <option value="">Select channel…</option>
-            {voiceChannels.map((c) => (
-              <option key={c.id} value={c.id}>
-                {c.name}
-              </option>
-            ))}
-          </select>
-          {voiceStatus?.connected ? (
-            <button
-              onClick={handleDisconnect}
-              disabled={voiceLoading}
-              className="inline-flex items-center gap-2 rounded-lg bg-destructive px-4 py-1.5 text-sm font-medium text-destructive-foreground hover:bg-destructive/90 transition-colors disabled:opacity-50"
-            >
-              {voiceLoading ? (
-                <Loader2 className="size-4 animate-spin" />
-              ) : (
-                <RadioOff className="size-4" />
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Radio className="size-4 text-primary" />
+              Voice Connection
+            </div>
+            <Badge
+              variant={voiceStatus?.connected ? "default" : "secondary"}
+              className={cn(
+                voiceStatus?.connected &&
+                  "bg-green-500/15 text-green-600 dark:text-green-400 hover:bg-green-500/20",
               )}
-              Disconnect
-            </button>
-          ) : (
-            <button
-              onClick={handleConnect}
-              disabled={voiceLoading || !selectedGuild || !selectedChannel}
-              className="inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50"
             >
-              {voiceLoading ? (
-                <Loader2 className="size-4 animate-spin" />
-              ) : (
-                <Radio className="size-4" />
-              )}
-              Connect
-            </button>
+              <span
+                className={cn(
+                  "size-1.5 rounded-full mr-1.5 inline-block",
+                  voiceStatus?.connected
+                    ? "bg-green-500 shadow-[0_0_6px] shadow-green-500/60"
+                    : "bg-muted-foreground",
+                )}
+              />
+              {voiceStatus?.connected ? "Connected" : "Disconnected"}
+            </Badge>
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {voiceStatus?.connected && voiceStatus.activeChannelName && (
+            <p className="text-sm text-muted-foreground flex items-center gap-1.5">
+              <Headphones className="size-4" />
+              Connected to{" "}
+              <span className="font-medium text-foreground">
+                {voiceStatus.activeChannelName}
+              </span>
+            </p>
           )}
-        </div>
-      </div>
+
+          <div className="flex flex-col sm:flex-row gap-2">
+            <Select value={selectedGuild} onValueChange={handleGuildChange}>
+              <SelectTrigger className="flex-1 h-9">
+                <SelectValue placeholder="Select guild…" />
+              </SelectTrigger>
+              <SelectContent>
+                {guilds.map((g) => (
+                  <SelectItem key={g.id} value={g.id}>
+                    {g.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Select
+              value={selectedChannel}
+              onValueChange={(v) => v && setSelectedChannel(v)}
+            >
+              <SelectTrigger className="flex-1 h-9">
+                <SelectValue placeholder="Select channel…" />
+              </SelectTrigger>
+              <SelectContent>
+                {voiceChannels.map((c) => (
+                  <SelectItem key={c.id} value={c.id}>
+                    {c.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {voiceStatus?.connected ? (
+              <Button
+                variant="destructive"
+                onClick={handleDisconnect}
+                disabled={voiceLoading}
+              >
+                {voiceLoading ? (
+                  <Loader2 className="size-4 animate-spin mr-1.5" />
+                ) : (
+                  <RadioOff className="size-4 mr-1.5" />
+                )}
+                Disconnect
+              </Button>
+            ) : (
+              <Button
+                onClick={handleConnect}
+                disabled={voiceLoading || !selectedGuild || !selectedChannel}
+              >
+                {voiceLoading ? (
+                  <Loader2 className="size-4 animate-spin mr-1.5" />
+                ) : (
+                  <Radio className="size-4 mr-1.5" />
+                )}
+                Connect
+              </Button>
+            )}
+          </div>
+        </CardContent>
+      </Card>
 
       {/* Active Speakers */}
       {speakers.filter((s) => s.speaking).length > 0 && (
-        <div className="rounded-lg border p-4 space-y-3">
-          <h3 className="text-sm font-semibold">Active Speakers</h3>
-          <div className="flex flex-wrap gap-2">
-            {speakers
-              .filter((s) => s.speaking)
-              .map((s) => (
-                <div
-                  key={s.userId}
-                  className="flex items-center gap-2 rounded-full border bg-muted/50 px-3 py-1.5"
-                >
-                  <span className="relative flex size-2">
-                    <span className="animate-ping absolute inline-flex size-full rounded-full bg-green-400 opacity-75" />
-                    <span className="relative inline-flex size-2 rounded-full bg-green-500" />
-                  </span>
-                  <span className="text-sm">{s.username}</span>
-                </div>
-              ))}
-          </div>
-        </div>
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-sm font-semibold">
+              <UserCheck className="size-4 text-primary" />
+              Active Speakers
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-wrap gap-2">
+              {speakers
+                .filter((s) => s.speaking)
+                .map((s) => (
+                  <div
+                    key={s.userId}
+                    className="flex items-center gap-2 rounded-full border border-border/50 bg-card px-3 py-1.5 shadow-sm"
+                  >
+                    <span className="relative flex size-2">
+                      <span className="absolute inline-flex size-full rounded-full bg-green-400 opacity-75 live-pulse-ring" />
+                      <span className="relative inline-flex size-2 rounded-full bg-green-500" />
+                    </span>
+                    <span className="text-sm">{s.username}</span>
+                  </div>
+                ))}
+            </div>
+          </CardContent>
+        </Card>
       )}
 
       {/* Music Player */}
-      <div className="rounded-lg border p-4 space-y-4">
-        <h2 className="text-sm font-semibold flex items-center gap-2">
-          <Disc3 className="size-4" />
-          Music Player
-        </h2>
-
-        {/* Queue URL */}
-        <div className="flex gap-2">
-          <input
-            type="text"
-            placeholder="Queue a URL (YouTube, audio file…)"
-            value={queueUrl}
-            onChange={(e) => setQueueUrl(e.target.value)}
-            onKeyDown={(e) => e.key === "Enter" && handleQueueMedia()}
-            className="flex-1 h-9 rounded-lg border border-input bg-background px-3 text-sm"
-          />
-          <button
-            onClick={handleQueueMedia}
-            disabled={!queueUrl.trim()}
-            className="inline-flex items-center gap-2 rounded-lg bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50"
-          >
-            <Play className="size-4" />
-            Queue
-          </button>
-        </div>
-
-        {/* Now Playing */}
-        {mediaState?.current && (
-          <div className="rounded-lg bg-muted/50 p-3 space-y-2">
-            <p className="text-xs text-muted-foreground">Now Playing</p>
-            <div className="flex items-start gap-3">
-              {mediaState.current.thumbnailUrl && (
-                <Image
-                  src={mediaState.current.thumbnailUrl}
-                  alt=""
-                  width={48}
-                  height={48}
-                  className="size-12 rounded object-cover"
-                />
-              )}
-              <div className="flex-1 min-w-0">
-                <p className="text-sm font-medium truncate">
-                  {mediaState.current.title ?? mediaState.current.source}
-                </p>
-                <p className="text-xs text-muted-foreground">
-                  {mediaState.current.durationMs
-                    ? `${Math.floor(mediaState.current.durationMs / 60000)}:${String(
-                        Math.floor(
-                          (mediaState.current.durationMs % 60000) / 1000,
-                        ),
-                      ).padStart(2, "0")}`
-                    : "Live"}
-                </p>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Controls */}
-        <div className="flex items-center gap-2">
-          <button
-            onClick={handleStop}
-            className="inline-flex items-center gap-2 rounded-lg border px-3 py-1.5 text-sm font-medium hover:bg-muted transition-colors"
-          >
-            <Square className="size-4" />
-            Stop
-          </button>
-          <button
-            onClick={handleSkip}
-            className="inline-flex items-center gap-2 rounded-lg border px-3 py-1.5 text-sm font-medium hover:bg-muted transition-colors"
-          >
-            <SkipForward className="size-4" />
-            Skip
-          </button>
-          <div className="flex items-center gap-2 ml-auto">
-            <Volume2 className="size-4 text-muted-foreground" />
-            <input
-              type="range"
-              min="0"
-              max="1"
-              step="0.05"
-              value={mediaState?.musicVolume ?? 0.5}
-              onChange={(e) => handleVolume(Number(e.target.value))}
-              className="w-24 h-2"
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-sm font-semibold">
+            <Music className="size-4 text-primary" />
+            Music Player
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {/* Queue URL */}
+          <div className="flex gap-2">
+            <Input
+              type="text"
+              placeholder="Queue a URL (YouTube, audio file…)"
+              value={queueUrl}
+              onChange={(e) => setQueueUrl(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && handleQueueMedia()}
+              className="flex-1 h-9"
             />
+            <Button onClick={handleQueueMedia} disabled={!queueUrl.trim()}>
+              <Play className="size-4 mr-1.5" />
+              Queue
+            </Button>
           </div>
-        </div>
 
-        {/* Queue */}
-        {mediaState && mediaState.queue.length > 0 && (
-          <div className="space-y-1">
-            <p className="text-xs text-muted-foreground">
-              Queue ({mediaState.queue.length})
-            </p>
-            {mediaState.queue.map((item, i) => (
-              <div
-                key={item.id ?? i}
-                className="flex items-center gap-2 rounded-md bg-muted/30 px-3 py-2"
-              >
-                <span className="text-xs text-muted-foreground w-4">
-                  {i + 1}.
-                </span>
-                <span className="text-sm truncate flex-1">
-                  {item.title ?? item.source}
-                </span>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-
-      {/* Recordings */}
-      <div className="rounded-lg border p-4 space-y-3">
-        <h2 className="text-sm font-semibold">Voice Recordings</h2>
-        {recordings.length === 0 ? (
-          <p className="text-sm text-muted-foreground">No recordings yet.</p>
-        ) : (
-          <div className="space-y-2">
-            {recordings.map((rec) => (
-              <div
-                key={rec.id}
-                className="flex items-center gap-3 rounded-lg border p-3"
-              >
+          {/* Now Playing */}
+          {mediaState?.current && (
+            <div className="rounded-lg bg-gradient-to-br from-primary/5 to-primary/[0.02] border border-primary/10 p-4 space-y-2">
+              <p className="text-xs text-muted-foreground font-medium uppercase tracking-wider flex items-center gap-1.5">
+                <Disc3 className="size-3" />
+                Now Playing
+              </p>
+              <div className="flex items-start gap-3">
+                {mediaState.current.thumbnailUrl && (
+                  <Image
+                    src={mediaState.current.thumbnailUrl}
+                    alt=""
+                    width={56}
+                    height={56}
+                    className="size-14 rounded-lg object-cover shadow-sm"
+                  />
+                )}
                 <div className="flex-1 min-w-0">
-                  <p className="text-sm font-medium truncate">{rec.username}</p>
-                  <p className="text-xs text-muted-foreground">
-                    {rec.channel_name ?? rec.channel_id ?? "Unknown channel"}
-                    {" — "}
-                    {new Date(rec.created_at).toLocaleString()}
+                  <p className="text-sm font-medium truncate">
+                    {mediaState.current.title ?? mediaState.current.source}
+                  </p>
+                  <p className="text-xs text-muted-foreground mt-0.5">
+                    {mediaState.current.durationMs
+                      ? `${Math.floor(mediaState.current.durationMs / 60000)}:${String(
+                          Math.floor(
+                            (mediaState.current.durationMs % 60000) / 1000,
+                          ),
+                        ).padStart(2, "0")}`
+                      : "Live"}
                   </p>
                 </div>
-                <span className="text-xs text-muted-foreground whitespace-nowrap">
-                  {formatBytes(rec.size_bytes)}
-                </span>
-                {rec.download_url && (
-                  <a
-                    href={rec.download_url}
-                    target="_blank"
-                    rel="noreferrer"
-                    className="inline-flex items-center rounded-md border p-1.5 hover:bg-muted transition-colors"
-                  >
-                    <Download className="size-4" />
-                  </a>
-                )}
-                <button
-                  onClick={() => handleDeleteRecording(rec.id)}
-                  className="inline-flex items-center rounded-md border p-1.5 hover:bg-destructive/10 hover:text-destructive transition-colors"
-                >
-                  <Trash2 className="size-4" />
-                </button>
               </div>
-            ))}
-          </div>
-        )}
-      </div>
+            </div>
+          )}
 
-      {/* Microphone Transmit */}
-      <div className="rounded-lg border p-4 space-y-3">
-        <div className="flex items-center justify-between">
-          <h2 className="text-sm font-semibold flex items-center gap-2">
-            <Mic className="size-4" />
-            Microphone
-          </h2>
-          <button
-            type="button"
-            onClick={async () => {
-              setMicActive(!micActive);
-              try {
-                await voiceApi.sendCommand(
-                  micActive ? "voice:transmit:stop" : "voice:transmit:start",
-                );
-              } catch {
-                setMicActive(micActive);
-              }
-            }}
-            disabled={!voiceStatus?.connected}
-            data-active={micActive ? "" : undefined}
-            className="inline-flex items-center gap-2 rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors data-[active]:bg-destructive data-[active]:text-destructive-foreground hover:bg-muted disabled:opacity-50"
-          >
-            {micActive ? (
-              <MicOff className="size-4" />
-            ) : (
-              <Mic className="size-4" />
-            )}
-            {micActive ? "Stop" : "Start"}
-          </button>
-        </div>
-        {!voiceStatus?.connected && (
-          <p className="text-xs text-muted-foreground">
-            Connect to a voice channel first.
-          </p>
-        )}
-        {micActive && (
+          {/* Controls */}
           <div className="flex items-center gap-2">
-            <span className="relative flex size-2">
-              <span className="animate-ping absolute inline-flex size-full rounded-full bg-red-400 opacity-75" />
-              <span className="relative inline-flex size-2 rounded-full bg-red-500" />
-            </span>
-            <span className="text-sm text-muted-foreground">Transmitting…</span>
+            <Button variant="outline" size="sm" onClick={handleStop}>
+              <Square className="size-4 mr-1" />
+              Stop
+            </Button>
+            <Button variant="outline" size="sm" onClick={handleSkip}>
+              <SkipForward className="size-4 mr-1" />
+              Skip
+            </Button>
+            <div className="flex items-center gap-2 ml-auto">
+              <Volume2 className="size-4 text-muted-foreground" />
+              <Slider
+                className="w-24"
+                defaultValue={[mediaState?.musicVolume ?? 0.5]}
+                value={[mediaState?.musicVolume ?? 0.5]}
+                onValueChange={handleVolume}
+                min={0}
+                max={1}
+                step={0.05}
+              />
+            </div>
           </div>
-        )}
-      </div>
+
+          {/* Queue */}
+          {mediaState && mediaState.queue.length > 0 && (
+            <div className="space-y-1.5">
+              <p className="text-xs text-muted-foreground font-medium">
+                Queue ({mediaState.queue.length})
+              </p>
+              <div className="space-y-1">
+                {mediaState.queue.map((item, i) => (
+                  <div
+                    key={item.id ?? i}
+                    className="flex items-center gap-2 rounded-md bg-muted/30 px-3 py-2 text-sm"
+                  >
+                    <span className="text-xs text-muted-foreground font-mono w-5 text-right">
+                      {i + 1}.
+                    </span>
+                    <span className="truncate flex-1">
+                      {item.title ?? item.source}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Microphone */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center justify-between">
+            <div className="flex items-center gap-2 text-sm font-semibold">
+              <Mic className="size-4 text-primary" />
+              Microphone
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-xs text-muted-foreground">
+                {micActive ? "On" : "Off"}
+              </span>
+              <Switch
+                checked={micActive}
+                onCheckedChange={async (checked) => {
+                  setMicActive(checked);
+                  try {
+                    await voiceApi.sendCommand(
+                      checked ? "voice:transmit:start" : "voice:transmit:stop",
+                    );
+                  } catch {
+                    setMicActive(!checked);
+                  }
+                }}
+                disabled={!voiceStatus?.connected}
+              />
+            </div>
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          {!voiceStatus?.connected && (
+            <p className="text-xs text-muted-foreground">
+              Connect to a voice channel first.
+            </p>
+          )}
+          {micActive && (
+            <div className="flex items-center gap-2 mt-1">
+              <span className="relative flex size-2">
+                <span className="absolute inline-flex size-full rounded-full bg-red-400 opacity-75 live-pulse-ring" />
+                <span className="relative inline-flex size-2 rounded-full bg-red-500" />
+              </span>
+              <span className="text-sm text-muted-foreground">
+                Transmitting…
+              </span>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Recordings */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-sm font-semibold">
+            <Headphones className="size-4 text-primary" />
+            Voice Recordings
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          {recordings.length === 0 ? (
+            <p className="text-sm text-muted-foreground py-8 text-center">
+              No recordings yet.
+            </p>
+          ) : (
+            <div className="space-y-2">
+              {recordings.map((rec) => (
+                <div
+                  key={rec.id}
+                  className="flex items-center gap-3 rounded-lg border border-border/50 p-3 hover:bg-muted/30 transition-colors"
+                >
+                  <Avatar className="size-8">
+                    <AvatarImage src={rec.avatar_url ?? undefined} />
+                    <AvatarFallback>
+                      {(rec.username ?? "?").charAt(0).toUpperCase()}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium truncate">
+                      {rec.username}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {rec.channel_name ?? rec.channel_id ?? "Unknown channel"}
+                      {" — "}
+                      {new Date(rec.created_at).toLocaleString()}
+                    </p>
+                  </div>
+                  <Badge
+                    variant="outline"
+                    className="text-[10px] font-mono shrink-0"
+                  >
+                    {formatBytes(rec.size_bytes)}
+                  </Badge>
+                  {rec.download_url && (
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => window.open(rec.download_url!, "_blank")}
+                    >
+                      <Download className="size-4" />
+                    </Button>
+                  )}
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => handleDeleteRecording(rec.id)}
+                    className="hover:text-destructive hover:bg-destructive/10"
+                  >
+                    <Trash2 className="size-4" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
     </div>
   );
 }
diff --git a/services/frontend/src/features/mascot/mascot-chatbot.tsx b/services/frontend/src/features/mascot/mascot-chatbot.tsx
index 67a7420..777c579 100644
--- a/services/frontend/src/features/mascot/mascot-chatbot.tsx
+++ b/services/frontend/src/features/mascot/mascot-chatbot.tsx
@@ -5,13 +5,26 @@ import {
   Loader2,
   MessageCircle,
   Send,
+  Sparkles,
   Trash2,
   User,
   X,
 } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import { mascotApi } from "@/lib/api";
 import type { ChatHistoryMessage } from "@/lib/types";
+import { cn } from "@/lib/utils";
 
 export function MascotChatbot() {
   const [open, setOpen] = useState(false);
@@ -28,12 +41,11 @@ export function MascotChatbot() {
       .catch(() => {});
   }, [open]);
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: scrollRef doesn't need messages in deps
   useEffect(() => {
     if (scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
-  }, [messages]);
+  }, []);
 
   const handleClear = useCallback(async () => {
     try {
@@ -83,102 +95,126 @@ export function MascotChatbot() {
   return (
     <>
       {/* Toggle button */}
-      <button
+      <Button
         onClick={() => setOpen(!open)}
-        className="fixed bottom-4 right-4 z-50 flex size-12 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg hover:bg-primary/90 transition-colors"
+        size="icon"
         aria-label={open ? "Close chat" : "Open chat"}
+        className={cn(
+          "fixed bottom-4 right-4 z-50 size-12 rounded-full shadow-lg transition-all duration-200",
+          open && "scale-90 opacity-80 hover:scale-100 hover:opacity-100",
+        )}
       >
         {open ? <X className="size-5" /> : <MessageCircle className="size-5" />}
-      </button>
+      </Button>
 
       {/* Chat panel */}
       {open && (
-        <div className="fixed bottom-20 right-4 z-50 flex w-80 flex-col rounded-lg border bg-background shadow-xl overflow-hidden">
-          {/* Header */}
-          <div className="flex items-center gap-2 border-b p-3">
-            <Bot className="size-5 text-primary" />
-            <span className="text-sm font-semibold flex-1">Mascot</span>
-            {messages.length > 0 && (
-              <button
-                type="button"
-                onClick={handleClear}
-                className="inline-flex size-6 items-center justify-center rounded hover:bg-muted transition-colors"
-                title="Clear history"
-              >
-                <Trash2 className="size-3.5 text-muted-foreground" />
-              </button>
-            )}
-          </div>
-
-          {/* Messages */}
-          <div
-            ref={scrollRef}
-            className="flex-1 space-y-3 overflow-y-auto p-3 max-h-80"
-          >
-            {messages.length === 0 && (
-              <p className="text-center text-xs text-muted-foreground py-8">
-                Ask me anything about the server!
-              </p>
-            )}
-            {messages.map((msg, _i) => (
-              <div
-                key={msg.timestamp + msg.role}
-                className={`flex items-start gap-2 ${
-                  msg.role === "user" ? "flex-row-reverse" : ""
-                }`}
-              >
-                <div className="size-6 shrink-0 rounded-full bg-muted flex items-center justify-center">
-                  {msg.role === "user" ? (
-                    <User className="size-3" />
-                  ) : (
-                    <Bot className="size-3" />
-                  )}
-                </div>
-                <div
-                  className={`rounded-lg px-3 py-2 text-sm max-w-[80%] ${
-                    msg.role === "user"
-                      ? "bg-primary text-primary-foreground"
-                      : "bg-muted"
-                  }`}
+        <Card className="fixed bottom-20 right-4 z-50 w-80 sm:w-96 shadow-xl border-border/50 animate-fade-in-up">
+          <CardHeader className="border-b border-border/50 bg-gradient-to-r from-primary/5 to-primary/[0.02]">
+            <CardTitle className="flex items-center gap-2 text-sm font-semibold">
+              <div className="flex size-6 items-center justify-center rounded-full bg-primary/10">
+                <Bot className="size-3.5 text-primary" />
+              </div>
+              Mascot
+              <Sparkles className="size-3 text-primary/60 ml-0.5" />
+              <div className="flex-1" />
+              {messages.length > 0 && (
+                <Button
+                  variant="ghost"
+                  size="icon-xs"
+                  onClick={handleClear}
+                  title="Clear history"
+                  className="text-muted-foreground hover:text-foreground"
                 >
-                  {msg.content}
-                </div>
-              </div>
-            ))}
-            {sending && (
-              <div className="flex items-center gap-2">
-                <div className="size-6 shrink-0 rounded-full bg-muted flex items-center justify-center">
-                  <Bot className="size-3" />
-                </div>
-                <div className="rounded-lg bg-muted px-3 py-2">
-                  <Loader2 className="size-4 animate-spin" />
-                </div>
-              </div>
-            )}
-          </div>
+                  <Trash2 className="size-3.5" />
+                </Button>
+              )}
+            </CardTitle>
+          </CardHeader>
 
-          {/* Input */}
-          <div className="border-t p-3">
-            <div className="flex gap-2">
-              <input
+          <CardContent className="p-0">
+            <ScrollArea className="h-80">
+              <div ref={scrollRef} className="space-y-3 p-3">
+                {messages.length === 0 && (
+                  <p className="text-center text-xs text-muted-foreground py-12">
+                    Ask me anything about the server!
+                  </p>
+                )}
+                {messages.map((msg) => (
+                  <div
+                    key={msg.timestamp + msg.role}
+                    className={cn(
+                      "flex items-start gap-2",
+                      msg.role === "user" && "flex-row-reverse",
+                    )}
+                  >
+                    <Avatar className="size-6 shrink-0">
+                      <AvatarFallback className="text-[10px] bg-muted">
+                        {msg.role === "user" ? (
+                          <User className="size-3" />
+                        ) : (
+                          <Bot className="size-3" />
+                        )}
+                      </AvatarFallback>
+                    </Avatar>
+                    <div
+                      className={cn(
+                        "rounded-xl px-3 py-2 text-sm max-w-[80%] leading-relaxed",
+                        msg.role === "user"
+                          ? "bg-primary text-primary-foreground"
+                          : "bg-muted/70",
+                      )}
+                    >
+                      {msg.content}
+                    </div>
+                  </div>
+                ))}
+                {sending && (
+                  <div className="flex items-start gap-2">
+                    <Avatar className="size-6 shrink-0">
+                      <AvatarFallback className="text-[10px] bg-muted">
+                        <Bot className="size-3" />
+                      </AvatarFallback>
+                    </Avatar>
+                    <div className="rounded-xl bg-muted/70 px-3 py-2">
+                      <Loader2 className="size-4 animate-spin text-muted-foreground" />
+                    </div>
+                  </div>
+                )}
+              </div>
+            </ScrollArea>
+          </CardContent>
+
+          <CardFooter className="border-t border-border/50 p-3">
+            <form
+              onSubmit={(e) => {
+                e.preventDefault();
+                handleSend();
+              }}
+              className="flex w-full gap-2"
+            >
+              <Input
                 type="text"
                 placeholder="Ask the mascot…"
                 value={input}
                 onChange={(e) => setInput(e.target.value)}
-                onKeyDown={(e) => e.key === "Enter" && handleSend()}
-                className="flex-1 h-8 rounded-md border border-input bg-background px-2 text-sm"
                 disabled={sending}
+                className="h-8 flex-1"
               />
-              <button
-                onClick={handleSend}
+              <Button
+                type="submit"
+                size="icon-sm"
                 disabled={!input.trim() || sending}
-                className="inline-flex size-8 items-center justify-center rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50"
               >
-                <Send className="size-4" />
-              </button>
-            </div>
-          </div>
-        </div>
+                {sending ? (
+                  <Loader2 className="size-4 animate-spin" />
+                ) : (
+                  <Send className="size-4" />
+                )}
+              </Button>
+            </form>
+          </CardFooter>
+        </Card>
       )}
     </>
   );
diff --git a/services/frontend/src/features/messages/messages-panel.tsx b/services/frontend/src/features/messages/messages-panel.tsx
index fc6a600..e6bd1cb 100644
--- a/services/frontend/src/features/messages/messages-panel.tsx
+++ b/services/frontend/src/features/messages/messages-panel.tsx
@@ -4,19 +4,43 @@ import {
   AlertCircle,
   ExternalLink,
   Flag,
+  Hash,
   Loader2,
   RefreshCw,
   Search,
+  Sparkles,
   X,
 } from "lucide-react";
 import Image from "next/image";
 import { useCallback, useEffect, useState } from "react";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Progress } from "@/components/ui/progress";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { messagesApi, voiceApi } from "@/lib/api";
 import type { AttachmentRecord, Channel, MessageRecord } from "@/lib/types";
+import { cn } from "@/lib/utils";
 import { useWebSocket } from "@/lib/ws/context";
 
 export function MessagesPanel({ guildId }: { guildId: string }) {
-  // All hooks must be called unconditionally — before the early return.
   const [messages, setMessages] = useState<MessageRecord[]>([]);
   const [loading, setLoading] = useState(true);
   const [loadingMore, setLoadingMore] = useState(false);
@@ -43,9 +67,8 @@ export function MessagesPanel({ guildId }: { guildId: string }) {
 
   const ws = useWebSocket();
 
-  // ── Data-fetching side effects (all hooks before any early return) ──
+  // ── Data fetching ──
 
-  // Fetch available text channels for filtering
   useEffect(() => {
     if (!guildId) return;
     voiceApi
@@ -54,7 +77,6 @@ export function MessagesPanel({ guildId }: { guildId: string }) {
       .catch(() => {});
   }, [guildId]);
 
-  // Fetch initial messages
   const fetchMessages = useCallback(async () => {
     if (!guildId) return;
     setLoading(true);
@@ -75,7 +97,6 @@ export function MessagesPanel({ guildId }: { guildId: string }) {
     }
   }, [guildId, selectedChannel]);
 
-  // Fetch image messages
   const fetchImages = useCallback(async () => {
     if (!guildId) return;
     try {
@@ -86,7 +107,6 @@ export function MessagesPanel({ guildId }: { guildId: string }) {
     }
   }, [guildId]);
 
-  // Fetch review (flagged) messages
   const fetchReview = useCallback(async () => {
     try {
       const result = await messagesApi.getReview(
@@ -108,7 +128,7 @@ export function MessagesPanel({ guildId }: { guildId: string }) {
     if (viewTab === "review") fetchReview();
   }, [viewTab, fetchReview]);
 
-  // WS subscription for real-time message updates
+  // WS subscriptions
   useEffect(() => {
     if (!guildId) return;
     const unsubCreated = ws.on("message_created", (msg) => {
@@ -142,7 +162,6 @@ export function MessagesPanel({ guildId }: { guildId: string }) {
     };
   }, [ws, guildId]);
 
-  // Search handler
   const handleSearch = useCallback(async () => {
     if (!searchQuery.trim()) {
       setSearchResults(null);
@@ -159,7 +178,6 @@ export function MessagesPanel({ guildId }: { guildId: string }) {
     }
   }, [searchQuery]);
 
-  // Load more (cursor pagination)
   const handleLoadMore = useCallback(async () => {
     if (!cursor || loadingMore) return;
     setLoadingMore(true);
@@ -186,7 +204,6 @@ export function MessagesPanel({ guildId }: { guildId: string }) {
     try {
       const detail = await messagesApi.getDetail(id);
       setDetailMessage(detail);
-      // Try to fetch attachments too
       if (detail.channel_id && id) {
         messagesApi
           .getAttachments(detail.channel_id, 10)
@@ -219,96 +236,83 @@ export function MessagesPanel({ guildId }: { guildId: string }) {
   const displayMessages = searchResults ?? messages;
   const isEmpty = !loading && displayMessages.length === 0;
 
-  // Render error state
   if (error) {
     return (
-      <div className="flex flex-col items-center justify-center py-16 text-center">
-        <AlertCircle className="size-8 text-destructive mb-2" />
-        <p className="text-sm text-muted-foreground mb-4">{error}</p>
-        <button
-          onClick={fetchMessages}
-          className="inline-flex items-center gap-2 rounded-lg border px-4 py-2 text-sm font-medium hover:bg-muted transition-colors"
-        >
-          <RefreshCw className="size-4" />
+      <div className="flex flex-col items-center justify-center py-20 text-center">
+        <AlertCircle className="size-10 text-destructive mb-3" />
+        <p className="text-sm text-muted-foreground mb-4 max-w-sm">{error}</p>
+        <Button variant="outline" onClick={fetchMessages}>
+          <RefreshCw className="size-4 mr-2" />
           Retry
-        </button>
+        </Button>
       </div>
     );
   }
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-5">
       {/* Search + toolbar */}
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
         <div className="relative flex-1">
           <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
-          <input
+          <Input
             type="text"
             placeholder="Search messages…"
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
             onKeyDown={(e) => e.key === "Enter" && handleSearch()}
-            className="w-full h-9 rounded-lg border border-input bg-background pl-9 pr-3 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            className="pl-9 h-9"
           />
         </div>
 
         {/* Channel filter */}
         {channels.length > 0 && (
-          <select
+          <Select
             value={selectedChannel}
-            onChange={(e) => setSelectedChannel(e.target.value)}
-            className="h-9 rounded-lg border border-input bg-background px-3 text-sm"
+            onValueChange={(v) => v && setSelectedChannel(v)}
           >
-            <option value="">All channels</option>
-            {channels.map((ch) => (
-              <option key={ch.id} value={ch.id}>
-                #{ch.name}
-              </option>
-            ))}
-          </select>
+            <SelectTrigger className="h-9 w-full sm:w-44">
+              <SelectValue placeholder="All channels" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value=" ">All channels</SelectItem>
+              {channels.map((ch) => (
+                <SelectItem key={ch.id} value={ch.id}>
+                  # {ch.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         )}
 
-        <button
-          onClick={handleReanalyzeBatch}
-          className="inline-flex items-center gap-2 rounded-lg border px-3 py-1.5 text-sm font-medium hover:bg-muted transition-colors"
-        >
-          <RefreshCw className="size-4" />
+        <Button variant="outline" size="sm" onClick={handleReanalyzeBatch}>
+          <RefreshCw className="size-4 mr-1.5" />
           Reanalyze Errors
-        </button>
+        </Button>
       </div>
 
-      {/* Tab bar */}
-      <div className="flex gap-1 rounded-lg border p-1 w-fit">
-        <button
-          type="button"
-          onClick={() => setViewTab("all")}
-          data-active={viewTab === "all" ? "" : undefined}
-          className="rounded-md px-3 py-1.5 text-sm font-medium transition-colors data-[active]:bg-primary data-[active]:text-primary-foreground hover:bg-muted"
-        >
-          All ({messages.length})
-        </button>
-        <button
-          type="button"
-          onClick={() => setViewTab("images")}
-          data-active={viewTab === "images" ? "" : undefined}
-          className="rounded-md px-3 py-1.5 text-sm font-medium transition-colors data-[active]:bg-primary data-[active]:text-primary-foreground hover:bg-muted"
-        >
-          Images
-        </button>
-        <button
-          type="button"
-          onClick={() => setViewTab("review")}
-          data-active={viewTab === "review" ? "" : undefined}
-          className="rounded-md px-3 py-1.5 text-sm font-medium transition-colors data-[active]:bg-primary data-[active]:text-primary-foreground hover:bg-muted"
-        >
-          <Flag className="size-3.5 inline mr-1" />
-          Review ({reviewMessages.length})
-        </button>
-      </div>
+      {/* Tab bar using shadcn Tabs */}
+      <Tabs
+        value={viewTab}
+        onValueChange={(v) => setViewTab(v as "all" | "images" | "review")}
+      >
+        <TabsList>
+          <TabsTrigger value="all" onClick={() => setViewTab("all")}>
+            All ({messages.length})
+          </TabsTrigger>
+          <TabsTrigger value="images" onClick={() => setViewTab("images")}>
+            Images ({imageMessages.length})
+          </TabsTrigger>
+          <TabsTrigger value="review" onClick={() => setViewTab("review")}>
+            <Flag className="size-3.5 mr-1" />
+            Review ({reviewMessages.length})
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
 
       {/* Search results count */}
       {searchResults !== null && (
-        <p className="text-sm text-muted-foreground">
+        <p className="text-sm text-muted-foreground animate-fade-in-up">
           Found {searchResults.length} result
           {searchResults.length !== 1 ? "s" : ""}
         </p>
@@ -316,22 +320,16 @@ export function MessagesPanel({ guildId }: { guildId: string }) {
 
       {/* Messages feed */}
       {viewTab === "all" ? (
-        <div className="space-y-2">
+        <div className="space-y-2 animate-fade-in-up">
           {loading ? (
             <div className="space-y-3">
-              {Array.from({ length: 8 }, (_, i) => `msg-sk-${i}`).map((key) => (
-                <div key={key} className="flex gap-3 rounded-lg border p-4">
-                  <div className="size-8 shrink-0 rounded-full bg-muted animate-pulse" />
-                  <div className="flex-1 space-y-2">
-                    <div className="h-4 w-32 bg-muted rounded animate-pulse" />
-                    <div className="h-3 w-full bg-muted rounded animate-pulse" />
-                    <div className="h-3 w-3/4 bg-muted rounded animate-pulse" />
-                  </div>
-                </div>
+              {Array.from({ length: 8 }, (_, i) => (
+                <Skeleton key={i} className="h-28 rounded-xl" />
               ))}
             </div>
           ) : isEmpty ? (
-            <div className="flex flex-col items-center justify-center py-16 text-center">
+            <div className="flex flex-col items-center justify-center py-20 text-center">
+              <Search className="size-10 text-muted-foreground/40 mb-3" />
               <p className="text-sm text-muted-foreground">
                 {searchResults !== null
                   ? "No messages found matching your search."
@@ -349,75 +347,87 @@ export function MessagesPanel({ guildId }: { guildId: string }) {
                 />
               ))}
 
-              {/* Load more */}
               {hasMore && searchResults === null && (
-                <div className="flex justify-center py-4">
-                  <button
-                    type="button"
+                <div className="flex justify-center py-6">
+                  <Button
+                    variant="outline"
                     onClick={handleLoadMore}
                     disabled={loadingMore}
-                    className="inline-flex items-center gap-2 rounded-lg border px-4 py-2 text-sm font-medium hover:bg-muted transition-colors disabled:opacity-50"
                   >
-                    {loadingMore ? (
-                      <Loader2 className="size-4 animate-spin" />
-                    ) : null}
+                    {loadingMore && (
+                      <Loader2 className="size-4 animate-spin mr-2" />
+                    )}
                     {loadingMore ? "Loading…" : "Load more"}
-                  </button>
+                  </Button>
                 </div>
               )}
             </>
           )}
         </div>
       ) : viewTab === "images" ? (
-        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
-          {imageMessages.map((msg) => {
-            // Extract image URLs from metadata
-            let imageUrl: string | null = null;
-            try {
-              const meta = JSON.parse(msg.metadata ?? "{}");
-              const attachments: Array<{ url: string; contentType?: string }> =
-                meta.attachments ?? [];
-              const img = attachments.find((a) =>
-                a.contentType?.startsWith("image/"),
-              );
-              imageUrl = img?.url ?? null;
-            } catch {
-              // metadata is malformed
-            }
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 animate-fade-in-up">
+          {imageMessages.length === 0 ? (
+            <div className="col-span-full flex flex-col items-center justify-center py-20 text-center">
+              <ImageIcon className="size-10 text-muted-foreground/40 mb-3" />
+              <p className="text-sm text-muted-foreground">No images yet.</p>
+            </div>
+          ) : (
+            imageMessages.map((msg) => {
+              let imageUrl: string | null = null;
+              try {
+                const meta = JSON.parse(msg.metadata ?? "{}");
+                const attachments: Array<{
+                  url: string;
+                  contentType?: string;
+                }> = meta.attachments ?? [];
+                const img = attachments.find((a) =>
+                  a.contentType?.startsWith("image/"),
+                );
+                imageUrl = img?.url ?? null;
+              } catch {
+                // metadata malformed
+              }
 
-            return (
-              <div
-                key={msg.id}
-                className="group relative aspect-square rounded-lg border bg-muted overflow-hidden"
-              >
-                {imageUrl ? (
-                  <Image
-                    src={imageUrl}
-                    alt={msg.content || "Image"}
-                    fill
-                    className="object-cover"
-                    sizes="(max-width: 768px) 50vw, 25vw"
-                  />
-                ) : (
-                  <div className="flex items-center justify-center size-full text-muted-foreground text-xs">
-                    No image
+              return (
+                <Card
+                  key={msg.id}
+                  className="group relative overflow-hidden cursor-pointer"
+                  onClick={() => handleMessageClick(msg.id)}
+                >
+                  <div className="aspect-square relative bg-muted">
+                    {imageUrl ? (
+                      <Image
+                        src={imageUrl}
+                        alt={msg.content || "Image"}
+                        fill
+                        className="object-cover transition-transform duration-300 group-hover:scale-105"
+                        sizes="(max-width: 768px) 50vw, 25vw"
+                      />
+                    ) : (
+                      <div className="flex items-center justify-center size-full text-muted-foreground text-xs">
+                        No image
+                      </div>
+                    )}
+                    {/* Hover overlay */}
+                    {msg.content && (
+                      <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-end p-3">
+                        <p className="text-xs text-white/90 line-clamp-2">
+                          {msg.username}: {msg.content}
+                        </p>
+                      </div>
+                    )}
                   </div>
-                )}
-                {msg.content && (
-                  <div className="absolute bottom-0 left-0 right-0 p-2 text-xs text-white bg-gradient-to-t from-black/70 to-transparent truncate opacity-0 group-hover:opacity-100 transition-opacity">
-                    {msg.username}: {msg.content}
-                  </div>
-                )}
-              </div>
-            );
-          })}
+                </Card>
+              );
+            })
+          )}
         </div>
       ) : (
         /* Review tab */
-        <div className="space-y-2">
+        <div className="space-y-2 animate-fade-in-up">
           {reviewMessages.length === 0 ? (
-            <div className="flex flex-col items-center justify-center py-16 text-center">
-              <Flag className="size-8 text-muted-foreground mb-2" />
+            <div className="flex flex-col items-center justify-center py-20 text-center">
+              <Flag className="size-10 text-muted-foreground/40 mb-3" />
               <p className="text-sm text-muted-foreground">
                 No flagged messages to review.
               </p>
@@ -435,45 +445,39 @@ export function MessagesPanel({ guildId }: { guildId: string }) {
         </div>
       )}
 
-      {/* Message Detail Modal */}
-      {detailMessage && (
-        <div className="fixed inset-0 z-50 flex items-start justify-center bg-black/50 pt-12 px-4">
-          <div className="w-full max-w-2xl rounded-lg border bg-background shadow-xl overflow-hidden">
-            {/* Header */}
-            <div className="flex items-center justify-between border-b p-4">
-              <h3 className="text-sm font-semibold">Message Detail</h3>
-              <button
-                type="button"
-                onClick={() => setDetailMessage(null)}
-                className="inline-flex size-7 items-center justify-center rounded-md hover:bg-muted transition-colors"
-              >
-                <X className="size-4" />
-              </button>
-            </div>
+      {/* Message Detail Dialog */}
+      <Dialog
+        open={detailMessage !== null}
+        onOpenChange={(open) => {
+          if (!open) setDetailMessage(null);
+        }}
+      >
+        <DialogContent className="sm:max-w-2xl max-h-[85vh]">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <MessageSquare className="size-4" />
+              Message Detail
+            </DialogTitle>
+          </DialogHeader>
 
-            {/* Content */}
-            <div className="max-h-[70vh] overflow-y-auto p-4 space-y-4">
+          <ScrollArea className="max-h-[70vh] pr-1">
+            <div className="space-y-5">
               {detailLoading ? (
-                <div className="flex justify-center py-8">
-                  <Loader2 className="size-6 animate-spin" />
+                <div className="flex justify-center py-12">
+                  <Loader2 className="size-6 animate-spin text-muted-foreground" />
                 </div>
-              ) : (
+              ) : detailMessage ? (
                 <>
                   {/* Message info */}
                   <div className="flex items-start gap-3">
-                    <div className="size-10 shrink-0 rounded-full bg-muted flex items-center justify-center text-sm font-medium overflow-hidden">
-                      {detailMessage.avatar_url ? (
-                        <Image
-                          src={detailMessage.avatar_url}
-                          alt=""
-                          width={40}
-                          height={40}
-                          className="size-full object-cover"
-                        />
-                      ) : (
-                        detailMessage.username.charAt(0).toUpperCase()
-                      )}
-                    </div>
+                    <Avatar className="size-10">
+                      <AvatarImage
+                        src={detailMessage.avatar_url ?? undefined}
+                      />
+                      <AvatarFallback>
+                        {detailMessage.username.charAt(0).toUpperCase()}
+                      </AvatarFallback>
+                    </Avatar>
                     <div className="flex-1 min-w-0">
                       <div className="flex items-center gap-2 flex-wrap">
                         <span className="text-sm font-medium">
@@ -483,44 +487,55 @@ export function MessagesPanel({ guildId }: { guildId: string }) {
                           {new Date(detailMessage.created_at).toLocaleString()}
                         </span>
                         {detailMessage.type === "deleted" && (
-                          <span className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium bg-red-500/10 text-red-500">
+                          <Badge variant="destructive" className="text-[10px]">
                             deleted
-                          </span>
+                          </Badge>
+                        )}
+                        {detailMessage.type === "edited" && (
+                          <Badge variant="outline" className="text-[10px]">
+                            edited
+                          </Badge>
                         )}
                       </div>
-                      <p className="text-sm mt-1 whitespace-pre-wrap break-words">
+                      <p className="text-sm mt-2 whitespace-pre-wrap break-words leading-relaxed">
                         {detailMessage.content}
                       </p>
                     </div>
                   </div>
 
-                  {/* AI Analysis section */}
+                  {/* AI Analysis */}
                   {detailMessage.ai_analysis && (
-                    <div className="rounded-lg bg-muted/50 p-3">
-                      <p className="text-xs text-muted-foreground mb-1">
-                        AI Analysis
+                    <div className="rounded-lg bg-gradient-to-br from-primary/5 to-primary/[0.02] border border-primary/10 p-4">
+                      <div className="flex items-center gap-2 mb-2">
+                        <Sparkles className="size-4 text-primary" />
+                        <p className="text-xs text-muted-foreground font-medium">
+                          AI Analysis
+                        </p>
+                      </div>
+                      <p className="text-sm leading-relaxed">
+                        {detailMessage.ai_analysis}
                       </p>
-                      <p className="text-sm">{detailMessage.ai_analysis}</p>
                     </div>
                   )}
 
                   {/* AI flags */}
                   {detailMessage.ai_moderation_flags &&
                     detailMessage.ai_moderation_flags !== "[]" && (
-                      <div className="space-y-1">
-                        <p className="text-xs text-muted-foreground">
+                      <div className="space-y-2">
+                        <p className="text-xs text-muted-foreground font-medium">
                           Moderation Flags
                         </p>
-                        <div className="flex flex-wrap gap-1">
+                        <div className="flex flex-wrap gap-1.5">
                           {safeParseJsonArray(
                             detailMessage.ai_moderation_flags,
                           ).map((flag) => (
-                            <span
+                            <Badge
                               key={flag}
-                              className="inline-flex items-center rounded-md bg-destructive/10 px-2 py-0.5 text-xs font-medium text-destructive"
+                              variant="destructive"
+                              className="text-[11px]"
                             >
                               {flag}
-                            </span>
+                            </Badge>
                           ))}
                         </div>
                       </div>
@@ -529,51 +544,61 @@ export function MessagesPanel({ guildId }: { guildId: string }) {
                   {/* AI Scores */}
                   <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
                     {detailMessage.ai_status && (
-                      <div className="rounded-lg border p-2">
-                        <p className="text-xs text-muted-foreground">Status</p>
-                        <p className="text-sm font-medium">
-                          {detailMessage.ai_status}
-                        </p>
-                      </div>
+                      <Card>
+                        <CardContent className="p-3">
+                          <p className="text-xs text-muted-foreground">
+                            Status
+                          </p>
+                          <p className="text-sm font-medium mt-0.5 capitalize">
+                            {detailMessage.ai_status}
+                          </p>
+                        </CardContent>
+                      </Card>
                     )}
                     {detailMessage.ai_severity &&
                       detailMessage.ai_severity !== "none" && (
-                        <div className="rounded-lg border p-2">
-                          <p className="text-xs text-muted-foreground">
-                            Severity
-                          </p>
-                          <p className="text-sm font-medium text-destructive">
-                            {detailMessage.ai_severity}
-                          </p>
-                        </div>
+                        <Card>
+                          <CardContent className="p-3">
+                            <p className="text-xs text-muted-foreground">
+                              Severity
+                            </p>
+                            <p className="text-sm font-medium mt-0.5 text-destructive capitalize">
+                              {detailMessage.ai_severity}
+                            </p>
+                          </CardContent>
+                        </Card>
                       )}
                     {detailMessage.ai_confidence != null && (
-                      <div className="rounded-lg border p-2">
-                        <p className="text-xs text-muted-foreground">
-                          Confidence
-                        </p>
-                        <p className="text-sm font-medium">
-                          {(detailMessage.ai_confidence * 100).toFixed(0)}%
-                        </p>
-                      </div>
+                      <Card>
+                        <CardContent className="p-3">
+                          <p className="text-xs text-muted-foreground">
+                            Confidence
+                          </p>
+                          <p className="text-sm font-medium mt-0.5 tabular-nums">
+                            {(detailMessage.ai_confidence * 100).toFixed(0)}%
+                          </p>
+                        </CardContent>
+                      </Card>
                     )}
                     {detailMessage.ai_recommended_action &&
                       detailMessage.ai_recommended_action !== "none" && (
-                        <div className="rounded-lg border p-2">
-                          <p className="text-xs text-muted-foreground">
-                            Action
-                          </p>
-                          <p className="text-sm font-medium">
-                            {detailMessage.ai_recommended_action}
-                          </p>
-                        </div>
+                        <Card>
+                          <CardContent className="p-3">
+                            <p className="text-xs text-muted-foreground">
+                              Action
+                            </p>
+                            <p className="text-sm font-medium mt-0.5 capitalize">
+                              {detailMessage.ai_recommended_action}
+                            </p>
+                          </CardContent>
+                        </Card>
                       )}
                   </div>
 
                   {/* Attachments */}
                   {detailAttachments.length > 0 && (
                     <div className="space-y-2">
-                      <p className="text-xs text-muted-foreground">
+                      <p className="text-xs text-muted-foreground font-medium">
                         Attachments ({detailAttachments.length})
                       </p>
                       <div className="grid grid-cols-2 gap-2">
@@ -583,17 +608,17 @@ export function MessagesPanel({ guildId }: { guildId: string }) {
                             href={att.uploaded_url ?? att.discord_url}
                             target="_blank"
                             rel="noreferrer"
-                            className="flex items-center gap-2 rounded-lg border p-2 hover:bg-muted transition-colors"
+                            className="flex items-center gap-2 rounded-lg border border-border/50 p-2 hover:bg-muted transition-colors group"
                           >
                             <div className="flex-1 min-w-0">
                               <p className="text-xs font-medium truncate">
                                 {att.filename}
                               </p>
-                              <p className="text-xs text-muted-foreground">
+                              <p className="text-[11px] text-muted-foreground">
                                 {att.type} · {formatBytes(att.size)}
                               </p>
                             </div>
-                            <ExternalLink className="size-3 shrink-0 text-muted-foreground" />
+                            <ExternalLink className="size-3 shrink-0 text-muted-foreground/50 group-hover:text-muted-foreground transition-colors" />
                           </a>
                         ))}
                       </div>
@@ -604,10 +629,10 @@ export function MessagesPanel({ guildId }: { guildId: string }) {
                   {detailMessage.metadata &&
                     detailMessage.metadata !== "{}" && (
                       <div className="space-y-1">
-                        <p className="text-xs text-muted-foreground">
+                        <p className="text-xs text-muted-foreground font-medium">
                           Metadata (raw)
                         </p>
-                        <pre className="text-xs bg-muted rounded-lg p-3 overflow-x-auto max-h-32">
+                        <pre className="text-xs bg-muted/50 rounded-lg p-3 overflow-x-auto max-h-32 border border-border/50">
                           {JSON.stringify(
                             safeParseJsonObject(detailMessage.metadata),
                             null,
@@ -617,16 +642,16 @@ export function MessagesPanel({ guildId }: { guildId: string }) {
                       </div>
                     )}
                 </>
-              )}
+              ) : null}
             </div>
-          </div>
-        </div>
-      )}
+          </ScrollArea>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }
 
-// ── Message Card ──────────────────────────────────────────
+// ── Message Card ────────────────────────────────
 
 function MessageCard({
   message: msg,
@@ -638,158 +663,166 @@ function MessageCard({
   onReanalyze: (id: string) => void;
 }) {
   const aiStatusColor: Record<string, string> = {
-    clean: "bg-green-500/15 text-green-600 dark:text-green-400",
-    warn: "bg-yellow-500/15 text-yellow-600 dark:text-yellow-400",
-    flagged: "bg-red-500/15 text-red-600 dark:text-red-400",
-    error: "bg-gray-500/15 text-gray-600 dark:text-gray-400",
-    pending: "bg-blue-500/15 text-blue-600 dark:text-blue-400",
-    processing: "bg-blue-500/15 text-blue-600 dark:text-blue-400",
+    clean:
+      "bg-green-500/15 text-green-600 dark:text-green-400 border-green-500/20",
+    warn: "bg-yellow-500/15 text-yellow-600 dark:text-yellow-400 border-yellow-500/20",
+    flagged: "bg-red-500/15 text-red-600 dark:text-red-400 border-red-500/20",
+    error: "bg-gray-500/15 text-gray-600 dark:text-gray-400 border-gray-500/20",
+    pending:
+      "bg-blue-500/15 text-blue-600 dark:text-blue-400 border-blue-500/20",
+    processing:
+      "bg-blue-500/15 text-blue-600 dark:text-blue-400 border-blue-500/20",
   };
 
-  const severityColor: Record<string, string> = {
-    none: "",
-    low: "border-l-green-400",
+  const severityLeftBorder: Record<string, string> = {
+    low: "border-l-sky-400",
     medium: "border-l-yellow-400",
     high: "border-l-orange-400",
     critical: "border-l-red-500",
   };
 
-  const date = new Date(msg.created_at);
-  const timeStr = date.toLocaleString();
+  const hasSeverity =
+    msg.ai_severity &&
+    msg.ai_severity !== "none" &&
+    severityLeftBorder[msg.ai_severity];
 
   return (
-    // biome-ignore lint/a11y/useSemanticElements: complex nested content prevents using button
-    <div
-      role="button"
-      tabIndex={0}
+    <Card
+      className={cn(
+        "cursor-pointer transition-all duration-200 hover:bg-accent/5 hover:shadow-sm",
+        hasSeverity && "border-l-2",
+        hasSeverity && severityLeftBorder[msg.ai_severity as string],
+      )}
       onClick={() => onClick(msg.id)}
-      onKeyDown={(e) => e.key === "Enter" && onClick(msg.id)}
-      className={`rounded-lg border p-4 space-y-2 transition-colors cursor-pointer hover:bg-muted/50 ${
-        msg.ai_severity ? (severityColor[msg.ai_severity] ?? "") : ""
-      } ${msg.ai_severity && msg.ai_severity !== "none" ? "border-l-2" : ""}`}
     >
-      {/* Header */}
-      <div className="flex items-start gap-3">
-        {/* Avatar */}
-        <div className="size-8 shrink-0 rounded-full bg-muted flex items-center justify-center text-xs font-medium overflow-hidden">
-          {msg.avatar_url ? (
-            <Image
-              src={msg.avatar_url}
-              alt=""
-              width={32}
-              height={32}
-              className="size-full object-cover"
-            />
-          ) : (
-            msg.username.charAt(0).toUpperCase()
-          )}
-        </div>
+      <CardContent className="p-4">
+        <div className="flex items-start gap-3">
+          <Avatar className="size-8 shrink-0 mt-0.5">
+            <AvatarImage src={msg.avatar_url ?? undefined} />
+            <AvatarFallback className="text-xs">
+              {msg.username.charAt(0).toUpperCase()}
+            </AvatarFallback>
+          </Avatar>
 
-        <div className="flex-1 min-w-0">
-          {/* Username + time + badges */}
-          <div className="flex items-center gap-2 flex-wrap">
-            <span className="text-sm font-medium">{msg.username}</span>
-            <span className="text-xs text-muted-foreground">{timeStr}</span>
-            <span className="text-xs text-muted-foreground">
-              #{msg.channel_id.slice(0, 8)}
-            </span>
-
-            {/* AI Status badge */}
-            {msg.ai_status && aiStatusColor[msg.ai_status] && (
-              <span
-                className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${aiStatusColor[msg.ai_status]}`}
-              >
-                {msg.ai_status}
-              </span>
-            )}
-
-            {/* Severity badge */}
-            {msg.ai_severity && msg.ai_severity !== "none" && (
-              <span className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium bg-destructive/10 text-destructive">
-                {msg.ai_severity}
-              </span>
-            )}
-
-            {/* Message type badge */}
-            {msg.type === "deleted" && (
-              <span className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium bg-red-500/10 text-red-500">
-                deleted
-              </span>
-            )}
-            {msg.type === "edited" && (
-              <span className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium bg-blue-500/10 text-blue-500">
-                edited
-              </span>
-            )}
-          </div>
-
-          {/* Content */}
-          <p className="text-sm mt-1 whitespace-pre-wrap break-words">
-            {msg.type === "deleted" ? (
-              <span className="italic text-muted-foreground line-through">
-                {msg.content}
-              </span>
-            ) : (
-              msg.content
-            )}
-          </p>
-
-          {/* AI Details */}
-          {msg.ai_moderation_flags && msg.ai_moderation_flags !== "[]" && (
-            <div className="flex flex-wrap gap-1 mt-1">
-              {safeParseJsonArray(msg.ai_moderation_flags).map((flag) => (
-                <span
-                  key={flag}
-                  className="inline-flex items-center rounded-md bg-destructive/10 px-1.5 py-0.5 text-xs font-medium text-destructive"
-                >
-                  {flag}
-                </span>
-              ))}
-            </div>
-          )}
-
-          {msg.ai_analysis && (
-            <p className="text-xs text-muted-foreground mt-1 italic line-clamp-2">
-              {msg.ai_analysis}
-            </p>
-          )}
-
-          {/* Confidence score */}
-          {msg.ai_confidence !== undefined && msg.ai_confidence !== null && (
-            <div className="flex items-center gap-2 mt-1">
-              <div className="flex-1 h-1.5 rounded-full bg-muted overflow-hidden max-w-24">
-                <div
-                  className="h-full rounded-full bg-primary"
-                  style={{
-                    width: `${msg.ai_confidence * 100}%`,
-                  }}
-                />
-              </div>
+          <div className="flex-1 min-w-0 space-y-2">
+            {/* Username + time + badges */}
+            <div className="flex items-center gap-2 flex-wrap">
+              <span className="text-sm font-medium">{msg.username}</span>
               <span className="text-xs text-muted-foreground">
-                {(msg.ai_confidence * 100).toFixed(0)}%
+                {new Date(msg.created_at).toLocaleString()}
+              </span>
+              <span className="text-xs text-muted-foreground">
+                <Hash className="size-3 inline mr-0.5" />
+                {msg.channel_id.slice(0, 8)}
               </span>
-            </div>
-          )}
 
-          {/* Actions */}
-          <div className="flex gap-2 mt-2">
-            <button
-              type="button"
-              onClick={() => onReanalyze(msg.id)}
-              className="inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs font-medium hover:bg-muted transition-colors"
-              title="Re-analyze this message"
+              {/* AI Status badge */}
+              {msg.ai_status && aiStatusColor[msg.ai_status] && (
+                <Badge
+                  variant="outline"
+                  className={cn(
+                    "text-[10px] px-1.5 py-0 h-4 font-medium",
+                    aiStatusColor[msg.ai_status],
+                  )}
+                >
+                  {msg.ai_status}
+                </Badge>
+              )}
+
+              {/* Severity badge */}
+              {msg.ai_severity && msg.ai_severity !== "none" && (
+                <Badge
+                  variant="destructive"
+                  className="text-[10px] px-1.5 py-0 h-4"
+                >
+                  {msg.ai_severity}
+                </Badge>
+              )}
+
+              {/* Deleted/edited badges */}
+              {msg.type === "deleted" && (
+                <Badge
+                  variant="destructive"
+                  className="text-[10px] px-1.5 py-0 h-4"
+                >
+                  deleted
+                </Badge>
+              )}
+              {msg.type === "edited" && (
+                <Badge
+                  variant="outline"
+                  className="text-[10px] px-1.5 py-0 h-4"
+                >
+                  edited
+                </Badge>
+              )}
+            </div>
+
+            {/* Content */}
+            <p
+              className={cn(
+                "text-sm leading-relaxed",
+                msg.type === "deleted" &&
+                  "italic text-muted-foreground line-through",
+              )}
             >
-              <RefreshCw className="size-3" />
-              Reanalyze
-            </button>
+              {msg.content}
+            </p>
+
+            {/* AI flags */}
+            {msg.ai_moderation_flags && msg.ai_moderation_flags !== "[]" && (
+              <div className="flex flex-wrap gap-1">
+                {safeParseJsonArray(msg.ai_moderation_flags).map((flag) => (
+                  <Badge
+                    key={flag}
+                    variant="destructive"
+                    className="text-[10px] px-1.5 py-0 h-4"
+                  >
+                    {flag}
+                  </Badge>
+                ))}
+              </div>
+            )}
+
+            {/* AI analysis snippet */}
+            {msg.ai_analysis && (
+              <p className="text-xs text-muted-foreground italic line-clamp-2 leading-relaxed">
+                {msg.ai_analysis}
+              </p>
+            )}
+
+            {/* Confidence bar */}
+            {msg.ai_confidence !== undefined && msg.ai_confidence !== null && (
+              <div className="flex items-center gap-2 max-w-40">
+                <Progress value={msg.ai_confidence * 100} className="h-1.5" />
+                <span className="text-[11px] text-muted-foreground tabular-nums shrink-0">
+                  {(msg.ai_confidence * 100).toFixed(0)}%
+                </span>
+              </div>
+            )}
+
+            {/* Actions */}
+            <div className="flex gap-1.5 pt-0.5">
+              <Button
+                variant="ghost"
+                size="xs"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onReanalyze(msg.id);
+                }}
+              >
+                <RefreshCw className="size-3 mr-1" />
+                Reanalyze
+              </Button>
+            </div>
           </div>
         </div>
-      </div>
-    </div>
+      </CardContent>
+    </Card>
   );
 }
 
-// ── Helpers ───────────────────────────────────────────────
+// ── Helpers ─────────────────────────────────────
 
 function safeParseJsonObject(
   value: string | null | undefined,
@@ -820,3 +853,50 @@ function safeParseJsonArray(value: string | null | undefined): string[] {
     return [];
   }
 }
+
+// Inline icon components to avoid missing imports
+function ImageIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      role="img"
+      aria-label="Image"
+    >
+      <title>Image</title>
+      <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
+      <circle cx="9" cy="9" r="2" />
+      <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
+    </svg>
+  );
+}
+
+function MessageSquare({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      role="img"
+      aria-label="Message"
+    >
+      <title>Message</title>
+      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+    </svg>
+  );
+}
diff --git a/services/frontend/src/hooks/use-mobile.ts b/services/frontend/src/hooks/use-mobile.ts
index 2b0fe1d..a93d583 100644
--- a/services/frontend/src/hooks/use-mobile.ts
+++ b/services/frontend/src/hooks/use-mobile.ts
@@ -1,19 +1,21 @@
-import * as React from "react"
+import * as React from "react";
 
-const MOBILE_BREAKPOINT = 768
+const MOBILE_BREAKPOINT = 768;
 
 export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    undefined,
+  );
 
   React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
-    mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener("change", onChange)
-  }, [])
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
 
-  return !!isMobile
+  return !!isMobile;
 }
diff --git a/services/frontend/src/lib/utils.ts b/services/frontend/src/lib/utils.ts
index bd0c391..365058c 100644
--- a/services/frontend/src/lib/utils.ts
+++ b/services/frontend/src/lib/utils.ts
@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }