diff --git a/fite.config.js b/fite.config.js
index 79aec3d..22a17d1 100644
--- a/fite.config.js
+++ b/fite.config.js
@@ -33,9 +33,9 @@ export default {
   imports: {
     vue: '//jscdn.ink/vue/3.2.47/vue.runtime.esm-browser.prod.js',
     'vue-router': '//jscdn.ink/@bytedo/vue-router/4.1.6/vue-router.js',
-    fetch: '//jscdn.ink/@bytedo/fetch/2.1.5/next.js',
-    '@bytedo/editor': '//jscdn.ink/@bytedo/editor/1.0.0/index.js',
-    '@bytedo/gzip': '//jscdn.ink/@bytedo/gzip/1.0.0/index.js',
-    '@bd/core': '//jscdn.ink/@bd/core/1.9.0/index.js'
+    fetch: '//jscdn.ink/@bytedo/fetch/latest/next.js',
+    '@bytedo/editor': '//jscdn.ink/@bytedo/editor/latest/index.js',
+    '@bytedo/gzip': '//jscdn.ink/@bytedo/gzip/latest/index.js',
+    '@bd/core': '//jscdn.ink/@bd/core/latest/index.js'
   }
 }
diff --git a/src/assets/github.svg b/src/assets/github.svg
new file mode 100644
index 0000000..029a937
--- /dev/null
+++ b/src/assets/github.svg
@@ -0,0 +1 @@
+<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="#86909B" d="M512 137c-212.2 0-384 172.1-384 384.5 0 170.1 109.9 313.8 262.6 364.8 19.2 3.4 26.4-8.2 26.4-18.3 0-9.1-.5-39.4-.5-71.6-96.5 17.8-121.5-23.6-129.1-45.2-4.3-11.1-23-45.2-39.4-54.3-13.4-7.2-32.6-25-.5-25.5 30.2-.5 51.8 27.9 59 39.4 34.6 58.2 89.8 41.8 111.8 31.7 3.4-25 13.4-41.8 24.5-51.4-85.4-9.6-174.7-42.8-174.7-189.8 0-41.8 14.9-76.4 39.4-103.3-3.8-9.6-17.3-49 3.8-101.9 0 0 32.2-10.1 105.6 39.4 30.7-8.7 63.4-13 96-13s65.3 4.3 96 13c73.4-50 105.6-39.4 105.6-39.4 21.1 52.9 7.7 92.3 3.8 101.9 24.5 26.9 39.4 61 39.4 103.3 0 147.5-89.8 180.2-175.2 189.8 13.9 12 25.9 35.1 25.9 71.1 0 51.4-.5 92.8-.5 105.7 0 10.1 7.2 22.1 26.4 18.3C790.7 833.4 896 686.7 896 521.5 896 309.1 724.2 137 512 137z"/></svg>
\ No newline at end of file
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
index e2a9ebf..44be6df 100644
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
@@ -1 +1 @@
-<svg viewBox="0 0 261.76 226.69" xmlns="http://www.w3.org/2000/svg"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/><path d="M36.21 192.639l160.921-74.805-81.778-5.063 119.519-67.69L49.06 126.138l88.8 2.712z" fill="rgb(252, 118, 97)"/></svg>
\ No newline at end of file
+<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="#FF6B81" d="M896 512.2v304.5c0 47.6-31.8 79.3-79.5 79.3h-609c-47.8 0-79.5-31.7-79.5-79.3V207c0-47.1 31.9-79 79.1-79h609.7c47.2 0 79.1 31.8 79.1 78.9.1 101.8.1 203.5.1 305.3zm-587.3-64.7c15.5-.5 21.6 3.5 23.9 12.8 2 8.2-2.2 15.3-12 19.9-3.1 1.5-6.5 2.6-9.9 3.5-11.8 3.1-23.7 6.1-35.6 8.9-33.8 8-67.8 14.8-101.4 23.8-12.1 3.2-19.4 11.1-20.2 21.3-1.4 17.3 13.1 28.5 31.7 24.3 48-10.8 95.9-21.8 143.9-32.6 9.5-2.1 18.8-5.3 28.6-5.4 9.4-.1 16.6 5.1 18.9 13 2.6 8.7-.6 16.4-9 21.8-3.4 2.2-7.1 3.5-11 4.6-33 9-66 18-99 27.1-14.1 3.9-21.5 13.9-19.4 26 2.5 14.6 15 22.4 30.3 18.7 19.4-4.6 38.5-10.7 58.2-14.1 8.1-1.4 15.6 2.9 19.1 10.1 3.4 7 1.9 14.7-3.9 20.6-4.9 5.1-11.4 7.1-17.9 8.8-38.2 10-76.3 20-114.5 29.9-7.8 2-14.1 6.2-19.2 12.4-6.4 7.8-6.5 16.9-.2 24.7 6.8 8.5 16 11.1 26.2 8.6 13.6-3.3 27-7.3 40.5-11C376.9 692.1 497 659 617.2 625.9c24.3-6.7 48.7-13.2 72.9-20.1 14.1-4 21-16.1 17.2-28.6-3.5-11.4-14.2-18-26.1-16.2-9.4 1.3-18.2 5.8-27.9 5.1-8.8-.7-14.2-5.2-16.1-13.2-1.6-7 1.8-13.9 9-18.1 5-2.9 10.5-4.7 16.1-6.1 55.3-13.6 110.6-27.1 165.9-40.7 8.2-2 16.5-4 24.6-6.6 12.9-4.1 19.5-15.7 16.5-27.9-3.1-12.3-14.2-19.3-27.6-17.3-2.5.4-4.9 1.1-7.3 1.7-82.8 20.7-165.7 41.5-248.5 62.3-4.9 1.2-9.8 1.9-14.8 1.5-7.8-.7-13-4.7-15.7-11.9-2.8-7.3-1.2-13.7 4.3-19.2 4.7-4.6 10.6-6.5 16.6-8.1 29.9-8 59.9-15.9 89.8-23.9 11.6-3.1 23.3-5.9 34.6-9.8 11.5-3.9 17.3-15 14.9-26.2-2.5-11.5-11.7-18.6-24.1-17.9-3.9.2-7.9 1.2-11.7 2.1-16.5 4.1-32.9 8.6-49.4 12.5-10.5 2.5-19.4-2.6-22.8-12.2-3.1-8.6 1.3-18.3 10.8-22.8 4.7-2.2 9.8-3.6 14.9-5 33.2-9.1 66.5-18.1 99.8-27 6-1.6 11.1-4.7 15.5-8.7 12.8-11.7 9.2-29.8-7.1-36.1-6.1-2.4-12.2-2.1-18.4-.3-140.8 40.1-282.5 76.6-423.9 114-23.7 6.2-47.4 12.3-70.9 19.1-12.5 3.6-18.6 15-15.9 26.8 2.7 11.7 13.5 19.1 26 17.3 7.4-1.1 14.6-3.3 21.9-5 17.4-4.4 34.9-8.7 48.4-11.9zm449.3 237c0-29.7-24.1-53.9-53.8-54-29.7-.1-54.1 23.9-54.2 53.6-.2 30.1 24.1 54.5 54.2 54.4 29.7-.1 53.8-24.3 53.8-54z"/></svg>
\ No newline at end of file
diff --git a/src/pages/@wcui/docs/app.vue b/src/pages/@wcui/docs/app.vue
index 4512e78..fb31f4e 100644
--- a/src/pages/@wcui/docs/app.vue
+++ b/src/pages/@wcui/docs/app.vue
@@ -1,14 +1,24 @@
 <template>
