diff --git a/src/assets/css/style.scss b/src/assets/css/style.scss
index 6ab903b3..dfde848b 100644
--- a/src/assets/css/style.scss
+++ b/src/assets/css/style.scss
@@ -8,7 +8,7 @@
   --color-background: #E6E8EB;
   //--color-main-bg: #E6E8EB;
   --color-main-bg: rgb(238, 240, 244);
-  --color-second-bg: rgb(240, 242, 244);
+  --color-second-bg: rgb(247, 247, 247);
   --color-third-bg: rgb(213, 215, 217);
 
   --color-item-bg: rgb(228, 230, 232);
@@ -143,9 +143,7 @@ html, body {
   //font-size: 1px;
   padding: 0;
   margin: 0;
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
+  overflow-x: hidden;
   color: var(--color-font-1);
   font-family: var(--font-family);
   -webkit-font-smoothing: antialiased;
@@ -183,8 +181,8 @@ html, body {
 }
 
 #app {
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  min-height: 100vh;
 }
 
 a {
@@ -217,29 +215,27 @@ a {
   }
 }
 
-::-webkit-scrollbar {
-  width: .5rem;
-  height: .6rem;
+@supports selector(::-webkit-scrollbar) {
+  ::-webkit-scrollbar {
+    width: .5rem;
+    height: .6rem;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: .1rem;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: var(--color-scrollbar);
+    border-radius: .6rem;
+  }
 }
 
-::-webkit-scrollbar-track {
-  background: transparent;
-  border-radius: .1rem;
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--color-scrollbar);
-  border-radius: .6rem;
-}
-
-
-/* 火狐美化滚动条 */
-* {
-  scrollbar-color: var(--color-scrollbar) #f3f4f9;
-  /* 滑块颜色  滚动条背景颜色 */
-  scrollbar-width: thin;
-  /* 滚动条宽度有三种：thin、auto、none */
-}
+//@supports (scrollbar-width: thin) {
+//  * {
+//    scrollbar-color: var(--color-scrollbar) #f3f4f9;
+//    scrollbar-width: thin;
+//  }
+//}
 
 footer {
   $footer-height: 60rem;
@@ -450,9 +446,9 @@ footer {
 
 }
 
-.text-shadow {
+.word-shadow {
   color: transparent !important;
-  text-shadow: #b0b0b0 0 0 8rem;
+  text-shadow: #b0b0b0 0 0 .5rem;
   user-select: none;
 }
 
@@ -488,4 +484,8 @@ footer {
 
 .container2 {
   @apply w-5/10 pt-5;
+}
+
+.center {
+  @apply flex justify-center items-center;
 }
\ No newline at end of file
diff --git a/src/pages/pc/components/Ring.vue b/src/pages/pc/components/Ring.vue
index e942bba9..ab44019f 100644
--- a/src/pages/pc/components/Ring.vue
+++ b/src/pages/pc/components/Ring.vue
@@ -1,24 +1,24 @@
 <template>
-  <div class="ring">
+  <div class="round">
     <svg height="100%" width="100%">
       <circle class="circle-full"
-              cx="2.5rem"
-              cy="2.5rem"
-              r="2.2rem"
+              cx="3rem"
+              cy="3rem"
+              r="2.6rem"
               fill="none"
-              stroke-width=".3rem"
+              stroke-width=".4rem"
               stroke-linecap="round"></circle>
       <circle v-if="props.percentage" ref="circleEl"
               class="circle-detail"
-              cx="2.5rem"
-              cy="2.5rem"
-              r="2.2rem"
+              cx="3rem"
+              cy="3rem"
+              r="2.6rem"
               fill="none"
-              stroke-width=".3rem"
+              stroke-width=".4rem"
               stroke-linecap="round"
               stroke-dasharray="0,10000"></circle>
     </svg>
-    <span class="value">{{ props.value }}</span>
+    <span class="text-2xl">{{ props.value }}</span>
     <span class="desc">{{ props.desc }}</span>
   </div>
 </template>
@@ -37,7 +37,7 @@ const circleEl = $ref(null)
 
 onMounted(() => {
   if (props.percentage) {
-    let circleLength = Math.floor(2 * Math.PI * 40);
+    let circleLength = Math.floor(2 * Math.PI * 35);
     let val = Number(props.percentage.toFixed(0));
     circleEl.setAttribute("stroke-dasharray", "" + circleLength * val / 100 + "px,10000");
   }
@@ -46,10 +46,10 @@ onMounted(() => {
 <style scoped lang="scss">
 @import "@/assets/css/variable";
 
-$w: 5rem;
+$w: 6rem;
 $w2: calc($w / 2);
 
-.ring {
+.round {
   font-size: 1rem;
   width: $w;
   height: $w;
@@ -58,7 +58,6 @@ $w2: calc($w / 2);
   justify-content: center;
   flex-direction: column;
   position: relative;
-  margin-bottom: .38rem;
 
   svg {
     position: absolute;
@@ -75,13 +74,5 @@ $w2: calc($w / 2);
     }
   }
 
-  .value {
-
-  }
-
-  .desc {
-    font-size: .8rem;
-    opacity: .6;
-  }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/pc/components/list/WordList.vue b/src/pages/pc/components/list/WordList.vue
index cc3f729f..6e0bec7b 100644
--- a/src/pages/pc/components/list/WordList.vue
+++ b/src/pages/pc/components/list/WordList.vue
@@ -48,7 +48,7 @@ defineExpose({scrollToBottom, scrollToItem})
     </template>
     <template v-slot="{ item, index }">
       <div class="item-title">
-        <span class="word" :class="!showWord && 'text-shadow'">{{ item.word }}</span>
+        <span class="word" :class="!showWord && 'word-shadow'">{{ item.word }}</span>
         <span class="phonetic">{{ item.phonetic0 }}</span>
         <VolumeIcon class="volume" @click="playWordAudio(item.word)"></VolumeIcon>
       </div>
diff --git a/src/pages/pc/components/toolbar/index.vue b/src/pages/pc/components/toolbar/index.vue
index 701e6de3..b029d737 100644
--- a/src/pages/pc/components/toolbar/index.vue
+++ b/src/pages/pc/components/toolbar/index.vue
@@ -18,7 +18,6 @@ import {emitter, EventKey} from "@/utils/eventBus.ts";
 import BaseIcon from "@/components/BaseIcon.vue";
 import {useNav} from "@/utils";
 
-const {toggleTheme} = useTheme()
 const store = useBaseStore()
 const settingStore = useSettingStore()
 const runtimeStore = useRuntimeStore()
@@ -65,17 +64,13 @@ const {nav} = useNav()
         <Tooltip
             :title="`词典详情(${settingStore.shortcutKeyMap[ShortcutKey.OpenDictDetail]})`">
           <div class="info" @click="emitter.emit(EventKey.openDictModal,'detail')">
-            {{ store.currentStudyWordDict.name }} {{ practiceStore.repeatNumber ? '  复习错词' : '' }}
+            {{ store.currentStudyWordDict.name }}
           </div>
         </Tooltip>
         <BaseIcon title="切换词典"
                   @click="nav('/dict')"
                   icon="gg:arrows-exchange"/>
-        <div class="info-text" v-if="practiceStore.repeatNumber">
-          复习错词
-        </div>
       </div>
-
       <div class="options" ref="moreOptionsRef">
         <div class="more" :class="settingStore.collapse && 'hide'">
           <Tooltip title="收起图标">
@@ -104,15 +99,6 @@ const {nav} = useNav()
 
           <RepeatSetting/>
 
-          <Tooltip
-              :title="`切换主题(${settingStore.shortcutKeyMap[ShortcutKey.ToggleTheme]})`"
-          >
-            <IconWrapper>
-              <Icon icon="ep:moon" v-if="settingStore.theme === 'dark'"
-                    @click="toggleTheme"/>
-              <Icon icon="tabler:sun" v-else @click="toggleTheme"/>
-            </IconWrapper>
-          </Tooltip>
           <BaseIcon
               @click="settingStore.showPanel = !settingStore.showPanel"
               :title="`单词本(${settingStore.shortcutKeyMap[ShortcutKey.TogglePanel]})`"
@@ -148,35 +134,15 @@ const {nav} = useNav()
     color: white;
   }
 }
-
-.info-text {
-  @extend .info;
-  cursor: unset;
-
-  &:hover {
-    background: unset;
-  }
-}
 </style>
 <style scoped lang="scss">
 @import "@/assets/css/style";
-
-.test-enter-active,
-.test-leave-active {
-  transition: all 0.3s;
-}
-
-.test-enter-from,
-.test-leave-to {
-  width: 0;
-}
-
 header {
   width: var(--toolbar-width);
   margin-top: 1rem;
   background: var(--color-second-bg);
   border-radius: .8rem;
-  margin-bottom: 2.5rem;
+  margin-bottom: 1.8rem;
   position: relative;
   z-index: 2;
   padding: .4rem var(--space);
@@ -197,7 +163,8 @@ header {
       max-width: 45%;
       font-size: 1rem;
       position: relative;
-      gap: .5rem;
+      align-items: center;
+      gap: .3rem;
     }
 
     .hide {
diff --git a/src/pages/pc/home/HomeIndex.vue b/src/pages/pc/home/HomeIndex.vue
index a103f04f..f7843572 100644
--- a/src/pages/pc/home/HomeIndex.vue
+++ b/src/pages/pc/home/HomeIndex.vue
@@ -119,9 +119,6 @@ function clickEvent(e) {
   @apply rounded-xl bg-white p-4 mt-5;
 }
 
-.center {
-  @apply flex justify-center items-center;
-}
 
 .title {
   @apply text-lg font-medium;
diff --git a/src/pages/pc/index.vue b/src/pages/pc/index.vue
index c90a5b3d..980e784e 100644
--- a/src/pages/pc/index.vue
+++ b/src/pages/pc/index.vue
@@ -8,21 +8,27 @@ import {useBaseStore} from "@/stores/base.ts";
 import {useSettingStore} from "@/stores/setting.ts";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {useRouter} from "vue-router";
+import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
+import Tooltip from "@/pages/pc/components/Tooltip.vue";
+import useTheme from "@/hooks/theme.ts";
+import BaseIcon from "@/components/BaseIcon.vue";
 
 const practiceStore = usePracticeStore()
 const store = useBaseStore()
 const settingStore = useSettingStore()
 const runtimeStore = useRuntimeStore()
 const router = useRouter()
+const {toggleTheme} = useTheme()
+
 </script>
 
 <template>
   <div class="layout">
-    <div class="aside">
+    <div class="aside" :class="{'hide':settingStore.showSide}">
       <div class="top">
         <Logo/>
         <div class="row" @click="router.push('/home')">
-          <Icon icon="iconoir:home" />
+          <Icon icon="iconoir:home"/>
           <span>主页</span>
         </div>
         <div class="row" @click="router.push('/word')">
@@ -43,16 +49,32 @@ const router = useRouter()
           <span>社区</span>
         </div>
       </div>
-      <div class="bottom">
-        <div class="row"
-             :title="`设置(${settingStore.shortcutKeyMap[ShortcutKey.OpenSetting]})`"
-             @click="runtimeStore.showSettingModal = true">
-          <Icon icon="uil:setting"/>
-          <span>试卷</span>
-        </div>
+      <div class="bottom flex justify-evenly ">
+        <BaseIcon
+            :title="`收起(${settingStore.shortcutKeyMap[ShortcutKey.OpenSetting]})`"
+            @click="settingStore.showSide = !settingStore.showSide"
+            icon="formkit:left"/>
+        <Tooltip
+            :title="`切换主题(${settingStore.shortcutKeyMap[ShortcutKey.ToggleTheme]})`"
+        >
+          <IconWrapper>
+            <Icon icon="ep:moon" v-if="settingStore.theme === 'dark'"
+                  @click="toggleTheme"/>
+            <Icon icon="tabler:sun" v-else @click="toggleTheme"/>
+          </IconWrapper>
+        </Tooltip>
+        <BaseIcon
+            :title="`设置(${settingStore.shortcutKeyMap[ShortcutKey.OpenSetting]})`"
+            @click="runtimeStore.showSettingModal = true"
+            icon="uil:setting"/>
       </div>
     </div>
-    <div class="content overflow-auto">
+    <BaseIcon
+        class="fixed top-5 left-6 z-9"
+        :title="`收起(${settingStore.shortcutKeyMap[ShortcutKey.OpenSetting]})`"
+        @click="settingStore.showSide = !settingStore.showSide"
+        icon="formkit:right"/>
+    <div class="flex-1 z-1">
       <router-view></router-view>
     </div>
   </div>
@@ -60,11 +82,8 @@ const router = useRouter()
 
 <style scoped lang="scss">
 .layout {
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   display: flex;
 }
 
@@ -81,6 +100,8 @@ const router = useRouter()
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  box-shadow: rgb(0 0 0 / 3%) 0px 0px 12px 0px;
+  transition: all .3s;
 
   .row {
     @apply cursor-pointer;
@@ -95,6 +116,10 @@ const router = useRouter()
       font-size: 2rem;
     }
   }
+
+  &.hide {
+    transform: translateX(-12rem);
+  }
 }
 
 .content {
diff --git a/src/pages/pc/practice/Footer.vue b/src/pages/pc/practice/Footer.vue
index e3577f79..e89800df 100644
--- a/src/pages/pc/practice/Footer.vue
+++ b/src/pages/pc/practice/Footer.vue
@@ -85,7 +85,7 @@ onUnmounted(() => {
   margin-top: 1rem;
 
   &.hide {
-    margin-bottom: -7rem;
+    margin-bottom: -6rem;
     margin-top: 3rem;
 
     .progress {
diff --git a/src/pages/pc/practice/Panel.vue b/src/pages/pc/practice/Panel.vue
index 8188fbfa..1b66823b 100644
--- a/src/pages/pc/practice/Panel.vue
+++ b/src/pages/pc/practice/Panel.vue
@@ -86,7 +86,7 @@ const showCollectToggleButton = $computed(() => {
 </script>
 <template>
   <Transition name="fade">
-    <div class="panel anim" v-show="settingStore.showPanel || 1">
+    <div class="panel anim" v-show="settingStore.showPanel ">
       <header>
         <div class="tabs">
           <div class="tab" :class="tabIndex === 0 && 'active'" @click="tabIndex = 0">当前</div>
diff --git a/src/pages/pc/practice/Statistics.vue b/src/pages/pc/practice/Statistics.vue
index 0891bc07..0aef6a31 100644
--- a/src/pages/pc/practice/Statistics.vue
+++ b/src/pages/pc/practice/Statistics.vue
@@ -54,69 +54,62 @@ const isEnd = $computed(() => {
   <Dialog
       :header="false"
       v-model="statModalIsOpen">
-    <div class="statistics">
+    <div class="statistics relative flex flex-col gap-6">
       <header>
-        <div class="title">{{ store.currentDict.name }}</div>
+        <div class="text-2xl">{{ store.currentStudyWordDict.name }}</div>
       </header>
-      <div class="content">
-        <div class="rings">
-          <Ring
-              :value="currentStat.correctRate + '%'"
-              desc="正确率"
-              :percentage="currentStat.correctRate"/>
-          <Ring
-              :value="currentStat.wrongWordNumber"
-              desc="错误数"
-              :percentage="0"
-          />
-          <Ring
-              :value="currentStat.inputWordNumber"
-              desc="输入数"
-              :percentage="0"
-          />
-          <Ring
-              :value="currentStat.total"
-              desc="单词总数"
-              :percentage="0"
-              style="margin-bottom: 0;"/>
+      <div class="flex justify-center gap-10">
+        <div class="text-xl text-center flex flex-col justify-around">
+          <div class="font-bold">非常棒!</div>
+          <div>坚持了 <span class="color-green font-bold text-2xl">10</span> 分钟</div>
         </div>
-        <div class="result">
-          <div class="wrong-words-wrapper">
-            <div class="wrong-words">
-              <div class="word" v-for="i in currentStat.wrongWords">{{ i.word }}</div>
-              <!--                          <div class="word" v-for="i in 100">{{ i }}</div>-->
-            </div>
-          </div>
-          <div class="notice" v-if="!currentStat.wrongWords.length">
-            <!--          <div class="notice">-->
-            <Icon class="hvr-grow pointer" icon="flat-color-icons:like" width="20" color="#929596"/>
-            表现不错，全对了！
+        <Ring
+            :value="currentStat.wrongWordNumber"
+            desc="New"
+            :percentage="10"
+        />
+      </div>
+      <div class="flex justify-center gap-10">
+        <div class="flex justify-center items-center py-3 px-10 rounded-md color-red-500 flex-col"
+             style="background: rgb(254,236,236)">
+          <div class="text-3xl">3</div>
+          <div class="center gap-2">
+            <Icon icon="iconamoon:close" class="text-2xl"/>
+            错词
           </div>
         </div>
-        <div class="shares">
-          <Tooltip title="分享给朋友">
-            <Icon class="hvr-grow pointer" icon="ph:share-light" width="20" color="#929596"/>
-          </Tooltip>
-          <Tooltip title="请我喝杯咖啡">
-            <Icon class="hvr-grow pointer" icon="twemoji:teacup-without-handle" width="20" color="#929596"/>
-          </Tooltip>
+        <div class="flex justify-center items-center py-3 px-10 rounded-md color-green-600 flex-col"
+             style="background: rgb(231,248,241)">
+          <div class="text-3xl">3</div>
+          <div class="center gap-2">
+            <Icon icon="tabler:check" class="text-2xl"/>
+            正确
+          </div>
         </div>
       </div>
+      <div class="absolute right-5 top-20 flex flex-col gap-4">
+        <Tooltip title="分享给朋友">
+          <Icon class="hvr-grow pointer" icon="ph:share-light" width="20" color="#929596"/>
+        </Tooltip>
+        <Tooltip title="请我喝杯咖啡">
+          <Icon class="hvr-grow pointer" icon="twemoji:teacup-without-handle" width="20" color="#929596"/>
+        </Tooltip>
+      </div>
       <div class="footer">
         <BaseButton
             :keyboard="settingStore.shortcutKeyMap[ShortcutKey.DictationChapter]"
             @click="options('write')">
-          默写本章
+          默写
         </BaseButton>
         <BaseButton
             :keyboard="settingStore.shortcutKeyMap[ShortcutKey.RepeatChapter]"
             @click="options('repeat')">
-          重复本章
+          重学
         </BaseButton>
         <BaseButton
             :keyboard="settingStore.shortcutKeyMap[ShortcutKey.NextChapter]"
             @click="options('next')">
-          {{ isEnd ? '重新练习' : '下一章' }}
+          {{ isEnd ? '重新练习' : '继续' }}
         </BaseButton>
       </div>
     </div>
@@ -131,7 +124,6 @@ $dark-second-bg: rgb(60, 63, 65);
 $item-hover: rgb(75, 75, 75);
 
 .statistics {
-  width: 60rem;
   padding: var(--space);
   background: $dark-second-bg;
   border-radius: $card-radius;
@@ -153,49 +145,6 @@ $item-hover: rgb(75, 75, 75);
     gap: var(--space);
     margin-bottom: 1rem;
 
-    .result {
-      box-sizing: border-box;
-      overflow: hidden;
-      height: 30rem;
-      display: flex;
-      flex-direction: column;
-      border-radius: $card-radius;
-      background: $item-hover;
-      flex: 1;
-
-      .wrong-words-wrapper {
-        flex: 1;
-        overflow: auto;
-        padding: var(--space);
-      }
-
-      .wrong-words {
-        box-sizing: border-box;
-        display: flex;
-        margin-right: .3rem;
-        flex-wrap: wrap;
-        gap: .6rem;
-        align-items: flex-start;
-
-        .word {
-          display: inline-block;
-          border-radius: .4rem;
-          padding: .3rem 1rem;
-          background: $dark-second-bg;
-        }
-      }
-
-      .notice {
-        $main: rgb(64,158,255);
-        background: $main;
-        height: 2.5rem;
-        display: flex;
-        gap: .6rem;
-        align-items: center;
-        padding-left: var(--space);
-      }
-    }
-
     .shares {
       display: flex;
       flex-direction: column;
diff --git a/src/pages/pc/practice/practice-word/TypingWord.vue b/src/pages/pc/practice/practice-word/TypingWord.vue
index 579f344d..d2bc7df6 100644
--- a/src/pages/pc/practice/practice-word/TypingWord.vue
+++ b/src/pages/pc/practice/practice-word/TypingWord.vue
@@ -256,7 +256,7 @@ onUnmounted(() => {
         <Tooltip
             :title="`下一个(${settingStore.shortcutKeyMap[ShortcutKey.Next]})`"
         >
-          <div class="word" :class="settingStore.dictation && 'text-shadow'">{{ nextWord.word }}</div>
+          <div class="word" :class="settingStore.dictation && 'word-shadow'">{{ nextWord.word }}</div>
         </Tooltip>
         <Icon class="arrow" icon="bi:arrow-right" width="22"/>
       </div>
diff --git a/src/pages/pc/word/StudyWord.vue b/src/pages/pc/word/StudyWord.vue
index 2af3c7e4..70dac1e5 100644
--- a/src/pages/pc/word/StudyWord.vue
+++ b/src/pages/pc/word/StudyWord.vue
@@ -192,13 +192,14 @@ useStartKeyboardEventListener()
 .practice-wrapper {
   font-size: 0.9rem;
   width: 100%;
-  height: 100%;
+  height: 100vh;
   display: flex;
+  overflow: hidden;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
   //padding-right: var(--practice-wrapper-padding-right);
-  transform: translateX(var(--practice-wrapper-translateX));
+  //transform: translateX(var(--practice-wrapper-translateX));
 }
 
 
diff --git a/src/stores/setting.ts b/src/stores/setting.ts
index e2b9d775..9c64d4b5 100644
--- a/src/stores/setting.ts
+++ b/src/stores/setting.ts
@@ -36,6 +36,7 @@ export interface SettingState {
     wordTranslateFontSize: number,
   },
   showPanel: boolean,
+  showSide: boolean,
   theme: string,
   collapse: boolean,
   chapterWordNumber: number,
@@ -48,6 +49,7 @@ export const DefaultSettingState = (): SettingState => ({
   showToolbar: true,
   show: false,
   showPanel: true,
+  showSide: true,
 
   allSound: true,
   wordSound: true,