diff --git a/src/components/PlayerStats.astro b/src/components/PlayerStats.astro
index 0d70cf2..356ba16 100644
--- a/src/components/PlayerStats.astro
+++ b/src/components/PlayerStats.astro
@@ -2,22 +2,29 @@
 
 ---
 
-<canvas class="player-stats" width="500" height="300"></canvas>
+<div class="bg-quardiary-darker p-8 rounded-xl max-w-paragraph">
+    <canvas class="player-stats"></canvas>
+</div>
 
 <script>
     import { Chart } from 'chart.js/auto';
 
-    const data = await (await fetch(
-        'https://globed.dankmeme.dev/public/players?period=hour',
-        {
-            mode: 'no-cors'
-        }
-    )).json();
+    const data = (await (await fetch('https://globed.dankmeme.dev/public/players?period=hour')).json()).data as [{
+        log_time: number,
+        count: number,
+    }];
     document.querySelectorAll('.player-stats').forEach(canvas => {
         const chart = new Chart(canvas as HTMLCanvasElement, {
             type: 'line',
-            data: data,
+            data: {
+                labels: data.map(row => new Date(row.log_time).toDateString()),
+                datasets: [
+                    {
+                        label: 'Players',
+                        data: data.map(row => row.count),
+                    }
+                ]
+            }
         });
     });
-
 </script>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index e52beac..5bc2535 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -95,7 +95,9 @@ const screenshots = (await Astro.glob('../images/screenshot-*.png')).map(file =>
         </div>
     </Content>
 
-    <!-- <PlayerStats/> -->
+    <PlayerStats />
+
+    <div class="h-20" />
 
     <Donate />