diff --git a/src/app/collaborateurs/collaborateurs.component.html b/src/app/collaborateurs/collaborateurs.component.html
index 4f89688..7443557 100644
--- a/src/app/collaborateurs/collaborateurs.component.html
+++ b/src/app/collaborateurs/collaborateurs.component.html
@@ -1,2 +1,32 @@
 <app-nav-menu></app-nav-menu>
 <h1> Liste des collaborateurs </h1>
+
+<mat-table matSort [dataSource]="dataSource">
+  <ng-container matColumnDef="agence">
+    <mat-header-cell *matHeaderCellDef mat-sort-header>Agence</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.agence}}</mat-cell>
+  </ng-container>
+
+  <ng-container matColumnDef="collaborateur">
+    <mat-header-cell *matHeaderCellDef mat-sort-header>Collabotareur</mat-header-cell>
+    <mat-cell *matCellDef="let row" [routerLink]="['/collaborateurs', row.id]">{{row.prenom}} {{row.nom}}</mat-cell>
+  </ng-container>
+
+  <ng-container matColumnDef="dateembauche">
+    <mat-header-cell *matHeaderCellDef mat-sort-header>Date embauche</mat-header-cell>
+    <mat-cell *matCellDef="let row">TODO AUSSI</mat-cell>
+  </ng-container>
+
+  <ng-container matColumnDef="commercial">
+    <mat-header-cell *matHeaderCellDef mat-sort-header>Commercial</mat-header-cell>
+    <mat-cell *matCellDef="let row">TODO</mat-cell>
+  </ng-container>
+
+  <ng-container matColumnDef="referent">
+    <mat-header-cell *matHeaderCellDef mat-sort-header>Référent</mat-header-cell>
+    <mat-cell *matCellDef="let row">TODO</mat-cell>
+  </ng-container>
+
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+</mat-table>
diff --git a/src/app/collaborateurs/collaborateurs.component.ts b/src/app/collaborateurs/collaborateurs.component.ts
index 16c952e..b6cd23a 100644
--- a/src/app/collaborateurs/collaborateurs.component.ts
+++ b/src/app/collaborateurs/collaborateurs.component.ts
@@ -1,4 +1,15 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild, ViewChildren } from '@angular/core';
+
+import { Observable, Subscription } from 'rxjs';
+
+import {MatTableDataSource} from '@angular/material/table';
+import {MatPaginator} from '@angular/material/paginator';
+import {MatSort} from '@angular/material/sort';
+
+import { DefaultService } from "@shared/api-swagger/api/api";
+
+import { CollaborateurModel } from "@shared/api-swagger/model/collaborateurModel";
+import { DisplayCollaborateur } from "@shared/displayInfo/displayCollaborateur";
 
 /**
     * Composant qui sert à l'affichage de la liste des collaborateurs en fonction de l'agence de son utilitateur.
@@ -11,8 +22,76 @@ import { Component, OnInit } from '@angular/core';
 })
 export class CollaborateursComponent implements OnInit {
 
-  constructor() {}
+  collaborateursDisponibles : DisplayCollaborateur[];
+  collaborateursFiltre : DisplayCollaborateur[];
+  private collaborateursDisponiblesSubscription : Subscription;
+
+  displayedColumns : string[] = ["agence", "collaborateur", "dateembauche", "commercial", "referent"];
+
+  dataSource : MatTableDataSource<DisplayCollaborateur>;
+
+  /**
+    * contenu de la recherche.
+    */
+  search = "";
+
+  /**
+    * Pagination du tableau.
+    */
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+
+  /**
+    * Tri par les éléments du tableau selon la colonne choisie.
+    */
+  @ViewChild(MatSort) sort: MatSort;
+
+  /**
+    * Spécifie si la liste des EP est en cours de chargement et d'écriture dans le tableau.
+    */
+  chargement = true;
+  constructor(private service: DefaultService) {}
 
   ngOnInit() {
+    this. collaborateursDisponiblesSubscription = this.service.collaborateursBuIdBuGet("ui").subscribe(
+      collaborateurs => {
+        console.log(collaborateurs);
+        this.initCollaborateur(collaborateurs);
+      }
+    );
+  }
+
+  initCollaborateur(collaborateurs:CollaborateurModel[]) {
+    this.collaborateursDisponibles = [];
+    let collaborateurDisplay : DisplayCollaborateur;
+    let today = new Date();
+    console.log(collaborateurs);
+    for(let c of collaborateurs) {
+      console.log(c);
+      collaborateurDisplay = new DisplayCollaborateur();
+      collaborateurDisplay.id = c.idCollaborateur;
+      collaborateurDisplay.prenom = c.prenom;
+      collaborateurDisplay.nom = c.nom;
+      collaborateurDisplay.agence = c.businessunit.nom;
+      collaborateurDisplay.embauche = c.dateEmbauche;
+      collaborateurDisplay.anciennete = this.setAnciennete(new Date(c.dateEmbauche), today);
+      collaborateurDisplay.annee = Math.floor(collaborateurDisplay.anciennete / 31536000000);
+      collaborateurDisplay.mois = Math.floor(collaborateurDisplay.anciennete / 2629800000 % 12);
+      this.collaborateursDisponibles.push(collaborateurDisplay);
+    }
+    this.collaborateursFiltre = this.collaborateursDisponibles;
+    this.dataSource = new MatTableDataSource(this.collaborateursFiltre);
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
+
+
+  setAnciennete(firstDate, secondDate) {
+    return Math.abs(firstDate-secondDate);
+  }
+
+  ngOnDestroy() {
+    if(this.collaborateursDisponiblesSubscription != null) {
+      this.collaborateursDisponiblesSubscription.unsubscribe();
+    }
   }
 }
