diff --git a/front/components/auth/HeaderProfileBox.tsx b/front/components/auth/HeaderProfileBox.tsx
new file mode 100644
index 00000000..acbda9cd
--- /dev/null
+++ b/front/components/auth/HeaderProfileBox.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import styled from "styled-components";
+import Link from "next/link";
+
+export const HeaderProfileBox = () => {
+  return (
+    <ProfileArea>
+      {" "}
+      <span>HeaderProfileBox</span>{" "}
+      <Link href="/login">
+        <a>Login</a>
+      </Link>{"     "}
+      <Link href="/signup">
+          <a>Sign up</a>
+        </Link>
+    </ProfileArea>
+  );
+};
+
+const ProfileArea = styled.div`
+  display: flex;
+  place-items: stretch;
+  place-items: center;
+
+  span {
+    position: relative;
+    display: block;
+    top: 32px;
+    right: -20px;
+    padding-right: 20px;
+    font-size: 12px;
+    margin: 3px;
+    background-color: gray;
+    color: white;
+    width: auto;
+  }
+`;
diff --git a/front/pages/components/ui/menu.tsx b/front/components/ui/elements/menu.tsx
similarity index 94%
rename from front/pages/components/ui/menu.tsx
rename to front/components/ui/elements/menu.tsx
index f465c68e..53332704 100644
--- a/front/pages/components/ui/menu.tsx
+++ b/front/components/ui/elements/menu.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import styled from "styled-components";
-import { HeaderProfileBox } from "../auth/HeaderProfileBox";
+import { HeaderProfileBox } from "../../auth/HeaderProfileBox";
+import Link from "next/link";
 
 export const Menu = () => {
   return (
diff --git a/front/components/ui/header.tsx b/front/components/ui/header.tsx
new file mode 100644
index 00000000..6e58826f
--- /dev/null
+++ b/front/components/ui/header.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import { Menu } from "./elements/menu";
+import Link from 'next/link'
+
+
+export const Header = () => {
+  return (
+    <div>
+      <Menu></Menu>
+    </div>
+  );
+};
diff --git a/front/pages/components/ui/layout.tsx b/front/components/ui/layout.tsx
similarity index 88%
rename from front/pages/components/ui/layout.tsx
rename to front/components/ui/layout.tsx
index 813ccca7..2e3451d0 100644
--- a/front/pages/components/ui/layout.tsx
+++ b/front/components/ui/layout.tsx
@@ -16,7 +16,7 @@ const Layout = (props: any) => {
 
       <Footer>
         <a href="" target="_blank" rel="noopener noreferrer">
-          Powered by <img src="/learnhouse_logo.png" alt="Learnhouse Logo"  />
+          <img src="/learnhouse_icon.png" alt="Learnhouse Logo"  />
         </a>
       </Footer>
     </div>
@@ -34,7 +34,8 @@ const Footer = styled.footer`
   font-size: 16px;
 
   img{
-    width: 100px;
+    width: 40px;
+    opacity: 0.40;
     display: inline;
   }
 `;
diff --git a/front/pages/components/ui/styles/title.tsx b/front/components/ui/styles/title.tsx
similarity index 100%
rename from front/pages/components/ui/styles/title.tsx
rename to front/components/ui/styles/title.tsx
diff --git a/front/pages/components/auth/HeaderProfileBox.tsx b/front/pages/components/auth/HeaderProfileBox.tsx
deleted file mode 100644
index 228ea5ca..00000000
--- a/front/pages/components/auth/HeaderProfileBox.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-
-export const HeaderProfileBox = () => {
-  return <ProfileArea>HeaderProfileBox</ProfileArea>;
-};
-
-const ProfileArea = styled.div`
-  display: flex;
-  place-items: stretch;
-  place-items: center;
-`;
diff --git a/front/pages/components/ui/header.tsx b/front/pages/components/ui/header.tsx
deleted file mode 100644
index 12df6f8d..00000000
--- a/front/pages/components/ui/header.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react'
-import { Menu } from './menu'
-
-export const Header = () => {
-  return (
-    <div><Menu></Menu></div>
-  )
-}
diff --git a/front/pages/index.tsx b/front/pages/index.tsx
index a522ab8d..aa71efb2 100644
--- a/front/pages/index.tsx
+++ b/front/pages/index.tsx
@@ -1,6 +1,6 @@
 import type { NextPage } from "next";
-import { Title } from "./components/ui/styles/title";
-import Layout from "./components/ui/layout";
+import { Title } from "../components/ui/styles/title";
+import Layout from "../components/ui/layout";
 
 const Home: NextPage = () => {
   return (
diff --git a/front/pages/login.tsx b/front/pages/login.tsx
new file mode 100644
index 00000000..363facd7
--- /dev/null
+++ b/front/pages/login.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import Layout from "../components/ui/layout";
+import { Title } from "../components/ui/styles/title";
+
+const Login = () => {
+  const [email, setEmail] = React.useState("");
+  const [password, setPassword] = React.useState("");
+
+  const handleSubmit = (e: any) => {
+    e.preventDefault();
+    console.log(email, password);
+  };
+
+  const handleEmailChange = (e: any) => {
+    setEmail(e.target.value);
+  };
+
+  const handlePasswordChange = (e: any) => {
+    setPassword(e.target.value);
+  };
+
+  return (
+    <div>
+      <Layout>
+        <Title>Login</Title>
+
+        <form>
+          <input onChange={handleEmailChange} type="text" placeholder="email" />
+          <input onChange={handlePasswordChange} type="password" placeholder="password" />
+          <button onClick={handleSubmit} type="submit">
+            Login
+          </button>
+        </form>
+      </Layout>
+    </div>
+  );
+};
+
+export default Login;
diff --git a/front/pages/signup.tsx b/front/pages/signup.tsx
new file mode 100644
index 00000000..46204395
--- /dev/null
+++ b/front/pages/signup.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import Layout from "../components/ui/layout";
+import { Title } from "../components/ui/styles/title";
+
+const SignUp = () => {
+  return <div>
+  <Layout>
+    <Title>Sign up </Title>
+  </Layout>
+</div>;
+};
+export default SignUp;
diff --git a/front/public/learnhouse_icon.png b/front/public/learnhouse_icon.png
new file mode 100644
index 00000000..77efd20e
Binary files /dev/null and b/front/public/learnhouse_icon.png differ