diff --git a/docs/en/hat/hat-18650.md b/docs/en/hat/hat-18650.md
index 70f96c95..f7eac2e4 100644
--- a/docs/en/hat/hat-18650.md
+++ b/docs/en/hat/hat-18650.md
@@ -1,41 +1,26 @@
-# 18650C HAT {docsify-ignore-all}
+# 18650C HAT
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U080</div>
 
-<img src="assets\img\product_pics\hat\18650C_hat\18650C_01.webp" width="30%"><img src="assets\img\product_pics\hat\18650C_hat\18650C_02.webp" width="30%"><img src="assets\img\product_pics\hat\18650C_hat\18650C_03.webp" width="30%">
-
+<div class="product_pic"><img src="assets\img\product_pics\hat\18650C_hat\18650C_01.webp"><img src="assets\img\product_pics\hat\18650C_hat\18650C_02.webp"></div>
 
 ## Description
 
-
 **18650C HAT** is a rechargeable battery base designed for M5SticKC with built-in 18650 large capacity rechargeable lithium battery.It can provide long-term endurance for the equipment. The base is designed with the plug-in structure of the HAT series, which can be used to maintain reliable connection with the M5StickC. The bottom is equipped with a USB interface charging interface, which is convenient and quick for the battery. The USB port of the battery base is only used as a charging interface, and does not have UART function.There are many types of mounting holes on the back of the base,which can be easily installed by the user into all types of planes.
 
-
 <mark>Note: The M5StickC produced after October 2019 has a new fixing hole design. If your M5StickC is an old device (no fixing hole), you cannot use screws to fix it to the 18650CHAT, but this does not affect Functional use of modules</mark>
 
 <img src="assets\img\product_pics\hat\18650C_hat\18650C_04.webp" width="30%">
 
 ## Product Features
 
-- Chargable 
+- Chargable
 - Battery replaceable
 
-
-## Weight & Dimension
-
-- Product Dimension：150mm x 25mm x 25mm
-- Product Weight：277g
-
 ## Include
 
 - 1x 18650 HAT（include 2000mAh battery)
 
-## Video
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/18650C_HAT.mp4" type="video/mp4">
-</video>
-
 <script>
 
    var purchase_link = 'https://m5stack.com/products/m5stickc-18650';
diff --git a/docs/en/hat/hat-8servos.md b/docs/en/hat/hat-8servos.md
index a05b5a2a..f2377c3f 100644
--- a/docs/en/hat/hat-8servos.md
+++ b/docs/en/hat/hat-8servos.md
@@ -15,11 +15,6 @@
 - 16340 battery base
 - I2C protocol for comunication and control (0x38)
 
-## Weight and Size
-
-- Product Size：55mm * 25mm * 20mm
-- Proudct weight：33g(include battery)
-
 ## Applications
 
 - Multiple servo control
@@ -60,13 +55,13 @@
 
 ## Example
 
-- **UIFlow**
+### UIFlow
 
 <img src="assets\img\product_pics\hat\8servos_hat\8servos.png" width="30%" height="30%">
 
-### 1. Arduino IDE
+### Arduino IDE
 
-*To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/8servos-hat/Arduino)*
+To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/8servos-hat/Arduino)
 
 ## 8Servos HAT Instructions
 
@@ -166,13 +161,6 @@
 
 	（2）RGB888
 
-
-## Video
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/8Servos_hat.mp4" type="video/mp4">
-</video>
-
 <script>
 
    var purchase_link = 'https://m5stack.com/products/m5stickc-8servos-hat';
diff --git a/docs/en/hat/hat-adc.md b/docs/en/hat/hat-adc.md
index ee9677b0..72033198 100644
--- a/docs/en/hat/hat-adc.md
+++ b/docs/en/hat/hat-adc.md
@@ -1,8 +1,8 @@
-# ADC HAT {docsify-ignore-all}
+# ADC HAT
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U069</div>
 
-<img src="assets\img\product_pics\hat\adc_hat\adc_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\adc_hat\adc_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\adc_hat\adc_hat_03.jpg" width="30%" height="30%">
+<div class="product_pic"><img src="assets\img\product_pics\hat\adc_hat\adc_hat_01.jpg"><img src="assets\img\product_pics\hat\adc_hat\adc_hat_02.jpg"></div>
 
 ## Description
 
@@ -12,8 +12,6 @@ The ADS1100 consists of a delta-sigma A/D converter core with adjustable gain, a
 <br>
 ADS1100 itself is able to accept a differential input from -5 ~ +5 V, but we have limited the input to 0~12V by adding on the peripheral circuit design of this IC.
 
-
-
 ### Product Features
 
 - Input: 0-12V
@@ -33,26 +31,18 @@ ADS1100 itself is able to accept a differential input from -5 ~ +5 V, but we hav
 - 1x ADC HAT
 - 1x 2 Pin 3.96 Pitch Terminal
 
-## Weight and Size
-
-- Package size:40mm x 42mm x 30mm
-- Package weight:14g
-
 ## Applications
 
 -  Analog Signal Capture
 
-
 ## Links
 
 -  **Datasheet** - [ADS1100](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/hat/ads1100_en.pdf)
 
-  
 ## Schematic
 
 <img src="assets/img/product_pics/hat/adc_hat/adc_hat_04.jpg" width="80%" height="80%">
 
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_M5StickC_logo.png" width="100px" style="margin-top:20px">
@@ -65,48 +55,15 @@ ADS1100 itself is able to accept a differential input from -5 ~ +5 V, but we hav
 
 ## Example
 
-- **UIFlow**
+### UIFlow
+
 Open http://flow.m5stack.com and Load Demo
 
 <img src="assets/img/product_pics/hat/adc_hat/adc.png">
 
 ### Arduino IDE
 
-*To get complete code, please click [here](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/ADC).*
-
-```arduino
-#include <M5StickC.h>
-#include <Wire.h>
-#include "ADS1100.h"
-
-ADS1100 ads;
-#define REF_VOL    3.3
-#define ADC_BASE   REF_VOL/32768
-void setup(void)
-{
-    M5.begin(true,true,false);
-    // The address can be changed making the option of connecting multiple devices
-    ads.getAddr_ADS1100(ADS1100_DEFAULT_ADDRESS);   // 0x48, 1001 000 (ADDR = GND)
-    // The ADC gain (PGA), Device operating mode, Data rate
-    // can be changed via the following functions
-    ads.setGain(GAIN_ONE);          // 1x gain(default)
-    ads.setMode(MODE_CONTIN);       // Continuous conversion mode (default)
-    ads.setRate(RATE_8);            // 8SPS (default)
-    ads.setOSMode(OSMODE_SINGLE);   // Set to start a single-conversion
-    ads.begin();
-}
-void loop() {
-byte error;
-    int8_t address;
-    address = ads.ads_i2cAddress;
-    // The i2c_scanner uses the return value of
-    // the Write.endTransmisstion to see if
-    // a device did acknowledge to the address.
-    Wire.beginTransmission(address);
-    error = Wire.endTransmission();
-    result = ads.Measure_Differential();
-}
-```
+To get complete code, please click [here](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/ADC)
 
 ### Pin Map
 
@@ -115,14 +72,6 @@ byte error;
  <tr><td>HAT ADC</td><td>SDA</td><td>SCL</td><td>5V</td><td>GND</td></tr>
 </table>
 
-
-## Video
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/ADC-DAC-HAT.mp4" type="video/mp4" >
-</video>
-
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/m5stickc-adc-hat-ads1100';
diff --git a/docs/en/hat/hat-beetlec.md b/docs/en/hat/hat-beetlec.md
index 07ef071e..c64e9c82 100644
--- a/docs/en/hat/hat-beetlec.md
+++ b/docs/en/hat/hat-beetlec.md
@@ -1,10 +1,8 @@
-# BeetleC {docsify-ignore-all}
+# BeetleC
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:K030</div>
 
-<img src="assets\img\product_pics\hat\beetlec_hat\beetlec_hat_01.jpg" width="30%" height="30%"> <img src="assets\img\product_pics\hat\beetlec_hat\beetlec_hat_02.jpg" width="30%" height="30%">
-
-
+<div class="product_pic"><img src="assets\img\product_pics\hat\beetlec_hat\beetlec_hat_01.jpg"><img src="assets\img\product_pics\hat\beetlec_hat\beetlec_hat_02.jpg"></div>
 
 ## Description
 
@@ -14,9 +12,6 @@ BeatleC works together with  M5StickC controller. On the base, we have two DC ge
 The body of the robotic car is inclined because the wheels we put on front and back are different sizes as you can see from the pictures. 
 Besides, a power switch is placed at the front.
 
-
-<img src="assets\img\product_pics\hat\beetlec_hat\beetlec_hat_03.jpg" width="30%" height="30%">
-
 ## Product Feature
 
 - Small Robotic Car
@@ -27,7 +22,6 @@ Besides, a power switch is placed at the front.
 - Concise design
 - Smooth control
 
-
 ## Weight and Size
 
 - Size: 70mm * 50mm * 25mm
@@ -35,13 +29,11 @@ Besides, a power switch is placed at the front.
 - Back-wheel diameter:⌀14mm
 - Package weight:102g
 
-
 ## Applications
 
 - Remote Motor control 
 - Wireless Robotic control
 
-
 ## Package Includes
 
 - 1x BeetleC bottom
@@ -56,7 +48,6 @@ Besides, a power switch is placed at the front.
 
 >2. After downloading the software, double-click to run the application, connect the M5 device to the computer through the data cable, select the port parameters, click **"Burn"** to start burning. (**For M5StickC burning, please Set the baud rate to 750000 or 115200**)
 
-
 ## Operation Steps
 
 ### How to set up beetlec
@@ -75,27 +66,15 @@ Besides, a power switch is placed at the front.
 - Push upwards the control bar to speed up the wheel and push down to slow down.
 - There are four color bolcks at the bottom. The colorful blocks are used to turn on all RGB LEDs at the bottom to the specified color. Block with black will turn off the light.
 
-
 ## Example
 
-- **UIFlow**
+### UIFlow**
 
 <img src="assets\img\product_pics\hat\beetlec_hat\beetlec.png" width="60%" height="60%">
 
 ### Arduino IDE
 
-*To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/beetleC/stickC/beetleC).*
-
-
-## Video
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/BeetleC_01.mp4" type="video/mp4">
-</video>
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/BeetleC_02.mp4" type="video/mp4">
-</video>
+To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/beetleC/stickC/beetleC)
 
 <script>
 
diff --git a/docs/en/hat/hat-bugc.md b/docs/en/hat/hat-bugc.md
index 3106a986..e6b736fd 100644
--- a/docs/en/hat/hat-bugc.md
+++ b/docs/en/hat/hat-bugc.md
@@ -1,19 +1,14 @@
-# BugC {docsify-ignore-all}
+# BugC
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:K033</div>
 
-<img src="assets\img\product_pics\hat\bugc_hat\bugc_hat_01.jpg" width="30%" height="30%"> <img src="assets\img\product_pics\hat\bugc_hat\bugc_hat_02.jpg" width="30%" height="30%">
-<img src="assets\img\product_pics\hat\bugc_hat\bugc_hat_04.jpg" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets\img\product_pics\hat\bugc_hat\bugc_hat_01.jpg"><img src="assets\img\product_pics\hat\bugc_hat\bugc_hat_02.jpg"></div>
 
 ## Description
 
 **BugC** is a programmable robot base compatible with the M5StickC. This has four DC motors, motor driver, two RGB LEDs, battery holder and a switch.
 The Bugc base needs to be used in conjunction with the M5StickC controller. The base comes with an STM32F030F4 micro controller which controls all the motors and LEDs and this is controlled through I2C protocol(0x38) by the M5StickC which sits on top of the base.
 
-
-<img src="assets\img\product_pics\hat\bugc_hat\bugc_hat_03.jpg" width="30%" height="30%">
-
 ## Product Features
 
 - remote control
@@ -25,7 +20,6 @@ The Bugc base needs to be used in conjunction with the M5StickC controller. The
 - Equipped with a battery holder
 - Flexible movement in all directions
 
-
 ## Weight and Size
 
 - Size: 55mm * 40mm * 25mm
@@ -52,7 +46,6 @@ The Bugc base needs to be used in conjunction with the M5StickC controller. The
 - Robot control
 - Smart and cognitive toys
 
-
 ## Package Includes
 
 - 1x BugC base
@@ -68,7 +61,6 @@ The Bugc base needs to be used in conjunction with the M5StickC controller. The
 
 >2. After downloading the software, double-click to run the application, connect the M5 device to the computer through the data cable, select the port parameters, click **"Burn"** to burn the program (**For M5StickC, set the baud rate to 750000 or 115200**)
 
-
 ## Example
 
 - **UIFlow**
@@ -77,14 +69,7 @@ The Bugc base needs to be used in conjunction with the M5StickC controller. The
 
 **Arduino**
 
-*To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/BugC/bugC)*
-
-
-## Video
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/bugC.mp4" type="video/mp4">
-</video>
+To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/BugC/bugC)
 
 <script>
 
diff --git a/docs/en/hat/hat-cardkb.md b/docs/en/hat/hat-cardkb.md
index c7ed60c4..2af04013 100644
--- a/docs/en/hat/hat-cardkb.md
+++ b/docs/en/hat/hat-cardkb.md
@@ -1,9 +1,8 @@
-# CardKB HAT{docsify-ignore-all}
+# CardKB HAT
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U077</div>
 
-<img src="assets/img/product_pics/hat/cardkb_hat/cardkb_hat_01.jpg" width="30%" height="30%"><img src="assets/img/product_pics/hat/cardkb_hat/cardkb_hat_02.jpg" width="30%" height="30%"><img src="assets/img/product_pics/hat/cardkb_hat/cardkb_hat_03.jpg" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets/img/product_pics/hat/cardkb_hat/cardkb_hat_01.jpg"><img src="assets/img/product_pics/hat/cardkb_hat/cardkb_hat_02.jpg"></div>
 
 ## Description
 
