diff --git a/FencerJudgeFront/src/app/components/essentials/header/header.component.html b/FencerJudgeFront/src/app/components/essentials/header/header.component.html
index 38e238f..d0e7a6f 100644
--- a/FencerJudgeFront/src/app/components/essentials/header/header.component.html
+++ b/FencerJudgeFront/src/app/components/essentials/header/header.component.html
@@ -17,8 +17,6 @@
             class="nav-link"
             routerLink="/matches"
             routerLinkActive="active-link"
-            [routerLinkActiveOptions]="{ exact: isHomeActiveBool() }"
-            [class.active-link]="isHomeActive()"
           >
             Matchs
           </a>
diff --git a/FencerJudgeFront/src/app/components/essentials/header/header.component.ts b/FencerJudgeFront/src/app/components/essentials/header/header.component.ts
index cb059ae..6b0a735 100644
--- a/FencerJudgeFront/src/app/components/essentials/header/header.component.ts
+++ b/FencerJudgeFront/src/app/components/essentials/header/header.component.ts
@@ -12,11 +12,11 @@ export class HeaderComponent {
   constructor(private router: Router, public authService: AuthService) {}
 
   isHomeActive(): boolean {
-    return this.router.url === '/' || this.router.url === '/list';
+    return this.router.url === '/' || this.router.url === '/home';
   }
 
   isHomeActiveBool(): boolean {
-    if (this.router.url != '/list') {
+    if (this.router.url != '/home') {
       return true;
     } else {
       return false;
diff --git a/FencerJudgeFront/src/app/components/essentials/login/login.component.css b/FencerJudgeFront/src/app/components/essentials/login/login.component.css
index af759d0..2a0292b 100644
--- a/FencerJudgeFront/src/app/components/essentials/login/login.component.css
+++ b/FencerJudgeFront/src/app/components/essentials/login/login.component.css
@@ -1,15 +1,8 @@
-body {
-  margin: 0;
-  font-family: 'Segoe UI', sans-serif;
-  background: linear-gradient(to bottom, #235d4f, #63b48c);
-  color: #fff;
-}
-
 .login-container {
   display: flex;
   justify-content: center;
   align-items: center;
-  min-height: 100vh;
+  min-height: 25vh;
   padding: 2rem;
 }
 
@@ -22,13 +15,43 @@ body {
   color: #333;
 }
 
+.login-header-img {
+  position: absolute;
+  height: inherit;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.25);
+  top: 0;
+  left: 0;
+}
+
 .login-header {
-  background: url('https://www.lejdd.fr/lmnr/var/jdd/public/media/image/2022/07/19/12/escrime-comment-les-francais-apprivoisent-leurs-armes.jpg?VersionId=Mw31AogdDUwVLuCaVdxMozm9kito7TTP') no-repeat center/cover;
-  text-align: center;
-  padding: 2rem 1rem;
+  background: url("https://www.lejdd.fr/lmnr/var/jdd/public/media/image/2022/07/19/12/escrime-comment-les-francais-apprivoisent-leurs-armes.jpg?VersionId=Mw31AogdDUwVLuCaVdxMozm9kito7TTP")
+    no-repeat center/cover;
+  position: relative;
+  padding: 4rem 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 300px;
   color: white;
 }
 
+.login-header::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.3); /* voile sombre */
+  backdrop-filter: blur(2px); /* effet de flou */
+  z-index: 1;
+  border-radius: 0.5rem;
+}
+
+.login-header h1 {
+  position: relative;
+  z-index: 2;
+  padding: 2rem;
+}
+
 .login-header h2 {
   margin-bottom: 0.5rem;
 }
diff --git a/FencerJudgeFront/src/app/components/essentials/login/login.component.html b/FencerJudgeFront/src/app/components/essentials/login/login.component.html
index 1fc3520..980a230 100644
--- a/FencerJudgeFront/src/app/components/essentials/login/login.component.html
+++ b/FencerJudgeFront/src/app/components/essentials/login/login.component.html
@@ -1,25 +1,29 @@
 <div class="login-container">
   <div class="login-card">
     <div class="login-header">
-      <h2>Bienvenue sur le site</h2>
-      <p>Suivez les matchs d'escrime en direct, de n'importe où !</p>
+      <h1>Connexion au compte</h1>
     </div>
     <form (ngSubmit)="onSubmit()" class="login-form">
-      <h3>Connexion au compte</h3>
-
       <div class="input-group">
         <span class="icon">👤</span>
-        <input type="email" name="email" [(ngModel)]="email" placeholder="Nom utilisateur" required />
+        <input
+          type="email"
+          name="email"
+          [(ngModel)]="email"
+          placeholder="Nom utilisateur"
+          required
+        />
       </div>
 
       <div class="input-group">
         <span class="icon">🔒</span>
-        <input type="password" name="password" [(ngModel)]="password" placeholder="Mot de passe" required />
-      </div>
-
-      <div class="options">
-        <label><input type="checkbox" /> Se souvenir</label>
-        <a href="#">Mot de passe oublié ?</a>
+        <input
+          type="password"
+          name="password"
+          [(ngModel)]="password"
+          placeholder="Mot de passe"
+          required
+        />
       </div>
 
       <button type="submit" class="login-btn">Connexion</button>