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/package-lock.json b/package-lock.json
index d926216..b3c988d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "sniper",
+  "name": "webshop",
   "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "sniper",
+      "name": "webshop",
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
@@ -15,7 +15,9 @@
         "express-session": "^1.18.1",
         "mysql": "^2.18.1",
         "mysql2": "^3.12.0",
-        "path": "^0.12.7"
+        "node": "^22.15.0",
+        "path": "^0.12.7",
+        "server.js": "^1.0.0"
       }
     },
     "node_modules/accepts": {
@@ -674,6 +676,28 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/node": {
+      "version": "22.15.0",
+      "resolved": "https://registry.npmjs.org/node/-/node-22.15.0.tgz",
+      "integrity": "sha512-qrOEL83lNt+Jbh9pekl5xQrZK+QRJz51m2IGGCu2NENgbG6Go0D1QUBvjbejP8jB2eokQpX1AorDLbKQ/FxuYA==",
+      "hasInstallScript": true,
+      "license": "ISC",
+      "dependencies": {
+        "node-bin-setup": "^1.0.0"
+      },
+      "bin": {
+        "node": "bin/node"
+      },
+      "engines": {
+        "npm": ">=5.0.0"
+      }
+    },
+    "node_modules/node-bin-setup": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/node-bin-setup/-/node-bin-setup-1.1.3.tgz",
+      "integrity": "sha512-opgw9iSCAzT2+6wJOETCpeRYAQxSopqQ2z+N6BXwIMsQQ7Zj5M8MaafQY8JMlolRR6R1UXg2WmhKp0p9lSOivg==",
+      "license": "ISC"
+    },
     "node_modules/object-inspect": {
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
@@ -894,6 +918,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/server.js": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/server.js/-/server.js-1.0.0.tgz",
+      "integrity": "sha512-fO4IvzkZ09bBB++XU/gWGuzxJs0OpghSd/34mlW8coMoakLzj/+W5d1pHX+I+7H52GkBKu96UQU0K5vptNjaqg==",
+      "license": "ISC"
+    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
diff --git a/package.json b/package.json
index a95f1e3..f34f8f5 100644
--- a/package.json
+++ b/package.json
@@ -1,10 +1,10 @@
 {
-  "name": "sniper",
+  "name": "webshop",
   "version": "1.0.0",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "node server.js"
+    "start": "npm install && node server.js"
   },
   "keywords": [],
   "author": "",
@@ -12,13 +12,13 @@
   "description": "Webshop Autohändler",
   "dependencies": {
     "app-root-path": "^3.1.0",
-    "dotenv": "^16.4.5",
-    "express": "^4.21.1",
     "dotenv": "^16.4.7",
     "express": "^4.21.2",
     "express-session": "^1.18.1",
     "mysql": "^2.18.1",
     "mysql2": "^3.12.0",
-    "path": "^0.12.7"
+    "node": "^22.15.0",
+    "path": "^0.12.7",
+    "server.js": "^1.0.0"
   }
 }
diff --git a/public/404.html b/public/404.html
index 4b776da..69a558c 100644
--- a/public/404.html
+++ b/public/404.html
@@ -1,27 +1,38 @@
+<!--
+  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>
-  <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>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">
+<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>
-      <a href="/" class="btn" style="width: auto; display: inline-block; margin-top: 20px;">Zur Startseite</a>
+        <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>
 
     <!-- Fußzeiele -->
     <div id="footer"></div>
 
-  </div>
+</div>
 </body>
 </html>
\ No newline at end of file
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 4c81016..999319a 100644
--- a/public/bestellformular/bestellformular.html
+++ b/public/bestellformular/bestellformular.html
@@ -6,26 +6,27 @@
     <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">
-            <form action="/submit-bestellung" method="post" id="bestellform">
+            <form method="post" id="bestellform">
                 <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">
@@ -37,48 +38,273 @@
                 <input type="text" id="ort" name="ort" required placeholder="Ort">
 
                 <label for="ArtikelNr">Artikel Nr.:</label>
-                <textarea id="ArtikelNr" name="ArtikelNr" rows="4" required placeholder="Artikel Nr."></textarea>
+                <div class="Artikel">
+                    <button type="button" class="loeschen-button" onclick="loescheArtikel(this)">x</button>
+                    <input type="text" class="ArtikelNrText" id="ArtikelNr" name="ArtikelNr" required placeholder="Artikel Nr.">
+                    <input type="text" class="StueckzahlText" id="Stueckzahl" name="Stueckzahl" required placeholder="Anzahl">
+                    <div class="verfuegbarkeit"></div>
+                </div>
 
