diff --git a/src/components/ui/dialog/DialogContent.vue b/src/components/ui/dialog/DialogContent.vue
index d71b994..ff2506a 100644
--- a/src/components/ui/dialog/DialogContent.vue
+++ b/src/components/ui/dialog/DialogContent.vue
@@ -9,7 +9,7 @@
         v-bind="{ ...$attrs, ...forwarded }"
         :class="
           cn(
-            'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 z-60 grid w-full max-w-2xl gap-4 rounded-lg border p-6 shadow-lg duration-200',
+            'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 z-60 grid w-full max-w-2xl gap-4 rounded-lg border p-6 shadow-lg duration-200 relative',
             props.class
           )
         "
diff --git a/src/components/ui/dialog/ScrollableDialogContent.vue b/src/components/ui/dialog/ScrollableDialogContent.vue
index d5a6a98..d54d1a8 100644
--- a/src/components/ui/dialog/ScrollableDialogContent.vue
+++ b/src/components/ui/dialog/ScrollableDialogContent.vue
@@ -1,16 +1,19 @@
 <template>
   <DialogPortal>
-    <DialogOverlay />
-    <DialogContent
-      data-slot="scrollable-dialog-content"
-      v-bind="{ ...$attrs, ...forwarded }"
-      :class="
-        cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-1/2 left-1/2 z-60 w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 rounded-lg border shadow-lg duration-200 sm:w-auto sm:min-w-[764px] flex flex-col p-0',
-          containerClass
-        )
-      "
+    <DialogOverlay
+      data-slot="dialog-overlay"
+      class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-60 bg-black/80 flex items-center justify-center p-4"
     >
+      <DialogContent
+        data-slot="scrollable-dialog-content"
+        v-bind="{ ...$attrs, ...forwarded }"
+        :class="
+          cn(
+            'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 z-60 w-full max-w-3xl rounded-lg border shadow-lg duration-200 flex flex-col p-0 relative',
+            containerClass
+          )
+        "
+      >
       <!-- 固定的头部 -->
       <div class="shrink-0 px-4 pt-4 pb-3 sm:px-6 sm:pt-6 sm:pb-4 border-b">
         <slot name="header" />
@@ -35,7 +38,8 @@
         <X />
         <span class="sr-only">Close</span>
       </DialogClose>
-    </DialogContent>
+      </DialogContent>
+    </DialogOverlay>
   </DialogPortal>
 </template>
 
@@ -44,9 +48,8 @@
   import type { HTMLAttributes } from 'vue'
   import { reactiveOmit } from '@vueuse/core'
   import { X } from 'lucide-vue-next'
-  import { DialogClose, DialogContent, DialogPortal, useForwardPropsEmits } from 'reka-ui'
+  import { DialogClose, DialogContent, DialogOverlay, DialogPortal, useForwardPropsEmits } from 'reka-ui'
   import { cn } from '@/lib/utils'
-  import DialogOverlay from './DialogOverlay.vue'
 
   defineOptions({
     inheritAttrs: false