diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.js b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.js
index bddabc961e..da3f3212e4 100644
--- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.js
+++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.js
@@ -138,7 +138,7 @@ describe('<KeyValuesTable>', () => {
     expect(el.length).toBe(data.length);
     el.forEach((valueDiv, i) => {
       if (data[i].key !== 'jsonkey') {
-        expect(valueDiv.html()).toMatch(`"${data[i].value}"`);
+        expect(valueDiv.text()).toBe(data[i].value);
       }
     });
   });
diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx
index 2b316068d8..34328513e8 100644
--- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx
+++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx
@@ -25,16 +25,47 @@ import './KeyValuesTable.css';
 
 const jsonObjectOrArrayStartRegex = /^(\[|\{)/;
 
-function parseIfComplexJson(value: any) {
+function tryParseJson(value: string) {
+  try {
+    return JSON.parse(value)
+  } catch (_) {
+    return value;
+  }
+}
+
+const stringMarkup = (value: string) => (
+  <div className="json-markup">
+    <span className="json-markup-string">{value}</span>
+  </div>
+)
+
+function _jsonMarkup(value: any) {
+  const markup = { __html: jsonMarkup(value) };
+
+  return (
+    // eslint-disable-next-line react/no-danger
+    <div dangerouslySetInnerHTML={markup} />
+  );
+}
+
+function formatValue(value: any) {
+  let content;
+
   // if the value is a string representing actual json object or array, then use json-markup
-  if (typeof value === 'string' && jsonObjectOrArrayStartRegex.test(value)) {
+  if (typeof value === 'string') {
     // otherwise just return as is
-    try {
-      return JSON.parse(value);
-      // eslint-disable-next-line no-empty
-    } catch (_) {}
+    content = jsonObjectOrArrayStartRegex.test(value)
+      ? _jsonMarkup(tryParseJson(value))
+      : stringMarkup(value);
+  } else {
+    content = _jsonMarkup(value)
   }
-  return value;
+
+  return (
+    <div className="ub-inline-block">
+      {content}
+    </div>
+  )
 }
 
 export const LinkValue = (props: { href: string; title?: string; children: React.ReactNode }) => (
@@ -71,11 +102,7 @@ export default function KeyValuesTable(props: KeyValuesTableProps) {
       <table className="u-width-100">
         <tbody className="KeyValueTable--body">
           {data.map((row, i) => {
-            const markup = {
-              __html: jsonMarkup(parseIfComplexJson(row.value)),
-            };
-            // eslint-disable-next-line react/no-danger
-            const jsonTable = <div className="ub-inline-block" dangerouslySetInnerHTML={markup} />;
+            const jsonTable = formatValue(row.value);
             const links = linksGetter ? linksGetter(data, i) : null;
             let valueMarkup;
             if (links && links.length === 1) {