diff --git a/frontend/src/components/ModalWrapper/index.jsx b/frontend/src/components/ModalWrapper/index.jsx
index 37041f63..bd3995ce 100644
--- a/frontend/src/components/ModalWrapper/index.jsx
+++ b/frontend/src/components/ModalWrapper/index.jsx
@@ -1,9 +1,12 @@
+import { createPortal } from "react-dom";
+
 export default function ModalWrapper({ children, isOpen }) {
   if (!isOpen) return null;
 
-  return (
+  return createPortal(
     <div className="bg-black/60 backdrop-blur-sm fixed top-0 left-0 outline-none w-screen h-screen flex items-center justify-center z-30">
       {children}
-    </div>
+    </div>,
+    document.getElementById("root")
   );
 }