diff --git a/netbox/templates/htmx/notifications.html b/netbox/templates/htmx/notifications.html
index 0fb5501a2..12ef8c511 100644
--- a/netbox/templates/htmx/notifications.html
+++ b/netbox/templates/htmx/notifications.html
@@ -29,3 +29,5 @@
     </a>
   {% endif %}
 </div>
+{% include 'inc/notification_bell.html' %}
+
diff --git a/netbox/templates/inc/notification_bell.html b/netbox/templates/inc/notification_bell.html
new file mode 100644
index 000000000..5140a2f3f
--- /dev/null
+++ b/netbox/templates/inc/notification_bell.html
@@ -0,0 +1,9 @@
+{% if notifications %}
+  <span class="text-primary" id="notifications-alert" hx-swap-oob="true">
+    <i class="mdi mdi-bell-badge"></i>
+  </span>
+{% else %}
+  <span class="text-muted" id="notifications-alert" hx-swap-oob="true">
+    <i class="mdi mdi-bell"></i>
+  </span>
+{% endif %}
diff --git a/netbox/templates/inc/user_menu.html b/netbox/templates/inc/user_menu.html
index de9dcac8e..ab2c31239 100644
--- a/netbox/templates/inc/user_menu.html
+++ b/netbox/templates/inc/user_menu.html
@@ -6,11 +6,7 @@
   {% with notifications=request.user.notifications.unread.exists %}
     <div class="nav-item dropdown">
       <a href="#" class="nav-link" data-bs-toggle="dropdown" hx-get="{% url 'extras:notifications' %}" hx-target="next .notifications" aria-label="Notifications">
-          {% if notifications %}
-            <span class="text-primary"><i class="mdi mdi-bell-badge"></i></span>
-          {% else %}
-            <i class="mdi mdi-bell"></i>
-          {% endif %}
+        {% include 'inc/notification_bell.html' %}
       </a>
       <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow notifications"></div>
     </div>