diff --git a/dashboard/src/App.css b/dashboard/src/App.css
index 64e9a774..5674a15f 100644
--- a/dashboard/src/App.css
+++ b/dashboard/src/App.css
@@ -3,6 +3,7 @@
 :root {
   --primary: #25d366;
   --primary-hover: #1da851;
+  --primary-soft: rgba(37, 211, 102, 0.12);
   --bg-light: #f8fafc;
   --bg-white: #ffffff;
   --bg-card: #ffffff;
@@ -19,6 +20,42 @@
   --radius: 10px;
 }
 
+[data-palette='blue'] {
+  --primary: #2563eb;
+  --primary-hover: #1d4ed8;
+  --primary-soft: rgba(37, 99, 235, 0.12);
+}
+
+[data-palette='graphite'] {
+  --primary: #64748b;
+  --primary-hover: #475569;
+  --primary-soft: rgba(100, 116, 139, 0.14);
+}
+
+[data-palette='indigo'] {
+  --primary: #4f46e5;
+  --primary-hover: #4338ca;
+  --primary-soft: rgba(79, 70, 229, 0.12);
+}
+
+[data-palette='amber'] {
+  --primary: #d97706;
+  --primary-hover: #b45309;
+  --primary-soft: rgba(217, 119, 6, 0.13);
+}
+
+[data-palette='rose'] {
+  --primary: #e11d48;
+  --primary-hover: #be123c;
+  --primary-soft: rgba(225, 29, 72, 0.12);
+}
+
+[data-palette='teal'] {
+  --primary: #0d9488;
+  --primary-hover: #0f766e;
+  --primary-soft: rgba(13, 148, 136, 0.12);
+}
+
 /* Dark Mode */
 [data-theme='dark'] {
   /* Make native controls (select option popups, scrollbars, date pickers) follow the EXPLICIT
@@ -32,6 +69,7 @@
   --text-secondary: #cbd5e1; /* Slate 300 */
   --text-muted: #64748b; /* Slate 500 */
   --border: #334155; /* Slate 700 */
+  --primary-soft: color-mix(in srgb, var(--primary) 18%, transparent);
   --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
   --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
   --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
@@ -56,6 +94,7 @@
     --text-secondary: #cbd5e1;
     --text-muted: #64748b;
     --border: #334155;
+    --primary-soft: color-mix(in srgb, var(--primary) 18%, transparent);
     --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
     --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
     --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
diff --git a/dashboard/src/components/Layout.css b/dashboard/src/components/Layout.css
index b54d046d..e145cbae 100644
--- a/dashboard/src/components/Layout.css
+++ b/dashboard/src/components/Layout.css
@@ -147,7 +147,7 @@
 }
 
 .nav-item.active {
-  background: rgba(37, 211, 102, 0.1);
+  background: var(--primary-soft);
   color: var(--primary);
 }
 
@@ -184,6 +184,28 @@
   overflow: hidden;
 }
 
+.appearance-button-cue {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  border-radius: 999px;
+  background:
+    radial-gradient(circle at 70% 25%, rgba(255, 255, 255, 0.8), transparent 24%),
+    var(--swatch-color);
+  color: white;
+  box-shadow:
+    0 0 0 2px var(--bg-white),
+    0 0 0 3px color-mix(in srgb, var(--swatch-color) 35%, transparent);
+}
+
+.appearance-button-cue svg {
+  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
+}
+
 .sidebar.collapsed .theme-toggle-btn,
 .sidebar.collapsed .logout-btn {
   justify-content: center;
@@ -195,11 +217,13 @@
   color: var(--text-primary);
 }
 
-.language-menu {
+.language-menu,
+.appearance-menu {
   position: relative;
 }
 
-.language-menu .theme-toggle-btn {
+.language-menu .theme-toggle-btn,
+.appearance-menu .theme-toggle-btn {
   width: 100%;
 }
 
@@ -243,7 +267,7 @@
 }
 
 .language-menu-item.active {
-  background: rgba(37, 211, 102, 0.1);
+  background: var(--primary-soft);
   color: var(--primary);
 }
 
@@ -253,6 +277,160 @@
   bottom: 0;
 }
 
+.appearance-menu-list {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: calc(100% + 0.35rem);
+  display: flex;
+  flex-direction: column;
+  gap: 0.85rem;
+  min-width: 254px;
+  padding: 0.85rem;
+  background: var(--bg-white);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
+  z-index: 120;
+}
+
+.appearance-menu-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.2rem 0.1rem 0.75rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.appearance-menu-header strong {
+  display: block;
+  color: var(--text-primary);
+  font-size: 0.9375rem;
+  line-height: 1.2;
+}
+
+.appearance-menu-header span {
+  display: block;
+  margin-top: 0.15rem;
+  color: var(--text-muted);
+  font-size: 0.75rem;
+}
+
+.appearance-current-swatch {
+  width: 34px;
+  height: 34px;
+  flex-shrink: 0;
+  border-radius: 999px;
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.65), transparent 42%),
+    var(--swatch-color);
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
+    0 0 0 4px color-mix(in srgb, var(--swatch-color) 13%, transparent);
+}
+
+.appearance-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.appearance-section-label {
+  font-size: 0.6875rem;
+  font-weight: 800;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.appearance-mode-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.35rem;
+}
+
+.appearance-mode {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  min-height: 58px;
+  padding: 0.45rem;
+  background: var(--bg-light);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  color: var(--text-secondary);
+  font-size: 0.75rem;
+}
+
+.appearance-mode:hover {
+  color: var(--text-primary);
+  border-color: var(--primary);
+  background: var(--bg-white);
+}
+
+.appearance-mode.active {
+  background: var(--primary-soft);
+  border-color: var(--primary);
+  color: var(--primary);
+  box-shadow: inset 0 -2px 0 var(--primary);
+}
+
+.palette-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0.45rem;
+}
+
+.palette-swatch {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--bg-light);
+}
+
+.palette-swatch span {
+  width: 20px;
+  height: 20px;
+  border-radius: 999px;
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.6), transparent 45%),
+    var(--swatch-color);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
+}
+
+.palette-swatch:hover,
+.palette-swatch.active {
+  border-color: var(--swatch-color);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--swatch-color) 18%, transparent);
+}
+
+.palette-swatch.active::after {
+  position: absolute;
+  right: -1px;
+  bottom: -1px;
+  width: 10px;
+  height: 10px;
+  border: 2px solid var(--bg-white);
+  border-radius: 999px;
+  background: var(--primary);
+  content: '';
+}
+
+.sidebar.collapsed .appearance-menu-list {
+  right: auto;
+  left: calc(100% + 0.5rem);
+  bottom: 0;
+}
+
 .logout-btn {
   display: flex;
   align-items: center;
@@ -419,6 +597,11 @@
   left: auto;
 }
 
