diff --git a/api/src/Controllers/ChatController.php b/api/src/Controllers/ChatController.php
index f20b070f..aae984cf 100644
--- a/api/src/Controllers/ChatController.php
+++ b/api/src/Controllers/ChatController.php
@@ -3,14 +3,13 @@
 namespace Matcha\Api\Controllers;
 
 use Flight;
-use Matcha\Api\Controllers\Notifications\NotificationType;
+use Matcha\Api\Enums\NotificationType;
 use Matcha\Api\Model\Message;
-use Matcha\Api\Model\Notification;
 use Matcha\Api\Model\User;
 use Matcha\Api\Resources\MatchUserResource;
 use Matcha\Api\Resources\MessageResource;
 use Matcha\Api\Validator\Validator;
-use PDO;
+use Predis\Client;
 
 class ChatController
 {
@@ -89,7 +88,7 @@ public function store(string $username): void
 
         $saved = $message->save();
 
-        $redis = new \Predis\Client([
+        $redis = new Client([
                 'scheme' => 'tcp',
                 'host'   => 'redis',
                 'port'   => 6379,
@@ -107,6 +106,11 @@ public function store(string $username): void
                         'created_at' => $saved->created_at,
                     ],
             ]));
+
+            Flight::notifier()->notify($user, [
+                'type' => NotificationType::MESSAGE,
+                'message' => "Vous avez recus un message de " . ucfirst(Flight::user()->first_name),
+            ], private: false);
         } catch (\Exception $e) {
             error_log('Redis publish failed: ' . $e->getMessage());
         }
diff --git a/api/src/Controllers/LikeController.php b/api/src/Controllers/LikeController.php
index 4d8c0bc7..ba88c5e8 100644
--- a/api/src/Controllers/LikeController.php
+++ b/api/src/Controllers/LikeController.php
@@ -3,27 +3,37 @@
 namespace Matcha\Api\Controllers;
 
 use Flight;
+use Matcha\Api\Enums\NotificationType;
 use Matcha\Api\Model\User;
 
 class LikeController
 {
     public function store(string $username)
     {
-        $target = User::find(['username' => $username]);
+        /** @var User $me */
         $me = Flight::user();
+        $target = User::find(['username' => $username]);
 
         if (is_null($target) || $target->isBlocking($me)) {
             Flight::json(['message' => 'User not found'], 404);
             return;
         }
 
-        Flight::user()->like($target);
+        $me->like($target);
 
-        Flight::notifier()->publish("user/" . $target->id . "/notifications", [
-            'type' => 'like',
-            'message' => Flight::user()->username . " has liked your profile",
-        ], private: false);
+        if ($target->hasMatch($me->username)) {
+            $notif = [
+                'type' => NotificationType::MATCH,
+                'message' => 'Vous avez match avec ' . $me->first_name . " ! Ecrivez lui un message !",
+            ];
+        } else {
+            $notif = [
+                'type' => NotificationType::LIKE,
+                'message' => ucfirst($me->first_name) . ' vous a like !',
+            ];
+        }
 
+        Flight::notifier()->notify($target, $notif, private: false);
         Flight::json([], 201);
     }
 
@@ -41,7 +51,18 @@ public function destroy(string $username)
             return;
         }
 
-        Flight::user()->unlike($user);
+        /** @var User $me */
+        $me = Flight::user();
+
+        if ($user->hasMatch($me->username)) {
+            Flight::notifier()->notify($user, [
+                'type' => NotificationType::MESSAGE,
+                'message' => "Finalement " . ucfirst($me->first_name) . " vous a unlike...",
+            ], private: false);
+        }
+
+        $me->unlike($user);
+
         Flight::json([], 203);
     }
 }
diff --git a/api/src/Controllers/Notifications/NotificationsController.php b/api/src/Controllers/Notifications/NotificationsController.php
index d9047001..8e3f130b 100644
--- a/api/src/Controllers/Notifications/NotificationsController.php
+++ b/api/src/Controllers/Notifications/NotificationsController.php
@@ -4,19 +4,10 @@
 
 use Flight;
 use Matcha\Api\Model\Notification;
