diff --git a/document/common/js/ajax.js b/document/common/js/ajax.js
new file mode 100644
index 0000000000000000000000000000000000000000..07ede88f022f4b47208461ed40ca06bdc3ab14cd
--- /dev/null
+++ b/document/common/js/ajax.js
@@ -0,0 +1,16 @@
+export default function ajax (url) {
+  return new Promise(function (resolve, reject) {
+    const xhr = new window.XMLHttpRequest()
+    xhr.open('GET', url, true)
+    xhr.send(null)
+    xhr.onreadystatechange = () => {
+      if (xhr.readyState === 4) {
+        if (xhr.status >= 200 && xhr.status < 300) {
+          resolve(xhr.responseText)
+        } else {
+          reject(xhr)
+        }
+      }
+    }
+  })
+}
diff --git a/document/common/stylus/base.styl b/document/common/stylus/base.styl
index 2e2b7b40a00ed8a774d3e80871e16b1747e58def..d66244513d645206ac6e1a4cf4c827875bda448d 100644
--- a/document/common/stylus/base.styl
+++ b/document/common/stylus/base.styl
@@ -4,7 +4,7 @@ html, body
   width: 100%
   height: 100%
   color: $color-dark-grey
-  background: $color-background
+  background: white
   font-family -apple-system,"Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","WenQuanYi Micro Hei","Microsoft Yahei",sans-serif
   -webkit-font-smoothing antialiased
 input
diff --git a/document/common/stylus/md.styl b/document/common/stylus/md.styl
index 9939e03fbc8b01cf3e5f5556e42eda0d8167cca6..766c010a22437754ea047790118df9005764b157 100644
--- a/document/common/stylus/md.styl
+++ b/document/common/stylus/md.styl
@@ -4,6 +4,8 @@
   font-size: $fontsize-medium
   line-height: 1.6
   color: $color-dark-grey
+  .hljs
+    background-color: #F9F8F8
   p
     margin: 1.2em 0
     .anchor
@@ -11,11 +13,11 @@
   h2
     margin-top: 1.2em
     margin-bottom: .8em
-    font-size: 1.5em
+    font-size: 2em
     font-weight: 600
   h3
     margin: 1em 0 1em
-    font-size: 1.25em
+    font-size: 1.4em
     font-weight: 600
   h4
     margin: 0.8em 0 0.8em
@@ -40,7 +42,7 @@
       word-break: break-word
     th
       font-weight: 600
-      background-color: $color-row-line
+      background-color: #F9F8F8
   ul, ol, li
     line-height: 20px
   li
@@ -78,4 +80,6 @@ strong
   font-weight: bold
 a
   text-decoration: none
-  color: rgb(0, 154, 97)
+  color:#3CA0E6
+  &:hover
+    color: #137DC6
diff --git a/document/components/badge/badge.vue b/document/components/badge/badge.vue
new file mode 100644
index 0000000000000000000000000000000000000000..71b81c6c4afdcd60de8ea30c33296558c48b5272
--- /dev/null
+++ b/document/components/badge/badge.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="badge">
+    <span class="badge-left">{{badgeName}}</span>
+    <span class="badge-right">
+    {{badgeValue}}</span>
+  </div>
+</template>
+<script>
+  import ajax from '../../common/js/ajax.js'
+  const urlMap = {
+    Star: 'https://img.shields.io/github/stars/didi/cube-ui.json',
+    Fork: 'https://img.shields.io/github/forks/didi/cube-ui.json',
+    Watch: 'https://img.shields.io/github/watchers/didi/cube-ui.json'
+  }
+  export default{
+    data() {
+      return {
+        badgeName: '',
+        badgeValue: ''
+      }
+    },
+    props: {
+      type: {
+        type: String,
+        default () {
+          return ''
+        }
+      }
+    },
+    mounted() {
+      let badge = this.type
+      this.getData(badge)
+    },
+    methods: {
+      getData (badge) {
+        let url = urlMap[badge]
+        ajax(url).then((response) => {
+          let result = JSON.parse(response)
+          console.log(result)
+          this.badgeName = result.name
+          this.badgeValue = result.value
+        })
+      }
+    }
+  }
+</script>
+<style lang="stylus">
+  .badge
+    display: inline-block
+    text-align: center
+    border: 1px #4AA8FF solid
+    border-radius: 3px
+    font-size: 0px
+    color: #000000
+    margin-right: 3px
+    span
+      display: inline-block
+      font-size: 12px
+    .badge-left
+      padding: 4px 11px
+      background-color: #89C6FF
+    .badge-right
+      padding: 4px 11px
+      border-left: 1px #4AA8FF solid
+      background-color: white
+</style>
diff --git a/document/components/display/display.vue b/document/components/display/display.vue
index 2033c0edb2be09761bc87a54d876a1b1feda196b..3e78663f3f4a00e1ae1f8edd0af26b8fbe7e90b3 100644
--- a/document/components/display/display.vue
+++ b/document/components/display/display.vue
@@ -2,7 +2,7 @@
   <div class="page-display">
     <div class="display-wrapper">
       <section class="mofang-demo">