-                <a href="/bestellung" class="button-submit" id="sendOrder">Bestellung absenden</a>
+                <style>
+                    .Artikel {
+                        display: flex;
+                        align-content: center;
+                    }
+
+                    .ArtikelNrText {
+                        max-width: 50%;
+                    }
+
+                    .StueckzahlText {
+                        max-width: 15%;
+                        margin-left: 2.5%;
+                    }
+
+                    .loeschen-button {
+                        background-color: #ff6600;
+                        color: white;
+                        border: none;
+                        border-radius: 5px;
+                        width: 5%;
+                        height: 30px;
+                        cursor: pointer;
+                        margin-right: 5px;
+                    }
+
+                    .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>
         </div>
     </main>
 
     <script>
-        document.getElementById('bestellform').addEventListener('sendOrder', async (event) => {
-            event.preventDefault(); // Verhindert das Standardformularverhalten
+        const user_id = sessionStorage.getItem('user_id');
+        const email = sessionStorage.getItem('email');
+        const vorname = sessionStorage.getItem('vorname');
+        const nachname = sessionStorage.getItem('nachname');
 
-            const userId = document.getElementById('KundenNr').value;
-            const productId = document.getElementById('ArtikelNr').value;
 
-            try {
-                const response = await fetch('/api/bestellung', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        userId,
-                        productId,
+        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) {
+                event.preventDefault();
+
+                const form = document.getElementById('bestellform');
+
+                // Kundendaten einsammeln
+                const userData = {
+                    vorname: form.Vorname.value.trim(),
+                    nachname: form.Nachname.value.trim(),
+                    kundenNr: form.KundenNr.value.trim(),
+                    strasse: form.strasse.value.trim(),
+                    hausnummer: form.hausnummer.value.trim(),
+                    ort: form.ort.value.trim()
+                };
+
+                // Artikel einsammeln
+                const artikelInputs = document.querySelectorAll('.Artikel');
+                const produkte = [];
+
+                artikelInputs.forEach(artikel => {
+                    const artikelNrInput = artikel.querySelector('.ArtikelNrText');
+                    const stueckzahlInput = artikel.querySelector('.StueckzahlText');
+
+                    if (artikelNrInput && artikelNrInput.value.trim() !== '') {
+                        produkte.push({
+                            product_id: parseInt(artikelNrInput.value.trim(), 10),
+                            quantity: parseInt(stueckzahlInput.value.trim(), 10) || 1
+                        });
+                    }
                 });
 
-                const result = await response.json();
-
-                if (response.ok) {
-                    alert('Bestellung erfolgreich!');
-                    window.location.href = '/bestellung.html'; // Weiterleitung zur Bestellübersicht
-                } else {
-                    alert('Fehler bei der Bestellung: ' + result.message);
+                if (produkte.length === 0) {
+                    alert('Bitte mindestens ein Produkt angeben!');
+                    return;
                 }
-            } catch (error) {
-                console.error('Fehler:', error);
-                alert('Fehler beim Bestellen.');
-            }
-        });
-    </script>
 
+                const payload = {
+                    user_id: parseInt(userData.kundenNr, 10),
+                    produkte: produkte
+                };
+
+                try {
+                    const response = await fetch('/api/bestellung', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify(payload)
+                    });
+
+                    const result = await response.json();
+
+                    if (response.ok) {
+                        // Bestellung erfolgreich -> Weiterleitung
+                        window.location.href = "/bestellung";
+                    } else {
+                        alert('Fehler: ' + result.message);
+                    }
+
+                } catch (error) {
+                    console.error('Fehler beim Abschicken der Bestellung:', error);
+                    alert('Serverfehler beim Abschicken der Bestellung.');
+                }
+            });
+
+            // Artikelnummer prüfen bei Eingabe
+            formular.addEventListener('input', async function (event) {
+                if (event.target.classList.contains('ArtikelNrText')) {
+                    if (event.target.value.trim() !== '') {
+                        await pruefeVerfuegbarkeit(event.target);
+                        fuegeNeuesArtikelFeldHinzu();
+                    }
+                }
+            });
+        });
+
+        // Funktion: Verfügbarkeit prüfen
+        async function pruefeVerfuegbarkeit(inputFeld) {
+            const artikelnummer = inputFeld.value.trim();
+            const verfuegbarkeitDiv = inputFeld.parentElement.querySelector('.verfuegbarkeit');
+            const sendButton = document.getElementById('sendOrder');
+
+            if (artikelnummer.length === 0) {
+                verfuegbarkeitDiv.textContent = "";
+                return;
+            }
+
+            try {
+                const response = await fetch(`/api/pruefe-artikel?nummer=${encodeURIComponent(artikelnummer)}`);
+                const data = await response.json();
+
+                const artikelDivs = document.querySelectorAll('.Artikel');
+                artikelVerfuegbarkeiten = [];
+
+                artikelDivs.forEach(div => {
+                    const artikelNrInput = div.querySelector('.ArtikelNrText');
+                    const verfDiv = div.querySelector('.verfuegbarkeit');
+
+                    if (artikelNrInput.value.trim() !== '') {
+                        if (artikelNrInput === inputFeld) {
+                            if (data.verfuegbar) {
+                                verfDiv.textContent = "Artikel verfügbar.";
+                                verfDiv.style.color = "green";
+                                artikelVerfuegbarkeiten.push(true);
+                            } else {
+                                verfDiv.textContent = "Artikel nicht verfügbar!";
+                                verfDiv.style.color = "red";
+                                artikelVerfuegbarkeiten.push(false);
+                            }
+                        } else {
+                            // Für andere Felder bisherige Anzeige berücksichtigen
+                            if (verfDiv.textContent.includes("nicht verfügbar")) {
+                                artikelVerfuegbarkeiten.push(false);
+                            } else {
+                                artikelVerfuegbarkeiten.push(true);
+                            }
+                        }
+                    }
+                });
+
+                // Button sperren/freigeben
+                if (artikelVerfuegbarkeiten.every(status => status === true)) {
+                    sendButton.disabled = false;
+                } else {
+                    sendButton.disabled = true;
+                }
+
+            } catch (error) {
+                console.error('Fehler bei der Artikelsuche:', error);
+                verfuegbarkeitDiv.textContent = "Fehler bei der Prüfung.";
+                verfuegbarkeitDiv.style.color = "orange";
+                sendButton.disabled = true;
+            }
+        }
+
+        // Funktion: Neues Artikelfeld hinzufügen
+        function fuegeNeuesArtikelFeldHinzu() {
+            const formular = document.getElementById('bestellform');
+            const artikelnummerFelder = formular.querySelectorAll('.ArtikelNrText');
+            const letztesFeld = artikelnummerFelder[artikelnummerFelder.length - 1];
+
+            if (letztesFeld && letztesFeld.value.trim() !== '') {
+                const neueArtikelDiv = document.createElement('div');
+                neueArtikelDiv.className = 'Artikel';
+                neueArtikelDiv.innerHTML = `
+                    <button type="button" class="loeschen-button" onclick="loescheArtikel(this)">x</button>
+                    <input type="text" class="ArtikelNrText" name="ArtikelNr" required placeholder="Artikel Nr.">
+                    <input type="text" class="StueckzahlText" name="Stueckzahl" required placeholder="Anzahl">
+                    <div class="verfuegbarkeit"></div>
+                `;
+
+                const sendButton = document.getElementById('sendOrder');
+                formular.insertBefore(neueArtikelDiv, sendButton);
+            }
+        }
+
+        // Funktion: Artikel löschen
+        function loescheArtikel(button) {
+            const artikelDiv = button.parentElement;
+            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>
 </div>
diff --git a/public/bestellung/bestellung.html b/public/bestellung/bestellung.html
index 9edc202..0827942 100644
--- a/public/bestellung/bestellung.html
+++ b/public/bestellung/bestellung.html
@@ -1,65 +1,103 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Ihre Bestellung</title>
-  <link rel="stylesheet" href="/Styles/bestellung/bestellung.css">
-  <link rel="stylesheet" href="/Styles/styles-main.css">
-  <script src="/header_footer"></script>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ihre Bestellung</title>
+    <link rel="stylesheet" href="/Styles/bestellung/bestellung.css">
+    <link rel="stylesheet" href="/Styles/styles-main.css">
+    <script src="/header_footer"></script>
 </head>
 <body>
 <!-- Header wird hier dynamisch geladen -->
 <div id="header-placeholder"></div>
 
-  <main>
+<main>
     <h2>Ihre Bestellung:</h2>
     <div id="bestellung">
-      <!-- Platzhalter für die Bestellinformationen -->
-      <div class="bestell-info-card">
-        <p><strong>Kundennummer:</strong> <span id="kundenNr"></span></p>
-        <p><strong>Produkt-ID:</strong> <span id="produktId"></span></p>
-        <p><strong>Produktname:</strong> <span id="produktName"></span></p>
-        <p><strong>Preis:</strong> <span id="preis"></span></p>
-      </div>
+        <!-- Platzhalter für die Bestellinformationen -->
+        <div class="bestell-info-card">
+            <p><strong>Kundennummer:</strong> <span id="kundenNr"></span></p>
+            <p><strong>Produkt-ID:</strong> <span id="produktId"></span></p>
+            <p><strong>Produktname:</strong> <span id="produktName"></span></p>
+            <p><strong>Preis:</strong> <span id="preis"></span></p>
+        </div>
     </div>
-  </main>
+</main>
 
 <script>
-  async function ladeBestellung() {
-    const user_id = sessionStorage.getItem('user_id')
-    console.log('User ID: ', user_id)
-    if (!user_id){
-      console.log("is null")
-      alert('Sie sind nicht eingeloggt! Bitte loggen sie sich ein damit diese Seite angezeigt werden kann.')
-    } else if (user_id <= 1) {
-      try {
-        const response = await fetch('/api/bestellung/daten', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json'
-          },
-          body: JSON.stringify(user_id)
-        })
-
-        if (response.ok) {
-          const data = await response.json();
-          document.getElementById('kundenNr').textContent = user_id
-          document.getElementById('produktId').textContent = data.product_id
-          //document.getElementById('produktName').textContent = data.
-          document.getElementById('preis').textContent = data.total + ' €'
-        } else {
-          console.error('Fehler beim Laden der Bestelldaten.');
+    async function ladeBestellung() {
+        const user_id = sessionStorage.getItem('user_id');
+        if (!user_id) {
+            alert('Sie sind nicht eingeloggt! Bitte loggen Sie sich ein.');
+            window.location.href = '/login';
+            return;
+        }
+    
+        try {
+            const response = await fetch('/api/bestellung/daten', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ user_id: user_id })
+            });
+    
+            if (response.ok) {
+                const daten = await response.json();
+                const bestellungContainer = document.getElementById('bestellung');
+                bestellungContainer.innerHTML = '';
+
+                const bestellungen = {};
+    
+                daten.forEach(item => {
+                    if (!bestellungen[item.order_id]) {
+                        bestellungen[item.order_id] = {
+                            total: item.order_total,
+                            produkte: []
+                        };
+                    }
+                    bestellungen[item.order_id].produkte.push({
+                        name: item.product_name,
+                        preis: item.product_price,
+                        quantity: item.quantity
+                    });
+                });
+
+                for (const orderId in bestellungen) {
+                    const bestellung = bestellungen[orderId];
+                    const bestellCard = document.createElement('div');
+                    bestellCard.className = 'bestell-info-card';
+    
+                    let produkteHTML = '';
+                    bestellung.produkte.forEach(produkt => {
+                        produkteHTML += `
+                            <p>• ${produkt.name} — ${produkt.quantity} Stück — Preis: ${produkt.preis.toFixed(2)} €</p>
+                        `;
+                    });
+    
+                    bestellCard.innerHTML = `
+                        <h3>Bestellnummer: ${orderId}</h3>
+                        ${produkteHTML}
+                        <p><strong>Gesamtsumme:</strong> ${bestellung.total.toFixed(2)} €</p>
+                    `;
+    
+                    bestellungContainer.appendChild(bestellCard);
+                }
+    
+            } else if (response.status === 404) {
+                document.getElementById('bestellung').innerHTML = '<p>Keine Bestellungen gefunden.</p>';
+            } else {
+                console.error('Fehler beim Laden der Bestellungen.');
+            }
+        } catch (error) {
+            console.error('Fehler: ', error);
         }
-      } catch (error) {
-        console.error('Fehler: ', error);
-      }
     }
