diff --git a/index.html b/index.html
index 2de72b3..d05b8c6 100644
--- a/index.html
+++ b/index.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh-CN">
 <head>
   <meta charset="UTF-8">
     <link rel="icon" type="image/svg+xml" href="/vite.svg"/>
-    <link href="/src/reset.css" type="text/css">
+    <link rel="stylesheet" href="/src/reset.css" type="text/css">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Vite App</title>
+  <title>LionWebsite</title>
 </head>
 <body>
   <div id="app"></div>
diff --git a/src/App.vue b/src/App.vue
index 46d8922..1d3bee4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,14 +4,28 @@ import DashBoard from "./components/DashBoard.vue";
 </script>
 
 <template>
-  <div class="app">
-    <el-container>
-      <el-aside width="750px">
-        <Side/>
-      </el-aside>
-      <el-main>
-        <DashBoard/>
-      </el-main>
-    </el-container>
-  </div>
+  <el-container class="app-layout">
+    <el-aside width="720px" class="side-area">
+      <Side/>
+    </el-aside>
+    <el-main class="main-area">
+      <DashBoard/>
+    </el-main>
+  </el-container>
 </template>
+
+<style>
+.app-layout {
+  height: 100vh;
+}
+.side-area {
+  overflow: hidden;
+  border-right: 1px solid var(--border-color);
+  background: var(--bg-surface);
+}
+.main-area {
+  padding: 0;
+  overflow: hidden;
+  background-color: var(--bg-body);
+}
+</style>
diff --git a/src/components/DashBoard.vue b/src/components/DashBoard.vue
index 528e8bd..8c94ffa 100644
--- a/src/components/DashBoard.vue
+++ b/src/components/DashBoard.vue
@@ -1,45 +1,66 @@
 <template>
-  <div class="DashBoard" v-show="loadComplete">
-    <span>本周已用额度:{{weekUsed.weekUsedAmount}} 上次重置时间:{{weekUsed.lastResetAmountTime}}</span><br>
-    <el-button @click="queryWeekUsedAmount">查询用量</el-button>
-    <hr>
-    <el-row>
-      <el-col>
-       查询参数类型: <el-select style="width: 125px" v-model="type" @change="resetLocalQuery()">
+  <!-- Auth Screen -->
+  <div v-show="!loadComplete" class="auth-container">
+    <div class="auth-card">
+      <h1>LionWebsite</h1>
+      <p class="auth-subtitle">请输入授权码以访问下载管理器</p>
+      <div class="auth-form">
+        <el-input v-model="AuthCode" placeholder="请输入授权码" size="large" />
+        <el-checkbox v-model="isRemember">记住授权码</el-checkbox>
+        <el-button @click="validate" type="primary" size="large" @keydown.enter="validate" class="auth-btn">验证</el-button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Dashboard Main -->
+  <div v-show="loadComplete" class="dashboard">
+    <div class="control-card">
+      <h3>用量统计</h3>
+      <div class="card-row">
+        <span class="usage-text">本周已用: <b>{{ weekUsed.weekUsedAmount }}</b> | 上次重置: {{ weekUsed.lastResetAmountTime }}</span>
+        <el-button @click="queryWeekUsedAmount" size="small">查询用量</el-button>
+      </div>
+    </div>
+
+    <div class="control-card">
+      <h3>查询任务</h3>
+      <div class="card-row">
+        <el-select v-model="type" @change="resetLocalQuery" size="small" style="width: 90px">
           <el-option value="link" label="链接"/>
           <el-option value="keyword" label="关键字"/>
         </el-select>
