diff --git a/src/app/home/home-collaborateur/home-collaborateur.component.html b/src/app/home/home-collaborateur/home-collaborateur.component.html
index 319236e..86dbe32 100644
--- a/src/app/home/home-collaborateur/home-collaborateur.component.html
+++ b/src/app/home/home-collaborateur/home-collaborateur.component.html
@@ -1 +1,29 @@
-<h1> Page collaborateur </h1>
+<ng-container *ngIf="chargement">
+    <mat-spinner></mat-spinner>
+</ng-container>
+<ng-container *ngIf="!chargement">
+    <ng-container *ngIf="ep == undefined">
+        <p> Aucun prochain EP n'a été trouvé </p>
+    </ng-container>
+
+    <ng-container  *ngIf="ep != undefined">
+        <ng-container *ngIf="ep.statut == statutEP.cree">
+            <p> Prochain {{ep.type}} disponible pour saisie le {{ ep.dateDisponibilite | date: "dd/MM/yyyy" }} </p>
+        </ng-container>
+        
+        <ng-container *ngIf="ep.statut != statutEP.cree">
+            <p> {{ep.type}} : {{ afficherStatutEP(ep.statut) }} </p>
+            <p> Disponible depuis le {{ ep.dateDisponibilite | date : "dd/MM/yyyy" }}</p>
+            <p> Date d'entretien le {{ ep.datePrevisionnelle | date : "dd/MM/yyyy" }}</p>
+            
+        
+            <button mat-raised-button color="primary" *ngIf="ep.statut != statutEP.Disponible" [routerLink]="['/ep',ep.id]">Accéder à l'EP</button>
+            <button mat-raised-button color="primary" *ngIf="ep.statut == statutEP.Disponible" [routerLink]="['/saisieep']">Saisir l'EP</button>
+        </ng-container>    
+    </ng-container>
+</ng-container>
+
+<ng-container *ngIf="estReferentEPEnCours">
+    <h2>Vos prochains EP</h2>
+    <ep-table [rechercherParBU]="false" [rechercherParDate]="true" [typeRechercheEP]="epTypeRecherche.RechercheEPReferentEnCours" [displayedColumns]="displayedColumns" [idCollaborateur]="collaborateurConnecte.id" (eventEmitter)="ouvrirEP($event)" ></ep-table>
+</ng-container>
\ No newline at end of file
diff --git a/src/app/home/home-collaborateur/home-collaborateur.component.ts b/src/app/home/home-collaborateur/home-collaborateur.component.ts
index ae07a6f..6b8902f 100644
--- a/src/app/home/home-collaborateur/home-collaborateur.component.ts
+++ b/src/app/home/home-collaborateur/home-collaborateur.component.ts
@@ -1,4 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { affichageStatut, CollaborateurDTO, EpInformationDTO, EpService, StatutEp } from '@shared/api-swagger';
+import { cles, epTypeRecherche } from '@shared/utils/cles';
+import { Subscription } from 'rxjs';
 
 
 /**
@@ -12,9 +16,75 @@ import { Component, OnInit } from '@angular/core';
   templateUrl : 'home-collaborateur.component.html'
 })
 export class HomeCollaborateurComponent implements OnInit {
-  constructor() {
+
+  statutEP: any = StatutEp;
+
+  chargement: boolean = true;
+
+  collaborateurConnecte: CollaborateurDTO;
+  ep: EpInformationDTO;
+  
+  prochainEPSubscription: Subscription;
+  
+  countEPReferent: Subscription;
+  
+  estReferentEPEnCours: boolean = false;
+
+  displayedColumns : string[] = ["agence", "collaborateur", "datearrivee", "typeep", "statutep", "dateentretien", "consultation" ];
+  
+  epTypeRecherche : any = epTypeRecherche;
+
+  constructor(private epService: EpService, private router: Router) {
   }
 
   ngOnInit() {
+    this.setCollaborateurConnecte();
+  }
+
+  setCollaborateurConnecte() {
+    if(sessionStorage.getItem(cles.sessionKeyConnectee) == undefined) {
+      setTimeout( () => this.setCollaborateurConnecte(), 1000);
+    }
+    else {
+      this.collaborateurConnecte = JSON.parse(sessionStorage.getItem(cles.sessionKeyConnectee));
+      this.getProchainEP();
+      this.checkEPReferent();
+    }
+  }
+
+  getProchainEP() {
+    this.prochainEPSubscription = this.epService.getProchainEPCollaborateur(this.collaborateurConnecte.id).subscribe(
+      ep => {
+        this.ep = ep;
+        this.chargement = false;
+      },
+      err => console.log(err)
+    );
+  }
+
+  checkEPReferent() {
+    this.countEPReferent = this.epService.getEPEnCoursReferentCount(this.collaborateurConnecte.id, true, 1, 15, "", "", true, undefined, undefined).subscribe(
+      count => this.estReferentEPEnCours = count > 0,
+      err => console.log(err)
+    );
+  }
+
+  afficherStatutEP(statut: StatutEp) {
+    return affichageStatut(statut);
+  }
+
+  ouvrirEP(event) {
+    if(event.type == "ep")
+        this.router.navigate(["/ep", event.ep.id]);
   }
+
+  ngDestroy() {
+    if(this.prochainEPSubscription != undefined) 
+      this.prochainEPSubscription.unsubscribe();
+    if(this.countEPReferent != undefined)
+      this.countEPReferent.unsubscribe();
+  }
+
+
+
 }