-  }
-
-  window.addEventListener('DOMContentLoaded',  ladeBestellung);
-</script>
-
+    
+    window.addEventListener('DOMContentLoaded', ladeBestellung);
+    </script>
+    
 <!-- Footer wird dynamisch geladen -->
 <div id="footer"></div>
 </body>
diff --git a/public/header_footer/footer.html b/public/header_footer/footer.html
index 8178fca..521d90b 100644
--- a/public/header_footer/footer.html
+++ b/public/header_footer/footer.html
@@ -1,8 +1,14 @@
-<!-- Fußzeiele -->
+<!--
+  Fußzeile des Webshops
+  Zeigt einen Copyright-Hinweis, die Links zum Impressum und Datenschutz sind verlinkt (keine Funktion)
+-->
+
 <footer class="footer">
-  <p>&copy; 2025 Autohändler Webshop – Alle Rechte vorbehalten</p>
-  <p>
-    <a href="/impressum">Impressum</a> |
-    <a href="/datenschutz">Datenschutz</a>
-  </p>
+    <!-- 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>
+    </p>
 </footer>
diff --git a/public/header_footer/header.html b/public/header_footer/header.html
index 9c19192..dd4c9c6 100644
--- a/public/header_footer/header.html
+++ b/public/header_footer/header.html
@@ -1,35 +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="/kontaktformular">Kontakt</a></li>
-    <li class="menu-item"><a href="/bestellformular">Bestellformular</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/login/login.html b/public/login/login.html
index 52d9e7a..6276142 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/>
                 <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">Login</button>
