diff --git a/infrastructure/code/template/details.html b/infrastructure/code/template/details.html
index 7fa285ddf..ec807ba8f 100644
--- a/infrastructure/code/template/details.html
+++ b/infrastructure/code/template/details.html
@@ -144,7 +144,96 @@ <h2 class="severity-title">{{.IssueTitle}}</h2>
               </div>
             </div>
           </section>
+          <!-- Data Flow and Fixed Code Examples -->
+          <div id="no-ai-fix-wrapper">
+            <!-- Data Flow -->
+            <section class="data-flow-section delimiter-top">
+              <h2 class="data-flow-header">
+                Data Flow - {{len .DataFlow}} {{if gt (len .DataFlow) 1}}steps{{else}}step{{end}}
+              </h2>
+              <div class="data-flow-body">
+                {{range $fileName := .DataFlowKeys}}
+                <div class="data-flow-file">
+                  {{$.FileIcon}}
+                  <span class="data-flow-file-name">{{$fileName}}</span>
+                </div>
+                <table class="data-flow-table">
+                  <tbody>
+                  {{range index $.DataFlowTable $fileName}}
+                  <tr class="data-flow-row">
+                    <td class="data-flow-number">
+                      <div class="data-flow-circle">{{.Number}}</div>
+                      <div class="data-flow-line"></div>
+                    </td>
+                    <td class="data-flow-clickable-row" file-path="{{.FilePath}}" start-line="{{.StartLine}}"
+                        end-line="{{.EndLine}}" start-character="{{.StartCharacter}}" end-character="{{.EndCharacter}}">
+                      {{.StartLineValue}}
+                    </td>
+                    <td class="delimiter data-flow-delimiter">|</td>
+                    <td class="data-flow-text">
+                      <code>{{.Content}}</code>
+                    </td>
+                  </tr>
+                  {{end}}
+                  </tbody>
+
+                </table>
+                {{end}}
+              </div>
+            </section>
+
+            <!-- Fixed Code Examples -->
+            <section class="example-fixes delimiter-top {{if .HasAIFix}}hidden{{end}}">
+              <h2 class="example-fixes-header">Fixed Code Examples</h2>
+              {{if eq (len .ExampleCommitFixes) 0}}
+              <div id="info-no-examples" class="font-light">
+                No example fixes are available.
+              </div>
+              {{else}}
+              <p id="example-fixes-info-top" class="example-fixes-info-top font-light">
+                This type of vulnerability was fixed in {{.RepoCount}} open source projects.
+              </p>
+              <div id="example-top" class="row between">
+                <div id="current-example" class="repo clickable">
+                  {{.GitHubIcon}}
+                  <span id="example-link" class="example-repo-link">
+                    <a id="example-repo-anchor" href="{{(index .ExampleCommitFixes 0).RepoLink}}"
+                       rel="noopener noreferrer">
+                      {{(index .ExampleCommitFixes 0).RepoName}}
+                    </a>
+                  </span>
+                </div>
+                <div class="examples-nav">
+                  <span id="previous-example" class="arrow" title="Previous example">
+                    {{.ArrowLeftDark}}
+                    {{.ArrowLeftLight}}
+                  </span>
+                  <span id="example-text">
+                    Example <strong id="example-counter">1</strong>/<span id="example-number2">{{.ExampleCount}}</span>
+                  </span>
+                  <span id="next-example" class="arrow" title="Next example">
+                    {{.ArrowRightDark}}
+                    {{.ArrowRightLight}}
+                  </span>
+                </div>
+              </div>
 
+              <div id="example" class="example">
+                {{range $index, $element := .ExampleCommitFixes}}
+                <div class="example-detail {{if ne $index 0}}hidden{{end}}" data-index=" {{$index}}">
+                  <div>
+                    {{range $element.ExampleLines}}
+                    <div class="example-line {{.LineChange}}">
+                      <code>{{.Line}}</code>
+                    </div>
+                    {{end}}
+                  </div>
+                </div>
+                {{end}}
+              </div>
+              {{end}}
+            </section>
+          </div>
           <!-- AI Fix -->
           <div id="ai-fix-wrapper" class="{{if not .HasAIFix}}hidden{{end}}">
             <!-- AI fix buttons -->
