diff --git a/frontend/src/chat/chat.css b/frontend/src/chat/chat.css
index 91901a4..e2ddc60 100644
--- a/frontend/src/chat/chat.css
+++ b/frontend/src/chat/chat.css
@@ -62,7 +62,8 @@
   flex
   items-center
   justify-center
-  bg-gray-100;
+  bg-[#43536b];
+  
 }
 
 .mainboxDisplay {
diff --git a/frontend/src/pages/chat/chat.html b/frontend/src/pages/chat/chat.html
index a0f0dde..21005f1 100644
--- a/frontend/src/pages/chat/chat.html
+++ b/frontend/src/pages/chat/chat.html
@@ -5,8 +5,7 @@
 			Chat Box <span id="t-username"></span>
 		</h1><br>
 		<button id="b-clear" class="btn-style absolute top-6 right-6">Clear Text</button>
-		<button id="b-help" class="btn-style absolute top-18 left-6">Connected</button>
-		<p>Welcome <span id="username"></span></p></br>
+		<button id="b-help" class="btn-style absolute top-16 left-6">Connected</button>
 		<div id="t-chatbox" class="chatbox-style"></div>
 		</br>
 		<div class="flex gap-2">
diff --git a/frontend/src/pages/chat/chat.ts b/frontend/src/pages/chat/chat.ts
index 9399b0c..ba8dea1 100644
--- a/frontend/src/pages/chat/chat.ts
+++ b/frontend/src/pages/chat/chat.ts
@@ -43,9 +43,13 @@ document.addEventListener("visibilitychange", async () => {
 	if (socketId == undefined) return;
 	if (document.visibilityState === "hidden") {
 		let userName = await updateUser();
-		oldName =  userName?.name || "undefined";
-		localStorage.setItem("oldName", oldName);
-		socketId.emit("client_left");
+		oldName =  userName?.name || undefined;
+		if (oldName === undefined) return;
+		localStorage.setItem('oldName', oldName);
+		socketId.emit('client_left', {
+			user: userName?.name,
+			why: 'tab window hidden - socket not dead',
+		});
 		return;
 	}
 	if (document.visibilityState === "visible") {
diff --git a/src/chat/src/app.ts b/src/chat/src/app.ts
index 7a92dc5..83876fa 100644
--- a/src/chat/src/app.ts
+++ b/src/chat/src/app.ts
@@ -75,6 +75,7 @@ declare module 'fastify' {
 			message: (msg: string) => void;
 			testend: (sock_id_client: string) => void;
 			client_entered: (userName: string, user: string) => void;
+			client_left: (userName: string, why: string) => void;
 			list: (oldUser: string, user: string) => void;
 			updateClientName: (oldUser: string, user: string) => void;
 		}>;
@@ -192,7 +193,7 @@ async function onReady(fastify: FastifyInstance) {
 				`Sender: login name: ${obj.user} - windowID ${obj.SenderWindowID} - text message: ${obj.text}`,
 			);
 			socket.emit('welcome', {
-				msg: 'Welcome to the chat!',
+				msg: 'Welcome to the chat! : ',
 			});
 
 			// Send object directly — DO NOT wrap it in a string
@@ -269,14 +270,14 @@ async function onReady(fastify: FastifyInstance) {
 			}
 		});
 
-		socket.on('client_left', (reason) => {
+		socket.on('client_left', (data) => {
 			const clientName = clientChat.get(socket.id)?.user || null;
+			const leftChat = data || null;
 			console.log(
 				color.green,
-				`Client left the Chat: ${clientName} (${socket.id}) reason:`,
-				reason,
+				`Left the Chat User: ${clientName} id Socket: ${socket.id} reason:`,
+				leftChat.why,
 			);
-			if (reason === 'transport error') return;
 
 			if (clientName !== null) {
 				const obj = {