diff --git a/packages/search-widget/index.html b/packages/search-widget/index.html
index e6f4cec..627e988 100644
--- a/packages/search-widget/index.html
+++ b/packages/search-widget/index.html
@@ -46,8 +46,22 @@
     </style>
   </head>
   <body>
-    <button>启动</button>
-    <button id="color">暗色/亮色</button>
+    <h1>Search Widget - Page Jitter Fix Test</h1>
+    <button>Open Search Modal</button>
+    <button id="color">Toggle Dark/Light Mode</button>
+    
+    <div style="margin-top: 2rem;">
+      <h2>Testing the Fix</h2>
+      <p>This page has enough content to show a scrollbar. When you open the search modal, the page should NOT shift to the right.</p>
+      <p>The fix works by calculating the scrollbar width and adding equivalent padding to compensate for the scrollbar removal.</p>
+    </div>
+    
+    <!-- Add enough content to ensure scrollbar appears -->
+    <div style="height: 2000px; background: linear-gradient(to bottom, #f0f0f0, #e0e0e0);">
+      <p style="padding: 2rem;">Long content to ensure scrollbar is visible...</p>
+      <p style="padding: 2rem;">Notice that when the modal opens, there's no layout shift!</p>
+    </div>
+    
     <search-modal></search-modal>
   </body>
   <script>
diff --git a/packages/search-widget/src/search-modal.ts b/packages/search-widget/src/search-modal.ts
index f716d8e..f50027d 100644
--- a/packages/search-widget/src/search-modal.ts
+++ b/packages/search-widget/src/search-modal.ts
@@ -43,9 +43,17 @@ export class SearchModal extends LitElement {
     }
 
     if (this.open) {
+      // Calculate scrollbar width to prevent layout shift
+      const scrollbarWidth =
+        window.innerWidth - document.documentElement.clientWidth;
       document.body.style.overflow = 'hidden';
+      // Add padding to compensate for scrollbar removal
+      if (scrollbarWidth > 0) {
+        document.body.style.paddingRight = `${scrollbarWidth}px`;
+      }
     } else {
       document.body.style.removeProperty('overflow');
+      document.body.style.removeProperty('padding-right');
     }
   }
 