@@ -225,93 +314,6 @@ <h2 class="ai-fix-header">
               </div>
             </section>
           </div>
-
-          <!-- Data Flow and Fixed Code Examples -->
-          <div id="no-ai-fix-wrapper" class="{{if .HasAIFix}}hidden{{end}}">
-            <!-- Data Flow -->
-            <section class="data-flow-section delimiter-top">
-              <h2 class="data-flow-header">
-                Data Flow - {{len .DataFlow}} {{if gt (len .DataFlow) 1}}steps{{else}}step{{end}}
-              </h2>
-              <div class="data-flow-body">
-                {{range $fileName := .DataFlowKeys}}
-                <div class="data-flow-file">
-                  {{$.FileIcon}}
-                  <span class="data-flow-file-name">{{$fileName}}</span>
-                </div>
-                <table class="data-flow-table">
-                  <tbody>
-                    {{range index $.DataFlowTable $fileName}}
-                    <tr class="data-flow-row">
-                      <td class="data-flow-number">{{.Number}}</td>
-                      <td class="data-flow-clickable-row" file-path="{{.FilePath}}" start-line="{{.StartLine}}"
-                        end-line="{{.EndLine}}" start-character="{{.StartCharacter}}" end-character="{{.EndCharacter}}">
-                        line:{{.StartLineValue}}
-                      </td>
-                      <td class="delimiter data-flow-delimiter">|</td>
-                      <td class="data-flow-text">
-                        <code>{{.Content}}</code>
-                      </td>
-                    </tr>
-                    {{end}}
-                  </tbody>
-                </table>
-                {{end}}
-              </div>
-            </section>
-
-            <!-- Fixed Code Examples -->
-            <section class="example-fixes delimiter-top">
-              <h2 class="example-fixes-header">Fixed Code Examples</h2>
-              {{if eq (len .ExampleCommitFixes) 0}}
-              <div id="info-no-examples" class="font-light">
-                No example fixes are available.
-              </div>
-              {{else}}
-              <p id="example-fixes-info-top" class="example-fixes-info-top font-light">
-                This type of vulnerability was fixed in {{.RepoCount}} open source projects.
-              </p>
-              <div id="example-top" class="row between">
-                <div id="current-example" class="repo clickable">
-                  {{.GitHubIcon}}
-                  <span id="example-link" class="example-repo-link">
-                    <a id="example-repo-anchor" href="{{(index .ExampleCommitFixes 0).RepoLink}}"
-                      rel="noopener noreferrer">
-                      {{(index .ExampleCommitFixes 0).RepoName}}
-                    </a>
-                  </span>
-                </div>
-                <div class="examples-nav">
-                  <span id="previous-example" class="arrow" title="Previous example">
-                    {{.ArrowLeftDark}}
-                    {{.ArrowLeftLight}}
-                  </span>
-                  <span id="example-text">
-                    Example <strong id="example-counter">1</strong>/<span id="example-number2">{{.ExampleCount}}</span>
-                  </span>
-                  <span id="next-example" class="arrow" title="Next example">
-                    {{.ArrowRightDark}}
-                    {{.ArrowRightLight}}
-                  </span>
-                </div>
-              </div>
-
-              <div id="example" class="example">
-                {{range $index, $element := .ExampleCommitFixes}}
-                <div class="example-detail {{if ne $index 0}}hidden{{end}}" data-index=" {{$index}}">
-                  <div>
-                    {{range $element.ExampleLines}}
-                    <div class="example-line {{.LineChange}}">
-                      <code>{{.Line}}</code>
-                    </div>
-                    {{end}}
-                  </div>
-                </div>
-                {{end}}
-              </div>
-              {{end}}
-            </section>
-          </div>
         </div>
         <!-- End Fix Analysis section -->
 
