diff --git a/docs/assets/img/product_pics/hat/proto_hat/hat_proto_05.jpg b/docs/assets/img/product_pics/hat/proto_hat/hat_proto_05.jpg
new file mode 100644
index 00000000..078520ff
Binary files /dev/null and b/docs/assets/img/product_pics/hat/proto_hat/hat_proto_05.jpg differ
diff --git a/docs/en/hat/hat-ncir.md b/docs/en/hat/hat-ncir.md
new file mode 100644
index 00000000..dc0708d2
--- /dev/null
+++ b/docs/en/hat/hat-ncir.md
@@ -0,0 +1,82 @@
+# Hat NCIR {docsify-ignore-all}
+
+
+
+
+
+***
+
+:memo:**[Description](#Description)** :electric_plug:**[Schematic](#Schematic)** 🛒**[Purchase]()**
**[EasyLoader](#EasyLoader)**
+
+## Description
+
+**NCIR_HAT** is an M5StickC compatible infrared sensor. Same as M5Unit NCIR, this stickc HAT module Integrates MLX90614 which can be used to measure the surface temperature of a human body or other object. Now that it has a cover of a case of stickc HAT, you can pretty much move all the implementations to stickc-based controller, featured with tiny, low-cost and highly-productization.
+
+Unlike most temperature sensors, this sensor measures infrared light bouncing off of remote objects so it can sense temperature without having to touch them physically. Simply point the sensor towards what you want to measure and it will detect the temperature by absorbing IR waves emitted. Because it doesn't have to touch the object it's measuring, it can sense a wider range of temperatures than most digital sensors! It takes the measurement over a 90-degree field of view so it can be handy for determining the average temperature of an area.
+
+The MLX90614 is factory calibrated in wide temperature ranges: -40 to 125 ËšC for the ambient temperature and -70 to 382.2 ËšC for the object temperature. T
+
+Connect with M5Core via GROVE A IIC(0x5A).
+
+
+
+## Product Features
+- M5StickC Compatible
+- Operating voltage: 4.5 to 5.5V
+- Measuring object temperature range: -70°C ~ 382.2°C
+- Measuring ambient temperature range: -40 to 125 ËšC
+- Measurement accuracy at room temperature: ±0.5°C
+- Field of view: 90°
+- Software Development Platform: Arduino, UIFlow(Blockly, Python)
+
+## Include
+
+- 1x NCIR HAT
+
+## APPLICATION
+
+- Body Temperature Measurement
+- Object (biological) Motion Detection
+
+
+## Schematic
+
+
+
+## Links
+
+- **[Official Channel](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
+
+- **[Official forum](http://forum.m5stack.com/)**
+
+
+- **[MLX90614 Datasheet](https://github.com/m5stack/M5-Schematic/blob/master/datasheet/MLX90614-Datasheet-Melexis.pdf)**
+
+
+## EasyLoader
+
+
+
+
+
+>1.EasyLoader is a simple and fast program burner, and each product page has a product-related case program for EasyLoader.
+
+>2.After downloading the software, double-click to run the application, connect the M5 device to the computer via the data cable, select the port parameters, and click **"Burn"** to start burning.
+
+
+## Example
+- **[Arduino](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/NCIR_HAT)**
+
+### Pin Map
+
+
| M5StickC | GPIO0 | GPIO26 | 5V | GND |
| HAT ENV | SCL | SDA | 5V | GND |


+
+
+***
+
+:memo:**[Description](#Description)** :electric_plug:**[Schematic](#Schematic)** 🛒**[Purchase]()**
**[EasyLoader](#EasyLoader)**
+
+## Description
+
+**PROTO_HAT** is a HAT size of universal prototyping board. You can have the total freedom to make your own project as you want it, with prototyping boards that allow laying out the customized circuit to interact with the M5 core GROVE Port.
+
+## Product Features
+- M5StickC Compatible
+- Hole Size: 0.039" 1mm (CNC Drilled)
+- Hole Pitch: 0.1 in - (2.54 mm)
+- Entire Hole Quantity: 40 Holes
+
+## Include
+
+- 1x PROTO unit
+
+## Application
+
+- Prototying
+
+## Schematic
+
+
+
+## Links
+
+- **[Official Channel](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
+
+- **[Official forum](http://forum.m5stack.com/)**
+
+
+
+## EasyLoader
+
+
+
+
+
+>1.EasyLoader is a simple and fast program burner, and each product page has a product-related case program for EasyLoader.
+
+>2.After downloading the software, double-click to run the application, connect the M5 device to the computer via the data cable, select the port parameters, and click **"Burn"** to start burning.
+
+
+## Example
+- **[Arduino](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/ENV)**
+
+
+## Video
+
+- **[Demo Video](https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/PROTO-HAT.mp4)**
+
+
+
diff --git a/docs/en/hat/hat-thermal.md b/docs/en/hat/hat-thermal.md
new file mode 100644
index 00000000..a0ee4554
--- /dev/null
+++ b/docs/en/hat/hat-thermal.md
@@ -0,0 +1,82 @@
+# Hat THERMAL {docsify-ignore-all}
+
+

+
+
+***
+
+:memo:**[Description](#Description)** :electric_plug:**[Schematic](#Schematic)** 🛒**[Purchase]()**
**[EasyLoader](#EasyLoader)**
+
+
+## Description
+
+**THERMAL HAT** is an M5StickC compatible thermal camera. Same as M5Unit THERMAL, this stickc HAT module Integrates MLX90640 which can be used to measure the surface temperature of an object and form a thermographic image by a temperature gradient composed of different surface temperatures. Now that it has a cover of a case of stickc HAT, you can pretty much move all the implementations to stickc-based controller, featured with tiny, low-cost and highly-productization.
+
+
+## Links
+
+- **[Official Channel](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
+
+- **[Official forum](http://forum.m5stack.com/)**
+
+- **[MLX90640 Datasheet](https://github.com/m5stack/M5-Schematic/blob/master/datasheet/MLX90640-Datasheet-Melexis.pdf)**
+
+
+## EasyLoader
+
+
+
+
+
+>1.EasyLoader is a simple and fast program burner, and each product page has a product-related case program for EasyLoader.
+
+>2.After downloading the software, double-click to run the application, connect the M5 device to the computer via the data cable, select the port parameters, and click **"Burn"** to start burning.
+
+
+## Example
+- **[Arduino](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/MLX90640)**
+
+### Pin Map
+
+| M5StickC | GPIO0 | GPIO26 | 5V | GND |
| HAT ENV | SCL | SDA | 5V | GND |
SPK
- + **Visual class**