diff --git a/web/src/components/cooldown-details-dialog.tsx b/web/src/components/cooldown-details-dialog.tsx
index d6bea3ea..aeda00ad 100644
--- a/web/src/components/cooldown-details-dialog.tsx
+++ b/web/src/components/cooldown-details-dialog.tsx
@@ -212,7 +212,7 @@ export function CooldownDetailsDialog({
           {/* Timer Section */}
           <div className="grid grid-cols-2 gap-3">
             {/* Countdown */}
-            <div className="col-span-2 relative overflow-hidden rounded-xl bg-gradient-to-br from-cyan-950/30 to-transparent border border-cyan-500/20 p-5 flex flex-col items-center justify-center group">
+            <div className="col-span-2 relative overflow-hidden rounded-xl bg-linear-to-br from-cyan-950/30 to-transparent border border-cyan-500/20 p-5 flex flex-col items-center justify-center group">
               <div className="absolute inset-0 bg-cyan-400/5 opacity-50 group-hover:opacity-100 transition-opacity" />
               <div className="relative flex items-center gap-1.5 text-cyan-500 mb-1">
                 <Thermometer size={14} />
diff --git a/web/src/components/force-project-dialog.tsx b/web/src/components/force-project-dialog.tsx
index 0c75d841..748f39cc 100644
--- a/web/src/components/force-project-dialog.tsx
+++ b/web/src/components/force-project-dialog.tsx
@@ -15,9 +15,9 @@ import { cn } from '@/lib/utils';
 import { getClientName, getClientColor } from '@/components/icons/client-icons';
 
 interface ForceProjectDialogProps {
-  event: NewSessionPendingEvent | null;
-  onClose: () => void;
-  timeoutSeconds: number;
+  event: NewSessionPendingEvent | null
+  onClose: () => void
+  timeoutSeconds: number
 }
 
 export function ForceProjectDialog({
@@ -25,72 +25,72 @@ export function ForceProjectDialog({
   onClose,
   timeoutSeconds,
 }: ForceProjectDialogProps) {
-  const { data: projects, isLoading } = useProjects();
-  const updateSessionProject = useUpdateSessionProject();
-  const rejectSession = useRejectSession();
-  const [selectedProjectId, setSelectedProjectId] = useState<number>(0);
-  const [remainingTime, setRemainingTime] = useState(timeoutSeconds);
+  const { data: projects, isLoading } = useProjects()
+  const updateSessionProject = useUpdateSessionProject()
+  const rejectSession = useRejectSession()
+  const [selectedProjectId, setSelectedProjectId] = useState<number>(0)
+  const [remainingTime, setRemainingTime] = useState(timeoutSeconds)
 
   // Reset state when event changes
   useEffect(() => {
     if (event) {
-      setSelectedProjectId(0);
-      setRemainingTime(timeoutSeconds);
+      setSelectedProjectId(0)
+      setRemainingTime(timeoutSeconds)
     }
-  }, [event, timeoutSeconds]);
+  }, [event, timeoutSeconds])
 
   // Countdown timer
   useEffect(() => {
-    if (!event) return;
+    if (!event) return
 
     const interval = setInterval(() => {
       setRemainingTime(prev => {
         if (prev <= 1) {
-          clearInterval(interval);
-          return 0;
+          clearInterval(interval)
+          return 0
         }
-        return prev - 1;
-      });
-    }, 1000);
+        return prev - 1
+      })
+    }, 1000)
 
-    return () => clearInterval(interval);
-  }, [event]);
+    return () => clearInterval(interval)
+  }, [event])
 
   // 超时后关闭弹窗
   useEffect(() => {
     if (remainingTime === 0 && event) {
-      onClose();
+      onClose()
     }
-  }, [remainingTime, event, onClose]);
+  }, [remainingTime, event, onClose])
 
   const handleConfirm = async () => {
-    if (!event || selectedProjectId === 0) return;
+    if (!event || selectedProjectId === 0) return
 
     try {
       await updateSessionProject.mutateAsync({
         sessionID: event.sessionID,
         projectID: selectedProjectId,
-      });
-      onClose();
+      })
+      onClose()
     } catch (error) {
-      console.error('Failed to bind project:', error);
+      console.error('Failed to bind project:', error)
     }
-  };
+  }
 
   const handleReject = async () => {
-    if (!event) return;
+    if (!event) return
 
     try {
-      await rejectSession.mutateAsync(event.sessionID);
-      onClose();
+      await rejectSession.mutateAsync(event.sessionID)
+      onClose()
     } catch (error) {
-      console.error('Failed to reject session:', error);
+      console.error('Failed to reject session:', error)
     }
-  };
+  }
 
-  if (!event) return null;
+  if (!event) return null
 
