diff --git a/docs/pages/index/README.md b/docs/pages/index/README.md
index 15ca3d4b..7dec83e4 100644
--- a/docs/pages/index/README.md
+++ b/docs/pages/index/README.md
@@ -303,9 +303,7 @@ h1 {
 
 <div class="w-full flex flex-col justify-center text-center">
     <div class="flex justify-center">
-
-![MaixPy Banner](/static/image/maixpy_banner.png)
-
+        <img src="/static/image/maixpy_banner.png" alt="MaixPy Banner">
     </div>
     <h1><span>MaixPy (v4)</span></h1>
     <h3>极速落地 AI 视觉、听觉应用</h3>
@@ -334,7 +332,7 @@ h1 {
 
 <div class="mt-16"></div>
 
-![MaixCAM 系列](/static/image/maixcams.png)
+<img class="text-center" src="/static/image/maixcams.png">
 
 <div class="mt-6"></div>
 
@@ -430,7 +428,7 @@ MaixVision
 
 <div class="mt-3"></div>
 
-![MaixHub](/static/image/maixhub.jpg)
+<img class="shadow-xl white_border" src="/static/image/maixhub.jpg">
 </div>
 <!-- end -->
 
@@ -448,27 +446,21 @@ MaixVision
     <div class="flex flex-row w-full">
         <a href="https://wiki.sipeed.com/maixcam2" target="_blank" class="flex flex-row items-center justify-around w-full card_item mask_wrapper item1">
             <div class="item_name">MaixCAM2</div>
-
-![MaixCAM2](https://wiki.sipeed.com/static/image/maixcam2_small.png)
-
+            <img src="https://wiki.sipeed.com/static/image/maixcam2_small.png">
             <div class="mask"></div>
         </a>
     </div>
     <div class="flex flex-row w-full justify-between">
         <div class="flex_center flex-row justify-start w-1/2">
             <a href="https://wiki.sipeed.com/hardware/zh/maixcam/maixcam.html" target="_blank" class="flex_center card_item mask_wrapper item2">
-
-![MaixCAM](https://wiki.sipeed.com/static/image/maixcam_small.png)
-
+                <img src="https://wiki.sipeed.com/static/image/maixcam_small.png">
                 <div class="item_name pt-8">MaixCAM</div>
                 <div class="mask"></div>
             </a>
         </div>
         <div class="flex_center flex-row justify-end w-1/2">
             <a href="https://wiki.sipeed.com/maixcam-pro" target="_blank" class="flex_center card_item mask_wrapper item3">
-
-![MaixCAM-Pro](https://wiki.sipeed.com/static/image/maixcam_pro_small.png)
-
+                <img src="https://wiki.sipeed.com/static/image/maixcam_pro_small.png">
                 <div class="item_name pt-8">MaixCAM-Pro</div>
                 <div class="mask"></div>
             </a>
@@ -500,9 +492,7 @@ MaixVision
 <div class="flex flex-wrap justify-between">
     <div class="feature_item">
         <div class="img_video">
-
-![OpenCV + OpenMV](/static/image/opencv_openmv.jpg)
-
+            <img src="/static/image/opencv_openmv.jpg">
             <p class="feature">OpenCV + OpenMV</p>
             <p class="description">支持 OpenCV， 兼容 OpenMV</p>
         </div>
@@ -511,9 +501,7 @@ MaixVision
     </div>
     <div class="feature_item">
         <div class="img_video">
-
-![MaixCDK](/static/image/maixcdk.png)
-
+            <img src="/static/image/maixcdk.png">
             <p class="feature">C++版本</p>
             <p class="description"><a href="https://github.com/sipeed/MaixCDK">MaixCDK</a> C++版本的SDK，与MaixPy的API相同, 商业友好</p>
         </div>
@@ -522,9 +510,7 @@ MaixVision
     </div>
     <div class="feature_item">
         <div class="img_video">
-
-![串口模块](/static/image/serial_module.png)
-
+            <img src="/static/image/serial_module.png">
             <p class="feature">作为串口模块</p>
             <p class="description">其它 MCU 通过串口命令控制</p>
         </div>
@@ -722,9 +708,7 @@ MaixVision
     </div>
     <div class="feature_item">
         <div class="img_video">
-
-![天气站](/static/image/weather_station.jpg)
-
+            <img src="/static/image/weather_station.jpg">
             <p class="feature">天气站</p>
             <p class="description">监视天气信息，如温度，湿度等。</p>
         </div>
@@ -733,9 +717,7 @@ MaixVision
     </div>
     <div class="feature_item">
         <div class="img_video">
-
-![热红外摄像头](/static/image/thermal.jpg)
-
+            <img src="/static/image/thermal.jpg">
             <p class="feature">热红外摄像头</p>
             <p class="description">选配摄像头，温度图像获取/测量</p>
         </div>
@@ -744,9 +726,7 @@ MaixVision
     </div>
     <div class="feature_item">
         <div class="img_video">
-
-![HDMI 捕获视频](/static/image/hdmi_capture.jpg)
-
+            <img src="/static/image/hdmi_capture.jpg">
             <p class="feature">HDMI 捕获视频</p>
             <p class="description">选配，通过 HDMI 捕获图像，作为服务器监控（KVM）和远程控制、外接 AI、推流设备等</p>
         </div>
@@ -773,9 +753,7 @@ MaixVision
     </div>
     <div class="feature_item">
         <div class="img_video">
-
-![高速识别](/static/image/global_shutter.jpg)
-
+            <img src="/static/image/global_shutter.jpg">
             <p class="feature">高速识别</p>
             <p class="description">搭配全局摄像头，高速运动物体也能准确识别</p>
         </div>
@@ -925,7 +903,7 @@ MaixVision
 
 ## Maix 生态
 
-![Maix 生态](/static/image/maix_ecosystem.png)
+<img src="/static/image/maix_ecosystem.png" class="white_border shadow-xl rounded-md">
 
 
 ## 社区 {#community}
@@ -951,3 +929,4 @@ MaixVision
 
 </div>
 <!-- wrapper end -->
+
diff --git a/docs/pages/index_en/README.md b/docs/pages/index_en/README.md
index 8ab9eef5..dfe0adcc 100644
--- a/docs/pages/index_en/README.md
+++ b/docs/pages/index_en/README.md
@@ -303,9 +303,7 @@ h1 {
 
 <div class="w-full flex flex-col justify-center text-center">
     <div class="flex justify-center">
-
-![MaixPy Banner](/static/image/maixpy_banner.png)
-
+        <img src="/static/image/maixpy_banner.png" alt="MaixPy Banner">
     </div>
     <h1><span>MaixPy (v4)</span></h1>
     <h3>Fast implementation of AI vision and auditory applications</h3>
@@ -334,7 +332,7 @@ English | [中文](../)
 
 <div class="mt-16"></div>
 
-![MaixCAM series](/static/image/maixcams.png)
+<img class="text-center" src="/static/image/maixcams.png">
 
 <div class="mt-6"></div>
 
@@ -433,7 +431,7 @@ No need for AI expertise or expensive training equipment, train models with one
 
 <div class="mt-3"></div>
 
-![MaixHub](/static/image/maixhub.jpg)
+<img class="shadow-xl white_border" src="/static/image/maixhub.jpg">
 </div>
 <!-- end -->
 
@@ -450,27 +448,21 @@ A detailed performance comparison provided later.
     <div class="flex flex-row w-full">
         <a href="https://wiki.sipeed.com/maixcam2" target="_blank" class="flex flex-row items-center justify-around w-full card_item mask_wrapper item1">
             <div class="item_name">MaixCAM2</div>
-
-![MaixCAM2](https://wiki.sipeed.com/static/image/maixcam2_small.png)
-
+            <img src="https://wiki.sipeed.com/static/image/maixcam2_small.png">
             <div class="mask"></div>
         </a>
     </div>
     <div class="flex flex-row w-full justify-between">
         <div class="flex_center flex-row justify-start w-1/2">
             <a href="https://wiki.sipeed.com/hardware/zh/maixcam/maixcam.html" target="_blank" class="flex_center card_item mask_wrapper item2">
-
-![MaixCAM](https://wiki.sipeed.com/static/image/maixcam_small.png)
-
+                <img src="https://wiki.sipeed.com/static/image/maixcam_small.png">
                 <div class="item_name pt-8">MaixCAM</div>
                 <div class="mask"></div>
             </a>
         </div>
         <div class="flex_center flex-row justify-end w-1/2">
             <a href="https://wiki.sipeed.com/maixcam-pro" target="_blank" class="flex_center card_item mask_wrapper item3">
-
-![MaixCAM-Pro](https://wiki.sipeed.com/static/image/maixcam_pro_small.png)
-
+                <img src="https://wiki.sipeed.com/static/image/maixcam_pro_small.png">
                 <div class="item_name pt-8">MaixCAM-Pro</div>
                 <div class="mask"></div>
             </a>
@@ -499,9 +491,7 @@ You can create new features using the rich API provided by MaixPy.
 <div class="flex flex-wrap justify-between">
     <div class="feature_item">
         <div class="img_video">
-
-![OpenCV + OpenMV](/static/image/opencv_openmv.jpg)
-
+            <img src="/static/image/opencv_openmv.jpg">
             <p class="feature">OpenCV + OpenMV</p>
             <p class="description">Supports OpenCV, compatible with OpenMV</p>
         </div>
@@ -510,9 +500,7 @@ You can create new features using the rich API provided by MaixPy.
     </div>
     <div class="feature_item">
         <div class="img_video">
-
-![MaixCDK](/static/image/maixcdk.png)
-
+            <img src="/static/image/maixcdk.png">
             <p class="feature">C++ Version</p>
             <p class="description"><a href="https://github.com/sipeed/MaixCDK">MaixCDK</a> C++ version SDK, same API as MaixPy, commercial-friendly</p>
         </div>
@@ -521,9 +509,7 @@ You can create new features using the rich API provided by MaixPy.
     </div>
     <div class="feature_item">
         <div class="img_video">
-
-![Serial module](/static/image/serial_module.png)
-
+            <img src="/static/image/serial_module.png">
             <p class="feature">As a Serial Module</p>
             <p class="description">Control other MCUs via serial commands</p>
         </div>
@@ -676,9 +662,7 @@ You can create new features using the rich API provided by MaixPy.
     </div>
     <div class="feature_item">
         <div class="img_video">
-
-![Voice recognition](/static/image/voice_recognize.jpg)
-
+            <img src="/static/image/voice_recognize.jpg">
             <p class="feature">Voice Recognition</p>
             <p class="description">Real-time continuous voice recognition</p>
         </div>
@@ -723,9 +707,7 @@ You can create new features using the rich API provided by MaixPy.
     </div>
     <div class="feature_item">
         <div class="img_video">
-
-![Weather station](/static/image/weather_station.jpg)
-
+            <img src="/static/image/weather_station.jpg">
             <p class="feature">Weather Station</p>
             <p class="description">Monitor weather information such as temperature and humidity.</p>
         </div>
@@ -734,9 +716,7 @@ You can create new features using the rich API provided by MaixPy.
     </div>
     <div class="feature_item">
         <div class="img_video">
-
-![Thermal camera](/static/image/thermal.jpg)
-
+            <img src="/static/image/thermal.jpg">
             <p class="feature">Thermal Infrared Camera</p>
             <p class="description">Optional camera, for temperature image acquisition/measurement</p>
         </div>
@@ -745,9 +725,7 @@ You can create new features using the rich API provided by MaixPy.
     </div>
     <div class="feature_item">
         <div class="img_video">
-
-![HDMI capture](/static/image/hdmi_capture.jpg)
-
+            <img src="/static/image/hdmi_capture.jpg">
             <p class="feature">HDMI Video Capture</p>
             <p class="description">Optional feature, capture images via HDMI for server monitoring (KVM), remote control, external AI, streaming devices, etc.</p>
         </div>
@@ -774,9 +752,7 @@ You can create new features using the rich API provided by MaixPy.
     </div>
     <div class="feature_item">
         <div class="img_video">
-
-![High-speed recognition](/static/image/global_shutter.jpg)
-
+            <img src="/static/image/global_shutter.jpg">
             <p class="feature">High-Speed Recognition</p>
             <p class="description">Pair with a global shutter camera to accurately recognize high-speed moving objects</p>
         </div>
@@ -906,7 +882,7 @@ Compared to the limited NPU operator support and memory constraints of the previ
 
 ## Maix Ecosystem
 
-![Maix ecosystem](/static/image/maix_ecosystem.png)
+<img src="/static/image/maix_ecosystem.png" class="white_border shadow-xl rounded-md">
 
 
 ## Community {#community}