diff --git a/index.html b/index.html
index 934648c..75e2064 100644
--- a/index.html
+++ b/index.html
@@ -106,7 +106,7 @@
             <!-- Navbar start: Logo -->
             <a href="/" class="btn btn-ghost normal-case text-xl">skillcoins.de</a>
             
-            <!-- Navbar end: Dark Mode Toggle und Logout Button -->
+            <!-- Navbar end: Dark Mode Toggle und Auth Buttons -->
             <div class="flex items-center space-x-4">
                 <!-- Dark Mode Toggle (Swap Component) -->
                 <label class="swap swap-rotate">
@@ -128,167 +128,179 @@
                     </svg>
                 </label>
 
+                <!-- Login Button (nur sichtbar, wenn nicht eingeloggt) -->
+                <button id="keycloak-login" class="btn btn-primary">Login</button>
+
                 <!-- Logout Button (nur sichtbar, wenn eingeloggt) -->
                 <button id="keycloak-logout" class="btn btn-secondary hidden">Logout</button>
             </div>
-        </div>
-    </header>
+        </header>
 
-    <!-- Hero Section -->
-    <main class="container mx-auto my-10">
-        <div class="hero bg-base-100 shadow-lg p-10 rounded-lg">
-            <div class="hero-content text-center">
-                <div>
-                    <h1 class="text-5xl font-bold">Willkommen bei SkillCoins</h1>
-                    <p class="py-6 text-lg">Lerne, sammle Punkte und verdiene digitale Belohnungen!</p>
+        <!-- Hero Section -->
+        <main class="container mx-auto my-10">
+            <div class="hero bg-base-100 shadow-lg p-10 rounded-lg">
+                <div class="hero-content text-center">
+                    <div>
+                        <h1 class="text-5xl font-bold">Willkommen bei SkillCoins</h1>
+                        <p class="py-6 text-lg">Lerne, sammle Punkte und verdiene digitale Belohnungen!</p>
 
-                    <!-- CTA - Registrieren Button -->
-                    <div id="cta-container">
-                        <button id="register-button" class="btn btn-primary">Registrieren</button>
+                        <!-- CTA - Registrieren Button -->
+                        <div id="cta-container">
+                            <button id="register-button" class="btn btn-primary">Registrieren</button>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
 
-        <!-- Status -->
-        <div id="status-container" class="alert alert-info mt-6 hidden">
-            <span id="status" class="text-gray-600">Nicht eingeloggt.</span>
-        </div>
-    </main>
+            <!-- Status -->
+            <div id="status-container" class="alert alert-info mt-6 hidden">
+                <span id="status" class="text-gray-600">Nicht eingeloggt.</span>
+            </div>
+        </main>
 
-    <!-- Footer -->
-    <footer class="footer footer-center p-4 bg-gray-800 text-white">
-        <div>
-            <p>© 2024 skillcoins.de. Alle Rechte vorbehalten.</p>
-        </div>
-    </footer>
+        <!-- Footer -->
+        <footer class="footer footer-center p-4 bg-gray-800 text-white">
+            <div>
+                <p>© 2024 skillcoins.de. Alle Rechte vorbehalten.</p>
+            </div>
+        </footer>
 
