diff --git a/frontend/src/components/account/CreateAccountModal.vue b/frontend/src/components/account/CreateAccountModal.vue
index 1634777ed4..e22af4c794 100644
--- a/frontend/src/components/account/CreateAccountModal.vue
+++ b/frontend/src/components/account/CreateAccountModal.vue
@@ -1,10 +1,5 @@
 <template>
-  <Modal
-    :show="show"
-    :title="t('admin.accounts.createAccount')"
-    size="lg"
-    @close="handleClose"
-  >
+  <Modal :show="show" :title="t('admin.accounts.createAccount')" size="lg" @close="handleClose">
     <!-- Step Indicator for OAuth accounts -->
     <div v-if="isOAuthFlow" class="mb-6 flex items-center justify-center">
       <div class="flex items-center space-x-4">
@@ -17,7 +12,9 @@
           >
             1
           </div>
-          <span class="ml-2 text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('admin.accounts.oauth.authMethod') }}</span>
+          <span class="ml-2 text-sm font-medium text-gray-700 dark:text-gray-300">{{
+            t('admin.accounts.oauth.authMethod')
+          }}</span>
         </div>
         <div class="h-0.5 w-8 bg-gray-300 dark:bg-dark-600" />
         <div class="flex items-center">
@@ -29,7 +26,9 @@
           >
             2
           </div>
-          <span class="ml-2 text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('admin.accounts.oauth.title') }}</span>
+          <span class="ml-2 text-sm font-medium text-gray-700 dark:text-gray-300">{{
+            oauthStepTitle
+          }}</span>
         </div>
       </div>
     </div>
@@ -50,19 +49,29 @@
       <!-- Platform Selection - Segmented Control Style -->
       <div>
         <label class="input-label">{{ t('admin.accounts.platform') }}</label>
-        <div class="flex rounded-lg bg-gray-100 dark:bg-dark-700 p-1 mt-2">
+        <div class="mt-2 flex rounded-lg bg-gray-100 p-1 dark:bg-dark-700">
           <button
             type="button"
             @click="form.platform = 'anthropic'"
             :class="[
-              'flex-1 flex items-center justify-center gap-2 rounded-md px-4 py-2.5 text-sm font-medium transition-all',
+              'flex flex-1 items-center justify-center gap-2 rounded-md px-4 py-2.5 text-sm font-medium transition-all',
               form.platform === 'anthropic'
-                ? 'bg-white dark:bg-dark-600 text-orange-600 dark:text-orange-400 shadow-sm'
-                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'
+                ? 'bg-white text-orange-600 shadow-sm dark:bg-dark-600 dark:text-orange-400'
+                : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200'
             ]"
           >
-            <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="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456z" />
+            <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="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456z"
+              />
             </svg>
             Anthropic
           </button>
@@ -70,47 +79,98 @@
             type="button"
             @click="form.platform = 'openai'"
             :class="[
-              'flex-1 flex items-center justify-center gap-2 rounded-md px-4 py-2.5 text-sm font-medium transition-all',
+              'flex flex-1 items-center justify-center gap-2 rounded-md px-4 py-2.5 text-sm font-medium transition-all',
               form.platform === 'openai'
-                ? 'bg-white dark:bg-dark-600 text-green-600 dark:text-green-400 shadow-sm'
-                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'
+                ? 'bg-white text-green-600 shadow-sm dark:bg-dark-600 dark:text-green-400'
+                : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200'
             ]"
           >
-            <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="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
+            <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="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"
+              />
             </svg>
             OpenAI
           </button>
+          <button
+            type="button"
+            @click="form.platform = 'gemini'"
+            :class="[
+              'flex flex-1 items-center justify-center gap-2 rounded-md px-4 py-2.5 text-sm font-medium transition-all',
+              form.platform === 'gemini'
+                ? 'bg-white text-blue-600 shadow-sm dark:bg-dark-600 dark:text-blue-400'
+                : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200'
+            ]"
+          >
+            <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="M12 2l1.5 6.5L20 10l-6.5 1.5L12 18l-1.5-6.5L4 10l6.5-1.5L12 2z"
+              />
+            </svg>
+            Gemini
+          </button>
         </div>
       </div>
 
       <!-- Account Type Selection (Anthropic) -->
       <div v-if="form.platform === 'anthropic'">
         <label class="input-label">{{ t('admin.accounts.accountType') }}</label>
-        <div class="grid grid-cols-2 gap-3 mt-2">
+        <div class="mt-2 grid grid-cols-2 gap-3">
           <button
             type="button"
             @click="accountCategory = 'oauth-based'"
             :class="[
-              'flex items-center gap-3 rounded-lg border-2 p-3 transition-all text-left',
+              'flex items-center gap-3 rounded-lg border-2 p-3 text-left transition-all',
               accountCategory === 'oauth-based'
                 ? 'border-orange-500 bg-orange-50 dark:bg-orange-900/20'
-                : 'border-gray-200 dark:border-dark-600 hover:border-orange-300 dark:hover:border-orange-700'
+                : 'border-gray-200 hover:border-orange-300 dark:border-dark-600 dark:hover:border-orange-700'
             ]"
           >
-            <div :class="[
-              'flex h-8 w-8 items-center justify-center rounded-lg',
-              accountCategory === 'oauth-based'
-                ? 'bg-orange-500 text-white'
-                : 'bg-gray-100 dark:bg-dark-600 text-gray-500 dark:text-gray-400'
-            ]">
-              <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="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456z" />
+            <div
+              :class="[
+                'flex h-8 w-8 items-center justify-center rounded-lg',
+                accountCategory === 'oauth-based'
+                  ? 'bg-orange-500 text-white'
+                  : 'bg-gray-100 text-gray-500 dark:bg-dark-600 dark:text-gray-400'
+              ]"
+            >
+              <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="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456z"
+                />
               </svg>
             </div>
             <div>
-              <span class="block text-sm font-medium text-gray-900 dark:text-white">{{ t('admin.accounts.claudeCode') }}</span>
-              <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('admin.accounts.oauthSetupToken') }}</span>
+              <span class="block text-sm font-medium text-gray-900 dark:text-white">{{
+                t('admin.accounts.claudeCode')
+              }}</span>
+              <span class="text-xs text-gray-500 dark:text-gray-400">{{
+                t('admin.accounts.oauthSetupToken')
+              }}</span>
             </div>
           </button>
 
@@ -118,25 +178,41 @@
             type="button"
             @click="accountCategory = 'apikey'"
             :class="[
-              'flex items-center gap-3 rounded-lg border-2 p-3 transition-all text-left',
+              'flex items-center gap-3 rounded-lg border-2 p-3 text-left transition-all',
               accountCategory === 'apikey'
                 ? 'border-purple-500 bg-purple-50 dark:bg-purple-900/20'
-                : 'border-gray-200 dark:border-dark-600 hover:border-purple-300 dark:hover:border-purple-700'
+                : 'border-gray-200 hover:border-purple-300 dark:border-dark-600 dark:hover:border-purple-700'
             ]"
           >
-            <div :class="[
-              'flex h-8 w-8 items-center justify-center rounded-lg',
-              accountCategory === 'apikey'
-                ? 'bg-purple-500 text-white'
-                : 'bg-gray-100 dark:bg-dark-600 text-gray-500 dark:text-gray-400'
-            ]">
-              <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="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-8 w-8 items-center justify-center rounded-lg',
+                accountCategory === 'apikey'
+                  ? 'bg-purple-500 text-white'
+                  : 'bg-gray-100 text-gray-500 dark:bg-dark-600 dark:text-gray-400'
+              ]"
+            >
+              <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="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>
-              <span class="block text-sm font-medium text-gray-900 dark:text-white">{{ t('admin.accounts.claudeConsole') }}</span>
-              <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('admin.accounts.apiKey') }}</span>
+              <span class="block text-sm font-medium text-gray-900 dark:text-white">{{
+                t('admin.accounts.claudeConsole')
+              }}</span>
+              <span class="text-xs text-gray-500 dark:text-gray-400">{{
+                t('admin.accounts.apiKey')
+              }}</span>
             </div>
           </button>
         </div>
@@ -145,25 +221,37 @@
       <!-- Account Type Selection (OpenAI) -->
       <div v-if="form.platform === 'openai'">
         <label class="input-label">{{ t('admin.accounts.accountType') }}</label>
-        <div class="grid grid-cols-2 gap-3 mt-2">
+        <div class="mt-2 grid grid-cols-2 gap-3">
           <button
             type="button"
             @click="accountCategory = 'oauth-based'"
             :class="[
-              'flex items-center gap-3 rounded-lg border-2 p-3 transition-all text-left',
+              'flex items-center gap-3 rounded-lg border-2 p-3 text-left transition-all',
               accountCategory === 'oauth-based'
                 ? 'border-green-500 bg-green-50 dark:bg-green-900/20'
-                : 'border-gray-200 dark:border-dark-600 hover:border-green-300 dark:hover:border-green-700'
+                : 'border-gray-200 hover:border-green-300 dark:border-dark-600 dark:hover:border-green-700'
             ]"
           >
-            <div :class="[
-              'flex h-8 w-8 items-center justify-center rounded-lg',
-              accountCategory === 'oauth-based'
-                ? 'bg-green-500 text-white'
-                : 'bg-gray-100 dark:bg-dark-600 text-gray-500 dark:text-gray-400'
-            ]">
-              <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="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-8 w-8 items-center justify-center rounded-lg',
+                accountCategory === 'oauth-based'
+                  ? 'bg-green-500 text-white'
+                  : 'bg-gray-100 text-gray-500 dark:bg-dark-600 dark:text-gray-400'
+              ]"
+            >
+              <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="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>
@@ -176,20 +264,32 @@
             type="button"
             @click="accountCategory = 'apikey'"
             :class="[
-              'flex items-center gap-3 rounded-lg border-2 p-3 transition-all text-left',
+              'flex items-center gap-3 rounded-lg border-2 p-3 text-left transition-all',
               accountCategory === 'apikey'
                 ? 'border-purple-500 bg-purple-50 dark:bg-purple-900/20'
-                : 'border-gray-200 dark:border-dark-600 hover:border-purple-300 dark:hover:border-purple-700'
+                : 'border-gray-200 hover:border-purple-300 dark:border-dark-600 dark:hover:border-purple-700'
             ]"
           >
-            <div :class="[
-              'flex h-8 w-8 items-center justify-center rounded-lg',
-              accountCategory === 'apikey'
-                ? 'bg-purple-500 text-white'
-                : 'bg-gray-100 dark:bg-dark-600 text-gray-500 dark:text-gray-400'
-            ]">
-              <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="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-8 w-8 items-center justify-center rounded-lg',
+                accountCategory === 'apikey'
+                  ? 'bg-purple-500 text-white'
+                  : 'bg-gray-100 text-gray-500 dark:bg-dark-600 dark:text-gray-400'
+              ]"
+            >
+              <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="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>
@@ -200,10 +300,92 @@
         </div>
       </div>
 
+      <!-- Account Type Selection (Gemini) -->
+      <div v-if="form.platform === 'gemini'">
+        <label class="input-label">{{ t('admin.accounts.accountType') }}</label>
+        <div class="mt-2 grid grid-cols-2 gap-3">
+          <button
+            type="button"
+            @click="accountCategory = 'oauth-based'"
+            :class="[
+              'flex items-center gap-3 rounded-lg border-2 p-3 text-left transition-all',
+              accountCategory === 'oauth-based'
+                ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
+                : 'border-gray-200 hover:border-blue-300 dark:border-dark-600 dark:hover:border-blue-700'
+            ]"
+          >
+            <div
+              :class="[
+                'flex h-8 w-8 items-center justify-center rounded-lg',
+                accountCategory === 'oauth-based'
+                  ? 'bg-blue-500 text-white'
+                  : 'bg-gray-100 text-gray-500 dark:bg-dark-600 dark:text-gray-400'
+              ]"
+            >
+              <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="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>
+              <span class="block text-sm font-medium text-gray-900 dark:text-white">OAuth</span>
+              <span class="text-xs text-gray-500 dark:text-gray-400">Google OAuth</span>
+            </div>
+          </button>
+
+          <button
+            type="button"
+            @click="accountCategory = 'apikey'"
+            :class="[
+              'flex items-center gap-3 rounded-lg border-2 p-3 text-left transition-all',
+              accountCategory === 'apikey'
+                ? 'border-purple-500 bg-purple-50 dark:bg-purple-900/20'
+                : 'border-gray-200 hover:border-purple-300 dark:border-dark-600 dark:hover:border-purple-700'
+            ]"
+          >
+            <div
+              :class="[
+                'flex h-8 w-8 items-center justify-center rounded-lg',
+                accountCategory === 'apikey'
+                  ? 'bg-purple-500 text-white'
+                  : 'bg-gray-100 text-gray-500 dark:bg-dark-600 dark:text-gray-400'
+              ]"
+            >
+              <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="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>
+              <span class="block text-sm font-medium text-gray-900 dark:text-white">API Key</span>
+              <span class="text-xs text-gray-500 dark:text-gray-400">AI Studio API Key</span>
+            </div>
+          </button>
+        </div>
+      </div>
+
       <!-- Add Method (only for Anthropic OAuth-based type) -->
       <div v-if="form.platform === 'anthropic' && isOAuthFlow">
         <label class="input-label">{{ t('admin.accounts.addMethod') }}</label>
-        <div class="flex gap-4 mt-2">
+        <div class="mt-2 flex gap-4">
           <label class="flex cursor-pointer items-center">
             <input
               v-model="addMethod"
@@ -220,7 +402,9 @@
               value="setup-token"
               class="mr-2 text-primary-600 focus:ring-primary-500"
             />
-            <span class="text-sm text-gray-700 dark:text-gray-300">{{ t('admin.accounts.setupTokenLongLived') }}</span>
+            <span class="text-sm text-gray-700 dark:text-gray-300">{{
+              t('admin.accounts.setupTokenLongLived')
+            }}</span>
           </label>
         </div>
       </div>
@@ -233,7 +417,13 @@
             v-model="apiKeyBaseUrl"
             type="text"
             class="input"
-            :placeholder="form.platform === 'openai' ? 'https://api.openai.com' : 'https://api.anthropic.com'"
+            :placeholder="
+              form.platform === 'openai'
+                ? 'https://api.openai.com'
+                : form.platform === 'gemini'
+                  ? 'https://generativelanguage.googleapis.com'
+                  : 'https://api.anthropic.com'
+            "
           />
           <p class="input-hint">{{ t('admin.accounts.baseUrlHint') }}</p>
         </div>
@@ -244,17 +434,23 @@
             type="password"
             required
             class="input font-mono"
-            :placeholder="form.platform === 'openai' ? 'sk-proj-...' : 'sk-ant-...'"
+            :placeholder="
+              form.platform === 'openai'
+                ? 'sk-proj-...'
+                : form.platform === 'gemini'
+                  ? 'AIza...'
+                  : 'sk-ant-...'
+            "
           />
           <p class="input-hint">{{ t('admin.accounts.apiKeyHint') }}</p>
         </div>
 
