diff --git a/docs/en/hat/hat-beetlec.md b/docs/en/hat/hat-beetlec.md
index cc5060a4..69fd3d46 100644
--- a/docs/en/hat/hat-beetlec.md
+++ b/docs/en/hat/hat-beetlec.md
@@ -90,7 +90,7 @@ Besides, a power switch is placed at the front.
 
 To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/beetleC/stickC/beetleC)
 
-### 2. UIFlow**
+### 2. UIFlow
 
 <img src="assets\img\product_pics\hat\beetlec_hat\beetlec.webp" width="60%" height="60%">
 
diff --git a/docs/en/hat/hat-cardkb.md b/docs/en/hat/hat-cardkb.md
index 3c4a2aff..17c90446 100644
--- a/docs/en/hat/hat-cardkb.md
+++ b/docs/en/hat/hat-cardkb.md
@@ -90,7 +90,7 @@ The CardKB HAT also offers support for several button combinations (Shift+Key, F
 
 To get the code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/CardKB_HAT)
 
-### 2. UIFLOW
+### 2. UIFlow
 
 <img src="assets/img/product_pics/hat/cardkb_hat/cardkb_hat.webp" width="30%" height="30%">
 
diff --git a/docs/en/hat/hat-joyc.md b/docs/en/hat/hat-joyc.md
index fb10bf53..6c2bc5f0 100644
--- a/docs/en/hat/hat-joyc.md
+++ b/docs/en/hat/hat-joyc.md
@@ -32,6 +32,10 @@
       <td>Resources</td>
       <td>Parameter</td>
    </tr>
+   <tr>
+      <td>Communication protocol</td>
+      <td>I2C：0x38</td>
+   </tr>
    <tr>
       <td>Net weight</td>
       <td>81g</td>
diff --git a/docs/en/hat/hat-joystick.md b/docs/en/hat/hat-joystick.md
index 3830898f..9f524904 100644
--- a/docs/en/hat/hat-joystick.md
+++ b/docs/en/hat/hat-joystick.md
@@ -31,6 +31,10 @@
       <td>Resources</td>
       <td>Parameter</td>
    </tr>
+   <tr>
+      <td>Communication protocol</td>
+      <td>I2C：0x38</td>
+   </tr>
    <tr>
       <td>Net weight</td>
       <td>8g</td>
diff --git a/docs/en/hat/hat-ncir.md b/docs/en/hat/hat-ncir.md
index ab4ccae3..a84b26b4 100644
--- a/docs/en/hat/hat-ncir.md
+++ b/docs/en/hat/hat-ncir.md
@@ -39,6 +39,10 @@ Connect with M5StickC via GOIO 0/26 (I2C add: 0x5A).<br>
       <td>Resources</td>
       <td>Parameter</td>
    </tr>
+   <tr>
+      <td>Communication protocol</td>
+      <td>I2C：0x5A</td>
+   </tr>
    <tr>
       <td>Net weight</td>
       <td>5g</td>
diff --git a/docs/en/hat/hat-thermal.md b/docs/en/hat/hat-thermal.md
index c30eae90..85973158 100644
--- a/docs/en/hat/hat-thermal.md
+++ b/docs/en/hat/hat-thermal.md
@@ -43,6 +43,10 @@ The I2C address is **0x33**. (GOIO 0/26)
       <td>Resources</td>
       <td>Parameter</td>
    </tr>
+   <tr>
+      <td>Communication protocol</td>
+      <td>I2C：0x33</td>
+   </tr>
    <tr>
       <td>Net weight</td>
       <td>8g</td>
diff --git a/docs/en/hat/hat-tof.md b/docs/en/hat/hat-tof.md
index 433121a3..9d510554 100644
--- a/docs/en/hat/hat-tof.md
+++ b/docs/en/hat/hat-tof.md
@@ -41,6 +41,10 @@ Communication Info: I2C, **0x29**, GPIO0/26.
       <td>Resources</td>
       <td>Parameter</td>
    </tr>
