diff --git a/frontend/login.html b/frontend/login.html
new file mode 100644
index 0000000..05192e0
--- /dev/null
+++ b/frontend/login.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>Clyde - Login</title>
+	</head>
+	<body>
+		<div id="app"></div>
+		<script type=module src="/src/login.js"></script>
+	</body>
+</html>
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index e77b88d..a9d7a8a 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -13,55 +13,102 @@
 </script>
 
 <template>
-    <ul style="padding-top:60px"class="vertical">
-        <li style="margin-top: 25px;" ><a href="#Messages"><item class="fa-solid fa-comment" style="font-size: 40px;" ></item>
-            <div class="text">Messages</div> </a></li>
-        <li ><a href="#Notifications"><item class="fa-solid fa-bell" style="font-size: 40px;" ></item>
-            <div class="text">Notifications</div></a></li>
-        <li ><a href="#Schedule"><item class="fa-solid fa-calendar-days" style="font-size: 40px;" ></item>
-            <div class="text">Schedules</div></a></li>
-        <li ><a href="#Forum"><item class="fa-solid fa-envelope" style="font-size: 40px;" ></item>
-            <div class="text">Forum</div></a></li>
-    </ul>
+  <div class="container">
 
-    <ul class="horizontal" style="box-shadow: 0px 3px 3px rgb(0, 0, 0);">
+    <div class="topBar">
+      <ul class="horizontal">
         <li title="Home">
             <a href="#home">
                 <img @click="draw" src="./assets/Clyde.png" style="width: 40px; height: auto; margin-top:4px">
-            </a>
-        </li>
+            </a></li>
         <li title="Home">
             <a href="#home">
-                <item class=" fa-solid fa-house" style="margin-top: 7px; margin-bottom: 3px;"></item>
-            </a>
-        </li>
+                <div class=" fa-solid fa-house" style="margin-top: 7px; margin-bottom: 3px;"></div>
+            </a></li>
         <li style="float: right;" title="Account">
-            <a href="#Account"> 
-                <item class="fa-solid fa-user"  style="margin-top: 7px; margin-bottom: 3px;"></item>
+            <a href="/login">
+                <div class="fa-solid fa-user"  style="margin-top: 7px; margin-bottom: 3px;"></div>
             </a></li>
         <li style="float: right;" title="Notifications">
             <a href="#Notifications">
-                <item class="fa-solid fa-bell"  style="margin-top: 7px; margin-bottom: 3px;"></item>
+                <div class="fa-solid fa-bell"  style="margin-top: 7px; margin-bottom: 3px;"></div>
             </a></li>
         <li style="float: right;" title="Options">
             <a href="#Options">
-                <item  class="fa-solid fa-gear"  style="margin-top: 7px; margin-bottom: 3px;"></item>
+                <div  class="fa-solid fa-gear"  style="margin-top: 7px; margin-bottom: 3px;"></div>
             </a></li>
+      </ul>
+    </div>
+
+    <div class="leftBar">
+    <ul class="vertical">
+        <li style="margin-top: 25px;" >
+          <a href="#Messages">
+            <div class="fa-solid fa-comment" style="font-size: 40px;"></div>
+            <div class="text">Messages</div>
+          </a></li>
+        <li >
+          <a href="#Notifications">
+            <div class="fa-solid fa-bell" style="font-size: 40px;" ></div>
+            <div class="text">Notifications</div>
+          </a></li>
+        <li >
+          <a href="#Schedule">
+            <div class="fa-solid fa-calendar-days" style="font-size: 40px;"></div>
+            <div class="text">Schedules</div>
+          </a></li>
+        <li ><a href="#Forum">
+            <div class="fa-solid fa-envelope" style="font-size: 40px;" ></div>
+            <div class="text">Forum</div></a></li>
     </ul>
+
+    </div>
+    <div class="page">
+      <div style="background-color: rgb(239,50,168); margin:50px;">Il FAUDRA INSERER LA PAGE ICI</div>
+    </div>
+  </div>
 </template>
 
 <style scoped>
+  
+  .container{
+    display:grid;
+    grid-template-columns:[firstCol-start]70px[firstCol-end secondCol-start]auto[endCol];
+    grid-template-rows:[firstRow-start]61px[firstRow-end secondRow-start] auto [endRow];
+    grid-template-areas:
+    "topBar topBar" 
+    "leftBar page";
+    row-gap:0px;
+    column-gap:0px;
+  }
+
+  .page {
+    grid-area:page;
+    place-self:center;
+  }
+
+  .topBar{
+    grid-area:topBar;
+  }
+
+  .leftBar{
+    grid-area:leftBar;
+  }
+
+
 	ul.vertical{
 		list-style-type: none;
-		margin: 0;
-		padding: 0;
+		margin-top: 61px;
+    top:0;
+    left:0;
+		padding: 25px 0 0;
 		width: 70px ;
 		background-color: rgb(53, 53, 53);
 		border-right:5px;
 		border-color:black;
 		height: 100%;
 		position: fixed;
-		overflow:auto;
+		overflow:;
 		transition-duration: .3s;
 	}
 
@@ -76,7 +123,6 @@
 		background-color: rgb(112, 112, 112);
 		border-radius:6px;
 		color: white;
-		
 		transform: translate(0px ,1px);
 	}
 
@@ -91,11 +137,14 @@
 	}
 	ul.horizontal {
 		z-index: 101;
+    box-shadow: 0px 3px 3px rgb(0, 0, 0);
 		display: block ;
 		list-style-type:none;
 		margin:0;
 		padding: 0;
 		top: 0; 
+    left:0;
+    
 		position: fixed;
 		height:61px;
 		width: 100%;
@@ -121,7 +170,8 @@
 	  ul.vertical:hover {
 		z-index: 100;
 		width: 250px;
-		border-radius: 40px;
+		border-top-right-radius: 40px;
+    box-shadow: 3px 0px 3px rgb(0, 0, 0);
 		transition-duration: .3s;
 
 	  }
diff --git a/frontend/src/Login.vue b/frontend/src/Login.vue
new file mode 100644
index 0000000..52e7e19
--- /dev/null
+++ b/frontend/src/Login.vue
@@ -0,0 +1,105 @@
+<template>
+  <body>
+    <div class="logBoxCenterer">
+      <div class='loginBox'>
+        <div class="form">
+          <h1 style="color:rgb(239,60,168); font-family: sans-serif;">SIGN IN</h1>
+          <div class="inputBox">
+            <p>USERNAME</p>
+            <input type="text" required>
+          </div>
+          <div class="inputBox">
+            <p>PASSWORD</p>
+            <input type="password" required>
+          </div>
+          <div class="register">
+            <a>Register</a>
+          </div>
+          <div class="inputBox">
+            <input type="submit" value="Login">
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</template>
+
+<style scoped>
+
+.logBoxCenterer {
+  position: absolute;
+  width: 100%;
+  height:  100%;
+  display: flex;
+  align-items: center;
+  justify-content: center; 
+  overflow: hidden;
+}
+
+.loginBox {
+  background-color: rgb(24,24,24);
+  position : absolute;
+  width: 400px;
+  display:flex;
+  justify-content: center;
+  padding: 40px;
+  border-radius: 20px;
+  box-shadow:0 5px 25px #000000;
+  
+}
+.form {
+  position:relative;
+  width:100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items:center;
+  gap: 15px;
+}
+
+
+.inputBox input {
+  width:100%;
+  background:rgb(255, 0 255);
+  border: none;
+  margin-right: 50px;
+  padding-left: 10px;
+  padding-top:10px;
+  padding-bottom:10px;
+  outline:none;
+  border-radius: 4px;
+  font-size:1.35em;
+}
+
+.inputBox p{
+  position:relative;
+  z-index: 100;
+  font-family:sans-serif ; 
+  color:rgb(239,60,168);
+  transition:0.5;
+
+}
+
+.register{
+  color:rgb(239,60,168);
+  width: 100%;
+  align-items:center;
+  display:flex;
+  justify-content: center;
+  cursor: pointer;
+}
+
+input[type = "submit"] {
+  background-color: rgb(239,60,168);
+  cursor: pointer;
+  padding:10px;
+  font-size:1.35em;
+}
+
+input[type = "submit"]:active{
+  opacity:0.8;
+
+}
+
+
+</style>
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 6a52f86..55e6d15 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -2,4 +2,3 @@ body {
    background-color: rgb(53, 25, 60);
    margin:0;
 }
-
diff --git a/frontend/src/login.js b/frontend/src/login.js
new file mode 100644
index 0000000..3ca2456
--- /dev/null
+++ b/frontend/src/login.js
@@ -0,0 +1,6 @@
+import './assets/main.css'
+
+import { createApp } from 'vue'
+import App from './Login.vue'
+
+createApp(App).mount('#app')
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 977d357..59b267a 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -1,5 +1,4 @@
 import './assets/main.css'
-
 import 'vue3-toastify/dist/index.css';
 
 import { createApp } from 'vue'
