diff --git a/components/modals/UserSetupModal.tsx b/components/modals/UserSetupModal.tsx
index 83883ba0..9ceed198 100644
--- a/components/modals/UserSetupModal.tsx
+++ b/components/modals/UserSetupModal.tsx
@@ -228,7 +228,7 @@ const UserSetupModal = ({
   }
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} fullScreen>
+    <Modal isOpen={isOpen} onClose={onClose} fullScreen disableOutsideClose>
       <div className="radial-gradient-bg grid h-screen overflow-auto text-left lg:grid-cols-2">
         <img
           className="absolute -bottom-6 right-0 hidden h-auto w-[53%] lg:block xl:w-[57%]"
diff --git a/components/shared/Modal.tsx b/components/shared/Modal.tsx
index ca3dac11..11eb81ac 100644
--- a/components/shared/Modal.tsx
+++ b/components/shared/Modal.tsx
@@ -18,14 +18,19 @@ function Modal({
   onClose,
   hideClose,
 }: ModalProps) {
+  const handleClose = () => {
+    if (disableOutsideClose) return
+    onClose()
+  }
+
   return (
     <Dialog
       open={isOpen}
-      onClose={onClose}
+      onClose={handleClose}
       className="relative z-40 overflow-y-auto"
     >
       <div
-        className={`fixed inset-0 backdrop-brightness-50 ${
+        className={`fixed inset-0 backdrop-brightness-[0.3] ${
           disableOutsideClose ? 'pointer-events-none' : ''
         }`}
         aria-hidden="true"