diff --git a/src/app/ep/ep.component.html b/src/app/ep/ep.component.html
index 41f913d..438d546 100644
--- a/src/app/ep/ep.component.html
+++ b/src/app/ep/ep.component.html
@@ -1 +1,22 @@
-<app-nav-menu></app-nav-menu>
\ No newline at end of file
+<app-nav-menu></app-nav-menu>
+<h2>Vos EP</h2>
+
+<ng-container *ngIf="idCollaborateur == undefined">
+
+    <mat-spinner></mat-spinner>
+</ng-container>
+<ng-container *ngIf="idCollaborateur != undefined">
+    <mat-tab-group  mat-align-tabs="start">
+        <mat-tab label="EP signés">
+            <ep-table [rechercherParBU]="false" [rechercherParDate]="true" [typeRechercheEP]="epTypeRecherche.RechercheEPCollaborateursSignes" [displayedColumns]="displayedColumnsEPSignes" [idCollaborateur]="idCollaborateur" (eventEmitter)="ouvrirEP($event)" ></ep-table>
+        </mat-tab>
+        
+        <mat-tab label="EP référent">
+            <ep-table [rechercherParBU]="false" [rechercherParDate]="true" [typeRechercheEP]="epTypeRecherche.RechercheEPReferentSignes" [displayedColumns]="displayedColumnsEPReferent" [idCollaborateur]="idCollaborateur" (eventEmitter)="ouvrirEP($event)" ></ep-table>
+        </mat-tab>
+        
+        <mat-tab label="EP Participant">
+            TODO
+        </mat-tab>
+    </mat-tab-group>
+</ng-container>
\ No newline at end of file
diff --git a/src/app/ep/ep.component.ts b/src/app/ep/ep.component.ts
index 3e986c6..f6baab8 100644
--- a/src/app/ep/ep.component.ts
+++ b/src/app/ep/ep.component.ts
@@ -1,11 +1,54 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { CollaborateurDTO } from '@shared/api-swagger';
+import { AuthService } from '@shared/auth/auth.service';
+import { cles, epTypeRecherche } from '@shared/utils/cles';
+import { Role } from '@shared/utils/roles';
+
 
 
 @Component({
   selector: 'app-ep',
   templateUrl: './ep.component.html'
 })
-export class EpComponent {
+export class EpComponent implements OnInit {
+  
+
+  role = Role;
+  /**
+    * Le rôle de l'utilisateur.
+    */
+  userRole : string;
+
+  displayedColumnsEPSignes : string[] = ["referent", "statutep","typeep", "dateentretien", "consultation"];
+  displayedColumnsEPReferent : string[] = ["agence", "collaborateur", "datearrivee", "statutep","typeep", "dateentretien", "consultation"];
+  displayedColumnsEPParticipant : string[] = ["referent", "statutep","typeep", "dateentretien", "consultation"];
+  epTypeRecherche : any = epTypeRecherche;
+
+  idCollaborateur: string;
+
+
+  constructor(private authService: AuthService, private router: Router){
+    this.userRole = this.authService.firstRole;
+  }
   
-  constructor(){}
+  ngOnInit() {
+    this.setIdCollaborateur();
+  }
+
+  setIdCollaborateur() {
+    if(sessionStorage.getItem(cles.sessionKeyConnectee) == undefined) {
+      setTimeout( () => this.setIdCollaborateur(), 1000);
+    }
+    else {
+      const collaborateurConnecte : CollaborateurDTO = JSON.parse(sessionStorage.getItem(cles.sessionKeyConnectee));
+      this.idCollaborateur = collaborateurConnecte.id;
+    }
+  }
+
+
+  ouvrirEP(event) {
+    if(event.type == "ep")
+        this.router.navigate(["/ep", event.ep.id]);
+  }
 }
diff --git a/src/app/ep/ep.module.ts b/src/app/ep/ep.module.ts
index 11b43ac..c464c44 100644
--- a/src/app/ep/ep.module.ts
+++ b/src/app/ep/ep.module.ts
@@ -27,7 +27,8 @@ import { EpSignesComponent } from "./ep-signes/ep-signes.component";
     NavMenuModule,
     EpRoutingModule,
     RouterModule,
-    MatTablesModule
+    MatTablesModule,
+    CommonModule
   ],
 })
 export class EpModule {}
diff --git a/src/app/shared/nav-menu/nav-menu.component.html b/src/app/shared/nav-menu/nav-menu.component.html
index 90af09a..6dbfa72 100644
--- a/src/app/shared/nav-menu/nav-menu.component.html
+++ b/src/app/shared/nav-menu/nav-menu.component.html
@@ -4,7 +4,7 @@
     <img routerLink="/home" src="../../assets/img/logo.png">
     <!--LIEN VERS HOME-->
     <button mat-button routerLink="/home">Accueil</button>
-    <button mat-button mat-button *ngIf="this.userRole == role.commercial || this.userRole == role.collaborateur">EP</button>
+    <button mat-button mat-button *ngIf="this.userRole == role.commercial || this.userRole == role.collaborateur" routerLink="/ep">EP</button>
     <!--MENU EN FONCTION DES ROLES-->
     <app-nav-menu-assistante *ngIf="this.userRole == role.assistante"></app-nav-menu-assistante>
     <app-nav-menu-collaborateur *ngIf="this.userRole == role.collaborateur"></app-nav-menu-collaborateur>