+   <tr>
+      <td>Communication protocol</td>
+      <td>I2C：0x29</td>
+   </tr>
    <tr>
       <td>Net weight</td>
       <td>4g</td>
diff --git a/docs/zh_CN/hat/hat-8servos.md b/docs/zh_CN/hat/hat-8servos.md
index ed02933e..71a2e20c 100644
--- a/docs/zh_CN/hat/hat-8servos.md
+++ b/docs/zh_CN/hat/hat-8servos.md
@@ -90,11 +90,11 @@
 
 ## 案例程序
 
-- **UIFlow**
+### 2. UIFlow
 
 <img src="assets\img\product_pics\hat\8servos_hat\8servos.webp" width="30%" height="30%">
 
-- **Arduino**
+### 1. Arduino
 
 [点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/8serves-hat/Arduino)，获取完整程序.
 
diff --git a/docs/zh_CN/hat/hat-adc.md b/docs/zh_CN/hat/hat-adc.md
index 96f9c13a..57bd6f66 100644
--- a/docs/zh_CN/hat/hat-adc.md
+++ b/docs/zh_CN/hat/hat-adc.md
@@ -77,13 +77,13 @@
 
 ## 案例程序
 
-- **UIFlow**
+### 2. UIFlow
 
 打开 http://flow.m5stack.com 点击Demo载入UIFlow例程
 
 <img src="assets/img/product_pics/hat/adc_hat/adc.webp" width="80%" height="80%">
 
-- **Arduino IDE**
+### 1. Arduino
 
 以下代码仅为片段，如需获取完整代码，[请点击此处.](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/ADC)
 
diff --git a/docs/zh_CN/hat/hat-beetlec.md b/docs/zh_CN/hat/hat-beetlec.md
index 9b218ea7..33b24c0b 100644
--- a/docs/zh_CN/hat/hat-beetlec.md
+++ b/docs/zh_CN/hat/hat-beetlec.md
@@ -90,11 +90,11 @@ Beetlec底座需要结合M5StickC控制器使用.在底座上，配备了两个
 
 ## 案例程序
 
-- **UIFlow**
+### 2. UIFlow
 
 <img src="assets\img\product_pics\hat\beetlec_hat\beetlec.webp" width="60%" height="60%">
 
-- **Arduino IDE**
+### 1. Arduino
 
 [点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/beetleC/stickC/beetleC)，获取完整程序.
 
diff --git a/docs/zh_CN/hat/hat-bugc.md b/docs/zh_CN/hat/hat-bugc.md
index d2bdc6bd..6acdaa0f 100644
--- a/docs/zh_CN/hat/hat-bugc.md
+++ b/docs/zh_CN/hat/hat-bugc.md
@@ -74,11 +74,11 @@ Bugc底座需要结合M5StickC控制器使用.在底座上，配备了四个由S
 
 ## 案例程序
 
-- **UIFlow**
+### 2. UIFlow
 
 <img src="assets\img\product_pics\hat\bugc_hat\bugc.webp" width="30%" height="30%">
 
-- **Arduino**
+### 1. Arduino
 
 [点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/BugC/bugC)获取完整代码
 
diff --git a/docs/zh_CN/hat/hat-cardkb.md b/docs/zh_CN/hat/hat-cardkb.md
index d54d0cb4..9c4bffbd 100644
--- a/docs/zh_CN/hat/hat-cardkb.md
+++ b/docs/zh_CN/hat/hat-cardkb.md
@@ -85,11 +85,11 @@
 
 ## 案例程序
 
-- **Arduino IDE**
+### 1. Arduino
 
 [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/CardKB_HAT)获取完整代码
 
-- **UIFlow**
+### 2. UIFlow
 
 <img src="assets/img/product_pics/hat/cardkb_hat/cardkb_hat.webp" width="30%" height="30%">
 
