diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css
index b04d58d0c..74e18c62e 100644
--- a/app/assets/stylesheets/trays.css
+++ b/app/assets/stylesheets/trays.css
@@ -141,6 +141,14 @@
 
     position: relative;
 
+    &[aria-selected]{
+      .card {
+        border-radius: 0.25ch;
+        outline: var(--focus-ring-size) solid var(--focus-ring-color);
+        outline-offset: var(--focus-ring-offset);
+      }
+    }
+
     .tray__dialog & {
       font-size: 10px;
       margin-block-end: var(--tray-item-margin);
diff --git a/app/helpers/notifications_helper.rb b/app/helpers/notifications_helper.rb
index 969a69e12..4c0e96831 100644
--- a/app/helpers/notifications_helper.rb
+++ b/app/helpers/notifications_helper.rb
@@ -25,7 +25,7 @@ module NotificationsHelper
   end
 
   def notification_tag(notification, &)
-    tag.div id: dom_id(notification), class: "tray__item" do
+    tag.div id: dom_id(notification), class: "tray__item", data: { navigable_list_target: "item" } do
       concat(
         link_to(notification,
           class: [ "card card--notification", { "card--closed": notification.card.closed? }, { "unread": !notification.read? } ],
diff --git a/app/views/notifications/index.html.erb b/app/views/notifications/index.html.erb
index eb84721c1..4040ac977 100644
--- a/app/views/notifications/index.html.erb
+++ b/app/views/notifications/index.html.erb
@@ -17,7 +17,8 @@
   </nav>
 <% end %>
 
-<div data-controller="badge" data-badge-unread-class="unread">
+<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 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">