-        <iframe :src="ifrSrc" frameborder="0" width="100%" height="100%"></iframe>
+        <iframe :src="ifrSrc" frameborder="0" width="100%" height="100%" scrolling="no"></iframe>
       </section>
     </div>
   </div>
@@ -39,21 +39,24 @@
   .page-display
     position: relative
     .display-wrapper
-      position: absolute
+      position: relative 
       width: 330px
       height: 645px
       top: 50%
-      left: 50%
-      transform: translate(-50%, -50%)
+      transform: translate(0, -50%)
       background: url("./iphoneX.png") no-repeat
       background-size: cover
+      margin: 0 45px
       .mofang-demo
         position: absolute
         top: 64px
         left: 22px
-        right: 22px
+        width: 286px
         bottom: 36px
         overflow: hidden
         border-radius: 0 0 35px 35px
         background-color: #edf0f4
+        iframe
+          // safari shit
+          width: 286px!important
 </style>
diff --git a/document/components/example/example.vue b/document/components/example/example.vue
index 4d3f83e4d9ab1172e27b785263ae07c38aa8579c..dba3fe1e2ddf381c7750dd18de0132e9fa55fd03 100644
--- a/document/components/example/example.vue
+++ b/document/components/example/example.vue
@@ -31,8 +31,7 @@
       display: inline-block
       margin-bottom: 20px
     .page-display
-      width: 100%
       .display-wrapper
-        position: static
+        margin: 0
         transform: none
 </style>
diff --git a/document/components/home/home.vue b/document/components/home/home.vue
index d50d89b5585ce19c052a3ec3bba7af401216f853..ae2e6c5befd9783334f3b716f46dccc1c9764c08 100644
--- a/document/components/home/home.vue
+++ b/document/components/home/home.vue
@@ -9,7 +9,9 @@
         <site-lang></site-lang>
       </div>
       <span class="toggle-nav" @click="toggleNav">
-        <img src="./nav.svg">
+        <svg class="icon" viewBox="0 0 1024 1024" width="32" height="32">
+          <path d="M151.990813 175.990625h719.994375a35.999719 35.999719 0 0 1 35.999718 35.999719v24.743807a35.999719 35.999719 0 0 1-35.999718 35.999718h-719.994375a35.999719 35.999719 0 0 1-35.999719-35.999718V211.990344a35.999719 35.999719 0 0 1 35.999719-35.999719z m0 288.741744h719.994375a35.999719 35.999719 0 0 1 35.999718 35.999719v22.511824a35.999719 35.999719 0 0 1-35.999718 35.999719h-719.994375a35.999719 35.999719 0 0 1-35.999719-35.999719v-22.511824a35.999719 35.999719 0 0 1 35.999719-35.999719z m0 286.509762h719.994375a35.999719 35.999719 0 0 1 35.999718 35.999719v24.743806a35.999719 35.999719 0 0 1-35.999718 35.999719h-719.994375a35.999719 35.999719 0 0 1-35.999719-35.999719v-24.743806a35.999719 35.999719 0 0 1 35.999719-35.999719z" fill="#dedcdc"></path>
+        </svg>
       </span>
     </div>
     <div class="router-view">
@@ -68,7 +70,7 @@
     overflow: hidden
     @media screen and (max-width: 960px)
       padding: 0
-      background-color: $color-regular-blue
+      background-color: transparent
     .toggle-nav
       display: none
       @media screen and (max-width: 960px)
@@ -87,6 +89,8 @@
         height: 20px
     &.active
       height: 255px
+      .tabs
+          height: auto
     .logo
       float: left
       padding: 0 28px
@@ -99,10 +103,13 @@
     .tabs
       float: right
       padding: 0 30px
+      box-shadow: none
+      height: 0
       @media screen and (max-width: 960px)
         float: none
         padding: 0
-        border-top: solid 1px rgba(255, 255, 255, 0.5)
+        background-color: #fbfbfb
+        box-shadow: 0 -2px 8px rgba(0,0,0,0.1)
       .tab
         display: inline-block
         margin: 0 10px
@@ -112,7 +119,7 @@
           display: block
           line-height: 45px
           margin: 0 20px
-          color: $color-white
+          color: black
         &:hover
           color: $color-orange
       .router-link-active
diff --git a/document/components/index/index.vue b/document/components/index/index.vue
index 65e6d7d595e915cdde443a4e7fa5a77aa2144933..eb6da29d36fd3cef198573f85d9f37752823b650 100644
--- a/document/components/index/index.vue
+++ b/document/components/index/index.vue
@@ -6,9 +6,13 @@
         <slot name="desc"></slot>
       </p>
       <div class="ghbtns">
