diff --git a/frontend/src/components/ui/Modal.tsx b/frontend/src/components/ui/Modal.tsx
index 6849390..e3e29c9 100644
--- a/frontend/src/components/ui/Modal.tsx
+++ b/frontend/src/components/ui/Modal.tsx
@@ -1,5 +1,6 @@
 import { XCircleIcon } from "@phosphor-icons/react";
 import type { ReactNode } from "react";
+import { createPortal } from "react-dom";
 
 interface ModalProps {
   isOpen: boolean;
@@ -15,13 +16,15 @@ export function Modal({
   "data-testid": testId,
 }: ModalProps) {
   if (!isOpen) return null;
-
-  return (
+  // render the modal top of all elements and position them to document viewport (/ the main wrapper).
+  // NOTE: this is recommended approach for modals as it shouldn't be bound to the parent box.
+  const mainContainer = document.querySelector("main");
+  return createPortal(
     <div
       data-testid={testId}
       className="modal modal-open modal-middle backdrop-blur-md before:absolute before:top-0 before:left-0 before:w-full before:h-full before:content-[''] before:opacity-[0.03] before:z-10 before:pointer-events-none before:bg-[url('assets/textures/noise.gif')]"
     >
-      <div className="modal-box relative bg-base-100/60 flex flex-col items-center text-center gap-6">
+      <div className="modal-box relative bg-base-100/60 flex flex-col items-center text-center gap-6 max-w-screen">
         {onClose && (
           <button
             type="button"
@@ -35,6 +38,7 @@ export function Modal({
         )}
         {children}
       </div>
-    </div>
+    </div>,
+    mainContainer,
   );
 }