diff --git a/src/Frontend/src/components/messages2/SagaDiagram.spec.ts b/src/Frontend/src/components/messages2/SagaDiagram.spec.ts
index 996d9c9f9..3166e8d4f 100644
--- a/src/Frontend/src/components/messages2/SagaDiagram.spec.ts
+++ b/src/Frontend/src/components/messages2/SagaDiagram.spec.ts
@@ -43,7 +43,7 @@ describe("Feature: Message not involved in Saga", () => {
         },
       });
 
-      componentDriver.assert.NoSagaDataAvailableMessageIsShownWithMessage(/no saga data/i);
+      componentDriver.assert.NoSagaDataAvailableMessageIsShownWithMessage(/This message is not part of any saga/i);
     });
   });
 });
diff --git a/src/Frontend/src/components/messages2/SagaDiagram/MessageDataBox.vue b/src/Frontend/src/components/messages2/SagaDiagram/MessageDataBox.vue
index 802898d46..811b4392a 100644
--- a/src/Frontend/src/components/messages2/SagaDiagram/MessageDataBox.vue
+++ b/src/Frontend/src/components/messages2/SagaDiagram/MessageDataBox.vue
@@ -28,10 +28,10 @@ const body = computed(() => props.messageData.body.data.value || "");
     <LoadingSpinner />
   </div>
   <div v-else-if="messageData.body.failed_to_load" class="message-data-box message-data-box-error">
-    <span class="message-data-box-text--error">An error occurred while retrieving the message data</span>
+    <span class="message-data-box-text--error">Failed to load message data, there might be a connection issue or the message may no longer be available.</span>
   </div>
   <div v-else-if="!messageDataLoading && (!messageData.body.data.value || messageData.body.not_found)" class="message-data-box">
-    <span class="message-data-box-text--empty">Empty</span>
+    <span class="message-data-box-text--empty">No message body data available</span>
   </div>
   <div v-else-if="contentType.isSupported" class="message-data-box message-data-box-content">
     <MaximizableCodeEditor :model-value="body" :language="contentType.language" :readOnly="true" :showGutter="false" :modalTitle="modalTitle" />
diff --git a/src/Frontend/src/components/messages2/SagaDiagram/NoSagaData.vue b/src/Frontend/src/components/messages2/SagaDiagram/NoSagaData.vue
index f8d19b116..f53ea1447 100644
--- a/src/Frontend/src/components/messages2/SagaDiagram/NoSagaData.vue
+++ b/src/Frontend/src/components/messages2/SagaDiagram/NoSagaData.vue
@@ -6,8 +6,8 @@ import NoSagaIcon from "@/assets/NoSaga.svg";
   <div class="body">
     <div class="saga-message">
       <div class="saga-message-container">
-        <img class="saga-message-image" :src="NoSagaIcon" alt="" />
-        <h1 role="status" aria-label="message-not-involved-in-saga" class="saga-message-title">No Saga Data Available</h1>
+        <img class="saga-message-image" :src="NoSagaIcon" alt="No saga data found" />
+        <h1 role="status" aria-label="message-not-involved-in-saga" class="saga-message-title">This message is not part of any saga</h1>
       </div>
     </div>
   </div>
diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaCompletedNode.vue b/src/Frontend/src/components/messages2/SagaDiagram/SagaCompletedNode.vue
index 3727ae9f0..00ea2a466 100644
--- a/src/Frontend/src/components/messages2/SagaDiagram/SagaCompletedNode.vue
+++ b/src/Frontend/src/components/messages2/SagaDiagram/SagaCompletedNode.vue
@@ -11,9 +11,9 @@ defineProps<{
     <div class="row row--center">
       <div class="cell cell--center cell--inverted">
         <div class="cell-inner cell-inner-center">
-          <img class="saga-icon saga-icon--center-cell" :src="SagaCompletedIcon" alt="" />
-          <h2 class="saga-status-title saga-status-title--inline">Saga Completed</h2>
-          <div class="timestamp">{{ completionTime }}</div>
+          <img class="saga-icon saga-icon--center-cell" :src="SagaCompletedIcon" alt="Saga Completed" />
+          <h2 class="saga-status-title saga-status-title--inline" v-tippy="`The saga has completed its lifecycle`">Saga Completed</h2>
+          <div class="timestamp" v-tippy="`Completion timestamp: ${completionTime}`">{{ completionTime }}</div>
         </div>
       </div>
     </div>
diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingMessage.vue b/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingMessage.vue
index 65ba33c9f..4a8f36f13 100644
--- a/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingMessage.vue
+++ b/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingMessage.vue
@@ -26,9 +26,9 @@ const props = defineProps<{
       'cell-inner-side--active': shouldBeActive,
     }"
   >
-    <img class="saga-icon saga-icon--side-cell" :src="message.IsEventMessage ? EventIcon : CommandIcon" :alt="message.IsEventMessage ? 'Event' : 'Command'" />
-    <h2 class="message-title">{{ message.FriendlyTypeName }}</h2>
-    <div class="timestamp">{{ message.FormattedTimeSent }}</div>
+    <img class="saga-icon saga-icon--side-cell" :src="message.IsEventMessage ? EventIcon : CommandIcon" :alt="message.IsEventMessage ? 'Event' : 'Command'" v-tippy="message.IsEventMessage ? `Event Message` : `Command Message`" />
+    <h2 class="message-title" v-tippy="message.FriendlyTypeName">{{ message.FriendlyTypeName }}</h2>
+    <div class="timestamp" v-tippy="`Sent at: ${message.FormattedTimeSent}`">{{ message.FormattedTimeSent }}</div>
   </div>
   <div v-if="showMessageData" class="message-data message-data--active">
     <MessageDataBox :messageData="message.Data" :maximizedTitle="message.FriendlyTypeName" />
diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingTimeoutMessage.vue b/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingTimeoutMessage.vue
index 041287824..92d104713 100644
--- a/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingTimeoutMessage.vue
+++ b/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingTimeoutMessage.vue
@@ -45,9 +45,9 @@ watch(
   <div class="row row--right">
     <div class="cell cell--center">
       <div class="cell-inner cell-inner-line">
-        <img class="saga-icon saga-icon--center-cell saga-icon--overlap" :src="SagaTimeoutIcon" alt="" />
-        <a v-if="message.HasBeenProcessed" v-tippy="`Scroll to invoked timeout`" class="timeout-status" href="#" @click.prevent="navigateToTimeout" aria-label="timeout requested">Timeout Requested = {{ message.TimeoutFriendly }}</a>
-        <span v-else class="timeout-status" aria-label="timeout requested">Timeout Requested = {{ message.TimeoutFriendly }}</span>
+        <img class="saga-icon saga-icon--center-cell saga-icon--overlap" :src="SagaTimeoutIcon" alt="Timeout Request" />
+        <a v-if="message.HasBeenProcessed" v-tippy="`View timeout processing details`" class="timeout-status" href="#" @click.prevent="navigateToTimeout" aria-label="timeout requested">Timeout Requested = {{ message.TimeoutFriendly }}</a>
+        <span v-else class="timeout-status" aria-label="timeout requested" v-tippy="`This timeout has been requested but not yet processed`">Timeout Requested = {{ message.TimeoutFriendly }}</span>
       </div>
     </div>
     <div class="cell cell--side"></div>
@@ -65,9 +65,9 @@ watch(
           'cell-inner-side--active': shouldBeActive,
         }"
       >
-        <img class="saga-icon saga-icon--side-cell" :src="TimeoutIcon" alt="" />
-        <h2 class="message-title" aria-label="timeout message type">{{ message.FriendlyTypeName }}</h2>
-        <div class="timestamp" aria-label="timeout message timestamp">{{ message.FormattedTimeSent }}</div>
+        <img class="saga-icon saga-icon--side-cell" :src="TimeoutIcon" alt="" v-tippy="`Timeout Message`" />
+        <h2 class="message-title" aria-label="timeout message type" v-tippy="message.FriendlyTypeName">{{ message.FriendlyTypeName }}</h2>
+        <div class="timestamp" aria-label="timeout message timestamp" v-tippy="`Sent at: ${message.FormattedTimeSent}`">{{ message.FormattedTimeSent }}</div>
       </div>
       <div v-if="showMessageData" class="message-data message-data--active">
         <MessageDataBox :messageData="message.Data" :maximizedTitle="message.FriendlyTypeName" />
diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaPluginNeeded.vue b/src/Frontend/src/components/messages2/SagaDiagram/SagaPluginNeeded.vue
index 4f6437d4f..56e2f7492 100644
--- a/src/Frontend/src/components/messages2/SagaDiagram/SagaPluginNeeded.vue
+++ b/src/Frontend/src/components/messages2/SagaDiagram/SagaPluginNeeded.vue
@@ -7,7 +7,7 @@ import CopyToClipboard from "@/components/CopyToClipboard.vue";
   <div class="body" role="status" aria-label="saga-plugin-needed">
     <div class="saga-message">
       <div class="saga-message-container">
-        <img class="saga-message-image" :src="NoSagaIcon" alt="" />
+        <img class="saga-message-image" :src="NoSagaIcon" alt="Saga plugin required" />
         <h1 class="saga-message-title">Saga audit plugin needed to visualize saga</h1>
         <div class="saga-message-box">
           <p class="saga-message-text">To visualize your saga, please install the appropriate nuget package in your endpoint</p>
diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue b/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue
index 32c3a4872..8c36088b4 100644
--- a/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue
+++ b/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue
@@ -150,18 +150,23 @@ const hasStateChanges = computed(() => {
           }"
           :data-message-id="update.InitiatingMessage.IsSagaTimeoutMessage ? update.MessageId : ''"
         >
-          <img class="saga-icon saga-icon--side-cell" :src="update.InitiatingMessage.IsSagaTimeoutMessage ? TimeoutIcon : update.InitiatingMessage.IsEventMessage ? EventIcon : CommandIcon" alt="" />
-          <h2 class="message-title" aria-label="initiating message type">{{ update.InitiatingMessage.FriendlyTypeName }}</h2>
-          <div class="timestamp" aria-label="initiating message timestamp">{{ update.InitiatingMessage.FormattedMessageTimestamp }}</div>
+          <img
+            class="saga-icon saga-icon--side-cell"
+            :src="update.InitiatingMessage.IsSagaTimeoutMessage ? TimeoutIcon : update.InitiatingMessage.IsEventMessage ? EventIcon : CommandIcon"
+            alt=""
+            v-tippy="update.InitiatingMessage.IsSagaTimeoutMessage ? `Timeout Message` : update.InitiatingMessage.IsEventMessage ? `Event Message` : `Command Message`"
+          />
+          <h2 class="message-title" aria-label="initiating message type" v-tippy="update.InitiatingMessage.FriendlyTypeName">{{ update.InitiatingMessage.FriendlyTypeName }}</h2>
+          <div class="timestamp" aria-label="initiating message timestamp" v-tippy="`Received at: ${update.InitiatingMessage.FormattedMessageTimestamp}`">{{ update.InitiatingMessage.FormattedMessageTimestamp }}</div>
         </div>
       </div>
       <div class="cell cell--center cell-flex">
         <div class="cell-inner cell-inner-center cell-inner--align-bottom">
           <template v-if="update.InitiatingMessage.IsSagaTimeoutMessage">
-            <img class="saga-icon saga-icon--center-cell" :src="SagaTimeoutIcon" alt="" />
+            <img class="saga-icon saga-icon--center-cell" :src="SagaTimeoutIcon" alt="" v-tippy="`Saga Timeout`" />
             <a
               v-if="update.InitiatingMessage.HasRelatedTimeoutRequest"
-              v-tippy="`Scroll to timeout request`"
+              v-tippy="`View original timeout request`"
               href="#"
               @click.prevent="navigateToTimeoutRequest"
               class="saga-status-title saga-status-title--inline timeout-status"
@@ -172,9 +177,13 @@ const hasStateChanges = computed(() => {
             <h2 v-else class="saga-status-title saga-status-title--inline timeout-status" aria-label="timeout invoked">Timeout Invoked</h2>
             <br />
           </template>
-          <img class="saga-icon saga-icon--center-cell" :src="update.IsFirstNode ? SagaInitiatedIcon : SagaUpdatedIcon" alt="" />
-          <h2 class="saga-status-title saga-status-title--inline">{{ update.StatusDisplay }}</h2>
-          <div class="timestamp timestamp--inline" aria-label="time stamp">{{ update.FormattedStartTime }}</div>
+          <img class="saga-icon saga-icon--center-cell" :src="update.IsFirstNode ? SagaInitiatedIcon : SagaUpdatedIcon" alt="" v-tippy="update.IsFirstNode ? `Saga Initiated` : `Saga Updated`" />
+          <h2 class="saga-status-title saga-status-title--inline">
+            {{ update.StatusDisplay }}
+          </h2>
+          <div class="timestamp timestamp--inline" aria-label="time stamp" v-tippy="`Update time: ${update.FormattedStartTime}`">
+            {{ update.FormattedStartTime }}
+          </div>
         </div>
       </div>
     </div>