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 bf84f77..e219d51 100644
--- a/src/app/components/agence/agence.component.html
+++ b/src/app/components/agence/agence.component.html
@@ -21,14 +21,7 @@
 
   <h3>Ajouter une agence : </h3>
 
-  <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>
+  <app-agence-detail [agence]="agence"></app-agence-detail>
 
   <button class="add-button" (click)="add(agence)">
     Ajouter une Agence
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 24acf7a..ee4c686 100644
--- a/src/app/components/businessunit/businessunit.component.html
+++ b/src/app/components/businessunit/businessunit.component.html
@@ -20,26 +20,7 @@
   </div>
   <h3>Ajouter une Business Unit : </h3>
 
-  <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>
-
-  </div>
+  <app-businessunit-detail [businessunit]="businessunit"></app-businessunit-detail>
 
   <button class="add-button" (click)="add(businessunit)">
     Ajouter une businessunit