diff --git a/assets/scss/common.scss b/assets/scss/common.scss
index c0534bd66..75906ba7b 100644
--- a/assets/scss/common.scss
+++ b/assets/scss/common.scss
@@ -15,14 +15,6 @@ html {
   background-color: #f5f8f9;
 }
 
-button {
-  border: none;
-
-  &:hover {
-    box-shadow: none;
-  }
-}
-
 .common-layout {
   width: 1160px;
   margin: 0 auto;
@@ -41,7 +33,7 @@ button {
   font-size: 32px;
   font-weight: bold;
   line-height: 1.63;
-  color: #3d3e49;
+  color: #171c34;
 }
 
 .title-white-h2 {
@@ -53,11 +45,17 @@ button {
 }
 
 .title-p {
+  font-size: 16px;
+  line-height: 2;
+  text-align: center;
+  color: #919aa3;
+}
+
+.common-center-p {
   font-size: 16px;
   line-height: 1.5;
-  letter-spacing: -0.04px;
-  color: #ffffff;
-  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+  text-align: center;
+  color: #8f94a1;
 }
 
 .common-btn {
@@ -68,11 +66,19 @@ button {
   box-shadow: 0 10px 50px 0 rgba(34,43,62,.1),0 8px 16px 0 rgba(33,43,61,.2);
 
   &:hover {
-    box-shadow: none;
+    box-shadow: none!important;
   }
 }
 
-.common-a-green {
+.inner-a {
+  color: #00a971;
+
+  &:hover {
+    color: #008a5c;
+  }
+}
+
+.common-green-a {
   height: 24px;
   font-weight: 600;
   line-height: 24px;
@@ -83,7 +89,7 @@ button {
   }
 }
 
-.common-a-black {
+.common-black-a {
   height: 24px;
   font-weight: 600;
   line-height: 24px;
diff --git a/assets/scss/index.scss b/assets/scss/index.scss
index 88f2e41e9..407747c2e 100644
--- a/assets/scss/index.scss
+++ b/assets/scss/index.scss
@@ -79,20 +79,12 @@ section {
 
     button {
       height: 56px;
-      line-height: 56px;
       border-radius: 28px;
-      text-align: center;
       font-size: 16px;
-      border: none;
-      cursor: pointer;
-      &:hover {
-        box-shadow: none;
-      }
     }
 
     .btn1 {
       width: 211px;
-      color: #ffffff;
       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(76, 169, 134, 0.05);
       background-image: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.1) 97%),linear-gradient(to bottom,#242e42,#242e42);
     }
@@ -146,26 +138,11 @@ section {
   z-index: 2;
 
   & > div {
-    width: 1160px;
-    margin: 0 auto;
     text-align: center;
 
-    & > h2 {
-      height: 52px;
-      text-shadow: 0 4px 8px rgba(35, 45, 65, 0.1);
-      font-size: 32px;
-      font-weight: bold;
-      line-height: 1.63;
-      color: #171c34;
-    }
-
     & > p {
       width: 964px;
-      height: 72px;
       margin: 16px auto 50px;
-      font-size: 16px;
-      line-height: 1.5;
-      color: #919aa3;
     }
 
     & > ul {
diff --git a/layouts/index.html b/layouts/index.html
index 55786ebb1..75babbe4e 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -7,11 +7,11 @@
   <img class='img3' src="/images/home/2.svg" alt="">
   <div>
     <div>
-      <p class='p1'>{{ .title }}</p>
-      <h1>{{ .topic }}</h1>
-      <p class='p2'>{{ .content }}</p>
-      <a href="{{ .downloadLink1 }}"><button class='btn1'>{{ .btnContent1 }}</button></a>
-      <a href="{{ .downloadLink2 }}"><button class='btn2'>{{ .btnContent2 }}</button></a>
+      <p class='p1'>{{ .title | safeHTML }}</p>
+      <h1>{{ .topic | safeHTML }}</h1>
+      <p class='p2'>{{ .content | safeHTML }}</p>
+      <a href="{{ .downloadLink1 }}"><button class='btn1 common-btn'>{{ .btnContent1 }}</button></a>
+      <a href="{{ .downloadLink2 }}"><button class='btn2 common-btn'>{{ .btnContent2 }}</button></a>
     </div>
     <img class='img1' src="/images/home/53.png" alt="">
     <img class='img2' src="/images/home/left.svg" alt="">
@@ -22,15 +22,15 @@
 
 <section class="section-2">
   {{ with .Params.section2 }}
-  <div>
-    <h2>{{ .title }}</h2>
-    <p>{{ .content }}</p>
+  <div class="common-layout">
+    <h2 class="title-black-h2">{{ .title | safeHTML }}</h2>
+    <p class="title-p">{{ .content | safeHTML }}</p>
     <ul>
       {{ range .children }}
       <li>
         <img src="{{ .icon }}" alt="">
-        <h3>{{ .name }}</h3>
-        <p>{{ .content }}</p>
+        <h3>{{ .name | safeHTML }}</h3>
+        <p>{{ .content | safeHTML }}</p>
       </li>
       {{ end }}
     </ul>
@@ -41,8 +41,8 @@
 <section class='section-3'>
   {{ with .Params.section3 }}
   <div>
-    <h2>{{ .title }}</h2>
-    <p>{{ .content }}</p>
+    <h2>{{ .title | safeHTML }}</h2>
+    <p>{{ .content | safeHTML }}</p>
     <div class='menu-div'>
       <ul>
         {{ range $index, $element := .children }}
@@ -53,11 +53,11 @@
       <div class='right-div'>
         <div class='top'>
           <h3>💁🏼‍♂️{{ .name }}</h3>
-          <p>{{ .content }}</p>
+          <p>{{ .content | safeHTML }}</p>
         </div>
         <ul>
           {{ range .children }}
-          <li>{{ .content }}</li>
+          <li>{{ .content | safeHTML }}</li>
           {{ end }}
         </ul>
         <img src="{{ .icon | absURL }}" alt="">
@@ -83,7 +83,7 @@
           <img src="{{ .icon }}" alt="">
           <div>
             <h3>{{ .name }}</h3>
-            <p>{{ .content}}</p>
+            <p>{{ .content | safeHTML }}</p>
           </div>
         </li>
         {{ end }}
@@ -99,7 +99,7 @@
             <img src="{{ .icon }}" alt="">
             <span>{{ .name }}</span>
           </div>
-          <p>{{ .content }}</p>
+          <p>{{ .content | safeHTML }}</p>
         </div>
         <div class='middle-line'></div>
         <a href="{{ .link }}">{{ i18n "Read More" }} →</a>