diff --git a/src/Entity/User.php b/src/Entity/User.php
index 3a5ee84..3e67c34 100644
--- a/src/Entity/User.php
+++ b/src/Entity/User.php
@@ -90,6 +90,14 @@ class User implements UserInterface, PasswordAuthenticatedUserInterface
         return array_unique($roles);
     }
 
+    public function getNomRole() : string {
+        return match ($this->getRoles()[0]) {
+            'ROLE_ADMINISTRATEUR' => 'Administrateur',
+            'ROLE_INSTRUCTEUR' => 'Instructeur',
+            default => 'Apprenti'
+        };
+    }
+
     public function setRoles(array $roles): self
     {
         $this->roles = $roles;
diff --git a/templates/user/index.html.twig b/templates/user/index.html.twig
index e2e3f7f..505c627 100644
--- a/templates/user/index.html.twig
+++ b/templates/user/index.html.twig
@@ -3,39 +3,42 @@
 {% block title %}User index{% endblock %}
 
 {% block body %}
-    <h1>User index</h1>
+    <div class="card mb-4">
+        <div class="card-header">
+            <h1 class="card-title">Liste des Utilisateurs</h1>
+        </div>
 
-    <table class="table">
-        <thead>
+        <div class="card-body table-responsive">
+        <table class="table align-middle">
+            <thead>
             <tr>
-                <th>Id</th>
-                <th>Email</th>
-                <th>Roles</th>
                 <th>Nom</th>
                 <th>Prenom</th>
-                <th>actions</th>
+                <th>Email</th>
+                <th>Roles</th>
+                <th style="text-align: center;">Actions</th>
             </tr>
-        </thead>
-        <tbody>
-        {% for user in users %}
-            <tr>
-                <td>{{ user.id }}</td>
-                <td>{{ user.email }}</td>
-                <td>{{ user.roles ? user.roles[0] : '' }}</td>
-                <td>{{ user.nom }}</td>
-                <td>{{ user.prenom }}</td>
-                <td>
-                    <a href="{{ path('app_user_show', {'id': user.id}) }}">show</a>
-                    <a href="{{ path('app_user_edit', {'id': user.id}) }}">edit</a>
-                </td>
-            </tr>
-        {% else %}
-            <tr>
-                <td colspan="7">no records found</td>
-            </tr>
-        {% endfor %}
-        </tbody>
-    </table>
+            </thead>
+            <tbody>
+            {% for user in users %}
+                <tr>
+                    <td>{{ user.nom }}</td>
+                    <td>{{ user.prenom }}</td>
+                    <td>{{ user.email }}</td>
+                    <td>{{ user.nomRole }}</td>
+                    <td style="text-align: center;"><a class="btn btn-primary" href="{{ path('app_user_show', {'id': user.id}) }}">Voir</a></td>
+                </tr>
+            {% else %}
+                <tr>
+                    <td colspan="7">no records found</td>
+                </tr>
+            {% endfor %}
+            </tbody>
+        </table>
+        </div>
 
-    <a href="{{ path('app_user_new') }}">Create new</a>
+        <div class="card-footer">
+            <a class="btn btn-primary" href="{{ path('app_user_new') }}">Créer un Utilisateur</a>
+        </div>
+    </div>
 {% endblock %}