diff --git a/src/Frontend/package-lock.json b/src/Frontend/package-lock.json
index 0d48e88dc..b2ae249a4 100644
--- a/src/Frontend/package-lock.json
+++ b/src/Frontend/package-lock.json
@@ -19,6 +19,7 @@
         "bootstrap": "^5.3.5",
         "bootstrap-icons": "^1.11.3",
         "codemirror": "^6.0.1",
+        "diff": "^7.0.0",
         "hex-to-css-filter": "^6.0.0",
         "lodash.debounce": "^4.0.8",
         "lossless-json": "^4.0.2",
@@ -43,6 +44,7 @@
         "@testing-library/vue": "^8.1.0",
         "@tsconfig/node18": "^18.2.4",
         "@types/bootstrap": "^5.2.10",
+        "@types/diff": "^7.0.2",
         "@types/lodash": "^4.17.16",
         "@types/node": "^22.15.3",
         "@vitejs/plugin-vue": "^5.2.3",
@@ -1967,6 +1969,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/diff": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@types/diff/-/diff-7.0.2.tgz",
+      "integrity": "sha512-JSWRMozjFKsGlEjiiKajUjIJVKuKdE3oVy2DNtK+fUo8q82nhFZ2CPQwicAIkXrofahDXrWJ7mjelvZphMS98Q==",
+      "dev": true
+    },
     "node_modules/@types/estree": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
@@ -3635,6 +3643,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/diff": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-7.0.0.tgz",
+      "integrity": "sha512-PJWHUb1RFevKCwaFA9RlG5tCd+FO5iRh9A8HEtkmBH2Li03iJriB6m6JIN4rGz3K3JLawI7/veA1xzRKP6ISBw==",
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
     "node_modules/dom-accessibility-api": {
       "version": "0.5.16",
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
diff --git a/src/Frontend/package.json b/src/Frontend/package.json
index 938670c35..647ccaa19 100644
--- a/src/Frontend/package.json
+++ b/src/Frontend/package.json
@@ -28,6 +28,7 @@
     "bootstrap": "^5.3.5",
     "bootstrap-icons": "^1.11.3",
     "codemirror": "^6.0.1",
+    "diff": "^7.0.0",
     "hex-to-css-filter": "^6.0.0",
     "lodash.debounce": "^4.0.8",
     "lossless-json": "^4.0.2",
@@ -52,6 +53,7 @@
     "@testing-library/vue": "^8.1.0",
     "@tsconfig/node18": "^18.2.4",
     "@types/bootstrap": "^5.2.10",
+    "@types/diff": "^7.0.2",
     "@types/lodash": "^4.17.16",
     "@types/node": "^22.15.3",
     "@vitejs/plugin-vue": "^5.2.3",
diff --git a/src/Frontend/src/assets/diff-close.svg b/src/Frontend/src/assets/diff-close.svg
new file mode 100644
index 000000000..b93e269dd
--- /dev/null
+++ b/src/Frontend/src/assets/diff-close.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/Frontend/src/assets/diff-maximize.svg b/src/Frontend/src/assets/diff-maximize.svg
new file mode 100644
index 000000000..72b9dbc89
--- /dev/null
+++ b/src/Frontend/src/assets/diff-maximize.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3 3V9H5V5H9V3H3ZM3 21H9V19H5V15H3V21ZM21 3H15V5H19V9H21V3ZM15 21H21V15H19V19H15V21Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/src/Frontend/src/components/CodeEditor.vue b/src/Frontend/src/components/CodeEditor.vue
index 2d1c0020d..15d825466 100644
--- a/src/Frontend/src/components/CodeEditor.vue
+++ b/src/Frontend/src/components/CodeEditor.vue
@@ -19,6 +19,7 @@ const props = withDefaults(
     showGutter?: boolean;
     showCopyToClipboard?: boolean;
     ariaLabel?: string;
+    css?: string;
   }>(),
   { readOnly: true, showGutter: true, showCopyToClipboard: true }
 );
