diff --git a/assets/js/aside.js b/assets/js/aside.js
index 319e4613d..bd12206b0 100644
--- a/assets/js/aside.js
+++ b/assets/js/aside.js
@@ -5,7 +5,7 @@ var getElementTopToScreenTop = function(element) {
 }
 
 var getElementBottomToScreenBottom = function(element) {
-  return $(window).height() + $(document).scrollTop() - element.offset().top - element.height()
+  return $(window).height() + $(document).scrollTop() - element.offset().top - element.outerHeight()
 }
 
 var getElementBottomToTop = function(element) {
@@ -20,12 +20,11 @@ var bindAsideScroll = function() {
     return false
   }
   var content = $('.middle-div')
-  var mdBody = $('.md-body')
   var aside = $('.aside')
   var contentToTop = getElementTopToScreenTop(content)
   aside.css("top", contentToTop)
   var asideInner = $('.aside .inner-div')
-  scrollEvent(content, mdBody, aside, asideInner)
+  scrollEvent(content, aside, asideInner)
 }
 
 var bindLeftTreeScroll = function() {
@@ -34,25 +33,24 @@ var bindLeftTreeScroll = function() {
     return false
   }
   var content = $('.middle-div')
-  var mdBody = $('.md-body')
   var aside = $('.common-layout .left-tree')
   var contentToTop = getElementTopToScreenTop(content)
   aside.css("top", contentToTop)
   var asideInner = $('.left-div .inner-tree')
-  scrollEvent(content, mdBody, aside, asideInner)
+  scrollEvent(content, aside, asideInner)
 }
 
