diff --git a/assets/scss/doc.scss b/assets/scss/doc.scss
index dc3232a41..b468e3c8a 100644
--- a/assets/scss/doc.scss
+++ b/assets/scss/doc.scss
@@ -91,7 +91,7 @@ body {
                 ul {
                     li {
                         margin: 12px 0;
-                        font-size: 16px;
+                        font-size: 14px;
                         line-height: 1.5;
 
                         & > a {
@@ -118,8 +118,8 @@ body {
     .second-section-menu {
         display: none;
         position: absolute;
-        top: 10px;
-        left: 20px;
+        top: 0;
+        left: 0px;
         width: 16px;
         cursor: pointer;
         z-index: 1;
@@ -150,7 +150,7 @@ body {
 
         .nav-menu {
             padding: 20px;
-            font-size: 16px;
+            font-size: 14px;
             color: #31383e;
             background-color: #f6f8fa;
             ul {
@@ -177,7 +177,7 @@ body {
                 font-size: 0;
 
                 span {
-                    font-size: 16px;
+                    font-size: 14px;
                 }
 
                 .arrow {
@@ -237,11 +237,12 @@ body {
     .middle-div {
         position: relative;
         margin-left: 274px;
-        margin-right: 184px;
+        margin-right: 80px;
         padding: 10px 20px;
 
         @media only screen and (max-width: $mobile-max-width) {
             margin: 0;
+            padding: 0;
         }
 
         .top-div {
@@ -378,6 +379,15 @@ body {
             }
         }
 
+        .content-div {
+            h2 {
+                text-align: left;
+            }
+            .md-body {
+                font-size: 14px;
+            }
+        }
+
         .page-div {
             position: relative;
             margin-top: 20px;
@@ -464,12 +474,12 @@ body {
         position: fixed;
         top: 220px;
         left: 50%;
-        transform: translateX(396px);
+        transform: translateX(500px);
     }
 
     .aside-absolute {
         position: absolute;
-        right: 0;
+        right: -104px;
         bottom: 0;
         top: none;
         left: none;
@@ -478,10 +488,21 @@ body {
 
 .popular-page-div {
     position: relative;
+    display: inline-block;
+    box-sizing: border-box;
+    width: 373px;
     padding: 20px;
+    margin-top: 17px;
+    margin-left: 5px;
     border-radius: 3px;
     background-color: #f6f8fa;
 
+    @media only screen and (max-width: $mobile-max-width) {
+        display: block;
+        width: 100%;
+        margin-left: 0;
+    }
+
     img {
         position: absolute;
         top: 50%;
@@ -493,27 +514,18 @@ body {
         border-radius: 7px;
         box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05);
         background-color: #ffffff;     
-        
-        @media only screen and (max-width: $mobile-max-width) {
-            left: 10px;
-            width: 20px;
-            height: 20px;
-            padding: 5px;
-        }
     }
 
     div {
-        margin: 0 60px 0 90px;
+        margin-left: 84px;
 
-        @media only screen and (max-width: $mobile-max-width) {
-            margin: 0 20px 0 30px;
-
-        }
         h2 {
+            height: 24px;
             margin: 0;
             text-align: left;
             font-size: 16px;
             line-height: 1.5;
+            overflow: hidden;
 
             a {
                 color: #333333;
@@ -525,34 +537,13 @@ body {
         }
 
         p {
+            max-height: 42px;
             margin-top: 8px;
             margin-bottom: 0;
-            font-size: 16px;
+            font-size: 14px;
             line-height: 1.5;
             color: #31383e;
-        }
-    }
-
-    & > a {
-        position: absolute;
-        top: 50%;
-        right: 20px;
-        transform: translateY(-50%);
-        width: 34px;
-        height: 34px;
-        background-image: url("/images/docs/arrow.svg");
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: cover;
-
-        &:hover {
-            background-image: url("/images/docs/arrow-hover.svg");
-        }
-
-        @media only screen and (max-width: $mobile-max-width) {
-            right: 10px;
-            width: 24px;
-            height: 24px;
+            overflow: hidden;
         }
     }
 }
\ No newline at end of file
diff --git a/assets/scss/docs.scss b/assets/scss/docs.scss
index b5d8ded60..249751478 100644
--- a/assets/scss/docs.scss
+++ b/assets/scss/docs.scss
@@ -87,7 +87,7 @@
 
                   & > li {
                       height: 46px;
-                      font-size: 16px;
+                      font-size: 14px;
                       line-height: 46px;
                       overflow: hidden;
                       text-overflow:ellipsis;
diff --git a/content/en/docs/installation/_index.md b/content/en/docs/installation/_index.md
index 8efe18711..613e9904d 100644
--- a/content/en/docs/installation/_index.md
+++ b/content/en/docs/installation/_index.md
@@ -18,4 +18,6 @@ In this chapter, we will demonstrate how to use KubeKey to provision a new Kuber
 
 Below you will find some of the most common and helpful pages from this chapter. We highly recommend you to review them at first.
 
+{{< popularPage icon="/images/docs/bitmap.jpg" title="Install KubeSphere on AWS EC2" description="Provisioning a new Kubernetes and KubeSphere cluster based on AWS" link="" >}}
+
 {{< popularPage icon="/images/docs/bitmap.jpg" title="Install KubeSphere on AWS EC2" description="Provisioning a new Kubernetes and KubeSphere cluster based on AWS" link="" >}}
\ No newline at end of file
diff --git a/i18n/en.yaml b/i18n/en.yaml
index 90addf54c..b156fb37d 100644
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -52,12 +52,12 @@
   translation: background image
 - id: kubesphere console screenshot
   translation: kubesphere console screenshot
-- id: Overview
-  translation: Overview
+- id: Learn More
+  translation: Learn More
 - id: Download this page (PDF)
   translation: Download this page (PDF)
-- id: update time
-  translation: update time
+- id: Last updated
+  translation: Last updated
 - id: What’s on this Page
   translation: What’s on this Page
 - id: Last
diff --git a/layouts/docs/single.html b/layouts/docs/single.html
index 9abfeb922..b9c5c5954 100644
--- a/layouts/docs/single.html
+++ b/layouts/docs/single.html
@@ -48,7 +48,7 @@
         <div class="middle-div">
             <div class="top-div common-flex-layout">
                 <div class="contributor-div">
-                    <span>{{ i18n "update time" }}:</span>
+                    <span>{{ i18n "Last updated" }}:</span>
                     <span class="update-time"></span>
                     <ul class="contributor-avatar"></ul>
                     <span class="more-contributor"></span>
@@ -123,6 +123,7 @@
             {{ end }}
             <div></div>
         </div>
+        {{ if .IsPage }}
         <div class="aside aside-fixed">
             <div class='title'>
                 {{ i18n "What’s on this Page" }}
@@ -131,9 +132,12 @@
                 {{ .TableOfContents }}
             </div>
         </div>
+        {{ end }}
     </div>
 </section>
+{{ if .IsPage }}
 <script src='{{ "js/aside.js" | relURL }}'></script>
+{{ end }}
 <script>
     var filePath = '{{ .File.Path }}'
     // var filePath = 'README.md'
diff --git a/layouts/partials/section.html b/layouts/partials/section.html
index ede808054..d4060af6e 100644
--- a/layouts/partials/section.html
+++ b/layouts/partials/section.html
@@ -19,7 +19,7 @@
             </li>
             {{ end }}
             {{ if gt $length 5 }}
-            <li><a href="{{ .RelPermalink }}">{{ i18n "Overview" }}</a></li>
+            <li><a href="{{ .RelPermalink }}">{{ i18n "Learn More" }}...</a></li>
             {{ end }}
         </ul>
     </li>
diff --git a/layouts/shortcodes/popularPage.html b/layouts/shortcodes/popularPage.html
index 8f3f57068..92ea84014 100644
--- a/layouts/shortcodes/popularPage.html
+++ b/layouts/shortcodes/popularPage.html
@@ -1,8 +1,9 @@
 <div class="popular-page-div">
   <img src="{{ .Get "icon" }}">
   <div>
-    <h2><a href="{{ .Get "link" }}">{{ .Get "title" }}</a></h2>
-    <p>{{ .Get "description" }}</p>
+    <h2 title="{{ .Get "title" }}">
+      <a href="{{ .Get "link" }}">{{ .Get "title" }}</a>
+    </h2>
+    <p>{{ .Get "description" }}</p> 
   </div>
-  <a href="{{ .Get "link" }}"></a>
 </div>
\ No newline at end of file