diff --git a/Yi.Bbs.Vue3/src/assets/chat_images/addressBook.png b/Yi.Bbs.Vue3/src/assets/chat_images/addressBook.png
new file mode 100644
index 00000000..0b4f56a1
Binary files /dev/null and b/Yi.Bbs.Vue3/src/assets/chat_images/addressBook.png differ
diff --git a/Yi.Bbs.Vue3/src/assets/chat_images/collection.png b/Yi.Bbs.Vue3/src/assets/chat_images/collection.png
new file mode 100644
index 00000000..71587fe9
Binary files /dev/null and b/Yi.Bbs.Vue3/src/assets/chat_images/collection.png differ
diff --git a/Yi.Bbs.Vue3/src/assets/chat_images/file.png b/Yi.Bbs.Vue3/src/assets/chat_images/file.png
new file mode 100644
index 00000000..ae578b6c
Binary files /dev/null and b/Yi.Bbs.Vue3/src/assets/chat_images/file.png differ
diff --git a/Yi.Bbs.Vue3/src/assets/chat_images/friend.png b/Yi.Bbs.Vue3/src/assets/chat_images/friend.png
new file mode 100644
index 00000000..3fcbaf34
Binary files /dev/null and b/Yi.Bbs.Vue3/src/assets/chat_images/friend.png differ
diff --git a/Yi.Bbs.Vue3/src/assets/chat_images/icon.jpg b/Yi.Bbs.Vue3/src/assets/chat_images/icon.jpg
new file mode 100644
index 00000000..93c45800
Binary files /dev/null and b/Yi.Bbs.Vue3/src/assets/chat_images/icon.jpg differ
diff --git a/Yi.Bbs.Vue3/src/assets/chat_images/line.png b/Yi.Bbs.Vue3/src/assets/chat_images/line.png
new file mode 100644
index 00000000..9832d36f
Binary files /dev/null and b/Yi.Bbs.Vue3/src/assets/chat_images/line.png differ
diff --git a/Yi.Bbs.Vue3/src/assets/chat_images/look.png b/Yi.Bbs.Vue3/src/assets/chat_images/look.png
new file mode 100644
index 00000000..3701d4e2
Binary files /dev/null and b/Yi.Bbs.Vue3/src/assets/chat_images/look.png differ
diff --git a/Yi.Bbs.Vue3/src/assets/chat_images/mini.png b/Yi.Bbs.Vue3/src/assets/chat_images/mini.png
new file mode 100644
index 00000000..270094e0
Binary files /dev/null and b/Yi.Bbs.Vue3/src/assets/chat_images/mini.png differ
diff --git a/Yi.Bbs.Vue3/src/assets/chat_images/other.png b/Yi.Bbs.Vue3/src/assets/chat_images/other.png
new file mode 100644
index 00000000..1e15f8b4
Binary files /dev/null and b/Yi.Bbs.Vue3/src/assets/chat_images/other.png differ
diff --git a/Yi.Bbs.Vue3/src/assets/chat_images/phone.png b/Yi.Bbs.Vue3/src/assets/chat_images/phone.png
new file mode 100644
index 00000000..73b8c1de
Binary files /dev/null and b/Yi.Bbs.Vue3/src/assets/chat_images/phone.png differ
diff --git a/Yi.Bbs.Vue3/src/assets/chat_images/sou.png b/Yi.Bbs.Vue3/src/assets/chat_images/sou.png
new file mode 100644
index 00000000..4f1e82af
Binary files /dev/null and b/Yi.Bbs.Vue3/src/assets/chat_images/sou.png differ
diff --git a/Yi.Bbs.Vue3/src/assets/chat_images/wechat.png b/Yi.Bbs.Vue3/src/assets/chat_images/wechat.png
new file mode 100644
index 00000000..2f52b688
Binary files /dev/null and b/Yi.Bbs.Vue3/src/assets/chat_images/wechat.png differ
diff --git a/Yi.Bbs.Vue3/src/main.js b/Yi.Bbs.Vue3/src/main.js
index da231070..080d87ed 100644
--- a/Yi.Bbs.Vue3/src/main.js
+++ b/Yi.Bbs.Vue3/src/main.js
@@ -14,7 +14,7 @@ import * as ElementPlusIconsVue from "@element-plus/icons-vue";
 import directive from "./directive"; // directive
 import VueLuckyCanvas from '@lucky-canvas/vue'
 