diff --git a/src/app/collaborateurs/details-collaborateur/details-collaborateur.component.html b/src/app/collaborateurs/details-collaborateur/details-collaborateur.component.html
index 10f158c..2286e0f 100644
--- a/src/app/collaborateurs/details-collaborateur/details-collaborateur.component.html
+++ b/src/app/collaborateurs/details-collaborateur/details-collaborateur.component.html
@@ -1,2 +1,42 @@
 <app-nav-menu></app-nav-menu>
-<h1>DETAILS COLLAB</h1>
+<ng-container *ngIf="collaborateur!=null">
+  <h2>{{ collaborateur.prenom }} {{ collaborateur.nom }} </h2>
+
+  <h3>Agence : {{ collaborateur.businessunit.nom}}</h3>
+  <h3>Date embauche : {{ collaborateur.dateEmbauche}}</h3>
+</ng-container>
+<ng-container *ngIf="collaborateur==null || !eploaded">
+  <mat-spinner></mat-spinner>
+</ng-container>
+
+<ng-container *ngIf= "eploaded && epEffectues.length==0">
+  <h3> Aucun EP effectué encore </h3>
+</ng-container>
+
+<ng-container *ngIf= "eploaded && epEffectues.length!=0">
+  <h3>Liste des précédents EP</h3>
+  <mat-table [dataSource]="this.dataSource" matSort>
+    <ng-container matColumnDef="dateentretien">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Date entretient</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.dateentretien}}</mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="referent">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Référent</mat-header-cell>
+      <mat-cell *matCellDef="let row"> {{ row.referent.prenom }} {{ row.referent.nom }}</mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="type">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.type}}</mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="details">
+      <mat-header-cell *matHeaderCellDef mat-sort-header></mat-header-cell>
+      <mat-cell *matCellDef="let row" [routerLink]="['/ep',row.id]"> Voir détails EP </mat-cell>
+    </ng-container>
+
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+  </mat-table>
+</ng-container>
diff --git a/src/app/collaborateurs/details-collaborateur/details-collaborateur.component.ts b/src/app/collaborateurs/details-collaborateur/details-collaborateur.component.ts
index 3d27c0c..829e6d4 100644
--- a/src/app/collaborateurs/details-collaborateur/details-collaborateur.component.ts
+++ b/src/app/collaborateurs/details-collaborateur/details-collaborateur.component.ts
@@ -1,5 +1,17 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
 
