From cf6bff2709dc1addce9a52968958a6b80394022a Mon Sep 17 00:00:00 2001
From: lpf <lipengfei886@qq.com>
Date: Mon, 9 Mar 2026 15:32:18 +0800
Subject: [PATCH] fix(webui): unify button styling and chat contrast

---
 webui/src/components/GlobalDialog.tsx |   4 +-
 webui/src/index.css                   | 142 ++++++++++++++++++++++++++
 webui/src/pages/Chat.tsx              |  38 ++++---
 webui/src/pages/Config.tsx            |  20 ++--
 webui/src/pages/Cron.tsx              |  16 +--
 webui/src/pages/Logs.tsx              |   8 +-
 webui/src/pages/MCP.tsx               |  12 +--
 webui/src/pages/Memory.tsx            |   6 +-
 webui/src/pages/NodeArtifacts.tsx     |  10 +-
 webui/src/pages/Nodes.tsx             |  10 +-
 webui/src/pages/Skills.tsx            |  10 +-
 webui/src/pages/SubagentProfiles.tsx  |  16 +--
 webui/src/pages/TaskAudit.tsx         |   2 +-
 13 files changed, 223 insertions(+), 71 deletions(-)

diff --git a/webui/src/components/GlobalDialog.tsx b/webui/src/components/GlobalDialog.tsx
index c567852..dd734ce 100644
--- a/webui/src/components/GlobalDialog.tsx
+++ b/webui/src/components/GlobalDialog.tsx
@@ -61,9 +61,9 @@ export const GlobalDialog: React.FC<{
             </div>
             <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-xl bg-zinc-800 hover:bg-zinc-700 text-zinc-200 text-sm">{options.cancelText || t('cancel')}</button>
+                <button onClick={onCancel} className="ui-button ui-button-neutral px-3 py-1.5 text-sm">{options.cancelText || t('cancel')}</button>
               )}
-              <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'}`}>
+              <button onClick={() => onConfirm(kind === 'prompt' ? value : undefined)} className={`ui-button px-3 py-1.5 text-sm ${options.danger ? 'ui-button-danger' : 'ui-button-primary'}`}>
                 {options.confirmText || t('dialogOk')}
               </button>
             </div>
