diff --git a/public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/38969543_extrait-de-louis-sullivan-form-follow-function.-de-la-tour-de-bureaux-artistiquement-consideree.pdf.txt b/public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/38969543_extrait-de-louis-sullivan-form-follow-function.-de-la-tour-de-bureaux-artistiquement-consideree.pdf.txt
index d3f57a4..788f452 100644
--- a/public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/38969543_extrait-de-louis-sullivan-form-follow-function.-de-la-tour-de-bureaux-artistiquement-consideree.pdf.txt
+++ b/public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/38969543_extrait-de-louis-sullivan-form-follow-function.-de-la-tour-de-bureaux-artistiquement-consideree.pdf.txt
@@ -12,11 +12,11 @@ Template: document
 
 Comments:
 
-m2u905al:
+m2ucagze:
   pageUri: >
     projects/miss-dior-blooming-bouquet/client-brief
   fileUuid: file://s0lNtRA0Z7ybTCWG
-  filePageTarget: 1
+  filePageIndex: 1
   position:
     x: null
     y: null
@@ -27,22 +27,22 @@ m2u905al:
     email: adrien.payet@outlook.com
     uuid: user://WWjXgPWk
     role: admin
-  date: 2024-10-29T10:31:23+01:00
-  id: m2u905al
-m2u955a7:
+  date: 2024-10-29T12:03:24+01:00
+  id: m2ucagze
+m2ucgaoe:
   pageUri: >
     projects/miss-dior-blooming-bouquet/client-brief
   fileUuid: file://s0lNtRA0Z7ybTCWG
-  filePageTarget: 1
+  filePageIndex: 1
   position:
     x: null
     y: null
   replies: [ ]
-  text: come2
+  text: Deuxième commentaire
   user:
     name: Adrien Payet
     email: adrien.payet@outlook.com
     uuid: user://WWjXgPWk
     role: admin