+
+            <!-- Link zur Registrierungsseite -->
             <p class="register-text">
                 Noch keinen Account? <a href="/registrieren">Registrieren</a>
             </p>
@@ -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 f7ae6d6..f820f04 100644
--- a/public/registrieren/registrieren.html
+++ b/public/registrieren/registrieren.html
@@ -1,25 +1,36 @@
+<!--
+  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>
+    <!-- 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>
 </head>
 <body>
 <div class="page-container">
 
     <!-- Header -->
-    <div id="header-placeholder"></div>
+    <div id="header"></div>
 
     <!-- Registrierungsformular -->
     <main class="content-wrapper">
-        <div class="wrapper">
-            <form id="registration Form" method="POST">
-                <h1>Registrieren</h1>
+        <!-- Formular für Registrierung -->
+        <div class="register-wrapper">
+            <form action="register.php" method="POST">
+                <h2 class="title">Registrieren</h2>
 
                 <div class="input-box">
                     <input type="text" name="vorname" placeholder="Vorname" required id="vorname">
@@ -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>
@@ -76,7 +89,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= '/'
                 } else {
                     alert('Fehler bei der Registrierung.')
                 }
diff --git a/public/shop/shop.html b/public/shop/shop.html
index efebcb9..2d81b71 100644
--- a/public/shop/shop.html
+++ b/public/shop/shop.html
@@ -1,63 +1,110 @@
+<!--
+  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>
-  <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</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>
+<!-- Header -->
+<div id="header"></div>
 
