diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 9fcea9c..a7c5582 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -63,7 +63,13 @@ function Header({ loggedIn = false, ...props }) {
         </HeaderMenus>
       </HeaderCompContent>
 
-      <TheModal openModal={openModal} setOpenModal={setOpenModal}>
+      <TheModal
+        openModal={openModal}
+        setOpenModal={setOpenModal}
+        style={{
+          color: "white",
+        }}
+      >
         <HeaderModalLoginText.logo>
           <img src={headerLogo} />
         </HeaderModalLoginText.logo>
diff --git a/src/components/TheModal.jsx b/src/components/TheModal.jsx
index a91d475..e7ce7e2 100644
--- a/src/components/TheModal.jsx
+++ b/src/components/TheModal.jsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
+import ReactDOM from "react-dom";
 import styled from "styled-components";
 
 function TheModal({
@@ -8,7 +9,7 @@ function TheModal({
   style,
   backdropStyle,
 }) {
-  return (
+  return ReactDOM.createPortal(
     <HeaderModal className={openModal}>
       <HeaderModalBackdrop
         className={openModal}
@@ -18,7 +19,8 @@ function TheModal({
       <HeaderModalContent className={openModal} style={style}>
         {ModalContent}
       </HeaderModalContent>
-    </HeaderModal>
+    </HeaderModal>,
+    document.body
   );
 }