diff --git a/HomeWork-vite/src/App.vue b/HomeWork-vite/src/App.vue
index 026b17569064756e935f01341df608de8788d230..1018eba402cefeb9f0d1991a0bdee168a22b03ed 100644
--- a/HomeWork-vite/src/App.vue
+++ b/HomeWork-vite/src/App.vue
@@ -1,9 +1,5 @@
 <template>
   <div class="container">
-    <nav class="navbar">
-      <div class="logo">作业系统</div>
-      <div class="user">用户账号</div>
-    </nav>
     <router-view />
   </div>
 </template>
diff --git a/HomeWork-vite/src/views/Home/AssignmentList.vue b/HomeWork-vite/src/views/Home/AssignmentList.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3dd8e12324dbff41ac6cd71be27811711a336faf
--- /dev/null
+++ b/HomeWork-vite/src/views/Home/AssignmentList.vue
@@ -0,0 +1,143 @@
+<template>
+    <el-table
+      :data="tableData"
+      style="width: 100% ; height: 100%;"
+      :row-class-name="tableRowClassName"
+    >
+      <el-table-column prop="date" label="日期" width="180" />
+      <el-table-column prop="name" label="课程" width="180" />
+      <el-table-column prop="address" label="作业描述" />
+      <el-table-column prop="finish" label="完成状态" width="180"/>
+    </el-table>
+  </template>
+  
+  <script lang="ts" setup>
+  interface User {
+    date: string
+    name: string
+    address: string
+    finish: string
+  }
+  
+  const tableRowClassName = ({
+    row,
+    rowIndex,
+  }: {
+    row: User
+    rowIndex: number
+  }) => {
+      if (row.finish === '已完成') {  
+      return 'success-row';  
+    } else if (row.finish === '即将截止') {  
+      return 'warning-row';  
+    } else if (row.finish === '已截止') {  
+      return 'error-row';  
+    }
+  }
+  
+  const tableData: User[] = [
+    {
+      date: '2024-05-03',
+      name: '高等数学A',
+      address: '第二次作业',
+      finish: '未完成',
+    },
+    {
+      date: '2024-05-02',
+      name: '大学物理',
+      address: '第二章 刚体力学知识点总结',
+      finish: '即将截止',
+    },
+    {
+      date: '2024-05-04',
+      name: '大学生职业生涯规划',
+      address: '提交一份对于自己未来的职业生涯规划书',
+      finish: '未完成',
+    },
+    {
+      date: '2024-05-01',
+      name: '计算机组成原理',
+      address: '第二次上机实验报告',
+      finish: '已完成',
+    },
+    {
+      date: '2024-05-01',
+      name: '计算机组成原理',
+      address: '第一次上机实验报告',
+      finish: '已完成',
+    },
+    {
+      date: '2024-05-02',
+      name: '大学物理',
+      address: '第二章 刚体力学知识点总结',
+      finish: '已截止',
+    },
+    {
+      date: '2024-05-03',
+      name: '高等数学A',
+      address: '第一次作业',
+      finish: '未完成',
+    },
+    {
+      date: '2024-05-02',
+      name: '大学物理',
+      address: '第一章 质点力学知识点总结',
+      finish: '已完成',
+    },
+    {
+      date: '2024-05-02',
+      name: '形势与政策(五)',
+      address: '第七讲课后作业',
+      finish: '未完成',
+    },
+    {
+      date: '2024-05-02',
+      name: '形势与政策(五)',
+      address: '第六讲课后作业',
+      finish: '未完成',
+    },
+    {
+      date: '2024-05-02',
+      name: '形势与政策(五)',
+      address: '第五讲课后作业',
+      finish: '未完成',
+    },
+    {
+      date: '2024-05-02',
+      name: '形势与政策(五)',
+      address: '第四讲课后作业',
+      finish: '未完成',
+    },
+    {
+      date: '2024-05-02',
+      name: '形势与政策(五)',
+      address: '第三讲课后作业',
+      finish: '未完成',
+    },
+    {
+      date: '2024-05-02',
+      name: '形势与政策(五)',
+      address: '第二讲课后作业',
+      finish: '未完成',
+    },
+    {
+      date: '2024-05-02',
+      name: '形势与政策(五)',
+      address: '第一讲课后作业',
+      finish: '未完成',
+    },
+  ]
+  </script>
+  
+  <style>
+  .el-table .warning-row {
+    --el-table-tr-bg-color:rgb(235, 180.6, 99);
+  }
+  .el-table .success-row {
+    --el-table-tr-bg-color:rgb(133.4, 206.2, 97.4);
+  }
+  .el-table .error-row {
+    --el-table-tr-bg-color:rgb(247, 137.4, 137.4);
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/HomeWork-vite/src/views/Home/Login_Student.vue b/HomeWork-vite/src/views/Home/Login_Student.vue
deleted file mode 100644
index d527735abd35d116154bef4cbed64eeff24deab1..0000000000000000000000000000000000000000
--- a/HomeWork-vite/src/views/Home/Login_Student.vue
+++ /dev/null
@@ -1,140 +0,0 @@
-<template>
-  <div id="app">
-    <Navbar />
-    <div class="container">
-      <h1 style="margin-top: 2%; margin-bottom: 2%;">欢迎登录作业系统！</h1>
-      <hr />
-      <div class="management-buttons">
-        <button class="button" @click="toHomeWorkManager">作业管理</button>
-        <button class="button" @click="toWrongManager">错题管理</button>
-      </div>
-      <hr>
-      <div class="message-section">
-        <h2 style="text-align: justify;">我的消息</h2>
-        <div class="mt-4">
-          <el-input v-model="input_serch" style="max-width: 300px" placeholder="输入文字以搜索信息" class="input-with-select">
-            <template #append>
-              <el-button :icon="Search" />
-            </template>
-          </el-input>
-        </div>
-        <div class="scrollbar-demo">
-          <el-scrollbar height="450px">
-
-            <p class="scrollbar-demo-item">你的计算机网络（一）作业待提交</p>
-            <p class="scrollbar-demo-item">你的计算机网络（二）作业待提交</p>
-            <p class="scrollbar-demo-item">你的计算机网络（三）作业待提交</p>
-            <p class="scrollbar-demo-item">你的计算机网络（四）作业待提交</p>
-
-          </el-scrollbar>
-        </div>
-
-
-      </div>
-
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { useRouter } from 'vue-router';
-import { ref } from 'vue'
-import { Search } from '@element-plus/icons-vue'
-const router = useRouter();
-const input_serch = ref('')
-
-const menuItems = ref(['标题1', '标题2', '标题3'])
-function toHomeWorkManager() {
-  router.push({ path: 'HomeWorkManager' });
-}
-
-function toWrongManager() {
-  router.push({ path: 'WrongManager' });
-}
-</script>
-
-<style>
-hr {
-  margin: auto;
-  width: 90%;
-}
-
-#app {
-  font-family: Arial, sans-serif;
-}
-
-.container {
-  text-align: center;
-}
-
-.management-buttons {
-  display: flex;
-  justify-content: center;
-  gap: 200px;
-  margin: 30px 0;
-}
-
-.button {
-  margin-top: 15px;
-  margin-bottom: 10px;
-  width: 150px;
-  height: 100px;
-  padding: 10px 20px;
-  font-size: 15px;
-  border: 1px solid;
-  background-color: #f5f2f2e3;
-  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
-  cursor: pointer;
-}
-
-.content {
-  display: flex;
-  justify-content: center;
-  gap: 20px;
-  margin-top: 20px;
-}
-
-.message-section {
-  margin-top: 40px;
-  margin-left: 150px;
-  margin-right: 150px;
-}
-
-.message-section h3 {
-  margin-bottom: 20px;
-}
-
-.scrollbar-demo {
-  margin-top: 20px;
-}
-
-.scrollbar-demo-item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 50px;
-  margin: 10px;
-  text-align: center;
-  border-radius: 4px;
-  border: 1px solid gainsboro;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  background: white;
-  /* background: var(--el-color-primary-light-9);
-  color: var(--el-color-primary); */
-}
-
-.scrollbar-demo-item:hover {
-
-  transition: transform 0.5s ease-in;
-  transform: scale(1.05);
-}
-
-.mt-4 {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.input-with-select .el-input-group__prepend {
-  background-color: var(--el-fill-color-blank);
-}
-</style>
\ No newline at end of file
diff --git a/HomeWork-vite/src/views/Home/MessageList.vue b/HomeWork-vite/src/views/Home/MessageList.vue
new file mode 100644
index 0000000000000000000000000000000000000000..441b9442b2495e75085dd257e75c1ac93ffccfd3
--- /dev/null
+++ b/HomeWork-vite/src/views/Home/MessageList.vue
@@ -0,0 +1,46 @@
+<template>
+    <div>
+      <h2>我的消息</h2>
+      <el-timeline>
+        <el-timeline-item
+          v-for="(message, index) in messages"
+          :key="index"
+          :type="message.type"
+        >
+          {{ message.content }}
+        </el-timeline-item>
+      </el-timeline>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: "MessageList",
+    data() {
+      return {
+        messages: [
+          { type: "success", content: "成功提交一份作业" },
+          { type: "warning", content: "作业即将截止通知" },
+          { type: "error", content: "作业已截止" },
+          { type: "warning", content: "作业即将截止通知" },
+          { type: "success", content: "成功提交一份疑难点" },
+          { type: "success", content: "成功提交一份作业" },
+          { type: "warning", content: "作业即将截止通知" },
+          { type: "success", content: "你收到一条来自老师的回复" },
+          { type: "success", content: "成功提交一份疑难点" },
+          { type: "success", content: "成功提交一份作业" },
+          { type: "error", content: "作业已截止" },
+          { type: "error", content: "作业已截止" },
+          { type: "error", content: "作业已截止" },
+        ],
+      };
+    },
+  };
+  </script>
+  
+  <style scoped>
+  h2 {
+    margin-bottom: 10px;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/HomeWork-vite/src/views/Home/Sidebar.vue b/HomeWork-vite/src/views/Home/Sidebar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9728e4f2bd2c2f7890744bbbaa6916e682df2fba
--- /dev/null
+++ b/HomeWork-vite/src/views/Home/Sidebar.vue
@@ -0,0 +1,42 @@
+<template>
+    <el-menu
+     class="sidebar"
+     background-color="darkorchid"
+     text-color="#fff"
+     >
+        <el-menu-item index="1" @Click="HomeWorkManager">作业管理</el-menu-item>
+        <el-menu-item index="2" @Click="WrongManager">错题管理</el-menu-item>
+    </el-menu>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+
+//路由器
+const router = useRouter();
+const HomeWorkManager = () => {
+    router.push("/HomeWorkManager")
+}
+const WrongManager = () => {
+    router.push("/WrongManager")
+}
+
+</script>
+
+<style scoped>
+.sidebar {
+  height: 97vh;
+  width: 200px;
+  border: 1px solid gray;  
+}
+.el-menu-item{
+  border: 1px solid gray;  
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 20px;
+}
+.el-menu-item:hover{
+  color: #409EFF;  
+}
+</style>
\ No newline at end of file
diff --git a/HomeWork-vite/src/views/Home/index.vue b/HomeWork-vite/src/views/Home/index.vue
index c47e162f27f5e0940dc309b650fc364a81e57a4d..8866f45f3dd815e582c000107462e7c1d5bf10ab 100644
--- a/HomeWork-vite/src/views/Home/index.vue
+++ b/HomeWork-vite/src/views/Home/index.vue
@@ -1,41 +1,87 @@
 <template>
-  <div class="home">
-    <Login_Student />
-  </div>
+  <el-container class="layout">
+    <!-- 头部 -->
+    <el-header class="header">
+      <h1>作业系统</h1>
+    </el-header>
+
+    <el-container class="content">
+      <!-- 侧边栏 -->
+      <el-aside width="200px">
+        <Sidebar/>
+      </el-aside>
+
+      <!-- 主内容 -->
+      <el-main>
+        <div class="main-homework">
+        <AssignmentList/>
+        </div>
+      </el-main>
+
+      <el-main>
+      <div class="main-message">
+        <MessageList/>
+        </div>
+      </el-main>
+    </el-container>
+
+    <el-footer class="footer"></el-footer>
+
+  </el-container>
 </template>
 
 <script setup>
 
-import Login_Student from '../Home/Login_Student.vue';
+import Sidebar from '../Home/Sidebar.vue';
+import AssignmentList from '../Home/AssignmentList.vue';
+import MessageList from '../Home/MessageList.vue';
+
 
 </script>
 
 <style>
-.navbar {
+.header {
   background-color: darkorchid;
   color: white;
-  padding: 25px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+  text-align: center;
+  line-height: 60px;
+  font-size: 24px;
   font-family: "楷体";
 }
-
-.logo {
-  font-size: 20px;
-  font-weight: bold;
+.main-homework {
+  padding: 20px;
+  background-color: white;
+  margin: 10px;
+  border-radius: 10px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  width: auto;
+  height: 800px;
+  display: flex;
 }
-
-.user {
-  font-size: 20px;
+.main-message {
+  padding: 20px;
+  background-color: white;
+  margin: 10px;
+  border-radius: 10px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  width: 250px;
+  height: 800px;
+  display: flex;
+}
+.footer {
+  background-color: darkorchid;
   color: white;
+  text-align: center;
+  line-height: 40px;
 }
-
-.example-showcase .el-dropdown-link {
-  cursor: pointer;
-  color: var(--el-color-primary);
+.layout {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+.content {
+  flex-grow: 1;
   display: flex;
-  align-items: center;
-  color: white;
 }
+
 </style>