diff --git a/package-lock.json b/package-lock.json
index 7c74f6d..5ebd4c4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,8 +26,7 @@
         "@vue/cli-service": "~5.0.0",
         "element-plus": "^2.3.14",
         "eslint": "^7.32.0",
-        "eslint-plugin-vue": "^8.0.3",
-        "raw-loader": "^4.0.2"
+        "eslint-plugin-vue": "^8.0.3"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -9331,58 +9330,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/raw-loader": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz",
-      "integrity": "sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==",
-      "dev": true,
-      "dependencies": {
-        "loader-utils": "^2.0.0",
-        "schema-utils": "^3.0.0"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "webpack": "^4.0.0 || ^5.0.0"
-      }
-    },
-    "node_modules/raw-loader/node_modules/loader-utils": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
-      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
-      "dev": true,
-      "dependencies": {
-        "big.js": "^5.2.2",
-        "emojis-list": "^3.0.0",
-        "json5": "^2.1.2"
-      },
-      "engines": {
-        "node": ">=8.9.0"
-      }
-    },
-    "node_modules/raw-loader/node_modules/schema-utils": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
-      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
-      "dev": true,
-      "dependencies": {
-        "@types/json-schema": "^7.0.8",
-        "ajv": "^6.12.5",
-        "ajv-keywords": "^3.5.2"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      }
-    },
     "node_modules/react": {
       "version": "16.14.0",
       "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
diff --git a/package.json b/package.json
index 1c6f104..fbf0bf4 100644
--- a/package.json
+++ b/package.json
@@ -26,8 +26,7 @@
     "@vue/cli-service": "~5.0.0",
     "element-plus": "^2.3.14",
     "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^8.0.3",
-    "raw-loader": "^4.0.2"
+    "eslint-plugin-vue": "^8.0.3"
   },
   "eslintConfig": {
     "root": true,
diff --git a/src/App.vue b/src/App.vue
index d1dd940..4f62a4f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,13 +1,23 @@
 <template>
-  <div id="navibar" class="pconly" >
-    <div class="navi-item"><el-link @click="go('/')" id="logo">wordIn</el-link></div>
-    <div class="navi-item"><el-link @click="go('/select')" class="link">背诵</el-link></div>
-    <div class="navi-item"><el-link @click="go('/manage')" class="link">编辑单词本</el-link></div>
-    <div class="navi-item"><el-link @click="go('/manual')" class="link">使用说明</el-link></div>
-    <div class="navi-item"><el-link @click="go('/about')" class="link">关于</el-link></div>
+  <div class="pconly">
+    <div id="navibar">
+      <div class="navi-item"><el-link @click="go('/')" id="logo">wordIn</el-link></div>
+      <div class="navi-item"><el-link @click="go('/select')" class="link">背诵</el-link></div>
+      <div class="navi-item"><el-link @click="go('/manage')" class="link">编辑单词本</el-link></div>
+      <div class="navi-item"><el-link @click="go('/manual')" class="link">使用说明</el-link></div>
+      <div class="navi-item"><el-link @click="go('/about')" class="link">关于</el-link></div>
+    </div>
+  </div>
+  <router-view style=""></router-view>
+  <div class="mbonly">
+    <div id="navibar">
+      <div class="navi-item"><box-icon name="home-alt-2" @click="$router.push('/')" color="var(--text-color)" size="30px"></box-icon><div>主页</div></div>
+      <div class="navi-item"><box-icon name="book-open" @click="$router.push('/select')" color="var(--text-color)" size="30px"></box-icon><div>背诵</div></div>
+      <div class="navi-item"><box-icon name="folder" @click="$router.push('/manage')" color="var(--text-color)" size="30px"></box-icon><div>浏览</div></div>
+      <div class="navi-item"><box-icon name="file" @click="$router.push('/manual')" color="var(--text-color)" size="30px"></box-icon><div>说明</div></div>
+      <div class="navi-item"><box-icon name="info-circle" @click="$router.push('/about')" color="var(--text-color)" size="30px"></box-icon><div>关于</div></div>
+    </div>
   </div>
-  <router-view style="margin-top: 10px;"></router-view>
-  <!-- <div id="navibar" class="mbonly"></div> -->
 </template>
 
 <script>
@@ -144,7 +154,8 @@ html.dark {
   color: var(--text-color);
   transition: .5s;
 }
-.card:hover{
+
+.card:hover {
   box-shadow: var(--el-box-shadow);
 }
 
@@ -171,22 +182,50 @@ html.bgimged .card {
 </style>
 
 <style scoped>
-#navibar {
-  height: 60px;
-  border-bottom: solid 1px var(--bd-color);
-  display: flex;
-  flex-direction: row;
-  background-color: var(--navi-bg-color);
-  backdrop-filter: blur(10px);
+@media screen and (max-width: 500px) {
+  #navibar {
+    height: 70px;
+    border-top: solid 1px var(--bd-color);
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    background-color: var(--navi-bg-color);
+    backdrop-filter: blur(10px);
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+  }
+
+  .navi-item {
+    height: 100%;
+    font-size: 13px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    justify-content: baseline;
+    color: var(--text-color);
+  }
 }
 
-.navi-item {
-  height: 100%;
-  font-size: 22px;
-  display: flex;
-  justify-content: baseline;
-  margin-left: 20px;
-  color: var(--text-color);
+@media screen and (min-width: 500px) {
+  #navibar {
+    height: 60px;
+    border-bottom: solid 1px var(--bd-color);
+    display: flex;
+    flex-direction: row;
+    background-color: var(--navi-bg-color);
+    backdrop-filter: blur(10px);
+  }
+
+  .navi-item {
+    height: 100%;
+    font-size: 22px;
+    display: flex;
+    justify-content: baseline;
+    margin-left: 20px;
+    color: var(--text-color);
+  }
 }
 
 #logo {
diff --git a/src/components/Home.vue b/src/components/Home.vue
index 34fe648..34620a2 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -4,7 +4,7 @@
             <div style="flex-grow: 2;margin:30px;" class="rowbox">
                 <div style="font-size: 25px;color: var(--text-color);font-weight: 600;">欢迎使用</div>
                 <div id="title">wordIn</div>
-                <div>当前版本: 1.01 更新时间:2024年1月11日 10:43 AM</div>
+                <div>当前版本: 1.01 Patch 1 <br/> 更新时间:2024年1月11日 5:07 PM</div>
             </div>
             <div style="flex-grow: 1;align-items: center;" class="colbox card">
                 <router-link to="/select" class="button">
@@ -122,12 +122,12 @@ export default {
         color: var(--text-color);
         text-shadow: #00000057 5px 5px 20px;
         line-height: 100px;
-        font-weight: 600;
+        font-weight: 500;
         margin-bottom: 15px;
     }
 
     .title {
-        font-weight: 800;
+        font-weight: 600;
         color: var(--text-color);
         font-size: 35px;
         text-overflow: ellipsis;
diff --git a/src/components/manage/SetList.vue b/src/components/manage/SetList.vue
index 2620177..56409c7 100644
--- a/src/components/manage/SetList.vue
+++ b/src/components/manage/SetList.vue
@@ -164,8 +164,18 @@ export default {
         },
         taggle_sidebar() {
             let node = document.getElementById("sidebar");
-            if (node.style.width === "180px") node.style.width = "0";
-            else node.style.width = "180px";
+            if (node.style.width === "180px") {
+                node.style.width = "0";
+                setTimeout(()=>{
+                    node.style.display = "none";
+                },500)
+            }
+            else {
+                node.style.display = "block";
+                setTimeout(()=>{
+                    node.style.width = "180px";
+                },0)
+            }
             return;
         }
     },
@@ -204,7 +214,9 @@ export default {
     }
 
     #sidebar {
+        display: none;
         width: 0;
+        margin-top: 20px;
         transition: .5s;
     }
 
@@ -263,6 +275,7 @@ export default {
     #wordsets-container {
         width: 100%;
         display: flex;
+        transition: .5s;
     }
 
     #sets-container {
@@ -289,6 +302,9 @@ export default {
 
     #sidebar {
         width: 180px;
+        animation: sidebar-enter ease-out .6s backwards;
+        padding-left: 10px;
+        margin: 10px;
     }
 
     .wordset {
@@ -343,10 +359,7 @@ export default {
     border-radius: 5px;
     overflow-y: auto;
     overflow-x: hidden;
-    animation: sidebar-enter ease-out .6s backwards;
     height: calc(100% - 100px);
-    padding-left: 10px;
-    margin: 10px;
     border: 1px solid var(--bd-color);
 }
 
diff --git a/src/components/recite/select.vue b/src/components/recite/select.vue
index cb2e4f3..d4b79e1 100644
--- a/src/components/recite/select.vue
+++ b/src/components/recite/select.vue
@@ -207,7 +207,8 @@ export default {
     /* margin: 20px; */
     align-items: center;
     display: flex;
-    flex-direction: column
+    flex-direction: column;
+    margin-top:10px;
 }
 .subtitle {
     font-size: 23px;
diff --git a/src/js/history.js b/src/js/history.js
index b04e1e7..cda6594 100644
--- a/src/js/history.js
+++ b/src/js/history.js
@@ -97,17 +97,17 @@ export default class _history {
             }
             else words = words.concat(...temp);
         }
-        let arr = Array.from(new Array(words.length).keys());
-        if(history.settings.shuffle){
-            let seed = history.settings.seed;
-            for (let i = this.total - 1; i > 0; i--) {
-                [arr[i], arr[seed % i]] = [arr[seed % i], arr[i]];
-            }
-        }
+        history.total = words.length;
         if(words.length <= 0){
             return this.handle_err("单词本为空",err);
         }
-        history.total = words.length;
+        let arr = Array.from(new Array(words.length).keys());
+        if(history.settings.shuffle){
+            let seed = history.settings.seed;
+            for (let i = words.length - 1; i > 0; i--) {
+                [arr[i], arr[seed % i]] = [arr[seed % i], arr[i]];
+            }
+        }
         this.save();
         if (typeof callback === 'function') {
             callback(words,history.current,arr,history.settings);