-  date: 2024-10-29T10:35:16+01:00
-  id: m2u955a7
\ No newline at end of file
+  date: 2024-10-29T12:07:55+01:00
+  id: m2ucgaoe
\ No newline at end of file
diff --git a/public/site/plugins/comments/routes/create.php b/public/site/plugins/comments/routes/create.php
index 282fbe7..4bc0791 100644
--- a/public/site/plugins/comments/routes/create.php
+++ b/public/site/plugins/comments/routes/create.php
@@ -17,7 +17,7 @@ return [
       $newComment = [
         'pageUri' => $data->pageUri,
         'fileUuid' => (string) $file->uuid(),
-        'filePageTarget' => $data->targetPage,
+        'filePageIndex' => $data->filePageIndex,
         'position' => [
           'x' => null,
           'y' => null
@@ -40,7 +40,7 @@ return [
         'comments' => $comments
       ]);
 
-      $user->sendNotification('comments', $newComment);
+      // $user->sendNotification('comments', $newComment);
 
       return getFileData($newFile);
   }
diff --git a/public/site/plugins/notifications/user-methods/read.php b/public/site/plugins/notifications/user-methods/read.php
new file mode 100644
index 0000000..b039807
--- /dev/null
+++ b/public/site/plugins/notifications/user-methods/read.php
@@ -0,0 +1,16 @@
+<?php
+
+return function ($group, $notificationId) {
+  $notifications = Yaml::decode($this->notifications()->value());
+
+  try {
+    $notifications[$group][$notificationId]['isRead'] = true;
+  } catch (\Throwable $th) {
+    //throw $th;
+  }
+  
+  $this->update([
+    "notifications" => $notifications
+  ]);
+  return $notifications;
+};
\ No newline at end of file
diff --git a/public/site/plugins/notifications/user-methods/send.php b/public/site/plugins/notifications/user-methods/send.php
new file mode 100644
index 0000000..dbf9f04
--- /dev/null
+++ b/public/site/plugins/notifications/user-methods/send.php
@@ -0,0 +1,26 @@
+<?php
+
+return function ($group, $data) {
+  foreach (kirby()->users()->not($this) as $otherUser) {
+    try {
+      $notifications = $otherUser->notifications()->isNotEmpty() 
+          ? Yaml::decode($otherUser->notifications()->value())
+          : [];          
+
+      if (!isset($notifications[$group])) {
+        $notifications[$group] = [];
+      }
+
+      
+      $data['isRead'] = false;
+      
+      $notifications[$group][$data['id']] = $data;
+
+      $otherUser->update([
+        'notifications' => $notifications
+      ]);
+    } catch (\Throwable $th) {
+      throw new Exception("Error updating notifications: " . $th->getMessage() . ' line ' . $th->getLine(), 1);
+    }
+  }
+};
\ No newline at end of file
diff --git a/src/components/comments/Comment.vue b/src/components/comments/Comment.vue
new file mode 100644
index 0000000..1bb9be0
--- /dev/null
+++ b/src/components/comments/Comment.vue
@@ -0,0 +1,78 @@
+<template>
+  <article class="comment | flow" :data-status="setStatus(comment)">
+    <header>
+      <p>
+        <strong>{{ comment.user.name ?? comment.user.email }}</strong>
+        <template v-if="commentIndex">
+          <span class="comment__id">#{{ commentIndex }}</span>
+          •
+        </template>
+        <span class="comment__page">Page {{ comment.filePageIndex }}</span>
+        <time :datetime="dayjs(comment.date).format('YYYY-MM-DD')">{{
+          formatDate(comment.date)
+        }}</time>
+      </p>
+    </header>
+    <p class="comment__body">
+      {{ comment.text }}
+    </p>
+    <footer v-if="comment.replies?.length > 0" class="comment__replies">
+      <span>{{ comment.replies.length }} réponse</span>
+    </footer>
+  </article>
+</template>
+
+<script setup>
+import dayjs from "dayjs";
+import "dayjs/locale/fr";
+
+dayjs.locale("fr");
+
+const { comment, commentIndex } = defineProps({
+  comment: Object,
+  commentIndex: Number,
+});
+
+//  Functions
+function setStatus(comment) {
+  try {
+    if (!user?.notifications?.comments[comment.id].isRead) {
+      return "unread";
+    } else {
+      return undefined;
+    }
+  } catch (error) {
+    return undefined;
+  }
+}
+
+function formatDate(date) {
+  const todayNumber = parseInt(dayjs().format("YYMMD"));
+  const dateNumber = parseInt(dayjs(date).format("YYMMD"));
+
+  if (dateNumber === todayNumber) {
+    return "Aujourd'hui";
+  }
+
+  if (dateNumber === todayNumber - 1) {
+    return "hier";
+  }
+
+  return dayjs(date).format("D MMM YY");
+}
+
+function closeAddField() {
+  isAddOpen.value = false;
+  newCommentText.value = "";
+}
+
+async function readNotification(notificationId) {
+  const newNotifications = await api.readNotification(
+    user.uuid,
+    "comments",
+    notificationId
+  );
+
+  user.notifications = newNotifications;
+}
+</script>
diff --git a/src/components/comments/Comments.vue b/src/components/comments/Comments.vue
index e4a34b0..72fdf74 100644
--- a/src/components/comments/Comments.vue
+++ b/src/components/comments/Comments.vue
@@ -2,87 +2,38 @@
   <aside id="comments-container" aria-labelledby="comments-label">
     <h2 id="comments-label" class="sr-only">Commentaires</h2>
     <div class="comments | flow">
-      <template v-if="!openedComment">
-        <!-- TODO: faire un composant comment -->
-        <article
-          v-for="(comment, commentIndex) in Object.values(comments).reverse()"
-          :key="commentIndex"
-          class="comment | flow"
-          :data-status="setStatus(comment)"
-          @click="open(comment)"
-        >
-          <header>
-            <p>
-              <strong>{{ comment.user.name ?? comment.user.email }}</strong>
-              <span class="comment__id">#{{ commentIndex + 1 }}</span> •
-              <span class="comment__page">Page {{ pageIndex }}</span>
-              <time :datetime="dayjs(comment.date).format('YYYY-MM-DD')">{{
-                formatDate(comment.date)
-              }}</time>
-            </p>
-          </header>
-          <p class="comment__body">
-            {{ comment.text }}
-          </p>
-          <!-- TODO: à dynamiser (affichage ou non si replies + nombre de replies)-->
-          <footer class="comment__replies">
-            <span>1 réponse</span>
-          </footer>
-        </article>
-      </template>
-      <template v-else>
-        <!-- TODO: mettre la bonne cible pour to: -->
-        <router-link
-          :to="'/' + page.parent"
-          class="btn | justify-start w-full | bg-white-10 text-white | px-8"
-          data-icon="chevron-single-left"
-        >
-          <span>Retour à la liste</span>
-        </router-link>
-        <!-- TODO: utiliser le composant comment ici -->
-        <article 
-          class="comment"
-          data-opened="true"
-        >
-          <header>
-            <p>
-              <strong>{{ openedComment.user.name ?? openedComment.user.email }}</strong>
-              <span class="comment__id">#{{ commentIndex + 1 }}</span> •
-              <span class="comment__page">Page {{ pageIndex }}</span>
-              <time :datetime="dayjs(openedComment.date).format('YYYY-MM-DD')">{{
-                formatDate(openedComment.date)
-              }}</time>
-            </p>
-          </header>
-          <p class="comment__body">
-            {{ openedComment.text }}
-          </p>
-          <footer class="comment__replies">
-            <span>1 réponse</span>
-          </footer>
-        </article>
-        <div class="replies">
-          <!-- TODO: utiliser le composant comment ici -->
-          <article 
-            v-for="comment in openedComment.replies"
-            class="comment reply"
+      <template v-if="comments">
+        <template v-if="!openedComment">
+          <Comment
+            v-for="(comment, commentIndex) in Object.values(comments).reverse()"
+            :comment="comment"
+            :commentIndex="commentIndex + 1"
+            :key="comment.id"
+            @click="openedComment = comment"
+          />
+        </template>
+        <template v-else>
+          <button
+            class="btn | justify-start w-full | bg-white-10 text-white | px-8"
+            data-icon="chevron-single-left"
+            @click="openedComment = null"
           >
-            <header>
-              <p>
-                <strong>{{ comment.user.name ?? comment.user.email }}</strong>
-                <span class="comment__id">#{{ commentIndex + 1 }}</span> •
-                <span class="comment__page">Page {{ pageIndex }}</span>
-                <time :datetime="dayjs(comment.date).format('YYYY-MM-DD')">{{
-                  formatDate(comment.date)
-                }}</time>
-              </p>
-            </header>
-            <p class="comment__body">
-              {{ comment.text }}
-            </p>
-          </article>
-        </div>
+            <span>Retour à la liste</span>
+          </button>
+          <Comment :comment="openedComment" />
+          <div v-if="openedComment?.replies?.length > 0" class="replies">
+            <Comment
+              v-for="(reply, commentIndex) in Object.values(
+                openedComment.replies
+              ).reverse()"
+              :comment="reply"
+              :commentIndex="commentIndex + 1"
+              :key="reply.id"
+            />
+          </div>
+        </template>
       </template>
