diff --git a/src/app/app.component.html b/src/app/app.component.html
index 5c6ec73..507b697 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -22,7 +22,6 @@
   }
 
   .toolbar {
-    position: absolute;
     top: 0;
     left: 0;
     right: 0;
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 5e2984b..f8711b0 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -23,7 +23,6 @@ export class AppComponent implements OnInit  {
     ).subscribe(() => {
       const rt = this.getChild(this.activatedRoute);
       rt.data.subscribe(data => {
-        console.log(data);
         this.titleService.setTitle(data.title)});
     });
   }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index bd579cf..3204ce7 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -15,6 +15,7 @@ import { CollaborateurDetailComponent } from './components/collaborateur/collabo
 import { BusinessunitComponent } from './components/businessunit/businessunit.component';
 import { BusinessunitEditComponent } from './components/businessunit/businessunit-edit/businessunit-edit.component';
 import { BusinessunitDetailComponent } from './components/businessunit/businessunit-detail/businessunit-detail.component';
+import { AgenceDetailComponent } from './components/agence/agence-detail/agence-detail.component';
 
 @NgModule({
   declarations: [
@@ -24,10 +25,12 @@ import { BusinessunitDetailComponent } from './components/businessunit/businessu
     HomeComponent,
     AgenceComponent,
     AgenceEditComponent,
+    AgenceDetailComponent,
     CollaborateurDetailComponent,
     BusinessunitComponent,
     BusinessunitEditComponent,
-    BusinessunitDetailComponent
+    BusinessunitDetailComponent,
+
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/components/agence/agence-detail/agence-detail.component.html b/src/app/components/agence/agence-detail/agence-detail.component.html
new file mode 100644
index 0000000..01ffc21
--- /dev/null
+++ b/src/app/components/agence/agence-detail/agence-detail.component.html
@@ -0,0 +1,8 @@
+<div class="row mb-2">
+
+  <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+
+    <label for="agence-name" class="form-label">Nom</label>
+    <input class="form-control" id="agence-name" [(ngModel)]="agence.name" placeholder="name">
+  </div>
+</div>
diff --git a/src/app/components/agence/agence-detail/agence-detail.component.scss b/src/app/components/agence/agence-detail/agence-detail.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/agence/agence-detail/agence-detail.component.ts b/src/app/components/agence/agence-detail/agence-detail.component.ts
new file mode 100644
index 0000000..a06a442
--- /dev/null
+++ b/src/app/components/agence/agence-detail/agence-detail.component.ts
@@ -0,0 +1,31 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {Agence} from "../../../interfaces/agence";
+import {HttpClient} from "@angular/common/http";
+import {AgenceService} from "../../../services/agence.service";
+@Component({
+  selector: 'app-agence-detail',
+  templateUrl: './agence-detail.component.html',
+  styleUrls: ['./agence-detail.component.scss']
+})
+export class AgenceDetailComponent implements OnInit {
+
+  agences : Agence[] = [];
+  @Input()
+  agence = {} as Agence ;
+
+  constructor(
+    private http : HttpClient,
+    private agenceService: AgenceService,
+  ) { }
+
+  ngOnInit(): void {
+    this.getAgences();
+    this.getAgences();
+  }
+
+  getAgences():void {
+    this.agenceService.getAgences()
+      .subscribe(agences => this.agences = agences);
+  }
+
+}
diff --git a/src/app/components/agence/agence-edit/agence-edit.component.html b/src/app/components/agence/agence-edit/agence-edit.component.html
index 0ecfe31..77428c1 100644
--- a/src/app/components/agence/agence-edit/agence-edit.component.html
+++ b/src/app/components/agence/agence-edit/agence-edit.component.html
@@ -3,21 +3,8 @@
 
   <h2>{{agence.name | uppercase}} </h2>
   <div><span>id : </span>{{agence.id}}</div>
-  <div>
-    <div class = mb-3>
-      <table>
-        <tr>
-          <th>Name</th>
-        </tr>
-        <tr>
-          <td>
-            <input id="agence-name" [(ngModel)]="agence.name" placeholder="name">
-          </td>
-        </tr>
-      </table>
-    </div>
-  </div>
 
+  <app-agence-detail [agence]="agence"></app-agence-detail>
 
   <button (click)="goBack()">Retour</button>
   <button (click)="save()">Sauvegarder les changements</button>
diff --git a/src/app/components/agence/agence.component.html b/src/app/components/agence/agence.component.html
index 97ca12b..e219d51 100644
--- a/src/app/components/agence/agence.component.html
+++ b/src/app/components/agence/agence.component.html
@@ -1,31 +1,28 @@
 <div xmlns="">
   <h2 class = mb-4>Agences</h2>
 
-  <table class = mb-5>
-    <tr>
-      <th class="spaced">Name</th>
-    </tr>
-    <tr *ngFor="let agence of agences">
-      <td class="spaced"> {{agence.name}} </td>
-      <td class="spaced"> <a routerLink="{{agence.id}}"> Modifier </a></td>
-    </tr>
-  </table>
-
-  <h3>Ajouter une agence : </h3>
-
-  <div class = mb-3>
-    <table>
-      <tr>
-        <th>Name</th>
-      </tr>
+  <div style="overflow-x:auto;" class="mb-5 col-12">
+    <table class="table">
+      <thead>
       <tr>
-        <td>
-          <input id="agence-name" [(ngModel)]="agence.name" placeholder="name">
-        </td>
+        <th scope="col">ID</th>
+        <th scope="col">Nom</th>
       </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let agence of agences">
+          <th scope="row">{{agence.id}}</th>
+          <td> {{agence.name}} </td>
+          <td> <a routerLink="{{agence.id}}"> Modifier </a></td>
+        </tr>
+      </tbody>
     </table>
   </div>
 
+  <h3>Ajouter une agence : </h3>
+
+  <app-agence-detail [agence]="agence"></app-agence-detail>
+
   <button class="add-button" (click)="add(agence)">
     Ajouter une Agence
   </button>
diff --git a/src/app/components/businessunit/businessunit-detail/businessunit-detail.component.html b/src/app/components/businessunit/businessunit-detail/businessunit-detail.component.html
index b1c3297..3bfc049 100644
--- a/src/app/components/businessunit/businessunit-detail/businessunit-detail.component.html
+++ b/src/app/components/businessunit/businessunit-detail/businessunit-detail.component.html
@@ -1,17 +1,20 @@
-<div class = mb-3>
-  <table>
-    <tr>
-      <th>Name</th>
-    </tr>
-    <tr>
-      <td>
-        <input id="businessunit-name" [(ngModel)]="businessunit.name" placeholder="name">
-      </td>
-    </tr>
-  </table>
+<div class="row mb-4">
+
+  <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+    <label for="businessunit-name" class="form-label">Nom</label>
+    <input class="form-control" id="businessunit-name" [(ngModel)]="businessunit.name" placeholder="Nom">
+  </div>
+
+</div>
+
+<div class="row mb-5">
+
+  <div class="form-group col-12 col-md-6">
+    <label class="form-label">Agence</label>
+    <select class="form-select" name="agence" id="agence-select" [(ngModel)]="businessunit.agenceId">
+      <option value="" disabled selected>Choisissez l'agence de cette business Unit</option>
+      <option *ngFor="let agence of agences" [ngValue]="agence.id">{{agence.name}}</option>
+    </select>
+  </div>
 
-  <select name="agence" id="agence-select" [(ngModel)]="businessunit.agenceId">
-    <option value="">-- Choisissez l'agence de cette business Unit --</option>
-    <option *ngFor="let agence of agences" [ngValue]="agence.id">{{agence.name}}</option>
-  </select>
 </div>
diff --git a/src/app/components/businessunit/businessunit.component.html b/src/app/components/businessunit/businessunit.component.html
index 45bf93d..ee4c686 100644
--- a/src/app/components/businessunit/businessunit.component.html
+++ b/src/app/components/businessunit/businessunit.component.html
@@ -1,35 +1,26 @@
 <div xmlns="">
   <h2 class = mb-4>Business Unit</h2>
 
-  <table class = mb-5>
-    <tr>
-      <th class="spaced">Name</th>
-    </tr>
-    <tr *ngFor="let businessunit of businessunits">
-      <td class="spaced"> {{businessunit.name}} </td>
-      <td class="spaced"> <a routerLink="{{businessunit.id}}"> Modifier </a></td>
-    </tr>
-  </table>
-
-  <h3>Ajouter une businessunit : </h3>
-
-  <div class = mb-3>
-    <table>
-      <tr>
-        <th>Name</th>
-      </tr>
-      <tr>
-        <td>
-          <input id="businessunit-name" [(ngModel)]="businessunit.name" placeholder="name">
-        </td>
-      </tr>
+  <div style="overflow-x:auto;" class="mb-5 col-12">
+    <table class="table">
+      <thead>
+        <tr>
+          <th scope="col">ID</th>
+          <th scope="col">Nom</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let businessunit of businessunits">
+          <th scope="row">{{businessunit.id}}</th>
+          <td> {{businessunit.name}} </td>
+          <td> <a routerLink="{{businessunit.id}}"> Modifier </a></td>
+        </tr>
+      </tbody>
     </table>
-
-    <select name="agence" id="agence-select" [(ngModel)]="businessunit.agenceId">
-      <option value="">-- Choisissez l'agence de cette business Unit --</option>
-      <option *ngFor="let agence of agences" [ngValue]="agence.id">{{agence.name}}</option>
-    </select>
   </div>
+  <h3>Ajouter une Business Unit : </h3>
+
+  <app-businessunit-detail [businessunit]="businessunit"></app-businessunit-detail>
 
   <button class="add-button" (click)="add(businessunit)">
     Ajouter une businessunit
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 4085820..6b25ed2 100644
--- a/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.html
+++ b/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.html
@@ -1,54 +1,96 @@
-<div *ngIf="collaborateur" style="overflow-x:auto;" class="mb-3">
-
-  <table class="mb-3">
-    <tr>
-    <th>Name</th>
-    <th>First Name</th>
-    <th>Birth Date</th>
-    <th>Gender</th>
-    <th>Status</th>
-    <th>Children Number</th>
-    <th>Address</th>
-    <th>Telephone</th>
-    <th>Personal Mail</th>
-    <th>Apside Mail</th>
-    <th>Resignation Date</th>
-    </tr>
-
-    <tr>
-      <td><input id="collaborateur-name" [(ngModel)]="collaborateur.name" placeholder="name"></td>
-      <td><input id="collaborateur-firstName" [(ngModel)]="collaborateur.firstName" placeholder="firstname"></td>
-      <td><input id="collaborateur-birthDate" [(ngModel)]="collaborateur.birthDate" placeholder="birthDate"></td>
-      <td><input id="collaborateur-gender" [(ngModel)]="collaborateur.gender" placeholder="gender"></td>
-      <td><input id="collaborateur-status" [(ngModel)]="collaborateur.status" placeholder="status"></td>
-      <td><input id="collaborateur-childrenNumber" [(ngModel)]="collaborateur.childrenNumber" placeholder="childrenNumber"></td>
-      <td><input id="collaborateur-address" [(ngModel)]="collaborateur.address" placeholder="address"></td>
-      <td><input id="collaborateur-telephone" [(ngModel)]="collaborateur.telephone" placeholder="telephone"></td>
-      <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>
-    </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>
-
-  <select name="businessunit" id="businessunit-select" [(ngModel)]="collaborateur.businessUnitId">
-    <option value="">-- Choisissez la Business Unit pour le nouveau collaborateur --</option>
-    <option *ngFor="let businessunit of businessunits" [ngValue]="businessunit.id">{{businessunit.name}} </option>
-  </select>
-  <br/>
-  <span>
-    *Tous les champs sont obligatoires
-  </span>
+<div *ngIf="collaborateur" class="mb-3">
+
+  <div class="row mb-2">
+
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+      <label for="collaborateur-name" class="form-label">Nom</label>
+      <input class="form-control" id="collaborateur-name" [(ngModel)]="collaborateur.name" placeholder="Nom">
+    </div>
+
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+      <label for="collaborateur-firstName" class="form-label">Prénom</label>
+      <input class="form-control" id="collaborateur-firstName" [(ngModel)]="collaborateur.firstName" placeholder="Prénom">
+    </div>
+
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+      <label for="collaborateur-birthDate" class="form-label">Date de naissance</label>
+      <input type="date" class="form-control" id="collaborateur-birthDate" (change)="onBirthDateChange($event)" [(ngModel)]="bDate" placeholder="Date de naissance">
+    </div>
+
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+      <label class="form-label">Genre</label>
+      <select class="form-select" name="genre" id="collaborateur-gender" [(ngModel)]="collaborateur.gender">
+        <option value="" disabled selected>Genre</option>
+        <option value="MASCULIN">Masculin</option>
+        <option value="FEMININ">Féminin</option>
+        <option value="AUTRE">Autre</option>
+      </select>
+    </div>
+  </div>
+
+  <div class="row mb-2">
 
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+      <label for="collaborateur-status" class="form-label">Statut</label>
+      <input class="form-control" id="collaborateur-status" [(ngModel)]="collaborateur.status" placeholder="Statut">
+    </div>
 
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+      <label for="collaborateur-childrenNumber" class="form-label">Nombre d'enfants</label>
+      <input type="number" min="0" onkeyup="if(this.value<0){this.value= this.value * -1}" class="form-control" id="collaborateur-childrenNumber" [(ngModel)]="collaborateur.childrenNumber" placeholder="Nombre d'enfants">
+    </div>
 
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+      <label for="collaborateur-address" class="form-label">Adresse</label>
+      <input class="form-control" id="collaborateur-address" [(ngModel)]="collaborateur.address" placeholder="Adresse">
+    </div>
 
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+      <label for="collaborateur-telephone" class="form-label">Téléphone</label>
+      <input class="form-control" id="collaborateur-telephone" [(ngModel)]="collaborateur.telephone" placeholder="Téléphone">
+    </div>
+  </div>
 
+  <div class="row mb-4">
 
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+      <label for="collaborateur-personalMail" class="form-label">Mail personnel</label>
+      <input type="email" class="form-control" id="collaborateur-personalMail" [(ngModel)]="collaborateur.personalMail" placeholder="prenom.nom@example.com">
+    </div>
 
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+      <label for="collaborateur-apsideMail" class="form-label">Mail Apside</label>
+      <input type="email" class="form-control" id="collaborateur-apsideMail" [(ngModel)]="collaborateur.apsideMail" placeholder="prenom.nom@apside-groupe.com">
+    </div>
+
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+      <label for="collaborateur-resignationDate" class="form-label">Date de départ</label>
+      <input type="date" class="form-control" id="collaborateur-resignationDate" (change)="onResignationDateChange($event)" [ngModel]="rDate" placeholder="Date de départ">
+    </div>
+  </div>
+
+  <div class="row mb-2">
+
+    <div class="form-group col-12 col-md-6">
+      <label class="form-label">Référent</label>
+      <select class="form-select" name="referrer" id="referrer-select" [(ngModel)]="collaborateur.referrerId">
+        <option value="" disabled selected>Choisissez un référent pour le collaborateur</option>
+        <option *ngFor="let collaborateur of collaborateurs" [ngValue]="collaborateur.id">{{collaborateur.name}} {{collaborateur.firstName}}</option>
+      </select>
+    </div>
+
+    <div class="form-group col-12 col-md-6">
+      <label class="form-label">Business Unit</label>
+      <select class="form-select" name="businessunit" id="businessunit-select" [(ngModel)]="collaborateur.businessUnitId">
+        <option value="" disabled selected>Choisissez la Business Unit pour le collaborateur</option>
+        <option *ngFor="let businessunit of businessunits" [ngValue]="businessunit.id">{{businessunit.name}} </option>
+      </select>
+    </div>
+  </div>
+
+
+  <br/>
+  <span>
+    *Tous les champs sont obligatoires
+  </span>
 </div>
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 8376764..192d667 100644
--- a/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.ts
+++ b/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.ts
@@ -4,7 +4,6 @@ import {HttpClient} from "@angular/common/http";
 import {CollaborateurService} from "../../../services/collaborateur.service";
 import {BusinessunitService} from "../../../services/businessunit.service";
 import {Businessunit} from "../../../interfaces/businessunit";
-
 @Component({
   selector: 'app-collaborateur-detail',
   templateUrl: './collaborateur-detail.component.html',
@@ -14,19 +13,30 @@ export class CollaborateurDetailComponent implements OnInit {
 
   businessunits : Businessunit[] = [];
   collaborateurs : Collaborateur[] = [];
+  rDate : String = "";
+  bDate : String = "";
 
   @Input()
-  collaborateur = {} as Collaborateur ;
+  collaborateur = {} as Collaborateur;
 
   constructor(
     private http : HttpClient,
     private collaborateurService: CollaborateurService,
     private businessunitService: BusinessunitService
-  ) { }
+  ) {}
+
 
   ngOnInit(): void {
     this.getCollaborateurs();
     this.getBusinessunits();
+    if (this.collaborateur.resignationDate) {
+      this.rDate = new Date(this.collaborateur.resignationDate).toISOString().split('T')[0];
+      console.log(this.rDate)
+    }
+    if (this.collaborateur.birthDate) {
+      this.bDate = new Date(this.collaborateur.birthDate).toISOString().split('T')[0];
+      console.log(this.bDate)
+    }
   }
 
   getCollaborateurs():void {
@@ -39,4 +49,17 @@ export class CollaborateurDetailComponent implements OnInit {
       .subscribe(businessunits => this.businessunits = businessunits);
   }
 
+  onResignationDateChange($event: any):void {
+    console.log($event.target)
+    this.collaborateur.resignationDate = new Date($event.target.value);
+    console.log(this.rDate)
+    console.log(this.collaborateur.resignationDate)
+  }
+
+  onBirthDateChange($event: any):void {
+    console.log($event.target)
+    this.collaborateur.birthDate = new Date($event.target.value);
+    console.log(this.bDate)
+    console.log(this.collaborateur.birthDate)
+  }
 }
diff --git a/src/app/components/collaborateur/collaborateur-edit/collaborateur-edit.component.html b/src/app/components/collaborateur/collaborateur-edit/collaborateur-edit.component.html
index 626e1f6..4370f05 100644
--- a/src/app/components/collaborateur/collaborateur-edit/collaborateur-edit.component.html
+++ b/src/app/components/collaborateur/collaborateur-edit/collaborateur-edit.component.html
@@ -2,7 +2,8 @@
 <div *ngIf="collaborateur">
 
   <h2>{{collaborateur.name | uppercase}} {{collaborateur.firstName | uppercase}} </h2>
-  <div><span>id : </span>{{collaborateur.id}}</div>
+
+  <div><label class="form-label">ID : </label>{{collaborateur.id}}</div>
 
   <app-collaborateur-detail [collaborateur]="collaborateur"></app-collaborateur-detail>
 
diff --git a/src/app/components/collaborateur/collaborateur-edit/collaborateur-edit.component.ts b/src/app/components/collaborateur/collaborateur-edit/collaborateur-edit.component.ts
index 7da33e1..d35a5d2 100644
--- a/src/app/components/collaborateur/collaborateur-edit/collaborateur-edit.component.ts
+++ b/src/app/components/collaborateur/collaborateur-edit/collaborateur-edit.component.ts
@@ -34,6 +34,7 @@ export class CollaborateurEditComponent implements OnInit {
 
   save():void{
     if (this.collaborateur){
+      console.log("SAVE",this.collaborateur.resignationDate)
       this.collaborateurService.updateCollaborateur(this.collaborateur)
         .subscribe(()=>this.goBack());
     }
diff --git a/src/app/components/collaborateur/collaborateur.component.html b/src/app/components/collaborateur/collaborateur.component.html
index 21ef82a..624a987 100644
--- a/src/app/components/collaborateur/collaborateur.component.html
+++ b/src/app/components/collaborateur/collaborateur.component.html
@@ -1,20 +1,26 @@
 <div xmlns="">
   <h2 class = mb-4>Collaborateurs</h2>
 
-  <div style="overflow-x:auto;" class="mb-5">
-    <table >
-      <tr>
-      <th class="spaced">Name</th>
-      <th class="spaced">First Name</th>
-      <th class="spaced">Apside Mail</th>
-      </tr>
+  <div style="overflow-x:auto;" class="mb-5 col-12">
+    <table class="table">
+      <thead>
+        <tr>
+          <th scope="col">ID</th>
+          <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 collaborateurs">
-        <td class="spaced"> {{collaborateur.name}} </td>
-        <td class="spaced"> {{collaborateur.firstName}} </td>
-        <td class="spaced"> {{collaborateur.apsideMail}} </td>
-        <td class="spaced"> <a routerLink="{{collaborateur.id}}"> Modifier </a></td>
+        <th scope="row">{{collaborateur.id}}</th>
+        <td> {{collaborateur.name}} </td>
+        <td> {{collaborateur.firstName}} </td>
+        <td> {{collaborateur.apsideMail}} </td>
+        <td> <a routerLink="{{collaborateur.id}}"> Modifier </a></td>
       </tr>
+      </tbody>
     </table>
   </div>
 
diff --git a/src/app/components/collaborateur/collaborateur.component.ts b/src/app/components/collaborateur/collaborateur.component.ts
index 7d5342d..1210271 100644
--- a/src/app/components/collaborateur/collaborateur.component.ts
+++ b/src/app/components/collaborateur/collaborateur.component.ts
@@ -27,7 +27,6 @@ export class CollaborateurComponent implements OnInit {
   }
 
   add(collaborateur: Collaborateur): void {
-    console.log(collaborateur);
     this.collaborateurService.addCollaborateur(collaborateur)
       .subscribe(collaborateur => {
         this.collaborateurs.push(collaborateur);
diff --git a/src/app/services/agence.service.ts b/src/app/services/agence.service.ts
index e1c80ac..e26f40a 100644
--- a/src/app/services/agence.service.ts
+++ b/src/app/services/agence.service.ts
@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import {HttpClient, HttpHeaders} from "@angular/common/http";
 import {Observable} from "rxjs";
 import {Agence} from "../interfaces/agence";
-import {agencesUrl} from "../../ressources/routes/routes";
+import {agencesUrl} from "../../ressources/routes/routesPreprod";
 
 @Injectable({
   providedIn: 'root'
diff --git a/src/app/services/businessunit.service.ts b/src/app/services/businessunit.service.ts
index bd17c09..2c96ef2 100644
--- a/src/app/services/businessunit.service.ts
+++ b/src/app/services/businessunit.service.ts
@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import {HttpClient, HttpHeaders} from "@angular/common/http";
 import {Observable} from "rxjs";
 import {Businessunit} from "../interfaces/businessunit";
-import {businessunitsUrl} from "../../ressources/routes/routes";
+import {businessunitsUrl} from "../../ressources/routes/routesPreprod";
 
 @Injectable({
   providedIn: 'root'
diff --git a/src/app/services/collaborateur.service.ts b/src/app/services/collaborateur.service.ts
index f410852..2b58b98 100644
--- a/src/app/services/collaborateur.service.ts
+++ b/src/app/services/collaborateur.service.ts
@@ -2,7 +2,7 @@ import {Collaborateur} from "../interfaces/collaborateur";
 import {Injectable} from '@angular/core';
 import {Observable} from "rxjs";
 import {HttpClient, HttpHeaders} from "@angular/common/http";
-import {collaborateursUrl} from "../../ressources/routes/routes";
+import {collaborateursUrl} from "../../ressources/routes/routesPreprod";
 
 
 @Injectable({providedIn: 'root'})
diff --git a/src/ressources/routes/routes.ts b/src/ressources/routes/routes.ts
index dbe2e02..a4645f5 100644
--- a/src/ressources/routes/routes.ts
+++ b/src/ressources/routes/routes.ts
@@ -1,3 +1,3 @@
-export const collaborateursUrl = 'https://localhost:8081/api/collaborateurs';
-export const agencesUrl = 'https://localhost:8081/api/agences';
-export const businessunitsUrl = 'https://localhost:8081/api/businessunits';
+export const collaborateursUrl = 'https://localhost:5001/api/collaborateurs';
+export const agencesUrl = 'https://localhost:5001/api/agences';
+export const businessunitsUrl = 'https://localhost:5001/api/businessunits';
diff --git a/src/ressources/routes/routesPreprod.ts b/src/ressources/routes/routesPreprod.ts
new file mode 100644
index 0000000..50dc52e
--- /dev/null
+++ b/src/ressources/routes/routesPreprod.ts
@@ -0,0 +1,3 @@
+export const collaborateursUrl = 'https://collaborateur-epa.apsdigit.lan/api/collaborateurs';
+export const agencesUrl = 'https://collaborateur-epa.apsdigit.lan/api/agences';
+export const businessunitsUrl = 'https://collaborateur-epa.apsdigit.lan/api/businessunits';