diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 24c7ee8..6c1d9a3 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -11,6 +11,7 @@ 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';
 
 @NgModule({
   declarations: [
@@ -19,7 +20,8 @@ import { AgenceEditComponent } from './components/agence/agence-edit/agence-edit
     CollaborateurEditComponent,
     HomeComponent,
     AgenceComponent,
-    AgenceEditComponent
+    AgenceEditComponent,
+    CollaborateurDetailComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.html b/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.html
new file mode 100644
index 0000000..8a3a5f0
--- /dev/null
+++ b/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.html
@@ -0,0 +1,40 @@
+<div *ngIf="collaborateur">
+  <label class="col-2" for="collaborateur-name">Collaborateur name   </label>
+  <input id="collaborateur-name" [(ngModel)]="collaborateur.name" placeholder="name">
+
+  <label class="col-2" for="collaborateur-firstName">Collaborateur firstname   </label>
+  <input id="collaborateur-firstName" [(ngModel)]="collaborateur.firstName" placeholder="firstname">
+
+  <label class="col-2" for="collaborateur-birthDate">Collaborateur birthDate   </label>
+  <input id="collaborateur-birthDate" [(ngModel)]="collaborateur.birthDate" placeholder="birthDate">
+
+  <label class="col-2" for="collaborateur-gender">Collaborateur gender   </label>
+  <input id="collaborateur-gender" [(ngModel)]="collaborateur.gender" placeholder="gender">
+
+  <label class="col-2" for="collaborateur-status">Collaborateur status   </label>
+  <input id="collaborateur-status" [(ngModel)]="collaborateur.status" placeholder="status">
+
+  <label class="col-2" for="collaborateur-childrenNumber">Collaborateur childrenNumber   </label>
+  <input id="collaborateur-childrenNumber" [(ngModel)]="collaborateur.childrenNumber" placeholder="childrenNumber">
+
+  <label class="col-2" for="collaborateur-address">Collaborateur address   </label>
+  <input id="collaborateur-address" [(ngModel)]="collaborateur.address" placeholder="address">
+
+  <label class="col-2" for="collaborateur-telephone">Collaborateur telephone   </label>
+  <input id="collaborateur-telephone" [(ngModel)]="collaborateur.telephone" placeholder="telephone">
+
+  <label class="col-2" for="collaborateur-personalMail">Collaborateur personalMail   </label>
+  <input id="collaborateur-personalMail" [(ngModel)]="collaborateur.personalMail" placeholder="personalMail">
+
+  <label class="col-2" for="collaborateur-apsideMail">Collaborateur apsideMail   </label>
+  <input id="collaborateur-apsideMail" [(ngModel)]="collaborateur.apsideMail" placeholder="apsideMail">
+
+  <label class="col-2" for="collaborateur-resignationDate">Collaborateur resignationDate   </label>
+  <input id="collaborateur-resignationDate" [(ngModel)]="collaborateur.resignationDate" placeholder="resignationDate">
+
+  <label class="col-2" for="collaborateur-referrerId">Collaborateur referrerId   </label>
+  <input id="collaborateur-referrerId" [(ngModel)]="collaborateur.referrerId" placeholder="referrerId">
+
+  <label class="col-2" for="collaborateur-businessUnitId">Collaborateur businessUnitId   </label>
+  <input id="collaborateur-businessUnitId" [(ngModel)]="collaborateur.businessUnitId" placeholder="businessUnitId">
+</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
new file mode 100644
index 0000000..edcdf13
--- /dev/null
+++ b/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.scss
@@ -0,0 +1,9 @@
+label {
+  color: #435960;
+  font-weight: bold;
+}
+input {
+  font-size: 1em;
+  padding: .3rem;
+  margin: .5rem;
+}
diff --git a/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.ts b/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.ts
new file mode 100644
index 0000000..ffc4c2d
--- /dev/null
+++ b/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.ts
@@ -0,0 +1,19 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {Collaborateur} from "../../../interfaces/collaborateur";
+
+@Component({
+  selector: 'app-collaborateur-detail',
+  templateUrl: './collaborateur-detail.component.html',
+  styleUrls: ['./collaborateur-detail.component.scss']
+})
+export class CollaborateurDetailComponent implements OnInit {
+
+  @Input()
+  collaborateur: Collaborateur | undefined;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
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 5c2b183..626e1f6 100644
--- a/src/app/components/collaborateur/collaborateur-edit/collaborateur-edit.component.html
+++ b/src/app/components/collaborateur/collaborateur-edit/collaborateur-edit.component.html
@@ -3,46 +3,8 @@
 
   <h2>{{collaborateur.name | uppercase}} {{collaborateur.firstName | uppercase}} </h2>
   <div><span>id : </span>{{collaborateur.id}}</div>
-  <div>
-    <label class="col-2" for="collaborateur-name">Collaborateur name   </label>
-    <input id="collaborateur-name" [(ngModel)]="collaborateur.name" placeholder="name">
 
-    <label class="col-2" for="collaborateur-firstName">Collaborateur firstname   </label>
-    <input id="collaborateur-firstName" [(ngModel)]="collaborateur.firstName" placeholder="firstname">
-
-    <label class="col-2" for="collaborateur-birthDate">Collaborateur birthDate   </label>
-    <input id="collaborateur-birthDate" [(ngModel)]="collaborateur.birthDate" placeholder="birthDate">
-
-    <label class="col-2" for="collaborateur-gender">Collaborateur gender   </label>
-    <input id="collaborateur-gender" [(ngModel)]="collaborateur.gender" placeholder="gender">
-
-    <label class="col-2" for="collaborateur-status">Collaborateur status   </label>
-    <input id="collaborateur-status" [(ngModel)]="collaborateur.status" placeholder="status">
-
-    <label class="col-2" for="collaborateur-childrenNumber">Collaborateur childrenNumber   </label>
-    <input id="collaborateur-childrenNumber" [(ngModel)]="collaborateur.childrenNumber" placeholder="childrenNumber">
-
-    <label class="col-2" for="collaborateur-address">Collaborateur address   </label>
-    <input id="collaborateur-address" [(ngModel)]="collaborateur.address" placeholder="address">
-
-    <label class="col-2" for="collaborateur-telephone">Collaborateur telephone   </label>
-    <input id="collaborateur-telephone" [(ngModel)]="collaborateur.telephone" placeholder="telephone">
-
-    <label class="col-2" for="collaborateur-personalMail">Collaborateur personalMail   </label>
-    <input id="collaborateur-personalMail" [(ngModel)]="collaborateur.personalMail" placeholder="personalMail">
-
-    <label class="col-2" for="collaborateur-apsideMail">Collaborateur apsideMail   </label>
-    <input id="collaborateur-apsideMail" [(ngModel)]="collaborateur.apsideMail" placeholder="apsideMail">
-
-    <label class="col-2" for="collaborateur-resignationDate">Collaborateur resignationDate   </label>
-    <input id="collaborateur-resignationDate" [(ngModel)]="collaborateur.resignationDate" placeholder="resignationDate">
-
-    <label class="col-2" for="collaborateur-referrerId">Collaborateur referrerId   </label>
-    <input id="collaborateur-referrerId" [(ngModel)]="collaborateur.referrerId" placeholder="referrerId">
-
-    <label class="col-2" for="collaborateur-businessUnitId">Collaborateur businessUnitId   </label>
-    <input id="collaborateur-businessUnitId" [(ngModel)]="collaborateur.businessUnitId" placeholder="businessUnitId">
-  </div>
+  <app-collaborateur-detail [collaborateur]="collaborateur"></app-collaborateur-detail>
 
   <button (click)="goBack()">Retour</button>
   <button (click)="save()">Sauvegarder les changements</button>
diff --git a/src/app/components/collaborateur/collaborateur.component.html b/src/app/components/collaborateur/collaborateur.component.html
index 0191bff..5297512 100644
--- a/src/app/components/collaborateur/collaborateur.component.html
+++ b/src/app/components/collaborateur/collaborateur.component.html
@@ -14,46 +14,7 @@
 
   <h3>Ajouter un collaborateur : </h3>
 
-  <div>
-  <label class="col-2" for="collaborateur-name">Collaborateur name   </label>
-  <input id="collaborateur-name" [(ngModel)]="collaborateur.name" placeholder="name">
-
-  <label class="col-2" for="collaborateur-firstName">Collaborateur firstname   </label>
-  <input id="collaborateur-firstName" [(ngModel)]="collaborateur.firstName" placeholder="firstname">
-
-  <label class="col-2" for="collaborateur-birthDate">Collaborateur birthDate   </label>
-  <input id="collaborateur-birthDate" [(ngModel)]="collaborateur.birthDate" placeholder="birthDate">
-
-  <label class="col-2" for="collaborateur-gender">Collaborateur name   </label>
-  <input id="collaborateur-gender" [(ngModel)]="collaborateur.gender" placeholder="gender">
-
-  <label class="col-2" for="collaborateur-status">Collaborateur status   </label>
-  <input id="collaborateur-status" [(ngModel)]="collaborateur.status" placeholder="status">
-
-  <label class="col-2" for="collaborateur-childrenNumber">Collaborateur childrenNumber   </label>
-  <input id="collaborateur-childrenNumber" [(ngModel)]="collaborateur.childrenNumber" placeholder="childrenNumber">
-
-  <label class="col-2" for="collaborateur-address">Collaborateur address   </label>
-  <input id="collaborateur-address" [(ngModel)]="collaborateur.address" placeholder="address">
-
-  <label class="col-2" for="collaborateur-telephone">Collaborateur telephone   </label>
-  <input id="collaborateur-telephone" [(ngModel)]="collaborateur.telephone" placeholder="telephone">
-
-  <label class="col-2" for="collaborateur-personalMail">Collaborateur personalMail   </label>
-  <input id="collaborateur-personalMail" [(ngModel)]="collaborateur.personalMail" placeholder="personalMail">
-
-  <label class="col-2" for="collaborateur-apsideMail">Collaborateur apsideMail   </label>
-  <input id="collaborateur-apsideMail" [(ngModel)]="collaborateur.apsideMail" placeholder="apsideMail">
-
-  <label class="col-2" for="collaborateur-resignationDate">Collaborateur resignationDate   </label>
-  <input id="collaborateur-resignationDate" [(ngModel)]="collaborateur.resignationDate" placeholder="resignationDate">
-
-  <label class="col-2" for="collaborateur-referrerId">Collaborateur referrerId   </label>
-  <input id="collaborateur-referrerId" [(ngModel)]="collaborateur.referrerId" placeholder="referrerId">
-
-  <label class="col-2" for="collaborateur-businessUnitId">Collaborateur businessUnitId   </label>
-  <input id="collaborateur-businessUnitId" [(ngModel)]="collaborateur.businessUnitId" placeholder="businessUnitId">
-  </div>
+  <app-collaborateur-detail [collaborateur]="collaborateur"></app-collaborateur-detail>
 
   <button class="add-button" (click)="add(collaborateur)">
     Ajouter un Collaborateur