diff --git a/src/app/app.html b/src/app/app.html
index 3ddb212..298a3e2 100644
--- a/src/app/app.html
+++ b/src/app/app.html
@@ -69,7 +69,9 @@
 
             <!-- ICONES À DROITE -->
             <div class="right-icons">
-                <app-modal-nav nameIcon="bell" name="Notification"></app-modal-nav>
+                <app-modal-nav nameIcon="bell" name="Notification">
+                    <app-notif-list></app-notif-list>
+                </app-modal-nav>
                 <app-modal-nav nameIcon="user" name="Profil">
                     <app-profil></app-profil>
                 </app-modal-nav>
diff --git a/src/app/app.ts b/src/app/app.ts
index 311370e..8747de2 100644
--- a/src/app/app.ts
+++ b/src/app/app.ts
@@ -5,10 +5,11 @@ import { NzMenuModule } from 'ng-zorro-antd/menu';
 import {NzIconDirective} from "ng-zorro-antd/icon";
 import {ModalNav} from "./components/modal-nav/modal-nav";
 import {Profil} from "./components/profil/profil";
+import {NotifList} from "./components/notif-list/notif-list";
 
 @Component({
   selector: 'app-root',
-    imports: [RouterOutlet, NzLayoutModule, NzMenuModule, NzIconDirective, RouterLinkActive, RouterLink, ModalNav, Profil],
+    imports: [RouterOutlet, NzLayoutModule, NzMenuModule, NzIconDirective, RouterLinkActive, RouterLink, ModalNav, Profil, NotifList],
   templateUrl: './app.html',
   styleUrl: './app.css'
 })
diff --git a/src/app/components/deliverer-table/deliverer-table.ts b/src/app/components/deliverer-table/deliverer-table.ts
index 8100913..9cb0b7d 100644
--- a/src/app/components/deliverer-table/deliverer-table.ts
+++ b/src/app/components/deliverer-table/deliverer-table.ts
@@ -5,7 +5,6 @@ import {ModalNav} from "../modal-nav/modal-nav";
 import {NzDividerComponent} from "ng-zorro-antd/divider";
 import {NzIconDirective} from "ng-zorro-antd/icon";
 import {NzTableComponent} from "ng-zorro-antd/table";
-import {ProfilForm} from "../profil-form/profil-form";
 import {ModalButton} from "../modal-button/modal-button";
 import {DatePipe} from "@angular/common";
 import {DelivererForm} from "../deliverer-form/deliverer-form";
@@ -17,7 +16,6 @@ import {DelivererForm} from "../deliverer-form/deliverer-form";
         NzDividerComponent,
         NzIconDirective,
         NzTableComponent,
-        ProfilForm,
         ModalButton,
         DatePipe,
         DelivererForm