-        <!-- Model Restriction Section -->
-        <div class="border-t border-gray-200 dark:border-dark-600 pt-4">
+        <!-- Model Restriction Section (不适用于 Gemini) -->
+        <div v-if="form.platform !== 'gemini'" class="border-t border-gray-200 pt-4 dark:border-dark-600">
           <label class="input-label">{{ t('admin.accounts.modelRestriction') }}</label>
 
           <!-- Mode Toggle -->
-          <div class="flex gap-2 mb-4">
+          <div class="mb-4 flex gap-2">
             <button
               type="button"
               @click="modelRestrictionMode = 'whitelist'"
@@ -265,8 +461,18 @@
                   : 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-dark-600 dark:text-gray-400 dark:hover:bg-dark-500'
               ]"
             >
-              <svg class="w-4 h-4 inline mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+              <svg
+                class="mr-1.5 inline h-4 w-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
               </svg>
               {{ t('admin.accounts.modelWhitelist') }}
             </button>
@@ -280,8 +486,18 @@
                   : 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-dark-600 dark:text-gray-400 dark:hover:bg-dark-500'
               ]"
             >
-              <svg class="w-4 h-4 inline mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
+              <svg
+                class="mr-1.5 inline h-4 w-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"
+                />
               </svg>
               {{ t('admin.accounts.modelMapping') }}
             </button>
@@ -289,22 +505,36 @@
 
           <!-- Whitelist Mode -->
           <div v-if="modelRestrictionMode === 'whitelist'">
-            <div class="mb-3 rounded-lg bg-blue-50 dark:bg-blue-900/20 p-3">
+            <div class="mb-3 rounded-lg bg-blue-50 p-3 dark:bg-blue-900/20">
               <p class="text-xs text-blue-700 dark:text-blue-400">
-                <svg class="w-4 h-4 inline mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                <svg
+                  class="mr-1 inline h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
                 </svg>
                 {{ t('admin.accounts.selectAllowedModels') }}
               </p>
             </div>
 
             <!-- Model Checkbox List -->
-            <div class="grid grid-cols-2 gap-2 mb-3">
+            <div class="mb-3 grid grid-cols-2 gap-2">
               <label
                 v-for="model in commonModels"
                 :key="model.value"
                 class="flex cursor-pointer items-center rounded-lg border p-3 transition-all hover:bg-gray-50 dark:border-dark-600 dark:hover:bg-dark-700"
-                :class="allowedModels.includes(model.value) ? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20' : 'border-gray-200'"
+                :class="
+                  allowedModels.includes(model.value)
+                    ? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20'
+                    : 'border-gray-200'
+                "
               >
                 <input
                   type="checkbox"
@@ -318,23 +548,35 @@
 
             <p class="text-xs text-gray-500 dark:text-gray-400">
               {{ t('admin.accounts.selectedModels', { count: allowedModels.length }) }}
-              <span v-if="allowedModels.length === 0">{{ t('admin.accounts.supportsAllModels') }}</span>
+              <span v-if="allowedModels.length === 0">{{
+                t('admin.accounts.supportsAllModels')
+              }}</span>
             </p>
           </div>
 
           <!-- Mapping Mode -->
           <div v-else>
-            <div class="mb-3 rounded-lg bg-purple-50 dark:bg-purple-900/20 p-3">
+            <div class="mb-3 rounded-lg bg-purple-50 p-3 dark:bg-purple-900/20">
               <p class="text-xs text-purple-700 dark:text-purple-400">
-                <svg class="w-4 h-4 inline mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                <svg
+                  class="mr-1 inline h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
                 </svg>
                 {{ t('admin.accounts.mapRequestModels') }}
               </p>
             </div>
 
             <!-- Model Mapping List -->
-            <div v-if="modelMappings.length > 0" class="space-y-2 mb-3">
+            <div v-if="modelMappings.length > 0" class="mb-3 space-y-2">
               <div
                 v-for="(mapping, index) in modelMappings"
                 :key="index"
@@ -346,8 +588,18 @@
                   class="input flex-1"
                   :placeholder="t('admin.accounts.requestModel')"
                 />
-                <svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
+                <svg
+                  class="h-4 w-4 flex-shrink-0 text-gray-400"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M14 5l7 7m0 0l-7 7m7-7H3"
+                  />
                 </svg>
                 <input
                   v-model="mapping.to"
@@ -358,10 +610,15 @@
                 <button
                   type="button"
                   @click="removeModelMapping(index)"
-                  class="p-2 text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg 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"
                 >
-                  <svg class="w-4 h-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 class="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>
                 </button>
               </div>
@@ -370,10 +627,20 @@
             <button
               type="button"
               @click="addModelMapping"
-              class="w-full rounded-lg border-2 border-dashed border-gray-300 dark:border-dark-500 px-4 py-2 text-gray-600 dark:text-gray-400 transition-colors hover:border-gray-400 hover:text-gray-700 dark:hover:border-dark-400 dark:hover:text-gray-300 mb-3"
+              class="mb-3 w-full rounded-lg border-2 border-dashed border-gray-300 px-4 py-2 text-gray-600 transition-colors hover:border-gray-400 hover:text-gray-700 dark:border-dark-500 dark:text-gray-400 dark:hover:border-dark-400 dark:hover:text-gray-300"
             >
-              <svg class="w-4 h-4 inline mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+              <svg
+                class="mr-1 inline h-4 w-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M12 4v16m8-8H4"
+                />
               </svg>
               {{ t('admin.accounts.addMapping') }}
             </button>
@@ -385,10 +652,7 @@
                 :key="preset.label"
                 type="button"
                 @click="addPresetMapping(preset.from, preset.to)"
-                :class="[
-                  'rounded-lg px-3 py-1 text-xs transition-colors',
-                  preset.color
-                ]"
+                :class="['rounded-lg px-3 py-1 text-xs transition-colors', preset.color]"
               >
                 + {{ preset.label }}
               </button>
@@ -397,11 +661,16 @@
         </div>
 
         <!-- Custom Error Codes Section -->
-        <div class="border-t border-gray-200 dark:border-dark-600 pt-4">
-          <div class="flex items-center justify-between mb-3">
+        <div
+          v-if="form.platform !== 'gemini'"
+          class="border-t border-gray-200 pt-4 dark:border-dark-600"
+        >
+          <div class="mb-3 flex items-center justify-between">
             <div>
               <label class="input-label mb-0">{{ t('admin.accounts.customErrorCodes') }}</label>
-              <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ t('admin.accounts.customErrorCodesHint') }}</p>
+              <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                {{ t('admin.accounts.customErrorCodesHint') }}
+              </p>
             </div>
             <button
               type="button"
@@ -421,10 +690,20 @@
           </div>
 
           <div v-if="customErrorCodesEnabled" class="space-y-3">
-            <div class="rounded-lg bg-amber-50 dark:bg-amber-900/20 p-3">
+            <div class="rounded-lg bg-amber-50 p-3 dark:bg-amber-900/20">
               <p class="text-xs text-amber-700 dark:text-amber-400">
-                <svg class="w-4 h-4 inline mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                <svg
+                  class="mr-1 inline h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                  />
                 </svg>
                 {{ t('admin.accounts.customErrorCodesWarning') }}
               </p>
@@ -440,7 +719,7 @@
                 :class="[
                   'rounded-lg px-3 py-1.5 text-sm font-medium transition-colors',
                   selectedErrorCodes.includes(code.value)
-                    ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400 ring-1 ring-red-500'
+                    ? 'bg-red-100 text-red-700 ring-1 ring-red-500 dark:bg-red-900/30 dark:text-red-400'
                     : 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-dark-600 dark:text-gray-400 dark:hover:bg-dark-500'
                 ]"
               >
@@ -459,13 +738,14 @@
                 :placeholder="t('admin.accounts.enterErrorCode')"
                 @keyup.enter="addCustomErrorCode"
               />
-              <button
-                type="button"
-                @click="addCustomErrorCode"
-                class="btn btn-secondary px-3"
-              >
-                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+              <button type="button" @click="addCustomErrorCode" class="btn btn-secondary px-3">
+                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M12 4v16m8-8H4"
+                  />
                 </svg>
               </button>
             </div>
@@ -475,7 +755,7 @@
               <span
                 v-for="code in selectedErrorCodes.sort((a, b) => a - b)"
                 :key="code"
-                class="inline-flex items-center gap-1 rounded-full bg-red-100 dark:bg-red-900/30 px-2.5 py-0.5 text-sm font-medium text-red-700 dark:text-red-400"
+                class="inline-flex items-center gap-1 rounded-full bg-red-100 px-2.5 py-0.5 text-sm font-medium text-red-700 dark:bg-red-900/30 dark:text-red-400"
               >
                 {{ code }}
                 <button
@@ -483,8 +763,13 @@
                   @click="removeErrorCode(code)"
                   class="hover:text-red-900 dark:hover:text-red-300"
                 >
-                  <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                  <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M6 18L18 6M6 6l12 12"
+                    />
                   </svg>
                 </button>
               </span>
@@ -494,14 +779,50 @@
             </div>
           </div>
         </div>
+
+        <!-- Gemini 模型说明 -->
+        <div v-if="form.platform === 'gemini'" class="border-t border-gray-200 pt-4 dark:border-dark-600">
+          <div class="rounded-lg bg-blue-50 p-4 dark:bg-blue-900/20">
+            <div class="flex items-start gap-3">
+              <svg
+                class="h-5 w-5 flex-shrink-0 text-blue-600 dark:text-blue-400"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+              <div>
+                <p class="text-sm font-medium text-blue-800 dark:text-blue-300">
+                  {{ t('admin.accounts.gemini.modelPassthrough') }}
+                </p>
+                <p class="mt-1 text-xs text-blue-700 dark:text-blue-400">
+                  {{ t('admin.accounts.gemini.modelPassthroughDesc') }}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
 
       <!-- Intercept Warmup Requests (Anthropic only) -->
-      <div v-if="form.platform === 'anthropic'" class="border-t border-gray-200 dark:border-dark-600 pt-4">
+      <div
+        v-if="form.platform === 'anthropic'"
+        class="border-t border-gray-200 pt-4 dark:border-dark-600"
+      >
         <div class="flex items-center justify-between">
           <div>
-            <label class="input-label mb-0">{{ t('admin.accounts.interceptWarmupRequests') }}</label>
-            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ t('admin.accounts.interceptWarmupRequestsDesc') }}</p>
+            <label class="input-label mb-0">{{
+              t('admin.accounts.interceptWarmupRequests')
+            }}</label>
+            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+              {{ t('admin.accounts.interceptWarmupRequestsDesc') }}
+            </p>
           </div>
           <button
             type="button"
@@ -523,92 +844,108 @@
 
       <div>
         <label class="input-label">{{ t('admin.accounts.proxy') }}</label>
-        <ProxySelector
-          v-model="form.proxy_id"
-          :proxies="proxies"
-        />
+        <ProxySelector v-model="form.proxy_id" :proxies="proxies" />
       </div>
 
       <div class="grid grid-cols-2 gap-4">
         <div>
           <label class="input-label">{{ t('admin.accounts.concurrency') }}</label>
-          <input
-            v-model.number="form.concurrency"
-            type="number"
-            min="1"
-            class="input"
-          />
+          <input v-model.number="form.concurrency" type="number" min="1" class="input" />
         </div>
         <div>
           <label class="input-label">{{ t('admin.accounts.priority') }}</label>
-          <input
-            v-model.number="form.priority"
-            type="number"
-            min="1"
-            class="input"
-          />
+          <input v-model.number="form.priority" type="number" min="1" class="input" />
           <p class="input-hint">{{ t('admin.accounts.priorityHint') }}</p>
         </div>
       </div>
 
       <!-- Group Selection -->
-      <GroupSelector
-        v-model="form.group_ids"
-        :groups="groups"
-        :platform="form.platform"
-      />
+      <GroupSelector v-model="form.group_ids" :groups="groups" :platform="form.platform" />
 
       <div class="flex justify-end gap-3 pt-4">
-        <button
-          @click="handleClose"
-          type="button"
-          class="btn btn-secondary"
-        >
+        <button @click="handleClose" 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>
-          {{ isOAuthFlow ? t('common.next') : (submitting ? t('admin.accounts.creating') : t('common.create')) }}
+          {{
+            isOAuthFlow
+              ? t('common.next')
+              : submitting
+                ? t('admin.accounts.creating')
+                : t('common.create')
+          }}
         </button>
       </div>
     </form>
 
     <!-- Step 2: OAuth Authorization -->
     <div v-else class="space-y-5">
+      <div
+        v-if="form.platform === 'gemini'"
+        class="rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-dark-600 dark:bg-dark-700"
+      >
+        <label class="input-label">{{ t('admin.accounts.oauth.gemini.redirectUri') }}</label>
+        <input
+          v-model="geminiRedirectUri"
+          type="text"
+          class="input font-mono text-sm"
+          :placeholder="defaultCallbackUrl"
+        />
+        <p class="input-hint">{{ t('admin.accounts.oauth.gemini.redirectUriHint') }}</p>
+        <div class="mt-3 flex items-start gap-2">
+          <input
+            id="gemini-redirect-uri-confirm"
+            v-model="geminiRedirectUriConfirmed"
+            type="checkbox"
+            class="mt-0.5 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-dark-500"
+          />
+          <label for="gemini-redirect-uri-confirm" class="text-sm text-gray-700 dark:text-gray-300">
+            {{ t('admin.accounts.oauth.gemini.confirmRedirectUri') }}
+          </label>
+        </div>
+        <p v-if="geminiRedirectUri && !isValidGeminiRedirectUri" class="mt-2 text-xs text-red-600">
+          {{ t('admin.accounts.oauth.gemini.invalidRedirectUri') }}
+        </p>
+      </div>
+
       <OAuthAuthorizationFlow
         ref="oauthFlowRef"
-        :add-method="form.platform === 'openai' ? 'oauth' : addMethod"
+        :add-method="form.platform === 'anthropic' ? addMethod : 'oauth'"
         :auth-url="currentAuthUrl"
         :session-id="currentSessionId"
         :loading="currentOAuthLoading"
         :error="currentOAuthError"
-        :show-help="form.platform !== 'openai'"
-        :show-proxy-warning="!!form.proxy_id"
-        :allow-multiple="form.platform !== 'openai'"
-        :show-cookie-option="form.platform !== 'openai'"
+        :show-help="form.platform === 'anthropic'"
+        :show-proxy-warning="form.platform !== 'openai' && !!form.proxy_id"
+        :allow-multiple="form.platform === 'anthropic'"
+        :show-cookie-option="form.platform === 'anthropic'"
         :platform="form.platform"
         @generate-url="handleGenerateUrl"
         @cookie-auth="handleCookieAuth"
       />
 
       <div class="flex justify-between gap-3 pt-4">
-        <button
-          type="button"
-          class="btn btn-secondary"
-          @click="goBackToBasicInfo"
-        >
+        <button type="button" class="btn btn-secondary" @click="goBackToBasicInfo">
           {{ t('common.back') }}
         </button>
         <button