-        <el-input style="width: 200px;" v-model="param">
-          <template #prepend>
-            参数:
-          </template>
-        </el-input>
-      </el-col>
-      <el-col>
-        <el-button @click="queryRemoteTask" v-show="type === 'link'">远程查询</el-button>
-        <el-button @click="queryLocalTask">当前页查询</el-button>
-      </el-col>
-    </el-row>
-    <br>
-    <hr>
-    <el-button @click="isAlterAuthCode = true">修改授权码</el-button>
-    <el-button @click="deleteAuthCode">删除本地授权码</el-button>
-    <el-button @click="isConfig = true">配置</el-button>
-    <span style="display: inline">夜间模式</span>
-    <el-switch @click="toggleStyle" v-model="isDark">夜间模式</el-switch>
-    <hr>
-    <el-button @click="isQuerying = true">在线搜索</el-button>
-    <el-button @click="reconnect">重连节点</el-button>
-    <hr>
-    <el-button v-if="isLion" @click="resetUndone">重置任务</el-button>
-    <div v-show="thumbnailGallery.thumb_link !== undefined">
-      <span>
-        {{thumbnailGallery.shortName}}<br>
-      </span><br>
-      <picture>
-        <el-image :src="thumbnailGallery.thumb_link" :preview-src-list="[thumbnailGallery.thumb_link, ]" class="preview"
-        style="width: 300px; height: 250px" fit="contain"/>
-      </picture>
+        <el-input v-model="param" size="small" placeholder="输入参数" style="width: 160px" />
+        <el-button @click="queryRemoteTask" v-show="type === 'link'" size="small">远程查询</el-button>
+        <el-button @click="queryLocalTask" size="small">当前页查询</el-button>
+      </div>
+    </div>
+
+    <div class="control-card">
+      <h3>管理</h3>
+      <div class="card-row">
+        <el-button @click="isAlterAuthCode = true" size="small">修改授权码</el-button>
+        <el-button @click="deleteAuthCode" size="small">删除授权码</el-button>
+        <el-button @click="isConfig = true" size="small">配置</el-button>
+        <span style="font-size:13px;color:var(--text-secondary)">夜间模式</span>
+        <el-switch v-model="isDark" @change="toggleStyle" size="small" />
+      </div>
+    </div>
+
+    <div class="control-card">
+      <h3>系统</h3>
+      <div class="card-row">
+        <el-button @click="isQuerying = true" size="small">在线搜索</el-button>
+        <el-button @click="reconnect" size="small">重连节点</el-button>
+        <el-button v-if="isLion" @click="resetUndone" size="small">重置任务</el-button>
+      </div>
+    </div>
+
+    <div v-show="thumbnailGallery.thumb_link !== undefined" class="control-card card-wide">
+      <h3>缩略图</h3>
+      <div class="thumbnail-body">
+        <p class="gallery-name">{{ thumbnailGallery.shortName }}</p>
+        <el-image :src="thumbnailGallery.thumb_link" :preview-src-list="[thumbnailGallery.thumb_link]" style="width:100%;height:500px" fit="contain" />
+      </div>
     </div>
   </div>
 
@@ -130,12 +151,6 @@
       <el-button type="primary" @click="saveConfig">保存</el-button>
     </template>
   </el-dialog>
-
-  <div class="DashBoard" v-show="!loadComplete">
-      <el-input v-model="AuthCode" placeholder="请输入授权码" style="padding-top: 200px"/> <br>
-      <el-checkbox v-model="isRemember">是否记住授权码</el-checkbox>
-      <el-button @click="validate" type="primary" @keydown.enter="validate" style="margin-left: 50px">验证</el-button>
-  </div>
 </template>
 
 <script setup>
@@ -145,7 +160,6 @@ import {ElMessage} from "element-plus"
 import HentaiSearch from "./HentaiSearch.vue";
 import {validateLink} from "../utils/validate.js";
 
-//授权码相关
 let AuthCode = ref("")
 let isRemember = ref(false)
 let isAlterAuthCode = ref(false)
@@ -162,7 +176,6 @@ let category = ref("")
 let sortType = ref("")
 let galleryNameType = ref("")
 
-//查询相关
 let type = ref("link")
 let param = ref("")
 
@@ -191,18 +204,15 @@ let isLion = computed(() => {
   return store.state.userId === 3
 })
 
-// 查询弹窗打开时重置表单
 watch(chosenGallery, () => {
   param.value = ''
   targetResolution.value = ''
 })
 
-//重连节点
 function reconnect(){
   store.dispatch("reconnect")
 }
 
-//修改授权码
 function alterAuthCode(){
   if(newAuthCode.value.trim() === "" || tempAuthCode.value.trim() === "" || newAuthCode.value !== tempAuthCode.value)
     ElMessage("请检查授权码输入是否错误")
@@ -213,11 +223,11 @@ function alterAuthCode(){
     tempAuthCode.value = ""
   }
 }
