diff --git a/FencerJudgeFront/src/app/app-routing.module.ts b/FencerJudgeFront/src/app/app-routing.module.ts
index f88972f..5bf8bf7 100644
--- a/FencerJudgeFront/src/app/app-routing.module.ts
+++ b/FencerJudgeFront/src/app/app-routing.module.ts
@@ -6,12 +6,14 @@ 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';
+import { MatchesComponent } from './components/matches/matches.component';
 
 const routes: Routes = [
   { path: 'login', component: LoginComponent },
   { path: 'logout', component: LogoutComponent },
   { path: '', component: HomeComponent },
   { path: 'home', component: HomeComponent },
+  { path: 'matches', component: MatchesComponent },
 ];
 
 @NgModule({
diff --git a/FencerJudgeFront/src/app/app.module.ts b/FencerJudgeFront/src/app/app.module.ts
index 1a172c4..a3dd923 100644
--- a/FencerJudgeFront/src/app/app.module.ts
+++ b/FencerJudgeFront/src/app/app.module.ts
@@ -9,6 +9,7 @@ import { FooterComponent } from './components/essentials/footer/footer.component
 import { HomeComponent } from './components/home/home.component';
 import { LoginComponent } from './components/essentials/login/login.component';
 import { LogoutComponent } from './components/essentials/logout/logout.component';
+import { MatchesComponent } from './components/matches/matches.component';
 
 @NgModule({
   declarations: [
@@ -18,6 +19,7 @@ import { LogoutComponent } from './components/essentials/logout/logout.component
     HomeComponent,
     LoginComponent,
     LogoutComponent,
+    MatchesComponent,
   ],
   imports: [BrowserModule, AppRoutingModule, FormsModule],
   providers: [],
diff --git a/FencerJudgeFront/src/app/components/matches/matches.component.css b/FencerJudgeFront/src/app/components/matches/matches.component.css
new file mode 100644
index 0000000..2fa4ff6
--- /dev/null
+++ b/FencerJudgeFront/src/app/components/matches/matches.component.css
@@ -0,0 +1,8 @@
+.border-start-5 {
+  border-left: 5px solid #ccc;
+}
+
+.card:hover {
+  transform: translateY(-2px);
+  transition: 0.2s ease-in-out;
+}
diff --git a/FencerJudgeFront/src/app/components/matches/matches.component.html b/FencerJudgeFront/src/app/components/matches/matches.component.html
new file mode 100644
index 0000000..a5561bb
--- /dev/null
+++ b/FencerJudgeFront/src/app/components/matches/matches.component.html
@@ -0,0 +1,51 @@
+<div class="container my-4">
+  <h2 class="mb-4 text-center">Liste des Matchs</h2>
+
+  <div class="row g-4">
+    <div class="col-md-6" *ngFor="let match of matches">
+      <div
+        class="card shadow-sm border-start-5"
+        [ngClass]="getMatchBorderColor(match.state)"
+      >
+        <div class="card-body">
+          <div class="d-flex justify-content-between align-items-center mb-2">
+            <h5 class="mb-0">
+              {{ match.city }} —
+              <small class="text-muted">{{
+                match.date | date : "longDate"
+              }}</small>
+            </h5>
+            <span class="badge bg-light text-dark">{{ match.weapon }}</span>
+          </div>
+
+          <div class="d-flex justify-content-between align-items-center">
+            <div class="text-start">
+              <strong>{{ getPlayerName(match.player1ID) }}</strong>
+              <span class="badge bg-primary ms-2">{{ match.score1 }}</span>
+            </div>
+
+            <div class="text-center text-muted">vs</div>
+
+            <div class="text-end">
+              <strong>{{ getPlayerName(match.player2ID) }}</strong>
+              <span class="badge bg-primary ms-2">{{ match.score2 }}</span>
+            </div>
+          </div>
+
+          <div class="mt-3">
+            <span
+              class="badge"
+              [ngClass]="{
+                'bg-secondary': match.state === MatchState.NOT_STARTED,
+                'bg-warning text-dark': match.state === MatchState.ONGOING,
+                'bg-success': match.state === MatchState.OVER
+              }"
+            >
+              {{ getMatchStatusLabel(match.state) }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/FencerJudgeFront/src/app/components/matches/matches.component.spec.ts b/FencerJudgeFront/src/app/components/matches/matches.component.spec.ts
new file mode 100644
index 0000000..7f7c3e1
--- /dev/null
+++ b/FencerJudgeFront/src/app/components/matches/matches.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MatchesComponent } from './matches.component';
+
+describe('MatchesComponent', () => {
+  let component: MatchesComponent;
+  let fixture: ComponentFixture<MatchesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [MatchesComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MatchesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/FencerJudgeFront/src/app/components/matches/matches.component.ts b/FencerJudgeFront/src/app/components/matches/matches.component.ts
new file mode 100644
index 0000000..935e3d1
--- /dev/null
+++ b/FencerJudgeFront/src/app/components/matches/matches.component.ts
@@ -0,0 +1,66 @@
+import { Component } from '@angular/core';
+
+import { MatchesService } from '@services/matches.service';
+import { Matches, MatchState } from '@interfaces/matches';
+
+import { PlayerService } from '@services/player.service';
+import { Player } from '@interfaces/player';
+
+@Component({
+  selector: 'app-matches',
+  standalone: false,
+  templateUrl: './matches.component.html',
+  styleUrl: './matches.component.css',
+})
+export class MatchesComponent {
+  matches: Matches[] = [];
+  playersMap: Map<number, Player> = new Map();
+  MatchState = MatchState;
+
+  constructor(
+    private matchesService: MatchesService,
+    private playerService: PlayerService
+  ) {}
+
+  ngOnInit(): void {
+    this.playerService.getPlayers().subscribe((players) => {
+      // construire la map ID -> joueur
+      players.forEach((player) => this.playersMap.set(player.id, player));
+    });
+
+    this.matchesService.getMatches().subscribe((data) => {
+      this.matches = data;
+    });
+  }
+
+  getPlayerName(id: number): string {
+    const player = this.playersMap.get(id);
+    return player ? `${player.firstName} ${player.name}` : 'Joueur inconnu';
+  }
+
+  getMatchBorderColor(state: MatchState): string {
+    switch (state) {
+      case MatchState.NOT_STARTED:
+        return 'border-secondary';
+      case MatchState.ONGOING:
+        return 'border-warning';
+      case MatchState.OVER:
+        return 'border-success';
+      default:
+        return 'border-light';
+    }
+  }
+
+  getMatchStatusLabel(state: MatchState): string {
+    switch (state) {
+      case MatchState.NOT_STARTED:
+        return 'À venir';
+      case MatchState.ONGOING:
+        return 'En cours';
+      case MatchState.OVER:
+        return 'Terminé';
+      default:
+        return 'Inconnu';
+    }
+  }
+}