diff --git a/docs/assets/img/related_documents/Page_logo/VScode.jpg b/docs/assets/img/related_documents/Page_logo/VScode.jpg
new file mode 100644
index 00000000..e7df269f
Binary files /dev/null and b/docs/assets/img/related_documents/Page_logo/VScode.jpg differ
diff --git a/docs/en/related_documents.md b/docs/en/related_documents.md
index f98e4dcf..7d93ff6f 100644
--- a/docs/en/related_documents.md
+++ b/docs/en/related_documents.md
@@ -51,3 +51,13 @@
     </div>
   </div>
 </div>
+
+
+<div class="container mt-3">
+  <div class="media border p-3">
+    <img src="assets/img/related_documents/Page_logo/VScode.jpg" class="mr-3 mt-3 " style="width:50px; margin-top:5px!important">
+    <div class="media-body">
+      <a href="https://github.com/m5stack/UIFlow-Code"><p style="margin-top:20px">VScode- M5Stack Plugin</p></a>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/docs/index.md b/docs/index.md
index a59e6a71..eec63f53 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -252,7 +252,6 @@
   <p class="item-title" style="font-style:italic;">JOYSTICK</p>
 </div>
 
-
 # BASE
 
 <div>
@@ -403,13 +402,13 @@
 
 **Sensor class**
 
-
 ## ENV
 ## EARTH
 ## LIGHT
-## ANGLE
-## IR
 ## PIR
+## NCIR
+## THERMAL
+## COLOR
 
 <div class="item">
   <a href="/#/en/unit/env">
@@ -432,20 +431,6 @@
   <p class="item-title" style="font-style:italic;">LIGHT</p>
 </div>
 
-<div class="item">
-  <a href="/#/en/unit/angle">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_angle_01.png">
-  </a>
-  <p class="item-title" style="font-style:italic;">ANGLE</p>
-</div>
-
-<div class="item">
-  <a href="/#/en/unit/ir">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_ir_01.png">
-  </a>
-  <p class="item-title" style="font-style:italic;">IR</p>
-</div>
-
 <div class="item">
   <a href="/#/en/unit/pir">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_pir_01.png">
@@ -453,13 +438,6 @@
   <p class="item-title" style="font-style:italic;">PIR</p>
 </div>
 
-## NCIR
-## THERMAL
-## BUTTON
-## Dual-BUTTON
-## JOYSTICK
-## CardKB
-
 <div class="item">
   <a href="/#/en/unit/ncir">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_ncir_01.png">
@@ -474,6 +452,103 @@
   <p class="item-title" style="font-style:italic;">THERMAL</p>
 </div>
 
+<div class="item">
+  <a href="/#/en/unit/color">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_color_01.png">
+  </a>
+  <p class="item-title" style="font-style:italic;">COLOR</p>
+</div>
+
+
+## TOF
+## HEART
+## ADC
+## MAKEY
+## GPS
+## FINGER
+## WEIGHT
+
+<div class="item">
+  <a href="/#/en/unit/tof">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_tof_01.png">
+  </a>
+  <p class="item-title" style="font-style:italic;">TOF</p>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/heart">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_heart_01.png">
+  </a>
+  <p class="item-title" style="font-style:italic;">HEART</p>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/adc">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_adc_01.png">
+  </a>
+  <p class="item-title" style="font-style:italic;">ADC</p>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/makey">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_makey_01.png">
+  </a>
+  <p class="item-title" style="font-style:italic;">MAKEY</p>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/gps">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_gps_01.png">
+  </a>
+  <p class="item-title" style="font-style:italic;">GPS</p>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/finger">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_finger_01.png">
+  </a>
+  <p class="item-title" style="font-style:italic;">FINGER</p>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/weight">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_weight_01.png">
+  </a>
+  <p class="item-title" style="font-style:italic;">WEIGHT</p>
+</div>
+
+
+## TRACE
+
+<div class="item">
+  <a href="/#/en/unit/trace">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_trace_01.png">
+  </a>
+  <p class="item-title" style="font-style:italic;">TRACE</p>
+</div>
+
+<!-- # HAT
+
+<div>
+     <img src="assets/img/product_pics/icon_accessory.png" style="vertical-align:middle;">
+     <span style="font-size:30px">HAT</span>
+</div> -->
+
+**HMI class**
+
+## ANGLE
+## BUTTON
+## Dual-BUTTON
+## JOYSTICK
+## CardKB
+
+<div class="item">
+  <a href="/#/en/unit/angle">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_angle_01.png">
+  </a>
+  <p class="item-title" style="font-style:italic;">ANGLE</p>
+</div>
+
 <div class="item">
   <a href="/#/en/unit/button">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_button_01.png">