@@ -20,7 +19,6 @@ The CardKB HAT also offers support for several button combinations (Shift+Key, F
 
 * **Fn+Key**(custom function key combination), led flashing green,keyboard will output the third key value, which you can customize based on the requirement.
 
-
 * **Double-click Shift or fn** to lock Shift(red always on) or Fn(green always on) and output the second value or third value multiple times.
 
 <img src="assets/img/product_pics/hat/cardkb_hat/cardkb_hat_04.jpg">
@@ -29,9 +27,6 @@ The CardKB HAT also offers support for several button combinations (Shift+Key, F
 
 - Full-function keyboard with multi-key combination support
 - IIC Address : 0X5F(I2C)
-
-## Size and  Weight
-
 - Product Size：84.6mm x 54.2mm x 6.5mm
 - weight： 21g
 
@@ -43,16 +38,10 @@ The CardKB HAT also offers support for several button combinations (Shift+Key, F
 
 - Keyboard peripheral 
 
-
 ## Related Link
 
-- **[Offical Video](https://www.youtube.com/channel/UCozgFVglWYQXbvTmGyS739w)**
-
-- **[Forum](http://forum.m5stack.com/)**
-
 - **[CardKB HAT Firmware](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/CardKB_HAT/firmware_328p/cardKB_HAT)**
 
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -71,62 +60,17 @@ The CardKB HAT also offers support for several button combinations (Shift+Key, F
 
 <img src="assets\img\product_pics\app\mega328_isp.png" width="30%" height="30%">
 
-
 ## Example
 
 ### Arduino IDE
 
-*To get the code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/CardKB_HAT)。*
-
-```arduino
-#include <M5StickC.h>
-#include <Wire.h>
-
-#define CARDKB_ADDR 0x5F
-
-void setup()
-{
-  M5.begin();
-  Wire.begin(0, 26);
-  M5.Lcd.setRotation(3);
-  M5.Lcd.fillScreen(BLACK);
-  M5.Lcd.setCursor(0, 0, 2 );
-  M5.Lcd.setTextColor(YELLOW);
-
-  M5.Lcd.println("IIC Address: 0x5F\n");
-  M5.Lcd.println(">>");
-}
-void loop()
-{
-  Wire.requestFrom(CARDKB_ADDR, 1);
-  while(Wire.available())
-  {
-    char c = Wire.read(); // receive a byte as characterif
-    if (c != 0)
-    {
-      M5.Lcd.printf("%c", c);
-      Serial.println(c, HEX);
-      Serial.println(char(c));
-    }
-  }
-  // delay(10);
-}
-```
+To get the code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/CardKB_HAT)
 
 ### UIFLOW
 
 <img src="assets/img/product_pics/hat/cardkb_hat/cardkb_hat.jpg" width="30%" height="30%">
 
-*To get the uiflow code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/CardKB_HAT/UIFLOW)。*
-
-## Video
-
-- **CardKB HAT**
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/CardKB_HAT.mp4" type="video/mp4">
-</video>
-
+To get the uiflow code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/CardKB_HAT/UIFLOW)
 
 <script>
 
diff --git a/docs/en/hat/hat-dac.md b/docs/en/hat/hat-dac.md
index 95c9928d..e2a5a479 100644
--- a/docs/en/hat/hat-dac.md
+++ b/docs/en/hat/hat-dac.md
@@ -1,8 +1,8 @@
-# DAC HAT {docsify-ignore-all}
+# DAC HAT
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U068</div>
 
-<img src="assets\img\product_pics\hat\dac_hat\dac_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\dac_hat\dac_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\dac_hat\dac_hat_03.jpg" width="30%" height="30%">
+<div class="product_pic"><img src="assets\img\product_pics\hat\dac_hat\dac_hat_01.jpg"><img src="assets\img\product_pics\hat\dac_hat\dac_hat_02.jpg"></div>
 
 ## Description
 
@@ -13,7 +13,6 @@ Packed with a DAC converter chip MCP4725, which is low-power, high accuracy, sin
 The DAC input and configuration data can be programmed to the non-volatile memory (EEPROM) by the user using the I2C interface command.
 I2C address: 0x60
 
-
 ## Product Features
 
 - Output: 0～3.3V
@@ -35,11 +34,6 @@ I2C address: 0x60
 - 1x DAC HAT
 - 1x 2 Pin 3.96 Pitch Terminal
 
-## Weight and Size
-
-- Package size:40mm x 42mm x 30mm
-- Package weight:14g
-
 ## Applications
 
 - SetPointorOffsetTrimming
@@ -48,7 +42,6 @@ I2C address: 0x60
 - LowPowerPortableInstrumentation • PCPeripherals
 - DataAcquisitionSystems
 
-
 ## Links
 
 -  **Datasheet** - [MCP4725](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/hat/MCP4725_en.pdf)
@@ -69,7 +62,7 @@ I2C address: 0x60
 
 ## Example
 
-- **UIFlow**
+### UIFlow*
 
 Open http://flow.m5stack.com and Load Demo
 
@@ -77,29 +70,7 @@ Open http://flow.m5stack.com and Load Demo
 
 ###  Arduino IDE
 
-*To get complete code, please click [here](https://github.com/m5stack/M5StickC/blob/master/examples/Hat/DAC).*
-
-```arduino
-#include <M5StickC.h>
-#include <Wire.h>
-#include "Adafruit_MCP4725.h"
-#define DAC_ADDR
-Adafruit_MCP4725 dac;
-
-void setup(void) {
-    M5.begin(true,true,false);
-    dac.begin(0x60);
-    dac.setVoltage(2048, false);
-
-}
-
-void loop(void) {
-    // 12bit value , false mean not write EEPROM   
-    dac.setVoltage(1024, false);
-    dac.setVoltage(2048, false);   
-}
-
-```
+To get complete code, please click [here](https://github.com/m5stack/M5StickC/blob/master/examples/Hat/DAC)
 
 ### Pin Map
 
@@ -108,14 +79,6 @@ void loop(void) {
  <tr><td>HAT ADC</td><td>SDA</td><td>SCL</td><td>5V</td><td>GND</td></tr>
 </table>
 
-
-## Video
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/ADC-DAC-HAT.mp4" type="video/mp4" >
-</video>
-
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/m5stickc-dac-hat-mcp4725';
diff --git a/docs/en/hat/hat-env.md b/docs/en/hat/hat-env.md
index 97ef4dac..fac04b51 100644
--- a/docs/en/hat/hat-env.md
+++ b/docs/en/hat/hat-env.md
@@ -1,15 +1,13 @@
-# ENV HAT {docsify-ignore-all}
+# ENV HAT
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U053</div>
 
-<img src="assets\img\product_pics\hat\env_hat\env_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\env_hat\env_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\env_hat\env_hat_03.jpg" width="30%" height="30%">
+<div class="product_pic"><img src="assets\img\product_pics\hat\env_hat\env_hat_01.jpg"><img src="assets\img\product_pics\hat\env_hat\env_hat_02.jpg"></div>
 
 ## Description
 
-
 **Hat ENV**  It is able to detect the temperature, humidity, air pressure and magnetic field. This product relates via I2C protocol which allows you to obtain 4 types of environment data thru just 2pins, together with the tiny body, makes it a powerful application for envitonment data collecting. 
 
-
 ## Product Feature
 
 - temperature:
@@ -22,13 +20,9 @@
 - Typical Magnetic Field：
     - ±1300μT（x，y-axis），±2500μT（z-axis）
     - magnetic field resolution: 0.3μT
-
-## Weight & Dimension
-
 - Dimension：24mm x 20.3mm x 13.8mm
 - Weight：3g
 
-
 ## Package Includes
 
 - 1x ENV Hat
@@ -54,7 +48,6 @@
 
 - **[BMM150 Datasheet](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/core/BMM150_datasheet_en.pdf)**
 
-
 ## EasyLoader
 
 >EasyLoader is a concise and fast program writer, which has a built-in case program related to the product. It can be burned to the main control by simple steps to perform a series of function verification. Please install the corresponding driver according to the device type. M5Core host [Please click here to view the CP210X driver installation tutorial](en/arduino/arduino_development), M5StickC/V/T/ATOM series can be used without driver)
@@ -83,13 +76,13 @@
 
 ## Example
 
-- **UIFlow**
+### UIFlow
 
 Open http://flow.m5stack.com and Load Demo
 
 <img src="assets/img/product_pics/hat/env_hat/env.png">
 
-- **Arduino**
+### Arduino
 
  Please click [here](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/ENV) to get complete code
 
diff --git a/docs/en/hat/hat-finger.md b/docs/en/hat/hat-finger.md
index d556023e..6e2997b7 100644
--- a/docs/en/hat/hat-finger.md
+++ b/docs/en/hat/hat-finger.md
@@ -1,15 +1,12 @@
-# FINGER HAT {docsify-ignore-all}
+# FINGER HAT
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U074</div>
 
-<img src="assets\img\product_pics\hat\finger_hat\finger_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\finger_hat\finger_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\finger_hat\finger_hat_03.jpg" width="30%" height="30%">
-
-
+<div class="product_pic"><img src="assets\img\product_pics\hat\finger_hat\finger_hat_01.jpg"><img src="assets\img\product_pics\hat\finger_hat\finger_hat_02.jpg"></div>
 
 ## Description
 
 **FINGER Hat** comes with "FPC1020SC" fingerprint sensor inside. This all-in-one fingerprint sensor makes adding, verification and management of fingerprints super easy.
-
 Compact size, serial protocol and 'ultra-low power consumption'- all make this M5 Unit very attractive to be used along with the M5StickC. It performs fast fingerprint matching with the highest security level at the most optimal user convenience. The M5 Unit can be programmed to set customized fingerprint recognition comparison levels and security levels. if you ever consider to make your project more secure with biometrics, don’t forget to include this M5 Unit: "FINGER HAT".
 
 UART settings:
@@ -18,7 +15,6 @@ UART settings:
 - 1 Stop bit
 - No parity
 
-
 ## Product Features
 
 - Fingerprint:  	         150
@@ -33,14 +29,9 @@ UART settings:
 - Supported Baudrate:        9600bps-115200bps（Default:19200bps）
 - Operating temperature:     -10°C - 60°C
 - Operating humidity:        20% - 80%
-
-
-## Weight and Size
-
 - Size：55mm * 25mm * 20mm
 - weight：33g(include battery)
 
-
 ## Included
 
 - 1x FINGER HAT
@@ -51,7 +42,6 @@ UART settings:
 - Passwordless authentication
 - User identification
 
-
 ## Schematic
 
 <img src="assets/img/product_pics/hat/finger_hat/finger_hat_04.jpg" width="50%" height="50%">
@@ -84,13 +74,6 @@ To get complete code, please click [here](https://github.com/m5stack/M5-ProductE
 
 - Datasheet **[FPC1020A](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/hat/1020A_datasheet_cn.pdf)**
 
-## Video
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/FINGER-HAT.mp4" type="video/mp4" >
-</video>
-
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/all/products/m5stickc-fingerprint-hatf1020sc';
diff --git a/docs/en/hat/hat-joyc.md b/docs/en/hat/hat-joyc.md
index 5dd33bd0..a237843f 100644
--- a/docs/en/hat/hat-joyc.md
+++ b/docs/en/hat/hat-joyc.md
@@ -1,22 +1,18 @@
-# JoyC {docsify-ignore-all}
+# JoyC
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U079</div>
 
-<img src="assets\img\product_pics\hat\JoyC_hat\JoyC_01.jpg" width="20%"><img src="assets\img\product_pics\hat\JoyC_hat\JoyC_02.jpg" width="20%"><img src="assets\img\product_pics\hat\JoyC_hat\JoyC_03.jpg" width="20%"><img src="assets\img\product_pics\hat\JoyC_hat\JoyC_04.jpg" width="20%">
-
+<div class="product_pic"><img src="assets\img\product_pics\hat\JoyC_hat\JoyC_01.jpg"><img src="assets\img\product_pics\hat\JoyC_hat\JoyC_02.jpg"></div>
 
 ## Description
 
-**JoyC** is a rocker module designed for the M5StickC.It supports two-hand operation. Embedded STM32F030F4 main control chip, using I2C communication protocol and host M5StickC for data transmission. The range of the joystick is 0~200, there are 12 RGB LEDs under the left and right joysticks, and the bottom of the joystick is equipped with a 16340 battery base for continuous battery life. 
+**JoyC** is a rocker module designed for the M5StickC.It supports two-hand operation. Embedded STM32F030F4 main control chip, using I2C communication protocol and host M5StickC for data transmission. The range of the joystick is 0~200, there are 12 RGB LEDs under the left and right joysticks, and the bottom of the joystick is equipped with a 16340 battery base for continuous battery life.
 
 ## Product Features
 
 - STM32F030F4 inside 
 - communication protocol: I2C (address: 0x38)
 - support omni-directional movement/button press
-
-## Weight & Dimension
-
 - Dimension：200mm x 55mm x 50mm
 - Weight：81g(include 750mAh Battery)
 
@@ -52,13 +48,6 @@
 
 - **[Arduino](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/JoyC)**
 
-## Video
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/JoyC.mp4" type="video/mp4">
-</video>
-
-
 <script>
 
    var purchase_link = 'https://m5stack.com/products/m5stickc-joyc';
diff --git a/docs/en/hat/hat-joystick.md b/docs/en/hat/hat-joystick.md
index 830365b4..158bc72a 100644
--- a/docs/en/hat/hat-joystick.md
+++ b/docs/en/hat/hat-joystick.md
@@ -1,28 +1,18 @@
-# Joystick HAT {docsify-ignore-all}
+# Joystick HAT
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U073</div>
 
-<img src="assets\img\product_pics\hat\joystick_hat\joystick_hat_01.jpg" width="30%"><img src="assets\img\product_pics\hat\joystick_hat\joystick_hat_02.jpg" width="30%"><img src="assets\img\product_pics\hat\joystick_hat\joystick_hat_03.jpg" width="30%">
-
+<div class="product_pic"><img src="assets\img\product_pics\hat\joystick_hat\joystick_hat_01.jpg"><img src="assets\img\product_pics\hat\joystick_hat\joystick_hat_02.jpg"></div>
 
 ## Description
 
-**Joystick HAT** is one of the HAT module that is specifically designed for M5StickC. We have used a STM32F030F4 microprocessor inside to implement I2C communication with M5StickC.
-
-This mini-volume joystick module supports full angular movement and center press, and outputs angular data as well as button digital signals.
-
-With the 'HAT' unified plug-in design it can provide reliable connection, in the most streamlined way. which allowes to get more HMI experience.
-
-<img src="assets\img\product_pics\hat\joystick_hat\joystick_hat_04.jpg" width="30%"><img src="assets\img\product_pics\hat\joystick_hat\joystick_hat_05.jpg" width="30%">
+**Joystick HAT** is one of the HAT module that is specifically designed for M5StickC. We have used a STM32F030F4 microprocessor inside to implement I2C communication with M5StickC.This mini-volume joystick module supports full angular movement and center press, and outputs angular data as well as button digital signals.With the 'HAT' unified plug-in design it can provide reliable connection, in the most streamlined way. which allowes to get more HMI experience.
 
 ## Product Features
 
-- STM32F030F4 inside 
+- STM32F030F4 inside
 - communication protocol: I2C (address: 0x38)
 - support omni-directional movement/button press
-
-## Weight & Dimension
-
 - Dimension：24mm x 30mm x 17mm
 - Weight：3g
 
@@ -30,8 +20,6 @@ With the 'HAT' unified plug-in design it can provide reliable connection, in the
 
 - 1x Joystick HAT
 
-<img src="assets\img\product_pics\hat\joystick_hat\joystick_hat_06.jpg" width="30%">
-
 ## Applications
 
 - Game Handle
@@ -104,12 +92,6 @@ To get complete code, please click [here](https://github.com/m5stack/M5-ProductE
  <tr><td>Joystick HAT</td><td>SDA</td><td>SCL</td><td>3.3V</td><td>GND</td></tr>
 </table>
 
-## Video
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/Joystick_HAT.mp4" type="video/mp4">
-</video>
-
 <script>
 
    var purchase_link = 'https://m5stack.com/products/m5stickc-joystick-hat';
diff --git a/docs/en/hat/hat-ncir.md b/docs/en/hat/hat-ncir.md
index f63049ef..7b7a0d00 100644
--- a/docs/en/hat/hat-ncir.md
+++ b/docs/en/hat/hat-ncir.md
@@ -1,11 +1,8 @@
-# NCIR HAT {docsify-ignore-all}
+# NCIR HAT
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U061</div>
 
-<img src="assets\img\product_pics\hat\ncir_hat\hat_ncir_01.jpg" width="30%" height="30%">
-<img src="assets\img\product_pics\hat\ncir_hat\hat_ncir_02.jpg" width="30%" height="30%">
-<img src="assets\img\product_pics\hat\ncir_hat\hat_ncir_03.jpg" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets\img\product_pics\hat\ncir_hat\hat_ncir_01.jpg"><img src="assets\img\product_pics\hat\ncir_hat\hat_ncir_02.jpg"></div>
 
 ## Description
 
@@ -17,7 +14,6 @@ The MLX90614 is factory calibrated in wide temperature ranges: -40 to 125 ˚C fo
 
 Connect with M5StickC via GOIO 0/26 (I2C add: 0x5A).<br>
 
-
 ## Product Features
 
 - Operating voltage: 4.5 to 5.5V
@@ -31,11 +27,6 @@ Connect with M5StickC via GOIO 0/26 (I2C add: 0x5A).<br>
 
 - 1x NCIR HAT
 
-## Weight and Size
-
-- Package size:40mm x 42mm x 30mm
-- Package weight:13g
-
 ## Applications
 
 -  Body Temperature Measurement
@@ -59,15 +50,17 @@ Connect with M5StickC via GOIO 0/26 (I2C add: 0x5A).<br>
 
 >2. After downloading the software, double-click to run the application, connect the M5 device to the computer through the data cable, select the port parameters, click **"Burn"** to start burning. (**For M5StickC burning, please Set the baud rate to 750000 or 115200**)
 
-
 ## Example
 
 - **UIFlow**
+
 Open http://flow.m5stack.com and Load Demo
 
 <img src="assets\img\product_pics\hat\ncir_hat\ncir.png">
 
-- **[Arduino](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/NCIR_HAT)**
+- **Arduino**
+
+[Click here to download Arduino code](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/NCIR_HAT)
 
 ### Pin Map
 
@@ -76,13 +69,6 @@ Open http://flow.m5stack.com and Load Demo
  <tr><td>HAT NCIR</td><td>SDA</td><td>SCL</td><td>5V</td><td>GND</td></tr>
 </table>
 
-## Video
-**Demo** 
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/NCIR-HAT.mp4" type="video/mp4" >
-</video>
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/m5stickc-ncir-hatmlx90614';
diff --git a/docs/en/hat/hat-neoflash.md b/docs/en/hat/hat-neoflash.md
index 58181677..0d3d0cfa 100644
--- a/docs/en/hat/hat-neoflash.md
+++ b/docs/en/hat/hat-neoflash.md
@@ -1,9 +1,8 @@
-# Neoflash HAT {docsify-ignore-all}
+# Neoflash HAT
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U071</div>
 
-<img src="assets\img\product_pics\hat\neoflash_hat\neoflash_hat_01.jpg" width="30%"> <img src="assets\img\product_pics\hat\neoflash_hat\neoflash_hat_02.jpg" width="30%"> <img src="assets\img\product_pics\hat\neoflash_hat\neoflash_hat_05.jpg" width="30%">
-
+<div class="product_pic"><img src="assets\img\product_pics\hat\neoflash_hat\neoflash_hat_01.jpg"><img src="assets\img\product_pics\hat\neoflash_hat\neoflash_hat_02.jpg"></div>
 
 ## Description
 
@@ -12,8 +11,6 @@
 We even prepared a dark brown acrylic board to cover on the NeoFlash board for better effection. We also provide two types of pin set with a 90-degree bend so that you can attach the NeoFlash board onto M5StickC in different ways. 
 If you thinking about adding a display on your project, NeoFlash is a good choice. 
 
-<img src="assets\img\product_pics\hat\neoflash_hat\neoflash_hat_03.jpg" width="30%"> <img src="assets\img\product_pics\hat\neoflash_hat\neoflash_hat_04.jpg" width="30%">
-
 ## Product Features
 
 - Primordial three basic colors for each pixel
@@ -24,9 +21,6 @@ If you thinking about adding a display on your project, NeoFlash is a good choic
 - Hole Distance: 0.1 in-(2.54 mm)
 - Hole Dimension: 0.039 "1mm (CNC Factory)
 - Assembly Approach:  back to back (default) / horizontal contact
-
-## Weight & Dimension
-
 - Dimension：58mm x 23.5mm x 1mm
 - Weight：2g
 
@@ -47,7 +41,6 @@ If you thinking about adding a display on your project, NeoFlash is a good choic
 
 <img src="assets\img\product_pics\hat\neoflash_hat\neoflash_hat_06.jpg" height="300px"><img src="assets\img\product_pics\hat\neoflash_hat\neoflash_hat_07.jpg" height="300px">
 
-
 ## Schematic
 
 <img src="assets\img\product_pics\hat\neoflash_hat\neoflash_hat_08.jpg" width="30%"> 
@@ -75,13 +68,6 @@ To get complete code, please click [here](https://github.com/m5stack/M5-ProductE
  <tr><td>Neoflash HAT</td><td>DATA</td><td>5V</td><td>GND</td></tr>
 </table>
 
-## Video
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/Neoflash_HAT.mp4" type="video/mp4">
-</video>
-
-
 <script>
 
    var purchase_link = 'https://m5stack.com/products/m5stickc-neofalsh-hat';
diff --git a/docs/en/hat/hat-pir.md b/docs/en/hat/hat-pir.md
index 975e3e1c..78e5f3da 100644
--- a/docs/en/hat/hat-pir.md
+++ b/docs/en/hat/hat-pir.md
@@ -1,13 +1,11 @@
-# PIR HAT {docsify-ignore-all}
+# PIR HAT
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U054</div>
 
-<img src="assets\img\product_pics\hat\pir_hat\pir_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\pir_hat\pir_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\pir_hat\pir_hat_03.jpg" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets\img\product_pics\hat\pir_hat\pir_hat_01.jpg"><img src="assets\img\product_pics\hat\pir_hat\pir_hat_02.jpg"></div>
 
 ## Description
 
-
 **Hat PIR** is an M5StickC compatible human body induction sensor, it belongs to "Passive pyroelectric infrared detector", that detect the infrared come from the human body. When the infrared is detected, the sensor will output HIGH and last for two seconds until the next detecting round.
 
 *Notice: There exist 2 seconds delay*
@@ -24,11 +22,6 @@
 
 - 1x PIR Hat
 
-## Weight and Size
-
-- Package size:60mm x 57mm x 17mm
-- Package weight:20g
-
 ## Applications
 
 - Hunman body induction lamp
@@ -39,12 +32,6 @@
 
 <img src="assets\img\product_pics\hat\pir_hat\pir_hat_04.jpg" width="50%" height="50%">
 
-## Links
-
-- **[Official channle](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
-
-- **[Official forum](http://forum.m5stack.com/)**
-
 ## EasyLoader
 
 >EasyLoader is a concise and fast program writer, which has a built-in case program related to the product. It can be burned to the main control by simple steps to perform a series of function verification. Please install the corresponding driver according to the device type. M5Core host [Please click here to view the CP210X driver installation tutorial](en/arduino/arduino_development), M5StickC/V/T/ATOM series can be used without driver)
diff --git a/docs/en/hat/hat-powerc.md b/docs/en/hat/hat-powerc.md
index eba79fa3..5df1be66 100644
--- a/docs/en/hat/hat-powerc.md
+++ b/docs/en/hat/hat-powerc.md
@@ -1,13 +1,11 @@
-# PowerC HAT {docsify-ignore-all}
+# PowerC HAT
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U081</div>
 
-<img src="assets\img\product_pics\hat\PowerC_hat\powerC_01.webp" width="30%"><img src="assets\img\product_pics\hat\PowerC_hat\powerC_02.webp" width="30%"><img src="assets\img\product_pics\hat\PowerC_hat\powerC_03.webp" width="30%">
-
+<div class="product_pic"><img src="assets\img\product_pics\hat\PowerC_hat\powerC_01.webp"><img src="assets\img\product_pics\hat\PowerC_hat\powerC_02.webp"></div>
 
 ## Description
 
-
 **PowerC HAT** is a charging module specially designed for m5stickc, with built-in ip3005 high-precision lithium battery protection IC and ip5209 power management IC. It uses I2C communication protocol to carry out data transmission with m5stickc of the host computer, and can check the voltage, current and other information through programming. The back battery seat of the module can be installed with two 16340 batteries, which can be charged by the charging module, and can also be used as a charging treasure to provide external power through the battery In addition, the module provides an I2C interface for connecting I2C peripherals, a typec interface for power input, a usb-a bus for power output, with a voltage output of 5V / 1.5A and an input voltage of 5V. The module is equipped with an independent switch, which can be opened once and closed twice.
 
 <img src="assets\img\product_pics\hat\PowerC_hat\powerC_04.webp" width="30%">
@@ -22,9 +20,8 @@
 
 - IIC Address 0x75
 
-## Weight & Dimension
-
 - Dimension：55mm x 35mm
+
 - Weight：19g
 
 ## Include
@@ -35,7 +32,6 @@
 
 <mark>I2C address: 0x75</mark>
 
-
 ## Links
 
 - **[IP5209 Datasheet](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/hat/IP5209.pdf)**
@@ -45,13 +41,13 @@
 
 - **UIFlow**
 
-*If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/PowerC/UIFlow).*
+If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/PowerC/UIFlow)
 
 <img src="assets\img\product_pics\hat\PowerC_hat\PowerC.png" width="80%">
 
 - **Arduino**
 
-*To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/PowerC/PowerC)*
+To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/PowerC/PowerC)
 
 ## EasyLoader
 
@@ -79,11 +75,6 @@
     </div>
 </div>
 
-## Video
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/PowerC_HAT.mp4" type="video/mp4">
-</video>
 
 <script>
 
diff --git a/docs/en/hat/hat-proto-plus.md b/docs/en/hat/hat-proto-plus.md
index 28ddbb2b..52eb6e47 100644
--- a/docs/en/hat/hat-proto-plus.md
+++ b/docs/en/hat/hat-proto-plus.md
@@ -1,16 +1,13 @@
-# PROTO PLUS HAT {docsify-ignore-all}
+# PROTO PLUS HAT
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U060-B</div>
 
-<img src="assets\img\product_pics\hat\proto_plus_hat\hat_proto_plus_01.jpg" width="30%"> <img src="assets\img\product_pics\hat\proto_plus_hat\hat_proto_plus_02.jpg" width="30%">
-
-
+<div class="product_pic"><img src="assets\img\product_pics\hat\proto_plus_hat\hat_proto_plus_01.jpg"> <img src="assets\img\product_pics\hat\proto_plus_hat\hat_proto_plus_02.jpg"></div>
 
 ## Description
 
 **PROTO PLUS HAT** is a universal proto board compatible with M5SticKC. Compared to the previous PROTO HAT, "PLUS" is designed to provide a larger board area. Combined with the 8 pin header, you can have more add-ons for your M5StickC. The expansion interface is fully connected to the universal board, allowing the user to freely design the circuit on the board. The 90° pin header enables the proto board to be spliced with the M5StickC at various angles. If you plan to add circuit design to your project and hope to achieve space saving by changing the way the board is spliced, HAT PROTO PLUS will be a good choice.
 
-
 <img src="assets\img\product_pics\hat\proto_plus_hat\hat_proto_plus_03.jpg" width="30%">
 
 ## Product Features
@@ -24,68 +21,12 @@
 - 1x PROTO PLUS HAT
 - 1x 8 pin header（90°）
 
-## Weight and Size
-
-- Package size:68mm x 53mm x 12mm
-- Package weight:12g
-
 ## Applications
 
 - Prototyping 
 - Related work by M5 User: [view](https://www.hackster.io/kiraku-labo/balance-robot-9009db)
 
 
-
-## Video
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/PROTO_PLUS_HAT.mp4" type="video/mp4">
-</video>
-
-
-## Example
-
-*To get complete code, please click [here](https://github.com/ShashaDDD/EC11Encoder).*
-
-```arduino
-#include <TaskScheduler.h>
-#include <M5StickC.h>
-#include <Arduino.h>
-#include "RotaryEncoderWithButton.h"
-
-
-//#include <SimpleTimer.h>
-
-//RotaryEncoderWithButton rotary(2,3,4);
-RotaryEncoderWithButton rotary(26,36,0);
-
-uint32_t data;
-int i;
-void t1Callback();
-Task t1(5, TASK_FOREVER, &RotaryEncoderWithButton::ReadAB);
-Scheduler runner; 
-
-void setup() {
-	M5.begin();
-	Serial.begin(115200);
-	rotary.begin();
-
-	runner.init();
-  	runner.addTask(t1);
-
-	delay(100);
-	t1.enable();
-
-}
-
-void loop() {
-	runner.execute();
-}
-```
-
-
-
-
 <script>
 
    var purchase_link = 'https://m5stack.com/products/m5stickc-proto-plus-hat';
diff --git a/docs/en/hat/hat-proto.md b/docs/en/hat/hat-proto.md
index 9ed7e6ad..4dc652c3 100644
--- a/docs/en/hat/hat-proto.md
+++ b/docs/en/hat/hat-proto.md
@@ -1,9 +1,8 @@
-# PROTO HAT {docsify-ignore-all}
+# PROTO HAT
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U060</div>
 
-<img src="assets\img\product_pics\hat\proto_hat\hat_proto_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\proto_hat\hat_proto_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\proto_hat\hat_proto_03.jpg" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets\img\product_pics\hat\proto_hat\hat_proto_01.jpg"><img src="assets\img\product_pics\hat\proto_hat\hat_proto_02.jpg"></div>
 
 ## Description
 
@@ -12,8 +11,6 @@
 PINs on top of the device is ported out for building more connections.<br>
 
 For example, since m5stickc have less hardware resource than m5stack, we can make it up with this HAT module, if you want to add more buttons, you do it with PROTO_HAT. <br><br><br>
-  
-<img src="assets\img\product_pics\hat\proto_hat\hat_proto_05.jpg" width="30%">
 
 ## Product Features
 
@@ -25,11 +22,6 @@ For example, since m5stickc have less hardware resource than m5stack, we can mak
 
 - 1x PROTO HAT
 
-## Weight and Size
-
-- Package size:40mm x 42mm x 30mm
-- Package weight:13g
-
 ## Applications
 
 - Prototyping 
@@ -38,27 +30,6 @@ For example, since m5stickc have less hardware resource than m5stack, we can mak
 
 <img src="assets\img\product_pics\hat\proto_hat\hat_proto_04.jpg" width="50%" height="50%">
 
-## Links
-
-- **[Official Channel](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
-
-- **[Official forum](http://forum.m5stack.com/)**
-
-
-## Example
-
-- **[Arduino](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/ENV)**
-
-
-## Video
-
-**Demo**
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/PROTO-HAT.mp4" type="video/mp4">
-</video>
-
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/m5stickc-proto-hat';
diff --git a/docs/en/hat/hat-puppyc.md b/docs/en/hat/hat-puppyc.md
index b5732166..8e638812 100644
--- a/docs/en/hat/hat-puppyc.md
+++ b/docs/en/hat/hat-puppyc.md
@@ -1,10 +1,8 @@
-# PuppyC {docsify-ignore-all}
+# PuppyC
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:K035</div>
 
-<img src="assets\img\product_pics\hat\puppyc_hat\puppyc_01.jpg" width="30%" height="30%"> <img src="assets\img\product_pics\hat\puppyc_hat\puppyc_02.jpg" width="30%" height="30%">
-<img src="assets\img\product_pics\hat\puppyc_hat\puppyc_04.jpg" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets\img\product_pics\hat\puppyc_hat\puppyc_01.jpg"><img src="assets\img\product_pics\hat\puppyc_hat\puppyc_02.jpg"></div>
 
 ## Description
 
@@ -14,8 +12,6 @@ PuppyC base needs to be used in conjunction with the M5StickC controller.After t
 
 It walks slowly and is easy to control.Due to the small contact area, the movement is slow and the frictional force is as large as possible even on a soft surface.
 
-<img src="assets\img\product_pics\hat\puppyc_hat\puppyc_03.jpg" width="30%" height="30%">
-
 ## Product Features
 
 - Programmable robot
@@ -28,8 +24,6 @@ It walks slowly and is easy to control.Due to the small contact area, the moveme
 - Weight：58g
 - Servo angle range：0-180°
 
-
-
 ## Applications
 
 - Robotic pet
@@ -64,12 +58,6 @@ To get complete code, please click [here](https://github.com/m5stack/M5-ProductE
 
 To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/PuppyC)
 
-## Video
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/App/PuppyC/PuppyC.mp4" type="video/mp4">
-</video>
-
 <script>
 
    var purchase_link = 'https://m5stack.com/products/puppyc-w-o-m5stickc';
diff --git a/docs/en/hat/hat-roverc.md b/docs/en/hat/hat-roverc.md
index c54ccb83..0adc8387 100644
--- a/docs/en/hat/hat-roverc.md
+++ b/docs/en/hat/hat-roverc.md
@@ -1,10 +1,8 @@
-# RoverC {docsify-ignore-all}
+# RoverC
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:K036</div>
 
-<img src="assets\img\product_pics\hat\roverc_hat\roverc_hat_01.jpg" width="20%" height="30%"> <img src="assets\img\product_pics\hat\roverc_hat\roverc_hat_02.jpg" width="20%" height="30%">
-<img src="assets\img\product_pics\hat\roverc_hat\roverc_hat_03.jpg" width="20%" height="30%"> <img src="assets\img\product_pics\hat\roverc_hat\roverc_hat_04.jpg" width="20%" height="30%">
-
+<div class="product_pic"><img src="assets\img\product_pics\hat\roverc_hat\roverc_hat_01.jpg"> <img src="assets\img\product_pics\hat\roverc_hat\roverc_hat_02.jpg"></div>
 
 ## Description
 
@@ -23,6 +21,8 @@
 - Extra Grove ports for expansion
 - Equipped with 16340 battery holder
 - Flexible movement in all directions
+- Size: 75mm * 75mm * 55mm
+- Weight：213g(include Battery)
 
 ## Instructions
 Before use, please make sure that the roverc is fully charged. Charging method: insert m5stickc into the roverc, and connect the USB cable for charging.
@@ -41,7 +41,6 @@ MotorControl：
 <tr><td>04</td><td>0x03</td><td>-127~127</td></tr>
 </table>
 
-
 ### Pin Map
 
 <table>
@@ -57,12 +56,6 @@ MotorControl：
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/RoverC_USER.MP4" type="video/mp4">
 </video>
 
-## Weight and Size
-
-- Size: 75mm * 75mm * 55mm
-- Weight：213g(include Battery)
-
-
 ## Applications
 
 - Autonomous Rover
@@ -85,22 +78,16 @@ MotorControl：
 
 ## Example
 
-- **UIFlow**
+### UIFlow
 
 <img src="assets\img\product_pics\hat\roverc_hat\roverC.png" width="40%" height="30%">
 
 ### Arduino IDE
 
-*Use with JoyC HAT, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/RoverC).*
+Use with JoyC HAT, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/RoverC).*
 
 *Use alone [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Application/RoverC_Arduino_Alone
-).*
-
-## Video
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/RoverC.mp4" type="video/mp4">
-</video>
+)
 
 <script>
 
diff --git a/docs/en/hat/hat-rs485.md b/docs/en/hat/hat-rs485.md
index 1ef47225..9c407ac0 100644
--- a/docs/en/hat/hat-rs485.md
+++ b/docs/en/hat/hat-rs485.md
@@ -1,9 +1,8 @@
-# RS485 HAT {docsify-ignore-all}
+# RS485 HAT
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U067</div>
 
-<img src="assets\img\product_pics\hat\rs485_hat\rs485_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\rs485_hat\rs485_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\rs485_hat\rs485_hat_03.jpg" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets\img\product_pics\hat\rs485_hat\rs485_hat_01.jpg"><img src="assets\img\product_pics\hat\rs485_hat\rs485_hat_02.jpg"></div>
 
 ## Description
 
@@ -31,17 +30,11 @@ It is used to convert the TTL standard to the RS485 standard. If the outside ser
 - 1x RS485 HAT
 - 1x 4 Pin 3.96 Pitch Terminal
 
-## Weight and Size
-
-- Package size:40mm x 42mm x 30mm
-- Package weight:17g
-
 ## Applications
 
 - RS485 multipoint systems
 - Serial communication in industrial field.
 
-
 ## Links
 
 -  **Datasheet** - [SP485EEN](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/hat/SP485EEN_en.pdf)
@@ -67,33 +60,7 @@ It is used to convert the TTL standard to the RS485 standard. If the outside ser
 
 ### Arduino IDE
 
-*To get complete code, please click [here](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/RS485).*
-
-```arduino
-#include <M5StickC.h>
-
-/* This demo is for RS485 Hat uart write and read ,
-AutoSend Hello M5! AutoReceive and diaplay on screen */
-
-void setup() {
-
-  M5.begin(true,true,true);
-  Serial.begin(115200);
-  // Serial2.begin(unsigned long baud, uint32_t config, int8_t rxPin, int8_t txPin, bool invert)
-  Serial2.begin(115200, SERIAL_8N1, 26, 0);
-
-  Serial.println("RS485");
-
-}
-void loop() {
-  Serial2.print("Hello M5!");
-
- if(Serial2.available()) {
-    char ch = Serial2.read();
-    M5.Lcd.setTextSize(2);
- }
-}
-```
+To get complete code, please click [here](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/RS485)
 
 ### Pin Map
 
@@ -102,14 +69,6 @@ void loop() {
  <tr><td>HAT ADC</td><td>TX</td><td>RX</td><td>5V</td><td>GND</td></tr>
 </table>
 
-
-## Video
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/RS485_HAT.mp4" type="video/mp4" >
-</video>
-
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/m5stickc-rs485-hat-aoz1282ci';
diff --git a/docs/en/hat/hat-servo.md b/docs/en/hat/hat-servo.md
index 35048100..5c16571f 100644
--- a/docs/en/hat/hat-servo.md
+++ b/docs/en/hat/hat-servo.md
@@ -1,15 +1,13 @@
-# SERVO HAT {docsify-ignore-all}
+# SERVO HAT
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U075</div>
 
-<img src="assets\img\product_pics\hat\servo_hat\servo_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\servo_hat\servo_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\servo_hat\servo_hat_03.jpg" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets\img\product_pics\hat\servo_hat\servo_hat_01.jpg"><img src="assets\img\product_pics\hat\servo_hat\servo_hat_02.jpg"></div>
 
 ## Description
 
 **SERVO HAT** as the name suggests, is a servo motor module with the new and upgraded "ES9251II" digital servo，This comes with 145°±10° range of motion and can be controlled by PWM signals. The signal pin of the hat is connected to G26 on M5StickC.
 
-
 ## Product Features
 - Servo Type: &emsp;      Digital
 - Spinning speed:&emsp;   0.09sec/60°
@@ -17,14 +15,9 @@
 - Weight: &emsp;          2.5g
 - Torque: &emsp;          0.25Kgf.cm(at 4.8v)
 - Voltage: &emsp;         5.0V±0.2V
-
-
-## Weight and Size
-
 - Size：24mm * 29mm * 23mm
 - weight：9g
 
-
 ## Included
 
 - 1x Servo HAT
@@ -35,8 +28,6 @@
 - Angle and direction control
 - Door lock controller
 
-
-
 ## Schematic
 
 <img src="assets/img/product_pics/hat/servo_hat/servo_hat_04.jpg" width="50%" height="50%">
@@ -61,17 +52,6 @@
 
 To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/servo-hat/Arduino/SERVO)
 
-
-
-
-## Video
-**Demo** 
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/SERVO-HAT.mp4" type="video/mp4" >
-</video>
-
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/m5stickc-servo-hat';
diff --git a/docs/en/hat/hat-spk.md b/docs/en/hat/hat-spk.md
index 14674e00..40596560 100644
--- a/docs/en/hat/hat-spk.md
+++ b/docs/en/hat/hat-spk.md
@@ -1,9 +1,8 @@
-# SPK HAT {docsify-ignore-all}
+# SPK HAT
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U055</div>
 
-<img src="assets\img\product_pics\hat\spk_hat\spk_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\spk_hat\spk_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\spk_hat\spk_hat_03.jpg" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets\img\product_pics\hat\spk_hat\spk_hat_01.jpg"><img src="assets\img\product_pics\hat\spk_hat\spk_hat_02.jpg"></div>
 
 ## Description
 
@@ -21,28 +20,20 @@
 
 - 1x SPK Hat
 
-## Weight and Size
-
-- Package size:40mm x 42mm x 30mm
-- Package weight:13g
-
 ## Applications
 
 - MP4/MP3
 
-
 ## Schematic
 
 - **[Schematic](https://github.com/m5stack/M5-Schematic/blob/master/Hat/StickHat_SPK.pdf)**
 
-
 <img src="assets\img\product_pics\hat\spk_hat\spk_hat_04.jpg" width="50%" height="50%">
 
 ## Links
 
 - **[PAM8303 Datasheet](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/hat/PAM8303_en.pdf)**
 
-
 ## EasyLoader
 
 >EasyLoader is a concise and fast program writer, which has a built-in case program related to the product. It can be burned to the main control by simple steps to perform a series of function verification. Please install the corresponding driver according to the device type. M5Core host [Please click here to view the CP210X driver installation tutorial](en/arduino/arduino_development), M5StickC/V/T/ATOM series can be used without driver)
@@ -72,12 +63,14 @@
 ## Example
 
 - **UIFlow**
+
 Open http://flow.m5stack.com and Load Demo
 
 <img src="assets\img\product_pics\hat\spk_hat\spk.png" >
 
-- **[Arduino](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/SPEAKER)**
+- **Arduino**
 
+[Click here to download Arduino code](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/SPEAKER)
 
 ### Pin Map
 
diff --git a/docs/en/hat/hat-thermal.md b/docs/en/hat/hat-thermal.md
index 47c01f15..1b6c66a2 100644
--- a/docs/en/hat/hat-thermal.md
+++ b/docs/en/hat/hat-thermal.md
@@ -1,8 +1,8 @@
-# THERMAL HAT {docsify-ignore-all}
+# THERMAL HAT
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U062</div>
 
-<img src="assets\img\product_pics\hat\thermal_hat\hat_thermal_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\thermal_hat\hat_thermal_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\thermal_hat\hat_thermal_03.jpg" width="30%" height="30%">
+<div class="product_pic"><img src="assets\img\product_pics\hat\thermal_hat\hat_thermal_01.jpg"><img src="assets\img\product_pics\hat\thermal_hat\hat_thermal_02.jpg"></div>
 
 
 ## Description
@@ -15,7 +15,6 @@ The I2C address is **0x33**. (GOIO 0/26)
 
 <img src="assets\img\product_pics\hat\thermal_hat\hat_thermal_04.jpg" width="50%" height="50%"> <br><br><br>
 
-
 ## Product Features
 
 - Operating Voltage: 3V ~ 3.6V
@@ -45,12 +44,10 @@ The I2C address is **0x33**. (GOIO 0/26)
 
 <img src="assets\img\product_pics\hat\thermal_hat\hat_thermal_05.jpg" width="60%" height="60%">
 
-
 ## Links
 
 - **[MLX90640 Datasheet](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/hat/MLX90640-Datasheet-Melexis_en.pdf)**
 
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_M5StickC_logo.png" width="100px" style="margin-top:20px">
@@ -61,16 +58,17 @@ The I2C address is **0x33**. (GOIO 0/26)
 
 >2. After downloading the software, double-click to run the application, connect the M5 device to the computer through the data cable, select the port parameters, click **"Burn"** to start burning. (**For M5StickC burning, please Set the baud rate to 750000 or 115200**)
 
-
 ## Example
 
 - **UIFlow**
 
-*If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/MLX90640/UIFlow).*
+If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/MLX90640/UIFlow)
 
 <img src="assets/img/product_pics/hat/thermal_hat/thermal.png">
 
-- **[Arduino](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/MLX90640)**
+- **Arduino**
+
+[Click here to download Arduino code](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/MLX90640)
 
 ### Pin Map
 
@@ -79,13 +77,6 @@ The I2C address is **0x33**. (GOIO 0/26)
  <tr><td>HAT THERMAL</td><td>SDA</td><td>SCL</td><td>5V</td><td>GND</td></tr>
 </table>
 
-
-## Video
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/THERMAL-HAT.mp4" type="video/mp4">
-</video>
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/m5stickc-thermal-camera-hatmlx90640';
diff --git a/docs/en/hat/hat-tof.md b/docs/en/hat/hat-tof.md
index b3340bd3..324aa64f 100644
--- a/docs/en/hat/hat-tof.md
+++ b/docs/en/hat/hat-tof.md
@@ -1,9 +1,8 @@
-# ToF HAT {docsify-ignore-all}
+# ToF HAT
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U072</div>
 
-<img src="assets\img\product_pics\hat\tof_hat\tof_hat_01.jpg" width="30%"><img src="assets\img\product_pics\hat\tof_hat\tof_hat_02.jpg" width="30%"><img src="assets\img\product_pics\hat\tof_hat\tof_hat_03.jpg" width="30%">
-
+<div class="product_pic"><img src="assets\img\product_pics\hat\tof_hat\tof_hat_01.jpg"><img src="assets\img\product_pics\hat\tof_hat\tof_hat_02.jpg"></div>
 
 ## Description
 
@@ -12,8 +11,6 @@ The VL53L0X is a new generation Time-of-Flight (ToF) laser-ranging module housed
 
 Communication Info: I2C, **0x29**, GPIO0/26.
 
-<img src="assets\img\product_pics\hat\tof_hat\tof_hat_04.jpg" width="30%">
-
 ## Product Features
 
 - High precision
@@ -23,9 +20,6 @@ Communication Info: I2C, **0x29**, GPIO0/26.
 - Security:
      - Class 1 laser equipment meeting the latest standards
      - Standard IEC 60825-1: 2014 - 3rd edition
-
-## Weight & Dimension
-
 - Dimension：24mm x 20.3mm x 13.8mm
 - Weight：3g
 
@@ -33,8 +27,6 @@ Communication Info: I2C, **0x29**, GPIO0/26.
 
 - 1x ToF HAT
 
-<img src="assets\img\product_pics\hat\tof_hat\tof_hat_06.jpg" width="30%">
-
 ## Applications
 
 - Obstacle recognition
@@ -78,12 +70,6 @@ To get complete code, please click [here](https://github.com/m5stack/M5-ProductE
  <tr><td>ToF HAT</td><td>SDA</td><td>SCL</td><td>3.3V</td><td>GND</td></tr>
 </table>
 
-## Video
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/ToF_HAT.mp4" type="video/mp4">
-</video>
-
 <script>
 
    var purchase_link = 'https://m5stack.com/products/m5stickc-tof-hatvl53l0x';
diff --git a/docs/en/hat/hat-yun.md b/docs/en/hat/hat-yun.md
index 6fb6dd68..41002c4b 100644
--- a/docs/en/hat/hat-yun.md
+++ b/docs/en/hat/hat-yun.md
@@ -1,10 +1,8 @@
-# YUN HAT {docsify-ignore-all}
+# YUN HAT
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U070</div>
 
-<img src="assets\img\product_pics\hat\yun_hat\yun_hat_01.jpg" width="30%" height="30%">
-<img src="assets\img\product_pics\hat\yun_hat\yun_hat_02.jpg" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets\img\product_pics\hat\yun_hat\yun_hat_01.jpg"><img src="assets\img\product_pics\hat\yun_hat\yun_hat_02.jpg"></div>
 
 ## Description
 
@@ -20,8 +18,6 @@ The middle layer is a light-guided acrylic component. To achieve a better light
 <br>
 One hook hole and two 6*4mm magnet mounting positions are reserved on the board, so users can easily magnet or hang in any corner of space.
 
-<br>
-
 ## Product Features
 
 - Compatible with M5StickC
@@ -41,11 +37,6 @@ One hook hole and two 6*4mm magnet mounting positions are reserved on the board,
 - 1x YUN HAT
 - 2x Dupont
 
-## Weight and Size
-
-- Package size:40mm x 42mm x 40mm
-- Package weight:15g
-
 <img src="assets\img\product_pics\hat\yun_hat\yun_hat_04.jpg" width="30%" height="30%">
 
 ## Applications
@@ -65,7 +56,6 @@ One hook hole and two 6*4mm magnet mounting positions are reserved on the board,
     - [SHT20](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/hat/SHT20_Datasheet_en.pdf)
     - [BMP280](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/hat/BMP280-DS001-11_en.pdf)
 
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_M5StickC_logo.png" width="100px" style="margin-top:20px">
@@ -76,7 +66,6 @@ One hook hole and two 6*4mm magnet mounting positions are reserved on the board,
 
 >2. After downloading the software, double-click to run the application, connect the M5 device to the computer through the data cable, select the port parameters, click **"Burn"** to start burning. (**For M5StickC burning, please Set the baud rate to 750000 or 115200**)
 
-
 ## Example
 
 - **UIFlow**
@@ -96,14 +85,6 @@ To get complete code, please click [here](https://github.com/m5stack/M5-ProductE
  <tr><td>YUN HAT</td><td>GND</td><td>+5V</td><td>SCL</td><td>SDA</td><td>/</td><td>BAT</td><td>+3.3V</td><td>+5V IN</td></tr>
 </table>
 
-## Video
-**Demo** 
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/YUN-HAT.mp4" type="video/mp4" >
-</video>
-
-
 <script>
 
    var purchase_link = 'https://m5stack.com/products/m5stickc-yun-hatsh20-bmp280-sk6812';
diff --git a/docs/en/module/battery.md b/docs/en/module/battery.md
index 3fd0a564..46455bcb 100644
--- a/docs/en/module/battery.md
+++ b/docs/en/module/battery.md
@@ -1,9 +1,8 @@
-# Module BATTERY  {docsify-ignore-all}
+# Module BATTERY
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:M002</div>
 
-<img src="assets/img/product_pics/module/battery/module_battery_01.webp" width="30%" height="30%"><img src="assets/img/product_pics/module/battery/module_battery_02.webp" width="30%" height="30%"> 
-
+<div class="product_pic"><img src="assets/img/product_pics/module/battery/module_battery_01.webp"><img src="assets/img/product_pics/module/battery/module_battery_02.webp"></div>
 
 ## Description
 
@@ -27,12 +26,6 @@ Once the BATTERY is stacked underneath the M5 controller, the battery positive p
 
 -  1x M5Stack BATTERY Module
 
-## Related Link
-
-- **[Offical Video](https://www.youtube.com/channel/UCozgFVglWYQXbvTmGyS739w)**
-
-- **[Forum](http://forum.m5stack.com/)**
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-module/products/battery-module';
diff --git a/docs/en/module/bus.md b/docs/en/module/bus.md
index c0bda53e..24a04bba 100644
--- a/docs/en/module/bus.md
+++ b/docs/en/module/bus.md
@@ -1,9 +1,8 @@
-# Module BUS {docsify-ignore-all}
+# Module BUS
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:M024</div>
 
-<img src="assets/img/product_pics/module/module_bus_01.png" width="30%" height="30%"> <img src="assets/img/product_pics/module/module_bus_02.png" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets/img/product_pics/module/module_bus_01.png"> <img src="assets/img/product_pics/module/module_bus_02.png"></div>
 
 ## Description
 
@@ -11,28 +10,20 @@
 
 Just like other M5modules, BUS is able to connected with other layer through M-BUS, while in this module, we've extended the M_BUS pin to pin to the other side of the board. You might need to cut off the fence on the side to be able to dupont out the pins. we've include a 2*15 90 degree pin set in the package.
 
-<img src="assets/img/product_pics/module/module_bus_03.png" width="60%" height="60%">
-
-<img src="assets/img/product_pics/module/module_bus_04.png"><img src="assets/img/product_pics/module/module_bus_05.png">
+<img src="assets/img/product_pics/module/module_bus_04.png" width = "30%"><img src="assets/img/product_pics/module/module_bus_05.png"  width = "30%">
 
 ## Product Features
 
-
 - Hole Size: 0.039" 1mm (CNC Drilled)
 - Hole Pitch: 0.1 in - (2.54 mm)
 - Entire Hole Quantity: 200 Holes
 - Product Size：54.2mm x 54.2mm x 12.8mm
 - Product weight：12.5g
+
 ## Include
 
 -  1x BUS Module
 
-## Related Link
-
-- **[Offical Video](https://www.youtube.com/channel/UCozgFVglWYQXbvTmGyS739w)**
-
-- **[Forum](http://forum.m5stack.com/)**
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-module/products/bus-module';
diff --git a/docs/en/module/commu.md b/docs/en/module/commu.md
index 5a09f077..85099cc9 100644
--- a/docs/en/module/commu.md
+++ b/docs/en/module/commu.md
@@ -1,9 +1,8 @@
-# Module COMMU {docsify-ignore-all}
+# Module COMMU
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:M011</div>
 
-<img src="assets/img/product_pics/module/module_commu_01.png" width="30%" height="30%"> <img src="assets/img/product_pics/module/module_commu_02.png" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets/img/product_pics/module/module_commu_01.png"><img src="assets/img/product_pics/module/module_commu_02.png"></div>
 
 ## Description
 
@@ -52,7 +51,6 @@ Be care about TTL Interface. It is a UART Interface actually by default. But you
     - [SP3485](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/module/SP3485_en.pdf)
     - [MCP2515](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/module/MCP2515_en.pdf)
 
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -77,58 +75,7 @@ These are two COMMU examples for CAN communication, tansmitter and receiver. Pre
 **Step 2**: Open project file `commu_can_transmitter.ino`, and `commu_can_receiver.ino`
 **Step 3**: Compile and upload the two project to two M5Cores separatly.
 
-*The below code is incomplete(just for usage). If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/COMMU/Arduino/CAN).*
-
-```arduino
-/*
-    commu_can_transmitter.ino
-*/
-#include <M5Stack.h>
-#include <mcp_can.h>
-#include "m5_logo.h"
-
-#define CAN0_INT 15 // Set INT to pin 2
-MCP_CAN CAN0(12);   // Set CS to pin 10
-
-// declaration
-byte data[8] = {0x00, 0x01, 0x02, 0x03, 0x04, 0x05, 0x06, 0x07};
-
-// initialization
-M5.begin();
-CAN0.begin(MCP_ANY, CAN_1000KBPS, MCP_8MHZ);
-/* Change to normal mode to allow messages tobe transmitted */
-CAN0.setMode(MCP_NORMAL);
-
-// send data
-CAN0.sendMsgBuf(0x100, 0, 8, data);
-```
-
-```arduino
-/*
-    commu_can_receiver.ino
-*/
-#include <M5Stack.h>
-#include <mcp_can.h>
-#include "m5_logo.h"
-
-#define CAN0_INT 15 // Set INT to pin 2
-MCP_CAN CAN0(12);   // Set CS to pin 10
-
-// declaration
-byte data[8] = {0x00, 0x01, 0x02, 0x03, 0x04, 0x05, 0x06, 0x07};
-
-// initialization
-M5.begin();
-/* Initialize MCP2515 running at 16MHz with a baudrate of 500kb/s */
-/* and the masks and filters disabled. */
-CAN0.begin(MCP_ANY, CAN_1000KBPS, MCP_8MHZ);
-/* Set operation mode to normal so theMCP2515 sends acks to received data. */
-CAN0.setMode(MCP_NORMAL);
-pinMode(CAN0_INT, INPUT);// Configuring pin for /INT input
-
-// read data
-CAN0.readMsgBuf(&rxId, &len, rxBuf);
-```
+The below code is incomplete(just for usage). If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/COMMU/Arduino/CAN)
 
 <img src="assets/img/product_pics/module/module_example/COMMU/example_module_commu_01.png" width="50%" height="50%">
 
@@ -144,7 +91,6 @@ Burn [example](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Mod
 
 <img src="assets/img/product_pics/module/commu_sch.png">
 
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-module/products/commu-module';
diff --git a/docs/en/module/encoder.md b/docs/en/module/encoder.md
index dda55e4e..e26dc6b7 100644
--- a/docs/en/module/encoder.md
+++ b/docs/en/module/encoder.md
@@ -1,9 +1,8 @@
-# Module ENCODER {docsify-ignore-all}
+# Module ENCODER
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:A006</div>
 
-<img src="assets/img/product_pics/module/module_encoder_01.png" width="30%" height="30%"><img src="assets/img/product_pics/module/module_encoder_02.png" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets/img/product_pics/module/module_encoder_01.png"><img src="assets/img/product_pics/module/module_encoder_02.png"></div>
 
 ## Description
 
@@ -49,7 +48,6 @@ The series communication protocol between M5 core and ENCODER is IIC (adress: 0x
     </div>
 </div>
 
-
 ## Function
 
 **Control single RGB**
@@ -113,42 +111,8 @@ void get_encoder_increment(void){
 
 ### Arduino IDE
 
-*If you want the complete code `faces_encoder.ino`, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/ENCODER/Arduino/faces_encoder).*
+If you want the complete code `faces_encoder.ino`, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/ENCODER/Arduino/faces_encoder)
 
-```arduino
-/*
-* faces_encoder.ino
-*/
-#include <M5Stack.h>
-
-#define Faces_Encoder_I2C_ADDR     0X5E
-
-// declaration
-int encoder_increment;//positive: clockwise nagtive: anti-clockwise
-uint16_t encoder_value=0;
-int button_state;
-uint8_t direction;//0: clockwise 1: anti-clockwise
-int temp_encoder_increment;
-
-// initialization
-M5.begin();
-Wire.begin();
-
-// get data from ENCONDER
-Wire.requestFrom(Faces_Encoder_I2C_ADDR, 3);
-if(Wire.available()){
-    temp_encoder_increment = Wire.read();// the first byte: increment
-    button_state = Wire.read();// the second byte: button value
-}
-
-// IIC send data, 4bytes
-Wire.beginTransmission(Faces_Encoder_I2C_ADDR);
-Wire.write(led_index);
-Wire.write(r);
-Wire.write(g);
-Wire.write(b);
-Wire.endTransmission();
-```
 
 <img src="assets/img/product_pics/module/module_example/ENCODER/example_faces_encoder_01.png" width="55%" height="55%">
 
@@ -156,7 +120,6 @@ Wire.endTransmission();
 
 <img src="assets/img/product_pics/module/module_example/ENCODER/encoder.png" >
 
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-module/products/encoder-module';
diff --git a/docs/en/module/faces.md b/docs/en/module/faces.md
index e944fe00..61f350be 100644
--- a/docs/en/module/faces.md
+++ b/docs/en/module/faces.md
@@ -1,18 +1,15 @@
-# FACES BOTTOM{docsify-ignore-all}
+# FACES BOTTOM
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:A009</div>
 
-<img src="assets/img/product_pics/module/faces_bottom/face_01.webp" width="30%" height="30%" ><img src="assets/img/product_pics/module/faces_bottom/face_02.jpg" width="30%" height="30%" ><img src="assets/img/product_pics/module/faces_bottom/face_03.jpg" width="30%" height="30%" >
-
+<div class="product_pic"><img src="assets/img/product_pics/module/faces_bottom/face_01.webp"><img src="assets/img/product_pics/module/faces_bottom/face_02.jpg"></div>
 
 ## Description
 
 **FACES BOTTOM** It is a multi-function panel base compatible with M5Core. The side directly leads to the M-BUS pin header, which is convenient for connecting various peripherals. It is compatible with all function panels in the FACES Kit. You can flexibly change the panel according to the project requirements. The base is connected to the host through the M-BUS bus and communicates using the I2C protocol. The base has a built-in 600mAh rechargeable lithium battery and is equipped with a power management chip for easy use as a handheld device. The bottom of the back of the base is equipped with Pogo Pin contacts, which can be charged through the charging base. The M3 screw holes and hanging holes on the top can be easily fixed.
 
-
 <img src="assets/img/product_pics/module/faces_bottom/different.jpg" width="30%" height="30%" >
 
-
 ## Product Features
 
 - 2.54mm pitch pin output on both sides
@@ -26,14 +23,6 @@
 
 - 1x FACES BOTTOM
 
-
-## Video
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/Module/FACES%20BOTTOM.mp4" type="video/mp4">
-</video>
-
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/all/products/m5-faces-bottom-board';
diff --git a/docs/en/module/facesII.md b/docs/en/module/facesII.md
index d437f2fd..12c42c41 100644
--- a/docs/en/module/facesII.md
+++ b/docs/en/module/facesII.md
@@ -1,10 +1,8 @@
-# FACES II BOTTOM{docsify-ignore-all}
+# FACES II BOTTOM
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:A075</div>
 
-<img src="assets/img/product_pics/module/facesII_bottom/faceii_01.webp" width="30%" height="30%" ><img src="assets/img/product_pics/module/facesII_bottom/faceii_02.jpg" width="30%" height="30%" ><img src="assets/img/product_pics/module/facesII_bottom/faceii_03.jpg" width="30%" height="30%" >
-
-
+<div class="product_pic"><img src="assets/img/product_pics/module/facesII_bottom/faceii_01.webp"><img src="assets/img/product_pics/module/facesII_bottom/faceii_02.jpg"></div>
 
 ## Description
 
@@ -12,7 +10,6 @@
 
 <img src="assets/img/product_pics/module/facesII_bottom/different.jpg" width="30%" height="30%" >
 
-
 ## Product Features
 
 - Colorful RGB LED light bars（GPIO 15)
@@ -34,15 +31,7 @@
 
 ### Arduino IDE
 
-*To the complete code , click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/FACESII_NeoPixelTest)*
-
-## Video
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/Module/FACES%20II%20BOTTOM.mp4" type="video/mp4">
-</video>
-
-
+To the complete code , click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/FACESII_NeoPixelTest)
 
 <script>
 
diff --git a/docs/en/module/faces_finger.md b/docs/en/module/faces_finger.md
index 0c90bffe..12db939d 100644
--- a/docs/en/module/faces_finger.md
+++ b/docs/en/module/faces_finger.md
@@ -1,9 +1,8 @@
-# Module FACES FINGER {docsify-ignore-all}
+# Module FACES FINGER
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:A066</div>
 
-<img src="assets/img/product_pics/module/faces_finger/faces_finger_01.jpg" width="30%" height="30%"> <img src="assets/img/product_pics/module/faces_finger/faces_finger_02.jpg" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets/img/product_pics/module/faces_finger/faces_finger_01.jpg"><img src="assets/img/product_pics/module/faces_finger/faces_finger_02.jpg"></div>
 
 ## Description
 
@@ -12,9 +11,6 @@
 It can identify fingerprint information entrance, fingerprint deletion, fingerprint search, feature extraction for multiple people and so on. The unit also can be set fingerprint recognition comparison level and different security level. With FACES panel, you can have an upgrade level of Fingerprint management machine with a more complete and enclosed pattern.
 
 Communication Protocol: UART.
-<br><br><br>
-<img src="assets/img/product_pics/module/faces_finger/faces_finger_03.jpg" width="30%" height="30%">
-
 
 ## Product Features
 
@@ -34,7 +30,6 @@ Communication Protocol: UART.
 
 -  1x FACES-FINGER Panel
 
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -59,7 +54,6 @@ Communication Protocol: UART.
  <tr><td>FINGER Unit</td><td>TXD</td><td>RXD</td><td>5V</td><td>GND</td></tr>
 </table>
 
-
 ## Document
 
 - Protocol **[FINGER series communication protocol](https://github.com/m5stack/M5-Schematic/blob/master/Units/finger/biovo_fingerprint_Protocol_en.DOC)**
@@ -70,11 +64,11 @@ Communication Protocol: UART.
 
 ### Arduino IDE
 
-*If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/FACES_FINGER)*
+If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/FACES_FINGER)
 
 ### 2. UIFlow
 
-*If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/FACES_FINGER/UIFlow).*
+If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/FACES_FINGER/UIFlow)
 
 <img src="assets/img/product_pics/module/faces_finger/finger.png">
 
@@ -82,14 +76,6 @@ Communication Protocol: UART.
 - Time card punching machine
 - Security
 
-## Video
-
-**Demo**
-<video width="500" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/FACES-Finger.mp4" type="video/mp4">
-</video>
-
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-module/products/finger-print-fpc-1020a-panel-for-m5-faces';
diff --git a/docs/en/module/faces_rfid.md b/docs/en/module/faces_rfid.md
index 8f4d84b1..7e56db55 100644
--- a/docs/en/module/faces_rfid.md
+++ b/docs/en/module/faces_rfid.md
@@ -1,9 +1,8 @@
-# Module FACES RFID {docsify-ignore-all}
+# Module FACES RFID
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:A067</div>
 
-<img src="assets/img/product_pics/module/faces_rfid/faces_rfid_01.jpg" width="30%" height="30%"> <img src="assets/img/product_pics/module/faces_rfid/faces_rfid_02.jpg" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets/img/product_pics/module/faces_rfid/faces_rfid_01.jpg"><img src="assets/img/product_pics/module/faces_rfid/faces_rfid_02.jpg"></div>
 
 ## Description
 
@@ -11,7 +10,6 @@
 <br>
 This unit can realize the function of the card reading and writing device, to identify and record multiple card information, to encode and authority an RF card. With FACES panel, you can have an upgrade level of RFID device with a more complete and enclosed pattern.
 
-
 <img src="assets/img/product_pics/module/faces_rfid/faces_rfid_03.jpg" width="30%" height="30%">
 
 Communication Protocol: I2C.
@@ -61,7 +59,6 @@ Communication Protocol: I2C.
  <tr><td>FACES RFID</td><td>SCL</td><td>SDA</td><td>5V</td><td>GND</td></tr>
 </table>
 
-
 ## Document
 
 - Datasheet **[MFRC522](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/module/MFRC522_en.pdf)**
@@ -70,11 +67,11 @@ Communication Protocol: I2C.
 
 ### Arduino IDE
 
-*If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/FACES_RFID)*
+If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/FACES_RFID)
 
 ### UIFlow
 
