diff --git a/docs/assets/img/getting_started_pics/m5stickc/m5stickc_quick_start_arduino_mac_01.png b/docs/assets/img/getting_started_pics/m5stickc/m5stickc_quick_start_arduino_mac_01.png
new file mode 100644
index 00000000..e673dd68
Binary files /dev/null and b/docs/assets/img/getting_started_pics/m5stickc/m5stickc_quick_start_arduino_mac_01.png differ
diff --git a/docs/assets/img/related_documents/Arduino_IDE/Arduino_5.jpg b/docs/assets/img/related_documents/Arduino_IDE/Arduino_5.jpg
index 6f94d716..2793c298 100644
Binary files a/docs/assets/img/related_documents/Arduino_IDE/Arduino_5.jpg and b/docs/assets/img/related_documents/Arduino_IDE/Arduino_5.jpg differ
diff --git a/docs/en/hat/hat-bugc.md b/docs/en/hat/hat-bugc.md
index 94d4095e..d26fa732 100644
--- a/docs/en/hat/hat-bugc.md
+++ b/docs/en/hat/hat-bugc.md
@@ -61,12 +61,10 @@ The Bugc base needs to be used in conjunction with the M5StickC controller. The
## Code
-- **[Arduino](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/BUGC)**
-
-### 1. UIFlow
-
*To get UIFlow example, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/BugC/UIFlow).*
+- **[Arduino](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/hat-joystick/Arduino/Joystick_hat)**
+
## Video
diff --git a/docs/en/hat/hat-powerc.md b/docs/en/hat/hat-powerc.md
new file mode 100644
index 00000000..cb10bf40
--- /dev/null
+++ b/docs/en/hat/hat-powerc.md
@@ -0,0 +1,35 @@
+# 18650C HAT {docsify-ignore-all}
+
+
+
+***
+
+:memo:**[Description](#Description)** 🛒**[Purchase](https://m5stack.com/products/m5stickc-18650)** :clapper:**[Related Video](#Related-Video)**
+
+## 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.
+
+
+
+## Product Features
+
+- Chargable
+- Battery replaceable
+
+
+## Weight & Dimension
+
+- Dimension：150mm x 25mm x 25mm
+- Weight：277g
+
+## Include
+
+- 1x 18650 HAT
+
+## Related Video
+
+
\ No newline at end of file
diff --git a/docs/en/quick_start/m5stickc/m5stickc_quick_start_with_arduino_MacOS.md b/docs/en/quick_start/m5stickc/m5stickc_quick_start_with_arduino_MacOS.md
index 9c3c2bfe..d113ec83 100644
--- a/docs/en/quick_start/m5stickc/m5stickc_quick_start_with_arduino_MacOS.md
+++ b/docs/en/quick_start/m5stickc/m5stickc_quick_start_with_arduino_MacOS.md
@@ -89,7 +89,7 @@ Open Arduino IDE, select `Tools`->`Board`->`M5StickC` , `Tools` -> `Ports`(choos
Click `File`->`Examples`->`M5StackC`->`Basic`->`FactoryTest`
-
+
Click `Upload`, to flash the code to the device.
diff --git a/docs/zh_CN/hat/hat-bugc.md b/docs/zh_CN/hat/hat-bugc.md
index e7165813..f03bead3 100644
--- a/docs/zh_CN/hat/hat-bugc.md
+++ b/docs/zh_CN/hat/hat-bugc.md
@@ -57,12 +57,10 @@ Bugc底座需要结合M5StickC控制器使用.在底座上，配备了四个由S
## Code
-- **[Arduino](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/BUGC)**
-
-### 1. UIFlow 例程
-
[点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/BugC/UIFlow)，获取完整程序.
+- **[Arduino](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/hat-joystick/Arduino/Joystick_hat)**
+
## 相关视频
+
+***
+
+:memo:**[Description](#Description)** 🛒**[Purchase](https://m5stack.com/products/m5stickc-18650)** :clapper:**[Related Video](#Related-Video)**
+
+## 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.
+
+
+
+## Product Features
+
+- Chargable
+- Battery replaceable
+
+
+## Weight & Dimension
+
+- Dimension：150mm x 25mm x 25mm
+- Weight：277g
+
+## Include
+
+- 1x 18650 HAT
+
+## Related Video
+
+
\ No newline at end of file
diff --git a/docs/en/quick_start/m5stickc/m5stickc_quick_start_with_arduino_MacOS.md b/docs/en/quick_start/m5stickc/m5stickc_quick_start_with_arduino_MacOS.md
index 9c3c2bfe..d113ec83 100644
--- a/docs/en/quick_start/m5stickc/m5stickc_quick_start_with_arduino_MacOS.md
+++ b/docs/en/quick_start/m5stickc/m5stickc_quick_start_with_arduino_MacOS.md
@@ -89,7 +89,7 @@ Open Arduino IDE, select `Tools`->`Board`->`M5StickC` , `Tools` -> `Ports`(choos
Click `File`->`Examples`->`M5StackC`->`Basic`->`FactoryTest`
-
+
Click `Upload`, to flash the code to the device.
diff --git a/docs/zh_CN/hat/hat-bugc.md b/docs/zh_CN/hat/hat-bugc.md
index e7165813..f03bead3 100644
--- a/docs/zh_CN/hat/hat-bugc.md
+++ b/docs/zh_CN/hat/hat-bugc.md
@@ -57,12 +57,10 @@ Bugc底座需要结合M5StickC控制器使用.在底座上，配备了四个由S
## Code
-- **[Arduino](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/BUGC)**
-
-### 1. UIFlow 例程
-
[点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/BugC/UIFlow)，获取完整程序.
+- **[Arduino](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/hat-joystick/Arduino/Joystick_hat)**
+
## 相关视频