diff --git a/apps/site/docs/en/docs/getting-started/introduction.mdx b/apps/site/docs/en/docs/getting-started/introduction.mdx
index 2a0a98cba..e9ebec137 100644
--- a/apps/site/docs/en/docs/getting-started/introduction.mdx
+++ b/apps/site/docs/en/docs/getting-started/introduction.mdx
@@ -6,7 +6,7 @@ Introducing Midscene.js, an innovative SDK designed to bring joy back to program
 
 Midscene.js leverages a multimodal Large Language Model (LLM) to intuitively “understand” your user interface and carry out the necessary actions. You can simply describe the interaction steps or expected data formats, and the AI will handle the execution for you.
 
-<video src="/introduce/ai-todo.mp4" controls/>
+<video src="/introduce/ai-todo.mp4" controls style={{ borderRadius: '10px', border: '2px solid #ccc', width: '100%', margin: '20px auto', display: 'block' }}/>
 
 ## Features
 
@@ -42,10 +42,36 @@ With our visualization tool, you can easily debug the prompt and AI response. Al
 
 You may open the [Online Visualization Tool](/visualization/index.html) to see the showcase.
 
-![](/visualizer.jpg)
+<img 
+  src="/visualizer.jpg" 
+  alt="Visualizer"
+  style={{
+    width: '100%',
+    maxWidth: '900px',
+    margin: '20px auto',
+    display: 'block',
+    borderRadius: '8px',
+    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
+    border: '1px solid #eaeaea'
+  }}
+/>
 
 ## Flow Chart
 
 Here is a flowchart that describes the core process of the interaction between Midscene and AI.
 
-![](/flow.png)
\ No newline at end of file
+<img 
+  src="/flow.png" 
+  alt="Flow Diagram"
+  style={{
+    width: '100%',
+    maxWidth: '900px',
+    margin: '30px auto',
+    display: 'block',
+    borderRadius: '10px',
+    boxShadow: '0 3px 10px rgba(0, 0, 0, 0.1)',
+    border: '1px solid #ddd',
+    padding: '10px',
+    backgroundColor: '#fff'
+  }}
+/>
\ No newline at end of file
diff --git a/apps/site/docs/en/docs/getting-started/quick-start.mdx b/apps/site/docs/en/docs/getting-started/quick-start.mdx
index 78314e7b8..573930af7 100644
--- a/apps/site/docs/en/docs/getting-started/quick-start.mdx
+++ b/apps/site/docs/en/docs/getting-started/quick-start.mdx
@@ -212,4 +212,17 @@ Alternatively, you can import the `./midscene_run/report/latest.web-dump.json` f
 
 Click the 'Load Demo' button in the [Visualization Tool](/visualization/), you will be able to see the results of the previous code as well as some other samples.
 
-![](/view-demo-visualization.gif)
+<img 
+  src="/view-demo-visualization.gif" 
+  alt="Demo Visualization"
+  style={{
+    width: '100%',
+    maxWidth: '800px',
+    margin: '20px auto',
+    display: 'block',
+    borderRadius: '10px',
+    boxShadow: '0 3px 10px rgba(0, 0, 0, 0.1)',
+    border: '1px solid #ddd',
+    backgroundColor: '#fff'
+  }}
+/>
diff --git a/apps/site/docs/zh/docs/getting-started/introduction.mdx b/apps/site/docs/zh/docs/getting-started/introduction.mdx
index ee4b168d8..dfcf71f23 100644
--- a/apps/site/docs/zh/docs/getting-started/introduction.mdx
+++ b/apps/site/docs/zh/docs/getting-started/introduction.mdx
@@ -6,7 +6,7 @@ UI 自动化太难写了。自动化脚本里到处都是选择器，比如 `#id
 
 Midscene.js 采用了多模态大语言模型（LLM），能够直观地“理解”你的用户界面并执行必要的操作。你只需描述交互步骤或期望的数据格式，AI 就能为你完成任务。
 
-<video src="/introduce/ai-todo.mp4" controls/>
+<video src="/introduce/ai-todo.mp4" controls style={{ borderRadius: '10px', border: '2px solid #ccc', width: '100%', margin: '20px auto', display: 'block' }}/>
 
 ## 特性
 
@@ -39,10 +39,36 @@ console.log("headphones in stock", items);
 
 你可以打开 [可视化工具](/visualization/index.html) 来查看示例。
 
-![](/visualizer.jpg)
+<img 
+  src="/visualizer.jpg" 
+  alt="Visualizer"
+  style={{
+    width: '100%',
+    maxWidth: '900px',
+    margin: '20px auto',
+    display: 'block',
+    borderRadius: '8px',
+    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
+    border: '1px solid #eaeaea'
+  }}
+/>
 
 ## 流程图
 
 下图展示了 Midscene 的核心流程。
 
-![](/flow.png)
\ No newline at end of file
+<img 
+  src="/flow.png" 
+  alt="Flow Diagram"
+  style={{
+    width: '100%',
+    maxWidth: '900px',
+    margin: '30px auto',
+    display: 'block',
+    borderRadius: '10px',
+    boxShadow: '0 3px 10px rgba(0, 0, 0, 0.1)',
+    border: '1px solid #ddd',
+    padding: '10px',
+    backgroundColor: '#fff'
+  }}
+/>
\ No newline at end of file
diff --git a/apps/site/docs/zh/docs/getting-started/quick-start.mdx b/apps/site/docs/zh/docs/getting-started/quick-start.mdx
index d02ae3ef6..0d49a6084 100644
--- a/apps/site/docs/zh/docs/getting-started/quick-start.mdx
+++ b/apps/site/docs/zh/docs/getting-started/quick-start.mdx
@@ -220,5 +220,18 @@ npx ts-node demo.ts
 
 在[可视化工具](/visualization/)中点击"加载演示"按钮，你将能够看到之前代码的运行结果以及其他一些示例。
 
-![](/view-demo-visualization.gif)
+<img 
+  src="/view-demo-visualization.gif" 
+  alt="Demo Visualization"
+  style={{
+    width: '100%',
+    maxWidth: '800px',
+    margin: '20px auto',
+    display: 'block',
+    borderRadius: '10px',
+    boxShadow: '0 3px 10px rgba(0, 0, 0, 0.1)',
+    border: '1px solid #ddd',
+    backgroundColor: '#fff'
+  }}
+/>