diff --git a/cmd/metrics/resources/base.html b/cmd/metrics/resources/base.html
index 6a5ac2f..efc51e7 100644
--- a/cmd/metrics/resources/base.html
+++ b/cmd/metrics/resources/base.html
@@ -168,6 +168,113 @@
       const description = <<.DESCRIPTION>>
       const metadata = <<.METADATA>>
       const system_info = <<.SYSTEMINFO>>
+      // Define consistent colors for TMA categories with child variations
+      const tmaColors = {
+        // Blue family for Frontend
+        'Frontend': '#5470c6',
+        'FrontendChild': '#7a90d3',  // Lighter blue for all Frontend children
+        
+        // Green family for Backend
+        'Backend': '#91cc75',
+        'BackendChild': '#b3e0a0',   // Lighter green for all Backend children
+        
+        // Yellow/Orange family for BadSpeculation
+        'BadSpeculation': '#fac858',
+        'BadSpeculationChild': '#ffda8a', // Lighter yellow for all BadSpeculation children
+        
+        // Red family for Retiring
+        'Retiring': '#ee6666',
+        'RetiringChild': '#f38989'    // Lighter red for all Retiring children
+      };
+      
+      let tmasunburst = {
+          tooltip: {},
+          color: [tmaColors.Frontend, tmaColors.BadSpeculation, tmaColors.Backend, tmaColors.Retiring],
+          series: {
+            nodeClick: false,
+            type: "sunburst",
+            radius: [60, "90%"],
+            itemStyle: {
+              borderRadius: 7,
+              borderWidth: 2,
+            },
+            data: [
+              {
+                name: "<<.FRONTEND_LABEL>>",
+                value: Math.round(<<.FRONTEND >> * 10) / 10,
+                itemStyle: { color: tmaColors.Frontend },
+                children: [
+                  {
+                    name: "<<.FETCHBANDWIDTH_LABEL>>",
+                    value: Math.round(<<.FETCHBANDWIDTH >> * 10) / 10,
+                    itemStyle: { color: tmaColors.FrontendChild }
+                  },
+                  {
+                    name: "<<.FETCHLATENCY_LABEL>>",
+                    value: Math.round(<<.FETCHLATENCY >> * 10) / 10,
+                    itemStyle: { color: tmaColors.FrontendChild }
+                  },
+                ]
+              },
+              {
+                name: "<<.BADSPECULATION_LABEL>>",
+                value: Math.round(<<.BADSPECULATION >> * 10) / 10,
+                itemStyle: { color: tmaColors.BadSpeculation },
+                children: [
+                  {
+                    name: "<<.BRANCHMISPREDICTS_LABEL>>",
+                    value: Math.round(<<.BRANCHMISPREDICTS >> * 10) / 10,
+                    itemStyle: { color: tmaColors.BadSpeculationChild }
+                  },
+                  {
+                    name: "<<.MACHINECLEARS_LABEL>>",
+                    value: Math.round(<<.MACHINECLEARS >> * 10) / 10,
+                    itemStyle: { color: tmaColors.BadSpeculationChild }
+                  },
+                ]
+              },
+              {
+                name: "<<.BACKEND_LABEL>>",
+                value: Math.round(<<.BACKEND >> * 10) / 10,
+                itemStyle: { color: tmaColors.Backend },
+                children: [
+                  {
+                    name: "<<.CORE_LABEL>>",
+                    value: Math.round(<<.COREDATA >> * 10) / 10,
+                    itemStyle: { color: tmaColors.BackendChild }
+                  },
+                  {
+                    name: "<<.MEMORY_LABEL>>",
+                    value: Math.round(<<.MEMORY >> * 10) / 10,
+                    itemStyle: { color: tmaColors.BackendChild }
+                  },
+                ],
+              },
+              {
+                name: "<<.RETIRING_LABEL>>",
+                value: Math.round(<<.RETIRING >> * 10) / 10,
+                itemStyle: { color: tmaColors.Retiring },
+                children: [
+                  {
+                    name: "<<.LIGHTOPS_LABEL>>",
+                    value: Math.round(<<.LIGHTOPS >> * 10) / 10,
+                    itemStyle: { color: tmaColors.RetiringChild }
+                  },
+                  {
+                    name: "<<.HEAVYOPS_LABEL>>",
+                    value: Math.round(<<.HEAVYOPS >> * 10) / 10,
+                    itemStyle: { color: tmaColors.RetiringChild }
+                  },
+                ]
+              },
+            ],
+            radius: [20, "100%"],
+            label: {
+              rotate: "radial",
+            },
+          },
+        }
+      // the common config for all line charts
       const base_line = {
         xAxis: {
           type: "category",
@@ -185,11 +292,18 @@
           trigger: 'axis',
           valueFormatter: (value) => value.toFixed(2),
         },
-        legend: {},
+        legend: {
+          orient: 'horizontal',
+          bottom: 0,
+          left: 'center',
+          show: true,
+          selectedMode: false, // Prevents toggling series visibility by clicking on legend
+        },
       }
 
       let level1tma = {
         ...base_line,
+        color: [tmaColors.Frontend, tmaColors.Backend, tmaColors.Retiring, tmaColors.BadSpeculation],
         series: [
           {
             name: "Front-end",
@@ -218,6 +332,7 @@
         ...base_line,
         series: [
           {
+            name: "CPU Utilization %",
             type: 'line',
             data: <<.CPUUTIL>>,
           }
@@ -228,6 +343,7 @@
         ...base_line,
         series: [
           {
+            name: "CPI",
             type: 'line',
             data: <<.CPIDATA>>,
           }
@@ -238,6 +354,7 @@
         ...base_line,
         series: [
           {
+            name: "CPU Frequency (GHz)",
             type: 'line',
             data: <<.CPUFREQ>>,
           }
@@ -248,6 +365,7 @@
         ...base_line,
         series: [
           {
+            name: "Remote DRAM Reads %",
             type: 'line',
             data: <<.REMOTENUMA>>,
           }
@@ -300,6 +418,7 @@
         ...base_line,
         series: [
           {
+            name: "Package Power (Watts)",
             type: 'line',
             data: <<.PKGPOWER>>,
           }
@@ -310,6 +429,7 @@
         ...base_line,
         series: [
           {
+            name: "DRAM Power (Watts)",
             type: 'line',
             data: <<.DRAMPOWER>>,
           }
@@ -418,80 +538,7 @@
                   </ul>
                 </Grid>
                 <Grid item xs={7}>
-                  <ReactECharts style={{ minHeight: "400px" }} option={{
-                    tooltip: {},
-                    series: {
-                      nodeClick: false,
-                      type: "sunburst",
-                      radius: [60, "90%"],
-                      itemStyle: {
-                        borderRadius: 7,
-                        borderWidth: 2,
-                      },
-                      data: [
-                      {
-			  name: "<<.FRONTEND_LABEL>>",
-			  value: Math.round(<<.FRONTEND>> * 10) / 10,
-                          children:[
-                            {
-			      name: "<<.FETCHBANDWIDTH_LABEL>>",
-			      value: Math.round(<<.FETCHBANDWIDTH>> * 10) / 10,
-                            },
-                            {
-			      name: "<<.FETCHLATENCY_LABEL>>",
-			      value: Math.round(<<.FETCHLATENCY>> * 10) / 10,
-                            },
-                          ]
-                        },
-                        {
-			  name: "<<.BADSPECULATION_LABEL>>",
-			  value: Math.round(<<.BADSPECULATION>> * 10) / 10,
-                          children: [
-                            {
-			      name: "<<.BRANCHMISPREDICTS_LABEL>>",
-			      value: Math.round(<<.BRANCHMISPREDICTS>> * 10) / 10,
-                            },
-                            {
-			      name: "<<.MACHINECLEARS_LABEL>>",
-			      value: Math.round(<<.MACHINECLEARS>> * 10) / 10,
-                            },
-                          ]
-                        },
-                        {
-			  name: "<<.BACKEND_LABEL>>",
-			  value: Math.round(<<.BACKEND>> * 10) / 10,
-                          children: [
-                            {
-			      name: "<<.CORE_LABEL>>",
-			      value: Math.round(<<.COREDATA>> * 10) / 10,
-                            },
-                            {
-			      name: "<<.MEMORY_LABEL>>",
-			      value: Math.round(<<.MEMORY>> * 10) / 10,
-                            },
-                          ],
-                        },
-                        {
-			  name: "<<.RETIRING_LABEL>>",
-			  value: Math.round(<<.RETIRING>> * 10) / 10,
-                          children: [
-                            {
-			      name: "<<.LIGHTOPS_LABEL>>",
-			      value: Math.round(<<.LIGHTOPS>> * 10) / 10,
-                            },
-                            {
-			      name: "<<.HEAVYOPS_LABEL>>",
-			      value: Math.round(<<.HEAVYOPS>> * 10) / 10,
-                            },
-                          ]
-                        },
-                      ],
-                      radius: [20, "100%"],
-                      label: {
-                        rotate: "radial",
-                      },
-                    },
-                  }} />
+                  <ReactECharts style={{ minHeight: "400px" }} option={tmasunburst} />
                 </Grid>
               </Grid>
               <Grid container>
@@ -575,7 +622,7 @@
                     Remote DRAM reads %
                   </Typography>
                   <Typography variant="body1">
-                    The memory reads that miss the last level cache (LLC) and are addressed to another socket's DRAM (remote DRAM) as a percentage of total memory read accesses. This does not include LLC prefetches.
+                    The memory reads that miss the last level cache (LLC) and are addressed to remote DRAM as a percentage of total memory read accesses. This does not include LLC prefetches.
                   </Typography>
                 </Grid>
                 <Grid item xs={7}>
@@ -588,7 +635,7 @@
                     Cache MPI (misses per instruction)
                   </Typography>
                   <Typography variant="body1">
-                    The ratio of the number of requests missing cache to the total number of completed instructions, at each level of cache (L1, L2 and LLC)
+                    The ratio of the number of requests missing cache to the total number of completed instructions, at each level of cache (L1d, L2 and LLC)
                   </Typography>
                 </Grid>
                 <Grid item xs={7}>