diff --git a/src/http_server.rs b/src/http_server.rs
index 6b10065..f4157cc 100644
--- a/src/http_server.rs
+++ b/src/http_server.rs
@@ -35,10 +35,10 @@ pub async fn http_serve(database: &Database, mpris_producer: Sender<(String, Str
         .fallback_service(ServeDir::new("static"))
         .route("/stats", get(get_stats))
         .route("/", get(root))
-        .route("/rating/:rating", get(cache_rating_only))
-        .route("/userid/:user_id", get(add_userid))
-        .route("/usercard/:user_card", get(add_userid_by_card))
-        .route("/:user_id/:rating", get(add_rating))
+        .route("/rating/{rating}", get(cache_rating_only))
+        .route("/userid/{user_id}", get(add_userid))
+        .route("/usercard/{user_card}", get(add_userid_by_card))
+        .route("/{user_id}/{rating}", get(add_rating))
         .with_state(shared_state);
 
     let listener = tokio::net::TcpListener::bind("0.0.0.0:3000").await.unwrap();
diff --git a/static/index.html b/static/index.html
new file mode 100644
index 0000000..b706656
--- /dev/null
+++ b/static/index.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Live Music Ratings</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body>
+    <main class="container">
+        <h1>🎵 Live Leaderboard</h1>
+        
+        <article>
+            <canvas id="ratingsChart"></canvas>
+        </article>
+
+        <article>
+            <table id="stats-table">
+                <thead>
+                    <tr>
+                        <th>Listener</th>
+                        <th>Tracks Rated</th>
+                        <th>Average Rating</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr><td aria-busy="true" colspan="3">Loading live stats...</td></tr>
+                </tbody>
+            </table>
+        </article>
+    </main>
+
+    <script>
+        // 3. Initialize the Chart (empty at first)
+        const ctx = document.getElementById('ratingsChart');
+        let ratingsChart = new Chart(ctx, {
+            type: 'bar',
+            data: {
+                labels: [], // This will hold user names
+                datasets: [{
+                    label: 'Total Tracks Rated',
+                    data: [], // This will hold the counts
+                    backgroundColor: 'rgba(54, 162, 235, 0.5)',
+                    borderColor: 'rgba(54, 162, 235, 1)',
+                    borderWidth: 1,
+                    borderRadius: 4
+                }]
+            },
+            options: {
+                responsive: true,
+                scales: {
+                    y: {
+                        beginAtZero: true,
+                        ticks: { stepSize: 1 } // Keep the Y axis as whole numbers
+                    }
+                }
+            }
+        });
+
+        async function fetchLiveStats() {
+            try {
+                const response = await fetch('/stats');
+                const data = await response.json();
+                
+                // Update the Table
+                const tbody = document.querySelector('#stats-table tbody');
+                tbody.innerHTML = ''; 
+                data.forEach(user => {
+                    const row = `<tr>
+                        <td><strong>${user.name}</strong></td>
+                        <td>${user.rating_count}</td>
+                        <td>⭐ ${user.average_rating.toFixed(2)}</td>
+                    </tr>`;
+                    tbody.innerHTML += row;
+                });
+
+                // Update the Chart
+                // Map the JSON data into simple arrays for Chart.js
+                ratingsChart.data.labels = data.map(user => user.name);
+                ratingsChart.data.datasets[0].data = data.map(user => user.rating_count);
+                
+                // Call update('none') to prevent the chart from doing a bouncy 
+                // re-draw animation every 2 seconds when it polls.
+                ratingsChart.update('none'); 
+
+            } catch (error) {
+                console.error("Error fetching stats:", error);
+            }
+        }
+
+        fetchLiveStats();
+        setInterval(fetchLiveStats, 2000);
+    </script>
+</body>
+</html>