-*If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/FACES_RFID/UIFlow)*
+If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/FACES_RFID/UIFlow)
 
 <img src="assets/img/product_pics/module/faces_rfid/faces_rfid.jpg" width="50%" height="50%">
 
@@ -82,12 +79,6 @@ Communication Protocol: I2C.
 - Reader­-Tag
 - Security
 
-## Video
-
-<video width="500" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/FACES-RFID.mp4" type="video/mp4">
-</video>
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-module/products/rfid-rc522-panel-for-m5-faces';
diff --git a/docs/en/module/fan.md b/docs/en/module/fan.md
index 2dc3611e..42302584 100644
--- a/docs/en/module/fan.md
+++ b/docs/en/module/fan.md
@@ -1,9 +1,8 @@
-# Module FAN {docsify-ignore-all}
+# Module FAN
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:M013</div>
 
-<img src="assets/img/product_pics/module/module_FAN.png" width="30%" height="30%"> 
-
+<div class="product_pic"><img src="assets/img/product_pics/module/module_FAN.png"></div>
 
 ## Description
 
@@ -25,13 +24,6 @@
 
 -  1x M5Stack FAN Module
 
-## Related Link
-
-- **[Offical Video](https://www.youtube.com/channel/UCozgFVglWYQXbvTmGyS739w)**
-
-- **[Forum](http://forum.m5stack.com/)**
-
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-module/products/step-motor-module-adapter-fan-module';
diff --git a/docs/en/module/goplus.md b/docs/en/module/goplus.md
index f2535b4d..90c1e4be 100644
--- a/docs/en/module/goplus.md
+++ b/docs/en/module/goplus.md
@@ -1,9 +1,8 @@
-# Module GoPlus {docsify-ignore-all}
+# Module GoPlus
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:M025</div>
 
-<img src="assets/img/product_pics/module/goplus/goplus_p1.jpg" width="30%" height="30%"> <img src="assets/img/product_pics/module/goplus/goplus_p2.jpg" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets/img/product_pics/module/goplus/goplus_p1.jpg"><img src="assets/img/product_pics/module/goplus/goplus_p2.jpg"></div>
 
 ## Description
 
@@ -13,7 +12,6 @@ comes with 2x DC motor channel, 4x Servo motor channel, IR transmitter, IR recei
 
 <img src="assets/img/product_pics/module/goplus/goplus_p3.jpg" width="30%" height="30%"><img src="assets/img/product_pics/module/goplus/goplus_p4.jpg" width="30%" height="30%">
 
-
 Communication Protocol: IIC (0x61).
 
 ## Product Features
@@ -42,7 +40,6 @@ Communication Protocol: IIC (0x61).
 
 !>3.The CP210X (USB driver) needs to be installed before the EasyLoader is burned. [Click here to view the driver installation tutorial](en/related_documents/M5Burner#install-usb-driver)
 
-
 ## PinMap
 
 **Mega328 ISP**Download interface Pin foot definition
@@ -59,21 +56,20 @@ Communication Protocol: IIC (0x61).
 
 - Datasheet - **[LV8548MC](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/module/LV8548MC-D.PDF)**
 
-
-
 ## Example
 
 - Driver firmware - **[GoPlus](https://github.com/m5stack/GoPlus/tree/master/src)**
 
-- Test Code - **[GoPlus](https://github.com/m5stack/GoPlus/tree/master/test)**
+### Arduino
+
+- Arduino Code - **[GoPlus](https://github.com/m5stack/GoPlus/tree/master/test)**
 
 ### UIFLOW
 
+- [click here to get UIFlow example](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/GOPLUS/UIFLOW)
+
 <img src="assets/img/product_pics/module/goplus/goplus_p5.jpg">
 
-- [click here to get UIFlow](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/GOPLUS/UIFLOW). 
-
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-module/products/goplus-module';
diff --git a/docs/en/module/gps.md b/docs/en/module/gps.md
index 49781e0a..adbec665 100644
--- a/docs/en/module/gps.md
+++ b/docs/en/module/gps.md
@@ -1,9 +1,8 @@
-# Module GPS {docsify-ignore-all}
+# Module GPS
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:M003</div>
 
-<img src="assets/img/product_pics/module/module_gps_01.png" width="30%" height="30%"> <img src="assets/img/product_pics/module/module_gps_02.png" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets/img/product_pics/module/module_gps_01.png"><img src="assets/img/product_pics/module/module_gps_02.png"></div>
 
 ## Description
 
@@ -11,8 +10,6 @@
 
 The NEO-M8 series provides high sensitivity and minimal acquisition times while maintaining low system power.
 
-<img src="assets/img/product_pics/module/module_gps_07.png" width="70%" height="70%">
-
 The NEO-M8N  integrates a 72-channel [u-blox](https://www.u-blox.com) M8 GNSS engine that supports multiple GNSS systems ( Beidou, Galileo, GLONASS, GPS / QZSS ) and able to receive 3 GNSS systems simultaneously.
 
 The series communicate protocol between M5Core and GPS is UART, physically connected via **UART2 (GPIO16, GPIO17)**
@@ -54,12 +51,12 @@ If you want to Change the uart baudrate,please check here ( [u-center-just-for-W
 
 ## Related Link
 
+-  **[NEO-M8N](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/module/NEO-M8-FW3_DataSheet_en.pdf)**
+
 -  **[GPS Info](https://www.u-blox.com/zh/product/neo-m8-series)** (GPS)
 
 - **[TinyGPS++ library](http://arduiniana.org/libraries/tinygpsplus/)**
 
-- **datasheet** - [NEO-M8N](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/module/NEO-M8-FW3_DataSheet_en.pdf)
-
 - **[u-blox Protocol Manual](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/module/u-blox8-M8_ReceiverDescrProtSpec_en.pdf)**
 
 ## EasyLoader
@@ -74,42 +71,14 @@ If you want to Change the uart baudrate,please check here ( [u-center-just-for-W
 
 !>3.The CP210X (USB driver) needs to be installed before the EasyLoader is burned. [Click here to view the driver installation tutorial](en/related_documents/M5Burner#install-usb-driver)
 
-
 ## Example
 
 ### Arduino IDE
 
-*To the complete code `GPSRaw.ino`, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/GPS/Arduino).*
+To the complete code `GPSRaw.ino`, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/GPS/Arduino)
 
 **Note: The GPS module needs placed outdoors to be able to receive GPS signal**
 
-```arduino
-#include <M5Stack.h>
-
-/* By default, GPS is connected with M5Core through UART2 */
-HardwareSerial GPSRaw(2);
-
-void setup() {
-  M5.begin();
-  GPSRaw.begin(9600);// GPS init
-  Serial.println("hello");
-  termInit();
-}
-
-void loop() {
-  // put your main code here, to run repeatedly:
-  if(Serial.available()) {
-    int ch = Serial.read();
-    GPSRaw.write(ch);
-  }
-  if(GPSRaw.available()) {
-    int ch = GPSRaw.read();// read GPS information
-    Serial.write(ch);
-    termPutchar(ch);
-  }
-}
-```
-
 After burnt the example code `GPSRaw.ino`, m5core and PC serial terminal will display following information
 
 <img src="assets/img/product_pics/module/module_example/GPS/example_module_gps_01.png">
@@ -124,7 +93,6 @@ Please refer to the [u-blox 8 / u-blox M8 Receiver Description - Manual](https:/
 
 <img src="assets/img/product_pics/module/gps_sch.png">
 
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-module/products/gps-module';
diff --git a/docs/en/module/gsm.md b/docs/en/module/gsm.md
index 0758a8e3..a1c4f203 100644
--- a/docs/en/module/gsm.md
+++ b/docs/en/module/gsm.md
@@ -1,8 +1,8 @@
-# Module GSM {docsify-ignore-all}
+# Module GSM
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:M026</div>
 
-<img src="assets/img/product_pics/module/gsm/gsm_01.jpg" width="30%" height="30%">&nbsp;&nbsp;&nbsp; <img src="assets/img/product_pics/module/gsm/gsm_02.jpg" width="30%" height="30%"> 
+<div class="product_pic"><img src="assets/img/product_pics/module/gsm/gsm_01.jpg">&nbsp;&nbsp;&nbsp; <img src="assets/img/product_pics/module/gsm/gsm_02.jpg"> </div>
 
 ## Description
 
@@ -23,7 +23,7 @@ Power Operation:
 - Power Off: Button long-press for 8s
 - Reset module: GPIO26 HIGH
 
-<img src="assets/img/product_pics/module/gsm/gsm_03.jpg" width="50%" height="50%"> <img src="assets/img/product_pics/module/gsm/gsm_04.jpg" width="50%" height="50%"> <img src="assets/img/product_pics/module/gsm/NanoSIM.jpeg" width="50%" height="50%"> 
+<img src="assets/img/product_pics/module/gsm/gsm_03.jpg" width="30%" height="30%"> <img src="assets/img/product_pics/module/gsm/gsm_04.jpg" width="30%" height="30%"> <img src="assets/img/product_pics/module/gsm/NanoSIM.jpeg" width="30%" height="30%"> 
 <br><br><br>
 
 *The Global System for Mobile Communications (GSM) is a standard developed by the European Telecommunications Standards Institute (ETSI) to describe the protocols for second-generation (2G) digital cellular networks used by mobile devices such as mobile phones and tablets.*
@@ -64,17 +64,14 @@ Product Feature:
 
 ## Links
 
-
 -  **Datasheet** - [MC6315](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/module/M6315_cn.pdf)
 
 -  **Datasheet** - [MC6315 AT Command](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/module/M6315%20AT_Command_Interface_Specification_cn.pdf)
 
-
 ## Schematic
 
 - [GSM Module](https://github.com/m5stack/M5-Schematic/blob/master/Modules/module_gsm_sch.pdf)
 
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -92,52 +89,7 @@ Product Feature:
 
 ### 1. Arduino IDE
 
-*To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/GSM/Arduino).*
-
-```arduino
-#include <M5Stack.h>
-
-void IotWriteCommand(char cmd[],char date[]){
-  char buf[256] = {0};
-  if(cmd == NULL)
-  sprintf(buf,"AT\r\n");
-  else if(date == NULL)
-  sprintf(buf,"AT+%s\r\n",cmd);
-  else
-  sprintf(buf,"AT+%s=%s\r\n",cmd,date);
-  
-  Serial2.write(buf);
-}
-//AT+CSQ=?
-void get_time(void){
-  IotWriteCommand("CSQ=?",NULL);
-  while(Serial2.available()){
-    uint8_t ch = Serial2.read();
-    Serial.write(ch);
-    M5.Lcd.write(ch);
-  }
-}
-
-void setup() {
-  M5.begin();
-  Serial.begin(115200);
-  Serial2.begin(115200, SERIAL_8N1, 16, 17);
-  pinMode(2, OUTPUT);
-  digitalWrite(2, 0);
-  delay(3000);
-  digitalWrite(2, 1);
-}
-
-void loop() {
- if(M5.BtnA.wasReleased()){
-    M5.Lcd.fillScreen(TFT_BLACK); 
-    M5.Lcd.setCursor(60,80,2);
-    get_time();
-  }
-}
-
-
-```
+To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/GSM/Arduino)
 
 ### Pin Map
 
diff --git a/docs/en/module/joystick.md b/docs/en/module/joystick.md
index 47b7f0e5..2a04f9d8 100644
--- a/docs/en/module/joystick.md
+++ b/docs/en/module/joystick.md
@@ -1,8 +1,7 @@
-# Module JOYSTICK {docsify-ignore-all}
-
+# Module JOYSTICK
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:A007</div>
 
-<img src="assets/img/product_pics/module/module_joystick_01.png" width="30%" height="30%">
+<div class="product_pic"><img src="assets/img/product_pics/module/module_joystick_01.png"></div>
 
 ## Description
 
@@ -10,8 +9,6 @@
 
 JOYSTICK IIC address is 0x5E.
 
-<img src="assets/img/product_pics/module/module_joystick_03.png" width="60%" height="60%">
-
 ## Product Features
 
 -  12 RGB Led
@@ -90,49 +87,8 @@ void get_joystick_offset(void){
 
 ### Arduino IDE
 
-*To the complete code `faces_joystick.ino`, click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/JOYSTICK/Arduino/faces_joystick)。*
+To the complete code `faces_joystick.ino`, click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/JOYSTICK/Arduino/faces_joystick)
 
-```arduino
-/*
-* faces_joystick.ino
-*/
-#include <M5Stack.h>
-
-#define FACE_JOY_ADDR     0X5E
-
-// declaration
-uint8_t x_data_L;
-uint8_t x_data_H;
-uint8_t y_data_L;
-uint8_t y_data_H;
-uint8_t button_data;
-uint16_t x_data;
-uint16_t y_data;
-
-// initialization
-M5.begin();
-Wire.begin();
-
-// get data from ENCONDER
-Wire.requestFrom(FACE_JOY_ADDR, 5);
-if (Wire.available()) {
-  y_data_L = Wire.read();
-  y_data_H = Wire.read();
-  x_data_L = Wire.read();
-  x_data_H = Wire.read();
-  button_data = Wire.read();// Z(0: released 1: pressed)
-  x_data = x_data_H << 8 |x_data_L;
-  y_data = y_data_H << 8 |y_data_L;
-}
-
-// IIC send data, 4bytes
-Wire.beginTransmission(FACE_JOY_ADDR);
-Wire.write(indexOfLED);
-Wire.write(r);
-Wire.write(g);
-Wire.write(b);
-Wire.endTransmission();
-```
 ### UIFLOW
 
 <img src="assets/img/product_pics/base/JOYSTICK.png" >
diff --git a/docs/en/module/lego_plus.md b/docs/en/module/lego_plus.md
index e109d2eb..3ecd6b59 100644
--- a/docs/en/module/lego_plus.md
+++ b/docs/en/module/lego_plus.md
@@ -1,10 +1,8 @@
-# Module LEGO+ {docsify-ignore-all}
+# Module LEGO+
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:M021</div>
 
-<img src="assets/img/product_pics/module/module_lego_plus_01.png" width="30%" height="30%"><img src="assets/img/product_pics/module/module_lego_plus_02.png" width="60%" height="60%">
-
-
+<div class="product_pic"><img src="assets/img/product_pics/module/module_lego_plus_01.png"><img src="assets/img/product_pics/module/module_lego_plus_02.png"></div>
 
 ## Description
 
@@ -33,7 +31,6 @@ LEGO motor is one of the Technic pieces form LEGO. The purpose of LEGO Technic i
 
 - **[The Firmware of inside MEGA328](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/LEGO_PLUS/firmware_328p)**
 
-
 <!-- ### 1. Arduino IDE -->
 
 ## EasyLoader
@@ -48,23 +45,21 @@ LEGO motor is one of the Technic pieces form LEGO. The purpose of LEGO Technic i
 
 !>3.The CP210X (USB driver) needs to be installed before the EasyLoader is burned. [Click here to view the driver installation tutorial](en/related_documents/M5Burner#install-usb-driver)
 
-
 ## PinMap
 
 **Mega328 ISP**Download interface Pin foot definition
 
 <img src="assets\img\product_pics\app\mega328_isp.png" width="30%" height="30%">
 
-
 ## Example
 
 ### 1. Arduino
 
-*To get the complete Arduino code, please click [here](https://github.com/m5stack/M5Stack/tree/master/examples/Modules/LEGO_PLUS/LEGO_Test).*
+To get the complete Arduino code, please click [here](https://github.com/m5stack/M5Stack/tree/master/examples/Modules/LEGO_PLUS/LEGO_Test)
 
 ### 2. UIFlow
 
-*To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/LEGO_PLUS/UIFlow)。*
+To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/LEGO_PLUS/UIFlow)
 
 <img src="assets/img/product_pics/module/module_example/LEGO_PLUS/example_module_lego_plus_03_en.png">
 
@@ -72,23 +67,12 @@ LEGO motor is one of the Technic pieces form LEGO. The purpose of LEGO Technic i
 
 <img src="assets/img/product_pics/module/lego_plus_sch.png">
 
-### Arduino 328p frimware
-
-*To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/LEGO_PLUS/firmware_328p)*
-
 ## NOTE
 
 If you want to change the firmware inside **MEGA328 chip** which has implemented the motor driver code by default, you can overwrite through **ISP** port. Below shows the location of ISP port.
 
 <img src="assets/img/product_pics/module/module_lego_plus_03.png">
 
-## Video
-
-**LEGO+ - Build a tank**
-
-<video width="500" height="315" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/M5%20Tank.mp4" type="video/mp4">
-</video>
 
 <script>
 
diff --git a/docs/en/module/lora.md b/docs/en/module/lora.md
index 76154c33..3f919ca5 100644
--- a/docs/en/module/lora.md
+++ b/docs/en/module/lora.md
@@ -1,9 +1,8 @@
-# Module LoRa (433MHz) {docsify-ignore-all}
+# Module LoRa (433MHz)
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:M005</div>
 
-<img src="assets/img/product_pics/module/module_lora_01.jpg" width="30%" height="30%"> <img src="assets/img/product_pics/module/module_lora_02.jpg" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets/img/product_pics/module/module_lora_01.jpg"><img src="assets/img/product_pics/module/module_lora_02.jpg"></div>
 
 ## Description
 
@@ -44,7 +43,6 @@ LoRa (433MHz) and LoRaWAN permit long-range connectivity for Internet of Things
 
 - **[LoRaWAN Regional Parameters](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/module/lorawantm_regional_parameters_v1.1rb_-_final.pdf)**
 
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -61,7 +59,7 @@ LoRa (433MHz) and LoRaWAN permit long-range connectivity for Internet of Things
 
 ### Arduino IDE
 
-These are the point-to-point communication examples between two LORA modules. The LoRa nodes send and receive messages.
+These are the point-to-point communication [examples](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/LORA/Arduino) between two LORA modules. The LoRa nodes send and receive messages.
 
 * Blue string indicates sending succeed.
 
@@ -69,55 +67,6 @@ These are the point-to-point communication examples between two LORA modules. Th
 
 * Red string indicates initialization failed.
 
-*To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/LORA/Arduino)*
-
-```arduino
-#include <M5Stack.h>
-#include <M5LoRa.h>
-
-//declaration
-String outgoing;                     // outgoing message
-byte msgCount = 0;                   // count of outgoing messages
-byte localAddress = 0xBB;            // address of this device
-byte destination = 0xFF;             // destination to send to
-
-//initialization
-M5.begin();
-LoRa.setPins();                      // set CS, reset, IRQ pin
-LoRa.begin(433E6);                   // initialize ratio at 915 MHz
-
-//send message
-void sendMessage(String outgoing) {
-  LoRa.beginPacket();                // start packet
-  LoRa.write(destination);           // add destination address
-  LoRa.write(localAddress);          // add sender address
-  LoRa.write(msgCount);              // add message ID
-  LoRa.write(outgoing.length());     // add payload length
-  LoRa.print(outgoing);              // add payload
-  LoRa.endPacket();                  // finish packet and send it
-  msgCount++;                        // increment message ID
-}
-
-//receive message
-void onReceive(int packetSize) {
-  if (packetSize == 0) return;       // if there's no packet, return
-  int recipient = LoRa.read();       // recipient address
-  byte sender = LoRa.read();         // sender address
-  byte incomingMsgId = LoRa.read();  // incoming msg ID
-  byte incomingLength = LoRa.read(); // incoming msg length
-
-  String incoming = "";
-
-  while (LoRa.available()) {
-    incoming += (char)LoRa.read();
-  }
-}
-
-onReceive(LoRa.parsePacket());
-```
-
-<img src="assets/img/product_pics/module/module_example/LORA/example_module_02.png">
-
 ## Schematic
 
 <img src="assets/img/product_pics/module/lora_sch.png">
diff --git a/docs/en/module/lora868.md b/docs/en/module/lora868.md
index 60c4b630..9cdb3a67 100644
--- a/docs/en/module/lora868.md
+++ b/docs/en/module/lora868.md
@@ -1,9 +1,8 @@
-# Module LoRa868 {docsify-ignore-all}
+# Module LoRa868
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:M029</div>
 
-<img src="assets/img/product_pics/module/module_lora868_01.jpg" width="30%" height="30%"> <img src="assets/img/product_pics/module/module_lora868_02.jpg" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets/img/product_pics/module/module_lora868_01.jpg"><img src="assets/img/product_pics/module/module_lora868_02.jpg"></div>
 
 ## Description
 
@@ -44,7 +43,6 @@ LoRa and LoRaWAN permit long-range connectivity for Internet of Things (IoT) dev
 
 - **[LoRaWAN Regional Parameters](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/module/lorawantm_regional_parameters_v1.1rb_-_final.pdf)**
 
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -61,7 +59,7 @@ LoRa and LoRaWAN permit long-range connectivity for Internet of Things (IoT) dev
 
 ### Arduino IDE
 
-These are the point-to-point communication examples between two LORA868 modules. The LoRa nodes send and receive messages.
+These are the point-to-point communication [examples](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/LORA868/Arduino) between two LORA868 modules. The LoRa nodes send and receive messages.
 
 * Blue string indicates sending succeed.
 
@@ -69,59 +67,6 @@ These are the point-to-point communication examples between two LORA868 modules.
 
 * Red string indicates initialization failed.
 
-*To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/LORA868/Arduino)*
-
-```arduino
-#include <M5Stack.h>
-#include <M5LoRa.h>
-
-//declaration
-String outgoing;                     // outgoing message
-byte msgCount = 0;                   // count of outgoing messages
-byte localAddress = 0xBB;            // address of this device
-byte destination = 0xFF;             // destination to send to
-
-//initialization
-M5.begin();
-LoRa.setPins();                      // set CS, reset, IRQ pin
-LoRa.begin(868E6);                   // initialize ratio at 868 MHz
-
-//send message
-void sendMessage(String outgoing) {
-  LoRa.beginPacket();                // start packet
-  LoRa.write(destination);           // add destination address
-  LoRa.write(localAddress);          // add sender address
-  LoRa.write(msgCount);              // add message ID
-  LoRa.write(outgoing.length());     // add payload length
-  LoRa.print(outgoing);              // add payload
-  LoRa.endPacket();                  // finish packet and send it
-  msgCount++;                        // increment message ID
-}
-
-//receive message
-void onReceive(int packetSize) {
-  if (packetSize == 0) return;       // if there's no packet, return
-  int recipient = LoRa.read();       // recipient address
-  byte sender = LoRa.read();         // sender address
-  byte incomingMsgId = LoRa.read();  // incoming msg ID
-  byte incomingLength = LoRa.read(); // incoming msg length
-
-  String incoming = "";
-
-  while (LoRa.available()) {
-    incoming += (char)LoRa.read();
-  }
-}
-
-onReceive(LoRa.parsePacket());
-```
-
-## Videos
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/Module/LoRa868.mp4" type="video/mp4">
-</video>
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-module/products/lora-module-868mhz';
diff --git a/docs/en/module/lorawan.md b/docs/en/module/lorawan.md
index db4d8088..4312b035 100644
--- a/docs/en/module/lorawan.md
+++ b/docs/en/module/lorawan.md
@@ -1,9 +1,8 @@
-# Module LoRaWAN {docsify-ignore-all}
+# Module LoRaWAN
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:M018</div>
 
-<img src="assets/img/product_pics/module/module_lorawan_01.png" width="30%" height="30%"> <img src="assets/img/product_pics/module/module_lorawan_02.png" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets/img/product_pics/module/module_lorawan_01.png"><img src="assets/img/product_pics/module/module_lorawan_02.png"></div>
 
 ## Description
 
@@ -76,7 +75,6 @@ By default, the UART configuration: "9600, 8, n, 1"(8 bits data, no parity, 1 st
 
 - **[LoRaWAN Regional Parameters](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/module/lorawantm_regional_parameters_v1.1rb_-_final.pdf)**
 
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -89,7 +87,6 @@ By default, the UART configuration: "9600, 8, n, 1"(8 bits data, no parity, 1 st
 
 !>3.The CP210X (USB driver) needs to be installed before the EasyLoader is burned. [Click here to view the driver installation tutorial](en/related_documents/M5Burner#install-usb-driver)
 
-
 ## Example
 
 ### Arduino IDE
@@ -103,69 +100,7 @@ Press button A to clear the screen.
 
 **Note:** Befor compiling this program, please extract `LoRaWan_for_M5Stack.rar` to this path `C:\Users\<user_name>\Documents\Arduino\libraries`.
 
-*The below code is incomplete. To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/LORAWAN/Arduino).*
-
-```arduino
-/*
-    device_A.ino
-*/
-#include <M5Stack.h>
-#include <LoRaWan.h>
-
-#define SerialUSB Serial
-
-// declaration
-M5.begin();
-SerialUSB.begin(9600);
-lora.init();
-delay(2000); // must delay for lorawan power on
-
-// 433MHz frequency initialization
-lora.initP2PMode(433, SF12, BW500, 8, 8, 20);
-
-// 868MHz frequency initialization
-lora.initP2PMode(868, SF12, BW500, 8, 8, 20);
-
-// send string
-lora.transferPacketP2PMode("hello world");
-
-// receive data
-short length = 0;
-short rssi = 0;
-memset(buffer, 0, 128);
-length = lora.receivePacketP2PMode(buffer, 128, &rssi, 1);
-```
-
-```arduino
-/*
-    device_B.ino
-*/
-#include <M5Stack.h>
-#include <LoRaWan.h>
-
-#define SerialUSB Serial
-
-// declaration
-M5.begin();
-SerialUSB.begin(9600);
-lora.init();
-delay(2000); // must delay for lorawan power on
-
-// 433MHz frequency initialization
-lora.initP2PMode(433, SF12, BW500, 8, 8, 20);
-
-// 868MHz frequency initialization
-lora.initP2PMode(868, SF12, BW500, 8, 8, 20);
-
-// send string
-lora.transferPacketP2PMode("hello world");
-
-// receive data
-short length = 0;
-short rssi = 0;
-memset(buffer, 0, 128);
-length = lora.receivePacketP2PMode(buffer, 128, &rssi, 1);
-```
+The below code is incomplete. To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/LORAWAN/Arduino)
 
 <img src="assets/img/product_pics/module/module_example/LORAWAN/example_module_lorawan_01.png">
 
diff --git a/docs/en/module/lte.md b/docs/en/module/lte.md
index 8bf165c1..c7bb3749 100644
--- a/docs/en/module/lte.md
+++ b/docs/en/module/lte.md
@@ -1,19 +1,15 @@
-# Module LTE {docsify-ignore-all}
+# Module LTE
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:M027</div>
 
-<img src="assets/img/product_pics/module/lte/lte_01.jpg" width="30%" height="30%">&nbsp;&nbsp;&nbsp;<img src="assets/img/product_pics/module/lte/lte_02.jpg" width="30%" height="30%"> 
-
+<div class="product_pic"><img src="assets/img/product_pics/module/lte/lte_01.jpg">&nbsp;&nbsp;&nbsp;<img src="assets/img/product_pics/module/lte/lte_02.jpg"></div>
 
 ## Description
 
 This is a wireless communication module, integrated **M8321**  module that released by China Mobile, provided TD-LTE/FDD-LTE/WCDMA/TD- SCDMA/GSM/GPRS/EDGE Frequency Band and LCC+LGA package type.
-<br><br>
 It has integrated plentiful Internet protocols, field standard interface, and functions,  supported WindowsXP,Windows7,Windows8,Windows10,Linux and Android USB driver.
-<br><br>
 In the LTE-4G module scheme, we added more hardware resources, 1 reserved speaker solder panel, 3 LEDs, exported USB interface, double antennea allowed.
-<br><br>
-M8321  is 4V power input, so in the hardware of LTE-4G module, we added a Bidirectional Voltage-Level Translator (TXS0104E), to switch the power supply to 4V. 
+M8321  is 4V power input, so in the hardware of LTE-4G module, we added a Bidirectional Voltage-Level Translator (TXS0104E), to switch the power supply to 4V.
 
 <img src="assets/img/product_pics/module/lte/lte_03.jpg" width="50%" height="50%">
 <img src="assets/img/product_pics/module/lte/NanoSIM.jpeg" width="50%" height="50%">
@@ -57,7 +53,6 @@ Product Feature:
 - 1x Antenna
 - 1x LTE module 
 
-
 ## Applications
 
 -  M2M industrial
@@ -94,7 +89,7 @@ Product Feature:
 
 ### 1. Arduino IDE
 
-*To get complete code, please click [here](https://github.com/m5stack/M5Stack/blob/master/examples/Modules/LTE/LTE.ino).*
+To get complete code, please click [here](https://github.com/m5stack/M5Stack/blob/master/examples/Modules/LTE/LTE.ino)
 
 ### Pin Map
 
diff --git a/docs/en/module/nb-iot.md b/docs/en/module/nb-iot.md
index fa5c7383..f5425d95 100644
--- a/docs/en/module/nb-iot.md
+++ b/docs/en/module/nb-iot.md
@@ -1,23 +1,21 @@
-# Module NB-IoT {docsify-ignore-all}
+# Module NB-IoT
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:M028</div>
 
-<img src="assets/img/product_pics/module/nb-iot/nb_iot_01.jpg" width="30%">&nbsp;&nbsp;&nbsp; <img src="assets/img/product_pics/module/nb-iot/nb_iot_02.jpg" width="30%"> 
-<img src="assets/img/product_pics/module/nb-iot/NanoSIM.jpeg" width="60%" height="60%">
-
+<div class="product_pic"><img src="assets/img/product_pics/module/nb-iot/nb_iot_01.jpg"><img src="assets/img/product_pics/module/nb-iot/nb_iot_02.jpg"></div>
 
 ## Description
 
 This is a wireless communication module, integrated an **NB-IoT** M5311  module that produced by China Mobile. The dimension if M5311 is 16mm * 18mm * 2.2mm, which is very tiny, and gives convenience to the user of more flexible dimension requirement.  
-<br>
+
 package with LCC allows quick production through standard SMT, which provides a more reliable connection method and performance on the extreme environment. 
-<br>
+
 the power requirement of this M5311 module is down to 2.1V, AA battery supported, it can fully utilize the power of AA battery, to provide an extremely low-power-consumption solution for terminal devices.
-<br>
+
 M5311 provides abundant external interfaces and protocol stacks, support peripheral sensors, etc.
-<br>
+
 Based on M5311, we have offered extra hardware resources on NB-IoT Module, WUP, STA LEDs, 3 alternative UARTs, one power button, and 2 alternative antennae.  
-<br><br>
+
 
 Power Operation:
 - Power On: GPIO2 stay HIGH for 2s
@@ -80,7 +78,6 @@ Power Operation:
 - Smart Meter 
 - IoT in City
 
-
 ### Some national carrier frequency bands
 
 only for reference
@@ -95,20 +92,16 @@ only for reference
  <tr><td>Middle East, North Africa</td><td>B8(900), B20(800)</td></tr>
 </table>
 
-
 ## Links
 
 - **Datasheet** - [M5311](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/module/M5311_cn.pdf)
 
 -  **AT Command** - [M5311 AT Command](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/module/M5311_AT_Command_Interface_Specification_en.pdf)
 
-
-  
 ## Schematic
 
 - [NB-IoT Module](https://github.com/m5stack/M5-Schematic/blob/master/Modules/module_nb_iot_sch.pdf)
 
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -125,7 +118,7 @@ only for reference
 
 ### 1. Arduino IDE
 
-*To get complete code, please click [here](https://github.com/m5stack/M5Stack/tree/master/examples/Modules/NB-IoT).*
+To get complete code, please click [here](https://github.com/m5stack/M5Stack/tree/master/examples/Modules/NB-IoT)
 
 ### Pin Map
 
diff --git a/docs/en/module/nb-iot_plus.md b/docs/en/module/nb-iot_plus.md
index 37314f28..bc112f9c 100644
--- a/docs/en/module/nb-iot_plus.md
+++ b/docs/en/module/nb-iot_plus.md
@@ -1,17 +1,13 @@
-# NB-IoT Plus{docsify-ignore-all}
+# NB-IoT Plus
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:M030</div>
 
-<img src="assets/img/product_pics/module/nb-iot-plus/nb_iot_plus_01.webp" width="30%">
-<img src="assets/img/product_pics/module/nb-iot-plus/nb_iot_plus_02.webp" width="30%"> 
-<img src="assets/img/product_pics/module/nb-iot-plus/nb_iot_plus_03.webp" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets/img/product_pics/module/nb-iot-plus/nb_iot_plus_01.webp"><img src="assets/img/product_pics/module/nb-iot-plus/nb_iot_plus_02.webp"></div>
 
 ## Description
 
 **NB-IoT Plus** is a wireless communication module, integrated with the NB-IoT **M5311-GB** module from China Mobile. It supports multiple frequency bands such as B1 / B3 / B5 / B8 / B20 / B28. It's very tiny form factor gives more convenience for applications with flexible dimension requirement. It comes with a built-in copper helical antenna, and also an IPEX connector, reserved for adding an external antenna to obtain better signal strength.Package with LCC allows quick production through standard SMT, which provides a more reliable connection method and performance in extreme environments.The power requirement of this M5311-GB module is as low as 2.1V,it supports and can fully utilize the power of AA battery, to provide an extremely low-power-consumption solution for field deployed terminal devices.M5311 provides abundant external interfaces and protocol stacks, and also support for peripheral sensors, etc.Based on M5311-GB, we have offered extra hardware resources to the NB-IoT Module, WUP and STA LEDs, 3 alternative UARTs, a power button, and support for two alternative antennae.
 
-
 Power Operation:
 - Power On: GPIO2 stay HIGH for 2s
 - Power Off: GPIO2 stay HIGH for 8s
@@ -20,7 +16,6 @@ Power Operation:
 - Reset module: GPIO26 HIGH
 <br>
 
-
 <img src="assets/img/product_pics/module/nb-iot-plus/NanoSIM.jpeg" width="30%" height="30%">
 <img src="assets/img/product_pics/module/nb-iot-plus/nb_iot_plus_04.webp" width="30%" height="30%">
 <img src="assets/img/product_pics/module/nb-iot-plus/nb_iot_plus_05.webp" width="30%" height="30%">    
@@ -77,7 +72,6 @@ Power Operation:
 - Farm Monitorning systems
 - industrial Navigation and Monitorning
 
-
 ### Some national carrier frequency bands
 
 only for reference
@@ -92,7 +86,6 @@ only for reference
  <tr><td>Middle East, North Africa</td><td>B8(900), B20(800)</td></tr>
 </table>
 
-
 ## Links
 
 - **Datasheet** - [M5311](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/module/M5311_cn.pdf)
@@ -103,7 +96,6 @@ only for reference
 
 - [NB-IoT Plus Module](https://github.com/m5stack/M5-Schematic/blob/master/Modules/module_nb_iot_sch.pdf)
 
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -120,8 +112,7 @@ only for reference
 
 ### 1. Arduino IDE
 
-*To get example code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/NB-IoT_PLUS).*
-
+To get example code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/NB-IoT_PLUS)
 
 ### Pin Map
 
@@ -130,13 +121,6 @@ only for reference
  <tr><td>Module NB-IoT Plus</td><td>RX</td><td>TX</td><td>3.3V</td><td>GND</td></tr>
 </table>
 
-
-## Video
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/Module/NB-IoT-Plus.mp4" type="video/mp4">
-</video>
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-module/products/m5stack-nb-iot-plus-module-m5311-gb';
diff --git a/docs/en/module/plus.md b/docs/en/module/plus.md
index 41420c95..9e9a7cb4 100644
--- a/docs/en/module/plus.md
+++ b/docs/en/module/plus.md
@@ -1,18 +1,16 @@
-# Module PLUS {docsify-ignore-all}
+# Module PLUS
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:M019</div>
 
-<img src="assets/img/product_pics/module/module_plus_01.png" width="30%" height="30%"> <img src="assets/img/product_pics/module/module_plus_02.png" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets/img/product_pics/module/module_plus_01.png"><img src="assets/img/product_pics/module/module_plus_02.png"></div>
 
 ## Description
 
 **PLUS** is a enhanced M5 module comes with Lipo battery(400mAh), gear potentiometer, IR transmitter, extend PORT B(GPIO Port), PORT C(UART Port) from M5 core and a Microphone soldering pad. Powered with MEGA328, it could be a great upgrade of the hardwre resources by adding up PLUS to your work.
 
-Communication Protocol: IIC (0x62).
-
 ## Product Features
 
+-  IIC address:(0x62)
 -  400mAh Battery
 -  Programmable gear potentiometer
 -  IR transmitter
@@ -26,10 +24,6 @@ Communication Protocol: IIC (0x62).
 
 ## Related Link
 
-- **[Offical Video](https://www.youtube.com/channel/UCozgFVglWYQXbvTmGyS739w)**
-
-- **[Forum](http://forum.m5stack.com/)**
-
 - **[The Firmware of inside MEGA328](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/PLUS/firmware_328p)**
 
 ## EasyLoader
@@ -55,62 +49,18 @@ Communication Protocol: IIC (0x62).
 
 ### Arduino IDE
 
-*The Code below `plus_read_encoder.ino` is incomplete. To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/PLUS/Arduino).*
-
-```arduino
-/*
-* Read data from the gear potentiometer
-* Send infrared light
-*/
-#include <Arduino.h>
-#include <M5Stack.h>
-
-#define IrPin 13
-#define PLUS_ADDR 0x62
-
-// declaration
-int32_t number = 0;
-uint8_t press = 0;
-
-// initialization
-M5.begin(true, false, false);
-Wire.begin();
-ledcSetup(1, 38000, 10); ledcAttachPin(IrPin, 1);// IR Pin setting
-
-// read data
-Wire.requestFrom(PLUS_ADDR, 2);
-while(Wire.available()) {
-    int8_t encode = Wire.read();
-    uint8_t press_n = Wire.read();
-    number += encode;
-    if(press_n == 0xff) {
-        press = 0;//encoder was pressed
-    }
-    else {
-        press = 1;//encoder was releaed
-    }
-}
-```
+The Code below `plus_read_encoder.ino` is incomplete. To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/PLUS/Arduino)
 
 ### UIFLOW
 
-<img src="assets/img/product_pics/module/module_plus_03.jpg">
-
 - [click here to get UIFlow](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/PLUS/UIFLOW). 
 
+<img src="assets/img/product_pics/module/module_plus_03.jpg">
+
 ## Schematic
 
 <img src="assets/img/product_pics/module/plus_sch.png">
 
-## Video
-
-**PLUS Case - Page flipping and selection of menu interface**
-
-<video width="500" height="315" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201812/M5Stack%20Encoder.mp4" type="video/mp4">
-</video>
-
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-module/products/plus-module';
diff --git a/docs/en/module/proto.md b/docs/en/module/proto.md
index 68c9c5e5..cd3e189f 100644
--- a/docs/en/module/proto.md
+++ b/docs/en/module/proto.md
@@ -2,7 +2,7 @@
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:M001</div>
 
-<img src="assets/img/product_pics/module/module_proto_01.png" width="30%" height="30%"> <img src="assets/img/product_pics/module/module_proto_02.png" width="30%" height="30%">
+<div class="product_pic"><img src="assets/img/product_pics/module/module_proto_01.png"><img src="assets/img/product_pics/module/module_proto_02.png"></div>
 
 ## Description
 
@@ -36,18 +36,10 @@
 | HPOWR             | 5V               |
 | HPOWR             | BAT              |
 
-
 ## Include
 
 -  1x M5Stack PROTO Module
 
-## Related Link
-
-- **[Offical Video](https://www.youtube.com/channel/UCozgFVglWYQXbvTmGyS739w)**
-
-- **[Forum](http://forum.m5stack.com/)**
-
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-module/products/proto-module';
diff --git a/docs/en/module/proto_kit.md b/docs/en/module/proto_kit.md
index 5a05cc47..bdf481bb 100644
--- a/docs/en/module/proto_kit.md
+++ b/docs/en/module/proto_kit.md
@@ -1,8 +1,8 @@
-# Module PROTO-Kit {docsify-ignore-all}
+# Module PROTO-Kit
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:K008</div>
 
-<img src="assets/img/product_pics/module/proto_kit/module_proto_kit_01.jpg" width="30%" height="30%"> <img src="assets/img/product_pics/module/proto_kit/module_proto_kit_02.jpg" width="30%" height="30%">
+<div class="product_pic"><img src="assets/img/product_pics/module/proto_kit/module_proto_kit_01.jpg"> <img src="assets/img/product_pics/module/proto_kit/module_proto_kit_02.jpg"></div>
 
 ## Description
 
@@ -55,11 +55,6 @@ PROTO Board is a pure universal prototype perboard. You can have the total freed
 
 - **[DHT12 Datasheet](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/hat/DHT12_en.pdf)**
 
-- **[Offical Video](https://www.youtube.com/channel/UCozgFVglWYQXbvTmGyS739w)**
-
-- **[Forum](http://forum.m5stack.com/)**
-
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-module/products/experimental-proto-board-set';
diff --git a/docs/en/module/servo.md b/docs/en/module/servo.md
index a4c5bcbc..56bd313f 100644
--- a/docs/en/module/servo.md
+++ b/docs/en/module/servo.md
@@ -1,14 +1,12 @@
-# Module SERVO {docsify-ignore-all}
+# Module SERVO
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:M014</div>
 
-<img src="assets\img\product_pics\module\servo\servo_01.jpg" width="30%"><img src="assets\img\product_pics\module\servo\servo_02.jpg" width="30%"><img src="assets\img\product_pics\module\servo\servo_03.jpg" width="30%">
+<div class="product_pic"><img src="assets\img\product_pics\module\servo\servo_01.jpg"><img src="assets\img\product_pics\module\servo\servo_02.jpg"></div>
 
 ## Description
 
-**SERVO** is made to implement the bestest, easiest way to drive Servo motors. This M5 module will make quick work of your next Servo project!  It is able to drive mutiple Servo motors, up to 12 channels(Max load :14W) . We also added an DC input for power supplement. Through M-BUS the DC in can automatically power the M5 core at top.
-
-Servo is powered by MEGA328 communicate via IIC(0x53).
+**SERVO** is made to implement the bestest, easiest way to drive Servo motors. This M5 module will make quick work of your next Servo project!  It is able to drive mutiple Servo motors, up to 12 channels(Max load :14W) . We also added an DC input for power supplement. Through M-BUS the DC in can automatically power the M5 core at top.Servo is powered by MEGA328 communicate via IIC(0x53).
 
 ## Product Features
 
@@ -32,10 +30,6 @@ Servo is powered by MEGA328 communicate via IIC(0x53).
 
 ## Related Link
 
-- **[Offical Video](https://www.youtube.com/channel/UCozgFVglWYQXbvTmGyS739w)**
-
-- **[Forum](http://forum.m5stack.com/)**
-
 - **[The Firmware of inside MEGA328](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/SERVO/firmware_328p)**
 
 ## EasyLoader
@@ -60,33 +54,11 @@ Servo is powered by MEGA328 communicate via IIC(0x53).
 
 ### 1. Arduino IDE
 
-*The below code is incomplete(just for usage). If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/SERVO/Arduino).*
-
-```arduino
-#define SERVO_ADDR 0x53 //the IIC address of SERVO Module
-/*
- * control servo(CH channle) by us
- */
-Wire.beginTransmission(SERVO_ADDR);
-Wire.write(CH|0x00);
-Wire.write(timeL);
-Wire.write(timeH);
-Wire.endTransmission();
-
-/*
- * control servo(CH channle) by angle
- */
-Wire.beginTransmission(SERVO_ADDR);
-Wire.write(CH|0x10);
-Wire.write(angle);//0-180°
-Wire.endTransmission();
-```
+The below code is incomplete(just for usage). If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/SERVO/Arduino)
 
 ### 2. UIFlow
 
-Wanna explore the easiest way of Servo programming?? Check out the Blockly Platform at [UIFlow](http://flow.m5stack.com).
-
-*TO get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/SERVO/UIFlow).*
+TO get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/SERVO/UIFlow)
 
 <img src="assets/img/product_pics/module/module_example/SERVO/example_module_servo_01.png">
 
diff --git a/docs/en/module/sim800.md b/docs/en/module/sim800.md
index aa7f84b1..bda11870 100644
--- a/docs/en/module/sim800.md
+++ b/docs/en/module/sim800.md
@@ -1,16 +1,13 @@
-# Module SIM800L  {docsify-ignore-all}
+# Module SIM800L
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:M004</div>
 
-<img src="assets/img/product_pics/module/module_sim800_01.png" width="30%" height="30%"> <img src="assets/img/product_pics/module/module_sim800_02.png" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets/img/product_pics/module/module_sim800_01.png"><img src="assets/img/product_pics/module/module_sim800_02.png"></div>
 
 ## Description
 
 **SIM800L** is a cellular phone module, integrated SIM800L, a GSM/GPRS module, only cpmpatible with 2G network. if you want to integrate a cellular module into your design with vioce, text and SMS, this hand-solderable module is pretty nice!
 
-Series Protocol: UART
-
 ## Product Features
 
 -  3.5 mm phone audio jack
@@ -55,12 +52,6 @@ Series Protocol: UART
 -  Automatic Web Spider SMS-notifier
 -  Remote meter reading system
 
-## Related Link
-
-- **[Offical Video](https://www.youtube.com/channel/UCozgFVglWYQXbvTmGyS739w)**
-
-- **[Forum](http://forum.m5stack.com/)**
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -78,7 +69,7 @@ Series Protocol: UART
 
 - **Arduino**
 
-*Use with Arduino, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/SIM800/Arduino/send_short_message)*
+Use with Arduino, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/SIM800/Arduino/send_short_message)
 <!-- -  **[SIM800L Info](http://simcomm2m.com/En/module/detail.aspx?id=138)**
    (SIM800L) -->
 
@@ -107,21 +98,6 @@ Serial2.print("AT+TEST=TXLRPKT,"00 00 01 00 00 AF 80 07 02 00 00 39"");
 
 <img src="assets/img/product_pics/module/sim800_sch.png">
 
-## Video
-
-**SIM800L Case - Phone calling**
-
-<video width="500" height="315" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201903/sim800_call.mp4" type="video/mp4">
-</video>
-
-**SIM800L Case - Receive SMS**
-
-<video width="500" height="315" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/SMS%20Receive.mp4" type="video/mp4">
-</video>
-
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-module/products/gsm-sim800-module';
diff --git a/docs/en/module/stepmotor.md b/docs/en/module/stepmotor.md
index 18e77f30..5c530b4a 100644
--- a/docs/en/module/stepmotor.md
+++ b/docs/en/module/stepmotor.md
@@ -1,12 +1,11 @@
-# Module STEPMOTOR {docsify-ignore-all}
+# Module STEPMOTOR
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:M012</div>
 
-<img src="assets/img/product_pics/module/module_stepmotor_01.png" width="30%" height="30%"> <img src="assets/img/product_pics/module/module_stepmotor_02.png" width="30%" height="30%"> <img src="assets/img/product_pics/module/module_stepmotor_03.png" width="30%" height="30%">
+<div class="product_pic"><img src="assets/img/product_pics/module/module_stepmotor_01.png"> <img src="assets/img/product_pics/module/module_stepmotor_02.png"></div>
 
 <!-- <img src="assets/img/product_pics/module/module_stepmotor_04.png" width="30%" height="30%"> -->
 
-
 ## Description
 
 **STEPMOTOR** is used for stepper motor control. It is perfect for any motion project as it can drive up to 3 Stepper motors with **GRBL** control.
@@ -35,10 +34,6 @@ Integrated 3 DRV8825, a simple but very powerful board that can control one bipo
 
 ## Related Link
 
-- **[Offical Video](https://www.youtube.com/channel/UCozgFVglWYQXbvTmGyS739w)**
-
-- **[Forum](http://forum.m5stack.com/)**
-
 - **[The Firmware of inside MEGA328](https://github.com/m5stack/stepmotor_module/tree/master/Firmware%20for%20stepmotor%20module/GRBL-Arduino-Library)**
 
 - **[DRV8825 Datasheet](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/module/DRV8825_en.pdf)**
@@ -55,7 +50,6 @@ Integrated 3 DRV8825, a simple but very powerful board that can control one bipo
 
 !>3.The CP210X (USB driver) needs to be installed before the EasyLoader is burned. [Click here to view the driver installation tutorial](en/related_documents/M5Burner#install-usb-driver)
 
-
 ## PinMap
 
 **Mega328 ISP**Download interface Pin foot definition
@@ -66,47 +60,13 @@ Integrated 3 DRV8825, a simple but very powerful board that can control one bipo
 
 ### 1. Arduino IDE
 
-*The code below is incomplete. TO get complete code, please click [here](https://github.com/m5stack/stepmotor_module/tree/master/Example/Arduino).*
-
-```adrduino
-/*
-    If Button A was pressed,
-    stepmotor will rotate back and forth at a time
-*/
-
-#include <M5Stack.h>
-#include <Wire.h>
-
-#define STEPMOTOR_I2C_ADDR 0x70
-
-// initialization
-M5.begin();
-Wire.begin();
-
-// Controlling Protocol:
-//  G<n> X<distance>Y<distance>Z<distance> F<speed>
-SendCommand(STEPMOTOR_I2C_ADDR, "G1 X20Y20Z20 F500");
-SendCommand(STEPMOTOR_I2C_ADDR, "G1 X0Y0Z0 F400");
-
-// Get Data from Module.
-Wire.requestFrom(STEPMOTOR_I2C_ADDR, 1);
-if (Wire.available() > 0) {
-  int u = Wire.read();
-  if (u != 0) Serial.write(u);
-}
-
-// Send Data to Module.
-while (Serial.available() > 0) {
-  int inByte = Serial.read();
-  SendByte(STEPMOTOR_I2C_ADDR, inByte);
-}
-```
+The code below is incomplete. TO get complete code, please click [here](https://github.com/m5stack/stepmotor_module/tree/master/Example/Arduino)
 
 ### 2. UIFlow
 
-Wanna explore the easiest way of Servo programming?? Check out the Blockly Platform at [UIFlow](flow.m5stack.com).
+Wanna explore the easiest way of Servo programming?? Check out the Blockly Platform at [UIFlow](flow.m5stack.com)
 
-*To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/blob/master/Module/STEPMOTOR/UIFlow).*
+To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/blob/master/Module/STEPMOTOR/UIFlow)
 
 <img src="assets/img/product_pics/module/module_example/STEPMOTOR/example_module_stepmotor_01.png">
 
@@ -114,7 +74,6 @@ Wanna explore the easiest way of Servo programming?? Check out the Blockly Platf
 
 <img src="assets/img/product_pics/module/stepmotor_sch.png">
 
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-module/products/step-motor-module-adapter-fan-module';
diff --git a/docs/en/module/usb.md b/docs/en/module/usb.md
index 4460143e..533dab8b 100644
--- a/docs/en/module/usb.md
+++ b/docs/en/module/usb.md
@@ -1,19 +1,17 @@
-# Module USB {docsify-ignore-all}
+# Module USB
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:M020</div>
 
-<img src="assets/img/product_pics/module/module_usb_01.png" width="30%" height="30%"><img src="assets/img/product_pics/module/module_usb_02.png" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets/img/product_pics/module/module_usb_01.png"><img src="assets/img/product_pics/module/module_usb_02.png"></div>
 
 ## Description
 
 **USB** is a USB driver module, integrated **MAX3421E** which adds USB host or peripheral capability to any system with an SPI
 interface.  Ever up for adding the standard USB features on your project? this M5 moudle is the perfect solution.
 
-Series Protocol: SPI
-
 ## Product Features
 
+-  Series Protocol: SPI
 -  1x UAB stadard A port
 -  10x extended GPIO pins
 -  extended 3v3, 5v & GND
@@ -49,7 +47,7 @@ Series Protocol: SPI
 
 ## Example
 
-*To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/USB/Arduino).*
+To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/USB/Arduino)
 
 **NOTE:**
 
@@ -70,60 +68,12 @@ Plug the USB mouse into USB A port.
 
 * Press the middle wheel button to clear the screen.
 
-```arduino
-#include <M5Stack.h>
-#include <SPI.h>
-#include <Usb.h>
-#include <hiduniversal.h>
-#include <hidboot.h>
-#include <usbhub.h>
-#include "M5Mouse.h"
-
-// new objects
-USB Usb;
-USBHub  Hub(&Usb);
-HIDBoot<USB_HID_PROTOCOL_MOUSE> HidMouse(&Usb);
-MouseRptParser  Prs;
-
-// initialization
-M5.begin();
-Usb.Init();
-HidMouse.SetReportParser(0,(HIDReportParser*)&Prs);
-
-// handle event coming from usb device
-Usb.Task();
-if(Usb.getUsbTaskState() == USB_STATE_RUNNING)
-{
-  Mouse_Pointer(mou_px, mou_py);
-  mou_px = 0;
-  mou_py = 0;
-  /* left button pressed: draw white point */
-  if (mou_button == 1)
-    M5.Lcd.drawCircle(StaPotX, StaPotY, 1, WHITE);
-  /* right button pressed: draw green point */
-  if (mou_button == 2)
-    M5.Lcd.drawCircle(StaPotX, StaPotY, 1, GREEN);
-  /* middle button pressed: clear screen */
-  if (mou_button == 4)
-    M5.Lcd.fillScreen(BLACK);
-}
-```
-
 <img src="assets/img/product_pics/module/module_example/USB/example_module_usb_01.png">
 
 ## Schematic
 
 <img src="assets/img/product_pics/module/usb_sch.png">
 
-## Video
-
-**USB Case - Read USB device**
-
-<video width="500" height="315" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201902/USB%20Interface.mp4" type="video/mp4">
-</video>
-
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-module/products/usb-module';
diff --git a/docs/en/unit/396port.md b/docs/en/unit/396port.md
index 897f3e6e..a6424d0f 100644
--- a/docs/en/unit/396port.md
+++ b/docs/en/unit/396port.md
@@ -1,10 +1,8 @@
-# 396PORT {docsify-ignore-all}
+# 396PORT
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U020</div>
 
-<img src="assets/img/product_pics/unit/M5GO_Unit_396port.png" width="30%" height="30%"> 
-
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_396port.png"></div>
 
 ## Description
 
@@ -14,8 +12,6 @@ HT3.96 is classed as Pluggable System Terminal Block catelog.
 
 Terminal blocks are used to secure and/or terminate wires and, in their simplest form, consist of several individual terminals arranged in a long strip. Terminals are useful for connecting wiring to a ground or, in the case of electrical power, for connecting electrical switches and outlets to the mains
 
-<img src="assets/img/product_pics/unit/unit_396port_03.png"><img src="assets/img/product_pics/unit/unit_396port_04.png">
-
 ## Product Features
 
 - 1x HT3.96 connector(4 pins)
@@ -39,13 +35,6 @@ Terminal blocks are used to secure and/or terminate wires and, in their simplest
 - 1x Grove Cable
 - 1x HT3.96 Male Socket
 
-## Related Link
-
-- **[Offical Video](https://www.youtube.com/channel/UCozgFVglWYQXbvTmGyS739w)**
-
-- **[Forum](http://forum.m5stack.com/)**
-
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/3-96-transfer-unit';
diff --git a/docs/en/unit/accel.md b/docs/en/unit/accel.md
index bcf6e017..91e05bb0 100644
--- a/docs/en/unit/accel.md
+++ b/docs/en/unit/accel.md
@@ -1,9 +1,8 @@
-# ACCEL {docsify-ignore-all}
+# ACCEL
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U056</div>
 
-<img src="assets/img/product_pics/unit/accel/accel_01.jpg" width="30%" height="30%"><img src="assets/img/product_pics/unit/accel/accel_02.jpg" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/accel/accel_01.jpg"><img src="assets/img/product_pics/unit/accel/accel_02.jpg"></div>
 
 ## Description
 
@@ -31,8 +30,6 @@ By measuring the amount of static acceleration due to gravity, you can find out
 - Product Size：32.2mm x 24.2mm x 8.1mm
 - Product weight：3.9g
 
-
-
 ## Include
 
 - 1x ACC unit
@@ -44,7 +41,6 @@ By measuring the amount of static acceleration due to gravity, you can find out
 - Navigation
 - Orientation sensing
 
-
 ## Dcumentation
 
 - Datasheet - **[ADXL345](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/unit/ADXL345_en.pdf)** 
@@ -75,50 +71,14 @@ By measuring the amount of static acceleration due to gravity, you can find out
 
 ### 1. Arduino IDE
 
-*To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/ACCEL).<br>
-Download library ADXL345 before compile.*
-
-```arduino
-#include <M5Stack.h>
-#include <ADXL345.h>
-
-ADXL345 accel(ADXL345_ALT); // download this library before compile.
-//https://github.com/jakalada/Arduino-ADXL345
-
-// initialization
-void setup() {
-
-  M5.Lcd.setCursor(20, 100); M5.Lcd.print(" x ");
-  M5.Lcd.setCursor(120, 100); M5.Lcd.print(" y ");
-  M5.Lcd.setCursor(220, 100); M5.Lcd.print(" z ");
-  ...
-  byte deviceID = accel.readDeviceID();
-}
-
-void loop() {
-    if (accel.update()) {
-    M5.Lcd.fillRect(0, 130, 360, 30, BLACK);
-    M5.Lcd.setCursor(15,  130); M5.Lcd.print((int)(1000*accel.getX()));
-    M5.Lcd.setCursor(115, 130); M5.Lcd.print((int)(1000*accel.getY()));
-    M5.Lcd.setCursor(215, 130); M5.Lcd.print((int)(1000*accel.getZ()));
-    ...
-}
-```
+To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/ACCEL)(Download library ADXL345 before compile)
 
 ### 2. UIFlow
 
+- [Click here to get UIFlow](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/ACCEL/UIFLOW)
+
 <img src="assets/img/product_pics/unit/accel/ACCEL_05.jpg">
 
-- [click here to get UIFlow](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/ACCEL/UIFLOW). 
-
-
-## Video
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/ACCEL.mp4" type="video/mp4">
-</video>
-
-
 <script>
 
    var purchase_link = 'https://m5stack.com/products/3-axis-digital-accelerometer-unit-adxl345';
diff --git a/docs/en/unit/adc.md b/docs/en/unit/adc.md
index e10839e4..0bd41c10 100644
--- a/docs/en/unit/adc.md
+++ b/docs/en/unit/adc.md
@@ -1,10 +1,8 @@
-# ADC {docsify-ignore-all}
+# ADC
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U013</div>
 
-<img src="assets/img/product_pics/unit/M5GO_Unit_adc.png" width="30%" height="30%">
-
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_adc.png"></div>
 
 ## Description
 
@@ -66,41 +64,11 @@ GAIN = 1, 2, 4, OR 8
 
 ### 1. Arduino IDE
 
-*The below code is incomplete(just for usage). If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/ADC/Arduino/ADC_ADS1100).*
-
-```arduino
-#include <M5Stack.h>
-#include <Wire.h>
-#include "ADS1100.h"
-
-#define ADS1100_DEFAULT_ADDRESS 0x48
-
-// declaration
-byte error;
-int8_t address;
-
-//new a object
-ADS1100 ads;
-
-// initialization
-M5.begin(true, false, false);
-ads.getAddr_ADS1100(ADS1100_DEFAULT_ADDRESS);// 0x48, 1001 000 (ADDR = GND)
-ads.setGain(GAIN_ONE);          // 1x gain(default)
-ads.setMode(MODE_CONTIN);       // Continuous conversion mode (default)
-ads.setRate(RATE_8);            // 8SPS (default)
-ads.setOSMode(OSMODE_SINGLE);   // Set to start a single-conversion
-ads.begin();
-
-// read data
-address = ads.ads_i2cAddress;
-Wire.beginTransmission(address);
-Wire.endTransmission();
-ads.Measure_Differential();
-```
+The below code is incomplete(just for usage). If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/ADC/Arduino/ADC_ADS1100)
 
 ### 2. UIFlow
 
-*If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/ADC/UIFlow).*
+If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/ADC/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/ADC/example_unit_adc_01.png">
 
diff --git a/docs/en/unit/angle.md b/docs/en/unit/angle.md
index 7711ed0b..25f24849 100644
--- a/docs/en/unit/angle.md
+++ b/docs/en/unit/angle.md
@@ -1,9 +1,8 @@
-# ANGLE {docsify-ignore-all}
+# ANGLE
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U005</div>
 
-<img src="assets/img/product_pics/unit/M5GO_Unit_angle.png" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_angle.png"></div>
 
 ## Description
 
@@ -12,14 +11,12 @@
 A potentiometer is a manually adjustable, variable resistor with three terminals. Two terminals are connected to a resistive element, the third terminal is connected to an adjustable wiper. The position of the wiper determines the output voltage.
 The out voltage is captured and converted by AD on ESP32 on portB.
 
-
 *In M5Stack product system, Normally the Grove color indicates the type of communications.*
 - Black: Single BUS (AD ,DA ,GPIO)
 - Red: I2C
 - Blue：Uart
 - White： Others(depends)
 
-
 <img src="assets/img/product_pics/unit/angle/unit_angle_03.png">
 
 The Unit's Grove interface is black, specify it is an analog interface that should be connected to the M5Core's GROVE B interface.
@@ -37,13 +34,6 @@ The Unit's Grove interface is black, specify it is an analog interface that shou
 - 1x ANGLE Unit
 - 1x Grove Cable
 
-## Related Link
-
-- **[Offical Video](https://www.youtube.com/channel/UCozgFVglWYQXbvTmGyS739w)**
-
-- **[Forum](http://forum.m5stack.com/)**
-
-
 ## EasyLoader
 
 >EasyLoader is a concise and fast program writer, which has a built-in case program related to the product. It can be burned to the main control by simple steps to perform a series of function verification. Please install the corresponding driver according to the device type. M5Core host [Please click here to view the CP210X driver installation tutorial](en/arduino/arduino_development), M5StickC/V/T/ATOM series can be used without driver)
@@ -74,45 +64,13 @@ The Unit's Grove interface is black, specify it is an analog interface that shou
 
 ### 1. Arduino IDE
 
-*The code below is incomplete. To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/ANGLE/Arduino).*
-
-Example function: Display the digital value converted from the Unit output voltage (0 ~ 4095)
-
-```arduino
-#include <M5Stack.h>
-// select the input pin for the potentiometer
-int sensorPin = 36;
-// last variable to store the value coming from the sensor
-int last_sensorValue = 0;
-// current variable to store the value coming from the sensor
-int cur_sensorValue = 0;
-
-void setup() {
-  M5.begin();
-  pinMode(sensorPin, INPUT);
-  M5.Lcd.setTextSize(2);
-  M5.Lcd.setCursor(0, 0);
-  M5.Lcd.print("the value of ANGLE: ");
-}
-
-void loop() {
-  // read the value from the sensor:
-  cur_sensorValue = analogRead(sensorPin);
-  M5.Lcd.setCursor(0, 25);
-  if(abs(cur_sensorValue - last_sensorValue) > 10){//debaunce
-    M5.Lcd.fillRect(0, 25, 100, 25, BLACK);
-    M5.Lcd.print(cur_sensorValue);
-    last_sensorValue = cur_sensorValue;
-  }
-  delay(50);
-}
-```
+The code below is incomplete. To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/ANGLE/Arduino)
 
 <img src="assets/img/product_pics/unit/unit_example/ANGLE/example_unit_angle_04.png">
 
 ### 2. UIFlow
 
-*If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/ANGLE/UIFlow).*
+If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/ANGLE/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/ANGLE/example_unit_angle_03.png">
 
@@ -127,7 +85,6 @@ void loop() {
  <tr><td>ANGLE Unit</td><td>Sensor Pin</td><td> </td><td>5V</td><td>GND</td></tr>
 </table>
 
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/angle-unit';
diff --git a/docs/en/unit/butterfly.md b/docs/en/unit/butterfly.md
index a1472963..0a2d678b 100644
--- a/docs/en/unit/butterfly.md
+++ b/docs/en/unit/butterfly.md
@@ -1,10 +1,8 @@
-# BUTTERFLY {docsify-ignore-all}
+# BUTTERFLY
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:A041-B</div>
 
-<img src="assets/img/product_pics/app/butterfly/butterfly_01.jpg" width="30%" height="30%">
-<img src="assets/img/product_pics/app/butterfly/butterfly_02.jpg" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets/img/product_pics/app/butterfly/butterfly_01.jpg"><img src="assets/img/product_pics/app/butterfly/butterfly_02.jpg"></div>
 
 ## Description
 
@@ -20,7 +18,6 @@ So,
 <br><br><br>
 <img src="assets/img/product_pics/app/butterfly/butterfly_03.jpg" width="30%" height="30%">
 <img src="assets/img/product_pics/app/butterfly/butterfly_04.jpg" width="30%" height="30%">
-<img src="assets/img/product_pics/app/butterfly/butterfly_05.jpg" width="30%" height="30%">
 
 ## Product Features
 
@@ -35,27 +32,30 @@ So,
 - Cable
 - Rubber band 
 
-## Weight and Size
-
-- Package size:110mm x 110mm x 30mm
-- Package weight:68g
-
 ## Applications
 
 - Fashion Tech
 - Stem Education
 
+## PinMap
+
+**Mega328 ISP**Download interface Pin foot definition
+
+<img src="assets\img\product_pics\app\mega328_isp.png" width="30%" height="30%">
+
 ## Example
 
 Please click，[here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Application/butterfly) to download code
 
 ## Assembly-Steps
+
 ### Button Function (see from LED side)
-- Right: single- press to power on, double press to power off.   
-- Left: long-press until the led cricle changed to another color, release the button. Then short press it will adjust the servo arm. repeat the above the process to get the right position. 
-<br><br>
+
+- Right: single- press to power on, double press to power off.
+- Left: long-press until the led cricle changed to another color, release the button. Then short press it will adjust the servo arm. repeat the above the process to get the right position.
 
 ### Load Butterfly Pattern
+
 <video width="500" height="500" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/App/Butterfly/butterfly_assembly_steps.mp4" type="video/mp4" >
 </video>
@@ -93,13 +93,6 @@ I will show you how to set up the develope environment on UIflow<br>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/App/Butterfly/butterfly.mp4" type="video/mp4" >
 </video>
 
-## PinMap
-
-**Mega328 ISP**Download interface Pin foot definition
-
-<img src="assets\img\product_pics\app\mega328_isp.png" width="30%" height="30%">
-
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-application/products/butterfly-launcher';
diff --git a/docs/en/unit/button.md b/docs/en/unit/button.md
index 85429fd0..c5d0105f 100644
--- a/docs/en/unit/button.md
+++ b/docs/en/unit/button.md
@@ -1,10 +1,8 @@
-# BUTTON {docsify-ignore-all}
+# BUTTON
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U027</div>
 
-<img src="assets/img/product_pics/unit/M5GO_Unit_button.png" width="30%" height="30%">
-
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_button.png"></div>
 
 ## Description
 
@@ -37,12 +35,6 @@ This unit communicates with M5Core through GROVE B port.
 - Lamp holder switch
 - Remote control switch
 
-## Related Link
-
-- **[Offical Video](https://www.youtube.com/channel/UCozgFVglWYQXbvTmGyS739w)**
-
-- **[Forum](http://forum.m5stack.com/)**
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -55,34 +47,6 @@ This unit communicates with M5Core through GROVE B port.
 
 ?> 3. Currently EasyLoader is only suitable for Windows operating system, compatible with M5 system adopts ESP32 as the control core host. Before installing for M5Core, you need to install CP210X driver (you do not need to install with M5StickC as controller)[Click here to view the driver installation tutorial](en/related_documents/M5Burner#install-usb-driver)
 
-
-## Example
-
-### 1. Arduino IDE
-
-*The code below is incomplete(just for usage). To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/BUTTON/Arduino).*
-
-```arduino
-#include <M5Stack.h>
-
-// declaration
-int cur_value = 0;
-
-// initialization
-M5.begin();// init
-pinMode(36, INPUT);// BUTTON Pin
-
-// read data
-cur_value = digitalRead(36);// read the value of BUTTON
-M5.update();
-```
-
-### 2. UIFlow
-
-*If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/BUTTON/UIFlow).*
-
-<img src="assets/img/product_pics/unit/unit_example/BUTTON/example_unit_button_03.png">
-
 ## Schematic
 
 <img src="assets/img/product_pics/unit/button_sch.JPG">
@@ -94,6 +58,18 @@ M5.update();
  <tr><td>BUTTON Unit</td><td>BUTTON Pin</td><td> </td><td>5V</td><td>GND</td></tr>
 </table>
 
+## Example
+
+### 1. Arduino IDE
+
+The code below is incomplete(just for usage). To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/BUTTON/Arduino)
+
+### 2. UIFlow
+
+If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/BUTTON/UIFlow)
+
+<img src="assets/img/product_pics/unit/unit_example/BUTTON/example_unit_button_03.png">
+
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/mini-button-unit';
diff --git a/docs/en/unit/cardkb.md b/docs/en/unit/cardkb.md
index a275164b..cd73f4a2 100644
--- a/docs/en/unit/cardkb.md
+++ b/docs/en/unit/cardkb.md
@@ -1,10 +1,8 @@
-# CardKB {docsify-ignore-all}
+# CardKB
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U035</div>
 
-<img src="assets/img/product_pics/unit/unit_cardkb_01.png" width="30%" height="30%">
-
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/unit_cardkb_01.png"></div>
 
 ## Description
 
@@ -43,13 +41,8 @@ It also can achieve button combination(Sym+Key, Shift+Key, Fn+Key) and output ri
 
 ## Related Link
 
-- **[Offical Video](https://www.youtube.com/channel/UCozgFVglWYQXbvTmGyS739w)**
-
-- **[Forum](http://forum.m5stack.com/)**
-
 - **[CardKB Firmware](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/CARDKB/firmware_328p/CardKeyBoard)**
 
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -68,54 +61,17 @@ It also can achieve button combination(Sym+Key, Shift+Key, Fn+Key) and output ri
 
 <img src="assets\img\product_pics\app\mega328_isp.png" width="30%" height="30%">
 
-
 ## Example
 
 ### 1. Arduino IDE
 
-*To get the code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/CARDKB/Arduino)。*
-
-```arduino
-#include <Wire.h>
-#include <M5Stack.h>
-
-#define CARDKB_ADDR 0x5F
-
-void setup()
-{
-  M5.begin();
-  Serial.begin(115200);
-  Wire.begin();
-  pinMode(5, INPUT);
-  digitalWrite(5, HIGH);
-  M5.Lcd.fillScreen(BLACK);
-  M5.Lcd.setCursor(1, 10);
-  M5.Lcd.setTextColor(YELLOW);
-  M5.Lcd.setTextSize(2);
-  M5.Lcd.printf("IIC Address: 0x5F\n");
-  M5.Lcd.printf(">>");
-}
-void loop()
-{
-  Wire.requestFrom(CARDKB_ADDR, 1);
-  while (Wire.available())
-  {
-    char c = Wire.read(); // receive a byte as characterif
-    if (c != 0)
-    {
-      M5.Lcd.printf("%c", c);
-      Serial.println(c, HEX);
-     // M5.Speaker.beep();
-    }
-  }
-}
-```
+To get the code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/CARDKB/Arduino)
 
 <img src="assets/img/product_pics/unit/unit_example/CARDKB/example_unit_cardkb_01.png">
 
 ### 2. UIFlow
 
-*To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/CARDKB/UIFlow)。*
+To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/CARDKB/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/CARDKB/example_unit_cardkb_02.png">
 
@@ -126,15 +82,6 @@ void loop()
  <tr><td>CardKB</td><td>SCL</td><td>SDA</td><td>5V</td><td>GND</td></tr>
 </table>
 
-## Video
-
-- **CardKB Case - 01**
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/M5stack%20Cardkb.mp4" type="video/mp4">
-</video>
-
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/cardkb-mini-keyboard';
diff --git a/docs/en/unit/catear.md b/docs/en/unit/catear.md
index a2947ea9..182169de 100644
--- a/docs/en/unit/catear.md
+++ b/docs/en/unit/catear.md
@@ -1,10 +1,8 @@
-# CATEAR {docsify-ignore-all}
+# CATEAR
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:A043</div>
 
-<img src="assets/img/product_pics/unit/unit_catear_01.png" width="30%" height="30%"><img src="assets/img/product_pics/unit/unit_catear_02.png" width="30%" height="30%"><img src="assets/img/product_pics/unit/unit_catear_03.png" width="30%" height="30%">
-
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/unit_catear_01.png"><img src="assets/img/product_pics/unit/unit_catear_02.png"></div>
 
 ## Description
 
@@ -25,28 +23,11 @@ Alternative Port: A, B, C
 - 1x CATEAR Unit
 - 1x Grove Cable(1m)
 
-## Weight and Size
-
-- Package size:265mm x 181mm x 25mm
-- Package weight:154g
-
-## Related Link
-
-- **[Offical Video](https://www.youtube.com/channel/UCozgFVglWYQXbvTmGyS739w)**
-
-- **[Forum](http://forum.m5stack.com/)**
-
-Arduino Library realted to RGB LED driving:
-
-- **[FastLED Library](https://github.com/FastLED/FastLED/wiki/Overview)**
-
-- **[FastLED Reference(Chinese version)](http://www.taichi-maker.com/homepage/reference-index/arduino-library-index/fastled-library/)**
-
 ## Example
 
 ### UIFlow
 
-*To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/CATEAR/UIFlow).*
+To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/CATEAR/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/CATEAR/example_unit_catear_01.png">
 
@@ -73,15 +54,6 @@ Arduino Library realted to RGB LED driving:
  <tr><td>CATEAR Unit</td><td> </td><td>CATEAR Pin</td><td>5V</td><td>GND</td></tr>
 </table>
 
-## Video
-
-**CatEAR**
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201812/M5Stick%20CatEar.mp4" type="video/mp4">
-</video>
-
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/m5stack-official-cute-cat-ears-acrylic';
diff --git a/docs/en/unit/color.md b/docs/en/unit/color.md
index 8ffd8192..a806fc96 100644
--- a/docs/en/unit/color.md
+++ b/docs/en/unit/color.md
@@ -1,17 +1,14 @@
-# COLOR {docsify-ignore-all}
+# COLOR
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U009</div>
 
-<img src="assets/img/product_pics/unit/M5GO_Unit_color.png" width="30%" height="30%">
-
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_color.png"></div>
 
 ## Description
 
 **COLOR** is color recognition unit integrated **TCS3472**. Like its namesake, **COLOR** is able to detect color value and return RGB data to the host.
 
 **Identify color principle:**
-
 In the TCS3472, a 3*4 array of filtered photodiodes and a 16 bit analog-to-digital converters are embedded. Of the 12 photodiodes, 3 have red filters, 3 have green filters, 3 have blue filters and 3 have no filter(clear).
 
 <img src="assets/img/product_pics/unit/color/unit_color_07.png">
@@ -64,51 +61,6 @@ This Unit communicates with the M5Core via the GROVE A interface(I2C). Address i
 
 ?>3. Currently EasyLoader is only suitable for Windows operating system, compatible with M5 system adopts ESP32 as the control core host. Before installing for M5Core, you need to install CP210X driver (you do not need to install with M5StickC as controller)[Click here to view the driver installation tutorial](en/related_documents/M5Burner#install-usb-driver)
 
-## Example
-
-### 1. Arduino IDE
-
-*The code below is incomplete. To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/COLOR/Arduino).*
-
-```arduino
-/*
-  Color test
-    hardware: M5Stack
-
-  please install the Adfruit TCS34725 library first ...
-*/
-#include <Wire.h>
-#include <M5Stack.h>
-#include "Adafruit_TCS34725.h"
-
-// declaration
-uint16_t clear, red, green, blue;
-#define commonAnode true // set to false if using a common cathode LED
-
-// new a object
-Adafruit_TCS34725 tcs;
-tcs = Adafruit_TCS34725(TCS34725_INTEGRATIONTIME_50MS,TCS34725_GAIN_4X);
-
-// initialization
-M5.begin(true, false, false);
-tcs.begin();
-tcs.setIntegrationTime(TCS34725_INTEGRATIONTIME_154MS);
-tcs.setGain(TCS34725_GAIN_4X);
-
-// read data
-tcs.getRawData(&red, &green, &blue, &clear);
-```
-
-After burnt this example, PC serial terminal will print original value RGBC(red, green, blue, clear).
-
-<img src="assets/img/product_pics/unit/unit_example/COLOR/example_unit_color_result_01.png">
-
-### 2. UIFlow
-
-*If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/COLOR/UIFlow).*
-
-<img src="assets/img/product_pics/unit/color/color.png">
-
 ## Schematic
 
 <img src="assets/img/product_pics/unit/color_sch.JPG">
@@ -120,13 +72,21 @@ After burnt this example, PC serial terminal will print original value RGBC(red,
  <tr><td>COLOR Unit</td><td>SCL</td><td>SDA</td><td>5V</td><td>GND</td></tr>
 </table>
 
-## Video
+## Example
 
-**COLOR Case - 01**
+### 1. Arduino IDE
 
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201902/Color%20Unit.mp4" type="video/mp4">
-</video>
+The code below is incomplete. To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/COLOR/Arduino)
+
+After burnt this example, PC serial terminal will print original value RGBC(red, green, blue, clear).
+
+<img src="assets/img/product_pics/unit/unit_example/COLOR/example_unit_color_result_01.png">
+
+### 2. UIFlow
+
+If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/COLOR/UIFlow)
+
+<img src="assets/img/product_pics/unit/color/color.png">
 
 <script>
 
diff --git a/docs/en/unit/dac.md b/docs/en/unit/dac.md
index 0c3a2748..f5f77793 100644
--- a/docs/en/unit/dac.md
+++ b/docs/en/unit/dac.md
@@ -1,9 +1,8 @@
-# DAC {docsify-ignore-all}
+# DAC
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U012</div>
 
-<img src="assets/img/product_pics/unit/M5GO_Unit_dac.png" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_dac.png"></div>
 
 ## Description
 
@@ -49,33 +48,11 @@
 
 ### 1. Arduino IDE
 
-*The code below is incomplete(just for usage). To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/DAC/Arduino).*
-
-```arduino
-/*
-    hardware : m5stack uint dac
-    please install adafruit MCP4725 lib
-*/
-#include <Wire.h>
-#include <Adafruit_MCP4725.h>
-
-// new a object
-Adafruit_MCP4725 dac;
-
-// initialization
-dac.begin(0x60);
-dac.setVoltage(2048, false);
-
-// 12bit value , false mean not write EEPROM
-dac.setVoltage(1024, false);// input digital value "1024" to unit
-delay(1000);
-dac.setVoltage(2048, false);// input digital value "2048" to unit
-delay(1000);
-```
+The code below is incomplete(just for usage). To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/DAC/Arduino)
 
 ### 2. UIFlow
 
-*If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/DAC/UIFlow).*
+If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/DAC/UIFlow)
 
 <img src="assets/img/product_pics/unit/dac.png">
 
diff --git a/docs/en/unit/dual_button.md b/docs/en/unit/dual_button.md
index e3cc72f1..07f6ca48 100644
--- a/docs/en/unit/dual_button.md
+++ b/docs/en/unit/dual_button.md
@@ -1,9 +1,8 @@
-# Dual-BUTTON {docsify-ignore-all}
+# Dual-BUTTON
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U025</div>
 
-<img src="assets/img/product_pics/unit/M5GO_Unit_dual_button.png" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_dual_button.png"></div>
 
 ## Description
 
@@ -34,13 +33,6 @@ This unit communicates with M5Core through GROVE B port.
 - Game Controller
 - Remote control switch
 
-## Related Link
-
-- **[Offical Video](https://www.youtube.com/channel/UCozgFVglWYQXbvTmGyS739w)**
-
-- **[Forum](http://forum.m5stack.com/)**
-
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -57,29 +49,11 @@ This unit communicates with M5Core through GROVE B port.
 
 ### 1. Arduino IDE
 
-*The code below is incomplete(just for usage). TO get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/DUAL_BUTTON/Arduino).*
-
-```arduino
-#include <M5Stack.h>
-
-// declaration
-int cur_value_red = 0;
-int cur_value_blue = 0;
-
-// initialization
-M5.begin();
-pinMode(26, INPUT);// Red Button Pin setting
-pinMode(36, INPUT);// Blue Button Pin setting
-
-// read data
-cur_value_red = digitalRead(26);
-cur_value_blue = digitalRead(36);
-M5.update();
-```
+The code below is incomplete(just for usage). TO get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/DUAL_BUTTON/Arduino)
 
 ### 2. UIFlow
 
-*To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/DUAL_BUTTON/UIFlow).*
+To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/DUAL_BUTTON/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/DUAL_BUTTON/example_unit_dual_button_05.png">
 
@@ -94,14 +68,6 @@ M5.update();
  <tr><td>DUAL_BUTTON Unit</td><td>Blue Button Pin</td><td>Red Button Pin</td><td>5V</td><td>GND</td></tr>
 </table>
 
-## Video
-
-**Joystick Case - Page flipping and selection of menu interface**
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201811/M5Game-VARIOUS2.mp4" type="video/mp4">
-</video>
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/mini-dual-button-unit';
diff --git a/docs/en/unit/earth.md b/docs/en/unit/earth.md
index 4f924c6c..cc8e7a04 100644
--- a/docs/en/unit/earth.md
+++ b/docs/en/unit/earth.md
@@ -1,10 +1,8 @@
-# EARTH {docsify-ignore-all}
+# EARTH
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U019</div>
 
-<img src="assets/img/product_pics/unit/M5GO_Unit_earth.png" width="30%" height="30%">
-
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_earth.png"></div>
 
 ## Description
 
@@ -12,9 +10,7 @@
 
 The soil moisture sensor is pretty straight forward to use. The two large exposed pads function as probes for the sensor, together acting as a variable resistor. The higher moisture that is in the soil means the better the conductivity between the two so that the sensor will result in a lower resistance, and a higher SIG out.
 
-You can read the moisture in soil by ADC.
-Inside this Unit we put an extra potentiometers to
-change the measurement range.
+You can read the moisture in soil by ADC.Inside this Unit we put an extra potentiometers tochange the measurement range.
 
 <img src="assets/img/product_pics/unit/unit_example/EARTH/example_unit_earth_03.png" width="50%" height="50%">
 
@@ -27,8 +23,6 @@ change the measurement range.
 -  Product Size：64.4mm x 24.1mm x 8.1mm
 -  Product weight：9.8g
 
-
-
 ## Include
 
 - 1x EARTH unit
@@ -38,12 +32,6 @@ change the measurement range.
 
 - Potted soil moisture monitoring
 
-## Related Link
-
-- **[Offical Video](https://www.youtube.com/channel/UCozgFVglWYQXbvTmGyS739w)**
-
-- **[Forum](http://forum.m5stack.com/)**
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -60,31 +48,11 @@ change the measurement range.
 
 ### 1. Arduino IDE
 
-*The code below is incomplete. To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/EARTH/Arduino).*
-
-```arduino
-#include <M5Stack.h>
-
-void setup() {
-  M5.begin();
-  dacWrite(25, 0);//disable the speak noise
-
-  pinMode(26, INPUT);// set digital pin
-}
-
-uint16_t analogRead_value = 0;
-uint16_t digitalRead_value = 0;
-
-void loop() {
-  analogRead_value = analogRead(36);// read analog value of EARTH
-  digitalRead_value = digitalRead(26);// read digital value of EARTH
-}
-
-```
+The code below is incomplete. To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/EARTH/Arduino)
 
 ### 2. UIFlow
 
-*To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/EARTH/UIFlow).*
+To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/EARTH/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/EARTH/example_unit_earth_04.png">
 
@@ -107,12 +75,6 @@ void loop() {
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/LukeVideo/(M5stack%20x%20Arduino)%20Do%20plants%20have%20feelings.mp4" type="video/mp4">
 </video>
 
-**EARTH Case - Monitor vase soil moisture 2**
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/Earth%20Unit.mp4" type="video/mp4">
-</video>
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/earth-sensor-unit';
diff --git a/docs/en/unit/env.md b/docs/en/unit/env.md
index 9b010c83..d03445a8 100644
--- a/docs/en/unit/env.md
+++ b/docs/en/unit/env.md
@@ -1,10 +1,8 @@
-# ENV {docsify-ignore-all}
+# ENV
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U001</div>
 
-<img src="assets/img/product_pics/unit/M5GO_Unit_env.png" width="30%" height="30%">
-
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_env.png"></div>
 
 ## Description
 
@@ -13,7 +11,6 @@
 DHT12 is a upgradation version of DHT11 humidity temperature sensor, fully downward compatible, more precise and add I2C interface.
 BMP280 is an absolute barometric pressure sensor especially designed for mobile applications, offers highest flexibility to optimize the device regarding power consumption, resolution and filter performance.
 
-
  **I2C address:DHT12(0x5C)、BMP280(0x76)**
 
 ## Feature
@@ -45,7 +42,6 @@ BMP280 is an absolute barometric pressure sensor especially designed for mobile
 
 - **[DHT12 Datasheet](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/hat/DHT12_en.pdf)**
 
-
 ## EasyLoader
 
 >EasyLoader is a concise and fast program writer, which has a built-in case program related to the product. It can be burned to the main control by simple steps to perform a series of function verification. Please install the corresponding driver according to the device type. M5Core host [Please click here to view the CP210X driver installation tutorial](en/arduino/arduino_development), M5StickC/V/T/ATOM series can be used without driver)
@@ -72,7 +68,6 @@ BMP280 is an absolute barometric pressure sensor especially designed for mobile
     </div>
 </div>
 
-
 ## Example
 
 ### 1. Arduino IDE
@@ -81,36 +76,11 @@ This is a ENV example, implemented reading temperature, humidity and atmospheric
 1, Before compiling, please install `Adafruit BMP280 Library`
 2, copy `Adafruit_Sensor.h` to `C:\Users\<user_name>\Documents\Arduino\libraries\Adafruit_BMP280_Library`
 
-*The code below is incomplete. To get the complete code, please click [here](https://github.com/m5stack/M5Stack/tree/master/examples/Unit/ENV).*
-
-```arduino
-/*
-    Install Adafruit BMP280 Library first.
-*/
-#include <M5Stack.h>
-#include "DHT12.h"
-#include <Wire.h> //The DHT12 uses I2C comunication.
-#include <Adafruit_Sensor.h>
-#include <Adafruit_BMP280.h>
-
-// new two objects
-DHT12 dht12;
-Adafruit_BMP280 bme;
-
-// initialization
-M5.begin();
-Wire.begin();
-bme.begin();
-
-// read data
-float tmp = dht12.readTemperature();
-float hum = dht12.readHumidity();
-float pressure = bme.readPressure();
-```
+The code below is incomplete. To get the complete code, please click [here](https://github.com/m5stack/M5Stack/tree/master/examples/Unit/ENV)
 
 ### 2. UIFlow
 
-*If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/ENV/UIFlow).*
+If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/ENV/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/ENV/example_unit_env_05.png" width="60%">
 
diff --git a/docs/en/unit/esp32cam.md b/docs/en/unit/esp32cam.md
index dcd51fb2..fea09a2d 100644
--- a/docs/en/unit/esp32cam.md
+++ b/docs/en/unit/esp32cam.md
@@ -1,10 +1,8 @@
-# ESP32CAM {docsify-ignore-all}
+# ESP32CAM
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U007</div>
 
-<img src="assets/img/product_pics/unit/unit_esp32cam_01.png" width="30%" height="30%"><img src="assets/img/product_pics/unit/unit_esp32cam_02.png" width="65%" height="65%">
-
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/unit_esp32cam_01.png"><img src="assets/img/product_pics/unit/unit_esp32cam_02.png"></div>
 
 ## Description
 
@@ -18,16 +16,6 @@ what this software can do?
 - Open up web browser on your phone and visit <mark>192.168.4.1</mark>
 - Then here comes the picture. Video is about 5-6 frames per senconds. not super fast.
 
-The hardware also comes with some reserved weld pad, just in case you want put these chips back on board.
-- 9-axis gyroscope (MPU6050)
-- pressure sensor (BME280)
-- **Digital silicon microphone (SPM1423)**
-- Lipo Battery power pins
-
-
-<img src="assets/img/product_pics/unit/unit_esp32cam_05.png" width="50%"><img src="assets/img/product_pics/unit/unit_esp32cam_06.png" width="50%">
-
-
 ## Product Features
 
 - ESP32 specifications
@@ -149,12 +137,6 @@ The hardware also comes with some reserved weld pad, just in case you want put t
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_table/camera_compare.jpg">
 
-## Related Link
-
-- **[Offical Video](https://www.youtube.com/channel/UCozgFVglWYQXbvTmGyS739w)**
-
-- **[Forum](http://forum.m5stack.com/)**
-
 - **Datasheet** - [ESP32](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/core/esp32_datasheet_en.pdf) - [OV2640](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/unit/OV2640DS_en.pdf)
 
 ## Example
@@ -169,8 +151,6 @@ The hardware also comes with some reserved weld pad, just in case you want put t
 
  - **[Serial communication-M5Core](https://github.com/m5stack/m5stack-cam-psram/tree/master/uart/arduino)**（The serial communication routine is the communication between the camera and the M5Core.）
 
-
-
 ## Video
 
 **ESP32CAM Case - 01**
@@ -179,12 +159,6 @@ The hardware also comes with some reserved weld pad, just in case you want put t
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201903/esp32cam_webcam_01.mp4" type="video/mp4">
 </video>
 
-**M5Camera Case - 02**
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/The%20M5Camera%20works.mp4" type="video/mp4">
-</video>
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/esp32-camera';
diff --git a/docs/en/unit/extio.md b/docs/en/unit/extio.md
index dcdb35e5..6f0ad154 100644
--- a/docs/en/unit/extio.md
+++ b/docs/en/unit/extio.md
@@ -1,10 +1,8 @@
-# EXT.IO {docsify-ignore-all}
+# EXT.IO
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U011</div>
 
-<img src="assets/img/product_pics/unit/unit_extio_01.png" width="30%" height="30%"><img src="assets/img/product_pics/unit/unit_extio_02.png" width="30%" height="30%">
-
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/unit_extio_01.png"><img src="assets/img/product_pics/unit/unit_extio_02.png"></div>
 
 ## Description
 
@@ -49,52 +47,11 @@ It’s difficult to foresee the needs of your project from the start. EXT.IO is
 
 ### 1. Arduino IDE
 
-*To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/EXTIO/Arduino)。*
-
-```arduino
-/*
-    Connect to GRVOE A on M5Core
-*/
-#include <M5Stack.h>
-#include "PCA9554.h" // Load the PCA9554 Library
-
-// new a object
-PCA9554 ioCon1(0x27);
-
-uint8_t res;
-
-// initialization
-
-M5.begin();
-Wire.begin();
-ioCon1.twiWrite(21, 22); // GROVE A
-delay(10);
-res = 1;
-ioCon1.twiRead(res);
-Serial.printf("res:%d\r\n", res);
-ioCon1.portMode0(ALLOUTPUT); //Set the port as all output
-
-// set the specific pin
-ioCon1.digitalWrite0(0, HIGH);
-ioCon1.digitalWrite0(1, HIGH);
-ioCon1.digitalWrite0(2, HIGH);
-ioCon1.digitalWrite0(3, HIGH);
-ioCon1.digitalWrite0(4, HIGH);
-ioCon1.digitalWrite0(5, HIGH);
-ioCon1.digitalWrite0(6, HIGH);
-ioCon1.digitalWrite0(7, HIGH);
-
-// write 0-7 HIGHT
-Serial.println(ioCon1.digitalWritePort0(0xff));
-
-// write 0-7 LOW
-Serial.println(ioCon1.digitalWritePort0(0x00));
-```
-<img src="assets/img/product_pics/unit/unit_extio_03.png">
+To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/EXTIO/Arduino)
 
 ### 2. UIFlow
 
-*To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/EXTIO/UIFlow).*
+To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/EXTIO/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/EXTIO/example_unit_extio_01.png">
 
diff --git a/docs/en/unit/finger.md b/docs/en/unit/finger.md
index 7277abe0..c8691673 100644
--- a/docs/en/unit/finger.md
+++ b/docs/en/unit/finger.md
@@ -1,9 +1,8 @@
-# FINGER {docsify-ignore-all}
+# FINGER
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U008</div>
 
-<img src="assets/img/product_pics/unit/unit_finger_01.png" width="30%" height="30%"><img src="assets/img/product_pics/unit/unit_finger_02.png" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/unit_finger_01.png"><img src="assets/img/product_pics/unit/unit_finger_02.png"></div>
 
 ## Description
 
@@ -34,9 +33,6 @@ UART settings:
 - Operating temperature:     -10°C - 60°C
 - Operating humidity:        20% - 80%
 
-
-
-
 ## Include
 
 - 1x FINGER Unit
@@ -69,7 +65,6 @@ UART settings:
  <tr><td>FINGER Unit</td><td>TXD</td><td>RXD</td><td>5V</td><td>GND</td></tr>
 </table>
 
-
 ## EasyLoader
 
 >EasyLoader is a concise and fast program writer, which has a built-in case program related to the product. It can be burned to the main control by simple steps to perform a series of function verification. Please install the corresponding driver according to the device type. M5Core host [Please click here to view the CP210X driver installation tutorial](en/arduino/arduino_development), M5StickC/V/T/ATOM series can be used without driver)
@@ -96,65 +91,18 @@ UART settings:
     </div>
 </div>
 
-
-
 ## Example
 
 ### 1. Arduino IDE
 
-*The code below is incomplete(just for usage). To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/FINGER/Arduino).*
-
-```arduino
-/*
-    Connect to GRVOE C on M5Core
-*/
-#include <M5Stack.h>
-#include "finger.h"
-
-uint8_t userNum; //User number
-uint8_t res1;
-
-// result for "res1"
-#define ACK_SUCCESS    0x00
-#define ACK_FAIL       0x01
-#define ACK_FULL       0x04
-#define ACK_NOUSER     0x05
-#define ACK_USER_EXIST 0x07
-#define ACK_TIMEOUT    0x08
-
-// initialization
-M5.begin();
-Serial2.begin(19200, SERIAL_8N1, 16, 17);
-userNum = fpm_getUserNum();
-M5.Lcd.print("userNum:");
-M5.Lcd.println(userNum);
-
-// add a new user
-res1 = fpm_addUser(userNum,1); //get function result
-
-// compare your finger
-res1 = fpm_compareFinger();
-
-// delete all user
-res1 = fpm_deleteAllUser();
-```
+The code below is incomplete(just for usage). To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/FINGER/Arduino)
 
 ### 2. UIFlow
 
-*If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/FINGER/UIFlow).*
+If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/FINGER/UIFlow)
 
 <img src="assets/img/product_pics/unit/fingerprint.png">
 
-
-## Video
-
-- **FINGER Application**
-
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/Fingerprint%20Unit.mp4" type="video/mp4">
-</video>
-
 - **FINGER UIflow Video Tutorial**
 
 <video class="video_size" controls>
diff --git a/docs/en/unit/gps.md b/docs/en/unit/gps.md
index 51f2ba21..3669e3fb 100644
--- a/docs/en/unit/gps.md
+++ b/docs/en/unit/gps.md
@@ -1,10 +1,8 @@
-# GPS {docsify-ignore-all}
+# GPS
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U032</div>
 
-<img src="assets/img/product_pics/unit/unit_gps_01.png" width="30%" height="30%"><img src="assets/img/product_pics/unit/unit_gps_02.png" width="30%" height="30%">
-
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/unit_gps_01.png"><img src="assets/img/product_pics/unit/unit_gps_02.png"></div>
 
 ## Description
 
@@ -70,7 +68,6 @@ UART settings :
 
 - **[GnssToolKit3(Windows Version)](http://www.icofchina.com/d/file/xiazai/2018-05-23/2b29a8da746eec0ef1dcd9deae895298.zip)**
 
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -87,55 +84,11 @@ UART settings :
 
 ### 1. Arduino IDE
 
-*To get the complete code `GPSRaw.ino`, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/GPS).*
-
-```arduino
-#include <M5Stack.h>
-
-/* By default, GPS is connected with M5Core through UART2 */
-HardwareSerial GPSRaw(2);
-
-void setup() {
-  M5.begin();
-  GPSRaw.begin(9600);// GPS init
-  Serial.println("hello");
-  termInit();
-}
-
-void loop() {
-  // put your main code here, to run repeatedly:
-  if(Serial.available()) {
-    int ch = Serial.read();
-    GPSRaw.write(ch);
-  }
-  if(GPSRaw.available()) {
-    int ch = GPSRaw.read();// read GPS information
-    Serial.write(ch);
-    termPutchar(ch);
-  }
-}
-```
-
-After burnt the example code `GPSRaw.ino`, m5core and PC serial terminal will display following information
-
-```
-$GNGGA,063012.000,2234.87140,N,11357.22414,E,1,06,4.2,7.3,M,0.0,M,,*7D
-$GNGLL,2234.87140,N,11357.22414,E,063012.000,A,A*4C
-$GPGSA,A,3,01,09,11,18,23,,,,,,,,6.3,4.2,4.7*32
-$BDGSA,A,3,13,,,,,,,,,,,,6.3,4.2,4.7*21
-$GPGSV,3,1,10,01,54,164,33,04,,,22,08,46,019,,09,23,230,24*40
-$GPGSV,3,2,10,11,81,200,12,18,65,110,26,23,14,195,25,27,18,041,*78
-$GPGSV,3,3,10,28,10,300,15,30,33,319,*7C
-$BDGSV,1,1,01,13,43,195,29*5A
-$GNRMC,063012.000,A,2234.87140,N,11357.22414,E,0.69,171.74,240419,,,A*7A
-$GNVTG,171.74,T,,M,0.69,N,1.27,K,A*2C
-$GNZDA,063012.000,24,04,2019,00,00*46
-$GPTXT,01,01,01,ANTENNA OPEN*25
-```
+To get the complete code `GPSRaw.ino`, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/GPS)
 
 ### 2. UIFlow
 
-*If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/GPS/UIFlow).*
+If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/GPS/UIFlow)
 
 <img src="assets/img/product_pics/unit/gps/gps.png">
 
diff --git a/docs/en/unit/heart.md b/docs/en/unit/heart.md
index 40c872fe..b6646ba2 100644
--- a/docs/en/unit/heart.md
+++ b/docs/en/unit/heart.md
@@ -2,9 +2,7 @@
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U029</div>
 
-<img src="assets/img/product_pics/unit/unit_heart_01.png" width="30%" height="30%"> <img src="assets/img/product_pics/unit/unit_heart_02.png" width="30%" height="30%">
-
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/unit_heart_01.png"> <img src="assets/img/product_pics/unit/unit_heart_02.png"></div>
 
 ## Description
 
@@ -56,58 +54,9 @@ MAX30100 is a complete pulse oximetry and heartrate sensor system solution desig
 
 ## Example
 
-### 1. Arduino IDE
+### Arduino IDE
 
-*To get the code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/HEART/Arduino).*
-
-```arduino
-/*
-    Install MAX30100lib Library first.
-
-    MAX30100_RawData.ino
-*/
-#include <Wire.h>
-#include "MAX30100.h"
-
-#define SAMPLING_RATE   MAX30100_SAMPRATE_100HZ
-#define IR_LED_CURRENT  MAX30100_LED_CURR_50MA
-#define RED_LED_CURRENT MAX30100_LED_CURR_27_1MA
-// set HIGHRES_MODE to true only
-// when setting PULSE_WIDTH to MAX30100_SPC_PW_1600US_16BITS
-#define PULSE_WIDTH MAX30100_SPC_PW_1600US_16BITS
-#define HIGHRES_MODE    true
-
-// new a object
-MAX30100 sensor;
-
-void setup()
-{
-    Serial.begin(115200);
-    Serial.print("Initializing MAX30100..");
-    if (!sensor.begin()) {
-        Serial.println("FAILED");
-        for(;;);
-    } else {
-        Serial.println("SUCCESS");
-    }
-    sensor.setMode(MAX30100_MODE_SPO2_HR);
-    sensor.setLedsCurrent(IR_LED_CURRENT, RED_LED_CURRENT);
-    sensor.setLedsPulseWidth(PULSE_WIDTH);
-    sensor.setSamplingRate(SAMPLING_RATE);
-    sensor.setHighresModeEnabled(HIGHRES_MODE);
-}
-
-void loop()
-{
-    uint16_t ir, red;
-    sensor.update();
-    while (sensor.getRawValues(&ir, &red)) {
-        Serial.print(ir);
-        Serial.print('\t');
-        Serial.println(red);
-    }
-}
-```
+To get the code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/HEART/Arduino)
 
 <img src="assets/img/product_pics/unit/unit_example/HEART/example_unit_heart_01.png">
 
