diff --git a/src/assets/css/src/2.blocks.card.css b/src/assets/css/src/2.blocks.card.css
index b99aae7..bfcd76d 100644
--- a/src/assets/css/src/2.blocks.card.css
+++ b/src/assets/css/src/2.blocks.card.css
@@ -15,15 +15,21 @@
   color: currentColor;
 }
 
+.card__meta {
+  font-size: var(--text-sm);
+  margin-bottom: var(--space-16);
+}
+
 .card__images {
   position: relative;
   width: 100%;
   border: 4px solid var(--color-grey-50);
   border-radius: var(--rounded-2xl);
   overflow: hidden;
-  margin: var(--space-16) 0;
+  margin-bottom: var(--space-16);
+  max-height: 13.75rem; /* 220px */
 }
-.card__images::after {
+.card__images[data-count]::after {
   content: '+'attr(data-count);
   position: absolute;
   bottom: var(--space-8);
diff --git a/src/views/Project.vue b/src/views/Project.vue
index a0ed6d9..65ab117 100644
--- a/src/views/Project.vue
+++ b/src/views/Project.vue
@@ -1,20 +1,24 @@
 <template>
   <main>
-    <header class="flex | bg-white | rounded-2xl | p-8">
+    <header class="flex | bg-white | rounded-2xl | p-8 mb-16">
       <h1 class="font-serif | px-8">{{ page.content.title }}</h1>
       <button class="btn | ml-auto">Demander un RDV</button>
     </header>
-    <div class="flex-columns">
-      <section aria-labelledby="votre-brief-label" data-status="past">
-        <h2 id="votre-brief-label" data-icon="">Votre brief</h2>
+    <div class="kanban">
+      <section 
+        class="flow"
+        aria-labelledby="votre-brief-label"
+        data-status="past"
+      >
+        <h2 id="votre-brief-label">
+          <span data-icon="">Votre brief</span>
+        </h2>
         <article class="card">
           <hgroup class="order-last">
             <h3 class="card__title | font-serif | text-lg">Votre Brief</h3>
           </hgroup>
-          <div class="flex">
-            <time class="card__date | text-grey-700" datetime="2024-06-12"
-              >12 juin 2024</time
-            >
+          <div class="card__meta | flex">
+            <time class="card__date | text-grey-700" datetime="2024-06-12">12 juin 2024</time>
           </div>
           <figure class="card__images" data-count="13">
             <img
@@ -32,17 +36,21 @@
           </figure>
         </article>
       </section>
-      <section aria-labelledby="offre-commerciale-label" data-status="past">
-        <h2 id="offre-commerciale-label" data-icon="">Offre Commerciale</h2>
+      <section 
+        class="flow"
+        aria-labelledby="offre-commerciale-label"
+        data-status="past"
+      >
+        <h2 id="offre-commerciale-label">
+          <span data-icon="">Offre Commerciale</span>
+        </h2>
         <article class="card">
           <hgroup class="order-last">
             <h3 class="card__title | font-serif | text-lg">Offre - 2</h3>
             <p class="text-primary | font-medium">4 commentaires</p>
           </hgroup>
-          <div class="flex">
-            <time class="card__date | text-grey-700" datetime="2024-06-12"
-              >12 juin 2024</time
-            >
+          <div class="card__meta | flex">
+            <time class="card__date | text-grey-700" datetime="2024-06-12">12 juin 2024</time>
             <span class="text-primary | font-medium | ml-auto">Validé</span>
           </div>
           <figure class="card__images">
@@ -60,17 +68,40 @@
             />
           </figure>
         </article>
+        <article class="card">
+          <hgroup class="order-last">
+            <h3 class="card__title | font-serif | text-lg">Offre - 3</h3>
+            <p class="text-primary | font-medium">4 commentaires</p>
+          </hgroup>
+          <div class="card__meta | flex">
+            <time class="card__date | text-grey-700" datetime="2024-06-12">12 juin 2024</time>
+          </div>
+        </article>
+        <article class="card">
+          <hgroup class="order-last">
+            <h3 class="card__title | font-serif | text-lg">Offre Initiale</h3>
+            <p class="text-primary | font-medium">4 commentaires</p>
+          </hgroup>
+          <div class="card__meta | flex">
+            <time class="card__date | text-grey-700" datetime="2024-06-12">12 juin 2024</time>
+          </div>
+        </article>
       </section>
-      <section aria-labelledby="brief-enrichi-label" data-status="past">
-        <h2 id="brief-enrichi-label" data-icon="">Brief Enrichi</h2>
+      <section 
+        class="flow"
+        aria-labelledby="brief-enrichi-label"
+        data-status="past"
+        >
+        <h2 id="brief-enrichi-label">
+          <span data-icon="">Brief Enrichi</span>
+        </h2>
         <article class="card">
           <hgroup class="order-last">
             <h3 class="card__title | font-serif | text-lg">Brief Enrichi</h3>
+            <p class="text-primary | font-medium">4 commentaires</p>
           </hgroup>
-          <div class="flex">
-            <time class="card__date | text-grey-700" datetime="2024-06-12"
-              >12 juin 2024</time
-            >
+          <div class="card__meta | flex">
+            <time class="card__date | text-grey-700" datetime="2024-06-12">12 juin 2024</time>
             <span class="text-primary | font-medium | ml-auto">Validé</span>
           </div>
           <figure class="card__images" data-count="15">
@@ -90,18 +121,20 @@
         </article>
       </section>
       <section
+        class="flow"
         aria-labelledby="echantillon-virtuel-label"
         data-status="current"
       >
-        <h2 id="echantillon-virtuel-label" data-icon="">Échantillon Virtuel</h2>
+        <h2 id="echantillon-virtuel-label">
+          <span data-icon="">Échantillon Virtuel</span>
+        </h2>
         <article class="card">
           <hgroup class="order-last">
             <h3 class="card__title | font-serif | text-lg">Rendu 360°</h3>
+            <p class="text-primary | font-medium">4 commentaires</p>
           </hgroup>
-          <div class="flex">
-            <time class="card__date | text-grey-700" datetime="2024-06-12"
-              >12 juin 2024</time
-            >
+          <div class="card__meta | flex">
+            <time class="card__date | text-grey-700" datetime="2024-06-12">12 juin 2024</time>
           </div>
           <figure class="card__images" data-count="13">
             <img
@@ -133,4 +166,74 @@ const { page } = storeToRefs(usePageStore());
 const user = useUserStore().user;
 </script>
 
-<style scope></style>
+<style scope>
+.kanban {
+  --header-height: 2.25rem; /* 36px */
+  --header-bg-color: var(--color-grey-200);
+  --header-title-bg-color: var(--color-grey-700);
+  --gap: var(--gutter);
+  position: relative;
+  display: flex;
+  gap: var(--gap);
+  overflow-y: auto;
+  margin: 0 calc(-1 * var(--gutter));
+  padding: 0 var(--gutter);
+}
+.kanban > section {
+  flex-grow: 1;
+  min-width: 20rem;
+}
+
+.kanban > section h2 {
+  position: relative;
+  background-color: var(--header-bg-color);
+  border-radius: var(--rounded-md);
+  font-size: var(--text-sm);
+  height: var(--header-height); 
+}
+.kanban > section h2 > span {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--space-8);
+  background-color: var(--header-title-bg-color);
+  color: var(--color-white);
+  height: 100%;
+  width: fit-content;
+  padding: 0 var(--space-12);
+  border-top-left-radius: inherit;
+  border-bottom-left-radius: inherit;
+  font-weight: 500;
+}
+.kanban > section + section h2::before {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  top: calc(var(--header-height) / 2 - 1.5px);
+  right: 100%;
+  width: var(--gap);
+  height: 3px;
+  background-color: var(--color-grey-200);
+  z-index: -1;
+}
+
+[data-status="past"] h2::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: var(--space-4);
+  bottom: 0;
+  display: inline-block;
+  width: var(--icon-size, var(--header-height));
+  height: var(--icon-size, var(--header-height));
+  background: var(--icon-color, currentColor);
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: var(--icon-size, 1rem);
+  mask-image: var(--icon, var(--icon-check));
+}
+[data-status="current"] {
+  --header-bg-color: var(--color-primary-20);
+  --header-title-bg-color: var(--color-primary);
+}
+</style>