diff --git a/src/_includes/partials/components/posts-list.njk b/src/_includes/partials/components/posts-list.njk
index b1f4091..7d41009 100644
--- a/src/_includes/partials/components/posts-list.njk
+++ b/src/_includes/partials/components/posts-list.njk
@@ -3,19 +3,24 @@
     {% for item in newsListItems %}
       {% if item.date.getTime() <= global.now %}
         <li class="news-list__item {{ item.data.type }}">
-          <h3 class="news-list__item-heading">
-            <a href="{{ item.url | url }}" class="news-list__link" rel="bookmark">{{ item.data.title }}</a>
-          </h3>
-          <p class="news-list__item-date">
-            {% if item.data.eventDate %}
-            <time datetime="{{ item.data.eventDate | w3DateFilter }}">{{ item.data.eventDate | dateFilter }}</time>
+          <a href="{{ item.url | url }}" class="news-list__link" style="background-image: url({{ item.data.illustration }});">
+            {% if item.data.type == 'event' %}
+              <p class="news-list__item-type">Évènement</p>
             {% else %}
-            <time datetime="{{ item.date | w3DateFilter }}">{{ item.date | dateFilter }}</time>
+              <p class="news-list__item-type">Actualité</p>
             {% endif %}
-            {% if item.data.eventTime %}
-            <time datetime="{{ item.data.eventTime }}">{{ item.data.eventTime }}</time>
-            {% endif %}
-          </p>
+            <h3 class="news-list__item-heading">{{ item.data.title }}</h3>
+            <p class="news-list__item-date">
+              {% if item.data.eventDate %}
+              <time datetime="{{ item.data.eventDate | w3DateFilter }}">{{ item.data.eventDate | dateFilter }}</time>
+              {% else %}
+              <time datetime="{{ item.date | w3DateFilter }}">{{ item.date | dateFilter }}</time>
+              {% endif %}
+              {% if item.data.eventTime %}
+              <time datetime="{{ item.data.eventTime }}">{{ item.data.eventTime }}</time>
+              {% endif %}
+            </p>
+          </a>
         </li>
       {% endif %}
     {% endfor %}
diff --git a/src/scss/components/_posts-list.scss b/src/scss/components/_posts-list.scss
index a5c8554..cc60c75 100644
--- a/src/scss/components/_posts-list.scss
+++ b/src/scss/components/_posts-list.scss
@@ -25,20 +25,32 @@
   }
 
   &__item {
-    display: flex;
-    flex-direction: column;
+    
     background-color: var(--color-primary);
     color: var(--color-dark);
     border-radius: 1rem;
 
-    &.event {
+    &.event,
+    &.event &-type {
       background-color: var(--color-light-blue);
     }
 
+    &-type {
+      margin-bottom: auto;
+      align-self: flex-start;
+      border-radius: 1rem 0;
+      padding: .125rem 1rem;
+      font-size: .875rem;
+      font-weight: 600;
+      background-color: var(--color-primary);
+    }
+
     &-heading {
       font-size: 1.125rem;
-      font-weight: 600;
-      padding: 4.5rem 1.5rem 4rem;
+      font-weight: 400;
+      padding: 1rem 1.5rem;
+      background-color: rgba(0, 0, 0, .65);
+      color: #fff;
     }
 
     &-date {
@@ -47,7 +59,6 @@
       background-color: var(--color-light-gray);
       border-radius: 0 0 1rem 1rem;
       padding: 1rem 1.5rem;
-      margin-top: auto;
       display: flex;
 
       time + time {
@@ -57,6 +68,15 @@
   }
 
   &__link {
+    border-radius: 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    height: 16rem;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+
     &,
     &:visited {
       color: var(--color-dark);
@@ -64,7 +84,9 @@
     }
 
     &:hover {
-      text-decoration: underline;
+      h3 {
+        text-decoration: underline;
+      }
     }
   }
 }