diff --git a/src/app/ep/details-ep/details-ep.component.css b/src/app/ep/details-ep/details-ep.component.css
index bf89f1e..7db43e7 100644
--- a/src/app/ep/details-ep/details-ep.component.css
+++ b/src/app/ep/details-ep/details-ep.component.css
@@ -1,4 +1,4 @@
-.saisie {
+/*.saisie {
     overflow-y: scroll;
-    height: 60%;
-}
\ No newline at end of file
+    height: 100%;
+}*/
\ No newline at end of file
diff --git a/src/app/ep/details-ep/details-ep.component.html b/src/app/ep/details-ep/details-ep.component.html
index c90b58b..78f0b8e 100644
--- a/src/app/ep/details-ep/details-ep.component.html
+++ b/src/app/ep/details-ep/details-ep.component.html
@@ -1,22 +1,22 @@
 <app-nav-menu></app-nav-menu>
-<div class="detailsep">
-    <p> Collaborateur : NOM PRENOM (AGENCE) <button mat-stroked-button>Accéder au détails</button></p> 
-    <p> Référent : NOM PRENOM </p>
-    <p> Entretien le : dd/MM/yyyy</p>
-    <p> EPA</p>
+<div *ngIf="ep!=undefined" class="detailsep">
+    <p> Collaborateur : {{ep.collaborateur.nom}} {{ep.collaborateur.prenom}} ({{ep.collaborateur.businessUnit.nom}}) <button mat-stroked-button [routerLink]="['/collaborateurs',ep.collaborateur.id]">Accéder au détails collaborateur</button></p> 
+    <p> Référent : {{ep.referent.nom}} {{ep.referent.prenom}} </p>
+    <p> Entretien le : {{ep.datePrevisionnelle | date: 'dd/MM/yyyy'}}</p>
+    <p> Statut : {{afficherTypeEP(ep.statut)}}</p>
 
     <button mat-raised-button color="primary" title="Valider le déroulement de l'entretien">Valider entretien</button>
 
     <button mat-raised-button color="primary" title="Signer l'EP">Signer</button>
 
     <mat-tab-group mat-align-tabs="start">
+        <mat-tab label="Les objectifs">
+            <ep-objectifs [ep]="ep"></ep-objectifs>
+        </mat-tab>
+       
         <mat-tab label="La saisie">
             
             <mat-vertical-stepper class="saisie" linear  #stepper>
-                <mat-step label="Les objectifs précédents" completed="true">
-
-                </mat-step>
-
                 <mat-step label="Mission/Projet" completed="true">
 
                 </mat-step>
@@ -33,19 +33,7 @@
 
                 </mat-step>
 
-                <mat-step label="Objectifs" completed="true">
-
-                </mat-step>
-
-
-                <mat-step label="Engagements" completed="true">
-
-
-                </mat-step>
-
-                <mat-step label="Demandes de formation" completed="true">
 
-                </mat-step>
                 <mat-step label="Demande d'augmentation salaire" completed="true">
 
                 </mat-step>
@@ -59,13 +47,11 @@
                 </mat-step>
 
             </mat-vertical-stepper>
+        </mat-tab>
 
+        <mat-tab label="Les engagements"></mat-tab>
+        <mat-tab label="Les demandes de formation"></mat-tab>
 
-
-
-
-
-        </mat-tab>
         <mat-tab label="Commentaire assistant">
             Ajout et consultation des commentaires (pour les assistants)
         </mat-tab>
@@ -86,7 +72,9 @@
 
       </mat-tab-group>
 </div>
-
+<ng-container *ngIf="ep==undefined">
+    <mat-spinner></mat-spinner>
+</ng-container>
 <!--
 
     <ng-container *ngIf="ep == undefined" >
diff --git a/src/app/ep/details-ep/details-ep.component.ts b/src/app/ep/details-ep/details-ep.component.ts
index 253d9b9..91cafa1 100644
--- a/src/app/ep/details-ep/details-ep.component.ts
+++ b/src/app/ep/details-ep/details-ep.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
-import { EpDTO, EpService } from "@shared/api-swagger";
+import { affichageStatut, EpDTO, EpService, StatutEp } from "@shared/api-swagger";
 import { AuthService } from "@shared/auth/auth.service";
 import { Role } from "@shared/utils/roles";
 import { Subscription } from "rxjs";
@@ -34,4 +34,8 @@ export class DetailsEPComponent implements OnInit {
             err => console.log(err) 
         );
     }
+
+    afficherTypeEP(statutEP: StatutEp) {
+        return affichageStatut(statutEP);
+    }
 }
