diff --git a/mockup-css/ecom-frontpage.html b/mockup-css/ecom-frontpage.html
index 005be60..13f8e4d 100644
--- a/mockup-css/ecom-frontpage.html
+++ b/mockup-css/ecom-frontpage.html
@@ -19,7 +19,6 @@
          </div>
       </nav>
       <main>
-
          <div class='hero'>
             <div class='content-width'>
                <h1>Angebote</h1>
diff --git a/prototype/src/main/java/org/hso/ecommerce/app/RequestController.java b/prototype/src/main/java/org/hso/ecommerce/app/RequestController.java
index d481dc8..0fa38c3 100644
--- a/prototype/src/main/java/org/hso/ecommerce/app/RequestController.java
+++ b/prototype/src/main/java/org/hso/ecommerce/app/RequestController.java
@@ -44,12 +44,17 @@ public class RequestController {
 
     @GetMapping("/articledetail")
     public String articledetail() {
-        return "articleDetail";
+        return "articledetail";
     }
 
     @GetMapping("/searchresults")
     public String searchresults() {
-        return "searchResults";
+        return "searchresults";
+    }
+
+    @GetMapping("/shoppingcart")
+    public String shoppingcart() {
+        return "shoppingcart";
     }
 
     @GetMapping("/intern/customerdetail")
diff --git a/prototype/src/main/resources/static/css/articleDetail.css b/prototype/src/main/resources/static/css/articleDetail.css
deleted file mode 100644
index 6eadefd..0000000
--- a/prototype/src/main/resources/static/css/articleDetail.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.articledetail {
-    max-width: 100%;
-    padding: 2em;
-    background-color: var(--c-primary);
-}
-
-.availability {
-    color: var(--root-c-secondary);
-}
-
-.checkout {
-    border: 0px;
-    border-left: 2px;
-    border-color: var(--c-white);
-    border-style: solid;
-}
-
-.quantity {
-    display: flex;
-}
-
-.quantity label {
-    min-width: 5em;
-    margin-bottom: 0px;
-    padding-left: 15px;
-}
-
-.checkout button {
-    background-color: var(--root-c-secondary);
-}
\ No newline at end of file
diff --git a/prototype/src/main/resources/static/css/ecom.css b/prototype/src/main/resources/static/css/ecom.css
index ebe90d9..6189227 100644
--- a/prototype/src/main/resources/static/css/ecom.css
+++ b/prototype/src/main/resources/static/css/ecom.css
@@ -35,7 +35,7 @@
    --c-primary: var(--root-c-primary);
    --c-primary-highlight: var(--root-c-primary-highlight);
 
-   --c-secondary: var(--c-secondary);
+   --c-secondary: var(--root-c-secondary);
    --c-secondary-highlight: var(--root-c-secondary-highlight);
 
    --c-black: var(--root-c-black);
@@ -137,6 +137,7 @@ a:visited {
 p {
    padding-top: var(--u0);
    padding-bottom: var(--u0);
+   color: var(--c-black);
 }
 
 h1 {
@@ -313,6 +314,10 @@ label {
    font-weight: bold;
 }
 
+label.nolinebreak {
+    display:inline;
+}
+
 input.linestyle {
    background-color: transparent;
    border-bottom: var(--u-4) solid var(--c-primary);
@@ -339,6 +344,14 @@ fieldset {
    color: var(--c-base);
 }
 
+.primarytext{
+    color: var(--c-primary)
+}
+
+.secondarytext{
+    color: var(--c-secondary)
+}
+
 /*
  * LAYOUT
  */
@@ -381,7 +394,6 @@ fieldset {
    height: 0px;
 }
 
-
 .bar-flex {
    display: flex;
    align-items: center;
@@ -564,3 +576,15 @@ fieldset {
    font-size: var(--u1);
    text-align: right;
 }
+
+.center-text {
+    text-align: center;
+}
+
+.leftspace {
+    padding-left: 1em;
+}
+
+
+
+
diff --git a/prototype/src/main/resources/static/css/searchResults.css b/prototype/src/main/resources/static/css/searchResults.css
deleted file mode 100644
index ae78c28..0000000
--- a/prototype/src/main/resources/static/css/searchResults.css
+++ /dev/null
@@ -1,56 +0,0 @@
-.container {
-
-}
-
-.searchresults {
-    max-width: 100%;
-    padding: 2em;
-    background-color: var(--c-white);
-    border: 0px;
-}
-
-.sidebar {
-    border: 0px;
-    border-right: 2px;
-    border-style: solid;
-    border-color: white;
-}
-
-.articlelist {
-    background-color: var(--c-white);
-}
-
-.article {
-    padding: 1em;
-}
-
-img {
-    width: 75%
-}
-
-h2 {
-    padding-bottom: 0px;
-}
-
-.articlelink {
-    color: var(--c-white);
-    background-color: var(--c-white);
-    border: 0px;
-}
-
-.articlelink:hover {
-    color: var(--root-c-secondary)
-}
-
-h1 {
-    padding: 0px;
-    padding-bottom: 0.5em;
-}
-
-hr {
-    border-top: 2px solid white;
-    width: 75%;
-    margin: auto;
-    margin-top: 5px;
-    margin-bottom: 5px;
-}
\ No newline at end of file
diff --git a/prototype/src/main/resources/templates/about.html b/prototype/src/main/resources/templates/about.html
index d41e2a6..717b344 100644
--- a/prototype/src/main/resources/templates/about.html
+++ b/prototype/src/main/resources/templates/about.html
@@ -7,10 +7,11 @@
 </head>
 <body>
     <nav th:replace="fragments/header :: header">Header</nav>
-    <main class='hero'>
+    <main>
         <div class='content-width'>
             <h1>Über uns</h1>
             <div>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.
             </div>
         </div>
         <div class="vertical-spacer s"></div>
diff --git a/prototype/src/main/resources/templates/articleDetail.html b/prototype/src/main/resources/templates/articleDetail.html
index 684fca6..77e361e 100644
--- a/prototype/src/main/resources/templates/articleDetail.html
+++ b/prototype/src/main/resources/templates/articleDetail.html
@@ -3,49 +3,43 @@
 <head>
     <meta charset="utf-8">
     <title>e-commerce</title>
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
     <link href="/css/ecom.css" rel="stylesheet"/>
-    <link href="/css/articleDetail.css" rel="stylesheet"/>
 </head>
 <body>
 <nav th:replace="fragments/header :: header">Header</nav>
-    <div class="hero">
-        <main>
-            <div class="articledetail">
-                <div class="row">
-                    <div class="picture col-4">
-                        <img src="/img/product-1.jpg" />
-                    </div>
-                    <div class="articleinfo col-6">
-                        <h2>Tolle Kamera</h2>
-                        <p>25.14 €</p>
-                        <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="checkout col-2">
-                        <h2>50.28 €</h2>
-                        <p class="availability">Auf Lager</p>
-                        <br>
-                        <form>
-                            <div class="quantity row">
-                                <label>Menge:</label>
-                                <select size="1">
-                                    <option>2</option>
-                                </select>
-                            </div>
-                        </form>
-                        <br>
-                        <br>
-                        <button>In den Einkaufswagen</button>
-                    </div>
+<main>
+    <div class="detailgrid">
+        <div class="m">
+            <img src="/img/product-1.jpg"/>
+        </div>
+        <div class="m">
+            <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">
+            <h1>50.28 €</h1>
+            <h2 class="secondarytext">Auf Lager</h2>
+            <br>
+            <form>
+                <div>
+                    <label class="nolinebreak">Menge:</label>
+                    <select size="1">
+                        <option>2</option>
+                    </select>
                 </div>
-            </div>
-        </main>
+            </form>
+            <br>
+            <br>
+            <button>In den Einkaufswagen</button>
+        </div>
     </div>
+</main>
 <footer th:replace="fragments/footer :: footer"></footer>
 </body>
 </html>
\ No newline at end of file
diff --git a/prototype/src/main/resources/templates/home.html b/prototype/src/main/resources/templates/home.html
index 62e578f..55194e6 100644
--- a/prototype/src/main/resources/templates/home.html
+++ b/prototype/src/main/resources/templates/home.html
@@ -1,92 +1,81 @@
 <!DOCTYPE html>
 <html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
-<head>
-    <meta charset="utf-8">
-    <title>eCommerce</title>
-    <link href="../static/css/ecom.css" rel="stylesheet" th:href="@{/css/ecom.css}"/>
-</head>
-<body>
-    <nav th:replace="fragments/header :: header">Header</nav>
-    <main>
-        <div class='hero'>
+   <head>
+      <meta charset="utf-8">
+      <title>e-commerce</title>
+      <link rel="stylesheet" type="text/css" href="css/ecom.css">
+   </head>
+   <body>
+   <nav th:replace="fragments/header :: header">Header</nav>
+      <main>
+ <div class='hero'>
             <div class='content-width'>
-                <h1>Angebote</h1>
-                <div class='grid m base shadow'>
-
-                    <section>
-                        <img th:src="@{/img/product-1.jpg}" />
-                        <h2>Lorem Ipsum</h2>
-                        <p class='price'> 25.14 €</p>
-                        <p>
-                            Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
-                        </p>
-                    </section>
-
-                    <section>
-                        <img th:src="@{/img/product-2.jpg}" />
-                        <h2>Lorem Ipsum</h2>
-                        <p class='price'> 10.14 €</p>
-                        <p>
-                            Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
-                        </p>
-                    </section>
-
-                    <section>
-                        <img th:src="@{/img/product-4.jpg}" />
-                        <h2>Lorem Ipsum</h2>
-                        <p class='price'> 25.14 €</p>
-                        <p>
-                            Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
-                        </p>
-                    </section>
-
-                    <section>
-                        <img th:src="@{/img/product-5.jpg}" />
-                        <h2>Lorem Ipsum</h2>
-                        <p class='price'> 10.14 €</p>
-                        <p>
-                            Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
-                        </p>
-                    </section>
-
-                    <section>
-                        <img th:src="@{/img/product-3.jpg}" />
-                        <h2>Lorem Ipsum</h2>
-                        <p class='price'> 44.14 €</p>
-                        <p>
-
-                            Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
-
-                        </p>
-                    </section>
-
-                    <section class="spacer"></section>
-                    <section class="spacer"></section>
-                    <section class="spacer"></section>
-                    <section class="spacer"></section>
-                </div>
+               <h1>Angebote</h1>
+               <div class='grid m base shadow'>
+                  <section>
+                     <img th:src="@{/img/product-1.jpg}" />
+                     <h2>Lorem Ipsum</h2>
+                     <p class='price'> 25.14 €</p>
+                     <p>
+                        Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
+                     </p>
+                  </section>
+                  <section>
+                     <img th:src="@{/img/product-2.jpg}" />
+                     <h2>Lorem Ipsum</h2>
+                     <p class='price'> 10.14 €</p>
+                     <p>
+                        Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
+                     </p>
+                  </section>
+                  <section>
+                     <img th:src="@{/img/product-3.jpg}" />
+                     <h2>Lorem Ipsum</h2>
+                     <p class='price'> 25.14 €</p>
+                     <p>
+                        Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
+                     </p>
+                  </section>
+                  <section>
+                     <img th:src="@{/img/product-4.jpg}" />
+                     <h2>Lorem Ipsum</h2>
+                     <p class='price'> 10.14 €</p>
+                     <p>
+                        Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
+                     </p>
+                  </section>
+                  <section>
+                     <img th:src="@{/img/product-5.jpg}" />
+                     <h2>Lorem Ipsum</h2>
+                     <p class='price'> 44.14 €</p>
+                     <p>
+                        Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
+                     </p>
+                  </section>
+                  <section class="spacer"></section>
+                  <section class="spacer"></section>
+                  <section class="spacer"></section>
+                  <section class="spacer"></section>
+               </div>
             </div>
             <div class="vertical-spacer s"></div>
-        </div>
-        <!-- TODO only shown if not logged in-->
-        <div class=''>
+         </div>
+         <div class=''>
             <div class='content-width'>
-                <h1>Personalisierte Empfehlungen</h1>
-                <div class="grid l">
-                    <img th:src="@{/img/undraw_successful_purchase_secondary.svg}" />
-                    <div>
-                        <h2>Werde jetzt Kunde</h2>
-                        <p> Jetzt Kunde werden und viele Vorteile sichern,
-                            wie z.B. personalisierte Empfehlungen. </p>
-                        <p>
-                            <a class="button" th:href="@{/register}">Registieren</a>
-                        </p>
-                    </div>
-                </div>
+               <h1>Personalisierte Empfehlungen</h1>
+               <div class="grid l">
+                  <img th:src="@{/img/undraw_successful_purchase_secondary.svg}"/>
+                  <div>
+                     <h2>Werde jetzt Kunde</h2>
+                     <p> Jetzt Kunde werden und viele Vorteile sichern,
+                         wie  z.B. personalisierte Empfehlungen. </p>
+                     <button>Registieren</button>
+                  </div>
+               </div>
             </div>
             <div class="vertical-spacer s"></div>
-        </div>
-    </main>
+         </div>
+      </main>
     <footer th:replace="fragments/footer :: footer"></footer>
 </body>
 </html>
diff --git a/prototype/src/main/resources/templates/privacy.html b/prototype/src/main/resources/templates/privacy.html
index 41e5f9e..91d620b 100644
--- a/prototype/src/main/resources/templates/privacy.html
+++ b/prototype/src/main/resources/templates/privacy.html
@@ -7,10 +7,11 @@
 </head>
 <body>
     <nav th:replace="fragments/header :: header">Header</nav>
-    <main class='hero'>
+    <main>
         <div class='content-width'>
             <h1>Datenschutzerklärung</h1>
             <div>
+             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.
             </div>
         </div>
         <div class="vertical-spacer s"></div>
diff --git a/prototype/src/main/resources/templates/searchResults.html b/prototype/src/main/resources/templates/searchResults.html
index a24d3bc..230f81a 100644
--- a/prototype/src/main/resources/templates/searchResults.html
+++ b/prototype/src/main/resources/templates/searchResults.html
@@ -3,87 +3,71 @@
 <head>
     <meta charset="utf-8">
     <title>e-commerce</title>
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
     <link href="/css/ecom.css" rel="stylesheet"/>
-    <link href="/css/searchResults.css" rel="stylesheet"/>
 </head>
 <body>
 <nav th:replace="fragments/header :: header">Header</nav>
-<main>
-    <div class="hero">
-        <div class="searchresults">
-            <div class="row">
-                <div class="sidebar col-2">
-                    <h1>Kategorie</h1>
-                    <ul>
-                        <li><span>Aufnahmegeräte</span></li>
-                        <li><span>Computer</span></li>
-                        <li><span>Fernseher</span></li>
-                        <li><span>Handys</span></li>
-                        <li><span>Unterhaltungselektronik</span></li>
-                        <li><span>Sonstiges</span></li>
-                    </ul>
-                </div>
-                <div class="articlelist col-10">
-                    <div class="row article">
-                        <div class="col-3 articleimg">
-                            <img src="/img/product-1.jpg" />
-                        </div>
-                        <div class="col-9 articledesc">
-                            <h2>
-                                <form action="/articleDetail" method="GET">
-                                    <input type="submit" value="Tolle Kamera" class="articlelink">
-                                </form>
-                            </h2>
-                            <h1> 25.14 €</h1>
-                            <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>
-                    <hr>
-                    <div class="row article">
-                        <div class="col-3 articleimg">
-                            <img src="/img/product-2.jpg" />
-                        </div>
-                        <div class="col-9 articledesc">
-                            <h2>
-                                <form action="/articleDetail" method="GET">
-                                    <input type="submit" value="Bluetooth Kopfhörer" class="articlelink">
-                                </form>
-                            </h2>
-                            <h1> 10.14 €</h1>
-                            <p>
-                                Sind halt Kopfhörer ohne Kabel, mehr gibts da nich zu sagen.
-                            </p>
-                        </div>
-                    </div>
-                    <hr>
-                    <div class="row article">
-                        <div class="col-3 articleimg">
-                            <img src="/img/product-3.jpg" />
-                        </div>
-                        <div class="col-9 articledesc">
-                            <h2>
-                                <form action="/articleDetail" method="GET">
-                                    <input type="submit" value="???" class="articlelink">
-                                </form>
-                            </h2>
-                            <h1> 44.14 €</h1>
-                            <p>
-                                Ich weiß selbst nich was das genau sein soll.<br>
-                                Wenn dus willst kannst es gern haben, musst nur das Geld überweisen.
-                            </p>
-                        </div>
-                    </div>
-                </div>
+<div class="hero">
+<main class="sidebar-layout content-width">
+    <nav class="sidebar-layout">
+        <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>
+
+    <div class="content-width">
+        <div class='content-width'>
+            <h1>Suchergebnisse</h1>
+            <div class='grid m base shadow'>
+
+                <section>
+                    <img src="img/product-1.jpg">
+                    <h2>Tolle Kamera</h2>
+                    <p class='price'> 25.14 €</p>
+                    <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>
+                </section>
+
+                <section>
+                    <img src="img/product-2.jpg">
+                    <h2>Bluetooth Kopfhörer</h2>
+                    <p class='price'> 10.14 €</p>
+                    <p>
+                        Sind halt Kopfhörer ohne Kabel, mehr gibts da nich zu sagen.
+                    </p>
+                </section>
+
+                <section>
+                    <img src="img/product-3.jpg">
+                    <h2>???</h2>
+                    <p class='price'> 25.14 €</p>
+                    <p>
+                        Ich weiß selbst nich was das genau sein soll.<br>
+                        Wenn dus willst kannst es gern haben, musst nur das Geld überweisen.
+                    </p>
+                </section>
+
+                <section class="spacer"></section>
+                <section class="spacer"></section>
+                <section class="spacer"></section>
+                <section class="spacer"></section>
             </div>
         </div>
+        <div class="vertical-spacer s"></div>
     </div>
+
+
 </main>
+</div>
 <footer th:replace="fragments/footer :: footer"></footer>
 </body>
 </html>
\ No newline at end of file
diff --git a/prototype/src/main/resources/templates/shoppingCart.html b/prototype/src/main/resources/templates/shoppingCart.html
new file mode 100644
index 0000000..199c57f
--- /dev/null
+++ b/prototype/src/main/resources/templates/shoppingCart.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="utf-8">
+    <title>e-commerce</title>
+    <link href="/css/ecom.css" rel="stylesheet"/>
+</head>
+<body>
+<nav th:replace="fragments/header :: header">Header</nav>
+<main class="detailgrid">
+    <div class="l">
+        <h1 class="center-text">Warenkorb</h1>
+        <table>
+            <tr>
+                <th>Bild</th>
+                <th>Name</th>
+                <th>Preis</th>
+                <th>Menge</th>
+                <th></th>
+            </tr>
+
+            <tr>
+                <td><img th:src="@{/img/product-1.jpg}" class="s"/></td>
+                <td>Kamera</td>
+                <td>100,50 €</td>
+                <td>
+                    <select size="1">
+                        <option>1</option>
+                    </select>
+                </td>
+                <td>
+                    <button>löschen</button>
+                </td>
+            </tr>
+            <tr>
+                <td><img th:src="@{/img/product-2.jpg}" class="s"/></td>
+                <td>Earbuds</td>
+                <td>63,95 €</td>
+                <td>
+                    <select size="1">
+                        <option>1</option>
+                    </select>
+                </td>
+                <td>
+                    <button>löschen</button>
+                </td>
+            </tr>
+            <tr>
+                <td><img th:src="@{/img/product-3.jpg}" class="s"/></td>
+                <td>USB-Magic Light</td>
+                <td>11,90 €</td>
+                <td>
+                    <select size="1">
+                        <option>1</option>
+                    </select>
+                </td>
+                <td>
+                    <button>löschen</button>
+                </td>
+            </tr>
+            <tr>
+                <td><img th:src="@{/img/product-4.jpg}" class="s"/></td>
+                <td>3D Magic Stativ</td>
+                <td>15,99 €</td>
+                <td>
+                    <select size="1">
+                        <option>1</option>
+                    </select>
+                </td>
+                <td>
+                    <button>löschen</button>
+                </td>
+            </tr>
+            <tr>
+                <td><img th:src="@{/img/product-5.jpg}" class="s"/></td>
+                <td>Ersatzfernbedinung</td>
+                <td>7,95 €</td>
+                <td>
+                    <select size="1">
+                        <option>1</option>
+                    </select>
+                </td>
+                <td>
+                    <button>löschen</button>
+                </td>
+            </tr>
+        </table>
+        </p>
+    </div>
+    <div class="s">
+        <h1 class="center-text">Checkout</h1>
+        <div class="hero">
+            <div class="leftspace">
+                <h2>Bestellübersicht</h2>
+                <p>Artikel: 200,29 €</p>
+                <p>Lieferung: 5,00 €</p>
+                <h2 class="secondarytext">Gesamt: 205,29 €</h2>
+
+                <h2>Versandadresse:</h2>
+                <p>Max Mustermann</p>
+                <p>Musterstraße 42</p>
+                <p>42424 Mustertal</p>
+
+                <button class="secondary">kostenpflichtig bestellen</button>
+            </div>
+        </div>
+    </div>
+</main>
+<footer th:replace="fragments/footer :: footer"></footer>
+</body>
+</html>
\ No newline at end of file
diff --git a/prototype/src/main/resources/templates/terms.html b/prototype/src/main/resources/templates/terms.html
index 0df06db..4a8af5b 100644
--- a/prototype/src/main/resources/templates/terms.html
+++ b/prototype/src/main/resources/templates/terms.html
@@ -7,10 +7,11 @@
 </head>
 <body>
     <nav th:replace="fragments/header :: header">Header</nav>
-    <main class='hero'>
+    <main>
         <div class='content-width'>
             <h1>Allgemeine Geschäftsbedingungen</h1>
             <div>
+             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.
             </div>
         </div>
         <div class="vertical-spacer s"></div>