diff --git a/README.md b/README.md
index 7437e1e..3b3e1ee 100644
--- a/README.md
+++ b/README.md
@@ -45,4 +45,9 @@ symfony console doctrine:fixtures:load
 ### Question 4
 ```bash
 symfony console make:crud Atelier
+```
+
+### Question 5 
+```bash
+npm run dev
 ```
\ No newline at end of file
diff --git a/assets/styles/app.css b/assets/styles/app.css
index cb33b13..e69de29 100644
--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@@ -1,3 +0,0 @@
-body {
-    background-color: lightgray;
-}
diff --git a/src/Controller/PagesController.php b/src/Controller/PagesController.php
index bbed3df..277b38c 100644
--- a/src/Controller/PagesController.php
+++ b/src/Controller/PagesController.php
@@ -8,7 +8,7 @@ use Symfony\Component\Routing\Annotation\Route;
 
 class PagesController extends AbstractController
 {
-    #[Route('/pages', name: 'app_pages')]
+    #[Route('/', name: 'app_index')]
     public function index(): Response
     {
         return $this->render('pages/index.html.twig', [
diff --git a/templates/atelier/_delete_form.html.twig b/templates/atelier/_delete_form.html.twig
index 4eb7ce9..0402463 100644
--- a/templates/atelier/_delete_form.html.twig
+++ b/templates/atelier/_delete_form.html.twig
@@ -1,4 +1,4 @@
 <form method="post" action="{{ path('app_atelier_delete', {'id': atelier.id}) }}" onsubmit="return confirm('Are you sure you want to delete this item?');">
     <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ atelier.id) }}">
-    <button class="btn">Delete</button>
+    <button class="btn btn-outline-danger m-2" >Supprimer</button>
 </form>
diff --git a/templates/atelier/_form.html.twig b/templates/atelier/_form.html.twig
index bf20b98..a92724f 100644
--- a/templates/atelier/_form.html.twig
+++ b/templates/atelier/_form.html.twig
@@ -1,4 +1,8 @@
 {{ form_start(form) }}
     {{ form_widget(form) }}
-    <button class="btn">{{ button_label|default('Save') }}</button>
+<div class="d-flex flex-row">
+    <button class="btn btn-outline-primary m-2">{{ button_label|default('Save') }}</button>
+
+    <a class="btn btn-outline-primary m-2" href="{{ path('app_atelier_index') }}">Retour à la liste</a>
+</div>
 {{ form_end(form) }}
diff --git a/templates/atelier/edit.html.twig b/templates/atelier/edit.html.twig
index c844be6..1ce67c6 100644
--- a/templates/atelier/edit.html.twig
+++ b/templates/atelier/edit.html.twig
@@ -1,13 +1,11 @@
 {% extends 'base.html.twig' %}
 
-{% block title %}Edit Atelier{% endblock %}
+{% block title %}Modifier l'atelier{% endblock %}
 
 {% block body %}
-    <h1>Edit Atelier</h1>
+    <h1>Modifier l'atelier</h1>
 
-    {{ include('atelier/_form.html.twig', {'button_label': 'Update'}) }}
-
-    <a href="{{ path('app_atelier_index') }}">back to list</a>
+    {{ include('atelier/_form.html.twig', {'button_label': 'Mettre à jour'}) }}
 
     {{ include('atelier/_delete_form.html.twig') }}
 {% endblock %}
diff --git a/templates/atelier/index.html.twig b/templates/atelier/index.html.twig
index f243327..f4867a2 100644
--- a/templates/atelier/index.html.twig
+++ b/templates/atelier/index.html.twig
@@ -7,12 +7,12 @@
 
     <table class="table">
         <thead>
-            <tr>
-                <th>Id</th>
-                <th>Nom</th>
-                <th>Description</th>
-                <th>actions</th>
-            </tr>
+        <tr>
+            <th scope="row">Id</th>
+            <th scope="col">Nom</th>
+            <th class="" scope="col">Description</th>
+            <th scope="col">Actions</th>
+        </tr>
         </thead>
         <tbody>
         {% for atelier in ateliers %}
@@ -21,8 +21,12 @@
                 <td>{{ atelier.nom }}</td>
                 <td>{{ atelier.description }}</td>
                 <td>
-                    <a href="{{ path('app_atelier_show', {'id': atelier.id}) }}">show</a>
-                    <a href="{{ path('app_atelier_edit', {'id': atelier.id}) }}">edit</a>
+                    <div class="d-flex flex-row">
+                        <a class="btn btn-outline-primary m-1"
+                           href="{{ path('app_atelier_show', {'id': atelier.id}) }}">Afficher</a>
+                        <a class="btn btn-outline-primary m-1"
+                           href="{{ path('app_atelier_edit', {'id': atelier.id}) }}">Modifier</a>
+                    </div>
                 </td>
             </tr>
         {% else %}
@@ -33,5 +37,7 @@
         </tbody>
     </table>
 
-    <a href="{{ path('app_atelier_new') }}">Create new</a>
+    <div class="d-flex justify-content-center">
+        <a class="btn btn-primary mb-3" href="{{ path('app_atelier_new') }}">Créer atelier</a>
+    </div>
 {% endblock %}
diff --git a/templates/atelier/new.html.twig b/templates/atelier/new.html.twig
index 72b08fe..a442ac7 100644
--- a/templates/atelier/new.html.twig
+++ b/templates/atelier/new.html.twig
@@ -1,11 +1,9 @@
 {% extends 'base.html.twig' %}
 
-{% block title %}New Atelier{% endblock %}
+{% block title %}Nouvel atelier{% endblock %}
 
 {% block body %}
-    <h1>Create new Atelier</h1>
+    <h1>Créer un nouvel atelier</h1>
 
-    {{ include('atelier/_form.html.twig') }}
-
-    <a href="{{ path('app_atelier_index') }}">back to list</a>
+    {{ include('atelier/_form.html.twig', {'button_label': 'Sauvegarder'}) }}
 {% endblock %}
diff --git a/templates/atelier/show.html.twig b/templates/atelier/show.html.twig
index 5b0e05f..84c1878 100644
--- a/templates/atelier/show.html.twig
+++ b/templates/atelier/show.html.twig
@@ -7,24 +7,25 @@
 
     <table class="table">
         <tbody>
-            <tr>
-                <th>Id</th>
-                <td>{{ atelier.id }}</td>
-            </tr>
-            <tr>
-                <th>Nom</th>
-                <td>{{ atelier.nom }}</td>
-            </tr>
-            <tr>
-                <th>Description</th>
-                <td>{{ atelier.description }}</td>
-            </tr>
+        <tr>
+            <th>Id</th>
+            <td>{{ atelier.id }}</td>
+        </tr>
+        <tr>
+            <th>Nom</th>
+            <td>{{ atelier.nom }}</td>
+        </tr>
+        <tr>
+            <th>Description</th>
+            <td>{{ atelier.description }}</td>
+        </tr>
         </tbody>
     </table>
 
-    <a href="{{ path('app_atelier_index') }}">back to list</a>
-
-    <a href="{{ path('app_atelier_edit', {'id': atelier.id}) }}">edit</a>
-
-    {{ include('atelier/_delete_form.html.twig') }}
+    <div class="d-flex flex-row">
+        <a class="btn btn-outline-primary m-2" href="{{ path('app_atelier_edit', {'id': atelier.id}) }}">Modifier</a>
+        <a class="btn btn-outline-primary m-2" href="{{ path('app_atelier_index') }}">Retour à la liste</a>
+        {{ include('atelier/_delete_form.html.twig') }}
+    </div>
 {% endblock %}
+
diff --git a/templates/base.html.twig b/templates/base.html.twig
index 1576ae0..7c62423 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -1,20 +1,43 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <meta charset="UTF-8">
-        <title>{% block title %}Welcome!{% endblock %}</title>
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
-        {# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
-        {% block stylesheets %}
-            {{ encore_entry_link_tags('app') }}
-        {% endblock %}
+<head>
+    <meta charset="UTF-8">
+    <title>{% block title %}Welcome!{% endblock %}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon"
+          href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
+    {# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
+    {% block stylesheets %}
+        {{ encore_entry_link_tags('app') }}
+    {% endblock %}
 
-        {% block javascripts %}
-            {{ encore_entry_script_tags('app') }}
-        {% endblock %}
-    </head>
-    <body>
-        {% block body %}{% endblock %}
-    </body>
+    {% block javascripts %}
+        {{ encore_entry_script_tags('app') }}
+    {% endblock %}
+</head>
+<body>
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="#">CC34</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                <li class="nav-item">
+                    <a class="nav-link active" aria-current="page" href="{{ path('app_index') }}">Home</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="{{ path('app_atelier_index') }}">Atelier</a>
+                </li>
+
+            </ul>
+
+        </div>
+    </div>
+</nav>
+<div class="container">{% block body %}{% endblock %}</div>
+
+
+</body>
 </html>