diff --git a/docs/en/unit/hex.md b/docs/en/unit/hex.md
index aef0097c..1a1546a6 100644
--- a/docs/en/unit/hex.md
+++ b/docs/en/unit/hex.md
@@ -1,14 +1,13 @@
-# HEX {docsify-ignore-all}
+# HEX
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:A045</div>
 
-<img src="assets\img\product_pics\unit\hex\unit_hex_01.webp" width="30%"><img <img src="assets\img\product_pics\unit\hex\unit_hex_02.webp" width="30%"><img src="assets\img\product_pics\unit\hex\unit_hex_03.webp" width="30%">
+<div class="product_pic"><img src="assets\img\product_pics\unit\hex\unit_hex_01.webp"><img src="assets\img\product_pics\unit\hex\unit_hex_02.webp" ></div>
 
 ## Description
 
 **HEX** is a hexagona RGB LED panel. Total 37 RGB LEDs. With a input port and a output port, you can have mutiple of them in series connection.
 
-
 This is how LEDs layout in the panel. Pay attention to the sequence in your code.
 
 <img src="assets\img\product_pics\unit\hex\unit_hex_05.webp" width="50%">
@@ -28,12 +27,6 @@ This is how LEDs layout in the panel. Pay attention to the sequence in your code
 - Package size:50mm x 80mm x 10mm
 - Package weight:6g
 