@@ -49,7 +50,7 @@ const extensions = computed(() => {
 </script>
 
 <template>
-  <div class="wrapper" :aria-label="ariaLabel">
+  <div class="wrapper" :aria-label="ariaLabel" :class="css">
     <div v-if="props.showCopyToClipboard" class="toolbar">
       <CopyToClipboard :value="code" />
     </div>
diff --git a/src/Frontend/src/components/messages2/DiffContent.vue b/src/Frontend/src/components/messages2/DiffContent.vue
new file mode 100644
index 000000000..2561ab087
--- /dev/null
+++ b/src/Frontend/src/components/messages2/DiffContent.vue
@@ -0,0 +1,401 @@
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import * as diff from "diff";
+
+// Types needed for the diff viewer
+interface DiffChange {
+  value: string;
+  added?: boolean;
+  removed?: boolean;
+}
+
+interface LineInformation {
+  left: DiffInformation;
+  right: DiffInformation;
+}
+
+interface DiffInformation {
+  value: string;
+  lineNumber?: number;
+  type: DiffType;
+}
+
+enum DiffType {
+  DEFAULT = 0,
+  ADDED = 1,
+  REMOVED = 2,
+}
+
+// Types for rendered diff items
+interface FoldItem {
+  type: "fold";
+  count: number;
+  blockNumber: number;
+  leftLineNumber?: number;
+  rightLineNumber?: number;
+}
+
+interface LineItem {
+  type: "line";
+  lineInfo: LineInformation;
+  index: number;
+}
+
+type DiffItem = FoldItem | LineItem;
+
+interface Props {
+  oldValue: string;
+  newValue: string;
+  splitView?: boolean;
+  hideLineNumbers?: boolean;
+  showDiffOnly?: boolean;
+  extraLinesSurroundingDiff?: number;
+  leftTitle?: string;
+  rightTitle?: string;
+  compareMethod?: "diffChars" | "diffWords" | "diffWordsWithSpace" | "diffLines" | "diffTrimmedLines" | "diffSentences" | "diffCss";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  splitView: true,
+  hideLineNumbers: false,
+  showDiffOnly: false,
+  extraLinesSurroundingDiff: 3,
+  leftTitle: "Previous",
+  rightTitle: "Current",
+  compareMethod: "diffLines",
+});
+
+// Component state
+const lineInformation = ref<LineInformation[]>([]);
+const diffLines = ref<number[]>([]);
+const expandedBlocks = ref<number[]>([]);
+
+// Compute diff when inputs change
+const computeDiff = (): void => {
+  const { oldValue, newValue, compareMethod } = props;
+
+  // Skip processing if values are identical
+  if (oldValue === newValue) {
+    const lines = newValue.split("\n");
+    if (lines[lines.length - 1] === "") {
+      lines.pop();
+    }
+
+    const result: LineInformation[] = [];
+    let lineNumber = 1;
+
+    lines.forEach((line) => {
+      result.push({
+        left: { value: line, lineNumber: lineNumber, type: DiffType.DEFAULT },
+        right: { value: line, lineNumber: lineNumber++, type: DiffType.DEFAULT },
+      });
+    });
+
+    lineInformation.value = result;
+    diffLines.value = [];
+    return;
+  }
+
+  // Generate diff based on selected method
+  let diffOutput: DiffChange[];
+  switch (compareMethod) {
+    case "diffChars":
+      diffOutput = diff.diffChars(oldValue, newValue);
+      break;
+    case "diffWords":
+      diffOutput = diff.diffWords(oldValue, newValue);
+      break;
+    case "diffWordsWithSpace":
+      diffOutput = diff.diffWordsWithSpace(oldValue, newValue);
+      break;
+    case "diffTrimmedLines":
+      diffOutput = diff.diffTrimmedLines(oldValue, newValue);
+      break;
+    case "diffSentences":
+      diffOutput = diff.diffSentences(oldValue, newValue);
+      break;
+    case "diffCss":
+      diffOutput = diff.diffCss(oldValue, newValue);
+      break;
+    case "diffLines":
+    default:
+      diffOutput = diff.diffLines(oldValue, newValue);
+      break;
+  }
+
+  // Process the diff output into line information
+  const result: LineInformation[] = [];
+  const diffLinesArray: number[] = [];
+  let leftLineNumber = 1;
+  let rightLineNumber = 1;
+  let counter = 0;
+
+  diffOutput.forEach((part) => {
+    const lines = part.value.split("\n");
+    // Remove empty line at the end if it exists
+    if (lines[lines.length - 1] === "") {
+      lines.pop();
+    }
+
+    if (!part.added && !part.removed) {
+      // Unchanged lines
+      lines.forEach((line) => {
+        result.push({
+          left: { value: line, lineNumber: leftLineNumber++, type: DiffType.DEFAULT },
+          right: { value: line, lineNumber: rightLineNumber++, type: DiffType.DEFAULT },
+        });
+        counter++;
+      });
+    } else if (part.removed) {
+      // Removed lines (left side)
+      lines.forEach((line) => {
+        diffLinesArray.push(counter);
+        result.push({
+          left: { value: line, lineNumber: leftLineNumber++, type: DiffType.REMOVED },
+          right: { value: "", type: DiffType.DEFAULT },
+        });
+        counter++;
+      });
+    } else if (part.added) {
+      // Added lines (right side)
+      lines.forEach((line) => {
+        diffLinesArray.push(counter);
+        result.push({
+          left: { value: "", type: DiffType.DEFAULT },
+          right: { value: line, lineNumber: rightLineNumber++, type: DiffType.ADDED },
+        });
+        counter++;
+      });
+    }
+  });
+
+  lineInformation.value = result;
+  diffLines.value = diffLinesArray;
+
+  // Reset expanded blocks when diff changes
+  expandedBlocks.value = [];
+};
+
+// Toggle a code fold block
+const onBlockExpand = (id: number): void => {
+  if (!expandedBlocks.value.includes(id)) {
+    expandedBlocks.value.push(id);
+  }
+};
+
+// Render the diff with code folding for unchanged lines
+const renderDiff = computed<DiffItem[]>(() => {
+  if (!lineInformation.value.length) return [];
+
+  const { showDiffOnly, extraLinesSurroundingDiff } = props;
+  const extraLines = extraLinesSurroundingDiff < 0 ? 0 : extraLinesSurroundingDiff;
+
+  let skippedLines: number[] = [];
+  const result: DiffItem[] = [];
+
+  // Create a mutable copy of diffLines for manipulation in the loop
+  const currentDiffLines = [...diffLines.value];
+
+  lineInformation.value.forEach((line, i) => {
+    const diffBlockStart = currentDiffLines[0];
+    const currentPosition = diffBlockStart !== undefined ? diffBlockStart - i : undefined;
+
+    // Check if this line should be shown or folded
+    if (showDiffOnly) {
+      // At boundary of diff section, process any accumulated skipped lines
+      if (currentPosition === -extraLines) {
+        skippedLines = [];
+        currentDiffLines.shift();
+      }
+
+      // If this is a default line far from changes and not in an expanded block, accumulate it
+      if (line.left.type === DiffType.DEFAULT && ((currentPosition !== undefined && currentPosition > extraLines) || typeof diffBlockStart === "undefined") && !expandedBlocks.value.includes(diffBlockStart)) {
+        skippedLines.push(i + 1);
+
+        // If we're at the end and have accumulated skipped lines, render the fold indicator
+        if (i === lineInformation.value.length - 1 && skippedLines.length > 1) {
+          result.push({
+            type: "fold",
+            count: skippedLines.length,
+            blockNumber: diffBlockStart,
+            leftLineNumber: line.left.lineNumber,
+            rightLineNumber: line.right.lineNumber,
+          });
+        }
+        return;
+      }
+    }
+
+    // If we have accumulated skipped lines and this line should be shown, display the fold indicator
+    if (currentPosition === extraLines && skippedLines.length > 0) {
+      const count = skippedLines.length;
+      skippedLines = [];
+
+      result.push({
+        type: "fold",
+        count,
+        blockNumber: diffBlockStart,
+        leftLineNumber: line.left.lineNumber,
+        rightLineNumber: line.right.lineNumber,
+      });
+    }
+
+    // Add the actual line content
+    result.push({
+      type: "line",
+      lineInfo: line,
+      index: i,
+    });
+  });
+
+  return result;
+});
+
+// Compute the diff on initial load and when inputs change
+watch(
+  () => [props.oldValue, props.newValue, props.compareMethod, props.showDiffOnly, props.extraLinesSurroundingDiff],
+  () => {
+    computeDiff();
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <div class="diff-container" :class="{ 'split-view': splitView }">
+    <!-- Headers -->
+    <div v-if="leftTitle || rightTitle" class="diff-headers">
+      <div class="diff-header">{{ leftTitle }}</div>
+      <div v-if="splitView" class="diff-header">{{ rightTitle }}</div>
+    </div>
+
+    <!-- Diff content -->
+    <div class="diff-content">
+      <!-- Left side (old) -->
+      <div v-if="splitView" class="diff-column">
+        <div class="diff-lines">
+          <template v-for="(item, itemIndex) in renderDiff" :key="`diff-left-${itemIndex}`">
+            <!-- Code fold indicator -->
+            <div v-if="item.type === 'fold'" class="diff-fold">
+              <button @click="onBlockExpand(item.blockNumber)" class="diff-fold-button">
+                {{ `⟨ Expand ${item.count} lines... ⟩` }}
+              </button>
+            </div>
+
+            <!-- Regular line content -->
+            <div v-else-if="item.type === 'line'" :class="['diff-line', { 'diff-line-removed': item.lineInfo.left.type === DiffType.REMOVED }]">
+              <span v-if="!hideLineNumbers" class="diff-line-number">{{ item.lineInfo.left.lineNumber }}</span>
+              <span class="diff-line-content">{{ item.lineInfo.left.value }}</span>
+            </div>
+          </template>
+        </div>
+      </div>
+
+      <!-- Right side (new) -->
+      <div class="diff-column">
+        <div class="diff-lines">
+          <template v-for="(item, itemIndex) in renderDiff" :key="`diff-right-${itemIndex}`">
+            <!-- Code fold indicator -->
+            <div v-if="item.type === 'fold'" class="diff-fold">
+              <button @click="onBlockExpand(item.blockNumber)" class="diff-fold-button">
+                {{ `⟨ Expand ${item.count} lines... ⟩` }}
+              </button>
+            </div>
+
+            <!-- Regular line content -->
+            <div v-else-if="item.type === 'line'" :class="['diff-line', { 'diff-line-added': item.lineInfo.right.type === DiffType.ADDED }]">
+              <span v-if="!hideLineNumbers" class="diff-line-number">{{ item.lineInfo.right.lineNumber }}</span>
+              <span class="diff-line-content">{{ item.lineInfo.right.value }}</span>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.diff-container {
+  width: 100%;
+}
+
+.diff-headers {
+  display: flex;
+  border-bottom: 1px solid #ddd;
+  background-color: #f1f1f1;
+}
+
+.diff-header {
+  flex: 1;
+  padding: 6px 10px;
+  font-weight: bold;
+  font-size: 0.8rem;
+  text-align: center;
+}
+
+.diff-content {
+  display: flex;
+}
+
+.diff-column {
+  flex: 1;
+  overflow: visible;
+}
+
+.split-view .diff-column:first-child {
+  border-right: 1px solid #ddd;
+}
+
+.diff-lines {
+  padding: 5px 0;
+}
+
+.diff-line {
+  padding: 0 5px;
+  white-space: pre-wrap;
+  word-break: break-all;
+  display: flex;
+}
+
+.diff-line-number {
+  min-width: 40px;
+  color: #999;
+  text-align: right;
+  padding-right: 10px;
+  user-select: none;
+}
+
+.diff-line-content {
+  flex: 1;
+}
+
+.diff-line-added {
+  background-color: #e6ffed;
+  color: #28a745;
+}
+
+.diff-line-removed {
+  background-color: #ffeef0;
+  color: #d73a49;
+}
+
+/* Code fold styling */
+.diff-fold {
+  text-align: center;
+  padding: 2px 0;
+}
+
+.diff-fold-button {
+  background: none;
+  border: none;
+  color: #0366d6;
+  padding: 2px 8px;
+  font-size: 0.7rem;
+  cursor: pointer;
+  font-family: monospace;
+}
+
+.diff-fold-button:hover {
+  text-decoration: underline;
+}
+</style>
diff --git a/src/Frontend/src/components/messages2/DiffViewer.vue b/src/Frontend/src/components/messages2/DiffViewer.vue
new file mode 100644
index 000000000..5deb14fd6
--- /dev/null
+++ b/src/Frontend/src/components/messages2/DiffViewer.vue
@@ -0,0 +1,221 @@
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from "vue";
+import DiffContent from "./DiffContent.vue";
+import DiffMaximizeIcon from "@/assets/diff-maximize.svg";
+import DiffCloseIcon from "@/assets/diff-close.svg";
+
+interface Props {
+  oldValue: string;
+  newValue: string;
+  splitView?: boolean;
+  hideLineNumbers?: boolean;
+  showDiffOnly?: boolean;
+  extraLinesSurroundingDiff?: number;
+  leftTitle?: string;
+  rightTitle?: string;
+  compareMethod?: "diffChars" | "diffWords" | "diffWordsWithSpace" | "diffLines" | "diffTrimmedLines" | "diffSentences" | "diffCss";
+  showMaximizeIcon?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  splitView: true,
+  hideLineNumbers: false,
+  showDiffOnly: false,
+  extraLinesSurroundingDiff: 3,
+  leftTitle: "Previous",
+  rightTitle: "Current",
+  compareMethod: "diffLines",
+  showMaximizeIcon: false,
+});
+
+// Component state for maximize functionality
+const showMaximizeModal = ref(false);
+const showMaximizeButton = ref(false);
+
+// Handle maximize functionality
+const toggleMaximizeModal = () => {
+  showMaximizeModal.value = !showMaximizeModal.value;
+};
+
+// Handle ESC key to close modal
+const handleKeyDown = (event: KeyboardEvent) => {
+  if (event.key === "Escape" && showMaximizeModal.value) {
+    showMaximizeModal.value = false;
+  }
+};
+
+// Handle mouse enter/leave for showing maximize button
+const onDiffMouseEnter = () => {
+  if (props.showMaximizeIcon) {
+    showMaximizeButton.value = true;
+  }
+};
+
+const onDiffMouseLeave = () => {
+  showMaximizeButton.value = false;
+};
+
+// Setup keyboard events
+onMounted(() => {
+  if (props.showMaximizeIcon) {
+    window.addEventListener("keydown", handleKeyDown);
+  }
+});
+
+// Clean up event listeners when component is destroyed
+onBeforeUnmount(() => {
+  window.removeEventListener("keydown", handleKeyDown);
+});
+</script>
+
+<template>
+  <div class="diff-viewer" @mouseenter="onDiffMouseEnter" @mouseleave="onDiffMouseLeave">
+    <div class="diff-wrapper">
+      <!-- Maximize Button -->
+      <button v-if="showMaximizeIcon && showMaximizeButton" @click="toggleMaximizeModal" class="maximize-button" title="Maximize diff view">
+        <img :src="DiffMaximizeIcon" alt="Maximize" width="14" height="14" />
+      </button>
+
+      <!-- Regular DiffContent -->
+      <DiffContent
+        :old-value="oldValue"
+        :new-value="newValue"
+        :split-view="splitView"
+        :hide-line-numbers="hideLineNumbers"
+        :show-diff-only="showDiffOnly"
+        :extra-lines-surrounding-diff="extraLinesSurroundingDiff"
+        :left-title="leftTitle"
+        :right-title="rightTitle"
+        :compare-method="compareMethod"
+      />
+    </div>
+
+    <!-- Maximize Modal with separate DiffContent instance -->
+    <div v-if="showMaximizeModal" class="maximize-modal">
+      <div class="maximize-modal-content">
+        <div class="maximize-modal-toolbar">
+          <span class="maximize-modal-title">{{ leftTitle }} vs {{ rightTitle }}</span>
+          <button @click="toggleMaximizeModal" class="maximize-modal-close" title="Close">
+            <img :src="DiffCloseIcon" alt="Close" width="16" height="16" />
+          </button>
+        </div>
+        <div class="maximize-modal-body">
+          <!-- Separate DiffContent instance for modal -->
+          <DiffContent
+            :old-value="oldValue"
+            :new-value="newValue"
+            :split-view="splitView"
+            :hide-line-numbers="hideLineNumbers"
+            :show-diff-only="showDiffOnly"
+            :extra-lines-surrounding-diff="extraLinesSurroundingDiff"
+            :left-title="leftTitle"
+            :right-title="rightTitle"
+            :compare-method="compareMethod"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.diff-viewer {
+  width: 100%;
+  overflow: hidden;
+  font-family: monospace;
+  font-size: 0.75rem;
+  position: relative;
+}
+
+.diff-wrapper {
+  width: 100%;
+  position: relative;
+}
+
+/* Maximize button styles */
+.maximize-button {
+  position: absolute;
+  right: 6px;
+  z-index: 10;
+  background-color: rgba(255, 255, 255, 0.7);
+  border: 1px solid #ddd;
+  border-radius: 3px;
+  padding: 4px;
+  cursor: pointer;
+  opacity: 0.6;
+  transition: opacity 0.2s ease;
+}
+
+.maximize-button:hover {
+  opacity: 1;
+}
+
+/* Modal styles */
+.maximize-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.maximize-modal-content {
+  background-color: white;
+  width: calc(100% - 40px);
+  height: calc(100% - 40px);
+  border-radius: 4px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.maximize-modal-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 15px;
+  background-color: #f8f8f8;
+  border-bottom: 1px solid #ddd;
+}
+
+.maximize-modal-title {
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.maximize-modal-close {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #666;
+}
+
+.maximize-modal-close:hover {
+  color: #000;
+}
+
+.maximize-modal-body {
+  flex: 1;
+  overflow: auto;
+  padding: 0;
+}
+
+.maximize-modal-body :deep(.diff-container) {
+  height: 100%;
+}
+
+.maximize-modal-body :deep(.diff-content) {
+  max-height: calc(100% - 35px);
+  overflow: auto;
+}
+</style>
diff --git a/src/Frontend/src/components/messages2/SagaDiagram.spec.ts b/src/Frontend/src/components/messages2/SagaDiagram.spec.ts
index 77252fbdb..b9da2c0ea 100644
--- a/src/Frontend/src/components/messages2/SagaDiagram.spec.ts
+++ b/src/Frontend/src/components/messages2/SagaDiagram.spec.ts
@@ -282,6 +282,9 @@ function rendercomponent({ initialState = {} }: { initialState?: { MessageStore?
           stubActions: true, // Explicitly stub actions (this is the default)
         }),
       ],
+      stubs: {
+        CodeEditor: true,
+      },
     },
   });
 
