diff --git a/src/app/app.component.html b/src/app/app.component.html
index 507b697..b746eb1 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -61,13 +61,13 @@
     <a class="toolbar-button" routerLink="/home">Home</a>
   </nav>
   <nav>
-    <a class="toolbar-button" routerLink="/collaborateurs">Collaborateurs</a>
+    <a class="toolbar-button" routerLink="/businessunits">Business Units</a>
   </nav>
   <nav>
     <a class="toolbar-button" routerLink="/agences">Agences</a>
   </nav>
   <nav>
-    <a class="toolbar-button" routerLink="/businessunits">Business Units</a>
+    <a class="toolbar-button" routerLink="/collaborateurs">Collaborateurs</a>
   </nav>
 </div>
 
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 27744e2..80a8990 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -11,7 +11,6 @@ import { AppRoutingModule } from './app-routing.module';
 import { HomeComponent } from './components/home/home.component';
 import { AgenceComponent } from './components/agence/agence.component';
 import { AgenceEditComponent } from './components/agence/agence-edit/agence-edit.component';
-import { CollaborateurDetailComponent } from './components/collaborateur/collaborateur-detail/collaborateur-detail.component';
 import { BusinessunitComponent } from './components/businessunit/businessunit.component';
 import { BusinessunitEditComponent } from './components/businessunit/businessunit-edit/businessunit-edit.component';
 
@@ -23,7 +22,6 @@ import { BusinessunitEditComponent } from './components/businessunit/businessuni
     HomeComponent,
     AgenceComponent,
     AgenceEditComponent,
-    CollaborateurDetailComponent,
     BusinessunitComponent,
     BusinessunitEditComponent,
 
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 c13221a..b876226 100644
--- a/src/app/components/agence/agence-edit/agence-edit.component.html
+++ b/src/app/components/agence/agence-edit/agence-edit.component.html
@@ -14,6 +14,17 @@
       </div>
     </div>
 
+    <div class="form-group col-12 col-md-6">
+      <label class="form-label">Business Unit</label>
+      <select class="form-select" formControlName="businessUnitId" id="businessUnit-select" [ngClass]="{ 'is-invalid': submitted && f.businessUnitId.errors }">
+        <option value="" disabled selected>Choisissez la business unit de cette agence</option>
+        <option *ngFor="let businessUnit of businessUnits" [ngValue]="businessUnit.id">{{businessUnit.name}}</option>
+      </select>
+      <div *ngIf="submitted && f.businessUnitId.errors" class="invalid-feedback">
+        <div *ngIf="f.businessUnitId.errors.required">Vous devez choisir la business unit à laquelle appartient l'agence </div>
+      </div>
+    </div>
+
 
     <div>
       <button (click)="goBack()">Retour</button>