diff --git a/docs/zh_CN/hat/hat-dac.md b/docs/zh_CN/hat/hat-dac.md
index 781629df..d5c68409 100644
--- a/docs/zh_CN/hat/hat-dac.md
+++ b/docs/zh_CN/hat/hat-dac.md
@@ -79,13 +79,13 @@
 
 ## 案例程序
 
-- **UIFlow**
+### 2. UIFlow
 
 打开 http://flow.m5stack.com 点击Demo载入UIFlow例程
 
 <img src="assets/img/product_pics/hat/dac_hat/dac.webp" width="80%" height="80%">
 
-- **Arduino IDE**
+### 1. Arduino
 
 [点击此处](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/DAC)获取完整程序.
 
diff --git a/docs/zh_CN/hat/hat-env.md b/docs/zh_CN/hat/hat-env.md
index a6f8b696..eee9abdc 100644
--- a/docs/zh_CN/hat/hat-env.md
+++ b/docs/zh_CN/hat/hat-env.md
@@ -107,13 +107,13 @@
 
 ## 案例程序
 
-- **UIFlow**
+### 2. UIFlow
 
 打开 http://flow.m5stack.com 点击Demo载入UIFlow例程
 
 <img src="assets/img/product_pics/hat/env_hat/env.webp">
 
-- **Arduino IDE**
+### 1. Arduino
 
 [点击此处](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/ENV)，获取完整程序.
 
diff --git a/docs/zh_CN/hat/hat-finger.md b/docs/zh_CN/hat/hat-finger.md
index 93e0426e..e5e1c26c 100644
--- a/docs/zh_CN/hat/hat-finger.md
+++ b/docs/zh_CN/hat/hat-finger.md
@@ -82,13 +82,13 @@ UART 参数设置:
 
 ## 案例程序
 
-- **UIFlow**
+### 2. UIFlow
 
 打开 http://flow.m5stack.com 点击Demo载入UIFlow例程
 
 <img src="assets/img/product_pics/hat/finger_hat/finger.webp">
 
-- **Arduino**
+### 1. Arduino
 
 点击[此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/finger-hat/Arduino/FINGER)查看完整示例
 
diff --git a/docs/zh_CN/hat/hat-joyc.md b/docs/zh_CN/hat/hat-joyc.md
index 49adb254..b6c51b85 100644
--- a/docs/zh_CN/hat/hat-joyc.md
+++ b/docs/zh_CN/hat/hat-joyc.md
@@ -31,6 +31,10 @@
       <td>规格</td>
       <td>参数</td>
    </tr>
+   <tr>
+      <td>通信协议</td>
+      <td>I2C：0x38</td>
+   </tr>
    <tr>
       <td>净重</td>
       <td>81g</td>
@@ -64,11 +68,11 @@
 
 ## 案例程序
 
-- **UIFlow**
+### 2. UIFlow
 
 <img src="assets\img\product_pics\hat\JoyC_hat\JoyC.webp" width="60%"> 
 
-- **Arduino**
+### 1. Arduino
 
 配合RoverC使用 [点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/JoyC)，获取完整程序.
 
diff --git a/docs/zh_CN/hat/hat-joystick.md b/docs/zh_CN/hat/hat-joystick.md
index 12d997a5..45d04471 100644
--- a/docs/zh_CN/hat/hat-joystick.md
+++ b/docs/zh_CN/hat/hat-joystick.md
@@ -34,6 +34,10 @@
       <td>规格</td>
       <td>参数</td>
    </tr>
+   <tr>
+      <td>通信协议</td>
+      <td>I2C：0x38</td>
+   </tr>
    <tr>
       <td>净重</td>
       <td>8g</td>
@@ -105,11 +109,11 @@
 
 ## 案例程序
 
-- **UIFlow**
+### 2. UIFlow
 
 <img src="assets\img\product_pics\hat\joystick_hat\joystick.webp" width="60%">
 
