diff --git a/assets/scss/blogs.scss b/assets/scss/blogs.scss
index c93e12a72..f14ebdd02 100644
--- a/assets/scss/blogs.scss
+++ b/assets/scss/blogs.scss
@@ -5,9 +5,12 @@
   padding-top: 60px;
   padding-bottom: 100px;
 
+  @media only screen and (max-width: $mobile-max-width) {
+    padding-top: 20px;
+    padding-bottom: 40px;
+  }
+
   & > div {
-    width: 1160px;
-    margin: 0 auto;
 
     & > .blog-tab-ul {
       padding: 30px 34px 22px;
@@ -51,11 +54,9 @@
 
       & > li {
         position: relative;
-        height: 280px;
         border-radius: 4px;
         box-shadow: 0 4px 15px 0 rgba(7,42,68,.1);
         background-color: #fff;
-        overflow: hidden;
 
         .img-div {
           position: absolute;
@@ -69,12 +70,18 @@
             height: 280px;
             object-fit: contain;
           }
+          @media only screen and (max-width: $mobile-max-width) {
+            display: none;
+          }
         }
 
         & > .content-div{
-          height: 216px;
           padding: 32px 200px 32px 320px;
 
+          @media only screen and (max-width: $mobile-max-width) {
+            padding: 24px;
+          }
+
           .time {
             font-size: 14px;
             color: #919aa3;
@@ -85,9 +92,6 @@
             margin: 12px 0;
             font-size: 20px;
             line-height: 28px;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
             color: #4ca986;
 
             a {
diff --git a/assets/scss/case.scss b/assets/scss/case.scss
index 851db7a9d..728bc464b 100644
--- a/assets/scss/case.scss
+++ b/assets/scss/case.scss
@@ -3,13 +3,10 @@
 
 .section-1 {
   position: relative;
-  height: 300px;
+  padding-top: 138px;
+  padding-bottom: 100px;
 
   .title-div {
-    position: absolute;
-    top: 138px;
-    left: 0;
-    right: 0;
     text-align: center;
   }
 
@@ -24,40 +21,54 @@
   position: relative;
   .cases-ul {
     display: flex;
-    flex-wrap: wrap ;
+    flex-wrap: wrap;
     justify-content: space-between;
     position: relative;
     top: -60px;
     z-index: 2;
 
+    @media only screen and (max-width: $mobile-max-width) {
+      top: -80px;
+      justify-content: center;
+    }
+
     li {
+      box-sizing: border-box;
       width: 373px;
       height: 392px;
       margin-top: 20px;
+      padding: 25px 40px 50px;
       border-radius: 10px;
       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) {
+        top: -80px;
+        height: auto;
+        justify-content: center;
+        padding: 25px 20px 30px;
+      }
+
       img {
         display: block;
-        width: 293px;
-        height: 120px;
-        margin: 24px auto;
+        width: 100%;
+        margin-bottom: 24px;
         object-fit: contain;
       }
 
       p {
-        width: 293px;
         height: 128px;
-        margin: 0 auto;
         overflow: hidden;
         text-align: left;
+
+        @media only screen and (max-width: $mobile-max-width) {
+          height: auto;
+        }
       }
 
       div {
-        width: 293px;
         height: 24px;
-        margin: 25px auto 0;
+        margin-top: 25px;
         font-size: 16px;
         font-weight: 600;
         line-height: 1.5;
@@ -70,6 +81,10 @@
     bottom: 30px;
     right: 50%;
     transform: translateX(-520px);
+
+    @media only screen and (max-width: $mobile-max-width) {
+      display: none;
+    }
   }
 }
 
@@ -80,18 +95,21 @@
   background-repeat: no-repeat;
   padding-top: 80px;
 
+  @media only screen and (max-width: $mobile-max-width) {
+    padding-top: 40px;
+  }
+
   h2 {
     margin-bottom: 40px;
     text-align: center;
   }
 
   & > div {
-    width: 1160px;
-    margin: 0 auto;
     #case-group {
       display: flex;
       align-items: center;
-      height: 100px;
+      flex-wrap: wrap;
+      padding: 20px;
       border-radius: 5px;
       box-shadow: 0 4px 16px 0 rgba(7, 42, 68, 0.1);
       background-color: #ffffff;
@@ -100,6 +118,7 @@
         padding: 8px 16px;
         border-radius: 20px;
         margin-left: 30px;
+        margin-bottom: 10px;
         height: 24px;
         font-size: 16px;
         line-height: 1.5;
@@ -126,13 +145,27 @@
       z-index: 2;
       display: flex;
       flex-wrap: wrap;
+      justify-content: space-between;
+
+      @media only screen and (max-width: $mobile-max-width) {
+        justify-content: center;
+      }
+
       li {
         margin-top: 20px;
-        margin-right: 21px;
+        margin-right: 20px;
+
+        @media only screen and (max-width: $mobile-max-width) {
+          margin: 20px 10px 0;
+        }
       }
 
       li:nth-child(4n) {
         margin-right: 0;
+
+        @media only screen and (max-width: $mobile-max-width) {
+          margin: 20px 10px 0;
+        }
       }
 
       img {
@@ -157,5 +190,9 @@
     bottom: -20px;
     left: 50%;
     transform: translateX(500px);
+
+    @media only screen and (max-width: $mobile-max-width) {
+      display: none;
+    }
   }
 }
\ No newline at end of file
diff --git a/assets/scss/common.scss b/assets/scss/common.scss
index 4cfd5667f..3bd1de527 100644
--- a/assets/scss/common.scss
+++ b/assets/scss/common.scss
@@ -201,3 +201,9 @@ section {
   height: 100%;
   object-fit: cover;
 }
+
+.bg-cover {
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
diff --git a/assets/scss/conferences.scss b/assets/scss/conferences.scss
index 5b5876559..44aaf3e4e 100644
--- a/assets/scss/conferences.scss
+++ b/assets/scss/conferences.scss
@@ -5,10 +5,13 @@
   padding-top: 60px;
   padding-bottom: 100px;
 
+  @media only screen and (max-width: $mobile-max-width) {
+    padding-top: 20px;
+    padding-bottom: 40px;
+  }
+
   .content {
     position: relative;
-    width: 1160px;
-    margin: 0 auto;
 
     & > ul {
 
@@ -33,6 +36,11 @@
           margin-bottom: 12px;
           border-radius: 4px;
 
+          @media only screen and (max-width: $mobile-max-width) {
+            height: auto;
+            padding: 24px;
+          }
+
           .left-img {
             position: absolute;
             top: 0;
@@ -58,6 +66,9 @@
             top: 50%;
             right: 208px;
             transform: translate(50%, -50%);
+            @media only screen and (max-width: $mobile-max-width) {
+              display: none;
+            }
           }
         }
 
@@ -72,6 +83,11 @@
             box-shadow: 0 4px 15px 0 rgba(7,42,68,.1);
             background-color: #fff;
 
+            @media only screen and (max-width: $mobile-max-width) {
+              padding: 24px;
+              height: auto;
+            }
+
             h4 {
               font-size: 20px;
 
@@ -96,6 +112,7 @@
               font-size: 14px;
               line-height: 2;
               color: #919aa3;
+              overflow: hidden;
             }
 
             .line {
@@ -128,6 +145,10 @@
               height: 304px;
               border-radius: 3px;
               object-fit: contain;
+
+              @media only screen and (max-width: $mobile-max-width) {
+                display: none;
+              }
             }
           }
         }
diff --git a/assets/scss/content.scss b/assets/scss/content.scss
index a0204704f..8f11992e1 100644
--- a/assets/scss/content.scss
+++ b/assets/scss/content.scss
@@ -4,8 +4,6 @@
   padding-top: 93px;
 
   & > div {
-    width: 1160px;
-    margin: 0 auto;
     position: relative;
 
     .breadcrumb {
@@ -27,6 +25,12 @@
       background-color: #fff;
       border-radius: 4px;
 
+      @media only screen and (max-width: $mobile-max-width) {
+        width: 100%;
+        padding: 0;
+        background-color: #f5f8f9;
+      }
+
       .author {
         font-size: 16px;
         line-height: 1.5;
@@ -47,6 +51,10 @@
         font-weight: 500;
         line-height: 1.4;
         color: #171c34;
+
+        @media only screen and (max-width: $mobile-max-width) {
+          font-size: 28px;
+        }
       }
 
       .content {
@@ -123,6 +131,9 @@
 
     .aside {
       width: 230px;
+      @media only screen and (max-width: $mobile-max-width) {
+        display: none;
+      }
       .title {
         height: 32px;
         font-size: 24px;
diff --git a/assets/scss/contribution.scss b/assets/scss/contribution.scss
index f766788aa..ce5997ce6 100644
--- a/assets/scss/contribution.scss
+++ b/assets/scss/contribution.scss
@@ -4,13 +4,10 @@
 
 .section-1 {
   position: relative;
-  height: 300px;
+  padding-top: 138px;
+  padding-bottom: 100px;
 
   .title-div {
-    position: absolute;
-    top: 138px;
-    left: 0;
-    right: 0;
     text-align: center;
   }
 
@@ -28,7 +25,12 @@
   & > div {
     & > ul {
       position: relative;
-      transform: translateY(-40px);
+      transform: translateY(-60px);
+
+      @media only screen and (max-width: $mobile-max-width) {
+        justify-content: center;
+      }
+
       & > li {
         position: relative;
         width: 373px;
@@ -37,6 +39,7 @@
         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;
         overflow: hidden;
+        margin-top: 20px;
         & > .title {
           padding: 20px;
           text-align: center;
@@ -52,11 +55,10 @@
         }
 
         & > ul {
-          margin-top: 40px;
-          margin-left: 60px;
+          width: 216px;
+          margin: 60px auto 0;
 
           li {
-            width: 216px;
             height: 24px;
             line-height: 24px;
             padding-bottom: 12px;
@@ -95,6 +97,12 @@
     .organization-div {
       margin-top: 60px;
       text-align: center;
+
+      @media only screen and (max-width: $mobile-max-width) {
+        margin-top: 20px;
+        padding-bottom: 40px;
+      }
+
       h2 {
         margin-bottom: 40px;
       }
@@ -102,6 +110,14 @@
       & > div {
         position: relative;
         height: 454px;
+
+        @media only screen and (max-width: $mobile-max-width) {
+          height: auto;
+          & > img {
+            display: none;
+          }
+        }
+
         .top-div {
           width: 200px;
           height: 50px;
@@ -114,6 +130,10 @@
           border-radius: 3px;
           box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05);
           background-color: #060845;
+
+          @media only screen and (max-width: $mobile-max-width) {
+            width: 80%;
+          }
         }
 
         & > ul {
@@ -123,6 +143,14 @@
           width: 896px;
           transform: translateX(-50%);
 
+          @media only screen and (max-width: $mobile-max-width) {
+            position: relative;
+            top: 0;
+            justify-content: center;
+            width: 100%;
+            height: auto;
+          }
+
           & > li {
             width: 200px;
             height: 50px;
@@ -133,9 +161,17 @@
             color: #ffffff;
             border-radius: 3px;
             box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05);
-            background-color: #7371df;
+
+            @media only screen and (max-width: $mobile-max-width) {
+              width: 80%;
+              height: auto;
+              margin-top: 10px;
+              box-shadow: none;
+            }
 
             & > div {
+              background-color: #7371df;
+
               img, span {
                 vertical-align: middle;
               }
@@ -156,10 +192,19 @@
               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) {
+                width: 100%;
+                margin-top: 10px;
+              }
+
               img {
                 position: absolute;
                 top: 0;
                 left: 0;
+                width: 100%;
+                height: 10px;
+                object-fit: fill;
+                
               }
 
               &:hover {
@@ -186,6 +231,14 @@
                 opacity: 0.8;
                 background-color: #060845;
 
+                @media only screen and (max-width: $mobile-max-width) {
+                  box-sizing: border-box;
+                  width: 100%;
+                  top: -12px;
+                  left: 50%;
+                  transform: translate(-50%, -100%);
+                }
+
                 &::after {
                   content: '';
                   position: absolute;
@@ -194,6 +247,16 @@
                   transform: translateY(-50%);
                   border: 6px solid transparent;
                   border-left-color: #060845;
+
+                  @media only screen and (max-width: $mobile-max-width) {
+                    top: auto;
+                    right: auto;
+                    bottom: -12px;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    border: 6px solid transparent;
+                    border-top-color: #060845;
+                  }
                 }
               }
 
@@ -213,6 +276,14 @@
                 opacity: 0.8;
                 background-color: #060845;
 
+                @media only screen and (max-width: $mobile-max-width) {
+                  box-sizing: border-box;
+                  width: 100%;
+                  top: -12px;
+                  left: 50%;
+                  transform: translate(-50%, -100%);
+                }
+
                 &::before {
                   content: '';
                   position: absolute;
@@ -221,6 +292,16 @@
                   transform: translateY(-50%);
                   border: 6px solid transparent;
                   border-right-color: #060845;
+
+                  @media only screen and (max-width: $mobile-max-width) {
+                    top: auto;
+                    right: auto;
+                    bottom: -12px;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    border: 6px solid transparent;
+                    border-top-color: #060845;
+                  }
                 }
               }
             }
@@ -236,68 +317,78 @@
   padding-top: 40px;
 
   & > p {
-    width: 964px;
     margin: 12px auto 0;
   }
 
-  & > ul {
-    padding-bottom: 30px;
-    text-align: left;
-    border-bottom: solid 2px #e5e5e5;
+  & > .scroll {
 
-    .active {
-      background-image: linear-gradient(148deg, #4a499a 16%, #8552c3 85%);
+    @media only screen and (max-width: $mobile-max-width) {
+      overflow-x: scroll;
+    }
 
-      &:hover {
+    & > ul {
+      padding-bottom: 30px;
+      text-align: left;
+      border-bottom: solid 2px #e5e5e5;
+  
+      @media only screen and (max-width: $mobile-max-width) {
+        width: 1200px;
+      }
+  
+      .active {
         background-image: linear-gradient(148deg, #4a499a 16%, #8552c3 85%);
+  
+        &:hover {
+          background-image: linear-gradient(148deg, #4a499a 16%, #8552c3 85%);
+        }
       }
-    }
-
-    li {
-      position: relative;
-      display: inline-block;
-      margin-left: 84px;
-      margin-top: 30px;
-      margin-bottom: 28px;
-      width: 50px;
-      height: 50px;
-      border-radius: 50%;
-      background-image: linear-gradient(38deg, #d5dee7 19%, #ffffff 113%);
-      cursor: pointer;
-
-      &:hover {
-        background-image: linear-gradient(44deg, #dee0e6 19%, #b6c2cd 86%);
+  
+      li {
+        position: relative;
+        display: inline-block;
+        margin-left: 84px;
+        margin-top: 30px;
+        margin-bottom: 28px;
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+        background-image: linear-gradient(38deg, #d5dee7 19%, #ffffff 113%);
+        cursor: pointer;
+  
+        &:hover {
+          background-image: linear-gradient(44deg, #dee0e6 19%, #b6c2cd 86%);
+        }
+  
+        img {
+          width: 24px;
+          height: 24px;
+          margin: 13px;
+          object-fit: contain;
+        }
+  
+        p {
+          width: 134px;
+          height: 20px;
+          position: absolute;
+          bottom: -24px;
+          left: 50%;
+          transform: translateX(-50%);
+          font-size: 14px;
+          font-weight: 500;
+          line-height: 20px;
+          text-align: center;
+          color: #3d3e49;
+        }
+  
       }
-
-      img {
-        width: 24px;
-        height: 24px;
-        margin: 13px;
-        object-fit: contain;
+  
+      li:nth-child(1), li:nth-child(10) {
+        margin-left: 0;
       }
-
-      p {
-        width: 134px;
-        height: 20px;
-        position: absolute;
-        bottom: -24px;
-        left: 50%;
-        transform: translateX(-50%);
-        font-size: 14px;
-        font-weight: 500;
-        line-height: 20px;
-        text-align: center;
-        color: #3d3e49;
-      }
-
-    }
-
-    li:nth-child(1), li:nth-child(10) {
-      margin-left: 0;
     }
   }
 
-  & > div {
+  & > .bottom-div {
     & > div {
       position: relative;
       width: 160px;
@@ -326,12 +417,20 @@
         left: -100px;
         border-bottom: 4px solid #4f5362;
         border-left: 4px solid #4f5362;
+
+        @media only screen and (max-width: $mobile-max-width) {
+          left: -60px;
+        }
       }
 
       .btn-right {
         right: -100px;
         border-top: 4px solid #4f5362;
         border-right: 4px solid #4f5362;
+
+        @media only screen and (max-width: $mobile-max-width) {
+          right: -60px;
+        }
       }
     }
 
@@ -355,6 +454,11 @@
           width: 160px;
           height: 68px;
           object-fit: contain;
+
+          @media only screen and (max-width: $mobile-max-width) {
+            width: 104px;
+            height: 45px;
+          }
         }
       }
       li:nth-child(1) {
@@ -369,6 +473,10 @@
   text-align: center;
   padding-bottom: 93px;
 
+  @media only screen and (max-width: $mobile-max-width) {
+    padding-bottom: 40px;
+  }
+
   & > img {
     width: 100%;
     height: 445px;
@@ -383,10 +491,25 @@
   & > div {
     width: 963px;
     margin: 0 auto;
+
+    @media only screen and (max-width: $mobile-max-width) {
+      box-sizing: border-box;
+      width: 100%;
+      padding: 0 20px;
+    }
     & > div {
       width: 471px;
       height: 565px;
       background-color: #ffffff;
+
+      @media only screen and (max-width: $mobile-max-width) {
+        box-sizing: border-box;
+        width: 100%;
+        max-width: 571px;
+        height: auto;
+        margin: 10px auto;
+        padding: 0 20px 50px;
+      }
       img {
         width: 168px;
         height: 168px;
@@ -398,17 +521,24 @@
       h3 {
         margin-top: 55px;
         color: #31383e;
+
+        @media only screen and (max-width: $mobile-max-width) {
+          margin-top: 30px;
+        }
       }
 
       p {
         height: 96px;
         margin: 13px auto 0;
         color: #31383e;
+
+        @media only screen and (max-width: $mobile-max-width) {
+          height: auto;
+        }
       }
 
       div {
         margin-top: 30px;
-        height: 24px;
         font-size: 18px;
         font-weight: 600;
         line-height: 1.33;
@@ -424,12 +554,20 @@
     & > div:nth-child(1) {
       p {
         width: 300px;
+
+        @media only screen and (max-width: $mobile-max-width) {
+          width: 100%;
+        }
       }
     }
 
     & > div:nth-child(2) {
       p {
         width: 384px;
+
+        @media only screen and (max-width: $mobile-max-width) {
+          width: 100%;
+        }
       }
     }
   }
@@ -438,14 +576,7 @@
 .section-5 {
 
   h2 {
-    height: 52px;
-    text-shadow: 0 4px 8px rgba(35, 45, 65, 0.1);
-    font-family: Roboto;
-    font-size: 32px;
-    font-weight: bold;
-    line-height: 1.63;
     text-align: center;
-    color: #171c34;
   }
 
   ul {
@@ -455,12 +586,17 @@
 
     li {
       display: inline-block;
-      margin: 0 10px;
+      margin: 10px 5px;
 
       img {
         width: 210px;
         height: 100px;
         object-fit: contain;
+
+        @media only screen and (max-width: $mobile-max-width) {
+          width: 155px;
+          height: 76px;
+        }
       }
     }
   }
diff --git a/assets/scss/open-source.scss b/assets/scss/open-source.scss
index b6b9c100e..47b3eeb7e 100644
--- a/assets/scss/open-source.scss
+++ b/assets/scss/open-source.scss
@@ -1,24 +1,14 @@
+@import 'variables';
 .open-source-header {
+  padding-top: 129px;
+  padding-bottom: 40px;
   text-align: center;
-  height: 300px;
   color: #ffffff;
-
-  & > img {
-    width: 100%;
-    height: 100%;
-    object-fit:cover;
+  background-image: url("/images/common/resource-bg.jpg");
+  @media only screen and (max-width: $mobile-max-width) {
+    padding-top: 100px;
   }
-
-  & > div {
-    position: absolute;
-    top: 129px;
-    left: 0;
-    right: 0;
-    text-align: center;
-  }
-
   h1 {
-    height: 40px;
     text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
     font-size: 40px;
     font-weight: bold;
@@ -28,7 +18,6 @@
   }
 
   p {
-    height: 24px;
     margin-top: 12px;
     margin-bottom: 16px;
     text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
@@ -69,8 +58,7 @@
 }
 
 .open-source-tab {
-  width: 1160px;
-  margin: 40px auto 0;
+  margin-top: 40px;
   text-align: center;
   li {
     position: relative;
@@ -80,9 +68,15 @@
     font-weight: 600;
     color: #36435c;
     cursor: pointer;
+    @media only screen and (max-width: $mobile-max-width) {
+      font-size: 14px;
+    }
   }
   li + li {
     margin-left: 40px;
+    @media only screen and (max-width: $mobile-max-width) {
+      margin-left: 24px;
+    }
   }
   a {
     color: rgb(48, 62, 90);
@@ -103,6 +97,10 @@
       height: 0;
       border: 1em solid transparent;
       border-bottom-color: #fff;
+
+      @media only screen and (max-width: $mobile-max-width) {
+        display: none;
+      }
     }
   }
 
diff --git a/assets/scss/partner.scss b/assets/scss/partner.scss
index 308b1ae90..4b4c4d707 100644
--- a/assets/scss/partner.scss
+++ b/assets/scss/partner.scss
@@ -3,18 +3,14 @@
 
 .section-1 {
   position: relative;
-  height: 300px;
+  padding-top: 138px;
+  padding-bottom: 100px;
 
   .title-div {
-    position: absolute;
-    top: 138px;
-    left: 0;
-    right: 0;
     text-align: center;
   }
 
   p {
-    width: 1067px;
     margin: 12px auto 0;
     letter-spacing: -0.04px;
     color: #ffffff;
@@ -29,6 +25,10 @@
     right: 50%;
     bottom: -40px;
     transform: translateX(-490px);
+
+    @media only screen and (max-width: $mobile-max-width) {
+      display: none;
+    }
   }
   & > div {
     display: flex;
@@ -42,16 +42,35 @@
       height: 298px;
       border-radius: 10px 0 0 10px;
       background-color: #ffffff;
+
+      @media only screen and (max-width: $mobile-max-width) {
+        width: 100%;
+        height: auto;
+        border-radius: 10px;
+        padding: 20px;
+      }
+
       div {
         width: 351px;
         height: 48px;
         margin: 38px 80px 12px 40px;
+
+        @media only screen and (max-width: $mobile-max-width) {
+          width: 100%;
+          margin: 0;
+        }
       }
       p {
         width: 391px;
         height: 160px;
         margin-left: 40px;
         line-height: 2;
+
+        @media only screen and (max-width: $mobile-max-width) {
+          width: 100%;
+          height: auto;
+          margin: 0;
+        }
       }
       .img-1 {
         position: absolute;
@@ -71,6 +90,10 @@
       border-radius: 0 10px 10px 0;
       background-color: #3d3e49;
 
+      @media only screen and (max-width: $mobile-max-width) {
+        display: none;
+      }
+
       & > img {
         margin-top: 107px;
         margin-left: 45px;
@@ -161,6 +184,10 @@
     ul {
       margin-top: 20px;
 
+      @media only screen and (max-width: $mobile-max-width) {
+        justify-content: center;
+      }
+
       li {
         width: 570px;
         height: 309px;
@@ -169,6 +196,10 @@
         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) {
+          height: auto;
+        }
+
         h3 {
           margin: 40px 40px 20px;
         }
@@ -178,11 +209,16 @@
           margin-left: 40px;
           margin-right: 40px;
           line-height: 2;
+
+          @media only screen and (max-width: $mobile-max-width) {
+            height: auto;
+          }
         }
 
         div {
           margin-left: 40px;
           margin-top: 20px;
+          margin-bottom: 20px;
           font-weight: 600;
           line-height: 1.5;
         }
@@ -202,8 +238,17 @@
       margin-top: 20px;
       font-size: 0;
 
+      @media only screen and (max-width: $mobile-max-width) {
+        text-align: center;
+      }
+
       li:nth-child(4n + 1) {
         margin-left: 0;
+
+        @media only screen and (max-width: $mobile-max-width) {
+          margin: 20px 10px 0;
+        }
+
       }
 
       li {
@@ -217,6 +262,10 @@
         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) {
+          margin: 20px 10px 0;
+        }
+
         &:hover {
           .content {
             display: block;
@@ -253,7 +302,7 @@
           bottom: 0;
           left: 0;
           right: 0;
-          padding: 40px 30px;
+          padding: 20px 30px;
           background-image: radial-gradient(circle at -23% -21%, #cdf6d5, #089566 75%);
           font-size: 14px;
           line-height: 1.71;
diff --git a/assets/scss/projects.scss b/assets/scss/projects.scss
index e87aaac2f..f07067d28 100644
--- a/assets/scss/projects.scss
+++ b/assets/scss/projects.scss
@@ -1,11 +1,15 @@
 @import 'open-source';
-
+@import 'variables';
 
 .tab-content {
   background-color: #fff;
   padding-top: 60px;
   padding-bottom: 100px;
 
+  @media only screen and (max-width: $mobile-max-width) {
+    padding-top: 20px;
+  }
+
   .content {
     position: relative;
     min-height: 580px;
@@ -21,6 +25,10 @@
       box-shadow: 0 4px 15px 0 rgba(7,42,68,.1);
       background-color: #fff;
 
+      @media only screen and (max-width: $mobile-max-width) {
+        display: none;
+      }
+
       li:first-of-type {
         border-bottom: 1px solid rgba(181,193,204,.5);
         font-size: 16px;
@@ -50,6 +58,10 @@
     .right {
       padding-left: 300px;
 
+      @media only screen and (max-width: $mobile-max-width) {
+        padding-left: 0px;
+      }
+
       li {
         position: relative;
         padding: 32px 157px 32px 120px;
@@ -101,6 +113,22 @@
             color: #55bc8a;
           }
         }
+
+        @media only screen and (max-width: $mobile-max-width) {
+          padding: 12px 30px 12px 54px;
+
+          img {
+            width: 32px;
+            height: 32px;
+            left: 12px;
+          }
+
+          &:hover {
+            div {
+              display: none;
+            }
+          }
+        }
       }
 
       li + li {
diff --git a/assets/scss/service-mesh.scss b/assets/scss/service-mesh.scss
index 70552db36..726c0d90b 100644
--- a/assets/scss/service-mesh.scss
+++ b/assets/scss/service-mesh.scss
@@ -7,15 +7,10 @@ html {
 
 .section-1 {
   position: relative;
-  height: 350px;
+  padding-top: 129px;
 
   .title-div {
-    position: absolute;
-    width: 1160px;
-    top: 129px;
-    left: 50%;
-    transform: translateX(-50%);
-
+    padding-bottom: 60px;
     h1 {
       width: 1060px;
     }
@@ -27,6 +22,19 @@ html {
       color: #ffffff;
       text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
     }
+
+    @media only screen and (max-width: $mobile-max-width) {
+      width: 100%;
+      top: 100px;
+
+      h1 {
+        width: 100%;
+      }
+
+      p {
+        width: 100%;
+      }
+    }
   }
 }
 
@@ -37,8 +45,7 @@ html {
     position: relative;
 
     h2 {
-      width: 760px;
-      margin: 0 auto 45px;
+      margin-bottom: 45px;
       text-align: center;
     }
 
@@ -53,6 +60,10 @@ html {
         & > div {
           width: 460px;
 
+          @media only screen and (max-width: $mobile-max-width) {
+            width: 100%;
+          }
+
           p {
             margin-top: 24px;
             opacity: 0.9;
@@ -84,6 +95,10 @@ html {
 
         img {
           width: 660px;
+
+          @media only screen and (max-width: $mobile-max-width) {
+            width: 100%;
+          }
         }
       }
     }
@@ -93,14 +108,23 @@ html {
 .section-3 {
   position: relative;
   padding-top: 80px;
+  padding-bottom: 20px;
   text-align: center;
   overflow: hidden;
 
+  @media only screen and (max-width: $mobile-max-width) {
+    padding-top: 40px;
+  }
+
   .bg-left {
     position: absolute;
     top: 242px;
     right: 50%;
     transform: translateX(-200px);
+
+    @media only screen and (max-width: $mobile-max-width) {
+      display: none;
+    }
   }
 
   .bg-right {
@@ -108,6 +132,10 @@ html {
     top: 200px;
     left: 50%;
     transform: translateX(180px);
+
+    @media only screen and (max-width: $mobile-max-width) {
+      display: none;
+    }
   }
 
   & > div {
@@ -115,6 +143,10 @@ html {
     img {
       width: 955px;
       margin-top: 40px;
+
+      @media only screen and (max-width: $mobile-max-width) {
+        width: 100%;
+      }
     }
   
     p {
@@ -132,7 +164,7 @@ html {
       font-size: 16px;
       border-radius: 28px;
       cursor: pointer;
-      box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2), 0 10px 50px 0 rgba(34, 43, 62, 0.1);
+      box-shadow: 0 10px 8px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2), 0 10px 8px 0 rgba(34, 43, 62, 0.1);
       background-image: linear-gradient(to bottom, rgba(85, 188, 138, 0), rgba(85, 188, 138, 0.1) 97%), linear-gradient(to bottom, #55bc8a, #55bc8a);
       
       &:hover {
diff --git a/assets/scss/videos.scss b/assets/scss/videos.scss
index 63b92fbfa..595946256 100644
--- a/assets/scss/videos.scss
+++ b/assets/scss/videos.scss
@@ -5,9 +5,12 @@
   padding-top: 60px;
   padding-bottom: 100px;
 
+  @media only screen and (max-width: $mobile-max-width) {
+    padding-top: 20px;
+    padding-bottom: 40px;
+  }
+
   & > div {
-    width: 1160px;
-    margin: 0 auto;
 
     & > .video-tab-ul {
       padding: 30px 34px 22px;
@@ -49,6 +52,9 @@
     .video-ul {
       margin-top: 20px;
       font-size: 0;
+      @media only screen and (max-width: $mobile-max-width) {
+        text-align: center;
+      }
 
       & > li {
         position: relative;
@@ -61,6 +67,7 @@
         background-color: #eef4f8;
         background-image: url('/images/videos/video-bg.svg');
         overflow: hidden;
+        text-align: left;
         cursor: pointer;
 
         & > img {
@@ -126,10 +133,21 @@
             }
           }
         }
+
+        @media only screen and (max-width: $mobile-max-width) {
+          width: 330px;
+          height: 190px;
+          display: block;
+          margin: 30px auto;
+        }
       }
 
       li:nth-child(3n) {
         margin-right: 0;
+
+        @media only screen and (max-width: $mobile-max-width) {
+          margin: 30px auto;
+        }
       }
     }
 
@@ -168,11 +186,11 @@
   height: 420px;
   padding: 0;
   border-radius: 0;
+  font-size: 0;
 
   video {
     width: 100%;
     height: 100%;
-    min-height: 420px;
     background-color: #171c34;
     outline: none;
   }
@@ -181,4 +199,15 @@
     top: -40px;
     right: 0;
   }
+
+  @media only screen and (max-width: $mobile-max-width) {
+    width: 100%;
+    max-width: 100%;
+    height: auto;
+    
+    iframe {
+      width: 100%;
+      height: 300px;
+    }
+  }
 }
\ No newline at end of file
diff --git a/content/en/case/_index.md b/content/en/case/_index.md
index 8799464f5..fb84d16f4 100644
--- a/content/en/case/_index.md
+++ b/content/en/case/_index.md
@@ -6,7 +6,7 @@ css: "scss/case.scss"
 section1:
   title: User Case Studies
   content: KubeSphere is trusted by various enterprises and organizations to the innovators driving the future of software.
-  topImage: "images/case/case-top.jpg"
+  topImage: "/images/case/case-top.jpg"
 
 section2:
   tip: Read Case Study →
diff --git a/content/en/conferences/csi.md b/content/en/conferences/csi.md
index 54e7ab44c..5123b8076 100644
--- a/content/en/conferences/csi.md
+++ b/content/en/conferences/csi.md
@@ -1,7 +1,7 @@
 ---
 title: 'Development Practices of CSI Storage Plugins - Part Ⅰ'
 author: 'Xin Wang'
-date: '2019-06-25'
+createTime: '2019-06-25'
 ---
 
 Many users will transfer their apps to Kubernetes, where storage underlies applications. As users deploy their apps on the Kubernetes, some existing storage plugins are unable to satisfy the growing needs in terms of both diversity and functionality. This is why we need to accelerate the development of new storage plugins, and integrate QingCloud storage services with Kubernetes and KubeSphere.
diff --git a/content/en/conferences/logging.md b/content/en/conferences/logging.md
index 610f09842..ca5496d2c 100644
--- a/content/en/conferences/logging.md
+++ b/content/en/conferences/logging.md
@@ -1,7 +1,7 @@
 ---
 title: 'Cloud Native Observability: Log Management'
 author: 'Benjamin Huo, Dan Ma'
-date: '2019-06-25'
+createTime: '2019-06-25'
 ---
 
 As logs often contain very valuable information, log management represents an important part of cloud native observability. Logs feature a standard output (stdout) in containers and Kubernetes, which is different from physical machines or virtual machines. This means the collection, analysis and management of logs at the platform level can be carried out in a unified fashion, which demonstrates the unique value of logs. This article introduces a major solution to log management (EFK) in the cloud native area, FluentBit Operator developed by the KubeSphere team and some practices of KubeSphere in multi-tenant log management. Besides, the article also elaborates on an open source tool Loki, a low-cost and extensible application inspired by Prometheus and developed specifically for the log management of Kubernetes.
diff --git a/content/en/conferences/porter.md b/content/en/conferences/porter.md
index f2c204e69..cad171a25 100644
--- a/content/en/conferences/porter.md
+++ b/content/en/conferences/porter.md
@@ -1,7 +1,7 @@
 ---
 title: 'Porter: An Open Source Load Balancer for Kubernetes in a Bare Metal Environment'
 author: 'Xuetao Song'
-date: '2019-06-25'
+createTime: '2019-06-25'
 ---
 
 We know that we can use the service of LoadBalancer in the Kubernetes cluster to expose backend workloads externally. Cloud providers often offer cloud LoadBalancer plugins, which requires the cluster to be deployed on a specific IaaS platform. However, many enterprise users often deploy the Kubernetes cluster on bare metal, especially when it is used for the production environment. For the local bare metal cluster, Kubernetes does not provide LB implementation. Porter is an open source load balancer designed specifically for the bare metal Kubernetes cluster, which serves as an excellent solution to this problem.
diff --git a/content/en/contribution/_index.md b/content/en/contribution/_index.md
index 29745a521..360e164a7 100644
--- a/content/en/contribution/_index.md
+++ b/content/en/contribution/_index.md
@@ -6,7 +6,7 @@ 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"
+  topImage: "/images/contribution/contribution-top.jpg"
 
 section2:
   topType:
@@ -47,7 +47,7 @@ section2:
     topic: 'Community Governance'
     name: 'KubeSphere Community'
     icon: 'images/contribution/28.svg'
-    topIcon: 'images/contribution/8.svg'
+    topIcon: 'images/contribution/8.png'
     type:
       - name: 'TOC'
         icon: 'images/contribution/toc.svg'
diff --git a/content/en/partner/_index.md b/content/en/partner/_index.md
index 363d76df1..a68d259e8 100644
--- a/content/en/partner/_index.md
+++ b/content/en/partner/_index.md
@@ -6,7 +6,7 @@ css: "scss/partner.scss"
 section1:
   title: 'Join the Revolution, Partner with KubeSphere'
   content: 'We look forward to your joining KubeSphere partner to improve the ecosystem of both, and grow your business. KubeSphere provide  resources and rights for partners to help them increase their expertise, deliver open source technology, and resell product.'
-  topImage: 'images/partner/partner-top.jpg'
+  topImage: '/images/partner/partner-top.jpg'
 
 section2:
   title: 'Together, build partnership for success all over the world'
diff --git a/layouts/blogs/list.html b/layouts/blogs/list.html
index ca40d1edd..12f2377c5 100644
--- a/layouts/blogs/list.html
+++ b/layouts/blogs/list.html
@@ -1,7 +1,7 @@
 {{ define "main" }}
 {{- partial "openSource.html" . -}}
 <section class='section-1'>
-    <div>
+    <div class="common-layout">
         <ul class='blog-tab-ul'>
             <li class='active'>{{ .Params.tip }}</li>
             {{ $tags := slice }}
@@ -26,7 +26,7 @@
                         <img src="" alt="">
                         <span>{{ .Params.author }}</span>
                     </div>
-                    <p class='summary'>{{ substr .Summary 0 89 }}</p>
+                    <p class='summary'>{{ substr .Summary 0 120 }}</p>
                     <ul>
                         {{ range (split .Params.tag ",") }}
                         <li>{{ . }}</li>
diff --git a/layouts/blogs/single.html b/layouts/blogs/single.html
index ea270a4ac..a07f4d198 100644
--- a/layouts/blogs/single.html
+++ b/layouts/blogs/single.html
@@ -11,14 +11,14 @@
 <body>
 {{- partial "header.html" . -}}
 <section class="main-section">
-    <div>
+    <div class="common-layout">
         <div class='breadcrumb'>
             <span><a href='{{ "blogs" | absLangURL }}'>{{ i18n "introduction1"}}</a> > </span>
             <span>{{ .Title }}</span>
         </div>
         <div class='main-div'>
             <div class='author'>{{ .Params.author }}</div>
-            <div class='date'>{{ i18n "introduction3" }}：{{ .Params.createTime }}</div>
+            <div class='date'>{{ i18n "introduction3" }}：{{ string .Params.createTime }}</div>
             <h1>{{ .Title }}</h1>
             <div class='content'>
                 <div class='md-body'>
diff --git a/layouts/case/list.html b/layouts/case/list.html
index 0139afd22..f7d0245f0 100644
--- a/layouts/case/list.html
+++ b/layouts/case/list.html
@@ -1,13 +1,13 @@
 {{ define "main" }}
-<section class="section-1">
-    {{ with .Params.section1 }}
-    <img class="top-cover-img" src="{{ .topImage | absURL }}" alt="">
-    <div class="title-div">
+
+{{ 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>
-    {{ end }}
 </section>
+{{ end }}
 
 <section class="section-2">
     {{ with .Params.section2 }}
@@ -29,8 +29,8 @@
 
 <section class="section-3">
     {{ with .Params.section3 }}
-    <h2 class="title-black-h2">{{ .title }}</h2>
-    <div>
+    <h2 class="title-black-h2 common-layout">{{ .title }}</h2>
+    <div class="common-layout">
         <ul id="case-group">
             <li class="active">{{ .tip }}</li>
             {{ range .caseType }}
diff --git a/layouts/conferences/list.html b/layouts/conferences/list.html
index 50c17f5a6..9ec0e519b 100644
--- a/layouts/conferences/list.html
+++ b/layouts/conferences/list.html
@@ -2,7 +2,7 @@
 {{- partial "openSource.html" . -}}
 <section>
     <div class="tab-content">
-        <div class="content">
+        <div class="content common-layout">
             <ul>
                 {{ $viewDetail := .Params.viewDetail }}
                 {{ range .Params.list }}
diff --git a/layouts/conferences/single.html b/layouts/conferences/single.html
index 35d26cf0c..d4afc2286 100644
--- a/layouts/conferences/single.html
+++ b/layouts/conferences/single.html
@@ -11,14 +11,14 @@
 <body>
 {{- partial "header.html" . -}}
 <section class="main-section">
-    <div>
+    <div class="common-layout">
         <div class='breadcrumb'>
             <span><a href='{{ "conferences" | absLangURL }}'>{{ i18n "introduction4"}}</a> > </span>
             <span>{{ .Title }}</span>
         </div>
         <div class='main-div'>
             <div class='author'>{{ .Params.author }}</div>
-            <div class='date'>{{ i18n "introduction3" }}：{{ .Params.date }}</div>
+            <div class='date'>{{ i18n "introduction3" }}：{{ string .Params.createTime }}</div>
             <h1>{{ .Title }}</h1>
             <div class='content'>
                 <div class='md-body'>
diff --git a/layouts/contribution/list.html b/layouts/contribution/list.html
index d1da5e2db..f78204193 100644
--- a/layouts/contribution/list.html
+++ b/layouts/contribution/list.html
@@ -1,14 +1,13 @@
 {{ define "main" }}
 
-<section class="section-1">
-    {{ with .Params.section1 }}
-    <img class="top-cover-img" src="{{ .topImage | absURL }}" alt="">
-    <div class="title-div">
+{{ 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>
-    {{ end }}
 </section>
+{{ end }}
 
 <section class="section-2">
     {{ with .Params.section2 }}
@@ -72,24 +71,26 @@
     {{ end }}
 </section>
 
-<section class='section-3'>
+<section class='section-3 common-layout'>
     {{ with .Params.section3.interestGroup }}
     <h2 class="title-black-h2">{{ .title }}</h2>
     <p class="title-p">{{ .content }}</p>
-    <ul class='interest-ul common-layout' data-index='0' data-length='{{ len .children }}'>
-        {{ range $index, $element := .children }}
-        {{ $active := "" }}
-        {{ $icon := $element.icon }}
-        {{ if eq $index 0 }}
-        {{ $active = "active" }}
-        {{ $icon = $element.iconActive }}
-        {{ end }}
-        <li class="{{ $active }}" data-info='{{ . | jsonify }}' data-index='{{ $index }}'>
-            <img src="{{ $icon | absURL }}" alt="">
-            <p>{{ $element.name }}</p>
-        </li>
-        {{ end }}
-    </ul>
+    <div class="scroll">
+        <ul class='interest-ul common-layout' data-index='0' data-length='{{ len .children }}'>
+            {{ range $index, $element := .children }}
+            {{ $active := "" }}
+            {{ $icon := $element.icon }}
+            {{ if eq $index 0 }}
+            {{ $active = "active" }}
+            {{ $icon = $element.iconActive }}
+            {{ end }}
+            <li class="{{ $active }}" data-info='{{ . | jsonify }}' data-index='{{ $index }}'>
+                <img src="{{ $icon | absURL }}" alt="">
+                <p>{{ $element.name }}</p>
+            </li>
+            {{ end }}
+        </ul>
+    </div>
     <div class='bottom-div'>
         {{ with $first := index .children 0}}
         <div>
diff --git a/layouts/index.html b/layouts/index.html
index 221f27b1b..d685e8068 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -200,10 +200,11 @@
       $('.image').find('img').attr('src', "/images/home/applications2.png")
     } 
     $(window).resize(function() {
+      var screenWidth = $(window).width()
       if (screenWidth <= 768) {
         $('.image').find('img').attr('src', "/images/home/applications2.png")
       } else {
-        $('.image').find('img').attr('src', "/images/home/applications1.png")
+        $('.image').find('img').attr('src', "/images/home/applications.png")
       }
     })
   }
diff --git a/layouts/observability/list.html b/layouts/observability/list.html
index 3317b1cac..753e46298 100644
--- a/layouts/observability/list.html
+++ b/layouts/observability/list.html
@@ -1,13 +1,13 @@
 {{ define "main" }}
-<section class='section-1'>
-  {{ with .Params.section1}}
-  <img class="top-cover-img" src="{{ .image }}" alt="">
-  <div class="title-div">
+
+{{ with .Params.section1}}
+<section class='section-1 bg-cover' style='background-image: url("{{ .image }}");'>
+  <div class="title-div common-layout">
     <h1 class="title-h1">{{ .title }}</h1>
     <p class="common-p">{{ .content }}</p>
   </div>
-  {{ end }}
 </section>
+{{ end }}
 
 <section class="section-2">
   {{ with .Params.section2 }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 708d9533f..1cfa42172 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -82,7 +82,7 @@
                 {{ end}}
             {{ end }}
 
-            <li {{ if $active }} class="menu-li menu-active" {{ else }} class="menu-li" {{ end}}>
+            <li data-check="0" {{ if $active }} class="menu-li menu-active" {{ else }} class="menu-li" {{ end}}>
                 <span class='menu-span'>{{ .Name }}</span>
                 <ul class="dropdown-menu">
                     {{ range .Children }}
@@ -136,13 +136,13 @@ var bindClickShowMenu = function() {
 }
 
 var bindClickModalLi = function() {
-    var check = false
     $('.modal .menu-li').click(function() {
-        if (!check) {
-            check = true
+        var check = $(this).data('check')
+        if (check === 0) {
+            $(this).data('check', 1)
             $(this).find('.dropdown-menu').slideDown(200)
         } else {
-            check = false
+            $(this).data('check', 0)
             $(this).find('.dropdown-menu').slideUp(200)
         }
         $(this).find('.menu-span').toggleClass('up')
diff --git a/layouts/partials/openSource.html b/layouts/partials/openSource.html
index 416612d0d..904d33992 100644
--- a/layouts/partials/openSource.html
+++ b/layouts/partials/openSource.html
@@ -1,7 +1,6 @@
 <section>
-  <div class='open-source-header'>
-    <img src='{{ "/images/common/resource-bg.jpg" | absURL }}' alt="">
-    <div>
+  <div class='open-source-header bg-cover'>
+    <div class="common-layout">
       <h1>{{ i18n "introduction10" }}</h1>
       <p>{{ i18n "introduction11" }}</p>
       <div>
@@ -16,7 +15,7 @@
       </div>
     </div>
   </div>
-  <ul class="open-source-tab">
+  <ul class="open-source-tab common-layout">
     {{ $section := .Page.Section }}
     {{ $menus := (index .Site.Menus.main 2).Children }}
     {{ range $menus }}
diff --git a/layouts/partner/list.html b/layouts/partner/list.html
index 5acc4f482..6afc7eb10 100644
--- a/layouts/partner/list.html
+++ b/layouts/partner/list.html
@@ -1,14 +1,13 @@
 {{ define "main" }}
 
-<section class="section-1">
-    {{ with .Params.section1 }}
-    <img class="top-cover-img" src="{{ .topImage | absURL }}" alt="">
-    <div class="title-div">
+{{ 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>
-    {{ end }}
 </section>
+{{ end }}
 
 <section class="section-2">
     {{ with .Params.section2 }}
diff --git a/layouts/service-mesh/list.html b/layouts/service-mesh/list.html
index 3317b1cac..753e46298 100644
--- a/layouts/service-mesh/list.html
+++ b/layouts/service-mesh/list.html
@@ -1,13 +1,13 @@
 {{ define "main" }}
-<section class='section-1'>
-  {{ with .Params.section1}}
-  <img class="top-cover-img" src="{{ .image }}" alt="">
-  <div class="title-div">
+
+{{ with .Params.section1}}
+<section class='section-1 bg-cover' style='background-image: url("{{ .image }}");'>
+  <div class="title-div common-layout">
     <h1 class="title-h1">{{ .title }}</h1>
     <p class="common-p">{{ .content }}</p>
   </div>
-  {{ end }}
 </section>
+{{ end }}
 
 <section class="section-2">
   {{ with .Params.section2 }}
diff --git a/layouts/videos/list.html b/layouts/videos/list.html
index f8e6ea26b..3b1b294d9 100644
--- a/layouts/videos/list.html
+++ b/layouts/videos/list.html
@@ -2,7 +2,7 @@
 {{- partial "openSource.html" . -}}
 {{ $data := index .Site.Data .Site.Language.Lang }}
 <section class='section-1'>
-    <div>
+    <div class="common-layout">
         <ul class='video-tab-ul'>
             <li class='active'>{{ .Params.tip }}</li>
             {{ $groups := slice }}
diff --git a/static/images/contribution/8.png b/static/images/contribution/8.png
new file mode 100644
index 000000000..40376e5a3
Binary files /dev/null and b/static/images/contribution/8.png differ