diff --git a/packages/app/src/components/debugger/SourceViewer.vue b/packages/app/src/components/debugger/SourceViewer.vue
index d3c99ffdec..42bff9735f 100644
--- a/packages/app/src/components/debugger/SourceViewer.vue
+++ b/packages/app/src/components/debugger/SourceViewer.vue
@@ -18,17 +18,8 @@
       <span
         class="instruction-list-item-text-container"
         :style="{
-          color:
-            traceCountPercentage[
-              `${address}_${Object.keys(pcLineMapping).find((key) => pcLineMapping[parseInt(key)] === item.index)}`
-            ] > 0.4
-              ? 'white'
-              : 'black',
-          backgroundColor: `rgba(200, 0, 0, ${
-            traceCountPercentage[
-              `${address}_${Object.keys(pcLineMapping).find((key) => pcLineMapping[parseInt(key)] === item.index)}`
-            ]
-          }`,
+          color: item.traceCountPercentage > 0.4 ? 'white' : 'black',
+          backgroundColor: `rgba(200, 0, 0, ${item.traceCountPercentage}`,
         }"
       >
         <span class="instruction-list-item-text" v-html="highlight(item.label, searchText)"></span>
@@ -86,9 +77,11 @@ const props = defineProps({
   },
   traceCountPercentage: {
     type: Object as PropType<{ [key: string]: number }>,
+    required: true,
   },
   pcLineMapping: {
     type: Object as PropType<{ [key: number]: number }>,
+    required: true,
   },
 });
 
@@ -100,7 +93,10 @@ type InstructionNode = {
   expandable: boolean;
 };
 
-type VirtualInstructionNode = InstructionNode & { index: number };
+type VirtualInstructionNode = InstructionNode & {
+  index: number;
+  traceCountPercentage: number;
+};
 
 const expanded = ref<number[]>([]);
 const isReady = ref(false);
@@ -155,7 +151,17 @@ watchEffect(() => {
       }
       return val;
     })
-    .map((item, index) => ({ ...item, index, line: item.line }));
+    .map((item, index) => ({
+      ...item,
+      index,
+      line: item.line,
+      traceCountPercentage:
+        props.traceCountPercentage[
+          `${props.address}_${Object.keys(props.pcLineMapping).find(
+            (key) => props.pcLineMapping[parseInt(key)] === index
+          )}`
+        ],
+    }));
   if (isReady.value) {
     rebuild();
   }
diff --git a/packages/app/src/composables/useTrace.ts b/packages/app/src/composables/useTrace.ts
index 3c38afac93..5880f131b0 100644
--- a/packages/app/src/composables/useTrace.ts
+++ b/packages/app/src/composables/useTrace.ts
@@ -205,24 +205,18 @@ export function useTraceNavigation(trace: ComputedRef<TraceFile | null>, initial
       return {};
     }
 
+    let maxCount = 0;
     const countDictionary = trace.value.steps.reduce((acc: { [key: string]: number }, step) => {
       const key = `${step.contract_address}_${step.pc}`;
-      if (acc[key]) {
-        acc[key] += 1;
-      } else {
-        acc[key] = 1;
-      }
+      acc[key] = (acc[key] || 0) + 1;
+      maxCount = Math.max(maxCount, acc[key]);
       return acc;
     }, {});
 
     const countPercentageDictionary: { [key: string]: number } = {};
 
     for (const [key, value] of Object.entries(countDictionary)) {
-      countPercentageDictionary[key] =
-        value /
-        Object.entries(countDictionary)
-          .map((x) => x[1])
-          .reduce((a, b) => Math.max(a, b));
+      countPercentageDictionary[key] = value / maxCount;
     }
 
     return countPercentageDictionary;
