diff --git a/data/index.html b/data/index.html
index c4ad5a3..f3a1e2a 100644
--- a/data/index.html
+++ b/data/index.html
@@ -3,6 +3,7 @@
 <head>
     <title>ESP32 Piano Spectrum Analyzer</title>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation"></script>
     <style>
         body {
             font-family: Arial, sans-serif;
@@ -37,17 +38,41 @@
     </div>
 
     <script>
+        Chart.register('chartjs-plugin-annotation');
+        
+        // Piano note frequencies (Hz)
+        const noteFrequencies = {
+            'C2': 65.41, 'C#2': 69.30, 'D2': 73.42, 'D#2': 77.78, 'E2': 82.41, 'F2': 87.31, 
+            'F#2': 92.50, 'G2': 98.00, 'G#2': 103.83, 'A2': 110.00, 'A#2': 116.54, 'B2': 123.47,
+            'C3': 130.81, 'C#3': 138.59, 'D3': 146.83, 'D#3': 155.56, 'E3': 164.81, 'F3': 174.61,
+            'F#3': 185.00, 'G3': 196.00, 'G#3': 207.65, 'A3': 220.00, 'A#3': 233.08, 'B3': 246.94,
+            'C4': 261.63, 'C#4': 277.18, 'D4': 293.66, 'D#4': 311.13, 'E4': 329.63, 'F4': 349.23,
+            'F#4': 369.99, 'G4': 392.00, 'G#4': 415.30, 'A4': 440.00, 'A#4': 466.16, 'B4': 493.88,
+            'C5': 523.25, 'C#5': 554.37, 'D5': 587.33, 'D#5': 622.25, 'E5': 659.26, 'F5': 698.46,
+            'F#5': 739.99, 'G5': 783.99, 'G#5': 830.61, 'A5': 880.00, 'A#5': 932.33, 'B5': 987.77,
+            'C6': 1046.50
+        };
+
+        // Create ticks for the x-axis
+        const xAxisTicks = Object.entries(noteFrequencies).filter(([note]) => 
+            note.length === 2 || note === 'C#4' || note === 'F#4' || note === 'A#4'
+        ).map(([note, freq]) => ({
+            value: freq,
+            label: note
+        }));
+
         const ctx = document.getElementById('spectrumChart').getContext('2d');
         const chart = new Chart(ctx, {
             type: 'line',
             data: {
-                labels: Array.from({length: 512}, (_, i) => i * (8000 / 1024)),
+                labels: Array.from({length: 134}, (_, i) => (i + 8) * (8000 / 1024)),
                 datasets: [{
                     label: 'Frequency Spectrum',
-                    data: Array(512).fill(0),
+                    data: Array(134).fill(0),
                     borderColor: 'rgb(75, 192, 192)',
                     tension: 0.1,
-                    fill: false
+                    fill: true,
+                    backgroundColor: 'rgba(75, 192, 192, 0.2)'
                 }]
             },
             options: {
@@ -59,14 +84,89 @@
                 scales: {
                     y: {
                         beginAtZero: true,
-                        max: 5000
+                        max: 5000,
+                        title: {
+                            display: true,
+                            text: 'Magnitude'
+                        }
                     },
                     x: {
+                        type: 'logarithmic',
+                        min: 60,
+                        max: 1100,
                         title: {
                             display: true,
                             text: 'Frequency (Hz)'
+                        },
+                        ticks: {
+                            callback: function(value, index, values) {
+                                // Find the closest note
+                                const closestNote = Object.entries(noteFrequencies)
+                                    .reduce((closest, [note, freq]) => {
+                                        return Math.abs(freq - value) < Math.abs(freq - closest.freq) 
+                                            ? { note, freq }
+                                            : closest;
+                                    }, { note: '', freq: Infinity });
+                                
+                                if (Math.abs(value - closestNote.freq) < 1) {
+                                    return closestNote.note;
+                                }
+                                return '';
+                            }
+                        },
+                        grid: {
+                            color: (ctx) => {
+                                const value = ctx.tick.value;
+                                // Check if this tick corresponds to a C note
+                                if (Object.entries(noteFrequencies)
+                                    .some(([note, freq]) => 
+                                        note.startsWith('C') && Math.abs(freq - value) < 1)) {
+                                    return 'rgba(255, 0, 0, 0.1)';
+                                }
+                                return 'rgba(0, 0, 0, 0.1)';
+                            }
                         }
                     }
+                },
+                plugins: {
+                    annotation: {
+                        annotations: Object.entries(noteFrequencies)
+                            .filter(([note]) => note.startsWith('C'))
+                            .reduce((acc, [note, freq]) => {
+                                acc[note] = {
+                                    type: 'line',
+                                    xMin: freq,
+                                    xMax: freq,
+                                    borderColor: 'rgba(255, 99, 132, 0.5)',
+                                    borderWidth: 1,
+                                    label: {
+                                        content: note,
+                                        enabled: true,
+                                        position: 'top'
+                                    }
+                                };
+                                return acc;
+                            }, {})
+                    },
+                    tooltip: {
+                        callbacks: {
+                            title: function(context) {
+                                const freq = context[0].parsed.x;
+                                // Find the closest note
+                                const closestNote = Object.entries(noteFrequencies)
+                                    .reduce((closest, [note, noteFreq]) => {
+                                        return Math.abs(noteFreq - freq) < Math.abs(noteFreq - closest.freq)
+                                            ? { note, freq: noteFreq }
+                                            : closest;
+                                    }, { note: '', freq: Infinity });
+                                
+                                return `Frequency: ${freq.toFixed(1)} Hz (Near ${closestNote.note})`;
+                            }
+                        }
+                    },
+                    legend: {
+                        display: false
+                    }
                 }
             }
         });
@@ -74,10 +174,33 @@
         const wsUrl = `ws://${window.location.hostname}/ws`;
         const ws = new WebSocket(wsUrl);
 
+        function interpolateSpectrum(spectrum) {
+            // Convert the linear frequency bins to logarithmic scale
+            const result = new Array(spectrum.length).fill(0);
+            const binWidth = 8000 / 1024; // Hz per bin
+            
+            for (let i = 0; i < spectrum.length; i++) {
+                const freq = (i + 8) * binWidth;
+                const logFreq = Math.log10(freq);
+                
+                // Find the two closest bins and interpolate
+                const bin1 = Math.floor((logFreq - Math.log10(60)) / (Math.log10(1100) - Math.log10(60)) * spectrum.length);
+                const bin2 = bin1 + 1;
+                
+                if (bin1 >= 0 && bin2 < spectrum.length) {
+                    const t = (logFreq - Math.log10(60)) / (Math.log10(1100) - Math.log10(60)) * spectrum.length - bin1;
+                    result[i] = spectrum[bin1] * (1 - t) + spectrum[bin2] * t;
+                }
+            }
+            
+            return result;
+        }
+
         ws.onmessage = function(event) {
             const spectrum = JSON.parse(event.data);
-            chart.data.datasets[0].data = spectrum;
-            chart.update();
+            // Interpolate the spectrum data for logarithmic display
+            chart.data.datasets[0].data = interpolateSpectrum(spectrum);
+            chart.update('none'); // Use 'none' mode for maximum performance
         };
 
         ws.onclose = function() {
diff --git a/src/main.cpp b/src/main.cpp
index cd5e978..f5a61a6 100644
--- a/src/main.cpp
+++ b/src/main.cpp
@@ -137,8 +137,15 @@ void sendSpectrumData() {
     if (ws.count() > 0 && !noteDetector.isCalibrating()) {
         const auto& spectrum = noteDetector.getSpectrum();
         String json = "[";
-        for (size_t i = 0; i < Config::FFT_SIZE/2; i++) {
-            if (i > 0) json += ",";
+        
+        // Calculate bin range for 60-1100 Hz
+        // At 8kHz sample rate with 1024 FFT size:
+        // binFreq = index * (8000/1024) = index * 7.8125 Hz
+        // For 60 Hz: bin ≈ 8
+        // For 1100 Hz: bin ≈ 141
+        
+        for (int i = 8; i <= 141; i++) {
+            if (i > 8) json += ",";
             json += String(spectrum[i], 2);
         }
         json += "]";
