diff --git a/resources/assets/js/pages/manage.vue b/resources/assets/js/pages/manage.vue
index d222b8402..33ee52f64 100644
--- a/resources/assets/js/pages/manage.vue
+++ b/resources/assets/js/pages/manage.vue
@@ -1,5 +1,35 @@
 <template>
     <div class="manage-box">
+        <div class="manage-box-menu">
+            <div class="manage-box-title">
+                <div class="manage-box-logo"></div>
+                <span>Doo Task</span>
+            </div>
+            <ul>
+                <li>
+                    <Icon type="md-speedometer" />
+                    <div class="menu-title">Dashboard</div>
+                </li>
+                <li>
+                    <Icon type="md-cog" />
+                    <div class="menu-title">Settings</div>
+                </li>
+                <li>
+                    <Icon type="md-calendar" />
+                    <div class="menu-title">Calendar</div>
+                </li>
+                <li class="menu-project">
+                    <ul>
+                        <li class="action">✔️ Daily Task</li>
+                        <li>✈️ Meetings Summary</li>
+                        <li>🛰 Resources</li>
+                        <li>💺 Availibity</li>
+                        <li>🍒 Brainstroaming</li>
+                    </ul>
+                </li>
+            </ul>
+            <Button class="manage-box-new" type="primary" icon="md-add">New Project</Button>
+        </div>
         <div class="manage-box-main">
             <div class="manage-box-body">
                 <div class="manage-box-body-content">
@@ -22,6 +52,110 @@
         right: 0;
         bottom: 0;
         display: flex;
