diff --git a/src/app/collaborateurs/collaborateurs.component.html b/src/app/collaborateurs/collaborateurs.component.html
index 7443557..ecf7975 100644
--- a/src/app/collaborateurs/collaborateurs.component.html
+++ b/src/app/collaborateurs/collaborateurs.component.html
@@ -17,11 +17,6 @@
     <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>
diff --git a/src/app/collaborateurs/collaborateurs.component.ts b/src/app/collaborateurs/collaborateurs.component.ts
index b6cd23a..a32ce7c 100644
--- a/src/app/collaborateurs/collaborateurs.component.ts
+++ b/src/app/collaborateurs/collaborateurs.component.ts
@@ -26,7 +26,7 @@ export class CollaborateursComponent implements OnInit {
   collaborateursFiltre : DisplayCollaborateur[];
   private collaborateursDisponiblesSubscription : Subscription;
 
-  displayedColumns : string[] = ["agence", "collaborateur", "dateembauche", "commercial", "referent"];
+  displayedColumns : string[] = ["agence", "collaborateur", "dateembauche", "referent"];
 
   dataSource : MatTableDataSource<DisplayCollaborateur>;
 
@@ -54,8 +54,7 @@ export class CollaborateursComponent implements OnInit {
   ngOnInit() {
     this. collaborateursDisponiblesSubscription = this.service.collaborateursBuIdBuGet("ui").subscribe(
       collaborateurs => {
-        console.log(collaborateurs);
-        this.initCollaborateur(collaborateurs);
+        this.initCollaborateur(collaborateurs)
       }
     );
   }
@@ -66,7 +65,6 @@ export class CollaborateursComponent implements OnInit {
     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;
diff --git a/src/app/home/home-assistante/home-assistante.component.html b/src/app/home/home-assistante/home-assistante.component.html
index 110bf1f..939ac28 100644
--- a/src/app/home/home-assistante/home-assistante.component.html
+++ b/src/app/home/home-assistante/home-assistante.component.html
@@ -31,7 +31,7 @@
 
   <ng-container  matColumnDef="referent">
     <mat-header-cell *matHeaderCellDef mat-sort-header> Referent </mat-header-cell>
-    <mat-cell  *matCellDef="let row" [routerLink]="['/collaborateurs', row.referent.idCollaborateur]"> {{row.referent.nom}} {{row.referent.prenom}} </mat-cell>
+    <mat-cell  *matCellDef="let row" [routerLink]="['/referents', row.referent.idCollaborateur]"> {{row.referent.nom}} {{row.referent.prenom}} </mat-cell>
   </ng-container>
 
   <ng-container matColumnDef="type">
diff --git a/src/app/referents/details-referent/details-referent.component.html b/src/app/referents/details-referent/details-referent.component.html
index a26ffeb..0c986c7 100644
--- a/src/app/referents/details-referent/details-referent.component.html
+++ b/src/app/referents/details-referent/details-referent.component.html
@@ -1,2 +1,7 @@
 <app-nav-menu></app-nav-menu>
-<h1> referent </h1>
+<ng-container  *ngIf="referent!=null">
+  <h2> {{referent.prenom }} {{referent.nom }} ({{referent.businessunit.nom }}) </h2>
+</ng-container>
+<ng-container *ngIf="referent==null">
+  <mat-spinner></mat-spinner>
+</ng-container>
diff --git a/src/app/referents/details-referent/details-referent.component.ts b/src/app/referents/details-referent/details-referent.component.ts
index 6b14e05..e58748d 100644
--- a/src/app/referents/details-referent/details-referent.component.ts
+++ b/src/app/referents/details-referent/details-referent.component.ts
@@ -1,4 +1,17 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
+
+import { 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";
 
 /**
     */
@@ -7,9 +20,27 @@ import { Component, OnInit } from '@angular/core';
   templateUrl: './details-referent.component.html'
 })
 export class DetailsReferentComponent implements OnInit {
+  referent: CollaborateurModel;
+  private referentSubscription : Subscription;
+  idReferent : any;
+
 
-  constructor() {}
+  constructor(private service:DefaultService, private route: ActivatedRoute) {}
 
   ngOnInit() {
+    this.idReferent = this.route.snapshot.paramMap.get("id");
+    this.referentSubscription = this.service.collaborateursIdCollaborateurGet(this.idReferent).subscribe(
+      referent => this.initReferent(referent[0])
+    )
+  }
+
+  initReferent(referent:CollaborateurModel) {
+    this.referent = referent;
+  }
+
+  ngOnDestroy() {
+    if(this.referentSubscription!=null) {
+      this.referentSubscription.unsubscribe();
+    }
   }
 }
diff --git a/src/app/referents/referents.component.html b/src/app/referents/referents.component.html
index 835f8da..4d6d9c4 100644
--- a/src/app/referents/referents.component.html
+++ b/src/app/referents/referents.component.html
@@ -1,2 +1,18 @@
 <app-nav-menu></app-nav-menu>
 <h1>Liste des référents</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="referent">
+    <mat-header-cell *matHeaderCellDef mat-sort-header>Référent</mat-header-cell>
+    <mat-cell *matCellDef="let row" [routerLink]="['/referents', row.id]">{{row.prenom}} {{row.nom}}</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/referents/referents.component.ts b/src/app/referents/referents.component.ts
index 21fea1d..c43d95e 100644
--- a/src/app/referents/referents.component.ts
+++ b/src/app/referents/referents.component.ts
@@ -1,4 +1,16 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild, ViewChildren } from '@angular/core';
+
+import { 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";
+
 
 /**
     */
@@ -8,8 +20,61 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ReferentsComponent implements OnInit {
 
-  constructor() {}
+  referentsDiponibles : DisplayCollaborateur[];
+  referentsFiltre : DisplayCollaborateur[];
+  private referentsDisponiblesSubscription : Subscription;
+
+  displayedColumns : string[] = ["agence", "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.referentsDisponiblesSubscription = this.service.referentsBuIdBuGet("ui").subscribe(
+      referents => { this.initReferents(referents); }
+    );
+  }
+
+  initReferents(referents:CollaborateurModel[]) {
+    this.referentsDiponibles = [];
+    let referentDisplay: DisplayCollaborateur;
+    for(let r of referents) {
+      referentDisplay = new DisplayCollaborateur();
+      referentDisplay.id = r.idCollaborateur;
+      referentDisplay.prenom = r.prenom;
+      referentDisplay.nom = r.nom;
+      referentDisplay.agence = r.businessunit.nom;
+      this.referentsDiponibles.push(referentDisplay);
+    }
+    this.referentsFiltre = this.referentsDiponibles;
+    this.dataSource = new MatTableDataSource(this.referentsFiltre);
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
+
+  ngOnDestroy() {
+    if(this.referentsDisponiblesSubscription != null) {
+      this.referentsDisponiblesSubscription.unsubscribe();
+    }
   }
 }
diff --git a/src/app/referents/referents.routing.module.ts b/src/app/referents/referents.routing.module.ts
index 74bcd1f..19d7f3e 100644
--- a/src/app/referents/referents.routing.module.ts
+++ b/src/app/referents/referents.routing.module.ts
@@ -18,8 +18,7 @@ const routes: Routes = [
   },
   {
     path:paths_referents.get,
-    component: ReferentsComponent,
-    pathMatch: 'full',
+    component: DetailsReferentComponent,
     canActivate: [KeycloakGuard]
   }
 ];