diff --git a/infrastructure/code/code_html.go b/infrastructure/code/code_html.go
index a40aa5977..7c1eb6234 100644
--- a/infrastructure/code/code_html.go
+++ b/infrastructure/code/code_html.go
@@ -19,6 +19,7 @@ package code
 import (
 	_ "embed"
 	"fmt"
+	"html"
 	"path/filepath"
 	"regexp"
 	"strings"
@@ -46,27 +47,29 @@ func getDataFlowHeadingHtml(issue snyk.CodeIssueData) string {
 }
 
 func getDataFlowHtml(issue snyk.CodeIssueData) string {
-	dataFlowHtml := ""
+	dataFlowHtml := `<table class="data-flow-body"><tbody>`
+
 	for i, flow := range issue.DataFlow {
 		fileName := filepath.Base(flow.FilePath)
 		dataFlowHtml += fmt.Sprintf(`
-		<div class="data-flow-row">
-		  <span class="data-flow-number">%d</span>
-		  <span class="data-flow-blank"> </span>
-		  <span class="data-flow-filepath" file-path="%s" start-line="%d" end-line="%d" start-character="%d" end-character="%d">%s:%d</span>
-		  <span class="data-flow-delimiter">|</span>
-		  <span class="data-flow-text">%s</span>
-		</div>`,
+		  <tr class="data-flow-row">
+		    <td class="data-flow-number">%d</td>
+		    <td class="data-flow-clickable-row" file-path="%s" start-line="%d" end-line="%d" start-character="%d" end-character="%d">%s:%d</td>
+		    <td class="data-flow-delimiter">|</td>
+		    <td class="data-flow-text">%s</td>
+		  </tr>`,
 			i+1,
-			flow.FilePath,
+			html.EscapeString(flow.FilePath),
 			flow.FlowRange.Start.Line,
 			flow.FlowRange.End.Line,
 			flow.FlowRange.Start.Character,
 			flow.FlowRange.End.Character,
-			fileName,
+			html.EscapeString(fileName),
 			flow.FlowRange.Start.Line+1,
-			flow.Content)
+			html.EscapeString(flow.Content))
 	}
+
+	dataFlowHtml += `</tbody></table>`
 	return dataFlowHtml
 }
 
@@ -92,7 +95,7 @@ func getTabsHtml(fixes []snyk.ExampleCommitFix) string {
 		tabsHtml += fmt.Sprintf(`<span class="tab-item %s" id="tab-link-%d">%s</span>`, isSelectedClass, i, getRepoName(fix.CommitURL))
 	}
 
-	tabsHtml += "</div>"
+	tabsHtml += `</div><div class="tab-container">`
 
 	// Generate the contents for each tab
 	for i, fix := range fixes {
@@ -106,6 +109,8 @@ func getTabsHtml(fixes []snyk.ExampleCommitFix) string {
 		tabsHtml += fmt.Sprintf(`<div id="tab-content-%d" class="tab-content %s">%s</div>`, i, isSelectedClass, contentHtml)
 	}
 
+	tabsHtml += `</div>`
+
 	return tabsHtml
 }
 
@@ -136,6 +141,8 @@ func getDetailsHtml(issue snyk.Issue) string {
 	html = replaceVariableInHtml(html, "exampleCount", fmt.Sprintf("%d", len(additionalData.ExampleCommitFixes)))
 	html = replaceVariableInHtml(html, "tabsNav", getTabsHtml(additionalData.ExampleCommitFixes))
 
+	log.Debug().Msgf("Details HTML: %s", html)
+
 	return html
 }
 
diff --git a/infrastructure/code/code_html_test.go b/infrastructure/code/code_html_test.go
index f5b03ce99..54666e37c 100644
--- a/infrastructure/code/code_html_test.go
+++ b/infrastructure/code/code_html_test.go
@@ -50,14 +50,12 @@ func Test_CodeDetailsPanel_html_getDetailsHtml(t *testing.T) {
 	codePanelHtml := getDetailsHtml(issue)
 
 	// assert Data Flow section
-	expectedDataFlowHeading := fmt.Sprintf("<h2>Data Flow - %d steps</h2>", len(dataFlow))
+	expectedDataFlowHeading := fmt.Sprintf(`<h2 class="data-flow-header">Data Flow - %d steps</h2>`, len(dataFlow))
 
 	assert.Contains(t, codePanelHtml, expectedDataFlowHeading)
-	assert.Contains(t, codePanelHtml, "<h2>Data Flow - 4 steps</h2>")
-	assert.Contains(t, codePanelHtml, "class=\"data-flow-section\"")
-	assert.Contains(t, codePanelHtml, "class=\"data-flow-row\"")
-	assert.Contains(t, codePanelHtml, "if (!vulnLines.every(e => selectedLines.includes(e))) return false")
-	assert.Contains(t, codePanelHtml, `<span class="data-flow-filepath" file-path="juice-shop/routes/vulnCodeSnippet.ts" start-line="67" end-line="67" start-character="28" end-character="42">vulnCodeSnippet.ts:68</span>`)
+	assert.Contains(t, codePanelHtml, `<table class="data-flow-body"><tbody>`)
+	assert.Contains(t, codePanelHtml, `<td class="data-flow-clickable-row" file-path="juice-shop/routes/vulnCodeSnippet.ts" start-line="67" end-line="67" start-character="28" end-character="42">vulnCodeSnippet.ts:68</td>`)
+	assert.Contains(t, codePanelHtml, `<td class="data-flow-text">if (!vulnLines.every(e =&gt; selectedLines.includes(e))) return false</td>`)
 
 	assert.NotContains(t, codePanelHtml, "${dataFlow}")
 	assert.NotContains(t, codePanelHtml, "${dataFlowCount}")
diff --git a/infrastructure/code/convert_test.go b/infrastructure/code/convert_test.go
index 1a4e06bb4..eb4b766a7 100644
--- a/infrastructure/code/convert_test.go
+++ b/infrastructure/code/convert_test.go
@@ -645,7 +645,10 @@ func TestSnykCodeBackendService_convert_shouldConvertIssues(t *testing.T) {
 	assert.Equal(t, resp.Sarif.Runs[0].Tool.Driver.Rules[0].Properties.Cwe, issue.CWEs)
 	assert.Nil(t, issues[0].IgnoreDetails)
 	assert.False(t, issues[0].IsIgnored)
-	assert.Contains(t, (issues[0].AdditionalData).(snyk.CodeIssueData).Details, "<h2>Data Flow - 4 steps</h2>")
+
+	codeIssueData, _ := issues[0].AdditionalData.(snyk.CodeIssueData)
+	dataFlowSteps := fmt.Sprintf(`<h2 class="data-flow-header">Data Flow - %d steps</h2>`, len(codeIssueData.DataFlow))
+	assert.Contains(t, codeIssueData.Details, dataFlowSteps)
 }
 
 func referencesForSampleSarifResponse() []snyk.Reference {
diff --git a/infrastructure/code/template/details.html b/infrastructure/code/template/details.html
index a19b21b2a..1f884b4d2 100644
--- a/infrastructure/code/template/details.html
+++ b/infrastructure/code/template/details.html
@@ -22,6 +22,273 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
+    html {
+      font-size: 18px;
+      /* 1rem = 16px */
+    }
+
+    *,
+    *:before,
+    *:after {
+      box-sizing: border-box;
+    }
+
+    body {
+      height: 100%;
+      width: 100%;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+      color: #d4d4d4;
+      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+    }
+
+    h2 {
+      font-size: 1.1rem;
+      margin-block-start: 0;
+      margin-block-end: 0.25rem;
+      font-weight: 700;
+      text-transform: uppercase;
+      color: #bbbbbb;
+    }
+
+    .overview-text,
+    .severity-type {
+      font-size: 0.75rem;
+      font-weight: 400;
+      line-height: 1.125rem;
+    }
+
+    .issue-details,
+    .example-fixes,
+    .example-fixes-header,
+    .example-fixes-text,
+    .data-flow-header,
+    .data-flow-body,
+    .example-line {
+      font-size: 0.75rem;
+      font-weight: 400;
+      line-height: 1.125rem;
+    }
+
+    .severity-title {
+      font-size: 1rem;
+      /* 16px */
+      font-weight: 600;
+    }
+
+    .tab-item {
+      font-size: 0.80rem;
+      /* 16px */
+      font-weight: 500;
+    }
+
+
+    .overview-text {
+      font-style: normal;
+      font-weight: 400;
+      line-height: 1.25rem;
+      padding: 8px 8px 0 0;
+    }
+
+    .tabs-nav {
+      display: flex;
+      margin-top: 16px;
+      list-style-type: none;
+      overflow: hidden;
+      margin: 0;
+      padding: 0;
+      border-bottom: 1px solid #333;
+    }
+
+    .tab-container {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background-color: #46494a;
+    }
+
+    .tab-content {
+      display: none;
+    }
+
+    .tab-content.is-selected {
+      display: block;
+    }
+
+    .panel-header {
+      display: flex;
+      flex-direction: column;
+      padding: 16px 0 0;
+      border-bottom: 1px solid #3c3f41;
+    }
+
+    .severity-container {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-bottom: 8px;
+    }
+
+    .severity-title {
+      color: #ccc;
+      font-style: normal;
+      line-height: 14px;
+      padding-left: 8px;
+    }
+
+    .severity-type {
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 14px;
+    }
+
+    .issue-overview,
+    .data-flow-section {
+      padding: 16px 0;
+    }
+
+    .example-fixes {
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 18px;
+    }
+
+    .example-fixes-header {
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 18px;
+    }
+
+    .example-fixes-text {
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 18px;
+      margin-block-end: 1rem;
+    }
+
+    .issue-details {
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 18px;
+      padding: 8px 0px;
+    }
+
+    .data-flow-body {
+      font-size: 0.88rem;
+      font-weight: 500;
+    }
+
+    .data-flow-header {
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 18px;
+    }
+
+    .data-flow-body {
+      font-family: 'Courier New', Courier, monospace;
+      background: #45494A;
+      padding-left: 8px;
+    }
+
+    .data-flow-number {
+      margin-right: 8px;
+      width: 0.9375rem;
+      text-align: right;
+    }
+
+    .data-flow-clickable-row {
+      color: #599DF6;
+      display: block;
+      margin: 0px 16px;
+    }
+
+    .data-flow-clickable-row:hover {
+      cursor: pointer;
+      text-decoration: underline;
+    }
+
+    .data-flow-text {
+      margin-right: 8px;
+      padding-left: 10px;
+    }
+
+    .data-flow-delimiter {
+      font-weight: bold;
+      color: #BBBBBB;
+    }
+
+    .tab-item {
+      float: left;
+      display: block;
+      color: white;
+      text-align: center;
+      padding: 4px 16px 5px 16px;
+      text-decoration: none;
+      margin-right: 4px;
+      cursor: pointer;
+      transition: background-color 0.3s, border-color 0.3s;
+    }
+
+    .tab-item:hover {
+      background-color: #2F3133;
+
+    }
+
+    .tab-item.is-selected {
+      background-color: #3D4B5B;
+
+    }
+
+    .tab-item.is-selected {
+      color: #BBBBBB;
+      border-bottom: 3px solid #4A87C7;
+    }
+
+    .example-line {
+      font-family: "Courier New", Courier, monospace;
+      font-size: 12px;
+      padding: 2px 0 24px 0;
+    }
+
+    .example-line>code {
+      display: block;
+      padding-left: 1.875rem;
+      white-space: pre-wrap;
+      /* color: var(--vscode-editor-foreground); */
+      font-weight: 400;
+      background-color: transparent;
+    }
+
+    .example-line.added {
+      background-color: #334937;
+      color: #d4d4d4;
+    }
+
+    .example-line.added::before {
+      content: "+";
+      position: absolute;
+      padding: 0 4px;
+      line-height: 1;
+    }
+
+    .example-line.removed {
+      background-color: #563f3f;
+      color: #d4d4d4;
+    }
+
+    .example-line.removed::before {
+      content: "-";
+      position: absolute;
+      padding: 0 4px;
+      line-height: 1;
+    }
   </style>
 </head>
 
@@ -46,21 +313,39 @@
 
     <!-- Data Flow -->
     <article class="data-flow-section">
-      <h2>${dataFlowHeading}</h2>
+      <h2 class="data-flow-header">${dataFlowHeading}</h2>
       <div class="data-flow-body">
         ${dataFlow}
       </div>
     </article>
 
     <!-- External example fixes -->
-    <article class="external-example-fixes">
-      <h2>External example fixes</h2>
-      <p id="info-top" class="font-light">
+    <article class="example-fixes">
+      <h2 class="example-fixes-header">External example fixes</h2>
+      <div class="example-fixes-text">
         This issue was fixed by ${repoCount} projects. Here are ${exampleCount} example fixes:
-      </p>
+      </div>
       ${tabsNav}
     </article>
   </main>
 </body>
 
 </html>
+<script>
+  const tabLinks = document.querySelectorAll('.tab-item');
+  const tabContents = document.querySelectorAll('.tab-content');
+  document.querySelector('.tabs-nav').addEventListener('click', (event) => {
+    const clickedTab = event.target.closest('.tab-item');
+    if (!clickedTab) return;
+
+    tabLinks.forEach(tab => {
+      tab.classList.toggle('is-selected', tab === clickedTab);
+    });
+
+    const targetContentId = clickedTab.id.replace('tab-link', 'tab-content');
+    tabContents.forEach(content => {
+      content.classList.toggle('is-selected', content.id === targetContentId);
+    });
+  });
+
+</script>