diff --git a/webui/src/index.css b/webui/src/index.css
index a11135e..15c8d1f 100644
--- a/webui/src/index.css
+++ b/webui/src/index.css
@@ -56,6 +56,26 @@ html {
   --button-start: #fb923c;
   --button-end: #f97316;
   --button-shadow: rgb(249 115 22 / 0.16);
+  --button-neutral-bg: rgb(226 232 240 / 0.9);
+  --button-neutral-bg-hover: rgb(203 213 225 / 0.96);
+  --button-neutral-border: rgb(203 213 225 / 0.98);
+  --button-neutral-text: rgb(51 65 85 / 0.96);
+  --button-primary-bg: rgb(255 237 213 / 0.96);
+  --button-primary-bg-hover: rgb(255 224 189 / 0.98);
+  --button-primary-border: rgb(251 146 60 / 0.34);
+  --button-primary-text: rgb(154 52 18 / 0.98);
+  --button-success-bg: rgb(220 252 231 / 0.96);
+  --button-success-bg-hover: rgb(187 247 208 / 0.98);
+  --button-success-border: rgb(52 211 153 / 0.34);
+  --button-success-text: rgb(6 95 70 / 0.98);
+  --button-warning-bg: rgb(254 243 199 / 0.98);
+  --button-warning-bg-hover: rgb(253 230 138 / 0.98);
+  --button-warning-border: rgb(245 158 11 / 0.34);
+  --button-warning-text: rgb(146 64 14 / 0.98);
+  --button-danger-bg: rgb(255 228 230 / 0.98);
+  --button-danger-bg-hover: rgb(254 205 211 / 0.98);
+  --button-danger-border: rgb(244 63 94 / 0.28);
+  --button-danger-text: rgb(159 18 57 / 0.98);
   --chip-bg: rgb(226 232 240 / 0.82);
   --chip-bg-hover: rgb(203 213 225 / 0.92);
   --chip-border: rgb(203 213 225 / 0.96);
@@ -125,6 +145,26 @@ html.theme-dark {
   --button-start: #ee9852;
   --button-end: #d96b25;
   --button-shadow: rgb(217 107 37 / 0.18);
+  --button-neutral-bg: rgb(36 49 69 / 0.9);
+  --button-neutral-bg-hover: rgb(48 63 87 / 0.96);
+  --button-neutral-border: rgb(93 109 135 / 0.82);
+  --button-neutral-text: rgb(226 232 240 / 0.96);
+  --button-primary-bg: rgb(232 132 58 / 0.16);
+  --button-primary-bg-hover: rgb(232 132 58 / 0.24);
+  --button-primary-border: rgb(232 132 58 / 0.3);
+  --button-primary-text: rgb(255 228 205 / 0.96);
+  --button-success-bg: rgb(16 185 129 / 0.14);
+  --button-success-bg-hover: rgb(16 185 129 / 0.22);
+  --button-success-border: rgb(52 211 153 / 0.24);
+  --button-success-text: rgb(209 250 229 / 0.96);
+  --button-warning-bg: rgb(245 158 11 / 0.14);
+  --button-warning-bg-hover: rgb(245 158 11 / 0.22);
+  --button-warning-border: rgb(251 191 36 / 0.24);
+  --button-warning-text: rgb(254 243 199 / 0.96);
+  --button-danger-bg: rgb(244 63 94 / 0.14);
+  --button-danger-bg-hover: rgb(244 63 94 / 0.22);
+  --button-danger-border: rgb(251 113 133 / 0.24);
+  --button-danger-text: rgb(255 228 230 / 0.96);
   --chip-bg: rgb(36 49 69 / 0.9);
   --chip-bg-hover: rgb(48 63 87 / 0.96);
   --chip-border: rgb(93 109 135 / 0.82);
@@ -299,6 +339,108 @@ html.theme-dark .brand-button {
   box-shadow: 0 10px 24px var(--button-shadow);
 }
 
+.ui-button {
+  border-radius: var(--radius-button);
+  border: 1px solid transparent;
+  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
+}
+
+.ui-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ui-button-neutral {
+  background: var(--button-neutral-bg);
+  border-color: var(--button-neutral-border);
+  color: var(--button-neutral-text);
+}
+
+.ui-button-neutral:hover:not(:disabled) {
+  background: var(--button-neutral-bg-hover);
+}
+
+.ui-button-primary {
+  background: var(--button-primary-bg);
+  border-color: var(--button-primary-border);
+  color: var(--button-primary-text);
+}
+
+.ui-button-primary:hover:not(:disabled) {
+  background: var(--button-primary-bg-hover);
+}
+
+.ui-button-success {
+  background: var(--button-success-bg);
+  border-color: var(--button-success-border);
+  color: var(--button-success-text);
+}
+
+.ui-button-success:hover:not(:disabled) {
+  background: var(--button-success-bg-hover);
+}
+
+.ui-button-warning {
+  background: var(--button-warning-bg);
+  border-color: var(--button-warning-border);
+  color: var(--button-warning-text);
+}
+
+.ui-button-warning:hover:not(:disabled) {
+  background: var(--button-warning-bg-hover);
+}
+
+.ui-button-danger {
+  background: var(--button-danger-bg);
+  border-color: var(--button-danger-border);
+  color: var(--button-danger-text);
+}
+
+.ui-button-danger:hover:not(:disabled) {
+  background: var(--button-danger-bg-hover);
+}
+
+.chat-bubble-user {
+  background: linear-gradient(135deg, var(--button-start) 0%, var(--button-end) 100%);
+  color: white;
+}
+
+.chat-bubble-tool {
+  background: rgb(255 247 237 / 0.96);
+  border: 1px solid rgb(253 186 116 / 0.7);
+  color: rgb(124 45 18 / 0.98);
+}
+
+.chat-bubble-agent {
+  background: rgb(226 232 240 / 0.9);
+  border: 1px solid rgb(203 213 225 / 0.95);
+  color: rgb(51 65 85 / 0.98);
+}
+
+.chat-bubble-system {
+  background: rgb(226 232 240 / 0.72);
+  border: 1px solid rgb(203 213 225 / 0.9);
+  color: rgb(51 65 85 / 0.98);
+}
+
+html.theme-dark .chat-bubble-tool {
+  background: rgb(123 58 24 / 0.24);
+  border-color: rgb(232 132 58 / 0.28);
+  color: rgb(255 237 213 / 0.96);
+}
+
+html.theme-dark .chat-bubble-agent {
+  background: rgb(22 32 50 / 0.82);
+  border-color: rgb(71 85 105 / 0.76);
+  color: rgb(226 232 240 / 0.96);
+}
+
+html.theme-dark .chat-bubble-system {
+  background: rgb(36 49 69 / 0.74);
+  border-color: rgb(71 85 105 / 0.74);
+  color: rgb(226 232 240 / 0.96);
+}
+
 .control-chip {
   border-radius: var(--radius-chip);
   background: var(--chip-bg);
diff --git a/webui/src/pages/Chat.tsx b/webui/src/pages/Chat.tsx
index 433cfce..0cf00b0 100644
--- a/webui/src/pages/Chat.tsx
+++ b/webui/src/pages/Chat.tsx
@@ -558,13 +558,13 @@ const Chat: React.FC = () => {
           <div className="flex items-center gap-2 flex-wrap min-w-0">
             <button
               onClick={() => setChatTab('main')}
-              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'}`}
+              className={`ui-button px-3 py-1.5 text-xs ${chatTab === 'main' ? 'ui-button-primary' : 'ui-button-neutral'}`}
             >
               {t('mainChat')}
             </button>
             <button
               onClick={() => setChatTab('subagents')}
-              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'}`}
+              className={`ui-button px-3 py-1.5 text-xs ${chatTab === 'subagents' ? 'ui-button-primary' : 'ui-button-neutral'}`}
             >
               {t('subagentGroup')}
             </button>
@@ -574,14 +574,14 @@ const Chat: React.FC = () => {
               </select>
             )}
           </div>
-          <button onClick={() => { if (chatTab === 'main') { void loadHistory(); } else { void 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>
+          <button onClick={() => { if (chatTab === 'main') { void loadHistory(); } else { void loadSubagentGroup(); } }} className="ui-button ui-button-neutral flex items-center gap-1 px-2.5 py-1.5 text-xs"><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/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/70 border-zinc-700 text-zinc-300'}`}
+              className={`ui-button px-2.5 py-1 rounded-full text-xs ${selectedStreamAgents.length === 0 ? 'ui-button-primary' : 'ui-button-neutral'}`}
             >
               {t('allAgents')}
             </button>
@@ -589,7 +589,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/70 border-zinc-700 text-zinc-300'}`}
+                className={`ui-button px-2.5 py-1 rounded-full text-xs ${selectedStreamAgents.includes(agent) ? 'ui-button-primary' : 'ui-button-neutral'}`}
               >
                 {formatAgentName(agent)}
               </button>
@@ -631,7 +631,7 @@ const Chat: React.FC = () => {
                 <button
                   onClick={dispatchSubagentTask}
                   disabled={!dispatchAgentID.trim() || !dispatchTask.trim()}
-                  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)]"
+                  className="ui-button ui-button-primary w-full px-3 py-2.5 text-sm font-medium"
                 >
                   {t('dispatchToSubagent')}
                 </button>
@@ -689,14 +689,24 @@ const Chat: React.FC = () => {
                 const isExec = m.role === 'tool' || m.role === 'exec';
                 const isSystem = m.role === 'system';
                 const bubbleClass = isUser
-                  ? 'bg-indigo-600 text-white rounded-br-sm'
+                  ? 'chat-bubble-user rounded-br-sm'
                   : isExec
-                    ? 'bg-amber-500/10 text-amber-100 rounded-bl-sm border border-amber-500/30'
+                    ? 'chat-bubble-tool rounded-bl-sm'
                     : isSystem
-                      ? 'bg-zinc-700/40 text-zinc-100 rounded-bl-sm border border-zinc-600/40'
+                      ? 'chat-bubble-system rounded-bl-sm'
                       : m.isReadonlyGroup
-                        ? 'bg-zinc-900/85 text-zinc-200 rounded-bl-sm border border-zinc-700/60'
-                        : 'bg-zinc-800/80 text-zinc-200 rounded-bl-sm border border-zinc-700/50';
+                        ? 'chat-bubble-system rounded-bl-sm'
+                        : 'chat-bubble-agent rounded-bl-sm';
+                const metaClass = isUser
+                  ? 'text-white/75'
+                  : isExec
+                    ? 'text-amber-800/75 dark:text-amber-100/75'
+                    : 'text-zinc-500 dark:text-zinc-400';
+                const subLabelClass = isUser
+                  ? 'text-white/70'
+                  : isExec
+                    ? 'text-amber-700/80 dark:text-amber-100/70'
+                    : 'text-zinc-500 dark:text-zinc-400';
 
                 return (
                   <motion.div
@@ -709,11 +719,11 @@ const Chat: React.FC = () => {
                       <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-[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>}
+                          <div className={`text-[11px] font-medium ${metaClass}`}>{m.actorName || m.label || (isUser ? t('user') : isExec ? t('exec') : isSystem ? t('system') : t('agent'))}</div>
+                          {m.metaLine && <div className={`text-[11px] ${metaClass}`}>{m.metaLine}</div>}
                         </div>
                         {m.label && m.actorName && m.label !== m.actorName && (
-                          <div className="text-[11px] text-zinc-500 mb-2">{m.label}</div>
+                          <div className={`text-[11px] mb-2 ${subLabelClass}`}>{m.label}</div>
                         )}
                         <p className="whitespace-pre-wrap text-[14px] leading-relaxed">{m.text}</p>
                       </div>
diff --git a/webui/src/pages/Config.tsx b/webui/src/pages/Config.tsx
index b543199..e89c104 100644
--- a/webui/src/pages/Config.tsx
+++ b/webui/src/pages/Config.tsx
@@ -282,18 +282,18 @@ const Config: React.FC = () => {
       <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/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>
+          <button onClick={() => setShowRaw(false)} className={`ui-button px-4 py-1.5 text-sm font-medium rounded-lg ${!showRaw ? 'ui-button-primary' : 'ui-button-neutral'}`}>{t('form')}</button>
+          <button onClick={() => setShowRaw(true)} className={`ui-button px-4 py-1.5 text-sm font-medium rounded-lg ${showRaw ? 'ui-button-primary' : 'ui-button-neutral'}`}>{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-xl text-sm font-medium transition-colors">
+          <button onClick={async () => { await loadConfig(true); setTimeout(() => setBaseline(JSON.parse(JSON.stringify(cfg))), 0); }} className="ui-button ui-button-neutral flex items-center gap-2 px-4 py-2 text-sm font-medium">
             <RefreshCw className="w-4 h-4" /> {t('reload')}
           </button>
-          <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">
+          <button onClick={() => setShowDiff(true)} className="ui-button ui-button-neutral px-3 py-2 text-sm">{t('configDiffPreview')}</button>
+          <button onClick={() => setBasicMode(v => !v)} className="ui-button ui-button-neutral px-3 py-2 text-sm">
             {basicMode ? t('configBasicMode') : t('configAdvancedMode')}
           </button>
           <label className="flex items-center gap-2 text-sm text-zinc-300">
@@ -302,7 +302,7 @@ const Config: React.FC = () => {
           </label>
           <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="brand-button flex items-center gap-2 px-4 py-2 text-white rounded-xl text-sm font-medium transition-colors shadow-sm">
+        <button onClick={saveConfig} className="ui-button ui-button-primary flex items-center gap-2 px-4 py-2 text-sm font-medium">
           <Save className="w-4 h-4" /> {t('saveChanges')}
         </button>
       </div>
@@ -345,7 +345,7 @@ const Config: React.FC = () => {
                     <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-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>
+                      <button onClick={addProxy} className="ui-button ui-button-primary px-2 py-1 rounded-lg text-xs">{t('add')}</button>
                     </div>
                   </div>
                   <div className="space-y-2">
@@ -355,7 +355,7 @@ const Config: React.FC = () => {
                         <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>
+                        <button onClick={()=>removeProxy(name)} className="ui-button ui-button-danger md:col-span-1 px-2 py-1 rounded text-xs">{t('delete')}</button>
                       </div>
                     ))}
                     {Object.keys(((cfg as any)?.providers?.proxies || {}) as Record<string, any>).length === 0 && (
@@ -403,7 +403,7 @@ const Config: React.FC = () => {
                   <div className="space-y-2">
                     <div className="flex items-center justify-between gap-2 flex-wrap">
                       <div className="text-sm font-medium text-zinc-200">{t('configNodeP2PIceServers')}</div>
-                      <button onClick={addGatewayIceServer} className="brand-button px-2 py-1 rounded-lg text-xs text-white">{t('add')}</button>
+                      <button onClick={addGatewayIceServer} className="ui-button ui-button-primary px-2 py-1 rounded-lg text-xs">{t('add')}</button>
                     </div>
                     {Array.isArray((cfg as any)?.gateway?.nodes?.p2p?.ice_servers) && (cfg as any).gateway.nodes.p2p.ice_servers.length > 0 ? (
                       ((cfg as any).gateway.nodes.p2p.ice_servers as Array<any>).map((server, index) => (
@@ -426,7 +426,7 @@ const Config: React.FC = () => {
                             placeholder={t('configNodeP2PIceCredential')}
                             className="md:col-span-2 px-2 py-1 rounded-lg bg-zinc-950/70 border border-zinc-800"
                           />
-                          <button onClick={() => removeGatewayIceServer(index)} className="md:col-span-1 px-2 py-1 rounded bg-red-900/60 hover:bg-red-800 text-red-100">{t('delete')}</button>
+                          <button onClick={() => removeGatewayIceServer(index)} className="ui-button ui-button-danger md:col-span-1 px-2 py-1 rounded text-xs">{t('delete')}</button>
                         </div>
                       ))
                     ) : (
diff --git a/webui/src/pages/Cron.tsx b/webui/src/pages/Cron.tsx
index c4d3059..10a4701 100644
--- a/webui/src/pages/Cron.tsx
+++ b/webui/src/pages/Cron.tsx
@@ -172,10 +172,10 @@ const Cron: React.FC = () => {
       <div className="flex items-center justify-between flex-wrap gap-3">
         <h1 className="text-2xl font-semibold tracking-tight">{t('cronJobs')}</h1>
         <div className="flex items-center gap-3 flex-wrap">
-          <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">
+          <button onClick={() => refreshCron()} className="ui-button ui-button-neutral flex items-center gap-2 px-4 py-2 text-sm font-medium">
             <RefreshCw className="w-4 h-4" /> {t('refresh')}
           </button>
-          <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">
+          <button onClick={() => openCronModal()} className="ui-button ui-button-primary flex items-center gap-2 px-4 py-2 text-sm font-medium">
             <Plus className="w-4 h-4" /> {t('addJob')}
           </button>
         </div>
@@ -215,20 +215,20 @@ 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/70 hover:bg-zinc-700 rounded-xl text-xs font-medium transition-colors text-zinc-300"
+                className="ui-button ui-button-neutral flex-1 flex items-center justify-center gap-2 py-2 text-xs font-medium"
               >
                 <Edit2 className="w-3.5 h-3.5" /> {t('editJob')}
               </button>
               <button
                 onClick={() => cronAction(j.enabled ? 'disable' : 'enable', j.id)}
-                className={`p-2 rounded-lg transition-colors ${j.enabled ? 'bg-amber-500/10 text-amber-500 hover:bg-amber-500/20' : 'bg-emerald-500/10 text-emerald-500 hover:bg-emerald-500/20'}`}
+                className={`ui-button p-2 rounded-lg ${j.enabled ? 'ui-button-warning' : 'ui-button-success'}`}
                 title={j.enabled ? t('pauseJob') : t('startJob')}
               >
                 {j.enabled ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4" />}
               </button>
               <button
                 onClick={() => cronAction('delete', j.id)}
-                className="p-2 bg-red-500/10 text-red-500 hover:bg-red-500/20 rounded-lg transition-colors"
+                className="ui-button ui-button-danger p-2 rounded-lg"
                 title={t('deleteJob')}
               >
                 <Trash2 className="w-4 h-4" />
@@ -263,7 +263,7 @@ const Cron: React.FC = () => {
             >
               <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">
+                <button onClick={() => setIsCronModalOpen(false)} className="ui-button ui-button-neutral p-2 rounded-full">
                   <X className="w-5 h-5" />
                 </button>
               </div>
@@ -368,13 +368,13 @@ const Cron: React.FC = () => {
               <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"
+                  className="ui-button ui-button-neutral px-4 py-2 text-sm font-medium"
                 >
                   {t('cancel')}
                 </button>
                 <button
                   onClick={handleCronSubmit}
-                  className="brand-button px-6 py-2 text-white rounded-xl text-sm font-medium transition-all"
+                  className="ui-button ui-button-primary px-6 py-2 text-sm font-medium"
                 >
                   {editingCron ? t('update') : t('create')}
                 </button>
diff --git a/webui/src/pages/Logs.tsx b/webui/src/pages/Logs.tsx
index 97430d3..cd8f9c6 100644
--- a/webui/src/pages/Logs.tsx
+++ b/webui/src/pages/Logs.tsx
@@ -176,19 +176,19 @@ 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-xl text-sm font-medium transition-colors text-zinc-300"
+            className="ui-button ui-button-neutral flex items-center gap-2 px-4 py-2 text-sm font-medium"
           >
             {showRaw ? t('pretty') : t('raw')}
           </button>
           <button 
             onClick={() => setIsStreaming(!isStreaming)}
-            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'
+            className={`ui-button flex items-center gap-2 px-4 py-2 text-sm font-medium ${
+              isStreaming ? 'ui-button-neutral' : 'ui-button-primary'
             }`}
           >
             {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-xl text-sm font-medium transition-colors text-zinc-300">
+          <button onClick={clearLogs} className="ui-button ui-button-neutral flex items-center gap-2 px-4 py-2 text-sm font-medium">
             <Trash2 className="w-4 h-4" /> {t('clear')}
           </button>
         </div>
diff --git a/webui/src/pages/MCP.tsx b/webui/src/pages/MCP.tsx
index ebccc99..05f9b1c 100644
--- a/webui/src/pages/MCP.tsx
+++ b/webui/src/pages/MCP.tsx
@@ -275,7 +275,7 @@ const MCP: React.FC = () => {
         </div>
         <button
           onClick={async () => { setBaseline(null); await loadConfig(true); }}
-          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"
+          className="ui-button ui-button-neutral flex items-center gap-2 px-4 py-2 text-sm font-medium"
         >
           <RefreshCw className="w-4 h-4" /> {t('reload')}
         </button>
@@ -285,7 +285,7 @@ const MCP: React.FC = () => {
         <button
           onClick={saveConfig}
           disabled={!isDirty}
-          className="brand-button flex items-center gap-2 px-4 py-2 text-white rounded-xl text-sm font-medium transition-colors shadow-sm disabled:opacity-50 disabled:cursor-not-allowed"
+          className="ui-button ui-button-primary flex items-center gap-2 px-4 py-2 text-sm font-medium"
         >
           <Save className="w-4 h-4" /> {t('saveChanges')}
         </button>
@@ -296,7 +296,7 @@ const MCP: React.FC = () => {
           <div className="text-sm font-semibold text-zinc-200">{t('configMCPServers')}</div>
           <div className="flex items-center gap-2">
             <input value={newMCPServerName} onChange={(e)=>setNewMCPServerName(e.target.value)} placeholder={t('configNewMCPServerName')} className="px-2 py-1 rounded-lg bg-zinc-900/70 border border-zinc-700 text-xs" />
-            <button onClick={addMCPServer} className="brand-button px-2 py-1 rounded-lg text-xs text-white">{t('add')}</button>
+            <button onClick={addMCPServer} className="ui-button ui-button-primary px-2 py-1 rounded-lg text-xs">{t('add')}</button>
           </div>
         </div>
         <div className="space-y-2">
@@ -356,9 +356,9 @@ const MCP: React.FC = () => {
               )}
               <input value={String(server?.description || '')} onChange={(e)=>updateMCPServerField(name, 'description', e.target.value)} placeholder={t('configLabels.description')} className="md:col-span-2 px-2 py-1 rounded-lg bg-zinc-950/70 border border-zinc-800" />
               {isStdio && (
-                <button onClick={()=>installMCPServerPackage(name, server)} className="md:col-span-1 px-2 py-1 rounded bg-emerald-900/60 hover:bg-emerald-800 text-emerald-100">{t('install')}</button>
+                <button onClick={()=>installMCPServerPackage(name, server)} className="ui-button ui-button-success md:col-span-1 px-2 py-1 rounded text-xs">{t('install')}</button>
               )}
-              <button onClick={()=>removeMCPServer(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>
+              <button onClick={()=>removeMCPServer(name)} className="ui-button ui-button-danger md:col-span-1 px-2 py-1 rounded text-xs">{t('delete')}</button>
               {(() => {
                 const check = mcpServerChecks.find((item) => item.name === name);
                 if (!check || check.status === 'ok' || check.status === 'disabled' || check.status === 'not_applicable') return null;
@@ -371,7 +371,7 @@ const MCP: React.FC = () => {
                       )}
                     </div>
                     {check.installable && (
-                      <button onClick={() => installMCPServerCheckPackage(check)} className="px-2 py-1 rounded bg-amber-700 hover:bg-amber-600 text-white">
+                      <button onClick={() => installMCPServerCheckPackage(check)} className="ui-button ui-button-warning px-2 py-1 rounded text-xs">
                         {t('install')}
                       </button>
                     )}
diff --git a/webui/src/pages/Memory.tsx b/webui/src/pages/Memory.tsx
index 071a7b3..369a981 100644
--- a/webui/src/pages/Memory.tsx
+++ b/webui/src/pages/Memory.tsx
@@ -115,19 +115,19 @@ const Memory: React.FC = () => {
       <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="brand-button px-2.5 py-1 rounded-xl text-white">+</button>
+          <button onClick={createFile} className="ui-button ui-button-primary px-2.5 py-1 rounded-xl">+</button>
         </div>
         {files.map((f) => (
           <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>
+            <button className="ui-button ui-button-danger px-2 py-1 text-xs rounded-lg" onClick={() => removeFile(f)}>x</button>
           </div>
         ))}
       </aside>
       <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="brand-button px-3 py-1.5 rounded-xl text-white">{t('save')}</button>
+          <button onClick={saveFile} className="ui-button ui-button-primary px-3 py-1.5 rounded-xl">{t('save')}</button>
         </div>
         <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>
diff --git a/webui/src/pages/NodeArtifacts.tsx b/webui/src/pages/NodeArtifacts.tsx
index 8baad1e..53348e6 100644
--- a/webui/src/pages/NodeArtifacts.tsx
+++ b/webui/src/pages/NodeArtifacts.tsx
@@ -141,10 +141,10 @@ const NodeArtifacts: React.FC = () => {
           <div className="text-sm text-zinc-500 mt-1">{t('nodeArtifactsHint')}</div>
         </div>
         <div className="flex items-center gap-2">
-          <a href={exportURL()} className="rounded-xl border border-zinc-700 px-3 py-1.5 text-sm text-zinc-200">
+          <a href={exportURL()} className="ui-button ui-button-neutral px-3 py-1.5 text-sm">
             {t('export')}
           </a>
-          <button onClick={loadArtifacts} className="brand-button px-3 py-1.5 rounded-xl text-sm text-white">
+          <button onClick={loadArtifacts} className="ui-button ui-button-primary px-3 py-1.5 text-sm">
             {loading ? t('loading') : t('refresh')}
           </button>
         </div>
@@ -185,7 +185,7 @@ const NodeArtifacts: React.FC = () => {
               <button
                 onClick={pruneArtifacts}
                 disabled={prunePending}
-                className="rounded-xl border border-zinc-700 px-3 py-2 text-xs text-zinc-200 disabled:opacity-60"
+                className="ui-button ui-button-warning px-3 py-2 text-xs"
               >
                 {prunePending ? t('loading') : t('nodeArtifactsPrune')}
               </button>
@@ -224,10 +224,10 @@ const NodeArtifacts: React.FC = () => {
                     <div className="text-xs text-zinc-500 mt-1">{String(selected?.node || '-')} · {String(selected?.action || '-')} · {formatLocalDateTime(selected?.time)}</div>
                   </div>
                   <div className="flex items-center gap-2">
-                    <a href={downloadURL(String(selected?.id || ''))} className="rounded-xl border border-zinc-700 px-3 py-1.5 text-xs text-zinc-200">
+                    <a href={downloadURL(String(selected?.id || ''))} className="ui-button ui-button-neutral px-3 py-1.5 text-xs">
                       {t('download')}
                     </a>
-                    <button onClick={() => deleteArtifact(String(selected?.id || ''))} className="rounded-xl bg-red-900/60 px-3 py-1.5 text-xs text-red-100">
+                    <button onClick={() => deleteArtifact(String(selected?.id || ''))} className="ui-button ui-button-danger px-3 py-1.5 text-xs">
                       {t('delete')}
                     </button>
                   </div>
diff --git a/webui/src/pages/Nodes.tsx b/webui/src/pages/Nodes.tsx
index 8dfa151..dbd3d3f 100644
--- a/webui/src/pages/Nodes.tsx
+++ b/webui/src/pages/Nodes.tsx
@@ -221,7 +221,7 @@ const Nodes: React.FC = () => {
           <h1 className="text-xl md:text-2xl font-semibold">{t('nodes')}</h1>
           <div className="text-sm text-zinc-500 mt-1">{t('nodesDetailHint')}</div>
         </div>
-        <button onClick={() => { refreshNodes(); setReloadTick((value) => value + 1); }} className="brand-button px-3 py-1.5 rounded-xl text-sm text-white">
+        <button onClick={() => { refreshNodes(); setReloadTick((value) => value + 1); }} className="ui-button ui-button-primary px-3 py-1.5 text-sm">
           {loading ? t('loading') : t('refresh')}
         </button>
       </div>
@@ -296,13 +296,13 @@ const Nodes: React.FC = () => {
                 <div className="flex items-center gap-2 flex-wrap">
                   <Link
                     to={`/node-artifacts?node=${encodeURIComponent(String(selectedNode.id || ''))}`}
-                    className="rounded-xl border border-zinc-700 px-3 py-1.5 text-xs text-zinc-200"
+                    className="ui-button ui-button-neutral px-3 py-1.5 text-xs"
                   >
                     {t('nodeArtifacts')}
                   </Link>
                   <a
                     href={`/webui/api/node_artifacts/export${q ? `${q}&node=${encodeURIComponent(String(selectedNode.id || ''))}` : `?node=${encodeURIComponent(String(selectedNode.id || ''))}`}`}
-                    className="rounded-xl border border-zinc-700 px-3 py-1.5 text-xs text-zinc-200"
+                    className="ui-button ui-button-neutral px-3 py-1.5 text-xs"
                   >
                     {t('export')}
                   </a>
@@ -454,14 +454,14 @@ const Nodes: React.FC = () => {
                       <button
                         onClick={resetReplayDraft}
                         disabled={replayPending}
-                        className="rounded-xl border border-zinc-700 px-3 py-1.5 text-xs text-zinc-200 disabled:opacity-60"
+                        className="ui-button ui-button-neutral px-3 py-1.5 text-xs"
                       >
                         {t('resetReplayDraft')}
                       </button>
                       <button
                         onClick={replayDispatch}
                         disabled={replayPending}
-                        className="brand-button px-3 py-1.5 rounded-xl text-xs text-white disabled:opacity-60"
+                        className="ui-button ui-button-primary px-3 py-1.5 text-xs"
                       >
                         {replayPending ? t('replaying') : t('replayDispatch')}
                       </button>
diff --git a/webui/src/pages/Skills.tsx b/webui/src/pages/Skills.tsx
index b83bfb2..e0587f2 100644
--- a/webui/src/pages/Skills.tsx
+++ b/webui/src/pages/Skills.tsx
@@ -190,7 +190,7 @@ const Skills: React.FC = () => {
         <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/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>
+          <button disabled={installingSkill} onClick={installSkill} className="ui-button ui-button-success px-3 py-2 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"
@@ -202,21 +202,21 @@ const Skills: React.FC = () => {
           </label>
         </div>
         <div className="flex items-center gap-3 flex-wrap">
-          <div className={`text-xs px-2 py-1 rounded-md border font-medium ${clawhubInstalled ? 'text-emerald-200 border-emerald-500/35 bg-emerald-500/12' : 'text-amber-100 border-amber-500/45 bg-amber-500/14 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]'}`} title={clawhubPath || t('skillsClawhubNotFound')}>
+          <div className={`text-xs px-2.5 py-1 rounded-md border font-medium ${clawhubInstalled ? 'text-emerald-700 border-emerald-300 bg-emerald-50' : 'text-amber-700 border-amber-300 bg-amber-50'}`} title={clawhubPath || t('skillsClawhubNotFound')}>
             {t('skillsClawhubStatus')}: {clawhubInstalled ? t('installed') : t('notInstalled')}
           </div>
           {!clawhubInstalled && (
             <button
               onClick={installClawHubIfNeeded}
-              className="flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-colors shadow-sm bg-cyan-500/15 text-cyan-200 border border-cyan-400/25 hover:bg-cyan-500/25 hover:border-cyan-300/35"
+              className="ui-button ui-button-primary flex items-center gap-2 px-4 py-2 text-sm font-medium 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-xl text-sm font-medium transition-colors">
+          <button onClick={() => refreshSkills()} className="ui-button ui-button-neutral flex items-center gap-2 px-4 py-2 text-sm font-medium">
             <RefreshCw className="w-4 h-4" /> {t('refresh')}
           </button>
-          <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">
+          <button onClick={onAddSkillClick} className="ui-button ui-button-primary flex items-center gap-2 px-4 py-2 text-sm font-medium shadow-sm">
             <Plus className="w-4 h-4" /> {t('skillsAdd')}
           </button>
         </div>
diff --git a/webui/src/pages/SubagentProfiles.tsx b/webui/src/pages/SubagentProfiles.tsx
index e787927..c0baf74 100644
--- a/webui/src/pages/SubagentProfiles.tsx
+++ b/webui/src/pages/SubagentProfiles.tsx
@@ -272,10 +272,10 @@ 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-xl bg-zinc-800 hover:bg-zinc-700 text-sm">
+          <button onClick={() => load()} className="ui-button ui-button-neutral px-3 py-1.5 text-sm">
             {t('refresh')}
           </button>
-          <button onClick={onNew} className="px-3 py-1.5 rounded-xl bg-emerald-700/80 hover:bg-emerald-600 text-sm">
+          <button onClick={onNew} className="ui-button ui-button-success px-3 py-1.5 text-sm">
             {t('newProfile')}
           </button>
         </div>
@@ -405,7 +405,7 @@ const SubagentProfiles: React.FC = () => {
                       key={g.name}
                       type="button"
                       onClick={() => addAllowlistToken(`group:${g.name}`)}
-                      className="px-2 py-1 text-[11px] rounded bg-zinc-800 hover:bg-zinc-700 text-zinc-200"
+                      className="ui-button ui-button-neutral px-2 py-1 text-[11px] rounded"
                       title={g.description || g.name}
                     >
                       {`group:${g.name}`}
@@ -430,7 +430,7 @@ const SubagentProfiles: React.FC = () => {
                   type="button"
                   onClick={savePromptFile}
                   disabled={!String(draft.system_prompt_file || '').trim()}
-                  className="px-3 py-1.5 text-xs rounded bg-zinc-800 hover:bg-zinc-700 disabled:opacity-50"
+                  className="ui-button ui-button-neutral px-3 py-1.5 text-xs rounded disabled:opacity-50"
                 >
                   {t('savePromptFile')}
                 </button>
@@ -482,28 +482,28 @@ const SubagentProfiles: React.FC = () => {
             <button
               onClick={save}
               disabled={saving}
-              className="px-3 py-1.5 text-xs rounded-xl border border-indigo-400/30 bg-indigo-500/14 text-indigo-100 hover:bg-indigo-500/22 disabled:opacity-60"
+              className="ui-button ui-button-primary px-3 py-1.5 text-xs"
             >
               {selected ? t('update') : t('create')}
             </button>
             <button
               onClick={() => setStatus('active')}
               disabled={!draft.agent_id}
-              className="px-3 py-1.5 text-xs rounded-xl border border-emerald-400/30 bg-emerald-500/14 text-emerald-100 hover:bg-emerald-500/22 disabled:opacity-50"
+              className="ui-button ui-button-success px-3 py-1.5 text-xs"
             >
               {t('enable')}
             </button>
             <button
               onClick={() => setStatus('disabled')}
               disabled={!draft.agent_id}
-              className="px-3 py-1.5 text-xs rounded-xl border border-amber-400/30 bg-amber-500/14 text-amber-100 hover:bg-amber-500/22 disabled:opacity-50"
+              className="ui-button ui-button-warning px-3 py-1.5 text-xs"
             >
               {t('disable')}
             </button>
             <button
               onClick={remove}
               disabled={!draft.agent_id}
-              className="px-3 py-1.5 text-xs rounded-xl border border-rose-400/30 bg-rose-500/14 text-rose-100 hover:bg-rose-500/22 disabled:opacity-50"
+              className="ui-button ui-button-danger px-3 py-1.5 text-xs"
             >
               {t('delete')}
             </button>
diff --git a/webui/src/pages/TaskAudit.tsx b/webui/src/pages/TaskAudit.tsx
index 4995ed8..62cb14e 100644
--- a/webui/src/pages/TaskAudit.tsx
+++ b/webui/src/pages/TaskAudit.tsx
@@ -128,7 +128,7 @@ const TaskAudit: React.FC = () => {
             <option value="error">{t('statusError')}</option>
             <option value="suppressed">{t('statusSuppressed')}</option>
           </select>
-          <button onClick={fetchData} className="brand-button px-3 py-1.5 rounded-xl text-sm text-white">{loading ? t('loading') : t('refresh')}</button>
+          <button onClick={fetchData} className="ui-button ui-button-primary px-3 py-1.5 text-sm">{loading ? t('loading') : t('refresh')}</button>
         </div>
       </div>