-  <h1>it works! docs page</h1>
-  <div>
-    <wc-link to="/playground.html">plyaground</wc-link>
-  </div>
+  <Topbar nav="docs" />
 </template>
 
 <script>
+import Topbar from '../index/components/topbar.vue'
 export default {
-  components: {}
+  components: {
+    Topbar
+  }
 }
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+body {
+  line-height: 1.5;
+  font-size: 14px;
+  color: var(--color-dark-1);
+}
+a {
+  color: inherit;
+  text-decoration: none;
+}
+</style>
diff --git a/src/pages/@wcui/index/app.vue b/src/pages/@wcui/index/app.vue
index 4ce1306..9548c15 100644
--- a/src/pages/@wcui/index/app.vue
+++ b/src/pages/@wcui/index/app.vue
@@ -1,14 +1,369 @@
 <template>
-  <h1>it works! index page</h1>
-  <div>
-    <wc-link to="/playground.html">plyaground</wc-link>
+  <Topbar />
+
+  <banner class="banner flex-ac">
+    <div class="wrapper flex-ac">
+      <h1>轻量级模块化组件库</h1>
+      <cite>一款基于Web Components, 面向未来的桌面UI组件库</cite>
+      <cite>不挑框架, 可无缝适配React, Angular, Avalon, Vue, jQuery...</cite>
+      <cite>网站快速成型工具</cite>
+    </div>
+  </banner>
+
+  <div class="colorful flex-ac">
+    <div class="wrapper flex-ac">
+      <header class="title">- 主题配色 -</header>
+      <section>
+        <ul class="blue">
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+        </ul>
+        <ul class="teal">
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+        </ul>
+        <ul class="green">
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+        </ul>
+        <ul class="red">
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+        </ul>
+        <ul class="orange">
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+        </ul>
+        <ul class="plain">
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+        </ul>
+        <ul class="grey">
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+        </ul>
+        <ul class="dark">
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+        </ul>
+      </section>
+    </div>
   </div>
