diff --git a/webui/src/components/GlobalDialog.tsx b/webui/src/components/GlobalDialog.tsx
index 137fd01..14aa703 100644
--- a/webui/src/components/GlobalDialog.tsx
+++ b/webui/src/components/GlobalDialog.tsx
@@ -34,12 +34,12 @@ export const GlobalDialog: React.FC<{
       {open && (
         <motion.div className="fixed inset-0 z-[130] bg-black/60 backdrop-blur-sm flex items-center justify-center p-4"
           initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
-          <motion.div className="w-full max-w-md rounded-2xl border border-zinc-700 bg-zinc-900 shadow-2xl"
+          <motion.div className="brand-card w-full max-w-md rounded-[28px] border border-zinc-700 shadow-2xl"
             initial={{ scale: 0.95, y: 8 }} animate={{ scale: 1, y: 0 }} exit={{ scale: 0.95, y: 8 }}>
-            <div className="px-5 py-4 border-b border-zinc-800">
+            <div className="px-5 py-4 border-b border-zinc-800 relative z-[1]">
               <h3 className="text-sm font-semibold text-zinc-100">{options.title || (kind === 'confirm' ? t('dialogPleaseConfirm') : kind === 'prompt' ? t('dialogInputTitle') : t('dialogNotice'))}</h3>
             </div>
-            <div className="px-5 py-4 space-y-3">
+            <div className="px-5 py-4 space-y-3 relative z-[1]">
               <div className="text-sm text-zinc-300 whitespace-pre-wrap">{options.message}</div>
               {kind === 'prompt' && (
                 <div className="space-y-2">
@@ -54,16 +54,16 @@ export const GlobalDialog: React.FC<{
                       }
                     }}
                     placeholder={options.inputPlaceholder || t('dialogInputPlaceholder')}
-                    className="w-full px-3 py-2 rounded-lg bg-zinc-950 border border-zinc-800 text-sm text-zinc-100"
+                    className="w-full px-3 py-2 rounded-xl bg-zinc-950/75 border border-zinc-800 text-sm text-zinc-100 focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20"
                   />
                 </div>
               )}
             </div>
-            <div className="px-5 pb-5 flex items-center justify-end gap-2">
+            <div className="px-5 pb-5 flex items-center justify-end gap-2 relative z-[1]">
               {(kind === 'confirm' || kind === 'prompt') && (
-                <button onClick={onCancel} className="px-3 py-1.5 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-zinc-200 text-sm">{options.cancelText || t('cancel')}</button>
+                <button onClick={onCancel} className="px-3 py-1.5 rounded-xl bg-zinc-800 hover:bg-zinc-700 text-zinc-200 text-sm">{options.cancelText || t('cancel')}</button>
               )}
-              <button onClick={() => onConfirm(kind === 'prompt' ? value : undefined)} className={`px-3 py-1.5 rounded-lg text-sm ${options.danger ? 'bg-red-600 hover:bg-red-500 text-white' : 'bg-indigo-600 hover:bg-indigo-500 text-white'}`}>
+              <button onClick={() => onConfirm(kind === 'prompt' ? value : undefined)} className={`px-3 py-1.5 rounded-xl text-sm ${options.danger ? 'bg-red-600 hover:bg-red-500 text-white' : 'brand-button text-white'}`}>
                 {options.confirmText || t('dialogOk')}
               </button>
             </div>
diff --git a/webui/src/components/Header.tsx b/webui/src/components/Header.tsx
index 9c9fbde..3b9948e 100644
--- a/webui/src/components/Header.tsx
+++ b/webui/src/components/Header.tsx
@@ -1,11 +1,13 @@
 import React from 'react';
-import { Terminal, Globe, Menu } from 'lucide-react';
+import { Terminal, Globe, Menu, Moon, SunMedium } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useAppContext } from '../context/AppContext';
+import { useUI } from '../context/UIContext';
 
 const Header: React.FC = () => {
   const { t, i18n } = useTranslation();
   const { isGatewayOnline, setSidebarOpen, sidebarCollapsed } = useAppContext();
+  const { theme, toggleTheme } = useUI();
 
   const toggleLang = () => {
     const nextLang = i18n.language === 'en' ? 'zh' : 'en';
@@ -13,20 +15,20 @@ const Header: React.FC = () => {
   };
 
   return (
-    <header className="h-14 md:h-16 border-b border-zinc-800 bg-zinc-900/70 flex items-center justify-between px-3 md:px-6 shrink-0 z-10">
+    <header className="app-header h-14 md:h-16 border-b border-zinc-800 flex items-center justify-between px-3 md:px-6 shrink-0 z-10">
       <div className="flex items-center gap-2 md:gap-3 min-w-0">
         <button className="md:hidden p-2 rounded-lg hover:bg-zinc-800 text-zinc-300" onClick={() => setSidebarOpen(true)}>
           <Menu className="w-5 h-5" />
         </button>
         <div className="hidden md:flex items-center gap-3 rounded-xl px-2 py-1.5 min-w-0">
-          <div className="w-9 h-9 rounded-xl bg-indigo-500 flex items-center justify-center shadow-lg shadow-indigo-500/20 shrink-0">
+          <div className="brand-badge w-9 h-9 rounded-xl flex items-center justify-center shadow-lg shrink-0">
             <Terminal className="w-5 h-5 text-white" />
           </div>
           {!sidebarCollapsed && (
             <span className="font-semibold text-lg md:text-xl tracking-tight truncate">{t('appName')}</span>
           )}
         </div>
-        <div className="md:hidden w-8 h-8 rounded-xl bg-indigo-500 flex items-center justify-center shadow-lg shadow-indigo-500/20 shrink-0">
+        <div className="brand-badge md:hidden w-8 h-8 rounded-xl flex items-center justify-center shadow-lg shrink-0">
           <Terminal className="w-4 h-4 text-white" />
         </div>
         <span className="md:hidden font-semibold text-lg tracking-tight truncate">{t('appName')}</span>
@@ -49,6 +51,15 @@ const Header: React.FC = () => {
         </div>
         
         <div className="hidden md:block h-5 w-px bg-zinc-800" />
+
+        <button
+          onClick={toggleTheme}
+          className="flex items-center gap-2 text-sm font-medium text-zinc-400 hover:text-zinc-200 transition-colors bg-zinc-900 hover:bg-zinc-800 border border-zinc-800 px-3 py-1.5 rounded-lg"
+          title={theme === 'dark' ? t('themeLight') : t('themeDark')}
+        >
+          {theme === 'dark' ? <SunMedium className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+          <span className="hidden sm:inline">{theme === 'dark' ? t('themeLight') : t('themeDark')}</span>
+        </button>
         
         <button 
           onClick={toggleLang}
diff --git a/webui/src/components/Layout.tsx b/webui/src/components/Layout.tsx
index e107459..5a11bb4 100644
--- a/webui/src/components/Layout.tsx
+++ b/webui/src/components/Layout.tsx
@@ -10,14 +10,14 @@ const Layout: React.FC = () => {
   const { sidebarOpen, setSidebarOpen } = useAppContext();
 
   return (
-    <div className="flex flex-col h-screen bg-zinc-950 text-zinc-50 overflow-hidden font-sans">
+    <div className="app-shell flex flex-col h-screen bg-zinc-950 text-zinc-50 overflow-hidden font-sans">
       <Header />
       <div className="flex flex-1 min-h-0">
         <Sidebar />
         {sidebarOpen && (
           <button className="fixed inset-0 top-16 bg-black/40 z-30 md:hidden" onClick={() => setSidebarOpen(false)} aria-label="close sidebar" />
         )}
-        <main className="flex-1 flex flex-col min-w-0 relative bg-zinc-950/50">
+        <main className="flex-1 flex flex-col min-w-0 relative app-main-surface">
           <AnimatePresence mode="wait">
             <motion.div 
               key={location.pathname}
diff --git a/webui/src/components/NavItem.tsx b/webui/src/components/NavItem.tsx
index 6044b38..bac16e9 100644
--- a/webui/src/components/NavItem.tsx
+++ b/webui/src/components/NavItem.tsx
@@ -14,8 +14,8 @@ const NavItem: React.FC<NavItemProps> = ({ icon, label, to, collapsed = false })
     title={collapsed ? label : undefined}
     className={({ isActive }) => `w-full flex items-center ${collapsed ? 'justify-center' : 'gap-3'} px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 ${
       isActive
-        ? 'bg-indigo-500/15 text-indigo-300 border border-indigo-500/30'
-        : 'text-zinc-400 hover:bg-zinc-800/60 hover:text-zinc-200 border border-transparent'
+        ? 'nav-item-active text-indigo-700 border border-indigo-500/30'
+        : 'text-zinc-400 hover:bg-zinc-800/30 hover:text-zinc-200 border border-transparent'
     }`}
   >
     {icon}
diff --git a/webui/src/components/RecursiveConfig.tsx b/webui/src/components/RecursiveConfig.tsx
index 493eac7..198c8c2 100644
--- a/webui/src/components/RecursiveConfig.tsx
+++ b/webui/src/components/RecursiveConfig.tsx
@@ -57,7 +57,7 @@ const PrimitiveArrayEditor: React.FC<{
       <div className="flex flex-wrap gap-2">
         {value.length === 0 && <span className="text-xs text-zinc-500 italic">{t('empty')}</span>}
         {value.map((item, idx) => (
-          <span key={`${item}-${idx}`} className="inline-flex items-center gap-1 px-2 py-1 rounded bg-zinc-900 border border-zinc-700 text-xs font-mono text-zinc-200">
+          <span key={`${item}-${idx}`} className="inline-flex items-center gap-1 px-2 py-1 rounded-xl bg-zinc-900/70 border border-zinc-700 text-xs font-mono text-zinc-200">
             {String(item)}
             <button onClick={() => removeAt(idx)} className="text-zinc-400 hover:text-red-400">×</button>
           </span>
@@ -70,7 +70,7 @@ const PrimitiveArrayEditor: React.FC<{
           value={draft}
           onChange={(e) => setDraft(e.target.value)}
           placeholder={t('recursiveAddValuePlaceholder')}
-          className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-500"
+          className="w-full bg-zinc-950/70 border border-zinc-800 rounded-xl px-3 py-2 text-sm focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20"
         />
         <datalist id={`${path}-suggestions`}>
           {suggestions.map((s) => (
@@ -83,7 +83,7 @@ const PrimitiveArrayEditor: React.FC<{
             addValue(draft);
             setDraft('');
           }}
-          className="px-3 py-2 text-xs rounded-lg bg-zinc-800 hover:bg-zinc-700"
+          className="px-3 py-2 text-xs rounded-xl bg-zinc-800 hover:bg-zinc-700"
         >
           {t('add')}
         </button>
@@ -95,7 +95,7 @@ const PrimitiveArrayEditor: React.FC<{
             setSelected(v);
             if (v) addValue(v);
           }}
-          className="px-3 py-2 text-xs rounded-lg bg-zinc-950 border border-zinc-800"
+          className="px-3 py-2 text-xs rounded-xl bg-zinc-950/70 border border-zinc-800"
         >
           <option value="">{t('recursiveSelectOption')}</option>
           {suggestions.filter((s) => !value.includes(s)).map((s) => (
@@ -129,7 +129,7 @@ const RecursiveConfig: React.FC<RecursiveConfigProps> = ({ data, labels, path =
                 <span className="text-sm font-medium text-zinc-300 block capitalize">{label}</span>
                 <span className="text-[10px] text-zinc-600 font-mono">{currentPath}</span>
               </div>
-              <div className="p-3 bg-zinc-950 border border-zinc-800 rounded-lg">
+              <div className="p-3 bg-zinc-950/60 border border-zinc-800 rounded-2xl">
                 {allPrimitive ? (
                   <PrimitiveArrayEditor
                     value={value}
@@ -147,7 +147,7 @@ const RecursiveConfig: React.FC<RecursiveConfigProps> = ({ data, labels, path =
                         // ignore invalid json during typing
                       }
                     }}
-                    className="w-full min-h-28 bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:border-indigo-500"
+                    className="w-full min-h-28 bg-zinc-950/70 border border-zinc-800 rounded-xl px-3 py-2 text-sm font-mono focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20"
                   />
                 )}
               </div>
@@ -176,7 +176,7 @@ const RecursiveConfig: React.FC<RecursiveConfigProps> = ({ data, labels, path =
               <span className="text-[10px] text-zinc-600 font-mono">{currentPath}</span>
             </div>
             {typeof value === 'boolean' ? (
-              <label className="flex items-center gap-3 p-3 bg-zinc-950 border border-zinc-800 rounded-lg cursor-pointer hover:border-zinc-700 transition-colors group">
+              <label className="flex items-center gap-3 p-3 bg-zinc-950/60 border border-zinc-800 rounded-2xl cursor-pointer hover:border-zinc-700 transition-colors group">
                 <input
                   type="checkbox"
                   checked={value}
@@ -192,7 +192,7 @@ const RecursiveConfig: React.FC<RecursiveConfigProps> = ({ data, labels, path =
                 type={typeof value === 'number' ? 'number' : 'text'}
                 value={value === null || value === undefined ? '' : String(value)}
                 onChange={(e) => onChange(currentPath, typeof value === 'number' ? Number(e.target.value) : e.target.value)}
-                className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-colors font-mono text-zinc-300"
+                className="w-full bg-zinc-950/70 border border-zinc-800 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 transition-colors font-mono text-zinc-300"
               />
             )}
           </div>
diff --git a/webui/src/components/Sidebar.tsx b/webui/src/components/Sidebar.tsx
index ee323c1..b5aea96 100644
--- a/webui/src/components/Sidebar.tsx
+++ b/webui/src/components/Sidebar.tsx
@@ -44,10 +44,10 @@ const Sidebar: React.FC = () => {
   ];
 
   return (
-    <aside className={`fixed md:static inset-y-14 md:inset-y-16 left-0 z-40 ${sidebarCollapsed ? 'md:w-20' : 'md:w-64'} w-[86vw] max-w-72 border-r border-zinc-800 bg-zinc-900/95 md:bg-zinc-900/40 backdrop-blur-sm flex flex-col shrink-0 transform transition-all duration-200 ${sidebarOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'}`}>
+    <aside className={`sidebar-shell fixed md:static inset-y-14 md:inset-y-16 left-0 z-40 ${sidebarCollapsed ? 'md:w-20' : 'md:w-64'} w-[86vw] max-w-72 border-r border-zinc-800 backdrop-blur-xl flex flex-col shrink-0 transform transition-all duration-200 ${sidebarOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'}`}>
       <nav className={`flex-1 ${sidebarCollapsed ? 'px-2' : 'px-3'} py-4 space-y-3 overflow-y-auto`}>
         {sections.map((sec) => (
-          <div key={sec.title} className={`rounded-xl border border-zinc-800/60 bg-zinc-900/30 ${sidebarCollapsed ? 'p-2' : 'p-2'}`}>
+          <div key={sec.title} className={`sidebar-section rounded-2xl border border-zinc-800/60 ${sidebarCollapsed ? 'p-2' : 'p-2.5'}`}>
             {!sidebarCollapsed && <div className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest px-2 pb-2">{sec.title}</div>}
             <div className="space-y-1">
               {sec.items.map((it) => (
@@ -59,25 +59,25 @@ const Sidebar: React.FC = () => {
       </nav>
 
       {!sidebarCollapsed ? (
-        <div className="p-3 border-t border-zinc-800 bg-zinc-900/60">
+        <div className="p-3 border-t border-zinc-800 bg-zinc-900/20">
           <div className="text-[11px] font-medium text-zinc-500 mb-1 uppercase tracking-wider px-1">{t('gatewayToken')}</div>
           <input
             type="password"
             value={token}
             onChange={(e) => setToken(e.target.value)}
             placeholder={t('enterToken')}
-            className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-colors placeholder:text-zinc-600"
+            className="w-full bg-zinc-950/70 border border-zinc-800 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 transition-colors placeholder:text-zinc-600"
           />
         </div>
       ) : (
-        <div className="hidden md:flex justify-center p-3 border-t border-zinc-800 bg-zinc-900/60">
-          <div className="w-2 h-2 rounded-full bg-zinc-600" title={t('gatewayToken')} />
+        <div className="hidden md:flex justify-center p-3 border-t border-zinc-800 bg-zinc-900/20">
+          <div className="w-2.5 h-2.5 rounded-full bg-indigo-500 shadow-[0_0_14px_rgba(240,90,40,0.38)]" title={t('gatewayToken')} />
         </div>
       )}
-      <div className={`hidden md:flex border-t border-zinc-800 bg-zinc-900/60 ${sidebarCollapsed ? 'justify-center p-3' : 'p-3'}`}>
+      <div className={`hidden md:flex border-t border-zinc-800 bg-zinc-900/20 ${sidebarCollapsed ? 'justify-center p-3' : 'p-3'}`}>
         <button
           onClick={() => setSidebarCollapsed((prev) => !prev)}
-          className={`flex items-center ${sidebarCollapsed ? 'justify-center' : 'justify-between'} gap-3 rounded-xl border border-zinc-800 bg-zinc-950/70 hover:bg-zinc-900 text-zinc-300 transition-colors ${sidebarCollapsed ? 'w-11 h-11' : 'w-full px-3 py-2.5'}`}
+          className={`flex items-center ${sidebarCollapsed ? 'justify-center' : 'justify-between'} gap-3 rounded-2xl border border-zinc-800 brand-card-subtle hover:bg-zinc-900/40 text-zinc-300 transition-colors ${sidebarCollapsed ? 'w-11 h-11' : 'w-full px-3 py-2.5'}`}
           title={sidebarCollapsed ? t('expand') : t('collapse')}
         >
           {sidebarCollapsed ? <PanelLeftOpen className="w-4 h-4" /> : (
diff --git a/webui/src/components/SpaceParticles.tsx b/webui/src/components/SpaceParticles.tsx
index 76fcf84..c53fec9 100644
--- a/webui/src/components/SpaceParticles.tsx
+++ b/webui/src/components/SpaceParticles.tsx
@@ -10,6 +10,7 @@ export const SpaceParticles: React.FC = () => {
         if (!ctx) return;
 
         let animationFrameId: number;
+        let isDark = typeof document !== 'undefined' ? document.documentElement.classList.contains('theme-dark') : true;
         const particles: Array<{
             x: number;
             y: number;
@@ -30,6 +31,14 @@ export const SpaceParticles: React.FC = () => {
         window.addEventListener('resize', resize);
         resize();
 
+        let observer: MutationObserver | null = null;
+        if (typeof document !== 'undefined') {
+            observer = new MutationObserver(() => {
+                isDark = document.documentElement.classList.contains('theme-dark');
+            });
+            observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+        }
+
         // Initialize particles
         const particleCount = Math.floor((canvas.width * canvas.height) / 12000); // Responsive count
         for (let i = 0; i < particleCount; i++) {
@@ -51,8 +60,15 @@ export const SpaceParticles: React.FC = () => {
                 canvas.width / 2, canvas.height / 2, 0,
                 canvas.width / 2, canvas.height / 2, Math.max(canvas.width, canvas.height)
             );
-            gradient.addColorStop(0, 'rgba(30, 27, 75, 0.15)'); // Deep indigo tint
-            gradient.addColorStop(1, 'rgba(9, 9, 11, 0.9)'); // Zinc-950
+            if (isDark) {
+                gradient.addColorStop(0, 'rgba(255, 133, 82, 0.16)');
+                gradient.addColorStop(0.55, 'rgba(112, 41, 22, 0.20)');
+                gradient.addColorStop(1, 'rgba(28, 12, 8, 0.88)');
+            } else {
+                gradient.addColorStop(0, 'rgba(255, 243, 233, 0.30)');
+                gradient.addColorStop(0.55, 'rgba(255, 179, 107, 0.16)');
+                gradient.addColorStop(1, 'rgba(255, 226, 209, 0.55)');
+            }
             ctx.fillStyle = gradient;
             ctx.fillRect(0, 0, canvas.width, canvas.height);
 
@@ -67,7 +83,9 @@ export const SpaceParticles: React.FC = () => {
 
                 ctx.beginPath();
                 ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
-                ctx.fillStyle = `rgba(167, 139, 250, ${p.opacity})`; // Violet-400 tint
+                ctx.fillStyle = isDark
+                    ? `rgba(255, 179, 107, ${p.opacity})`
+                    : `rgba(217, 72, 28, ${Math.max(0.08, p.opacity * 0.65)})`;
                 ctx.fill();
             });
 
@@ -81,7 +99,10 @@ export const SpaceParticles: React.FC = () => {
 
                     if (dist < 120) {
                         ctx.beginPath();
-                        ctx.strokeStyle = `rgba(139, 92, 246, ${0.15 * (1 - dist / 120)})`; // Violet-500
+                        const lineOpacity = 0.16 * (1 - dist / 120);
+                        ctx.strokeStyle = isDark
+                            ? `rgba(240, 90, 40, ${lineOpacity})`
+                            : `rgba(164, 58, 24, ${lineOpacity * 0.85})`;
                         ctx.moveTo(particles[i].x, particles[i].y);
                         ctx.lineTo(particles[j].x, particles[j].y);
                         ctx.stroke();
@@ -96,6 +117,7 @@ export const SpaceParticles: React.FC = () => {
 
         return () => {
             window.removeEventListener('resize', resize);
+            observer?.disconnect();
             cancelAnimationFrame(animationFrameId);
         };
     }, []);
diff --git a/webui/src/components/StatCard.tsx b/webui/src/components/StatCard.tsx
index 4d4d223..9523fcd 100644
--- a/webui/src/components/StatCard.tsx
+++ b/webui/src/components/StatCard.tsx
@@ -7,12 +7,12 @@ interface StatCardProps {
 }
 
 const StatCard: React.FC<StatCardProps> = ({ title, value, icon }) => (
-  <div className="h-full min-h-[124px] bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 flex items-center gap-4">
-    <div className="w-12 h-12 rounded-xl bg-zinc-800/50 flex items-center justify-center border border-zinc-700/50">
+  <div className="brand-card h-full min-h-[124px] border border-zinc-800 rounded-[28px] p-6 flex items-center gap-4">
+    <div className="w-12 h-12 rounded-2xl bg-zinc-800/50 flex items-center justify-center border border-zinc-700/50 shadow-[inset_0_1px_0_rgba(255,255,255,0.18)] relative z-[1]">
       {icon}
     </div>
-    <div>
-      <div className="text-zinc-400 text-sm font-medium mb-1">{title}</div>
+    <div className="relative z-[1]">
+      <div className="text-zinc-500 text-[11px] uppercase tracking-[0.24em] font-semibold mb-1">{title}</div>
       <div className="text-2xl font-semibold text-zinc-100">{value}</div>
     </div>
   </div>
diff --git a/webui/src/context/UIContext.tsx b/webui/src/context/UIContext.tsx
index 77d5a5a..a530259 100644
--- a/webui/src/context/UIContext.tsx
+++ b/webui/src/context/UIContext.tsx
@@ -1,10 +1,15 @@
-import React, { createContext, useContext, useMemo, useState } from 'react';
+import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { AnimatePresence, motion } from 'motion/react';
 import { useTranslation } from 'react-i18next';
 import { GlobalDialog, DialogOptions } from '../components/GlobalDialog';
 
+type ThemeMode = 'light' | 'dark';
+
 type UIContextType = {
   loading: boolean;
+  theme: ThemeMode;
+  setTheme: (theme: ThemeMode) => void;
+  toggleTheme: () => void;
   showLoading: (text?: string) => void;
   hideLoading: () => void;
   withLoading: <T>(task: Promise<T> | (() => Promise<T>), text?: string) => Promise<T>;
@@ -16,17 +21,38 @@ type UIContextType = {
 };
 
 const UIContext = createContext<UIContextType | undefined>(undefined);
+const THEME_STORAGE_KEY = 'clawgo:webui:theme';
+
+function getInitialTheme(): ThemeMode {
+  if (typeof window === 'undefined') return 'dark';
+  const saved = window.localStorage.getItem(THEME_STORAGE_KEY);
+  if (saved === 'light' || saved === 'dark') return saved;
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
 
 export const UIProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const { t } = useTranslation();
   const [loadingCount, setLoadingCount] = useState(0);
   const [loadingText, setLoadingText] = useState(t('loading'));
+  const [theme, setTheme] = useState<ThemeMode>(getInitialTheme);
   const [dialog, setDialog] = useState<null | { kind: 'notice' | 'confirm' | 'prompt'; options: DialogOptions; resolve: (v: any) => void }>(null);
   const [customModal, setCustomModal] = useState<null | { title?: string; node: React.ReactNode }>(null);
   const loading = loadingCount > 0;
 
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    const root = document.documentElement;
+    root.classList.remove('theme-light', 'theme-dark');
+    root.classList.add(theme === 'dark' ? 'theme-dark' : 'theme-light');
+    root.style.colorScheme = theme;
+    window.localStorage.setItem(THEME_STORAGE_KEY, theme);
+  }, [theme]);
+
   const value = useMemo<UIContextType>(() => ({
     loading,
+    theme,
+    setTheme,
+    toggleTheme: () => setTheme((current) => current === 'dark' ? 'light' : 'dark'),
     showLoading: (text?: string) => {
       setLoadingText(text || t('loading'));
       setLoadingCount((count) => count + 1);
@@ -55,7 +81,7 @@ export const UIProvider: React.FC<{ children: React.ReactNode }> = ({ children }
     }),
     openModal: (node, title) => setCustomModal({ node, title }),
     closeModal: () => setCustomModal(null),
-  }), [loading, t]);
+  }), [loading, t, theme]);
 
   const closeDialog = (result?: boolean | string | null) => {
     if (!dialog) return;
diff --git a/webui/src/i18n/index.ts b/webui/src/i18n/index.ts
index 6e524ef..64b075d 100644
--- a/webui/src/i18n/index.ts
+++ b/webui/src/i18n/index.ts
@@ -330,6 +330,8 @@ const resources = {
       recipientId: 'recipient id',
       languageZh: '中文',
       languageEn: 'English',
+      themeLight: 'Day',
+      themeDark: 'Night',
       expand: 'Expand',
       collapse: 'Collapse',
       configRoot: '(root)',
@@ -822,6 +824,8 @@ const resources = {
       recipientId: '接收者 ID',
       languageZh: '中文',
       languageEn: 'English',
+      themeLight: '白天',
+      themeDark: '黑夜',
       expand: '展开',
       collapse: '收起',
       configRoot: '（根）',
diff --git a/webui/src/index.css b/webui/src/index.css
index e13fb04..beb2308 100644
--- a/webui/src/index.css
+++ b/webui/src/index.css
@@ -1,12 +1,66 @@
 @import "tailwindcss";
 
 @theme {
-  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-sans: "Manrope", "Noto Sans SC", ui-sans-serif, system-ui, sans-serif;
   --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
+  --color-zinc-50: #472018;
+  --color-zinc-100: #51261a;
+  --color-zinc-200: #653424;
+  --color-zinc-300: #7e4734;
+  --color-zinc-400: #99563f;
+  --color-zinc-500: #b16b51;
+  --color-zinc-600: #d08b6a;
+  --color-zinc-700: #eeb79d;
+  --color-zinc-800: #f7d5c2;
+  --color-zinc-900: #ffeadc;
+  --color-zinc-950: #fff3e9;
+  --color-indigo-300: #ffb36b;
+  --color-indigo-400: #ff8552;
+  --color-indigo-500: #f05a28;
+  --color-indigo-600: #d9481c;
+  --color-indigo-700: #a43a18;
+  --color-indigo-800: #7a2915;
+}
+
+html {
+  background: var(--color-zinc-950);
+}
+
+html.theme-dark {
+  --color-zinc-50: #fff4ee;
+  --color-zinc-100: #ffe6d8;
+  --color-zinc-200: #ffc9a7;
+  --color-zinc-300: #ffb36b;
+  --color-zinc-400: #ff9a66;
+  --color-zinc-500: #ff8552;
+  --color-zinc-600: #d56a42;
+  --color-zinc-700: #8b472f;
+  --color-zinc-800: #5d2a1d;
+  --color-zinc-900: #341711;
+  --color-zinc-950: #1c0c08;
+  --color-indigo-300: #ffd1ad;
+  --color-indigo-400: #ffb36b;
+  --color-indigo-500: #ff8552;
+  --color-indigo-600: #f05a28;
+  --color-indigo-700: #d9481c;
+  --color-indigo-800: #a43a18;
 }
 
 body {
   @apply bg-zinc-950 text-zinc-50 antialiased selection:bg-indigo-500/30;
+  background-image:
+    radial-gradient(circle at top left, rgb(255 179 107 / 0.18), transparent 26%),
+    radial-gradient(circle at 85% 18%, rgb(240 90 40 / 0.12), transparent 24%),
+    linear-gradient(180deg, rgb(255 243 233 / 0.96), rgb(255 234 220 / 0.88));
+  min-height: 100vh;
+  transition: background-color 180ms ease, color 180ms ease;
+}
+
+html.theme-dark body {
+  background-image:
+    radial-gradient(circle at top left, rgb(255 133 82 / 0.18), transparent 28%),
+    radial-gradient(circle at 82% 16%, rgb(255 179 107 / 0.08), transparent 24%),
+    linear-gradient(180deg, rgb(28 12 8 / 0.98), rgb(38 16 11 / 0.96));
 }
 
 ::-webkit-scrollbar {
@@ -22,3 +76,123 @@ body {
 ::-webkit-scrollbar-thumb:hover {
   @apply bg-zinc-700;
 }
+
+.app-shell {
+  background:
+    radial-gradient(circle at top, rgb(255 179 107 / 0.22), transparent 22%),
+    radial-gradient(circle at bottom right, rgb(217 72 28 / 0.12), transparent 24%);
+}
+
+.app-main-surface {
+  background:
+    linear-gradient(180deg, rgb(255 243 233 / 0.16), transparent 22%),
+    linear-gradient(180deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.04));
+}
+
+html.theme-dark .app-main-surface {
+  background:
+    linear-gradient(180deg, rgb(255 133 82 / 0.06), transparent 24%),
+    linear-gradient(180deg, rgb(0 0 0 / 0.06), rgb(0 0 0 / 0.12));
+}
+
+.app-header {
+  background:
+    linear-gradient(90deg, rgb(255 243 233 / 0.84), rgb(255 234 220 / 0.62)),
+    linear-gradient(180deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.06));
+  backdrop-filter: blur(18px);
+}
+
+html.theme-dark .app-header {
+  background:
+    linear-gradient(90deg, rgb(52 23 17 / 0.86), rgb(28 12 8 / 0.72)),
+    linear-gradient(180deg, rgb(255 133 82 / 0.05), rgb(0 0 0 / 0.08));
+}
+
+.brand-badge {
+  background: linear-gradient(135deg, #ffb36b 0%, #ff8552 48%, #d9481c 100%);
+  box-shadow: 0 18px 40px rgb(217 72 28 / 0.24);
+}
+
+.sidebar-shell {
+  background:
+    linear-gradient(180deg, rgb(255 250 245 / 0.88), rgb(255 234 220 / 0.78)),
+    linear-gradient(180deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0.04));
+  box-shadow: inset -1px 0 0 rgb(247 176 138 / 0.26);
+}
+
+html.theme-dark .sidebar-shell {
+  background:
+    linear-gradient(180deg, rgb(52 23 17 / 0.92), rgb(28 12 8 / 0.84)),
+    linear-gradient(180deg, rgb(255 133 82 / 0.04), rgb(0 0 0 / 0.08));
+  box-shadow: inset -1px 0 0 rgb(255 133 82 / 0.12);
+}
+
+.sidebar-section {
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 0.34), rgb(255 243 233 / 0.2));
+}
+
+html.theme-dark .sidebar-section {
+  background:
+    linear-gradient(180deg, rgb(93 42 29 / 0.42), rgb(52 23 17 / 0.2));
+}
+
+.nav-item-active {
+  background:
+    linear-gradient(135deg, rgb(255 179 107 / 0.28), rgb(240 90 40 / 0.18));
+  box-shadow: 0 10px 24px rgb(240 90 40 / 0.14);
+}
+
+html.theme-dark .nav-item-active {
+  background:
+    linear-gradient(135deg, rgb(255 179 107 / 0.18), rgb(240 90 40 / 0.22));
+  box-shadow: 0 12px 30px rgb(0 0 0 / 0.24);
+}
+
+.brand-card {
+  position: relative;
+  overflow: hidden;
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 0.34), rgb(255 243 233 / 0.14));
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.26),
+    0 20px 48px rgb(169 82 48 / 0.08);
+}
+
+.brand-card::before {
+  content: "";
+  position: absolute;
+  inset: -30% auto auto -15%;
+  width: 160px;
+  height: 160px;
+  border-radius: 9999px;
+  background: radial-gradient(circle, rgb(255 179 107 / 0.22), transparent 72%);
+  pointer-events: none;
+}
+
+html.theme-dark .brand-card {
+  background:
+    linear-gradient(180deg, rgb(93 42 29 / 0.36), rgb(28 12 8 / 0.3));
+  box-shadow:
+    inset 0 1px 0 rgb(255 179 107 / 0.06),
+    0 22px 54px rgb(0 0 0 / 0.2);
+}
+
+.brand-card-subtle {
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 0.22), rgb(255 243 233 / 0.12));
+}
+
+html.theme-dark .brand-card-subtle {
+  background:
+    linear-gradient(180deg, rgb(93 42 29 / 0.22), rgb(28 12 8 / 0.14));
+}
+
+.brand-button {
+  background: linear-gradient(135deg, #ffb36b 0%, #ff8552 40%, #d9481c 100%);
+  box-shadow: 0 14px 32px rgb(217 72 28 / 0.2);
+}
+
+html.theme-dark .brand-button {
+  box-shadow: 0 16px 36px rgb(0 0 0 / 0.26);
+}
diff --git a/webui/src/pages/Chat.tsx b/webui/src/pages/Chat.tsx
index ef82d12..b9b54b8 100644
--- a/webui/src/pages/Chat.tsx
+++ b/webui/src/pages/Chat.tsx
@@ -517,35 +517,35 @@ const Chat: React.FC = () => {
 
   return (
     <div className="flex h-full min-w-0">
-      <div className="flex-1 flex flex-col bg-zinc-950/50">
-        <div className="px-4 py-3 border-b border-zinc-800 flex items-center justify-between gap-3 flex-wrap">
+      <div className="flex-1 flex flex-col brand-card rounded-[30px] border border-zinc-800/80 overflow-hidden">
+        <div className="px-4 py-3 border-b border-zinc-800 flex items-center justify-between gap-3 flex-wrap bg-zinc-900/15">
           <div className="flex items-center gap-2 flex-wrap min-w-0">
             <button
               onClick={() => setChatTab('main')}
-              className={`px-3 py-1.5 rounded-lg text-xs ${chatTab === 'main' ? 'bg-indigo-600 text-white' : 'bg-zinc-900 border border-zinc-700 text-zinc-300'}`}
+              className={`px-3 py-1.5 rounded-xl text-xs ${chatTab === 'main' ? 'brand-button text-white' : 'bg-zinc-900/70 border border-zinc-700 text-zinc-300'}`}
             >
               {t('mainChat')}
             </button>
             <button
               onClick={() => setChatTab('subagents')}
-              className={`px-3 py-1.5 rounded-lg text-xs ${chatTab === 'subagents' ? 'bg-amber-600 text-white' : 'bg-zinc-900 border border-zinc-700 text-zinc-300'}`}
+              className={`px-3 py-1.5 rounded-xl text-xs ${chatTab === 'subagents' ? 'bg-amber-600 text-white' : 'bg-zinc-900/70 border border-zinc-700 text-zinc-300'}`}
             >
               {t('subagentGroup')}
             </button>
             {chatTab === 'main' && (
-              <select value={sessionKey} onChange={(e) => setSessionKey(e.target.value)} className="max-w-full bg-zinc-900 border border-zinc-700 rounded px-2 py-1 text-xs text-zinc-200">
+              <select value={sessionKey} onChange={(e) => setSessionKey(e.target.value)} className="max-w-full bg-zinc-900/70 border border-zinc-700 rounded-xl px-2.5 py-1.5 text-xs text-zinc-200">
                 {userSessions.map((s: any) => <option key={s.key} value={s.key}>{s.title || s.key}</option>)}
               </select>
             )}
           </div>
-          <button onClick={chatTab === 'main' ? loadHistory : loadSubagentGroup} className="flex items-center gap-1 px-2 py-1 text-xs rounded bg-zinc-800 hover:bg-zinc-700"><RefreshCw className="w-3 h-3" />{t('reloadHistory')}</button>
+          <button onClick={chatTab === 'main' ? loadHistory : loadSubagentGroup} className="flex items-center gap-1 px-2.5 py-1.5 text-xs rounded-xl bg-zinc-800 hover:bg-zinc-700"><RefreshCw className="w-3 h-3" />{t('reloadHistory')}</button>
         </div>
 
         {chatTab === 'subagents' && (
-          <div className="px-4 py-3 border-b border-zinc-800 bg-zinc-950/40 flex flex-wrap gap-2">
+          <div className="px-4 py-3 border-b border-zinc-800 bg-zinc-950/20 flex flex-wrap gap-2">
             <button
               onClick={() => setSelectedStreamAgents([])}
-              className={`px-2.5 py-1 rounded-full text-xs border ${selectedStreamAgents.length === 0 ? 'bg-amber-600 text-white border-amber-500' : 'bg-zinc-900 border-zinc-700 text-zinc-300'}`}
+              className={`px-2.5 py-1 rounded-full text-xs border ${selectedStreamAgents.length === 0 ? 'bg-amber-600 text-white border-amber-500' : 'bg-zinc-900/70 border-zinc-700 text-zinc-300'}`}
             >
               {t('allAgents')}
             </button>
@@ -553,7 +553,7 @@ const Chat: React.FC = () => {
               <button
                 key={agent}
                 onClick={() => toggleStreamAgent(agent)}
-                className={`px-2.5 py-1 rounded-full text-xs border ${selectedStreamAgents.includes(agent) ? 'bg-zinc-100 text-zinc-950 border-zinc-100' : 'bg-zinc-900 border-zinc-700 text-zinc-300'}`}
+                className={`px-2.5 py-1 rounded-full text-xs border ${selectedStreamAgents.includes(agent) ? 'bg-zinc-100 text-zinc-950 border-zinc-100' : 'bg-zinc-900/70 border-zinc-700 text-zinc-300'}`}
               >
                 {formatAgentName(agent)}
               </button>
@@ -563,7 +563,7 @@ const Chat: React.FC = () => {
 
         <div className="flex-1 min-h-0 flex flex-col xl:flex-row">
           {chatTab === 'subagents' && (
-            <div className="w-full xl:w-[320px] xl:shrink-0 border-b xl:border-b-0 xl:border-r border-zinc-800 bg-zinc-950/70 p-4 flex flex-col gap-4 max-h-[46vh] xl:max-h-none overflow-y-auto">
+            <div className="w-full xl:w-[320px] xl:shrink-0 border-b xl:border-b-0 xl:border-r border-zinc-800 bg-zinc-950/28 p-4 flex flex-col gap-4 max-h-[46vh] xl:max-h-none overflow-y-auto">
               <div>
                 <div className="text-xs uppercase tracking-wider text-zinc-500 mb-1">{t('subagentDispatch')}</div>
                 <div className="text-sm text-zinc-300">{t('subagentDispatchHint')}</div>
@@ -572,7 +572,7 @@ const Chat: React.FC = () => {
                 <select
                   value={dispatchAgentID}
                   onChange={(e) => setDispatchAgentID(e.target.value)}
-                  className="w-full bg-zinc-900 border border-zinc-800 rounded-xl px-3 py-2 text-sm text-zinc-200"
+                  className="w-full bg-zinc-900/70 border border-zinc-800 rounded-2xl px-3 py-2.5 text-sm text-zinc-200"
                 >
                   {registryAgents.map((agent) => (
                     <option key={agent.agent_id} value={agent.agent_id}>
@@ -584,18 +584,18 @@ const Chat: React.FC = () => {
                   value={dispatchTask}
                   onChange={(e) => setDispatchTask(e.target.value)}
                   placeholder={t('subagentTaskPlaceholder')}
-                  className="w-full min-h-[180px] resize-none bg-zinc-900 border border-zinc-800 rounded-xl px-3 py-3 text-sm text-zinc-200 placeholder:text-zinc-500 focus:outline-none focus:border-amber-500"
+                  className="w-full min-h-[180px] resize-none bg-zinc-900/70 border border-zinc-800 rounded-2xl px-3 py-3 text-sm text-zinc-200 placeholder:text-zinc-500 focus:outline-none focus:border-amber-500 focus:ring-2 focus:ring-amber-500/20"
                 />
                 <input
                   value={dispatchLabel}
                   onChange={(e) => setDispatchLabel(e.target.value)}
                   placeholder={t('subagentLabelPlaceholder')}
-                  className="w-full bg-zinc-900 border border-zinc-800 rounded-xl px-3 py-2 text-sm text-zinc-200 placeholder:text-zinc-500 focus:outline-none focus:border-amber-500"
+                  className="w-full bg-zinc-900/70 border border-zinc-800 rounded-2xl px-3 py-2.5 text-sm text-zinc-200 placeholder:text-zinc-500 focus:outline-none focus:border-amber-500 focus:ring-2 focus:ring-amber-500/20"
                 />
                 <button
                   onClick={dispatchSubagentTask}
                   disabled={!dispatchAgentID.trim() || !dispatchTask.trim()}
-                  className="w-full px-3 py-2 rounded-xl bg-amber-600 hover:bg-amber-500 disabled:opacity-50 text-white text-sm font-medium"
+                  className="w-full px-3 py-2.5 rounded-2xl bg-amber-600 hover:bg-amber-500 disabled:opacity-50 text-white text-sm font-medium shadow-[0_12px_30px_rgba(217,119,6,0.22)]"
                 >
                   {t('dispatchToSubagent')}
                 </button>
@@ -619,7 +619,7 @@ const Chat: React.FC = () => {
                       <button
                         key={agent.agent_id}
                         onClick={() => setDispatchAgentID(String(agent.agent_id || ''))}
-                        className={`w-full text-left rounded-xl border px-3 py-2 ${active ? 'border-amber-500 bg-amber-500/10' : 'border-zinc-800 bg-zinc-900/70 hover:bg-zinc-900'}`}
+                        className={`w-full text-left rounded-2xl border px-3 py-2.5 ${active ? 'border-amber-500 bg-amber-500/10' : 'border-zinc-800 bg-zinc-900/50 hover:bg-zinc-900/70'}`}
                       >
                         <div className="flex items-center justify-between gap-2">
                           <div className="text-sm font-medium text-zinc-100">{formatAgentName(agent.display_name || agent.agent_id)}</div>
@@ -642,7 +642,7 @@ const Chat: React.FC = () => {
           >
             {displayedChat.length === 0 ? (
               <div className="h-full flex flex-col items-center justify-center text-zinc-500 space-y-4">
-                <div className="w-16 h-16 rounded-2xl bg-zinc-900 flex items-center justify-center border border-zinc-800">
+                <div className="w-16 h-16 rounded-[24px] brand-card-subtle flex items-center justify-center border border-zinc-800">
                   <MessageSquare className="w-8 h-8 text-zinc-600" />
                 </div>
                 <p className="text-sm font-medium">{chatTab === 'main' ? t('startConversation') : t('noSubagentStream')}</p>
@@ -671,7 +671,7 @@ const Chat: React.FC = () => {
                   >
                     <div className={`flex items-start gap-2 max-w-full sm:max-w-[96%] ${isUser ? 'flex-row-reverse' : 'flex-row'}`}>
                       <div className={`w-9 h-9 mt-1 rounded-full text-[11px] font-bold flex items-center justify-center shrink-0 ${m.avatarClassName || (isUser ? 'bg-indigo-600/90 text-white' : 'bg-emerald-600/80 text-white')}`}>{m.avatarText || (isUser ? 'U' : 'A')}</div>
-                      <div className={`max-w-[calc(100vw-6rem)] sm:max-w-[92%] rounded-2xl px-4 py-3 shadow-sm ${bubbleClass}`}>
+                      <div className={`max-w-[calc(100vw-6rem)] sm:max-w-[92%] rounded-[24px] px-4 py-3 shadow-sm ${bubbleClass}`}>
                         <div className="flex items-center justify-between gap-3 mb-1">
                           <div className="text-[11px] opacity-85">{m.actorName || m.label || (isUser ? t('user') : isExec ? t('exec') : isSystem ? t('system') : t('agent'))}</div>
                           {m.metaLine && <div className="text-[11px] text-zinc-400">{m.metaLine}</div>}
@@ -690,7 +690,7 @@ const Chat: React.FC = () => {
           </div>
         </div>
 
-        <div className="p-3 sm:p-4 bg-zinc-950 border-t border-zinc-800">
+        <div className="p-3 sm:p-4 bg-zinc-950/20 border-t border-zinc-800">
           <div className="w-full relative flex items-center">
             <input
               type="file"
@@ -700,7 +700,7 @@ const Chat: React.FC = () => {
             />
             <label
               htmlFor="file"
-              className={`absolute left-3 p-2 rounded-full cursor-pointer transition-colors ${fileSelected ? 'text-indigo-400 bg-indigo-500/10' : 'text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200'}`}
+              className={`absolute left-3 p-2 rounded-full cursor-pointer transition-colors ${fileSelected ? 'text-indigo-400 bg-indigo-500/10' : 'text-zinc-400 hover:bg-zinc-800/70 hover:text-zinc-200'}`}
             >
               <Paperclip className="w-5 h-5" />
             </label>
@@ -710,12 +710,12 @@ const Chat: React.FC = () => {
               onKeyDown={(e) => chatTab === 'main' && e.key === 'Enter' && send()}
               placeholder={chatTab === 'main' ? t('typeMessage') : t('subagentGroupReadonly')}
               disabled={chatTab !== 'main'}
-              className="w-full bg-zinc-900 border border-zinc-800 rounded-full pl-14 pr-14 py-3.5 text-[15px] focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-all placeholder:text-zinc-500 shadow-sm disabled:opacity-60"
+              className="w-full bg-zinc-900/75 border border-zinc-800 rounded-full pl-14 pr-14 py-3.5 text-[15px] focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 transition-all placeholder:text-zinc-500 shadow-sm disabled:opacity-60"
             />
             <button
               onClick={send}
               disabled={chatTab !== 'main' || (!msg.trim() && !fileSelected)}
-              className="absolute right-2 p-2.5 bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 disabled:hover:bg-indigo-600 text-white rounded-full transition-colors shadow-sm"
+              className="absolute right-2 p-2.5 brand-button disabled:opacity-50 text-white rounded-full transition-colors"
             >
               <Send className="w-4 h-4 ml-0.5" />
             </button>
diff --git a/webui/src/pages/Config.tsx b/webui/src/pages/Config.tsx
index 20ef292..6548bc3 100644
--- a/webui/src/pages/Config.tsx
+++ b/webui/src/pages/Config.tsx
@@ -208,43 +208,43 @@ const Config: React.FC = () => {
     <div className="p-4 md:p-8 w-full space-y-6 flex flex-col min-h-full">
       <div className="flex items-center justify-between gap-3 flex-wrap">
         <h1 className="text-2xl font-semibold tracking-tight">{t('configuration')}</h1>
-        <div className="flex items-center gap-1 bg-zinc-900/80 p-1 rounded-lg border border-zinc-800">
-          <button onClick={() => setShowRaw(false)} className={`px-4 py-1.5 text-sm font-medium rounded-md transition-all ${!showRaw ? 'bg-zinc-800 text-white shadow-sm' : 'text-zinc-400 hover:text-zinc-200'}`}>{t('form')}</button>
-          <button onClick={() => setShowRaw(true)} className={`px-4 py-1.5 text-sm font-medium rounded-md transition-all ${showRaw ? 'bg-zinc-800 text-white shadow-sm' : 'text-zinc-400 hover:text-zinc-200'}`}>{t('rawJson')}</button>
+        <div className="flex items-center gap-1 bg-zinc-900/60 p-1 rounded-xl border border-zinc-800">
+          <button onClick={() => setShowRaw(false)} className={`px-4 py-1.5 text-sm font-medium rounded-lg transition-all ${!showRaw ? 'brand-button text-white shadow-sm' : 'text-zinc-400 hover:text-zinc-200'}`}>{t('form')}</button>
+          <button onClick={() => setShowRaw(true)} className={`px-4 py-1.5 text-sm font-medium rounded-lg transition-all ${showRaw ? 'brand-button text-white shadow-sm' : 'text-zinc-400 hover:text-zinc-200'}`}>{t('rawJson')}</button>
         </div>
       </div>
 
       <div className="flex items-center justify-between gap-3 flex-wrap">
         <div className="flex items-center gap-3 flex-wrap">
-          <button onClick={async () => { await loadConfig(true); setTimeout(() => setBaseline(JSON.parse(JSON.stringify(cfg))), 0); }} className="flex items-center gap-2 px-4 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-lg text-sm font-medium transition-colors">
+          <button onClick={async () => { await loadConfig(true); setTimeout(() => setBaseline(JSON.parse(JSON.stringify(cfg))), 0); }} className="flex items-center gap-2 px-4 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-xl text-sm font-medium transition-colors">
             <RefreshCw className="w-4 h-4" /> {t('reload')}
           </button>
-          <button onClick={() => setShowDiff(true)} className="px-3 py-2 bg-zinc-900 border border-zinc-800 rounded-lg text-sm">{t('configDiffPreview')}</button>
-          <button onClick={() => setBasicMode(v => !v)} className="px-3 py-2 bg-zinc-900 border border-zinc-800 rounded-lg text-sm">
+          <button onClick={() => setShowDiff(true)} className="px-3 py-2 bg-zinc-900/70 border border-zinc-800 rounded-xl text-sm">{t('configDiffPreview')}</button>
+          <button onClick={() => setBasicMode(v => !v)} className="px-3 py-2 bg-zinc-900/70 border border-zinc-800 rounded-xl text-sm">
             {basicMode ? t('configBasicMode') : t('configAdvancedMode')}
           </button>
           <label className="flex items-center gap-2 text-sm text-zinc-300">
             <input type="checkbox" checked={hotOnly} onChange={(e) => setHotOnly(e.target.checked)} />
             {t('configHotOnly')}
           </label>
-          <input value={search} onChange={(e) => setSearch(e.target.value)} placeholder={t('configSearchPlaceholder')} className="px-3 py-2 bg-zinc-950 border border-zinc-800 rounded-lg text-sm" />
+          <input value={search} onChange={(e) => setSearch(e.target.value)} placeholder={t('configSearchPlaceholder')} className="px-3 py-2 bg-zinc-950/70 border border-zinc-800 rounded-xl text-sm" />
         </div>
-        <button onClick={saveConfig} className="flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg text-sm font-medium transition-colors shadow-sm">
+        <button onClick={saveConfig} className="brand-button flex items-center gap-2 px-4 py-2 text-white rounded-xl text-sm font-medium transition-colors shadow-sm">
           <Save className="w-4 h-4" /> {t('saveChanges')}
         </button>
       </div>
 
-      <div className="flex-1 bg-zinc-900/40 border border-zinc-800/80 rounded-2xl overflow-hidden flex flex-col shadow-sm min-h-[420px]">
+      <div className="flex-1 brand-card border border-zinc-800/80 rounded-[30px] overflow-hidden flex flex-col shadow-sm min-h-[420px]">
         {!showRaw ? (
           <div className="flex-1 flex min-h-0">
-            <aside className="w-44 md:w-56 border-r border-zinc-800 bg-zinc-950/40 p-2 md:p-3 overflow-y-auto shrink-0">
+            <aside className="w-44 md:w-56 border-r border-zinc-800 bg-zinc-950/20 p-2 md:p-3 overflow-y-auto shrink-0">
               <div className="text-xs text-zinc-500 uppercase tracking-widest mb-2 px-2">{t('configTopLevel')}</div>
               <div className="space-y-1">
                 {filteredTopKeys.map((k) => (
                   <button
                     key={k}
                     onClick={() => setSelectedTop(k)}
-                    className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors ${activeTop === k ? 'bg-indigo-500/20 text-indigo-300 border border-indigo-500/30' : 'text-zinc-300 hover:bg-zinc-800/60'}`}
+                    className={`w-full text-left px-3 py-2 rounded-xl text-sm transition-colors ${activeTop === k ? 'nav-item-active text-indigo-700 border border-indigo-500/30' : 'text-zinc-300 hover:bg-zinc-800/30'}`}
                   >
                     {k === hotReloadTabKey ? t('configHotFieldsFull') : (configLabels[k] || k)}
                   </button>
@@ -258,7 +258,7 @@ const Config: React.FC = () => {
                   <div className="text-sm font-semibold text-zinc-300">{t('configHotFieldsFull')}</div>
                   <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-xs">
                     {hotReloadFieldDetails.map((it) => (
-                      <div key={it.path} className="p-2 rounded bg-zinc-950 border border-zinc-800">
+                      <div key={it.path} className="p-2 rounded-xl bg-zinc-950/70 border border-zinc-800">
                         <div className="font-mono text-zinc-200">{it.path}</div>
                         <div className="text-zinc-400">{it.name || ''}{it.description ? ` · ${it.description}` : ''}</div>
                       </div>
@@ -267,21 +267,21 @@ const Config: React.FC = () => {
                 </div>
               )}
               {activeTop === 'providers' && !showRaw && (
-                <div className="rounded-xl border border-zinc-800 bg-zinc-950/40 p-3 space-y-3">
+                <div className="brand-card-subtle rounded-2xl border border-zinc-800 p-3 space-y-3">
                   <div className="flex items-center justify-between gap-2 flex-wrap">
                     <div className="text-sm font-semibold text-zinc-200">{t('configProxies')}</div>
                     <div className="flex items-center gap-2">
-                      <input value={newProxyName} onChange={(e)=>setNewProxyName(e.target.value)} placeholder={t('configNewProviderName')} className="px-2 py-1 rounded bg-zinc-900 border border-zinc-700 text-xs" />
-                      <button onClick={addProxy} className="px-2 py-1 rounded bg-indigo-600 hover:bg-indigo-500 text-xs">{t('add')}</button>
+                      <input value={newProxyName} onChange={(e)=>setNewProxyName(e.target.value)} placeholder={t('configNewProviderName')} className="px-2 py-1 rounded-lg bg-zinc-900/70 border border-zinc-700 text-xs" />
+                      <button onClick={addProxy} className="brand-button px-2 py-1 rounded-lg text-xs text-white">{t('add')}</button>
                     </div>
                   </div>
                   <div className="space-y-2">
                     {Object.entries(((cfg as any)?.providers?.proxies || {}) as Record<string, any>).map(([name, p]) => (
-                      <div key={name} className="grid grid-cols-1 md:grid-cols-7 gap-2 rounded-lg border border-zinc-800 bg-zinc-900/40 p-2 text-xs">
+                      <div key={name} className="grid grid-cols-1 md:grid-cols-7 gap-2 rounded-xl border border-zinc-800 bg-zinc-900/30 p-2 text-xs">
                         <div className="md:col-span-1 font-mono text-zinc-300 flex items-center">{name}</div>
-                        <input value={String(p?.api_base || '')} onChange={(e)=>updateProxyField(name, 'api_base', e.target.value)} placeholder={t('configLabels.api_base')} className="md:col-span-2 px-2 py-1 rounded bg-zinc-950 border border-zinc-800" />
-                        <input value={String(p?.api_key || '')} onChange={(e)=>updateProxyField(name, 'api_key', e.target.value)} placeholder={t('configLabels.api_key')} className="md:col-span-2 px-2 py-1 rounded bg-zinc-950 border border-zinc-800" />
-                        <input value={Array.isArray(p?.models) ? p.models.join(',') : ''} onChange={(e)=>updateProxyField(name, 'models', e.target.value.split(',').map(s=>s.trim()).filter(Boolean))} placeholder={`${t('configLabels.models')}${t('configCommaSeparatedHint')}`} className="md:col-span-1 px-2 py-1 rounded bg-zinc-950 border border-zinc-800" />
+                        <input value={String(p?.api_base || '')} onChange={(e)=>updateProxyField(name, 'api_base', e.target.value)} placeholder={t('configLabels.api_base')} className="md:col-span-2 px-2 py-1 rounded-lg bg-zinc-950/70 border border-zinc-800" />
+                        <input value={String(p?.api_key || '')} onChange={(e)=>updateProxyField(name, 'api_key', e.target.value)} placeholder={t('configLabels.api_key')} className="md:col-span-2 px-2 py-1 rounded-lg bg-zinc-950/70 border border-zinc-800" />
+                        <input value={Array.isArray(p?.models) ? p.models.join(',') : ''} onChange={(e)=>updateProxyField(name, 'models', e.target.value.split(',').map(s=>s.trim()).filter(Boolean))} placeholder={`${t('configLabels.models')}${t('configCommaSeparatedHint')}`} className="md:col-span-1 px-2 py-1 rounded-lg bg-zinc-950/70 border border-zinc-800" />
                         <button onClick={()=>removeProxy(name)} className="md:col-span-1 px-2 py-1 rounded bg-red-900/60 hover:bg-red-800 text-red-100">{t('delete')}</button>
                       </div>
                     ))}
@@ -309,7 +309,7 @@ const Config: React.FC = () => {
           <textarea
             value={cfgRaw}
             onChange={(e) => setCfgRaw(e.target.value)}
-            className="flex-1 w-full bg-zinc-950 p-6 font-mono text-sm text-zinc-300 focus:outline-none resize-none"
+            className="flex-1 w-full bg-zinc-950/35 p-6 font-mono text-sm text-zinc-300 focus:outline-none resize-none"
             spellCheck={false}
           />
         )}
@@ -317,10 +317,10 @@ const Config: React.FC = () => {
 
       {showDiff && (
         <div className="fixed inset-0 z-50 bg-black/60 flex items-center justify-center p-4">
-          <div className="w-full max-w-4xl max-h-[85vh] bg-zinc-950 border border-zinc-800 rounded-2xl overflow-hidden flex flex-col">
+          <div className="w-full max-w-4xl max-h-[85vh] brand-card border border-zinc-800 rounded-[30px] overflow-hidden flex flex-col">
             <div className="px-4 py-3 border-b border-zinc-800 flex items-center justify-between">
               <div className="font-semibold">{t('configDiffPreviewCount', { count: diffRows.length })}</div>
-              <button className="px-3 py-1 rounded bg-zinc-800" onClick={() => setShowDiff(false)}>{t('close')}</button>
+              <button className="px-3 py-1 rounded-xl bg-zinc-800" onClick={() => setShowDiff(false)}>{t('close')}</button>
             </div>
             <div className="overflow-auto text-xs">
               <table className="w-full">
diff --git a/webui/src/pages/Cron.tsx b/webui/src/pages/Cron.tsx
index 42a5678..c4d3059 100644
--- a/webui/src/pages/Cron.tsx
+++ b/webui/src/pages/Cron.tsx
@@ -175,7 +175,7 @@ const Cron: React.FC = () => {
           <button onClick={() => refreshCron()} className="flex items-center gap-2 px-4 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-lg text-sm font-medium transition-colors">
             <RefreshCw className="w-4 h-4" /> {t('refresh')}
           </button>
-          <button onClick={() => openCronModal()} className="flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg text-sm font-medium transition-colors shadow-sm">
+          <button onClick={() => openCronModal()} className="brand-button flex items-center gap-2 px-4 py-2 text-white rounded-xl text-sm font-medium transition-colors shadow-sm">
             <Plus className="w-4 h-4" /> {t('addJob')}
           </button>
         </div>
@@ -185,12 +185,12 @@ const Cron: React.FC = () => {
         {cron.map((j) => {
           const schedule = formatSchedule(j, t);
           return (
-          <div key={j.id} className="bg-zinc-900/40 border border-zinc-800/80 rounded-2xl p-6 flex flex-col shadow-sm group hover:border-zinc-700/50 transition-colors">
+          <div key={j.id} className="brand-card rounded-[30px] border border-zinc-800/80 p-6 flex flex-col group hover:border-zinc-700/50 transition-colors">
             <div className="flex items-start justify-between mb-4">
               <div>
                 <h3 className="font-semibold text-zinc-100 mb-1">{j.name || j.id}</h3>
                 <div className="flex items-center gap-2">
-                  <span className="text-[10px] font-mono text-zinc-500 uppercase tracking-wider bg-zinc-800/50 px-2 py-0.5 rounded">{t('id')}: {j.id.slice(-6)}</span>
+                  <span className="text-[10px] font-mono text-zinc-500 uppercase tracking-wider bg-zinc-800/40 px-2 py-0.5 rounded-full">{t('id')}: {j.id.slice(-6)}</span>
                 </div>
               </div>
               {j.enabled ? (
@@ -206,7 +206,7 @@ const Cron: React.FC = () => {
 
             <div className="flex-1 space-y-3 mb-6">
               <div className="text-sm text-zinc-400 line-clamp-2 italic">"{j.message}"</div>
-              <div className="bg-zinc-950/50 rounded-lg p-2 border border-zinc-800/50">
+              <div className="brand-card-subtle rounded-2xl p-3 border border-zinc-800/50">
                 <div className="text-[10px] text-zinc-500 uppercase mb-0.5">{schedule.label}</div>
                 <div className="text-xs text-zinc-300 font-medium break-all">{schedule.value}</div>
               </div>
@@ -215,7 +215,7 @@ const Cron: React.FC = () => {
             <div className="flex items-center gap-2 pt-4 border-t border-zinc-800/50">
               <button
                 onClick={() => openCronModal(j)}
-                className="flex-1 flex items-center justify-center gap-2 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-lg text-xs font-medium transition-colors text-zinc-300"
+                className="flex-1 flex items-center justify-center gap-2 py-2 bg-zinc-800/70 hover:bg-zinc-700 rounded-xl text-xs font-medium transition-colors text-zinc-300"
               >
                 <Edit2 className="w-3.5 h-3.5" /> {t('editJob')}
               </button>
@@ -238,7 +238,7 @@ const Cron: React.FC = () => {
           );
         })}
         {cron.length === 0 && (
-          <div className="col-span-full py-20 bg-zinc-900/20 border border-dashed border-zinc-800 rounded-3xl flex flex-col items-center justify-center text-zinc-500">
+          <div className="col-span-full py-20 brand-card border border-dashed border-zinc-800 rounded-[32px] flex flex-col items-center justify-center text-zinc-500">
             <Clock className="w-12 h-12 mb-4 opacity-20" />
             <p className="text-lg font-medium">{t('noCronJobs')}</p>
           </div>
@@ -259,16 +259,16 @@ const Cron: React.FC = () => {
               initial={{ opacity: 0, scale: 0.95, y: 20 }}
               animate={{ opacity: 1, scale: 1, y: 0 }}
               exit={{ opacity: 0, scale: 0.95, y: 20 }}
-              className="relative w-full max-w-lg bg-zinc-900 border border-zinc-800 rounded-3xl shadow-2xl overflow-hidden"
+              className="brand-card relative w-full max-w-lg border border-zinc-800 rounded-[32px] shadow-2xl overflow-hidden"
             >
-              <div className="p-6 border-b border-zinc-800 flex items-center justify-between bg-zinc-900/50">
+              <div className="p-6 border-b border-zinc-800 flex items-center justify-between bg-zinc-900/20 relative z-[1]">
                 <h2 className="text-xl font-semibold text-zinc-100">{editingCron ? t('editJob') : t('addJob')}</h2>
                 <button onClick={() => setIsCronModalOpen(false)} className="p-2 hover:bg-zinc-800 rounded-full transition-colors text-zinc-400 hover:text-zinc-200">
                   <X className="w-5 h-5" />
                 </button>
               </div>
 
-              <div className="p-6 space-y-4 max-h-[70vh] overflow-y-auto">
+              <div className="p-6 space-y-4 max-h-[70vh] overflow-y-auto relative z-[1]">
                 <div className="grid grid-cols-2 gap-4">
                   <label className="block">
                     <span className="text-sm font-medium text-zinc-400 mb-1.5 block">{t('jobName')}</span>
@@ -276,7 +276,7 @@ const Cron: React.FC = () => {
                       type="text"
                       value={cronForm.name}
                       onChange={(e) => setCronForm({ ...cronForm, name: e.target.value })}
-                      className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-colors"
+                      className="w-full bg-zinc-950/70 border border-zinc-800 rounded-xl px-3 py-2 text-sm focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 transition-colors"
                     />
                   </label>
                   <label className="block">
@@ -286,7 +286,7 @@ const Cron: React.FC = () => {
                       value={cronForm.expr}
                       onChange={(e) => setCronForm({ ...cronForm, expr: e.target.value })}
                       placeholder={t('cronExpressionPlaceholder')}
-                      className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-colors"
+                      className="w-full bg-zinc-950/70 border border-zinc-800 rounded-xl px-3 py-2 text-sm focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 transition-colors"
                     />
                   </label>
                 </div>
@@ -297,7 +297,7 @@ const Cron: React.FC = () => {
                     value={cronForm.message}
                     onChange={(e) => setCronForm({ ...cronForm, message: e.target.value })}
                     rows={3}
-                    className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-colors resize-none"
+                    className="w-full bg-zinc-950/70 border border-zinc-800 rounded-xl px-3 py-2 text-sm focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 transition-colors resize-none"
                   />
                 </label>
 
@@ -312,7 +312,7 @@ const Cron: React.FC = () => {
                         const nextTo = candidates.includes(cronForm.to) ? cronForm.to : (candidates[0] || '');
                         setCronForm({ ...cronForm, channel: nextChannel, to: nextTo });
                       }}
-                      className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-colors"
+                      className="w-full bg-zinc-950/70 border border-zinc-800 rounded-xl px-3 py-2 text-sm focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 transition-colors"
                     >
                       {(enabledChannels.length > 0 ? enabledChannels : [cronForm.channel]).map((ch) => (
                         <option key={ch} value={ch}>{ch}</option>
@@ -325,7 +325,7 @@ const Cron: React.FC = () => {
                       <select
                         value={cronForm.to}
                         onChange={(e) => setCronForm({ ...cronForm, to: e.target.value })}
-                        className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-colors"
+                        className="w-full bg-zinc-950/70 border border-zinc-800 rounded-xl px-3 py-2 text-sm focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 transition-colors"
                       >
                         {(channelRecipients[cronForm.channel] || []).map((id) => (
                           <option key={id} value={id}>{id}</option>
@@ -337,7 +337,7 @@ const Cron: React.FC = () => {
                         value={cronForm.to}
                         onChange={(e) => setCronForm({ ...cronForm, to: e.target.value })}
                         placeholder={t('recipientId')}
-                        className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-colors"
+                        className="w-full bg-zinc-950/70 border border-zinc-800 rounded-xl px-3 py-2 text-sm focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 transition-colors"
                       />
                     )}
                   </label>
@@ -365,7 +365,7 @@ const Cron: React.FC = () => {
                 </div>
               </div>
 
-              <div className="p-6 border-t border-zinc-800 bg-zinc-900/50 flex items-center justify-end gap-3">
+              <div className="p-6 border-t border-zinc-800 bg-zinc-900/20 flex items-center justify-end gap-3 relative z-[1]">
                 <button
                   onClick={() => setIsCronModalOpen(false)}
                   className="px-4 py-2 text-sm font-medium text-zinc-400 hover:text-zinc-200 transition-colors"
@@ -374,7 +374,7 @@ const Cron: React.FC = () => {
                 </button>
                 <button
                   onClick={handleCronSubmit}
-                  className="px-6 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl text-sm font-medium transition-all shadow-lg shadow-indigo-600/20"
+                  className="brand-button px-6 py-2 text-white rounded-xl text-sm font-medium transition-all"
                 >
                   {editingCron ? t('update') : t('create')}
                 </button>
diff --git a/webui/src/pages/Dashboard.tsx b/webui/src/pages/Dashboard.tsx
index 96cd8e1..6a776b9 100644
--- a/webui/src/pages/Dashboard.tsx
+++ b/webui/src/pages/Dashboard.tsx
@@ -74,7 +74,7 @@ const Dashboard: React.FC = () => {
             {t('webui')}: <span className="font-mono text-zinc-300">{webuiVersion}</span>
           </div>
         </div>
-        <button onClick={refreshAll} className="flex items-center gap-2 px-4 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-lg text-sm font-medium transition-colors shrink-0">
+        <button onClick={refreshAll} className="brand-button flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-colors shrink-0 text-white">
           <RefreshCw className="w-4 h-4" /> {t('refreshAll')}
         </button>
       </div>
@@ -89,7 +89,7 @@ const Dashboard: React.FC = () => {
       </div>
 
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
-        <div className="rounded-2xl border border-zinc-800 bg-zinc-900/40 p-5 min-h-[148px]">
+        <div className="brand-card rounded-[28px] border border-zinc-800 p-5 min-h-[148px]">
           <div className="flex items-center gap-2 text-zinc-200 mb-2">
             <AlertTriangle className="w-4 h-4 text-amber-400" />
             <div className="text-sm font-medium">{t('ekgEscalations')}</div>
@@ -97,7 +97,7 @@ const Dashboard: React.FC = () => {
           <div className="text-3xl font-semibold text-zinc-100">{ekgEscalationCount}</div>
           <div className="mt-2 text-xs text-zinc-500">{t('dashboardTopErrorSignature')}: {ekgTopErrSig}</div>
         </div>
-        <div className="rounded-2xl border border-zinc-800 bg-zinc-900/40 p-5 min-h-[148px]">
+        <div className="brand-card rounded-[28px] border border-zinc-800 p-5 min-h-[148px]">
           <div className="flex items-center gap-2 text-zinc-200 mb-2">
             <Workflow className="w-4 h-4 text-sky-400" />
             <div className="text-sm font-medium">{t('ekgTopProvidersWorkload')}</div>
@@ -105,7 +105,7 @@ const Dashboard: React.FC = () => {
           <div className="text-2xl font-semibold text-zinc-100 truncate">{ekgTopProvider}</div>
           <div className="mt-2 text-xs text-zinc-500">{t('dashboardWorkloadSnapshot')}</div>
         </div>
-        <div className="rounded-2xl border border-zinc-800 bg-zinc-900/40 p-5 min-h-[148px]">
+        <div className="brand-card rounded-[28px] border border-zinc-800 p-5 min-h-[148px]">
           <div className="flex items-center gap-2 text-zinc-200 mb-2">
             <Activity className="w-4 h-4 text-rose-400" />
             <div className="text-sm font-medium">{t('taskAudit')}</div>
@@ -116,17 +116,17 @@ const Dashboard: React.FC = () => {
       </div>
 
       <div className="grid grid-cols-1 xl:grid-cols-2 gap-6 items-stretch">
-        <div className="bg-zinc-900/40 border border-zinc-800/80 rounded-2xl p-6 min-h-[340px] h-full">
+        <div className="brand-card rounded-[30px] border border-zinc-800/80 p-6 min-h-[340px] h-full">
           <div className="flex items-center gap-2 mb-5 text-zinc-200">
             <Clock className="w-5 h-5 text-zinc-400" />
             <h2 className="text-lg font-medium">{t('recentCron')}</h2>
           </div>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div className="rounded-xl border border-zinc-800 bg-zinc-950/60 p-4 min-h-[104px]">
+            <div className="brand-card-subtle rounded-2xl border border-zinc-800 p-4 min-h-[104px]">
               <div className="text-[11px] uppercase tracking-widest text-zinc-500">{t('active')}</div>
               <div className="mt-2 text-2xl font-semibold text-zinc-100">{enabledCron}</div>
             </div>
-            <div className="rounded-xl border border-zinc-800 bg-zinc-950/60 p-4 min-h-[104px]">
+            <div className="brand-card-subtle rounded-2xl border border-zinc-800 p-4 min-h-[104px]">
               <div className="text-[11px] uppercase tracking-widest text-zinc-500">{t('paused')}</div>
               <div className="mt-2 text-2xl font-semibold text-zinc-100">{pausedCron}</div>
             </div>
@@ -138,7 +138,7 @@ const Dashboard: React.FC = () => {
       </div>
 
       <div className="grid grid-cols-1 xl:grid-cols-2 gap-6 items-stretch">
-        <div className="bg-zinc-900/40 border border-zinc-800/80 rounded-2xl p-6 min-h-[340px] h-full">
+        <div className="brand-card rounded-[30px] border border-zinc-800/80 p-6 min-h-[340px] h-full">
           <div className="flex items-center gap-2 mb-5 text-zinc-200">
             <Activity className="w-5 h-5 text-zinc-400" />
             <h2 className="text-lg font-medium">{t('taskAudit')}</h2>
@@ -147,7 +147,7 @@ const Dashboard: React.FC = () => {
             {recentTasks.length === 0 ? (
               <div className="text-sm text-zinc-500 text-center py-10">-</div>
             ) : recentTasks.map((task: any, index: number) => (
-              <div key={`${task.task_id || 'task'}-${index}`} className="rounded-xl border border-zinc-800 bg-zinc-950/60 p-4">
+              <div key={`${task.task_id || 'task'}-${index}`} className="brand-card-subtle rounded-2xl border border-zinc-800 p-4">
                 <div className="flex items-center justify-between gap-3">
                   <div className="min-w-0">
                     <div className="text-sm font-medium text-zinc-200 truncate">{task.task_id || `task-${index + 1}`}</div>
@@ -162,7 +162,7 @@ const Dashboard: React.FC = () => {
           </div>
         </div>
 
-        <div className="bg-zinc-900/40 border border-zinc-800/80 rounded-2xl p-6 min-h-[340px] h-full">
+        <div className="brand-card rounded-[30px] border border-zinc-800/80 p-6 min-h-[340px] h-full">
           <div className="flex items-center gap-2 mb-5 text-zinc-200">
             <AlertTriangle className="w-5 h-5 text-zinc-400" />
             <h2 className="text-lg font-medium">{t('statusError')}</h2>
@@ -171,7 +171,7 @@ const Dashboard: React.FC = () => {
             {recentFailures.length === 0 ? (
               <div className="text-sm text-zinc-500 text-center py-10">-</div>
             ) : recentFailures.map((task: any, index: number) => (
-              <div key={`${task.task_id || 'failed'}-${index}`} className="rounded-xl border border-zinc-800 bg-zinc-950/60 p-4">
+              <div key={`${task.task_id || 'failed'}-${index}`} className="brand-card-subtle rounded-2xl border border-zinc-800 p-4">
                 <div className="text-sm font-medium text-zinc-200 truncate">{task.task_id || `task-${index + 1}`}</div>
                 <div className="text-xs text-zinc-500 truncate mt-1">{task.source || '-'} · {task.channel || '-'}</div>
                 <div className="text-xs text-rose-300 mt-2 break-all">{task.error || task.block_reason || '-'}</div>
diff --git a/webui/src/pages/EKG.tsx b/webui/src/pages/EKG.tsx
index 207e3d9..ce2739f 100644
--- a/webui/src/pages/EKG.tsx
+++ b/webui/src/pages/EKG.tsx
@@ -19,7 +19,7 @@ function StatCard({
   icon: React.ReactNode;
 }) {
   return (
-    <div className="rounded-2xl border border-zinc-800 bg-zinc-900/40 p-5">
+    <div className="brand-card rounded-[28px] border border-zinc-800 p-5">
       <div className="flex items-start justify-between gap-3">
         <div>
           <div className="text-[11px] uppercase tracking-widest text-zinc-500">{title}</div>
@@ -45,7 +45,7 @@ function KVDistributionCard({
   const maxValue = entries.length > 0 ? Math.max(...entries.map(([, value]) => value)) : 0;
 
   return (
-    <div className="rounded-2xl border border-zinc-800 bg-zinc-900/40 p-5">
+    <div className="brand-card rounded-[28px] border border-zinc-800 p-5">
       <div className="mb-4 text-sm font-medium text-zinc-200">{title}</div>
       <div className="space-y-3">
         {entries.length === 0 ? (
@@ -79,7 +79,7 @@ function RankingCard({
   valueMode: 'score' | 'count';
 }) {
   return (
-    <div className="rounded-2xl border border-zinc-800 bg-zinc-900/40 p-5">
+    <div className="brand-card rounded-[28px] border border-zinc-800 p-5">
       <div className="mb-4 text-sm font-medium text-zinc-200">{title}</div>
       <div className="space-y-2">
         {items.length === 0 ? (
@@ -159,12 +159,12 @@ const EKG: React.FC = () => {
           <div className="mt-1 text-sm text-zinc-500">{t('ekgOverviewHint')}</div>
         </div>
         <div className="flex items-center gap-2">
-          <select value={ekgWindow} onChange={(e) => setEkgWindow(e.target.value as '6h' | '24h' | '7d')} className="bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-sm">
+          <select value={ekgWindow} onChange={(e) => setEkgWindow(e.target.value as '6h' | '24h' | '7d')} className="bg-zinc-900/70 border border-zinc-700 rounded-xl px-3 py-2 text-sm">
             <option value="6h">6h</option>
             <option value="24h">24h</option>
             <option value="7d">7d</option>
           </select>
-          <button onClick={fetchData} className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-sm">
+          <button onClick={fetchData} className="brand-button inline-flex items-center gap-2 px-4 py-2 rounded-xl text-sm text-white">
             <RefreshCw className="w-4 h-4" />
             {loading ? t('loading') : t('refresh')}
           </button>
diff --git a/webui/src/pages/LogCodes.tsx b/webui/src/pages/LogCodes.tsx
index 983ce69..0475e83 100644
--- a/webui/src/pages/LogCodes.tsx
+++ b/webui/src/pages/LogCodes.tsx
@@ -47,13 +47,13 @@ const LogCodes: React.FC = () => {
           value={kw}
           onChange={(e) => setKw(e.target.value)}
           placeholder={t('logCodesSearchPlaceholder')}
-          className="w-full sm:w-80 bg-zinc-900 border border-zinc-800 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-500"
+          className="w-full sm:w-80 bg-zinc-900/70 border border-zinc-800 rounded-xl px-3 py-2 text-sm focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20"
         />
       </div>
 
-      <div className="bg-zinc-950 border border-zinc-800 rounded-2xl overflow-hidden">
+      <div className="brand-card border border-zinc-800 rounded-[30px] overflow-hidden">
         <table className="w-full text-sm">
-          <thead className="bg-zinc-900/90 border-b border-zinc-800">
+          <thead className="bg-zinc-900/70 border-b border-zinc-800">
             <tr className="text-zinc-400">
               <th className="text-left p-3 font-medium w-40">{t('code')}</th>
               <th className="text-left p-3 font-medium">{t('template')}</th>
@@ -61,7 +61,7 @@ const LogCodes: React.FC = () => {
           </thead>
           <tbody>
             {filtered.map((it) => (
-              <tr key={it.code} className="border-b border-zinc-900 hover:bg-zinc-900/40">
+              <tr key={it.code} className="border-b border-zinc-900/70 hover:bg-zinc-900/20">
                 <td className="p-3 font-mono text-indigo-300">{it.code}</td>
                 <td className="p-3 text-zinc-200 break-all">{it.text}</td>
               </tr>
diff --git a/webui/src/pages/Logs.tsx b/webui/src/pages/Logs.tsx
index accbc73..5513217 100644
--- a/webui/src/pages/Logs.tsx
+++ b/webui/src/pages/Logs.tsx
@@ -179,26 +179,26 @@ const Logs: React.FC = () => {
         <div className="flex items-center gap-2 flex-wrap">
           <button
             onClick={() => setShowRaw(!showRaw)}
-            className="flex items-center gap-2 px-4 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-lg text-sm font-medium transition-colors text-zinc-300"
+            className="flex items-center gap-2 px-4 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-xl text-sm font-medium transition-colors text-zinc-300"
           >
             {showRaw ? t('pretty') : t('raw')}
           </button>
           <button 
             onClick={() => setIsStreaming(!isStreaming)}
-            className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
-              isStreaming ? 'bg-zinc-800 hover:bg-zinc-700 text-zinc-300' : 'bg-indigo-600 hover:bg-indigo-500 text-white'
+            className={`flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-colors ${
+              isStreaming ? 'bg-zinc-800 hover:bg-zinc-700 text-zinc-300' : 'brand-button text-white'
             }`}
           >
             {isStreaming ? <><Square className="w-4 h-4" /> {t('pause')}</> : <><Play className="w-4 h-4" /> {t('resume')}</>}
           </button>
-          <button onClick={clearLogs} className="flex items-center gap-2 px-4 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-lg text-sm font-medium transition-colors text-zinc-300">
+          <button onClick={clearLogs} className="flex items-center gap-2 px-4 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-xl text-sm font-medium transition-colors text-zinc-300">
             <Trash2 className="w-4 h-4" /> {t('clear')}
           </button>
         </div>
       </div>
 
-      <div className="flex-1 bg-zinc-950 border border-zinc-800 rounded-2xl overflow-hidden flex flex-col shadow-2xl">
-        <div className="bg-zinc-900/50 px-4 py-2 border-b border-zinc-800 flex items-center justify-between">
+      <div className="flex-1 brand-card border border-zinc-800 rounded-[30px] overflow-hidden flex flex-col shadow-2xl">
+        <div className="bg-zinc-900/20 px-4 py-2 border-b border-zinc-800 flex items-center justify-between">
           <div className="flex items-center gap-2">
             <Terminal className="w-4 h-4 text-zinc-500" />
             <span className="text-xs font-mono text-zinc-500">{t('systemLog')}</span>
@@ -214,13 +214,13 @@ const Logs: React.FC = () => {
           ) : showRaw ? (
             <div className="p-3 font-mono text-xs space-y-1">
               {logs.map((log, i) => (
-                <div key={i} className="border-b border-zinc-900 py-1 text-zinc-300 break-all">{log.__raw || JSON.stringify(log)}</div>
+                <div key={i} className="border-b border-zinc-900/70 py-1 text-zinc-300 break-all">{log.__raw || JSON.stringify(log)}</div>
               ))}
               <div ref={logEndRef} />
             </div>
           ) : (
             <table className="w-full text-xs">
-              <thead className="sticky top-0 bg-zinc-900/95 border-b border-zinc-800">
+              <thead className="sticky top-0 bg-zinc-900/85 border-b border-zinc-800">
                 <tr className="text-zinc-400">
                   <th className="text-left p-2 font-medium">{t('time')}</th>
                   <th className="text-left p-2 font-medium">{t('level')}</th>
@@ -239,7 +239,7 @@ const Logs: React.FC = () => {
                   const caller = (log as any).caller || (log as any).source || '';
                   const code = toCode(rawCode);
                   return (
-                    <tr key={i} className="border-b border-zinc-900 hover:bg-zinc-900/40 align-top">
+                    <tr key={i} className="border-b border-zinc-900/70 hover:bg-zinc-900/25 align-top">
                       <td className="p-2 text-zinc-500 whitespace-nowrap">{formatLocalTime(log.time)}</td>
                       <td className={`p-2 font-semibold whitespace-nowrap ${getLevelColor(lvl)}`}>{lvl}</td>
                       <td className="p-2 text-zinc-200 break-all">{message}</td>
diff --git a/webui/src/pages/Memory.tsx b/webui/src/pages/Memory.tsx
index 74d03bd..071a7b3 100644
--- a/webui/src/pages/Memory.tsx
+++ b/webui/src/pages/Memory.tsx
@@ -111,14 +111,14 @@ const Memory: React.FC = () => {
   }, [q]);
 
   return (
-    <div className="flex h-full flex-col lg:flex-row">
-      <aside className="w-full lg:w-72 border-b lg:border-b-0 lg:border-r border-zinc-800 p-4 space-y-2 overflow-y-auto">
+    <div className="flex h-full flex-col lg:flex-row brand-card rounded-[30px] border border-zinc-800 overflow-hidden">
+      <aside className="w-full lg:w-72 border-b lg:border-b-0 lg:border-r border-zinc-800 p-4 space-y-2 overflow-y-auto bg-zinc-950/20">
         <div className="flex items-center justify-between">
           <h2 className="font-semibold">{t('memoryFiles')}</h2>
-          <button onClick={createFile} className="px-2 py-1 rounded bg-zinc-800">+</button>
+          <button onClick={createFile} className="brand-button px-2.5 py-1 rounded-xl text-white">+</button>
         </div>
         {files.map((f) => (
-          <div key={f} className={`flex items-center justify-between p-2 rounded ${active === f ? 'bg-zinc-800' : 'hover:bg-zinc-900'}`}>
+          <div key={f} className={`flex items-center justify-between p-2.5 rounded-2xl ${active === f ? 'nav-item-active' : 'hover:bg-zinc-900/30'}`}>
             <button className="text-left flex-1" onClick={() => openFile(f)}>{f}</button>
             <button className="text-red-400" onClick={() => removeFile(f)}>x</button>
           </div>
@@ -127,9 +127,9 @@ const Memory: React.FC = () => {
       <main className="flex-1 p-4 md:p-6 space-y-3 min-h-0">
         <div className="flex items-center justify-between">
           <h2 className="font-semibold">{active || t('noFileSelected')}</h2>
-          <button onClick={saveFile} className="px-3 py-1 rounded bg-indigo-600">{t('save')}</button>
+          <button onClick={saveFile} className="brand-button px-3 py-1.5 rounded-xl text-white">{t('save')}</button>
         </div>
-        <textarea value={content} onChange={(e) => setContent(e.target.value)} className="w-full h-[50vh] lg:h-[80vh] bg-zinc-900 border border-zinc-800 rounded p-3" />
+        <textarea value={content} onChange={(e) => setContent(e.target.value)} className="w-full h-[50vh] lg:h-[80vh] bg-zinc-900/70 border border-zinc-800 rounded-[24px] p-4 focus:outline-none focus:ring-2 focus:ring-indigo-500/20" />
       </main>
     </div>
   );
diff --git a/webui/src/pages/Skills.tsx b/webui/src/pages/Skills.tsx
index 70bce7c..edafee6 100644
--- a/webui/src/pages/Skills.tsx
+++ b/webui/src/pages/Skills.tsx
@@ -189,8 +189,8 @@ const Skills: React.FC = () => {
       <div className="flex items-start justify-between gap-3 flex-wrap">
         <h1 className="text-2xl font-semibold tracking-tight">{t('skills')}</h1>
         <div className="flex items-center gap-2 flex-wrap w-full xl:w-auto">
-          <input disabled={installingSkill} value={installName} onChange={(e) => setInstallName(e.target.value)} placeholder={t('skillsNamePlaceholder')} className="w-full sm:w-72 px-3 py-2 bg-zinc-950 border border-zinc-800 rounded-lg text-sm disabled:opacity-60" />
-          <button disabled={installingSkill} onClick={installSkill} className="px-3 py-2 bg-emerald-600 hover:bg-emerald-500 disabled:opacity-60 disabled:cursor-not-allowed text-white rounded-lg text-sm font-medium">{installingSkill ? t('loading') : t('install')}</button>
+          <input disabled={installingSkill} value={installName} onChange={(e) => setInstallName(e.target.value)} placeholder={t('skillsNamePlaceholder')} className="w-full sm:w-72 px-3 py-2 bg-zinc-950/70 border border-zinc-800 rounded-xl text-sm disabled:opacity-60" />
+          <button disabled={installingSkill} onClick={installSkill} className="px-3 py-2 bg-emerald-600 hover:bg-emerald-500 disabled:opacity-60 disabled:cursor-not-allowed text-white rounded-xl text-sm font-medium">{installingSkill ? t('loading') : t('install')}</button>
           <label className="flex items-center gap-2 text-xs text-zinc-400">
             <input
               type="checkbox"
@@ -208,15 +208,15 @@ const Skills: React.FC = () => {
           {!clawhubInstalled && (
             <button
               onClick={installClawHubIfNeeded}
-              className="flex items-center gap-2 px-4 py-2 bg-amber-600 hover:bg-amber-500 text-white rounded-lg text-sm font-medium transition-colors shadow-sm"
+              className="flex items-center gap-2 px-4 py-2 bg-amber-600 hover:bg-amber-500 text-white rounded-xl text-sm font-medium transition-colors shadow-sm"
             >
               <Zap className="w-4 h-4" /> {t('skillsInstallNow')}
             </button>
           )}
-          <button onClick={() => refreshSkills()} className="flex items-center gap-2 px-4 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-lg text-sm font-medium transition-colors">
+          <button onClick={() => refreshSkills()} className="flex items-center gap-2 px-4 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-xl text-sm font-medium transition-colors">
             <RefreshCw className="w-4 h-4" /> {t('refresh')}
           </button>
-          <button onClick={onAddSkillClick} className="flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg text-sm font-medium transition-colors shadow-sm">
+          <button onClick={onAddSkillClick} className="brand-button flex items-center gap-2 px-4 py-2 text-white rounded-xl text-sm font-medium transition-colors shadow-sm">
             <Plus className="w-4 h-4" /> {t('skillsAdd')}
           </button>
         </div>
@@ -231,10 +231,10 @@ const Skills: React.FC = () => {
 
       <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-6">
         {skills.map(s => (
-          <div key={s.id} className="bg-zinc-900/40 border border-zinc-800/80 rounded-2xl p-6 flex flex-col shadow-sm group hover:border-zinc-700/50 transition-colors">
+          <div key={s.id} className="brand-card rounded-[28px] border border-zinc-800/80 p-6 flex flex-col shadow-sm group hover:border-zinc-700/50 transition-colors">
             <div className="flex items-start justify-between mb-4">
               <div className="flex items-center gap-4">
-                <div className="w-12 h-12 rounded-xl bg-zinc-800/50 flex items-center justify-center border border-zinc-700/50">
+                <div className="w-12 h-12 rounded-2xl bg-zinc-800/50 flex items-center justify-center border border-zinc-700/50">
                   <Zap className="w-6 h-6 text-amber-400" />
                 </div>
                 <div>
diff --git a/webui/src/pages/SubagentProfiles.tsx b/webui/src/pages/SubagentProfiles.tsx
index 5357f85..6c13c3d 100644
--- a/webui/src/pages/SubagentProfiles.tsx
+++ b/webui/src/pages/SubagentProfiles.tsx
@@ -276,17 +276,17 @@ const SubagentProfiles: React.FC = () => {
       <div className="flex items-center justify-between">
         <h1 className="text-xl md:text-2xl font-semibold">{t('subagentProfiles')}</h1>
         <div className="flex items-center gap-2">
-          <button onClick={() => load()} className="px-3 py-1.5 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-sm">
+          <button onClick={() => load()} className="px-3 py-1.5 rounded-xl bg-zinc-800 hover:bg-zinc-700 text-sm">
             {t('refresh')}
           </button>
-          <button onClick={onNew} className="px-3 py-1.5 rounded-lg bg-emerald-700/80 hover:bg-emerald-600 text-sm">
+          <button onClick={onNew} className="px-3 py-1.5 rounded-xl bg-emerald-700/80 hover:bg-emerald-600 text-sm">
             {t('newProfile')}
           </button>
         </div>
       </div>
 
       <div className="flex-1 min-h-0 grid grid-cols-1 lg:grid-cols-[360px_1fr] gap-4">
-        <div className="border border-zinc-800 rounded-xl bg-zinc-900/40 overflow-hidden">
+        <div className="brand-card rounded-[28px] border border-zinc-800 overflow-hidden">
           <div className="px-3 py-2 border-b border-zinc-800 text-xs text-zinc-400 uppercase tracking-wider">
             {t('subagentProfiles')}
           </div>
@@ -295,7 +295,7 @@ const SubagentProfiles: React.FC = () => {
               <button
                 key={it.agent_id}
                 onClick={() => onSelect(it)}
-                className={`w-full text-left px-3 py-2 border-b border-zinc-800/50 hover:bg-zinc-800/40 ${selectedId === it.agent_id ? 'bg-indigo-500/15' : ''}`}
+                className={`w-full text-left px-3 py-2 border-b border-zinc-800/50 hover:bg-zinc-800/20 ${selectedId === it.agent_id ? 'bg-indigo-500/15' : ''}`}
               >
                 <div className="text-sm text-zinc-100 truncate">{it.agent_id || '-'}</div>
                 <div className="text-xs text-zinc-400 truncate">
@@ -309,7 +309,7 @@ const SubagentProfiles: React.FC = () => {
           </div>
         </div>
 
-        <div className="border border-zinc-800 rounded-xl bg-zinc-900/40 p-4 space-y-3">
+        <div className="brand-card rounded-[28px] border border-zinc-800 p-4 space-y-3">
           <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
             <div>
               <div className="text-xs text-zinc-400 mb-1">{t('id')}</div>
@@ -317,7 +317,7 @@ const SubagentProfiles: React.FC = () => {
                 value={draft.agent_id || ''}
                 disabled={!!selected}
                 onChange={(e) => setDraft({ ...draft, agent_id: e.target.value })}
-                className="w-full px-2 py-1 text-xs bg-zinc-900 border border-zinc-700 rounded disabled:opacity-60"
+                className="w-full px-2 py-1.5 text-xs bg-zinc-900/70 border border-zinc-700 rounded-xl disabled:opacity-60"
                 placeholder="coder"
               />
             </div>
diff --git a/webui/src/pages/Subagents.tsx b/webui/src/pages/Subagents.tsx
index 50e8f1e..0847d74 100644
--- a/webui/src/pages/Subagents.tsx
+++ b/webui/src/pages/Subagents.tsx
@@ -964,10 +964,10 @@ const Subagents: React.FC = () => {
     <div className="h-full p-4 md:p-6 xl:p-8 flex flex-col gap-4">
       <div className="flex items-center justify-between gap-3 flex-wrap">
         <h1 className="text-xl md:text-2xl font-semibold">{t('subagentsRuntime')}</h1>
-        <button onClick={() => load()} className="px-3 py-1.5 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-sm">{t('refresh')}</button>
+        <button onClick={() => load()} className="brand-button px-3 py-1.5 rounded-xl text-sm text-white">{t('refresh')}</button>
       </div>
 
-      <div className="flex-1 min-h-0 border border-zinc-800 rounded-2xl bg-zinc-900/40 p-4 flex flex-col gap-3">
+      <div className="flex-1 min-h-0 brand-card border border-zinc-800 rounded-[30px] p-4 flex flex-col gap-3">
         <div className="flex items-center justify-between gap-3 flex-wrap">
           <div>
             <div className="text-xs text-zinc-400 uppercase tracking-wider">{t('agentTopology')}</div>
@@ -978,7 +978,7 @@ const Subagents: React.FC = () => {
               <button
                 key={filter}
                 onClick={() => setTopologyFilter(filter)}
-                className={`px-2 py-1 rounded text-[11px] ${topologyFilter === filter ? 'bg-amber-500/20 text-amber-200 border border-amber-500/40' : 'bg-zinc-800 hover:bg-zinc-700 text-zinc-300 border border-zinc-700'
+                className={`px-2 py-1 rounded-xl text-[11px] ${topologyFilter === filter ? 'bg-amber-500/20 text-amber-200 border border-amber-500/40' : 'bg-zinc-800 hover:bg-zinc-700 text-zinc-300 border border-zinc-700'
                   }`}
               >
                 {t(`topologyFilter.${filter}`)}
@@ -987,12 +987,12 @@ const Subagents: React.FC = () => {
             {selectedTopologyBranch && (
               <button
                 onClick={() => setSelectedTopologyBranch('')}
-                className="px-2 py-1 rounded bg-zinc-800 hover:bg-zinc-700 text-[11px] text-zinc-200"
+                className="px-2 py-1 rounded-xl bg-zinc-800 hover:bg-zinc-700 text-[11px] text-zinc-200"
               >
                 {t('clearFocus')}
               </button>
             )}
-            <div className="flex items-center gap-1 rounded-lg border border-zinc-800 bg-zinc-900/80 px-1 py-1">
+            <div className="flex items-center gap-1 rounded-xl border border-zinc-800 bg-zinc-900/60 px-1 py-1">
               <button
                 onClick={() => {
                   const newZoom = Math.max(0.1, Number((topologyZoom - 0.1).toFixed(2)));
@@ -1009,13 +1009,13 @@ const Subagents: React.FC = () => {
                   }
                   setTopologyZoom(newZoom);
                 }}
-                className="px-2 py-1 rounded bg-zinc-800 hover:bg-zinc-700 text-[11px] text-zinc-200"
+                className="px-2 py-1 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-[11px] text-zinc-200"
               >
                 {t('zoomOut')}
               </button>
               <button
                 onClick={fitView}
-                className="px-2 py-1 rounded bg-zinc-800 hover:bg-zinc-700 text-[11px] text-zinc-200"
+                className="px-2 py-1 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-[11px] text-zinc-200"
               >
                 {t('fitView')}
               </button>
@@ -1035,7 +1035,7 @@ const Subagents: React.FC = () => {
                   }
                   setTopologyZoom(newZoom);
                 }}
-                className="px-2 py-1 rounded bg-zinc-800 hover:bg-zinc-700 text-[11px] text-zinc-200"
+                className="px-2 py-1 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-[11px] text-zinc-200"
               >
                 100%
               </button>
@@ -1055,7 +1055,7 @@ const Subagents: React.FC = () => {
                   }
                   setTopologyZoom(newZoom);
                 }}
-                className="px-2 py-1 rounded bg-zinc-800 hover:bg-zinc-700 text-[11px] text-zinc-200"
+                className="px-2 py-1 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-[11px] text-zinc-200"
               >
                 {t('zoomIn')}
               </button>
@@ -1074,7 +1074,7 @@ const Subagents: React.FC = () => {
             stopTopologyDrag();
             clearTopologyTooltip();
           }}
-          className="relative flex-1 min-h-[420px] sm:min-h-[560px] xl:min-h-[760px] overflow-hidden rounded-xl border border-zinc-800 bg-zinc-950"
+          className="relative flex-1 min-h-[420px] sm:min-h-[560px] xl:min-h-[760px] overflow-hidden rounded-[24px] border border-zinc-800 bg-zinc-950/80"
           style={{ cursor: topologyDragging ? 'grabbing' : 'grab' }}
         >
           <SpaceParticles />
@@ -1142,7 +1142,7 @@ const Subagents: React.FC = () => {
           </div>
           {topologyTooltip && (
             <div
-              className="pointer-events-none fixed z-50 w-[280px] rounded-xl border border-zinc-700/80 bg-zinc-900/95 p-4 shadow-2xl shadow-black/50 backdrop-blur-md transition-opacity duration-200"
+              className="pointer-events-none fixed z-50 w-[280px] brand-card-subtle rounded-[24px] border border-zinc-700/80 p-4 shadow-2xl shadow-black/50 backdrop-blur-md transition-opacity duration-200"
               style={{ left: topologyTooltip.x, top: topologyTooltip.y }}
             >
               <div className="flex items-center gap-2 mb-2">
@@ -1174,7 +1174,7 @@ const Subagents: React.FC = () => {
           {selectedAgentID && (
             <div
               onWheelCapture={(event) => event.stopPropagation()}
-              className="absolute left-4 right-4 bottom-4 z-20 h-[48vh] xl:left-auto xl:right-4 xl:top-4 xl:bottom-4 xl:h-auto xl:w-[360px] rounded-2xl border border-zinc-800 bg-zinc-950/92 shadow-2xl shadow-black/40 backdrop-blur-md overflow-hidden flex flex-col"
+              className="absolute left-4 right-4 bottom-4 z-20 h-[48vh] xl:left-auto xl:right-4 xl:top-4 xl:bottom-4 xl:h-auto xl:w-[360px] brand-card rounded-[28px] border border-zinc-800 shadow-2xl shadow-black/40 backdrop-blur-md overflow-hidden flex flex-col"
             >
               <div className="flex items-center justify-between px-4 py-3 border-b border-zinc-800">
                 <div className="min-w-0">
@@ -1189,7 +1189,7 @@ const Subagents: React.FC = () => {
                     setStreamTask(null);
                     setStreamItems([]);
                   }}
-                  className="px-2 py-1 rounded bg-zinc-800 hover:bg-zinc-700 text-[11px] text-zinc-200"
+                  className="px-2 py-1 rounded-xl bg-zinc-800 hover:bg-zinc-700 text-[11px] text-zinc-200"
                 >
                   {t('close')}
                 </button>
@@ -1208,7 +1208,7 @@ const Subagents: React.FC = () => {
                 {streamItems.length === 0 ? (
                   <div className="text-sm text-zinc-500">No internal stream events yet.</div>
                 ) : streamItems.map((item, idx) => (
-                  <div key={`${item.kind || 'item'}-${item.at || 0}-${idx}`} className="rounded-xl border border-zinc-800 bg-zinc-900/70 p-3">
+                  <div key={`${item.kind || 'item'}-${item.at || 0}-${idx}`} className="brand-card-subtle rounded-2xl border border-zinc-800 p-3">
                     <div className="flex items-center justify-between gap-2 mb-2">
                       <div className="text-xs font-medium text-zinc-200">
                         {item.kind === 'event'
diff --git a/webui/src/pages/TaskAudit.tsx b/webui/src/pages/TaskAudit.tsx
index 9626bd9..f0f3b45 100644
--- a/webui/src/pages/TaskAudit.tsx
+++ b/webui/src/pages/TaskAudit.tsx
@@ -71,14 +71,14 @@ const TaskAudit: React.FC = () => {
       <div className="flex items-center justify-between flex-wrap gap-3">
         <h1 className="text-xl md:text-2xl font-semibold">{t('taskAudit')}</h1>
         <div className="flex items-center gap-2">
-          <select value={sourceFilter} onChange={(e)=>setSourceFilter(e.target.value)} className="bg-zinc-900 border border-zinc-700 rounded px-2 py-1 text-xs">
+          <select value={sourceFilter} onChange={(e)=>setSourceFilter(e.target.value)} className="bg-zinc-900/70 border border-zinc-700 rounded-xl px-2 py-1.5 text-xs">
             <option value="all">{t('allSources')}</option>
             <option value="direct">{t('sourceDirect')}</option>
             <option value="memory_todo">{t('sourceMemoryTodo')}</option>
             <option value="task_watchdog">task_watchdog</option>
             <option value="-">-</option>
           </select>
-          <select value={statusFilter} onChange={(e)=>setStatusFilter(e.target.value)} className="bg-zinc-900 border border-zinc-700 rounded px-2 py-1 text-xs">
+          <select value={statusFilter} onChange={(e)=>setStatusFilter(e.target.value)} className="bg-zinc-900/70 border border-zinc-700 rounded-xl px-2 py-1.5 text-xs">
             <option value="all">{t('allStatus')}</option>
             <option value="running">{t('statusRunning')}</option>
             <option value="waiting">{t('statusWaiting')}</option>
@@ -87,12 +87,12 @@ const TaskAudit: React.FC = () => {
             <option value="error">{t('statusError')}</option>
             <option value="suppressed">{t('statusSuppressed')}</option>
           </select>
-          <button onClick={fetchData} className="px-3 py-1.5 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-sm">{loading ? t('loading') : t('refresh')}</button>
+          <button onClick={fetchData} className="brand-button px-3 py-1.5 rounded-xl text-sm text-white">{loading ? t('loading') : t('refresh')}</button>
         </div>
       </div>
 
       <div className="flex-1 min-h-0 grid grid-cols-1 lg:grid-cols-[360px_1fr] gap-4">
-        <div className="border border-zinc-800 rounded-xl bg-zinc-900/40 overflow-hidden flex flex-col min-h-0">
+        <div className="brand-card rounded-[28px] border border-zinc-800 overflow-hidden flex flex-col min-h-0">
           <div className="px-3 py-2 border-b border-zinc-800 text-xs text-zinc-400 uppercase tracking-wider">{t('taskQueue')}</div>
           <div className="overflow-y-auto min-h-0">
             {filteredItems.length === 0 ? (
@@ -103,7 +103,7 @@ const TaskAudit: React.FC = () => {
                 <button
                   key={`${it.task_id || idx}-${it.time || idx}`}
                   onClick={() => setSelected(it)}
-                  className={`w-full text-left px-3 py-2 border-b border-zinc-800/60 hover:bg-zinc-800/40 ${active ? 'bg-indigo-500/15' : ''}`}
+                  className={`w-full text-left px-3 py-2 border-b border-zinc-800/60 hover:bg-zinc-800/20 ${active ? 'bg-indigo-500/15' : ''}`}
                 >
                   <div className="text-sm font-medium text-zinc-100 truncate">{it.task_id || `task-${idx + 1}`}</div>
                   <div className="text-xs text-zinc-400 truncate">{it.channel || '-'} · {it.status} · attempts:{it.attempts || 1} · {it.duration_ms || 0}ms · retry:{it.retry_count || 0} · {it.source || '-'} · {it.provider || '-'} / {it.model || '-'}</div>
@@ -114,7 +114,7 @@ const TaskAudit: React.FC = () => {
           </div>
         </div>
 
-        <div className="border border-zinc-800 rounded-xl bg-zinc-900/40 overflow-hidden flex flex-col min-h-0">
+        <div className="brand-card rounded-[28px] border border-zinc-800 overflow-hidden flex flex-col min-h-0">
           <div className="px-3 py-2 border-b border-zinc-800 text-xs text-zinc-400 uppercase tracking-wider">{t('taskDetail')}</div>
           <div className="p-4 overflow-y-auto min-h-0 space-y-3 text-sm">
             {!selected ? (
@@ -135,38 +135,38 @@ const TaskAudit: React.FC = () => {
 
                 <div>
                   <div className="text-zinc-500 text-xs mb-1">{t('inputPreview')}</div>
-                  <div className="p-2 rounded bg-zinc-950/60 border border-zinc-800 whitespace-pre-wrap">{selected.input_preview || '-'}</div>
+                  <div className="p-2 rounded-xl bg-zinc-950/60 border border-zinc-800 whitespace-pre-wrap">{selected.input_preview || '-'}</div>
                 </div>
 
                 <div>
                   <div className="text-zinc-500 text-xs mb-1">{t('error')}</div>
-                  <div className="p-2 rounded bg-zinc-950/60 border border-zinc-800 whitespace-pre-wrap text-red-300">{selected.error || '-'}</div>
+                  <div className="p-2 rounded-xl bg-zinc-950/60 border border-zinc-800 whitespace-pre-wrap text-red-300">{selected.error || '-'}</div>
                 </div>
 
                 <div>
                   <div className="text-zinc-500 text-xs mb-1">{t('blockReason')}</div>
-                  <div className="p-2 rounded bg-zinc-950/60 border border-zinc-800 whitespace-pre-wrap text-amber-200">{selected.block_reason || '-'}</div>
+                  <div className="p-2 rounded-xl bg-zinc-950/60 border border-zinc-800 whitespace-pre-wrap text-amber-200">{selected.block_reason || '-'}</div>
                 </div>
 
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                   <div>
                     <div className="text-zinc-500 text-xs mb-1">{t('lastPauseReason')}</div>
-                    <div className="p-2 rounded bg-zinc-950/60 border border-zinc-800 whitespace-pre-wrap text-zinc-200">{selected.last_pause_reason || '-'}</div>
+                    <div className="p-2 rounded-xl bg-zinc-950/60 border border-zinc-800 whitespace-pre-wrap text-zinc-200">{selected.last_pause_reason || '-'}</div>
                   </div>
                   <div>
                     <div className="text-zinc-500 text-xs mb-1">{t('lastPauseAt')}</div>
-                    <div className="p-2 rounded bg-zinc-950/60 border border-zinc-800 whitespace-pre-wrap text-zinc-200">{formatLocalDateTime(selected.last_pause_at)}</div>
+                    <div className="p-2 rounded-xl bg-zinc-950/60 border border-zinc-800 whitespace-pre-wrap text-zinc-200">{formatLocalDateTime(selected.last_pause_at)}</div>
                   </div>
                 </div>
 
                 <div>
                   <div className="text-zinc-500 text-xs mb-1">{t('taskLogs')}</div>
-                  <div className="p-2 rounded bg-zinc-950/60 border border-zinc-800 whitespace-pre-wrap text-zinc-200">{Array.isArray(selected.logs) && selected.logs.length ? selected.logs.join('\n') : '-'}</div>
+                  <div className="p-2 rounded-xl bg-zinc-950/60 border border-zinc-800 whitespace-pre-wrap text-zinc-200">{Array.isArray(selected.logs) && selected.logs.length ? selected.logs.join('\n') : '-'}</div>
                 </div>
 
                 <div>
                   <div className="text-zinc-500 text-xs mb-1">{t('mediaSources')}</div>
-                  <div className="p-2 rounded bg-zinc-950/60 border border-zinc-800 text-xs">
+                  <div className="p-2 rounded-xl bg-zinc-950/60 border border-zinc-800 text-xs">
                     {Array.isArray(selected.media_items) && selected.media_items.length > 0 ? (
                       <div className="space-y-1">
                         {selected.media_items.map((m, i) => (
@@ -181,7 +181,7 @@ const TaskAudit: React.FC = () => {
 
                 <div>
                   <div className="text-zinc-500 text-xs mb-1">{t('rawJson')}</div>
-                  <pre className="p-2 rounded bg-zinc-950/60 border border-zinc-800 text-xs overflow-auto">{selectedPretty}</pre>
+                  <pre className="p-2 rounded-xl bg-zinc-950/60 border border-zinc-800 text-xs overflow-auto">{selectedPretty}</pre>
                 </div>
               </>
             )}