diff --git a/assets/css/custom-panel.css b/assets/css/custom-panel.css
index 1517354..78b3e92 100644
--- a/assets/css/custom-panel.css
+++ b/assets/css/custom-panel.css
@@ -98,4 +98,24 @@
 
 .k-block-container:not(:last-of-type) {
   border-bottom: 1px dashed var(--color-gray-600);
+}
+
+/*modif card pour ressembler au site web*/
+.k-panel[data-template="blog"] .k-item.k-cards-item[data-template="article"]{
+    display: grid;
+    grid-template-columns: 2fr auto 1fr;
+    grid-template-rows: auto;
+}
+
+.k-panel[data-template="blog"] .k-item.k-cards-item[data-template="article"] .k-item-image{
+    grid-column: 3/4;
+    grid-row: 1/3;
+}
+.k-panel[data-template="blog"] .k-item.k-cards-item[data-template="article"] .k-item-content{
+    grid-column: 1/2;
+    grid-row: 1/2;
+}
+.k-panel[data-template="blog"] .k-item.k-cards-item[data-template="article"] .k-item-options{
+    grid-column: 2/3;
+    grid-row: 1/2;
 }
\ No newline at end of file
diff --git a/site/blueprints/pages/blog.yml b/site/blueprints/pages/blog.yml
index 5d8ab39..96e0f88 100644
--- a/site/blueprints/pages/blog.yml
+++ b/site/blueprints/pages/blog.yml
@@ -40,8 +40,10 @@ tabs:
         label: Articles
         type: pages
         headline: Liste des articles
-        layout: cardlets
+        layout: cards
+        size: full
         image:
+          ratio: 16/9
           cover: true
         template: article
         info: "{{ page.date.toDate('d/m/Y') }}"