diff --git a/src/main/resources/templates/article.html b/src/main/resources/templates/article.html
index a554252..6a4fa6f 100644
--- a/src/main/resources/templates/article.html
+++ b/src/main/resources/templates/article.html
@@ -12,20 +12,36 @@
                             <h4>Article</h4>
                         </div>
                         <div class="card-body">
-                            <ul class="list-group">
-                                <li class="list-group-item">
-                                    <strong><label class="col-form-label" th:text="${article.nom}"></label></strong>
-                                </li>
-                                <li class="list-group-item">
-                                    <strong><label class="col-form-label" th:text="${article.desc}"></label></strong>
-                                </li>
-                                <li class="list-group-item">
-                                    <strong><label class="col-form-label" th:text="${username}"></label></strong>
-                                </li>
-                                <li class="list-group-item">
-                                    <strong><label class="col-form-label" th:text="${cate}"></label></strong>
-                                </li>
-                            </ul>
+                            <div class="row">
+                                <div class="col-md-3">
+                                    <img th:src="@{'/images/articles/' + ${article.id} + '.jpg'}" alt="image-vente" class="img-thumbnail" style="width: 250px; height: auto;">
+                                </div>
+                                <div class="col-md-9 d-flex flex-column">
+                                    <div class="mt-2 d-flex flex-column align-items-center">
+                                        <strong><span class="col-form-label" th:text="${article.nom}"></span></strong>
+                                    </div>
+                                    <div class="mt-2 d-flex flex-row align-items-end justify-content-between">
+                                        <strong><label class="col-form-label">Description</label></strong>
+                                        <span th:text="${article.desc}"></span>
+                                    </div>
+                                    <div class="mt-2 d-flex flex-row align-items-end justify-content-between">
+                                        <strong><label class="col-form-label">Vendeur</label></strong>
+                                        <span th:text="${username}"></span>
+                                    </div>
+                                    <div class="mt-2 d-flex flex-row align-items-end justify-content-between">
+                                        <strong><label class="col-form-label">Catégorie</label></strong>
+                                        <span th:text="${cate}"></span>
+                                    </div>
+                                    <div class="mt-2 d-flex flex-row align-items-end justify-content-between">
+                                        <strong><label class="col-form-label">Prix de vente</label></strong>
+                                        <span th:text="${article.prixInitial}"></span>
+                                    </div>
+                                    <div class="mt-2 d-flex flex-row align-items-end justify-content-between">
+                                        <strong><label class="col-form-label">Date fin enchère</label></strong>
+                                        <span th:text="${article.dateFinEnch}"></span>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>