diff --git a/src/textes/themes/blog/layout/_partial/archive.ejs b/src/textes/themes/blog/layout/_partial/archive.ejs
index f6cd056..a67cee8 100644
--- a/src/textes/themes/blog/layout/_partial/archive.ejs
+++ b/src/textes/themes/blog/layout/_partial/archive.ejs
@@ -1,7 +1,9 @@
 <% if (pagination == 2){ %>
+  <section class="previews-section">
   <% page.posts.each(function(post){ %>
-    <%- partial('article', {post: post, index: true}) %>
+    <%- partial('article-preview', {post: post, index: true}) %>
   <% }) %>
+  </section>
 <% } else { %>
   <% var last; %>
   <% page.posts.each(function(post, i){ %>
@@ -15,9 +17,9 @@
         <div class="archive-year-wrap">
           <h1><a href="<%- url_for(config.archive_dir + '/' + year) %>" class="archive-year"><%= year %></a></h1>
         </div>
-        <div class="archives">
+        <div class="previews-section archives">
     <% } %>
-    <%- partial('article', {post: post, index: true}) %>
+    <%- partial('article-preview', {post: post, index: true}) %>
   <% }) %>
   <% if (page.posts.length){ %>
     </div></section>
diff --git a/src/textes/themes/blog/layout/_partial/article-preview.ejs b/src/textes/themes/blog/layout/_partial/article-preview.ejs
new file mode 100644
index 0000000..882784d
--- /dev/null
+++ b/src/textes/themes/blog/layout/_partial/article-preview.ejs
@@ -0,0 +1,15 @@
+<article class="card card-preview card-primary">
+    <a href="<%- post.permalink %>" class="preview-link">
+      <div class="preview-item">
+        <div class="preview-content"<%- post.content %></div>
+        <div class="preview-overlay">
+          <h1 class="card-header"><%= post.title %></h1>
+          <div class="preview-metadata">
+            <div class="align-right"><time><small><%= date(post.date, null) %></small></time></div>
+            <div class="align-left"></div>
+            <div class="align-center comment-text">Lire le texte</div>
+          </div>
+        </div>
+      </div>
+    </a>
+</article>
diff --git a/src/textes/themes/blog/layout/_partial/article.ejs b/src/textes/themes/blog/layout/_partial/article.ejs
index 0df71c9..d35f95c 100644
--- a/src/textes/themes/blog/layout/_partial/article.ejs
+++ b/src/textes/themes/blog/layout/_partial/article.ejs
@@ -1,4 +1,4 @@
-<article id="<%= post.layout %>-<%= post.slug %>" class="card card-primary article article-type-<%= post.layout %>" itemscope itemprop="blogPost">
+<article id="<%= post.layout %>-<%= post.slug %>" class="article article-type-<%= post.layout %> container-typographic" itemscope itemprop="blogPost">
   <div class="article-inner">
     <%- partial('post/gallery') %>
     <% if (post.link || post.title){ %>
@@ -6,10 +6,6 @@
         <%- partial('post/title', {class_name: 'article-title'}) %>
       </header>
     <% } %>
-    <div class="article-meta">
-      <%- partial('post/category') %>
-      <%- partial('post/date', {class_name: 'article-date', date_format: null}) %>
-    </div>
     <div class="article-entry" itemprop="articleBody">
       <% if (post.excerpt && index){ %>
         <%- post.excerpt %>
@@ -25,6 +21,21 @@
   </div>
 </article>
 
+<% if (!index){ %>
+  <%- partial('post/nav') %>
+<% } %>
+
+<section class="card card-noheader">
+  <div class="author-area">
+    <img src="/img/avatar.png" class="author-avatar" alt="avatar">
+    <div class="author-metadata">
+      <div class="author-pseudo">Écrit par <a href="https://kazhnuz.space">Kazhnuz</a></div>
+      <small class="author-date">Le <%= date(post.date, "dddd DD MMMM YYYY, hh:mm:ss") %></small>
+    </div>
+  </div>
+  <%- partial('post/category') %>
+</section>
+
 <footer class="article-footer">
   <% if (post.comments && config.disqus_shortname){ %>
     <a href="<%- post.permalink %>#disqus_thread" class="article-comment-link"><%= __('comment') %></a>
@@ -32,10 +43,6 @@
   <%- partial('post/tag') %>
 </footer>
 
-<% if (!index){ %>
-  <%- partial('post/nav') %>
-<% } %>
-
 <% if (!index && post.comments && config.disqus_shortname){ %>
 <section id="comments">
   <div id="disqus_thread">
diff --git a/src/textes/themes/blog/layout/_partial/post/title.ejs b/src/textes/themes/blog/layout/_partial/post/title.ejs
index 3ea30af..1187779 100644
--- a/src/textes/themes/blog/layout/_partial/post/title.ejs
+++ b/src/textes/themes/blog/layout/_partial/post/title.ejs
@@ -1 +1 @@
-<div class="card-header"><h1><%= post.title %></h1></div>
+<h1 class="page-title"><%= post.title %></h1>
diff --git a/src/textes/themes/blog/layout/index.ejs b/src/textes/themes/blog/layout/index.ejs
index 60a2c68..ffcdbac 100644
--- a/src/textes/themes/blog/layout/index.ejs
+++ b/src/textes/themes/blog/layout/index.ejs
@@ -1 +1,5 @@
-<%- partial('_partial/archive', {pagination: 2, index: true}) %>
\ No newline at end of file
+<div class="toast toast-info" role="toast">
+    <p>Toutes mes derniers textes, j'espère qu'ils vous intéresseront !</p>
+</div>
+
+<%- partial('_partial/archive', {pagination: 2, index: true}) %>
diff --git a/src/textes/themes/blog/layout/layout.ejs b/src/textes/themes/blog/layout/layout.ejs
index 094edc5..318ddd2 100644
--- a/src/textes/themes/blog/layout/layout.ejs
+++ b/src/textes/themes/blog/layout/layout.ejs
@@ -3,11 +3,11 @@
   <div id="container">
     <div id="wrapper">
       <%- partial('_partial/header', null, {cache: !config.relative_link}) %>
-      <div class="container-blog" id="page-content">
-        <section class="mainpane" id="main"><%- body %></section>
+      <div class="container-preview" id="page-content">
         <% if (theme.sidebar && theme.sidebar !== 'bottom'){ %>
           <%- partial('_partial/sidebar', null, {cache: !config.relative_link}) %>
         <% } %>
+        <section class="mainpane" id="main"><%- body %></section>
       </div>
     </div>
     <%- partial('_partial/footer', null, {cache: !config.relative_link}) %>