diff --git a/app.vue b/app.vue
index 315ae499865db80749009cd0790479bfd2e8a9b7..ae096fc1de3928ce28886d0c3becf22fee66d31f 100644
--- a/app.vue
+++ b/app.vue
@@ -51,6 +51,49 @@ axios.get('https://2023.igem.wiki/peking/education')
   text-shadow: none;
 }
 
+::-moz-scrollbar {
+
+  width: 5px;
+
+  height: 5px;
+
+  background: #fefefd;
+  border-radius: 10px;
+  
+}
+
+
+
+::-moz-scrollbar-track {
+
+  background: #fefdfd;
+border-radius: 10px;
+}
+
+
+
+::-moz-scrollbar-thumb {
+
+  background: rgb(139 0 18);
+  border-radius: 10px;
+}
+
+
+
+::-moz-scrollbar-thumb:hover {
+
+  background: rgb(139 0 18);
+
+}
+
+
+
+::-moz-scrollbar:hover {
+
+  width: 10px;
+  height: 10px;
+
+}
 
  /* 滚动条样式 */
 
diff --git a/components/collabsider.vue b/components/collabsider.vue
index 64b3118ad70f162acede3f5297f19f531aa56f1f..47ba2756c2de81df2dc24b33288d7ecb0fb0d73c 100644
--- a/components/collabsider.vue
+++ b/components/collabsider.vue
@@ -87,6 +87,16 @@
   </script>
   
   <style scoped>
+  @font-face {
+    font-family: 'saf-regular';
+    src: url('https://static.igem.wiki/teams/4713/wiki/fonts/saf-regular.ttf'); 
+    font-weight: normal;
+    font-style: normal;
+  }
+  
+  *{
+    font-family: 'saf-regular';
+  }
   div#myDiv ul li a.active {
     color: #8B0012;
   }
diff --git a/components/descriptionSider.vue b/components/descriptionSider.vue
index be687ca39c87842a43cfa7d0a25579ec26848805..5356d38af74cc0fd5f49a5c30863116723ab5e7e 100644
--- a/components/descriptionSider.vue
+++ b/components/descriptionSider.vue
@@ -58,6 +58,16 @@ function setActive(link,li) {
 </script>
 
 <style scoped>
+@font-face {
+  font-family: 'saf-regular';
+  src: url('https://static.igem.wiki/teams/4713/wiki/fonts/saf-regular.ttf'); 
+  font-weight: normal;
+  font-style: normal;
+}
+
+*{
+  font-family: 'saf-regular';
+}
 div#myDiv ul li a.active {
     color: #8B0012;
   }
diff --git a/components/header.vue b/components/header.vue
index 94b537b932d6a7b8c93a9debdead3433fa060d7a..8b24761d7a9aee5a0c7f9095b762bc6de09d425c 100644
--- a/components/header.vue
+++ b/components/header.vue
@@ -186,8 +186,8 @@ function addActive(n: number) {
 <style scoped>
 
 @font-face {
-  font-family: 'kalam-bold';
-  src: url('https://static.igem.wiki/teams/4713/wiki/fonts/kalam-bold.ttf'); 
+  font-family: 'saf-regular';
+  src: url('https://static.igem.wiki/teams/4713/wiki/fonts/saf-regular.ttf'); 
   font-weight: normal;
   font-style: normal;
 }
@@ -210,7 +210,7 @@ function addActive(n: number) {
 
 #mainList {
   counter-reset: li;
-  font-family: 'kalam-bold';
+  font-family: 'saf-regular';
 }
 
 #mainList li::before {
@@ -251,7 +251,7 @@ ul#subList {
 #subList li {
   cursor: pointer;
   width: fit-content;
-  font-family: 'kalam-bold';
+  font-family: 'saf-regular';
 }
 
 #mainList li h1 {
