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 8a3a5f0..5ac0241 100644
--- a/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.html
+++ b/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.html
@@ -1,40 +1,45 @@
-<div *ngIf="collaborateur">
-  <label class="col-2" for="collaborateur-name">Collaborateur name   </label>
-  <input id="collaborateur-name" [(ngModel)]="collaborateur.name" placeholder="name">
+<div *ngIf="collaborateur" style="overflow-x:auto;">
 
-  <label class="col-2" for="collaborateur-firstName">Collaborateur firstname   </label>
-  <input id="collaborateur-firstName" [(ngModel)]="collaborateur.firstName" placeholder="firstname">
+  <table>
+    <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>
+    <th>Referrer ID</th>
+    <th>Business Unit ID</th>
+    </tr>
 
-  <label class="col-2" for="collaborateur-birthDate">Collaborateur birthDate   </label>
-  <input id="collaborateur-birthDate" [(ngModel)]="collaborateur.birthDate" placeholder="birthDate">
+    <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>
+      <td><input id="collaborateur-referrerId" [(ngModel)]="collaborateur.referrerId" placeholder="referrerId"></td>
+      <td><input id="collaborateur-businessUnitId" [(ngModel)]="collaborateur.businessUnitId" placeholder="businessUnitId"></td>
+    </tr>
 
-  <label class="col-2" for="collaborateur-gender">Collaborateur gender   </label>
-  <input id="collaborateur-gender" [(ngModel)]="collaborateur.gender" placeholder="gender">
+  </table>
 
-  <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.component.html b/src/app/components/collaborateur/collaborateur.component.html
index 5297512..8e81e2e 100644
--- a/src/app/components/collaborateur/collaborateur.component.html
+++ b/src/app/components/collaborateur/collaborateur.component.html
@@ -1,16 +1,22 @@
 <div xmlns="">
   <h2>Collaborateurs</h2>
 
-  <table *ngFor="let collaborateur of collaborateurs">
+  <div style="overflow-x:auto;">
+    <table>
+      <tr>
+      <th>Name</th>
+      <th>First Name</th>
+      <th>Apside Mail</th>
+      </tr>
 
-    <td> {{collaborateur.name}} </td>
-    <td></td>
-    <td> {{collaborateur.firstName}} </td>
-    <td></td>
-    <td> {{collaborateur.apsideMail}} </td>
-    <td></td>
-    <td> <a routerLink="{{collaborateur.id}}"> Modifier </a></td>
-  </table>
+      <tr *ngFor="let collaborateur of collaborateurs">
+        <td class="list"> {{collaborateur.name}} </td>
+        <td class="list"> {{collaborateur.firstName}} </td>
+        <td class="list"> {{collaborateur.apsideMail}} </td>
+        <td class="list"> <a routerLink="{{collaborateur.id}}"> Modifier </a></td>
+      </tr>
+    </table>
+  </div>
 
   <h3>Ajouter un collaborateur : </h3>
 
diff --git a/src/styles.scss b/src/styles.scss
index fcd9de5..8942e39 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -64,10 +64,25 @@ button:disabled {
 }
 
 .entities a:hover {
-  background-color: #42545C;
+  background-color: $primary;
 }
 
 .entities a:active {
   background-color: #525252;
   color: #fafafa;
 }
+
+td {
+  align-content: center;
+  text-align: center;
+
+}
+
+.list {
+  padding: 0 30px;
+}
+
+th{
+
+  text-align: center;
+}