diff --git a/public/404.html b/public/404.html
index 0d4597b..69a558c 100644
--- a/public/404.html
+++ b/public/404.html
@@ -1,21 +1,32 @@
+<!--
+  Eine Seite für die Seiten die nicht vorhanden sind.
+  Fehler 404 - Seite nicht gefunden
+  Zeigt eine Meldung und hat einen Link der zurück zur Startseite führt
+-->
+
 <!DOCTYPE html>
 <html lang="de">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Seite nicht gefunden</title>
+    <!-- Haupt-CSS-Datei -->
     <link rel="stylesheet" href="/Styles/styles-main.css">
+    <!-- Icons -->
     <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
+    <!-- Script zum Laden von Header/Footer -->
     <script src="/header_footer"></script>
 </head>
 <body>
 <div class="wrapper">
     <!-- Header -->
-    <div id="header-placeholder"></div>
+    <div id="header"></div>
 
+    <!-- Hauptinhalt: Fehlermeldung -->
     <main class="content" style="text-align: center; padding: 80px;">
         <h1>🚧 Seite nicht gefunden 🚧</h1>
         <p>Diese Seite existiert nicht oder befindet sich noch in Arbeit.</p>
+        <!-- Button zurück zur Startseite -->
         <a href="/" class="btn" style="width: auto; display: inline-block; margin-top: 20px;">Zur Startseite</a>
     </main>
 
diff --git a/public/bestellformular/bestellformular.html b/public/bestellformular/bestellformular.html
index ccff5aa..999319a 100644
--- a/public/bestellformular/bestellformular.html
+++ b/public/bestellformular/bestellformular.html
@@ -6,12 +6,13 @@
     <title>Bestellformular</title>
     <link rel="stylesheet" href="/Styles/bestellformular/bestellformular.css">
     <link rel="stylesheet" href="./Styles/styles-main.css">
+    <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
     <script src="/header_footer"></script>
 </head>
 <body>
 <div class="wrapper">
     <!-- Header wird hier dynamisch geladen -->
-    <div id="header-placeholder"></div>
+    <div id="header"></div>
 
     <main>
         <div class="form-container">
@@ -37,23 +38,29 @@
                 <input type="text" id="ort" name="ort" required placeholder="Ort">
 
                 <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">
+                    <div class="verfuegbarkeit"></div>
+                </div>
 
                 <style>