diff --git a/packages/app/tests/components/debugger/SourceViewer.spec.ts b/packages/app/tests/components/debugger/SourceViewer.spec.ts
index 257c627d3f..7ef1cef2bf 100644
--- a/packages/app/tests/components/debugger/SourceViewer.spec.ts
+++ b/packages/app/tests/components/debugger/SourceViewer.spec.ts
@@ -31,6 +31,8 @@ describe("SourceViewer:", () => {
         address: "0x00",
         source: ["Hello World"],
         container,
+        traceCountPercentage: {},
+        pcLineMapping: {},
       },
       global: {
         plugins: [i18n],
@@ -49,6 +51,8 @@ describe("SourceViewer:", () => {
         source: ["Hello World"],
         errors: ["Error text"],
         container,
+        traceCountPercentage: {},
+        pcLineMapping: {},
       },
       global: {
         plugins: [i18n],
@@ -68,6 +72,8 @@ describe("SourceViewer:", () => {
         address: "0x00",
         source: ["Hello", "", "World"],
         container,
+        traceCountPercentage: {},
+        pcLineMapping: {},
       },
       global: {
         plugins: [i18n],
@@ -85,6 +91,8 @@ describe("SourceViewer:", () => {
         address: "0x00",
         source: ["foo", ".func_begin", "Hello", "World", "!", ".func_end"],
         container,
+        traceCountPercentage: {},
+        pcLineMapping: {},
       },
       global: {
         plugins: [i18n],
@@ -107,6 +115,8 @@ describe("SourceViewer:", () => {
         address: "0x00",
         source: ["foo", ".func_begin", "Hello", "World", "!", ".func_end"],
         container,
+        traceCountPercentage: {},
+        pcLineMapping: {},
       },
       global: {
         plugins: [i18n],
@@ -133,6 +143,8 @@ describe("SourceViewer:", () => {
         address: "0x00",
         source: ["foo", ".func_begin", "Hello", "World", "!", ".func_end"],
         container,
+        traceCountPercentage: {},
+        pcLineMapping: {},
       },
       global: {
         plugins: [i18n],
@@ -159,6 +171,8 @@ describe("SourceViewer:", () => {
         address: "0x00",
         source,
         container,
+        traceCountPercentage: {},
+        pcLineMapping: {},
       },
       global: {
         plugins: [i18n],
@@ -184,6 +198,8 @@ describe("SourceViewer:", () => {
         address: "0x00",
         source,
         container,
+        traceCountPercentage: {},
+        pcLineMapping: {},
       },
       global: {
         plugins: [i18n],
@@ -218,6 +234,8 @@ describe("SourceViewer:", () => {
           line: 2,
           step: {},
         },
+        traceCountPercentage: {},
+        pcLineMapping: {},
       },
       global: {
         plugins: [i18n],
@@ -242,6 +260,8 @@ describe("SourceViewer:", () => {
         source,
         container: container as unknown as HTMLElement,
         activeStep: { address: "0x00", line: 2, step: {} } as ActiveStep,
+        traceCountPercentage: {},
+        pcLineMapping: {},
       },
       global: {
         plugins: [i18n],
@@ -268,6 +288,8 @@ describe("SourceViewer:", () => {
         },
         container,
         searchText: "Wo",
+        traceCountPercentage: {},
+        pcLineMapping: {},
       },
       global: {
         plugins: [i18n],
@@ -294,6 +316,8 @@ describe("SourceViewer:", () => {
         },
         container,
         searchText: "o",
+        traceCountPercentage: {},
+        pcLineMapping: {},
       },
       global: {
         plugins: [i18n],
@@ -315,6 +339,8 @@ describe("SourceViewer:", () => {
         container: container as unknown as HTMLElement,
         activeStep: { address: "0x00", line: 2, step: {} } as ActiveStep,
         activeLines: [1, 3],
+        traceCountPercentage: {},
+        pcLineMapping: {},
       },
       global: {
         plugins: [i18n],
@@ -342,6 +368,8 @@ describe("SourceViewer:", () => {
         container: container as unknown as HTMLElement,
         activeStep: { address: "0x00", line: 2, step: {} } as ActiveStep,
         activeLines: [1],
+        traceCountPercentage: {},
+        pcLineMapping: {},
       },
       global: {
         plugins: [i18n],
diff --git a/packages/app/tests/views/DebuggerView.spec.ts b/packages/app/tests/views/DebuggerView.spec.ts
index 16e61882b7..de0815ebf6 100644
--- a/packages/app/tests/views/DebuggerView.spec.ts
+++ b/packages/app/tests/views/DebuggerView.spec.ts
@@ -441,6 +441,7 @@ describe("DebuggerView:", () => {
       }),
       index: ref(0),
       total: computed(() => 2),
+      traceCountPercentage: computed(() => ({})),
     });
     const { unmount, container } = render(DebuggerView, {
       global: {
@@ -486,6 +487,7 @@ describe("DebuggerView:", () => {
       }),
       index: ref(1),
       total: computed(() => 2),
+      traceCountPercentage: computed(() => ({})),
     });
     const { unmount, container } = render(DebuggerView, {
       global: {