diff --git a/index.html b/index.html
index 94daac9..ce5af8e 100644
--- a/index.html
+++ b/index.html
@@ -12,7 +12,7 @@
   <script type="importmap">{{importmap}}</script>
 </head>
 <body>
-  <div class="app noselect"></div>
+  <div id="app"></div>
   <script src="main.js"></script>
 </body>
 </html>
diff --git a/public/docset/ui/logs.md b/public/docset/ui/logs.md
new file mode 100644
index 0000000..bf9bbbf
--- /dev/null
+++ b/public/docset/ui/logs.md
@@ -0,0 +1 @@
+## 0.1.3 - 2023/4/21 
\ No newline at end of file
diff --git a/src/pages/@wcui/docs/app.vue b/src/pages/@wcui/docs/app.vue
index fb31f4e..f42d12e 100644
--- a/src/pages/@wcui/docs/app.vue
+++ b/src/pages/@wcui/docs/app.vue
@@ -1,12 +1,41 @@
 <template>
   <Topbar nav="docs" />
+  <main class="body">
+    <Menu />
+    <wc-scroll class="content" ref="detail">
+      <wc-markd class="detail" :code="docset"></wc-markd>
+    </wc-scroll>
+  </main>
 </template>
 
 <script>
 import Topbar from '../index/components/topbar.vue'
+import Menu from './components/aside.vue'
+
+import fetch from 'fetch'
+
 export default {
   components: {
-    Topbar
+    Topbar,
+    Menu
+  },
+  data() {
+    return {
+      docset: ''
+    }
+  },
+
+  mounted() {
+    let key = location.search.slice(1)
+
+    fetch(`/docset/ui/${key}.md`)
+      .then(r => r.text())
+      .then(r => {
+        this.docset = r
+      })
+      .catch(r => {
+        this.docset = 'Oops!!! 你要浏览的文档, 被外星人吃了~~'
+      })
   }
 }
 </script>
@@ -21,4 +50,25 @@ a {
   color: inherit;
   text-decoration: none;
 }
+#app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+</style>
+
+<style scoped>
+.body {
+  flex: 1;
+  display: flex;
+}
+
+.content {
+  flex: 1;
+  height: 100%;
+}
+.wrapper {
+  width: 100%;
+  height: 100%;
+}
 </style>
