diff --git a/src/app/components/agence/agence.component.html b/src/app/components/agence/agence.component.html
index 97ca12b..bf84f77 100644
--- a/src/app/components/agence/agence.component.html
+++ b/src/app/components/agence/agence.component.html
@@ -1,31 +1,35 @@
 <div xmlns="">
   <h2 class = mb-4>Agences</h2>
 
-  <table class = mb-5>
-    <tr>
-      <th class="spaced">Name</th>
-    </tr>
-    <tr *ngFor="let agence of agences">
-      <td class="spaced"> {{agence.name}} </td>
-      <td class="spaced"> <a routerLink="{{agence.id}}"> Modifier </a></td>
-    </tr>
-  </table>
-
-  <h3>Ajouter une agence : </h3>
-
-  <div class = mb-3>
-    <table>
+  <div style="overflow-x:auto;" class="mb-5 col-12">
+    <table class="table">
+      <thead>
       <tr>
-        <th>Name</th>
-      </tr>
-      <tr>
-        <td>
-          <input id="agence-name" [(ngModel)]="agence.name" placeholder="name">
-        </td>
+        <th scope="col">ID</th>
+        <th scope="col">Nom</th>
       </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let agence of agences">
+          <th scope="row">{{agence.id}}</th>
+          <td> {{agence.name}} </td>
+          <td> <a routerLink="{{agence.id}}"> Modifier </a></td>
+        </tr>
+      </tbody>
     </table>
   </div>
 
+  <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>
+
   <button class="add-button" (click)="add(agence)">
     Ajouter une Agence
   </button>
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 7ecf097..ff792e0 100644
--- a/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.html
+++ b/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.html
@@ -27,7 +27,7 @@
 
     <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">
+      <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">
@@ -41,8 +41,8 @@
     </div>
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
-      <label for="collaborateur-telephone" class="form-label">Telephone</label>
-      <input class="form-control" id="collaborateur-telephone" [(ngModel)]="collaborateur.telephone" placeholder="telephone">
+      <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>
 
@@ -64,7 +64,7 @@
     </div>
   </div>
 
-  <div class="row">
+  <div class="row mb-2">
 
     <div class="form-group col-12 col-md-6">
       <label class="form-label">Référent</label>