diff --git a/src/app/referents/assignation-referent/assignation-referent.component.ts b/src/app/referents/assignation-referent/assignation-referent.component.ts
index a5f0249..4796684 100644
--- a/src/app/referents/assignation-referent/assignation-referent.component.ts
+++ b/src/app/referents/assignation-referent/assignation-referent.component.ts
@@ -54,6 +54,7 @@ export class AssignationReferentComponent {
     }
 
     choixReferent(event: any) {
+        console.log(event);
         this.referentChoisi = event.collaborateur;
         this.setCollaborateurEP();
     }
diff --git a/src/app/shared/affichage-details-collaboarteur/affichage-details-collaborateur.html b/src/app/shared/affichage-details-collaboarteur/affichage-details-collaborateur.html
index b60c1d1..0b705ee 100644
--- a/src/app/shared/affichage-details-collaboarteur/affichage-details-collaborateur.html
+++ b/src/app/shared/affichage-details-collaboarteur/affichage-details-collaborateur.html
@@ -2,12 +2,14 @@
     <h2> {{ collaborateur.nom }} {{ collaborateur.prenom }} </h2>
     <p><b>Agence : {{ collaborateur.businessUnit.nom}} ({{ collaborateur.businessUnit.agence.nom}}) </b></p>
     <ng-container *ngIf="!estReferent">
-        <p *ngIf="collaborateur.referent != null"><b>Aucun référent</b></p>
-        <p *ngIf="collaborateur.referent == null"><b>Référent : {{ collaborateur.referent.nom }} {{ collaborateur.referent.prenom }} </b></p>
+        <p *ngIf="collaborateur.referent == null"><b>Aucun référent</b></p>
+        <p *ngIf="collaborateur.referent != null"><b>Référent : {{ collaborateur.referent.nom }} {{ collaborateur.referent.prenom }} </b></p>
     </ng-container>
     <p *ngIf="!estReferent"><b>Date embauche :  {{ collaborateur.dateArrivee | date: 'dd MMMM yyyy'}}</b></p>
     <p *ngIf="!estReferent && collaborateur.dateDepart!=undefined"><b>Date départ : {{ collaborateur.dateDepart | date: 'dd MMMM yyyy'}}</b></p>
 
+    <button mat-raised-button color="primary" (click)="openDialog()"> {{ estReferent ? "Ajouter des collaborateurs EP" : "Mettre à jour le référent EP"}}</button>
+
     <mat-tab-group mat-align-tabs="start">
         <mat-tab *ngIf="!estReferent" label="Liste des EP effectués">
         </mat-tab>
diff --git a/src/app/shared/affichage-details-collaboarteur/affichage-details-collaborateur.module.ts b/src/app/shared/affichage-details-collaboarteur/affichage-details-collaborateur.module.ts
index e6f49ac..8d0bf88 100644
--- a/src/app/shared/affichage-details-collaboarteur/affichage-details-collaborateur.module.ts
+++ b/src/app/shared/affichage-details-collaboarteur/affichage-details-collaborateur.module.ts
@@ -5,10 +5,12 @@ import { FormsModule } from '@angular/forms';
 import { MaterialModule } from "../angular-material/angular-material.module";
 import { AffichageDetailsCollaborateurComponent } from "@shared/affichage-details-collaboarteur/affichage-details-collaborateur";
 import { MatTablesModule } from '@shared/mat-tables/mat-tables.module';
