diff --git a/apps/wing-console/console/design-system/package.json b/apps/wing-console/console/design-system/package.json
index 82018417c4d..ed5552027d6 100644
--- a/apps/wing-console/console/design-system/package.json
+++ b/apps/wing-console/console/design-system/package.json
@@ -34,6 +34,7 @@
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.13",
     "classnames": "^2.5.1",
+    "lodash.escape": "^4.0.1",
     "lodash.uniq": "^4.5.0",
     "nanoid": "^4.0.2",
     "react": "^18.3.1",
@@ -45,6 +46,7 @@
     "@babel/core": "^7.24.7",
     "@storybook/react": "^7.6.19",
     "@testing-library/react": "^14.3.1",
+    "@types/lodash.escape": "^4.0.9",
     "@types/lodash.uniq": "^4.5.9",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
diff --git a/apps/wing-console/console/design-system/src/text-highlight.tsx b/apps/wing-console/console/design-system/src/text-highlight.tsx
index 960f526d6ae..a4387d91d17 100644
--- a/apps/wing-console/console/design-system/src/text-highlight.tsx
+++ b/apps/wing-console/console/design-system/src/text-highlight.tsx
@@ -1,3 +1,4 @@
+import escape from "lodash.escape";
 import { memo, useEffect, useState } from "react";
 
 import type { Theme } from "./theme-provider.js";
@@ -41,7 +42,7 @@ const highlightJson = (value: string, theme: Theme) => {
         } else if (/null/.test(match)) {
           className = palette.null;
         }
-        return `<span class="${className}">${match}</span>`;
+        return `<span class="${className}">${escape(match)}</span>`;
       },
     )}${formatted.slice(CHAR_LIMIT)}`;
 };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b33ced0127d..91c80fd7baa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -561,6 +561,9 @@ importers:
       classnames:
         specifier: ^2.5.1
         version: 2.5.1
+      lodash.escape:
+        specifier: ^4.0.1
+        version: 4.0.1
       lodash.uniq:
         specifier: ^4.5.0
         version: 4.5.0
@@ -589,6 +592,9 @@ importers:
       '@testing-library/react':
         specifier: ^14.3.1
         version: 14.3.1(react-dom@18.3.1)(react@18.3.1)
+      '@types/lodash.escape':
+        specifier: ^4.0.9
+        version: 4.0.9
       '@types/lodash.uniq':
         specifier: ^4.5.9
         version: 4.5.9
@@ -10759,6 +10765,12 @@ packages:
       '@types/lodash': 4.17.5
     dev: true
 
+  /@types/lodash.escape@4.0.9:
+    resolution: {integrity: sha512-YR9R6RU9D36OWrhVZ+r4fY8mMXQtofnLXAcE6CkKIxdH66uiCdEjkhxx/eiJnYpxjOFmPbWBUUvdv8lckO823Q==}
+    dependencies:
+      '@types/lodash': 4.17.5
+    dev: true
+
   /@types/lodash.once@4.1.9:
     resolution: {integrity: sha512-nvZ7GYfyZB6CUmXL+7HSXg53rFpc49FsKuRmMiCIGhgJB/yyTip8uHk4mxGyVJOl87dXPlf3qy42WsjOcIrnmg==}
     dependencies:
@@ -14292,7 +14304,7 @@ packages:
     dependencies:
       semver: 7.6.2
       shelljs: 0.8.5
-      typescript: 5.6.0-dev.20240623
+      typescript: 5.6.0-dev.20240703
     dev: true
 
   /dset@3.1.3:
@@ -18003,6 +18015,10 @@ packages:
     resolution: {integrity: sha512-dS2j+W26TQ7taQBGN8Lbbq04ssV3emRw4NY58WErlTO29pIqS0HmoT5aJ9+TUQ1N3G+JOZSji4eugsWwGp9yPA==}
     dev: true
 
+  /lodash.escape@4.0.1:
+    resolution: {integrity: sha512-nXEOnb/jK9g0DYMr1/Xvq6l5xMD7GDG55+GSYIYmS0G4tBk/hURD4JR9WCavs04t33WmJx9kCyp9vJ+mr4BOUw==}
+    dev: false
+
   /lodash.flatten@4.4.0:
     resolution: {integrity: sha512-C5N2Z3DgnnKr0LOpv/hKCgKdb7ZZwafIrsesve6lmzvZIRZRGaZ/l6Q8+2W7NaT+ZwO3fFlSCzCzrDCFdJfZ4g==}
     dev: true
@@ -22606,8 +22622,8 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
-  /typescript@5.6.0-dev.20240623:
-    resolution: {integrity: sha512-g9nRTnzICZMqhhULQsQC/Teb2Kbrd9Ad/sklK65F7Q1MNAF57X2t5y9u7GI1nCyiQLhGrmJqnxXETwDOBtjADQ==}
+  /typescript@5.6.0-dev.20240703:
+    resolution: {integrity: sha512-AAOGWtykhMpxB4l+5CwojT2aBVAszalz9guzYaZMavmKHWxm3HciR+cIcKqDgR22hR7fPBJHtOti7uFCo4mt4A==}
     engines: {node: '>=14.17'}
     hasBin: true
     dev: true