+[dir="rtl"] .sidebar.collapsed .appearance-menu-list {
+  right: calc(100% + 0.5rem);
+  left: auto;
+}
+
 [dir="rtl"] .main-content {
   margin-left: 0;
   margin-right: 260px;
diff --git a/dashboard/src/components/Layout.tsx b/dashboard/src/components/Layout.tsx
index 458ab393..96afc5ac 100644
--- a/dashboard/src/components/Layout.tsx
+++ b/dashboard/src/components/Layout.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, type CSSProperties } from 'react';
 import { NavLink, Outlet } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import {
@@ -50,9 +50,10 @@ const themeIcons = { light: Sun, dark: Moon, system: Monitor };
 
 export function Layout({ onLogout, userRole }: LayoutProps) {
   const { t, i18n } = useTranslation();
-  const { theme, toggleTheme } = useTheme();
+  const { theme, setTheme, palette, setPalette, paletteOptions } = useTheme();
   const ThemeIcon = themeIcons[theme];
   const themeLabel = t(`theme.${theme}`);
+  const activePalette = paletteOptions.find(option => option.value === palette) ?? paletteOptions[0];
 
   const navItems = allNavItems.filter(item => !item.adminOnly || userRole === 'admin');
 
@@ -60,7 +61,9 @@ export function Layout({ onLogout, userRole }: LayoutProps) {
   const [isMobileOpen, setIsMobileOpen] = useState(false);
   const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
   const [isLanguageMenuOpen, setIsLanguageMenuOpen] = useState(false);
+  const [isAppearanceMenuOpen, setIsAppearanceMenuOpen] = useState(false);
   const languageMenuRef = useRef<HTMLDivElement>(null);
+  const appearanceMenuRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     const handleResize = () => {
@@ -103,6 +106,26 @@ export function Layout({ onLogout, userRole }: LayoutProps) {
     };
   }, [isLanguageMenuOpen]);
 
+  useEffect(() => {
+    if (!isAppearanceMenuOpen) return;
+
+    const closeOnOutsideClick = (event: MouseEvent) => {
+      if (!appearanceMenuRef.current?.contains(event.target as Node)) {
+        setIsAppearanceMenuOpen(false);
+      }
+    };
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setIsAppearanceMenuOpen(false);
+    };
+
+    document.addEventListener('mousedown', closeOnOutsideClick);
+    document.addEventListener('keydown', closeOnEscape);
+    return () => {
+      document.removeEventListener('mousedown', closeOnOutsideClick);
+      document.removeEventListener('keydown', closeOnEscape);
+    };
+  }, [isAppearanceMenuOpen]);
+
   const toggleCollapse = () => setIsCollapsed(!isCollapsed);
   const toggleMobile = () => setIsMobileOpen(!isMobileOpen);
 
@@ -205,14 +228,80 @@ export function Layout({ onLogout, userRole }: LayoutProps) {
               </div>
             )}
           </div>