-var scrollEvent = function(content, mdBody, aside, asideInner) {
+var scrollEvent = function(content, aside, asideInner) {
   $( window ).scroll(function() {
     var headerHeight = $('header').outerHeight()
     var contentToTop = getElementTopToScreenTop(content)
-    if (contentToTop < headerHeight) {
+    if (contentToTop < headerHeight + 10) {
       aside.css("top", headerHeight + 10)
       aside.css("bottom", 10)
-      var s1 = getElementBottomToTop(mdBody)
+      var s1 = getElementBottomToTop(content)
       var s2 = getElementBottomToTop(asideInner)
       if (s2 > s1) {
-        var bottom = getElementBottomToScreenBottom(mdBody)
+        var bottom = getElementBottomToScreenBottom(content)
         aside.css("bottom", bottom)
         aside.css("top", "auto")
       }
diff --git a/assets/scss/common.scss b/assets/scss/common.scss
index 0526d70aa..7cb2d3e97 100644
--- a/assets/scss/common.scss
+++ b/assets/scss/common.scss
@@ -269,7 +269,7 @@ section {
   margin: 20px 0;
   position: relative;
 
-  p {
+  & > p {
     padding: 0 10px;
     margin: 0!important;
     height: 30px;
@@ -277,43 +277,43 @@ section {
     color: #ffffff;
   }
 
-  div {
+  & > div {
     padding: 10px;
   }
 }
 
 .notices.note {
-  p {
+  & > p {
     background: #6ab0de
   }
-  div {
+  & > div {
     background: #e7f2fa;
   }
 }
 
 .notices.tip {
-  p {
+  & > p {
     background: #78C578
   }
-  div {
+  & > div {
     background: #E6F9E6;
   }
 }
 
 .notices.info {
-  p {
+  & > p {
     background: #F0B37E
   }
-  div {
+  & > div {
     background: #FFF2DB;
   }
 }
 
 .notices.warning {
-  p {
+  & > p {
     background: #E06F6C
   }
-  div {
+  & > div {
     background: #FAE2E2;
   }
 }
diff --git a/assets/scss/content.scss b/assets/scss/content.scss
index e49f11253..533692453 100644
--- a/assets/scss/content.scss
+++ b/assets/scss/content.scss
@@ -153,7 +153,7 @@
       .inner-div {
         max-height: 100%;
         position: relative;
-        overflow: scroll;
+        overflow-y: auto;
     }
 
       .title {
diff --git a/assets/scss/doc.scss b/assets/scss/doc.scss
index c9201fdcd..8ba4aa6b3 100644
--- a/assets/scss/doc.scss
+++ b/assets/scss/doc.scss
@@ -555,6 +555,7 @@ body {
         .page-div {
             position: relative;
             margin-top: 20px;
+            height: 30px;
 
             a {
                 position: absolute;
@@ -594,6 +595,7 @@ body {
         left: 50%;
         transform: translateX(420px);
         width: 160px;
+        border-left: 1px solid #dde1e6;
         @media only screen and (max-width: $mobile-max-width) {
            display: none;
         }
@@ -603,7 +605,6 @@ body {
             position: relative;
             overflow-y: auto;
             padding-left: 10px;
-            border-left: 1px solid #dde1e6;
         }
 
         .title {
@@ -641,5 +642,4 @@ body {
             }
         }
     }
-}
-
+}
\ No newline at end of file
diff --git a/content/zh/docs/_index.md b/content/zh/docs/_index.md
index a83f2671d..6215a2039 100644
--- a/content/zh/docs/_index.md
+++ b/content/zh/docs/_index.md
@@ -2,7 +2,7 @@
 title: "Documentation"
 css: "scss/docs.scss"
 
-LinkTitle: "Documentation"
+LinkTitle: "文档"
 
 
 section1:
diff --git a/layouts/docs/single.html b/layouts/docs/single.html
index cdb094065..e55c37605 100644
--- a/layouts/docs/single.html
+++ b/layouts/docs/single.html
@@ -1,276 +1,287 @@
-{{ define "main" }}
+<!DOCTYPE html>
+<html lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en-US{{ end }}">
+<head>
+    {{- partial "head.html" . -}}
+</head>
 
-<section class='section-1 bg-cover'>
-    <div class="common-layout">
-        {{ partial "breadcrumb.html" . }}
-
-        <div class="title-div">
-            {{ $sections := .FirstSection.Sections.ByWeight }}
-            {{ $secondSection := .FirstSection }}
-            {{ $page := . }}
-            {{ range $sections }}
-                {{ if $page.IsDescendant . }}
-                    {{ $secondSection = . }}
+<body>
+{{- partial "header.html" . -}}
+<main class='main-section {{ if eq .Site.Language.Lang "zh"}} padding{{ end }}'>
+    <section class='section-1 bg-cover'>
+        <div class="common-layout">
+            {{ partial "breadcrumb.html" . }}
+    
+            <div class="title-div">
+                {{ $sections := .FirstSection.Sections.ByWeight }}
+                {{ $secondSection := .FirstSection }}
+                {{ $page := . }}
+                {{ range $sections }}
+                    {{ if $page.IsDescendant . }}
+                        {{ $secondSection = . }}
+                    {{ end }}
                 {{ end }}
-            {{ end }}
-            <h1>{{ $secondSection.LinkTitle }}</h1>
-            <div class="menu section-control">
-                <div></div>
-                <div></div>
-                <div></div>
-            </div>
-        </div>
-
-        <div class="search-div">
-            {{ partial "searchInput" . }}
-        </div>
-    </div>
-</section>
-
-<section class="section-menu">
-{{ with (.GetPage "/docs") }}
-    <div class="common-layout">
-        {{ partial "section" . }}
-    </div>
-{{ end }}
-</section>
-
-<section class="section-2">
-    <div class="common-layout">
-        <div class="left-div left-tree">
-            <div class="inner-tree">
-                {{ partial "tree.html" . }}
-                <!-- <div class="download-div">
-                    <span class="download-icon"></span>
-                    <span>{{ i18n "Download this page (PDF)" }}</span>
-                </div> -->
-            </div>
-        </div>
-        <div class="second-section-menu">
-            <div></div>
-            <div></div>
-            <div></div>
-        </div>
-        <div class="middle-div">
-            <div class="top-div common-flex-layout">
-                <div class="contributor-div">
-                    <span>{{ i18n "Last updated" }}:</span>
-                    <span class="update-time"></span>
-                    <a href="{{ .Site.Params.githubBlobUrl }}/{{ .Site.Language.Lang }}/{{ .File.Path }}" target="_blank" rel="noopener noreferrer">
-                        <ul class="contributor-avatar"></ul>
-                    </a>
-                    <span class="more-contributor"></span>
+                <h1>{{ $secondSection.LinkTitle }}</h1>
+                <div class="menu section-control">
+                    <div></div>
+                    <div></div>
+                    <div></div>
                 </div>
-                <div class="mutual-div common-flex-layout">
-                    <div class="edit-div">
-                        <a href="{{ .Site.Params.githubEditUrl }}/{{ .Site.Language.Lang }}/{{ .File.Path }}" target="_blank" rel="noopener noreferrer">
-                            <span class="icon-span"></span>
-                            <span>{{ i18n "edit" }}</span>
+            </div>
+    
+            <div class="search-div">
+                {{ partial "searchInput" . }}
+            </div>
+        </div>
+    </section>
+    
+    <section class="section-menu">
+    {{ with (.GetPage "/docs") }}
+        <div class="common-layout">
+            {{ partial "section" . }}
+        </div>
+    {{ end }}
+    </section>
+    
+    <section class="section-2">
+        <div class="common-layout">
+            <div class="left-div left-tree">
+                <div class="inner-tree">
+                    {{ partial "tree.html" . }}
+                    <!-- <div class="download-div">
+                        <span class="download-icon"></span>
+                        <span>{{ i18n "Download this page (PDF)" }}</span>
+                    </div> -->
+                </div>
+            </div>
+            <div class="second-section-menu">
+                <div></div>
+                <div></div>
+                <div></div>
+            </div>
+            <div class="middle-div">
+                <div class="top-div common-flex-layout">
+                    <div class="contributor-div">
+                        <span>{{ i18n "Last updated" }}:</span>
+                        <span class="update-time"></span>
+                        <a href="{{ .Site.Params.githubBlobUrl }}/{{ .Site.Language.Lang }}/{{ .File.Path }}" target="_blank" rel="noopener noreferrer">
+                            <ul class="contributor-avatar"></ul>
                         </a>
+                        <span class="more-contributor"></span>
                     </div>
-                    <div class="feedback-div">
-                        <a href="{{ .Site.Params.githubUrl }}/issues/new" target="_blank" rel="noopener noreferrer">
-                        <span class="icon-span"></span>
-                        <span>{{ i18n "feedback" }}</span>
-                        </a>
-                    </div>
-                    <div class="share-div">
-                        <div>
-                            <span class="icon-span"></span>
-                            <span>{{ i18n "share" }}</span>
+                    <div class="mutual-div common-flex-layout">
+                        <div class="edit-div">
+                            <a href="{{ .Site.Params.githubEditUrl }}/{{ .Site.Language.Lang }}/{{ .File.Path }}" target="_blank" rel="noopener noreferrer">
+                                <span class="icon-span"></span>
+                                <span>{{ i18n "edit" }}</span>
+                            </a>
+                        </div>
+                        <div class="feedback-div">
+                            <a href="{{ .Site.Params.githubUrl }}/issues/new" target="_blank" rel="noopener noreferrer">
+                            <span class="icon-span"></span>
+                            <span>{{ i18n "feedback" }}</span>
+                            </a>
+                        </div>
+                        <div class="share-div">
+                            <div>
+                                <span class="icon-span"></span>
+                                <span>{{ i18n "share" }}</span>
+                            </div>
+                            <ul>
+                                <li>
+                                    <img src="/images/docs/twitter.svg" alt="twitter">
+                                    <a href="http://twitter.com/share?url={{ .Permalink }}&text={{ .Title }}" target="_blank" rel="noopener noreferrer">twitter</a>
+                                </li>
+                                <li>
+                                    <img src="/images/docs/linkedIn.svg" alt="linkedIn">
+                                    <a href="http://www.linkedin.com/shareArticle?mini=true&url={{ .Permalink }}" target="_blank" rel="noopener noreferrer">linkedIn</a>
+                                </li>
+                                <li>
+                                    <img src="/images/docs/facebook.svg" alt="facebook">
+                                    <a href="http://www.facebook.com/sharer.php?u={{ .Permalink }}" target="_blank" rel="noopener noreferrer">facebook</a>
+                                </li>
+                                <li>
+                                    <img src="/images/docs/reddit.svg" alt="reddit">
+                                    <a href="http://reddit.com/submit?url={{ .Permalink }}&title={{ .Title }}" target="_blank" rel="noopener noreferrer">reddit</a>
+                                </li>
+                                <li>
+                                    <img src="/images/docs/email.svg" alt="email" >
+                                    <a href="mailto:kubesphere@gmail.com" target="_blank" rel="noopener noreferrer">email</a>
+                                </li>
+                            </ul>
                         </div>
-                        <ul>
-                            <li>
-                                <img src="/images/docs/twitter.svg" alt="twitter">
-                                <a href="http://twitter.com/share?url={{ .Permalink }}&text={{ .Title }}" target="_blank" rel="noopener noreferrer">twitter</a>
-                            </li>
-                            <li>
-                                <img src="/images/docs/linkedIn.svg" alt="linkedIn">
-                                <a href="http://www.linkedin.com/shareArticle?mini=true&url={{ .Permalink }}" target="_blank" rel="noopener noreferrer">linkedIn</a>
-                            </li>
-                            <li>
-                                <img src="/images/docs/facebook.svg" alt="facebook">
-                                <a href="http://www.facebook.com/sharer.php?u={{ .Permalink }}" target="_blank" rel="noopener noreferrer">facebook</a>
-                            </li>
-                            <li>
-                                <img src="/images/docs/reddit.svg" alt="reddit">
-                                <a href="http://reddit.com/submit?url={{ .Permalink }}&title={{ .Title }}" target="_blank" rel="noopener noreferrer">reddit</a>
-                            </li>
-                            <li>
-                                <img src="/images/docs/email.svg" alt="email" >
-                                <a href="mailto:kubesphere@gmail.com" target="_blank" rel="noopener noreferrer">email</a>
-                            </li>
-                        </ul>
                     </div>
                 </div>
-            </div>
-
-            <div class="content-div main-div">
-                <div class="md-body">
-                    <h1>{{ .Title }}</h1>
-                    {{ .Content }}
+    
+                <div class="content-div main-div">
+                    <div class="md-body">
+                        <h1>{{ .Title }}</h1>
+                        {{ .Content }}
+                    </div>
                 </div>
+                {{ if .IsPage }}
+                
+                <div class="page-div common-flex-layout">
+                    {{ with .Next }}
+                    <!-- {{ if .IsDescendant (.GetPage "/docs")}} -->
+                        <a class="last" href="{{.RelPermalink}}">
+                            <img src="/images/docs/last.svg" alt="{{ i18n "Last" }}">
+                            {{ i18n "Last" }}
+                            <span>: {{.LinkTitle}}</span>
+                        </a>
+                    <!-- {{ end }} -->
+                    {{ end }}
+                    {{ with .Prev }}
+                    <!-- {{ if .IsDescendant (.GetPage "/docs")}} -->
+                        <a class="next" href="{{.RelPermalink}}">
+                            {{ i18n "Next" }}
+                            <span>: {{.LinkTitle}}</span>
+                            <img src="/images/docs/next.svg" alt="{{ i18n "Next" }}">
+                        </a>            
+                    <!-- {{ end }} -->
+                    {{ end }}
+                </div>
+                {{ end }}
+                <div></div>
             </div>
             {{ if .IsPage }}
-            
-            <div class="page-div common-flex-layout">
-                {{ with .Next }}
-                <!-- {{ if .IsDescendant (.GetPage "/docs")}} -->
-                    <a class="last" href="{{.RelPermalink}}">
-                        <img src="/images/docs/last.svg" alt="{{ i18n "Last" }}">
-                        {{ i18n "Last" }}
-                        <span>: {{.LinkTitle}}</span>
-                    </a>
-                <!-- {{ end }} -->
-                {{ end }}
-                {{ with .Prev }}
-                <!-- {{ if .IsDescendant (.GetPage "/docs")}} -->
-                    <a class="next" href="{{.RelPermalink}}">
-                        {{ i18n "Next" }}
-                        <span>: {{.LinkTitle}}</span>
-                        <img src="/images/docs/next.svg" alt="{{ i18n "Next" }}">
-                    </a>            
-                <!-- {{ end }} -->
-                {{ end }}
+            <div class="aside">
+                <div class="inner-div">
+                    <div class='title'>
+                        {{ i18n "What’s on this Page" }}
+                    </div>
+                    <div class='tabs'>
+                        {{ .TableOfContents }}
+                    </div>
+                </div>
             </div>
             {{ end }}
-            <div></div>
         </div>
-        {{ if .IsPage }}
-        <div class="aside">
-            <div class="inner-div">
-                <div class='title'>
-                    {{ i18n "What’s on this Page" }}
-                </div>
-                <div class='tabs'>
-                    {{ .TableOfContents }}
-                </div>
-            </div>
-        </div>
-        {{ end }}
-    </div>
-</section>
-{{ $aside := resources.Get "js/aside.js" }}
-{{ $asideJS := $aside | resources.Fingerprint "sha512" }}
-<script type="text/javascript" src="{{ $asideJS.RelPermalink }}" integrity="{{ $asideJS.Data.Integrity }}"></script>
-
-{{ $tab := resources.Get "js/markdown-tab.js" }}
-{{ $tabJS := $tab | resources.Fingerprint "sha512" }}
-<script type="text/javascript" src="{{ $tabJS.RelPermalink }}" integrity="{{ $tabJS.Data.Integrity }}"></script>
-
-<script>
-    var languageCode = '{{.Site.Language.Lang}}'
-    var filePath = '{{ .File.Path }}'
-    var githubUrl = '{{ .Site.Params.githubUrl }}'
-    // var filePath = 'README.md'
-
-    var getLatestTime = function(data) {
-        var commit = data[0].commit
-        return commit.author.date.replace("T", " ").replace("Z", "")
-    }
-
-    var filterData = function(data) {
-        var arr = []
-        var length = data.length
-        for (var i = 0; i < length; i++) {
-            var author = data[i].author
-            if (author) {
-                var avatar_url = author.avatar_url
-                if (avatar_url && !arr.includes(avatar_url)) {
-                    arr.push(avatar_url)
+    </section>
+    {{ $aside := resources.Get "js/aside.js" }}
+    {{ $asideJS := $aside | resources.Fingerprint "sha512" }}
+    <script type="text/javascript" src="{{ $asideJS.RelPermalink }}" integrity="{{ $asideJS.Data.Integrity }}"></script>
+    
+    {{ $tab := resources.Get "js/markdown-tab.js" }}
+    {{ $tabJS := $tab | resources.Fingerprint "sha512" }}
+    <script type="text/javascript" src="{{ $tabJS.RelPermalink }}" integrity="{{ $tabJS.Data.Integrity }}"></script>
+    
+    <script>
+        var languageCode = '{{.Site.Language.Lang}}'
+        var filePath = '{{ .File.Path }}'
+        var githubUrl = '{{ .Site.Params.githubUrl }}'
+        // var filePath = 'README.md'
+    
+        var getLatestTime = function(data) {
+            var commit = data[0].commit
+            return commit.author.date.replace("T", " ").replace("Z", "")
+        }
+    
+        var filterData = function(data) {
+            var arr = []
+            var length = data.length
+            for (var i = 0; i < length; i++) {
+                var author = data[i].author
+                if (author) {
+                    var avatar_url = author.avatar_url
+                    if (avatar_url && !arr.includes(avatar_url)) {
+                        arr.push(avatar_url)
+                    }
                 }
+    
             }
-
+            return arr
         }
-        return arr
-    }
-    var getFileContributors = function() {
-        var url = 'https://api.github.com/repos/kubesphere/website/commits?path=content/' + languageCode + '/' + filePath
-        $.getJSON(url, function(data) {
-            if (!data || data.length === 0) {
-                $('.contributor-div').hide()
-                return
-            }
-            var newData = filterData(data)
-            var time = getLatestTime(data)
-            renderLatestTime(time)
-            renderContributors(newData)
-        })
-    }
-    var renderContributors = function(data) {
-        var contributor = $('.contributor-avatar')
-        var length = data.length
-        var len = 5
-        $.each(data.slice(0, len), function(index, item) {
-            var img = $("<img />", {
-                "src": item
+        var getFileContributors = function() {
+            var url = 'https://api.github.com/repos/kubesphere/website/commits?path=content/' + languageCode + '/' + filePath
+            $.getJSON(url, function(data) {
+                if (!data || data.length === 0) {
+                    $('.contributor-div').hide()
+                    return
+                }
+                var newData = filterData(data)
+                var time = getLatestTime(data)
+                renderLatestTime(time)
+                renderContributors(newData)
             })
-            $("<li />", {
-                "html": img
-            }).appendTo(contributor);
-        });
-        var t = length - len
-        if (t > 0) {
-            $('.more-contributor').html('+' + t)
         }
-    }
-
-    var renderLatestTime = function(time) {
-        $('.update-time').html(time)
-    }
-
-    var bindClickMenu = function() {
-        var sectionMenu = $(".section-menu")
-        $('.section-control').on('click', function(e){
-            if (sectionMenu.is(":hidden")) {
-                sectionMenu.show();
-            } else {
-                sectionMenu.hide()
+        var renderContributors = function(data) {
+            var contributor = $('.contributor-avatar')
+            var length = data.length
+            var len = 5
+            $.each(data.slice(0, len), function(index, item) {
+                var img = $("<img />", {
+                    "src": item
+                })
+                $("<li />", {
+                    "html": img
+                }).appendTo(contributor);
+            });
+            var t = length - len
+            if (t > 0) {
+                $('.more-contributor').html('+' + t)
             }
+        }
+    
+        var renderLatestTime = function(time) {
+            $('.update-time').html(time)
+        }
+    
+        var bindClickMenu = function() {
+            var sectionMenu = $(".section-menu")
+            $('.section-control').on('click', function(e){
+                if (sectionMenu.is(":hidden")) {
+                    sectionMenu.show();
+                } else {
+                    sectionMenu.hide()
+                }
+    
+                $(document).one("click", function(){
+                    sectionMenu.hide()
+                });
+    
+                e.stopPropagation()
+            })
+    
+            sectionMenu.on("click", function(e){
+                e.stopPropagation();
+            })
+        }
+    
+        var bindClickSecondMenu = function() {
+            var sectionMenu = $(".section-2 .left-div")
+            $('.second-section-menu').on('click', function(e){
+                sectionMenu.css("left", "0")
+    
+                $(document).one("click", function(){
+                    sectionMenu.css("left", "-274px")
+                });
+    
+                e.stopPropagation()
+            })
+    
+            sectionMenu.on("click", function(e){
+                e.stopPropagation();
+            })
+        }
+    
+        var useViewer = function() {
+            var viewer = new Viewer(document.querySelector('.md-body'), {
+                url: 'src'
+            })
+        }
+    
+        var __main = function() {
+            getFileContributors()
+            bindClickMenu()
+            bindClickSecondMenu()
+            useViewer()
+        }
+    
+        __main()
+    
+    </script>
+</main>
 
-            $(document).one("click", function(){
-                sectionMenu.hide()
-            });
+</body>
 
-            e.stopPropagation()
-        })
-
-        sectionMenu.on("click", function(e){
-            e.stopPropagation();
-        })
-    }
-
-    var bindClickSecondMenu = function() {
-        var sectionMenu = $(".section-2 .left-div")
-        $('.second-section-menu').on('click', function(e){
-            sectionMenu.css("left", "0")
-
-            $(document).one("click", function(){
-                sectionMenu.css("left", "-274px")
-            });
-
-            e.stopPropagation()
-        })
-
-        sectionMenu.on("click", function(e){
-            e.stopPropagation();
-        })
-    }
-
-    var useViewer = function() {
-        var viewer = new Viewer(document.querySelector('.md-body'), {
-            url: 'src'
-        })
-    }
-
-    var __main = function() {
-        getFileContributors()
-        bindClickMenu()
-        bindClickSecondMenu()
-        useViewer()
-    }
-
-    __main()
-
-</script>
-{{ end }}
\ No newline at end of file
+</html>
\ No newline at end of file