diff --git a/docs/assets/css/main-min.css b/docs/assets/css/main-min.css
index 923dfa6f..f9094674 100644
--- a/docs/assets/css/main-min.css
+++ b/docs/assets/css/main-min.css
@@ -10,6 +10,18 @@ img {
 	z-index: 51
 }
 
+
+.product_pic img {
+	width: 30%;
+}
+
+
+@media screen and (max-width:768px) {
+	.product_pic img {
+		width: 100%;
+	}
+}
+
 .markdown-section {
 	max-width: 80%;
 	margin-top: 50px
@@ -1183,4 +1195,43 @@ mark {
         right: -30px;
         top: 455px;
     }
-}
\ No newline at end of file
+}
+
+
+
+@font-face {
+	font-family: Montserrat;
+	/* font-weight: 700; */
+	font-style: normal;
+	src: url("/assets/font/montserrat_n5.e72d00d31ae5399d260a80ec70322c62c1819762.woff2") format("woff2")
+  }
+  
+  /* @font-face {
+	font-family: Montserrat;
+	font-weight: 600;
+	font-style: normal;
+	src: url("https://fonts.shopifycdn.com/montserrat/montserrat_n6.7a3c341961dc23aaabcc116124b80f2a7abec1a2.woff2?&hmac=b92922e1683cc0012e34c7bf8312b5012a94a53fc8c072e1f67c774308ea2f2a") format("woff2")
+  } */
+
+
+.markdown-section h1 {
+	font-family: Montserrat;
+	font-weight: 1000;
+    font-size: 48px;
+}
+
+.markdown-section h2 {
+	font-family: Montserrat;
+	font-weight: 600;
+	font-size: 25px;
+	padding: 0px;
+}
+
+.markdown-section p {
+	font-family: Montserrat;
+}
+
+/* .markdown-section p:nth-of-type(1){
+	margin-top:-15px;
+} */
+
diff --git a/docs/assets/font/montserrat_n5.e72d00d31ae5399d260a80ec70322c62c1819762.woff2 b/docs/assets/font/montserrat_n5.e72d00d31ae5399d260a80ec70322c62c1819762.woff2
new file mode 100644
index 00000000..bdab80de
Binary files /dev/null and b/docs/assets/font/montserrat_n5.e72d00d31ae5399d260a80ec70322c62c1819762.woff2 differ
diff --git a/docs/en/core/basic.md b/docs/en/core/basic.md
index 6f339b13..b2b1a7c6 100644
--- a/docs/en/core/basic.md
+++ b/docs/en/core/basic.md
@@ -1,6 +1,6 @@
-# BASIC {docsify-ignore-all}
+# BASIC
 
-<img src="assets/img/product_pics/core/basic/basic_02.png" alt="basic_02"  width="30%" height="30%"> <img src="assets/img/product_pics/core/basic/basic_03.png" alt="basic_03"  width="30%" height="30%">
+<div class="product_pic"><img src="assets/img/product_pics/core/basic/basic_02.png"><img src="assets/img/product_pics/core/basic/basic_03.png"></div>
 
 ## Description
 
@@ -15,8 +15,7 @@ M5Stack Basic is consist with two separable parts. the upside part has all kinds
 
 <img src="assets/img/product_pics/core/basic/basic_11.png">
 
-**Notice:**
-
+Notice:<br>
 The newly-produced M5Core replaces the screen with better display performance and higher viewing angle, so it has some compatibility problems with the old Arduino library. When using the old library for screen driving, it will produce reverse color display. You can open the Arduino. The library management option will upgrade your M5Stack library to the latest version (after 0.2.8) to solve this problem.
 
 <img src="assets\img\product_pics\core\basic\lib_01.jpg" width="40%">
@@ -98,15 +97,14 @@ The newly-produced M5Core replaces the screen with better display performance an
  <tr><td>TF Card</td><td>MOSI</td><td>MISO</td><td>CLK</td><td> </td><td> </td><td> </td><td> </td><td>CS</td></tr>
 </table>
 
-**Button & Speaker**
-
+Button & Speaker
 <table>
  <tr><td>ESP32 Chip</td><td>GPIO39</td><td>GPIO38</td><td>GPIO37</td><td>GPIO25</td></tr>
  <tr><td>Button Pin</td><td>BUTTON A</td><td>BUTTON B</td><td>BUTTON C</td></tr>
  <tr><td>Speaker</td><td> </td><td> </td><td> </td><td>DA PIN</td></tr>
 </table>
 
-**GROVE Port A & IP5306**
+GROVE Port A & IP5306
 
 *We've use the customized I2C version of IP5306, on power management.*
 
@@ -118,8 +116,7 @@ The newly-produced M5Core replaces the screen with better display performance an
  <tr><td>IP5306</td><td>SCL</td><td>SDA</td><td>5V</td><td>GND</td></tr>
 </table>
 
-**IP5306 charging/discharging，Voltage parameter**
-
+IP5306 charging/discharging，Voltage parameter
 <table>
    <tr style="font-weight:bold;text-align:center" >
       <td>charging</td>
diff --git a/docs/zh_CN/core/basic.md b/docs/zh_CN/core/basic.md
index 9d39e236..8a0ee3bb 100644
--- a/docs/zh_CN/core/basic.md
+++ b/docs/zh_CN/core/basic.md
@@ -1,9 +1,8 @@
-# BASIC {docsify-ignore-all}
+# BASIC
 
 <img class="pic" src="assets/img/product_pics/core/basic/basic_02.png"><img class="pic" src="assets/img/product_pics/core/basic/basic_03.png">
 
 
-
 ## 描述
 
 **M5Stack BASIC** 是M5Stack开发套件系列中的一款，拥有超高性价比与丰富案例资源的入门级开发套件.对于开发新手来说, Basic 是不二之选.