-import "./permission";
+// import "./permission";
 
 (async () => {
   const app = createApp(App);
diff --git a/Yi.Bbs.Vue3/src/views/chathub/Index.vue b/Yi.Bbs.Vue3/src/views/chathub/Index.vue
index 903131e3..e5ab4add 100644
--- a/Yi.Bbs.Vue3/src/views/chathub/Index.vue
+++ b/Yi.Bbs.Vue3/src/views/chathub/Index.vue
@@ -1,59 +1,136 @@
 <template>
   <div class="body">
 
-      <div class="left"></div>
-
-      <div class="middle">
-        <div class="header"></div>
-        <div class="user-list"></div>
+    <div class="left">
+      <div class="icon">
+        <img src="@/assets/chat_images/icon.jpg">
       </div>
+<ul class="top-icon">
+  <li><img src="@/assets/chat_images/wechat.png"></li>
+  <li><img src="@/assets/chat_images/addressBook.png"></li>
+  <li><img src="@/assets/chat_images/collection.png"></li>
+  <li><img src="@/assets/chat_images/file.png"></li>
+  <li><img src="@/assets/chat_images/friend.png"></li>
+  <li><img src="@/assets/chat_images/line.png"></li>
+  <li><img src="@/assets/chat_images/look.png"></li>
+  <li><img src="@/assets/chat_images/sou.png"></li>
+</ul>
+<ul class="bottom-icon">
+  <li><img src="@/assets/chat_images/mini.png"></li>
+  <li><img src="@/assets/chat_images/phone.png"></li>
+  <li><img src="@/assets/chat_images/other.png"></li>
+</ul>
 
-      <div class="right">
-        <div class="header"></div>
-        <div class="content"></div>
-        <div class="bottom"></div>
-      </div>
     </div>
 
+    <div class="middle">
+      <div class="header">
+<div class="search"></div>
+
+      </div>
+      <div class="user-list"></div>
+    </div>
+
+    <div class="right">
+      <div class="header"></div>
+      <div class="content"></div>
+      <div class="bottom"></div>
+    </div>
+  </div>
+
 </template>
 <style scoped lang="scss">
 .body {
-    height: 790px;
-    width: 1400px;
+  height: 790px;
+  width: 1400px;
   display: flex;
   justify-content: center;
   box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
 }
+
 .left {
   background-color: #2a2a2a;
   width: 70px;
+  padding: 46px 10px 0 10px;
+
+  .icon {
+    background-color: burlywood;
+    height: 46px;
+    width: 46px;
+    img{
+      height: 100%;
+      width: 100%;
+    }
+  }
 }
 
 .middle {
   background-color: #dadbdc;
   width: 380px;
+
   .header {
     height: 75px;
     background: #f7f7f7;
+    padding: 30px 0 30px 0  ;
+    .search{
+      margin: auto;
+      background-color: #E2E2E2;
+      height: 30px;
+      width: 338px;
+    }
   }
-  .user-list {
-  }
+
+  .user-list {}
 }
+
 .right {
   background-color: #f5f5f5;
   width: 950px;
+
   .header {
     height: 75px;
     background: #f7f7f7;
     border: 1px solid #e7e7e7;
   }
+
   .content {
     height: 580px;
   }
+
   .bottom {
     height: calc(100% - 655px);
     background: #f7f7f7;
     border: 1px solid #e7e7e7;
   }
 }
+
+.top-icon
+{
+  margin-top: 32px;
+  li{
+    cursor: pointer;
+    text-align: center;
+   margin-bottom: 24px;
+    img{
+      height: 24px;
+      width: 24px;
+     
+    }
+
+  }
+}
+.bottom-icon
+{margin-top: 125px;
+  li{
+    cursor: pointer;
+    text-align: center;
+   margin-bottom: 24px;
+    img{
+      height: 24px;
+      width: 24px;
+     
+    }
+
+  }
+}
 </style>
\ No newline at end of file