diff --git a/src/main/java/fr/eni/enchere/config/WebConfig.java b/src/main/java/fr/eni/enchere/config/WebConfig.java
index ce572cd..623bde6 100644
--- a/src/main/java/fr/eni/enchere/config/WebConfig.java
+++ b/src/main/java/fr/eni/enchere/config/WebConfig.java
@@ -16,7 +16,7 @@ public class WebConfig {
     @Bean
     public LocaleResolver localeResolver() {
         SessionLocaleResolver resolver = new SessionLocaleResolver();
-        resolver.setDefaultLocale(Locale.FRENCH); // Définit la locale par défaut
+        resolver.setDefaultLocale(Locale.FRENCH);
         return resolver;
     }
 
diff --git a/src/main/java/fr/eni/enchere/security/WebSecurityConfig.java b/src/main/java/fr/eni/enchere/security/WebSecurityConfig.java
index e5f6d54..507b63d 100644
--- a/src/main/java/fr/eni/enchere/security/WebSecurityConfig.java
+++ b/src/main/java/fr/eni/enchere/security/WebSecurityConfig.java
@@ -19,7 +19,7 @@ public class WebSecurityConfig{
                         .requestMatchers("/", "/accueil").permitAll()
                         .requestMatchers("/accueil", "/login", "/inscription/**", "/searchArticle", "/article/**", "/change-language").permitAll()
                         .requestMatchers("/css/**", "/images/**", "/assets/**", "/img/**", "/js/**", "/assets/**").permitAll()
-                        .requestMatchers("/profil/**", "/article/new/**").authenticated()
+                        .requestMatchers("/profil/**", "/article/new/**", "/article/update", "/article/delete").authenticated()
                         .requestMatchers("/admin").hasRole("ADMIN")
                         .anyRequest().authenticated())
                 .formLogin((form) -> form.loginPage("/login").defaultSuccessUrl("/", true))
diff --git a/src/main/resources/application.properties b/src/main/resources/application.properties
index e332b8d..4fcf5b8 100644
--- a/src/main/resources/application.properties
+++ b/src/main/resources/application.properties
@@ -1,4 +1,5 @@
 spring.datasource.url=jdbc:mariadb://91.121.54.36:3306/eni_enchere
 spring.datasource.username=eni
 spring.datasource.password=Pa$$w0rd
-spring.datasource.driver-class-name=org.mariadb.jdbc.Driver
\ No newline at end of file
+spring.datasource.driver-class-name=org.mariadb.jdbc.Driver
+spring.messages.encoding=UTF-8
\ No newline at end of file
diff --git a/src/main/resources/i18n/messages_fr.properties b/src/main/resources/i18n/messages_fr.properties
index de19788..9f3a9ce 100644
--- a/src/main/resources/i18n/messages_fr.properties
+++ b/src/main/resources/i18n/messages_fr.properties
@@ -1,3 +1,44 @@
 accueil.search.title = Rechercher un article par nom...
-accueil.search.cat = Toutes les catégories
-accueil.search.button = Recherche
\ No newline at end of file
+accueil.search.cat = Toutes les cat\u00e9gories
+accueil.search.button = Recherche
+
+profil.title = Mon profil
+profil.button = Modifier
+profil.pseudo = Pseudo:
+profil.surname = Pr\u00e9nom:
+profil.name = Nom:
+profil.email = Email:
+profil.phone = T\u00e9l\u00e9phone:
+profil.street = Rue:
+profil.postal = Code postal:
+profil.city = Ville:
+profil.credit = Cr\u00e9dits:
+
+edit.profil.currentpassword = Mot de passe actuel:
+edit.profil.newpassword = Nouveau mot de passe:
+edit.profil.confirmnewpassword = Confirmation du nouveau mot de passe:
+edit.profil.title = Modifier mon profil
+edit.profil.button.edit = Enregistrer les modifications
+edit.profil.button.del = Supprimer mon compte
+
+login.title = Pour se Connecter :
+login.id = Identifiant:
+login.password = Mot de passe:
+login.save = Se souvenir de moi
+login.forgotpassword = Mot de passe oubli\u00e9
+login.connection = Connexion
+login.makecompte = Cr\u00e9er un compte
+
+register.title = Mon profil
+register.button = Modifier
+register.pseudo = Pseudo:
+register.surname = Pr\u00e9nom:
+register.name = Nom:
+register.email = Email:
+register.phone = T\u00e9l\u00e9phone:
+register.street = Rue:
+register.postal = Code postal:
+register.city = Ville:
+register.credit = Cr\u00e9dits:
+register.make = cr\u00e9er
+register.cancel = annuler
\ No newline at end of file
diff --git a/src/main/resources/templates/editProfil.html b/src/main/resources/templates/editProfil.html
index 446b8c7..a6f2ba4 100644
--- a/src/main/resources/templates/editProfil.html
+++ b/src/main/resources/templates/editProfil.html
@@ -6,153 +6,118 @@
     <link rel="stylesheet" href="assets/fontawesome/css/all.css">
 </head>
 <body>
-<div id="container-main">
-    <h1>Mon profil</h1>
-    <form th:action="@{/profil/updateUser}" method="post" th:object="${userProfile}">
-        <!--<div class="erreur-saisie" th:if="${#fields.hasErrors('*')}" >
-            <p th:text="#{index.erreurs}">Message d'erreur</p>
-        </div>-->
-        <!-- Champ pseudo-->
-        <div class="champ-saisie">
-            <label for="pseudo">Pseudo: </label>
-            <div>
-                <input type="text" th:field="*{pseudo}" id="pseudo" />
+<div id="container-main" class="container mt-5">
+    <h1 th:text="#{edit.profil.title}"></h1>
+    <form th:action="@{/inscription/newUser}" method="post" th:object="${userProfile}" class="needs-validation" novalidate>
+        <div class="card">
+            <div class="card-body">
+                <!-- Iteration over form fields -->
+                <div class="mb-3">
+                    <label for="pseudo" class="form-label" th:text="#{profil.pseudo}"></label>
+                    <input type="text" class="form-control" th:field="*{pseudo}" id="pseudo" required>
+                    <div th="if=${#fields.hasErrors('pseudo')}" class="invalid-feedback">
+                        <ul>
+                            <li th:each="err : ${#fields.errors('pseudo')}" th:text="${err}"></li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="mb-3">
+                    <label for="prenom" class="form-label" th:text="#{profil.surname}">:</label>
+                    <input type="text" class="form-control" th:field="*{prenom}" id="prenom" required>
+                    <div th="if=${#fields.hasErrors('prenom')}" class="invalid-feedback">
+                        <ul>
+                            <li th:each="err : ${#fields.errors('prenom')}" th:text="${err}"></li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="mb-3">
+                    <label for="nom" class="form-label" th:text="#{profil.name}"></label>
+                    <input type="text" class="form-control" th:field="*{nom}" id="nom" required>
+                    <div th="if=${#fields.hasErrors('nom')}" class="invalid-feedback">
+                        <ul>
+                            <li th:each="err : ${#fields.errors('nom')}" th:text="${err}"></li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="mb-3">
+                    <label for="email" class="form-label" th:text="#{profil.email}" ></label>
+                    <input type="email" class="form-control" th:field="*{email}" id="email" required>
+                    <div th="if=${#fields.hasErrors('email')}" class="invalid-feedback">
+                        <ul>
+                            <li th:each="err : ${#fields.errors('email')}" th:text="${err}"></li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="mb-3">
+                    <label for="telephone" class="form-label" th:text="#{profil.phone}"></label>
+                    <input type="text" class="form-control" th:field="*{telephone}" id="telephone">
+                    <div th="if=${#fields.hasErrors('telephone')}" class="invalid-feedback">
+                        <ul>
+                            <li th:each="err : ${#fields.errors('telephone')}" th:text="${err}"></li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="mb-3">
+                    <label for="rue" class="form-label" th:text="#{profil.street}"></label>
+                    <input type="text" class="form-control" th:field="*{rue}" id="rue">
+                    <div th="if=${#fields.hasErrors('rue')}" class="invalid-feedback">
+                        <ul>
+                            <li th:each="err : ${#fields.errors('rue')}" th:text="${err}"></li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="mb-3">
+                    <label for="code_postal" class="form-label" th:text="#{profil.postal}"></label>
+                    <input type="text" class="form-control" th:field="*{code_postal}" id="code_postal">
+                    <div th="if=${#fields.hasErrors('code_postal')}" class="invalid-feedback">
+                        <ul>
+                            <li th:each="err : ${#fields.errors('code_postal')}" th:text="${err}"></li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="mb-3">
+                    <label for="ville" class="form-label" th:text="#{profil.city}"></label>
+                    <input type="text" class="form-control" th:field="*{ville}" id="ville">
+                    <div th="if=${#fields.hasErrors('ville')}" class="invalid-feedback">
+                        <ul>
+                            <li th:each="err : ${#fields.errors('ville')}" th:text="${err}"></li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="mb-3">
+                    <label for="currentPassword" class="form-label" th:text="#{edit.profil.currentpassword}"></label>
+                    <input type="password" class="form-control" th:field="*{currentPassword}" id="currentPassword">
+                </div>
+
+                <div class="mb-3">
+                    <label for="newPassword" class="form-label" th:text="#{edit.profil.newpassword}"></label>
+                    <input type="password" class="form-control" th:field="*{newPassword}" id="newPassword">
+                </div>
+
+                <div class="mb-3">
+                    <label for="confirmPassword" class="form-label" th:text="#{edit.profil.confirmnewpassword}"></label>
+                    <input type="password" class="form-control" id="confirmPassword" th:field="*{confirmPassword}">
+                </div>
+                <div class="mb-3">
+                    <span th:text="#{profil.credit}"></span> <span th:text="${userProfile.credit}"></span>
+                </div>
+                <input type="hidden" th:field="*{id}" id="userId" th:value="${userProfile.id}">
+                <button type="submit" class="btn btn-primary" th:text="#{edit.profil.button.edit}"></button>
             </div>
-            <span style="color: red;" th:if="${#fields.hasErrors('pseudo')}">
-                    <ul>
-                        <li th:each="erreur: ${#fields.errors('pseudo')}" th:text="${erreur}"></li>
-                    </ul>
-                </span>
         </div>
-        <!-- Champ prénom-->
-        <div class="champ-saisie">
-            <label for="prenom">Prénom: </label>
-            <div>
-                <input type="text" th:field="*{prenom}" id="prenom" />
-            </div>
-            <span style="color: red;" th:if="${#fields.hasErrors('prenom')}">
-                    <ul>
-                        <li th:each="erreur: ${#fields.errors('prenom')}" th:text="${erreur}"></li>
-                    </ul>
-                </span>
-        </div>
-        <!-- Champ nom-->
-        <div class="champ-saisie">
-            <label for="nom">Nom: </label>
-            <div>
-                <input type="text" th:field="*{nom}" id="nom" />
-            </div>
-            <span style="color: red;" th:if="${#fields.hasErrors('nom')}">
-                    <ul>
-                        <li th:each="erreur: ${#fields.errors('nom')}" th:text="${erreur}"></li>
-                    </ul>
-                </span>
-        </div>
-        <!-- Champ email-->
-        <div class="champ-saisie">
-            <label for="email">Email: </label>
-            <div>
-                <input type="email" th:field="*{email}" id="email" />
-            </div>
-            <span style="color: red;" th:if="${#fields.hasErrors('email')}">
-                    <ul>
-                        <li th:each="erreur: ${#fields.errors('email')}" th:text="${erreur}"></li>
-                    </ul>
-                </span>
-        </div>
-        <!-- Champ téléphone-->
-        <div class="champ-saisie">
-            <label for="telephone">Téléphone: </label>
-            <div>
-                <input type="text" th:field="*{telephone}" id="telephone" />
-            </div>
-            <span style="color: red;" th:if="${#fields.hasErrors('telephone')}">
-                    <ul>
-                        <li th:each="erreur: ${#fields.errors('telephone')}" th:text="${erreur}"></li>
-                    </ul>
-                </span>
-        </div>
-        <!-- Champ Rue-->
-        <div class="champ-saisie">
-            <label for="rue">Rue: </label>
-            <div>
-                <input type="text" th:field="*{rue}" id="rue" />
-            </div>
-            <span style="color: red;" th:if="${#fields.hasErrors('rue')}">
-                    <ul>
-                        <li th:each="erreur: ${#fields.errors('rue')}" th:text="${erreur}"></li>
-                    </ul>
-                </span>
-        </div>
-        <!-- Champ Code postal-->
-        <div class="champ-saisie">
-            <label for="code_postal">Code postal: </label>
-            <div>
-                <input type="text" th:field="*{code_postal}" id="code_postal" />
-            </div>
-            <span style="color: red;" th:if="${#fields.hasErrors('code_postal')}">
-                    <ul>
-                        <li th:each="erreur: ${#fields.errors('code_postal')}" th:text="${erreur}"></li>
-                    </ul>
-                </span>
-        </div>
-        <!-- Champ Ville-->
-        <div class="champ-saisie">
-            <label for="code_postal">Ville: </label>
-            <div>
-                <input type="text" th:field="*{ville}" id="ville" />
-            </div>
-            <span style="color: red;" th:if="${#fields.hasErrors('ville')}">
-                    <ul>
-                        <li th:each="erreur: ${#fields.errors('ville')}" th:text="${erreur}"></li>
-                    </ul>
-                </span>
-        </div>
-        <!-- Champ Mot de passe actuel-->
-        <div class="champ-saisie">
-            <label for="currentPassword">Mot de passe actuel: </label>
-            <div>
-                <input type="password" th:field="*{currentPassword}" name="currentPassword"  id="currentPassword" />
-            </div>
-            <span style="color: red;" th:if="${#fields.hasErrors('currentPassword')}">
-                <ul>
-                    <li th:each="erreur: ${#fields.errors('currentPassword')}" th:text="${erreur}"></li>
-                </ul>
-            </span>
-        </div>
-        <!-- Champ Nouveau mot de passe-->
-        <div class="champ-saisie">
-            <label for="newPassword">Nouveau mot de passe: </label>
-            <div>
-                <input type="password" th:field="*{newPassword}" name="newPassword" id="newPassword" />
-            </div>
-            <span style="color: red;" th:if="${#fields.hasErrors('newPassword')}">
-                <ul>
-                    <li th:each="erreur: ${#fields.errors('newPassword')}" th:text="${erreur}"></li>
-                </ul>
-            </span>
-        </div>
-        <!-- Champ Confirmation du nouveau mot de passe-->
-        <div class="champ-saisie">
-            <label for="confirmPassword">Confirmation du nouveau mot de passe: </label>
-            <div>
-                <input type="password" th:field="*{confirmPassword}" name="confirmPassword" id="confirmPassword" />
-            </div>
-            <span style="color: red;" th:if="${#fields.hasErrors('confirmPassword')}">
-                <ul>
-                    <li th:each="erreur: ${#fields.errors('confirmPassword')}" th:text="${erreur}"></li>
-                </ul>
-            </span>
-        </div>
-        <div>Crédits: <span th:text="${userProfile.credit}"></span></div>
-        <!-- Input cacher qui permet de stocker l'id du compte utilisateur à mettre à jour -->
-        <input type="hidden" id="userId" name="userId" th:field="*{id}" th:value="${userProfile.id}" />
-        <input type="submit" value="Enregistrer"/>
     </form>
-    <form th:action="@{/profil/delete}" method="post">
-        <button type="submit">Supprimer mon compte</button>
+    <form th:action="@{/profil/delete}" method="post" class="mt-4">
+        <button type="submit" class="btn btn-danger" th:text="#{edit.profil.button.del}"></button>
     </form>
 </div>
-<script src="js/bootstrap/bootstrap.min.js"></script>
+<script src="js/bootstrap/bootstrap.bundle.min.js"></script>
 </body>
 </html>
diff --git a/src/main/resources/templates/profil.html b/src/main/resources/templates/profil.html
index ffaed00..1cb40a1 100644
--- a/src/main/resources/templates/profil.html
+++ b/src/main/resources/templates/profil.html
@@ -3,48 +3,60 @@
 <head>
     <meta charset="UTF-8">
 </head>
-    <body>
-        <div id="container-main">
-            <h1>Mon profil</h1>
-            <div class="champ-affichage">
-                <label>Pseudo: </label>
-                <span th:text="${userProfile.pseudo}"></span>
+<body>
+<div class="container-fluid" id="container-main">
+    <div class="row mt-3">
+        <div class="col-md-6 offset-md-3">
+            <div class="card">
+                <div class="card-header">
+                    <h4 th:text="#{profil.title}"></h4>
+                </div>
+                <div class="card-body">
+                    <ul class="list-group">
+                        <li class="list-group-item">
+                            <strong><label class="col-form-label" th:text="#{profil.pseudo}"></label></strong>
+                            <span th:text="${userProfile.pseudo}"></span>
+                        </li>
+                        <li class="list-group-item">
+                            <strong><label class="col-form-label" th:text="#{profil.surname}"></label></strong>
+                            <span th:text="${userProfile.prenom}"></span>
+                        </li>
+                        <li class="list-group-item">
+                            <strong><label class="col-form-label" th:text="#{profil.name}"></label></strong>
+                            <span th:text="${userProfile.nom}"></span>
+                        </li>
+                        <li class="list-group-item">
+                            <strong><label class="col-form-label" th:text="#{profil.email}"></label></strong>
+                            <span th:text="${userProfile.email}"></span>
+                        </li>
+                        <li class="list-group-item">
+                            <strong><label class="col-form-label" th:text="#{profil.phone}"></label></strong>
+                            <span th:text="${userProfile.telephone}"></span>
+                        </li>
+                        <li class="list-group-item">
+                            <strong><label class="col-form-label" th:text="#{profil.street}"></label></strong>
+                            <span th:text="${userProfile.rue}"></span>
+                        </li>
+                        <li class="list-group-item">
+                            <strong><label class="col-form-label" th:text="#{profil.postal}"></label></strong>
+                            <span th:text="${userProfile.code_postal}"></span>
+                        </li>
+                        <li class="list-group-item">
+                            <strong><label class="col-form-label" th:text="#{profil.city}">Ville:</label></strong>
+                            <span th:text="${userProfile.ville}"></span>
+                        </li>
+                        <li class="list-group-item">
+                            <strong><label class="col-form-label" th:text="#{profil.credit}"></label></strong>
+                            <span th:text="${userProfile.credit}"></span>
+                        </li>
+                    </ul>
+                    <form th:action="@{/profil/edit}" method="post" class="mt-3">
+                        <button type="submit" class="btn btn-primary" th:text="#{profil.button}"></button>
+                    </form>
+                </div>
             </div>
-            <div class="champ-affichage">
-                <label>Prénom: </label>
-                <span th:text="${userProfile.prenom}"></span>
-            </div>
-            <div class="champ-affichage">
-                <label>Nom: </label>
-                <span th:text="${userProfile.nom}"></span>
-            </div>
-            <div class="champ-affichage">
-                <label>Email: </label>
-                <span th:text="${userProfile.email}"></span>
-            </div>
-            <div class="champ-affichage">
-                <label>Téléphone: </label>
-                <span th:text="${userProfile.telephone}"></span>
-            </div>
-            <div class="champ-affichage">
-                <label>Rue: </label>
-                <span th:text="${userProfile.rue}"></span>
-            </div>
-            <div class="champ-affichage">
-                <label>Code postal: </label>
-                <span th:text="${userProfile.code_postal}"></span>
-            </div>
-            <div class="champ-affichage">
-                <label>Ville: </label>
-                <span th:text="${userProfile.ville}"></span>
-            </div>
-            <div class="champ-affichage">
-                <label>Crédits: </label>
-                <span th:text="${userProfile.credit}"></span>
-            </div>
-            <form th:action="@{/profil/edit}" method="post">
-                <button type="submit">Modifier</button>
-            </form>
         </div>
-    </body>
+    </div>
+</div>
+</body>
 </html>