diff --git a/public/assets/icons/drawable-xxhdpi/switch_ex_bottom.png b/public/assets/icons/drawable-xxhdpi/switch_ex_bottom.png
index f9962fd..62c1814 100644
Binary files a/public/assets/icons/drawable-xxhdpi/switch_ex_bottom.png and b/public/assets/icons/drawable-xxhdpi/switch_ex_bottom.png differ
diff --git a/public/assets/icons/drawable-xxhdpi/switch_ex_unpressed.png b/public/assets/icons/drawable-xxhdpi/switch_ex_unpressed.png
index 1da537b..f2333c5 100644
Binary files a/public/assets/icons/drawable-xxhdpi/switch_ex_unpressed.png and b/public/assets/icons/drawable-xxhdpi/switch_ex_unpressed.png differ
diff --git a/src/App.vue b/src/App.vue
index b087e95..b15239b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,5 @@
 <template>
-  <div>
-    <router-view />
-  </div>
+  <router-view />
 </template>
 
 <script setup>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 5062a38..579e2f8 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -151,7 +151,7 @@ const handleTitlePress = () => {
 
 <style scoped lang="less">
 .component {
-  padding: 2.5rem 0.72rem 0.5rem;
+  padding: 2.5rem 0.72rem 0.35rem;
   background: v-bind(background);
   background-size: 100% 100%;
   display: flex;
@@ -166,8 +166,8 @@ const handleTitlePress = () => {
   }
   .left-icon,
   .image_4 {
-    width: 1.8rem;
-    height: 1.8rem;
+    width: 1.9rem;
+    height: 1.9rem;
     cursor: pointer;
   }
   .right-group {
@@ -175,8 +175,8 @@ const handleTitlePress = () => {
   }
 
   .image_4-placeholder {
-    width: 1.8rem;
-    height: 1.8rem;
+    width: 1.9rem;
+    height: 1.9rem;
   }
 
   .title-container {
@@ -197,6 +197,8 @@ const handleTitlePress = () => {
       color: v-bind(color);
       font-size: 1.01rem;
       line-height: 1.01rem;
+      letter-spacing: 0.05em;
+      text-indent: 0.05em;
     }
   }
 }
diff --git a/src/components/NoteItem.vue b/src/components/NoteItem.vue
index f361fa8..777e566 100644
--- a/src/components/NoteItem.vue
+++ b/src/components/NoteItem.vue
@@ -90,13 +90,13 @@ const displayContent = computed(() => {
   // 过滤HTML标签，只保留纯文本内容
   let text = props.content.replace(/<[^>]*>/g, '')
   console.log('NoteItem text without HTML:', text)
-  
+
   // 处理换行符，统一为\n
   text = text.replace(/\\n/g, '\n')
-  
+
   // 按换行符分割并获取第一行
   const lines = text.split('\n')
-  
+
   // 返回第一行内容，如果为空则显示默认文本
   return lines[0]?.trim() || '无内容'
 })
@@ -207,9 +207,6 @@ const handleTouchEnd = () => {
 </script>
 
 <style lang="less" scoped>
-.ml-15 {
-  margin-left: 0.94rem;
-}
 .mt-17-5 {
   margin-top: -1rem;
 }
@@ -230,6 +227,7 @@ const handleTouchEnd = () => {
   span {
     margin-right: 0.7rem;
     font-size: 0.6rem;
+    display: block;
   }
 }
 .list-item_7 {
@@ -239,11 +237,21 @@ const handleTouchEnd = () => {
     box-sizing: border-box;
     width: 95%;
     height: 100%;
-    background: var(--background);
+    background: linear-gradient(to bottom, #fffdf6, #f3eee4);
     z-index: 2;
-    padding: 0.44rem 0.69rem 0.88rem 2.69rem;
-    box-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.23);
+    padding: 0.44rem 0.69rem 0.88rem 2.09rem;
+    box-shadow: 0 2px 2px 1px rgb(0 0 0 / 15%);
     transition: transform 0.2s ease-out;
+    border-radius: 3px;
+    &:before {
+      content: '';
+      width: 1.5rem;
+      height: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      background: linear-gradient(to bottom, #f9f5ee, #eee6dc);
+    }
     .font_2 {
       font-size: 0.71rem;
       line-height: 0.71rem;
diff --git a/src/components/SettingGroup.vue b/src/components/SettingGroup.vue
new file mode 100644
index 0000000..b4d5616
--- /dev/null
+++ b/src/components/SettingGroup.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="setting-group">
+    <div class="section-header">{{ title }}</div>
+    <div class="settings-section">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+})
+</script>
+
+<style scoped lang="less">
+.setting-group {
+  .section-header {
+    font-size: 0.75rem;
+    color: rgb(95 95 95);
+    padding: 0.3125rem 0.5rem;
+    width: 95%;
+    margin: 0.75rem auto 0 auto;
+    box-sizing: border-box;
+  }
+
+  .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%);
+    /* 确保不会阻止事件传播 */
+    pointer-events: auto;
+  }
+}
+
+:global(.settings-item) {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: linear-gradient(to bottom, #fefdfe, #fcfbfb);
+  padding: 0.875rem 1rem;
+}
+
+:global(.settings-item-border) {
+  border-top: 1px solid var(--divider);
+  border-bottom: 1px solid var(--divider);
+}
+
+:global(.settings-item-border:first-child) {
+  border: none;
+}
+
+:global(.settings-item-border:last-child) {
+  border: none;
+}
+
+:global(.settings-item-clickable) {
+  cursor: pointer;
+}
+
+:global(.settings-item-clickable .item-text-primary) {
+  flex: 1;
+}
+
+:global(.settings-item-clickable) {
+  display: flex;
+  align-items: center;
+}
+</style>
diff --git a/src/components/SwitchButton.vue b/src/components/SwitchButton.vue
new file mode 100644
index 0000000..f3ebb4e
--- /dev/null
+++ b/src/components/SwitchButton.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="switch-button" :class="{ 'switch-button--on': modelValue }" @click="handleTouchStart">
+    <div class="switch-button__background">
+      <img src="/assets/icons/drawable-xxhdpi/switch_ex_bottom.png" alt="开关底图" class="switch-button__image switch-button__image--bottom" />
+      <img src="/assets/icons/drawable-xxhdpi/switch_ex_frame.png" alt="开关边框" class="switch-button__image switch-button__image--frame" />
+      <img src="/assets/icons/drawable-xxhdpi/switch_ex_mask.png" alt="开关遮罩" class="switch-button__image switch-button__image--mask" />
+      <img src="/assets/icons/drawable-xxhdpi/switch_ex_unpressed.png" alt="开关按钮" class="switch-button__image switch-button__image--unpressed" :class="{ 'switch-button__image--unpressed-on': modelValue }" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const handleTouchStart = event => {
+  // 触摸开始时直接触发状态切换
+  emit('update:modelValue', !props.modelValue)
+}
+
+// 保持原来的toggle方法以兼容其他可能的调用
+const toggle = () => {
+  emit('update:modelValue', !props.modelValue)
+}
+</script>
+
+<style scoped lang="less">
+.switch-button {
+  display: inline-block;
+  width: 3.325rem; /* 50px */
+  height: 2.275rem; /* 30px */
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+
+  &__background {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  &__image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transition: transform 0.2s ease;
+    transform: translateX(0);
+
+    &--bottom {
+      z-index: 1;
+    }
+
+    &--frame {
+      z-index: 2;
+    }
+
+    &--mask {
+      z-index: 3;
+      /* 遮罩层是全黑图片，使用screen混合模式 */
+      mix-blend-mode: screen;
+    }
+
+    &--unpressed {
+      z-index: 4;
+      transform: translateX(-25%); /* 20px */
+    }
+
+    &--unpressed-on {
+      transform: translateX(25%); /* 20px */
+    }
+  }
+}
+</style>
diff --git a/src/pages/NoteListPage.vue b/src/pages/NoteListPage.vue
index da4acde..7db429a 100644
--- a/src/pages/NoteListPage.vue
+++ b/src/pages/NoteListPage.vue
@@ -393,6 +393,6 @@ const notes = computed(() => store.notes)
 }
 
 .note-item {
-  margin: 0.4rem 0;
+  margin: 0.6rem 0;
 }
 </style>
diff --git a/src/pages/SettingsPage.vue b/src/pages/SettingsPage.vue
index 643d4a5..a22b8c4 100644
--- a/src/pages/SettingsPage.vue
+++ b/src/pages/SettingsPage.vue
@@ -3,24 +3,21 @@
     <Header title="设置" :onBack="handleBackPress" background="#f9f9f9" color="#8e8e8e" />
 
     <div class="settings-content">
-      <div class="section-header"> 账户 </div>
-      <div class="settings-section">
+      <SettingGroup title="账户">
         <div button @click="handleLogin" class="settings-item settings-item-clickable">
           <div class="item-text-primary">登录云同步</div>
           <div class="item-text-tertiary">未登录</div>
         </div>
-      </div>
+      </SettingGroup>
 
-      <div class="section-header"> 偏好设置 </div>
-      <div class="settings-section">
+      <SettingGroup title="偏好设置">
         <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>
+          <SwitchButton :model-value="settings.cloudSync" @update:model-value="toggleCloudSync" />
         </div>
-      </div>
+      </SettingGroup>
 
-      <div class="section-header"> 关于 </div>
-      <div class="settings-section">
+      <SettingGroup title="关于">
         <div class="settings-item settings-item-border">
           <div class="item-text-primary">版本</div>
           <div class="item-text-tertiary">1.0.0</div>
@@ -31,7 +28,7 @@
         <div button @click="handleTermsOfService" class="settings-item settings-item-clickable">
           <div class="item-text-primary">服务条款</div>
         </div>
-      </div>
+      </SettingGroup>
     </div>
   </ion-page>
 </template>
@@ -41,6 +38,8 @@ import { computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAppStore } from '../stores/useAppStore'
 import Header from '../components/Header.vue'
+import SettingGroup from '../components/SettingGroup.vue'
+import SwitchButton from '../components/SwitchButton.vue'
 
 const store = useAppStore()
 const router = useRouter()
@@ -53,7 +52,7 @@ onMounted(() => {
 
 // 切换云同步设置
 // 调用store中的方法更新云同步状态
-const toggleCloudSync = () => {
+const toggleCloudSync = (value) => {
   store.toggleCloudSync()
 }
 
@@ -89,70 +88,14 @@ const settings = computed(() => store.settings)
   height: 100vh;
   overflow-y: scroll;
 
-  .section-header {
-    font-size: 0.75rem;
-    color: var(--text-tertiary);
-    padding: 0.3125rem 1rem;
-    width: 95%;
-    margin: 0.75rem auto 0 auto;
-  }
-
-  .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: #f9f9f9;
-    padding: 0.875rem 1rem;
-  }
-
-  .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;
-  }
-
   .item-text-primary {
     font-size: 1rem;
-    color: var(--text-primary);
+    color: #8e8e8e;
   }
 
   .item-text-tertiary {
     font-size: 0.9375rem;
-    color: var(--text-tertiary);
-  }
-
-  .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 {
-    display: flex;
-    align-items: center;
+    color: #b4b4b4;
   }
 }
 </style>