diff --git a/src/OrchardCore.Modules/OrchardCore.Notifications/Views/UserNotificationNavbar.cshtml b/src/OrchardCore.Modules/OrchardCore.Notifications/Views/UserNotificationNavbar.cshtml
index f175d73ca80..dc7a387af02 100644
--- a/src/OrchardCore.Modules/OrchardCore.Notifications/Views/UserNotificationNavbar.cshtml
+++ b/src/OrchardCore.Modules/OrchardCore.Notifications/Views/UserNotificationNavbar.cshtml
@@ -28,11 +28,11 @@
                 <i class="fa-regular fa-bell" aria-hidden="true" data-bs-toggle="tooltip" data-bs-original-title="@T["You have no unread notifications"]"></i>
             }
         </button>
-        <ul class="dropdown-menu dropdown-menu-end notification-navbar scrollable position-absolute" style="max-width: 20rem;">
+        <ul class="dropdown-menu dropdown-menu-end notification-navbar scrollable position-absolute">
             @if (Model.Notifications.Count > 0)
             {
                 var maxCount = Math.Min(Model.MaxVisibleNotifications, Model.Notifications.Count);
-                <li style="max-height: 30rem; overflow-y: auto;">
+                <li>
                     @for (int i = 0; i < maxCount; i++)
                     {
                         var notification = Model.Notifications[i];
@@ -61,7 +61,11 @@
 </script>
 
 <style at="Head">
-    .notification-navbar .notification-is-unread {
-        font-weight: 600 !important;
+    .notification-navbar {
+        max-width: 20rem;
     }
+
+        .notification-navbar .notification-is-unread {
+            font-weight: 600 !important;
+        }
 </style>
diff --git a/src/OrchardCore.Themes/TheTheme/Views/UserNotificationNavbar.cshtml b/src/OrchardCore.Themes/TheTheme/Views/UserNotificationNavbar.cshtml
index 803dfa272e1..d3b01713242 100644
--- a/src/OrchardCore.Themes/TheTheme/Views/UserNotificationNavbar.cshtml
+++ b/src/OrchardCore.Themes/TheTheme/Views/UserNotificationNavbar.cshtml
@@ -31,11 +31,11 @@
                 <i class="fa-regular fa-bell" aria-hidden="true" data-bs-toggle="tooltip" data-bs-original-title="@T["You have no unread notifications"]"></i>
             }
         </button>
-        <ul class="dropdown-menu dropdown-menu-end notification-navbar scrollable position-absolute" style="max-width: 20rem;">
+        <ul class="dropdown-menu dropdown-menu-end notification-navbar scrollable position-absolute">
             @if (Model.Notifications.Count > 0)
             {
                 var maxCount = Math.Min(Model.MaxVisibleNotifications, Model.Notifications.Count);
-                <li style="max-height: 30rem; overflow-y: auto;">
+                <li>
                     @for (int i = 0; i < maxCount; i++)
                     {
                         var notification = Model.Notifications[i];
@@ -64,7 +64,17 @@
 </script>
 
 <style at="Head">
-    .notification-navbar .notification-is-unread {
-        font-weight: 600 !important;
+    .notification-navbar {
+        max-width: 20rem;
+    }
+
+        .notification-navbar .notification-is-unread {
+            font-weight: 600 !important;
+        }
+
+    .dropdown-menu.scrollable {
+        overflow-y: auto;
+        max-height: var(--oc-height-dropdown, 250px);
+        scrollbar-width: thin;
     }
 </style>