diff --git a/app/javascript/controllers/notifications_tray_controller.js b/app/javascript/controllers/notifications_tray_controller.js
index b356c4b20..685df6f02 100644
--- a/app/javascript/controllers/notifications_tray_controller.js
+++ b/app/javascript/controllers/notifications_tray_controller.js
@@ -4,11 +4,22 @@ export default class extends Controller {
   static targets = [ "notification", "hiddenNotifications" ]
   static classes = [ "grouped" ]
 
-  notificationTargetConnected(notification) {
-    this.#groupNotificationIfNeeded(notification)
+  connect() {
+    this.group()
   }
 
-  #groupNotificationIfNeeded(notification) {
+  group() {
+    this.notificationTargets.forEach(notification => this.#groupNotification(notification))
+    this.grouped = true
+  }
+
+  notificationTargetConnected(notification) {
+    if (this.grouped && notification.parentElement !== this.hiddenNotificationsTarget) {
+      this.#groupNotification(notification)
+    }
+  }
+
+  #groupNotification(notification) {
     const groupedNotifications = this.#groupedNotificationsFor(notification)
 
     if (groupedNotifications.length > 1) {
@@ -40,7 +51,7 @@ export default class extends Controller {
   }
 
   // We use a hidden container instead of hiding the notifications directly so that the CSS that sort the
-  // tray element indexes doesn't get messed up.
+  // tray element indexes doesn't get messed up with the child positions changing.
   #showGroupedNotification(notification) {
     if (notification.parentElement === this.hiddenNotificationsTarget) {
       this.hiddenNotificationsTarget.parentElement.insertBefore(notification, this.hiddenNotificationsTarget)
diff --git a/app/views/notifications/_tray.html.erb b/app/views/notifications/_tray.html.erb
index d2fa40a5d..6a4cc1e6a 100644
--- a/app/views/notifications/_tray.html.erb
+++ b/app/views/notifications/_tray.html.erb
@@ -7,7 +7,7 @@
       data-navigable-list-actionable-items-value="true"
       data-navigable-list-reverse-navigation-value="true"
       data-action="keydown->navigable-list#navigate dialog:show@document->navigable-list#reset turbo-visit->navigable-list#reset keydown.esc->dialog#close:stop click@document->dialog#closeOnClickOutside">
-    <%= turbo_frame_tag "notifications", src: tray_notifications_path, refresh: "morph", data: { controller: "notifications-tray", notifications_tray_grouped_class: "notification--grouped" } %>
+    <%= turbo_frame_tag "notifications", src: tray_notifications_path, refresh: "morph", data: { controller: "notifications-tray", notifications_tray_grouped_class: "notification--grouped", action: "turbo:frame-render->notifications-tray#group" } %>
 
     <div class="tray__item tray__item--hat txt-x-small gap-half">
       <div data-navigable-list-target="item" class="full-width">