@@ -620,14 +957,29 @@
         >
           <svg
             v-if="currentOAuthLoading"
-            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>
-          {{ currentOAuthLoading ? t('admin.accounts.oauth.verifying') : t('admin.accounts.oauth.completeAuth') }}
+          {{
+            currentOAuthLoading
+              ? t('admin.accounts.oauth.verifying')
+              : t('admin.accounts.oauth.completeAuth')
+          }}
         </button>
       </div>
     </div>
@@ -639,8 +991,13 @@ import { ref, reactive, computed, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useAppStore } from '@/stores/app'
 import { adminAPI } from '@/api/admin'
-import { useAccountOAuth, type AddMethod, type AuthInputMethod } from '@/composables/useAccountOAuth'
+import {
+  useAccountOAuth,
+  type AddMethod,
+  type AuthInputMethod
+} from '@/composables/useAccountOAuth'
 import { useOpenAIOAuth } from '@/composables/useOpenAIOAuth'
+import { useGeminiOAuth } from '@/composables/useGeminiOAuth'
 import type { Proxy, Group, AccountPlatform, AccountType } from '@/types'
 import Modal from '@/components/common/Modal.vue'
 import ProxySelector from '@/components/common/ProxySelector.vue'
@@ -651,6 +1008,7 @@ import OAuthAuthorizationFlow from './OAuthAuthorizationFlow.vue'
 // Note: defineExpose automatically unwraps refs, so we use the unwrapped types
 interface OAuthFlowExposed {
   authCode: string
+  oauthState: string
   sessionKey: string
   inputMethod: AuthInputMethod
   reset: () => void
@@ -658,6 +1016,12 @@ interface OAuthFlowExposed {
 
 const { t } = useI18n()
 
+const oauthStepTitle = computed(() => {
+  if (form.platform === 'openai') return t('admin.accounts.oauth.openai.title')
+  if (form.platform === 'gemini') return t('admin.accounts.oauth.gemini.title')
+  return t('admin.accounts.oauth.title')
+})
+
 interface Props {
   show: boolean
   proxies: Proxy[]
@@ -673,24 +1037,33 @@ const emit = defineEmits<{
 const appStore = useAppStore()
 
 // OAuth composables
-const oauth = useAccountOAuth()           // For Anthropic OAuth
-const openaiOAuth = useOpenAIOAuth()      // For OpenAI OAuth
+const oauth = useAccountOAuth() // For Anthropic OAuth
+const openaiOAuth = useOpenAIOAuth() // For OpenAI OAuth
+const geminiOAuth = useGeminiOAuth() // For Gemini OAuth
 
 // Computed: current OAuth state for template binding
 const currentAuthUrl = computed(() => {
-  return form.platform === 'openai' ? openaiOAuth.authUrl.value : oauth.authUrl.value
+  if (form.platform === 'openai') return openaiOAuth.authUrl.value
+  if (form.platform === 'gemini') return geminiOAuth.authUrl.value
+  return oauth.authUrl.value
 })
 
 const currentSessionId = computed(() => {
-  return form.platform === 'openai' ? openaiOAuth.sessionId.value : oauth.sessionId.value
+  if (form.platform === 'openai') return openaiOAuth.sessionId.value
+  if (form.platform === 'gemini') return geminiOAuth.sessionId.value
+  return oauth.sessionId.value
 })
 
 const currentOAuthLoading = computed(() => {
-  return form.platform === 'openai' ? openaiOAuth.loading.value : oauth.loading.value
+  if (form.platform === 'openai') return openaiOAuth.loading.value
+  if (form.platform === 'gemini') return geminiOAuth.loading.value
+  return oauth.loading.value
 })
 
 const currentOAuthError = computed(() => {
-  return form.platform === 'openai' ? openaiOAuth.error.value : oauth.error.value
+  if (form.platform === 'openai') return openaiOAuth.error.value
+  if (form.platform === 'gemini') return geminiOAuth.error.value
+  return oauth.error.value
 })
 
 // Refs
@@ -717,6 +1090,24 @@ const selectedErrorCodes = ref<number[]>([])
 const customErrorCodeInput = ref<number | null>(null)
 const interceptWarmupRequests = ref(false)
 
+// 优先使用环境变量配置的 Redirect URI,否则使用当前域名
+const defaultCallbackUrl =
+  import.meta.env.VITE_OAUTH_CALLBACK_URL ||
+  (typeof window !== 'undefined' ? `${window.location.origin}/auth/callback` : '')
+const geminiRedirectUri = ref(defaultCallbackUrl)
+const geminiRedirectUriConfirmed = ref(false)
+
+const isValidGeminiRedirectUri = computed(() => {
+  const raw = geminiRedirectUri.value?.trim()
+  if (!raw) return false
+  try {
+    const parsed = new URL(raw)
+    return parsed.protocol === 'http:' || parsed.protocol === 'https:'
+  } catch {
+    return false
+  }
+})
+
 // Common models for whitelist - Anthropic
 const anthropicModels = [
   { value: 'claude-opus-4-5-20251101', label: 'Claude Opus 4.5' },
@@ -740,34 +1131,143 @@ const openaiModels = [
   { value: 'gpt-5-2025-08-07', label: 'GPT-5' }
 ]
 
+// Common models for whitelist - Gemini
+const geminiModels = [
+  { value: 'gemini-2.0-flash', label: 'Gemini 2.0 Flash' },
+  { value: 'gemini-2.0-flash-lite', label: 'Gemini 2.0 Flash Lite' },
+  { value: 'gemini-1.5-pro', label: 'Gemini 1.5 Pro' },
+  { value: 'gemini-1.5-flash', label: 'Gemini 1.5 Flash' }
+]
+
 // Computed: current models based on platform
 const commonModels = computed(() => {
-  return form.platform === 'openai' ? openaiModels : anthropicModels
+  if (form.platform === 'openai') return openaiModels
+  if (form.platform === 'gemini') return geminiModels
+  return anthropicModels
 })
 
 // Preset mappings for quick add - Anthropic
 const anthropicPresetMappings = [
-  { label: 'Sonnet 4', from: 'claude-sonnet-4-20250514', to: 'claude-sonnet-4-20250514', color: 'bg-blue-100 text-blue-700 hover:bg-blue-200 dark:bg-blue-900/30 dark:text-blue-400' },
-  { label: 'Sonnet 4.5', from: 'claude-sonnet-4-5-20250929', to: 'claude-sonnet-4-5-20250929', color: 'bg-indigo-100 text-indigo-700 hover:bg-indigo-200 dark:bg-indigo-900/30 dark:text-indigo-400' },
-  { label: 'Opus 4.5', from: 'claude-opus-4-5-20251101', to: 'claude-opus-4-5-20251101', color: 'bg-purple-100 text-purple-700 hover:bg-purple-200 dark:bg-purple-900/30 dark:text-purple-400' },
-  { label: 'Haiku 3.5', from: 'claude-3-5-haiku-20241022', to: 'claude-3-5-haiku-20241022', color: 'bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900/30 dark:text-green-400' },
-  { label: 'Haiku 4.5', from: 'claude-haiku-4-5-20251001', to: 'claude-haiku-4-5-20251001', color: 'bg-emerald-100 text-emerald-700 hover:bg-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-400' },
-  { label: 'Opus->Sonnet', from: 'claude-opus-4-5-20251101', to: 'claude-sonnet-4-5-20250929', color: 'bg-amber-100 text-amber-700 hover:bg-amber-200 dark:bg-amber-900/30 dark:text-amber-400' }
+  {
+    label: 'Sonnet 4',
+    from: 'claude-sonnet-4-20250514',
+    to: 'claude-sonnet-4-20250514',
+    color: 'bg-blue-100 text-blue-700 hover:bg-blue-200 dark:bg-blue-900/30 dark:text-blue-400'
+  },
+  {
+    label: 'Sonnet 4.5',
+    from: 'claude-sonnet-4-5-20250929',
+    to: 'claude-sonnet-4-5-20250929',
+    color:
+      'bg-indigo-100 text-indigo-700 hover:bg-indigo-200 dark:bg-indigo-900/30 dark:text-indigo-400'
+  },
+  {
+    label: 'Opus 4.5',
+    from: 'claude-opus-4-5-20251101',
+    to: 'claude-opus-4-5-20251101',
+    color:
+      'bg-purple-100 text-purple-700 hover:bg-purple-200 dark:bg-purple-900/30 dark:text-purple-400'
+  },
+  {
+    label: 'Haiku 3.5',
+    from: 'claude-3-5-haiku-20241022',
+    to: 'claude-3-5-haiku-20241022',
+    color: 'bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900/30 dark:text-green-400'
+  },
+  {
+    label: 'Haiku 4.5',
+    from: 'claude-haiku-4-5-20251001',
+    to: 'claude-haiku-4-5-20251001',
+    color:
+      'bg-emerald-100 text-emerald-700 hover:bg-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-400'
+  },
+  {
+    label: 'Opus->Sonnet',
+    from: 'claude-opus-4-5-20251101',
+    to: 'claude-sonnet-4-5-20250929',
+    color: 'bg-amber-100 text-amber-700 hover:bg-amber-200 dark:bg-amber-900/30 dark:text-amber-400'
+  }
 ]
 
 // Preset mappings for quick add - OpenAI
 const openaiPresetMappings = [
-  { label: 'GPT-5.2', from: 'gpt-5.2-2025-12-11', to: 'gpt-5.2-2025-12-11', color: 'bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900/30 dark:text-green-400' },
-  { label: 'GPT-5.2 Codex', from: 'gpt-5.2-codex', to: 'gpt-5.2-codex', color: 'bg-blue-100 text-blue-700 hover:bg-blue-200 dark:bg-blue-900/30 dark:text-blue-400' },
-  { label: 'GPT-5.1 Codex', from: 'gpt-5.1-codex', to: 'gpt-5.1-codex', color: 'bg-indigo-100 text-indigo-700 hover:bg-indigo-200 dark:bg-indigo-900/30 dark:text-indigo-400' },
-  { label: 'Codex Max', from: 'gpt-5.1-codex-max', to: 'gpt-5.1-codex-max', color: 'bg-purple-100 text-purple-700 hover:bg-purple-200 dark:bg-purple-900/30 dark:text-purple-400' },
-  { label: 'Codex Mini', from: 'gpt-5.1-codex-mini', to: 'gpt-5.1-codex-mini', color: 'bg-emerald-100 text-emerald-700 hover:bg-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-400' },
-  { label: 'Max->Codex', from: 'gpt-5.1-codex-max', to: 'gpt-5.1-codex', color: 'bg-amber-100 text-amber-700 hover:bg-amber-200 dark:bg-amber-900/30 dark:text-amber-400' }
+  {
+    label: 'GPT-5.2',
+    from: 'gpt-5.2-2025-12-11',
+    to: 'gpt-5.2-2025-12-11',
+    color: 'bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900/30 dark:text-green-400'
+  },
+  {
+    label: 'GPT-5.2 Codex',
+    from: 'gpt-5.2-codex',
+    to: 'gpt-5.2-codex',
+    color: 'bg-blue-100 text-blue-700 hover:bg-blue-200 dark:bg-blue-900/30 dark:text-blue-400'
+  },
+  {
+    label: 'GPT-5.1 Codex',
+    from: 'gpt-5.1-codex',
+    to: 'gpt-5.1-codex',
+    color:
+      'bg-indigo-100 text-indigo-700 hover:bg-indigo-200 dark:bg-indigo-900/30 dark:text-indigo-400'
+  },
+  {
+    label: 'Codex Max',
+    from: 'gpt-5.1-codex-max',
+    to: 'gpt-5.1-codex-max',
+    color:
+      'bg-purple-100 text-purple-700 hover:bg-purple-200 dark:bg-purple-900/30 dark:text-purple-400'
+  },
+  {
+    label: 'Codex Mini',
+    from: 'gpt-5.1-codex-mini',
+    to: 'gpt-5.1-codex-mini',
+    color:
+      'bg-emerald-100 text-emerald-700 hover:bg-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-400'
+  },
+  {
+    label: 'Max->Codex',
+    from: 'gpt-5.1-codex-max',
+    to: 'gpt-5.1-codex',
+    color: 'bg-amber-100 text-amber-700 hover:bg-amber-200 dark:bg-amber-900/30 dark:text-amber-400'
+  }
+]
+
+// Preset mappings for quick add - Gemini
+const geminiPresetMappings = [
+  {
+    label: 'Flash',
+    from: 'gemini-2.0-flash',
+    to: 'gemini-2.0-flash',
+    color: 'bg-blue-100 text-blue-700 hover:bg-blue-200 dark:bg-blue-900/30 dark:text-blue-400'
+  },
+  {
+    label: 'Flash Lite',
+    from: 'gemini-2.0-flash-lite',
+    to: 'gemini-2.0-flash-lite',
+    color:
+      'bg-indigo-100 text-indigo-700 hover:bg-indigo-200 dark:bg-indigo-900/30 dark:text-indigo-400'
+  },
+  {
+    label: '1.5 Pro',
+    from: 'gemini-1.5-pro',
+    to: 'gemini-1.5-pro',
+    color:
+      'bg-purple-100 text-purple-700 hover:bg-purple-200 dark:bg-purple-900/30 dark:text-purple-400'
+  },
+  {
+    label: '1.5 Flash',
+    from: 'gemini-1.5-flash',
+    to: 'gemini-1.5-flash',
+    color:
+      'bg-emerald-100 text-emerald-700 hover:bg-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-400'
+  }
 ]
 
 // Computed: current preset mappings based on platform
 const presetMappings = computed(() => {
-  return form.platform === 'openai' ? openaiPresetMappings : anthropicPresetMappings
+  if (form.platform === 'openai') return openaiPresetMappings
+  if (form.platform === 'gemini') return geminiPresetMappings
+  return anthropicPresetMappings
 })
 
 // Common HTTP error codes for quick selection
@@ -804,37 +1304,72 @@ const canExchangeCode = computed(() => {
   if (form.platform === 'openai') {
     return authCode.trim() && openaiOAuth.sessionId.value && !openaiOAuth.loading.value
   }
+  if (form.platform === 'gemini') {
+    return (
+      authCode.trim() &&
+      geminiOAuth.sessionId.value &&
+      !geminiOAuth.loading.value &&
+      geminiRedirectUriConfirmed.value &&
+      isValidGeminiRedirectUri.value
+    )
+  }
   return authCode.trim() && oauth.sessionId.value && !oauth.loading.value
 })
 
 // Watchers
-watch(() => props.show, (newVal) => {
-  if (!newVal) {
-    resetForm()
+watch(
+  () => props.show,
+  (newVal) => {
+    if (!newVal) {
+      resetForm()
+    }
   }
-})
+)
 
 // Sync form.type based on accountCategory and addMethod
-watch([accountCategory, addMethod], ([category, method]) => {
-  if (category === 'oauth-based') {
-    form.type = method as AccountType // 'oauth' or 'setup-token'
-  } else {
-    form.type = 'apikey'
-  }
-}, { immediate: true })
+watch(
+  [accountCategory, addMethod],
+  ([category, method]) => {
+    if (category === 'oauth-based') {
+      form.type = method as AccountType // 'oauth' or 'setup-token'
+    } else {
+      form.type = 'apikey'
+    }
+  },
+  { immediate: true }
+)
 
 // Reset platform-specific settings when platform changes
-watch(() => form.platform, (newPlatform) => {
-  // Reset base URL based on platform
-  apiKeyBaseUrl.value = newPlatform === 'openai'
-    ? 'https://api.openai.com'
-    : 'https://api.anthropic.com'
-  // Clear model-related settings
-  allowedModels.value = []
-  modelMappings.value = []
-  // Reset OAuth states
-  oauth.resetState()
-  openaiOAuth.resetState()
+watch(
+  () => form.platform,
+  (newPlatform) => {
+    // Reset base URL based on platform
+    apiKeyBaseUrl.value =
+      newPlatform === 'openai'
+        ? 'https://api.openai.com'
+        : newPlatform === 'gemini'
+          ? 'https://generativelanguage.googleapis.com'
+          : 'https://api.anthropic.com'
+    // Clear model-related settings
+    allowedModels.value = []
+    modelMappings.value = []
+    // Reset Anthropic-specific settings when switching to other platforms
+    if (newPlatform !== 'anthropic') {
+      interceptWarmupRequests.value = false
+    }
+    // Reset OAuth states
+    oauth.resetState()
+    openaiOAuth.resetState()
+    geminiOAuth.resetState()
+    if (newPlatform === 'gemini' && !geminiRedirectUri.value) {
+      geminiRedirectUri.value = defaultCallbackUrl
+    }
+    geminiRedirectUriConfirmed.value = false
+  }
+)
+
+watch(geminiRedirectUri, () => {
+  geminiRedirectUriConfirmed.value = false
 })
 
 // Model mapping helpers
@@ -848,7 +1383,7 @@ const removeModelMapping = (index: number) => {
 
 const addPresetMapping = (from: string, to: string) => {
   // Check if mapping already exists
-  const exists = modelMappings.value.some(m => m.from === from)
+  const exists = modelMappings.value.some((m) => m.from === from)
   if (exists) {
     appStore.showInfo(t('admin.accounts.mappingExists', { model: from }))
     return
@@ -935,6 +1470,9 @@ const resetForm = () => {
   interceptWarmupRequests.value = false
   oauth.resetState()
   openaiOAuth.resetState()
+  geminiOAuth.resetState()
+  geminiRedirectUri.value = defaultCallbackUrl
+  geminiRedirectUriConfirmed.value = false
   oauthFlowRef.value?.reset()
 }
 
@@ -960,9 +1498,12 @@ const handleSubmit = async () => {
   }
 
   // Determine default base URL based on platform
-  const defaultBaseUrl = form.platform === 'openai'
-    ? 'https://api.openai.com'
-    : 'https://api.anthropic.com'
+  const defaultBaseUrl =
+    form.platform === 'openai'
+      ? 'https://api.openai.com'
+      : form.platform === 'gemini'
+        ? 'https://generativelanguage.googleapis.com'
+        : 'https://api.anthropic.com'
 
   // Build credentials with optional model mapping
   const credentials: Record<string, unknown> = {
@@ -1009,12 +1550,24 @@ const goBackToBasicInfo = () => {
   step.value = 1
   oauth.resetState()
   openaiOAuth.resetState()
+  geminiOAuth.resetState()
+  geminiRedirectUriConfirmed.value = false
   oauthFlowRef.value?.reset()
 }
 
 const handleGenerateUrl = async () => {
   if (form.platform === 'openai') {
     await openaiOAuth.generateAuthUrl(form.proxy_id)
+  } else if (form.platform === 'gemini') {
+    if (!isValidGeminiRedirectUri.value) {
+      appStore.showError(t('admin.accounts.oauth.gemini.invalidRedirectUri'))
+      return
+    }
+    if (!geminiRedirectUriConfirmed.value) {
+      appStore.showError(t('admin.accounts.oauth.gemini.redirectUriNotConfirmed'))
+      return
+    }
+    await geminiOAuth.generateAuthUrl(form.proxy_id, geminiRedirectUri.value)
   } else {
     await oauth.generateAuthUrl(addMethod.value, form.proxy_id)
   }
@@ -1044,10 +1597,7 @@ const handleExchangeCode = async () => {
       const credentials = openaiOAuth.buildCredentials(tokenInfo)
       const extra = openaiOAuth.buildExtraInfo(tokenInfo)
 
-      // Merge interceptWarmupRequests into credentials
-      if (interceptWarmupRequests.value) {
-        credentials.intercept_warmup_requests = true
-      }
+      // Note: intercept_warmup_requests is Anthropic-only, not applicable to OpenAI
 
       await adminAPI.accounts.create({
         name: form.name,
@@ -1073,6 +1623,69 @@ const handleExchangeCode = async () => {
     return
   }
 
+  // For Gemini
+  if (form.platform === 'gemini') {
+    if (!authCode.trim() || !geminiOAuth.sessionId.value) return
+
+    geminiOAuth.loading.value = true
+    geminiOAuth.error.value = ''
+
+    try {
+      if (!isValidGeminiRedirectUri.value) {
+        geminiOAuth.error.value = t('admin.accounts.oauth.gemini.invalidRedirectUri')
+        appStore.showError(geminiOAuth.error.value)
+        return
+      }
+      if (!geminiRedirectUriConfirmed.value) {
+        geminiOAuth.error.value = t('admin.accounts.oauth.gemini.redirectUriNotConfirmed')
+        appStore.showError(geminiOAuth.error.value)
+        return
+      }
+
+      const stateFromInput = oauthFlowRef.value?.oauthState || ''
+      const stateToUse = stateFromInput || geminiOAuth.state.value
+      if (!stateToUse) {
+        geminiOAuth.error.value = t('admin.accounts.oauth.authFailed')
+        appStore.showError(geminiOAuth.error.value)
+        return
+      }
+
+      const tokenInfo = await geminiOAuth.exchangeAuthCode({
+        code: authCode.trim(),
+        sessionId: geminiOAuth.sessionId.value,
+        state: stateToUse,
+        redirectUri: geminiRedirectUri.value,
+        proxyId: form.proxy_id
+      })
+      if (!tokenInfo) return
+
+      const credentials = geminiOAuth.buildCredentials(tokenInfo)
+
+      // Note: intercept_warmup_requests is Anthropic-only, not applicable to Gemini
+
+      await adminAPI.accounts.create({
+        name: form.name,
+        platform: 'gemini',
+        type: 'oauth',
+        credentials,
+        proxy_id: form.proxy_id,
+        concurrency: form.concurrency,
+        priority: form.priority,
+        group_ids: form.group_ids
+      })
+
+      appStore.showSuccess(t('admin.accounts.accountCreated'))
+      emit('created')
+      handleClose()
+    } catch (error: any) {
+      geminiOAuth.error.value = error.response?.data?.detail || t('admin.accounts.oauth.authFailed')
+      appStore.showError(geminiOAuth.error.value)
+    } finally {
+      geminiOAuth.loading.value = false
+    }
+    return
+  }
+
   // For Anthropic
   if (!authCode.trim() || !oauth.sessionId.value) return
 
@@ -1081,9 +1694,10 @@ const handleExchangeCode = async () => {
 
   try {
     const proxyConfig = form.proxy_id ? { proxy_id: form.proxy_id } : {}
-    const endpoint = addMethod.value === 'oauth'
-      ? '/admin/accounts/exchange-code'
-      : '/admin/accounts/exchange-setup-token-code'
+    const endpoint =
+      addMethod.value === 'oauth'
+        ? '/admin/accounts/exchange-code'
+        : '/admin/accounts/exchange-setup-token-code'
 
     const tokenInfo = await adminAPI.accounts.exchangeCode(endpoint, {
       session_id: oauth.sessionId.value,
@@ -1135,9 +1749,10 @@ const handleCookieAuth = async (sessionKey: string) => {
       return
     }
 
-    const endpoint = addMethod.value === 'oauth'
-      ? '/admin/accounts/cookie-auth'
-      : '/admin/accounts/setup-token-cookie-auth'
+    const endpoint =
+      addMethod.value === 'oauth'
+        ? '/admin/accounts/cookie-auth'
+        : '/admin/accounts/setup-token-cookie-auth'
 
     let successCount = 0
     let failedCount = 0
@@ -1174,7 +1789,12 @@ const handleCookieAuth = async (sessionKey: string) => {
         successCount++
       } catch (error: any) {
         failedCount++
-        errors.push(t('admin.accounts.oauth.keyAuthFailed', { index: i + 1, error: error.response?.data?.detail || t('admin.accounts.oauth.authFailed') }))
+        errors.push(
+          t('admin.accounts.oauth.keyAuthFailed', {
+            index: i + 1,
+            error: error.response?.data?.detail || t('admin.accounts.oauth.authFailed')
+          })
+        )
       }
     }
 
diff --git a/frontend/src/components/account/EditAccountModal.vue b/frontend/src/components/account/EditAccountModal.vue
index 0c48b21dc5..366033ea51 100644
--- a/frontend/src/components/account/EditAccountModal.vue
+++ b/frontend/src/components/account/EditAccountModal.vue
@@ -1,19 +1,9 @@
 <template>
-  <Modal
-    :show="show"
-    :title="t('admin.accounts.editAccount')"
-    size="lg"
-    @close="handleClose"
-  >
+  <Modal :show="show" :title="t('admin.accounts.editAccount')" size="lg" @close="handleClose">
     <form v-if="account" @submit.prevent="handleSubmit" class="space-y-5">
       <div>
         <label class="input-label">{{ t('common.name') }}</label>
-        <input
-          v-model="form.name"
-          type="text"
-          required
-          class="input"
-        />
+        <input v-model="form.name" type="text" required class="input" />
       </div>
 
       <!-- API Key fields (only for apikey type) -->
@@ -24,7 +14,13 @@
             v-model="editBaseUrl"
             type="text"
             class="input"
-            :placeholder="account.platform === 'openai' ? 'https://api.openai.com' : 'https://api.anthropic.com'"
+            :placeholder="
+              account.platform === 'openai'
+                ? 'https://api.openai.com'
+                : account.platform === 'gemini'
+                  ? 'https://generativelanguage.googleapis.com'
+                  : 'https://api.anthropic.com'
+            "
           />
           <p class="input-hint">{{ t('admin.accounts.baseUrlHint') }}</p>
         </div>
@@ -34,17 +30,23 @@
             v-model="editApiKey"
             type="password"
             class="input font-mono"
-            :placeholder="account.platform === 'openai' ? 'sk-proj-...' : 'sk-ant-...'"
+            :placeholder="
+              account.platform === 'openai'
+                ? 'sk-proj-...'
+                : account.platform === 'gemini'
+                  ? 'AIza...'
+                  : 'sk-ant-...'
+            "
           />
           <p class="input-hint">{{ t('admin.accounts.leaveEmptyToKeep') }}</p>
         </div>
 
-        <!-- Model Restriction Section -->
-        <div class="border-t border-gray-200 dark:border-dark-600 pt-4">
+        <!-- Model Restriction Section (不适用于 Gemini) -->
+        <div v-if="account.platform !== 'gemini'" class="border-t border-gray-200 pt-4 dark:border-dark-600">
           <label class="input-label">{{ t('admin.accounts.modelRestriction') }}</label>
 
           <!-- Mode Toggle -->
-          <div class="flex gap-2 mb-4">
+          <div class="mb-4 flex gap-2">
             <button
               type="button"
               @click="modelRestrictionMode = 'whitelist'"
@@ -55,8 +57,18 @@
                   : 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-dark-600 dark:text-gray-400 dark:hover:bg-dark-500'
               ]"
             >
-              <svg class="w-4 h-4 inline mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+              <svg
+                class="mr-1.5 inline h-4 w-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
               </svg>
               {{ t('admin.accounts.modelWhitelist') }}
             </button>
@@ -70,8 +82,18 @@
                   : 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-dark-600 dark:text-gray-400 dark:hover:bg-dark-500'
               ]"
             >
-              <svg class="w-4 h-4 inline mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
+              <svg
+                class="mr-1.5 inline h-4 w-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"
+                />
               </svg>
               {{ t('admin.accounts.modelMapping') }}
             </button>
@@ -79,22 +101,36 @@
 
           <!-- Whitelist Mode -->
           <div v-if="modelRestrictionMode === 'whitelist'">
-            <div class="mb-3 rounded-lg bg-blue-50 dark:bg-blue-900/20 p-3">
+            <div class="mb-3 rounded-lg bg-blue-50 p-3 dark:bg-blue-900/20">
               <p class="text-xs text-blue-700 dark:text-blue-400">
-                <svg class="w-4 h-4 inline mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                <svg
+                  class="mr-1 inline h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
                 </svg>
                 {{ t('admin.accounts.selectAllowedModels') }}
               </p>
             </div>
 
             <!-- Model Checkbox List -->
-            <div class="grid grid-cols-2 gap-2 mb-3">
+            <div class="mb-3 grid grid-cols-2 gap-2">
               <label
                 v-for="model in commonModels"
                 :key="model.value"
                 class="flex cursor-pointer items-center rounded-lg border p-3 transition-all hover:bg-gray-50 dark:border-dark-600 dark:hover:bg-dark-700"
-                :class="allowedModels.includes(model.value) ? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20' : 'border-gray-200'"
+                :class="
+                  allowedModels.includes(model.value)
+                    ? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20'
+                    : 'border-gray-200'
+                "
               >
                 <input
                   type="checkbox"
@@ -108,23 +144,35 @@
 
             <p class="text-xs text-gray-500 dark:text-gray-400">
               {{ t('admin.accounts.selectedModels', { count: allowedModels.length }) }}
-              <span v-if="allowedModels.length === 0">{{ t('admin.accounts.supportsAllModels') }}</span>
+              <span v-if="allowedModels.length === 0">{{
+                t('admin.accounts.supportsAllModels')
+              }}</span>
             </p>
           </div>
 
           <!-- Mapping Mode -->
           <div v-else>
-            <div class="mb-3 rounded-lg bg-purple-50 dark:bg-purple-900/20 p-3">
+            <div class="mb-3 rounded-lg bg-purple-50 p-3 dark:bg-purple-900/20">
               <p class="text-xs text-purple-700 dark:text-purple-400">
-                <svg class="w-4 h-4 inline mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                <svg
+                  class="mr-1 inline h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
                 </svg>
                 {{ t('admin.accounts.mapRequestModels') }}
               </p>
             </div>
 
             <!-- Model Mapping List -->
-            <div v-if="modelMappings.length > 0" class="space-y-2 mb-3">
+            <div v-if="modelMappings.length > 0" class="mb-3 space-y-2">
               <div
                 v-for="(mapping, index) in modelMappings"
                 :key="index"
@@ -136,8 +184,18 @@
                   class="input flex-1"
                   :placeholder="t('admin.accounts.requestModel')"
                 />
-                <svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
+                <svg
+                  class="h-4 w-4 flex-shrink-0 text-gray-400"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M14 5l7 7m0 0l-7 7m7-7H3"
+                  />
                 </svg>
                 <input
                   v-model="mapping.to"
@@ -148,10 +206,15 @@
                 <button
                   type="button"
                   @click="removeModelMapping(index)"
-                  class="p-2 text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg 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"
                 >
-                  <svg class="w-4 h-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 class="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>
                 </button>
               </div>
@@ -160,10 +223,20 @@
             <button
               type="button"
               @click="addModelMapping"
-              class="w-full rounded-lg border-2 border-dashed border-gray-300 dark:border-dark-500 px-4 py-2 text-gray-600 dark:text-gray-400 transition-colors hover:border-gray-400 hover:text-gray-700 dark:hover:border-dark-400 dark:hover:text-gray-300 mb-3"
+              class="mb-3 w-full rounded-lg border-2 border-dashed border-gray-300 px-4 py-2 text-gray-600 transition-colors hover:border-gray-400 hover:text-gray-700 dark:border-dark-500 dark:text-gray-400 dark:hover:border-dark-400 dark:hover:text-gray-300"
             >
-              <svg class="w-4 h-4 inline mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+              <svg
+                class="mr-1 inline h-4 w-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M12 4v16m8-8H4"
+                />
               </svg>
               {{ t('admin.accounts.addMapping') }}
             </button>
@@ -175,10 +248,7 @@
                 :key="preset.label"
                 type="button"
                 @click="addPresetMapping(preset.from, preset.to)"
-                :class="[
-                  'rounded-lg px-3 py-1 text-xs transition-colors',
-                  preset.color
-                ]"
+                :class="['rounded-lg px-3 py-1 text-xs transition-colors', preset.color]"
               >
                 + {{ preset.label }}
               </button>
@@ -187,11 +257,13 @@
         </div>
 
         <!-- Custom Error Codes Section -->
-        <div class="border-t border-gray-200 dark:border-dark-600 pt-4">
-          <div class="flex items-center justify-between mb-3">
+        <div class="border-t border-gray-200 pt-4 dark:border-dark-600">
+          <div class="mb-3 flex items-center justify-between">
             <div>
               <label class="input-label mb-0">{{ t('admin.accounts.customErrorCodes') }}</label>
-              <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ t('admin.accounts.customErrorCodesHint') }}</p>
+              <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                {{ t('admin.accounts.customErrorCodesHint') }}
+              </p>
             </div>
             <button
               type="button"
@@ -211,10 +283,20 @@
           </div>
 
           <div v-if="customErrorCodesEnabled" class="space-y-3">
-            <div class="rounded-lg bg-amber-50 dark:bg-amber-900/20 p-3">
+            <div class="rounded-lg bg-amber-50 p-3 dark:bg-amber-900/20">
               <p class="text-xs text-amber-700 dark:text-amber-400">
-                <svg class="w-4 h-4 inline mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                <svg
+                  class="mr-1 inline h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                  />
                 </svg>
                 {{ t('admin.accounts.customErrorCodesWarning') }}
               </p>
@@ -230,7 +312,7 @@
                 :class="[
                   'rounded-lg px-3 py-1.5 text-sm font-medium transition-colors',
                   selectedErrorCodes.includes(code.value)
-                    ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400 ring-1 ring-red-500'
+                    ? 'bg-red-100 text-red-700 ring-1 ring-red-500 dark:bg-red-900/30 dark:text-red-400'
                     : 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-dark-600 dark:text-gray-400 dark:hover:bg-dark-500'
                 ]"
               >
@@ -249,13 +331,14 @@
                 :placeholder="t('admin.accounts.enterErrorCode')"
                 @keyup.enter="addCustomErrorCode"
               />
-              <button
-                type="button"
-                @click="addCustomErrorCode"
-                class="btn btn-secondary px-3"
-              >
-                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+              <button type="button" @click="addCustomErrorCode" class="btn btn-secondary px-3">
+                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M12 4v16m8-8H4"
+                  />
                 </svg>
               </button>
             </div>
@@ -265,7 +348,7 @@
               <span
                 v-for="code in selectedErrorCodes.sort((a, b) => a - b)"
                 :key="code"
-                class="inline-flex items-center gap-1 rounded-full bg-red-100 dark:bg-red-900/30 px-2.5 py-0.5 text-sm font-medium text-red-700 dark:text-red-400"
+                class="inline-flex items-center gap-1 rounded-full bg-red-100 px-2.5 py-0.5 text-sm font-medium text-red-700 dark:bg-red-900/30 dark:text-red-400"
               >
                 {{ code }}
                 <button
@@ -273,8 +356,13 @@
                   @click="removeErrorCode(code)"
                   class="hover:text-red-900 dark:hover:text-red-300"
                 >
-                  <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                  <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M6 18L18 6M6 6l12 12"
+                    />
                   </svg>
                 </button>
               </span>
@@ -284,14 +372,50 @@
             </div>
           </div>
         </div>
+
+        <!-- Gemini 模型说明 -->
+        <div v-if="account.platform === 'gemini'" class="border-t border-gray-200 pt-4 dark:border-dark-600">
+          <div class="rounded-lg bg-blue-50 p-4 dark:bg-blue-900/20">
+            <div class="flex items-start gap-3">
+              <svg
+                class="h-5 w-5 flex-shrink-0 text-blue-600 dark:text-blue-400"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+              <div>
+                <p class="text-sm font-medium text-blue-800 dark:text-blue-300">
+                  {{ t('admin.accounts.gemini.modelPassthrough') }}
+                </p>
+                <p class="mt-1 text-xs text-blue-700 dark:text-blue-400">
+                  {{ t('admin.accounts.gemini.modelPassthroughDesc') }}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
 
       <!-- Intercept Warmup Requests (Anthropic only) -->
-      <div v-if="account?.platform === 'anthropic'" class="border-t border-gray-200 dark:border-dark-600 pt-4">
+      <div
+        v-if="account?.platform === 'anthropic'"
+        class="border-t border-gray-200 pt-4 dark:border-dark-600"
+      >
         <div class="flex items-center justify-between">
           <div>
-            <label class="input-label mb-0">{{ t('admin.accounts.interceptWarmupRequests') }}</label>
-            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ t('admin.accounts.interceptWarmupRequestsDesc') }}</p>
+            <label class="input-label mb-0">{{
+              t('admin.accounts.interceptWarmupRequests')
+            }}</label>
+            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+              {{ t('admin.accounts.interceptWarmupRequestsDesc') }}
+            </p>
           </div>
           <button
             type="button"
@@ -313,69 +437,52 @@
 
       <div>
         <label class="input-label">{{ t('admin.accounts.proxy') }}</label>
-        <ProxySelector
-          v-model="form.proxy_id"
-          :proxies="proxies"
-        />
+        <ProxySelector v-model="form.proxy_id" :proxies="proxies" />
       </div>
 
       <div class="grid grid-cols-2 gap-4">
         <div>
           <label class="input-label">{{ t('admin.accounts.concurrency') }}</label>
-          <input
-            v-model.number="form.concurrency"
-            type="number"
-            min="1"
-            class="input"
-          />
+          <input v-model.number="form.concurrency" type="number" min="1" class="input" />
         </div>
         <div>
           <label class="input-label">{{ t('admin.accounts.priority') }}</label>
-          <input
-            v-model.number="form.priority"
-            type="number"
-            min="1"
-            class="input"
-          />
+          <input v-model.number="form.priority" type="number" min="1" class="input" />
         </div>
       </div>
 
       <div>
         <label class="input-label">{{ t('common.status') }}</label>
-        <Select
-          v-model="form.status"
-          :options="statusOptions"
-        />
+        <Select v-model="form.status" :options="statusOptions" />
       </div>
 
       <!-- Group Selection -->
-      <GroupSelector
-        v-model="form.group_ids"
-        :groups="groups"
-        :platform="account?.platform"
-      />
+      <GroupSelector v-model="form.group_ids" :groups="groups" :platform="account?.platform" />
 
       <div class="flex justify-end gap-3 pt-4">
-        <button
-          @click="handleClose"
-          type="button"
-          class="btn btn-secondary"
-        >
+        <button @click="handleClose" 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.accounts.updating') : t('common.update') }}
         </button>
@@ -452,39 +559,150 @@ const openaiModels = [
   { value: 'gpt-5-2025-08-07', label: 'GPT-5' }
 ]
 
+// Common models for whitelist - Gemini
+const geminiModels = [
+  { value: 'gemini-2.0-flash', label: 'Gemini 2.0 Flash' },
+  { value: 'gemini-2.0-flash-lite', label: 'Gemini 2.0 Flash Lite' },
+  { value: 'gemini-1.5-pro', label: 'Gemini 1.5 Pro' },
+  { value: 'gemini-1.5-flash', label: 'Gemini 1.5 Flash' }
+]
+
 // Computed: current models based on platform
 const commonModels = computed(() => {
-  return props.account?.platform === 'openai' ? openaiModels : anthropicModels
+  if (props.account?.platform === 'openai') return openaiModels
+  if (props.account?.platform === 'gemini') return geminiModels
+  return anthropicModels
 })
 
 // Preset mappings for quick add - Anthropic
 const anthropicPresetMappings = [
-  { label: 'Sonnet 4', from: 'claude-sonnet-4-20250514', to: 'claude-sonnet-4-20250514', color: 'bg-blue-100 text-blue-700 hover:bg-blue-200 dark:bg-blue-900/30 dark:text-blue-400' },
-  { label: 'Sonnet 4.5', from: 'claude-sonnet-4-5-20250929', to: 'claude-sonnet-4-5-20250929', color: 'bg-indigo-100 text-indigo-700 hover:bg-indigo-200 dark:bg-indigo-900/30 dark:text-indigo-400' },
-  { label: 'Opus 4.5', from: 'claude-opus-4-5-20251101', to: 'claude-opus-4-5-20251101', color: 'bg-purple-100 text-purple-700 hover:bg-purple-200 dark:bg-purple-900/30 dark:text-purple-400' },
-  { label: 'Haiku 3.5', from: 'claude-3-5-haiku-20241022', to: 'claude-3-5-haiku-20241022', color: 'bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900/30 dark:text-green-400' },
-  { label: 'Haiku 4.5', from: 'claude-haiku-4-5-20251001', to: 'claude-haiku-4-5-20251001', color: 'bg-emerald-100 text-emerald-700 hover:bg-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-400' },
-  { label: 'Opus->Sonnet', from: 'claude-opus-4-5-20251101', to: 'claude-sonnet-4-5-20250929', color: 'bg-amber-100 text-amber-700 hover:bg-amber-200 dark:bg-amber-900/30 dark:text-amber-400' }
+  {
+    label: 'Sonnet 4',
+    from: 'claude-sonnet-4-20250514',
+    to: 'claude-sonnet-4-20250514',
+    color: 'bg-blue-100 text-blue-700 hover:bg-blue-200 dark:bg-blue-900/30 dark:text-blue-400'
+  },
+  {
+    label: 'Sonnet 4.5',
+    from: 'claude-sonnet-4-5-20250929',
+    to: 'claude-sonnet-4-5-20250929',
+    color:
+      'bg-indigo-100 text-indigo-700 hover:bg-indigo-200 dark:bg-indigo-900/30 dark:text-indigo-400'
+  },
+  {
+    label: 'Opus 4.5',
+    from: 'claude-opus-4-5-20251101',
+    to: 'claude-opus-4-5-20251101',
+    color:
+      'bg-purple-100 text-purple-700 hover:bg-purple-200 dark:bg-purple-900/30 dark:text-purple-400'
+  },
+  {
+    label: 'Haiku 3.5',
+    from: 'claude-3-5-haiku-20241022',
+    to: 'claude-3-5-haiku-20241022',
+    color: 'bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900/30 dark:text-green-400'
+  },
+  {
+    label: 'Haiku 4.5',
+    from: 'claude-haiku-4-5-20251001',
+    to: 'claude-haiku-4-5-20251001',
+    color:
+      'bg-emerald-100 text-emerald-700 hover:bg-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-400'
+  },
+  {
+    label: 'Opus->Sonnet',
+    from: 'claude-opus-4-5-20251101',
+    to: 'claude-sonnet-4-5-20250929',
+    color: 'bg-amber-100 text-amber-700 hover:bg-amber-200 dark:bg-amber-900/30 dark:text-amber-400'
+  }
 ]
 
 // Preset mappings for quick add - OpenAI
 const openaiPresetMappings = [
-  { label: 'GPT-5.2', from: 'gpt-5.2-2025-12-11', to: 'gpt-5.2-2025-12-11', color: 'bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900/30 dark:text-green-400' },
-  { label: 'GPT-5.2 Codex', from: 'gpt-5.2-codex', to: 'gpt-5.2-codex', color: 'bg-blue-100 text-blue-700 hover:bg-blue-200 dark:bg-blue-900/30 dark:text-blue-400' },
-  { label: 'GPT-5.1 Codex', from: 'gpt-5.1-codex', to: 'gpt-5.1-codex', color: 'bg-indigo-100 text-indigo-700 hover:bg-indigo-200 dark:bg-indigo-900/30 dark:text-indigo-400' },
-  { label: 'Codex Max', from: 'gpt-5.1-codex-max', to: 'gpt-5.1-codex-max', color: 'bg-purple-100 text-purple-700 hover:bg-purple-200 dark:bg-purple-900/30 dark:text-purple-400' },
-  { label: 'Codex Mini', from: 'gpt-5.1-codex-mini', to: 'gpt-5.1-codex-mini', color: 'bg-emerald-100 text-emerald-700 hover:bg-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-400' },
-  { label: 'Max->Codex', from: 'gpt-5.1-codex-max', to: 'gpt-5.1-codex', color: 'bg-amber-100 text-amber-700 hover:bg-amber-200 dark:bg-amber-900/30 dark:text-amber-400' }
+  {
+    label: 'GPT-5.2',
+    from: 'gpt-5.2-2025-12-11',
+    to: 'gpt-5.2-2025-12-11',
+    color: 'bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900/30 dark:text-green-400'
+  },
+  {
+    label: 'GPT-5.2 Codex',
+    from: 'gpt-5.2-codex',
+    to: 'gpt-5.2-codex',
+    color: 'bg-blue-100 text-blue-700 hover:bg-blue-200 dark:bg-blue-900/30 dark:text-blue-400'
+  },
+  {
+    label: 'GPT-5.1 Codex',
+    from: 'gpt-5.1-codex',
+    to: 'gpt-5.1-codex',
+    color:
+      'bg-indigo-100 text-indigo-700 hover:bg-indigo-200 dark:bg-indigo-900/30 dark:text-indigo-400'
+  },
+  {
+    label: 'Codex Max',
+    from: 'gpt-5.1-codex-max',
+    to: 'gpt-5.1-codex-max',
+    color:
+      'bg-purple-100 text-purple-700 hover:bg-purple-200 dark:bg-purple-900/30 dark:text-purple-400'
+  },
+  {
+    label: 'Codex Mini',
+    from: 'gpt-5.1-codex-mini',
+    to: 'gpt-5.1-codex-mini',
+    color:
+      'bg-emerald-100 text-emerald-700 hover:bg-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-400'
+  },
+  {
+    label: 'Max->Codex',
+    from: 'gpt-5.1-codex-max',
+    to: 'gpt-5.1-codex',
+    color: 'bg-amber-100 text-amber-700 hover:bg-amber-200 dark:bg-amber-900/30 dark:text-amber-400'
+  }
+]
+
+// Preset mappings for quick add - Gemini
+const geminiPresetMappings = [
+  {
+    label: 'Flash',
+    from: 'gemini-2.0-flash',
+    to: 'gemini-2.0-flash',
+    color: 'bg-blue-100 text-blue-700 hover:bg-blue-200 dark:bg-blue-900/30 dark:text-blue-400'
+  },
+  {
+    label: 'Flash Lite',
+    from: 'gemini-2.0-flash-lite',
+    to: 'gemini-2.0-flash-lite',
+    color:
+      'bg-indigo-100 text-indigo-700 hover:bg-indigo-200 dark:bg-indigo-900/30 dark:text-indigo-400'
+  },
+  {
+    label: '1.5 Pro',
+    from: 'gemini-1.5-pro',
+    to: 'gemini-1.5-pro',
+    color:
+      'bg-purple-100 text-purple-700 hover:bg-purple-200 dark:bg-purple-900/30 dark:text-purple-400'
+  },
+  {
+    label: '1.5 Flash',
+    from: 'gemini-1.5-flash',
+    to: 'gemini-1.5-flash',
+    color:
+      'bg-emerald-100 text-emerald-700 hover:bg-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-400'
+  }
 ]
 
 // Computed: current preset mappings based on platform
 const presetMappings = computed(() => {
-  return props.account?.platform === 'openai' ? openaiPresetMappings : anthropicPresetMappings
+  if (props.account?.platform === 'openai') return openaiPresetMappings
+  if (props.account?.platform === 'gemini') return geminiPresetMappings
+  return anthropicPresetMappings
 })
 
 // Computed: default base URL based on platform
 const defaultBaseUrl = computed(() => {
-  return props.account?.platform === 'openai' ? 'https://api.openai.com' : 'https://api.anthropic.com'
+  if (props.account?.platform === 'openai') return 'https://api.openai.com'
+  if (props.account?.platform === 'gemini') return 'https://generativelanguage.googleapis.com'
+  return 'https://api.anthropic.com'
 })
 
 // Common HTTP error codes for quick selection
@@ -513,71 +731,85 @@ const statusOptions = computed(() => [
 ])
 
 // Watchers
-watch(() => props.account, (newAccount) => {
-  if (newAccount) {
-    form.name = newAccount.name
-    form.proxy_id = newAccount.proxy_id
-    form.concurrency = newAccount.concurrency
-    form.priority = newAccount.priority
-    form.status = newAccount.status as 'active' | 'inactive'
-    form.group_ids = newAccount.group_ids || []
+watch(
+  () => props.account,
+  (newAccount) => {
+    if (newAccount) {
+      form.name = newAccount.name
+      form.proxy_id = newAccount.proxy_id
+      form.concurrency = newAccount.concurrency
+      form.priority = newAccount.priority
+      form.status = newAccount.status as 'active' | 'inactive'
+      form.group_ids = newAccount.group_ids || []
 
-    // Load intercept warmup requests setting (applies to all account types)
-    const credentials = newAccount.credentials as Record<string, unknown> | undefined
-    interceptWarmupRequests.value = credentials?.intercept_warmup_requests === true
+      // Load intercept warmup requests setting (applies to all account types)
+      const credentials = newAccount.credentials as Record<string, unknown> | undefined
+      interceptWarmupRequests.value = credentials?.intercept_warmup_requests === true
 
-    // Initialize API Key fields for apikey type
-    if (newAccount.type === 'apikey' && newAccount.credentials) {
-      const credentials = newAccount.credentials as Record<string, unknown>
-      const platformDefaultUrl = newAccount.platform === 'openai' ? 'https://api.openai.com' : 'https://api.anthropic.com'
-      editBaseUrl.value = credentials.base_url as string || platformDefaultUrl
+      // Initialize API Key fields for apikey type
+      if (newAccount.type === 'apikey' && newAccount.credentials) {
+        const credentials = newAccount.credentials as Record<string, unknown>
+        const platformDefaultUrl =
+          newAccount.platform === 'openai'
+            ? 'https://api.openai.com'
+            : newAccount.platform === 'gemini'
+              ? 'https://generativelanguage.googleapis.com'
+              : 'https://api.anthropic.com'
+        editBaseUrl.value = (credentials.base_url as string) || platformDefaultUrl
 
-      // Load model mappings and detect mode
-      const existingMappings = credentials.model_mapping as Record<string, string> | undefined
-      if (existingMappings && typeof existingMappings === 'object') {
-        const entries = Object.entries(existingMappings)
+        // Load model mappings and detect mode
+        const existingMappings = credentials.model_mapping as Record<string, string> | undefined
+        if (existingMappings && typeof existingMappings === 'object') {
+          const entries = Object.entries(existingMappings)
 
-        // Detect if this is whitelist mode (all from === to) or mapping mode
-        const isWhitelistMode = entries.length > 0 && entries.every(([from, to]) => from === to)
+          // Detect if this is whitelist mode (all from === to) or mapping mode
+          const isWhitelistMode = entries.length > 0 && entries.every(([from, to]) => from === to)
 
-        if (isWhitelistMode) {
-          // Whitelist mode: populate allowedModels
-          modelRestrictionMode.value = 'whitelist'
-          allowedModels.value = entries.map(([from]) => from)
-          modelMappings.value = []
+          if (isWhitelistMode) {
+            // Whitelist mode: populate allowedModels
+            modelRestrictionMode.value = 'whitelist'
+            allowedModels.value = entries.map(([from]) => from)
+            modelMappings.value = []
+          } else {
+            // Mapping mode: populate modelMappings
+            modelRestrictionMode.value = 'mapping'
+            modelMappings.value = entries.map(([from, to]) => ({ from, to }))
+            allowedModels.value = []
+          }
         } else {
-          // Mapping mode: populate modelMappings
-          modelRestrictionMode.value = 'mapping'
-          modelMappings.value = entries.map(([from, to]) => ({ from, to }))
+          // No mappings: default to whitelist mode with empty selection (allow all)
+          modelRestrictionMode.value = 'whitelist'
+          modelMappings.value = []
           allowedModels.value = []
         }
+
+        // Load custom error codes
+        customErrorCodesEnabled.value = credentials.custom_error_codes_enabled === true
+        const existingErrorCodes = credentials.custom_error_codes as number[] | undefined
+        if (existingErrorCodes && Array.isArray(existingErrorCodes)) {
+          selectedErrorCodes.value = [...existingErrorCodes]
+        } else {
+          selectedErrorCodes.value = []
+        }
       } else {
-        // No mappings: default to whitelist mode with empty selection (allow all)
+        const platformDefaultUrl =
+          newAccount.platform === 'openai'
+            ? 'https://api.openai.com'
+            : newAccount.platform === 'gemini'
+              ? 'https://generativelanguage.googleapis.com'
+              : 'https://api.anthropic.com'
+        editBaseUrl.value = platformDefaultUrl
         modelRestrictionMode.value = 'whitelist'
         modelMappings.value = []
         allowedModels.value = []
-      }
-
-      // Load custom error codes
-      customErrorCodesEnabled.value = credentials.custom_error_codes_enabled === true
-      const existingErrorCodes = credentials.custom_error_codes as number[] | undefined
-      if (existingErrorCodes && Array.isArray(existingErrorCodes)) {
-        selectedErrorCodes.value = [...existingErrorCodes]
-      } else {
+        customErrorCodesEnabled.value = false
         selectedErrorCodes.value = []
       }
-    } else {
-      const platformDefaultUrl = newAccount.platform === 'openai' ? 'https://api.openai.com' : 'https://api.anthropic.com'
-      editBaseUrl.value = platformDefaultUrl
-      modelRestrictionMode.value = 'whitelist'
-      modelMappings.value = []
-      allowedModels.value = []
-      customErrorCodesEnabled.value = false
-      selectedErrorCodes.value = []
+      editApiKey.value = ''
     }
-    editApiKey.value = ''
-  }
-}, { immediate: true })
+  },
+  { immediate: true }
+)
 
 // Model mapping helpers
 const addModelMapping = () => {
@@ -589,7 +821,7 @@ const removeModelMapping = (index: number) => {
 }
 
 const addPresetMapping = (from: string, to: string) => {
-  const exists = modelMappings.value.some(m => m.from === from)
+  const exists = modelMappings.value.some((m) => m.from === from)
   if (exists) {
     appStore.showInfo(t('admin.accounts.mappingExists', { model: from }))
     return
@@ -666,7 +898,7 @@ const handleSubmit = async () => {
 
     // For apikey type, handle credentials update
     if (props.account.type === 'apikey') {
-      const currentCredentials = props.account.credentials as Record<string, unknown> || {}
+      const currentCredentials = (props.account.credentials as Record<string, unknown>) || {}
       const newBaseUrl = editBaseUrl.value.trim() || defaultBaseUrl.value
       const modelMapping = buildModelMappingObject()
 
@@ -707,7 +939,7 @@ const handleSubmit = async () => {
       updatePayload.credentials = newCredentials
     } else {
       // For oauth/setup-token types, only update intercept_warmup_requests if changed
-      const currentCredentials = props.account.credentials as Record<string, unknown> || {}
+      const currentCredentials = (props.account.credentials as Record<string, unknown>) || {}
       const newCredentials: Record<string, unknown> = { ...currentCredentials }
 
       if (interceptWarmupRequests.value) {
diff --git a/frontend/src/components/account/OAuthAuthorizationFlow.vue b/frontend/src/components/account/OAuthAuthorizationFlow.vue
index b0c9dfadb3..9cdc9a0f1b 100644
--- a/frontend/src/components/account/OAuthAuthorizationFlow.vue
+++ b/frontend/src/components/account/OAuthAuthorizationFlow.vue
@@ -1,9 +1,21 @@
 <template>
-  <div class="rounded-lg border border-blue-200 bg-blue-50 dark:border-blue-700 dark:bg-blue-900/30 p-6">
+  <div
+    class="rounded-lg border border-blue-200 bg-blue-50 p-6 dark:border-blue-700 dark:bg-blue-900/30"
+  >
     <div class="flex items-start gap-4">
       <div class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-blue-500">
-        <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" 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-5 w-5 text-white"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          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>
       </div>
       <div class="flex-1">
@@ -22,7 +34,9 @@
                 value="manual"
                 class="text-blue-600 focus:ring-blue-500"
               />
-              <span class="text-sm text-blue-900 dark:text-blue-200">{{ t('admin.accounts.oauth.manualAuth') }}</span>
+              <span class="text-sm text-blue-900 dark:text-blue-200">{{
+                t('admin.accounts.oauth.manualAuth')
+              }}</span>
             </label>
             <label class="flex cursor-pointer items-center gap-2">
               <input
@@ -31,23 +45,39 @@
                 value="cookie"
                 class="text-blue-600 focus:ring-blue-500"
               />
-              <span class="text-sm text-blue-900 dark:text-blue-200">{{ t('admin.accounts.oauth.cookieAutoAuth') }}</span>
+              <span class="text-sm text-blue-900 dark:text-blue-200">{{
+                t('admin.accounts.oauth.cookieAutoAuth')
+              }}</span>
             </label>
           </div>
         </div>
 
         <!-- Cookie Auto-Auth Form -->
         <div v-if="inputMethod === 'cookie'" class="space-y-4">
-          <div class="rounded-lg border border-blue-300 dark:border-blue-600 bg-white/80 dark:bg-gray-800/80 p-4">
+          <div
+            class="rounded-lg border border-blue-300 bg-white/80 p-4 dark:border-blue-600 dark:bg-gray-800/80"
+          >
             <p class="mb-3 text-sm text-blue-700 dark:text-blue-300">
               {{ t('admin.accounts.oauth.cookieAutoAuthDesc') }}
             </p>
 
             <!-- sessionKey Input -->
             <div class="mb-4">
-              <label class="mb-2 flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
-                <svg class="w-4 h-4 text-blue-500" 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" />
+              <label
+                class="mb-2 flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-300"
+              >
+                <svg
+                  class="h-4 w-4 text-blue-500"
+                  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>
                 {{ t('admin.accounts.oauth.sessionKey') }}
                 <span
@@ -62,16 +92,30 @@
                   class="text-blue-500 hover:text-blue-600"
                   @click="showHelpDialog = !showHelpDialog"
                 >
-                  <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="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
+                  <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="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z"
+                    />
                   </svg>
                 </button>
               </label>
               <textarea
                 v-model="sessionKeyInput"
                 rows="3"
-                class="input w-full font-mono text-sm resize-y"
-                :placeholder="allowMultiple ? t('admin.accounts.oauth.sessionKeyPlaceholder') : t('admin.accounts.oauth.sessionKeyPlaceholderSingle')"
+                class="input w-full resize-y font-mono text-sm"
+                :placeholder="
+                  allowMultiple
+                    ? t('admin.accounts.oauth.sessionKeyPlaceholder')
+                    : t('admin.accounts.oauth.sessionKeyPlaceholderSingle')
+                "
               ></textarea>
               <p
                 v-if="parsedKeyCount > 1 && allowMultiple"
@@ -84,12 +128,14 @@
             <!-- Help Section -->
             <div
               v-if="showHelpDialog && showHelp"
-              class="mb-4 rounded-lg border border-amber-200 bg-amber-50 dark:border-amber-700 dark:bg-amber-900/30 p-3"
+              class="mb-4 rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-700 dark:bg-amber-900/30"
             >
               <h5 class="mb-2 font-semibold text-amber-800 dark:text-amber-200">
                 {{ t('admin.accounts.oauth.howToGetSessionKey') }}
               </h5>
-              <ol class="list-inside list-decimal space-y-1 text-xs text-amber-700 dark:text-amber-300">
+              <ol
+                class="list-inside list-decimal space-y-1 text-xs text-amber-700 dark:text-amber-300"
+              >
                 <li v-html="t('admin.accounts.oauth.step1')"></li>
                 <li v-html="t('admin.accounts.oauth.step2')"></li>
                 <li v-html="t('admin.accounts.oauth.step3')"></li>
@@ -97,15 +143,18 @@
                 <li v-html="t('admin.accounts.oauth.step5')"></li>
                 <li v-html="t('admin.accounts.oauth.step6')"></li>
               </ol>
-              <p class="mt-2 text-xs text-amber-600 dark:text-amber-400" v-html="t('admin.accounts.oauth.sessionKeyFormat')"></p>
+              <p
+                class="mt-2 text-xs text-amber-600 dark:text-amber-400"
+                v-html="t('admin.accounts.oauth.sessionKeyFormat')"
+              ></p>
             </div>
 
             <!-- Error Message -->
             <div
               v-if="error"
-              class="mb-4 rounded-lg border border-red-200 bg-red-50 dark:border-red-700 dark:bg-red-900/30 p-3"
+              class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 dark:border-red-700 dark:bg-red-900/30"
             >
-              <p class="text-sm text-red-600 dark:text-red-400 whitespace-pre-line">
+              <p class="whitespace-pre-line text-sm text-red-600 dark:text-red-400">
                 {{ error }}
               </p>
             </div>
@@ -117,14 +166,45 @@
               :disabled="loading || !sessionKeyInput.trim()"
               @click="handleCookieAuth"
             >
-              <svg v-if="loading" 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="loading"
+                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 class="w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z" />
+              <svg
+                v-else
+                class="mr-2 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="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z"
+                />
               </svg>
-              {{ loading ? t('admin.accounts.oauth.authorizing') : t('admin.accounts.oauth.startAutoAuth') }}
+              {{
+                loading
+                  ? t('admin.accounts.oauth.authorizing')
+                  : t('admin.accounts.oauth.startAutoAuth')
+              }}
             </button>
           </div>
         </div>
@@ -136,9 +216,13 @@
           </p>
 
           <!-- Step 1: Generate Auth URL -->
-          <div class="rounded-lg border border-blue-300 dark:border-blue-600 bg-white/80 dark:bg-gray-800/80 p-4">
+          <div
+            class="rounded-lg border border-blue-300 bg-white/80 p-4 dark:border-blue-600 dark:bg-gray-800/80"
+          >
             <div class="flex items-start gap-3">
-              <div class="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-600 text-xs font-bold text-white">
+              <div
+                class="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-600 text-xs font-bold text-white"
+              >
                 1
               </div>
               <div class="flex-1">
@@ -152,12 +236,39 @@
                   class="btn btn-primary text-sm"
                   @click="handleGenerateUrl"
                 >
-                  <svg v-if="loading" 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="loading"
+                    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 class="w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" 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
+                    v-else
+                    class="mr-2 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.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>
                   {{ loading ? t('admin.accounts.oauth.generating') : oauthGenerateAuthUrl }}
                 </button>
@@ -167,7 +278,7 @@
                       :value="authUrl"
                       readonly
                       type="text"
-                      class="input flex-1 bg-gray-50 dark:bg-gray-700 font-mono text-xs"
+                      class="input flex-1 bg-gray-50 font-mono text-xs dark:bg-gray-700"
                     />
                     <button
                       type="button"
@@ -175,11 +286,33 @@
                       title="Copy URL"
                       @click="handleCopyUrl"
                     >
-                      <svg v-if="!copied" 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="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-if="!copied"
+                        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="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>
-                      <svg v-else class="w-4 h-4 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
+                        v-else
+                        class="h-4 w-4 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>
                     </button>
                   </div>
@@ -188,8 +321,18 @@
                     class="text-xs text-blue-600 hover:text-blue-700 dark:text-blue-400"
                     @click="handleRegenerate"
                   >
-                    <svg class="w-3 h-3 inline mr-1" 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" />
+                    <svg
+                      class="mr-1 inline h-3 w-3"
+                      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"
+                      />
                     </svg>
                     {{ t('admin.accounts.oauth.regenerate') }}
                   </button>
@@ -199,9 +342,13 @@
           </div>
 
           <!-- Step 2: Open URL and authorize -->
-          <div class="rounded-lg border border-blue-300 dark:border-blue-600 bg-white/80 dark:bg-gray-800/80 p-4">
+          <div
+            class="rounded-lg border border-blue-300 bg-white/80 p-4 dark:border-blue-600 dark:bg-gray-800/80"
+          >
             <div class="flex items-start gap-3">
-              <div class="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-600 text-xs font-bold text-white">
+              <div
+                class="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-600 text-xs font-bold text-white"
+              >
                 2
               </div>
               <div class="flex-1">
@@ -212,58 +359,120 @@
                   {{ oauthOpenUrlDesc }}
                 </p>
                 <!-- OpenAI Important Notice -->
-                <div v-if="isOpenAI" class="mt-2 rounded border border-amber-300 dark:border-amber-700 bg-amber-50 dark:bg-amber-900/30 p-3">
-                  <p class="text-xs text-amber-800 dark:text-amber-300" v-html="oauthImportantNotice">
-                  </p>
+                <div
+                  v-if="isOpenAI"
+                  class="mt-2 rounded border border-amber-300 bg-amber-50 p-3 dark:border-amber-700 dark:bg-amber-900/30"
+                >
+                  <p
+                    class="text-xs text-amber-800 dark:text-amber-300"
+                    v-html="oauthImportantNotice"
+                  ></p>
                 </div>
                 <!-- Proxy Warning (for non-OpenAI) -->
-                <div v-else-if="showProxyWarning" class="mt-2 rounded border border-yellow-300 dark:border-yellow-700 bg-yellow-50 dark:bg-yellow-900/30 p-3">
-                  <p class="text-xs text-yellow-800 dark:text-yellow-300" v-html="t('admin.accounts.oauth.proxyWarning')">
-                  </p>
+                <div
+                  v-else-if="showProxyWarning"
+                  class="mt-2 rounded border border-yellow-300 bg-yellow-50 p-3 dark:border-yellow-700 dark:bg-yellow-900/30"
+                >
+                  <p
+                    class="text-xs text-yellow-800 dark:text-yellow-300"
+                    v-html="t('admin.accounts.oauth.proxyWarning')"
+                  ></p>
                 </div>
               </div>
             </div>
           </div>
 
           <!-- Step 3: Enter authorization code -->
-          <div class="rounded-lg border border-blue-300 dark:border-blue-600 bg-white/80 dark:bg-gray-800/80 p-4">
+          <div
+            class="rounded-lg border border-blue-300 bg-white/80 p-4 dark:border-blue-600 dark:bg-gray-800/80"
+          >
             <div class="flex items-start gap-3">
-              <div class="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-600 text-xs font-bold text-white">
+              <div
+                class="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-600 text-xs font-bold text-white"
+              >
                 3
               </div>
               <div class="flex-1">
                 <p class="mb-2 font-medium text-blue-900 dark:text-blue-200">
                   {{ oauthStep3EnterCode }}
                 </p>
-                <p class="mb-3 text-sm text-blue-700 dark:text-blue-300" v-html="oauthAuthCodeDesc">
-                </p>
+                <p
+                  class="mb-3 text-sm text-blue-700 dark:text-blue-300"
+                  v-html="oauthAuthCodeDesc"
+                ></p>
                 <div>
                   <label class="input-label">
-                    <svg class="w-4 h-4 inline mr-1 text-blue-500" 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
+                      class="mr-1 inline h-4 w-4 text-blue-500"
+                      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>
                     {{ oauthAuthCode }}
                   </label>
                   <textarea
                     v-model="authCodeInput"
                     rows="3"
-                    class="input w-full font-mono text-sm resize-none"
+                    class="input w-full resize-none font-mono text-sm"
                     :placeholder="oauthAuthCodePlaceholder"
                   ></textarea>
                   <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
-                    <svg class="w-3 h-3 inline mr-1" 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
+                      class="mr-1 inline h-3 w-3"
+                      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>
                     {{ oauthAuthCodeHint }}
                   </p>
+
+                  <!-- Gemini-specific state parameter warning -->
+                  <div
+                    v-if="platform === 'gemini'"
+                    class="mt-3 rounded-lg border-2 border-amber-400 bg-amber-50 p-3 dark:border-amber-600 dark:bg-amber-900/30"
+                  >
+                    <div class="flex items-start gap-2">
+                      <svg
+                        class="h-5 w-5 flex-shrink-0 text-amber-600 dark:text-amber-400"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                        stroke-width="2"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                        />
+                      </svg>
+                      <div class="text-sm text-amber-800 dark:text-amber-300">
+                        <p class="font-semibold">{{ $t('admin.accounts.oauth.gemini.stateWarningTitle') }}</p>
+                        <p class="mt-1">{{ $t('admin.accounts.oauth.gemini.stateWarningDesc') }}</p>
+                      </div>
+                    </div>
+                  </div>
                 </div>
 
                 <!-- Error Message -->
                 <div
                   v-if="error"
-                  class="mt-3 rounded-lg border border-red-200 bg-red-50 dark:border-red-700 dark:bg-red-900/30 p-3"
+                  class="mt-3 rounded-lg border border-red-200 bg-red-50 p-3 dark:border-red-700 dark:bg-red-900/30"
                 >
-                  <p class="text-sm text-red-600 dark:text-red-400 whitespace-pre-line">
+                  <p class="whitespace-pre-line text-sm text-red-600 dark:text-red-400">
                     {{ error }}
                   </p>
                 </div>
@@ -293,7 +502,7 @@ interface Props {
   allowMultiple?: boolean
   methodLabel?: string
   showCookieOption?: boolean // Whether to show cookie auto-auth option
-  platform?: 'anthropic' | 'openai' // Platform type for different UI/text
+  platform?: 'anthropic' | 'openai' | 'gemini' // Platform type for different UI/text
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -318,16 +527,12 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 
-// Platform-specific translation helpers
 const isOpenAI = computed(() => props.platform === 'openai')
 
 // Get translation key based on platform
 const getOAuthKey = (key: string) => {
-  if (isOpenAI.value) {
-    // Try OpenAI-specific key first
-    const openaiKey = `admin.accounts.oauth.openai.${key}`
-    return openaiKey
-  }
+  if (props.platform === 'openai') return `admin.accounts.oauth.openai.${key}`
+  if (props.platform === 'gemini') return `admin.accounts.oauth.gemini.${key}`
   return `admin.accounts.oauth.${key}`
 }
 
@@ -343,20 +548,26 @@ const oauthAuthCodeDesc = computed(() => t(getOAuthKey('authCodeDesc')))
 const oauthAuthCode = computed(() => t(getOAuthKey('authCode')))
 const oauthAuthCodePlaceholder = computed(() => t(getOAuthKey('authCodePlaceholder')))
 const oauthAuthCodeHint = computed(() => t(getOAuthKey('authCodeHint')))
-const oauthImportantNotice = computed(() => isOpenAI.value ? t('admin.accounts.oauth.openai.importantNotice') : '')
+const oauthImportantNotice = computed(() =>
+  props.platform === 'openai' ? t('admin.accounts.oauth.openai.importantNotice') : ''
+)
 
 // Local state
 const inputMethod = ref<AuthInputMethod>(props.showCookieOption ? 'manual' : 'manual')
 const authCodeInput = ref('')
 const sessionKeyInput = ref('')
 const showHelpDialog = ref(false)
+const oauthState = ref('')
 
 // Clipboard
 const { copied, copyToClipboard } = useClipboard()
 
 // Computed
 const parsedKeyCount = computed(() => {
-  return sessionKeyInput.value.split('\n').map(k => k.trim()).filter(k => k).length
+  return sessionKeyInput.value
+    .split('\n')
+    .map((k) => k.trim())
+    .filter((k) => k).length
 })
 
 // Watchers
@@ -367,7 +578,7 @@ watch(inputMethod, (newVal) => {
 // Auto-extract code from OpenAI callback URL
 // e.g., http://localhost:1455/auth/callback?code=ac_xxx...&scope=...&state=...
 watch(authCodeInput, (newVal) => {
-  if (!isOpenAI.value) return
+  if (props.platform !== 'openai' && props.platform !== 'gemini') return
 
   const trimmed = newVal.trim()
   // Check if it looks like a URL with code parameter
@@ -376,6 +587,10 @@ watch(authCodeInput, (newVal) => {
       // Try to parse as URL
       const url = new URL(trimmed)
       const code = url.searchParams.get('code')
+      const stateParam = url.searchParams.get('state')
+      if (props.platform === 'gemini' && stateParam) {
+        oauthState.value = stateParam
+      }
       if (code && code !== trimmed) {
         // Replace the input with just the code
         authCodeInput.value = code
@@ -383,6 +598,10 @@ watch(authCodeInput, (newVal) => {
     } catch {
       // If URL parsing fails, try regex extraction
       const match = trimmed.match(/[?&]code=([^&]+)/)
+      const stateMatch = trimmed.match(/[?&]state=([^&]+)/)
+      if (props.platform === 'gemini' && stateMatch && stateMatch[1]) {
+        oauthState.value = stateMatch[1]
+      }
       if (match && match[1] && match[1] !== trimmed) {
         authCodeInput.value = match[1]
       }
@@ -415,10 +634,12 @@ const handleCookieAuth = () => {
 // Expose methods and state
 defineExpose({
   authCode: authCodeInput,
+  oauthState,
   sessionKey: sessionKeyInput,
   inputMethod,
   reset: () => {
     authCodeInput.value = ''
+    oauthState.value = ''
     sessionKeyInput.value = ''
     inputMethod.value = 'manual'
     showHelpDialog.value = false
diff --git a/frontend/src/components/account/ReAuthAccountModal.vue b/frontend/src/components/account/ReAuthAccountModal.vue
index 69f610f5ff..0dfa69fef5 100644
--- a/frontend/src/components/account/ReAuthAccountModal.vue
+++ b/frontend/src/components/account/ReAuthAccountModal.vue
@@ -7,29 +7,55 @@
   >
     <div v-if="account" class="space-y-5">
       <!-- Account Info -->
-      <div class="rounded-lg border border-gray-200 dark:border-dark-600 bg-gray-50 dark:bg-dark-700 p-4">
+      <div
+        class="rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-dark-600 dark:bg-dark-700"
+      >
         <div class="flex items-center gap-3">
-          <div :class="[
-            'flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br',
-            isOpenAI ? 'from-green-500 to-green-600' : 'from-orange-500 to-orange-600'
-          ]">
-            <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z" />
+          <div
+            :class="[
+              'flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br',
+              isOpenAI
+                ? 'from-green-500 to-green-600'
+                : isGemini
+                  ? 'from-blue-500 to-blue-600'
+                  : 'from-orange-500 to-orange-600'
+            ]"
+          >
+            <svg
+              class="h-5 w-5 text-white"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="1.5"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z"
+              />
             </svg>
           </div>
           <div>
-            <span class="block font-semibold text-gray-900 dark:text-white">{{ account.name }}</span>
+            <span class="block font-semibold text-gray-900 dark:text-white">{{
+              account.name
+            }}</span>
             <span class="text-sm text-gray-500 dark:text-gray-400">
-              {{ isOpenAI ? t('admin.accounts.openaiAccount') : t('admin.accounts.claudeCodeAccount') }}
+              {{
+                isOpenAI
+                  ? t('admin.accounts.openaiAccount')
+                  : isGemini
+                    ? t('admin.accounts.geminiAccount')
+                    : t('admin.accounts.claudeCodeAccount')
+              }}
             </span>
           </div>
         </div>
       </div>
 
       <!-- Add Method Selection (Claude only) -->
-      <div v-if="!isOpenAI">
+      <div v-if="isAnthropic">
         <label class="input-label">{{ t('admin.accounts.oauth.authMethod') }}</label>
-        <div class="flex gap-4 mt-2">
+        <div class="mt-2 flex gap-4">
           <label class="flex cursor-pointer items-center">
             <input
               v-model="addMethod"
@@ -46,12 +72,42 @@
               value="setup-token"
               class="mr-2 text-primary-600 focus:ring-primary-500"
             />
-            <span class="text-sm text-gray-700 dark:text-gray-300">{{ t('admin.accounts.setupTokenLongLived') }}</span>
+            <span class="text-sm text-gray-700 dark:text-gray-300">{{
+              t('admin.accounts.setupTokenLongLived')
+            }}</span>
           </label>
         </div>
       </div>
 
       <!-- OAuth Authorization Section -->
+      <div
+        v-if="isGemini"
+        class="rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-dark-600 dark:bg-dark-700"
+      >
+        <label class="input-label">{{ t('admin.accounts.oauth.gemini.redirectUri') }}</label>
+        <input
+          v-model="geminiRedirectUri"
+          type="text"
+          class="input font-mono text-sm"
+          :placeholder="defaultCallbackUrl"
+        />
+        <p class="input-hint">{{ t('admin.accounts.oauth.gemini.redirectUriHint') }}</p>
+        <div class="mt-3 flex items-start gap-2">
+          <input
+            id="gemini-redirect-uri-confirm"
+            v-model="geminiRedirectUriConfirmed"
+            type="checkbox"
+            class="mt-0.5 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-dark-500"
+          />
+          <label for="gemini-redirect-uri-confirm" class="text-sm text-gray-700 dark:text-gray-300">
+            {{ t('admin.accounts.oauth.gemini.confirmRedirectUri') }}
+          </label>
+        </div>
+        <p v-if="geminiRedirectUri && !isValidGeminiRedirectUri" class="mt-2 text-xs text-red-600">
+          {{ t('admin.accounts.oauth.gemini.invalidRedirectUri') }}
+        </p>
+      </div>
+
       <OAuthAuthorizationFlow
         ref="oauthFlowRef"
         :add-method="addMethod"
@@ -59,22 +115,18 @@
         :session-id="currentSessionId"
         :loading="currentLoading"
         :error="currentError"
-        :show-help="!isOpenAI"
-        :show-proxy-warning="!isOpenAI"
-        :show-cookie-option="!isOpenAI"
+        :show-help="isAnthropic"
+        :show-proxy-warning="isAnthropic"
+        :show-cookie-option="isAnthropic"
         :allow-multiple="false"
         :method-label="t('admin.accounts.inputMethod')"
-        :platform="isOpenAI ? 'openai' : 'anthropic'"
+        :platform="isOpenAI ? 'openai' : isGemini ? 'gemini' : 'anthropic'"
         @generate-url="handleGenerateUrl"
         @cookie-auth="handleCookieAuth"
       />
 
       <div class="flex justify-between gap-3 pt-4">
-        <button
-          type="button"
-          class="btn btn-secondary"
-          @click="handleClose"
-        >
+        <button type="button" class="btn btn-secondary" @click="handleClose">
           {{ t('common.cancel') }}
         </button>
         <button
@@ -86,14 +138,29 @@
         >
           <svg
             v-if="currentLoading"
-            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>
-          {{ currentLoading ? t('admin.accounts.oauth.verifying') : t('admin.accounts.oauth.completeAuth') }}
+          {{
+            currentLoading
+              ? t('admin.accounts.oauth.verifying')
+              : t('admin.accounts.oauth.completeAuth')
+          }}
         </button>
       </div>
     </div>
@@ -105,8 +172,13 @@ import { ref, computed, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useAppStore } from '@/stores/app'
 import { adminAPI } from '@/api/admin'
-import { useAccountOAuth, type AddMethod, type AuthInputMethod } from '@/composables/useAccountOAuth'
+import {
+  useAccountOAuth,
+  type AddMethod,
+  type AuthInputMethod
+} from '@/composables/useAccountOAuth'
 import { useOpenAIOAuth } from '@/composables/useOpenAIOAuth'
+import { useGeminiOAuth } from '@/composables/useGeminiOAuth'
 import type { Account } from '@/types'
 import Modal from '@/components/common/Modal.vue'
 import OAuthAuthorizationFlow from './OAuthAuthorizationFlow.vue'
@@ -115,6 +187,7 @@ import OAuthAuthorizationFlow from './OAuthAuthorizationFlow.vue'
 // Note: defineExpose automatically unwraps refs, so we use the unwrapped types
 interface OAuthFlowExposed {
   authCode: string
+  oauthState: string
   sessionKey: string
   inputMethod: AuthInputMethod
   reset: () => void
@@ -137,6 +210,7 @@ const { t } = useI18n()
 // OAuth composables - use both Claude and OpenAI
 const claudeOAuth = useAccountOAuth()
 const openaiOAuth = useOpenAIOAuth()
+const geminiOAuth = useGeminiOAuth()
 
 // Refs
 const oauthFlowRef = ref<OAuthFlowExposed | null>(null)
@@ -146,43 +220,87 @@ const addMethod = ref<AddMethod>('oauth')
 
 // Computed - check if this is an OpenAI account
 const isOpenAI = computed(() => props.account?.platform === 'openai')
+const isGemini = computed(() => props.account?.platform === 'gemini')
+const isAnthropic = computed(() => props.account?.platform === 'anthropic')
 
 // Computed - current OAuth state based on platform
-const currentAuthUrl = computed(() => isOpenAI.value ? openaiOAuth.authUrl.value : claudeOAuth.authUrl.value)
-const currentSessionId = computed(() => isOpenAI.value ? openaiOAuth.sessionId.value : claudeOAuth.sessionId.value)
-const currentLoading = computed(() => isOpenAI.value ? openaiOAuth.loading.value : claudeOAuth.loading.value)
-const currentError = computed(() => isOpenAI.value ? openaiOAuth.error.value : claudeOAuth.error.value)
+const currentAuthUrl = computed(() => {
+  if (isOpenAI.value) return openaiOAuth.authUrl.value
+  if (isGemini.value) return geminiOAuth.authUrl.value
+  return claudeOAuth.authUrl.value
+})
+const currentSessionId = computed(() => {
+  if (isOpenAI.value) return openaiOAuth.sessionId.value
+  if (isGemini.value) return geminiOAuth.sessionId.value
+  return claudeOAuth.sessionId.value
+})
+const currentLoading = computed(() => {
+  if (isOpenAI.value) return openaiOAuth.loading.value
+  if (isGemini.value) return geminiOAuth.loading.value
+  return claudeOAuth.loading.value
+})
+const currentError = computed(() => {
+  if (isOpenAI.value) return openaiOAuth.error.value
+  if (isGemini.value) return geminiOAuth.error.value
+  return claudeOAuth.error.value
+})
 
 // Computed
 const isManualInputMethod = computed(() => {
   // OpenAI always uses manual input (no cookie auth option)
-  return isOpenAI.value || oauthFlowRef.value?.inputMethod === 'manual'
+  return isOpenAI.value || isGemini.value || oauthFlowRef.value?.inputMethod === 'manual'
 })
 
 const canExchangeCode = computed(() => {
   const authCode = oauthFlowRef.value?.authCode || ''
-  const sessionId = isOpenAI.value ? openaiOAuth.sessionId.value : claudeOAuth.sessionId.value
-  const loading = isOpenAI.value ? openaiOAuth.loading.value : claudeOAuth.loading.value
+  const sessionId = isOpenAI.value
+    ? openaiOAuth.sessionId.value
+    : isGemini.value
+      ? geminiOAuth.sessionId.value
+      : claudeOAuth.sessionId.value
+  const loading = isOpenAI.value
+    ? openaiOAuth.loading.value
+    : isGemini.value
+      ? geminiOAuth.loading.value
+      : claudeOAuth.loading.value
+  if (isGemini.value) {
+    return (
+      authCode.trim() &&
+      sessionId &&
+      !loading &&
+      geminiRedirectUriConfirmed.value &&
+      isValidGeminiRedirectUri.value
+    )
+  }
   return authCode.trim() && sessionId && !loading
 })
 
 // Watchers
-watch(() => props.show, (newVal) => {
-  if (newVal && props.account) {
-    // Initialize addMethod based on current account type (Claude only)
-    if (!isOpenAI.value && (props.account.type === 'oauth' || props.account.type === 'setup-token')) {
-      addMethod.value = props.account.type as AddMethod
+watch(
+  () => props.show,
+  (newVal) => {
+    if (newVal && props.account) {
+      // Initialize addMethod based on current account type (Claude only)
+      if (
+        isAnthropic.value &&
+        (props.account.type === 'oauth' || props.account.type === 'setup-token')
+      ) {
+        addMethod.value = props.account.type as AddMethod
+      }
+    } else {
+      resetState()
     }
-  } else {
-    resetState()
   }
-})
+)
 
 // Methods
 const resetState = () => {
   addMethod.value = 'oauth'
   claudeOAuth.resetState()
   openaiOAuth.resetState()
+  geminiOAuth.resetState()
+  geminiRedirectUri.value = defaultCallbackUrl
+  geminiRedirectUriConfirmed.value = false
   oauthFlowRef.value?.reset()
 }
 
@@ -195,6 +313,16 @@ const handleGenerateUrl = async () => {
 
   if (isOpenAI.value) {
     await openaiOAuth.generateAuthUrl(props.account.proxy_id)
+  } else if (isGemini.value) {
+    if (!isValidGeminiRedirectUri.value) {
+      appStore.showError(t('admin.accounts.oauth.gemini.invalidRedirectUri'))
+      return
+    }
+    if (!geminiRedirectUriConfirmed.value) {
+      appStore.showError(t('admin.accounts.oauth.gemini.redirectUriNotConfirmed'))
+      return
+    }
+    await geminiOAuth.generateAuthUrl(props.account.proxy_id, geminiRedirectUri.value)
   } else {
     await claudeOAuth.generateAuthUrl(addMethod.value, props.account.proxy_id)
   }
@@ -211,7 +339,11 @@ const handleExchangeCode = async () => {
     const sessionId = openaiOAuth.sessionId.value
     if (!sessionId) return
 
-    const tokenInfo = await openaiOAuth.exchangeAuthCode(authCode.trim(), sessionId, props.account.proxy_id)
+    const tokenInfo = await openaiOAuth.exchangeAuthCode(
+      authCode.trim(),
+      sessionId,
+      props.account.proxy_id
+    )
     if (!tokenInfo) return
 
     // Build credentials and extra info
@@ -236,6 +368,49 @@ const handleExchangeCode = async () => {
       openaiOAuth.error.value = error.response?.data?.detail || t('admin.accounts.oauth.authFailed')
       appStore.showError(openaiOAuth.error.value)
     }
+  } else if (isGemini.value) {
+    const sessionId = geminiOAuth.sessionId.value
+    if (!sessionId) return
+
+    if (!isValidGeminiRedirectUri.value) {
+      geminiOAuth.error.value = t('admin.accounts.oauth.gemini.invalidRedirectUri')
+      appStore.showError(geminiOAuth.error.value)
+      return
+    }
+    if (!geminiRedirectUriConfirmed.value) {
+      geminiOAuth.error.value = t('admin.accounts.oauth.gemini.redirectUriNotConfirmed')
+      appStore.showError(geminiOAuth.error.value)
+      return
+    }
+
+    const stateFromInput = oauthFlowRef.value?.oauthState || ''
+    const stateToUse = stateFromInput || geminiOAuth.state.value
+    if (!stateToUse) return
+
+    const tokenInfo = await geminiOAuth.exchangeAuthCode({
+      code: authCode.trim(),
+      sessionId,
+      state: stateToUse,
+      redirectUri: geminiRedirectUri.value,
+      proxyId: props.account.proxy_id
+    })
+    if (!tokenInfo) return
+
+    const credentials = geminiOAuth.buildCredentials(tokenInfo)
+
+    try {
+      await adminAPI.accounts.update(props.account.id, {
+        type: 'oauth',
+        credentials
+      })
+      await adminAPI.accounts.clearError(props.account.id)
+      appStore.showSuccess(t('admin.accounts.reAuthorizedSuccess'))
+      emit('reauthorized')
+      handleClose()
+    } catch (error: any) {
+      geminiOAuth.error.value = error.response?.data?.detail || t('admin.accounts.oauth.authFailed')
+      appStore.showError(geminiOAuth.error.value)
+    }
   } else {
     // Claude OAuth flow
     const sessionId = claudeOAuth.sessionId.value
@@ -246,9 +421,10 @@ const handleExchangeCode = async () => {
 
     try {
       const proxyConfig = props.account.proxy_id ? { proxy_id: props.account.proxy_id } : {}
-      const endpoint = addMethod.value === 'oauth'
-        ? '/admin/accounts/exchange-code'
-        : '/admin/accounts/exchange-setup-token-code'
+      const endpoint =
+        addMethod.value === 'oauth'
+          ? '/admin/accounts/exchange-code'
+          : '/admin/accounts/exchange-setup-token-code'
 
       const tokenInfo = await adminAPI.accounts.exchangeCode(endpoint, {
         session_id: sessionId,
@@ -280,6 +456,28 @@ const handleExchangeCode = async () => {
   }
 }
 
+// 优先使用环境变量配置的 Redirect URI,否则使用当前域名
+const defaultCallbackUrl =
+  import.meta.env.VITE_OAUTH_CALLBACK_URL ||
+  (typeof window !== 'undefined' ? `${window.location.origin}/auth/callback` : '')
+const geminiRedirectUri = ref(defaultCallbackUrl)
+const geminiRedirectUriConfirmed = ref(false)
+
+const isValidGeminiRedirectUri = computed(() => {
+  const raw = geminiRedirectUri.value?.trim()
+  if (!raw) return false
+  try {
+    const parsed = new URL(raw)
+    return parsed.protocol === 'http:' || parsed.protocol === 'https:'
+  } catch {
+    return false
+  }
+})
+
+watch(geminiRedirectUri, () => {
+  geminiRedirectUriConfirmed.value = false
+})
+
 const handleCookieAuth = async (sessionKey: string) => {
   if (!props.account || isOpenAI.value) return
 
@@ -288,9 +486,10 @@ const handleCookieAuth = async (sessionKey: string) => {
 
   try {
     const proxyConfig = props.account.proxy_id ? { proxy_id: props.account.proxy_id } : {}
-    const endpoint = addMethod.value === 'oauth'
-      ? '/admin/accounts/cookie-auth'
-      : '/admin/accounts/setup-token-cookie-auth'
+    const endpoint =
+      addMethod.value === 'oauth'
+        ? '/admin/accounts/cookie-auth'
+        : '/admin/accounts/setup-token-cookie-auth'
 
     const tokenInfo = await adminAPI.accounts.exchangeCode(endpoint, {
       session_id: '',
@@ -314,7 +513,8 @@ const handleCookieAuth = async (sessionKey: string) => {
     emit('reauthorized')
     handleClose()
   } catch (error: any) {
-    claudeOAuth.error.value = error.response?.data?.detail || t('admin.accounts.oauth.cookieAuthFailed')
+    claudeOAuth.error.value =
+      error.response?.data?.detail || t('admin.accounts.oauth.cookieAuthFailed')
   } finally {
     claudeOAuth.loading.value = false
   }