\ No newline at end of file
diff --git a/src/app/ep/details-ep/ep-objectifs/ep-objectifs.component.css b/src/app/ep/details-ep/ep-objectifs/ep-objectifs.component.css
new file mode 100644
index 0000000..dfe80e6
--- /dev/null
+++ b/src/app/ep/details-ep/ep-objectifs/ep-objectifs.component.css
@@ -0,0 +1,14 @@
+li {
+    margin-bottom: 1%;
+}
+.Atteint {
+    color: green
+}
+
+.NonAtteint{
+    color: red
+}
+
+.Partiel {
+    color: orange
+}
\ No newline at end of file
diff --git a/src/app/ep/details-ep/ep-objectifs/ep-objectifs.component.html b/src/app/ep/details-ep/ep-objectifs/ep-objectifs.component.html
new file mode 100644
index 0000000..f25f3fa
--- /dev/null
+++ b/src/app/ep/details-ep/ep-objectifs/ep-objectifs.component.html
@@ -0,0 +1,21 @@
+<ng-container  *ngIf="ep.objectifs != undefined && ep.objectifs != []">
+    <h3>Nouveaux objectifs</h3>
+    <ul>
+        <li *ngFor= "let objectif of ep.objectifs; let index = index" >
+            Objectif {{index +1}} : {{objectif.libelle}} 
+            
+        </li>
+    </ul>
+</ng-container>
+
+<ng-container *ngIf="ep.objectifsPrecedent != undefined && ep.objectifsPrecedent != []">
+    <h3>Objectifs précédents</h3>
+    <ul>
+        <li *ngFor= "let objectif of ep.objectifsPrecedent; let index = index">
+            <p [ngClass]="objectif.statutObjectif"> Objectif {{index +1}} : {{objectif.libelle}} ({{afficherStatutObjectif(objectif.statutObjectif)}})</p>
+            <p *ngIf="objectif.commentaire != undefined && objectif.commentaire != ''"> Commentaire : {{objectif.commentaire}}</p>
+        </li>
+    </ul>
+</ng-container>
+
+
diff --git a/src/app/ep/details-ep/ep-objectifs/ep-objectifs.component.ts b/src/app/ep/details-ep/ep-objectifs/ep-objectifs.component.ts
new file mode 100644
index 0000000..2de838f
--- /dev/null
+++ b/src/app/ep/details-ep/ep-objectifs/ep-objectifs.component.ts
@@ -0,0 +1,19 @@
+import {  Component, Input } from "@angular/core";
+import { afficherStatutObjectif, EpDTO, StatutObjectif } from "@shared/api-swagger";
+
+
+@Component({
+    selector : "ep-objectifs",
+    templateUrl: "ep-objectifs.component.html",
+    styleUrls: ["ep-objectifs.component.css"]
+})
+export class EpObjectifsComponent {
+    
+    @Input() ep : EpDTO;
+
+    constructor(){}
+
+    afficherStatutObjectif(statut: StatutObjectif) {
+        return afficherStatutObjectif(statut);
+    }
+}
\ No newline at end of file
diff --git a/src/app/ep/ep.module.ts b/src/app/ep/ep.module.ts
index a4badb6..ad7422e 100644
--- a/src/app/ep/ep.module.ts
+++ b/src/app/ep/ep.module.ts
@@ -13,13 +13,14 @@ import { EpRoutingModule } from './ep.routing.module';
 import { MatTablesModule } from "@shared/mat-tables/mat-tables.module";
 import { EpSignesComponent } from "./ep-signes/ep-signes.component";
 import { DetailsEPComponent } from "./details-ep/details-ep.component";
+import { EpObjectifsComponent } from "./details-ep/ep-objectifs/ep-objectifs.component";
 
 /**
   * Module de l'ep
   */
 @NgModule({
   declarations: [
-    EpComponent, EpSignesComponent, DetailsEPComponent
+    EpComponent, EpSignesComponent, DetailsEPComponent, EpObjectifsComponent
   ],
   exports: [EpComponent, DetailsEPComponent
   ],
diff --git a/src/app/shared/api-swagger/model/statutObjectif.ts b/src/app/shared/api-swagger/model/statutObjectif.ts
index 8d178eb..ea8ad00 100644
--- a/src/app/shared/api-swagger/model/statutObjectif.ts
+++ b/src/app/shared/api-swagger/model/statutObjectif.ts
@@ -19,4 +19,16 @@ export const StatutObjectif = {
     Atteint: 'Atteint' as StatutObjectif,
     Partiel: 'Partiel' as StatutObjectif,
     NonAtteint: 'NonAtteint' as StatutObjectif
-};
\ No newline at end of file
+};
+
+
+export function afficherStatutObjectif(statut : StatutObjectif) {
+    switch(statut) {
+        case StatutObjectif.Atteint:
+            return "Objectif atteint";
+        case StatutObjectif.NonAtteint:
+            return "Objectif non atteint";
+        case StatutObjectif.Partiel:
+            return "Objectif partiellement atteint";
+    }
+}
\ No newline at end of file