diff --git a/src/app/components/referencement/referencement.component.html b/src/app/components/referencement/referencement.component.html
index 8ed2797..7d21325 100644
--- a/src/app/components/referencement/referencement.component.html
+++ b/src/app/components/referencement/referencement.component.html
@@ -1,14 +1,40 @@
 <div>
 
-  <h2 class=mb-4>Référencements</h2>
-
+  <h2 *ngIf="!isOld" class=mb-4>Collaborateurs sans référencement</h2>
+  <h2 *ngIf="isOld" class=mb-4>Référencements</h2>
   <div style="display: flex">
     <p style="margin: 10px 0 10px 0">Pour ajouter un nouveau référencement, cliquez ici : </p>
     <button routerLink="/referencements/add">Ajouter</button>
   </div>
 
+  <div style="display: flex">
+    <p *ngIf="isOld" style="margin: 10px 0 10px 0">Pour voir les collaborateurs sans référencement, cliquez ici : </p>
+    <p *ngIf="!isOld" style="margin: 10px 0 10px 0">Pour voir les référencements, cliquez ici :</p>
+    <button (click)="isOldReverse()">Changer</button>
+  </div>
+
+  <div *ngIf="!isOld" class="mb-5 col-12" style="overflow-x:auto;">
+    <table class="table">
+      <thead>
+      <tr>
+        <th scope="col">Nom</th>
+        <th scope="col">Prénom</th>
+        <th scope="col">Mail Apside</th>
+      </tr>
+      </thead>
+
+      <tbody>
+      <tr *ngFor="let collaborateur of collaborateursSansRef">
+        <th scope="row">{{collaborateur.name}}</th>
+        <td> {{collaborateur.firstName}} </td>
+        <td> {{collaborateur.apsideMail}} </td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+
 
-  <div class="mb-5 col-12" style="overflow-x:auto;">
+  <div *ngIf="isOld" class="mb-5 col-12" style="overflow-x:auto;">
     <table class="table">
       <thead>
       <tr>
diff --git a/src/app/components/referencement/referencement.component.ts b/src/app/components/referencement/referencement.component.ts
index b35fd13..7831b2d 100644
--- a/src/app/components/referencement/referencement.component.ts
+++ b/src/app/components/referencement/referencement.component.ts
@@ -14,6 +14,9 @@ export class ReferencementComponent implements OnInit {
 
   referencements: Referencement[] = [];
   collaborateurs: Collaborateur[] = [];
+  collaborateursSansRef: Collaborateur[] = [];
+  idReferredTab: number[] = [];
+  isOld: boolean = false;
 
   constructor(
     private http: HttpClient,
@@ -23,13 +26,35 @@ export class ReferencementComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.getReferencements();
-    this.getCollaborateurs();
-  }
 
-  getCollaborateurs(): void {
     this.collaborateurService.getCollaborateurs()
-      .subscribe(collaborateurs => this.collaborateurs = collaborateurs);
+      .subscribe(collaborateurs => {
+        this.collaborateurs = collaborateurs;
+
+        this.referencementService.getReferencements()
+          .subscribe(referencements => {
+
+            this.referencements = referencements;
+            this.referencements.forEach(ref => {
+
+              if (this.idReferredTab.find(id => ref.id == id) == undefined) {
+                this.idReferredTab.push(ref.referredId);
+              }
+
+            });
+
+            this.collaborateurs.forEach(collab => {
+              if (this.idReferredTab.find(id => collab.id == id) == undefined) {
+                this.collaborateursSansRef.push(collab);
+              }
+            })
+          });
+      });
+
+  }
+
+  isOldReverse() {
+    this.isOld = !this.isOld;
   }
 
   getCollaborateurById(id: number): Collaborateur {
@@ -44,11 +69,6 @@ export class ReferencementComponent implements OnInit {
     return collab;
   }
 
-  getReferencements(): void {
-    this.referencementService.getReferencements()
-      .subscribe(referencements => this.referencements = referencements);
-  }
-
   getSplitDate(date: string | undefined): string {
     if (date == undefined) {
       return "";