diff --git a/docs/.vitepress/theme/components/HomePreviewWebUI.vue b/docs/.vitepress/theme/components/HomePreviewWebUI.vue
index f2f79948..2f572a19 100644
--- a/docs/.vitepress/theme/components/HomePreviewWebUI.vue
+++ b/docs/.vitepress/theme/components/HomePreviewWebUI.vue
@@ -18,12 +18,25 @@
   display: flex;
   justify-content: center;
   margin: 0 auto;
+  padding-inline: 24px;
+  padding-block: 60px 20px;
   /**
    * same as VPHero.vue
    * https://github.com/vuejs/vitepress/blob/v1.0.0-beta.5/src/client/theme-default/components/VPHero.vue#L83
    */
-  max-width: 1152px;
-  padding-block: 60px 20px;
+  max-width: 1280px;
+}
+
+@media (min-width: 640px) {
+  .container {
+    padding-inline: 48px;
+  }
+}
+
+@media (min-width: 960px) {
+  .container {
+    padding-inline: 64px;
+  }
 }
 
 .webui-preview {
diff --git a/docs/index.md b/docs/index.md
index f07b411e..53b43406 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -72,16 +72,31 @@ Thanks to
 <style scoped>
 .container {
   display: flex;
-  flex-direction: column;
+  position: relative;
   margin: 0 auto;
+  padding: 0 24px;
   /**
    * same as VPHero.vue
    * https://github.com/vuejs/vitepress/blob/v1.0.0-beta.5/src/client/theme-default/components/VPHero.vue#L83
    */
-  max-width: 1152px;
+  max-width: 1280px;
 }
+
+@media (min-width: 640px) {
+  .container {
+    padding-inline: 48px;
+  }
+}
+
+@media (min-width: 960px) {
+  .container {
+    padding-inline: 64px;
+  }
+}
+
+
 .contributors-avatar {
-  max-width: 600px;
+  width: 600px;
 }
 </style>