@@ -502,46 +577,24 @@
   <p class="item-title" style="font-style:italic;">CardKB</p>
 </div>
 
-## COLOR
-## TOF
-## HEART
-## RFID
-## ADC
+
+**I / 0  class**
+
+## EXT.IO
 ## DAC
+## RELAY
+## HUB
+## PaHUB
+## PbHUB
+## 3.96Port
+## M5-BIT
+## PROTO
 
 <div class="item">
-  <a href="/#/en/unit/color">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_color_01.png">
+  <a href="/#/en/unit/extio">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_extio_01.png">
   </a>
-  <p class="item-title" style="font-style:italic;">COLOR</p>
-</div>
-
-<div class="item">
-  <a href="/#/en/unit/tof">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_tof_01.png">
-  </a>
-  <p class="item-title" style="font-style:italic;">TOF</p>
-</div>
-
-<div class="item">
-  <a href="/#/en/unit/heart">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_heart_01.png">
-  </a>
-  <p class="item-title" style="font-style:italic;">HEART</p>
-</div>
-
-<div class="item">
-  <a href="/#/en/unit/rfid">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_rfid_01.png">
-  </a>
-  <p class="item-title" style="font-style:italic;">RFID</p>
-</div>
-
-<div class="item">
-  <a href="/#/en/unit/adc">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_adc_01.png">
-  </a>
-  <p class="item-title" style="font-style:italic;">ADC</p>
+  <p class="item-title" style="font-style:italic;">EXT.IO</p>
 </div>
 
 <div class="item">
@@ -551,29 +604,6 @@
   <p class="item-title" style="font-style:italic;">DAC</p>
 </div>
 
-## MAKEY
-## RGB
-## RELAY
-## HUB
-## PaHUB
-## PbHUB
-## 3.96Port
-## PROTO
-
-<div class="item">
-  <a href="/#/en/unit/makey">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_makey_01.png">
-  </a>
-  <p class="item-title" style="font-style:italic;">MAKEY</p>
-</div>
-
-<div class="item">
-  <a href="/#/en/unit/rgb">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_rgb_01.png">
-  </a>
-  <p class="item-title" style="font-style:italic;">RGB</p>
-</div>
-
 <div class="item">
   <a href="/#/en/unit/relay">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_relay_01.png">
@@ -609,6 +639,14 @@
   <p class="item-title" style="font-style:italic;">3.96Port</p>
 </div>
 
+<div class="item">
+  <a href="/#/en/unit/m5-bit">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_m5bit_01.jpg">
+  </a>
+  <p class="item-title" style="font-style:italic;">M5:bit</p>
+</div>
+
+
 <div class="item">
   <a href="/#/en/unit/proto">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_proto_01.png">
@@ -616,19 +654,18 @@
   <p class="item-title" style="font-style:italic;">PROTO</p>
 </div>
 
-## EXT.IO
+
+**Communication class**
+
+## IR
 ## RS485
-## GPS
-## FINGER
-## WEIGHT
-## TRACE
-## M5-BIT
+## RFID
 
 <div class="item">
-  <a href="/#/en/unit/extio">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_extio_01.png">
+  <a href="/#/en/unit/ir">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_ir_01.png">
   </a>
-  <p class="item-title" style="font-style:italic;">EXT.IO</p>
+  <p class="item-title" style="font-style:italic;">IR</p>
 </div>
 
 <div class="item">
@@ -639,49 +676,13 @@
 </div>
 
 <div class="item">
-  <a href="/#/en/unit/gps">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_gps_01.png">
+  <a href="/#/en/unit/rfid">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_rfid_01.png">
   </a>
-  <p class="item-title" style="font-style:italic;">GPS</p>
+  <p class="item-title" style="font-style:italic;">RFID</p>
 </div>
 
