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/sponsoractivities/DeleteModal.tsx b/view/next-project/src/components/sponsoractivities/DeleteModal.tsx
index 86d52d777..ece0124f9 100644
--- a/view/next-project/src/components/sponsoractivities/DeleteModal.tsx
+++ b/view/next-project/src/components/sponsoractivities/DeleteModal.tsx
@@ -24,7 +24,7 @@ const SponsorActivitiesDeleteModal: 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/sponsoractivities/EditModal.tsx b/view/next-project/src/components/sponsoractivities/EditModal.tsx
index 0e0368db8..18e2ea0d9 100644
--- a/view/next-project/src/components/sponsoractivities/EditModal.tsx
+++ b/view/next-project/src/components/sponsoractivities/EditModal.tsx
@@ -351,8 +351,12 @@ export default function EditModal(props: ModalProps) {
     </div>
   );
 
+  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 w-fit'>
           <CloseButton
diff --git a/view/next-project/src/components/sponsoractivities/SponsorActivitiesAddModal.tsx b/view/next-project/src/components/sponsoractivities/SponsorActivitiesAddModal.tsx
index 46c0df584..2855b4658 100644
--- a/view/next-project/src/components/sponsoractivities/SponsorActivitiesAddModal.tsx
+++ b/view/next-project/src/components/sponsoractivities/SponsorActivitiesAddModal.tsx
@@ -425,8 +425,12 @@ export default function SponsorActivitiesAddModal(props: Props) {
     );
   };
 
+  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 w-fit'>
           <CloseButton
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)} />
diff --git a/view/next-project/src/components/sponsorstyles/DeleteModal.tsx b/view/next-project/src/components/sponsorstyles/DeleteModal.tsx
index 74e8f3ad8..6c7af0edd 100644
--- a/view/next-project/src/components/sponsorstyles/DeleteModal.tsx
+++ b/view/next-project/src/components/sponsorstyles/DeleteModal.tsx
@@ -24,7 +24,7 @@ const SponsorStyleDeleteModal: 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/sponsorstyles/EditModal.tsx b/view/next-project/src/components/sponsorstyles/EditModal.tsx
index 94555608b..6e08c1675 100644
--- a/view/next-project/src/components/sponsorstyles/EditModal.tsx
+++ b/view/next-project/src/components/sponsorstyles/EditModal.tsx
@@ -73,8 +73,12 @@ export default function EditModal(props: ModalProps) {
     </div>
   );
 
+  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 w-fit'>
           <CloseButton
diff --git a/view/next-project/src/components/sponsorstyles/SponsorStyleAddModal.tsx b/view/next-project/src/components/sponsorstyles/SponsorStyleAddModal.tsx
index 3af8dc596..5097aa26c 100644
--- a/view/next-project/src/components/sponsorstyles/SponsorStyleAddModal.tsx
+++ b/view/next-project/src/components/sponsorstyles/SponsorStyleAddModal.tsx
@@ -39,8 +39,12 @@ export default function SponsorAddModal(props: ModalProps) {
     router.reload();
   };
 
+  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)} />