-  <!-- Hauptinhalt -->
-  <section style="padding: 0px 30px; text-align: left;">
+<!-- Hauptinhalt -->
+<section style="padding: 0px 30px; text-align: left;">
     <h1>Willkommen im Webshop</h1>
-  </section>
+</section>
 
-  <main>
+<main>
+    <!-- "Container" für die dynamisch geladenen Produktkarten -->
     <section class="card-grid" id="products">
-      <!-- Dynamische Produkte -->
+        <!-- Produkte werden hier eingefügt -->
     </section>
-  </main>
+</main>
 
-  <script>
-    fetch('/api/products')
-            .then(res => res.json())
-            .then(products => {
-              const container = document.getElementById('products');
-              container.innerHTML = ''; // sicherheitshalber leeren
+<!-- Fußzeiele -->
+<div id="footer"></div>
 
-              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);
-              });
-            })
-            .catch(err => {
-              console.error('Fehler beim Laden der Produkte:', err);
+<script>
+  // Funktion zum Hinzufügen zum Warenkorb
+  function zumWarenkorbHinzufuegen(product) {
+        let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
 
-              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>`;
+        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
             });
-  </script>
+        }
 
-  <!-- Fußzeiele -->
-  <div id="footer"></div>
+        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 = '';
+
+            // 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.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 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>`;
+        });
+</script>
 </body>
 </html>
\ No newline at end of file
diff --git a/public/shop/shop_lkw.html b/public/shop/shop_lkw.html
index 8bc028e..35e0038 100644
--- a/public/shop/shop_lkw.html
+++ b/public/shop/shop_lkw.html
@@ -1,60 +1,108 @@
+<!--
+  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>
-  <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 - 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>
-<!-- Header -->
-<div id="header-placeholder"></div>
+<div class="wrapper">
+    <!-- Header -->
+    <div id="header"></div>
 
-<!-- Hauptinhalt -->
-<section style="padding: 0px 30px; text-align: left;">
-  <h1>Unsere LKW Produkte</h1>
-</section>
-<section class="card-grid" id="products_lkw">
-  <!-- Dynamische Produkte (filtern nach Motorrad) -->
-</section>
+    <!-- Hauptinhalt -->
+    <main>
+        <section style="padding: 0px 30px; text-align: left;">
+            <h1>Unsere LKW Produkte</h1>
+        </section>
+
+        <section class="card-grid" id="products_lkw">
+            <!-- Dynamische Produkte (filtern nach Motorrad) -->
+        </section>
+    </main>
+
+    <!-- Fußzeiele -->
+    <div id="footer"></div>
+</div>
 
 <script>
-  fetch('/api/products/lkw')
-          .then(res => res.json())
-          .then(products => {
-            const container = document.getElementById('products_lkw');
-            container.innerHTML = ''; // sicherheitshalber leeren
+    // 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 = '';
+
+            // 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);
             });
-          })
-          .catch(err => {
+        })
+        // Fehlerbehandlung
+        .catch(err => {
             console.error('Fehler beim Laden der Produkte:', err);
 
-            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>`;
-          });
+            // 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>`;
+        });
 </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 cace4c7..6dec727 100644
--- a/public/shop/shop_motorrad.html
+++ b/public/shop/shop_motorrad.html
@@ -1,61 +1,105 @@
+<!--
+  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>
-<!-- Header -->
-<div id="header-placeholder"></div>
+<div class="wrapper">
+    <!-- Header -->
+    <div id="header"></div>
 
