diff --git a/src/main/resources/templates/accueil.html b/src/main/resources/templates/accueil.html
index c5b5bb7..6aee351 100644
--- a/src/main/resources/templates/accueil.html
+++ b/src/main/resources/templates/accueil.html
@@ -17,17 +17,38 @@
                                 <input type="text" class="form-control" th:attr="placeholder=#{home.search.title}" name="searchTitle">
                                 <select class="form-control mt-2" name="searchCategory">
                                     <option value="" th:text="#{home.search.cat}"></option>
-                                    <option th:each="category : ${categories}" th:value="${category.id}" th:text="${category.libelle}"></option>
+                                    <!-- Options de catégorie -->
                                 </select>
                             </div>
                             <div class="col-md-4 text-center">
                                 <button type="submit" class="btn btn-primary" th:text="#{home.search.button}">Search</button>
                             </div>
                         </form>
+                        <div class="row">
+                            <div class="col-12 col-lg-6">
+                                <div class="card mt-3">
+                                    <div class="card-body">
+                                        <form class="row">
+                                            <div class="col-6">
+                                                <div class="form-check">
+                                                    <input class="form-check-input" type="radio" name="transactionType" id="achats" value="achats">
+                                                    <label class="form-check-label" type="chec" >Achats</label>
+                                                </div>
+                                            </div><div class="col-6">
+                                                <div class="form-check">
+                                                    <input class="form-check-input" type="radio" name="transactionType" id="ventes" value="ventes">
+                                                    <label class="form-check-label" for="ventes">Mes ventes</label>
+                                                </div>
+                                            </div>
+                                        </form>
+                                    </div>
+                                </div>
+                            </div>
                     </div>
                 </div>
             </div>
         </div>
+        </div>
         <div class="row">
             <div th:each="article : ${articles}" class="col-md-6 mb-4">
                 <a th:href="@{/article/show(id=${article.id})}">
diff --git a/src/main/resources/templates/security/login.html b/src/main/resources/templates/security/login.html
index 9fdbcb1..20b4228 100644
--- a/src/main/resources/templates/security/login.html
+++ b/src/main/resources/templates/security/login.html
@@ -3,30 +3,40 @@
 <head>
     <meta charset="UTF-8">
 </head>
-    <body>
-        <div id="container-main">
-            <h2>Pour se Connecter :</h2>
-            <br>
+<body>
+<div class="container" id="container-main">
+    <div class="row justify-content-center mt-5">
+        <div class="col-md-6">
+            <h2 class="text-center mb-4">Pour se Connecter :</h2>
             <form th:action="@{/login}" method="post">
-                <div>
-                    <label for="username">Identifiant: </label>
-                    <input type="username" name="username" id="username"/>
+                <div class="mb-3">
+                    <label for="username" class="form-label">Identifiant:</label>
+                    <input type="text" class="form-control" name="username" id="username" placeholder="Entrez votre identifiant">
                 </div>
-                <div>
-                    <label for="password">Mot de passe:</label>
-                    <input type="password" name="password" id="password"/>
+                <div class="mb-3">
+                    <label for="password" class="form-label">Mot de passe:</label>
+                    <input type="password" class="form-control" name="password" id="password" placeholder="Entrez votre mot de passe">
+                </div>
+                <div class="mb-3 form-check">
+                    <input type="checkbox" class="form-check-input" id="remember-me" name="remember-me">
+                    <label class="form-check-label" for="remember-me">Se souvenir de moi</label>
+                </div>
+                <div class="mb-3">
+                    <a href="/mot-de-passe-oublie">Mot de passe oublié</a>
+                </div>
+                <div class="mb-3">
+                    <button type="submit" class="btn btn-primary">Connexion</button>
+                    <button type="button" class="btn btn-warning text-light" href="/inscription">Créer un compte </button>
                 </div>
-                <div><input type="checkbox" id="remember-me" name="remember-me"/><label for="remember-me"> Se souvenir de moi</label></div>
-                <div><a href="/mot-de-passe-oublie">Mot de passe oublié</a></div>
-                <div><input type="submit" value="Connexion"/></div>
             </form>
-            <div th:if="${param.error}">
+            <div th:if="${param.error}" class="text-danger">
                 Identifiant ou mot de passe incorrect
             </div>
-            <div th:if="${param.logout}">
+            <div th:if="${param.logout}" class="text-success">
                 Vous avez été déconnecté
             </div>
-            <div><a href="/inscription">Créer un compte</a></div>
         </div>
-    </body>
+    </div>
+</div>
+</body>
 </html>
\ No newline at end of file
