diff --git a/view/next-project/src/components/common/Modal.tsx b/view/next-project/src/components/common/Modal.tsx
index f85fc4e0e..e5edd94b1 100644
--- a/view/next-project/src/components/common/Modal.tsx
+++ b/view/next-project/src/components/common/Modal.tsx
@@ -18,6 +18,10 @@ export default function Modal(props: Props) {
 
   useEffect(stopScrollingBackContent, []);
 
+  const preventCloseModalEvent = (event: any) => {
+    event.stopPropagation();
+  };
+
   const className =
     'relative sm:my-6 mx-auto bg-white-0 rounded-lg p-5' +
     (props.className ? ` ${props.className}` : '');
@@ -28,7 +32,11 @@ export default function Modal(props: Props) {
         className='fixed inset-0 z-50 flex items-center justify-center overflow-y-auto overflow-x-hidden bg-black-300/50 outline-none focus:outline-none'
         onClick={props.onClick}
       >
-        <div className={clsx(className)} style={{ maxHeight: '90vh', overflowY: 'auto' }}>
+        <div
+          className={clsx(className)}
+          style={{ maxHeight: '90vh', overflowY: 'auto' }}
+          onClick={preventCloseModalEvent}
+        >
           {props.children}
         </div>
       </div>
diff --git a/view/next-project/src/components/sponsors/DeleteModal.tsx b/view/next-project/src/components/sponsors/DeleteModal.tsx
index 2b8d5f1d7..8799944fb 100644
--- a/view/next-project/src/components/sponsors/DeleteModal.tsx
+++ b/view/next-project/src/components/sponsors/DeleteModal.tsx
@@ -24,7 +24,7 @@ const SponsorDeleteModal: FC<ModalProps> = (props) => {
   };
 
   return (
-    <Modal className='md:w-1/2'>
+    <Modal className='md:w-1/2' onClick={() => props.setShowModal(false)}>
       <div className='w-full'>
         <div className='ml-auto w-fit'>
           <CloseButton onClick={() => props.setShowModal(false)} />
diff --git a/view/next-project/src/components/sponsors/SponsorAddModal.tsx b/view/next-project/src/components/sponsors/SponsorAddModal.tsx
index 4a51f6af5..479a90332 100644
--- a/view/next-project/src/components/sponsors/SponsorAddModal.tsx
+++ b/view/next-project/src/components/sponsors/SponsorAddModal.tsx
@@ -38,7 +38,7 @@ export default function SponsorAddModal() {
   };
 
   return (
-    <Modal className='md:w-1/2'>
+    <Modal className='md:w-1/2' onClick={closeModal}>
       <div className='w-full'>
         <div className='ml-auto mr-5 w-fit'>
           <CloseButton onClick={closeModal} />
diff --git a/view/next-project/src/components/sponsors/SponsorEditModal.tsx b/view/next-project/src/components/sponsors/SponsorEditModal.tsx
index aa424d36f..0c108f743 100644
--- a/view/next-project/src/components/sponsors/SponsorEditModal.tsx
+++ b/view/next-project/src/components/sponsors/SponsorEditModal.tsx
@@ -35,8 +35,12 @@ export default function SponsorEditModal(props: Props) {
 
   const [isChecked, setIsChecked] = useState<boolean>(true);
 
+  const closeModal = () => {
+    props.setIsOpen(false);
+  };
+
   return (
-    <Modal className='md:w-1/2'>
+    <Modal className='md:w-1/2' onClick={closeModal}>
       <div className='w-full'>
         <div className='ml-auto mr-5 w-fit'>
           <CloseButton onClick={() => props.setIsOpen(false)} />