diff --git a/webseite/classes/User.php b/webseite/classes/User.php
index 11ca1c7..308375d 100644
--- a/webseite/classes/User.php
+++ b/webseite/classes/User.php
@@ -62,7 +62,7 @@ class User
             return false;
         }
 
-        fputcsv($file, array($username, $passwordHash));
+        fputcsv($file, array($username, $passwordHash),",", '"', "\\");
         fclose($file);
 
         return self::getFromUsername($username);
@@ -84,7 +84,7 @@ class User
             return false;
         }
 
-        while (($data = fgetcsv($file, 300)) !== false) {
+        while (($data = fgetcsv($file, 300, ',', '"', '\\')) !== false) {
             if (count($data) != 2) {
                 continue;
             }
@@ -125,7 +125,7 @@ class User
 
         $newCsv = array();
 
-        while (($data = fgetcsv($file, 300)) !== false) {
+        while (($data = fgetcsv($file, 300, ',', '"', '\\')) !== false) {
             if (count($data) != 2) {
                 continue;
             }
@@ -141,7 +141,7 @@ class User
         }
 
         foreach ($newCsv as $newCsvData) {
-            fputcsv($file, $newCsvData);
+            fputcsv($file, $newCsvData, ',', '"', '\\');
         }
         fclose($file);
 
@@ -175,7 +175,7 @@ class User
         $this->passwordHash = password_hash($newPassword, PASSWORD_ARGON2I);
 
         $lastLine = ftell($file);
-        while (($data = fgetcsv($file, 300)) !== false) {
+        while (($data = fgetcsv($file, 300, ',', '"', '\\')) !== false) {
             if (count($data) != 2) {
 
             } else if ($data[0] !== $this->username) {
@@ -185,7 +185,7 @@ class User
 
                 fseek($file, $lastLine);
 
-                fputcsv($file, $data);
+                fputcsv($file, $data, ',', '"', '\\');
                 break;
             }
 
diff --git a/webseite/index.php b/webseite/index.php
index fa7126a..cfaad80 100644
--- a/webseite/index.php
+++ b/webseite/index.php
@@ -29,30 +29,63 @@
                 <img src="assets/images/hsgg-logo.png" alt="HSGG Logo" class="h-10 mr-3">
                 <span class="text-2xl font-bold text-[var(--primary-color)]">HSGG</span>
             </a>
-            <!-- Login Button -->
-            <button id="loginButton">Login</button>
+
+            <!-- Login/Logout Button -->
+            <div class="flex items-center space-x-4">
+                <?php
+                require_once("classes/User.php");
+                session_start();
+                if (isset($_SESSION['user']) && $_SESSION['user']->isLoggedIn()) {
+                    // Logout Button
+                    echo '<form id="logoutForm" action="logout.php" method="POST" style="display:inline;">
+                              <button id="logoutButton" type="submit" class="bg-[var(--primary-color)] text-white px-4 py-2 rounded-lg hover:bg-[var(--accent-color)] transition duration-300">Logout</button>
+                          </form>';
+                    // Username Dropdown - Weitere Funktionen implementierbar
+                    echo '<div class="relative">
+                              <button id="userDropdownButton" class="bg-[var(--primary-color)] text-white px-4 py-2 rounded-lg hover:bg-[var(--accent-color)] transition duration-300">' . htmlspecialchars($_SESSION['user']->getUsername()) . '</button>
+                          </div>';
+                } else {
+                    // Login Button
+                    echo '<button id="loginButton" class="bg-[var(--primary-color)] text-white px-4 py-2 rounded-lg hover:bg-[var(--accent-color)] transition duration-300">Login</button>';
+                }
+                ?>
+            </div>
         </div>
     </div>
 </nav>
 
-<!-- Login Popup -->
-<div id="loginPopup" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-    <div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-sm relative">
-        <button id="closePopupButton" class="absolute top-2 right-2 text-gray-500 text-xl">&times;</button>
-        <h2 class="text-2xl font-bold mb-6 text-center">Login</h2>
-        <form id="loginForm" action="login.php" method="POST">
-            <div class="mb-4">
-                <label for="username" class="block text-gray-700 mb-2">Benutzername:</label>
-                <input type="text" id="username" name="username" class="w-full p-2 border rounded-lg" required>
-            </div>
-            <div class="mb-4">
-                <label for="password" class="block text-gray-700 mb-2">Passwort:</label>
-                <input type="password" id="password" name="password" class="w-full p-2 border rounded-lg" required>
-            </div>
-            <button type="submit" class="w-full bg-[var(--primary-color)] text-white px-4 py-2 rounded-lg hover:bg-[var(--accent-color)] transition duration-300">Login</button>
-        </form>
+<!-- Login Popup | erscheint nur, wenn kein Nutzer eingeloggt ist -->
+<?php
+if (!isset($_SESSION['user']) || !$_SESSION['user']->isLoggedIn()) {
+    ?>
+    <div id="loginPopup" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50" role="dialog"
+         aria-labelledby="loginTitle" aria-hidden="true">
+        <div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-sm relative">
+            <button id="closePopupButton" class="absolute top-2 right-2 text-gray-500 text-xl"
+                    aria-label="Close Login Popup">&times;
+            </button>
+            <h2 id="loginTitle" class="text-2xl font-bold mb-6 text-center">Login</h2>
+            <form id="loginForm" action="login.php" method="POST">
+                <div class="mb-4">
+                    <label for="username" class="block text-gray-700 mb-2">Benutzername:</label>
+                    <input type="text" id="username" name="username" class="w-full p-2 border rounded-lg" required
+                           autofocus>
+                </div>
+                <div class="mb-4">
+                    <label for="password" class="block text-gray-700 mb-2">Passwort:</label>
+                    <input type="password" id="password" name="password" class="w-full p-2 border rounded-lg" required>
+                </div>
+                <button type="submit"
+                        class="w-full bg-[var(--primary-color)] text-white px-4 py-2 rounded-lg hover:bg-[var(--accent-color)] transition duration-300">
+                    Login
+                </button>
+            </form>
+            <div id="errorMessage" class="hidden text-red-500 text-center mt-4">Falscher Benutzername oder Passwort</div>
+        </div>
     </div>
-</div>
+    <?php
+}
+?>
 
 <!-- Hero Section -->
 <div class="hidden md:block pt-24 px-4">
@@ -123,19 +156,43 @@
 
 <script>
     // JavaScript to handle opening and closing of the login popup
-    document.getElementById('loginButton').addEventListener('click', function() {
-        document.getElementById('loginPopup').classList.remove('hidden');
+    const loginButton = document.getElementById('loginButton');
+    const loginPopup = document.getElementById('loginPopup');
+    const closePopupButton = document.getElementById('closePopupButton');
+    const usernameInput = document.getElementById('username');
+    const errorMessage = document.getElementById('errorMessage');
+
+    loginButton.addEventListener('click', function () {
+        loginPopup.classList.remove('hidden');
+        usernameInput.focus(); // Set focus to username field
     });
 
-    document.getElementById('closePopupButton').addEventListener('click', function() {
-        document.getElementById('loginPopup').classList.add('hidden');
+    closePopupButton.addEventListener('click', function () {
+        loginPopup.classList.add('hidden');
     });
 
-    window.addEventListener('click', function(event) {
-        if (event.target === document.getElementById('loginPopup')) {
-            document.getElementById('loginPopup').classList.add('hidden');
+    window.addEventListener('click', function (event) {
+        if (event.target === loginPopup) {
+            loginPopup.classList.add('hidden');
         }
     });
+
+    // Schließe Popup mit ESC
+    document.addEventListener('keydown', function (event) {
+        if (event.key === "Escape" && !loginPopup.classList.contains('hidden')) {
+            loginPopup.classList.add('hidden');
+        }
+    });
+
+    // Zeige Fehlermeldung beim Login an
+    window.addEventListener('DOMContentLoaded', (event) => {
+        const urlParams = new URLSearchParams(window.location.search);
+        if (urlParams.has('error') && urlParams.get('error') === '1') {
+            loginPopup.classList.remove('hidden');
+            errorMessage.classList.remove('hidden');
+        }
+    });
+
 </script>
 
 </body>
diff --git a/webseite/login.php b/webseite/login.php
index 5308f58..b1f8cf2 100644
--- a/webseite/login.php
+++ b/webseite/login.php
@@ -1,30 +1,24 @@
 <?php
+require_once("classes/User.php");
 
-// Mock credentials for the login
-$validUsername = 'admin';
-$validPassword = 'password';
+session_start();
 
-// Check if the form was submitted
-if ($_SERVER['REQUEST_METHOD'] === 'POST') {
-    // Get the submitted username and password
-    $username = isset($_POST['username']) ? $_POST['username'] : '';
-    $password = isset($_POST['password']) ? $_POST['password'] : '';
+if ($_SERVER['REQUEST_METHOD'] == 'POST') {
+    $username = $_POST['username'];
+    $password = $_POST['password'];
+
+    // $testuser = User::createUser("MAX", "password");
+
+    // Try to retrieve the user from the username
+    $user = User::getFromUsername($username);
+
+    if ($user->login($password)) {
+        // Redirect to a protected page if login is successful
+        header("Location: index.php?login=success");
 
-    // Validate credentials
-    if ($username === $validUsername && $password === $validPassword) {
-        echo "Login erfolgreich";
-        // Redirect to dashboard or any other page
-        header("Location: index.php");
-        exit;
     } else {
-        // Set an error message in the session to show on the login page
-        $_SESSION['errorMessage'] = "Login fehlgeschlagen: Falscher Benutzername oder Passwort.";
-        header("Location: index.php");
-        exit;
+        // Redirect back to the login page with an error message
+        header("Location: index.php?error=1");
     }
-} else {
-    echo "Bitte benutzen Sie das Login-Formular.";
 }
-
-
-?>
+?>
\ No newline at end of file
diff --git a/webseite/logout.php b/webseite/logout.php
new file mode 100644
index 0000000..b588fae
--- /dev/null
+++ b/webseite/logout.php
@@ -0,0 +1,22 @@
+<?php
+
+require_once("classes/User.php");
+session_start();
+
+if (isset($_SESSION['user']) && $_SESSION['user'] instanceof User) {
+    $user = $_SESSION['user'];
+    if ($user->logout()) {
+        // Logout successful, redirect to homepage
+        header("Location: index.php");
+        exit();
+    } else {
+        // Logout failed, handle error
+        echo "<script>alert('Logout failed. Please try again.'); window.location.href='index.php';</script>";
+    }
+} else {
+    // No user is logged in, redirect to homepage
+    header("Location: index.php");
+    exit();
+}
+
+?>
diff --git a/webseite/users/users.csv b/webseite/users/users.csv
index 761cc89..6c80327 100644
--- a/webseite/users/users.csv
+++ b/webseite/users/users.csv
@@ -1 +1,2 @@
-admin,"$argon2i$v=19$m=65536,t=4,p=1$Wi9oVlZ2UjFFVUFTVDBYbg$fgYAK05urgS2+38wFPa9k1oO27O5B/J0CSWB7mUCYGU"
+admin,"$argon2i$v=19$m=65536,t=4,p=1$UVN1S1loTmxVSEdqTjVFcQ$J2sL51VLx7Deg7xJRnbrKfIVqGduh+nrGOFGFGSZ4vw"
+MAX,"$argon2i$v=19$m=65536,t=4,p=1$UVN1S1loTmxVSEdqTjVFcQ$J2sL51VLx7Deg7xJRnbrKfIVqGduh+nrGOFGFGSZ4vw"