-## Related Link
-
-- **[Offical Video](https://www.youtube.com/channel/UCozgFVglWYQXbvTmGyS739w)**
-
-- **[Forum](http://forum.m5stack.com/)**
-
 ## EasyLoader
 
 >EasyLoader is a concise and fast program writer, which has a built-in case program related to the product. It can be burned to the main control by simple steps to perform a series of function verification. Please install the corresponding driver according to the device type. M5Core host [Please click here to view the CP210X driver installation tutorial](en/arduino/arduino_development), M5StickC/V/T/ATOM series can be used without driver)
@@ -60,7 +53,6 @@ This is how LEDs layout in the panel. Pay attention to the sequence in your code
     </div>
 </div>
 
-
 ## Example
 
 ### 1. Arduino IDE
@@ -74,49 +66,13 @@ RGB LED Library on Arduino
 
 - **[FastLED Reference(Chinese version)](http://www.taichi-maker.com/homepage/reference-index/arduino-library-index/fastled-library/)**
 
-*To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/HEX/Arduino)。*
-
-```arduino
-/*
-    Install FastLED library first.(HEX is connected to GROVE A)
- */
-#include <M5Stack.h>
-#include "FastLED.h"
-
-#define Neopixel_PIN    21
-#define NUM_LEDS    37
-
-CRGB leds[NUM_LEDS];
-uint8_t gHue = 0;
-
-void setup() {
-  Serial.begin(115200);
-  M5.begin();
-  M5.Lcd.clear(BLACK);
-  M5.Lcd.setTextColor(YELLOW); M5.Lcd.setTextSize(2); M5.Lcd.setCursor(40, 0);
-  M5.Lcd.println("HEX Example");
-  M5.Lcd.setTextColor(WHITE);
-  M5.Lcd.setCursor(0, 25);
-  M5.Lcd.println("Display rainbow effect");
-
-  // Neopixel initialization
-  FastLED.addLeds<WS2811,Neopixel_PIN,GRB>/
-                        (leds, NUM_LEDS).setCorrection(TypicalLEDStrip);
-  FastLED.setBrightness(10);
-}
-
-void loop(){
-    fill_rainbow( leds, NUM_LEDS, gHue, 7);
-    FastLED.show();// must be executed for neopixel becoming effective
-    EVERY_N_MILLISECONDS( 20 ) { gHue++; }
-}
-```
+To get the complete code,please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/HEX/Arduino)
 
 <img src="assets/img/product_pics/unit/unit_example/HEX/example_unit_dual_button_03.png">
 
 ### UIFlow
 
