diff --git a/dashboard/templates/index.html b/dashboard/templates/index.html
index ab1bef8..c32b30a 100644
--- a/dashboard/templates/index.html
+++ b/dashboard/templates/index.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="refresh" content="30">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <title>Ruby's Dashboard</title>
     <style>
         body {
@@ -95,12 +96,54 @@
 
     <div class="section">
         <h2>📉 Recent Loss</h2>
-        <ul>
-            {% for loss in loss_data[-10:]|reverse %}
-                <li>{{ loss }}</li>
-            {% endfor %}
-        </ul>
+        <canvas id="lossChart" width="400" height="200"></canvas>
     </div>
+    <script>
+    const ctxLoss = document.getElementById('lossChart').getContext('2d');
+    
+    const lossData = {
+        labels: [
+            {% for entry in loss_data[-50:] %}
+                "{{ loop.index0 }}",
+            {% endfor %}
+        ],
+        datasets: [{
+            label: 'Loss',
+            data: [
+                {% for entry in loss_data[-50:] %}
+                    {{ entry }},
+                {% endfor %}
+            ],
+            fill: false,
+            borderColor: 'rgb(255, 99, 132)',
+            tension: 0.2
+        }]
+    };
+    
+    const lossChart = new Chart(ctxLoss, {
+        type: 'line',
+        data: lossData,
+        options: {
+            scales: {
+                x: {
+                    display: false  // hide x-axis ticks
+                },
+                y: {
+                    title: {
+                        display: true,
+                        text: 'Loss Value'
+                    },
+                    beginAtZero: false
+                }
+            },
+            plugins: {
+                legend: {
+                    display: false
+                }
+            }
+        }
+    });
+    </script>
 
 </body>
 </html>
