diff --git a/src/Praktikum/Prak5/Baecker.php b/src/Praktikum/Prak5/Baecker.php
index d1a0399675391668a51d1d1428f3b04e151b1fdd..49a3711655c8afc4abee7aae667434e8d0d6e220 100644
--- a/src/Praktikum/Prak5/Baecker.php
+++ b/src/Praktikum/Prak5/Baecker.php
@@ -18,6 +18,7 @@
 // to do: change name 'baecker' throughout this file
 require_once './Page.php';
 require_once './DB_Classes/OrderedArticle.php';
+require_once './navbar.php';
 /**
  * This is a template for top level classes, which represent
  * a complete web page and which are called directly by the user.
@@ -91,12 +92,18 @@ class Baecker extends Page
     protected function generateView():void
     {
         $data = $this->getViewData(); //NOSONAR ignore unused $data
-        $this->generatePageHeader('Bäcker',"",true); //to do: set optional parameters
+        $this->generatePageHeader('Bäcker',"",true, "./CSS/Beacker.css"); //to do: set optional parameters
+        echo "\n<header class='flex-container flex-direction-column justify-content-center'>\n";
+        buildNavbar(null, true);
+        echo "<img src='./img/Header.png' alt='Header Image'>\n";
+        echo "</header>\n";
+
         echo <<< HTML
-        \n<section id="baecker">
-            <h2>Bestellung</h2>
+        <main>
+        <section id="baecker">
+            <h2>Bestellungen</h2>
 
-            <form id="formBaecker" accept-charset="UTF-8" action="#" method="post">\n
+            <form class="flex-container flex-direction-row justify-content-center wrap" id="formBaecker" accept-charset="UTF-8" action="#" method="post">\n
 HTML;
 
         $noOrders = true;
@@ -152,7 +159,8 @@ HTML;
 
         echo <<< HTML
             </form>
-        </section>\n
+        </section>
+        </main>\n
 HTML;
 
         $this->generatePageFooter();
diff --git a/src/Praktikum/Prak5/Bestellung.php b/src/Praktikum/Prak5/Bestellung.php
index 90834e57c442bc644fedea315bb5629efe5a3a98..cd7bbce83ec65f25c888bf356f68d3e78a5dc141 100644
--- a/src/Praktikum/Prak5/Bestellung.php
+++ b/src/Praktikum/Prak5/Bestellung.php
@@ -18,7 +18,7 @@ declare(strict_types=1);
 
 require_once './Page.php';
 require_once './DB_Classes/Article.php';
-
+require_once './navbar.php';
 /**
  * This is a template for top level classes, which represent
  * a complete web page and which are called directly by the user.
@@ -88,8 +88,12 @@ class Bestellung extends Page
     protected function generateView(): void
     {
         $data = $this->getViewData(); //NOSONAR ignore unused $data
-        $this->generatePageHeader('Bestellung', './JS/BestellScript.js', false);
+        $this->generatePageHeader('Bestellung', './JS/BestellScript.js', false, './CSS/Bestellung.css');
 
+        echo "\n<header class='flex-container flex-direction-column justify-content-center'>\n";
+        buildNavbar(null, true);
+        echo "<img src='./img/Header.png' alt='Header Image'>\n";
+        echo "</header>\n";
         echo <<< HTML
             <main class="bestellungMain">
                 <h1 id="bestellungTitle">Bestellung</h1>
@@ -119,9 +123,9 @@ HTML;
                 <script>getElements();</script>
                 </section>
                
-                <section class="flex-container flex-direction-column nowrap justify-content-center" id="warenkorbSection">
+                <section id="warenkorbSection">
                     <h2>Warenkorb</h2>
-                    <form class="flex-item" accept-charset="UTF-8" action="#" method="post">
+                    <form class="flex-container flex-direction-column nowrap justify-content-center" accept-charset="UTF-8" action="#" method="post">
                         <label for="warenkorb"></label>
                         <select class="flex-item" id="warenkorb" multiple name="Pizza[]">
                         </select>
@@ -130,8 +134,8 @@ HTML;
             
                         <label for="address"></label>
                         <input class="flex-item" id="address" name="Adresse" placeholder="Ihre Adresse" type="text" required><br>
-                        <input type="button" value="Alles Löschen" onclick="removeAll();">
                         <input type="button" value="Auswahl Löschen" onclick="removeItem();">
+                        <input type="button" value="Alles Löschen" onclick="removeAll();">
                         <input id="submitButton" type="submit" name="save" value="Bestellen" onclick="selectOrder();">
                     </form>
                 </section>
diff --git a/src/Praktikum/Prak5/CSS/Beacker.css b/src/Praktikum/Prak5/CSS/Beacker.css
new file mode 100644
index 0000000000000000000000000000000000000000..138fc47359881330f4579ffa83ac34c348c946c3
--- /dev/null
+++ b/src/Praktikum/Prak5/CSS/Beacker.css
@@ -0,0 +1,40 @@
+main {
+    border-radius: 1.5em;
+    padding: 0 2em 1.5em 2em;
+    background: #eee;
+    box-shadow: 0 0 4em black;
+    margin: 0 2em;
+}
+
+h2 {
+    padding-top: 0.5em;
+    margin: 0;
+}
+
+fieldset {
+    border-radius: 1.5em;
+    background: #eee;
+    padding: 1em;
+    margin: 2em;
+    border: 3px solid #888;
+    width: fit-content;
+}
+
+fieldset legend {
+    border-radius: 1.5em;
+    font-size: 1.1em;
+    margin: 0;
+    padding: 0.5em;
+    border: 3px solid #888;
+}
+
+fieldset label input {
+    margin: 0.3em;
+    font-size: 1em;
+}
+
+fieldset label input[type='radio'] {
+    accent-color: black;
+    scale: 1.25;
+}
+
diff --git a/src/Praktikum/Prak5/CSS/Bestellung.css b/src/Praktikum/Prak5/CSS/Bestellung.css
new file mode 100644
index 0000000000000000000000000000000000000000..5e47e2fec51dbac0031229940f17ebb8626498eb
--- /dev/null
+++ b/src/Praktikum/Prak5/CSS/Bestellung.css
@@ -0,0 +1,80 @@
+.bestellungMain {
+    border-radius: 1.5em;
+    padding: 0 2em 1.5em 2em;
+    background: #eee;
+    box-shadow: 0 0 4em black;
+    margin: 0 2em;
+}
+
+.bestellungMain h1 {
+    padding-top: 0.5em;
+    margin: 0;
+}
+
+.speisekarteTitle {
+    text-align: center;
+}
+
+.pizzaContainer {
+    width: 100%;
+    align-content: center;
+}
+
+.pizzaLabel {
+    width: 15%;
+    min-width: 160px;
+    margin: 1em;
+    border-radius: 0.5em;
+    border: 1px solid rgba(0, 0, 0, 0);
+}
+
+.pizzaLabel:hover {
+    background: #bbb;
+    border: 1px solid #888;
+}
+
+.pizzaInfo {
+    text-align: center;
+    font-size: 1em;
+}
+
+.pizzaImage {
+    width: 100%;
+    height: auto;
+}
+
+#warenkorbSection {
+    background: #bbb;
+    border-radius: 1em;
+    padding: 0.5em 0.5em;
+    margin: 2em auto 0 auto;
+    width: 40%;
+    text-align: center;
+    border: 1px solid #888;
+}
+
+#warenkorbSection h2 {
+    margin: 0 0 0.2em 0;
+}
+
+#warenkorbSection #sum {
+    font-size: 1.25em;
+    margin: 0.25em;
+}
+
+#warenkorbSection #address{
+    width: calc(100% - 0.2em);
+    padding: 0;
+    margin: 0 auto 0.5em auto;
+    font-size: 1em;
+}
+
+#warenkorbSection #form {
+    padding: 0;
+}
+#warenkorbSection #warenkorb{
+    width: 100%;
+}
+
+
+
diff --git a/src/Praktikum/Prak5/CSS/Fahrer.css b/src/Praktikum/Prak5/CSS/Fahrer.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/Praktikum/Prak5/CSS/Kunde.css b/src/Praktikum/Prak5/CSS/Kunde.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/Praktikum/Prak5/CSS/file.css b/src/Praktikum/Prak5/CSS/file.css
deleted file mode 100644
index 9d33407f5c89e79f54c3f8cc504e712493a16004..0000000000000000000000000000000000000000
--- a/src/Praktikum/Prak5/CSS/file.css
+++ /dev/null
@@ -1,204 +0,0 @@
-body {
-    margin: 0;
-    background: url('../img/Pattern/bg_pattern.png'), #17181b;
-    background-size: 20vw;
-    font-family: Helvetica, serif;
-}
-
-
-
-
-
-.flex-container {
-    display: flex;
-}
-
-.nowrap {
-    flex-wrap: nowrap;
-}
-
-.wrap {
-    flex-wrap: wrap;
-}
-
-.wrap-reverse {
-    flex-wrap: wrap-reverse;
-}
-
-.flex-direction-row {
-    flex-direction: row;
-}
-
-.flex-direction-column {
-    flex-direction: column;
-}
-
-.justify-content-start {
-    justify-content: flex-start;
-}
-
-.justify-content-center {
-    justify-content: center;
-}
-
-.justify-content-end {
-    justify-content: flex-end;
-}
-
-.justify-content-between {
-    justify-content: space-between;
-}
-
-.align-items-start {
-    align-items: flex-start;
-}
-
-.align-items-center {
-    align-items: center;
-}
-
-.align-items-end {
-    align-items: flex-end;
-}
-.spacer {
-    margin-top: 192px;
-}
-
-.flex-item {
-    flex-grow: inherit;
-    flex-shrink: inherit;
-}
-
-#bestellungSection {
-
-    border-radius: 1.5em;
-    padding: 0.5em 2.5em 2em 2.5em;
-    background: #eee;
-    box-shadow: 0 0 64px black;
-    margin-left: 4em;
-    margin-right: 4em;
-}
-
-#bestellungSection #bestellungTitle{
-
-}
-
-
-
-
-#speisekarteSection h2 {
-    width: 100%;
-    text-align: center;
-}
-
-#speisekarteSection label {
-    padding: 0.5em;
-    margin: 0.5em 1em;
-    text-align: center;
-    border-radius: 0.5em;
-    width: 15%;
-    min-width: 8%;
-    border: 1px solid rgba(0, 0, 0, 0);
-}
-
-#speisekarteSection label:hover {
-    background: #bbb;
-    border: 1px solid #888;
-}
-
-.pizzaImage {
-    width: 100%;;
-    transition-duration: 1.5s;
-    transition-timing-function: ease-in-out;
-}
-
-.pizzaImage:hover {
-    transform: rotate(360deg);
-}
-
-
-
-
-
-#warenkorbSection {
-    background: #bbb;
-    border-radius: 1em;
-    padding: 1em 0.5em;
-    margin: 0 auto;
-    width: 320px;
-    text-align: center;
-    border: 1px solid #888;
-}
-
-#warenkorbSection h2 {
-    margin-top: 0.3em;
-}
-
-#warenkorbSection #sum {
-    font-size: 1.25em;
-    margin: 1em;
-}
-
-#warenkorbSection #address{
-    width: calc(280px - 0.6em);
-    height: 1.5em;
-    padding: 0.25em;
-    margin: 0 auto 0.5em auto;
-    font-size: 1em;
-}
-
-#warenkorbSection #buttons{
-    width: 280px;
-    display: flex;
-    justify-content: space-between;
-    margin: auto;
-}
-
-#warenkorbSection #warenkorb{
-    width: 280px;
-}
-
-
-
-
-
-
-
-
-
-.container {
-    width: 1200px;
-    margin: 0 auto;
-}
-
-
-@media only screen and (max-width: 1600px) {
-    .container {
-        width: 800px;
-    }
-}
-
-@media only screen and (max-width: 1200px) {
-    .container {
-        width: 640px;
-    }
-}
-
-@media only screen and (max-width: 800px) {
-    .container {
-        width: calc(100% - 2em);
-    }
-
-    #bestellungSection {
-        padding: 1em;
-    }
-
-    #speisekarteSection {
-        flex-direction: column;
-    }
-
-    #speisekarteSection label {
-        width: 30%;
-        margin: 0 auto;
-    }
-}
\ No newline at end of file
diff --git a/src/Praktikum/Prak5/CSS/global.css b/src/Praktikum/Prak5/CSS/global.css
new file mode 100644
index 0000000000000000000000000000000000000000..a5417f09294064cc0b388c5137a52761f276b165
--- /dev/null
+++ b/src/Praktikum/Prak5/CSS/global.css
@@ -0,0 +1,134 @@
+body {
+    margin: 0;
+    background: url('../img/Pattern/bg_pattern.png'), #17181b;
+    background-size: 20vw;
+    font-family: Helvetica, serif;
+}
+
+
+nav {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: center;
+    background: #eee;
+    position: sticky;
+    top: 0;
+    width: 100%;
+    padding: 0.5em 0;
+    text-align: center;
+}
+
+nav a{
+    color: black;
+    text-decoration: none;
+    margin: 0 1vw;
+    padding: 0.25em;
+    border: 2px solid rgba(0,0,0,0);
+    font-size: 1.5em;
+    font-weight: bold;
+}
+
+nav .active {
+    border: 2px solid black;
+}
+
+nav a:hover{
+    border: 2px solid black;
+}
+
+@media only screen and (max-width: 780px) {
+    nav {
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: column;
+    }
+
+    header {
+        margin-bottom: 1em;
+    }
+
+    header img {
+        display: none;
+    }
+    a {
+        flex-grow: inherit;
+        flex-shrink: inherit;
+        margin: 0;
+    }
+
+}
+
+
+@media only screen and (max-width: 480px) {
+    #warenkorbSection {
+        width: fit-content;
+    }
+}
+
+
+
+.flex-container {
+    display: flex;
+}
+
+.nowrap {
+    flex-wrap: nowrap;
+}
+
+.wrap {
+    flex-wrap: wrap;
+}
+
+.wrap-reverse {
+    flex-wrap: wrap-reverse;
+}
+
+.flex-direction-row {
+    flex-direction: row;
+}
+
+.flex-direction-column {
+    flex-direction: column;
+}
+
+.justify-content-start {
+    justify-content: flex-start;
+}
+
+.justify-content-center {
+    justify-content: center;
+}
+
+.justify-content-end {
+    justify-content: flex-end;
+}
+
+.justify-content-between {
+    justify-content: space-between;
+}
+
+.align-items-start {
+    align-items: flex-start;
+}
+
+.align-items-center {
+    align-items: center;
+}
+
+.align-items-end {
+    align-items: flex-end;
+}
+.spacer {
+    margin-top: 192px;
+}
+
+.flex-item {
+    flex-grow: inherit;
+    flex-shrink: inherit;
+}
+
+.not-flex-item {
+    flex-grow: initial;
+    flex-shrink: initial;
+}
\ No newline at end of file
diff --git a/src/Praktikum/Prak5/CSS/test.css b/src/Praktikum/Prak5/CSS/test.css
deleted file mode 100644
index 1def5f892f6abd8528fbf659132bad9be81324ee..0000000000000000000000000000000000000000
--- a/src/Praktikum/Prak5/CSS/test.css
+++ /dev/null
@@ -1,159 +0,0 @@
-body {
-    margin: 0;
-    background: url('../img/Pattern/bg_pattern.png'), #17181b;
-    background-size: 20vw;
-    font-family: Helvetica, serif;
-}
-
-
-.bestellungMain {
-    border-radius: 1.5em;
-    padding: 0 2em 1.5em 2em;
-    background: #eee;
-    box-shadow: 0 0 64px black;
-    margin: 2em;
-}
-
-.bestellungMain h1 {
-    padding-top: 0.5em;
-    margin: 0;
-}
-
-.speisekarteTitle {
-    text-align: center;
-}
-
-.pizzaContainer {
-    width: 100%;
-    align-content: center;
-}
-
-.pizzaLabel {
-    width: 15%;
-    min-width: 8%;
-    margin: 1em;
-    border-radius: 0.5em;
-    border: 1px solid rgba(0, 0, 0, 0);
-}
-
-.pizzaLabel:hover {
-    background: #bbb;
-    border: 1px solid #888;
-}
-
-.pizzaInfo {
-    text-align: center;
-}
-
-.pizzaImage {
-    width: 100%;
-    height: auto;
-}
-
-#warenkorbSection {
-    background: #bbb;
-    border-radius: 1em;
-    padding: 0.5em 0.5em;
-    margin: 2em auto 0 auto;
-    width: fit-content;
-    text-align: center;
-    border: 1px solid #888;
-}
-
-#warenkorbSection h2 {
-    margin: 0 0 0.2em 0;
-}
-
-#warenkorbSection #sum {
-    font-size: 1.25em;
-    margin: 1em;
-}
-
-#warenkorbSection #address{
-    width: calc(100% - 0.2em);
-    padding: 0;
-    height: fit-content;
-    margin: 0 auto 0.5em auto;
-    font-size: 1em;
-}
-
-#warenkorbSection #buttons{
-    width: fit-content;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    margin: auto;
-}
-
-#warenkorbSection #form {
-    padding: 0;
-}
-#warenkorbSection #warenkorb{
-    width: 100%;
-}
-
-
-.flex-container {
-    display: flex;
-}
-
-.nowrap {
-    flex-wrap: nowrap;
-}
-
-.wrap {
-    flex-wrap: wrap;
-}
-
-.wrap-reverse {
-    flex-wrap: wrap-reverse;
-}
-
-.flex-direction-row {
-    flex-direction: row;
-}
-
-.flex-direction-column {
-    flex-direction: column;
-}
-
-.justify-content-start {
-    justify-content: flex-start;
-}
-
-.justify-content-center {
-    justify-content: center;
-}
-
-.justify-content-end {
-    justify-content: flex-end;
-}
-
-.justify-content-between {
-    justify-content: space-between;
-}
-
-.align-items-start {
-    align-items: flex-start;
-}
-
-.align-items-center {
-    align-items: center;
-}
-
-.align-items-end {
-    align-items: flex-end;
-}
-.spacer {
-    margin-top: 192px;
-}
-
-.flex-item {
-    flex-grow: inherit;
-    flex-shrink: inherit;
-}
-
-.not-flex-item {
-    flex-grow: initial;
-    flex-shrink: initial;
-}
\ No newline at end of file
diff --git a/src/Praktikum/Prak5/Page.php b/src/Praktikum/Prak5/Page.php
index 997944313fad479d1cd521c58165866d42bf7f84..cbfccc35bddd5d118cc91df28147e788fc4c91b3 100644
--- a/src/Praktikum/Prak5/Page.php
+++ b/src/Praktikum/Prak5/Page.php
@@ -84,7 +84,7 @@ abstract class Page
      * @param bool $autoreload  true: auto reload the page every 5 s, false: not auto reload
      * @return void
      */
