diff --git a/src/app/formations/details-formation/formation.component.html b/src/app/formations/details-formation/formation.component.html
index efda79c..73a35c0 100644
--- a/src/app/formations/details-formation/formation.component.html
+++ b/src/app/formations/details-formation/formation.component.html
@@ -24,41 +24,7 @@
   <!-- Afficher la liste des participants -->
   <ng-container *ngIf="formation.participations != undefined && formation.participations.length > 0">
     <h3>Liste des participants</h3>
-    <mat-table [dataSource]="dataSource">
-
-      <ng-container matColumnDef="collaborateur">
-        <mat-header-cell *matHeaderCellDef>Collaborateur</mat-header-cell>
-        <!-- Lien vers les détails du collaborateur -->
-        <mat-cell *matCellDef="let row" [routerLink]="['/collaborateurs', row.idCollaborateur]">{{row.collaborateur}}</mat-cell>
-      </ng-container>
-
-      <ng-container matColumnDef="dateinscription">
-        <mat-header-cell *matHeaderCellDef>Inscrit le</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{row.dateCreation | date :'dd/MM/yy à HH:mm'}}</mat-cell>
-      </ng-container>
-
-<!--
-      <ng-container matColumnDef="ep">
-        <mat-header-cell *matHeaderCellDef>EP</mat-header-cell>
-        <mat-cell *matCellDef="let row">
-          <p *ngIf="row.statutEP>=5" [routerLink]="['/ep',row.idEP]">Voir EP</p>
-          <p *ngIf="row.statutEP>=2 && row.statutEP<5" [routerLink]="['/ep',row.idEP]">EP en cours</p>
-          <p *ngIf="row.statutEP<=1">Attente prochain EP</p>
-        </mat-cell>
-      </ng-container>
--->
-      <ng-container matColumnDef="evaluation">
-        <mat-header-cell *matHeaderCellDef>Evaluations</mat-header-cell>
-        <mat-cell *matCellDef="let row">
-          <p *ngIf="row.estEvaluee" [routerLink]="['/collaborateurs',row.idCollaborateur,'formations','evaluation',row.id]">Voir évaluation</p>
-          <p *ngIf="!row.estEvaluee">Attente évaluation</p>
-        </mat-cell>
-      </ng-container>
-
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
-    </mat-table>
-
+    <participations-formation-table [participations]="formation.participations" [displayedColumns]="displayedColumns"></participations-formation-table>
   </ng-container>
 </ng-container>
 <mat-spinner *ngIf="formation==undefined"></mat-spinner>
diff --git a/src/app/formations/details-formation/formation.component.ts b/src/app/formations/details-formation/formation.component.ts
index 92c7b97..243a202 100644
--- a/src/app/formations/details-formation/formation.component.ts
+++ b/src/app/formations/details-formation/formation.component.ts
@@ -3,12 +3,8 @@ import { Component, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs';
 import {ActivatedRoute} from '@angular/router';
 
-import {MatTableDataSource} from '@angular/material/table';
-import {MatPaginator} from '@angular/material/paginator';
-import {MatSort} from '@angular/material/sort';
-
 import { FormationsService } from '@shared/api-swagger/api/api';
-import { FormationDTO, ParticipationFormationDTO } from "@shared/api-swagger/model/models";
+import { FormationDTO } from "@shared/api-swagger/model/models";
 
 /**
   * Composant qui permet l'affichage des détails d'une formation ainsi que de sa liste de participants.
@@ -19,26 +15,22 @@ import { FormationDTO, ParticipationFormationDTO } from "@shared/api-swagger/mod
 })
 export class FormationComponent implements OnInit {
   /**
-    * Formation à rechercher
-    */
+  * Formation à rechercher
+  */
   formation:FormationDTO;
   /**
-    * Observable pour récuperer la formation à rechercher
-    */
+  * Observable pour récuperer la formation à rechercher
+  */
   formationSubscription: Subscription;
-  /**
-    * dataSource qui stocke la liste des participations à afficher dans le Mat Table
-    */
-  dataSource : MatTableDataSource<ParticipationFormationDTO>;
 
   /**
-    * Les conlonnes à afficher dans le Mat Table
-    */
-  displayedColumns: string[]= ["agence", "collaborateur", "dateinscription", "ep"];
+  * Les conlonnes à afficher dans le Mat Table
+  */
+  displayedColumns: string[]= ["collaborateur", "dateCreation", "ep", "evaluation"];
 
   /**
-    * id de la formation à récupérer dans l'URL.
-    */
+  * id de la formation à récupérer dans l'URL.
+  */
   id:any
 
   constructor(private service:FormationsService,private route:ActivatedRoute) {}
@@ -47,20 +39,10 @@ export class FormationComponent implements OnInit {
     // récupérer l'id de la formation dans l'URL
     this.id = this.route.snapshot.paramMap.get('id');
     this.formationSubscription = this.service.getFormationById(this.id).subscribe(
-      formation => this.initFormation(formation)
+      formation => this.formation = formation
     );
   }
 
-  /**
-    * Initialisé la formation et ses participations si il y en a
-    */
-  initFormation(formation:FormationDTO) {
-    this.formation = formation;
-    if(formation.participations != undefined && formation.participations.length != 0 ) {
-      this.dataSource = new MatTableDataSource(formation.participations);
-    }
-  }
-
   /**
     * Une fois la page fermée, il est nécessaire de se désabonner des Oberservable afin d'éviter les fuites mémoires.
     */