-//查询用量
+
 function queryWeekUsedAmount(){
   store.dispatch("loadWeekUsedAmount")
 }
-//提交任务
+
 function postTask(){
   if(!validateLink(chosenGallery.value.link)){
     ElMessage("链接错误")
@@ -232,7 +242,6 @@ function postTask(){
               targetResolution: targetResolution.value})
 }
 
-//查询任务
 function queryRemoteTask(){
   if(!validateLink(param.value)){
     ElMessage("链接错误")
@@ -262,7 +271,6 @@ function deleteGallery(){
   store.dispatch("deleteGallery", chosenGallery.value.gid)
 }
 
-//验证授权码
 function validate(){
   if(AuthCode.value.trim() === ""){
     ElMessage("请输入授权码后再验证")
@@ -274,12 +282,10 @@ function validate(){
   }
 }
 
-//在线阅读以及展示缩略图
 function readOnlineGallery(gallery){
   store.dispatch("readOnlineGallery", gallery)
 }
 
-//重新给节点发送未完成任务
 function resetUndone(){
   store.dispatch("resetUndone").then()
 }
@@ -289,9 +295,9 @@ function deleteAuthCode(){
 }
 function toggleStyle(){
   if(isDark.value)
-    dark()
+    document.documentElement.classList.add('dark')
   else
-    light()
+    document.documentElement.classList.remove('dark')
 }
 
 onMounted(() => {
@@ -315,34 +321,18 @@ function adjustForStyle(){
   if(darkConfigStr !== null) {
     darkConfig.value = JSON.parse(darkConfigStr)
     if (darkConfig.value.followSystem && isSystemDark())
-      dark()
+      document.documentElement.classList.add('dark')
     else
-      light()
+      document.documentElement.classList.remove('dark')
   }else {
-    light()
+    document.documentElement.classList.remove('dark')
     darkConfig.value = {'followSystem': false}
   }
+  isDark.value = document.documentElement.classList.contains('dark')
 }
 function isSystemDark(){
   return window.matchMedia('(prefers-color-scheme: dark)').matches
 }
-function dark(){
-  isDark.value = true
-  let html = document.querySelector("html")
-  if(!html.classList.contains("dark"))
-    html.classList.add('dark')
-  document.querySelector(".DashBoard").style.setProperty("background-color", null)
-  document.querySelector(".app").style.setProperty("background-color", null)
-}
-function light(){
-  isDark.value = false
-  let html = document.querySelector("html")
-  if(html.classList.contains("dark"))
-    html.classList.remove('dark')
-
-  document.querySelector(".DashBoard").style.setProperty("background-color", "ghostwhite")
-  document.querySelector(".app").style.setProperty("background-color", "#c6e2ff")
-}
 function saveConfig(){
   if(lengthPerPage.value < 0 || lengthPerPage.value > 30) {
     ElMessage("分页页数设置错误，范围1~30")
@@ -367,12 +357,4 @@ function saveConfig(){
 </script>
 
 <style scoped>
-  .DashBoard{
-    width: auto;
-    height: 92vh;
-    text-align: center;
-  }
-  .el-input{
-    width: 200px;
-  }
 </style>
\ No newline at end of file
diff --git a/src/components/HentaiSearch.vue b/src/components/HentaiSearch.vue
index c74791d..4ffa0f8 100644
--- a/src/components/HentaiSearch.vue
+++ b/src/components/HentaiSearch.vue
@@ -108,12 +108,14 @@ function close(){
 }
 
 .loading {
+  display: inline-block;
   width: 25px;
   height: 25px;
   border: 2px solid #ccc;
   border-top-color: #3498db;
   border-radius: 50%;
   animation: spin 1s linear infinite;
+  vertical-align: middle;
 }
 
 @keyframes spin {
diff --git a/src/components/OnlineReader.vue b/src/components/OnlineReader.vue
index 63c5f44..f20a235 100644
--- a/src/components/OnlineReader.vue
+++ b/src/components/OnlineReader.vue
@@ -133,6 +133,3 @@ function set_current_page(page){
   </el-dialog>
 </template>
 
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/components/Side.vue b/src/components/Side.vue
index 033ea52..a3e6bc0 100644
--- a/src/components/Side.vue
+++ b/src/components/Side.vue
@@ -1,7 +1,8 @@
 <template>
-  <div class="side" style="width: 100%">
+  <div class="side-table-wrapper">
     <div  v-show="loadComplete" class="load_complete">
       <el-table :data="currentTasks"
+                :height="tableHeight"
                 :empty-text="emptyText"
                 :row-key="gallery=>gallery.gid"
                 class="table"
@@ -10,28 +11,30 @@
 
         <el-table-column type="expand">
           <template #default="props">
-            名字:{{ props.row.name}} <br>
-            链接:<el-link :href="props.row.link">链接</el-link> <br>
-            语言:{{props.row.language}} <br>
-            页数:{{props.row.pages}} <br>
-            文件大小:{{props.row.fileSize}}<br>
-            分辨率:{{props.row.resolution}}<br>
-            任务创建时间:{{props.row.createTimeDisplay}}<br>
-            <span v-show="isLion">
-              downloader:{{props.row.downloader}}
-            </span>
+            <div class="detail-info">
+              名字:{{ props.row.name}} <br>
+              链接:<el-link :href="props.row.link">链接</el-link> <br>
+              语言:{{props.row.language}} <br>
+              页数:{{props.row.pages}} <br>
+              文件大小:{{props.row.fileSize}}<br>
+              分辨率:{{props.row.resolution}}<br>
+              任务创建时间:{{props.row.createTimeDisplay}}<br>
+              <span v-show="isLion">
+                downloader:{{props.row.downloader}}
+              </span>
+            </div>
 
             <el-button @click="deleteGallery(props.row.gid)" :disabled="props.row.status !== '下载完成'">删除</el-button>
           </template>
         </el-table-column>
 
-        <el-table-column label="名字" width="300vw">
+        <el-table-column label="名字" min-width="200">
           <template #default="scoped">
             {{galleryNameType === 'shortName' ? scoped.row.shortName: scoped.row.name}}
           </template>
         </el-table-column>
 
-        <el-table-column label="操作" width="300vw">
+        <el-table-column label="操作" width="280">
           <template #default="scoped">
             <span>
               <el-button @click="downloadTask(scoped.row.download)" :disabled="scoped.row.status !== '下载完成'">下载</el-button>
@@ -90,7 +93,7 @@
     </div>
     <OnlineReader/>
 
-    <span v-show="!loadComplete" class="side">请输入授权码后再查看</span>
+    <span v-show="!loadComplete" class="loading-text">请输入授权码后再查看</span>
   </div>
 </template>
 
@@ -129,6 +132,8 @@ let currentTasks = computed(() => {
   return store.getters.currentTasks ? store.getters.currentTasks: null
 })
 
+let tableHeight = computed(() => 'calc(100vh - 130px)')
+
 let min = computed(() => {
   return store.getters.min
 })
@@ -230,22 +235,40 @@ function showThumbnail(gallery){
 }
 </script>
 
-<style>
-  .side{
-    text-align: center;
-    height: 300px;
+<style scoped>
+  .side-table-wrapper {
+    height: 100%;
+    padding: 16px;
+    box-sizing: border-box;
   }
-  span{
+
+  .loading-text {
     display: block;
+    text-align: center;
+    padding-top: 200px;
+    color: var(--text-secondary, #86909c);
+    font-size: 14px;
   }
-  .pageChanger{
-    margin-top: 5vh;
+
+  .pageChanger {
+    margin-top: 24px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
   }
-  .el-select{
-    width: 135px;
-  }
-  .page{
+
+  .page {
     display: inline-block;
     width: 50px;
+    cursor: pointer;
+    text-align: center;
+  }
+
+  .detail-info {
+    line-height: 1.8;
+  }
+  .detail-info > span {
+    display: block;
   }
 </style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index a49f0fd..9e41418 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,5 +4,6 @@ import 'element-plus/dist/index.css'
 import element from "element-plus"
 import "./reset.css"
 import 'element-plus/theme-chalk/dark/css-vars.css'
+import "./styles/theme.css"
 
 createApp(App).use(element).mount('#app')
