diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..48a0b1b
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,190 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Plex Dashboard</title>
+    <link rel="icon" href="img/Viper-plex-logo-2.png" type="image/png">
+    <style>
+        /* Grundlegendes Setup */
+        body {
+            font-family: 'Roboto', sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #121212;
+            color: #EAEAEA;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            height: 100%;
+            overflow: hidden;  /* Verhindert das Scrollen */
+            flex-direction: column;
+            padding-top: 20px;
+            background: url(img/bg.jpg) no-repeat center center fixed;
+            background-size: cover;
+        }
+
+        h1 {
+            font-size: 2.5rem;
+            text-align: center;
+            color: #f50a0a;
+            margin-bottom: 40px;
+            letter-spacing: 2px;
+        }
+
+        .container {
+            width: 100%;
+            max-width: 1200px;
+            background-color: #1d1d1d00;
+            border-radius: 20px;
+            padding: 20px 40px;
+            transition: transform 0.3s ease;
+            margin: 0 10px;
+        }
+
+        .container:hover {
+            transform: scale(1.02);
+        }
+
+        .stats {
+            display: flex;
+            justify-content: space-between;
+            gap: 15px;
+            flex-wrap: wrap;
+        }
+
+        .stat-card {
+            background-color: #2C2C2C;
+            border-radius: 12px;
+            padding: 20px;
+            width: 100%;
+            max-width: 320px;
+            text-align: center;
+            transition: all 0.3s ease;
+            box-shadow: 0 8px 20px rgb(245, 2, 2);
+            margin-bottom: 20px;
+        }
+
+        .stat-card:hover {
+            background-color: #333333;
+            transform: translateY(-5px);
+        }
+
+        .stat-card h2 {
+            font-size: 1.25rem;
+            color: #00aaf8;
+            margin-bottom: 15px;
+            font-weight: 500;
+        }
+
+        .stat-card p {
+            font-size: 1.5rem;
+            font-weight: bold;
+            color: #EAEAEA;
+        }
+
+        .stat-card p.loading {
+            font-size: 1.2rem;
+            color: #808080;
+        }
+
+        /* Neueste Aktivitäten */
+        .recent-activity {
+            margin-top: 40px;
+            background-color: #2C2C2C;
+            border-radius: 12px;
+            padding: 20px;
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+            display: flex; /* Flexbox aktivieren */
+            justify-content: center; /* Horizontale Zentrierung */
+            align-items: center; /* Vertikale Zentrierung */
+            gap: 20px; /* Abstand zwischen den Elementen */
+			box-shadow: 0 8px 20px rgb(245, 2, 2);
+        }
+
+        .recent-activity ul {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            display: flex;
+            flex-wrap: wrap; /* Ermöglicht Umbruch, wenn nötig */
+            justify-content: center; /* Zentriert die Liste horizontal */
+        }
+
+        .recent-activity li {
+            font-size: 2rem; /* Größerer Text */
+            color: red; /* Roter Text */
+            font-weight: bold; /* Fettdruck */
+            text-align: center; /* Zentrierter Text */
+            margin-right: 10px; /* Abstand zwischen den Listenelementen */
+            margin-bottom: 10px; /* Abstand nach unten */
+        }
+
+        /* Diagramm */
+        .chart-container {
+            margin-top: 40px;
+            width: 100%;
+            height: 300px;
+        }
+    </style>
+</head>
+<body>
+
+    <div class="container">
+        <h1>Plex Dashboard</h1>
+
+        <!-- Statistiken -->
+        <div class="stats">
+            <div class="stat-card">
+                <h2>Aktive Sessions</h2>
+                <p id="activeSessions" class="loading">Lade...</p>
+            </div>
+            <div class="stat-card">
+                <h2>Gebannte Benutzer</h2>
+                <p id="bannedUsers" class="loading">Lade...</p>
+            </div>
+            <div class="stat-card">
+                <h2>Verstöße</h2>
+                <p id="violations" class="loading">Lade...</p>
+            </div>
+            <div class="stat-card">
+                <h2>Server CPU</h2>
+                <p id="serverCpu" class="loading">Lade...</p>
+            </div>
+            <div class="stat-card">
+                <h2>Server RAM</h2>
+                <p id="serverRam" class="loading">Lade...</p>
+            </div>
+        </div>
+
+        <!-- Neueste Aktivitäten -->
+        <div class="recent-activity">
+            <ul id="recentActivities">
+            </ul>
+        </div>
+    </div>
+
+    <script>
+        async function fetchStats() {
+            const response = await fetch("/stats");
+            const stats = await response.json();
+
+            document.getElementById('activeSessions').textContent = stats.activeSessions || 'Keine Daten';
+            document.getElementById('bannedUsers').textContent = stats.bannedUsers || 'Keine Daten';
+            document.getElementById('violations').textContent = stats.violations || 'Keine Daten';
+            document.getElementById('serverCpu').textContent = stats.serverCpu ? stats.serverCpu + '%' : 'Keine Daten';
+            document.getElementById('serverRam').textContent = stats.serverRam ? stats.serverRam + '%' : 'Keine Daten';
+
+            const activities = stats.recentActivities || ['Keine Aktivitäten vorhanden'];
+            document.getElementById('recentActivities').innerHTML = activities.map(activity => `<li>${activity}</li>`).join('');
+        }
+
+        fetchStats();
+
+        // Daten alle 5 Sekunden automatisch aktualisieren
+    setInterval(fetchStats, 5000);  // 5000 Millisekunden = 5 Sekunden
+    </script>
+
+</body>
+</html>
\ No newline at end of file