-    protected function generatePageHeader(string $title = "", string $jsFile = "", bool $autoreload = false):void
+    protected function generatePageHeader(string $title = "", string $jsFile = "", bool $autoreload = false, string $stylesheet =""):void
     {
         $title = htmlspecialchars($title);
         header("Content-type: text/html; charset=UTF-8");
@@ -101,7 +101,15 @@ abstract class Page
                 <meta charset="UTF-8">
                 <meta name="viewport" content="width=device-width, initial-scale=1.0">
                 <title>{$title}</title>
-                <link rel="stylesheet" href="./CSS/test.css">
+HTML;
+        $globalCSS = "./CSS/global.css";
+        if (is_file($globalCSS)) {
+            echo "\n\t<link rel='stylesheet' href='{$globalCSS}'>\n";
+        }
+        if (is_file($stylesheet)) {
+            echo "\n\t<link rel='stylesheet' href='{$stylesheet}'>\n";
+        }
+        echo <<< HTML
             </head>
             <body>
 HTML;
diff --git a/src/Praktikum/Prak5/img/Header.png b/src/Praktikum/Prak5/img/Header.png
new file mode 100644
index 0000000000000000000000000000000000000000..f400083f0599db3011a901dc70089f3cc267a6f5
Binary files /dev/null and b/src/Praktikum/Prak5/img/Header.png differ
diff --git a/src/Praktikum/Prak5/index.php b/src/Praktikum/Prak5/index.php
index 57b31d5bbace9a7afb582c8399058eb641176c7b..3ce5da57ac1cff0f9957bb8ea6b4d664ed49e590 100644
--- a/src/Praktikum/Prak5/index.php
+++ b/src/Praktikum/Prak5/index.php
@@ -64,7 +64,7 @@ class Index extends Page
      */
     protected function getViewData():array
     {
-        return array("Bestellung" => "./Bestellung.php", "Baecker" => "./Baecker.php",
+        return array("Bestellung" => "./Bestellung.php", "Bäcker" => "./Baecker.php",
             "Kunde" => "./Kunde.php", "Fahrer" => "./Fahrer.php", "Kundenstatus" => "./Kundenstatus.php");
     }
 
diff --git a/src/Praktikum/Prak5/navbar.php b/src/Praktikum/Prak5/navbar.php
index 77d6f4d240708a3addfdffcab057c97ca94472ed..3175ae49b976df00b3a1bc3146e735096700186b 100644
--- a/src/Praktikum/Prak5/navbar.php
+++ b/src/Praktikum/Prak5/navbar.php
@@ -3,15 +3,23 @@
 
 
 
-function buildNavbar (array $urlArray = [], bool $target_blank = false) : void {
+function buildNavbar (array $urlArray = null, bool $target_blank = false) : void {
     if (empty($urlArray)) {
-        $urlArray = array("Bestellung" => "./Bestellung.php", "Baecker" => "./Baecker.php",
+        $urlArray = array("Bestellung" => "./Bestellung.php", "Bäcker" => "./Baecker.php",
             "Kunde" => "./Kunde.php", "Fahrer" => "./Fahrer.php", "Kundenstatus" => "./Kundenstatus.php");
     }
     echo "\n<nav>\n";
-    $target = $target_blank ? "target='_blank'" : "";
+    $target = $target_blank ? 'target="_blank"' : "";
     foreach ($urlArray as $key => $value) {
-        echo "\t<a href='$value'" . $target . ">$key</a>\n";
+        $activePath = htmlspecialchars( "./" . basename(parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH)));
+
+        if ($value == $activePath) {
+            echo "\t<a class='active' href='$value' " . $target . ">$key</a>\n";
+        }
+        else {
+            echo "\t<a href='$value' " . $target . ">$key</a>\n";
+        }
+
     }
     echo "</nav>\n";
 }