-  const clientColor = getClientColor(event.clientType);
+  const clientColor = getClientColor(event.clientType)
 
   return (
     <Dialog open={!!event} onOpenChange={(open) => !open && onClose()}>
@@ -124,7 +124,10 @@ export function ForceProjectDialog({
                 </span>
                 <span
                   className="px-1.5 py-0.5 rounded text-[10px] font-mono font-medium"
-                  style={{ backgroundColor: `${clientColor}20`, color: clientColor }}
+                  style={{
+                    backgroundColor: `${clientColor}20`,
+                    color: clientColor,
+                  }}
                 >
                   {getClientName(event.clientType)}
                 </span>
@@ -140,8 +143,8 @@ export function ForceProjectDialog({
             className={cn(
               'relative overflow-hidden rounded-xl border p-5 flex flex-col items-center justify-center group',
               remainingTime <= 10
-                ? 'bg-gradient-to-br from-red-950/30 to-transparent border-red-500/20'
-                : 'bg-gradient-to-br from-amber-950/30 to-transparent border-amber-500/20'
+                ? 'bg-linear-to-br from-red-950/30 to-transparent border-red-500/20'
+                : 'bg-linear-to-br from-amber-950/30 to-transparent border-amber-500/20'
             )}
           >
             <div
@@ -216,7 +219,9 @@ export function ForceProjectDialog({
               {/* Reject Button */}
               <button
                 onClick={handleReject}
-                disabled={rejectSession.isPending || updateSessionProject.isPending}
+                disabled={
+                  rejectSession.isPending || updateSessionProject.isPending
+                }
                 className="flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-xl border border-red-500/30 bg-red-500/10 text-red-400 hover:bg-red-500/20 hover:border-red-500/50 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
               >
                 {rejectSession.isPending ? (
@@ -235,7 +240,11 @@ export function ForceProjectDialog({
               {/* Confirm Button */}
               <button
                 onClick={handleConfirm}
-                disabled={selectedProjectId === 0 || updateSessionProject.isPending || rejectSession.isPending}
+                disabled={
+                  selectedProjectId === 0 ||
+                  updateSessionProject.isPending ||
+                  rejectSession.isPending
+                }
                 className="flex-1 relative overflow-hidden rounded-xl p-[1px] group disabled:opacity-50 disabled:cursor-not-allowed transition-all hover:scale-[1.01] active:scale-[0.99]"
               >
                 <span className="absolute inset-0 bg-gradient-to-r from-amber-500 to-orange-600 rounded-xl" />
@@ -243,7 +252,9 @@ export function ForceProjectDialog({
                   {updateSessionProject.isPending ? (
                     <>
                       <div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
-                      <span className="text-sm font-bold text-white">绑定中...</span>
+                      <span className="text-sm font-bold text-white">
+                        绑定中...
+                      </span>
                     </>
                   ) : (
                     <>
diff --git a/web/src/components/layout/page-header.tsx b/web/src/components/layout/page-header.tsx
index 923d77fc..17bf0340 100644
--- a/web/src/components/layout/page-header.tsx
+++ b/web/src/components/layout/page-header.tsx
@@ -22,7 +22,7 @@ export function PageHeader({
     <header className="h-[73px] flex items-center justify-between px-6 border-b border-border bg-surface-primary shrink-0">
       <div className="flex items-center gap-3">
         {Icon && (
-          <div className="p-2 bg-gradient-to-br from-surface-secondary/80 to-surface-secondary/40 rounded-lg shadow-sm">
+          <div className="p-2 bg-linear-to-br from-surface-secondary/80 to-surface-secondary/40 rounded-lg shadow-sm">
             <Icon size={20} className={iconClassName} />
           </div>
         )}
diff --git a/web/src/components/provider-details-dialog.tsx b/web/src/components/provider-details-dialog.tsx
index 5da62a15..f728a098 100644
--- a/web/src/components/provider-details-dialog.tsx
+++ b/web/src/components/provider-details-dialog.tsx
@@ -27,7 +27,7 @@ import type {
 } from '@/lib/transport/types'
 import type { ProviderConfigItem } from '@/pages/client-routes/types'
 import { useCooldowns } from '@/hooks/use-cooldowns'
-import { Switch } from '@/components/ui'
+import { Button, Switch } from '@/components/ui'
 import { getProviderColor, type ProviderType } from '@/lib/theme'
 import { cn } from '@/lib/utils'
 import { Dialog, DialogContent } from '@/components/ui/dialog'
@@ -62,43 +62,48 @@ const REASON_INFO: Record<
     label: '服务器错误',
     description: '上游服务器返回 5xx 错误，系统自动进入冷却保护',
     icon: Server,
-    color: 'text-red-400',
-    bgColor: 'bg-red-400/10 border-red-400/20',
+    color: 'text-rose-500 dark:text-rose-400',
+    bgColor:
+      'bg-rose-500/10 dark:bg-rose-500/15 border-rose-500/30 dark:border-rose-500/25',
   },
   network_error: {
     label: '网络错误',
     description: '无法连接到上游服务器，可能是网络故障或服务器宕机',
     icon: Wifi,
-    color: 'text-amber-400',
-    bgColor: 'bg-amber-400/10 border-amber-400/20',
+    color: 'text-amber-600 dark:text-amber-400',
+    bgColor:
+      'bg-amber-500/10 dark:bg-amber-500/15 border-amber-500/30 dark:border-amber-500/25',
   },
   quota_exhausted: {
     label: '配额耗尽',
     description: 'API 配额已用完，等待配额重置',
     icon: AlertCircle,
-    color: 'text-red-400',
-    bgColor: 'bg-red-400/10 border-red-400/20',
+    color: 'text-rose-500 dark:text-rose-400',
+    bgColor:
+      'bg-rose-500/10 dark:bg-rose-500/15 border-rose-500/30 dark:border-rose-500/25',
   },
   rate_limit_exceeded: {
     label: '速率限制',
     description: '请求速率超过限制，触发了速率保护',
     icon: Zap,
-    color: 'text-yellow-400',
-    bgColor: 'bg-yellow-400/10 border-yellow-400/20',
+    color: 'text-yellow-600 dark:text-yellow-400',
+    bgColor:
+      'bg-yellow-500/10 dark:bg-yellow-500/15 border-yellow-500/30 dark:border-yellow-500/25',
   },
   concurrent_limit: {
     label: '并发限制',
     description: '并发请求数超过限制',
     icon: Ban,
-    color: 'text-orange-400',
-    bgColor: 'bg-orange-400/10 border-orange-400/20',
+    color: 'text-orange-600 dark:text-orange-400',
+    bgColor:
+      'bg-orange-500/10 dark:bg-orange-500/15 border-orange-500/30 dark:border-orange-500/25',
   },
   unknown: {
     label: '未知原因',
     description: '因未知原因进入冷却状态',
     icon: HelpCircle,
     color: 'text-text-muted',
-    bgColor: 'bg-surface-secondary border-border',
+    bgColor: 'bg-surface-secondary/50 border-border',
   },
 }
 
@@ -209,7 +214,9 @@ export function ProviderDetailsDialog({
               <span
                 className={cn(
                   'text-xs font-bold',
-                  enabled ? 'text-emerald-500' : 'text-text-muted'
+                  enabled
+                    ? 'text-emerald-600 dark:text-emerald-400'
+                    : 'text-text-muted'
                 )}
               >
                 {enabled ? 'ON' : 'OFF'}
@@ -221,12 +228,14 @@ export function ProviderDetailsDialog({
               />
             </div>
             <div className="w-px h-6 bg-border" />
-            <button
+            <Button
+              type="button"
               onClick={() => onOpenChange(false)}
-              className="p-2 rounded-full hover:bg-surface-hover text-text-muted hover:text-text-primary transition-colors"
+              variant={'ghost'}
+              className={'border-none rounded-full'}
             >
               <X size={18} />
-            </button>
+            </Button>
           </div>
 
           <div className="flex items-center gap-4 pr-32 lg:pr-40">
@@ -235,7 +244,7 @@ export function ProviderDetailsDialog({
               className={cn(
                 'relative w-14 h-14 lg:w-16 lg:h-16 rounded-2xl flex items-center justify-center border shadow-lg',
                 isInCooldown
-                  ? 'bg-cyan-900/40 border-cyan-500/30'
+                  ? 'bg-cyan-500/10 dark:bg-cyan-950/40 border-cyan-500/40 dark:border-cyan-500/30'
                   : 'bg-surface-secondary border-border'
               )}
               style={!isInCooldown ? { color } : {}}
@@ -244,7 +253,7 @@ export function ProviderDetailsDialog({
                 className={cn(
                   'text-2xl lg:text-3xl font-black',
                   isInCooldown
-                    ? 'text-cyan-400 opacity-20 scale-150 blur-[1px]'
+                    ? 'text-cyan-400 dark:text-cyan-300 opacity-20 scale-150 blur-[1px]'
                     : ''
                 )}
               >
@@ -253,7 +262,7 @@ export function ProviderDetailsDialog({
               {isInCooldown && (
                 <Snowflake
                   size={24}
-                  className="absolute text-cyan-400 animate-pulse drop-shadow-[0_0_8px_rgba(34,211,238,0.5)]"
+                  className="absolute text-cyan-400 dark:text-cyan-300 animate-pulse drop-shadow-[0_0_8px_rgba(34,211,238,0.5)]"
                 />
               )}
             </div>
@@ -265,11 +274,11 @@ export function ProviderDetailsDialog({
               </h2>
               <div className="flex flex-wrap items-center gap-2">
                 {isNative ? (
-                  <span className="flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold bg-emerald-500/10 text-emerald-500 border border-emerald-500/20">
+                  <span className="flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold bg-emerald-500/10 dark:bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border border-emerald-500/30 dark:border-emerald-500/25">
                     <Zap size={10} className="fill-emerald-500/20" /> NATIVE
                   </span>
                 ) : (
-                  <span className="flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold bg-amber-500/10 text-amber-500 border border-amber-500/20">
+                  <span className="flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold bg-amber-500/10 dark:bg-amber-500/15 text-amber-600 dark:text-amber-400 border border-amber-500/30 dark:border-amber-500/25">
                     <Activity size={10} /> CONVERTED
                   </span>
                 )}
@@ -277,7 +286,7 @@ export function ProviderDetailsDialog({
                   {provider.type}
                 </span>
                 {streamingCount > 0 && (
-                  <span className="px-2 py-0.5 rounded-full text-[10px] font-bold bg-blue-500/10 text-blue-400 border border-blue-500/20 animate-pulse">
+                  <span className="px-2 py-0.5 rounded-full text-[10px] font-bold bg-blue-500/10 dark:bg-blue-500/15 text-blue-600 dark:text-blue-400 border border-blue-500/30 dark:border-blue-500/25 animate-pulse">
                     {streamingCount} Streaming
                   </span>
                 )}
@@ -291,7 +300,7 @@ export function ProviderDetailsDialog({
             {/* 左侧：Provider 信息 + 操作 */}
             <div className="lg:col-span-5 xl:col-span-4 space-y-4">
               {/* Provider Basic Info Card */}
-              <div className="rounded-xl border border-border bg-surface-secondary p-4 space-y-3">
+              <div className="rounded-xl border border-border bg-muted-background p-4 space-y-3">
                 <div className="flex items-start gap-2">
                   <Info size={14} className="text-text-muted mt-0.5 shrink-0" />
                   <div className="flex-1 min-w-0">
@@ -330,44 +339,37 @@ export function ProviderDetailsDialog({
               <div className="space-y-3">
                 {/* Cooldown Actions (if in cooldown) */}
                 {isInCooldown && (
-                  <button
+                  <Button
                     onClick={onClearCooldown}
                     disabled={isClearingCooldown || isToggling}
-                    className="w-full relative overflow-hidden rounded-xl p-[1px] group disabled:opacity-50 disabled:cursor-not-allowed transition-all hover:scale-[1.01] active:scale-[0.99]"
+                    className="w-full relative overflow-hidden rounded-xl p-px group disabled:opacity-50 disabled:cursor-not-allowed transition-all hover:scale-[1.01] active:scale-[0.99] shadow-lg shadow-teal-500/20 dark:shadow-teal-500/30 hover:shadow-teal-500/40 dark:hover:shadow-teal-500/50"
                   >
-                    <span className="absolute inset-0 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-xl" />
-                    <div className="relative flex items-center justify-center gap-2 rounded-[11px] bg-surface-primary group-hover:bg-transparent px-4 py-3 transition-colors">
+                    <span className="absolute inset-0 bg-linear-to-r from-teal-500 via-cyan-500 to-blue-500 rounded-xl" />
+                    <div className="relative flex items-center justify-center gap-2 rounded-lg px-4 py-3 transition-colors">
                       {isClearingCooldown ? (
                         <>
-                          <div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
-                          <span className="text-sm font-bold text-white">
-                            Thawing...
-                          </span>
+                          <div className="h-4 w-4 animate-spin rounded-full border-2 border-teal-400/30 border-t-teal-400" />
+                          <span className="text-sm font-bold ">Thawing...</span>
                         </>
                       ) : (
                         <>
-                          <Zap
-                            size={16}
-                            className="text-cyan-400 group-hover:text-white transition-colors"
-                          />
-                          <span className="text-sm font-bold text-cyan-400 group-hover:text-white transition-colors">
-                            立即解冻
-                          </span>
+                          <Zap size={16} />
+                          立即解冻
                         </>
                       )}
                     </div>
-                  </button>
+                  </Button>
                 )}
 
                 {/* Delete Button */}
                 {onDelete && (
-                  <button
+                  <Button
                     onClick={onDelete}
-                    className="w-full flex items-center justify-center gap-2 rounded-xl border border-red-500/20 bg-red-500/5 hover:bg-red-500/10 px-4 py-2.5 text-sm font-medium text-red-400 transition-colors"
+                    className="w-full flex items-center justify-center gap-2 rounded-xl border border-rose-500/30 dark:border-rose-500/25 bg-rose-500/5 dark:bg-rose-500/10 hover:bg-rose-500/10 dark:hover:bg-rose-500/15 px-4 py-2.5 text-sm font-medium text-rose-600 dark:text-rose-400 transition-colors"
                   >
                     <Trash2 size={14} />
                     删除此路由
-                  </button>
+                  </Button>
                 )}
 
                 {/* Warning Note */}
@@ -384,8 +386,8 @@ export function ProviderDetailsDialog({
             <div className="lg:col-span-7 xl:col-span-8 space-y-4">
               {/* Cooldown Warning (if in cooldown) */}
               {isInCooldown && cooldown && (
-                <div className="rounded-xl border border-cyan-500/30 bg-gradient-to-br from-cyan-950/20 to-blue-950/10 p-4 space-y-3">
-                  <div className="flex items-center gap-2 text-cyan-400">
+                <div className="rounded-xl border p-4 space-y-3">
+                  <div className="flex items-center gap-2 text-teal-600 dark:text-teal-400">
                     <Snowflake size={16} className="animate-spin-slow" />
                     <span className="text-sm font-bold">冷却保护激活</span>
                   </div>
@@ -393,7 +395,7 @@ export function ProviderDetailsDialog({
                   <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                     {/* Reason Section */}
                     <div
-                      className={`rounded-xl border p-3 ${REASON_INFO[cooldown.reason]?.bgColor || REASON_INFO.unknown.bgColor}`}
+                      className={`rounded-xl border p-3 backdrop-blur-sm ${REASON_INFO[cooldown.reason]?.bgColor || REASON_INFO.unknown.bgColor}`}
                     >
                       <div className="flex gap-3">
                         <div
@@ -422,21 +424,21 @@ export function ProviderDetailsDialog({
                     </div>
 
                     {/* Timer Section */}
-                    <div className="relative overflow-hidden rounded-xl bg-gradient-to-br from-cyan-950/30 to-transparent border border-cyan-500/20 p-4 flex flex-col items-center justify-center group">
-                      <div className="absolute inset-0 bg-cyan-400/5 opacity-50 group-hover:opacity-100 transition-opacity" />
-                      <div className="relative flex items-center gap-1.5 text-cyan-500 mb-1">
+                    <div className="relative overflow-hidden rounded-xl bg-gradient-to-br from-teal-500/10 via-cyan-500/5 to-transparent dark:from-teal-950/40 dark:via-cyan-950/20 dark:to-transparent border border-teal-400/30 dark:border-teal-500/20 p-4 flex flex-col items-center justify-center group shadow-inner">
+                      <div className="absolute inset-0 bg-gradient-to-br from-teal-400/5 to-cyan-400/5 dark:from-teal-400/5 dark:to-cyan-400/5 opacity-50 group-hover:opacity-100 transition-opacity" />
+                      <div className="relative flex items-center gap-1.5 text-teal-600 dark:text-teal-400 mb-1">
                         <Thermometer size={12} />
                         <span className="text-[9px] font-bold uppercase tracking-widest">
                           Remaining
                         </span>
                       </div>
-                      <div className="relative font-mono text-2xl lg:text-3xl font-bold text-cyan-400 tracking-widest tabular-nums drop-shadow-[0_0_8px_rgba(34,211,238,0.3)]">
+                      <div className="relative font-mono text-2xl lg:text-3xl font-bold text-teal-600 dark:text-teal-400 tracking-widest tabular-nums drop-shadow-[0_0_12px_rgba(20,184,166,0.4)]">
                         {liveCountdown}
                       </div>
                       {(() => {
                         const untilDateStr = formatUntilTime(cooldown.untilTime)
                         return (
-                          <div className="relative mt-2 text-[10px] text-cyan-500/70 font-mono flex items-center gap-2">
+                          <div className="relative mt-2 text-[10px] text-teal-600/70 dark:text-teal-400/70 font-mono flex items-center gap-2">
                             <Clock size={10} />
                             {untilDateStr}
                           </div>
@@ -459,33 +461,38 @@ export function ProviderDetailsDialog({
                 {stats && stats.totalRequests > 0 ? (
                   <div className="grid grid-cols-2 lg:grid-cols-4 gap-2 lg:gap-3">
                     {/* Requests */}
-                    <div className="p-3 rounded-lg bg-surface-secondary border border-border">
+                    <div className="p-3 rounded-lg bg-linear-to-br from-slate-50 to-slate-100/50 dark:from-slate-900/50 dark:to-slate-800/30 border border-slate-200 dark:border-slate-700/50 shadow-sm hover:shadow-md transition-shadow">
                       <div className="flex items-center gap-1.5 mb-2">
-                        <Hash size={12} className="text-text-muted" />
-                        <span className="text-[9px] font-bold text-text-muted uppercase tracking-wider">
+                        <Hash
+                          size={12}
+                          className="text-slate-500 dark:text-slate-400"
+                        />
+                        <span className="text-[9px] font-bold text-slate-600 dark:text-slate-400 uppercase tracking-wider">
                           Requests
                         </span>
                       </div>
                       <div className="space-y-1">
                         <div className="flex items-center justify-between text-xs">
-                          <span className="text-text-secondary">Total</span>
-                          <span className="font-mono font-bold text-text-primary">
+                          <span className="text-slate-600 dark:text-slate-400">
+                            Total
+                          </span>
+                          <span className="font-mono font-bold text-slate-900 dark:text-slate-100">
                             {stats.totalRequests}
                           </span>
                         </div>
                         <div className="flex items-center justify-between text-xs">
-                          <span className="text-emerald-500 flex items-center gap-1">
+                          <span className="text-emerald-600 dark:text-emerald-400 flex items-center gap-1">
                             <CheckCircle2 size={10} /> OK
                           </span>
-                          <span className="font-mono font-bold text-emerald-500">
+                          <span className="font-mono font-bold text-emerald-600 dark:text-emerald-400">
                             {stats.successfulRequests}
                           </span>
                         </div>
                         <div className="flex items-center justify-between text-xs">
-                          <span className="text-red-400 flex items-center gap-1">
+                          <span className="text-rose-600 dark:text-rose-400 flex items-center gap-1">
                             <XCircle size={10} /> Fail
                           </span>
-                          <span className="font-mono font-bold text-red-400">
+                          <span className="font-mono font-bold text-rose-600 dark:text-rose-400">
                             {stats.failedRequests}
                           </span>
                         </div>
@@ -493,22 +500,25 @@ export function ProviderDetailsDialog({
                     </div>
 
                     {/* Success Rate */}
-                    <div className="p-3 rounded-lg bg-surface-secondary border border-border">
+                    <div className="p-3 rounded-lg bg-linear-to-br from-emerald-50 to-emerald-100/50 dark:from-emerald-950/30 dark:to-emerald-900/20 border border-emerald-200 dark:border-emerald-800/50 shadow-sm hover:shadow-md transition-shadow">
                       <div className="flex items-center gap-1.5 mb-2">
-                        <Activity size={12} className="text-text-muted" />
-                        <span className="text-[9px] font-bold text-text-muted uppercase tracking-wider">
+                        <Activity
+                          size={12}
+                          className="text-emerald-600 dark:text-emerald-400"
+                        />
+                        <span className="text-[9px] font-bold text-emerald-700 dark:text-emerald-400 uppercase tracking-wider">
                           Success Rate
                         </span>
                       </div>
                       <div className="flex flex-col items-center justify-center h-[52px]">
                         <div
                           className={cn(
-                            'text-2xl lg:text-3xl font-black font-mono',
+                            'text-2xl lg:text-3xl font-black font-mono drop-shadow-sm',
                             stats.successRate >= 95
-                              ? 'text-emerald-500'
+                              ? 'text-emerald-600 dark:text-emerald-400'
                               : stats.successRate >= 90
-                                ? 'text-blue-400'
-                                : 'text-amber-500'
+                                ? 'text-blue-600 dark:text-blue-400'
+                                : 'text-amber-600 dark:text-amber-400'
                           )}
                         >
                           {Math.round(stats.successRate)}%
@@ -517,29 +527,38 @@ export function ProviderDetailsDialog({
                     </div>
 
                     {/* Tokens */}
-                    <div className="p-3 rounded-lg bg-surface-secondary border border-border">
+                    <div className="p-3 rounded-lg bg-linear-to-br from-blue-50 to-blue-100/50 dark:from-blue-950/30 dark:to-blue-900/20 border border-blue-200 dark:border-blue-800/50 shadow-sm hover:shadow-md transition-shadow">
                       <div className="flex items-center gap-1.5 mb-2">
-                        <Zap size={12} className="text-text-muted" />
-                        <span className="text-[9px] font-bold text-text-muted uppercase tracking-wider">
+                        <Zap
+                          size={12}
+                          className="text-blue-600 dark:text-blue-400"
+                        />
+                        <span className="text-[9px] font-bold text-blue-700 dark:text-blue-400 uppercase tracking-wider">
                           Tokens
                         </span>
                       </div>
                       <div className="space-y-1">
                         <div className="flex items-center justify-between text-xs">
-                          <span className="text-text-secondary">In</span>
-                          <span className="font-mono font-bold text-blue-400">
+                          <span className="text-blue-600 dark:text-blue-400">
+                            In
+                          </span>
+                          <span className="font-mono font-bold text-blue-700 dark:text-blue-300">
                             {formatTokens(stats.totalInputTokens)}
                           </span>
                         </div>
                         <div className="flex items-center justify-between text-xs">
-                          <span className="text-text-secondary">Out</span>
-                          <span className="font-mono font-bold text-purple-400">
+                          <span className="text-purple-600 dark:text-purple-400">
+                            Out
+                          </span>
+                          <span className="font-mono font-bold text-purple-700 dark:text-purple-300">
                             {formatTokens(stats.totalOutputTokens)}
                           </span>
                         </div>
                         <div className="flex items-center justify-between text-xs">
-                          <span className="text-text-secondary">Cache</span>
-                          <span className="font-mono font-bold text-cyan-400">
+                          <span className="text-cyan-600 dark:text-cyan-400">
+                            Cache
+                          </span>
+                          <span className="font-mono font-bold text-cyan-700 dark:text-cyan-300">
                             {formatTokens(
                               stats.totalCacheRead + stats.totalCacheWrite
                             )}
@@ -549,25 +568,28 @@ export function ProviderDetailsDialog({
                     </div>
 
                     {/* Cost */}
-                    <div className="p-3 rounded-lg bg-surface-secondary border border-border">
+                    <div className="p-3 rounded-lg bg-linear-to-br from-purple-50 to-purple-100/50 dark:from-purple-950/30 dark:to-purple-900/20 border border-purple-200 dark:border-purple-800/50 shadow-sm hover:shadow-md transition-shadow">
                       <div className="flex items-center gap-1.5 mb-2">
-                        <DollarSign size={12} className="text-text-muted" />
-                        <span className="text-[9px] font-bold text-text-muted uppercase tracking-wider">
+                        <DollarSign
+                          size={12}
+                          className="text-purple-600 dark:text-purple-400"
+                        />
+                        <span className="text-[9px] font-bold text-purple-700 dark:text-purple-400 uppercase tracking-wider">
                           Cost
                         </span>
                       </div>
                       <div className="flex flex-col items-center justify-center h-[52px]">
-                        <div className="text-xl lg:text-2xl font-black font-mono text-purple-400">
+                        <div className="text-xl lg:text-2xl font-black font-mono text-purple-700 dark:text-purple-300 drop-shadow-sm">
                           {formatCost(stats.totalCost)}
                         </div>
-                        <div className="text-[9px] text-text-muted mt-0.5">
+                        <div className="text-[9px] text-purple-600/70 dark:text-purple-400/70 mt-0.5 font-medium">
                           Cache: {calcCacheRate(stats).toFixed(1)}%
                         </div>
                       </div>
                     </div>
                   </div>
                 ) : (
-                  <div className="p-6 lg:p-8 flex flex-col items-center gap-2 text-text-muted/30 rounded-lg bg-surface-secondary border border-border">
+                  <div className="p-6 lg:p-8 flex flex-col items-center gap-2 text-slate-400 dark:text-slate-500 rounded-lg bg-gradient-to-br from-slate-50 to-slate-100/50 dark:from-slate-900/30 dark:to-slate-800/20 border border-slate-200 dark:border-slate-700/50">
                     <Activity size={24} />
                     <span className="text-xs font-bold uppercase tracking-widest">
                       No Statistics Available
diff --git a/web/src/components/routes/ClientTypeRoutesContent.tsx b/web/src/components/routes/ClientTypeRoutesContent.tsx
index 66db6b9f..3699fd74 100644
--- a/web/src/components/routes/ClientTypeRoutesContent.tsx
+++ b/web/src/components/routes/ClientTypeRoutesContent.tsx
@@ -232,7 +232,7 @@ export function ClientTypeRoutesContent({
                 items={items}
                 strategy={verticalListSortingStrategy}
               >
-                <div className="space-y-sm">
+                <div className="space-y-2">
                   {items.map((item, index) => (
                     <SortableProviderRow
                       key={item.id}
@@ -337,7 +337,10 @@ export function ClientTypeRoutesContent({
                             </span>
                             {isNative ? (
                               <span className="flex items-center gap-1 px-2 py-0.5 rounded-md text-[10px] font-bold bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 whitespace-nowrap">
-                                <Zap size={10} className="fill-current opacity-30" />
+                                <Zap
+                                  size={10}
+                                  className="fill-current opacity-30"
+                                />
                                 NATIVE
                               </span>
                             ) : (
diff --git a/web/src/hooks/use-cooldowns.ts b/web/src/hooks/use-cooldowns.ts
index ac7a9638..ecb4eff3 100644
--- a/web/src/hooks/use-cooldowns.ts
+++ b/web/src/hooks/use-cooldowns.ts
@@ -71,7 +71,11 @@ export function useCooldowns() {
 
   // Helper to get remaining time as seconds
   const getRemainingSeconds = (cooldown: Cooldown) => {
-    const until = new Date(cooldown.untilTime);
+    // Handle both 'untilTime' and 'until' field names for backward compatibility
+    const untilTime = cooldown.untilTime || (cooldown as Record<string, unknown>).until as string;
+    if (!untilTime) return 0;
+
+    const until = new Date(untilTime);
     const now = new Date();
     const diff = until.getTime() - now.getTime();
     return Math.max(0, Math.floor(diff / 1000));
@@ -81,7 +85,7 @@ export function useCooldowns() {
   const formatRemaining = (cooldown: Cooldown) => {
     const seconds = getRemainingSeconds(cooldown);
 
-    if (seconds === 0) return 'Expired';
+    if (Number.isNaN(seconds) || seconds === 0) return 'Expired';
 
     const hours = Math.floor(seconds / 3600);
     const minutes = Math.floor((seconds % 3600) / 60);
diff --git a/web/src/pages/client-routes/components/provider-row.tsx b/web/src/pages/client-routes/components/provider-row.tsx
index 1003122a..732b4315 100644
--- a/web/src/pages/client-routes/components/provider-row.tsx
+++ b/web/src/pages/client-routes/components/provider-row.tsx
@@ -6,7 +6,7 @@ import {
   Snowflake,
   Info,
 } from 'lucide-react'
-import { Switch } from '@/components/ui'
+import { Button, Switch } from '@/components/ui'
 import { StreamingBadge } from '@/components/ui/streaming-badge'
 import { useSortable } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
@@ -250,15 +250,16 @@ export function ProviderRowContent({
   }
 
   return (
-    <div
+    <Button
+      variant={null}
       onClick={handleContentClick}
       className={cn(
-        'group relative flex items-center gap-4 p-3 rounded-xl border transition-all duration-300 overflow-hidden',
+        'group relative flex items-center gap-4 p-3 rounded-xl border transition-all duration-300 overflow-hidden w-full h-auto',
         isInCooldown
-          ? 'bg-gradient-to-r from-cyan-950/40 to-blue-950/40 border-cyan-500/30 shadow-[0_0_20px_rgba(6,182,212,0.1)] cursor-pointer'
+          ? 'bg-teal-200/70 dark:bg-teal-950/80 border-teal-400/60 shadow-[0_0_25px_rgba(20,184,166,0.3)] cursor-pointer'
           : enabled
             ? streamingCount > 0
-              ? 'bg-surface-primary border-transparent ring-1 ring-black/5 dark:ring-white/10'
+              ? 'bg-accent/5 border-transparent ring-1 ring-black/5 dark:ring-white/10'
               : 'bg-surface-primary/60 border-border hover:border-emerald-500/30 hover:bg-surface-primary shadow-sm cursor-pointer'
             : 'bg-surface-secondary/40 border-dashed border-border opacity-70 cursor-pointer grayscale-[0.5] hover:opacity-100 hover:grayscale-0'
       )}
@@ -284,8 +285,8 @@ export function ProviderRowContent({
       {/* Cooldown 冰冻效果 - 增强版 */}
       {isInCooldown && (
         <>
-          <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/5 via-transparent to-blue-600/5 pointer-events-none animate-pulse" />
-          <div className="absolute inset-x-0 top-0 h-[1px] bg-gradient-to-r from-transparent via-cyan-400/20 to-transparent" />
+          <div className="absolute inset-0 bg-linear-to-br from-cyan-500/5 via-transparent to-blue-600/5 pointer-events-none animate-pulse" />
+          <div className="absolute inset-x-0 top-0 h-[1px] bg-linear-to-r from-transparent via-cyan-400/20 to-transparent" />
           {/* 雪花动画 (CSS Background) */}
           <div className="absolute inset-0 animate-snowing pointer-events-none opacity-60" />
           <div className="absolute inset-0 animate-snowing-secondary pointer-events-none opacity-60" />
@@ -350,7 +351,7 @@ export function ProviderRowContent({
               className={cn(
                 'text-[14px] font-bold truncate transition-colors',
                 isInCooldown
-                  ? 'text-cyan-200'
+                  ? 'text-text-primary'
                   : enabled
                     ? 'text-text-primary'
                     : 'text-text-muted'
@@ -375,7 +376,7 @@ export function ProviderRowContent({
             className={cn(
               'text-[11px] font-medium truncate flex items-center gap-1',
               isInCooldown
-                ? 'text-cyan-500/70'
+                ? 'text-text-muted'
                 : enabled
                   ? 'text-text-muted'
                   : 'text-text-muted/50'
@@ -435,23 +436,23 @@ export function ProviderRowContent({
 
         {/* Center-placed Countdown (when in cooldown) or Stats Grid */}
         {isInCooldown && cooldown ? (
-          <div className="flex items-center gap-3 bg-cyan-950/40 rounded-xl border border-cyan-500/40 p-1 px-3 backdrop-blur-md shadow-[0_0_15px_rgba(6,182,212,0.1)]">
+          <div className="flex items-center gap-3 bg-white/80 dark:bg-teal-950/60 rounded-xl border border-teal-500/50 p-1 px-3 backdrop-blur-md shadow-[0_0_15px_rgba(20,184,166,0.15)]">
             <div className="flex flex-col items-center">
-              <span className="text-[8px] font-black text-cyan-500/60 uppercase tracking-tight">
+              <span className="text-[8px] font-black text-teal-600 dark:text-teal-500/60 uppercase tracking-tight">
                 Remaining
               </span>
               <div className="flex items-center gap-1.5">
                 <Snowflake
                   size={12}
-                  className="text-cyan-400 animate-spin-slow"
+                  className="text-teal-500 dark:text-teal-400 animate-spin-slow"
                 />
-                <span className="text-sm font-mono font-black text-cyan-400">
+                <span className="text-sm font-mono font-black text-teal-600 dark:text-teal-400">
                   {liveCountdown}
                 </span>
               </div>
             </div>
-            <div className="w-px h-6 bg-cyan-500/20" />
-            <div className="flex flex-col items-center text-cyan-500/40">
+            <div className="w-px h-6 bg-teal-500/20" />
+            <div className="flex flex-col items-center text-teal-600/60 dark:text-teal-500/40">
               <Zap size={14} />
               <span className="text-[8px] font-bold">FROZEN</span>
             </div>
@@ -517,10 +518,15 @@ export function ProviderRowContent({
           </div>
         )}
       </div>
-
+      {/* Streaming Indicator - Inline before Switch */}
+      {enabled && streamingCount > 0 && !isInCooldown && (
+        <div className="relative z-10 flex items-center shrink-0">
+          <StreamingBadge count={streamingCount} color={color} />
+        </div>
+      )}
       {/* Control Area - Switch */}
       <div
-        className="relative z-10 flex items-center shrink-0 ml-auto pl-2"
+        className="relative z-10 flex items-center shrink-0  pl-2"
         onClick={e => e.stopPropagation()}
         onPointerDown={e => e.stopPropagation()}
       >
@@ -530,13 +536,6 @@ export function ProviderRowContent({
           disabled={isToggling}
         />
       </div>
-
-      {/* Streaming Indicator - Top Right */}
-      {enabled && streamingCount > 0 && !isInCooldown && (
-        <div className="absolute top-0 right-0 z-20">
-          <StreamingBadge count={streamingCount} color={color} />
-        </div>
-      )}
-    </div>
+    </Button>
   )
 }
diff --git a/web/src/pages/overview.tsx b/web/src/pages/overview.tsx
index d9487157..5a9d332b 100644
--- a/web/src/pages/overview.tsx
+++ b/web/src/pages/overview.tsx
@@ -85,7 +85,7 @@ export function OverviewPage() {
           {/* Welcome Section */}
           {!hasProviders && (
             <div className="text-center py-16 md:py-20 px-4">
-              <div className="w-24 h-24 rounded-3xl bg-gradient-to-br from-violet-500 to-indigo-600 flex items-center justify-center mx-auto mb-8 shadow-xl shadow-indigo-500/20 animate-pulse-slow ring-4 ring-white/50 dark:ring-white/10">
+              <div className="w-24 h-24 rounded-3xl bg-linear-to-br from-violet-500 to-indigo-600 flex items-center justify-center mx-auto mb-8 shadow-xl shadow-indigo-500/20 animate-pulse-slow ring-4 ring-white/50 dark:ring-white/10">
                 <Zap size={40} className="text-white drop-shadow-md" />
               </div>
               <h1 className="text-3xl md:text-5xl font-bold text-foreground mb-6 tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-violet-600 to-indigo-600 dark:from-violet-400 dark:to-indigo-400">
diff --git a/web/src/pages/providers/components/provider-create-flow.tsx b/web/src/pages/providers/components/provider-create-flow.tsx
index 135dc4fd..3401cfe8 100644
--- a/web/src/pages/providers/components/provider-create-flow.tsx
+++ b/web/src/pages/providers/components/provider-create-flow.tsx
@@ -1,23 +1,31 @@
-import { useState } from 'react';
-import { Globe, ChevronLeft, Key, Check } from 'lucide-react';
-import { useCreateProvider } from '@/hooks/queries';
-import type { ClientType, CreateProviderData } from '@/lib/transport';
-import { quickTemplates, defaultClients, type ClientConfig, type ProviderFormData, type CreateStep } from '../types';
-import { ClientsConfigSection } from './clients-config-section';
-import { SelectTypeStep } from './select-type-step';
-import { AntigravityTokenImport } from './antigravity-token-import';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
+import { useState } from 'react'
+import { Globe, ChevronLeft, Key, Check } from 'lucide-react'
+import { useCreateProvider } from '@/hooks/queries'
+import type { ClientType, CreateProviderData } from '@/lib/transport'
+import {
+  quickTemplates,
+  defaultClients,
+  type ClientConfig,
+  type ProviderFormData,
+  type CreateStep,
+} from '../types'
+import { ClientsConfigSection } from './clients-config-section'
+import { SelectTypeStep } from './select-type-step'
+import { AntigravityTokenImport } from './antigravity-token-import'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
 
 interface ProviderCreateFlowProps {
-  onClose: () => void;
+  onClose: () => void
 }
 
 export function ProviderCreateFlow({ onClose }: ProviderCreateFlowProps) {
-  const [step, setStep] = useState<CreateStep>('select-type');
-  const [saving, setSaving] = useState(false);
-  const [saveStatus, setSaveStatus] = useState<'idle' | 'success' | 'error'>('idle');
-  const createProvider = useCreateProvider();
+  const [step, setStep] = useState<CreateStep>('select-type')
+  const [saving, setSaving] = useState(false)
+  const [saveStatus, setSaveStatus] = useState<'idle' | 'success' | 'error'>(
+    'idle'
+  )
+  const createProvider = useCreateProvider()
 
   const [formData, setFormData] = useState<ProviderFormData>({
     type: 'custom',
@@ -26,64 +34,73 @@ export function ProviderCreateFlow({ onClose }: ProviderCreateFlowProps) {
     baseURL: '',
     apiKey: '',
     clients: [...defaultClients],
-  });
+  })
 
   const selectType = (type: 'custom' | 'antigravity') => {
-    setFormData((prev) => ({ ...prev, type }));
+    setFormData(prev => ({ ...prev, type }))
     if (type === 'antigravity') {
-      setStep('antigravity-import');
+      setStep('antigravity-import')
     }
-  };
+  }
 
   const applyTemplate = (templateId: string) => {
-    const template = quickTemplates.find((t) => t.id === templateId);
+    const template = quickTemplates.find(t => t.id === templateId)
     if (template) {
-      const updatedClients = defaultClients.map((client) => {
-        const isSupported = template.supportedClients.includes(client.id);
-        const baseURL = template.clientBaseURLs[client.id] || '';
-        return { ...client, enabled: isSupported, urlOverride: baseURL };
-      });
+      const updatedClients = defaultClients.map(client => {
+        const isSupported = template.supportedClients.includes(client.id)
+        const baseURL = template.clientBaseURLs[client.id] || ''
+        return { ...client, enabled: isSupported, urlOverride: baseURL }
+      })
 
-      setFormData((prev) => ({
+      setFormData(prev => ({
         ...prev,
         selectedTemplate: templateId,
         name: template.name,
         clients: updatedClients,
-      }));
+      }))
 
-      setStep('custom-config');
+      setStep('custom-config')
     }
-  };
+  }
 
-  const updateClient = (clientId: ClientType, updates: Partial<ClientConfig>) => {
-    setFormData((prev) => ({
+  const updateClient = (
+    clientId: ClientType,
+    updates: Partial<ClientConfig>
+  ) => {
+    setFormData(prev => ({
       ...prev,
-      clients: prev.clients.map((c) => (c.id === clientId ? { ...c, ...updates } : c)),
-    }));
-  };
+      clients: prev.clients.map(c =>
+        c.id === clientId ? { ...c, ...updates } : c
+      ),
+    }))
+  }
 
   const isValid = () => {
-    if (!formData.name.trim()) return false;
-    if (!formData.apiKey.trim()) return false;
-    const hasEnabledClient = formData.clients.some((c) => c.enabled);
-    const hasUrl = formData.baseURL.trim() || formData.clients.some((c) => c.enabled && c.urlOverride.trim());
-    return hasEnabledClient && hasUrl;
-  };
+    if (!formData.name.trim()) return false
+    if (!formData.apiKey.trim()) return false
+    const hasEnabledClient = formData.clients.some(c => c.enabled)
+    const hasUrl =
+      formData.baseURL.trim() ||
+      formData.clients.some(c => c.enabled && c.urlOverride.trim())
+    return hasEnabledClient && hasUrl
+  }
 
   const handleSave = async () => {
-    if (!isValid()) return;
+    if (!isValid()) return
 
-    setSaving(true);
-    setSaveStatus('idle');
+    setSaving(true)
+    setSaveStatus('idle')
 
     try {
-      const supportedClientTypes = formData.clients.filter((c) => c.enabled).map((c) => c.id);
-      const clientBaseURL: Partial<Record<ClientType, string>> = {};
-      formData.clients.forEach((c) => {
+      const supportedClientTypes = formData.clients
+        .filter(c => c.enabled)
+        .map(c => c.id)
+      const clientBaseURL: Partial<Record<ClientType, string>> = {}
+      formData.clients.forEach(c => {
         if (c.enabled && c.urlOverride) {
-          clientBaseURL[c.id] = c.urlOverride;
+          clientBaseURL[c.id] = c.urlOverride
         }
-      });
+      })
 
       const data: CreateProviderData = {
         type: 'custom',
@@ -92,30 +109,31 @@ export function ProviderCreateFlow({ onClose }: ProviderCreateFlowProps) {
           custom: {
             baseURL: formData.baseURL,
             apiKey: formData.apiKey,
-            clientBaseURL: Object.keys(clientBaseURL).length > 0 ? clientBaseURL : undefined,
+            clientBaseURL:
+              Object.keys(clientBaseURL).length > 0 ? clientBaseURL : undefined,
           },
         },
         supportedClientTypes,
-      };
+      }
 
-      await createProvider.mutateAsync(data);
-      setSaveStatus('success');
-      setTimeout(() => onClose(), 500);
+      await createProvider.mutateAsync(data)
+      setSaveStatus('success')
+      setTimeout(() => onClose(), 500)
     } catch (error) {
-      console.error('Failed to create provider:', error);
-      setSaveStatus('error');
+      console.error('Failed to create provider:', error)
+      setSaveStatus('error')
     } finally {
-      setSaving(false);
+      setSaving(false)
     }
-  };
+  }
 
   const handleBack = () => {
     if (step === 'custom-config' || step === 'antigravity-import') {
-      setStep('select-type');
+      setStep('select-type')
     } else {
-      onClose();
+      onClose()
     }
-  };
+  }
 
   if (step === 'select-type') {
     return (
@@ -126,31 +144,39 @@ export function ProviderCreateFlow({ onClose }: ProviderCreateFlowProps) {
         onSkipToConfig={() => setStep('custom-config')}
         onBack={handleBack}
       />
-    );
+    )
   }
 
   if (step === 'antigravity-import') {
-    const handleCreateAntigravityProvider = async (data: CreateProviderData) => {
-      await createProvider.mutateAsync(data);
-      onClose();
-    };
-    return <AntigravityTokenImport onBack={handleBack} onCreateProvider={handleCreateAntigravityProvider} />;
+    const handleCreateAntigravityProvider = async (
+      data: CreateProviderData
+    ) => {
+      await createProvider.mutateAsync(data)
+      onClose()
+    }
+    return (
+      <AntigravityTokenImport
+        onBack={handleBack}
+        onCreateProvider={handleCreateAntigravityProvider}
+      />
+    )
   }
 
   // Custom: Configuration
   return (
     <div className="flex flex-col h-full">
-      <div className="h-[73px] flex items-center justify-between px-6 border-b border-border bg-surface-primary">
+      <div className="h-[73px] flex items-center justify-between px-6 border-b border-border bg-card">
         <div className="flex items-center gap-md">
-          <button
-            onClick={handleBack}
-            className="p-1.5 -ml-1 rounded-lg hover:bg-surface-hover text-text-secondary hover:text-text-primary transition-colors"
-          >
+          <Button onClick={handleBack} variant="ghost" size="sm">
             <ChevronLeft size={20} />
-          </button>
+          </Button>
           <div>
-            <h2 className="text-headline font-semibold text-text-primary">Configure Provider</h2>
-            <p className="text-caption text-text-secondary">Set up your custom provider connection</p>
+            <h2 className="text-headline font-semibold text-foreground">
+              Configure Provider
+            </h2>
+            <p className="text-caption text-muted-foreground">
+              Set up your custom provider connection
+            </p>
           </div>
         </div>
         <div className="flex items-center gap-sm">
@@ -177,19 +203,22 @@ export function ProviderCreateFlow({ onClose }: ProviderCreateFlowProps) {
 
       <div className="flex-1 overflow-y-auto p-6">
         <div className="mx-auto max-w-7xl space-y-8">
-          
           <div className="space-y-6">
             <h3 className="text-lg font-semibold text-text-primary border-b border-border pb-2">
               1. Basic Information
             </h3>
-            
+
             <div className="grid gap-6">
               <div>
-                <label className="text-sm font-medium text-text-primary block mb-2">Display Name</label>
+                <label className="text-sm font-medium text-text-primary block mb-2">
+                  Display Name
+                </label>
                 <Input
                   type="text"
                   value={formData.name}
-                  onChange={(e) => setFormData((prev) => ({ ...prev, name: e.target.value }))}
+                  onChange={e =>
+                    setFormData(prev => ({ ...prev, name: e.target.value }))
+                  }
                   placeholder="e.g. Production OpenAI"
                   className="w-full"
                 />
@@ -206,7 +235,12 @@ export function ProviderCreateFlow({ onClose }: ProviderCreateFlowProps) {
                   <Input
                     type="text"
                     value={formData.baseURL}
-                    onChange={(e) => setFormData((prev) => ({ ...prev, baseURL: e.target.value }))}
+                    onChange={e =>
+                      setFormData(prev => ({
+                        ...prev,
+                        baseURL: e.target.value,
+                      }))
+                    }
                     placeholder="https://api.openai.com/v1"
                     className="w-full"
                   />
@@ -225,7 +259,9 @@ export function ProviderCreateFlow({ onClose }: ProviderCreateFlowProps) {
                   <Input
                     type="password"
                     value={formData.apiKey}
-                    onChange={(e) => setFormData((prev) => ({ ...prev, apiKey: e.target.value }))}
+                    onChange={e =>
+                      setFormData(prev => ({ ...prev, apiKey: e.target.value }))
+                    }
                     placeholder="sk-..."
                     className="w-full"
                   />
@@ -235,20 +271,24 @@ export function ProviderCreateFlow({ onClose }: ProviderCreateFlowProps) {
           </div>
 
           <div className="space-y-6">
-             <h3 className="text-lg font-semibold text-text-primary border-b border-border pb-2">
-               2. Client Configuration
-             </h3>
-             <ClientsConfigSection clients={formData.clients} onUpdateClient={updateClient} />
+            <h3 className="text-lg font-semibold text-text-primary border-b border-border pb-2">
+              2. Client Configuration
+            </h3>
+            <ClientsConfigSection
+              clients={formData.clients}
+              onUpdateClient={updateClient}
+            />
           </div>
 
           {saveStatus === 'error' && (
             <div className="p-4 bg-error/10 border border-error/30 rounded-lg text-sm text-error flex items-center gap-2">
               <div className="w-1.5 h-1.5 rounded-full bg-error" />
-              Failed to create provider. Please check your connection and try again.
+              Failed to create provider. Please check your connection and try
+              again.
             </div>
           )}
         </div>
       </div>
     </div>
-  );
+  )
 }
diff --git a/web/src/pages/providers/components/select-type-step.tsx b/web/src/pages/providers/components/select-type-step.tsx
index 287d8201..94371506 100644
--- a/web/src/pages/providers/components/select-type-step.tsx
+++ b/web/src/pages/providers/components/select-type-step.tsx
@@ -1,12 +1,24 @@
-import { Server, Wand2, ChevronLeft, Layers, Grid3X3, CheckCircle2, FilePlus } from 'lucide-react';
-import { ANTIGRAVITY_COLOR, quickTemplates, type ProviderFormData } from '../types';
+import {
+  Server,
+  Wand2,
+  ChevronLeft,
+  Layers,
+  Grid3X3,
+  CheckCircle2,
+  FilePlus,
+} from 'lucide-react'
+import {
+  quickTemplates,
+  type ProviderFormData,
+} from '../types'
+import { Button } from '@/components/ui'
 
 interface SelectTypeStepProps {
-  formData: ProviderFormData;
-  onSelectType: (type: 'custom' | 'antigravity') => void;
-  onApplyTemplate: (templateId: string) => void;
-  onSkipToConfig: () => void;
-  onBack: () => void;
+  formData: ProviderFormData
+  onSelectType: (type: 'custom' | 'antigravity') => void
+  onApplyTemplate: (templateId: string) => void
+  onSkipToConfig: () => void
+  onBack: () => void
 }
 
 export function SelectTypeStep({
@@ -18,80 +30,85 @@ export function SelectTypeStep({
 }: SelectTypeStepProps) {
   return (
     <div className="flex flex-col h-full">
-      <div className="h-[73px] flex items-center gap-md p-lg border-b border-border bg-surface-primary">
-        <button
-          onClick={onBack}
-          className="p-1.5 -ml-1 rounded-lg hover:bg-surface-hover text-text-secondary hover:text-text-primary transition-colors"
-        >
+      <div className="px-6 h-[73px] flex items-center gap-4  border-b border-border bg-card">
+        <Button onClick={onBack} variant={'ghost'}>
           <ChevronLeft size={20} />
-        </button>
+        </Button>
         <div>
-          <h2 className="text-headline font-semibold text-text-primary">Add Provider</h2>
-          <p className="text-caption text-text-secondary">Choose a service provider to get started</p>
+          <h2 className="text-headline font-semibold text-foreground">
+            Add Provider
+          </h2>
+          <p className="text-caption text-muted-foreground">
+            Choose a service provider to get started
+          </p>
         </div>
       </div>
 
-      <div className="flex-1 overflow-y-auto p-lg">
+      <div className="flex-1 overflow-y-auto p-6">
         <div className="container mx-auto max-w-[1600px] space-y-10">
-          
           {/* Section: Service Provider */}
           <div className="space-y-4">
-            <h3 className="text-lg font-semibold text-text-primary border-b border-border pb-2">
+            <h3 className="text-lg font-semibold text-foreground border-b border-border pb-2">
               1. Choose Service Provider
             </h3>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-              <button
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <Button
                 onClick={() => onSelectType('antigravity')}
-                className={`relative group flex items-start gap-5 p-6 rounded-xl border-2 text-left transition-all duration-200 ${
+                variant="ghost"
+                className={`group p-0 rounded-lg border text-left transition-all h-auto ${
                   formData.type === 'antigravity'
-                    ? 'border-accent bg-accent/5'
-                    : 'border-border bg-surface-secondary hover:bg-surface-hover hover:border-accent/50'
+                    ? 'border-provider-antigravity bg-provider-antigravity/10'
+                    : 'border-border bg-card hover:bg-muted'
                 }`}
               >
-                {formData.type === 'antigravity' && (
-                  <div className="absolute top-4 right-4 text-accent animate-in zoom-in duration-200">
-                    <CheckCircle2 size={24} className="fill-accent/10" />
+                <div className="p-5 flex items-center gap-4">
+                  <div className="w-12 h-12 rounded-md bg-provider-antigravity/15 flex items-center justify-center shrink-0">
+                    <Wand2 size={24} className="text-provider-antigravity" />
                   </div>
-                )}
-                
-                <div
-                  className="w-16 h-16 rounded-2xl flex items-center justify-center shrink-0 shadow-sm transition-transform group-hover:scale-105"
-                  style={{ backgroundColor: `${ANTIGRAVITY_COLOR}15` }}
-                >
-                  <Wand2 size={32} style={{ color: ANTIGRAVITY_COLOR }} />
-                </div>
-                <div>
-                  <div className="text-lg font-bold text-text-primary mb-1">Antigravity Cloud</div>
-                  <p className="text-sm text-text-secondary leading-relaxed pr-6">
-                    Zero-config managed service. Connects to multiple AI models securely via OAuth.
-                  </p>
+
+                  <div className="flex-1 min-w-0">
+                    <h3 className="text-headline font-semibold text-foreground mb-1">
+                      Antigravity Cloud
+                    </h3>
+                    <p className="text-caption text-muted-foreground">
+                      Zero-config managed service with OAuth
+                    </p>
+                  </div>
+
+                  {formData.type === 'antigravity' && (
+                    <CheckCircle2 size={20} className="text-provider-antigravity shrink-0" />
+                  )}
                 </div>
-              </button>
+              </Button>
 
-              <button
+              <Button
                 onClick={() => onSelectType('custom')}
-                className={`relative group flex items-start gap-5 p-6 rounded-xl border-2 text-left transition-all duration-200 ${
+                variant="ghost"
+                className={`group p-0 rounded-lg border text-left transition-all h-auto ${
                   formData.type === 'custom'
-                    ? 'border-accent bg-accent/5'
-                    : 'border-border bg-surface-secondary hover:bg-surface-hover hover:border-accent/50'
+                    ? 'border-provider-custom bg-provider-custom/10'
+                    : 'border-border bg-card hover:bg-muted'
                 }`}
               >
-                {formData.type === 'custom' && (
-                  <div className="absolute top-4 right-4 text-accent animate-in zoom-in duration-200">
-                    <CheckCircle2 size={24} className="fill-accent/10" />
+                <div className="p-5 flex items-center gap-4">
+                  <div className="w-12 h-12 rounded-md bg-provider-custom/15 flex items-center justify-center shrink-0">
+                    <Server size={24} className="text-provider-custom" />
                   </div>
-                )}
 
-                <div className="w-16 h-16 rounded-2xl bg-surface-primary flex items-center justify-center shrink-0 shadow-sm border border-border/50 transition-transform group-hover:scale-105">
-                  <Server size={32} className="text-text-secondary group-hover:text-text-primary transition-colors" />
-                </div>
-                <div>
-                  <div className="text-lg font-bold text-text-primary mb-1">Custom Provider</div>
-                  <p className="text-sm text-text-secondary leading-relaxed pr-6">
-                    Manually configure any compatible AI provider using your own API endpoint and keys.
-                  </p>
+                  <div className="flex-1 min-w-0">
+                    <h3 className="text-headline font-semibold text-foreground mb-1">
+                      Custom Provider
+                    </h3>
+                    <p className="text-caption text-muted-foreground">
+                      Configure your own API endpoint
+                    </p>
+                  </div>
+
+                  {formData.type === 'custom' && (
+                    <CheckCircle2 size={20} className="text-provider-custom shrink-0" />
+                  )}
                 </div>
-              </button>
+              </Button>
             </div>
           </div>
 
@@ -99,69 +116,89 @@ export function SelectTypeStep({
           {formData.type === 'custom' && (
             <div className="space-y-4 animate-in fade-in slide-in-from-bottom-4 duration-300">
               <div className="flex items-center justify-between border-b border-border pb-2">
-                <h3 className="text-lg font-semibold text-text-primary">
-                  2. Select a Template <span className="text-text-secondary font-normal text-sm ml-2">(Optional)</span>
+                <h3 className="text-lg font-semibold text-foreground">
+                  2. Select a Template{' '}
+                  <span className="text-muted-foreground font-normal text-sm ml-2">
+                    (Optional)
+                  </span>
                 </h3>
               </div>
-              
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
+
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                 {/* Empty Template Card */}
-                <button
+                <Button
                   onClick={onSkipToConfig}
-                  className="relative group flex flex-col gap-4 p-5 rounded-xl border-2 border-border bg-surface-secondary hover:bg-surface-hover hover:border-accent/30 transition-all duration-200"
+                  variant="ghost"
+                  className="group p-0 rounded-lg border border-dashed border-border bg-card hover:bg-muted transition-all h-auto"
                 >
-                  <div className="flex items-center justify-between w-full">
-                     <div className="w-12 h-12 rounded-lg bg-surface-primary flex items-center justify-center border border-border/50 group-hover:border-accent/30 transition-colors">
-                        <FilePlus size={24} className="text-text-secondary group-hover:text-accent" />
-                     </div>
-                  </div>
-                  
-                  <div className="text-left">
-                    <div className="text-base font-semibold text-text-primary mb-1">
-                      Empty Template
+                  <div className="p-4 flex flex-col gap-3">
+                    <div className="w-10 h-10 rounded-md bg-muted flex items-center justify-center">
+                      <FilePlus size={20} className="text-muted-foreground group-hover:text-primary transition-colors" />
                     </div>
-                    <div className="text-xs text-text-secondary leading-relaxed">
-                      Start from scratch with a blank configuration.
+
+                    <div>
+                      <h4 className="text-body font-semibold text-foreground mb-0.5">
+                        Empty Template
+                      </h4>
+                      <p className="text-caption text-muted-foreground">
+                        Start from scratch
+                      </p>
                     </div>
                   </div>
-                </button>
+                </Button>
 
-                {quickTemplates.map((template) => {
-                  const Icon = template.icon === 'grid' ? Grid3X3 : Layers;
-                  const isSelected = formData.selectedTemplate === template.id;
+                {quickTemplates.map(template => {
+                  const Icon = template.icon === 'grid' ? Grid3X3 : Layers
+                  const isSelected = formData.selectedTemplate === template.id
                   return (
-                    <button
+                    <Button
                       key={template.id}
                       onClick={() => onApplyTemplate(template.id)}
-                      className={`relative group flex flex-col gap-4 p-5 rounded-xl border-2 transition-all duration-200 ${
+                      variant="ghost"
+                      className={`group p-0 rounded-lg border text-left transition-all h-auto ${
                         isSelected
-                          ? 'border-accent bg-accent/5'
-                          : 'border-border bg-surface-secondary hover:bg-surface-hover hover:border-accent/30'
+                          ? 'border-primary bg-primary/10'
+                          : 'border-border bg-card hover:bg-muted'
                       }`}
                     >
-                      <div className="flex items-center justify-between w-full">
-                         <div className={`w-12 h-12 rounded-lg flex items-center justify-center border transition-colors ${
-                           isSelected 
-                             ? 'bg-accent border-accent/20' 
-                             : 'bg-surface-primary border-border/50 group-hover:border-accent/30'
-                         }`}>
-                            <Icon size={24} className={isSelected ? 'text-accent' : 'text-text-secondary group-hover:text-accent'} />
-                         </div>
-                         {isSelected && (
-                            <div className="text-accent animate-in zoom-in duration-200">
-                               <CheckCircle2 size={20} className="fill-accent/10" />
-                            </div>
-                         )}
-                      </div>
-                      
-                      <div className="text-left">
-                        <div className={`text-base font-semibold mb-1 transition-colors ${isSelected ? 'text-accent' : 'text-text-primary'}`}>
-                          {template.name}
+                      <div className="p-4 flex flex-col gap-3">
+                        <div className="flex items-center justify-between">
+                          <div
+                            className={`w-10 h-10 rounded-md flex items-center justify-center transition-colors ${
+                              isSelected
+                                ? 'bg-primary/15'
+                                : 'bg-muted group-hover:bg-primary/10'
+                            }`}
+                          >
+                            <Icon
+                              size={20}
+                              className={
+                                isSelected
+                                  ? 'text-primary'
+                                  : 'text-muted-foreground group-hover:text-primary transition-colors'
+                              }
+                            />
+                          </div>
+                          {isSelected && (
+                            <CheckCircle2 size={18} className="text-primary" />
+                          )}
+                        </div>
+
+                        <div>
+                          <h4
+                            className={`text-body font-semibold mb-0.5 transition-colors ${
+                              isSelected ? 'text-primary' : 'text-foreground'
+                            }`}
+                          >
+                            {template.name}
+                          </h4>
+                          <p className="text-caption text-muted-foreground">
+                            {template.description}
+                          </p>
                         </div>
-                        <div className="text-xs text-text-secondary leading-relaxed">{template.description}</div>
                       </div>
-                    </button>
-                  );
+                    </Button>
+                  )
                 })}
               </div>
             </div>
@@ -169,5 +206,5 @@ export function SelectTypeStep({
         </div>
       </div>
     </div>
-  );
+  )
 }