diff --git a/index.html b/index.html
index 49fea4d..aed3f33 100644
--- a/index.html
+++ b/index.html
@@ -18,7 +18,7 @@
         --primary-light: #f5f0e6; /* Light background tone */
 
         /* Editor typography - Consistent font size and line height */
-        --editor-font-size: 23px; /* Base font size for editor */
+        --editor-font-size: 1.4375rem; /* Base font size for editor */
         --editor-line-height: 1.1; /* Line height for editor */
 
         /* Background colors - Warm paper-like tones */
@@ -94,7 +94,8 @@
         margin: 0;
         padding: 0;
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-        background-color: var(--background);
+        background-color: white;
+        background: url('/assets/icons/drawable-xxhdpi/note_setting_bg.png');
         color: var(--text-primary);
         /* 适配iPhone X及更新机型的刘海屏 */
         padding-top: env(safe-area-inset-top);
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 4a1397f..5062a38 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -76,6 +76,14 @@ const props = defineProps({
     type: Function,
     default: null,
   },
+  background: {
+    type: String,
+    default: 'url(/assets/icons/drawable-xxhdpi/action_bar_default.png)',
+  },
+  color: {
+    type: String,
+    default: 'white',
+  },
 })
 
 const localFolderExpanded = ref(false)
@@ -92,7 +100,15 @@ const showFolderIcon = computed(() => {
 
 const leftIconSource = computed(() => {
   // 根据leftType属性返回对应的图标路径
-  return props.leftType === 'settings' ? '/assets/icons/drawable-xxhdpi/btn_settings.png' : '/assets/icons/drawable-xxhdpi/btn_back.png'
+  if (props.leftType === 'settings') {
+    return '/assets/icons/drawable-xxhdpi/btn_settings.png'
+  } else {
+    if (props.color !== 'white') {
+      return '/assets/icons/drawable-xxhdpi/btn_back_black.png'
+    } else {
+      return '/assets/icons/drawable-xxhdpi/btn_back.png'
+    }
+  }
 })
 
 const handleFolderToggle = () => {
@@ -135,19 +151,18 @@ const handleTitlePress = () => {
 
 <style scoped lang="less">
 .component {
-  padding: 4.5rem 0.72rem 0.5rem;
-  background-image: url(/assets/icons/drawable-xxhdpi/title_bar_background.png);
+  padding: 2.5rem 0.72rem 0.5rem;
+  background: v-bind(background);
   background-size: 100% 100%;
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: -2.8rem;
+  flex-direction: column;
+  align-items: flex-end;
   position: relative;
+  box-shadow: 0 0 30px 5px rgba(0, 0, 0, 0.2);
   .inner {
     display: flex;
     justify-content: space-between;
     width: 100%;
-    transform: translateY(-3.2rem);
   }
   .left-icon,
   .image_4 {
@@ -179,7 +194,7 @@ const handleTitlePress = () => {
     }
 
     .text {
-      color: #e3dbd4;
+      color: v-bind(color);
       font-size: 1.01rem;
       line-height: 1.01rem;
     }
diff --git a/src/components/NoteItem.vue b/src/components/NoteItem.vue
index fa64fb4..f361fa8 100644
--- a/src/components/NoteItem.vue
+++ b/src/components/NoteItem.vue
@@ -242,7 +242,7 @@ const handleTouchEnd = () => {
     background: var(--background);
     z-index: 2;
     padding: 0.44rem 0.69rem 0.88rem 2.69rem;
-    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.23);
+    box-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.23);
     transition: transform 0.2s ease-out;
     .font_2 {
       font-size: 0.71rem;
diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue
index f7c8c12..99a7c9c 100644
--- a/src/components/RichTextEditor.vue
+++ b/src/components/RichTextEditor.vue
@@ -910,7 +910,7 @@ defineExpose({
   left: 0;
   right: 0;
   display: flex;
-  padding: 8px 12px;
+  padding: 0.5rem 0.75rem;
   border-top: 1px solid var(--border);
   background-color: var(--background-card);
   flex-shrink: 0;
@@ -926,12 +926,12 @@ defineExpose({
 }
 
 .toolbar-btn {
-  padding: 6px;
-  margin-right: 6px;
+  padding: 0.375rem;
+  margin-right: 0.375rem;
   border: none;
   background: transparent;
   cursor: pointer;
-  border-radius: 4px;
+  border-radius: 0.25rem;
   transition: background-color 0.2s ease;
   display: flex;
   align-items: center;
@@ -950,8 +950,8 @@ defineExpose({
 }
 
 .toolbar-icon {
-  width: 20px;
-  height: 20px;
+  width: 1.25rem;
+  height: 1.25rem;
   opacity: 0.8;
 }
 
@@ -961,21 +961,21 @@ defineExpose({
 
 .editor-content {
   flex: 1;
-  padding: 0 10px 60px 10px; /* 添加底部内边距，防止内容被工具栏遮挡 */
+  padding: 0 0.625rem 3.75rem 0.625rem; /* 添加底部内边距，防止内容被工具栏遮挡 */
   outline: none;
   overflow-y: auto;
-  font-size: var(--editor-font-size, 16px);
+  font-size: var(--editor-font-size, 1rem);
   line-height: var(--editor-line-height, 1.6);
   color: var(--note-content);
-  min-height: 200px;
+  min-height: 12.5rem;
   background-color: var(--background-card);
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   position: relative;
   /* 基准线样式 */
   background-image: linear-gradient(to bottom, var(--border) 1px, transparent 1px);
-  background-size: 100% calc(var(--editor-font-size, 16px) * var(--editor-line-height, 1.6)); /* var(--editor-font-size) * var(--editor-line-height) */
+  background-size: 100% calc(var(--editor-font-size, 1rem) * var(--editor-line-height, 1.6)); /* var(--editor-font-size) * var(--editor-line-height) */
   background-repeat: repeat-y;
-  background-position: 0 calc((var(--editor-font-size, 16px) * var(--editor-line-height, 1.6) - var(--editor-font-size, 16px)) / 2);
+  background-position: 0 calc((var(--editor-font-size, 1rem) * var(--editor-line-height, 1.6) - var(--editor-font-size, 1rem)) / 2);
 }
 
 .editor-content::before {
@@ -995,16 +995,16 @@ defineExpose({
 
 /* 优化段落样式，确保与基准线对齐 */
 :deep(.editor-content p) {
-  margin: 0 0 12px 0;
+  margin: 0 0 0.75rem 0;
   line-height: var(--editor-line-height, 1.6);
   letter-spacing: 0.3px;
 }
 
 /* 自定义内容样式 - 统一行高和间距 */
 :deep(.editor-content h2) {
-  font-size: var(--editor-font-size, 16px);
+  font-size: var(--editor-font-size, 1rem);
   font-weight: 600;
-  margin: 0 0 12px 0;
+  margin: 0 0 0.75rem 0;
   color: var(--note-title);
   line-height: var(--editor-line-height, 1.6);
   letter-spacing: 0.3px;
@@ -1014,8 +1014,8 @@ defineExpose({
 
 :deep(.editor-content blockquote) {
   border-left: 3px solid var(--primary);
-  padding: 0 16px 0 16px;
-  margin: 0 0 12px 0;
+  padding: 0 1rem 0 1rem;
+  margin: 0 0 0.75rem 0;
   color: var(--text-secondary);
   background-color: var(--background-secondary);
   font-style: italic;
@@ -1024,7 +1024,7 @@ defineExpose({
 
 :deep(.quote-container) {
   position: relative;
-  margin: 0 0 12px 0;
+  margin: 0 0 0.75rem 0;
   line-height: var(--editor-line-height, 1.6);
 }
 
@@ -1032,15 +1032,15 @@ defineExpose({
   position: absolute;
   left: 0;
   top: 0;
-  width: var(--editor-font-size, 16px);
-  height: var(--editor-font-size, 16px);
-  margin-top: 3px;
+  width: var(--editor-font-size, 1rem);
+  height: var(--editor-font-size, 1rem);
+  margin-top: 0.1875rem;
 }
 
 :deep(.quote-content) {
   border-left: 3px solid var(--primary);
-  padding: 0 var(--editor-font-size, 16px) 0 32px;
-  margin-left: var(--editor-font-size, 16px);
+  padding: 0 var(--editor-font-size, 1rem) 0 2rem;
+  margin-left: var(--editor-font-size, 1rem);
   color: var(--text-secondary);
   background-color: var(--background-secondary);
   font-style: italic;
@@ -1049,8 +1049,8 @@ defineExpose({
 
 :deep(.editor-content ul),
 :deep(.editor-content ol) {
-  margin: 0 0 12px 0;
-  padding-left: 32px;
+  margin: 0 0 0.75rem 0;
+  padding-left: 2rem;
   position: relative;
   line-height: var(--editor-line-height, 1.6);
 }
@@ -1080,7 +1080,7 @@ defineExpose({
   border: none;
   height: 1px;
   background-color: var(--border);
-  margin: 12px 0;
+  margin: 0.75rem 0;
 }
 
 .editor-content div[style*='text-align: center'] {
@@ -1094,7 +1094,7 @@ defineExpose({
   margin: calc((var(--editor-line-height, 1.6) * 10) * 1px) auto;
   object-fit: cover;
   box-sizing: border-box;
-  border: 10px solid white;
+  border: 0.625rem solid white;
   border-radius: 0.2rem;
   box-shadow: 0 1px 5px rgba(0, 0, 0, 0.18);
 }
@@ -1106,12 +1106,12 @@ defineExpose({
   margin: 0;
   line-height: var(--editor-line-height, 1.6);
   position: relative;
-  padding-left: calc(var(--editor-font-size, 16px) * 1.5);
+  padding-left: calc(var(--editor-font-size, 1rem) * 1.5);
 }
 
 :deep(.todo-icon) {
-  width: calc(var(--editor-font-size, 16px) * 1.5);
-  height: calc(var(--editor-font-size, 16px) * 1.5);
+  width: calc(var(--editor-font-size, 1rem) * 1.5);
+  height: calc(var(--editor-font-size, 1rem) * 1.5);
   cursor: pointer;
   flex-shrink: 0;
   position: absolute;
diff --git a/src/pages/FolderPage.vue b/src/pages/FolderPage.vue
index e78f698..4351efd 100644
--- a/src/pages/FolderPage.vue
+++ b/src/pages/FolderPage.vue
@@ -114,7 +114,7 @@ const setSearchQuery = value => {
 
 <style scoped>
 .folder-page-container {
-  padding: 10px;
+  padding: 0.625rem;
   background-color: var(--background);
 }
 
@@ -122,31 +122,31 @@ const setSearchQuery = value => {
   display: flex;
   align-items: center;
   background-color: var(--search-bar-background);
-  border-radius: 8px;
-  padding: 0 10px;
+  border-radius: 0.5rem;
+  padding: 0 0.625rem;
 }
 
 .search-icon {
-  font-size: 20px;
+  font-size: 1.25rem;
   color: var(--text-tertiary);
 }
 
 .search-input {
-  --padding-start: 10px;
-  --padding-end: 10px;
+  --padding-start: 0.625rem;
+  --padding-end: 0.625rem;
   flex: 1;
-  font-size: 16px;
+  font-size: 1rem;
   color: var(--text-primary);
 }
 
 .clear-icon {
-  font-size: 20px;
+  font-size: 1.25rem;
   color: var(--text-tertiary);
 }
 
 .folder-list {
   background-color: var(--background);
-  padding: 0 16px;
+  padding: 0 1rem;
   --ion-item-background: var(--background);
 }
 </style>
diff --git a/src/pages/NoteEditorPage.vue b/src/pages/NoteEditorPage.vue
index 484f70e..2413a5a 100644
--- a/src/pages/NoteEditorPage.vue
+++ b/src/pages/NoteEditorPage.vue
@@ -283,8 +283,8 @@ const setShowAlert = value => {
 .header-info {
   display: flex;
   justify-content: flex-start;
-  gap: 10px;
-  padding: 1rem 16px 0.7rem 16px;
+  gap: 0.625rem;
+  padding: 1rem 1rem 0.7rem 1rem;
   background-color: var(--background-card);
   border-bottom: 1px solid var(--border);
   font-size: 0.7rem;
diff --git a/src/pages/NoteListPage.vue b/src/pages/NoteListPage.vue
index da78fa1..da4acde 100644
--- a/src/pages/NoteListPage.vue
+++ b/src/pages/NoteListPage.vue
@@ -363,13 +363,13 @@ const notes = computed(() => store.notes)
 
 .folder-list {
   position: absolute;
-  top: 50px;
+  top: 3.125rem;
   left: 10%;
   right: 10%;
   z-index: 1000;
   background-color: var(--background-card);
-  border-radius: 8px;
-  box-shadow: 0 2px 4px var(--shadow);
+  border-radius: 0.5rem;
+  box-shadow: 0 0.125rem 0.25rem var(--shadow);
   border: 1px solid #f0ece7;
   overflow: hidden;
 }
diff --git a/src/pages/SettingsPage.vue b/src/pages/SettingsPage.vue
index df933e1..643d4a5 100644
--- a/src/pages/SettingsPage.vue
+++ b/src/pages/SettingsPage.vue
@@ -1,69 +1,26 @@
 <template>
   <ion-page>
-    <Header 
-      title="设置"
-      :onBack="handleBackPress"
-    />
-    
-    <ion-content class="settings-content">
+    <Header title="设置" :onBack="handleBackPress" background="#f9f9f9" color="#8e8e8e" />
+
+    <div class="settings-content">
+      <div class="section-header"> 账户 </div>
       <div class="settings-section">
-        <div class="section-header">
-          账户
-        </div>
         <div button @click="handleLogin" class="settings-item settings-item-clickable">
           <div class="item-text-primary">登录云同步</div>
           <div class="item-text-tertiary">未登录</div>
         </div>
       </div>
-      
+
+      <div class="section-header"> 偏好设置 </div>
       <div class="settings-section">
-        <div class="section-header">
-          偏好设置
-        </div>
         <div class="settings-item settings-item-border">
           <div class="item-text-primary">云同步</div>
-          <ion-toggle 
-            slot="end" 
-            :checked="settings.cloudSync" 
-            @ion-change="toggleCloudSync"
-          ></ion-toggle>
-        </div>
-        <div class="settings-item">
-          <div class="item-text-primary">深色模式</div>
-          <ion-toggle 
-            slot="end" 
-            :checked="settings.darkMode" 
-            @ion-change="toggleDarkMode"
-          ></ion-toggle>
+          <ion-toggle slot="end" :checked="settings.cloudSync" @ion-change="toggleCloudSync"></ion-toggle>
         </div>
       </div>
-      
+
+      <div class="section-header"> 关于 </div>
       <div class="settings-section">
-        <div class="section-header">
-          数据管理
-        </div>
-        <div button @click="handleBackup" class="settings-item settings-item-clickable settings-item-border">
-          <img :src="'/assets/icons/drawable-xxhdpi/btn_save_pic.png'" class="item-icon" />
-          <div class="item-text-primary">备份便签</div>
-        </div>
-        <div button @click="handleRestore" class="settings-item settings-item-clickable settings-item-border">
-          <img :src="'/assets/icons/drawable-xxhdpi/btn_restore.png'" class="item-icon" />
-          <div class="item-text-primary">恢复便签</div>
-        </div>
-        <div button @click="handleExport" class="settings-item settings-item-clickable settings-item-border">
-          <img :src="'/assets/icons/drawable-xxhdpi/btn_share.png'" class="item-icon" />
-          <div class="item-text-primary">导出便签</div>
-        </div>
-        <div button @click="handleImport" class="settings-item settings-item-clickable">
-          <img :src="'/assets/icons/drawable-xxhdpi/btn_load_error.png'" class="item-icon" />
-          <div class="item-text-primary">导入便签</div>
-        </div>
-      </div>
-      
-      <div class="settings-section">
-        <div class="section-header">
-          关于
-        </div>
         <div class="settings-item settings-item-border">
           <div class="item-text-primary">版本</div>
           <div class="item-text-tertiary">1.0.0</div>
@@ -75,143 +32,127 @@
           <div class="item-text-primary">服务条款</div>
         </div>
       </div>
-    </ion-content>
+    </div>
   </ion-page>
 </template>
 
 <script setup>
-import { computed, onMounted } from 'vue';
-import { useRouter } from 'vue-router';
-import { useAppStore } from '../stores/useAppStore';
-import Header from '../components/Header.vue';
+import { computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAppStore } from '../stores/useAppStore'
+import Header from '../components/Header.vue'
 
-const store = useAppStore();
-const router = useRouter();
+const store = useAppStore()
+const router = useRouter()
 
 // 页面挂载时加载初始数据
 // 从localStorage加载用户设置和便签数据
 onMounted(() => {
-  store.loadData();
-});
+  store.loadData()
+})
 
 // 切换云同步设置
 // 调用store中的方法更新云同步状态
 const toggleCloudSync = () => {
-  store.toggleCloudSync();
-};
-
-// 切换深色模式设置
-// 调用store中的方法更新深色模式状态
-const toggleDarkMode = () => {
-  store.toggleDarkMode();
-};
+  store.toggleCloudSync()
+}
 
 // 处理登录云同步按钮点击事件
 // 在完整实现中，这里会打开登录界面
 const handleLogin = () => {
-  console.log('Login to cloud');
-};
+  console.log('Login to cloud')
+}
 
 // 处理隐私政策按钮点击事件
 // 在完整实现中，这里会显示隐私政策内容
 const handlePrivacyPolicy = () => {
-  console.log('Privacy policy');
-};
+  console.log('Privacy policy')
+}
 
 // 处理服务条款按钮点击事件
 // 在完整实现中，这里会显示服务条款内容
 const handleTermsOfService = () => {
-  console.log('Terms of service');
-};
-
-// 处理备份便签按钮点击事件
-// 在完整实现中，这里会执行便签备份操作
-const handleBackup = () => {
-  console.log('Backup notes');
-};
-
-// 处理恢复便签按钮点击事件
-// 在完整实现中，这里会执行便签恢复操作
-const handleRestore = () => {
-  console.log('Restore notes');
-};
-
-// 处理导出便签按钮点击事件
-// 在完整实现中，这里会执行便签导出操作
-const handleExport = () => {
-  console.log('Export notes');
-};
-
-// 处理导入便签按钮点击事件
-// 在完整实现中，这里会执行便签导入操作
-const handleImport = () => {
-  console.log('Import notes');
-};
+  console.log('Terms of service')
+}
 
 const handleBackPress = () => {
-  router.back();
-};
+  router.back()
+}
 
-const settings = computed(() => store.settings);
+const settings = computed(() => store.settings)
 </script>
 
-<style scoped>
+<style scoped lang="less">
 .settings-content {
-  background-color: var(--background);
-}
+  background: url('/assets/icons/drawable-xxhdpi/note_setting_bg.png');
+  width: 100%;
+  height: 100vh;
+  overflow-y: scroll;
 
-.settings-section {
-  margin-bottom: 12px;
-  background-color: var(--background-card);
-}
+  .section-header {
+    font-size: 0.75rem;
+    color: var(--text-tertiary);
+    padding: 0.3125rem 1rem;
+    width: 95%;
+    margin: 0.75rem auto 0 auto;
+  }
 
-.section-header {
-  background-color: var(--background-secondary);
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-tertiary);
-  padding: 10px 16px;
-}
+  .settings-section {
+    width: 95%;
+    border-radius: 0.625rem;
+    overflow: hidden;
+    margin: 0 auto;
+    border: 1px solid var(--divider);
+    box-shadow: 0 1.25rem 3.125rem 0px rgb(0 0 0 / 5%);
+  }
 
-.settings-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-color: var(--background-card);
-  padding: 14px 16px;
-}
+  .settings-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #f9f9f9;
+    padding: 0.875rem 1rem;
+  }
 
-.settings-item-border {
-  border-bottom: 1px solid var(--border);
-}
+  .settings-item-border {
+    border-top: 1px solid var(--divider);
+    border-bottom: 1px solid var(--divider);
+    &:first-child {
+      border: none;
+    }
+    &:last-child {
+      border: none;
+    }
+  }
 
-.settings-item-clickable {
-  cursor: pointer;
-}
+  .settings-item-clickable {
+    cursor: pointer;
+  }
 
-.item-text-primary {
-  font-size: 16px;
-  color: var(--text-primary);
-}
+  .item-text-primary {
+    font-size: 1rem;
+    color: var(--text-primary);
+  }
 
-.item-text-tertiary {
-  font-size: 15px;
-  color: var(--text-tertiary);
-}
+  .item-text-tertiary {
+    font-size: 0.9375rem;
+    color: var(--text-tertiary);
+  }
 
-.item-icon {
-  width: 20px;
-  height: 20px;
-  color: var(--text-primary);
-  margin-right: 12px;
-}
+  .item-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    color: var(--text-primary);
+    margin-right: 0.75rem;
+  }
 
-.settings-item-clickable .item-text-primary {
-  flex: 1;
-}
+  .settings-item-clickable .item-text-primary {
+    flex: 1;
+  }
 
-.settings-item-clickable {
-  display: flex;
-  align-items: center;
+  .settings-item-clickable {
+    display: flex;
+    align-items: center;
+  }
 }
-</style>
\ No newline at end of file
+</style>