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 048152c..9b8ae8b 100644
--- a/public/bestellformular/bestellformular.html
+++ b/public/bestellformular/bestellformular.html
@@ -20,13 +20,13 @@
                 <h2>Bestellformular</h2>
 
                 <label for="vorname">Vorname:</label>
-                <input type="text" id="Vorname" name="Vorname" required placeholder="Vorname">
+                <input type="text" id="Vorname" name="Vorname" required placeholder=" - Vorname -" readonly>
 
                 <label for="nachname">Nachname:</label>
-                <input type="text" id="Nachname" name="Nachname" required placeholder="Nachname">
+                <input type="text" id="Nachname" name="Nachname" required placeholder="- Nachname -" readonly>
 
                 <label for="kundenNr">Kunden Nr.:</label>
-                <input type="text" id="KundenNr" name="KundenNr" required placeholder="Kunden Nr.">
+                <input type="text" id="KundenNr" name="KundenNr" required placeholder="- Kunden Nr. -" readonly>
 
                 <label for="strasse">Straße:</label>
                 <input type="text" id="strasse" name="strasse" required placeholder="Strasse">
@@ -40,10 +40,8 @@
                 <label for="ArtikelNr">Artikel Nr.:</label>
                 <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">
+                    <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>
 
@@ -79,6 +77,11 @@
                         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>
@@ -86,10 +89,31 @@
     </main>
 
     <script>
