diff --git a/packages/components/src/drawer/index.vue b/packages/components/src/drawer/index.vue
index decb9f62..49fdbba9 100644
--- a/packages/components/src/drawer/index.vue
+++ b/packages/components/src/drawer/index.vue
@@ -178,7 +178,7 @@ function handleAnimationEnd() {
 </script>
 
 <template>
-  <Sheet :open="isOpen" @update:open="updateOpen">
+  <Sheet :modal="false" :open="isOpen" @update:open="updateOpen">
     <SheetContent
       ref="sheetContentRef"
       :drawer-id="drawerId"
diff --git a/packages/components/src/drawer/sheet/SheetContent.vue b/packages/components/src/drawer/sheet/SheetContent.vue
index 863f991f..0dd6a6e6 100644
--- a/packages/components/src/drawer/sheet/SheetContent.vue
+++ b/packages/components/src/drawer/sheet/SheetContent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
+import { reactiveOmit, useScrollLock } from '@vueuse/core'
 import { X } from 'lucide-vue-next'
 import {
   DialogClose,
@@ -45,6 +45,15 @@ defineExpose({
 })
 
 const showOverlay = computed(() => props.open && props.overlay)
+const isLocked = useScrollLock(document.body)
+watch(showOverlay, (val) => {
+  if (val) {
+    isLocked.value = true
+  }
+  else {
+    isLocked.value = false
+  }
+})
 </script>
 
 <template>
@@ -71,7 +80,7 @@ const showOverlay = computed(() => props.open && props.overlay)
         }"
       />
     </Transition>
-    <SheetOverlay class="hidden" />
+    <SheetOverlay />
     <DialogContent
       ref="sheetContentRef"
       data-slot="sheet-content"
diff --git a/packages/components/src/modal/dialog/DialogContent.vue b/packages/components/src/modal/dialog/DialogContent.vue
index ec798e1b..9b04b291 100644
--- a/packages/components/src/modal/dialog/DialogContent.vue
+++ b/packages/components/src/modal/dialog/DialogContent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
+import { reactiveOmit, useScrollLock } from '@vueuse/core'
 import { Maximize, Minimize, X } from 'lucide-vue-next'
 import {
   DialogClose,
@@ -47,6 +47,15 @@ defineExpose({
 })
 
 const showOverlay = computed(() => props.open && props.overlay)
+const isLocked = useScrollLock(document.body)
+watch(showOverlay, (val) => {
+  if (val) {
+    isLocked.value = true
+  }
+  else {
+    isLocked.value = false
+  }
+})
 </script>
 
 <template>
@@ -73,7 +82,7 @@ const showOverlay = computed(() => props.open && props.overlay)
         }"
       />
     </Transition>
-    <DialogOverlay class="hidden" />
+    <DialogOverlay />
     <DialogContent
       ref="dialogContentRef"
       v-bind="forwarded"
diff --git a/packages/components/src/modal/index.vue b/packages/components/src/modal/index.vue
index 40aaec34..c6818be8 100644
--- a/packages/components/src/modal/index.vue
+++ b/packages/components/src/modal/index.vue
@@ -216,7 +216,7 @@ function handleAnimationEnd() {
 </script>
 
 <template>
-  <Dialog :open="isOpen" @update:open="updateOpen">
+  <Dialog :modal="false" :open="isOpen" @update:open="updateOpen">
     <DialogContent
       ref="dialogContentRef"
       :modal-id="modalId"