diff --git a/src/Frontend/src/components/messages2/SagaDiagram.vue b/src/Frontend/src/components/messages2/SagaDiagram.vue
index bc2144a0d..3091a7e22 100644
--- a/src/Frontend/src/components/messages2/SagaDiagram.vue
+++ b/src/Frontend/src/components/messages2/SagaDiagram.vue
@@ -133,8 +133,8 @@ const vm = computed<SagaViewModel>(() => {
 }
 
 .container {
-  width: 66.6667%;
   min-width: 50rem;
+  max-width: 100rem;
 }
 
 .loading-container {
diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaDiagramParser.ts b/src/Frontend/src/components/messages2/SagaDiagram/SagaDiagramParser.ts
index d08d0917f..d9f282cfa 100644
--- a/src/Frontend/src/components/messages2/SagaDiagram/SagaDiagramParser.ts
+++ b/src/Frontend/src/components/messages2/SagaDiagram/SagaDiagramParser.ts
@@ -36,6 +36,9 @@ export interface SagaUpdateViewModel {
   OutgoingTimeoutMessages: SagaTimeoutMessageViewModel[];
   HasOutgoingMessages: boolean;
   HasOutgoingTimeoutMessages: boolean;
+  showUpdatedPropertiesOnly: boolean;
+  stateAfterChange: string;
+  previousStateAfterChange?: string;
 }
 
 export interface SagaViewModel {
@@ -54,7 +57,7 @@ export interface SagaViewModel {
 export function parseSagaUpdates(sagaHistory: SagaHistory | null, messagesData: SagaMessageData[]): SagaUpdateViewModel[] {
   if (!sagaHistory || !sagaHistory.changes || !sagaHistory.changes.length) return [];
 
-  return sagaHistory.changes
+  const updates = sagaHistory.changes
     .map((update) => {
       const startTime = new Date(update.start_time);
       const finishTime = new Date(update.finish_time);
@@ -123,8 +126,17 @@ export function parseSagaUpdates(sagaHistory: SagaHistory | null, messagesData:
         OutgoingMessages: regularMessages,
         HasOutgoingMessages: regularMessages.length > 0,
         HasOutgoingTimeoutMessages: outgoingTimeoutMessages.length > 0,
+        showUpdatedPropertiesOnly: true, // Default to showing only updated properties
+        stateAfterChange: update.state_after_change || "{}",
       };
     })
     .sort((a, b) => a.StartTime.getTime() - b.StartTime.getTime())
     .sort((a, b) => a.FinishTime.getTime() - b.FinishTime.getTime());
+
+  // Add reference to previous state for each update except the first one
+  for (let i = 1; i < updates.length; i++) {
+    updates[i].previousStateAfterChange = updates[i - 1].stateAfterChange;
+  }
+
+  return updates;
 }
diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingTimeoutMessage.vue b/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingTimeoutMessage.vue
index eced9b366..14170588d 100644
--- a/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingTimeoutMessage.vue
+++ b/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingTimeoutMessage.vue
@@ -35,7 +35,7 @@ const navigateToTimeout = () => {
     </div>
     <div class="cell cell--side">
       <div class="cell-inner cell-inner-right"></div>
-      <div class="cell-inner cell-inner-side cell-inner-side--active">
+      <div class="cell-inner cell-inner-side">
         <img class="saga-icon saga-icon--side-cell" :src="TimeoutIcon" alt="" />
         <h2 class="message-title" aria-label="timeout message type">{{ message.MessageFriendlyTypeName }}</h2>
         <div class="timestamp" aria-label="timeout message timestamp">{{ message.FormattedTimeSent }}</div>
diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue b/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue
index f4947437d..43bc9cb29 100644
--- a/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue
+++ b/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue
@@ -3,8 +3,10 @@ import { SagaUpdateViewModel } from "./SagaDiagramParser";
 import MessageDataBox from "./MessageDataBox.vue";
 import SagaOutgoingTimeoutMessage from "./SagaOutgoingTimeoutMessage.vue";
 import SagaOutgoingMessage from "./SagaOutgoingMessage.vue";
+import DiffViewer from "@/components/messages2/DiffViewer.vue";
+import CodeEditor from "@/components/CodeEditor.vue";
 import { useSagaDiagramStore } from "@/stores/SagaDiagramStore";
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 
 // Import the images directly
 import CommandIcon from "@/assets/command.svg";
@@ -13,6 +15,13 @@ import SagaUpdatedIcon from "@/assets/SagaUpdatedIcon.svg";
 import TimeoutIcon from "@/assets/timeout.svg";
 import SagaTimeoutIcon from "@/assets/SagaTimeoutIcon.svg";
 
+// Define types for JSON values and properties
+type JsonValue = string | number | boolean | null | JsonObject | JsonArray;
+interface JsonObject {
+  [key: string]: JsonValue;
+}
+type JsonArray = Array<JsonValue>;
+
 const props = defineProps<{
   update: SagaUpdateViewModel;
   showMessageData?: boolean;
@@ -21,6 +30,7 @@ const props = defineProps<{
 const store = useSagaDiagramStore();
 const initiatingMessageRef = ref<HTMLElement | null>(null);
 const isActive = ref(false);
+const hasParsingError = ref(false);
 
 // Watch for changes to selectedMessageId
 watch(
@@ -41,6 +51,76 @@ watch(
     }
   }
 );
+
+// Format a JSON value for display
+const formatJsonValue = (value: unknown): string => {
+  if (value === null || value === undefined) return "null";
+  if (typeof value === "object") {
+    return JSON.stringify(value, null, 2);
+  }
+  return String(value);
+};
+
+// Process JSON state and remove standard properties
+const processState = (state: string | undefined): Record<string, JsonValue> => {
+  if (!state) return {};
+
+  let stateObj: Record<string, unknown>;
+  try {
+    stateObj = JSON.parse(state);
+  } catch (e) {
+    console.error("Error parsing state:", e);
+    hasParsingError.value = true;
+    return {};
+  }
+
+  // Filter out standard properties using delete
+  const standardKeys = ["$type", "Id", "Originator", "OriginalMessageId"];
+  standardKeys.forEach((key) => {
+    if (key in stateObj) {
+      delete stateObj[key];
+    }
+  });
+
+  return stateObj as Record<string, JsonValue>;
+};
+
+const sagaUpdateStateChanges = computed(() => {
+  const currentState = processState(props.update.stateAfterChange);
+  const previousState = processState(props.update.previousStateAfterChange);
+  const isFirstNode = props.update.IsFirstNode;
+
+  // Format the current state
+  const currentFormatted = formatJsonValue(currentState);
+
+  // If it's the first node, just return the current state
+  if (isFirstNode) {
+    return {
+      formattedState: currentFormatted,
+      // Provide default empty strings for diff view to prevent type errors
+      previousFormatted: "",
+      currentFormatted: currentFormatted,
+    };
+  }
+
+  // Format the JSON state objects
+  const previousFormatted = formatJsonValue(previousState);
+
+  return {
+    previousFormatted,
+    currentFormatted,
+  };
+});
+
+// Determine if there are changes to display
+const hasStateChanges = computed(() => {
+  if (props.update.IsFirstNode) return true;
+
+  const currentState = processState(props.update.stateAfterChange);
+  const previousState = processState(props.update.previousStateAfterChange);
+
+  return JSON.stringify(currentState) !== JSON.stringify(previousState);
+});
 </script>
 
 <template>
@@ -89,19 +169,38 @@ watch(
       <!-- Center - Saga properties -->
       <div class="cell cell--center cell--center--border">
         <div :class="{ 'cell-inner': true, 'cell-inner-line': update.HasTimeout, 'cell-inner-center': !update.HasTimeout }">
-          <div class="saga-properties">
-            <a class="saga-properties-link" href="">All Properties</a> /
-            <a class="saga-properties-link saga-properties-link--active" href="">Updated Properties</a>
+          <div class="saga-state-container">
+            <h3 class="saga-state-title" v-if="update.IsFirstNode">Initial Saga State</h3>
+            <h3 class="saga-state-title" v-else>State Changes</h3>
+
+            <!-- Error message when parsing fails -->
+            <div v-if="hasParsingError" class="json-container">
+              <div class="parsing-error-message">An error occurred while parsing and displaying the saga state for this update</div>
+            </div>
+
+            <!-- Initial state display -->
+            <div v-else-if="update.IsFirstNode" class="json-container">
+              <CodeEditor css="monospace-code" :model-value="sagaUpdateStateChanges.formattedState || ''" language="json" :showCopyToClipboard="false" :showGutter="false" />
+            </div>
+
+            <!-- No changes message -->
+            <div v-else-if="!hasStateChanges" class="json-container">
+              <div class="no-changes-message">No state changes in this update</div>
+            </div>
+
+            <!-- Side-by-side diff view for state changes -->
+            <div v-else-if="hasStateChanges && !update.IsFirstNode">
+              <DiffViewer
+                :hide-line-numbers="true"
+                :showDiffOnly="true"
+                :oldValue="sagaUpdateStateChanges.previousFormatted"
+                :newValue="sagaUpdateStateChanges.currentFormatted"
+                leftTitle="Previous State"
+                rightTitle="Updated State"
+                :showMaximizeIcon="true"
+              />
+            </div>
           </div>
-
-          <!-- Display saga properties if available -->
-          <ul class="saga-properties-list">
-            <li class="saga-properties-list-item">
-              <span class="saga-properties-list-text" title="Property (new)">Property (new)</span>
-              <span class="saga-properties-list-text">=</span>
-              <span class="saga-properties-list-text" title="Sample Value"> Sample Value</span>
-            </li>
-          </ul>
         </div>
       </div>
 
@@ -118,10 +217,6 @@ watch(
 </template>
 
 <style scoped>
-.block {
-  /* block container style */
-}
-
 .row {
   display: flex;
 }
@@ -164,10 +259,6 @@ watch(
   border-top: solid 2px #000000;
 }
 
-.cell-inner {
-  /* padding: 0.5rem; */
-}
-
 .cell-inner-center {
   padding: 0.5rem;
 }
@@ -262,54 +353,6 @@ watch(
   font-size: 0.8rem;
 }
 
-.saga-properties {
-  margin: 0 -0.25rem;
-  padding: 0.25rem;
-  font-size: 0.6rem;
-  text-transform: uppercase;
-}
-
-.saga-properties-link {
-  padding: 0 0.25rem;
-  text-decoration: underline;
-}
-
-.saga-properties-link--active {
-  font-weight: 900;
-  color: #000000;
-}
-
-.saga-properties-list {
-  margin: 0;
-  padding-left: 0.25rem;
-  list-style: none;
-}
-
-.saga-properties-list-item {
-  display: flex;
-}
-
-.saga-properties-list-text {
-  display: inline-block;
-  padding-top: 0.25rem;
-  padding-right: 0.75rem;
-  overflow: hidden;
-  font-size: 0.75rem;
-  white-space: nowrap;
-}
-
-.saga-properties-list-text:first-child {
-  min-width: 8rem;
-  max-width: 8rem;
-  display: inline-block;
-  text-overflow: ellipsis;
-}
-
-.saga-properties-list-text:last-child {
-  padding-right: 0;
-  text-overflow: ellipsis;
-}
-
 .message-data {
   display: none;
   padding: 0.2rem;
@@ -341,6 +384,7 @@ watch(
   height: 1rem;
   margin-top: -0.3rem;
 }
+
 .timeout-status {
   display: inline-block;
   font-size: 1rem;
@@ -348,10 +392,56 @@ watch(
   color: #00a3c4;
 }
 
+/* Styles for DiffViewer integration */
+.saga-state-container {
+  padding: 0.5rem;
+}
+
+.saga-state-title {
+  margin: 0 0 0.5rem 0;
+  font-size: 0.9rem;
+  font-weight: bold;
+}
+
+.json-container {
+  background-color: transparent;
+}
+
+.no-changes-message {
+  padding: 1rem;
+  text-align: center;
+  font-style: italic;
+  color: #666;
+}
+
+.parsing-error-message {
+  padding: 1rem;
+  text-align: center;
+  font-style: italic;
+  color: #a94442;
+}
+
+/* Monospace font styling that matches DiffViewer */
+:deep(.monospace-code) {
+  border-radius: 0;
+  border: none;
+  background-color: #f2f2f2;
+}
+
+:deep(.monospace-code) .cm-editor {
+  font-family: monospace;
+  font-size: 0.75rem;
+  background-color: #f2f2f2;
+}
+
+:deep(.monospace-code) .cm-scroller {
+  background-color: #f2f2f2;
+}
+
 @-webkit-keyframes blink-border {
   0%,
   100% {
-    border-color: #000000;
+    border-color: #00a3c4;
   }
   20%,
   60% {
@@ -359,7 +449,52 @@ watch(
   }
   40%,
   80% {
-    border-color: #000000;
+    border-color: #00a3c4;
+  }
+}
+
+@-moz-keyframes blink-border {
+  0%,
+  100% {
+    border-color: #00a3c4;
+  }
+  20%,
+  60% {
+    border-color: #cccccc;
+  }
+  40%,
+  80% {
+    border-color: #00a3c4;
+  }
+}
+
+@-o-keyframes blink-border {
+  0%,
+  100% {
+    border-color: #00a3c4;
+  }
+  20%,
+  60% {
+    border-color: #cccccc;
+  }
+  40%,
+  80% {
+    border-color: #00a3c4;
+  }
+}
+
+@keyframes blink-border {
+  0%,
+  100% {
+    border-color: #00a3c4;
+  }
+  20%,
+  60% {
+    border-color: #cccccc;
+  }
+  40%,
+  80% {
+    border-color: #00a3c4;
   }
 }