diff --git a/app/controllers/notifications_controller.rb b/app/controllers/notifications_controller.rb
index 8adb04b3c..76bd62974 100644
--- a/app/controllers/notifications_controller.rb
+++ b/app/controllers/notifications_controller.rb
@@ -1,6 +1,8 @@
 class NotificationsController < ApplicationController
+  MAX_UNREAD_NOTIFICATIONS = 500
+
   def index
-    @unread = Current.user.notifications.unread.ordered.preloaded unless current_page_param
+    @unread = Current.user.notifications.unread.ordered.preloaded.limit(MAX_UNREAD_NOTIFICATIONS) unless current_page_param
     set_page_and_extract_portion_from Current.user.notifications.read.ordered.preloaded
 
     respond_to do |format|
diff --git a/app/models/notification.rb b/app/models/notification.rb
index 4b69dd6e6..5cd3802a4 100644
--- a/app/models/notification.rb
+++ b/app/models/notification.rb
@@ -9,6 +9,7 @@ class Notification < ApplicationRecord
   scope :unread, -> { where(read_at: nil) }
   scope :read, -> { where.not(read_at: nil) }
   scope :ordered, -> { order(read_at: :desc, created_at: :desc) }
+  scope :with_unread_first, -> { order(Arel.sql("CASE WHEN read_at IS NULL THEN 0 ELSE 1 END")) }
 
   after_create_commit :broadcast_unread
   after_destroy_commit :broadcast_read
diff --git a/app/views/notifications/index.html.erb b/app/views/notifications/index.html.erb
index eae50830b..70fee45b8 100644
--- a/app/views/notifications/index.html.erb
+++ b/app/views/notifications/index.html.erb
@@ -13,30 +13,8 @@
 
 <div data-controller="badge navigable-list" data-badge-unread-class="unread" data-action="keydown@document->navigable-list#navigate" data-navigable-list-actionable-items-value="true"
       data-navigable-list-focus-on-selection-value="false">
-  <section class="notifications-list panel panel--wide center borderless unpad flex flex-column gap-half">
-    <% if @unread.any? %>
-      <div class="flex align-center justify-space-between margin-block-start margin-block-end-half">
-        <h2 class="txt-medium txt-uppercase txt-alert">New for you</h2>
-        <%= button_to "Mark all as read", bulk_reading_path, class: "btn txt-small", form: { data: { turbo: false } }, data: { action: "badge#clear" } %>
-      </div>
-    <% else %>
-      <div class="notifications-list__empty-message pad border-radius border translucent" style="--border-style: dashed; --border-color: var(--color-ink); --border-radius: 0.2em;">
-        <strong>Nothing new for you.</strong>
-      </div>
-    <% end %>
-
-    <div id="notifications_list" contents>
-      <%= render partial: "notifications/index/notification", collection: @unread, cached: true %>
-    </div>
-  </section>
-
-  <section class="notifications-list notifications-list--read panel panel--wide center borderless unpad flex flex-column gap-half margin-block-start">
-    <h2 class="txt-medium margin-block-start-double margin-block-end-half txt-uppercase translucent">Previously seen</h2>
-
-    <div id="notifications_list_read" contents>
-      <%= render partial: "notifications/index/notification", collection: @page.records, cached: true %>
-    </div>
-  </section>
+  <%= render "notifications/index/unread_notifications", unread: @unread if @unread %>
+  <%= render "notifications/index/read_notifications", page: @page %>
 </div>
 
 <%= notifications_next_page_link(@page) if @page.records.any? %>
diff --git a/app/views/notifications/index/_read_notifications.html.erb b/app/views/notifications/index/_read_notifications.html.erb
new file mode 100644
index 000000000..c5e282237
--- /dev/null
+++ b/app/views/notifications/index/_read_notifications.html.erb
@@ -0,0 +1,7 @@
+<section class="notifications-list notifications-list--read panel panel--wide center borderless unpad flex flex-column gap-half margin-block-start">
+  <h2 class="txt-medium margin-block-start-double margin-block-end-half txt-uppercase translucent">Previously seen</h2>
+
+  <div id="notifications_list_read" contents>
+    <%= render partial: "notifications/index/notification", collection: page.records, cached: true %>
+  </div>
+</section>
diff --git a/app/views/notifications/index/_unread_notifications.html.erb b/app/views/notifications/index/_unread_notifications.html.erb
new file mode 100644
index 000000000..4fbfdba7d
--- /dev/null
+++ b/app/views/notifications/index/_unread_notifications.html.erb
@@ -0,0 +1,23 @@
+<section class="notifications-list panel panel--wide center borderless unpad flex flex-column gap-half">
+  <% if unread.any? %>
+    <div class="flex align-center justify-space-between margin-block-start margin-block-end-half">
+      <h2 class="txt-medium txt-uppercase txt-alert">New for you</h2>
+      <%= button_to "Mark all as read", bulk_reading_path, class: "btn txt-small", form: { data: { turbo: false } }, data: { action: "badge#clear" } %>
+    </div>
+
+    <% total_unread_count = Current.user.notifications.unread.count %>
+    <% if Current.user.notifications.unread.count > NotificationsController::MAX_UNREAD_NOTIFICATIONS %>
+      <div class="events__column-footer fill-highlight txt-x-small border-radius margin-block-end">
+        Showing the <%= NotificationsController::MAX_UNREAD_NOTIFICATIONS %> most recent (<%= total_unread_count - NotificationsController::MAX_UNREAD_NOTIFICATIONS %> are hidden)
+      </div>
+    <% end %>
+  <% else %>
+    <div class="notifications-list__empty-message pad border-radius border translucent" style="--border-style: dashed; --border-color: var(--color-ink); --border-radius: 0.2em;">
+      <strong>Nothing new for you.</strong>
+    </div>
+  <% end %>
+
+  <div id="notifications_list" contents>
+    <%= render partial: "notifications/index/notification", collection: unread, cached: true %>
+  </div>
+</section>