diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index 2fe780f..2a8ea25 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -1,20 +1,24 @@
 import styles from "./Header.module.css"
 import { Link, NavLink } from "react-router";
 import { useEffect, useRef, useState } from "react";
+import getUserNotifications from "../../utils/getUserNotifications.js";
 
 function Header() {
     const [notificationMenu, setnotificationMenu] = useState(false);
     const [unreadNotification, setunreadNotification] = useState(true);
     const [mobileMenu, setMobileMenu] = useState(false);
+    const [notifications, setNotifications] = useState([]);
     const notificationRef = useRef(null);
 
-    const [notifications, setNotifications] = useState([
-        "Vous avez un nouveau message !",
-        "Jean Paul est en attente de validation !",
-        "Vous avez un nouveau message !"
-    ]);
+
 
     useEffect(() => {
+        async function loadNotifications() {
+            const notifData = await getUserNotifications();
+            setNotifications(notifData || []);
+        }
+
+        loadNotifications();
         const handleClickOutside = (event) => {
             if (
                 notificationRef.current &&
@@ -109,7 +113,7 @@ function Header() {
                 ) : (
                     notifications.map((notification, index) => (
                         <div className={styles.notification} key={index}>
-                            <p>{notification}</p>
+                            <p>{notification.content}</p>
                             <button
                                 className={styles.closeBtn}
                                 onClick={() => setNotifications(prev => prev.filter((_, i) => i !== index))}
diff --git a/src/index.css b/src/index.css
index 489dbc7..1d2d1c2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -10,9 +10,6 @@
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
- /* color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;*/
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -25,7 +22,6 @@
 .content {
   padding: 1.5rem;
   z-index: 1;
-  min-height: 100vh;
 }
 
 
diff --git a/src/stories/Button.stories.js b/src/stories/Button.stories.jsx
similarity index 50%
rename from src/stories/Button.stories.js
rename to src/stories/Button.stories.jsx
index 6438e9e..3f86188 100644
--- a/src/stories/Button.stories.js
+++ b/src/stories/Button.stories.jsx
@@ -2,25 +2,38 @@ import { fn } from 'storybook/test';
 
 import Button from '../components/ui/button/button.jsx';
 
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+
 export default {
   title: 'UI/Button',
   component: Button,
   parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: 'centered',
   },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
   argTypes: {
-    backgroundColor: { control: 'color' },
+      children: {
+          control: "text",
+          description: "Texte/Composant à afficher dans le bouton",
+      },
+      variant: {
+          control: { type: 'select' },
+          options: ["primary", "default", "danger", "transparent"],
+          description: "Style du bouton"
+      },
+      onClick: {
+          control: "function",
+          description: "Fonction appelée lors du clique du bouton",
+      }
+  },
+
+  args: {
+      children: "Button",
+      variant: "Primary",
+      onClick: fn()
+
   },
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#story-args
-  args: { onClick: fn() },
 };
 
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Primary = {
     args: {
       children: "Button",
@@ -52,3 +65,11 @@ export const Danger = {
         onClick: fn(),
     },
 };
+
+export const Icon = {
+    args: {
+        children: <img src={"/src/assets/person.svg"} alt="icon" />,
+        variant: 'transparent',
+        onClick: fn(),
+    }
+}
\ No newline at end of file
diff --git a/src/utils/getUserNotifications.js b/src/utils/getUserNotifications.js
new file mode 100644
index 0000000..69d2431
--- /dev/null
+++ b/src/utils/getUserNotifications.js
@@ -0,0 +1,21 @@
+export default async function getUserNotifications() {
+    try {
+        const response = await fetch(
+            'http://localhost:8000/api/users/1/notifications',
+            {
+                method: 'GET',
+                credentials: 'include',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Accept': 'application/json'
+                }
+            }
+        );
+        const data = await response.json();
+        return data.data;
+
+    } catch (err) {
+        console.error("Erreur :", err);
+        return null;
+    }
+}
diff --git a/src/utils/login.js b/src/utils/login.js
index 4174113..529d27c 100644
--- a/src/utils/login.js
+++ b/src/utils/login.js
@@ -4,7 +4,7 @@ export default async function login(email, password) {
     const csrfToken = await getXSRFToken();
 
 
-    await fetch('http://localhost:8000/api/login', {
+    await fetch('http://localhost:8000/api/users/login', {
         method: 'POST',
         credentials: 'include',
         headers: {
diff --git a/vite.config.js b/vite.config.js
index 75014b6..59b0166 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -11,29 +11,29 @@ const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(file
 
 // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
 export default defineConfig({
-  plugins: [react()],
-  base: "/",
-  test: {
-    projects: [{
-      extends: true,
-      plugins: [
-      // The plugin will run tests for the stories defined in your Storybook config
-      // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      storybookTest({
-        configDir: path.join(dirname, '.storybook')
-      })],
-      test: {
-        name: 'storybook',
-        browser: {
-          enabled: true,
-          headless: true,
-          provider: playwright({}),
-          instances: [{
-            browser: 'chromium'
-          }]
-        },
-        setupFiles: ['.storybook/vitest.setup.js']
-      }
-    }]
-  }
+    plugins: [react()],
+    base: '/',
+    test: {
+        projects: [{
+            extends: true,
+            plugins: [
+                // The plugin will run tests for the stories defined in your Storybook config
+                // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+                storybookTest({
+                    configDir: path.join(dirname, '.storybook')
+                })],
+            test: {
+                name: 'storybook',
+                browser: {
+                    enabled: true,
+                    headless: true,
+                    provider: playwright({}),
+                    instances: [{
+                        browser: 'chromium'
+                    }]
+                },
+                setupFiles: ['.storybook/vitest.setup.js']
+            }
+        }]
+    }
 });
\ No newline at end of file