diff --git a/src/front/Stores/Toasts.tsx b/src/front/Stores/Toasts.tsx
index 8f5c142d..f7e091dd 100644
--- a/src/front/Stores/Toasts.tsx
+++ b/src/front/Stores/Toasts.tsx
@@ -23,7 +23,7 @@ export default class Toasts {
 	private toastList: IToast[] = [];
 	private uid: number = 0;
 
-	private defaultTime: IToast["time"] = 40000;
+	private defaultTime: IToast["time"] = 5000;
 	private defaultClosable: IToast["closable"] = true;
 	private defaultPriority: IToast["priority"] = EToastPriority.LOW;
 
diff --git a/src/front/assets/icons/info.svg b/src/front/assets/icons/info.svg
new file mode 100644
index 00000000..19176133
--- /dev/null
+++ b/src/front/assets/icons/info.svg
@@ -0,0 +1,5 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="6" cy="6" r="6" fill="#FFB017"/>
+<path d="M6 3V5.66667" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="6" cy="9" r="1" fill="white"/>
+</svg>
diff --git a/src/front/components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss b/src/front/components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss
index 5f992ebb..3e6a2797 100644
--- a/src/front/components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss
+++ b/src/front/components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss
@@ -26,3 +26,12 @@
         overflow-y: auto;
     }
 }
+
+.background{
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: transparent;
+}
\ No newline at end of file
diff --git a/src/front/components/DesignSystem/Header/Notifications/NotificationModal/index.tsx b/src/front/components/DesignSystem/Header/Notifications/NotificationModal/index.tsx
index 6730a081..648fba49 100644
--- a/src/front/components/DesignSystem/Header/Notifications/NotificationModal/index.tsx
+++ b/src/front/components/DesignSystem/Header/Notifications/NotificationModal/index.tsx
@@ -27,40 +27,43 @@ export default class NotificationModal extends React.Component<IProps, IState> {
 
   public override render(): JSX.Element | null {
     if (!this.props.isOpen) return null;
-    return <div className={classes["root"]}>
-      <div className={classes["notification-header"]}>
-        <Typography typo={ITypo.P_16}>
-          Notifications
-        </Typography>
-        <div className={classes["close-icon"]} onClick={this.props.closeModal}>
-          <Image src={CloseIcon} alt="Close notification modal" className={classes["close-icon"]}></Image>
-        </div>
-      </div>;
+    return <>
+      <div className={classes["background"]} onClick={this.props.closeModal}/>
+      <div className={classes["root"]}>
+        <div className={classes["notification-header"]}>
+          <Typography typo={ITypo.P_16}>
+            Notifications
+          </Typography>
+          <div className={classes["close-icon"]} onClick={this.props.closeModal}>
+            <Image src={CloseIcon} alt="Close notification modal" className={classes["close-icon"]}></Image>
+          </div>
+        </div>;
 
-      <div className={classes["notification-body"]}>
-        <>
-          {Toasts.getInstance().toasts.length === 0
-            ?
-            <div>
-              <Typography typo={ITypo.P_16}>No notification yet</Typography>
-            </div>
-            : <ToastHandler />}
-        </>
+        <div className={classes["notification-body"]}>
+          <>
+            {Toasts.getInstance().toasts.length === 0
+              ?
+              <div>
+                <Typography typo={ITypo.P_16}>No notification yet</Typography>
+              </div>
+              : <ToastHandler />}
+          </>
+        </div>
       </div>
-    </div>
+    </>
   }
 
   public override componentDidMount() {
-		this.removeOnToastChange = Toasts.getInstance().onChange(this.handleToastChange);
-	}
+    this.removeOnToastChange = Toasts.getInstance().onChange(this.handleToastChange);
+  }
 
-	public override componentWillUnmount() {
-		this.removeOnToastChange();
-	}
+  public override componentWillUnmount() {
+    this.removeOnToastChange();
+  }
 
   private handleToastChange(toastList: IToast[] | null) {
-		this.setState({
-			toastList,
-		});
-	}
+    this.setState({
+      toastList,
+    });
+  }
 }
diff --git a/src/front/components/DesignSystem/Header/Notifications/classes.module.scss b/src/front/components/DesignSystem/Header/Notifications/classes.module.scss
index b043ec9b..48a60e0a 100644
--- a/src/front/components/DesignSystem/Header/Notifications/classes.module.scss
+++ b/src/front/components/DesignSystem/Header/Notifications/classes.module.scss
@@ -3,7 +3,8 @@
 .root {
     .icon-container{
         position: relative;
-
+        cursor: pointer;
+        
         .notification-icon{
             height: 24px;
             width: 24px;
@@ -12,10 +13,6 @@
             position: absolute;
             top: 0;
             right: 0;
-            height: 12px;
-            width: 12px;
-            border-radius: 50%;
-            background-color: $orange-flash;
         }
     }
 }
