diff --git a/.eleventy.js b/.eleventy.js
index 390df22..89c75ec 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -45,6 +45,8 @@ module.exports = function(eleventyConfig) {
 
   eleventyConfig.setLibrary('md', markdownIt(markdownItOptions).use(markdownItAttrs))
 
+  eleventyConfig.setFrontMatterParsingOptions({ excerpt: true });
+
   return {
     dir: {
       input: 'src'
diff --git a/.eleventyignore b/.eleventyignore
index 0e6ebcd..c8f3f40 100644
--- a/.eleventyignore
+++ b/.eleventyignore
@@ -1,6 +1,5 @@
 src/familles/
 src/familles.njk
 src/infos/on-parle-de-nous.md
-src/infos/actualites.md
 src/infos/historique.md
 src/infos/idees-recues/idees-recues-a-faire.md
diff --git a/src/_includes/actualites.njk b/src/_includes/actualites.njk
deleted file mode 100644
index 490957e..0000000
--- a/src/_includes/actualites.njk
+++ /dev/null
@@ -1,15 +0,0 @@
-{% set actualites = [] %}
-<ol class="liste-familles">
-    {% for actualite in actualites %}
-        <li class="famille-item{% if actualite.url == url %} famille-item-active{% endif %}">
-            <a href="{{ actualite.url | url }}" class="famille-link">
-                {% if actualite.data.nom %}
-                    {{ actualite.data.nom }}
-                {% else %}
-                    <code>{{ actualite.url }}</code>
-                {% endif %}
-            </a>
-            <time class="liste-famille-date" datetime="{{ actualite.date | htmlDateString }}">{{ actualite.date | readableDate }}</time>
-        </li>
-    {% endfor %}
-</ol>
diff --git a/src/_includes/layouts/actualite.njk b/src/_includes/layouts/actualite.njk
index 8ac83c3..74ba8d8 100644
--- a/src/_includes/layouts/actualite.njk
+++ b/src/_includes/layouts/actualite.njk
@@ -6,3 +6,6 @@ templateClass: tmpl-post
 <time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time>
 
 <p>{{ content | safe }}</p>
+
+<img class="max-w-96 mx-auto mt-8 px-16" src="{{ image }}" />
+
diff --git a/src/actualites.njk b/src/actualites.njk
new file mode 100644
index 0000000..5262ece
--- /dev/null
+++ b/src/actualites.njk
@@ -0,0 +1,25 @@
+---
+title: Actualités
+layout: layouts/base.njk
+eleventyNavigation:
+  key: Actualités
+  order: 2
+---
+
+{% set liste = collections.actualites %}
+
+<ol class="lg:grid lg:gap-4 lg:grid-cols-3 flex">
+  {% for actualite in liste %}
+    <li class="{% if actualite.url == url %} famille-item-active{% endif %}">
+      <a href="{{ actualite.url | url }}" class="no-underline">
+        <div class="flex flex-col border-2 border-amber-900 bg-amber-900 rounded-lg m-2 text-white drop-shadow-md">
+          <span class="m-2 font-bold">{{ actualite.data.title }}</span>
+          <img src="{{actualite.data.image}}" />
+          <blockquote class="text-sm m-2">{{ actualite.data.page.excerpt  }}</blockquote>
+          <time class="bg-white text-amber-800 rounded-b-lg px-4 py-1 text-center" datetime="{{ actualite.date | htmlDateString }}">{{ actualite.date | readableDate }}</time>
+        </div>
+      </a>
+    </li>
+  {% endfor %}
+</ol>
+
diff --git a/src/actualites/2022-07-25-choix-avocat.md b/src/actualites/2022-07-25-choix-avocat.md
index 5b97f2b..7189069 100644
--- a/src/actualites/2022-07-25-choix-avocat.md
+++ b/src/actualites/2022-07-25-choix-avocat.md
@@ -1,8 +1,7 @@
 ---
-title: 'Nous publions un guide pour aider à choisir un avocat'
-metaTitle: 'Nous publions un guide pour aider à choisir un avocat'
-metaDesc: 'Nous publions un guide pour aider à choisir un avocat'
-permalink: /actualites/2022-07-25/choix-avocat/
+title: Nous publions un guide pour aider à choisir un avocat
+metaTitle: Nous publions un guide pour aider à choisir un avocat
+metaDesc: Nous publions un guide pour aider à choisir un avocat
 image: /actualites/images/choix-avocat.jpg
 date: 2022-07-25T11:00:00.000Z
 tags:
@@ -11,8 +10,9 @@ tags:
 
 De nombreuses familles confrontées à un refus d’autorisation doivent recourir à  un.e avocat.e pour défendre leur droit à instruire leur(s) enfant(s) hors école. Or si Internet regorge de guides pour aider à choisir un.e avocat.e, aucun n’a été pensé pour notre situation spécifique et inédite...
 
+---
+
 NonSco’llectif s'est penché sur la question et partage ici son point de vue, espérant faciliter cette décision pour les autres familles, collectifs et associations.
 
 [Ouvrir](/dl/Guide-Choix-avocat-NonScollectif.pdf){.centered-button target=_blank}
 
-![](/actualites/images/choix-avocat.jpg){.max-w-96 .mx-auto .mt-8 .px-16}
diff --git a/src/index.njk b/src/index.njk
index 2052468..bf5cd58 100644
--- a/src/index.njk
+++ b/src/index.njk
@@ -30,3 +30,23 @@ layout: layouts/home.njk
 
 Dans les médias et sur les réseaux, on <a href="/on-parle-de-nous">parle de nous</a> !
 #}
+
+{% set liste = collections.actualites %}
+
+<ol class="flex flex-col">
+    {% for actualite in liste %}
+        <li class="{% if actualite.url == url %} famille-item-active{% endif %}">
+            <a href="{{ actualite.url | url }}" class="no-underline">
+                <div class="flex flex-col md:flex-row bg-amber-900 rounded-xl m-2 text-white drop-shadow-md p-0 overflow-hidden relative">
+                    <time class="absolute bottom-0 text-bold text-sm right-0 bg-white text-amber-800 px-4 py-1 text-center" datetime="{{ actualite.date | htmlDateString }}">{{ actualite.date | readableDate }}</time>
+                    <img class="hidden  w-48 md:block  md:rounded-none mx-auto" src="{{actualite.data.image}}" />
+                    <div class="flex flex-col">
+                        <span class="m-2 font-bold">{{ actualite.data.title }}</span>
+                        <blockquote class="text-sm m-2">{{ actualite.data.page.excerpt  }}</blockquote>
+                    </div>
+                </div>
+            </a>
+        </li>
+    {% endfor %}
+</ol>
+
diff --git a/src/infos/actualites.md b/src/infos/actualites.md
deleted file mode 100644
index 5af86bb..0000000
--- a/src/infos/actualites.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: Actualités
-permalink: /actualites/
-eleventyNavigation:
-  key: Actualités
-  order: 1
----
-
-# Actualités
-
-Annonce des actions, annonce des sorties de nouvelles vidéos, nouveaux témoignages, etc.