+import { Observable, 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 { DefaultService } from "@shared/api-swagger/api/api";
+
+import { CollaborateurModel } from "@shared/api-swagger/model/collaborateurModel";
+import { EpModel } from "@shared/api-swagger/model/epModel";
+import { DisplayEP } from "@shared/displayInfo/displayEP";
 
 /**
     */
@@ -8,9 +20,67 @@ import { Component, OnInit } from '@angular/core';
   templateUrl: './details-collaborateur.component.html'
 })
 export class DetailsCollaborateurComponent implements OnInit {
+//epCollaborateurIdCollaborateurGet
+  collaborateur: CollaborateurModel;
+  private collaborateurSubscription : Subscription;
+  private epSubscription : Subscription;
+  epEffectues : DisplayEP[];
+  displayedColumns: string[] = ["dateentretien", "referent", "type", "details"];
+  dataSource : MatTableDataSource<DisplayEP>;
+  eploaded = false;
+  idCollaborateur: any;
+
+  /**
+    * Pagination du tableau.
+    */
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+
+  /**
+    * Tri par les éléments du tableau selon la colonne choisie.
+    */
+  @ViewChild(MatSort) sort: MatSort;
 
-  constructor() {}
+  constructor(private service:DefaultService, private route: ActivatedRoute) {}
 
   ngOnInit() {
+    this.idCollaborateur = this.route.snapshot.paramMap.get('id');
+    this.collaborateurSubscription = this.service.collaborateursIdCollaborateurGet(this.idCollaborateur).subscribe(
+      collaborateur => this.initCollaborateur(collaborateur[0]),
+      err => console.log(err)
+    );
+  }
+
+  initCollaborateur(collaborateur:CollaborateurModel) {
+    this.collaborateur = collaborateur;
+    this.epSubscription = this.service.epCollaborateurIdCollaborateurGet(this.idCollaborateur).subscribe(
+      ep => this.initEP(ep)
+    )
+  }
+
+  initEP(ep:EpModel[]) {
+    this.epEffectues = [];
+    let epDisplay : DisplayEP;
+    for(let un_ep of ep) {
+      epDisplay = new DisplayEP();
+      epDisplay.id = un_ep.idEp;
+      epDisplay.referent = un_ep.referent;
+      epDisplay.etat = un_ep.etat;
+      epDisplay.type = un_ep.typeEP;
+      epDisplay.dateentretien = un_ep.dateEntretien;
+      this.epEffectues.push(epDisplay);
+    }
+    this.dataSource = new MatTableDataSource(this.epEffectues);
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+    this.eploaded = true;
+  }
+
+  ngOnDestroy() {
+    if(this.epSubscription!= null) {
+      this.epSubscription.unsubscribe();
+    }
+    if(this.collaborateurSubscription!= null) {
+      this.collaborateurSubscription.unsubscribe();
+    }
   }
 }
diff --git a/src/app/home/home-assistante/home-assistante.component.html b/src/app/home/home-assistante/home-assistante.component.html
index 66ddc96..110bf1f 100644
--- a/src/app/home/home-assistante/home-assistante.component.html
+++ b/src/app/home/home-assistante/home-assistante.component.html
@@ -21,19 +21,17 @@
 
   <ng-container  matColumnDef="collaborateur">
     <mat-header-cell *matHeaderCellDef mat-sort-header> Collaborateur </mat-header-cell>
-    <mat-cell  *matCellDef="let row"> {{row.collaborateur.nom}} {{row.collaborateur.prenom}} </mat-cell>
+    <mat-cell  *matCellDef="let row" [routerLink]="['/collaborateurs', row.collaborateur.idCollaborateur]"> {{row.collaborateur.nom}} {{row.collaborateur.prenom}} </mat-cell>
   </ng-container>
 
   <ng-container matColumnDef="anciennete">
     <mat-header-cell *matHeaderCellDef mat-sort-header> Ancienneté </mat-header-cell>
-    <mat-cell  *matCellDef="let row"> {{row.annee | number: '2.0-0'}} an(s) {{row.mois | number: '2.0-0'}} mois </mat-cell>
-    <!--<mat-cell  *matCellDef="let row"> {{getAnciennete(row.anciennete)}} </mat-cell> -->
-    <!--  <mat-cell  *matCellDef="let row"> {{row.date |  YY an(s) MM mois }} </mat-cell> -->
+    <mat-cell  *matCellDef="let row"> {{row.collaborateur.dateEmbauche | date: 'yyyy/MM/dd'}} ({{row.annee}}an(s) {{row.mois | number: '2.0-0'}}mois) </mat-cell>
   </ng-container>
 
   <ng-container  matColumnDef="referent">
     <mat-header-cell *matHeaderCellDef mat-sort-header> Referent </mat-header-cell>
