diff --git a/packages/ui/src/components/dialog.css b/packages/ui/src/components/dialog.css
index c0d3372c8..a0e7e111f 100644
--- a/packages/ui/src/components/dialog.css
+++ b/packages/ui/src/components/dialog.css
@@ -20,6 +20,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  pointer-events: none;
 
   [data-slot="dialog-container"] {
     position: relative;
@@ -41,6 +42,7 @@
       max-height: 100%;
       min-height: 280px;
       overflow: auto;
+      pointer-events: auto;
 
       /* Hide scrollbar */
       scrollbar-width: none;
diff --git a/packages/ui/src/context/dialog.tsx b/packages/ui/src/context/dialog.tsx
index 8e770750a..d45fe6632 100644
--- a/packages/ui/src/context/dialog.tsx
+++ b/packages/ui/src/context/dialog.tsx
@@ -53,7 +53,7 @@ function init() {
             }}
           >
             <Kobalte.Portal>
-              <Kobalte.Overlay data-component="dialog-overlay" />
+              <Kobalte.Overlay data-component="dialog-overlay" onClick={close} />
               {element()}
             </Kobalte.Portal>
           </Kobalte>