-          <button
-            className="theme-toggle-btn"
-            onClick={toggleTheme}
-            title={t('theme.label', { value: themeLabel })}
-          >
-            <ThemeIcon size={18} />
-            {!isCollapsed && <span>{themeLabel}</span>}
-          </button>
+          <div className="appearance-menu" ref={appearanceMenuRef}>
+            <button
+              className="theme-toggle-btn"
+              onClick={() => setIsAppearanceMenuOpen(open => !open)}
+              title={t('theme.label', { value: themeLabel })}
+              aria-label={t('theme.appearance')}
+              aria-haspopup="menu"
+              aria-expanded={isAppearanceMenuOpen}
+            >
+              <span
+                className="appearance-button-cue"
+                style={{ '--swatch-color': activePalette.color } as CSSProperties}
+                aria-hidden="true"
+              >
+                <ThemeIcon size={14} />
+              </span>
+              {!isCollapsed && <span>{themeLabel}</span>}
+            </button>
+            {isAppearanceMenuOpen && (
+              <div className="appearance-menu-list" role="menu" aria-label={t('theme.appearance')}>
+                <div className="appearance-menu-header">
+                  <div>
+                    <strong>{t('theme.appearance')}</strong>
+                    <span>{activePalette.label}</span>
+                  </div>
+                  <span
+                    className="appearance-current-swatch"
+                    style={{ '--swatch-color': activePalette.color } as CSSProperties}
+                    aria-hidden="true"
+                  />
+                </div>
+                <div className="appearance-section">
+                  <span className="appearance-section-label">{t('theme.mode')}</span>
+                  <div className="appearance-mode-grid">
+                    {(['light', 'dark', 'system'] as const).map(mode => {
+                      const ModeIcon = themeIcons[mode];
+                      return (
+                        <button
+                          key={mode}
+                          className={`appearance-mode ${theme === mode ? 'active' : ''}`}
+                          onClick={() => setTheme(mode)}
+                          type="button"
+                          role="menuitemradio"
+                          aria-checked={theme === mode}
+                        >
+                          <ModeIcon size={16} />
+                          <span>{t(`theme.${mode}`)}</span>
+                        </button>
+                      );
+                    })}
+                  </div>
+                </div>
+                <div className="appearance-section">
+                  <span className="appearance-section-label">{t('theme.palette')}</span>
+                  <div className="palette-grid">
+                    {paletteOptions.map(option => (
+                      <button
+                        key={option.value}
+                        className={`palette-swatch ${palette === option.value ? 'active' : ''}`}
+                        onClick={() => setPalette(option.value)}
+                        type="button"
+                        title={option.label}
+                        role="menuitemradio"
+                        aria-checked={palette === option.value}
+                        style={{ '--swatch-color': option.color } as CSSProperties}
+                      >
+                        <span />
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
           <button className="logout-btn" onClick={onLogout} title={isCollapsed ? t('common.logout') : undefined}>
             <LogOut size={20} />
             {!isCollapsed && <span>{t('common.logout')}</span>}
diff --git a/dashboard/src/hooks/useTheme.ts b/dashboard/src/hooks/useTheme.ts
index 1d537dcf..476e355a 100644
--- a/dashboard/src/hooks/useTheme.ts
+++ b/dashboard/src/hooks/useTheme.ts
@@ -1,13 +1,37 @@
 import { useState, useEffect, useCallback } from 'react';
 
-type Theme = 'light' | 'dark' | 'system';
+export type Theme = 'light' | 'dark' | 'system';
+export type ThemePalette = 'openwa' | 'blue' | 'graphite' | 'indigo' | 'amber' | 'rose' | 'teal';
 
 const THEME_KEY = 'openwa_theme';
+const PALETTE_KEY = 'openwa_palette';
+
+export const paletteOptions: Array<{ value: ThemePalette; label: string; color: string }> = [
+  { value: 'openwa', label: 'OpenWA', color: '#25d366' },
+  { value: 'blue', label: 'Blue', color: '#2563eb' },
+  { value: 'graphite', label: 'Graphite', color: '#64748b' },
+  { value: 'indigo', label: 'Indigo', color: '#4f46e5' },
+  { value: 'amber', label: 'Amber', color: '#d97706' },
+  { value: 'rose', label: 'Rose', color: '#e11d48' },
+  { value: 'teal', label: 'Teal', color: '#0d9488' },
+];
+
+function isTheme(value: string | null): value is Theme {
+  return value === 'light' || value === 'dark' || value === 'system';
+}
+
+function isPalette(value: string | null): value is ThemePalette {
+  return paletteOptions.some(option => option.value === value);
+}
 
 export function useTheme() {
   const [theme, setThemeState] = useState<Theme>(() => {
-    const saved = localStorage.getItem(THEME_KEY) as Theme | null;
-    return saved || 'system';
+    const saved = localStorage.getItem(THEME_KEY);
+    return isTheme(saved) ? saved : 'system';
+  });
+  const [palette, setPaletteState] = useState<ThemePalette>(() => {
+    const saved = localStorage.getItem(PALETTE_KEY);
+    return isPalette(saved) ? saved : 'openwa';
   });
 
   const applyTheme = useCallback((newTheme: Theme) => {
@@ -21,15 +45,28 @@ export function useTheme() {
     }
   }, []);
 
+  const applyPalette = useCallback((newPalette: ThemePalette) => {
+    document.documentElement.setAttribute('data-palette', newPalette);
+  }, []);
+
   useEffect(() => {
     applyTheme(theme);
     localStorage.setItem(THEME_KEY, theme);
   }, [theme, applyTheme]);
 
+  useEffect(() => {
+    applyPalette(palette);
+    localStorage.setItem(PALETTE_KEY, palette);
+  }, [palette, applyPalette]);
+
   const setTheme = useCallback((newTheme: Theme) => {
     setThemeState(newTheme);
   }, []);
 
+  const setPalette = useCallback((newPalette: ThemePalette) => {
+    setPaletteState(newPalette);
+  }, []);
+
   const toggleTheme = useCallback(() => {
     setThemeState(prev => {
       if (prev === 'light') return 'dark';
@@ -42,5 +79,5 @@ export function useTheme() {
   const resolvedTheme =
     theme === 'system' ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') : theme;
 
-  return { theme, setTheme, toggleTheme, resolvedTheme };
+  return { theme, setTheme, toggleTheme, resolvedTheme, palette, setPalette, paletteOptions };
 }
diff --git a/dashboard/src/i18n/locales/ar.json b/dashboard/src/i18n/locales/ar.json
index 5aaae46b..0b4bfdd3 100644
--- a/dashboard/src/i18n/locales/ar.json
+++ b/dashboard/src/i18n/locales/ar.json
@@ -53,7 +53,10 @@
     "light": "فاتح",
     "dark": "داكن",
     "system": "النظام",
-    "label": "المظهر: {{value}}"
+    "label": "المظهر: {{value}}",
+    "appearance": "المظهر",
+    "mode": "الوضع",
+    "palette": "لوحة الألوان"
   },
   "nav": {
     "dashboard": "لوحة التحكم",
@@ -616,4 +619,4 @@
       "saveFailed": "فشل الحفظ"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/dashboard/src/i18n/locales/en.json b/dashboard/src/i18n/locales/en.json
index c7a36f37..7158da66 100644
--- a/dashboard/src/i18n/locales/en.json
+++ b/dashboard/src/i18n/locales/en.json
@@ -53,7 +53,10 @@
     "light": "Light",
     "dark": "Dark",
     "system": "System",
-    "label": "Theme: {{value}}"
+    "label": "Theme: {{value}}",
+    "appearance": "Appearance",
+    "mode": "Mode",
+    "palette": "Palette"
   },
   "nav": {
     "dashboard": "Dashboard",
diff --git a/dashboard/src/i18n/locales/es.json b/dashboard/src/i18n/locales/es.json
index b885ca5f..43d0dcc2 100644
--- a/dashboard/src/i18n/locales/es.json
+++ b/dashboard/src/i18n/locales/es.json
@@ -53,7 +53,10 @@
     "light": "Claro",
     "dark": "Oscuro",
     "system": "Sistema",
-    "label": "Tema: {{value}}"
+    "label": "Tema: {{value}}",
+    "appearance": "Apariencia",
+    "mode": "Modo",
+    "palette": "Paleta"
   },
   "nav": {
     "dashboard": "Panel",
@@ -616,4 +619,4 @@
       "saveFailed": "Error al guardar"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/dashboard/src/i18n/locales/fr.json b/dashboard/src/i18n/locales/fr.json
index e8d82293..61e96a54 100644
--- a/dashboard/src/i18n/locales/fr.json
+++ b/dashboard/src/i18n/locales/fr.json
@@ -53,7 +53,10 @@
     "light": "Clair",
     "dark": "Sombre",
     "system": "Système",
-    "label": "Thème : {{value}}"
+    "label": "Thème : {{value}}",
+    "appearance": "Apparence",
+    "mode": "Mode",
+    "palette": "Palette"
   },
   "nav": {
     "dashboard": "Tableau de bord",
@@ -616,4 +619,4 @@
       "saveFailed": "Échec de l'enregistrement"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/dashboard/src/i18n/locales/he.json b/dashboard/src/i18n/locales/he.json
index 2ada3b55..641b4653 100644
--- a/dashboard/src/i18n/locales/he.json
+++ b/dashboard/src/i18n/locales/he.json
@@ -53,7 +53,10 @@
     "light": "בהיר",
     "dark": "כהה",
     "system": "מערכת",
-    "label": "ערכת נושא: {{value}}"
+    "label": "ערכת נושא: {{value}}",
+    "appearance": "מראה",
+    "mode": "מצב",
+    "palette": "לוח צבעים"
   },
   "nav": {
     "dashboard": "דאשבורד",
@@ -616,4 +619,4 @@
       "saveFailed": "השמירה נכשלה"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/dashboard/src/i18n/locales/it.json b/dashboard/src/i18n/locales/it.json
index 05b6f192..647ba418 100644
--- a/dashboard/src/i18n/locales/it.json
+++ b/dashboard/src/i18n/locales/it.json
@@ -53,7 +53,10 @@
     "light": "Chiaro",
     "dark": "Scuro",
     "system": "Sistema",
-    "label": "Tema: {{value}}"
+    "label": "Tema: {{value}}",
+    "appearance": "Aspetto",
+    "mode": "Modalità",
+    "palette": "Tavolozza"
   },
   "nav": {
     "dashboard": "Dashboard",
@@ -616,4 +619,4 @@
       "saveFailed": "Salvataggio non riuscito"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/dashboard/src/i18n/locales/te.json b/dashboard/src/i18n/locales/te.json
index 9c4ebe91..1608f563 100644
--- a/dashboard/src/i18n/locales/te.json
+++ b/dashboard/src/i18n/locales/te.json
@@ -53,7 +53,10 @@
     "light": "లైట్",
     "dark": "డార్క్",
     "system": "సిస్టమ్",
-    "label": "థీమ్: {{value}}"
+    "label": "థీమ్: {{value}}",
+    "appearance": "రూపం",
+    "mode": "మోడ్",
+    "palette": "రంగుల పలక"
   },
   "nav": {
     "dashboard": "డ్యాష్‌బోర్డ్",
@@ -616,4 +619,4 @@
       "saveFailed": "సేవ్ చేయడం విఫలమైంది"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/dashboard/src/i18n/locales/zh-CN.json b/dashboard/src/i18n/locales/zh-CN.json
index a0de1dde..90cb54dd 100644
--- a/dashboard/src/i18n/locales/zh-CN.json
+++ b/dashboard/src/i18n/locales/zh-CN.json
@@ -53,7 +53,10 @@
     "light": "浅色",
     "dark": "深色",
     "system": "跟随系统",
-    "label": "主题：{{value}}"
+    "label": "主题：{{value}}",
+    "appearance": "外观",
+    "mode": "模式",
+    "palette": "调色板"
   },
   "nav": {
     "dashboard": "仪表盘",
@@ -616,4 +619,4 @@
       "saveFailed": "保存失败"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/dashboard/src/i18n/locales/zh-HK.json b/dashboard/src/i18n/locales/zh-HK.json
index cd176394..12401fb5 100644
--- a/dashboard/src/i18n/locales/zh-HK.json
+++ b/dashboard/src/i18n/locales/zh-HK.json
@@ -53,7 +53,10 @@
     "light": "淺色",
     "dark": "深色",
     "system": "跟隨系統",
-    "label": "主題：{{value}}"
+    "label": "主題：{{value}}",
+    "appearance": "外觀",
+    "mode": "模式",
+    "palette": "調色板"
   },
   "nav": {
     "dashboard": "控制面板",
@@ -616,4 +619,4 @@
       "saveFailed": "儲存失敗"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/dashboard/src/pages/Chats.tsx b/dashboard/src/pages/Chats.tsx
index 49a1e8f1..32387bb1 100644
--- a/dashboard/src/pages/Chats.tsx
+++ b/dashboard/src/pages/Chats.tsx
@@ -95,7 +95,7 @@ export function Chats() {
   const { t } = useTranslation();
   useDocumentTitle(t('nav.chats'));
   const { canWrite } = useRole();
-  const toast = useToast();
+  const { error: showErrorToast, warning: showWarningToast } = useToast();
 
   // Sessions list & active session
   const [sessions, setSessions] = useState<Session[]>([]);
@@ -144,13 +144,13 @@ export function Chats() {
           setSelectedSessionId(readySessions[0].id);
         }
       } catch (err) {
-        toast.error(t('chats.errors.loadSessions'), err instanceof Error ? err.message : undefined);
+        showErrorToast(t('chats.errors.loadSessions'), err instanceof Error ? err.message : undefined);
       } finally {
         setLoadingSessions(false);
       }
     };
     void loadSessions();
-  }, [t, toast]);
+  }, [t, showErrorToast]);
 
   // 2. Fetch chats when active session changes
   const loadChats = useCallback(
@@ -162,13 +162,13 @@ export function Chats() {
         const sorted = [...data].sort((a, b) => (b.timestamp || 0) - (a.timestamp || 0));
         setChats(sorted);
       } catch (err) {
-        toast.error(t('chats.errors.loadChats'), err instanceof Error ? err.message : undefined);
+        showErrorToast(t('chats.errors.loadChats'), err instanceof Error ? err.message : undefined);
         setChats([]);
       } finally {
         setLoadingChats(false);
       }
     },
-    [t, toast],
+    [t, showErrorToast],
   );
 
   useEffect(() => {
@@ -184,10 +184,10 @@ export function Chats() {
   const markChatRead = useCallback(
     (chatId: string) => {
       void sessionApi.markChatRead(selectedSessionId, chatId).catch(err => {
-        toast.warning(t('chats.errors.markRead'), err instanceof Error ? err.message : undefined);
+        showWarningToast(t('chats.errors.markRead'), err instanceof Error ? err.message : undefined);
       });
     },
-    [selectedSessionId, t, toast],
+    [selectedSessionId, t, showWarningToast],
   );
 
   // 3. WebSocket integration for real-time messages
@@ -336,13 +336,13 @@ export function Chats() {
         const data = await sessionApi.getChatMessages(selectedSessionId, chatId, 100);
         setMessages([...data.messages].reverse());
       } catch (err) {
-        toast.error(t('chats.errors.loadMessages'), err instanceof Error ? err.message : undefined);
+        showErrorToast(t('chats.errors.loadMessages'), err instanceof Error ? err.message : undefined);
         setMessages([]);
       } finally {
         setLoadingMessages(false);
       }
     },
-    [selectedSessionId, markChatRead, t, toast],
+    [selectedSessionId, markChatRead, t, showErrorToast],
   );
 
   const handleReactMessage = async (msg: ChatMessageView, emoji: string) => {
@@ -385,7 +385,7 @@ export function Chats() {
         }),
       );
     } catch (err) {
-      toast.error(t('chats.errors.react'), err instanceof Error ? err.message : undefined);
+      showErrorToast(t('chats.errors.react'), err instanceof Error ? err.message : undefined);
     }
   };
 
@@ -411,7 +411,7 @@ export function Chats() {
         }),
       );
     } catch (err) {
-      toast.error(t('chats.errors.delete'), err instanceof Error ? err.message : undefined);
+      showErrorToast(t('chats.errors.delete'), err instanceof Error ? err.message : undefined);
     }
   };
 
