diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/notification/notification.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/notification/notification.vue
index ba448902d..6c0481a25 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/notification/notification.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/notification/notification.vue
@@ -45,8 +45,7 @@
                             </td>
                             <td class="px-sm-3 py-sm-3">
                                 <div class="d-flex justify-content-between" v-if="notification.userDismissable">
-                                    <a href="#deleteModal" data-toggle="modal" @click="selectNotification(notification)">Delete</a>
-                                    &nbsp;<i class="fa-solid fa-trash-can-alt pt-1"></i>
+                                    <button data-target="#deleteModal" data-toggle="modal" @click="selectNotification(notification)">Delete <i class="fa-solid fa-trash-can-alt pt-1"></i></button>
                                 </div>
                             </td>
                         </tr>
diff --git a/LearningHub.Nhs.WebUI/Styles/nhsuk/layout.scss b/LearningHub.Nhs.WebUI/Styles/nhsuk/layout.scss
index 3bd13c109..8e30ca18b 100644
--- a/LearningHub.Nhs.WebUI/Styles/nhsuk/layout.scss
+++ b/LearningHub.Nhs.WebUI/Styles/nhsuk/layout.scss
@@ -183,6 +183,18 @@
     }
 }
 
+button[data-toggle="modal"] {
+    color: #005eb8;
+    padding: 0;
+    border: none;
+    background: none;
+
+    &:focus {
+        background: yellow;
+        border-bottom: 4px solid;
+    }
+}
+
 /* large desktop */
 @media (min-width: px2rem(990)) {