diff --git a/FencerJudgeFront/src/app/app-routing.module.ts b/FencerJudgeFront/src/app/app-routing.module.ts
index 0f8009a..f88972f 100644
--- a/FencerJudgeFront/src/app/app-routing.module.ts
+++ b/FencerJudgeFront/src/app/app-routing.module.ts
@@ -4,10 +4,12 @@ import { RouterModule, Routes } from '@angular/router';
 import { authGuard } from '@guards/auth.guard';
 
 import { LoginComponent } from './components/essentials/login/login.component';
+import { LogoutComponent } from './components/essentials/logout/logout.component';
 import { HomeComponent } from './components/home/home.component';
 
 const routes: Routes = [
   { path: 'login', component: LoginComponent },
+  { path: 'logout', component: LogoutComponent },
   { path: '', component: HomeComponent },
   { path: 'home', component: HomeComponent },
 ];
diff --git a/FencerJudgeFront/src/app/components/essentials/footer/footer.component.html b/FencerJudgeFront/src/app/components/essentials/footer/footer.component.html
index 28c0d7d..d280498 100644
--- a/FencerJudgeFront/src/app/components/essentials/footer/footer.component.html
+++ b/FencerJudgeFront/src/app/components/essentials/footer/footer.component.html
@@ -1 +1,58 @@
-<p>footer works!</p>
+<footer class="bg-primary 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">
+        <img
+          src="/assets/Logo/favicon.png"
+          alt="Angular Covid"
+          height="50"
+          class="me-2"
+        />
+        <span class="fs-4 fw-bold">FencerJudge</span>
+      </div>
+      <div
+        class="col-md-4 offset-md-4 d-flex justify-content-end align-items-center"
+      >
+        <span class="me-3">Suivez-nous</span>
+        <a
+          href="#"
+          class="text-white me-2 d-flex align-items-center justify-content-center rounded-circle bg-light p-2"
+          style="width: 40px; height: 40px"
+          ><i class="bi bi-rss text-dark"></i
+        ></a>
+        <a
+          href="#"
+          class="text-white me-2 d-flex align-items-center justify-content-center rounded-circle bg-light p-2"
+          style="width: 40px; height: 40px"
+          ><i class="bi bi-twitter-x text-dark"></i
+        ></a>
+        <a
+          href="#"
+          class="text-white me-2 d-flex align-items-center justify-content-center rounded-circle bg-light p-2"
+          style="width: 40px; height: 40px"
+          ><i class="bi bi-facebook text-dark"></i
+        ></a>
+        <a
+          href="#"
+          class="text-white me-2 d-flex align-items-center justify-content-center rounded-circle bg-light p-2"
+          style="width: 40px; height: 40px"
+          ><i class="bi bi-youtube text-dark"></i
+        ></a>
+        <a
+          href="#"
+          class="text-white d-flex align-items-center justify-content-center rounded-circle bg-light p-2"
+          style="width: 40px; height: 40px"
+          ><i class="bi bi-linkedin text-dark"></i
+        ></a>
+      </div>
+    </div>
+    <div class="text-center mt-3">
+      <span>&copy; FencerJudge - Tous droits réservés </span>
+      <a href="#" class="text-white me-3 SpaceMargin-02">Mentions légales</a>
+      <a href="#" class="text-white me-3">Cookies</a>
+      <a href="#" class="text-white me-3">Accessibilité</a>
+      <a routerLink="/contact" class="text-white me-3">Nous contacter</a>
+      <a routerLink="/blogs" class="text-white me-3">Presse</a>
+    </div>
+  </div>
+</footer>
diff --git a/FencerJudgeFront/src/app/components/essentials/header/header.component.html b/FencerJudgeFront/src/app/components/essentials/header/header.component.html
index 4f5a95d..b68cf30 100644
--- a/FencerJudgeFront/src/app/components/essentials/header/header.component.html
+++ b/FencerJudgeFront/src/app/components/essentials/header/header.component.html
@@ -1 +1,45 @@
-<p>header works!</p>
+<!-- Navbar Bootstrap -->
+<nav class="navbar navbar-expand-lg navbar-dark bg-primary-custom">
+  <div class="container">
+    <a class="navbar-brand" routerLink="/">FencerJudge</a>
+    <button
+      class="navbar-toggler"
+      type="button"
+      data-bs-toggle="collapse"
+      data-bs-target="#navbarNav"
+    >
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarNav">
+      <ul class="navbar-nav ms-auto">
+        <li class="nav-item">
+          <a
+            class="nav-link"
+            routerLink="/matches"
+            routerLinkActive="active-link"
+            [routerLinkActiveOptions]="{ exact: isHomeActiveBool() }"
+            [class.active-link]="isHomeActive()"
+          >
+            Match
+          </a>
+        </li>
+        <li
+          class="nav-item"
+          *ngIf="authService.isAuthenticated(); else notLoggedIn"
+        >
+          <a
+            class="nav-link"
+            routerLink="/logout"
+            routerLinkActive="active-link"
+            >Admin</a
+          >
+        </li>
+        <ng-template #notLoggedIn>
+          <a class="nav-link" routerLink="/login" routerLinkActive="active-link"
+            >Connexion</a
+          >
+        </ng-template>
+      </ul>
+    </div>
+  </div>
+</nav>
diff --git a/FencerJudgeFront/src/app/components/essentials/header/header.component.ts b/FencerJudgeFront/src/app/components/essentials/header/header.component.ts
index ffc3163..8d32d92 100644
--- a/FencerJudgeFront/src/app/components/essentials/header/header.component.ts
+++ b/FencerJudgeFront/src/app/components/essentials/header/header.component.ts
@@ -1,4 +1,6 @@
 import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { AuthService } from '@services/auth.service';
 
 @Component({
   selector: 'app-header',
@@ -6,4 +8,18 @@ import { Component } from '@angular/core';
   templateUrl: './header.component.html',
   styleUrl: './header.component.css',
 })
-export class HeaderComponent {}
+export class HeaderComponent {
+  constructor(private router: Router, public authService: AuthService) {}
+
+  isHomeActive(): boolean {
+    return this.router.url === '/' || this.router.url === '/list';
+  }
+
+  isHomeActiveBool(): boolean {
+    if (this.router.url != '/list') {
+      return true;
+    } else {
+      return false;
+    }
+  }
+}
diff --git a/FencerJudgeFront/src/app/components/essentials/logout/logout.component.ts b/FencerJudgeFront/src/app/components/essentials/logout/logout.component.ts
index f8b8892..6da5b61 100644
--- a/FencerJudgeFront/src/app/components/essentials/logout/logout.component.ts
+++ b/FencerJudgeFront/src/app/components/essentials/logout/logout.component.ts
@@ -1,11 +1,16 @@
 import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { AuthService } from '@services/auth.service';
 
 @Component({
   selector: 'app-logout',
   standalone: false,
   templateUrl: './logout.component.html',
-  styleUrl: './logout.component.css'
+  styleUrl: './logout.component.css',
 })
 export class LogoutComponent {
-
+  constructor(private authService: AuthService, private router: Router) {
+    this.authService.logout();
+    this.router.navigate(['/']); // Redirection après déconnexion
+  }
 }
diff --git a/FencerJudgeFront/src/styles.css b/FencerJudgeFront/src/styles.css
index 90d4ee0..c44aac6 100644
--- a/FencerJudgeFront/src/styles.css
+++ b/FencerJudgeFront/src/styles.css
@@ -1 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
+.bg-primary-custom {
+  background-color: #414141;
+}