-*To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/HEX/UIFlow).*
+To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/HEX/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/HEX/example_unit_dual_button_01.png" width="50%" height="50%"> <img src="assets/img/product_pics/unit/unit_example/HEX/example_unit_dual_button_02.png" width="30%" height="30%">
 
diff --git a/docs/en/unit/hub.md b/docs/en/unit/hub.md
index 3cd30208..6fb0bf3b 100644
--- a/docs/en/unit/hub.md
+++ b/docs/en/unit/hub.md
@@ -1,10 +1,8 @@
-# HUB {docsify-ignore-all}
+# HUB
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U006</div>
 
-<img src="assets/img/product_pics/unit/M5GO_Unit_hub.png" width="30%" height="30%">
-
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_hub.png"></div>
 
 ## Description
 
@@ -23,17 +21,10 @@ Notice: **HUB** is just a hardware expander, if you are looking for hardware and
 - 1x HUB Unit
 - 1x Grove Cable
 
-## Related Link
-
-- **[Offical Video](https://www.youtube.com/channel/UCozgFVglWYQXbvTmGyS739w)**
-
-- **[Forum](http://forum.m5stack.com/)**
-
 ## Schematic
 
 <img src="assets/img/product_pics/unit/hub_sch.JPG">
 
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/mini-hub-module';
diff --git a/docs/en/unit/ir.md b/docs/en/unit/ir.md
index 1218b28e..6801a213 100644
--- a/docs/en/unit/ir.md
+++ b/docs/en/unit/ir.md
@@ -1,15 +1,12 @@
-# IR {docsify-ignore-all}
+# IR
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U002</div>
 
-<img src="assets/img/product_pics/unit/M5GO_Unit_ir.png" width="30%" height="30%">
-
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_ir.png"></div>
 
 ## Description
 
 **IR** is an pair of infrared photoelectric. Also from M5Go Kit, Contains 1x infrared emitter and 1x receiver.
-
 IR remote control is widely used in consumer electronics,it can be used to operate devices such as a television set, DVD player, or other home appliance, from a short distance. Since this unit comes with emitter and receiver, you can practice not only on IR encode but also on IR decode.
 
 ## Product Features
@@ -27,12 +24,6 @@ IR remote control is widely used in consumer electronics,it can be used to opera
 - 1x IR Unit
 - 1x Grove Cable
 
-## Related Link
-
-- **[Offical Video](https://www.youtube.com/channel/UCozgFVglWYQXbvTmGyS739w)**
-
-- **[Forum](http://forum.m5stack.com/)**
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -49,27 +40,11 @@ IR remote control is widely used in consumer electronics,it can be used to opera
 
 ### 1. Arduino IDE
 
-*The code below is incomplete. TO get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/IR/Arduino).*
-
-```arduino
-#include <M5Stack.h>
-
-// declaration
-int cur_recv_value = 0;
-
-// initialization
-M5.begin();
-pinMode(ir_recv_pin, INPUT);// receiver pin
-pinMode(ir_send_pin, OUTPUT);// transmitter pin
-digitalWrite(ir_send_pin, 1);// send infrared light
-
-// read data
-cur_recv_value = digitalRead(ir_recv_pin);// read the status of receiver
-```
+To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/IR/Arduino)
 
 ### 2. UIFlow
 
-*To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/IR/UIFlow).*
+To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/IR/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/IR/example_unit_ir_03.png">
 
diff --git a/docs/en/unit/joystick.md b/docs/en/unit/joystick.md
index b2a75eb7..b7868b96 100644
--- a/docs/en/unit/joystick.md
+++ b/docs/en/unit/joystick.md
@@ -1,10 +1,8 @@
-# JOYSTICK {docsify-ignore-all}
+# JOYSTICK
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U024</div>
 
-<img src="assets/img/product_pics/unit/M5GO_Unit_joystick_01.png" width="30%" height="30%">
-
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_joystick_01.png"></div>
 
 ## Description
 
@@ -37,12 +35,6 @@ This Unit communicates with the M5Core via the GROVE A interface. It's I2C addre
 - Game Controller
 - Robot remote control
 
-## Related Link
-
-- **[Offical Video](https://www.youtube.com/channel/UCozgFVglWYQXbvTmGyS739w)**
-
-- **[Forum](http://forum.m5stack.com/)**
-
 ## EasyLoader
 
 >EasyLoader is a concise and fast program writer, which has a built-in case program related to the product. It can be burned to the main control by simple steps to perform a series of function verification. Please install the corresponding driver according to the device type. M5Core host [Please click here to view the CP210X driver installation tutorial](en/arduino/arduino_development), M5StickC/V/T/ATOM series can be used without driver)
@@ -80,40 +72,13 @@ This Unit communicates with the M5Core via the GROVE A interface. It's I2C addre
 
 ### 1. Arduino IDE
 
-*The code below is incomplete(just for usage).To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/JOYSTICK/Arduino).*
-
-```arduino
-#include <M5Stack.h>
-#include "Wire.h"
-
-#define JOY_ADDR 0x52
-
-// declaration
-uint8_t x_data, y_data, button_data;
-char data[100];
-
-// initialization
-M5.begin();
-M5.Lcd.clear();
-dacWrite(25, 0);//disable the speak noise
-Wire.begin(21, 22, 400000);
-
-
-// read data
-Wire.requestFrom(JOY_ADDR, 3);
-if (Wire.available()) {
-  x_data = Wire.read();// X(range: 10~250)
-  y_data = Wire.read();// Y(range: 10~250)
-  button_data = Wire.read();// Z(0: released 1: pressed)
-  sprintf(data, "x:%d y:%d button:%d\n", x_data, y_data, button_data);
-}
-```
+The code below is incomplete(just for usage).To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/JOYSTICK/Arduino)
 
 <img src="assets/img/product_pics/unit/unit_example/JOYSTICK/example_unit_joystick_04.png">
 
 ### 2. UIFlow
 
-*To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/JOYSTICK/UIFlow).*
+To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/JOYSTICK/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/JOYSTICK/example_unit_joystick_03.png">
 
