diff --git a/web/public/images/mj.png b/web/public/images/mj.png
new file mode 100644
index 00000000..60f08535
Binary files /dev/null and b/web/public/images/mj.png differ
diff --git a/web/public/images/sd.png b/web/public/images/sd.png
new file mode 100644
index 00000000..5b0d3815
Binary files /dev/null and b/web/public/images/sd.png differ
diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index 9b0665c7..85fdd35f 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -15,7 +15,8 @@
               placement="right"
           >
             <a @click="changeNav(item)" :class="item.path === curPath?'active':''">
-              <i :class="'iconfont icon-'+item.icon"></i>
+              <el-image :src="item.icon_path" :width="20" v-if="item.icon_path"/>
+              <i :class="'iconfont icon-'+item.icon" v-else></i>
             </a>
           </el-tooltip>
         </li>
@@ -42,8 +43,8 @@ const router = useRouter();
 const logo = '/images/logo.png';
 const navs = ref([
   {path: "/chat", icon: "wechat", title: "对话聊天"},
-  {path: "/mj", icon: "image", title: "MJ 绘画"},
-  {path: "/sd", icon: "palette", title: "SD 绘画"},
+  {path: "/mj", icon_path: "/images/mj.png", title: "MJ 绘画"},
+  {path: "/sd", icon_path: "/images/sd.png", title: "SD 绘画"},
   {path: "/apps", icon: "menu", title: "应用中心"},
   {path: "/images-wall", icon: "image-list", title: "作品展示"},
   {path: "/knowledge", icon: "book", title: "我的知识库"},
@@ -103,6 +104,10 @@ const changeNav = (item) => {
           align-items center
           cursor pointer
 
+          .el-image {
+            border-radius 10px
+          }
+
           .iconfont {
             font-size 20px
           }