-<!-- Hauptinhalt -->
-<section style="padding: 0px 30px; text-align: left;">
-  <h1>Unsere Motorrad Produkte</h1>
-</section>
-<section class="card-grid" id="products_motorrad">
-  <!-- Dynamische Produkte (filtern nach Motorrad) -->
-</section>
+    <!-- Hauptinhalt -->
+    <main class="main-content">
+        <section style="padding: 0px 30px; text-align: left;">
+            <h1>Unsere Motorrad Produkte</h1>
+        </section>
 
+        <section class="card-grid" id="products_motorrad">
+            <!-- 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);
             });
-          })
-          .catch(err => {
+        })
+        // Fehlermeldung
+        .catch(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>`;
-          });
+            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
+</html>
diff --git a/public/shop/shop_oldtimer.html b/public/shop/shop_oldtimer.html
index 27e27c4..1fdc1ca 100644
--- a/public/shop/shop_oldtimer.html
+++ b/public/shop/shop_oldtimer.html
@@ -1,60 +1,110 @@
+<!--
+  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>
-  <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 - 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>
-  <!-- Header -->
-  <div id="header-placeholder"></div>
+<div class="wrapper">
+    <!-- Header -->
+    <div id="header"></div>
 
-  <!-- Hauptinhalt -->
-  <section style="padding: 0px 30px; text-align: left;">
-    <h1>Unsere Oldtimer Produkte</h1>
-  </section>
-  <section class="card-grid" id="products_oldtimer">
-    <!-- Dynamische Produkte (filtern nach Motorrad) -->
-  </section>
+    <!-- Hauptinhalt -->
+    <main class="main-content">
+        <section style="padding: 0px 30px; text-align: left;">
+            <h1>Unsere Oldtimer Produkte</h1>
+        </section>
+
+        <section class="card-grid" id="products_oldtimer">
+            <!-- Produkte -->
+        </section>
+    </main>
+
+    <!-- Fußzeile -->
+    <div id="footer"></div>
+</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')) || [];
 
-              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);
-              });
-            })
-            .catch(err => {
-              console.error('Fehler beim Laden der Produkte:', err);
+        const existingProduct = warenkorb.find(p => p.product_id === product.id);
 
-              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>`;
+        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>
+        }
 
-  <!-- Fußzeiele -->
-  <div id="footer"></div>
+        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.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 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>`;
+        });
+</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 28c645a..52c44b4 100644
--- a/public/shop/shop_sportwagen.html
+++ b/public/shop/shop_sportwagen.html
@@ -1,65 +1,107 @@
+<!--
+  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 -->
-  <section style="padding: 0px 30px; text-align: left;">
-    <h1>Unsere Sportwagen Produkte</h1>
-  </section>
+    <!-- Hauptinhalt -->
+    <main>
+        <section style="padding: 0px 30px; text-align: left;">
+            <h1>Unsere Sportwagen Produkte</h1>
+        </section>
 
-  <section class="card-grid" id="products_sportwagen">
-    <!-- Dynamische Produkte oder Fehlermeldung -->
-  </section>
+        <section class="card-grid" id="products_sportwagen">
+            <!-- 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);
             });
-          })
-          .catch(err => {
+        })
+        // Fehlermeldung
+        .catch(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>
-        `;
-          });
+                <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 7106aae..8118b61 100644
--- a/public/startseite/startseite.html
+++ b/public/startseite/startseite.html
@@ -1,17 +1,25 @@
+<!--
+  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 id="header"></div>
 
     <main>
         <!-- Infobereich -->
@@ -25,49 +33,75 @@
         <!-- Hauptinhalt -->
         <h1>Unsere Neusten Produkte: </h1>
         <section class="card-grid" id="latest-products">
-            <!-- Dynamische Produkte (5 aktuelle Produkte) -->
+            <!-- Dynamische Produkte (5 neuesten Produkte) -->
         </section>
 
         <!-- JavaScript zum Abrufen und Anzeigen der neuesten Produkte -->
         <script>
