diff --git a/components/core/ModalPortal.js b/components/core/ModalPortal.js
new file mode 100644
index 00000000..399c8678
--- /dev/null
+++ b/components/core/ModalPortal.js
@@ -0,0 +1,14 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+export const ModalPortal = ({ children }) => {
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setMounted(true);
+
+    return () => setMounted(false);
+  }, []);
+
+  return mounted ? ReactDOM.createPortal(children, document.getElementById("modals_portal")) : null;
+};
diff --git a/pages/_document.js b/pages/_document.js
index 7638d279..831f796a 100644
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -15,6 +15,7 @@ class MyDocument extends Document {
            *   e.g. if the extension is installed on the user's browser, it will add 'isDownloaded' to className*/}
           <div id="browser_extension" />
           <Main />
+          <div id="modals_portal" />
           <NextScript />
         </body>
       </Html>