diff --git a/public/dashboard.html b/public/dashboard.html
index 9770940..0ba2a4a 100644
--- a/public/dashboard.html
+++ b/public/dashboard.html
@@ -2,280 +2,29 @@
 <html lang="de">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Dashboard - Elemente Auswahl</title>
-    <style>
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background-color: #f4f7f9;
-            margin: 0;
-            display: flex;
-            flex-direction: column;
-            height: 100vh;
-        }
-
-        /* Header Bereich */
-        .header {
-            background: #ffffff;
-            padding: 15px 30px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-            z-index: 10;
-        }
-
-        .header h1 { margin: 0; font-size: 1.5rem; color: #2d3436; }
-
-        /* Layout Container */
-        .main-container {
-            display: flex;
-            flex: 1;
-            overflow: hidden;
-            padding: 20px;
-            gap: 20px;
-        }
-
-        /* Linke Seite */
-        .left-panel {
-            flex: 1;
-            background: white;
-            border-radius: 12px;
-            padding: 20px;
-            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            text-align: center;
-        }
-
-        /* Rechte Seite (Auswahlfenster mit Filtern) */
-        .right-panel {
-            width: 400px;
-            background: #ffffff;
-            border-radius: 12px;
-            padding: 20px;
-            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
-            display: flex;
-            flex-direction: column;
-        }
-
-        /* Filter-Sektion */
-        .filter-section {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 10px;
-            margin-bottom: 20px;
-            padding-bottom: 15px;
-            border-bottom: 2px solid #f4f7f9;
-        }
-
-        .filter-group { display: flex; flex-direction: column; }
-        .filter-group label { font-size: 0.75rem; font-weight: bold; color: #636e72; margin-bottom: 4px; }
-        .filter-group select { 
-            padding: 6px; 
-            border-radius: 6px; 
-            border: 1px solid #dfe6e9; 
-            background: #fdfdfd;
-            font-size: 0.85rem;
-        }
-
-        /* Liste */
-        .scroll-area {
-            overflow-y: auto;
-            flex: 1;
-        }
-
-        /* Element-Karten */
-        .element-item { 
-            padding: 15px; 
-            margin-bottom: 12px; 
-            border: 1px solid #eee; 
-            border-radius: 10px; 
-            background: #fff;
-            cursor: pointer;
-            transition: all 0.2s ease;
-        }
-
-        .element-item:hover {
-            transform: translateX(-5px);
-            box-shadow: 0 4px 12px rgba(0,123,255,0.15);
-            border-color: #007bff;
-        }
-
-        .element-header {
-            font-size: 0.75rem;
-            color: #007bff;
-            margin-bottom: 5px;
-            text-transform: uppercase;
-            font-weight: bold;
-        }
-
-        .element-content { font-size: 0.95rem; color: #2d3436; line-height: 1.4; }
-
-        .element-footer {
-            margin-top: 10px;
-            font-size: 0.7rem;
-            display: flex;
-            justify-content: space-between;
-            color: #b2bec3;
-        }
-
-        .badge { background: #dfe6e9; color: #636e72; padding: 2px 6px; border-radius: 4px; font-weight: bold; }
-
-        .logout-btn {
-            background-color: #ff7675;
-            color: white;
-            border: none;
-            padding: 8px 16px;
-            border-radius: 6px;
-            cursor: pointer;
-            font-weight: 600;
-        }
-
-        .logout-btn:hover { background-color: #d63031; }
-    </style>
+    <title>Dashboard</title>
+    <link rel="stylesheet" href="css/styles.css">
 </head>
 <body>
 
-    <div class="header">
-        <h1>✅ Login erfolgreich!</h1>
-        <button class="logout-btn" onclick="logout()">Abmelden</button>
-    </div>
-
-    <div class="main-container">
-        <div class="left-panel">
-            <h2>Willkommen!</h2>
-            <p>Nutze die Filter rechts, um deine Auswahl einzugrenzen.</p>
-        </div>
-
-        <div class="right-panel">
-            <h3 style="margin-top: 0;">Filter</h3>
-            
-            <div class="filter-section">
-                <div class="filter-group">
-                    <label>Bundesland</label>
-                    <select id="filterBundesland" onchange="applyFilters()">
-                        <option value="">Alle</option>
-                    </select>
-                </div>
-                <div class="filter-group">
-                    <label>Fach</label>
-                    <select id="filterFach" onchange="applyFilters()">
-                        <option value="">Alle</option>
-                    </select>
-                </div>
-                <div class="filter-group">
-                    <label>Version</label>
-                    <select id="filterVersion" onchange="applyFilters()">
-                        <option value="">Alle</option>
-                    </select>
-                </div>
-                <div class="filter-group">
-                    <label>Stufe</label>
-                    <select id="filterStufe" onchange="applyFilters()">
-                        <option value="">Alle</option>
-                    </select>
-                </div>
-            </div>
-
-            <div class="scroll-area" id="elementsList">
-                <p>Lade Elemente...</p>
-            </div>
-        </div>
+    <div class="container">
+        <h1>Dashboard</h1>
+        <p>Login erfolgreich 🎉</p>
+        <button id="logout">Logout</button>
     </div>
 
     <script>
-        let allElements = []; // Hier speichern wir die Daten vom Server
+        const token = localStorage.getItem("token")
 
-        async function init() {
-            try {
-                const response = await fetch('http://localhost:5003/elements');
-                allElements = await response.json();
-                
-                populateFilterOptions();
-                renderElements(allElements);
-            } catch (err) {
-                document.getElementById('elementsList').innerText = "Fehler beim Laden.";
-            }
+        if (!token) {
+            window.location.href = "login.html"
         }
 
-        // Füllt die Dropdowns automatisch mit den Werten aus der DB
-        function populateFilterOptions() {
-            const filters = {
-                bundesland: document.getElementById('filterBundesland'),
-                fach: document.getElementById('filterFach'),
-                version: document.getElementById('filterVersion'),
-                stufe: document.getElementById('filterStufe')
-            };
-
-            const uniqueValues = {
-                bundesland: [...new Set(allElements.map(el => el.bundesland))],
-                fach: [...new Set(allElements.map(el => el.fach))],
-                version: [...new Set(allElements.map(el => el.version))],
-                stufe: [...new Set(allElements.map(el => el.stufe))]
-            };
-
-            for (let key in filters) {
-                uniqueValues[key].sort().forEach(val => {
-                    const opt = document.createElement('option');
-                    opt.value = val;
-                    opt.innerText = val;
-                    filters[key].appendChild(opt);
-                });
-            }
-        }
-
-        // Filtert die Liste basierend auf der Auswahl
-        function applyFilters() {
-            const fLand = document.getElementById('filterBundesland').value;
-            const fFach = document.getElementById('filterFach').value;
-            const fVersion = document.getElementById('filterVersion').value;
-            const fStufe = document.getElementById('filterStufe').value;
-
-            const filtered = allElements.filter(el => {
-                return (fLand === "" || el.bundesland === fLand) &&
-                       (fFach === "" || el.fach === fFach) &&
-                       (fVersion === "" || el.version === fVersion) &&
-                       (fStufe === "" || String(el.stufe) === fStufe);
-            });
-
-            renderElements(filtered);
-        }
-
-        // Zeichnet die Karten in die Liste
-        function renderElements(data) {
-            const list = document.getElementById('elementsList');
-            list.innerHTML = '';
-
-            if (data.length === 0) {
-                list.innerHTML = '<p style="text-align:center; color:#b2bec3;">Keine Treffer.</p>';
-                return;
-            }
-
-            data.forEach(el => {
-                const card = document.createElement('div');
-                card.className = 'element-item';
-                card.innerHTML = `
-                    <div class="element-header">${el.bundesland} | ${el.fach}</div>
-                    <div class="element-content">${el.inhalt}</div>
-                    <div class="element-footer">
-                        <span>V: ${el.version}</span>
-                        <span class="badge">Stufe ${el.stufe}</span>
-                    </div>
-                `;
-                card.onclick = () => alert(el.inhalt);
-                list.appendChild(card);
-            });
-        }
-
-        window.logout = function() {
-            localStorage.removeItem('token');
-            window.location.href = 'index.html';
-        };
-
-        init();
+        document.getElementById("logout").addEventListener("click", () => {
+            localStorage.removeItem("token")
+            window.location.href = "login.html"
+        })
     </script>
+
 </body>
 </html>
\ No newline at end of file
diff --git a/public/login.js b/public/login.js
index e69de29..f13b34d 100644
--- a/public/login.js
+++ b/public/login.js
@@ -0,0 +1,35 @@
+const form = document.getElementById("loginForm")
+const errorMessage = document.getElementById("errorMessage")
+
+form.addEventListener("submit", async (event) => {
+    event.preventDefault()
+
+    const username = document.getElementById("username").value
+    const password = document.getElementById("password").value
+
+    try {
+        const response = await fetch("/auth/login", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify({ username, password })
+        })
+
+        const data = await response.json()
+
+        if (!response.ok) {
+            errorMessage.textContent = data.message
+            return
+        }
+
+        // Token speichern
+        localStorage.setItem("token", data.token)
+
+        // Weiterleiten
+        window.location.href = "dashboard.html"
+
+    } catch (err) {
+        errorMessage.textContent = "Server nicht erreichbar"
+    }
+})
\ No newline at end of file
