diff --git a/webseite/index.php b/webseite/index.php
index 75facc9..fa7126a 100644
--- a/webseite/index.php
+++ b/webseite/index.php
@@ -29,10 +29,31 @@
                 <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>
         </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>
+    </div>
+</div>
+
 <!-- Hero Section -->
 <div class="hidden md:block pt-24 px-4">
     <div class="max-w-7xl mx-auto">
@@ -100,5 +121,22 @@
     </div>
 </footer>
 
+<script>
+    // JavaScript to handle opening and closing of the login popup
+    document.getElementById('loginButton').addEventListener('click', function() {
+        document.getElementById('loginPopup').classList.remove('hidden');
+    });
+
+    document.getElementById('closePopupButton').addEventListener('click', function() {
+        document.getElementById('loginPopup').classList.add('hidden');
+    });
+
+    window.addEventListener('click', function(event) {
+        if (event.target === document.getElementById('loginPopup')) {
+            document.getElementById('loginPopup').classList.add('hidden');
+        }
+    });
+</script>
+
 </body>
 </html>
diff --git a/webseite/login.php b/webseite/login.php
new file mode 100644
index 0000000..5308f58
--- /dev/null
+++ b/webseite/login.php
@@ -0,0 +1,30 @@
+<?php
+
+// Mock credentials for the login
+$validUsername = 'admin';
+$validPassword = 'password';
+
+// 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'] : '';
+
+    // 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;
+    }
+} else {
+    echo "Bitte benutzen Sie das Login-Formular.";
+}
+
+
+?>