diff --git a/science-quest/src/components/Login.vue b/science-quest/src/components/Login.vue
new file mode 100644
index 0000000..a6d18cd
--- /dev/null
+++ b/science-quest/src/components/Login.vue
@@ -0,0 +1,29 @@
+<template>
+    <form>
+    <h1 class="h3 mb-3 fw-normal">Se connecter</h1>
+
+    <div class="form-floating">
+      <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
+      <label for="floatingInput">Email</label>
+    </div>
+    <div class="form-floating">
+      <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
+      <label for="floatingPassword">Mot de passe</label>
+    </div>
+
+    <div class="checkbox mb-3">
+      <label>
+        <input type="checkbox" value="remember-me"> Remember me
+      </label>
+    </div>
+    <button class="btn btn-lg btn-primary" type="submit">Sign in</button>
+  </form>
+</template>
+
+<style>
+form {
+  display: flex;
+  flex-direction:column;
+  align-items: center;
+}
+</style>
\ No newline at end of file
diff --git a/science-quest/src/components/Titre.vue b/science-quest/src/components/Titre.vue
index 43332ed..2a470b9 100644
--- a/science-quest/src/components/Titre.vue
+++ b/science-quest/src/components/Titre.vue
@@ -24,7 +24,7 @@ export default{
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
       <ul class="navbar-nav me-auto mb-2 mb-lg-0">
         <!--li class="nav-item">
-            todo : trouver un moyen de gerer la page courante
+            TODO : trouver un moyen de gerer la page courante
           <a class="nav-link active" aria-current="page" href="#">Accueil</a>
         </li-->
         <li class="nav-item">
@@ -42,10 +42,8 @@ export default{
           </ul>
         </li>
       </ul>
-      <form class="d-flex" role="search">
-        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
-        <button class="btn btn-outline-success" type="submit">Search</button>
-      </form>
+      <!-- TODO : l'afficher que si on n'est pas connecté, sinon afficher l'username (qui sera surement dans le localstorage)-->
+      <li><a class="dropdown-item" href="#/login">Se connecter</a></li>
     </div>
   </div>
 </nav>
diff --git a/science-quest/src/main.js b/science-quest/src/main.js
index b642272..fb4292a 100644
--- a/science-quest/src/main.js
+++ b/science-quest/src/main.js
@@ -12,9 +12,11 @@ import './scss/styles.scss'
 import PagePrincipale from "./components/PagePrincipale.vue"
 import NotFound from "./components/erreurs/NotFound.vue"
 import TestParametreURL from "./components/TestParametreURL.vue"
+import Login from "./components/Login.vue"
 
 const routes = [
     { path: '/', component: PagePrincipale },
+    { path: '/login', component: Login },
     { path: '/exemple/:id', component: TestParametreURL },
     { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
 ]