diff --git a/site/interface/site/index.html b/site/interface/site/index.html
index acc459e..12dee80 100644
--- a/site/interface/site/index.html
+++ b/site/interface/site/index.html
@@ -6,12 +6,15 @@
 	<title>Chat</title>
 	<meta name='viewport' content='width=device-width, initial-scale=1'>
 	<link rel='stylesheet' type='text/css' href='style/style.css'>
+	<link rel='stylesheet' type='text/css' href='style/notification.css'>
 	<script type="module" src='main.js'></script>
 	<link rel="preconnect" href="https://fonts.googleapis.com">
 	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 	<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
 </head>
 <body>
+	<div id="divNotification">
+	</div>
 	<div id="chatButton">
 		<p>CHAT</p>
 	</div>
diff --git a/site/interface/site/main.js b/site/interface/site/main.js
index 1cecbda..f097f48 100644
--- a/site/interface/site/main.js
+++ b/site/interface/site/main.js
@@ -6,12 +6,24 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/07/30 13:50:35 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/04 19:20:02 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/04 23:47:45 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
 import { liveChat } from "./liveChat/main.js";
+import { createNotification } from "./notification/main.js";
 
 document.addEventListener('DOMContentLoaded', () => {
 	liveChat();
 });
+
+
+
+document.addEventListener("keydown", (e) => {
+	if (e.key === "/")
+		createNotification.info("Hello");
+	if (e.key === "*")
+		createNotification.success("Hello");
+	if (e.key === "-")
+		createNotification.error("Hello");
+});
\ No newline at end of file
diff --git a/site/interface/site/notification/main.js b/site/interface/site/notification/main.js
new file mode 100644
index 0000000..d6a2abf
--- /dev/null
+++ b/site/interface/site/notification/main.js
@@ -0,0 +1,78 @@
+/* ************************************************************************** */
+/*                                                                            */
+/*                                                        :::      ::::::::   */
+/*   main.js                                            :+:      :+:    :+:   */
+/*                                                    +:+ +:+         +:+     */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
+/*                                                +#+#+#+#+#+   +#+           */
+/*   Created: 2024/08/04 23:32:52 by edbernar          #+#    #+#             */
+/*   Updated: 2024/08/05 00:24:52 by edbernar         ###   ########.fr       */
+/*                                                                            */
+/* ************************************************************************** */
+
+/*
+	Todo (Eddy) : 
+		- Image but not necessary
+		- Title
+		- Message
+		- Action button
+		- Timerbar
+		- Close button
+		- pause when hover
+*/
+
+function	newNotification(type, timer)
+{
+	const	divNotification = document.getElementById("divNotification");
+	const	newNotification = document.createElement("div");
+
+	newNotification.classList.add("notification");
+
+	newNotification.innerHTML = "This is a " + type + " notification";
+	newNotification.style.width = "100%";
+	divNotification.appendChild(newNotification);
+	setInterval(() => {
+		newNotification.style.opacity = 1;
+	}, 100);
+	setTimeout(() => {
+		setTimeout(() => {
+			divNotification.removeChild(newNotification);
+		}, 99);
+		newNotification.style.animation = "slideOut 0.11s";
+	}, timer);
+}
+
+class notification
+{
+	timer = 2000;
+
+	constructor() {}
+
+	info(message, action=null)
+	{
+		console.log("New info notification: " + message);
+		newNotification("info", this.timer);
+	}
+
+	success(message, action=null)
+	{
+		console.log("New success notification: " + message);
+		newNotification("success", this.timer);
+	}
+
+	warning(message, action=null)
+	{
+		console.log("New warning notification: " + message);
+		newNotification("warning", this.timer);
+	}
+
+	error(message, action=null)
+	{
+		console.log("New error notification: " + message);
+		newNotification("error", this.timer);
+	}
+}
+
+const	createNotification = new notification();
+
+export { createNotification };
\ No newline at end of file
diff --git a/site/interface/site/style/notification.css b/site/interface/site/style/notification.css
new file mode 100644
index 0000000..2ea1e49
--- /dev/null
+++ b/site/interface/site/style/notification.css
@@ -0,0 +1,57 @@
+/* ************************************************************************** */
+/*                                                                            */
+/*                                                        :::      ::::::::   */
+/*   notification.css                                   :+:      :+:    :+:   */
+/*                                                    +:+ +:+         +:+     */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
+/*                                                +#+#+#+#+#+   +#+           */
+/*   Created: 2024/08/04 23:44:17 by edbernar          #+#    #+#             */
+/*   Updated: 2024/08/05 00:15:17 by edbernar         ###   ########.fr       */
+/*                                                                            */
+/* ************************************************************************** */
+
+
+@keyframes slideIn {
+	0% {
+		transform: translateX(100%);
+		opacity: 0;
+	}
+	100% {
+		transform: translateX(0);
+		opacity: 1;
+	}
+}
+
+@keyframes slideOut {
+	0% {
+		transform: translateX(0);
+		opacity: 1;
+	}
+	100% {
+		transform: translateX(100%);
+		opacity: 0;
+	}
+}
+
+#divNotification {
+	position: fixed;
+	overflow: hidden;
+	top: 10px;
+	right: 0;
+	width: 300px;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	z-index: 1000;
+}
+
+#divNotification .notification {
+	background-color: #222222;
+	color: white;
+	padding: 10px;
+	margin: 10px;
+	border-radius: 5px;
+	height: 100px;
+	min-height: 100px;
+	animation: slideIn 0.1s;
+}
diff --git a/site/interface/site/style/style.css b/site/interface/site/style/style.css
index a1301bc..5954269 100644
--- a/site/interface/site/style/style.css
+++ b/site/interface/site/style/style.css
@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/07/30 13:53:39 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/01 23:25:38 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/04 23:44:06 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -240,4 +240,5 @@ body {
 	scrollbar-color: var(--sb-thumb-color)
 					var(--sb-track-color);
 }
