diff --git a/app/app.vue b/app/app.vue
index 84cd848..b361e91 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,14 +1,33 @@
+<script setup lang="ts">
+import { ConfigProvider } from 'reka-ui'
+</script>
+
 <template>
-  <div>
-    <NuxtPage />
-  </div>
+  <!-- 
+    scroll-body="false": Prevents body scrolling when modals/dialogs are open.
+    When set to false, the body element's overflow is locked while any modal component
+    (like Dialog, Sheet, etc.) is open, preventing background content from scrolling.
+    This improves UX by keeping focus on the modal content.
+    
+    Bug fix: Without this setting, opening dropdown menus (e.g., the user profile menu
+    when clicking the avatar icon) would cause the body to receive a padding-right of
+    15px, which shifted the entire page content 15px to the left. This prop prevents
+    that unwanted padding injection and layout shift.
+  -->
+  <ConfigProvider :scroll-body="false">
+    <div>
+      <NuxtPage />
+    </div>
+  </ConfigProvider>
 </template>
 
 <style>
 /* Critical CSS - Loaded immediately to prevent FOUC */
 html {
-  background-color: #1e1440; /* purple-darkest */
-  color: #f8fafc; /* white/slate-50 */
+  background-color: #1e1440;
+  /* purple-darkest */
+  color: #f8fafc;
+  /* white/slate-50 */
   font-family: 'Roboto', system-ui, -apple-system, sans-serif;
 }