diff --git a/prototype/src/main/java/org/hso/ecommerce/app/GreetingController.java b/prototype/src/main/java/org/hso/ecommerce/app/RequestController.java
similarity index 78%
rename from prototype/src/main/java/org/hso/ecommerce/app/GreetingController.java
rename to prototype/src/main/java/org/hso/ecommerce/app/RequestController.java
index 3f3b79c..bbc4024 100644
--- a/prototype/src/main/java/org/hso/ecommerce/app/GreetingController.java
+++ b/prototype/src/main/java/org/hso/ecommerce/app/RequestController.java
@@ -6,7 +6,17 @@ import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RequestParam;
 
 @Controller
-public class GreetingController {
+public class RequestController {
+
+    @GetMapping("/")
+    public String greeting() {
+        return "redirect:/home";
+    }
+
+    @GetMapping("/home")
+    public String home() {
+        return "home";
+    }
 
     @GetMapping("/greeting")
     public String greeting(@RequestParam(name = "name", required = false, defaultValue = "World") String name, Model model) {
@@ -14,10 +24,4 @@ public class GreetingController {
         return "greeting";
     }
 
-    @GetMapping("/home")
-    public String home(Model model) {
-        //model.addAttribute("name", name);
-        return "home";
-    }
-
 }
diff --git a/prototype/src/main/resources/static/css/ecom.css b/prototype/src/main/resources/static/css/ecom.css
new file mode 100644
index 0000000..47ae8cb
--- /dev/null
+++ b/prototype/src/main/resources/static/css/ecom.css
@@ -0,0 +1,404 @@
+:root {
+   font-family: "Fira Sans";
+   line-height: 1.15;
+
+   --u5:  calc(1em * 1.5 * 1.5 * 1.5 * 1.5 * 1.5 );
+   --u4:  calc(1em * 1.5 * 1.5 * 1.5 * 1.5);
+   --u3:  calc(1em * 1.5 * 1.5 * 1.5);
+   --u2:  calc(1em * 1.5 * 1.5);
+   --u1:  calc(1em * 1.5);
+   --u0:  calc(1em);
+   --u-1: calc(1em * 0.666);
+   --u-2: calc(1em * 0.666 * 0.666);
+   --u-3: calc(1em * 0.666 * 0.666 * 0.666);
+   --u-4: calc(1em * 0.666 * 0.666 * 0.666 * 0.666);
+
+
+   --root-c-base: #ecf0f1;
+   --root-c-base-highlight: #bdc3c7;
+
+   --root-c-primary: #1abc9c;
+   --root-c-primary-highlight: #16a085;
+
+   --root-c-secondary: #9b59b6;
+   --root-c-secondary-highlight: #8e44ad;
+
+   --root-c-black: #2c3e50;
+   --root-c-black-highlight: #34495e;
+
+
+   --c-base: var(--root-c-base);
+   --c-base-highlight: var(--root-c-base-highlight);
+
+   --c-primary:var(--root-c-primary);
+   --c-primary-highlight: var(--root-c-primary-highlight);
+
+   --c-secondary: var(--c-secondary);
+   --c-secondary-highlight: var(--root-c-secondary-highlight);
+
+   --c-black: var(--root-c-black);
+   --c-black-highlight: var(--root-c-black-highlight);
+}
+
+.primary {
+   --c-base: var(--root-c-base);
+   --c-base-highlight: var(--root-c-base-highlight);
+
+   --c-primary:var(--root-c-primary);
+   --c-primary-highlight: var(--root-c-primary-highlight);
+
+   --c-secondary: var(--c-secondary);
+   --c-secondary-highlight: var(--root-c-secondary-highlight);
+
+   --c-black: var(--root-c-black);
+   --c-black: var(--root-c-black-highlight);
+}
+
+.secondary {
+   --c-base: var(--root-c-base);
+   --c-base-highlight: var(--root-c-base-highlight);
+
+   --c-primary:var(--root-c-secondary);
+   --c-primary-highlight: var(--root-c-secondary-highlight);
+
+   --c-secondary: var(--root-c-primary);
+   --c-secondary-highlight: var(--root-c-primary-highlight);
+
+   --c-black: var(--root-c-black);
+   --c-black-highlight: var(--root-c-black-highlight);
+}
+
+.inverted {
+   --c-base: var(--root-c-black);
+   --c-base-highlight: var(--root-c-black-highlight);
+
+   --c-primary:var(--root-c-primary);
+   --c-primary-highlight: var(--root-c-primary-highlight);
+
+   --c-secondary: var(--c-secondary);
+   --c-secondary-highlight: var(--root-c-secondary-highlight);
+
+   --c-black: var(--root-c-base);
+   --c-black-highlight: var(--root-c-base-highlight);
+}
+
+
+* {
+    margin: 0em;
+    padding: 0em;
+    box-sizing: border-box;
+}
+
+html, body {
+    font-size: var(--u0);
+    height: 100%;
+    background-color: var(--c-base);
+    color: var(--c-black)
+}
+
+
+h1, h2, h3, h4, h5 {
+   font-family: "Fira Mono";
+   padding-top: 1em;
+   padding-bottom: 0.618em;
+   text-transform: uppercase;
+}
+
+h1 {
+   font-size: var(--u2);
+}
+
+h2 {
+   font-size: var(--u1);
+}
+
+h3, h4, h5 {
+   font-size: var(--u0);
+}
+
+img {
+   width: 100%;
+   object-fit: cover;
+}
+
+li {
+    list-style-type: none;
+}
+
+/*
+ *  NAV
+ */
+
+nav h1 {
+   font-size: var(--u0);
+   margin: 0rem;
+}
+
+
+/*
+ * FOOTER
+ */
+
+footer {
+   padding-top: var(--u3);
+   padding-bottom:  var(--u1);
+}
+
+/*
+ * INPUTS
+ */
+
+input[type="text"],
+input[type="password"] {
+
+   background-color: var(--c-base);
+
+   border: none;
+
+   border-radius: var(--u-2);
+   margin-top: var(--u0);
+   margin-bottom: var(--u0);
+
+   padding: var(--u0);
+   font-size: var(--u0);
+   color: var(--c-black);
+
+   /* box-shadow: var(--s-0-secondary); */
+}
+
+input[type="text"]::placeholder,
+input[type="password"]::placeholder  {
+  color: var(--c-primary-highlight);
+  opacity: 50%;
+}
+
+button, .botton {
+   font-family: "Fira Mono";
+
+   background-color: var(--c-primary);
+   color: var(--c-base);
+
+   border: none;
+   border-radius: var(--u-2);
+
+   margin-bottom: var(--u0);
+   margin-top: var(--u0);
+
+   padding: var(--u0);
+
+   min-width: 10em;
+
+   font-family: "Fira Mono";
+   text-transform: uppercase;
+   font-size: var(--u0);
+
+   /* box-shadow: var(--s-0-secondary); */
+}
+
+button:active, .botton:active {
+   background-color: var(--c-primary-highlight);
+}
+
+input[type="text"],
+input[type="password"],
+button,
+.button {
+   transition: all 0.1s ease-out;
+}
+
+label {
+   display: block;
+   min-width: 10em;
+}
+
+/*
+ * HERO
+ */
+
+.hero {
+   background-color: var(--c-primary);
+   color: var(--c-base);
+}
+
+.hero-black {
+   background-color: var(--c-black);
+   color: var(--c-base);
+}
+
+/*
+ * LAYOUT
+ */
+
+.content-width {
+    max-width: 80rem;
+    margin-left: auto;
+    margin-right: auto;
+
+    padding-left: var(--u0);
+    padding-right: var(--u0);
+}
+
+.flex {
+   display: flex;
+   align-items: center;
+   justify-content: space-between;
+   flex-wrap: wrap;
+}
+
+.flex > * {
+   margin: var(--u0);
+}
+
+.flex > .spacer {
+   flex: 1;
+}
+
+.grid {
+   display: flex;
+   justify-content: flex-start;
+   flex-wrap: wrap;
+}
+
+.grid > * {
+    flex: 1;
+    margin: var(--u0);
+    padding: var(--u0);
+    border-radius: var(--u0);
+}
+
+.grid.base > * {
+   background-color: var(--c-base);
+   color: var(--c-black);
+}
+
+.grid.black > * {
+   background-color: var(--c-black);
+   color: var(--c-base);
+}
+
+.grid.primary > * {
+   background-color: var(--c-primary);
+   color: var(--c-base);
+}
+
+.grid.secondary > * {
+   background-color: var(--c-primary-highlight);
+   color: var(--c-base);
+}
+
+.hero-primary .grid.shadow > * {
+   /* box-shadow: var(--s-0-secondary); */
+}
+
+.hero-black .grid.shadow > * {
+   /* box-shadow: var(--s-0-secondary); */
+}
+
+
+.grid.s > .spacer {
+   box-shadow: none;
+
+   margin: calc(var(--u0) * 2);
+   padding: 0px;
+
+   width: 10rem;
+   max-width: 10rem;
+   min-width: 7.5rem;
+   height: 0px;
+}
+
+.grid.s > * {
+   width: 10rem;
+   max-width: 10rem;
+   min-width: 7.5rem;
+}
+
+
+.grid.m > .spacer {
+   box-shadow: none;
+
+   margin: calc(var(--u0) * 2);
+   padding: 0px;
+
+   width: 20rem;
+   max-width: 20rem;
+   min-width: 15rem;
+   height: 0px;
+   padding: 0px;
+}
+
+.grid.m > * {
+   width: 20rem;
+   max-width: 20rem;
+   min-width: 15rem;
+}
+
+.grid.l > .spacer {
+   box-shadow: none;
+
+   margin: calc(var(--u0) * 2);
+   padding: 0px;
+
+   width: 40rem;
+   max-width: 40rem;
+   min-width: 15rem;
+   height: 0px;
+   padding: 0px;
+}
+
+.grid.l > * {
+   width: 40rem;
+   max-width: 40rem;
+   min-width: 15rem;
+}
+
+.vertical-spacer.s {
+   min-height: 10rem;
+}
+
+.vertical-spacer.m {
+   min-height: 20rem;
+}
+
+.vertical-spacer.l {
+   min-height: 40rem;
+}
+
+/*
+ * Impov
+ */
+
+.input-icon {
+   /* box-shadow: var(--s-0-secondary); */
+   display: flex;
+   padding: 0px;
+
+   border-radius: var(--u0);
+}
+
+.input-icon > input {
+   flex: 1;
+   margin: 0px;
+   border-top-right-radius: 0px;
+   border-bottom-right-radius: 0px;
+   box-shadow: none;
+}
+
+.input-icon > button {
+   margin: 0px;
+
+   border-top-left-radius: 0px;
+   border-bottom-left-radius: 0px;
+   box-shadow: none;
+}
+
+
+/*
+ * CONTENT
+ */
+
+.price {
+   opacity: 75%;
+   font-size: var(--u1);
+   text-align: right;
+}
diff --git a/prototype/src/main/resources/static/img/error_404_illustatus.svg b/prototype/src/main/resources/static/img/error_404_illustatus.svg
new file mode 100644
index 0000000..8f39065
--- /dev/null
+++ b/prototype/src/main/resources/static/img/error_404_illustatus.svg
@@ -0,0 +1,261 @@
+
+        <svg id="mainImage_create" data-name="mainImage" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 171.2 81.5">
+          <style id="svgStyle">
+            @import url('https://fonts.googleapis.com/css?family=Merriweather');
+            .changeColor {
+              fill: #4f86ed;
+            }
+
+            #title {
+              font-size: 50%;
+              font-family: 'Merriweather', serif;
+            }
+
+            .cls-1 {
+              opacity: 0.3;
+            }
+
+            .cls-7 {
+              opacity: 0.8;
+            }
+
+            .cls-2 {
+              fill: #fff;
+            }
+
+            .cls-10,
+            .cls-11,
+            .cls-12,
+            .cls-14,
+            .cls-16,
+            .cls-3 {
+              fill: none;
+            }
+
+            .cls-3 {
+              stroke: #5c7690;
+            }
+
+            .cls-10,
+            .cls-11,
+            .cls-12,
+            .cls-3 {
+              stroke-miterlimit: 10;
+            }
+
+            .cls-14,
+            .cls-15,
+            .cls-16,
+            .cls-3 {
+              stroke-width: 0.5px;
+            }
+
+            .cls-4 {
+              fill: #ffe1d9;
+            }
+
+            .cls-5 {
+              fill: #ffcfbf;
+            }
+
+            .cls-6 {
+              fill: #fecbb6;
+            }
+
+            .cls-9 {
+              fill: #fecb02;
+            }
+
+            .cls-10,
+            .cls-12 {
+              stroke: #d26f51;
+            }
+
+            .cls-10,
+            .cls-11 {
+              stroke-width: 0.38px;
+            }
+
+            .cls-11 {
+              stroke: #000;
+            }
+
+            .cls-12 {
+              stroke-width: 0.19px;
+            }
+
+            .cls-13 {
+              opacity: 0.45;
+            }
+
+            .cls-14,
+            .cls-15,
+            .cls-16 {
+              stroke: #b0bec5;
+              stroke-linejoin: round;
+            }
+
+            .cls-15 {
+              fill: #edf0f2;
+            }
+
+            .cls-16 {
+              stroke-linecap: round;
+            }
+
+            .cls-17 {
+              font-family: 'PT Sans', sans-serif;
+              font-size: 49.87px;
+              font-weight: 700;
+            }
+
+            .cls-18 {
+              fill: #fffdbb;
+              opacity: 0.5;
+            }
+
+
+            /*---------------------------
+                   SVG Animate
+          ---------------------------*/
+            .earMove {
+              transition: all ease-in-out 2s;
+              transform-origin: 50% 50%;
+              animation: earmove 1.5s linear infinite alternate;
+            }
+
+            .faceMove {
+              transition: all ease-in-out 2s;
+              transform-origin: 50% 50%;
+              animation: move 1.5s linear infinite alternate;
+            }
+
+            .neckMove {
+              transition: all ease-in-out 2s;
+              transform-origin: 50% 50%;
+              animation: neck 1.5s linear infinite alternate;
+            }
+
+
+            @keyframes earmove {
+              0% {
+                transform: translateX(-0.3px) translateY(0.6px);
+              }
+              30% {
+                transform: translateX(-0.3px) translateY(0.6px);
+              }
+
+              60% {
+                transform: translateX(-0.7px) translateY(0px);
+              }
+
+              70% {
+                transform: translateX(-0.7px) translateY(-0.3px);
+              }
+              100% {
+                transform: translateX(-0.7px) translateY(-0.3px);
+              }
+            }
+
+            @keyframes move {
+              0% {
+                transform: translateX(-0.3px) translateY(0.6px);
+              }
+              30% {
+                transform: translateX(-0.3px) translateY(0.6px);
+              }
+
+              60% {
+                transform: translateX(2px) translateY(0px);
+              }
+
+              70% {
+                transform: translateX(2px) translateY(-0.3px);
+              }
+              100% {
+                transform: translateX(2px) translateY(-0.3px);
+              }
+            }
+
+            @keyframes neck {
+              0% {
+                transform: translateY(0.7px);
+              }
+              50% {
+                transform: translateY(0.7px);
+              }
+              100% {
+                transform: translateY(0px);
+              }
+            }
+          </style>
+          <path id="c-1" class="changeColor cls-1" d="M46.62,52.5c5.78,4.9,21.14,8.4,39.19,8.4s33.41-3.5,39.19-8.4c-5.78-4.9-21.14-8.4-39.19-8.4S52.41,47.6,46.62,52.5Z" style="fill: rgb(0, 21, 255);"></path>
+          <path class="cls-2" d="M99.73,47.71H68.65a7.13,7.13,0,0,0-7.13,7.13V60a152.58,152.58,0,0,0,24.3,1.83,157.87,157.87,0,0,0,21.05-1.35V54.84A7.13,7.13,0,0,0,99.73,47.71Z"></path>
+          <path class="cls-3" d="M123.56,55.81C115,58.94,101.27,61,85.81,61c-26,0-47-5.71-47-12.76,0-3.45,5.05-6.58,13.25-8.88"></path>
+          <path class="cls-3" d="M55.37,38.47a140,140,0,0,1,30.44-3c26,0,47,5.71,47,12.76,0,2.4-2.44,4.65-6.69,6.57"></path>
+          <path class="cls-3" d="M53.41,38.95l.94-.24"></path>
+          <path class="cls-4" d="M91.68,47.71l-.75-11.2L79.15,43.84l-1.69,3.87H75.79c0,3.36,3.76,6.08,8.4,6.08s8.4-2.72,8.4-6.08Z"></path>
+          <path class="cls-5 neckMove" d="M78,46.53a27.19,27.19,0,0,0,6.41.82c3.1,0,7.11-2.19,7.11-2.19l-.42-6.2L79.15,43.84Z"></path>
+          <polygon class="earMove" points="92.59 32.22 92.59 28.5 76.77 27.71 76.77 32.22 92.59 32.22"></polygon>
+          <circle class="cls-6 earMove" cx="78.06" cy="34.04" r="2.47"></circle>
+          <path class="cls-4" d="M81.74,57.06,60.63,49.72h0A6.72,6.72,0,1,0,57.7,62.49H93.25C93.25,56.78,81.74,57.06,81.74,57.06Z"></path>
+          <path class="cls-4" d="M77.46,25H90.92a0,0,0,0,1,0,0V39.38a6.73,6.73,0,0,1-6.73,6.73h0a6.73,6.73,0,0,1-6.73-6.73V25A0,0,0,0,1,77.46,25Z"></path>
+          <rect id="c-2" class="changeColor cls-7" x="74.82" y="26.48" width="19.14" height="2.45" transform="translate(1.29 -3.65) rotate(2.49)" style="fill: rgb(0, 21, 255);"></rect>
+          <path id="c-3" class="changeColor cls-7" d="M84.36,18.69h.5a7.8,7.8,0,0,1,7.8,7.8v0a0,0,0,0,1,0,0H76.56a0,0,0,0,1,0,0v0A7.8,7.8,0,0,1,84.36,18.69Z" transform="translate(1.06 -3.66) rotate(2.49)" style="fill: rgb(0, 21, 255);"></path>
+          <polygon id="c-4" class="changeColor cls-8" points="82.44 23.89 92.18 24.32 92.59 24.34 92.48 26.84 80.96 26.33 82.44 23.89" style="fill: rgb(0, 21, 255);"></polygon>
+          <circle class="cls-9 faceMove" cx="78.72" cy="23.73" r="3.73" transform="translate(51.58 101.34) rotate(-87.51)"></circle>
+          <circle class="cls-2 faceMove" cx="78.72" cy="23.73" r="2.36" transform="translate(51.58 101.34) rotate(-87.51)"></circle>
+          <circle class="cls-4 earMove" cx="90.92" cy="34.04" r="2.47"></circle>
+          <path class="cls-4" d="M112.2,53l-9.87-21.92-3-5.48-11.86-.22,7.42,3.35H91.55l5.82,4.58,2,22.26h0A6.72,6.72,0,1,0,112.2,53Z"></path>
+          <ellipse class="faceMove" cx="80.09" cy="33.12" rx="0.53" ry="0.59"></ellipse>
+          <ellipse class="faceMove" cx="86.34" cy="33.12" rx="0.53" ry="0.59"></ellipse>
+          <polyline class="cls-10 faceMove" points="84.19 31.08 81.74 37.01 84.39 37.01"></polyline>
+          <path class="cls-10 faceMove" d="M83.06,40.36a4,4,0,0,1,2.75-1"></path>
+          <line class="cls-11 faceMove" x1="81.07" y1="30.33" x2="78.47" y2="30.58"></line>
+          <line class="cls-11 faceMove" x1="86.34" y1="30.45" x2="88.15" y2="31.08"></line>
+          <line class="cls-12" x1="106.86" y1="47.82" x2="110.99" y2="46.11"></line>
+          <line class="cls-12" x1="107.43" y1="49.9" x2="111.55" y2="48.19"></line>
+          <line class="cls-12" x1="107.99" y1="51.98" x2="112.11" y2="50.27"></line>
+          <g class="cls-13">
+            <rect class="cls-14" x="85.81" y="2.46" width="10.77" height="3.5"></rect>
+            <rect class="cls-15" x="96.58" y="2.46" width="10.77" height="3.5"></rect>
+            <rect class="cls-14" x="92.19" y="5.95" width="10.77" height="3.5"></rect>
+            <line class="cls-16" x1="107.36" y1="5.95" x2="109.63" y2="5.95"></line>
+            <line class="cls-16" x1="110.68" y1="5.95" x2="111.57" y2="5.95"></line>
+          </g>
+          <g class="cls-13">
+            <rect class="cls-16" x="125" y="23.12" width="10.77" height="3.5"></rect>
+            <rect class="cls-15" x="130.39" y="26.62" width="10.77" height="3.5"></rect>
+            <rect class="cls-16" x="119.62" y="26.62" width="10.77" height="3.5"></rect>
+            <line class="cls-16" x1="141.16" y1="26.62" x2="145.73" y2="26.62"></line>
+            <line class="cls-16" x1="125" y1="23.12" x2="115.4" y2="23.12"></line>
+            <line class="cls-16" x1="117.95" y1="26.62" x2="115.4" y2="26.62"></line>
+          </g>
+          <g class="cls-13">
+            <rect class="cls-16" x="39.34" y="16.12" width="10.77" height="3.5"></rect>
+            <rect class="cls-16" x="39.34" y="23.11" width="10.77" height="3.5"></rect>
+            <rect class="cls-16" x="50.11" y="23.11" width="10.77" height="3.5"></rect>
+            <rect class="cls-16" x="50.11" y="16.12" width="10.77" height="3.5"></rect>
+            <rect class="cls-15" x="44" y="19.61" width="10.77" height="3.5"></rect>
+            <rect class="cls-16" x="33.23" y="19.61" width="10.77" height="3.5"></rect>
+            <line class="cls-16" x1="60.89" y1="19.61" x2="65.51" y2="19.61"></line>
+            <line class="cls-16" x1="39.34" y1="16.12" x2="35.46" y2="16.12"></line>
+            <line class="cls-16" x1="36.45" y1="26.61" x2="33.23" y2="26.61"></line>
+            <line class="cls-16" x1="63.2" y1="23.11" x2="65.51" y2="23.11"></line>
+          </g>
+          <polyline class="cls-3" points="115.4 58.12 115.4 38.27 120.2 37.01"></polyline>
+          <polyline class="cls-3" points="129.01 53.21 129.01 43.14 131.74 42.13"></polyline>
+          <path class="cls-3" d="M115.4,42.13a53.27,53.27,0,0,1,8,2A42,42,0,0,1,129,47"></path>
+          <path class="cls-3" d="M115.4,47.34a53.27,53.27,0,0,1,8,2A42,42,0,0,1,129,52.22"></path>
+          <path class="cls-3" d="M115.4,52.56a53.27,53.27,0,0,1,8,2l1,.42"></path>
+          <path class="cls-18 faceMove" d="M78.84,26.09l0-4.71L68.05,18.32a.91.91,0,0,0-.45-.13c-1.17,0-2.11,2.46-2.11,5.5s.95,5.5,2.11,5.5a.9.9,0,0,0,.44-.12Z"></path>
+          <path class="cls-5" d="M57.7,62.49H93.25A3.67,3.67,0,0,0,92.92,61H53.43A6.69,6.69,0,0,0,57.7,62.49Z"></path>
+          <path class="cls-12" d="M88.15,60.27s1.7.95,1.7,2.22"></path>
+          <path class="cls-5" d="M101.81,61a6.68,6.68,0,0,0,8.51,0Z"></path>
+          <polygon class="cls-5" points="90.92 30.25 77.46 29.69 77.46 28.64 90.92 29.22 90.92 30.25"></polygon>
+          <text id="title" transform="matrix(1 0 0 1 44.7249 78)">Oops, Page not found</text>
+        </svg>
+
+        <!-- <h1 id="title">404 Page not found</h1> -->
+        <!-- <button id="newBtn" class="btn" disabled>&#8594; &nbsp;Back to Home</button> -->
+      
\ No newline at end of file
diff --git a/prototype/src/main/resources/static/img/error_generic_illustatus.svg b/prototype/src/main/resources/static/img/error_generic_illustatus.svg
new file mode 100644
index 0000000..15955fe
--- /dev/null
+++ b/prototype/src/main/resources/static/img/error_generic_illustatus.svg
@@ -0,0 +1,261 @@
+
+        <svg id="mainImage_create" data-name="mainImage" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 171.2 81.5">
+          <style id="svgStyle">
+            @import url('https://fonts.googleapis.com/css?family=Merriweather');
+            .changeColor {
+              fill: #4f86ed;
+            }
+
+            #title {
+              font-size: 50%;
+              font-family: 'Merriweather', serif;
+            }
+
+            .cls-1 {
+              opacity: 0.3;
+            }
+
+            .cls-7 {
+              opacity: 0.8;
+            }
+
+            .cls-2 {
+              fill: #fff;
+            }
+
+            .cls-10,
+            .cls-11,
+            .cls-12,
+            .cls-14,
+            .cls-16,
+            .cls-3 {
+              fill: none;
+            }
+
+            .cls-3 {
+              stroke: #5c7690;
+            }
+
+            .cls-10,
+            .cls-11,
+            .cls-12,
+            .cls-3 {
+              stroke-miterlimit: 10;
+            }
+
+            .cls-14,
+            .cls-15,
+            .cls-16,
+            .cls-3 {
+              stroke-width: 0.5px;
+            }
+
+            .cls-4 {
+              fill: #ffe1d9;
+            }
+
+            .cls-5 {
+              fill: #ffcfbf;
+            }
+
+            .cls-6 {
+              fill: #fecbb6;
+            }
+
+            .cls-9 {
+              fill: #fecb02;
+            }
+
+            .cls-10,
+            .cls-12 {
+              stroke: #d26f51;
+            }
+
+            .cls-10,
+            .cls-11 {
+              stroke-width: 0.38px;
+            }
+
+            .cls-11 {
+              stroke: #000;
+            }
+
+            .cls-12 {
+              stroke-width: 0.19px;
+            }
+
+            .cls-13 {
+              opacity: 0.45;
+            }
+
+            .cls-14,
+            .cls-15,
+            .cls-16 {
+              stroke: #b0bec5;
+              stroke-linejoin: round;
+            }
+
+            .cls-15 {
+              fill: #edf0f2;
+            }
+
+            .cls-16 {
+              stroke-linecap: round;
+            }
+
+            .cls-17 {
+              font-family: 'PT Sans', sans-serif;
+              font-size: 49.87px;
+              font-weight: 700;
+            }
+
+            .cls-18 {
+              fill: #fffdbb;
+              opacity: 0.5;
+            }
+
+
+            /*---------------------------
+                   SVG Animate
+          ---------------------------*/
+            .earMove {
+              transition: all ease-in-out 2s;
+              transform-origin: 50% 50%;
+              animation: earmove 1.5s linear infinite alternate;
+            }
+
+            .faceMove {
+              transition: all ease-in-out 2s;
+              transform-origin: 50% 50%;
+              animation: move 1.5s linear infinite alternate;
+            }
+
+            .neckMove {
+              transition: all ease-in-out 2s;
+              transform-origin: 50% 50%;
+              animation: neck 1.5s linear infinite alternate;
+            }
+
+
+            @keyframes earmove {
+              0% {
+                transform: translateX(-0.3px) translateY(0.6px);
+              }
+              30% {
+                transform: translateX(-0.3px) translateY(0.6px);
+              }
+
+              60% {
+                transform: translateX(-0.7px) translateY(0px);
+              }
+
+              70% {
+                transform: translateX(-0.7px) translateY(-0.3px);
+              }
+              100% {
+                transform: translateX(-0.7px) translateY(-0.3px);
+              }
+            }
+
+            @keyframes move {
+              0% {
+                transform: translateX(-0.3px) translateY(0.6px);
+              }
+              30% {
+                transform: translateX(-0.3px) translateY(0.6px);
+              }
+
+              60% {
+                transform: translateX(2px) translateY(0px);
+              }
+
+              70% {
+                transform: translateX(2px) translateY(-0.3px);
+              }
+              100% {
+                transform: translateX(2px) translateY(-0.3px);
+              }
+            }
+
+            @keyframes neck {
+              0% {
+                transform: translateY(0.7px);
+              }
+              50% {
+                transform: translateY(0.7px);
+              }
+              100% {
+                transform: translateY(0px);
+              }
+            }
+          </style>
+          <path id="c-1" class="changeColor cls-1" d="M46.62,52.5c5.78,4.9,21.14,8.4,39.19,8.4s33.41-3.5,39.19-8.4c-5.78-4.9-21.14-8.4-39.19-8.4S52.41,47.6,46.62,52.5Z" style="fill: rgb(255, 5, 18);"></path>
+          <path class="cls-2" d="M99.73,47.71H68.65a7.13,7.13,0,0,0-7.13,7.13V60a152.58,152.58,0,0,0,24.3,1.83,157.87,157.87,0,0,0,21.05-1.35V54.84A7.13,7.13,0,0,0,99.73,47.71Z"></path>
+          <path class="cls-3" d="M123.56,55.81C115,58.94,101.27,61,85.81,61c-26,0-47-5.71-47-12.76,0-3.45,5.05-6.58,13.25-8.88"></path>
+          <path class="cls-3" d="M55.37,38.47a140,140,0,0,1,30.44-3c26,0,47,5.71,47,12.76,0,2.4-2.44,4.65-6.69,6.57"></path>
+          <path class="cls-3" d="M53.41,38.95l.94-.24"></path>
+          <path class="cls-4" d="M91.68,47.71l-.75-11.2L79.15,43.84l-1.69,3.87H75.79c0,3.36,3.76,6.08,8.4,6.08s8.4-2.72,8.4-6.08Z"></path>
+          <path class="cls-5 neckMove" d="M78,46.53a27.19,27.19,0,0,0,6.41.82c3.1,0,7.11-2.19,7.11-2.19l-.42-6.2L79.15,43.84Z"></path>
+          <polygon class="earMove" points="92.59 32.22 92.59 28.5 76.77 27.71 76.77 32.22 92.59 32.22"></polygon>
+          <circle class="cls-6 earMove" cx="78.06" cy="34.04" r="2.47"></circle>
+          <path class="cls-4" d="M81.74,57.06,60.63,49.72h0A6.72,6.72,0,1,0,57.7,62.49H93.25C93.25,56.78,81.74,57.06,81.74,57.06Z"></path>
+          <path class="cls-4" d="M77.46,25H90.92a0,0,0,0,1,0,0V39.38a6.73,6.73,0,0,1-6.73,6.73h0a6.73,6.73,0,0,1-6.73-6.73V25A0,0,0,0,1,77.46,25Z"></path>
+          <rect id="c-2" class="changeColor cls-7" x="74.82" y="26.48" width="19.14" height="2.45" transform="translate(1.29 -3.65) rotate(2.49)" style="fill: rgb(255, 5, 18);"></rect>
+          <path id="c-3" class="changeColor cls-7" d="M84.36,18.69h.5a7.8,7.8,0,0,1,7.8,7.8v0a0,0,0,0,1,0,0H76.56a0,0,0,0,1,0,0v0A7.8,7.8,0,0,1,84.36,18.69Z" transform="translate(1.06 -3.66) rotate(2.49)" style="fill: rgb(255, 5, 18);"></path>
+          <polygon id="c-4" class="changeColor cls-8" points="82.44 23.89 92.18 24.32 92.59 24.34 92.48 26.84 80.96 26.33 82.44 23.89" style="fill: rgb(255, 5, 18);"></polygon>
+          <circle class="cls-9 faceMove" cx="78.72" cy="23.73" r="3.73" transform="translate(51.58 101.34) rotate(-87.51)"></circle>
+          <circle class="cls-2 faceMove" cx="78.72" cy="23.73" r="2.36" transform="translate(51.58 101.34) rotate(-87.51)"></circle>
+          <circle class="cls-4 earMove" cx="90.92" cy="34.04" r="2.47"></circle>
+          <path class="cls-4" d="M112.2,53l-9.87-21.92-3-5.48-11.86-.22,7.42,3.35H91.55l5.82,4.58,2,22.26h0A6.72,6.72,0,1,0,112.2,53Z"></path>
+          <ellipse class="faceMove" cx="80.09" cy="33.12" rx="0.53" ry="0.59"></ellipse>
+          <ellipse class="faceMove" cx="86.34" cy="33.12" rx="0.53" ry="0.59"></ellipse>
+          <polyline class="cls-10 faceMove" points="84.19 31.08 81.74 37.01 84.39 37.01"></polyline>
+          <path class="cls-10 faceMove" d="M83.06,40.36a4,4,0,0,1,2.75-1"></path>
+          <line class="cls-11 faceMove" x1="81.07" y1="30.33" x2="78.47" y2="30.58"></line>
+          <line class="cls-11 faceMove" x1="86.34" y1="30.45" x2="88.15" y2="31.08"></line>
+          <line class="cls-12" x1="106.86" y1="47.82" x2="110.99" y2="46.11"></line>
+          <line class="cls-12" x1="107.43" y1="49.9" x2="111.55" y2="48.19"></line>
+          <line class="cls-12" x1="107.99" y1="51.98" x2="112.11" y2="50.27"></line>
+          <g class="cls-13">
+            <rect class="cls-14" x="85.81" y="2.46" width="10.77" height="3.5"></rect>
+            <rect class="cls-15" x="96.58" y="2.46" width="10.77" height="3.5"></rect>
+            <rect class="cls-14" x="92.19" y="5.95" width="10.77" height="3.5"></rect>
+            <line class="cls-16" x1="107.36" y1="5.95" x2="109.63" y2="5.95"></line>
+            <line class="cls-16" x1="110.68" y1="5.95" x2="111.57" y2="5.95"></line>
+          </g>
+          <g class="cls-13">
+            <rect class="cls-16" x="125" y="23.12" width="10.77" height="3.5"></rect>
+            <rect class="cls-15" x="130.39" y="26.62" width="10.77" height="3.5"></rect>
+            <rect class="cls-16" x="119.62" y="26.62" width="10.77" height="3.5"></rect>
+            <line class="cls-16" x1="141.16" y1="26.62" x2="145.73" y2="26.62"></line>
+            <line class="cls-16" x1="125" y1="23.12" x2="115.4" y2="23.12"></line>
+            <line class="cls-16" x1="117.95" y1="26.62" x2="115.4" y2="26.62"></line>
+          </g>
+          <g class="cls-13">
+            <rect class="cls-16" x="39.34" y="16.12" width="10.77" height="3.5"></rect>
+            <rect class="cls-16" x="39.34" y="23.11" width="10.77" height="3.5"></rect>
+            <rect class="cls-16" x="50.11" y="23.11" width="10.77" height="3.5"></rect>
+            <rect class="cls-16" x="50.11" y="16.12" width="10.77" height="3.5"></rect>
+            <rect class="cls-15" x="44" y="19.61" width="10.77" height="3.5"></rect>
+            <rect class="cls-16" x="33.23" y="19.61" width="10.77" height="3.5"></rect>
+            <line class="cls-16" x1="60.89" y1="19.61" x2="65.51" y2="19.61"></line>
+            <line class="cls-16" x1="39.34" y1="16.12" x2="35.46" y2="16.12"></line>
+            <line class="cls-16" x1="36.45" y1="26.61" x2="33.23" y2="26.61"></line>
+            <line class="cls-16" x1="63.2" y1="23.11" x2="65.51" y2="23.11"></line>
+          </g>
+          <polyline class="cls-3" points="115.4 58.12 115.4 38.27 120.2 37.01"></polyline>
+          <polyline class="cls-3" points="129.01 53.21 129.01 43.14 131.74 42.13"></polyline>
+          <path class="cls-3" d="M115.4,42.13a53.27,53.27,0,0,1,8,2A42,42,0,0,1,129,47"></path>
+          <path class="cls-3" d="M115.4,47.34a53.27,53.27,0,0,1,8,2A42,42,0,0,1,129,52.22"></path>
+          <path class="cls-3" d="M115.4,52.56a53.27,53.27,0,0,1,8,2l1,.42"></path>
+          <path class="cls-18 faceMove" d="M78.84,26.09l0-4.71L68.05,18.32a.91.91,0,0,0-.45-.13c-1.17,0-2.11,2.46-2.11,5.5s.95,5.5,2.11,5.5a.9.9,0,0,0,.44-.12Z"></path>
+          <path class="cls-5" d="M57.7,62.49H93.25A3.67,3.67,0,0,0,92.92,61H53.43A6.69,6.69,0,0,0,57.7,62.49Z"></path>
+          <path class="cls-12" d="M88.15,60.27s1.7.95,1.7,2.22"></path>
+          <path class="cls-5" d="M101.81,61a6.68,6.68,0,0,0,8.51,0Z"></path>
+          <polygon class="cls-5" points="90.92 30.25 77.46 29.69 77.46 28.64 90.92 29.22 90.92 30.25"></polygon>
+          <text id="title" transform="matrix(1 0 0 1 44.7249 78)">Oops, something went wrong</text>
+        </svg>
+
+        <!-- <h1 id="title">404 Page not found</h1> -->
+        <!-- <button id="newBtn" class="btn" disabled>&#8594; &nbsp;Back to Home</button> -->
+      
\ No newline at end of file
diff --git a/prototype/src/main/resources/static/img/product-1.jpg b/prototype/src/main/resources/static/img/product-1.jpg
new file mode 100644
index 0000000..8ea7598
Binary files /dev/null and b/prototype/src/main/resources/static/img/product-1.jpg differ
diff --git a/prototype/src/main/resources/static/img/product-2.jpg b/prototype/src/main/resources/static/img/product-2.jpg
new file mode 100644
index 0000000..427b2f0
Binary files /dev/null and b/prototype/src/main/resources/static/img/product-2.jpg differ
diff --git a/prototype/src/main/resources/static/img/product-3.jpg b/prototype/src/main/resources/static/img/product-3.jpg
new file mode 100644
index 0000000..dbc1b2e
Binary files /dev/null and b/prototype/src/main/resources/static/img/product-3.jpg differ
diff --git a/prototype/src/main/resources/static/img/product-4.jpg b/prototype/src/main/resources/static/img/product-4.jpg
new file mode 100644
index 0000000..8f2d857
Binary files /dev/null and b/prototype/src/main/resources/static/img/product-4.jpg differ
diff --git a/prototype/src/main/resources/static/img/product-5.jpg b/prototype/src/main/resources/static/img/product-5.jpg
new file mode 100644
index 0000000..5e0a406
Binary files /dev/null and b/prototype/src/main/resources/static/img/product-5.jpg differ
diff --git a/prototype/src/main/resources/static/img/product-6.jpg b/prototype/src/main/resources/static/img/product-6.jpg
new file mode 100644
index 0000000..05d78c0
Binary files /dev/null and b/prototype/src/main/resources/static/img/product-6.jpg differ
diff --git a/prototype/src/main/resources/static/img/product-7.jpg b/prototype/src/main/resources/static/img/product-7.jpg
new file mode 100644
index 0000000..220140c
Binary files /dev/null and b/prototype/src/main/resources/static/img/product-7.jpg differ
diff --git a/prototype/src/main/resources/static/img/undraw_successful_purchase_secondary.svg b/prototype/src/main/resources/static/img/undraw_successful_purchase_secondary.svg
new file mode 100644
index 0000000..96780fa
--- /dev/null
+++ b/prototype/src/main/resources/static/img/undraw_successful_purchase_secondary.svg
@@ -0,0 +1 @@
+<svg id="c9533a1a-3341-4132-b58a-1916f0ec6876" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1074" height="739" viewBox="0 0 1074 739"><defs><linearGradient id="cf277671-cf0a-49c3-95f9-02fb51e7bec0" x1="607.35" y1="789.64" x2="607.35" y2="80.5" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity="0.25"/><stop offset="0.54" stop-color="gray" stop-opacity="0.12"/><stop offset="1" stop-color="gray" stop-opacity="0.1"/></linearGradient></defs><title>successful purchase</title><rect x="330" y="77" width="80" height="30" rx="5.17" ry="5.17" fill="#16a085" opacity="0.1"/><rect x="568" y="50" width="80" height="30" rx="5.17" ry="5.17" fill="#16a085" opacity="0.1"/><rect x="524" y="355" width="80" height="30" rx="5.17" ry="5.17" fill="#16a085" opacity="0.1"/><rect x="560" y="388" width="80" height="30" rx="5.17" ry="5.17" fill="#16a085" opacity="0.1"/><rect x="774" y="373" width="80" height="30" rx="5.17" ry="5.17" fill="#16a085" opacity="0.1"/><rect x="123" y="397" width="80" height="30" rx="5.17" ry="5.17" fill="#16a085" opacity="0.1"/><rect x="499" y="421" width="80" height="30" rx="5.17" ry="5.17" fill="#16a085" opacity="0.1"/><path d="M781.91,262.71,745.25,156.29l-13.18,2-11.8,1.51c.3-4,.82-18.36-6.5-25.89-.71-2.58-2.58-5.51-6.18-8.81-17.54-16.08-21.19,16.81-21.19,16.81s-4,6.94-9.51,16.64L674,158l-.82,7.16c-12.2,21.57-28.41,50.76-28.41,53.5,0,4.39-2.19,10.23-2.19,10.23s-12.42,20.46-16.81,30.7a49.09,49.09,0,0,1-11,16.08s-1.06.81-2.8,2a25,25,0,0,1,1-5.71c1.6-5.23,5.32-9.71,6.31-15.09a17.62,17.62,0,0,0,.26-3.91c.23-6.31-2.84-12.52-4.12-18.83-1.49-7.31-.69-15.36-4.59-21.71-3-4.85-8.32-7.87-13.85-9.26-5.08-1.27-10.08-.82-15.2-1.36-4.7-.5-9.19-2.58-13.89-3.35a17.93,17.93,0,0,0-7.62,0c-7.95,2.19-10.44,12.21-16.58,17.72-2.21,2-4.92,3.38-6.92,5.57-2.91,3.19-3.92,7.64-3.77,12a25.56,25.56,0,0,0,.26,4.37c.76,5.23,2.78,10.18,4,15.31a53,53,0,0,1,1.49,11.59c0,.88,0,1.76-.08,2.63a9.23,9.23,0,0,1-1.35,5c-1.11,1.53-2.94,2.27-4.57,3.25a35.45,35.45,0,0,1-11.52-16.34s-.27.34-.73,1v-1s-10-14.68-11.52-26.67l3.48.36,8-112.55-20.43-3c-.57-5.81-2.12-14.24-6.23-20.39,3.43-6.76,5.16-15.91-9.88-16.82-17.6-1.07-16.52,12.64-14.65,20.14a50.45,50.45,0,0,0-1,12.45l-18-2.62-.1,1.46h-4.28L432.79,226.73l11.16-.56,40.9,4.26c3.27,29.73,8.41,66.47,14.51,75.13a7.39,7.39,0,0,0,.67.83V359s-.73,68-13.16,78.93a65,65,0,0,1,23.78-3.73c-.14.45-.28.93-.42,1.44a127.58,127.58,0,0,0-3.79,20.48q-.26,2.29-.47,4.78a257.87,257.87,0,0,0,.63,45.73c5.12,54.08,13.16,92.82,13.16,92.82L522,630.89s-2.19,53.35,3.65,70.89a26.47,26.47,0,0,0,7.48,4.85c.05.5.11,1,.16,1.53s.13,1.35.2,2.05c-2.62,1.19-7.51,5.91-8.57,24.45,0,0,1.46,13.89-2.19,20.46s-1.46,25.58,9.5,27.77a58.57,58.57,0,0,0,21.19,0s5.12,0,1.46-18.27l-.64-4.68c-.08-9.05.3-18.74,2.1-21.63,3.65-5.85-1.46-11.69-1.46-11.69s-.36.2-.95.47c-.94-5.05-2.17-13.25-1.73-19.51,0-.53.09-1,.15-1.55a30.78,30.78,0,0,0,6.19-4.27V632.35s-.73-106.7,7.31-108.9c0,0,3.65,38.73,2.19,57.74s2.19,39.47,2.19,39.47l1.46,77.47s1.4.67,3.66,1.46l-.15,1.41c-.89,8.61-2.32,21.61-3.62,29.57a5.88,5.88,0,0,0-3.55,4.1c-2.19,7.31-.73,25.58-5.12,30.7-2.59,3-5.69,9.11-4.17,13.43-.95,3.79-.53,9.71,10.75,10.69,16.81,1.46,24.12-7.31,24.12-7.31s2.19-3.65,0-10.23.73-18.27.73-18.27,1.57-9.92-1-11.22c-.22-1.18-.42-1.93-.42-1.93a8.8,8.8,0,0,0-2.31-6.08c-.06-7.65.25-21.8,2.94-31.12.16-.53.32-1,.49-1.55a19.74,19.74,0,0,0,6.18-2.17s-.73-16.81,4.39-28.5,2.19-58.47,2.19-58.47-2.19-12.29.9-22.25a218.32,218.32,0,0,0,7.94-33.8l4.31-30.19s11.35-36.75-3.6-74.47c-.61-1.56-1.28-3.12-2-4.68-1.24-2.71-2.62-5.43-4.16-8.13-.24-.42-.5-.85-.75-1.27,1.57-.39,2.46-.62,2.46-.62s-19.73-46-7.31-69.43c0,0,7-7,8-14.69,1.24-10.17,2.59-20.33,4.81-30.33l.39-1.76s.06-.34.16-.95c.28-.18.55-.37.82-.57,21.06-15.38,39.22-79.6,39.22-79.6l5.85-11,2.78-5.88-5.7,49.73,44.58,11,28.5-2.19-.08-6.13,21.72-1.69Zm-282.6-145-7.92-1.16c-1.39-7.15-2.33-11.84-2.33-11.84a43.44,43.44,0,0,0,4.39-6.57C497.28,104,498.75,112,499.31,117.67Zm-29.58-15.35c.55,1.88,1.05,3.09,1.05,3.09l1,8.25-2.7-.39A54.19,54.19,0,0,1,469.74,102.32Zm249.8,57.61-10.72,1.38c1.51-4.44,3.38-11.72,2.29-18.31a9.19,9.19,0,0,0,2.94-7.65C720.41,143,719.81,156.44,719.53,159.94Zm-17.8-11.41a26.56,26.56,0,0,0,8.73-4.91c.92,6.47-1,13.58-2.46,17.8l-10,1.28-2.76-.53Z" transform="translate(-63 -80.5)" fill="url(#cf277671-cf0a-49c3-95f9-02fb51e7bec0)"/><polygon points="717 184.1 690.91 194.99 660.6 89.3 667.71 80.86 680.74 78.84 717 184.1" fill="#16a085"/><polygon points="717 184.1 690.91 194.99 660.6 89.3 667.71 80.86 680.74 78.84 717 184.1" fill="#fff" opacity="0.2"/><polygon points="667.71 80.86 622.43 86.67 645.64 198.51 690.91 194.99 667.71 80.86" fill="#16a085"/><polygon points="667.71 80.86 622.43 86.67 645.64 198.51 690.91 194.99 667.71 80.86" fill="#fff" opacity="0.07"/><path d="M718.94,163.88l-.72-.09c0-.27,3-26.67-13.57-30l.14-.71C722.07,136.55,719,163.61,718.94,163.88Z" transform="translate(-63 -80.5)" fill="#535461"/><rect x="488.44" y="160.44" width="49.88" height="73.01" fill="#774e55"/><rect x="488.44" y="160.44" width="49.88" height="73.01" opacity="0.2"/><polygon points="669.51 202.72 641.32 204.89 645.66 95.02 655.05 89.24 668.06 91.41 669.51 202.72" fill="#16a085"/><polygon points="669.51 202.72 641.32 204.89 645.66 95.02 655.05 89.24 668.06 91.41 669.51 202.72" opacity="0.2"/><polygon points="655.05 89.24 610.24 80.56 597.23 194.05 641.32 204.89 655.05 89.24" fill="#16a085"/><polygon points="391.22 35.03 384.71 35.03 371.7 148.51 400.61 147.07 391.22 35.03" fill="#16a085"/><polygon points="391.22 35.03 384.71 35.03 371.7 148.51 400.61 147.07 391.22 35.03" opacity="0.2"/><polygon points="389.05 33.58 381.1 147.79 450.49 155.02 458.44 43.7 389.05 33.58" fill="#16a085"/><path d="M535.9,706.81s-8.67-.72-10.12,24.58c0,0,1.45,13.73-2.17,20.24s-1.45,25.3,9.4,27.47a57.93,57.93,0,0,0,21,0s5.06,0,1.45-18.07l-7.23-52.77Z" transform="translate(-63 -80.5)" fill="#5c3d53"/><path d="M535.9,706.81s-8.67-.72-10.12,24.58c0,0,1.45,13.73-2.17,20.24s-1.45,25.3,9.4,27.47a57.93,57.93,0,0,0,21,0s5.06,0,1.45-18.07l-7.23-52.77Z" transform="translate(-63 -80.5)" opacity="0.05"/><path d="M581.35,289.4c-.62,10.76,1.53,17,1.53,17l-18.79,5.06s-31.08,4.34-18.79-8c4.25-4.25,6.34-11.54,7.25-19.24a106.62,106.62,0,0,0,.53-15.84,141.2,141.2,0,0,0-1.28-14.8s45.54-15.9,35.42,10.12a92.54,92.54,0,0,0-4.35,14.5A76.45,76.45,0,0,0,581.35,289.4Z" transform="translate(-63 -80.5)" fill="#f8bdc5"/><path d="M587.22,263.71a92.54,92.54,0,0,0-4.35,14.5,31.14,31.14,0,0,1-29.79-9.82,141.2,141.2,0,0,0-1.28-14.8S597.34,237.69,587.22,263.71Z" transform="translate(-63 -80.5)" opacity="0.1"/><circle cx="513.38" cy="165.86" r="31.08" fill="#f8bdc5"/><path d="M521.44,261.54v9.4l-15.9,41.2-4.34-4.34a7.3,7.3,0,0,1-.66-.82c-10.5-14.92-18.14-114.11-18.14-114.11L472.29,109s-10.84-26,13-24.58,5.06,23.85,5.06,23.85,15.9,79.51,13.73,82.4,0,11.57,0,11.57,6.51,16.63,5.78,28.91S521.44,261.54,521.44,261.54Z" transform="translate(-63 -80.5)" fill="#f8bdc5"/><path d="M700.7,151.67l-37.59,79.51L657.33,242s-18,63.52-38.79,78.73a19,19,0,0,1-3.86,2.23l-4.34-34.7,4-10.08.3-.77a48.55,48.55,0,0,0,10.84-15.9c4.34-10.12,16.63-30.36,16.63-30.36s2.17-5.78,2.17-10.12,41.2-75.9,41.2-75.9,3.61-32.53,21-16.63S700.7,151.67,700.7,151.67Z" transform="translate(-63 -80.5)" fill="#f8bdc5"/><path d="M555.41,728.49s-24.58,10.12-21.69.72c1.76-5.7,1.11-16.47.33-24-.5-4.91-1.06-8.49-1.06-8.49l21,2.17a17,17,0,0,0-1.21,5.75C552.09,714.23,555.41,728.49,555.41,728.49Z" transform="translate(-63 -80.5)" fill="#f8bdc5"/><path d="M593.63,700.37c-3.79,13.16-2.8,36.08-2.8,36.08s-22.41,2.89-20.24-2.89c1.51-4,3.72-23.82,4.92-35.47.53-5.09.86-8.62.86-8.62l20.24,4.34A20.22,20.22,0,0,0,593.63,700.37Z" transform="translate(-63 -80.5)" fill="#f8bdc5"/><path d="M533,696.69l21,2.17a17,17,0,0,0-1.21,5.75,21.43,21.43,0,0,1-18.7.57C533.56,700.26,533,696.69,533,696.69Z" transform="translate(-63 -80.5)" opacity="0.1"/><path d="M596.62,693.8a20.22,20.22,0,0,0-3,6.57c-6.83,1.1-14-.83-18.11-2.28.53-5.09.86-8.62.86-8.62Z" transform="translate(-63 -80.5)" opacity="0.1"/><path d="M619.75,525.37l-4.26,29.86a215.92,215.92,0,0,1-7.86,33.43c-3.06,9.85-.89,22-.89,22s2.89,46.26-2.17,57.83-4.34,28.19-4.34,28.19c-11.57,6.51-28.19-1.45-28.19-1.45l-1.45-76.62s-3.61-20.24-2.17-39-2.17-57.1-2.17-57.1c-8,2.17-7.23,107.7-7.23,107.7v68.67c-17.35,15.18-32.53,0-32.53,0-5.78-17.35-3.61-70.12-3.61-70.12l-2.17-31.08s-8-38.31-13-91.8a255,255,0,0,1-.62-45.23q.21-2.46.46-4.73a126.18,126.18,0,0,1,3.74-20.25,45.58,45.58,0,0,1,2.2-6.41l77.67,3.61,4.58.21,11,.51c1.2,1.81,2.33,3.65,3.38,5.49,1.52,2.67,2.89,5.36,4.11,8,.7,1.54,1.36,3.09,2,4.63C631,489,619.75,525.37,619.75,525.37Z" transform="translate(-63 -80.5)" fill="#5e52ad"/><path d="M534.45,436.47s-3.4,34-27.37,24.16q.21-2.46.46-4.73c5.64,1.53,21.25,3.64,21.84-19.44Z" transform="translate(-63 -80.5)" opacity="0.1"/><path d="M616.19,451.72c-16.6,5.93-22.86-9.86-25-18.87l4.58.21c2.49,14.17,12.43,15,18.48,14C614.93,448.64,615.58,450.19,616.19,451.72Z" transform="translate(-63 -80.5)" opacity="0.1"/><path d="M542.34,724.65c-3.69-.58-9.33-2.61-7.56-9.7,0,0-6.83-2.36-6.11,25.83,0,0-.72,13.73-2.17,16.63s0,20.24,15.18,18.79c0,0,10.84,3.61,13.73-2.17,0,0-2.17-33.25,1.45-39s-1.45-11.57-1.45-11.57-5.12,2.84-8.8,2C545.21,725.07,543.77,724.88,542.34,724.65Z" transform="translate(-63 -80.5)" fill="#5c3d53"/><path d="M560.47,771.86s-7.23,12.29,9.4,13.73,23.85-7.23,23.85-7.23,2.17-3.61,0-10.12.72-18.07.72-18.07,2.17-13.73-2.89-10.84S560.47,771.86,560.47,771.86Z" transform="translate(-63 -80.5)" fill="#5c3d53"/><path d="M560.47,771.86s-7.23,12.29,9.4,13.73,23.85-7.23,23.85-7.23,2.17-3.61,0-10.12.72-18.07.72-18.07,2.17-13.73-2.89-10.84S560.47,771.86,560.47,771.86Z" transform="translate(-63 -80.5)" opacity="0.05"/><path d="M579.27,727.77s-8.67-3.61-10.84,3.61-.72,25.3-5.06,30.36-10.12,18.79,7.23,18.07,21-6.51,21-6.51-.72-18.07,1.45-23.13,0-13,0-13S593.72,727,579.27,727.77Z" transform="translate(-63 -80.5)" fill="#5c3d53"/><circle cx="407.84" cy="43.7" r="1.45" opacity="0.2"/><circle cx="438.2" cy="47.31" r="1.45" opacity="0.2"/><path d="M501.56,127.82l-.72,0c0-.31.51-30.8-17-33.61-3.45-.55-6.27.23-8.38,2.32-7.23,7.17-4.24,27.42-4.21,27.62l-.71.11c-.13-.85-3.07-20.82,4.42-28.24,2.28-2.27,5.32-3.12,9-2.53C502.08,96.39,501.57,127.51,501.56,127.82Z" transform="translate(-63 -80.5)" fill="#535461"/><path d="M706.09,168.45l-.65-.31c.11-.24,11.25-24.37-3.47-32.78l.36-.63C717.62,143.47,706.21,168.2,706.09,168.45Z" transform="translate(-63 -80.5)" fill="#535461"/><path d="M582.88,306.36l-18.79,5.06s-31.08,4.34-18.79-8c4.25-4.25,6.34-11.54,7.25-19.24,4.91,7.7,10.82,5.51,10.82,5.51l17.92-.35.07,0C580.73,300.16,582.88,306.36,582.88,306.36Z" transform="translate(-63 -80.5)" opacity="0.1"/><path d="M618.55,320.75a19,19,0,0,1-3.86,2.23l-4.34-34.7,4-10.08,1-.77C624.38,280,619.72,313.24,618.55,320.75Z" transform="translate(-63 -80.5)" opacity="0.1"/><path d="M521.44,261.54v9.4l-15.9,41.2-4.34-4.34a7.3,7.3,0,0,1-.66-.82C502.42,285.5,521.44,261.54,521.44,261.54Z" transform="translate(-63 -80.5)" opacity="0.1"/><path d="M610.11,439.06c-10.11,2.53-62.89,14.93-78.55,3.19-6.18-4.63-13.46-6.33-20.27-6.6a45.58,45.58,0,0,1,2.2-6.41l77.67,3.61,4.58.21,11,.51C607.94,435.39,609.06,437.22,610.11,439.06Z" transform="translate(-63 -80.5)" opacity="0.1"/><path d="M474.1,90.59s10.84,18.07,18.07,0" transform="translate(-63 -80.5)" fill="#f8bdc5"/><path d="M697.09,127.81s-4.34,21.69,13,11.57" transform="translate(-63 -80.5)" fill="#f8bdc5"/><g opacity="0.1"><path d="M562.89,529.64c-.35-4.4-.61-7.15-.61-7.15-8,2.17-7.23,107.7-7.23,107.7v68.67c-5.08,4.44-10,6.28-14.35,6.67,5.22.46,11.44-1,18-6.67V630.19S558.14,553.72,562.89,529.64Z" transform="translate(-63 -80.5)"/><path d="M615.83,451.72c-.61-1.54-1.26-3.09-2-4.63-1.22-2.68-2.59-5.37-4.11-8-1-1.84-2.18-3.67-3.38-5.49l-11-.51-4.58-.21-77.67-3.61-.07.16,74.13,3.45,4.58.21,11,.51c1.2,1.81,2.33,3.65,3.38,5.49,1.52,2.67,2.89,5.36,4.11,8,.7,1.54,1.36,3.09,2,4.63,14.78,37.3,3.56,73.65,3.56,73.65l-4.26,29.86a215.92,215.92,0,0,1-7.86,33.43c-3.06,9.85-.89,22-.89,22s2.89,46.26-2.17,57.83-4.34,28.19-4.34,28.19a21,21,0,0,1-9.06,2.5,23,23,0,0,0,12.67-2.5s-.72-16.63,4.34-28.19,2.17-57.83,2.17-57.83-2.17-12.16.89-22a215.92,215.92,0,0,0,7.86-33.43l4.26-29.86S630.61,489,615.83,451.72Z" transform="translate(-63 -80.5)"/></g><path d="M581.29,290.82c10,4.71,33.4-13.38,33.4-13.38,10.12,2.89,2.89,44.82,2.89,44.82l-.39,1.74c-2.2,9.89-3.53,19.94-4.76,30-.93,7.59-7.86,14.53-7.86,14.53-12.29,23.13,7.23,68.67,7.23,68.67s-62.89,16.63-80.23,3.61-43.37-2.89-43.37-2.89c12.29-10.84,13-78.07,13-78.07v-52c1.45-21.69,21-46.26,21-46.26,8,22.41,30.23,23.89,30.23,23.89,4.93,8,11,5.75,11,5.75Z" transform="translate(-63 -80.5)" fill="#eb6475"/><path d="M568.29,202.56a17.73,17.73,0,0,0-7.53,0c-7.86,2.17-10.33,12.08-16.4,17.52-2.18,2-4.87,3.34-6.85,5.51-3.52,3.86-4.23,9.58-3.48,14.75s2.75,10.07,4,15.14A52.39,52.39,0,0,1,539.42,271a9.13,9.13,0,0,1-1.34,4.91c-1.45,2-4.12,2.63-6,4.23-5.74,4.94-1,15.19-5.21,21.5-1.81,2.73-5.2,4.53-5.89,7.73-.49,2.27.55,4.56,1.57,6.65,2.68,5.5,5.46,11.15,10,15.25s10.15,6.16,15.73,8.25c1.69.63,3.81,1.18,5.1-.07,1.59-1.56.39-4.2-.71-6.13-1.74-3-3.1-6.62-2.08-10s4.29-5.62,6.49-8.44c5.67-7.3,3.81-17.78,1-26.58-1.19-3.71-2.53-7.66-1.52-11.43.43-1.62,1.28-3.09,1.82-4.68,2.4-7.08-1.63-14.85-.45-22.23a31.93,31.93,0,0,1,3-8.27l6.35-13.65a13.49,13.49,0,0,1,2.81-4.42,10,10,0,0,1,7-2.18,19,19,0,0,1,13.63,6.21c6.8,7.56,6.37,19,5.55,29.08l-.59,7.28c-.43,5.24-1,10.83-4.3,14.91-2.57,3.16-6.72,5.31-7.78,9.25-.92,3.39.81,7.07-.1,10.46-1.36,5.07-7.62,6.9-10.93,11a11.25,11.25,0,0,0-.82,12.65c1.26,2,3.27,4,3,6.35-.23,1.89-1.93,3.42-1.92,5.32a4.23,4.23,0,0,0,3.07,3.67,12.4,12.4,0,0,0,5.07.24l17.93-1.62a6.31,6.31,0,0,0,3.19-.88c1.25-.9,1.66-2.56,1.83-4.09.72-6.38-1-13.35,2.19-18.93,1-1.79,2.47-3.28,3.58-5,6.12-9.6-.05-22.62,3.28-33.51,1.58-5.17,5.26-9.61,6.24-14.92,1.3-7.08-2.39-14-3.82-21-1.47-7.23-.68-15.19-4.54-21.48-2.95-4.8-8.23-7.79-13.69-9.16-5-1.26-10-.81-15-1.35C577.38,205.37,572.94,203.31,568.29,202.56Z" transform="translate(-63 -80.5)" opacity="0.1"/><path d="M568.29,201.11a17.73,17.73,0,0,0-7.53,0c-7.86,2.17-10.33,12.08-16.4,17.52-2.18,2-4.87,3.34-6.85,5.51-3.52,3.86-4.23,9.58-3.48,14.75s2.75,10.07,4,15.14a52.39,52.39,0,0,1,1.39,15.52,9.13,9.13,0,0,1-1.34,4.91c-1.45,2-4.12,2.63-6,4.23-5.74,4.94-1,15.19-5.21,21.5-1.81,2.73-5.2,4.53-5.89,7.73-.49,2.27.55,4.56,1.57,6.65,2.68,5.5,5.46,11.15,10,15.25s10.15,6.16,15.73,8.25c1.69.63,3.81,1.18,5.1-.07,1.59-1.56.39-4.2-.71-6.13-1.74-3-3.1-6.62-2.08-10s4.29-5.62,6.49-8.44c5.67-7.3,3.81-17.78,1-26.58-1.19-3.71-2.53-7.66-1.52-11.43.43-1.62,1.28-3.09,1.82-4.68,2.4-7.08-1.63-14.85-.45-22.23a31.93,31.93,0,0,1,3-8.27l6.35-13.65a13.49,13.49,0,0,1,2.81-4.42,10,10,0,0,1,7-2.18,19,19,0,0,1,13.63,6.21c6.8,7.56,6.37,19,5.55,29.08l-.59,7.28c-.43,5.24-1,10.83-4.3,14.91-2.57,3.16-6.72,5.31-7.78,9.25-.92,3.39.81,7.07-.1,10.46-1.36,5.07-7.62,6.9-10.93,11a11.25,11.25,0,0,0-.82,12.65c1.26,2,3.27,4,3,6.35-.23,1.89-1.93,3.42-1.92,5.32a4.23,4.23,0,0,0,3.07,3.67,12.4,12.4,0,0,0,5.07.24l17.93-1.62a6.31,6.31,0,0,0,3.19-.88c1.25-.9,1.66-2.56,1.83-4.09.72-6.38-1-13.35,2.19-18.93,1-1.79,2.47-3.28,3.58-5,6.12-9.6-.05-22.62,3.28-33.51,1.58-5.17,5.26-9.61,6.24-14.92,1.3-7.08-2.39-14-3.82-21-1.47-7.23-.68-15.19-4.54-21.48-2.95-4.8-8.23-7.79-13.69-9.16-5-1.26-10-.81-15-1.35C577.38,203.93,572.94,201.87,568.29,201.11Z" transform="translate(-63 -80.5)" fill="#774e55"/><path d="M529.75,366.71s14.46,4.34,35.42-5.06H576s.72,10.12,28.91,5.78" transform="translate(-63 -80.5)" opacity="0.1"/><ellipse cx="537" cy="690" rx="537" ry="49" fill="#16a085" opacity="0.1"/><rect x="252" y="258" width="80" height="30" rx="5.17" ry="5.17" fill="#16a085" opacity="0.1"/><rect x="288" y="291" width="80" height="30" rx="5.17" ry="5.17" fill="#16a085" opacity="0.1"/><rect x="603" y="260" width="80" height="30" rx="5.17" ry="5.17" fill="#16a085" opacity="0.1"/><rect x="639" y="293" width="80" height="30" rx="5.17" ry="5.17" fill="#16a085" opacity="0.1"/><rect x="227" y="324" width="80" height="30" rx="5.17" ry="5.17" fill="#16a085" opacity="0.1"/><rect x="307" y="441" width="80" height="30" rx="5.17" ry="5.17" fill="#16a085" opacity="0.1"/><rect x="343" y="474" width="80" height="30" rx="5.17" ry="5.17" fill="#16a085" opacity="0.1"/><rect x="282" y="507" width="80" height="30" rx="5.17" ry="5.17" fill="#16a085" opacity="0.1"/><rect x="629" y="525" width="80" height="30" rx="5.17" ry="5.17" fill="#16a085" opacity="0.1"/><rect x="568" y="558" width="80" height="30" rx="5.17" ry="5.17" fill="#16a085" opacity="0.1"/><g opacity="0.1"><path d="M1008.26,743.89s-14.48-73.36,15.34-123.64a113.3,113.3,0,0,0,15.63-69.94,190.55,190.55,0,0,0-7-34.14" transform="translate(-63 -80.5)" fill="none" stroke="#535461" stroke-miterlimit="10" stroke-width="2"/><path d="M1050.85,484.37c-.8,8.75-19,32.68-19,32.68s-13.52-26.84-12.71-35.6a15.92,15.92,0,0,1,31.7,2.91Z" transform="translate(-63 -80.5)" fill="#16a085"/><path d="M1072.6,535.27c-5.43,6.91-33.7,17.12-33.7,17.12s3.24-29.88,8.67-36.79a15.92,15.92,0,1,1,25,19.67Z" transform="translate(-63 -80.5)" fill="#16a085"/><path d="M1063.84,618c-8.18,3.22-37.73-2.24-37.73-2.24s17.88-24.16,26.06-27.38A15.92,15.92,0,0,1,1063.84,618Z" transform="translate(-63 -80.5)" fill="#16a085"/><path d="M1043.11,679.15c-7.52,4.56-37.57,4.17-37.57,4.17s13.54-26.83,21.06-31.39a15.92,15.92,0,1,1,16.51,27.22Z" transform="translate(-63 -80.5)" fill="#16a085"/><path d="M1005.46,551c5.72,6.68,34.39,15.68,34.39,15.68s-4.5-29.72-10.21-36.39A15.92,15.92,0,1,0,1005.46,551Z" transform="translate(-63 -80.5)" fill="#16a085"/><path d="M982.12,622.82c7.45,4.66,37.51,4.67,37.51,4.67s-13.18-27-20.64-31.67a15.92,15.92,0,1,0-16.87,27Z" transform="translate(-63 -80.5)" fill="#16a085"/><path d="M969,695.71c6.56,5.85,36.18,10.95,36.18,10.95s-8.43-28.85-15-34.7A15.92,15.92,0,1,0,969,695.71Z" transform="translate(-63 -80.5)" fill="#16a085"/></g><g opacity="0.1"><path d="M882.63,727.79s-7.77-39.39,8.23-66.39a60.84,60.84,0,0,0,8.39-37.56,102.32,102.32,0,0,0-3.74-18.33" transform="translate(-63 -80.5)" fill="none" stroke="#535461" stroke-miterlimit="10" stroke-width="2"/><path d="M905.5,588.43c-.43,4.7-10.2,17.55-10.2,17.55s-7.26-14.41-6.83-19.11a8.55,8.55,0,0,1,17,1.56Z" transform="translate(-63 -80.5)" fill="#16a085"/><path d="M917.17,615.76c-2.92,3.71-18.1,9.19-18.1,9.19s1.74-16,4.66-19.75a8.55,8.55,0,0,1,13.44,10.56Z" transform="translate(-63 -80.5)" fill="#16a085"/><path d="M912.47,660.2c-4.39,1.73-20.26-1.2-20.26-1.2s9.6-13,14-14.7a8.55,8.55,0,0,1,6.27,15.9Z" transform="translate(-63 -80.5)" fill="#16a085"/><path d="M901.34,693c-4,2.45-20.17,2.24-20.17,2.24s7.27-14.41,11.31-16.86A8.55,8.55,0,1,1,901.34,693Z" transform="translate(-63 -80.5)" fill="#16a085"/><path d="M881.12,624.22c3.07,3.59,18.47,8.42,18.47,8.42s-2.41-16-5.48-19.54a8.55,8.55,0,0,0-13,11.12Z" transform="translate(-63 -80.5)" fill="#16a085"/><path d="M868.59,662.77c4,2.5,20.14,2.51,20.14,2.51s-7.08-14.5-11.08-17a8.55,8.55,0,0,0-9.06,14.5Z" transform="translate(-63 -80.5)" fill="#16a085"/><path d="M861.56,701.91c3.52,3.14,19.43,5.88,19.43,5.88s-4.52-15.49-8-18.63a8.55,8.55,0,0,0-11.38,12.76Z" transform="translate(-63 -80.5)" fill="#16a085"/></g><g opacity="0.1"><path d="M249.63,733.79s-7.77-39.39,8.23-66.39a60.84,60.84,0,0,0,8.39-37.56,102.32,102.32,0,0,0-3.74-18.33" transform="translate(-63 -80.5)" fill="none" stroke="#535461" stroke-miterlimit="10" stroke-width="2"/><path d="M272.5,594.43c-.43,4.7-10.2,17.55-10.2,17.55s-7.26-14.41-6.83-19.11a8.55,8.55,0,0,1,17,1.56Z" transform="translate(-63 -80.5)" fill="#16a085"/><path d="M284.17,621.76c-2.92,3.71-18.1,9.19-18.1,9.19s1.74-16,4.66-19.75a8.55,8.55,0,0,1,13.44,10.56Z" transform="translate(-63 -80.5)" fill="#16a085"/><path d="M279.47,666.2c-4.39,1.73-20.26-1.2-20.26-1.2s9.6-13,14-14.7a8.55,8.55,0,0,1,6.27,15.9Z" transform="translate(-63 -80.5)" fill="#16a085"/><path d="M268.34,699c-4,2.45-20.17,2.24-20.17,2.24s7.27-14.41,11.31-16.86A8.55,8.55,0,1,1,268.34,699Z" transform="translate(-63 -80.5)" fill="#16a085"/><path d="M248.12,630.22c3.07,3.59,18.47,8.42,18.47,8.42s-2.41-16-5.48-19.54a8.55,8.55,0,0,0-13,11.12Z" transform="translate(-63 -80.5)" fill="#16a085"/><path d="M235.59,668.77c4,2.5,20.14,2.51,20.14,2.51s-7.08-14.5-11.08-17a8.55,8.55,0,0,0-9.06,14.5Z" transform="translate(-63 -80.5)" fill="#16a085"/><path d="M228.56,707.91c3.52,3.14,19.43,5.88,19.43,5.88s-4.52-15.49-8-18.63a8.55,8.55,0,0,0-11.38,12.76Z" transform="translate(-63 -80.5)" fill="#16a085"/></g></svg>
diff --git a/prototype/src/main/resources/templates/error/404.html b/prototype/src/main/resources/templates/error/404.html
new file mode 100644
index 0000000..09f6d26
--- /dev/null
+++ b/prototype/src/main/resources/templates/error/404.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <title>e-commerce</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'>
+            <div class='content-width'>
+                <h1>Error 404</h1>
+                <div class="">
+                    <p>Ein Fehler ist aufgetreten. Die gewünschte Ressource konnte nicht gefunden werden.</p>
+                    <!-- animation from https://github.com/blairlee227/IlluStatus, licensed MIT -->
+                    <img th:src="@{/img/error_404_illustatus.svg}" />
+                </div>
+            </div>
+            <div class="vertical-spacer s"></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/error/500.html b/prototype/src/main/resources/templates/error/500.html
new file mode 100644
index 0000000..8e8d847
--- /dev/null
+++ b/prototype/src/main/resources/templates/error/500.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <title>e-commerce</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'>
+        <div class='content-width'>
+            <h1>Error 500</h1>
+            <div class="">
+                <p>Ein Fehler ist aufgetreten. Bitte versuche es später nocheinmal.</p>
+                <!-- animation from https://github.com/blairlee227/IlluStatus, licensed MIT -->
+                <img th:src="@{/img/error_generic_illustatus.svg}" />
+            </div>
+        </div>
+        <div class="vertical-spacer s"></div>
+    </div>
+</main>
+<footer th:replace="fragments/footer :: footer"></footer>
+</body>
+</html>
+
diff --git a/prototype/src/main/resources/templates/fragments/footer.html b/prototype/src/main/resources/templates/fragments/footer.html
new file mode 100644
index 0000000..4756a29
--- /dev/null
+++ b/prototype/src/main/resources/templates/fragments/footer.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <title>e-commerce</title>
+</head>
+<body>
+    <footer class="hero-black" th:fragment="footer">
+        <div class='content-width flex'>
+            <h3>Project eCommerce</h3>
+            <div class="spacer"></div>
+            <div>
+                <h4>Seite</h4>
+                <ul>
+                    <li><a>Login</a></li>
+                    <li><a>Angebote</a></li>
+                    <li><a>Suche</a></li>
+                    <li><a>Mitarbeiter Login</a></li>
+                </ul>
+            </div>
+            <div>
+                <h4>Mehr</h4>
+                <ul>
+                    <li><a>Nutzungsbedingungen</a></li>
+                    <li><a>Datenschutz</a></li>
+                    <li><a>Über</a></li>
+                </ul>
+            </div>
+        </div>
+    </footer>
+</body>
+</html>
\ No newline at end of file
diff --git a/prototype/src/main/resources/templates/fragments/header.html b/prototype/src/main/resources/templates/fragments/header.html
index 91b8f72..6aba443 100644
--- a/prototype/src/main/resources/templates/fragments/header.html
+++ b/prototype/src/main/resources/templates/fragments/header.html
@@ -1,17 +1,20 @@
 <!DOCTYPE html>
 <html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
 <head>
