diff --git a/database/db_scripts/webshop_test-data.sql b/database/db_scripts/webshop_test-data.sql
index 2e4bd83..d94c6b2 100644
--- a/database/db_scripts/webshop_test-data.sql
+++ b/database/db_scripts/webshop_test-data.sql
@@ -2,15 +2,15 @@ USE webshop;
 
 -- Product Categories
 INSERT INTO product_category (id, name)
-VALUES (1, 'Electronics');
+VALUES (1, 'Motorräder');
 INSERT INTO product_category (id, name)
-VALUES (2, 'Home Appliances');
+VALUES (2, 'Oldtimer');
 INSERT INTO product_category (id, name)
-VALUES (3, 'Clothing');
+VALUES (3, 'Sportwägen');
 INSERT INTO product_category (id, name)
-VALUES (4, 'Sports');
+VALUES (4, 'LKWs');
 INSERT INTO product_category (id, name)
-VALUES (5, 'Books');
+VALUES (5, 'Kleinwägen');
 
 -- Discounts
 INSERT INTO discount (id, name, description, discount_percent, active)
diff --git a/public/404.html b/public/404.html
index 0d4597b..69a558c 100644
--- a/public/404.html
+++ b/public/404.html
@@ -1,21 +1,32 @@
+<!--
+  Eine Seite für die Seiten die nicht vorhanden sind.
+  Fehler 404 - Seite nicht gefunden
+  Zeigt eine Meldung und hat einen Link der zurück zur Startseite führt
+-->
+
 <!DOCTYPE html>
 <html lang="de">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Seite nicht gefunden</title>
+    <!-- Haupt-CSS-Datei -->
     <link rel="stylesheet" href="/Styles/styles-main.css">
+    <!-- Icons -->
     <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
+    <!-- Script zum Laden von Header/Footer -->
     <script src="/header_footer"></script>
 </head>
 <body>
 <div class="wrapper">
     <!-- Header -->
-    <div id="header-placeholder"></div>
+    <div id="header"></div>
 
+    <!-- Hauptinhalt: Fehlermeldung -->
     <main class="content" style="text-align: center; padding: 80px;">
         <h1>🚧 Seite nicht gefunden 🚧</h1>
         <p>Diese Seite existiert nicht oder befindet sich noch in Arbeit.</p>
+        <!-- Button zurück zur Startseite -->
         <a href="/" class="btn" style="width: auto; display: inline-block; margin-top: 20px;">Zur Startseite</a>
     </main>
 
diff --git a/public/Warenkorb/warenkorb.html b/public/Warenkorb/warenkorb.html
index 762972d..011faa7 100644
--- a/public/Warenkorb/warenkorb.html
+++ b/public/Warenkorb/warenkorb.html
@@ -11,28 +11,144 @@
 <!-- Header wird hier dynamisch geladen -->
 <div id="header-placeholder"></div>
 <div class="warenkorb">
-  <h2>🛒 Dein Warenkorb</h2>
-
-  <div class="item">
-    <div class="info">
-      <span class="name">Produkt 1</span>
-
-    </div>
-    <button class="remove">Entfernen</button>
-  </div>
-
-  <div class="item">
-    <div class="info">
-      <span class="name">Produkt 2</span>
-    </div>
-    <button class="remove">Entfernen</button>
-  </div>
-
-  <div class="summary">
-  </div>
-  <button class="zurKasse">Zur Kasse gehen</button>
+  <main>
+      <h2>Dein Warenkorb</h2>
+      <div id="warenkorb"></div>
+      <div id="gesamtpreis-container"></div>
+      <button id="zurKasseGehen">Zur Kasse gehen</button>
+  </main>
 </div>
+<style>
+  .warenkorb-tabelle {
+      width: 100%;
+      border-collapse: collapse;
+      margin-top: 20px;
+  }
+  
+  .warenkorb-tabelle th, .warenkorb-tabelle td {
+      padding: 10px;
+      text-align: center;
+      border-bottom: 1px solid #ccc;
+  }
+  
+  .warenkorb-tabelle th {
+      background-color: #f8f8f8;
+  }
+  
+  .loeschen-button, .menge-button {
+      background-color: #ff4d4d;
+      border: none;
+      color: white;
+      padding: 5px 8px;
+      margin: 0 2px;
+      cursor: pointer;
+      border-radius: 5px;
+      font-size: 16px;
+  }
+  
+  .loeschen-button:hover, .menge-button:hover {
+      background-color: #e60000;
+  }
+  
+  .produkt-anzahl {
+      display: inline-block;
+      width: 30px;
+      text-align: center;
+  }
+  </style>  
 <!-- Footer wird dynamisch geladen -->
 <div id="footer"></div>
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+      ladeWarenkorb();
+  
+      document.getElementById('zurKasseGehen').addEventListener('click', function() {
+          window.location.href = '/bestellformular'; // Deine Bestellformular-Seite
+      });
+  });
+  
+  function ladeWarenkorb() {
+      const warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
+      const container = document.getElementById('warenkorb');
+      const gesamtContainer = document.getElementById('gesamtpreis-container');
+  
+      container.innerHTML = '';
+      gesamtContainer.innerHTML = '';
+  
+      if (warenkorb.length === 0) {
+          container.innerHTML = '<p>Dein Warenkorb ist leer.</p>';
+          document.getElementById('zurKasseGehen').style.display = 'none';
+          return;
+      }
+  
+      let gesamtpreis = 0;
+  
+      const table = document.createElement('table');
+      table.className = 'warenkorb-tabelle';
+      table.innerHTML = `
+          <thead>
+              <tr>
+                  <th>Produkt</th>
+                  <th>Preis (Stück)</th>
+                  <th>Anzahl</th>
+                  <th>Zwischensumme</th>
+                  <th>Aktion</th>
+              </tr>
+          </thead>
+          <tbody></tbody>
+      `;
+  
+      const tbody = table.querySelector('tbody');
+  
+      warenkorb.forEach((produkt, index) => {
+          const zwischensumme = produkt.price * produkt.quantity;
+          gesamtpreis += zwischensumme;
+  
+          const row = document.createElement('tr');
+          row.innerHTML = `
+              <td>${produkt.product_name}</td>
+              <td>${produkt.price.toFixed(2)} €</td>
+              <td>
+                  <button class="menge-button" onclick="aendereMenge(${index}, -1)">-</button>
+                  <span class="produkt-anzahl">${produkt.quantity}</span>
+                  <button class="menge-button" onclick="aendereMenge(${index}, 1)">+</button>
+              </td>
+              <td>${zwischensumme.toFixed(2)} €</td>
+              <td><button onclick="entferneAusWarenkorb(${index})" class="loeschen-button">Entfernen</button></td>
+          `;
+          tbody.appendChild(row);
+      });
+  
+      container.appendChild(table);
+  
+      gesamtContainer.innerHTML = `<h3>Gesamtsumme: ${gesamtpreis.toFixed(2)} €</h3>`;
+  
+      if (window.zeigeWarenkorbAnzahl) {
+          window.zeigeWarenkorbAnzahl();
+      }
+  }
+  
+  function entferneAusWarenkorb(index) {
+      let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
+  
+      warenkorb.splice(index, 1);
+      localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
+  
+      ladeWarenkorb();
+  }
+  
+  function aendereMenge(index, aenderung) {
+      let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
+  
+      warenkorb[index].quantity += aenderung;
+  
+      if (warenkorb[index].quantity <= 0) {
+          warenkorb.splice(index, 1); // Produkt löschen, wenn Menge 0 oder kleiner
+      }
+  
+      localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
+      ladeWarenkorb();
+  }
+  </script>  
 </body>
 </html>
diff --git a/public/bestellformular/bestellformular.html b/public/bestellformular/bestellformular.html
index 793c685..9b8ae8b 100644
--- a/public/bestellformular/bestellformular.html
+++ b/public/bestellformular/bestellformular.html
@@ -6,12 +6,13 @@
     <title>Bestellformular</title>
     <link rel="stylesheet" href="/Styles/bestellformular/bestellformular.css">
     <link rel="stylesheet" href="./Styles/styles-main.css">
+    <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
     <script src="/header_footer"></script>
 </head>
 <body>
 <div class="wrapper">
     <!-- Header wird hier dynamisch geladen -->
-    <div id="header-placeholder"></div>
+    <div id="header"></div>
 
     <main>
         <div class="form-container">
@@ -19,13 +20,13 @@
                 <h2>Bestellformular</h2>
 
                 <label for="vorname">Vorname:</label>
-                <input type="text" id="Vorname" name="Vorname" required placeholder="Vorname">
+                <input type="text" id="Vorname" name="Vorname" required placeholder=" - Vorname -" readonly>
 
                 <label for="nachname">Nachname:</label>
