diff --git a/index.php b/index.php
index 8f169b9..9314f74 100644
--- a/index.php
+++ b/index.php
@@ -383,7 +383,7 @@ try {
         bottom: 0;
         left: 0;
         width: 100%;
-        height: 120px;
+        height: 140px;
         z-index: 1;
         opacity: 0.8;
         pointer-events: none;
@@ -605,7 +605,7 @@ try {
                 source = audioContext.createMediaElementSource(audio);
                 source.connect(analyser);
                 analyser.connect(audioContext.destination);
-                analyser.fftSize = 256; 
+                analyser.fftSize = 64; // Fewer bars for a cleaner, modern look
                 const bufferLength = analyser.frequencyBinCount;
                 dataArray = new Uint8Array(bufferLength);
             } catch (e) {
@@ -624,44 +624,41 @@ try {
 
         const width = canvas.width;
         const height = canvas.height;
-        
-        ctx.beginPath();
-        ctx.lineWidth = 3;
-        ctx.strokeStyle = '#ff2d55';
-        ctx.lineCap = 'round';
-        ctx.lineJoin = 'round';
-
-        const sliceWidth = width / dataArray.length;
+        // We only use the first half of the frequency data because the high end is often empty
+        const barCount = dataArray.length / 1.2; 
+        const barWidth = (width / barCount);
         let x = 0;
 
-        for (let i = 0; i < dataArray.length; i++) {
-            const v = dataArray[i] / 128.0;
-            const y = (v * height) / 2;
+        for (let i = 0; i < barCount; i++) {
+            let barHeight = (dataArray[i] / 255) * height * 0.8;
+            if (barHeight < 5) barHeight = 5; // Minimum bar height for visibility
 
-            if (i === 0) {
-                ctx.moveTo(x, height - y);
-            } else {
-                ctx.lineTo(x, height - y);
-            }
+            // Create a vibrant gradient for each bar
+            const gradient = ctx.createLinearGradient(0, height - barHeight, 0, height);
+            gradient.addColorStop(0, '#ff2d55'); // Hot Pink
+            gradient.addColorStop(0.5, '#ff512f'); // Vibrant Orange-Red
+            gradient.addColorStop(1, 'rgba(255, 45, 85, 0.2)');
 
-            x += sliceWidth;
+            ctx.fillStyle = gradient;
+            
+            // Draw stylized bars with rounded tops
+            const bx = x + 2; // small padding
+            const bw = barWidth - 4; // bar thickness
+            const bh = barHeight;
+            const by = height - bh;
+            const radius = bw / 2;
+
+            ctx.beginPath();
+            ctx.roundRect(bx, by, bw, bh, [radius, radius, 0, 0]);
+            ctx.fill();
+
+            x += barWidth;
         }
-
-        ctx.lineTo(canvas.width, height);
-        
-        // Fill area under the wave
-        const gradient = ctx.createLinearGradient(0, 0, 0, height);
-        gradient.addColorStop(0, 'rgba(255, 45, 85, 0.5)');
-        gradient.addColorStop(1, 'rgba(255, 45, 85, 0)');
-        ctx.fillStyle = gradient;
-        ctx.fill();
-        
-        ctx.stroke();
     }
 
     function resizeCanvas() {
         canvas.width = canvas.parentElement.offsetWidth;
-        canvas.height = 120;
+        canvas.height = 140;
     }
 
     window.addEventListener('resize', resizeCanvas);