diff --git a/Trunk.toml b/Trunk.toml
index 88ba463..56f4c78 100644
--- a/Trunk.toml
+++ b/Trunk.toml
@@ -2,3 +2,6 @@
 stage = "build"
 command = "npx"
 command_arguments = ["tailwindcss", "-i","input.css","-o","public/styles.css"]
+
+[serve]
+address = "0.0.0.0"
diff --git a/dist/digitaler-frieden-fb7dc74a22b731fe.js b/dist/digitaler-frieden-a5c46ba2b4007edc.js
similarity index 98%
rename from dist/digitaler-frieden-fb7dc74a22b731fe.js
rename to dist/digitaler-frieden-a5c46ba2b4007edc.js
index 610a288..fb79066 100644
--- a/dist/digitaler-frieden-fb7dc74a22b731fe.js
+++ b/dist/digitaler-frieden-a5c46ba2b4007edc.js
@@ -910,16 +910,16 @@ function __wbg_get_imports() {
         const ret = wasm.memory;
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper4274 = function(arg0, arg1, arg2) {
-        const ret = makeClosure(arg0, arg1, 501, __wbg_adapter_42);
+    imports.wbg.__wbindgen_closure_wrapper4594 = function(arg0, arg1, arg2) {
+        const ret = makeClosure(arg0, arg1, 617, __wbg_adapter_42);
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper5945 = function(arg0, arg1, arg2) {
-        const ret = makeMutClosure(arg0, arg1, 672, __wbg_adapter_45);
+    imports.wbg.__wbindgen_closure_wrapper6267 = function(arg0, arg1, arg2) {
+        const ret = makeMutClosure(arg0, arg1, 788, __wbg_adapter_45);
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper6249 = function(arg0, arg1, arg2) {
-        const ret = makeMutClosure(arg0, arg1, 697, __wbg_adapter_48);
+    imports.wbg.__wbindgen_closure_wrapper6571 = function(arg0, arg1, arg2) {
+        const ret = makeMutClosure(arg0, arg1, 813, __wbg_adapter_48);
         return addHeapObject(ret);
     };
 
diff --git a/dist/digitaler-frieden-a5c46ba2b4007edc_bg.wasm b/dist/digitaler-frieden-a5c46ba2b4007edc_bg.wasm
new file mode 100644
index 0000000..6d2b4f9
Binary files /dev/null and b/dist/digitaler-frieden-a5c46ba2b4007edc_bg.wasm differ
diff --git a/dist/digitaler-frieden-fb7dc74a22b731fe_bg.wasm b/dist/digitaler-frieden-fb7dc74a22b731fe_bg.wasm
deleted file mode 100644
index 3473e43..0000000
Binary files a/dist/digitaler-frieden-fb7dc74a22b731fe_bg.wasm and /dev/null differ
diff --git a/dist/index.html b/dist/index.html
index 6491be4..7a5f671 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -2,19 +2,19 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Digitaler Frieden</title>
-    <link rel="stylesheet" href="/styles-2c3306d395d89bc2.css" integrity="sha384-+8Fyms9qqS3rUuKlny4vLywuMazPxNtMF4MSl5cTN27K5QbfscxqivAocoSKXg5B">
+    <link rel="stylesheet" href="/styles-c782c03204eac356.css" integrity="sha384-lKsFrm3yCxlOJa6nYfgnRtJimTwIjnZK68/u4R8fJ2S8PnK/ztPTifgkmJunkXLb">
     <link rel="icon" href="/favicon-928ba63f33046eed.ico" integrity="sha384-Neq57jnFrTfqAN1JvKAVVVcH1EW3//cZHmK2NRXRlNrxAZR6ErTvXzbOLSyHzkA4">
      
   
-<link rel="preload" href="/digitaler-frieden-fb7dc74a22b731fe_bg.wasm" crossorigin="anonymous" integrity="sha384-lWQv8lUizhe+m/RUp+RJ3sv0jhetWJgQUpU/Aydkyc1kOAibAK0i9F+1QraP4hRo" as="fetch" type="application/wasm">
-<link rel="modulepreload" href="/digitaler-frieden-fb7dc74a22b731fe.js" crossorigin="anonymous" integrity="sha384-h12ASFiCjhidsjC+iK+3+7dhtTGEfVHbsgwTAAEZ+b9bxxAhzIJRNq9qCx9GVYXT"></head>
-  <body class="bg-black text-white min-height">
+<link rel="preload" href="/digitaler-frieden-a5c46ba2b4007edc_bg.wasm" crossorigin="anonymous" integrity="sha384-/nhi/WYlpgPDFVyMKRzDBKCI1Qicv5ZlcCkwhnMaOxoKHpJrW5Jyr6Zz0Ber9zG7" as="fetch" type="application/wasm">
+<link rel="modulepreload" href="/digitaler-frieden-a5c46ba2b4007edc.js" crossorigin="anonymous" integrity="sha384-EIZgdnciYSFZw+rqoQTDD554+YaSi3C2aQkRZOcabgZZfrw+h5AogdieogZZ1+wr"></head>
+  <body class="bg-black text-white ">
   
 
 
 <script type="module">
-import init, * as bindings from '/digitaler-frieden-fb7dc74a22b731fe.js';
-init('/digitaler-frieden-fb7dc74a22b731fe_bg.wasm');
+import init, * as bindings from '/digitaler-frieden-a5c46ba2b4007edc.js';
+init('/digitaler-frieden-a5c46ba2b4007edc_bg.wasm');
 window.wasmBindings = bindings;
 
 </script><script>"use strict";
diff --git a/dist/public/add.svg b/dist/public/add.svg
new file mode 100644
index 0000000..d5b1751
--- /dev/null
+++ b/dist/public/add.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.49 2 2 6.49 2 12s4.49 10 10 10 10-4.49 10-10S17.51 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
\ No newline at end of file
diff --git a/dist/public/remove.svg b/dist/public/remove.svg
new file mode 100644
index 0000000..da63c5a
--- /dev/null
+++ b/dist/public/remove.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
\ No newline at end of file
diff --git a/dist/public/styles.css b/dist/public/styles.css
index 47e54d5..8d2a487 100644
--- a/dist/public/styles.css
+++ b/dist/public/styles.css
@@ -554,30 +554,138 @@ video {
   --tw-contain-style:  ;
 }
 
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.left-4 {
+  left: 1rem;
+}
+
+.right-4 {
+  right: 1rem;
+}
+
+.top-4 {
+  top: 1rem;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.mb-10 {
+  margin-bottom: 2.5rem;
+}
+
+.mb-12 {
+  margin-bottom: 3rem;
+}
+
+.mb-16 {
+  margin-bottom: 4rem;
+}
+
+.mb-20 {
+  margin-bottom: 5rem;
+}
+
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
+.mb-8 {
+  margin-bottom: 2rem;
+}
+
+.mt-12 {
+  margin-top: 3rem;
+}
+
+.mt-16 {
+  margin-top: 4rem;
+}
+
 .mt-20 {
   margin-top: 5rem;
 }
 
-.mt-6 {
-  margin-top: 1.5rem;
+.mt-24 {
+  margin-top: 6rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.mt-64 {
+  margin-top: 16rem;
+}
+
+.mt-8 {
+  margin-top: 2rem;
 }
 
 .flex {
   display: flex;
 }
 
+.h-0 {
+  height: 0px;
+}
+
+.h-10 {
+  height: 2.5rem;
+}
+
+.h-12 {
+  height: 3rem;
+}
+
 .h-16 {
   height: 4rem;
 }
 
-.h-screen {
-  height: 100vh;
+.h-full {
+  height: 100%;
+}
+
+.min-h-12 {
+  min-height: 3rem;
 }
 
 .min-h-16 {
   min-height: 4rem;
 }
 
+.w-0 {
+  width: 0px;
+}
+
+.w-10 {
+  width: 2.5rem;
+}
+
+.w-16 {
+  width: 4rem;
+}
+
+.w-24 {
+  width: 6rem;
+}
+
 .w-8 {
   width: 2rem;
 }
@@ -594,6 +702,10 @@ video {
   min-width: 14rem;
 }
 
+.max-w-36 {
+  max-width: 9rem;
+}
+
 .max-w-xl {
   max-width: 36rem;
 }
@@ -602,14 +714,32 @@ video {
   flex-direction: column;
 }
 
+.items-start {
+  align-items: flex-start;
+}
+
 .items-center {
   align-items: center;
 }
 
+.justify-start {
+  justify-content: flex-start;
+}
+
 .justify-center {
   justify-content: center;
 }
 
+.justify-between {
+  justify-content: space-between;
+}
+
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-y-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
@@ -632,25 +762,61 @@ video {
   border-radius: 0.375rem;
 }
 
+.border-2 {
+  border-width: 2px;
+}
+
+.border-b {
+  border-bottom-width: 1px;
+}
+
+.border-white {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
+.bg-transparent {
+  background-color: transparent;
+}
+
 .px-12 {
   padding-left: 3rem;
   padding-right: 3rem;
 }
 
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
 .text-center {
   text-align: center;
 }
 
+.text-start {
+  text-align: start;
+}
+
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
 .text-3xl {
   font-size: 1.875rem;
   line-height: 2.25rem;
 }
 
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
 .text-xl {
   font-size: 1.25rem;
   line-height: 1.75rem;
@@ -686,8 +852,50 @@ video {
   transition-duration: 150ms;
 }
 
+.duration-700 {
+  transition-duration: 700ms;
+}
+
+.cx-date-picker {
+  position: relative;
+  display: inline-block;
+}
+
+.cx-date-picker[type="date"]::-webkit-calendar-picker-indicator {
+  background: transparent;
+  bottom: 0;
+  color: transparent;
+  cursor: pointer;
+  height: auto;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: auto;
+}
+
+.text-danger {
+  color: rgba(255, 82, 82,1.0);
+}
+
+.bg-danger {
+  background-color: rgba(255, 82, 82,1.0);
+}
+
 .min-height {
-  min-height: 600px;
+  min-height: 500px;
+}
+
+.text-tertiary {
+  color: rgba(132, 129, 122,1.0);
+}
+
+.bg-tertriary {
+  background-color: rgba(132, 129, 122,1.0);
+}
+
+.border-primary {
+  border-color: rgba(51,217,178,1.0);
 }
 
 .text-primary {
@@ -722,6 +930,16 @@ video {
   background-color: rgba(52, 172, 224,1.0);
 }
 
+.focus-within\:bg-\[\#33d9b2\]:focus-within {
+  --tw-bg-opacity: 1;
+  background-color: rgb(51 217 178 / var(--tw-bg-opacity));
+}
+
+.focus-within\:text-black:focus-within {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
 .hover\:-translate-y-1:hover {
   --tw-translate-y: -0.25rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -731,8 +949,62 @@ video {
   cursor: pointer;
 }
 
+.hover\:border-\[\#33d9b2\]:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(51 217 178 / var(--tw-border-opacity));
+}
+
 .hover\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.active\:bg-\[\#33d9b2\]:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(51 217 178 / var(--tw-bg-opacity));
+}
+
+.group:hover .group-hover\:cursor-pointer {
+  cursor: pointer;
+}
+
+@media (min-width: 768px) {
+  .md\:mt-24 {
+    margin-top: 6rem;
+  }
+
+  .md\:mt-32 {
+    margin-top: 8rem;
+  }
+
+  .md\:flex {
+    display: flex;
+  }
+
+  .md\:h-auto {
+    height: auto;
+  }
+
+  .md\:w-56 {
+    width: 14rem;
+  }
+
+  .md\:min-w-56 {
+    min-width: 14rem;
+  }
+
+  .md\:flex-col {
+    flex-direction: column;
+  }
+
+  .md\:items-center {
+    align-items: center;
+  }
+
+  .md\:space-y-4 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+  }
+}
+
diff --git a/dist/styles-2c3306d395d89bc2.css b/dist/styles-c782c03204eac356.css
similarity index 79%
rename from dist/styles-2c3306d395d89bc2.css
rename to dist/styles-c782c03204eac356.css
index 47e54d5..8d2a487 100644
--- a/dist/styles-2c3306d395d89bc2.css
+++ b/dist/styles-c782c03204eac356.css
@@ -554,30 +554,138 @@ video {
   --tw-contain-style:  ;
 }
 
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.left-4 {
+  left: 1rem;
+}
+
+.right-4 {
+  right: 1rem;
+}
+
+.top-4 {
+  top: 1rem;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.mb-10 {
+  margin-bottom: 2.5rem;
+}
+
+.mb-12 {
+  margin-bottom: 3rem;
+}
+
+.mb-16 {
+  margin-bottom: 4rem;
+}
+
+.mb-20 {
+  margin-bottom: 5rem;
+}
+
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
+.mb-8 {
+  margin-bottom: 2rem;
+}
+
+.mt-12 {
+  margin-top: 3rem;
+}
+
+.mt-16 {
+  margin-top: 4rem;
+}
+
 .mt-20 {
   margin-top: 5rem;
 }
 
-.mt-6 {
-  margin-top: 1.5rem;
+.mt-24 {
+  margin-top: 6rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.mt-64 {
+  margin-top: 16rem;
+}
+
+.mt-8 {
+  margin-top: 2rem;
 }
 
 .flex {
   display: flex;
 }
 
+.h-0 {
+  height: 0px;
+}
+
+.h-10 {
+  height: 2.5rem;
+}
+
+.h-12 {
+  height: 3rem;
+}
+
 .h-16 {
   height: 4rem;
 }
 
-.h-screen {
-  height: 100vh;
+.h-full {
+  height: 100%;
+}
+
+.min-h-12 {
+  min-height: 3rem;
 }
 
 .min-h-16 {
   min-height: 4rem;
 }
 
+.w-0 {
+  width: 0px;
+}
+
+.w-10 {
+  width: 2.5rem;
+}
+
+.w-16 {
+  width: 4rem;
+}
+
+.w-24 {
+  width: 6rem;
+}
+
 .w-8 {
   width: 2rem;
 }
@@ -594,6 +702,10 @@ video {
   min-width: 14rem;
 }
 
+.max-w-36 {
+  max-width: 9rem;
+}
+
 .max-w-xl {
   max-width: 36rem;
 }
@@ -602,14 +714,32 @@ video {
   flex-direction: column;
 }
 
+.items-start {
+  align-items: flex-start;
+}
+
 .items-center {
   align-items: center;
 }
 
+.justify-start {
+  justify-content: flex-start;
+}
+
 .justify-center {
   justify-content: center;
 }
 
+.justify-between {
+  justify-content: space-between;
+}
+
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-y-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
@@ -632,25 +762,61 @@ video {
   border-radius: 0.375rem;
 }
 
+.border-2 {
+  border-width: 2px;
+}
+
+.border-b {
+  border-bottom-width: 1px;
+}
+
+.border-white {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
+.bg-transparent {
+  background-color: transparent;
+}
+
 .px-12 {
   padding-left: 3rem;
   padding-right: 3rem;
 }
 
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
 .text-center {
   text-align: center;
 }
 
+.text-start {
+  text-align: start;
+}
+
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
 .text-3xl {
   font-size: 1.875rem;
   line-height: 2.25rem;
 }
 
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
 .text-xl {
   font-size: 1.25rem;
   line-height: 1.75rem;
@@ -686,8 +852,50 @@ video {
   transition-duration: 150ms;
 }
 
+.duration-700 {
+  transition-duration: 700ms;
+}
+
+.cx-date-picker {
+  position: relative;
+  display: inline-block;
+}
+
+.cx-date-picker[type="date"]::-webkit-calendar-picker-indicator {
+  background: transparent;
+  bottom: 0;
+  color: transparent;
+  cursor: pointer;
+  height: auto;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: auto;
+}
+
+.text-danger {
+  color: rgba(255, 82, 82,1.0);
+}
+
+.bg-danger {
+  background-color: rgba(255, 82, 82,1.0);
+}
+
 .min-height {
-  min-height: 600px;
+  min-height: 500px;
+}
+
+.text-tertiary {
+  color: rgba(132, 129, 122,1.0);
+}
+
+.bg-tertriary {
+  background-color: rgba(132, 129, 122,1.0);
+}
+
+.border-primary {
+  border-color: rgba(51,217,178,1.0);
 }
 
 .text-primary {
@@ -722,6 +930,16 @@ video {
   background-color: rgba(52, 172, 224,1.0);
 }
 
+.focus-within\:bg-\[\#33d9b2\]:focus-within {
+  --tw-bg-opacity: 1;
+  background-color: rgb(51 217 178 / var(--tw-bg-opacity));
+}
+
+.focus-within\:text-black:focus-within {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
 .hover\:-translate-y-1:hover {
   --tw-translate-y: -0.25rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -731,8 +949,62 @@ video {
   cursor: pointer;
 }
 
+.hover\:border-\[\#33d9b2\]:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(51 217 178 / var(--tw-border-opacity));
+}
+
 .hover\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.active\:bg-\[\#33d9b2\]:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(51 217 178 / var(--tw-bg-opacity));
+}
+
+.group:hover .group-hover\:cursor-pointer {
+  cursor: pointer;
+}
+
+@media (min-width: 768px) {
+  .md\:mt-24 {
+    margin-top: 6rem;
+  }
+
+  .md\:mt-32 {
+    margin-top: 8rem;
+  }
+
+  .md\:flex {
+    display: flex;
+  }
+
+  .md\:h-auto {
+    height: auto;
+  }
+
+  .md\:w-56 {
+    width: 14rem;
+  }
+
+  .md\:min-w-56 {
+    min-width: 14rem;
+  }
+
+  .md\:flex-col {
+    flex-direction: column;
+  }
+
+  .md\:items-center {
+    align-items: center;
+  }
+
+  .md\:space-y-4 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+  }
+}
+
diff --git a/index.html b/index.html
index 6292b2b..c0e8db4 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,6 @@
     <link data-trunk href="./public/favicon.ico" rel="icon" type="image/x-icon">
     <link data-trunk rel="copy-dir" href="public"> 
   </head>
-  <body class="bg-black text-white min-height">
+  <body class="bg-black text-white ">
   </body>
 </html>
diff --git a/input.css b/input.css
index 04a576f..918076e 100644
--- a/input.css
+++ b/input.css
@@ -2,8 +2,45 @@
 @tailwind components;
 @tailwind utilities;
 
+.cx-date-picker {
+  @apply inline-block relative;
+}
+
+.cx-date-picker[type="date"]::-webkit-calendar-picker-indicator {
+    background: transparent;
+    bottom: 0;
+    color: transparent;
+    cursor: pointer;
+    height: auto;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: auto;
+}
+
+.text-danger {
+  color: rgba(255, 82, 82,1.0);
+}
+
+.bg-danger {
+  background-color: rgba(255, 82, 82,1.0);
+}
+
 .min-height {
-  min-height: 600px;
+  min-height: 500px;
+}
+
+.text-tertiary {
+  color: rgba(132, 129, 122,1.0);
+}
+
+.bg-tertriary {
+  background-color: rgba(132, 129, 122,1.0);
+}
+
+.border-primary {
+  border-color: rgba(51,217,178,1.0);
 }
 
 .text-primary {
diff --git a/public/add.svg b/public/add.svg
new file mode 100644
index 0000000..d5b1751
--- /dev/null
+++ b/public/add.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.49 2 2 6.49 2 12s4.49 10 10 10 10-4.49 10-10S17.51 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
\ No newline at end of file
diff --git a/public/remove.svg b/public/remove.svg
new file mode 100644
index 0000000..da63c5a
--- /dev/null
+++ b/public/remove.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
\ No newline at end of file
diff --git a/public/styles.css b/public/styles.css
index 47e54d5..8d2a487 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -554,30 +554,138 @@ video {
   --tw-contain-style:  ;
 }
 
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.left-4 {
+  left: 1rem;
+}
+
+.right-4 {
+  right: 1rem;
+}
+
+.top-4 {
+  top: 1rem;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.mb-10 {
+  margin-bottom: 2.5rem;
+}
+
+.mb-12 {
+  margin-bottom: 3rem;
+}
+
+.mb-16 {
+  margin-bottom: 4rem;
+}
+
+.mb-20 {
+  margin-bottom: 5rem;
+}
+
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
+.mb-8 {
+  margin-bottom: 2rem;
+}
+
+.mt-12 {
+  margin-top: 3rem;
+}
+
+.mt-16 {
+  margin-top: 4rem;
+}
+
 .mt-20 {
   margin-top: 5rem;
 }
 
-.mt-6 {
-  margin-top: 1.5rem;
+.mt-24 {
+  margin-top: 6rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.mt-64 {
+  margin-top: 16rem;
+}
+
+.mt-8 {
+  margin-top: 2rem;
 }
 
 .flex {
   display: flex;
 }
 
+.h-0 {
+  height: 0px;
+}
+
+.h-10 {
+  height: 2.5rem;
+}
+
+.h-12 {
+  height: 3rem;
+}
+
 .h-16 {
   height: 4rem;
 }
 
-.h-screen {
-  height: 100vh;
+.h-full {
+  height: 100%;
+}
+
+.min-h-12 {
+  min-height: 3rem;
 }
 
 .min-h-16 {
   min-height: 4rem;
 }
 
+.w-0 {
+  width: 0px;
+}
+
+.w-10 {
+  width: 2.5rem;
+}
+
+.w-16 {
+  width: 4rem;
+}
+
+.w-24 {
+  width: 6rem;
+}
+
 .w-8 {
   width: 2rem;
 }
@@ -594,6 +702,10 @@ video {
   min-width: 14rem;
 }
 
+.max-w-36 {
+  max-width: 9rem;
+}
+
 .max-w-xl {
   max-width: 36rem;
 }
@@ -602,14 +714,32 @@ video {
   flex-direction: column;
 }
 
+.items-start {
+  align-items: flex-start;
+}
+
 .items-center {
   align-items: center;
 }
 
+.justify-start {
+  justify-content: flex-start;
+}
+
 .justify-center {
   justify-content: center;
 }
 
+.justify-between {
+  justify-content: space-between;
+}
+
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-y-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
@@ -632,25 +762,61 @@ video {
   border-radius: 0.375rem;
 }
 
+.border-2 {
+  border-width: 2px;
+}
+
+.border-b {
+  border-bottom-width: 1px;
+}
+
+.border-white {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
+.bg-transparent {
+  background-color: transparent;
+}
+
 .px-12 {
   padding-left: 3rem;
   padding-right: 3rem;
 }
 
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
 .text-center {
   text-align: center;
 }
 
+.text-start {
+  text-align: start;
+}
+
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
 .text-3xl {
   font-size: 1.875rem;
   line-height: 2.25rem;
 }
 
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
 .text-xl {
   font-size: 1.25rem;
   line-height: 1.75rem;
@@ -686,8 +852,50 @@ video {
   transition-duration: 150ms;
 }
 
+.duration-700 {
+  transition-duration: 700ms;
+}
+
+.cx-date-picker {
+  position: relative;
+  display: inline-block;
+}
+
+.cx-date-picker[type="date"]::-webkit-calendar-picker-indicator {
+  background: transparent;
+  bottom: 0;
+  color: transparent;
+  cursor: pointer;
+  height: auto;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: auto;
+}
+
+.text-danger {
+  color: rgba(255, 82, 82,1.0);
+}
+
+.bg-danger {
+  background-color: rgba(255, 82, 82,1.0);
+}
+
 .min-height {
-  min-height: 600px;
+  min-height: 500px;
+}
+
+.text-tertiary {
+  color: rgba(132, 129, 122,1.0);
+}
+
+.bg-tertriary {
+  background-color: rgba(132, 129, 122,1.0);
+}
+
+.border-primary {
+  border-color: rgba(51,217,178,1.0);
 }
 
 .text-primary {
@@ -722,6 +930,16 @@ video {
   background-color: rgba(52, 172, 224,1.0);
 }
 
+.focus-within\:bg-\[\#33d9b2\]:focus-within {
+  --tw-bg-opacity: 1;
+  background-color: rgb(51 217 178 / var(--tw-bg-opacity));
+}
+
+.focus-within\:text-black:focus-within {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
 .hover\:-translate-y-1:hover {
   --tw-translate-y: -0.25rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -731,8 +949,62 @@ video {
   cursor: pointer;
 }
 
+.hover\:border-\[\#33d9b2\]:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(51 217 178 / var(--tw-border-opacity));
+}
+
 .hover\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.active\:bg-\[\#33d9b2\]:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(51 217 178 / var(--tw-bg-opacity));
+}
+
+.group:hover .group-hover\:cursor-pointer {
+  cursor: pointer;
+}
+
+@media (min-width: 768px) {
+  .md\:mt-24 {
+    margin-top: 6rem;
+  }
+
+  .md\:mt-32 {
+    margin-top: 8rem;
+  }
+
+  .md\:flex {
+    display: flex;
+  }
+
+  .md\:h-auto {
+    height: auto;
+  }
+
+  .md\:w-56 {
+    width: 14rem;
+  }
+
+  .md\:min-w-56 {
+    min-width: 14rem;
+  }
+
+  .md\:flex-col {
+    flex-direction: column;
+  }
+
+  .md\:items-center {
+    align-items: center;
+  }
+
+  .md\:space-y-4 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+  }
+}
+
diff --git a/src/pages.rs b/src/pages.rs
index 5c1428d..4b4d3ca 100644
--- a/src/pages.rs
+++ b/src/pages.rs
@@ -1,5 +1,17 @@
 mod signup;
 pub use signup::SignUp;
 
+mod verify;
+pub use verify::Verify;
+
+mod deceased;
+pub use deceased::Deceased;
+
+mod clues;
+pub use clues::Clues;
+
+mod register;
+pub use register::Register;
+
 mod home;
 pub use home::Home;
diff --git a/src/pages/clues.rs b/src/pages/clues.rs
new file mode 100644
index 0000000..27be3a9
--- /dev/null
+++ b/src/pages/clues.rs
@@ -0,0 +1,94 @@
+use yew::{function_component, html, Html};
+use yew_router::components::Link;
+
+use crate::router::Route;
+
+#[function_component]
+pub fn Clues() -> Html {
+    html! {
+       <div class="px-6 mt-4 md:mt-24">
+             <h3 class="text-primary 
+                hover:bg-text-dark 
+                hover:text-white 
+                hover:-translate-y-1 
+                hover:cursor-pointer
+                transition duration-150 
+                font-bold text-xl 
+                max-w-xl 
+                rounded-md 
+                text-black
+                w-full
+                absolute
+                top-4
+                left-4
+            ">
+                <Link<Route> to={Route::SignUp}>
+                    <div class="flex items-center"><svg class="w-8 " xmlns="http://www.w3.org/2000/svg" height="currentHeight" viewBox="0 0 24 24" width="currentWidth" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>{"Zurück"}</div>
+                </Link<Route>>
+            </h3>
+            <img src="public/digitaler-frieden_logo.jpg" alt="logo digitaler frieden" class="absolute top-4 right-4 md:min-w-56 md:w-56 w-0"/>
+            <div class="mt-16 md:mt-32 flex flex-col items-center justify-between">
+            <div class="flex flex-col items-start">
+            <h3 class="text-3xl font-bold mb-4">{"Spurhinweise hinzufügen"}</h3>
+               <p class="mb-6">{"Füge alle dir bekannten E-Mail Adressen und Telefonnummern hinzu."}</p> 
+               <div class="flex flex-col justify-between items-center w-full mb-10 space-y-4 md:space-y-4">
+               <div class="flex justify-between w-full relative">
+                    <h3 class="font-bold text-2xl ">{"E-Mail Adressen"}</h3>
+                    <svg class="text-primary w-10 absolute right-4" xmlns="http://www.w3.org/2000/svg" height="currentHeight" viewBox="0 0 24 24" width="currentWidth" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.49 2 2 6.49 2 12s4.49 10 10 10 10-4.49 10-10S17.51 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
+                </div>
+                <div class="flex justify-start items-center space-x-4 w-full">
+                <svg class="w-10 text-danger" xmlns="http://www.w3.org/2000/svg" height="currentHeight" viewBox="0 0 24 24" width="currentWidth" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
+                    <p class="text-md">{"max.mustermann@example.com"}</p>
+                    
+                </div>
+                <div class="flex justify-start items-center w-full space-x-4">
+                    
+<svg class="w-10 text-danger" xmlns="http://www.w3.org/2000/svg" height="currentHeight" viewBox="0 0 24 24" width="currentWidth" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
+<p class="text-md">{"jon.doe@blub.com"}</p>
+                </div>
+
+                </div>
+                <div class="flex flex-col justify-center items-center w-full mb-10 space-y-4 md:space-y-4">
+               <div class="flex justify-between w-full relative">
+                    <h3 class="font-bold text-2xl ">{"Telefonnummern"}</h3>
+                    <svg class="text-primary w-10 absolute right-4" xmlns="http://www.w3.org/2000/svg" height="currentHeight" viewBox="0 0 24 24" width="currentWidth" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.49 2 2 6.49 2 12s4.49 10 10 10 10-4.49 10-10S17.51 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
+                </div>
+                <div class="flex justify-start items-center space-x-4 w-full">
+                <svg class="w-10 text-danger" xmlns="http://www.w3.org/2000/svg" height="currentHeight" viewBox="0 0 24 24" width="currentWidth" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
+                    <p class="text-md">{"+49 1234 567 890"}</p>
+                    
+                </div>
+                <div class="flex justify-start items-center w-full space-x-4">
+                    
+<svg class="w-10 text-danger" xmlns="http://www.w3.org/2000/svg" height="currentHeight" viewBox="0 0 24 24" width="currentWidth" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
+<p class="text-md">{"+49 9876 543 210"}</p>
+                </div>
+
+                </div>
+            <div class="flex justify-center max-w-xl w-full mb-6">
+                <div class="bg-primary 
+                    hover:bg-primary-dark 
+                    hover:text-white 
+                    hover:-translate-y-1 
+                    hover:cursor-pointer
+                    transition duration-150 
+                    font-bold text-xl 
+                    max-w-xl 
+                    rounded-md 
+                    text-black
+                    text-center
+                    w-full 
+                    min-h-16 
+                    h-16
+                    flex justify-center items-center mb-16"
+                >
+                    <Link<Route> to={Route::Register}>
+                        {"Weiter"}
+                    </Link<Route>>
+                </div>
+    </div>
+         </div>
+            </div>
+           </div>
+    }
+}
diff --git a/src/pages/deceased.rs b/src/pages/deceased.rs
new file mode 100644
index 0000000..d81c2d8
--- /dev/null
+++ b/src/pages/deceased.rs
@@ -0,0 +1,94 @@
+use yew::{function_component, html, Html};
+use yew_router::components::Link;
+
+use crate::router::Route;
+
+#[function_component]
+pub fn Deceased() -> Html {
+    html! {
+       <div class="px-6 mt-20">
+             <h3 class="text-primary 
+                hover:bg-text-dark 
+                hover:text-white 
+                hover:-translate-y-1 
+                hover:cursor-pointer
+                transition duration-150 
+                font-bold text-xl 
+                max-w-xl 
+                rounded-md 
+                text-black
+                w-full
+                absolute
+                top-4
+                left-4
+            ">
+                <Link<Route> to={Route::Home}>
+                    <div class="flex items-center"><svg class="w-8 " xmlns="http://www.w3.org/2000/svg" height="currentHeight" viewBox="0 0 24 24" width="currentWidth" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>{"Zurück"}</div>
+                </Link<Route>>
+            </h3>
+                            <img src="public/digitaler-frieden_logo.jpg" alt="logo digitaler frieden" class="absolute top-4 right-4 md:-w-56 md:w-56 md:h-auto w-0 h-0"/>
+            <div class="-height mt-12 flex flex-col items-center">
+                <h3 class="text-3xl font-bold mb-6">{"Verstorbene Person"}</h3>
+                <div class="group max-w-xl w-full mb-4">
+                    <p class="text-start text-md mb-1">{"Vorname"}</p>
+                    <input class="duration-700 font-bold text-md transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2]  active:bg-[#33d9b2] border-b text-center focus-within:text-black w-full h-10 rounded-md" type="text"/>
+                </div>
+                <div class="group max-w-xl w-full mb-4">
+                    <p class="text-start text-md mb-1">{"Nachname"}</p>
+                    <input class="duration-700 font-bold text-md transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2] active:bg-[#33d9b2] border-b text-center  focus-within:text-black w-full h-10 rounded-md" type="text"/>
+                </div>
+                <div class="group max-w-xl w-full mb-4">
+                    <div class="flex justify-between space-x-4">
+                        <div class="w-full">
+                            <p class="text-start text-md mb-1">{"Straße"}</p>
+                            <input class="duration-700 font-bold text-md transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2] active:bg-[#33d9b2] border-b text-center  focus-within:text-black w-full h-10 rounded-md" type="text"/>
+                        </div>
+                        <div class="w-24">
+                            <p class="text-start text-md mb-1 w-16">{"Nr."}</p>
+                            <input class="duration-700 font-bold text-md transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2] active:bg-[#33d9b2] border-b text-center  focus-within:text-black w-full h-10 rounded-md" type="text"/>
+                        </div>
+                    </div>
+                </div>
+                <div class="group max-w-xl w-full mb-4">
+                    <p class="text-start text-md mb-1">{"Postleitzahl"}</p>
+                    <input class="duration-700 font-bold text-md transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2] active:bg-[#33d9b2] border-b text-center  focus-within:text-black w-full h-10 rounded-md" type="text"/>
+                </div>
+                <div class="group max-w-xl w-full mb-4">
+                    <p class="text-start text-md mb-1">{"Ort"}</p>
+                    <input class="duration-700 font-bold text-md transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2] active:bg-[#33d9b2] border-b text-center  focus-within:text-black w-full h-10 rounded-md" type="text"/>
+                </div>
+                <div class="group max-w-xl w-full mb-4">
+                    <p class="text-start text-md mb-1">{"Geburtsort"}</p>
+                    <input class="duration-700 font-bold text-md transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2] active:bg-[#33d9b2] border-b text-center  focus-within:text-black w-full h-10 rounded-md" type="text"/>
+                </div>
+                <div class="group max-w-xl w-full mb-4">
+                    <p class="text-start text-md mb-1">{"Geburtstag"}</p>
+                    <input class="duration-700 font-bold text-md transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2] active:bg-[#33d9b2] border-b text-center  focus-within:text-black w-full h-10 rounded-md cx-date-picker" type="date" />
+                </div>
+                <div class="group max-w-xl w-full mb-4">
+                    <p class="text-start text-md mb-1">{"Todestag"}</p>
+                    <input class="duration-700 font-bold text-md transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2] active:bg-[#33d9b2] border-b text-center  focus-within:text-black w-full h-10 rounded-md cx-date-picker" type="date"/>
+                </div>
+            <div class="bg-primary 
+                hover:bg-primary-dark 
+                hover:text-white 
+                hover:-translate-y-1 
+                hover:cursor-pointer
+                transition duration-150 
+                font-bold text-xl 
+                max-w-xl 
+                rounded-md 
+                text-black
+                text-center
+                w-full 
+                h-16
+                mt-8 flex justify-center items-center "
+            >
+                <Link<Route> to={Route::Clues}>
+                    {"Weiter"}
+                </Link<Route>>
+            </div>
+        </div>
+    </div>
+    }
+}
diff --git a/src/pages/home.rs b/src/pages/home.rs
index e4ac66c..6455dcd 100644
--- a/src/pages/home.rs
+++ b/src/pages/home.rs
@@ -7,7 +7,7 @@ use crate::router::Route;
 #[function_component]
 pub fn Home() -> Html {
     html! {
-        <div class="flex flex-col items-center h-screen min-height space-y-24 px-12 mt-20">
+        <div class="flex flex-col items-center h-full space-y-24 px-12 mt-20 mb-20">
             <div class="flex flex-col items-center space-y-4">
                 <img src="public/digitaler-frieden_logo.jpg" alt="logo digitaler frieden" class="min-w-56 w-96"/>
                 <h3 class="text-3xl font-bold text-center ">{"Digitale Spuren entfernen per Knopfdruck"}</h3>
diff --git a/src/pages/register.rs b/src/pages/register.rs
new file mode 100644
index 0000000..bd0c2e5
--- /dev/null
+++ b/src/pages/register.rs
@@ -0,0 +1,90 @@
+use yew::{function_component, html, Html};
+use yew_router::components::Link;
+
+use crate::router::Route;
+
+#[function_component]
+pub fn Register() -> Html {
+    html! {
+       <div class="px-6 mt-20">
+             <h3 class="text-primary 
+                hover:bg-text-dark 
+                hover:text-white 
+                hover:-translate-y-1 
+                hover:cursor-pointer
+                transition duration-150 
+                font-bold text-xl 
+                max-w-xl 
+                rounded-md 
+                text-black
+                w-full
+                absolute
+                top-4
+                left-4
+            ">
+                <Link<Route> to={Route::Home}>
+                    <div class="flex items-center"><svg class="w-8 " xmlns="http://www.w3.org/2000/svg" height="currentHeight" viewBox="0 0 24 24" width="currentWidth" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>{"Zurück"}</div>
+                </Link<Route>>
+            </h3>
+                            <img src="public/digitaler-frieden_logo.jpg" alt="logo digitaler frieden" class="absolute top-4 right-4 md:-w-56 md:w-56 md:h-auto w-0 h-0"/>
+            <div class="-height mt-12 flex flex-col items-center">
+                <h3 class="text-3xl font-bold mb-6">{"Registrierung abschließen"}</h3>
+                <div class="group max-w-xl w-full mb-4">
+                    <p class="text-start text-md mb-1">{"Vorname"}</p>
+                    <input class="duration-700 font-bold text-md transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2]  active:bg-[#33d9b2] border-b text-center focus-within:text-black w-full h-10 rounded-md" type="text"/>
+                </div>
+                <div class="group max-w-xl w-full mb-4">
+                    <p class="text-start text-md mb-1">{"Nachname"}</p>
+                    <input class="duration-700 font-bold text-md transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2] active:bg-[#33d9b2] border-b text-center  focus-within:text-black w-full h-10 rounded-md" type="text"/>
+                </div>
+                <div class="group max-w-xl w-full mb-4">
+                    <div class="flex justify-between space-x-4">
+                        <div class="w-full">
+                            <p class="text-start text-md mb-1">{"Straße"}</p>
+                            <input class="duration-700 font-bold text-md transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2] active:bg-[#33d9b2] border-b text-center  focus-within:text-black w-full h-10 rounded-md" type="text"/>
+                        </div>
+                        <div class="w-24">
+                            <p class="text-start text-md mb-1 w-16">{"Nr."}</p>
+                            <input class="duration-700 font-bold text-md transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2] active:bg-[#33d9b2] border-b text-center  focus-within:text-black w-full h-10 rounded-md" type="text"/>
+                        </div>
+                    </div>
+                </div>
+                <div class="group max-w-xl w-full mb-4">
+                    <p class="text-start text-md mb-1">{"Postleitzahl"}</p>
+                    <input class="duration-700 font-bold text-md transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2] active:bg-[#33d9b2] border-b text-center  focus-within:text-black w-full h-10 rounded-md" type="text"/>
+                </div>
+                <div class="group max-w-xl w-full mb-4">
+                    <p class="text-start text-md mb-1">{"Ort"}</p>
+                    <input class="duration-700 font-bold text-md transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2] active:bg-[#33d9b2] border-b text-center  focus-within:text-black w-full h-10 rounded-md" type="text"/>
+                </div>
+                <div class="group max-w-xl w-full mb-4">
+                    <p class="text-start text-md mb-1">{"Telefonnummer"}</p>
+                    <input class="duration-700 font-bold text-md transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2] active:bg-[#33d9b2] border-b text-center  focus-within:text-black w-full h-10 rounded-md" type="text"/>
+                </div>
+                <div class="group max-w-xl w-full mb-4">
+                    <p class="text-start text-md mb-1">{"Geburtsort"}</p>
+                    <input class="duration-700 font-bold text-md transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2] active:bg-[#33d9b2] border-b text-center  focus-within:text-black w-full h-10 rounded-md" type="text"/>
+                </div>
+            <div class="bg-primary 
+                hover:bg-primary-dark 
+                hover:text-white 
+                hover:-translate-y-1 
+                hover:cursor-pointer
+                transition duration-150 
+                font-bold text-xl 
+                max-w-xl 
+                rounded-md 
+                text-black
+                text-center
+                w-full 
+                h-16
+                mt-20 flex justify-center items-center "
+            >
+                <Link<Route> to={Route::Deceased}>
+                    {"Weiter"}
+                </Link<Route>>
+            </div>
+        </div>
+    </div>
+    }
+}
diff --git a/src/pages/signup.rs b/src/pages/signup.rs
index b629167..6556c3b 100644
--- a/src/pages/signup.rs
+++ b/src/pages/signup.rs
@@ -6,7 +6,7 @@ use crate::router::Route;
 #[function_component]
 pub fn SignUp() -> Html {
     html! {
-       <div class="h-screen min-height px-12 mt-6">
+       <div class="h-full  px-6 mt-4">
                  <h3 class="text-primary 
                 hover:bg-text-dark 
                 hover:text-white 
@@ -17,14 +17,54 @@ pub fn SignUp() -> Html {
                 max-w-xl 
                 rounded-md 
                 text-black
-                w-full 
+                w-full
+                top-4
+                left-4
+                absolute
             ">
                 <Link<Route> to={Route::Home}>
                     <div class="flex items-center"><svg class="w-8 " xmlns="http://www.w3.org/2000/svg" height="currentHeight" viewBox="0 0 24 24" width="currentWidth" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>{"Zurück"}</div>
                 </Link<Route>>
             </h3>
-        <div class="flex flex-col items-center h-screen min-height space-y-24 px-12 mt-20">
-           </div>
+                            <img src="public/digitaler-frieden_logo.jpg" alt="logo digitaler frieden" class="top-4 right-4 absolute md:min-w-56 md:w-56 w-0"/>
+            <div class="min-height mt-64 md:flex md:flex-col md:items-center">
+            <h3 class="text-3xl font-bold mb-6">{"Jetzt registrieren"}</h3>
+               <p>{"Gib deine E-Mail Adresse ein."}</p> 
+                <div class="group max-w-xl w-full mb-4">
+                    <input class="duration-700 font-bold text-lg transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2] active:bg-[#33d9b2] border-2 text-center text-primary focus-within:text-black w-full h-16 mt-4 rounded-md" type="text"/>
+                </div>
+                    <div class="flex justify-between max-w-xl w-full">
+                        <div class="text-primary hover:text-white 
+                hover:-translate-y-1 
+                hover:cursor-pointer
+                transition duration-150 
+                ">
+                            <Link<Route> to={Route::SignUp}>
+                                {"Stattdessen anmelden"}
+                             </Link<Route>>
+                         </div>
+                        <div class="bg-primary 
+                hover:bg-primary-dark 
+                hover:text-white 
+                hover:-translate-y-1 
+                hover:cursor-pointer
+                transition duration-150 
+                font-bold text-xl 
+                max-w-36 
+                rounded-md 
+                text-black
+                text-center
+                w-full 
+                min-h-12 
+                h-12
+                flex justify-center items-center"
+            >
+                <Link<Route> to={Route::Verify}>
+                    {"Weiter"}
+                </Link<Route>>
+            </div>
+                    </div>
+            </div>
         </div>
     }
 }
diff --git a/src/pages/verify.rs b/src/pages/verify.rs
new file mode 100644
index 0000000..201a46b
--- /dev/null
+++ b/src/pages/verify.rs
@@ -0,0 +1,77 @@
+use yew::{function_component, html, Html};
+use yew_router::components::Link;
+
+use crate::router::Route;
+
+#[function_component]
+pub fn Verify() -> Html {
+    html! {
+       <div class="px-6 mt-4 md:mt-24">
+           <div class="flex justify-between">
+             <h3 class="text-primary 
+                hover:bg-text-dark 
+                hover:text-white 
+                hover:-translate-y-1 
+                hover:cursor-pointer
+                transition duration-150 
+                font-bold text-xl 
+                max-w-xl 
+                rounded-md 
+                text-black
+                w-full
+                absolute
+                top-4
+                left-4
+            ">
+                <Link<Route> to={Route::SignUp}>
+                    <div class="flex items-center"><svg class="w-8 " xmlns="http://www.w3.org/2000/svg" height="currentHeight" viewBox="0 0 24 24" width="currentWidth" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>{"Zurück"}</div>
+                </Link<Route>>
+            </h3>
+            <img src="public/digitaler-frieden_logo.jpg" alt="logo digitaler frieden" class="absolute top-4 right-4 md:min-w-56 md:w-56 w-0"/>
+           </div>
+            <div class="mt-24 md:mt-32 flex flex-col items-center">
+            <h3 class="text-3xl font-bold mb-6">{"Verifizieren"}</h3>
+            <div class="flex flex-col items-start">
+               <p class="mb-3">{"Bitte verifiziere deine E-Mail Adresse."}</p> 
+               <p class="mb-12">{"Wir haben dir eine E-Mail geschickt."}</p> 
+               <p class="mb-8">{"Dann geht es hier weiter."}</p> 
+           </div>
+            <div class="flex justify-center max-w-xl w-full mb-6">
+                <div class="bg-primary 
+                    hover:bg-primary-dark 
+                    hover:text-white 
+                    hover:-translate-y-1 
+                    hover:cursor-pointer
+                    transition duration-150 
+                    font-bold text-xl 
+                    max-w-36 
+                    rounded-md 
+                    text-black
+                    text-center
+                    w-full 
+                    min-h-12 
+                    h-12
+                    flex justify-center items-center mb-16"
+                >
+                    <Link<Route> to={Route::Register}>
+                        {"Weiter"}
+                    </Link<Route>>
+                </div>
+            </div>
+            <div class="flex flex-col items-start">
+                <p class="mb-1">{"Noch keine E-Mail erhalten?"}</p>
+                <p class="mb-4">{"Spam Ordner schon überprüft?"}</p>
+                <div class="text-primary hover:text-white 
+                    hover:-translate-y-1 
+                    hover:cursor-pointer
+                    transition duration-150 
+                    ">
+                        <Link<Route> to={Route::SignUp}>
+                            {"Erneut senden"}
+                         </Link<Route>>
+                 </div>
+            </div>
+         </div>
+    </div>
+    }
+}
diff --git a/src/router.rs b/src/router.rs
index 2c7383e..aa0027d 100644
--- a/src/router.rs
+++ b/src/router.rs
@@ -1,4 +1,4 @@
-use crate::pages::{Home, SignUp};
+use crate::pages::{Clues, Deceased, Home, Register, SignUp, Verify};
 
 use yew_router::prelude::*;
 use yew::{function_component, html, Html};
@@ -9,6 +9,14 @@ pub enum Route {
     Home,
     #[at("/signup")]
     SignUp,
+    #[at("/verify")]
+    Verify,
+    #[at("/deceased")]
+    Deceased,
+    #[at("/clues")]
+    Clues,
+    #[at("/register")]
+    Register,
 }
 
 fn route(routes: Route) -> Html {
@@ -19,6 +27,18 @@ fn route(routes: Route) -> Html {
         Route::SignUp => {
             html! { <SignUp /> }
         },
+        Route::Verify => {
+            html! { <Verify /> }
+        },
+        Route::Clues => {
+            html! { <Clues /> }
+        },
+        Route::Deceased => {
+            html! { <Deceased /> }
+        },
+        Route::Register => {
+            html! { <Register /> }
+        },
     }
 }
 
