diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index ca6aadf..77d7ef0 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -32,8 +32,6 @@ declare module 'vue' {
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutContent: typeof import('naive-ui')['NLayoutContent']
     NLayoutHeader: typeof import('naive-ui')['NLayoutHeader']
-    NList: typeof import('naive-ui')['NList']
-    NListItem: typeof import('naive-ui')['NListItem']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NModal: typeof import('naive-ui')['NModal']
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
diff --git a/src/views/Setting.vue b/src/views/Setting.vue
index 31359f4..fe78c24 100644
--- a/src/views/Setting.vue
+++ b/src/views/Setting.vue
@@ -1,14 +1,13 @@
 <template>
   <div class="setting">
-    <header class="setting-header">
-      <button class="back-btn" title="返回" aria-label="返回" @click="goBack">
-        <n-icon :component="ArrowLeftOutlined" />
-      </button>
-      <span class="setting-title">设置</span>
-    </header>
-
     <div class="setting-body">
       <aside class="setting-sider">
+        <div class="setting-sider__header">
+          <button class="back-btn" title="返回" aria-label="返回" @click="goBack">
+            <n-icon :component="ArrowLeftOutlined" />
+          </button>
+          <span class="setting-title">设置</span>
+        </div>
         <n-scrollbar class="setting-sider__scroll">
           <n-anchor
             class="setting-anchor"
@@ -76,76 +75,78 @@ const onNavClick = (item: (typeof menuItems)[number], e: Event) => {
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  background: var(--color-window-bg);
 }
 
-.setting-header {
-  flex-shrink: 0;
+.setting-sider__header {
+  height: 50px;
   display: flex;
   align-items: center;
-  margin: 20px 24px 16px;
+  padding: 0 12px;
+  border-bottom: 1px solid var(--color-border);
 }
 
 .back-btn {
-  width: 36px;
-  height: 36px;
+  width: 30px;
+  height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: none;
-  border-radius: var(--radius-sm);
-  background-color: var(--color-surface);
+  border-radius: 6px;
+  background-color: transparent;
   color: var(--color-text-secondary);
-  box-shadow: var(--shadow-card);
   cursor: pointer;
-  transition: color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+  transition: color 0.2s ease, background-color 0.2s ease;
 
   &:hover {
     color: var(--color-accent);
     background-color: var(--color-surface-hover);
-    box-shadow: var(--shadow-card-hover);
   }
 }
 
 .setting-title {
-  font-size: 18px;
+  font-size: 16px;
   font-weight: 600;
   color: var(--color-text-primary);
-  margin-left: 12px;
+  margin-left: 10px;
 }
 
 .setting-body {
   flex: 1;
   min-height: 0;
   display: flex;
-  margin: 0 24px 24px;
+  gap: 12px;
+  padding: 12px;
 }
 
 .setting-sider {
   flex-shrink: 0;
-  width: 200px;
-  margin-right: 24px;
+  width: 176px;
+  display: flex;
+  flex-direction: column;
   overflow: hidden;
   background-color: var(--color-surface);
   border: 1px solid var(--color-border);
-  border-radius: var(--radius-card);
-  box-shadow: var(--shadow-card);
+  border-radius: 8px;
 }
 
 .setting-sider__scroll {
-  height: 100%;
+  flex: 1;
+  min-height: 0;
 }
 
 .setting-anchor {
-  margin: 12px;
+  margin: 8px;
 
   :deep(.n-anchor-link) {
-    margin-bottom: 4px;
+    margin-bottom: 2px;
   }
 
   :deep(.n-anchor-link__title) {
     padding: 0;
     color: var(--color-text-secondary);
-    border-radius: var(--radius-sm);
+    border-radius: 6px;
     transition: color 0.2s ease, background-color 0.2s ease;
   }
 
@@ -158,16 +159,19 @@ const onNavClick = (item: (typeof menuItems)[number], e: Event) => {
 .nav-item {
   display: flex;
   align-items: center;
-  margin: 8px 12px;
+  height: 34px;
+  padding: 0 10px;
   font-size: 14px;
+  border-radius: 6px;
 
   &__icon {
-    margin-right: 10px;
+    margin-right: 8px;
   }
 
   &--active {
     color: var(--color-accent);
     font-weight: 600;
+    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
   }
 }
 
@@ -177,11 +181,57 @@ const onNavClick = (item: (typeof menuItems)[number], e: Event) => {
   overflow: hidden;
   background-color: var(--color-surface);
   border: 1px solid var(--color-border);
-  border-radius: var(--radius-card);
-  box-shadow: var(--shadow-card);
+  border-radius: 8px;
 }
 
 .setting-content__scroll {
   height: 100%;
 }
+
+@media (max-width: 640px) {
+  .setting-body {
+    flex-direction: column;
+    gap: 8px;
+    padding: 8px;
+  }
+
+  .setting-sider {
+    width: auto;
+    height: 96px;
+    overflow: visible;
+  }
+
+  .setting-sider__header {
+    flex-shrink: 0;
+    height: 44px;
+    padding: 0 10px;
+  }
+
+  .setting-sider__scroll {
+    flex: none;
+    height: 50px;
+  }
+
+  .setting-anchor {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    margin: 0 6px;
+
+    :deep(.n-anchor-link) {
+      flex: 1;
+      margin: 0;
+    }
+  }
+
+  .nav-item {
+    justify-content: center;
+    height: 34px;
+    padding: 0 6px;
+
+    &__icon {
+      margin-right: 5px;
+    }
+  }
+}
 </style>
diff --git a/src/views/setting/About.vue b/src/views/setting/About.vue
index 246603c..7a08c3c 100644
--- a/src/views/setting/About.vue
+++ b/src/views/setting/About.vue
@@ -16,51 +16,50 @@
 
 <style lang="scss" scoped>
 .setting-page {
-  margin: 24px 28px;
+  max-width: 760px;
+  padding: 22px 26px 32px;
 }
 
 .page-title {
-  margin: 0 0 4px;
-  font-size: 20px;
+  margin: 0 0 2px;
+  font-size: 18px;
   font-weight: 600;
   color: var(--color-text-primary);
 }
 
 .page-desc {
-  margin: 0 0 20px;
+  margin: 0 0 18px;
   font-size: 13px;
   color: var(--color-text-secondary);
 }
 
 .about-card {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: 52px minmax(0, 1fr);
+  column-gap: 14px;
   align-items: center;
-  justify-content: center;
-  min-height: 320px;
-  background-color: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-card);
-  box-shadow: var(--shadow-card);
-  margin-top: 8px;
+  min-height: 108px;
+  padding: 18px 16px;
+  border-top: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--color-border);
 }
 
 .app-logo {
-  width: 64px;
-  height: 64px;
+  width: 52px;
+  height: 52px;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--radius-card);
+  border-radius: 8px;
   background: var(--color-accent-gradient);
   color: var(--color-text-invert);
-  font-size: 28px;
+  font-size: 22px;
   font-weight: 700;
-  margin-bottom: 16px;
+  grid-row: span 2;
 }
 
 .app-name {
-  font-size: 18px;
+  font-size: 16px;
   font-weight: 600;
   color: var(--color-text-primary);
 }
@@ -68,12 +67,23 @@
 .app-version {
   font-size: 13px;
   color: var(--color-text-secondary);
-  margin-top: 4px;
+  margin: 2px 0 0;
 }
 
 .app-desc {
+  grid-column: 1 / -1;
   font-size: 13px;
   color: var(--color-text-secondary);
-  margin-top: 16px;
+  margin: 12px 0 0;
+}
+
+@media (max-width: 640px) {
+  .setting-page {
+    padding: 18px 16px 24px;
+  }
+
+  .app-desc {
+    margin-left: 0;
+  }
 }
 </style>
diff --git a/src/views/setting/Appearance.vue b/src/views/setting/Appearance.vue
index 32237f5..1df8e73 100644
--- a/src/views/setting/Appearance.vue
+++ b/src/views/setting/Appearance.vue
@@ -39,28 +39,29 @@ const wordWrap = ref(true)
 
 <style lang="scss" scoped>
 .setting-page {
-  margin: 24px 28px;
+  max-width: 760px;
+  padding: 22px 26px 32px;
 }
 
 .page-title {
-  margin: 0 0 4px;
-  font-size: 20px;
+  margin: 0 0 2px;
+  font-size: 18px;
   font-weight: 600;
   color: var(--color-text-primary);
 }
 
 .page-desc {
-  margin: 0 0 20px;
+  margin: 0 0 18px;
   font-size: 13px;
   color: var(--color-text-secondary);
 }
 
 .setting-group {
-  margin-bottom: 24px;
+  margin-bottom: 20px;
 }
 
 .group-title {
-  margin-bottom: 8px;
+  margin-bottom: 6px;
   font-size: 13px;
   font-weight: 600;
   color: var(--color-text-secondary);
@@ -70,23 +71,21 @@ const wordWrap = ref(true)
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background-color: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  box-shadow: var(--shadow-card);
+  min-height: 56px;
+  border-top: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--color-border);
   margin-bottom: 0;
-  transition: box-shadow 0.2s ease, border-color 0.2s ease;
+  transition: background-color 0.2s ease;
 
   &:hover {
-    border-color: var(--color-border-hover);
-    box-shadow: var(--shadow-card-hover);
+    background-color: color-mix(in srgb, var(--color-surface-hover) 42%, transparent);
   }
 }
 
 .item-info {
   display: flex;
   flex-direction: column;
-  margin: 12px 16px;
+  padding: 0 16px;
 }
 
 .item-label {
@@ -103,6 +102,28 @@ const wordWrap = ref(true)
 
 :deep(.n-radio-group),
 :deep(.n-switch) {
-  margin: 0 16px;
+  margin: 0 16px 0 12px;
+}
+
+@media (max-width: 640px) {
+  .setting-page {
+    padding: 18px 16px 24px;
+  }
+
+  .setting-item {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 10px;
+    padding: 12px 16px;
+  }
+
+  .item-info {
+    padding: 0;
+  }
+
+  :deep(.n-radio-group),
+  :deep(.n-switch) {
+    margin: 0;
+  }
 }
 </style>
diff --git a/src/views/setting/Shortcut.vue b/src/views/setting/Shortcut.vue
index 41c179e..070fb0e 100644
--- a/src/views/setting/Shortcut.vue
+++ b/src/views/setting/Shortcut.vue
@@ -28,35 +28,34 @@ const shortcuts = [
 
 <style lang="scss" scoped>
 .setting-page {
-  margin: 24px 28px;
+  max-width: 760px;
+  padding: 22px 26px 32px;
 }
 
 .page-title {
-  margin: 0 0 4px;
-  font-size: 20px;
+  margin: 0 0 2px;
+  font-size: 18px;
   font-weight: 600;
   color: var(--color-text-primary);
 }
 
 .page-desc {
-  margin: 0 0 20px;
+  margin: 0 0 18px;
   font-size: 13px;
   color: var(--color-text-secondary);
 }
 
 .setting-group {
-  background-color: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  box-shadow: var(--shadow-card);
+  border-top: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--color-border);
 }
 
 .shortcut-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin: 0 16px;
-  min-height: 44px;
+  padding: 0 16px;
+  min-height: 46px;
 
   & + & {
     border-top: 1px solid var(--color-border);
@@ -75,14 +74,14 @@ const shortcuts = [
 
 .shortcut-key {
   min-width: 24px;
-  height: 24px;
+  height: 22px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin: 0 2px;
   border: 1px solid var(--color-border);
-  border-radius: 6px;
-  background-color: var(--color-window-bg);
+  border-radius: 4px;
+  background-color: color-mix(in srgb, var(--color-window-bg) 72%, transparent);
   color: var(--color-text-primary);
   font-size: 12px;
   font-family: inherit;
@@ -92,4 +91,10 @@ const shortcuts = [
   color: var(--color-text-secondary);
   font-size: 12px;
 }
+
+@media (max-width: 640px) {
+  .setting-page {
+    padding: 18px 16px 24px;
+  }
+}
 </style>