+      <template v-else> état aucun commentaire </template>
     </div>
     <button
       v-if="!openedComment && !isAddOpen"
@@ -93,7 +44,7 @@
       Ajouter un commentaire
     </button>
     <button
-      v-if="openedComment && !isReplyOpen"
+      v-else
       id="reply-comment"
       class="btn btn--white-20 | justify-start w-full | text-white-50"
       @click="isReplyOpen = true"
@@ -135,6 +86,7 @@ import { ref } from "vue";
 import { useUserStore } from "../../stores/user";
 import { usePageStore } from "../../stores/page";
 import { useApiStore } from "../../stores/api";
+import Comment from "./Comment.vue";
 
 dayjs.locale("fr");
 
@@ -160,7 +112,7 @@ async function addComment(event) {
   const date = dayjs().format();
   const comment = {
     pageUri: page.uri + "/client-brief",
-    targetPage: currentPageIndex,
+    filePageIndex: currentPageIndex,
     fileName: file.name,
     userUuid: user.uuid,
     text: newCommentText.value,
@@ -172,46 +124,4 @@ async function addComment(event) {
   isAddOpen.value = false;
   emits("update:file", newFile);
 }
-
-function formatDate(date) {
-  const todayNumber = parseInt(dayjs().format("YYMMD"));
-  const dateNumber = parseInt(dayjs(date).format("YYMMD"));
-
-  if (dateNumber === todayNumber) {
-    return "Aujourd'hui";
-  }
-
-  if (dateNumber === todayNumber - 1) {
-    return "hier";
-  }
-
-  return dayjs(date).format("D MMM YY");
-}
-
-function closeAddField() {
-  isAddOpen.value = false;
-  newCommentText.value = "";
-}
-
-function setStatus(comment) {
-  try {
-    if (!user?.notifications?.comments[comment.id].isRead) {
-      return "unread";
-    } else {
-      return undefined;
-    }
-  } catch (error) {
-    return undefined;
-  }
-}
-
-async function readNotification(notificationId) {
-  const newNotifications = await api.readNotification(
-    user.uuid,
-    "comments",
-    notificationId
-  );
-
-  user.notifications = newNotifications;
-}
 </script>