diff --git a/src/Frontend/src/components/messages2/SagaDiagram.spec.ts b/src/Frontend/src/components/messages2/SagaDiagram.spec.ts
index 4731842a6..423008194 100644
--- a/src/Frontend/src/components/messages2/SagaDiagram.spec.ts
+++ b/src/Frontend/src/components/messages2/SagaDiagram.spec.ts
@@ -4,6 +4,7 @@ import { SagaHistory } from "@/resources/SagaHistory";
 import makeRouter from "@/router";
 import { createTestingPinia } from "@pinia/testing";
 import { MessageStore } from "@/stores/MessageStore";
+import { MessageStatus } from "@/resources/Message";
 
 //Defines a domain-specific language (DSL) for interacting with the system under test (sut)
 interface componentDSL {
@@ -38,7 +39,7 @@ describe("Feature: Message not involved in Saga", () => {
       const componentDriver = rendercomponent({
         initialState: {
           MessageStore: messageStore,
-          sagaHistory: undefined, // Lets pass undefined to simulate no saga data available
+          SagaDiagramStore: undefined, // Lets pass undefined to simulate no saga data available
         },
       });
 
@@ -63,7 +64,7 @@ describe("Feature: Detecting no Audited Saga Data Available", () => {
       const componentDriver = rendercomponent({
         initialState: {
           MessageStore: messageStore,
-          sagaHistory: undefined, // Lets pass undefined to simulate no saga data available
+          SagaDiagramStore: undefined, // Lets pass undefined to simulate no saga data available
         },
       });
 
@@ -97,7 +98,7 @@ describe("Feature: Navigation and Contextual Information", () => {
       const componentDriver = rendercomponent({
         initialState: {
           MessageStore: messageStore,
-          sagaHistory: { sagaHistory: sampleSagaHistory },
+          SagaDiagramStore: { sagaHistory: sampleSagaHistory },
         },
       });
 
@@ -120,7 +121,7 @@ describe("Feature: Navigation and Contextual Information", () => {
       const componentDriver = rendercomponent({
         initialState: {
           MessageStore: messageStore,
-          sagaHistory: { sagaHistory: sampleSagaHistory },
+          SagaDiagramStore: { sagaHistory: sampleSagaHistory },
         },
       });
 
@@ -181,7 +182,7 @@ describe("Feature: 3 Visual Representation of Saga Timeline", () => {
       const componentDriver = rendercomponent({
         initialState: {
           MessageStore: messageStore,
-          sagaHistory: { sagaHistory: sampleSagaHistory },
+          SagaDiagramStore: { sagaHistory: sampleSagaHistory },
         },
       });
 
@@ -247,7 +248,7 @@ describe("Feature: 3 Visual Representation of Saga Timeline", () => {
       const componentDriver = rendercomponent({
         initialState: {
           MessageStore: messageStore,
-          sagaHistory: { sagaHistory: sampleSagaHistory },
+          SagaDiagramStore: { sagaHistory: sampleSagaHistory },
         },
       });
 
@@ -271,7 +272,7 @@ describe("Feature: 3 Visual Representation of Saga Timeline", () => {
   });
 });
 
-function rendercomponent({ initialState = {} }: { initialState?: { MessageStore?: MessageStore; sagaHistory?: { sagaHistory: SagaHistory } } }): componentDSL {
+function rendercomponent({ initialState = {} }: { initialState?: { MessageStore?: MessageStore; SagaDiagramStore?: { sagaHistory: SagaHistory } } }): componentDSL {
   const router = makeRouter();
 
   // Render with createTestingPinia
@@ -380,6 +381,8 @@ const sampleSagaHistory: SagaHistory = {
         time_sent: new Date("2025-03-28T03:04:06.321561Z"),
         message_type: "ServiceControl.SmokeTest.MyCustomTimeout",
         intent: "Send",
+        body_url: "body_url",
+        message_status: MessageStatus.Successful,
       },
       outgoing_messages: [],
       endpoint: "Endpoint1",
@@ -397,6 +400,8 @@ const sampleSagaHistory: SagaHistory = {
         time_sent: new Date("2025-03-28T03:04:05.37723Z"),
         message_type: "ServiceControl.SmokeTest.MyCustomTimeout",
         intent: "Send",
+        body_url: "body_url",
+        message_status: MessageStatus.Successful,
       },
       outgoing_messages: [],
       endpoint: "Endpoint1",
@@ -414,6 +419,8 @@ const sampleSagaHistory: SagaHistory = {
         time_sent: new Date("2025-03-28T03:04:06.293765Z"),
         message_type: "ServiceControl.SmokeTest.SagaMessage2",
         intent: "Send",
+        body_url: "body_url",
+        message_status: MessageStatus.Successful,
       },
       outgoing_messages: [
         {
@@ -423,6 +430,12 @@ const sampleSagaHistory: SagaHistory = {
           time_sent: new Date("2025-03-28T03:04:06.3214397Z"),
           message_type: "ServiceControl.SmokeTest.MyCustomTimeout",
           intent: "Send",
+          deliver_at: new Date("2025-03-28T03:04:06.293765Z"),
+          is_saga_timeout_message: false,
+          originating_endpoint: "Sender",
+          originating_machine: "mobvm2",
+          body_url: "body_url",
+          message_status: MessageStatus.Successful,
         },
       ],
       endpoint: "Endpoint1",
@@ -440,6 +453,8 @@ const sampleSagaHistory: SagaHistory = {
         time_sent: new Date("2025-03-28T03:04:05.235534Z"),
         message_type: "ServiceControl.SmokeTest.SagaMessage1",
         intent: "Send",
+        body_url: "body_url",
+        message_status: MessageStatus.Successful,
       },
       outgoing_messages: [
         {
@@ -449,6 +464,12 @@ const sampleSagaHistory: SagaHistory = {
           time_sent: new Date("2025-03-28T03:04:05.3715034Z"),
           message_type: "ServiceControl.SmokeTest.MyCustomTimeout",
           intent: "Send",
+          deliver_at: new Date("2025-03-28T03:04:06.293765Z"),
+          is_saga_timeout_message: false,
+          originating_endpoint: "Sender",
+          originating_machine: "mobvm2",
+          body_url: "body_url",
+          message_status: MessageStatus.Successful,
         },
       ],
       endpoint: "Endpoint1",
diff --git a/src/Frontend/src/components/messages2/SagaDiagram.vue b/src/Frontend/src/components/messages2/SagaDiagram.vue
index 1edd63fd0..d186a64ff 100644
--- a/src/Frontend/src/components/messages2/SagaDiagram.vue
+++ b/src/Frontend/src/components/messages2/SagaDiagram.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import { computed, onUnmounted, watch, ref } from "vue";
+import { computed, onUnmounted, watch } from "vue";
 import routeLinks from "@/router/routeLinks";
 import { useSagaDiagramStore } from "@/stores/SagaDiagramStore";
 import { useMessageStore } from "@/stores/MessageStore";
 import { storeToRefs } from "pinia";
 import ToolbarEndpointIcon from "@/assets/Shell_ToolbarEndpoint.svg";
-import { SagaViewModel, parseSagaUpdates } from "./SagaDiagram/useSagaDiagramParser";
+import { SagaViewModel, parseSagaUpdates } from "./SagaDiagram/SagaDiagramParser";
 import { typeToName } from "@/composables/typeHumanizer";
+import LoadingSpinner from "@/components/LoadingSpinner.vue";
 
 //Subcomponents
 import NoSagaData from "./SagaDiagram/NoSagaData.vue";
@@ -15,23 +16,17 @@ import SagaHeader from "./SagaDiagram/SagaHeader.vue";
 import SagaUpdateNode from "./SagaDiagram/SagaUpdateNode.vue";
 import SagaCompletedNode from "./SagaDiagram/SagaCompletedNode.vue";
 
-const showMessageData = ref(false);
-
-const toggleMessageData = () => {
-  showMessageData.value = !showMessageData.value;
-};
-
-const store = useMessageStore();
-const { state: messageState } = storeToRefs(store);
-
 const sagaDiagramStore = useSagaDiagramStore();
+const { showMessageData, loading } = storeToRefs(sagaDiagramStore);
+
+const messageStore = useMessageStore();
 
-//Watch for message and set saga ID when component mounts or message changes
 watch(
-  () => messageState.value.data.invoked_saga,
-  (newSagas) => {
-    if (newSagas.has_saga) {
-      sagaDiagramStore.setSagaId(newSagas.saga_id || "");
+  () => messageStore.state.data.invoked_saga?.has_saga,
+  (hasSaga) => {
+    const saga = messageStore.state.data.invoked_saga;
+    if (hasSaga && saga?.saga_id) {
+      sagaDiagramStore.setSagaId(saga.saga_id);
     } else {
       sagaDiagramStore.clearSagaHistory();
     }
@@ -47,7 +42,7 @@ const vm = computed<SagaViewModel>(() => {
   const completedUpdate = sagaDiagramStore.sagaHistory?.changes.find((update) => update.status === "completed");
   const completionTime = completedUpdate ? new Date(completedUpdate.finish_time) : null;
 
-  const { data } = messageState.value;
+  const { data } = messageStore.state;
   const { invoked_saga: saga } = data;
   const sagaHistory = sagaDiagramStore.sagaHistory;
 
@@ -67,7 +62,7 @@ const vm = computed<SagaViewModel>(() => {
 
     // Display data
     FormattedCompletionTime: completionTime ? `${completionTime.toLocaleDateString()} ${completionTime.toLocaleTimeString()}` : "",
-    SagaUpdates: parseSagaUpdates(sagaHistory),
+    SagaUpdates: parseSagaUpdates(sagaHistory, sagaDiagramStore.messagesData),
     ShowMessageData: showMessageData.value,
   };
 });
@@ -77,20 +72,25 @@ const vm = computed<SagaViewModel>(() => {
   <div class="saga-container">
     <!-- Toolbar header -->
     <div v-if="vm.HasSagaData" class="header">
-      <button :class="['saga-button', { 'saga-button--active': vm.ShowMessageData }]" aria-label="show-message-data-button" @click="toggleMessageData">
+      <button :class="['saga-button', { 'saga-button--active': vm.ShowMessageData }]" aria-label="show-message-data-button" @click="sagaDiagramStore.toggleMessageData">
         <img class="saga-button-icon" :src="ToolbarEndpointIcon" alt="" />
         {{ vm.ShowMessageData ? "Hide Message Data" : "Show Message Data" }}
       </button>
     </div>
 
+    <!-- Loading Spinner -->
+    <div v-if="loading" class="loading-container">
+      <LoadingSpinner />
+    </div>
+
     <!-- No saga Data Available container -->
-    <NoSagaData v-if="!vm.ParticipatedInSaga" />
+    <NoSagaData v-else-if="!vm.ParticipatedInSaga" />
 
     <!-- Saga Audit Plugin Needed container -->
-    <SagaPluginNeeded v-if="vm.ShowNoPluginActiveLegend" />
+    <SagaPluginNeeded v-else-if="vm.ShowNoPluginActiveLegend" />
 
     <!-- Main Saga Data container -->
-    <div v-if="vm.HasSagaData" role="table" aria-label="saga-sequence-list" class="body" style="display: flex">
+    <div v-else-if="vm.HasSagaData" role="table" aria-label="saga-sequence-list" class="body" style="display: flex">
       <div class="container">
         <!-- Saga header with title and navigation -->
         <SagaHeader :saga-title="vm.SagaTitle" :saga-guid="vm.SagaGuid" :message-id-url="vm.MessageIdUrl" />
@@ -133,6 +133,14 @@ const vm = computed<SagaViewModel>(() => {
   min-width: 50rem;
 }
 
+.loading-container {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  min-height: 200px;
+}
+
 /* Button styles */
 
 .saga-button {
diff --git a/src/Frontend/src/components/messages2/SagaDiagram/MessageDataBox.vue b/src/Frontend/src/components/messages2/SagaDiagram/MessageDataBox.vue
index ea3a3a5a8..0da3460a6 100644
--- a/src/Frontend/src/components/messages2/SagaDiagram/MessageDataBox.vue
+++ b/src/Frontend/src/components/messages2/SagaDiagram/MessageDataBox.vue
@@ -1,16 +1,27 @@
 <script setup lang="ts">
+import { SagaMessageDataItem, useSagaDiagramStore } from "@/stores/SagaDiagramStore";
+import { storeToRefs } from "pinia";
+import LoadingSpinner from "@/components/LoadingSpinner.vue";
+
 defineProps<{
-  propertyKey?: string;
-  propertyValue?: string;
-  title?: string;
+  messageData: SagaMessageDataItem[];
 }>();
+
+const sagaDiagramStore = useSagaDiagramStore();
+const { messageDataLoading } = storeToRefs(sagaDiagramStore);
 </script>
 
 <template>
-  <div class="message-data-box">
-    <b class="message-data-box-text">{{ propertyKey || "OrderId" }}</b>
+  <div v-if="messageDataLoading" class="message-data-loading">
+    <LoadingSpinner />
+  </div>
+  <div v-else-if="!messageDataLoading && messageData.length === 0" class="message-data-box">
+    <span class="message-data-box-text--empty">Empty</span>
+  </div>
+  <div v-else-if="messageData.length > 0" v-for="(item, index) in messageData" :key="index" class="message-data-box">
+    <b class="message-data-box-text">{{ item.key }}</b>
     <span class="message-data-box-text">=</span>
-    <span class="message-data-box-text--ellipsis" :title="title || propertyValue || 'Sample ID'">{{ propertyValue || "Sample ID" }}</span>
+    <span class="message-data-box-text--ellipsis" :title="item.value">{{ item.value }}</span>
   </div>
 </template>
 
@@ -32,4 +43,16 @@ defineProps<{
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+
+.message-data-box-text--empty {
+  display: inline-block;
+  width: 100%;
+  text-align: center;
+}
+
+.message-data-loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 </style>
diff --git a/src/Frontend/src/components/messages2/SagaDiagram/useSagaDiagramParser.ts b/src/Frontend/src/components/messages2/SagaDiagram/SagaDiagramParser.ts
similarity index 54%
rename from src/Frontend/src/components/messages2/SagaDiagram/useSagaDiagramParser.ts
rename to src/Frontend/src/components/messages2/SagaDiagram/SagaDiagramParser.ts
index 0814c3d5f..33270100a 100644
--- a/src/Frontend/src/components/messages2/SagaDiagram/useSagaDiagramParser.ts
+++ b/src/Frontend/src/components/messages2/SagaDiagram/SagaDiagramParser.ts
@@ -1,37 +1,40 @@
 import { SagaHistory } from "@/resources/SagaHistory";
 import { typeToName } from "@/composables/typeHumanizer";
+import { SagaMessageData, SagaMessageDataItem } from "@/stores/SagaDiagramStore";
+import { getTimeoutFriendly } from "@/composables/deliveryDelayParser";
 
-export interface SagaMessageDataItem {
-  Key: string;
-  Value: string;
-}
-
-export interface SagaMessage {
+export interface SagaMessageViewModel {
+  MessageId: string;
   MessageFriendlyTypeName: string;
   FormattedTimeSent: string;
   Data: SagaMessageDataItem[];
   IsEventMessage: boolean;
   IsCommandMessage: boolean;
 }
-
-export interface SagaTimeoutMessage extends SagaMessage {
+export interface InitiatingMessageViewModel {
+  MessageType: string;
+  IsSagaTimeoutMessage: boolean;
+  FormattedMessageTimestamp: string;
+  MessageData: SagaMessageDataItem[];
+}
+export interface SagaTimeoutMessageViewModel extends SagaMessageViewModel {
   TimeoutFriendly: string;
 }
 
 export interface SagaUpdateViewModel {
+  MessageId: string;
   StartTime: Date;
   FinishTime: Date;
   FormattedStartTime: string;
-  InitiatingMessageType: string;
-  FormattedInitiatingMessageTimestamp: string;
+  InitiatingMessage: InitiatingMessageViewModel;
   Status: string;
   StatusDisplay: string;
   HasTimeout: boolean;
   IsFirstNode: boolean;
-  NonTimeoutMessages: SagaMessage[];
-  TimeoutMessages: SagaTimeoutMessage[];
-  HasNonTimeoutMessages: boolean;
-  HasTimeoutMessages: boolean;
+  OutgoingMessages: SagaMessageViewModel[];
+  OutgoingTimeoutMessages: SagaTimeoutMessageViewModel[];
+  HasOutgoingMessages: boolean;
+  HasOutgoingTimeoutMessages: boolean;
 }
 
 export interface SagaViewModel {
@@ -47,7 +50,7 @@ export interface SagaViewModel {
   ShowMessageData: boolean;
 }
 
-export function parseSagaUpdates(sagaHistory: SagaHistory | null): SagaUpdateViewModel[] {
+export function parseSagaUpdates(sagaHistory: SagaHistory | null, messagesData: SagaMessageData[]): SagaUpdateViewModel[] {
   if (!sagaHistory || !sagaHistory.changes || !sagaHistory.changes.length) return [];
 
   return sagaHistory.changes
@@ -56,6 +59,9 @@ export function parseSagaUpdates(sagaHistory: SagaHistory | null): SagaUpdateVie
       const finishTime = new Date(update.finish_time);
       const initiatingMessageTimestamp = new Date(update.initiating_message?.time_sent || Date.now());
 
+      // Find message data for initiating message
+      const initiatingMessageData = update.initiating_message ? messagesData.find((m) => m.message_id === update.initiating_message.message_id)?.data || [] : [];
+
       // Create common base message objects with shared properties
       const outgoingMessages = update.outgoing_messages.map((msg) => {
         const delivery_delay = msg.delivery_delay || "00:00:00";
@@ -64,47 +70,55 @@ export function parseSagaUpdates(sagaHistory: SagaHistory | null): SagaUpdateVie
         const timeoutSeconds = delivery_delay.split(":")[2] || "0";
         const isEventMessage = msg.intent === "Publish";
 
+        // Find corresponding message data
+        const messageData = messagesData.find((m) => m.message_id === msg.message_id)?.data || [];
         return {
           MessageType: msg.message_type || "",
           MessageId: msg.message_id,
           FormattedTimeSent: `${timeSent.toLocaleDateString()} ${timeSent.toLocaleTimeString()}`,
           HasTimeout: hasTimeout,
           TimeoutSeconds: timeoutSeconds,
+          TimeoutFriendly: getTimeoutFriendly(delivery_delay),
           MessageFriendlyTypeName: typeToName(msg.message_type || ""),
-          Data: [] as SagaMessageDataItem[],
+          Data: messageData,
           IsEventMessage: isEventMessage,
           IsCommandMessage: !isEventMessage,
         };
       });
 
-      const timeoutMessages = outgoingMessages
+      const outgoingTimeoutMessages = outgoingMessages
         .filter((msg) => msg.HasTimeout)
         .map(
           (msg) =>
             ({
               ...msg,
-              TimeoutFriendly: `${msg.TimeoutSeconds}s`, //TODO: Update with logic from ServiceInsight
-            }) as SagaTimeoutMessage
+              TimeoutFriendly: `${msg.TimeoutFriendly}`,
+            }) as SagaTimeoutMessageViewModel
         );
 
-      const nonTimeoutMessages = outgoingMessages.filter((msg) => !msg.HasTimeout) as SagaMessage[];
+      const regularMessages = outgoingMessages.filter((msg) => !msg.HasTimeout) as SagaMessageViewModel[];
 
-      const hasTimeout = timeoutMessages.length > 0;
+      const hasTimeout = outgoingTimeoutMessages.length > 0;
 
       return {
+        MessageId: update.initiating_message?.message_id || "",
         StartTime: startTime,
         FinishTime: finishTime,
         FormattedStartTime: `${startTime.toLocaleDateString()} ${startTime.toLocaleTimeString()}`,
         Status: update.status,
         StatusDisplay: update.status === "new" ? "Saga Initiated" : "Saga Updated",
-        InitiatingMessageType: typeToName(update.initiating_message?.message_type || "Unknown Message") || "",
-        FormattedInitiatingMessageTimestamp: `${initiatingMessageTimestamp.toLocaleDateString()} ${initiatingMessageTimestamp.toLocaleTimeString()}`,
+        InitiatingMessage: <InitiatingMessageViewModel>{
+          MessageType: typeToName(update.initiating_message?.message_type || "Unknown Message") || "",
+          FormattedMessageTimestamp: `${initiatingMessageTimestamp.toLocaleDateString()} ${initiatingMessageTimestamp.toLocaleTimeString()}`,
+          MessageData: initiatingMessageData,
+          IsSagaTimeoutMessage: update.initiating_message?.is_saga_timeout_message || false,
+        },
         HasTimeout: hasTimeout,
         IsFirstNode: update.status === "new",
-        TimeoutMessages: timeoutMessages,
-        NonTimeoutMessages: nonTimeoutMessages,
-        HasNonTimeoutMessages: nonTimeoutMessages.length > 0,
-        HasTimeoutMessages: timeoutMessages.length > 0,
+        OutgoingTimeoutMessages: outgoingTimeoutMessages,
+        OutgoingMessages: regularMessages,
+        HasOutgoingMessages: regularMessages.length > 0,
+        HasOutgoingTimeoutMessages: outgoingTimeoutMessages.length > 0,
       };
     })
     .sort((a, b) => a.StartTime.getTime() - b.StartTime.getTime())
diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingMessage.vue b/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingMessage.vue
new file mode 100644
index 000000000..433a84d78
--- /dev/null
+++ b/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingMessage.vue
@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import MessageDataBox from "./MessageDataBox.vue";
+import CommandIcon from "@/assets/command.svg";
+import EventIcon from "@/assets/event.svg";
+import { SagaMessageViewModel } from "./SagaDiagramParser";
+
+defineProps<{
+  message: SagaMessageViewModel;
+  showMessageData?: boolean;
+}>();
+</script>
+
+<template>
+  <div class="cell-inner cell-inner-side">
+    <img class="saga-icon saga-icon--side-cell" :src="message.IsEventMessage ? EventIcon : CommandIcon" :alt="message.IsEventMessage ? 'Event' : 'Command'" />
+    <h2 class="message-title">{{ message.MessageFriendlyTypeName }}</h2>
+    <div class="timestamp">{{ message.FormattedTimeSent }}</div>
+  </div>
+  <div v-if="showMessageData" class="message-data message-data--active">
+    <MessageDataBox :messageData="message.Data" />
+  </div>
+</template>
+
+<style scoped>
+.row {
+  display: flex;
+}
+
+.row--right {
+  justify-content: right;
+}
+
+.cell {
+  padding: 0;
+}
+
+.cell--center {
+  width: 50%;
+  background-color: #f2f2f2;
+  border: 0;
+}
+
+.cell--side {
+  align-self: flex-end;
+  width: 25%;
+  padding: 0;
+}
+
+.cell--top-border {
+  display: flex;
+  flex-direction: column;
+}
+
+.cell-inner-top {
+  border-top: solid 2px #000000;
+  margin-left: 1rem;
+}
+
+.cell-inner-line {
+  flex-grow: 1;
+  padding: 0.25rem 0.5rem;
+  border-left: solid 2px #000000;
+  margin-left: 1rem;
+}
+
+.cell-inner-side--active {
+  border: solid 2px #000000;
+}
+
+.cell-inner-right {
+  position: relative;
+  min-height: 2.5rem;
+  border: solid 2px #000000;
+  border-left: 0;
+  border-bottom: 0;
+  margin-right: 50%;
+}
+
+.cell-inner-right:after {
+  position: absolute;
+  display: block;
+  content: "";
+  border: solid 6px #000000;
+  border-top-width: 10px;
+  border-left-color: transparent;
+  border-right-color: transparent;
+  border-bottom: 0;
+  bottom: 0;
+  margin-left: 100%;
+  left: -5px;
+}
+
+.message-title {
+  margin: 0;
+  font-size: 0.9rem;
+  font-weight: 900;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.timestamp {
+  font-size: 0.9rem;
+}
+
+.message-data {
+  display: none;
+  padding: 0.2rem;
+  background-color: #ffffff;
+  border: solid 1px #cccccc;
+  font-size: 0.75rem;
+}
+
+.message-data--active {
+  display: block;
+}
+
+.timeout-status {
+  display: inline-block;
+  font-size: 1rem;
+  font-weight: 900;
+}
+
+.saga-icon--center-cell {
+  float: none;
+  display: inline;
+  width: 1rem;
+  height: 1rem;
+  margin-top: -0.3rem;
+}
+
+.saga-icon--overlap {
+  margin-left: -1rem;
+}
+
+.cell-inner-side:nth-child(-n + 2) {
+  margin-top: 0;
+}
+
+.cell-inner-side {
+  margin-top: 1rem;
+  padding: 0.25rem 0.25rem 0;
+  border: solid 2px #cccccc;
+  background-color: #cccccc;
+}
+
+.cell-inner-side--active {
+  border: solid 2px #000000;
+}
+.saga-icon {
+  display: block;
+  float: left;
+  margin-right: 0.35rem;
+}
+
+.saga-icon--side-cell {
+  width: 2rem;
+  height: 2rem;
+  padding: 0.23rem;
+}
+</style>
diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaTimeoutMessage.vue b/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingTimeoutMessage.vue
similarity index 95%
rename from src/Frontend/src/components/messages2/SagaDiagram/SagaTimeoutMessage.vue
rename to src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingTimeoutMessage.vue
index ed253fca7..76e255ebe 100644
--- a/src/Frontend/src/components/messages2/SagaDiagram/SagaTimeoutMessage.vue
+++ b/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingTimeoutMessage.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { SagaTimeoutMessage } from "./useSagaDiagramParser";
+import { SagaTimeoutMessageViewModel } from "./SagaDiagramParser";
 import MessageDataBox from "./MessageDataBox.vue";
 import TimeoutIcon from "@/assets/TimeoutIcon.svg";
 import SagaTimeoutIcon from "@/assets/SagaTimeoutIcon.svg";
 
 defineProps<{
-  message: SagaTimeoutMessage;
+  message: SagaTimeoutMessageViewModel;
   isLastMessage: boolean;
   showMessageData?: boolean;
 }>();
@@ -32,7 +32,7 @@ defineProps<{
         <div class="timestamp" aria-label="timeout message timestamp">{{ message.FormattedTimeSent }}</div>
       </div>
       <div v-if="showMessageData" class="message-data message-data--active">
-        <MessageDataBox />
+        <MessageDataBox :messageData="message.Data" />
       </div>
     </div>
   </div>
diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue b/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue
index 26bc94ae9..96627dd35 100644
--- a/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue
+++ b/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
-import { SagaUpdateViewModel } from "./useSagaDiagramParser";
+import { SagaUpdateViewModel } from "./SagaDiagramParser";
 import MessageDataBox from "./MessageDataBox.vue";
-import SagaTimeoutMessage from "./SagaTimeoutMessage.vue";
+import SagaOutgoingTimeoutMessage from "./SagaOutgoingTimeoutMessage.vue";
+import SagaOutgoingMessage from "./SagaOutgoingMessage.vue";
 
 // Import the images directly
 import CommandIcon from "@/assets/command.svg";
-import EventIcon from "@/assets/event.svg";
 import SagaInitiatedIcon from "@/assets/SagaInitiatedIcon.svg";
 import SagaUpdatedIcon from "@/assets/SagaUpdatedIcon.svg";
-
+import TimeoutIcon from "@/assets/timeout.svg";
+import SagaTimeoutIcon from "@/assets/SagaTimeoutIcon.svg";
 defineProps<{
   update: SagaUpdateViewModel;
   showMessageData?: boolean;
@@ -21,13 +22,18 @@ defineProps<{
     <div class="row">
       <div class="cell cell--side">
         <div class="cell-inner cell-inner-side">
-          <img class="saga-icon saga-icon--side-cell" :src="CommandIcon" alt="" />
-          <h2 class="message-title" aria-label="initiating message type">{{ update.InitiatingMessageType }}</h2>
-          <div class="timestamp" aria-label="initiating message timestamp">{{ update.FormattedInitiatingMessageTimestamp }}</div>
+          <img class="saga-icon saga-icon--side-cell" :src="update.InitiatingMessage.IsSagaTimeoutMessage ? TimeoutIcon : CommandIcon" alt="" />
+          <h2 class="message-title" aria-label="initiating message type">{{ update.InitiatingMessage.MessageType }}</h2>
+          <div class="timestamp" aria-label="initiating message timestamp">{{ 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="" />
+            <h2 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>
@@ -41,7 +47,7 @@ defineProps<{
       <div class="cell cell--side cell--left-border cell--aling-top">
         <div v-if="showMessageData" class="message-data message-data--active">
           <!-- Generic message data box -->
-          <MessageDataBox v-if="update.InitiatingMessageType" />
+          <MessageDataBox v-if="update.InitiatingMessage.MessageType" :messageData="update.InitiatingMessage.MessageData" />
         </div>
       </div>
 
@@ -65,23 +71,14 @@ defineProps<{
       </div>
 
       <!-- Right side - outgoing messages (non-timeout) -->
-      <div class="cell cell--side cell--aling-top" v-if="update.HasNonTimeoutMessages">
+      <div class="cell cell--side cell--aling-top" v-if="update.HasOutgoingMessages">
         <div class="cell-inner cell-inner-right"></div>
-        <template v-for="(msg, msgIndex) in update.NonTimeoutMessages" :key="msgIndex">
-          <div class="cell-inner cell-inner-side">
-            <img class="saga-icon saga-icon--side-cell" :src="msg.IsEventMessage ? EventIcon : CommandIcon" :alt="msg.IsEventMessage ? 'Event' : 'Command'" />
-            <h2 class="message-title">{{ msg.MessageFriendlyTypeName }}</h2>
-            <div class="timestamp">{{ msg.FormattedTimeSent }}</div>
-          </div>
-          <div v-if="showMessageData" class="message-data message-data--active">
-            <MessageDataBox />
-          </div>
-        </template>
+        <SagaOutgoingMessage v-for="(msg, msgIndex) in update.OutgoingMessages" :key="msgIndex" :message="msg" :showMessageData="showMessageData" />
       </div>
     </div>
 
     <!-- Display each outgoing timeout message in separate rows -->
-    <SagaTimeoutMessage v-for="(msg, msgIndex) in update.TimeoutMessages" :key="'timeout-' + msgIndex" :message="msg" :isLastMessage="msgIndex === update.TimeoutMessages.length - 1" :showMessageData="showMessageData" />
+    <SagaOutgoingTimeoutMessage v-for="(msg, msgIndex) in update.OutgoingTimeoutMessages" :key="'timeout-' + msgIndex" :message="msg" :isLastMessage="msgIndex === update.OutgoingTimeoutMessages.length - 1" :showMessageData="showMessageData" />
   </div>
 </template>
 
@@ -305,4 +302,10 @@ defineProps<{
   height: 1rem;
   margin-top: -0.3rem;
 }
+.timeout-status {
+  display: inline-block;
+  font-size: 1rem;
+  font-weight: 900;
+  color: #00a3c4;
+}
 </style>
diff --git a/src/Frontend/src/composables/deliveryDelayParser.ts b/src/Frontend/src/composables/deliveryDelayParser.ts
new file mode 100644
index 000000000..c06f11fb6
--- /dev/null
+++ b/src/Frontend/src/composables/deliveryDelayParser.ts
@@ -0,0 +1,14 @@
+export function parseDeliveryDelay(delay: string): { hours: number; minutes: number; seconds: number } {
+  const [hours, minutes, seconds] = delay.split(":").map(Number);
+  return { hours, minutes, seconds };
+}
+
+function getFriendly(time: number, text: string): string {
+  return time > 0 ? `${time}${text}` : "";
+}
+
+export function getTimeoutFriendly(delivery_delay: string): string {
+  const { hours, minutes, seconds } = parseDeliveryDelay(delivery_delay);
+
+  return `${getFriendly(hours, "h")}${getFriendly(minutes, "m")}${getFriendly(seconds, "s")}`;
+}
diff --git a/src/Frontend/src/composables/serviceServiceControlUrls.ts b/src/Frontend/src/composables/serviceServiceControlUrls.ts
index 4fb329cc7..643cbf67a 100644
--- a/src/Frontend/src/composables/serviceServiceControlUrls.ts
+++ b/src/Frontend/src/composables/serviceServiceControlUrls.ts
@@ -47,8 +47,15 @@ export function useIsMonitoringEnabled() {
   return !useIsMonitoringDisabled();
 }
 
-export function useFetchFromServiceControl(suffix: string) {
-  return fetch(serviceControlUrl.value + suffix);
+export function useFetchFromServiceControl(suffix: string, options?: { cache?: RequestCache }) {
+  const requestOptions: RequestInit = {
+    method: "GET",
+    cache: options?.cache ?? "default", // Default  if not specified
+    headers: {
+      Accept: "application/json",
+    },
+  };
+  return fetch(serviceControlUrl.value + suffix, requestOptions);
 }
 
 export async function useTypedFetchFromServiceControl<T>(suffix: string): Promise<[Response, T]> {
diff --git a/src/Frontend/src/resources/SagaHistory.ts b/src/Frontend/src/resources/SagaHistory.ts
index bb3d8e75f..216b754d7 100644
--- a/src/Frontend/src/resources/SagaHistory.ts
+++ b/src/Frontend/src/resources/SagaHistory.ts
@@ -1,3 +1,5 @@
+import { MessageStatus } from "./Message";
+
 export interface SagaHistory {
   id: string;
   saga_id: string;
@@ -10,12 +12,12 @@ export interface SagaStateChange {
   finish_time: Date;
   status: string;
   state_after_change: string;
-  initiating_message: InitiatingMessage;
+  initiating_message: SagaMessage;
   outgoing_messages: OutgoingMessage[];
   endpoint: string;
 }
 
-export interface InitiatingMessage {
+export interface SagaMessage {
   message_id: string;
   is_saga_timeout_message: boolean;
   originating_endpoint: string;
@@ -23,13 +25,12 @@ export interface InitiatingMessage {
   time_sent: Date;
   message_type: string;
   intent: string;
+  body_url: string;
+  message_status: MessageStatus;
 }
 
-export interface OutgoingMessage {
+export interface OutgoingMessage extends SagaMessage {
   delivery_delay?: string;
   destination: string;
-  message_id: string;
-  time_sent: Date;
-  message_type: string;
-  intent: string;
+  deliver_at: Date;
 }
diff --git a/src/Frontend/src/stores/SagaDiagramStore.ts b/src/Frontend/src/stores/SagaDiagramStore.ts
index e99ddccce..7641e8c25 100644
--- a/src/Frontend/src/stores/SagaDiagramStore.ts
+++ b/src/Frontend/src/stores/SagaDiagramStore.ts
@@ -1,22 +1,43 @@
 import { acceptHMRUpdate, defineStore } from "pinia";
 import { ref, watch } from "vue";
-import { SagaHistory } from "@/resources/SagaHistory";
+import { SagaHistory, SagaMessage } from "@/resources/SagaHistory";
 import { useFetchFromServiceControl } from "@/composables/serviceServiceControlUrls";
+import Message from "@/resources/Message";
 
-export const useSagaDiagramStore = defineStore("sagaHistory", () => {
+const StandardKeys = ["$type", "Id", "Originator", "OriginalMessageId"];
+export interface SagaMessageDataItem {
+  key: string;
+  value: string;
+}
+export interface SagaMessageData {
+  message_id: string;
+  data: SagaMessageDataItem[];
+}
+export const useSagaDiagramStore = defineStore("SagaDiagramStore", () => {
   const sagaHistory = ref<SagaHistory | null>(null);
   const sagaId = ref<string | null>(null);
   const loading = ref(false);
+  const messageDataLoading = ref(false);
   const error = ref<string | null>(null);
+  const showMessageData = ref(false);
+  const fetchedMessages = ref(new Set<string>());
+  const messagesData = ref<SagaMessageData[]>([]);
+  const MessageBodyEndpoint = "messages/{0}/body";
 
-  // Watch for changes to sagaId and fetch saga history data
+  // Watch the sagaId and fetch saga history when it changes
   watch(sagaId, async (newSagaId) => {
-    if (!newSagaId) {
-      sagaHistory.value = null;
-      return;
+    if (newSagaId) {
+      await fetchSagaHistory(newSagaId);
+    } else {
+      clearSagaHistory();
     }
+  });
 
-    await fetchSagaHistory(newSagaId);
+  // Watch both showMessageData and sagaHistory together
+  watch([showMessageData, sagaHistory], async ([show, history]) => {
+    if (show && history) {
+      await fetchMessagesData(history);
+    }
   });
 
   function setSagaId(id: string | null) {
@@ -40,7 +61,6 @@ export const useSagaDiagramStore = defineStore("sagaHistory", () => {
         error.value = "Failed to fetch saga history";
       } else {
         const data = await response.json();
-
         sagaHistory.value = data;
       }
     } catch (e) {
@@ -51,20 +71,194 @@ export const useSagaDiagramStore = defineStore("sagaHistory", () => {
     }
   }
 
+  function createEmptyMessageData(message_id: string): SagaMessageData {
+    return {
+      message_id,
+      data: [],
+    };
+  }
+
+  async function fetchSagaMessageData(message: SagaMessage): Promise<SagaMessageData> {
+    const bodyUrl = (message.body_url ?? formatUrl(MessageBodyEndpoint, message.message_id)).replace(/^\//, "");
+
+    try {
+      const response = await useFetchFromServiceControl(bodyUrl, { cache: "no-store" });
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const body = await response.json();
+
+      if (!body) {
+        return createEmptyMessageData(message.message_id);
+      }
+
+      let data: SagaMessageDataItem[];
+      if (typeof body === "string" && body.trim().startsWith("<?xml")) {
+        data = getXmlData(body);
+      } else {
+        data = processJsonValues(body);
+      }
+      // Check if parsed data is empty
+      if (!data || data.length === 0) {
+        return createEmptyMessageData(message.message_id);
+      }
+      return {
+        message_id: message.message_id,
+        data,
+      };
+    } catch (e) {
+      error.value = e instanceof Error ? e.message : "Unknown error occurred";
+      return createEmptyMessageData(message.message_id);
+    }
+  }
+
+  async function getAuditMessages(sagaId: string) {
+    try {
+      const response = await useFetchFromServiceControl(`messages/search?q=${sagaId}`);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      return await response.json();
+    } catch (error) {
+      console.error("Error fetching audit messages:", error);
+      return { result: [] };
+    }
+  }
+
+  function getXmlData(xmlString: string): SagaMessageDataItem[] {
+    try {
+      const parser = new DOMParser();
+      const xmlDoc = parser.parseFromString(xmlString, "application/xml");
+
+      // Get the root element
+      const rootElement = xmlDoc.documentElement;
+      if (!rootElement) {
+        return [];
+      }
+
+      // Handle both v5 and pre-v5 message formats
+      const messageRoot = rootElement.nodeName === "Messages" ? Array.from(rootElement.children)[0] : rootElement;
+
+      if (!messageRoot) {
+        return [];
+      }
+
+      // Convert child elements to SagaMessageDataItems
+      return Array.from(messageRoot.children).map((node) => ({
+        key: node.nodeName,
+        value: node.textContent?.trim() || "",
+      }));
+    } catch (error) {
+      console.error("Error parsing message data:", error);
+      return [];
+    }
+  }
+
+  // Replace or modify the existing processJsonValues function
+  function processJsonValues(jsonBody: string | Record<string, unknown>): SagaMessageDataItem[] {
+    let parsedBody: Record<string, unknown>;
+    if (typeof jsonBody === "string") {
+      try {
+        parsedBody = JSON.parse(jsonBody);
+      } catch (e) {
+        console.error("Error parsing JSON:", e);
+        return [];
+      }
+    } else {
+      parsedBody = jsonBody;
+    }
+
+    const items: SagaMessageDataItem[] = [];
+
+    for (const key in parsedBody) {
+      if (!StandardKeys.includes(key)) {
+        items.push({
+          key: key,
+          value: String(parsedBody[key] ?? ""),
+        });
+      }
+    }
+
+    return items;
+  }
+
   function clearSagaHistory() {
     sagaHistory.value = null;
     sagaId.value = null;
     error.value = null;
+    fetchedMessages.value.clear();
+    messagesData.value = [];
+  }
+
+  function formatUrl(template: string, id: string): string {
+    return template.replace("{0}", id);
+  }
+
+  function toggleMessageData() {
+    showMessageData.value = !showMessageData.value;
+  }
+
+  async function fetchMessagesData(history: SagaHistory) {
+    messageDataLoading.value = true;
+    error.value = null;
+
+    try {
+      // Get all messages from changes array - both initiating and outgoing
+      const messagesToFetch = history.changes.flatMap((change) => {
+        const messages: SagaMessage[] = [];
+
+        // Add initiating message if it exists and hasn't been fetched
+        if (change.initiating_message && !fetchedMessages.value.has(change.initiating_message.message_id)) {
+          messages.push(change.initiating_message);
+        }
+
+        // Add all unfetched outgoing messages
+        if (change.outgoing_messages) {
+          messages.push(...change.outgoing_messages.filter((msg) => !fetchedMessages.value.has(msg.message_id)));
+        }
+        return messages;
+      });
+
+      // Check if any messages need body_url
+      const needsBodyUrl = messagesToFetch.every((msg) => !msg.body_url);
+      if (needsBodyUrl && messagesToFetch.length > 0) {
+        const auditMessages = await getAuditMessages(sagaId.value!);
+        messagesToFetch.forEach((message) => {
+          const auditMessage = auditMessages.find((x: Message) => x.message_id === message.message_id);
+          if (auditMessage) {
+            message.body_url = auditMessage.body_url;
+          }
+        });
+      }
+
+      // Fetch data for each unfetched message in parallel and store results
+      const fetchPromises = messagesToFetch.map(async (message) => {
+        const data = await fetchSagaMessageData(message);
+        fetchedMessages.value.add(message.message_id);
+        return data;
+      });
+
+      const newMessageData = await Promise.all(fetchPromises);
+      // Add new message data to the existing array
+      messagesData.value = [...messagesData.value, ...newMessageData];
+    } catch (e) {
+      error.value = e instanceof Error ? e.message : "Unknown error occurred";
+    } finally {
+      messageDataLoading.value = false;
+    }
   }
 
   return {
     sagaHistory,
     sagaId,
     loading,
+    messageDataLoading,
     error,
+    showMessageData,
+    messagesData,
     setSagaId,
-    fetchSagaHistory,
     clearSagaHistory,
+    toggleMessageData,
   };
 });