-- **Arduino**
+### 1. Arduino
 
 点击[此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/hat-joystick/Arduino/Joystick_hat)下载完整代码
 
diff --git a/docs/zh_CN/hat/hat-neoflash.md b/docs/zh_CN/hat/hat-neoflash.md
index 8e565dca..33ed4057 100644
--- a/docs/zh_CN/hat/hat-neoflash.md
+++ b/docs/zh_CN/hat/hat-neoflash.md
@@ -83,7 +83,7 @@
 
 ## 案例程序
 
-- **Arduino**
+### 1. Arduino
 
 点击[此处下载](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/neoflash-hat/Arduino)完整示例
 
diff --git a/docs/zh_CN/hat/hat-pir.md b/docs/zh_CN/hat/hat-pir.md
index 0cf25466..39656e23 100644
--- a/docs/zh_CN/hat/hat-pir.md
+++ b/docs/zh_CN/hat/hat-pir.md
@@ -89,13 +89,13 @@
 
 ## 案例程序
 
-- **UIFlow**
+### 2. UIFlow
 
 打开 http://flow.m5stack.com 点击 Demo 载入uiflow例程
 
 <img src="assets/img/product_pics/hat/pir_hat/pir.webp">
 
-- **Arduino**
+### 1. Arduino
 
 [点击此处](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/PIR)获取完整程序
 
diff --git a/docs/zh_CN/hat/hat-powerc.md b/docs/zh_CN/hat/hat-powerc.md
index 8ff24c48..f2a2cae9 100644
--- a/docs/zh_CN/hat/hat-powerc.md
+++ b/docs/zh_CN/hat/hat-powerc.md
@@ -72,13 +72,13 @@
 
 ## 案例程序
 
-- **UIFlow**
+### 2. UIFlow
 
 UIFlow代码点击这里[下载](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/PowerC/UIFlow)
 
 <img src="assets\img\product_pics\hat\PowerC_hat\PowerC.webp" width="30%">
 
-- **Arduino**
+### 1. Arduino
 
 获取完整代码[点击这里](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/PowerC/PowerC)
 
diff --git a/docs/zh_CN/hat/hat-puppyc.md b/docs/zh_CN/hat/hat-puppyc.md
index 4dab3905..94fdc5ad 100644
--- a/docs/zh_CN/hat/hat-puppyc.md
+++ b/docs/zh_CN/hat/hat-puppyc.md
@@ -66,11 +66,11 @@ PuppyC底座需要结合M5StickC控制器使用，StickC编程后通过I2C协议
 
 ## 案例程序
 
-- **Arduino IDE**
+### 1. Arduino
 
 [点击此处获取Arduino程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/PuppyC)
 
-- **UIFlow**
+### 2. UIFlow
 
 [点击此处获取UIFlow程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/PuppyC/UIFlow)
 
diff --git a/docs/zh_CN/hat/hat-roverc.md b/docs/zh_CN/hat/hat-roverc.md
index 470e8328..f16af2f7 100644
--- a/docs/zh_CN/hat/hat-roverc.md
+++ b/docs/zh_CN/hat/hat-roverc.md
@@ -90,13 +90,13 @@
 
 ## 案例程序
 
-- **Arduino**
+### 1. Arduino
 
 配合JoyC HAT使用 [点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/RoverC)，获取完整程序.
 
 单独使用 [点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Application/RoverC_Arduino_Alone)，获取完整程序.
 
-- **UIFlow**
+### 2. UIFlow
 
 <img src="assets\img\product_pics\hat\roverc_hat\roverC.webp" width="40%" height="30%">
 
diff --git a/docs/zh_CN/hat/hat-servo.md b/docs/zh_CN/hat/hat-servo.md
index 864e78ed..82822cd8 100644
--- a/docs/zh_CN/hat/hat-servo.md
+++ b/docs/zh_CN/hat/hat-servo.md
@@ -70,11 +70,11 @@
 
 ## 案例程序
 
