diff --git a/frappe/public/js/frappe/ui/notifications/notifications.js b/frappe/public/js/frappe/ui/notifications/notifications.js
index 2b340f00ea..528bf2912d 100644
--- a/frappe/public/js/frappe/ui/notifications/notifications.js
+++ b/frappe/public/js/frappe/ui/notifications/notifications.js
@@ -222,11 +222,11 @@ class NotificationsView extends BaseNotificationsView {
 			.attr("title", __("Notifications"))
 			.tooltip({ delay: { show: 600, hide: 100 }, trigger: "hover" });
 
-		this.bell_icon = this.parent.find(".desktop-notification-icon use");
-		if (!this.bell_icon.length) {
-			this.bell_icon = this.parent
+		this.bell_indicator = this.parent.find(".desktop-notification-icon");
+		if (!this.bell_indicator.length) {
+			this.bell_indicator = this.parent
 				.closest(".body-sidebar")
-				?.find(".sidebar-notification use");
+				?.find(".sidebar-notification .sidebar-item-icon");
 		}
 
 		this.setup_notification_listeners();
@@ -387,7 +387,7 @@ class NotificationsView extends BaseNotificationsView {
 	}
 
 	toggle_notification_icon(seen) {
-		this.bell_icon?.attr("href", seen ? "#icon-bell" : "#icon-bell-dot");
+		this.bell_indicator?.toggleClass("indicator blue", !seen);
 	}
 
 	toggle_seen(flag) {
@@ -402,11 +402,13 @@ class NotificationsView extends BaseNotificationsView {
 
 	setup_notification_listeners() {
 		frappe.realtime.on("notification", () => {
+			this.settings.seen = 0;
 			this.toggle_notification_icon(false);
 			this.update_dropdown();
 		});
 
 		frappe.realtime.on("indicator_hide", () => {
+			this.settings.seen = 1;
 			this.toggle_notification_icon(true);
 		});
 
@@ -430,7 +432,7 @@ class NotificationsView extends BaseNotificationsView {
 			}
 
 			this.toggle_seen(true);
-			if (this.bell_icon?.attr("href") === "#icon-bell-dot") {
+			if (this.bell_indicator?.hasClass("indicator")) {
 				this.toggle_notification_icon(true);
 				frappe.call(
 					"frappe.desk.doctype.notification_log.notification_log.trigger_indicator_hide"
diff --git a/frappe/public/scss/desk/notification.scss b/frappe/public/scss/desk/notification.scss
index c5ef9ea68f..cc2bb95409 100644
--- a/frappe/public/scss/desk/notification.scss
+++ b/frappe/public/scss/desk/notification.scss
@@ -44,6 +44,26 @@
 	display: none;
 }
 
+.sidebar-notification .sidebar-item-icon.indicator,
+.desktop-notification-icon.indicator {
+	position: relative;
+
+	&::before {
+		position: absolute;
+		top: 0;
+		right: 0;
+		left: auto;
+		height: 6px;
+		width: 6px;
+		margin: 0;
+		z-index: 1;
+	}
+}
+
+.sidebar-notification .item-anchor {
+	overflow: visible;
+}
+
 .mark-read {
 	display: none;
 	margin-left: 10px;