diff --git a/src/OrchardCore.Modules/OrchardCore.Notifications/Assets/js/notification-manager.js b/src/OrchardCore.Modules/OrchardCore.Notifications/Assets/js/notification-manager.js
index 5268195a05e..d48ae0b4e5b 100644
--- a/src/OrchardCore.Modules/OrchardCore.Notifications/Assets/js/notification-manager.js
+++ b/src/OrchardCore.Modules/OrchardCore.Notifications/Assets/js/notification-manager.js
@@ -12,7 +12,7 @@ notificationManager = function () {
         return false;
     }
 
-    const initialize = (readUrl, wrapperSelector) => {
+    const initialize = (readUrl, unreadBadgeSelector, wrapperSelector) => {
 
         if (!readUrl) {
             console.log('No readUrl was provided.');
@@ -21,6 +21,16 @@ notificationManager = function () {
         }
 
         const reading = [];
+        let totalUnread = 0;
+        let unreadElement = null;
+
+        if (unreadBadgeSelector) {
+            unreadElement = document.querySelector(unreadBadgeSelector);
+
+            if (unreadElement) {
+                totalUnread = parseInt(unreadElement.innerText)
+            }
+        }
 
         var elements = document.getElementsByClassName('mark-notification-as-read');
 
@@ -55,6 +65,15 @@ notificationManager = function () {
                     }).then(response => response.json())
                         .then(result => {
                             if (result.updated) {
+
+                                if (unreadElement) {
+                                    if (totalUnread > 1) {
+                                        unreadElement.innerText = --totalUnread;
+                                    } else {
+                                        unreadElement.style.display = 'none';
+                                    }
+                                }
+
                                 if (wrapperSelector) {
                                     var wrapper = e.target.closest(wrapperSelector);
                                     if (wrapper) {
diff --git a/src/OrchardCore.Modules/OrchardCore.Notifications/Drivers/NotificationNavbarDisplayDriver.cs b/src/OrchardCore.Modules/OrchardCore.Notifications/Drivers/NotificationNavbarDisplayDriver.cs
index 867869e9090..ed8b46e07fb 100644
--- a/src/OrchardCore.Modules/OrchardCore.Notifications/Drivers/NotificationNavbarDisplayDriver.cs
+++ b/src/OrchardCore.Modules/OrchardCore.Notifications/Drivers/NotificationNavbarDisplayDriver.cs
@@ -42,14 +42,17 @@ public override async Task<IDisplayResult> DisplayAsync(Navbar model, BuildDispl
             .Processing<UserNotificationNavbarViewModel>(async model =>
             {
                 var userId = _httpContextAccessor.HttpContext.User.FindFirstValue(ClaimTypes.NameIdentifier);
+
                 var notifications = (await _session.Query<Notification, NotificationIndex>(x => x.UserId == userId && !x.IsRead, collection: NotificationConstants.NotificationCollection)
                     .OrderByDescending(x => x.CreatedAtUtc)
-                    .Take(_notificationOptions.TotalUnreadNotifications + 1)
+                    .Take(_notificationOptions.TotalUnreadNotifications)
                     .ListAsync()).ToList();
 
                 model.Notifications = notifications;
                 model.MaxVisibleNotifications = _notificationOptions.TotalUnreadNotifications;
-                model.TotalUnread = notifications.Count;
+                model.TotalUnread = notifications.Count < _notificationOptions.TotalUnreadNotifications
+                ? notifications.Count
+                : await _session.QueryIndex<NotificationIndex>(x => x.UserId == userId && !x.IsRead, collection: NotificationConstants.NotificationCollection).CountAsync();
 
             }).Location("Detail", "Content:9")
             .Location("DetailAdmin", "Content:9");
diff --git a/src/OrchardCore.Modules/OrchardCore.Notifications/Views/UserNotificationNavbar.cshtml b/src/OrchardCore.Modules/OrchardCore.Notifications/Views/UserNotificationNavbar.cshtml
index 03cd74a9d81..91d588eb8db 100644
--- a/src/OrchardCore.Modules/OrchardCore.Notifications/Views/UserNotificationNavbar.cshtml
+++ b/src/OrchardCore.Modules/OrchardCore.Notifications/Views/UserNotificationNavbar.cshtml
@@ -26,6 +26,8 @@
                 }
 
                 <i class="fa-solid fa-bell" aria-hidden="true" data-bs-toggle="tooltip" data-bs-original-title="@title"></i>
+
+                <span class="position-absolute start-50 translate-middle badge rounded-pill text-bg-danger" id="UnreadNotificationBadge">@Model.TotalUnread</span>
             }
             else
             {
@@ -70,11 +72,15 @@
 
 <script at="Foot" asp-name="notification-manager-initializes" depends-on="notification-manager">
     (function () {
-        notificationManager.initializeContainer('@Url.RouteUrl(MarkAsReadEndpoints.RouteName, new { area = NotificationConstants.Features.Notifications }))')
+        notificationManager.initializeContainer('@Url.RouteUrl(MarkAsReadEndpoints.RouteName, new { area = NotificationConstants.Features.Notifications }))', '#UnreadNotificationBadge')
     })();
 </script>
 
 <style at="Head">
+    #UnreadNotificationBadge {
+        top: 5px;
+    }
+
     .notification-navbar {
         max-width: 20rem;
     }
diff --git a/src/OrchardCore.Modules/OrchardCore.Notifications/wwwroot/Scripts/notification-manager.js b/src/OrchardCore.Modules/OrchardCore.Notifications/wwwroot/Scripts/notification-manager.js
index 6e8350b45e3..d0147c07e1a 100644
--- a/src/OrchardCore.Modules/OrchardCore.Notifications/wwwroot/Scripts/notification-manager.js
+++ b/src/OrchardCore.Modules/OrchardCore.Notifications/wwwroot/Scripts/notification-manager.js
@@ -12,12 +12,20 @@ notificationManager = function () {
     }
     return false;
   };
-  var initialize = function initialize(readUrl, wrapperSelector) {
+  var initialize = function initialize(readUrl, unreadBadgeSelector, wrapperSelector) {
     if (!readUrl) {
       console.log('No readUrl was provided.');
       return;
     }
     var reading = [];
+    var totalUnread = 0;
+    var unreadElement = null;
+    if (unreadBadgeSelector) {
+      unreadElement = document.querySelector(unreadBadgeSelector);
+      if (unreadElement) {
+        totalUnread = parseInt(unreadElement.innerText);
+      }
+    }
     var elements = document.getElementsByClassName('mark-notification-as-read');
     var _loop = function _loop(i) {
       ['click', 'mouseover'].forEach(function (evt) {
@@ -46,6 +54,13 @@ notificationManager = function () {
             return response.json();
           }).then(function (result) {
             if (result.updated) {
+              if (unreadElement) {
+                if (totalUnread > 1) {
+                  unreadElement.innerText = --totalUnread;
+                } else {
+                  unreadElement.style.display = 'none';
+                }
+              }
               if (wrapperSelector) {
                 var wrapper = e.target.closest(wrapperSelector);
                 if (wrapper) {
diff --git a/src/OrchardCore.Modules/OrchardCore.Notifications/wwwroot/Scripts/notification-manager.min.js b/src/OrchardCore.Modules/OrchardCore.Notifications/wwwroot/Scripts/notification-manager.min.js
index c3b33162181..e217d750553 100644
--- a/src/OrchardCore.Modules/OrchardCore.Notifications/wwwroot/Scripts/notification-manager.min.js
+++ b/src/OrchardCore.Modules/OrchardCore.Notifications/wwwroot/Scripts/notification-manager.min.js
@@ -1 +1 @@
-notificationManager=function(){var t=function(t,e){var a=t.indexOf(e);return a>-1&&(t.splice(a,1),!0)};return{initializeContainer:function(e,a){if(e)for(var i=[],n=document.getElementsByClassName("mark-notification-as-read"),r=function(r){["click","mouseover"].forEach((function(s){n[r].addEventListener(s,(function(n){if("false"==n.target.getAttribute("data-is-read")){var r=n.target.getAttribute("data-message-id");r&&(i.includes(r)||(i.push(r),fetch(e,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({messageId:r})}).then((function(t){return t.json()})).then((function(e){if(e.updated)if(a){var s=n.target.closest(a);s&&(s.classList.remove("notification-is-unread"),s.classList.add("notification-is-read"),s.setAttribute("data-is-read",!0),t(i,r))}else n.target.classList.remove("notification-is-unread"),n.target.classList.add("notification-is-read"),n.target.setAttribute("data-is-read",!0),t(i,r);var o=n.target.getAttribute("data-target-url");o&&(window.location.href=o)}))))}}))}))},s=0;s<n.length;s++)r(s);else console.log("No readUrl was provided.")}}}();
+notificationManager=function(){var t=function(t,e){var a=t.indexOf(e);return a>-1&&(t.splice(a,1),!0)};return{initializeContainer:function(e,a,i){if(e){var n=[],r=0,s=null;a&&(s=document.querySelector(a))&&(r=parseInt(s.innerText));for(var o=document.getElementsByClassName("mark-notification-as-read"),d=function(a){["click","mouseover"].forEach((function(d){o[a].addEventListener(d,(function(a){if("false"==a.target.getAttribute("data-is-read")){var o=a.target.getAttribute("data-message-id");o&&(n.includes(o)||(n.push(o),fetch(e,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({messageId:o})}).then((function(t){return t.json()})).then((function(e){if(e.updated)if(s&&(r>1?s.innerText=--r:s.style.display="none"),i){var d=a.target.closest(i);d&&(d.classList.remove("notification-is-unread"),d.classList.add("notification-is-read"),d.setAttribute("data-is-read",!0),t(n,o))}else a.target.classList.remove("notification-is-unread"),a.target.classList.add("notification-is-read"),a.target.setAttribute("data-is-read",!0),t(n,o);var c=a.target.getAttribute("data-target-url");c&&(window.location.href=c)}))))}}))}))},c=0;c<o.length;c++)d(c)}else console.log("No readUrl was provided.")}}}();
diff --git a/src/OrchardCore.Themes/TheTheme/Views/UserNotificationNavbar.cshtml b/src/OrchardCore.Themes/TheTheme/Views/UserNotificationNavbar.cshtml
index e2c2ebb909a..ecf17d6e424 100644
--- a/src/OrchardCore.Themes/TheTheme/Views/UserNotificationNavbar.cshtml
+++ b/src/OrchardCore.Themes/TheTheme/Views/UserNotificationNavbar.cshtml
@@ -28,6 +28,8 @@
             }
 
             <i class="fa-solid fa-bell" aria-hidden="true" data-bs-toggle="tooltip" data-bs-original-title="@title"></i>
+
+            <span class="position-absolute start-50 translate-middle badge rounded-pill text-bg-danger" id="UnreadNotificationBadge">@Model.TotalUnread</span>
         }
         else
         {
@@ -70,11 +72,14 @@
 
 <script at="Foot" asp-name="notification-manager-initializes" depends-on="notification-manager">
     (function () {
-        notificationManager.initializeContainer('@Url.RouteUrl(MarkAsReadEndpoints.RouteName, new { area = NotificationConstants.Features.Notifications }))')
+        notificationManager.initializeContainer('@Url.RouteUrl(MarkAsReadEndpoints.RouteName, new { area = NotificationConstants.Features.Notifications }))', '#UnreadNotificationBadge')
     })();
 </script>
 
 <style at="Head">
+    #UnreadNotificationBadge {
+        top:5px;
+    }
     .notification-navbar {
         max-width: 20rem;
     }