diff --git a/src/utils/ModalPortal.tsx b/src/utils/ModalPortal.tsx
new file mode 100644
index 0000000..f7290da
--- /dev/null
+++ b/src/utils/ModalPortal.tsx
@@ -0,0 +1,18 @@
+"use client";
+import React, { ReactNode, useEffect, useState } from "react";
+import ReactDOM from "react-dom";
+
+const ModalPortal: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [container, setContainer] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    const el = document.getElementById("modal");
+    setContainer(el);
+  }, []);
+
+  if (!container) return null;
+
+  return ReactDOM.createPortal(children, container);
+};
+
+export default ModalPortal;