-            // API-Aufruf
+            // 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/new')
-                // Antwort als JSON parsen
                 .then(res => res.json())
                 .then(products => {
                     const container = document.getElementById('latest-products');
-                    container.innerHTML = ''; // sicherheitshalber leeren
+                    container.innerHTML = '';
 
-                    // 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
+                    <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 neuesten Produkte:', 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>`;
+                    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 -->
+        <!-- Infobereich mit den Vorteilen -->
         <section class="info-cards-section">
             <div class="info-card">
                 <i class='bx bx-package'></i>
@@ -96,7 +130,5 @@
     <div id="footer"></div>
 
 </div>
-<!-- Scripts -->
-<script src="startseite.js"></script>
 </body>
 </html>
diff --git a/scripts/einfügenHeaderFooter.js b/scripts/einfügenHeaderFooter.js
index 08ad09d..2f9868a 100644
--- a/scripts/einfügenHeaderFooter.js
+++ b/scripts/einfügenHeaderFooter.js
@@ -1,16 +1,31 @@
+/**
+ * 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();
             })
             .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 +37,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 +57,19 @@ 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);
+    }
+});
\ No newline at end of file
diff --git a/scripts/routes/other/route-index.js b/scripts/routes/other/route-index.js
index 2e2c394..0418bcc 100644
--- a/scripts/routes/other/route-index.js
+++ b/scripts/routes/other/route-index.js
@@ -60,13 +60,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'));
 })
diff --git a/server.js b/server.js
index 7f40dd3..249c18b 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,7 +135,7 @@ 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 user (name, lower_name, email, passwd, passwd_hash_algo) VALUES (?, ?, ?, ?, 'none')"
+    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) => {
@@ -163,49 +168,134 @@ 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})
     })
 })
 
 app.post('/api/bestellung', (req, res) => {
+    const { user_id, produkte } = req.body;
+    // produkte erwartet als Array: [{product_id: 1, quantity: 2}, {product_id: 5, quantity: 1}, ...]
 
-    const { user_id, product_id} = req.body;
-    const sql = 'INSERT INTO order_items (user_id, product_id, quantity) VALUES (?, ?, 1)'
+    if (!user_id || !Array.isArray(produkte) || produkte.length === 0) {
+        return res.status(400).json({ message: 'Ungültige Anfrage: user_id oder Produkte fehlen.' });
+    }
 
+    // Preise der Produkte abrufen
+    const productIds = produkte.map(p => p.product_id);
 
-    db.query(sql, [user_id, product_id], (err, results) => {
-        if (err || results.length === 0) {
-            console.error('Fehler beim Abrufen des Produkts: ', err);
-            return res.status(500).json({ message: 'Produkt nicht gefunden oder Serverfehler' });
+    const priceQuery = 'SELECT id, price FROM webshop.product WHERE id IN (?)';
+    db.query(priceQuery, [productIds], (err, priceResults) => {
+        if (err) {
+            console.error('Fehler beim Abrufen der Produktpreise:', err);
+            return res.status(500).json({ message: 'Serverfehler beim Abrufen der Produktpreise.' });
         }
-        res.status(201).json({message: 'Produkt bestellt', id: results.insertId})
+
+        if (priceResults.length !== productIds.length) {
+            return res.status(400).json({ message: 'Eines oder mehrere Produkte existieren nicht.' });
+        }
+
+        // Total berechnen
+        let total = 0;
+        produkte.forEach(p => {
+            const dbProduct = priceResults.find(pr => pr.id === p.product_id);
+            if (dbProduct) {
+                total += dbProduct.price * p.quantity;
+            }
+        });
+
+        const payment_id = 1; // Zahlungssystem-ID (z.B. 1 = Rechnung, 2 = PayPal, ...)
+
+        const sqlOrder = 'INSERT INTO webshop.order_details (user_id, payment_id, total) VALUES (?, ?, ?)';
+        db.query(sqlOrder, [user_id, payment_id, total], (err1, result1) => {
+            if (err1) {
+                console.error('Fehler beim Erstellen der Bestellung:', err1);
+                return res.status(500).json({ message: 'Fehler beim Erstellen der Bestellung.' });
+            }
+
+            const orderId = result1.insertId;
+
+            const values = produkte.map(p => [user_id, p.product_id, p.quantity, orderId]);
+            const sqlItems = 'INSERT INTO webshop.order_items (user_id, product_id, quantity, order_id) VALUES ?';
+
+            db.query(sqlItems, [values], (err2, result2) => {
+                if (err2) {
+                    console.error('Fehler beim Einfügen der Order-Items:', err2);
+                    return res.status(500).json({ message: 'Fehler beim Hinzufügen der Produkte zur Bestellung.' });
+                }
+
+                res.status(201).json({ message: 'Bestellung erfolgreich!', order_id: orderId, total: total.toFixed(2) });
+            });
+        });
     });
 });
 
-app.get('/api/bestellung/daten', (req, res) => {
+app.post('/api/bestellung/daten', (req, res) => {
+    const { user_id } = req.body;
 
-    const user_id = req.body;
+    const sql = `
+        SELECT 
+            od.id AS order_id,
+            od.total AS order_total,
+            oi.product_id,
+            oi.quantity,
+            p.name AS product_name,
+            p.price AS product_price
+        FROM 
+            webshop.order_details od
+        INNER JOIN 
+            webshop.order_items oi ON od.id = oi.order_id
+        INNER JOIN 
+            webshop.product p ON oi.product_id = p.id
+        WHERE 
+            od.user_id = ?
+        ORDER BY 
+            od.id DESC
+    `;
 
-    const sql = 'SELECT * FROM order_items WHERE user_id = ? '
     db.query(sql, [user_id], (err, results) => {
         if (err) {
-            console.error('Fehler beim Abrufen der Bestellung: ', err);
-            return res.status(500).json({ message: 'Fehler beim Abrufen der Bestellung' });
+            console.error('Fehler beim Abrufen der Bestellungen: ', err);
+            return res.status(500).json({ message: 'Fehler beim Abrufen der Bestellungen' });
         }
 
         if (results.length === 0) {
-            return res.status(404).json({ message: 'Keine Bestellung gefunden' });
+            return res.status(404).json({ message: 'Keine Bestellungen gefunden.' });
         }
 
         res.json(results);
     });
 });
 
+app.get('/api/pruefe-artikel', (req, res) => {
+    const artikelnummer = req.query.nummer;
+
+    if (!artikelnummer) {
+        return res.status(400).json({ error: 'Keine Artikelnummer angegeben.' });
+    }
+
+    const query = 'SELECT id FROM product WHERE id = ?';
+
+    db.query(query, [artikelnummer], (err, results) => {
+        if (err) {
+            console.error('Fehler bei der Artikelsuche:', err);
+            return res.status(500).json({ error: 'Serverfehler bei der Artikelsuche.' });
+        }
+
+        const verfuegbar = results.length > 0;
+        res.json({ verfuegbar });
+    });
+});
+
 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/login/login.css b/static/Styles/login/login.css
index d5072e2..8eae58a 100644
--- a/static/Styles/login/login.css
+++ b/static/Styles/login/login.css
@@ -9,13 +9,6 @@
     margin: 50px auto; /* Zentriert das Formular */
 }
 
-.login-title {
-    font-size: 26px;
-    font-weight: 600;
-    margin-bottom: 25px;
-    color: #333;
-}
-
 .login-form .input-group {
     position: relative;
     margin-bottom: 20px;
diff --git a/static/Styles/registrieren/registrieren.css b/static/Styles/registrieren/registrieren.css
index ab7b9c0..de4ccbb 100644
--- a/static/Styles/registrieren/registrieren.css
+++ b/static/Styles/registrieren/registrieren.css
@@ -4,7 +4,7 @@
     min-height: 100vh;
 }
 
-.wrapper {
+.register-wrapper {
     max-width: 400px;
     width: 100%;
     padding: 30px;
@@ -21,6 +21,7 @@
     align-items: center;
     padding: 40px 20px;
 }
+
 .registration-container {
     max-width: 400px;
     margin: 60px auto;
@@ -49,22 +50,6 @@
     box-sizing: border-box;
 }
 
-.registration-container button[type="submit"] {
-    width: 100%;
-    padding: 10px;
-    background-color: #007bff;
-    color: white;
-    border: none;
-    border-radius: 8px;
-    font-size: 1em;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-
-.registration-container button[type="submit"]:hover {
-    background-color: #0056b3;
-}
-
 .register-link {
     text-align: center;
     font-size: 14px;
@@ -81,3 +66,16 @@
     text-decoration: underline;
 }
 
+.register-btn {
+    width: 100%;
+    padding: 12px;
+    background: #ff6600;
+    color: white;
+    border: none;
+    border-radius: 25px;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.3s ease;
+}
+
diff --git a/static/Styles/styles-main.css b/static/Styles/styles-main.css
index a62ee29..a739343 100644
--- a/static/Styles/styles-main.css
+++ b/static/Styles/styles-main.css
@@ -41,7 +41,13 @@ header {
 .logo-container {
     display: flex;
     align-items: center;
-    gap: 15px;
+    text-decoration: none;
+    color: inherit;
+}
+
+.logo-container h1 {
+    margin-left: 10px;
+    font-size: 1.8rem;
 }
 
 .logo-img {
@@ -49,6 +55,11 @@ header {
     object-fit: contain;
 }
 
+.logo-link {
+    text-decoration: none;
+    color: inherit;
+}
+
 header h1 {
     font-size: 30px;
     color: #333;
@@ -283,6 +294,14 @@ main {
     margin-bottom: 20px;
 }
 
+.title {
+    font-size: 26px;
+    font-weight: 600;
+    margin-bottom: 25px;
+    color: #333;
+    text-align: center;
+}
+
 .input-box input {
     width: 100%;
     padding: 12px 40px 12px 15px;
@@ -377,7 +396,7 @@ h1 {
     color: #b00020;
     border: 1px solid #ffcccc;
     border-radius: 12px;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     text-align: center;
     font-family: inherit;
     animation: fadeIn 0.6s ease-in-out;
@@ -395,8 +414,14 @@ h1 {
 
 /* Optional: weiche Animation beim Einblenden */
 @keyframes fadeIn {
-    from { opacity: 0; transform: translateY(20px); }
-    to { opacity: 1; transform: translateY(0); }
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }