diff --git a/assets/scss/common.scss b/assets/scss/common.scss
index 6d3fa8270..0526d70aa 100644
--- a/assets/scss/common.scss
+++ b/assets/scss/common.scss
@@ -23,6 +23,10 @@ section {
   }
 }
 
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
 .padding {
   padding-top: 40px;
 }
@@ -374,6 +378,7 @@ section {
 .code-over-div {
   position: relative;
   overflow: auto;
+  padding: 1em;
 }
 .copy-code-button {
   display: none;
diff --git a/assets/scss/content.scss b/assets/scss/content.scss
index 6cf856051..e49f11253 100644
--- a/assets/scss/content.scss
+++ b/assets/scss/content.scss
@@ -78,7 +78,6 @@
         }
       
         .md-body h2 {
-          font-size: 24px;
           font-weight: 500;
           line-height: 64px;
           color: #171c34;
@@ -89,7 +88,6 @@
         }
       
         .md-body h3 {
-          font-size: 16px;
           font-weight: 600;
           line-height: 1.5;
           color: #171c34;
@@ -142,12 +140,22 @@
     }
 
     .aside {
+      position: fixed;
+      top: 150px;
+      left: 50%;
+      bottom: 10px;
+      transform: translateX(350px);
       width: 230px;
-      max-height: 700px;
-      overflow: scroll;
       @media only screen and (max-width: $mobile-max-width) {
         display: none;
       }
+
+      .inner-div {
+        max-height: 100%;
+        position: relative;
+        overflow: scroll;
+    }
+
       .title {
         height: 32px;
         font-size: 24px;
@@ -178,26 +186,15 @@
               color: #55bc8a;
             }
           }
+
+          .active {
+            color: #55bc8a;
+          }
         }
         li li {
           padding-left: 20px;
         }
       }
     }
-
-    .aside-fixed {
-      position: fixed;
-      top: 150px;
-      left: 50%;
-      transform: translateX(350px);
-    }
-
-    .aside-absolute {
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      top: none;
-      left: none;
-    }
   }
 }
