diff --git a/docs/zh_CN/hat/hat-8servos.md b/docs/zh_CN/hat/hat-8servos.md
index 71a2e20c..b6634e48 100644
--- a/docs/zh_CN/hat/hat-8servos.md
+++ b/docs/zh_CN/hat/hat-8servos.md
@@ -90,13 +90,14 @@
 
 ## 案例程序
 
+### 1. Arduino
+
+[点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/8serves-hat/Arduino)，获取完整程序.
+
 ### 2. UIFlow
 
 <img src="assets\img\product_pics\hat\8servos_hat\8servos.webp" width="30%" height="30%">
 
-### 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 57bd6f66..ab1f19f6 100644
--- a/docs/zh_CN/hat/hat-adc.md
+++ b/docs/zh_CN/hat/hat-adc.md
@@ -77,16 +77,16 @@
 
 ## 案例程序
 
+### 1. Arduino
+
+以下代码仅为片段，如需获取完整代码，[请点击此处.](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/ADC)
+
 ### 2. UIFlow
 
 打开 http://flow.m5stack.com 点击Demo载入UIFlow例程
 
 <img src="assets/img/product_pics/hat/adc_hat/adc.webp" width="80%" height="80%">
 
-### 1. Arduino
-
-以下代码仅为片段，如需获取完整代码，[请点击此处.](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/ADC)
-
 ### 管脚映射
 
 <table>
diff --git a/docs/zh_CN/hat/hat-beetlec.md b/docs/zh_CN/hat/hat-beetlec.md
index 33b24c0b..a7fc22d1 100644
--- a/docs/zh_CN/hat/hat-beetlec.md
+++ b/docs/zh_CN/hat/hat-beetlec.md
@@ -90,14 +90,14 @@ Beetlec底座需要结合M5StickC控制器使用.在底座上，配备了两个
 
 ## 案例程序
 
-### 2. UIFlow
-
-<img src="assets\img\product_pics\hat\beetlec_hat\beetlec.webp" width="60%" height="60%">
-
 ### 1. Arduino
 
 [点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/beetleC/stickC/beetleC)，获取完整程序.
 
+### 2. UIFlow
+
+<img src="assets\img\product_pics\hat\beetlec_hat\beetlec.webp" width="60%" height="60%">
+
 ## 相关视频
 
 <video class="video_size" controls>
diff --git a/docs/zh_CN/hat/hat-bugc.md b/docs/zh_CN/hat/hat-bugc.md
index 6acdaa0f..e9efe0fd 100644
--- a/docs/zh_CN/hat/hat-bugc.md
+++ b/docs/zh_CN/hat/hat-bugc.md
@@ -74,14 +74,14 @@ Bugc底座需要结合M5StickC控制器使用.在底座上，配备了四个由S
 
 ## 案例程序
 
-### 2. UIFlow
-
-<img src="assets\img\product_pics\hat\bugc_hat\bugc.webp" width="30%" height="30%">
-
 ### 1. Arduino
 
 [点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/BugC/bugC)获取完整代码
 
+### 2. UIFlow
+
+<img src="assets\img\product_pics\hat\bugc_hat\bugc.webp" width="30%" height="30%">
+
 ## 相关视频
 
 <video class="video_size" controls>
diff --git a/docs/zh_CN/hat/hat-dac.md b/docs/zh_CN/hat/hat-dac.md
index d5c68409..f0c88a62 100644
--- a/docs/zh_CN/hat/hat-dac.md
+++ b/docs/zh_CN/hat/hat-dac.md
@@ -79,16 +79,16 @@
 
 ## 案例程序
 
+### 1. Arduino
+
+[点击此处](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/DAC)获取完整程序.
+
 ### 2. UIFlow
 
 打开 http://flow.m5stack.com 点击Demo载入UIFlow例程
 
 <img src="assets/img/product_pics/hat/dac_hat/dac.webp" width="80%" height="80%">
 