@@ -128,20 +93,6 @@ if (Wire.available()) {
  <tr><td>JOYSTICK Unit</td><td>SCL</td><td>SDA</td><td>5V</td><td>GND</td></tr>
 </table>
 
-## Video
-
-**Joystick Case - controll wheelchair**
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201812/M5Stack%20Joystick.mp4" type="video/mp4">
-</video>
-
-**Joystick Case - Page flipping and selection of menu interface**
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/Control%20M5%20With%20Joystick.mp4" type="video/mp4">
-</video>
-
 
 <script>
 
diff --git a/docs/en/unit/laser-rx.md b/docs/en/unit/laser-rx.md
index 1cf2172d..acc03cef 100644
--- a/docs/en/unit/laser-rx.md
+++ b/docs/en/unit/laser-rx.md
@@ -1,11 +1,8 @@
-# LASER.RX {docsify-ignore-all}
+# LASER.RX
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U065</div>
 
-<img src="assets\img\product_pics\unit\laser_rx\unit_laser_rx_01.jpg" width="30%" height="30%">
-<img src="assets\img\product_pics\unit\laser_rx\unit_laser_rx_02.jpg" width="30%" height="30%">
-
-
+<div class="product_pic"><img src="assets\img\product_pics\unit\laser_rx\unit_laser_rx_01.jpg"><img src="assets\img\product_pics\unit\laser_rx\unit_laser_rx_02.jpg"></div>
 
 ## Description
 
@@ -33,7 +30,6 @@ Two parallel beams are needed, one for transmission and one for reception. There
 
 - Laser communication system on space. 
 
-
 ## Schematic
 
 <img src="assets/img/product_pics/unit/laser_rx/unit_laser_rx_04.jpg" width="50%" height="50%">
@@ -54,51 +50,7 @@ Two parallel beams are needed, one for transmission and one for reception. There
 
 ### 1. Arduino IDE
 
-*To get complete code, please click [here](https://github.com/m5stack/M5Stack/tree/master/examples/Unit/LASER).*
-
-```arduino
-/* This demo is for LASER.TX and LASER.RX, utilized UART for transmittion and reception of
- laser signals. In order to get the result of this demo, you will need to connect LASER.TX 
- and LASER.RX with PORTC(blue) respectively onto two different M5Cores with M5GO bases on
-  bottom. Then flash the demo into both M5Core device. 
-  When testing the demo, you need to point the TX unit to RX, and press the button TX connected 
-  device. RX connected device will reponse with a display,and will show what is received . 
-  See this link for more detals: https://m5stack.oss-cn-shenzhen.aliyuncs.com/EasyLoader/Unit/LASER/EasyLoader_LASER_RX.exe
- */
-
-#include <M5Stack.h>
-
-char ch;
-// serial 2 write and read
-//#define RX 
-void setup() {
-  M5.begin();
-  Serial.begin(115200);
-  // Serial2.begin(unsigned long baud, uint32_t config, int8_t rxPin, int8_t txPin, bool invert)
-  Serial2.begin(9600, SERIAL_8N1, 16, 17);
-
-}
-
-void loop() {
-M5.update();
-
-  if (M5.BtnA.wasReleased()) {
-    ch = 'A';
-    Serial2.write(ch);
-  } else if (M5.BtnB.wasReleased()) {
-    ch = 'B';
-    Serial2.write(ch);
-  } else if (M5.BtnC.wasReleased()) {
-    ch = 'C';
-    Serial2.write(ch);
-  }
-  M5.update();
- if(Serial2.available()) {
-    char ch = Serial2.read();
-    M5.Lcd.print(ch);
- }
-}
-```
+To get complete code, please click [here](https://github.com/m5stack/M5Stack/tree/master/examples/Unit/LASER)
 
 ### 2. UIFlow
 
@@ -111,15 +63,6 @@ M5.update();
  <tr><td>LASER_RX</td><td>RX</td><td>/</td><td>5V</td><td>GND</td></tr>
 </table>
 
-
-## Video
-**Demo** 
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/Unit/LASER-TX-RX.mp4" type="video/mp4" >
-</video>
-
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/laser-rx-unit';
diff --git a/docs/en/unit/laser-tx.md b/docs/en/unit/laser-tx.md
index a1215a00..c7f7ddf5 100644
--- a/docs/en/unit/laser-tx.md
+++ b/docs/en/unit/laser-tx.md
@@ -1,11 +1,8 @@
-# LASER.TX {docsify-ignore-all}
+# LASER.TX
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U066</div>
 
-<img src="assets\img\product_pics\unit\laser_tx\unit_laser_tx_01.jpg" width="30%" height="30%">
-<img src="assets\img\product_pics\unit\laser_tx\unit_laser_tx_02.jpg" width="30%" height="30%">
-
-
+<div class="product_pic"><img src="assets\img\product_pics\unit\laser_tx\unit_laser_tx_01.jpg"><img src="assets\img\product_pics\unit\laser_tx\unit_laser_tx_02.jpg"></div>
 
 ## Description
 
@@ -55,51 +52,7 @@ Port type of this unit is PORTB.
 
 ### 1. Arduino IDE
 
-*To get complete code, please click [here](https://github.com/m5stack/M5Stack/tree/master/examples/Unit/LASER).*
-
-```arduino
-/* This demo is for LASER.TX and LASER.RX, utilized UART for transmittion and reception of
- laser signals. In order to get the result of this demo, you will need to connect LASER.TX 
- and LASER.RX with PORTC(blue) respectively onto two different M5Cores with M5GO bases on
-  bottom. Then flash the demo into both M5Core device. 
-  When testing the demo, you need to point the TX unit to RX, and press the button TX connected 
-  device. RX connected device will reponse with a display,and will show what is received . 
-  See this link for more detals: https://m5stack.oss-cn-shenzhen.aliyuncs.com/EasyLoader/Unit/LASER/EasyLoader_LASER_RX.exe
- */
-
-#include <M5Stack.h>
-
-char ch;
-// serial 2 write and read
-//#define RX 
-void setup() {
-  M5.begin();
-  Serial.begin(115200);
-  // Serial2.begin(unsigned long baud, uint32_t config, int8_t rxPin, int8_t txPin, bool invert)
-  Serial2.begin(9600, SERIAL_8N1, 16, 17);
-
-}
-
-void loop() {
-M5.update();
-
-  if (M5.BtnA.wasReleased()) {
-    ch = 'A';
-    Serial2.write(ch);
-  } else if (M5.BtnB.wasReleased()) {
-    ch = 'B';
-    Serial2.write(ch);
-  } else if (M5.BtnC.wasReleased()) {
-    ch = 'C';
-    Serial2.write(ch);
-  }
-  M5.update();
- if(Serial2.available()) {
-    char ch = Serial2.read();
-    M5.Lcd.print(ch);
- }
-}
-```
+To get complete code, please click [here](https://github.com/m5stack/M5Stack/tree/master/examples/Unit/LASER)
 
 ### 2. UIFlow
 
@@ -112,14 +65,6 @@ M5.update();
  <tr><td>LASER_TX</td><td>/</td><td>TX</td><td>5V</td><td>GND</td></tr>
 </table>
 
-
-## Video
-**Demo** 
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/Unit/LASER-TX-RX.mp4" type="video/mp4" >
-</video>
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/laser-tx-unit';
diff --git a/docs/en/unit/light.md b/docs/en/unit/light.md
index a291e48a..4e039539 100644
--- a/docs/en/unit/light.md
+++ b/docs/en/unit/light.md
@@ -1,10 +1,8 @@
-# LIGHT {docsify-ignore-all}
+# LIGHT
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U021</div>
 
-<img src="assets/img/product_pics/unit/M5GO_Unit_light.png" width="30%" height="30%">
-
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_light.png"></div>
 
 ## Description
 
@@ -28,12 +26,6 @@ We add some extra work to strengthen the circult, a Dual Differential Comparator
 - 1x LIGHT Unit
 - 1x Grove Cable
 
-## Related Link
-
-- **[Offical Video](https://www.youtube.com/channel/UCozgFVglWYQXbvTmGyS739w)**
-
-- **[Forum](http://forum.m5stack.com/)**
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -50,30 +42,13 @@ We add some extra work to strengthen the circult, a Dual Differential Comparator
 
 ### 1. Arduino IDE
 
-*The code below is incomplete. To complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/LIGHT/Arduino).*
-
-```arduino
-#include <M5Stack.h>
-
-// declaration
-uint16_t analogRead_value = 0;
-uint16_t digitalRead_value = 0;
-
-// initialization
-M5.begin();
-dacWrite(25, 0);// disable the speak noise
-pinMode(26, INPUT);// LIGHT Pin setting
-
-// read data
-analogRead_value = analogRead(36);// read analog value of LIGHT
-digitalRead_value = digitalRead(26);
-```
+The code below is incomplete. To complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/LIGHT/Arduino)
 
 <img src="assets/img/product_pics/unit/unit_example/LIGHT/example_unit_light_04.png">
 
 ### 2. UIFlow
 
-*To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/LIGHT/UIFlow).*
+To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/LIGHT/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/LIGHT/example_unit_light_03.png">
 
@@ -96,12 +71,6 @@ digitalRead_value = digitalRead(26);
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/LukeVideo/m5stack%20iot%20lighting%20part%202%20-%20light%20sensor%20control.mp4" type="video/mp4">
 </video>
 
-**LIGHT Application**
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/Light%20Units.mp4" type="video/mp4">
-</video>
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/light-sensor-unit';
diff --git a/docs/en/unit/m5-bit.md b/docs/en/unit/m5-bit.md
index 30ea36c0..16e98b0a 100644
--- a/docs/en/unit/m5-bit.md
+++ b/docs/en/unit/m5-bit.md
@@ -1,10 +1,8 @@
-# M5:bit {docsify-ignore-all}
+# M5:bit
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:A051</div>
 
-<img src="assets/img/product_pics/unit/m5bit/unit_m5bit_01.jpg" width="250" height="250"> <img src="assets/img/product_pics/unit/m5bit/unit_m5bit_02.jpg" width="250" height="250"> <img src="assets/img/product_pics/unit/m5bit/unit_m5bit_03.jpg" width="250" height="250">
-
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/m5bit/unit_m5bit_01.jpg"> <img src="assets/img/product_pics/unit/m5bit/unit_m5bit_02.jpg"></div>
 
 ## Description
  
@@ -40,72 +38,8 @@ More IO pins are extended, you can used DuPont Cable to connect other hardware.
 
 ### Arduino IDE
 
-*The code below is incomplete. TO get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/M5Bit/Arduino/M5BIT).*
+To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/M5Bit/Arduino/M5BIT)
 
-```arduino
-/*
-    Connect to GRVOE C on M5Core
-*/
-#include <M5Stack.h>
-#include <M5StackUpdater.h>
-
-#define WIDTH 320
-#define HEIGHT 240
-#define BLOCK_SIZE  40
-#define UNIT_WIDTH  5
-#define UNIT_HEIGHT 5
-#define UNIT_SIZE 25
-#define GETX(i) ((i) % (5))
-#define GETY(i) ((i) / (5))
-int world[UNIT_SIZE];
-int i;
-  
-void setup() {
-  M5.begin();
-  Wire.begin();
-  if(digitalRead(BUTTON_A_PIN) == 0){
-    Serial.println("Will load menu binary");
-    updateFromFS(SD);
-    ESP.restart();
-  }
-  Serial2.begin(115200, SERIAL_8N1, 16, 17);
-  M5.Lcd.fillScreen(BLACK);
-  M5.Lcd.setTextSize(2);
-  M5.Lcd.setCursor(35, 220);  
-  M5.Lcd.println("  <       *       >");  
-    for (i = 0; i < UNIT_SIZE; i++) {
-    world[i] = 0;
-  }
-  i = UNIT_SIZE / 2;
-}
-
-void loop() {
-      M5.update();
-      int x = GETX(i) + 1;
-      int y = GETY(i);
-      if (world[i] > 0) M5.Lcd.fillRect(x * BLOCK_SIZE + 1, y * BLOCK_SIZE + 1, BLOCK_SIZE - 2, BLOCK_SIZE - 2, LIGHTGREY);
-      else M5.Lcd.fillRect(x * BLOCK_SIZE + 1, y * BLOCK_SIZE + 1, BLOCK_SIZE - 2, BLOCK_SIZE - 2, BLUE);
-      if (M5.BtnC.wasPressed()) {
-         if (world[i] > 0) M5.Lcd.fillRect(x * BLOCK_SIZE + 1, y * BLOCK_SIZE + 1, BLOCK_SIZE - 2, BLOCK_SIZE - 2, WHITE);
-         else M5.Lcd.fillRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE, BLACK);
-         ++i;
-         if (i >= UNIT_SIZE) i=0;
-      }
-      if (M5.BtnA.wasPressed()) {
-         if (world[i] > 0) M5.Lcd.fillRect(x * BLOCK_SIZE + 1, y * BLOCK_SIZE + 1, BLOCK_SIZE - 2, BLOCK_SIZE - 2, WHITE);
-         else M5.Lcd.fillRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE, BLACK);
-         --i;
-         if (i < 0 ) i=UNIT_SIZE -1;
-      }
-      if (M5.BtnB.wasPressed()) {
-        if (world[i] > 0) world[i]=0;
-        else world[i]=1;
-        Serial2.print(world[i]);
-        Serial2.print(GETX(i));
-        Serial2.println(GETY(i));
-      }
-}
-```
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/m5-bit-iot-classroom-development-board';
diff --git a/docs/en/unit/m5camera.md b/docs/en/unit/m5camera.md
index 2aa852c6..761aae0e 100644
--- a/docs/en/unit/m5camera.md
+++ b/docs/en/unit/m5camera.md
@@ -1,9 +1,8 @@
-# M5Camera {docsify-ignore-all}
+# M5Camera
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U017</div>
 
-<img src="assets/img/product_pics/unit/m5camera/unit_m5camera_01.jpg" width="30%" height="30%"> <img src="assets/img/product_pics/unit/m5camera/unit_m5camera_02.jpg" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/m5camera/unit_m5camera_01.jpg"> <img src="assets/img/product_pics/unit/m5camera/unit_m5camera_02.jpg"></div>
 
 ## Description
 
@@ -17,7 +16,6 @@ what this software can do?
 - Open up web browser on your phone and visit <mark>192.168.4.1</mark>
 - Then here comes the picture. Video is about 5-6 frames per senconds. not super fast.
 
-
 <img src="assets/img/product_pics/unit/unit_m5camera_05.png" width="50%">
 
 
@@ -207,12 +205,6 @@ what this software can do?
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201812/M5Camera.mp4" type="video/mp4">
 </video>
 
-**M5Camera Case - Protective pudding**
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201904/Protective-Pudding.mp4" type="video/mp4">
-</video>
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/esp-32-camera-psram';
diff --git a/docs/en/unit/m5camera_f.md b/docs/en/unit/m5camera_f.md
index 9d52b2a4..87560474 100644
--- a/docs/en/unit/m5camera_f.md
+++ b/docs/en/unit/m5camera_f.md
@@ -1,10 +1,8 @@
-# M5CameraF {docsify-ignore-all}
+# M5CameraF
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U037</div>
 
-<img src="assets/img/product_pics/unit/unit_m5camera_f_01.png" width="30%" height="30%"><img src="assets/img/product_pics/unit/unit_m5camera_f_07.png" width="30%" height="30%">
-
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/unit_m5camera_f_01.png"><img src="assets/img/product_pics/unit/unit_m5camera_f_07.png"></div>
 
 ## Description
 
@@ -22,7 +20,6 @@ what this software can do?
 
 <img src="assets/img/product_pics/unit/unit_m5camera_f_02.png" width="50%"><img src="assets/img/product_pics/unit/unit_m5camera_f_03.png" width="50%">
 
-
 **Note: M5CameraF is named differently when different hardware is selected. They follow the rules below.**
 
 *M5CameraF_#_#... means optional hardware name follows "M5CameraF".*
@@ -159,7 +156,6 @@ what this software can do?
 2. We have several patterns of camera board, the following figures shows the main differece
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_table/camera_compare.jpg">
-    
 
 ## Related Link
 
@@ -171,8 +167,6 @@ what this software can do?
 
 - **[M5Camera Firmware](https://github.com/m5stack/m5stack-cam-psram/tree/master/wifi/wifi_sta/firmware/Camera%20F)**
 
-<img src="assets/img/product_pics/unit/unit_m5camera_f_06.png" width="50%" height="50%">
-
 ### Code
 
  - **[Serial communication-M5CameraF](https://github.com/m5stack/m5stack-cam-psram/tree/master/uart/firmware/Camera%20F)**
diff --git a/docs/en/unit/m5camera_x.md b/docs/en/unit/m5camera_x.md
index 23543b35..5452eb65 100644
--- a/docs/en/unit/m5camera_x.md
+++ b/docs/en/unit/m5camera_x.md
@@ -1,10 +1,8 @@
-# M5CameraX {docsify-ignore-all}
+# M5CameraX
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U038</div>
 
-<img src="assets/img/product_pics/unit/unit_m5camera_x_01.png" width="30%" height="30%">
-
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/unit_m5camera_x_01.png"></div>
 
 ## Description
 
@@ -75,7 +73,6 @@ what this software can do?
 
 ?>3. Currently EasyLoader is only suitable for Windows operating system, compatible with M5 system adopts ESP32 as the control core host. Before installing for M5Core, you need to install CP210X driver (you do not need to install with M5StickC as controller)[Click here to view the driver installation tutorial](en/related_documents/M5Burner#install-usb-driver)
 
-
 ## PinMap
 
 **Camera Interface PinMap**
@@ -162,7 +159,6 @@ what this software can do?
 
 - **[M5CameraX Firmware](https://github.com/m5stack/m5stack-cam-psram/tree/master/wifi/wifi_sta/firmware/Camera%20X)**
 
-
 ### Code
 
  - **[Face recognition](https://github.com/m5stack/m5stack-cam-psram/tree/master/face_recognize/firmware/Camera%20X)**
diff --git a/docs/en/unit/makey.md b/docs/en/unit/makey.md
index 92eba068..3d2514cc 100644
--- a/docs/en/unit/makey.md
+++ b/docs/en/unit/makey.md
@@ -1,10 +1,8 @@
-# 16-Key Capacitive Touch {docsify-ignore-all}
+# 16-Key Capacitive Touch
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U026</div>
 
-<img src="assets/img/product_pics/unit/M5GO_Unit_makey.png" width="30%" height="30%"><img src="assets/img/product_pics/unit/M5GO_Unit_makey_02.png" width="30%" height="30%"><img src="assets/img/product_pics/unit/M5GO_Unit_makey_05.png" width="30%"> 
-
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_makey.png"><img src="assets/img/product_pics/unit/M5GO_Unit_makey_02.png"></div> 
 
 ## Description
 
@@ -21,7 +19,6 @@ This Unit communicates with the M5Core via the GROVE A I2C(0x51).
 Take a Dupont wire(male to male), one end plug into GND, hold the other end to your hand.
 Take another Dupont wire(male to male), one end plug into different key holes, the other end hold by the other hand. Make it a close circult. Plug into different key tones the buzzer will emit the corresponding tones.
 
-
 2）Use the speaker on the M5core to exhibit sounds:
 Connct MAKEY with M5Core via Grove A
 Download this [example](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/Makey_NewVersion/Arduino/Makey_new_version).
@@ -47,14 +44,8 @@ Repeat the same operation as above. you will see this sound much better.
 
 - Fruit piano
 
-
-
 ## Related Link
 
-- **[Offical Video](https://www.youtube.com/channel/UCozgFVglWYQXbvTmGyS739w)**
-
-- **[Forum](http://forum.m5stack.com/)**
-
 - **[Maykey Firmware](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/Makey_NewVersion/firmware_328p)**
 
 ## EasyLoader
@@ -74,25 +65,7 @@ Repeat the same operation as above. you will see this sound much better.
 
 ### 1. Arduino IDE
 
-*The code below is incomplete. To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/Makey_NewVersion/Arduino/Makey_new_version).*
-
-```arduino
-#include <M5Stack.h>
-#include <Wire.h>
-
-// initialization
-M5.begin();
-pinMode(21, INPUT); pinMode(22, INPUT);
-Wire.begin();// Init I2C
-
-// read data
-Wire.requestFrom(MAKEY_ADDR, 2);
-while (Wire.available()) {
-  Key1 = Wire.read();//read data from MAKEY
-  Key2 = Wire.read();//read data from MAKEY
-  tone_key = (Key2<<8) | Key1;// the following picture will explain "tone_key"
-}
-```
+The code below is incomplete. To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/Makey_NewVersion/Arduino/Makey_new_version)
 
 <img src="assets/img/product_pics/unit/unit_example/MAKEY/tone_key_pitch_zh_CN.png">
 
@@ -100,7 +73,7 @@ while (Wire.available()) {
 
 ### 2. UIFlow
 
-*To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/Makey_NewVersion/UIFlow).*
+To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/Makey_NewVersion/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/MAKEY/example_unit_makey_02.png">
 
diff --git a/docs/en/unit/mini-proto.md b/docs/en/unit/mini-proto.md
index cba23e37..0182ab56 100644
--- a/docs/en/unit/mini-proto.md
+++ b/docs/en/unit/mini-proto.md
@@ -1,9 +1,8 @@
-# MINI.PROTO {docsify-ignore-all}
+# MINI.PROTO
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U064</div>
 
-<img src="assets/img/product_pics/unit/mini_proto/unit_mini_proto_01.jpg" width="30%"><img src="assets/img/product_pics/unit/mini_proto/unit_mini_proto_02.jpg" width="30%">
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/mini_proto/unit_mini_proto_01.jpg"><img src="assets/img/product_pics/unit/mini_proto/unit_mini_proto_02.jpg"></div>
 
 ## Description
 
@@ -26,22 +25,15 @@ For different CONNEXT ports, you will be able to interact with different pins th
 - Entire Hole Quantity: 40 Holes
 - Two Lego-compatible holes
 
-
 ## Include
 
 - 1x MINI PROTO unit
 - 1x GROVE cable
 
-## Weight and Size
-
-- Package size:68mm x 52mm x 12mm
-- Package weight:15g
-
 ## Applications
 
 - Prototyping  
 
-
 ## Links
 
 ## Schematic
diff --git a/docs/en/unit/ncir.md b/docs/en/unit/ncir.md
index 317d70d5..61d5c614 100644
--- a/docs/en/unit/ncir.md
+++ b/docs/en/unit/ncir.md
@@ -1,9 +1,8 @@
-# NCIR {docsify-ignore-all}
+# NCIR
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U028</div>
 
-<img src="assets/img/product_pics/unit/M5GO_Unit_ncir.png" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_ncir.png"></div>
 
 ## Description
 
@@ -56,37 +55,11 @@ Connect with M5Core via GROVE A IIC(0x5A).
 
 ### 1. Arduino IDE
 
-*The code below is incomplete. TO get complete code, please click [here](https://github.com/m5stack/M5Stack/tree/master/examples/Unit/NCIR).*
-
-```arduino
-#include <M5Stack.h>
-#include <Wire.h>
-
-#define NCIR_ADDR 0x5A
-
-// declaration
-uint16_t result;
-float temperature;
-
-// initialization
-Wire.begin();\
-M5.begin();
-
-// read data
-Wire.beginTransmission(NCIR_ADDR);Wire.write(0x07);Wire.endTransmission(false);
-Wire.requestFrom(NCIR_ADDR, 2);
-result = Wire.read();// Receive DATA
-result |= Wire.read() << 8;// Receive DATA
-
-// store temperature value
-temperature = result * 0.02 - 273.15;
-```
-
-<img src="assets/img/product_pics/unit/unit_example/NCIR/example_unit_ncir_04.png">
+The code below is incomplete. TO get complete code, please click [here](https://github.com/m5stack/M5Stack/tree/master/examples/Unit/NCIR)
 
 ### 2. UIFlow
 
-*TO get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/NCIR/UIFlow).*
+To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/NCIR/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/NCIR/example_unit_ncir_03.png">
 
diff --git a/docs/en/unit/neoflash.md b/docs/en/unit/neoflash.md
index bcf6394c..ca3cef59 100644
--- a/docs/en/unit/neoflash.md
+++ b/docs/en/unit/neoflash.md
@@ -1,10 +1,8 @@
-# NEOFLASH {docsify-ignore-all}
+# NEOFLASH
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:A042</div>
 
-<img src="assets/img/product_pics/unit/unit_neoflash_01.png" width="30%" height="30%"><img src="assets/img/product_pics/unit/unit_neoflash_02.png" width="30%" height="30%">
-
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/unit_neoflash_01.png"><img src="assets/img/product_pics/unit/unit_neoflash_02.png"></div>
 
 ## Description
 
@@ -30,17 +28,8 @@ When you plug the GROVE PORTA into M5core, you have convert it into 3 extended G
 - 1x NeoFlash Unit
 - 1x Grove Cable
 
-## Weight and Size
-
-- Package size:220mm x 59mm x 10mm
-- Package weight:131g
-
 ## Related Link
 
-- **[Offical Video](https://www.youtube.com/channel/UCozgFVglWYQXbvTmGyS739w)**
-
-- **[Forum](http://forum.m5stack.com/)**
-
 - **[FastLED Library](https://github.com/FastLED/FastLED/wiki/Overview)**
 
 - **[FastLED Reference(Chinese version)](http://www.taichi-maker.com/homepage/reference-index/arduino-library-index/fastled-library/)**
@@ -64,7 +53,7 @@ When you plug the GROVE PORTA into M5core, you have convert it into 3 extended G
 
 This is a example that takes real-time time from the network and displays it on NEOFLASH. Show real time when someone is shaking before NEOFLASH, otherwise the time "disappears".
 
-*To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/NEOPIXEL/Arduino)。*
+To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/NEOPIXEL/Arduino)
 
 <img src="assets/img/product_pics/unit/unit_example/NEOFLASH/example_unit_neoflash_01.png">
 
@@ -89,17 +78,10 @@ open http://flow.m5stack.com click Demo load uiflow
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/%E6%95%99%E7%A8%8B/NeoFlash/E1%20-%20Neoflash%20%E4%BE%8B%E7%A8%8B%EF%BC%88UIFlow%20Tutorials%202%EF%BC%89.mp4" type="video/mp4">
 </video>
 
-**Neoflash Case - Alarm Clock**
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/M5stack%20NeoFlash.mp4" type="video/mp4">
-</video>
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/neoflash-acrylic-light-board';
 
-
    anchor_search(purchase_link);
    scrollFunc();
 
diff --git a/docs/en/unit/neopixel.md b/docs/en/unit/neopixel.md
index 4d0154a0..321416c4 100644
--- a/docs/en/unit/neopixel.md
+++ b/docs/en/unit/neopixel.md
@@ -1,9 +1,8 @@
-# RGB LED {docsify-ignore-all}
+# RGB LED
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:A035</div>
 
-<img src="assets/img/product_pics/unit/M5GO_Unit_neopixel.jpg" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_neopixel.jpg"></div>
 
 ## Description
 
@@ -27,15 +26,10 @@
 
 ## Related Link
 
-- **[Offical Video](https://www.youtube.com/channel/UCozgFVglWYQXbvTmGyS739w)**
-
-- **[Forum](http://forum.m5stack.com/)**
-
 - **[FastLED Library](https://github.com/FastLED/FastLED/wiki/Overview)**
 
 - **[FastLED Reference(Chinese version)](http://www.taichi-maker.com/homepage/reference-index/arduino-library-index/fastled-library/)**
 
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -52,68 +46,13 @@
 
 ### 1. Arduino IDE
 
-*To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/NEOPIXEL/Arduino)。*
-
-```arduino
-/*
-    Install FastLED library first.
-*/
-#include <M5Stack.h>
-#include "FastLED.h"
-
-#define Neopixel_PIN    21
-#define NUM_LEDS    30
-
-CRGB leds[NUM_LEDS];
-uint8_t gHue = 0;
-static TaskHandle_t FastLEDshowTaskHandle = 0;
-static TaskHandle_t userTaskHandle = 0;
-
-void setup(){
-  Serial.begin(115200);
-  M5.begin();
-  M5.Lcd.clear(BLACK);
-  M5.Lcd.setTextColor(YELLOW); M5.Lcd.setTextSize(2); M5.Lcd.setCursor(40, 0);
-  M5.Lcd.println("Neopixel example");
-  M5.Lcd.setTextColor(WHITE);
-  M5.Lcd.setCursor(0, 25);
-  M5.Lcd.println("Display rainbow effect");
-
-  // Neopixel initialization
-  FastLED.addLeds<WS2811,Neopixel_PIN,GRB>\
-                         (leds, NUM_LEDS).setCorrection(TypicalLEDStrip);
-  FastLED.setBrightness(10);
-  xTaskCreatePinnedToCore(FastLEDshowTask, \
-                         "FastLEDshowTask", 2048, NULL, 2, NULL, 1);
-}
-
-void loop(){
-}
-
-void FastLEDshowESP32(){
-    if (userTaskHandle == 0){
-        userTaskHandle = xTaskGetCurrentTaskHandle();
-        xTaskNotifyGive(FastLEDshowTaskHandle);
-        const TickType_t xMaxBlockTime = pdMS_TO_TICKS( 200 );
-        ulTaskNotifyTake(pdTRUE, xMaxBlockTime);
-        userTaskHandle = 0;
-    }
-}
-
-void FastLEDshowTask(void *pvParameters){
-    for(;;){
-        fill_rainbow(leds, NUM_LEDS, gHue, 7);// rainbow effect
-        FastLED.show();// must be executed for neopixel becoming effective
-        EVERY_N_MILLISECONDS( 20 ) { gHue++; }
-    }
-}
-```
+To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/NEOPIXEL/Arduino)
 
 <img src="assets/img/product_pics/unit/unit_example/NEOPIXEL/example_unit_neopixel_02.png">
 
 ### 2. UIFlow
 
-*To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/NEOPIXEL/UIFlow).*
+To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/NEOPIXEL/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/NEOPIXEL/example_unit_neopixel_01.png">
 
@@ -128,20 +67,6 @@ void FastLEDshowTask(void *pvParameters){
  <tr><td>NEOPIXEL Unit</td><td> </td><td>Signal Pin</td><td>5V</td><td>GND</td></tr>
 </table>
 
-## Video
-
-**Neopixel case - 01**
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/LukeVideo/M5stack%20Neopixel%20Cosplay%20costume%20lights%20-%20super%20simple.mp4" type="video/mp4">
-</video>
-
-**Neopixel case - 02**
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/Akela%20Weapons.mp4" type="video/mp4">
-</video>
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/neopixel-rgb-leds-cable';
diff --git a/docs/en/unit/op180.md b/docs/en/unit/op180.md
index 1132010f..47e191b2 100644
--- a/docs/en/unit/op180.md
+++ b/docs/en/unit/op180.md
@@ -1,10 +1,8 @@
-# OP180 {docsify-ignore-all}
+# OP180
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U058</div>
 
-<img src="assets/img/product_pics/unit/op180/unit_op180_01.jpg" width="30%" height="30%"> <img src="assets/img/product_pics/unit/op180/unit_op180_02.jpg" width="30%" height="30%"> <img src="assets/img/product_pics/unit/op180/unit_op180_03.jpg" width="30%" height="30%">
-
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/op180/unit_op180_01.jpg"><img src="assets/img/product_pics/unit/op180/unit_op180_02.jpg"></div>
 
 ## Description
 
@@ -15,8 +13,6 @@ They are used for controlling machinery as part of a control system, as a safety
 The actuator of this Unit is consist of a pair of IR part, emitter side and receiver side(silicon phototransistor). The IR emitter will keep sending IR wave while the receiver will keep detecting the IR wave.  The IR is directly emitted from one side to another side, so if there's no object in between, the receiver side would get the IR signal. This is how it detecting a break an electrical connection. 
 <br><br><br>
 
-
-
 ### Product Features
 
 - Vertical Layout
@@ -29,11 +25,6 @@ The actuator of this Unit is consist of a pair of IR part, emitter side and rece
 - 1x OP.180 unit
 - 1x GROVE Cable
 
-## Weight and Size
-
-- Package size:68mm x 52mm x 12mm
-- Package weight:16g
-
 ## Applications
 
 - Door Switch
@@ -42,13 +33,9 @@ The actuator of this Unit is consist of a pair of IR part, emitter side and rece
 - Switch Scanner
 - Non-contact Switching
 
-
-## Documentation
-
-
 ## Schematic
-<img src="assets/img/product_pics/unit/op90/unit_op180_04.jpg">
 
+<img src="assets/img/product_pics/unit/op90/unit_op180_04.jpg">
 
 ## EasyLoader
 
@@ -66,31 +53,11 @@ The actuator of this Unit is consist of a pair of IR part, emitter side and rece
 
 ### 1. Arduino IDE
 
-*To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/OP90.180).*
-
-```arduino
-#include <M5Stack.h>
-
-void setup() {
-  // put your setup code here, to run once:
-  M5.begin();
-  //Wire.begin();
-  M5.Lcd.setCursor(120, 10, 4);
-  M5.Lcd.println("90/180 OPTICAL");
-
-  pinMode(36,INPUT_PULLUP);
-}
-
-void loop() {
-  // put your main code here, to run repeatedly:
-  M5.Lcd.setCursor(80, 120, 4);
-  M5.Lcd.printf("ir receive: %d",digitalRead(36));
-}
-```
+To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/OP90.180)
 
 ### 2. UIFlow
 
-*If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/OP90.180/UIFlow).*
+If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/OP90.180/UIFlow)
 
 <img src="assets/img/product_pics/unit/op180/op180.png">
 
diff --git a/docs/en/unit/op90.md b/docs/en/unit/op90.md
index 530b2832..66852eba 100644
--- a/docs/en/unit/op90.md
+++ b/docs/en/unit/op90.md
@@ -1,10 +1,8 @@
-# OP90 {docsify-ignore-all}
+# OP90
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U057</div>
 
-<img src="assets/img/product_pics/unit/op90/unit_op90_01.jpg" width="30%" height="30%"><img src="assets/img/product_pics/unit/op90/unit_op90_02.jpg" width="30%" height="30%"><img src="assets/img/product_pics/unit/op90/unit_op90_03.jpg" width="30%" height="30%">
-
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/op90/unit_op90_01.jpg"><img src="assets/img/product_pics/unit/op90/unit_op90_02.jpg"></div>
 
 ## Description
 
@@ -15,8 +13,6 @@ They are used for controlling machinery as part of a control system, as a safety
 The actuator of this Unit is consist of a pair of IR part, emitter side and receiver side(silicon phototransistor). The IR emitter will keep sending IR wave while the receiver will keep detecting the IR wave.  The IR is directly emitted from one side to another side, so if there's no object in between, the receiver side would get the IR signal. This is how it detecting a break an electrical connection. 
 <br><br><br>
 
-
-
 ### Product Features
 
 - Vertical Layout
@@ -29,11 +25,6 @@ The actuator of this Unit is consist of a pair of IR part, emitter side and rece
 - 1x OP.90 unit
 - 1x GROVE Cable
 
-## Weight and Size
-
-- Package size:60mm x 57mm x 17mm
-- Package weight:18g
-
 ## Applications
 
 - Door Switch
@@ -42,10 +33,6 @@ The actuator of this Unit is consist of a pair of IR part, emitter side and rece
 - Switch Scanner
 - Non-contact Switching
 
-
-## Documentation
-
-  
 ## Schematic
 <img src="assets/img/product_pics/unit/op90/unit_op90_04.jpg">
 
@@ -66,40 +53,14 @@ The actuator of this Unit is consist of a pair of IR part, emitter side and rece
 
 ### 1. Arduino IDE
 
-*To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/OP90.180/Arduino/OP90.180).*
-
-```arduino
-#include <M5Stack.h>
-
-void setup() {
-  // put your setup code here, to run once:
-  M5.begin();
-  //Wire.begin();
-  M5.Lcd.setCursor(120, 10, 4);
-  M5.Lcd.println("90/180 OPTICAL");
-
-  pinMode(36,INPUT_PULLUP);
-}
-
-void loop() {
-  // put your main code here, to run repeatedly:
-  M5.Lcd.setCursor(80, 120, 4);
-  M5.Lcd.printf("ir receive: %d",digitalRead(36));
-}
-```
+To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/OP90.180/Arduino/OP90.180)
 
 ### 2. UIFlow
 
-*If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/OP90.180/UIFlow).*
+If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/OP90.180/UIFlow)
 
 <img src="assets/img/product_pics/unit/op90/op90.png">
 
-## Video
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/OP-90.180.mp4" type="video/mp4">
-</video>
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/90-infrared-refletive-unit-itr9606';
diff --git a/docs/en/unit/pahub.md b/docs/en/unit/pahub.md
index 124bb9a8..82acb440 100644
--- a/docs/en/unit/pahub.md
+++ b/docs/en/unit/pahub.md
@@ -1,11 +1,8 @@
-# PaHUB {docsify-ignore-all}
+# PaHUB
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U040</div>
 
-<img src="assets/img/product_pics/unit/pahub/pahub_p1.jpg" width="30%" height="30%"><img src="assets/img/product_pics/unit/pahub/pahub_p3.jpg" width="30%" height="30%">
-
-
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/pahub/pahub_p1.jpg"><img src="assets/img/product_pics/unit/pahub/pahub_p3.jpg"></div>
 
 ## Description
 
@@ -22,8 +19,6 @@ The I2C address of this unit is 0x70 (changable by resistors).
 
 <img src="assets/img/product_pics/unit/pahub/pahub_p2.jpg" width="30%" height="30%">
 
-
-
 ## Product Features
 
 - I2C GROVE PORTA Expander
@@ -33,8 +28,6 @@ The I2C address of this unit is 0x70 (changable by resistors).
 - Product Size：48.2mm x 24.2mm x 11mm
 - Product weight：6.7g
 
-
-
 ## Learn 
 
 - The connections of the I2C data path are controlled by the same I2C master device that is switched tocommunicate with multiple I2C slaves. After the successful acknowledgment of the slave address (hardwareselectable by A0, A1, and A2 pins), a single 8-bit control register is written to or read from to determine the selected channels.
@@ -48,7 +41,6 @@ The I2C address of this unit is 0x70 (changable by resistors).
 - 1x PaHUB Unit
 - 1x Grove Cable
 
-
 ## Links
 
 - Datasheet - **[TCA9548A](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/unit/TCA9548A_en.pdf)**
@@ -67,7 +59,6 @@ After soldering a 0 ohm resistor, the corresponding pin will change from low to
 
 <img src="assets\img\product_pics\unit\pahub\pahub_p4.jpg" width="50%">
 
-
 ## Example
 
 - protovol type - I2C
@@ -87,38 +78,18 @@ After soldering a 0 ohm resistor, the corresponding pin will change from low to
 
 ### 1. Arduino IDE
 
-*The code below is incomplete. To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/PaHUB/Arduino).*
+The code below is incomplete. To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/PaHUB/Arduino)
 
-```arduino
-#define PAHUB_ADDR 0X70
-
-void portselectall(uint8_t ports) {  
-  Wire.beginTransmission(PAHUB_ADDR);
-  Wire.write(ports&0x3f);
-  Wire.endTransmission(); 
-}
-
-//Hub range is 0 to 5
-void portselect(uint8_t i) {
-  if (i > 7) return;
-  
-  Wire.beginTransmission(PAHUB_ADDR);
-  Wire.write(1 << i);
-  Wire.endTransmission(); 
-}
-```
 ### 2. UIFlow
 
-*If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/PaHUB/UIFlow).*
+If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/PaHUB/UIFlow)
 
 <img src="assets/img/product_pics/unit/pahub/pahub.png" width="50%" height="50%">
 
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/pahub-unit';
 
-
    anchor_search(purchase_link);
    scrollFunc();
 
diff --git a/docs/en/unit/pbhub.md b/docs/en/unit/pbhub.md
index e8f4456b..c2d10955 100644
--- a/docs/en/unit/pbhub.md
+++ b/docs/en/unit/pbhub.md
@@ -1,17 +1,14 @@
-# PbHUB {docsify-ignore-all}
+# PbHUB
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U041</div>
 
-<img src="assets/img/product_pics/unit/pbhub/pbhub_p1.jpg" width="30%" height="30%"><img src="assets/img/product_pics/unit/pbhub/pbhub_p2.png" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/pbhub/pbhub_p1.jpg"><img src="assets/img/product_pics/unit/pbhub/pbhub_p2.png"></div>
 
 ## Description
 
 **PbHUB**, is a expander for singel-bus GROVE PORTB(Black port on M5GO Base). 1-to-6. PortB can be used as GPIO and analog in two data lines connected to GPIO36 and GPIO26 on ESP32. Same as PaHUB, it provides a solution for mutiple device control by PORTB. With PbHUB each of the IO can be configurated to input, output and analog in as you like. Unfortunatly this Unit is unnested.
 It is build with a MEGA328, with a simple driver firmware inside.
 