-use Matcha\Api\Model\User;
 use Matcha\Api\Resources\NotificationsResource;
-use Matcha\Api\Validator\Validator;
 
 class NotificationsController
 {
-    private array $contents = [
-        NotificationType::MATCH => '{name} has matched you',
-        NotificationType::LIKE => '{name} has liked you',
-        NotificationType::UNLIKE => '{name} has unliked you',
-        NotificationType::VIEW => '{name} has viewed you',
-        NotificationType::MESSAGE => '{name} sent you a message',
-    ];
 
     public function index(): void
     {
@@ -29,43 +20,10 @@ public function index(): void
         );
     }
 
-    public function store(string $username): void
-    {
-        Validator::required([
-            'type',
-        ]);
-
-        $me = Flight::user();
-        $request = Flight::request();
-
-        if ($request->data->type == NotificationType::UNLIKE
-            && !$me->hasMatch($username)) {
-            Flight::json([
-                'message' => 'Forbidden',
-            ], 403);
-            return;
-        }
-
-        $user = User::find(['username' => $username]);
-
-        if ($request->data->type == NotificationType::LIKE && $me->likedBy($user)) {
-            $request->data->type = NotificationType::MATCH;
-        }
-
-        $notification = Notification::to(
-            $me,
-            $user,
-            $request->data->type,
-            str_replace('{name}', $user->first_name, $this->contents[strtoupper($request->data->type)]),
-        );
-
-        Flight::json(new NotificationsResource($notification), 201);
-    }
-
-    public function viewed(int $id): void
+    public function viewed(string $id): void
     {
         $notification = Notification::find([
-            'id' => $id,
+            'id' => intval($id),
         ]);
 
         if (is_null($notification) || $notification->user_id !== Flight::user()->id) {
@@ -76,13 +34,19 @@ public function viewed(int $id): void
         }
 
         if ($notification->view) {
-            Flight::json([], 204);
+            Flight::json([
+                'success' => true,
+                'message' => 'Notification updated successfully.',
+            ]);
             return;
         }
 
         $notification->view = true;
 
         $notification->save();
-        Flight::json([], 204);
+        Flight::json([
+            'success' => true,
+            'message' => 'Notification updated successfully.',
+        ]);
     }
 }
diff --git a/api/src/Controllers/ViewController.php b/api/src/Controllers/ViewController.php
index 179c6008..fd2fa1d3 100644
--- a/api/src/Controllers/ViewController.php
+++ b/api/src/Controllers/ViewController.php
@@ -3,13 +3,16 @@
 namespace Matcha\Api\Controllers;
 
 use Flight;
+use Matcha\Api\Enums\NotificationType;
 use Matcha\Api\Model\User;
 
 class ViewController
 {
     public function store(string $username)
     {
-        if (Flight::user()->username == $username) {
+        /** @var User $me */
+        $me = Flight::user();
+        if ($me->username == $username) {
             Flight::json([], 422);
             return;
         }
@@ -26,7 +29,13 @@ public function store(string $username)
             return;
         }
 
-        Flight::user()->view($user);
+        $me->view($user);
+
+        Flight::notifier()->notify($user, [
+            'type' => NotificationType::VIEW,
+            'message' => ucfirst($me->first_name) . " a consulter votre profile."
+        ], private: false);
+
         Flight::json([], 204);
     }
 }
diff --git a/api/src/Controllers/Notifications/NotificationType.php b/api/src/Enums/NotificationType.php
similarity index 84%
rename from api/src/Controllers/Notifications/NotificationType.php
rename to api/src/Enums/NotificationType.php
index 29460869..c0ebf84e 100644
--- a/api/src/Controllers/Notifications/NotificationType.php
+++ b/api/src/Enums/NotificationType.php
@@ -1,8 +1,8 @@
 <?php
 
-namespace Matcha\Api\Controllers\Notifications;
+namespace Matcha\Api\Enums;
 
