diff --git a/packages/frontend/src/style.css b/packages/frontend/src/style.css
index 6401563..a3185c1 100644
--- a/packages/frontend/src/style.css
+++ b/packages/frontend/src/style.css
@@ -32,6 +32,12 @@
   --color-ssh-tab-active: var(--ssh-tab-active);
   --color-ssh-tab-background: var(--ssh-tab-background);
   --color-overlay: var(--overlay-bg-color); /* Added Overlay Background */
+  --color-success: var(--color-success);
+  --color-warning: var(--color-warning);
+  --color-error: var(--color-error);
+  --color-success-text: var(--color-success-text);
+  --color-warning-text: var(--color-warning-text);
+  --color-error-text: var(--color-error-text);
 }
 
 /* 全局样式和 CSS 变量定义 */
@@ -63,6 +69,14 @@
   --ssh-tab-background: transparent; /* Corrected value */
   --overlay-bg-color: rgba(0, 0, 0, 0.6); /* Added Overlay Background Color */
 
+  /* Status Colors */
+  --color-success: #28a745; /* Green */
+  --color-warning: #ffc107; /* Yellow */
+  --color-error: #dc3545;   /* Red */
+  --color-success-text: #ffffff; /* White text for green bg */
+  --color-warning-text: #212529; /* Dark text for yellow bg */
+  --color-error-text: #ffffff;   /* White text for red bg */
+
   /* 字体 */
   --font-family-sans-serif: sans-serif; /* 默认字体 */
 
diff --git a/packages/frontend/src/views/SettingsView.vue b/packages/frontend/src/views/SettingsView.vue
index 869f9c6..7ff102e 100644
--- a/packages/frontend/src/views/SettingsView.vue
+++ b/packages/frontend/src/views/SettingsView.vue
@@ -83,7 +83,7 @@
                      </div>
                      <div class="flex items-center justify-between">
                         <button type="submit" :disabled="twoFactorLoading"
-                                class="px-4 py-2 bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out text-sm font-medium">
+                                class="px-4 py-2 bg-error text-error-text rounded-md shadow-sm hover:bg-error/80 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-error disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out text-sm font-medium">
                           {{ twoFactorLoading ? $t('common.loading') : $t('settings.twoFactor.disable.button') }}
                         </button>
                      </div>
@@ -92,7 +92,7 @@
                  <div v-else>
                    <p class="text-sm text-text-secondary mb-4">{{ $t('settings.twoFactor.status.disabled') }}</p>
                    <button v-if="!isSettingUp2FA" @click="handleSetup2FA" :disabled="twoFactorLoading"
-                           class="px-4 py-2 bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out text-sm font-medium">
+                           class="px-4 py-2 bg-success text-success-text rounded-md shadow-sm hover:bg-success/80 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-success disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out text-sm font-medium">
                      {{ twoFactorLoading ? $t('common.loading') : $t('settings.twoFactor.enable.button') }}
                    </button>
                    <div v-if="isSettingUp2FA && setupData" class="mt-4 space-y-4 p-4 border border-border rounded-md bg-header/30">
@@ -107,7 +107,7 @@
                        </div>
                        <div class="flex items-center space-x-3">
                          <button type="submit" :disabled="twoFactorLoading"
-                                 class="px-4 py-2 bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out text-sm font-medium">
+                                 class="px-4 py-2 bg-success text-success-text rounded-md shadow-sm hover:bg-success/80 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-success disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out text-sm font-medium">
                            {{ twoFactorLoading ? $t('common.loading') : $t('settings.twoFactor.setup.verifyButton') }}
                          </button>
                          <button type="button" @click="cancelSetup" :disabled="twoFactorLoading"
@@ -196,7 +196,7 @@
                              <button
                                @click="handleDeleteIp(entry.ip)"
                                :disabled="blacklistDeleteLoading && blacklistToDeleteIp === entry.ip"
-                               class="px-2 py-1 bg-error text-white rounded text-xs font-medium hover:bg-error/80 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-error disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out"
+                               class="px-2 py-1 bg-error text-error-text rounded text-xs font-medium hover:bg-error/80 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-error disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out"
                              >
                                {{ (blacklistDeleteLoading && blacklistToDeleteIp === entry.ip) ? $t('settings.ipBlacklist.table.deleting') : $t('settings.ipBlacklist.table.removeButton') }}
                              </button>