-                <input type="text" id="Nachname" name="Nachname" required placeholder="Nachname">
+                <input type="text" id="Nachname" name="Nachname" required placeholder="- Nachname -" readonly>
 
                 <label for="kundenNr">Kunden Nr.:</label>
-                <input type="text" id="KundenNr" name="KundenNr" required placeholder="Kunden Nr.">
+                <input type="text" id="KundenNr" name="KundenNr" required placeholder="- Kunden Nr. -" readonly>
 
                 <label for="strasse">Straße:</label>
                 <input type="text" id="strasse" name="strasse" required placeholder="Strasse">
@@ -45,21 +46,21 @@
                 </div>
 
                 <style>
-                    .Artikel{
+                    .Artikel {
                         display: flex;
                         align-content: center;
                     }
 
-                    .ArtikelNrText{
+                    .ArtikelNrText {
                         max-width: 50%;
                     }
 
-                    .StueckzahlText{
+                    .StueckzahlText {
                         max-width: 15%;
                         margin-left: 2.5%;
                     }
 
-                    .loeschen-button{
+                    .loeschen-button {
                         background-color: #ff6600;
                         color: white;
                         border: none;
@@ -70,12 +71,17 @@
                         margin-right: 5px;
                     }
 
-                    .verfuegbarkeit{
+                    .verfuegbarkeit {
                         display: flex;
                         align-content: center;
                         max-width: 20%;
                         padding-left: 2.5%;
                     }
+
+                    #KundenNr, #Vorname, #Nachname{
+                        background-color: #F5F5F5;
+                        border: none;
+                    }
                 </style>
                 <a class="button-submit" id="sendOrder">Bestellung absenden</a>
             </form>
@@ -83,10 +89,31 @@
     </main>
 
     <script>
+        const user_id = sessionStorage.getItem('user_id');
+        const email = sessionStorage.getItem('email');
+        const vorname = sessionStorage.getItem('vorname');
+        const nachname = sessionStorage.getItem('nachname');
+
+
         document.addEventListener('DOMContentLoaded', function () {
             const formular = document.getElementById('bestellform');
+            const kundenNrInput = document.getElementById('KundenNr');
+            const VornameInput = document.getElementById('Vorname');
+            const NachnameInput = document.getElementById('Nachname');
+            if (kundenNrInput, VornameInput, NachnameInput) {
+                kundenNrInput.value = user_id;
+                VornameInput.value = vorname;
+                NachnameInput.value = nachname;
+            }
+
+            console.log("User ID from sessionStorage:", user_id);
+            console.log("E-Mail from sessionStorage:", email);
+            console.log("Vorname from sessionStorage:", vorname);
+            console.log("Nachname from sessionStorage:", nachname);
+
+
             const sendButton = document.getElementById('sendOrder');
-            let artikelVerfuegbarkeiten = [];
+            ladeWarenkorb();
 
             // Bestellung absenden
             sendButton.addEventListener('click', async function (event) {
@@ -181,7 +208,7 @@
                 const data = await response.json();
 
                 const artikelDivs = document.querySelectorAll('.Artikel');
-                artikelVerfuegbarkeiten = [];
+                let artikelVerfuegbarkeiten = [];
 
                 artikelDivs.forEach(div => {
                     const artikelNrInput = div.querySelector('.ArtikelNrText');
@@ -251,6 +278,31 @@
             artikelDiv.remove();
         }
 
+        function ladeWarenkorb() {
+            // RICHTIG lesen: aus localStorage (nicht sessionStorage!)
+            const warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
+
+            const formular = document.getElementById('bestellform');
+            const sendButton = document.getElementById('sendOrder');
+
+            if (warenkorb.length === 0) {
+                console.log('Kein Warenkorb gefunden oder Warenkorb ist leer.');
+                return;
+            }
+
+            warenkorb.forEach(produkt => {
+                const artikelDiv = document.createElement('div');
+                artikelDiv.className = 'Artikel';
+                artikelDiv.innerHTML = `
+                    <button type="button" class="loeschen-button" onclick="loescheArtikel(this)">x</button>
+                    <input type="text" class="ArtikelNrText" name="ArtikelNr" value="${produkt.product_id}" required placeholder="Artikel Nr.">
+                    <input type="text" class="StueckzahlText" name="Stueckzahl" value="${produkt.quantity}" required placeholder="Anzahl">
+                    <div class="verfuegbarkeit"></div>
+                `;
+                formular.insertBefore(artikelDiv, sendButton);
+            });
+        }
+
     </script>
     <!-- Footer wird dynamisch geladen -->
     <div id="footer"></div>
diff --git a/public/header_footer/footer.html b/public/header_footer/footer.html
index 4ab756a..521d90b 100644
--- a/public/header_footer/footer.html
+++ b/public/header_footer/footer.html
@@ -1,6 +1,12 @@
-<!-- Fußzeiele -->
+<!--
+  Fußzeile des Webshops
+  Zeigt einen Copyright-Hinweis, die Links zum Impressum und Datenschutz sind verlinkt (keine Funktion)
+-->
+
 <footer class="footer">
+    <!-- Copyright-Hinweis -->
     <p>&copy; 2025 Autohändler Webshop – Alle Rechte vorbehalten</p>
+    <!-- Links zu Impressum und Datenschutz (keine Funktion) -->
     <p>
         <a href="/impressum">Impressum</a> |
         <a href="/datenschutz">Datenschutz</a>
diff --git a/public/header_footer/header.html b/public/header_footer/header.html
index 20ec0f6..dd4c9c6 100644
--- a/public/header_footer/header.html
+++ b/public/header_footer/header.html
@@ -1,34 +1,60 @@
-<!-- header.html -->
+<!--
+  Header-Bereich Einbindung
+  Zeigt Logo, Link zur Startseite, Warenkorb (beispielhaft, keine Funktion) und Menüleiste an
+-->
 <header>
-  <div class="logo-container">
-    <img src="/images/Logo.png" alt="Modellauto-Shop Logo" class="logo-img">
-    <h1>Modellauto - Shop</h1>
-  </div>
-  <div class="header-right">
-    <a href="/login" class="login-btn">Login</a>
-    <div class="header-right">
+    <!-- Logo und Shop-Titel -->
+    <a href="/" class="logo-link">
+        <div class="logo-container">
+            <img src="/images/Logo.png" alt="Modellauto-Shop Logo" class="logo-img">
+            <h1>Modellauto - Shop</h1>
+        </div>
+    </a>
 
-      <a href="/warenkorb" class="cart">
-        <i class='bx bx-cart'></i>
-        <span class="cart-count">0</span>
-      </a>
+    <!-- Auf der rechten Seite des Headers befindet sich der Login-Button und der Warenkorb -->
+    <div class="header-right">
+        <!-- Login-Button -->
+        <a href="/login" class="login-btn">
+            <i class='bx bx-user'></i> Login
+        </a>
+
+        <!-- Warenkorb-Button mit Icon und Anzeige der Artikelanzahl (keine Funktion) -->
+        <a href="/warenkorb" class="cart">
+            <i class='bx bx-cart'></i>
+            <span class="cart-count" id="cart-count">0</span>
+        </a>
     </div>
   </div>
 </header>
 
+<!-- Navigationsmenü -->
 <nav class="menu">
-  <ul class="menu-list">
-    <li class="menu-item"><a href="/">Startseite</a></li>
-    <li class="menu-item">
-      <a href="/shop">Shop</a>
-      <ul class="submenu">
-        <li><a href="/shop/motorrad">Motorräder</a></li>
-        <li><a href="/shop/oldtimer">Oldtimer</a></li>
-        <li><a href="/shop/sportwagen">Sportwagen</a></li>
-        <li><a href="/shop/lkw">LKWs</a></li>
-      </ul>
-    </li>
-    <li class="menu-item"><a href="/ueberuns">Über uns</a></li>
-    <li class="menu-item"><a href="/kontakt">Kontakt</a></li>
-  </ul>
+    <ul class="menu-list">
+        <!-- Startseite Link -->
+        <li class="menu-item">
+            <a href="/"><i class='bx bx-home'></i> Startseite</a>
+        </li>
+        <!-- Shop Link mit Dropdown-Menü für die verschiedene Unterkategorien -->
+        <li class="menu-item">
+            <a href="/shop"><i class='bx bx-store'></i> Shop</a>
+            <ul class="submenu">
+                <li><a href="/shop/motorrad"></i> Motorräder</a></li>
+                <li><a href="/shop/oldtimer"></i> Oldtimer</a></li>
+                <li><a href="/shop/sportwagen"></i> Sportwagen</a></li>
+                <li><a href="/shop/lkw"></i> LKWs</a></li>
+            </ul>
+        </li>
+        <!-- Link zu Über uns-->
+        <li class="menu-item">
+            <a href="/ueberuns"><i class='bx bx-group'></i> Über uns</a>
+        </li>
+        <!-- Link zur Kontakt Seite-->
+        <li class="menu-item">
+            <a href="/kontaktformular"><i class='bx bx-envelope'></i> Kontakt</a>
+        </li>
+        <!-- Link zum Bestellformular-->
+        <li class="menu-item">
+            <a href="/bestellformular"><i class='bx bx-notepad'></i> Bestellformular</a>
+        </li>
+    </ul>
 </nav>
diff --git a/public/inputHandler/verifyPassword.js b/public/inputHandler/verifyPassword.js
new file mode 100644
index 0000000..e69de29
diff --git a/public/kontaktformular/kontaktformular.html b/public/kontaktformular/kontaktformular.html
new file mode 100644
index 0000000..c6481ff
--- /dev/null
+++ b/public/kontaktformular/kontaktformular.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Kontaktformular</title>
+  <link rel="stylesheet" href="./Styles/styles-main.css">
+  <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
+  <script src="/header_footer"></script>
+</head>
+<body>
+<div class="wrapper">
+
+  <!-- Header -->
+  <div id="header"></div>
+
+  <main>
+    <section style="padding: 40px 20px; max-width: 700px; margin: 0 auto;">
+      <h1>Kontaktieren Sie uns</h1>
+      <p style="margin-bottom: 30px;">Sie haben Fragen oder Anregungen? Schreiben Sie uns – wir melden uns schnellstmöglich!</p>
+
+      <form id="contact-form">
+        <div class="input-box">
+          <input type="text" name="name" placeholder="Ihr Name" required>
+          <i class='bx bx-user'></i>
+        </div>
+        <div class="input-box">
+          <input type="email" name="email" placeholder="Ihre E-Mail-Adresse" required>
+          <i class='bx bx-envelope'></i>
+        </div>
+        <div class="input-box">
+          <input type="text" name="betreff" placeholder="Betreff" required>
+          <i class='bx bx-edit-alt'></i>
+        </div>
+        <div class="input-box">
+          <textarea name="nachricht" placeholder="Ihre Nachricht" rows="6" style="width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;" required></textarea>
+        </div>
+        <button type="submit" class="btn">Nachricht senden</button>
+      </form>
+    </section>
+  </main>
+
+  <!-- Footer -->
+  <div id="footer"></div>
+</div>
+
+<script>
+  document.getElementById('contact-form').addEventListener('submit', function(e) {
+    e.preventDefault();
+    alert('Vielen Dank für Ihre Nachricht! Wir melden uns bald bei Ihnen.');
+    this.reset(); // Formular leeren
+  });
+</script>
+</body>
+</html>
diff --git a/public/login/login.html b/public/login/login.html
index 52d9e7a..05f2f2c 100644
--- a/public/login/login.html
+++ b/public/login/login.html
@@ -1,31 +1,51 @@
+<!--
+  Login-Seite für den Webshop.
+  Die Benutzer können sich mit ihrem Benutzernamen und Passwort anmelden oder sich registreren.
+-->
+
 <!DOCTYPE html>
 <html lang="de">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login</title>
+    <!-- Login-CSS-Datei -->
     <link rel="stylesheet" href="./Styles/login/login.css">
+    <!-- Haupt-CSS-Datei -->
     <link rel="stylesheet" href="./Styles/styles-main.css">
+    <!-- Icons -->
     <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
+    <!-- Script zum Laden von Header/Footer -->
     <script src="/header_footer"></script>
     <title>Login</title>
 </head>
 <body>
 <!-- Header -->
-<div id="header-placeholder"></div>
+<div id="header"></div>
 
 <main class="main-content">
     <div class="login-container">
-        <h2 class="login-title">Login</h2>
+        <h2 class="title">Login</h2>
+
+        <!-- Login-Formular -->
         <form class="login-form">
+
+            <!-- Eingabefeld für Benutzername -->
             <div class="input-group">
-                <input id="email" type="text" placeholder="E-Mail" required/>
+                <input id="email" type="email" placeholder="E-Mail" required/>
                 <i class="icon fas fa-user"></i>
             </div>
+
+            <!-- Eingabefeld für Passwort -->
             <div class="input-group">
                 <input id="password" type="password" placeholder="Passwort" required/>
                 <i class="icon fas fa-lock"></i>
             </div>
-            <button id="submit" type="submit" class="login-btn">Login</button>
+
+            <!-- Login-Button -->
+            <button type="submit" class="login-btn" id="submit">Login</button>
+
+            <!-- Link zur Registrierungsseite -->
             <p class="register-text">
                 Noch keinen Account? <a href="/registrieren">Registrieren</a>
             </p>
@@ -34,7 +54,7 @@
 </main>
 
 <script>
-    document.getElementById('submit').addEventListener('click', async (event) => {
+    document.querySelector('form').addEventListener('submit', async (event) => {
         event.preventDefault()
 
         const email = document.getElementById('email').value
@@ -51,6 +71,8 @@
             if (response.ok) {
                 const data = await response.json();
                 sessionStorage.setItem("user_id", data.id)
+                sessionStorage.setItem("vorname", data.name)
+                sessionStorage.setItem("nachname", data.lower_name)
                 alert('Login erfolgreich!');
                 window.location.href = '/';  // Redirect to home page after login
             } else {
@@ -63,6 +85,7 @@
         }
     })
 </script>
+
 <!-- Fußzeile -->
 <div id="footer"></div>
 
diff --git a/public/registrieren/registrieren.html b/public/registrieren/registrieren.html
index e2a34b5..a7a9836 100644
--- a/public/registrieren/registrieren.html
+++ b/public/registrieren/registrieren.html
@@ -1,22 +1,33 @@
+<!--
+  Diese Seite beinhaltet ein Registrierungsformular für neue Benutzer.
+  Der Benutzer kann Vorname, Nachname, E-Mail-Adresse und ein Passwort eingeben.
+  Header und Footer werden dynamisch geladen.
+-->
+
 <!DOCTYPE html>
 <html lang="de">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="./Styles/registrieren/registrieren.css">
-  <link rel="stylesheet" href="./Styles/styles-main.css">
-  <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
-  <script src="/header_footer"></script>
-  <title>Registrieren</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- Registrieren-CSS-Datei -->
+    <link rel="stylesheet" href="./Styles/registrieren/registrieren.css">
+    <!-- Haupt-CSS-Datei -->
+    <link rel="stylesheet" href="./Styles/styles-main.css">
+    <!-- Icons -->
+    <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
+    <!-- Script zum Laden von Header/Footer -->
+    <script src="/header_footer"></script>
+    <title>Registrieren</title>
 </head>
 <body>
-  <div class="page-container">
+<div class="page-container">
 
     <!-- Header -->
-    <div id="header-placeholder"></div>
+    <div id="header"></div>
 
     <!-- Registrierungsformular -->
     <main class="content-wrapper">
+        <!-- Formular für Registrierung -->
         <div class="register-wrapper">
             <form action="register.php" method="POST">
                 <h2 class="title">Registrieren</h2>
@@ -38,6 +49,7 @@
                     <i class='bx bxs-lock-alt'></i>
                 </div>
 
+                <!-- Eingabe: Passwort bestätigen -->
                 <div class="input-box">
                     <input type="password" id="confirmPassword" name="confirmPassword" placeholder="Passwort bestätigen"
                            required>
@@ -46,6 +58,7 @@
 
                 <button type="submit" class="btn" id="register">Registrieren</button>
 
+                <!-- Link zum Login für bestehende Nutzer -->
                 <div class="register-link">
                     <br>
                     <p>Bereits ein Konto? <a href="/login">Login</a></p>
@@ -55,9 +68,21 @@
     </main>
 
     <script>
-        document.getElementById('register').addEventListener('click', async (event) => {
+        document.querySelector('form').addEventListener('submit', async (event) => {
             event.preventDefault();
 
+            const passwordEl = document.getElementById('regPassword')
+            const password = passwordEl.value
+            const confirmPasswordEl = document.getElementById('confirmPassword')
+            const confirmPassword = confirmPasswordEl.value
+
+            if (password !== confirmPassword) {
+                passwordEl.value = ''
+                confirmPasswordEl.value = ''
+                alert('Die Passwörter stimmen nicht überein.')
+                return
+            }
+
             const formData = {
                 name: document.getElementById('vorname').value,
                 lower_name: document.getElementById('nachname').value,
@@ -76,8 +101,10 @@
                 if (response.ok) {
                     const data = await response.json();
                     sessionStorage.setItem("user_id", data.id)
+                    sessionStorage.setItem("vorname", data.name)
+                    sessionStorage.setItem("nachname", data.lower_name)
                     alert('Nutzer erfolgreich hinzugefügt! Ihre Kundennummer: ' + data.id)
-                    window.location.href= '/'
+                    window.location.href = '/'
                 } else {
                     alert('Fehler bei der Registrierung.')
                 }
diff --git a/public/session_storage/login-toggle.js b/public/session_storage/login-toggle.js
new file mode 100644
index 0000000..e69de29
diff --git a/public/shop/shop.html b/public/shop/shop.html
index 37ae415..2d81b71 100644
--- a/public/shop/shop.html
+++ b/public/shop/shop.html
@@ -1,16 +1,25 @@
+<!--
+  Diese Seite zeigt alle Produkte des Webshops an.
+  Produkte werden dynamisch von der API geladen.
+  Bei einem Fehler wird eine passende Fehlermeldung angezeigt.
+-->
+
 <!DOCTYPE html>
 <html lang="de">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Shop</title>
+    <!-- Haupt-CSS-Datei -->
     <link rel="stylesheet" href="/Styles/styles-main.css">
+    <!-- Icons -->
     <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
+    <!-- Script zum Laden von Header/Footer -->
     <script src="/header_footer"></script>
 </head>
 <body>
 <!-- Header -->
-<div id="header-placeholder"></div>
+<div id="header"></div>
 
 <!-- Hauptinhalt -->
 <section style="padding: 0px 30px; text-align: left;">
@@ -18,8 +27,9 @@
 </section>
 
 <main>
+    <!-- "Container" für die dynamisch geladenen Produktkarten -->
     <section class="card-grid" id="products">
-        <!-- Dynamische Produkte -->
+        <!-- Produkte werden hier eingefügt -->
     </section>
 </main>
 
@@ -27,35 +37,73 @@
 <div id="footer"></div>
 
 <script>
+  // Funktion zum Hinzufügen zum Warenkorb
+  function zumWarenkorbHinzufuegen(product) {
+        let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
+
+        const existingProduct = warenkorb.find(p => p.product_id === product.id);
+
+        if (existingProduct) {
+            existingProduct.quantity += 1; // Wenn schon vorhanden, Anzahl erhöhen
+        } else {
+            warenkorb.push({
+                product_id: product.id,
+                product_name: product.name,
+                price: product.price,
+                quantity: 1
+            });
+        }
+
+        localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
+        alert(`${product.name} wurde zum Warenkorb hinzugefügt!`);
+        zeigeWarenkorbAnzahl();
+    }
+
+    // Produkte laden
+    // Daten von der API abrufen
     fetch('/api/products')
         .then(res => res.json())
         .then(products => {
             const container = document.getElementById('products');
-            container.innerHTML = ''; // sicherheitshalber leeren
+            container.innerHTML = '';
 
+            // Für jedes Produkt eine eigene Karte erstellen und einfügen
             products.forEach(product => {
+                // Neues div-Element für die Produktkarte
                 const card = document.createElement('div');
+                // CSS-Styling hinzufügen
                 card.classList.add('card');
+                // HTML-Struktur der Produktkarte
                 card.innerHTML = `
-                      <img src="${product.image_url}" alt="${product.name}">
-                      <h3>${product.name}</h3>
-                      <p>Preis: ${product.price}€</p>
-                      <p>${product.description}</p>
-                      <p>Artikel Nr: ${product.id}</p>
-                      <button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
-                  `;
+                    <img src="${product.image_url}" alt="${product.name}">
+                    <h3>${product.name}</h3>
+                    <p>Preis: ${product.price.toFixed(2)} €</p>
+                    <p>${product.description}</p>
+                    <p>Artikel Nr: ${product.id}</p>
+                    <button class="add-to-cart">Zum Warenkorb hinzufügen</button>
+                `;
+
+                const addToCartButton = card.querySelector('.add-to-cart');
+                addToCartButton.addEventListener('click', () => {
+                    zumWarenkorbHinzufuegen(product);
+                });
+
+                // Karte in den Container einfügen
                 container.appendChild(card);
             });
         })
+        // Fehlermeldung
         .catch(err => {
-            console.error('Fehler beim Laden der Shop_Produkte:', err);
+            console.error('Fehler beim Laden der Produkte:', err);
 
+            // Fehlermeldung auf der Seite anzeigen
             const container = document.getElementById('products');
-            container.innerHTML =
-                `<div class="error-message">
-                            <h3>Fehler beim Laden der Produkte</h3>
-                            <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
-                        </div>`;
+            container.innerHTML = `
+                <div class="error-message">
+                    <h3>Fehler beim Laden der Produkte</h3>
+                    <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
+                        Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
+                </div>`;
         });
 </script>
 </body>
diff --git a/public/shop/shop_lkw.html b/public/shop/shop_lkw.html
index a8b105e..35e0038 100644
--- a/public/shop/shop_lkw.html
+++ b/public/shop/shop_lkw.html
@@ -1,17 +1,26 @@
+<!--
+  Diese Seite zeigt alle LKW-Produkte des Webshops an.
+  Die Produkte werden dynamisch von der API geladen.
+  Bei einem Fehler wird eine passende Fehlermeldung angezeigt.
+-->
+
 <!DOCTYPE html>
 <html lang="de">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Shop - LKW's</title>
+    <!-- Haupt-CSS-Datei -->
     <link rel="stylesheet" href="/Styles/styles-main.css">
+    <!-- Icons -->
     <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
+    <!-- Script zum Laden von Header/Footer -->
     <script src="/header_footer"></script>
 </head>
 <body>
 <div class="wrapper">
     <!-- Header -->
-    <div id="header-placeholder"></div>
+    <div id="header"></div>
 
     <!-- Hauptinhalt -->
     <main>
@@ -29,41 +38,71 @@
 </div>
 
 <script>
+    // API-Abfrage, um Lkw-Produkte zu laden
+  // Funktion zum Hinzufügen zum Warenkorb
+  function zumWarenkorbHinzufuegen(product) {
+        let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
+
+        const existingProduct = warenkorb.find(p => p.product_id === product.id);
+
+        if (existingProduct) {
+            existingProduct.quantity += 1; // Wenn schon vorhanden, Anzahl erhöhen
+        } else {
+            warenkorb.push({
+                product_id: product.id,
+                product_name: product.name,
+                price: product.price,
+                quantity: 1
+            });
+        }
+
+        localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
+        alert(`${product.name} wurde zum Warenkorb hinzugefügt!`);
+        zeigeWarenkorbAnzahl();
+    }
+
+    // Produkte laden
     fetch('/api/products/lkw')
         .then(res => res.json())
         .then(products => {
             const container = document.getElementById('products_lkw');
-            container.innerHTML = ''; // sicherheitshalber leeren
+            container.innerHTML = '';
 
+            // Für jedes Produkt eine Karte erstellen
             products.forEach(product => {
-              const card = document.createElement('div');
-              card.classList.add('card');
-              card.innerHTML = `
+                const card = document.createElement('div');
+                card.classList.add('card');
+                card.innerHTML = `
                     <img src="${product.image_url}" alt="${product.name}">
                     <h3>${product.name}</h3>
-                    <p>Preis: ${product.price}€</p>
+                    <p>Preis: ${product.price.toFixed(2)} €</p>
                     <p>${product.description}</p>
                     <p>Artikel Nr: ${product.id}</p>
-                    <button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
+                    <button class="add-to-cart">Zum Warenkorb hinzufügen</button>
                 `;
-              container.appendChild(card);
+
+                const addToCartButton = card.querySelector('.add-to-cart');
+                addToCartButton.addEventListener('click', () => {
+                    zumWarenkorbHinzufuegen(product);
+                });
+
+                container.appendChild(card);
             });
         })
+        // Fehlerbehandlung
         .catch(err => {
-            console.error('Fehler beim Laden der LKW_Produkte:', err);
+            console.error('Fehler beim Laden der Produkte:', err);
 
+            // Anzeige einer Fehlermeldung auf der Webseite
             const container = document.getElementById('products_lkw');
-            container.innerHTML =
-                `<div class="error-message">
-                <h3>Fehler beim Laden der Produkte</h3>
-                <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
-                   Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
-              </div> `;
+            container.innerHTML = `
+                <div class="error-message">
+                    <h3>Fehler beim Laden der Produkte</h3>
+                    <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
+                        Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
+                </div>`;
         });
 </script>
 
-  <!-- Fußzeiele -->
-  <div id="footer"></div>
-
 </body>
 </html>
\ No newline at end of file
diff --git a/public/shop/shop_motorrad.html b/public/shop/shop_motorrad.html
index 1570ecf..6dec727 100644
--- a/public/shop/shop_motorrad.html
+++ b/public/shop/shop_motorrad.html
@@ -1,17 +1,26 @@
+<!--
+  Diese Seite zeigt alle Motorrad-Produkte des Webshops an.
+  Produkte werden dynamisch von der API geladen.
+  Bei einem Fehler wird eine passende Fehlermeldung angezeigt.
+-->
+
 <!DOCTYPE html>
 <html lang="de">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Shop - Motorräder</title>
-  <link rel="stylesheet" href="/Styles/styles-main.css">
-  <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
-  <script src="/header_footer"></script>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Shop - Motorräder</title>
+    <!-- Haupt-CSS-Datei -->
+    <link rel="stylesheet" href="/Styles/styles-main.css">
+    <!-- Icons -->
+    <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
+    <!-- Script zum Laden von Header/Footer -->
+    <script src="/header_footer"></script>
 </head>
 <body>
 <div class="wrapper">
     <!-- Header -->
-    <div id="header-placeholder"></div>
+    <div id="header"></div>
 
     <!-- Hauptinhalt -->
     <main class="main-content">
@@ -20,45 +29,77 @@
         </section>
 
         <section class="card-grid" id="products_motorrad">
-            <!-- Dynamische Produkte oder Fehlermeldung -->
+            <!-- Produkte -->
         </section>
     </main>
 
+    <!-- Fußzeile -->
+    <div id="footer"></div>
+</div>
 
 <script>
-  fetch('/api/products/motorrad')
-          .then(res => res.json())
-          .then(products => {
-            const container = document.getElementById('products_motorrad');
-            container.innerHTML = ''; // sicherheitshalber leeren
+  // Funktion zum Hinzufügen zum Warenkorb
+  function zumWarenkorbHinzufuegen(product) {
+        let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
 
+        const existingProduct = warenkorb.find(p => p.product_id === product.id);
+
+        if (existingProduct) {
+            existingProduct.quantity += 1; // Wenn schon vorhanden, Anzahl erhöhen
+        } else {
+            warenkorb.push({
+                product_id: product.id,
+                product_name: product.name,
+                price: product.price,
+                quantity: 1
+            });
+        }
+
+        localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
+        alert(`${product.name} wurde zum Warenkorb hinzugefügt!`);
+        zeigeWarenkorbAnzahl();
+    }
+
+    // Produkte laden
+    fetch('/api/products/motorrad')
+        .then(res => res.json())
+        .then(products => {
+            const container = document.getElementById('products_motorrad');
+            container.innerHTML = '';
+
+            // Für jedes Produkt eine Karte erstellen
             products.forEach(product => {
-              const card = document.createElement('div');
-              card.classList.add('card');
-              card.innerHTML = `
+                const card = document.createElement('div');
+                card.classList.add('card');
+                card.innerHTML = `
                     <img src="${product.image_url}" alt="${product.name}">
                     <h3>${product.name}</h3>
-                    <p>Preis: ${product.price}€</p>
+                    <p>Preis: ${product.price.toFixed(2)} €</p>
                     <p>${product.description}</p>
                     <p>Artikel Nr: ${product.id}</p>
-                    <button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
+                    <button class="add-to-cart">Zum Warenkorb hinzufügen</button>
                 `;
-              container.appendChild(card);
+
+                const addToCartButton = card.querySelector('.add-to-cart');
+                addToCartButton.addEventListener('click', () => {
+                    zumWarenkorbHinzufuegen(product);
+                });
+
+                container.appendChild(card);
             });
         })
+        // Fehlermeldung
         .catch(err => {
-            console.error('Fehler beim Laden der Motorrad_Produkte:', err);
+            console.error('Fehler beim Laden der Produkte:', err);
+
             const container = document.getElementById('products_motorrad');
             container.innerHTML = `
-          <div class="error-message">
-            <h3>Fehler beim Laden der Produkte</h3>
-            <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
-          </div>`;
+                <div class="error-message">
+                    <h3>Fehler beim Laden der Produkte</h3>
+                    <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
+                        Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
+                </div>`;
         });
 </script>
-
-  <!-- Fußzeiele -->
-  <div id="footer"></div>
-
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/public/shop/shop_oldtimer.html b/public/shop/shop_oldtimer.html
index 15f6f1f..1fdc1ca 100644
--- a/public/shop/shop_oldtimer.html
+++ b/public/shop/shop_oldtimer.html
@@ -1,17 +1,26 @@
+<!--
+  Diese Seite zeigt alle Oldtimer-Produkte des Webshops an.
+  Produkte werden dynamisch von der API geladen.
+  Bei einem Fehler wird eine passende Fehlermeldung angezeigt.
+-->
+
 <!DOCTYPE html>
 <html lang="de">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Shop - Oldtimer</title>
+    <!-- Haupt-CSS-Datei -->
     <link rel="stylesheet" href="/Styles/styles-main.css">
+    <!-- Icons -->
     <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
+    <!-- Script zum Laden von Header/Footer -->
     <script src="/header_footer"></script>
 </head>
 <body>
 <div class="wrapper">
     <!-- Header -->
-    <div id="header-placeholder"></div>
+    <div id="header"></div>
 
     <!-- Hauptinhalt -->
     <main class="main-content">
@@ -20,7 +29,7 @@
         </section>
 
         <section class="card-grid" id="products_oldtimer">
-            <!-- Dynamische Produkte oder Fehlermeldung -->
+            <!-- Produkte -->
         </section>
     </main>
 
@@ -29,35 +38,73 @@
 </div>
 
   <script>
-    fetch('/api/products/oldtimer')
-            .then(res => res.json())
-            .then(products => {
-              const container = document.getElementById('products_oldtimer');
-              container.innerHTML = ''; // sicherheitshalber leeren
+  // Funktion zum Hinzufügen zum Warenkorb
+  function zumWarenkorbHinzufuegen(product) {
+        let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
 
+        const existingProduct = warenkorb.find(p => p.product_id === product.id);
+
+        if (existingProduct) {
+            existingProduct.quantity += 1; // Wenn schon vorhanden, Anzahl erhöhen
+        } else {
+            warenkorb.push({
+                product_id: product.id,
+                product_name: product.name,
+                price: product.price,
+                quantity: 1
+            });
+        }
+
+        localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
+        alert(`${product.name} wurde zum Warenkorb hinzugefügt!`);
+        zeigeWarenkorbAnzahl();
+    }
+
+    // Produkte laden
+    fetch('/api/products/oldtimer')
+        .then(res => res.json())
+        .then(products => {
+            const container = document.getElementById('products_oldtimer');
+            container.innerHTML = ''; // sicherheitshalber leeren
+
+            // Für jedes Produkt eine Karte erstellen
             products.forEach(product => {
+                // Neues div für eine Produktkarte
                 const card = document.createElement('div');
+                // CSS-Styling hinzufügen
                 card.classList.add('card');
+                // Die Karte mit Produktdaten füllen
                 card.innerHTML = `
-                      <img src="${product.image_url}" alt="${product.name}">
-                      <h3>${product.name}</h3>
-                      <p>Preis: ${product.price}€</p>
-                      <p>${product.description}</p>
-                      <p>Artikel Nr: ${product.id}</p>
-                      <button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
-                  `;
+                    <img src="${product.image_url}" alt="${product.name}">
+                    <h3>${product.name}</h3>
+                    <p>Preis: ${product.price.toFixed(2)} €</p>
+                    <p>${product.description}</p>
+                    <p>Artikel Nr: ${product.id}</p>
+                    <button class="add-to-cart">Zum Warenkorb hinzufügen</button>
+                `;
+
+                const addToCartButton = card.querySelector('.add-to-cart');
+                addToCartButton.addEventListener('click', () => {
+                    zumWarenkorbHinzufuegen(product);
+                });
+
                 container.appendChild(card);
             });
         })
+        // Fehlerbehandlung
         .catch(err => {
-            console.error('Fehler beim Laden der Oldtimer_Produkte:', err);
+            console.error('Fehler beim Laden der Produkte:', err);
+
+            // Anzeige einer Fehlermeldung auf der Webseite
+
             const container = document.getElementById('products_oldtimer');
             container.innerHTML = `
-          <div class="error-message">
-            <h3>Fehler beim Laden der Produkte</h3>
-            <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
-          </div>`;
+                <div class="error-message">
+                    <h3>Fehler beim Laden der Produkte</h3>
+                    <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
+                        Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
+                </div>`;
         });
 </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/public/shop/shop_sportwagen.html b/public/shop/shop_sportwagen.html
index 97d720c..52c44b4 100644
--- a/public/shop/shop_sportwagen.html
+++ b/public/shop/shop_sportwagen.html
@@ -1,17 +1,26 @@
+<!--
+  Diese Seite zeigt alle Sportwagen-Produkte des Webshops an.
+  Die Produkte werden dynamisch von der API geladen.
+  Bei einem Fehler wird eine passende Fehlermeldung angezeigt.
+-->
+
 <!DOCTYPE html>
 <html lang="de">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Shop - Sportwagen</title>
-  <link rel="stylesheet" href="/Styles/styles-main.css">
-  <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
-  <script src="/header_footer"></script>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Shop - Sportwagen</title>
+    <!-- Haupt-CSS-Datei -->
+    <link rel="stylesheet" href="/Styles/styles-main.css">
+    <!-- Icons -->
+    <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
+    <!-- Script zum Laden von Header/Footer -->
+    <script src="/header_footer"></script>
 </head>
 <body>
 <div class="wrapper">
-  <!-- Header -->
-  <div id="header-placeholder"></div>
+    <!-- Header -->
+    <div id="header"></div>
 
     <!-- Hauptinhalt -->
     <main>
@@ -20,47 +29,79 @@
         </section>
 
         <section class="card-grid" id="products_sportwagen">
-            <!-- Dynamische Produkte oder Fehlermeldung -->
+            <!-- Einbindung Dynamische Produkte -->
         </section>
     </main>
 
-  <!-- Footer -->
-  <div id="footer"></div>
+    <!-- Footer -->
+    <div id="footer"></div>
 </div>
 
 <script>
-  fetch('/api/products/sportwagen')
-          .then(res => res.json())
-          .then(products => {
+  // Funktion zum Hinzufügen zum Warenkorb
+    function zumWarenkorbHinzufuegen(product) {
+        let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
+
+        const existingProduct = warenkorb.find(p => p.product_id === product.id);
+
+        if (existingProduct) {
+            existingProduct.quantity += 1; // Wenn schon vorhanden, Anzahl erhöhen
+        } else {
+            warenkorb.push({
+                product_id: product.id,
+                product_name: product.name,
+                price: product.price,
+                quantity: 1
+            });
+        }
+
+        localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
+        alert(`${product.name} wurde zum Warenkorb hinzugefügt!`);
+        zeigeWarenkorbAnzahl();
+    }
+
+    // Produkte laden
+    fetch('/api/products/sportwagen')
+        .then(res => res.json())
+        .then(products => {
             const container = document.getElementById('products_sportwagen');
             container.innerHTML = '';
 
+            // Für jedes Produkt eine Karte erstellen
             products.forEach(product => {
-              const card = document.createElement('div');
-              card.classList.add('card');
-              card.innerHTML = `
-            <img src="${product.image_url}" alt="${product.name}">
-            <h3>${product.name}</h3>
-            <p>Preis: ${product.price}€</p>
-            <p>${product.description}</p>
-            <p>Artikel Nr: ${product.id}</p>
-            <button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
-          `;
-              container.appendChild(card);
+                const card = document.createElement('div');
+                card.classList.add('card');
+                card.innerHTML = `
+                    <img src="${product.image_url}" alt="${product.name}">
+                    <h3>${product.name}</h3>
+                    <p>Preis: ${product.price.toFixed(2)} €</p>
+                    <p>${product.description}</p>
+                    <p>Artikel Nr: ${product.id}</p>
+                    <button class="add-to-cart">Zum Warenkorb hinzufügen</button>
+                `;
+
+                const addToCartButton = card.querySelector('.add-to-cart');
+                addToCartButton.addEventListener('click', () => {
+                    zumWarenkorbHinzufuegen(product);
+                });
+
+                container.appendChild(card);
             });
         })
+        // Fehlermeldung
         .catch(err => {
-            console.error('Fehler beim Laden der Sportwagen_Produkte:', err);
+            console.error('Fehler beim Laden der Produkte:', err);
 
+            // Fehlermeldung auf der Seite anzeigen
             const container = document.getElementById('products_sportwagen');
-            container.innerHTML =
-                `<div class="error-message">
-              <h3>Fehler beim Laden der Produkte</h3>
-              <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
-                 Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
-            </div> `;
+            container.innerHTML = `
+                <div class="error-message">
+                    <h3>Fehler beim Laden der Produkte</h3>
+                    <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
+                        Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
+                </div>`;
         });
 </script>
 
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/public/startseite/startseite.html b/public/startseite/startseite.html
index 93f859d..9c1dec8 100644
--- a/public/startseite/startseite.html
+++ b/public/startseite/startseite.html
@@ -1,99 +1,133 @@
+<!--
+  Startseite des Modellauto-Webshops
+  Zeigt ein Infobereich, die neuesten Produkte (per API geladen) und die Vorteile bei uns zu bestellen
+-->
+
 <!DOCTYPE html>
 <html lang="de">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Modellauto - Startseite</title>
+    <!-- Haupt-CSS-Datei -->
     <link rel="stylesheet" href="./Styles/styles-main.css">
+    <!-- Icons -->
     <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
+    <!-- Script zum Laden von Header/Footer -->
     <script src="/header_footer"></script>
 </head>
 <body>
-    <div class="wrapper">
-        <!-- Header -->
-        <div id="header-placeholder"></div>
+<div class="wrapper">
+    <!-- Header -->
+    <div id="header"></div>
 
-        <main>
-            <!-- Infobereich -->
-            <section style="padding: 40px 20px; text-align: center; background: #fff;">
-                <h2>Willkommen beim Modellauto-Shop</h2>
-                <p>Bei uns finden Sie hochwertige Modellautos – ob Oldtimer, Sportwagen, Lkw's oder Motorräder.
-                    Perfekt für Sammler, Bastler und Fans.
-                </p>
-            </section>
+    <main>
+        <!-- Infobereich -->
+        <section style="padding: 40px 20px; text-align: center; background: #fff;">
+            <h2>Willkommen beim Modellauto-Shop</h2>
+            <p>Bei uns finden Sie hochwertige Modellautos – ob Oldtimer, Sportwagen, Lkw's oder Motorräder.
+                Perfekt für Sammler, Bastler und Fans.
+            </p>
+        </section>
 
-            <!-- Hauptinhalt -->
-            <h1>Unsere Neusten Produkte: </h1>
-            <section class="card-grid" id="latest-products">
-                <!-- Dynamische Produkte (5 aktuelle Produkte) -->
-            </section>
+        <!-- Hauptinhalt -->
+        <h1>Unsere neusten Produkte: </h1>
+        <section class="card-grid" id="latest-products">
+            <!-- Dynamische Produkte (5 neuesten Produkte) -->
+        </section>
 
-            <!-- JavaScript zum Abrufen und Anzeigen der neuesten Produkte -->
-            <script>
-                // API-Aufruf
-                fetch('/api/products/new')
-                    // Antwort als JSON parsen
-                    .then(res => res.json())
-                    .then(products => {
-                        const container = document.getElementById('latest-products');
-                        container.innerHTML = ''; // sicherheitshalber leeren
+        <!-- JavaScript zum Abrufen und Anzeigen der neuesten Produkte -->
+        <script>
+            // Funktion zum Hinzufügen zum Warenkorb
+            function zumWarenkorbHinzufuegen(product) {
+                let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
 
-                        // Für jedes Produkt eine Karte erzeugen
-                        products.forEach(product => {
-                            const card = document.createElement('div');
-                            card.classList.add('card');
-                            // HTML-Inhalt der Karte mit Produktdaten füllen
-                            card.innerHTML = `
-                            <img src="${product.image_url}" alt="${product.name}">
-                            <h3>${product.name}</h3>
-                            <p>Preis: ${product.price}€</p>
-                            <p>${product.description}</p>
-                            <button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
-                        `;
-                            // Karte in Container einfügen
-                            container.appendChild(card);
-                        });
-                    })
-                    .catch(err => {
-                        console.error('Fehler beim Laden der neuesten Produkte:', err);
+                const existingProduct = warenkorb.find(p => p.product_id === product.id);
 
-                        const container = document.getElementById('latest-products');
-                        container.innerHTML =
-                        `<div class="error-message">
-                            <h3>Fehler beim Laden der Produkte</h3>
-                            <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
-                        </div>`;
+                if (existingProduct) {
+                    existingProduct.quantity += 1; // Wenn schon vorhanden, Anzahl erhöhen
+                } else {
+                    warenkorb.push({
+                        product_id: product.id,
+                        product_name: product.name,
+                        price: product.price,
+                        quantity: 1
                     });
-            </script>
+                }
+
+                localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
+                alert(`${product.name} wurde zum Warenkorb hinzugefügt!`);
+                zeigeWarenkorbAnzahl();
+            }
+
+            // Produkte laden
+            fetch('/api/products/new')
+                .then(res => res.json())
+                .then(products => {
+                    const container = document.getElementById('latest-products');
+                    container.innerHTML = '';
+
+                    products.forEach(product => {
+                        const card = document.createElement('div');
+                        card.classList.add('card');
+                        card.innerHTML = `
+                    <img src="${product.image_url}" alt="${product.name}">
+                    <h3>${product.name}</h3>
+                    <p>Preis: ${product.price.toFixed(2)} €</p>
+                    <p>${product.description}</p>
+                    <p>Artikel Nr: ${product.id}</p>
+                    <button class="add-to-cart">Zum Warenkorb hinzufügen</button>
+                `;
+
+                        const addToCartButton = card.querySelector('.add-to-cart');
+                        addToCartButton.addEventListener('click', () => {
+                            zumWarenkorbHinzufuegen(product);
+                        });
+
+                        container.appendChild(card);
+                    });
+                })
+                .catch(err => {
+                    console.error('Fehler beim Laden der Produkte:', err);
+
+                    const container = document.getElementById('latest-products');
+                    container.innerHTML = `
+                <div class="error-message">
+                    <h3>Fehler beim Laden der Produkte</h3>
+                    <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
+                        Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
+                </div>`;
+                });
+        </script>
 
 
-            <!-- Info-Sektion -->
-            <section class="info-cards-section">
-                <div class="info-card">
-                    <i class='bx bx-package'></i>
-                    <h3>Versandkostenfrei ab 50€</h3>
-                    <p>Schneller & sicherer Versand mit Sendungsverfolgung.</p>
-                </div>
-                <div class="info-card">
-                    <i class='bx bx-credit-card'></i>
-                    <h3>Flexible Zahlungsmethoden</h3>
-                    <p>PayPal, Kreditkarte, Klarna, Vorkasse – Sie haben die Wahl.</p>
-                </div>
-                <div class="info-card">
-                    <i class='bx bx-undo'></i>
-                    <h3>14 Tage Rückgaberecht</h3>
-                    <p>Unzufrieden? Kein Problem – Rückgabe einfach & unkompliziert.</p>
-                </div>
-                <div class="info-card">
-                    <i class='bx bx-star'></i>
-                    <h3>Top-Bewertungen</h3>
-                    <p>Unsere Kunden lieben uns – überzeugen Sie sich selbst!</p>
-                </div>
-            </section>
-        </main>
+        <!-- Infobereich mit den Vorteilen -->
+        <section class="info-cards-section">
+            <div class="info-card">
+                <i class='bx bx-package'></i>
+                <h3>Versandkostenfrei ab 50€</h3>
+                <p>Schneller & sicherer Versand mit Sendungsverfolgung.</p>
+            </div>
+            <div class="info-card">
+                <i class='bx bx-credit-card'></i>
+                <h3>Flexible Zahlungsmethoden</h3>
+                <p>PayPal, Kreditkarte, Klarna, Vorkasse – Sie haben die Wahl.</p>
+            </div>
+            <div class="info-card">
+                <i class='bx bx-undo'></i>
+                <h3>14 Tage Rückgaberecht</h3>
+                <p>Unzufrieden? Kein Problem – Rückgabe einfach & unkompliziert.</p>
+            </div>
+            <div class="info-card">
+                <i class='bx bx-star'></i>
+                <h3>Top-Bewertungen</h3>
+                <p>Unsere Kunden lieben uns – überzeugen Sie sich selbst!</p>
+            </div>
+        </section>
+    </main>
 
-        <!-- Fußzeiele -->
-        <div id="footer"></div>
+    <!-- Fußzeiele -->
+    <div id="footer"></div>
 
 </div>
 </body>
diff --git a/scripts/einfügenHeaderFooter.js b/scripts/einfügenHeaderFooter.js
index 08ad09d..6bf84a1 100644
--- a/scripts/einfügenHeaderFooter.js
+++ b/scripts/einfügenHeaderFooter.js
@@ -1,16 +1,33 @@
+/**
+ * Dieser Code lädt beim Start der Seite (DOMContentLoaded) Header und Footer dynamisch vom Server
+ * (über /header und /footer) und fügt sie in die vorgesehenen Elemente ein.
+ * Tritt ein Fehler auf (z.B. Datei nicht vorhanden oder Serverproblem),
+ * wird eine Fehlermeldung direkt auf der Webseite angezeigt.
+ */
+
+// Warten bis das gesamte DOM geladen ist
 document.addEventListener("DOMContentLoaded", () => {
     // Header laden
-    const headerTarget = document.getElementById("header-placeholder");
+    const headerTarget = document.getElementById("header");
     if (headerTarget) {
+        // Header-Inhalt vom Server anfordern
         fetch("/header")
             .then(response => {
+                // Prüfen, ob die Antwort erfolgreich war
                 if (!response.ok) throw new Error("Header nicht gefunden");
                 return response.text();
             })
             .then(data => {
+                // Header-Inhalt in die Seite einfügen
                 headerTarget.innerHTML = data;
+
+                // WICHTIG: Jetzt den Warenkorb zählen, nachdem der Header geladen ist!
+                zeigeWarenkorbAnzahl();
+
+                zeigeLoginStatus();
             })
             .catch(error => {
+                // Fehlerbehandlung: Fehlermeldung im Header-Bereich anzeigen
                 headerTarget.innerHTML = `
                     <div style="background: #ffdede; color: #a00; padding: 10px; text-align: center;">
                         Fehler beim Laden des Headers.
@@ -22,15 +39,19 @@ document.addEventListener("DOMContentLoaded", () => {
     // Footer laden
     const footerTarget = document.getElementById("footer");
     if (footerTarget) {
+        // Footer-Inhalt vom Server anfordern
         fetch("/footer")
             .then(response => {
+                // Prüfen, ob die Antwort erfolgreich war
                 if (!response.ok) throw new Error("Footer nicht gefunden");
                 return response.text();
             })
             .then(data => {
+                // Footer-Inhalt in die Seite einfügen
                 footerTarget.innerHTML = data;
             })
             .catch(error => {
+                // Fehlerbehandlung: Die Fehlermeldung im Footer-Bereich anzeigen
                 footerTarget.innerHTML = `
                     <div style="background: #ffdede; color: #a00; padding: 10px; text-align: center;">
                         Fehler beim Laden der Fußzeile.
@@ -38,4 +59,40 @@ document.addEventListener("DOMContentLoaded", () => {
                 console.error(error);
             });
     }
-});
+
+    window.zeigeWarenkorbAnzahl = function() {
+        const warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
+        let anzahl = 0;
+    
+        warenkorb.forEach(produkt => {
+            anzahl += produkt.quantity;
+        });
+    
+        const anzahlElement = document.getElementById('cart-count');
+        if (anzahlElement) {
+            anzahlElement.textContent = anzahl;
+        }
+        console.log('Warenkorb-Anzahl:', anzahl);
+    }
+
+    window.zeigeLoginStatus= function (){
+        const userId = sessionStorage.getItem('user_id')
+        const loginBtn = document.querySelector('.login-btn')
+
+        if (!loginBtn) return
+
+        if (userId) {
+            loginBtn.textContent = 'Logout'
+            loginBtn.href = '/'
+            loginBtn.addEventListener('click', (e) => {
+                e.preventDefault()
+                sessionStorage.clear()
+                alert('Sie wurden ausgeloggt.')
+                location.reload()
+            })
+        } else {
+            loginBtn.textContent = 'Login'
+            loginBtn.href= '/login'
+        }
+    }
+});
\ No newline at end of file
diff --git a/scripts/example.js b/scripts/example.js
deleted file mode 100644
index d539db9..0000000
--- a/scripts/example.js
+++ /dev/null
@@ -1,23 +0,0 @@
-let sidebarEl = document.getElementById("mySidebar")
-let mainEl = document.getElementById("main")
-
-/* Set the width of the sidebar to 250px and the left margin of the page content to 250px */
-function openNav() {
-    sidebarEl.style.width = "250px";
-    mainEl.style.marginLeft = "250px";
-}
-
-/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
-function closeNav() {
-    sidebarEl.style.width = "0";
-    mainEl.style.marginLeft = "0";
-}
-
-/* Toggle the sidebar */
-function toggleNav() {
-    if (sidebarEl.offsetWidth > 0) {
-        closeNav()
-    } else {
-        openNav()
-    }
-}
\ No newline at end of file
diff --git a/scripts/login.js b/scripts/login.js
deleted file mode 100644
index 6d17a2a..0000000
--- a/scripts/login.js
+++ /dev/null
@@ -1,7 +0,0 @@
-let nameEl = document.getElementById("loginMail");
-let passwordEl = document.getElementById("loginPassword");
-
-function login() {
-    console.log(nameEl.value)
-    console.log(passwordEl.value)
-}
\ No newline at end of file
diff --git a/scripts/query/get_products.js b/scripts/query/get_products.js
deleted file mode 100644
index 9f51378..0000000
--- a/scripts/query/get_products.js
+++ /dev/null
@@ -1,17 +0,0 @@
-const mysql = require('mysql');
-
-const connection = mysql.createConnection({
-    host: "localhost",
-    user: "root",
-    password: "",
-    database: "webshop"
-})
-
-connection.connect(function (err) {
-    if (err) throw err
-    console.log("Connected to database")
-    connection.query("SELECT * FROM webshop.product LIMIT 10", function (err, result) {
-        if (err) throw err
-        console.log(result)
-    })
-})
\ No newline at end of file
diff --git a/scripts/query/get_users.js b/scripts/query/get_users.js
deleted file mode 100644
index 72caeef..0000000
--- a/scripts/query/get_users.js
+++ /dev/null
@@ -1,17 +0,0 @@
-const mysql = require('mysql');
-
-const connection = mysql.createConnection({
-    host: "localhost",
-    user: "root",
-    password: "",
-    database: "webshop"
-})
-
-connection.connect(function (err) {
-    if (err) throw err
-    console.log("Connected to database")
-    connection.query("SELECT * FROM webshop.user WHERE ID = 15", function (err, result) {
-        if (err) throw err
-        console.log(result)
-    })
-})
\ No newline at end of file
diff --git a/scripts/routes/other/route-index.js b/scripts/routes/other/route-index.js
index 3edcb01..6ba00d0 100644
--- a/scripts/routes/other/route-index.js
+++ b/scripts/routes/other/route-index.js
@@ -6,10 +6,6 @@ router.get('/', (req, res) => {
     res.sendFile(path.join(__dirname, '../../../public/startseite/startseite.html'));
 })
 
-router.get('/example', (req, res) => {
-    res.sendFile(path.join(__dirname, '../../../public/example/index.html'));
-})
-
 // Route - Login
 router.get('/login', (req, res) => {
     res.sendFile(path.join(__dirname, '../../../public/login/login.html'));
@@ -60,13 +56,12 @@ router.get('/shop', (req, res) => {
         res.sendFile(path.join(__dirname, '../../../public/shop/shop_lkw.html'));
     })
 
-    router.get('/bestellformular', (req, res) => {
-         res.sendFile(path.join(__dirname, '../../../public/bestellformular/bestellformular.html'));
-    })
+// Route - Warenkorb
 router.get('/Warenkorb', (req, res) => {
     res.sendFile(path.join(__dirname, '../../../public/warenkorb/warenkorb.html'));
 })
 
+// Route - Bestellformualar
 router.get('/bestellformular', (req, res) => {
     res.sendFile(path.join(__dirname, '../../../public/bestellformular/bestellformular.html'));
 })
@@ -74,4 +69,10 @@ router.get('/bestellformular', (req, res) => {
 router.get('/bestellung', (req, res) => {
     res.sendFile(path.join(__dirname, '../../../public/bestellung/bestellung.html'));
 })
+
+router.get('/kontaktformular', (req, res) => {
+    res.sendFile(path.join(__dirname, '../../../public/kontaktformular/kontaktformular.html'));
+})
+
+
 module.exports = router;
\ No newline at end of file
diff --git a/server.js b/server.js
index 59b3e21..5ef778c 100644
--- a/server.js
+++ b/server.js
@@ -52,6 +52,7 @@ app.get('/api/products', (req, res) => {
     });
 });
 
+// API-Route für die 5 neuen Produkte
 app.get('/api/products/new', async (req, res) => {
     // SQL-Abfrage für Produktdaten
     const sql = 'SELECT * FROM webshop.product ORDER BY created_at DESC LIMIT 4';
@@ -67,6 +68,7 @@ app.get('/api/products/new', async (req, res) => {
     });
 });
 
+// API-Route für die Motorrad-Produkte
 app.get('/api/products/motorrad', async (req, res) => {
     // SQL-Abfrage für Produktdaten
     const sql = 'SELECT * FROM webshop.product WHERE category_id = 4';
@@ -82,6 +84,7 @@ app.get('/api/products/motorrad', async (req, res) => {
     });
 });
 
+// API-Route für die Oldtimer-Produkte
 app.get('/api/products/oldtimer', async (req, res) => {
     // SQL-Abfrage für Produktdaten
     const sql = 'SELECT * FROM webshop.product WHERE category_id = 2';
@@ -97,6 +100,7 @@ app.get('/api/products/oldtimer', async (req, res) => {
     });
 });
 
+// API-Route für die Lkw-Produkte
 app.get('/api/products/lkw', async (req, res) => {
     // SQL-Abfrage für Produktdaten
     const sql = 'SELECT * FROM webshop.product WHERE category_id = 3';
@@ -112,6 +116,7 @@ app.get('/api/products/lkw', async (req, res) => {
     });
 });
 
+// API-Route für die Sportwagen-Produkte
 app.get('/api/products/sportwagen', async (req, res) => {
     // SQL-Abfrage für Produktdaten
     const sql = 'SELECT * FROM webshop.product WHERE category_id = 1';
@@ -130,11 +135,15 @@ app.get('/api/products/sportwagen', async (req, res) => {
 app.post('/api/user/registration', (req, res) => {
     // SQL-Query für Nutzerregistration
     const {name, lower_name, email, passwd} = req.body;
+
     const sql = "INSERT INTO webshop.user (name, lower_name, email, passwd, passwd_hash_algo) VALUES (?, ?, ?, ?, 'none')"
 
     // Query abschicken
     db.query(sql, [name, lower_name, email, passwd], (err, results) => {
         if (err) {
+            if (err.code === 'ER_DUP_ENTRY'){
+                res.status(409).json({message: 'Diese E-Mail Adresse ist bereits registriert.'})
+            }
             console.error('Fehler beim Schreiben in die Datenbank: ', err);
             res.status(500).send('Fehler beim Schreiben in die Datenbank');
             return;
@@ -145,7 +154,7 @@ app.post('/api/user/registration', (req, res) => {
 
 app.post('/api/user/login', (req, res) => {
     const {email, password} = req.body
-    const sql = 'SELECT * FROM user WHERE email = ?'
+    const sql = 'SELECT * FROM webshop.user WHERE email = ?'
 
     db.query(sql, [email], (err, results) => {
         if (err) {
@@ -163,8 +172,10 @@ app.post('/api/user/login', (req, res) => {
 
         req.session.userId = user.id;
         req.session.email = user.email;
+        req.session.vorname = user.name;
+        req.session.nachname = user.lower_name;
 
-        res.json({message: 'Login erfolgreich', id: user.id})
+        res.json({message: 'Login erfolgreich', id: user.id, name: user.name, lower_name: user.lower_name})
     })
 })
 
@@ -269,7 +280,7 @@ app.get('/api/pruefe-artikel', (req, res) => {
         return res.status(400).json({ error: 'Keine Artikelnummer angegeben.' });
     }
 
-    const query = 'SELECT id FROM product WHERE id = ?';
+    const query = 'SELECT id FROM webshop.product WHERE id = ?';
 
     db.query(query, [artikelnummer], (err, results) => {
         if (err) {
@@ -285,7 +296,10 @@ app.get('/api/pruefe-artikel', (req, res) => {
 const getIndexRoute = require('./scripts/routes/other/route-index');
 app.use('/', getIndexRoute);
 
+// Hier werden alle anderen Seiten abgefangen, die keine definierten Routen haben (404 Fehler)
+// und gibt die 404.html aus.
 app.use((req, res) => {
+    // Setzt den Statuscode auf 404 und sendet die '404.html'-Datei
     res.status(404).sendFile(path.join(__dirname, 'public', '404.html'));
 });
 
diff --git a/static/Styles/bestellformular/bestellformular.css b/static/Styles/bestellformular/bestellformular.css
index e19c126..c320ca7 100644
--- a/static/Styles/bestellformular/bestellformular.css
+++ b/static/Styles/bestellformular/bestellformular.css
@@ -1,7 +1,6 @@
 body {
     font-family: Arial, sans-serif;
     background-color: #f2f2f2;
-    padding: 20px;
     margin: 0;
     display: flex;
     flex-direction: column;
diff --git a/static/Styles/styles-main.css b/static/Styles/styles-main.css
index 6af9077..a739343 100644
--- a/static/Styles/styles-main.css
+++ b/static/Styles/styles-main.css
@@ -55,6 +55,11 @@ header {
     object-fit: contain;
 }
 
+.logo-link {
+    text-decoration: none;
+    color: inherit;
+}
+
 header h1 {
     font-size: 30px;
     color: #333;
