diff --git a/frontend/src/views/components/SecuritySettings/SecuritySettings.css b/frontend/src/views/components/SecuritySettings/SecuritySettings.css
index 9ef5d4c..c6b5f2f 100644
--- a/frontend/src/views/components/SecuritySettings/SecuritySettings.css
+++ b/frontend/src/views/components/SecuritySettings/SecuritySettings.css
@@ -110,6 +110,42 @@
 }
 
 @container settings-content (max-width: 860px) {
+  .security-workspace--recovery {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas:
+      "submenu"
+      "main";
+    gap: 16px;
+  }
+
+  .security-workspace--recovery :deep(.settings-submenu) {
+    position: static;
+    padding: 8px;
+    border: 1px solid var(--pm-border-color);
+    border-radius: var(--pm-radius-sm);
+  }
+
+  .security-workspace--recovery :deep(.settings-submenu-list) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+
+  .security-workspace--recovery :deep(.settings-submenu-item) {
+    white-space: nowrap;
+  }
+
+  .security-workspace--recovery :deep(.settings-submenu-item.active::before) {
+    top: auto;
+    bottom: 2px;
+    left: 10px;
+    right: 10px;
+    width: auto;
+    height: 2px;
+  }
+}
+
+@container settings-content (max-width: 720px) {
   .recovery-code-panel {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
diff --git a/frontend/src/views/components/SecuritySettings/SecuritySettings.vue b/frontend/src/views/components/SecuritySettings/SecuritySettings.vue
index 22ff3de..12672a4 100644
--- a/frontend/src/views/components/SecuritySettings/SecuritySettings.vue
+++ b/frontend/src/views/components/SecuritySettings/SecuritySettings.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="settings-card security-settings-card" v-loading="securityLoading">
-    <div class="security-workspace">
+    <div
+      class="security-workspace"
+      :class="{ 'security-workspace--recovery': selectedSection === 'recovery' }"
+    >
       <SettingsSubmenu
         title="安全设置"
         :items="sectionOptions"