diff --git a/open-isle-cli/public/index.html b/open-isle-cli/public/index.html
index 3e5a13962..ed3c2de70 100644
--- a/open-isle-cli/public/index.html
+++ b/open-isle-cli/public/index.html
@@ -1,5 +1,8 @@
 <!DOCTYPE html>
 <html lang="">
+  <link rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
+      referrerpolicy="no-referrer" />
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
diff --git a/open-isle-cli/src/assets/global.css b/open-isle-cli/src/assets/global.css
index ddcaad32c..2f180ae08 100644
--- a/open-isle-cli/src/assets/global.css
+++ b/open-isle-cli/src/assets/global.css
@@ -1,8 +1,11 @@
 :root {
   --header-height: 60px;
-  --header-background-color: gray;
-  --menu-background-color: darkgray;
-  --normal-background-color: lightgray;
+  --header-background-color: white;
+  --header-border-color: lightgray;
+  --menu-background-color: white;
+  --menu-border-color: lightgray;
+  --menu-selected-background-color: rgba(208, 250, 255, 0.659);
+  --normal-background-color: lightgrrgb(208, 246, 255)
   --menu-width: 200px;
   --page-max-width: 1200px;
 }
@@ -10,4 +13,5 @@
 body {
   margin: 0;
   padding: 0;
+  font-family: 'Roboto', sans-serif;
 }
\ No newline at end of file
diff --git a/open-isle-cli/src/components/HeaderComponent.vue b/open-isle-cli/src/components/HeaderComponent.vue
index f6dbae795..e60bed5ae 100644
--- a/open-isle-cli/src/components/HeaderComponent.vue
+++ b/open-isle-cli/src/components/HeaderComponent.vue
@@ -1,7 +1,14 @@
 <template>
   <header class="header">
-    <div class="logo">🌴</div>
-    <button class="menu-btn" @click="$emit('toggle-menu')">☰</button>
+    <div class="header-content">
+      <button class="menu-btn" @click="$emit('toggle-menu')">
+        <i class="fas fa-bars"></i> 
+      </button>
+      <div class="logo-container">
+        <img alt="OpenIsle" src="https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/image.png" width="60" height="60">
+        <div class="logo-text">OpenIsle</div>
+      </div>
+    </div>
   </header>
 </template>
 
@@ -19,12 +26,38 @@ export default {
   height: var(--header-height);
   background-color: var(--header-background-color);
   color: var(--header-text-color);
+  border-bottom: 1px solid var(--header-border-color);
 }
+
+.logo-container {
+  display: flex;
+  align-items: center;
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.header-content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  max-width: var(--page-max-width);
+}
+
 .menu-btn {
   font-size: 24px;
   background: none;
   border: none;
   color: inherit;
   cursor: pointer;
+  opacity: 0.4;
+  margin-right: 10px;
 }
+
+.menu-btn:hover {
+  opacity: 0.8;
+}
+
 </style>
diff --git a/open-isle-cli/src/components/MenuComponent.vue b/open-isle-cli/src/components/MenuComponent.vue
index 4c466d805..262866f8d 100644
--- a/open-isle-cli/src/components/MenuComponent.vue
+++ b/open-isle-cli/src/components/MenuComponent.vue
@@ -1,9 +1,20 @@
 <template>
   <transition name="slide">
     <nav v-if="visible" class="menu">
-      <ul>
-        <li><router-link to="/">Home</router-link></li>
-      </ul>
+      <div class="menu-item-container">
+        <div class="menu-item selected">
+          <i class="menu-item-icon fas fa-hashtag"></i>
+          <router-link class="menu-item-text" to="/">话题</router-link>
+        </div>
+        <div class="menu-item">
+          <i class="menu-item-icon fas fa-envelope"></i>
+          <router-link class="menu-item-text" to="/">我的消息</router-link>
+        </div>
+        <div class="menu-item">
+          <i class="menu-item-icon fas fa-info-circle"></i>
+          <router-link class="menu-item-text" to="/">关于</router-link>
+        </div>
+      </div>
     </nav>
   </transition>
 </template>
@@ -25,7 +36,37 @@ export default {
   width: 200px;
   background-color: var(--menu-background-color);
   height: calc(100vh - var(--header-height));
+  border-right: 1px solid var(--menu-border-color);
 }
+
+.menu-item-container {
+  padding: 10px;
+}
+
+.menu-item {
+  display: block;
+  padding: 4px 10px;
+  text-decoration: none;
+  color: var(--menu-text-color);
+  border-radius: 10px;
+}
+
+.menu-item.selected {
+  font-weight: bold;
+  background-color: var(--menu-selected-background-color);
+}
+
+.menu-item-text {
+  font-size: 16px;
+  text-decoration: none;
+  color: var(--menu-text-color);
+}
+
+.menu-item-icon {
+  margin-right: 10px;
+  opacity: 0.5;
+}
+
 .slide-enter-active, .slide-leave-active {
   transition: 
     transform 0.3s ease,
@@ -35,11 +76,9 @@ export default {
 .slide-enter-from, .slide-leave-to {
   transform: translateX(-100%);
   opacity: 0;
-  width: 0;
 }
 .slide-enter-to, .slide-leave-from {
   transform: translateX(0);
   opacity: 1;
-  width: 200px;
 }
 </style>