-}
\ No newline at end of file
+}
+
diff --git a/site/interface/site/websocket.js b/site/interface/site/websocket.js
index 6131732..1530af1 100644
--- a/site/interface/site/websocket.js
+++ b/site/interface/site/websocket.js
@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/07/31 22:17:24 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/04 19:51:29 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/04 23:29:58 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -22,17 +22,19 @@ import { typeNewPrivateMessage } from "./typeResponse/typeNewPrivateMessage.js";
 		- Information: the 'token' variable is only used until the connection is fully implemented
 */
 
-const socket = new WebSocket('ws://localhost:8000/');
-const token = "IDSNCSDAd465sd13215421";
+const	socket = new WebSocket('ws://localhost:8000/');
+const	token = "IDSNCSDAd465sd13215421";
 
-const typeResponse = ["login", "private_list_user", "private_list_message", "new_private_message"];
-const functionResponse = [typeLogin, typePrivateListUser, typePrivateListMessage, typeNewPrivateMessage];
+const	typeResponse = ["login", "private_list_user", "private_list_message", "new_private_message"];
+const	functionResponse = [typeLogin, typePrivateListUser, typePrivateListMessage, typeNewPrivateMessage];
+
+let		status = 0;
 
 socket.onopen = () => {
+	status = 1;
 	console.log('Connected');
 	if (token)
 		sendRequest("login", {"type": "byToken", "token": token});
-
 };
 
 socket.onmessage = (event) => {
@@ -57,12 +59,15 @@ socket.onmessage = (event) => {
 };
 
 socket.onclose = () => {
+	status = 0;
 	console.log('Disconnected');
 };
 
 function	sendRequest(type, content) {
 	let coc = null;
 
+	if (status === 0)
+		return ;
 	if (content instanceof Object)
 		coc = JSON.stringify(content);
 	else
