diff --git a/src/app/formations/details-formation/formation.component.html b/src/app/formations/details-formation/formation.component.html
index f4ad466..5d4576d 100644
--- a/src/app/formations/details-formation/formation.component.html
+++ b/src/app/formations/details-formation/formation.component.html
@@ -1,2 +1,27 @@
 <app-nav-menu></app-nav-menu>
-<h1> Formation </h1>
+
+<ng-container *ngIf="formation!=undefined">
+  <h2> {{formation.intitule}} </h2>
+  <ng-container>
+    <h3>Informations générales</h3>
+    <button mat-raised-button *ngIf="formation.statut!=2">Modifier</button>
+    <p>Etat : {{getStatut(formation.statut)}}</p>
+    <p>{{dateTexte}} {{formation.dateDebut | date:"dd/MM/yyyy"}}</p>
+    <p>Origine : {{formation.origine}}</p>
+    <p>Organisme : {{ formation.organisme}}</p>
+    <p>Mode formation : {{ formation.modeFormation}}</p>
+    <p>Type formation : {{ formation.typeFormation}}</p>
+  </ng-container>
+  <ng-container>
+    <h3>Liste des participants</h3>
+    <mat-table [dataSource]=dataSource>
+    </mat-table>
+
+  </ng-container>
+</ng-container>
+POSER DES QUESTIONS A HELEN
+Heures/Jours
+Mode de formation, type de formation
+
+CREER LES PARTICIPATIONS
+<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 187aa54..654975c 100644
--- a/src/app/formations/details-formation/formation.component.ts
+++ b/src/app/formations/details-formation/formation.component.ts
@@ -1,5 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 
+import { Subscription } from 'rxjs';
+import {ActivatedRoute} from '@angular/router';
+
+import { FormationsService } from '@shared/api-swagger/api/api';
+import { FormationModel } from "@shared/api-swagger/model/models";
 /**
     */
 @Component({
@@ -7,9 +12,53 @@ import { Component, OnInit } from '@angular/core';
   templateUrl: './formation.component.html'
 })
 export class FormationComponent implements OnInit {
+  formation:FormationModel;
+  dateTexte:string = "Prévue le";
+  formationSubscription: Subscription;
+  dataSource : MatTableDataSource<DisplayParticipation>;
 
-  constructor() {}
+  constructor(private service:FormationsService,private route:ActivatedRoute) {}
 
   ngOnInit() {
+    let id = this.route.snapshot.paramMap.get('id');
+    this.formationSubscription = this.service.getFormationById(id).subscribe(
+      formation => this.initFormation(formation)
+    );
+  }
+
+  initFormation(formation:FormationModel) {
+    this.formation = formation;
+    if(this.formation.statut == 2) {
+      this.dateTexte = "Effecutée le";
+    }
+    if(this.formation.statut == 3) {
+      this.dateTexte = "Initialement prévue le";
+    }
+    if(formation.participantsFormation != undefined )
+  }
+
+  getStatut(statut:number) {
+    let value ="";
+    switch(statut) {
+      case 0:
+        value = "Plannifiée";
+        break;
+      case 1:
+        value = "Replannifiée";
+        break;
+      case 2:
+        value = "Réalisée";
+        break;
+      case 3:
+        value = "Annulée";
+        break;
+    }
+    return value;
+  }
+
+  ngOnDestroy() {
+    if(this.formationSubscription != undefined) {
+      this.formationSubscription.unsubscribe();
+    }
   }
 }
diff --git a/src/app/shared/angular-material/angular-material.module.ts b/src/app/shared/angular-material/angular-material.module.ts
index 76fa9e8..db654f7 100644
--- a/src/app/shared/angular-material/angular-material.module.ts
+++ b/src/app/shared/angular-material/angular-material.module.ts
@@ -10,7 +10,7 @@ import {MatPaginatorModule} from '@angular/material/paginator';
 import {MatTableModule} from '@angular/material/table';
 import {MatSortModule} from '@angular/material/sort';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
