diff --git a/FencerJudgeFront/src/app/components/essentials/footer/footer.component.css b/FencerJudgeFront/src/app/components/essentials/footer/footer.component.css
index e69de29..a76370e 100644
--- a/FencerJudgeFront/src/app/components/essentials/footer/footer.component.css
+++ b/FencerJudgeFront/src/app/components/essentials/footer/footer.component.css
@@ -0,0 +1,21 @@
+
+.footer-gris {
+  background-color: #2c2c2c; /* Gris foncé personnalisé */
+}
+
+.flag-bar {
+  height: 6px;          /* épaisseur du trait */
+  width: 100%;          /* toute la largeur */
+  background: linear-gradient(
+    to right,
+    #0055a4 0%,        /* bleu */
+    #0055a4 33.33%,    /* 1/3 */
+    #fff 33.33%,       /* blanc */
+    #fff 66.66%,       /* 2/3 */
+    #ef4135 66.66%,    /* rouge */
+    #ef4135 100%
+  );
+  margin-bottom: 8px;
+  border-radius: 3px;   /* optionnel, pour arrondir les bords */
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
\ No newline at end of file
diff --git a/FencerJudgeFront/src/app/components/essentials/footer/footer.component.html b/FencerJudgeFront/src/app/components/essentials/footer/footer.component.html
index d280498..01eca56 100644
--- a/FencerJudgeFront/src/app/components/essentials/footer/footer.component.html
+++ b/FencerJudgeFront/src/app/components/essentials/footer/footer.component.html
@@ -1,4 +1,4 @@
-<footer class="bg-primary text-white py-3">
+<footer class="footer-gris text-white py-3">
   <div class="container">
     <div class="row align-items-center">
       <div class="col-md-4 d-flex align-items-center text-start">
@@ -54,5 +54,6 @@
       <a routerLink="/contact" class="text-white me-3">Nous contacter</a>
       <a routerLink="/blogs" class="text-white me-3">Presse</a>
     </div>
+    <div class="flag-bar" title="France"></div>
   </div>
 </footer>
diff --git a/FencerJudgeFront/src/app/components/essentials/header/header.component.css b/FencerJudgeFront/src/app/components/essentials/header/header.component.css
index e69de29..9df8f3d 100644
--- a/FencerJudgeFront/src/app/components/essentials/header/header.component.css
+++ b/FencerJudgeFront/src/app/components/essentials/header/header.component.css
@@ -0,0 +1,25 @@
+.navbar {
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+
+.navbar-brand {
+  font-weight: 700;
+  font-size: 1.4rem;
+  display: flex;
+  align-items: center;
+}
+
+.navbar-brand img {
+  height: 30px;
+  margin-right: 0.5rem;
+}
+
+.nav-link {
+  transition: color 0.3s ease;
+}
+
+.nav-link:hover,
+.active-link {
+  color: #ffcc00 !important;
+  font-weight: 600;
+}
diff --git a/FencerJudgeFront/src/app/components/essentials/header/header.component.html b/FencerJudgeFront/src/app/components/essentials/header/header.component.html
index b68cf30..38e238f 100644
--- a/FencerJudgeFront/src/app/components/essentials/header/header.component.html
+++ b/FencerJudgeFront/src/app/components/essentials/header/header.component.html
@@ -20,7 +20,7 @@
             [routerLinkActiveOptions]="{ exact: isHomeActiveBool() }"
             [class.active-link]="isHomeActive()"
           >
-            Match
+            Matchs
           </a>
         </li>
         <li
diff --git a/FencerJudgeFront/src/app/components/essentials/login/login.component.css b/FencerJudgeFront/src/app/components/essentials/login/login.component.css
index e69de29..af759d0 100644
--- a/FencerJudgeFront/src/app/components/essentials/login/login.component.css
+++ b/FencerJudgeFront/src/app/components/essentials/login/login.component.css
@@ -0,0 +1,101 @@
+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;
+  padding: 2rem;
+}
+
+.login-card {
+  background-color: #fff;
+  border-radius: 12px;
+  overflow: hidden;
+  width: 500px;
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
+  color: #333;
+}
+
+.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;
+  color: white;
+}
+
+.login-header h2 {
+  margin-bottom: 0.5rem;
+}
+
+.login-header p {
+  font-size: 0.85rem;
+  line-height: 1.4;
+}
+
+.login-form {
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.login-form h3 {
+  text-align: center;
+  color: #235d4f;
+  margin-bottom: 1rem;
+}
+
+.input-group {
+  display: flex;
+  align-items: center;
+  background-color: #235d4f;
+  border-radius: 30px;
+  padding: 0.5rem 1rem;
+}
+
+.input-group .icon {
+  color: white;
+  margin-right: 0.5rem;
+}
+
+.input-group input {
+  border: none;
+  background: none;
+  color: white;
+  width: 100%;
+  font-size: 1rem;
+  outline: none;
+}
+
+.options {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.85rem;
+  color: #555;
+}
+
+.options a {
+  color: #235d4f;
+  text-decoration: none;
+}
+
+.login-btn {
+  background-color: #235d4f;
+  color: white;
+  padding: 0.6rem;
+  border: none;
+  border-radius: 6px;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.login-btn:hover {
+  background-color: #1b4b3d;
+}
diff --git a/FencerJudgeFront/src/app/components/essentials/login/login.component.html b/FencerJudgeFront/src/app/components/essentials/login/login.component.html
index 4028cda..1fc3520 100644
--- a/FencerJudgeFront/src/app/components/essentials/login/login.component.html
+++ b/FencerJudgeFront/src/app/components/essentials/login/login.component.html
@@ -1,18 +1,28 @@
-<form (ngSubmit)="onSubmit()">
-  <input
-    type="email"
-    [(ngModel)]="email"
-    name="email"
-    placeholder="Email"
-    required
-  />
-  <input
-    type="password"
-    [(ngModel)]="password"
-    name="password"
-    placeholder="Mot de passe"
-    required
-  />
-  <button type="submit">Connexion</button>
-  <div *ngIf="errorMessage">{{ errorMessage }}</div>
-</form>
+<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>
+    </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 />
+      </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>
+      </div>
+
+      <button type="submit" class="login-btn">Connexion</button>
+    </form>
+  </div>
+</div>
diff --git a/FencerJudgeFront/src/app/components/home/home.component.html b/FencerJudgeFront/src/app/components/home/home.component.html
index 5f2c53f..a1ac75f 100644
--- a/FencerJudgeFront/src/app/components/home/home.component.html
+++ b/FencerJudgeFront/src/app/components/home/home.component.html
@@ -1 +1 @@
-<p>home works!</p>
+<p>HELLO !</p>