diff --git a/src/app/components/notif-list/notif-list.css b/src/app/components/notif-list/notif-list.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/notif-list/notif-list.html b/src/app/components/notif-list/notif-list.html
new file mode 100644
index 0000000..d61b903
--- /dev/null
+++ b/src/app/components/notif-list/notif-list.html
@@ -0,0 +1,34 @@
+<div class="ml-90">
+    <p class="cursor-pointer text-red-700" (click)="delete()">
+        <nz-icon nzType="delete" nzTheme="outline"/> Tout supprimer
+    </p>
+</div>
+
+<nz-list nzItemLayout="vertical" class="max-w-xl mx-auto max-h-[400px] overflow-y-auto border border-gray-200 rounded-lg">
+    @for (item of notifList; track item) {
+        <nz-list-item class="flex items-start p-4 border-b border-gray-200">
+
+            <nz-list-item-meta class="flex-1">
+                <nz-list-item-meta-avatar>
+                    <img src="https://cdn-icons-png.flaticon.com/512/1/1176.png" alt="info" class="w-10 h-10 rounded-full mt-10 mr-2 w-10">
+                </nz-list-item-meta-avatar>
+
+                <nz-list-item-meta-title>
+                    <p class="font-semibold mb-1">{{item.title}}</p>
+                    <p class="text-gray-500 mb-1">{{item.author}}</p>
+                </nz-list-item-meta-title>
+
+                <nz-list-item-meta-description>
+                    <p>{{item.content}}</p>
+                </nz-list-item-meta-description>
+            </nz-list-item-meta>
+
+            <nz-list-item-extra>
+                <img src="https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png"
+                     alt="logo"
+                     class="w-35 object-contain mt-4">
+            </nz-list-item-extra>
+
+        </nz-list-item>
+    }
+</nz-list>
diff --git a/src/app/components/notif-list/notif-list.ts b/src/app/components/notif-list/notif-list.ts
new file mode 100644
index 0000000..46ff877
--- /dev/null
+++ b/src/app/components/notif-list/notif-list.ts
@@ -0,0 +1,92 @@
+import { Component } from '@angular/core';
+import {NotifInfo} from "../../interfaces/notif.interface";
+import {
+    NzListComponent,
+    NzListItemComponent,
+    NzListItemExtraComponent, NzListItemMetaAvatarComponent,
+    NzListItemMetaComponent, NzListItemMetaDescriptionComponent, NzListItemMetaTitleComponent
+} from "ng-zorro-antd/list";
+import {NzIconDirective} from "ng-zorro-antd/icon";
+
+@Component({
+  selector: 'app-notif-list',
+    imports: [
+        NzListComponent,
+        NzListItemComponent,
+        NzListItemMetaComponent,
+        NzListItemExtraComponent,
+        NzListItemMetaDescriptionComponent,
+        NzListItemMetaAvatarComponent,
+        NzListItemMetaTitleComponent,
+        NzIconDirective
+    ],
+  templateUrl: './notif-list.html',
+  styleUrl: './notif-list.css',
+})
+export class NotifList {
+    notifList: NotifInfo[] = [
+        {
+            author: 'Admin',
+            title: 'Information system',
+            content: 'L\'utilisateur à bien été crée.'
+        },
+        {
+            author: 'Admin',
+            title: 'Information system',
+            content: 'L\'utilisateur à bien été crée.'
+        },
+        {
+            author: 'Admin',
+            title: 'Information system',
+            content: 'L\'utilisateur à bien été crée.'
+        },
+        {
+            author: 'Admin',
+            title: 'Information system',
+            content: 'L\'utilisateur à bien été crée.'
+        },
+        {
+            author: 'Admin',
+            title: 'Information system',
+            content: 'L\'utilisateur à bien été crée.'
+        },
+        {
+            author: 'Admin',
+            title: 'Information system',
+            content: 'L\'utilisateur à bien été crée.'
+        },
+        {
+            author: 'Admin',
+            title: 'Information system',
+            content: 'L\'utilisateur à bien été crée.'
+        },
+        {
+            author: 'Admin',
+            title: 'Information system',
+            content: 'L\'utilisateur à bien été crée.'
+        },
+        {
+            author: 'Admin',
+            title: 'Information system',
+            content: 'L\'utilisateur à bien été crée.'
+        },
+        {
+            author: 'Admin',
+            title: 'Information system',
+            content: 'L\'utilisateur à bien été crée.'
+        },
+        {
+            author: 'Admin',
+            title: 'Information system',
+            content: 'L\'utilisateur à bien été crée.'
+        }
+    ];
+
+    delete() {
+        this.notifList = [];
+    }
+
+    addContent(author: string, title: string, content: string) {
+        this.notifList.push({ author, title, content });
+    }
+}
diff --git a/src/app/interfaces/notif.interface.ts b/src/app/interfaces/notif.interface.ts
new file mode 100644
index 0000000..ff5ce4f
--- /dev/null
+++ b/src/app/interfaces/notif.interface.ts
@@ -0,0 +1,5 @@
+export interface NotifInfo {
+    author: string;
+    title: string;
+    content: string;
+}
\ No newline at end of file