diff --git a/public/includes/head.php b/public/includes/head.php
new file mode 100644
index 0000000..a2a2559
--- /dev/null
+++ b/public/includes/head.php
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="de">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><?php $websitename; ?></title>
+    <style>
+        @import 'css/mobile.css' (max-width: 800px);
+        @import 'css/desktop.css' (min-width: 801px);
+    </style>
+</head>
\ No newline at end of file
diff --git a/public/includes/header.php b/public/includes/header.php
new file mode 100644
index 0000000..32870b3
--- /dev/null
+++ b/public/includes/header.php
@@ -0,0 +1,51 @@
+
+<header>
+        <nav>
+            <div class="navbar-mobile">
+                <div class="nav-container" >
+                  <input class="checkbox" type="checkbox" name="" id="" />
+                    <div class="hamburger-lines">
+                        <span class="line line1"></span>
+                        <span class="line line2"></span>
+                        <span class="line line3"></span>
+                    </div>
+                    <div class="navbar menu-items">
+                        <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>
+                        <a href="impressum.html">Impressum</a>
+                        <a href="datenschutz.html">Datenschutz</a>
+                    </div>
+                </div>
+                <div id="header-mobile-farbe">
+                    <span class="header-mobile-text">
+                        <h1>Second Harvest</h1>
+                        <p>Gib Lebensmitteln eine zweite Chance</p>
+                    </span>
+                </div>
+                <div id="header-mobile-farbe" class="header-mobile-logo">
+                    <a href="index.html">
+                    <img src="pictures/logo_secondharvest_transparent.png" width="120" alt="Second Harvest Logo"></a>
+                </div>
+            </div>
+        </nav>
+        <nav> 
+            <div class="header_logo">
+                <a href="index.html">
+                <img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
+            </div>
+            <div class="header_desktop">
+                <h1>Second Harvest</h1>
+                <p>Gib Lebensmitteln eine zweite Chance</p>
+            </div>
+            <div class="header_desktop">
+                <nav class="navbar-desktop" 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>
+            </div>
+        </nav>
+    </header>
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
deleted file mode 100644
index 8455985..0000000
--- a/public/index.html
+++ /dev/null
@@ -1,116 +0,0 @@
-<!doctype html>
-<html lang="de">
-
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Second Harvest</title>
-    <style>
-        @import 'css/mobile.css' (max-width: 800px);
-        @import 'css/desktop.css' (min-width: 801px);
-    </style>
-</head>
-<body class="index">
-    <header>
-        <nav>
-            <div class="navbar-mobile">
-                <div class="nav-container" >
-                  <input class="checkbox" type="checkbox" name="" id="" />
-                    <div class="hamburger-lines">
-                        <span class="line line1"></span>
-                        <span class="line line2"></span>
-                        <span class="line line3"></span>
-                    </div>
-                    <div class="navbar menu-items">
-                        <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>
-                        <a href="impressum.html">Impressum</a>
-                        <a href="datenschutz.html">Datenschutz</a>
-                    </div>
-                </div>
-                <div id="header-mobile-farbe">
-                    <span class="header-mobile-text">
-                        <h1>Second Harvest</h1>
-                        <p>Gib Lebensmitteln eine zweite Chance</p>
-                    </span>
-                </div>
-                <div id="header-mobile-farbe" class="header-mobile-logo">
-                    <a href="index.html">
-                    <img src="pictures/logo_secondharvest_transparent.png" width="120" alt="Second Harvest Logo"></a>
-                </div>
-            </div>
-        </nav>
-        <nav> 
-            <div class="header_logo">
-                <a href="index.html">
-                <img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
-            </div>
-            <div class="header_desktop">
-                <h1>Second Harvest</h1>
-                <p>Gib Lebensmitteln eine zweite Chance</p>
-            </div>
-            <div class="header_desktop">
-                <nav class="navbar-desktop" 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>
-            </div>
-        </nav>
-    </header>
-
-    <div class="content">
-        <h1>Herzlich Willkommen</h1>
-        <p>Wir freuen uns über Deinen Besuch.</p>
-        <p>Es ist schön zu sehen, dass immer mehr Menschen sich bewusst entscheiden, keine Lebensmittel zu
-            verschwenden.</p>
-        <br />
-        <p>Alle Produkte auf unserer Seite sind mit drei Fähnchen gekennzeichnet.</p>
-
-            <table>
-                <tr>
-                    <td><img src="pictures/food_ampel_rot.png"></td>
-                    <td>muss sofort verarbeitet werden</td>
-                </tr>
-                <tr>
-                    <td><img src="pictures/food_ampel_gelb.png"></td>
-                    <td>kann ein paar Tage liegen</td>
-                </tr>
-                <tr>
-                    <td><img src="pictures/food_ampel_gruen.png"></td>
-                    <td>lange Haltbarkeit</td>
-                </tr>
-            </table>
-        
-        
-        <p>Damit kannst du deinen Einkauf perfekt an deinen Essensplan anpassen und weißt bereits vorher, wann Du
-            etwas verbrauchen musst.<br />Bestellungen, die <strong>bis 10 Uhr</strong> bei uns eingehen, werden
-            <strong>noch am selben Tag</strong>
-            ausgeliefert. <br />Bestellungen nach 10, liefern wir am nächsten Tag aus.
-        </p>
-        </br>
-        <p id="aktuelle_auswahl">Aktuelle Auswahl aus unserem Angebot:</p>
-
-        <a class="beispiel_produkte" href="produkte.html"><img src="pictures/karotten.png" alt="Karotten"></a>
-        <a class="beispiel_produkte" href="produkte.html">
-            <img src="pictures/sellerie.png" alt="Sellerie"></a>
-        <p>
-            <a class= "button_produkte" href="produkte.html">zu den Produkten</a>
-        </p>
-        <h2 id="greeting-desktop">Viel Spaß bei Deinem Einkauf. Dein Second Harvest Team.</h2>
-        <h2 id="greeting-mobile">Viel Spaß bei Deinem Einkauf.</h2>
-    </div>
-
-    <footer>
-        <nav class="navbar-desktop" style="--items: 2;">
-            <a href="impressum.html">Impressum</a>
-            <a href="datenschutz.html">Datenschutz</a>
-        </nav>
-        <div id="balken"></div>
-    </footer>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/public/index.php b/public/index.php
new file mode 100644
index 0000000..83b0187
--- /dev/null
+++ b/public/index.php
@@ -0,0 +1,59 @@
+<?php
+$websitename = "Second Harvest - Startseite";
+include_once("includes/head.php");
+?>
+<body class="index">
+    
+
+    <div class="content">
+        <h1>Herzlich Willkommen</h1>
+        <p>Wir freuen uns über Deinen Besuch.</p>
+        <p>Es ist schön zu sehen, dass immer mehr Menschen sich bewusst entscheiden, keine Lebensmittel zu
+            verschwenden.</p>
+        <br />
+        <p>Alle Produkte auf unserer Seite sind mit drei Fähnchen gekennzeichnet.</p>
+
+            <table>
+                <tr>
+                    <td><img src="pictures/food_ampel_rot.png"></td>
+                    <td>muss sofort verarbeitet werden</td>
+                </tr>
+                <tr>
+                    <td><img src="pictures/food_ampel_gelb.png"></td>
+                    <td>kann ein paar Tage liegen</td>
+                </tr>
+                <tr>
+                    <td><img src="pictures/food_ampel_gruen.png"></td>
+                    <td>lange Haltbarkeit</td>
+                </tr>
+            </table>
+        
+        
+        <p>Damit kannst du deinen Einkauf perfekt an deinen Essensplan anpassen und weißt bereits vorher, wann Du
+            etwas verbrauchen musst.<br />Bestellungen, die <strong>bis 10 Uhr</strong> bei uns eingehen, werden
+            <strong>noch am selben Tag</strong>
+            ausgeliefert. <br />Bestellungen nach 10, liefern wir am nächsten Tag aus.
+        </p>
+        </br>
+        <p id="aktuelle_auswahl">Aktuelle Auswahl aus unserem Angebot:</p>
+
+        <a class="beispiel_produkte" href="produkte.html"><img src="pictures/karotten.png" alt="Karotten"></a>
+        <a class="beispiel_produkte" href="produkte.html">
+            <img src="pictures/sellerie.png" alt="Sellerie"></a>
+        <p>
+            <a class= "button_produkte" href="produkte.html">zu den Produkten</a>
+        </p>
+        <h2 id="greeting-desktop">Viel Spaß bei Deinem Einkauf. Dein Second Harvest Team.</h2>
+        <h2 id="greeting-mobile">Viel Spaß bei Deinem Einkauf.</h2>
+    </div>
+
+    <footer>
+        <nav class="navbar-desktop" style="--items: 2;">
+            <a href="impressum.html">Impressum</a>
+            <a href="datenschutz.html">Datenschutz</a>
+        </nav>
+        <div id="balken"></div>
+    </footer>
+</body>
+
+</html>
\ No newline at end of file

	muss sofort verarbeitet werden
	kann ein paar Tage liegen
	lange Haltbarkeit