-
+import {MatTabsModule} from '@angular/material/tabs';
 
 /**
   * Module qui va faire l'import et l'export de tous les componsants material design qui seront utilisés dans l'application.
@@ -20,13 +20,15 @@ import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
     MatButtonModule, MatMenuModule,
     MatIconModule, MatPaginatorModule,
     MatSortModule, MatTableModule,
-    MatInputModule, MatProgressSpinnerModule
+    MatInputModule, MatProgressSpinnerModule,
+    MatTabsModule
   ],
   exports : [MatCardModule,
     MatButtonModule, MatMenuModule,
     MatIconModule, MatPaginatorModule,
     MatSortModule, MatTableModule,
-    MatInputModule, MatProgressSpinnerModule
+    MatInputModule, MatProgressSpinnerModule,
+    MatTabsModule
   ]
 })
 export class MaterialModule {}
diff --git a/src/app/shared/api-swagger/model/formationModel.ts b/src/app/shared/api-swagger/model/formationModel.ts
index bc37ae3..dcfdf7f 100644
--- a/src/app/shared/api-swagger/model/formationModel.ts
+++ b/src/app/shared/api-swagger/model/formationModel.ts
@@ -22,7 +22,6 @@ export interface FormationModel {
     jours?: number;
     origine: string;
     organisme: string;
-    nomFormateur: string;
     participantsFormation?: Array<ParticipationFormationModel>;
     modeFormation?: string;
     typeFormation?: string;
diff --git a/src/app/shared/api-swagger/model/participationFormationModel.ts b/src/app/shared/api-swagger/model/participationFormationModel.ts
index 3216032..f100d5a 100644
--- a/src/app/shared/api-swagger/model/participationFormationModel.ts
+++ b/src/app/shared/api-swagger/model/participationFormationModel.ts
@@ -3,7 +3,7 @@
  * API qui sra utilisée afin de faire communiquer le client et le serveur ainsi que le serveur et la boîte noire.
  *
  * OpenAPI spec version: 1.1.0
- * 
+ *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
  * https://github.com/swagger-api/swagger-codegen.git
@@ -13,9 +13,9 @@ import { CollaborateurModel } from './collaborateurModel';
 import { EvaluationFormationModel } from './evaluationFormationModel';
 import { FormationModel } from './formationModel';
 
-export interface ParticipationFormationModel { 
-    idParticipation: number;
+export interface ParticipationFormationModel {
+    id: number;
     formation: FormationModel;
     collaborateur: CollaborateurModel;
     evaluation?: Array<EvaluationFormationModel>;
-}
\ No newline at end of file
+}
diff --git a/src/app/shared/api-swagger/model/saisieModel.ts b/src/app/shared/api-swagger/model/saisieModel.ts
index cc3b6a8..c88ee3c 100644
--- a/src/app/shared/api-swagger/model/saisieModel.ts
+++ b/src/app/shared/api-swagger/model/saisieModel.ts
@@ -3,7 +3,7 @@
  * API qui sra utilisée afin de faire communiquer le client et le serveur ainsi que le serveur et la boîte noire.
  *
  * OpenAPI spec version: 1.1.0
- * 
+ *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
  * https://github.com/swagger-api/swagger-codegen.git
@@ -11,8 +11,8 @@
  */
 import { ChampModel } from './champModel';
 
-export interface SaisieModel { 
-    idSaisie?: string;
+export interface SaisieModel {
+    id?: string;
     type?: string;
     champ?: ChampModel;
-}
\ No newline at end of file
+}
diff --git a/src/app/shared/api-swagger/model/themeModel.ts b/src/app/shared/api-swagger/model/themeModel.ts
index 4111cb0..37b5d55 100644
--- a/src/app/shared/api-swagger/model/themeModel.ts
+++ b/src/app/shared/api-swagger/model/themeModel.ts
@@ -3,14 +3,14 @@
  * API qui sra utilisée afin de faire communiquer le client et le serveur ainsi que le serveur et la boîte noire.
  *
  * OpenAPI spec version: 1.1.0
- * 
+ *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
  * https://github.com/swagger-api/swagger-codegen.git
  * Do not edit the class manually.
  */
 
-export interface ThemeModel { 
-    idTheme: number;
+export interface ThemeModel {
+    id: number;
     nom: string;
-}
\ No newline at end of file
+}
diff --git a/src/app/shared/displayInfo/displayFormation.ts b/src/app/shared/displayInfo/displayFormation.ts
new file mode 100644
index 0000000..c390539
--- /dev/null
+++ b/src/app/shared/displayInfo/displayFormation.ts
@@ -0,0 +1,10 @@
+import { FormationModel } from "@shared/api-swagger/model/models";
+
+export class DisplayFormation {
+  id: number;
+  intitule: string;
+  nbParticipants : number;
+  datePrevu: Date;
+  origine : string;
+  statut: FormationModel.StatusEnum;
+}
diff --git a/src/app/shared/displayInfo/displayParticipation.ts b/src/app/shared/displayInfo/displayParticipation.ts
new file mode 100644
index 0000000..817db04
--- /dev/null
+++ b/src/app/shared/displayInfo/displayParticipation.ts
@@ -0,0 +1,8 @@
+
+
+export class displayParticipation {
+  id: number;
+  intitule: string;
+  collaborateur: string;
+  referent: string;
+}
diff --git a/src/app/shared/displayInfo/displays.ts b/src/app/shared/displayInfo/displays.ts
new file mode 100644
index 0000000..bcc463a
--- /dev/null
+++ b/src/app/shared/displayInfo/displays.ts
@@ -0,0 +1,3 @@
+export * from "./displayEP";
+export * from "./displayCollaborateur";
+export * from "./displayFormation";