-    <mat-cell  *matCellDef="let row"> {{row.referent.nom}} {{row.referent.prenom}} </mat-cell>
+    <mat-cell  *matCellDef="let row" [routerLink]="['/collaborateurs', row.referent.idCollaborateur]"> {{row.referent.nom}} {{row.referent.prenom}} </mat-cell>
   </ng-container>
 
   <ng-container matColumnDef="type">
diff --git a/src/app/home/home-assistante/home-assistante.component.ts b/src/app/home/home-assistante/home-assistante.component.ts
index 6a241c2..b005cf8 100644
--- a/src/app/home/home-assistante/home-assistante.component.ts
+++ b/src/app/home/home-assistante/home-assistante.component.ts
@@ -9,7 +9,7 @@ import {MatSort} from '@angular/material/sort';
 
 import { CollaborateurModel } from "@shared/api-swagger/model/collaborateurModel";
 import { EpModel } from "@shared/api-swagger/model/epModel";
-import { DisplayProchainEPCollaborateur } from "@shared/displayInfo/displayEP";
+import { DisplayEP } from "@shared/displayInfo/displayEP";
 import { DefaultService } from "@shared/api-swagger/api/api";
 
 
@@ -30,12 +30,12 @@ export class HomeAssistanteComponent implements OnInit, AfterViewInit {
   /**
     * Une liste qui contiendra la liste des EP avec les informations à faire conserver.
     */
-  epDisponibles : DisplayProchainEPCollaborateur[];
+  epDisponibles : DisplayEP[];
 
   /**
     * Liste des EP qui seront affichées en fonction des filtres.
     */
-  epFiltre : DisplayProchainEPCollaborateur[];
+  epFiltre : DisplayEP[];
 
   /**
     * Subscription pour récupérer les EP.
@@ -51,7 +51,7 @@ export class HomeAssistanteComponent implements OnInit, AfterViewInit {
   /**
     * source pour l'affichage des EP dans le tableau qui est affichée.
     */
-  dataSource : MatTableDataSource<DisplayProchainEPCollaborateur>;
+  dataSource : MatTableDataSource<DisplayEP>;
 
   /**
     * contenu de la recherche.
@@ -85,10 +85,12 @@ export class HomeAssistanteComponent implements OnInit, AfterViewInit {
     */
   initDisplay(eps: EpModel[]) {
     this.epDisponibles = []
-    let epDisplay : DisplayProchainEPCollaborateur;
+    let epDisplay : DisplayEP;
     let today = new Date();
+    console.log(eps);
     for(let ep of eps) {
-      epDisplay = new DisplayProchainEPCollaborateur();
+      console.log(ep);
+      epDisplay = new DisplayEP();
       epDisplay.id = ep.idEp;
       epDisplay.agence = ep.collaborateur.businessunit.nom;
       epDisplay.collaborateur = ep.collaborateur;
diff --git a/src/app/shared/angular-material/angular-material.module.ts b/src/app/shared/angular-material/angular-material.module.ts
index 18e7319..76fa9e8 100644
--- a/src/app/shared/angular-material/angular-material.module.ts
+++ b/src/app/shared/angular-material/angular-material.module.ts
@@ -9,6 +9,7 @@ import {MatMenuModule} from '@angular/material/menu';
 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';
 
 
 /**
@@ -17,15 +18,15 @@ import {MatSortModule} from '@angular/material/sort';
 @NgModule({
   imports : [MatCardModule,
     MatButtonModule, MatMenuModule,
-    MatIconModule,MatPaginatorModule,
+    MatIconModule, MatPaginatorModule,
     MatSortModule, MatTableModule,
-    MatInputModule
+    MatInputModule, MatProgressSpinnerModule
   ],
   exports : [MatCardModule,
     MatButtonModule, MatMenuModule,
-    MatIconModule,MatPaginatorModule,
+    MatIconModule, MatPaginatorModule,
     MatSortModule, MatTableModule,
-    MatInputModule
+    MatInputModule, MatProgressSpinnerModule
   ]
 })
 export class MaterialModule {}
diff --git a/src/app/shared/api-swagger/api/default.service.ts b/src/app/shared/api-swagger/api/default.service.ts
index 55d302c..13ed7cf 100644
--- a/src/app/shared/api-swagger/api/default.service.ts
+++ b/src/app/shared/api-swagger/api/default.service.ts
@@ -115,10 +115,10 @@ export class DefaultService {
      * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
      * @param reportProgress flag to report request and response progress.
      */
-    public collaborateursIdCollaborateurGet(idCollaborateur: number, observe?: 'body', reportProgress?: boolean): Observable<CollaborateurModel>;
-    public collaborateursIdCollaborateurGet(idCollaborateur: number, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<CollaborateurModel>>;
-    public collaborateursIdCollaborateurGet(idCollaborateur: number, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<CollaborateurModel>>;
-    public collaborateursIdCollaborateurGet(idCollaborateur: number, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+    public collaborateursIdCollaborateurGet(idCollaborateur: string, observe?: 'body', reportProgress?: boolean): Observable<CollaborateurModel>;
+    public collaborateursIdCollaborateurGet(idCollaborateur: string, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<CollaborateurModel>>;
+    public collaborateursIdCollaborateurGet(idCollaborateur: string, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<CollaborateurModel>>;
+    public collaborateursIdCollaborateurGet(idCollaborateur: string, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
 
         if (idCollaborateur === null || idCollaborateur === undefined) {
             throw new Error('Required parameter idCollaborateur was null or undefined when calling collaborateursIdCollaborateurGet.');
@@ -367,10 +367,10 @@ export class DefaultService {
      * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
      * @param reportProgress flag to report request and response progress.
      */
-    public epCollaborateurIdCollaborateurGet(idCollaborateur: number, observe?: 'body', reportProgress?: boolean): Observable<Array<EpModel>>;
-    public epCollaborateurIdCollaborateurGet(idCollaborateur: number, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<Array<EpModel>>>;
-    public epCollaborateurIdCollaborateurGet(idCollaborateur: number, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<Array<EpModel>>>;
-    public epCollaborateurIdCollaborateurGet(idCollaborateur: number, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+    public epCollaborateurIdCollaborateurGet(idCollaborateur: string, observe?: 'body', reportProgress?: boolean): Observable<Array<EpModel>>;
+    public epCollaborateurIdCollaborateurGet(idCollaborateur: string, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<Array<EpModel>>>;
+    public epCollaborateurIdCollaborateurGet(idCollaborateur: string, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<Array<EpModel>>>;
+    public epCollaborateurIdCollaborateurGet(idCollaborateur: string, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
 
         if (idCollaborateur === null || idCollaborateur === undefined) {
             throw new Error('Required parameter idCollaborateur was null or undefined when calling epCollaborateurIdCollaborateurGet.');
diff --git a/src/app/shared/displayInfo/displayCollaborateur.ts b/src/app/shared/displayInfo/displayCollaborateur.ts
new file mode 100644
index 0000000..e7fc6fa
--- /dev/null
+++ b/src/app/shared/displayInfo/displayCollaborateur.ts
@@ -0,0 +1,10 @@
+export class DisplayCollaborateur {
+  id: string;
+  agence: string;
+  nom: string;
+  prenom: string;
+  embauche : Date;
+  anciennete : number;
+  annee: number;
+  mois: number;
+}
diff --git a/src/app/shared/displayInfo/displayEP.ts b/src/app/shared/displayInfo/displayEP.ts
index 529907b..ca12880 100644
--- a/src/app/shared/displayInfo/displayEP.ts
+++ b/src/app/shared/displayInfo/displayEP.ts
@@ -4,7 +4,7 @@
 
 import {CollaborateurModel} from "../api-swagger/model/collaborateurModel";
 
-export class DisplayProchainEPCollaborateur {
+export class DisplayEP {
   id : number;
   agence : string;
   collaborateur : CollaborateurModel;