diff --git a/src/front/components/DesignSystem/Header/Notifications/index.tsx b/src/front/components/DesignSystem/Header/Notifications/index.tsx
index 3ad4b9b4..55e95151 100644
--- a/src/front/components/DesignSystem/Header/Notifications/index.tsx
+++ b/src/front/components/DesignSystem/Header/Notifications/index.tsx
@@ -2,37 +2,61 @@ import React from "react";
 import classes from "./classes.module.scss";
 import Image from "next/image";
 import NotificationIcon from "@Assets/icons/notification.svg";
-import Toasts from "@Front/Stores/Toasts";
+import Toasts, { IToast } from "@Front/Stores/Toasts";
 import NotificationModal from "./NotificationModal";
+import InfoIcon from "@Assets/icons/info.svg";
 
 type IProps = {};
 type IState = {
   hasNotifications: boolean;
   isModalOpen: boolean;
+  toastList: IToast[] | null;
 };
 
 export default class Notifications extends React.Component<IProps, IState> {
+  private removeOnToastChange: () => void = () => { };
+
   constructor(props: IProps) {
     super(props);
     this.state = {
-      hasNotifications: true,
-      isModalOpen: true,
+      isModalOpen: false,
+      toastList: Toasts.getInstance().toasts, //TODO : Get from bbd
+      hasNotifications: Toasts.getInstance().toasts.length > 0, // TODO: Change this when we have notification stored in bbd, unread notifications
     };
     this.openModal = this.openModal.bind(this);
     this.closeModal = this.closeModal.bind(this);
+    this.handleToastChange = this.handleToastChange.bind(this);
+
   }
+
   public override render(): JSX.Element {
-    const hasNotifications = Toasts.getInstance().toasts.length;
-    console.log(hasNotifications)
     return <div className={classes["root"]}>
       <div className={classes["icon-container"]} onClick={this.openModal}>
         <Image alt="notifications" src={NotificationIcon} className={classes["notification-icon"]} />
-        {this.state.hasNotifications && <div className={classes["notification-dot"]}></div>}
+        {this.state.hasNotifications &&
+          <Image className={classes["notification-dot"]} src={InfoIcon} alt="Unread notification" />
+        }
       </div>
 
       {this.state.isModalOpen && <NotificationModal isOpen={this.state.isModalOpen} closeModal={this.closeModal} />}
     </div>;
   }
+
+  public override componentDidMount() {
+    this.removeOnToastChange = Toasts.getInstance().onChange(this.handleToastChange);
+  }
+
+  public override componentWillUnmount() {
+    this.removeOnToastChange();
+  }
+
+  private handleToastChange(toastList: IToast[] | null) {
+    this.setState({
+      toastList,
+      hasNotifications: toastList ? toastList.length > 0 : false
+    });
+  }
+
   private openModal() {
     this.setState({ isModalOpen: true });
   };
diff --git a/src/front/components/DesignSystem/Toasts/ToastsContainer/ToastElement/classes.module.scss b/src/front/components/DesignSystem/Toasts/ToastsContainer/ToastElement/classes.module.scss
index ba90f6b4..45b567a8 100644
--- a/src/front/components/DesignSystem/Toasts/ToastsContainer/ToastElement/classes.module.scss
+++ b/src/front/components/DesignSystem/Toasts/ToastsContainer/ToastElement/classes.module.scss
@@ -1,14 +1,5 @@
 @import "@Themes/constants.scss";
 
-// @keyframes loadbar-animation {
-// 	from {
-// 		transform: scaleX(1);
-// 	}
-// 	to {
-// 		transform: scaleX(0);
-// 	}
-// }
-
 @keyframes slide-left {
 	from {
 		opacity: 0;
diff --git a/src/front/components/Layouts/Home/index.tsx b/src/front/components/Layouts/Home/index.tsx
index be9baf46..58ef5ea1 100644
--- a/src/front/components/Layouts/Home/index.tsx
+++ b/src/front/components/Layouts/Home/index.tsx
@@ -8,9 +8,7 @@ export default class Home extends BasePage {
     return (
       <DefaultTemplate title={"HomePage"}>
         <div className={classes["root"]}>
-          <div style={{ fontSize: "20px" }}>JDJADJIZDIAZN?DIAZ?</div>
-          <Typography typo={ITypo.H1}>COUCOU JE SUIS UNE TYPO</Typography>
-          <Typography typo={ITypo.H1Bis}>COUCOU JE SUIS UNE TYPO</Typography>
+          <Typography typo={ITypo.H1}>HomePage</Typography>
         </div>
       </DefaultTemplate>
     );