\ No newline at end of file
diff --git a/assets/scss/doc.scss b/assets/scss/doc.scss
index abe4131a5..ebb17dff6 100644
--- a/assets/scss/doc.scss
+++ b/assets/scss/doc.scss
@@ -153,20 +153,33 @@ body {
     }
 
     .left-div {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 274px;
-        background-color: #ffffff;
+        position: fixed;
+        top: 260px;
+        bottom: 20px;
+        left: 50%;
+        transform: translateX(-580px);
+        width: 200px;
         z-index: 2;
-        transition: all 0.5s;
+
+        @media only screen and (max-width: 1160px) {
+            left: 0;
+            transform: translateX(0px);
+        }
 
         @media only screen and (max-width: $mobile-max-width) {
-            left: -274px;
+            transition: all 0.5s;
+            left: -200px;
+        }
+
+        .inner-tree {
+            max-height: 100%;
+            position: relative;
+            overflow: scroll;
+            background-color: #ffffff;
         }
 
         .nav-menu {
-            padding: 20px;
+            padding: 10px;
             font-size: 14px;
             color: #31383e;
             background-color: #f6f8fa;
@@ -229,7 +242,6 @@ body {
         }
 
         .download-div {
-            width: 274px;
             height: 44px;
             margin-top: 10px;
             line-height: 44px;
@@ -258,9 +270,9 @@ body {
 
     .middle-div {
         position: relative;
-        margin-left: 274px;
-        margin-right: 80px;
-        padding: 10px 20px;
+        margin-left: 200px;
+        margin-right: 160px;
+        padding: 10px 10px;
 
         @media only screen and (max-width: $mobile-max-width) {
             margin: 0;
@@ -415,21 +427,18 @@ body {
         .content-div {
             .md-body {
                 font-size: 16px;
-                line-height: 1.71;
+                line-height: 2.29;
                 color: #36435c;
             }
             
             .md-body h2 {
-                font-size: 24px;
                 font-weight: 500;
                 line-height: 40px;
-                color: #171c34;
                 text-shadow: none;
                 text-align: left;
             }
             
             .md-body h3 {
-                font-size: 16px;
                 font-weight: 600;
                 line-height: 1.5;
                 color: #171c34;
@@ -579,65 +588,58 @@ body {
     }
 
     .aside {
-        position: relative;
-        width: 174px;
-        padding-left: 10px;
-        border-left: 1px solid #dde1e6;
-        max-height: 600px;
-        overflow: scroll;
+        position: fixed;
+        top: 260px;
+        bottom: 10px;
+        left: 50%;
+        transform: translateX(420px);
+        width: 160px;
         @media only screen and (max-width: $mobile-max-width) {
-          display: none;
+           display: none;
+        }
+
+        .inner-div {
+            max-height: 100%;
+            position: relative;
+            overflow: scroll;
+            padding-left: 10px;
+            border-left: 1px solid #dde1e6;
         }
 
         .title {
-          font-size: 14px;
-          line-height: 1.71;
-          color: #3e464c;
+            font-size: 14px;
+            line-height: 1.71;
+            color: #3e464c;
         }
   
         .tabs {
-          #TableOfContents > ul > li > a {
-            font-weight: 500;
-          }
-          li {
-            margin: 8px 0;
-            font-size: 14px;
-  
-            a {
-              display: block;
-              width: 100%;
-              font-weight: 400;
-              line-height: 24px;
-              color: #68747f;
-  
-              &:hover {
-                color: #00a971;
-              }
+            #TableOfContents > ul > li > a {
+                font-weight: 500;
             }
+            li {
+                margin: 8px 0;
+                font-size: 14px;
+    
+                a {
+                    display: block;
+                    width: 100%;
+                    font-weight: 400;
+                    line-height: 24px;
+                    color: #68747f;
+        
+                    &:hover {
+                        color: #00a971;
+                    }
+                }
 
-            .active {
-                color: #00a971;
+                .active {
+                    color: #00a971;
+                }
+            }
+            li li {
+                padding-left: 20px;
             }
-          }
-          li li {
-            padding-left: 20px;
-          }
         }
-      }
-  
-    .aside-fixed {
-        position: fixed;
-        top: 260px;
-        left: 50%;
-        transform: translateX(500px);
-    }
-
-    .aside-absolute {
-        position: absolute;
-        right: -104px;
-        bottom: 0;
-        top: none;
-        left: none;
     }
 }
 
diff --git a/assets/scss/docs.scss b/assets/scss/docs.scss
index 15a391cb6..65d71dc4d 100644
--- a/assets/scss/docs.scss
+++ b/assets/scss/docs.scss
@@ -183,13 +183,16 @@
             font-size: 11px;
             line-height: 34px;
             text-align: center;
-            color: #ffffff;
             border-radius: 17px;
             box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2);
             background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 97%), linear-gradient(to bottom, #242e42, #242e42);          
             &:hover {
               box-shadow: none;
             }
+
+            a {
+              color: #ffffff;
+            }
           }
         }
       }
diff --git a/assets/scss/markdown.scss b/assets/scss/markdown.scss
index 9e501c32a..dbb64564e 100644
--- a/assets/scss/markdown.scss
+++ b/assets/scss/markdown.scss
@@ -164,7 +164,7 @@
 }
 
 .md-body h2 {
-  font-size: 32px;
+  font-size: 1.8em;
   font-weight: normal;
   line-height: 1.63;
   text-align: center;
diff --git a/assets/scss/partner.scss b/assets/scss/partner.scss
index 9082c4068..d27ca3801 100644
--- a/assets/scss/partner.scss
+++ b/assets/scss/partner.scss
@@ -360,6 +360,7 @@
           font-size: 14px;
           line-height: 1.71;
           color: #ffffff;
+          overflow: auto;
         }
       }
     }
diff --git a/config/_default/config.toml b/config/_default/config.toml
index 5cf8fd157..cbef958cb 100644
--- a/config/_default/config.toml
+++ b/config/_default/config.toml
@@ -2,7 +2,7 @@ baseURL = "https://kubesphere-v3.netlify.app"
 
 [markup]
   [markup.tableOfContents]
-    endLevel = 4
+    endLevel = 3
     ordered = false
     startLevel = 2
 
@@ -100,7 +100,7 @@ hasChildren = true
 
     [[languages.en.menu.main]]
     parent = "Documentation"
-    name = "v3.0.0"
+    name = "v3.0.0 <img src='/images/header/star.svg' alt='star'>"
     URL = "docs/"
     weight = 1
 
@@ -226,7 +226,7 @@ hasChildren = true
 name = "文档中心"
     [[languages.zh.menu.main]]
     parent = "文档中心"
-    name = "v3.0.0"
+    name = "v3.0.0 <img src='/images/header/star.svg' alt='star'>"
     URL = "docs/"
     weight = 1
 
diff --git a/content/en/support/_index.md b/content/en/support/_index.md
new file mode 100644
index 000000000..cd71739c1
--- /dev/null
+++ b/content/en/support/_index.md
@@ -0,0 +1,13 @@
+---
+title: "support"
+
+css: "scss/contribution.scss"
+
+section1:
+  title: 'Community is the Soul of KubeSphere'
+  content: 'Join the community to get help, get involved, or get updates and KubeSphere news!'
+  topImage: "/images/contribution/contribution-top.jpg"
+
+sectionIframe:
+  formUrl: https://jinshuju.net/f/bDS8me/embedded.js?inner_redirect=false&banner=show&background=white&height=1838
+---
\ No newline at end of file
diff --git a/content/zh/support/_index.md b/content/zh/support/_index.md
new file mode 100644
index 000000000..cd71739c1
--- /dev/null
+++ b/content/zh/support/_index.md
@@ -0,0 +1,13 @@
+---
+title: "support"
+
+css: "scss/contribution.scss"
+
+section1:
+  title: 'Community is the Soul of KubeSphere'
+  content: 'Join the community to get help, get involved, or get updates and KubeSphere news!'
+  topImage: "/images/contribution/contribution-top.jpg"
+
+sectionIframe:
+  formUrl: https://jinshuju.net/f/bDS8me/embedded.js?inner_redirect=false&banner=show&background=white&height=1838
+---
\ No newline at end of file
diff --git a/layouts/_default/_markup/render-link.html b/layouts/_default/_markup/render-link.html
new file mode 100644
index 000000000..a6e54ab59
--- /dev/null
+++ b/layouts/_default/_markup/render-link.html
@@ -0,0 +1 @@
+<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank"{{ end }}>{{ .Text }}</a>
\ No newline at end of file
diff --git a/layouts/_default/search.html b/layouts/_default/search.html
deleted file mode 100644
index e1ad53e9e..000000000
--- a/layouts/_default/search.html
+++ /dev/null
@@ -1,22 +0,0 @@
-{{ define "main" }}
-<section class="td-search-result">
-<div class="">
-<h2 style="margin-top: 200px;" class="ml-4">{{ .Title }}</h2>
-{{ with .Site.Params.gcs_engine_id }}
-<script>
-(function() {
-var cx = '{{ . }}';
-var gcse = document.createElement('script');
-gcse.type = 'text/javascript';
-gcse.async = true;
-gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
-var s = document.getElementsByTagName('script')[0];
-s.parentNode.insertBefore(gcse, s);
-})();
-</script>
-			<gcse:searchresults-only></gcse:searchresults-only>
-{{ end }}
-</div>
-</section>
-
-{{ end }}
\ No newline at end of file
diff --git a/layouts/_default/support.html b/layouts/_default/support.html
new file mode 100644
index 000000000..1dd20a6ff
--- /dev/null
+++ b/layouts/_default/support.html
@@ -0,0 +1,15 @@
+{{ define "main" }}
+
+{{ with .Params.section1 }}
+<section class="section-1 bg-cover" style='background-image: url("{{ .topImage }}");'>
+    <div class="title-div common-layout">
+        <h1 class="title-center-h1">{{ .title }}</h1>
+        <p class="common-p">{{ .content }}</p>
+    </div>
+</section>
+{{ end }}
+
+{{ with .Params.sectionIframe }}
+<script src="{{ .formUrl }}"></script>
+{{ end }}
+{{ end }}
\ No newline at end of file
diff --git a/layouts/docs/list.html b/layouts/docs/list.html
index 11c75f434..eda545126 100644
--- a/layouts/docs/list.html
+++ b/layouts/docs/list.html
@@ -28,7 +28,7 @@
                 {{ range .list }}
                 <div>
                     <img src="{{ .image }}" alt="">
-                    <p>{{ .content }}</p>
+                    <p><a href="{{ .link }}">{{ .content }}</a></p>
                 </div>
                 {{ end }}
             </div>
diff --git a/layouts/docs/single.html b/layouts/docs/single.html
index 1ce008e72..3bf569155 100644
--- a/layouts/docs/single.html
+++ b/layouts/docs/single.html
@@ -37,12 +37,14 @@
 
 <section class="section-2">
     <div class="common-layout">
-        <div class="left-div">
-            {{ partial "tree.html" . }}
-            <!-- <div class="download-div">
-                <span class="download-icon"></span>
-                <span>{{ i18n "Download this page (PDF)" }}</span>
-            </div> -->
+        <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>
@@ -80,15 +82,15 @@
                         <ul>
                             <li>
                                 <img src="/images/docs/twitter.svg" alt="twitter">
-                                <a data-type="twitter" href="http://twitter.com/share?url={{ .Permalink }}&text={{ .Title }}" target="_blank" rel="noopener noreferrer">twitter</a>
+                                <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 data-type="linkedin" href="http://www.linkedin.com/shareArticle?mini=true&url={{ .Permalink }}" target="_blank" rel="noopener noreferrer">linkedIn</a>
+                                <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 data-type="facebook" href="http://www.facebook.com/sharer.php?u={{ .Permalink }}" target="_blank" rel="noopener noreferrer">facebook</a>
+                                <a href="http://www.facebook.com/sharer.php?u={{ .Permalink }}" target="_blank" rel="noopener noreferrer">facebook</a>
                             </li>
                             <li>
                                 <img src="/images/docs/email.svg" alt="email" >
@@ -131,20 +133,20 @@
             <div></div>
         </div>
         {{ if .IsPage }}
-        <div class="aside aside-fixed">
-            <div class='title'>
-                {{ i18n "What’s on this Page" }}
-            </div>
-            <div class='tabs'>
-                {{ .TableOfContents }}
+        <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>
-{{ if .IsPage }}
 <script src='{{ "js/aside.js" | relURL }}'></script>
-{{ end }}
 <script src='{{ "js/markdown-tab.js" | relURL }}'></script>
 <script>
     var languageCode = '{{.Site.Language.Lang}}'
diff --git a/layouts/partials/content.html b/layouts/partials/content.html
index 18c94f5db..6c226c07b 100644
--- a/layouts/partials/content.html
+++ b/layouts/partials/content.html
@@ -23,7 +23,7 @@
               <span><a href='{{ $parent | relLangURL }}'>{{ i18n $text }}</a> > </span>
               <span>{{ $context.Title }}</span>
           </div>
-          <div class='main-div'>
+          <div class='main-div middle-div'>
               <div class='author'>{{ $context.Params.author }}</div>
               <div class='date'>{{ i18n "Published on" }}：{{ string $context.Params.createTime }}</div>
               <h1>{{ $context.Title }}</h1>
@@ -39,9 +39,11 @@
                   {{ partial "share.html" }}
               </div>
           </div>
-          <div class='aside aside-fixed'>
-              <div class='title'>{{ i18n "Table of Contents" }}</div>
-              <div class='tabs'>{{ $context.TableOfContents }}</div>
+          <div class='aside'>
+              <div class="inner-div">
+                <div class='title'>{{ i18n "Table of Contents" }}</div>
+                <div class='tabs'>{{ $context.TableOfContents }}</div>
+              </div>
           </div>
       </div>
   </section>
diff --git a/layouts/partials/firstPageInSection.html b/layouts/partials/firstPageInSection.html
index e7f4992cc..8e009af79 100644
--- a/layouts/partials/firstPageInSection.html
+++ b/layouts/partials/firstPageInSection.html
@@ -2,8 +2,12 @@
 {{ $firstSection := .firstSection }}
 {{ $pages := (union $s.Pages $s.Sections).ByWeight }}
 {{ $first := index $s.Pages 0}}
-{{ if $first.IsPage }}
-    <a href="{{ $first.RelPermalink }}">{{ $firstSection.LinkTitle }}</a>
+{{ if $first }}
+    {{ if $first.IsPage }}
+        <a href="{{ $first.RelPermalink }}">{{ $firstSection.LinkTitle }}</a>
+    {{ else }}
+        {{ partial "firstPageInSection" (dict "section" $first "firstSection" $firstSection)  }}
+    {{ end }}
 {{ else }}
-    {{ partial "firstPageInSection" (dict "section" $first "firstSection" $firstSection)  }}
-{{ end }}
\ No newline at end of file
+    <a href="{{ $s.RelPermalink }}">{{ $firstSection.LinkTitle }}</a>
+{{ end }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 2fd04624f..1d5b5ac56 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -33,9 +33,9 @@
                         {{ range .Children }}
                         <li {{ if eq $section .URL }} class="active"{{ end}}>
                             {{ if hasPrefix .URL "http" }}
-                            <a href="{{ .URL }}" target="_blank" rel="noopener noreferrer">{{ .Name }}</a>
+                            <a href="{{ .URL }}" target="_blank" rel="noopener noreferrer">{{ .Name | safeHTML }}</a>
                             {{ else }}
-                            <a href="{{ .URL | relLangURL }}">{{ .Name }}</a>
+                            <a href="{{ .URL | relLangURL }}">{{ .Name | safeHTML }}</a>
                             {{ end }}
                         </li>
                         {{ end }}
diff --git a/layouts/partials/share.html b/layouts/partials/share.html
index 08ff0bd33..2caf0a502 100644
--- a/layouts/partials/share.html
+++ b/layouts/partials/share.html
@@ -1,17 +1,17 @@
 <div class="share">
-  <a data-type="twitter" href="http://twitter.com/share?url={{ .Permalink }}&text={{ .Title }}" target="_blank" rel="noopener noreferrer">
+  <a href="http://twitter.com/share?url={{ .Permalink }}&text={{ .Title }}" target="_blank" rel="noopener noreferrer">
     <img src="/images/share/Twitter.svg" alt="twitter icon">
   </a>
-  <a data-type="reddit" href="http://reddit.com/submit?url={{ .Permalink }}&title={{ .Title }}" target="_blank" rel="noopener noreferrer">
+  <a href="http://reddit.com/submit?url={{ .Permalink }}&title={{ .Title }}" target="_blank" rel="noopener noreferrer">
     <img src="/images/share/Reddit.svg" alt="reddit icon">
   </a>
-  <a data-type="facebook" href="http://www.facebook.com/sharer.php?u={{ .Permalink }}" target="_blank" rel="noopener noreferrer">
+  <a href="http://www.facebook.com/sharer.php?u={{ .Permalink }}" target="_blank" rel="noopener noreferrer">
     <img src="/images/share/Facebook.svg" alt="facebook icon">
   </a>
-  <a data-type="linkedin" href="http://www.linkedin.com/shareArticle?mini=true&url={{ .Permalink }}" target="_blank" rel="noopener noreferrer">
+  <a href="http://www.linkedin.com/shareArticle?mini=true&url={{ .Permalink }}" target="_blank" rel="noopener noreferrer">
     <img src="/images/share/Linkedin.svg" alt="linkedin icon">
   </a>
-  <a data-type="hackernews" href="https://news.ycombinator.com/submitlink?u={{ .Permalink }}&t={{ .Title }}" target="_blank" rel="noopener noreferrer">
+  <a href="https://news.ycombinator.com/submitlink?u={{ .Permalink }}&t={{ .Title }}" target="_blank" rel="noopener noreferrer">
     <img src="/images/share/HackerNews.svg" alt="hackernews icon">
   </a>
 </div>
\ No newline at end of file
diff --git a/static/images/header/star.svg b/static/images/header/star.svg
new file mode 100644
index 000000000..5c0460927
--- /dev/null
+++ b/static/images/header/star.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
+    <defs>
+        <linearGradient id="kedyptodua" x1="71.36%" x2="71.36%" y1="50%" y2="-49.077%">
+            <stop offset="0%" stop-color="#ECAF24"/>
+            <stop offset="100%" stop-color="#FFF8CB"/>
+        </linearGradient>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g fill-rule="nonzero">
+            <g>
+                <g>
+                    <g>
+                        <g>
+                            <g>
+                                <path fill="url(#kedyptodua)" d="M4.462.828l.631 1.335c.076.158.22.268.388.293l1.411.214c.422.064.59.605.285.916L6.156 4.624c-.122.124-.177.302-.148.476l.241 1.466c.072.44-.37.774-.747.567L4.24 6.44c-.15-.082-.33-.082-.48 0l-1.262.693c-.378.207-.82-.128-.747-.567L1.992 5.1c.029-.174-.026-.352-.148-.476L.823 3.587c-.306-.311-.137-.852.285-.916l1.411-.214c.168-.025.312-.135.388-.293L3.539.828c.189-.399.734-.399.923 0z" transform="translate(-800 -85) translate(738 69) translate(0 15) translate(20) translate(42 1)"/>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/static/js/aside.js b/static/js/aside.js
index 2f1ea14f4..9b074a5e7 100644
--- a/static/js/aside.js
+++ b/static/js/aside.js
@@ -4,29 +4,61 @@ var getElementTopToScreenTop = function(element) {
   return elementOffsetTop - windowScrollTop
 }
 
+var getElementBottomToScreenBottom = function(element) {
+  return $(window).height() + $(document).scrollTop() - element.offset().top - element.height()
+}
+
 var getElementBottomToTop = function(element) {
   var elementHeight = element.outerHeight()
   var elementOffsetTop = element.offset().top
   return elementOffsetTop + elementHeight
 }
 
-var asideOriginOffsetHeight = $('.aside').offset().top
-
 var bindAsideScroll = function() {
   var screenWidth = $(window).width()
   if (screenWidth <= 768) {
     return false
   }
-  var content = $('.main-div')
+  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)
+}
+
+var bindLeftTreeScroll = function() {
+  var screenWidth = $(window).width()
+  if (screenWidth <= 768) {
+    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)
+}
+
+var scrollEvent = function(content, mdBody, aside, asideInner) {
   $( window ).scroll(function() {
-    var s1 = getElementBottomToTop(content)
-    var s2 = getElementBottomToTop(aside)
-    if (s2 > s1) {
-        aside.addClass('aside-absolute').removeClass('aside-fixed')
-    }
-    if (getElementTopToScreenTop(aside) > asideOriginOffsetHeight) {
-        aside.removeClass('aside-absolute').addClass('aside-fixed')
+    var headerHeight = $('header').outerHeight()
+    var contentToTop = getElementTopToScreenTop(content)
+    if (contentToTop < headerHeight) {
+      aside.css("top", headerHeight + 10)
+      aside.css("bottom", 10)
+      var s1 = getElementBottomToTop(mdBody)
+      var s2 = getElementBottomToTop(asideInner)
+      if (s2 > s1) {
+        var bottom = getElementBottomToScreenBottom(mdBody)
+        aside.css("bottom", bottom)
+        aside.css("top", "auto")
+      }
+    } else {
+      aside.css("top", contentToTop)
+      aside.css("bottom", 10)
     }
   });
 }
@@ -47,5 +79,31 @@ var scrollToElement = function(id, headerHeight) {
   window.scrollTo(0, toTop - headerHeight)
 }
 
-bindAsideScroll()
-bindClickLink()
\ No newline at end of file
+var bindScrollTableActive = function() {
+  var screenWidth = $(window).width()
+  if (screenWidth <= 768) {
+    return false
+  }
+  var aside = $('.aside')
+  var headerHeight = $('header').outerHeight()
+  $( window ).scroll(function() {
+    aside.find('a').each(function() {
+      var id = $(this).attr('href')
+      var h = $(id)
+      var elementToTop = getElementTopToScreenTop(h)
+      if (elementToTop < headerHeight + 10) {
+        aside.find('.active').removeClass('active')
+        $(this).addClass('active')
+      }
+    })
+  })
+}
+
+if ($('.aside').length > 0) {
+  bindAsideScroll()
+  bindScrollTableActive()
+}
+if ($('.common-layout .left-tree').length > 0) {
+  bindLeftTreeScroll()
+}
+bindClickLink()
diff --git a/static/js/markdown-tab.js b/static/js/markdown-tab.js
index 21d684b10..be3153822 100644
--- a/static/js/markdown-tab.js
+++ b/static/js/markdown-tab.js
@@ -44,6 +44,7 @@ function addCopyButtons(clipboard) {
       pre.appendChild(div)
   });
 }
+$('pre').css('background', '#242e42')
 if (navigator && navigator.clipboard) {
     addCopyButtons(navigator.clipboard);
 }
\ No newline at end of file