diff --git a/infrastructure/code/template/styles.css b/infrastructure/code/template/styles.css
index 0d8fb6578..55caa2804 100644
--- a/infrastructure/code/template/styles.css
+++ b/infrastructure/code/template/styles.css
@@ -31,13 +31,16 @@
   --horizontal-border-color: var();
   --code-background-color: var(--vscode-editor-background);
   --tab-active-background-color: var(--vscode-tab-activeBackground);
-  --input-border: var(--vscode-input-border)
+  --input-border: var(--vscode-input-border);
+  --input-background: var(--vscode-input-background);
   /* This doesn't exist yet in VSCode*/
   --border-color: var(--vscode-border-color);
   --example-line-removed-color: var(--vscode-line-removed-color);
   --example-line-added-color: var(--vscode-line-added-color);
   --generated-ai-fix-button-background-color: var(--vscode-button-background);
   --disabled-background-color: var(--vscode-foreground);
+  --circle-color: var(--vscode-badge-background);
+  --number-td-background-color: var(--vscode-editor-foldBackground);
 }
 
 ::-webkit-scrollbar {
@@ -261,14 +264,12 @@ table {
 }
 table td {
   background: var(--container-background-color);
-  border-top: 1px solid var(--border-color);
-  padding: 3px;
+  padding: 8px 8px 0 4px;
 }
 
 .data-flow-table {
   background-color: var(--code-background-color);
-  margin-top: 5px;
-  margin-left: 15px;
+  margin-top: 4px;
 }
 
 .data-flow-row {
@@ -276,17 +277,53 @@ table td {
   vertical-align: baseline;
 }
 
+/* Data flow number bubbles */
 .data-flow-number {
-  padding-left: 14px;
-  padding-right: 14px;
-  width: 0.9375rem;
-  text-align: right;
+  position: relative;
+  background-color: var(--background-color);
+  text-align: center;
+  padding: 4px;
+}
+.data-flow-circle{
+  width: 16px;
+  height: 16px;
+  font-size: 12px;
+  font-weight: 600;
+  border-radius: 50%;
+  background-color: var(--circle-color);
+  color: var(--text-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: inherit;
+  left: 0;
+  top: 50%;
+  z-index: 1;
+}
+
+
+.data-flow-line {
+  position: absolute;
+  left: 12px;
+  top: 0;
+  bottom: 0;
+  transform: translateX(-50%);
+  border-left: 1px dashed var(--text-color);
+  z-index: 0;
+}
+table > tbody > tr:first-child > td:first-child .data-flow-line {
+  top: 50%;
+  height: 50%;
+}
+
+table > tbody > tr:last-child > td:first-child .data-flow-line {
+  top: 0;
+  height: 10%;
 }
 
 .data-flow-clickable-row {
   color: var(--link-color);
   font-weight: 400;
-  width: 3.9375rem;
   text-align: right;
 }
 
@@ -355,13 +392,11 @@ code {
   text-transform: uppercase;
 }
 
-.data-flow-number,
 .data-flow-clickable-row,
 .data-flow-delimiter,
 .data-flow-text {
   background-color: transparent;
   border-color: transparent;
-  padding-top: 0px;
   padding-bottom: 0px;
 }
 
@@ -440,7 +475,7 @@ code {
   background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.075));
   box-shadow: 0 -1px 3px rgba(0, 0, 0, .05);
   border-top: 1px solid var(--border-color);
-
+  z-index: 1;
 }
 
 #ignore-actions {
@@ -528,7 +563,7 @@ button {
 
 button.generate-ai-fix,
 button.sn-apply-fix {
-  border-radius: 3px;
+  border-radius: 4px;
   background-color: var(--generated-ai-fix-button-background-color);
   color: white;
   cursor: pointer;
@@ -614,7 +649,7 @@ button.sn-apply-fix:hover {
 }
 
 .sn-fix-wrapper {
-  padding: 2rem;
+  padding: 16px;
   margin-top: 1rem;
   border-radius: 4px;
   overflow: hidden;