diff --git a/packages/web/src/javascripts/Components/AlertDialog/AlertDialog.tsx b/packages/web/src/javascripts/Components/AlertDialog/AlertDialog.tsx
index 798ea92eb..94f3219fe 100644
--- a/packages/web/src/javascripts/Components/AlertDialog/AlertDialog.tsx
+++ b/packages/web/src/javascripts/Components/AlertDialog/AlertDialog.tsx
@@ -14,7 +14,14 @@ const AlertDialog = ({
   })
 
   return (
-    <Dialog store={dialog} role="alertdialog" className="fixed top-0 left-0 z-modal h-full w-full">
+    <Dialog
+      store={dialog}
+      role="alertdialog"
+      className="fixed top-0 left-0 z-modal h-full w-full"
+      modal={false}
+      portal={true}
+      preventBodyScroll={true}
+    >
       <div
         className="absolute z-0 h-full w-full bg-passive-5 opacity-25 md:opacity-75"
         role="presentation"
diff --git a/packages/web/src/javascripts/Components/Modal/ModalOverlay.tsx b/packages/web/src/javascripts/Components/Modal/ModalOverlay.tsx
index bb87eca26..a7618ed02 100644
--- a/packages/web/src/javascripts/Components/Modal/ModalOverlay.tsx
+++ b/packages/web/src/javascripts/Components/Modal/ModalOverlay.tsx
@@ -32,11 +32,9 @@ const ModalOverlay = forwardRef(
         className="fixed top-0 left-0 z-modal h-full w-full"
         ref={mergeRefs([setElement, ref])}
         store={dialog}
-        getPersistentElements={() =>
-          Array.from(document.querySelectorAll('[role="dialog"], [role="alertdialog"]')).map((el) => {
-            return el.parentElement ? el.parentElement : el
-          })
-        }
+        modal={false}
+        portal={true}
+        preventBodyScroll={true}
         {...props}
       >
         {children}