diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 6fc6a2a0e8..da4c6a0723 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import i18n from "../i18n/i18n";
@@ -23,6 +23,7 @@ import { UserInfoState } from "../slices/userInfoSlice";
 import { Tooltip } from "./shared/Tooltip";
 import { HiTranslate } from "react-icons/hi";
 import { IconContext } from "react-icons";
+import { ModalHandle } from "./shared/modals/Modal";
 
 // References for detecting a click outside of the container of the dropdown menus
 const containerLang = React.createRef<HTMLDivElement>();
@@ -52,8 +53,8 @@ const Header = () => {
 	const [displayMenuUser, setMenuUser] = useState(false);
 	const [displayMenuNotify, setMenuNotify] = useState(false);
 	const [displayMenuHelp, setMenuHelp] = useState(false);
-	const [displayRegistrationModal, setRegistrationModal] = useState(false);
-	const [displayHotKeyCheatSheet, setHotKeyCheatSheet] = useState(false);
+	const registrationModalRef = useRef<ModalHandle>(null);
+	const hotKeyCheatSheetModalRef = useRef<ModalHandle>(null);
 
 	const healthStatus = useAppSelector(state => getHealthStatus(state));
 	const errorCounter = useAppSelector(state => getErrorCount(state));
@@ -69,11 +70,7 @@ const Header = () => {
 	};
 
 	const showRegistrationModal = () => {
-		setRegistrationModal(true);
-	};
-
-	const hideRegistrationModal = () => {
-		setRegistrationModal(false);
+		registrationModalRef.current?.open()
 	};
 
 	const redirectToServices = async () => {
@@ -85,15 +82,15 @@ const Header = () => {
 	};
 
 	const showHotKeyCheatSheet = () => {
-		setHotKeyCheatSheet(true);
-	};
-
-	const hideHotKeyCheatSheet = () => {
-		setHotKeyCheatSheet(false);
+		hotKeyCheatSheetModalRef.current?.open()
 	};
 
 	const toggleHotKeyCheatSheet = () => {
-		setHotKeyCheatSheet(!displayHotKeyCheatSheet);
+		if (hotKeyCheatSheetModalRef.current?.isOpen?.()) {
+			hotKeyCheatSheetModalRef.current?.close?.()
+		} else {
+			hotKeyCheatSheetModalRef.current?.open()
+		}
 	};
 
 	useHotkeys(
@@ -277,14 +274,10 @@ const Header = () => {
 			</header>
 
 			{/* Adopters Registration Modal */}
-			{displayRegistrationModal && (
-				<RegistrationModal close={hideRegistrationModal} />
-			)}
+			<RegistrationModal modalRef={registrationModalRef}/>
 
 			{/* Hotkey Cheat Sheet */}
-			{displayHotKeyCheatSheet && (
-				<HotKeyCheatSheet close={hideHotKeyCheatSheet} />
-			)}
+			<HotKeyCheatSheet modalRef={hotKeyCheatSheetModalRef}/>
 		</>
 	);
 };
diff --git a/src/components/configuration/Themes.tsx b/src/components/configuration/Themes.tsx
index fa4fab200c..f3c51e573c 100644
--- a/src/components/configuration/Themes.tsx
+++ b/src/components/configuration/Themes.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import MainNav from "../shared/MainNav";
 import { Link } from "react-router-dom";
@@ -20,6 +20,7 @@ import { hasAccess } from "../../utils/utils";
 import { getCurrentFilterResource } from "../../selectors/tableFilterSelectors";
 import { useAppDispatch, useAppSelector } from "../../store";
 import { fetchThemes } from "../../slices/themeSlice";
+import { ModalHandle } from "../shared/modals/Modal";
 
 /**
  * This component renders the table view of events
@@ -31,7 +32,7 @@ const Themes = () => {
 	const currentFilterType = useAppSelector(state => getCurrentFilterResource(state));
 
 	const [displayNavigation, setNavigation] = useState(false);
-	const [displayNewThemesModal, setNewThemesModal] = useState(false);
+	const newThemesModalRef = useRef<ModalHandle>(null);
 
 	const user = useAppSelector(state => getUserInformation(state));
 	const themes = useAppSelector(state => getTotalThemes(state));
@@ -67,11 +68,11 @@ const Themes = () => {
 	};
 
 	const showNewThemesModal = () => {
-		setNewThemesModal(true);
+		newThemesModalRef.current?.open();
 	};
 
 	const hideNewThemesModal = () => {
-		setNewThemesModal(false);
+		newThemesModalRef.current?.close?.();
 	};
 
 	return (
@@ -79,12 +80,11 @@ const Themes = () => {
 			<Header />
 			<NavBar>
 				{/* Display modal for new series if add series button is clicked */}
-				{ displayNewThemesModal &&
-					<NewResourceModal
-						handleClose={hideNewThemesModal}
-						resource={"themes"}
-					/>
-				}
+				<NewResourceModal
+					handleClose={hideNewThemesModal}
+					resource={"themes"}
+					modalRef={newThemesModalRef}
+				/>
 
 				{/* Include Burger-button menu*/}
 				<MainNav isOpen={displayNavigation} toggleMenu={toggleNavigation} />
diff --git a/src/components/configuration/partials/ThemesActionsCell.tsx b/src/components/configuration/partials/ThemesActionsCell.tsx
index 87925b8fb9..6b4a1b9031 100644
--- a/src/components/configuration/partials/ThemesActionsCell.tsx
+++ b/src/components/configuration/partials/ThemesActionsCell.tsx
@@ -1,7 +1,6 @@
-import React, { useState } from "react";
+import React, { useRef } from "react";
 import { useTranslation } from "react-i18next";
 import ConfirmModal from "../../shared/ConfirmModal";
-import ThemeDetailsModal from "./wizard/ThemeDetailsModal";
 import {
 	fetchThemeDetails,
 	fetchUsage,
@@ -11,6 +10,8 @@ import { hasAccess } from "../../../utils/utils";
 import { useAppDispatch, useAppSelector } from "../../../store";
 import { deleteTheme, ThemeDetailsType } from "../../../slices/themeSlice";
 import { Tooltip } from "../../shared/Tooltip";
+import ThemeDetails from "./wizard/ThemeDetails";
+import { Modal, ModalHandle } from "../../shared/modals/Modal";
 
 /**
  * This component renders the action cells of themes in the table view
@@ -23,24 +24,24 @@ const ThemesActionsCell = ({
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
 
-	const [displayDeleteConfirmation, setDeleteConfirmation] = useState(false);
-	const [displayThemeDetails, setThemeDetails] = useState(false);
+	const deleteConfirmationModalRef = useRef<ModalHandle>(null);
+	const detailsModalRef = useRef<ModalHandle>(null);
 
 	const user = useAppSelector(state => getUserInformation(state));
 
 	const hideDeleteConfirmation = () => {
-		setDeleteConfirmation(false);
+		deleteConfirmationModalRef.current?.close?.();
 	};
 
 	const hideThemeDetails = () => {
-		setThemeDetails(false);
+		detailsModalRef.current?.close?.();
 	};
 
 	const showThemeDetails = async () => {
 		await dispatch(fetchThemeDetails(row.id));
 		await dispatch(fetchUsage(row.id));
 
-		setThemeDetails(true);
+		detailsModalRef.current?.open();
 	};
 
 	const deletingTheme = (id: number) => {
@@ -59,32 +60,34 @@ const ThemesActionsCell = ({
 				</Tooltip>
 			)}
 
-			{displayThemeDetails && (
-				<ThemeDetailsModal
-					handleClose={hideThemeDetails}
-					themeName={row.name}
-				/>
-			)}
+			{/* themes details modal */}
+			<Modal
+				header={t("CONFIGURATION.THEMES.DETAILS.EDITCAPTION", { name: row.name })}
+				classId="theme-details-modal"
+				ref={detailsModalRef}
+			>
+				{/* component that manages tabs of theme details modal*/}
+				<ThemeDetails close={hideThemeDetails} />
+			</Modal>
 
 			{/* delete themes */}
 			{hasAccess("ROLE_UI_THEMES_DELETE", user) && (
 				<Tooltip title={t("CONFIGURATION.THEMES.TABLE.TOOLTIP.DELETE")}>
 					<button
-						onClick={() => setDeleteConfirmation(true)}
+						onClick={() => deleteConfirmationModalRef.current?.open()}
 						className="button-like-anchor remove ng-scope ng-isolate-scope"
 					/>
 				</Tooltip>
 			)}
 
-			{displayDeleteConfirmation && (
-				<ConfirmModal
-					close={hideDeleteConfirmation}
-					resourceName={row.name}
-					resourceId={row.id}
-					deleteMethod={deletingTheme}
-					resourceType="THEME"
-				/>
-			)}
+			<ConfirmModal
+				close={hideDeleteConfirmation}
+				resourceName={row.name}
+				resourceId={row.id}
+				deleteMethod={deletingTheme}
+				resourceType="THEME"
+				modalRef={deleteConfirmationModalRef}
+			/>
 		</>
 	);
 };
diff --git a/src/components/configuration/partials/wizard/ThemeDetailsModal.tsx b/src/components/configuration/partials/wizard/ThemeDetailsModal.tsx
deleted file mode 100644
index fe3e4a242e..0000000000
--- a/src/components/configuration/partials/wizard/ThemeDetailsModal.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-import ThemeDetails from "./ThemeDetails";
-
-/**
- * This component renders the modal for displaying theme details
- */
-const ThemeDetailsModal = ({
-	handleClose,
-	themeName
-}: {
-	handleClose: () => void,
-	themeName: string
-}) => {
-	const { t } = useTranslation();
-
-	const close = () => {
-		handleClose();
-	};
-
-	return (
-		<>
-			<div className="modal-animation modal-overlay" />
-			<section
-				id="theme-details-modal"
-				className="modal wizard modal-animation"
-			>
-				<header>
-					<button className="button-like-anchor fa fa-times close-modal" onClick={() => close()} />
-					<h2>
-						{t("CONFIGURATION.THEMES.DETAILS.EDITCAPTION", { name: themeName })}
-					</h2>
-				</header>
-
-				{/* component that manages tabs of theme details modal*/}
-				{/* <ThemeDetails themeId={themeId} close={close} /> */}
-        <ThemeDetails close={close} />
-			</section>
-		</>
-	);
-};
-
-export default ThemeDetailsModal;
diff --git a/src/components/events/Events.tsx b/src/components/events/Events.tsx
index 0e1337a4f6..6c6ddad975 100644
--- a/src/components/events/Events.tsx
+++ b/src/components/events/Events.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import cn from "classnames";
 import { Link, useLocation } from "react-router-dom";