-
-
 *Notice1: Please pay attention to the channel order while programing*
 <br>
 <img src="assets/img/product_pics/unit/pbhub/pbhub_p3.jpg" width="30%" height="30%">
@@ -60,11 +57,11 @@ See the below picture for timing sequence of HX711:
 
 ### 1. Arduino IDE
 
-*The code below is incomplete. To get complete code, please click [here](https://github.com/m5stack/M5Stack/tree/master/examples/Unit/PbHUB).*
+The code below is incomplete. To get complete code, please click [here](https://github.com/m5stack/M5Stack/tree/master/examples/Unit/PbHUB)
 
 ### 2. UIFlow
 
-*If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/PbHUB/UIFlow)*
+If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/PbHUB/UIFlow)
 
 <img src="assets/img/product_pics/unit/pbhub/pbhub.png" width="50%" height="50%">
 
diff --git a/docs/en/unit/pir.md b/docs/en/unit/pir.md
index f2493e27..6833fb36 100644
--- a/docs/en/unit/pir.md
+++ b/docs/en/unit/pir.md
@@ -1,10 +1,8 @@
-# PIR {docsify-ignore-all}
+# PIR
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U004</div>
 
-<img src="assets/img/product_pics/unit/M5GO_Unit_pir.png" width="30%" height="30%">
-
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_pir.png"></div>
 
 ## Description
 
@@ -37,13 +35,6 @@ This Unit communicates with the M5Core via the GROVE B.
 - Security Product
 - Automatic Induction Appliance Settings
 
-## Related Link
-
-- **[Offical Video](https://www.youtube.com/channel/UCozgFVglWYQXbvTmGyS739w)**
-
-- **[Forum](http://forum.m5stack.com/)**
-
-
 ## EasyLoader
 
 >EasyLoader is a concise and fast program writer, which has a built-in case program related to the product. It can be burned to the main control by simple steps to perform a series of function verification. Please install the corresponding driver according to the device type. M5Core host [Please click here to view the CP210X driver installation tutorial](en/arduino/arduino_development), M5StickC/V/T/ATOM series can be used without driver)
@@ -74,23 +65,11 @@ This Unit communicates with the M5Core via the GROVE B.
 
 ### 1. Arduino IDE
 
-*The code below is incomplete. To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/PIR/Arduino).*
-
-```arduino
-#include <M5Stack.h>
-
-// initialization
-M5.begin();
-pinMode(36, INPUT);// set pir sensor pin as input
-
-// read data
-int value = digitalRead(36);// read the pin(0: not detectd 1: detected)
-M5.update();
-```
+The code below is incomplete. To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/PIR/Arduino)
 
 ### 2. UIFlow
 
-To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/PIR/UIFlow).
+To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/PIR/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/PIR/example_unit_pir_03.png">
 
diff --git a/docs/en/unit/proto.md b/docs/en/unit/proto.md
index e8e0598c..766d3df4 100644
--- a/docs/en/unit/proto.md
+++ b/docs/en/unit/proto.md
@@ -1,10 +1,8 @@
-# PROTO {docsify-ignore-all}
+# PROTO
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U022</div>
 
-<img src="assets/img/product_pics/unit/M5GO_Unit_proto.png" width="30%" height="30%">
-
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_proto.png"></div>
 
 ## Description
 
@@ -24,12 +22,6 @@
 - 1x PROTO unit
 - 1x GROVE Cable
 
-## Related Link
-
-- **[Offical Video](https://www.youtube.com/channel/UCozgFVglWYQXbvTmGyS739w)**
-
-- **[Forum](http://forum.m5stack.com/)**
-
 ## Schematic
 
 <img src="assets/img/product_pics/unit/proto_sch.JPG">
diff --git a/docs/en/unit/relay.md b/docs/en/unit/relay.md
index 3fe016d4..9453213d 100644
--- a/docs/en/unit/relay.md
+++ b/docs/en/unit/relay.md
@@ -1,9 +1,8 @@
-# RELAY {docsify-ignore-all}
+# RELAY
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U023</div>
 
-<img src="assets/img/product_pics/unit/M5GO_Unit_relay.png" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_relay.png"></div>
 
 ## Description
 
@@ -30,12 +29,6 @@ There are 3 pins named: ON, OFF, COM. You can program to make COM connect to ON
 
 - Remote control of high-power appliances, such as refrigerators, air conditioners, TVs, etc.
 
-## Related Link
-
-- **[Offical Video](https://www.youtube.com/channel/UCozgFVglWYQXbvTmGyS739w)**
-
-- **[Forum](http://forum.m5stack.com/)**
-
 ## EasyLoader
 
 >EasyLoader is a concise and fast program writer, which has a built-in case program related to the product. It can be burned to the main control by simple steps to perform a series of function verification. Please install the corresponding driver according to the device type. M5Core host [Please click here to view the CP210X driver installation tutorial](en/arduino/arduino_development), M5StickC/V/T/ATOM series can be used without driver)
@@ -66,32 +59,12 @@ There are 3 pins named: ON, OFF, COM. You can program to make COM connect to ON
 
 ### 1. Arduino IDE
 
-*The code below is incomplete. To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/RELAY/Arduino).*
+The code below is incomplete. To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/RELAY/Arduino)
 
-```arduino
-#include <M5Stack.h>
-
-void setup() {
-  M5.begin();
-  M5.Lcd.clear(BLACK);
-  M5.Lcd.setTextFont(4);
-  M5.Lcd.setTextColor(YELLOW, BLACK);
-  //disable the speak noise
-  dacWrite(25, 0);
-  pinMode(26, OUTPUT);// RELAY Pin setting
-}
-
-void loop(void) {
-  digitalWrite(26, HIGH);// RELAY Unit work
-  delay(500);
-  digitalWrite(26, LOW);// RELAY Unit stop work
-  delay(500);
-}
-```
 
 ### 2. UIFlow
 
-*To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/RELAY/UIFlow).*
+To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/RELAY/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/RELAY/example_unit_relay_01.png">
 
diff --git a/docs/en/unit/rfid.md b/docs/en/unit/rfid.md
index 125ef837..a47298c1 100644
--- a/docs/en/unit/rfid.md
+++ b/docs/en/unit/rfid.md
@@ -1,9 +1,8 @@
-# RFID {docsify-ignore-all}
+# RFID
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U031</div>
 
-<img src="assets/img/product_pics/unit/unit_rfid_01.png" width="30%" height="30%"><img src="assets/img/product_pics/unit/unit_rfid_02.png" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/unit_rfid_01.png"><img src="assets/img/product_pics/unit/unit_rfid_02.png"></div>
 
 ## Description
 
@@ -14,7 +13,6 @@ The MFRC522 operates in the 13.56MHz frequency band and uses the modulation and
 It is able tp establish applications such as access control system, punching system, warehouse goods storage and community vehicle access registration.
 
 Connect this Unit to GROVE PORTA on M5Core, IIC adress is 0x28.
-<br><br><br>
 
 ## Product Features
 
@@ -62,52 +60,15 @@ Connect this Unit to GROVE PORTA on M5Core, IIC adress is 0x28.
 
 ### 1. Arduino IDE
 
-*The code below is incomplete. To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/RFID/Arduino).*
+The code below is incomplete. To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/RFID/Arduino)
 
 After programming the RFID.ino, the IC card or the mobile phone NFC, close to the unit, moves back and forth around the unit, and the UID of the IC card or the RFID chip in the mobile phone will be printed on the screen of the M5Core.
 
-```arduino
-/*
-    RFID.ino
-*/
-#include <Wire.h>
-#include "MFRC522_I2C.h"
-#include <M5Stack.h>
-
-// 0x28 is i2c address on SDA. Check your address with i2cscanner if not match.
-MFRC522 mfrc522(0x28);   // Create MFRC522 instance.
-
-// initialization
-M5.begin(); Serial.begin(115200); Wire.begin();
-/* Init MFRC522 */
-mfrc522.PCD_Init();
-/* Show details of PCD - MFRC522 Card Reader details */
-ShowReaderDetails();
-
-// get the uid of available card
-mfrc522.PICC_IsNewCardPresent();// scan for a new card
-mfrc522.PICC_ReadCardSerial();// read data
-// a new card is selected. The UID and SAK is saved at mfrc522.uid structor.
-for (byte i = 0; i < mfrc522.uid.size; i++) {
-  Serial.print(mfrc522.uid.uidByte[i] < 0x10 ? " 0" : " ");
-  Serial.print(mfrc522.uid.uidByte[i], HEX);
-}
-
-// other function
-void ShowReaderDetails() {
-  /* Get the MFRC522 software version */
-  byte v = mfrc522.PCD_ReadRegister(mfrc522.VersionReg);
-  if (v == 0x91) Serial.print(F(" = v1.0"));
-  else if (v == 0x92) Serial.print(F(" = v2.0"));
-  else Serial.print(F(" (unknown)"));
-}
-```
-
 <img src="assets/img/product_pics/unit/unit_example/RFID/example_unit_rfid_01.png" width="50%">
 
 ### 2. UIFlow
 
-*To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/RFID/UIFlow).*
+To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/RFID/UIFlow)
 
 After opening and burning this example using [UIFlow](flow.m5stack.com), place the proximity card on the Unit surface and the screen displays “True” and the UID number of the card.
 
@@ -124,7 +85,6 @@ After opening and burning this example using [UIFlow](flow.m5stack.com), place t
  <tr><td>RFID Unit</td><td>SCL</td><td>SDA</td><td>5V</td><td>GND</td></tr>
 </table>
 
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/rfid-sensor-unit';
diff --git a/docs/en/unit/rgb.md b/docs/en/unit/rgb.md
index ababce1a..0f2cec43 100644
--- a/docs/en/unit/rgb.md
+++ b/docs/en/unit/rgb.md
@@ -1,9 +1,8 @@
-# RGB {docsify-ignore-all}
+# RGB
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U003</div>
 
-<img src="assets/img/product_pics/unit/M5GO_Unit_rgb.png" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_rgb.png"></div>
 
 ## Description
 
@@ -23,12 +22,6 @@ This is a very useful piece on STEM class, students can program it to realize so
 - 1x RGB Unit
 - 1x Grove Cable
 
-## Related Link
-
-- **[Offical Video](https://www.youtube.com/channel/UCozgFVglWYQXbvTmGyS739w)**
-
-- **[Forum](http://forum.m5stack.com/)**
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -45,35 +38,11 @@ This is a very useful piece on STEM class, students can program it to realize so
 
 ### 1. Arduino IDE
 
-*The code below is incomplete. To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/RGB/Arduino).*
-
-```arduino
-/*
-    Install the AdaFruit NeoPixel library first
- */
-#include <Adafruit_NeoPixel.h>
-
-#define RGB_PIN 26
-#define NUMPIXELS   3
-
-// new a object
-Adafruit_NeoPixel pixels = Adafruit_NeoPixel(NUMPIXELS, PIN, NEO_GRB+NEO_KHZ800);
-
-int delayval = 150;// delay for half a second
-
-// initialization
-pixels.begin(); // This initializes the NeoPixel library.
-
-// display rgb
-pixels.setPixelColor(0, pixels.Color(100,0,0));//parameter = (rgb index, color)
-pixels.setPixelColor(1, pixels.Color(0,100,0));
-pixels.setPixelColor(2, pixels.Color(0,0,100));
-pixels.show(); // This sends the updated pixel color to the hardware.
-```
+The code below is incomplete. To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/RGB/Arduino)
 
 ### 2. UIFlow
 
-*To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/RGB/UIFlow).*
+To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/RGB/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/RGB/example_unit_rgb_01.png">
 
diff --git a/docs/en/unit/rs485.md b/docs/en/unit/rs485.md
index c5985c39..42be5784 100644
--- a/docs/en/unit/rs485.md
+++ b/docs/en/unit/rs485.md
@@ -1,10 +1,8 @@
-# RS485 {docsify-ignore-all}
+# RS485
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U034</div>
 
-<img src="assets/img/product_pics/unit/unit_rs485_01.png" width="30%" height="30%"><img src="assets/img/product_pics/unit/unit_rs485_02.png" width="30%" height="30%">
-
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/unit_rs485_01.png"><img src="assets/img/product_pics/unit/unit_rs485_02.png"></div>
 
 ## Description
 
@@ -48,17 +46,16 @@ It is used to convert the TTL standard to the RS485 standard. If the outside ser
 
 ### 1. Arduino IDE
 
-*The code below is incomplete. To get complete code, please click [here](https://github.com/m5stack/M5Stack/tree/master/examples/Unit/RS485).*
+The code below is incomplete. To get complete code, please click [here](https://github.com/m5stack/M5Stack/tree/master/examples/Unit/RS485)
 
 ### 2. UIFlow
 
-*To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/RS485/UIFlow).*
+To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/RS485/UIFlow)
 
 ## Schematic
 
 <img src="assets/img/product_pics/unit/unit_rs485_03.png" width="40%">
 
-
 ### PinMap
 
 <table>
@@ -66,7 +63,6 @@ It is used to convert the TTL standard to the RS485 standard. If the outside ser
  <tr><td>RS485 Unit</td><td>RS485 RXD</td><td>RS485 TXD</td><td>5V</td><td>GND</td></tr>
 </table>
 
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/rs485-module';
diff --git a/docs/en/unit/thermal.md b/docs/en/unit/thermal.md
index 852b223a..b6a89e12 100644
--- a/docs/en/unit/thermal.md
+++ b/docs/en/unit/thermal.md
@@ -1,9 +1,8 @@
-# THERMAL {docsify-ignore-all}
+# THERMAL
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U016</div>
 
-<img src="assets/img/product_pics/unit/M5GO_Unit_thermal.png" width="30%" height="30%"><img src="assets/img/product_pics/unit/M5GO_Unit_thermal_02.png" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_thermal.png"><img src="assets/img/product_pics/unit/M5GO_Unit_thermal_02.png"></div>
 
 ## Description
 
@@ -62,40 +61,12 @@ The Unit communicates with the M5Core through the Grove A interface, IIC address
 
 ### 1. Arduino IDE
 
-*The code below is incomplete. To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/THERMAL/Arduino)。*
+The code below is incomplete. To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/THERMAL/Arduino)
 
-```arduino
-/*
-    MLX90640.ino
-*/
-#include <M5Stack.h>
-#include <Wire.h>
-#include "MLX90640_API.h"
-#include "MLX90640_I2C_Driver.h"
-
-// declaration
-uint16_t eeMLX90640[832];//32 * 24 = 768
-int SetRefreshRate;
-
-// initialization
-/* load system parameter */
-MLX90640_DumpEE(MLX90640_address, eeMLX90640);
-/* load extraction parameter */
-MLX90640_ExtractParameters(eeMLX90640, &mlx90640);
-SetRefreshRate = MLX90640_SetRefreshRate(0x33, 0x05);
-M5.Lcd.fillScreen(TFT_BLACK);
-infodisplay();
-
-// display heat map
-M5.update();
-infodisplay();
-interpolate_image(reversePixels,ROWS,COLS,dest_2d,\
-                    INTERPOLATED_ROWS,INTERPOLATED_COLS);
-```
 
 ### 2. UIFlow
 
-*To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/THERMAL/UIFlow).*
+To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/THERMAL/UIFlow)
 
 <img src="assets/img/product_pics/unit/thermal.png">
 
@@ -110,15 +81,6 @@ interpolate_image(reversePixels,ROWS,COLS,dest_2d,\
  <tr><td>THERMAL Unit</td><td>SCL</td><td>SDA</td><td>5V</td><td>GND</td></tr>
 </table>
 
-## Video
-
-**THERMAL Case**
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201811/Infrared%20Thermal%20Imaging.mp4" type="video/mp4">
-</video>
-
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/thermal-camera';
diff --git a/docs/en/unit/tof.md b/docs/en/unit/tof.md
index d8000c7f..25c032a5 100644
--- a/docs/en/unit/tof.md
+++ b/docs/en/unit/tof.md
@@ -1,10 +1,8 @@
-# ToF {docsify-ignore-all}
+# ToF
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U010</div>
 
-<img src="assets/img/product_pics/unit/tof/unit_tof_01.jpg" width="30%" height="30%"><img src="assets/img/product_pics/unit/tof/unit_tof_02.jpg" width="30%" height="30%">
-
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/tof/unit_tof_01.jpg"><img src="assets/img/product_pics/unit/tof/unit_tof_02.jpg"></div>
 
 ## Description
 
@@ -14,7 +12,6 @@ This unit integrated a distance measuring sensor VL53L0x providing accurate dist
 
 This unit comunicates with M5Core via I2C(0x29).
 
-
 *Noitce: If you found ToF performance unstable, means what you have could be the old-version hardware PCB board, Following will teach you how to fix it*
 
 - Disassembling ToF and Check the PCB board, if you see it like this, means it is the NEW(fixed) version. <br> <br> <br>
@@ -23,7 +20,6 @@ This unit comunicates with M5Core via I2C(0x29).
 <img src="assets/img/product_pics/unit/tof/unit_tof_sch_02.jpg" width="60%" height="60%"><br> <br> <br>
 - In this case, make sure you use the 3.3V on SDA and SCL, M5Core GROVE provide 3.3V to data pins, 5V to power pin. only 3.3v allowed on VL53L0x.
 
-
 ## Product Features
 
 - High precision
@@ -66,35 +62,11 @@ This unit comunicates with M5Core via I2C(0x29).
 
 ### 1. Arduino IDE
 
-*The below code is incomplete(just for usage). If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/TOF/Arduino).*
-
-```arduino
-#include <M5Stack.h>
-#include <Wire.h>
-
-#define ToF_ADDR 0x29//the iic address of tof
-
-#define SYSRANGE_START  0x00
-#define RESULT_RANGE_STATUS 0x14
-#define ToF_ADDR 0x29   //the IIC address of ToF
-
-// declaration
-uint16_t dist=0;
-
-// initialization
-M5.begin();
-Wire.begin();// join i2c bus (address optional for master)
-
-// read data
-write_byte_data_at(VL53L0X_REG_SYSRANGE_START, 0x01);
-read_block_data_at(VL53L0X_REG_RESULT_RANGE_STATUS, 12);//read 12 bytes once
-// get distance
-dist = makeuint16(gbuf[11], gbuf[10]);//split distance data to variable "dist"
-```
+The below code is incomplete(just for usage). If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/TOF/Arduino)
 
 ### 2. UIFlow
 
-*If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/TOF/UIFlow).*
+If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/TOF/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/TOF/example_unit_tof_01.png">
 
@@ -102,7 +74,6 @@ dist = makeuint16(gbuf[11], gbuf[10]);//split distance data to variable "dist"
 
 [ToF Schematic](https://github.com/m5stack/M5-Schematic/blob/master/Units/UNIT_TOF.pdf)
 
-
 <img src="assets/img/product_pics/unit/tof/unit_tof_sch_01.jpg">
 
 ### PinMap
diff --git a/docs/en/unit/trace.md b/docs/en/unit/trace.md
index 96b01f41..211b9aca 100644
--- a/docs/en/unit/trace.md
+++ b/docs/en/unit/trace.md
@@ -1,9 +1,8 @@
-# TRACE {docsify-ignore-all}
+# TRACE
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:A048</div>
 
-<img src="assets/img/product_pics/unit/unit_trace_01.png" width="30%" height="30%"><img src="assets/img/product_pics/unit/unit_trace_02.png" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/unit_trace_01.png"><img src="assets/img/product_pics/unit/unit_trace_02.png"></div>
 
 ## Description
 
@@ -26,21 +25,12 @@ This Unit communicates with the M5Core via GROVE PORTA I2C(0x5A).
 - 1x TRACE Unit
 - 1x Grove Cable
 
-## Weight and Size
-
-- Package size:200mm x 100mm x 10mm
-- Package weight:34g
-
 ## Applications
 
 - Self-tracing robot
 
 ## Related Link
 
-- **[Offical Video](https://www.youtube.com/channel/UCozgFVglWYQXbvTmGyS739w)**
-
-- **[Forum](http://forum.m5stack.com/)**
-
 - **[TRACE Firmeare](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/TRACE/firmware_328p)**
 
 
@@ -60,44 +50,14 @@ This Unit communicates with the M5Core via GROVE PORTA I2C(0x5A).
 
 ### 1. Arduino IDE
 
-*The code below is incomplete. To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/TRACE/Arduino)。*
+The code below is incomplete. To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/TRACE/Arduino)
 
-```arduino
-#include <M5Stack.h>
-#include "Wire.h"
-
-#define TRACE_ADDR 0x5a
-
-// declaration
-#define VALUE_SPLIT
-uint8_t value;
-int SensorArray[4] = {0};
-
-// initialization
-m5.begin();
-Serial.begin(115200);
-Wire.begin();
-
-
-// read data
-Wire.beginTransmission(TRACE_ADDR);
-Wire.write(0x00);
-Wire.endTransmission();
-Wire.requestFrom(TRACE_ADDR,1);
-while(Wire.available()){
-    value = Wire.read();
-}
-SensorArray[3] = (value&0x08)>>3;
-SensorArray[2] = (value&0x04)>>2;
-SensorArray[1] = (value&0x02)>>1;
-SensorArray[0] = (value&0x01)>>0;
-```
 
 <img src="assets/img/product_pics/unit/unit_trace_04.png">
 
 ### 2. UIFlow
 
-*To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/TRACE/UIFlow)。*
+To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/TRACE/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/TRACE/example_unit_trace_01.png">
 
@@ -116,14 +76,6 @@ SensorArray[0] = (value&0x01)>>0;
 
 <img src="assets\img\product_pics\app\mega328_isp.png" width="30%" height="30%">
 
-## Video
-
-**TRACE Case**
-
-<video width="500" height="315" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/lidarbot.mp4" type="video/mp4">
-</video>
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/m5stack-trace-board-for-lidar-bot';
diff --git a/docs/en/unit/unit_fan.md b/docs/en/unit/unit_fan.md
index c9f2d795..e62a3619 100644
--- a/docs/en/unit/unit_fan.md
+++ b/docs/en/unit/unit_fan.md
@@ -1,19 +1,14 @@
-# DC MOTOR {docsify-ignore-all}
+# DC MOTOR
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U063</div>
 
-<img src="assets/img/product_pics/unit/Fan/unit_fan_01.jpg" width="30%" height="30%"><img src="assets/img/product_pics/unit/Fan/unit_fan_02.jpg" width="30%" height="30%">
-
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/Fan/unit_fan_01.jpg"><img src="assets/img/product_pics/unit/Fan/unit_fan_02.jpg"></div>
 
 ## Description
 
 **FAN** is designed with an N20 Motor and a small fan piece is included in the package.
 This N20 motor is has a 5V supply voltage. The output shaft has a rotational speed of 8800 RPM.
 
-
-<br><br><br>
-
 <img src="assets/img/product_pics/unit/Fan/unit_fan_03.jpg" width="30%" height="30%">
 
 ### Product Features
@@ -34,12 +29,9 @@ This N20 motor is has a 5V supply voltage. The output shaft has a rotational spe
 
 - Electric Fan
 
-## Dcumentation
-
-  
 ## Schematic
-<img src="assets/img/product_pics/unit/Fan/unit_fan_04.jpg">
 
+<img src="assets/img/product_pics/unit/Fan/unit_fan_04.jpg">
 
 ## EasyLoader
 
@@ -57,40 +49,11 @@ This N20 motor is has a 5V supply voltage. The output shaft has a rotational spe
 
 ### 1. Arduino IDE
 
-*To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/FAN).*
-
-```arduino
-#include <M5Stack.h>
-
-const int motor_pin = 21;
-int freq = 10000;
-int ledChannel = 0;
-int resolution = 10;
-void setup() {
-  // put your setup code here, to run once:
-  M5.begin();
-  M5.Lcd.setCursor(120, 110, 4);
-  M5.Lcd.println("MOTOR");
-  ledcSetup(ledChannel, freq, resolution);
-  ledcAttachPin(motor_pin, ledChannel);
-
-}
-// 0 - 1024 
-void loop() {
-  // put your main code here, to run repeatedly:
-    ledcWrite(ledChannel, 512);//0°
-    delay(1000);
-    ledcWrite(ledChannel, 0);//90°
-    delay(1000);
-    //ledcWrite(ledChannel, 30);//180°
-    //delay(1000);
-
-}
-```
+To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/FAN)
 
 ### 2. UIFlow
 
-*To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/FAN/UIFlow)。*
+To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/FAN/UIFlow)
 
 <img src="assets/img/product_pics/unit/fan.png" >
 
diff --git a/docs/en/unit/unitv.md b/docs/en/unit/unitv.md
index f6c432e4..3339fc3d 100644
--- a/docs/en/unit/unitv.md
+++ b/docs/en/unit/unitv.md
@@ -1,12 +1,8 @@
-# UNIT-V {docsify-ignore-all}
+# UNIT-V
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U078</div>
 
-<img src="assets/img/product_pics/unit/unit-v/unit_v_01.webp" width="30%" height="30%">
-<img src="assets/img/product_pics/unit/unit-v/unit_v_02.webp" width="30%" height="30%">
-<img src="assets/img/product_pics/unit/unit-v/unit_v_04.webp" width="30%" height="30%">
-
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/unit-v/unit_v_01.webp"><img src="assets/img/product_pics/unit/unit-v/unit_v_02.webp"></div>
 
 ## Description
 **UNIT-V** is the new AI Camera powered by Kendryte K210 .An edge computing system-on-chip(SoC) with dual-core 64bit RISC-V CPU and state-of-art neural network processor.UNIT-V AI Camera features its integration with machine vision capabilities, featuring the unprocessed acceptability to AI Visioning with high energy efficiency and low cost. We co-oped with Sipeed providing the MicroPython environment makes programming on UNIT-V easier.
@@ -32,6 +28,8 @@ Support MicroPython development environment, which makes the program code more c
     - Indicator light:  RGB LED 
     - External storage:  TF card/Micro SD
     - Interface:  PH2.0/compatible GROVE
+- Size: 4mm * 2.5mm * 1.5mm
+- Weight: 4g
 
 ### Applications/What can UNIT-V do?
 
@@ -42,10 +40,6 @@ Support MicroPython development environment, which makes the program code more c
 - Shape recognition
 - Video recoder
 
-### Size and Weight
-- Size: 4mm * 2.5mm * 1.5mm
-- Weight: 4g
-
 ### Package Includes
 
 -  1x UNIT-V(include 20cm 4P cable and USB-C cable)    
@@ -89,8 +83,6 @@ The chip contains a high-performance, low power RISC-V ISA-based dual core 64-bi
    - Field of View : 65 degree
    - Maxmium Pixel: 2M
 
-
-
 ### SD card test
 
 UNIT-V does not currently recognize all types of MicroSD cards. We have tested some common SD cards. The test results are as follows.
@@ -211,14 +203,7 @@ UNIT-V does not currently recognize all types of MicroSD cards. We have tested s
 
 ## Example
 
-*If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/App/UnitV/track_ball)*
-
-## Video
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/Unit/unitV.mp4" type="video/mp4">
-</video>
-
+If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/App/UnitV/track_ball)
 
 <script>
 
diff --git a/docs/en/unit/vibrator.md b/docs/en/unit/vibrator.md
index 48751dab..32ffd3e1 100644
--- a/docs/en/unit/vibrator.md
+++ b/docs/en/unit/vibrator.md
@@ -1,9 +1,8 @@
-# VIBRATOR MOTOR {docsify-ignore-all}
+# VIBRATOR MOTOR
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U059</div>
 
-<img src="assets/img/product_pics/unit/vibrator_motor/unit_vibrator_motor_01.jpg" width="30%" height="30%"><img src="assets/img/product_pics/unit/vibrator_motor/unit_vibrator_motor_02.jpg" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/vibrator_motor/unit_vibrator_motor_01.jpg"><img src="assets/img/product_pics/unit/vibrator_motor/unit_vibrator_motor_02.jpg"></div>
 
 ## Description
 
@@ -14,9 +13,6 @@ With this product, you can implement a vibration function to your application.<b
 
 These days miniature vibrating motors are used in a wide range of products, not just phone and consumer electronics, but also included such as tools, scanners, medical instruments, GPS trackers, and control sticks. Vibrator motors are also the main actuators for haptic feedback which is an inexpensive way to increase a product's value and differentiate it from the competition.
 
-<br><br><br>
-<img src="assets/img/product_pics/unit/vibrator_motor/unit_vibrator_motor_03.jpg" width="30%" height="30%">
-
 ### Product Features
 
 - single-direction rotation
@@ -32,11 +28,6 @@ These days miniature vibrating motors are used in a wide range of products, not
 
 - Vibration message functions 
 
-
-
-## Dcumentation
-
-  
 ## Schematic
 
 <img src="assets/img/product_pics/unit/fan/unit_fan_04.jpg">
@@ -58,47 +49,14 @@ These days miniature vibrating motors are used in a wide range of products, not
 
 ### 1. Arduino IDE
 
-*To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/VIBRATOR).*
-
-```arduino
-#include <M5Stack.h>
-
-const int motor_pin = 21;
-int freq = 10000;
-int ledChannel = 0;
-int resolution = 10;
-void setup() {
-  // put your setup code here, to run once:
-  M5.begin();
-  M5.Lcd.setCursor(120, 110, 4);
-  M5.Lcd.println("MOTOR");
-  ledcSetup(ledChannel, freq, resolution);
-  ledcAttachPin(motor_pin, ledChannel);
-
-}
-// 0 - 1024 
-void loop() {
-  // put your main code here, to run repeatedly:
-    ledcWrite(ledChannel, 512);//0°
-    delay(1000);
-    ledcWrite(ledChannel, 0);//90°
-    delay(1000);
-    //ledcWrite(ledChannel, 30);//180°
-    //delay(1000);
-
-}
-```
+To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/VIBRATOR)
 
 ### 2. UIFlow
 
-*To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/VIBRATOR/UIFlow)*
+To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/VIBRATOR/UIFlow)
 
 <img src="assets/img/product_pics/unit/vibrator_motor/vibrator.png">
 
-## Video
-
-- **[Demo Video](https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/Vibrator.mp4)**
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/vibration-motor-unit';
diff --git a/docs/en/unit/weight.md b/docs/en/unit/weight.md
index 182dadf2..4ae14896 100644
--- a/docs/en/unit/weight.md
+++ b/docs/en/unit/weight.md
@@ -1,9 +1,8 @@
-# WEIGHT {docsify-ignore-all}
+# WEIGHT
 
 <div class="badge badge-pill badge-primary product_sku_tag">SKU:U030</div>
 
-<img src="assets/img/product_pics/unit/unit_weight_01.png" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/unit_weight_01.png"></div>
 
 ## Description
 
@@ -50,11 +49,6 @@ power supply regulator:
 - 1x WEIGHT Unit
 - 1x Grove Cable
 
-## Size and Weight
-
-- Package Size:67mm x 53mm x 12mm
-- Package Weight:20g
-
 ## Applications
 
 -  Micro weight meter
@@ -64,7 +58,6 @@ power supply regulator:
 
 -  **Datasheet** - [HX711](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/unit/HX711_en.pdf)
 
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -83,54 +76,11 @@ power supply regulator:
 
 We used a pressure sensor(10kg) in this experiment. (Unit: gram)
 
-*To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/WEIGHT/Arduino/weight)。*
-
-```arduino
-/*
-  This Unit connects to GRVOE B on M5Core.
-*/
-
-#include <M5Stack.h>
-#include "hx711.h"
-
-HX711 scale(36, 26);// GROVE B
-
-void setup() {
-  M5.begin();
-  M5.Lcd.clear(BLACK);
-  M5.Lcd.setTextSize(2);
-  M5.Lcd.setTextColor(YELLOW);
-  M5.Lcd.setCursor(50, 10);
-  M5.Lcd.print("UNIT_WEIGHT EXAMPLE\n");
-  M5.Lcd.setCursor(15, 50);
-  M5.Lcd.print("Connect Unit to GROVE B");
-  Serial.begin(115200);
-
-  scale.setOffset(125184);
-  scale.setScale(67.4);
-
-  M5.Lcd.setCursor(0, 90);
-  M5.Lcd.print("The weight: ");
-}
-
-void loop(){
-  // Serial.println(scale.averageValue());
-  float weight;
-  weight = ((float)((int)((scale.getGram()+0.005)*100)))/100;
-  // sprintf(&weight, "%0.2f", scale.getGram());
-  Serial.print("The weight: ");
-  Serial.print(weight);
-  M5.Lcd.fillRect(150, 90, 100, 20, BLACK);
-  M5.Lcd.setCursor(150, 90);
-  M5.Lcd.print(weight);
-  Serial.println(" g");
-  delay(100);
-}
-```
+To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/WEIGHT/Arduino/weight)
 
 ### 2. UIFlow
 
-*To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/WEIGHT/UIFlow)。*
+To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/WEIGHT/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/WEIGHT/example_unit_weight_01.png">