diff --git a/public/js/chart.js b/public/js/chart.js
index 5652f78..e04aa18 100644
--- a/public/js/chart.js
+++ b/public/js/chart.js
@@ -391,12 +391,12 @@ class MetricChart {
     if (series) {
         // Draw Stacked Area
         const modes = [
-            { name: 'idle', color: 'rgba(100, 116, 139, 0.4)', stroke: '#64748b' },   // Slate
-            { name: 'other', color: 'rgba(168, 85, 247, 0.5)', stroke: '#a855f7' },  // Purple
-            { name: 'irq', color: 'rgba(234, 179, 8, 0.5)', stroke: '#eab308' },    // Yellow
-            { name: 'iowait', color: 'rgba(239, 68, 68, 0.5)', stroke: '#ef4444' }, // Red
-            { name: 'system', color: 'rgba(6, 182, 212, 0.5)', stroke: '#06b6d4' }, // Cyan
-            { name: 'user', color: 'rgba(99, 102, 241, 0.5)', stroke: '#6366f1' }   // Indigo
+            { name: 'idle', color: 'rgba(34, 197, 94, 0.4)', stroke: '#22c55e' },   // Green
+            { name: 'other', color: 'rgba(168, 85, 247, 0.4)', stroke: '#a855f7' },  // Purple
+            { name: 'irq', color: 'rgba(249, 115, 22, 0.4)', stroke: '#f97316' },    // Orange
+            { name: 'iowait', color: 'rgba(239, 68, 68, 0.4)', stroke: '#ef4444' }, // Red
+            { name: 'system', color: 'rgba(234, 179, 8, 0.4)', stroke: '#eab308' }, // Yellow
+            { name: 'user', color: 'rgba(99, 102, 241, 0.4)', stroke: '#6366f1' }   // Indigo
         ];
 
         let currentBase = new Array(len).fill(0);
@@ -434,17 +434,17 @@ class MetricChart {
             }
         });
 
-        // Add Legend at bottom right
+        // Add Legend at bottom right (moved up slightly)
         ctx.font = '9px sans-serif';
         ctx.textAlign = 'right';
         let lx = w - 10;
-        let ly = h - 5;
+        let ly = h - 20; // Increased padding from bottom
         [...modes].reverse().forEach(m => {
             ctx.fillStyle = m.stroke;
             ctx.fillRect(lx - 10, ly - 8, 8, 8);
             ctx.fillStyle = '#5a6380';
             ctx.fillText(m.name.charAt(0).toUpperCase() + m.name.slice(1), lx - 15, ly - 1);
-            lx -= 60;
+            lx -= 70; // Increased gap for safety
         });
 
     } else {