-    <meta charset="utf-8">
-    <style></style>
+    <meta charset="UTF-8">
+    <title>e-commerce</title>
 </head>
 <body>
-<nav class="hero-secondary" th:fragment="header">
-    <div class="content-width flex">
-        <h1>Project eCommerce</h1>
-        <a>Angebote</a>
-        <input class="spacer" type="text" placeholder="Nach Produkten suchen...">
-        <button>Login</button>
-    </div>
-</nav>
+    <nav class='hero' th:fragment="header">
+        <div class='content-width flex'>
+            <h1>Project eCommerce</h1>
+            <button>Angebote</button>
+            <div class='spacer input-icon secondary'>
+                <input type="text" placeholder="Nach Produkten suchen..."/>
+                <button>Finden</button>
+            </div>
+            <button>Login</button>
+        </div>
+    </nav>
 </body>
 </html>
diff --git a/prototype/src/main/resources/templates/home.html b/prototype/src/main/resources/templates/home.html
index e524b9a..1b002df 100644
--- a/prototype/src/main/resources/templates/home.html
+++ b/prototype/src/main/resources/templates/home.html
@@ -3,9 +3,88 @@
 <head>
     <meta charset="utf-8">
     <title>e-commerce</title>
-    <style></style>
+    <link href="../static/css/ecom.css" rel="stylesheet" th:href="@{/css/ecom.css}"/>
 </head>
 <body>
-    <div th:replace="fragments/header :: header">Header</div>
+    <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>
+            </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>
+                        <button>Registieren</button>
+                    </div>
+                </div>
+            </div>
+            <div class="vertical-spacer s"></div>
+        </div>
+    </main>
+    <footer th:replace="fragments/footer :: footer"></footer>
 </body>
 </html>