diff --git a/prototype/src/main/resources/templates/fragments/shop.html b/prototype/src/main/resources/templates/fragments/shop.html
new file mode 100644
index 0000000..daf6de3
--- /dev/null
+++ b/prototype/src/main/resources/templates/fragments/shop.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
+
+<head>
+   <meta charset="UTF-8">
+   <title>e-commerce</title>
+</head>
+
+<body>
+   <nav th:fragment="sidebar">
+      <h1>Kategorien</h1>
+      <ul class="secondary">
+         <li><a>Aufnahmegeräte</a></li>
+         <li><a>Computer</a></li>
+         <li><a>Fernseher</a></li>
+         <li><a>Handys</a></li>
+         <li><a>Unterhaltungselektronik</a></li>
+         <li><a>Sonstiges</a></li>
+      </ul>
+   </nav>
+</body>
+</html>
diff --git a/prototype/src/main/resources/templates/login.html b/prototype/src/main/resources/templates/login.html
index a955231..771d6ab 100644
--- a/prototype/src/main/resources/templates/login.html
+++ b/prototype/src/main/resources/templates/login.html
@@ -10,7 +10,7 @@
 <body>
    <!-- <nav th:replace="/fragments/header :: header">Header</nav> -->
     <main class="content-width modal">
-      <form class="detailgrid s hero " th:action="@{/login}">
+      <form class="detailgrid s hero " method="post" th:action="@{/login}">
          <div class="s">
             <label for="username">Email Adresse</label>
             <input class="full-width" type="text" name="username" placeholder="Email Adresse" id="username" required>
diff --git a/prototype/src/main/resources/templates/shop/articles/id.html b/prototype/src/main/resources/templates/shop/articles/id.html
index e69de29..42cc6c6 100644
--- a/prototype/src/main/resources/templates/shop/articles/id.html
+++ b/prototype/src/main/resources/templates/shop/articles/id.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
+
+<head>
+   <meta charset="utf-8">
+   <meta name="viewport" content="width=device-width, initial-scale=0.75, user-scalable=no">
+
+   <title>Sucherergebnisse</title>
+   <link rel="stylesheet" th:href="@{/css/ecom.css}" />
+</head>
+
+<body>
+   <!-- Dirty hack to align the heading.-->
+   <nav th:replace="/fragments/header :: header">Header</nav>
+   <main class=" content-width">
+      <div class="sidebar-layout" style="min-height: 75vh;">
+         <nav th:replace="/fragments/shop :: sidebar"></nav>
+         <div class="content-width">
+            <div class="detailgrid">
+               <div class="s">
+                  <h1>Tolle Kamera</h1>
+                  <h2>25.14 €</h2>
+                  <p>
+                     Eine TOLLE Kamera <br>
+                     Jaja du denkst jetzt bestimmt: "Bei dem Preis kann sie gar nich sooo TOLL sein". <br>
+                     Aber glaub mir, sie is echt echt TOLL! <br>
+                     Indianerehrenwort!
+                  </p>
+               </div>
+               <div class="s">
+                  <img th:src="@{/img/product-1.jpg}" />
+               </div>
+               <div class="s"></div>
+               <form class="s" method="POST">
+                  <h2>50.28 €</h2>
+                  <div>
+                     <label class="nolinebreak">Menge:</label>
+                     <select size="1">
+                        <option>2</option>
+                     </select>
+                  </div>
+                  <h3 class="secondarytext">Auf Lager</h3>
+                  <button>In den Einkaufswagen</button>
+               </form>
+            </div>
+         </div>
+      </div>
+      <div class="sidebar-layout">
+         <div></div>
+         <div>
+            <h1>Weitere Schnäpchen</h1>
+            <div class='grid m base shadow'>
+               <section> <a th:href="@{/shop/articles/1234}" class="section">
+                     <img th:src="@{/img/product-4.jpg}">
+                     <h2>Kamera Stativ.</h2>
+                     <p class='price'> 25.14 €</p>
+                     <p>
+                        Das Stativ der Zukunft! Jetzt kaufen und verwenden für
+                        wackelfreie Bilder aus der Zukunft!.
+                     </p>
+                  </a>
+               </section>
+
+               <section> <a th:href="@{/shop/articles/1234}" class="section">
+                     <img th:src="@{/img/product-5.jpg}">
+                     <h2>Bluetooth Ersatzfernbedinung</h2>
+                     <p class='price'> 10.14 €</p>
+                     <p>
+                        Kann alles und jeden ausknippsen.
+                     </p>
+                  </a>
+               </section>
+            </div>
+         </div>
+   </main>
+   <footer th:replace="/fragments/footer :: footer"></footer>
+</body>
+
+</html>
diff --git a/prototype/src/main/resources/templates/shop/checkout.html b/prototype/src/main/resources/templates/shop/checkout.html
index 4896277..6327d18 100644
--- a/prototype/src/main/resources/templates/shop/checkout.html
+++ b/prototype/src/main/resources/templates/shop/checkout.html
@@ -3,7 +3,7 @@
 
 <head>
    <meta charset="utf-8">
-   <title>e-commerce</title>
+   <title>Checkout</title>
    <link rel="stylesheet" th:href="@{/css/ecom.css}" />
    <link rel="stylesheet" th:href="@{/css/listedArticles.css}" />
    <script th:src="@{/js/filterTable.js}"></script>
diff --git a/prototype/src/main/resources/templates/shop/checkoutFinish.html b/prototype/src/main/resources/templates/shop/checkoutFinish.html
index ab57385..36c5995 100644
--- a/prototype/src/main/resources/templates/shop/checkoutFinish.html
+++ b/prototype/src/main/resources/templates/shop/checkoutFinish.html
@@ -3,7 +3,7 @@
 
 <head>
    <meta charset="utf-8">
-   <title>e-commerce</title>
+   <title>Checkout erfolgreich!</title>
    <link rel="stylesheet" th:href="@{/css/ecom.css}" />
    <link rel="stylesheet" th:href="@{/css/listedArticles.css}" />
    <script th:src="@{/js/scrollToContent.js}"></script>
diff --git a/prototype/src/main/resources/templates/shop/search.html b/prototype/src/main/resources/templates/shop/search.html
index 0aa1291..d7b4489 100644
--- a/prototype/src/main/resources/templates/shop/search.html
+++ b/prototype/src/main/resources/templates/shop/search.html
@@ -19,17 +19,7 @@
       </div>
    </div>
    <main class="sidebar-layout content-width">
-      <nav>
-         <h1>Kategorien</h1>
-         <ul class="secondary">
-            <li><a>Aufnahmegeräte</a></li>
-            <li><a>Computer</a></li>
-            <li><a>Fernseher</a></li>
-            <li><a>Handys</a></li>
-            <li><a>Unterhaltungselektronik</a></li>
-            <li><a>Sonstiges</a></li>
-         </ul>
-      </nav>
+      <nav  th:replace="/fragments/shop :: sidebar"></nav>
       <div class="content-width">
          <div class='grid m condensed'>
             <section> <a th:href="@{/shop/articles/1234}" class="section">