-<div class="item">
-  <a href="/#/en/unit/finger">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_finger_01.png">
-  </a>
-  <p class="item-title" style="font-style:italic;">FINGER</p>
-</div>
-
-<div class="item">
-  <a href="/#/en/unit/weight">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_weight_01.png">
-  </a>
-  <p class="item-title" style="font-style:italic;">WEIGHT</p>
-</div>
-
-<div class="item">
-  <a href="/#/en/unit/trace">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_trace_01.png">
-  </a>
-  <p class="item-title" style="font-style:italic;">TRACE</p>
-</div>
-
-<div class="item">
-  <a href="/#/en/unit/m5-bit">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_m5bit_01.jpg">
-  </a>
-  <p class="item-title" style="font-style:italic;">M5:bit</p>
-</div>
-
-<!-- # HAT
-
-<div>
-     <img src="assets/img/product_pics/icon_accessory.png" style="vertical-align:middle;">
-     <span style="font-size:30px">HAT</span>
-</div> -->
-
-
-**C-HAT**
+**C-HAT class**
 
 ## HAT-ENV
 ## HAT-PIR
@@ -711,11 +712,13 @@
 
 **Visual class**
 
-## RGB_LEDs
+## RGB_LED
 ## CatEar
 ## HEX
 ## NeoFlash
 ## BUTTERFLY
+## RGB
+
 
 <div class="item">
   <a href="/#/en/unit/neopixel">
@@ -752,6 +755,13 @@
   <p class="item-title" style="font-style:italic;">BUTTERFLY</p>
 </div>
 
+<div class="item">
+  <a href="/#/en/unit/rgb">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_rgb_01.png">
+  </a>
+  <p class="item-title" style="font-style:italic;">RGB</p>
+</div>
+
 ***
 # Application
 
diff --git a/docs/zh_CN/README.md b/docs/zh_CN/README.md
index 1029e4db..a4406016 100644
--- a/docs/zh_CN/README.md
+++ b/docs/zh_CN/README.md
@@ -146,7 +146,6 @@
 ## BUS
 ## GoPlus
 
-
 **拓展模块**
 
 <div class="item">
@@ -198,7 +197,6 @@
   <p class="item-title" style="font-style:italic;">GoPlus</p>
 </div>
 
-
 ## STEPMOTOR
 ## SERVO
 ## LEGO_PLUS
@@ -234,6 +232,7 @@
   <p class="item-title" style="font-style:italic;">FAN</p>
 </div>
 
+
 ## ENCODER
 ## JOYSTICK
 
@@ -253,8 +252,6 @@
   <p class="item-title" style="font-style:italic;">JOYSTICK</p>
 </div>
 
-***
-
 # BASE
 
 <div>
@@ -274,7 +271,6 @@
 ## M5GO BOTTOM
 
 
-
 <div class="item">
   <a href="/#/zh_CN/base/lan_base">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/base/base_lan_01.png">
@@ -374,7 +370,6 @@
 ## M5CameraF
 ## M5CameraX
 
