diff --git a/src/components/KlinicAuthForm.jsx b/src/components/AuthForm.jsx
similarity index 83%
rename from src/components/KlinicAuthForm.jsx
rename to src/components/AuthForm.jsx
index 476956f..2d47233 100644
--- a/src/components/KlinicAuthForm.jsx
+++ b/src/components/AuthForm.jsx
@@ -2,13 +2,8 @@ import {Input, Variant} from "./Input.jsx";
 import Button from "./Button.jsx";
 import PropTypes from "prop-types";
 
-const KlinicAuthForm = ({
-                          headerText,
-                          promptText,
-                          actionLink,
-                          actionLinkText,
-                          buttonText
-                        }) => {
+const AuthForm = ({ headerText, promptText, actionLink, actionLinkText, buttonText }) => {
+
   return (
       <div className={"flex flex-col items-center rounded-xl px-8 py-12"}>
         <div className={"flex flex-col items-center "}>
@@ -22,7 +17,7 @@ const KlinicAuthForm = ({
           </div>
         </div>
         <div className={"flex flex-col"}>
-          <form className={"w-[400px]"}
+          <form className={"w-[500px]"}
                 onSubmit={(e) => {
                   e.preventDefault();
                 }}>
@@ -53,7 +48,7 @@ const KlinicAuthForm = ({
   )
 }
 
-KlinicAuthForm.propTypes = {
+AuthForm.propTypes = {
   headerText: PropTypes.string,
   promptText: PropTypes.string,
   actionLink: PropTypes.string,
@@ -61,4 +56,4 @@ KlinicAuthForm.propTypes = {
   buttonText: PropTypes.string.isRequired,
 }
 
-export default KlinicAuthForm;
+export default AuthForm;
diff --git a/src/components/Button.jsx b/src/components/Button.jsx
index 3713252..9ca13da 100644
--- a/src/components/Button.jsx
+++ b/src/components/Button.jsx
@@ -1,5 +1,5 @@
 import PropTypes from "prop-types";
-import { Link } from "react-router-dom";
+import {Link} from "react-router-dom";
 import classNames from "classnames";
 
 const Button = ({
@@ -43,12 +43,12 @@ const Button = ({
   ) : (
     <button onClick={onClick} className={buttonClass} {...props}>
       {children ? (
-        <>
-          <span>{text}</span>
-          {children}
-        </>
+          <>
+            {children}
+            <span>{text}</span>
+          </>
       ) : (
-        text
+          text
       )}
     </button>
   );
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
new file mode 100644
index 0000000..755cbaf
--- /dev/null
+++ b/src/components/Header.jsx
@@ -0,0 +1,34 @@
+import Button from "./Button.jsx";
+import "@fortawesome/fontawesome-free/css/all.min.css";
+import {useState} from "react";
+import Modal from "./Modal.jsx";
+
+const Header = () => {
+	const [isModalOpen, setIsModalOpen] = useState(false);
+	const handleClick = () => {
+		setIsModalOpen(!isModalOpen);
+	}
+
+	const handleContainer = (e) => {
+		if (e.target.parentElement.id === "parent-container") {
+			setIsModalOpen(false);
+		}
+	}
+
+	return (
+			<div className={"bg-white overflow-hidden"} id={"parent-container"} onClick={handleContainer}>
+				<header className={"flex justify-end items-center p-4"}>
+					<Button text={"Login"} onClick={handleClick}>
+						<i className={"fa-solid fa-user mr-2"}></i>
+					</Button>
+				</header>
+				{
+						isModalOpen && (
+								<Modal setIsModalOpen={setIsModalOpen} />
+						)
+				}
+			</div>
+	)
+}
+
+export default Header;
diff --git a/src/components/Modal.jsx b/src/components/Modal.jsx
new file mode 100644
index 0000000..9885661
--- /dev/null
+++ b/src/components/Modal.jsx
@@ -0,0 +1,65 @@
+import AuthForm from "./AuthForm.jsx";
+import {useState} from "react";
+import clsx from "clsx";
+import PropTypes from 'prop-types';
+
+const Modal = ({ setIsModalOpen }) => {
+  const [isSignUp, setIsSignUp] = useState(true);
+  const [isLogin, setIsLogin] = useState(false);
+  const signUpState = () => {
+    setIsSignUp(true);
+    setIsLogin(false);
+  }
+
+  const loginState = () => {
+    setIsLogin(true);
+    setIsSignUp(false);
+  }
+
+  return (
+      <>
+        <div className={"bg-black border border-neutral-400 fixed inset-0 bg-opacity-50 flex items-center justify-center"}>
+          <div className={"relative flex flex-col items-center border border-neutral-100 bg-white rounded-xl px-8 py-10 w-[650px]"}>
+            <div className={"absolute mb-4 right-8 top-2"}>
+              <button onClick={() => setIsModalOpen(false)}>
+                <i className="text-3xl fa-solid fa-xmark text-gray-500"></i>
+              </button>
+            </div>
+            <div className={"flex border border-orange-400 rounded-full overflow-clip"}>
+              <div>
+                <button className={clsx("px-20 py-2 text-lg border-r-2 border-orange-400", isSignUp ? "text-black font-semibold bg-orange-50" : "text-orange-500 font-semibold")}
+                        onClick={loginState}>Login
+                </button>
+              </div>
+              <div>
+                <button className={clsx("px-20 py-2 text-lg", isSignUp ? "text-orange-500 font-semibold" : "text-black font-semibold bg-orange-50")}
+                        onClick={signUpState}>Signup
+                </button>
+              </div>
+            </div>
+            {
+              isSignUp && <AuthForm headerText={"Register"}
+                            promptText={"Already have an account?"}
+                            actionLink={"#"}
+                            actionLinkText={"Login"}
+                            buttonText={"SIGN UP"}/>
+            }
+            {
+              isLogin && <AuthForm headerText={"Welcome Back!"}
+                                   promptText={"Still don't have an account?"}
+                                   actionLink={"#"}
+                                   actionLinkText={"Sign up"}
+                                   buttonText={"LOGIN"}/>
+            }
+          </div>
+        </div>
+
+      </>
+  );
+};
+
+Modal.propTypes = {
+  setIsModalOpen: PropTypes.func.isRequired,
+};
+
+export default Modal;
diff --git a/src/containers/KlinicAuthContainer.jsx b/src/containers/KlinicAuthContainer.jsx
deleted file mode 100644
index 298bf45..0000000
--- a/src/containers/KlinicAuthContainer.jsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import KlinicAuthForm from "../components/KlinicAuthForm.jsx";
-import {useState} from "react";
-import clsx from "clsx";
-
-const KlinicAuthContainer = () => {
-  const [isSignUp, setIsSignUp] = useState(true);
-  const signUpState = () => {
-    setIsSignUp(!isSignUp);
-  }
-  return (
-      <div className={"flex flex-col" +
-          " items-center border" +
-          " border border-neutral-100" +
-          " bg-zinc-100" +
-          " rounded-xl" +
-          " px-8" +
-          " py-12 w-[600px]"}>
-        <div className={"flex border border-neutral-400 rounded-full overflow-clip"}>
-          <div>
-            <button className={clsx("px-20 py-2 border-r-2 border-red-400 text-xl", isSignUp ? "text-orange-500" : "bg-orange-500 text-bold")}
-                    onClick={signUpState}>LogIn
-            </button>
-          </div>
-          <div>
-            <button className={clsx("px-20 py-2 text-xl", isSignUp ? "bg-orange-500 text-bold" : "text-orange-500")}
-                    onClick={signUpState}>SignUp
-            </button>
-          </div>
-        </div>
-        {
-          isSignUp ?
-              <KlinicAuthForm headerText={"Register"}
-                              promptText={"Already have an account?"}
-                              actionLink={"#"}
-                              actionLinkText={"Login"}
-                              buttonText={"SIGN UP"}/> :
-              <KlinicAuthForm headerText={"Welcome" +
-                  " Back!"}
-                              promptText={"Still don't" +
-                                  " have an account?"}
-                              actionLink={"#"}
-                              actionLinkText={"Sign up"}
-                              buttonText={"LOGIN"}/>
-        }
-      </div>
-  )
-}
-
-export default KlinicAuthContainer;