-        <a href="https://github.com/didi/cube-ui"><img src="https://img.shields.io/github/stars/didi/cube-ui.svg?style=social&label=Star"></a>
-        <a href="https://github.com/didi/cube-ui"><img src="https://img.shields.io/github/forks/didi/cube-ui.svg?style=social&label=Fork"></a>
-        <a href="https://github.com/didi/cube-ui"><img src="https://img.shields.io/github/watchers/wepyjs/wepy.svg?style=social&label=Watch"></a>
+        <Badge type="Star"></Badge>
+        <Badge type="Fork"></Badge>
+        <Badge type="Watch"></Badge>
+      </div>
+      <div>
+        <router-link to="/zh-CN/docs/introduction" class="btn-link"><span>介绍</span></router-link>
+        <router-link to="/zh-CN/docs/quick-start" class="btn-link btn-active"><span>快速开始</span></router-link>
       </div>
     </div>
     <section class="features">
@@ -46,9 +50,16 @@
 </template>
 
 <script>
-  export default {}
+  import Badge from '../badge/badge.vue'
+  export default {
+    components: {
+      Badge
+    }
+  }
 </script>
 <style lang="stylus">
+@require "~@/common/stylus/variable.styl"
+
   .home-index
     min-height: 100%
     box-sizing: border-box
@@ -62,19 +73,32 @@
       background: url("./cube.png") no-repeat 520px -31px
       background-size: 1515px 696px
       @media screen and (max-width: 960px)
-        padding: 50px 0 30px 0
+        padding: 40px 0 30px 0
+        margin-top: 0
         text-align: center
       h2
         font-size: 60px
         @media screen and (max-width: 960px)
           font-size: 30px
       > p
-        margin: 30px 0
+        margin: 30px 0 26px 0
         font-size: 18px
-  .ghbtns
-    height: 22px
-    a
-      display: inline-block
+  .btn-link
+    display: inline-block
+    box-sizing: border-box
+    width: 164px
+    height: 42px
+    text-align: center
+    line-height: 42px
+    font-size: $fontsize-large-x
+    color: #000000
+    background-color: #89C6FF
+    border-radius: 3px
+    margin-top: 36px
+    margin-right: 18px
+    border: 2px solid #89C6FF
+  .btn-active
+    background-color: white
   .features
     padding: 60px 0 20px 0
     background-color: #FBFBFB
diff --git a/document/components/lang/lang.vue b/document/components/lang/lang.vue
index cabbc38bef11e0b90f0c935b88a0f8903ea4c4fb..4f64c161e6d0858379c9c42abd6956e42ae6dd45 100644
--- a/document/components/lang/lang.vue
+++ b/document/components/lang/lang.vue
@@ -38,7 +38,7 @@
     a
       color: #4B4B4C
       @media screen and (max-width: 960px)
-        color: $color-white
+        color: black
       &:active, &:hover
         color: $color-orange
 </style>
diff --git a/document/components/side-list/side-list.vue b/document/components/side-list/side-list.vue
index b6a2ee8fb6f4647d5a9dc62474053a10f6e22e11..4274a6424a5f6d39fd8fd61861d61dd0aad4c3d6 100644
--- a/document/components/side-list/side-list.vue
+++ b/document/components/side-list/side-list.vue
@@ -28,7 +28,6 @@
         docPath = newPath.split('/').pop()
         root = this.seekRoot(navList, docPath)
         rootNav = root && navList[root]
-        console.log('xx', rootNav, root)
         this.$set(rootNav, 'isRootActive', true)
       }, {immediate: true})
     },
diff --git a/document/components/side-nav/side-nav.vue b/document/components/side-nav/side-nav.vue
index 0d6171c596085ba078dc208b0978203f1bc4ec95..9ba80fad6c86107e558a2d0570051df3d9f1b995 100644
--- a/document/components/side-nav/side-nav.vue
+++ b/document/components/side-nav/side-nav.vue
@@ -2,7 +2,7 @@
   <ul class="nav-ul">
     <li class="nav-li" v-for="(item, key) in data" :class="{open: item.isRootActive}" :key="key">
       <template v-if="item.name">
-        <p class="nav-name" @click="Switch(item)">{{item.name}}</p>
+        <p class="nav-name" @click="derail(item)">{{item.name}}</p>
         <side-nav :data="item.subList"></side-nav>
       </template>
       <router-link
