diff --git a/assets/css/custom-panel.css b/assets/css/custom-panel.css
index fe0157f..7f6d7d2 100644
--- a/assets/css/custom-panel.css
+++ b/assets/css/custom-panel.css
@@ -113,6 +113,33 @@
   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;
+  align-items: start;
+}
+
 /* Logo sur la page de login */
 .k-login-view .k-login-form::before {
   content: "";
diff --git a/site/blueprints/pages/article.yml b/site/blueprints/pages/article.yml
index 2694f5c..f2bee16 100644
--- a/site/blueprints/pages/article.yml
+++ b/site/blueprints/pages/article.yml
@@ -81,7 +81,7 @@ tabs:
           meta:
             type: fields
             fields:
-              published:
+              date:
                 label: Date de publication
                 type: date
                 display: DD/MM/YYYY
diff --git a/site/templates/blog.json.php b/site/templates/blog.json.php
index bf60e42..16c3db7 100644
--- a/site/templates/blog.json.php
+++ b/site/templates/blog.json.php
@@ -6,8 +6,8 @@ $mapArticle = function($article) {
   return [
     'title' => $article->title()->value(),
     'slug'  => $article->slug(),
-    'date'  => $article->published()->toDate('d/m/Y'),
-    'intro' => $article->intro()->value(),
+    'date'  => $article->date()->toDate('d/m/Y'),
+    'intro' => $article->intro()->excerpt(200),
     'cover' => $article->cover()->toFile()?->url(),
   ];
 };
diff --git a/src/views/Blog.svelte b/src/views/Blog.svelte
index b60d658..ae7cc8f 100644
--- a/src/views/Blog.svelte
+++ b/src/views/Blog.svelte
@@ -125,7 +125,7 @@
               <a href="/blog/{featured.slug}">{featured.title}</a>
             </h2>
             {#if featured.intro}
-              <p class="blog-card-description">{featured.intro}</p>
+              <p class="blog-card-excerpt">{featured.intro}</p>
             {/if}
             <a href="/blog/{featured.slug}" class="blog-card-readmore">
               Lire l'article <span class="arrow">→</span>
@@ -180,7 +180,6 @@
   .blog {
     background: #0d0e22;
     color: var(--color-text);
-    padding: 0 50px;
   }
 
   /* --- Header / Intro --- */
@@ -204,12 +203,6 @@
     opacity: 0.9;
   }
 
-  .page-container {
-    max-width: none;
-    margin: 0;
-    padding: 0 10%;
-  }
-
   /* --- Card (article item) --- */
   .blog-card {
     display: flex;
@@ -233,10 +226,9 @@
   }
 
   .blog-card-title {
-    font-family: "Danzza", sans-serif;
-    font-size: 40px;
-    max-width: 80%;
-    font-weight: 700;
+    font-family: "Danzza Bold", sans-serif;
+    font-size: var(--font-size-title-section);
+    line-height: 1.3;
   }
 
   .blog-card-title a {
@@ -247,23 +239,20 @@
     color: var(--color-primary);
   }
 
-  .blog-card-description {
+  .blog-card-excerpt {
     color: #d9d9d9;
-    font-family: "Danzza",sans-serif;
     font-size: var(--font-size-paragraph);
-    font-weight: 400;
+    line-height: 1.6;
   }
 
   .blog-card-readmore {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
     color: var(--color-primary);
-    font-family: "Danzza", sans-serif;
+    font-family: "Danzza Medium", sans-serif;
     font-size: var(--font-size-paragraph);
-    font-weight: 500;
-    text-transform: uppercase;
-  }
-
-  .blog-card-readmore .arrow {
-    margin-left: 5px;
+    transition: gap 0.2s;
   }
 
   .blog-card-readmore:hover {