diff --git a/prototype/src/main/resources/static/css/ecom.css b/prototype/src/main/resources/static/css/ecom.css
index 5aa4831..0de46a3 100644
--- a/prototype/src/main/resources/static/css/ecom.css
+++ b/prototype/src/main/resources/static/css/ecom.css
@@ -195,7 +195,6 @@ a.section {
 p {
    padding-top: var(--u0);
    padding-bottom: var(--u0);
-   color: var(--c-black);
 }
 
 h1 {
@@ -742,6 +741,24 @@ fieldset label {
  * CONTENT
  */
 
+.card {
+   padding: var(--u0);
+   background-color: var(--c-primary);
+   color: var(--c-base);
+}
+
+.card.s {
+   width: 10rem;
+}
+
+.card.m {
+   width: 20rem;
+}
+
+.card.l {
+   width: 40rem;
+}
+
 .price {
    opacity: 75%;
    font-size: var(--u1);
@@ -752,15 +769,9 @@ fieldset label {
     text-align: center;
 }
 
-.leftspace {
-    padding-left: 1em;
+.no-padding {
+   padding: 0px;
 }
-.noPadding {
-   padding: 0rem;
-}
-.noMargin {
-   margin: 0rem;
-}
-.Margin-left.s {
-   margin-left: 2rem;
+.no-margin {
+   margin: 0px;
 }
diff --git a/prototype/src/main/resources/templates/register.html b/prototype/src/main/resources/templates/register.html
index dce2736..2125d5c 100644
--- a/prototype/src/main/resources/templates/register.html
+++ b/prototype/src/main/resources/templates/register.html
@@ -59,7 +59,7 @@
 
          <div>
             <label for="address">Anschrift</label>
-            <textarea rows="5" class="full-width" type="text" name="address" placeholder="Optional: Zusatz&#10;Optional: Unternehmen&#10;Straße Hausnummer&#10;Postleitzeit Ort&#10Land"></textarea>
+            <textarea rows="5" class="full-width" type="text" name="address" placeholder="Optional: Zusatz&#10;Optional: Unternehmen&#10;Straße Hausnummer&#10;Postleitzeit Ort&#10;Land"></textarea>
          </div>
          <fieldset>
             <input type="radio" name="type" value="priv" id="type-priv" required>
diff --git a/prototype/src/main/resources/templates/shop/checkout.html b/prototype/src/main/resources/templates/shop/checkout.html
index e69de29..4896277 100644
--- a/prototype/src/main/resources/templates/shop/checkout.html
+++ b/prototype/src/main/resources/templates/shop/checkout.html
@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
+
+<head>
+   <meta charset="utf-8">
+   <title>e-commerce</title>
+   <link rel="stylesheet" th:href="@{/css/ecom.css}" />
+   <link rel="stylesheet" th:href="@{/css/listedArticles.css}" />
+   <script th:src="@{/js/filterTable.js}"></script>
+
+</head>
+
+<body>
+   <nav th:replace="/fragments/header :: header">Header</nav>
+   <div class="sidebar-layout content-width">
+      <div>
+         <h1>Warenkorb</h1>
+      </div>
+      <nav></nav>
+   </div>
+   <!-- TODO: this is suboptimal on mobile -->
+   <main class="content-width sidebar-layout">
+      <div style="min-height: 100vh;">
+         <table>
+            <tr>
+               <th>Bild</th>
+               <th>Name</th>
+               <th>Preis (Brutto)</th>
+               <th>Menge</th>
+               <th></th>
+            </tr>
+            <tr>
+               <td><a th:href="@{/shop/articles/4151}"><img th:src="@{/img/product-1.jpg}" class="s" /><a/></td>
+               <td><a th:href="@{/shop/articles/4151}">Kamera<a/></td>
+               <td>100,50 €</td>
+               <td>
+                  <select size="1">
+                     <option value="1" selected>1</option>
+                     <option value="2">2</option>
+                     <option value="3">3</option>
+                     <option value="4">4</option>
+                     <option value="5">5</option>
+                  </select>
+               </td>
+               <td>
+                  <button class="small">Entfernen</button>
+               </td>
+            </tr>
+            <tr>
+               <td><a th:href="@{/shop/articles/4151}"><img th:src="@{/img/product-2.jpg}" class="s" /><a/></td>
+               <td><a th:href="@{/shop/articles/4151}">Earbuds<a/></td>
+               <td>63,95 €</td>
+               <td>
+                  <select size="1">
+                     <option value="1" selected>1</option>
+                     <option value="2">2</option>
+                     <option value="3">3</option>
+                     <option value="4">4</option>
+                     <option value="5">5</option>
+                  </select>
+               </td>
+               <td>
+                  <button>Entfernen</button>
+               </td>
+            </tr>
+            <tr>
+               <td><a th:href="@{/shop/articles/4151}"><img th:src="@{/img/product-3.jpg}" class="s" /><a/></td>
+               <td><a th:href="@{/shop/articles/4151}">USB-Magic Light<a/></td>
+               <td>11,90 €</td>
+               <td>
+                  <select size="1">
+                     <option value="1">1</option>
+                     <option value="2" selected>2</option>
+                     <option value="3">3</option>
+                     <option value="4">4</option>
+                     <option value="5">5</option>
+                  </select>
+               </td>
+               <td>
+                  <button>Entfernen</button>
+               </td>
+            </tr>
+            <tr>
+               <td><a th:href="@{/shop/articles/4151}"><img th:src="@{/img/product-4.jpg}" class="s" /><a/></td>
+               <td><a th:href="@{/shop/articles/4151}">3D Magic Stativ<a/></td>
+               <td>15,99 €</td>
+               <td>
+                  <select size="1">
+                     <option value="1">1</option>
+                     <option value="2">2</option>
+                     <option value="3">3</option>
+                     <option value="4">4</option>
+                     <option value="5" selected>5</option>
+                  </select>
+               </td>
+               <td>
+                  <button>Entfernen</button>
+               </td>
+            </tr>
+            <tr>
+               <td><a th:href="@{/shop/articles/4151}"><img th:src="@{/img/product-5.jpg}" class="s" /><a/></td>
+               <td><a th:href="@{/shop/articles/4151}">Ersatzfernbedinung<a/></td>
+               <td>7,95 €</td>
+               <td>
+                  <select size="1">
+                     <option value="1" selected>1</option>
+                     <option value="2">2</option>
+                     <option value="3">3</option>
+                     <option value="4">4</option>
+                     <option value="5">5</option>
+                  </select>
+               </td>
+               <td>
+                  <button>Entfernen</button>
+               </td>
+            </tr>
+         </table>
+      </div>
+      <form method="POST" th:action="@{/shop/checkoutFinish}">
+         <div class="detailflex hero">
+            <div>
+               <h1>Checkout</h1>
+            </div>
+            <div>
+               <h2>Lieferadresse:</h2>
+               <textarea rows="5" class="full-width" type="text" name="address" placeholder="Optional: Zusatz&#10;Optional: Unternehmen&#10;Straße Hausnummer&#10;Postleitzeit Ort&#10;Land">
+Max Mustermann
+Musterstraße 42
+42424 Mustertal
+               </textarea>
+            </div>
+            <div>
+               <h2>Zahlung:</h2>
+               <fieldset>
+                  <input type="radio" name="type" value="priv" id="payment-card" required selected>
+                  <label for="payment-card">Kartenzahlung</label> <br />
+                  <input class="full-width" type="text" id="cardnumber" name="cardnumber" placeholder="Kartennummer" required />
+               </fieldset>
+            </div>
+            <div>
+               <h2>Bestellübersicht</h2>
+               <!-- Dirty  TODO: -->
+               <table>
+                  <tr>
+                     <th>Artikel (Netto)</th>
+                     <th>200,29 €</th>
+                  </tr>
+                  <tr>
+                     <th>Umsatzsteuer (19%)</th>
+                     <th>35,00 €</th>
+                  </tr>
+                  <tr>
+                     <th>Umsatzsteuer (7%)</th>
+                     <th>2,50 €</th>
+                  </tr>
+                  <tr class="secondary">
+                     <th>Gesamt:</th>
+                     <th>240,79 €</th>
+                  </tr>
+                  <tr class="secondary">
+                     <th colspan="2" class=" no-padding"><button class=" no-margin secondary full-width">jetzt kostenpflichtig bestellen</button></th>
+                  </tr>
+               </table>
+            </div>
+         </div>
+      </form>
+   </main>
+   <footer th:replace="/fragments/footer :: footer"></footer>
+
+</body>
+</html>
