diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 4d111b89..886af0c4 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -1,21 +1,33 @@
 <template>
-  <div class="min-h-screen relative overflow-hidden bg-gradient-to-br from-gray-50 via-primary-50/30 to-gray-100 dark:from-dark-950 dark:via-dark-900 dark:to-dark-950">
+  <div
+    class="relative min-h-screen overflow-hidden bg-gradient-to-br from-gray-50 via-primary-50/30 to-gray-100 dark:from-dark-950 dark:via-dark-900 dark:to-dark-950"
+  >
     <!-- Background Decorations -->
-    <div class="absolute inset-0 overflow-hidden pointer-events-none">
-      <div class="absolute -top-40 -right-40 w-96 h-96 bg-primary-400/20 rounded-full blur-3xl"></div>
-      <div class="absolute -bottom-40 -left-40 w-96 h-96 bg-primary-500/15 rounded-full blur-3xl"></div>
-      <div class="absolute top-1/4 left-1/3 w-72 h-72 bg-primary-300/10 rounded-full blur-3xl"></div>
-      <div class="absolute bottom-1/4 right-1/4 w-64 h-64 bg-primary-400/10 rounded-full blur-3xl"></div>
-      <div class="absolute inset-0 bg-[linear-gradient(rgba(20,184,166,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(20,184,166,0.03)_1px,transparent_1px)] bg-[size:64px_64px]"></div>
+    <div class="pointer-events-none absolute inset-0 overflow-hidden">
+      <div
+        class="absolute -right-40 -top-40 h-96 w-96 rounded-full bg-primary-400/20 blur-3xl"
+      ></div>
+      <div
+        class="absolute -bottom-40 -left-40 h-96 w-96 rounded-full bg-primary-500/15 blur-3xl"
+      ></div>
+      <div
+        class="absolute left-1/3 top-1/4 h-72 w-72 rounded-full bg-primary-300/10 blur-3xl"
+      ></div>
+      <div
+        class="absolute bottom-1/4 right-1/4 h-64 w-64 rounded-full bg-primary-400/10 blur-3xl"
+      ></div>
+      <div
+        class="absolute inset-0 bg-[linear-gradient(rgba(20,184,166,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(20,184,166,0.03)_1px,transparent_1px)] bg-[size:64px_64px]"
+      ></div>
     </div>
 
     <!-- Header -->
     <header class="relative z-20 px-6 py-4">
-      <nav class="max-w-6xl mx-auto flex items-center justify-between">
+      <nav class="mx-auto flex max-w-6xl items-center justify-between">
         <!-- Logo -->
         <div class="flex items-center">
-          <div class="w-10 h-10 rounded-xl overflow-hidden shadow-md">
-            <img :src="siteLogo || '/logo.png'" alt="Logo" class="w-full h-full object-contain" />
+          <div class="h-10 w-10 overflow-hidden rounded-xl shadow-md">
+            <img :src="siteLogo || '/logo.png'" alt="Logo" class="h-full w-full object-contain" />
           </div>
         </div>
 
@@ -30,25 +42,57 @@
             :href="docUrl"
             target="_blank"
             rel="noopener noreferrer"
-            class="p-2 rounded-lg text-gray-500 hover:text-gray-700 dark:text-dark-400 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-dark-800 transition-colors"
+            class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:text-dark-400 dark:hover:bg-dark-800 dark:hover:text-white"
             :title="t('home.viewDocs')"
           >
-            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
+            <svg
+              class="h-5 w-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="1.5"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"
+              />
             </svg>
           </a>
 
           <!-- Theme Toggle -->
           <button
             @click="toggleTheme"
-            class="p-2 rounded-lg text-gray-500 hover:text-gray-700 dark:text-dark-400 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-dark-800 transition-colors"
+            class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:text-dark-400 dark:hover:bg-dark-800 dark:hover:text-white"
             :title="isDark ? t('home.switchToLight') : t('home.switchToDark')"
           >
-            <svg v-if="isDark" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
+            <svg
+              v-if="isDark"
+              class="h-5 w-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="1.5"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
+              />
             </svg>
-            <svg v-else class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
+            <svg
+              v-else
+              class="h-5 w-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="1.5"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"
+              />
             </svg>
           </button>
 
@@ -56,20 +100,32 @@
           <router-link
             v-if="isAuthenticated"
             to="/dashboard"
-            class="inline-flex items-center gap-1.5 pl-1 pr-2.5 py-1 rounded-full bg-gray-900 dark:bg-gray-800 hover:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
+            class="inline-flex items-center gap-1.5 rounded-full bg-gray-900 py-1 pl-1 pr-2.5 transition-colors hover:bg-gray-800 dark:bg-gray-800 dark:hover:bg-gray-700"
           >
-            <span class="w-5 h-5 rounded-full bg-gradient-to-br from-primary-400 to-primary-600 text-white flex items-center justify-center text-[10px] font-semibold">
+            <span
+              class="flex h-5 w-5 items-center justify-center rounded-full bg-gradient-to-br from-primary-400 to-primary-600 text-[10px] font-semibold text-white"
+            >
               {{ userInitial }}
             </span>
             <span class="text-xs font-medium text-white">{{ t('home.dashboard') }}</span>
-            <svg class="w-3 h-3 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
+            <svg
+              class="h-3 w-3 text-gray-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25"
+              />
             </svg>
           </router-link>
           <router-link
             v-else
             to="/login"
-            class="inline-flex items-center px-3 py-1 rounded-full bg-gray-900 dark:bg-gray-800 hover:bg-gray-800 dark:hover:bg-gray-700 text-xs font-medium text-white transition-colors"
+            class="inline-flex items-center rounded-full bg-gray-900 px-3 py-1 text-xs font-medium text-white transition-colors hover:bg-gray-800 dark:bg-gray-800 dark:hover:bg-gray-700"
           >
             {{ t('home.login') }}
           </router-link>
@@ -79,15 +135,17 @@
 
     <!-- Main Content -->
     <main class="relative z-10 px-6 py-16">
-      <div class="max-w-6xl mx-auto">
+      <div class="mx-auto max-w-6xl">
         <!-- Hero Section - Left/Right Layout -->
-        <div class="flex flex-col lg:flex-row items-center justify-between gap-12 lg:gap-16 mb-12">
+        <div class="mb-12 flex flex-col items-center justify-between gap-12 lg:flex-row lg:gap-16">
           <!-- Left: Text Content -->
           <div class="flex-1 text-center lg:text-left">
-            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-white mb-4">
+            <h1
+              class="mb-4 text-4xl font-bold text-gray-900 dark:text-white md:text-5xl lg:text-6xl"
+            >
               {{ siteName }}
             </h1>
-            <p class="text-lg md:text-xl text-gray-600 dark:text-dark-300 mb-8">
+            <p class="mb-8 text-lg text-gray-600 dark:text-dark-300 md:text-xl">
               {{ siteSubtitle }}
             </p>
 
@@ -98,15 +156,25 @@
                 class="btn btn-primary px-8 py-3 text-base shadow-lg shadow-primary-500/30"
               >
                 {{ isAuthenticated ? t('home.goToDashboard') : t('home.getStarted') }}
-                <svg class="w-5 h-5 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
+                <svg
+                  class="ml-2 h-5 w-5"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="2"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
+                  />
                 </svg>
               </router-link>
             </div>
           </div>
 
           <!-- Right: Terminal Animation -->
-          <div class="flex-1 flex justify-center lg:justify-end">
+          <div class="flex flex-1 justify-center lg:justify-end">
             <div class="terminal-container">
               <div class="terminal-window">
                 <!-- Window header -->
@@ -144,117 +212,239 @@
         </div>
 
         <!-- Feature Tags - Centered -->
-        <div class="flex flex-wrap items-center justify-center gap-4 md:gap-6 mb-12">
-          <div class="inline-flex items-center gap-2.5 px-5 py-2.5 rounded-full bg-white/80 dark:bg-dark-800/80 backdrop-blur-sm border border-gray-200/50 dark:border-dark-700/50 shadow-sm">
-            <svg class="w-4 h-4 text-primary-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
+        <div class="mb-12 flex flex-wrap items-center justify-center gap-4 md:gap-6">
+          <div
+            class="inline-flex items-center gap-2.5 rounded-full border border-gray-200/50 bg-white/80 px-5 py-2.5 shadow-sm backdrop-blur-sm dark:border-dark-700/50 dark:bg-dark-800/80"
+          >
+            <svg
+              class="h-4 w-4 text-primary-500"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="1.5"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"
+              />
             </svg>
-            <span class="text-sm font-medium text-gray-700 dark:text-dark-200">{{ t('home.tags.subscriptionToApi') }}</span>
+            <span class="text-sm font-medium text-gray-700 dark:text-dark-200">{{
+              t('home.tags.subscriptionToApi')
+            }}</span>
           </div>
-          <div class="inline-flex items-center gap-2.5 px-5 py-2.5 rounded-full bg-white/80 dark:bg-dark-800/80 backdrop-blur-sm border border-gray-200/50 dark:border-dark-700/50 shadow-sm">
-            <svg class="w-4 h-4 text-primary-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
+          <div
+            class="inline-flex items-center gap-2.5 rounded-full border border-gray-200/50 bg-white/80 px-5 py-2.5 shadow-sm backdrop-blur-sm dark:border-dark-700/50 dark:bg-dark-800/80"
+          >
+            <svg
+              class="h-4 w-4 text-primary-500"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="1.5"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"
+              />
             </svg>
-            <span class="text-sm font-medium text-gray-700 dark:text-dark-200">{{ t('home.tags.stickySession') }}</span>
+            <span class="text-sm font-medium text-gray-700 dark:text-dark-200">{{
+              t('home.tags.stickySession')
+            }}</span>
           </div>
-          <div class="inline-flex items-center gap-2.5 px-5 py-2.5 rounded-full bg-white/80 dark:bg-dark-800/80 backdrop-blur-sm border border-gray-200/50 dark:border-dark-700/50 shadow-sm">
-            <svg class="w-4 h-4 text-primary-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
+          <div
+            class="inline-flex items-center gap-2.5 rounded-full border border-gray-200/50 bg-white/80 px-5 py-2.5 shadow-sm backdrop-blur-sm dark:border-dark-700/50 dark:bg-dark-800/80"
+          >
+            <svg
+              class="h-4 w-4 text-primary-500"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="1.5"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"
+              />
             </svg>
-            <span class="text-sm font-medium text-gray-700 dark:text-dark-200">{{ t('home.tags.realtimeBilling') }}</span>
+            <span class="text-sm font-medium text-gray-700 dark:text-dark-200">{{
+              t('home.tags.realtimeBilling')
+            }}</span>
           </div>
         </div>
 
         <!-- Features Grid -->
-        <div class="grid md:grid-cols-3 gap-6 mb-12">
+        <div class="mb-12 grid gap-6 md:grid-cols-3">
           <!-- Feature 1: Unified Gateway -->
-          <div class="group p-6 rounded-2xl bg-white/60 dark:bg-dark-800/60 backdrop-blur-sm border border-gray-200/50 dark:border-dark-700/50 hover:shadow-xl hover:shadow-primary-500/10 transition-all duration-300">
-            <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center mb-4 shadow-lg shadow-blue-500/30 group-hover:scale-110 transition-transform">
-              <svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z" />
+          <div
+            class="group rounded-2xl border border-gray-200/50 bg-white/60 p-6 backdrop-blur-sm transition-all duration-300 hover:shadow-xl hover:shadow-primary-500/10 dark:border-dark-700/50 dark:bg-dark-800/60"
+          >
+            <div
+              class="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 shadow-lg shadow-blue-500/30 transition-transform group-hover:scale-110"
+            >
+              <svg
+                class="h-6 w-6 text-white"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z"
+                />
               </svg>
             </div>
-            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">{{ t('home.features.unifiedGateway') }}</h3>
-            <p class="text-gray-600 dark:text-dark-400 text-sm leading-relaxed">
+            <h3 class="mb-2 text-lg font-semibold text-gray-900 dark:text-white">
+              {{ t('home.features.unifiedGateway') }}
+            </h3>
+            <p class="text-sm leading-relaxed text-gray-600 dark:text-dark-400">
               {{ t('home.features.unifiedGatewayDesc') }}
             </p>
           </div>
 
           <!-- Feature 2: Account Pool -->
-          <div class="group p-6 rounded-2xl bg-white/60 dark:bg-dark-800/60 backdrop-blur-sm border border-gray-200/50 dark:border-dark-700/50 hover:shadow-xl hover:shadow-primary-500/10 transition-all duration-300">
-            <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-primary-500 to-primary-600 flex items-center justify-center mb-4 shadow-lg shadow-primary-500/30 group-hover:scale-110 transition-transform">
-              <svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
+          <div
+            class="group rounded-2xl border border-gray-200/50 bg-white/60 p-6 backdrop-blur-sm transition-all duration-300 hover:shadow-xl hover:shadow-primary-500/10 dark:border-dark-700/50 dark:bg-dark-800/60"
+          >
+            <div
+              class="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-primary-500 to-primary-600 shadow-lg shadow-primary-500/30 transition-transform group-hover:scale-110"
+            >
+              <svg
+                class="h-6 w-6 text-white"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"
+                />
               </svg>
             </div>
-            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">{{ t('home.features.multiAccount') }}</h3>
-            <p class="text-gray-600 dark:text-dark-400 text-sm leading-relaxed">
+            <h3 class="mb-2 text-lg font-semibold text-gray-900 dark:text-white">
+              {{ t('home.features.multiAccount') }}
+            </h3>
+            <p class="text-sm leading-relaxed text-gray-600 dark:text-dark-400">
               {{ t('home.features.multiAccountDesc') }}
             </p>
           </div>
 
           <!-- Feature 3: Billing & Quota -->
-          <div class="group p-6 rounded-2xl bg-white/60 dark:bg-dark-800/60 backdrop-blur-sm border border-gray-200/50 dark:border-dark-700/50 hover:shadow-xl hover:shadow-primary-500/10 transition-all duration-300">
-            <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-purple-500 to-purple-600 flex items-center justify-center mb-4 shadow-lg shadow-purple-500/30 group-hover:scale-110 transition-transform">
-              <svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" />
+          <div
+            class="group rounded-2xl border border-gray-200/50 bg-white/60 p-6 backdrop-blur-sm transition-all duration-300 hover:shadow-xl hover:shadow-primary-500/10 dark:border-dark-700/50 dark:bg-dark-800/60"
+          >
+            <div
+              class="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-purple-500 to-purple-600 shadow-lg shadow-purple-500/30 transition-transform group-hover:scale-110"
+            >
+              <svg
+                class="h-6 w-6 text-white"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z"
+                />
               </svg>
             </div>
-            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">{{ t('home.features.balanceQuota') }}</h3>
-            <p class="text-gray-600 dark:text-dark-400 text-sm leading-relaxed">
+            <h3 class="mb-2 text-lg font-semibold text-gray-900 dark:text-white">
+              {{ t('home.features.balanceQuota') }}
+            </h3>
+            <p class="text-sm leading-relaxed text-gray-600 dark:text-dark-400">
               {{ t('home.features.balanceQuotaDesc') }}
             </p>
           </div>
         </div>
 
         <!-- Supported Providers -->
-        <div class="text-center mb-8">
-          <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-3">{{ t('home.providers.title') }}</h2>
-          <p class="text-gray-600 dark:text-dark-400 text-sm">
+        <div class="mb-8 text-center">
+          <h2 class="mb-3 text-2xl font-bold text-gray-900 dark:text-white">
+            {{ t('home.providers.title') }}
+          </h2>
+          <p class="text-sm text-gray-600 dark:text-dark-400">
             {{ t('home.providers.description') }}
           </p>
         </div>
 
-        <div class="flex flex-wrap items-center justify-center gap-4 mb-16">
+        <div class="mb-16 flex flex-wrap items-center justify-center gap-4">
           <!-- Claude - Supported -->
-          <div class="flex items-center gap-2 px-5 py-3 rounded-xl bg-white/60 dark:bg-dark-800/60 backdrop-blur-sm border border-primary-200 dark:border-primary-800 ring-1 ring-primary-500/20">
-            <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-orange-400 to-orange-500 flex items-center justify-center">
-              <span class="text-white text-xs font-bold">C</span>
+          <div
+            class="flex items-center gap-2 rounded-xl border border-primary-200 bg-white/60 px-5 py-3 ring-1 ring-primary-500/20 backdrop-blur-sm dark:border-primary-800 dark:bg-dark-800/60"
+          >
+            <div
+              class="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-orange-400 to-orange-500"
+            >
+              <span class="text-xs font-bold text-white">C</span>
             </div>
             <span class="text-sm font-medium text-gray-700 dark:text-dark-200">Claude</span>
-            <span class="px-1.5 py-0.5 text-[10px] font-medium bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 rounded">{{ t('home.providers.supported') }}</span>
+            <span
+              class="rounded bg-primary-100 px-1.5 py-0.5 text-[10px] font-medium text-primary-600 dark:bg-primary-900/30 dark:text-primary-400"
+              >{{ t('home.providers.supported') }}</span
+            >
           </div>
           <!-- GPT - Supported -->
-          <div class="flex items-center gap-2 px-5 py-3 rounded-xl bg-white/60 dark:bg-dark-800/60 backdrop-blur-sm border border-primary-200 dark:border-primary-800 ring-1 ring-primary-500/20">
-            <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center">
-              <span class="text-white text-xs font-bold">G</span>
+          <div
+            class="flex items-center gap-2 rounded-xl border border-primary-200 bg-white/60 px-5 py-3 ring-1 ring-primary-500/20 backdrop-blur-sm dark:border-primary-800 dark:bg-dark-800/60"
+          >
+            <div
+              class="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-green-500 to-green-600"
+            >
+              <span class="text-xs font-bold text-white">G</span>
             </div>
             <span class="text-sm font-medium text-gray-700 dark:text-dark-200">GPT</span>
-            <span class="px-1.5 py-0.5 text-[10px] font-medium bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 rounded">{{ t('home.providers.supported') }}</span>
+            <span
+              class="rounded bg-primary-100 px-1.5 py-0.5 text-[10px] font-medium text-primary-600 dark:bg-primary-900/30 dark:text-primary-400"
+              >{{ t('home.providers.supported') }}</span
+            >
           </div>
           <!-- Gemini - Coming Soon -->
-          <div class="flex items-center gap-2 px-5 py-3 rounded-xl bg-white/40 dark:bg-dark-800/40 backdrop-blur-sm border border-gray-200/50 dark:border-dark-700/50 opacity-60">
-            <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
-              <span class="text-white text-xs font-bold">G</span>
+          <div
+            class="flex items-center gap-2 rounded-xl border border-gray-200/50 bg-white/40 px-5 py-3 opacity-60 backdrop-blur-sm dark:border-dark-700/50 dark:bg-dark-800/40"
+          >
+            <div
+              class="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-blue-600"
+            >
+              <span class="text-xs font-bold text-white">G</span>
             </div>
             <span class="text-sm font-medium text-gray-700 dark:text-dark-200">Gemini</span>
-            <span class="px-1.5 py-0.5 text-[10px] font-medium bg-gray-100 dark:bg-dark-700 text-gray-500 dark:text-dark-400 rounded">{{ t('home.providers.soon') }}</span>
+            <span
+              class="rounded bg-gray-100 px-1.5 py-0.5 text-[10px] font-medium text-gray-500 dark:bg-dark-700 dark:text-dark-400"
+              >{{ t('home.providers.soon') }}</span
+            >
           </div>
           <!-- More - Coming Soon -->
-          <div class="flex items-center gap-2 px-5 py-3 rounded-xl bg-white/40 dark:bg-dark-800/40 backdrop-blur-sm border border-gray-200/50 dark:border-dark-700/50 opacity-60">
-            <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-gray-500 to-gray-600 flex items-center justify-center">
-              <span class="text-white text-xs font-bold">+</span>
+          <div
+            class="flex items-center gap-2 rounded-xl border border-gray-200/50 bg-white/40 px-5 py-3 opacity-60 backdrop-blur-sm dark:border-dark-700/50 dark:bg-dark-800/40"
+          >
+            <div
+              class="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-gray-500 to-gray-600"
+            >
+              <span class="text-xs font-bold text-white">+</span>
             </div>
             <span class="text-sm font-medium text-gray-700 dark:text-dark-200">More</span>
-            <span class="px-1.5 py-0.5 text-[10px] font-medium bg-gray-100 dark:bg-dark-700 text-gray-500 dark:text-dark-400 rounded">{{ t('home.providers.soon') }}</span>
+            <span
+              class="rounded bg-gray-100 px-1.5 py-0.5 text-[10px] font-medium text-gray-500 dark:bg-dark-700 dark:text-dark-400"
+              >{{ t('home.providers.soon') }}</span
+            >
           </div>
         </div>
       </div>
     </main>
 
     <!-- Footer -->
-    <footer class="relative z-10 px-6 py-8 border-t border-gray-200/50 dark:border-dark-800/50">
-      <div class="max-w-6xl mx-auto flex flex-col sm:flex-row items-center justify-center gap-4 text-center sm:text-left">
+    <footer class="relative z-10 border-t border-gray-200/50 px-6 py-8 dark:border-dark-800/50">
+      <div
+        class="mx-auto flex max-w-6xl flex-col items-center justify-center gap-4 text-center sm:flex-row sm:text-left"
+      >
         <p class="text-sm text-gray-500 dark:text-dark-400">
           &copy; {{ currentYear }} {{ siteName }}. {{ t('home.footer.allRightsReserved') }}
         </p>
@@ -264,7 +454,7 @@
             :href="docUrl"
             target="_blank"
             rel="noopener noreferrer"
-            class="text-sm text-gray-500 hover:text-gray-700 dark:text-dark-400 dark:hover:text-white transition-colors"
+            class="text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-dark-400 dark:hover:text-white"
           >
             {{ t('home.docs') }}
           </a>
@@ -272,7 +462,7 @@
             :href="githubUrl"
             target="_blank"
             rel="noopener noreferrer"
-            class="text-sm text-gray-500 hover:text-gray-700 dark:text-dark-400 dark:hover:text-white transition-colors"
+            class="text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-dark-400 dark:hover:text-white"
           >
             GitHub
           </a>
@@ -283,71 +473,74 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { getPublicSettings } from '@/api/auth';
-import { useAuthStore } from '@/stores';
-import LocaleSwitcher from '@/components/common/LocaleSwitcher.vue';
+import { ref, computed, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { getPublicSettings } from '@/api/auth'
+import { useAuthStore } from '@/stores'
+import LocaleSwitcher from '@/components/common/LocaleSwitcher.vue'
 
-const { t } = useI18n();
+const { t } = useI18n()
 
-const authStore = useAuthStore();
+const authStore = useAuthStore()
 
 // Site settings
-const siteName = ref('Sub2API');
-const siteLogo = ref('');
-const siteSubtitle = ref('AI API Gateway Platform');
-const docUrl = ref('');
+const siteName = ref('Sub2API')
+const siteLogo = ref('')
+const siteSubtitle = ref('AI API Gateway Platform')
+const docUrl = ref('')
 
 // Theme
-const isDark = ref(document.documentElement.classList.contains('dark'));
+const isDark = ref(document.documentElement.classList.contains('dark'))
 
 // GitHub URL
-const githubUrl = 'https://github.com/Wei-Shaw/sub2api';
+const githubUrl = 'https://github.com/Wei-Shaw/sub2api'
 
 // Auth state
-const isAuthenticated = computed(() => authStore.isAuthenticated);
+const isAuthenticated = computed(() => authStore.isAuthenticated)
 const userInitial = computed(() => {
-  const user = authStore.user;
-  if (!user || !user.email) return '';
-  return user.email.charAt(0).toUpperCase();
-});
+  const user = authStore.user
+  if (!user || !user.email) return ''
+  return user.email.charAt(0).toUpperCase()
+})
 
 // Current year for footer
-const currentYear = computed(() => new Date().getFullYear());
+const currentYear = computed(() => new Date().getFullYear())
 
 // Toggle theme
 function toggleTheme() {
-  isDark.value = !isDark.value;
-  document.documentElement.classList.toggle('dark', isDark.value);
-  localStorage.setItem('theme', isDark.value ? 'dark' : 'light');
+  isDark.value = !isDark.value
+  document.documentElement.classList.toggle('dark', isDark.value)
+  localStorage.setItem('theme', isDark.value ? 'dark' : 'light')
 }
 
 // Initialize theme
 function initTheme() {
-  const savedTheme = localStorage.getItem('theme');
-  if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-    isDark.value = true;
-    document.documentElement.classList.add('dark');
+  const savedTheme = localStorage.getItem('theme')
+  if (
+    savedTheme === 'dark' ||
+    (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)
+  ) {
+    isDark.value = true
+    document.documentElement.classList.add('dark')
   }
 }
 
 onMounted(async () => {
-  initTheme();
+  initTheme()
 
   // Check auth state
-  authStore.checkAuth();
+  authStore.checkAuth()
 
   try {
-    const settings = await getPublicSettings();
-    siteName.value = settings.site_name || 'Sub2API';
-    siteLogo.value = settings.site_logo || '';
-    siteSubtitle.value = settings.site_subtitle || 'AI API Gateway Platform';
-    docUrl.value = settings.doc_url || '';
+    const settings = await getPublicSettings()
+    siteName.value = settings.site_name || 'Sub2API'
+    siteLogo.value = settings.site_logo || ''
+    siteSubtitle.value = settings.site_subtitle || 'AI API Gateway Platform'
+    docUrl.value = settings.doc_url || ''
   } catch (error) {
-    console.error('Failed to load public settings:', error);
+    console.error('Failed to load public settings:', error)
   }
-});
+})
 </script>
 
 <style scoped>
@@ -395,9 +588,15 @@ onMounted(async () => {
   border-radius: 50%;
 }
 
-.btn-close { background: #ef4444; }
-.btn-minimize { background: #eab308; }
-.btn-maximize { background: #22c55e; }
+.btn-close {
+  background: #ef4444;
+}
+.btn-minimize {
+  background: #eab308;
+}
+.btn-maximize {
+  background: #22c55e;
+}
 
 .terminal-title {
   flex: 1;
@@ -425,21 +624,47 @@ onMounted(async () => {
   animation: line-appear 0.5s ease forwards;
 }
 
-.line-1 { animation-delay: 0.3s; }
-.line-2 { animation-delay: 1s; }
-.line-3 { animation-delay: 1.8s; }
-.line-4 { animation-delay: 2.5s; }
-
-@keyframes line-appear {
-  from { opacity: 0; transform: translateY(5px); }
-  to { opacity: 1; transform: translateY(0); }
+.line-1 {
+  animation-delay: 0.3s;
+}
+.line-2 {
+  animation-delay: 1s;
+}
+.line-3 {
+  animation-delay: 1.8s;
+}
+.line-4 {
+  animation-delay: 2.5s;
 }
 
-.code-prompt { color: #22c55e; font-weight: bold; }
-.code-cmd { color: #38bdf8; }
-.code-flag { color: #a78bfa; }
-.code-url { color: #14b8a6; }
-.code-comment { color: #64748b; font-style: italic; }
+@keyframes line-appear {
+  from {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.code-prompt {
+  color: #22c55e;
+  font-weight: bold;
+}
+.code-cmd {
+  color: #38bdf8;
+}
+.code-flag {
+  color: #a78bfa;
+}
+.code-url {
+  color: #14b8a6;
+}
+.code-comment {
+  color: #64748b;
+  font-style: italic;
+}
 .code-success {
   color: #22c55e;
   background: rgba(34, 197, 94, 0.15);
@@ -447,7 +672,9 @@ onMounted(async () => {
   border-radius: 4px;
   font-weight: 600;
 }
-.code-response { color: #fbbf24; }
+.code-response {
+  color: #fbbf24;
+}
 
 /* Blinking Cursor */
 .cursor {
@@ -459,8 +686,14 @@ onMounted(async () => {
 }
 
 @keyframes blink {
-  0%, 50% { opacity: 1; }
-  51%, 100% { opacity: 0; }
+  0%,
+  50% {
+    opacity: 1;
+  }
+  51%,
+  100% {
+    opacity: 0;
+  }
 }
 
 /* Dark mode adjustments */
diff --git a/frontend/src/views/NotFoundView.vue b/frontend/src/views/NotFoundView.vue
index 42a362a2..0aee9780 100644
--- a/frontend/src/views/NotFoundView.vue
+++ b/frontend/src/views/NotFoundView.vue
@@ -1,20 +1,40 @@
 <template>
-  <div class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-dark-950 px-4 relative overflow-hidden">
+  <div
+    class="relative flex min-h-screen items-center justify-center overflow-hidden bg-gray-50 px-4 dark:bg-dark-950"
+  >
     <!-- Background Decoration -->
-    <div class="absolute inset-0 overflow-hidden pointer-events-none">
-      <div class="absolute -top-40 -right-40 w-80 h-80 bg-primary-400/10 rounded-full blur-3xl"></div>
-      <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-primary-500/10 rounded-full blur-3xl"></div>
+    <div class="pointer-events-none absolute inset-0 overflow-hidden">
+      <div
+        class="absolute -right-40 -top-40 h-80 w-80 rounded-full bg-primary-400/10 blur-3xl"
+      ></div>
+      <div
+        class="absolute -bottom-40 -left-40 h-80 w-80 rounded-full bg-primary-500/10 blur-3xl"
+      ></div>
     </div>
 
-    <div class="max-w-md w-full text-center relative z-10">
+    <div class="relative z-10 w-full max-w-md text-center">
       <!-- 404 Display -->
       <div class="mb-8">
         <div class="relative inline-block">
-          <span class="text-[12rem] font-bold text-gray-100 dark:text-dark-800 leading-none">404</span>
+          <span class="text-[12rem] font-bold leading-none text-gray-100 dark:text-dark-800"
+            >404</span
+          >
           <div class="absolute inset-0 flex items-center justify-center">
-            <div class="w-24 h-24 rounded-2xl bg-gradient-to-br from-primary-500 to-primary-600 shadow-lg shadow-primary-500/30 flex items-center justify-center">
-              <svg class="w-12 h-12 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
+            <div
+              class="flex h-24 w-24 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-500 to-primary-600 shadow-lg shadow-primary-500/30"
+            >
+              <svg
+                class="h-12 w-12 text-white"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
+                />
               </svg>
             </div>
           </div>
@@ -23,31 +43,43 @@
 
       <!-- Text Content -->
       <div class="mb-8">
-        <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-3">
-          Page Not Found
-        </h1>
+        <h1 class="mb-3 text-2xl font-bold text-gray-900 dark:text-white">Page Not Found</h1>
         <p class="text-gray-500 dark:text-dark-400">
           The page you are looking for doesn't exist or has been moved.
         </p>
       </div>
 
       <!-- Action Buttons -->
-      <div class="flex flex-col sm:flex-row gap-3 justify-center">
-        <button
-          @click="goBack"
-          class="btn btn-secondary"
-        >
-          <svg class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
+      <div class="flex flex-col justify-center gap-3 sm:flex-row">
+        <button @click="goBack" class="btn btn-secondary">
+          <svg
+            class="mr-2 h-5 w-5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="1.5"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
+            />
           </svg>
           Go Back
         </button>
-        <router-link
-          to="/dashboard"
-          class="btn btn-primary"
-        >
-          <svg class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+        <router-link to="/dashboard" class="btn btn-primary">
+          <svg
+            class="mr-2 h-5 w-5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="1.5"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+            />
           </svg>
           Go to Dashboard
         </router-link>
@@ -56,7 +88,10 @@
       <!-- Help Link -->
       <p class="mt-8 text-sm text-gray-400 dark:text-dark-500">
         Need help?
-        <a href="#" class="text-primary-600 hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300 transition-colors">
+        <a
+          href="#"
+          class="text-primary-600 transition-colors hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300"
+        >
           Contact support
         </a>
       </p>
@@ -65,11 +100,11 @@
 </template>
 
 <script setup lang="ts">
-import { useRouter } from 'vue-router';
+import { useRouter } from 'vue-router'
 
-const router = useRouter();
+const router = useRouter()
 
 function goBack(): void {
-  router.back();
+  router.back()
 }
 </script>
diff --git a/frontend/src/views/admin/AccountsView.vue b/frontend/src/views/admin/AccountsView.vue
index 664e0c15..1a130460 100644
--- a/frontend/src/views/admin/AccountsView.vue
+++ b/frontend/src/views/admin/AccountsView.vue
@@ -10,26 +10,42 @@
           :title="t('common.refresh')"
         >
           <svg
-            :class="['w-5 h-5', loading ? 'animate-spin' : '']"
-            fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"
+            :class="['h-5 w-5', loading ? 'animate-spin' : '']"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="1.5"
           >
-            <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+            />
           </svg>
         </button>
-        <button
-          @click="showCrsSyncModal = true"
-          class="btn btn-secondary"
-          title="从 CRS 同步"
-        >
-          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" />
+        <button @click="showCrsSyncModal = true" class="btn btn-secondary" title="从 CRS 同步">
+          <svg
+            class="h-5 w-5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="1.5"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"
+            />
           </svg>
         </button>
-        <button
-          @click="showCreateModal = true"
-          class="btn btn-primary"
-        >
-          <svg class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+        <button @click="showCreateModal = true" class="btn btn-primary">
+          <svg
+            class="mr-2 h-5 w-5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="1.5"
+          >
             <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
           </svg>
           {{ t('admin.accounts.createAccount') }}
@@ -38,9 +54,19 @@
 
       <!-- Search and Filters -->
       <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
-        <div class="relative flex-1 max-w-md">
-          <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
+        <div class="relative max-w-md flex-1">
+          <svg
+            class="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+            />
           </svg>
           <input
             v-model="searchQuery"
@@ -76,7 +102,10 @@
       </div>
 
       <!-- Bulk Actions Bar -->
-      <div v-if="selectedAccountIds.length > 0" class="card bg-primary-50 dark:bg-primary-900/20 border-primary-200 dark:border-primary-800 px-4 py-3">
+      <div
+        v-if="selectedAccountIds.length > 0"
+        class="card border-primary-200 bg-primary-50 px-4 py-3 dark:border-primary-800 dark:bg-primary-900/20"
+      >
         <div class="flex flex-wrap items-center justify-between gap-3">
           <div class="flex flex-wrap items-center gap-2">
             <span class="text-sm font-medium text-primary-900 dark:text-primary-100">
@@ -97,22 +126,35 @@
             </button>
           </div>
           <div class="flex items-center gap-2">
-            <button
-              @click="handleBulkDelete"
-              class="btn btn-danger btn-sm"
-            >
-              <svg class="w-4 h-4 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                <path stroke-linecap="round" stroke-linejoin="round"
-                  d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
+            <button @click="handleBulkDelete" class="btn btn-danger btn-sm">
+              <svg
+                class="mr-1.5 h-4 w-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+                />
               </svg>
               {{ t('admin.accounts.bulkActions.delete') }}
             </button>
-            <button
-              @click="showBulkEditModal = true"
-              class="btn btn-primary btn-sm"
-            >
-              <svg class="w-4 h-4 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
+            <button @click="showBulkEditModal = true" class="btn btn-primary btn-sm">
+              <svg
+                class="mr-1.5 h-4 w-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
+                />
               </svg>
               {{ t('admin.accounts.bulkActions.edit') }}
             </button>
@@ -144,7 +186,7 @@
             <div class="flex items-center gap-1.5">
               <span
                 :class="[
-                  'inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs font-medium',
+                  'inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium',
                   (row.current_concurrency || 0) >= row.concurrency
                     ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
                     : (row.current_concurrency || 0) > 0
@@ -152,8 +194,18 @@
                       : 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400'
                 ]"
               >
-                <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
+                <svg
+                  class="h-3 w-3"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="2"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"
+                  />
                 </svg>
                 <span class="font-mono">{{ row.current_concurrency || 0 }}</span>
                 <span class="text-gray-400 dark:text-gray-500">/</span>
@@ -170,13 +222,17 @@
             <button
               @click="handleToggleSchedulable(row)"
               :disabled="togglingSchedulable === row.id"
-              class="relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-dark-800 disabled:opacity-50 disabled:cursor-not-allowed"
+              class="relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:focus:ring-offset-dark-800"
               :class="[
                 row.schedulable
                   ? 'bg-primary-500 hover:bg-primary-600'
-                  : 'bg-gray-200 dark:bg-dark-600 hover:bg-gray-300 dark:hover:bg-dark-500'
+                  : 'bg-gray-200 hover:bg-gray-300 dark:bg-dark-600 dark:hover:bg-dark-500'
               ]"
-              :title="row.schedulable ? t('admin.accounts.schedulableEnabled') : t('admin.accounts.schedulableDisabled')"
+              :title="
+                row.schedulable
+                  ? t('admin.accounts.schedulableEnabled')
+                  : t('admin.accounts.schedulableDisabled')
+              "
             >
               <span
                 class="pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
@@ -224,82 +280,160 @@
               <button
                 v-if="row.status === 'error'"
                 @click="handleResetStatus(row)"
-                class="p-2 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 text-red-500 hover:text-red-600 dark:hover:text-red-400 transition-colors"
+                class="rounded-lg p-2 text-red-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
                 :title="t('admin.accounts.resetStatus')"
               >
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" />
+                <svg
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3"
+                  />
                 </svg>
               </button>
               <!-- Clear Rate Limit button -->
               <button
                 v-if="isRateLimited(row) || isOverloaded(row)"
                 @click="handleClearRateLimit(row)"
-                class="p-2 rounded-lg hover:bg-amber-50 dark:hover:bg-amber-900/20 text-amber-500 hover:text-amber-600 dark:hover:text-amber-400 transition-colors"
+                class="rounded-lg p-2 text-amber-500 transition-colors hover:bg-amber-50 hover:text-amber-600 dark:hover:bg-amber-900/20 dark:hover:text-amber-400"
                 :title="t('admin.accounts.clearRateLimit')"
               >
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+                <svg
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
                 </svg>
               </button>
               <!-- Test Connection button -->
               <button
                 @click="handleTest(row)"
-                class="p-2 rounded-lg hover:bg-green-50 dark:hover:bg-green-900/20 text-gray-500 hover:text-green-600 dark:hover:text-green-400 transition-colors"
+                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-green-50 hover:text-green-600 dark:hover:bg-green-900/20 dark:hover:text-green-400"
                 :title="t('admin.accounts.testConnection')"
               >
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 010 1.972l-11.54 6.347a1.125 1.125 0 01-1.667-.986V5.653z" />
+                <svg
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 010 1.972l-11.54 6.347a1.125 1.125 0 01-1.667-.986V5.653z"
+                  />
                 </svg>
               </button>
               <!-- View Stats button -->
               <button
                 @click="handleViewStats(row)"
-                class="p-2 rounded-lg hover:bg-indigo-50 dark:hover:bg-indigo-900/20 text-gray-500 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
+                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-indigo-50 hover:text-indigo-600 dark:hover:bg-indigo-900/20 dark:hover:text-indigo-400"
                 :title="t('admin.accounts.viewStats')"
               >
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
+                <svg
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"
+                  />
                 </svg>
               </button>
               <button
                 v-if="row.type === 'oauth' || row.type === 'setup-token'"
                 @click="handleReAuth(row)"
-                class="p-2 rounded-lg hover:bg-blue-50 dark:hover:bg-blue-900/20 text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-blue-50 hover:text-blue-600 dark:hover:bg-blue-900/20 dark:hover:text-blue-400"
                 :title="t('admin.accounts.reAuthorize')"
               >
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
+                <svg
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244"
+                  />
                 </svg>
               </button>
               <button
                 v-if="row.type === 'oauth' || row.type === 'setup-token'"
                 @click="handleRefreshToken(row)"
-                class="p-2 rounded-lg hover:bg-purple-50 dark:hover:bg-purple-900/20 text-gray-500 hover:text-purple-600 dark:hover:text-purple-400 transition-colors"
+                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-purple-50 hover:text-purple-600 dark:hover:bg-purple-900/20 dark:hover:text-purple-400"
                 :title="t('admin.accounts.refreshToken')"
               >
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
+                <svg
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+                  />
                 </svg>
               </button>
               <button
                 @click="handleEdit(row)"
-                class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-dark-700 text-gray-500 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
+                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-primary-600 dark:hover:bg-dark-700 dark:hover:text-primary-400"
                 :title="t('common.edit')"
               >
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round"
-                    d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
+                <svg
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
+                  />
                 </svg>
               </button>
               <button
                 @click="handleDelete(row)"
-                class="p-2 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 text-gray-500 hover:text-red-600 dark:hover:text-red-400 transition-colors"
+                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
                 :title="t('common.delete')"
               >
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round"
-                    d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
+                <svg
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+                  />
                 </svg>
               </button>
             </div>
@@ -354,18 +488,10 @@
     />
 
     <!-- Test Account Modal -->
-    <AccountTestModal
-      :show="showTestModal"
-      :account="testingAccount"
-      @close="closeTestModal"
-    />
+    <AccountTestModal :show="showTestModal" :account="testingAccount" @close="closeTestModal" />
 
     <!-- Account Stats Modal -->
-    <AccountStatsModal
-      :show="showStatsModal"
-      :account="statsAccount"
-      @close="closeStatsModal"
-    />
+    <AccountStatsModal :show="showStatsModal" :account="statsAccount" @close="closeStatsModal" />
 
     <!-- Delete Confirmation Dialog -->
     <ConfirmDialog
@@ -420,7 +546,14 @@ import Pagination from '@/components/common/Pagination.vue'
 import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
 import EmptyState from '@/components/common/EmptyState.vue'
 import Select from '@/components/common/Select.vue'
-import { CreateAccountModal, EditAccountModal, BulkEditAccountModal, ReAuthAccountModal, AccountStatsModal, SyncFromCrsModal } from '@/components/account'
+import {
+  CreateAccountModal,
+  EditAccountModal,
+  BulkEditAccountModal,
+  ReAuthAccountModal,
+  AccountStatsModal,
+  SyncFromCrsModal
+} from '@/components/account'
 import AccountStatusIndicator from '@/components/account/AccountStatusIndicator.vue'
 import AccountUsageCell from '@/components/account/AccountUsageCell.vue'
 import AccountTodayStatsCell from '@/components/account/AccountTodayStatsCell.vue'
@@ -452,7 +585,8 @@ const columns = computed<Column[]>(() => [
 const platformOptions = computed(() => [
   { value: '', label: t('admin.accounts.allPlatforms') },
   { value: 'anthropic', label: t('admin.accounts.platforms.anthropic') },
-  { value: 'openai', label: t('admin.accounts.platforms.openai') }
+  { value: 'openai', label: t('admin.accounts.platforms.openai') },
+  { value: 'gemini', label: t('admin.accounts.platforms.gemini') }
 ])
 
 const typeOptions = computed(() => [
@@ -478,7 +612,7 @@ const searchQuery = ref('')
 const filters = reactive({
   platform: '',
   type: '',
-  status: '',
+  status: ''
 })
 const pagination = reactive({
   page: 1,
@@ -508,7 +642,7 @@ const bulkDeleting = ref(false)
 // Bulk selection
 const selectedAccountIds = ref<number[]>([])
 const selectCurrentPageAccounts = () => {
-  const pageIds = accounts.value.map(account => account.id)
+  const pageIds = accounts.value.map((account) => account.id)
   const merged = new Set([...selectedAccountIds.value, ...pageIds])
   selectedAccountIds.value = Array.from(merged)
 }
@@ -528,16 +662,12 @@ const isOverloaded = (account: Account): boolean => {
 const loadAccounts = async () => {
   loading.value = true
   try {
-    const response = await adminAPI.accounts.list(
-      pagination.page,
-      pagination.page_size,
-      {
-        platform: filters.platform || undefined,
-        type: filters.type || undefined,
-        status: filters.status || undefined,
-        search: searchQuery.value || undefined
-      }
-    )
+    const response = await adminAPI.accounts.list(pagination.page, pagination.page_size, {
+      platform: filters.platform || undefined,
+      type: filters.type || undefined,
+      status: filters.status || undefined,
+      search: searchQuery.value || undefined
+    })
     accounts.value = response.items
     pagination.total = response.total
     pagination.pages = response.pages
@@ -653,8 +783,8 @@ const confirmBulkDelete = async () => {
   bulkDeleting.value = true
   const ids = [...selectedAccountIds.value]
   try {
-    const results = await Promise.allSettled(ids.map(id => adminAPI.accounts.delete(id)))
-    const success = results.filter(result => result.status === 'fulfilled').length
+    const results = await Promise.allSettled(ids.map((id) => adminAPI.accounts.delete(id)))
+    const success = results.filter((result) => result.status === 'fulfilled').length
     const failed = results.length - success
 
     if (failed === 0) {
@@ -708,7 +838,7 @@ const handleToggleSchedulable = async (account: Account) => {
   togglingSchedulable.value = account.id
   try {
     const updatedAccount = await adminAPI.accounts.setSchedulable(account.id, !account.schedulable)
-    const index = accounts.value.findIndex(a => a.id === account.id)
+    const index = accounts.value.findIndex((a) => a.id === account.id)
     if (index !== -1) {
       accounts.value[index] = updatedAccount
     }
@@ -718,7 +848,9 @@ const handleToggleSchedulable = async (account: Account) => {
         : t('admin.accounts.schedulableDisabled')
     )
   } catch (error: any) {
-    appStore.showError(error.response?.data?.detail || t('admin.accounts.failedToToggleSchedulable'))
+    appStore.showError(
+      error.response?.data?.detail || t('admin.accounts.failedToToggleSchedulable')
+    )
     console.error('Error toggling schedulable:', error)
   } finally {
     togglingSchedulable.value = null
diff --git a/frontend/src/views/admin/DashboardView.vue b/frontend/src/views/admin/DashboardView.vue
index 2102a007..ec98cc0d 100644
--- a/frontend/src/views/admin/DashboardView.vue
+++ b/frontend/src/views/admin/DashboardView.vue
@@ -12,15 +12,31 @@
           <!-- Total API Keys -->
           <div class="card p-4">
             <div class="flex items-center gap-3">
-              <div class="p-2 rounded-lg bg-blue-100 dark:bg-blue-900/30">
-                <svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z" />
+              <div class="rounded-lg bg-blue-100 p-2 dark:bg-blue-900/30">
+                <svg
+                  class="h-5 w-5 text-blue-600 dark:text-blue-400"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"
+                  />
                 </svg>
               </div>
               <div>
-                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('admin.dashboard.apiKeys') }}</p>
-                <p class="text-xl font-bold text-gray-900 dark:text-white">{{ stats.total_api_keys }}</p>
-                <p class="text-xs text-green-600 dark:text-green-400">{{ stats.active_api_keys }} {{ t('common.active') }}</p>
+                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
+                  {{ t('admin.dashboard.apiKeys') }}
+                </p>
+                <p class="text-xl font-bold text-gray-900 dark:text-white">
+                  {{ stats.total_api_keys }}
+                </p>
+                <p class="text-xs text-green-600 dark:text-green-400">
+                  {{ stats.active_api_keys }} {{ t('common.active') }}
+                </p>
               </div>
             </div>
           </div>
@@ -28,17 +44,35 @@
           <!-- Service Accounts -->
           <div class="card p-4">
             <div class="flex items-center gap-3">
-              <div class="p-2 rounded-lg bg-purple-100 dark:bg-purple-900/30">
-                <svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z" />
+              <div class="rounded-lg bg-purple-100 p-2 dark:bg-purple-900/30">
+                <svg
+                  class="h-5 w-5 text-purple-600 dark:text-purple-400"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z"
+                  />
                 </svg>
               </div>
               <div>
-                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('admin.dashboard.accounts') }}</p>
-                <p class="text-xl font-bold text-gray-900 dark:text-white">{{ stats.total_accounts }}</p>
+                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
+                  {{ t('admin.dashboard.accounts') }}
+                </p>
+                <p class="text-xl font-bold text-gray-900 dark:text-white">
+                  {{ stats.total_accounts }}
+                </p>
                 <p class="text-xs">
-                  <span class="text-green-600 dark:text-green-400">{{ stats.normal_accounts }} {{ t('common.active') }}</span>
-                  <span v-if="stats.error_accounts > 0" class="text-red-500 ml-1">{{ stats.error_accounts }} {{ t('common.error') }}</span>
+                  <span class="text-green-600 dark:text-green-400"
+                    >{{ stats.normal_accounts }} {{ t('common.active') }}</span
+                  >
+                  <span v-if="stats.error_accounts > 0" class="ml-1 text-red-500"
+                    >{{ stats.error_accounts }} {{ t('common.error') }}</span
+                  >
                 </p>
               </div>
             </div>
@@ -47,15 +81,31 @@
           <!-- Today Requests -->
           <div class="card p-4">
             <div class="flex items-center gap-3">
-              <div class="p-2 rounded-lg bg-green-100 dark:bg-green-900/30">
-                <svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
+              <div class="rounded-lg bg-green-100 p-2 dark:bg-green-900/30">
+                <svg
+                  class="h-5 w-5 text-green-600 dark:text-green-400"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"
+                  />
                 </svg>
               </div>
               <div>
-                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('admin.dashboard.todayRequests') }}</p>
-                <p class="text-xl font-bold text-gray-900 dark:text-white">{{ stats.today_requests }}</p>
-                <p class="text-xs text-gray-500 dark:text-gray-400">{{ t('common.total') }}: {{ formatNumber(stats.total_requests) }}</p>
+                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
+                  {{ t('admin.dashboard.todayRequests') }}
+                </p>
+                <p class="text-xl font-bold text-gray-900 dark:text-white">
+                  {{ stats.today_requests }}
+                </p>
+                <p class="text-xs text-gray-500 dark:text-gray-400">
+                  {{ t('common.total') }}: {{ formatNumber(stats.total_requests) }}
+                </p>
               </div>
             </div>
           </div>
@@ -63,15 +113,31 @@
           <!-- New Users Today -->
           <div class="card p-4">
             <div class="flex items-center gap-3">
-              <div class="p-2 rounded-lg bg-emerald-100 dark:bg-emerald-900/30">
-                <svg class="w-5 h-5 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
+              <div class="rounded-lg bg-emerald-100 p-2 dark:bg-emerald-900/30">
+                <svg
+                  class="h-5 w-5 text-emerald-600 dark:text-emerald-400"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"
+                  />
                 </svg>
               </div>
               <div>
-                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('admin.dashboard.users') }}</p>
-                <p class="text-xl font-bold text-emerald-600 dark:text-emerald-400">+{{ stats.today_new_users }}</p>
-                <p class="text-xs text-gray-500 dark:text-gray-400">{{ t('common.total') }}: {{ formatNumber(stats.total_users) }}</p>
+                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
+                  {{ t('admin.dashboard.users') }}
+                </p>
+                <p class="text-xl font-bold text-emerald-600 dark:text-emerald-400">
+                  +{{ stats.today_new_users }}
+                </p>
+                <p class="text-xs text-gray-500 dark:text-gray-400">
+                  {{ t('common.total') }}: {{ formatNumber(stats.total_users) }}
+                </p>
               </div>
             </div>
           </div>
@@ -82,17 +148,40 @@
           <!-- Today Tokens -->
           <div class="card p-4">
             <div class="flex items-center gap-3">
-              <div class="p-2 rounded-lg bg-amber-100 dark:bg-amber-900/30">
-                <svg class="w-5 h-5 text-amber-600 dark:text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
+              <div class="rounded-lg bg-amber-100 p-2 dark:bg-amber-900/30">
+                <svg
+                  class="h-5 w-5 text-amber-600 dark:text-amber-400"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"
+                  />
                 </svg>
               </div>
               <div>
-                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('admin.dashboard.todayTokens') }}</p>
-                <p class="text-xl font-bold text-gray-900 dark:text-white">{{ formatTokens(stats.today_tokens) }}</p>
+                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
+                  {{ t('admin.dashboard.todayTokens') }}
+                </p>
+                <p class="text-xl font-bold text-gray-900 dark:text-white">
+                  {{ formatTokens(stats.today_tokens) }}
+                </p>
                 <p class="text-xs">
-                  <span class="text-amber-600 dark:text-amber-400" :title="t('admin.dashboard.actual')">${{ formatCost(stats.today_actual_cost) }}</span>
-                  <span class="text-gray-400 dark:text-gray-500" :title="t('admin.dashboard.standard')"> / ${{ formatCost(stats.today_cost) }}</span>
+                  <span
+                    class="text-amber-600 dark:text-amber-400"
+                    :title="t('admin.dashboard.actual')"
+                    >${{ formatCost(stats.today_actual_cost) }}</span
+                  >
+                  <span
+                    class="text-gray-400 dark:text-gray-500"
+                    :title="t('admin.dashboard.standard')"
+                  >
+                    / ${{ formatCost(stats.today_cost) }}</span
+                  >
                 </p>
               </div>
             </div>
@@ -101,17 +190,40 @@
           <!-- Total Tokens -->
           <div class="card p-4">
             <div class="flex items-center gap-3">
-              <div class="p-2 rounded-lg bg-indigo-100 dark:bg-indigo-900/30">
-                <svg class="w-5 h-5 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" />
+              <div class="rounded-lg bg-indigo-100 p-2 dark:bg-indigo-900/30">
+                <svg
+                  class="h-5 w-5 text-indigo-600 dark:text-indigo-400"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"
+                  />
                 </svg>
               </div>
               <div>
-                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('admin.dashboard.totalTokens') }}</p>
-                <p class="text-xl font-bold text-gray-900 dark:text-white">{{ formatTokens(stats.total_tokens) }}</p>
+                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
+                  {{ t('admin.dashboard.totalTokens') }}
+                </p>
+                <p class="text-xl font-bold text-gray-900 dark:text-white">
+                  {{ formatTokens(stats.total_tokens) }}
+                </p>
                 <p class="text-xs">
-                  <span class="text-indigo-600 dark:text-indigo-400" :title="t('admin.dashboard.actual')">${{ formatCost(stats.total_actual_cost) }}</span>
-                  <span class="text-gray-400 dark:text-gray-500" :title="t('admin.dashboard.standard')"> / ${{ formatCost(stats.total_cost) }}</span>
+                  <span
+                    class="text-indigo-600 dark:text-indigo-400"
+                    :title="t('admin.dashboard.actual')"
+                    >${{ formatCost(stats.total_actual_cost) }}</span
+                  >
+                  <span
+                    class="text-gray-400 dark:text-gray-500"
+                    :title="t('admin.dashboard.standard')"
+                  >
+                    / ${{ formatCost(stats.total_cost) }}</span
+                  >
                 </p>
               </div>
             </div>
@@ -120,19 +232,35 @@
           <!-- Performance (RPM/TPM) -->
           <div class="card p-4">
             <div class="flex items-center gap-3">
-              <div class="p-2 rounded-lg bg-violet-100 dark:bg-violet-900/30">
-                <svg class="w-5 h-5 text-violet-600 dark:text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+              <div class="rounded-lg bg-violet-100 p-2 dark:bg-violet-900/30">
+                <svg
+                  class="h-5 w-5 text-violet-600 dark:text-violet-400"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M13 10V3L4 14h7v7l9-11h-7z"
+                  />
                 </svg>
               </div>
               <div class="flex-1">
-                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('admin.dashboard.performance') }}</p>
+                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
+                  {{ t('admin.dashboard.performance') }}
+                </p>
                 <div class="flex items-baseline gap-2">
-                  <p class="text-xl font-bold text-gray-900 dark:text-white">{{ formatTokens(stats.rpm) }}</p>
+                  <p class="text-xl font-bold text-gray-900 dark:text-white">
+                    {{ formatTokens(stats.rpm) }}
+                  </p>
                   <span class="text-xs text-gray-500 dark:text-gray-400">RPM</span>
                 </div>
                 <div class="flex items-baseline gap-2">
-                  <p class="text-sm font-semibold text-violet-600 dark:text-violet-400">{{ formatTokens(stats.tpm) }}</p>
+                  <p class="text-sm font-semibold text-violet-600 dark:text-violet-400">
+                    {{ formatTokens(stats.tpm) }}
+                  </p>
                   <span class="text-xs text-gray-500 dark:text-gray-400">TPM</span>
                 </div>
               </div>
@@ -142,15 +270,31 @@
           <!-- Avg Response Time -->
           <div class="card p-4">
             <div class="flex items-center gap-3">
-              <div class="p-2 rounded-lg bg-rose-100 dark:bg-rose-900/30">
-                <svg class="w-5 h-5 text-rose-600 dark:text-rose-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+              <div class="rounded-lg bg-rose-100 p-2 dark:bg-rose-900/30">
+                <svg
+                  class="h-5 w-5 text-rose-600 dark:text-rose-400"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
                 </svg>
               </div>
               <div>
-                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('admin.dashboard.avgResponse') }}</p>
-                <p class="text-xl font-bold text-gray-900 dark:text-white">{{ formatDuration(stats.average_duration_ms) }}</p>
-                <p class="text-xs text-gray-500 dark:text-gray-400">{{ stats.active_users }} {{ t('admin.dashboard.activeUsers') }}</p>
+                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
+                  {{ t('admin.dashboard.avgResponse') }}
+                </p>
+                <p class="text-xl font-bold text-gray-900 dark:text-white">
+                  {{ formatDuration(stats.average_duration_ms) }}
+                </p>
+                <p class="text-xs text-gray-500 dark:text-gray-400">
+                  {{ stats.active_users }} {{ t('admin.dashboard.activeUsers') }}
+                </p>
               </div>
             </div>
           </div>
@@ -162,15 +306,19 @@
           <div class="card p-4">
             <div class="flex flex-wrap items-center gap-4">
               <div class="flex items-center gap-2">
-                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('admin.dashboard.timeRange') }}:</span>
+                <span class="text-sm font-medium text-gray-700 dark:text-gray-300"
+                  >{{ t('admin.dashboard.timeRange') }}:</span
+                >
                 <DateRangePicker
                   v-model:start-date="startDate"
                   v-model:end-date="endDate"
                   @change="onDateRangeChange"
                 />
               </div>
-              <div class="flex items-center gap-2 ml-auto">
-                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('admin.dashboard.granularity') }}:</span>
+              <div class="ml-auto flex items-center gap-2">
+                <span class="text-sm font-medium text-gray-700 dark:text-gray-300"
+                  >{{ t('admin.dashboard.granularity') }}:</span
+                >
                 <div class="w-28">
                   <Select
                     v-model="granularity"
@@ -184,22 +332,21 @@
 
           <!-- Charts Grid -->
           <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
-            <ModelDistributionChart
-              :model-stats="modelStats"
-              :loading="chartsLoading"
-            />
-            <TokenUsageTrend
-              :trend-data="trendData"
-              :loading="chartsLoading"
-            />
+            <ModelDistributionChart :model-stats="modelStats" :loading="chartsLoading" />
+            <TokenUsageTrend :trend-data="trendData" :loading="chartsLoading" />
           </div>
 
           <!-- User Usage Trend (Full Width) -->
           <div class="card p-4">
-            <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-4">{{ t('admin.dashboard.recentUsage') }} (Top 12)</h3>
+            <h3 class="mb-4 text-sm font-semibold text-gray-900 dark:text-white">
+              {{ t('admin.dashboard.recentUsage') }} (Top 12)
+            </h3>
             <div class="h-64">
               <Line v-if="userTrendChartData" :data="userTrendChartData" :options="lineOptions" />
-              <div v-else class="flex items-center justify-center h-full text-gray-500 dark:text-gray-400 text-sm">
+              <div
+                v-else
+                class="flex h-full items-center justify-center text-sm text-gray-500 dark:text-gray-400"
+              >
                 {{ t('admin.dashboard.noDataAvailable') }}
               </div>
             </div>
@@ -268,7 +415,7 @@ const endDate = ref('')
 // Granularity options for Select component
 const granularityOptions = computed(() => [
   { value: 'day', label: t('admin.dashboard.day') },
-  { value: 'hour', label: t('admin.dashboard.hour') },
+  { value: 'hour', label: t('admin.dashboard.hour') }
 ])
 
 // Dark mode detection
@@ -279,7 +426,7 @@ const isDarkMode = computed(() => {
 // Chart colors
 const chartColors = computed(() => ({
   text: isDarkMode.value ? '#e5e7eb' : '#374151',
-  grid: isDarkMode.value ? '#374151' : '#e5e7eb',
+  grid: isDarkMode.value ? '#374151' : '#e5e7eb'
 }))
 
 // Line chart options (for user trend chart)
@@ -288,7 +435,7 @@ const lineOptions = computed(() => ({
   maintainAspectRatio: false,
   interaction: {
     intersect: false,
-    mode: 'index' as const,
+    mode: 'index' as const
   },
   plugins: {
     legend: {
@@ -299,43 +446,43 @@ const lineOptions = computed(() => ({
         pointStyle: 'circle',
         padding: 15,
         font: {
-          size: 11,
-        },
-      },
+          size: 11
+        }
+      }
     },
     tooltip: {
       callbacks: {
         label: (context: any) => {
           return `${context.dataset.label}: ${formatTokens(context.raw)}`
-        },
-      },
-    },
+        }
+      }
+    }
   },
   scales: {
     x: {
       grid: {
-        color: chartColors.value.grid,
+        color: chartColors.value.grid
       },
       ticks: {
         color: chartColors.value.text,
         font: {
-          size: 10,
-        },
-      },
+          size: 10
+        }
+      }
     },
     y: {
       grid: {
-        color: chartColors.value.grid,
+        color: chartColors.value.grid
       },
       ticks: {
         color: chartColors.value.text,
         font: {
-          size: 10,
+          size: 10
         },
-        callback: (value: string | number) => formatTokens(Number(value)),
-      },
-    },
-  },
+        callback: (value: string | number) => formatTokens(Number(value))
+      }
+    }
+  }
 }))
 
 // User trend chart data
@@ -354,7 +501,7 @@ const userTrendChartData = computed(() => {
   const userGroups = new Map<string, { name: string; data: Map<string, number> }>()
   const allDates = new Set<string>()
 
-  userTrend.value.forEach(point => {
+  userTrend.value.forEach((point) => {
     allDates.add(point.date)
     const key = getDisplayName(point.email, point.user_id)
     if (!userGroups.has(key)) {
@@ -364,20 +511,33 @@ const userTrendChartData = computed(() => {
   })
 
   const sortedDates = Array.from(allDates).sort()
-  const colors = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899', '#14b8a6', '#f97316', '#6366f1', '#84cc16', '#06b6d4', '#a855f7']
+  const colors = [
+    '#3b82f6',
+    '#10b981',
+    '#f59e0b',
+    '#ef4444',
+    '#8b5cf6',
+    '#ec4899',
+    '#14b8a6',
+    '#f97316',
+    '#6366f1',
+    '#84cc16',
+    '#06b6d4',
+    '#a855f7'
+  ]
 
   const datasets = Array.from(userGroups.values()).map((group, idx) => ({
     label: group.name,
-    data: sortedDates.map(date => group.data.get(date) || 0),
+    data: sortedDates.map((date) => group.data.get(date) || 0),
     borderColor: colors[idx % colors.length],
     backgroundColor: `${colors[idx % colors.length]}20`,
     fill: false,
-    tension: 0.3,
+    tension: 0.3
   }))
 
   return {
     labels: sortedDates,
-    datasets,
+    datasets
   }
 })
 
@@ -417,7 +577,11 @@ const formatDuration = (ms: number): string => {
 }
 
 // Date range change handler
-const onDateRangeChange = (range: { startDate: string; endDate: string; preset: string | null }) => {
+const onDateRangeChange = (range: {
+  startDate: string
+  endDate: string
+  preset: string | null
+}) => {
   // Auto-select granularity based on date range
   const start = new Date(range.startDate)
   const end = new Date(range.endDate)
@@ -464,13 +628,13 @@ const loadChartData = async () => {
     const params = {
       start_date: startDate.value,
       end_date: endDate.value,
-      granularity: granularity.value,
+      granularity: granularity.value
     }
 
     const [trendResponse, modelResponse, userResponse] = await Promise.all([
       adminAPI.dashboard.getUsageTrend(params),
       adminAPI.dashboard.getModelStats({ start_date: startDate.value, end_date: endDate.value }),
-      adminAPI.dashboard.getUserUsageTrend({ ...params, limit: 12 }),
+      adminAPI.dashboard.getUserUsageTrend({ ...params, limit: 12 })
     ])
 
     trendData.value = trendResponse.trend || []
@@ -493,7 +657,7 @@ onMounted(() => {
 <style scoped>
 /* Compact Select styling for dashboard */
 :deep(.select-trigger) {
-  @apply px-3 py-1.5 text-sm rounded-lg;
+  @apply rounded-lg px-3 py-1.5 text-sm;
 }
 
 :deep(.select-dropdown) {
diff --git a/frontend/src/views/admin/GroupsView.vue b/frontend/src/views/admin/GroupsView.vue
index 9415c0b9..235394f5 100644
--- a/frontend/src/views/admin/GroupsView.vue
+++ b/frontend/src/views/admin/GroupsView.vue
@@ -10,17 +10,27 @@
           :title="t('common.refresh')"
         >
           <svg
-            :class="['w-5 h-5', loading ? 'animate-spin' : '']"
-            fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"
+            :class="['h-5 w-5', loading ? 'animate-spin' : '']"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="1.5"
           >
-            <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+            />
           </svg>
         </button>
-        <button
-          @click="showCreateModal = true"
-          class="btn btn-primary"
-        >
-          <svg class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+        <button @click="showCreateModal = true" class="btn btn-primary">
+          <svg
+            class="mr-2 h-5 w-5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="1.5"
+          >
             <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
           </svg>
           {{ t('admin.groups.createGroup') }}
@@ -62,14 +72,16 @@
           <template #cell-platform="{ value }">
             <span
               :class="[
-                'inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium',
+                'inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium',
                 value === 'anthropic'
                   ? 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400'
-                  : 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400'
+                  : value === 'openai'
+                    ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400'
+                    : 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
               ]"
             >
               <PlatformIcon :platform="value" size="xs" />
-              {{ value === 'anthropic' ? 'Anthropic' : 'OpenAI' }}
+              {{ value === 'anthropic' ? 'Anthropic' : value === 'openai' ? 'OpenAI' : 'Gemini' }}
             </span>
           </template>
 
@@ -78,24 +90,49 @@
               <!-- Type Badge -->
               <span
                 :class="[
-                  'inline-block px-2 py-0.5 rounded-full text-xs font-medium',
+                  'inline-block rounded-full px-2 py-0.5 text-xs font-medium',
                   row.subscription_type === 'subscription'
                     ? 'bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-400'
                     : 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300'
                 ]"
               >
-                {{ row.subscription_type === 'subscription' ? t('admin.groups.subscription.subscription') : t('admin.groups.subscription.standard') }}
+                {{
+                  row.subscription_type === 'subscription'
+                    ? t('admin.groups.subscription.subscription')
+                    : t('admin.groups.subscription.standard')
+                }}
               </span>
               <!-- Subscription Limits - compact single line -->
-              <div v-if="row.subscription_type === 'subscription'" class="text-xs text-gray-500 dark:text-gray-400">
-                <template v-if="row.daily_limit_usd || row.weekly_limit_usd || row.monthly_limit_usd">
-                  <span v-if="row.daily_limit_usd">${{ row.daily_limit_usd }}/{{ t('admin.groups.limitDay') }}</span>
-                  <span v-if="row.daily_limit_usd && (row.weekly_limit_usd || row.monthly_limit_usd)" class="mx-1 text-gray-300 dark:text-gray-600">·</span>
-                  <span v-if="row.weekly_limit_usd">${{ row.weekly_limit_usd }}/{{ t('admin.groups.limitWeek') }}</span>
-                  <span v-if="row.weekly_limit_usd && row.monthly_limit_usd" class="mx-1 text-gray-300 dark:text-gray-600">·</span>
-                  <span v-if="row.monthly_limit_usd">${{ row.monthly_limit_usd }}/{{ t('admin.groups.limitMonth') }}</span>
+              <div
+                v-if="row.subscription_type === 'subscription'"
+                class="text-xs text-gray-500 dark:text-gray-400"
+              >
+                <template
+                  v-if="row.daily_limit_usd || row.weekly_limit_usd || row.monthly_limit_usd"
+                >
+                  <span v-if="row.daily_limit_usd"
+                    >${{ row.daily_limit_usd }}/{{ t('admin.groups.limitDay') }}</span
+                  >
+                  <span
+                    v-if="row.daily_limit_usd && (row.weekly_limit_usd || row.monthly_limit_usd)"
+                    class="mx-1 text-gray-300 dark:text-gray-600"
+                    >·</span
+                  >
+                  <span v-if="row.weekly_limit_usd"
+                    >${{ row.weekly_limit_usd }}/{{ t('admin.groups.limitWeek') }}</span
+                  >
+                  <span
+                    v-if="row.weekly_limit_usd && row.monthly_limit_usd"
+                    class="mx-1 text-gray-300 dark:text-gray-600"
+                    >·</span
+                  >
+                  <span v-if="row.monthly_limit_usd"
+                    >${{ row.monthly_limit_usd }}/{{ t('admin.groups.limitMonth') }}</span
+                  >
                 </template>
-                <span v-else class="text-gray-400 dark:text-gray-500">{{ t('admin.groups.subscription.noLimit') }}</span>
+                <span v-else class="text-gray-400 dark:text-gray-500">{{
+                  t('admin.groups.subscription.noLimit')
+                }}</span>
               </div>
             </div>
           </template>
@@ -105,29 +142,21 @@
           </template>
 
           <template #cell-is_exclusive="{ value }">
-            <span
-              :class="[
-                'badge',
-                value ? 'badge-primary' : 'badge-gray'
-              ]"
-            >
+            <span :class="['badge', value ? 'badge-primary' : 'badge-gray']">
               {{ value ? t('admin.groups.exclusive') : t('admin.groups.public') }}
             </span>
           </template>
 
           <template #cell-account_count="{ value }">
-            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800 dark:bg-dark-600 dark:text-gray-300">
+            <span
+              class="inline-flex items-center rounded bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-800 dark:bg-dark-600 dark:text-gray-300"
+            >
               {{ t('admin.groups.accountsCount', { count: value || 0 }) }}
             </span>
           </template>
 
           <template #cell-status="{ value }">
-            <span
-              :class="[
-                'badge',
-                value === 'active' ? 'badge-success' : 'badge-danger'
-              ]"
-            >
+            <span :class="['badge', value === 'active' ? 'badge-success' : 'badge-danger']">
               {{ value }}
             </span>
           </template>
@@ -136,22 +165,40 @@
             <div class="flex items-center gap-1">
               <button
                 @click="handleEdit(row)"
-                class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-dark-700 text-gray-500 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
+                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-primary-600 dark:hover:bg-dark-700 dark:hover:text-primary-400"
                 :title="t('common.edit')"
               >
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round"
-                    d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
+                <svg
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
+                  />
                 </svg>
               </button>
               <button
                 @click="handleDelete(row)"
-                class="p-2 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 text-gray-500 hover:text-red-600 dark:hover:text-red-400 transition-colors"
+                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
                 :title="t('common.delete')"
               >
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round"
-                    d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
+                <svg
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+                  />
                 </svg>
               </button>
             </div>
@@ -207,10 +254,7 @@
         </div>
         <div>
           <label class="input-label">{{ t('admin.groups.form.platform') }}</label>
-          <Select
-            v-model="createForm.platform"
-            :options="platformOptions"
-          />
+          <Select v-model="createForm.platform" :options="platformOptions" />
           <p class="input-hint">{{ t('admin.groups.platformHint') }}</p>
         </div>
         <div v-if="createForm.subscription_type !== 'subscription'">
@@ -236,7 +280,7 @@
           >
             <span
               :class="[
-                'inline-block h-4 w-4 transform rounded-full bg-white transition-transform shadow',
+                'inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform',
                 createForm.is_exclusive ? 'translate-x-6' : 'translate-x-1'
               ]"
             />
@@ -247,20 +291,22 @@
         </div>
 
         <!-- Subscription Configuration -->
-        <div class="border-t pt-4 mt-4">
-          <h4 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{{ t('admin.groups.subscription.title') }}</h4>
+        <div class="mt-4 border-t pt-4">
+          <h4 class="mb-4 text-sm font-medium text-gray-900 dark:text-white">
+            {{ t('admin.groups.subscription.title') }}
+          </h4>
 
           <div class="mb-4">
             <label class="input-label">{{ t('admin.groups.subscription.type') }}</label>
-            <Select
-              v-model="createForm.subscription_type"
-              :options="subscriptionTypeOptions"
-            />
+            <Select v-model="createForm.subscription_type" :options="subscriptionTypeOptions" />
             <p class="input-hint">{{ t('admin.groups.subscription.typeHint') }}</p>
           </div>
 
           <!-- Subscription limits (only show when subscription type is selected) -->
-          <div v-if="createForm.subscription_type === 'subscription'" class="space-y-4 pl-4 border-l-2 border-primary-200 dark:border-primary-800">
+          <div
+            v-if="createForm.subscription_type === 'subscription'"
+            class="space-y-4 border-l-2 border-primary-200 pl-4 dark:border-primary-800"
+          >
             <div>
               <label class="input-label">{{ t('admin.groups.subscription.dailyLimit') }}</label>
               <input
@@ -298,26 +344,29 @@
         </div>
 
         <div class="flex justify-end gap-3 pt-4">
-          <button
-            @click="closeCreateModal"
-            type="button"
-            class="btn btn-secondary"
-          >
+          <button @click="closeCreateModal" type="button" class="btn btn-secondary">
             {{ t('common.cancel') }}
           </button>
-          <button
-            type="submit"
-            :disabled="submitting"
-            class="btn btn-primary"
-          >
+          <button type="submit" :disabled="submitting" class="btn btn-primary">
             <svg
               v-if="submitting"
-              class="animate-spin -ml-1 mr-2 h-4 w-4"
+              class="-ml-1 mr-2 h-4 w-4 animate-spin"
               fill="none"
               viewBox="0 0 24 24"
             >
-              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              <circle
+                class="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                stroke-width="4"
+              ></circle>
+              <path
+                class="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              ></path>
             </svg>
             {{ submitting ? t('admin.groups.creating') : t('common.create') }}
           </button>
@@ -335,28 +384,15 @@
       <form v-if="editingGroup" @submit.prevent="handleUpdateGroup" class="space-y-5">
         <div>
           <label class="input-label">{{ t('admin.groups.form.name') }}</label>
-          <input
-            v-model="editForm.name"
-            type="text"
-            required
-            class="input"
-          />
+          <input v-model="editForm.name" type="text" required class="input" />
         </div>
         <div>
           <label class="input-label">{{ t('admin.groups.form.description') }}</label>
-          <textarea
-            v-model="editForm.description"
-            rows="3"
-            class="input"
-          ></textarea>
+          <textarea v-model="editForm.description" rows="3" class="input"></textarea>
         </div>
         <div>
           <label class="input-label">{{ t('admin.groups.form.platform') }}</label>
-          <Select
-            v-model="editForm.platform"
-            :options="platformOptions"
-            :disabled="true"
-          />
+          <Select v-model="editForm.platform" :options="platformOptions" :disabled="true" />
           <p class="input-hint">{{ t('admin.groups.platformNotEditable') }}</p>
         </div>
         <div v-if="editForm.subscription_type !== 'subscription'">
@@ -381,7 +417,7 @@
           >
             <span
               :class="[
-                'inline-block h-4 w-4 transform rounded-full bg-white transition-transform shadow',
+                'inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform',
                 editForm.is_exclusive ? 'translate-x-6' : 'translate-x-1'
               ]"
             />
@@ -392,15 +428,14 @@
         </div>
         <div>
           <label class="input-label">{{ t('admin.groups.form.status') }}</label>
-          <Select
-            v-model="editForm.status"
-            :options="editStatusOptions"
-          />
+          <Select v-model="editForm.status" :options="editStatusOptions" />
         </div>
 
         <!-- Subscription Configuration -->
-        <div class="border-t pt-4 mt-4">
-          <h4 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{{ t('admin.groups.subscription.title') }}</h4>
+        <div class="mt-4 border-t pt-4">
+          <h4 class="mb-4 text-sm font-medium text-gray-900 dark:text-white">
+            {{ t('admin.groups.subscription.title') }}
+          </h4>
 
           <div class="mb-4">
             <label class="input-label">{{ t('admin.groups.subscription.type') }}</label>
@@ -413,7 +448,10 @@
           </div>
 
           <!-- Subscription limits (only show when subscription type is selected) -->
-          <div v-if="editForm.subscription_type === 'subscription'" class="space-y-4 pl-4 border-l-2 border-primary-200 dark:border-primary-800">
+          <div
+            v-if="editForm.subscription_type === 'subscription'"
+            class="space-y-4 border-l-2 border-primary-200 pl-4 dark:border-primary-800"
+          >
             <div>
               <label class="input-label">{{ t('admin.groups.subscription.dailyLimit') }}</label>
               <input
@@ -451,26 +489,29 @@
         </div>
 
         <div class="flex justify-end gap-3 pt-4">
-          <button
-            @click="closeEditModal"
-            type="button"
-            class="btn btn-secondary"
-          >
+          <button @click="closeEditModal" type="button" class="btn btn-secondary">
             {{ t('common.cancel') }}
           </button>
-          <button
-            type="submit"
-            :disabled="submitting"
-            class="btn btn-primary"
-          >
+          <button type="submit" :disabled="submitting" class="btn btn-primary">
             <svg
               v-if="submitting"
-              class="animate-spin -ml-1 mr-2 h-4 w-4"
+              class="-ml-1 mr-2 h-4 w-4 animate-spin"
               fill="none"
               viewBox="0 0 24 24"
             >
-              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              <circle
+                class="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                stroke-width="4"
+              ></circle>
+              <path
+                class="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              ></path>
             </svg>
             {{ submitting ? t('admin.groups.updating') : t('common.update') }}
           </button>
@@ -537,13 +578,15 @@ const exclusiveOptions = computed(() => [
 
 const platformOptions = computed(() => [
   { value: 'anthropic', label: 'Anthropic' },
-  { value: 'openai', label: 'OpenAI' }
+  { value: 'openai', label: 'OpenAI' },
+  { value: 'gemini', label: 'Gemini' }
 ])
 
 const platformFilterOptions = computed(() => [
   { value: '', label: t('admin.groups.allPlatforms') },
   { value: 'anthropic', label: 'Anthropic' },
-  { value: 'openai', label: 'OpenAI' }
+  { value: 'openai', label: 'OpenAI' },
+  { value: 'gemini', label: 'Gemini' }
 ])
 
 const editStatusOptions = computed(() => [
@@ -616,15 +659,11 @@ const deleteConfirmMessage = computed(() => {
 const loadGroups = async () => {
   loading.value = true
   try {
-    const response = await adminAPI.groups.list(
-      pagination.page,
-      pagination.page_size,
-      {
-        platform: (filters.platform as GroupPlatform) || undefined,
-        status: filters.status as any,
-        is_exclusive: filters.is_exclusive ? filters.is_exclusive === 'true' : undefined
-      }
-    )
+    const response = await adminAPI.groups.list(pagination.page, pagination.page_size, {
+      platform: (filters.platform as GroupPlatform) || undefined,
+      status: filters.status as any,
+      is_exclusive: filters.is_exclusive ? filters.is_exclusive === 'true' : undefined
+    })
     groups.value = response.items
     pagination.total = response.total
     pagination.pages = response.pages
@@ -727,12 +766,15 @@ const confirmDelete = async () => {
 }
 
 // 监听 subscription_type 变化，订阅模式时重置 rate_multiplier 为 1，is_exclusive 为 true
-watch(() => createForm.subscription_type, (newVal) => {
-  if (newVal === 'subscription') {
-    createForm.rate_multiplier = 1.0
-    createForm.is_exclusive = true
+watch(
+  () => createForm.subscription_type,
+  (newVal) => {
+    if (newVal === 'subscription') {
+      createForm.rate_multiplier = 1.0
+      createForm.is_exclusive = true
+    }
   }
-})
+)
 
 onMounted(() => {
   loadGroups()
diff --git a/frontend/src/views/admin/ProxiesView.vue b/frontend/src/views/admin/ProxiesView.vue
index 15dc8411..4d036cdf 100644
--- a/frontend/src/views/admin/ProxiesView.vue
+++ b/frontend/src/views/admin/ProxiesView.vue
@@ -10,17 +10,27 @@
           :title="t('common.refresh')"
         >
           <svg
-            :class="['w-5 h-5', loading ? 'animate-spin' : '']"
-            fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"
+            :class="['h-5 w-5', loading ? 'animate-spin' : '']"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="1.5"
           >
-            <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+            />
           </svg>
         </button>
-        <button
-          @click="showCreateModal = true"
-          class="btn btn-primary"
-        >
-          <svg class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+        <button @click="showCreateModal = true" class="btn btn-primary">
+          <svg
+            class="mr-2 h-5 w-5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="1.5"
+          >
             <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
           </svg>
           {{ t('admin.proxies.createProxy') }}
@@ -29,9 +39,19 @@
 
       <!-- Search and Filters -->
       <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
-        <div class="relative flex-1 max-w-md">
-          <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
+        <div class="relative max-w-md flex-1">
+          <svg
+            class="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+            />
           </svg>
           <input
             v-model="searchQuery"
@@ -69,10 +89,7 @@
           <template #cell-protocol="{ value }">
             <span
               v-if="value"
-              :class="[
-                'badge',
-                value === 'socks5' ? 'badge-primary' : 'badge-gray'
-              ]"
+              :class="['badge', value === 'socks5' ? 'badge-primary' : 'badge-gray']"
             >
               {{ value.toUpperCase() }}
             </span>
@@ -84,12 +101,7 @@
           </template>
 
           <template #cell-status="{ value }">
-            <span
-              :class="[
-                'badge',
-                value === 'active' ? 'badge-success' : 'badge-danger'
-              ]"
-            >
+            <span :class="['badge', value === 'active' ? 'badge-success' : 'badge-danger']">
               {{ value }}
             </span>
           </template>
@@ -99,35 +111,80 @@
               <button
                 @click="handleTestConnection(row)"
                 :disabled="testingProxyIds.has(row.id)"
-                class="p-2 rounded-lg hover:bg-emerald-50 dark:hover:bg-emerald-900/20 text-gray-500 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-emerald-50 hover:text-emerald-600 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-emerald-900/20 dark:hover:text-emerald-400"
                 :title="t('admin.proxies.testConnection')"
               >
-                <svg v-if="testingProxyIds.has(row.id)" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
-                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                <svg
+                  v-if="testingProxyIds.has(row.id)"
+                  class="h-4 w-4 animate-spin"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <circle
+                    class="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    stroke-width="4"
+                  ></circle>
+                  <path
+                    class="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  ></path>
                 </svg>
-                <svg v-else class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                <svg
+                  v-else
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
                 </svg>
               </button>
               <button
                 @click="handleEdit(row)"
-                class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-dark-700 text-gray-500 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
+                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-primary-600 dark:hover:bg-dark-700 dark:hover:text-primary-400"
                 :title="t('common.edit')"
               >
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round"
-                    d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
+                <svg
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
+                  />
                 </svg>
               </button>
               <button
                 @click="handleDelete(row)"
-                class="p-2 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 text-gray-500 hover:text-red-600 dark:hover:text-red-400 transition-colors"
+                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
                 :title="t('common.delete')"
               >
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round"
-                    d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
+                <svg
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+                  />
                 </svg>
               </button>
             </div>
@@ -162,18 +219,24 @@
       @close="closeCreateModal"
     >
       <!-- Tab Switch -->
-      <div class="flex mb-6 border-b border-gray-200 dark:border-dark-600">
+      <div class="mb-6 flex border-b border-gray-200 dark:border-dark-600">
         <button
           type="button"
           @click="createMode = 'standard'"
           :class="[
-            'px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors',
+            '-mb-px border-b-2 px-4 py-2 text-sm font-medium transition-colors',
             createMode === 'standard'
               ? 'border-primary-500 text-primary-600 dark:text-primary-400'
               : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
           ]"
         >
-          <svg class="w-4 h-4 inline mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+          <svg
+            class="mr-1.5 inline h-4 w-4"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="1.5"
+          >
             <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
           </svg>
           {{ t('admin.proxies.standardAdd') }}
@@ -182,14 +245,24 @@
           type="button"
           @click="createMode = 'batch'"
           :class="[
-            'px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors',
+            '-mb-px border-b-2 px-4 py-2 text-sm font-medium transition-colors',
             createMode === 'batch'
               ? 'border-primary-500 text-primary-600 dark:text-primary-400'
               : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
           ]"
         >
-          <svg class="w-4 h-4 inline mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z" />
+          <svg
+            class="mr-1.5 inline h-4 w-4"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="1.5"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z"
+            />
           </svg>
           {{ t('admin.proxies.batchAdd') }}
         </button>
@@ -209,10 +282,7 @@
         </div>
         <div>
           <label class="input-label">{{ t('admin.proxies.protocol') }}</label>
-          <Select
-            v-model="createForm.protocol"
-            :options="protocolSelectOptions"
-          />
+          <Select v-model="createForm.protocol" :options="protocolSelectOptions" />
         </div>
         <div class="grid grid-cols-2 gap-4">
           <div>
@@ -258,26 +328,29 @@
         </div>
 
         <div class="flex justify-end gap-3 pt-4">
-          <button
-            @click="closeCreateModal"
-            type="button"
-            class="btn btn-secondary"
-          >
+          <button @click="closeCreateModal" type="button" class="btn btn-secondary">
             {{ t('common.cancel') }}
           </button>
-          <button
-            type="submit"
-            :disabled="submitting"
-            class="btn btn-primary"
-          >
+          <button type="submit" :disabled="submitting" class="btn btn-primary">
             <svg
               v-if="submitting"
-              class="animate-spin -ml-1 mr-2 h-4 w-4"
+              class="-ml-1 mr-2 h-4 w-4 animate-spin"
               fill="none"
               viewBox="0 0 24 24"
             >
-              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              <circle
+                class="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                stroke-width="4"
+              ></circle>
+              <path
+                class="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              ></path>
             </svg>
             {{ submitting ? t('admin.proxies.creating') : t('common.create') }}
           </button>
@@ -301,27 +374,57 @@
         </div>
 
         <!-- Parse Result -->
-        <div v-if="batchParseResult.total > 0" class="rounded-lg p-4 bg-gray-50 dark:bg-dark-700">
+        <div v-if="batchParseResult.total > 0" class="rounded-lg bg-gray-50 p-4 dark:bg-dark-700">
           <div class="flex items-center gap-4 text-sm">
             <div class="flex items-center gap-1.5">
-              <svg class="w-4 h-4 text-primary-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              <svg
+                class="h-4 w-4 text-primary-500"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="2"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
               </svg>
               <span class="text-gray-700 dark:text-gray-300">
                 {{ t('admin.proxies.parsedCount', { count: batchParseResult.valid }) }}
               </span>
             </div>
             <div v-if="batchParseResult.invalid > 0" class="flex items-center gap-1.5">
-              <svg class="w-4 h-4 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+              <svg
+                class="h-4 w-4 text-amber-500"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="2"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+                />
               </svg>
               <span class="text-amber-600 dark:text-amber-400">
                 {{ t('admin.proxies.invalidCount', { count: batchParseResult.invalid }) }}
               </span>
             </div>
             <div v-if="batchParseResult.duplicate > 0" class="flex items-center gap-1.5">
-              <svg class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" />
+              <svg
+                class="h-4 w-4 text-gray-400"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="2"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75"
+                />
               </svg>
               <span class="text-gray-500 dark:text-gray-400">
                 {{ t('admin.proxies.duplicateCount', { count: batchParseResult.duplicate }) }}
@@ -331,11 +434,7 @@
         </div>
 
         <div class="flex justify-end gap-3 pt-4">
-          <button
-            @click="closeCreateModal"
-            type="button"
-            class="btn btn-secondary"
-          >
+          <button @click="closeCreateModal" type="button" class="btn btn-secondary">
             {{ t('common.cancel') }}
           </button>
           <button
@@ -346,14 +445,29 @@
           >
             <svg
               v-if="submitting"
-              class="animate-spin -ml-1 mr-2 h-4 w-4"
+              class="-ml-1 mr-2 h-4 w-4 animate-spin"
               fill="none"
               viewBox="0 0 24 24"
             >
-              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              <circle
+                class="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                stroke-width="4"
+              ></circle>
+              <path
+                class="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              ></path>
             </svg>
-            {{ submitting ? t('admin.proxies.importing') : t('admin.proxies.importProxies', { count: batchParseResult.valid }) }}
+            {{
+              submitting
+                ? t('admin.proxies.importing')
+                : t('admin.proxies.importProxies', { count: batchParseResult.valid })
+            }}
           </button>
         </div>
       </div>
@@ -369,29 +483,16 @@
       <form v-if="editingProxy" @submit.prevent="handleUpdateProxy" class="space-y-5">
         <div>
           <label class="input-label">{{ t('admin.proxies.name') }}</label>
-          <input
-            v-model="editForm.name"
-            type="text"
-            required
-            class="input"
-          />
+          <input v-model="editForm.name" type="text" required class="input" />
         </div>
         <div>
           <label class="input-label">{{ t('admin.proxies.protocol') }}</label>
-          <Select
-            v-model="editForm.protocol"
-            :options="protocolSelectOptions"
-          />
+          <Select v-model="editForm.protocol" :options="protocolSelectOptions" />
         </div>
         <div class="grid grid-cols-2 gap-4">
           <div>
             <label class="input-label">{{ t('admin.proxies.host') }}</label>
-            <input
-              v-model="editForm.host"
-              type="text"
-              required
-              class="input"
-            />
+            <input v-model="editForm.host" type="text" required class="input" />
           </div>
           <div>
             <label class="input-label">{{ t('admin.proxies.port') }}</label>
@@ -407,11 +508,7 @@
         </div>
         <div>
           <label class="input-label">{{ t('admin.proxies.username') }}</label>
-          <input
-            v-model="editForm.username"
-            type="text"
-            class="input"
-          />
+          <input v-model="editForm.username" type="text" class="input" />
         </div>
         <div>
           <label class="input-label">{{ t('admin.proxies.password') }}</label>
@@ -424,33 +521,33 @@
         </div>
         <div>
           <label class="input-label">{{ t('admin.proxies.status') }}</label>
-          <Select
-            v-model="editForm.status"
-            :options="editStatusOptions"
-          />
+          <Select v-model="editForm.status" :options="editStatusOptions" />
         </div>
 
         <div class="flex justify-end gap-3 pt-4">
-          <button
-            @click="closeEditModal"
-            type="button"
-            class="btn btn-secondary"
-          >
+          <button @click="closeEditModal" type="button" class="btn btn-secondary">
             {{ t('common.cancel') }}
           </button>
-          <button
-            type="submit"
-            :disabled="submitting"
-            class="btn btn-primary"
-          >
+          <button type="submit" :disabled="submitting" class="btn btn-primary">
             <svg
               v-if="submitting"
-              class="animate-spin -ml-1 mr-2 h-4 w-4"
+              class="-ml-1 mr-2 h-4 w-4 animate-spin"
               fill="none"
               viewBox="0 0 24 24"
             >
-              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              <circle
+                class="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                stroke-width="4"
+              ></circle>
+              <path
+                class="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              ></path>
             </svg>
             {{ submitting ? t('admin.proxies.updating') : t('common.update') }}
           </button>
@@ -585,15 +682,11 @@ const editForm = reactive({
 const loadProxies = async () => {
   loading.value = true
   try {
-    const response = await adminAPI.proxies.list(
-      pagination.page,
-      pagination.page_size,
-      {
-        protocol: filters.protocol || undefined,
-        status: filters.status as any,
-        search: searchQuery.value || undefined
-      }
-    )
+    const response = await adminAPI.proxies.list(pagination.page, pagination.page_size, {
+      protocol: filters.protocol || undefined,
+      status: filters.status as any,
+      search: searchQuery.value || undefined
+    })
     proxies.value = response.items
     pagination.total = response.total
     pagination.pages = response.pages
@@ -637,7 +730,9 @@ const closeCreateModal = () => {
 }
 
 // Parse proxy URL: protocol://user:pass@host:port or protocol://host:port
-const parseProxyUrl = (line: string): {
+const parseProxyUrl = (
+  line: string
+): {
   protocol: ProxyProtocol
   host: string
   port: number
@@ -668,7 +763,7 @@ const parseProxyUrl = (line: string): {
 }
 
 const parseBatchInput = () => {
-  const lines = batchInput.value.split('\n').filter(l => l.trim())
+  const lines = batchInput.value.split('\n').filter((l) => l.trim())
   const seen = new Set<string>()
   const proxies: typeof batchParseResult.proxies = []
   let invalid = 0
diff --git a/frontend/src/views/admin/RedeemView.vue b/frontend/src/views/admin/RedeemView.vue
index f7d6ff10..7937832a 100644
--- a/frontend/src/views/admin/RedeemView.vue
+++ b/frontend/src/views/admin/RedeemView.vue
@@ -10,23 +10,27 @@
           :title="t('common.refresh')"
         >
           <svg
-            :class="['w-5 h-5', loading ? 'animate-spin' : '']"
-            fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"
+            :class="['h-5 w-5', loading ? 'animate-spin' : '']"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="1.5"
           >
-            <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+            />
           </svg>
         </button>
-        <button
-          @click="showGenerateDialog = true"
-          class="btn btn-primary"
-        >
+        <button @click="showGenerateDialog = true" class="btn btn-primary">
           {{ t('admin.redeem.generateCodes') }}
         </button>
       </div>
 
       <!-- Filters and Actions -->
       <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-        <div class="flex-1 max-w-md">
+        <div class="max-w-md flex-1">
           <input
             v-model="searchQuery"
             type="text"
@@ -48,10 +52,7 @@
             class="w-36"
             @change="loadCodes"
           />
-          <button
-            @click="handleExportCodes"
-            class="btn btn-secondary"
-          >
+          <button @click="handleExportCodes" class="btn btn-secondary">
             {{ t('admin.redeem.exportCsv') }}
           </button>
         </div>
@@ -62,20 +63,38 @@
         <DataTable :columns="columns" :data="codes" :loading="loading">
           <template #cell-code="{ value }">
             <div class="flex items-center space-x-2">
-              <code class="text-sm font-mono text-gray-900 dark:text-gray-100">{{ value }}</code>
+              <code class="font-mono text-sm text-gray-900 dark:text-gray-100">{{ value }}</code>
               <button
                 @click="copyToClipboard(value)"
                 :class="[
                   'flex items-center transition-colors',
-                  copiedCode === value ? 'text-green-500' : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'
+                  copiedCode === value
+                    ? 'text-green-500'
+                    : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'
                 ]"
                 :title="copiedCode === value ? t('admin.redeem.copied') : t('keys.copyToClipboard')"
               >
-                <svg v-if="copiedCode !== value" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                <svg
+                  v-if="copiedCode !== value"
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+                  />
                 </svg>
-                <svg v-else class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                <svg v-else class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M5 13l4 4L19 7"
+                  />
                 </svg>
               </button>
             </div>
@@ -85,8 +104,11 @@
             <span
               :class="[
                 'badge',
-                value === 'balance' ? 'badge-success' :
-                value === 'subscription' ? 'badge-warning' : 'badge-primary'
+                value === 'balance'
+                  ? 'badge-success'
+                  : value === 'subscription'
+                    ? 'badge-warning'
+                    : 'badge-primary'
               ]"
             >
               {{ value }}
@@ -98,7 +120,9 @@
               <template v-if="row.type === 'balance'">${{ value.toFixed(2) }}</template>
               <template v-else-if="row.type === 'subscription'">
                 {{ row.validity_days || 30 }}{{ t('admin.redeem.days') }}
-                <span v-if="row.group" class="text-gray-500 dark:text-gray-400 text-xs ml-1">({{ row.group.name }})</span>
+                <span v-if="row.group" class="ml-1 text-xs text-gray-500 dark:text-gray-400"
+                  >({{ row.group.name }})</span
+                >
               </template>
               <template v-else>{{ value }}</template>
             </span>
@@ -108,9 +132,11 @@
             <span
               :class="[
                 'badge',
-                value === 'unused' ? 'badge-success' :
-                value === 'used' ? 'badge-gray' :
-                'badge-danger'
+                value === 'unused'
+                  ? 'badge-success'
+                  : value === 'used'
+                    ? 'badge-gray'
+                    : 'badge-danger'
               ]"
             >
               {{ value }}
@@ -124,7 +150,9 @@
           </template>
 
           <template #cell-used_at="{ value }">
-            <span class="text-sm text-gray-500 dark:text-dark-400">{{ value ? formatDate(value) : '-' }}</span>
+            <span class="text-sm text-gray-500 dark:text-dark-400">{{
+              value ? formatDate(value) : '-'
+            }}</span>
           </template>
 
           <template #cell-actions="{ row }">
@@ -132,11 +160,16 @@
               <button
                 v-if="row.status === 'unused'"
                 @click="handleDelete(row)"
-                class="p-2 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 text-gray-500 hover:text-red-600 dark:hover:text-red-400 transition-colors"
+                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
                 :title="t('common.delete')"
               >
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                  />
                 </svg>
               </button>
               <span v-else class="text-gray-400 dark:text-dark-500">-</span>
@@ -156,10 +189,7 @@
 
       <!-- Batch Actions -->
       <div v-if="filters.status === 'unused'" class="flex justify-end">
-        <button
-          @click="showDeleteUnusedDialog = true"
-          class="btn btn-danger"
-        >
+        <button @click="showDeleteUnusedDialog = true" class="btn btn-danger">
           {{ t('admin.redeem.deleteAllUnused') }}
         </button>
       </div>
@@ -191,28 +221,27 @@
 
     <!-- Generate Codes Dialog -->
     <Teleport to="body">
-      <div
-        v-if="showGenerateDialog"
-        class="fixed inset-0 z-50 flex items-center justify-center"
-      >
+      <div v-if="showGenerateDialog" class="fixed inset-0 z-50 flex items-center justify-center">
+        <div class="fixed inset-0 bg-black/50" @click="showGenerateDialog = false"></div>
         <div
-          class="fixed inset-0 bg-black/50"
-          @click="showGenerateDialog = false"
-        ></div>
-        <div class="relative z-10 w-full max-w-md bg-white dark:bg-dark-800 rounded-xl shadow-xl p-6">
-          <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">{{ t('admin.redeem.generateCodesTitle') }}</h2>
+          class="relative z-10 w-full max-w-md rounded-xl bg-white p-6 shadow-xl dark:bg-dark-800"
+        >
+          <h2 class="mb-4 text-lg font-semibold text-gray-900 dark:text-white">
+            {{ t('admin.redeem.generateCodesTitle') }}
+          </h2>
           <form @submit.prevent="handleGenerateCodes" class="space-y-4">
             <div>
               <label class="input-label">{{ t('admin.redeem.codeType') }}</label>
-              <Select
-                v-model="generateForm.type"
-                :options="typeOptions"
-              />
+              <Select v-model="generateForm.type" :options="typeOptions" />
             </div>
             <!-- 余额/并发类型：显示数值输入 -->
             <div v-if="generateForm.type !== 'subscription'">
               <label class="input-label">
-                {{ generateForm.type === 'balance' ? t('admin.redeem.amount') : t('admin.redeem.columns.value') }}
+                {{
+                  generateForm.type === 'balance'
+                    ? t('admin.redeem.amount')
+                    : t('admin.redeem.columns.value')
+                }}
               </label>
               <input
                 v-model.number="generateForm.value"
@@ -257,18 +286,10 @@
               />
             </div>
             <div class="flex justify-end gap-3 pt-2">
-              <button
-                type="button"
-                @click="showGenerateDialog = false"
-                class="btn btn-secondary"
-              >
+              <button type="button" @click="showGenerateDialog = false" class="btn btn-secondary">
                 {{ t('common.cancel') }}
               </button>
-              <button
-                type="submit"
-                :disabled="generating"
-                class="btn btn-primary"
-              >
+              <button type="submit" :disabled="generating" class="btn btn-primary">
                 {{ generating ? t('admin.redeem.generating') : t('admin.redeem.generate') }}
               </button>
             </div>
@@ -279,36 +300,51 @@
 
     <!-- Generated Codes Result Dialog -->
     <Teleport to="body">
-      <div
-        v-if="showResultDialog"
-        class="fixed inset-0 z-50 flex items-center justify-center p-4"
-      >
-        <div
-          class="fixed inset-0 bg-black/50"
-          @click="closeResultDialog"
-        ></div>
-        <div class="relative z-10 w-full max-w-lg bg-white dark:bg-dark-800 rounded-xl shadow-xl">
+      <div v-if="showResultDialog" class="fixed inset-0 z-50 flex items-center justify-center p-4">
+        <div class="fixed inset-0 bg-black/50" @click="closeResultDialog"></div>
+        <div class="relative z-10 w-full max-w-lg rounded-xl bg-white shadow-xl dark:bg-dark-800">
           <!-- Header -->
-          <div class="flex items-center justify-between px-5 py-4 border-b border-gray-200 dark:border-dark-600">
+          <div
+            class="flex items-center justify-between border-b border-gray-200 px-5 py-4 dark:border-dark-600"
+          >
             <div class="flex items-center gap-3">
-              <div class="w-10 h-10 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
-                <svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+              <div
+                class="flex h-10 w-10 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30"
+              >
+                <svg
+                  class="h-5 w-5 text-green-600 dark:text-green-400"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M5 13l4 4L19 7"
+                  />
                 </svg>
               </div>
               <div>
                 <h2 class="text-base font-semibold text-gray-900 dark:text-white">
                   {{ t('admin.redeem.generatedSuccessfully') }}
                 </h2>
-                <p class="text-sm text-gray-500 dark:text-gray-400">{{ t('admin.redeem.codesCreated', { count: generatedCodes.length }) }}</p>
+                <p class="text-sm text-gray-500 dark:text-gray-400">
+                  {{ t('admin.redeem.codesCreated', { count: generatedCodes.length }) }}
+                </p>
               </div>
             </div>
             <button
               @click="closeResultDialog"
-              class="p-1.5 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 dark:hover:text-gray-300 dark:hover:bg-dark-700 transition-colors"
+              class="rounded-lg p-1.5 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-dark-700 dark:hover:text-gray-300"
             >
-              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M6 18L18 6M6 6l12 12"
+                />
               </svg>
             </button>
           </div>
@@ -319,12 +355,14 @@
                 readonly
                 :value="generatedCodesText"
                 :style="{ height: textareaHeight }"
-                class="w-full p-3 font-mono text-sm bg-gray-50 dark:bg-dark-700 border border-gray-200 dark:border-dark-600 rounded-lg resize-none focus:outline-none text-gray-800 dark:text-gray-200"
+                class="w-full resize-none rounded-lg border border-gray-200 bg-gray-50 p-3 font-mono text-sm text-gray-800 focus:outline-none dark:border-dark-600 dark:bg-dark-700 dark:text-gray-200"
               ></textarea>
             </div>
           </div>
           <!-- Footer -->
-          <div class="flex justify-end gap-2 px-5 py-4 border-t border-gray-200 dark:border-dark-600 bg-gray-50 dark:bg-dark-700/50 rounded-b-xl">
+          <div
+            class="flex justify-end gap-2 rounded-b-xl border-t border-gray-200 bg-gray-50 px-5 py-4 dark:border-dark-600 dark:bg-dark-700/50"
+          >
             <button
               @click="copyGeneratedCodes"
               :class="[
@@ -332,20 +370,38 @@
                 copiedAll ? 'btn-success' : 'btn-secondary'
               ]"
             >
-              <svg v-if="!copiedAll" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+              <svg
+                v-if="!copiedAll"
+                class="h-4 w-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+                />
               </svg>
-              <svg v-else class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+              <svg v-else class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M5 13l4 4L19 7"
+                />
               </svg>
               {{ copiedAll ? t('admin.redeem.copied') : t('admin.redeem.copyAll') }}
             </button>
-            <button
-              @click="downloadGeneratedCodes"
-              class="btn btn-primary flex items-center gap-2"
-            >
-              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+            <button @click="downloadGeneratedCodes" class="btn btn-primary flex items-center gap-2">
+              <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+                />
               </svg>
               {{ t('admin.redeem.download') }}
             </button>
@@ -380,15 +436,15 @@ const subscriptionGroups = ref<Group[]>([])
 // 订阅类型分组选项
 const subscriptionGroupOptions = computed(() => {
   return subscriptionGroups.value
-    .filter(g => g.subscription_type === 'subscription')
-    .map(g => ({
+    .filter((g) => g.subscription_type === 'subscription')
+    .map((g) => ({
       value: g.id,
       label: g.name
     }))
 })
 
 const generatedCodesText = computed(() => {
-  return generatedCodes.value.map(code => code.code).join('\n')
+  return generatedCodes.value.map((code) => code.code).join('\n')
 })
 
 const textareaHeight = computed(() => {
@@ -397,7 +453,10 @@ const textareaHeight = computed(() => {
   const padding = 24 // top + bottom padding
   const minHeight = 60
   const maxHeight = 240
-  const calculatedHeight = Math.min(Math.max(lineCount * lineHeight + padding, minHeight), maxHeight)
+  const calculatedHeight = Math.min(
+    Math.max(lineCount * lineHeight + padding, minHeight),
+    maxHeight
+  )
   return `${calculatedHeight}px`
 })
 
@@ -497,15 +556,11 @@ const formatDate = (dateString: string): string => {
 const loadCodes = async () => {
   loading.value = true
   try {
-    const response = await adminAPI.redeem.list(
-      pagination.page,
-      pagination.page_size,
-      {
-        type: filters.type as RedeemCodeType,
-        status: filters.status as any,
-        search: searchQuery.value || undefined
-      }
-    )
+    const response = await adminAPI.redeem.list(pagination.page, pagination.page_size, {
+      type: filters.type as RedeemCodeType,
+      status: filters.status as any,
+      search: searchQuery.value || undefined
+    })
     codes.value = response.items
     pagination.total = response.total
     pagination.pages = response.pages
@@ -623,7 +678,7 @@ const confirmDeleteUnused = async () => {
   try {
     // Get all unused codes and delete them
     const unusedCodesResponse = await adminAPI.redeem.list(1, 1000, { status: 'unused' })
-    const unusedCodeIds = unusedCodesResponse.items.map(code => code.id)
+    const unusedCodeIds = unusedCodesResponse.items.map((code) => code.id)
 
     if (unusedCodeIds.length === 0) {
       appStore.showInfo(t('admin.redeem.noUnusedCodes'))
diff --git a/frontend/src/views/admin/SettingsView.vue b/frontend/src/views/admin/SettingsView.vue
index 3206e57b..ad10c1b2 100644
--- a/frontend/src/views/admin/SettingsView.vue
+++ b/frontend/src/views/admin/SettingsView.vue
@@ -1,25 +1,39 @@
 <template>
   <AppLayout>
-    <div class="max-w-4xl mx-auto space-y-6">
+    <div class="mx-auto max-w-4xl space-y-6">
       <!-- Loading State -->
       <div v-if="loading" class="flex items-center justify-center py-12">
-        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
+        <div class="h-8 w-8 animate-spin rounded-full border-b-2 border-primary-600"></div>
       </div>
 
       <!-- Settings Form -->
       <form v-else @submit.prevent="saveSettings" class="space-y-6">
         <!-- Admin API Key Settings -->
         <div class="card">
-          <div class="px-6 py-4 border-b border-gray-100 dark:border-dark-700">
-            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ t('admin.settings.adminApiKey.title') }}</h2>
-            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ t('admin.settings.adminApiKey.description') }}</p>
+          <div class="border-b border-gray-100 px-6 py-4 dark:border-dark-700">
+            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
+              {{ t('admin.settings.adminApiKey.title') }}
+            </h2>
+            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+              {{ t('admin.settings.adminApiKey.description') }}
+            </p>
           </div>
-          <div class="p-6 space-y-4">
+          <div class="space-y-4 p-6">
             <!-- Security Warning -->
-            <div class="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-4">
+            <div
+              class="rounded-lg border border-amber-200 bg-amber-50 p-4 dark:border-amber-800 dark:bg-amber-900/20"
+            >
               <div class="flex items-start">
-                <svg class="w-5 h-5 text-amber-500 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
-                  <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
+                <svg
+                  class="mt-0.5 h-5 w-5 flex-shrink-0 text-amber-500"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+                    clip-rule="evenodd"
+                  />
                 </svg>
                 <p class="ml-3 text-sm text-amber-700 dark:text-amber-300">
                   {{ t('admin.settings.adminApiKey.securityWarning') }}
@@ -29,7 +43,7 @@
 
             <!-- Loading State -->
             <div v-if="adminApiKeyLoading" class="flex items-center gap-2 text-gray-500">
-              <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-primary-600"></div>
+              <div class="h-4 w-4 animate-spin rounded-full border-b-2 border-primary-600"></div>
               {{ t('common.loading') }}
             </div>
 
@@ -44,11 +58,31 @@
                 :disabled="adminApiKeyOperating"
                 class="btn btn-primary btn-sm"
               >
-                <svg v-if="adminApiKeyOperating" class="animate-spin h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24">
-                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                <svg
+                  v-if="adminApiKeyOperating"
+                  class="mr-1 h-4 w-4 animate-spin"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <circle
+                    class="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    stroke-width="4"
+                  ></circle>
+                  <path
+                    class="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  ></path>
                 </svg>
-                {{ adminApiKeyOperating ? t('admin.settings.adminApiKey.creating') : t('admin.settings.adminApiKey.create') }}
+                {{
+                  adminApiKeyOperating
+                    ? t('admin.settings.adminApiKey.creating')
+                    : t('admin.settings.adminApiKey.create')
+                }}
               </button>
             </div>
 
@@ -56,10 +90,12 @@
             <div v-else class="space-y-4">
               <div class="flex items-center justify-between">
                 <div>
-                  <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
                     {{ t('admin.settings.adminApiKey.currentKey') }}
                   </label>
-                  <code class="text-sm font-mono text-gray-900 dark:text-gray-100 bg-gray-100 dark:bg-dark-700 px-2 py-1 rounded">
+                  <code
+                    class="rounded bg-gray-100 px-2 py-1 font-mono text-sm text-gray-900 dark:bg-dark-700 dark:text-gray-100"
+                  >
                     {{ adminApiKeyMasked }}
                   </code>
                 </div>
@@ -70,7 +106,11 @@
                     :disabled="adminApiKeyOperating"
                     class="btn btn-secondary btn-sm"
                   >
-                    {{ adminApiKeyOperating ? t('admin.settings.adminApiKey.regenerating') : t('admin.settings.adminApiKey.regenerate') }}
+                    {{
+                      adminApiKeyOperating
+                        ? t('admin.settings.adminApiKey.regenerating')
+                        : t('admin.settings.adminApiKey.regenerate')
+                    }}
                   </button>
                   <button
                     type="button"
@@ -84,12 +124,17 @@
               </div>
 
               <!-- Newly Generated Key Display -->
-              <div v-if="newAdminApiKey" class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4 space-y-3">
+              <div
+                v-if="newAdminApiKey"
+                class="space-y-3 rounded-lg border border-green-200 bg-green-50 p-4 dark:border-green-800 dark:bg-green-900/20"
+              >
                 <p class="text-sm font-medium text-green-700 dark:text-green-300">
                   {{ t('admin.settings.adminApiKey.keyWarning') }}
                 </p>
                 <div class="flex items-center gap-2">
-                  <code class="flex-1 text-sm font-mono bg-white dark:bg-dark-800 px-3 py-2 rounded border border-green-300 dark:border-green-700 break-all select-all">
+                  <code
+                    class="flex-1 select-all break-all rounded border border-green-300 bg-white px-3 py-2 font-mono text-sm dark:border-green-700 dark:bg-dark-800"
+                  >
                     {{ newAdminApiKey }}
                   </code>
                   <button
@@ -110,25 +155,39 @@
 
         <!-- Registration Settings -->
         <div class="card">
-          <div class="px-6 py-4 border-b border-gray-100 dark:border-dark-700">
-            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ t('admin.settings.registration.title') }}</h2>
-            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ t('admin.settings.registration.description') }}</p>
+          <div class="border-b border-gray-100 px-6 py-4 dark:border-dark-700">
+            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
+              {{ t('admin.settings.registration.title') }}
+            </h2>
+            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+              {{ t('admin.settings.registration.description') }}
+            </p>
           </div>
-          <div class="p-6 space-y-5">
+          <div class="space-y-5 p-6">
             <!-- Enable Registration -->
             <div class="flex items-center justify-between">
               <div>
-                <label class="font-medium text-gray-900 dark:text-white">{{ t('admin.settings.registration.enableRegistration') }}</label>
-                <p class="text-sm text-gray-500 dark:text-gray-400">{{ t('admin.settings.registration.enableRegistrationHint') }}</p>
+                <label class="font-medium text-gray-900 dark:text-white">{{
+                  t('admin.settings.registration.enableRegistration')
+                }}</label>
+                <p class="text-sm text-gray-500 dark:text-gray-400">
+                  {{ t('admin.settings.registration.enableRegistrationHint') }}
+                </p>
               </div>
               <Toggle v-model="form.registration_enabled" />
             </div>
 
             <!-- Email Verification -->
-            <div class="flex items-center justify-between pt-4 border-t border-gray-100 dark:border-dark-700">
+            <div
+              class="flex items-center justify-between border-t border-gray-100 pt-4 dark:border-dark-700"
+            >
               <div>
-                <label class="font-medium text-gray-900 dark:text-white">{{ t('admin.settings.registration.emailVerification') }}</label>
-                <p class="text-sm text-gray-500 dark:text-gray-400">{{ t('admin.settings.registration.emailVerificationHint') }}</p>
+                <label class="font-medium text-gray-900 dark:text-white">{{
+                  t('admin.settings.registration.emailVerification')
+                }}</label>
+                <p class="text-sm text-gray-500 dark:text-gray-400">
+                  {{ t('admin.settings.registration.emailVerificationHint') }}
+                </p>
               </div>
               <Toggle v-model="form.email_verify_enabled" />
             </div>
@@ -137,25 +196,36 @@
 
         <!-- Cloudflare Turnstile Settings -->
         <div class="card">
-          <div class="px-6 py-4 border-b border-gray-100 dark:border-dark-700">
-            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ t('admin.settings.turnstile.title') }}</h2>
-            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ t('admin.settings.turnstile.description') }}</p>
+          <div class="border-b border-gray-100 px-6 py-4 dark:border-dark-700">
+            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
+              {{ t('admin.settings.turnstile.title') }}
+            </h2>
+            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+              {{ t('admin.settings.turnstile.description') }}
+            </p>
           </div>
-          <div class="p-6 space-y-5">
+          <div class="space-y-5 p-6">
             <!-- Enable Turnstile -->
             <div class="flex items-center justify-between">
               <div>
-                <label class="font-medium text-gray-900 dark:text-white">{{ t('admin.settings.turnstile.enableTurnstile') }}</label>
-                <p class="text-sm text-gray-500 dark:text-gray-400">{{ t('admin.settings.turnstile.enableTurnstileHint') }}</p>
+                <label class="font-medium text-gray-900 dark:text-white">{{
+                  t('admin.settings.turnstile.enableTurnstile')
+                }}</label>
+                <p class="text-sm text-gray-500 dark:text-gray-400">
+                  {{ t('admin.settings.turnstile.enableTurnstileHint') }}
+                </p>
               </div>
               <Toggle v-model="form.turnstile_enabled" />
             </div>
 
             <!-- Turnstile Keys - Only show when enabled -->
-            <div v-if="form.turnstile_enabled" class="pt-4 border-t border-gray-100 dark:border-dark-700">
+            <div
+              v-if="form.turnstile_enabled"
+              class="border-t border-gray-100 pt-4 dark:border-dark-700"
+            >
               <div class="grid grid-cols-1 gap-6">
                 <div>
-                  <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
                     {{ t('admin.settings.turnstile.siteKey') }}
                   </label>
                   <input
@@ -166,11 +236,16 @@
                   />
                   <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
                     {{ t('admin.settings.turnstile.siteKeyHint') }}
-                    <a href="https://dash.cloudflare.com/" target="_blank" class="text-primary-600 hover:text-primary-500">Cloudflare Dashboard</a>
+                    <a
+                      href="https://dash.cloudflare.com/"
+                      target="_blank"
+                      class="text-primary-600 hover:text-primary-500"
+                      >Cloudflare Dashboard</a
+                    >
                   </p>
                 </div>
                 <div>
-                  <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
                     {{ t('admin.settings.turnstile.secretKey') }}
                   </label>
                   <input
@@ -179,7 +254,9 @@
                     class="input font-mono text-sm"
                     placeholder="0x4AAAAAAA..."
                   />
-                  <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">{{ t('admin.settings.turnstile.secretKeyHint') }}</p>
+                  <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
+                    {{ t('admin.settings.turnstile.secretKeyHint') }}
+                  </p>
                 </div>
               </div>
             </div>
@@ -188,14 +265,18 @@
 
         <!-- Default Settings -->
         <div class="card">
-          <div class="px-6 py-4 border-b border-gray-100 dark:border-dark-700">
-            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ t('admin.settings.defaults.title') }}</h2>
-            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ t('admin.settings.defaults.description') }}</p>
+          <div class="border-b border-gray-100 px-6 py-4 dark:border-dark-700">
+            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
+              {{ t('admin.settings.defaults.title') }}
+            </h2>
+            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+              {{ t('admin.settings.defaults.description') }}
+            </p>
           </div>
           <div class="p-6">
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
               <div>
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
                   {{ t('admin.settings.defaults.defaultBalance') }}
                 </label>
                 <input
@@ -206,10 +287,12 @@
                   class="input"
                   placeholder="0.00"
                 />
-                <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">{{ t('admin.settings.defaults.defaultBalanceHint') }}</p>
+                <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
+                  {{ t('admin.settings.defaults.defaultBalanceHint') }}
+                </p>
               </div>
               <div>
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
                   {{ t('admin.settings.defaults.defaultConcurrency') }}
                 </label>
                 <input
@@ -219,7 +302,9 @@
                   class="input"
                   placeholder="1"
                 />
-                <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">{{ t('admin.settings.defaults.defaultConcurrencyHint') }}</p>
+                <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
+                  {{ t('admin.settings.defaults.defaultConcurrencyHint') }}
+                </p>
               </div>
             </div>
           </div>
@@ -227,26 +312,27 @@
 
         <!-- Site Settings -->
         <div class="card">
-          <div class="px-6 py-4 border-b border-gray-100 dark:border-dark-700">
-            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ t('admin.settings.site.title') }}</h2>
-            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ t('admin.settings.site.description') }}</p>
+          <div class="border-b border-gray-100 px-6 py-4 dark:border-dark-700">
+            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
+              {{ t('admin.settings.site.title') }}
+            </h2>
+            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+              {{ t('admin.settings.site.description') }}
+            </p>
           </div>
-          <div class="p-6 space-y-6">
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div class="space-y-6 p-6">
+            <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
               <div>
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
                   {{ t('admin.settings.site.siteName') }}
                 </label>
-                <input
-                  v-model="form.site_name"
-                  type="text"
-                  class="input"
-                  placeholder="Sub2API"
-                />
-                <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">{{ t('admin.settings.site.siteNameHint') }}</p>
+                <input v-model="form.site_name" type="text" class="input" placeholder="Sub2API" />
+                <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
+                  {{ t('admin.settings.site.siteNameHint') }}
+                </p>
               </div>
               <div>
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
                   {{ t('admin.settings.site.siteSubtitle') }}
                 </label>
                 <input
@@ -255,13 +341,15 @@
                   class="input"
                   placeholder="Subscription to API Conversion Platform"
                 />
-                <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">{{ t('admin.settings.site.siteSubtitleHint') }}</p>
+                <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
+                  {{ t('admin.settings.site.siteSubtitleHint') }}
+                </p>
               </div>
             </div>
 
             <!-- API Base URL -->
             <div>
-              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+              <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
                 {{ t('admin.settings.site.apiBaseUrl') }}
               </label>
               <input
@@ -270,12 +358,14 @@
                 class="input font-mono text-sm"
                 placeholder="https://api.example.com"
               />
-              <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">{{ t('admin.settings.site.apiBaseUrlHint') }}</p>
+              <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
+                {{ t('admin.settings.site.apiBaseUrlHint') }}
+              </p>
             </div>
 
             <!-- Contact Info -->
             <div>
-              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+              <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
                 {{ t('admin.settings.site.contactInfo') }}
               </label>
               <input
@@ -284,12 +374,14 @@
                 class="input"
                 :placeholder="t('admin.settings.site.contactInfoPlaceholder')"
               />
-              <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">{{ t('admin.settings.site.contactInfoHint') }}</p>
+              <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
+                {{ t('admin.settings.site.contactInfoHint') }}
+              </p>
             </div>
 
             <!-- Doc URL -->
             <div>
-              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+              <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
                 {{ t('admin.settings.site.docUrl') }}
               </label>
               <input
@@ -298,29 +390,42 @@
                 class="input font-mono text-sm"
                 placeholder="https://docs.example.com"
               />
-              <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">{{ t('admin.settings.site.docUrlHint') }}</p>
+              <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
+                {{ t('admin.settings.site.docUrlHint') }}
+              </p>
             </div>
 
             <!-- Site Logo Upload -->
             <div>
-              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+              <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
                 {{ t('admin.settings.site.siteLogo') }}
               </label>
               <div class="flex items-start gap-6">
                 <!-- Logo Preview -->
                 <div class="flex-shrink-0">
                   <div
-                    class="w-20 h-20 rounded-xl border-2 border-dashed border-gray-300 dark:border-dark-600 flex items-center justify-center overflow-hidden bg-gray-50 dark:bg-dark-800"
+                    class="flex h-20 w-20 items-center justify-center overflow-hidden rounded-xl border-2 border-dashed border-gray-300 bg-gray-50 dark:border-dark-600 dark:bg-dark-800"
                     :class="{ 'border-solid': form.site_logo }"
                   >
                     <img
                       v-if="form.site_logo"
                       :src="form.site_logo"
                       alt="Site Logo"
-                      class="w-full h-full object-contain"
+                      class="h-full w-full object-contain"
                     />
-                    <svg v-else class="w-8 h-8 text-gray-400 dark:text-dark-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                    <svg
+                      v-else
+                      class="h-8 w-8 text-gray-400 dark:text-dark-500"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="1.5"
+                        d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+                      />
                     </svg>
                   </div>
                 </div>
@@ -334,8 +439,18 @@
                         class="hidden"
                         @change="handleLogoUpload"
                       />
-                      <svg class="w-4 h-4 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
+                      <svg
+                        class="mr-1.5 h-4 w-4"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
+                        />
                       </svg>
                       {{ t('admin.settings.site.uploadImage') }}
                     </label>
@@ -345,8 +460,18 @@
                       @click="form.site_logo = ''"
                       class="btn btn-secondary btn-sm text-red-600 hover:text-red-700 dark:text-red-400"
                     >
-                      <svg class="w-4 h-4 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                      <svg
+                        class="mr-1.5 h-4 w-4"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                        />
                       </svg>
                       {{ t('admin.settings.site.remove') }}
                     </button>
@@ -363,10 +488,16 @@
 
         <!-- SMTP Settings - Only show when email verification is enabled -->
         <div v-if="form.email_verify_enabled" class="card">
-          <div class="px-6 py-4 border-b border-gray-100 dark:border-dark-700 flex items-center justify-between">
+          <div
+            class="flex items-center justify-between border-b border-gray-100 px-6 py-4 dark:border-dark-700"
+          >
             <div>
-              <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ t('admin.settings.smtp.title') }}</h2>
-              <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ t('admin.settings.smtp.description') }}</p>
+              <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
+                {{ t('admin.settings.smtp.title') }}
+              </h2>
+              <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                {{ t('admin.settings.smtp.description') }}
+              </p>
             </div>
             <button
               type="button"
@@ -374,17 +505,32 @@
               :disabled="testingSmtp"
               class="btn btn-secondary btn-sm"
             >
-              <svg v-if="testingSmtp" class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
-                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              <svg v-if="testingSmtp" class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                <circle
+                  class="opacity-25"
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  stroke="currentColor"
+                  stroke-width="4"
+                ></circle>
+                <path
+                  class="opacity-75"
+                  fill="currentColor"
+                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                ></path>
               </svg>
-              {{ testingSmtp ? t('admin.settings.smtp.testing') : t('admin.settings.smtp.testConnection') }}
+              {{
+                testingSmtp
+                  ? t('admin.settings.smtp.testing')
+                  : t('admin.settings.smtp.testConnection')
+              }}
             </button>
           </div>
-          <div class="p-6 space-y-6">
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div class="space-y-6 p-6">
+            <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
               <div>
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
                   {{ t('admin.settings.smtp.host') }}
                 </label>
                 <input
@@ -395,7 +541,7 @@
                 />
               </div>
               <div>
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
                   {{ t('admin.settings.smtp.port') }}
                 </label>
                 <input
@@ -408,7 +554,7 @@
                 />
               </div>
               <div>
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
                   {{ t('admin.settings.smtp.username') }}
                 </label>
                 <input
@@ -419,7 +565,7 @@
                 />
               </div>
               <div>
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
                   {{ t('admin.settings.smtp.password') }}
                 </label>
                 <input
@@ -428,10 +574,12 @@
                   class="input"
                   placeholder="********"
                 />
-                <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">{{ t('admin.settings.smtp.passwordHint') }}</p>
+                <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
+                  {{ t('admin.settings.smtp.passwordHint') }}
+                </p>
               </div>
               <div>
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
                   {{ t('admin.settings.smtp.fromEmail') }}
                 </label>
                 <input
@@ -442,7 +590,7 @@
                 />
               </div>
               <div>
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
                   {{ t('admin.settings.smtp.fromName') }}
                 </label>
                 <input
@@ -455,10 +603,16 @@
             </div>
 
             <!-- Use TLS Toggle -->
-            <div class="flex items-center justify-between pt-4 border-t border-gray-100 dark:border-dark-700">
+            <div
+              class="flex items-center justify-between border-t border-gray-100 pt-4 dark:border-dark-700"
+            >
               <div>
-                <label class="font-medium text-gray-900 dark:text-white">{{ t('admin.settings.smtp.useTls') }}</label>
-                <p class="text-sm text-gray-500 dark:text-gray-400">{{ t('admin.settings.smtp.useTlsHint') }}</p>
+                <label class="font-medium text-gray-900 dark:text-white">{{
+                  t('admin.settings.smtp.useTls')
+                }}</label>
+                <p class="text-sm text-gray-500 dark:text-gray-400">
+                  {{ t('admin.settings.smtp.useTlsHint') }}
+                </p>
               </div>
               <Toggle v-model="form.smtp_use_tls" />
             </div>
@@ -467,14 +621,18 @@
 
         <!-- Send Test Email - Only show when email verification is enabled -->
         <div v-if="form.email_verify_enabled" class="card">
-          <div class="px-6 py-4 border-b border-gray-100 dark:border-dark-700">
-            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ t('admin.settings.testEmail.title') }}</h2>
-            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ t('admin.settings.testEmail.description') }}</p>
+          <div class="border-b border-gray-100 px-6 py-4 dark:border-dark-700">
+            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
+              {{ t('admin.settings.testEmail.title') }}
+            </h2>
+            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+              {{ t('admin.settings.testEmail.description') }}
+            </p>
           </div>
           <div class="p-6">
             <div class="flex items-end gap-4">
               <div class="flex-1">
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
                   {{ t('admin.settings.testEmail.recipientEmail') }}
                 </label>
                 <input
@@ -490,11 +648,31 @@
                 :disabled="sendingTestEmail || !testEmailAddress"
                 class="btn btn-secondary"
               >
-                <svg v-if="sendingTestEmail" class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
-                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                <svg
+                  v-if="sendingTestEmail"
+                  class="h-4 w-4 animate-spin"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <circle
+                    class="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    stroke-width="4"
+                  ></circle>
+                  <path
+                    class="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  ></path>
                 </svg>
-                {{ sendingTestEmail ? t('admin.settings.testEmail.sending') : t('admin.settings.testEmail.sendTestEmail') }}
+                {{
+                  sendingTestEmail
+                    ? t('admin.settings.testEmail.sending')
+                    : t('admin.settings.testEmail.sendTestEmail')
+                }}
               </button>
             </div>
           </div>
@@ -502,14 +680,21 @@
 
         <!-- Save Button -->
         <div class="flex justify-end">
-          <button
-            type="submit"
-            :disabled="saving"
-            class="btn btn-primary"
-          >
-            <svg v-if="saving" class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
-              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          <button type="submit" :disabled="saving" class="btn btn-primary">
+            <svg v-if="saving" class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle
+                class="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                stroke-width="4"
+              ></circle>
+              <path
+                class="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              ></path>
             </svg>
             {{ saving ? t('admin.settings.saving') : t('admin.settings.saveSettings') }}
           </button>
@@ -520,30 +705,30 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { adminAPI } from '@/api';
-import type { SystemSettings } from '@/api/admin/settings';
-import AppLayout from '@/components/layout/AppLayout.vue';
-import Toggle from '@/components/common/Toggle.vue';
-import { useAppStore } from '@/stores';
+import { ref, reactive, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { adminAPI } from '@/api'
+import type { SystemSettings } from '@/api/admin/settings'
+import AppLayout from '@/components/layout/AppLayout.vue'
+import Toggle from '@/components/common/Toggle.vue'
+import { useAppStore } from '@/stores'
 
-const { t } = useI18n();
-const appStore = useAppStore();
+const { t } = useI18n()
+const appStore = useAppStore()
 
-const loading = ref(true);
-const saving = ref(false);
-const testingSmtp = ref(false);
-const sendingTestEmail = ref(false);
-const testEmailAddress = ref('');
-const logoError = ref('');
+const loading = ref(true)
+const saving = ref(false)
+const testingSmtp = ref(false)
+const sendingTestEmail = ref(false)
+const testEmailAddress = ref('')
+const logoError = ref('')
 
 // Admin API Key 状态
-const adminApiKeyLoading = ref(true);
-const adminApiKeyExists = ref(false);
-const adminApiKeyMasked = ref('');
-const adminApiKeyOperating = ref(false);
-const newAdminApiKey = ref('');
+const adminApiKeyLoading = ref(true)
+const adminApiKeyExists = ref(false)
+const adminApiKeyMasked = ref('')
+const adminApiKeyOperating = ref(false)
+const newAdminApiKey = ref('')
 
 const form = reactive<SystemSettings>({
   registration_enabled: true,
@@ -566,97 +751,105 @@ const form = reactive<SystemSettings>({
   // Cloudflare Turnstile
   turnstile_enabled: false,
   turnstile_site_key: '',
-  turnstile_secret_key: '',
-});
+  turnstile_secret_key: ''
+})
 
 function handleLogoUpload(event: Event) {
-  const input = event.target as HTMLInputElement;
-  const file = input.files?.[0];
-  logoError.value = '';
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0]
+  logoError.value = ''
 
-  if (!file) return;
+  if (!file) return
 
   // Check file size (300KB = 307200 bytes)
-  const maxSize = 300 * 1024;
+  const maxSize = 300 * 1024
   if (file.size > maxSize) {
-    logoError.value = t('admin.settings.site.logoSizeError', { size: (file.size / 1024).toFixed(1) });
-    input.value = '';
-    return;
+    logoError.value = t('admin.settings.site.logoSizeError', {
+      size: (file.size / 1024).toFixed(1)
+    })
+    input.value = ''
+    return
   }
 
   // Check file type
   if (!file.type.startsWith('image/')) {
-    logoError.value = t('admin.settings.site.logoTypeError');
-    input.value = '';
-    return;
+    logoError.value = t('admin.settings.site.logoTypeError')
+    input.value = ''
+    return
   }
 
   // Convert to base64
-  const reader = new FileReader();
+  const reader = new FileReader()
   reader.onload = (e) => {
-    form.site_logo = e.target?.result as string;
-  };
+    form.site_logo = e.target?.result as string
+  }
   reader.onerror = () => {
-    logoError.value = t('admin.settings.site.logoReadError');
-  };
-  reader.readAsDataURL(file);
+    logoError.value = t('admin.settings.site.logoReadError')
+  }
+  reader.readAsDataURL(file)
 
   // Reset input
-  input.value = '';
+  input.value = ''
 }
 
 async function loadSettings() {
-  loading.value = true;
+  loading.value = true
   try {
-    const settings = await adminAPI.settings.getSettings();
-    Object.assign(form, settings);
+    const settings = await adminAPI.settings.getSettings()
+    Object.assign(form, settings)
   } catch (error: any) {
-    appStore.showError(t('admin.settings.failedToLoad') + ': ' + (error.message || t('common.unknownError')));
+    appStore.showError(
+      t('admin.settings.failedToLoad') + ': ' + (error.message || t('common.unknownError'))
+    )
   } finally {
-    loading.value = false;
+    loading.value = false
   }
 }
 
 async function saveSettings() {
-  saving.value = true;
+  saving.value = true
   try {
-    await adminAPI.settings.updateSettings(form);
+    await adminAPI.settings.updateSettings(form)
     // Refresh cached public settings so sidebar/header update immediately
-    await appStore.fetchPublicSettings(true);
-    appStore.showSuccess(t('admin.settings.settingsSaved'));
+    await appStore.fetchPublicSettings(true)
+    appStore.showSuccess(t('admin.settings.settingsSaved'))
   } catch (error: any) {
-    appStore.showError(t('admin.settings.failedToSave') + ': ' + (error.message || t('common.unknownError')));
+    appStore.showError(
+      t('admin.settings.failedToSave') + ': ' + (error.message || t('common.unknownError'))
+    )
   } finally {
-    saving.value = false;
+    saving.value = false
   }
 }
 
 async function testSmtpConnection() {
-  testingSmtp.value = true;
+  testingSmtp.value = true
   try {
     const result = await adminAPI.settings.testSmtpConnection({
       smtp_host: form.smtp_host,
       smtp_port: form.smtp_port,
       smtp_username: form.smtp_username,
       smtp_password: form.smtp_password,
-      smtp_use_tls: form.smtp_use_tls,
-    });
+      smtp_use_tls: form.smtp_use_tls
+    })
     // API returns { message: "..." } on success, errors are thrown as exceptions
-    appStore.showSuccess(result.message || t('admin.settings.smtpConnectionSuccess'));
+    appStore.showSuccess(result.message || t('admin.settings.smtpConnectionSuccess'))
   } catch (error: any) {
-    appStore.showError(t('admin.settings.failedToTestSmtp') + ': ' + (error.message || t('common.unknownError')));
+    appStore.showError(
+      t('admin.settings.failedToTestSmtp') + ': ' + (error.message || t('common.unknownError'))
+    )
   } finally {
-    testingSmtp.value = false;
+    testingSmtp.value = false
   }
 }
 
 async function sendTestEmail() {
   if (!testEmailAddress.value) {
-    appStore.showError(t('admin.settings.testEmail.enterRecipientHint'));
-    return;
+    appStore.showError(t('admin.settings.testEmail.enterRecipientHint'))
+    return
   }
 
-  sendingTestEmail.value = true;
+  sendingTestEmail.value = true
   try {
     const result = await adminAPI.settings.sendTestEmail({
       email: testEmailAddress.value,
@@ -666,77 +859,82 @@ async function sendTestEmail() {
       smtp_password: form.smtp_password,
       smtp_from_email: form.smtp_from_email,
       smtp_from_name: form.smtp_from_name,
-      smtp_use_tls: form.smtp_use_tls,
-    });
+      smtp_use_tls: form.smtp_use_tls
+    })
     // API returns { message: "..." } on success, errors are thrown as exceptions
-    appStore.showSuccess(result.message || t('admin.settings.testEmailSent'));
+    appStore.showSuccess(result.message || t('admin.settings.testEmailSent'))
   } catch (error: any) {
-    appStore.showError(t('admin.settings.failedToSendTestEmail') + ': ' + (error.message || t('common.unknownError')));
+    appStore.showError(
+      t('admin.settings.failedToSendTestEmail') + ': ' + (error.message || t('common.unknownError'))
+    )
   } finally {
-    sendingTestEmail.value = false;
+    sendingTestEmail.value = false
   }
 }
 
 // Admin API Key 方法
 async function loadAdminApiKey() {
-  adminApiKeyLoading.value = true;
+  adminApiKeyLoading.value = true
   try {
-    const status = await adminAPI.settings.getAdminApiKey();
-    adminApiKeyExists.value = status.exists;
-    adminApiKeyMasked.value = status.masked_key;
+    const status = await adminAPI.settings.getAdminApiKey()
+    adminApiKeyExists.value = status.exists
+    adminApiKeyMasked.value = status.masked_key
   } catch (error: any) {
-    console.error('Failed to load admin API key status:', error);
+    console.error('Failed to load admin API key status:', error)
   } finally {
-    adminApiKeyLoading.value = false;
+    adminApiKeyLoading.value = false
   }
 }
 
 async function createAdminApiKey() {
-  adminApiKeyOperating.value = true;
+  adminApiKeyOperating.value = true
   try {
-    const result = await adminAPI.settings.regenerateAdminApiKey();
-    newAdminApiKey.value = result.key;
-    adminApiKeyExists.value = true;
-    adminApiKeyMasked.value = result.key.substring(0, 10) + '...' + result.key.slice(-4);
-    appStore.showSuccess(t('admin.settings.adminApiKey.keyGenerated'));
+    const result = await adminAPI.settings.regenerateAdminApiKey()
+    newAdminApiKey.value = result.key
+    adminApiKeyExists.value = true
+    adminApiKeyMasked.value = result.key.substring(0, 10) + '...' + result.key.slice(-4)
+    appStore.showSuccess(t('admin.settings.adminApiKey.keyGenerated'))
   } catch (error: any) {
-    appStore.showError(error.message || t('common.error'));
+    appStore.showError(error.message || t('common.error'))
   } finally {
-    adminApiKeyOperating.value = false;
+    adminApiKeyOperating.value = false
   }
 }
 
 async function regenerateAdminApiKey() {
-  if (!confirm(t('admin.settings.adminApiKey.regenerateConfirm'))) return;
-  await createAdminApiKey();
+  if (!confirm(t('admin.settings.adminApiKey.regenerateConfirm'))) return
+  await createAdminApiKey()
 }
 
 async function deleteAdminApiKey() {
-  if (!confirm(t('admin.settings.adminApiKey.deleteConfirm'))) return;
-  adminApiKeyOperating.value = true;
+  if (!confirm(t('admin.settings.adminApiKey.deleteConfirm'))) return
+  adminApiKeyOperating.value = true
   try {
-    await adminAPI.settings.deleteAdminApiKey();
-    adminApiKeyExists.value = false;
-    adminApiKeyMasked.value = '';
-    newAdminApiKey.value = '';
-    appStore.showSuccess(t('admin.settings.adminApiKey.keyDeleted'));
+    await adminAPI.settings.deleteAdminApiKey()
+    adminApiKeyExists.value = false
+    adminApiKeyMasked.value = ''
+    newAdminApiKey.value = ''
+    appStore.showSuccess(t('admin.settings.adminApiKey.keyDeleted'))
   } catch (error: any) {
-    appStore.showError(error.message || t('common.error'));
+    appStore.showError(error.message || t('common.error'))
   } finally {
-    adminApiKeyOperating.value = false;
+    adminApiKeyOperating.value = false
   }
 }
 
 function copyNewKey() {
-  navigator.clipboard.writeText(newAdminApiKey.value).then(() => {
-    appStore.showSuccess(t('admin.settings.adminApiKey.keyCopied'));
-  }).catch(() => {
-    appStore.showError(t('common.copyFailed'));
-  });
+  navigator.clipboard
+    .writeText(newAdminApiKey.value)
+    .then(() => {
+      appStore.showSuccess(t('admin.settings.adminApiKey.keyCopied'))
+    })
+    .catch(() => {
+      appStore.showError(t('common.copyFailed'))
+    })
 }
 
 onMounted(() => {
-  loadSettings();
-  loadAdminApiKey();
-});
+  loadSettings()
+  loadAdminApiKey()
+})
 </script>
diff --git a/frontend/src/views/admin/SubscriptionsView.vue b/frontend/src/views/admin/SubscriptionsView.vue
index 52a3c50a..1cff544e 100644
--- a/frontend/src/views/admin/SubscriptionsView.vue
+++ b/frontend/src/views/admin/SubscriptionsView.vue
@@ -10,17 +10,27 @@
           :title="t('common.refresh')"
         >
           <svg
-            :class="['w-5 h-5', loading ? 'animate-spin' : '']"
-            fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"
+            :class="['h-5 w-5', loading ? 'animate-spin' : '']"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="1.5"
           >
-            <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+            />
           </svg>
         </button>
-        <button
-          @click="showAssignModal = true"
-          class="btn btn-primary"
-        >
-          <svg class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+        <button @click="showAssignModal = true" class="btn btn-primary">
+          <svg
+            class="mr-2 h-5 w-5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="1.5"
+          >
             <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
           </svg>
           {{ t('admin.subscriptions.assignSubscription') }}
@@ -50,12 +60,16 @@
         <DataTable :columns="columns" :data="subscriptions" :loading="loading">
           <template #cell-user="{ row }">
             <div class="flex items-center gap-2">
-              <div class="flex h-8 w-8 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900/30">
+              <div
+                class="flex h-8 w-8 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900/30"
+              >
                 <span class="text-sm font-medium text-primary-700 dark:text-primary-300">
                   {{ row.user?.email?.charAt(0).toUpperCase() || '?' }}
                 </span>
               </div>
-              <span class="font-medium text-gray-900 dark:text-white">{{ row.user?.email || `User #${row.user_id}` }}</span>
+              <span class="font-medium text-gray-900 dark:text-white">{{
+                row.user?.email || `User #${row.user_id}`
+              }}</span>
             </div>
           </template>
 
@@ -72,16 +86,18 @@
           </template>
 
           <template #cell-usage="{ row }">
-            <div class="space-y-2 min-w-[280px]">
+            <div class="min-w-[280px] space-y-2">
               <!-- Daily Usage -->
               <div v-if="row.group?.daily_limit_usd" class="usage-row">
                 <div class="flex items-center gap-2">
                   <span class="usage-label">{{ t('admin.subscriptions.daily') }}</span>
-                  <div class="flex-1 bg-gray-200 dark:bg-dark-600 rounded-full h-1.5">
+                  <div class="h-1.5 flex-1 rounded-full bg-gray-200 dark:bg-dark-600">
                     <div
                       class="h-1.5 rounded-full transition-all"
                       :class="getProgressClass(row.daily_usage_usd, row.group?.daily_limit_usd)"
-                      :style="{ width: getProgressWidth(row.daily_usage_usd, row.group?.daily_limit_usd) }"
+                      :style="{
+                        width: getProgressWidth(row.daily_usage_usd, row.group?.daily_limit_usd)
+                      }"
                     ></div>
                   </div>
                   <span class="usage-amount">
@@ -91,8 +107,18 @@
                   </span>
                 </div>
                 <div class="reset-info" v-if="row.daily_window_start">
-                  <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  <svg
+                    class="h-3 w-3"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
                   </svg>
                   <span>{{ formatResetTime(row.daily_window_start, 'daily') }}</span>
                 </div>
@@ -102,11 +128,13 @@
               <div v-if="row.group?.weekly_limit_usd" class="usage-row">
                 <div class="flex items-center gap-2">
                   <span class="usage-label">{{ t('admin.subscriptions.weekly') }}</span>
-                  <div class="flex-1 bg-gray-200 dark:bg-dark-600 rounded-full h-1.5">
+                  <div class="h-1.5 flex-1 rounded-full bg-gray-200 dark:bg-dark-600">
                     <div
                       class="h-1.5 rounded-full transition-all"
                       :class="getProgressClass(row.weekly_usage_usd, row.group?.weekly_limit_usd)"
-                      :style="{ width: getProgressWidth(row.weekly_usage_usd, row.group?.weekly_limit_usd) }"
+                      :style="{
+                        width: getProgressWidth(row.weekly_usage_usd, row.group?.weekly_limit_usd)
+                      }"
                     ></div>
                   </div>
                   <span class="usage-amount">
@@ -116,8 +144,18 @@
                   </span>
                 </div>
                 <div class="reset-info" v-if="row.weekly_window_start">
-                  <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  <svg
+                    class="h-3 w-3"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
                   </svg>
                   <span>{{ formatResetTime(row.weekly_window_start, 'weekly') }}</span>
                 </div>
@@ -127,11 +165,13 @@
               <div v-if="row.group?.monthly_limit_usd" class="usage-row">
                 <div class="flex items-center gap-2">
                   <span class="usage-label">{{ t('admin.subscriptions.monthly') }}</span>
-                  <div class="flex-1 bg-gray-200 dark:bg-dark-600 rounded-full h-1.5">
+                  <div class="h-1.5 flex-1 rounded-full bg-gray-200 dark:bg-dark-600">
                     <div
                       class="h-1.5 rounded-full transition-all"
                       :class="getProgressClass(row.monthly_usage_usd, row.group?.monthly_limit_usd)"
-                      :style="{ width: getProgressWidth(row.monthly_usage_usd, row.group?.monthly_limit_usd) }"
+                      :style="{
+                        width: getProgressWidth(row.monthly_usage_usd, row.group?.monthly_limit_usd)
+                      }"
                     ></div>
                   </div>
                   <span class="usage-amount">
@@ -141,15 +181,32 @@
                   </span>
                 </div>
                 <div class="reset-info" v-if="row.monthly_window_start">
-                  <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  <svg
+                    class="h-3 w-3"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
                   </svg>
                   <span>{{ formatResetTime(row.monthly_window_start, 'monthly') }}</span>
                 </div>
               </div>
 
               <!-- No Limits -->
-              <div v-if="!row.group?.daily_limit_usd && !row.group?.weekly_limit_usd && !row.group?.monthly_limit_usd" class="text-xs text-gray-500">
+              <div
+                v-if="
+                  !row.group?.daily_limit_usd &&
+                  !row.group?.weekly_limit_usd &&
+                  !row.group?.monthly_limit_usd
+                "
+                class="text-xs text-gray-500"
+              >
                 {{ t('admin.subscriptions.noLimits') }}
               </div>
             </div>
@@ -157,21 +214,34 @@
 
           <template #cell-expires_at="{ value }">
             <div v-if="value">
-              <span class="text-sm" :class="isExpiringSoon(value) ? 'text-orange-600 dark:text-orange-400' : 'text-gray-700 dark:text-gray-300'">
+              <span
+                class="text-sm"
+                :class="
+                  isExpiringSoon(value)
+                    ? 'text-orange-600 dark:text-orange-400'
+                    : 'text-gray-700 dark:text-gray-300'
+                "
+              >
                 {{ formatDate(value) }}
               </span>
               <div v-if="getDaysRemaining(value) !== null" class="text-xs text-gray-500">
                 {{ getDaysRemaining(value) }} {{ t('admin.subscriptions.daysRemaining') }}
               </div>
             </div>
-            <span v-else class="text-sm text-gray-500">{{ t('admin.subscriptions.noExpiration') }}</span>
+            <span v-else class="text-sm text-gray-500">{{
+              t('admin.subscriptions.noExpiration')
+            }}</span>
           </template>
 
           <template #cell-status="{ value }">
             <span
               :class="[
                 'badge',
-                value === 'active' ? 'badge-success' : value === 'expired' ? 'badge-warning' : 'badge-danger'
+                value === 'active'
+                  ? 'badge-success'
+                  : value === 'expired'
+                    ? 'badge-warning'
+                    : 'badge-danger'
               ]"
             >
               {{ t(`admin.subscriptions.status.${value}`) }}
@@ -183,21 +253,41 @@
               <button
                 v-if="row.status === 'active'"
                 @click="handleExtend(row)"
-                class="p-2 rounded-lg hover:bg-green-50 dark:hover:bg-green-900/20 text-gray-500 hover:text-green-600 dark:hover:text-green-400 transition-colors"
+                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-green-50 hover:text-green-600 dark:hover:bg-green-900/20 dark:hover:text-green-400"
                 :title="t('admin.subscriptions.extend')"
               >
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+                <svg
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
                 </svg>
               </button>
               <button
                 v-if="row.status === 'active'"
                 @click="handleRevoke(row)"
-                class="p-2 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 text-gray-500 hover:text-red-600 dark:hover:text-red-400 transition-colors"
+                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
                 :title="t('admin.subscriptions.revoke')"
               >
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
+                <svg
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
+                  />
                 </svg>
               </button>
             </div>
@@ -252,36 +342,34 @@
         </div>
         <div>
           <label class="input-label">{{ t('admin.subscriptions.form.validityDays') }}</label>
-          <input
-            v-model.number="assignForm.validity_days"
-            type="number"
-            min="1"
-            class="input"
-          />
+          <input v-model.number="assignForm.validity_days" type="number" min="1" class="input" />
           <p class="input-hint">{{ t('admin.subscriptions.validityHint') }}</p>
         </div>
 
         <div class="flex justify-end gap-3 pt-4">
-          <button
-            @click="closeAssignModal"
-            type="button"
-            class="btn btn-secondary"
-          >
+          <button @click="closeAssignModal" type="button" class="btn btn-secondary">
             {{ t('common.cancel') }}
           </button>
-          <button
-            type="submit"
-            :disabled="submitting"
-            class="btn btn-primary"
-          >
+          <button type="submit" :disabled="submitting" class="btn btn-primary">
             <svg
               v-if="submitting"
-              class="animate-spin -ml-1 mr-2 h-4 w-4"
+              class="-ml-1 mr-2 h-4 w-4 animate-spin"
               fill="none"
               viewBox="0 0 24 24"
             >
-              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              <circle
+                class="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                stroke-width="4"
+              ></circle>
+              <path
+                class="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              ></path>
             </svg>
             {{ submitting ? t('admin.subscriptions.assigning') : t('admin.subscriptions.assign') }}
           </button>
@@ -296,43 +384,39 @@
       size="md"
       @close="closeExtendModal"
     >
-      <form v-if="extendingSubscription" @submit.prevent="handleExtendSubscription" class="space-y-5">
-        <div class="p-4 bg-gray-50 dark:bg-dark-700 rounded-lg">
+      <form
+        v-if="extendingSubscription"
+        @submit.prevent="handleExtendSubscription"
+        class="space-y-5"
+      >
+        <div class="rounded-lg bg-gray-50 p-4 dark:bg-dark-700">
           <p class="text-sm text-gray-600 dark:text-gray-400">
             {{ t('admin.subscriptions.extendingFor') }}
-            <span class="font-medium text-gray-900 dark:text-white">{{ extendingSubscription.user?.email }}</span>
+            <span class="font-medium text-gray-900 dark:text-white">{{
+              extendingSubscription.user?.email
+            }}</span>
           </p>
-          <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
+          <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
             {{ t('admin.subscriptions.currentExpiration') }}:
             <span class="font-medium text-gray-900 dark:text-white">
-              {{ extendingSubscription.expires_at ? formatDate(extendingSubscription.expires_at) : t('admin.subscriptions.noExpiration') }}
+              {{
+                extendingSubscription.expires_at
+                  ? formatDate(extendingSubscription.expires_at)
+                  : t('admin.subscriptions.noExpiration')
+              }}
             </span>
           </p>
         </div>
         <div>
           <label class="input-label">{{ t('admin.subscriptions.form.extendDays') }}</label>
-          <input
-            v-model.number="extendForm.days"
-            type="number"
-            min="1"
-            required
-            class="input"
-          />
+          <input v-model.number="extendForm.days" type="number" min="1" required class="input" />
         </div>
 
         <div class="flex justify-end gap-3 pt-4">
-          <button
-            @click="closeExtendModal"
-            type="button"
-            class="btn btn-secondary"
-          >
+          <button @click="closeExtendModal" type="button" class="btn btn-secondary">
             {{ t('common.cancel') }}
           </button>
-          <button
-            type="submit"
-            :disabled="submitting"
-            class="btn btn-primary"
-          >
+          <button type="submit" :disabled="submitting" class="btn btn-primary">
             {{ submitting ? t('admin.subscriptions.extending') : t('admin.subscriptions.extend') }}
           </button>
         </div>
@@ -424,32 +508,26 @@ const extendForm = reactive({
 // Group options for filter (all groups)
 const groupOptions = computed(() => [
   { value: '', label: t('admin.subscriptions.allGroups') },
-  ...groups.value.map(g => ({ value: g.id.toString(), label: g.name }))
+  ...groups.value.map((g) => ({ value: g.id.toString(), label: g.name }))
 ])
 
 // Group options for assign (only subscription type groups)
 const subscriptionGroupOptions = computed(() =>
   groups.value
-    .filter(g => g.subscription_type === 'subscription' && g.status === 'active')
-    .map(g => ({ value: g.id, label: g.name }))
+    .filter((g) => g.subscription_type === 'subscription' && g.status === 'active')
+    .map((g) => ({ value: g.id, label: g.name }))
 )
 
 // User options for assign
-const userOptions = computed(() =>
-  users.value.map(u => ({ value: u.id, label: u.email }))
-)
+const userOptions = computed(() => users.value.map((u) => ({ value: u.id, label: u.email })))
 
 const loadSubscriptions = async () => {
   loading.value = true
   try {
-    const response = await adminAPI.subscriptions.list(
-      pagination.page,
-      pagination.page_size,
-      {
-        status: filters.status as any || undefined,
-        group_id: filters.group_id ? parseInt(filters.group_id) : undefined
-      }
-    )
+    const response = await adminAPI.subscriptions.list(pagination.page, pagination.page_size, {
+      status: (filters.status as any) || undefined,
+      group_id: filters.group_id ? parseInt(filters.group_id) : undefined
+    })
     subscriptions.value = response.items
     pagination.total = response.total
     pagination.pages = response.pages
@@ -648,14 +726,14 @@ onMounted(() => {
 }
 
 .usage-label {
-  @apply text-xs font-medium text-gray-500 dark:text-gray-400 w-10 flex-shrink-0;
+  @apply w-10 flex-shrink-0 text-xs font-medium text-gray-500 dark:text-gray-400;
 }
 
 .usage-amount {
-  @apply text-xs text-gray-600 dark:text-gray-300 tabular-nums whitespace-nowrap;
+  @apply whitespace-nowrap text-xs tabular-nums text-gray-600 dark:text-gray-300;
 }
 
 .reset-info {
-  @apply flex items-center gap-1 text-[10px] text-blue-600 dark:text-blue-400 pl-12;
+  @apply flex items-center gap-1 pl-12 text-[10px] text-blue-600 dark:text-blue-400;
 }
 </style>
diff --git a/frontend/src/views/admin/UsageView.vue b/frontend/src/views/admin/UsageView.vue
index 30b642eb..8c59b1e2 100644
--- a/frontend/src/views/admin/UsageView.vue
+++ b/frontend/src/views/admin/UsageView.vue
@@ -6,15 +6,31 @@
         <!-- Total Requests -->
         <div class="card p-4">
           <div class="flex items-center gap-3">
-            <div class="p-2 rounded-lg bg-blue-100 dark:bg-blue-900/30">
-              <svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+            <div class="rounded-lg bg-blue-100 p-2 dark:bg-blue-900/30">
+              <svg
+                class="h-5 w-5 text-blue-600 dark:text-blue-400"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                />
               </svg>
             </div>
             <div>
-              <p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('usage.totalRequests') }}</p>
-              <p class="text-xl font-bold text-gray-900 dark:text-white">{{ usageStats?.total_requests?.toLocaleString() || '0' }}</p>
-              <p class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.inSelectedRange') }}</p>
+              <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
+                {{ t('usage.totalRequests') }}
+              </p>
+              <p class="text-xl font-bold text-gray-900 dark:text-white">
+                {{ usageStats?.total_requests?.toLocaleString() || '0' }}
+              </p>
+              <p class="text-xs text-gray-500 dark:text-gray-400">
+                {{ t('usage.inSelectedRange') }}
+              </p>
             </div>
           </div>
         </div>
@@ -22,15 +38,32 @@
         <!-- Total Tokens -->
         <div class="card p-4">
           <div class="flex items-center gap-3">
-            <div class="p-2 rounded-lg bg-amber-100 dark:bg-amber-900/30">
-              <svg class="w-5 h-5 text-amber-600 dark:text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
+            <div class="rounded-lg bg-amber-100 p-2 dark:bg-amber-900/30">
+              <svg
+                class="h-5 w-5 text-amber-600 dark:text-amber-400"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"
+                />
               </svg>
             </div>
             <div>
-              <p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('usage.totalTokens') }}</p>
-              <p class="text-xl font-bold text-gray-900 dark:text-white">{{ formatTokens(usageStats?.total_tokens || 0) }}</p>
-              <p class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.in') }}: {{ formatTokens(usageStats?.total_input_tokens || 0) }} / {{ t('usage.out') }}: {{ formatTokens(usageStats?.total_output_tokens || 0) }}</p>
+              <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
+                {{ t('usage.totalTokens') }}
+              </p>
+              <p class="text-xl font-bold text-gray-900 dark:text-white">
+                {{ formatTokens(usageStats?.total_tokens || 0) }}
+              </p>
+              <p class="text-xs text-gray-500 dark:text-gray-400">
+                {{ t('usage.in') }}: {{ formatTokens(usageStats?.total_input_tokens || 0) }} /
+                {{ t('usage.out') }}: {{ formatTokens(usageStats?.total_output_tokens || 0) }}
+              </p>
             </div>
           </div>
         </div>
@@ -38,16 +71,31 @@
         <!-- Total Cost -->
         <div class="card p-4">
           <div class="flex items-center gap-3">
-            <div class="p-2 rounded-lg bg-green-100 dark:bg-green-900/30">
-              <svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            <div class="rounded-lg bg-green-100 p-2 dark:bg-green-900/30">
+              <svg
+                class="h-5 w-5 text-green-600 dark:text-green-400"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
               </svg>
             </div>
             <div class="min-w-0 flex-1">
-              <p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('usage.totalCost') }}</p>
-              <p class="text-xl font-bold text-green-600 dark:text-green-400">${{ (usageStats?.total_actual_cost || 0).toFixed(4) }}</p>
+              <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
+                {{ t('usage.totalCost') }}
+              </p>
+              <p class="text-xl font-bold text-green-600 dark:text-green-400">
+                ${{ (usageStats?.total_actual_cost || 0).toFixed(4) }}
+              </p>
               <p class="text-xs text-gray-500 dark:text-gray-400">
-                <span class="line-through">${{ (usageStats?.total_cost || 0).toFixed(4) }}</span> {{ t('usage.standardCost') }}
+                <span class="line-through">${{ (usageStats?.total_cost || 0).toFixed(4) }}</span>
+                {{ t('usage.standardCost') }}
               </p>
             </div>
           </div>
@@ -56,14 +104,28 @@
         <!-- Average Duration -->
         <div class="card p-4">
           <div class="flex items-center gap-3">
-            <div class="p-2 rounded-lg bg-purple-100 dark:bg-purple-900/30">
-              <svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+            <div class="rounded-lg bg-purple-100 p-2 dark:bg-purple-900/30">
+              <svg
+                class="h-5 w-5 text-purple-600 dark:text-purple-400"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
               </svg>
             </div>
             <div>
-              <p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('usage.avgDuration') }}</p>
-              <p class="text-xl font-bold text-gray-900 dark:text-white">{{ formatDuration(usageStats?.average_duration_ms || 0) }}</p>
+              <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
+                {{ t('usage.avgDuration') }}
+              </p>
+              <p class="text-xl font-bold text-gray-900 dark:text-white">
+                {{ formatDuration(usageStats?.average_duration_ms || 0) }}
+              </p>
               <p class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.perRequest') }}</p>
             </div>
           </div>
@@ -75,7 +137,9 @@
         <!-- Chart Controls -->
         <div class="card p-4">
           <div class="flex items-center gap-4">
-            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('admin.dashboard.granularity') }}:</span>
+            <span class="text-sm font-medium text-gray-700 dark:text-gray-300"
+              >{{ t('admin.dashboard.granularity') }}:</span
+            >
             <div class="w-28">
               <Select
                 v-model="granularity"
@@ -88,14 +152,8 @@
 
         <!-- Charts Grid -->
         <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
-          <ModelDistributionChart
-            :model-stats="modelStats"
-            :loading="chartsLoading"
-          />
-          <TokenUsageTrend
-            :trend-data="trendData"
-            :loading="chartsLoading"
-          />
+          <ModelDistributionChart :model-stats="modelStats" :loading="chartsLoading" />
+          <TokenUsageTrend :trend-data="trendData" :loading="chartsLoading" />
         </div>
       </div>
 
@@ -120,19 +178,30 @@
                   @click="clearUserFilter"
                   class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
                 >
-                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                  <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M6 18L18 6M6 6l12 12"
+                    />
                   </svg>
                 </button>
                 <!-- User Dropdown -->
                 <div
                   v-if="showUserDropdown && (userSearchResults.length > 0 || userSearchKeyword)"
-                  class="absolute z-50 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg max-h-60 overflow-auto"
+                  class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800"
                 >
-                  <div v-if="userSearchLoading" class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
+                  <div
+                    v-if="userSearchLoading"
+                    class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400"
+                  >
                     {{ t('common.loading') }}
                   </div>
-                  <div v-else-if="userSearchResults.length === 0 && userSearchKeyword" class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
+                  <div
+                    v-else-if="userSearchResults.length === 0 && userSearchKeyword"
+                    class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400"
+                  >
                     {{ t('common.noOptionsFound') }}
                   </div>
                   <button
@@ -142,7 +211,7 @@
                     class="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700"
                   >
                     <span class="font-medium text-gray-900 dark:text-white">{{ user.email }}</span>
-                    <span class="text-gray-500 dark:text-gray-400 ml-2">#{{ user.id }}</span>
+                    <span class="ml-2 text-gray-500 dark:text-gray-400">#{{ user.id }}</span>
                   </button>
                 </div>
               </div>
@@ -171,17 +240,11 @@
             </div>
 
             <!-- Actions -->
-            <div class="flex items-center gap-3 ml-auto">
-              <button
-                @click="resetFilters"
-                class="btn btn-secondary"
-              >
+            <div class="ml-auto flex items-center gap-3">
+              <button @click="resetFilters" class="btn btn-secondary">
                 {{ t('common.reset') }}
               </button>
-              <button
-                @click="exportToCSV"
-                class="btn btn-primary"
-              >
+              <button @click="exportToCSV" class="btn btn-primary">
                 {{ t('usage.exportCsv') }}
               </button>
             </div>
@@ -191,20 +254,20 @@
 
       <!-- Usage Table -->
       <div class="card overflow-hidden">
-        <DataTable
-          :columns="columns"
-          :data="usageLogs"
-          :loading="loading"
-        >
+        <DataTable :columns="columns" :data="usageLogs" :loading="loading">
           <template #cell-user="{ row }">
             <div class="text-sm">
-              <span class="font-medium text-gray-900 dark:text-white">{{ row.user?.email || '-' }}</span>
-              <span class="text-gray-500 dark:text-gray-400 ml-1">#{{ row.user_id }}</span>
+              <span class="font-medium text-gray-900 dark:text-white">{{
+                row.user?.email || '-'
+              }}</span>
+              <span class="ml-1 text-gray-500 dark:text-gray-400">#{{ row.user_id }}</span>
             </div>
           </template>
 
           <template #cell-api_key="{ row }">
-            <span class="text-sm text-gray-900 dark:text-white">{{ row.api_key?.name || '-' }}</span>
+            <span class="text-sm text-gray-900 dark:text-white">{{
+              row.api_key?.name || '-'
+            }}</span>
           </template>
 
           <template #cell-model="{ value }">
@@ -213,85 +276,160 @@
 
           <template #cell-stream="{ row }">
             <span
-              class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium"
-              :class="row.stream
-                ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
-                : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200'"
+              class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium"
+              :class="
+                row.stream
+                  ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
+                  : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200'
+              "
             >
               {{ row.stream ? t('usage.stream') : t('usage.sync') }}
             </span>
           </template>
 
           <template #cell-tokens="{ row }">
-            <div class="text-sm space-y-1.5">
+            <div class="space-y-1.5 text-sm">
               <!-- Input / Output Tokens -->
               <div class="flex items-center gap-2">
                 <!-- Input -->
                 <div class="inline-flex items-center gap-1">
-                  <svg class="w-3.5 h-3.5 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+                  <svg
+                    class="h-3.5 w-3.5 text-emerald-500"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M19 14l-7 7m0 0l-7-7m7 7V3"
+                    />
                   </svg>
-                  <span class="font-medium text-gray-900 dark:text-white">{{ row.input_tokens.toLocaleString() }}</span>
+                  <span class="font-medium text-gray-900 dark:text-white">{{
+                    row.input_tokens.toLocaleString()
+                  }}</span>
                 </div>
                 <!-- Output -->
                 <div class="inline-flex items-center gap-1">
-                  <svg class="w-3.5 h-3.5 text-violet-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
+                  <svg
+                    class="h-3.5 w-3.5 text-violet-500"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M5 10l7-7m0 0l7 7m-7-7v18"
+                    />
                   </svg>
-                  <span class="font-medium text-gray-900 dark:text-white">{{ row.output_tokens.toLocaleString() }}</span>
+                  <span class="font-medium text-gray-900 dark:text-white">{{
+                    row.output_tokens.toLocaleString()
+                  }}</span>
                 </div>
               </div>
               <!-- Cache Tokens (Read + Write) -->
-              <div v-if="row.cache_read_tokens > 0 || row.cache_creation_tokens > 0" class="flex items-center gap-2">
+              <div
+                v-if="row.cache_read_tokens > 0 || row.cache_creation_tokens > 0"
+                class="flex items-center gap-2"
+              >
                 <!-- Cache Read -->
                 <div v-if="row.cache_read_tokens > 0" class="inline-flex items-center gap-1">
-                  <svg class="w-3.5 h-3.5 text-sky-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
+                  <svg
+                    class="h-3.5 w-3.5 text-sky-500"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"
+                    />
                   </svg>
-                  <span class="text-sky-600 dark:text-sky-400 font-medium">{{ formatCacheTokens(row.cache_read_tokens) }}</span>
+                  <span class="font-medium text-sky-600 dark:text-sky-400">{{
+                    formatCacheTokens(row.cache_read_tokens)
+                  }}</span>
                 </div>
                 <!-- Cache Write -->
                 <div v-if="row.cache_creation_tokens > 0" class="inline-flex items-center gap-1">
-                  <svg class="w-3.5 h-3.5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                  <svg
+                    class="h-3.5 w-3.5 text-amber-500"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+                    />
                   </svg>
-                  <span class="text-amber-600 dark:text-amber-400 font-medium">{{ formatCacheTokens(row.cache_creation_tokens) }}</span>
+                  <span class="font-medium text-amber-600 dark:text-amber-400">{{
+                    formatCacheTokens(row.cache_creation_tokens)
+                  }}</span>
                 </div>
               </div>
             </div>
           </template>
 
           <template #cell-cost="{ row }">
-            <div class="text-sm flex items-center gap-1.5">
+            <div class="flex items-center gap-1.5 text-sm">
               <span class="font-medium text-green-600 dark:text-green-400">
                 ${{ row.actual_cost.toFixed(6) }}
               </span>
               <!-- Cost Detail Tooltip -->
-              <div class="relative group">
-                <div class="flex items-center justify-center w-4 h-4 rounded-full bg-gray-100 dark:bg-gray-700 cursor-help transition-colors group-hover:bg-blue-100 dark:group-hover:bg-blue-900/50">
-                  <svg class="w-3 h-3 text-gray-400 dark:text-gray-500 group-hover:text-blue-500 dark:group-hover:text-blue-400" fill="currentColor" viewBox="0 0 20 20">
-                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
+              <div class="group relative">
+                <div
+                  class="flex h-4 w-4 cursor-help items-center justify-center rounded-full bg-gray-100 transition-colors group-hover:bg-blue-100 dark:bg-gray-700 dark:group-hover:bg-blue-900/50"
+                >
+                  <svg
+                    class="h-3 w-3 text-gray-400 group-hover:text-blue-500 dark:text-gray-500 dark:group-hover:text-blue-400"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+                      clip-rule="evenodd"
+                    />
                   </svg>
                 </div>
                 <!-- Tooltip Content (right side) -->
-                <div class="absolute z-[100] invisible group-hover:visible opacity-0 group-hover:opacity-100 transition-all duration-200 left-full top-1/2 -translate-y-1/2 ml-2">
-                  <div class="bg-gray-900 dark:bg-gray-800 text-white text-xs rounded-lg py-2.5 px-3 shadow-xl whitespace-nowrap border border-gray-700 dark:border-gray-600">
+                <div
+                  class="invisible absolute left-full top-1/2 z-[100] ml-2 -translate-y-1/2 opacity-0 transition-all duration-200 group-hover:visible group-hover:opacity-100"
+                >
+                  <div
+                    class="whitespace-nowrap rounded-lg border border-gray-700 bg-gray-900 px-3 py-2.5 text-xs text-white shadow-xl dark:border-gray-600 dark:bg-gray-800"
+                  >
                     <div class="space-y-1.5">
                       <div class="flex items-center justify-between gap-6">
                         <span class="text-gray-400">{{ t('usage.rate') }}</span>
-                        <span class="font-semibold text-blue-400">{{ (row.rate_multiplier || 1).toFixed(2) }}x</span>
+                        <span class="font-semibold text-blue-400"
+                          >{{ (row.rate_multiplier || 1).toFixed(2) }}x</span
+                        >
                       </div>
                       <div class="flex items-center justify-between gap-6">
                         <span class="text-gray-400">{{ t('usage.original') }}</span>
                         <span class="font-medium text-white">${{ row.total_cost.toFixed(6) }}</span>
                       </div>
-                      <div class="flex items-center justify-between gap-6 pt-1.5 border-t border-gray-700">
+                      <div
+                        class="flex items-center justify-between gap-6 border-t border-gray-700 pt-1.5"
+                      >
                         <span class="text-gray-400">{{ t('usage.billed') }}</span>
-                        <span class="font-semibold text-green-400">${{ row.actual_cost.toFixed(6) }}</span>
+                        <span class="font-semibold text-green-400"
+                          >${{ row.actual_cost.toFixed(6) }}</span
+                        >
                       </div>
                     </div>
                     <!-- Tooltip Arrow (left side) -->
-                    <div class="absolute right-full top-1/2 -translate-y-1/2 w-0 h-0 border-t-[6px] border-t-transparent border-b-[6px] border-b-transparent border-r-[6px] border-r-gray-900 dark:border-r-gray-800"></div>
+                    <div
+                      class="absolute right-full top-1/2 h-0 w-0 -translate-y-1/2 border-b-[6px] border-r-[6px] border-t-[6px] border-b-transparent border-r-gray-900 border-t-transparent dark:border-r-gray-800"
+                    ></div>
                   </div>
                 </div>
               </div>
@@ -300,28 +438,37 @@
 
           <template #cell-billing_type="{ row }">
             <span
-              class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium"
-              :class="row.billing_type === 1
-                ? 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200'
-                : 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-200'"
+              class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium"
+              :class="
+                row.billing_type === 1
+                  ? 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200'
+                  : 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-200'
+              "
             >
               {{ row.billing_type === 1 ? t('usage.subscription') : t('usage.balance') }}
             </span>
           </template>
 
           <template #cell-first_token="{ row }">
-            <span v-if="row.first_token_ms != null" class="text-sm text-gray-600 dark:text-gray-400">
+            <span
+              v-if="row.first_token_ms != null"
+              class="text-sm text-gray-600 dark:text-gray-400"
+            >
               {{ formatDuration(row.first_token_ms) }}
             </span>
             <span v-else class="text-sm text-gray-400 dark:text-gray-500">-</span>
           </template>
 
           <template #cell-duration="{ row }">
-            <span class="text-sm text-gray-600 dark:text-gray-400">{{ formatDuration(row.duration_ms) }}</span>
+            <span class="text-sm text-gray-600 dark:text-gray-400">{{
+              formatDuration(row.duration_ms)
+            }}</span>
           </template>
 
           <template #cell-created_at="{ value }">
-            <span class="text-sm text-gray-600 dark:text-gray-400">{{ formatDateTime(value) }}</span>
+            <span class="text-sm text-gray-600 dark:text-gray-400">{{
+              formatDateTime(value)
+            }}</span>
           </template>
 
           <template #empty>
@@ -357,7 +504,12 @@ import ModelDistributionChart from '@/components/charts/ModelDistributionChart.v
 import TokenUsageTrend from '@/components/charts/TokenUsageTrend.vue'
 import type { UsageLog, TrendDataPoint, ModelStat } from '@/types'
 import type { Column } from '@/components/common/types'
-import type { SimpleUser, SimpleApiKey, AdminUsageStatsResponse, AdminUsageQueryParams } from '@/api/admin/usage'
+import type {
+  SimpleUser,
+  SimpleApiKey,
+  AdminUsageStatsResponse,
+  AdminUsageQueryParams
+} from '@/api/admin/usage'
 
 const { t } = useI18n()
 const appStore = useAppStore()
@@ -374,7 +526,7 @@ const granularity = ref<'day' | 'hour'>('day')
 // Granularity options for Select component
 const granularityOptions = computed(() => [
   { value: 'day', label: t('admin.dashboard.day') },
-  { value: 'hour', label: t('admin.dashboard.hour') },
+  { value: 'hour', label: t('admin.dashboard.hour') }
 ])
 
 const columns = computed<Column[]>(() => [
@@ -405,7 +557,7 @@ let searchTimeout: ReturnType<typeof setTimeout> | null = null
 const apiKeyOptions = computed(() => {
   return [
     { value: null, label: t('usage.allApiKeys') },
-    ...apiKeys.value.map(key => ({
+    ...apiKeys.value.map((key) => ({
       value: key.id,
       label: key.name
     }))
@@ -494,7 +646,11 @@ const loadApiKeysForUser = async (userId: number) => {
 }
 
 // Handle date range change from DateRangePicker
-const onDateRangeChange = (range: { startDate: string; endDate: string; preset: string | null }) => {
+const onDateRangeChange = (range: {
+  startDate: string
+  endDate: string
+  preset: string | null
+}) => {
   filters.value.start_date = range.startDate
   filters.value.end_date = range.endDate
   applyFilters()
@@ -586,7 +742,7 @@ const loadChartData = async () => {
       end_date: filters.value.end_date || endDate.value,
       granularity: granularity.value,
       user_id: filters.value.user_id,
-      api_key_id: filters.value.api_key_id ? Number(filters.value.api_key_id) : undefined,
+      api_key_id: filters.value.api_key_id ? Number(filters.value.api_key_id) : undefined
     }
 
     const [trendResponse, modelResponse] = await Promise.all([
@@ -595,8 +751,8 @@ const loadChartData = async () => {
         start_date: params.start_date,
         end_date: params.end_date,
         user_id: params.user_id,
-        api_key_id: params.api_key_id,
-      }),
+        api_key_id: params.api_key_id
+      })
     ])
 
     trendData.value = trendResponse.trend || []
@@ -650,8 +806,21 @@ const exportToCSV = () => {
     return
   }
 
-  const headers = ['User', 'API Key', 'Model', 'Type', 'Input Tokens', 'Output Tokens', 'Cache Read Tokens', 'Cache Write Tokens', 'Total Cost', 'Billing Type', 'Duration (ms)', 'Time']
-  const rows = usageLogs.value.map(log => [
+  const headers = [
+    'User',
+    'API Key',
+    'Model',
+    'Type',
+    'Input Tokens',
+    'Output Tokens',
+    'Cache Read Tokens',
+    'Cache Write Tokens',
+    'Total Cost',
+    'Billing Type',
+    'Duration (ms)',
+    'Time'
+  ]
+  const rows = usageLogs.value.map((log) => [
     log.user?.email || '',
     log.api_key?.name || '',
     log.model,
@@ -666,10 +835,7 @@ const exportToCSV = () => {
     log.created_at
   ])
 
-  const csvContent = [
-    headers.join(','),
-    ...rows.map(row => row.join(','))
-  ].join('\n')
+  const csvContent = [headers.join(','), ...rows.map((row) => row.join(','))].join('\n')
 
   const blob = new Blob([csvContent], { type: 'text/csv' })
   const url = window.URL.createObjectURL(blob)
diff --git a/frontend/src/views/admin/UsersView.vue b/frontend/src/views/admin/UsersView.vue
index 7340a0cc..aa10f998 100644
--- a/frontend/src/views/admin/UsersView.vue
+++ b/frontend/src/views/admin/UsersView.vue
@@ -10,17 +10,27 @@
           :title="t('common.refresh')"
         >
           <svg
-            :class="['w-5 h-5', loading ? 'animate-spin' : '']"
-            fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"
+            :class="['h-5 w-5', loading ? 'animate-spin' : '']"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="1.5"
           >
-            <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+            />
           </svg>
         </button>
-        <button
-          @click="showCreateModal = true"
-          class="btn btn-primary"
-        >
-          <svg class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+        <button @click="showCreateModal = true" class="btn btn-primary">
+          <svg
+            class="mr-2 h-5 w-5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="1.5"
+          >
             <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
           </svg>
           {{ t('admin.users.createUser') }}
@@ -29,9 +39,19 @@
 
       <!-- Search and Filters -->
       <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
-        <div class="relative flex-1 max-w-md">
-          <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
+        <div class="relative max-w-md flex-1">
+          <svg
+            class="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+            />
           </svg>
           <input
             v-model="searchQuery"
@@ -64,7 +84,9 @@
         <DataTable :columns="columns" :data="users" :loading="loading">
           <template #cell-email="{ value }">
             <div class="flex items-center gap-2">
-              <div class="flex h-8 w-8 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900/30">
+              <div
+                class="flex h-8 w-8 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900/30"
+              >
                 <span class="text-sm font-medium text-primary-700 dark:text-primary-300">
                   {{ value.charAt(0).toUpperCase() }}
                 </span>
@@ -86,7 +108,7 @@
               <span
                 v-if="value"
                 :title="value.length > 30 ? value : undefined"
-                class="text-sm text-gray-600 dark:text-gray-400 block truncate"
+                class="block truncate text-sm text-gray-600 dark:text-gray-400"
               >
                 {{ value.length > 30 ? value.substring(0, 25) + '...' : value }}
               </span>
@@ -95,18 +117,16 @@
           </template>
 
           <template #cell-role="{ value }">
-            <span
-              :class="[
-                'badge',
-                value === 'admin' ? 'badge-purple' : 'badge-gray'
-              ]"
-            >
+            <span :class="['badge', value === 'admin' ? 'badge-purple' : 'badge-gray']">
               {{ value }}
             </span>
           </template>
 
           <template #cell-subscriptions="{ row }">
-            <div v-if="row.subscriptions && row.subscriptions.length > 0" class="flex flex-wrap gap-1.5">
+            <div
+              v-if="row.subscriptions && row.subscriptions.length > 0"
+              class="flex flex-wrap gap-1.5"
+            >
               <GroupBadge
                 v-for="sub in row.subscriptions"
                 :key="sub.id"
@@ -118,9 +138,22 @@
                 :title="sub.expires_at ? formatExpiresAt(sub.expires_at) : ''"
               />
             </div>
-            <span v-else class="inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-xs text-gray-400 dark:text-dark-500 bg-gray-50 dark:bg-dark-700/50">
-              <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
+            <span
+              v-else
+              class="inline-flex items-center gap-1.5 rounded-md bg-gray-50 px-2 py-1 text-xs text-gray-400 dark:bg-dark-700/50 dark:text-dark-500"
+            >
+              <svg
+                class="h-3.5 w-3.5"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
+                />
               </svg>
               <span>{{ t('admin.users.noSubscription') }}</span>
             </span>
@@ -138,7 +171,7 @@
                   ${{ (usageStats[row.id]?.today_actual_cost ?? 0).toFixed(4) }}
                 </span>
               </div>
-              <div class="flex items-center gap-1.5 mt-0.5">
+              <div class="mt-0.5 flex items-center gap-1.5">
                 <span class="text-gray-500 dark:text-gray-400">{{ t('admin.users.total') }}:</span>
                 <span class="font-medium text-gray-900 dark:text-white">
                   ${{ (usageStats[row.id]?.total_actual_cost ?? 0).toFixed(4) }}
@@ -152,12 +185,7 @@
           </template>
 
           <template #cell-status="{ value }">
-            <span
-              :class="[
-                'badge',
-                value === 'active' ? 'badge-success' : 'badge-danger'
-              ]"
-            >
+            <span :class="['badge', value === 'active' ? 'badge-success' : 'badge-danger']">
               {{ value }}
             </span>
           </template>
@@ -173,81 +201,157 @@
                 v-if="row.role !== 'admin'"
                 @click="handleToggleStatus(row)"
                 :class="[
-                  'p-2 rounded-lg transition-colors',
+                  'rounded-lg p-2 transition-colors',
                   row.status === 'active'
-                    ? 'hover:bg-orange-50 dark:hover:bg-orange-900/20 text-gray-500 hover:text-orange-600 dark:hover:text-orange-400'
-                    : 'hover:bg-green-50 dark:hover:bg-green-900/20 text-gray-500 hover:text-green-600 dark:hover:text-green-400'
+                    ? 'text-gray-500 hover:bg-orange-50 hover:text-orange-600 dark:hover:bg-orange-900/20 dark:hover:text-orange-400'
+                    : 'text-gray-500 hover:bg-green-50 hover:text-green-600 dark:hover:bg-green-900/20 dark:hover:text-green-400'
                 ]"
-                :title="row.status === 'active' ? t('admin.users.disableUser') : t('admin.users.enableUser')"
+                :title="
+                  row.status === 'active'
+                    ? t('admin.users.disableUser')
+                    : t('admin.users.enableUser')
+                "
               >
-                <svg v-if="row.status === 'active'" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
+                <svg
+                  v-if="row.status === 'active'"
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
+                  />
                 </svg>
-                <svg v-else class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                <svg
+                  v-else
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
                 </svg>
               </button>
               <!-- Allowed Groups -->
               <button
                 @click="handleAllowedGroups(row)"
-                class="p-2 rounded-lg hover:bg-blue-50 dark:hover:bg-blue-900/20 text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-blue-50 hover:text-blue-600 dark:hover:bg-blue-900/20 dark:hover:text-blue-400"
                 :title="t('admin.users.setAllowedGroups')"
               >
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
+                <svg
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"
+                  />
                 </svg>
               </button>
               <!-- View API Keys -->
               <button
                 @click="handleViewApiKeys(row)"
-                class="p-2 rounded-lg hover:bg-purple-50 dark:hover:bg-purple-900/20 text-gray-500 hover:text-purple-600 dark:hover:text-purple-400 transition-colors"
+                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-purple-50 hover:text-purple-600 dark:hover:bg-purple-900/20 dark:hover:text-purple-400"
                 :title="t('admin.users.viewApiKeys')"
               >
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z" />
+                <svg
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"
+                  />
                 </svg>
               </button>
               <!-- Deposit -->
               <button
                 @click="handleDeposit(row)"
-                class="p-2 rounded-lg hover:bg-emerald-50 dark:hover:bg-emerald-900/20 text-gray-500 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors"
+                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-emerald-50 hover:text-emerald-600 dark:hover:bg-emerald-900/20 dark:hover:text-emerald-400"
                 :title="t('admin.users.deposit')"
               >
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+                <svg
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
                   <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                 </svg>
               </button>
               <!-- Withdraw -->
               <button
                 @click="handleWithdraw(row)"
-                class="p-2 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 text-gray-500 hover:text-red-600 dark:hover:text-red-400 transition-colors"
+                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
                 :title="t('admin.users.withdraw')"
               >
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+                <svg
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
                   <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                 </svg>
               </button>
               <!-- Edit -->
               <button
                 @click="handleEdit(row)"
-                class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-dark-700 text-gray-500 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
+                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-primary-600 dark:hover:bg-dark-700 dark:hover:text-primary-400"
                 :title="t('common.edit')"
               >
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round"
-                    d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
+                <svg
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
+                  />
                 </svg>
               </button>
               <!-- Delete (hidden for admin users) -->
               <button
                 v-if="row.role !== 'admin'"
                 @click="handleDelete(row)"
-                class="p-2 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 text-gray-500 hover:text-red-600 dark:hover:text-red-400 transition-colors"
+                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
                 :title="t('common.delete')"
               >
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round"
-                    d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
+                <svg
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+                  />
                 </svg>
               </button>
             </div>
@@ -308,16 +412,37 @@
                 v-if="createForm.password"
                 type="button"
                 @click="copyPassword"
-                class="absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-dark-700 transition-colors"
-                :class="passwordCopied ? 'text-green-500' : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'"
+                class="absolute right-2 top-1/2 -translate-y-1/2 rounded-lg p-1 transition-colors hover:bg-gray-100 dark:hover:bg-dark-700"
+                :class="
+                  passwordCopied
+                    ? 'text-green-500'
+                    : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'
+                "
                 :title="passwordCopied ? t('keys.copied') : t('admin.users.copyPassword')"
               >
-                <svg v-if="passwordCopied" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+                <svg
+                  v-if="passwordCopied"
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                >
                   <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                 </svg>
-                <svg v-else class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round"
-                    d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" />
+                <svg
+                  v-else
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"
+                  />
                 </svg>
               </button>
             </div>
@@ -328,8 +453,18 @@
               class="btn btn-secondary px-3"
               :title="t('admin.users.generatePassword')"
             >
-              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
+              <svg
+                class="h-5 w-5"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+                />
               </svg>
             </button>
           </div>
@@ -365,44 +500,38 @@
         <div class="grid grid-cols-2 gap-4">
           <div>
             <label class="input-label">{{ t('admin.users.columns.balance') }}</label>
-            <input
-              v-model.number="createForm.balance"
-              type="number"
-              step="any"
-              class="input"
-            />
+            <input v-model.number="createForm.balance" type="number" step="any" class="input" />
           </div>
           <div>
             <label class="input-label">{{ t('admin.users.columns.concurrency') }}</label>
-            <input
-              v-model.number="createForm.concurrency"
-              type="number"
-              class="input"
-            />
+            <input v-model.number="createForm.concurrency" type="number" class="input" />
           </div>
         </div>
 
         <div class="flex justify-end gap-3 pt-4">
-          <button
-            @click="closeCreateModal"
-            type="button"
-            class="btn btn-secondary"
-          >
+          <button @click="closeCreateModal" type="button" class="btn btn-secondary">
             {{ t('common.cancel') }}
           </button>
-          <button
-            type="submit"
-            :disabled="submitting"
-            class="btn btn-primary"
-          >
+          <button type="submit" :disabled="submitting" class="btn btn-primary">
             <svg
               v-if="submitting"
-              class="animate-spin -ml-1 mr-2 h-4 w-4"
+              class="-ml-1 mr-2 h-4 w-4 animate-spin"
               fill="none"
               viewBox="0 0 24 24"
             >
-              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              <circle
+                class="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                stroke-width="4"
+              ></circle>
+              <path
+                class="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              ></path>
             </svg>
             {{ submitting ? t('admin.users.creating') : t('common.create') }}
           </button>
@@ -420,15 +549,13 @@
       <form v-if="editingUser" @submit.prevent="handleUpdateUser" class="space-y-5">
         <div>
           <label class="input-label">{{ t('admin.users.email') }}</label>
-          <input
-            v-model="editForm.email"
-            type="email"
-            class="input"
-          />
+          <input v-model="editForm.email" type="email" class="input" />
         </div>
         <div>
           <label class="input-label">{{ t('admin.users.password') }}</label>
-          <p class="text-xs text-gray-500 dark:text-dark-400 mb-1">{{ t('admin.users.leaveEmptyToKeep') }}</p>
+          <p class="mb-1 text-xs text-gray-500 dark:text-dark-400">
+            {{ t('admin.users.leaveEmptyToKeep') }}
+          </p>
           <div class="flex gap-2">
             <div class="relative flex-1">
               <input
@@ -442,16 +569,37 @@
                 v-if="editForm.password"
                 type="button"
                 @click="copyEditPassword"
-                class="absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-dark-700 transition-colors"
-                :class="editPasswordCopied ? 'text-green-500' : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'"
+                class="absolute right-2 top-1/2 -translate-y-1/2 rounded-lg p-1 transition-colors hover:bg-gray-100 dark:hover:bg-dark-700"
+                :class="
+                  editPasswordCopied
+                    ? 'text-green-500'
+                    : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'
+                "
                 :title="editPasswordCopied ? t('keys.copied') : t('admin.users.copyPassword')"
               >
-                <svg v-if="editPasswordCopied" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+                <svg
+                  v-if="editPasswordCopied"
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                >
                   <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                 </svg>
-                <svg v-else class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round"
-                    d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" />
+                <svg
+                  v-else
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"
+                  />
                 </svg>
               </button>
             </div>
@@ -462,8 +610,18 @@
               class="btn btn-secondary px-3"
               :title="t('admin.users.generatePassword')"
             >
-              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
+              <svg
+                class="h-5 w-5"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+                />
               </svg>
             </button>
           </div>
@@ -498,34 +656,33 @@
         </div>
         <div>
           <label class="input-label">{{ t('admin.users.columns.concurrency') }}</label>
-          <input
-            v-model.number="editForm.concurrency"
-            type="number"
-            class="input"
-            />
+          <input v-model.number="editForm.concurrency" type="number" class="input" />
         </div>
 
         <div class="flex justify-end gap-3 pt-4">
-          <button
-            @click="closeEditModal"
-            type="button"
-            class="btn btn-secondary"
-          >
+          <button @click="closeEditModal" type="button" class="btn btn-secondary">
             {{ t('common.cancel') }}
           </button>
-          <button
-            type="submit"
-            :disabled="submitting"
-            class="btn btn-primary"
-          >
+          <button type="submit" :disabled="submitting" class="btn btn-primary">
             <svg
               v-if="submitting"
-              class="animate-spin -ml-1 mr-2 h-4 w-4"
+              class="-ml-1 mr-2 h-4 w-4 animate-spin"
               fill="none"
               viewBox="0 0 24 24"
             >
-              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              <circle
+                class="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                stroke-width="4"
+              ></circle>
+              <path
+                class="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              ></path>
             </svg>
             {{ submitting ? t('admin.users.updating') : t('common.update') }}
           </button>
@@ -542,8 +699,10 @@
     >
       <div v-if="viewingUser" class="space-y-4">
         <!-- User Info Header -->
-        <div class="flex items-center gap-3 p-4 rounded-xl bg-gray-50 dark:bg-dark-700">
-          <div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900/30">
+        <div class="flex items-center gap-3 rounded-xl bg-gray-50 p-4 dark:bg-dark-700">
+          <div
+            class="flex h-10 w-10 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900/30"
+          >
             <span class="text-lg font-medium text-primary-700 dark:text-primary-300">
               {{ viewingUser.email.charAt(0).toUpperCase() }}
             </span>
@@ -556,26 +715,49 @@
 
         <!-- API Keys List -->
         <div v-if="loadingApiKeys" class="flex justify-center py-8">
-          <svg class="animate-spin h-8 w-8 text-primary-500" fill="none" viewBox="0 0 24 24">
-            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          <svg class="h-8 w-8 animate-spin text-primary-500" fill="none" viewBox="0 0 24 24">
+            <circle
+              class="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              stroke-width="4"
+            ></circle>
+            <path
+              class="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            ></path>
           </svg>
         </div>
-        <div v-else-if="userApiKeys.length === 0" class="text-center py-8">
-          <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z" />
+        <div v-else-if="userApiKeys.length === 0" class="py-8 text-center">
+          <svg
+            class="mx-auto h-12 w-12 text-gray-400"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            stroke-width="1"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"
+            />
           </svg>
-          <p class="mt-2 text-sm text-gray-500 dark:text-dark-400">{{ t('admin.users.noApiKeys') }}</p>
+          <p class="mt-2 text-sm text-gray-500 dark:text-dark-400">
+            {{ t('admin.users.noApiKeys') }}
+          </p>
         </div>
-        <div v-else class="space-y-3 max-h-96 overflow-y-auto">
+        <div v-else class="max-h-96 space-y-3 overflow-y-auto">
           <div
             v-for="key in userApiKeys"
             :key="key.id"
-            class="p-4 rounded-xl border border-gray-200 dark:border-dark-600 bg-white dark:bg-dark-800"
+            class="rounded-xl border border-gray-200 bg-white p-4 dark:border-dark-600 dark:bg-dark-800"
           >
             <div class="flex items-start justify-between">
-              <div class="flex-1 min-w-0">
-                <div class="flex items-center gap-2 mb-1">
+              <div class="min-w-0 flex-1">
+                <div class="mb-1 flex items-center gap-2">
                   <span class="font-medium text-gray-900 dark:text-white">{{ key.name }}</span>
                   <span
                     :class="[
@@ -586,23 +768,48 @@
                     {{ key.status }}
                   </span>
                 </div>
-                <p class="text-sm font-mono text-gray-500 dark:text-dark-400 truncate">
+                <p class="truncate font-mono text-sm text-gray-500 dark:text-dark-400">
                   {{ key.key.substring(0, 20) }}...{{ key.key.substring(key.key.length - 8) }}
                 </p>
               </div>
             </div>
             <div class="mt-3 flex flex-wrap gap-4 text-xs text-gray-500 dark:text-dark-400">
               <div class="flex items-center gap-1">
-                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
+                <svg
+                  class="h-3.5 w-3.5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"
+                  />
                 </svg>
-                <span>{{ t('admin.users.group') }}: {{ key.group?.name || t('admin.users.none') }}</span>
+                <span
+                  >{{ t('admin.users.group') }}:
+                  {{ key.group?.name || t('admin.users.none') }}</span
+                >
               </div>
               <div class="flex items-center gap-1">
-                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
+                <svg
+                  class="h-3.5 w-3.5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5"
+                  />
                 </svg>
-                <span>{{ t('admin.users.columns.created') }}: {{ formatDate(key.created_at) }}</span>
+                <span
+                  >{{ t('admin.users.columns.created') }}: {{ formatDate(key.created_at) }}</span
+                >
               </div>
             </div>
           </div>
@@ -611,11 +818,7 @@
 
       <template #footer>
         <div class="flex justify-end">
-          <button
-            @click="closeApiKeysModal"
-            type="button"
-            class="btn btn-secondary"
-          >
+          <button @click="closeApiKeysModal" type="button" class="btn btn-secondary">
             {{ t('common.cancel') }}
           </button>
         </div>
@@ -631,8 +834,10 @@
     >
       <div v-if="allowedGroupsUser" class="space-y-4">
         <!-- User Info Header -->
-        <div class="flex items-center gap-3 p-4 rounded-xl bg-gray-50 dark:bg-dark-700">
-          <div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900/30">
+        <div class="flex items-center gap-3 rounded-xl bg-gray-50 p-4 dark:bg-dark-700">
+          <div
+            class="flex h-10 w-10 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900/30"
+          >
             <span class="text-lg font-medium text-primary-700 dark:text-primary-300">
               {{ allowedGroupsUser.email.charAt(0).toUpperCase() }}
             </span>
@@ -644,33 +849,59 @@
 
         <!-- Loading State -->
         <div v-if="loadingGroups" class="flex justify-center py-8">
-          <svg class="animate-spin h-8 w-8 text-primary-500" fill="none" viewBox="0 0 24 24">
-            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          <svg class="h-8 w-8 animate-spin text-primary-500" fill="none" viewBox="0 0 24 24">
+            <circle
+              class="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              stroke-width="4"
+            ></circle>
+            <path
+              class="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            ></path>
           </svg>
         </div>
 
         <!-- Groups Selection -->
         <div v-else>
-          <p class="text-sm text-gray-600 dark:text-dark-400 mb-3">
+          <p class="mb-3 text-sm text-gray-600 dark:text-dark-400">
             {{ t('admin.users.allowedGroupsHint') }}
           </p>
 
           <!-- Empty State -->
-          <div v-if="standardGroups.length === 0" class="text-center py-6">
-            <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
+          <div v-if="standardGroups.length === 0" class="py-6 text-center">
+            <svg
+              class="mx-auto h-12 w-12 text-gray-400"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              stroke-width="1"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"
+              />
             </svg>
-            <p class="mt-2 text-sm text-gray-500 dark:text-dark-400">{{ t('admin.users.noStandardGroups') }}</p>
+            <p class="mt-2 text-sm text-gray-500 dark:text-dark-400">
+              {{ t('admin.users.noStandardGroups') }}
+            </p>
           </div>
 
           <!-- Groups List -->
-          <div v-else class="space-y-2 max-h-64 overflow-y-auto">
+          <div v-else class="max-h-64 space-y-2 overflow-y-auto">
             <label
               v-for="group in standardGroups"
               :key="group.id"
-              class="flex items-center gap-3 p-3 rounded-lg border border-gray-200 dark:border-dark-600 hover:bg-gray-50 dark:hover:bg-dark-700 cursor-pointer transition-colors"
-              :class="{ 'bg-primary-50 dark:bg-primary-900/20 border-primary-300 dark:border-primary-700': selectedGroupIds.includes(group.id) }"
+              class="flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 p-3 transition-colors hover:bg-gray-50 dark:border-dark-600 dark:hover:bg-dark-700"
+              :class="{
+                'border-primary-300 bg-primary-50 dark:border-primary-700 dark:bg-primary-900/20':
+                  selectedGroupIds.includes(group.id)
+              }"
             >
               <input
                 type="checkbox"
@@ -678,21 +909,32 @@
                 v-model="selectedGroupIds"
                 class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
               />
-              <div class="flex-1 min-w-0">
+              <div class="min-w-0 flex-1">
                 <p class="font-medium text-gray-900 dark:text-white">{{ group.name }}</p>
-                <p v-if="group.description" class="text-sm text-gray-500 dark:text-dark-400 truncate">{{ group.description }}</p>
+                <p
+                  v-if="group.description"
+                  class="truncate text-sm text-gray-500 dark:text-dark-400"
+                >
+                  {{ group.description }}
+                </p>
               </div>
               <div class="flex items-center gap-2">
                 <span class="badge badge-gray text-xs">{{ group.platform }}</span>
-                <span v-if="group.is_exclusive" class="badge badge-purple text-xs">{{ t('admin.groups.exclusive') }}</span>
+                <span v-if="group.is_exclusive" class="badge badge-purple text-xs">{{
+                  t('admin.groups.exclusive')
+                }}</span>
               </div>
             </label>
           </div>
 
           <!-- Clear Selection -->
-          <div class="mt-4 pt-4 border-t border-gray-200 dark:border-dark-600">
-            <label class="flex items-center gap-3 p-3 rounded-lg border border-gray-200 dark:border-dark-600 hover:bg-gray-50 dark:hover:bg-dark-700 cursor-pointer transition-colors"
-              :class="{ 'bg-green-50 dark:bg-green-900/20 border-green-300 dark:border-green-700': selectedGroupIds.length === 0 }"
+          <div class="mt-4 border-t border-gray-200 pt-4 dark:border-dark-600">
+            <label
+              class="flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 p-3 transition-colors hover:bg-gray-50 dark:border-dark-600 dark:hover:bg-dark-700"
+              :class="{
+                'border-green-300 bg-green-50 dark:border-green-700 dark:bg-green-900/20':
+                  selectedGroupIds.length === 0
+              }"
             >
               <input
                 type="radio"
@@ -701,8 +943,12 @@
                 class="h-4 w-4 border-gray-300 text-green-600 focus:ring-green-500"
               />
               <div class="flex-1">
-                <p class="font-medium text-gray-900 dark:text-white">{{ t('admin.users.allowAllGroups') }}</p>
-                <p class="text-sm text-gray-500 dark:text-dark-400">{{ t('admin.users.allowAllGroupsHint') }}</p>
+                <p class="font-medium text-gray-900 dark:text-white">
+                  {{ t('admin.users.allowAllGroups') }}
+                </p>
+                <p class="text-sm text-gray-500 dark:text-dark-400">
+                  {{ t('admin.users.allowAllGroupsHint') }}
+                </p>
               </div>
             </label>
           </div>
@@ -711,11 +957,7 @@
 
       <template #footer>
         <div class="flex justify-end gap-3">
-          <button
-            @click="closeAllowedGroupsModal"
-            type="button"
-            class="btn btn-secondary"
-          >
+          <button @click="closeAllowedGroupsModal" type="button" class="btn btn-secondary">
             {{ t('common.cancel') }}
           </button>
           <button
@@ -725,12 +967,23 @@
           >
             <svg
               v-if="savingAllowedGroups"
-              class="animate-spin -ml-1 mr-2 h-4 w-4"
+              class="-ml-1 mr-2 h-4 w-4 animate-spin"
               fill="none"
               viewBox="0 0 24 24"
             >
-              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              <circle
+                class="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                stroke-width="4"
+              ></circle>
+              <path
+                class="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              ></path>
             </svg>
             {{ savingAllowedGroups ? t('common.saving') : t('common.save') }}
           </button>
@@ -746,8 +999,10 @@
       @close="closeBalanceModal"
     >
       <form v-if="balanceUser" @submit.prevent="handleBalanceSubmit" class="space-y-5">
-        <div class="flex items-center gap-3 p-4 rounded-xl bg-gray-50 dark:bg-dark-700">
-          <div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900/30">
+        <div class="flex items-center gap-3 rounded-xl bg-gray-50 p-4 dark:bg-dark-700">
+          <div
+            class="flex h-10 w-10 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900/30"
+          >
             <span class="text-lg font-medium text-primary-700 dark:text-primary-300">
               {{ balanceUser.email.charAt(0).toUpperCase() }}
             </span>
@@ -762,10 +1017,16 @@
 
         <div>
           <label class="input-label">
-            {{ balanceOperation === 'add' ? t('admin.users.depositAmount') : t('admin.users.withdrawAmount') }}
+            {{
+              balanceOperation === 'add'
+                ? t('admin.users.depositAmount')
+                : t('admin.users.withdrawAmount')
+            }}
           </label>
           <div class="relative">
-            <div class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-dark-400 font-medium">
+            <div
+              class="absolute left-3 top-1/2 -translate-y-1/2 font-medium text-gray-500 dark:text-dark-400"
+            >
               $
             </div>
             <input
@@ -789,14 +1050,19 @@
             v-model="balanceForm.notes"
             rows="3"
             class="input"
-            :placeholder="balanceOperation === 'add'
-              ? t('admin.users.depositNotesPlaceholder')
-              : t('admin.users.withdrawNotesPlaceholder')"
+            :placeholder="
+              balanceOperation === 'add'
+                ? t('admin.users.depositNotesPlaceholder')
+                : t('admin.users.withdrawNotesPlaceholder')
+            "
           ></textarea>
           <p class="input-hint">{{ t('admin.users.notesOptional') }}</p>
         </div>
 
-        <div v-if="balanceForm.amount > 0" class="p-4 rounded-xl bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800/50">
+        <div
+          v-if="balanceForm.amount > 0"
+          class="rounded-xl border border-blue-200 bg-blue-50 p-4 dark:border-blue-800/50 dark:bg-blue-900/20"
+        >
           <div class="flex items-center justify-between text-sm">
             <span class="text-blue-700 dark:text-blue-300">{{ t('admin.users.newBalance') }}:</span>
             <span class="font-bold text-blue-900 dark:text-blue-100">
@@ -805,41 +1071,75 @@
           </div>
         </div>
 
-        <div v-if="balanceOperation === 'subtract' && calculateNewBalance() < 0" class="p-4 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800/50">
+        <div
+          v-if="balanceOperation === 'subtract' && calculateNewBalance() < 0"
+          class="rounded-xl border border-red-200 bg-red-50 p-4 dark:border-red-800/50 dark:bg-red-900/20"
+        >
           <div class="flex items-center gap-2 text-sm text-red-700 dark:text-red-300">
-            <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
+            <svg
+              class="h-5 w-5 flex-shrink-0"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
+              />
             </svg>
             <span>{{ t('admin.users.insufficientBalance') }}</span>
           </div>
         </div>
 
         <div class="flex justify-end gap-3 pt-4">
-          <button
-            @click="closeBalanceModal"
-            type="button"
-            class="btn btn-secondary"
-          >
+          <button @click="closeBalanceModal" type="button" class="btn btn-secondary">
             {{ t('common.cancel') }}
           </button>
           <button
             type="submit"
-            :disabled="balanceSubmitting || !balanceForm.amount || balanceForm.amount <= 0 || (balanceOperation === 'subtract' && calculateNewBalance() < 0)"
+            :disabled="
+              balanceSubmitting ||
+              !balanceForm.amount ||
+              balanceForm.amount <= 0 ||
+              (balanceOperation === 'subtract' && calculateNewBalance() < 0)
+            "
             class="btn"
-            :class="balanceOperation === 'add' ? 'bg-emerald-600 hover:bg-emerald-700 text-white' : 'btn-danger'"
+            :class="
+              balanceOperation === 'add'
+                ? 'bg-emerald-600 text-white hover:bg-emerald-700'
+                : 'btn-danger'
+            "
           >
             <svg
               v-if="balanceSubmitting"
-              class="animate-spin -ml-1 mr-2 h-4 w-4"
+              class="-ml-1 mr-2 h-4 w-4 animate-spin"
               fill="none"
               viewBox="0 0 24 24"
             >
-              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              <circle
+                class="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                stroke-width="4"
+              ></circle>
+              <path
+                class="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              ></path>
             </svg>
-            {{ balanceSubmitting
-              ? (balanceOperation === 'add' ? t('admin.users.depositing') : t('admin.users.withdrawing'))
-              : (balanceOperation === 'add' ? t('admin.users.confirmDeposit') : t('admin.users.confirmWithdraw'))
+            {{
+              balanceSubmitting
+                ? balanceOperation === 'add'
+                  ? t('admin.users.depositing')
+                  : t('admin.users.withdrawing')
+                : balanceOperation === 'add'
+                  ? t('admin.users.confirmDeposit')
+                  : t('admin.users.confirmWithdraw')
             }}
           </button>
         </div>
@@ -909,7 +1209,6 @@ const statusOptions = computed(() => [
   { value: 'disabled', label: t('admin.users.disabled') }
 ])
 
-
 const users = ref<User[]>([])
 const loading = ref(false)
 const searchQuery = ref('')
@@ -1044,22 +1343,18 @@ const copyEditPassword = async () => {
 const loadUsers = async () => {
   loading.value = true
   try {
-    const response = await adminAPI.users.list(
-      pagination.page,
-      pagination.page_size,
-      {
-        role: filters.role as any,
-        status: filters.status as any,
-        search: searchQuery.value || undefined
-      }
-    )
+    const response = await adminAPI.users.list(pagination.page, pagination.page_size, {
+      role: filters.role as any,
+      status: filters.status as any,
+      search: searchQuery.value || undefined
+    })
     users.value = response.items
     pagination.total = response.total
     pagination.pages = response.pages
 
     // Load usage stats for all users in the list
     if (response.items.length > 0) {
-      const userIds = response.items.map(u => u.id)
+      const userIds = response.items.map((u) => u.id)
       try {
         const usageResponse = await adminAPI.dashboard.getBatchUsersUsage(userIds)
         usageStats.value = usageResponse.stats
@@ -1167,7 +1462,9 @@ const handleToggleStatus = async (user: User) => {
   const newStatus = user.status === 'active' ? 'disabled' : 'active'
   try {
     await adminAPI.users.toggleStatus(user.id, newStatus)
-    appStore.showSuccess(newStatus === 'active' ? t('admin.users.userEnabled') : t('admin.users.userDisabled'))
+    appStore.showSuccess(
+      newStatus === 'active' ? t('admin.users.userEnabled') : t('admin.users.userDisabled')
+    )
     loadUsers()
   } catch (error: any) {
     appStore.showError(error.response?.data?.detail || t('admin.users.failedToToggle'))
@@ -1209,7 +1506,9 @@ const handleAllowedGroups = async (user: User) => {
   try {
     const allGroups = await adminAPI.groups.getAll()
     // Only show standard type groups (subscription type groups are managed in /admin/subscriptions)
-    standardGroups.value = allGroups.filter(g => g.subscription_type === 'standard' && g.status === 'active')
+    standardGroups.value = allGroups.filter(
+      (g) => g.subscription_type === 'standard' && g.status === 'active'
+    )
   } catch (error: any) {
     appStore.showError(error.response?.data?.detail || t('admin.users.failedToLoadGroups'))
     console.error('Error loading groups:', error)
@@ -1308,17 +1607,19 @@ const handleBalanceSubmit = async () => {
       balanceForm.notes
     )
 
-    const successMsg = balanceOperation.value === 'add'
-      ? t('admin.users.depositSuccess')
-      : t('admin.users.withdrawSuccess')
+    const successMsg =
+      balanceOperation.value === 'add'
+        ? t('admin.users.depositSuccess')
+        : t('admin.users.withdrawSuccess')
 
     appStore.showSuccess(successMsg)
     closeBalanceModal()
     loadUsers()
   } catch (error: any) {
-    const errorMsg = balanceOperation.value === 'add'
-      ? t('admin.users.failedToDeposit')
-      : t('admin.users.failedToWithdraw')
+    const errorMsg =
+      balanceOperation.value === 'add'
+        ? t('admin.users.failedToDeposit')
+        : t('admin.users.failedToWithdraw')
 
     appStore.showError(error.response?.data?.detail || errorMsg)
     console.error('Error updating balance:', error)
diff --git a/frontend/src/views/auth/EmailVerifyView.vue b/frontend/src/views/auth/EmailVerifyView.vue
index 39c0a929..a03f66e1 100644
--- a/frontend/src/views/auth/EmailVerifyView.vue
+++ b/frontend/src/views/auth/EmailVerifyView.vue
@@ -3,20 +3,32 @@
     <div class="space-y-6">
       <!-- Title -->
       <div class="text-center">
-        <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
-          Verify Your Email
-        </h2>
+        <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Verify Your Email</h2>
         <p class="mt-2 text-sm text-gray-500 dark:text-dark-400">
-          We'll send a verification code to <span class="font-medium text-gray-700 dark:text-gray-300">{{ email }}</span>
+          We'll send a verification code to
+          <span class="font-medium text-gray-700 dark:text-gray-300">{{ email }}</span>
         </p>
       </div>
 
       <!-- No Data Warning -->
-      <div v-if="!hasRegisterData" class="p-4 rounded-xl bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800/50">
+      <div
+        v-if="!hasRegisterData"
+        class="rounded-xl border border-amber-200 bg-amber-50 p-4 dark:border-amber-800/50 dark:bg-amber-900/20"
+      >
         <div class="flex items-start gap-3">
           <div class="flex-shrink-0">
-            <svg class="w-5 h-5 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+            <svg
+              class="h-5 w-5 text-amber-500"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="1.5"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+              />
             </svg>
           </div>
           <div class="text-sm text-amber-700 dark:text-amber-400">
@@ -30,9 +42,7 @@
       <form v-else @submit.prevent="handleVerify" class="space-y-5">
         <!-- Verification Code Input -->
         <div>
-          <label for="code" class="input-label text-center">
-            Verification Code
-          </label>
+          <label for="code" class="input-label text-center"> Verification Code </label>
           <input
             id="code"
             v-model="verifyCode"
@@ -42,24 +52,35 @@
             inputmode="numeric"
             maxlength="6"
             :disabled="isLoading"
-            class="input text-center text-xl tracking-[0.5em] font-mono py-3"
+            class="input py-3 text-center font-mono text-xl tracking-[0.5em]"
             :class="{ 'input-error': errors.code }"
             placeholder="000000"
           />
           <p v-if="errors.code" class="input-error-text text-center">
             {{ errors.code }}
           </p>
-          <p v-else class="input-hint text-center">
-            Enter the 6-digit code sent to your email
-          </p>
+          <p v-else class="input-hint text-center">Enter the 6-digit code sent to your email</p>
         </div>
 
         <!-- Code Status -->
-        <div v-if="codeSent" class="p-4 rounded-xl bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800/50">
+        <div
+          v-if="codeSent"
+          class="rounded-xl border border-green-200 bg-green-50 p-4 dark:border-green-800/50 dark:bg-green-900/20"
+        >
           <div class="flex items-start gap-3">
             <div class="flex-shrink-0">
-              <svg class="w-5 h-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              <svg
+                class="h-5 w-5 text-green-500"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
               </svg>
             </div>
             <p class="text-sm text-green-700 dark:text-green-400">
@@ -77,7 +98,7 @@
             @expire="onTurnstileExpire"
             @error="onTurnstileError"
           />
-          <p v-if="errors.turnstile" class="input-error-text text-center mt-2">
+          <p v-if="errors.turnstile" class="input-error-text mt-2 text-center">
             {{ errors.turnstile }}
           </p>
         </div>
@@ -86,12 +107,22 @@
         <transition name="fade">
           <div
             v-if="errorMessage"
-            class="p-4 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800/50"
+            class="rounded-xl border border-red-200 bg-red-50 p-4 dark:border-red-800/50 dark:bg-red-900/20"
           >
             <div class="flex items-start gap-3">
               <div class="flex-shrink-0">
-                <svg class="w-5 h-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+                <svg
+                  class="h-5 w-5 text-red-500"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+                  />
                 </svg>
               </div>
               <p class="text-sm text-red-700 dark:text-red-400">
@@ -102,22 +133,40 @@
         </transition>
 
         <!-- Submit Button -->
-        <button
-          type="submit"
-          :disabled="isLoading || !verifyCode"
-          class="btn btn-primary w-full"
-        >
+        <button type="submit" :disabled="isLoading || !verifyCode" class="btn btn-primary w-full">
           <svg
             v-if="isLoading"
-            class="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
+            class="-ml-1 mr-2 h-4 w-4 animate-spin text-white"
             fill="none"
             viewBox="0 0 24 24"
           >
-            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            <circle
+              class="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              stroke-width="4"
+            ></circle>
+            <path
+              class="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            ></path>
           </svg>
-          <svg v-else class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          <svg
+            v-else
+            class="mr-2 h-5 w-5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="1.5"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+            />
           </svg>
           {{ isLoading ? 'Verifying...' : 'Verify & Create Account' }}
         </button>
@@ -128,7 +177,7 @@
             v-if="countdown > 0"
             type="button"
             disabled
-            class="text-sm text-gray-400 dark:text-dark-500 cursor-not-allowed"
+            class="cursor-not-allowed text-sm text-gray-400 dark:text-dark-500"
           >
             Resend code in {{ countdown }}s
           </button>
@@ -136,8 +185,10 @@
             v-else
             type="button"
             @click="handleResendCode"
-            :disabled="isSendingCode || (turnstileEnabled && showResendTurnstile && !resendTurnstileToken)"
-            class="text-sm text-primary-600 hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            :disabled="
+              isSendingCode || (turnstileEnabled && showResendTurnstile && !resendTurnstileToken)
+            "
+            class="text-sm text-primary-600 transition-colors hover:text-primary-500 disabled:cursor-not-allowed disabled:opacity-50 dark:text-primary-400 dark:hover:text-primary-300"
           >
             <span v-if="isSendingCode">Sending...</span>
             <span v-else-if="turnstileEnabled && !showResendTurnstile">Click to resend code</span>
@@ -151,10 +202,20 @@
     <template #footer>
       <button
         @click="handleBack"
-        class="text-gray-500 dark:text-dark-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors flex items-center gap-2"
+        class="flex items-center gap-2 text-gray-500 transition-colors hover:text-gray-700 dark:text-dark-400 dark:hover:text-gray-300"
       >
-        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
+        <svg
+          class="h-4 w-4"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          stroke-width="1.5"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
+          />
         </svg>
         Back to registration
       </button>
@@ -163,163 +224,162 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
-import { useRouter } from 'vue-router';
-import { AuthLayout } from '@/components/layout';
-import TurnstileWidget from '@/components/TurnstileWidget.vue';
-import { useAuthStore, useAppStore } from '@/stores';
-import { getPublicSettings, sendVerifyCode } from '@/api/auth';
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { AuthLayout } from '@/components/layout'
+import TurnstileWidget from '@/components/TurnstileWidget.vue'
+import { useAuthStore, useAppStore } from '@/stores'
+import { getPublicSettings, sendVerifyCode } from '@/api/auth'
 
 // ==================== Router & Stores ====================
 
-const router = useRouter();
-const authStore = useAuthStore();
-const appStore = useAppStore();
+const router = useRouter()
+const authStore = useAuthStore()
+const appStore = useAppStore()
 
 // ==================== State ====================
 
-const isLoading = ref<boolean>(false);
-const isSendingCode = ref<boolean>(false);
-const errorMessage = ref<string>('');
-const codeSent = ref<boolean>(false);
-const verifyCode = ref<string>('');
-const countdown = ref<number>(0);
-let countdownTimer: ReturnType<typeof setInterval> | null = null;
+const isLoading = ref<boolean>(false)
+const isSendingCode = ref<boolean>(false)
+const errorMessage = ref<string>('')
+const codeSent = ref<boolean>(false)
+const verifyCode = ref<string>('')
+const countdown = ref<number>(0)
+let countdownTimer: ReturnType<typeof setInterval> | null = null
 
 // Registration data from sessionStorage
-const email = ref<string>('');
-const password = ref<string>('');
-const initialTurnstileToken = ref<string>('');
-const hasRegisterData = ref<boolean>(false);
+const email = ref<string>('')
+const password = ref<string>('')
+const initialTurnstileToken = ref<string>('')
+const hasRegisterData = ref<boolean>(false)
 
 // Public settings
-const turnstileEnabled = ref<boolean>(false);
-const turnstileSiteKey = ref<string>('');
-const siteName = ref<string>('Sub2API');
+const turnstileEnabled = ref<boolean>(false)
+const turnstileSiteKey = ref<string>('')
+const siteName = ref<string>('Sub2API')
 
 // Turnstile for resend
-const turnstileRef = ref<InstanceType<typeof TurnstileWidget> | null>(null);
-const resendTurnstileToken = ref<string>('');
-const showResendTurnstile = ref<boolean>(false);
+const turnstileRef = ref<InstanceType<typeof TurnstileWidget> | null>(null)
+const resendTurnstileToken = ref<string>('')
+const showResendTurnstile = ref<boolean>(false)
 
 const errors = ref({
   code: '',
-  turnstile: '',
-});
+  turnstile: ''
+})
 
 // ==================== Lifecycle ====================
 
 onMounted(async () => {
   // Load registration data from sessionStorage
-  const registerDataStr = sessionStorage.getItem('register_data');
+  const registerDataStr = sessionStorage.getItem('register_data')
   if (registerDataStr) {
     try {
-      const registerData = JSON.parse(registerDataStr);
-      email.value = registerData.email || '';
-      password.value = registerData.password || '';
-      initialTurnstileToken.value = registerData.turnstile_token || '';
-      hasRegisterData.value = !!(email.value && password.value);
+      const registerData = JSON.parse(registerDataStr)
+      email.value = registerData.email || ''
+      password.value = registerData.password || ''
+      initialTurnstileToken.value = registerData.turnstile_token || ''
+      hasRegisterData.value = !!(email.value && password.value)
     } catch {
-      hasRegisterData.value = false;
+      hasRegisterData.value = false
     }
   }
 
   // Load public settings
   try {
-    const settings = await getPublicSettings();
-    turnstileEnabled.value = settings.turnstile_enabled;
-    turnstileSiteKey.value = settings.turnstile_site_key || '';
-    siteName.value = settings.site_name || 'Sub2API';
+    const settings = await getPublicSettings()
+    turnstileEnabled.value = settings.turnstile_enabled
+    turnstileSiteKey.value = settings.turnstile_site_key || ''
+    siteName.value = settings.site_name || 'Sub2API'
   } catch (error) {
-    console.error('Failed to load public settings:', error);
+    console.error('Failed to load public settings:', error)
   }
 
   // Auto-send verification code if we have valid data
   if (hasRegisterData.value) {
-    await sendCode();
+    await sendCode()
   }
-});
+})
 
 onUnmounted(() => {
   if (countdownTimer) {
-    clearInterval(countdownTimer);
-    countdownTimer = null;
+    clearInterval(countdownTimer)
+    countdownTimer = null
   }
-});
+})
 
 // ==================== Countdown ====================
 
 function startCountdown(seconds: number): void {
-  countdown.value = seconds;
+  countdown.value = seconds
 
   if (countdownTimer) {
-    clearInterval(countdownTimer);
+    clearInterval(countdownTimer)
   }
 
   countdownTimer = setInterval(() => {
     if (countdown.value > 0) {
-      countdown.value--;
+      countdown.value--
     } else {
       if (countdownTimer) {
-        clearInterval(countdownTimer);
-        countdownTimer = null;
+        clearInterval(countdownTimer)
+        countdownTimer = null
       }
     }
-  }, 1000);
+  }, 1000)
 }
 
 // ==================== Turnstile Handlers ====================
 
 function onTurnstileVerify(token: string): void {
-  resendTurnstileToken.value = token;
-  errors.value.turnstile = '';
+  resendTurnstileToken.value = token
+  errors.value.turnstile = ''
 }
 
 function onTurnstileExpire(): void {
-  resendTurnstileToken.value = '';
-  errors.value.turnstile = 'Verification expired, please try again';
+  resendTurnstileToken.value = ''
+  errors.value.turnstile = 'Verification expired, please try again'
 }
 
 function onTurnstileError(): void {
-  resendTurnstileToken.value = '';
-  errors.value.turnstile = 'Verification failed, please try again';
+  resendTurnstileToken.value = ''
+  errors.value.turnstile = 'Verification failed, please try again'
 }
 
 // ==================== Send Code ====================
 
 async function sendCode(): Promise<void> {
-  isSendingCode.value = true;
-  errorMessage.value = '';
+  isSendingCode.value = true
+  errorMessage.value = ''
 
   try {
     const response = await sendVerifyCode({
       email: email.value,
       // 优先使用重发时新获取的 token（因为初始 token 可能已被使用）
-      turnstile_token: resendTurnstileToken.value || initialTurnstileToken.value || undefined,
-    });
+      turnstile_token: resendTurnstileToken.value || initialTurnstileToken.value || undefined
+    })
 
-    codeSent.value = true;
-    startCountdown(response.countdown);
+    codeSent.value = true
+    startCountdown(response.countdown)
 
     // Reset turnstile state（token 已使用，清除以避免重复使用）
-    initialTurnstileToken.value = '';
-    showResendTurnstile.value = false;
-    resendTurnstileToken.value = '';
-
+    initialTurnstileToken.value = ''
+    showResendTurnstile.value = false
+    resendTurnstileToken.value = ''
   } catch (error: unknown) {
-    const err = error as { message?: string; response?: { data?: { detail?: string } } };
+    const err = error as { message?: string; response?: { data?: { detail?: string } } }
 
     if (err.response?.data?.detail) {
-      errorMessage.value = err.response.data.detail;
+      errorMessage.value = err.response.data.detail
     } else if (err.message) {
-      errorMessage.value = err.message;
+      errorMessage.value = err.message
     } else {
-      errorMessage.value = 'Failed to send verification code. Please try again.';
+      errorMessage.value = 'Failed to send verification code. Please try again.'
     }
 
-    appStore.showError(errorMessage.value);
+    appStore.showError(errorMessage.value)
   } finally {
-    isSendingCode.value = false;
+    isSendingCode.value = false
   }
 }
 
@@ -328,43 +388,43 @@ async function sendCode(): Promise<void> {
 async function handleResendCode(): Promise<void> {
   // If turnstile is enabled and we haven't shown it yet, show it
   if (turnstileEnabled.value && !showResendTurnstile.value) {
-    showResendTurnstile.value = true;
-    return;
+    showResendTurnstile.value = true
+    return
   }
 
   // If turnstile is enabled but no token yet, wait
   if (turnstileEnabled.value && !resendTurnstileToken.value) {
-    errors.value.turnstile = 'Please complete the verification';
-    return;
+    errors.value.turnstile = 'Please complete the verification'
+    return
   }
 
-  await sendCode();
+  await sendCode()
 }
 
 function validateForm(): boolean {
-  errors.value.code = '';
+  errors.value.code = ''
 
   if (!verifyCode.value.trim()) {
-    errors.value.code = 'Verification code is required';
-    return false;
+    errors.value.code = 'Verification code is required'
+    return false
   }
 
   if (!/^\d{6}$/.test(verifyCode.value.trim())) {
-    errors.value.code = 'Please enter a valid 6-digit code';
-    return false;
+    errors.value.code = 'Please enter a valid 6-digit code'
+    return false
   }
 
-  return true;
+  return true
 }
 
 async function handleVerify(): Promise<void> {
-  errorMessage.value = '';
+  errorMessage.value = ''
 
   if (!validateForm()) {
-    return;
+    return
   }
 
-  isLoading.value = true;
+  isLoading.value = true
 
   try {
     // Register with verification code
@@ -372,40 +432,40 @@ async function handleVerify(): Promise<void> {
       email: email.value,
       password: password.value,
       verify_code: verifyCode.value.trim(),
-      turnstile_token: initialTurnstileToken.value || undefined,
-    });
+      turnstile_token: initialTurnstileToken.value || undefined
+    })
 
     // Clear session data
-    sessionStorage.removeItem('register_data');
+    sessionStorage.removeItem('register_data')
 
     // Show success toast
-    appStore.showSuccess('Account created successfully! Welcome to ' + siteName.value + '.');
+    appStore.showSuccess('Account created successfully! Welcome to ' + siteName.value + '.')
 
     // Redirect to dashboard
-    await router.push('/dashboard');
+    await router.push('/dashboard')
   } catch (error: unknown) {
-    const err = error as { message?: string; response?: { data?: { detail?: string } } };
+    const err = error as { message?: string; response?: { data?: { detail?: string } } }
 
     if (err.response?.data?.detail) {
-      errorMessage.value = err.response.data.detail;
+      errorMessage.value = err.response.data.detail
     } else if (err.message) {
-      errorMessage.value = err.message;
+      errorMessage.value = err.message
     } else {
-      errorMessage.value = 'Verification failed. Please try again.';
+      errorMessage.value = 'Verification failed. Please try again.'
     }
 
-    appStore.showError(errorMessage.value);
+    appStore.showError(errorMessage.value)
   } finally {
-    isLoading.value = false;
+    isLoading.value = false
   }
 }
 
 function handleBack(): void {
   // Clear session data
-  sessionStorage.removeItem('register_data');
+  sessionStorage.removeItem('register_data')
 
   // Go back to registration
-  router.push('/register');
+  router.push('/register')
 }
 </script>
 
diff --git a/frontend/src/views/auth/LoginView.vue b/frontend/src/views/auth/LoginView.vue
index a3871820..d06f604c 100644
--- a/frontend/src/views/auth/LoginView.vue
+++ b/frontend/src/views/auth/LoginView.vue
@@ -19,9 +19,19 @@
             {{ t('auth.emailLabel') }}
           </label>
           <div class="relative">
-            <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
-              <svg class="w-5 h-5 text-gray-400 dark:text-dark-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
+            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5">
+              <svg
+                class="h-5 w-5 text-gray-400 dark:text-dark-500"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
+                />
               </svg>
             </div>
             <input
@@ -47,9 +57,19 @@
             {{ t('auth.passwordLabel') }}
           </label>
           <div class="relative">
-            <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
-              <svg class="w-5 h-5 text-gray-400 dark:text-dark-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
+            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5">
+              <svg
+                class="h-5 w-5 text-gray-400 dark:text-dark-500"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
+                />
               </svg>
             </div>
             <input
@@ -66,14 +86,40 @@
             <button
               type="button"
               @click="showPassword = !showPassword"
-              class="absolute inset-y-0 right-0 pr-3.5 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-dark-300 transition-colors"
+              class="absolute inset-y-0 right-0 flex items-center pr-3.5 text-gray-400 transition-colors hover:text-gray-600 dark:hover:text-dark-300"
             >
-              <svg v-if="showPassword" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
+              <svg
+                v-if="showPassword"
+                class="h-5 w-5"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
+                />
               </svg>
-              <svg v-else class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
-                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+              <svg
+                v-else
+                class="h-5 w-5"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
+                />
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                />
               </svg>
             </button>
           </div>
@@ -91,7 +137,7 @@
             @expire="onTurnstileExpire"
             @error="onTurnstileError"
           />
-          <p v-if="errors.turnstile" class="input-error-text text-center mt-2">
+          <p v-if="errors.turnstile" class="input-error-text mt-2 text-center">
             {{ errors.turnstile }}
           </p>
         </div>
@@ -100,12 +146,22 @@
         <transition name="fade">
           <div
             v-if="errorMessage"
-            class="p-4 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800/50"
+            class="rounded-xl border border-red-200 bg-red-50 p-4 dark:border-red-800/50 dark:bg-red-900/20"
           >
             <div class="flex items-start gap-3">
               <div class="flex-shrink-0">
-                <svg class="w-5 h-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+                <svg
+                  class="h-5 w-5 text-red-500"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+                  />
                 </svg>
               </div>
               <p class="text-sm text-red-700 dark:text-red-400">
@@ -123,15 +179,37 @@
         >
           <svg
             v-if="isLoading"
-            class="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
+            class="-ml-1 mr-2 h-4 w-4 animate-spin text-white"
             fill="none"
             viewBox="0 0 24 24"
           >
-            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            <circle
+              class="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              stroke-width="4"
+            ></circle>
+            <path
+              class="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            ></path>
           </svg>
-          <svg v-else class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" />
+          <svg
+            v-else
+            class="mr-2 h-5 w-5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="1.5"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9"
+            />
           </svg>
           {{ isLoading ? t('auth.signingIn') : t('auth.signIn') }}
         </button>
@@ -144,7 +222,7 @@
         {{ t('auth.dontHaveAccount') }}
         <router-link
           to="/register"
-          class="font-medium text-primary-600 hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300 transition-colors"
+          class="font-medium text-primary-600 transition-colors hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300"
         >
           {{ t('auth.signUp') }}
         </router-link>
@@ -154,162 +232,162 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue';
-import { useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { AuthLayout } from '@/components/layout';
-import TurnstileWidget from '@/components/TurnstileWidget.vue';
-import { useAuthStore, useAppStore } from '@/stores';
-import { getPublicSettings } from '@/api/auth';
+import { ref, reactive, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { AuthLayout } from '@/components/layout'
+import TurnstileWidget from '@/components/TurnstileWidget.vue'
+import { useAuthStore, useAppStore } from '@/stores'
+import { getPublicSettings } from '@/api/auth'
 
-const { t } = useI18n();
+const { t } = useI18n()
 
 // ==================== Router & Stores ====================
 
-const router = useRouter();
-const authStore = useAuthStore();
-const appStore = useAppStore();
+const router = useRouter()
+const authStore = useAuthStore()
+const appStore = useAppStore()
 
 // ==================== State ====================
 
-const isLoading = ref<boolean>(false);
-const errorMessage = ref<string>('');
-const showPassword = ref<boolean>(false);
+const isLoading = ref<boolean>(false)
+const errorMessage = ref<string>('')
+const showPassword = ref<boolean>(false)
 
 // Public settings
-const turnstileEnabled = ref<boolean>(false);
-const turnstileSiteKey = ref<string>('');
+const turnstileEnabled = ref<boolean>(false)
+const turnstileSiteKey = ref<string>('')
 
 // Turnstile
-const turnstileRef = ref<InstanceType<typeof TurnstileWidget> | null>(null);
-const turnstileToken = ref<string>('');
+const turnstileRef = ref<InstanceType<typeof TurnstileWidget> | null>(null)
+const turnstileToken = ref<string>('')
 
 const formData = reactive({
   email: '',
-  password: '',
-});
+  password: ''
+})
 
 const errors = reactive({
   email: '',
   password: '',
-  turnstile: '',
-});
+  turnstile: ''
+})
 
 // ==================== Lifecycle ====================
 
 onMounted(async () => {
   try {
-    const settings = await getPublicSettings();
-    turnstileEnabled.value = settings.turnstile_enabled;
-    turnstileSiteKey.value = settings.turnstile_site_key || '';
+    const settings = await getPublicSettings()
+    turnstileEnabled.value = settings.turnstile_enabled
+    turnstileSiteKey.value = settings.turnstile_site_key || ''
   } catch (error) {
-    console.error('Failed to load public settings:', error);
+    console.error('Failed to load public settings:', error)
   }
-});
+})
 
 // ==================== Turnstile Handlers ====================
 
 function onTurnstileVerify(token: string): void {
-  turnstileToken.value = token;
-  errors.turnstile = '';
+  turnstileToken.value = token
+  errors.turnstile = ''
 }
 
 function onTurnstileExpire(): void {
-  turnstileToken.value = '';
-  errors.turnstile = 'Verification expired, please try again';
+  turnstileToken.value = ''
+  errors.turnstile = 'Verification expired, please try again'
 }
 
 function onTurnstileError(): void {
-  turnstileToken.value = '';
-  errors.turnstile = 'Verification failed, please try again';
+  turnstileToken.value = ''
+  errors.turnstile = 'Verification failed, please try again'
 }
 
 // ==================== Validation ====================
 
 function validateForm(): boolean {
   // Reset errors
-  errors.email = '';
-  errors.password = '';
-  errors.turnstile = '';
+  errors.email = ''
+  errors.password = ''
+  errors.turnstile = ''
 
-  let isValid = true;
+  let isValid = true
 
   // Email validation
   if (!formData.email.trim()) {
-    errors.email = 'Email is required';
-    isValid = false;
+    errors.email = 'Email is required'
+    isValid = false
   } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
-    errors.email = 'Please enter a valid email address';
-    isValid = false;
+    errors.email = 'Please enter a valid email address'
+    isValid = false
   }
 
   // Password validation
   if (!formData.password) {
-    errors.password = 'Password is required';
-    isValid = false;
+    errors.password = 'Password is required'
+    isValid = false
   } else if (formData.password.length < 6) {
-    errors.password = 'Password must be at least 6 characters';
-    isValid = false;
+    errors.password = 'Password must be at least 6 characters'
+    isValid = false
   }
 
   // Turnstile validation
   if (turnstileEnabled.value && !turnstileToken.value) {
-    errors.turnstile = 'Please complete the verification';
-    isValid = false;
+    errors.turnstile = 'Please complete the verification'
+    isValid = false
   }
 
-  return isValid;
+  return isValid
 }
 
 // ==================== Form Handlers ====================
 
 async function handleLogin(): Promise<void> {
   // Clear previous error
-  errorMessage.value = '';
+  errorMessage.value = ''
 
   // Validate form
   if (!validateForm()) {
-    return;
+    return
   }
 
-  isLoading.value = true;
+  isLoading.value = true
 
   try {
     // Call auth store login
     await authStore.login({
       email: formData.email,
       password: formData.password,
-      turnstile_token: turnstileEnabled.value ? turnstileToken.value : undefined,
-    });
+      turnstile_token: turnstileEnabled.value ? turnstileToken.value : undefined
+    })
 
     // Show success toast
-    appStore.showSuccess('Login successful! Welcome back.');
+    appStore.showSuccess('Login successful! Welcome back.')
 
     // Redirect to dashboard or intended route
-    const redirectTo = router.currentRoute.value.query.redirect as string || '/dashboard';
-    await router.push(redirectTo);
+    const redirectTo = (router.currentRoute.value.query.redirect as string) || '/dashboard'
+    await router.push(redirectTo)
   } catch (error: unknown) {
     // Reset Turnstile on error
     if (turnstileRef.value) {
-      turnstileRef.value.reset();
-      turnstileToken.value = '';
+      turnstileRef.value.reset()
+      turnstileToken.value = ''
     }
 
     // Handle login error
-    const err = error as { message?: string; response?: { data?: { detail?: string } } };
+    const err = error as { message?: string; response?: { data?: { detail?: string } } }
 
     if (err.response?.data?.detail) {
-      errorMessage.value = err.response.data.detail;
+      errorMessage.value = err.response.data.detail
     } else if (err.message) {
-      errorMessage.value = err.message;
+      errorMessage.value = err.message
     } else {
-      errorMessage.value = 'Login failed. Please check your credentials and try again.';
+      errorMessage.value = 'Login failed. Please check your credentials and try again.'
     }
 
     // Also show error toast
-    appStore.showError(errorMessage.value);
+    appStore.showError(errorMessage.value)
   } finally {
-    isLoading.value = false;
+    isLoading.value = false
   }
 }
 </script>
diff --git a/frontend/src/views/auth/README.md b/frontend/src/views/auth/README.md
index 8fcbe8da..65c3a190 100644
--- a/frontend/src/views/auth/README.md
+++ b/frontend/src/views/auth/README.md
@@ -9,6 +9,7 @@ This directory contains Vue 3 authentication views for the Sub2API frontend appl
 Login page for existing users to authenticate.
 
 **Features:**
+
 - Username and password inputs with validation
 - Remember me checkbox for persistent sessions
 - Form validation with real-time error display
@@ -18,26 +19,30 @@ Login page for existing users to authenticate.
 - Link to registration page for new users
 
 **Usage:**
+
 ```vue
 <template>
   <LoginView />
 </template>
 
 <script setup lang="ts">
-import { LoginView } from '@/views/auth';
+import { LoginView } from '@/views/auth'
 </script>
 ```
 
 **Route:**
+
 - Path: `/login`
 - Name: `Login`
 - Meta: `{ requiresAuth: false }`
 
 **Validation Rules:**
+
 - Username: Required, minimum 3 characters
 - Password: Required, minimum 6 characters
 
 **Behavior:**
+
 - Calls `authStore.login()` with credentials
 - Shows success toast on successful login
 - Shows error toast and inline error message on failure
@@ -49,6 +54,7 @@ import { LoginView } from '@/views/auth';
 Registration page for new users to create accounts.
 
 **Features:**
+
 - Username, email, password, and confirm password inputs
 - Comprehensive form validation
 - Password strength requirements (8+ characters, letters + numbers)
@@ -60,22 +66,25 @@ Registration page for new users to create accounts.
 - Link to login page for existing users
 
 **Usage:**
+
 ```vue
 <template>
   <RegisterView />
 </template>
 
 <script setup lang="ts">
-import { RegisterView } from '@/views/auth';
+import { RegisterView } from '@/views/auth'
 </script>
 ```
 
 **Route:**
+
 - Path: `/register`
 - Name: `Register`
 - Meta: `{ requiresAuth: false }`
 
 **Validation Rules:**
+
 - Username:
   - Required
   - 3-50 characters
@@ -92,6 +101,7 @@ import { RegisterView } from '@/views/auth';
   - Must match password
 
 **Behavior:**
+
 - Calls `authStore.register()` with user data
 - Shows success toast on successful registration
 - Shows error toast and inline error message on failure
@@ -131,6 +141,7 @@ Both views follow a consistent structure:
 ### State Management
 
 Both views use:
+
 - `useAuthStore()` - For authentication actions (login, register)
 - `useAppStore()` - For toast notifications and UI feedback
 - `useRouter()` - For navigation and redirects
@@ -138,12 +149,14 @@ Both views use:
 ### Validation Strategy
 
 **Client-side Validation:**
+
 - Real-time validation on form submission
 - Field-level error messages
 - Comprehensive validation rules
 - TypeScript type safety
 
 **Server-side Validation:**
+
 - Backend API validates all inputs
 - Error responses handled gracefully
 - User-friendly error messages displayed
@@ -151,6 +164,7 @@ Both views use:
 ### Styling
 
 **Design System:**
+
 - TailwindCSS utility classes
 - Consistent color scheme (indigo primary)
 - Responsive design
@@ -158,6 +172,7 @@ Both views use:
 - Loading states with spinner animations
 
 **Visual Feedback:**
+
 - Red border on invalid fields
 - Error messages below inputs
 - Global error banner for API errors
@@ -167,13 +182,16 @@ Both views use:
 ## Dependencies
 
 ### Components
+
 - `AuthLayout` - Layout wrapper for auth pages from `@/components/layout`
 
 ### Stores
+
 - `authStore` - Authentication state management from `@/stores/auth`
 - `appStore` - Application state and toasts from `@/stores/app`
 
 ### Libraries
+
 - Vue 3 Composition API
 - Vue Router for navigation
 - Pinia for state management
@@ -185,11 +203,11 @@ Both views use:
 
 ```typescript
 // User enters credentials
-formData.username = 'john_doe';
-formData.password = 'SecurePass123';
+formData.username = 'john_doe'
+formData.password = 'SecurePass123'
 
 // Submit form
-await handleLogin();
+await handleLogin()
 
 // On success:
 // - authStore.login() called
@@ -207,13 +225,13 @@ await handleLogin();
 
 ```typescript
 // User enters registration data
-formData.username = 'jane_smith';
-formData.email = 'jane@example.com';
-formData.password = 'SecurePass123';
-formData.confirmPassword = 'SecurePass123';
+formData.username = 'jane_smith'
+formData.email = 'jane@example.com'
+formData.password = 'SecurePass123'
+formData.confirmPassword = 'SecurePass123'
 
 // Submit form
-await handleRegister();
+await handleRegister()
 
 // On success:
 // - authStore.register() called
@@ -233,10 +251,10 @@ await handleRegister();
 
 ```typescript
 // Validation errors
-errors.username = 'Username must be at least 3 characters';
-errors.email = 'Please enter a valid email address';
-errors.password = 'Password must be at least 8 characters with letters and numbers';
-errors.confirmPassword = 'Passwords do not match';
+errors.username = 'Username must be at least 3 characters'
+errors.email = 'Please enter a valid email address'
+errors.password = 'Password must be at least 8 characters with letters and numbers'
+errors.confirmPassword = 'Passwords do not match'
 ```
 
 ### Server-side Errors
@@ -252,8 +270,8 @@ errors.confirmPassword = 'Passwords do not match';
 }
 
 // Displayed as:
-errorMessage.value = 'Username already exists';
-appStore.showError('Username already exists');
+errorMessage.value = 'Username already exists'
+appStore.showError('Username already exists')
 ```
 
 ## Accessibility
@@ -269,18 +287,21 @@ appStore.showError('Username already exists');
 ## Testing Considerations
 
 ### Unit Tests
+
 - Form validation logic
 - Error handling
 - State management
 - Router navigation
 
 ### Integration Tests
+
 - Full login flow
 - Full registration flow
 - Error scenarios
 - Redirect behavior
 
 ### E2E Tests
+
 - Complete user journeys
 - Form interactions
 - API integration
@@ -289,6 +310,7 @@ appStore.showError('Username already exists');
 ## Future Enhancements
 
 Potential improvements:
+
 - OAuth/SSO integration (Google, GitHub)
 - Two-factor authentication (2FA)
 - Password strength meter
diff --git a/frontend/src/views/auth/RegisterView.vue b/frontend/src/views/auth/RegisterView.vue
index 0d610562..2081cdba 100644
--- a/frontend/src/views/auth/RegisterView.vue
+++ b/frontend/src/views/auth/RegisterView.vue
@@ -12,11 +12,24 @@
       </div>
 
       <!-- Registration Disabled Message -->
-      <div v-if="!registrationEnabled && settingsLoaded" class="p-4 rounded-xl bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800/50">
+      <div
+        v-if="!registrationEnabled && settingsLoaded"
+        class="rounded-xl border border-amber-200 bg-amber-50 p-4 dark:border-amber-800/50 dark:bg-amber-900/20"
+      >
         <div class="flex items-start gap-3">
           <div class="flex-shrink-0">
-            <svg class="w-5 h-5 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+            <svg
+              class="h-5 w-5 text-amber-500"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="1.5"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+              />
             </svg>
           </div>
           <p class="text-sm text-amber-700 dark:text-amber-400">
@@ -33,9 +46,19 @@
             {{ t('auth.emailLabel') }}
           </label>
           <div class="relative">
-            <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
-              <svg class="w-5 h-5 text-gray-400 dark:text-dark-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
+            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5">
+              <svg
+                class="h-5 w-5 text-gray-400 dark:text-dark-500"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
+                />
               </svg>
             </div>
             <input
@@ -61,9 +84,19 @@
             {{ t('auth.passwordLabel') }}
           </label>
           <div class="relative">
-            <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
-              <svg class="w-5 h-5 text-gray-400 dark:text-dark-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
+            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5">
+              <svg
+                class="h-5 w-5 text-gray-400 dark:text-dark-500"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
+                />
               </svg>
             </div>
             <input
@@ -80,14 +113,40 @@
             <button
               type="button"
               @click="showPassword = !showPassword"
-              class="absolute inset-y-0 right-0 pr-3.5 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-dark-300 transition-colors"
+              class="absolute inset-y-0 right-0 flex items-center pr-3.5 text-gray-400 transition-colors hover:text-gray-600 dark:hover:text-dark-300"
             >
-              <svg v-if="showPassword" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
+              <svg
+                v-if="showPassword"
+                class="h-5 w-5"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
+                />
               </svg>
-              <svg v-else class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
-                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+              <svg
+                v-else
+                class="h-5 w-5"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
+                />
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                />
               </svg>
             </button>
           </div>
@@ -108,7 +167,7 @@
             @expire="onTurnstileExpire"
             @error="onTurnstileError"
           />
-          <p v-if="errors.turnstile" class="input-error-text text-center mt-2">
+          <p v-if="errors.turnstile" class="input-error-text mt-2 text-center">
             {{ errors.turnstile }}
           </p>
         </div>
@@ -117,12 +176,22 @@
         <transition name="fade">
           <div
             v-if="errorMessage"
-            class="p-4 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800/50"
+            class="rounded-xl border border-red-200 bg-red-50 p-4 dark:border-red-800/50 dark:bg-red-900/20"
           >
             <div class="flex items-start gap-3">
               <div class="flex-shrink-0">
-                <svg class="w-5 h-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+                <svg
+                  class="h-5 w-5 text-red-500"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+                  />
                 </svg>
               </div>
               <p class="text-sm text-red-700 dark:text-red-400">
@@ -140,17 +209,45 @@
         >
           <svg
             v-if="isLoading"
-            class="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
+            class="-ml-1 mr-2 h-4 w-4 animate-spin text-white"
             fill="none"
             viewBox="0 0 24 24"
           >
-            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            <circle
+              class="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              stroke-width="4"
+            ></circle>
+            <path
+              class="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            ></path>
           </svg>
-          <svg v-else class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M19 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zM4 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318 12.318 0 0110.374 21c-2.331 0-4.512-.645-6.374-1.766z" />
+          <svg
+            v-else
+            class="mr-2 h-5 w-5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="1.5"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M19 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zM4 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318 12.318 0 0110.374 21c-2.331 0-4.512-.645-6.374-1.766z"
+            />
           </svg>
-          {{ isLoading ? t('auth.processing') : (emailVerifyEnabled ? t('auth.continue') : t('auth.createAccount')) }}
+          {{
+            isLoading
+              ? t('auth.processing')
+              : emailVerifyEnabled
+                ? t('auth.continue')
+                : t('auth.createAccount')
+          }}
         </button>
       </form>
     </div>
@@ -161,7 +258,7 @@
         {{ t('auth.alreadyHaveAccount') }}
         <router-link
           to="/login"
-          class="font-medium text-primary-600 hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300 transition-colors"
+          class="font-medium text-primary-600 transition-colors hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300"
         >
           {{ t('auth.signIn') }}
         </router-link>
@@ -171,189 +268,192 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue';
-import { useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { AuthLayout } from '@/components/layout';
-import TurnstileWidget from '@/components/TurnstileWidget.vue';
-import { useAuthStore, useAppStore } from '@/stores';
-import { getPublicSettings } from '@/api/auth';
+import { ref, reactive, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { AuthLayout } from '@/components/layout'
+import TurnstileWidget from '@/components/TurnstileWidget.vue'
+import { useAuthStore, useAppStore } from '@/stores'
+import { getPublicSettings } from '@/api/auth'
 
-const { t } = useI18n();
+const { t } = useI18n()
 
 // ==================== Router & Stores ====================
 
-const router = useRouter();
-const authStore = useAuthStore();
-const appStore = useAppStore();
+const router = useRouter()
+const authStore = useAuthStore()
+const appStore = useAppStore()
 
 // ==================== State ====================
 
-const isLoading = ref<boolean>(false);
-const settingsLoaded = ref<boolean>(false);
-const errorMessage = ref<string>('');
-const showPassword = ref<boolean>(false);
+const isLoading = ref<boolean>(false)
+const settingsLoaded = ref<boolean>(false)
+const errorMessage = ref<string>('')
+const showPassword = ref<boolean>(false)
 
 // Public settings
-const registrationEnabled = ref<boolean>(true);
-const emailVerifyEnabled = ref<boolean>(false);
-const turnstileEnabled = ref<boolean>(false);
-const turnstileSiteKey = ref<string>('');
-const siteName = ref<string>('Sub2API');
+const registrationEnabled = ref<boolean>(true)
+const emailVerifyEnabled = ref<boolean>(false)
+const turnstileEnabled = ref<boolean>(false)
+const turnstileSiteKey = ref<string>('')
+const siteName = ref<string>('Sub2API')
 
 // Turnstile
-const turnstileRef = ref<InstanceType<typeof TurnstileWidget> | null>(null);
-const turnstileToken = ref<string>('');
+const turnstileRef = ref<InstanceType<typeof TurnstileWidget> | null>(null)
+const turnstileToken = ref<string>('')
 
 const formData = reactive({
   email: '',
-  password: '',
-});
+  password: ''
+})
 
 const errors = reactive({
   email: '',
   password: '',
-  turnstile: '',
-});
+  turnstile: ''
+})
 
 // ==================== Lifecycle ====================
 
 onMounted(async () => {
   try {
-    const settings = await getPublicSettings();
-    registrationEnabled.value = settings.registration_enabled;
-    emailVerifyEnabled.value = settings.email_verify_enabled;
-    turnstileEnabled.value = settings.turnstile_enabled;
-    turnstileSiteKey.value = settings.turnstile_site_key || '';
-    siteName.value = settings.site_name || 'Sub2API';
+    const settings = await getPublicSettings()
+    registrationEnabled.value = settings.registration_enabled
+    emailVerifyEnabled.value = settings.email_verify_enabled
+    turnstileEnabled.value = settings.turnstile_enabled
+    turnstileSiteKey.value = settings.turnstile_site_key || ''
+    siteName.value = settings.site_name || 'Sub2API'
   } catch (error) {
-    console.error('Failed to load public settings:', error);
+    console.error('Failed to load public settings:', error)
   } finally {
-    settingsLoaded.value = true;
+    settingsLoaded.value = true
   }
-});
+})
 
 // ==================== Turnstile Handlers ====================
 
 function onTurnstileVerify(token: string): void {
-  turnstileToken.value = token;
-  errors.turnstile = '';
+  turnstileToken.value = token
+  errors.turnstile = ''
 }
 
 function onTurnstileExpire(): void {
-  turnstileToken.value = '';
-  errors.turnstile = 'Verification expired, please try again';
+  turnstileToken.value = ''
+  errors.turnstile = 'Verification expired, please try again'
 }
 
 function onTurnstileError(): void {
-  turnstileToken.value = '';
-  errors.turnstile = 'Verification failed, please try again';
+  turnstileToken.value = ''
+  errors.turnstile = 'Verification failed, please try again'
 }
 
 // ==================== Validation ====================
 
 function validateEmail(email: string): boolean {
-  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-  return emailRegex.test(email);
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+  return emailRegex.test(email)
 }
 
 function validateForm(): boolean {
   // Reset errors
-  errors.email = '';
-  errors.password = '';
-  errors.turnstile = '';
+  errors.email = ''
+  errors.password = ''
+  errors.turnstile = ''
 
-  let isValid = true;
+  let isValid = true
 
   // Email validation
   if (!formData.email.trim()) {
-    errors.email = 'Email is required';
-    isValid = false;
+    errors.email = 'Email is required'
+    isValid = false
   } else if (!validateEmail(formData.email)) {
-    errors.email = 'Please enter a valid email address';
-    isValid = false;
+    errors.email = 'Please enter a valid email address'
+    isValid = false
   }
 
   // Password validation
   if (!formData.password) {
-    errors.password = 'Password is required';
-    isValid = false;
+    errors.password = 'Password is required'
+    isValid = false
   } else if (formData.password.length < 6) {
-    errors.password = 'Password must be at least 6 characters';
-    isValid = false;
+    errors.password = 'Password must be at least 6 characters'
+    isValid = false
   }
 
   // Turnstile validation
   if (turnstileEnabled.value && !turnstileToken.value) {
-    errors.turnstile = 'Please complete the verification';
-    isValid = false;
+    errors.turnstile = 'Please complete the verification'
+    isValid = false
   }
 
-  return isValid;
+  return isValid
 }
 
 // ==================== Form Handlers ====================
 
 async function handleRegister(): Promise<void> {
   // Clear previous error
-  errorMessage.value = '';
+  errorMessage.value = ''
 
   // Validate form
   if (!validateForm()) {
-    return;
+    return
   }
 
-  isLoading.value = true;
+  isLoading.value = true
 
   try {
     // If email verification is enabled, redirect to verification page
     if (emailVerifyEnabled.value) {
       // Store registration data in sessionStorage
-      sessionStorage.setItem('register_data', JSON.stringify({
-        email: formData.email,
-        password: formData.password,
-        turnstile_token: turnstileToken.value,
-      }));
+      sessionStorage.setItem(
+        'register_data',
+        JSON.stringify({
+          email: formData.email,
+          password: formData.password,
+          turnstile_token: turnstileToken.value
+        })
+      )
 
       // Navigate to email verification page
-      await router.push('/email-verify');
-      return;
+      await router.push('/email-verify')
+      return
     }
 
     // Otherwise, directly register
     await authStore.register({
       email: formData.email,
       password: formData.password,
-      turnstile_token: turnstileEnabled.value ? turnstileToken.value : undefined,
-    });
+      turnstile_token: turnstileEnabled.value ? turnstileToken.value : undefined
+    })
 
     // Show success toast
-    appStore.showSuccess('Account created successfully! Welcome to ' + siteName.value + '.');
+    appStore.showSuccess('Account created successfully! Welcome to ' + siteName.value + '.')
 
     // Redirect to dashboard
-    await router.push('/dashboard');
+    await router.push('/dashboard')
   } catch (error: unknown) {
     // Reset Turnstile on error
     if (turnstileRef.value) {
-      turnstileRef.value.reset();
-      turnstileToken.value = '';
+      turnstileRef.value.reset()
+      turnstileToken.value = ''
     }
 
     // Handle registration error
-    const err = error as { message?: string; response?: { data?: { detail?: string } } };
+    const err = error as { message?: string; response?: { data?: { detail?: string } } }
 
     if (err.response?.data?.detail) {
-      errorMessage.value = err.response.data.detail;
+      errorMessage.value = err.response.data.detail
     } else if (err.message) {
-      errorMessage.value = err.message;
+      errorMessage.value = err.message
     } else {
-      errorMessage.value = 'Registration failed. Please try again.';
+      errorMessage.value = 'Registration failed. Please try again.'
     }
 
     // Also show error toast
-    appStore.showError(errorMessage.value);
+    appStore.showError(errorMessage.value)
   } finally {
-    isLoading.value = false;
+    isLoading.value = false
   }
 }
 </script>
diff --git a/frontend/src/views/auth/USAGE_EXAMPLES.md b/frontend/src/views/auth/USAGE_EXAMPLES.md
index fb5e900b..735dbe13 100644
--- a/frontend/src/views/auth/USAGE_EXAMPLES.md
+++ b/frontend/src/views/auth/USAGE_EXAMPLES.md
@@ -75,43 +75,43 @@ This document provides practical examples of how to use the authentication views
 
 ```typescript
 // Method 1: Direct import
-import LoginView from '@/views/auth/LoginView.vue';
-import RegisterView from '@/views/auth/RegisterView.vue';
+import LoginView from '@/views/auth/LoginView.vue'
+import RegisterView from '@/views/auth/RegisterView.vue'
 
 // Method 2: Named exports from index
-import { LoginView, RegisterView } from '@/views/auth';
+import { LoginView, RegisterView } from '@/views/auth'
 
 // Method 3: Lazy loading (recommended for routes)
-const LoginView = () => import('@/views/auth/LoginView.vue');
-const RegisterView = () => import('@/views/auth/RegisterView.vue');
+const LoginView = () => import('@/views/auth/LoginView.vue')
+const RegisterView = () => import('@/views/auth/RegisterView.vue')
 ```
 
 ### Using in Router
 
 ```typescript
-import { createRouter, createWebHistory } from 'vue-router';
+import { createRouter, createWebHistory } from 'vue-router'
 
 const routes = [
   {
     path: '/login',
     name: 'Login',
     component: () => import('@/views/auth/LoginView.vue'),
-    meta: { requiresAuth: false },
+    meta: { requiresAuth: false }
   },
   {
     path: '/register',
     name: 'Register',
     component: () => import('@/views/auth/RegisterView.vue'),
-    meta: { requiresAuth: false },
-  },
-];
+    meta: { requiresAuth: false }
+  }
+]
 
 const router = createRouter({
   history: createWebHistory(),
-  routes,
-});
+  routes
+})
 
-export default router;
+export default router
 ```
 
 ### Navigation to Auth Views
@@ -142,13 +142,13 @@ router.push({
 ### Programmatic Auth Flow
 
 ```typescript
-import { useAuthStore } from '@/stores';
-import { useAppStore } from '@/stores';
-import { useRouter } from 'vue-router';
+import { useAuthStore } from '@/stores'
+import { useAppStore } from '@/stores'
+import { useRouter } from 'vue-router'
 
-const authStore = useAuthStore();
-const appStore = useAppStore();
-const router = useRouter();
+const authStore = useAuthStore()
+const appStore = useAppStore()
+const router = useRouter()
 
 // Login
 async function login() {
@@ -156,12 +156,12 @@ async function login() {
     await authStore.login({
       username: 'john_doe',
       password: 'MySecurePass123'
-    });
+    })
 
-    appStore.showSuccess('Login successful!');
-    router.push('/dashboard');
+    appStore.showSuccess('Login successful!')
+    router.push('/dashboard')
   } catch (error) {
-    appStore.showError('Login failed. Please check your credentials.');
+    appStore.showError('Login failed. Please check your credentials.')
   }
 }
 
@@ -172,12 +172,12 @@ async function register() {
       username: 'jane_smith',
       email: 'jane@example.com',
       password: 'SecurePass123'
-    });
+    })
 
-    appStore.showSuccess('Account created successfully!');
-    router.push('/dashboard');
+    appStore.showSuccess('Account created successfully!')
+    router.push('/dashboard')
   } catch (error) {
-    appStore.showError('Registration failed. Please try again.');
+    appStore.showError('Registration failed. Please try again.')
   }
 }
 ```
@@ -236,7 +236,7 @@ async function register() {
 {
   response: {
     data: {
-      detail: "Invalid username or password"
+      detail: 'Invalid username or password'
     }
   }
 }
@@ -244,12 +244,13 @@ async function register() {
 
 // Example 3: Network error
 {
-  message: "Network Error"
+  message: 'Network Error'
 }
 // Displayed: "Network Error" + Error toast
 
 // Example 4: Unknown error
-{}
+{
+}
 // Displayed: "Login failed. Please check your credentials and try again." (default)
 ```
 
@@ -258,10 +259,10 @@ async function register() {
 ```typescript
 // Multiple validation errors displayed simultaneously
 errors = {
-  username: "Username must be at least 3 characters",
-  email: "Please enter a valid email address",
-  password: "Password must be at least 8 characters with letters and numbers",
-  confirmPassword: "Passwords do not match"
+  username: 'Username must be at least 3 characters',
+  email: 'Please enter a valid email address',
+  password: 'Password must be at least 8 characters with letters and numbers',
+  confirmPassword: 'Passwords do not match'
 }
 
 // Each error appears below its respective input field with red styling
@@ -272,86 +273,86 @@ errors = {
 ### Unit Test: Login View
 
 ```typescript
-import { describe, it, expect, vi } from 'vitest';
-import { mount } from '@vue/test-utils';
-import { createPinia } from 'pinia';
-import LoginView from '@/views/auth/LoginView.vue';
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createPinia } from 'pinia'
+import LoginView from '@/views/auth/LoginView.vue'
 
 describe('LoginView', () => {
   it('validates required fields', async () => {
     const wrapper = mount(LoginView, {
       global: {
-        plugins: [createPinia()],
-      },
-    });
+        plugins: [createPinia()]
+      }
+    })
 
     // Submit empty form
-    await wrapper.find('form').trigger('submit');
+    await wrapper.find('form').trigger('submit')
 
     // Check for validation errors
-    expect(wrapper.text()).toContain('Username is required');
-    expect(wrapper.text()).toContain('Password is required');
-  });
+    expect(wrapper.text()).toContain('Username is required')
+    expect(wrapper.text()).toContain('Password is required')
+  })
 
   it('calls authStore.login on valid submission', async () => {
     const wrapper = mount(LoginView, {
       global: {
-        plugins: [createPinia()],
-      },
-    });
+        plugins: [createPinia()]
+      }
+    })
 
     // Fill in form
-    await wrapper.find('#username').setValue('john_doe');
-    await wrapper.find('#password').setValue('SecurePass123');
+    await wrapper.find('#username').setValue('john_doe')
+    await wrapper.find('#password').setValue('SecurePass123')
 
     // Submit form
-    await wrapper.find('form').trigger('submit');
+    await wrapper.find('form').trigger('submit')
 
     // Verify authStore.login was called
     // (mock implementation needed)
-  });
-});
+  })
+})
 ```
 
 ### E2E Test: Registration Flow
 
 ```typescript
-import { test, expect } from '@playwright/test';
+import { test, expect } from '@playwright/test'
 
 test('user can register successfully', async ({ page }) => {
   // Navigate to register page
-  await page.goto('/register');
+  await page.goto('/register')
 
   // Fill in registration form
-  await page.fill('#username', 'new_user');
-  await page.fill('#email', 'new_user@example.com');
-  await page.fill('#password', 'SecurePass123');
-  await page.fill('#confirmPassword', 'SecurePass123');
+  await page.fill('#username', 'new_user')
+  await page.fill('#email', 'new_user@example.com')
+  await page.fill('#password', 'SecurePass123')
+  await page.fill('#confirmPassword', 'SecurePass123')
 
   // Submit form
-  await page.click('button[type="submit"]');
+  await page.click('button[type="submit"]')
 
   // Wait for redirect to dashboard
-  await page.waitForURL('/dashboard');
+  await page.waitForURL('/dashboard')
 
   // Verify success toast appears
-  await expect(page.locator('.toast-success')).toBeVisible();
-  await expect(page.locator('.toast-success')).toContainText('Account created successfully');
-});
+  await expect(page.locator('.toast-success')).toBeVisible()
+  await expect(page.locator('.toast-success')).toContainText('Account created successfully')
+})
 
 test('shows validation errors for invalid inputs', async ({ page }) => {
-  await page.goto('/register');
+  await page.goto('/register')
 
   // Enter mismatched passwords
-  await page.fill('#password', 'SecurePass123');
-  await page.fill('#confirmPassword', 'DifferentPass');
+  await page.fill('#password', 'SecurePass123')
+  await page.fill('#confirmPassword', 'DifferentPass')
 
   // Submit form
-  await page.click('button[type="submit"]');
+  await page.click('button[type="submit"]')
 
   // Verify error message
-  await expect(page.locator('text=Passwords do not match')).toBeVisible();
-});
+  await expect(page.locator('text=Passwords do not match')).toBeVisible()
+})
 ```
 
 ## Integration with Navigation Guards
@@ -359,15 +360,15 @@ test('shows validation errors for invalid inputs', async ({ page }) => {
 ### Router Guard Example
 
 ```typescript
-import { useAuthStore } from '@/stores';
+import { useAuthStore } from '@/stores'
 
 router.beforeEach((to, from, next) => {
-  const authStore = useAuthStore();
+  const authStore = useAuthStore()
 
   // Redirect authenticated users away from auth pages
   if (authStore.isAuthenticated && (to.path === '/login' || to.path === '/register')) {
-    next('/dashboard');
-    return;
+    next('/dashboard')
+    return
   }
 
   // Redirect unauthenticated users to login
@@ -375,12 +376,12 @@ router.beforeEach((to, from, next) => {
     next({
       path: '/login',
       query: { redirect: to.fullPath }
-    });
-    return;
+    })
+    return
   }
 
-  next();
-});
+  next()
+})
 ```
 
 ## Customization Examples
@@ -393,16 +394,16 @@ async function handleLogin(): Promise<void> {
   try {
     await authStore.login({
       username: formData.username,
-      password: formData.password,
-    });
+      password: formData.password
+    })
 
-    appStore.showSuccess('Login successful!');
+    appStore.showSuccess('Login successful!')
 
     // Custom redirect logic
-    const isAdmin = authStore.isAdmin;
-    const redirectTo = isAdmin ? '/admin/dashboard' : '/dashboard';
+    const isAdmin = authStore.isAdmin
+    const redirectTo = isAdmin ? '/admin/dashboard' : '/dashboard'
 
-    await router.push(redirectTo);
+    await router.push(redirectTo)
   } catch (error) {
     // Error handling...
   }
@@ -414,19 +415,20 @@ async function handleLogin(): Promise<void> {
 ```typescript
 // Custom password strength validation
 function validatePasswordStrength(password: string): boolean {
-  const hasMinLength = password.length >= 12;
-  const hasUpperCase = /[A-Z]/.test(password);
-  const hasLowerCase = /[a-z]/.test(password);
-  const hasNumber = /[0-9]/.test(password);
-  const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password);
+  const hasMinLength = password.length >= 12
+  const hasUpperCase = /[A-Z]/.test(password)
+  const hasLowerCase = /[a-z]/.test(password)
+  const hasNumber = /[0-9]/.test(password)
+  const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password)
 
-  return hasMinLength && hasUpperCase && hasLowerCase && hasNumber && hasSpecialChar;
+  return hasMinLength && hasUpperCase && hasLowerCase && hasNumber && hasSpecialChar
 }
 
 // Use in validation
 if (!validatePasswordStrength(formData.password)) {
-  errors.password = 'Password must be at least 12 characters with uppercase, lowercase, numbers, and special characters';
-  isValid = false;
+  errors.password =
+    'Password must be at least 12 characters with uppercase, lowercase, numbers, and special characters'
+  isValid = false
 }
 ```
 
@@ -439,26 +441,27 @@ async function handleRegister(): Promise<void> {
     await authStore.register({
       username: formData.username,
       email: formData.email,
-      password: formData.password,
-    });
+      password: formData.password
+    })
 
-    appStore.showSuccess('Account created successfully!');
-    await router.push('/dashboard');
+    appStore.showSuccess('Account created successfully!')
+    await router.push('/dashboard')
   } catch (error: unknown) {
-    const err = error as { response?: { status?: number; data?: { detail?: string } } };
+    const err = error as { response?: { status?: number; data?: { detail?: string } } }
 
     // Custom error handling based on status code
     if (err.response?.status === 409) {
-      errorMessage.value = 'This username or email is already registered. Please use a different one.';
+      errorMessage.value =
+        'This username or email is already registered. Please use a different one.'
     } else if (err.response?.status === 422) {
-      errorMessage.value = 'Invalid input. Please check your information and try again.';
+      errorMessage.value = 'Invalid input. Please check your information and try again.'
     } else if (err.response?.status === 500) {
-      errorMessage.value = 'Server error. Please try again later.';
+      errorMessage.value = 'Server error. Please try again later.'
     } else {
-      errorMessage.value = err.response?.data?.detail || 'Registration failed. Please try again.';
+      errorMessage.value = err.response?.data?.detail || 'Registration failed. Please try again.'
     }
 
-    appStore.showError(errorMessage.value);
+    appStore.showError(errorMessage.value)
   }
 }
 ```
@@ -483,9 +486,7 @@ async function handleRegister(): Promise<void> {
 
 ```html
 <!-- Proper labels for screen readers -->
-<label for="username" class="block text-sm font-medium text-gray-700 mb-1">
-  Username
-</label>
+<label for="username" class="mb-1 block text-sm font-medium text-gray-700"> Username </label>
 <input
   id="username"
   type="text"
@@ -548,10 +549,10 @@ import LoginView from '@/views/auth/LoginView.vue'; // ❌ Eager loaded
 ```typescript
 // Solution: Initialize auth state on app mount
 // In main.ts or App.vue
-import { useAuthStore } from '@/stores';
+import { useAuthStore } from '@/stores'
 
-const authStore = useAuthStore();
-authStore.checkAuth(); // Restore auth from localStorage
+const authStore = useAuthStore()
+authStore.checkAuth() // Restore auth from localStorage
 ```
 
 ### Issue: Redirect loop after login
@@ -559,12 +560,12 @@ authStore.checkAuth(); // Restore auth from localStorage
 ```typescript
 // Solution: Check router guard logic
 router.beforeEach((to, from, next) => {
-  const authStore = useAuthStore();
+  const authStore = useAuthStore()
 
   // ✅ Correct: Check specific routes
   if (authStore.isAuthenticated && (to.path === '/login' || to.path === '/register')) {
-    next('/dashboard');
-    return;
+    next('/dashboard')
+    return
   }
 
   // ❌ Wrong: Blanket redirect
@@ -572,8 +573,8 @@ router.beforeEach((to, from, next) => {
   //   next('/dashboard'); // This causes loops!
   // }
 
-  next();
-});
+  next()
+})
 ```
 
 ### Issue: Form not clearing after successful submission
diff --git a/frontend/src/views/auth/VISUAL_GUIDE.md b/frontend/src/views/auth/VISUAL_GUIDE.md
index d55a2ca1..a978b731 100644
--- a/frontend/src/views/auth/VISUAL_GUIDE.md
+++ b/frontend/src/views/auth/VISUAL_GUIDE.md
@@ -235,11 +235,13 @@ Centered: Both horizontally and vertically
 ## Color Palette
 
 ### Primary Colors
+
 - **Indigo-600**: `#4F46E5` - Primary buttons, links, brand color
 - **Indigo-700**: `#4338CA` - Button hover state
 - **Indigo-500**: `#6366F1` - Focus ring
 
 ### Neutral Colors
+
 - **Gray-900**: `#111827` - Headings
 - **Gray-700**: `#374151` - Labels
 - **Gray-600**: `#4B5563` - Body text
@@ -249,16 +251,19 @@ Centered: Both horizontally and vertically
 - **White**: `#FFFFFF` - Card backgrounds
 
 ### Error Colors
+
 - **Red-600**: `#DC2626` - Error text
 - **Red-500**: `#EF4444` - Error border, focus ring
 - **Red-50**: `#FEF2F2` - Error banner background
 - **Red-200**: `#FECACA` - Error banner border
 
 ### Success Colors
+
 - **Green-600**: `#16A34A` - Success text
 - **Green-50**: `#F0FDF4` - Success banner background
 
 ### Background Gradient
+
 - **From**: Indigo-100 (`#E0E7FF`)
 - **Via**: White (`#FFFFFF`)
 - **To**: Purple-100 (`#F3E8FF`)
@@ -266,9 +271,11 @@ Centered: Both horizontally and vertically
 ## Typography
 
 ### Font Family
+
 - **Default**: System font stack (`ui-sans-serif, system-ui, -apple-system, ...`)
 
 ### Font Sizes
+
 - **Headings (h2)**: `1.5rem` (24px), `font-bold`
 - **Body**: `0.875rem` (14px), `font-normal`
 - **Labels**: `0.875rem` (14px), `font-medium`
@@ -276,6 +283,7 @@ Centered: Both horizontally and vertically
 - **Error text**: `0.875rem` (14px), `font-normal`
 
 ### Line Heights
+
 - **Headings**: `1.5`
 - **Body**: `1.5`
 - **Helper text**: `1.25`
@@ -283,16 +291,19 @@ Centered: Both horizontally and vertically
 ## Spacing
 
 ### Card Spacing
+
 - **Padding**: `2rem` (32px) all sides
 - **Gap between sections**: `1.5rem` (24px)
 - **Gap between fields**: `1rem` (16px)
 
 ### Input Spacing
+
 - **Padding**: `0.5rem 1rem` (8px 16px)
 - **Label margin-bottom**: `0.25rem` (4px)
 - **Error text margin-top**: `0.25rem` (4px)
 
 ### Button Spacing
+
 - **Padding**: `0.5rem 1rem` (8px 16px)
 - **Margin-top**: `1rem` (16px)
 
@@ -301,18 +312,21 @@ Centered: Both horizontally and vertically
 ### Input States
 
 **Default:**
+
 ```css
 border: 1px solid #D1D5DB (gray-300)
 focus: 2px ring #6366F1 (indigo-500)
 ```
 
 **Error:**
+
 ```css
 border: 1px solid #EF4444 (red-500)
 focus: 2px ring #EF4444 (red-500)
 ```
 
 **Disabled:**
+
 ```css
 background: #F3F4F6 (gray-100)
 cursor: not-allowed
@@ -322,6 +336,7 @@ opacity: 0.6
 ### Button States
 
 **Default:**
+
 ```css
 background: #4F46E5 (indigo-600)
 text: #FFFFFF (white)
@@ -329,24 +344,28 @@ shadow: shadow-sm
 ```
 
 **Hover:**
+
 ```css
 background: #4338CA (indigo-700)
 transition: colors 150ms
 ```
 
 **Focus:**
+
 ```css
 outline: none
 ring: 2px offset-2 #6366F1 (indigo-500)
 ```
 
 **Disabled:**
+
 ```css
 opacity: 0.5
 cursor: not-allowed
 ```
 
 **Loading:**
+
 ```css
 opacity: 0.5
 cursor: not-allowed
@@ -356,12 +375,14 @@ cursor: not-allowed
 ### Link States
 
 **Default:**
+
 ```css
 color: #4F46E5 (indigo-600)
 font-weight: 500 (medium)
 ```
 
 **Hover:**
+
 ```css
 color: #6366F1 (indigo-500)
 transition: colors 150ms
@@ -372,6 +393,7 @@ transition: colors 150ms
 ### Breakpoints
 
 **Mobile (< 640px):**
+
 ```
 - Full width container
 - Padding: 1rem (16px)
@@ -379,6 +401,7 @@ transition: colors 150ms
 ```
 
 **Tablet (640px - 768px):**
+
 ```
 - Max width: 28rem (448px)
 - Centered layout
@@ -386,6 +409,7 @@ transition: colors 150ms
 ```
 
 **Desktop (> 768px):**
+
 ```
 - Max width: 28rem (448px)
 - Centered layout
@@ -404,20 +428,27 @@ transition: colors 150ms
 ## Animations
 
 ### Transitions
+
 - Color changes: `150ms ease-in-out`
 - Opacity changes: `150ms ease-in-out`
 - Transform: `150ms ease-in-out`
 
 ### Loading Spinner
+
 ```css
 @keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
 animation: spin 1s linear infinite;
 ```
 
 ### Toast Animations
+
 - Enter: Slide in from right + fade in
 - Exit: Slide out to right + fade out
 - Duration: 300ms
@@ -425,24 +456,28 @@ animation: spin 1s linear infinite;
 ## Accessibility Features
 
 ### Visual Indicators
+
 - Clear focus states (2px ring)
 - Error states (red border + red text)
 - Loading states (spinner + text)
 - Success states (green toast)
 
 ### Color Contrast
+
 - Text on white: > 7:1 (AAA)
 - Labels on white: > 4.5:1 (AA)
 - Buttons: > 4.5:1 (AA)
 - Error text: > 4.5:1 (AA)
 
 ### Interactive Elements
+
 - Minimum size: 44x44px (mobile)
 - Clear hover states
 - Distinct disabled states
 - Keyboard accessible
 
 ### Screen Reader Support
+
 - Proper labels on all inputs
 - ARIA attributes where needed
 - Error announcements
@@ -451,6 +486,7 @@ animation: spin 1s linear infinite;
 ## Icons
 
 ### Loading Spinner
+
 ```svg
 <svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
   <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
@@ -459,6 +495,7 @@ animation: spin 1s linear infinite;
 ```
 
 ### Error Icon
+
 ```svg
 <svg class="h-5 w-5 text-red-400" fill="currentColor" viewBox="0 0 20 20">
   <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
@@ -468,6 +505,7 @@ animation: spin 1s linear infinite;
 ## Browser Compatibility
 
 ### Supported Browsers
+
 - Chrome/Edge: Latest 2 versions
 - Firefox: Latest 2 versions
 - Safari: Latest 2 versions
@@ -475,6 +513,7 @@ animation: spin 1s linear infinite;
 - Chrome Mobile: Latest 2 versions
 
 ### CSS Features Used
+
 - Flexbox (full support)
 - CSS Grid (full support)
 - CSS Transitions (full support)
@@ -482,6 +521,7 @@ animation: spin 1s linear infinite;
 - Gradient backgrounds (full support)
 
 ### JavaScript Features Used
+
 - ES2015+ syntax
 - Async/await
 - Optional chaining
@@ -495,6 +535,7 @@ animation: spin 1s linear infinite;
 ## Dark Mode Considerations
 
 **Future Enhancement:**
+
 - Dark mode toggle in user preferences
 - System preference detection
 - Persistent dark mode setting
@@ -510,6 +551,7 @@ dark:border-gray-700
 ## Performance Metrics
 
 ### Target Metrics
+
 - First Contentful Paint (FCP): < 1s
 - Largest Contentful Paint (LCP): < 2.5s
 - Time to Interactive (TTI): < 3s
@@ -517,6 +559,7 @@ dark:border-gray-700
 - First Input Delay (FID): < 100ms
 
 ### Optimization Strategies
+
 - Lazy load non-critical resources
 - Minimize initial bundle size
 - Use efficient animations (transform, opacity)
@@ -527,12 +570,14 @@ dark:border-gray-700
 ## Component Size
 
 ### Bundle Impact
+
 - LoginView.vue: ~4 KB (minified)
 - RegisterView.vue: ~6 KB (minified)
 - AuthLayout.vue: ~1 KB (minified)
 - Total: ~11 KB (excluding dependencies)
 
 ### Dependencies
+
 - Vue 3: ~40 KB (runtime)
 - Vue Router: ~15 KB
 - Pinia: ~10 KB
@@ -541,6 +586,7 @@ dark:border-gray-700
 ## Testing Checklist
 
 ### Visual Regression Tests
+
 - [ ] Default state (login)
 - [ ] Default state (register)
 - [ ] Loading state
@@ -554,6 +600,7 @@ dark:border-gray-700
 - [ ] Hover states
 
 ### Cross-browser Tests
+
 - [ ] Chrome (Windows, Mac, Linux)
 - [ ] Firefox (Windows, Mac, Linux)
 - [ ] Safari (Mac, iOS)
@@ -562,6 +609,7 @@ dark:border-gray-700
 - [ ] Safari Mobile (iOS)
 
 ### Accessibility Tests
+
 - [ ] Keyboard navigation
 - [ ] Screen reader (NVDA)
 - [ ] Screen reader (JAWS)
@@ -573,14 +621,17 @@ dark:border-gray-700
 ## Design Assets
 
 ### Figma/Sketch Files
+
 (Not applicable - designed directly in code with Tailwind)
 
 ### Design Tokens
+
 - Defined in Tailwind config
 - Consistent with design system
 - Reusable across all components
 
 ### Iconography
+
 - SVG icons inline
 - Heroicons (outline and solid)
 - Consistent stroke width
diff --git a/frontend/src/views/auth/index.ts b/frontend/src/views/auth/index.ts
index da16025d..7c9e6b98 100644
--- a/frontend/src/views/auth/index.ts
+++ b/frontend/src/views/auth/index.ts
@@ -3,5 +3,5 @@
  * Export all authentication-related views
  */
 
-export { default as LoginView } from './LoginView.vue';
-export { default as RegisterView } from './RegisterView.vue';
+export { default as LoginView } from './LoginView.vue'
+export { default as RegisterView } from './RegisterView.vue'
diff --git a/frontend/src/views/setup/SetupWizardView.vue b/frontend/src/views/setup/SetupWizardView.vue
index ee7bb640..d52d694f 100644
--- a/frontend/src/views/setup/SetupWizardView.vue
+++ b/frontend/src/views/setup/SetupWizardView.vue
@@ -1,12 +1,30 @@
 <template>
-  <div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-dark-900 dark:to-dark-800 flex items-center justify-center p-4">
+  <div
+    class="flex min-h-screen items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 p-4 dark:from-dark-900 dark:to-dark-800"
+  >
     <div class="w-full max-w-2xl">
       <!-- Logo & Title -->
-      <div class="text-center mb-8">
-        <div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-br from-primary-500 to-primary-600 shadow-lg mb-4">
-          <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
-            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+      <div class="mb-8 text-center">
+        <div
+          class="mb-4 inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-500 to-primary-600 shadow-lg"
+        >
+          <svg
+            class="h-8 w-8 text-white"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="1.5"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
+            />
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+            />
           </svg>
         </div>
         <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Sub2API Setup</h1>
@@ -20,63 +38,110 @@
             <div class="flex items-center">
               <div
                 :class="[
-                  'w-10 h-10 rounded-full flex items-center justify-center font-semibold text-sm transition-all',
+                  'flex h-10 w-10 items-center justify-center rounded-full text-sm font-semibold transition-all',
                   currentStep > index
                     ? 'bg-primary-500 text-white'
                     : currentStep === index
-                    ? 'bg-primary-500 text-white ring-4 ring-primary-100 dark:ring-primary-900'
-                    : 'bg-gray-200 dark:bg-dark-700 text-gray-500 dark:text-dark-400'
+                      ? 'bg-primary-500 text-white ring-4 ring-primary-100 dark:ring-primary-900'
+                      : 'bg-gray-200 text-gray-500 dark:bg-dark-700 dark:text-dark-400'
                 ]"
               >
-                <svg v-if="currentStep > index" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                <svg
+                  v-if="currentStep > index"
+                  class="h-5 w-5"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="2"
+                >
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                 </svg>
                 <span v-else>{{ index + 1 }}</span>
               </div>
-              <span class="ml-2 text-sm font-medium" :class="currentStep >= index ? 'text-gray-900 dark:text-white' : 'text-gray-400 dark:text-dark-500'">
+              <span
+                class="ml-2 text-sm font-medium"
+                :class="
+                  currentStep >= index
+                    ? 'text-gray-900 dark:text-white'
+                    : 'text-gray-400 dark:text-dark-500'
+                "
+              >
                 {{ step.title }}
               </span>
             </div>
-            <div v-if="index < steps.length - 1" class="w-12 h-0.5 mx-3" :class="currentStep > index ? 'bg-primary-500' : 'bg-gray-200 dark:bg-dark-700'"></div>
+            <div
+              v-if="index < steps.length - 1"
+              class="mx-3 h-0.5 w-12"
+              :class="currentStep > index ? 'bg-primary-500' : 'bg-gray-200 dark:bg-dark-700'"
+            ></div>
           </template>
         </div>
       </div>
 
       <!-- Step Content -->
-      <div class="bg-white dark:bg-dark-800 rounded-2xl shadow-xl p-8">
+      <div class="rounded-2xl bg-white p-8 shadow-xl dark:bg-dark-800">
         <!-- Step 1: Database -->
         <div v-if="currentStep === 0" class="space-y-6">
-          <div class="text-center mb-6">
-            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Database Configuration</h2>
-            <p class="text-sm text-gray-500 dark:text-dark-400 mt-1">Connect to your PostgreSQL database</p>
+          <div class="mb-6 text-center">
+            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
+              Database Configuration
+            </h2>
+            <p class="mt-1 text-sm text-gray-500 dark:text-dark-400">
+              Connect to your PostgreSQL database
+            </p>
           </div>
 
           <div class="grid grid-cols-2 gap-4">
             <div>
               <label class="input-label">Host</label>
-              <input v-model="formData.database.host" type="text" class="input" placeholder="localhost" />
+              <input
+                v-model="formData.database.host"
+                type="text"
+                class="input"
+                placeholder="localhost"
+              />
             </div>
             <div>
               <label class="input-label">Port</label>
-              <input v-model.number="formData.database.port" type="number" class="input" placeholder="5432" />
+              <input
+                v-model.number="formData.database.port"
+                type="number"
+                class="input"
+                placeholder="5432"
+              />
             </div>
           </div>
 
           <div class="grid grid-cols-2 gap-4">
             <div>
               <label class="input-label">Username</label>
-              <input v-model="formData.database.user" type="text" class="input" placeholder="postgres" />
+              <input
+                v-model="formData.database.user"
+                type="text"
+                class="input"
+                placeholder="postgres"
+              />
             </div>
             <div>
               <label class="input-label">Password</label>
-              <input v-model="formData.database.password" type="password" class="input" placeholder="Password" />
+              <input
+                v-model="formData.database.password"
+                type="password"
+                class="input"
+                placeholder="Password"
+              />
             </div>
           </div>
 
           <div class="grid grid-cols-2 gap-4">
             <div>
               <label class="input-label">Database Name</label>
-              <input v-model="formData.database.dbname" type="text" class="input" placeholder="sub2api" />
+              <input
+                v-model="formData.database.dbname"
+                type="text"
+                class="input"
+                placeholder="sub2api"
+              />
             </div>
             <div>
               <label class="input-label">SSL Mode</label>
@@ -94,43 +159,90 @@
             :disabled="testingDb"
             class="btn btn-secondary w-full"
           >
-            <svg v-if="testingDb" class="animate-spin -ml-1 mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24">
-              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            <svg
+              v-if="testingDb"
+              class="-ml-1 mr-2 h-4 w-4 animate-spin"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <circle
+                class="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                stroke-width="4"
+              ></circle>
+              <path
+                class="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              ></path>
             </svg>
-            <svg v-else-if="dbConnected" class="w-5 h-5 mr-2 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <svg
+              v-else-if="dbConnected"
+              class="mr-2 h-5 w-5 text-green-500"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="2"
+            >
               <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
             </svg>
-            {{ testingDb ? 'Testing...' : dbConnected ? 'Connection Successful' : 'Test Connection' }}
+            {{
+              testingDb ? 'Testing...' : dbConnected ? 'Connection Successful' : 'Test Connection'
+            }}
           </button>
         </div>
 
         <!-- Step 2: Redis -->
         <div v-if="currentStep === 1" class="space-y-6">
-          <div class="text-center mb-6">
+          <div class="mb-6 text-center">
             <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Redis Configuration</h2>
-            <p class="text-sm text-gray-500 dark:text-dark-400 mt-1">Connect to your Redis server</p>
+            <p class="mt-1 text-sm text-gray-500 dark:text-dark-400">
+              Connect to your Redis server
+            </p>
           </div>
 
           <div class="grid grid-cols-2 gap-4">
             <div>
               <label class="input-label">Host</label>
-              <input v-model="formData.redis.host" type="text" class="input" placeholder="localhost" />
+              <input
+                v-model="formData.redis.host"
+                type="text"
+                class="input"
+                placeholder="localhost"
+              />
             </div>
             <div>
               <label class="input-label">Port</label>
-              <input v-model.number="formData.redis.port" type="number" class="input" placeholder="6379" />
+              <input
+                v-model.number="formData.redis.port"
+                type="number"
+                class="input"
+                placeholder="6379"
+              />
             </div>
           </div>
 
           <div class="grid grid-cols-2 gap-4">
             <div>
               <label class="input-label">Password (optional)</label>
-              <input v-model="formData.redis.password" type="password" class="input" placeholder="Password" />
+              <input
+                v-model="formData.redis.password"
+                type="password"
+                class="input"
+                placeholder="Password"
+              />
             </div>
             <div>
               <label class="input-label">Database</label>
-              <input v-model.number="formData.redis.db" type="number" class="input" placeholder="0" />
+              <input
+                v-model.number="formData.redis.db"
+                type="number"
+                class="input"
+                placeholder="0"
+              />
             </div>
           </div>
 
@@ -139,38 +251,87 @@
             :disabled="testingRedis"
             class="btn btn-secondary w-full"
           >
-            <svg v-if="testingRedis" class="animate-spin -ml-1 mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24">
-              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            <svg
+              v-if="testingRedis"
+              class="-ml-1 mr-2 h-4 w-4 animate-spin"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <circle
+                class="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                stroke-width="4"
+              ></circle>
+              <path
+                class="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              ></path>
             </svg>
-            <svg v-else-if="redisConnected" class="w-5 h-5 mr-2 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <svg
+              v-else-if="redisConnected"
+              class="mr-2 h-5 w-5 text-green-500"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="2"
+            >
               <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
             </svg>
-            {{ testingRedis ? 'Testing...' : redisConnected ? 'Connection Successful' : 'Test Connection' }}
+            {{
+              testingRedis
+                ? 'Testing...'
+                : redisConnected
+                  ? 'Connection Successful'
+                  : 'Test Connection'
+            }}
           </button>
         </div>
 
         <!-- Step 3: Admin -->
         <div v-if="currentStep === 2" class="space-y-6">
-          <div class="text-center mb-6">
+          <div class="mb-6 text-center">
             <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Admin Account</h2>
-            <p class="text-sm text-gray-500 dark:text-dark-400 mt-1">Create your administrator account</p>
+            <p class="mt-1 text-sm text-gray-500 dark:text-dark-400">
+              Create your administrator account
+            </p>
           </div>
 
           <div>
             <label class="input-label">Email</label>
-            <input v-model="formData.admin.email" type="email" class="input" placeholder="admin@example.com" />
+            <input
+              v-model="formData.admin.email"
+              type="email"
+              class="input"
+              placeholder="admin@example.com"
+            />
           </div>
 
           <div>
             <label class="input-label">Password</label>
-            <input v-model="formData.admin.password" type="password" class="input" placeholder="Min 6 characters" />
+            <input
+              v-model="formData.admin.password"
+              type="password"
+              class="input"
+              placeholder="Min 6 characters"
+            />
           </div>
 
           <div>
             <label class="input-label">Confirm Password</label>
-            <input v-model="confirmPassword" type="password" class="input" placeholder="Confirm password" />
-            <p v-if="confirmPassword && formData.admin.password !== confirmPassword" class="input-error-text">
+            <input
+              v-model="confirmPassword"
+              type="password"
+              class="input"
+              placeholder="Confirm password"
+            />
+            <p
+              v-if="confirmPassword && formData.admin.password !== confirmPassword"
+              class="input-error-text"
+            >
               Passwords do not match
             </p>
           </div>
@@ -178,53 +339,110 @@
 
         <!-- Step 4: Complete -->
         <div v-if="currentStep === 3" class="space-y-6">
-          <div class="text-center mb-6">
+          <div class="mb-6 text-center">
             <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Ready to Install</h2>
-            <p class="text-sm text-gray-500 dark:text-dark-400 mt-1">Review your configuration and complete setup</p>
+            <p class="mt-1 text-sm text-gray-500 dark:text-dark-400">
+              Review your configuration and complete setup
+            </p>
           </div>
 
           <div class="space-y-4">
-            <div class="p-4 bg-gray-50 dark:bg-dark-700 rounded-xl">
-              <h3 class="text-sm font-medium text-gray-500 dark:text-dark-400 mb-2">Database</h3>
-              <p class="text-gray-900 dark:text-white">{{ formData.database.user }}@{{ formData.database.host }}:{{ formData.database.port }}/{{ formData.database.dbname }}</p>
+            <div class="rounded-xl bg-gray-50 p-4 dark:bg-dark-700">
+              <h3 class="mb-2 text-sm font-medium text-gray-500 dark:text-dark-400">Database</h3>
+              <p class="text-gray-900 dark:text-white">
+                {{ formData.database.user }}@{{ formData.database.host }}:{{
+                  formData.database.port
+                }}/{{ formData.database.dbname }}
+              </p>
             </div>
 
-            <div class="p-4 bg-gray-50 dark:bg-dark-700 rounded-xl">
-              <h3 class="text-sm font-medium text-gray-500 dark:text-dark-400 mb-2">Redis</h3>
-              <p class="text-gray-900 dark:text-white">{{ formData.redis.host }}:{{ formData.redis.port }}</p>
+            <div class="rounded-xl bg-gray-50 p-4 dark:bg-dark-700">
+              <h3 class="mb-2 text-sm font-medium text-gray-500 dark:text-dark-400">Redis</h3>
+              <p class="text-gray-900 dark:text-white">
+                {{ formData.redis.host }}:{{ formData.redis.port }}
+              </p>
             </div>
 
-            <div class="p-4 bg-gray-50 dark:bg-dark-700 rounded-xl">
-              <h3 class="text-sm font-medium text-gray-500 dark:text-dark-400 mb-2">Admin Email</h3>
+            <div class="rounded-xl bg-gray-50 p-4 dark:bg-dark-700">
+              <h3 class="mb-2 text-sm font-medium text-gray-500 dark:text-dark-400">Admin Email</h3>
               <p class="text-gray-900 dark:text-white">{{ formData.admin.email }}</p>
             </div>
           </div>
         </div>
 
         <!-- Error Message -->
-        <div v-if="errorMessage" class="mt-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800/50 rounded-xl">
+        <div
+          v-if="errorMessage"
+          class="mt-6 rounded-xl border border-red-200 bg-red-50 p-4 dark:border-red-800/50 dark:bg-red-900/20"
+        >
           <div class="flex items-start gap-3">
-            <svg class="w-5 h-5 text-red-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+            <svg
+              class="h-5 w-5 flex-shrink-0 text-red-500"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="1.5"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+              />
             </svg>
             <p class="text-sm text-red-700 dark:text-red-400">{{ errorMessage }}</p>
           </div>
         </div>
 
         <!-- Success Message -->
-        <div v-if="installSuccess" class="mt-6 p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800/50 rounded-xl">
+        <div
+          v-if="installSuccess"
+          class="mt-6 rounded-xl border border-green-200 bg-green-50 p-4 dark:border-green-800/50 dark:bg-green-900/20"
+        >
           <div class="flex items-start gap-3">
-            <svg v-if="!serviceReady" class="animate-spin w-5 h-5 text-green-500 flex-shrink-0" fill="none" viewBox="0 0 24 24">
-              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            <svg
+              v-if="!serviceReady"
+              class="h-5 w-5 flex-shrink-0 animate-spin text-green-500"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <circle
+                class="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                stroke-width="4"
+              ></circle>
+              <path
+                class="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              ></path>
             </svg>
-            <svg v-else class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            <svg
+              v-else
+              class="h-5 w-5 flex-shrink-0 text-green-500"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="1.5"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
             </svg>
             <div>
-              <p class="text-sm font-medium text-green-700 dark:text-green-400">Installation completed!</p>
-              <p class="text-sm text-green-600 dark:text-green-500 mt-1">
-                {{ serviceReady ? 'Redirecting to login page...' : 'Service is restarting, please wait...' }}
+              <p class="text-sm font-medium text-green-700 dark:text-green-400">
+                Installation completed!
+              </p>
+              <p class="mt-1 text-sm text-green-600 dark:text-green-500">
+                {{
+                  serviceReady
+                    ? 'Redirecting to login page...'
+                    : 'Service is restarting, please wait...'
+                }}
               </p>
             </div>
           </div>
@@ -237,8 +455,18 @@
             @click="currentStep--"
             class="btn btn-secondary"
           >
-            <svg class="w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+            <svg
+              class="mr-2 h-4 w-4"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M15.75 19.5L8.25 12l7.5-7.5"
+              />
             </svg>
             Previous
           </button>
@@ -251,7 +479,13 @@
             class="btn btn-primary"
           >
             Next
-            <svg class="w-4 h-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <svg
+              class="ml-2 h-4 w-4"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="2"
+            >
               <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
             </svg>
           </button>
@@ -262,9 +496,25 @@
             :disabled="installing"
             class="btn btn-primary"
           >
-            <svg v-if="installing" class="animate-spin -ml-1 mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24">
-              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            <svg
+              v-if="installing"
+              class="-ml-1 mr-2 h-4 w-4 animate-spin"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <circle
+                class="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                stroke-width="4"
+              ></circle>
+              <path
+                class="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              ></path>
             </svg>
             {{ installing ? 'Installing...' : 'Complete Installation' }}
           </button>
@@ -275,38 +525,38 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed } from 'vue';
-import { testDatabase, testRedis, install, type InstallRequest } from '@/api/setup';
+import { ref, reactive, computed } from 'vue'
+import { testDatabase, testRedis, install, type InstallRequest } from '@/api/setup'
 
 const steps = [
   { id: 'database', title: 'Database' },
   { id: 'redis', title: 'Redis' },
   { id: 'admin', title: 'Admin' },
-  { id: 'complete', title: 'Complete' },
-];
+  { id: 'complete', title: 'Complete' }
+]
 
-const currentStep = ref(0);
-const errorMessage = ref('');
-const installSuccess = ref(false);
+const currentStep = ref(0)
+const errorMessage = ref('')
+const installSuccess = ref(false)
 
 // Connection test states
-const testingDb = ref(false);
-const testingRedis = ref(false);
-const dbConnected = ref(false);
-const redisConnected = ref(false);
-const installing = ref(false);
-const confirmPassword = ref('');
-const serviceReady = ref(false);
+const testingDb = ref(false)
+const testingRedis = ref(false)
+const dbConnected = ref(false)
+const redisConnected = ref(false)
+const installing = ref(false)
+const confirmPassword = ref('')
+const serviceReady = ref(false)
 
 // Get current server port from browser location (set by install.sh)
 const getCurrentPort = (): number => {
-  const port = window.location.port;
+  const port = window.location.port
   if (port) {
-    return parseInt(port, 10);
+    return parseInt(port, 10)
   }
   // Default port based on protocol
-  return window.location.protocol === 'https:' ? 443 : 80;
-};
+  return window.location.protocol === 'https:' ? 443 : 80
+}
 
 const formData = reactive<InstallRequest>({
   database: {
@@ -315,105 +565,105 @@ const formData = reactive<InstallRequest>({
     user: 'postgres',
     password: '',
     dbname: 'sub2api',
-    sslmode: 'disable',
+    sslmode: 'disable'
   },
   redis: {
     host: 'localhost',
     port: 6379,
     password: '',
-    db: 0,
+    db: 0
   },
   admin: {
     email: '',
-    password: '',
+    password: ''
   },
   server: {
     host: '0.0.0.0',
-    port: getCurrentPort(),  // Use current port from browser
-    mode: 'release',
-  },
-});
+    port: getCurrentPort(), // Use current port from browser
+    mode: 'release'
+  }
+})
 
 const canProceed = computed(() => {
   switch (currentStep.value) {
     case 0:
-      return dbConnected.value;
+      return dbConnected.value
     case 1:
-      return redisConnected.value;
+      return redisConnected.value
     case 2:
       return (
         formData.admin.email &&
         formData.admin.password.length >= 6 &&
         formData.admin.password === confirmPassword.value
-      );
+      )
     default:
-      return true;
+      return true
   }
-});
+})
 
 async function testDatabaseConnection() {
-  testingDb.value = true;
-  errorMessage.value = '';
-  dbConnected.value = false;
+  testingDb.value = true
+  errorMessage.value = ''
+  dbConnected.value = false
 
   try {
-    await testDatabase(formData.database);
-    dbConnected.value = true;
+    await testDatabase(formData.database)
+    dbConnected.value = true
   } catch (error: unknown) {
-    const err = error as { response?: { data?: { detail?: string } }; message?: string };
-    errorMessage.value = err.response?.data?.detail || err.message || 'Connection failed';
+    const err = error as { response?: { data?: { detail?: string } }; message?: string }
+    errorMessage.value = err.response?.data?.detail || err.message || 'Connection failed'
   } finally {
-    testingDb.value = false;
+    testingDb.value = false
   }
 }
 
 async function testRedisConnection() {
-  testingRedis.value = true;
-  errorMessage.value = '';
-  redisConnected.value = false;
+  testingRedis.value = true
+  errorMessage.value = ''
+  redisConnected.value = false
 
   try {
-    await testRedis(formData.redis);
-    redisConnected.value = true;
+    await testRedis(formData.redis)
+    redisConnected.value = true
   } catch (error: unknown) {
-    const err = error as { response?: { data?: { detail?: string } }; message?: string };
-    errorMessage.value = err.response?.data?.detail || err.message || 'Connection failed';
+    const err = error as { response?: { data?: { detail?: string } }; message?: string }
+    errorMessage.value = err.response?.data?.detail || err.message || 'Connection failed'
   } finally {
-    testingRedis.value = false;
+    testingRedis.value = false
   }
 }
 
 function nextStep() {
   if (canProceed.value) {
-    errorMessage.value = '';
-    currentStep.value++;
+    errorMessage.value = ''
+    currentStep.value++
   }
 }
 
 async function performInstall() {
-  installing.value = true;
-  errorMessage.value = '';
+  installing.value = true
+  errorMessage.value = ''
 
   try {
-    await install(formData);
-    installSuccess.value = true;
+    await install(formData)
+    installSuccess.value = true
     // Start polling for service restart
-    waitForServiceRestart();
+    waitForServiceRestart()
   } catch (error: unknown) {
-    const err = error as { response?: { data?: { detail?: string } }; message?: string };
-    errorMessage.value = err.response?.data?.detail || err.message || 'Installation failed';
+    const err = error as { response?: { data?: { detail?: string } }; message?: string }
+    errorMessage.value = err.response?.data?.detail || err.message || 'Installation failed'
   } finally {
-    installing.value = false;
+    installing.value = false
   }
 }
 
 // Wait for service to restart and become available
 async function waitForServiceRestart() {
-  const maxAttempts = 30; // 30 attempts, ~30 seconds max
-  const interval = 1000; // 1 second between attempts
+  const maxAttempts = 30 // 30 attempts, ~30 seconds max
+  const interval = 1000 // 1 second between attempts
 
   // Wait a moment for the service to start restarting
-  await new Promise(resolve => setTimeout(resolve, 2000));
+  await new Promise((resolve) => setTimeout(resolve, 2000))
 
   for (let attempt = 0; attempt < maxAttempts; attempt++) {
     try {
@@ -421,25 +671,25 @@ async function waitForServiceRestart() {
       const response = await fetch('/health', {
         method: 'GET',
         cache: 'no-store'
-      });
+      })
 
       if (response.ok) {
         // Service is up, check if setup is no longer needed
         const statusResponse = await fetch('/setup/status', {
           method: 'GET',
           cache: 'no-store'
-        });
+        })
 
         if (statusResponse.ok) {
-          const data = await statusResponse.json();
+          const data = await statusResponse.json()
           // If needs_setup is false, service has restarted in normal mode
           if (data.data && !data.data.needs_setup) {
-            serviceReady.value = true;
+            serviceReady.value = true
             // Redirect to login page after a short delay
             setTimeout(() => {
-              window.location.href = '/login';
-            }, 1500);
-            return;
+              window.location.href = '/login'
+            }, 1500)
+            return
           }
         }
       }
@@ -447,11 +697,12 @@ async function waitForServiceRestart() {
       // Service not ready yet, continue polling
     }
 
-    await new Promise(resolve => setTimeout(resolve, interval));
+    await new Promise((resolve) => setTimeout(resolve, interval))
   }
 
   // If we reach here, service didn't restart in time
   // Show a message to refresh manually
-  errorMessage.value = 'Service restart is taking longer than expected. Please refresh the page manually.';
+  errorMessage.value =
+    'Service restart is taking longer than expected. Please refresh the page manually.'
 }
 </script>
diff --git a/frontend/src/views/user/DashboardView.vue b/frontend/src/views/user/DashboardView.vue
index 1371f0f9..8b262bd9 100644
--- a/frontend/src/views/user/DashboardView.vue
+++ b/frontend/src/views/user/DashboardView.vue
@@ -12,14 +12,28 @@
           <!-- Balance -->
           <div class="card p-4">
             <div class="flex items-center gap-3">
-              <div class="p-2 rounded-lg bg-emerald-100 dark:bg-emerald-900/30">
-                <svg class="w-5 h-5 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" />
+              <div class="rounded-lg bg-emerald-100 p-2 dark:bg-emerald-900/30">
+                <svg
+                  class="h-5 w-5 text-emerald-600 dark:text-emerald-400"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z"
+                  />
                 </svg>
               </div>
               <div>
-                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('dashboard.balance') }}</p>
-                <p class="text-xl font-bold text-emerald-600 dark:text-emerald-400">${{ formatBalance(user?.balance || 0) }}</p>
+                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
+                  {{ t('dashboard.balance') }}
+                </p>
+                <p class="text-xl font-bold text-emerald-600 dark:text-emerald-400">
+                  ${{ formatBalance(user?.balance || 0) }}
+                </p>
                 <p class="text-xs text-gray-500 dark:text-gray-400">{{ t('common.available') }}</p>
               </div>
             </div>
@@ -28,15 +42,31 @@
           <!-- API Keys -->
           <div class="card p-4">
             <div class="flex items-center gap-3">
-              <div class="p-2 rounded-lg bg-blue-100 dark:bg-blue-900/30">
-                <svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z" />
+              <div class="rounded-lg bg-blue-100 p-2 dark:bg-blue-900/30">
+                <svg
+                  class="h-5 w-5 text-blue-600 dark:text-blue-400"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"
+                  />
                 </svg>
               </div>
               <div>
-                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('dashboard.apiKeys') }}</p>
-                <p class="text-xl font-bold text-gray-900 dark:text-white">{{ stats.total_api_keys }}</p>
-                <p class="text-xs text-green-600 dark:text-green-400">{{ stats.active_api_keys }} {{ t('common.active') }}</p>
+                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
+                  {{ t('dashboard.apiKeys') }}
+                </p>
+                <p class="text-xl font-bold text-gray-900 dark:text-white">
+                  {{ stats.total_api_keys }}
+                </p>
+                <p class="text-xs text-green-600 dark:text-green-400">
+                  {{ stats.active_api_keys }} {{ t('common.active') }}
+                </p>
               </div>
             </div>
           </div>
@@ -44,15 +74,31 @@
           <!-- Today Requests -->
           <div class="card p-4">
             <div class="flex items-center gap-3">
-              <div class="p-2 rounded-lg bg-green-100 dark:bg-green-900/30">
-                <svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
+              <div class="rounded-lg bg-green-100 p-2 dark:bg-green-900/30">
+                <svg
+                  class="h-5 w-5 text-green-600 dark:text-green-400"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"
+                  />
                 </svg>
               </div>
               <div>
-                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('dashboard.todayRequests') }}</p>
-                <p class="text-xl font-bold text-gray-900 dark:text-white">{{ stats.today_requests }}</p>
-                <p class="text-xs text-gray-500 dark:text-gray-400">{{ t('common.total') }}: {{ formatNumber(stats.total_requests) }}</p>
+                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
+                  {{ t('dashboard.todayRequests') }}
+                </p>
+                <p class="text-xl font-bold text-gray-900 dark:text-white">
+                  {{ stats.today_requests }}
+                </p>
+                <p class="text-xs text-gray-500 dark:text-gray-400">
+                  {{ t('common.total') }}: {{ formatNumber(stats.total_requests) }}
+                </p>
               </div>
             </div>
           </div>
@@ -60,21 +106,44 @@
           <!-- Today Cost -->
           <div class="card p-4">
             <div class="flex items-center gap-3">
-              <div class="p-2 rounded-lg bg-purple-100 dark:bg-purple-900/30">
-                <svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              <div class="rounded-lg bg-purple-100 p-2 dark:bg-purple-900/30">
+                <svg
+                  class="h-5 w-5 text-purple-600 dark:text-purple-400"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
                 </svg>
               </div>
               <div>
-                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('dashboard.todayCost') }}</p>
+                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
+                  {{ t('dashboard.todayCost') }}
+                </p>
                 <p class="text-xl font-bold text-gray-900 dark:text-white">
-                  <span class="text-purple-600 dark:text-purple-400" :title="t('dashboard.actual')">${{ formatCost(stats.today_actual_cost) }}</span>
-                  <span class="text-sm font-normal text-gray-400 dark:text-gray-500" :title="t('dashboard.standard')"> / ${{ formatCost(stats.today_cost) }}</span>
+                  <span class="text-purple-600 dark:text-purple-400" :title="t('dashboard.actual')"
+                    >${{ formatCost(stats.today_actual_cost) }}</span
+                  >
+                  <span
+                    class="text-sm font-normal text-gray-400 dark:text-gray-500"
+                    :title="t('dashboard.standard')"
+                  >
+                    / ${{ formatCost(stats.today_cost) }}</span
+                  >
                 </p>
                 <p class="text-xs">
                   <span class="text-gray-500 dark:text-gray-400">{{ t('common.total') }}: </span>
-                  <span class="text-purple-600 dark:text-purple-400" :title="t('dashboard.actual')">${{ formatCost(stats.total_actual_cost) }}</span>
-                  <span class="text-gray-400 dark:text-gray-500" :title="t('dashboard.standard')"> / ${{ formatCost(stats.total_cost) }}</span>
+                  <span class="text-purple-600 dark:text-purple-400" :title="t('dashboard.actual')"
+                    >${{ formatCost(stats.total_actual_cost) }}</span
+                  >
+                  <span class="text-gray-400 dark:text-gray-500" :title="t('dashboard.standard')">
+                    / ${{ formatCost(stats.total_cost) }}</span
+                  >
                 </p>
               </div>
             </div>
@@ -86,16 +155,31 @@
           <!-- Today Tokens -->
           <div class="card p-4">
             <div class="flex items-center gap-3">
-              <div class="p-2 rounded-lg bg-amber-100 dark:bg-amber-900/30">
-                <svg class="w-5 h-5 text-amber-600 dark:text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
+              <div class="rounded-lg bg-amber-100 p-2 dark:bg-amber-900/30">
+                <svg
+                  class="h-5 w-5 text-amber-600 dark:text-amber-400"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"
+                  />
                 </svg>
               </div>
               <div>
-                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('dashboard.todayTokens') }}</p>
-                <p class="text-xl font-bold text-gray-900 dark:text-white">{{ formatTokens(stats.today_tokens) }}</p>
+                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
+                  {{ t('dashboard.todayTokens') }}
+                </p>
+                <p class="text-xl font-bold text-gray-900 dark:text-white">
+                  {{ formatTokens(stats.today_tokens) }}
+                </p>
                 <p class="text-xs text-gray-500 dark:text-gray-400">
-                  {{ t('dashboard.input') }}: {{ formatTokens(stats.today_input_tokens) }} / {{ t('dashboard.output') }}: {{ formatTokens(stats.today_output_tokens) }}
+                  {{ t('dashboard.input') }}: {{ formatTokens(stats.today_input_tokens) }} /
+                  {{ t('dashboard.output') }}: {{ formatTokens(stats.today_output_tokens) }}
                 </p>
               </div>
             </div>
@@ -104,16 +188,31 @@
           <!-- Total Tokens -->
           <div class="card p-4">
             <div class="flex items-center gap-3">
-              <div class="p-2 rounded-lg bg-indigo-100 dark:bg-indigo-900/30">
-                <svg class="w-5 h-5 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" />
+              <div class="rounded-lg bg-indigo-100 p-2 dark:bg-indigo-900/30">
+                <svg
+                  class="h-5 w-5 text-indigo-600 dark:text-indigo-400"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"
+                  />
                 </svg>
               </div>
               <div>
-                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('dashboard.totalTokens') }}</p>
-                <p class="text-xl font-bold text-gray-900 dark:text-white">{{ formatTokens(stats.total_tokens) }}</p>
+                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
+                  {{ t('dashboard.totalTokens') }}
+                </p>
+                <p class="text-xl font-bold text-gray-900 dark:text-white">
+                  {{ formatTokens(stats.total_tokens) }}
+                </p>
                 <p class="text-xs text-gray-500 dark:text-gray-400">
-                  {{ t('dashboard.input') }}: {{ formatTokens(stats.total_input_tokens) }} / {{ t('dashboard.output') }}: {{ formatTokens(stats.total_output_tokens) }}
+                  {{ t('dashboard.input') }}: {{ formatTokens(stats.total_input_tokens) }} /
+                  {{ t('dashboard.output') }}: {{ formatTokens(stats.total_output_tokens) }}
                 </p>
               </div>
             </div>
@@ -122,19 +221,35 @@
           <!-- Performance (RPM/TPM) -->
           <div class="card p-4">
             <div class="flex items-center gap-3">
-              <div class="p-2 rounded-lg bg-violet-100 dark:bg-violet-900/30">
-                <svg class="w-5 h-5 text-violet-600 dark:text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+              <div class="rounded-lg bg-violet-100 p-2 dark:bg-violet-900/30">
+                <svg
+                  class="h-5 w-5 text-violet-600 dark:text-violet-400"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M13 10V3L4 14h7v7l9-11h-7z"
+                  />
                 </svg>
               </div>
               <div class="flex-1">
-                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('dashboard.performance') }}</p>
+                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
+                  {{ t('dashboard.performance') }}
+                </p>
                 <div class="flex items-baseline gap-2">
-                  <p class="text-xl font-bold text-gray-900 dark:text-white">{{ formatTokens(stats.rpm) }}</p>
+                  <p class="text-xl font-bold text-gray-900 dark:text-white">
+                    {{ formatTokens(stats.rpm) }}
+                  </p>
                   <span class="text-xs text-gray-500 dark:text-gray-400">RPM</span>
                 </div>
                 <div class="flex items-baseline gap-2">
-                  <p class="text-sm font-semibold text-violet-600 dark:text-violet-400">{{ formatTokens(stats.tpm) }}</p>
+                  <p class="text-sm font-semibold text-violet-600 dark:text-violet-400">
+                    {{ formatTokens(stats.tpm) }}
+                  </p>
                   <span class="text-xs text-gray-500 dark:text-gray-400">TPM</span>
                 </div>
               </div>
@@ -144,15 +259,31 @@
           <!-- Avg Response Time -->
           <div class="card p-4">
             <div class="flex items-center gap-3">
-              <div class="p-2 rounded-lg bg-rose-100 dark:bg-rose-900/30">
-                <svg class="w-5 h-5 text-rose-600 dark:text-rose-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+              <div class="rounded-lg bg-rose-100 p-2 dark:bg-rose-900/30">
+                <svg
+                  class="h-5 w-5 text-rose-600 dark:text-rose-400"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
                 </svg>
               </div>
               <div>
-                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('dashboard.avgResponse') }}</p>
-                <p class="text-xl font-bold text-gray-900 dark:text-white">{{ formatDuration(stats.average_duration_ms) }}</p>
-                <p class="text-xs text-gray-500 dark:text-gray-400">{{ t('dashboard.averageTime') }}</p>
+                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
+                  {{ t('dashboard.avgResponse') }}
+                </p>
+                <p class="text-xl font-bold text-gray-900 dark:text-white">
+                  {{ formatDuration(stats.average_duration_ms) }}
+                </p>
+                <p class="text-xs text-gray-500 dark:text-gray-400">
+                  {{ t('dashboard.averageTime') }}
+                </p>
               </div>
             </div>
           </div>
@@ -164,15 +295,19 @@
           <div class="card p-4">
             <div class="flex flex-wrap items-center gap-4">
               <div class="flex items-center gap-2">
-                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('dashboard.timeRange') }}:</span>
+                <span class="text-sm font-medium text-gray-700 dark:text-gray-300"
+                  >{{ t('dashboard.timeRange') }}:</span
+                >
                 <DateRangePicker
                   v-model:start-date="startDate"
                   v-model:end-date="endDate"
                   @change="onDateRangeChange"
                 />
               </div>
-              <div class="flex items-center gap-2 ml-auto">
-                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('dashboard.granularity') }}:</span>
+              <div class="ml-auto flex items-center gap-2">
+                <span class="text-sm font-medium text-gray-700 dark:text-gray-300"
+                  >{{ t('dashboard.granularity') }}:</span
+                >
                 <div class="w-28">
                   <Select
                     v-model="granularity"
@@ -188,32 +323,58 @@
           <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
             <!-- Model Distribution Chart -->
             <div class="card p-4">
-              <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-4">{{ t('dashboard.modelDistribution') }}</h3>
+              <h3 class="mb-4 text-sm font-semibold text-gray-900 dark:text-white">
+                {{ t('dashboard.modelDistribution') }}
+              </h3>
               <div class="flex items-center gap-6">
-                <div class="w-48 h-48">
-                  <Doughnut v-if="modelChartData" :data="modelChartData" :options="doughnutOptions" />
-                  <div v-else class="flex items-center justify-center h-full text-gray-500 dark:text-gray-400 text-sm">
+                <div class="h-48 w-48">
+                  <Doughnut
+                    v-if="modelChartData"
+                    :data="modelChartData"
+                    :options="doughnutOptions"
+                  />
+                  <div
+                    v-else
+                    class="flex h-full items-center justify-center text-sm text-gray-500 dark:text-gray-400"
+                  >
                     {{ t('dashboard.noDataAvailable') }}
                   </div>
                 </div>
-                <div class="flex-1 max-h-48 overflow-y-auto">
+                <div class="max-h-48 flex-1 overflow-y-auto">
                   <table class="w-full text-xs">
                     <thead>
                       <tr class="text-gray-500 dark:text-gray-400">
-                        <th class="text-left pb-2">{{ t('dashboard.model') }}</th>
-                        <th class="text-right pb-2">{{ t('dashboard.requests') }}</th>
-                        <th class="text-right pb-2">{{ t('dashboard.tokens') }}</th>
-                        <th class="text-right pb-2">{{ t('dashboard.actual') }}</th>
-                        <th class="text-right pb-2">{{ t('dashboard.standard') }}</th>
+                        <th class="pb-2 text-left">{{ t('dashboard.model') }}</th>
+                        <th class="pb-2 text-right">{{ t('dashboard.requests') }}</th>
+                        <th class="pb-2 text-right">{{ t('dashboard.tokens') }}</th>
+                        <th class="pb-2 text-right">{{ t('dashboard.actual') }}</th>
+                        <th class="pb-2 text-right">{{ t('dashboard.standard') }}</th>
                       </tr>
                     </thead>
                     <tbody>
-                      <tr v-for="model in modelStats" :key="model.model" class="border-t border-gray-100 dark:border-gray-700">
-                        <td class="py-1.5 text-gray-900 dark:text-white font-medium truncate max-w-[100px]" :title="model.model">{{ model.model }}</td>
-                        <td class="py-1.5 text-right text-gray-600 dark:text-gray-400">{{ formatNumber(model.requests) }}</td>
-                        <td class="py-1.5 text-right text-gray-600 dark:text-gray-400">{{ formatTokens(model.total_tokens) }}</td>
-                        <td class="py-1.5 text-right text-green-600 dark:text-green-400">${{ formatCost(model.actual_cost) }}</td>
-                        <td class="py-1.5 text-right text-gray-400 dark:text-gray-500">${{ formatCost(model.cost) }}</td>
+                      <tr
+                        v-for="model in modelStats"
+                        :key="model.model"
+                        class="border-t border-gray-100 dark:border-gray-700"
+                      >
+                        <td
+                          class="max-w-[100px] truncate py-1.5 font-medium text-gray-900 dark:text-white"
+                          :title="model.model"
+                        >
+                          {{ model.model }}
+                        </td>
+                        <td class="py-1.5 text-right text-gray-600 dark:text-gray-400">
+                          {{ formatNumber(model.requests) }}
+                        </td>
+                        <td class="py-1.5 text-right text-gray-600 dark:text-gray-400">
+                          {{ formatTokens(model.total_tokens) }}
+                        </td>
+                        <td class="py-1.5 text-right text-green-600 dark:text-green-400">
+                          ${{ formatCost(model.actual_cost) }}
+                        </td>
+                        <td class="py-1.5 text-right text-gray-400 dark:text-gray-500">
+                          ${{ formatCost(model.cost) }}
+                        </td>
                       </tr>
                     </tbody>
                   </table>
@@ -223,10 +384,15 @@
 
             <!-- Token Usage Trend Chart -->
             <div class="card p-4">
-              <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-4">{{ t('dashboard.tokenUsageTrend') }}</h3>
+              <h3 class="mb-4 text-sm font-semibold text-gray-900 dark:text-white">
+                {{ t('dashboard.tokenUsageTrend') }}
+              </h3>
               <div class="h-48">
                 <Line v-if="trendChartData" :data="trendChartData" :options="lineOptions" />
-                <div v-else class="flex items-center justify-center h-full text-gray-500 dark:text-gray-400 text-sm">
+                <div
+                  v-else
+                  class="flex h-full items-center justify-center text-sm text-gray-500 dark:text-gray-400"
+                >
                   {{ t('dashboard.noDataAvailable') }}
                 </div>
               </div>
@@ -239,8 +405,12 @@
           <!-- Recent Usage - Takes 2 columns -->
           <div class="lg:col-span-2">
             <div class="card">
-              <div class="px-6 py-4 border-b border-gray-100 dark:border-dark-700 flex items-center justify-between">
-                <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ t('dashboard.recentUsage') }}</h2>
+              <div
+                class="flex items-center justify-between border-b border-gray-100 px-6 py-4 dark:border-dark-700"
+              >
+                <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
+                  {{ t('dashboard.recentUsage') }}
+                </h2>
                 <span class="badge badge-gray">{{ t('dashboard.last7Days') }}</span>
               </div>
               <div class="p-6">
@@ -257,16 +427,30 @@
                   <div
                     v-for="log in recentUsage"
                     :key="log.id"
-                    class="flex items-center justify-between p-4 rounded-xl bg-gray-50 dark:bg-dark-800/50 hover:bg-gray-100 dark:hover:bg-dark-800 transition-colors"
+                    class="flex items-center justify-between rounded-xl bg-gray-50 p-4 transition-colors hover:bg-gray-100 dark:bg-dark-800/50 dark:hover:bg-dark-800"
                   >
                     <div class="flex items-center gap-4">
-                      <div class="w-10 h-10 rounded-xl bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center">
-                        <svg class="w-5 h-5 text-primary-600 dark:text-primary-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                          <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5" />
+                      <div
+                        class="flex h-10 w-10 items-center justify-center rounded-xl bg-primary-100 dark:bg-primary-900/30"
+                      >
+                        <svg
+                          class="h-5 w-5 text-primary-600 dark:text-primary-400"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                          stroke-width="1.5"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"
+                          />
                         </svg>
                       </div>
                       <div>
-                        <p class="text-sm font-medium text-gray-900 dark:text-white">{{ log.model }}</p>
+                        <p class="text-sm font-medium text-gray-900 dark:text-white">
+                          {{ log.model }}
+                        </p>
                         <p class="text-xs text-gray-500 dark:text-dark-400">
                           {{ formatDate(log.created_at) }}
                         </p>
@@ -274,8 +458,12 @@
                     </div>
                     <div class="text-right">
                       <p class="text-sm font-semibold">
-                        <span class="text-green-600 dark:text-green-400" title="实际扣除">${{ formatCost(log.actual_cost) }}</span>
-                        <span class="text-gray-400 dark:text-gray-500 font-normal" title="标准计费"> / ${{ formatCost(log.total_cost) }}</span>
+                        <span class="text-green-600 dark:text-green-400" title="实际扣除"
+                          >${{ formatCost(log.actual_cost) }}</span
+                        >
+                        <span class="font-normal text-gray-400 dark:text-gray-500" title="标准计费">
+                          / ${{ formatCost(log.total_cost) }}</span
+                        >
                       </p>
                       <p class="text-xs text-gray-500 dark:text-dark-400">
                         {{ (log.input_tokens + log.output_tokens).toLocaleString() }} tokens
@@ -285,11 +473,21 @@
 
                   <router-link
                     to="/usage"
-                    class="flex items-center justify-center gap-2 py-3 text-sm font-medium text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 transition-colors"
+                    class="flex items-center justify-center gap-2 py-3 text-sm font-medium text-primary-600 transition-colors hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300"
                   >
                     {{ t('dashboard.viewAllUsage') }}
-                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                      <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
+                    <svg
+                      class="h-4 w-4"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      stroke-width="1.5"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
+                      />
                     </svg>
                   </router-link>
                 </div>
@@ -300,61 +498,141 @@
           <!-- Quick Actions - Takes 1 column -->
           <div class="lg:col-span-1">
             <div class="card">
-              <div class="px-6 py-4 border-b border-gray-100 dark:border-dark-700">
-                <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ t('dashboard.quickActions') }}</h2>
+              <div class="border-b border-gray-100 px-6 py-4 dark:border-dark-700">
+                <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
+                  {{ t('dashboard.quickActions') }}
+                </h2>
               </div>
-              <div class="p-4 space-y-3">
+              <div class="space-y-3 p-4">
                 <button
                   @click="navigateTo('/keys')"
-                  class="w-full flex items-center gap-4 p-4 rounded-xl bg-gray-50 dark:bg-dark-800/50 hover:bg-gray-100 dark:hover:bg-dark-800 transition-all duration-200 group text-left"
+                  class="group flex w-full items-center gap-4 rounded-xl bg-gray-50 p-4 text-left transition-all duration-200 hover:bg-gray-100 dark:bg-dark-800/50 dark:hover:bg-dark-800"
                 >
-                  <div class="flex-shrink-0 w-12 h-12 rounded-xl bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center group-hover:scale-105 transition-transform">
-                    <svg class="w-6 h-6 text-primary-600 dark:text-primary-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                      <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z" />
+                  <div
+                    class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl bg-primary-100 transition-transform group-hover:scale-105 dark:bg-primary-900/30"
+                  >
+                    <svg
+                      class="h-6 w-6 text-primary-600 dark:text-primary-400"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      stroke-width="1.5"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"
+                      />
                     </svg>
                   </div>
-                  <div class="flex-1 min-w-0">
-                    <p class="text-sm font-medium text-gray-900 dark:text-white">{{ t('dashboard.createApiKey') }}</p>
-                    <p class="text-xs text-gray-500 dark:text-dark-400">{{ t('dashboard.generateNewKey') }}</p>
+                  <div class="min-w-0 flex-1">
+                    <p class="text-sm font-medium text-gray-900 dark:text-white">
+                      {{ t('dashboard.createApiKey') }}
+                    </p>
+                    <p class="text-xs text-gray-500 dark:text-dark-400">
+                      {{ t('dashboard.generateNewKey') }}
+                    </p>
                   </div>
-                  <svg class="w-5 h-5 text-gray-400 dark:text-dark-500 group-hover:text-primary-500 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+                  <svg
+                    class="h-5 w-5 text-gray-400 transition-colors group-hover:text-primary-500 dark:text-dark-500"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      d="M8.25 4.5l7.5 7.5-7.5 7.5"
+                    />
                   </svg>
                 </button>
 
                 <button
                   @click="navigateTo('/usage')"
-                  class="w-full flex items-center gap-4 p-4 rounded-xl bg-gray-50 dark:bg-dark-800/50 hover:bg-gray-100 dark:hover:bg-dark-800 transition-all duration-200 group text-left"
+                  class="group flex w-full items-center gap-4 rounded-xl bg-gray-50 p-4 text-left transition-all duration-200 hover:bg-gray-100 dark:bg-dark-800/50 dark:hover:bg-dark-800"
                 >
-                  <div class="flex-shrink-0 w-12 h-12 rounded-xl bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center group-hover:scale-105 transition-transform">
-                    <svg class="w-6 h-6 text-emerald-600 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                      <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
+                  <div
+                    class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl bg-emerald-100 transition-transform group-hover:scale-105 dark:bg-emerald-900/30"
+                  >
+                    <svg
+                      class="h-6 w-6 text-emerald-600 dark:text-emerald-400"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      stroke-width="1.5"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"
+                      />
                     </svg>
                   </div>
-                  <div class="flex-1 min-w-0">
-                    <p class="text-sm font-medium text-gray-900 dark:text-white">{{ t('dashboard.viewUsage') }}</p>
-                    <p class="text-xs text-gray-500 dark:text-dark-400">{{ t('dashboard.checkDetailedLogs') }}</p>
+                  <div class="min-w-0 flex-1">
+                    <p class="text-sm font-medium text-gray-900 dark:text-white">
+                      {{ t('dashboard.viewUsage') }}
+                    </p>
+                    <p class="text-xs text-gray-500 dark:text-dark-400">
+                      {{ t('dashboard.checkDetailedLogs') }}
+                    </p>
                   </div>
-                  <svg class="w-5 h-5 text-gray-400 dark:text-dark-500 group-hover:text-emerald-500 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+                  <svg
+                    class="h-5 w-5 text-gray-400 transition-colors group-hover:text-emerald-500 dark:text-dark-500"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      d="M8.25 4.5l7.5 7.5-7.5 7.5"
+                    />
                   </svg>
                 </button>
 
                 <button
                   @click="navigateTo('/redeem')"
-                  class="w-full flex items-center gap-4 p-4 rounded-xl bg-gray-50 dark:bg-dark-800/50 hover:bg-gray-100 dark:hover:bg-dark-800 transition-all duration-200 group text-left"
+                  class="group flex w-full items-center gap-4 rounded-xl bg-gray-50 p-4 text-left transition-all duration-200 hover:bg-gray-100 dark:bg-dark-800/50 dark:hover:bg-dark-800"
                 >
-                  <div class="flex-shrink-0 w-12 h-12 rounded-xl bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center group-hover:scale-105 transition-transform">
-                    <svg class="w-6 h-6 text-amber-600 dark:text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                      <path stroke-linecap="round" stroke-linejoin="round" d="M21 11.25v8.25a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 109.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1114.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
+                  <div
+                    class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl bg-amber-100 transition-transform group-hover:scale-105 dark:bg-amber-900/30"
+                  >
+                    <svg
+                      class="h-6 w-6 text-amber-600 dark:text-amber-400"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      stroke-width="1.5"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M21 11.25v8.25a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 109.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1114.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"
+                      />
                     </svg>
                   </div>
-                  <div class="flex-1 min-w-0">
-                    <p class="text-sm font-medium text-gray-900 dark:text-white">{{ t('dashboard.redeemCode') }}</p>
-                    <p class="text-xs text-gray-500 dark:text-dark-400">{{ t('dashboard.addBalanceWithCode') }}</p>
+                  <div class="min-w-0 flex-1">
+                    <p class="text-sm font-medium text-gray-900 dark:text-white">
+                      {{ t('dashboard.redeemCode') }}
+                    </p>
+                    <p class="text-xs text-gray-500 dark:text-dark-400">
+                      {{ t('dashboard.addBalanceWithCode') }}
+                    </p>
                   </div>
-                  <svg class="w-5 h-5 text-gray-400 dark:text-dark-500 group-hover:text-amber-500 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+                  <svg
+                    class="h-5 w-5 text-gray-400 transition-colors group-hover:text-amber-500 dark:text-dark-500"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      d="M8.25 4.5l7.5 7.5-7.5 7.5"
+                    />
                   </svg>
                 </button>
               </div>
@@ -431,7 +709,7 @@ const endDate = ref('')
 // Granularity options for Select component
 const granularityOptions = computed(() => [
   { value: 'day', label: t('dashboard.day') },
-  { value: 'hour', label: t('dashboard.hour') },
+  { value: 'hour', label: t('dashboard.hour') }
 ])
 
 // Dark mode detection
@@ -445,7 +723,7 @@ const chartColors = computed(() => ({
   grid: isDarkMode.value ? '#374151' : '#e5e7eb',
   input: '#3b82f6',
   output: '#10b981',
-  cache: '#f59e0b',
+  cache: '#f59e0b'
 }))
 
 // Doughnut chart options
@@ -454,7 +732,7 @@ const doughnutOptions = computed(() => ({
   maintainAspectRatio: false,
   plugins: {
     legend: {
-      display: false,
+      display: false
     },
     tooltip: {
       callbacks: {
@@ -463,10 +741,10 @@ const doughnutOptions = computed(() => ({
           const total = context.dataset.data.reduce((a: number, b: number) => a + b, 0)
           const percentage = ((value / total) * 100).toFixed(1)
           return `${context.label}: ${formatTokens(value)} (${percentage}%)`
-        },
-      },
-    },
-  },
+        }
+      }
+    }
+  }
 }))
 
 // Line chart options
@@ -475,7 +753,7 @@ const lineOptions = computed(() => ({
   maintainAspectRatio: false,
   interaction: {
     intersect: false,
-    mode: 'index' as const,
+    mode: 'index' as const
   },
   plugins: {
     legend: {
@@ -486,9 +764,9 @@ const lineOptions = computed(() => ({
         pointStyle: 'circle',
         padding: 15,
         font: {
-          size: 11,
-        },
-      },
+          size: 11
+        }
+      }
     },
     tooltip: {
       callbacks: {
@@ -502,35 +780,35 @@ const lineOptions = computed(() => ({
             return `Actual: $${formatCost(data.actual_cost)} | Standard: $${formatCost(data.cost)}`
           }
           return ''
-        },
-      },
-    },
+        }
+      }
+    }
   },
   scales: {
     x: {
       grid: {
-        color: chartColors.value.grid,
+        color: chartColors.value.grid
       },
       ticks: {
         color: chartColors.value.text,
         font: {
-          size: 10,
-        },
-      },
+          size: 10
+        }
+      }
     },
     y: {
       grid: {
-        color: chartColors.value.grid,
+        color: chartColors.value.grid
       },
       ticks: {
         color: chartColors.value.text,
         font: {
-          size: 10,
+          size: 10
         },
-        callback: (value: string | number) => formatTokens(Number(value)),
-      },
-    },
-  },
+        callback: (value: string | number) => formatTokens(Number(value))
+      }
+    }
+  }
 }))
 
 // Model chart data
@@ -538,17 +816,27 @@ const modelChartData = computed(() => {
   if (!modelStats.value?.length) return null
 
   const colors = [
-    '#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6',
-    '#ec4899', '#14b8a6', '#f97316', '#6366f1', '#84cc16'
+    '#3b82f6',
+    '#10b981',
+    '#f59e0b',
+    '#ef4444',
+    '#8b5cf6',
+    '#ec4899',
+    '#14b8a6',
+    '#f97316',
+    '#6366f1',
+    '#84cc16'
   ]
 
   return {
-    labels: modelStats.value.map(m => m.model),
-    datasets: [{
-      data: modelStats.value.map(m => m.total_tokens),
-      backgroundColor: colors.slice(0, modelStats.value.length),
-      borderWidth: 0,
-    }],
+    labels: modelStats.value.map((m) => m.model),
+    datasets: [
+      {
+        data: modelStats.value.map((m) => m.total_tokens),
+        backgroundColor: colors.slice(0, modelStats.value.length),
+        borderWidth: 0
+      }
+    ]
   }
 })
 
@@ -557,33 +845,33 @@ const trendChartData = computed(() => {
   if (!trendData.value?.length) return null
 
   return {
-    labels: trendData.value.map(d => d.date),
+    labels: trendData.value.map((d) => d.date),
     datasets: [
       {
         label: 'Input',
-        data: trendData.value.map(d => d.input_tokens),
+        data: trendData.value.map((d) => d.input_tokens),
         borderColor: chartColors.value.input,
         backgroundColor: `${chartColors.value.input}20`,
         fill: true,
-        tension: 0.3,
+        tension: 0.3
       },
       {
         label: 'Output',
-        data: trendData.value.map(d => d.output_tokens),
+        data: trendData.value.map((d) => d.output_tokens),
         borderColor: chartColors.value.output,
         backgroundColor: `${chartColors.value.output}20`,
         fill: true,
-        tension: 0.3,
+        tension: 0.3
       },
       {
         label: 'Cache',
-        data: trendData.value.map(d => d.cache_tokens),
+        data: trendData.value.map((d) => d.cache_tokens),
         borderColor: chartColors.value.cache,
         backgroundColor: `${chartColors.value.cache}20`,
         fill: true,
-        tension: 0.3,
-      },
-    ],
+        tension: 0.3
+      }
+    ]
   }
 })
 
@@ -641,7 +929,11 @@ const navigateTo = (path: string) => {
 }
 
 // Date range change handler
-const onDateRangeChange = (range: { startDate: string; endDate: string; preset: string | null }) => {
+const onDateRangeChange = (range: {
+  startDate: string
+  endDate: string
+  preset: string | null
+}) => {
   const start = new Date(range.startDate)
   const end = new Date(range.endDate)
   const daysDiff = Math.ceil((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24))
@@ -685,12 +977,12 @@ const loadChartData = async () => {
     const params = {
       start_date: startDate.value,
       end_date: endDate.value,
-      granularity: granularity.value,
+      granularity: granularity.value
     }
 
     const [trendResponse, modelResponse] = await Promise.all([
       usageAPI.getDashboardTrend(params),
-      usageAPI.getDashboardModels({ start_date: startDate.value, end_date: endDate.value }),
+      usageAPI.getDashboardModels({ start_date: startDate.value, end_date: endDate.value })
     ])
 
     // Ensure we always have arrays, even if API returns null
@@ -731,7 +1023,7 @@ watch(isDarkMode, () => {
 <style scoped>
 /* Compact Select styling for dashboard */
 :deep(.select-trigger) {
-  @apply px-3 py-1.5 text-sm rounded-lg;
+  @apply rounded-lg px-3 py-1.5 text-sm;
 }
 
 :deep(.select-dropdown) {
diff --git a/frontend/src/views/user/KeysView.vue b/frontend/src/views/user/KeysView.vue
index 756a18ac..478b40c5 100644
--- a/frontend/src/views/user/KeysView.vue
+++ b/frontend/src/views/user/KeysView.vue
@@ -10,17 +10,27 @@
           :title="t('common.refresh')"
         >
           <svg
-            :class="['w-5 h-5', loading ? 'animate-spin' : '']"
-            fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"
+            :class="['h-5 w-5', loading ? 'animate-spin' : '']"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="1.5"
           >
-            <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+            />
           </svg>
         </button>
-        <button
-          @click="showCreateModal = true"
-          class="btn btn-primary"
-        >
-          <svg class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+        <button @click="showCreateModal = true" class="btn btn-primary">
+          <svg
+            class="mr-2 h-5 w-5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="1.5"
+          >
             <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
           </svg>
           {{ t('keys.createKey') }}
@@ -29,11 +39,7 @@
 
       <!-- API Keys Table -->
       <div class="card overflow-hidden">
-        <DataTable
-          :columns="columns"
-          :data="apiKeys"
-          :loading="loading"
-        >
+        <DataTable :columns="columns" :data="apiKeys" :loading="loading">
           <template #cell-key="{ value, row }">
             <div class="flex items-center gap-2">
               <code class="code text-xs">
@@ -41,16 +47,37 @@
               </code>
               <button
                 @click="copyToClipboard(value, row.id)"
-                class="p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-dark-700 transition-colors"
-                :class="copiedKeyId === row.id ? 'text-green-500' : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'"
+                class="rounded-lg p-1 transition-colors hover:bg-gray-100 dark:hover:bg-dark-700"
+                :class="
+                  copiedKeyId === row.id
+                    ? 'text-green-500'
+                    : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'
+                "
                 :title="copiedKeyId === row.id ? t('keys.copied') : t('keys.copyToClipboard')"
               >
-                <svg v-if="copiedKeyId === row.id" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+                <svg
+                  v-if="copiedKeyId === row.id"
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                >
                   <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                 </svg>
-                <svg v-else class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round"
-                    d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" />
+                <svg
+                  v-else
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"
+                  />
                 </svg>
               </button>
             </div>
@@ -61,11 +88,11 @@
           </template>
 
           <template #cell-group="{ row }">
-            <div class="relative group/dropdown">
+            <div class="group/dropdown relative">
               <button
                 :ref="(el) => setGroupButtonRef(row.id, el)"
                 @click="openGroupSelector(row)"
-                class="flex items-center gap-2 px-2 py-1 -mx-2 -my-1 rounded-lg hover:bg-gray-100 dark:hover:bg-dark-700 transition-all duration-200 cursor-pointer"
+                class="-mx-2 -my-1 flex cursor-pointer items-center gap-2 rounded-lg px-2 py-1 transition-all duration-200 hover:bg-gray-100 dark:hover:bg-dark-700"
                 :title="t('keys.clickToChangeGroup')"
               >
                 <GroupBadge
@@ -75,9 +102,21 @@
                   :subscription-type="row.group.subscription_type"
                   :rate-multiplier="row.group.rate_multiplier"
                 />
-                <span v-else class="text-sm text-gray-400 dark:text-dark-500">{{ t('keys.noGroup') }}</span>
-                <svg class="w-3.5 h-3.5 text-gray-400 opacity-0 group-hover/dropdown:opacity-100 transition-opacity" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
+                <span v-else class="text-sm text-gray-400 dark:text-dark-500">{{
+                  t('keys.noGroup')
+                }}</span>
+                <svg
+                  class="h-3.5 w-3.5 text-gray-400 opacity-0 transition-opacity group-hover/dropdown:opacity-100"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9"
+                  />
                 </svg>
               </button>
             </div>
@@ -91,7 +130,7 @@
                   ${{ (usageStats[row.id]?.today_actual_cost ?? 0).toFixed(4) }}
                 </span>
               </div>
-              <div class="flex items-center gap-1.5 mt-0.5">
+              <div class="mt-0.5 flex items-center gap-1.5">
                 <span class="text-gray-500 dark:text-gray-400">{{ t('keys.total') }}:</span>
                 <span class="font-medium text-gray-900 dark:text-white">
                   ${{ (usageStats[row.id]?.total_actual_cost ?? 0).toFixed(4) }}
@@ -101,14 +140,7 @@
           </template>
 
           <template #cell-status="{ value }">
-            <span
-              :class="[
-                'badge',
-                value === 'active'
-                  ? 'badge-success'
-                  : 'badge-gray'
-              ]"
-            >
+            <span :class="['badge', value === 'active' ? 'badge-success' : 'badge-gray']">
               {{ value }}
             </span>
           </template>
@@ -122,61 +154,121 @@
               <!-- Use Key Button -->
               <button
                 @click="openUseKeyModal(row)"
-                class="p-2 rounded-lg hover:bg-green-50 dark:hover:bg-green-900/20 text-gray-500 hover:text-green-600 dark:hover:text-green-400 transition-colors"
+                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-green-50 hover:text-green-600 dark:hover:bg-green-900/20 dark:hover:text-green-400"
                 :title="t('keys.useKey')"
               >
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z" />
+                <svg
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"
+                  />
                 </svg>
               </button>
               <!-- Import to CC Switch Button -->
               <button
                 @click="importToCcswitch(row.key)"
-                class="p-2 rounded-lg hover:bg-blue-50 dark:hover:bg-blue-900/20 text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-blue-50 hover:text-blue-600 dark:hover:bg-blue-900/20 dark:hover:text-blue-400"
                 :title="t('keys.importToCcSwitch')"
               >
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
+                <svg
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
+                  />
                 </svg>
               </button>
               <!-- Toggle Status Button -->
               <button
                 @click="toggleKeyStatus(row)"
                 :class="[
-                  'p-2 rounded-lg transition-colors',
+                  'rounded-lg p-2 transition-colors',
                   row.status === 'active'
-                    ? 'hover:bg-yellow-50 dark:hover:bg-yellow-900/20 text-gray-500 hover:text-yellow-600 dark:hover:text-yellow-400'
-                    : 'hover:bg-green-50 dark:hover:bg-green-900/20 text-gray-500 hover:text-green-600 dark:hover:text-green-400'
+                    ? 'text-gray-500 hover:bg-yellow-50 hover:text-yellow-600 dark:hover:bg-yellow-900/20 dark:hover:text-yellow-400'
+                    : 'text-gray-500 hover:bg-green-50 hover:text-green-600 dark:hover:bg-green-900/20 dark:hover:text-green-400'
                 ]"
                 :title="row.status === 'active' ? t('keys.disable') : t('keys.enable')"
               >
-                <svg v-if="row.status === 'active'" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
+                <svg
+                  v-if="row.status === 'active'"
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
+                  />
                 </svg>
-                <svg v-else class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                <svg
+                  v-else
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
                 </svg>
               </button>
               <!-- Edit Button -->
               <button
                 @click="editKey(row)"
-                class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-dark-700 text-gray-500 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
+                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-primary-600 dark:hover:bg-dark-700 dark:hover:text-primary-400"
                 title="Edit"
               >
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round"
-                    d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
+                <svg
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
+                  />
                 </svg>
               </button>
               <!-- Delete Button -->
               <button
                 @click="confirmDelete(row)"
-                class="p-2 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 text-gray-500 hover:text-red-600 dark:hover:text-red-400 transition-colors"
+                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
                 title="Delete"
               >
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round"
-                    d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
+                <svg
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+                  />
                 </svg>
               </button>
             </div>
@@ -292,28 +384,37 @@
         </div>
 
         <div class="flex justify-end gap-3 pt-4">
-          <button
-            @click="closeModals"
-            type="button"
-            class="btn btn-secondary"
-          >
+          <button @click="closeModals" type="button" class="btn btn-secondary">
             {{ t('common.cancel') }}
           </button>
-          <button
-            type="submit"
-            :disabled="submitting"
-            class="btn btn-primary"
-          >
+          <button type="submit" :disabled="submitting" class="btn btn-primary">
             <svg
               v-if="submitting"
-              class="animate-spin -ml-1 mr-2 h-4 w-4"
+              class="-ml-1 mr-2 h-4 w-4 animate-spin"
               fill="none"
               viewBox="0 0 24 24"
             >
-              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              <circle
+                class="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                stroke-width="4"
+              ></circle>
+              <path
+                class="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              ></path>
             </svg>
-            {{ submitting ? t('keys.saving') : (showEditModal ? t('common.update') : t('common.create')) }}
+            {{
+              submitting
+                ? t('keys.saving')
+                : showEditModal
+                  ? t('common.update')
+                  : t('common.create')
+            }}
           </button>
         </div>
       </form>
@@ -345,17 +446,18 @@
       <div
         v-if="groupSelectorKeyId !== null && dropdownPosition"
         ref="dropdownRef"
-        class="fixed z-[9999] w-64 rounded-xl bg-white dark:bg-dark-800 shadow-lg ring-1 ring-black/5 dark:ring-white/10 overflow-hidden animate-in fade-in slide-in-from-top-2 duration-200"
+        class="animate-in fade-in slide-in-from-top-2 fixed z-[9999] w-64 overflow-hidden rounded-xl bg-white shadow-lg ring-1 ring-black/5 duration-200 dark:bg-dark-800 dark:ring-white/10"
         :style="{ top: dropdownPosition.top + 'px', left: dropdownPosition.left + 'px' }"
       >
-        <div class="p-1.5 max-h-64 overflow-y-auto">
+        <div class="max-h-64 overflow-y-auto p-1.5">
           <button
             v-for="option in groupOptions"
             :key="option.value ?? 'null'"
             @click="changeGroup(selectedKeyForGroup!, option.value)"
             :class="[
-              'w-full flex items-center justify-between px-3 py-2 rounded-lg text-sm transition-colors',
-              (selectedKeyForGroup?.group_id === option.value || (!selectedKeyForGroup?.group_id && option.value === null))
+              'flex w-full items-center justify-between rounded-lg px-3 py-2 text-sm transition-colors',
+              selectedKeyForGroup?.group_id === option.value ||
+              (!selectedKeyForGroup?.group_id && option.value === null)
                 ? 'bg-primary-50 dark:bg-primary-900/20'
                 : 'hover:bg-gray-100 dark:hover:bg-dark-700'
             ]"
@@ -367,8 +469,11 @@
               :rate-multiplier="option.rate"
             />
             <svg
-              v-if="selectedKeyForGroup?.group_id === option.value || (!selectedKeyForGroup?.group_id && option.value === null)"
-              class="w-4 h-4 text-primary-600 dark:text-primary-400 shrink-0"
+              v-if="
+                selectedKeyForGroup?.group_id === option.value ||
+                (!selectedKeyForGroup?.group_id && option.value === null)
+              "
+              class="h-4 w-4 shrink-0 text-primary-600 dark:text-primary-400"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -451,7 +556,7 @@ const groupButtonRefs = ref<Map<number, HTMLElement>>(new Map())
 // Get the currently selected key for group change
 const selectedKeyForGroup = computed(() => {
   if (groupSelectorKeyId.value === null) return null
-  return apiKeys.value.find(k => k.id === groupSelectorKeyId.value) || null
+  return apiKeys.value.find((k) => k.id === groupSelectorKeyId.value) || null
 })
 
 const setGroupButtonRef = (keyId: number, el: Element | ComponentPublicInstance | null) => {
@@ -493,7 +598,7 @@ const statusOptions = computed(() => [
 
 // Convert groups to Select options format with rate multiplier and subscription type
 const groupOptions = computed(() =>
-  groups.value.map(group => ({
+  groups.value.map((group) => ({
     value: group.id,
     label: group.name,
     rate: group.rate_multiplier,
@@ -538,7 +643,7 @@ const loadApiKeys = async () => {
 
     // Load usage stats for all API keys in the list
     if (response.items.length > 0) {
-      const keyIds = response.items.map(k => k.id)
+      const keyIds = response.items.map((k) => k.id)
       try {
         const usageResponse = await usageAPI.getDashboardApiKeysUsage(keyIds)
         usageStats.value = usageResponse.stats
@@ -600,7 +705,9 @@ const toggleKeyStatus = async (key: ApiKey) => {
   const newStatus = key.status === 'active' ? 'inactive' : 'active'
   try {
     await keysAPI.toggleStatus(key.id, newStatus)
-    appStore.showSuccess(newStatus === 'active' ? t('keys.keyEnabledSuccess') : t('keys.keyDisabledSuccess'))
+    appStore.showSuccess(
+      newStatus === 'active' ? t('keys.keyEnabledSuccess') : t('keys.keyDisabledSuccess')
+    )
     loadApiKeys()
   } catch (error) {
     appStore.showError(t('keys.failedToUpdateStatus'))
diff --git a/frontend/src/views/user/ProfileView.vue b/frontend/src/views/user/ProfileView.vue
index 8abab363..a35faef7 100644
--- a/frontend/src/views/user/ProfileView.vue
+++ b/frontend/src/views/user/ProfileView.vue
@@ -1,6 +1,6 @@
 <template>
   <AppLayout>
-    <div class="max-w-4xl mx-auto space-y-6">
+    <div class="mx-auto max-w-4xl space-y-6">
       <!-- Account Stats Summary -->
       <div class="grid grid-cols-1 gap-6 sm:grid-cols-3">
         <StatCard
@@ -25,28 +25,26 @@
 
       <!-- User Information -->
       <div class="card overflow-hidden">
-        <div class="px-6 py-5 bg-gradient-to-r from-primary-500/10 to-primary-600/5 dark:from-primary-500/20 dark:to-primary-600/10 border-b border-gray-100 dark:border-dark-700">
+        <div
+          class="border-b border-gray-100 bg-gradient-to-r from-primary-500/10 to-primary-600/5 px-6 py-5 dark:border-dark-700 dark:from-primary-500/20 dark:to-primary-600/10"
+        >
           <div class="flex items-center gap-4">
             <!-- Avatar -->
-            <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-primary-500 to-primary-600 flex items-center justify-center text-white text-2xl font-bold shadow-lg shadow-primary-500/20">
+            <div
+              class="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-500 to-primary-600 text-2xl font-bold text-white shadow-lg shadow-primary-500/20"
+            >
               {{ user?.email?.charAt(0).toUpperCase() || 'U' }}
             </div>
-            <div class="flex-1 min-w-0">
-              <h2 class="text-lg font-semibold text-gray-900 dark:text-white truncate">{{ user?.email }}</h2>
-              <div class="flex items-center gap-2 mt-1">
-                <span
-                  :class="[
-                    'badge',
-                    user?.role === 'admin' ? 'badge-primary' : 'badge-gray'
-                  ]"
-                >
+            <div class="min-w-0 flex-1">
+              <h2 class="truncate text-lg font-semibold text-gray-900 dark:text-white">
+                {{ user?.email }}
+              </h2>
+              <div class="mt-1 flex items-center gap-2">
+                <span :class="['badge', user?.role === 'admin' ? 'badge-primary' : 'badge-gray']">
                   {{ user?.role === 'admin' ? t('profile.administrator') : t('profile.user') }}
                 </span>
                 <span
-                  :class="[
-                    'badge',
-                    user?.status === 'active' ? 'badge-success' : 'badge-danger'
-                  ]"
+                  :class="['badge', user?.status === 'active' ? 'badge-success' : 'badge-danger']"
                 >
                   {{ user?.status }}
                 </span>
@@ -57,20 +55,56 @@
         <div class="px-6 py-4">
           <div class="space-y-3">
             <div class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-400">
-              <svg class="w-4 h-4 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
+              <svg
+                class="h-4 w-4 text-gray-400 dark:text-gray-500"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
+                />
               </svg>
               <span class="truncate">{{ user?.email }}</span>
             </div>
-            <div v-if="user?.username" class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-400">
-              <svg class="w-4 h-4 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
+            <div
+              v-if="user?.username"
+              class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-400"
+            >
+              <svg
+                class="h-4 w-4 text-gray-400 dark:text-gray-500"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"
+                />
               </svg>
               <span class="truncate">{{ user.username }}</span>
             </div>
-            <div v-if="user?.wechat" class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-400">
-              <svg class="w-4 h-4 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z" />
+            <div
+              v-if="user?.wechat"
+              class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-400"
+            >
+              <svg
+                class="h-4 w-4 text-gray-400 dark:text-gray-500"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z"
+                />
               </svg>
               <span class="truncate">{{ user.wechat }}</span>
             </div>
@@ -79,17 +113,36 @@
       </div>
 
       <!-- Contact Support Section -->
-      <div v-if="contactInfo" class="card border-primary-200 dark:border-primary-800/40 bg-gradient-to-r from-primary-50 to-primary-100/50 dark:from-primary-900/20 dark:to-primary-800/10">
+      <div
+        v-if="contactInfo"
+        class="card border-primary-200 bg-gradient-to-r from-primary-50 to-primary-100/50 dark:border-primary-800/40 dark:from-primary-900/20 dark:to-primary-800/10"
+      >
         <div class="px-6 py-5">
           <div class="flex items-center gap-4">
-            <div class="flex-shrink-0 w-12 h-12 rounded-xl bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center">
-              <svg class="w-6 h-6 text-primary-600 dark:text-primary-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z" />
+            <div
+              class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl bg-primary-100 dark:bg-primary-900/30"
+            >
+              <svg
+                class="h-6 w-6 text-primary-600 dark:text-primary-400"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z"
+                />
               </svg>
             </div>
-            <div class="flex-1 min-w-0">
-              <h3 class="text-sm font-semibold text-primary-800 dark:text-primary-200">{{ t('common.contactSupport') }}</h3>
-              <p class="mt-1 text-sm font-medium text-primary-600 dark:text-primary-300">{{ contactInfo }}</p>
+            <div class="min-w-0 flex-1">
+              <h3 class="text-sm font-semibold text-primary-800 dark:text-primary-200">
+                {{ t('common.contactSupport') }}
+              </h3>
+              <p class="mt-1 text-sm font-medium text-primary-600 dark:text-primary-300">
+                {{ contactInfo }}
+              </p>
             </div>
           </div>
         </div>
@@ -97,8 +150,10 @@
 
       <!-- Edit Profile Section -->
       <div class="card">
-        <div class="px-6 py-4 border-b border-gray-100 dark:border-dark-700">
-          <h2 class="text-lg font-medium text-gray-900 dark:text-white">{{ t('profile.editProfile') }}</h2>
+        <div class="border-b border-gray-100 px-6 py-4 dark:border-dark-700">
+          <h2 class="text-lg font-medium text-gray-900 dark:text-white">
+            {{ t('profile.editProfile') }}
+          </h2>
         </div>
         <div class="px-6 py-6">
           <form @submit.prevent="handleUpdateProfile" class="space-y-4">
@@ -129,11 +184,7 @@
             </div>
 
             <div class="flex justify-end pt-4">
-              <button
-                type="submit"
-                :disabled="updatingProfile"
-                class="btn btn-primary"
-              >
+              <button type="submit" :disabled="updatingProfile" class="btn btn-primary">
                 {{ updatingProfile ? t('profile.updating') : t('profile.updateProfile') }}
               </button>
             </div>
@@ -143,8 +194,10 @@
 
       <!-- Change Password Section -->
       <div class="card">
-        <div class="px-6 py-4 border-b border-gray-100 dark:border-dark-700">
-          <h2 class="text-lg font-medium text-gray-900 dark:text-white">{{ t('profile.changePassword') }}</h2>
+        <div class="border-b border-gray-100 px-6 py-4 dark:border-dark-700">
+          <h2 class="text-lg font-medium text-gray-900 dark:text-white">
+            {{ t('profile.changePassword') }}
+          </h2>
         </div>
         <div class="px-6 py-6">
           <form @submit.prevent="handleChangePassword" class="space-y-4">
@@ -194,18 +247,17 @@
             </div>
 
             <div class="flex justify-end pt-4">
-              <button
-                type="submit"
-                :disabled="changingPassword"
-                class="btn btn-primary"
-              >
-                {{ changingPassword ? t('profile.changingPassword') : t('profile.changePasswordButton') }}
+              <button type="submit" :disabled="changingPassword" class="btn btn-primary">
+                {{
+                  changingPassword
+                    ? t('profile.changingPassword')
+                    : t('profile.changePasswordButton')
+                }}
               </button>
             </div>
           </form>
         </div>
       </div>
-
     </div>
   </AppLayout>
 </template>
@@ -223,21 +275,48 @@ import StatCard from '@/components/common/StatCard.vue'
 
 // SVG Icon Components
 const WalletIcon = {
-  render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
-    h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M21 12a2.25 2.25 0 00-2.25-2.25H15a3 3 0 11-6 0H5.25A2.25 2.25 0 003 12m18 0v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6m18 0V9M3 12V9m18 0a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 9m18 0V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v3' })
-  ])
+  render: () =>
+    h(
+      'svg',
+      { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' },
+      [
+        h('path', {
+          'stroke-linecap': 'round',
+          'stroke-linejoin': 'round',
+          d: 'M21 12a2.25 2.25 0 00-2.25-2.25H15a3 3 0 11-6 0H5.25A2.25 2.25 0 003 12m18 0v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6m18 0V9M3 12V9m18 0a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 9m18 0V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v3'
+        })
+      ]
+    )
 }
 
 const BoltIcon = {
-  render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
-    h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'm3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z' })
-  ])
+  render: () =>
+    h(
+      'svg',
+      { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' },
+      [
+        h('path', {
+          'stroke-linecap': 'round',
+          'stroke-linejoin': 'round',
+          d: 'm3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z'
+        })
+      ]
+    )
 }
 
 const CalendarIcon = {
-  render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
-    h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5' })
-  ])
+  render: () =>
+    h(
+      'svg',
+      { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' },
+      [
+        h('path', {
+          'stroke-linecap': 'round',
+          'stroke-linejoin': 'round',
+          d: 'M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5'
+        })
+      ]
+    )
 }
 
 const authStore = useAuthStore()
@@ -303,10 +382,7 @@ const handleChangePassword = async () => {
 
   changingPassword.value = true
   try {
-    await userAPI.changePassword(
-      passwordForm.value.old_password,
-      passwordForm.value.new_password
-    )
+    await userAPI.changePassword(passwordForm.value.old_password, passwordForm.value.new_password)
 
     // Clear form
     passwordForm.value = {
diff --git a/frontend/src/views/user/RedeemView.vue b/frontend/src/views/user/RedeemView.vue
index bd4864e4..cd25b7e7 100644
--- a/frontend/src/views/user/RedeemView.vue
+++ b/frontend/src/views/user/RedeemView.vue
@@ -1,12 +1,24 @@
 <template>
   <AppLayout>
-    <div class="max-w-2xl mx-auto space-y-6">
+    <div class="mx-auto max-w-2xl space-y-6">
       <!-- Current Balance Card -->
       <div class="card overflow-hidden">
         <div class="bg-gradient-to-br from-primary-500 to-primary-600 px-6 py-8 text-center">
-          <div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-white/20 backdrop-blur-sm mb-4">
-            <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" />
+          <div
+            class="mb-4 inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-white/20 backdrop-blur-sm"
+          >
+            <svg
+              class="h-8 w-8 text-white"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="1.5"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z"
+              />
             </svg>
           </div>
           <p class="text-sm font-medium text-primary-100">{{ t('redeem.currentBalance') }}</p>
@@ -28,9 +40,19 @@
                 {{ t('redeem.redeemCodeLabel') }}
               </label>
               <div class="relative mt-1">
-                <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-                  <svg class="w-5 h-5 text-gray-400 dark:text-dark-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M21 11.25v8.25a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 109.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1114.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
+                <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4">
+                  <svg
+                    class="h-5 w-5 text-gray-400 dark:text-dark-500"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      d="M21 11.25v8.25a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 109.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1114.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"
+                    />
                   </svg>
                 </div>
                 <input
@@ -40,7 +62,7 @@
                   required
                   :placeholder="t('redeem.redeemCodePlaceholder')"
                   :disabled="submitting"
-                  class="input pl-12 text-lg py-3"
+                  class="input py-3 pl-12 text-lg"
                 />
               </div>
               <p class="input-hint">
@@ -55,15 +77,37 @@
             >
               <svg
                 v-if="submitting"
-                class="animate-spin -ml-1 mr-2 h-5 w-5"
+                class="-ml-1 mr-2 h-5 w-5 animate-spin"
                 fill="none"
                 viewBox="0 0 24 24"
               >
-                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                <circle
+                  class="opacity-25"
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  stroke="currentColor"
+                  stroke-width="4"
+                ></circle>
+                <path
+                  class="opacity-75"
+                  fill="currentColor"
+                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                ></path>
               </svg>
-              <svg v-else class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              <svg
+                v-else
+                class="mr-2 h-5 w-5"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
               </svg>
               {{ submitting ? t('redeem.redeeming') : t('redeem.redeemButton') }}
             </button>
@@ -75,13 +119,25 @@
       <transition name="fade">
         <div
           v-if="redeemResult"
-          class="card border-emerald-200 dark:border-emerald-800/50 bg-emerald-50 dark:bg-emerald-900/20"
+          class="card border-emerald-200 bg-emerald-50 dark:border-emerald-800/50 dark:bg-emerald-900/20"
         >
           <div class="p-6">
             <div class="flex items-start gap-4">
-              <div class="flex-shrink-0 w-10 h-10 rounded-xl bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center">
-                <svg class="w-5 h-5 text-emerald-600 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              <div
+                class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-emerald-100 dark:bg-emerald-900/30"
+              >
+                <svg
+                  class="h-5 w-5 text-emerald-600 dark:text-emerald-400"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
                 </svg>
               </div>
               <div class="flex-1">
@@ -95,18 +151,27 @@
                       {{ t('redeem.added') }}: ${{ redeemResult.value.toFixed(2) }}
                     </p>
                     <p v-else-if="redeemResult.type === 'concurrency'" class="font-medium">
-                      {{ t('redeem.added') }}: {{ redeemResult.value }} {{ t('redeem.concurrentRequests') }}
+                      {{ t('redeem.added') }}: {{ redeemResult.value }}
+                      {{ t('redeem.concurrentRequests') }}
                     </p>
                     <p v-else-if="redeemResult.type === 'subscription'" class="font-medium">
                       {{ t('redeem.subscriptionAssigned') }}
                       <span v-if="redeemResult.group_name"> - {{ redeemResult.group_name }}</span>
-                      <span v-if="redeemResult.validity_days"> ({{ t('redeem.subscriptionDays', { days: redeemResult.validity_days }) }})</span>
+                      <span v-if="redeemResult.validity_days">
+                        ({{
+                          t('redeem.subscriptionDays', { days: redeemResult.validity_days })
+                        }})</span
+                      >
                     </p>
                     <p v-if="redeemResult.new_balance !== undefined">
-                      {{ t('redeem.newBalance') }}: <span class="font-semibold">${{ redeemResult.new_balance.toFixed(2) }}</span>
+                      {{ t('redeem.newBalance') }}:
+                      <span class="font-semibold">${{ redeemResult.new_balance.toFixed(2) }}</span>
                     </p>
                     <p v-if="redeemResult.new_concurrency !== undefined">
-                      {{ t('redeem.newConcurrency') }}: <span class="font-semibold">{{ redeemResult.new_concurrency }} {{ t('redeem.requests') }}</span>
+                      {{ t('redeem.newConcurrency') }}:
+                      <span class="font-semibold"
+                        >{{ redeemResult.new_concurrency }} {{ t('redeem.requests') }}</span
+                      >
                     </p>
                   </div>
                 </div>
@@ -120,13 +185,25 @@
       <transition name="fade">
         <div
           v-if="errorMessage"
-          class="card border-red-200 dark:border-red-800/50 bg-red-50 dark:bg-red-900/20"
+          class="card border-red-200 bg-red-50 dark:border-red-800/50 dark:bg-red-900/20"
         >
           <div class="p-6">
             <div class="flex items-start gap-4">
-              <div class="flex-shrink-0 w-10 h-10 rounded-xl bg-red-100 dark:bg-red-900/30 flex items-center justify-center">
-                <svg class="w-5 h-5 text-red-600 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+              <div
+                class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-red-100 dark:bg-red-900/30"
+              >
+                <svg
+                  class="h-5 w-5 text-red-600 dark:text-red-400"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+                  />
                 </svg>
               </div>
               <div class="flex-1">
@@ -143,24 +220,43 @@
       </transition>
 
       <!-- Information Card -->
-      <div class="card border-primary-200 dark:border-primary-800/50 bg-primary-50 dark:bg-primary-900/20">
+      <div
+        class="card border-primary-200 bg-primary-50 dark:border-primary-800/50 dark:bg-primary-900/20"
+      >
         <div class="p-6">
           <div class="flex items-start gap-4">
-            <div class="flex-shrink-0 w-10 h-10 rounded-xl bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center">
-              <svg class="w-5 h-5 text-primary-600 dark:text-primary-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
+            <div
+              class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-primary-100 dark:bg-primary-900/30"
+            >
+              <svg
+                class="h-5 w-5 text-primary-600 dark:text-primary-400"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
+                />
               </svg>
             </div>
             <div class="flex-1">
               <h3 class="text-sm font-semibold text-primary-800 dark:text-primary-300">
                 {{ t('redeem.aboutCodes') }}
               </h3>
-              <ul class="mt-2 text-sm text-primary-700 dark:text-primary-400 space-y-1 list-disc list-inside">
+              <ul
+                class="mt-2 list-inside list-disc space-y-1 text-sm text-primary-700 dark:text-primary-400"
+              >
                 <li>{{ t('redeem.codeRule1') }}</li>
                 <li>{{ t('redeem.codeRule2') }}</li>
                 <li>
                   {{ t('redeem.codeRule3') }}
-                  <span v-if="contactInfo" class="inline-flex items-center ml-1.5 px-2 py-0.5 rounded-md bg-primary-200/50 dark:bg-primary-800/40 text-primary-800 dark:text-primary-200 font-medium text-xs">
+                  <span
+                    v-if="contactInfo"
+                    class="ml-1.5 inline-flex items-center rounded-md bg-primary-200/50 px-2 py-0.5 text-xs font-medium text-primary-800 dark:bg-primary-800/40 dark:text-primary-200"
+                  >
                     {{ contactInfo }}
                   </span>
                 </li>
@@ -173,15 +269,28 @@
 
       <!-- Recent Activity -->
       <div class="card">
-        <div class="px-6 py-4 border-b border-gray-100 dark:border-dark-700">
-          <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ t('redeem.recentActivity') }}</h2>
+        <div class="border-b border-gray-100 px-6 py-4 dark:border-dark-700">
+          <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
+            {{ t('redeem.recentActivity') }}
+          </h2>
         </div>
         <div class="p-6">
           <!-- Loading State -->
           <div v-if="loadingHistory" class="flex items-center justify-center py-8">
-            <svg class="animate-spin h-6 w-6 text-primary-500" fill="none" viewBox="0 0 24 24">
-              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            <svg class="h-6 w-6 animate-spin text-primary-500" fill="none" viewBox="0 0 24 24">
+              <circle
+                class="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                stroke-width="4"
+              ></circle>
+              <path
+                class="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              ></path>
             </svg>
           </div>
 
@@ -190,57 +299,77 @@
             <div
               v-for="item in history"
               :key="item.id"
-              class="flex items-center justify-between p-4 rounded-xl bg-gray-50 dark:bg-dark-800"
+              class="flex items-center justify-between rounded-xl bg-gray-50 p-4 dark:bg-dark-800"
             >
               <div class="flex items-center gap-4">
                 <div
                   :class="[
-                    'w-10 h-10 rounded-xl flex items-center justify-center',
+                    'flex h-10 w-10 items-center justify-center rounded-xl',
                     isBalanceType(item.type)
-                      ? (item.value >= 0 ? 'bg-emerald-100 dark:bg-emerald-900/30' : 'bg-red-100 dark:bg-red-900/30')
+                      ? item.value >= 0
+                        ? 'bg-emerald-100 dark:bg-emerald-900/30'
+                        : 'bg-red-100 dark:bg-red-900/30'
                       : isSubscriptionType(item.type)
                         ? 'bg-purple-100 dark:bg-purple-900/30'
-                        : (item.value >= 0 ? 'bg-blue-100 dark:bg-blue-900/30' : 'bg-orange-100 dark:bg-orange-900/30')
+                        : item.value >= 0
+                          ? 'bg-blue-100 dark:bg-blue-900/30'
+                          : 'bg-orange-100 dark:bg-orange-900/30'
                   ]"
                 >
                   <!-- 余额类型图标 -->
                   <svg
                     v-if="isBalanceType(item.type)"
                     :class="[
-                      'w-5 h-5',
-                      item.value >= 0 ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400'
+                      'h-5 w-5',
+                      item.value >= 0
+                        ? 'text-emerald-600 dark:text-emerald-400'
+                        : 'text-red-600 dark:text-red-400'
                     ]"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor"
                     stroke-width="1.5"
                   >
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
                   </svg>
                   <!-- 订阅类型图标 -->
                   <svg
                     v-else-if="isSubscriptionType(item.type)"
-                    class="w-5 h-5 text-purple-600 dark:text-purple-400"
+                    class="h-5 w-5 text-purple-600 dark:text-purple-400"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor"
                     stroke-width="1.5"
                   >
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z" />
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z"
+                    />
                   </svg>
                   <!-- 并发类型图标 -->
                   <svg
                     v-else
                     :class="[
-                      'w-5 h-5',
-                      item.value >= 0 ? 'text-blue-600 dark:text-blue-400' : 'text-orange-600 dark:text-orange-400'
+                      'h-5 w-5',
+                      item.value >= 0
+                        ? 'text-blue-600 dark:text-blue-400'
+                        : 'text-orange-600 dark:text-orange-400'
                     ]"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor"
                     stroke-width="1.5"
                   >
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"
+                    />
                   </svg>
                 </div>
                 <div>
@@ -257,15 +386,22 @@
                   :class="[
                     'text-sm font-semibold',
                     isBalanceType(item.type)
-                      ? (item.value >= 0 ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400')
+                      ? item.value >= 0
+                        ? 'text-emerald-600 dark:text-emerald-400'
+                        : 'text-red-600 dark:text-red-400'
                       : isSubscriptionType(item.type)
                         ? 'text-purple-600 dark:text-purple-400'
-                        : (item.value >= 0 ? 'text-blue-600 dark:text-blue-400' : 'text-orange-600 dark:text-orange-400')
+                        : item.value >= 0
+                          ? 'text-blue-600 dark:text-blue-400'
+                          : 'text-orange-600 dark:text-orange-400'
                   ]"
                 >
                   {{ formatHistoryValue(item) }}
                 </p>
-                <p v-if="!isAdminAdjustment(item.type)" class="text-xs text-gray-400 dark:text-dark-500 font-mono">
+                <p
+                  v-if="!isAdminAdjustment(item.type)"
+                  class="font-mono text-xs text-gray-400 dark:text-dark-500"
+                >
                   {{ item.code.slice(0, 8) }}...
                 </p>
                 <p v-else class="text-xs text-gray-400 dark:text-dark-500">
@@ -277,9 +413,21 @@
 
           <!-- Empty State -->
           <div v-else class="empty-state py-8">
-            <div class="w-16 h-16 mb-4 rounded-2xl bg-gray-100 dark:bg-dark-800 flex items-center justify-center">
-              <svg class="w-8 h-8 text-gray-400 dark:text-dark-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+            <div
+              class="mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-gray-100 dark:bg-dark-800"
+            >
+              <svg
+                class="h-8 w-8 text-gray-400 dark:text-dark-500"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
               </svg>
             </div>
             <p class="text-sm text-gray-500 dark:text-dark-400">
diff --git a/frontend/src/views/user/SubscriptionsView.vue b/frontend/src/views/user/SubscriptionsView.vue
index a96935cb..cb3b2dee 100644
--- a/frontend/src/views/user/SubscriptionsView.vue
+++ b/frontend/src/views/user/SubscriptionsView.vue
@@ -3,17 +3,31 @@
     <div class="space-y-6">
       <!-- Loading State -->
       <div v-if="loading" class="flex justify-center py-12">
-        <div class="animate-spin rounded-full h-8 w-8 border-2 border-primary-500 border-t-transparent"></div>
+        <div
+          class="h-8 w-8 animate-spin rounded-full border-2 border-primary-500 border-t-transparent"
+        ></div>
       </div>
 
       <!-- Empty State -->
       <div v-else-if="subscriptions.length === 0" class="card p-12 text-center">
-        <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-100 dark:bg-dark-700 flex items-center justify-center">
-          <svg class="w-8 h-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z" />
+        <div
+          class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-gray-100 dark:bg-dark-700"
+        >
+          <svg
+            class="h-8 w-8 text-gray-400"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="1.5"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z"
+            />
           </svg>
         </div>
-        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+        <h3 class="mb-2 text-lg font-semibold text-gray-900 dark:text-white">
           {{ t('userSubscriptions.noActiveSubscriptions') }}
         </h3>
         <p class="text-gray-500 dark:text-dark-400">
@@ -29,11 +43,25 @@
           class="card overflow-hidden"
         >
           <!-- Header -->
-          <div class="flex items-center justify-between p-4 border-b border-gray-100 dark:border-dark-700">
+          <div
+            class="flex items-center justify-between border-b border-gray-100 p-4 dark:border-dark-700"
+          >
             <div class="flex items-center gap-3">
-              <div class="w-10 h-10 rounded-xl bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center">
-                <svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z" />
+              <div
+                class="flex h-10 w-10 items-center justify-center rounded-xl bg-purple-100 dark:bg-purple-900/30"
+              >
+                <svg
+                  class="h-5 w-5 text-purple-600 dark:text-purple-400"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z"
+                  />
                 </svg>
               </div>
               <div>
@@ -48,8 +76,11 @@
             <span
               :class="[
                 'badge',
-                subscription.status === 'active' ? 'badge-success' :
-                subscription.status === 'expired' ? 'badge-warning' : 'badge-danger'
+                subscription.status === 'active'
+                  ? 'badge-success'
+                  : subscription.status === 'expired'
+                    ? 'badge-warning'
+                    : 'badge-danger'
               ]"
             >
               {{ t(`userSubscriptions.status.${subscription.status}`) }}
@@ -57,17 +88,23 @@
           </div>
 
           <!-- Usage Progress -->
-          <div class="p-4 space-y-4">
+          <div class="space-y-4 p-4">
             <!-- Expiration Info -->
             <div v-if="subscription.expires_at" class="flex items-center justify-between text-sm">
-              <span class="text-gray-500 dark:text-dark-400">{{ t('userSubscriptions.expires') }}</span>
+              <span class="text-gray-500 dark:text-dark-400">{{
+                t('userSubscriptions.expires')
+              }}</span>
               <span :class="getExpirationClass(subscription.expires_at)">
                 {{ formatExpirationDate(subscription.expires_at) }}
               </span>
             </div>
             <div v-else class="flex items-center justify-between text-sm">
-              <span class="text-gray-500 dark:text-dark-400">{{ t('userSubscriptions.expires') }}</span>
-              <span class="text-gray-700 dark:text-gray-300">{{ t('userSubscriptions.noExpiration') }}</span>
+              <span class="text-gray-500 dark:text-dark-400">{{
+                t('userSubscriptions.expires')
+              }}</span>
+              <span class="text-gray-700 dark:text-gray-300">{{
+                t('userSubscriptions.noExpiration')
+              }}</span>
             </div>
 
             <!-- Daily Usage -->
@@ -77,18 +114,37 @@
                   {{ t('userSubscriptions.daily') }}
                 </span>
                 <span class="text-sm text-gray-500 dark:text-dark-400">
-                  ${{ (subscription.daily_usage_usd || 0).toFixed(2) }} / ${{ subscription.group.daily_limit_usd.toFixed(2) }}
+                  ${{ (subscription.daily_usage_usd || 0).toFixed(2) }} / ${{
+                    subscription.group.daily_limit_usd.toFixed(2)
+                  }}
                 </span>
               </div>
-              <div class="relative h-2 bg-gray-200 dark:bg-dark-600 rounded-full overflow-hidden">
+              <div class="relative h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-dark-600">
                 <div
                   class="absolute inset-y-0 left-0 rounded-full transition-all duration-300"
-                  :class="getProgressBarClass(subscription.daily_usage_usd, subscription.group.daily_limit_usd)"
-                  :style="{ width: getProgressWidth(subscription.daily_usage_usd, subscription.group.daily_limit_usd) }"
+                  :class="
+                    getProgressBarClass(
+                      subscription.daily_usage_usd,
+                      subscription.group.daily_limit_usd
+                    )
+                  "
+                  :style="{
+                    width: getProgressWidth(
+                      subscription.daily_usage_usd,
+                      subscription.group.daily_limit_usd
+                    )
+                  }"
                 ></div>
               </div>
-              <p v-if="subscription.daily_window_start" class="text-xs text-gray-500 dark:text-dark-400">
-                {{ t('userSubscriptions.resetIn', { time: formatResetTime(subscription.daily_window_start, 24) }) }}
+              <p
+                v-if="subscription.daily_window_start"
+                class="text-xs text-gray-500 dark:text-dark-400"
+              >
+                {{
+                  t('userSubscriptions.resetIn', {
+                    time: formatResetTime(subscription.daily_window_start, 24)
+                  })
+                }}
               </p>
             </div>
 
@@ -99,18 +155,37 @@
                   {{ t('userSubscriptions.weekly') }}
                 </span>
                 <span class="text-sm text-gray-500 dark:text-dark-400">
-                  ${{ (subscription.weekly_usage_usd || 0).toFixed(2) }} / ${{ subscription.group.weekly_limit_usd.toFixed(2) }}
+                  ${{ (subscription.weekly_usage_usd || 0).toFixed(2) }} / ${{
+                    subscription.group.weekly_limit_usd.toFixed(2)
+                  }}
                 </span>
               </div>
-              <div class="relative h-2 bg-gray-200 dark:bg-dark-600 rounded-full overflow-hidden">
+              <div class="relative h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-dark-600">
                 <div
                   class="absolute inset-y-0 left-0 rounded-full transition-all duration-300"
-                  :class="getProgressBarClass(subscription.weekly_usage_usd, subscription.group.weekly_limit_usd)"
-                  :style="{ width: getProgressWidth(subscription.weekly_usage_usd, subscription.group.weekly_limit_usd) }"
+                  :class="
+                    getProgressBarClass(
+                      subscription.weekly_usage_usd,
+                      subscription.group.weekly_limit_usd
+                    )
+                  "
+                  :style="{
+                    width: getProgressWidth(
+                      subscription.weekly_usage_usd,
+                      subscription.group.weekly_limit_usd
+                    )
+                  }"
                 ></div>
               </div>
-              <p v-if="subscription.weekly_window_start" class="text-xs text-gray-500 dark:text-dark-400">
-                {{ t('userSubscriptions.resetIn', { time: formatResetTime(subscription.weekly_window_start, 168) }) }}
+              <p
+                v-if="subscription.weekly_window_start"
+                class="text-xs text-gray-500 dark:text-dark-400"
+              >
+                {{
+                  t('userSubscriptions.resetIn', {
+                    time: formatResetTime(subscription.weekly_window_start, 168)
+                  })
+                }}
               </p>
             </div>
 
@@ -121,27 +196,52 @@
                   {{ t('userSubscriptions.monthly') }}
                 </span>
                 <span class="text-sm text-gray-500 dark:text-dark-400">
-                  ${{ (subscription.monthly_usage_usd || 0).toFixed(2) }} / ${{ subscription.group.monthly_limit_usd.toFixed(2) }}
+                  ${{ (subscription.monthly_usage_usd || 0).toFixed(2) }} / ${{
+                    subscription.group.monthly_limit_usd.toFixed(2)
+                  }}
                 </span>
               </div>
-              <div class="relative h-2 bg-gray-200 dark:bg-dark-600 rounded-full overflow-hidden">
+              <div class="relative h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-dark-600">
                 <div
                   class="absolute inset-y-0 left-0 rounded-full transition-all duration-300"
-                  :class="getProgressBarClass(subscription.monthly_usage_usd, subscription.group.monthly_limit_usd)"
-                  :style="{ width: getProgressWidth(subscription.monthly_usage_usd, subscription.group.monthly_limit_usd) }"
+                  :class="
+                    getProgressBarClass(
+                      subscription.monthly_usage_usd,
+                      subscription.group.monthly_limit_usd
+                    )
+                  "
+                  :style="{
+                    width: getProgressWidth(
+                      subscription.monthly_usage_usd,
+                      subscription.group.monthly_limit_usd
+                    )
+                  }"
                 ></div>
               </div>
-              <p v-if="subscription.monthly_window_start" class="text-xs text-gray-500 dark:text-dark-400">
-                {{ t('userSubscriptions.resetIn', { time: formatResetTime(subscription.monthly_window_start, 720) }) }}
+              <p
+                v-if="subscription.monthly_window_start"
+                class="text-xs text-gray-500 dark:text-dark-400"
+              >
+                {{
+                  t('userSubscriptions.resetIn', {
+                    time: formatResetTime(subscription.monthly_window_start, 720)
+                  })
+                }}
               </p>
             </div>
 
             <!-- No limits configured -->
             <div
-              v-if="!subscription.group?.daily_limit_usd && !subscription.group?.weekly_limit_usd && !subscription.group?.monthly_limit_usd"
-              class="text-center py-4"
+              v-if="
+                !subscription.group?.daily_limit_usd &&
+                !subscription.group?.weekly_limit_usd &&
+                !subscription.group?.monthly_limit_usd
+              "
+              class="py-4 text-center"
             >
-              <span class="text-sm text-gray-500 dark:text-dark-400">{{ t('userSubscriptions.unlimited') }}</span>
+              <span class="text-sm text-gray-500 dark:text-dark-400">{{
+                t('userSubscriptions.unlimited')
+              }}</span>
             </div>
           </div>
         </div>
@@ -151,110 +251,110 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useAppStore } from '@/stores/app';
-import subscriptionsAPI from '@/api/subscriptions';
-import type { UserSubscription } from '@/types';
-import AppLayout from '@/components/layout/AppLayout.vue';
+import { ref, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useAppStore } from '@/stores/app'
+import subscriptionsAPI from '@/api/subscriptions'
+import type { UserSubscription } from '@/types'
+import AppLayout from '@/components/layout/AppLayout.vue'
 
-const { t } = useI18n();
-const appStore = useAppStore();
+const { t } = useI18n()
+const appStore = useAppStore()
 
-const subscriptions = ref<UserSubscription[]>([]);
-const loading = ref(true);
+const subscriptions = ref<UserSubscription[]>([])
+const loading = ref(true)
 
 async function loadSubscriptions() {
   try {
-    loading.value = true;
-    subscriptions.value = await subscriptionsAPI.getMySubscriptions();
+    loading.value = true
+    subscriptions.value = await subscriptionsAPI.getMySubscriptions()
   } catch (error) {
-    console.error('Failed to load subscriptions:', error);
-    appStore.showError('Failed to load subscriptions');
+    console.error('Failed to load subscriptions:', error)
+    appStore.showError('Failed to load subscriptions')
   } finally {
-    loading.value = false;
+    loading.value = false
   }
 }
 
 function getProgressWidth(used: number | undefined, limit: number | null | undefined): string {
-  if (!limit || limit === 0) return '0%';
-  const percentage = Math.min(((used || 0) / limit) * 100, 100);
-  return `${percentage}%`;
+  if (!limit || limit === 0) return '0%'
+  const percentage = Math.min(((used || 0) / limit) * 100, 100)
+  return `${percentage}%`
 }
 
 function getProgressBarClass(used: number | undefined, limit: number | null | undefined): string {
-  if (!limit || limit === 0) return 'bg-gray-400';
-  const percentage = ((used || 0) / limit) * 100;
-  if (percentage >= 90) return 'bg-red-500';
-  if (percentage >= 70) return 'bg-orange-500';
-  return 'bg-green-500';
+  if (!limit || limit === 0) return 'bg-gray-400'
+  const percentage = ((used || 0) / limit) * 100
+  if (percentage >= 90) return 'bg-red-500'
+  if (percentage >= 70) return 'bg-orange-500'
+  return 'bg-green-500'
 }
 
 function formatExpirationDate(expiresAt: string): string {
-  const now = new Date();
-  const expires = new Date(expiresAt);
-  const diff = expires.getTime() - now.getTime();
-  const days = Math.ceil(diff / (1000 * 60 * 60 * 24));
+  const now = new Date()
+  const expires = new Date(expiresAt)
+  const diff = expires.getTime() - now.getTime()
+  const days = Math.ceil(diff / (1000 * 60 * 60 * 24))
 
   if (days < 0) {
-    return t('userSubscriptions.status.expired');
+    return t('userSubscriptions.status.expired')
   }
 
   const dateStr = expires.toLocaleDateString(undefined, {
     year: 'numeric',
     month: 'short',
     day: 'numeric'
-  });
+  })
 
   if (days === 0) {
-    return `${dateStr} (Today)`;
+    return `${dateStr} (Today)`
   }
   if (days === 1) {
-    return `${dateStr} (Tomorrow)`;
+    return `${dateStr} (Tomorrow)`
   }
 
-  return t('userSubscriptions.daysRemaining', { days }) + ` (${dateStr})`;
+  return t('userSubscriptions.daysRemaining', { days }) + ` (${dateStr})`
 }
 
 function getExpirationClass(expiresAt: string): string {
-  const now = new Date();
-  const expires = new Date(expiresAt);
-  const diff = expires.getTime() - now.getTime();
-  const days = Math.ceil(diff / (1000 * 60 * 60 * 24));
+  const now = new Date()
+  const expires = new Date(expiresAt)
+  const diff = expires.getTime() - now.getTime()
+  const days = Math.ceil(diff / (1000 * 60 * 60 * 24))
 
-  if (days <= 0) return 'text-red-600 dark:text-red-400 font-medium';
-  if (days <= 3) return 'text-red-600 dark:text-red-400';
-  if (days <= 7) return 'text-orange-600 dark:text-orange-400';
-  return 'text-gray-700 dark:text-gray-300';
+  if (days <= 0) return 'text-red-600 dark:text-red-400 font-medium'
+  if (days <= 3) return 'text-red-600 dark:text-red-400'
+  if (days <= 7) return 'text-orange-600 dark:text-orange-400'
+  return 'text-gray-700 dark:text-gray-300'
 }
 
 function formatResetTime(windowStart: string | null, windowHours: number): string {
-  if (!windowStart) return t('userSubscriptions.windowNotActive');
+  if (!windowStart) return t('userSubscriptions.windowNotActive')
 
-  const start = new Date(windowStart);
-  const end = new Date(start.getTime() + windowHours * 60 * 60 * 1000);
-  const now = new Date();
-  const diff = end.getTime() - now.getTime();
+  const start = new Date(windowStart)
+  const end = new Date(start.getTime() + windowHours * 60 * 60 * 1000)
+  const now = new Date()
+  const diff = end.getTime() - now.getTime()
 
-  if (diff <= 0) return t('userSubscriptions.windowNotActive');
+  if (diff <= 0) return t('userSubscriptions.windowNotActive')
 
-  const hours = Math.floor(diff / (1000 * 60 * 60));
-  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+  const hours = Math.floor(diff / (1000 * 60 * 60))
+  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
 
   if (hours > 24) {
-    const days = Math.floor(hours / 24);
-    const remainingHours = hours % 24;
-    return `${days}d ${remainingHours}h`;
+    const days = Math.floor(hours / 24)
+    const remainingHours = hours % 24
+    return `${days}d ${remainingHours}h`
   }
 
   if (hours > 0) {
-    return `${hours}h ${minutes}m`;
+    return `${hours}h ${minutes}m`
   }
 
-  return `${minutes}m`;
+  return `${minutes}m`
 }
 
 onMounted(() => {
-  loadSubscriptions();
-});
+  loadSubscriptions()
+})
 </script>
diff --git a/frontend/src/views/user/UsageView.vue b/frontend/src/views/user/UsageView.vue
index c8c40b9d..9b3ccabe 100644
--- a/frontend/src/views/user/UsageView.vue
+++ b/frontend/src/views/user/UsageView.vue
@@ -6,15 +6,31 @@
         <!-- Total Requests -->
         <div class="card p-4">
           <div class="flex items-center gap-3">
-            <div class="p-2 rounded-lg bg-blue-100 dark:bg-blue-900/30">
-              <svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+            <div class="rounded-lg bg-blue-100 p-2 dark:bg-blue-900/30">
+              <svg
+                class="h-5 w-5 text-blue-600 dark:text-blue-400"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                />
               </svg>
             </div>
             <div>
-              <p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('usage.totalRequests') }}</p>
-              <p class="text-xl font-bold text-gray-900 dark:text-white">{{ usageStats?.total_requests?.toLocaleString() || '0' }}</p>
-              <p class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.inSelectedRange') }}</p>
+              <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
+                {{ t('usage.totalRequests') }}
+              </p>
+              <p class="text-xl font-bold text-gray-900 dark:text-white">
+                {{ usageStats?.total_requests?.toLocaleString() || '0' }}
+              </p>
+              <p class="text-xs text-gray-500 dark:text-gray-400">
+                {{ t('usage.inSelectedRange') }}
+              </p>
             </div>
           </div>
         </div>
@@ -22,15 +38,32 @@
         <!-- Total Tokens -->
         <div class="card p-4">
           <div class="flex items-center gap-3">
-            <div class="p-2 rounded-lg bg-amber-100 dark:bg-amber-900/30">
-              <svg class="w-5 h-5 text-amber-600 dark:text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
+            <div class="rounded-lg bg-amber-100 p-2 dark:bg-amber-900/30">
+              <svg
+                class="h-5 w-5 text-amber-600 dark:text-amber-400"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"
+                />
               </svg>
             </div>
             <div>
-              <p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('usage.totalTokens') }}</p>
-              <p class="text-xl font-bold text-gray-900 dark:text-white">{{ formatTokens(usageStats?.total_tokens || 0) }}</p>
-              <p class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.in') }}: {{ formatTokens(usageStats?.total_input_tokens || 0) }} / {{ t('usage.out') }}: {{ formatTokens(usageStats?.total_output_tokens || 0) }}</p>
+              <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
+                {{ t('usage.totalTokens') }}
+              </p>
+              <p class="text-xl font-bold text-gray-900 dark:text-white">
+                {{ formatTokens(usageStats?.total_tokens || 0) }}
+              </p>
+              <p class="text-xs text-gray-500 dark:text-gray-400">
+                {{ t('usage.in') }}: {{ formatTokens(usageStats?.total_input_tokens || 0) }} /
+                {{ t('usage.out') }}: {{ formatTokens(usageStats?.total_output_tokens || 0) }}
+              </p>
             </div>
           </div>
         </div>
@@ -38,16 +71,32 @@
         <!-- Total Cost -->
         <div class="card p-4">
           <div class="flex items-center gap-3">
-            <div class="p-2 rounded-lg bg-green-100 dark:bg-green-900/30">
-              <svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            <div class="rounded-lg bg-green-100 p-2 dark:bg-green-900/30">
+              <svg
+                class="h-5 w-5 text-green-600 dark:text-green-400"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
               </svg>
             </div>
             <div class="min-w-0 flex-1">
-              <p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('usage.totalCost') }}</p>
-              <p class="text-xl font-bold text-green-600 dark:text-green-400">${{ (usageStats?.total_actual_cost || 0).toFixed(4) }}</p>
+              <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
+                {{ t('usage.totalCost') }}
+              </p>
+              <p class="text-xl font-bold text-green-600 dark:text-green-400">
+                ${{ (usageStats?.total_actual_cost || 0).toFixed(4) }}
+              </p>
               <p class="text-xs text-gray-500 dark:text-gray-400">
-                {{ t('usage.actualCost') }} / <span class="line-through">${{ (usageStats?.total_cost || 0).toFixed(4) }}</span> {{ t('usage.standardCost') }}
+                {{ t('usage.actualCost') }} /
+                <span class="line-through">${{ (usageStats?.total_cost || 0).toFixed(4) }}</span>
+                {{ t('usage.standardCost') }}
               </p>
             </div>
           </div>
@@ -56,14 +105,28 @@
         <!-- Average Duration -->
         <div class="card p-4">
           <div class="flex items-center gap-3">
-            <div class="p-2 rounded-lg bg-purple-100 dark:bg-purple-900/30">
-              <svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+            <div class="rounded-lg bg-purple-100 p-2 dark:bg-purple-900/30">
+              <svg
+                class="h-5 w-5 text-purple-600 dark:text-purple-400"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
               </svg>
             </div>
             <div>
-              <p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('usage.avgDuration') }}</p>
-              <p class="text-xl font-bold text-gray-900 dark:text-white">{{ formatDuration(usageStats?.average_duration_ms || 0) }}</p>
+              <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
+                {{ t('usage.avgDuration') }}
+              </p>
+              <p class="text-xl font-bold text-gray-900 dark:text-white">
+                {{ formatDuration(usageStats?.average_duration_ms || 0) }}
+              </p>
               <p class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.perRequest') }}</p>
             </div>
           </div>
@@ -96,17 +159,11 @@
             </div>
 
             <!-- Actions -->
-            <div class="flex items-center gap-3 ml-auto">
-              <button
-                @click="resetFilters"
-                class="btn btn-secondary"
-              >
+            <div class="ml-auto flex items-center gap-3">
+              <button @click="resetFilters" class="btn btn-secondary">
                 {{ t('common.reset') }}
               </button>
-              <button
-                @click="exportToCSV"
-                class="btn btn-primary"
-              >
+              <button @click="exportToCSV" class="btn btn-primary">
                 {{ t('usage.exportCsv') }}
               </button>
             </div>
@@ -116,96 +173,167 @@
 
       <!-- Usage Table -->
       <div class="card overflow-hidden">
-        <DataTable
-          :columns="columns"
-          :data="usageLogs"
-          :loading="loading"
-        >
+        <DataTable :columns="columns" :data="usageLogs" :loading="loading">
           <template #cell-model="{ value }">
             <span class="font-medium text-gray-900 dark:text-white">{{ value }}</span>
           </template>
 
           <template #cell-stream="{ row }">
             <span
-              class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium"
-              :class="row.stream
-                ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
-                : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200'"
+              class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium"
+              :class="
+                row.stream
+                  ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
+                  : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200'
+              "
             >
               {{ row.stream ? t('usage.stream') : t('usage.sync') }}
             </span>
           </template>
 
           <template #cell-tokens="{ row }">
-            <div class="text-sm space-y-1.5">
+            <div class="space-y-1.5 text-sm">
               <!-- Input / Output Tokens -->
               <div class="flex items-center gap-2">
                 <!-- Input -->
                 <div class="inline-flex items-center gap-1">
-                  <svg class="w-3.5 h-3.5 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+                  <svg
+                    class="h-3.5 w-3.5 text-emerald-500"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M19 14l-7 7m0 0l-7-7m7 7V3"
+                    />
                   </svg>
-                  <span class="font-medium text-gray-900 dark:text-white">{{ row.input_tokens.toLocaleString() }}</span>
+                  <span class="font-medium text-gray-900 dark:text-white">{{
+                    row.input_tokens.toLocaleString()
+                  }}</span>
                 </div>
                 <!-- Output -->
                 <div class="inline-flex items-center gap-1">
-                  <svg class="w-3.5 h-3.5 text-violet-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
+                  <svg
+                    class="h-3.5 w-3.5 text-violet-500"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M5 10l7-7m0 0l7 7m-7-7v18"
+                    />
                   </svg>
-                  <span class="font-medium text-gray-900 dark:text-white">{{ row.output_tokens.toLocaleString() }}</span>
+                  <span class="font-medium text-gray-900 dark:text-white">{{
+                    row.output_tokens.toLocaleString()
+                  }}</span>
                 </div>
               </div>
               <!-- Cache Tokens (Read + Write) -->
-              <div v-if="row.cache_read_tokens > 0 || row.cache_creation_tokens > 0" class="flex items-center gap-2">
+              <div
+                v-if="row.cache_read_tokens > 0 || row.cache_creation_tokens > 0"
+                class="flex items-center gap-2"
+              >
                 <!-- Cache Read -->
                 <div v-if="row.cache_read_tokens > 0" class="inline-flex items-center gap-1">
-                  <svg class="w-3.5 h-3.5 text-sky-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
+                  <svg
+                    class="h-3.5 w-3.5 text-sky-500"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"
+                    />
                   </svg>
-                  <span class="text-sky-600 dark:text-sky-400 font-medium">{{ formatCacheTokens(row.cache_read_tokens) }}</span>
+                  <span class="font-medium text-sky-600 dark:text-sky-400">{{
+                    formatCacheTokens(row.cache_read_tokens)
+                  }}</span>
                 </div>
                 <!-- Cache Write -->
                 <div v-if="row.cache_creation_tokens > 0" class="inline-flex items-center gap-1">
-                  <svg class="w-3.5 h-3.5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                  <svg
+                    class="h-3.5 w-3.5 text-amber-500"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+                    />
                   </svg>
-                  <span class="text-amber-600 dark:text-amber-400 font-medium">{{ formatCacheTokens(row.cache_creation_tokens) }}</span>
+                  <span class="font-medium text-amber-600 dark:text-amber-400">{{
+                    formatCacheTokens(row.cache_creation_tokens)
+                  }}</span>
                 </div>
               </div>
             </div>
           </template>
 
           <template #cell-cost="{ row }">
-            <div class="text-sm flex items-center gap-1.5">
+            <div class="flex items-center gap-1.5 text-sm">
               <span class="font-medium text-green-600 dark:text-green-400">
                 ${{ row.actual_cost.toFixed(6) }}
               </span>
               <!-- Cost Detail Tooltip -->
-              <div class="relative group">
-                <div class="flex items-center justify-center w-4 h-4 rounded-full bg-gray-100 dark:bg-gray-700 cursor-help transition-colors group-hover:bg-blue-100 dark:group-hover:bg-blue-900/50">
-                  <svg class="w-3 h-3 text-gray-400 dark:text-gray-500 group-hover:text-blue-500 dark:group-hover:text-blue-400" fill="currentColor" viewBox="0 0 20 20">
-                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
+              <div class="group relative">
+                <div
+                  class="flex h-4 w-4 cursor-help items-center justify-center rounded-full bg-gray-100 transition-colors group-hover:bg-blue-100 dark:bg-gray-700 dark:group-hover:bg-blue-900/50"
+                >
+                  <svg
+                    class="h-3 w-3 text-gray-400 group-hover:text-blue-500 dark:text-gray-500 dark:group-hover:text-blue-400"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+                      clip-rule="evenodd"
+                    />
                   </svg>
                 </div>
                 <!-- Tooltip Content (right side) -->
-                <div class="absolute z-[100] invisible group-hover:visible opacity-0 group-hover:opacity-100 transition-all duration-200 left-full top-1/2 -translate-y-1/2 ml-2">
-                  <div class="bg-gray-900 dark:bg-gray-800 text-white text-xs rounded-lg py-2.5 px-3 shadow-xl whitespace-nowrap border border-gray-700 dark:border-gray-600">
+                <div
+                  class="invisible absolute left-full top-1/2 z-[100] ml-2 -translate-y-1/2 opacity-0 transition-all duration-200 group-hover:visible group-hover:opacity-100"
+                >
+                  <div
+                    class="whitespace-nowrap rounded-lg border border-gray-700 bg-gray-900 px-3 py-2.5 text-xs text-white shadow-xl dark:border-gray-600 dark:bg-gray-800"
+                  >
                     <div class="space-y-1.5">
                       <div class="flex items-center justify-between gap-6">
                         <span class="text-gray-400">{{ t('usage.rate') }}</span>
-                        <span class="font-semibold text-blue-400">{{ (row.rate_multiplier || 1).toFixed(2) }}x</span>
+                        <span class="font-semibold text-blue-400"
+                          >{{ (row.rate_multiplier || 1).toFixed(2) }}x</span
+                        >
                       </div>
                       <div class="flex items-center justify-between gap-6">
                         <span class="text-gray-400">{{ t('usage.original') }}</span>
                         <span class="font-medium text-white">${{ row.total_cost.toFixed(6) }}</span>
                       </div>
-                      <div class="flex items-center justify-between gap-6 pt-1.5 border-t border-gray-700">
+                      <div
+                        class="flex items-center justify-between gap-6 border-t border-gray-700 pt-1.5"
+                      >
                         <span class="text-gray-400">{{ t('usage.billed') }}</span>
-                        <span class="font-semibold text-green-400">${{ row.actual_cost.toFixed(6) }}</span>
+                        <span class="font-semibold text-green-400"
+                          >${{ row.actual_cost.toFixed(6) }}</span
+                        >
                       </div>
                     </div>
                     <!-- Tooltip Arrow (left side) -->
-                    <div class="absolute right-full top-1/2 -translate-y-1/2 w-0 h-0 border-t-[6px] border-t-transparent border-b-[6px] border-b-transparent border-r-[6px] border-r-gray-900 dark:border-r-gray-800"></div>
+                    <div
+                      class="absolute right-full top-1/2 h-0 w-0 -translate-y-1/2 border-b-[6px] border-r-[6px] border-t-[6px] border-b-transparent border-r-gray-900 border-t-transparent dark:border-r-gray-800"
+                    ></div>
                   </div>
                 </div>
               </div>
@@ -214,28 +342,37 @@
 
           <template #cell-billing_type="{ row }">
             <span
-              class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium"
-              :class="row.billing_type === 1
-                ? 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200'
-                : 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-200'"
+              class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium"
+              :class="
+                row.billing_type === 1
+                  ? 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200'
+                  : 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-200'
+              "
             >
               {{ row.billing_type === 1 ? t('usage.subscription') : t('usage.balance') }}
             </span>
           </template>
 
           <template #cell-first_token="{ row }">
-            <span v-if="row.first_token_ms != null" class="text-sm text-gray-600 dark:text-gray-400">
+            <span
+              v-if="row.first_token_ms != null"
+              class="text-sm text-gray-600 dark:text-gray-400"
+            >
               {{ formatDuration(row.first_token_ms) }}
             </span>
             <span v-else class="text-sm text-gray-400 dark:text-gray-500">-</span>
           </template>
 
           <template #cell-duration="{ row }">
-            <span class="text-sm text-gray-600 dark:text-gray-400">{{ formatDuration(row.duration_ms) }}</span>
+            <span class="text-sm text-gray-600 dark:text-gray-400">{{
+              formatDuration(row.duration_ms)
+            }}</span>
           </template>
 
           <template #cell-created_at="{ value }">
-            <span class="text-sm text-gray-600 dark:text-gray-400">{{ formatDateTime(value) }}</span>
+            <span class="text-sm text-gray-600 dark:text-gray-400">{{
+              formatDateTime(value)
+            }}</span>
           </template>
 
           <template #empty>
@@ -294,7 +431,7 @@ const loading = ref(false)
 const apiKeyOptions = computed(() => {
   return [
     { value: null, label: t('usage.allApiKeys') },
-    ...apiKeys.value.map(key => ({
+    ...apiKeys.value.map((key) => ({
       value: key.id,
       label: key.name
     }))
@@ -325,7 +462,11 @@ const initializeDateRange = () => {
 }
 
 // Handle date range change from DateRangePicker
-const onDateRangeChange = (range: { startDate: string; endDate: string; preset: string | null }) => {
+const onDateRangeChange = (range: {
+  startDate: string
+  endDate: string
+  preset: string | null
+}) => {
   filters.value.start_date = range.startDate
   filters.value.end_date = range.endDate
   applyFilters()
@@ -448,8 +589,20 @@ const exportToCSV = () => {
     return
   }
 
-  const headers = ['Model', 'Type', 'Input Tokens', 'Output Tokens', 'Cache Read Tokens', 'Cache Write Tokens', 'Total Cost', 'Billing Type', 'First Token (ms)', 'Duration (ms)', 'Time']
-  const rows = usageLogs.value.map(log => [
+  const headers = [
+    'Model',
+    'Type',
+    'Input Tokens',
+    'Output Tokens',
+    'Cache Read Tokens',
+    'Cache Write Tokens',
+    'Total Cost',
+    'Billing Type',
+    'First Token (ms)',
+    'Duration (ms)',
+    'Time'
+  ]
+  const rows = usageLogs.value.map((log) => [
     log.model,
     log.stream ? 'Stream' : 'Sync',
     log.input_tokens,
@@ -463,10 +616,7 @@ const exportToCSV = () => {
     log.created_at
   ])
 
-  const csvContent = [
-    headers.join(','),
-    ...rows.map(row => row.join(','))
-  ].join('\n')
+  const csvContent = [headers.join(','), ...rows.map((row) => row.join(','))].join('\n')
 
   const blob = new Blob([csvContent], { type: 'text/csv' })
   const url = window.URL.createObjectURL(blob)