diff --git a/resources/js/Components/ui/dialog/DialogContent.vue b/resources/js/Components/ui/dialog/DialogContent.vue
index 3f36bde8..993ad9b9 100644
--- a/resources/js/Components/ui/dialog/DialogContent.vue
+++ b/resources/js/Components/ui/dialog/DialogContent.vue
@@ -34,11 +34,18 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-bind="forwarded"
       :class="
         cn(
-          'fixed left-1/2 top-1/3 bg-default-background z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 border shadow-lg duration-200 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 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
-          props.class,
+          'fixed top-0 left-0 z-50 w-screen h-screen flex items-start pt-6 md:pt-20 xl:pt-32 justify-center overflow-auto 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',
+          
         )"
     >
-      <slot />      
+    <div
+:class="cn(
+          'bg-default-background grid w-full max-w-lg border shadow-lg duration-200 sm:rounded-lg',
+          props.class,
+        )"
+      >
+        <slot />
+    </div>
     </DialogContent>
   </DialogPortal>
 </template>