@@ -29,7 +29,7 @@
       }
     },
     methods: {
-      Switch (item) {
+      derail (item) {
         let nowActive = item.isRootActive
         this.$set(item, 'isRootActive', !nowActive)
       }
@@ -55,7 +55,7 @@
       left: 30px
       top: 0
       font-size: 22px
-      color: $color-black
+      color: #000000
     .arrow
       width: 10px
       height: 10px
@@ -73,13 +73,13 @@
         top: 0
         right: 0px
       &::before
-        border-top-color: $color-black
+        border-top-color: #000000
         top: 2px
     .rotate
       transform: rotate(180deg)
     .nav-name
       font-size: $fontsize-large-xxx
-      color: $color-black
+      color: #000000
       border-bottom: #E3E3E3 solid 1px
       padding: 15px 0 15px 30px
       margin-left: 30px
@@ -92,7 +92,7 @@
         padding: 5px 0
       .nav-name
         font-size: $fontsize-large-x
-        color: $color-black
+        color: #000000
         border: none
         padding: 0
         margin: 0
@@ -111,7 +111,7 @@
           content: ""
           width: 20px
           height: 100%
-          background-color: $color-orange-light
+          background-color: #FFC9A9
           position: absolute
           z-index: 1
           left: 0
diff --git a/document/components/viewport/viewport.vue b/document/components/viewport/viewport.vue
index 9bf83a375942afc5cf6a978c134bb529f6db3361..a33fde3fb1f3acb2aa5984d6975ffd8c6749c622 100644
--- a/document/components/viewport/viewport.vue
+++ b/document/components/viewport/viewport.vue
@@ -113,34 +113,33 @@
       &.active
         background-color: rgba(0, 0, 0 ,0.2)
         transition: all 0.4s ease
-  .page-sidelist
-    flex: none
-    width: 280px
-    height: 100%
-    box-sizing: border-box
-    overflow-y: auto
-    padding-right: 40px
-    @media screen and (max-width: 960px)
+    .page-sidelist
+      flex: none
+      width: 280px
       height: 100%
-      padding: 5px 20px
-  .page-doc
-    flex: 1
-    height: 100%
-    padding: 44px 20px 20px 20px
-    box-sizing: border-box
-    overflow-y: auto
-    @media screen and (max-width: 960px)
-      flex: 1 1 100%
-      height: auto
-      padding: 20px 20px 0 20px
-    h2:first-child
-      margin-top: 0
-  .page-display
-    flex: none
-    height: 100%
-    width: 420px
-    overflow-y: auto
-    @media screen and (max-width: 960px)
-      flex: 1 1 100%
-      height: 800px
+      box-sizing: border-box
+      overflow-y: auto
+      padding-right: 40px
+      @media screen and (max-width: 960px)
+        height: 100%
+        padding: 5px 20px
+    .page-doc
+      flex: 1
+      height: 100%
+      padding: 44px 20px 20px 20px
+      box-sizing: border-box
+      overflow-y: auto
+      @media screen and (max-width: 960px)
+        flex: 1 1 100%
+        height: auto
+        padding: 20px 20px 0 20px
+      h2:first-child
+        margin-top: 0
+    .page-display
+      flex: none
+      height: 100%
+      overflow-y: auto
+      @media screen and (max-width: 960px)
+        flex: 1 1 100%
+        height: 800px
 </style>
diff --git a/document/main.js b/document/main.js
index 94acec8cfbb14944e7beed40c76f58f63109514f..e1d19d8d24c1c6d66e4de4ced475c19b0c4c66c6 100644
--- a/document/main.js
+++ b/document/main.js
@@ -4,16 +4,16 @@ import 'babel-polyfill'
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
-import hljs from './common/js/highlight'
+import './common/js/highlight'
 
 // TODO 需要使用 vConsole 的同学请打开注释即可
 /* eslint-disable no-unused-vars */
 // import vConsole from 'vconsole'
 
 import './common/stylus/index.styl'
-import 'highlight.js/styles/solarized-dark.css'
+import 'highlight.js/styles/atelier-dune-light.css'
 
-hljs.initHighlightingOnLoad()
+// hljs.initHighlightingOnLoad()
 
 import './common/js/directive.js'
 
diff --git a/src/common/stylus/var/color.styl b/src/common/stylus/var/color.styl
index 21c593a644ebc4c9074be6c1f5c7c2491f23b591..4566a1fa62567f4eb722b95e61ce7fca7e320c26 100644
--- a/src/common/stylus/var/color.styl
+++ b/src/common/stylus/var/color.styl
@@ -1,7 +1,6 @@
 // color vars
 //// basic
-$color-orange = #FC9153
-$color-orange-light = #FFC9A9
+$color-orange = #fc9153
 $color-regular-blue = #4a4c5b
 $color-background = #f3f4f5
 $color-white = #fff
@@ -35,6 +34,3 @@ $color-col-line = #f5f5f5
 
 /// mask
 $color-mask-bg = rgba(37, 38, 45, .4)
-
-//black
-$color-black = #000000
\ No newline at end of file