diff --git a/src/assets/img/book2.png b/src/assets/img/book2.png
new file mode 100644
index 00000000..d464a202
Binary files /dev/null and b/src/assets/img/book2.png differ
diff --git a/src/assets/img/books.png b/src/assets/img/books.png
new file mode 100644
index 00000000..c35ca03f
Binary files /dev/null and b/src/assets/img/books.png differ
diff --git a/src/assets/img/collect.png b/src/assets/img/collect.png
new file mode 100644
index 00000000..11091703
Binary files /dev/null and b/src/assets/img/collect.png differ
diff --git a/src/assets/img/complete.png b/src/assets/img/complete.png
new file mode 100644
index 00000000..26eb56d2
Binary files /dev/null and b/src/assets/img/complete.png differ
diff --git a/src/pages/mobile/My.vue b/src/pages/mobile/My.vue
index 3c428474..377ab369 100644
--- a/src/pages/mobile/My.vue
+++ b/src/pages/mobile/My.vue
@@ -29,7 +29,7 @@ function $no() {
 </script>
 
 <template>
-  <div class="page setting">
+  <div class="page my">
     <div ref="float" class="float">
       <div class="right">
         <IconWrapper>
@@ -65,47 +65,46 @@ function $no() {
         </div>
         <div class="grid">
           <div class="item" @click="router.push('/mobile/data-manage')">
-            <Icon icon="uil:setting" width="22"/>
+            <img src="@/assets/img/collect.png" alt="">
             <span>收藏</span>
           </div>
           <div class="item" @click="router.push('/mobile/data-manage')">
-            <Icon icon="uil:setting" width="22"/>
+            <img src="@/assets/img/book2.png" alt="">
             <span>错词本</span>
           </div>
           <div class="item" @click="router.push('/mobile/data-manage')">
-            <Icon icon="uil:setting" width="22"/>
+            <img src="@/assets/img/complete.png" alt="">
             <span>简单词</span>
           </div>
         </div>
-        <div class="list">
+        <div class="setting-list">
           <div class="item" @click="router.push('/mobile/setting')">
-            <div class="left">
-              <Icon icon="uil:setting" width="22"/>
+            <Icon icon="uil:setting" width="22"/>
+            <div class="right">
               <span>设置</span>
+              <Icon class="arrow" icon="mingcute:right-line" width="20"/>
             </div>
-            <Icon class="arrow" icon="mingcute:right-line" width="20"/>
           </div>
-
           <div class="item" @click="router.push('/mobile/data-manage')">
-            <div class="left">
-              <Icon icon="uil:setting" width="22"/>
+            <Icon icon="mdi:database-cog-outline" width="22"/>
+            <div class="right">
               <span>数据同步</span>
+              <Icon class="arrow" icon="mingcute:right-line" width="20"/>
             </div>
-            <Icon class="arrow" icon="mingcute:right-line" width="20"/>
-          </div>
-          <div class="item" @click="router.push('/mobile/data-manage')">
-            <div class="left">
-              <Icon icon="uil:setting" width="22"/>
-              <span>反馈问题</span>
-            </div>
-            <Icon class="arrow" icon="mingcute:right-line" width="20"/>
           </div>
           <div class="item">
-            <div class="left">
-              <Icon icon="mdi:about-circle-outline" width="22"/>
-              <span>关于我们</span>
+            <Icon icon="pepicons-pencil:letter-open" width="22"/>
+            <div class="right">
+              <span>反馈问题</span>
+              <Icon class="arrow" icon="mingcute:right-line" width="20"/>
+            </div>
+          </div>
+          <div class="item">
+            <Icon icon="mdi:about-circle-outline" width="22"/>
+            <div class="right" style="border-bottom: none">
+              <span>关于我们</span>
+              <Icon class="arrow" icon="mingcute:right-line" width="20"/>
             </div>
-            <Icon class="arrow" icon="mingcute:right-line" width="20"/>
           </div>
         </div>
       </div>
@@ -114,15 +113,16 @@ function $no() {
 </template>
 
 <style scoped lang="scss">
-$main-bg: rgb(21, 23, 36);
-$second-btn-color: rgb(58, 58, 70);
+@import "common.scss";
 
-.setting {
+
+.my {
   font-size: 18rem;
   display: flex;
   flex-direction: column;
   align-items: center;
-  background: $main-bg;
+  color: black;
+  background: var(--color-second-bg);
 
   .float {
     position: fixed;
@@ -154,30 +154,24 @@ $second-btn-color: rgb(58, 58, 70);
       box-sizing: border-box;
     }
 
-    //消息页面
-    $msg-bg: rgb(22, 22, 22);
-    $msg-subpage-card-bg: rgb(28, 30, 43); //二级页面，卡片背景
-
     .detail {
       transform: translateY(-50rem);
-      background: $main-bg;
       //padding: 20rem;
+      background: var(--color-second-bg);
       padding-top: 30rem;
       border-radius: 20rem 20rem 0 0;
       display: flex;
       flex-direction: column;
       gap: 20rem;
+      padding: 20rem;
 
       .heat {
-        padding:0 20rem;
-        color: white;
         display: flex;
         align-items: center;
         font-size: 16rem;
         gap: 30rem;
 
         .num {
-          color: white;
           font-weight: bold;
         }
 
@@ -189,16 +183,15 @@ $second-btn-color: rgb(58, 58, 70);
       }
 
       .description {
-        padding:0 20rem;
         font-size: 16rem;
-        color: white;
       }
 
       .grid {
         display: flex;
         justify-content: space-between;
-        border-bottom: 1px solid gray;
         padding: 20rem;
+        background: var(--color-header-bg);
+        border-radius: 8rem;
 
         .item {
           height: 60rem;
@@ -207,75 +200,13 @@ $second-btn-color: rgb(58, 58, 70);
           flex-direction: column;
           justify-content: center;
           align-items: center;
-          color: white;
-        }
-      }
 
-      .list {
-        padding: 20rem;
-        padding-top: 0;
-
-        .item {
-          margin-bottom: 10rem;
-          position: relative;
-          flex: 1;
-          font-size: 16rem;
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          border-radius: 6rem;
-          //background: $second-btn-color;
-          height: 50rem;
-          color: white;
-
-          .left {
-            display: flex;
-            align-items: center;
-            gap: 10rem;
+          img {
+            width: 40rem;
           }
         }
       }
-    }
-  }
 
-  .nav {
-    font-size: 16rem;
-    width: 100%;
-    height: 50rem;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 1;
-    background: $main-bg;
-
-    .tabs {
-      width: 100%;
-      display: flex;
-      justify-content: space-between;
-
-      .tab {
-        height: 45rem;
-        width: 45%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: gray;
-        transition: color .3s;
-
-        &.active {
-          font-weight: bold;
-          color: white;
-        }
-      }
-    }
-
-    .indicator {
-      height: 2px;
-      background: gold;
-      width: 25%;
-      position: relative;
-      transition: all .3s;
-      //left: 50%;
     }
   }
 }
diff --git a/src/pages/mobile/Setting.vue b/src/pages/mobile/Setting.vue
index 06c9b2e0..8fc61b2d 100644
--- a/src/pages/mobile/Setting.vue
+++ b/src/pages/mobile/Setting.vue
@@ -1,84 +1,63 @@
 <script setup lang="ts">
 
 import {Icon} from "@iconify/vue";
-import IconWrapper from "@/components/IconWrapper.vue";
 import useTheme from "@/hooks/theme.ts";
 import {useSettingStore} from "@/stores/setting.ts";
 import NavBar from "@/pages/mobile/components/NavBar.vue";
-import router from "@/router.ts";
+import {ref} from "vue";
 
 const {toggleTheme} = useTheme()
 const settingStore = useSettingStore()
+// @ts-ignore
+const gitLastCommitHash = ref(LATEST_COMMIT_HASH);
 
 </script>
 
 <template>
   <div class="mobile-page setting">
     <NavBar title="设置"/>
-    <div class="setting-list">
-      <div class="item">
-        <div class="left">
-          <Icon icon="uil:setting" width="22"/>
-          <span>音效设置</span>
+    <div class="content">
+      <div class="setting-list">
+        <div class="item">
+          <Icon icon="bx:headphone" width="22"/>
+          <div class="right">
+            <span>音效设置</span>
+            <Icon class="arrow" icon="mingcute:right-line" width="20"/>
+          </div>
+        </div>
+        <div class="item">
+          <Icon icon="icon-park-outline:setting-config" width="22"/>
+          <div class="right" style="border-bottom: none">
+            <span>其他设置</span>
+            <Icon class="arrow" icon="mingcute:right-line" width="20"/>
+          </div>
         </div>
-        <Icon class="arrow" icon="mingcute:right-line" width="20"/>
       </div>
-      <div class="item">
-        <div class="left">
-          <Icon icon="uil:setting" width="22"/>
-          <span>其他设置</span>
-        </div>
-        <Icon class="arrow" icon="mingcute:right-line" width="20"/>
-      </div>
-      <div class="item" @click="router.push('/mobile/data-manage')">
-        <div class="left">
-          <Icon icon="uil:setting" width="22"/>
-          <span>数据管理</span>
-        </div>
-        <Icon class="arrow" icon="mingcute:right-line" width="20"/>
-      </div>
-      <div class="item" @click="router.push('/mobile/data-manage')">
-        <div class="left">
-          <Icon icon="uil:setting" width="22"/>
-          <span>反馈问题</span>
-        </div>
-        <Icon class="arrow" icon="mingcute:right-line" width="20"/>
-      </div>
-      <div class="item">
-        <div class="left">
-          <Icon icon="mdi:about-circle-outline" width="22"/>
-          <span>关于我们</span>
-        </div>
-        <Icon class="arrow" icon="mingcute:right-line" width="20"/>
+      <div class="git-log">
+        Build {{ gitLastCommitHash }}
       </div>
     </div>
   </div>
 </template>
 
 <style scoped lang="scss">
+@import "common";
+
 .setting {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  background: var(--color-second-bg);
 
-  .setting-list {
-    background: var(--color-third-bg);
-    border-radius: 8rem;
-    width: 90%;
-
-    .item {
-      height: 60rem;
-      padding: 0 20rem;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      .left {
-        display: flex;
-        align-items: center;
-        gap: 10rem;
-      }
-    }
+  .content {
+    width: 100%;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20rem;
+    box-sizing: border-box;
   }
+
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/mobile/common.scss b/src/pages/mobile/common.scss
new file mode 100644
index 00000000..a9564782
--- /dev/null
+++ b/src/pages/mobile/common.scss
@@ -0,0 +1,25 @@
+.setting-list {
+  background: var(--color-header-bg);
+  color: black;
+  border-radius: 8rem;
+  width: 100%;
+
+  .item {
+    height: 60rem;
+    padding-left: 20rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10rem;
+
+    .right {
+      padding-right: 10rem;
+      height: 100%;
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid #f1f1f1;
+    }
+  }
+}
diff --git a/src/pages/mobile/index.vue b/src/pages/mobile/index.vue
index 996ef3f2..045321c7 100644
--- a/src/pages/mobile/index.vue
+++ b/src/pages/mobile/index.vue
@@ -24,15 +24,15 @@ onMounted(() => {
     </div>
     <div class="tabs">
       <div class="tab" @click="index = 0">
-        <Icon width="30" icon="icon-park:word"/>
+        <Icon width="30" icon="ph:exam"/>
         <span>单词</span>
       </div>
       <div class="tab" @click="index = 1">
-        <Icon width="30" icon="icon-park:word"/>
+        <Icon width="30" icon="iconoir:book"/>
         <span>词典</span>
       </div>
       <div class="tab" @click="index = 2">
-        <Icon width="30" icon="icon-park:word"/>
+        <Icon width="30" icon="iconoir:user"/>
         <span>我的</span>
       </div>
     </div>