-### 1. Arduino
-
-[点击此处](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/DAC)获取完整程序.
-
 ## 相关链接
 
 -  **Datasheet** - [MCP4725](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/hat/MCP4725_en.pdf)
diff --git a/docs/zh_CN/hat/hat-env.md b/docs/zh_CN/hat/hat-env.md
index eee9abdc..d332218c 100644
--- a/docs/zh_CN/hat/hat-env.md
+++ b/docs/zh_CN/hat/hat-env.md
@@ -107,18 +107,16 @@
 
 ## 案例程序
 
+### 1. Arduino
+
+[点击此处](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/ENV)，获取完整程序.
+
 ### 2. UIFlow
 
 打开 http://flow.m5stack.com 点击Demo载入UIFlow例程
 
 <img src="assets/img/product_pics/hat/env_hat/env.webp">
 
-### 1. Arduino
-
-[点击此处](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/ENV)，获取完整程序.
-
-
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/m5stickc-env-hat';
diff --git a/docs/zh_CN/hat/hat-finger.md b/docs/zh_CN/hat/hat-finger.md
index e5e1c26c..4f1470cb 100644
--- a/docs/zh_CN/hat/hat-finger.md
+++ b/docs/zh_CN/hat/hat-finger.md
@@ -82,16 +82,16 @@ UART 参数设置:
 
 ## 案例程序
 
+### 1. Arduino
+
+点击[此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/finger-hat/Arduino/FINGER)查看完整示例
+
 ### 2. UIFlow
 
 打开 http://flow.m5stack.com 点击Demo载入UIFlow例程
 
 <img src="assets/img/product_pics/hat/finger_hat/finger.webp">
 
