diff --git a/run.sh b/run.sh
new file mode 100644
index 00000000..357f618b
--- /dev/null
+++ b/run.sh
@@ -0,0 +1,23 @@
+#!/bin/bash
+
+# Function to stop the services
+stop_services() {
+    echo "Stopping services..."
+    pkill -f "npm run server"
+    pkill -f "flask --app=api run"
+    exit
+}
+
+# Trap signals to stop services
+trap stop_services SIGINT SIGTERM
+
+# Start the frontend service
+cd web
+npm run server &
+
+# Start the backend service
+cd ../src
+flask --app=api run &
+
+# Wait for all background jobs to finish
+wait
diff --git a/src/api.py b/src/api.py
index e2afe7fb..b12d389b 100644
--- a/src/api.py
+++ b/src/api.py
@@ -4,7 +4,7 @@ from flask import Flask, jsonify, Response, request
 from flask_cors import CORS
 from dotenv import load_dotenv
 from core import HistoryManager
-from core import PreRetrieval
+from core import Retriever
 from config import Config
 from models import select_model
 from utils.logging_config import setup_logger
@@ -16,7 +16,7 @@ logger = setup_logger("server")
 
 config = Config("config/base.yaml")
 model = select_model(config)
-pre_retrieval = PreRetrieval(config)
+retriever = Retriever(config)
 
 
 apps = Flask(__name__)# 这段代码是为了解决跨域问题，Flask默认不支持跨域
@@ -39,27 +39,17 @@ def page_not_found(e):
 def chat_get():
     return "Chat Get!"
 
-
 @apps.route('/chat', methods=['POST'])
 def chat():
     request_data = json.loads(request.data)
     query = request_data['query']
     logger.debug(f"Web query: {query}")
 
-    external = ""
-    if config.enable_knowledge_base:
-        kb_res = pre_retrieval.search(query)
-        if kb_res:
-            kb_res = "\n".join([f"{r['id']}: {r['entity']['text']}" for r in kb_res])
-            kb_res = f"知识库信息: {kb_res}"
-            external += kb_res
-
-    if len(external) > 0:
-        query = f"以下是参考资料：\n\n\n {external} 请根据前面的知识回答：{query}"
-
+    new_query, refs = retriever(query)
 
     history_manager = HistoryManager(request_data['history'])
-    messages = history_manager.add_user(query)
+    messages = history_manager.get_history_with_msg(new_query)
+    history_manager.add_user(query)
     logger.debug(f"Web history: {history_manager}")
 
     def generate_response():
@@ -68,14 +58,27 @@ def chat():
             content += delta.content
             response_chunk = json.dumps({
                 "history": history_manager.update_ai(content),
-                "response": content
+                "response": content,
+                "refs": refs  # TODO: 优化 refs，不需要每次都返回
             }, ensure_ascii=False).encode('utf8') + b'\n'
             yield response_chunk
 
     return Response(generate_response(), content_type='application/json', status=200)
 
+@apps.route('/call', methods=['POST'])
+def call():
+    request_data = json.loads(request.data)
+    query = request_data['query']
+    logger.debug(f"Web query: {query}")
+    response = model.predict(query, stream=False)
+
+    return jsonify({
+        "response": response.content,
+    })
+
+
 
 if __name__ == '__main__':
     print("Starting model...")
     apps.secret_key = os.urandom(24)
-    apps.run(host='0.0.0.0', port=8000, debug=False, threaded=True)
\ No newline at end of file
+    apps.run(host='0.0.0.0', port=8000, debug=True, threaded=True)
\ No newline at end of file
diff --git a/src/cli.py b/src/cli.py
index 351c03d4..a342846f 100644
--- a/src/cli.py
+++ b/src/cli.py
@@ -23,9 +23,7 @@ if __name__ == "__main__":
             break
 
         # 检索结果
-        refs = retriever(query)
-        # 重新构建用户的输入
-        query = retriever.construct_query(query, refs)
+        query, refs = retriever(query)
 
         messages = history_manager.add_user(query)
         response = model.predict(messages, stream=config.stream)
diff --git a/src/core/history.py b/src/core/history.py
index 02be4631..42075438 100644
--- a/src/core/history.py
+++ b/src/core/history.py
@@ -25,6 +25,12 @@ class HistoryManager():
             self.add_ai(content)
             return self.messages
 
+    def get_history_with_msg(self, msg, role="user"):
+        """Get history with new message, but not append it to history."""
+        history = self.messages[:]
+        history.append({"role": role, "content": msg})
+        return history
+
     def __str__(self):
         history_str = ""
         for message in self.messages:
diff --git a/src/core/retriever.py b/src/core/retriever.py
index a995ba38..93e56bed 100644
--- a/src/core/retriever.py
+++ b/src/core/retriever.py
@@ -47,4 +47,6 @@ class Retriever:
         raise NotImplementedError
 
     def __call__(self, query):
-        return self.retrieval(query)
\ No newline at end of file
+        refs = self.retrieval(query)
+        query = self.construct_query(query, refs)
+        return query, refs
\ No newline at end of file
diff --git a/web/package-lock.json b/web/package-lock.json
index 3f215a9c..5882e438 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -15,6 +15,7 @@
         "echarts": "^5.4.2",
         "echarts-gl": "^2.0.9",
         "less": "^4.1.3",
+        "marked": "^13.0.2",
         "pinia": "^2.0.32",
         "vue": "^3.2.47",
         "vue-router": "^4.1.6"
@@ -2153,6 +2154,17 @@
         "semver": "bin/semver"
       }
     },
