diff --git a/public/site/models/project.php b/public/site/models/project.php
index 60185b9..23faa6e 100644
--- a/public/site/models/project.php
+++ b/public/site/models/project.php
@@ -2,14 +2,17 @@
 
 class ProjectPage extends Page {
   public function getSteps() {    
+    $steps = [];
 
-    $steps = array_map(function($child) {
-      return [
-        'text' => $child['content']['title'],
-        'value' => $child['content']['stepname'],
-        'index' => $child['content']['stepindex']
+    foreach ($this->children() as $child) {
+      $steps[] = [
+        'text' => $child->title()->value(),
+        'value' => $child->stepName()->value(),
+        'index' => $child->stepIndex()->value(),
+        'modified' => $child->modified('Y-MM-dd'),
+        'uri' => $child->uri()
       ];
-    }, $this->children()->toArray());
+    }
 
     usort($steps, function ($a, $b) {
       return $a['index'] <=> $b['index'];
diff --git a/public/site/templates/client-brief.json.php b/public/site/templates/client-brief.json.php
new file mode 100644
index 0000000..370b498
--- /dev/null
+++ b/public/site/templates/client-brief.json.php
@@ -0,0 +1,9 @@
+<?php
+
+$specificData = [
+  "exampleField" => $page->exampleField(),
+];
+
+$data = array_merge($genericData, $specificData);
+
+echo json_encode($data);
\ No newline at end of file
diff --git a/public/site/templates/client-brief.php b/public/site/templates/client-brief.php
new file mode 100644
index 0000000..4ed6305
--- /dev/null
+++ b/public/site/templates/client-brief.php
@@ -0,0 +1 @@
+<?php snippet('generic-template') ?>
\ No newline at end of file
diff --git a/src/components/inspirations/Header.vue b/src/components/inspirations/Header.vue
index a0bda5f..4523bd9 100644
--- a/src/components/inspirations/Header.vue
+++ b/src/components/inspirations/Header.vue
@@ -4,7 +4,7 @@
     :style="'--image: url(\'' + inspiration.cover + '\')'"
   >
     <h2
-      id="inspiration-title" 
+      id="inspiration-title"
       class="inspiration__title | font-serif | text-lg"
       :class="{ new: inspiration.new }"
     >
diff --git a/src/components/project/brief/AddImages.vue b/src/components/project/ClientBrief/AddImages.vue
similarity index 100%
rename from src/components/project/brief/AddImages.vue
rename to src/components/project/ClientBrief/AddImages.vue
diff --git a/src/components/project/brief/Intro.vue b/src/components/project/ClientBrief/Intro.vue
similarity index 100%
rename from src/components/project/brief/Intro.vue
rename to src/components/project/ClientBrief/Intro.vue
diff --git a/src/components/project/brief/ModeSelection.vue b/src/components/project/ClientBrief/ModeSelection.vue
similarity index 100%
rename from src/components/project/brief/ModeSelection.vue
rename to src/components/project/ClientBrief/ModeSelection.vue
diff --git a/src/components/project/Header.vue b/src/components/project/Header.vue
new file mode 100644
index 0000000..9c0e347
--- /dev/null
+++ b/src/components/project/Header.vue
@@ -0,0 +1,12 @@
+<template>
+  <header class="flex | bg-white | rounded-2xl | p-8 mb-16">
+    <h1 class="font-serif | px-8">{{ title }}</h1>
+    <button class="btn | ml-auto">Demander un RDV</button>
+  </header>
+</template>
+
+<script setup>
+const { title } = defineProps({
+  title: String,
+});
+</script>
diff --git a/src/components/project/ProjectStep.vue b/src/components/project/ProjectStep.vue
index a87567e..3cb090a 100644
--- a/src/components/project/ProjectStep.vue
+++ b/src/components/project/ProjectStep.vue
@@ -5,33 +5,46 @@
     data-status="done"
   >
     <h2 id="votre-brief-label">
-      <span data-icon="votre-brief">Votre brief</span>
+      <span data-icon="votre-brief">{{ step.text }}</span>
     </h2>
     <div class="cards | flow">
       <article class="card">
         <hgroup class="order-last">
-          <h3 class="card__title | font-serif | text-lg">Votre Brief</h3>
+          <h3 class="card__title | font-serif | text-lg">{{ step.text }}</h3>
         </hgroup>
         <div class="card__meta | flex">
-          <time class="card__date | text-grey-700" datetime="2024-06-12"
-            >12 juin 2024</time
-          >
+          <time class="card__date | text-grey-700" datetime="2024-06-12">{{
+            dayjs(step.modified).format("DD MMMM YYYY")
+          }}</time>
         </div>
-        <figure class="card__images" data-count="13">
-          <img
-            src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/6ed93d6950-1725442486/d82f18573c439d6edd434ffca62471a7.png"
-            alt=""
-          />
-          <img
-            src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/7b0fcc5012-1725442486/37a038883c87973036232aa0e43f6da2.png"
-            alt=""
-          />
-          <img
-            src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/1bbe051c5a-1725442486/0c41d3266e9ce2872f30608cceb28239.png"
-            alt=""
-          />
-        </figure>
+        <router-link :to="'/' + step.uri">
+          <figure class="card__images" data-count="13">
+            <img
+              src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/6ed93d6950-1725442486/d82f18573c439d6edd434ffca62471a7.png"
+              alt=""
+            />
+            <img
+              src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/7b0fcc5012-1725442486/37a038883c87973036232aa0e43f6da2.png"
+              alt=""
+            />
+            <img
+              src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/1bbe051c5a-1725442486/0c41d3266e9ce2872f30608cceb28239.png"
+              alt=""
+            />
+          </figure>
+        </router-link>
       </article>
     </div>
   </section>
 </template>
+
+<script setup>
+import dayjs from "dayjs";
+import "dayjs/locale/fr";
+
+dayjs.locale("fr");
+
+const { step } = defineProps({
+  step: Object,
+});
+</script>
diff --git a/src/router/routes.js b/src/router/routes.js
index e2cee27..acef7aa 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -3,6 +3,7 @@ import Notifications from "../views/Notifications.vue";
 import Reunions from "../views/Reunions.vue";
 import Inspirations from "../views/Inspirations.vue";
 import Project from "../views/Project.vue";
+import ClientBrief from "../views/ClientBrief.vue";
 
 const routes = [
   {
@@ -25,6 +26,10 @@ const routes = [
     path: "/projects/:id",
     component: Project,
   },
+  {
+    path: "/projects/:id/client-brief",
+    component: ClientBrief,
+  },
 ];
 
 export default routes;
diff --git a/src/views/ClientBrief.vue b/src/views/ClientBrief.vue
new file mode 100644
index 0000000..e8edc9d
--- /dev/null
+++ b/src/views/ClientBrief.vue
@@ -0,0 +1,25 @@
+<template>
+  <main class="flex flex-col items-stretch | w-full">
+    <Header />
+    <component :is="stepsComponents[currentStep]" @update:step="changeStep" />
+  </main>
+</template>
+<script setup>
+import { ref } from "vue";
+import Header from "../components/project/Header.vue";
+import Intro from "../components/project/ClientBrief/Intro.vue";
+import ModeSelection from "../components/project/ClientBrief/ModeSelection.vue";
+import AddImages from "../components/project/ClientBrief/AddImages.vue";
+
+const stepsComponents = {
+  Intro,
+  ModeSelection,
+  AddImages,
+};
+
+const currentStep = ref("Intro");
+
+function changeStep(stepName) {
+  currentStep.value = stepName;
+}
+</script>
diff --git a/src/views/Project.vue b/src/views/Project.vue
index 7ccb0e0..088cb58 100644
--- a/src/views/Project.vue
+++ b/src/views/Project.vue
@@ -1,16 +1,10 @@
 <template>
   <main class="flex flex-col items-stretch | w-full">
-    <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>
-
-    <!-- <component :is="stepsComponents[currentStep]" @update:step="changeStep" /> -->
-
+    <Header :title="page.content.title" />
     <!-- Kanban: Status Brief Enrichi -->
 
     <div class="kanban">
-      <ProjectStep v-for="step in steps" :key="step" :step="step" />
+      <ProjectStep v-for="step in page.steps" :key="step" :step="step" />
       <!-- <section
         class="flex-1"
         aria-labelledby="votre-brief-label"
@@ -157,31 +151,13 @@
 <script setup>
 import { usePageStore } from "../stores/page";
 import { useUserStore } from "../stores/user";
-import { ref, computed } from "vue";
 import { storeToRefs } from "pinia";
 import ProjectStep from "../components/project/ProjectStep.vue";
-import Intro from "../components/project/brief/Intro.vue";
-import ModeSelection from "../components/project/brief/ModeSelection.vue";
-import AddImages from "../components/project/brief/AddImages.vue";
+import Header from "../components/project/Header.vue";
 
 const { page } = storeToRefs(usePageStore());
 const user = useUserStore().user;
 
-const currentStep = page.value.currentStep;
-const steps = page.value.steps.map((step) => step.value);
-
-// const stepsComponents = {
-//   Intro,
-//   ModeSelection,
-//   AddImages,
-// };
-
-// const currentStep = ref("Intro");
-
-// function changeStep(stepName) {
-//   currentStep.value = stepName;
-// }
-
 function setStepStatus(stepName) {
   const stepIndex = steps.indexOf(stepName);
   const currentIndex = steps.indexOf(currentStep.value);