+
+  <div class="basic-demo flex-ac">
+    <div class="wrapper flex-ac">
+      <header class="title">Buttons</header>
+      <section>
+        <wc-button type="primary">Primary Button</wc-button>
+        <wc-button type="secondary">Secondary Button</wc-button>
+        <wc-button type="info">Info Button</wc-button>
+        <wc-button type="help">Help Button</wc-button>
+      </section>
+      <section>
+        <wc-button solid>Solid Button</wc-button>
+        <wc-button solid type="success">Success Button</wc-button>
+        <wc-button solid type="warning">Warning Button</wc-button>
+        <wc-button solid type="danger">Danger Button</wc-button>
+      </section>
+
+      <header class="title">Inputs</header>
+      <section>
+        <wc-input placeholder="Normal Input"></wc-input>
+        <wc-input placeholder="Success Input" type="success"></wc-input>
+        <wc-input placeholder="Danger Input" type="danger"></wc-input>
+        <wc-input placeholder="Disabled Input" disabled></wc-input>
+      </section>
+
+      <div class="more">
+        <wc-link type="danger" to="./docs.html">更多组件...</wc-link>
+      </div>
+    </div>
+  </div>
+
+  <Footer />
 </template>
 
 <script>
+import Topbar from './components/topbar.vue'
+import Footer from './components/footer.vue'
 export default {
-  components: {}
+  components: {
+    Topbar,
+    Footer
+  }
 }
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+body {
+  line-height: 1.5;
+  font-size: 14px;
+  color: var(--color-dark-1);
+}
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.wrapper {
+  width: 960px;
+}
+
+.banner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 400px;
+  background: linear-gradient(to right bottom, #155799, #157879, #159857);
+
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 48px 0;
+
+    h1 {
+      line-height: 2;
+      font-size: 38px;
+      font-weight: normal;
+      color: var(--color-plain-1);
+    }
+    cite {
+      line-height: 2;
+      font-size: 16px;
+      font-style: normal;
+      color: var(--color-plain-3);
+    }
+
+    section {
+      margin-top: 64px;
+      text-align: center;
+
+      wc-button {
+        margin: 0 16px;
+      }
+    }
+  }
+}
+.colorful {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--color-plain-1);
+
+  .wrapper {
+    flex-direction: column;
+    padding: 32px 0;
+
+    .title {
+      position: relative;
+      line-height: 3;
+      font-size: 26px;
+      text-align: center;
+      color: var(--color-grey-2);
+    }
+
+    section {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 32px;
+
+      ul {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+      }
+      li {
+        height: 56px;
+        box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.03);
+      }
+
+      ul:nth-child(2),
+      ul:nth-child(5) {
+        li {
+          height: 48px;
+        }
+      }
+      ul:nth-child(3),
+      ul:nth-child(7) {
+        li {
+          height: 52px;
+        }
+      }
+    }
+
+    .blue {
+      li:nth-child(1) {
+        background: var(--color-blue-a);
+      }
+      li:nth-child(2) {
+        background: var(--color-blue-1);
+      }
+      li:nth-child(3) {
+        background: var(--color-blue-2);
+      }
+      li:nth-child(4) {
+        background: var(--color-blue-3);
+      }
+    }
+    .teal {
+      li:nth-child(1) {
+        background: var(--color-teal-a);
+      }
+      li:nth-child(2) {
+        background: var(--color-teal-1);
+      }
+      li:nth-child(3) {
+        background: var(--color-teal-2);
+      }
+      li:nth-child(4) {
+        background: var(--color-teal-3);
+      }
+    }
+    .green {
+      li:nth-child(1) {
+        background: var(--color-green-a);
+      }
+      li:nth-child(2) {
+        background: var(--color-green-1);
+      }
+      li:nth-child(3) {
+        background: var(--color-green-2);
+      }
+      li:nth-child(4) {
+        background: var(--color-green-3);
+      }
+    }
+    .red {
+      li:nth-child(1) {
+        background: var(--color-red-a);
+      }
+      li:nth-child(2) {
+        background: var(--color-red-1);
+      }
+      li:nth-child(3) {
+        background: var(--color-red-2);
+      }
+      li:nth-child(4) {
+        background: var(--color-red-3);
+      }
+    }
+    .orange {
+      li:nth-child(1) {
+        background: var(--color-orange-a);
+      }
+      li:nth-child(2) {
+        background: var(--color-orange-1);
+      }
+      li:nth-child(3) {
+        background: var(--color-orange-2);
+      }
+      li:nth-child(4) {
+        background: var(--color-orange-3);
+      }
+    }
+    .plain {
+      li:nth-child(1) {
+        background: #f7f8fb;
+      }
+      li:nth-child(2) {
+        background: var(--color-plain-1);
+      }
+      li:nth-child(3) {
+        background: var(--color-plain-2);
+      }
+      li:nth-child(4) {
+        background: var(--color-plain-3);
+      }
+    }
+    .grey {
+      li:nth-child(1) {
+        background: var(--color-grey-a);
+      }
+      li:nth-child(2) {
+        background: var(--color-grey-1);
+      }
+      li:nth-child(3) {
+        background: var(--color-grey-2);
+      }
+      li:nth-child(4) {
+        background: var(--color-grey-3);
+      }
+    }
+    .dark {
+      li:nth-child(1) {
+        background: var(--color-dark-a);
+      }
+      li:nth-child(2) {
+        background: var(--color-dark-1);
+      }
+      li:nth-child(3) {
+        background: var(--color-dark-2);
+      }
+      li:nth-child(4) {
+        background: var(--color-dark-3);
+      }
+    }
+  }
+}
+
+.basic-demo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .wrapper {
+    flex-direction: column;
+    padding: 32px 0;
+
+    .title {
+      line-height: 2;
+      font-size: 22px;
+      color: var(--color-grey-2);
+    }
+
+    section {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 32px;
+
+      wc-button,
+      wc-input {
+        flex: 1;
+        margin: 0 16px;
+      }
+    }
+
+    .more {
+      text-align: center;
+      a {
+        display: inline-flex;
+        padding: 4px 16px;
+        border-radius: 6px;
+        box-shadow: 0 0 5px rgba(0, 0, 0, 0.06);
+
+        &:hover {
+          color: var(--color-red-1);
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/pages/@wcui/index/components/footer.vue b/src/pages/@wcui/index/components/footer.vue
new file mode 100644
index 0000000..d2058d4
--- /dev/null
+++ b/src/pages/@wcui/index/components/footer.vue
@@ -0,0 +1,68 @@
+<template>
+  <footer class="footer">
+    <div class="wrapper">
+      <section class="nav">
+        <a href="/">@bdjs 首页</a> |
+        <a
+          href="https://github.com/bd-js/wcui/blob/master/LICENSE"
+          target="_blank"
+          >MIT 开源协议</a
+        >
+        | <a href="https://github.com/bd-js" target="_blank">作者</a> |
+        <a href="https://github.com/bd-js/wcui" target="_blank">GitHub</a>
+      </section>
+      <section class="copyright">
+        &copy;2023, Designed By Yutent, Powered By
+        <a target="_blank" href="">@bd/core</a>,<a target="_blank" href=""
+          >@bytedo/fite</a
+        >
+      </section>
+    </div>
+  </footer>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss" scoped>
+.footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 260px;
+  border-top: 1px solid var(--color-plain-3);
+
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+
+    .nav {
+      display: flex;
+      justify-content: center;
+      color: var(--color-plain-3);
+
+      a {
+        margin: 0 32px;
+        color: var(--color-red-1);
+      }
+    }
+
+    .copyright {
+      margin-top: 16px;
+      color: var(--color-grey-2);
+
+      a {
+        color: var(--color-teal-1);
+      }
+    }
+
+    a {
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/pages/@wcui/index/components/topbar.vue b/src/pages/@wcui/index/components/topbar.vue
new file mode 100644
index 0000000..0b3781a
--- /dev/null
+++ b/src/pages/@wcui/index/components/topbar.vue
@@ -0,0 +1,75 @@
+<template>
+  <header class="topbar noselect">
+    <div class="logo">
+      <img src="/assets/logo.svg" alt="Web Components" />
+      <span>Web Components</span>
+    </div>
+
+    <nav class="menu">
+      <a :class="{ active: nav === 'index' }" href="./index.html">主页</a>
+      <a :class="{ active: nav === 'docs' }" href="./docs.html">文档</a>
+      <a target="_blank" href="https://github.com/bd-js/wcui"
+        ><img class="github" src="/assets/github.svg" alt="Web Components"
+      /></a>
+    </nav>
+  </header>
+</template>
+
+<script>
+export default {
+  props: {
+    nav: { type: String, default: 'index' }
+  },
+  data() {
+    return {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 54px;
+  padding: 0 64px;
+  border-bottom: 1px solid var(--color-plain-2);
+
+  .logo {
+    display: flex;
+    align-items: center;
+    font-size: 20px;
+
+    img {
+      width: 40px;
+      height: 40px;
+    }
+  }
+
+  .menu {
+    display: flex;
+    align-items: center;
+    font-size: 18px;
+
+    a {
+      display: flex;
+      align-items: center;
+      margin-left: 48px;
+      transition: color 0.15s linear;
+
+      &.active {
+        color: var(--color-red-1);
+        text-decoration: underline;
+      }
+
+      &:hover {
+        color: var(--color-red-3);
+      }
+    }
+
+    .github {
+      width: 26px;
+    }
+  }
+}
+</style>