diff --git a/docs/assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/input_apikey.png b/docs/assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/input_apikey.png
index 6504573f..4cda7af0 100644
Binary files a/docs/assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/input_apikey.png and b/docs/assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/input_apikey.png differ
diff --git a/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_03.png b/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_03.png
new file mode 100644
index 00000000..f61d96d6
Binary files /dev/null and b/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_03.png differ
diff --git a/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_04.png b/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_04.png
new file mode 100644
index 00000000..93babd6a
Binary files /dev/null and b/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_04.png differ
diff --git a/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_05.png b/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_05.png
new file mode 100644
index 00000000..33cf3f92
Binary files /dev/null and b/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_05.png differ
diff --git a/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_06.png b/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_06.png
new file mode 100644
index 00000000..c6c43a6e
Binary files /dev/null and b/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_06.png differ
diff --git a/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_07.png b/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_07.png
new file mode 100644
index 00000000..4f88064d
Binary files /dev/null and b/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_07.png differ
diff --git a/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_08.png b/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_08.png
new file mode 100644
index 00000000..37f12fb1
Binary files /dev/null and b/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_08.png differ
diff --git a/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_09.png b/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_09.png
new file mode 100644
index 00000000..cc44ab3e
Binary files /dev/null and b/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_09.png differ
diff --git a/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_10.png b/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_10.png
new file mode 100644
index 00000000..8f4bb677
Binary files /dev/null and b/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_10.png differ
diff --git a/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_11.png b/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_11.png
new file mode 100644
index 00000000..bcf55863
Binary files /dev/null and b/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_11.png differ
diff --git a/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_12.png b/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_12.png
new file mode 100644
index 00000000..94ed37cf
Binary files /dev/null and b/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_12.png differ
diff --git a/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_13.png b/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_13.png
new file mode 100644
index 00000000..e9b39914
Binary files /dev/null and b/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_13.png differ
diff --git a/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_14.png b/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_14.png
new file mode 100644
index 00000000..1a2d9fb6
Binary files /dev/null and b/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_14.png differ
diff --git a/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_15.png b/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_15.png
new file mode 100644
index 00000000..ee79223f
Binary files /dev/null and b/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_15.png differ
diff --git a/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_16.png b/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_16.png
new file mode 100644
index 00000000..2ebfdced
Binary files /dev/null and b/docs/assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_16.png differ
diff --git a/docs/en/qs.md b/docs/en/qs.md
index 6cb95726..de74074d 100644
--- a/docs/en/qs.md
+++ b/docs/en/qs.md
@@ -27,7 +27,7 @@
     <tr>
         <td align="center"><a href="#/en/quick_start/m5core/m5stack_core_get_started_Arduino_MacOS">Arduino-Mac</a> / <a href="#/en/quick_start/m5core/m5stack_core_get_started_Arduino_Windows">Arduino-Win</a> / <a href="#/en/quick_start/m5core/m5stack_core_get_started_MicroPython">UIFlow</a></td>
         <td align="center"><a href="#/en/quick_start/m5stick/m5stick_quick_start_with_Arduino_MacOS">Arduino-Mac</a> / <a href="#/en/quick_start/m5stick/m5stick_quick_start_with_Arduino_Windows">Arduino-Win</a> / <a href="#/en/quick_start/m5stick/m5stick_quick_start_with_uiflow">UIFlow</a></td>
-        <td align="center"><a href="#/en/quick_start/m5stickc/m5stickc_quick_start_with_arduino_Windows">Arduino-Win</a></td>
+        <td align="center"><a href="#/en/quick_start/m5stickc/m5stickc_quick_start_with_arduino_Windows">Arduino-Win</a> / <a href="#/en/quick_start/m5stickc/m5stickc_quick_start_with_uiflow">UIFlow</a></td>
     </tr>
 </table>
 