+    "node_modules/marked": {
+      "version": "13.0.2",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-13.0.2.tgz",
+      "integrity": "sha512-J6CPjP8pS5sgrRqxVRvkCIkZ6MFdRIjDkwUwgJ9nL2fbmM6qGQeB2C16hi8Cc9BOzj6xXzy0jyi0iPIfnMHYzA==",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/mime": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
diff --git a/web/package.json b/web/package.json
index 08311526..470c2647 100644
--- a/web/package.json
+++ b/web/package.json
@@ -18,6 +18,7 @@
     "echarts": "^5.4.2",
     "echarts-gl": "^2.0.9",
     "less": "^4.1.3",
+    "marked": "^13.0.2",
     "pinia": "^2.0.32",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6"
diff --git a/web/public/jnu.png b/web/public/jnu.png
new file mode 100644
index 00000000..3994f25b
Binary files /dev/null and b/web/public/jnu.png differ
diff --git a/web/src/App.vue b/web/src/App.vue
index df62e07c..98240aef 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,79 +1,3 @@
-<script setup>
-import { KeepAlive } from 'vue'
-import { RouterLink, RouterView, useRoute } from 'vue-router'
-
-// 打印当前页面的路由信息，使用 vue3 的 setup composition API
-const route = useRoute()
-console.log(route)
-
-
-
-</script>
-
 <template>
-  <header class="header">
-    <nav class="nav">
-      <RouterLink to="/" class="nav-item" active-class="active">主页</RouterLink>
-      <RouterLink to="/chat" class="nav-item" active-class="active">问答</RouterLink>
-      <!-- <RouterLink to="/kg" class="nav-item" active-class="active">图谱</RouterLink> -->
-      <!-- <RouterLink to="/knowledge" class="nav-item" active-class="active">知识</RouterLink> -->
-      <!-- <RouterLink to="/about" class="nav-item" active-class="active">关于</RouterLink> -->
-    </nav>
-  </header>
-
-    <router-view v-slot="{ Component }">
-      <keep-alive>
-        <component :is="Component" />
-      </keep-alive>
-    </router-view>
+  <router-view />
 </template>
-
-<style lang="less" scoped>
-.header {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 40px 0;
-}
-
-.nav {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: relative;
-  height: 45px;
-}
-
-.nav-item {
-  padding: 8px 16px;
-  border: none;
-  border-radius: 4px;
-  background-color: transparent;
-  color: #333;
-  font-size: 16px;
-  transition: background-color 0.2s ease-in-out;
-  margin: 0 10px;
-}
-
-.nav-item:hover {
-  background-color: #e2eef3;
-  cursor: pointer;
-}
-
-.nav-item.active {
-  font-weight: bold;
-  color: #005f77;
-}
-
-.nav-item.active::after {
-  content: '';
-  position: absolute;
-  display: block;
-  width: 2rem;
-  // left: 0;
-  height: 2px;
-  background-color: #005f77;
-  margin-top: 4px;
-  // z-index: 10;
-}
-</style>
diff --git a/web/src/assets/base.css b/web/src/assets/base.css
index 733cd7d5..906ad372 100644
--- a/web/src/assets/base.css
+++ b/web/src/assets/base.css
@@ -34,6 +34,13 @@
   --color-text: var(--vt-c-text-light-1);
 
   --section-gap: 160px;
+
+  --main-color: #005f77;
+  --main-color-light: #007f96;
+  --main-color-dark: #004d5c;
+  --min-width: 400px;
+  --min-header-width: 80px;
+  --min-sider-width: 100px;
 }
 
 /* @media (prefers-color-scheme: dark) {
diff --git a/web/src/assets/main.css b/web/src/assets/main.css
index 2f6fe2cd..9005a704 100644
--- a/web/src/assets/main.css
+++ b/web/src/assets/main.css
@@ -1,10 +1,5 @@
 @import './base.css';
 
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 0 2rem;
-
-  font-weight: normal;
-  /* height: 100vh; */
-}
+:root {
+  --header-height: 60px;
+}
\ No newline at end of file
diff --git a/web/src/components/ChatComponent.vue b/web/src/components/ChatComponent.vue
new file mode 100644
index 00000000..fd37450f
--- /dev/null
+++ b/web/src/components/ChatComponent.vue
@@ -0,0 +1,470 @@
+<!-- ChatComponent.vue -->
+<template>
+  <div class="chat">
+    <div class="header">
+      <div class="header__left">
+        <div
+          v-if="!state.isSidebarOpen"
+          class="close nav-btn"
+          @click="state.isSidebarOpen = true"
+        >
+          <MenuOutlined />
+        </div>
+        <div
+          v-if="!state.isSidebarOpen"
+          class="newchat nav-btn"
+          @click="$emit('newconv')"
+        >
+          <FormOutlined />
+        </div>
+      </div>
+      <div class="header__right">
+        <div class="nav-btn text" @click="myAlert('未开发')">张文杰</div>
+      </div>
+    </div>
+    <div v-if="conv.messages.length == 0" class="chat-examples">
+      <h1>你好，我是 Athena 😊</h1>
+      <div class="opt">
+        <div
+          class="opt__button"
+          v-for="(exp, key) in examples"
+          :key="key"
+          @click="autoSend(exp)"
+        >
+          {{ exp }}
+        </div>
+      </div>
+    </div>
+    <div ref="chatBox" class="chat-box">
+      <div
+        v-for="message in conv.messages"
+        :key="message.id"
+        class="message-box"
+        :class="message.role"
+      >
+        <p v-if="message.role=='sent'" style="white-space: pre-line" class="message-text">{{ message.text }}</p>
+        <p v-else v-html="renderMarkdown(message.text)" class="message-md" ></p>
+      </div>
+    </div>
+    <div class="input-box">
+      <input
+        class="user-input"
+        v-model="conv.inputText"
+        @keydown.enter="sendMessage"
+        placeholder="输入问题……"
+      />
+      <a-button size="large" @click="sendMessage" :disabled="(!conv.inputText && !isStreaming)">
+        <template #icon> <SendOutlined v-if="!isStreaming" /> <LoadingOutlined v-else/> </template>
+      </a-button>
+    </div>
+    <p class="note">即便强如雅典娜也可能会出错，请注意辨别内容的可靠性</p>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref, onMounted, toRefs } from 'vue'
+import { SendOutlined, MenuOutlined, FormOutlined, LoadingOutlined } from '@ant-design/icons-vue'
+import { marked } from 'marked';
+
+const props = defineProps({
+  conv: Object,
+  state: Object
+})
+
+const emit = defineEmits(['renameTitle'])
+
+const { conv, state } = toRefs(props)
+const chatBox = ref(null)
+const isStreaming = ref(false)
+const examples = ref([
+  '写一个冒泡排序',
+  '介绍一下 MECT',
+  '介绍一下江南大学',
+  'A大于B，B小于C，A和C哪个大？',
+  '今天天气怎么样？'
+])
+
+marked.setOptions({
+  gfm: true,
+  breaks: true,
+  tables: true,
+  // 更多选项可以在 marked 文档中找到：https://marked.js.org/
+});
+
+const renameTitle = () => {
+  const prompt = '请用一个很短的句子关于下面的对话内容的主题起一个名字，不要带标点符号：'
+  const firstUserMessage = conv.value.messages[0].text
+  const firstAiMessage = conv.value.messages[1].text
+  const context = `${prompt}\n\n问题: ${firstUserMessage}\n\n回复: ${firstAiMessage}，主题是（一句话）：`
+  simpleCall(context).then((data) => {
+    emit('renameTitle', data.response.split("：")[0])
+  })
+}
+
+const myAlert = (message) => {
+  alert(message)
+}
+
+const renderMarkdown = (text) => {
+  return marked(text)
+}
+
+const scrollToBottom = () => {
+  setTimeout(() => {
+    chatBox.value.scrollTop = chatBox.value.scrollHeight - chatBox.value.clientHeight
+  }, 10)
+}
+
+const generateRandomHash = (length) => {
+    let chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
+    let hash = '';
+    for (let i = 0; i < length; i++) {
+        hash += chars.charAt(Math.floor(Math.random() * chars.length));
+    }
+    return hash;
+}
+
+const appendMessage = (message, role) => {
+  conv.value.messages.push({
+    id: generateRandomHash(16),
+    role,
+    text: message
+  })
+  scrollToBottom()
+}
+
+const appendUserMessage = (message) => {
+  conv.value.messages.push({
+    id: generateRandomHash(16),
+    role: 'sent',
+    text: message
+  })
+  scrollToBottom()
+}
+
+const appendAiMessage = (message, refs=null) => {
+  conv.value.messages.push({
+    id: generateRandomHash(16),
+    role: 'received',
+    text: message,
+    refs
+  })
+  scrollToBottom()
+}
+
+const updateMessage = (text, id) => {
+  const message = conv.value.messages.find((message) => message.id === id)
+  if (message) {
+    message.text = text
+  } else {
+    console.error('Message not found')
+  }
+  scrollToBottom()
+}
+
+
+const simpleCall = (message) => {
+  return new Promise((resolve, reject) => {
+    fetch('/api/call', {
+      method: 'POST',
+      body: JSON.stringify({
+        query: message,
+      }),
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    })
+    .then((response) => response.json())
+    .then((data) => resolve(data))
+    .catch((error) => reject(error))
+  })
+}
+
+const sendMessage = () => {
+  if (conv.value.inputText.trim()) {
+    isStreaming.value = true
+    appendUserMessage(conv.value.inputText)
+    const user_input = conv.value.inputText
+    var cur_res_id = null
+    conv.value.inputText = ''
+    fetch('/api/chat', {
+      method: 'POST',
+      body: JSON.stringify({
+        query: user_input,
+        history: conv.value.history,
+      }),
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    }).then((response) => {const reader = response.body.getReader()
+      const decoder = new TextDecoder()
+      let buffer = ''
+      // 逐步读取响应文本
+      const readChunk = () => {
+        return reader.read().then(({ done, value }) => {
+          if (done) {
+            console.log(conv.value)
+            console.log('Finished')
+            isStreaming.value = false
+            if (conv.value.messages.length === 2) {
+              renameTitle()
+            }
+            return
+          }
+
+          buffer += decoder.decode(value, { stream: true })
+          const message = buffer.trim().split('\n').pop()
+
+          try {
+            const data = JSON.parse(message)
+            if (cur_res_id === null) {
+              appendAiMessage(data.response, data.refs)
+              cur_res_id = conv.value.messages[conv.value.messages.length - 1].id
+            } else {
+              updateMessage(data.response, cur_res_id)
+            }
+            conv.value.history = data.history
+            buffer = ''
+          } catch (e) {
+            console.log(e)
+          }
+          return readChunk()
+        })
+      }
+      return readChunk()
+    })
+  } else {
+    console.log('Please enter a message')
+  }
+}
+
+const autoSend = (message) => {
+  conv.value.inputText = message
+  sendMessage()
+}
+
+const clearChat = () => {
+  conv.value.messages = []
+  conv.value.history = []
+}
+
+onMounted(() => {
+  scrollToBottom()
+})
+</script>
+
+<style lang="less" scoped>
+.chat {
+  width: 200px;
+  max-width: 1100px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  background: white;
+  position: relative;
+  box-sizing: border-box;
+  flex: 5 5 auto;
+}
+
+.chat div.header {
+  height: var(--header-height);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+}
+
+.chat div.header .header__left {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.nav-btn {
+  font-size: 1.2rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  color: #6D6D6D;
+  cursor: pointer;
+
+  &.text {
+    font-size: 1rem;
+    width: auto;
+    padding: 0.5rem 1rem;
+  }
+
+  &:hover {
+    background-color: #ECECEC;
+  }
+}
+
+
+div.chat-examples {
+  padding: 0 50px;
+  text-align: center;
+  position: absolute;
+  top: 20%;
+  width: 100%;
+  z-index: 100;
+}
+
+.chat-examples h1 {
+  margin-bottom: 20px;
+  font-size: 24px;
+  color: #333;
+}
+
+.opt {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 10px;
+}
+
+.opt__button {
+  background-color: white;
+  color: #222;
+  padding: 4px 1rem;
+  border-radius: 1rem;
+  cursor: pointer;
+  border: 2px solid white;
+  transition: background-color 0.3s;
+  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.05);
+
+  &:hover {
+    background-color: #fcfcfc;
+    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.chat-box {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.message-box {
+  max-width: 90%;
+  display: inline-block;
+  border-radius: 0.8rem;
+  margin: 0.8rem 0;
+  padding: 0.8rem;
+  user-select: text;
+  word-break: break-word;
+  font-size: 16px;
+  font-variation-settings: 'wght' 400, 'opsz' 10.5;
+  font-weight: 400;
+  box-sizing: border-box;
+  /* box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.12), 0px 1.6px 3.6px rgba(0, 0, 0, 0.16); */
+  /* animation: slideInUp 0.1s ease-in; */
+}
+
+.message-box.sent {
+  color: white;
+  background-color: #efefef;
+  line-height: 24px;
+  background: linear-gradient(45deg, var(--main-color-light) 10.79%, var(--main-color) 87.08%);
+  align-self: flex-end;
+}
+
+.message-box.received {
+  color: initial;
+  padding-top: 16px;
+  background-color: #f7f7f7;
+  text-align: left;
+  word-wrap: break-word;
+  margin-bottom: 0;
+  padding-bottom: 0;
+  text-align: justify;
+}
+
+p.message-text {
+  max-width: 100%;
+  word-wrap: break-word;
+  margin-bottom: 0;
+}
+
+p.message-md {
+  word-wrap: break-word;
+  margin-bottom: 0;
+}
+
+img.message-image {
+  max-width: 300px;
+  max-height: 50vh;
+  object-fit: contain;
+}
+
+.input-box {
+  width: calc(100% - 2rem);
+  max-width: calc(1100px - 2rem);
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  background-color: #F4F4F4;
+  border-radius: 2rem;
+  height: 3.5rem;
+  padding: 0.5rem;
+}
+
+input.user-input {
+  flex: 1;
+  height: 40px;
+  padding: 0.5rem 1rem;
+  background-color: transparent;
+  border: none;
+  font-size: 1.2rem;
+  margin: 0 0.6rem;
+  color: #111111;
+  font-size: 16px;
+  font-variation-settings: 'wght' 400, 'opsz' 10.5;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.ant-btn-icon-only {
+  font-size: 16px;
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  height: 2.5rem;
+  background-color: black;
+  border-radius: 3rem;
+  color: white;
+}
+
+button:disabled {
+  background: #D7D7D7;
+  cursor: not-allowed;
+}
+
+p.note {
+  width: 100%;
+  font-size: small;
+  text-align: center;
+  padding: 0rem;
+  color: #ccc;
+  margin: 4px 0;
+}
+
+/*
+@keyframes slideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+  */
+</style>
diff --git a/web/src/layouts/AppLayout.vue b/web/src/layouts/AppLayout.vue
new file mode 100644
index 00000000..f113e83d
--- /dev/null
+++ b/web/src/layouts/AppLayout.vue
@@ -0,0 +1,169 @@
+<script setup>
+import { KeepAlive } from 'vue'
+import { RouterLink, RouterView, useRoute } from 'vue-router'
+import {
+  MessageOutlined,
+  MessageFilled,
+  SettingOutlined,
+  SettingFilled,
+  BookOutlined,
+  BookFilled
+} from '@ant-design/icons-vue'
+
+// 打印当前页面的路由信息，使用 vue3 的 setup composition API
+const route = useRoute()
+console.log(route)
+</script>
+
+<template>
+  <div class="app-layout">
+    <div class="header">
+      <div class="logo">
+        <router-link to="/"><img src="/jnu.png"> </router-link>
+      </div>
+      <div class="nav">
+        <RouterLink to="/chat" class="nav-item" active-class="active">
+          <component :is="route.path === '/chat' ? MessageFilled : MessageOutlined" />
+        </RouterLink>
+        <RouterLink to="/knowledge" class="nav-item" active-class="active">
+          <component :is="route.path === '/knowledge' ? BookFilled : BookOutlined" />
+        </RouterLink>
+      </div>
+      <div class="fill" style="flex-grow: 1;"></div>
+      <RouterLink to="/setting" class="setting" active-class="active">
+        <component :is="route.path === '/setting' ? SettingFilled : SettingOutlined" />
+      </RouterLink>
+    </div>
+    <router-view v-slot="{ Component }" id="app-router-view">
+      <keep-alive>
+        <component :is="Component" />
+      </keep-alive>
+    </router-view>
+  </div>
+</template>
+
+<style lang="less" scoped>
+@import '@/assets/main.css';
+
+.app-layout {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+  min-width: var(--min-width);
+}
+
+div.header, #app-router-view {
+  height: 100%;
+  max-width: 100%;
+}
+
+#app-router-view {
+  flex: 1 1 auto;
+  overflow-y: auto;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 80px;
+  justify-content: flex-start;
+  align-items: center;
+  background-color: #F9F9F9;
+  height: 100%;
+  width: 80px;
+
+  & .logo {
+    width: 50px;
+    height: 50px;
+    margin: 20px 0;
+
+    img {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+    }
+
+    & > a {
+      text-decoration: none;
+      font-size: 24px;
+      font-weight: bold;
+      color: #333;
+    }
+  }
+}
+
+.header .nav {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  height: 45px;
+  gap: 16px;
+}
+
+.header .nav .nav-item {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 8px;
+  background-color: transparent;
+  color: #222;
+  font-size: 20px;
+  transition: background-color 0.2s ease-in-out;
+  margin: 0 10px;
+
+  &.active {
+    font-weight: bold;
+    color: var(--main-color);
+    background-color: #e2eef3;
+  }
+
+  &:hover {
+    background-color: #e2eef3;
+    cursor: pointer;
+  }
+}
+
+.header .setting {
+  font-size: 20px;
+  color: #333;
+  margin: 20px 0;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+@media (max-width: 768px) {
+  .app-layout {
+    flex-direction: column;
+  }
+
+  .app-layout div.header {
+    flex-direction: row;
+    width: 100%;
+    height: 60px;
+    padding: 0 20px;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .app-layout .nav {
+    flex-direction: row;
+    height: 100%;
+    width: 100%;
+    justify-content: center;
+    gap: 0;
+
+    .nav-item:hover {
+      background-color: transparent;
+    }
+
+    .nav-item.active {
+      background-color: transparent;
+    }
+  }
+}
+</style>
diff --git a/web/src/layouts/BlankLayout.vue b/web/src/layouts/BlankLayout.vue
new file mode 100644
index 00000000..e537769d
--- /dev/null
+++ b/web/src/layouts/BlankLayout.vue
@@ -0,0 +1,9 @@
+<template>
+  <div>
+    <router-view v-slot="{ Component }">
+      <keep-alive>
+        <component :is="Component" />
+      </keep-alive>
+    </router-view>
+  </div>
+</template>
diff --git a/web/src/router/index.js b/web/src/router/index.js
index e69a7e19..41507900 100644
--- a/web/src/router/index.js
+++ b/web/src/router/index.js
@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import AppLayout from '@/layouts/AppLayout.vue';
+import BlankLayout from '@/layouts/BlankLayout.vue';
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -7,21 +8,59 @@ const router = createRouter({
     {
       path: '/',
       name: 'home',
-      component: HomeView,
-      meta: { keepAlive: true }
+      component: BlankLayout,
+      children: [        {
+          path: '',
+          name: 'home',
+          component: import('../views/HomeView.vue'),
+          meta: { keepAlive: true }
+        }
+      ]
     },
     {
       path: '/chat',
       name: 'chat',
-      component: () => import('../views/ChatView.vue'),
-      meta: { keepAlive: true }
+      component: AppLayout,
+      children: [
+        {
+          path: '',
+          name: 'Chat',
+          component: import('../views/ChatView.vue'),
+          meta: { keepAlive: true }
+        }
+      ]
     },
-    // {
-    //   path: '/knowledge',
-    //   name: 'knowledge',
-    //   component: () => import('../views/KnowledgeView.vue'),
-    //   meta: { keepAlive: true }
-    // },
+    {
+      path: '/knowledge',
+      name: 'knowledge',
+      component: AppLayout,
+      children: [
+        {
+          path: '',
+          name: 'Knowledge',
+          component: import('../views/EmptyView.vue'),
+          meta: { keepAlive: true }
+        }
+      ]
+    },
+    {
+      path: '/setting',
+      name: 'setting',
+      component: AppLayout,
+      children: [
+        {
+          path: '',
+          name: 'setting',
+          component: import('../views/EmptyView.vue'),
+          meta: { keepAlive: true }
+        }
+      ]
+    },
+    {
+      path: '/:pathMatch(.*)*',
+      name: 'NotFound',
+      component: () => import('../views/NotFoundView.vue')
+    }
     // {
     //   path: '/kg',
     //   name: 'knowledge-graph',
diff --git a/web/src/views/ChatView.vue b/web/src/views/ChatView.vue
index 95362ead..33fc5373 100644
--- a/web/src/views/ChatView.vue
+++ b/web/src/views/ChatView.vue
@@ -1,411 +1,200 @@
 <template>
   <div class="chat-container">
-    <div class="chat">
-      <div ref="chatBox" class="chat-box">
-        <div
-          v-for="message in state.messages"
-          :key="message.id"
-          class="message-box"
-          :class="message.role"
-        >
-          <img v-if="message.filetype === 'image'" :src="message.url" class="message-image" alt="">
-          <p v-else style="white-space: pre-line" class="message-text">{{ message.text }}</p>
-        </div>
+    <div v-if="state.isSidebarOpen" class="conversations">
+      <div class="actions">
+        <div class="action new" @click="addNewConv"><FormOutlined /></div>
+        <div class="action close" @click="state.isSidebarOpen = false"><MenuOutlined /></div>
       </div>
-      <div class="input-box">
-        <a-button size="large" @click="clearChat">
-          <template #icon> <ClearOutlined /> </template>
-        </a-button>
-        <a-input
-          type="text"
-          class="user-input"
-          v-model:value="state.inputText"
-          @keydown.enter="sendMessage"
-          placeholder="输入问题……"
-        />
-        <a-button size="large" @click="sendMessage" :disabled="!state.inputText">
-          <template #icon> <SendOutlined /> </template>
-        </a-button>
+      <div class="conversation"
+        v-for="(state, index) in convs"
+        :key="index"
+        :class="{ active: curConvId === index }"
+        @click="goToConversation(index)">
+        <div class="conversation__title">{{ state.title }}</div>
+        <div class="conversation__delete" @click.prevent="delConv(index)"><DeleteOutlined /></div>
       </div>
     </div>
-    <!-- <div class="info">
-      <h1>{{ info.title }}</h1>
-
-      <p v-if="info.docs.length > 0" class="docs">{{ info.docs }}</p>
-
-      <img v-if="info.image && typeof info.image === 'string'" :src="info.image" class="info-image" alt="">
-      <div v-else-if="info.image && Array.isArray(info.image)">
-        <img v-for="(img, index) in info.image" :key="index" :src="img" class="info-image" alt="">
-      </div>
-
-      <p v-show="info.graph?.nodes?.length > 0"><b>关联图谱</b></p>
-      <div id="lite_graph" v-show="info.graph?.nodes?.length > 0"></div>
-      <a-collapse v-model:activeKey="state.activeKey" v-if="info.docs.length > 0" accordion>
-        <a-collapse-panel
-          v-for="(doc, index) in info.docs"
-          :key="index"
-          :header="'来源' + (index + 1) + '：' + doc.fileName"
-        >
-          <p>{{ doc.text }}</p>
-        </a-collapse-panel>
-      </a-collapse>
-      <p class="description" v-else-if="info.description && typeof info.description === 'string'">{{ info.description }}</p>
-      <div v-else-if="info.description && Array.isArray(info.description)">
-        <p class="description" v-for="(desc, index) in info.description" :key="index">{{ desc }}</p>
-      </div>
-    </div> -->
+    <ChatComponent
+      :conv="convs[curConvId]"
+      :state="state"
+      @rename-title="renameTitle"
+      @newconv="addNewConv"/>
   </div>
-
-  <p class="note">即便强如雅典娜也可能会出错，请注意辨别内容的可靠性</p>
 </template>
 
 <script setup>
-// import * as echarts from 'echarts';
-import { reactive, ref, onMounted } from 'vue'
-import { SendOutlined, ClearOutlined } from '@ant-design/icons-vue'
+import { reactive, ref, watch, onMounted } from 'vue'
+import { FormOutlined, MenuOutlined, DeleteOutlined } from '@ant-design/icons-vue'
+import ChatComponent from '@/components/ChatComponent.vue'
+
+const convs = reactive(JSON.parse(localStorage.getItem('chat-convs')) || [
+  {
+    id: 0,
+    title: '新对话',
+    history: [],
+    messages: [],
+    inputText: ''
+  },
+])
 
-// let myChart = null;
-const chatBox = ref(null)
 const state = reactive({
-  history: [],
-  messages: [],
-  activeKey: [],
-  inputText: ''
+  isSidebarOpen: true,
 })
 
-const default_info = {
-  title: '你好，我是 Project: Athena',
-  description: [
-    '基于特定领域知识图谱的问答系统，支持多轮对话，支持外部信息检索，你可以：',
-    '1. 图谱问答：输入问题，获取相关的答案',
-    '2. 多轮筛选：在对话页面，可以通过多轮对话筛选来缩小搜索范围。例如，可以根据实体、具体类别、类型等进行筛选，以快速找到所需的专业知识。',
-    '3. 知识图谱可视化：在知识图谱页面，用户可以通过可视化界面直观地了解实体之间的关系。可以缩放、平移和旋转图谱以查看不同层次的关系，还可以点击实体节点查看更多详细信息。',
-    '4. 实体相关信息查看：可以通过右侧知识图谱下方的相关信息查看实体所有出现的地方，帮助全面查询理解，更清晰全面。',
-  ],
-  image: [],
-  graph: null,
-  docs: []
-}
+const curConvId = ref(0)
 
-const info = reactive({
-  ...default_info
-})
-
-const scrollToBottom = () => {
-  setTimeout(() => {
-    chatBox.value.scrollTop = chatBox.value.scrollHeight - chatBox.value.clientHeight
-  }, 10) // 10ms 后滚动到底部
-}
-
-/**
- *
- * @param {*} message 消息内容
- * @param {*} role 消息
- */
-const appendMessage = (message, role) => {
-  state.messages.push({
-    id: state.messages.length + 1,
-    role,
-    text: message
-  })
-  scrollToBottom()
-}
-
-
-// const appendPicMessage = (pic, type) => {
-//   state.messages.push({
-//     id: state.messages.length + 1,
-//     type,
-//     filetype: "image",
-//     url: pic
-//   })
-//   scrollToBottom()
-// }
-
-const updateLastReceivedMessage = (message, id) => {
-  const lastReceivedMessage = state.messages.find((message) => message.id === id)
-  if (lastReceivedMessage) {
-    lastReceivedMessage.text = message
-  } else {
-    state.messages.push({
-      id,
-      type: 'received',
-      text: message
-    })
-  }
-  scrollToBottom()
-}
-
-const sendMessage = () => {
-  if (state.inputText.trim()) {
-    appendMessage(state.inputText, 'sent')
-    appendMessage('检索中……', 'received')
-    const user_input = state.inputText
-    const cur_res_id = state.messages[state.messages.length - 1].id
-    state.inputText = ''
-    fetch('/api/chat', {
-      method: 'POST',
-      body: JSON.stringify({
-        query: user_input,
-        history: state.history,
-      }),
-      headers: {
-        'Content-Type': 'application/json'
-      }
-    }).then((response) => {const reader = response.body.getReader()
-      const decoder = new TextDecoder()
-      let buffer = ''
-      // 逐步读取响应文本
-      const readChunk = () => {
-        return reader.read().then(({ done, value }) => {
-          if (done) {
-            console.log('Finished')
-            return
-          }
-
-          buffer += decoder.decode(value, { stream: true })
-          console.log(buffer)
-          const message = buffer.trim().split('\n').pop()
-          // 尝试解析 message
-          try {
-            const data = JSON.parse(message)
-            updateLastReceivedMessage(data.response, cur_res_id)
-            state.history = data.history
-            buffer = ''
-          } catch (e) {
-            console.log(e)
-          }
-
-          return readChunk()
-        })
-      }
-      return readChunk()
-    })
-  } else {
-    console.log('Please enter a message')
-  }
-}
-
-const getFormattedDocs = (docs) => {
-  const formattedDocs = docs.map((doc) => {
-    var match = /出处 \[(\d+)\] \[([^\]]*)\]\(([^\)]*)\) \n\n(.*)/g.exec(doc);
-    return {
-      index: match[1],
-      fileName: match[2],
-      link: match[3],
-      text: match[4].trim()
+const generateRandomHash = (length) => {
+    let chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
+    let hash = '';
+    for (let i = 0; i < length; i++) {
+        hash += chars.charAt(Math.floor(Math.random() * chars.length));
     }
+    return hash;
+}
+
+const renameTitle = (newTitle) => {
+  convs[curConvId.value].title = newTitle
+}
+
+const goToConversation = (index) => {
+  curConvId.value = index
+  console.log(convs[curConvId.value])
+}
+
+const addNewConv = () => {
+  curConvId.value = 0
+  if (convs.length > 0 && convs[0].messages.length === 0) {
+    return
+  }
+  convs.unshift({
+    id: generateRandomHash(8),
+    title: `新对话`,
+    history: [],
+    messages: [],
+    inputText: ''
   })
-  console.log(formattedDocs)
-  return formattedDocs
 }
 
-const sendDeafultMessage = () => {
-  appendMessage('你好？我是 Project: Athena，有什么可以帮你？😊', 'received')
+const delConv = (index) => {
+  convs.splice(index, 1)
+  if (index === curConvId.value) {
+    curConvId.value = 0
+  }
+
+  if (convs.length === 0) {
+    addNewConv()
+  }
 }
 
-const clearChat = () => {
-  state.messages = []
-  state.history = []
-  info.title = default_info.title
-  info.description = default_info.description
-  info.image = default_info.image
-  info.graph = default_info.graph
-  info.sents = default_info.sents
-  info.docs = default_info.docs
-  sendDeafultMessage()
-}
+// Watch convs and save to localStorage
+watch(
+  () => convs,
+  (newStates) => {
+    localStorage.setItem('chat-convs', JSON.stringify(newStates))
+  },
+  { deep: true }
+)
 
+// Load convs from localStorage on mount
 onMounted(() => {
-  sendDeafultMessage()
-
+  const savedSonvs = JSON.parse(localStorage.getItem('chat-convs'))
+  if (savedSonvs) {
+    for (let i = 0; i < savedSonvs.length; i++) {
+      convs[i] = savedSonvs[i]
+    }
+  }
 })
 </script>
 
 <style lang="less" scoped>
+@import '@/assets/main.css';
+
 .chat-container {
-  display: flex;
-  gap: 1.5rem;
-}
-
-div.chat, div.info {
-  height: calc(100vh - 180px);
-}
-
-.chat {
   display: flex;
   width: 100%;
-  max-width: 1100px;
-  flex-grow: 1;
-  margin: 0 auto;
-  flex-direction: column;
-  background: #f5f5f5;
-  border-radius: 8px;
-  box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.12), 0px 0.6px 2.3px rgba(0, 0, 0, 0.1),  0px 1px 5px rgba(0, 0, 0, 0.08);
+  height: 100%;
+  position: relative;
 }
 
-.chat-box {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1rem;
+.chat-container .conversations {
+  flex: 1 1 auto;
+}
+
+.conversations {
   display: flex;
   flex-direction: column;
+  width: 100px;
+  height: 100%;
+  overflow-y: auto;
+  border-right: 1px solid #f0f0f0;
+  min-width: var(--min-sider-width);
+  max-width: 200px;
 
-  // 平滑滚动
-  scroll-behavior: smooth;
+  & .actions {
+    height: var(--header-height);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px;
+    margin-bottom: 16px;
+    position: sticky;
+    top: 0;
+    background-color: white;
+    z-index: 9;
 
-  &::-webkit-scrollbar {
-    width: 0rem;
+    .action {
+      font-size: 1.2rem;
+      width: 2.5rem;
+      height: 2.5rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 8px;
+      color: #6D6D6D;
+      cursor: pointer;
+
+      &:hover {
+        background-color: #ECECEC;
+      }
+    }
   }
 }
 
-.message-box {
-  width: fit-content;
-  max-width: 80%;
-  display: inline-block;
-  padding: 0.5rem;
-  border-radius: 0.5rem;
-  margin: 0.5rem 0;
-  padding: 10px 16px;
-  user-select: text;
-  word-break: break-word;
-  font-size: 14px;
-  line-height: 20px;
-  font-variation-settings: 'wght' 400, 'opsz' 10.5;
-  font-weight: 400;
-  box-sizing: border-box;
-  box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.12), 0px 1.6px 3.6px rgba(0, 0, 0, 0.16);
-  animation: slideInUp 0.1s ease-in;
-}
-
-.message-box.sent {
-  color: white;
-  background-color: #efefef;
-  // background: linear-gradient(90deg, #006880 10.79%, #005366 87.08%);
-  background: linear-gradient(90deg, #40788c 10.79%, #005f77 87.08%);
-  // background-color: #333;
-  align-self: flex-end;
-}
-
-.message-box.received {
-  color: #111111;
-  background-color: #ffffff;
-  text-align: left;
-  // animation-delay: 0.2s; /* 延迟 100ms 开始动画 */
-}
-
-p.message-text {
-  word-wrap: break-word;
-  margin-bottom: 0;
-}
-
-img.message-image {
-  max-width: 300px;
-  max-height: 50vh;
-  object-fit: contain;
-}
-
-.input-box {
+.conversation {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  padding: 1rem;
-  border-top: 1px solid #ccc;
-}
-
-input.user-input {
-  flex: 1;
-  height: 40px;
-  padding: 0.5rem 1rem;
-  background-color: #fff;
-  border: none;
-  border-radius: 8px;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
-  font-size: 1.2rem;
-  margin: 0 0.6rem;
-  color: #111111;
-  font-size: 16px;
-  // line-height: 22px;
-  font-variation-settings: 'wght' 400, 'opsz' 10.5;
-}
-
-.ant-btn-icon-only {
-  font-size: 16px;
-  border-radius: 8px;
+  padding: 16px;
   cursor: pointer;
-}
+  width: 100%;
 
-// button:disabled {
-//   // background: #ccc;
-//   cursor: not-allowed;
-// }
-
-div.info {
-  width: 400px;
-  min-width: 400px;
-  overflow-y: auto;
-  flex-grow: 0;
-
-  // 平滑滚动
-  scroll-behavior: smooth;
-
-  &::-webkit-scrollbar {
-    width: 0rem;
-  }
-  // background-color: #ccc;
-  // margin: 0 1rem;
-
-  & > h1 {
-    font-size: 1.5rem;
-    margin: 0.5rem 0;
-    // padding: 0.5rem;
-    // text-align: center;
+  &__title {
+    white-space: nowrap; /* 禁止换行 */
+    overflow: hidden;    /* 超出部分隐藏 */
+    text-overflow: ellipsis; /* 显示省略号 */
   }
 
-  p.description {
-    font-size: 1rem;
-    margin: 0;
-    // padding: 0.5rem;
-    // max-height: 10rem;
-    margin-bottom: 20px;
-    // text-align: center;
+  &__delete {
+    display: none;
+    color: #7D7D7D;
+
+    &:hover {
+      color: #F93A37;
+      background-color: #EEE;
+    }
   }
 
-  img {
-    width: 100%;
-    height: fit-content;
-    object-fit: contain;
-    border-radius: 8px;
-    overflow: hidden;
-    margin-bottom: 0.5rem;
+  &.active {
+    background-color: #f0f0f0;
   }
 
-  #lite_graph {
-    width: 400px;
-    height: 300px;
-    background: #f5f5f5;
-    // border: 4px solid #ccc;
-    border-radius: 8px;
-    margin-bottom: 1rem;
-    box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.12), 0px 0.6px 2.3px rgba(0, 0, 0, 0.1),
-      0px 1px 5px rgba(0, 0, 0, 0.08);
+  &:hover {
+    background-color: #f0f0f0;
+
+    & .conversation__delete {
+      display: block;
+    }
   }
 }
 
-p.note {
-  font-size: small;
-  text-align: center;
-  padding: 1rem;
-  color: #ccc;
-}
-
-@keyframes slideInUp {
-  from {
-    opacity: 0;
-    transform: translateY(100%);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
 </style>
diff --git a/web/src/views/EmptyView.vue b/web/src/views/EmptyView.vue
new file mode 100644
index 00000000..4f33ec24
--- /dev/null
+++ b/web/src/views/EmptyView.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="not-found">
+    <h1>404 - 页面还没做</h1>
+    <p>Sorry, Yemian has not been zuoed.</p>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+.not-found {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 80vh;
+  text-align: center;
+}
+
+.not-found h1 {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+}
+
+.not-found p {
+  font-size: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+</style>
diff --git a/web/src/views/HomeView.vue b/web/src/views/HomeView.vue
index d868c38e..05aa8ce2 100644
--- a/web/src/views/HomeView.vue
+++ b/web/src/views/HomeView.vue
@@ -1,17 +1,24 @@
 <template>
   <div class="welcome">
+    <header>江南大学人工智能与计算机学院</header>
     <h1>{{ title }}</h1>
-    <p>{{ description }}</p>
+    <button class="home-btn" @click="goToChat">开始对话</button>
     <img src="/home.png" alt="Placeholder Image" />
+    <footer>© 江南语析 2024</footer>
   </div>
 </template>
 
 <script setup>
 import { reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const title = ref('Athena ✨')
+const router = useRouter()
+
+const goToChat = () => {
+  router.push("/chat")
+}
 
-const title = ref('Project: Athena ✨')
-const description = ref('代号：雅典娜！')
-const image = ref('/home.png')
 </script>
 
 <style scoped>
@@ -24,17 +31,24 @@ const image = ref('/home.png')
   text-align: center;
 }
 
+header {
+  background-color: var(--main-color);
+  font-size: 1.2rem;
+  font-weight: bold;
+  color: aliceblue;
+  width: 100%;
+  padding: 1rem 0;
+}
+
 h1 {
   font-size: 48px;
   font-weight: bold;
-  margin-bottom: 0;
-  margin-top: calc(10vh - 80px);
+  margin-top: calc(20vh - 80px);
 }
 
 p {
   font-size: 24px;
   text-align: center;
-  margin-bottom: calc(15vh - 80px);
 }
 
 img {
@@ -43,5 +57,25 @@ img {
   object-fit: cover;
   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.05);
   border-radius: 1rem;
+  max-width: 90%;
+}
+
+button.home-btn {
+  padding: 0.5rem 2rem;
+  font-size: 24px;
+  font-weight: bold;
+  color: white;
+  background-color: #333;
+  border: none;
+  border-radius: 3rem;
+  cursor: pointer;
+  transition: all 0.3s;
+  margin-bottom: calc(15vh - 80px);
+}
+
+footer {
+  font-size: 1rem;
+  color: #666;
+  margin-top: 20px;
 }
 </style>
diff --git a/web/src/views/NotFoundView.vue b/web/src/views/NotFoundView.vue
new file mode 100644
index 00000000..7764d1b6
--- /dev/null
+++ b/web/src/views/NotFoundView.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="not-found">
+    <h1>404 - Page Not Found</h1>
+    <p>Sorry, the page you are looking for does not exist.</p>
+    <router-link to="/chat">Go back</router-link>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NotFoundView'
+}
+</script>
+
+<style scoped>
+.not-found {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  text-align: center;
+}
+
+.not-found h1 {
+  font-size: 4rem;
+  margin-bottom: 1rem;
+}
+
+.not-found p {
+  font-size: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.not-found a {
+  font-size: 1.2rem;
+  text-decoration: none;
+}
+
+.not-found a:hover {
+  text-decoration: underline;
+}
+</style>
diff --git a/web/vite.config.js b/web/vite.config.js
index 9f5b5578..b1f863c0 100644
--- a/web/vite.config.js
+++ b/web/vite.config.js
@@ -15,7 +15,7 @@ export default defineConfig({
   server: {
     proxy: {
       '^/api': {
-        target: 'http://127.0.0.1:8000',
+        target: 'http://127.0.0.1:5000', // 5000端口是flask的Debug模式默认端口, 8000是非Debug模式默认端口
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, '')
       }