diff --git a/src/Frontend/src/components/audit/AuditListItem.vue b/src/Frontend/src/components/audit/AuditListItem.vue
index c44e1ffa6..255441767 100644
--- a/src/Frontend/src/components/audit/AuditListItem.vue
+++ b/src/Frontend/src/components/audit/AuditListItem.vue
@@ -13,28 +13,29 @@ const props = defineProps<{
   message: Message;
 }>();
 
-function navigateToMessage(message: Message) {
-  const query = router.currentRoute.value.query;
+function getMessageRoute(message: Message) {
+  const path = message.status === MessageStatus.Successful || message.status === MessageStatus.ResolvedSuccessfully ? routeLinks.messages.successMessage.link(message.message_id, message.id) : routeLinks.messages.failedMessage.link(message.id);
 
-  router.push({
-    path: message.status === MessageStatus.Successful || message.status === MessageStatus.ResolvedSuccessfully ? routeLinks.messages.successMessage.link(message.message_id, message.id) : routeLinks.messages.failedMessage.link(message.id),
-    query: { ...query, ...{ back: route.path } },
-  });
+  const query = router.currentRoute.value.query;
+  return {
+    path,
+    query: { ...query, back: route.path },
+  };
 }
 </script>
 
 <template>
-  <div class="item" @click="navigateToMessage(props.message)">
-    <div class="status">
+  <RouterLink :to="getMessageRoute(props.message)" class="item">
+    <span class="status">
       <MessageStatusIcon :message="props.message" />
-    </div>
-    <div class="message-id">{{ props.message.message_id }}</div>
-    <div class="message-type">{{ props.message.message_type }}</div>
-    <div class="time-sent"><span class="label-name">Time Sent:</span>{{ new Date(props.message.time_sent).toLocaleString() }}</div>
-    <div class="critical-time"><span class="label-name">Critical Time:</span>{{ formatDotNetTimespan(props.message.critical_time) }}</div>
-    <div class="processing-time"><span class="label-name">Processing Time:</span>{{ formatDotNetTimespan(props.message.processing_time) }}</div>
-    <div class="delivery-time"><span class="label-name">Delivery Time:</span>{{ formatDotNetTimespan(props.message.delivery_time) }}</div>
-  </div>
+    </span>
+    <span class="message-id">{{ props.message.message_id }}</span>
+    <span class="message-type">{{ props.message.message_type }}</span>
+    <span class="time-sent"><span class="label-name">Time Sent:</span>{{ new Date(props.message.time_sent).toLocaleString() }}</span>
+    <span class="critical-time"><span class="label-name">Critical Time:</span>{{ formatDotNetTimespan(props.message.critical_time) }}</span>
+    <span class="processing-time"><span class="label-name">Processing Time:</span>{{ formatDotNetTimespan(props.message.processing_time) }}</span>
+    <span class="delivery-time"><span class="label-name">Delivery Time:</span>{{ formatDotNetTimespan(props.message.delivery_time) }}</span>
+  </RouterLink>
 </template>
 
 <style scoped>
@@ -49,6 +50,8 @@ function navigateToMessage(message: Message) {
   grid-template-areas:
     "status message-type message-type message-type time-sent"
     "status message-id processing-time critical-time delivery-time";
+  text-decoration: none;
+  color: inherit;
 }
 .item:not(:first-child) {
   border-top-color: #eee;
@@ -64,25 +67,32 @@ function navigateToMessage(message: Message) {
 }
 .status {
   grid-area: status;
+  display: block;
 }
 .message-id {
   grid-area: message-id;
+  display: block;
 }
 .time-sent {
   grid-area: time-sent;
+  display: block;
 }
 .message-type {
   grid-area: message-type;
   font-weight: bold;
   overflow-wrap: break-word;
+  display: block;
 }
 .processing-time {
   grid-area: processing-time;
+  display: block;
 }
 .critical-time {
   grid-area: critical-time;
+  display: block;
 }
 .delivery-time {
   grid-area: delivery-time;
+  display: block;
 }
 </style>
diff --git a/src/Frontend/src/components/messages/MessageView.vue b/src/Frontend/src/components/messages/MessageView.vue
index 2af6bb6c9..6844628dc 100644
--- a/src/Frontend/src/components/messages/MessageView.vue
+++ b/src/Frontend/src/components/messages/MessageView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, onMounted, ref, watch, watchEffect } from "vue";
 import { RouteLocationAsPathGeneric, RouterLink, useRoute } from "vue-router";
 import NoData from "../NoData.vue";
 import TimeSince from "../TimeSince.vue";
@@ -98,6 +98,16 @@ onMounted(() => {
     backLink.value = { path: back.toString(), query: otherArgs };
   }
 });
+
+// Update document title to include message status and type for easier tab identification
+watchEffect(() => {
+  if (state.value.data.message_type) {
+    const statusEmoji = isError.value ? "❌" : "✅";
+    document.title = `${statusEmoji} ${state.value.data.message_type} - ServicePulse`;
+  } else {
+    document.title = "ServicePulse";
+  }
+});
 </script>
 
 <template>