style(frontend): refactor UI components with rounded corners, light theme, and design polish

services/frontend/src/shared/ui/MobileTabBar.tsx

@@ -15,7 +15,7 @@ interface MobileTabBarProps {
 
 export function MobileTabBar({ activeTab, onTabChange }: MobileTabBarProps) {
   return (
-    <nav className="fixed bottom-0 left-0 right-0 z-50 flex border-t border-border bg-background/90 backdrop-blur-xl md:hidden">
+    <nav className="fixed bottom-0 left-0 right-0 z-50 flex border-t border-primary/20 bg-white rounded-t-xl md:hidden">
       {tabs.map(({ id, label, Icon }) => (
         <button
           key={id}

services/frontend/src/shared/ui/badge.tsx

@@ -11,11 +11,12 @@ type BadgeVariant =
 
 const variants: Record<BadgeVariant, string> = {
   default: "border-transparent bg-primary text-primary-foreground",
-  secondary: "border-transparent bg-secondary text-secondary-foreground",
+  secondary:
-  destructive: "border-transparent bg-destructive text-destructive-foreground",
+    "border-transparent bg-muted text-muted-foreground",
-  outline: "text-foreground",
+  destructive: "border-transparent bg-[#FCA5A5] text-red-800",
-  success: "border-transparent bg-emerald-500/15 text-emerald-300",
+  outline: "border-border text-foreground",
-  warning: "border-transparent bg-amber-500/15 text-amber-300",
+  success: "border-transparent bg-[#BBF7D0] text-green-800",
+  warning: "border-transparent bg-[#FDE68A] text-amber-800",
 };
 
 export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -30,7 +31,7 @@ export function Badge({
   return (
     <div
       className={cn(
-        "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors",
+        "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors",
         variants[variant],
         className,
       )}

services/frontend/src/shared/ui/button.tsx

@@ -11,19 +11,19 @@ type ButtonVariant =
 type ButtonSize = "default" | "sm" | "lg" | "icon";
 
 const variants: Record<ButtonVariant, string> = {
-  default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+  default:
-  secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+    "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-  destructive:
+  secondary: "bg-[#FFB7C5] text-[#1a1a2e] hover:bg-[#FFB7C5]/80",
-    "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+  destructive: "bg-[#FCA5A5] text-[#1a1a2e] hover:bg-[#FCA5A5]/80",
   outline:
-    "border border-border bg-background hover:bg-accent hover:text-accent-foreground",
+    "border border-border bg-white hover:bg-primary-soft",
-  ghost: "hover:bg-accent hover:text-accent-foreground",
+  ghost: "hover:bg-primary-soft",
 };
 
 const sizes: Record<ButtonSize, string> = {
   default: "h-10 px-4 py-2",
-  sm: "h-9 rounded-md px-3",
+  sm: "h-9 rounded-xl px-3",
-  lg: "h-11 rounded-md px-8",
+  lg: "h-11 rounded-xl px-8",
   icon: "h-10 w-10",
 };
 
@@ -45,7 +45,7 @@ export function Button({
   return (
     <Comp
       className={cn(
-        "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+        "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50",
         variants[variant],
         sizes[size],
         className,

services/frontend/src/shared/ui/card.tsx

@@ -8,7 +8,7 @@ export function Card({
   return (
     <div
       className={cn(
-        "rounded-2xl border border-border bg-card text-card-foreground shadow-sm",
+        "rounded-2xl border border-border bg-white text-card-foreground shadow-md hover:shadow-lg transition-shadow",
         className,
       )}
       {...props}

services/frontend/src/shared/ui/index.ts

@@ -16,3 +16,4 @@ export { Select } from "./select";
 export { Skeleton } from "./skeleton";
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
 export { ToastProvider, useToast } from "./toast";
+export { EmptyStateMascot } from "../../widgets/mascot/ChibiMascot";

services/frontend/src/shared/ui/input.tsx

@@ -9,7 +9,7 @@ export function Input({ className, type, ...props }: InputProps) {
     <input
       type={type}
       className={cn(
-        "flex h-10 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-10 w-full rounded-xl border border-border bg-white px-3 py-2 text-sm text-foreground ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}

services/frontend/src/shared/ui/scroll-area.tsx

@@ -41,7 +41,7 @@ function ScrollBar({
       )}
       {...props}
     >
-      <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+      <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-primary/30" />
     </ScrollAreaPrimitive.ScrollAreaScrollbar>
   );
 }

services/frontend/src/shared/ui/select.tsx

@@ -21,7 +21,7 @@ export function Select({
   return (
     <select
       className={cn(
-        "flex h-10 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-10 w-full rounded-xl border border-border bg-white px-3 py-2 text-sm text-foreground ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}

services/frontend/src/shared/ui/skeleton.tsx

@@ -7,7 +7,7 @@ export function Skeleton({
 }: HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn("animate-pulse rounded-md bg-muted/60", className)}
+      className={cn("rounded-md bg-muted animate-shimmer", className)}
       {...props}
     />
   );

services/frontend/src/shared/ui/tabs.tsx

@@ -26,7 +26,7 @@ export function TabsTrigger({
   return (
     <TabsPrimitive.Trigger
       className={cn(
-        "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+        "inline-flex items-center justify-center whitespace-nowrap rounded-lg px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary-soft data-[state=active]:text-foreground data-[state=active]:shadow-sm",
         className,
       )}
       {...props}

services/frontend/src/shared/ui/toast.tsx

@@ -6,6 +6,7 @@ import {
   useContext,
   useState,
 } from "react";
+import { cn } from "../lib/utils";
 
 interface Toast {
   id: string;
@@ -56,6 +57,20 @@ export function useToast() {
   return useContext(ToastContext);
 }
 
+const typeStyles: Record<Toast["type"], string> = {
+  info: "border-l-primary bg-white text-foreground",
+  success: "border-l-green-500 bg-white text-foreground",
+  error: "border-l-red-500 bg-white text-foreground",
+  warning: "border-l-amber-500 bg-white text-foreground",
+};
+
+const typeIcons: Record<Toast["type"], string> = {
+  info: "💠",
+  success: "🌸",
+  error: "😿",
+  warning: "⚠️",
+};
+
 function ToastContainer() {
   const { toasts, removeToast } = useContext(ToastContext);
 
@@ -66,18 +81,14 @@ function ToastContainer() {
       {toasts.map((toast) => (
         <div
           key={toast.id}
-          className={`rounded-lg border px-4 py-3 text-sm shadow-lg backdrop-blur-xl cursor-pointer transition-all hover:scale-[1.02] ${
+          className={cn(
-            toast.type === "error"
+            "flex items-center gap-2 rounded-xl border border-border px-4 py-3 text-sm shadow-md cursor-pointer transition-all hover:scale-[1.02] border-l-4",
-              ? "border-destructive/30 bg-destructive/20 text-destructive"
+            typeStyles[toast.type],
-              : toast.type === "success"
+          )}
-                ? "border-green-500/30 bg-green-500/10 text-green-300"
-                : toast.type === "warning"
-                  ? "border-yellow-500/30 bg-yellow-500/10 text-yellow-300"
-                  : "border-border/30 bg-card/80 text-foreground"
-          }`}
           onClick={() => removeToast(toast.id)}
         >
-          {toast.message}
+          <span className="text-base leading-none">{typeIcons[toast.type]}</span>
+          <span>{toast.message}</span>
         </div>
       ))}
     </div>

services/frontend/src/widgets/DashboardLayout.tsx

@@ -1,8 +1,11 @@
+import { motion } from "framer-motion";
 import type { ReactNode } from "react";
 import type { DashboardTab } from "../entities/ui/types";
 import type { VoiceStatus } from "../shared/api/client";
+import { fadeSlideUp } from "../shared/hooks/useFramerStagger";
 import type { WsStatus } from "../shared/ws/socket";
 import { Header } from "./Header";
+import { ParticleBackground } from "./particles/ParticleBackground";
 import { Sidebar } from "./Sidebar";
 
 interface DashboardLayoutProps {
@@ -21,8 +24,11 @@ export function DashboardLayout({
   children,
 }: DashboardLayoutProps) {
   return (
-    <div className="min-h-screen bg-background text-foreground">
+    <div className="relative min-h-screen bg-background text-foreground">
-      <div className="flex min-h-screen">
+      {/* Sakura particle layer */}
+      <ParticleBackground />
+
+      <div className="relative flex min-h-screen">
         <Sidebar activeTab={activeTab} onTabChange={onTabChange} />
         <main className="flex min-w-0 flex-1 flex-col">
           <Header
@@ -30,9 +36,16 @@ export function DashboardLayout({
             wsStatus={wsStatus}
             voiceStatus={voiceStatus}
           />
-          <div className="flex-1 overflow-auto p-4 md:p-6 lg:p-8">
+          <motion.main
+            key={activeTab}
+            variants={fadeSlideUp}
+            initial="initial"
+            animate="animate"
+            exit="exit"
+            className="flex-1 overflow-auto p-4 md:p-6 lg:p-8"
+          >
             {children}
-          </div>
+          </motion.main>
         </main>
       </div>
     </div>

services/frontend/src/widgets/Header.tsx

@@ -1,6 +1,9 @@
+import { motion } from "framer-motion";
 import { Wifi, WifiOff } from "lucide-react";
 import type { DashboardTab } from "../entities/ui/types";
 import type { VoiceStatus } from "../shared/api/client";
+import { fadeSlideUp } from "../shared/hooks/useFramerStagger";
+import { cn } from "../shared/lib/utils";
 import { Badge } from "../shared/ui";
 import type { WsStatus } from "../shared/ws/socket";
 
@@ -22,14 +25,59 @@ interface HeaderProps {
   voiceStatus: VoiceStatus;
 }
 
+/** Dot indicator colour for WS badge */
+function wsDotColor(status: WsStatus): string {
+  switch (status) {
+    case "connected":
+      return "bg-emerald-400";
+    case "error":
+      return "bg-red-400";
+    case "connecting":
+    case "disconnected":
+      return "bg-gray-400";
+  }
+}
+
+function WsIndicator({ status }: { status: WsStatus }) {
+  const dot = wsDotColor(status);
+  return (
+    <div className="flex items-center gap-1.5">
+      <span className={cn("inline-block h-2 w-2 rounded-full", dot)} />
+      <span className="text-xs font-medium capitalize">{status}</span>
+    </div>
+  );
+}
+
+/** Voice status indicator dot */
+function VoiceIndicator({ voiceStatus }: { voiceStatus: VoiceStatus }) {
+  const isConnected = voiceStatus.connected;
+  const dot = isConnected ? "bg-[#7EC8E3]" : "bg-gray-300";
+  const label = isConnected
+    ? voiceStatus.activeChannelName || "connected"
+    : "idle";
+  return (
+    <div className="flex items-center gap-1.5">
+      <span className={cn("inline-block h-2 w-2 rounded-full", dot)} />
+      <span className="text-xs font-medium">{label}</span>
+    </div>
+  );
+}
+
 export function Header({ activeTab, wsStatus, voiceStatus }: HeaderProps) {
   return (
-    <header className="sticky top-0 z-10 border-b border-border bg-background/80 px-4 py-4 backdrop-blur md:px-8">
+    <header className="sticky top-0 z-10 border-b border-[#7EC8E3]/20 bg-white/70 px-4 py-4 backdrop-blur-md md:px-8">
       <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-        <div className="flex items-center gap-3">
+        {/* Left: animated tab title + subtitle */}
+        <motion.div
+          key={activeTab}
+          variants={fadeSlideUp}
+          initial="initial"
+          animate="animate"
+          className="flex items-center gap-3"
+        >
           <div>
             <h1 className="text-xl font-bold tracking-tight">
-              <span className="text-primary">GMW</span>
+              <span className="text-[#7EC8E3]">GMW</span>
               <span className="mx-2 text-muted-foreground">·</span>
               {titles[activeTab]}
             </h1>
@@ -37,29 +85,34 @@ export function Header({ activeTab, wsStatus, voiceStatus }: HeaderProps) {
               {subtitles[activeTab]}
             </p>
           </div>
-        </div>
+        </motion.div>
-        <div className="flex flex-wrap gap-2">
+
+        {/* Right: status badges */}
+        <div className="flex flex-wrap items-center gap-2">
+          {/* WS Badge */}
           <Badge
-            variant={
+            variant="outline"
-              wsStatus === "connected"
+            className="border-[#7EC8E3]/20 bg-white/50 px-3 py-1.5 text-xs text-muted-foreground"
-                ? "success"
-                : wsStatus === "error"
-                  ? "destructive"
-                  : "warning"
-            }
           >
             {wsStatus === "connected" ? (
-              <Wifi className="mr-1 h-3 w-3" />
+              <Wifi className="mr-1.5 h-3 w-3 text-emerald-400" />
             ) : (
-              <WifiOff className="mr-1 h-3 w-3" />
+              <WifiOff className="mr-1.5 h-3 w-3 text-red-400" />
             )}
-            WebSocket {wsStatus}
+            <WsIndicator status={wsStatus} />
           </Badge>
-          <Badge variant={voiceStatus.connected ? "success" : "secondary"}>
+
-            Voice{" "}
+          {/* Voice Badge */}
-            {voiceStatus.connected
+          <Badge
-              ? voiceStatus.activeChannelName || "connected"
+            variant="outline"
-              : "idle"}
+            className={cn(
+              "border-[#7EC8E3]/20 bg-white/50 px-3 py-1.5 text-xs",
+              voiceStatus.connected
+                ? "text-[#7EC8E3]"
+                : "text-muted-foreground",
+            )}
+          >
+            <VoiceIndicator voiceStatus={voiceStatus} />
           </Badge>
         </div>
       </div>

services/frontend/src/widgets/Sidebar.tsx

@@ -1,7 +1,8 @@
+import { motion } from "framer-motion";
 import { BarChart3, MessageSquare, Radio } from "lucide-react";
 import type { DashboardTab } from "../entities/ui/types";
 import { cn } from "../shared/lib/utils";
-import { Button } from "../shared/ui";
+import { ChibiMascot } from "./mascot/ChibiMascot";
 
 const navItems: Array<{ id: DashboardTab; label: string; icon: typeof Radio }> =
   [
@@ -16,62 +17,69 @@ interface SidebarProps {
   collapsed?: boolean;
 }
 
-export function Sidebar({ activeTab, onTabChange, collapsed }: SidebarProps) {
+export function Sidebar({
+  activeTab,
+  onTabChange,
+  collapsed = true,
+}: SidebarProps) {
   return (
-    <aside
+    <motion.nav
       className={cn(
-        "hidden shrink-0 border-r border-border bg-card/60 p-5 backdrop-blur transition-all duration-300 md:block",
+        "hidden shrink-0 flex-col border-r border-[#7EC8E3]/20 bg-white/70 backdrop-blur-md transition-all duration-300 md:flex",
         collapsed ? "w-16" : "w-64",
       )}
+      layout
+      transition={{ type: "spring", stiffness: 300, damping: 30 }}
     >
+      {/* App icon only — no branding text */}
       <div
         className={cn(
-          "mb-8 flex items-center gap-3",
+          "flex items-center py-5",
-          collapsed && "justify-center",
+          collapsed ? "justify-center" : "px-4",
         )}
       >
-        {!collapsed && (
+        <img src="/logo.svg" alt="GMW" className="h-8 w-8 rounded-xl" />
-          <div>
-            <div className="flex items-baseline gap-2">
-              <img
-                src="/logo.svg"
-                alt="GMW"
-                className="h-10 w-10 rounded-2xl"
-              />
-              <span className="font-bold tracking-tight text-primary text-lg">
-                GMW
-              </span>
-            </div>
-            <div className="text-xs text-muted-foreground">
-              Discord Moderation Watcher
-            </div>
-          </div>
-        )}
-        {collapsed && (
-          <img src="/logo.svg" alt="GMW" className="h-9 w-9 rounded-xl" />
-        )}
       </div>
-      <nav className="space-y-2">
+
+      {/* Navigation items */}
+      <div className="flex flex-col gap-1 px-2">
         {navItems.map((item) => {
           const Icon = item.icon;
+          const isActive = activeTab === item.id;
           return (
-            <Button
+            <button
               key={item.id}
-              variant={activeTab === item.id ? "secondary" : "ghost"}
-              className={cn(
-                "w-full justify-start",
-                activeTab === item.id && "bg-primary/15 text-primary",
-                collapsed && "justify-center px-0",
-              )}
               onClick={() => onTabChange(item.id)}
               title={collapsed ? item.label : undefined}
+              className={cn(
+                "group relative flex items-center rounded-xl p-2.5 text-sm font-medium transition-all duration-200 ease-out",
+                collapsed ? "justify-center" : "gap-3",
+                isActive
+                  ? "bg-primary-soft text-primary ring-2 ring-primary/20"
+                  : "text-muted-foreground hover:bg-primary-soft/40 hover:text-primary/80",
+              )}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.transform =
+                  "translateX(2px) scale(1.1)";
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.transform = "translateX(0) scale(1)";
+              }}
             >
-              <Icon className="h-4 w-4" />
+              <Icon className="h-4 w-4 shrink-0" />
-              {!collapsed && item.label}
+              {!collapsed && <span>{item.label}</span>}
-            </Button>
+            </button>
           );
         })}
-      </nav>
+      </div>
-    </aside>
+
+      {/* Spacer pushes mascot to bottom */}
+      <div className="flex-1" />
+
+      {/* Chibi mascot */}
+      <div className="flex justify-center pb-4">
+        <ChibiMascot size="sm" variant="idle" />
+      </div>
+    </motion.nav>
   );
 }