+        const user_id = sessionStorage.getItem('user_id');
+        const email = sessionStorage.getItem('email');
+        const vorname = sessionStorage.getItem('vorname');
+        const nachname = sessionStorage.getItem('nachname');
+
+
         document.addEventListener('DOMContentLoaded', function () {
             const formular = document.getElementById('bestellform');
+            const kundenNrInput = document.getElementById('KundenNr');
+            const VornameInput = document.getElementById('Vorname');
+            const NachnameInput = document.getElementById('Nachname');
+            if (kundenNrInput, VornameInput, NachnameInput) {
+                kundenNrInput.value = user_id;
+                VornameInput.value = vorname;
+                NachnameInput.value = nachname;
+            }
+
+            console.log("User ID from sessionStorage:", user_id);
+            console.log("E-Mail from sessionStorage:", email);
+            console.log("Vorname from sessionStorage:", vorname);
+            console.log("Nachname from sessionStorage:", nachname);
+
+
             const sendButton = document.getElementById('sendOrder');
-            let artikelVerfuegbarkeiten = [];
+            ladeWarenkorb();
 
             // Bestellung absenden
             sendButton.addEventListener('click', async function (event) {
@@ -184,7 +208,7 @@
                 const data = await response.json();
 
                 const artikelDivs = document.querySelectorAll('.Artikel');
-                artikelVerfuegbarkeiten = [];
+                let artikelVerfuegbarkeiten = [];
 
                 artikelDivs.forEach(div => {
                     const artikelNrInput = div.querySelector('.ArtikelNrText');
@@ -254,6 +278,31 @@
             artikelDiv.remove();
         }
 
+        function ladeWarenkorb() {
+            // RICHTIG lesen: aus localStorage (nicht sessionStorage!)
+            const warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
+
+            const formular = document.getElementById('bestellform');
+            const sendButton = document.getElementById('sendOrder');
+
+            if (warenkorb.length === 0) {
+                console.log('Kein Warenkorb gefunden oder Warenkorb ist leer.');
+                return;
+            }
+
+            warenkorb.forEach(produkt => {
+                const artikelDiv = document.createElement('div');
+                artikelDiv.className = 'Artikel';
+                artikelDiv.innerHTML = `
+                    <button type="button" class="loeschen-button" onclick="loescheArtikel(this)">x</button>
+                    <input type="text" class="ArtikelNrText" name="ArtikelNr" value="${produkt.product_id}" required placeholder="Artikel Nr.">
+                    <input type="text" class="StueckzahlText" name="Stueckzahl" value="${produkt.quantity}" required placeholder="Anzahl">
+                    <div class="verfuegbarkeit"></div>
+                `;
+                formular.insertBefore(artikelDiv, sendButton);
+            });
+        }
+
     </script>
     <!-- Footer wird dynamisch geladen -->
     <div id="footer"></div>
diff --git a/public/header_footer/header.html b/public/header_footer/header.html
index 40e272c..476eaf5 100644
--- a/public/header_footer/header.html
+++ b/public/header_footer/header.html
@@ -21,7 +21,7 @@
         <!-- 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">0</span>
+            <span class="cart-count" id="cart-count">0</span>
         </a>
     </div>
   </div>
diff --git a/public/login/login.html b/public/login/login.html
index 08c1c7b..92f7e6e 100644
--- a/public/login/login.html
+++ b/public/login/login.html
@@ -43,7 +43,7 @@
             </div>
 
             <!-- Login-Button -->
-            <button type="submit" class="login-btn">Login</button>
+            <button type="submit" class="login-btn" id="submit">Login</button>
 
             <!-- Link zur Registrierungsseite -->
             <p class="register-text">
@@ -71,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 {
diff --git a/public/registrieren/registrieren.html b/public/registrieren/registrieren.html
index 692e036..53f69e4 100644
--- a/public/registrieren/registrieren.html
+++ b/public/registrieren/registrieren.html
@@ -101,6 +101,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('Nutzer erfolgreich hinzugefügt! Ihre Kundennummer: ' + data.id)
                     window.location.href = '/'
                 } else {
diff --git a/public/shop/shop.html b/public/shop/shop.html
index eadd094..2d81b71 100644
--- a/public/shop/shop.html
+++ b/public/shop/shop.html
@@ -37,12 +37,35 @@
 <div id="footer"></div>
 
 <script>
+  // Funktion zum Hinzufügen zum Warenkorb
+  function zumWarenkorbHinzufuegen(product) {
+        let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
+
+        const existingProduct = warenkorb.find(p => p.product_id === product.id);
+
+        if (existingProduct) {
+            existingProduct.quantity += 1; // Wenn schon vorhanden, Anzahl erhöhen
+        } else {
+            warenkorb.push({
+                product_id: product.id,
+                product_name: product.name,
+                price: product.price,
+                quantity: 1
+            });
+        }
+
+        localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
+        alert(`${product.name} wurde zum Warenkorb hinzugefügt!`);
+        zeigeWarenkorbAnzahl();
+    }
+
+    // Produkte laden
     // Daten von der API abrufen
     fetch('/api/products')
         .then(res => res.json())
         .then(products => {
             const container = document.getElementById('products');
-            container.innerHTML = ''; // sicherheitshalber leeren
+            container.innerHTML = '';
 
             // Für jedes Produkt eine eigene Karte erstellen und einfügen
             products.forEach(product => {
@@ -52,28 +75,35 @@
                 card.classList.add('card');
                 // HTML-Struktur der Produktkarte
                 card.innerHTML = `
-                      <img src="${product.image_url}" alt="${product.name}">
-                      <h3>${product.name}</h3>
-                      <p>Preis: ${product.price}€</p>
-                      <p>${product.description}</p>
-                      <p>Artikel Nr: ${product.id}</p>
-                      <button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
-                  `;
+                    <img src="${product.image_url}" alt="${product.name}">
+                    <h3>${product.name}</h3>
+                    <p>Preis: ${product.price.toFixed(2)} €</p>
+                    <p>${product.description}</p>
+                    <p>Artikel Nr: ${product.id}</p>
+                    <button class="add-to-cart">Zum Warenkorb hinzufügen</button>
+                `;
+
+                const addToCartButton = card.querySelector('.add-to-cart');
+                addToCartButton.addEventListener('click', () => {
+                    zumWarenkorbHinzufuegen(product);
+                });
+
                 // Karte in den Container einfügen
                 container.appendChild(card);
             });
         })
         // Fehlermeldung
         .catch(err => {
-            console.error('Fehler beim Laden der Shop_Produkte:', err);
+            console.error('Fehler beim Laden der Produkte:', err);
 
             // Fehlermeldung auf der Seite anzeigen
             const container = document.getElementById('products');
-            container.innerHTML =
-                `<div class="error-message">
-                            <h3>Fehler beim Laden der Produkte</h3>
-                            <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
-                        </div>`;
+            container.innerHTML = `
+                <div class="error-message">
+                    <h3>Fehler beim Laden der Produkte</h3>
+                    <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
+                        Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
+                </div>`;
         });
 </script>
 </body>
diff --git a/public/shop/shop_lkw.html b/public/shop/shop_lkw.html
index 0f15d10..35e0038 100644
--- a/public/shop/shop_lkw.html
+++ b/public/shop/shop_lkw.html
@@ -39,39 +39,68 @@
 
 <script>
     // API-Abfrage, um Lkw-Produkte zu laden
+  // Funktion zum Hinzufügen zum Warenkorb
+  function zumWarenkorbHinzufuegen(product) {
+        let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
+
+        const existingProduct = warenkorb.find(p => p.product_id === product.id);
+
+        if (existingProduct) {
+            existingProduct.quantity += 1; // Wenn schon vorhanden, Anzahl erhöhen
+        } else {
+            warenkorb.push({
+                product_id: product.id,
+                product_name: product.name,
+                price: product.price,
+                quantity: 1
+            });
+        }
+
+        localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
+        alert(`${product.name} wurde zum Warenkorb hinzugefügt!`);
+        zeigeWarenkorbAnzahl();
+    }
+
+    // Produkte laden
     fetch('/api/products/lkw')
         .then(res => res.json())
         .then(products => {
             const container = document.getElementById('products_lkw');
-            container.innerHTML = ''; // sicherheitshalber leeren
+            container.innerHTML = '';
 
             // Für jedes Produkt eine Karte erstellen
             products.forEach(product => {
-              const card = document.createElement('div');
-              card.classList.add('card');
-              card.innerHTML = `
+                const card = document.createElement('div');
+                card.classList.add('card');
+                card.innerHTML = `
                     <img src="${product.image_url}" alt="${product.name}">
                     <h3>${product.name}</h3>
-                    <p>Preis: ${product.price}€</p>
+                    <p>Preis: ${product.price.toFixed(2)} €</p>
                     <p>${product.description}</p>
                     <p>Artikel Nr: ${product.id}</p>
-                    <button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
+                    <button class="add-to-cart">Zum Warenkorb hinzufügen</button>
                 `;
-              container.appendChild(card);
+
+                const addToCartButton = card.querySelector('.add-to-cart');
+                addToCartButton.addEventListener('click', () => {
+                    zumWarenkorbHinzufuegen(product);
+                });
+
+                container.appendChild(card);
             });
         })
         // Fehlerbehandlung
         .catch(err => {
-            console.error('Fehler beim Laden der LKW_Produkte:', err);
+            console.error('Fehler beim Laden der Produkte:', err);
 
             // Anzeige einer Fehlermeldung auf der Webseite
             const container = document.getElementById('products_lkw');
-            container.innerHTML =
-                `<div class="error-message">
-                <h3>Fehler beim Laden der Produkte</h3>
-                <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
-                   Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
-              </div> `;
+            container.innerHTML = `
+                <div class="error-message">
+                    <h3>Fehler beim Laden der Produkte</h3>
+                    <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
+                        Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
+                </div>`;
         });
 </script>
 
diff --git a/public/shop/shop_motorrad.html b/public/shop/shop_motorrad.html
index 5af6521..6dec727 100644
--- a/public/shop/shop_motorrad.html
+++ b/public/shop/shop_motorrad.html
@@ -38,38 +38,67 @@
 </div>
 
 <script>
-  fetch('/api/products/motorrad')
-          .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/motorrad')
+        .then(res => res.json())
+        .then(products => {
             const container = document.getElementById('products_motorrad');
-            container.innerHTML = ''; // sicherheitshalber leeren
+            container.innerHTML = '';
 
             // Für jedes Produkt eine Karte erstellen
             products.forEach(product => {
-              const card = document.createElement('div');
-              card.classList.add('card');
-              card.innerHTML = `
+                const card = document.createElement('div');
+                card.classList.add('card');
+                card.innerHTML = `
                     <img src="${product.image_url}" alt="${product.name}">
                     <h3>${product.name}</h3>
-                    <p>Preis: ${product.price}€</p>
+                    <p>Preis: ${product.price.toFixed(2)} €</p>
                     <p>${product.description}</p>
                     <p>Artikel Nr: ${product.id}</p>
-                    <button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
+                    <button class="add-to-cart">Zum Warenkorb hinzufügen</button>
                 `;
-              container.appendChild(card);
+
+                const addToCartButton = card.querySelector('.add-to-cart');
+                addToCartButton.addEventListener('click', () => {
+                    zumWarenkorbHinzufuegen(product);
+                });
+
+                container.appendChild(card);
             });
         })
         // Fehlermeldung
         .catch(err => {
-            console.error('Fehler beim Laden der Motorrad_Produkte:', err);
+            console.error('Fehler beim Laden der Produkte:', err);
 
-            // Fehlermeldung auf der Seite anzeigen
             const container = document.getElementById('products_motorrad');
             container.innerHTML = `
-          <div class="error-message">
-            <h3>Fehler beim Laden der Produkte</h3>
-            <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
-          </div>`;
+                <div class="error-message">
+                    <h3>Fehler beim Laden der Produkte</h3>
+                    <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
+                        Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
+                </div>`;
         });
 </script>
 </body>
diff --git a/public/shop/shop_oldtimer.html b/public/shop/shop_oldtimer.html
index 2a6155d..1fdc1ca 100644
--- a/public/shop/shop_oldtimer.html
+++ b/public/shop/shop_oldtimer.html
@@ -37,7 +37,30 @@
     <div id="footer"></div>
 </div>
 
-<script>
+  <script>
+  // Funktion zum Hinzufügen zum Warenkorb
+  function zumWarenkorbHinzufuegen(product) {
+        let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
+
+        const existingProduct = warenkorb.find(p => p.product_id === product.id);
+
+        if (existingProduct) {
+            existingProduct.quantity += 1; // Wenn schon vorhanden, Anzahl erhöhen
+        } else {
+            warenkorb.push({
+                product_id: product.id,
+                product_name: product.name,
+                price: product.price,
+                quantity: 1
+            });
+        }
+
+        localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
+        alert(`${product.name} wurde zum Warenkorb hinzugefügt!`);
+        zeigeWarenkorbAnzahl();
+    }
+
+    // Produkte laden
     fetch('/api/products/oldtimer')
         .then(res => res.json())
         .then(products => {
@@ -52,27 +75,35 @@
                 card.classList.add('card');
                 // Die Karte mit Produktdaten füllen
                 card.innerHTML = `
-                      <img src="${product.image_url}" alt="${product.name}">
-                      <h3>${product.name}</h3>
-                      <p>Preis: ${product.price}€</p>
-                      <p>${product.description}</p>
-                      <p>Artikel Nr: ${product.id}</p>
-                      <button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
-                  `;
+                    <img src="${product.image_url}" alt="${product.name}">
+                    <h3>${product.name}</h3>
+                    <p>Preis: ${product.price.toFixed(2)} €</p>
+                    <p>${product.description}</p>
+                    <p>Artikel Nr: ${product.id}</p>
+                    <button class="add-to-cart">Zum Warenkorb hinzufügen</button>
+                `;
+
+                const addToCartButton = card.querySelector('.add-to-cart');
+                addToCartButton.addEventListener('click', () => {
+                    zumWarenkorbHinzufuegen(product);
+                });
+
                 container.appendChild(card);
             });
         })
         // Fehlerbehandlung
         .catch(err => {
-            console.error('Fehler beim Laden der Oldtimer_Produkte:', err);
+            console.error('Fehler beim Laden der Produkte:', err);
 
             // Anzeige einer Fehlermeldung auf der Webseite
+
             const container = document.getElementById('products_oldtimer');
             container.innerHTML = `
-          <div class="error-message">
-            <h3>Fehler beim Laden der Produkte</h3>
-            <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
-          </div>`;
+                <div class="error-message">
+                    <h3>Fehler beim Laden der Produkte</h3>
+                    <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
+                        Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
+                </div>`;
         });
 </script>
 </body>
diff --git a/public/shop/shop_sportwagen.html b/public/shop/shop_sportwagen.html
index bcc3e6d..52c44b4 100644
--- a/public/shop/shop_sportwagen.html
+++ b/public/shop/shop_sportwagen.html
@@ -38,42 +38,70 @@
 </div>
 
 <script>
-    // API-Anfrage, um Sportwagen-Produkte zu laden
-  fetch('/api/products/sportwagen')
-          .then(res => res.json())
-          .then(products => {
+  // Funktion zum Hinzufügen zum Warenkorb
+    function zumWarenkorbHinzufuegen(product) {
+        let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
+
+        const existingProduct = warenkorb.find(p => p.product_id === product.id);
+
+        if (existingProduct) {
+            existingProduct.quantity += 1; // Wenn schon vorhanden, Anzahl erhöhen
+        } else {
+            warenkorb.push({
+                product_id: product.id,
+                product_name: product.name,
+                price: product.price,
+                quantity: 1
+            });
+        }
+
+        localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
+        alert(`${product.name} wurde zum Warenkorb hinzugefügt!`);
+        zeigeWarenkorbAnzahl();
+    }
+
+    // Produkte laden
+    fetch('/api/products/sportwagen')
+        .then(res => res.json())
+        .then(products => {
             const container = document.getElementById('products_sportwagen');
             container.innerHTML = '';
 
             // Für jedes Produkt eine Karte erstellen
             products.forEach(product => {
-              const card = document.createElement('div');
-              card.classList.add('card');
-              card.innerHTML = `
-            <img src="${product.image_url}" alt="${product.name}">
-            <h3>${product.name}</h3>
-            <p>Preis: ${product.price}€</p>
-            <p>${product.description}</p>
-            <p>Artikel Nr: ${product.id}</p>
-            <button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
-          `;
-              container.appendChild(card);
+                const card = document.createElement('div');
+                card.classList.add('card');
+                card.innerHTML = `
+                    <img src="${product.image_url}" alt="${product.name}">
+                    <h3>${product.name}</h3>
+                    <p>Preis: ${product.price.toFixed(2)} €</p>
+                    <p>${product.description}</p>
+                    <p>Artikel Nr: ${product.id}</p>
+                    <button class="add-to-cart">Zum Warenkorb hinzufügen</button>
+                `;
+
+                const addToCartButton = card.querySelector('.add-to-cart');
+                addToCartButton.addEventListener('click', () => {
+                    zumWarenkorbHinzufuegen(product);
+                });
+
+                container.appendChild(card);
             });
         })
         // Fehlermeldung
         .catch(err => {
-            console.error('Fehler beim Laden der Sportwagen_Produkte:', err);
+            console.error('Fehler beim Laden der Produkte:', err);
 
             // Fehlermeldung auf der Seite anzeigen
             const container = document.getElementById('products_sportwagen');
-            container.innerHTML =
-                `<div class="error-message">
-              <h3>Fehler beim Laden der Produkte</h3>
-              <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
-                 Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
-            </div> `;
+            container.innerHTML = `
+                <div class="error-message">
+                    <h3>Fehler beim Laden der Produkte</h3>
+                    <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
+                        Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
+                </div>`;
         });
 </script>
 
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/public/startseite/startseite.html b/public/startseite/startseite.html
index 4200fdd..c9ec7b2 100644
--- a/public/startseite/startseite.html
+++ b/public/startseite/startseite.html
@@ -38,41 +38,66 @@
 
             <!-- JavaScript zum Abrufen und Anzeigen der neuesten Produkte -->
             <script>
-                // API-Aufruf
-                fetch('/api/products/new')
-                    // Antwort als JSON parsen
-                    .then(res => res.json())
-                    .then(products => {
-                        const container = document.getElementById('latest-products');
-                        container.innerHTML = ''; // sicherheitshalber leeren
+    // Funktion zum Hinzufügen zum Warenkorb
+    function zumWarenkorbHinzufuegen(product) {
+        let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
 
-                        // Für jedes Produkt eine eigene Karte erzeugen
-                        products.forEach(product => {
-                            const card = document.createElement('div');
-                            card.classList.add('card');
-                            // HTML-Inhalt der Karte mit Produktdaten füllen
-                            card.innerHTML = `
-                            <img src="${product.image_url}" alt="${product.name}">
-                            <h3>${product.name}</h3>
-                            <p>Preis: ${product.price}€</p>
-                            <p>${product.description}</p>
-                            <button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
-                        `;
-                            // Karte in Container einfügen
-                            container.appendChild(card);
-                        });
-                    })
-                    // Fehlerbehandlung bei API-Aufruf
-                    .catch(err => {
-                        console.error('Fehler beim Laden der neuesten Produkte:', err);
+        const existingProduct = warenkorb.find(p => p.product_id === product.id);
 
-                        const container = document.getElementById('latest-products');
-                        container.innerHTML =
-                        `<div class="error-message">
-                            <h3>Fehler beim Laden der Produkte</h3>
-                            <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
-                        </div>`;
-                    });
+        if (existingProduct) {
+            existingProduct.quantity += 1; // Wenn schon vorhanden, Anzahl erhöhen
+        } else {
+            warenkorb.push({
+                product_id: product.id,
+                product_name: product.name,
+                price: product.price,
+                quantity: 1
+            });
+        }
+
+        localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
+        alert(`${product.name} wurde zum Warenkorb hinzugefügt!`);
+        zeigeWarenkorbAnzahl();
+    }
+
+    // Produkte laden
+    fetch('/api/products/new')
+        .then(res => res.json())
+        .then(products => {
+            const container = document.getElementById('latest-products');
+            container.innerHTML = '';
+
+            products.forEach(product => {
+                const card = document.createElement('div');
+                card.classList.add('card');
+                card.innerHTML = `
+                    <img src="${product.image_url}" alt="${product.name}">
+                    <h3>${product.name}</h3>
+                    <p>Preis: ${product.price.toFixed(2)} €</p>
+                    <p>${product.description}</p>
+                    <p>Artikel Nr: ${product.id}</p>
+                    <button class="add-to-cart">Zum Warenkorb hinzufügen</button>
+                `;
+
+                const addToCartButton = card.querySelector('.add-to-cart');
+                addToCartButton.addEventListener('click', () => {
+                    zumWarenkorbHinzufuegen(product);
+                });
+
+                container.appendChild(card);
+            });
+        })
+        .catch(err => {
+            console.error('Fehler beim Laden der Produkte:', err);
+
+            const container = document.getElementById('latest-products');
+            container.innerHTML = `
+                <div class="error-message">
+                    <h3>Fehler beim Laden der Produkte</h3>
+                    <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
+                        Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
+                </div>`;
+        });
             </script>
 
 
diff --git a/scripts/einfügenHeaderFooter.js b/scripts/einfügenHeaderFooter.js
index 0d646ed..a9fb954 100644
--- a/scripts/einfügenHeaderFooter.js
+++ b/scripts/einfügenHeaderFooter.js
@@ -20,6 +20,11 @@ document.addEventListener("DOMContentLoaded", () => {
             .then(data => {
                 // Header-Inhalt in die Seite einfügen
                 headerTarget.innerHTML = data;
+
+                // 🚀 WICHTIG: Jetzt den Warenkorb zählen, nachdem der Header geladen ist!
+                zeigeWarenkorbAnzahl();
+
+                zeigeLoginStatus();
             })
             .catch(error => {
                 // Fehlerbehandlung: Fehlermeldung im Header-Bereich anzeigen
@@ -54,4 +59,40 @@ document.addEventListener("DOMContentLoaded", () => {
                 console.error(error);
             });
     }
-});
+
+    window.zeigeWarenkorbAnzahl = function() {
+        const warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
+        let anzahl = 0;
+    
+        warenkorb.forEach(produkt => {
+            anzahl += produkt.quantity;
+        });
+    
+        const anzahlElement = document.getElementById('cart-count');
+        if (anzahlElement) {
+            anzahlElement.textContent = anzahl;
+        }
+        console.log('Warenkorb-Anzahl:', anzahl);
+    }
+
+    window.zeigeLoginStatus= function (){
+        const userId = sessionStorage.getItem('user_id')
+        const loginBtn = document.querySelector('.login-btn')
+
+        if (!loginBtn) return
+
+        if (userId) {
+            loginBtn.textContent = 'Logout'
+            loginBtn.href = '#'
+            loginBtn.addEventListener('click', (e) => {
+                e.preventDefault()
+                sessionStorage.clear()
+                alert('Sie wurden ausgeloggt.')
+                location.reload()
+            })
+        } else {
+            loginBtn.textContent = 'Login'
+            loginBtn.href= '/login'
+        }
+    }
+});
\ No newline at end of file
diff --git a/server.js b/server.js
index ac0c8a7..6c97d50 100644
--- a/server.js
+++ b/server.js
@@ -168,8 +168,10 @@ app.post('/api/user/login', (req, res) => {
 
         req.session.userId = user.id;
         req.session.email = user.email;
+        req.session.vorname = user.name;
+        req.session.nachname = user.lower_name;
 
-        res.json({message: 'Login erfolgreich', id: user.id})
+        res.json({message: 'Login erfolgreich', id: user.id, name: user.name, lower_name: user.lower_name})
     })
 })