diff --git a/src/public/css/styles.css b/src/public/css/styles.css
index da15cf562eb7e37d63746c0e2d8ee5969f169889..c735eb719c4645d5a3c310dc7f1bde65cd8f4ee6 100644
--- a/src/public/css/styles.css
+++ b/src/public/css/styles.css
@@ -11,23 +11,23 @@ body {
 table {
     width: 80%;
     border-collapse: collapse;
-    margin: 0 auto; 
+    margin: 0 auto;
 }
 
 th, td {
     border: 1px solid #000;
     padding: 20px;
     text-align: center;
-    vertical-align: top; 
-    height: 100px; 
+    vertical-align: top;
+    height: 100px;
 }
 
 th {
-    background-color: #f0f0f0; 
+    background-color: #f0f0f0;
 }
 
 .empty-cells {
-    background-color: #ccc; 
+    background-color: #ccc;
 }
 
 header {
@@ -39,29 +39,41 @@ header {
 }
 
 .logo-image {
-    height: 70px; 
+    height: 70px;
     margin-right: 5px;
-    vertical-align: middle; 
+    vertical-align: middle;
 }
 
 .logo-text {
     font-size: 24px;
     font-weight: bold;
-    vertical-align: middle; 
+    vertical-align: middle;
 }
 
 .menu-icon, .login-btn {
-    background-color: hsl(0, 0%, 87%); 
-    padding: 1px 5px;
+    background-color: #2c3e50;
+    color: #f9fafa;
+    padding: 5px 15px;
     border: 1px solid #ddd;
-    border-radius: 5px; 
-    cursor: pointer; 
+    border-radius: 12px;
+    cursor: pointer;
+}
+
+.login-menu {
+  padding-right: 5px;
+  display: flex;
+  align-items: center;
+}
+
+#username {
+  padding-left: auto;
+  padding-right: 15px;
 }
 
 .menu-icon {
-    font-size: 20px; 
-    margin-right: 10px; 
-    vertical-align: middle; 
+    font-size: 20px;
+    margin-right: 10px;
+    vertical-align: middle;
 }
 
 
@@ -76,19 +88,19 @@ header {
     align-items: center;
     width: 100%;
     padding: 0;
-    padding-right: 95px; 
+    padding-right: 95px;
 }
 
 
 .tab-btn {
     padding: 10px 20px;
     border-color: #000;
-    border-bottom: none; 
+    border-bottom: none;
     border-top-left-radius: 17px;
     border-top-right-radius: 17px;
     cursor: pointer;
     transition: background-color 0.3s;
-    margin-right: 3px; 
+    margin-right: 3px;
 }
 
 .tab-btn.active {
@@ -98,9 +110,9 @@ header {
 }
 
 .tab-btn.notactive {
-    background-color: #fff; 
+    background-color: #fff;
     font-weight: bold;
-    border-color: #ccc #ccc transparent; 
+    border-color: #ccc #ccc transparent;
 }
 
 .login-modal {
@@ -111,28 +123,28 @@ header {
     height: 100%;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     display: flex;
-    justify-content: center; 
-    z-index: 1000; 
+    justify-content: center;
+    z-index: 1000;
     padding-left: 110px;
-    background-color: rgba(0, 0, 0, 0.5); 
+    background-color: rgba(0, 0, 0, 0.5);
 }
 
 
 .login-modal .modal-content {
     padding: 20px;
-    border-radius: 30px; 
-    width: 500px; 
+    border-radius: 30px;
+    width: 500px;
     text-align: center;
     margin: auto;
-    position: relative; 
-    top: 150px; 
+    position: relative;
+    top: 150px;
 }
 
 .login-modal .modal-body {
     background-color: #c7c4c4;
     padding: 20px;
     border-radius: 30px;
-    width: 350px; 
+    width: 350px;
     text-align: center;
 }
 
@@ -141,7 +153,7 @@ header {
     width: 90%;
     padding: 10px;
     margin: 10px 0;
-    border-radius: 6px; 
+    border-radius: 6px;
 }
 
 .login-modal .modal-body button.submit-btn {
@@ -198,19 +210,19 @@ header {
 }
 
  .modal select {
-    background-color: #c7c4c4; 
-    width: 90%; 
+    background-color: #c7c4c4;
+    width: 90%;
     padding: 8px;
-    margin: 10px 0; 
+    margin: 10px 0;
     border: 1px solid #ddd;
     border-radius: 6px;
     cursor: pointer;
-    font-family: Arial, sans-serif; 
+    font-family: Arial, sans-serif;
  }
 
 .modal select option {
-    background-color: #e6e1e1; 
-    color: #000; 
+    background-color: #e6e1e1;
+    color: #000;
     padding: 5px;
 }
 
@@ -236,26 +248,26 @@ header {
 
 
 .appointment-modal .modal-buttons button {
-    background-color: #c9c5c5; 
-    padding: 5px 15px; 
+    background-color: #c9c5c5;
+    padding: 5px 15px;
     border: 1px solid #ddd;
-    border-radius: 7px; 
-    cursor: pointer; 
-    margin: 0 10px; 
-    font-size: 1rem; 
+    border-radius: 7px;
+    cursor: pointer;
+    margin: 0 10px;
+    font-size: 1rem;
     margin-top: 20px;
 }
 
 .modal-buttons {
     display: flex;
     justify-content: center;
-    gap: 20px; 
+    gap: 20px;
 }
 
-.appointment-modal h3, 
+.appointment-modal h3,
 .appointment-modal .modal-buttons button {
-    font-family: Arial, sans-serif; 
-    font-weight: bold; 
+    font-family: Arial, sans-serif;
+    font-weight: bold;
 }
 
 
@@ -272,7 +284,7 @@ header {
     justify-content: center;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
     cursor: pointer;
-    z-index: 1000; 
+    z-index: 1000;
 }
 
 .add-button-icon {
@@ -283,18 +295,18 @@ header {
 
 .calendar-button {
     position: fixed;
-    bottom: 100px; 
-    right: 20px; 
+    bottom: 100px;
+    right: 20px;
     width: 60px;
     height: 60px;
     border-radius: 50%;
-    background-color: #ffffff; 
+    background-color: #ffffff;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     box-shadow: 0 0px 10px rgba(0, 0, 0, 0.5);
-    z-index: 1000; 
+    z-index: 1000;
 }
 
 .calendar-button .calendar-icon {
@@ -307,15 +319,15 @@ header {
 
 .agenda-modal {
     position: fixed;
-    bottom: 100px; 
+    bottom: 100px;
     right: 20px;
-    width: 300px; 
+    width: 300px;
     padding: 20px;
     background-color: #e6e1e1;
     border-radius: 15px;
     box-shadow: 0 0px 8px rgba(0, 0, 0, 0.2);
     display: none;
-    z-index: 1000; 
+    z-index: 1000;
 }
 
 
@@ -417,16 +429,16 @@ header {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    background-color: #e6e1e1; 
+    background-color: #e6e1e1;
     padding: 20px;
     border-radius: 15px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    width: 400px; 
-    z-index: 1001; 
-    display: flex; 
-    flex-direction: column; 
-    justify-content: center; 
-    align-items: center; 
+    width: 400px;
+    z-index: 1001;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 }
 
 .edit-appointment-modal .modal-content h3 {
@@ -434,7 +446,7 @@ header {
     font-size: 20px;
     font-weight: bold;
     margin-bottom: 15px;
-    background-color: #c9c5c5; 
+    background-color: #c9c5c5;
     padding: 8px;
     border: 1px solid #000000;
     border-radius: 10px;
@@ -445,8 +457,8 @@ header {
 .edit-appointment-modal input[type="text"],
 .edit-appointment-modal input[type="datetime-local"],
 .edit-appointment-modal textarea {
-    background-color: #c7c4c4; 
-    width: 90%; 
+    background-color: #c7c4c4;
+    width: 90%;
     padding: 8px;
     margin: 10px 0;
     border: 1px solid #ddd;
@@ -456,15 +468,15 @@ header {
 
 
 .edit-appointment-modal .modal-buttons button {
-    padding: 10px 20px; 
-    border: 1px solid #ddd; 
-    border-radius: 7px; 
-    background-color: #c9c5c5; 
+    padding: 10px 20px;
+    border: 1px solid #ddd;
+    border-radius: 7px;
+    background-color: #c9c5c5;
     cursor: pointer;
     font-weight: bold;
     font-size: 1rem;
-    margin-top: 20px; 
-    margin-left: 10px; 
+    margin-top: 20px;
+    margin-left: 10px;
 }
 
 /* Arrière-plan -> modale */
@@ -474,8 +486,8 @@ header {
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba(0, 0, 0, 0.5); 
-    z-index: 1000; 
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
 }
 
 .modal-overlay {
@@ -485,11 +497,11 @@ header {
     right: 0;
     bottom: 0;
     background-color: rgba(0, 0, 0, 0.5);
-    z-index: 99; 
+    z-index: 99;
 }
 .modal-content {
     position: relative;
-    z-index: 100; 
+    z-index: 100;
 }
 
 /* Menu latéral */
@@ -583,4 +595,4 @@ header {
     border: 1px solid #ddd;
     border-radius: 6px;
     font-weight: bold;
-}
\ No newline at end of file
+}
diff --git a/src/views/index.ejs b/src/views/index.ejs
index e4cca54409bf33c607f7cd40d3e1fce2e23d9bab..ee6db15dfd6defdb32c2984e34ee6e173851c9d2 100644
--- a/src/views/index.ejs
+++ b/src/views/index.ejs
@@ -20,7 +20,7 @@
 
         <div class="login-menu">
             <% if(locals.user) { %>
-                <p id="username"><%= locals.user.name ?? '' %></p>
+                <p id="username">Bonjour <%= locals.user.name ?? '' %></p>
                 <button class="login-btn" onclick="logout()">Déconnexion</button>
             <% } else { %>
                 <button class="login-btn" onclick="openLoginModal()">Connexion</button>