-    <!-- Scripts -->
-    <script>
-        document.addEventListener('DOMContentLoaded', function () {
-            const registerButton = document.getElementById('register-button');
-            const logoutButton = document.getElementById('keycloak-logout');
-            const themeToggleCheckbox = document.getElementById('theme-toggle-checkbox');
-            const lightIcon = document.getElementById('theme-toggle-light-icon');
-            const darkIcon = document.getElementById('theme-toggle-dark-icon');
-            const statusContainer = document.getElementById('status-container');
-            const statusText = document.getElementById('status');
-            const apiUrl = 'https://resourceserver.de/v1/graphql'; // Hasura GraphQL endpoint
+        <!-- Scripts -->
+        <script>
+            document.addEventListener('DOMContentLoaded', function () {
+                const registerButton = document.getElementById('register-button');
+                const loginButton = document.getElementById('keycloak-login');
+                const logoutButton = document.getElementById('keycloak-logout');
+                const themeToggleCheckbox = document.getElementById('theme-toggle-checkbox');
+                const lightIcon = document.getElementById('theme-toggle-light-icon');
+                const darkIcon = document.getElementById('theme-toggle-dark-icon');
+                const statusContainer = document.getElementById('status-container');
+                const statusText = document.getElementById('status');
+                const apiUrl = 'https://resourceserver.de/v1/graphql'; // Hasura GraphQL endpoint
 
-            // Initialize Keycloak
-            const keycloak = new Keycloak({
-                url: 'https://identityserver.de',  // Keycloak server URL
-                realm: 'fakturaservice',           // Keycloak realm
-                clientId: 'skillcoins-frontend',   // Keycloak client ID
-            });
+                // Initialize Keycloak
+                const keycloak = new Keycloak({
+                    url: 'https://identityserver.de',  // Keycloak server URL
+                    realm: 'fakturaservice',           // Keycloak realm
+                    clientId: 'skillcoins-frontend',   // Keycloak client ID
+                });
 
-            // Funktion zum Überprüfen des Tokens im localStorage
-            function checkToken() {
-                const token = localStorage.getItem('keycloak-token');
-                if (token) {
-                    keycloak.token = token;
-                    keycloak.authenticated = true;
-                    updateUIOnLogin();
-                } else {
-                    keycloak.authenticated = false;
-                    updateUIOnLogout();
+                // Funktion zum Überprüfen des Tokens im localStorage
+                function checkToken() {
+                    const token = localStorage.getItem('keycloak-token');
+                    if (token) {
+                        keycloak.token = token;
+                        keycloak.authenticated = true;
+                        updateUIOnLogin();
+                    } else {
+                        keycloak.authenticated = false;
+                        updateUIOnLogout();
+                    }
                 }
-            }
-
-            // UI aktualisieren für eingeloggt Zustand
-            function updateUIOnLogin() {
-                registerButton.classList.add('hidden');
-                logoutButton.classList.remove('hidden');
-                statusContainer.classList.remove('alert-info', 'hidden');
-                statusText.textContent = 'Eingeloggt.';
-            }
-
-            // UI aktualisieren für ausgeloggt Zustand
-            function updateUIOnLogout() {
-                registerButton.classList.remove('hidden');
-                logoutButton.classList.add('hidden');
-                statusContainer.classList.remove('alert-success', 'alert-error');
-                statusContainer.classList.add('alert-info', 'hidden');
-                statusText.textContent = 'Nicht eingeloggt.';
-            }
 
-            // Dark Mode Toggle Funktionalität
-            function applyTheme(theme) {
-                document.documentElement.setAttribute('data-theme', theme);
-                if (theme === 'dark') {
-                    darkIcon.classList.remove('hidden');
-                    lightIcon.classList.add('hidden');
-                    themeToggleCheckbox.checked = true;
-                } else {
-                    darkIcon.classList.add('hidden');
-                    lightIcon.classList.remove('hidden');
-                    themeToggleCheckbox.checked = false;
+                // UI aktualisieren für eingeloggt Zustand
+                function updateUIOnLogin() {
+                    registerButton.classList.add('hidden');
+                    loginButton.classList.add('hidden');
+                    logoutButton.classList.remove('hidden');
+                    statusContainer.classList.remove('alert-info', 'hidden');
+                    statusText.textContent = 'Eingeloggt.';
                 }
-            }
 
-            // Überprüfen und Anwenden des Themes basierend auf localStorage oder Systempräferenz
-            function initializeTheme() {
-                const storedTheme = localStorage.getItem('theme');
-                if (storedTheme) {
-                    applyTheme(storedTheme);
-                } else {
-                    // Falls kein gespeichertes Theme vorhanden ist, das System-Theme verwenden
-                    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-                    applyTheme(prefersDark ? 'dark' : 'cupcake');
+                // UI aktualisieren für ausgeloggt Zustand
+                function updateUIOnLogout() {
+                    registerButton.classList.remove('hidden');
+                    loginButton.classList.remove('hidden');
+                    logoutButton.classList.add('hidden');
+                    statusContainer.classList.remove('alert-success', 'alert-error');
+                    statusContainer.classList.add('alert-info', 'hidden');
+                    statusText.textContent = 'Nicht eingeloggt.';
                 }
-            }
 
-            // Event Listener für den Dark Mode Toggle Button
-            themeToggleCheckbox.addEventListener('change', function () {
-                if (this.checked) {
-                    applyTheme('dark');
-                    localStorage.setItem('theme', 'dark');
-                } else {
-                    applyTheme('cupcake');
-                    localStorage.setItem('theme', 'cupcake');
+                // Dark Mode Toggle Funktionalität
+                function applyTheme(theme) {
+                    document.documentElement.setAttribute('data-theme', theme);
+                    if (theme === 'dark') {
+                        darkIcon.classList.remove('hidden');
+                        lightIcon.classList.add('hidden');
+                        themeToggleCheckbox.checked = true;
+                    } else {
+                        darkIcon.classList.add('hidden');
+                        lightIcon.classList.remove('hidden');
+                        themeToggleCheckbox.checked = false;
+                    }
                 }
-            });
 
-            // Initialisieren des Themes beim Laden der Seite
-            initializeTheme();
-
-            // Initialisierung von Keycloak ohne automatische Weiterleitung
-            keycloak.init({
-                checkLoginIframe: false,
-                onLoad: 'check-sso' // Überprüft, ob eine Sitzung besteht, ohne zum Login zu zwingen
-            }).then(function (authenticated) {
-                if (authenticated) {
-                    localStorage.setItem('keycloak-token', keycloak.token);
-                    updateUIOnLogin();
-                } else {
-                    checkToken();
+                // Überprüfen und Anwenden des Themes basierend auf localStorage oder Systempräferenz
+                function initializeTheme() {
+                    const storedTheme = localStorage.getItem('theme');
+                    if (storedTheme) {
+                        applyTheme(storedTheme);
+                    } else {
+                        // Falls kein gespeichertes Theme vorhanden ist, das System-Theme verwenden
+                        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                        applyTheme(prefersDark ? 'dark' : 'cupcake');
+                    }
                 }
 
-                // Event Listener für den Registrieren-Button
-                registerButton.addEventListener('click', function () {
-                    if (!keycloak.authenticated) {
-                        keycloak.register();
+                // Event Listener für den Dark Mode Toggle Button
+                themeToggleCheckbox.addEventListener('change', function () {
+                    if (this.checked) {
+                        applyTheme('dark');
+                        localStorage.setItem('theme', 'dark');
+                    } else {
+                        applyTheme('cupcake');
+                        localStorage.setItem('theme', 'cupcake');
                     }
                 });
 
-                // Event Listener für den Logout-Button
-                logoutButton.addEventListener('click', function () {
-                    if (keycloak.authenticated) {
-                        keycloak.logout().then(() => {
-                            localStorage.removeItem('keycloak-token');
-                            keycloak.authenticated = false;
-                            updateUIOnLogout();
-                        });
+                // Initialisieren des Themes beim Laden der Seite
+                initializeTheme();
+
+                // Initialisierung von Keycloak ohne automatische Weiterleitung
+                keycloak.init({
+                    checkLoginIframe: false,
+                    onLoad: 'check-sso' // Überprüft, ob eine Sitzung besteht, ohne zum Login zu zwingen
+                }).then(function (authenticated) {
+                    if (authenticated) {
+                        localStorage.setItem('keycloak-token', keycloak.token);
+                        updateUIOnLogin();
+                    } else {
+                        checkToken();
                     }
+
+                    // Event Listener für den Registrieren-Button
+                    registerButton.addEventListener('click', function () {
+                        if (!keycloak.authenticated) {
+                            keycloak.register();
+                        }
+                    });
+
+                    // Event Listener für den Login-Button
+                    loginButton.addEventListener('click', function () {
+                        if (!keycloak.authenticated) {
+                            keycloak.login();
+                        }
+                    });
+
+                    // Event Listener für den Logout-Button
+                    logoutButton.addEventListener('click', function () {
+                        if (keycloak.authenticated) {
+                            keycloak.logout().then(() => {
+                                localStorage.removeItem('keycloak-token');
+                                keycloak.authenticated = false;
+                                updateUIOnLogout();
+                            });
+                        }
+                    });
+                }).catch(function (err) {
+                    console.error('Fehler bei der Initialisierung von Keycloak:', err);
                 });
-            }).catch(function (err) {
-                console.error('Fehler bei der Initialisierung von Keycloak:', err);
-            });
 
-            // Überprüfen des Tokens beim Laden der Seite
-            checkToken();
-        });
-    </script>
+                // Überprüfen des Tokens beim Laden der Seite
+                checkToken();
+            });
+        </script>
 
 </body>