diff --git a/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.html b/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.html
index ff5369e..ad1c7ad 100644
--- a/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.html
+++ b/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.html
@@ -1,6 +1,6 @@
 <div *ngIf="collaborateur" style="overflow-x:auto;" class="mb-3">
 
-  <table>
+  <table class="mb-3">
     <tr>
     <th>Name</th>
     <th>First Name</th>
@@ -13,7 +13,6 @@
     <th>Personal Mail</th>
     <th>Apside Mail</th>
     <th>Resignation Date</th>
-    <th>Referrer ID</th>
     <th>Business Unit ID</th>
     </tr>
 
@@ -29,12 +28,19 @@
       <td><input id="collaborateur-personalMail" [(ngModel)]="collaborateur.personalMail" placeholder="personalMail"></td>
       <td><input id="collaborateur-apsideMail" [(ngModel)]="collaborateur.apsideMail" placeholder="apsideMail"></td>
       <td><input id="collaborateur-resignationDate" [(ngModel)]="collaborateur.resignationDate" placeholder="resignationDate"></td>
-      <td><input id="collaborateur-referrerId" [(ngModel)]="collaborateur.referrerId" placeholder="referrerId"></td>
       <td><input id="collaborateur-businessUnitId" [(ngModel)]="collaborateur.businessUnitId" placeholder="businessUnitId"></td>
     </tr>
 
   </table>
 
+  <select name="referrer" id="referrer-select" [(ngModel)]="collaborateur.referrerId">
+    <option value="">-- Choisissez un référent pour le nouveau collaborateur --</option>
+    <option *ngFor="let collaborateur of collaborateurs" [ngValue]="collaborateur.id">{{collaborateur.name}} {{collaborateur.firstName}}</option>
+  </select>
+  <br/>
+  <span>
+    *Tous les champs sont obligatoires
+  </span>
 
 
 
diff --git a/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.ts b/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.ts
index ffc4c2d..5cea570 100644
--- a/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.ts
+++ b/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.ts
@@ -1,5 +1,7 @@
 import {Component, Input, OnInit} from '@angular/core';
 import {Collaborateur} from "../../../interfaces/collaborateur";
+import {HttpClient} from "@angular/common/http";
+import {CollaborateurService} from "../../../services/collaborateur.service";
 
 @Component({
   selector: 'app-collaborateur-detail',
@@ -8,12 +10,24 @@ import {Collaborateur} from "../../../interfaces/collaborateur";
 })
 export class CollaborateurDetailComponent implements OnInit {
 
+
+  collaborateurs : Collaborateur[] = [];
+
   @Input()
-  collaborateur: Collaborateur | undefined;
+  collaborateur = {} as Collaborateur ;
 
-  constructor() { }
+  constructor(
+    private http : HttpClient,
+    private collaborateurService: CollaborateurService,
+  ) { }
 
   ngOnInit(): void {
+    this.getCollaborateurs();
+  }
+
+  getCollaborateurs():void {
+    this.collaborateurService.getCollaborateurs()
+      .subscribe(collaborateurs => this.collaborateurs = collaborateurs);
   }
 
 }
diff --git a/src/app/components/collaborateur/collaborateur.component.ts b/src/app/components/collaborateur/collaborateur.component.ts
index 1210271..7d5342d 100644
--- a/src/app/components/collaborateur/collaborateur.component.ts
+++ b/src/app/components/collaborateur/collaborateur.component.ts
@@ -27,6 +27,7 @@ export class CollaborateurComponent implements OnInit {
   }
 
   add(collaborateur: Collaborateur): void {
+    console.log(collaborateur);
     this.collaborateurService.addCollaborateur(collaborateur)
       .subscribe(collaborateur => {
         this.collaborateurs.push(collaborateur);