diff --git a/src/Frontend/package-lock.json b/src/Frontend/package-lock.json
index 43cd5d0bf..dcedc7a95 100644
--- a/src/Frontend/package-lock.json
+++ b/src/Frontend/package-lock.json
@@ -19,7 +19,7 @@
         "bootstrap": "^5.3.5",
         "bootstrap-icons": "^1.13.1",
         "codemirror": "^6.0.1",
-        "diff": "^7.0.0",
+        "diff": "^8.0.2",
         "hex-to-css-filter": "^6.0.0",
         "lodash.debounce": "^4.0.8",
         "lodash.throttle": "^4.0.8",
@@ -45,7 +45,6 @@
         "@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.17",
         "@types/node": "^22.15.29",
         "@vitejs/plugin-vue": "^5.2.4",
@@ -1991,13 +1990,6 @@
       "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,
-      "license": "MIT"
-    },
     "node_modules/@types/estree": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
@@ -3740,9 +3732,9 @@
       }
     },
     "node_modules/diff": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/diff/-/diff-7.0.0.tgz",
-      "integrity": "sha512-PJWHUb1RFevKCwaFA9RlG5tCd+FO5iRh9A8HEtkmBH2Li03iJriB6m6JIN4rGz3K3JLawI7/veA1xzRKP6ISBw==",
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-8.0.2.tgz",
+      "integrity": "sha512-sSuxWU5j5SR9QQji/o2qMvqRNYRDOcBTgsJ/DeCf4iSN4gW+gNMXM7wFIP+fdXZxoNiAnHUTGjCr+TSWXdRDKg==",
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.3.1"
diff --git a/src/Frontend/package.json b/src/Frontend/package.json
index 495fa7315..ca20851d5 100644
--- a/src/Frontend/package.json
+++ b/src/Frontend/package.json
@@ -28,7 +28,7 @@
     "bootstrap": "^5.3.5",
     "bootstrap-icons": "^1.13.1",
     "codemirror": "^6.0.1",
-    "diff": "^7.0.0",
+    "diff": "^8.0.2",
     "hex-to-css-filter": "^6.0.0",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.0.8",
@@ -54,7 +54,6 @@
     "@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.17",
     "@types/node": "^22.15.29",
     "@vitejs/plugin-vue": "^5.2.4",
diff --git a/src/Frontend/src/components/messages/DiffContent.vue b/src/Frontend/src/components/messages/DiffContent.vue
index 2561ab087..253569365 100644
--- a/src/Frontend/src/components/messages/DiffContent.vue
+++ b/src/Frontend/src/components/messages/DiffContent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, watch } from "vue";
-import * as diff from "diff";
+import { diffLines, diffWords, diffWordsWithSpace, diffChars, diffTrimmedLines, diffSentences, diffCss } from "diff";
 
 // Types needed for the diff viewer
 interface DiffChange {
@@ -67,7 +67,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 // Component state
 const lineInformation = ref<LineInformation[]>([]);
-const diffLines = ref<number[]>([]);
+const diffLineIndexes = ref<number[]>([]);
 const expandedBlocks = ref<number[]>([]);
 
 // Compute diff when inputs change
@@ -92,7 +92,7 @@ const computeDiff = (): void => {
     });
 
     lineInformation.value = result;
-    diffLines.value = [];
+    diffLineIndexes.value = [];
     return;
   }
 
@@ -100,26 +100,26 @@ const computeDiff = (): void => {
   let diffOutput: DiffChange[];
   switch (compareMethod) {
     case "diffChars":
-      diffOutput = diff.diffChars(oldValue, newValue);
+      diffOutput = diffChars(oldValue, newValue);
       break;
     case "diffWords":
-      diffOutput = diff.diffWords(oldValue, newValue);
+      diffOutput = diffWords(oldValue, newValue);
       break;
     case "diffWordsWithSpace":
-      diffOutput = diff.diffWordsWithSpace(oldValue, newValue);
+      diffOutput = diffWordsWithSpace(oldValue, newValue);
       break;
     case "diffTrimmedLines":
-      diffOutput = diff.diffTrimmedLines(oldValue, newValue);
+      diffOutput = diffTrimmedLines(oldValue, newValue);
       break;
     case "diffSentences":
-      diffOutput = diff.diffSentences(oldValue, newValue);
+      diffOutput = diffSentences(oldValue, newValue);
       break;
     case "diffCss":
-      diffOutput = diff.diffCss(oldValue, newValue);
+      diffOutput = diffCss(oldValue, newValue);
       break;
     case "diffLines":
     default:
-      diffOutput = diff.diffLines(oldValue, newValue);
+      diffOutput = diffLines(oldValue, newValue);
       break;
   }
 
@@ -170,7 +170,7 @@ const computeDiff = (): void => {
   });
 
   lineInformation.value = result;
-  diffLines.value = diffLinesArray;
+  diffLineIndexes.value = diffLinesArray;
 
   // Reset expanded blocks when diff changes
   expandedBlocks.value = [];
@@ -194,7 +194,7 @@ const renderDiff = computed<DiffItem[]>(() => {
   const result: DiffItem[] = [];
 
   // Create a mutable copy of diffLines for manipulation in the loop
-  const currentDiffLines = [...diffLines.value];
+  const currentDiffLines = [...diffLineIndexes.value];
 
   lineInformation.value.forEach((line, i) => {
     const diffBlockStart = currentDiffLines[0];