-
 **摄像头类** *( **[上手指南](zh_CN/quick_start/m5camera/m5camera_quick_start)**&nbsp;&nbsp;&nbsp;**[摄像头之间的对比](https://github.com/m5stack/M5-Schematic/blob/master/Units/m5camera/CameraComparison_zh_CN.md)** )*
 
 <div class="item">
@@ -405,12 +400,15 @@
   <p class="item-title" style="font-style:italic;">M5CameraX</p>
 </div>
 
+**传感器类**
+
 ## ENV
 ## EARTH
 ## LIGHT
-## ANGLE
-## IR
 ## PIR
+## NCIR
+## THERMAL
+## COLOR
 
 <div class="item">
   <a href="/#/zh_CN/unit/env">
@@ -433,20 +431,6 @@
   <p class="item-title" style="font-style:italic;">LIGHT</p>
 </div>
 
-<div class="item">
-  <a href="/#/zh_CN/unit/angle">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_angle_01.png">
-  </a>
-  <p class="item-title" style="font-style:italic;">ANGLE</p>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/ir">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_ir_01.png">
-  </a>
-  <p class="item-title" style="font-style:italic;">IR</p>
-</div>
-
 <div class="item">
   <a href="/#/zh_CN/unit/pir">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_pir_01.png">
@@ -454,13 +438,6 @@
   <p class="item-title" style="font-style:italic;">PIR</p>
 </div>
 
-## NCIR
-## THERMAL
-## BUTTON
-## Dual-BUTTON
-## JOYSTICK
-## CardKB
-
 <div class="item">
   <a href="/#/zh_CN/unit/ncir">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_ncir_01.png">
@@ -475,6 +452,103 @@
   <p class="item-title" style="font-style:italic;">THERMAL</p>
 </div>
 
+<div class="item">
+  <a href="/#/zh_CN/unit/color">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_color_01.png">
+  </a>
+  <p class="item-title" style="font-style:italic;">COLOR</p>
+</div>
+
+
+## TOF
+## HEART
+## ADC
+## MAKEY
+## GPS
+## FINGER
+## WEIGHT
+
+<div class="item">
+  <a href="/#/zh_CN/unit/tof">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_tof_01.png">
+  </a>
+  <p class="item-title" style="font-style:italic;">TOF</p>
+</div>
+
+<div class="item">
+  <a href="/#/zh_CN/unit/heart">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_heart_01.png">
+  </a>
+  <p class="item-title" style="font-style:italic;">HEART</p>
+</div>
+
+<div class="item">
+  <a href="/#/zh_CN/unit/adc">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_adc_01.png">
+  </a>
+  <p class="item-title" style="font-style:italic;">ADC</p>
+</div>
+
+<div class="item">
+  <a href="/#/zh_CN/unit/makey">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_makey_01.png">
+  </a>
+  <p class="item-title" style="font-style:italic;">MAKEY</p>
+</div>
+
+<div class="item">
+  <a href="/#/zh_CN/unit/gps">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_gps_01.png">
+  </a>
+  <p class="item-title" style="font-style:italic;">GPS</p>
+</div>
+
+<div class="item">
+  <a href="/#/zh_CN/unit/finger">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_finger_01.png">
+  </a>
+  <p class="item-title" style="font-style:italic;">FINGER</p>
+</div>
+
+<div class="item">
+  <a href="/#/zh_CN/unit/weight">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_weight_01.png">
+  </a>
+  <p class="item-title" style="font-style:italic;">WEIGHT</p>
+</div>
+
+
+## TRACE
+
+<div class="item">
+  <a href="/#/zh_CN/unit/trace">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_trace_01.png">
+  </a>
+  <p class="item-title" style="font-style:italic;">TRACE</p>
+</div>
+
+<!-- # HAT
+
+<div>
+     <img src="assets/img/product_pics/icon_accessory.png" style="vertical-align:middle;">
+     <span style="font-size:30px">HAT</span>
+</div> -->
+
+**交互类**
+
+## ANGLE
+## BUTTON
+## Dual-BUTTON
+## JOYSTICK
+## CardKB
+
+<div class="item">
+  <a href="/#/zh_CN/unit/angle">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_angle_01.png">
+  </a>
+  <p class="item-title" style="font-style:italic;">ANGLE</p>
+</div>
+
 <div class="item">
   <a href="/#/zh_CN/unit/button">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_button_01.png">
@@ -503,46 +577,24 @@
   <p class="item-title" style="font-style:italic;">CardKB</p>
 </div>
 
-## COLOR
-## TOF
-## HEART
-## RFID
-## ADC
+
+**I / 0  类**
+
+## EXT.IO
 ## DAC
+## RELAY
+## HUB
+## PaHUB
+## PbHUB
+## 3.96Port
+## M5-BIT
+## PROTO
 
 <div class="item">
-  <a href="/#/zh_CN/unit/color">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_color_01.png">
+  <a href="/#/zh_CN/unit/extio">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_extio_01.png">
   </a>
-  <p class="item-title" style="font-style:italic;">COLOR</p>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/tof">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_tof_01.png">
-  </a>
-  <p class="item-title" style="font-style:italic;">TOF</p>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/heart">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_heart_01.png">
-  </a>
-  <p class="item-title" style="font-style:italic;">HEART</p>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/rfid">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_rfid_01.png">
-  </a>
-  <p class="item-title" style="font-style:italic;">RFID</p>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/adc">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_adc_01.png">
-  </a>
-  <p class="item-title" style="font-style:italic;">ADC</p>
+  <p class="item-title" style="font-style:italic;">EXT.IO</p>
 </div>
 
 <div class="item">
@@ -552,29 +604,6 @@
   <p class="item-title" style="font-style:italic;">DAC</p>
 </div>
 
-## MAKEY
-## RGB
-## RELAY
-## HUB
-## PaHUB
-## PbHUB
-## 3.96Port
-## PROTO
-
-<div class="item">
-  <a href="/#/zh_CN/unit/makey">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_makey_01.png">
-  </a>
-  <p class="item-title" style="font-style:italic;">MAKEY</p>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/rgb">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_rgb_01.png">
-  </a>
-  <p class="item-title" style="font-style:italic;">RGB</p>
-</div>
-
 <div class="item">
   <a href="/#/zh_CN/unit/relay">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_relay_01.png">
@@ -598,7 +627,7 @@
 
 <div class="item">
   <a href="/#/zh_CN/unit/pbhub">
-     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_pbhub_p1.png">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_pbhub_p1.png">
   </a>
   <p class="item-title" style="font-style:italic;">PbHUB</p>
 </div>
@@ -610,6 +639,14 @@
   <p class="item-title" style="font-style:italic;">3.96Port</p>
 </div>
 
+<div class="item">
+  <a href="/#/zh_CN/unit/m5-bit">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_m5bit_01.jpg">
+  </a>
+  <p class="item-title" style="font-style:italic;">M5:bit</p>
+</div>
+
+
 <div class="item">
   <a href="/#/zh_CN/unit/proto">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_proto_01.png">
@@ -617,19 +654,18 @@
   <p class="item-title" style="font-style:italic;">PROTO</p>
 </div>
 
-## EXT.IO
+
+**通讯类**
+
+## IR
 ## RS485
-## GPS
-## FINGER
-## WEIGHT
-## TRACE
-## M5-BIT
+## RFID
 
 <div class="item">
-  <a href="/#/zh_CN/unit/extio">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_extio_01.png">
+  <a href="/#/zh_CN/unit/ir">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_ir_01.png">
   </a>
-  <p class="item-title" style="font-style:italic;">EXT.IO</p>
+  <p class="item-title" style="font-style:italic;">IR</p>
 </div>
 
 <div class="item">
@@ -640,46 +676,13 @@
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/unit/gps">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_gps_01.png">
+  <a href="/#/zh_CN/unit/rfid">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_rfid_01.png">
   </a>
-  <p class="item-title" style="font-style:italic;">GPS</p>
+  <p class="item-title" style="font-style:italic;">RFID</p>
 </div>
 
-<div class="item">
-  <a href="/#/zh_CN/unit/finger">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_finger_01.png">
-  </a>
-  <p class="item-title" style="font-style:italic;">FINGER</p>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/weight">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_weight_01.png">
-  </a>
-  <p class="item-title" style="font-style:italic;">WEIGHT</p>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/trace">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_trace_01.png">
-  </a>
-  <p class="item-title" style="font-style:italic;">TRACE</p>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/m5-bit">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_m5bit_01.jpg">
-  </a>
-  <p class="item-title" style="font-style:italic;">M5:bit</p>
-</div>
-
-<!-- # HAT
-
-<div>
-     <img src="assets/img/product_pics/icon_accessory.png" style="vertical-align:middle;">
-     <span style="font-size:30px">HAT</span>
-</div> -->
+**C-HAT 类**
 
 ## HAT-ENV
 ## HAT-PIR
@@ -707,13 +710,15 @@
 </div>
 
 
+**视觉类**
+
 ## RGB_LED
 ## CatEar
 ## HEX
 ## NeoFlash
 ## BUTTERFLY
+## RGB
 
-**Visual class**
 
 <div class="item">
   <a href="/#/zh_CN/unit/neopixel">
@@ -750,8 +755,14 @@
   <p class="item-title" style="font-style:italic;">BUTTERFLY</p>
 </div>
 
-***
+<div class="item">
+  <a href="/#/zh_CN/unit/rgb">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_rgb_01.png">
+  </a>
+  <p class="item-title" style="font-style:italic;">RGB</p>
+</div>
 
+***
 # Application
 
 <div>
@@ -802,8 +813,8 @@
   <p class="item-title" style="font-style:italic;">Demo Board</p>
 </div>
 
-
 ***
+<!--Below is adding on  -->
 
 # Accessory
 
@@ -861,8 +872,8 @@
   <p class="item-title" style="font-style:italic;">Frame</p>
 </div>
 
-***  
 
+***  
 
 
 
@@ -908,7 +919,6 @@
 </div>
 
 
-
 *** 
 # Tools
 
diff --git a/docs/zh_CN/related_documents.md b/docs/zh_CN/related_documents.md
index b6ed78fa..a8fe0d2d 100644
--- a/docs/zh_CN/related_documents.md
+++ b/docs/zh_CN/related_documents.md
@@ -49,3 +49,11 @@
   </div>
 </div>
 
+<div class="container mt-3">
+  <div class="media border p-3">
+    <img src="assets/img/related_documents/Page_logo/VScode.jpg" class="mr-3 mt-3 " style="width:50px; margin-top:5px!important">
+    <div class="media-body">
+      <a href="https://github.com/m5stack/UIFlow-Code"><p style="margin-top:20px">VScode-M5Stack插件</p></a>
+    </div>
+  </div>
+</div>
\ No newline at end of file