diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 7c37b20..2f72470 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -5,6 +5,8 @@ import {CollaborateurEditComponent} from "./components/collaborateur/collaborate
 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 {BusinessunitComponent} from "./components/businessunit/businessunit.component";
+import {BusinessunitEditComponent} from "./components/businessunit/businessunit-edit/businessunit-edit.component";
 
 const routes : Routes = [
   {path:'', redirectTo:'/home', pathMatch:'full'},
@@ -13,6 +15,8 @@ const routes : Routes = [
   { path: 'collaborateurs/:id', component: CollaborateurEditComponent },
   { path:'agences',component:AgenceComponent },
   { path: 'agences/:id', component: AgenceEditComponent },
+  { path:'businessunits',component:BusinessunitComponent },
+  { path: 'businessunits/:id', component: BusinessunitEditComponent },
 ];
 
 @NgModule({
diff --git a/src/app/app.component.html b/src/app/app.component.html
index bb7bb23..db91a22 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -73,6 +73,9 @@
   <nav>
     <a class="toolbar-button" routerLink="/agences">Agences</a>
   </nav>
+  <nav>
+    <a class="toolbar-button" routerLink="/businessunits">Business Units</a>
+  </nav>
 </div>
 
 <div class="content" role="main">
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 6c1d9a3..6ecf328 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -12,6 +12,9 @@ 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';
+import { BusinessunitDetailComponent } from './components/businessunit/businessunit-detail/businessunit-detail.component';
 
 @NgModule({
   declarations: [
@@ -21,7 +24,10 @@ import { CollaborateurDetailComponent } from './components/collaborateur/collabo
     HomeComponent,
     AgenceComponent,
     AgenceEditComponent,
-    CollaborateurDetailComponent
+    CollaborateurDetailComponent,
+    BusinessunitComponent,
+    BusinessunitEditComponent,
+    BusinessunitDetailComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/components/businessunit/businessunit-detail/businessunit-detail.component.html b/src/app/components/businessunit/businessunit-detail/businessunit-detail.component.html
new file mode 100644
index 0000000..b1c3297
--- /dev/null
+++ b/src/app/components/businessunit/businessunit-detail/businessunit-detail.component.html
@@ -0,0 +1,17 @@
+<div class = mb-3>
+  <table>
+    <tr>
+      <th>Name</th>
+    </tr>
+    <tr>
+      <td>
+        <input id="businessunit-name" [(ngModel)]="businessunit.name" placeholder="name">
+      </td>
+    </tr>
+  </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>
diff --git a/src/app/components/businessunit/businessunit-detail/businessunit-detail.component.scss b/src/app/components/businessunit/businessunit-detail/businessunit-detail.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/businessunit/businessunit-detail/businessunit-detail.component.ts b/src/app/components/businessunit/businessunit-detail/businessunit-detail.component.ts
new file mode 100644
index 0000000..3fe3755
--- /dev/null
+++ b/src/app/components/businessunit/businessunit-detail/businessunit-detail.component.ts
@@ -0,0 +1,42 @@
+import {Component, Input, 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";
+
+@Component({
+  selector: 'app-businessunit-detail',
+  templateUrl: './businessunit-detail.component.html',
+  styleUrls: ['./businessunit-detail.component.scss']
+})
+export class BusinessunitDetailComponent implements OnInit {
+
+  businessunits : Businessunit[] = [];
+  @Input()
+  businessunit = {} as Businessunit ;
+  agences : Agence[] = [];
+  agence = {} as Agence ;
+
+  constructor(
+    private http : HttpClient,
+    private businessunitService: BusinessunitService,
+    private agenceService: AgenceService,
+  ) { }
+
+  ngOnInit(): void {
+    this.getBusinessunits();
+    this.getAgences();
+  }
+
+  getBusinessunits():void {
+    this.businessunitService.getBusinessunits()
+      .subscribe(businessunits => this.businessunits = businessunits);
+  }
+
+  getAgences():void {
+    this.agenceService.getAgences()
+      .subscribe(agences => this.agences = agences);
+  }
+
+}
diff --git a/src/app/components/businessunit/businessunit-edit/businessunit-edit.component.html b/src/app/components/businessunit/businessunit-edit/businessunit-edit.component.html
new file mode 100644
index 0000000..b54af61
--- /dev/null
+++ b/src/app/components/businessunit/businessunit-edit/businessunit-edit.component.html
@@ -0,0 +1,12 @@
+
+<div *ngIf="businessunit">
+
+  <h2>{{businessunit.name | uppercase}} </h2>
+  <div><span>id : </span>{{businessunit.id}}</div>
+
+  <app-businessunit-detail [businessunit]="businessunit"></app-businessunit-detail>
+
+  <button (click)="goBack()">Retour</button>
+  <button (click)="save()">Sauvegarder les changements</button>
+  <button (click)="delete()">Supprimer le businessunit</button>
+</div>
diff --git a/src/app/components/businessunit/businessunit-edit/businessunit-edit.component.scss b/src/app/components/businessunit/businessunit-edit/businessunit-edit.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/businessunit/businessunit-edit/businessunit-edit.component.ts b/src/app/components/businessunit/businessunit-edit/businessunit-edit.component.ts
new file mode 100644
index 0000000..00e2320
--- /dev/null
+++ b/src/app/components/businessunit/businessunit-edit/businessunit-edit.component.ts
@@ -0,0 +1,50 @@
+import { Component, OnInit } from '@angular/core';
+import {Businessunit} from "../../../interfaces/businessunit";
+import {ActivatedRoute} from "@angular/router";
+import {BusinessunitService} from "../../../services/businessunit.service";
+import {Location} from "@angular/common";
+
+@Component({
+  selector: 'app-businessunit-edit',
+  templateUrl: './businessunit-edit.component.html',
+  styleUrls: ['./businessunit-edit.component.scss']
+})
+export class BusinessunitEditComponent implements OnInit {
+
+  businessunit : Businessunit | undefined;
+
+  constructor(
+    private route: ActivatedRoute,
+    private businessunitService: BusinessunitService,
+    private location: Location
+  ) { }
+
+  ngOnInit(): void {
+    this.getBusinessunit()
+  }
+
+  getBusinessunit(): void {
+    const id = Number(this.route.snapshot.paramMap.get('id'))
+    this.businessunitService.getBusinessunit(id)
+      .subscribe(businessunit => this.businessunit = businessunit);
+  }
+
+  goBack(): void {
+    this.location.back();
+  }
+
+  save():void{
+    if (this.businessunit){
+      this.businessunitService.updateBusinessunit(this.businessunit)
+        .subscribe(()=>this.goBack());
+    }
+  }
+
+  delete():void {
+    if (this.businessunit){
+      this.businessunitService.deleteBusinessunit(this.businessunit)
+        .subscribe(()=>this.goBack());
+    }
+  }
+
+}
diff --git a/src/app/components/businessunit/businessunit.component.html b/src/app/components/businessunit/businessunit.component.html
new file mode 100644
index 0000000..45bf93d
--- /dev/null
+++ b/src/app/components/businessunit/businessunit.component.html
@@ -0,0 +1,37 @@
+<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>
+    </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>
+
+  <button class="add-button" (click)="add(businessunit)">
+    Ajouter une businessunit
+  </button>
+</div>
diff --git a/src/app/components/businessunit/businessunit.component.scss b/src/app/components/businessunit/businessunit.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/businessunit/businessunit.component.ts b/src/app/components/businessunit/businessunit.component.ts
new file mode 100644
index 0000000..f11d8de
--- /dev/null
+++ b/src/app/components/businessunit/businessunit.component.ts
@@ -0,0 +1,48 @@
+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";
+
+@Component({
+  selector: 'app-businessunit',
+  templateUrl: './businessunit.component.html',
+  styleUrls: ['./businessunit.component.scss']
+})
+export class BusinessunitComponent implements OnInit {
+
+  businessunits : Businessunit[] = [];
+  businessunit = {} as Businessunit ;
+  agences : Agence[] = [];
+  agence = {} as Agence ;
+
+  constructor(
+    private http : HttpClient,
+    private businessunitService: BusinessunitService,
+    private agenceService: AgenceService,
+  ) { }
+
+  ngOnInit(): void {
+    this.getBusinessunits();
+    this.getAgences();
+  }
+
+  getBusinessunits():void {
+    this.businessunitService.getBusinessunits()
+      .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 => {
+        this.businessunits.push(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 ad1c7ad..4085820 100644
--- a/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.html
+++ b/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.html
@@ -13,7 +13,6 @@
     <th>Personal Mail</th>
     <th>Apside Mail</th>
     <th>Resignation Date</th>
-    <th>Business Unit ID</th>
     </tr>
 
     <tr>
@@ -28,7 +27,6 @@
       <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-businessUnitId" [(ngModel)]="collaborateur.businessUnitId" placeholder="businessUnitId"></td>
     </tr>
 
   </table>
@@ -37,6 +35,11 @@
     <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
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 5cea570..8376764 100644
--- a/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.ts
+++ b/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.ts
@@ -2,6 +2,8 @@ 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',
@@ -10,7 +12,7 @@ import {CollaborateurService} from "../../../services/collaborateur.service";
 })
 export class CollaborateurDetailComponent implements OnInit {
 
-
+  businessunits : Businessunit[] = [];
   collaborateurs : Collaborateur[] = [];
 
   @Input()
@@ -19,10 +21,12 @@ export class CollaborateurDetailComponent implements OnInit {
   constructor(
     private http : HttpClient,
     private collaborateurService: CollaborateurService,
+    private businessunitService: BusinessunitService
   ) { }
 
   ngOnInit(): void {
     this.getCollaborateurs();
+    this.getBusinessunits();
   }
 
   getCollaborateurs():void {
@@ -30,4 +34,9 @@ export class CollaborateurDetailComponent implements OnInit {
       .subscribe(collaborateurs => this.collaborateurs = collaborateurs);
   }
 
+  getBusinessunits():void {
+    this.businessunitService.getBusinessunits()
+      .subscribe(businessunits => this.businessunits = businessunits);
+  }
+
 }
diff --git a/src/app/interfaces/businessunit.ts b/src/app/interfaces/businessunit.ts
new file mode 100644
index 0000000..0b1b86a
--- /dev/null
+++ b/src/app/interfaces/businessunit.ts
@@ -0,0 +1,5 @@
+export interface Businessunit {
+  name: string;
+  id: number;
+  agenceId : number;
+}
diff --git a/src/app/services/businessunit.service.ts b/src/app/services/businessunit.service.ts
new file mode 100644
index 0000000..bd17c09
--- /dev/null
+++ b/src/app/services/businessunit.service.ts
@@ -0,0 +1,40 @@
+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";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class BusinessunitService {
+  private businessunitsUrl = businessunitsUrl;
+
+  httpOptions = {
+    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
+  };
+
+  constructor(private http: HttpClient) { }
+
+  getBusinessunits():Observable<Businessunit[]> {
+    return this.http.get<Businessunit[]>(this.businessunitsUrl);
+  }
+
+  getBusinessunit(id : number):Observable<Businessunit>{
+    return this.http.get<Businessunit>(this.businessunitsUrl+"/"+id);
+  }
+
+  updateBusinessunit(businessunit : Businessunit):Observable<Businessunit>{
+    let body = JSON.stringify(businessunit);
+    return this.http.put<Businessunit>(this.businessunitsUrl + "/" + businessunit.id, body, this.httpOptions);
+  }
+
+  deleteBusinessunit(businessunit: Businessunit) {
+    return this.http.delete(this.businessunitsUrl + "/" + businessunit.id);
+  }
+
+  addBusinessunit(businessunit: Businessunit): Observable<Businessunit> {
+    let body = JSON.stringify(businessunit);
+    return this.http.post<Businessunit>(this.businessunitsUrl, body, this.httpOptions);
+  }
+}
diff --git a/src/ressources/routes/routes.ts b/src/ressources/routes/routes.ts
index 1eb9e54..83e2c54 100644
--- a/src/ressources/routes/routes.ts
+++ b/src/ressources/routes/routes.ts
@@ -1,2 +1,3 @@
 export const collaborateursUrl = 'https://localhost:7125/api/collaborateurs';
 export const agencesUrl = 'https://localhost:7125/api/agences';
+export const businessunitsUrl = 'https://localhost:7125/api/businessunits';