diff --git a/prototype/src/main/resources/static/css/ecom.css b/prototype/src/main/resources/static/css/ecom.css
index 9fc6e57..d235d53 100644
--- a/prototype/src/main/resources/static/css/ecom.css
+++ b/prototype/src/main/resources/static/css/ecom.css
@@ -188,6 +188,10 @@ a:visited {
    color: inherit;
 }
 
+a.section {
+   text-decoration: none;
+}
+
 p {
    padding-top: var(--u0);
    padding-bottom: var(--u0);
diff --git a/prototype/src/main/resources/templates/shop/index.html b/prototype/src/main/resources/templates/shop/index.html
index e69de29..d901e14 100644
--- a/prototype/src/main/resources/templates/shop/index.html
+++ b/prototype/src/main/resources/templates/shop/index.html
@@ -0,0 +1,98 @@
+<!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>Datenschutzerklärung</title>
+   <link rel="stylesheet" th: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> <a th:href="@{/shop/articles/1234}" class="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>
+                  </a>
+               </section>
+               <section> <a th:href="@{/shop/articles/1234}" class="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>
+                  </a>
+               </section>
+               <section> <a th:href="@{/shop/articles/1234}" class="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>
+                  </a>
+               </section>
+               <section> <a th:href="@{/shop/articles/1234}" class="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>
+                  </a>
+               </section>
+               <section>
+                  <a th:href="@{/shop/articles/1234}" class="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>
+                  </a>
+               </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>
+      <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>
+         </div>
+         <div class="vertical-spacer s"></div>
+      </div>
+   </main>
+   <footer th:replace="/fragments/footer :: footer"></footer>
+</body>
+
+</html>