-- **UIFlow**
+### 2. UIFlow
 
 <img src="assets/img/product_pics/hat/servo_hat/servo.webp" width="50%" height="50%">
 
-- **Arduino**
+### 1. Arduino
 
 [点击此处查看完整程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/servo-hat/Arduino/SERVO)
 
diff --git a/docs/zh_CN/hat/hat-spk.md b/docs/zh_CN/hat/hat-spk.md
index 5d4e67ef..003c8d25 100644
--- a/docs/zh_CN/hat/hat-spk.md
+++ b/docs/zh_CN/hat/hat-spk.md
@@ -88,13 +88,13 @@
 
 ## 案例程序
 
-- **UIFlow**
+### 2. UIFlow
 
 打开 http://flow.m5stack.com 加载Demo示例
 
 <img src="assets\img\product_pics\hat\spk_hat\spk.webp">
 
-- **Arduino**
+### 1. Arduino
 
 [点击此处下载Arduino示例代码](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/SPEAKER)
 
diff --git a/docs/zh_CN/hat/hat-thermal.md b/docs/zh_CN/hat/hat-thermal.md
index e162e5a5..b33c0a76 100644
--- a/docs/zh_CN/hat/hat-thermal.md
+++ b/docs/zh_CN/hat/hat-thermal.md
@@ -37,6 +37,10 @@
       <td>规格</td>
       <td>参数</td>
    </tr>
+   <tr>
+      <td>通信协议</td>
+      <td>I2C：0x33</td>
+   </tr>
    <tr>
       <td>净重</td>
       <td>8g</td>
@@ -84,16 +88,16 @@
 
 ## 案例程序
 
-- **UIFlow**
+### 1. Arduino
+
+[点击此处下载Arduino代码](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/MLX90640)
+
+### 2. UIFlow
 
 [获取UIFlow示例点击这里](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/MLX90640/UIFlow)
 
 <img src="assets/img/product_pics/hat/thermal_hat/thermal.webp">
 
-- **Arduino**
-
-[点击此处下载Arduino代码](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/MLX90640)
-
 ## 相关视频
 
 <video class="video_size" controls>
diff --git a/docs/zh_CN/hat/hat-tof.md b/docs/zh_CN/hat/hat-tof.md
index 317ac9c7..9e42409f 100644
--- a/docs/zh_CN/hat/hat-tof.md
+++ b/docs/zh_CN/hat/hat-tof.md
@@ -38,6 +38,10 @@
       <td>规格</td>
       <td>参数</td>
    </tr>
+   <tr>
+      <td>通信协议</td>
+      <td>I2C：0x29</td>
+   </tr>
    <tr>
       <td>净重</td>
       <td>4g</td>
@@ -76,11 +80,11 @@
 
 ## 案例程序
 
-- **UIFlow**
+### 2. UIFlow
 
 <img src="assets\img\product_pics\hat\tof_hat\tof.webp" width="50%">
 
-- **Arduino**
+### 1. Arduino
 
 [单击此处下载完整Arduino代码](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/tof-hat/Arduino/ToF)
 
diff --git a/docs/zh_CN/hat/hat-yun.md b/docs/zh_CN/hat/hat-yun.md
index 4a0e9092..0f15a0bc 100644
--- a/docs/zh_CN/hat/hat-yun.md
+++ b/docs/zh_CN/hat/hat-yun.md
@@ -79,16 +79,16 @@
 
 ## 案例程序
 
-- **UIFlow**
+### 1. Arduino
+
+[单击此处下载Arduino代码](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/hat-yun)
+
+### 2. UIFlow
 
 打开 http://flow.m5stack.com 加载Demo
 
 <img src="assets/img/product_pics/hat/yun_hat/yun.webp">
 
-- **Arduino**
-
-[单击此处下载Arduino代码](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/hat-yun)
-
 ### 管脚映射
 
 <table>