diff --git a/public/datenschutz.html b/public/datenschutz.html
index acb49d6..ea2e516 100644
--- a/public/datenschutz.html
+++ b/public/datenschutz.html
@@ -10,25 +10,20 @@
 
 <body>
     <header>
-        <div id="bild">
-            <a id="backlink" href="index.html">
-                <img src="logo_secondharvest_transparent.png" widht="100" height="75" alt="Startseite"></a>
-        </div>
-        <div id="ueberschrift">
-            Second Harvest<br />
-        </div>
-        <div id="unterueberschrift">
-            <p>gib Lebensmittel eine zweite Chance</p>
+        <div class="header_logo">
+            <a href="index.html">
+                <img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
         </div>
+        <h1>Second Harvest</h1>
+        <p>Gib Lebensmitteln eine zweite Chance</p>
+        <nav class="navbar" style="--items: 4;">
+            <a href="ueber_uns.html">Über uns</a>
+            <a href="produkte.html">Produkte</a>
+
+            <a href="warenkorb.html">Warenkorb</a>
+            <a href="kontakt.html">Kontakt</a>
+        </nav>
     </header>
-    <nav id="nav_oben">
-        <ul>
-            <li><a href="ueber_uns.html">Über uns</a></li>
-            <li><a href="produkte.html">Produkte</a></li>
-            <li><a href="warenkorb.html">Warenkorb</a></li>
-            <li><a href="kontakt.html">Kontakt</a></li>
-        </ul>
-    </nav>
 
     <div class="seite">
         <div class="schrift_website">
@@ -56,13 +51,11 @@
 
 
     <footer>
-        <nav id="nav_unten">
-            <ul>
-                <li><a href="impressum.html">Impressum</a></li>
-                <li><a href="datenschutz.html">Datenschutz</a></li>
-            </ul>
-            <div id="balken"></div>
+        <nav class="navbar" style="--items: 2;">
+            <a href="impressum.html">Impressum</a>
+            <a href="datenschutz.html">Datenschutz</a>
         </nav>
+        <div id="balken"></div>
     </footer>
 
 </body>
diff --git a/public/impressum.html b/public/impressum.html
index 1c7c189..4df99d6 100644
--- a/public/impressum.html
+++ b/public/impressum.html
@@ -10,25 +10,20 @@
 
 <body>
     <header>
-        <div id="bild">
-            <a id="backlink" href="index.html">
-                <img src="logo_secondharvest_transparent.png" widht="100" height="75" alt="Startseite"></a>
-        </div>
-        <div id="ueberschrift">
-            Second Harvest<br />
-        </div>
-        <div id="unterueberschrift">
-            <p>gib Lebensmittel eine zweite Chance</p>
+        <div class="header_logo">
+            <a href="index.html">
+                <img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
         </div>
+        <h1>Second Harvest</h1>
+        <p>Gib Lebensmitteln eine zweite Chance</p>
+        <nav class="navbar" style="--items: 4;">
+            <a href="ueber_uns.html">Über uns</a>
+            <a href="produkte.html">Produkte</a>
+
+            <a href="warenkorb.html">Warenkorb</a>
+            <a href="kontakt.html">Kontakt</a>
+        </nav>
     </header>
-    <nav id="nav_oben">
-        <ul>
-            <li><a href="ueber_uns.html">Über uns</a></li>
-            <li><a href="produkte.html">Produkte</a></li>
-            <li><a href="warenkorb.html">Warenkorb</a></li>
-            <li><a href="kontakt.html">Kontakt</a></li>
-        </ul>
-    </nav>
 
     <div class="seite">
         <div class="schrift_website">
@@ -53,13 +48,11 @@
 
 
     <footer>
-        <nav id="nav_unten">
-            <ul>
-                <li><a href="impressum.html">Impressum</a></li>
-                <li><a href="datenschutz.html">Datenschutz</a></li>
-            </ul>
-            <div id="balken"></div>
+        <nav class="navbar" style="--items: 2;">
+            <a href="impressum.html">Impressum</a>
+            <a href="datenschutz.html">Datenschutz</a>
         </nav>
+        <div id="balken"></div>
     </footer>
 
 </body>
diff --git a/public/ueber_uns.html b/public/ueber_uns.html
index 13f4340..e276f9b 100644
--- a/public/ueber_uns.html
+++ b/public/ueber_uns.html
@@ -10,25 +10,20 @@
 
 <body>
     <header>
-        <div id="bild">
-            <a id="backlink" href="index.html">
-                <img src="logo_secondharvest_transparent.png" widht="100" height="75" alt="Startseite"></a>
-        </div>
-        <div id="ueberschrift">
-            Second Harvest<br />
-        </div>
-        <div id="unterueberschrift">
-            <p>gib Lebensmittel eine zweite Chance</p>
+        <div class="header_logo">
+            <a href="index.html">
+                <img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
         </div>
+        <h1>Second Harvest</h1>
+        <p>Gib Lebensmitteln eine zweite Chance</p>
+        <nav class="navbar" style="--items: 4;">
+            <a href="ueber_uns.html">Über uns</a>
+            <a href="produkte.html">Produkte</a>
+
+            <a href="warenkorb.html">Warenkorb</a>
+            <a href="kontakt.html">Kontakt</a>
+        </nav>
     </header>
-    <nav id="nav_oben">
-        <ul>
-            <li><a href="ueber_uns.html">Über uns</a></li>
-            <li><a href="produkte.html">Produkte</a></li>
-            <li><a href="warenkorb.html">Warenkorb</a></li>
-            <li><a href="kontakt.html">Kontakt</a></li>
-        </ul>
-    </nav>
 
     <div class="seite">
         <div class="schrift_website">
@@ -56,15 +51,12 @@
 
 
 
-
     <footer>
-        <nav id="nav_unten">
-            <ul>
-                <li><a href="impressum.html">Impressum</a></li>
-                <li><a href="datenschutz.html">Datenschutz</a></li>
-            </ul>
-            <div id="balken"></div>
+        <nav class="navbar" style="--items: 2;">
+            <a href="impressum.html">Impressum</a>
+            <a href="datenschutz.html">Datenschutz</a>
         </nav>
+        <div id="balken"></div>
     </footer>
 
 </body>
