diff --git a/src/components/Header/AppHeader.tsx b/src/components/Header/AppHeader.tsx
index 756272ff..f08f773f 100644
--- a/src/components/Header/AppHeader.tsx
+++ b/src/components/Header/AppHeader.tsx
@@ -1,188 +1,17 @@
 import React, {
-  Dispatch, MouseEventHandler, SetStateAction, useState,
+  useState,
 } from "react";
 import { Link, NavLink } from "react-router-dom";
 import routes from "../../pages/public/routes";
 import MobileMenu from "./MobileMenu";
+import LoginPopup from "./LoginPopup";
+import UserAvatar from "./UserAvatar";
+import LoginButtons from "./LoginButtons";
 
 const activeStyle: React.CSSProperties = {
   fontWeight: "bold",
 };
 
-const UserAvatar = () => {
-  return (
-    <button tabIndex={0} className="dropdown dropdown-end" type="button">
-      <div className="btn btn-ghost btn-circle avatar">
-        <div className="w-10 rounded-full">
-          <img
-            src="https://placeimg.com/80/80/people"
-            alt="profile avatar"
-          />
-        </div>
-      </div>
-      <ul className="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-100 rounded-box w-52">
-        <li>
-          <Link to="/kontrollpanel">Kontrollpanel</Link>
-        </li>
-        <li>
-          <a href="#0">Min side</a>
-        </li>
-        <li>
-          <a href="#0">Profil</a>
-        </li>
-        <li>
-          <a href="#0">Mine utlegg</a>
-        </li>
-        <li className="text-red-500">
-          <a href="#0">Logg ut</a>
-        </li>
-      </ul>
-    </button>
-  );
-};
-
-const LoginButtons = ({ setVisible }: { setVisible: Dispatch<SetStateAction<boolean>> }) => {
-  return (
-    <div className="flex space-x-4">
-      <button
-        type="button"
-        className="bg-blue-900 hover:bg-gray-800 text-white px-4 py-2 rounded-full duration-300"
-      >
-        Jeg er ny
-      </button>
-      <button
-        type="button"
-        className="bg-blue-400 hover:bg-blue-900 text-white px-4 py-2 rounded-full duration-300"
-        onClick={() => setVisible(true)}
-      >
-        Logg inn
-      </button>
-    </div>
-  );
-};
-
-const LoginPopup = ({ setVisible }: { setVisible: Dispatch<SetStateAction<boolean>> }) => {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [errorMessage, setErrorMessage] = useState("");
-  const [imgClassName, setimgClassName] = useState("flex flex-row mt-10 ml-4");
-
-  const closeOrOpen: MouseEventHandler<HTMLDivElement> = (e) => {
-    const isClose = (e.target as HTMLElement).closest("#popup");
-    if (!isClose) {
-      setVisible(false);
-    }
-  };
-
-  function isValidEmail(): boolean {
-    const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
-    return emailPattern.test(email);
-  }
-
-  const checkEmailAndPassword = () => {
-    if (!isValidEmail()) {
-      setErrorMessage("Email ugyldig, prøv igjen!");
-    } else if (password.length < 6) {
-      setErrorMessage("Passord ugyldig, prøv igjen!");
-    } else {
-      setErrorMessage("");
-    }
-  };
-
-  // Logs in the mail and password set
-  const logIn = (e: { preventDefault: () => void; }) => {
-    e.preventDefault();
-    checkEmailAndPassword();
-    // do something to loginhere
-    // .catch((error) => {
-    //    showError(error);
-    //     });
-  };
-
-  function handleEnterLogIn(event: React.KeyboardEvent<HTMLInputElement>): void {
-    if (event.key === "Enter") {
-      logIn(event); // calling the same function that is called when the "Log in" button is clicked
-    }
-  }
-
-  return (
-    <div
-      className="bg-black/40 fixed top-0 left-0 w-full h-screen flex justify-center items-center"
-      onClick={closeOrOpen}
-      onKeyDown={() => {}}
-      role="button"
-      tabIndex={-1}
-    >
-      <div className="bg-white flex p-7.5 rounded-lg justify-around max-w-2xl h-96 border-2 " id="popup">
-        <div className={imgClassName}>
-          <img
-            src="../images/TorPekerPåTekst1.png"
-            className="h-52"
-            alt="vektorbilde"
-          />
-          {errorMessage.length > 0
-            ? (
-              <div className="bg-white border border-gray-400 rounded-lg shadow-md p-4 max-w-xs mx-auto relative h-32 bottom-10 right-5">
-                <div className="text-gray-800">
-                  <p className="text-red-500 font-semibold">{errorMessage}</p>
-                </div>
-                <div className="relative right-7 bottom-4 mb-3">
-                  <div className="w-6 h-6 transform rotate-45 bg-white border-b border-l border-gray-400" />
-                </div>
-              </div>
-            )
-            : null }
-        </div>
-
-        <div className="mt-20 ml-5">
-          <div>
-            <p className="font-semibold">Brukernavn/E-post</p>
-            <input
-              className="border-2 rounded-lg py-2 px-4 w-80 my-4"
-              id="email"
-              type="text"
-              placeholder="E-post"
-              value={email}
-              onChange={(e) => { setEmail(e.target.value); }}
-              onFocus={() => setimgClassName("flex flex-row mt-10 ml-4 transform duration-300")}
-              onKeyDown={handleEnterLogIn}
-            />
-          </div>
-          <div>
-            <p className="font-semibold">Passord</p>
-            <input
-              className="border-2 rounded-lg py-2 px-4 w-80 mt-4 mb-2"
-              id="password"
-              type="password"
-              placeholder="Passord"
-              value={password}
-              onChange={(e) => { setPassword(e.target.value); }}
-              onFocus={() => setimgClassName("flex flex-row mt-36 ml-4 transform duration-300")}
-              onKeyDown={handleEnterLogIn}
-            />
-            {/* <p className="text-red-500 font-semibold mb-2">{errorMessage}</p> */}
-          </div>
-          <div>
-            <button
-              type="button"
-              className="btn btn-primary bg-blue-400 hover:bg-blue-900 text-white px-4 py-2 rounded-full duration-300 mr-24"
-              onClick={(e) => logIn(e)}
-            >
-              Logg inn
-            </button>
-            <u className="text-blue-400 cursor-pointer">
-              Glemt Passord?
-            </u>
-          </div>
-        </div>
-        <button className="btn btn-primary btn-square btn-outline relative text-2xl cursor-pointer mr-2 mt-2" onClick={() => setVisible(false)} type="button">
-          <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" /></svg>
-        </button>
-      </div>
-    </div>
-  );
-};
-
 const AppHeader = (): JSX.Element => {
   const [menuOpen, setMenuOpen] = useState(false);
   const [loginPopupVisible, setLoginPopupVisible] = useState(false);
@@ -190,7 +19,6 @@ const AppHeader = (): JSX.Element => {
   const linkElements = routes.map((route) => (
     <NavLink
       key={route.route}
-      // className="mt-4 vektor-font font-semibold p-1"
       className="header-link mobile-link"
       to={route.route}
       style={({ isActive }) => (isActive ? activeStyle : {})}
@@ -223,6 +51,9 @@ const AppHeader = (): JSX.Element => {
         links={linkElements}
         menuOpen={menuOpen}
         setMenuOpen={setMenuOpen}
+        isLoggedIn={isLoggedIn}
+        loginPopupVisible={loginPopupVisible}
+        setLoginPopupVisible={setLoginPopupVisible}
       />
     </nav>
   );
diff --git a/src/components/Header/LoginButtons.tsx b/src/components/Header/LoginButtons.tsx
new file mode 100644
index 00000000..72f3353c
--- /dev/null
+++ b/src/components/Header/LoginButtons.tsx
@@ -0,0 +1,17 @@
+import React, { Dispatch, SetStateAction } from "react";
+
+const LoginButtons = ({ setVisible }: { setVisible: Dispatch<SetStateAction<boolean>> }) => {
+  return (
+    <div className="flex space-x-4">
+      <button
+        type="button"
+        className="login-buttons bg-blue-400 hover:bg-blue-900 text-white px-4 py-2 rounded-full duration-300"
+        onClick={() => setVisible(true)}
+      >
+        Logg inn
+      </button>
+    </div>
+  );
+};
+
+export default LoginButtons;
diff --git a/src/components/Header/LoginPopup.tsx b/src/components/Header/LoginPopup.tsx
new file mode 100644
index 00000000..920dc3e1
--- /dev/null
+++ b/src/components/Header/LoginPopup.tsx
@@ -0,0 +1,125 @@
+import React, {
+  Dispatch, MouseEventHandler, SetStateAction, useState,
+} from "react";
+
+const LoginPopup = ({ setVisible }: { setVisible: Dispatch<SetStateAction<boolean>> }) => {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [errorMessage, setErrorMessage] = useState("");
+  const [imgClassName, setimgClassName] = useState("flex flex-row mt-10 ml-4");
+
+  const closeOrOpen: MouseEventHandler<HTMLDivElement> = (e) => {
+    const isClose = (e.target as HTMLElement).closest("#popup");
+    if (!isClose) {
+      setVisible(false);
+    }
+  };
+
+  function isValidEmail(): boolean {
+    const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+    return emailPattern.test(email);
+  }
+
+  const checkEmailAndPassword = () => {
+    if (!isValidEmail()) {
+      setErrorMessage("Email ugyldig, prøv igjen!");
+    } else if (password.length < 6) {
+      setErrorMessage("Passord ugyldig, prøv igjen!");
+    } else {
+      setErrorMessage("");
+    }
+  };
+
+  const logIn = (e: { preventDefault: () => void; }) => {
+    e.preventDefault();
+    checkEmailAndPassword();
+    // to be implemented
+  };
+
+  function handleEnterLogIn(event: React.KeyboardEvent<HTMLInputElement>): void {
+    if (event.key === "Enter") {
+      logIn(event);
+    }
+  }
+
+  return (
+    <div
+      className="bg-black/40 fixed top-0 left-0 w-full h-screen flex justify-center items-center"
+      onClick={closeOrOpen}
+      onKeyDown={() => {}}
+      role="button"
+      tabIndex={-1}
+    >
+      <div className="bg-white flex p-7.5 rounded-lg justify-around max-w-2xl h-96 border-2 " id="popup">
+        <div className={imgClassName}>
+          <img
+            src="../images/TorPekerPåTekst1.png"
+            className="tor h-52"
+            alt="vektorbilde"
+          />
+          {errorMessage.length > 0
+            ? (
+              <div>
+                <div className="error-bubble bg-white border border-gray-400 rounded-lg shadow-md p-4 max-w-xs mx-auto relative h-32 bottom-10 right-5">
+                  <div className="text-gray-800">
+                    <p className="text-red-500 font-semibold">{errorMessage}</p>
+                  </div>
+                  <div className="relative right-7 bottom-4 mb-3">
+                    <div className="w-6 h-6 transform rotate-45 bg-white border-b border-l border-gray-400" />
+                  </div>
+                </div>
+              </div>
+            )
+            : null }
+        </div>
+
+        <div className="mt-20 ml-5">
+          <div>
+            <p className="font-semibold">Brukernavn/E-post</p>
+            <input
+              className="input border-2 rounded-lg py-2 px-4 w-80 my-4"
+              id="email"
+              type="text"
+              placeholder="E-post"
+              value={email}
+              onChange={(e) => { setEmail(e.target.value); }}
+              onFocus={() => setimgClassName("flex flex-row mt-10 ml-4 transform duration-300")}
+              onKeyDown={handleEnterLogIn}
+            />
+          </div>
+          <div>
+            <p className="font-semibold">Passord</p>
+            <input
+              className="input border-2 rounded-lg py-2 px-4 w-80 mt-4 mb-2"
+              id="password"
+              type="password"
+              placeholder="Passord"
+              value={password}
+              onChange={(e) => { setPassword(e.target.value); }}
+              onFocus={() => setimgClassName("flex flex-row mt-36 ml-4 transform duration-300")}
+              onKeyDown={handleEnterLogIn}
+            />
+          </div>
+          <div>
+            <p className="mob-message hidden text-red-500 font-semibold">{errorMessage}</p>
+            <button
+              type="button"
+              className="button btn btn-primary bg-blue-400 hover:bg-blue-900 text-white px-4 py-2 rounded-full duration-300 mr-24"
+              onClick={(e) => logIn(e)}
+            >
+              Logg inn
+            </button>
+            <u className="text-blue-400 cursor-pointer">
+              Glemt Passord?
+            </u>
+          </div>
+        </div>
+        <button className="btn btn-primary btn-square btn-outline relative text-2xl cursor-pointer mr-2 mt-2" onClick={() => setVisible(false)} type="button">
+          <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" /></svg>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default LoginPopup;
diff --git a/src/components/Header/MobileMenu.tsx b/src/components/Header/MobileMenu.tsx
index 3dba07fb..7c51c007 100644
--- a/src/components/Header/MobileMenu.tsx
+++ b/src/components/Header/MobileMenu.tsx
@@ -1,66 +1,82 @@
-import React from "react";
-
-import { Link } from "react-router-dom";
-
-import "./mobile.css";
-
-interface Props {
-  menuOpen: boolean,
-  setMenuOpen: (values: boolean) => void;
-  links: Array<JSX.Element>,
-}
-
-const MobileMenu = (props: Props): JSX.Element => {
-  const { links, menuOpen, setMenuOpen } = props;
-  return (
-    <div className="fixed vektor-font">
-      <div className="relative md:hidden z-10 flex shadow-md w-screen text-3xl bg-white">
-        <div
-          role="button"
-          tabIndex={0}
-          aria-label="closeOverlay"
-          onKeyPress={() => { setMenuOpen(!menuOpen); }}
-          onClick={() => { setMenuOpen(!menuOpen); }}
-          className="hamburger"
-        >
-          <span className={`hamburger-span  ${menuOpen ? "top-bun" : ""}`} />
-          <span className={`hamburger-span mt-3 ${menuOpen ? "patty" : ""}`} />
-          <span className={`hamburger-span mt-6 ${menuOpen ? "bottom-bun" : ""}`} />
-        </div>
-        <Link
-          className="relative font-bold vektor-dark-blue text-2xl flex my-3 m-auto"
-          onClick={() => {
-            if (menuOpen) { setMenuOpen(!menuOpen); }
-          }}
-          to="/"
-        >
-          Vektorprogrammet
-        </Link>
-      </div>
-      {
-        menuOpen ? (
-          <div
-            role="button"
-            tabIndex={0}
-            aria-label="closeOverlayButton"
-            onKeyPress={() => { setMenuOpen(!menuOpen); }}
-            onClick={() => { setMenuOpen(!menuOpen); }}
-            className="md:hidden drawer-content fixed"
-          >
-            <nav className="drawer-content flex flex-col text-2xl">
-              {links}
-            </nav>
-          </div>
-        ) : (
-          <div className="md:hidden drawer-content closed-drawer fixed">
-            <nav className="drawer-content flex flex-col text-2xl">
-              {links}
-            </nav>
-          </div>
-        )
-      }
-    </div>
-  );
-};
-
-export default MobileMenu;
+import React, { Dispatch, SetStateAction } from "react";
+
+import { Link } from "react-router-dom";
+
+import "./mobile.css";
+import LoginPopup from "./LoginPopup";
+import UserAvatar from "./UserAvatar";
+import LoginButtons from "./LoginButtons";
+
+interface Props {
+  menuOpen: boolean,
+  setMenuOpen: (values: boolean) => void;
+  links: Array<JSX.Element>,
+  isLoggedIn: boolean,
+  loginPopupVisible: boolean,
+  setLoginPopupVisible: Dispatch<SetStateAction<boolean>>
+}
+
+const MobileMenu = (props: Props): JSX.Element => {
+  const {
+    links, menuOpen, setMenuOpen, isLoggedIn, loginPopupVisible, setLoginPopupVisible,
+  } = props;
+  return (
+    <div className="fixed vektor-font">
+      <div className="relative md:hidden z-10 flex shadow-md w-screen text-3xl bg-white">
+        <div
+          role="button"
+          tabIndex={0}
+          aria-label="closeOverlay"
+          onKeyPress={() => { setMenuOpen(!menuOpen); }}
+          onClick={() => { setMenuOpen(!menuOpen); }}
+          className="hamburger"
+        >
+          <span className={`hamburger-span  ${menuOpen ? "top-bun" : ""}`} />
+          <span className={`hamburger-span mt-3 ${menuOpen ? "patty" : ""}`} />
+          <span className={`hamburger-span mt-6 ${menuOpen ? "bottom-bun" : ""}`} />
+        </div>
+        <Link
+          className="relative font-bold vektor-dark-blue text-2xl flex my-3 m-auto"
+          onClick={() => {
+            if (menuOpen) { setMenuOpen(!menuOpen); }
+          }}
+          to="/"
+        >
+          Vektorprogrammet
+        </Link>
+
+        <div>
+          {loginPopupVisible ? <LoginPopup setVisible={setLoginPopupVisible} /> : null}
+        </div>
+      </div>
+      {
+        menuOpen ? (
+          <div
+            role="button"
+            tabIndex={0}
+            aria-label="closeOverlayButton"
+            onKeyPress={() => { setMenuOpen(!menuOpen); }}
+            onClick={() => { setMenuOpen(!menuOpen); }}
+            className="md:hidden drawer-content fixed"
+          >
+            <nav className="drawer-content flex flex-col text-2xl">
+              <div className="flex w-1/5 justify-center">
+                {isLoggedIn ? <UserAvatar /> : <LoginButtons setVisible={setLoginPopupVisible} />}
+              </div>
+              {links}
+            </nav>
+          </div>
+
+        ) : (
+          <div className="md:hidden drawer-content closed-drawer fixed">
+            <nav className="drawer-content flex flex-col text-2xl">
+              {links}
+            </nav>
+          </div>
+        )
+      }
+    </div>
+  );
+};
+
+export default MobileMenu;
diff --git a/src/components/Header/UserAvatar.tsx b/src/components/Header/UserAvatar.tsx
new file mode 100644
index 00000000..c1e9000c
--- /dev/null
+++ b/src/components/Header/UserAvatar.tsx
@@ -0,0 +1,36 @@
+import { Link } from "react-router-dom";
+import React from "react";
+
+const UserAvatar = () => {
+  return (
+    <button tabIndex={0} className="dropdown dropdown-end" type="button">
+      <div className="btn btn-ghost btn-circle avatar">
+        <div className="w-10 rounded-full">
+          <img
+            src="https://placeimg.com/80/80/people"
+            alt="profile avatar"
+          />
+        </div>
+      </div>
+      <ul className="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-100 rounded-box w-52">
+        <li>
+          <Link to="/kontrollpanel">Kontrollpanel</Link>
+        </li>
+        <li>
+          <a href="#0">Min side</a>
+        </li>
+        <li>
+          <a href="#0">Profil</a>
+        </li>
+        <li>
+          <a href="#0">Mine utlegg</a>
+        </li>
+        <li className="text-red-500">
+          <a href="#0">Logg ut</a>
+        </li>
+      </ul>
+    </button>
+  );
+};
+
+export default UserAvatar;
diff --git a/src/components/Header/mobile.css b/src/components/Header/mobile.css
index c2634a14..5adf018e 100644
--- a/src/components/Header/mobile.css
+++ b/src/components/Header/mobile.css
@@ -1,73 +1,108 @@
-.vektor-dark-blue{
-  color:  #023874;
-} 
-
-.vektor-font{
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-}
-
-.drawer-content{
-  width: 100%;
-  min-height: 100%;
-  align-items: center;
-  padding: 0.5rem;
-  color:  #023874;
-  background-color: white;
-  transition: 0.5s;
-}
-
-.closed-drawer{
-  margin-left: -100%;
-}
-
-.hamburger{
-  position: fixed;
-  width: 32px;
-  height: 30px;
-  margin: 0.5em;
-  transition: all .2s ease-in-out;
-}
-
-.mobile-link{
-  margin-top: 16px;
-  font-weight: 600;
-  padding: 4px;
-}
-
-.closeMenu{
-  position: fixed;
-  width: 50px;
-  height: 50px;
-  background-color: transparent;
-}
-
-.hamburger-span{
-  position: fixed;
-  width: 32px;
-  height: 5px;
-  z-index:  -1;
-  border-radius: 3px;
-  background-color: black;
-  content: '';
-  transition: all .2s ease-in-out;
-}
-
-.top-bun {
-  transform: translateY(12px) rotate(135deg);
-}
-
-.patty {
-  transform: scale(0);
-}
-
-.bottom-bun {
-  transform: translateY(-12px) rotate(-135deg);
-}
-
-.closed{
-  display: none;
-}
-
-.open{
-  display: block;
+.vektor-dark-blue{
+  color:  #023874;
+} 
+
+.vektor-font{
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+.drawer-content{
+  width: 100%;
+  min-height: 100%;
+  align-items: center;
+  padding: 0.5rem;
+  color:  #023874;
+  background-color: white;
+  transition: 0.5s;
+}
+
+.closed-drawer{
+  margin-left: -100%;
+}
+
+.hamburger{
+  position: fixed;
+  width: 32px;
+  height: 30px;
+  margin: 0.5em;
+  transition: all .2s ease-in-out;
+}
+
+.mobile-link{
+  margin-top: 16px;
+  font-weight: 600;
+  padding: 4px;
+}
+
+.closeMenu{
+  position: fixed;
+  width: 50px;
+  height: 50px;
+  background-color: transparent;
+}
+
+.hamburger-span{
+  position: fixed;
+  width: 32px;
+  height: 5px;
+  z-index:  -1;
+  border-radius: 3px;
+  background-color: black;
+  content: '';
+  transition: all .2s ease-in-out;
+}
+
+.top-bun {
+  transform: translateY(12px) rotate(135deg);
+}
+
+.patty {
+  transform: scale(0);
+}
+
+.bottom-bun {
+  transform: translateY(-12px) rotate(-135deg);
+}
+
+.closed{
+  display: none;
+}
+
+.open{
+  display: block;
+}
+
+@media (max-width: 860px) {
+  #popup{
+    width: 90%;
+    font-size: small;
+  }
+
+  .button{
+    width: 100%;
+  }
+
+  .login-buttons {
+    width: 10rem;
+  }
+
+  .input{
+    width: 100%;
+    height: 40px;
+    margin-top: 0;
+  }
+
+  .tor{
+    margin-top: 40px;
+    height: 100px;
+    width: 100px;
+  }
+
+  .error-bubble{
+    display: none;
+  }
+
+  .mob-message{
+    display: block;
+  }
 }
\ No newline at end of file