@@ -572,7 +572,7 @@ export function Chats() {
         return updatedChats;
       });
     } catch (err) {
-      toast.error(t('chats.errors.send'), err instanceof Error ? err.message : undefined);
+      showErrorToast(t('chats.errors.send'), err instanceof Error ? err.message : undefined);
       setMessages(prev => prev.map(m => (m.id === tempId ? { ...m, status: 'failed' } : m)));
     } finally {
       setSending(false);
diff --git a/dashboard/src/pages/Templates.css b/dashboard/src/pages/Templates.css
index 1aa548af..594e7dbc 100644
--- a/dashboard/src/pages/Templates.css
+++ b/dashboard/src/pages/Templates.css
@@ -1,6 +1,6 @@
 .templates-page {
-  padding: 2rem;
   width: 100%;
+  padding: 2rem;
   overflow-x: hidden;
 }
 
@@ -21,60 +21,184 @@
   min-width: 240px;
 }
 
-.templates-grid {
+.templates-workspace {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 340px;
-  gap: 1.5rem;
-  align-items: start;
-}
-
-.template-editor,
-.template-preview,
-.templates-list {
-  background: var(--bg-white);
+  grid-template-columns: minmax(260px, 320px) minmax(420px, 1fr) minmax(280px, 360px);
+  min-height: calc(100vh - 180px);
   border: 1px solid var(--border);
   border-radius: 8px;
+  background: var(--bg-white);
   box-shadow: var(--shadow-sm);
+  overflow: hidden;
 }
 
-.template-editor {
-  overflow: hidden;
+.templates-library,
+.template-editor,
+.template-preview {
+  min-width: 0;
+  min-height: 0;
+}
+
+.templates-library {
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--border);
+  background: var(--bg-light);
 }
 
+.templates-library-header,
 .template-editor-header,
-.templates-list-header {
+.template-preview-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
-  padding: 1.25rem 1.5rem;
+  min-height: 74px;
+  padding: 1rem;
   border-bottom: 1px solid var(--border);
-  background: var(--bg-light);
 }
 
+.templates-library-header h2,
 .template-editor-header h2,
-.template-preview h2,
-.templates-list-header h2 {
-  font-size: 0.8125rem;
-  font-weight: 700;
+.template-preview-header h2 {
+  margin: 0;
   color: var(--text-secondary);
+  font-size: 0.75rem;
+  font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
 
+.templates-library-header span,
 .template-editor-header p,
-.template-muted,
-.templates-list-header span {
-  margin: 0.25rem 0 0;
+.template-preview-header span {
+  display: block;
+  margin-top: 0.25rem;
+  color: var(--text-muted);
+  font-size: 0.8125rem;
+}
+
+.template-editor-header p {
+  margin-bottom: 0;
+}
+
+.templates-new-btn {
+  min-height: 36px;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8125rem;
+  white-space: nowrap;
+}
+
+.templates-search {
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr);
+  align-items: center;
+  gap: 0.5rem;
+  margin: 1rem;
+  padding: 0.625rem 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg-white);
+  color: var(--text-muted);
+}
+
+.templates-search input {
+  width: 100%;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: var(--text-primary);
   font-size: 0.875rem;
+}
+
+.template-list {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow-y: auto;
+  padding: 0 0.5rem 1rem;
+}
+
+.template-list-item {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.375rem;
+  width: 100%;
+  padding: 0.875rem;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+}
+
+.template-list-item:hover {
+  border-color: var(--border);
+  background: var(--bg-white);
+}
+
+.template-list-item.selected {
+  border-color: var(--primary);
+  background: var(--primary-soft);
+}
+
+.template-list-title {
+  overflow: hidden;
+  color: var(--text-primary);
+  font-size: 0.9375rem;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.template-list-body {
+  display: -webkit-box;
+  overflow: hidden;
   color: var(--text-secondary);
+  font-size: 0.8125rem;
+  line-height: 1.45;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.template-list-meta {
+  overflow: hidden;
+  color: var(--text-muted);
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-size: 0.6875rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.template-editor {
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-white);
+}
+
+.template-header-actions,
+.template-editor-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
 .template-form {
   display: flex;
+  flex: 1;
   flex-direction: column;
   gap: 1rem;
-  padding: 1.5rem;
+  padding: 1.25rem;
+  overflow-y: auto;
+}
+
+.template-message-fields {
+  display: grid;
+  grid-template-rows: auto minmax(240px, 1fr) auto;
+  gap: 1rem;
+  flex: 1;
 }
 
 .template-form .form-group {
@@ -85,27 +209,33 @@
 
 .template-form label,
 .placeholder-list label > span {
-  font-size: 0.875rem;
-  font-weight: 600;
   color: var(--text-secondary);
+  font-size: 0.8125rem;
+  font-weight: 700;
 }
 
 .template-form input,
 .template-form textarea,
 .placeholder-list input {
   width: 100%;
-  padding: 0.875rem 1rem;
   border: 1px solid var(--border);
   border-radius: 8px;
   background: var(--bg-light);
   color: var(--text-primary);
   font-size: 0.9375rem;
-  resize: vertical;
+}
+
+.template-form input,
+.placeholder-list input {
+  padding: 0.8125rem 0.875rem;
 }
 
 .template-form textarea {
-  min-height: 180px;
-  line-height: 1.5;
+  flex: 1;
+  min-height: 240px;
+  padding: 0.875rem;
+  line-height: 1.55;
+  resize: vertical;
 }
 
 .template-form input:focus,
@@ -114,81 +244,116 @@
   outline: none;
   border-color: var(--primary);
   background: var(--bg-white);
-  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.1);
+  box-shadow: 0 0 0 3px var(--primary-soft);
+}
+
+.body-field {
+  min-height: 0;
 }
 
 .template-editor-actions {
-  display: flex;
   justify-content: flex-end;
-  gap: 0.75rem;
+  padding-top: 0.25rem;
 }
 
 .template-preview {
-  padding: 1.25rem;
-  position: sticky;
-  top: 1rem;
-}
-
-.placeholder-list {
   display: flex;
   flex-direction: column;
-  gap: 0.875rem;
-  margin-top: 1rem;
+  border-left: 1px solid var(--border);
+  background: var(--bg-light);
 }
 
-.placeholder-list label {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
+.template-preview-header span {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  min-height: 24px;
+  margin: 0;
+  border: 1px solid var(--primary);
+  border-radius: 999px;
+  background: var(--primary-soft);
+  color: var(--primary);
+  font-size: 0.75rem;
+  font-weight: 700;
 }
 
-.placeholder-list label > span {
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-  color: var(--primary);
+.template-preview-message {
+  padding: 1rem;
 }
 
-.template-preview-box {
-  margin: 1rem 0 0;
-  min-height: 180px;
+.template-preview-message pre {
+  min-height: 220px;
   max-height: 360px;
+  margin: 0;
   overflow: auto;
   padding: 1rem;
   border: 1px solid var(--border);
   border-radius: 8px;
-  background: var(--bg-light);
+  background: var(--bg-white);
   color: var(--text-primary);
-  white-space: pre-wrap;
-  word-break: break-word;
   font-family: 'JetBrains Mono', ui-monospace, monospace;
   font-size: 0.875rem;
   line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
 }
 
-.templates-list {
-  grid-column: 1 / -1;
-  overflow: hidden;
+.template-variable-panel {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 1rem 1rem;
+}
+
+.placeholder-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.875rem;
+}
+
+.placeholder-list label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.placeholder-list label > span {
+  color: var(--primary);
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+}
+
+.template-muted {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+  line-height: 1.5;
 }
 
 .templates-loading-inline,
 .templates-empty-list,
 .templates-empty-page {
-  min-height: 240px;
+  min-height: 220px;
   flex-direction: column;
   gap: 0.75rem;
-  padding: 2rem;
-  text-align: center;
+  padding: 1.5rem;
   color: var(--text-muted);
+  text-align: center;
+}
+
+.templates-empty-list.compact {
+  min-height: 140px;
 }
 
 .templates-empty-page {
-  background: var(--bg-white);
   border: 1px solid var(--border);
   border-radius: 8px;
+  background: var(--bg-white);
   box-shadow: var(--shadow-sm);
 }
 
 .templates-empty-list h3,
 .templates-empty-page h3 {
+  margin: 0;
   color: var(--text-secondary);
 }
 
@@ -197,76 +362,7 @@
   max-width: 340px;
   margin: 0;
   color: var(--text-secondary);
-}
-
-.template-card-list {
-  display: flex;
-  flex-direction: column;
-}
-
-.template-card {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 1rem;
-  padding: 1.25rem 1.5rem;
-  border-top: 1px solid var(--border);
-}
-
-.template-card:first-child {
-  border-top: 0;
-}
-
-.template-card-main {
-  min-width: 0;
-}
-
-.template-card-title-row {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  min-width: 0;
-}
-
-.template-card-title-row h3 {
-  margin: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.template-card p {
-  margin: 0.5rem 0 0;
-  color: var(--text-secondary);
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.template-placeholder-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.375rem;
-  margin-top: 0.875rem;
-}
-
-.template-placeholder-tags span {
-  padding: 0.25rem 0.5rem;
-  border: 1px solid rgba(37, 211, 102, 0.25);
-  border-radius: 6px;
-  background: rgba(37, 211, 102, 0.12);
-  color: var(--primary);
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-  font-size: 0.75rem;
-  font-weight: 600;
-}
-
-.template-card-actions {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.375rem;
+  font-size: 0.875rem;
 }
 
 .icon-btn {
@@ -276,9 +372,9 @@
   width: 36px;
   height: 36px;
   padding: 0;
-  background: transparent;
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: 8px;
+  background: var(--bg-white);
   color: var(--text-secondary);
 }
 
@@ -288,8 +384,8 @@
 }
 
 .icon-btn.danger:hover {
-  background: #fee2e2;
   border-color: #fecaca;
+  background: #fee2e2;
   color: #dc2626;
 }
 
@@ -298,10 +394,10 @@
   align-items: center;
   gap: 0.5rem;
   padding: 0.75rem 1.25rem;
-  background: #dc2626;
-  color: white;
   border: none;
   border-radius: var(--radius);
+  background: #dc2626;
+  color: white;
   font-size: 0.9375rem;
   font-weight: 600;
 }
@@ -314,26 +410,26 @@
   position: fixed;
   top: 1.5rem;
   right: 1.5rem;
+  z-index: 1000;
   display: flex;
   align-items: center;
   gap: 0.75rem;
   padding: 1rem 1.25rem;
   border-radius: 8px;
+  box-shadow: var(--shadow-lg);
   font-size: 0.875rem;
   font-weight: 500;
-  box-shadow: var(--shadow-lg);
-  z-index: 1000;
 }
 
 .toast.success {
-  background: #ecfdf5;
   border: 1px solid #a7f3d0;
+  background: #ecfdf5;
   color: #047857;
 }
 
 .toast.error {
-  background: #fef2f2;
   border: 1px solid #fecaca;
+  background: #fef2f2;
   color: #dc2626;
 }
 
@@ -344,8 +440,8 @@
   width: 28px;
   height: 28px;
   padding: 0;
-  background: transparent;
   border: 0;
+  background: transparent;
   color: inherit;
   opacity: 0.7;
 }
@@ -354,17 +450,29 @@
   opacity: 1;
 }
 
-@media (max-width: 1100px) {
-  .templates-grid {
-    grid-template-columns: 1fr;
+@media (max-width: 1280px) {
+  .templates-workspace {
+    grid-template-columns: 280px minmax(380px, 1fr);
   }
 
   .template-preview {
-    position: static;
+    grid-column: 1 / -1;
+    display: grid;
+    grid-template-columns: 1fr 320px;
+    border-top: 1px solid var(--border);
+    border-left: 0;
+  }
+
+  .template-preview-header {
+    grid-column: 1 / -1;
+  }
+
+  .template-variable-panel {
+    padding-top: 1rem;
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 900px) {
   .templates-page {
     padding: 1rem;
   }
@@ -374,27 +482,44 @@
     width: 100%;
   }
 
+  .templates-workspace {
+    display: flex;
+    flex-direction: column;
+    min-height: auto;
+  }
+
+  .templates-library {
+    max-height: 360px;
+    border-right: 0;
+    border-bottom: 1px solid var(--border);
+  }
+
   .template-editor-header,
-  .templates-list-header,
-  .template-card {
-    padding: 1rem;
+  .templates-library-header,
+  .template-preview-header {
+    min-height: auto;
   }
 
-  .template-form {
-    padding: 1rem;
+  .template-preview {
+    display: flex;
   }
+}
 
+@media (max-width: 640px) {
+  .templates-library-header,
   .template-editor-header,
   .template-editor-actions {
     flex-direction: column;
     align-items: stretch;
   }
 
-  .template-card {
-    grid-template-columns: 1fr;
+  .template-header-actions {
+    justify-content: flex-end;
   }
 
-  .template-card-actions {
-    justify-content: flex-end;
+  .template-form,
+  .template-preview-message,
+  .template-variable-panel {
+    padding: 1rem;
   }
 }
diff --git a/dashboard/src/pages/Templates.tsx b/dashboard/src/pages/Templates.tsx
index e5922513..f4347084 100644
--- a/dashboard/src/pages/Templates.tsx
+++ b/dashboard/src/pages/Templates.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { AlertTriangle, Check, Copy, Edit, FileText, Loader2, Plus, Trash2, X } from 'lucide-react';
+import { AlertTriangle, Check, Copy, FileText, Loader2, Plus, Search, Trash2, X } from 'lucide-react';
 import { type MessageTemplate, type TemplatePayload } from '../services/api';
 import { useDocumentTitle } from '../hooks/useDocumentTitle';
 import { useRole } from '../hooks/useRole';
@@ -61,6 +61,7 @@ export function Templates() {
   const [deleteTarget, setDeleteTarget] = useState<MessageTemplate | null>(null);
   const [toast, setToast] = useState<{ type: 'success' | 'error'; message: string } | null>(null);
   const [previewValues, setPreviewValues] = useState<Record<string, string>>({});
+  const [searchTerm, setSearchTerm] = useState('');
 
   const { data: templates = [], isLoading: loadingTemplates } = useTemplatesQuery(selectedSessionId, !!selectedSessionId);
   const createMutation = useCreateTemplateMutation();
@@ -70,6 +71,15 @@ export function Templates() {
   const selectedSession = sessions.find(session => session.id === selectedSessionId);
   const placeholders = useMemo(() => extractPlaceholders(form), [form]);
   const preview = useMemo(() => renderPreview(form, previewValues), [form, previewValues]);
+  const filteredTemplates = useMemo(() => {
+    const query = searchTerm.trim().toLowerCase();
+    if (!query) return templates;
+    return templates.filter(template =>
+      [template.name, template.header, template.body, template.footer]
+        .filter(Boolean)
+        .some(value => value!.toLowerCase().includes(query)),
+    );
+  }, [searchTerm, templates]);
   const isSaving = createMutation.isPending || updateMutation.isPending;
 
   useEffect(() => {
@@ -212,18 +222,97 @@ export function Templates() {
           <p>{t('templates.empty.noSessionsDesc')}</p>
         </div>
       ) : (
-        <div className="templates-grid">
+        <div className="templates-workspace">
+          <aside className="templates-library">
+            <div className="templates-library-header">
+              <div>
+                <h2>{t('templates.savedTitle')}</h2>
+                <span>{t('templates.count', { count: templates.length })}</span>
+              </div>
+              <button className="btn-primary templates-new-btn" onClick={resetForm} disabled={!canWrite}>
+                <Plus size={16} />
+                {t('templates.newTemplate')}
+              </button>
+            </div>
+
+            <div className="templates-search">
+              <Search size={16} />
+              <input
+                value={searchTerm}
+                onChange={event => setSearchTerm(event.target.value)}
+                placeholder={t('common.search')}
+              />
+            </div>
+
+            {loadingTemplates ? (
+              <div className="templates-loading-inline">
+                <Loader2 className="animate-spin" size={24} />
+              </div>
+            ) : templates.length === 0 ? (
+              <div className="templates-empty-list">
+                <FileText size={40} strokeWidth={1} />
+                <h3>{t('templates.empty.title')}</h3>
+                <p>{t('templates.empty.description')}</p>
+              </div>
+            ) : filteredTemplates.length === 0 ? (
+              <div className="templates-empty-list compact">
+                <Search size={32} strokeWidth={1.5} />
+                <h3>{t('templates.empty.title')}</h3>
+              </div>
+            ) : (
+              <div className="template-list" role="list">
+                {filteredTemplates.map(template => {
+                  const templatePlaceholders = extractPlaceholders(template);
+                  const isSelected = editingTemplate?.id === template.id;
+                  return (
+                    <button
+                      key={template.id}
+                      className={`template-list-item ${isSelected ? 'selected' : ''}`}
+                      onClick={() => openEdit(template)}
+                      type="button"
+                    >
+                      <span className="template-list-title">{template.name}</span>
+                      <span className="template-list-body">{template.body}</span>
+                      <span className="template-list-meta">
+                        {templatePlaceholders.length > 0
+                          ? templatePlaceholders.map(key => `{{${key}}}`).join(' ')
+                          : t('templates.noPlaceholders')}
+                      </span>
+                    </button>
+                  );
+                })}
+              </div>
+            )}
+          </aside>
+
           <section className="template-editor">
             <div className="template-editor-header">
               <div>
                 <h2>{editingTemplate ? t('templates.editTitle') : t('templates.createTitle')}</h2>
                 <p>{selectedSession ? t('templates.sessionHint', { name: selectedSession.name }) : ''}</p>
               </div>
-              {editingTemplate && (
-                <button className="btn-secondary" onClick={resetForm}>
-                  {t('templates.newTemplate')}
-                </button>
-              )}
+              <div className="template-header-actions">
+                {editingTemplate && (
+                  <button
+                    className="icon-btn"
+                    title={t('templates.actions.copyName')}
+                    onClick={() => void copyName(editingTemplate.name)}
+                    type="button"
+                  >
+                    <Copy size={16} />
+                  </button>
+                )}
+                {editingTemplate && canWrite && (
+                  <button
+                    className="icon-btn danger"
+                    title={t('common.delete')}
+                    onClick={() => setDeleteTarget(editingTemplate)}
+                    type="button"
+                  >
+                    <Trash2 size={16} />
+                  </button>
+                )}
+              </div>
             </div>
 
             <div className="template-form">
@@ -237,45 +326,48 @@ export function Templates() {
                 />
               </div>
 
-              <div className="form-group">
-                <label>{t('templates.header')}</label>
-                <input
-                  value={form.header}
-                  onChange={event => setForm({ ...form, header: event.target.value })}
-                  placeholder={t('templates.headerPlaceholder')}
-                  disabled={!canWrite}
-                />
-              </div>
+              <div className="template-message-fields">
+                <div className="form-group">
+                  <label>{t('templates.header')}</label>
+                  <input
+                    value={form.header}
+                    onChange={event => setForm({ ...form, header: event.target.value })}
+                    placeholder={t('templates.headerPlaceholder')}
+                    disabled={!canWrite}
+                  />
+                </div>
 
-              <div className="form-group">
-                <label>{t('templates.body')}</label>
-                <textarea
-                  value={form.body}
-                  onChange={event => setForm({ ...form, body: event.target.value })}
-                  placeholder={t('templates.bodyPlaceholder')}
-                  rows={8}
-                  disabled={!canWrite}
-                />
-              </div>
+                <div className="form-group body-field">
+                  <label>{t('templates.body')}</label>
+                  <textarea
+                    value={form.body}
+                    onChange={event => setForm({ ...form, body: event.target.value })}
+                    placeholder={t('templates.bodyPlaceholder')}
+                    rows={10}
+                    disabled={!canWrite}
+                  />
+                </div>
 
-              <div className="form-group">
-                <label>{t('templates.footer')}</label>
-                <input
-                  value={form.footer}
-                  onChange={event => setForm({ ...form, footer: event.target.value })}
-                  placeholder={t('templates.footerPlaceholder')}
-                  disabled={!canWrite}
-                />
+                <div className="form-group">
+                  <label>{t('templates.footer')}</label>
+                  <input
+                    value={form.footer}
+                    onChange={event => setForm({ ...form, footer: event.target.value })}
+                    placeholder={t('templates.footerPlaceholder')}
+                    disabled={!canWrite}
+                  />
+                </div>
               </div>
 
               <div className="template-editor-actions">
-                <button className="btn-secondary" onClick={resetForm} disabled={isSaving}>
+                <button className="btn-secondary" onClick={resetForm} disabled={isSaving} type="button">
                   {t('common.cancel')}
                 </button>
                 <button
                   className="btn-primary"
                   onClick={handleSave}
                   disabled={!canWrite || isSaving || !selectedSessionId || !form.name.trim() || !form.body.trim()}
+                  type="button"
                 >
                   {isSaving ? <Loader2 size={18} className="animate-spin" /> : <Plus size={18} />}
                   {canWrite ? t(editingTemplate ? 'templates.saveChanges' : 'templates.createTemplate') : t('templates.viewOnly')}
@@ -285,88 +377,32 @@ export function Templates() {
           </section>
 
           <aside className="template-preview">
-            <h2>{t('templates.previewTitle')}</h2>
-            {placeholders.length > 0 ? (
-              <div className="placeholder-list">
-                {placeholders.map(key => (
-                  <label key={key}>
-                    <span>{`{{${key}}}`}</span>
-                    <input
-                      value={previewValues[key] || ''}
-                      onChange={event => setPreviewValues({ ...previewValues, [key]: event.target.value })}
-                      placeholder={t('templates.previewValuePlaceholder')}
-                    />
-                  </label>
-                ))}
-              </div>
-            ) : (
-              <p className="template-muted">{t('templates.noPlaceholders')}</p>
-            )}
-            <pre className="template-preview-box">{preview || t('templates.previewEmpty')}</pre>
-          </aside>
-
-          <section className="templates-list">
-            <div className="templates-list-header">
-              <h2>{t('templates.savedTitle')}</h2>
-              <span>{t('templates.count', { count: templates.length })}</span>
+            <div className="template-preview-header">
+              <h2>{t('templates.previewTitle')}</h2>
+              <span>{placeholders.length}</span>
             </div>
-
-            {loadingTemplates ? (
-              <div className="templates-loading-inline">
-                <Loader2 className="animate-spin" size={24} />
-              </div>
-            ) : templates.length === 0 ? (
-              <div className="templates-empty-list">
-                <FileText size={40} strokeWidth={1} />
-                <h3>{t('templates.empty.title')}</h3>
-                <p>{t('templates.empty.description')}</p>
-              </div>
-            ) : (
-              <div className="template-card-list">
-                {templates.map(template => {
-                  const templatePlaceholders = extractPlaceholders(template);
-                  return (
-                    <article key={template.id} className="template-card">
-                      <div className="template-card-main">
-                        <div className="template-card-title-row">
-                          <h3>{template.name}</h3>
-                          <button
-                            className="icon-btn"
-                            title={t('templates.actions.copyName')}
-                            onClick={() => void copyName(template.name)}
-                          >
-                            <Copy size={16} />
-                          </button>
-                        </div>
-                        <p>{template.body}</p>
-                        {templatePlaceholders.length > 0 && (
-                          <div className="template-placeholder-tags">
-                            {templatePlaceholders.map(key => (
-                              <span key={key}>{`{{${key}}}`}</span>
-                            ))}
-                          </div>
-                        )}
-                      </div>
-                      <div className="template-card-actions">
-                        <button className="icon-btn" title={t('common.edit')} onClick={() => openEdit(template)}>
-                          <Edit size={16} />
-                        </button>
-                        {canWrite && (
-                          <button
-                            className="icon-btn danger"
-                            title={t('common.delete')}
-                            onClick={() => setDeleteTarget(template)}
-                          >
-                            <Trash2 size={16} />
-                          </button>
-                        )}
-                      </div>
-                    </article>
-                  );
-                })}
-              </div>
-            )}
-          </section>
+            <div className="template-preview-message">
+              <pre>{preview || t('templates.previewEmpty')}</pre>
+            </div>
+            <div className="template-variable-panel">
+              {placeholders.length > 0 ? (
+                <div className="placeholder-list">
+                  {placeholders.map(key => (
+                    <label key={key}>
+                      <span>{`{{${key}}}`}</span>
+                      <input
+                        value={previewValues[key] || ''}
+                        onChange={event => setPreviewValues({ ...previewValues, [key]: event.target.value })}
+                        placeholder={t('templates.previewValuePlaceholder')}
+                      />
+                    </label>
+                  ))}
+                </div>
+              ) : (
+                <p className="template-muted">{t('templates.noPlaceholders')}</p>
+              )}
+            </div>
+          </aside>
         </div>
       )}
 
diff --git a/src/engine/adapters/whatsapp-web-js.adapter.ts b/src/engine/adapters/whatsapp-web-js.adapter.ts
index 1f943106..71fc8a0f 100644
--- a/src/engine/adapters/whatsapp-web-js.adapter.ts
+++ b/src/engine/adapters/whatsapp-web-js.adapter.ts
@@ -1242,16 +1242,35 @@ export class WhatsAppWebJsAdapter extends EventEmitter implements IWhatsAppEngin
   async getChats(): Promise<ChatSummary[]> {
     this.ensureReady();
     const chats = await this.client!.getChats();
+    const summaries: ChatSummary[] = [];
+    let skipped = 0;
+
     // Map the raw whatsapp-web.js chat objects to the library-agnostic ChatSummary
-    // shape so that no library types leak past the engine boundary.
-    return chats.map(chat => ({
-      id: chat.id._serialized,
-      name: chat.name,
-      isGroup: chat.isGroup,
-      unreadCount: chat.unreadCount,
-      timestamp: chat.timestamp,
-      lastMessage: chat.lastMessage?.body || undefined,
-    }));
+    // shape so that no library types leak past the engine boundary. Some WA system
+    // or channel-like entries can lack the normal serialized id; skip those instead
+    // of failing the whole dashboard chats request.
+    for (const chat of chats) {
+      const id = chat.id?._serialized;
+      if (!id) {
+        skipped++;
+        continue;
+      }
+
+      summaries.push({
+        id,
+        name: chat.name || id,
+        isGroup: Boolean(chat.isGroup),
+        unreadCount: chat.unreadCount || 0,
+        timestamp: chat.timestamp || 0,
+        lastMessage: chat.lastMessage?.body || undefined,
+      });
+    }
+
+    if (skipped > 0) {
+      this.logger.warn(`Skipped ${skipped} chat(s) without a serialized id`);
+    }
+
+    return summaries;
   }
 
   async sendSeen(chatId: string): Promise<boolean> {