diff --git a/components/hpsider.vue b/components/hpsider.vue
index 36f27d5e17c7262ffbdceada8a5a2114d1b8de3e..492768b0f435f53d7f47b10f6c72de3d96dbb4d6 100644
--- a/components/hpsider.vue
+++ b/components/hpsider.vue
@@ -89,6 +89,16 @@ onMounted(() => {
 </script>
 
 <style scoped>
+@font-face {
+  font-family: 'saf-regular';
+  src: url('https://static.igem.wiki/teams/4713/wiki/fonts/saf-regular.ttf'); 
+  font-weight: normal;
+  font-style: normal;
+}
+
+*{
+  font-family: 'saf-regular';
+}
 div#myDiv ul li a.active {
   color: #8B0012;
 }
diff --git a/components/mapSider.vue b/components/mapSider.vue
index 16f76cca08049e583ba7d3bf8db4af8ae9f6c932..62f36c08f2c53338244a48c2bfbb4e6adb9a0119 100644
--- a/components/mapSider.vue
+++ b/components/mapSider.vue
@@ -102,6 +102,16 @@
   </script>
   
   <style scoped>
+  @font-face {
+    font-family: 'saf-regular';
+    src: url('https://static.igem.wiki/teams/4713/wiki/fonts/saf-regular.ttf'); 
+    font-weight: normal;
+    font-style: normal;
+  }
+  
+  *{
+    font-family: 'saf-regular';
+  }
   div#myDiv ul li a.active {
     color: #8B0012;
   }
diff --git a/components/sider.vue b/components/sider.vue
index a21254b13d3bd7b421218b5eb0c8cd98fcb9e20b..0e44ee203e0f6b1b6ef54d845597d3c64629a938 100644
--- a/components/sider.vue
+++ b/components/sider.vue
@@ -1,9 +1,9 @@
 <template>
   <div id="myDiv"
-    class="transition-all duration-500 font-medium scale-50 lg:scale-100 mt-[32px] mr-3 lg:mr-[16px] mb-[0px] ml-[4vw] uppercase sticky top-[40%] min-w-[220px] max-w-[350px] ">
+    class=" transition-all duration-500 font-medium scale-50 lg:scale-100 mt-[32px] mr-3 lg:mr-[16px] mb-[0px] ml-[4vw] uppercase sticky top-[40%] min-w-[220px] max-w-[350px] ">
     <h1 class="font-light">{{ page?.title }}</h1>
 
-    <ul class="font-extralight">
+    <ul class="overflow-scroll h-[300px]  font-extralight">
       <li @mouseenter="toggleMouse(index)" v-for="(e, index) in toc?.links">
         <div class=" flex cursor-pointer items-center mt-6">
           <div
@@ -23,9 +23,9 @@
           </li>
 
         </ul>
-      </li><img alt="sider" src="https://static.igem.wiki/teams/4713/wiki/sider2.png" />
+      </li>
     </ul>
-
+    <img alt="sider" src="https://static.igem.wiki/teams/4713/wiki/sider2.png" />
   </div>
 </template>
 <script setup lang="js">
@@ -90,6 +90,85 @@ onMounted(() => {
 </script>
 
 <style scoped>
+
+@font-face {
+  font-family: 'saf-regular';
+  src: url('https://static.igem.wiki/teams/4713/wiki/fonts/saf-regular.ttf'); 
+  font-weight: normal;
+  font-style: normal;
+}
+
+*{
+  font-family: 'saf-regular';
+}
+
+::-webkit-scrollbar {
+
+  width: 5px;
+
+  height: 5px;
+
+  background: rgb(250,251,240);
+  border-radius: 10px;
+  
+}
+
+::-moz-scrollbar {
+
+  width: 5px;
+
+  height: 5px;
+
+  background: rgb(250,251,240);
+  border-radius: 10px;
+  
+}
+
+::-webkit-scrollbar-track {
+
+  background: rgb(250,251,240);
+border-radius: 10px;
+}
+
+
+
+::-webkit-scrollbar-thumb {
+
+  background: rgb(139 0 18);
+  border-radius: 10px;
+}
+
+
+
+::-webkit-scrollbar {
+
+  width: 5px;
+
+  height: 5px;
+
+  background: rgb(250,251,240);
+  border-radius: 10px;
+  
+}
+
+
+
+::-moz-scrollbar-track {
+
+  background: rgb(250,251,240);
+border-radius: 10px;
+}
+
+
+
+::-moz-scrollbar-thumb {
+
+  background: rgb(139 0 18);
+  border-radius: 10px;
+}
+
+
+
 div#myDiv ul li a.active {
   color: #8B0012;
 }