diff --git a/src/pages/@wcui/docs/components/aside.vue b/src/pages/@wcui/docs/components/aside.vue
new file mode 100644
index 0000000..94b13b0
--- /dev/null
+++ b/src/pages/@wcui/docs/components/aside.vue
@@ -0,0 +1,146 @@
+<template>
+  <wc-scroll class="tree-box noselect">
+    <dl class="chapters">
+      <dt class="title">
+        <a
+          v-for="it in menu.base"
+          :class="{ a: id === it.id }"
+          :href="'?' + it.id"
+        >
+          <span>{{ it.name }}</span>
+          <em>{{ it.id }}</em>
+        </a>
+      </dt>
+      <dt class="title">表单组件</dt>
+      <dd class="subtitle">
+        <a
+          class="text-ell"
+          v-for="it in menu.form"
+          :class="{ a: id === it.id }"
+          :href="'?' + it.id"
+        >
+          <span>{{ it.name }}</span>
+          <em>{{ it.id }}</em>
+        </a>
+      </dd>
+      <dt class="title">数据组件</dt>
+      <dd class="subtitle">
+        <a
+          class="text-ell"
+          v-for="it in menu.data"
+          :class="{ a: id === it.id }"
+          :href="'?' + it.id"
+        >
+          <span>{{ it.name }}</span>
+          <em>{{ it.id }}</em>
+        </a>
+      </dd>
+      <dt class="title">其他组件</dt>
+      <dd class="subtitle">
+        <a
+          class="text-ell"
+          v-for="it in menu.other"
+          :class="{ a: id === it.id }"
+          :href="'?' + it.id"
+        >
+          <span>{{ it.name }}</span>
+          <em>{{ it.id }}</em>
+        </a>
+      </dd>
+    </dl>
+  </wc-scroll>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      id: 'logs',
+      menu: {
+        base: [
+          { id: 'logs', name: '更新日志' },
+          { id: 'install', name: '安装' },
+          { id: 'colors', name: '配色' },
+          { id: 'icons', name: '图标' }
+        ],
+        form: [
+          { id: 'wc-button', name: '按钮' },
+          { id: 'wc-link', name: '超连接' },
+          { id: 'wc-input', name: '文本框' },
+          { id: 'wc-passwd', name: '密码框' },
+          { id: 'wc-number', name: '数字文本框' },
+          { id: 'wc-textarea', name: '文本域' },
+          { id: 'wc-select', name: '选择框' },
+          { id: 'wc-switch', name: '开关' },
+          { id: 'wc-radio', name: '单选框' },
+          { id: 'wc-checkbox', name: '复选框' },
+          { id: 'wc-star', name: '评分条' },
+          { id: 'wc-slider', name: '滑块' },
+          { id: 'wc-color', name: '取色器' }
+        ],
+        data: [
+          { id: 'wc-progress', name: '进度条' },
+          { id: 'wc-table', name: '表格' },
+          { id: 'wc-tree', name: '树形菜单' },
+          { id: 'wc-pager', name: '分页' },
+          { id: 'wc-dropdown', name: '下拉菜单' }
+        ],
+        other: [
+          { id: 'wc-layer', name: '弹层' },
+          { id: 'wc-scroll', name: '滚动条' },
+          { id: 'wc-code', name: '代码块' },
+          { id: 'wc-markd', name: 'MD渲染组件' },
+          { id: 'wc-meditor', name: 'MD编辑器' },
+          { id: 'wc-editor', name: '富文本编辑器' },
+          { id: 'wc-badge', name: '标记' }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tree-box {
+  width: 220px;
+  height: 100%;
+
+  .chapters {
+    padding: 32px;
+    line-height: 2;
+    border-right: 1px solid var(--color-plain-2);
+    background: #fff;
+    color: var(--color-grey-3);
+
+    .title {
+      a {
+        color: var(--color-dark-2);
+      }
+    }
+    .subtitle {
+      padding-left: 12px;
+      color: var(--color-dark-2);
+    }
+
+    a {
+      display: block;
+
+      span {
+      }
+      em {
+        margin-left: 8px;
+        font-style: normal;
+        font-size: 12px;
+        color: var(--color-grey-2);
+      }
+
+      &:hover,
+      &:hover em,
+      &.a,
+      &.a em {
+        color: var(--color-red-1);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/pages/@wcui/docs/main.js b/src/pages/@wcui/docs/main.js
index 092bcb1..f81dc60 100644
--- a/src/pages/@wcui/docs/main.js
+++ b/src/pages/@wcui/docs/main.js
@@ -5,4 +5,4 @@ import '//jscdn.ink/@bd/ui/0.1.3/form/index.js'
 
 const app = createApp(App)
 
-app.mount('.app')
+app.mount('#app')
diff --git a/src/pages/@wcui/index/main.js b/src/pages/@wcui/index/main.js
index 092bcb1..f81dc60 100644
--- a/src/pages/@wcui/index/main.js
+++ b/src/pages/@wcui/index/main.js
@@ -5,4 +5,4 @@ import '//jscdn.ink/@bd/ui/0.1.3/form/index.js'
 
 const app = createApp(App)
 
-app.mount('.app')
+app.mount('#app')
diff --git a/src/pages/index/app.vue b/src/pages/index/app.vue
index 1c1d08e..4b517f7 100644
--- a/src/pages/index/app.vue
+++ b/src/pages/index/app.vue
@@ -1,6 +1,8 @@
 <template>
   <h1>it works!</h1>
   <div>
+    <wc-link to="/@wcui/index.html">@wcui</wc-link>
+    <wc-link to="/@wcui/docs.html">@wcui/docs</wc-link>
     <wc-link to="/playground.html">plyaground</wc-link>
   </div>
 </template>
diff --git a/src/pages/index/main.js b/src/pages/index/main.js
index 092bcb1..f81dc60 100644
--- a/src/pages/index/main.js
+++ b/src/pages/index/main.js
@@ -5,4 +5,4 @@ import '//jscdn.ink/@bd/ui/0.1.3/form/index.js'
 
 const app = createApp(App)
 
-app.mount('.app')
+app.mount('#app')
diff --git a/src/pages/playground/main.js b/src/pages/playground/main.js
index c5f2f19..9282717 100644
--- a/src/pages/playground/main.js
+++ b/src/pages/playground/main.js
@@ -5,4 +5,4 @@ import store from './store'
 
 const app = createApp(App)
 
-app.use(store).mount('.app')
+app.use(store).mount('#app')
