diff --git a/packages/twenty-front/src/modules/ui/layout/modal/components/ModalLayout.tsx b/packages/twenty-front/src/modules/ui/layout/modal/components/ModalLayout.tsx
index c6437c247096..d11c6be921a5 100644
--- a/packages/twenty-front/src/modules/ui/layout/modal/components/ModalLayout.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/modal/components/ModalLayout.tsx
@@ -82,6 +82,7 @@ const StyledBackDrop = styled(motion.div)`
   top: 0;
   width: 100%;
   z-index: 9999;
+  user-select: none;
 `;
 
 /**
@@ -141,8 +142,12 @@ export const ModalLayout = ({
   modalRef,
   className,
 }: ModalLayoutProps) => {
+  const stopEventPropagation = (e: React.MouseEvent) => {
+    e.stopPropagation();
+  };
+
   return (
-    <StyledBackDrop>
+    <StyledBackDrop onMouseDown={stopEventPropagation}>
       <StyledModalDiv
         // framer-motion seems to have typing problems with refs
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment