diff --git a/src/main/resources/i18n/messages_en.properties b/src/main/resources/i18n/messages_en.properties
index cbbe94f..26c6e4b 100644
--- a/src/main/resources/i18n/messages_en.properties
+++ b/src/main/resources/i18n/messages_en.properties
@@ -2,6 +2,7 @@ home.search.title = Search for an item by name...
 home.search.cat = All categories
 home.search.button = Search
 home.button.lang = Changer en Fran\u00E7ais
+home.button.lang2 = EN
 
 profil.title = My Profile
 profil.button = Edit
diff --git a/src/main/resources/i18n/messages_fr.properties b/src/main/resources/i18n/messages_fr.properties
index a2dbae7..4869fe3 100644
--- a/src/main/resources/i18n/messages_fr.properties
+++ b/src/main/resources/i18n/messages_fr.properties
@@ -2,6 +2,13 @@ home.search.title = Rechercher un article par nom...
 home.search.cat = Toutes les cat\u00e9gories
 home.search.button = Recherche
 home.button.lang = Switch to English
+home.button.lang2 = FR
+home.credit = Mes cr\u00e9dits : 
+home.nav.enchere = Encheres
+home.nav.vend = Vendre un article
+home.nav.login= S'inscrire / Se connecter
+home.profil.profil = Profil
+home.profil.logout = D\u00e9connexion
 
 profil.title = Mon profile
 profil.button = Modifier
diff --git a/src/main/resources/templates/modele-page.html b/src/main/resources/templates/modele-page.html
index 96aa420..d76a755 100644
--- a/src/main/resources/templates/modele-page.html
+++ b/src/main/resources/templates/modele-page.html
@@ -21,35 +21,38 @@
     <header>
         <nav class="navbar navbar-expand-lg navbar navbar-dark bg-dark navbar-">
             <a class="navbar-brand" href="/accueil">
-                <img src="/img/logo.png" width="70" height="70" alt="Logo">
-                <label class="text-light"><strong>ENI-Encheres</strong></label>
+                <img href="/accueil" src="/img/logo.png" width="70" height="70" alt="Logo">
+                <label href="/accueil" class="text-light"><strong>ENI-Encheres</strong></label>
             </a>
-            <div th:if="${#authentication.principal != 'anonymousUser'}" class="text-light text-center d-flex justify-content-center align-items-center" th:text="#{'Mes crédits : '} + ${user}"></div>
+            <div th:if="${#authentication.principal != 'anonymousUser'}" class="text-light text-center d-flex justify-content-center align-items-center" th:text="#{home.credit} + ${user}"></div>
             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div  class="collapse navbar-collapse " id="navbarNav">
                 <ul class="navbar-nav ml-auto">
                     <li class="nav-item" th:if="${#authentication.principal != 'anonymousUser'}" th:classappend="${requestURI == '/accueil'} ? 'active'">
-                        <a class="nav-link" href="/accueil">Encheres <span class="sr-only" >(current)</span></a>
+                        <a class="nav-link" href="/accueil" th:text="#{home.nav.enchere}"> <span class="sr-only" >(current)</span></a>
                     </li>
                     <li class="nav-item" th:if="${#authentication.principal != 'anonymousUser'}" th:classappend="${requestURI == '/article/new'} ? 'active'">
-                        <a class="nav-link" href="/article/new">Vendre un article</a>
+                        <a class="nav-link" href="/article/new" th:text="#{home.nav.vend}"></a>
                     </li>
                     <li  class="nav-item" th:if="${#authentication.principal == 'anonymousUser'}">
-                        <a class="btn btn-primary" href="/login" role="button" style="background-color: #1B4463;">S'inscrire / Se connecter</a>
+                        <a class="btn btn-primary" href="/login" role="button" style="background-color: #1B4463;" th:text="#{home.nav.login}"></a>
                     </li>
                     <li class="nav-item dropdown" th:if="${#authentication.principal != 'anonymousUser'}">
                         <a class="nav-link dropdown-toggle"  id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                             <i class="fas fa-user"></i> <!-- Icône de profil -->
                         </a>
                         <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
-                            <a class="dropdown-item" href="/profil">Profil</a> <!-- Bouton de profil -->
-                            <a class="dropdown-item" href="/logout">Déconnexion</a> <!-- Bouton de déconnexion -->
+                            <a class="dropdown-item" href="/profil" th:text="#{home.profil.profil}"></a> <!-- Bouton de profil -->
+                            <a class="dropdown-item" href="/logout" th:text="#{home.profil.logout}"></a> <!-- Bouton de déconnexion -->
                             <div class="dropdown-divider"></div> <!-- Diviseur -->
                             <a class="dropdown-item" th:href="@{/change-language}" th:text="#{home.button.lang}"></a> <!-- Option de changement de langue vers l'anglais --><!-- Option de changement de langue vers le français -->
                         </div>
                     </li>
+                    <li class="nav-item" th:if="${#authentication.principal == 'anonymousUser'}">
+                        <strong><a class="nav-link" href="#" th:href="@{/change-language}" th:text="#{home.button.lang2}"></a></strong>
+                    </li>
                 </ul>
             </div>
         </nav>
diff --git a/src/main/resources/templates/newArticle.html b/src/main/resources/templates/newArticle.html
index abe0abf..97dee47 100644
--- a/src/main/resources/templates/newArticle.html
+++ b/src/main/resources/templates/newArticle.html
@@ -2,97 +2,92 @@
 <html th:replace="~{modele-page :: layout('Ajouter un article',~{::link} , ~{::#container-main})}" xmlns:th="http://www.thymeleaf.org">
 <head>
     <meta charset="UTF-8">
+
 </head>
 <body>
-<div id="container-main">
-    <h1>Nouvelle vente</h1>
-    <form th:action="@{/article/new}" method="post" th:object="${article}" enctype="multipart/form-data">
-        <!-- Nom de l'article -->
-        <div>
-            <label for="nom">Article:</label>
-            <input type="text" id="nom" th:field="*{nom}" required>
+<div id="container-main" class="container py-5">
+    <h1 class="mb-4">Nouvelle vente</h1>
+    <form th:action="@{/article/new}" method="post" th:object="${article}" enctype="multipart/form-data" class="needs-validation" novalidate>
+        <div class="mb-3">
+            <label for="nom" class="form-label">Article:</label>
+            <input type="text" class="form-control" th:field="*{nom}" id="nom" required>
+            <div class="invalid-feedback">Ce champ est requis.</div>
         </div>
 
-        <!-- Description -->
-        <div>
-            <label for="description">Description:</label>
-            <textarea id="description" th:field="*{desc}" required></textarea>
+        <div class="mb-3">
+            <label for="description" class="form-label">Description:</label>
+            <textarea class="form-control" th:field="*{desc}" id="description" required></textarea>
+            <div class="invalid-feedback">Ce champ est requis.</div>
         </div>
 
-        <!-- Catégorie -->
-        <div>
-            <label for="categorie">Catégorie:</label>
-            <select id="categorie" th:field="*{numCategorie}" required>
-                <!-- Boucle sur les catégories pour générer les options -->
+        <div class="mb-3">
+            <label for="categorie" class="form-label">Catégorie:</label>
+            <select class="form-control" th:field="*{numCategorie}" id="categorie" required>
                 <option th:each="categorie : ${categories}" th:value="${categorie.id}" th:text="${categorie.libelle}"></option>
             </select>
+            <div class="invalid-feedback">Veuillez sélectionner une catégorie.</div>
         </div>
 
-        <!-- Photo -->
-        <div>
-            <label for="photo">Photo de l'article:</label>
-            <input type="file" id="photo" th:field="*{photo}" accept="image/jpeg">
+        <div class="mb-3">
+            <label for="photo" class="form-label">Photo de l'article:</label>
+            <input type="file" class="form-control" th:field="*{photo}" id="photo" accept="image/jpeg">
         </div>
 
-        <!-- Mise à prix -->
-        <div>
-            <label for="prix">Mise à prix:</label>
-            <input type="number" id="prix" th:field="*{prixInitial}" min="0" max="2000000000" step="0.01" required>
+        <div class="mb-3">
+            <label for="prix" class="form-label">Mise à prix:</label>
+            <input type="number" class="form-control" th:field="*{prixInitial}" id="prix" min="0" max="2000000000" step="0.01" required>
+            <div class="invalid-feedback">Ce champ est requis.</div>
         </div>
 
-        <!-- Date début enchère -->
-        <div>
-            <label for="dateDebut">Date début enchère:</label>
-            <input type="date" id="dateDebut" name="dateDebut" required>
+        <div class="mb-3">
+            <label for="dateDebut" class="form-label">Date début enchère:</label>
+            <input type="date" class="form-control" id="dateDebut" name="dateDebut" required>
+            <div class="invalid-feedback">Ce champ est requis.</div>
         </div>
 
-        <!-- Date fin enchère -->
-        <div>
-            <label for="dateFin">Date fin enchère:</label>
-            <input type="date" id="dateFin" name="dateFin" required>
+        <div class="mb-3">
+            <label for="dateFin" class="form-label">Date fin enchère:</label>
+            <input type="date" class="form-control" id="dateFin" name="dateFin" required>
+            <div class="invalid-feedback">Ce champ est requis.</div>
         </div>
 
-        <!-- Lieu de retrait -->
         <h4>Retrait</h4>
-        <div>
-            <label for="rue">Rue:</label>
-            <input type="text" id="rue" name="rue" th:field="${user.rue}" required>
+        <div class="mb-3">
+            <label for="rue" class="form-label">Rue:</label>
+            <input type="text" class="form-control" id="rue" name="rue" th:field="${user.rue}" required>
+            <div class="invalid-feedback">Ce champ est requis.</div>
         </div>
-        <div>
-            <label for="codePostal">Code postal:</label>
-            <input type="text" id="codePostal" name="code_postal" th:field="${user.code_postal}" required>
+        <div class="mb-3">
+            <label for="codePostal" class="form-label">Code postal:</label>
+            <input type="text" class="form-control" id="codePostal" name="code_postal" th:field="${user.code_postal}" required>
+            <div class="invalid-feedback">Ce champ est requis.</div>
         </div>
-        <div>
-            <label for="ville">Ville:</label>
-            <input type="text" id="ville" name="ville" th:field="${user.ville}" required>
+        <div class="mb-3">
+            <label for="ville" class="form-label">Ville:</label>
+            <input type="text" class="form-control" id="ville" name="ville" th:field="${user.ville}" required>
+            <div class="invalid-feedback">Ce champ est requis.</div>
         </div>
 
-        <!-- Bouton Enregistrer -->
-        <div>
-            <button type="submit">Enregistrer</button>
-        </div>
+        <button type="submit" class="btn btn-primary">Enregistrer</button>
 
-        <!-- En cas d'erreur -->
-        <div th:if="${param.erreur != null}">
+        <div th:if="${param.erreur != null}" class="mt-3">
             <p style="color: red;" th:text="${param.erreur}"></p>
         </div>
     </form>
-    <form th:action="@{/accueil}" method="post">
-        <button type="submit">Annuler</button>
+    <form th:action="@{/accueil}" method="post" class="mt-3">
+        <button type="submit" class="btn btn-secondary">Annuler</button>
     </form>
     <script>
-        // Obtenez la date actuelle et j+1
         var today = new Date();
         var tomorrow = new Date(today);
         tomorrow.setDate(tomorrow.getDate() + 1);
-        // Formatez la date au format YYYY-MM-DD pour l'attribut min
         var formattedDateToday = today.toISOString().split('T')[0];
         var formattedDateTomorrow = tomorrow.toISOString().split('T')[0];
-        // Attribuez la date formatée à l'attribut min de l'élément input
         document.getElementById('dateDebut').min = formattedDateToday;
         document.getElementById('dateFin').min = formattedDateTomorrow;
-        // Attribuez la date formatée à l'attribut min de l'élément input
     </script>
 </div>
+<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
 </body>
 </html>