diff --git a/prototype/src/main/resources/application.properties b/prototype/src/main/resources/application.properties
index f1ec900..c3bc60b 100644
--- a/prototype/src/main/resources/application.properties
+++ b/prototype/src/main/resources/application.properties
@@ -16,5 +16,5 @@ spring.jpa.hibernate.ddl-auto=update
 # ----------------------------------------
 
 # EMBEDDED SERVER CONFIGURATION (ServerProperties)
-server.address=127.0.0.1
-server.port=8080
\ No newline at end of file
+server.address=::
+server.port=8080
diff --git a/prototype/src/main/resources/static/css/ecom.css b/prototype/src/main/resources/static/css/ecom.css
index 6c6e0ef..9fc6e57 100644
--- a/prototype/src/main/resources/static/css/ecom.css
+++ b/prototype/src/main/resources/static/css/ecom.css
@@ -17,7 +17,7 @@
 
 
    --root-c-base: #ecf0f1;
-   --root-c-base-highlight: #bdc3c7;
+   --root-c-base-highlight: #FFF;
 
    --root-c-primary: #1abc9c;
    --root-c-primary-highlight: #16a085;
@@ -294,11 +294,13 @@ footer {
 /*
  * INPUTS
  */
-
+textarea,
+input[list],
 input[type="text"],
 input[type="password"] {
 
    background-color: var(--c-base);
+   font-size: var(--u0);
 
    border: none;
 
@@ -310,7 +312,12 @@ input[type="password"] {
    font-size: var(--u0);
    color: var(--c-black);
 
-   /* box-shadow: var(--s-0-secondary); */
+   background-color: var(--c-base-highlight);
+    box-shadow: var(--s-0-secondary);
+}
+
+textarea {
+   font-family: "Fira Mono";
 }
 /*
 input[type="text"]:invalid,
@@ -318,7 +325,8 @@ input[type="password"]:invalid {
    background-color: var(--c-error);
    color: var(--c-base);
 }*/
-
+textarea::placeholder,
+input[list]::placeholder,
 input[type="text"]::placeholder,
 input[type="password"]::placeholder  {
   color: var(--c-primary-highlight);
@@ -357,6 +365,7 @@ button:active, .button:active {
 
 input[type="text"],
 input[type="password"],
+input[list],
 button,
 .button {
    transition: all 0.1s ease-out;
@@ -383,6 +392,9 @@ fieldset {
     border: none;
 }
 
+fieldset label {
+   display: inline-block;
+}
 
 /*
  * HERO
@@ -393,6 +405,11 @@ fieldset {
    color: var(--c-base);
 }
 
+.hero > * {
+   --c-primary: var(--root-c-primary-highlight);
+   --c-primary-highlight: var(--root-c-primary);
+}
+
 .hero-black {
    background-color: var(--c-black);
    color: var(--c-base);
@@ -423,8 +440,58 @@ fieldset {
    width: 100%;
 }
 
+.detailflex {
+   display: flex;
+   flex-direction: row;
+   justify-content: center;
+   align-items: stretch;
+   flex-wrap: wrap;
+}
+
+.detailflex.s {
+   max-width: calc(20rem + var(--u0) * 2);
+   margin-left: auto;
+   margin-right: auto;
+}
+
+.detailflex.m {
+   max-width: calc(40rem + var(--u0) * 3);
+   margin-left: auto;
+   margin-right: auto;
+}
+
+.detailflex.l {
+   max-width: calc(20rem + var(--u0) * 5);
+   margin-left: auto;
+   margin-right: auto;
+}
+
+.detailflex  > * {
+   min-width: 100%;
+   padding: var(--u0);
+   flex: 1;
+}
+
+
+.detailflex  > .col-2 {
+   display: flex;
+   justify-content: flex-start;
+   flex-wrap: wrap;
+   align-items: wrap;
+   padding: 0px;
+}
+
+.detailflex  > .col-2 > * {
+   min-width: calc(15rem + var(--u0) * 3);
+   flex: 1;
+   padding: var(--u0);
+}
+
+
 .detailgrid {
    display: grid;
+   grid-auto-flow: dense;
+   min-width: 20rem;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    grid-template-rows: auto;
    grid-column-gap: var(--u0);
@@ -437,6 +504,19 @@ fieldset {
    margin-right: auto;
 }
 
+.detailgrid.m {
+   max-width: calc(40rem + var(--u0) * 3);
+   margin-left: auto;
+   margin-right: auto;
+}
+
+.detailgrid.l {
+   max-width: calc(20rem + var(--u0) * 5);
+   margin-left: auto;
+   margin-right: auto;
+}
+
+
 .detailgrid > .s {
    grid-column: span 1;
 }
@@ -454,6 +534,7 @@ fieldset {
    height: 0px;
 }
 
+
 .bar-flex {
    display: flex;
    align-items: center;
@@ -598,6 +679,18 @@ fieldset {
    min-height: 40rem;
 }
 
+.modal {
+   display: flex;
+   align-items: center;
+   justify-content: center;
+}
+
+.modal > * {
+   border-radius: var(--u0);
+   padding: var(--u0);
+   flex: 1;
+}
+
 /*
  * Impov
  */
diff --git a/prototype/src/main/resources/static/js/main.js b/prototype/src/main/resources/static/js/main.js
new file mode 100644
index 0000000..e69de29
diff --git a/prototype/src/main/resources/templates/about.html b/prototype/src/main/resources/templates/about.html
index a2b6cdc..ee13b9b 100644
--- a/prototype/src/main/resources/templates/about.html
+++ b/prototype/src/main/resources/templates/about.html
@@ -2,7 +2,7 @@
 <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=1.0, user-scalable=no">
+   <meta name="viewport" content="width=device-width, initial-scale=0.75, user-scalable=no">
 
    <title>Über uns</title>
    <link rel="stylesheet" th:href="@{/css/ecom.css}"/>
diff --git a/prototype/src/main/resources/templates/login.html b/prototype/src/main/resources/templates/login.html
index c7e9f31..a955231 100644
--- a/prototype/src/main/resources/templates/login.html
+++ b/prototype/src/main/resources/templates/login.html
@@ -2,22 +2,22 @@
 <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=1.0, user-scalable=no">
+   <meta name="viewport" content="width=device-width, initial-scale=0.75, user-scalable=no">
 
    <title>Einloggen</title>
    <link rel="stylesheet" th:href="@{/css/ecom.css}"/>
 </head>
 <body>
-    <nav th:replace="/fragments/header :: header">Header</nav>
-    <main class="content-width grid vertical-center center">
-      <form class="detailgrid s bg-base-highlight" th:action="@{/login}">
+   <!-- <nav th:replace="/fragments/header :: header">Header</nav> -->
+    <main class="content-width modal">
+      <form class="detailgrid s hero " th:action="@{/login}">
          <div class="s">
             <label for="username">Email Adresse</label>
             <input class="full-width" type="text" name="username" placeholder="Email Adresse" id="username" required>
          </div>
 
          <div class="s">
-            <label for="username">Passwort</label>
+            <label for="password">Passwort</label>
             <input class="full-width" type="text" name="password" placeholder="Passwort" id="password" required>
          </div>
 
diff --git a/prototype/src/main/resources/templates/privacy.html b/prototype/src/main/resources/templates/privacy.html
index 57617a8..9af1d33 100644
--- a/prototype/src/main/resources/templates/privacy.html
+++ b/prototype/src/main/resources/templates/privacy.html
@@ -2,7 +2,7 @@
 <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=1.0, user-scalable=no">
+   <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}"/>
diff --git a/prototype/src/main/resources/templates/register.html b/prototype/src/main/resources/templates/register.html
index e69de29..dce2736 100644
--- a/prototype/src/main/resources/templates/register.html
+++ b/prototype/src/main/resources/templates/register.html
@@ -0,0 +1,82 @@
+<!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>Neuen Account erstellen</title>
+   <link rel="stylesheet" th:href="@{/css/ecom.css}" />
+
+   <script th:src="@{/js/scrollToContent.js}"></script>
+</head>
+
+<body>
+   <nav th:replace="/fragments/header :: header">Header</nav>
+   <main class="modal">
+      <form class="detailflex m" th:action="@{/register}">
+         <div>
+            <h1>Neuen Account erstellen</h1>
+         </div>
+         <div>
+            <h2> Login Daten </h2>
+         </div>
+         <div>
+            <label for="username">Email Adresse</label>
+            <input class="full-width" type="text" name="username" placeholder="Email Adresse" id="username" required>
+         </div>
+
+         <div>
+            <label for="password">Passwort</label>
+            <input class="full-width" type="text" name="password" placeholder="Passwort" id="password" required>
+         </div>
+
+         <div>
+            <label for="password2">Passwort wiederholen</label>
+            <input class="full-width" type="text" name="password2" placeholder="Passwort" id="password2" required>
+         </div>
+
+         <div>
+            <h2> Rechungs- und Lieferinformation </h2>
+         </div>
+
+         <div class="col-2">
+            <div>
+               <label for="salutation">Anrede</label>
+               <input class="full-width" list="salutationsOpt" name="salutation" placeholder="Anrede" required />
+               <datalist id="salutationsOpt">
+                  <option value="Herr">
+                  <option value="Frau">
+                  <option value="Herr Dr.">
+                  <option value="Frau Dr.">
+               </datalist>
+            </div>
+            <div>
+               <label for="name">Name</label>
+               <input class="full-width" type="text" name="name" placeholder="Nachname Vorname" required />
+            </div>
+         </div>
+
+         <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>
+         </div>
+         <fieldset>
+            <input type="radio" name="type" value="priv" id="type-priv" required>
+            <label for="type-priv">Ich bin Privatkunde.</label> <br />
+            <input type="radio" name="type" value="bus" id="type-bus" required>
+            <label for="type-bus">Ich bin Geschäftskunde.</label> <br />
+         </fieldset>
+         <div>
+            <button class="full-width" type="submit" name="action" value="login">Registeren</button>
+            <a th:href="@{/terms}">
+               Unsere AGBs finden sie hier.
+            </a>
+         </div>
+
+      </form>
+   </main>
+   <footer th:replace="/fragments/footer :: footer"></footer>
+</body>
+
+</html>
diff --git a/prototype/src/main/resources/templates/terms.html b/prototype/src/main/resources/templates/terms.html
index 8048c03..3893e2a 100644
--- a/prototype/src/main/resources/templates/terms.html
+++ b/prototype/src/main/resources/templates/terms.html
@@ -2,7 +2,7 @@
 <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=1.0, user-scalable=no">
+   <meta name="viewport" content="width=device-width, initial-scale=0.75, user-scalable=no">
 
    <title>Allgemeine Geschäftsbedingungen</title>
    <link rel="stylesheet" th:href="@{/css/ecom.css}"/>