diff --git a/src/components/configuration/Themes.tsx b/src/components/configuration/Themes.tsx
index 14a265aaeb..8ce6707c00 100644
--- a/src/components/configuration/Themes.tsx
+++ b/src/components/configuration/Themes.tsx
@@ -88,11 +88,12 @@ const Themes = ({
 			<Header />
 			<NavBar>
 				{/* Display modal for new series if add series button is clicked */}
-				<NewResourceModal
-					showModal={displayNewThemesModal}
-					handleClose={hideNewThemesModal}
-					resource={"themes"}
-				/>
+				{ displayNewThemesModal &&
+					<NewResourceModal
+						handleClose={hideNewThemesModal}
+						resource={"themes"}
+					/>
+				}
 
 				{/* Include Burger-button menu*/}
 				<MainNav isOpen={displayNavigation} toggleMenu={toggleNavigation} />
diff --git a/src/components/events/Events.tsx b/src/components/events/Events.tsx
index 80e4e14983..4bd47f4d92 100644
--- a/src/components/events/Events.tsx
+++ b/src/components/events/Events.tsx
@@ -197,9 +197,8 @@ const Events = ({
 			<NavBar>
 				{
 					/* Display modal for new event if add event button is clicked */
-					!isFetchingAssetUploadOptions && (
+					!isFetchingAssetUploadOptions && displayNewEventModal && (
 						<NewResourceModal
-							showModal={displayNewEventModal}
 							handleClose={hideNewEventModal}
 							resource={"events"}
 						/>
diff --git a/src/components/events/Series.tsx b/src/components/events/Series.tsx
index 3df361b7fd..ebc8181cdb 100644
--- a/src/components/events/Series.tsx
+++ b/src/components/events/Series.tsx
@@ -164,11 +164,12 @@ const Series = ({
 			<Header />
 			<NavBar>
 				{/* Display modal for new series if add series button is clicked */}
-				<NewResourceModal
-					showModal={displayNewSeriesModal}
-					handleClose={hideNewSeriesModal}
-					resource={"series"}
-				/>
+				{ displayNewSeriesModal &&
+					<NewResourceModal
+						handleClose={hideNewSeriesModal}
+						resource={"series"}
+					/>
+				}
 
 				{displayDeleteSeriesModal && (
 					<DeleteSeriesModal close={hideDeleteModal} />
diff --git a/src/components/shared/NewResourceModal.tsx b/src/components/shared/NewResourceModal.tsx
index 42c2babe65..848e48df43 100644
--- a/src/components/shared/NewResourceModal.tsx
+++ b/src/components/shared/NewResourceModal.tsx
@@ -13,10 +13,12 @@ import { availableHotkeys } from "../../configs/hotkeysConfig";
  * This component renders the modal for adding new resources
  */
 const NewResourceModal = ({
-    handleClose,
-    showModal,
-    resource
-}: any) => {
+	handleClose,
+	resource
+}: {
+	handleClose: () => void,
+	resource: "events" | "series" | "user" | "group" | "acl" | "themes"
+}) => {
 	const { t } = useTranslation();
 
 	useHotkeys(
@@ -32,57 +34,55 @@ const NewResourceModal = ({
 
 	return (
 		// todo: add hotkeys
-		showModal && (
-			<>
-				<div className="modal-animation modal-overlay" />
-				<section
-					tabIndex={1}
-					className="modal wizard modal-animation"
-					id="add-event-modal"
-				>
-					<header>
-						<button
-              className="button-like-anchor fa fa-times close-modal"
-              onClick={() => close()}
-            />
-						{resource === "events" && <h2>{t("EVENTS.EVENTS.NEW.CAPTION")}</h2>}
-						{resource === "series" && <h2>{t("EVENTS.SERIES.NEW.CAPTION")}</h2>}
-						{resource === "themes" && (
-							<h2>{t("CONFIGURATION.THEMES.DETAILS.NEWCAPTION")}</h2>
-						)}
-						{resource === "acl" && <h2>{t("USERS.ACLS.NEW.CAPTION")}</h2>}
-						{resource === "group" && <h2>{t("USERS.GROUPS.NEW.CAPTION")}</h2>}
-						{resource === "user" && (
-							<h2>{t("USERS.USERS.DETAILS.NEWCAPTION")}</h2>
-						)}
-					</header>
-					{resource === "events" && (
-						//New Event Wizard
-						<NewEventWizard close={close} />
-					)}
-					{resource === "series" && (
-						// New Series Wizard
-						<NewSeriesWizard close={close} />
-					)}
+		<>
+			<div className="modal-animation modal-overlay" />
+			<section
+				tabIndex={1}
+				className="modal wizard modal-animation"
+				id="add-event-modal"
+			>
+				<header>
+					<button
+						className="button-like-anchor fa fa-times close-modal"
+						onClick={() => close()}
+					/>
+					{resource === "events" && <h2>{t("EVENTS.EVENTS.NEW.CAPTION")}</h2>}
+					{resource === "series" && <h2>{t("EVENTS.SERIES.NEW.CAPTION")}</h2>}
 					{resource === "themes" && (
-						// New Theme Wizard
-						<NewThemeWizard close={close} />
-					)}
-					{resource === "acl" && (
-						// New ACL Wizard
-						<NewAclWizard close={close} />
-					)}
-					{resource === "group" && (
-						// New Group Wizard
-						<NewGroupWizard close={close} />
+						<h2>{t("CONFIGURATION.THEMES.DETAILS.NEWCAPTION")}</h2>
 					)}
+					{resource === "acl" && <h2>{t("USERS.ACLS.NEW.CAPTION")}</h2>}
+					{resource === "group" && <h2>{t("USERS.GROUPS.NEW.CAPTION")}</h2>}
 					{resource === "user" && (
-						// New User Wizard
-						<NewUserWizard close={close} />
+						<h2>{t("USERS.USERS.DETAILS.NEWCAPTION")}</h2>
 					)}
-				</section>
-			</>
-		)
+				</header>
+				{resource === "events" && (
+					//New Event Wizard
+					<NewEventWizard close={close} />
+				)}
+				{resource === "series" && (
+					// New Series Wizard
+					<NewSeriesWizard close={close} />
+				)}
+				{resource === "themes" && (
+					// New Theme Wizard
+					<NewThemeWizard close={close} />
+				)}
+				{resource === "acl" && (
+					// New ACL Wizard
+					<NewAclWizard close={close} />
+				)}
+				{resource === "group" && (
+					// New Group Wizard
+					<NewGroupWizard close={close} />
+				)}
+				{resource === "user" && (
+					// New User Wizard
+					<NewUserWizard close={close} />
+				)}
+			</section>
+		</>
 	);
 };
 
diff --git a/src/components/users/Acls.tsx b/src/components/users/Acls.tsx
index afda3f9d10..14f5e8cb30 100644
--- a/src/components/users/Acls.tsx
+++ b/src/components/users/Acls.tsx
@@ -106,11 +106,12 @@ const Acls: React.FC = () => {
 			<Header />
 			<NavBar>
 				{/* Display modal for new acl if add acl button is clicked */}
-				<NewResourceModal
-					showModal={displayNewAclModal}
-					handleClose={hideNewAclModal}
-					resource="acl"
-				/>
+				{ displayNewAclModal &&
+					<NewResourceModal
+						handleClose={hideNewAclModal}
+						resource="acl"
+					/>
+				}
 
 				{/* Include Burger-button menu*/}
 				<MainNav isOpen={displayNavigation} toggleMenu={toggleNavigation} />
diff --git a/src/components/users/Groups.tsx b/src/components/users/Groups.tsx
index 5f10700310..f01e1a9b7a 100644
--- a/src/components/users/Groups.tsx
+++ b/src/components/users/Groups.tsx
@@ -121,11 +121,12 @@ const Groups = ({
 			<Header />
 			<NavBar>
 				{/* Display modal for new acl if add acl button is clicked */}
-				<NewResourceModal
-					showModal={displayNewGroupModal}
-					handleClose={hideNewGroupModal}
-					resource="group"
-				/>
+				{ displayNewGroupModal &&
+					<NewResourceModal
+						handleClose={hideNewGroupModal}
+						resource="group"
+					/>
+				}
 
 				{/* Include Burger-button menu*/}
 				<MainNav isOpen={displayNavigation} toggleMenu={toggleNavigation} />
diff --git a/src/components/users/Users.tsx b/src/components/users/Users.tsx
index 67b21af14c..b76a52ba1d 100644
--- a/src/components/users/Users.tsx
+++ b/src/components/users/Users.tsx
@@ -111,11 +111,12 @@ const Users: React.FC = () => {
 			<Header />
 			<NavBar>
 				{/* Display modal for new acl if add acl button is clicked */}
-				<NewResourceModal
-					showModal={displayNewUserModal}
-					handleClose={hideNewUserModal}
-					resource="user"
-				/>
+				{ displayNewUserModal &&
+					<NewResourceModal
+						handleClose={hideNewUserModal}
+						resource="user"
+					/>
+				}
 
 				{/* Include Burger-button menu*/}
 				<MainNav isOpen={displayNavigation} toggleMenu={toggleNavigation} />