-                    .Artikel{
+                    .Artikel {
                         display: flex;
                         align-content: center;
                     }
 
-                    .ArtikelNrText{
+                    .ArtikelNrText {
                         max-width: 50%;
                     }
 
-                    .StueckzahlText{
+                    .StueckzahlText {
                         max-width: 15%;
                         margin-left: 2.5%;
                     }
 
-                    .loeschen-button{
+                    .loeschen-button {
                         background-color: #ff6600;
                         color: white;
                         border: none;
@@ -64,7 +71,7 @@
                         margin-right: 5px;
                     }
 
-                    .verfuegbarkeit{
+                    .verfuegbarkeit {
                         display: flex;
                         align-content: center;
                         max-width: 20%;
diff --git a/public/header_footer/footer.html b/public/header_footer/footer.html
index 4ab756a..521d90b 100644
--- a/public/header_footer/footer.html
+++ b/public/header_footer/footer.html
@@ -1,6 +1,12 @@
-<!-- Fußzeiele -->
+<!--
+  Fußzeile des Webshops
+  Zeigt einen Copyright-Hinweis, die Links zum Impressum und Datenschutz sind verlinkt (keine Funktion)
+-->
+
 <footer class="footer">
+    <!-- Copyright-Hinweis -->
     <p>&copy; 2025 Autohändler Webshop – Alle Rechte vorbehalten</p>
+    <!-- Links zu Impressum und Datenschutz (keine Funktion) -->
     <p>
         <a href="/impressum">Impressum</a> |
         <a href="/datenschutz">Datenschutz</a>
diff --git a/public/header_footer/header.html b/public/header_footer/header.html
index c2db739..476eaf5 100644
--- a/public/header_footer/header.html
+++ b/public/header_footer/header.html
@@ -1,34 +1,60 @@
-<!-- header.html -->
+<!--
+  Header-Bereich Einbindung
+  Zeigt Logo, Link zur Startseite, Warenkorb (beispielhaft, keine Funktion) und Menüleiste an
+-->
 <header>
-  <div class="logo-container">
-    <img src="/images/Logo.png" alt="Modellauto-Shop Logo" class="logo-img">
-    <h1>Modellauto - Shop</h1>
-  </div>
-  <div class="header-right">
-    <a href="/login" class="login-btn">Login</a>
-    <div class="header-right">
+    <!-- Logo und Shop-Titel -->
+    <a href="/" class="logo-link">
+        <div class="logo-container">
+            <img src="/images/Logo.png" alt="Modellauto-Shop Logo" class="logo-img">
+            <h1>Modellauto - Shop</h1>
+        </div>
+    </a>
 
-      <a href="/warenkorb" class="cart">
-        <i class='bx bx-cart'></i>
-        <span class="cart-count" id="cart-count">0</span>
-      </a>
+    <!-- Auf der rechten Seite des Headers befindet sich der Login-Button und der Warenkorb -->
+    <div class="header-right">
+        <!-- Login-Button -->
+        <a href="/login" class="login-btn">
+            <i class='bx bx-user'></i> Login
+        </a>
+
+        <!-- Warenkorb-Button mit Icon und Anzeige der Artikelanzahl (keine Funktion) -->
+        <a href="/warenkorb" class="cart">
+            <i class='bx bx-cart'></i>
+            <span class="cart-count" id="cart-count">0</span>
+        </a>
     </div>
   </div>
 </header>
 
+<!-- Navigationsmenü -->
 <nav class="menu">
-  <ul class="menu-list">
-    <li class="menu-item"><a href="/">Startseite</a></li>
-    <li class="menu-item">
-      <a href="/shop">Shop</a>
-      <ul class="submenu">
-        <li><a href="/shop/motorrad">Motorräder</a></li>
-        <li><a href="/shop/oldtimer">Oldtimer</a></li>
-        <li><a href="/shop/sportwagen">Sportwagen</a></li>
-        <li><a href="/shop/lkw">LKWs</a></li>
-      </ul>
-    </li>
-    <li class="menu-item"><a href="/ueberuns">Über uns</a></li>
-    <li class="menu-item"><a href="/kontakt">Kontakt</a></li>
-  </ul>
+    <ul class="menu-list">
+        <!-- Startseite Link -->
+        <li class="menu-item">
+            <a href="/"><i class='bx bx-home'></i> Startseite</a>
+        </li>
+        <!-- Shop Link mit Dropdown-Menü für die verschiedene Unterkategorien -->
+        <li class="menu-item">
+            <a href="/shop"><i class='bx bx-store'></i> Shop</a>
+            <ul class="submenu">
+                <li><a href="/shop/motorrad"></i> Motorräder</a></li>
+                <li><a href="/shop/oldtimer"></i> Oldtimer</a></li>
+                <li><a href="/shop/sportwagen"></i> Sportwagen</a></li>
+                <li><a href="/shop/lkw"></i> LKWs</a></li>
+            </ul>
+        </li>
+        <!-- Link zu Über uns-->
+        <li class="menu-item">
+            <a href="/ueberuns"><i class='bx bx-group'></i> Über uns</a>
+        </li>
+        <!-- Link zur Kontakt Seite-->
+        <li class="menu-item">
+            <a href="/kontakt"><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 bcc3c12..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>
@@ -65,6 +85,7 @@
         }
     })
 </script>
+
 <!-- Fußzeile -->
 <div id="footer"></div>
 
diff --git a/public/registrieren/registrieren.html b/public/registrieren/registrieren.html
index d28221b..f820f04 100644
--- a/public/registrieren/registrieren.html
+++ b/public/registrieren/registrieren.html
@@ -1,22 +1,33 @@
+<!--
+  Diese Seite beinhaltet ein Registrierungsformular für neue Benutzer.
+  Der Benutzer kann Vorname, Nachname, E-Mail-Adresse und ein Passwort eingeben.
+  Header und Footer werden dynamisch geladen.
+-->
+
 <!DOCTYPE html>
 <html lang="de">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="./Styles/registrieren/registrieren.css">
-  <link rel="stylesheet" href="./Styles/styles-main.css">
-  <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
-  <script src="/header_footer"></script>
-  <title>Registrieren</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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">
+<div class="page-container">
 
     <!-- Header -->
-    <div id="header-placeholder"></div>
+    <div id="header"></div>
 
     <!-- Registrierungsformular -->
     <main class="content-wrapper">
+        <!-- Formular für Registrierung -->
         <div class="register-wrapper">
             <form action="register.php" method="POST">
                 <h2 class="title">Registrieren</h2>
@@ -38,6 +49,7 @@
                     <i class='bx bxs-lock-alt'></i>
                 </div>
 
+                <!-- Eingabe: Passwort bestätigen -->
                 <div class="input-box">
                     <input type="password" id="confirmPassword" name="confirmPassword" placeholder="Passwort bestätigen"
                            required>
@@ -46,6 +58,7 @@
 
                 <button type="submit" class="btn" id="register">Registrieren</button>
 
+                <!-- Link zum Login für bestehende Nutzer -->
                 <div class="register-link">
                     <br>
                     <p>Bereits ein Konto? <a href="/login">Login</a></p>
diff --git a/public/shop/shop.html b/public/shop/shop.html
index d24e94f..2d81b71 100644
--- a/public/shop/shop.html
+++ b/public/shop/shop.html
@@ -1,16 +1,25 @@
+<!--
+  Diese Seite zeigt alle Produkte des Webshops an.
+  Produkte werden dynamisch von der API geladen.
+  Bei einem Fehler wird eine passende Fehlermeldung angezeigt.
+-->
+
 <!DOCTYPE html>
 <html lang="de">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Shop</title>
+    <!-- Haupt-CSS-Datei -->
     <link rel="stylesheet" href="/Styles/styles-main.css">
+    <!-- Icons -->
     <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
+    <!-- Script zum Laden von Header/Footer -->
     <script src="/header_footer"></script>
 </head>
 <body>
 <!-- Header -->
-<div id="header-placeholder"></div>
+<div id="header"></div>
 
 <!-- Hauptinhalt -->
 <section style="padding: 0px 30px; text-align: left;">
@@ -18,8 +27,9 @@
 </section>
 
 <main>
+    <!-- "Container" für die dynamisch geladenen Produktkarten -->
     <section class="card-grid" id="products">
-        <!-- Dynamische Produkte -->
+        <!-- Produkte werden hier eingefügt -->
     </section>
 </main>
 
@@ -50,15 +60,20 @@
     }
 
     // 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>
@@ -73,12 +88,15 @@
                     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">
diff --git a/public/shop/shop_lkw.html b/public/shop/shop_lkw.html
index 1ded1b7..35e0038 100644
--- a/public/shop/shop_lkw.html
+++ b/public/shop/shop_lkw.html
@@ -1,17 +1,26 @@
+<!--
+  Diese Seite zeigt alle LKW-Produkte des Webshops an.
+  Die Produkte werden dynamisch von der API geladen.
+  Bei einem Fehler wird eine passende Fehlermeldung angezeigt.
+-->
+
 <!DOCTYPE html>
 <html lang="de">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Shop - LKW's</title>
+    <!-- Haupt-CSS-Datei -->
     <link rel="stylesheet" href="/Styles/styles-main.css">
+    <!-- Icons -->
     <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
+    <!-- Script zum Laden von Header/Footer -->
     <script src="/header_footer"></script>
 </head>
 <body>
 <div class="wrapper">
     <!-- Header -->
-    <div id="header-placeholder"></div>
+    <div id="header"></div>
 
     <!-- Hauptinhalt -->
     <main>
@@ -29,6 +38,7 @@
 </div>
 
 <script>
+    // API-Abfrage, um Lkw-Produkte zu laden
   // Funktion zum Hinzufügen zum Warenkorb
   function zumWarenkorbHinzufuegen(product) {
         let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
@@ -58,6 +68,7 @@
             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');
@@ -78,9 +89,11 @@
                 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_lkw');
             container.innerHTML = `
                 <div class="error-message">
@@ -91,8 +104,5 @@
         });
 </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 43f6382..6dec727 100644
--- a/public/shop/shop_motorrad.html
+++ b/public/shop/shop_motorrad.html
@@ -1,17 +1,26 @@
+<!--
+  Diese Seite zeigt alle Motorrad-Produkte des Webshops an.
+  Produkte werden dynamisch von der API geladen.
+  Bei einem Fehler wird eine passende Fehlermeldung angezeigt.
+-->
+
 <!DOCTYPE html>
 <html lang="de">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Shop - Motorräder</title>
-  <link rel="stylesheet" href="/Styles/styles-main.css">
-  <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
-  <script src="/header_footer"></script>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Shop - Motorräder</title>
+    <!-- Haupt-CSS-Datei -->
+    <link rel="stylesheet" href="/Styles/styles-main.css">
+    <!-- Icons -->
+    <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
+    <!-- Script zum Laden von Header/Footer -->
+    <script src="/header_footer"></script>
 </head>
 <body>
 <div class="wrapper">
     <!-- Header -->
-    <div id="header-placeholder"></div>
+    <div id="header"></div>
 
     <!-- Hauptinhalt -->
     <main class="main-content">
@@ -20,10 +29,13 @@
         </section>
 
         <section class="card-grid" id="products_motorrad">
-            <!-- Dynamische Produkte oder Fehlermeldung -->
+            <!-- Produkte -->
         </section>
     </main>
 
+    <!-- Fußzeile -->
+    <div id="footer"></div>
+</div>
 
 <script>
   // Funktion zum Hinzufügen zum Warenkorb
@@ -55,6 +67,7 @@
             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');
@@ -75,6 +88,7 @@
                 container.appendChild(card);
             });
         })
+        // Fehlermeldung
         .catch(err => {
             console.error('Fehler beim Laden der Produkte:', err);
 
@@ -87,9 +101,5 @@
                 </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 c659798..1fdc1ca 100644
--- a/public/shop/shop_oldtimer.html
+++ b/public/shop/shop_oldtimer.html
@@ -1,17 +1,26 @@
+<!--
+  Diese Seite zeigt alle Oldtimer-Produkte des Webshops an.
+  Produkte werden dynamisch von der API geladen.
+  Bei einem Fehler wird eine passende Fehlermeldung angezeigt.
+-->
+
 <!DOCTYPE html>
 <html lang="de">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Shop - Oldtimer</title>
+    <!-- Haupt-CSS-Datei -->
     <link rel="stylesheet" href="/Styles/styles-main.css">
+    <!-- Icons -->
     <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
+    <!-- Script zum Laden von Header/Footer -->
     <script src="/header_footer"></script>
 </head>
 <body>
 <div class="wrapper">
     <!-- Header -->
-    <div id="header-placeholder"></div>
+    <div id="header"></div>
 
     <!-- Hauptinhalt -->
     <main class="main-content">
@@ -20,7 +29,7 @@
         </section>
 
         <section class="card-grid" id="products_oldtimer">
-            <!-- Dynamische Produkte oder Fehlermeldung -->
+            <!-- Produkte -->
         </section>
     </main>
 
@@ -56,11 +65,15 @@
         .then(res => res.json())
         .then(products => {
             const container = document.getElementById('products_oldtimer');
-            container.innerHTML = '';
+            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>
@@ -78,9 +91,12 @@
                 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">
@@ -91,4 +107,4 @@
         });
 </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 a87fde4..52c44b4 100644
--- a/public/shop/shop_sportwagen.html
+++ b/public/shop/shop_sportwagen.html
@@ -1,17 +1,26 @@
+<!--
+  Diese Seite zeigt alle Sportwagen-Produkte des Webshops an.
+  Die Produkte werden dynamisch von der API geladen.
+  Bei einem Fehler wird eine passende Fehlermeldung angezeigt.
+-->
+
 <!DOCTYPE html>
 <html lang="de">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Shop - Sportwagen</title>
-  <link rel="stylesheet" href="/Styles/styles-main.css">
-  <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
-  <script src="/header_footer"></script>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Shop - Sportwagen</title>
+    <!-- Haupt-CSS-Datei -->
+    <link rel="stylesheet" href="/Styles/styles-main.css">
+    <!-- Icons -->
+    <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
+    <!-- Script zum Laden von Header/Footer -->
+    <script src="/header_footer"></script>
 </head>
 <body>
 <div class="wrapper">
-  <!-- Header -->
-  <div id="header-placeholder"></div>
+    <!-- Header -->
+    <div id="header"></div>
 
     <!-- Hauptinhalt -->
     <main>
@@ -20,12 +29,12 @@
         </section>
 
         <section class="card-grid" id="products_sportwagen">
-            <!-- Dynamische Produkte oder Fehlermeldung -->
+            <!-- Einbindung Dynamische Produkte -->
         </section>
     </main>
 
-  <!-- Footer -->
-  <div id="footer"></div>
+    <!-- Footer -->
+    <div id="footer"></div>
 </div>
 
 <script>
@@ -58,6 +67,7 @@
             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');
@@ -78,9 +88,11 @@
                 container.appendChild(card);
             });
         })
+        // 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">
diff --git a/public/startseite/startseite.html b/public/startseite/startseite.html
index 171b85f..c9ec7b2 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,7 +33,7 @@
             <!-- 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 -->
@@ -93,7 +101,7 @@
             </script>
 
 
-            <!-- Info-Sektion -->
+            <!-- Infobereich mit den Vorteilen -->
             <section class="info-cards-section">
                 <div class="info-card">
                     <i class='bx bx-package'></i>
diff --git a/scripts/einfügenHeaderFooter.js b/scripts/einfügenHeaderFooter.js
index a48657a..2f9868a 100644
--- a/scripts/einfügenHeaderFooter.js
+++ b/scripts/einfügenHeaderFooter.js
@@ -1,19 +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.
@@ -25,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.
diff --git a/scripts/routes/other/route-index.js b/scripts/routes/other/route-index.js
index 3edcb01..2052bcf 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 7b339bf..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';
@@ -287,7 +292,10 @@ app.get('/api/pruefe-artikel', (req, res) => {
 const getIndexRoute = require('./scripts/routes/other/route-index');
 app.use('/', getIndexRoute);
 
+// Hier werden alle anderen Seiten abgefangen, die keine definierten Routen haben (404 Fehler)
+// und gibt die 404.html aus.
 app.use((req, res) => {
+    // Setzt den Statuscode auf 404 und sendet die '404.html'-Datei
     res.status(404).sendFile(path.join(__dirname, 'public', '404.html'));
 });
 
diff --git a/static/Styles/bestellformular/bestellformular.css b/static/Styles/bestellformular/bestellformular.css
index e19c126..c320ca7 100644
--- a/static/Styles/bestellformular/bestellformular.css
+++ b/static/Styles/bestellformular/bestellformular.css
@@ -1,7 +1,6 @@
 body {
     font-family: Arial, sans-serif;
     background-color: #f2f2f2;
-    padding: 20px;
     margin: 0;
     display: flex;
     flex-direction: column;
diff --git a/static/Styles/styles-main.css b/static/Styles/styles-main.css
index 6af9077..a739343 100644
--- a/static/Styles/styles-main.css
+++ b/static/Styles/styles-main.css
@@ -55,6 +55,11 @@ header {
     object-fit: contain;
 }
 
+.logo-link {
+    text-decoration: none;
+    color: inherit;
+}
+
 header h1 {
     font-size: 30px;
     color: #333;