+import { DialogAssignationRapideReferentComponent } from "./dialog-assignation-rapide/dialog-assignation-rapide.component";
+
 
 @NgModule({
   declarations: [ 
-    AffichageDetailsCollaborateurComponent
+    AffichageDetailsCollaborateurComponent, DialogAssignationRapideReferentComponent
   ],
   imports: [
     MaterialModule,
diff --git a/src/app/shared/affichage-details-collaboarteur/affichage-details-collaborateur.ts b/src/app/shared/affichage-details-collaboarteur/affichage-details-collaborateur.ts
index 137bca8..721022f 100644
--- a/src/app/shared/affichage-details-collaboarteur/affichage-details-collaborateur.ts
+++ b/src/app/shared/affichage-details-collaboarteur/affichage-details-collaborateur.ts
@@ -2,6 +2,9 @@ import { Component, Input, OnInit } from "@angular/core";
 import { CollaborateurDTO, CollaborateursService } from "@shared/api-swagger";
 import { Subscription } from "rxjs";
 import { collaborateurTypeRecherche } from "@shared/utils/cles";
+import { MatDialog } from "@angular/material/dialog";
+import { DialogAssignationRapideReferentComponent } from "./dialog-assignation-rapide/dialog-assignation-rapide.component";
+
 
 @Component({
     selector: "affichage-details-collaborateur",
@@ -22,7 +25,7 @@ export class AffichageDetailsCollaborateurComponent implements OnInit{
     collaborateur: CollaborateurDTO = undefined;
     private collaborateurSubscription: Subscription;
 
-    constructor(private collaborateurService: CollaborateursService) {}
+    constructor(private collaborateurService: CollaborateursService, private dialog: MatDialog) {}
 
     ngOnInit() {
         this.collaborateurSubscription = this.collaborateurService.getCollaborateurById(this.idCollaborateur).subscribe(
@@ -36,4 +39,13 @@ export class AffichageDetailsCollaborateurComponent implements OnInit{
             this.collaborateurSubscription.unsubscribe();
         }
     }
+
+    openDialog() {
+        let datas = { data: this.collaborateur, width: "80%", height: '80%'};
+        let dialog = DialogAssignationRapideReferentComponent;
+        if(this.estReferent) 
+            console.log("ui");
+        else
+            this.dialog.open( dialog, datas );
+    }
 }
\ No newline at end of file
diff --git a/src/app/shared/affichage-details-collaboarteur/dialog-assignation-rapide/dialog-assignation-rapide-collaborateurs.html b/src/app/shared/affichage-details-collaboarteur/dialog-assignation-rapide/dialog-assignation-rapide-collaborateurs.html
new file mode 100644
index 0000000..3e8fc5e
--- /dev/null
+++ b/src/app/shared/affichage-details-collaboarteur/dialog-assignation-rapide/dialog-assignation-rapide-collaborateurs.html
@@ -0,0 +1 @@
+<!--ASSIGNATION D'UN OU PLUSIEURS COLLABORATEURS A UN REFERENT-->
\ No newline at end of file
diff --git a/src/app/shared/affichage-details-collaboarteur/dialog-assignation-rapide/dialog-assignation-rapide-referent.html b/src/app/shared/affichage-details-collaboarteur/dialog-assignation-rapide/dialog-assignation-rapide-referent.html
new file mode 100644
index 0000000..4ad2232
--- /dev/null
+++ b/src/app/shared/affichage-details-collaboarteur/dialog-assignation-rapide/dialog-assignation-rapide-referent.html
@@ -0,0 +1,8 @@
+<!--ASSIGNATION D'UN REFERENT A UN COLLABORATEUR-->
+<ng-container *ngIf="referentChoisi != undefined">
+    <p> {{referentChoisi.nom}} {{referentChoisi.prenom}} {{ estReferentActuel() ? "(Référent actuel)" : "" }} </p>
+    <button mat-raised-button color="primary" *ngIf="!estReferentActuel()" (click)="mettreAJourReferent()">Valider le changement du référent</button>
+</ng-container>
+<p *ngIf="referentChoisi == undefined"> Veuillez choisir un référent </p>
+<button mat-raised-button color="primary" (click)="annuler()">Annuler</button>
+<collaborateurs-table [rechercherParBU]="rechercherParBU" [roles]="roles" [displayedColumns]="displayedColumns" [typeRecherche]="typeRecherche" (eventEmitter)="selectionnerReferent($event)"></collaborateurs-table>
\ No newline at end of file
diff --git a/src/app/shared/affichage-details-collaboarteur/dialog-assignation-rapide/dialog-assignation-rapide.component.ts b/src/app/shared/affichage-details-collaboarteur/dialog-assignation-rapide/dialog-assignation-rapide.component.ts
new file mode 100644
index 0000000..286b2dd
--- /dev/null
+++ b/src/app/shared/affichage-details-collaboarteur/dialog-assignation-rapide/dialog-assignation-rapide.component.ts
@@ -0,0 +1,66 @@
+import {Component, Inject } from "@angular/core";
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import { CollaborateurDTO, ReferentEPDTO, ReferentsEPService } from "@shared/api-swagger";
+import { collaborateurTypeRecherche,  } from "@shared/utils/cles";
+import { DialogAssignationReferentComponent } from "app/referents/assignation-referent/assignation-referent.component";
+import { Subscription } from "rxjs";
+
+@Component({
+    selector: "dialog-assignation-rapide-referent",
+    templateUrl: "dialog-assignation-rapide-referent.html"
+})
+export class DialogAssignationRapideReferentComponent {
+
+    rechercherParDate: boolean = false;
+
+    rechercherParBU: boolean = true;
+
+    referentChoisi : CollaborateurDTO = undefined;
+    
+    roles : string[] = ["Manager", "RA", "CP", "TL"];
+
+    
+    typeRecherche: string = collaborateurTypeRecherche.referents;
+
+    displayedColumns : string[] = ["businessunit", "collaborateur"];
+
+    private referentEPSubscription: Subscription;
+
+    constructor(private dialogRef: MatDialogRef<DialogAssignationReferentComponent>, private referentsEPService: ReferentsEPService,
+        @Inject(MAT_DIALOG_DATA) private data: CollaborateurDTO) {
+         this.referentChoisi = data.referent;
+    }
+
+    selectionnerReferent(event) {
+        this.referentChoisi = event.collaborateur;
+    }
+
+    mettreAJourReferent() {
+        const referentEPDTO: ReferentEPDTO = {
+            idReferent : this.referentChoisi.id,
+            idsCollaborateur : [this.data.id],
+        };
+
+        this.referentEPSubscription = this.referentsEPService.updateReferentCollaborateur(referentEPDTO, this.data.id).subscribe(
+            () => location.reload(),
+            err => console.log(err)
+        );
+
+    }
+
+    estReferentActuel() {
+        return this.referentChoisi != undefined && this.data.referent != undefined &&this.referentChoisi.id == this.data.referent.id;
+    }
+
+    annuler() {
+        this.dialogRef.close();
+    }
+
+    onDestroy() {
+        if(this.referentEPSubscription != undefined) {
+            this.referentEPSubscription.unsubscribe();
+        }
+    }
+
+
+}
\ No newline at end of file