diff --git a/.gitignore b/.gitignore
index 9824385..40615e7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,7 @@
 node_modules
 /dist
 /test
+page/
 
 # local env files
 .env.local
diff --git a/components.d.ts b/components.d.ts
index 25fe594..fdfcad7 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -28,8 +28,11 @@ declare module 'vue' {
     ElStep: typeof import('element-plus/es')['ElStep']
     ElSteps: typeof import('element-plus/es')['ElSteps']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
+    ElText: typeof import('element-plus/es')['ElText']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
diff --git a/src/App.vue b/src/App.vue
index 14164ab..2327efe 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -30,120 +30,6 @@ const go = (path: string) => {
 }
 </script>
 
-<style>
-@media screen and (max-width: 500px) {
-  .pconly {
-    display: none;
-  }
-
-  @keyframes enter {
-    0% {
-      translate: 100px 0;
-      opacity: 0;
-    }
-
-    100% {
-      translate: 0 0;
-      opacity: 1;
-    }
-  }
-}
-
-@media screen and (min-width: 500px) {
-  .mbonly {
-    display: none;
-  }
-
-  @keyframes enter {
-    0% {
-      translate: 100px 0;
-      opacity: 0;
-      /* filter: blur(20px); */
-    }
-
-    100% {
-      translate: 0 0;
-      opacity: 1;
-      /* filter: blur(0px); */
-    }
-  }
-}
-
-#app{
-  transition: .5s;
-}
-
-html {
-  --bg-color-solid:#e8e8e8;
-  --bg-color: #ffffffae;
-  --text-color: #464646;
-  --bd-color: #bbbbbb99;
-}
-
-html.dark {
-  --bg-color-solid:#191919;
-  --bg-color: #2a2a2a88;
-  --text-color: #c0c0c0;
-  --bd-color: #7f7f7f7c;
-  --navi-bg-color: #131313e2;
-}
-
-.container {
-  height: calc(100% - 20px);
-  width: calc(100% - 20px);
-  /* padding: 20px; */
-  animation: enter ease-out .6s backwards;
-}
-
-.colbox {
-  display: flex;
-  flex-direction: row;
-}
-
-.rowbox {
-  display: flex;
-  flex-direction: column;
-}
-
-.card {
-  border-radius: 8px;
-  border: solid 1px var(--bd-color);
-  padding: 20px;
-  margin: 10px;
-  color: var(--text-color);
-  transition: .5s;
-}
-
-.card:hover {
-  box-shadow: var(--el-box-shadow);
-}
-
-html.bgimged .card {
-  background-color: var(--bg-color);
-  backdrop-filter: blur(15px);
-}
-
-.btn {
-  cursor: pointer;
-}
-
-.mid-text {
-  width: 65px;
-  transform: translate(0, 6px);
-  color: var(--text-color);
-  margin-right: 5px;
-  margin-left: 5px;
-}
-
-.para {
-  margin: 15px;
-}
-
-.blured {
-  filter: blur(10px);
-}
-</style>
-
 <style scoped>
 @media screen and (max-width: 500px) {
   #navibar {
diff --git a/src/components/UI/CDialog.vue b/src/components/UI/CDialog.vue
index 8e73104..f778111 100644
--- a/src/components/UI/CDialog.vue
+++ b/src/components/UI/CDialog.vue
@@ -13,7 +13,7 @@
 
 <script setup lang="ts">
 import { ref, watch, nextTick, onMounted } from 'vue'
-import "@/style/cui.scss"
+import "@/styles/cui.css"
 
 const props = defineProps<{
     visible: boolean,
@@ -52,7 +52,7 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 #mask {
     z-index: 500;
     position: absolute;
diff --git a/src/main.ts b/src/main.ts
index 574bbd8..7e17e6e 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,6 +5,7 @@ import "element-plus/dist/index.css";
 import "element-plus/theme-chalk/dark/css-vars.css";
 import { useDarkMode } from "./composables/useDarkMode";
 import router from "./router";
+import "./styles/global.css";
 
 // Vuetify
 import "vuetify/styles";
diff --git a/src/md/about.md b/src/md/about.md
index 3e615d7..116bd63 100644
--- a/src/md/about.md
+++ b/src/md/about.md
@@ -4,31 +4,38 @@
 
 ## 1. wordIn 是什么
 
-wordIn 是一款基于 vue.js 的单词默写器，致力于为用户提供便捷有效的单词记忆方式  
+wordIn 是一款基于 vue.js 的单词默写器，致力于为用户提供便捷有效的单词记忆方式
 
 ## 2.获取源代码
 
-wordIn 的前端代码已经开源 [Git Repository](https://git.zjueva.net/cast1e/wordIn)  
+wordIn 的前端代码已经开源 [Git Repository](https://git.zjueva.net/cast1e/wordIn)
 ！！需要从浙江大学内网访问
 
 如果有获取后端代码的需求请联系作者
 
 ## 3.联系作者
 
-- 通过电子邮件  
-  - <rooger@zju.edu.cn>
-  - <rooger233@gmail.com>  
+- 通过电子邮件
+  - [rooger@zju.edu.cn](mailto:rooger@zju.edu.cn)
+  - [rooger233@gmail.com](mailto:rooger233@gmail.com)
 - 通过QQ
-  - 1176075089  
+  - 1176075089
 
 ## 3.更新日志
 
+### 1.02
+
+1. 更新内容
+   - 使用 Vite 构建，更加现代化
+   - 使用 TypeScript 解析，减少错误
+   - 优化了启动速度，精简了代码
+2. 抱歉鸽了这么久，在这期间我也学会了很多新的技能，认识了很多新的朋友，感谢 ACEE 的各位！
+
 ### 1.0.2 Beta 2
 
 1. 更新内容
 
    - 减小了打包体积
-
 2. Bug修复进度
 
    - （解决中）自定义背景
@@ -40,13 +47,12 @@ wordIn 的前端代码已经开源 [Git Repository](https://git.zjueva.net/cast1
 
    - 重写对话框组件
    - 增加了一些单词本管理功能
-
 2. Bug修复进度
 
    - （解决中）自定义背景
    - （解决中）移动端UI错位问题
 
-### 1.0.1 Release  
+### 1.0.1 Release
 
 #### 1.0.1 是wordIn第一个正式版
 
@@ -58,7 +64,6 @@ wordIn 的前端代码已经开源 [Git Repository](https://git.zjueva.net/cast1
    - 重写了主页
    - 优化了过渡动画
    - 优化了全局变量管理
-
 2. Bug修复进度
 
    - （已修复）背诵时插入导致指针归位
@@ -75,7 +80,7 @@ wordIn 的前端代码已经开源 [Git Repository](https://git.zjueva.net/cast1
 - 封装网络请求
 - 其他源码优化
 
-### 1.0  
+### 1.0
 
 #### 1.0 及之前的版本汇总
 
@@ -83,6 +88,6 @@ wordIn 的前端代码已经开源 [Git Repository](https://git.zjueva.net/cast1
 
    - 1.0是整个项目的开始，项目包括前端界面（/），运维管理界面（/manage），后端服务器。
 
-## 4.开发者的话  
+## 4.开发者的话
 
 整个项目的开发已经有半年了，在这期间我为 wordIn 花费了很多时间和精力，也收获了很多。希望 wordIn 能够帮助到大家的英语学习，祝各位大英都能满绩！
diff --git a/src/styles/cui.css b/src/styles/cui.css
new file mode 100644
index 0000000..a073fd7
--- /dev/null
+++ b/src/styles/cui.css
@@ -0,0 +1,35 @@
+@keyframes cui-dialog-appear {
+    0% {
+        /* opacity: 0%; */
+        transform: translate(-50%, -50%) scale(0.7);
+    }
+
+    100% {
+        /* opacity: 100%; */
+        transform: translate(-50%, -50%) scale(1);
+    }
+}
+
+@keyframes cui-dialog-disappear {
+    0% {
+        opacity: 100%;
+        transform: translate(-50%, -50%) scale(1);
+    }
+
+    100% {
+        opacity: 0%;
+        transform: translate(-50%, -50%) scale(0.5);
+    }
+}
+
+@keyframes cui-dialog-blur {
+    0% {
+        opacity: 0%;
+        /* backdrop-filter: blur(0px); */
+    }
+
+    100% {
+        opacity: 100%;
+        /* backdrop-filter: blur(10px); */
+    }
+}
\ No newline at end of file
diff --git a/src/styles/global.css b/src/styles/global.css
new file mode 100644
index 0000000..9955608
--- /dev/null
+++ b/src/styles/global.css
@@ -0,0 +1,111 @@
+@media screen and (max-width: 500px) {
+  .pconly {
+    display: none;
+  }
+
+  @keyframes enter {
+    0% {
+      translate: 100px 0;
+      opacity: 0;
+    }
+
+    100% {
+      translate: 0 0;
+      opacity: 1;
+    }
+  }
+}
+
+@media screen and (min-width: 500px) {
+  .mbonly {
+    display: none;
+  }
+
+  @keyframes enter {
+    0% {
+      translate: 100px 0;
+      opacity: 0;
+      /* filter: blur(20px); */
+    }
+
+    100% {
+      translate: 0 0;
+      opacity: 1;
+      /* filter: blur(0px); */
+    }
+  }
+}
+
+#app {
+  transition: 0.5s;
+}
+
+html {
+  --bg-color-solid: #e8e8e8;
+  --bg-color: #ffffffae;
+  --text-color: #464646;
+  --bd-color: #bbbbbb99;
+}
+
+html.dark {
+  --bg-color-solid: #191919;
+  --bg-color: #2a2a2a88;
+  --text-color: #c0c0c0;
+  --bd-color: #7f7f7f7c;
+  --navi-bg-color: #131313e2;
+}
+
+.container {
+  height: calc(100% - 20px);
+  width: calc(100% - 20px);
+  /* padding: 20px; */
+  animation: enter ease-out 0.6s backwards;
+}
+
+.colbox {
+  display: flex;
+  flex-direction: row;
+}
+
+.rowbox {
+  display: flex;
+  flex-direction: column;
+}
+
+.card {
+  border-radius: 8px;
+  border: solid 1px var(--bd-color);
+  padding: 20px;
+  margin: 10px;
+  color: var(--text-color);
+  transition: 0.5s;
+}
+
+.card:hover {
+  box-shadow: var(--el-box-shadow);
+}
+
+html.bgimged .card {
+  background-color: var(--bg-color);
+  backdrop-filter: blur(15px);
+}
+
+.btn {
+  cursor: pointer;
+}
+
+.mid-text {
+  width: 65px;
+  transform: translate(0, 6px);
+  color: var(--text-color);
+  margin-right: 5px;
+  margin-left: 5px;
+}
+
+.para {
+  margin: 15px;
+}
+
+.blured {
+  filter: blur(10px);
+}
diff --git a/src/types/markdown.d.ts b/src/types/markdown.d.ts
new file mode 100644
index 0000000..f5214e5
--- /dev/null
+++ b/src/types/markdown.d.ts
@@ -0,0 +1,13 @@
+declare module "*.vue" {
+  import type { ComponentOptions } from "vue";
+
+  const Component: ComponentOptions;
+  export default Component;
+}
+
+declare module "*.md" {
+  import type { ComponentOptions } from "vue";
+
+  const Component: ComponentOptions;
+  export default Component;
+}
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 6582ccf..7c12ca3 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.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.02 Beta 2 <br/> 更新时间:2024年1月11日 5:07 PM</div>
+                <div>当前版本: 1.02 <br/> 更新时间:2025年3月6日 10:35 PM</div>
             </div>
             <div style="flex-grow: 1;align-items: center;" class="colbox card">
                 <router-link to="/select" class="button">