diff --git a/src/components/configuration/partials/wizard/ThemeDetailsModal.tsx b/src/components/configuration/partials/wizard/ThemeDetailsModal.tsx
index db8d9ca570..2b0e6f1178 100644
--- a/src/components/configuration/partials/wizard/ThemeDetailsModal.tsx
+++ b/src/components/configuration/partials/wizard/ThemeDetailsModal.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import ThemeDetails from "./ThemeDetails";
+import { focusTrap } from "../../../../utils/modalUtils";
 
 /**
  * This component renders the modal for displaying theme details
@@ -12,6 +13,12 @@ const ThemeDetailsModal = ({
 }: any) => {
 	const { t } = useTranslation();
 
+	const themeDetailsModalRef = React.useRef(null);
+	const [focusEneabled, setFocusEneabled] = React.useState(false);
+	React.useEffect(() => {
+		focusTrap(themeDetailsModalRef,focusEneabled, setFocusEneabled);
+	});
+
 	const close = () => {
 		handleClose();
 	};
@@ -22,6 +29,7 @@ const ThemeDetailsModal = ({
 			<section
 				id="theme-details-modal"
 				className="modal wizard modal-animation"
+				ref={themeDetailsModalRef}
 			>
 				<header>
 					<button className="button-like-anchor fa fa-times close-modal" onClick={() => close()} />
diff --git a/src/components/events/partials/modals/DeleteEventsModal.tsx b/src/components/events/partials/modals/DeleteEventsModal.tsx
index 968fffe11e..c382cda8c2 100644
--- a/src/components/events/partials/modals/DeleteEventsModal.tsx
+++ b/src/components/events/partials/modals/DeleteEventsModal.tsx
@@ -7,6 +7,7 @@ import { useAppDispatch } from "../../../../store";
 import { deleteMultipleEvent } from "../../../../slices/eventSlice";
 import { useHotkeys } from "react-hotkeys-hook";
 import { availableHotkeys } from "../../../../configs/hotkeysConfig";
+import { focusTrap } from "../../../../utils/modalUtils";
 
 /**
  * This component manages the delete bulk action
@@ -21,6 +22,12 @@ const DeleteEventsModal = ({
 	const [allChecked, setAllChecked] = useState(true);
 	const [selectedEvents, setSelectedEvents] = useState(selectedRows);
 
+	const deleteEventsModalRef = React.useRef(null);
+	const [focusEneabled, setFocusEneabled] = React.useState(false);
+	React.useEffect(() => {
+		focusTrap(deleteEventsModalRef, focusEneabled, setFocusEneabled);
+	});
+
 	useHotkeys(
 		availableHotkeys.general.CLOSE_MODAL.sequence,
 		() => close(),
@@ -81,6 +88,7 @@ const DeleteEventsModal = ({
 				className="modal active modal-open"
 				id="delete-events-status-modal"
 				style={{ display: "block" }}
+				ref={deleteEventsModalRef}
 			>
 				<header>
 					<button onClick={close} className="button-like-anchor fa fa-times close-modal" />
diff --git a/src/components/events/partials/modals/DeleteSeriesModal.tsx b/src/components/events/partials/modals/DeleteSeriesModal.tsx
index aabd05547d..b2cb98996f 100644
--- a/src/components/events/partials/modals/DeleteSeriesModal.tsx
+++ b/src/components/events/partials/modals/DeleteSeriesModal.tsx
@@ -11,6 +11,7 @@ import {
 } from "../../../../slices/seriesSlice";
 import { useHotkeys } from "react-hotkeys-hook";
 import { availableHotkeys } from "../../../../configs/hotkeysConfig";
+import { focusTrap } from "../../../../utils/modalUtils";
 
 /**
  * This component manges the delete series bulk action
@@ -24,6 +25,12 @@ const DeleteSeriesModal = ({ close, selectedRows }) => {
 	const [selectedSeries, setSelectedSeries] = useState(selectedRows);
 	const [deleteWithSeriesAllowed, setDeleteWithSeriesAllowed] = useState(false);
 
+	const deleteSeriesModalRef = React.useRef(null);
+	const [focusEneabled, setFocusEneabled] = React.useState(false);
+	React.useEffect(() => {
+		focusTrap(deleteSeriesModalRef, focusEneabled, setFocusEneabled);
+	});
+	
 	useHotkeys(
 		availableHotkeys.general.CLOSE_MODAL.sequence,
 		() => close(),
@@ -127,6 +134,7 @@ const DeleteSeriesModal = ({ close, selectedRows }) => {
 				className="modal active modal-open"
 				id="delete-series-status-modal"
 				style={{ display: "block" }}
+				ref={deleteSeriesModalRef}
 			>
 				<header>
 					<button onClick={() => close()} className="button-like-anchor fa fa-times close-modal" />
diff --git a/src/components/events/partials/modals/EditMetadataEventsModal.tsx b/src/components/events/partials/modals/EditMetadataEventsModal.tsx
index 006d5ba6e2..757327bb96 100644
--- a/src/components/events/partials/modals/EditMetadataEventsModal.tsx
+++ b/src/components/events/partials/modals/EditMetadataEventsModal.tsx
@@ -19,6 +19,7 @@ import {
 import { unwrapResult } from "@reduxjs/toolkit";
 import { useHotkeys } from "react-hotkeys-hook";
 import { availableHotkeys } from "../../../../configs/hotkeysConfig";
+import { focusTrap } from "../../../../utils/modalUtils";
 
 /**
  * This component manges the edit metadata bulk action
@@ -47,6 +48,12 @@ const EditMetadataEventsModal = ({
 	const [fetchedValues, setFetchedValues] = useState(null);
 
 	const user = useAppSelector(state => getUserInformation(state));
+	
+	const editMetadataEventsModalRef = React.useRef(null);
+	const [focusEneabled, setFocusEneabled] = React.useState(false);
+	React.useEffect(() => {
+		focusTrap(editMetadataEventsModalRef, focusEneabled, setFocusEneabled);
+	});
 
 	useHotkeys(
 		availableHotkeys.general.CLOSE_MODAL.sequence,
@@ -148,7 +155,7 @@ const EditMetadataEventsModal = ({
 	return (
 		<>
 			<div className="modal-animation modal-overlay" />
-			<section className="modal wizard modal-animation">
+			<section className="modal wizard modal-animation" ref={editMetadataEventsModalRef}>
 				<header>
 					<button className="button-like-anchor fa fa-times close-modal" onClick={() => close()} />
 					<h2>{t("BULK_ACTIONS.EDIT_EVENTS_METADATA.CAPTION")}</h2>
diff --git a/src/components/events/partials/modals/EditScheduledEventsModal.tsx b/src/components/events/partials/modals/EditScheduledEventsModal.tsx
index bd6117341d..f05b51fef3 100644
--- a/src/components/events/partials/modals/EditScheduledEventsModal.tsx
+++ b/src/components/events/partials/modals/EditScheduledEventsModal.tsx
@@ -22,6 +22,7 @@ import {
 import { fetchRecordings } from "../../../../slices/recordingSlice";
 import { useHotkeys } from "react-hotkeys-hook";
 import { availableHotkeys } from "../../../../configs/hotkeysConfig";
+import { focusTrap } from "../../../../utils/modalUtils";
 
 /**
  * This component manages the pages of the edit scheduled bulk action
@@ -56,6 +57,12 @@ const EditScheduledEventsModal = ({
 
 	const user = useAppSelector(state => getUserInformation(state));
 
+	const editScheduledEventsModalRef = React.useRef(null);
+	const [focusEneabled, setFocusEneabled] = React.useState(false);
+	React.useEffect(() => {
+		focusTrap(editScheduledEventsModalRef, focusEneabled, setFocusEneabled);
+	});
+
 	useHotkeys(
 		availableHotkeys.general.CLOSE_MODAL.sequence,
 		() => close(),
@@ -123,7 +130,7 @@ const EditScheduledEventsModal = ({
 	return (
 		<>
 			<div className="modal-animation modal-overlay" />
-			<section className="modal wizard modal-animation">
+			<section className="modal wizard modal-animation" ref={editScheduledEventsModalRef}>
 				<header>
 					<button className="button-like-anchor fa fa-times close-modal" onClick={() => close()} />
 					<h2>{t("BULK_ACTIONS.EDIT_EVENTS.CAPTION")}</h2>
diff --git a/src/components/events/partials/modals/EmbeddingCodeModal.tsx b/src/components/events/partials/modals/EmbeddingCodeModal.tsx
index 22d6977851..79212dd239 100644
--- a/src/components/events/partials/modals/EmbeddingCodeModal.tsx
+++ b/src/components/events/partials/modals/EmbeddingCodeModal.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import { getSourceURL } from "../../../../utils/embeddedCodeUtils";
 import { useHotkeys } from "react-hotkeys-hook";
 import { availableHotkeys } from "../../../../configs/hotkeysConfig";
+import { focusTrap } from "../../../../utils/modalUtils";
 
 /**
  * This component renders the embedding code modal
@@ -18,6 +19,12 @@ const EmbeddingCodeModal = ({
 	const [currentSize, setCurrentSize] = useState("0x0");
 	const [showCopySuccess, setCopySuccess] = useState(false);
 
+	const embeddingCodeModalRef = React.useRef(null);
+	const [focusEneabled, setFocusEneabled] = React.useState(false);
+	React.useEffect(() => {
+		focusTrap(embeddingCodeModalRef, focusEneabled, setFocusEneabled);
+	});
+
 	useHotkeys(
 		availableHotkeys.general.CLOSE_MODAL.sequence,
 		() => close(),
@@ -90,7 +97,7 @@ const EmbeddingCodeModal = ({
 	return (
 		<>
 			<div className="modal-animation modal-overlay" />
-			<section className="modal modal-animation" id="embedding-code">
+			<section className="modal modal-animation" id="embedding-code" ref={embeddingCodeModalRef}>
 				<header>
 					<button
 						className="button-like-anchor fa fa-times close-modal"
diff --git a/src/components/events/partials/modals/EventDetailsModal.tsx b/src/components/events/partials/modals/EventDetailsModal.tsx
index 8b72efacb0..dd33e1c235 100644
--- a/src/components/events/partials/modals/EventDetailsModal.tsx
+++ b/src/components/events/partials/modals/EventDetailsModal.tsx
@@ -5,6 +5,7 @@ import { useAppDispatch } from "../../../../store";
 import { removeNotificationWizardForm } from "../../../../slices/notificationSlice";
 import { useHotkeys } from "react-hotkeys-hook";
 import { availableHotkeys } from "../../../../configs/hotkeysConfig";
+import { focusTrap } from "../../../../utils/modalUtils";
 
 /**
  * This component renders the modal for displaying event details
@@ -39,6 +40,12 @@ const EventDetailsModal = ({
 		}
 	};
 
+	const eventDetailsModalRef = React.useRef(null);
+	const [focusEneabled, setFocusEneabled] = React.useState(false);
+	React.useEffect(() => {
+		focusTrap(eventDetailsModalRef, focusEneabled, setFocusEneabled);
+	});
+
 	useHotkeys(
 		availableHotkeys.general.CLOSE_MODAL.sequence,
 		() => close(),
@@ -53,8 +60,8 @@ const EventDetailsModal = ({
 				<div className="modal-animation modal-overlay" />
 				<section
 					id="event-details-modal"
-					tabIndex={tabIndex}
 					className="modal wizard modal-animation"
+					ref={eventDetailsModalRef}
 				>
 					<header>
 						<button className="button-like-anchor fa fa-times close-modal" onClick={() => close()} />
diff --git a/src/components/events/partials/modals/SeriesDetailsModal.tsx b/src/components/events/partials/modals/SeriesDetailsModal.tsx
index d855284e28..965cf32c7e 100644
--- a/src/components/events/partials/modals/SeriesDetailsModal.tsx
+++ b/src/components/events/partials/modals/SeriesDetailsModal.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import SeriesDetails from "./SeriesDetails";
 import { useHotkeys } from "react-hotkeys-hook";
 import { availableHotkeys } from "../../../../configs/hotkeysConfig";
+import { focusTrap } from "../../../../utils/modalUtils";
 
 /**
  * This component renders the modal for displaying series details
@@ -28,6 +29,12 @@ const SeriesDetailsModal = ({
 		}
 	};
 
+	const seriesDetailsModalRef = React.useRef(null);
+	const [focusEneabled, setFocusEneabled] = React.useState(false);
+	React.useEffect(() => {
+		focusTrap(seriesDetailsModalRef, focusEneabled, setFocusEneabled);
+	});
+
 	useHotkeys(
 		availableHotkeys.general.CLOSE_MODAL.sequence,
 		() => close(),
@@ -39,7 +46,7 @@ const SeriesDetailsModal = ({
 	return (
 		<>
 			<div className="modal-animation modal-overlay" />
-			<section className="modal modal-animation" id="series-details-modal">
+			<section className="modal modal-animation" id="series-details-modal" ref={seriesDetailsModalRef}>
 				<header>
 					<button className="button-like-anchor fa fa-times close-modal" onClick={() => close()} />
 					<h2>
diff --git a/src/components/events/partials/modals/StartTaskModal.tsx b/src/components/events/partials/modals/StartTaskModal.tsx
index fdc7c0e772..1573f9ff1d 100644
--- a/src/components/events/partials/modals/StartTaskModal.tsx
+++ b/src/components/events/partials/modals/StartTaskModal.tsx
@@ -12,6 +12,7 @@ import { usePageFunctions } from "../../../../hooks/wizardHooks";
 import { checkValidityStartTaskEventSelection } from "../../../../utils/bulkActionUtils";
 import { useHotkeys } from "react-hotkeys-hook";
 import { availableHotkeys } from "../../../../configs/hotkeysConfig";
+import { focusTrap } from "../../../../utils/modalUtils";
 
 /**
  * This component manages the pages of the task start bulk action
@@ -34,6 +35,12 @@ const StartTaskModal = ({
 		setPageCompleted,
 	} = usePageFunctions(0, initialValues);
 
+	const startTaskModalRef = React.useRef(null);
+	const [focusEneabled, setFocusEneabled] = React.useState(false);
+	React.useEffect(() => {
+		focusTrap(startTaskModalRef, focusEneabled, setFocusEneabled);
+	});
+	
 	useHotkeys(
 		availableHotkeys.general.CLOSE_MODAL.sequence,
 		() => close(),
@@ -85,7 +92,7 @@ const StartTaskModal = ({
 	return (
 		<>
 			<div className="modal-animation modal-overlay" />
-			<section className="modal wizard modal-animation">
+			<section className="modal wizard modal-animation" ref={startTaskModalRef}>
 				<header>
 					<button className="button-like-anchor fa fa-times close-modal" onClick={() => close()} />
 					<h2>{t("BULK_ACTIONS.SCHEDULE_TASK.CAPTION")}</h2>
diff --git a/src/components/recordings/partials/modal/RecordingDetailsModal.tsx b/src/components/recordings/partials/modal/RecordingDetailsModal.tsx
index c7dbdff7ce..23a5cf9a44 100644
--- a/src/components/recordings/partials/modal/RecordingDetailsModal.tsx
+++ b/src/components/recordings/partials/modal/RecordingDetailsModal.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import RecordingsDetails from "./RecordingsDetails";
 import { availableHotkeys } from "../../../../configs/hotkeysConfig";
 import { useHotkeys } from "react-hotkeys-hook";
+import { focusTrap } from "../../../../utils/modalUtils";
 
 /**
  * This component renders the modal for displaying recording details
@@ -13,6 +14,12 @@ const RecordingDetailsModal = ({
 }: any) => {
 	const { t } = useTranslation();
 
+	const recordingDetailsModalRef = React.useRef(null);
+	const [focusEneabled, setFocusEneabled] = React.useState(false);
+	React.useEffect(() => {
+		focusTrap(recordingDetailsModalRef, focusEneabled, setFocusEneabled);
+	});
+
 	useHotkeys(
 		availableHotkeys.general.CLOSE_MODAL.sequence,
 		() => close(),
@@ -31,6 +38,7 @@ const RecordingDetailsModal = ({
 			<section
 				id="capture-agent-details-modal"
 				className="modal wizard modal-animation"
+				ref={recordingDetailsModalRef}
 			>
 				<header>
 					<button
diff --git a/src/components/shared/ConfirmModal.tsx b/src/components/shared/ConfirmModal.tsx
index dcec0a3951..3dd0210bae 100644
--- a/src/components/shared/ConfirmModal.tsx
+++ b/src/components/shared/ConfirmModal.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { useTranslation } from "react-i18next";
 import { availableHotkeys } from "../../configs/hotkeysConfig";
+import { focusTrap } from "../../utils/modalUtils";
 
 const ConfirmModal = ({
 // @ts-expect-error TS(7031): Binding element 'close' implicitly has an 'any' ty... Remove this comment to see the full error message
@@ -21,6 +22,13 @@ const ConfirmModal = ({
 }) => {
 	const { t } = useTranslation();
 
+	const confirmModalRef = React.useRef(null);
+	const [focusEneabled, setFocusEneabled] = React.useState(false);
+	React.useEffect(() => {
+		focusTrap(confirmModalRef, focusEneabled, setFocusEneabled);
+	});
+
+
 	useHotkeys(
 		availableHotkeys.general.CLOSE_MODAL.sequence,
 		() => close(),
@@ -44,6 +52,7 @@ const ConfirmModal = ({
 				className="modal modal-animation"
 				id="confirm-modal"
 				style={{ fontSize: "14px" }}
+				ref={confirmModalRef}
 			>
 				<header>
 					<button
diff --git a/src/components/shared/EditTableViewModal.tsx b/src/components/shared/EditTableViewModal.tsx
index f11ac33303..5a9d58681d 100644
--- a/src/components/shared/EditTableViewModal.tsx
+++ b/src/components/shared/EditTableViewModal.tsx
@@ -11,6 +11,7 @@ import {
 import { DragDropContext, Droppable, OnDragEndResponder, Draggable as Draggablee } from "@hello-pangea/dnd";
 import { availableHotkeys } from "../../configs/hotkeysConfig";
 import { useHotkeys } from "react-hotkeys-hook";
+import { focusTrap } from "../../utils/modalUtils";
 
 /**
  * This component renders the modal for editing which columns are shown in the table
@@ -48,6 +49,12 @@ const EditTableViewModal = ({
 		}
 	}, [activeColumns, deactivatedColumns, isColsLoaded]);
 
+	const editTableViewModalRef = React.useRef(null);
+	const [focusEneabled, setFocusEneabled] = React.useState(false);
+	React.useEffect(() => {
+		focusTrap(editTableViewModalRef, focusEneabled, setFocusEneabled);
+	});
+
 	useHotkeys(
 		availableHotkeys.general.CLOSE_MODAL.sequence,
 		() => handleClose(),
@@ -109,6 +116,7 @@ const EditTableViewModal = ({
 					<section
 						className="modal active modal-animation"
 						id="edit-table-view-modal"
+						ref={editTableViewModalRef}
 					>
 						<header>
 							<button
diff --git a/src/components/shared/HotKeyCheatSheet.tsx b/src/components/shared/HotKeyCheatSheet.tsx
index fc3db4ef3c..6424ab2ea6 100644
--- a/src/components/shared/HotKeyCheatSheet.tsx
+++ b/src/components/shared/HotKeyCheatSheet.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import { availableHotkeys } from "../../configs/hotkeysConfig";
 import { useHotkeys, useHotkeysContext } from "react-hotkeys-hook";
 import { Hotkey } from "react-hotkeys-hook/dist/types";
+import { focusTrap } from "../../utils/modalUtils";
 
 /**
  * This component renders the hotkey cheat sheet showing all available hotkeys
@@ -14,6 +15,12 @@ const HotKeyCheatSheet: React.FC<{
 }) => {
 	const { t } = useTranslation();
 
+	const hotKeyCheatSheetRef = React.useRef(null);
+	const [focusEneabled, setFocusEneabled] = React.useState(false);
+	React.useEffect(() => {
+		focusTrap(hotKeyCheatSheetRef, focusEneabled, setFocusEneabled);
+	});
+
 	useHotkeys(
 		availableHotkeys.general.CLOSE_MODAL.sequence,
 		() => close(),
@@ -42,7 +49,7 @@ const HotKeyCheatSheet: React.FC<{
 	return (
 		<>
 			<div className="modal-animation modal-overlay" />
-			<div className="modal modal-animation">
+			<div className="modal modal-animation" ref={hotKeyCheatSheetRef}>
 				<header>
 					<button
 						className="button-like-anchor fa fa-times close-modal"
diff --git a/src/components/shared/NewResourceModal.tsx b/src/components/shared/NewResourceModal.tsx
index 42c2babe65..e974ab27ad 100644
--- a/src/components/shared/NewResourceModal.tsx
+++ b/src/components/shared/NewResourceModal.tsx
@@ -8,6 +8,7 @@ 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 { focusTrap } from "../../utils/modalUtils";
 
 /**
  * This component renders the modal for adding new resources
@@ -19,6 +20,12 @@ const NewResourceModal = ({
 }: any) => {
 	const { t } = useTranslation();
 
+	const newResourceModalRef = React.useRef(null);
+	const [focusEneabled, setFocusEneabled] = React.useState(false);
+	React.useEffect(() => {
+		focusTrap(newResourceModalRef, focusEneabled, setFocusEneabled);
+	});
+
 	useHotkeys(
 		availableHotkeys.general.CLOSE_MODAL.sequence,
 		() => handleClose(),
@@ -36,9 +43,9 @@ const NewResourceModal = ({
 			<>
 				<div className="modal-animation modal-overlay" />
 				<section
-					tabIndex={1}
 					className="modal wizard modal-animation"
 					id="add-event-modal"
+					ref={newResourceModalRef}
 				>
 					<header>
 						<button
diff --git a/src/components/users/partials/modal/AclDetailsModal.tsx b/src/components/users/partials/modal/AclDetailsModal.tsx
index 21cb21b7b0..febfa54b07 100644
--- a/src/components/users/partials/modal/AclDetailsModal.tsx
+++ b/src/components/users/partials/modal/AclDetailsModal.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import AclDetails from "./AclDetails";
 import { useHotkeys } from "react-hotkeys-hook";
 import { availableHotkeys } from "../../../../configs/hotkeysConfig";
+import { focusTrap } from "../../../../utils/modalUtils";
 
 /**
  * This component renders the modal for displaying acl details
@@ -13,6 +14,12 @@ const AclDetailsModal = ({
 }: any) => {
 	const { t } = useTranslation();
 
+	const aclDetailsModalRef = React.useRef(null);
+	const [focusEneabled, setFocusEneabled] = React.useState(false);
+	React.useEffect(() => {
+		focusTrap(aclDetailsModalRef, focusEneabled, setFocusEneabled);
+	});
+
 	useHotkeys(
 		availableHotkeys.general.CLOSE_MODAL.sequence,
 		() => close(),
@@ -37,6 +44,7 @@ const AclDetailsModal = ({
 				className="modal wizard modal-animation"
 				id="acl-details-modal"
 				style={modalStyle}
+				ref={aclDetailsModalRef}
 			>
 				<header>
 					<button
diff --git a/src/components/users/partials/modal/GroupDetailsModal.tsx b/src/components/users/partials/modal/GroupDetailsModal.tsx
index d8a88680bd..5edff533c6 100644
--- a/src/components/users/partials/modal/GroupDetailsModal.tsx
+++ b/src/components/users/partials/modal/GroupDetailsModal.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import GroupDetails from "./GroupDetails";
 import { useHotkeys } from "react-hotkeys-hook";
 import { availableHotkeys } from "../../../../configs/hotkeysConfig";
+import { focusTrap } from "../../../../utils/modalUtils";
 
 /**
  * This component renders the modal for displaying group details
@@ -12,6 +13,14 @@ const GroupDetailsModal = ({
     groupName
 }: any) => {
 	const { t } = useTranslation();
+	const closeButtonRef = React.useRef(null);
+	
+	const groupDetailsModalRef = React.useRef(null);
+
+	const [focusEneabled, setFocusEneabled] = React.useState(false);
+	React.useEffect(() => {
+		focusTrap(groupDetailsModalRef, focusEneabled, setFocusEneabled);
+	});
 
 	useHotkeys(
 		availableHotkeys.general.CLOSE_MODAL.sequence,
@@ -37,11 +46,13 @@ const GroupDetailsModal = ({
 				id="group-modal"
 				className="modal wizard modal-animation"
 				style={modalStyle}
+				ref={groupDetailsModalRef}
 			>
 				<header>
 					<button
 						className="button-like-anchor fa fa-times close-modal"
 						onClick={() => handleClose()}
+						ref={closeButtonRef}
 					/>
 					<h2>{t("USERS.GROUPS.DETAILS.EDITCAPTION", { name: groupName })}</h2>
 				</header>
diff --git a/src/components/users/partials/modal/UserDetailsModal.tsx b/src/components/users/partials/modal/UserDetailsModal.tsx
index 82529bcb48..e4a2f4fb21 100644
--- a/src/components/users/partials/modal/UserDetailsModal.tsx
+++ b/src/components/users/partials/modal/UserDetailsModal.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import UserDetails from "./UserDetails";
 import { useHotkeys } from "react-hotkeys-hook";
 import { availableHotkeys } from "../../../../configs/hotkeysConfig";
+import { focusTrap } from "../../../../utils/modalUtils";
 
 /**
  * This component renders the modal for displaying user details
@@ -13,12 +14,19 @@ const UserDetailsModal = ({
 }: any) => {
 	const { t } = useTranslation();
 
+	const userDetailsModalRef = React.useRef(null);
+	const [focusEneabled, setFocusEneabled] = React.useState(false);
+	React.useEffect(() => {
+		focusTrap(userDetailsModalRef, focusEneabled, setFocusEneabled);
+	});
+
 	useHotkeys(
 		availableHotkeys.general.CLOSE_MODAL.sequence,
 		() => close(),
 		{ description: t(availableHotkeys.general.CLOSE_MODAL.description) ?? undefined },
 		[close],
   	);
+	
 
 	const handleClose = () => {
 		close();
@@ -36,6 +44,7 @@ const UserDetailsModal = ({
 				id="user-details-modal"
 				className="modal wizard modal-animation"
 				style={modalStyle}
+				ref={userDetailsModalRef}
 			>
 				<header>
 					<button
diff --git a/src/components/users/partials/wizard/GroupMetadataPage.tsx b/src/components/users/partials/wizard/GroupMetadataPage.tsx
index 1b39edc10e..1efe6967f3 100644
--- a/src/components/users/partials/wizard/GroupMetadataPage.tsx
+++ b/src/components/users/partials/wizard/GroupMetadataPage.tsx
@@ -29,7 +29,6 @@ const GroupMetadataPage = <T,>({
 								<i className="required">*</i>
 							</label>
 							<Field
-								tabIndex={1}
 								type="text"
 								autoFocus={!isEdit}
 								placeholder={t("USERS.GROUPS.DETAILS.FORM.NAME")}
@@ -40,7 +39,6 @@ const GroupMetadataPage = <T,>({
 							<label>{t("USERS.GROUPS.DETAILS.FORM.DESCRIPTION")}</label>
 							<Field
 								as="textarea"
-								tabIndex={2}
 								placeholder={t("USERS.GROUPS.DETAILS.FORM.DESCRIPTION")}
 								name="description"
 							/>
diff --git a/src/utils/modalUtils.ts b/src/utils/modalUtils.ts
new file mode 100644
index 0000000000..69d7e6180f
--- /dev/null
+++ b/src/utils/modalUtils.ts
@@ -0,0 +1,37 @@
+
+export const focusTrap = (modalRef: any, focusEneabled: boolean, setFocusEneabled: Function) => {
+    const modalElement = modalRef.current as HTMLElement | null;
+    const closeButton = document.getElementsByClassName('close-modal')[0] as HTMLElement;
+    
+    if (modalElement) {
+        if (!focusEneabled && closeButton) {
+            setFocusEneabled(true);
+            closeButton.focus();
+        }
+        const focusableElements = modalElement.querySelectorAll(
+            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        const firstElement = focusableElements[0] as HTMLElement;
+        const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;
+        const handleTabKeyPress = (event: KeyboardEvent) => {
+            if (event.key === "Tab") {
+              if (event.shiftKey && document.activeElement === firstElement) {
+                event.preventDefault();
+                lastElement.focus();
+              } else if (
+                !event.shiftKey &&
+                document.activeElement === lastElement
+              ) {
+                event.preventDefault();
+                firstElement.focus();
+              }
+            }
+          };
+
+          modalElement.addEventListener("keydown", handleTabKeyPress);
+
+        return () => {
+            modalElement.removeEventListener("keydown", handleTabKeyPress);
+          };
+    }
+};
\ No newline at end of file