+        .manage-box-menu {
+            flex-grow: 0;
+            flex-shrink: 0;
+            width: 255px;
+            height: 100%;
+            background: #F4F5F7;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            transition: all 0.2s;
+            .manage-box-title {
+                display: flex;
+                align-items: center;
+                flex-shrink: 0;
+                width: 86%;
+                padding: 6px;
+                margin-top: 27px;
+                border-radius: 8px;
+                background-color: #ffffff;
+                .manage-box-logo {
+                    width: 36px;
+                    height: 36px;
+                    background: url("../../statics/images/logo.svg") no-repeat center center;
+                    background-size: contain;
+                }
+                > span {
+                    padding-left: 12px;
+                    font-size: 16px;
+                    font-weight: 600;
+                }
+            }
+            > ul {
+                flex: 1;
+                width: 100%;
+                margin-top: 16px;
+                overflow: auto;
+                > li {
+                    display: flex;
+                    align-items: center;
+                    height: 38px;
+                    color: #6C7D8C;
+                    cursor: pointer;
+                    position: relative;
+                    width: 80%;
+                    max-width: 100%;
+                    margin: 8px auto;
+                    padding: 0 4%;
+                    border-radius: 4px;
+                    > i {
+                        opacity: 0.3;
+                        font-size: 22px;
+                        margin-right: 10px;
+                        margin-top: -1px;
+                    }
+                    .menu-title {
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
+                    &.menu-project {
+                        height: auto;
+                        padding: 14px 0 0;
+                        > ul {
+                            width: 100%;
+                            > li {
+                                position: relative;
+                                list-style: none;
+                                padding: 0 8px 0 30px;
+                                height: 38px;
+                                line-height: 38px;
+                                margin: 4px auto;
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                                white-space: nowrap;
+                                border-radius: 4px;
+                                color: #333333;
+                                &:before {
+                                    content: "";
+                                    position: absolute;
+                                    top: 50%;
+                                    left: 8px;
+                                    transform: translateY(-50%);
+                                    width: 12px;
+                                    height: 12px;
+                                    background: url("data:image/svg+xml;base64,PHN2ZyB0PSIxNjIyMzkwODExNTQxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI0OTk3IiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiPjxwYXRoIGQ9Ik0zNjYuMTgyNCAxMDguMjM2OEw4MTIuMDMyIDQyOC4wMzJhMTAyLjQgMTAyLjQgMCAwIDEgMCAxNjYuNTAyNEwzNjYuMTgyNCA5MTQuMzI5NmExMDIuNCAxMDIuNCAwIDAgMS0xNjIuMDk5Mi04My4yNTEyVjE5MS40ODhhMTAyLjQgMTAyLjQgMCAwIDEgMTYyLjA5OTItODMuMjUxMnoiIHAtaWQ9IjI0OTk4IiBmaWxsPSIjOTk5OTk5Ij48L3BhdGg+PC9zdmc+") no-repeat center center;
+                                    background-size: contain;
+                                }
+                                &.action {
+                                    background-color: #ffffff;
+                                }
+                            }
+                        }
+                    }
+                    &.action {
+                        background-color: #ffffff;
+                    }
+                }
+            }
+            .manage-box-new {
+                width: 80%;
+                margin-top: 16px;
+                margin-bottom: 20px;
+            }
+        }
         .manage-box-main {
             flex: 1;
             height: 100%;
diff --git a/resources/assets/js/pages/manage/components/project-list.vue b/resources/assets/js/pages/manage/components/project-list.vue
new file mode 100644
index 000000000..567a97840
--- /dev/null
+++ b/resources/assets/js/pages/manage/components/project-list.vue
@@ -0,0 +1,28 @@
+<template>
+    <div class="project-list">
+        list
+    </div>
+</template>
+
+<style lang="scss" scoped>
+:global {
+    .project-list {
+        display: flex;
+        align-items: flex-start;
+    }
+}
+</style>
+
+<script>
+export default {
+    name: "ProjectList",
+    data() {
+        return {
+
+        }
+    },
+    mounted() {
+
+    },
+}
+</script>
diff --git a/resources/assets/js/pages/manage/components/project-message.vue b/resources/assets/js/pages/manage/components/project-message.vue
new file mode 100644
index 000000000..fa6231cf9
--- /dev/null
+++ b/resources/assets/js/pages/manage/components/project-message.vue
@@ -0,0 +1,113 @@
+<template>
+    <div class="project-message">
+        <div class="group-member">
+            <div class="member-head">
+                <div class="member-title">Member<span>(25)</span></div>
+                <div class="member-view-all">View All</div>
+            </div>
+            <ul class="member-list">
+                <li class="online"><Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" /></li>
+                <li class="online"><Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" /></li>
+                <li class="online"><Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" /></li>
+                <li class="online"><Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" /></li>
+                <li><Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" /></li>
+                <li><Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" /></li>
+                <li><Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" /></li>
+                <li><Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" /></li>
+            </ul>
+        </div>
+        <div class="group-chat">
+            <div class="group-title">Group Chat</div>
+        </div>
+        <div class="group-input">
+
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+:global {
+    .project-message {
+        display: flex;
+        flex-direction: column;
+        padding: 36px 24px;
+        .group-member {
+            padding: 0 8px;
+            .member-head {
+                display: flex;
+                align-items: center;
+                .member-title {
+                    flex: 1;
+                    font-size: 18px;
+                    font-weight: 600;
+                    > span {
+                        padding-left: 6px;
+                        color: #4E60CC;
+                    }
+                }
+                .member-view-all {
+                    color: #999;
+                }
+            }
+            .member-list {
+                display: flex;
+                align-items: center;
+                margin-top: 14px;
+                overflow: auto;
+                > li {
+                    position: relative;
+                    list-style: none;
+                    margin-right: 13px;
+                    .ivu-avatar {
+                        width: 38px;
+                        height: 38px;
+                    }
+                    &:before {
+                        content: "";
+                        position: absolute;
+                        right: 0;
+                        bottom: 0;
+                        width: 9px;
+                        height: 9px;
+                        border-radius: 50%;
+                        background-color: #ff0000;
+                        border: 1px solid #ffffff;
+                        z-index: 1;
+                    }
+                    &.online {
+                        &:before {
+                            background-color: #509E76;
+                        }
+                    }
+                }
+            }
+        }
+        .group-chat {
+            flex: 1;
+            padding: 0 8px;
+            margin-top: 24px;
+            .group-title {
+                font-size: 18px;
+                font-weight: 600;
+            }
+        }
+        .group-input {
+
+        }
+    }
+}
+</style>
+
+<script>
+export default {
+    name: "ProjectMessage",
+    data() {
+        return {
+
+        }
+    },
+    mounted() {
+
+    },
+}
+</script>
diff --git a/resources/assets/js/pages/manage/project-detail.vue b/resources/assets/js/pages/manage/project-detail.vue
index 4f1ca8234..d30a19729 100644
--- a/resources/assets/js/pages/manage/project-detail.vue
+++ b/resources/assets/js/pages/manage/project-detail.vue
@@ -1,23 +1,48 @@
 <template>
     <div class="project-detail">
         <PageTitle>{{ $L('项目面板') }}</PageTitle>
-        <Loading/>
-        project-detail
+        <ProjectList/>
+        <ProjectMessage/>
     </div>
 </template>
 
 <style lang="scss" scoped>
 :global {
     .project-detail {
-        background-image: url("../../../statics/images/loading.png");
+        display: flex;
+        align-items: flex-start;
+        .project-list {
+            flex: 1;
+            height: 100%;
+        }
+        .project-message {
+            position: relative;
+            height: 100%;
+            width: 40%;
+            max-width: 410px;
+            &:before {
+                content: "";
+                position: absolute;
+                top: 0;
+                left: 0;
+                height: 100%;
+                width: 1px;
+                background-color: #f2f2f2;
+            }
+        }
     }
 }
 </style>
 
 <script>
+import ProjectList from "./components/project-list";
+import ProjectMessage from "./components/project-message";
 export default {
+    components: {ProjectMessage, ProjectList},
     data() {
-        return {}
+        return {
+
+        }
     },
     mounted() {
 
diff --git a/resources/assets/statics/images/logo.svg b/resources/assets/statics/images/logo.svg
new file mode 100644
index 000000000..ec5711b4c
--- /dev/null
+++ b/resources/assets/statics/images/logo.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1622421950278" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="30122" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><defs><style type="text/css"></style></defs><path d="M102.4 102.4m102.4 0l614.4 0q102.4 0 102.4 102.4l0 614.4q0 102.4-102.4 102.4l-614.4 0q-102.4 0-102.4-102.4l0-614.4q0-102.4 102.4-102.4Z" fill="#9ED979" p-id="30123"></path><path d="M512 230.4c-114.090667 0-204.8 89.258667-204.8 201.6a200.746667 200.746667 0 0 0 117.034667 181.418667v48.981333c0 17.28 11.690667 28.8 29.269333 28.8h116.992c17.578667 0 29.269333-11.52 29.269333-28.8v-48.981333a200.746667 200.746667 0 0 0 117.034667-181.418667C716.8 319.658667 626.090667 230.4 512 230.4zM580.266667 732.16h-136.533334c-20.48 0-34.133333 12.288-34.133333 30.72s13.653333 30.72 34.133333 30.72h136.533334c20.48 0 34.133333-12.288 34.133333-30.72s-13.653333-30.72-34.133333-30.72z" fill="#FFFFFF" p-id="30124"></path></svg>
\ No newline at end of file