diff --git a/src/components/GameWindow.svelte b/src/components/GameWindow.svelte
index 2088d2ffab58719105a2fae53618670b215f71d0..19fc15e2ecccf89fd103b1d7b1ccb4c76b0b4df1 100644
--- a/src/components/GameWindow.svelte
+++ b/src/components/GameWindow.svelte
@@ -46,6 +46,7 @@
 	const TWELVE_HOURS = 1000 * 60 * 60 * 12;
 
 	let antiThrottler: HTMLAudioElement | undefined;
+	let lastNotificationCount: string;
 
 	function updateActivity() {
 		lastInteraction = Date.now();
@@ -165,6 +166,8 @@
 			diffHolder.classList.add("diff");
 			currentHolder.append(diffHolder);
 
+			const notifications = document.querySelectorAll<HTMLSpanElement>(".notif");
+
 			let diff = 0;
 			let timer = 60;
 
@@ -205,6 +208,21 @@
 
 								diff++;
 							}
+							if(xp.notification !== undefined){
+								if(lastNotificationCount !== xp.notification){
+									lastNotificationCount = xp.notification
+									if (xp.notification !== "0"){
+									notifications.forEach(bubble => {
+										bubble.textContent = xp.notification
+										bubble.style.removeProperty("display")
+									});
+									} else {
+										notifications.forEach(bubble => {
+											bubble.style.display = "none"
+										});
+									}
+								}
+							}
 							busy = false;
 							timerHolder.innerHTML = `<h3>next xp in</h3> ${timer.toLocaleString(
 								"en-US"
diff --git a/src/components/Header.astro b/src/components/Header.astro
index fca968922ec6f6e5825c96642887e08f9263d3c7..9828c639ea2e6f369dfc85ece422b6c3b3fedeaa 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -259,11 +259,9 @@ const xpToNext = getXPToNextLevel(level);
 			<div id="profile-board" class="top-item">
 				{/* prettier-ignore */}
 				<a href={`/user/${userId}`} class="masked-link floatright" onclick="return setMobileProfile()">
-					{mcount !== "0" && (
-						<span id="notification" class="notif">
+						<span id="notification" class="notif" style={ mcount === "0" && "display:none" }>
 							{mcount}
-						</span>
-					)}{username}<img class="profile-pic inline" src={convertFormat(
+						</span>{username}<img class="profile-pic inline" src={convertFormat(
 							"/pfp/medium/",
 							userId,
 							pfpTimestamp
@@ -330,11 +328,7 @@ const xpToNext = getXPToNextLevel(level);
 						<h3>me</h3>
 						<a href={`/user/${userId}`}>view profile</a>
 						{/* prettier-ignore */}
-						<a href="/inbox"><span>inbox</span>{
-							mcount !== "0" && (
-								<span class="notif">{mcount}</span>
-							)}
-						</a>
+						<a href="/inbox"><span>inbox</span><span class="notif" style={ mcount === "0" && "display:none" }>{mcount}</span></a>
 
 						<h3>preferences</h3>
 						<a href="/settings">my account</a>
diff --git a/src/components/Inbox.svelte b/src/components/Inbox.svelte
index 3ec4a0060fa10084a9814212886b46f1f2571d0d..24b9f7a25b288b0c5cac307fe68816799f784d39 100644
--- a/src/components/Inbox.svelte
+++ b/src/components/Inbox.svelte
@@ -26,6 +26,8 @@
 		content: "",
 	};
 
+	const notifications = document.querySelectorAll<HTMLSpanElement>(".notif");
+
 	async function read(id: string) {
 		message = "loading";
 		const res = await json(`/api/messages/read?id=${id}`);
@@ -42,9 +44,9 @@
 
 		const mcount = messages.reduce((n, m) => (n += !m.read), 0);
 		if (mcount === 0) {
-			[...document.querySelectorAll(".notif")].forEach(e => e.remove());
+			notifications.forEach(e => e.style.display = "none");
 		} else {
-			[...document.querySelectorAll(".notif")].forEach(
+			notifications.forEach(
 				e => (e.textContent = mcount.toLocaleString())
 			);
 		}
@@ -75,6 +77,9 @@
 				m.read = true;
 				return m;
 			});
+			notifications.forEach(bubble => {
+				bubble.style.display = "none";
+			});
 		}
 	}
 
@@ -99,6 +104,12 @@
 				if (m.id === message._id) m.read = false;
 				return m;
 			});
+
+			const mcount = messages.reduce((n, m) => (n += !m.read), 0);
+			notifications.forEach(bubble => {
+				bubble.textContent = mcount.toLocaleString();
+				bubble.style.removeProperty("display");
+			});
 		}
 	}
 
diff --git a/src/pages/api/games/playtime/heartbeat.ts b/src/pages/api/games/playtime/heartbeat.ts
index ade35f66c98d2c73cbc803ad4b7e911f7cd10fe5..68cda17daf5d98d6108bde981ddc745ef8cb14f0 100644
--- a/src/pages/api/games/playtime/heartbeat.ts
+++ b/src/pages/api/games/playtime/heartbeat.ts
@@ -2,6 +2,7 @@ import { getLevel, getXP, getXPToNextLevel } from "~/helper/leveling";
 import { rdata, rmsg } from "~/helper/res";
 import { DayGameStats } from "~/models/daygamestats";
 import { Game } from "~/models/game";
+import { Message } from "~/models/message";
 import { PlaySession } from "~/models/playsession";
 import { Playtime } from "~/models/playtime";
 import { User } from "~/models/user";
@@ -71,7 +72,14 @@ export const POST = route(
 				);
 			}
 		}
-
+		// Update notifications count
+		let mcount: string | number = "0";
+			mcount = await Message.countDocuments({
+				to: user.id,
+				read: false,
+				deleted: false,
+			});
+			mcount = mcount.toLocaleString();
 		// Original playtime system
 
 		let playtime = await Playtime.findOne({ game: game.id, user: user.id });
@@ -85,7 +93,7 @@ export const POST = route(
 			});
 		} else {
 			if (Date.now() - user.lastHeartbeat < 59 * 1000) {
-				return rmsg("Invalid heartbeat", 400);
+				return rdata({ message: "Invalid heartbeat", notification: mcount }, 400);
 			}
 			// if (playtime.updatedAt)
 
@@ -114,7 +122,7 @@ export const POST = route(
 		const xpToNext = getXPToNextLevel(level);
 
 		return rdata(
-			{ level, xp: xp - xpToCurrent, next: xpToNext - xpToCurrent },
+			{ level, xp: xp - xpToCurrent, next: xpToNext - xpToCurrent, notification: mcount },
 			201
 		);
 	}