-class NotificationType
+enum NotificationType: string
 {
     public const MESSAGE = 'MESSAGE';
     public const LIKE = 'LIKE';
diff --git a/api/src/Resources/NotificationsResource.php b/api/src/Resources/NotificationsResource.php
index 4a6efce0..4232ddff 100644
--- a/api/src/Resources/NotificationsResource.php
+++ b/api/src/Resources/NotificationsResource.php
@@ -18,6 +18,8 @@ public function jsonSerialize(): array
             'type' => $this->model->type,
             'data' => [
                 'username' => $user->username,
+                'first_name' => $user->first_name,
+                'last_name' => $user->last_name,
                 'avatar' => $user->getAvatar(),
                 'content' => $this->model->content,
                 'view' => $this->model->view,
diff --git a/api/src/Services/MercurePublisher.php b/api/src/Services/MercurePublisher.php
index 4d9332fd..7697412d 100644
--- a/api/src/Services/MercurePublisher.php
+++ b/api/src/Services/MercurePublisher.php
@@ -3,6 +3,10 @@
 namespace Matcha\Api\Services;
 
 use Firebase\JWT\JWT;
+use Flight;
+use Matcha\Api\Model\Notification;
+use Matcha\Api\Model\User;
+use Matcha\Api\Resources\NotificationsResource;
 
 class MercurePublisher
 {
@@ -10,24 +14,38 @@ class MercurePublisher
 
     public function __construct(
         private string $jwtKey,
-    ) {}
+    )
+    {
+    }
 
-    public function publish(string $topic, array $data, bool $private = false): void
+    public function publish(string $topic, array|object $data, bool $private = false): void
     {
         $jwt = JWT::encode(['mercure' => ['publish' => ['*']]], $this->jwtKey, 'HS256');
 
         $body = [
             'topic' => $topic,
-            'data'  => json_encode($data),
+            'data' => json_encode($data),
         ];
         if ($private) {
             $body['private'] = 'on';
         }
 
         file_get_contents(self::HUB_URL, false, stream_context_create(['http' => [
-            'method'  => 'POST',
-            'header'  => "Content-type: application/x-www-form-urlencoded\r\nAuthorization: Bearer $jwt",
+            'method' => 'POST',
+            'header' => "Content-type: application/x-www-form-urlencoded\r\nAuthorization: Bearer $jwt",
             'content' => http_build_query($body),
         ]]));
     }
+
+    public function notify(User $user, array $data, bool $private = false): void
+    {
+        $me = Flight::user();
+        $notification = Notification::to($me, $user, $data['type'], $data['message']);
+
+        $this->publish(
+            "user/" . $user->id . "/notifications",
+            new NotificationsResource($notification),
+            $private
+        );
+    }
 }
\ No newline at end of file
diff --git a/api/src/routes.php b/api/src/routes.php
index b7f26206..ebc60e39 100644
--- a/api/src/routes.php
+++ b/api/src/routes.php
@@ -74,8 +74,6 @@
 
         Flight::route('POST /view', [ViewController::class, 'store']);
 
-        Flight::route('POST /notifications', [NotificationsController::class, 'store']);
-
         Flight::route('POST /report', [ReportController::class, 'store']);
     });
 
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index caf76f8c..b9a39bd1 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -8,9 +8,12 @@ import NavBar from '@/components/layout/NavBar.vue'
 import { useAuthStore } from '@/store/useAuthStore'
 import { storeToRefs } from 'pinia'
 import CompleteProfileDialog from '@/components/CompleteProfileDialog.vue'
+import { useNotificationStore } from '@/store/useNotificationStore'
+import type { Notifications } from '@/api/notifications'
 
 const mode = useColorMode()
 const authStore = useAuthStore()
+const notifications = useNotificationStore()
 const { isAuthenticated, user } = storeToRefs(authStore)
 
 let eventSource: EventSource | null = null