-### 1. Arduino
-
-点击[此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/finger-hat/Arduino/FINGER)查看完整示例
-
 ## 相关链接
 
 - 通信协议 **[FINGER 串口通信协议](https://github.com/m5stack/M5-Schematic/blob/master/Units/finger/biovo_fingerprint_Protocol_en.DOC)**
diff --git a/docs/zh_CN/hat/hat-joyc.md b/docs/zh_CN/hat/hat-joyc.md
index b6c51b85..b88f7fcf 100644
--- a/docs/zh_CN/hat/hat-joyc.md
+++ b/docs/zh_CN/hat/hat-joyc.md
@@ -68,16 +68,15 @@
 
 ## 案例程序
 
-### 2. UIFlow
-
-<img src="assets\img\product_pics\hat\JoyC_hat\JoyC.webp" width="60%"> 
-
 ### 1. Arduino
 
 配合RoverC使用 [点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/JoyC)，获取完整程序.
 
 单独使用 [点击此处](https://github.com/m5stack/M5StickC/blob/master/examples/Hat/JoyC/JoyC.ino)，获取完整程序.
 
+### 2. UIFlow
+
+<img src="assets\img\product_pics\hat\JoyC_hat\JoyC.webp" width="60%"> 
 
 
 ## 相关视频
diff --git a/docs/zh_CN/hat/hat-joystick.md b/docs/zh_CN/hat/hat-joystick.md
index 45d04471..a213efe1 100644
--- a/docs/zh_CN/hat/hat-joystick.md
+++ b/docs/zh_CN/hat/hat-joystick.md
@@ -109,14 +109,14 @@
 
 ## 案例程序
 
-### 2. UIFlow
-
-<img src="assets\img\product_pics\hat\joystick_hat\joystick.webp" width="60%">
-
 ### 1. Arduino
 
 点击[此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/hat-joystick/Arduino/Joystick_hat)下载完整代码
 
+### 2. UIFlow
+
+<img src="assets\img\product_pics\hat\joystick_hat\joystick.webp" width="60%">
+
 ## 管脚映射
 
 <table>
diff --git a/docs/zh_CN/hat/hat-pir.md b/docs/zh_CN/hat/hat-pir.md
index 39656e23..f1741a88 100644
--- a/docs/zh_CN/hat/hat-pir.md
+++ b/docs/zh_CN/hat/hat-pir.md
@@ -89,16 +89,16 @@
 
 ## 案例程序
 
+### 1. Arduino
+
+[点击此处](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/PIR)获取完整程序
+
 ### 2. UIFlow
 
 打开 http://flow.m5stack.com 点击 Demo 载入uiflow例程
 
 <img src="assets/img/product_pics/hat/pir_hat/pir.webp">
 
-### 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 f2a2cae9..3a2c5eea 100644
--- a/docs/zh_CN/hat/hat-powerc.md
+++ b/docs/zh_CN/hat/hat-powerc.md
@@ -72,16 +72,16 @@
 
 ## 案例程序
 
+### 1. Arduino
+
+获取完整代码[点击这里](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/PowerC/PowerC)
+
 ### 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%">
 
-### 1. Arduino
-
-获取完整代码[点击这里](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/PowerC/PowerC)
-
 ## EasyLoader
 
 >EasyLoader是一个简洁快速的程序烧录器，其内置了一个产品相关的案例程序，通过简单步骤将其烧录至主控，即可进行一系列的功能验证.**(程序烧录前，请根据设备类型安装相应驱动程序. M5Core型主机[请点击此处查看CP210X驱动安装教程](zh_CN/arduino/arduino_development?id=安装串口驱动)，M5StickC/V/T/ATOM系列可免驱动使用)**
diff --git a/docs/zh_CN/hat/hat-servo.md b/docs/zh_CN/hat/hat-servo.md
index 82822cd8..56690e2e 100644
--- a/docs/zh_CN/hat/hat-servo.md
+++ b/docs/zh_CN/hat/hat-servo.md
@@ -70,14 +70,14 @@
 
 ## 案例程序
 
-### 2. UIFlow
-
-<img src="assets/img/product_pics/hat/servo_hat/servo.webp" width="50%" height="50%">
-
 ### 1. Arduino
 
 [点击此处查看完整程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/servo-hat/Arduino/SERVO)
 
+### 2. UIFlow
+
+<img src="assets/img/product_pics/hat/servo_hat/servo.webp" width="50%" height="50%">
+
 ## 相关视频
 
 <video class="video_size" controls>
diff --git a/docs/zh_CN/hat/hat-spk.md b/docs/zh_CN/hat/hat-spk.md
index 003c8d25..3f66a7d9 100644
--- a/docs/zh_CN/hat/hat-spk.md
+++ b/docs/zh_CN/hat/hat-spk.md
@@ -88,16 +88,16 @@
 
 ## 案例程序
 
+### 1. Arduino
+
+[点击此处下载Arduino示例代码](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/SPEAKER)
+
 ### 2. UIFlow
 
 打开 http://flow.m5stack.com 加载Demo示例
 
 <img src="assets\img\product_pics\hat\spk_hat\spk.webp">
 
-### 1. Arduino
-
-[点击此处下载Arduino示例代码](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/SPEAKER)
-
 ### 管脚映射
 
 <table>
diff --git a/docs/zh_CN/hat/hat-tof.md b/docs/zh_CN/hat/hat-tof.md
index 9e42409f..7bc3dced 100644
--- a/docs/zh_CN/hat/hat-tof.md
+++ b/docs/zh_CN/hat/hat-tof.md
@@ -80,13 +80,14 @@
 
 ## 案例程序
 
+### 1. Arduino
+
+[单击此处下载完整Arduino代码](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/tof-hat/Arduino/ToF)
+
 ### 2. UIFlow
 
 <img src="assets\img\product_pics\hat\tof_hat\tof.webp" width="50%">
 
-### 1. Arduino
-
-[单击此处下载完整Arduino代码](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/tof-hat/Arduino/ToF)
 
 ### 管脚映射