diff --git a/src/runtime/components/overlays/Modal.vue b/src/runtime/components/overlays/Modal.vue
index afc926af..05582709 100644
--- a/src/runtime/components/overlays/Modal.vue
+++ b/src/runtime/components/overlays/Modal.vue
@@ -13,41 +13,44 @@
             leave-from="opacity-100"
             leave-to="opacity-0"
           >
-            <DialogOverlay class="fixed inset-0 bg-gray-500/75 dark:bg-gray-600/75 transition-opacity" />
+            <div class="fixed inset-0 bg-gray-500/75 dark:bg-gray-600/75 transition-opacity" />
           </TransitionChild>
 
-          <!-- This element is to trick the browser into centering the modal contents. -->
-          <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
-
-          <TransitionChild
-            as="template"
-            :appear="appear"
-            enter="ease-out duration-300"
-            enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            enter-to="opacity-100 translate-y-0 sm:scale-100"
-            leave="ease-in duration-200"
-            leave-from="opacity-100 translate-y-0 sm:scale-100"
-            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-          >
-            <Card
-              :base-class="baseClass"
-              :background-class="backgroundClass"
-              :shadow-class="shadowClass"
-              :ring-class="ringClass"
-              :rounded-class="roundedClass"
-              :class="modalClass"
-              padded
-              v-bind="$attrs"
-            >
-              <template v-if="$slots.header" #header>
-                <slot name="header" />
-              </template>
-              <slot />
-              <template v-if="$slots.footer" #footer>
-                <slot name="footer" />
-              </template>
-            </Card>
-          </TransitionChild>
+          <div class="fixed inset-0 overflow-y-auto">
+            <div class="flex min-h-full items-center justify-center p-4 text-center">
+              <TransitionChild
+                as="template"
+                :appear="appear"
+                enter="ease-out duration-300"
+                enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                enter-to="opacity-100 translate-y-0 sm:scale-100"
+                leave="ease-in duration-200"
+                leave-from="opacity-100 translate-y-0 sm:scale-100"
+                leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              >
+                <DialogPanel>
+                  <Card
+                    :base-class="baseClass"
+                    :background-class="backgroundClass"
+                    :shadow-class="shadowClass"
+                    :ring-class="ringClass"
+                    :rounded-class="roundedClass"
+                    :class="modalClass"
+                    padded
+                    v-bind="$attrs"
+                  >
+                    <template v-if="$slots.header" #header>
+                      <slot name="header" />
+                    </template>
+                    <slot />
+                    <template v-if="$slots.footer" #footer>
+                      <slot name="footer" />
+                    </template>
+                  </Card>
+                </DialogPanel>
+              </TransitionChild>
+            </div>
+          </div>
         </div>
       </div>
     </Dialog>
@@ -56,7 +59,7 @@
 
 <script>
 import { computed } from 'vue'
-import { Dialog, DialogOverlay, TransitionRoot, TransitionChild } from '@headlessui/vue'
+import { Dialog, DialogPanel, TransitionRoot, TransitionChild } from '@headlessui/vue'
 import { classNames } from '../../utils/'
 import Card from '../layout/Card'
 import $ui from '#build/ui'
@@ -64,7 +67,7 @@ import $ui from '#build/ui'
 export default {
   components: {
     Dialog,
-    DialogOverlay,
+    DialogPanel,
     TransitionRoot,
     TransitionChild,
     Card