diff --git a/docs/en/quick_start/m5stickc/m5stickc_quick_start_with_uiflow.md b/docs/en/quick_start/m5stickc/m5stickc_quick_start_with_uiflow.md
index b691ac5d..3976fe0f 100644
--- a/docs/en/quick_start/m5stickc/m5stickc_quick_start_with_uiflow.md
+++ b/docs/en/quick_start/m5stickc/m5stickc_quick_start_with_uiflow.md
@@ -20,7 +20,7 @@ Access [M5Stack Official Website](http://www.m5stack.com/download), and download
 
 #### (2) Burn the firmware
 
-Connect M5Core to the computer via the USB Type-C cable, unzip the M5Burner archive you just downloaded, and double-click the executable `M5Burner.exe`
+Connect M5StickC to the computer via the USB Type-C cable, unzip the M5Burner archive you just downloaded, and double-click the executable `M5Burner.exe`
 
 Select the `serial number` and **`115200 baud rate`** that the board is connected to the computer, and select the latest version of UIFlow firmware for M5StickC
 
@@ -30,69 +30,79 @@ Click `Burn` for downloading UIFlow firmware
 
 The following interface appears, indicating that the firmware is successfully burned.
 
-<img src="assets/img/getting_started_pics/how_to_burn_firmware/qs_uiflow_02.png">
+<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_02.png">
+
+## 3. Wi-Fi Setting
+
+#### (1) Select `SETUP`
+
+After successfully burning the UIFlow firmware, click the `Power Switch` button in the lower left corner of the M5StickC.
+
+M5StickC will display the AP name as the shown below
+
+<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_03.png">
 
 
-<!-- 1. **[Update firmware](#update-firmware)**
+#### (2) Connect to AP
 
-2. **[Power on](#power-on)**
+Turn on Wi-Fi on your phone or computer, then connect to the M5StickC hotspot `AP` displayed on the screen ( For example, the M5-80f0 is now displayed ). After the connection is successful, open a browser and enter the URL `192.168.4.1`, then select Wi-Fi that can be connected to the network, enter the Wi-Fi password. ( Now, the networkable Wi-Fi is M5 )
 
-3. **[Setting environment](#setting-environment)**
+<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_04.png">
 
-    - **[Step1. Setting WIFI](#step1-setting-wifi)**
+#### (3) Connect to Wi-Fi
 
-    - **[Step2. Setting API Key](#step2-setting-api-key)**
+After M5StickC successfully connects to a networkable Wi-Fi (here M5), the screen will display `APIKEY`.
 
-4. **[Example](#example)**
+*Description of APIKEY: APIKEY is the device unique identifier. As long as the current UIFlow is connected to which device's APIKEY, The programming code will be downloaded to that device.*
 
-5. **[Related Video](#Related-Video)**
+<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_05.png">
 
-6. **[UIFlow Tutorial](https://m5stack.github.io/UIFlow_doc/cn/index.html)** -->
+The status of the network icon on the screen:
 
-## Update firmware
+* Green means M5StickC successfully connected to UIFlow Server, that is online status
 
->Update the stick to the latest firmware version for a better experience.
+* Red means be offline status
 
-*If you need to update or burn firmware by yourself, please click [here](en/related_documents/how_to_burn_firmware)*
+## 4. Program
 
-<img src="assets/img/getting_started_pics/m5stick/stick_03.png">
+#### (1) Connect to UIFlow
 
-## Power on
+Now If you are programming with a computer, enter the URL `flow.m5stack.com` on your computer's browser
 
->The button located at the bottom left of stick is the power button, click to turn it on, press again to reset when running. If you want to let stick enter deep sleep status, you need to press the power button twice quickly.
+<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_06.png">
 
->In addition to the power button, the stick also provides another button `A` for you to program.
+Every time before you upload the code to M5StickC through UIFlow, make sure that UIFlow is connected to the M5StickC you want to program.
 
-<img src="assets/img/getting_started_pics/m5stick/stick_02.png" width="300" height="300">
+So you need to click on the gear in the upper right corner of the UIFlow IDE page and enter APIKEY on your M5StickC screen in the pop-up dialog box. Click `Save`, then UIFlow will connect to M5StickC.
 
-## Setting environment
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/click_for_apikey.png">
 
-### Step1. Setting WIFI
+<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_07.png">
 
-When you turn on stick for the first time, it will enter the configuration page by default. And it's OLED screen will display it's own **AP name(SSID)** and **ap-setting address(192.168.4.1)**.
+Now you can start programming with UIFlow!
 
-At this time, you can use the mobile phone to connect to this hotspot. After the connection is successful, use the browser to enter the network configuration address, enter the WIFI configuration page, enter the personal WIFI information, click `Save`, and wait for the connection to succeed.
+#### (2) Programming example
 
-<img src="assets/img/getting_started_pics/m5stick/stick_04.png">
+Drag and drop the `Lable` in the upper left corner of the UIFlow IDE to the UI interface of `M5StickC`, change their `text` and `font`
 
-## Step2. Setting API Key
+<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_10.png">
 
-After the WIFI is successfully configured, stick will automatically reset and enter the programming mode. When the screen displays “Done”, it indicates that the network has been successfully connected. Access our WebIDE [flow.m5stack.com](http://flow.m5stack.com/) for programming.
+From `Hardware` -> `LED`, drag a block named `LED ON` and another block named `LED OFF`
 
-Click the `Settings` button at the top right of the [WebIDE](http://flow.m5stack.com/), enter the **API Key** displayed on the stick screen and click `Save`. Now, start programming.
+From `Timer`, drag a block named `Wait 1s`
 
-<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_m5stick/uiflow_setting.png">
+<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_13.png">
 
-<img src="assets/img/getting_started_pics/m5stick/stick_05.png">
+Click the `Run` button in the upper right corner of the page to execute the effect
 
-## Supplement
+<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_16.png">
 
->If clicked `Download`, stick will run the last downloaded program straight. In this case, if you want to enter programming mode, you need to press `A` button once the stick screen disappears `UIFlow` logo after it was reset.
+<mark>**The Result:**</mark>
 
-<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_m5stick/uiflow_download.png">
+<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_14.png">
 
->If you want to configurate a new wifi for stick, you need to press and hold `A` button for more than one second and then release once the stick screen disappears `UIFlow` logo after it was reset.
 
+<!--
 ## Example
 
 >Click and download [example](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Core/M5Stick/UIFlow). And open this example code in UIFlow, then run it. Program phenomenon: White squares will scroll back and forth on the screen.
@@ -117,4 +127,4 @@ Click the `Settings` button at the top right of the [WebIDE](http://flow.m5stack
 
 <video width="500" height="315" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/LukeVideo/Getting%20started%20with%20UI%20flow%20(Mac_Linux).mp4" type="video/mp4">
-</video>
\ No newline at end of file
+</video> -->
\ No newline at end of file
diff --git a/docs/ja/quick_start/m5stick/m5stick_quick_start_with_arduino_MacOS.md b/docs/ja/quick_start/m5stick/m5stick_quick_start_with_arduino_MacOS.md
index 346e1f6f..3221ad20 100644
--- a/docs/ja/quick_start/m5stick/m5stick_quick_start_with_arduino_MacOS.md
+++ b/docs/ja/quick_start/m5stick/m5stick_quick_start_with_arduino_MacOS.md
@@ -2,6 +2,8 @@
 
 ?> *環境設定の前に、シリアルドライバがインストールされているか確認いてください。もしまだの場合は[シリアル接続の確立方法](ja/related_documents/establish_serial_connection)を参照してください。*
 
+<img src="assets/img/getting_started_pics/m5stick/stick_01.png"><img src="assets/img/getting_started_pics/m5stick/stick_06.png"><img src="assets/img/macos-logo.png">
+
 ## テキストチュートリアル
 
 1. [環境設定](#環境設定)
diff --git a/docs/ja/quick_start/m5stick/m5stick_quick_start_with_arduino_Windows.md b/docs/ja/quick_start/m5stick/m5stick_quick_start_with_arduino_Windows.md
index bda252c3..ed4754de 100644
--- a/docs/ja/quick_start/m5stick/m5stick_quick_start_with_arduino_Windows.md
+++ b/docs/ja/quick_start/m5stick/m5stick_quick_start_with_arduino_Windows.md
@@ -2,6 +2,8 @@
 
 ?> `USB driver`、`Git`、`Arduino IDE` をインストールしているか確認してください。 もしまだの場合は、 [シリアル接続の確立方法](ja/related_documents/establish_serial_connection) と [GitとArduino IDEのインストール方法](ja/related_documents/how_to_install_git_and_arduino)を参照してください。
 
+<img src="assets/img/getting_started_pics/m5stick/stick_01.png"><img src="assets/img/getting_started_pics/m5stick/stick_06.png"><img src="assets/img/windows-logo.png">
+
 ## コンテンツ
 
 1. [環境設定](#環境設定)
diff --git a/docs/ja/quick_start/m5stickc/m5stickc_quick_start_with_arduino_Windows.md b/docs/ja/quick_start/m5stickc/m5stickc_quick_start_with_arduino_Windows.md
index 12ec8df0..58e4b17f 100644
--- a/docs/ja/quick_start/m5stickc/m5stickc_quick_start_with_arduino_Windows.md
+++ b/docs/ja/quick_start/m5stickc/m5stickc_quick_start_with_arduino_Windows.md
@@ -1,5 +1,7 @@
 # M5StickC クイックスタート {docsify-ignore-all}
 
+<img src="assets/img/getting_started_pics/m5stickc/m5stickc_06.png"><img src="assets/img/windows-logo.png">
+
 ## コンテンツ
 
 **[1. Arduino IDE インストール](#_1-Arduino-IDE-インストール)**
diff --git a/docs/zh_CN/quick_start/m5stick/m5stick_quick_start_with_arduino_MacOS.md b/docs/zh_CN/quick_start/m5stick/m5stick_quick_start_with_arduino_MacOS.md
index 4802c9f9..42a91dc2 100644
--- a/docs/zh_CN/quick_start/m5stick/m5stick_quick_start_with_arduino_MacOS.md
+++ b/docs/zh_CN/quick_start/m5stick/m5stick_quick_start_with_arduino_MacOS.md
@@ -4,6 +4,8 @@
 
 ?> 在配置环境之前，先确保您已经安装了 USB 驱动，并且 M5Stick 能通过串口与 PC 通信。 如果还没的话，看这篇文章[如何建立串口连接](zh_CN/related_documents/establish_serial_connection).
 
+<img src="assets/img/getting_started_pics/m5stick/stick_01.png"><img src="assets/img/getting_started_pics/m5stick/stick_06.png"><img src="assets/img/macos-logo.png">
+
 ## 文本教程
 
 1. [配置环境](#配置环境)
diff --git a/docs/zh_CN/quick_start/m5stick/m5stick_quick_start_with_arduino_Windows.md b/docs/zh_CN/quick_start/m5stick/m5stick_quick_start_with_arduino_Windows.md
index 74509827..9426623e 100644
--- a/docs/zh_CN/quick_start/m5stick/m5stick_quick_start_with_arduino_Windows.md
+++ b/docs/zh_CN/quick_start/m5stick/m5stick_quick_start_with_arduino_Windows.md
@@ -2,6 +2,8 @@
 
 ?> 建议你先确认安装了 `USB驱动` 和 `Arduino IDE`。 如果还没的话，阅读这两篇文档[如何建立串口连接](zh_CN/related_documents/establish_serial_connection)和[安装 Arduino IDE](zh_CN/related_documents/how_to_install_git_and_arduino)。
 
+<img src="assets/img/getting_started_pics/m5stick/stick_01.png"><img src="assets/img/getting_started_pics/m5stick/stick_06.png"><img src="assets/img/windows-logo.png">
+
 ## 目录
 
 1. [配置环境](#配置环境)
diff --git a/docs/zh_CN/quick_start/m5stickc/m5stickc_quick_start_with_arduino_Windows.md b/docs/zh_CN/quick_start/m5stickc/m5stickc_quick_start_with_arduino_Windows.md
index 39a25049..b0c2a9f7 100644
--- a/docs/zh_CN/quick_start/m5stickc/m5stickc_quick_start_with_arduino_Windows.md
+++ b/docs/zh_CN/quick_start/m5stickc/m5stickc_quick_start_with_arduino_Windows.md
@@ -2,6 +2,8 @@
 
 <!-- ?> 建议你先确认安装了 `USB驱动` 和 `Arduino IDE`。 如果还没的话，阅读这两篇文档[如何建立串口连接](zh_CN/related_documents/establish_serial_connection)和[安装 Arduino IDE](zh_CN/related_documents/how_to_install_git_and_arduino)。 -->
 
+<img src="assets/img/getting_started_pics/m5stickc/m5stickc_06.png"><img src="assets/img/windows-logo.png">
+
 ## 目录
 
 **[1. 安装 Arduino IDE](#_1-安装-Arduino-IDE)**