diff --git a/docs/.vuepress/public/image/en-us/readme/1-dark.png b/docs/.vuepress/public/image/en-us/readme/1-dark.png
new file mode 100644
index 0000000000..f62c302783
Binary files /dev/null and b/docs/.vuepress/public/image/en-us/readme/1-dark.png differ
diff --git a/docs/.vuepress/public/image/en-us/readme/1-light.png b/docs/.vuepress/public/image/en-us/readme/1-light.png
index 602cb4d8df..1d89a65ebb 100644
Binary files a/docs/.vuepress/public/image/en-us/readme/1-light.png and b/docs/.vuepress/public/image/en-us/readme/1-light.png differ
diff --git a/docs/.vuepress/public/image/en-us/readme/1-light_old.png b/docs/.vuepress/public/image/en-us/readme/1-light_old.png
new file mode 100644
index 0000000000..602cb4d8df
Binary files /dev/null and b/docs/.vuepress/public/image/en-us/readme/1-light_old.png differ
diff --git a/docs/.vuepress/public/image/en-us/readme/2-dark.png b/docs/.vuepress/public/image/en-us/readme/2-dark.png
new file mode 100644
index 0000000000..d874699518
Binary files /dev/null and b/docs/.vuepress/public/image/en-us/readme/2-dark.png differ
diff --git a/docs/.vuepress/public/image/en-us/readme/2-light.png b/docs/.vuepress/public/image/en-us/readme/2-light.png
index f3674926f7..b793170990 100644
Binary files a/docs/.vuepress/public/image/en-us/readme/2-light.png and b/docs/.vuepress/public/image/en-us/readme/2-light.png differ
diff --git a/docs/.vuepress/public/image/en-us/readme/2-light_old.png b/docs/.vuepress/public/image/en-us/readme/2-light_old.png
new file mode 100644
index 0000000000..f3674926f7
Binary files /dev/null and b/docs/.vuepress/public/image/en-us/readme/2-light_old.png differ
diff --git a/docs/.vuepress/public/image/en-us/readme/3-dark.png b/docs/.vuepress/public/image/en-us/readme/3-dark.png
new file mode 100644
index 0000000000..09168e90e6
Binary files /dev/null and b/docs/.vuepress/public/image/en-us/readme/3-dark.png differ
diff --git a/docs/.vuepress/public/image/en-us/readme/3-light.png b/docs/.vuepress/public/image/en-us/readme/3-light.png
new file mode 100644
index 0000000000..9a73e04f28
Binary files /dev/null and b/docs/.vuepress/public/image/en-us/readme/3-light.png differ
diff --git a/docs/.vuepress/public/image/en-us/readme/4-dark.png b/docs/.vuepress/public/image/en-us/readme/4-dark.png
new file mode 100644
index 0000000000..aa9ef5969a
Binary files /dev/null and b/docs/.vuepress/public/image/en-us/readme/4-dark.png differ
diff --git a/docs/.vuepress/public/image/en-us/readme/4-light.png b/docs/.vuepress/public/image/en-us/readme/4-light.png
new file mode 100644
index 0000000000..8097205214
Binary files /dev/null and b/docs/.vuepress/public/image/en-us/readme/4-light.png differ
diff --git a/docs/en-us/readme.md b/docs/en-us/readme.md
index bd60d2c3ea..ab4fff907e 100644
--- a/docs/en-us/readme.md
+++ b/docs/en-us/readme.md
@@ -45,10 +45,35 @@ Talk is cheap. Show me the pictures!
 
 <!-- markdownlint-disable -->
 
-<div class="image-en-us">
-  <img src="/image/en-us/readme/1-light.png" />
-  <img src="/image/en-us/readme/2-light.png" />
-</div>
+```component ImageGrid
+{
+  "imageList": [
+    {
+      "light": "image/en-us/readme/1-light.png",
+      "dark": "image/en-us/readme/1-dark.png"
+    },
+    {
+      "light": "image/en-us/readme/2-light.png",
+      "dark": "image/en-us/readme/2-dark.png"
+    },
+    {
+      "light": "image/en-us/readme/3-light.png",
+      "dark": "image/en-us/readme/3-dark.png"
+    },
+    {
+      "light": "image/en-us/readme/4-light.png",
+      "dark": "image/en-us/readme/4-dark.png"
+    }
+  ]
+}
+```
+
+<!-- <div class="image-en-us">
+  <img src="/image/en-us/readme/1-dark.png" />
+  <img src="/image/en-us/readme/2-dark.png" />
+  <img src="/image/en-us/readme/3-dark.png" />
+  <img src="/image/en-us/readme/4-dark.png" />
+</div> -->
 
 <style>
   .image-en-us {