diff --git a/frontend/app.js b/frontend/app.js
index ade723a..a51062f 100644
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -121,9 +121,9 @@ function buildTimeSyncedOutputBuf() {
 function startVisualizerLoop() {
     if (rafHandle) return;
     function frame() {
-        drawWaveform(inputDisplayBuf, inputCanvas, '#6366f1');
+        drawWaveform(inputDisplayBuf, inputCanvas, '#a3e635');
         // Time-synced output: scrub through queued chunks using audioContext clock
-        drawWaveform(buildTimeSyncedOutputBuf(), outputCanvas, '#a855f7');
+        drawWaveform(buildTimeSyncedOutputBuf(), outputCanvas, '#22d3ee');
         rafHandle = requestAnimationFrame(frame);
     }
     rafHandle = requestAnimationFrame(frame);
@@ -698,7 +698,7 @@ function drawWaveform(dataArray, canvas, strokeColor) {
     const height = canvas.height;
     
     // Dark transparent redraw for trace/motion-blur effect
-    ctx.fillStyle = 'rgba(11, 12, 19, 0.4)';
+    ctx.fillStyle = 'rgba(5, 7, 4, 0.4)';
     ctx.fillRect(0, 0, width, height);
     
     ctx.lineWidth = 2 * window.devicePixelRatio;
@@ -736,7 +736,7 @@ function drawWaveform(dataArray, canvas, strokeColor) {
 
 function clearCanvas(canvas) {
     const ctx = canvas.getContext('2d');
-    ctx.fillStyle = '#0b0c13';
+    ctx.fillStyle = '#050704';
     ctx.fillRect(0, 0, canvas.width, canvas.height);
 }
 
diff --git a/frontend/index.html b/frontend/index.html
index 7072cfe..72f0511 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -87,7 +87,7 @@
                     </select>
                 </div>
 
-                <div id="hardware_devices_panel" class="control-group" style="display: none; border: 1px solid rgba(99, 102, 241, 0.2); padding: 0.75rem; border-radius: 8px; background: rgba(11, 12, 19, 0.5); box-shadow: 0 0 10px rgba(99, 102, 241, 0.05);">
+                <div id="hardware_devices_panel" class="control-group" style="display: none; border: 1px solid rgba(163, 230, 53, 0.2); padding: 0.75rem; border-radius: 8px; background: rgba(10, 13, 8, 0.5); box-shadow: 0 0 10px rgba(163, 230, 53, 0.05);">
                     <div style="margin-bottom: 0.75rem;">
                         <label for="server_input_select" style="font-size: 0.75rem; margin-bottom: 0.25rem; color: var(--primary); text-transform: uppercase; font-weight: 600;">🎙️ Input Mikrofon Server</label>
                         <select id="server_input_select" class="custom-select" style="font-size: 0.8rem; padding: 0.4rem;"></select>
diff --git a/frontend/styles.css b/frontend/styles.css
index 12a717b..5955c81 100644
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -1,19 +1,19 @@
 /* ==========================================================================
-   CSS GLOBAL TOKENS & RESET
+   CSS GLOBAL TOKENS & RESET (LIME LIGHT THEME)
    ========================================================================== */
 :root {
-    --bg-dark: #07080e;
-    --bg-card: rgba(13, 17, 30, 0.7);
-    --border-color: rgba(99, 102, 241, 0.18);
+    --bg-dark: #0a0d08;
+    --bg-card: rgba(15, 20, 13, 0.7);
+    --border-color: rgba(163, 230, 53, 0.18);
     
-    --primary: #6366f1;
-    --primary-glow: rgba(99, 102, 241, 0.4);
-    --accent: #a855f7;
-    --accent-glow: rgba(168, 85, 247, 0.45);
+    --primary: #a3e635;
+    --primary-glow: rgba(163, 230, 53, 0.4);
+    --accent: #22d3ee;
+    --accent-glow: rgba(34, 211, 238, 0.45);
     --emerald: #10b981;
-    --rose: #ef4444;
+    --rose: #f43f5e;
     
-    --text-main: #e2e8f0;
+    --text-main: #f8fafc;
     --text-muted: #94a3b8;
     --font-header: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
     --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
@@ -48,8 +48,8 @@ body {
     bottom: 0;
     z-index: -1;
     background: 
-        radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.08) 0%, transparent 40%),
-        radial-gradient(circle at 90% 80%, rgba(168, 85, 247, 0.09) 0%, transparent 45%);
+        radial-gradient(circle at 10% 20%, rgba(163, 230, 53, 0.08) 0%, transparent 40%),
+        radial-gradient(circle at 90% 80%, rgba(34, 211, 238, 0.09) 0%, transparent 45%);
     pointer-events: none;
 }
 
@@ -75,8 +75,8 @@ body {
 }
 
 .glassmorphism:hover {
-    border-color: rgba(99, 102, 241, 0.3);
-    box-shadow: 0 10px 40px 0 rgba(99, 102, 241, 0.1);
+    border-color: rgba(163, 230, 53, 0.3);
+    box-shadow: 0 10px 40px 0 rgba(163, 230, 53, 0.1);
 }
 
 .card {
@@ -118,7 +118,7 @@ body {
     background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
-    text-shadow: 0 0 40px rgba(99, 102, 241, 0.2);
+    text-shadow: 0 0 40px rgba(163, 230, 53, 0.2);
 }
 
 .pulse-indicator {
@@ -189,7 +189,7 @@ label {
 .custom-select {
     width: 100%;
     padding: 0.8rem 1rem;
-    background-color: rgba(20, 24, 45, 0.8);
+    background-color: rgba(14, 20, 13, 0.8);
     border: 1px solid var(--border-color);
     border-radius: 8px;
     color: var(--text-main);
@@ -211,7 +211,7 @@ label {
 }
 
 .input-group input {
-    background-color: rgba(20, 24, 45, 0.8);
+    background-color: rgba(14, 20, 13, 0.8);
     border: 1px solid var(--border-color);
     border-radius: 8px;
     color: var(--text-main);
@@ -251,7 +251,7 @@ label {
     width: 100%;
     height: 6px;
     border-radius: 3px;
-    background: rgba(99, 102, 241, 0.15);
+    background: rgba(163, 230, 53, 0.15);
     outline: none;
     margin: 0.75rem 0;
 }
@@ -299,25 +299,25 @@ label {
 }
 
 .btn-primary {
-    background: linear-gradient(135deg, var(--primary) 0%, #4f46e5 100%);
-    color: white;
+    background: linear-gradient(135deg, var(--primary) 0%, #65a30d 100%);
+    color: #0c0f0a;
     box-shadow: 0 4px 14px 0 var(--primary-glow);
 }
 
 .btn-primary:hover:not(:disabled) {
     transform: translateY(-2px);
-    box-shadow: 0 6px 20px 0 rgba(99, 102, 241, 0.6);
+    box-shadow: 0 6px 20px 0 rgba(163, 230, 53, 0.6);
 }
 
 .btn-accent {
-    background: linear-gradient(135deg, var(--accent) 0%, #7c3aed 100%);
-    color: white;
+    background: linear-gradient(135deg, var(--accent) 0%, #0891b2 100%);
+    color: #0c0f0a;
     box-shadow: 0 4px 14px 0 var(--accent-glow);
 }
 
 .btn-accent:hover:not(:disabled) {
     transform: translateY(-2px);
-    box-shadow: 0 6px 20px 0 rgba(168, 85, 247, 0.65);
+    box-shadow: 0 6px 20px 0 rgba(34, 211, 238, 0.65);
 }
 
 .btn:active:not(:disabled) {
@@ -328,6 +328,7 @@ label {
     opacity: 0.5;
     cursor: not-allowed;
     box-shadow: none;
+    color: var(--text-muted);
 }
 
 /* ==========================================================================
@@ -387,9 +388,9 @@ label {
 }
 
 .status-badge.disconnected {
-    background-color: rgba(239, 68, 68, 0.15);
+    background-color: rgba(254, 63, 94, 0.15);
     color: var(--rose);
-    border: 1px solid rgba(239, 68, 68, 0.3);
+    border: 1px solid rgba(254, 63, 94, 0.3);
 }
 
 .status-badge.disconnected::before {
@@ -398,9 +399,9 @@ label {
 }
 
 .status-badge.connecting {
-    background-color: rgba(168, 85, 247, 0.15);
+    background-color: rgba(34, 211, 238, 0.15);
     color: var(--accent);
-    border: 1px solid rgba(168, 85, 247, 0.3);
+    border: 1px solid rgba(34, 211, 238, 0.3);
 }
 
 .status-badge.connecting::before {
@@ -438,7 +439,7 @@ label {
 .tile-label {
     display: block;
     padding: 0.6rem;
-    background-color: rgba(20, 24, 45, 0.5);
+    background-color: rgba(15, 20, 13, 0.5);
     border: 1px solid var(--border-color);
     border-radius: 8px;
     text-align: center;
@@ -449,14 +450,14 @@ label {
 }
 
 .radio-tile input:checked + .tile-label {
-    background-color: rgba(99, 102, 241, 0.12);
+    background-color: rgba(163, 230, 53, 0.12);
     border-color: var(--primary);
     color: var(--text-main);
-    box-shadow: 0 0 10px rgba(99, 102, 241, 0.2);
+    box-shadow: 0 0 10px rgba(163, 230, 53, 0.2);
 }
 
 .radio-tile:hover .tile-label {
-    border-color: rgba(99, 102, 241, 0.4);
+    border-color: rgba(163, 230, 53, 0.4);
 }
 
 /* ==========================================================================
@@ -504,7 +505,7 @@ label {
 .waveform-canvas {
     width: 100%;
     height: 150px;
-    background-color: #0b0c13;
+    background-color: #050704;
     border-radius: 8px;
     border: 1px solid rgba(255, 255, 255, 0.03);
 }