@@ -21,11 +24,13 @@ function openNotifications(userId: number | string) {
     `/api/.well-known/mercure?topic=${encodeURIComponent(`user/${userId}/notifications`)}`,
   )
   eventSource.onmessage = event => {
-    const data = JSON.parse(event.data)
-    toast.info(data.type, {
-      description: data.message,
+    const notif: Notifications = JSON.parse(event.data)
+    toast.info(notif.type, {
+      description: notif.data.content,
       closeButton: true,
     })
+
+    notifications.notifications.push(notif)
   }
 }
 
@@ -49,6 +54,7 @@ onMounted(async () => {
 
   if (!authStore.user && localStorage.getItem('jwt')) {
     await authStore.fetchMe()
+    await notifications.fetchNotifications()
   }
 })
 
diff --git a/frontend/src/api/notifications.ts b/frontend/src/api/notifications.ts
index c1771748..77f634a1 100644
--- a/frontend/src/api/notifications.ts
+++ b/frontend/src/api/notifications.ts
@@ -1,8 +1,24 @@
 import { ApiClient } from '@/api/client'
 
+export interface Notifications {
+  id: number
+  type: string
+  data: {
+    username: string
+    first_name: string
+    last_name: string
+    avatar: string
+    content: string
+    view: boolean
+    created_at: string
+  }
+}
+
 export const notificationsApi = {
   async getMyNotifications() {
-    return ApiClient.get('/users/me/notifications').then(res => res.json())
+    return ApiClient.get<Notifications[]>('/users/me/notifications').then(res =>
+      res.json(),
+    )
   },
 
   async markAsViewed(notificationId: number) {
@@ -10,14 +26,4 @@ export const notificationsApi = {
       `/users/me/notifications/${notificationId}/view`,
     ).then(res => res.json())
   },
-
-  // Route POST /users/@username/notifications
-  /**
-   * @deprecated frontend cannot send notification a another user
-   */
-  async sendToUser(username: string, data: { type: string; content: string }) {
-    return ApiClient.post(`/users/${username}/notifications`, data).then(res =>
-      res.json(),
-    )
-  },
 }
diff --git a/frontend/src/components/chat/PeopleList.vue b/frontend/src/components/chat/PeopleList.vue
index 067c6673..c01cad6e 100644
--- a/frontend/src/components/chat/PeopleList.vue
+++ b/frontend/src/components/chat/PeopleList.vue
@@ -60,7 +60,7 @@ const emit = defineEmits<{
 
 const route = useRoute()
 
-const typingStore = useTypingStore();
+const typingStore = useTypingStore()
 
 const selectedUser = ref<string>('')
 const search = ref<string>('')
@@ -89,7 +89,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="h-full flex flex-col gap-2">
+  <div class="w-full h-full flex flex-col gap-2">
     <InputGroup>
       <InputGroupInput placeholder="Search..." v-model="search" />
       <InputGroupAddon>
@@ -101,26 +101,26 @@ onMounted(() => {
       </InputGroupAddon>
     </InputGroup>
 
-  <div v-if="matches.length" class="flex flex-col gap-2 mt-4">
-    <div class="flex gap-4 overflow-x-auto items-center">
-      <div
-        v-for="(content, index) in matches"
-        :key="index"
-        @click="convClick(content.username)"
-        class="select-none cursor-pointer flex flex-col items-center"
-      >
-        <Avatar class="h-12 w-12 cursor-pointer">
-          <AvatarImage :src="content.avatar ?? ''" :alt="content.username" />
-          <AvatarFallback>{{
-            content.username.charAt(0).toUpperCase()
-          }}</AvatarFallback>
-        </Avatar>
-        {{ content.first_name }}
+    <div v-if="matches.length" class="flex flex-col gap-2 mt-4 overflow-x-auto">
+      <div class="flex gap-4 overflow-x-auto items-center">
+        <div
+          v-for="(content, index) in matches"
+          :key="index"
+          @click="convClick(content.username)"
+          class="select-none cursor-pointer flex flex-col items-center"
+        >
+          <Avatar class="h-12 w-12 cursor-pointer">
+            <AvatarImage :src="content.avatar ?? ''" :alt="content.username" />
+            <AvatarFallback>{{
+              content.username.charAt(0).toUpperCase()
+            }}</AvatarFallback>
+          </Avatar>
+          {{ content.first_name }}
+        </div>
       </div>
-    </div>
 
-    <Separator />
-  </div>
+      <Separator />
+    </div>
 
     <Empty v-if="!people.length" class="flex">
       <EmptyHeader>
@@ -168,7 +168,8 @@ onMounted(() => {
                   >{{ person.first_name }} {{ person.last_name }}</ItemTitle
                 >
                 <ItemDescription v-if="typingStore.isTyping(person.username)">
-                  {{person.username}} is typing...</ItemDescription>
+                  {{ person.username }} is typing...</ItemDescription
+                >
                 <ItemDescription v-else>{{
                   person.last_message?.content
                 }}</ItemDescription>
diff --git a/frontend/src/components/layout/NavBar.vue b/frontend/src/components/layout/NavBar.vue
index d0047d4a..add8919c 100644
--- a/frontend/src/components/layout/NavBar.vue
+++ b/frontend/src/components/layout/NavBar.vue
@@ -7,6 +7,7 @@ import {
   Settings,
   LogOut,
 } from '@lucide/vue'
+import NotificationIcon from '@/components/notifications/NotificationIcon.vue'
 import { useAuth } from '@/composable/useAuth'
 
 interface NavItem {
@@ -20,6 +21,7 @@ const navItems: NavItem[] = [
   { label: 'Search', icon: Search, path: '/search' },
   { label: 'Chat', icon: MessageCircle, path: '/messages' },
   { label: 'Settings', icon: Settings, path: '/settings' },
+  { label: 'Notifications', icon: NotificationIcon, path: '/notifications' },
 ]
 
 const route = useRoute()
diff --git a/frontend/src/components/notifications/NotificationIcon.vue b/frontend/src/components/notifications/NotificationIcon.vue
new file mode 100644
index 00000000..7a369bf2
--- /dev/null
+++ b/frontend/src/components/notifications/NotificationIcon.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { Bell } from '@lucide/vue'
+import { useNotificationStore } from '@/store/useNotificationStore'
+
+const notificationStore = useNotificationStore()
+</script>
+
+<template>
+  <div class="relative">
+    <Bell />
+    <span
+      v-if="notificationStore.unreadCount"
+      class="absolute -top-1 -right-1 h-4 min-w-4 px-1 rounded-full bg-primary text-primary-foreground text-[10px] flex items-center justify-center"
+    >
+      {{ notificationStore.unreadCount }}
+    </span>
+  </div>
+</template>
diff --git a/frontend/src/store/useNotificationStore.ts b/frontend/src/store/useNotificationStore.ts
index e7d5e821..a6207921 100644
--- a/frontend/src/store/useNotificationStore.ts
+++ b/frontend/src/store/useNotificationStore.ts
@@ -1,14 +1,14 @@
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
-import { notificationsApi } from '@/api/notifications'
+import { type Notifications, notificationsApi } from '@/api/notifications'
 
 export const useNotificationStore = defineStore('notifications', () => {
   const isLoading = ref(false)
   const error = ref<string | null>(null)
 
-  const notifications = ref<any[]>([])
+  const notifications = ref<Notifications[]>([])
   const unreadCount = computed(() => {
-    return notifications.value.filter(notif => !notif.is_viewed).length
+    return notifications.value.filter(notif => !notif.data.view).length
   })
 
   const fetchNotifications = async () => {
@@ -36,7 +36,7 @@ export const useNotificationStore = defineStore('notifications', () => {
         notif => notif.id === notificationId,
       )
       if (target) {
-        target.is_viewed = true
+        target.data.view = true
       }
     } catch (err: any) {
       error.value =
diff --git a/frontend/src/views/ChatView.vue b/frontend/src/views/ChatView.vue
index 8849dff6..5e58762a 100644
--- a/frontend/src/views/ChatView.vue
+++ b/frontend/src/views/ChatView.vue
@@ -29,7 +29,7 @@ const route = useRoute()
 
 const matches = ref<ChatUser[]>([])
 const people = ref<ChatUser[]>([])
-const selectedUser = ref<User>({
+const selectedUser = ref<ChatUser>({
   username: 'test',
   avatar: 'https://github.com/shadcn.png',
   first_name: 'Leo',
diff --git a/frontend/src/views/NotificationsView.vue b/frontend/src/views/NotificationsView.vue
index 22eba678..4687e4f1 100644
--- a/frontend/src/views/NotificationsView.vue
+++ b/frontend/src/views/NotificationsView.vue
@@ -3,74 +3,179 @@ import { computed } from 'vue'
 import type { NotificationData } from '@/types'
 import { useNotificationStore } from '@/store/useNotificationStore'
 
-const notifications = computed(() =>
-  [...useNotificationStore().notifications].sort((a, b) => {
-    return (
-      new Date(b.data.created_at).getTime() -
-      new Date(a.data.created_at).getTime()
-    )
-  }),
-)
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import { Separator } from '@/components/ui/separator'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+import { Eye, BellOff } from 'lucide-vue-next'
+
+const store = useNotificationStore()
+
+/** Parse une date PHP "YYYY-MM-DD HH:mm:ss" de façon fiable (Safari compris) */
+const parseDate = (value: string) => new Date(value.replace(' ', 'T'))
+
+/** Clé du jour en heure locale : YYYY-MM-DD */
+const dayKey = (date: Date) =>
+  `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
+
+const dayLabel = (date: Date) => {
+  const today = new Date()
+  const yesterday = new Date()
+  yesterday.setDate(today.getDate() - 1)
+
+  if (dayKey(date) === dayKey(today)) return "Aujourd'hui"
+  if (dayKey(date) === dayKey(yesterday)) return 'Hier'
+
+  const label = date.toLocaleDateString('fr-FR', {
+    weekday: 'long',
+    day: 'numeric',
+    month: 'long',
+    year: date.getFullYear() !== today.getFullYear() ? 'numeric' : undefined,
+  })
+  return label.charAt(0).toUpperCase() + label.slice(1)
+}
+
+const formatTime = (date: Date) =>
+  date.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })
+
+const initials = (username?: string) =>
+  (username ?? '?').slice(0, 2).toUpperCase()
+
+interface DayGroup {
+  key: string
+  label: string
+  items: NotificationData[]
+  unread: number
+}
+
+const groupedNotifications = computed<DayGroup[]>(() => {
+  const sorted = [...store.notifications].sort(
+    (a, b) =>
+      parseDate(b.data.created_at).getTime() -
+      parseDate(a.data.created_at).getTime(),
+  )
+
+  const groups = new Map<string, DayGroup>()
+
+  for (const notification of sorted) {
+    const date = parseDate(notification.data.created_at)
+    const key = dayKey(date)
+
+    if (!groups.has(key)) {
+      groups.set(key, { key, label: dayLabel(date), items: [], unread: 0 })
+    }
+
+    const group = groups.get(key)!
+    group.items.push(notification)
+    if (!notification.data.view) group.unread++
+  }
+
+  return [...groups.values()]
+})
 
 const markAsRead = async (notification: NotificationData) => {
-  await useNotificationStore().markAsViewed(notification.id as number)
+  await store.markAsViewed(notification.id as number)
 }
 </script>
 
 <template>
-  <div class="overflow-x-auto">
-    <table class="table">
-      <thead>
-        <tr>
-          <th>Profile</th>
-          <th>Content</th>
-          <th></th>
-        </tr>
-      </thead>
-
-      <tbody>
-        <tr v-for="(notification, index) in notifications" :key="index">
-          <td>
-            <div class="flex items-center gap-3">
-              <div>
-                <div class="font-bold">{{ notification.data.username }}</div>
-                <div class="text-sm opacity-50">
-                  {{ notification.data.created_at }}
+  <TooltipProvider>
+    <div class="w-full space-y-6 p-4">
+      <h1 class="text-2xl font-bold tracking-tight">Notifications</h1>
+
+      <!-- État vide -->
+      <Card v-if="groupedNotifications.length === 0">
+        <CardContent
+          class="flex flex-col items-center justify-center gap-2 py-12 text-muted-foreground"
+        >
+          <BellOff class="h-10 w-10" />
+          <p>Aucune notification pour le moment</p>
+        </CardContent>
+      </Card>
+
+      <!-- Sections par jour -->
+      <Card v-for="group in groupedNotifications" :key="group.key">
+        <CardHeader
+          class="flex flex-row items-center justify-between space-y-0 pb-2"
+        >
+          <CardTitle class="text-base font-semibold">
+            {{ group.label }}
+          </CardTitle>
+          <Badge v-if="group.unread > 0" variant="secondary">
+            {{ group.unread }} non lue{{ group.unread > 1 ? 's' : '' }}
+          </Badge>
+        </CardHeader>
+
+        <CardContent class="p-0">
+          <template
+            v-for="(notification, i) in group.items"
+            :key="notification.id"
+          >
+            <Separator v-if="i > 0" />
+
+            <div
+              class="flex items-center gap-4 px-6 py-4 transition-colors hover:bg-muted/50"
+              :class="{ 'bg-primary/5': !notification.data.view }"
+            >
+              <!-- Point non lu -->
+              <span
+                class="h-2 w-2 shrink-0 rounded-full"
+                :class="
+                  notification.data.view ? 'bg-transparent' : 'bg-primary'
+                "
+              />
+
+              <Avatar>
+                <AvatarFallback>
+                  {{ initials(notification.data.username) }}
+                </AvatarFallback>
+              </Avatar>
+
+              <div class="min-w-0 flex-1">
+                <div class="flex items-center gap-2">
+                  <span class="font-semibold">{{
+                    notification.data.username
+                  }}</span>
+                  <span class="text-xs text-muted-foreground">
+                    {{ formatTime(parseDate(notification.data.created_at)) }}
+                  </span>
                 </div>
+                <p
+                  class="truncate text-sm"
+                  :class="
+                    notification.data.view
+                      ? 'text-muted-foreground'
+                      : 'text-foreground'
+                  "
+                >
+                  {{ notification.data.content }}
+                </p>
               </div>
+
+              <Tooltip v-if="!notification.data.view">
+                <TooltipTrigger as-child>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    @click="markAsRead(notification)"
+                  >
+                    <Eye class="h-5 w-5" />
+                    <span class="sr-only">Marquer comme lu</span>
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Marquer comme lu</TooltipContent>
+              </Tooltip>
             </div>
-          </td>
-          <td>
-            {{ notification.data.content }}
-          </td>
-          <th class="text-end" v-if="!notification.data.view">
-            <button class="btn btn-ghost" @click="markAsRead(notification)">
-              <svg
-                class="w-8"
-                viewBox="0 0 24 24"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <g stroke-width="0"></g>
-                <g stroke-linecap="round" stroke-linejoin="round"></g>
-                <g>
-                  <path
-                    d="M9 4.45962C9.91153 4.16968 10.9104 4 12 4C16.1819 4 19.028 6.49956 20.7251 8.70433C21.575 9.80853 22 10.3606 22 12C22 13.6394 21.575 14.1915 20.7251 15.2957C19.028 17.5004 16.1819 20 12 20C7.81811 20 4.97196 17.5004 3.27489 15.2957C2.42496 14.1915 2 13.6394 2 12C2 10.3606 2.42496 9.80853 3.27489 8.70433C3.75612 8.07914 4.32973 7.43025 5 6.82137"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                    stroke-linecap="round"
-                  ></path>
-                  <path
-                    d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                  ></path>
-                </g>
-              </svg>
-            </button>
-          </th>
-        </tr>
-      </tbody>
-    </table>
-  </div>
+          </template>
+        </CardContent>
+      </Card>
+    </div>
+  </TooltipProvider>
 </template>