diff --git a/packages/web/components/patterns/ConfirmationModal.tsx b/packages/web/components/patterns/ConfirmationModal.tsx
index a82a9677f..25618fdbe 100644
--- a/packages/web/components/patterns/ConfirmationModal.tsx
+++ b/packages/web/components/patterns/ConfirmationModal.tsx
@@ -19,8 +19,18 @@ type ConfirmationModalProps = {
 }
 
 export function ConfirmationModal(props: ConfirmationModalProps): JSX.Element {
+  const safeOnOpenChange = useCallback(
+    (open: boolean) => {
+      props.onOpenChange(open)
+      setTimeout(() => {
+        document.body.style.removeProperty('pointer-events')
+      }, 200)
+    },
+    [props]
+  )
+
   return (
-    <ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
+    <ModalRoot defaultOpen onOpenChange={safeOnOpenChange}>
       <ModalOverlay />
       <ModalContent css={{ bg: '$grayBg', maxWidth: '20em', zIndex: '20' }}>
         <VStack alignment="center" distribution="center" css={{ p: '15px' }}>
@@ -46,11 +56,15 @@ export function ConfirmationModal(props: ConfirmationModalProps): JSX.Element {
             </Button>
             <Button
               style="ctaDarkYellow"
-              onClick={props.onAccept}
+              onClick={() => {
+                props.onAccept()
+                document.body.style.removeProperty('pointer-events')
+              }}
               onKeyDown={(event) => {
                 if (event.key === 'Enter') {
                   event.preventDefault()
                   props.onAccept()
+                  document.body.style.removeProperty('pointer-events')
                 }
               }}
             >