diff --git a/src/app/components/agence/agence-edit/agence-edit.component.ts b/src/app/components/agence/agence-edit/agence-edit.component.ts
index a899027..c6ab958 100644
--- a/src/app/components/agence/agence-edit/agence-edit.component.ts
+++ b/src/app/components/agence/agence-edit/agence-edit.component.ts
@@ -4,6 +4,8 @@ import {ActivatedRoute} from "@angular/router";
 import {AgenceService} from "../../../services/agence.service";
 import {Location} from "@angular/common";
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {Businessunit} from "../../../interfaces/businessunit";
+import {BusinessunitService} from "../../../services/businessunit.service";
 
 @Component({
   selector: 'app-agence-edit',
@@ -11,7 +13,9 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms';
   styleUrls: ['./agence-edit.component.scss']
 })
 export class AgenceEditComponent implements OnInit {
-  agence = {} as Agence ;
+  agence = {} as Agence;
+  businessUnits : Businessunit[] = [];
+  businessUnit = {} as Businessunit ;
 
   registerForm!: FormGroup;
   submitted = false;
@@ -19,14 +23,17 @@ export class AgenceEditComponent implements OnInit {
   constructor(
     private route: ActivatedRoute,
     private agenceService: AgenceService,
+    private businessUnitService: BusinessunitService,
     private location: Location,
     private formBuilder: FormBuilder
   ) { }
 
   ngOnInit(): void {
+    this.getBusinessUnits()
     this.getAgence()
     this.registerForm = this.formBuilder.group({
-      name: ['', Validators.required]
+      name: ['', Validators.required],
+      businessUnitId:['',Validators.required]
     });
   }
 
@@ -64,5 +71,9 @@ export class AgenceEditComponent implements OnInit {
     this.submitted = false;
     this.registerForm.reset();
   }
+  getBusinessUnits():void {
+    this.businessUnitService.getBusinessunits()
+      .subscribe(businessunits => this.businessUnits = businessunits);
+  }
 
 }
diff --git a/src/app/components/agence/agence.component.html b/src/app/components/agence/agence.component.html
index d4af2fa..6e44397 100644
--- a/src/app/components/agence/agence.component.html
+++ b/src/app/components/agence/agence.component.html
@@ -12,6 +12,17 @@
       </div>
     </div>
 
+    <div class="form-group col-12 col-md-6">
+      <label class="form-label">Business Unit</label>
+      <select class="form-select" formControlName="businessUnitId" id="businessUnit-select" [ngClass]="{ 'is-invalid': submitted && f.businessUnitId.errors }">
+        <option value="" disabled selected>Choisissez la business unit de cette agence</option>
+        <option *ngFor="let businessUnit of businessUnits" [ngValue]="businessUnit.id">{{businessUnit.name}}</option>
+      </select>
+      <div *ngIf="submitted && f.businessUnitId.errors" class="invalid-feedback">
+        <div *ngIf="f.businessUnitId.errors.required">Vous devez choisir la business unit à laquelle appartient l'agence </div>
+      </div>
+    </div>
+
 
     <div>
       <button type="submit">Créer l'agence</button>
diff --git a/src/app/components/agence/agence.component.ts b/src/app/components/agence/agence.component.ts
index 4a00db4..4dd6963 100644
--- a/src/app/components/agence/agence.component.ts
+++ b/src/app/components/agence/agence.component.ts
@@ -3,6 +3,8 @@ import {Agence} from "../../interfaces/agence";
 import {HttpClient} from "@angular/common/http";
 import {AgenceService} from "../../services/agence.service";
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {Businessunit} from "../../interfaces/businessunit";
+import {BusinessunitService} from "../../services/businessunit.service";
 
 @Component({
   selector: 'app-agence',
@@ -11,7 +13,9 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 })
 export class AgenceComponent implements OnInit {
   agences : Agence[] = [];
-  agence = {} as Agence ;
+  agence = {} as Agence;
+  businessUnits : Businessunit[] = [];
+  businessUnit = {} as Businessunit ;
 
   registerForm!: FormGroup;
   submitted = false;
@@ -19,13 +23,16 @@ export class AgenceComponent implements OnInit {
   constructor(
     private http : HttpClient,
     private agenceService: AgenceService,
+    private businessUnitService: BusinessunitService,
     private formBuilder: FormBuilder
   ) { }
 
   ngOnInit(): void {
     this.getAgences();
+    this.getBusinessUnits();
     this.registerForm = this.formBuilder.group({
-      name: ['', Validators.required]
+      name: ['', Validators.required],
+      businessUnitId: ['',Validators.required]
     });
   }
 
@@ -34,6 +41,11 @@ export class AgenceComponent implements OnInit {
       .subscribe(agences => this.agences = agences);
   }
 
+  getBusinessUnits() {
+    this.businessUnitService.getBusinessunits()
+      .subscribe(businessunits => this.businessUnits = businessunits);
+  }
+
   add(agence: Agence): void {
     this.agenceService.addAgence(agence)
       .subscribe(agence => {
@@ -47,7 +59,8 @@ export class AgenceComponent implements OnInit {
     if (this.registerForm.invalid) {
       return;
     }
-    this.agence = this.registerForm.value
+    this.agence.name = this.registerForm.value.name
+    this.agence.businessUnitId = this.registerForm.value.businessUnitId
     this.add(this.agence)
   }
 
@@ -58,4 +71,5 @@ export class AgenceComponent implements OnInit {
     this.registerForm.reset();
   }
 
+
 }
diff --git a/src/app/components/businessunit/businessunit-edit/businessunit-edit.component.html b/src/app/components/businessunit/businessunit-edit/businessunit-edit.component.html
index 177ad32..d7bf37e 100644
--- a/src/app/components/businessunit/businessunit-edit/businessunit-edit.component.html
+++ b/src/app/components/businessunit/businessunit-edit/businessunit-edit.component.html
@@ -14,17 +14,6 @@
       </div>
     </div>
 
-    <div class="form-group col-12 col-md-6">
-      <label class="form-label">Agence</label>
-      <select class="form-select" formControlName="agenceId" id="agence-select" [ngClass]="{ 'is-invalid': submitted && f.agenceId.errors }">
-        <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 *ngIf="submitted && f.agenceId.errors" class="invalid-feedback">
-        <div *ngIf="f.agenceId.errors.required">Vous devez choisir l'agence à laquelle appartient la business unit</div>
-      </div>
-    </div>
-
     <div>
       <button (click)="goBack()">Retour</button>
       <button type="submit">Sauvegarder les changements</button>
diff --git a/src/app/components/businessunit/businessunit-edit/businessunit-edit.component.ts b/src/app/components/businessunit/businessunit-edit/businessunit-edit.component.ts
index 22d4d31..64703dc 100644
--- a/src/app/components/businessunit/businessunit-edit/businessunit-edit.component.ts
+++ b/src/app/components/businessunit/businessunit-edit/businessunit-edit.component.ts
@@ -16,7 +16,6 @@ export class BusinessunitEditComponent implements OnInit {
 
   businessunit = {} as Businessunit ;
   agences : Agence[] = [];
-  agence = {} as Agence ;
 
 
   registerForm!: FormGroup;
@@ -34,8 +33,7 @@ export class BusinessunitEditComponent implements OnInit {
     this.getBusinessunit();
     this.getAgences();
     this.registerForm = this.formBuilder.group({
-      name: ['', Validators.required],
-      agenceId: ['',Validators.required]
+      name: ['', Validators.required]
     });
   }
 
@@ -75,7 +73,6 @@ export class BusinessunitEditComponent implements OnInit {
       return;
     }
     this.businessunit.name = this.registerForm.value.name
-    this.businessunit.agenceId = this.registerForm.value.agenceId
     this.save()
   }
 
diff --git a/src/app/components/businessunit/businessunit.component.html b/src/app/components/businessunit/businessunit.component.html
index a7bf06c..bf65d8c 100644
--- a/src/app/components/businessunit/businessunit.component.html
+++ b/src/app/components/businessunit/businessunit.component.html
@@ -12,17 +12,6 @@
       </div>
     </div>
 
-    <div class="form-group col-12 col-md-6">
-      <label class="form-label">Agence</label>
-      <select class="form-select" formControlName="agenceId" id="agence-select" [ngClass]="{ 'is-invalid': submitted && f.agenceId.errors }">
-        <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 *ngIf="submitted && f.agenceId.errors" class="invalid-feedback">
-        <div *ngIf="f.agenceId.errors.required">Vous devez choisir l'agence à laquelle appartient la business unit</div>
-      </div>
-    </div>
-
     <div>
       <button type="submit">Créer la business unit</button>
       <button type="reset" (click)="onReset()">Effacer</button>
diff --git a/src/app/components/businessunit/businessunit.component.ts b/src/app/components/businessunit/businessunit.component.ts
index 9dc86f0..de93580 100644
--- a/src/app/components/businessunit/businessunit.component.ts
+++ b/src/app/components/businessunit/businessunit.component.ts
@@ -2,8 +2,6 @@ import { Component, OnInit } from '@angular/core';
 import {Businessunit} from "../../interfaces/businessunit";
 import {HttpClient} from "@angular/common/http";
 import {BusinessunitService} from "../../services/businessunit.service";
-import {Agence} from "../../interfaces/agence";
-import {AgenceService} from "../../services/agence.service";
 import {FormBuilder, FormGroup, Validators} from "@angular/forms";
 
 @Component({
@@ -15,8 +13,6 @@ export class BusinessunitComponent implements OnInit {
 
   businessunits : Businessunit[] = [];
   businessunit = {} as Businessunit ;
-  agences : Agence[] = [];
-  agence = {} as Agence ;
 
   registerForm!: FormGroup;
   submitted = false;
@@ -24,16 +20,13 @@ export class BusinessunitComponent implements OnInit {
   constructor(
     private http : HttpClient,
     private businessunitService: BusinessunitService,
-    private agenceService: AgenceService,
     private formBuilder: FormBuilder
   ) { }
 
   ngOnInit(): void {
     this.getBusinessunits();
-    this.getAgences();
     this.registerForm = this.formBuilder.group({
       name: ['', Validators.required],
-      agenceId: ['',Validators.required]
     });
   }
 
@@ -42,11 +35,6 @@ export class BusinessunitComponent implements OnInit {
       .subscribe(businessunits => this.businessunits = businessunits);
   }
 
-  getAgences():void {
-    this.agenceService.getAgences()
-      .subscribe(agences => this.agences = agences);
-  }
-
   add(businessunit: Businessunit): void {
     this.businessunitService.addBusinessunit(businessunit)
       .subscribe(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
deleted file mode 100644
index 6b25ed2..0000000
--- a/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.html
+++ /dev/null
@@ -1,96 +0,0 @@
-<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.scss b/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.scss
deleted file mode 100644
index 8b13789..0000000
--- a/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.scss
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.ts b/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.ts
deleted file mode 100644
index 192d667..0000000
--- a/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import {Component, Input, OnInit} from '@angular/core';
-import {Collaborateur} from "../../../interfaces/collaborateur";
-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',
-  styleUrls: ['./collaborateur-detail.component.scss']
-})
-export class CollaborateurDetailComponent implements OnInit {
-
-  businessunits : Businessunit[] = [];
-  collaborateurs : Collaborateur[] = [];
-  rDate : String = "";
-  bDate : String = "";
-
-  @Input()
-  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 {
-    this.collaborateurService.getCollaborateurs()
-      .subscribe(collaborateurs => this.collaborateurs = collaborateurs);
-  }
-
-  getBusinessunits():void {
-    this.businessunitService.getBusinessunits()
-      .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 4370f05..ff4a762 100644
--- a/src/app/components/collaborateur/collaborateur-edit/collaborateur-edit.component.html
+++ b/src/app/components/collaborateur/collaborateur-edit/collaborateur-edit.component.html
@@ -5,9 +5,150 @@
 
   <div><label class="form-label">ID : </label>{{collaborateur.id}}</div>
 
-  <app-collaborateur-detail [collaborateur]="collaborateur"></app-collaborateur-detail>
+  <form [formGroup]="registerForm" (ngSubmit)="onSubmit()" >
+
+    <div class="row mb-2">
+
+      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+        <label class="form-label">Nom</label>
+        <input class="form-control" formControlName="name" [ngClass]="{ 'is-invalid': submitted && f.name.errors }" [value]="collaborateur.name">
+        <div *ngIf="submitted && f.name.errors" class="invalid-feedback">
+          <div *ngIf="f.name.errors.required">Le nom d'un collaborateur est obligatoire</div>
+        </div>
+      </div>
+
+      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+        <label class="form-label">Prénom</label>
+        <input class="form-control" formControlName="firstName" [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }" [value]="collaborateur.firstName">
+        <div *ngIf="submitted && f.firstName.errors" class="invalid-feedback">
+          <div *ngIf="f.firstName.errors.required">Le prénom d'un collaborateur est obligatoire</div>
+        </div>
+      </div>
+
+      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+        <label class="form-label">Date de naissance</label>
+        <input type="date" class="form-control" formControlName="birthDate" (change)="onBirthDateChange($event)" [ngClass]="{ 'is-invalid': submitted && f.birthDate.errors }" [value]="collaborateur.birthDate">
+        <div *ngIf="submitted && f.birthDate.errors" class="invalid-feedback">
+          <div *ngIf="f.birthDate.errors.required">La date de naissance d'un collaborateur est obligatoire</div>
+        </div>
+      </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" formControlName="gender" [ngClass]="{ 'is-invalid': submitted && f.gender.errors }" [value]="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 *ngIf="submitted && f.gender.errors" class="invalid-feedback">
+          <div *ngIf="f.gender.errors.required">Vous devez préciser le genre du collaborateur</div>
+        </div>
+      </div>
+
+    </div>
+
+    <div class="row mb-2">
+
+      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+        <label class="form-label">Statut</label>
+        <select class="form-select" formControlName="status" [ngClass]="{ 'is-invalid': submitted && f.status.errors }" [value]="collaborateur.status">
+          <option value="" disabled selected>Statut</option>
+          <option value="CADRE">Cadre</option>
+          <option value="NON-CADRE">Non-cadre</option>
+          <option value="ALTERNANT">Alternant</option>
+          <option value="STAGIAIRE">Stagiaire</option>
+        </select>
+        <div *ngIf="submitted && f.status.errors" class="invalid-feedback">
+          <div *ngIf="f.status.errors.required">Vous devez préciser le statut du collaborateur</div>
+        </div>
+      </div>
+
+      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+        <label class="form-label">Nombre d'enfants</label>
+        <input class="form-control" formControlName="childrenNumber" [ngClass]="{ 'is-invalid': submitted && f.childrenNumber.errors }" type="number" min="0" onkeyup="if(this.value<0){this.value= this.value * -1}" [value]="collaborateur.childrenNumber">
+        <div *ngIf="submitted && f.childrenNumber.errors" class="invalid-feedback">
+          <div *ngIf="f.childrenNumber.errors.required">Le nombre d'enfant d'un collaborateur est obligatoire</div>
+        </div>
+      </div>
+
+      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+        <label class="form-label">Adresse</label>
+        <input class="form-control" formControlName="address" [ngClass]="{ 'is-invalid': submitted && f.address.errors }" [value]="collaborateur.address">
+        <div *ngIf="submitted && f.address.errors" class="invalid-feedback">
+          <div *ngIf="f.address.errors.required">L'adresse d'un collaborateur est obligatoire</div>
+        </div>
+      </div>
+
+      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+        <label class="form-label">Téléphone</label>
+        <input class="form-control" formControlName="telephone" [ngClass]="{ 'is-invalid': submitted && f.telephone.errors }" [value]="collaborateur.telephone">
+        <div *ngIf="submitted && f.telephone.errors" class="invalid-feedback">
+          <div *ngIf="f.telephone.errors.required">Le numéro de téléphone d'un collaborateur est obligatoire</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="row mb-2">
+
+      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+        <label class="form-label">Mail personnel</label>
+        <input type="email" class="form-control" formControlName="personalMail" [ngClass]="{ 'is-invalid': submitted && f.personalMail.errors }" placeholder="prenom.nom@example.com" [value]="collaborateur.personalMail">
+        <div *ngIf="submitted && f.personalMail.errors" class="invalid-feedback">
+          <div *ngIf="f.personalMail.errors.required">Le mail personnel d'un collaborateur est obligatoire</div>
+        </div>
+      </div>
+
+      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+        <label class="form-label">Mail Apside</label>
+        <input type="email" class="form-control" formControlName="apsideMail" [ngClass]="{ 'is-invalid': submitted && f.apsideMail.errors }" placeholder="prenom.nom@apside-groupe.com" [value]="collaborateur.apsideMail">
+        <div *ngIf="submitted && f.apsideMail.errors" class="invalid-feedback">
+          <div *ngIf="f.apsideMail.errors.required">Le mail Apside d'un collaborateur est obligatoire</div>
+        </div>
+      </div>
+
+      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+        <label class="form-label">Date de départ</label>
+        <input type="date" class="form-control" formControlName="resignationDate" (change)="onResignationDateChange($event)" [ngClass]="{ 'is-invalid': submitted && f.resignationDate.errors }" [value]="collaborateur.resignationDate">
+        <div *ngIf="submitted && f.resignationDate.errors" class="invalid-feedback">
+          <div *ngIf="f.resignationDate.errors.required">La date de départ d'un collaborateur est obligatoire</div>
+        </div>
+      </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" formControlName="referrerId" [ngClass]="{ 'is-invalid': submitted && f.referrerId.errors }">
+          <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 *ngIf="submitted && f.referrerId.errors" class="invalid-feedback">
+          <div *ngIf="f.referrerId.errors.required">Vous devez préciser le référent du collaborateur</div>
+        </div>
+      </div>
+
+      <div class="form-group col-12 col-md-6">
+        <label class="form-label">Business Unit</label>
+        <select class="form-select" formControlName="businessUnitId" [ngClass]="{ 'is-invalid': submitted && f.businessUnitId.errors }">
+          <option value="" disabled selected>Choisissez une Business Unit pour le collaborateur</option>
+          <option *ngFor="let businessUnit of businessUnits" [ngValue]="businessUnit.id">{{businessUnit.name}} </option>
+        </select>
+        <div *ngIf="submitted && f.businessUnitId.errors" class="invalid-feedback">
+          <div *ngIf="f.businessUnitId.errors.required">Vous devez préciser la Business Unit du collaborateur</div>
+        </div>
+      </div>
+
+    </div>
+
+    <div>
+      <button (click)="goBack()">Retour</button>
+      <button type="submit">Sauvegarder les changements</button>
+      <button (click)="delete()">Supprimer le collaborateur</button>
+      <button type="reset" (click)="onReset()">Effacer</button>
+    </div>
+  </form>
 
-  <button (click)="goBack()">Retour</button>
-  <button (click)="save()">Sauvegarder les changements</button>
-  <button (click)="delete()">Supprimer le collaborateur</button>
 </div>
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 d35a5d2..9852e21 100644
--- a/src/app/components/collaborateur/collaborateur-edit/collaborateur-edit.component.ts
+++ b/src/app/components/collaborateur/collaborateur-edit/collaborateur-edit.component.ts
@@ -3,6 +3,9 @@ import {Collaborateur} from "../../../interfaces/collaborateur";
 import { ActivatedRoute } from '@angular/router';
 import { Location } from '@angular/common';
 import { CollaborateurService} from "../../../services/collaborateur.service";
+import {BusinessunitService} from "../../../services/businessunit.service";
+import {FormBuilder, FormGroup, Validators} from "@angular/forms";
+import {Businessunit} from "../../../interfaces/businessunit";
 
 @Component({
   selector: 'app-collaborateur-edit',
@@ -10,16 +13,55 @@ import { CollaborateurService} from "../../../services/collaborateur.service";
   styleUrls: ['./collaborateur-edit.component.scss']
 })
 export class CollaborateurEditComponent implements OnInit {
-  collaborateur : Collaborateur | undefined;
+  collaborateur = {} as Collaborateur;
+  collaborateurs : Collaborateur[] = [];
+  businessUnits : Businessunit[] = [];
+  businessUnit = {} as Businessunit ;
+
+  rDate : String = "";
+  bDate : String = "";
+
+  registerForm!: FormGroup;
+  submitted = false;
 
   constructor(
     private route: ActivatedRoute,
     private collaborateurService: CollaborateurService,
-    private location: Location
+    private businessunitService: BusinessunitService,
+    private location: Location,
+    private formBuilder: FormBuilder
   ) { }
 
   ngOnInit(): void {
-    this.getCollaborateur()
+    this.getCollaborateurs()
+    this.getCollaborateur();
+    this.getBusinessunits();
+    this.registerForm = this.formBuilder.group({
+      name: ['', Validators.required],
+      firstName: ['', Validators.required],
+      birthDate: ['', Validators.required],
+      gender: ['', Validators.required],
+      status: ['', Validators.required],
+      childrenNumber: ['', Validators.required],
+      address: ['', Validators.required],
+      telephone: ['', Validators.required],
+      personalMail: ['', Validators.required],
+      apsideMail: ['', Validators.required],
+      resignationDate: ['', Validators.required],
+      referrerId: ['', Validators.required],
+      businessUnitId: ['', Validators.required],
+    });
+    if (this.collaborateur.resignationDate) {
+      this.rDate = new Date(this.collaborateur.resignationDate).toISOString().split('T')[0];
+    }
+    if (this.collaborateur.birthDate) {
+      this.bDate = new Date(this.collaborateur.birthDate).toISOString().split('T')[0];
+    }
+  }
+
+  getCollaborateurs():void {
+    this.collaborateurService.getCollaborateurs()
+      .subscribe(collaborateurs => this.collaborateurs = collaborateurs);
   }
 
   getCollaborateur(): void {
@@ -28,13 +70,17 @@ export class CollaborateurEditComponent implements OnInit {
       .subscribe(collaborateur => this.collaborateur = collaborateur);
   }
 
+  getBusinessunits():void {
+    this.businessunitService.getBusinessunits()
+      .subscribe(businessunits => this.businessUnits = businessunits);
+  }
+
   goBack(): void {
     this.location.back();
   }
 
   save():void{
     if (this.collaborateur){
-      console.log("SAVE",this.collaborateur.resignationDate)
       this.collaborateurService.updateCollaborateur(this.collaborateur)
         .subscribe(()=>this.goBack());
     }
@@ -46,4 +92,29 @@ export class CollaborateurEditComponent implements OnInit {
         .subscribe(()=>this.goBack());
     }
   }
+
+  onSubmit() {
+    this.submitted = true;
+
+    if (this.registerForm.invalid) {
+      return;
+    }
+    this.collaborateur = this.registerForm.value
+    this.save()
+  }
+
+  get f() { return this.registerForm.controls; }
+
+  onReset() {
+    this.submitted = false;
+    this.registerForm.reset();
+  }
+
+  onResignationDateChange($event: any):void {
+    this.collaborateur.resignationDate = new Date($event.target.value);
+  }
+
+  onBirthDateChange($event: any):void {
+    this.collaborateur.birthDate = new Date($event.target.value);
+  }
 }
diff --git a/src/app/components/collaborateur/collaborateur.component.html b/src/app/components/collaborateur/collaborateur.component.html
index 361a4bf..eb08cda 100644
--- a/src/app/components/collaborateur/collaborateur.component.html
+++ b/src/app/components/collaborateur/collaborateur.component.html
@@ -2,11 +2,150 @@
 
   <h3>Ajouter un collaborateur : </h3>
 
-  <app-collaborateur-detail [collaborateur]="collaborateur"></app-collaborateur-detail>
+  <form [formGroup]="registerForm" (ngSubmit)="onSubmit()" >
+
+    <div class="row mb-2">
+
+      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+        <label class="form-label">Nom</label>
+        <input class="form-control" formControlName="name" [ngClass]="{ 'is-invalid': submitted && f.name.errors }">
+        <div *ngIf="submitted && f.name.errors" class="invalid-feedback">
+          <div *ngIf="f.name.errors.required">Le nom d'un collaborateur est obligatoire</div>
+        </div>
+      </div>
+
+      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+        <label class="form-label">Prénom</label>
+        <input class="form-control" formControlName="firstName" [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }">
+        <div *ngIf="submitted && f.firstName.errors" class="invalid-feedback">
+          <div *ngIf="f.firstName.errors.required">Le prénom d'un collaborateur est obligatoire</div>
+        </div>
+      </div>
+
+      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+        <label class="form-label">Date de naissance</label>
+        <input type="date" class="form-control" formControlName="birthDate" (change)="onBirthDateChange($event)" [ngClass]="{ 'is-invalid': submitted && f.birthDate.errors }">
+        <div *ngIf="submitted && f.birthDate.errors" class="invalid-feedback">
+          <div *ngIf="f.birthDate.errors.required">La date de naissance d'un collaborateur est obligatoire</div>
+        </div>
+      </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" formControlName="gender" [ngClass]="{ 'is-invalid': submitted && f.gender.errors }">
+          <option value="" disabled selected>Genre</option>
+          <option value="MASCULIN">Masculin</option>
+          <option value="FEMININ">Féminin</option>
+          <option value="AUTRE">Autre</option>
+        </select>
+        <div *ngIf="submitted && f.gender.errors" class="invalid-feedback">
+          <div *ngIf="f.gender.errors.required">Vous devez préciser le genre du collaborateur</div>
+        </div>
+      </div>
+
+    </div>
+
+    <div class="row mb-2">
+
+      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+        <label class="form-label">Statut</label>
+        <select class="form-select" formControlName="status" [ngClass]="{ 'is-invalid': submitted && f.status.errors }">
+          <option value="" disabled selected>Statut</option>
+          <option value="CADRE">Cadre</option>
+          <option value="NON-CADRE">Non-cadre</option>
+          <option value="ALTERNANT">Alternant</option>
+          <option value="STAGIAIRE">Stagiaire</option>
+        </select>
+        <div *ngIf="submitted && f.status.errors" class="invalid-feedback">
+          <div *ngIf="f.status.errors.required">Vous devez préciser le statut du collaborateur</div>
+        </div>
+      </div>
+
+      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+        <label class="form-label">Nombre d'enfants</label>
+        <input class="form-control" formControlName="childrenNumber" [ngClass]="{ 'is-invalid': submitted && f.childrenNumber.errors }" type="number" min="0" onkeyup="if(this.value<0){this.value= this.value * -1}">
+        <div *ngIf="submitted && f.childrenNumber.errors" class="invalid-feedback">
+          <div *ngIf="f.childrenNumber.errors.required">Le nombre d'enfant d'un collaborateur est obligatoire</div>
+        </div>
+      </div>
+
+      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+        <label class="form-label">Adresse</label>
+        <input class="form-control" formControlName="address" [ngClass]="{ 'is-invalid': submitted && f.address.errors }">
+        <div *ngIf="submitted && f.address.errors" class="invalid-feedback">
+          <div *ngIf="f.address.errors.required">L'adresse d'un collaborateur est obligatoire</div>
+        </div>
+      </div>
+
+      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+        <label class="form-label">Téléphone</label>
+        <input class="form-control" formControlName="telephone" [ngClass]="{ 'is-invalid': submitted && f.telephone.errors }">
+        <div *ngIf="submitted && f.telephone.errors" class="invalid-feedback">
+          <div *ngIf="f.telephone.errors.required">Le numéro de téléphone d'un collaborateur est obligatoire</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="row mb-2">
+
+      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+        <label class="form-label">Mail personnel</label>
+        <input type="email" class="form-control" formControlName="personalMail" [ngClass]="{ 'is-invalid': submitted && f.personalMail.errors }" placeholder="prenom.nom@example.com">
+        <div *ngIf="submitted && f.personalMail.errors" class="invalid-feedback">
+          <div *ngIf="f.personalMail.errors.required">Le mail personnel d'un collaborateur est obligatoire</div>
+        </div>
+      </div>
+
+      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+        <label class="form-label">Mail Apside</label>
+        <input type="email" class="form-control" formControlName="apsideMail" [ngClass]="{ 'is-invalid': submitted && f.apsideMail.errors }" placeholder="prenom.nom@apside-groupe.com">
+        <div *ngIf="submitted && f.apsideMail.errors" class="invalid-feedback">
+          <div *ngIf="f.apsideMail.errors.required">Le mail Apside d'un collaborateur est obligatoire</div>
+        </div>
+      </div>
+
+      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+        <label class="form-label">Date de départ</label>
+        <input type="date" class="form-control" formControlName="resignationDate" (change)="onResignationDateChange($event)" [ngClass]="{ 'is-invalid': submitted && f.resignationDate.errors }">
+        <div *ngIf="submitted && f.resignationDate.errors" class="invalid-feedback">
+          <div *ngIf="f.resignationDate.errors.required">La date de départ d'un collaborateur est obligatoire</div>
+        </div>
+      </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" formControlName="referrerId" [ngClass]="{ 'is-invalid': submitted && f.referrerId.errors }">
+          <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 *ngIf="submitted && f.referrerId.errors" class="invalid-feedback">
+          <div *ngIf="f.referrerId.errors.required">Vous devez préciser le référent du collaborateur</div>
+        </div>
+      </div>
+
+      <div class="form-group col-12 col-md-6">
+        <label class="form-label">Business Unit</label>
+        <select class="form-select" formControlName="businessUnitId" [ngClass]="{ 'is-invalid': submitted && f.businessUnitId.errors }">
+          <option value="" disabled selected>Choisissez une Business Unit pour le collaborateur</option>
+          <option *ngFor="let businessUnit of businessUnits" [ngValue]="businessUnit.id">{{businessUnit.name}} </option>
+        </select>
+        <div *ngIf="submitted && f.businessUnitId.errors" class="invalid-feedback">
+          <div *ngIf="f.businessUnitId.errors.required">Vous devez préciser la Business Unit du collaborateur</div>
+        </div>
+      </div>
+
+    </div>
+
+    <div>
+      <button type="submit">Ajouter le collaborateur</button>
+      <button type="reset" (click)="onReset()">Effacer</button>
+    </div>
+  </form>
 
-  <button class="add-button" (click)="add(collaborateur)">
-    Ajouter un Collaborateur
-  </button>
 
   <h2 class = mb-4>Collaborateurs</h2>
 
diff --git a/src/app/components/collaborateur/collaborateur.component.ts b/src/app/components/collaborateur/collaborateur.component.ts
index 1210271..6cb4eb6 100644
--- a/src/app/components/collaborateur/collaborateur.component.ts
+++ b/src/app/components/collaborateur/collaborateur.component.ts
@@ -2,6 +2,9 @@ import { Component, OnInit } from '@angular/core';
 import {HttpClient} from "@angular/common/http";
 import {CollaborateurService} from "../../services/collaborateur.service";
 import {Collaborateur} from "../../interfaces/collaborateur";
+import {FormBuilder, FormGroup, Validators} from "@angular/forms";
+import {Businessunit} from "../../interfaces/businessunit";
+import {BusinessunitService} from "../../services/businessunit.service";
 
 @Component({
   selector: 'app-collaborateur',
@@ -10,15 +13,47 @@ import {Collaborateur} from "../../interfaces/collaborateur";
 })
 export class CollaborateurComponent implements OnInit {
   collaborateurs : Collaborateur[] = [];
-  collaborateur = {} as Collaborateur ;
+  collaborateur = {} as Collaborateur;
+  businessUnits : Businessunit[] = [];
+  businessUnit = {} as Businessunit ;
+
+  rDate : String = "";
+  bDate : String = "";
+
+  registerForm!: FormGroup;
+  submitted = false;
 
   constructor(
     private http : HttpClient,
+    private businessunitService: BusinessunitService,
     private collaborateurService: CollaborateurService,
+    private formBuilder: FormBuilder
   ) { }
 
   ngOnInit(): void {
     this.getCollaborateurs();
+    this.getBusinessunits();
+    this.registerForm = this.formBuilder.group({
+      name: ['', Validators.required],
+      firstName: ['', Validators.required],
+      birthDate: ['', Validators.required],
+      gender: ['', Validators.required],
+      status: ['', Validators.required],
+      childrenNumber: ['', Validators.required],
+      address: ['', Validators.required],
+      telephone: ['', Validators.required],
+      personalMail: ['', Validators.required],
+      apsideMail: ['', Validators.required],
+      resignationDate: ['', Validators.required],
+      referrerId: ['', Validators.required],
+      businessUnitId: ['', Validators.required],
+    });
+    if (this.collaborateur.resignationDate) {
+      this.rDate = new Date(this.collaborateur.resignationDate).toISOString().split('T')[0];
+    }
+    if (this.collaborateur.birthDate) {
+      this.bDate = new Date(this.collaborateur.birthDate).toISOString().split('T')[0];
+    }
   }
 
   getCollaborateurs():void {
@@ -26,6 +61,11 @@ export class CollaborateurComponent implements OnInit {
       .subscribe(collaborateurs => this.collaborateurs = collaborateurs);
   }
 
+  getBusinessunits():void {
+    this.businessunitService.getBusinessunits()
+      .subscribe(businessunits => this.businessUnits = businessunits);
+  }
+
   add(collaborateur: Collaborateur): void {
     this.collaborateurService.addCollaborateur(collaborateur)
       .subscribe(collaborateur => {
@@ -33,4 +73,29 @@ export class CollaborateurComponent implements OnInit {
       });
   }
 
+  onSubmit() {
+    this.submitted = true;
+
+    if (this.registerForm.invalid) {
+      return;
+    }
+    this.collaborateur = this.registerForm.value
+    this.add(this.collaborateur)
+  }
+
+  get f() { return this.registerForm.controls; }
+
+  onReset() {
+    this.submitted = false;
+    this.registerForm.reset();
+  }
+
+  onResignationDateChange($event: any):void {
+    this.collaborateur.resignationDate = new Date($event.target.value);
+  }
+
+  onBirthDateChange($event: any):void {
+    this.collaborateur.birthDate = new Date($event.target.value);
+  }
+
 }
diff --git a/src/app/interfaces/agence.ts b/src/app/interfaces/agence.ts
index a88cc17..00bf754 100644
--- a/src/app/interfaces/agence.ts
+++ b/src/app/interfaces/agence.ts
@@ -1,4 +1,5 @@
 export interface Agence {
   name: string;
   id: number;
+  businessUnitId : number;
 }
diff --git a/src/app/interfaces/businessunit.ts b/src/app/interfaces/businessunit.ts
index 0b1b86a..9ccbebb 100644
--- a/src/app/interfaces/businessunit.ts
+++ b/src/app/interfaces/businessunit.ts
@@ -1,5 +1,4 @@
 export interface Businessunit {
   name: string;
   id: number;
-  agenceId : number;
 }