diff --git a/docs/en/mpy/m5stack_lvgl.md b/docs/en/mpy/m5stack_lvgl.md
index 119b4095..cdb5dd47 100644
--- a/docs/en/mpy/m5stack_lvgl.md
+++ b/docs/en/mpy/m5stack_lvgl.md
@@ -38,6 +38,8 @@ screen.del_screen()
## M5Tabview
+
+
>Create tab
```clike
@@ -61,6 +63,8 @@ tab.set_tab_name(index,"new_tab_name")
## M5Textarea
+
+
Create a text area
@@ -80,6 +84,8 @@ Textarea.set_text("Hello World")
## M5Msgbox
+
+
>Create information box
```clike
@@ -102,6 +108,8 @@ Msgbox.get_active_btn_text()
## M5Led
+
+
>Create virtual LED lights
```clike
@@ -126,6 +134,9 @@ Led.set_color(0x00ff00)
## M5Switch
+
+
+
>Create a sliding switch
@@ -158,6 +169,8 @@ Switch.off(offCallback)
## M5Slider
+
+
>Create a slider
@@ -190,6 +203,8 @@ Slider.changed(onChange)
## M5List
+
+
>Create a list
@@ -220,6 +235,8 @@ List.get_label_text(handle)
## M5Line
+
+
>Draw a straight line
```clike
@@ -246,6 +263,8 @@ Line.set_opacity(100)
## M5Label
+
+
Draw text labels
@@ -276,6 +295,8 @@ Label.get_width()
## M5Img
+
+
>Insert image (only png is supported)
```clike
@@ -293,6 +314,9 @@ Img.set_img_src(filename)
## M5Dropdown
+
+
+
>Create drop-down menu
```clike
@@ -328,6 +352,9 @@ coming soon...
## M5Checkbox
+
+
+
>Create a checkbox
```clike
@@ -363,6 +390,9 @@ Checkbox.unchecked(unchecked_cb)
## M5Btn
+
+
+
>Create button
```clike
@@ -397,6 +427,8 @@ Btn.released(released_cb)
## M5Arc
+
+
>Create an arc-shaped dial (parameters: start, end are clockwise angles).
```clike
@@ -414,6 +446,8 @@ Arc.set_angles(0,90)
## M5Bar
+
+
>Create a progress bar.
```clike
@@ -440,6 +474,8 @@ Bar.get_value()
## M5Imgbtn
+
+
>Create picture button.
```clike
diff --git a/docs/image/m5stack_lvgl/M5Arc.webp b/docs/image/m5stack_lvgl/M5Arc.webp
new file mode 100644
index 00000000..5ae5c8a5
Binary files /dev/null and b/docs/image/m5stack_lvgl/M5Arc.webp differ
diff --git a/docs/image/m5stack_lvgl/M5Bar.webp b/docs/image/m5stack_lvgl/M5Bar.webp
new file mode 100644
index 00000000..013fba85
Binary files /dev/null and b/docs/image/m5stack_lvgl/M5Bar.webp differ
diff --git a/docs/image/m5stack_lvgl/M5Btn.webp b/docs/image/m5stack_lvgl/M5Btn.webp
new file mode 100644
index 00000000..38a8160e
Binary files /dev/null and b/docs/image/m5stack_lvgl/M5Btn.webp differ
diff --git a/docs/image/m5stack_lvgl/M5Checkbox.webp b/docs/image/m5stack_lvgl/M5Checkbox.webp
new file mode 100644
index 00000000..ed46bd8d
Binary files /dev/null and b/docs/image/m5stack_lvgl/M5Checkbox.webp differ
diff --git a/docs/image/m5stack_lvgl/M5Dropdown.webp b/docs/image/m5stack_lvgl/M5Dropdown.webp
new file mode 100644
index 00000000..724c822c
Binary files /dev/null and b/docs/image/m5stack_lvgl/M5Dropdown.webp differ
diff --git a/docs/image/m5stack_lvgl/M5Img.webp b/docs/image/m5stack_lvgl/M5Img.webp
new file mode 100644
index 00000000..d25356c2
Binary files /dev/null and b/docs/image/m5stack_lvgl/M5Img.webp differ
diff --git a/docs/image/m5stack_lvgl/M5Label.webp b/docs/image/m5stack_lvgl/M5Label.webp
new file mode 100644
index 00000000..d45d96d1
Binary files /dev/null and b/docs/image/m5stack_lvgl/M5Label.webp differ
diff --git a/docs/image/m5stack_lvgl/M5Led.webp b/docs/image/m5stack_lvgl/M5Led.webp
new file mode 100644
index 00000000..8d7a7f8c
Binary files /dev/null and b/docs/image/m5stack_lvgl/M5Led.webp differ
diff --git a/docs/image/m5stack_lvgl/M5Line.webp b/docs/image/m5stack_lvgl/M5Line.webp
new file mode 100644
index 00000000..c9954638
Binary files /dev/null and b/docs/image/m5stack_lvgl/M5Line.webp differ
diff --git a/docs/image/m5stack_lvgl/M5List.webp b/docs/image/m5stack_lvgl/M5List.webp
new file mode 100644
index 00000000..ed5de577
Binary files /dev/null and b/docs/image/m5stack_lvgl/M5List.webp differ
diff --git a/docs/image/m5stack_lvgl/M5Msgbox.webp b/docs/image/m5stack_lvgl/M5Msgbox.webp
new file mode 100644
index 00000000..39c3eb87
Binary files /dev/null and b/docs/image/m5stack_lvgl/M5Msgbox.webp differ
diff --git a/docs/image/m5stack_lvgl/M5Slider.webp b/docs/image/m5stack_lvgl/M5Slider.webp
new file mode 100644
index 00000000..6927b3ac
Binary files /dev/null and b/docs/image/m5stack_lvgl/M5Slider.webp differ
diff --git a/docs/image/m5stack_lvgl/M5Switch.webp b/docs/image/m5stack_lvgl/M5Switch.webp
new file mode 100644
index 00000000..36ef5518
Binary files /dev/null and b/docs/image/m5stack_lvgl/M5Switch.webp differ
diff --git a/docs/image/m5stack_lvgl/M5Tabview.webp b/docs/image/m5stack_lvgl/M5Tabview.webp
new file mode 100644
index 00000000..f6056a7c
Binary files /dev/null and b/docs/image/m5stack_lvgl/M5Tabview.webp differ
diff --git a/docs/zh_CN/mpy/m5stack_lvgl.md b/docs/zh_CN/mpy/m5stack_lvgl.md
index 86d49afa..f3946e68 100644
--- a/docs/zh_CN/mpy/m5stack_lvgl.md
+++ b/docs/zh_CN/mpy/m5stack_lvgl.md
@@ -40,6 +40,9 @@ screen.del_screen()
>创建页签
+
+
+
```clike
from m5stack_ui import *
@@ -59,8 +62,11 @@ tab.set_tab_name(index,"new_tab_name")
```
+
## M5Textarea
+
+
>创建文本区域
@@ -80,6 +86,8 @@ Textarea.set_text("Hello World")
## M5Msgbox
+
+
>创建信息盒子
```clike
@@ -102,6 +110,8 @@ Msgbox.get_active_btn_text()
## M5Led
+
+
>创建虚拟LED灯
```clike
@@ -126,6 +136,9 @@ Led.set_color(0x00ff00)
## M5Switch
+
+
+
>创建滑动开关
@@ -158,6 +171,8 @@ Switch.off(offCallback)
## M5Slider
+
+
>创建滑动条
@@ -190,8 +205,9 @@ Slider.changed(onChange)
## M5List
->创建列表
+
+>创建列表
```clike
@@ -220,6 +236,9 @@ List.get_label_text(handle)
## M5Line
+
+
+
>绘制直线
```clike
@@ -246,6 +265,8 @@ Line.set_opacity(100)
## M5Label
+
+
>绘制文本标签
@@ -276,6 +297,8 @@ Label.get_width()
## M5Img
+
+
>插入图像(仅支持png)。
```clike
@@ -293,6 +316,9 @@ Img.set_img_src(filename)
## M5Dropdown
+
+
+
>创建下拉菜单
```clike
@@ -328,6 +354,9 @@ coming soon...
## M5Checkbox
+
+
+
>创建勾选框
```clike
@@ -363,6 +392,9 @@ Checkbox.unchecked(unchecked_cb)
## M5Btn
+
+
+
>创建按键
```clike
@@ -397,6 +429,9 @@ Btn.released(released_cb)
## M5Arc
+
+
+
>创建弧形表盘(参数：start,end为顺时针角度)。
```clike
@@ -414,6 +449,9 @@ Arc.set_angles(0,90)
## M5Bar
+
+
+
>创建进度条。
```clike
@@ -440,6 +478,9 @@ Bar.get_value()
## M5Imgbtn
+
+
+
>创建图片按键。
```clike