@@ -43,6 +43,7 @@ import {
 import { fetchSeries } from "../../slices/seriesSlice";
 import EventDetailsModal from "./partials/modals/EventDetailsModal";
 import { showModal } from "../../selectors/eventDetailsSelectors";
+import { Modal, ModalHandle } from "../shared/modals/Modal";
 
 // References for detecting a click outside of the container of the dropdown menu
 const containerAction = React.createRef<HTMLDivElement>();
@@ -59,16 +60,11 @@ const Events = () => {
 
 	const [displayActionMenu, setActionMenu] = useState(false);
 	const [displayNavigation, setNavigation] = useState(false);
-	const [displayNewEventModal, setNewEventModal] = useState(false);
-	const [displayDeleteModal, setDeleteModal] = useState(false);
-	const [displayStartTaskModal, setStartTaskModal] = useState(false);
-	const [
-		displayEditScheduledEventsModal,
-		setEditScheduledEventsModal,
-	] = useState(false);
-	const [displayEditMetadataEventsModal, setEditMetadataEventsModal] = useState(
-		false
-	);
+	const newEventModalRef = useRef<ModalHandle>(null);
+	const startTaskModalRef = useRef<ModalHandle>(null);
+	const deleteModalRef = useRef<ModalHandle>(null);
+	const editScheduledEventsModalRef = useRef<ModalHandle>(null);
+	const editMetadataEventsModalRef = useRef<ModalHandle>(null);
 
 	const user = useAppSelector(state => getUserInformation(state));
 	const showActions = useAppSelector(state => isShowActions(state));
@@ -149,27 +145,27 @@ const Events = () => {
 		await dispatch(fetchEventMetadata());
 		await dispatch(fetchAssetUploadOptions());
 
-		setNewEventModal(true);
+		newEventModalRef.current?.open();
 	};
 
 	const hideNewEventModal = () => {
-		setNewEventModal(false);
+		newEventModalRef.current?.close?.();
 	};
 
 	const hideDeleteModal = () => {
-		setDeleteModal(false);
+		deleteModalRef.current?.close?.();
 	};
 
 	const hideStartTaskModal = () => {
-		setStartTaskModal(false);
+		startTaskModalRef.current?.close?.();
 	};
 
 	const hideEditScheduledEventsModal = () => {
-		setEditScheduledEventsModal(false);
+		editScheduledEventsModalRef.current?.close?.();
 	};
 
 	const hideEditMetadataEventsModal = () => {
-		setEditMetadataEventsModal(false);
+		editMetadataEventsModalRef.current?.close?.();
 	};
 
 	useHotkeys(
@@ -187,26 +183,48 @@ const Events = () => {
 			<NavBar>
 				{
 					/* Display modal for new event if add event button is clicked */
-					!isFetchingAssetUploadOptions && displayNewEventModal && (
+					!isFetchingAssetUploadOptions && (
 						<NewResourceModal
 							handleClose={hideNewEventModal}
 							resource={"events"}
+							modalRef={newEventModalRef}
 						/>
 					)
 				}
 
 				{/* Display bulk actions modal if one is chosen from dropdown */}
-				{displayDeleteModal && <DeleteEventsModal close={hideDeleteModal} />}
-
-				{displayStartTaskModal && <StartTaskModal close={hideStartTaskModal} />}
-
-				{displayEditScheduledEventsModal && (
+				<Modal
+					header={t("BULK_ACTIONS.DELETE.EVENTS.CAPTION")}
+					classId="delete-events-status-modal"
+					className="modal active modal-open"
+					ref={deleteModalRef}
+				>
+					<DeleteEventsModal close={hideDeleteModal} />
+				</Modal>
+
+				<Modal
+					header={t("BULK_ACTIONS.SCHEDULE_TASK.CAPTION")}
+					classId=""
+					ref={startTaskModalRef}
+				>
+					<StartTaskModal close={hideStartTaskModal} />
+				</Modal>
+
+				<Modal
+					header={t("BULK_ACTIONS.EDIT_EVENTS.CAPTION")}
+					classId=""
+					ref={editScheduledEventsModalRef}
+				>
 					<EditScheduledEventsModal close={hideEditScheduledEventsModal} />
-				)}
+				</Modal>
 
-				{displayEditMetadataEventsModal && (
+				<Modal
+					header={t("BULK_ACTIONS.EDIT_EVENTS_METADATA.CAPTION")}
+					classId=""
+					ref={editMetadataEventsModalRef}
+				>
 					<EditMetadataEventsModal close={hideEditMetadataEventsModal} />
-				)}
+				</Modal>
 
 				{/* Include Burger-button menu */}
 				<MainNav isOpen={displayNavigation} toggleMenu={toggleNavigation} />
@@ -238,7 +256,7 @@ const Events = () => {
 						<Stats />
 					</div>
 				)}
-				
+
 				<div className="btn-group">
 					{hasAccess("ROLE_UI_EVENTS_CREATE", user) && (
 						<button className="add" onClick={() => showNewEventModal()}>
@@ -266,14 +284,14 @@ const Events = () => {
 								<ul className="dropdown-ul">
 									{hasAccess("ROLE_UI_EVENTS_DELETE", user) && (
 										<li>
-											<button className="button-like-anchor" onClick={() => setDeleteModal(true)}>
+											<button className="button-like-anchor" onClick={() => deleteModalRef.current?.open()}>
 												{t("BULK_ACTIONS.DELETE.EVENTS.CAPTION")}
 											</button>
 										</li>
 									)}
 									{hasAccess("ROLE_UI_TASKS_CREATE", user) && (
 										<li>
-											<button className="button-like-anchor" onClick={() => setStartTaskModal(true)}>
+											<button className="button-like-anchor" onClick={() => startTaskModalRef.current?.open()}>
 												{t("BULK_ACTIONS.SCHEDULE_TASK.CAPTION")}
 											</button>
 										</li>
@@ -281,14 +299,14 @@ const Events = () => {
 									{hasAccess("ROLE_UI_EVENTS_DETAILS_SCHEDULING_EDIT", user) &&
 										hasAccess("ROLE_UI_EVENTS_DETAILS_METADATA_EDIT", user) && (
 											<li>
-												<button className="button-like-anchor" onClick={() => setEditScheduledEventsModal(true)}>
+												<button className="button-like-anchor" onClick={() => editScheduledEventsModalRef.current?.open()}>
 													{t("BULK_ACTIONS.EDIT_EVENTS.CAPTION")}
 												</button>
 											</li>
 										)}
 									{hasAccess("ROLE_UI_EVENTS_DETAILS_METADATA_EDIT", user) && (
 										<li>
-											<button className="button-like-anchor" onClick={() => setEditMetadataEventsModal(true)}>
+											<button className="button-like-anchor" onClick={() => editMetadataEventsModalRef.current?.open()}>
 												{t("BULK_ACTIONS.EDIT_EVENTS_METADATA.CAPTION")}
 											</button>
 										</li>
diff --git a/src/components/events/Series.tsx b/src/components/events/Series.tsx
index 4dcce7f070..7685c8dfcc 100644
--- a/src/components/events/Series.tsx
+++ b/src/components/events/Series.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import MainNav from "../shared/MainNav";
 import { useTranslation } from "react-i18next";
 import cn from "classnames";
@@ -22,9 +22,7 @@ import MainView from "../MainView";
 import Footer from "../Footer";
 import { getUserInformation } from "../../selectors/userInfoSelectors";
 import { hasAccess } from "../../utils/utils";
-import { availableHotkeys } from "../../configs/hotkeysConfig";
 import { getCurrentFilterResource } from "../../selectors/tableFilterSelectors";
-import { useHotkeys } from "react-hotkeys-hook";
 import { useAppDispatch, useAppSelector } from "../../store";
 import { fetchEvents } from "../../slices/eventSlice";
 import {
@@ -34,6 +32,7 @@ import {
 	showActionsSeries,
 } from "../../slices/seriesSlice";
 import { fetchSeriesDetailsTobiraNew } from "../../slices/seriesSlice";
+import { Modal, ModalHandle } from "../shared/modals/Modal";
 
 // References for detecting a click outside of the container of the dropdown menu
 const containerAction = React.createRef<HTMLDivElement>();
@@ -46,8 +45,8 @@ const Series = () => {
 	const dispatch = useAppDispatch();
 	const [displayActionMenu, setActionMenu] = useState(false);
 	const [displayNavigation, setNavigation] = useState(false);
-	const [displayNewSeriesModal, setNewSeriesModal] = useState(false);
-	const [displayDeleteSeriesModal, setDeleteSeriesModal] = useState(false);
+	const newSeriesModalRef = useRef<ModalHandle>(null);
+	const deleteModalRef = useRef<ModalHandle>(null);
 
   const user = useAppSelector(state => getUserInformation(state));
 	const currentFilterType = useAppSelector(state => getCurrentFilterResource(state));
@@ -130,39 +129,36 @@ const Series = () => {
 		await dispatch(fetchSeriesThemes());
 		await dispatch(fetchSeriesDetailsTobiraNew("/"));
 
-		setNewSeriesModal(true);
+		newSeriesModalRef.current?.open();
 	};
 
 	const hideNewSeriesModal = () => {
-		setNewSeriesModal(false);
+		newSeriesModalRef.current?.close?.();
 	};
 
 	const hideDeleteModal = () => {
-		setDeleteSeriesModal(false);
+		deleteModalRef.current?.close?.();
 	};
 
-	useHotkeys(
-    availableHotkeys.general.NEW_SERIES.sequence,
-    () => showNewSeriesModal(),
-		{ description: t(availableHotkeys.general.NEW_SERIES.description) ?? undefined },
-    [showNewSeriesModal]
-  );
-
 	return (
 		<>
 			<Header />
 			<NavBar>
 				{/* Display modal for new series if add series button is clicked */}
-				{ displayNewSeriesModal &&
-					<NewResourceModal
-						handleClose={hideNewSeriesModal}
-						resource={"series"}
-					/>
-				}
-
-				{displayDeleteSeriesModal && (
+				<NewResourceModal
+					handleClose={hideNewSeriesModal}
+					resource={"series"}
+					modalRef={newSeriesModalRef}
+				/>
+
+				<Modal
+					header={t("BULK_ACTIONS.DELETE.SERIES.CAPTION")}
+					classId="delete-series-status-modal"
+					className="modal active modal-open"
+					ref={deleteModalRef}
+				>
 					<DeleteSeriesModal close={hideDeleteModal} />
-				)}
+				</Modal>
 
 				{/* Include Burger-button menu */}
 				<MainNav isOpen={displayNavigation} toggleMenu={toggleNavigation} />
@@ -187,7 +183,7 @@ const Series = () => {
 						</Link>
 					)}
 				</nav>
-				
+
 				<div className="btn-group">
 					{hasAccess("ROLE_UI_SERIES_CREATE", user) && (
 						<button className="add" onClick={() => showNewSeriesModal()}>
@@ -215,7 +211,7 @@ const Series = () => {
 								<ul className="dropdown-ul">
 									{hasAccess("ROLE_UI_SERIES_DELETE", user) && (
 										<li>
-											<button className="button-like-anchor" onClick={() => setDeleteSeriesModal(true)}>
+											<button className="button-like-anchor" onClick={() => deleteModalRef.current?.open()}>
 												{t("BULK_ACTIONS.DELETE.SERIES.CAPTION")}
 											</button>
 										</li>
diff --git a/src/components/events/partials/EventActionCell.tsx b/src/components/events/partials/EventActionCell.tsx
index 0654b63cf2..ab7996d6b1 100644
--- a/src/components/events/partials/EventActionCell.tsx
+++ b/src/components/events/partials/EventActionCell.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useRef } from "react";
 import { useTranslation } from "react-i18next";
 import ConfirmModal from "../../shared/ConfirmModal";
 import EmbeddingCodeModal from "./modals/EmbeddingCodeModal";
@@ -17,6 +17,7 @@ import {
 import { Event, deleteEvent } from "../../../slices/eventSlice";
 import { Tooltip } from "../../shared/Tooltip";
 import { openModal } from "../../../slices/eventDetailsSlice";
+import { Modal, ModalHandle } from "../../shared/modals/Modal";
 
 /**
  * This component renders the action cells of events in the table view
@@ -29,14 +30,14 @@ const EventActionCell = ({
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
 
-	const [displayDeleteConfirmation, setDeleteConfirmation] = useState(false);
-	const [displaySeriesDetailsModal, setSeriesDetailsModal] = useState(false);
-	const [displayEmbeddingCodeModal, setEmbeddingCodeModal] = useState(false);
+	const deleteConfirmationModalRef = useRef<ModalHandle>(null);
+	const seriesDetailsModalRef = useRef<ModalHandle>(null);
+	const embeddingCodeModalRef = useRef<ModalHandle>(null);
 
 	const user = useAppSelector(state => getUserInformation(state));
 
 	const hideDeleteConfirmation = () => {
-		setDeleteConfirmation(false);
+		deleteConfirmationModalRef.current?.close?.()
 	};
 
 	const deletingEvent = (id: string) => {
@@ -44,19 +45,15 @@ const EventActionCell = ({
 	};
 
 	const hideEmbeddingCodeModal = () => {
-		setEmbeddingCodeModal(false);
+		embeddingCodeModalRef.current?.close?.();
 	};
 
 	const showEmbeddingCodeModal = () => {
-		setEmbeddingCodeModal(true);
+		embeddingCodeModalRef.current?.open();
 	};
 
 	const showSeriesDetailsModal = () => {
-		setSeriesDetailsModal(true);
-	};
-
-	const hideSeriesDetailsModal = () => {
-		setSeriesDetailsModal(false);
+		seriesDetailsModalRef.current?.open();
 	};
 
 	const onClickSeriesDetails = async () => {
@@ -89,11 +86,11 @@ const EventActionCell = ({
 
 	return (
 		<>
-			{!!row.series && displaySeriesDetailsModal && (
+			{!!row.series && (
 				<SeriesDetailsModal
-					handleClose={hideSeriesDetailsModal}
 					seriesId={row.series.id}
 					seriesTitle={row.series.title}
+					modalRef={seriesDetailsModalRef}
 				/>
 			)}
 
@@ -122,22 +119,21 @@ const EventActionCell = ({
 			{hasAccess("ROLE_UI_EVENTS_DELETE", user) && (
 				<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.DELETE")}>
 					<button
-						onClick={() => setDeleteConfirmation(true)}
+						onClick={() => deleteConfirmationModalRef.current?.open()}
 						className="button-like-anchor remove"
 					/>
 				</Tooltip>
 			)}
 
 			{/* Confirmation for deleting an event*/}
-			{displayDeleteConfirmation && (
-				<ConfirmModal
-					close={hideDeleteConfirmation}
-					resourceName={row.title}
-					resourceType="EVENT"
-					resourceId={row.id}
-					deleteMethod={deletingEvent}
-				/>
-			)}
+			<ConfirmModal
+				close={hideDeleteConfirmation}
+				resourceName={row.title}
+				resourceType="EVENT"
+				resourceId={row.id}
+				deleteMethod={deletingEvent}
+				modalRef={deleteConfirmationModalRef}
+			/>
 
 			{/* If the event has an preview then the editor can be opened and status if it needs to be cut is shown */}
 			{!!row.has_preview && hasAccess("ROLE_UI_EVENTS_EDITOR_VIEW", user) && (
@@ -209,9 +205,15 @@ const EventActionCell = ({
 				</Tooltip>
 			)}
 
-			{displayEmbeddingCodeModal && (
+			{/* Embedding Code Modal */}
+			<Modal
+				header={t("CONFIRMATIONS.ACTIONS.SHOW.EMBEDDING_CODE")}
+				classId="embedding-code"
+				ref={embeddingCodeModalRef}
+			>
+				{/* component that manages tabs of theme details modal*/}
 				<EmbeddingCodeModal close={hideEmbeddingCodeModal} eventId={row.id} />
-			)}
+			</Modal>
 		</>
 	);
 };
diff --git a/src/components/events/partials/ModalTabsAndPages/DetailsTobiraTab.tsx b/src/components/events/partials/ModalTabsAndPages/DetailsTobiraTab.tsx
index 47cdd1edc5..44c1f9d2f6 100644
--- a/src/components/events/partials/ModalTabsAndPages/DetailsTobiraTab.tsx
+++ b/src/components/events/partials/ModalTabsAndPages/DetailsTobiraTab.tsx
@@ -6,13 +6,14 @@ import { addNotification } from "../../../../slices/notificationSlice";
 import { NOTIFICATION_CONTEXT } from "../../../../configs/modalConfig";
 import { getEventDetailsTobiraData, getEventDetailsTobiraDataError } from "../../../../selectors/eventDetailsSelectors";
 import { Formik } from "formik";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import EventDetailsTabHierarchyNavigation from "./EventDetailsTabHierarchyNavigation";
 import NewTobiraPage, { TobiraFormProps } from "./NewTobiraPage";
 import { fetchSeriesDetailsTobira, removeSeriesTobiraPath, setTobiraTabHierarchy, TobiraData, updateSeriesTobiraPath } from "../../../../slices/seriesDetailsSlice";
 import { fetchSeriesDetailsTobiraNew, TobiraPage } from "../../../../slices/seriesSlice";
 import ConfirmModal from "../../../shared/ConfirmModal";
 import { Tooltip } from "../../../shared/Tooltip";
+import { ModalHandle } from "../../../shared/modals/Modal";
 
 
 export type TobiraTabHierarchy = "main" | "edit-path";
@@ -187,7 +188,7 @@ type TobiraTableProps = {
 
 const TobiraTable = ({ tobiraData, i18nKey, openSubTab, handleDelete }: TobiraTableProps) => {
 	const { t } = useTranslation();
-	const [showConfirmationModal, setShowConfirmationModal] = useState(false);
+	const deleteConfirmationModalRef = useRef<ModalHandle>(null);
 
 	return <div className="obj">
 		<header>{t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.PAGES`)}</header>
@@ -230,7 +231,7 @@ const TobiraTable = ({ tobiraData, i18nKey, openSubTab, handleDelete }: TobiraTa
 							<Tooltip title={t("EVENTS.SERIES.DETAILS.TOBIRA.REMOVE_PATH")}>
 								<button
 									style={{ margin: 5 }}
-									onClick={() => setShowConfirmationModal(true)}
+									onClick={() => deleteConfirmationModalRef.current?.open()}
 									className="button-like-anchor remove pull-right"
 								/>
 							</Tooltip>
@@ -241,13 +242,14 @@ const TobiraTable = ({ tobiraData, i18nKey, openSubTab, handleDelete }: TobiraTa
 									onClick={() => openSubTab("edit-path", hostPage)}
 								/>
 							</Tooltip>
-							{showConfirmationModal && <ConfirmModal
-								close={() => setShowConfirmationModal(false)}
+							<ConfirmModal
+								close={() => deleteConfirmationModalRef.current?.close?.()}
 								resourceName={hostPage.path}
 								resourceId={null}
 								deleteMethod={() => handleDelete(hostPage)}
 								resourceType="TOBIRA_PATH"
-							/>}
+								modalRef={deleteConfirmationModalRef}
+							/>
 						</>}
 					</td>
 				</tr>)}
diff --git a/src/components/events/partials/SeriesActionsCell.tsx b/src/components/events/partials/SeriesActionsCell.tsx
index 6315c17ba8..90bc29808a 100644
--- a/src/components/events/partials/SeriesActionsCell.tsx
+++ b/src/components/events/partials/SeriesActionsCell.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useRef } from "react";
 import { useTranslation } from "react-i18next";
 import ConfirmModal from "../../shared/ConfirmModal";
 import SeriesDetailsModal from "./modals/SeriesDetailsModal";
@@ -24,6 +24,7 @@ import {
 } from "../../../slices/seriesSlice";
 
 import { Tooltip } from "../../shared/Tooltip";
+import { ModalHandle } from "../../shared/modals/Modal";
 
 /**
  * This component renders the action cells of series in the table view
@@ -36,31 +37,27 @@ const SeriesActionsCell = ({
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
 
-	const [displayDeleteConfirmation, setDeleteConfirmation] = useState(false);
-	const [displaySeriesDetailsModal, setSeriesDetailsModal] = useState(false);
+	const deleteConfirmationModalRef = useRef<ModalHandle>(null);
+	const detailsModalRef = useRef<ModalHandle>(null);
 
 	const user = useAppSelector(state => getUserInformation(state));
 	const hasEvents = useAppSelector(state => getSeriesHasEvents(state));
 	const deleteAllowed = useAppSelector(state => isSeriesDeleteAllowed(state));
 
 	const hideDeleteConfirmation = () => {
-		setDeleteConfirmation(false);
+		deleteConfirmationModalRef.current?.close?.();
 	};
 
 	const showDeleteConfirmation = async () => {
 		await dispatch(checkForEventsDeleteSeriesModal(row.id));
 
-		setDeleteConfirmation(true);
+		deleteConfirmationModalRef.current?.open();
 	};
 
 	const deletingSeries = (id: string) => {
 		dispatch(deleteSeries(id));
 	};
 
-	const hideSeriesDetailsModal = () => {
-		setSeriesDetailsModal(false);
-	};
-
 	const showSeriesDetailsModal = async () => {
 		await dispatch(fetchSeriesDetailsMetadata(row.id));
 		await dispatch(fetchSeriesDetailsAcls(row.id));
@@ -69,7 +66,7 @@ const SeriesActionsCell = ({
 		await dispatch(fetchSeriesDetailsThemeNames());
 		await dispatch(fetchSeriesDetailsTobira(row.id));
 
-		setSeriesDetailsModal(true);
+		detailsModalRef.current?.open();
 	};
 
 	return (
@@ -84,13 +81,11 @@ const SeriesActionsCell = ({
 				</Tooltip>
 			)}
 
-			{displaySeriesDetailsModal && (
-				<SeriesDetailsModal
-					handleClose={hideSeriesDetailsModal}
-					seriesId={row.id}
-					seriesTitle={row.title}
-				/>
-			)}
+			<SeriesDetailsModal
+				seriesId={row.id}
+				seriesTitle={row.title}
+				modalRef={detailsModalRef}
+			/>
 
 			{/* delete series */}
 			{hasAccess("ROLE_UI_SERIES_DELETE", user) && (
@@ -103,23 +98,22 @@ const SeriesActionsCell = ({
 				</Tooltip>
 			)}
 
-			{displayDeleteConfirmation && (
-				<ConfirmModal
-					close={hideDeleteConfirmation}
-					resourceName={row.title}
-					resourceType="SERIES"
-					resourceId={row.id}
-					deleteMethod={deletingSeries}
-					deleteAllowed={deleteAllowed}
-					showCautionMessage={hasEvents}
-					deleteNotAllowedMessage={
-						"CONFIRMATIONS.ERRORS.SERIES_HAS_EVENTS"
-					} /* The highlighted series cannot be deleted as they still contain events */
-					deleteWithCautionMessage={
-						"CONFIRMATIONS.WARNINGS.SERIES_HAS_EVENTS"
-					} /* This series does contain events. Deleting the series will not delete the events. */
-				/>
-			)}
+			<ConfirmModal
+				close={hideDeleteConfirmation}
+				resourceName={row.title}
+				resourceType="SERIES"
+				resourceId={row.id}
+				deleteMethod={deletingSeries}
+				deleteAllowed={deleteAllowed}
+				showCautionMessage={hasEvents}
+				deleteNotAllowedMessage={
+					"CONFIRMATIONS.ERRORS.SERIES_HAS_EVENTS"
+				} /* The highlighted series cannot be deleted as they still contain events */
+				deleteWithCautionMessage={
+					"CONFIRMATIONS.WARNINGS.SERIES_HAS_EVENTS"
+				} /* This series does contain events. Deleting the series will not delete the events. */
+				modalRef={deleteConfirmationModalRef}
+			/>
 		</>
 	);
 };
diff --git a/src/components/events/partials/modals/DeleteEventsModal.tsx b/src/components/events/partials/modals/DeleteEventsModal.tsx
index 550655a42c..32804d073f 100644
--- a/src/components/events/partials/modals/DeleteEventsModal.tsx
+++ b/src/components/events/partials/modals/DeleteEventsModal.tsx
@@ -4,8 +4,6 @@ import cn from "classnames";
 import { getSelectedRows } from "../../../../selectors/tableSelectors";
 import { useAppDispatch, useAppSelector } from "../../../../store";
 import { deleteMultipleEvent } from "../../../../slices/eventSlice";
-import { useHotkeys } from "react-hotkeys-hook";
-import { availableHotkeys } from "../../../../configs/hotkeysConfig";
 import { isEvent } from "../../../../slices/tableSlice";
 
 /**
@@ -24,13 +22,6 @@ const DeleteEventsModal = ({
 	const [allChecked, setAllChecked] = useState(true);
 	const [selectedEvents, setSelectedEvents] = useState(selectedRows);
 
-	useHotkeys(
-		availableHotkeys.general.CLOSE_MODAL.sequence,
-		() => close(),
-		{ description: t(availableHotkeys.general.CLOSE_MODAL.description) ?? undefined },
-		[close],
-		);
-
 	const deleteSelectedEvents = () => {
 		// @ts-expect-error TS(7006): Type guarding array is hard
 		dispatch(deleteMultipleEvent(selectedEvents));
@@ -75,104 +66,92 @@ const DeleteEventsModal = ({
 
 	return (
 		<>
-			<div className="modal-animation modal-overlay" />
-			<section
-				className="modal active modal-open"
-				id="delete-events-status-modal"
-				style={{ display: "block" }}
-			>
-				<header>
-					<button onClick={close} className="button-like-anchor fa fa-times close-modal" />
-					<h2>{t("BULK_ACTIONS.DELETE.EVENTS.CAPTION")}</h2>
-				</header>
-
-				<div className="modal-content active">
-					<div className="modal-body">
-						<div className="full-col">
-							<div className="list-obj">
-								<div className="modal-alert danger obj">
-									<p>{t("BULK_ACTIONS.DELETE_EVENTS_WARNING_LINE1")}</p>
-									<p>{t("BULK_ACTIONS.DELETE_EVENTS_WARNING_LINE2")}</p>
-								</div>
-								{/*todo: only show if scheduling Authorized*/}
-								<div>
-									<p>{t("BULK_ACTIONS.DELETE.EVENTS.UNAUTHORIZED")}</p>
-								</div>
+			<div className="modal-content active">
+				<div className="modal-body">
+					<div className="full-col">
+						<div className="list-obj">
+							<div className="modal-alert danger obj">
+								<p>{t("BULK_ACTIONS.DELETE_EVENTS_WARNING_LINE1")}</p>
+								<p>{t("BULK_ACTIONS.DELETE_EVENTS_WARNING_LINE2")}</p>
+							</div>
+							{/*todo: only show if scheduling Authorized*/}
+							<div>
+								<p>{t("BULK_ACTIONS.DELETE.EVENTS.UNAUTHORIZED")}</p>
+							</div>
 
-								<div className="full-col">
-									<div className="obj">
-										<header>
-											{t("BULK_ACTIONS.DELETE.EVENTS.DELETE_EVENTS")}
-										</header>
-										<table className="main-tbl">
-											<thead>
-												<tr>
-													<th className="small">
+							<div className="full-col">
+								<div className="obj">
+									<header>
+										{t("BULK_ACTIONS.DELETE.EVENTS.DELETE_EVENTS")}
+									</header>
+									<table className="main-tbl">
+										<thead>
+											<tr>
+												<th className="small">
+													<input
+														type="checkbox"
+														checked={allChecked}
+														onChange={(e) => onChangeAllSelected(e)}
+														className="select-all-cbox"
+													/>
+												</th>
+												<th>{t("EVENTS.EVENTS.TABLE.TITLE")}</th>
+												<th>{t("EVENTS.EVENTS.TABLE.PRESENTERS")}</th>
+											</tr>
+										</thead>
+										<tbody>
+											{/* Repeat for each marked event*/}
+											{selectedEvents.map((event, key) => (
+												<tr key={key}>
+													<td>
 														<input
+															className="child-cbox"
+															name="selection"
 															type="checkbox"
-															checked={allChecked}
-															onChange={(e) => onChangeAllSelected(e)}
-															className="select-all-cbox"
+															checked={event.selected}
+															onChange={(e) => onChangeSelected(e, isEvent(event) ? event.id : "")}
 														/>
-													</th>
-													<th>{t("EVENTS.EVENTS.TABLE.TITLE")}</th>
-													<th>{t("EVENTS.EVENTS.TABLE.PRESENTERS")}</th>
-												</tr>
-											</thead>
-											<tbody>
-												{/* Repeat for each marked event*/}
-												{selectedEvents.map((event, key) => (
-													<tr key={key}>
-														<td>
-															<input
-																className="child-cbox"
-																name="selection"
-																type="checkbox"
-																checked={event.selected}
-																onChange={(e) => onChangeSelected(e, isEvent(event) ? event.id : "")}
-															/>
-														</td>
-														<td>{isEvent(event) && event.title}</td>
-														<td>
-															{/* Repeat for each presenter*/}
+													</td>
+													<td>{isEvent(event) && event.title}</td>
+													<td>
+														{/* Repeat for each presenter*/}
 {/* @ts-expect-error TS(7006): Parameter 'presenter' implicitly has an 'any' type... Remove this comment to see the full error message */}
-															{event.presenters.map((presenter, key) => (
-																<span className="metadata-entry" key={key}>
-																	{presenter}
-																</span>
-															))}
-														</td>
-													</tr>
-												))}
-											</tbody>
-										</table>
-									</div>
+														{event.presenters.map((presenter, key) => (
+															<span className="metadata-entry" key={key}>
+																{presenter}
+															</span>
+														))}
+													</td>
+												</tr>
+											))}
+										</tbody>
+									</table>
 								</div>
 							</div>
 						</div>
 					</div>
 				</div>
+			</div>
 
-				<footer>
-					<button
-						onClick={() => deleteSelectedEvents()}
-						disabled={!selectedEvents.some((event) => event.selected === true)}
-						className={cn("danger", {
-							active: selectedEvents.some((event) => event.selected === true),
-							inactive: !selectedEvents.some(
-								(event) => event.selected === true
-							),
-						})}
-					>
-						{t("WIZARD.DELETE")}
-					</button>
-					<button onClick={() => close()} className="cancel">
-						{t("CANCEL")}
-					</button>
-				</footer>
+			<footer>
+				<button
+					onClick={() => deleteSelectedEvents()}
+					disabled={!selectedEvents.some((event) => event.selected === true)}
+					className={cn("danger", {
+						active: selectedEvents.some((event) => event.selected === true),
+						inactive: !selectedEvents.some(
+							(event) => event.selected === true
+						),
+					})}
+				>
+					{t("WIZARD.DELETE")}
+				</button>
+				<button onClick={() => close()} className="cancel">
+					{t("CANCEL")}
+				</button>
+			</footer>
 
-				<div className="btm-spacer" />
-			</section>
+			<div className="btm-spacer" />
 		</>
 	);
 };
diff --git a/src/components/events/partials/modals/DeleteSeriesModal.tsx b/src/components/events/partials/modals/DeleteSeriesModal.tsx
index 1aaa578666..352cfe8908 100644
--- a/src/components/events/partials/modals/DeleteSeriesModal.tsx
+++ b/src/components/events/partials/modals/DeleteSeriesModal.tsx
@@ -125,112 +125,100 @@ const DeleteSeriesModal = ({
 
 	return (
 		<>
-			<div className="modal-animation modal-overlay" />
-			<section
-				className="modal active modal-open"
-				id="delete-series-status-modal"
-				style={{ display: "block" }}
-			>
-				<header>
-					<button onClick={() => close()} className="button-like-anchor fa fa-times close-modal" />
-					<h2>{t("BULK_ACTIONS.DELETE.SERIES.CAPTION")}</h2>
-				</header>
-
-				<div className="modal-content">
-					<div className="modal-body">
-						<div className="modal-alert danger obj">
-							<p>{t("BULK_ACTIONS.DELETE_SERIES_WARNING_LINE1")}</p>
-							<p>{t("BULK_ACTIONS.DELETE_SERIES_WARNING_LINE2")}</p>
-						</div>
+			<div className="modal-content">
+				<div className="modal-body">
+					<div className="modal-alert danger obj">
+						<p>{t("BULK_ACTIONS.DELETE_SERIES_WARNING_LINE1")}</p>
+						<p>{t("BULK_ACTIONS.DELETE_SERIES_WARNING_LINE2")}</p>
+					</div>
 
-						{/* Only show if series not allowed to be deleted */}
-						{!isAllowed() && (
-							<div className="alert sticky warning">
-								<p>{t("BULK_ACTIONS.DELETE.SERIES.CANNOT_DELETE")}</p>
-							</div>
-						)}
-
-						<div className="full-col">
-							<div className="obj">
-								<header>{t("EVENTS.SERIES.TABLE.CAPTION")}</header>
-								<div className="obj-container">
-									<table className="main-tbl">
-										<thead>
-											<tr>
-												<th className="small">
+					{/* Only show if series not allowed to be deleted */}
+					{!isAllowed() && (
+						<div className="alert sticky warning">
+							<p>{t("BULK_ACTIONS.DELETE.SERIES.CANNOT_DELETE")}</p>
+						</div>
+					)}
+
+					<div className="full-col">
+						<div className="obj">
+							<header>{t("EVENTS.SERIES.TABLE.CAPTION")}</header>
+							<div className="obj-container">
+								<table className="main-tbl">
+									<thead>
+										<tr>
+											<th className="small">
+												<input
+													type="checkbox"
+													checked={allChecked}
+													onChange={(e) => onChangeAllSelected(e)}
+													className="select-all-cbox"
+												/>
+											</th>
+											<th>{t("EVENTS.SERIES.TABLE.TITLE")}</th>
+											<th>{t("EVENTS.SERIES.TABLE.ORGANIZERS")}</th>
+											<th>{t("EVENTS.SERIES.TABLE.HAS_EVENTS")}</th>
+										</tr>
+									</thead>
+									<tbody>
+										{/* Repeat for each marked series */}
+										{selectedSeries.map((series, key) => (
+											<tr
+												key={key}
+												className={cn({
+													error:
+														!deleteWithSeriesAllowed &&
+														series.selected &&
+														series.hasEvents,
+												})}
+											>
+												<td>
 													<input
 														type="checkbox"
-														checked={allChecked}
-														onChange={(e) => onChangeAllSelected(e)}
-														className="select-all-cbox"
+														name="selection"
+														checked={series.selected}
+														onChange={(e) => onChangeSelected(e, isSeries(series) ?series.id : "")}
+														className="child-cbox"
 													/>
-												</th>
-												<th>{t("EVENTS.SERIES.TABLE.TITLE")}</th>
-												<th>{t("EVENTS.SERIES.TABLE.ORGANIZERS")}</th>
-												<th>{t("EVENTS.SERIES.TABLE.HAS_EVENTS")}</th>
-											</tr>
-										</thead>
-										<tbody>
-											{/* Repeat for each marked series */}
-											{selectedSeries.map((series, key) => (
-												<tr
-													key={key}
-													className={cn({
-														error:
-															!deleteWithSeriesAllowed &&
-															series.selected &&
-															series.hasEvents,
-													})}
-												>
-													<td>
-														<input
-															type="checkbox"
-															name="selection"
-															checked={series.selected}
-															onChange={(e) => onChangeSelected(e, isSeries(series) ?series.id : "")}
-															className="child-cbox"
-														/>
-													</td>
-													<td>{isSeries(series) && series.title}</td>
-													<td>
-														{/*Repeat for each creator*/}
+												</td>
+												<td>{isSeries(series) && series.title}</td>
+												<td>
+													{/*Repeat for each creator*/}
 {/* @ts-expect-error TS(7006): Parameter 'organizer' implicitly has an 'any' type */}
-														{series.organizers.map((organizer, key) => (
-															<span className="metadata-entry" key={key}>
-																{organizer}
-															</span>
-														))}
-													</td>
-													{/* Only show check if row has events, else empty cell*/}
-													<td>
-														{series.hasEvents && <i className="fa fa-check" />}
-													</td>
-												</tr>
-											))}
-										</tbody>
-									</table>
-								</div>
+													{series.organizers.map((organizer, key) => (
+														<span className="metadata-entry" key={key}>
+															{organizer}
+														</span>
+													))}
+												</td>
+												{/* Only show check if row has events, else empty cell*/}
+												<td>
+													{series.hasEvents && <i className="fa fa-check" />}
+												</td>
+											</tr>
+										))}
+									</tbody>
+								</table>
 							</div>
 						</div>
 					</div>
 				</div>
-
-				<footer>
-					<button
-						onClick={() => deleteSelectedSeries()}
-						disabled={!checkValidity()}
-						className={cn("danger", {
-							active: checkValidity(),
-							inactive: !checkValidity(),
-						})}
-					>
-						{t("BULK_ACTIONS.DELETE.SERIES.BUTTON")}
-					</button>
-					<button className="cancel" onClick={() => close()}>
-						{t("CANCEL")}
-					</button>
-				</footer>
-			</section>
+			</div>
+
+			<footer>
+				<button
+					onClick={() => deleteSelectedSeries()}
+					disabled={!checkValidity()}
+					className={cn("danger", {
+						active: checkValidity(),
+						inactive: !checkValidity(),
+					})}
+				>
+					{t("BULK_ACTIONS.DELETE.SERIES.BUTTON")}
+				</button>
+				<button className="cancel" onClick={() => close()}>
+					{t("CANCEL")}
+				</button>
+			</footer>
 		</>
 	);
 };
diff --git a/src/components/events/partials/modals/EditMetadataEventsModal.tsx b/src/components/events/partials/modals/EditMetadataEventsModal.tsx
index a0c6d7a2cd..838ed7cf48 100644
--- a/src/components/events/partials/modals/EditMetadataEventsModal.tsx
+++ b/src/components/events/partials/modals/EditMetadataEventsModal.tsx
@@ -17,8 +17,6 @@ import {
 	updateBulkMetadata,
 } from "../../../../slices/eventSlice";
 import { unwrapResult } from "@reduxjs/toolkit";
-import { useHotkeys } from "react-hotkeys-hook";
-import { availableHotkeys } from "../../../../configs/hotkeysConfig";
 import { isEvent } from "../../../../slices/tableSlice";
 
 /**
@@ -50,13 +48,6 @@ const EditMetadataEventsModal = ({
 
 	const user = useAppSelector(state => getUserInformation(state));
 
-	useHotkeys(
-		availableHotkeys.general.CLOSE_MODAL.sequence,
-		() => close(),
-		{ description: t(availableHotkeys.general.CLOSE_MODAL.description) ?? undefined },
-		[close],
-  	);
-
 	useEffect(() => {
 		async function fetchData() {
 			setLoading(true);
@@ -148,189 +139,181 @@ const EditMetadataEventsModal = ({
 
 	return (
 		<>
-			<div className="modal-animation modal-overlay" />
-			<section className="modal wizard modal-animation">
-				<header>
-					<button className="button-like-anchor fa fa-times close-modal" onClick={() => close()} />
-					<h2>{t("BULK_ACTIONS.EDIT_EVENTS_METADATA.CAPTION")}</h2>
-				</header>
-
-				{/* Loading spinner */}
-				{loading && (
-					<div className="modal-content">
-						<div className="modal-body">
-							<div className="loading">
-								<i className="fa fa-spinner fa-spin fa-2x fa-fw" />
-							</div>
+			{/* Loading spinner */}
+			{loading && (
+				<div className="modal-content">
+					<div className="modal-body">
+						<div className="loading">
+							<i className="fa fa-spinner fa-spin fa-2x fa-fw" />
 						</div>
 					</div>
-				)}
+				</div>
+			)}
 
-				{/* Fatal error view */}
-				{!!fatalError && (
-					<div className="modal-content">
-						<div className="modal-body">
-							<div className="row">
-								<div className="alert sticky error">
-									<p>
-										{t("BULK_ACTIONS.EDIT_EVENTS_METADATA.FATAL_ERROR", {
-											fatalError: fatalError,
-										})}
-									</p>
-								</div>
+			{/* Fatal error view */}
+			{!!fatalError && (
+				<div className="modal-content">
+					<div className="modal-body">
+						<div className="row">
+							<div className="alert sticky error">
+								<p>
+									{t("BULK_ACTIONS.EDIT_EVENTS_METADATA.FATAL_ERROR", {
+										fatalError: fatalError,
+									})}
+								</p>
 							</div>
 						</div>
 					</div>
-				)}
+				</div>
+			)}
 
-				{/* todo: Request Errors View and Update Errors View (not quite sure what this is used for) */}
+			{/* todo: Request Errors View and Update Errors View (not quite sure what this is used for) */}
 
-				{!loading && fatalError === undefined && (
-					<Formik
-						initialValues={fetchedValues}
-						onSubmit={(values) => handleSubmit(values)}
-					>
-						{(formik) => (
-							<>
-								<div className="modal-content">
-									<div className="modal-body">
-										<div className="full-col">
-											<div className="obj header-description">
+			{!loading && fatalError === undefined && (
+				<Formik
+					initialValues={fetchedValues}
+					onSubmit={(values) => handleSubmit(values)}
+				>
+					{(formik) => (
+						<>
+							<div className="modal-content">
+								<div className="modal-body">
+									<div className="full-col">
+										<div className="obj header-description">
+											<span>
+												{t(
+													"BULK_ACTIONS.EDIT_EVENTS_METADATA.EDIT.DESCRIPTION"
+												)}
+											</span>
+										</div>
+										<div className="obj tbl-details">
+											<header>
 												<span>
 													{t(
-														"BULK_ACTIONS.EDIT_EVENTS_METADATA.EDIT.DESCRIPTION"
+														"BULK_ACTIONS.EDIT_EVENTS_METADATA.EDIT.TABLE.CAPTION"
 													)}
 												</span>
-											</div>
-											<div className="obj tbl-details">
-												<header>
-													<span>
-														{t(
-															"BULK_ACTIONS.EDIT_EVENTS_METADATA.EDIT.TABLE.CAPTION"
-														)}
-													</span>
-												</header>
-												<div className="obj-container">
-													<table className="main-tbl">
-														<thead>
-															<tr>
-																<th className="small" />
-																<th>
-																	{t(
-																		"BULK_ACTIONS.EDIT_EVENTS_METADATA.EDIT.TABLE.FIELDS"
-																	)}
-																</th>
-																<th>
-																	{t(
-																		"BULK_ACTIONS.EDIT_EVENTS_METADATA.EDIT.TABLE.VALUES"
-																	)}
-																</th>
-															</tr>
-														</thead>
-														<tbody>
-															{metadataFields.mergedMetadata.map(
-																(metadata, key) =>
-																	!metadata.readOnly && (
-																		<tr
-																			key={key}
-																			className={cn({
-																				info: metadata.differentValues,
-																			})}
-																		>
-																			<td>
-																				<input
-																					type="checkbox"
-																					name="changes"
-																					checked={isTouchedOrSelected(
-																						metadata,
-																						formik.values
-																					)}
-																					disabled={
-																						(!metadata.differentValues &&
-																							!metadata.selected) ||
-																						(metadata.required &&
-																							!metadata.selected)
-																					}
-																					onChange={(e) =>
-																						onChangeSelected(e, metadata.id)
-																					}
-																					className="child-cbox"
-																				/>
-																			</td>
-																			<td>
-																				<span>{t(metadata.label)}</span>
-																				{metadata.required && (
-																					<i className="required">*</i>
-																				)}
-																			</td>
-																			<td className="editable ng-isolated-scope">
-																				{/* Render single value or multi value input */}
-																				{metadata.type === "mixed_text" &&
-																				!!metadata.collection &&
-																				metadata.collection.length !== 0 ? (
-																					<Field
-																						name={metadata.id}
-																						fieldInfo={metadata}
-																						showCheck
-																						component={RenderMultiField}
-																					/>
-																				) : (
-																					<Field
-																						name={metadata.id}
-																						metadataField={metadata}
-																						showCheck
-																						component={RenderField}
-																					/>
+											</header>
+											<div className="obj-container">
+												<table className="main-tbl">
+													<thead>
+														<tr>
+															<th className="small" />
+															<th>
+																{t(
+																	"BULK_ACTIONS.EDIT_EVENTS_METADATA.EDIT.TABLE.FIELDS"
+																)}
+															</th>
+															<th>
+																{t(
+																	"BULK_ACTIONS.EDIT_EVENTS_METADATA.EDIT.TABLE.VALUES"
+																)}
+															</th>
+														</tr>
+													</thead>
+													<tbody>
+														{metadataFields.mergedMetadata.map(
+															(metadata, key) =>
+																!metadata.readOnly && (
+																	<tr
+																		key={key}
+																		className={cn({
+																			info: metadata.differentValues,
+																		})}
+																	>
+																		<td>
+																			<input
+																				type="checkbox"
+																				name="changes"
+																				checked={isTouchedOrSelected(
+																					metadata,
+																					formik.values
 																				)}
-																			</td>
-																		</tr>
-																	)
-															)}
-														</tbody>
-													</table>
-												</div>
+																				disabled={
+																					(!metadata.differentValues &&
+																						!metadata.selected) ||
+																					(metadata.required &&
+																						!metadata.selected)
+																				}
+																				onChange={(e) =>
+																					onChangeSelected(e, metadata.id)
+																				}
+																				className="child-cbox"
+																			/>
+																		</td>
+																		<td>
+																			<span>{t(metadata.label)}</span>
+																			{metadata.required && (
+																				<i className="required">*</i>
+																			)}
+																		</td>
+																		<td className="editable ng-isolated-scope">
+																			{/* Render single value or multi value input */}
+																			{metadata.type === "mixed_text" &&
+																			!!metadata.collection &&
+																			metadata.collection.length !== 0 ? (
+																				<Field
+																					name={metadata.id}
+																					fieldInfo={metadata}
+																					showCheck
+																					component={RenderMultiField}
+																				/>
+																			) : (
+																				<Field
+																					name={metadata.id}
+																					metadataField={metadata}
+																					showCheck
+																					component={RenderField}
+																				/>
+																			)}
+																		</td>
+																	</tr>
+																)
+														)}
+													</tbody>
+												</table>
 											</div>
 										</div>
 									</div>
 								</div>
+							</div>
 
-								{/* Buttons for cancel and submit */}
-								<footer>
-									<button
-										type="submit"
-										onClick={() => formik.handleSubmit()}
-										disabled={!(formik.dirty && formik.isValid)}
-										className={cn("submit", {
-											active:
-												formik.dirty &&
-												formik.isValid &&
-												hasAccess(
-													"ROLE_UI_EVENTS_DETAILS_METADATA_EDIT",
-													user
-												),
-											inactive: !(
-												formik.dirty &&
-												formik.isValid &&
-												hasAccess(
-													"ROLE_UI_EVENTS_DETAILS_METADATA_EDIT",
-													user
-												)
+							{/* Buttons for cancel and submit */}
+							<footer>
+								<button
+									type="submit"
+									onClick={() => formik.handleSubmit()}
+									disabled={!(formik.dirty && formik.isValid)}
+									className={cn("submit", {
+										active:
+											formik.dirty &&
+											formik.isValid &&
+											hasAccess(
+												"ROLE_UI_EVENTS_DETAILS_METADATA_EDIT",
+												user
 											),
-										})}
-									>
-										{t("WIZARD.UPDATE")}
-									</button>
-									<button onClick={() => close()} className="cancel">
-										{t("CLOSE")}
-									</button>
-								</footer>
+										inactive: !(
+											formik.dirty &&
+											formik.isValid &&
+											hasAccess(
+												"ROLE_UI_EVENTS_DETAILS_METADATA_EDIT",
+												user
+											)
+										),
+									})}
+								>
+									{t("WIZARD.UPDATE")}
+								</button>
+								<button onClick={() => close()} className="cancel">
+									{t("CLOSE")}
+								</button>
+							</footer>
 
-								<div className="btm-spacer" />
-							</>
-						)}
-					</Formik>
-				)}
-			</section>
+							<div className="btm-spacer" />
+						</>
+					)}
+				</Formik>
+			)}
 		</>
 	);
 };
diff --git a/src/components/events/partials/modals/EditScheduledEventsModal.tsx b/src/components/events/partials/modals/EditScheduledEventsModal.tsx
index d64dd069aa..598896cc42 100644
--- a/src/components/events/partials/modals/EditScheduledEventsModal.tsx
+++ b/src/components/events/partials/modals/EditScheduledEventsModal.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from "react";
 import { Formik } from "formik";
-import { useTranslation } from "react-i18next";
 import { initialFormValuesEditScheduledEvents } from "../../../../configs/modalConfig";
 import WizardStepper from "../../../shared/wizard/WizardStepper";
 import EditScheduledEventsGeneralPage from "../ModalTabsAndPages/EditScheduledEventsGeneralPage";
@@ -21,8 +20,6 @@ import {
 	Conflict,
 } from "../../../../slices/eventSlice";
 import { fetchRecordings } from "../../../../slices/recordingSlice";
-import { useHotkeys } from "react-hotkeys-hook";
-import { availableHotkeys } from "../../../../configs/hotkeysConfig";
 import { Event } from "../../../../slices/eventSlice";
 
 /**
@@ -33,7 +30,6 @@ const EditScheduledEventsModal = ({
 }: {
 	close: () => void
 }) => {
-	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
 
 	const inputDevices = useAppSelector(state => getRecordings(state));
@@ -55,13 +51,6 @@ const EditScheduledEventsModal = ({
 
 	const user = useAppSelector(state => getUserInformation(state));
 
-	useHotkeys(
-		availableHotkeys.general.CLOSE_MODAL.sequence,
-		() => close(),
-		{ description: t(availableHotkeys.general.CLOSE_MODAL.description) ?? undefined },
-		[close],
-  	);
-
 	useEffect(() => {
 		// Load recordings that can be used for input
 		dispatch(fetchRecordings("inputs"));
@@ -125,67 +114,59 @@ const EditScheduledEventsModal = ({
 
 	return (
 		<>
-			<div className="modal-animation modal-overlay" />
-			<section className="modal wizard modal-animation">
-				<header>
-					<button className="button-like-anchor fa fa-times close-modal" onClick={() => close()} />
-					<h2>{t("BULK_ACTIONS.EDIT_EVENTS.CAPTION")}</h2>
-				</header>
-
-				{/* Initialize overall form */}
-				<Formik
-					initialValues={snapshot}
-					validate={(values) => validateFormik(values)}
-					onSubmit={(values) => handleSubmit(values)}
-				>
-					{/* Render wizard pages depending on current value of page variable */}
-					{(formik) => {
-						// eslint-disable-next-line react-hooks/rules-of-hooks
-						useEffect(() => {
-							formik.validateForm().then();
-							// eslint-disable-next-line react-hooks/exhaustive-deps
-						}, [page]);
+			{/* Initialize overall form */}
+			<Formik
+				initialValues={snapshot}
+				validate={(values) => validateFormik(values)}
+				onSubmit={(values) => handleSubmit(values)}
+			>
+				{/* Render wizard pages depending on current value of page variable */}
+				{(formik) => {
+					// eslint-disable-next-line react-hooks/rules-of-hooks
+					useEffect(() => {
+						formik.validateForm().then();
+						// eslint-disable-next-line react-hooks/exhaustive-deps
+					}, [page]);
 
-						return (
-							<>
-								{/* Stepper that shows each step of wizard as header */}
-								<WizardStepper
-									steps={steps}
-									page={page}
-									setPage={setPage}
-									completed={pageCompleted}
-									setCompleted={setPageCompleted}
-									formik={formik}
-								/>
-								<div>
-									{page === 0 && (
-										<EditScheduledEventsGeneralPage
-											formik={formik}
-											nextPage={nextPage}
-										/>
-									)}
-									{page === 1 && (
-										<EditScheduledEventsEditPage
-											formik={formik}
-											nextPage={nextPage}
-											previousPage={previousPage}
-											conflictState={{ conflicts, setConflicts }}
-											inputDevices={filterDevicesForAccess(user, inputDevices)}
-											setPageCompleted={setPageCompleted}
-										/>
-									)}
-									{page === 2 && (
-										<EditScheduledEventsSummaryPage
-											formik={formik}
-											previousPage={previousPage}
-										/>
-									)}
-								</div>
-							</>
-						);
-					}}
-				</Formik>
-			</section>
+					return (
+						<>
+							{/* Stepper that shows each step of wizard as header */}
+							<WizardStepper
+								steps={steps}
+								page={page}
+								setPage={setPage}
+								completed={pageCompleted}
+								setCompleted={setPageCompleted}
+								formik={formik}
+							/>
+							<div>
+								{page === 0 && (
+									<EditScheduledEventsGeneralPage
+										formik={formik}
+										nextPage={nextPage}
+									/>
+								)}
+								{page === 1 && (
+									<EditScheduledEventsEditPage
+										formik={formik}
+										nextPage={nextPage}
+										previousPage={previousPage}
+										conflictState={{ conflicts, setConflicts }}
+										inputDevices={filterDevicesForAccess(user, inputDevices)}
+										setPageCompleted={setPageCompleted}
+									/>
+								)}
+								{page === 2 && (
+									<EditScheduledEventsSummaryPage
+										formik={formik}
+										previousPage={previousPage}
+									/>
+								)}
+							</div>
+						</>
+					);
+				}}
+			</Formik>
 		</>
 	);
 };
diff --git a/src/components/events/partials/modals/EmbeddingCodeModal.tsx b/src/components/events/partials/modals/EmbeddingCodeModal.tsx
index 271d96fe65..ed48d31557 100644
--- a/src/components/events/partials/modals/EmbeddingCodeModal.tsx
+++ b/src/components/events/partials/modals/EmbeddingCodeModal.tsx
@@ -1,8 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { getSourceURL } from "../../../../utils/embeddedCodeUtils";
-import { useHotkeys } from "react-hotkeys-hook";
-import { availableHotkeys } from "../../../../configs/hotkeysConfig";
 
 /**
  * This component renders the embedding code modal
@@ -21,13 +19,6 @@ const EmbeddingCodeModal = ({
 	const [currentSize, setCurrentSize] = useState("0x0");
 	const [showCopySuccess, setCopySuccess] = useState(false);
 
-	useHotkeys(
-		availableHotkeys.general.CLOSE_MODAL.sequence,
-		() => close(),
-		{ description: t(availableHotkeys.general.CLOSE_MODAL.description) ?? undefined },
-		[close],
-  	);
-
 	useEffect(() => {
 		const fetchData = async () => {
 			// get source url
@@ -38,10 +29,6 @@ const EmbeddingCodeModal = ({
 		fetchData();
 	}, []);
 
-	const handleClose = () => {
-		close();
-	};
-
 	const copy = () => {
 		let copyText = document.getElementById("social_embed-textarea") as HTMLTextAreaElement;
 		if (copyText) {
@@ -92,92 +79,81 @@ const EmbeddingCodeModal = ({
 
 	return (
 		<>
-			<div className="modal-animation modal-overlay" />
-			<section className="modal modal-animation" id="embedding-code">
-				<header>
-					<button
-						className="button-like-anchor fa fa-times close-modal"
-						onClick={() => handleClose()}
-					/>
-					<h2>{t("CONFIRMATIONS.ACTIONS.SHOW.EMBEDDING_CODE")}</h2>
-				</header>
-
-				{/* embed size buttons */}
-				<div className="embedded-code-boxes">
-					<button
-						id="620x349"
-						className="embedSizeButton size_620x349 button-like-anchor"
-						onClick={(e) => updateTextArea(e)}
-					>
-						<span className="span-embedded-code">620x349</span>
-					</button>
-					<button
-						id="540x304"
-						className="embedSizeButton size_540x304 button-like-anchor"
-						onClick={(e) => updateTextArea(e)}
-					>
-						<span className="span-embedded-code">540x304</span>
-					</button>
-					<button
-						id="460x259"
-						className="embedSizeButton size_460x259 button-like-anchor"
-						onClick={(e) => updateTextArea(e)}
-					>
-						<span className="span-embedded-code">460x259</span>
-					</button>
-					<button
-						id="380x214"
-						className="embedSizeButton size_380x214 button-like-anchor"
-						onClick={(e) => updateTextArea(e)}
-					>
-						<span className="span-embedded-code">380x214</span>
-					</button>
+			{/* embed size buttons */}
+			<div className="embedded-code-boxes">
+				<button
+					id="620x349"
+					className="embedSizeButton size_620x349 button-like-anchor"
+					onClick={(e) => updateTextArea(e)}
+				>
+					<span className="span-embedded-code">620x349</span>
+				</button>
+				<button
+					id="540x304"
+					className="embedSizeButton size_540x304 button-like-anchor"
+					onClick={(e) => updateTextArea(e)}
+				>
+					<span className="span-embedded-code">540x304</span>
+				</button>
+				<button
+					id="460x259"
+					className="embedSizeButton size_460x259 button-like-anchor"
+					onClick={(e) => updateTextArea(e)}
+				>
+					<span className="span-embedded-code">460x259</span>
+				</button>
+				<button
+					id="380x214"
+					className="embedSizeButton size_380x214 button-like-anchor"
+					onClick={(e) => updateTextArea(e)}
+				>
+					<span className="span-embedded-code">380x214</span>
+				</button>
+				<button
+					id="300x169"
+					className="embedSizeButton size_300x169 button-like-anchor"
+					onClick={(e) => updateTextArea(e)}
+				>
+					<span className="span-embedded-code">300x169</span>
+				</button>
+			</div>
+
+			<span id="id_video" className="embedded-code-no-visible">
+				{eventId}
+			</span>
+
+			{/* text area containing current iFrame code to copy*/}
+			<div className="embedded-code-video">
+				<textarea
+					id="social_embed-textarea"
+					className="social_embed-textarea embedded-code-textarea"
+					rows={2}
+					value={textAreaContent}
+					cols={1}
+				/>
+			</div>
+
+			{/* copy confirmation */}
+			{showCopySuccess && (
+				<div className="copyConfirm" role="alert">
+					<span id="copy_confirm_pre">
+						{t("CONFIRMATIONS.EMBEDDING_CODE",{size: currentSize})}
+					</span>
+				</div>
+			)}
+
+			{/* copy button */}
+			<div className="embedded-code-copy-to-clipboard">
+				<div className="btn-container" style={{ marginBottom: "20px" }}>
 					<button
-						id="300x169"
-						className="embedSizeButton size_300x169 button-like-anchor"
-						onClick={(e) => updateTextArea(e)}
+						className="cancel-btn"
+						style={{ fontSize: "14px" }}
+						onClick={() => copy()}
 					>
-						<span className="span-embedded-code">300x169</span>
+						{t("COPY")}
 					</button>
 				</div>
-
-				<span id="id_video" className="embedded-code-no-visible">
-					{eventId}
-				</span>
-
-				{/* text area containing current iFrame code to copy*/}
-				<div className="embedded-code-video">
-					<textarea
-						id="social_embed-textarea"
-						className="social_embed-textarea embedded-code-textarea"
-						rows={2}
-						value={textAreaContent}
-						cols={1}
-					/>
-				</div>
-
-				{/* copy confirmation */}
-				{showCopySuccess && (
-					<div className="copyConfirm" role="alert">
-						<span id="copy_confirm_pre">
-							{t("CONFIRMATIONS.EMBEDDING_CODE",{size: currentSize})}
-						</span>
-					</div>
-				)}
-
-				{/* copy button */}
-				<div className="embedded-code-copy-to-clipboard">
-					<div className="btn-container" style={{ marginBottom: "20px" }}>
-						<button
-							className="cancel-btn"
-							style={{ fontSize: "14px" }}
-							onClick={() => copy()}
-						>
-							{t("COPY")}
-						</button>
-					</div>
-				</div>
-			</section>
+			</div>
 		</>
 	);
 };
diff --git a/src/components/events/partials/modals/EventDetailsModal.tsx b/src/components/events/partials/modals/EventDetailsModal.tsx
index bf1364f335..21e96e599d 100644
--- a/src/components/events/partials/modals/EventDetailsModal.tsx
+++ b/src/components/events/partials/modals/EventDetailsModal.tsx
@@ -1,12 +1,11 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import EventDetails from "./EventDetails";
 import { useAppDispatch, useAppSelector } from "../../../../store";
 import { removeNotificationWizardForm } from "../../../../slices/notificationSlice";
-import { useHotkeys } from "react-hotkeys-hook";
-import { availableHotkeys } from "../../../../configs/hotkeysConfig";
 import { getModalEvent } from "../../../../selectors/eventDetailsSelectors";
 import { setModalEvent, setShowModal } from "../../../../slices/eventDetailsSlice";
+import { Modal, ModalHandle } from "../../../shared/modals/Modal";
 
 /**
  * This component renders the modal for displaying event details
@@ -14,6 +13,7 @@ import { setModalEvent, setShowModal } from "../../../../slices/eventDetailsSlic
 const EventDetailsModal = () => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
+	const modalRef = useRef<ModalHandle>(null);
 
 	// tracks, whether the policies are different to the initial value
 	const [policyChanged, setPolicyChanged] = useState(false);
@@ -37,41 +37,21 @@ const EventDetailsModal = () => {
 		}
 	};
 
-	useHotkeys(
-		availableHotkeys.general.CLOSE_MODAL.sequence,
-		() => close(),
-		{ description: t(availableHotkeys.general.CLOSE_MODAL.description) ?? undefined },
-		[close],
-  	);
-
 	return (
-		// todo: add hotkeys
-		<>
-			<div className="modal-animation modal-overlay" />
-			<section
-				id="event-details-modal"
-				tabIndex={0}
-				className="modal wizard modal-animation"
-			>
-				<header>
-					<button className="button-like-anchor fa fa-times close-modal" onClick={() => close()} />
-					<h2>
-						{
-							t("EVENTS.EVENTS.DETAILS.HEADER", {
-								resourceId: event.title,
-							}) /*Event details - {resourceTitle}*/
-						}
-					</h2>
-				</header>
-
-				<EventDetails
-					eventId={event.id}
-					policyChanged={policyChanged}
-					setPolicyChanged={(value) => setPolicyChanged(value)}
-				/>
-			</section>
-		</>
-	)
-};
+		<Modal
+			open
+			closeCallback={close}
+			header={t("EVENTS.EVENTS.DETAILS.HEADER", { resourceId: event.title })}
+			classId="event-details-modal"
+			ref={modalRef}
+		>
+			<EventDetails
+				eventId={event.id}
+				policyChanged={policyChanged}
+				setPolicyChanged={(value) => setPolicyChanged(value)}
+			/>
+		</Modal>
+	);
+}
 
 export default EventDetailsModal;
diff --git a/src/components/events/partials/modals/SeriesDetailsModal.tsx b/src/components/events/partials/modals/SeriesDetailsModal.tsx
index 8490db9b18..6db9fc5623 100644
--- a/src/components/events/partials/modals/SeriesDetailsModal.tsx
+++ b/src/components/events/partials/modals/SeriesDetailsModal.tsx
@@ -1,22 +1,21 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import SeriesDetails from "./SeriesDetails";
-import { useHotkeys } from "react-hotkeys-hook";
-import { availableHotkeys } from "../../../../configs/hotkeysConfig";
 import { removeNotificationWizardForm } from "../../../../slices/notificationSlice";
 import { useAppDispatch } from "../../../../store";
+import { Modal, ModalHandle } from "../../../shared/modals/Modal";
 
 /**
  * This component renders the modal for displaying series details
  */
 const SeriesDetailsModal = ({
-	handleClose,
 	seriesTitle,
-	seriesId
+	seriesId,
+	modalRef,
 }: {
-	handleClose: () => void
 	seriesTitle: string
 	seriesId: string
+	modalRef: React.RefObject<ModalHandle>
 }) => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
@@ -32,36 +31,22 @@ const SeriesDetailsModal = ({
 		if (!policyChanged || confirmUnsaved()) {
 			setPolicyChanged(false);
 			dispatch(removeNotificationWizardForm());
-			handleClose();
 		}
 	};
 
-	useHotkeys(
-		availableHotkeys.general.CLOSE_MODAL.sequence,
-		() => close(),
-		{ description: t(availableHotkeys.general.CLOSE_MODAL.description) ?? undefined },
-		[close],
-  	);
-
-	// todo: add hotkeys
 	return (
-		<>
-			<div className="modal-animation modal-overlay" />
-			<section className="modal modal-animation" id="series-details-modal">
-				<header>
-					<button className="button-like-anchor fa fa-times close-modal" onClick={() => close()} />
-					<h2>
-						{t("EVENTS.SERIES.DETAILS.HEADER", { resourceId: seriesTitle })}
-					</h2>
-				</header>
-
-				<SeriesDetails
-					seriesId={seriesId}
-					policyChanged={policyChanged}
-					setPolicyChanged={(value) => setPolicyChanged(value)}
-				/>
-			</section>
-		</>
+		<Modal
+			closeCallback={close}
+			header={t("EVENTS.SERIES.DETAILS.HEADER", { resourceId: seriesTitle })}
+			classId="series-details-modal"
+			ref={modalRef}
+		>
+			<SeriesDetails
+				seriesId={seriesId}
+				policyChanged={policyChanged}
+				setPolicyChanged={(value) => setPolicyChanged(value)}
+			/>
+		</Modal>
 	);
 };
 
diff --git a/src/components/events/partials/modals/StartTaskModal.tsx b/src/components/events/partials/modals/StartTaskModal.tsx
index 1c59b722ee..294c23af92 100644
--- a/src/components/events/partials/modals/StartTaskModal.tsx
+++ b/src/components/events/partials/modals/StartTaskModal.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect } from "react";
 import { Formik } from "formik";
-import { useTranslation } from "react-i18next";
 import { initialFormValuesStartTask } from "../../../../configs/modalConfig";
 import WizardStepper from "../../../shared/wizard/WizardStepper";
 import StartTaskGeneralPage from "../ModalTabsAndPages/StartTaskGeneralPage";
@@ -10,8 +9,6 @@ import { postTasks } from "../../../../thunks/taskThunks";
 import { changeAllSelected } from "../../../../thunks/tableThunks";
 import { usePageFunctions } from "../../../../hooks/wizardHooks";
 import { checkValidityStartTaskEventSelection } from "../../../../utils/bulkActionUtils";
-import { useHotkeys } from "react-hotkeys-hook";
-import { availableHotkeys } from "../../../../configs/hotkeysConfig";
 import { useAppDispatch } from "../../../../store";
 import { Event } from "../../../../slices/eventSlice";
 
@@ -23,7 +20,6 @@ const StartTaskModal = ({
 }: {
 	close: () => void,
 }) => {
-	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
 
 	const initialValues = initialFormValuesStartTask;
@@ -38,13 +34,6 @@ const StartTaskModal = ({
 		setPageCompleted,
 	} = usePageFunctions(0, initialValues);
 
-	useHotkeys(
-		availableHotkeys.general.CLOSE_MODAL.sequence,
-		() => close(),
-		{ description: t(availableHotkeys.general.CLOSE_MODAL.description) ?? undefined },
-		[close],
-  	);
-
 	const steps = [
 		{
 			translation: "BULK_ACTIONS.SCHEDULE_TASK.GENERAL.CAPTION",
@@ -91,65 +80,57 @@ const StartTaskModal = ({
 
 	return (
 		<>
-			<div className="modal-animation modal-overlay" />
-			<section className="modal wizard modal-animation">
-				<header>
-					<button className="button-like-anchor fa fa-times close-modal" onClick={() => close()} />
-					<h2>{t("BULK_ACTIONS.SCHEDULE_TASK.CAPTION")}</h2>
-				</header>
-
-				{/* Initialize overall form */}
-				<Formik
-					initialValues={snapshot}
-					validate={(values) => validateFormik(values)}
-					onSubmit={(values) => handleSubmit(values)}
-				>
-					{/* Render wizard pages depending on current value of page variable */}
-					{(formik) => {
-						// eslint-disable-next-line react-hooks/rules-of-hooks
-						useEffect(() => {
-							formik.validateForm().then();
-						// eslint-disable-next-line react-hooks/exhaustive-deps
-						}, [page]);
+			{/* Initialize overall form */}
+			<Formik
+				initialValues={snapshot}
+				validate={(values) => validateFormik(values)}
+				onSubmit={(values) => handleSubmit(values)}
+			>
+				{/* Render wizard pages depending on current value of page variable */}
+				{(formik) => {
+					// eslint-disable-next-line react-hooks/rules-of-hooks
+					useEffect(() => {
+						formik.validateForm().then();
+					// eslint-disable-next-line react-hooks/exhaustive-deps
+					}, [page]);
 
-						return (
-							<>
-								{/* Stepper that shows each step of wizard as header */}
-								<WizardStepper
-									steps={steps}
-									page={page}
-									setPage={setPage}
-									completed={pageCompleted}
-									setCompleted={setPageCompleted}
-									formik={formik}
-								/>
-								<div>
-									{page === 0 && (
-										<StartTaskGeneralPage
-											formik={formik}
-											nextPage={nextPage}
-										/>
-									)}
-									{page === 1 && (
-										<StartTaskWorkflowPage
-											formik={formik}
-											nextPage={nextPage}
-											previousPage={previousPage}
-											setPageCompleted={setPageCompleted}
-										/>
-									)}
-									{page === 2 && (
-										<StartTaskSummaryPage
-											formik={formik}
-											previousPage={previousPage}
-										/>
-									)}
-								</div>
-							</>
-						);
-					}}
-				</Formik>
-			</section>
+					return (
+						<>
+							{/* Stepper that shows each step of wizard as header */}
+							<WizardStepper
+								steps={steps}
+								page={page}
+								setPage={setPage}
+								completed={pageCompleted}
+								setCompleted={setPageCompleted}
+								formik={formik}
+							/>
+							<div>
+								{page === 0 && (
+									<StartTaskGeneralPage
+										formik={formik}
+										nextPage={nextPage}
+									/>
+								)}
+								{page === 1 && (
+									<StartTaskWorkflowPage
+										formik={formik}
+										nextPage={nextPage}
+										previousPage={previousPage}
+										setPageCompleted={setPageCompleted}
+									/>
+								)}
+								{page === 2 && (
+									<StartTaskSummaryPage
+										formik={formik}
+										previousPage={previousPage}
+									/>
+								)}
+							</div>
+						</>
+					);
+				}}
+			</Formik>
 		</>
 	);
 };
diff --git a/src/components/recordings/partials/RecordingsActionCell.tsx b/src/components/recordings/partials/RecordingsActionCell.tsx
index e4f0a4b70f..497f76f314 100644
--- a/src/components/recordings/partials/RecordingsActionCell.tsx
+++ b/src/components/recordings/partials/RecordingsActionCell.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useRef } from "react";
 import { useTranslation } from "react-i18next";
 import ConfirmModal from "../../shared/ConfirmModal";
 import RecordingDetailsModal from "./modal/RecordingDetailsModal";
@@ -8,6 +8,7 @@ import { useAppDispatch, useAppSelector } from "../../../store";
 import { Recording, deleteRecording } from "../../../slices/recordingSlice";
 import { fetchRecordingDetails } from "../../../slices/recordingDetailsSlice";
 import { Tooltip } from "../../shared/Tooltip";
+import { ModalHandle } from "../../shared/modals/Modal";
 
 /**
  * This component renders the action cells of recordings in the table view
@@ -20,23 +21,23 @@ const RecordingsActionCell = ({
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
 
-	const [displayDeleteConfirmation, setDeleteConfirmation] = useState(false);
-	const [displayRecordingDetails, setRecordingDetails] = useState(false);
+	const deleteConfirmationModalRef = useRef<ModalHandle>(null);
+	const recordingDetailsModalRef = useRef<ModalHandle>(null);
 
 	const user = useAppSelector(state => getUserInformation(state));
 
 	const hideDeleteConfirmation = () => {
-		setDeleteConfirmation(false);
+		deleteConfirmationModalRef.current?.close?.();
 	};
 
 	const hideRecordingDetails = () => {
-		setRecordingDetails(false);
+		recordingDetailsModalRef.current?.close?.()
 	};
 
 	const showRecordingDetails = async () => {
 		await dispatch(fetchRecordingDetails(row.name));
 
-		setRecordingDetails(true);
+		recordingDetailsModalRef.current?.open()
 	};
 
 	const deletingRecording = (id: string) => {
@@ -55,32 +56,30 @@ const RecordingsActionCell = ({
 				</Tooltip>
 			)}
 
-			{displayRecordingDetails && (
-				<RecordingDetailsModal
-					close={hideRecordingDetails}
-					recordingId={row.name}
-				/>
-			)}
+			<RecordingDetailsModal
+				close={hideRecordingDetails}
+				recordingId={row.name}
+				modalRef={recordingDetailsModalRef}
+			/>
 
 			{/* delete location/recording */}
 			{hasAccess("ROLE_UI_LOCATIONS_DELETE", user) && (
 				<Tooltip title={t("RECORDINGS.RECORDINGS.TABLE.TOOLTIP.DELETE")}>
 					<button
 						className="button-like-anchor remove"
-						onClick={() => setDeleteConfirmation(true)}
+						onClick={() => deleteConfirmationModalRef.current?.open()}
 					/>
 				</Tooltip>
 			)}
 
-			{displayDeleteConfirmation && (
-				<ConfirmModal
-					close={hideDeleteConfirmation}
-					resourceName={row.name}
-					resourceType="LOCATION"
-					resourceId={row.name}
-					deleteMethod={deletingRecording}
-				/>
-			)}
+			<ConfirmModal
+				close={hideDeleteConfirmation}
+				resourceName={row.name}
+				resourceType="LOCATION"
+				resourceId={row.name}
+				deleteMethod={deletingRecording}
+				modalRef={deleteConfirmationModalRef}
+			/>
 		</>
 	);
 };
diff --git a/src/components/recordings/partials/modal/RecordingDetailsModal.tsx b/src/components/recordings/partials/modal/RecordingDetailsModal.tsx
index 7f45f0949a..d8a6669d74 100644
--- a/src/components/recordings/partials/modal/RecordingDetailsModal.tsx
+++ b/src/components/recordings/partials/modal/RecordingDetailsModal.tsx
@@ -1,56 +1,34 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import RecordingsDetails from "./RecordingsDetails";
-import { availableHotkeys } from "../../../../configs/hotkeysConfig";
-import { useHotkeys } from "react-hotkeys-hook";
+import { Modal, ModalHandle } from "../../../shared/modals/Modal";
 
 /**
  * This component renders the modal for displaying recording details
  */
 const RecordingDetailsModal = ({
 	close,
-	recordingId
+	recordingId,
+	modalRef,
 }: {
 	close: () => void,
 	recordingId: string,
+	modalRef: React.RefObject<ModalHandle>
 }) => {
 	const { t } = useTranslation();
 
-	useHotkeys(
-		availableHotkeys.general.CLOSE_MODAL.sequence,
-		() => close(),
-		{ description: t(availableHotkeys.general.CLOSE_MODAL.description) ?? undefined },
-		[close],
-  	);
-
-	const handleClose = () => {
-		close();
-	};
-
 	return (
-		// todo: add hotkeys
-		<>
-			<div className="modal-animation modal-overlay" />
-			<section
-				id="capture-agent-details-modal"
-				className="modal wizard modal-animation"
-			>
-				<header>
-					<button
-						className="button-like-anchor fa fa-times close-modal"
-						onClick={() => handleClose()}
-					/>
-					<h2>
-						{t("RECORDINGS.RECORDINGS.DETAILS.HEADER", {
-							resourceId: recordingId,
-						})}
-					</h2>
-				</header>
-
-				{/* component that manages tabs of recording details modal*/}
-				<RecordingsDetails />
-			</section>
-		</>
+		<Modal
+			closeCallback={close}
+			header={t("RECORDINGS.RECORDINGS.DETAILS.HEADER", {
+				resourceId: recordingId,
+			})}
+			classId="capture-agent-details-modal"
+			ref={modalRef}
+		>
+			{/* component that manages tabs of recording details modal*/}
+			<RecordingsDetails />
+		</Modal>
 	);
 };
 
diff --git a/src/components/shared/ConfirmModal.tsx b/src/components/shared/ConfirmModal.tsx
index 09e510c745..f306066012 100644
--- a/src/components/shared/ConfirmModal.tsx
+++ b/src/components/shared/ConfirmModal.tsx
@@ -1,7 +1,6 @@
 import React from "react";
-import { useHotkeys } from "react-hotkeys-hook";
 import { useTranslation } from "react-i18next";
-import { availableHotkeys } from "../../configs/hotkeysConfig";
+import { Modal, ModalHandle } from "./modals/Modal";
 
 const ConfirmModal = <T,>({
 	close,
@@ -13,6 +12,7 @@ const ConfirmModal = <T,>({
 	showCautionMessage = false,
 	deleteNotAllowedMessage = "",
 	deleteWithCautionMessage = "",
+	modalRef,
 }: {
 	close: () => void,
 	resourceType: "EVENT" | "SERIES" | "LOCATION" | "USER" | "GROUP" | "ACL" | "THEME" | "TOBIRA_PATH",
@@ -23,16 +23,10 @@ const ConfirmModal = <T,>({
 	showCautionMessage?: boolean,
 	deleteNotAllowedMessage?: string,
 	deleteWithCautionMessage?: string,
+	modalRef: React.RefObject<ModalHandle>
 }) => {
 	const { t } = useTranslation();
 
-	useHotkeys(
-		availableHotkeys.general.CLOSE_MODAL.sequence,
-		() => close(),
-		{ description: t(availableHotkeys.general.CLOSE_MODAL.description) ?? undefined },
-		[close],
-  	);
-
 	const handleClose = () => {
 		close();
 	};
@@ -43,76 +37,65 @@ const ConfirmModal = <T,>({
 	};
 
 	return (
-		<>
-			<div className="modal-animation modal-overlay" />
-			<section
-				className="modal modal-animation"
-				id="confirm-modal"
-				style={{ fontSize: "14px" }}
-			>
-				<header>
-					<button
-						className="button-like-anchor fa fa-times close-modal"
-						onClick={() => handleClose()}
-					/>
-					<h2>{t("CONFIRMATIONS.ACTIONS.CONFIRMATION")}</h2>
-				</header>
+		<Modal
+			header={t("CONFIRMATIONS.ACTIONS.CONFIRMATION")}
+			classId="confirm-modal"
+			ref={modalRef}
+		>
+			{deleteAllowed ? (
+				<div>
+					{showCautionMessage && (
+						<div className="modal-alert warning">
+							<p>{t(deleteWithCautionMessage)}</p>
+						</div>
+					)}
 
-				{deleteAllowed ? (
 					<div>
-						{showCautionMessage && (
-							<div className="modal-alert warning">
-								<p>{t(deleteWithCautionMessage)}</p>
-							</div>
-						)}
-
-						<div>
-							<p>
-								<span style={{ padding: "0px 4px"}}>
-									{t("CONFIRMATIONS.METADATA.NOTICE." + resourceType)}
-								</span>
-							</p>
-							<p className="delete">{resourceName}</p>
-						</div>
-						{resourceType === "EVENT" && (
-							<p className="warning">
-								{t("CONFIRMATIONS.WARNINGS.EVENT_WILL_BE_GONE")}
-							</p>
-						)}
-						<p>{t("CONFIRMATIONS.CONTINUE_ACTION")}</p>
+						<p>
+							<span style={{ padding: "0px 4px"}}>
+								{t("CONFIRMATIONS.METADATA.NOTICE." + resourceType)}
+							</span>
+						</p>
+						<p className="delete">{resourceName}</p>
+					</div>
+					{resourceType === "EVENT" && (
+						<p className="warning">
+							{t("CONFIRMATIONS.WARNINGS.EVENT_WILL_BE_GONE")}
+						</p>
+					)}
+					<p>{t("CONFIRMATIONS.CONTINUE_ACTION")}</p>
 
-						<div className="btn-container">
-							<button
-								className="cancel-btn close-modal"
-								onClick={() => handleClose()}
-							>
-								<i>{t("CANCEL")}</i>
-							</button>
-							<button
-								className="danger-btn"
-								onClick={() => handleConfirmation()}
-							>
-								<i>{t("CONFIRM")}</i>
-							</button>
-						</div>
+					<div className="btn-container">
+						<button
+							className="cancel-btn close-modal"
+							onClick={() => handleClose()}
+						>
+							<i>{t("CANCEL")}</i>
+						</button>
+						<button
+							className="danger-btn"
+							onClick={() => handleConfirmation()}
+						>
+							<i>{t("CONFIRM")}</i>
+						</button>
 					</div>
-				) : (
-					<div>
-						<div className="modal-alert danger">
-							<p>{t(deleteNotAllowedMessage)}</p>
-						</div>
-						<div className="btn-container">
-							<button
-								className="cancel-btn close-modal"
-								onClick={() => handleClose()}
-							>
-								<i>{t("CANCEL")}</i>
-							</button>
-						</div>
+				</div>
+			) : (
+				<div>
+					<div className="modal-alert danger">
+						<p>{t(deleteNotAllowedMessage)}</p>
+					</div>
+					<div className="btn-container">
+						<button
+							className="cancel-btn close-modal"
+							onClick={() => handleClose()}
+						>
+							<i>{t("CANCEL")}</i>
+						</button>
 					</div>
-				)}
-			</section>
-		</>
+				</div>
+			)}
+		</Modal>
 	);
 };
 
diff --git a/src/components/shared/EditTableViewModal.tsx b/src/components/shared/EditTableViewModal.tsx
index b6e6f23471..6da9e10e0f 100644
--- a/src/components/shared/EditTableViewModal.tsx
+++ b/src/components/shared/EditTableViewModal.tsx
@@ -8,15 +8,37 @@ import {
 	getResourceType,
 } from "../../selectors/tableSelectors";
 import { DragDropContext, Droppable, OnDragEndResponder, Draggable as Draggablee } from "@hello-pangea/dnd";
-import { availableHotkeys } from "../../configs/hotkeysConfig";
-import { useHotkeys } from "react-hotkeys-hook";
 import { useAppDispatch, useAppSelector } from "../../store";
 import { TableColumn } from "../../configs/tableConfigs/aclsTableConfig";
+import { Modal, ModalHandle } from "./modals/Modal";
 
 /**
  * This component renders the modal for editing which columns are shown in the table
  */
 const EditTableViewModal = ({
+	close,
+	modalRef,
+}: {
+	close: () => void,
+	modalRef: React.RefObject<ModalHandle>
+}) => {
+	const { t } = useTranslation();
+
+	return (
+		<Modal
+			header={t("PREFERENCES.TABLE.CAPTION")}
+			classId="edit-table-view-modal"
+			className="modal active modal-animation"
+			ref={modalRef}
+		>
+			<EditTableViewModalContent
+				handleClose={close}
+			/>
+		</Modal>
+	);
+};
+
+const EditTableViewModalContent = ({
 	handleClose,
 }: {
 	handleClose: () => void,
@@ -45,15 +67,9 @@ const EditTableViewModal = ({
 		}
 	}, [activeColumns, deactivatedColumns, isColsLoaded]);
 
-	useHotkeys(
-		availableHotkeys.general.CLOSE_MODAL.sequence,
-		() => handleClose(),
-		{ description: t(availableHotkeys.general.CLOSE_MODAL.description) ?? undefined },
-		[handleClose],
-  	);
-
 	// closes this modal
 	const close = () => {
+		clearData();
 		handleClose();
 	};
 
@@ -117,146 +133,129 @@ const EditTableViewModal = ({
 
 	return (
 		<>
-			<div className="modal-animation modal-overlay" />
-			<section
-				className="modal active modal-animation"
-				id="edit-table-view-modal"
-			>
-				<header>
-					<button
-						className="button-like-anchor fa fa-times close-modal"
-						onClick={() => {
-							clearData();
-							close();
-						}}
-					/>
-					<h2>{t("PREFERENCES.TABLE.CAPTION") /* Edit Table View */}</h2>
-				</header>
+			<div className="modal-content">
+				<div className="modal-body">
+					<div className="tab-description for-header">
+						<p>
+							{t("PREFERENCES.TABLE.SUBHEADING", {
+								tableName: t(getTranslationForSubheading(resource)),
+							})}
+						</p>
+					</div>
 
-				<div className="modal-content">
-					<div className="modal-body">
-						<div className="tab-description for-header">
-							<p>
-								{t("PREFERENCES.TABLE.SUBHEADING", {
-									tableName: t(getTranslationForSubheading(resource)),
-								})}
-							</p>
+					<div className="row">
+						<div className="col">
+							<div className="obj drag-available-column">
+								<header>
+									<h2>
+										{
+											t(
+												"PREFERENCES.TABLE.AVAILABLE_COLUMNS"
+											) /* Available Columns */
+										}
+									</h2>
+								</header>
+								<ul className="drag-drop-items">
+									{deactivatedCols.map((column, key) =>
+										column ? (
+											<li className="drag-item" key={key}>
+												<div className="title">{t(column.label)}</div>
+												<button
+													className="button-like-anchor move-item add"
+													onClick={() => changeColumn(column, false)}
+												>
+													<span className="sr-only">{t("PREFERENCES.TABLE.ADD_COLUMN")}</span>
+												</button>
+											</li>
+										) : null
+									)}
+								</ul>
+							</div>
 						</div>
 
-						<div className="row">
-							<div className="col">
-								<div className="obj drag-available-column">
-									<header>
-										<h2>
-											{
-												t(
-													"PREFERENCES.TABLE.AVAILABLE_COLUMNS"
-												) /* Available Columns */
-											}
-										</h2>
-									</header>
-									<ul className="drag-drop-items">
-										{deactivatedCols.map((column, key) =>
-											column ? (
-												<li className="drag-item" key={key}>
-													<div className="title">{t(column.label)}</div>
-													<button
-														className="button-like-anchor move-item add"
-														onClick={() => changeColumn(column, false)}
+						<div className="col">
+							<div className="obj drag-selected-column">
+								<header>
+									<h2>
+										{
+											t(
+												"PREFERENCES.TABLE.SELECTED_COLUMNS"
+											) /* Selected Columns */
+										}
+									</h2>
+								</header>
+								<ul className="drag-drop-items">
+									<li>
+										<DragDropContext
+											onDragEnd={onDragEnd}
+										>
+											<Droppable droppableId="droppable">
+												{(provided, snapshot) => (
+													<div
+														{...provided.droppableProps}
+														ref={provided.innerRef}
+														// style={}
 													>
-														<span className="sr-only">{t("PREFERENCES.TABLE.ADD_COLUMN")}</span>
-													</button>
-												</li>
-											) : null
-										)}
-									</ul>
-								</div>
-							</div>
-
-							<div className="col">
-								<div className="obj drag-selected-column">
-									<header>
-										<h2>
-											{
-												t(
-													"PREFERENCES.TABLE.SELECTED_COLUMNS"
-												) /* Selected Columns */
-											}
-										</h2>
-									</header>
-									<ul className="drag-drop-items">
-										<li>
-											<DragDropContext
-												onDragEnd={onDragEnd}
-											>
-												<Droppable droppableId="droppable">
-													{(provided, snapshot) => (
-														<div
-															{...provided.droppableProps}
-															ref={provided.innerRef}
-															// style={}
-														>
-															{activeCols.filter(col => col).map((column, key) =>
-																(
-																	<Draggablee key={column.name} draggableId={column.name} index={key}>
-																		{(provided, snapshot) => (
-																			<div
-																				ref={provided.innerRef}
-																				{...provided.draggableProps}
-																				{...provided.dragHandleProps}
-																				style={{...provided.draggableProps.style}}
-																				className="drag-item"
-																			>
-																				<div className="title">
-																					{t(column.label)}
-																				</div>
-																				<button
-																					className="button-like-anchor move-item remove"
-																					onClick={() => changeColumn(column, true)}
-																				>
-																					<span className="sr-only">{t("PREFERENCES.TABLE.REMOVE_COLUMN")}</span>
-																				</button>
+														{activeCols.filter(col => col).map((column, key) =>
+															(
+																<Draggablee key={column.name} draggableId={column.name} index={key}>
+																	{(provided, snapshot) => (
+																		<div
+																			ref={provided.innerRef}
+																			{...provided.draggableProps}
+																			{...provided.dragHandleProps}
+																			style={{...provided.draggableProps.style}}
+																			className="drag-item"
+																		>
+																			<div className="title">
+																				{t(column.label)}
 																			</div>
-																		)}
-																	</Draggablee>
-																)
-															)}
-															{provided.placeholder}
-														</div>
-													)}
-												</Droppable>
-											</DragDropContext>
+																			<button
+																				className="button-like-anchor move-item remove"
+																				onClick={() => changeColumn(column, true)}
+																			>
+																				<span className="sr-only">{t("PREFERENCES.TABLE.REMOVE_COLUMN")}</span>
+																			</button>
+																		</div>
+																	)}
+																</Draggablee>
+															)
+														)}
+														{provided.placeholder}
+													</div>
+												)}
+											</Droppable>
+										</DragDropContext>
 
-										</li>
-									</ul>
-								</div>
+									</li>
+								</ul>
 							</div>
 						</div>
+					</div>
 
-						<div className="tab-description for-footer">
-							<p>
-								{/* The order and selection will be saved automatically.
-														Press "Reset" to restore the default view. */}
-								{t("PREFERENCES.TABLE.FOOTER_TEXT", {
-									resetTranslation: t("RESET"),
-								})}
-							</p>
-						</div>
+					<div className="tab-description for-footer">
+						<p>
+							{/* The order and selection will be saved automatically.
+													Press "Reset" to restore the default view. */}
+							{t("PREFERENCES.TABLE.FOOTER_TEXT", {
+								resetTranslation: t("RESET"),
+							})}
+						</p>
 					</div>
 				</div>
+			</div>
 
-				<footer>
-					{/* Render buttons for updating table data */}
-						<button onClick={() => clearData()} className="cancel active">
-							{t("CANCEL") /*Cancel*/}
-						</button>
-						<button onClick={() => save()} className="submit active">
-							{t("SAVE") /* Save As Default */}
-						</button>
-				</footer>
-			</section>
+			<footer>
+				{/* Render buttons for updating table data */}
+					<button onClick={() => clearData()} className="cancel active">
+						{t("CANCEL") /*Cancel*/}
+					</button>
+					<button onClick={() => save()} className="submit active">
+						{t("SAVE") /* Save As Default */}
+					</button>
+			</footer>
 		</>
 	);
-};
+}
 
 export default EditTableViewModal;
diff --git a/src/components/shared/HotKeyCheatSheet.tsx b/src/components/shared/HotKeyCheatSheet.tsx
index fc3db4ef3c..898cb626d9 100644
--- a/src/components/shared/HotKeyCheatSheet.tsx
+++ b/src/components/shared/HotKeyCheatSheet.tsx
@@ -1,30 +1,19 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { availableHotkeys } from "../../configs/hotkeysConfig";
-import { useHotkeys, useHotkeysContext } from "react-hotkeys-hook";
+import { useHotkeysContext } from "react-hotkeys-hook";
 import { Hotkey } from "react-hotkeys-hook/dist/types";
+import { Modal, ModalHandle } from "./modals/Modal";
 
 /**
  * This component renders the hotkey cheat sheet showing all available hotkeys
  */
-const HotKeyCheatSheet: React.FC<{
-	close: () => void,
-}> = ({
-	close
+const HotKeyCheatSheet = ({
+	modalRef,
+}: {
+	modalRef: React.RefObject<ModalHandle>
 }) => {
 	const { t } = useTranslation();
-
-	useHotkeys(
-		availableHotkeys.general.CLOSE_MODAL.sequence,
-		() => close(),
-		{ description: t(availableHotkeys.general.CLOSE_MODAL.description) ?? undefined },
-		[close],
-  	);
-
-	const handleClose = () => {
-		close();
-	};
-
 	const { hotkeys } = useHotkeysContext();
 
 	const checkHotkeys = (hotkeys: readonly Hotkey[], searchkeys: string[]) => {
@@ -40,80 +29,74 @@ const HotKeyCheatSheet: React.FC<{
 	}
 
 	return (
-		<>
-			<div className="modal-animation modal-overlay" />
-			<div className="modal modal-animation">
-				<header>
-					<button
-						className="button-like-anchor fa fa-times close-modal"
-						onClick={() => handleClose()}
-					/>
-					<h2>{t("HOTKEYS.CHEAT_SHEET.TITLE")}</h2>
-				</header>
-				<div className="modal-content active">
-					<div className="modal-body">
-						<div className="full-col">
-							<p className="hint">{t("HOTKEYS.CHEAT_SHEET.HINT")}</p>
-							{/* Repeat table for each key */}
-							{Object.keys(availableHotkeys).map((hotkeyGroup, key) => (
-								<div className="obj tbl-list" key={key}>
-									<header>
-										{t("HOTKEYS.GROUPS." + hotkeyGroup.toUpperCase())}
-									</header>
-									<table className="main-tbl">
-										<tbody>
-											{/* Repeat row for each hotkey in group*/}
-											{Object.keys(availableHotkeys[hotkeyGroup]).map(
-												(hotkey, key) => (
-													<tr key={key} style={{ opacity: !(hotkeys && checkHotkeys(hotkeys, availableHotkeys[hotkeyGroup][hotkey].sequence)) ? "50%" : "100%"}}>
-														<td className="hotkey">
-															<p className="combo">
-																<span className="chord">
-																	{/* repeat for each key in hotkey */}
-																	{availableHotkeys[hotkeyGroup][
-																		hotkey
-																	].sequence.map((comboKey, key) => (
-																		<span key={key}>
-																			<span>
-																				<span className="key">
-																					{t(
-																						"HOTKEYS.KEYS." +
-																							comboKey.toUpperCase(),
-																						comboKey
-																					)}
-																				</span>
+		<Modal
+			header={t("HOTKEYS.CHEAT_SHEET.TITLE")}
+			classId=""
+			ref={modalRef}
+		>
+			<div className="modal-content active">
+				<div className="modal-body">
+					<div className="full-col">
+						<p className="hint">{t("HOTKEYS.CHEAT_SHEET.HINT")}</p>
+						{/* Repeat table for each key */}
+						{Object.keys(availableHotkeys).map((hotkeyGroup, key) => (
+							<div className="obj tbl-list" key={key}>
+								<header>
+									{t("HOTKEYS.GROUPS." + hotkeyGroup.toUpperCase())}
+								</header>
+								<table className="main-tbl">
+									<tbody>
+										{/* Repeat row for each hotkey in group*/}
+										{Object.keys(availableHotkeys[hotkeyGroup]).map(
+											(hotkey, key) => (
+												<tr key={key} style={{ opacity: !(hotkeys && checkHotkeys(hotkeys, availableHotkeys[hotkeyGroup][hotkey].sequence)) ? "50%" : "100%"}}>
+													<td className="hotkey">
+														<p className="combo">
+															<span className="chord">
+																{/* repeat for each key in hotkey */}
+																{availableHotkeys[hotkeyGroup][
+																	hotkey
+																].sequence.map((comboKey, key) => (
+																	<span key={key}>
+																		<span>
+																			<span className="key">
+																				{t(
+																					"HOTKEYS.KEYS." +
+																						comboKey.toUpperCase(),
+																					comboKey
+																				)}
 																			</span>
-																			{comboKey ===
-																			availableHotkeys[hotkeyGroup][hotkey]
-																				.sequence[
-																				availableHotkeys[hotkeyGroup][hotkey]
-																					.sequence.length - 1
-																			]
-																				? ""
-																				: " + "}
 																		</span>
-																	))}
-																</span>
-															</p>
-														</td>
-														<td>
-															{t(
-																availableHotkeys[hotkeyGroup][hotkey]
-																	.description
-															)}
-														</td>
-													</tr>
-												)
-											)}
-										</tbody>
-									</table>
-								</div>
-							))}
-						</div>
+																		{comboKey ===
+																		availableHotkeys[hotkeyGroup][hotkey]
+																			.sequence[
+																			availableHotkeys[hotkeyGroup][hotkey]
+																				.sequence.length - 1
+																		]
+																			? ""
+																			: " + "}
+																	</span>
+																))}
+															</span>
+														</p>
+													</td>
+													<td>
+														{t(
+															availableHotkeys[hotkeyGroup][hotkey]
+																.description
+														)}
+													</td>
+												</tr>
+											)
+										)}
+									</tbody>
+								</table>
+							</div>
+						))}
 					</div>
 				</div>
 			</div>
-		</>
+		</Modal>
 	);
 };
 
diff --git a/src/components/shared/NewResourceModal.tsx b/src/components/shared/NewResourceModal.tsx
index 848e48df43..ddab332120 100644
--- a/src/components/shared/NewResourceModal.tsx
+++ b/src/components/shared/NewResourceModal.tsx
@@ -6,83 +6,69 @@ import NewThemeWizard from "../configuration/partials/wizard/NewThemeWizard";
 import NewAclWizard from "../users/partials/wizard/NewAclWizard";
 import NewGroupWizard from "../users/partials/wizard/NewGroupWizard";
 import NewUserWizard from "../users/partials/wizard/NewUserWizard";
-import { useHotkeys } from "react-hotkeys-hook";
-import { availableHotkeys } from "../../configs/hotkeysConfig";
+import { Modal, ModalHandle } from "./modals/Modal";
 
 /**
  * This component renders the modal for adding new resources
  */
 const NewResourceModal = ({
 	handleClose,
-	resource
+	resource,
+	modalRef
 }: {
 	handleClose: () => void,
 	resource: "events" | "series" | "user" | "group" | "acl" | "themes"
+	modalRef: React.RefObject<ModalHandle>
 }) => {
 	const { t } = useTranslation();
 
-	useHotkeys(
-		availableHotkeys.general.CLOSE_MODAL.sequence,
-		() => handleClose(),
-		{ description: t(availableHotkeys.general.CLOSE_MODAL.description) ?? undefined },
-		[handleClose],
-  	);
-
 	const close = () => {
 		handleClose();
 	};
 
+	const headerText = () => {
+		switch(resource) {
+			case "events": return t("EVENTS.EVENTS.NEW.CAPTION");
+			case "series": return t("EVENTS.SERIES.NEW.CAPTION");
+			case "themes": return t("CONFIGURATION.THEMES.NEW.CAPTION");
+			case "acl": return t("USERS.ACLS.NEW.CAPTION");
+			case "group": return t("USERS.GROUPS.NEW.CAPTION");
+			case "user": return t("USERS.USERS.NEW.CAPTION");
+		}
+	}
+
 	return (
-		// todo: add hotkeys
-		<>
-			<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} />
-				)}
-				{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>
-		</>
+		<Modal
+			header={headerText()}
+			classId="add-event-modal"
+			// initialFocus={"#firstField"}
+			ref={modalRef}
+		>
+			{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} />
+			)}
+		</Modal>
 	);
 };
 
diff --git a/src/components/shared/RegistrationModal.tsx b/src/components/shared/RegistrationModal.tsx
index 82c356f39d..4415ad12df 100644
--- a/src/components/shared/RegistrationModal.tsx
+++ b/src/components/shared/RegistrationModal.tsx
@@ -13,19 +13,33 @@ import {
 	fetchAdopterStatisticsSummary,
 	postRegistration,
 } from "../../utils/adopterRegistrationUtils";
-import { useHotkeys } from "react-hotkeys-hook";
-import { availableHotkeys } from "../../configs/hotkeysConfig";
+import { Modal, ModalHandle } from "./modals/Modal";
 
 /**
  * This component renders the adopter registration modal. This modal has various states.
  */
 const RegistrationModal = ({
-	close
+	modalRef
 }: {
-	close: () => void
+	modalRef: React.RefObject<ModalHandle>
 }) => {
 	const { t } = useTranslation();
 
+	return (
+		<Modal
+			header={t("ADOPTER_REGISTRATION.MODAL.CAPTION")}
+			classId="registration-modal"
+			className="modal active modal-open modal-animation"
+			ref={modalRef}
+		>
+			<RegistrationModalContent />
+		</Modal>
+	);
+};
+
+const RegistrationModalContent = () => {
+	const { t } = useTranslation();
+
 	// current state of the modal that is shown
 	const [state, setState] = useState<keyof typeof states>("information");
 	// initial values for Formik
@@ -53,17 +67,6 @@ const RegistrationModal = ({
 		statistics: { [key: string]: unknown },
 	}>();
 
-	useHotkeys(
-		availableHotkeys.general.CLOSE_MODAL.sequence,
-		() => close(),
-		{ description: t(availableHotkeys.general.CLOSE_MODAL.description) ?? undefined },
-		[close],
-  	);
-
-	const handleClose = () => {
-		close();
-	};
-
 	useEffect(() => {
 		fetchRegistrationInfos().then((r) => console.log(r));
 		fetchStatisticSummary();
@@ -127,661 +130,647 @@ const RegistrationModal = ({
 	};
 
 	return (
-		<>
-			<div className="modal-animation modal-overlay" />
-			<section
-				id="registration-modal"
-				className="modal active modal-open modal-animation"
-			>
-				<header>
-					<button
-						onClick={() => handleClose()}
-						className="button-like-anchor fa fa-times close-modal"
-					/>
-					<h2>{t("ADOPTER_REGISTRATION.MODAL.CAPTION")}</h2>
-				</header>
-
-				{/* shows information about the registration*/}
-				{state === "information" && (
-					<div className="modal-content" style={{ display: "block" }}>
-						<div className="modal-body">
-							<div
-								className="registration-header"
-								style={{ padding: "5px 0 15px 0" }}
-							>
-								<h2>
-									{t("ADOPTER_REGISTRATION.MODAL.INFORMATION_STATE.HEADER")}
-								</h2>
-							</div>
-							<div>
-								<div className="row">
-									<p>
-										{t(
-											"ADOPTER_REGISTRATION.MODAL.INFORMATION_STATE.INFORMATION_PARAGRAPH_1"
-										)}
-									</p>
-									<br />
-									<p>
-										{t(
-											"ADOPTER_REGISTRATION.MODAL.INFORMATION_STATE.INFORMATION_PARAGRAPH_2"
-										)}
-									</p>
-								</div>
-							</div>
-						</div>
+	<>
+		{/* shows information about the registration*/}
+		{state === "information" && (
+			<div className="modal-content" style={{ display: "block" }}>
+				<div className="modal-body">
+					<div
+						className="registration-header"
+						style={{ padding: "5px 0 15px 0" }}
+					>
+						<h2>
+							{t("ADOPTER_REGISTRATION.MODAL.INFORMATION_STATE.HEADER")}
+						</h2>
 					</div>
-				)}
-
-				{/* shows terms of use */}
-				{state === "legal_info" && (
-					<div className="modal-content" style={{ display: "block" }}>
-						<div className="modal-body">
-							<div>
-								<div className="row">
-									<div className="scrollbox">
-										<TermsOfUsePage />
-									</div>
-								</div>
-							</div>
+					<div>
+						<div className="row">
+							<p>
+								{t(
+									"ADOPTER_REGISTRATION.MODAL.INFORMATION_STATE.INFORMATION_PARAGRAPH_1"
+								)}
+							</p>
+							<br />
+							<p>
+								{t(
+									"ADOPTER_REGISTRATION.MODAL.INFORMATION_STATE.INFORMATION_PARAGRAPH_2"
+								)}
+							</p>
 						</div>
 					</div>
-				)}
+				</div>
+			</div>
+		)}
 
-				{/* shows state after skipping the registration */}
-				{state === "skip" && (
-					<div className="modal-content" style={{ display: "block" }}>
-						<div className="modal-body">
-							<div className="registration-header">
-								<h2>{t("ADOPTER_REGISTRATION.MODAL.SKIP_STATE.HEADER")}</h2>
-							</div>
-							<div>
-								<div className="row">
-									<p>
-										<span>
-											{t("ADOPTER_REGISTRATION.MODAL.SKIP_STATE.TEXT")}
-										</span>
-										<br />
-									</p>
-								</div>
+		{/* shows terms of use */}
+		{state === "legal_info" && (
+			<div className="modal-content" style={{ display: "block" }}>
+				<div className="modal-body">
+					<div>
+						<div className="row">
+							<div className="scrollbox">
+								<TermsOfUsePage />
 							</div>
 						</div>
 					</div>
-				)}
+				</div>
+			</div>
+		)}
 
-				{/* shows delete confirmation */}
-				{state === "delete_submit" && (
-					<div className="modal-content" style={{ display: "block" }}>
-						<div className="modal-body">
+		{/* shows state after skipping the registration */}
+		{state === "skip" && (
+			<div className="modal-content" style={{ display: "block" }}>
+				<div className="modal-body">
+					<div className="registration-header">
+						<h2>{t("ADOPTER_REGISTRATION.MODAL.SKIP_STATE.HEADER")}</h2>
+					</div>
+					<div>
+						<div className="row">
 							<p>
 								<span>
-									{t("ADOPTER_REGISTRATION.MODAL.DELETE_SUBMIT_STATE.TEXT")}
+									{t("ADOPTER_REGISTRATION.MODAL.SKIP_STATE.TEXT")}
 								</span>
+								<br />
 							</p>
 						</div>
 					</div>
-				)}
+				</div>
+			</div>
+		)}
 
-				{/* shows spinner while API requests are processed */}
-				{(state === "save" || state === "delete" || state === "update") && (
-					<div className="modal-content" style={{ display: "block" }}>
-						<div className="modal-body">
-							<div>
-								<div className="row spinner-container">
-									<i className="fa fa-spinner fa-spin fa-4x fa-fw" />
-								</div>
-							</div>
+		{/* shows delete confirmation */}
+		{state === "delete_submit" && (
+			<div className="modal-content" style={{ display: "block" }}>
+				<div className="modal-body">
+					<p>
+						<span>
+							{t("ADOPTER_REGISTRATION.MODAL.DELETE_SUBMIT_STATE.TEXT")}
+						</span>
+					</p>
+				</div>
+			</div>
+		)}
+
+		{/* shows spinner while API requests are processed */}
+		{(state === "save" || state === "delete" || state === "update") && (
+			<div className="modal-content" style={{ display: "block" }}>
+				<div className="modal-body">
+					<div>
+						<div className="row spinner-container">
+							<i className="fa fa-spinner fa-spin fa-4x fa-fw" />
 						</div>
 					</div>
-				)}
+				</div>
+			</div>
+		)}
 
-				{/* shows thank you after registration */}
-				{state === "thank_you" && (
-					<div className="modal-content" style={{ display: "block" }}>
-						<div className="modal-body">
-							<div className="registration-header">
-								<h2>
-									{t("ADOPTER_REGISTRATION.MODAL.THANK_YOU_STATE.HEADER")}
-								</h2>
-							</div>
-							<div>
-								<div>
-									<p>
-										<span>
-											{t(
-												"ADOPTER_REGISTRATION.MODAL.THANK_YOU_STATE.TEXT_LEADING_TO_PATH"
-											)}
-										</span>
-										<b>
-											(<span>{t("HELP.HELP")}</span>)
-											{" "}
-											<span className="fa fa-question-circle" />
-											{" > "}
-											<span>{t("HELP.ADOPTER_REGISTRATION")}</span>
-										</b>
-										<span>
-											{" "}
-											{t(
-												"ADOPTER_REGISTRATION.MODAL.THANK_YOU_STATE.TEXT_LEADING_AFTER_PATH"
-											)}
-										</span>
-									</p>
-								</div>
-							</div>
+		{/* shows thank you after registration */}
+		{state === "thank_you" && (
+			<div className="modal-content" style={{ display: "block" }}>
+				<div className="modal-body">
+					<div className="registration-header">
+						<h2>
+							{t("ADOPTER_REGISTRATION.MODAL.THANK_YOU_STATE.HEADER")}
+						</h2>
+					</div>
+					<div>
+						<div>
+							<p>
+								<span>
+									{t(
+										"ADOPTER_REGISTRATION.MODAL.THANK_YOU_STATE.TEXT_LEADING_TO_PATH"
+									)}
+								</span>
+								<b>
+									(<span>{t("HELP.HELP")}</span>)
+									{" "}
+									<span className="fa fa-question-circle" />
+									{" > "}
+									<span>{t("HELP.ADOPTER_REGISTRATION")}</span>
+								</b>
+								<span>
+									{" "}
+									{t(
+										"ADOPTER_REGISTRATION.MODAL.THANK_YOU_STATE.TEXT_LEADING_AFTER_PATH"
+									)}
+								</span>
+							</p>
 						</div>
 					</div>
-				)}
+				</div>
+			</div>
+		)}
 
-				{/* shows error */}
-				{state === "error" && (
-					<div className="modal-content" style={{ display: "block" }}>
-						<div className="modal-body">
-							<div className="registration-header">
-								<h2>{t("ADOPTER_REGISTRATION.MODAL.ERROR.HEADER")}</h2>
-							</div>
-							<div>
-								<div className="row">
-									<p>
-										<span>{t("ADOPTER_REGISTRATION.MODAL.ERROR.TEXT")}</span>
-									</p>
-								</div>
-							</div>
+		{/* shows error */}
+		{state === "error" && (
+			<div className="modal-content" style={{ display: "block" }}>
+				<div className="modal-body">
+					<div className="registration-header">
+						<h2>{t("ADOPTER_REGISTRATION.MODAL.ERROR.HEADER")}</h2>
+					</div>
+					<div>
+						<div className="row">
+							<p>
+								<span>{t("ADOPTER_REGISTRATION.MODAL.ERROR.TEXT")}</span>
+							</p>
 						</div>
 					</div>
-				)}
+				</div>
+			</div>
+		)}
 
-				{/* shows registration form containing adaptor information */}
-				<Formik
-					initialValues={initialValues}
-					enableReinitialize
-					validationSchema={AdopterRegistrationSchema}
-					onSubmit={(values) => handleSubmit(values)}
-				>
-					{(formik) => (
-						<>
-							{state === "form" && (
-								<div className="modal-content" style={{ display: "block" }}>
-									<div className="modal-body">
-										<div>
-											<fieldset>
-												<legend>
-													{t(
-														"ADOPTER_REGISTRATION.MODAL.FORM_STATE.ORGANISATION"
-													)}
-												</legend>
-												<div className="row">
-													<div className="col">
-														<div className="form-group">
-															<Field
-																type="text"
-																name="organisationName"
-																id="adopter_organisation"
-																className="form-control"
-															/>
-															<label
-																className="form-control-placeholder"
-																htmlFor="adopter_organisation"
-																style={
-																	formik.values.organisationName
-																		? styleWithContent
-																		: {}
-																}
-															>
-																{t(
-																	"ADOPTER_REGISTRATION.MODAL.FORM_STATE.ORGANISATION"
-																)}
-															</label>
-														</div>
-													</div>
-													<div className="col">
-														<div className="form-group">
-															<Field
-																type="text"
-																name="departmentName"
-																id="adopter_department"
-																className="form-control"
-															/>
-															<label
-																className="form-control-placeholder"
-																htmlFor="adopter_department"
-																style={
-																	formik.values.departmentName
-																		? styleWithContent
-																		: {}
-																}
-															>
-																{t(
-																	"ADOPTER_REGISTRATION.MODAL.FORM_STATE.DEPARTMENT"
-																)}
-															</label>
-														</div>
-													</div>
-												</div>
-												<div className="row">
-													<div className="col">
-														<div className="form-group">
-															<Field
-																style={{ color: "#666", fontWeight: "600" }}
-																id="adopter_country"
-																name="country"
-																as="select"
-																className="form-control"
-															>
-																<option value="" />
-																{countries.map((country, key) => (
-																	<option key={key} value={country.code}>
-																		{country.name}
-																	</option>
-																))}
-															</Field>
-															<label
-																className="form-control-placeholder"
-																htmlFor="adopter_country"
-																style={
-																	formik.values.country ? styleWithContent : {}
-																}
-															>
-																{t(
-																	"ADOPTER_REGISTRATION.MODAL.FORM_STATE.COUNTRY"
-																)}
-															</label>
-														</div>
-													</div>
-													<div className="col">
-														<div className="form-group-pair">
-															<div className="form-group">
-																<Field
-																	type="text"
-																	name="postalCode"
-																	id="adopter_postalcode"
-																	className="form-control"
-																/>
-																<label
-																	className="form-control-placeholder"
-																	htmlFor="adopter_postalcode"
-																	style={
-																		formik.values.postalCode
-																			? styleWithContent
-																			: {}
-																	}
-																>
-																	{t(
-																		"ADOPTER_REGISTRATION.MODAL.FORM_STATE.POSTAL_CODE"
-																	)}
-																</label>
-															</div>
-															<div className="form-group">
-																<Field
-																	type="text"
-																	name="city"
-																	id="adopter_city"
-																	className="form-control"
-																/>
-																<label
-																	className="form-control-placeholder"
-																	htmlFor="adopter_city"
-																	style={
-																		formik.values.city ? styleWithContent : {}
-																	}
-																>
-																	{t(
-																		"ADOPTER_REGISTRATION.MODAL.FORM_STATE.CITY"
-																	)}
-																</label>
-															</div>
-														</div>
-													</div>
-												</div>
-											</fieldset>
-											<fieldset>
-												<legend>
-													{t(
-														"ADOPTER_REGISTRATION.MODAL.FORM_STATE.CONTACT_INFO"
-													)}
-												</legend>
-												<div className="row">
-													<div className="col">
-														<div className="form-group">
-															<Field
-																type="text"
-																name="firstName"
-																id="adopter_firstname"
-																className="form-control"
-															/>
-															<label
-																className="form-control-placeholder"
-																htmlFor="adopter_firstname"
-																style={
-																	formik.values.firstName
-																		? styleWithContent
-																		: {}
-																}
-															>
-																{t(
-																	"ADOPTER_REGISTRATION.MODAL.FORM_STATE.FIRST_NAME"
-																)}
-															</label>
-														</div>
-													</div>
-													<div className="col">
-														<div className="form-group">
-															<Field
-																type="text"
-																name="lastName"
-																id="adopter_lastname"
-																className="form-control"
-															/>
-															<label
-																className="form-control-placeholder"
-																htmlFor="adopter_lastname"
-																style={
-																	formik.values.lastName ? styleWithContent : {}
-																}
-															>
-																{t(
-																	"ADOPTER_REGISTRATION.MODAL.FORM_STATE.LAST_NAME"
-																)}
-															</label>
-														</div>
-													</div>
+		{/* shows registration form containing adaptor information */}
+		<Formik
+			initialValues={initialValues}
+			enableReinitialize
+			validationSchema={AdopterRegistrationSchema}
+			onSubmit={(values) => handleSubmit(values)}
+		>
+			{(formik) => (
+				<>
+					{state === "form" && (
+						<div className="modal-content" style={{ display: "block" }}>
+							<div className="modal-body">
+								<div>
+									<fieldset>
+										<legend>
+											{t(
+												"ADOPTER_REGISTRATION.MODAL.FORM_STATE.ORGANISATION"
+											)}
+										</legend>
+										<div className="row">
+											<div className="col">
+												<div className="form-group">
+													<Field
+														type="text"
+														name="organisationName"
+														id="adopter_organisation"
+														className="form-control"
+													/>
+													<label
+														className="form-control-placeholder"
+														htmlFor="adopter_organisation"
+														style={
+															formik.values.organisationName
+																? styleWithContent
+																: {}
+														}
+													>
+														{t(
+															"ADOPTER_REGISTRATION.MODAL.FORM_STATE.ORGANISATION"
+														)}
+													</label>
 												</div>
-												<div className="row">
-													<div className="col">
-														<div className="form-group">
-															<Field
-																type="text"
-																name="street"
-																id="adopter_street"
-																className="form-control"
-															/>
-															<label
-																className="form-control-placeholder"
-																htmlFor="adopter_street"
-																style={
-																	formik.values.street ? styleWithContent : {}
-																}
-															>
-																{t(
-																	"ADOPTER_REGISTRATION.MODAL.FORM_STATE.STREET"
-																)}
-															</label>
-														</div>
-													</div>
-													<div className="col">
-														<div className="form-group">
-															<Field
-																type="text"
-																name="streetNo"
-																id="adopter_streetnumber"
-																className="form-control"
-															/>
-															<label
-																className="form-control-placeholder"
-																htmlFor="adopter_streetnumber"
-																style={
-																	formik.values.streetNo ? styleWithContent : {}
-																}
-															>
-																{t(
-																	"ADOPTER_REGISTRATION.MODAL.FORM_STATE.NUMBER"
-																)}
-															</label>
-														</div>
-													</div>
+											</div>
+											<div className="col">
+												<div className="form-group">
+													<Field
+														type="text"
+														name="departmentName"
+														id="adopter_department"
+														className="form-control"
+													/>
+													<label
+														className="form-control-placeholder"
+														htmlFor="adopter_department"
+														style={
+															formik.values.departmentName
+																? styleWithContent
+																: {}
+														}
+													>
+														{t(
+															"ADOPTER_REGISTRATION.MODAL.FORM_STATE.DEPARTMENT"
+														)}
+													</label>
 												</div>
-												<div className="row">
-													<div className="col">
-														<div className="form-group">
-															<Field
-																id="adopter_emailadr"
-																name="email"
-																type="email"
-																className="form-control"
-															/>
-															<label
-																className="form-control-placeholder"
-																htmlFor="adopter_emailadr"
-																style={
-																	formik.values.email ? styleWithContent : {}
-																}
-															>
-																{t(
-																	"ADOPTER_REGISTRATION.MODAL.FORM_STATE.MAIL"
-																)}
-															</label>
-														</div>
-													</div>
-													<div className="col">
-														<div className="form-group form-group-checkbox">
-															<Field
-																type="checkbox"
-																name="contactme"
-																id="adopter_contactme"
-																className="form-control"
-															/>
-															<label htmlFor="adopter_contactme">
-																{t(
-																	"ADOPTER_REGISTRATION.MODAL.FORM_STATE.CONTACT_ME"
-																)}
-															</label>
-														</div>
-													</div>
+											</div>
+										</div>
+										<div className="row">
+											<div className="col">
+												<div className="form-group">
+													<Field
+														style={{ color: "#666", fontWeight: "600" }}
+														id="adopter_country"
+														name="country"
+														as="select"
+														className="form-control"
+													>
+														<option value="" />
+														{countries.map((country, key) => (
+															<option key={key} value={country.code}>
+																{country.name}
+															</option>
+														))}
+													</Field>
+													<label
+														className="form-control-placeholder"
+														htmlFor="adopter_country"
+														style={
+															formik.values.country ? styleWithContent : {}
+														}
+													>
+														{t(
+															"ADOPTER_REGISTRATION.MODAL.FORM_STATE.COUNTRY"
+														)}
+													</label>
 												</div>
-											</fieldset>
-											<fieldset>
-												<legend>
-													{t(
-														"ADOPTER_REGISTRATION.MODAL.FORM_STATE.SYSTEM_TYPE_HEADLINE"
-													)}
-												</legend>
-												<div className="row">
+											</div>
+											<div className="col">
+												<div className="form-group-pair">
 													<div className="form-group">
 														<Field
-															style={{color: "#666", fontWeight: "600"}}
-															id="system_type"
-															name="systemType"
-															as="select"
+															type="text"
+															name="postalCode"
+															id="adopter_postalcode"
 															className="form-control"
+														/>
+														<label
+															className="form-control-placeholder"
+															htmlFor="adopter_postalcode"
+															style={
+																formik.values.postalCode
+																	? styleWithContent
+																	: {}
+															}
 														>
-															<option value=""/>
-															{systemTypes.map((systemType, key) => (
-																<option key={key} value={systemType.value}>
-																	{t(systemType.name)}
-																</option>
-															))}
-														</Field>
+															{t(
+																"ADOPTER_REGISTRATION.MODAL.FORM_STATE.POSTAL_CODE"
+															)}
+														</label>
+													</div>
+													<div className="form-group">
+														<Field
+															type="text"
+															name="city"
+															id="adopter_city"
+															className="form-control"
+														/>
 														<label
 															className="form-control-placeholder"
-															htmlFor="system_type"
+															htmlFor="adopter_city"
 															style={
-																formik.values.systemType ? styleWithContent : {}
+																formik.values.city ? styleWithContent : {}
 															}
 														>
 															{t(
-																"ADOPTER_REGISTRATION.MODAL.FORM_STATE.SYSTEM_TYPE"
+																"ADOPTER_REGISTRATION.MODAL.FORM_STATE.CITY"
 															)}
 														</label>
 													</div>
 												</div>
-											</fieldset>
-											<fieldset>
-												<legend>
-													{t(
-														"ADOPTER_REGISTRATION.MODAL.FORM_STATE.WHICH_DATA_TO_SHARE"
-													)}
-												</legend>
-												<div className="form-group form-group-checkbox">
+											</div>
+										</div>
+									</fieldset>
+									<fieldset>
+										<legend>
+											{t(
+												"ADOPTER_REGISTRATION.MODAL.FORM_STATE.CONTACT_INFO"
+											)}
+										</legend>
+										<div className="row">
+											<div className="col">
+												<div className="form-group">
 													<Field
-														type="checkbox"
-														name="allowsStatistics"
-														id="adopter_allows_statistics"
+														type="text"
+														name="firstName"
+														id="adopter_firstname"
 														className="form-control"
 													/>
-													<label htmlFor="adopter_allows_statistics">
+													<label
+														className="form-control-placeholder"
+														htmlFor="adopter_firstname"
+														style={
+															formik.values.firstName
+																? styleWithContent
+																: {}
+														}
+													>
 														{t(
-															"ADOPTER_REGISTRATION.MODAL.FORM_STATE.USAGE_STATISTICS"
+															"ADOPTER_REGISTRATION.MODAL.FORM_STATE.FIRST_NAME"
 														)}
 													</label>
 												</div>
-												<div className="form-group form-group-checkbox">
+											</div>
+											<div className="col">
+												<div className="form-group">
 													<Field
-														type="checkbox"
-														name="allowsErrorReports"
-														id="adopter_allows_err_reports"
+														type="text"
+														name="lastName"
+														id="adopter_lastname"
 														className="form-control"
 													/>
-													<label htmlFor="adopter_allows_err_reports">
+													<label
+														className="form-control-placeholder"
+														htmlFor="adopter_lastname"
+														style={
+															formik.values.lastName ? styleWithContent : {}
+														}
+													>
 														{t(
-															"ADOPTER_REGISTRATION.MODAL.FORM_STATE.ERROR_REPORTS"
+															"ADOPTER_REGISTRATION.MODAL.FORM_STATE.LAST_NAME"
 														)}
 													</label>
 												</div>
-											</fieldset>
-											<fieldset>
-												<legend>
-													{t(
-														"ADOPTER_REGISTRATION.MODAL.FORM_STATE.POLICY_HEADLINE"
-													)}
-												</legend>
+											</div>
+										</div>
+										<div className="row">
+											<div className="col">
+												<div className="form-group">
+													<Field
+														type="text"
+														name="street"
+														id="adopter_street"
+														className="form-control"
+													/>
+													<label
+														className="form-control-placeholder"
+														htmlFor="adopter_street"
+														style={
+															formik.values.street ? styleWithContent : {}
+														}
+													>
+														{t(
+															"ADOPTER_REGISTRATION.MODAL.FORM_STATE.STREET"
+														)}
+													</label>
+												</div>
+											</div>
+											<div className="col">
+												<div className="form-group">
+													<Field
+														type="text"
+														name="streetNo"
+														id="adopter_streetnumber"
+														className="form-control"
+													/>
+													<label
+														className="form-control-placeholder"
+														htmlFor="adopter_streetnumber"
+														style={
+															formik.values.streetNo ? styleWithContent : {}
+														}
+													>
+														{t(
+															"ADOPTER_REGISTRATION.MODAL.FORM_STATE.NUMBER"
+														)}
+													</label>
+												</div>
+											</div>
+										</div>
+										<div className="row">
+											<div className="col">
+												<div className="form-group">
+													<Field
+														id="adopter_emailadr"
+														name="email"
+														type="email"
+														className="form-control"
+													/>
+													<label
+														className="form-control-placeholder"
+														htmlFor="adopter_emailadr"
+														style={
+															formik.values.email ? styleWithContent : {}
+														}
+													>
+														{t(
+															"ADOPTER_REGISTRATION.MODAL.FORM_STATE.MAIL"
+														)}
+													</label>
+												</div>
+											</div>
+											<div className="col">
 												<div className="form-group form-group-checkbox">
 													<Field
 														type="checkbox"
-														name="agreedToPolicy"
-														id="agreedToPolicy"
+														name="contactme"
+														id="adopter_contactme"
 														className="form-control"
 													/>
-													<label htmlFor="agreedToPolicy">
-														<span>
-															{t(
-																"ADOPTER_REGISTRATION.MODAL.FORM_STATE.READ_TERMS_OF_USE_BEFORE"
-															)}
-														</span>
-														<span
-															className="link"
-															onClick={() =>
-																setState(states[state].nextState[2] as keyof typeof states)
-															}
-														>
-															{" " + t(
-																"ADOPTER_REGISTRATION.MODAL.FORM_STATE.READ_TERMS_OF_USE_LINK"
-															) + " "}
-														</span>
-														<span>
-															{t(
-																"ADOPTER_REGISTRATION.MODAL.FORM_STATE.READ_TERMS_OF_USE_AFTER"
-															)}
-														</span>
+													<label htmlFor="adopter_contactme">
+														{t(
+															"ADOPTER_REGISTRATION.MODAL.FORM_STATE.CONTACT_ME"
+														)}
 													</label>
 												</div>
-											</fieldset>
+											</div>
 										</div>
-									</div>
-								</div>
-							)}
-
-							{/* shows summary of information */}
-							{state === "summary" && (
-								<div className="modal-content" style={{ display: "block" }}>
-									<div className="modal-body">
-										<p>{t("ADOPTER_REGISTRATION.MODAL.SUMMARY_STATE.HEADER")}</p>
-										<p>{t("ADOPTER_REGISTRATION.MODAL.SUMMARY_STATE.GENERAL_HEADER")}</p>
-										<div className="scrollbox">
-											<pre>
-												{JSON.stringify(formik.values, null, "\t")}
-											</pre>
+									</fieldset>
+									<fieldset>
+										<legend>
+											{t(
+												"ADOPTER_REGISTRATION.MODAL.FORM_STATE.SYSTEM_TYPE_HEADLINE"
+											)}
+										</legend>
+										<div className="row">
+											<div className="form-group">
+												<Field
+													style={{color: "#666", fontWeight: "600"}}
+													id="system_type"
+													name="systemType"
+													as="select"
+													className="form-control"
+												>
+													<option value=""/>
+													{systemTypes.map((systemType, key) => (
+														<option key={key} value={systemType.value}>
+															{t(systemType.name)}
+														</option>
+													))}
+												</Field>
+												<label
+													className="form-control-placeholder"
+													htmlFor="system_type"
+													style={
+														formik.values.systemType ? styleWithContent : {}
+													}
+												>
+													{t(
+														"ADOPTER_REGISTRATION.MODAL.FORM_STATE.SYSTEM_TYPE"
+													)}
+												</label>
+											</div>
+										</div>
+									</fieldset>
+									<fieldset>
+										<legend>
+											{t(
+												"ADOPTER_REGISTRATION.MODAL.FORM_STATE.WHICH_DATA_TO_SHARE"
+											)}
+										</legend>
+										<div className="form-group form-group-checkbox">
+											<Field
+												type="checkbox"
+												name="allowsStatistics"
+												id="adopter_allows_statistics"
+												className="form-control"
+											/>
+											<label htmlFor="adopter_allows_statistics">
+												{t(
+													"ADOPTER_REGISTRATION.MODAL.FORM_STATE.USAGE_STATISTICS"
+												)}
+											</label>
 										</div>
-										<br />
+										<div className="form-group form-group-checkbox">
+											<Field
+												type="checkbox"
+												name="allowsErrorReports"
+												id="adopter_allows_err_reports"
+												className="form-control"
+											/>
+											<label htmlFor="adopter_allows_err_reports">
+												{t(
+													"ADOPTER_REGISTRATION.MODAL.FORM_STATE.ERROR_REPORTS"
+												)}
+											</label>
+										</div>
+									</fieldset>
+									<fieldset>
+										<legend>
+											{t(
+												"ADOPTER_REGISTRATION.MODAL.FORM_STATE.POLICY_HEADLINE"
+											)}
+										</legend>
+										<div className="form-group form-group-checkbox">
+											<Field
+												type="checkbox"
+												name="agreedToPolicy"
+												id="agreedToPolicy"
+												className="form-control"
+											/>
+											<label htmlFor="agreedToPolicy">
+												<span>
+													{t(
+														"ADOPTER_REGISTRATION.MODAL.FORM_STATE.READ_TERMS_OF_USE_BEFORE"
+													)}
+												</span>
+												<span
+													className="link"
+													onClick={() =>
+														setState(states[state].nextState[2] as keyof typeof states)
+													}
+												>
+													{" " + t(
+														"ADOPTER_REGISTRATION.MODAL.FORM_STATE.READ_TERMS_OF_USE_LINK"
+													) + " "}
+												</span>
+												<span>
+													{t(
+														"ADOPTER_REGISTRATION.MODAL.FORM_STATE.READ_TERMS_OF_USE_AFTER"
+													)}
+												</span>
+											</label>
+										</div>
+									</fieldset>
+								</div>
+							</div>
+						</div>
+					)}
 
-										{formik.values.allowsStatistics ?
-										<>
-											<p>{t("ADOPTER_REGISTRATION.MODAL.SUMMARY_STATE.STATS_HEADER")}</p>
-											<div className="scrollbox">
-												<pre>
-													{JSON.stringify(statisticsSummary?.statistics, null, "\t")}
-												</pre>
-											</div>
-										</>
-										: <p>{t("ADOPTER_REGISTRATION.MODAL.SUMMARY_STATE.NO_STATS_HEADER")}</p>
-										}
-									</div>
+					{/* shows summary of information */}
+					{state === "summary" && (
+						<div className="modal-content" style={{ display: "block" }}>
+							<div className="modal-body">
+								<p>{t("ADOPTER_REGISTRATION.MODAL.SUMMARY_STATE.HEADER")}</p>
+								<p>{t("ADOPTER_REGISTRATION.MODAL.SUMMARY_STATE.GENERAL_HEADER")}</p>
+								<div className="scrollbox">
+									<pre>
+										{JSON.stringify(formik.values, null, "\t")}
+									</pre>
 								</div>
-							)}
+								<br />
 
-							{/* navigation buttons depending on state of modal */}
-							<footer>
-								{states[state].buttons.submit && (
-									<div className="pull-right">
-										{/* submit of form content */}
-										{state === "summary" ?
-												<button
-												onClick={() => formik.handleSubmit()}
-												className={cn("submit")}
-											>
-												{t(states[state].buttons.submitButtonText)}
-											</button>
-										: state === "form" ?
-											<button
-												disabled={
-													!(formik.isValid && formik.values.agreedToPolicy)
-												}
-												onClick={() => onClickContinue()}
-												className={cn("submit", {
-													active:
-														formik.isValid && formik.values.agreedToPolicy,
-													inactive: !(
-														formik.isValid && formik.values.agreedToPolicy
-													),
-												})}
-											>
-												{t(states[state].buttons.submitButtonText)}
-											</button>
-										:
-											// continue button or confirm button (depending on state)
-											<button
-												className="continue-registration"
-												onClick={() => onClickContinue()}
-											>
-												{t(states[state].buttons.submitButtonText)}
-											</button>
-										}
+								{formik.values.allowsStatistics ?
+								<>
+									<p>{t("ADOPTER_REGISTRATION.MODAL.SUMMARY_STATE.STATS_HEADER")}</p>
+									<div className="scrollbox">
+										<pre>
+											{JSON.stringify(statisticsSummary?.statistics, null, "\t")}
+										</pre>
 									</div>
-								)}
+								</>
+								: <p>{t("ADOPTER_REGISTRATION.MODAL.SUMMARY_STATE.NO_STATS_HEADER")}</p>
+								}
+							</div>
+						</div>
+					)}
 
-								{/* back, delete or cancel button depending on state */}
-								<div className="pull-left">
-									{states[state].buttons.back && (
+					{/* navigation buttons depending on state of modal */}
+					<footer>
+						{states[state].buttons.submit && (
+							<div className="pull-right">
+								{/* submit of form content */}
+								{state === "summary" ?
 										<button
-											className="cancel"
+										onClick={() => formik.handleSubmit()}
+										className={cn("submit")}
+									>
+										{t(states[state].buttons.submitButtonText)}
+									</button>
+								: state === "form" ?
+									<button
+										disabled={
+											!(formik.isValid && formik.values.agreedToPolicy)
+										}
+										onClick={() => onClickContinue()}
+										className={cn("submit", {
+											active:
+												formik.isValid && formik.values.agreedToPolicy,
+											inactive: !(
+												formik.isValid && formik.values.agreedToPolicy
+											),
+										})}
+									>
+										{t(states[state].buttons.submitButtonText)}
+									</button>
+								:
+									// continue button or confirm button (depending on state)
+									<button
+										className="continue-registration"
+										onClick={() => onClickContinue()}
+									>
+										{t(states[state].buttons.submitButtonText)}
+									</button>
+								}
+							</div>
+						)}
+
+						{/* back, delete or cancel button depending on state */}
+						<div className="pull-left">
+							{states[state].buttons.back && (
+								<button
+									className="cancel"
 // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
-											onClick={() => setState(states[state].nextState[5])}
-										>
-											{t("ADOPTER_REGISTRATION.MODAL.BACK")}
-										</button>
-									)}
-									{state === "form" && formik.values.registered && (
-										<button
-											className="danger"
-											onClick={() => setState(states[state].nextState[4] as keyof typeof states)}
-										>
-											{t("WIZARD.DELETE")}
-										</button>
-									)}
-									{states[state].buttons.skip && (
-										<button
-											className="cancel"
+									onClick={() => setState(states[state].nextState[5])}
+								>
+									{t("ADOPTER_REGISTRATION.MODAL.BACK")}
+								</button>
+							)}
+							{state === "form" && formik.values.registered && (
+								<button
+									className="danger"
+									onClick={() => setState(states[state].nextState[4] as keyof typeof states)}
+								>
+									{t("WIZARD.DELETE")}
+								</button>
+							)}
+							{states[state].buttons.skip && (
+								<button
+									className="cancel"
 // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
-											onClick={() => setState(states[state].nextState[2])}
-										>
-											{t("ADOPTER_REGISTRATION.MODAL.SKIP")}
-										</button>
-									)}
-								</div>
-							</footer>
-						</>
-					)}
-				</Formik>
-			</section>
+									onClick={() => setState(states[state].nextState[2])}
+								>
+									{t("ADOPTER_REGISTRATION.MODAL.SKIP")}
+								</button>
+							)}
+						</div>
+					</footer>
+				</>
+			)}
+		</Formik>
 		</>
-	);
-};
+	)
+}
 
 export default RegistrationModal;
diff --git a/src/components/shared/Table.tsx b/src/components/shared/Table.tsx
index 91280305c9..46961b34ea 100644
--- a/src/components/shared/Table.tsx
+++ b/src/components/shared/Table.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import {
@@ -35,6 +35,7 @@ import sortDownIcon from "../../img/tbl-sort-down.png";
 import Notifications from "./Notifications";
 import { useAppDispatch, useAppSelector } from "../../store";
 import { TableColumn } from "../../configs/tableConfigs/aclsTableConfig";
+import { ModalHandle } from "./modals/Modal";
 
 const SortIcon = styled.i`
 	float: right;
@@ -101,7 +102,7 @@ const Table = ({
 
 	// State of dropdown menu
 	const [showPageSizes, setShowPageSizes] = useState(false);
-	const [displayEditTableViewModal, setEditTableViewModal] = useState(false);
+	const editTableViewModalRef = useRef<ModalHandle>(null);
 
 	useEffect(() => {
 		// Function for handling clicks outside of an open dropdown menu
@@ -154,11 +155,11 @@ const Table = ({
 	};
 
 	const showEditTableViewModal = async () => {
-		setEditTableViewModal(true);
+		editTableViewModalRef.current?.open()
 	};
 
 	const hideEditTableViewModal = () => {
-		setEditTableViewModal(false);
+		editTableViewModalRef.current?.close?.()
 	};
 
 	const tryToGetValueForKeyFromRowAsString = (row: Row, key: string) => {
@@ -189,11 +190,10 @@ const Table = ({
 			</div>
 
 			{/* Display modal for editing table view if table edit button is clicked */}
-			{ displayEditTableViewModal &&
-				<EditTableViewModal
-					handleClose={hideEditTableViewModal}
-				/>
-			}
+			<EditTableViewModal
+				close={hideEditTableViewModal}
+				modalRef={editTableViewModalRef}
+			/>
 
 			<div id="length-div" style={lengthDivStyle}></div>
 			<table className={"main-tbl highlight-hover"}>
diff --git a/src/components/shared/modals/Modal.tsx b/src/components/shared/modals/Modal.tsx
new file mode 100644
index 0000000000..d9a1c4aafc
--- /dev/null
+++ b/src/components/shared/modals/Modal.tsx
@@ -0,0 +1,86 @@
+import { forwardRef, PropsWithChildren, useImperativeHandle, useState } from "react";
+import ReactDOM from "react-dom";
+import { useHotkeys } from "react-hotkeys-hook";
+import { availableHotkeys } from "../../../configs/hotkeysConfig";
+import { useTranslation } from "react-i18next";
+// TODO: Implement focus trapping
+// Attempted to do that with focus-trap-react, but it would not focus
+// the correct element in e.g. the new event modal
+// import { FocusTrap } from "focus-trap-react";
+
+export type ModalProps = {
+	open?: boolean
+	closeCallback?: () => void
+	/** If true, the first element in the modal automatically be focused. If false,
+	 * no element is initially focused */
+	initialFocus?: false | string
+	header: string
+	classId: string
+	className?: string
+};
+
+export type ModalHandle = {
+	open: () => void;
+	close?: () => void;
+	isOpen?: () => boolean;
+};
+
+export const Modal = forwardRef<ModalHandle, PropsWithChildren<ModalProps>>(({
+	open = false,
+	closeCallback,
+	initialFocus,
+	header,
+	classId,
+	className,
+	children,
+}, ref) => {
+
+	const { t } = useTranslation();
+
+	const [isOpen, setOpen] = useState(open);
+
+	useImperativeHandle(ref, () => ({
+		isOpen: () => isOpen,
+		open: () => setOpen(true),
+		close: () => {
+			closeCallback !== undefined && closeCallback();
+			setOpen(false);
+		},
+	}), [closeCallback, isOpen]);
+
+	useHotkeys(
+		availableHotkeys.general.CLOSE_MODAL.sequence,
+		// TODO: Figure out what typescripts problem is
+		//@ts-ignore
+		() => ref?.current.close?.(),
+		{ description: t(availableHotkeys.general.CLOSE_MODAL.description) ?? undefined },
+		[ref],
+	);
+
+	return ReactDOM.createPortal(
+		isOpen &&
+			<div>
+				<div className="modal-animation modal-overlay" />
+				<section
+					id={classId}
+					className={className ? className : "modal wizard modal-animation"}
+				>
+					<header>
+						<button
+							className="button-like-anchor fa fa-times close-modal"
+							//@ts-ignore
+							onClick={() => ref?.current.close?.()}
+							tabIndex={0}
+						/>
+						<h2>
+							{header}
+						</h2>
+					</header>
+
+						{children}
+				</section>
+			</div>,
+		document.body,
+	);
+
+});
diff --git a/src/components/users/Acls.tsx b/src/components/users/Acls.tsx
index e018947ae0..9d0c3f8acb 100644
--- a/src/components/users/Acls.tsx
+++ b/src/components/users/Acls.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import MainNav from "../shared/MainNav";
 import { Link } from "react-router-dom";
@@ -27,6 +27,7 @@ import { useAppDispatch, useAppSelector } from "../../store";
 import { fetchAcls } from "../../slices/aclSlice";
 import { fetchUsers } from "../../slices/userSlice";
 import { fetchGroups } from "../../slices/groupSlice";
+import { ModalHandle } from "../shared/modals/Modal";
 
 /**
  * This component renders the table view of acls
@@ -34,7 +35,7 @@ import { fetchGroups } from "../../slices/groupSlice";
 const Acls: React.FC = () => {
 	const { t } = useTranslation();
 	const [displayNavigation, setNavigation] = useState(false);
-	const [displayNewAclModal, setNewAclModal] = useState(false);
+	const newAclModalRef = useRef<ModalHandle>(null);
 
 	const dispatch = useAppDispatch();
 	const acls = useAppSelector(state => getTotalAcls(state));
@@ -94,11 +95,11 @@ const Acls: React.FC = () => {
 	};
 
 	const showNewAclModal = () => {
-		setNewAclModal(true);
+		newAclModalRef.current?.open();
 	};
 
 	const hideNewAclModal = () => {
-		setNewAclModal(false);
+		newAclModalRef.current?.close?.();
 	};
 
 	return (
@@ -106,12 +107,11 @@ const Acls: React.FC = () => {
 			<Header />
 			<NavBar>
 				{/* Display modal for new acl if add acl button is clicked */}
-				{ displayNewAclModal &&
-					<NewResourceModal
-						handleClose={hideNewAclModal}
-						resource="acl"
-					/>
-				}
+				<NewResourceModal
+					handleClose={hideNewAclModal}
+					resource="acl"
+					modalRef={newAclModalRef}
+				/>
 
 				{/* Include Burger-button menu*/}
 				<MainNav isOpen={displayNavigation} toggleMenu={toggleNavigation} />
@@ -145,7 +145,7 @@ const Acls: React.FC = () => {
 						</Link>
 					)}
 				</nav>
-				
+
 				{/* Add acl button */}
 				<div className="btn-group">
 					{hasAccess("ROLE_UI_ACLS_CREATE", user) && (
diff --git a/src/components/users/Groups.tsx b/src/components/users/Groups.tsx
index b6e267309c..fdb8737ba1 100644
--- a/src/components/users/Groups.tsx
+++ b/src/components/users/Groups.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import MainNav from "../shared/MainNav";
 import { Link } from "react-router-dom";
@@ -27,6 +27,7 @@ import { fetchAcls } from "../../slices/aclSlice";
 import { useAppDispatch, useAppSelector } from "../../store";
 import { fetchUsers } from "../../slices/userSlice";
 import { fetchGroups } from "../../slices/groupSlice";
+import { ModalHandle } from "../shared/modals/Modal";
 
 /**
  * This component renders the table view of groups
@@ -35,7 +36,7 @@ const Groups = () => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
 	const [displayNavigation, setNavigation] = useState(false);
-	const [displayNewGroupModal, setNewGroupModal] = useState(false);
+	const newGroupModalRef = useRef<ModalHandle>(null);
 
 	const user = useAppSelector(state => getUserInformation(state));
 	const groups = useAppSelector(state => getTotalGroups(state));
@@ -94,11 +95,11 @@ const Groups = () => {
 	};
 
 	const showNewGroupModal = () => {
-		setNewGroupModal(true);
+		newGroupModalRef.current?.open();
 	};
 
 	const hideNewGroupModal = () => {
-		setNewGroupModal(false);
+		newGroupModalRef.current?.close?.();
 	};
 
 	return (
@@ -106,12 +107,11 @@ const Groups = () => {
 			<Header />
 			<NavBar>
 				{/* Display modal for new acl if add acl button is clicked */}
-				{ displayNewGroupModal &&
-					<NewResourceModal
-						handleClose={hideNewGroupModal}
-						resource="group"
-					/>
-				}
+				<NewResourceModal
+					handleClose={hideNewGroupModal}
+					resource="group"
+					modalRef={newGroupModalRef}
+				/>
 
 				{/* Include Burger-button menu*/}
 				<MainNav isOpen={displayNavigation} toggleMenu={toggleNavigation} />
diff --git a/src/components/users/Users.tsx b/src/components/users/Users.tsx
index f3c1f8ff1e..ff3708a2d5 100644
--- a/src/components/users/Users.tsx
+++ b/src/components/users/Users.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import cn from "classnames";
@@ -27,6 +27,7 @@ import { fetchAcls } from "../../slices/aclSlice";
 import { useAppDispatch, useAppSelector } from "../../store";
 import { fetchUsers } from "../../slices/userSlice";
 import { fetchGroups } from "../../slices/groupSlice";
+import { ModalHandle } from "../shared/modals/Modal";
 
 /**
  * This component renders the table view of users
@@ -35,7 +36,7 @@ const Users: React.FC = () => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
 	const [displayNavigation, setNavigation] = useState(false);
-	const [displayNewUserModal, setNewUserModal] = useState(false);
+	const newUserModalRef = useRef<ModalHandle>(null);
 
   const users = useAppSelector(state => getTotalUsers(state));
   const user = useAppSelector(state => getUserInformation(state));
@@ -94,11 +95,11 @@ const Users: React.FC = () => {
 	};
 
 	const showNewUserModal = () => {
-		setNewUserModal(true);
+		newUserModalRef.current?.open();
 	};
 
 	const hideNewUserModal = () => {
-		setNewUserModal(false);
+		newUserModalRef.current?.close?.();
 	};
 
 	return (
@@ -106,12 +107,11 @@ const Users: React.FC = () => {
 			<Header />
 			<NavBar>
 				{/* Display modal for new acl if add acl button is clicked */}
-				{ displayNewUserModal &&
-					<NewResourceModal
-						handleClose={hideNewUserModal}
-						resource="user"
-					/>
-				}
+				<NewResourceModal
+					handleClose={hideNewUserModal}
+					resource="user"
+					modalRef={newUserModalRef}
+				/>
 
 				{/* Include Burger-button menu*/}
 				<MainNav isOpen={displayNavigation} toggleMenu={toggleNavigation} />
diff --git a/src/components/users/partials/AclsActionsCell.tsx b/src/components/users/partials/AclsActionsCell.tsx
index 1fa2b0dabd..a731e985a6 100644
--- a/src/components/users/partials/AclsActionsCell.tsx
+++ b/src/components/users/partials/AclsActionsCell.tsx
@@ -1,13 +1,14 @@
-import React, { useState } from "react";
+import React, { useRef } from "react";
 import { useTranslation } from "react-i18next";
 import ConfirmModal from "../../shared/ConfirmModal";
 import { AclResult, deleteAcl } from "../../../slices/aclSlice";
-import AclDetailsModal from "./modal/AclDetailsModal";
 import { getUserInformation } from "../../../selectors/userInfoSelectors";
 import { hasAccess } from "../../../utils/utils";
 import { useAppDispatch, useAppSelector } from "../../../store";
 import { fetchAclDetails } from "../../../slices/aclDetailsSlice";
 import { Tooltip } from "../../shared/Tooltip";
+import { Modal, ModalHandle } from "../../shared/modals/Modal";
+import AclDetails from "./modal/AclDetails";
 
 /**
  * This component renders the action cells of acls in the table view
@@ -20,13 +21,13 @@ const AclsActionsCell = ({
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
 
-	const [displayDeleteConfirmation, setDeleteConfirmation] = useState(false);
-	const [displayAclDetails, setAclDetails] = useState(false);
+	const deleteConfirmationModalRef = useRef<ModalHandle>(null);
+	const modalRef = useRef<ModalHandle>(null);
 
 	const user = useAppSelector(state => getUserInformation(state));
 
 	const hideDeleteConfirmation = () => {
-		setDeleteConfirmation(false);
+		deleteConfirmationModalRef.current?.close?.();
 	};
 
 	const deletingAcl = (id: number) => {
@@ -34,13 +35,13 @@ const AclsActionsCell = ({
 	};
 
 	const hideAclDetails = () => {
-		setAclDetails(false);
+		modalRef.current?.close?.()
 	};
 
 	const showAclDetails = async () => {
 		await dispatch(fetchAclDetails(row.id));
 
-		setAclDetails(true);
+		modalRef.current?.open()
 	};
 
 	return (
@@ -55,30 +56,35 @@ const AclsActionsCell = ({
 				</Tooltip>
 			)}
 
-			{displayAclDetails && (
-				<AclDetailsModal close={hideAclDetails} aclName={row.name} />
-			)}
+			{/* ACL details modal */}
+			<Modal
+				header={t("USERS.ACLS.DETAILS.HEADER", { name: row.name })}
+				classId="acl-details-modal"
+				ref={modalRef}
+			>
+				{/* component that manages tabs of acl details modal*/}
+				<AclDetails close={hideAclDetails} />
+			</Modal>
 
 			{/* delete ACL */}
 			{hasAccess("ROLE_UI_ACLS_DELETE", user) && (
 				<Tooltip title={t("USERS.ACLS.TABLE.TOOLTIP.DETAILS")}>
 					<button
-						onClick={() => setDeleteConfirmation(true)}
+						onClick={() => deleteConfirmationModalRef.current?.open()}
 						className="button-like-anchor remove"
 					/>
 				</Tooltip>
 			)}
 
 			{/* Confirmation for deleting an ACL */}
-			{displayDeleteConfirmation && (
-				<ConfirmModal
-					close={hideDeleteConfirmation}
-					resourceName={row.name}
-					resourceId={row.id}
-					resourceType="ACL"
-					deleteMethod={deletingAcl}
-				/>
-			)}
+			<ConfirmModal
+				close={hideDeleteConfirmation}
+				resourceName={row.name}
+				resourceId={row.id}
+				resourceType="ACL"
+				deleteMethod={deletingAcl}
+				modalRef={deleteConfirmationModalRef}
+			/>
 		</>
 	);
 };
diff --git a/src/components/users/partials/GroupsActionsCell.tsx b/src/components/users/partials/GroupsActionsCell.tsx
index 727890b676..6932ddb78b 100644
--- a/src/components/users/partials/GroupsActionsCell.tsx
+++ b/src/components/users/partials/GroupsActionsCell.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useRef } from "react";
 import { useTranslation } from "react-i18next";
 import ConfirmModal from "../../shared/ConfirmModal";
 import GroupDetailsModal from "./modal/GroupDetailsModal";
@@ -8,6 +8,7 @@ import { useAppDispatch, useAppSelector  } from "../../../store";
 import { Group, deleteGroup } from "../../../slices/groupSlice";
 import { fetchGroupDetails } from "../../../slices/groupDetailsSlice";
 import { Tooltip } from "../../shared/Tooltip";
+import { ModalHandle } from "../../shared/modals/Modal";
 
 /**
  * This component renders the action cells of groups in the table view
@@ -20,13 +21,13 @@ const GroupsActionsCell = ({
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
 
-	const [displayDeleteConfirmation, setDeleteConfirmation] = useState(false);
-	const [displayGroupDetails, setGroupDetails] = useState(false);
+	const deleteConfirmationModalRef = useRef<ModalHandle>(null);
+	const detailsModalRef = useRef<ModalHandle>(null);
 
 	const user = useAppSelector(state => getUserInformation(state));
 
 	const hideDeleteConfirmation = () => {
-		setDeleteConfirmation(false);
+		deleteConfirmationModalRef.current?.close?.();
 	};
 
 	const deletingGroup = (id: string) => {
@@ -34,13 +35,13 @@ const GroupsActionsCell = ({
 	};
 
 	const hideGroupDetails = () => {
-		setGroupDetails(false);
+		detailsModalRef.current?.close?.();
 	};
 
 	const showGroupDetails = async () => {
 		await dispatch(fetchGroupDetails(row.id));
 
-		setGroupDetails(true);
+		detailsModalRef.current?.open();
 	};
 
 	return (
@@ -56,30 +57,31 @@ const GroupsActionsCell = ({
 			)}
 
 			{/*modal displaying details about group*/}
-			{displayGroupDetails && (
-				<GroupDetailsModal close={hideGroupDetails} groupName={row.name} />
-			)}
+			<GroupDetailsModal
+				close={hideGroupDetails}
+				groupName={row.name}
+				modalRef={detailsModalRef}
+			/>
 
 			{/* delete group */}
 			{hasAccess("ROLE_UI_GROUPS_DELETE", user) && (
 				<Tooltip title={t("USERS.GROUPS.TABLE.TOOLTIP.DETAILS")}>
 					<button
-						onClick={() => setDeleteConfirmation(true)}
+						onClick={() => deleteConfirmationModalRef.current?.open()}
 						className="button-like-anchor remove"
 					/>
 				</Tooltip>
 			)}
 
 			{/*Confirmation for deleting a group*/}
-			{displayDeleteConfirmation && (
-				<ConfirmModal
-					close={hideDeleteConfirmation}
-					resourceId={row.id}
-					resourceName={row.name}
-					deleteMethod={deletingGroup}
-					resourceType="GROUP"
-				/>
-			)}
+			<ConfirmModal
+				close={hideDeleteConfirmation}
+				resourceId={row.id}
+				resourceName={row.name}
+				deleteMethod={deletingGroup}
+				resourceType="GROUP"
+				modalRef={deleteConfirmationModalRef}
+			/>
 		</>
 	);
 };
diff --git a/src/components/users/partials/UsersActionsCell.tsx b/src/components/users/partials/UsersActionsCell.tsx
index 3b53b605fa..6dcb9a9611 100644
--- a/src/components/users/partials/UsersActionsCell.tsx
+++ b/src/components/users/partials/UsersActionsCell.tsx
@@ -1,13 +1,14 @@
-import React, { useState } from "react";
+import React, { useRef } from "react";
 import { useTranslation } from "react-i18next";
 import ConfirmModal from "../../shared/ConfirmModal";
-import UserDetailsModal from "./modal/UserDetailsModal";
 import { getUserInformation } from "../../../selectors/userInfoSelectors";
 import { hasAccess } from "../../../utils/utils";
 import { UserResult, deleteUser } from "../../../slices/userSlice";
 import { useAppDispatch, useAppSelector } from "../../../store";
 import { fetchUserDetails } from "../../../slices/userDetailsSlice";
 import { Tooltip } from "../../shared/Tooltip";
+import { Modal, ModalHandle } from "../../shared/modals/Modal";
+import UserDetails from "./modal/UserDetails";
 
 /**
  * This component renders the action cells of users in the table view
@@ -20,13 +21,13 @@ const UsersActionCell = ({
 	const { t } = useTranslation();
   const dispatch = useAppDispatch();
 
-	const [displayDeleteConfirmation, setDeleteConfirmation] = useState(false);
-	const [displayUserDetails, setUserDetails] = useState(false);
+	const deleteConfirmationModalRef = useRef<ModalHandle>(null);
+	const modalRef = useRef<ModalHandle>(null);
 
 	const user = useAppSelector(state => getUserInformation(state));
 
 	const hideDeleteConfirmation = () => {
-		setDeleteConfirmation(false);
+		deleteConfirmationModalRef.current?.close?.();
 	};
 
 	const deletingUser = (id: string) => {
@@ -36,11 +37,11 @@ const UsersActionCell = ({
 	const showUserDetails = async () => {
 		await dispatch(fetchUserDetails(row.username));
 
-		setUserDetails(true);
+		modalRef.current?.open()
 	};
 
 	const hideUserDetails = () => {
-		setUserDetails(false);
+		modalRef.current?.close?.()
 	};
 
 	return (
@@ -55,29 +56,34 @@ const UsersActionCell = ({
 				</Tooltip>
 			)}
 
-			{displayUserDetails && (
-				<UserDetailsModal close={hideUserDetails} username={row.username} />
-			)}
+			{/* user details modal */}
+			<Modal
+				header={t("USERS.USERS.DETAILS.EDITCAPTION", { username: row.username })}
+				classId="user-details-modal"
+				ref={modalRef}
+			>
+				{/* component that manages tabs of user details modal*/}
+				<UserDetails close={hideUserDetails} />
+			</Modal>
 
 			{(row.manageable || (row.provider !== "opencast" && row.provider !== "system"))
 				&& hasAccess("ROLE_UI_USERS_DELETE", user) && <>
 					<Tooltip title={t("USERS.USERS.TABLE.TOOLTIP.DETAILS")}>
 						<button
-							onClick={() => setDeleteConfirmation(true)}
+							onClick={() => deleteConfirmationModalRef.current?.open()}
 							className="button-like-anchor remove"
 						/>
 					</Tooltip>
 
 					{/* Confirmation for deleting a user */}
-					{displayDeleteConfirmation && (
-						<ConfirmModal
-							close={hideDeleteConfirmation}
-							resourceName={row.name}
-							resourceId={row.username}
-							resourceType="USER"
-							deleteMethod={deletingUser}
-						/>
-					)}
+					<ConfirmModal
+						close={hideDeleteConfirmation}
+						resourceName={row.name}
+						resourceId={row.username}
+						resourceType="USER"
+						deleteMethod={deletingUser}
+						modalRef={deleteConfirmationModalRef}
+					/>
 				</>
 			}
 		</>
diff --git a/src/components/users/partials/modal/AclDetailsModal.tsx b/src/components/users/partials/modal/AclDetailsModal.tsx
deleted file mode 100644
index 98bb481d11..0000000000
--- a/src/components/users/partials/modal/AclDetailsModal.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-import AclDetails from "./AclDetails";
-import { useHotkeys } from "react-hotkeys-hook";
-import { availableHotkeys } from "../../../../configs/hotkeysConfig";
-
-/**
- * This component renders the modal for displaying acl details
- */
-const AclDetailsModal = ({
-	close,
-	aclName,
-}: {
-	close: () => void,
-	aclName: string,
-}) => {
-	const { t } = useTranslation();
-
-	useHotkeys(
-		availableHotkeys.general.CLOSE_MODAL.sequence,
-		() => close(),
-		{ description: t(availableHotkeys.general.CLOSE_MODAL.description) ?? undefined },
-		[close],
-  	);
-
-	const handleClose = () => {
-		close();
-	};
-
-	const modalStyle = {
-		fontSize: "14px",
-		color: "#666666",
-	};
-
-	return (
-		// todo: add hotkeys
-		<>
-			<div className="modal-animation modal-overlay" />
-			<section
-				className="modal wizard modal-animation"
-				id="acl-details-modal"
-				style={modalStyle}
-			>
-				<header>
-					<button
-						className="button-like-anchor fa fa-times close-modal"
-						onClick={() => handleClose()}
-					/>
-					<h2>{t("USERS.ACLS.DETAILS.HEADER", { name: aclName })}</h2>
-				</header>
-
-				{/* component that manages tabs of acl details modal*/}
-				<AclDetails close={close} />
-			</section>
-		</>
-	);
-};
-
-export default AclDetailsModal;
diff --git a/src/components/users/partials/modal/GroupDetailsModal.tsx b/src/components/users/partials/modal/GroupDetailsModal.tsx
index 42db51ebd4..8f55f27e07 100644
--- a/src/components/users/partials/modal/GroupDetailsModal.tsx
+++ b/src/components/users/partials/modal/GroupDetailsModal.tsx
@@ -1,8 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import GroupDetails from "./GroupDetails";
-import { useHotkeys } from "react-hotkeys-hook";
-import { availableHotkeys } from "../../../../configs/hotkeysConfig";
+import { Modal, ModalHandle } from "../../../shared/modals/Modal";
 
 /**
  * This component renders the modal for displaying group details
@@ -10,49 +9,24 @@ import { availableHotkeys } from "../../../../configs/hotkeysConfig";
 const GroupDetailsModal = ({
 	close,
 	groupName,
+	modalRef,
 }: {
 	close: () => void,
 	groupName: string,
+	modalRef: React.RefObject<ModalHandle>
 }) => {
 	const { t } = useTranslation();
 
-	useHotkeys(
-		availableHotkeys.general.CLOSE_MODAL.sequence,
-		() => close(),
-		{ description: t(availableHotkeys.general.CLOSE_MODAL.description) ?? undefined },
-		[close],
-  	);
-
-	const handleClose = () => {
-		close();
-	};
-
-	const modalStyle = {
-		fontSize: "14px",
-		color: "#666666",
-	};
 
 	return (
-		// todo: add hotkeys
-		<>
-			<div className="modal-animation modal-overlay" />
-			<section
-				id="group-modal"
-				className="modal wizard modal-animation"
-				style={modalStyle}
-			>
-				<header>
-					<button
-						className="button-like-anchor fa fa-times close-modal"
-						onClick={() => handleClose()}
-					/>
-					<h2>{t("USERS.GROUPS.DETAILS.EDITCAPTION", { name: groupName })}</h2>
-				</header>
-
-				{/* component that manages tabs of group details modal*/}
-				<GroupDetails close={close} />
-			</section>
-		</>
+		<Modal
+			header={t("USERS.GROUPS.DETAILS.EDITCAPTION", { name: groupName })}
+			classId="group-modal"
+			ref={modalRef}
+		>
+			{/* component that manages tabs of group details modal*/}
+			<GroupDetails close={close} />
+		</Modal>
 	);
 };
 
diff --git a/src/components/users/partials/modal/UserDetailsModal.tsx b/src/components/users/partials/modal/UserDetailsModal.tsx
deleted file mode 100644
index e095bf3625..0000000000
--- a/src/components/users/partials/modal/UserDetailsModal.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-import UserDetails from "./UserDetails";
-import { useHotkeys } from "react-hotkeys-hook";
-import { availableHotkeys } from "../../../../configs/hotkeysConfig";
-
-/**
- * This component renders the modal for displaying user details
- */
-const UserDetailsModal = ({
-	close,
-	username,
-}: {
-	close: () => void,
-	username: string,
-}) => {
-	const { t } = useTranslation();
-
-	useHotkeys(
-		availableHotkeys.general.CLOSE_MODAL.sequence,
-		() => close(),
-		{ description: t(availableHotkeys.general.CLOSE_MODAL.description) ?? undefined },
-		[close],
-  	);
-
-	const handleClose = () => {
-		close();
-	};
-
-	const modalStyle = {
-		fontSize: "14px",
-	};
-
-	return (
-		// todo: add hotkeys
-		<>
-			<div className="modal-animation modal-overlay" />
-			<section
-				id="user-details-modal"
-				className="modal wizard modal-animation"
-				style={modalStyle}
-			>
-				<header>
-					<button
-						className="button-like-anchor fa fa-times close-modal"
-						onClick={() => handleClose()}
-					/>
-					<h2>
-						{t("USERS.USERS.DETAILS.EDITCAPTION", { username: username })}
-					</h2>
-				</header>
-
-				{/* component that manages tabs of user details modal*/}
-				<UserDetails close={close} />
-			</section>
-		</>
-	);
-};
-
-export default UserDetailsModal;