diff --git a/src/components/Layout/layout.module.scss b/src/components/Layout/layout.module.scss
index 9b8b6b8ec0ad67b4ad1c5ea08c0ddbc21efc1555..e6bd32e65aeba592769f4894394611e70f15d541 100644
--- a/src/components/Layout/layout.module.scss
+++ b/src/components/Layout/layout.module.scss
@@ -38,5 +38,6 @@
   }
   main {
     width: 100%;
+    height: inherit;
   }
 }
diff --git a/src/components/Login/Login.tsx b/src/components/Login/Login.tsx
index 6bc50137e01df31f31b8626e097f34d8d74687ab..57d35c319b39c2a204d258a224e341281c9b2421 100644
--- a/src/components/Login/Login.tsx
+++ b/src/components/Login/Login.tsx
@@ -1,14 +1,26 @@
-import React, { useContext } from 'react'
-import { useAuth } from '../../hooks/useAuth'
+import React, { useContext, useEffect } from 'react'
+import { useHistory } from 'react-router-dom'
 import { UserContext } from '../../hooks/userContext'
-// import { userProfile } from '../../App'
-// import { UserContext } from '../../hooks/userContext'
+import './login.scss'
+
 const Login: React.FC = () => {
-  const { user, setUser, loginUser } = useContext(UserContext)
+  const { user, loginUser } = useContext(UserContext)
+  const history = useHistory()
+
+  useEffect(() => {
+    if (user) {
+      history.push('/edition')
+    }
+  }, [user])
 
   return (
     <div className="login">
-      <button onClick={loginUser}>Login</button>
+      <div className="container">
+        <h1>Bienvenue sur le Backoffice d'Ecolyo !</h1>
+        <button className="btnValid" onClick={loginUser}>
+          Login
+        </button>
+      </div>
     </div>
   )
 }
diff --git a/src/components/Login/login.scss b/src/components/Login/login.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8ce4f8b00b012ee570ef6fadb4bc406d63e57989
--- /dev/null
+++ b/src/components/Login/login.scss
@@ -0,0 +1,9 @@
+.login {
+  display: flex;
+  width: 100%;
+  height: inherit;
+  min-height: 95vh;
+  .container {
+    margin: auto;
+  }
+}
diff --git a/src/components/Routes/PrivateRoute.tsx b/src/components/Routes/PrivateRoute.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0d97b0e9be5602c90623f8cc288a9fcf280c5c44
--- /dev/null
+++ b/src/components/Routes/PrivateRoute.tsx
@@ -0,0 +1,23 @@
+import React, { useContext } from 'react'
+import { Route, Redirect } from 'react-router-dom'
+import { UserContext } from '../../hooks/userContext'
+
+interface PrivateRouteProps {
+  component: React.FC
+  path: string
+  exact: boolean
+}
+
+const PrivateRoute: React.FC<PrivateRouteProps> = ({
+  component,
+  path,
+  exact,
+}: PrivateRouteProps) => {
+  const { isLogged } = useContext(UserContext)
+  return isLogged ? (
+    <Route path={path} exact={exact} component={component} />
+  ) : (
+    <Redirect to="/login" />
+  )
+}
+export default PrivateRoute
diff --git a/src/components/Routes/Routes.tsx b/src/components/Routes/Routes.tsx
index 9cf3a0831f335d4b3473c86d00150160a1f41022..35a75918b4dbfd978f16a8efb722f528c2f9008a 100644
--- a/src/components/Routes/Routes.tsx
+++ b/src/components/Routes/Routes.tsx
@@ -1,24 +1,17 @@
-import React, { useContext } from 'react'
+import React from 'react'
 import { Redirect, Route, Switch } from 'react-router-dom'
-import { UserContext } from '../../hooks/userContext'
 import Editing from '../Editing/Editing'
 import Login from '../Login/Login'
 import Settings from '../Settings/Settings'
+import PrivateRoute from './PrivateRoute'
 
 const Routes: React.FC = () => {
-  const { isLogged } = useContext(UserContext)
   return (
     <Switch>
       <Route path="/login" component={Login} />
-      {isLogged ? (
-        <>
-          <Route path="/editing" component={Editing} />
-          <Route path="/settings" component={Settings} />
-          <Redirect path="*" to="/editing" />
-        </>
-      ) : (
-        <Redirect path="*" to="/login" />
-      )}
+      <PrivateRoute path="/editing" component={Editing} exact />
+      <PrivateRoute path="/settings" component={Settings} exact />
+      <Redirect path="*" to="/editing" />
     </Switch>
   )
 }
diff --git a/src/styles/config/_typography.scss b/src/styles/config/_typography.scss
index 54f65d944936d2614ee1cf923325d5309f09db0d..147bb9b552e60d92545914e27dd352f281bbe570 100644
--- a/src/styles/config/_typography.scss
+++ b/src/styles/config/_typography.scss
@@ -59,3 +59,11 @@ $main-spacing: 4px;
     background: darken($text-grey, 20%);
   }
 }
+.input-dark {
+  display: inline-block;
+  margin-left: 0.5rem;
+  background: transparent;
+  border: solid 1px $gold;
+  border-radius: 5px;
+  padding: 0.3rem;
+}