diff --git a/src/App.vue b/src/App.vue
index 9f3f391f..5230e0aa 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -66,10 +66,8 @@ onMounted(() => {
 </script>
 
 <template>
-  <Transition name="fade">
-    <Backgorund v-if="settingStore.theme === 'dark'"/>
-  </Transition>
-  <div class="main-page">
+  <Backgorund/>
+  <div class="main-page anim">
     <Practice/>
     <!--    <AddArticle/>-->
     <!--      <Side/>-->
@@ -80,7 +78,7 @@ onMounted(() => {
 @import "@/assets/css/variable";
 
 .main-page {
-  position: absolute;
+  position: relative;
   z-index: 1;
   width: 100%;
   height: 100%;
@@ -88,6 +86,5 @@ onMounted(() => {
   font-size: 14rem;
   display: flex;
   justify-content: center;
-  background-color: var(--color-background);
 }
 </style>
diff --git a/src/assets/css/anim.scss b/src/assets/css/anim.scss
index 3e661d51..21486847 100644
--- a/src/assets/css/anim.scss
+++ b/src/assets/css/anim.scss
@@ -18,7 +18,7 @@
 
 .fade-enter-active,
 .fade-leave-active {
-  transition: all 0.3s ease;
+  transition: all .3s ease;
 }
 
 .fade-enter-from,
diff --git a/src/assets/css/style.scss b/src/assets/css/style.scss
index d374600f..7da563ee 100644
--- a/src/assets/css/style.scss
+++ b/src/assets/css/style.scss
@@ -39,7 +39,7 @@
 html.dark {
   //--color-main-bg: rgba(0, 5, 24, 1);
   //--color-main-bg: rgba(17,24,39, 1);
-  --color-background: transparent;
+  //--color-background: transparent;
   --color-main-bg: rgba(14, 18, 23, 1);
   //--color-main-bg: rgba(30,31,34, 1);
   --color-second-bg: rgb(43, 45, 48);
@@ -112,9 +112,9 @@ html.dark {
   }
 }
 
-$anim-time: 0.3s;
+$anim-time: .3s;
 .anim {
-  transition: background $anim-time, color $anim-time;
+  transition: background $anim-time, color $anim-time, border $anim-time;
 }
 
 html, body {
diff --git a/src/components/Article/EditArticle.vue b/src/components/Article/EditArticle.vue
index 5ad7dec5..2cf50102 100644
--- a/src/components/Article/EditArticle.vue
+++ b/src/components/Article/EditArticle.vue
@@ -374,7 +374,7 @@ defineExpose({save, getEditArticle: () => cloneDeep(editArticle)})
 @import "@/assets/css/style.scss";
 
 .content {
-  color: black;
+  color: var(--color-font-1);
   flex: 1;
   display: flex;
   gap: var(--space);
diff --git a/src/components/Backgorund.vue b/src/components/Backgorund.vue
index 11531c51..e682caef 100644
--- a/src/components/Backgorund.vue
+++ b/src/components/Backgorund.vue
@@ -1,15 +1,19 @@
 <template>
   <div id="background" class="anim">
     <img src="@/assets/img/moon.png" alt="" id="moon" style="display:none">
-    <canvas ref="canvas"/>
+    <Transition name="fade">
+      <canvas ref="canvas" v-show="settingStore.theme === 'dark'"/>
+    </Transition>
   </div>
 </template>
 
 <script setup lang="ts">
 
 import {onMounted} from "vue"
+import {useSettingStore} from "@/stores/setting.ts";
 
 const canvas = $ref<HTMLCanvasElement>()
+const settingStore = useSettingStore()
 
 onMounted(() => {
   // console.log('canvas;', canvas)
diff --git a/src/components/Practice/Footer.vue b/src/components/Practice/Footer.vue
index 563287ea..7503011d 100644
--- a/src/components/Practice/Footer.vue
+++ b/src/components/Practice/Footer.vue
@@ -34,8 +34,8 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="footer" :class="!settingStore.showToolbar && 'hide'">
-    <div class="bottom">
+  <div class="footer " :class="!settingStore.showToolbar && 'hide'">
+    <div class="bottom anim">
       <el-progress
           :percentage="progress"
           :stroke-width="8"
diff --git a/src/components/Practice/Options.vue b/src/components/Practice/Options.vue
index d9b96201..cb8bb83e 100644
--- a/src/components/Practice/Options.vue
+++ b/src/components/Practice/Options.vue
@@ -27,13 +27,6 @@ const settingStore = useSettingStore()
 
 <template>
   <div class="options">
-    <Tooltip v-if="showEdit" :title="`编辑(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.EditArticle]})`">
-      <IconWrapper>
-        <Icon icon="tabler:edit" class="menu"
-              @click="emit('edit')"/>
-      </IconWrapper>
-    </Tooltip>
-
     <BaseIcon
         v-if="!isSimple"
         class-name="collect"
diff --git a/src/components/Practice/Panel.vue b/src/components/Practice/Panel.vue
index d3a31f4b..e05efb9c 100644
--- a/src/components/Practice/Panel.vue
+++ b/src/components/Practice/Panel.vue
@@ -52,7 +52,7 @@ const {
 </script>
 <template>
   <Transition name="fade">
-    <div class="panel" v-show="settingStore.showPanel">
+    <div class="panel anim" v-show="settingStore.showPanel">
       <header>
         <Transition name="fade">
           <Tooltip
diff --git a/src/components/Practice/Practice.vue b/src/components/Practice/Practice.vue
index e8f6dc49..b5f11043 100644
--- a/src/components/Practice/Practice.vue
+++ b/src/components/Practice/Practice.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import Toolbar from "@/components/Toolbar/Toolbar.vue"
+import Toolbar from "@/components/toolbar/Toolbar.vue"
 import {onMounted, onUnmounted, watch} from "vue";
 import {usePracticeStore} from "@/stores/practice.ts";
 import Footer from "@/components/Practice/Footer.vue";
@@ -164,7 +164,6 @@ onUnmounted(() => {
     <PracticeWord ref="practiceRef" v-else/>
     <Footer/>
   </div>
-  <!--  <AddWordDialog></AddWordDialog>-->
   <DictModal/>
   <SettingDialog v-if="runtimeStore.showSettingModal" @close="runtimeStore.showSettingModal = false"/>
   <Statistics/>
diff --git a/src/components/Practice/PracticeArticle/PracticeArticle.vue b/src/components/Practice/PracticeArticle/PracticeArticle.vue
index 1f4d35fd..350d5f63 100644
--- a/src/components/Practice/PracticeArticle/PracticeArticle.vue
+++ b/src/components/Practice/PracticeArticle/PracticeArticle.vue
@@ -1,7 +1,16 @@
 <script setup lang="ts">
 import {$ref} from "vue/macros";
 import TypingArticle from "./TypingArticle.vue";
-import {Article, ArticleWord, DefaultArticle, DefaultWord, DisplayStatistics, TranslateType, Word} from "@/types.ts";
+import {
+  Article,
+  ArticleWord,
+  DefaultArticle,
+  DefaultWord,
+  DisplayStatistics,
+  ShortcutKey,
+  TranslateType,
+  Word
+} from "@/types.ts";
 import {cloneDeep} from "lodash-es";
 import TypingWord from "@/components/Practice/PracticeWord/TypingWord.vue";
 import Panel from "../Panel.vue";
@@ -17,6 +26,7 @@ import IconWrapper from "@/components/IconWrapper.vue";
 import {Icon} from "@iconify/vue";
 import Tooltip from "@/components/Tooltip.vue";
 import {useRuntimeStore} from "@/stores/runtime.ts";
+import {useSettingStore} from "@/stores/setting.ts";
 
 const store = useBaseStore()
 const practiceStore = usePracticeStore()
@@ -150,15 +160,15 @@ function saveArticle(val: Article) {
 }
 
 function edit(val: Article) {
-  tabIndex = 1
-  wordData.words = [
-    {
-      ...cloneDeep(DefaultWord),
-      name: 'test'
-    }
-  ]
-  wordData.index = 0
-  return
+  // tabIndex = 1
+  // wordData.words = [
+  //   {
+  //     ...cloneDeep(DefaultWord),
+  //     name: 'test'
+  //   }
+  // ]
+  // wordData.index = 0
+  // return
   editArticle = val
   showEditArticle = true
 }
@@ -211,6 +221,10 @@ function changePracticeArticle(val: Article) {
     store.currentDict.chapterIndex = rIndex
   }
 }
+
+defineExpose({getCurrentPractice})
+const settingStore = useSettingStore()
+
 </script>
 
 <template>
@@ -243,7 +257,7 @@ function changePracticeArticle(val: Article) {
       <Panel v-if="tabIndex === 0">
         <template v-slot="{active}">
           <div class="panel-page-item">
-            <header>
+            <div class="list-header">
               <div class="left">
                 <Tooltip title="切换词典">
                   <IconWrapper>
@@ -253,11 +267,18 @@ function changePracticeArticle(val: Article) {
                 <div class="title">
                   {{ store.dictTitle }}
                 </div>
+                <Tooltip
+                    :title="`下一章(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.NextChapter]})`"
+                    v-if="store.currentDict.chapterIndex < store.currentDict.articles.length - 1">
+                  <IconWrapper>
+                    <Icon @click="emitter.emit(EventKey.next)" icon="octicon:arrow-right-24"/>
+                  </IconWrapper>
+                </Tooltip>
               </div>
               <div class="right">
                 {{ store.currentDict.articles.length }}篇文章
               </div>
-            </header>
+            </div>
             <ArticleList
                 :isActive="active"
                 @select-item="changePracticeArticle"
diff --git a/src/components/Practice/PracticeArticle/TypingArticle.vue b/src/components/Practice/PracticeArticle/TypingArticle.vue
index 1cf73929..ea5d54a9 100644
--- a/src/components/Practice/PracticeArticle/TypingArticle.vue
+++ b/src/components/Practice/PracticeArticle/TypingArticle.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import {computed, nextTick, onMounted, onUnmounted, watch} from "vue"
 import {$computed, $ref} from "vue/macros";
-import {Article, ArticleWord, DefaultArticle, ShortcutKeyMap, Word} from "@/types";
+import {Article, ArticleWord, DefaultArticle, ShortcutKey, ShortcutKeyMap, Word} from "@/types";
 import {useBaseStore} from "@/stores/base";
 import {usePracticeStore} from "@/stores/practice.ts";
 import {useSettingStore} from "@/stores/setting.ts";
@@ -10,6 +10,10 @@ import {useOnKeyboardEventListener} from "@/hooks/event.ts";
 import {cloneDeep} from "lodash-es";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
 import Options from "@/components/Practice/Options.vue";
+import {Icon} from "@iconify/vue";
+import IconWrapper from "@/components/IconWrapper.vue";
+import Tooltip from "@/components/Tooltip.vue";
+import BaseIcon from "@/components/BaseIcon.vue";
 
 interface IProps {
   article: Article,
@@ -375,12 +379,29 @@ function toggleCollect() {
       <div class="title">{{ props.article.title }}</div>
       <div class="titleTranslate" v-if="settingStore.translate">{{ props.article.titleTranslate }}</div>
       <div class="options-wrapper">
-        <Options
-            :show-edit="true"
-            @edit="emit('edit',props.article)"
-            @collect="toggleCollect"
-            @skip="emit('next')"
-        />
+        <div class="flex gap10">
+          <BaseIcon
+              :title="`编辑(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.EditArticle]})`"
+              icon="tabler:edit"
+              @click="emit('edit',props.article)"
+          />
+          <BaseIcon
+              v-if="!false"
+              class-name="collect"
+              @click="$emit('toggleCollect')"
+              :title="`收藏(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.ToggleCollect]})`"
+              icon="ph:star"/>
+          <BaseIcon
+              v-else
+              class-name="fill"
+              @click="toggleCollect"
+              :title="`取消收藏(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.ToggleCollect]})`"
+              icon="ph:star-fill"/>
+          <BaseIcon
+              :title="`跳过(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.Next]})`"
+              icon="icon-park-outline:go-ahead"
+              @click="emit('over')"/>
+        </div>
       </div>
     </header>
     <div class="article-content" ref="articleWrapperRef">
diff --git a/src/components/Practice/PracticeWord/TypingWord.vue b/src/components/Practice/PracticeWord/TypingWord.vue
index 0f7a277f..d5f0806d 100644
--- a/src/components/Practice/PracticeWord/TypingWord.vue
+++ b/src/components/Practice/PracticeWord/TypingWord.vue
@@ -288,7 +288,7 @@ onUnmounted(() => {
                   </div>
                   <Tooltip
                       :title="`下一章(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.NextChapter]})`"
-                      v-if="store.currentDict.chapterIndex < store.currentDict.chapterWords.length - 1 && !store.isArticle">
+                      v-if="store.currentDict.chapterIndex < store.currentDict.chapterWords.length - 1">
                     <IconWrapper>
                       <Icon @click="emitter.emit(EventKey.next)" icon="octicon:arrow-right-24"/>
                     </IconWrapper>
diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue
index 99fb0b68..05710c64 100644
--- a/src/components/dialog/Dialog.vue
+++ b/src/components/dialog/Dialog.vue
@@ -310,7 +310,7 @@ $header-height: 60rem;
 
       .content {
         width: 350rem;
-        color: black;
+        color: var(--color-font-1);
         padding: 4rem 24rem 24rem;
       }
     }
diff --git a/src/components/dialog/DictDiglog.vue b/src/components/dialog/DictDiglog.vue
index e36c436a..0a77e16e 100644
--- a/src/components/dialog/DictDiglog.vue
+++ b/src/components/dialog/DictDiglog.vue
@@ -7,7 +7,7 @@ import {chunk, cloneDeep, groupBy, reverse, shuffle} from "lodash-es";
 import {$computed, $ref} from "vue/macros";
 import BaseButton from "@/components/BaseButton.vue";
 import {Icon} from '@iconify/vue';
-import DictGroup from "@/components/Toolbar/DictGroup.vue";
+import DictGroup from "@/components/toolbar/DictGroup.vue";
 import {v4 as uuidv4} from "uuid";
 import {ActivityCalendar} from "vue-activity-calendar";
 import "vue-activity-calendar/style.css";
@@ -24,6 +24,7 @@ import {FormInstance, FormRules} from "element-plus";
 import Empty from "@/components/Empty.vue";
 import BaseIcon from "@/components/BaseIcon.vue";
 import Dialog from "@/components/dialog/Dialog.vue";
+import EditBatchArticleModal from "@/components/Article/EditBatchArticleModal.vue";
 
 const store = useBaseStore()
 const settingStore = useSettingStore()
@@ -822,6 +823,7 @@ onMounted(() => {
     </div>
   </Dialog>
   <WordListDialog/>
+  <EditBatchArticleModal/>
 </template>
 
 <style scoped lang="scss">
diff --git a/src/components/Toolbar/Add.vue b/src/components/toolbar/Add.vue
similarity index 86%
rename from src/components/Toolbar/Add.vue
rename to src/components/toolbar/Add.vue
index baecdfc7..576eb406 100644
--- a/src/components/Toolbar/Add.vue
+++ b/src/components/toolbar/Add.vue
@@ -3,7 +3,6 @@
 import {Icon} from "@iconify/vue";
 import IconWrapper from "@/components/IconWrapper.vue";
 import Tooltip from "@/components/Tooltip.vue";
-import EditBatchArticleModal from "@/components/Article/EditBatchArticleModal.vue";
 import {$ref} from "vue/macros";
 
 let show = $ref(false)
@@ -23,7 +22,6 @@ function toggle() {
         />
       </IconWrapper>
     </Tooltip>
-    <EditBatchArticleModal/>
   </div>
 </template>
 
diff --git a/src/components/Toolbar/ChapterName.vue b/src/components/toolbar/ChapterName.vue
similarity index 100%
rename from src/components/Toolbar/ChapterName.vue
rename to src/components/toolbar/ChapterName.vue
diff --git a/src/components/Toolbar/DictGroup.vue b/src/components/toolbar/DictGroup.vue
similarity index 100%
rename from src/components/Toolbar/DictGroup.vue
rename to src/components/toolbar/DictGroup.vue
diff --git a/src/components/Toolbar/FeedbackModal.vue b/src/components/toolbar/FeedbackModal.vue
similarity index 100%
rename from src/components/Toolbar/FeedbackModal.vue
rename to src/components/toolbar/FeedbackModal.vue
diff --git a/src/components/Toolbar/RepeatSetting.vue b/src/components/toolbar/RepeatSetting.vue
similarity index 100%
rename from src/components/Toolbar/RepeatSetting.vue
rename to src/components/toolbar/RepeatSetting.vue
diff --git a/src/components/Toolbar/Toolbar.vue b/src/components/toolbar/Toolbar.vue
similarity index 95%
rename from src/components/Toolbar/Toolbar.vue
rename to src/components/toolbar/Toolbar.vue
index 9f8afd60..8777b526 100644
--- a/src/components/Toolbar/Toolbar.vue
+++ b/src/components/toolbar/Toolbar.vue
@@ -2,21 +2,21 @@
 import Tooltip from "@/components/Tooltip.vue"
 import useTheme from "@/hooks/useTheme.ts"
 import {useBaseStore} from "@/stores/base.ts"
-import FeedbackModal from "@/components/Toolbar/FeedbackModal.vue"
+import FeedbackModal from "@/components/toolbar/FeedbackModal.vue"
 
 import {Icon} from '@iconify/vue';
 
 import IconWrapper from "@/components/IconWrapper.vue";
 import {watch} from "vue"
-import VolumeSetting from "@/components/Toolbar/VolumeSetting.vue";
-import RepeatSetting from "@/components/Toolbar/RepeatSetting.vue";
-import TranslateSetting from "@/components/Toolbar/TranslateSetting.vue";
+import VolumeSetting from "@/components/toolbar/VolumeSetting.vue";
+import RepeatSetting from "@/components/toolbar/RepeatSetting.vue";
+import TranslateSetting from "@/components/toolbar/TranslateSetting.vue";
 import {useSettingStore} from "@/stores/setting.ts";
 import {usePracticeStore} from "@/stores/practice.ts";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {$ref} from "vue/macros";
 import {ShortcutKey} from "@/types.ts";
-import ChapterName from "@/components/Toolbar/ChapterName.vue";
+import ChapterName from "@/components/toolbar/ChapterName.vue";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
 
 const {toggleTheme} = useTheme()
@@ -60,7 +60,7 @@ watch(() => store.load, n => {
 </script>
 
 <template>
-  <header ref="headerRef">
+  <header ref="headerRef" class="anim">
     <div class="content">
       <div class="dict-name">
         <Tooltip
@@ -213,7 +213,6 @@ header {
   z-index: 2;
   padding: 10rem var(--space);
   box-sizing: border-box;
-  transition: all .3s;
   gap: 10rem;
   border: 1px solid var(--color-item-border);
 
diff --git a/src/components/Toolbar/TranslateSetting.vue b/src/components/toolbar/TranslateSetting.vue
similarity index 100%
rename from src/components/Toolbar/TranslateSetting.vue
rename to src/components/toolbar/TranslateSetting.vue
diff --git a/src/components/Toolbar/VolumeSetting.vue b/src/components/toolbar/VolumeSetting.vue
similarity index 100%
rename from src/components/Toolbar/VolumeSetting.vue
rename to src/components/toolbar/VolumeSetting.vue