diff --git a/dist/digitaler-frieden-28a0e60b94264a4e.js b/dist/digitaler-frieden-41eb229f6c516288.js
similarity index 100%
rename from dist/digitaler-frieden-28a0e60b94264a4e.js
rename to dist/digitaler-frieden-41eb229f6c516288.js
diff --git a/dist/digitaler-frieden-28a0e60b94264a4e_bg.wasm b/dist/digitaler-frieden-41eb229f6c516288_bg.wasm
similarity index 87%
rename from dist/digitaler-frieden-28a0e60b94264a4e_bg.wasm
rename to dist/digitaler-frieden-41eb229f6c516288_bg.wasm
index ecf5426..8e69c2a 100644
Binary files a/dist/digitaler-frieden-28a0e60b94264a4e_bg.wasm and b/dist/digitaler-frieden-41eb229f6c516288_bg.wasm differ
diff --git a/dist/index.html b/dist/index.html
index 6a8ccb6..bb3acae 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-dc44ed5cde15170.css" integrity="sha384-SOaE2ELbvnK3hgeOgdjq8nfXzXbcTKN1zIetkIpE3I5wjJOpYD3XfDiTymcvW0+7">
+    <link rel="stylesheet" href="/styles-77b8acd4b2c98b3f.css" integrity="sha384-WRHf7LqMXC3eYO3NWTkTOsiSr1uYbFjoizeyxYZImrp6DVo8O/Kg51vIIY8M8Roj">
     <link rel="icon" href="/favicon-928ba63f33046eed.ico" integrity="sha384-Neq57jnFrTfqAN1JvKAVVVcH1EW3//cZHmK2NRXRlNrxAZR6ErTvXzbOLSyHzkA4">
      
   
-<link rel="preload" href="/digitaler-frieden-28a0e60b94264a4e_bg.wasm" crossorigin="anonymous" integrity="sha384-8T2wZPlTwECUJCK4A7oRPYvCw/xySRaTfDZqfu9kc0379hN0BSRWkURe6T5TOuTD" as="fetch" type="application/wasm">
-<link rel="modulepreload" href="/digitaler-frieden-28a0e60b94264a4e.js" crossorigin="anonymous" integrity="sha384-5owiTz49KdxhXPCnfR2GokkJnFqa++HeraekuGgskT+OizWrNTANvcXzigi62YCH"></head>
+<link rel="preload" href="/digitaler-frieden-41eb229f6c516288_bg.wasm" crossorigin="anonymous" integrity="sha384-Q0T2T56iiwSG02s/4mtEOdpxvjBQbyYxts2yi95aI8YYmrLSsFL7e/o4rGVHjMSm" as="fetch" type="application/wasm">
+<link rel="modulepreload" href="/digitaler-frieden-41eb229f6c516288.js" crossorigin="anonymous" integrity="sha384-5owiTz49KdxhXPCnfR2GokkJnFqa++HeraekuGgskT+OizWrNTANvcXzigi62YCH"></head>
   <body class="bg-black text-white ">
   
 
 
 <script type="module">
-import init, * as bindings from '/digitaler-frieden-28a0e60b94264a4e.js';
-init('/digitaler-frieden-28a0e60b94264a4e_bg.wasm');
+import init, * as bindings from '/digitaler-frieden-41eb229f6c516288.js';
+init('/digitaler-frieden-41eb229f6c516288_bg.wasm');
 window.wasmBindings = bindings;
 
 </script><script>"use strict";
diff --git a/dist/public/mail.svg b/dist/public/mail.svg
new file mode 100644
index 0000000..b174f86
--- /dev/null
+++ b/dist/public/mail.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="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z"/></svg>
\ No newline at end of file
diff --git a/dist/public/paper_plane.svg b/dist/public/paper_plane.svg
new file mode 100644
index 0000000..1b80ab2
--- /dev/null
+++ b/dist/public/paper_plane.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="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
\ No newline at end of file
diff --git a/dist/public/styles.css b/dist/public/styles.css
index 03708c0..21f8db1 100644
--- a/dist/public/styles.css
+++ b/dist/public/styles.css
@@ -574,6 +574,10 @@ video {
   top: 1rem;
 }
 
+.m-0 {
+  margin: 0px;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -586,6 +590,10 @@ video {
   margin-bottom: 3rem;
 }
 
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
 .mb-20 {
   margin-bottom: 5rem;
 }
@@ -618,22 +626,10 @@ video {
   margin-inline-start: 0.5rem;
 }
 
-.mt-12 {
-  margin-top: 3rem;
-}
-
-.mt-16 {
-  margin-top: 4rem;
-}
-
 .mt-20 {
   margin-top: 5rem;
 }
 
-.mt-24 {
-  margin-top: 6rem;
-}
-
 .mt-4 {
   margin-top: 1rem;
 }
@@ -642,10 +638,6 @@ video {
   margin-top: 16rem;
 }
 
-.mt-8 {
-  margin-top: 2rem;
-}
-
 .flex {
   display: flex;
 }
@@ -666,6 +658,10 @@ video {
   height: 4rem;
 }
 
+.h-24 {
+  height: 6rem;
+}
+
 .h-4 {
   height: 1rem;
 }
@@ -726,6 +722,10 @@ video {
   max-width: 9rem;
 }
 
+.max-w-56 {
+  max-width: 14rem;
+}
+
 .max-w-lg {
   max-width: 32rem;
 }
@@ -774,6 +774,12 @@ video {
   margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 }
 
+.space-y-16 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(4rem * var(--tw-space-y-reverse));
+}
+
 .space-y-24 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(6rem * calc(1 - var(--tw-space-y-reverse)));
@@ -817,9 +823,9 @@ video {
   padding-right: 3rem;
 }
 
-.px-6 {
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
 }
 
 .text-center {
@@ -918,6 +924,74 @@ video {
   }
 }
 
+.mail-animation {
+  position:relative;
+  animation:mail-animation 2s infinite;
+}
+
+/*
+@keyframes mail-animation {
+  0%, 10%{
+    top:0;
+    left:0;
+    transform: rotate(15deg);
+  }
+  50% {
+    left:22%;
+    top:15%;
+    transform: rotate(-15deg);
+  }
+  55% {
+    left:22%;
+    top:15%;
+    transform: rotate(-20deg);
+  }
+  60% {
+    left:22%;
+    top:15%;
+    transform: rotate(-25deg);
+  }
+  70% {
+    left:22%;
+    top:15%;
+    transform: rotate(-25deg);
+  }
+  70% {
+    left:22%;
+    top:15%;
+    transform: rotate(-25deg);
+  }
+  to {
+    top:-15%;
+    left:70%;
+    transform: rotate(-15deg);
+  }
+} */
+
+@keyframes mail-animation {
+  0% {
+    left: -20%;
+    opacity: 0.5;
+  }
+
+  20% {
+    opacity: 1;
+  }
+
+  70%{
+    left: 20%;
+  }
+
+  80%{
+    opacity: 1;
+  }
+
+  100%{
+    left: 100%;
+    opacity: 0;
+  }
+}
+
 .cx-date-picker {
   position: relative;
   display: inline-block;
@@ -1035,12 +1109,12 @@ video {
 }
 
 @media (min-width: 768px) {
-  .md\:mt-24 {
-    margin-top: 6rem;
+  .md\:mb-12 {
+    margin-bottom: 3rem;
   }
 
-  .md\:mt-32 {
-    margin-top: 8rem;
+  .md\:mb-32 {
+    margin-bottom: 8rem;
   }
 
   .md\:flex {
@@ -1078,3 +1152,9 @@ video {
   }
 }
 
+@media (min-width: 1024px) {
+  .lg\:mb-0 {
+    margin-bottom: 0px;
+  }
+}
+
diff --git a/dist/styles-dc44ed5cde15170.css b/dist/styles-77b8acd4b2c98b3f.css
similarity index 92%
rename from dist/styles-dc44ed5cde15170.css
rename to dist/styles-77b8acd4b2c98b3f.css
index 03708c0..21f8db1 100644
--- a/dist/styles-dc44ed5cde15170.css
+++ b/dist/styles-77b8acd4b2c98b3f.css
@@ -574,6 +574,10 @@ video {
   top: 1rem;
 }
 
+.m-0 {
+  margin: 0px;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -586,6 +590,10 @@ video {
   margin-bottom: 3rem;
 }
 
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
 .mb-20 {
   margin-bottom: 5rem;
 }
@@ -618,22 +626,10 @@ video {
   margin-inline-start: 0.5rem;
 }
 
-.mt-12 {
-  margin-top: 3rem;
-}
-
-.mt-16 {
-  margin-top: 4rem;
-}
-
 .mt-20 {
   margin-top: 5rem;
 }
 
-.mt-24 {
-  margin-top: 6rem;
-}
-
 .mt-4 {
   margin-top: 1rem;
 }
@@ -642,10 +638,6 @@ video {
   margin-top: 16rem;
 }
 
-.mt-8 {
-  margin-top: 2rem;
-}
-
 .flex {
   display: flex;
 }
@@ -666,6 +658,10 @@ video {
   height: 4rem;
 }
 
+.h-24 {
+  height: 6rem;
+}
+
 .h-4 {
   height: 1rem;
 }
@@ -726,6 +722,10 @@ video {
   max-width: 9rem;
 }
 
+.max-w-56 {
+  max-width: 14rem;
+}
+
 .max-w-lg {
   max-width: 32rem;
 }
@@ -774,6 +774,12 @@ video {
   margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 }
 
+.space-y-16 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(4rem * var(--tw-space-y-reverse));
+}
+
 .space-y-24 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(6rem * calc(1 - var(--tw-space-y-reverse)));
@@ -817,9 +823,9 @@ video {
   padding-right: 3rem;
 }
 
-.px-6 {
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
 }
 
 .text-center {
@@ -918,6 +924,74 @@ video {
   }
 }
 
+.mail-animation {
+  position:relative;
+  animation:mail-animation 2s infinite;
+}
+
+/*
+@keyframes mail-animation {
+  0%, 10%{
+    top:0;
+    left:0;
+    transform: rotate(15deg);
+  }
+  50% {
+    left:22%;
+    top:15%;
+    transform: rotate(-15deg);
+  }
+  55% {
+    left:22%;
+    top:15%;
+    transform: rotate(-20deg);
+  }
+  60% {
+    left:22%;
+    top:15%;
+    transform: rotate(-25deg);
+  }
+  70% {
+    left:22%;
+    top:15%;
+    transform: rotate(-25deg);
+  }
+  70% {
+    left:22%;
+    top:15%;
+    transform: rotate(-25deg);
+  }
+  to {
+    top:-15%;
+    left:70%;
+    transform: rotate(-15deg);
+  }
+} */
+
+@keyframes mail-animation {
+  0% {
+    left: -20%;
+    opacity: 0.5;
+  }
+
+  20% {
+    opacity: 1;
+  }
+
+  70%{
+    left: 20%;
+  }
+
+  80%{
+    opacity: 1;
+  }
+
+  100%{
+    left: 100%;
+    opacity: 0;
+  }
+}
+
 .cx-date-picker {
   position: relative;
   display: inline-block;
@@ -1035,12 +1109,12 @@ video {
 }
 
 @media (min-width: 768px) {
-  .md\:mt-24 {
-    margin-top: 6rem;
+  .md\:mb-12 {
+    margin-bottom: 3rem;
   }
 
-  .md\:mt-32 {
-    margin-top: 8rem;
+  .md\:mb-32 {
+    margin-bottom: 8rem;
   }
 
   .md\:flex {
@@ -1078,3 +1152,9 @@ video {
   }
 }
 
+@media (min-width: 1024px) {
+  .lg\:mb-0 {
+    margin-bottom: 0px;
+  }
+}
+
diff --git a/input.css b/input.css
index 8a4abfa..8b4ea19 100644
--- a/input.css
+++ b/input.css
@@ -25,6 +25,70 @@ opacity:0
 left:-200%;
 opacity:1}
 }
+
+.mail-animation {
+  position:relative;
+  animation:mail-animation 2s infinite;
+}
+/*
+@keyframes mail-animation {
+  0%, 10%{
+    top:0;
+    left:0;
+    transform: rotate(15deg);
+  }
+  50% {
+    left:22%;
+    top:15%;
+    transform: rotate(-15deg);
+  }
+  55% {
+    left:22%;
+    top:15%;
+    transform: rotate(-20deg);
+  }
+  60% {
+    left:22%;
+    top:15%;
+    transform: rotate(-25deg);
+  }
+  70% {
+    left:22%;
+    top:15%;
+    transform: rotate(-25deg);
+  }
+  70% {
+    left:22%;
+    top:15%;
+    transform: rotate(-25deg);
+  }
+  to {
+    top:-15%;
+    left:70%;
+    transform: rotate(-15deg);
+  }
+} */
+
+@keyframes mail-animation {
+  0% {
+    left: -20%;
+    opacity: 0.5;
+  }
+  20% {
+    opacity: 1;
+  }
+  70%{
+    left: 20%;
+  }
+  80%{
+    opacity: 1;
+  }
+  100%{
+    left: 100%;
+    opacity: 0;
+  }
+}
+
 .cx-date-picker {
   @apply inline-block relative;
 }
diff --git a/public/mail.svg b/public/mail.svg
new file mode 100644
index 0000000..b174f86
--- /dev/null
+++ b/public/mail.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="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z"/></svg>
\ No newline at end of file
diff --git a/public/paper_plane.svg b/public/paper_plane.svg
new file mode 100644
index 0000000..1b80ab2
--- /dev/null
+++ b/public/paper_plane.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="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
\ No newline at end of file
diff --git a/public/styles.css b/public/styles.css
index 03708c0..21f8db1 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -574,6 +574,10 @@ video {
   top: 1rem;
 }
 
+.m-0 {
+  margin: 0px;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -586,6 +590,10 @@ video {
   margin-bottom: 3rem;
 }
 
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
 .mb-20 {
   margin-bottom: 5rem;
 }
@@ -618,22 +626,10 @@ video {
   margin-inline-start: 0.5rem;
 }
 
-.mt-12 {
-  margin-top: 3rem;
-}
-
-.mt-16 {
-  margin-top: 4rem;
-}
-
 .mt-20 {
   margin-top: 5rem;
 }
 
-.mt-24 {
-  margin-top: 6rem;
-}
-
 .mt-4 {
   margin-top: 1rem;
 }
@@ -642,10 +638,6 @@ video {
   margin-top: 16rem;
 }
 
-.mt-8 {
-  margin-top: 2rem;
-}
-
 .flex {
   display: flex;
 }
@@ -666,6 +658,10 @@ video {
   height: 4rem;
 }
 
+.h-24 {
+  height: 6rem;
+}
+
 .h-4 {
   height: 1rem;
 }
@@ -726,6 +722,10 @@ video {
   max-width: 9rem;
 }
 
+.max-w-56 {
+  max-width: 14rem;
+}
+
 .max-w-lg {
   max-width: 32rem;
 }
@@ -774,6 +774,12 @@ video {
   margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 }
 
+.space-y-16 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(4rem * var(--tw-space-y-reverse));
+}
+
 .space-y-24 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(6rem * calc(1 - var(--tw-space-y-reverse)));
@@ -817,9 +823,9 @@ video {
   padding-right: 3rem;
 }
 
-.px-6 {
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
 }
 
 .text-center {
@@ -918,6 +924,74 @@ video {
   }
 }
 
+.mail-animation {
+  position:relative;
+  animation:mail-animation 2s infinite;
+}
+
+/*
+@keyframes mail-animation {
+  0%, 10%{
+    top:0;
+    left:0;
+    transform: rotate(15deg);
+  }
+  50% {
+    left:22%;
+    top:15%;
+    transform: rotate(-15deg);
+  }
+  55% {
+    left:22%;
+    top:15%;
+    transform: rotate(-20deg);
+  }
+  60% {
+    left:22%;
+    top:15%;
+    transform: rotate(-25deg);
+  }
+  70% {
+    left:22%;
+    top:15%;
+    transform: rotate(-25deg);
+  }
+  70% {
+    left:22%;
+    top:15%;
+    transform: rotate(-25deg);
+  }
+  to {
+    top:-15%;
+    left:70%;
+    transform: rotate(-15deg);
+  }
+} */
+
+@keyframes mail-animation {
+  0% {
+    left: -20%;
+    opacity: 0.5;
+  }
+
+  20% {
+    opacity: 1;
+  }
+
+  70%{
+    left: 20%;
+  }
+
+  80%{
+    opacity: 1;
+  }
+
+  100%{
+    left: 100%;
+    opacity: 0;
+  }
+}
+
 .cx-date-picker {
   position: relative;
   display: inline-block;
@@ -1035,12 +1109,12 @@ video {
 }
 
 @media (min-width: 768px) {
-  .md\:mt-24 {
-    margin-top: 6rem;
+  .md\:mb-12 {
+    margin-bottom: 3rem;
   }
 
-  .md\:mt-32 {
-    margin-top: 8rem;
+  .md\:mb-32 {
+    margin-bottom: 8rem;
   }
 
   .md\:flex {
@@ -1078,3 +1152,9 @@ video {
   }
 }
 
+@media (min-width: 1024px) {
+  .lg\:mb-0 {
+    margin-bottom: 0px;
+  }
+}
+
diff --git a/src/pages/clues.rs b/src/pages/clues.rs
index ddcfcd1..23785bd 100644
--- a/src/pages/clues.rs
+++ b/src/pages/clues.rs
@@ -6,8 +6,8 @@ use crate::router::Route;
 #[function_component]
 pub fn Clues() -> Html {
     html! {
-        <div class="px-6 mt-4 md:mt-24">
-            <section id="navigation">
+        <div class="flex flex-col justify-center items-center h-full space-y-16 px-8 m-0">
+            <section id="navigation" class="mb-12">
             <h3
                 class="text-primary
                 hover:bg-text-dark 
@@ -16,10 +16,8 @@ pub fn Clues() -> Html {
                 hover:cursor-pointer
                 transition duration-150 
                 font-bold text-xl 
-                max-w-xl 
                 rounded-md 
                 text-black
-                w-full
                 absolute
                 top-4
                 left-4
@@ -46,8 +44,8 @@ pub fn Clues() -> Html {
                 class="absolute top-4 right-4 md:min-w-56 md:w-56 w-0"
             />
             </section>
-            <section class="fade-in" id="content">
-            <div class="mt-16 md:mt-32 flex flex-col items-center justify-between">
+            <section class="fade-in w-full max-w-lg" id="content">
+            <div class="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">
@@ -100,7 +98,7 @@ pub fn Clues() -> Html {
                         </div>
                     </div>
                     <div
-                        class="flex flex-col justify-center items-center w-full mb-32 space-y-4 md:space-y-4"
+                        class="flex flex-col justify-center items-center w-full mb-6 space-y-4 md:space-y-4"
                     >
                         <div class="flex justify-between w-full relative">
                             <h3 class="font-bold text-2xl ">{ "Telefonnummern" }</h3>
@@ -145,7 +143,10 @@ pub fn Clues() -> Html {
                             <p class="text-md">{ "+49 9876 543 210" }</p>
                         </div>
                     </div>
-                    <div class="flex justify-center max-w-lg w-full mb-6">
+                </div>
+            </div>
+            </section>
+            <section id="next" class="fade-in w-full flex justify-center max-w-lg mb-4">
                         <Link<Route>
                             to={Route::Relationship}
                             classes={classes!("bg-primary",
@@ -167,14 +168,12 @@ pub fn Clues() -> Html {
                 "flex",
                 "justify-center",
                 "items-center",
+                "mb-12",
                                     )}
                         >
                             { "Weiter" }
                         </Link<Route>>
-                    </div>
-                </div>
-            </div>
-            </section>
+                    </section>
         </div>
     }
 }
diff --git a/src/pages/deceased.rs b/src/pages/deceased.rs
index a31123b..a77371f 100644
--- a/src/pages/deceased.rs
+++ b/src/pages/deceased.rs
@@ -6,120 +6,121 @@ use crate::router::Route;
 #[function_component]
 pub fn Deceased() -> Html {
     html! {
-        <div class="px-6 mt-20">
-            <section id="navigation">
-            <h3
-                class="text-primary
+        <div class="flex flex-col justify-center items-center h-full space-y-16 px-8 m-0">
+            <section id="navigation" class="mb-2 md:mb-12 lg:mb-0">
+                <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::Register}>
-                    <div class="flex items-center">
-                        <svg
-                            class="w-8 "
-                            xmlns="http://www.w3.org/2000/svg"
-                            viewBox="0 0 24 24"
-                            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"
-            />
+                >
+                    <Link<Route> to={Route::Register}>
+                        <div class="flex items-center">
+                            <svg
+                                class="w-8 "
+                                xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 24 24"
+                                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"
+                />
             </section>
-            <section class="fade-in" id="content">
-            <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"
-                            />
+            <section class="fade-in w-full max-w-lg" id="content">
+                <div class="flex flex-col justify-between items-start">
+                    <h3 class="text-3xl font-bold mb-6">{ "Verstorbene Person" }</h3>
+                    <div class="group 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 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 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 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 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 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 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 w-full mb-5">
+                        <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>
-                <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-5">
-                    <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>
+            </section>
+            <section id="next" class="w-full fade-in flex justify-center max-w-lg ">
                 <Link<Route>
                     to={Route::Clues}
                     classes={yew::classes!(
-    "bg-primary",
+                    "bg-primary",
                    "hover:bg-primary-dark",
                 "hover:text-white",
                 "hover:-translate-y-1",
@@ -132,13 +133,13 @@ pub fn Deceased() -> Html {
                    "text-center",
                    "w-full",
                    "h-16",
-                   "mt-8", "flex", "justify-center", "items-center",
+                   "flex", "justify-center", "items-center",
+                   "mb-12",
                                )}
                 >
                     { "Weiter" }
                 </Link<Route>>
-            </div>
-        </section>
-            </div>
+            </section>
+        </div>
     }
 }
diff --git a/src/pages/register.rs b/src/pages/register.rs
index 74b03de..d6a2762 100644
--- a/src/pages/register.rs
+++ b/src/pages/register.rs
@@ -6,8 +6,8 @@ use crate::router::Route;
 #[function_component]
 pub fn Register() -> Html {
     html! {
-        <div class="px-6 mt-20">
-            <section id="navigation">
+        <div class="flex flex-col justify-center items-center h-full space-y-16 px-8 m-0">
+            <section id="navigation" class="mb-2 md:mb-12 lg:mb-0">
                 <h3
                 class="text-primary
                 hover:bg-text-dark 
@@ -16,10 +16,8 @@ pub fn Register() -> Html {
                 hover:cursor-pointer
                 transition duration-150 
                 font-bold text-xl 
-                max-w-xl 
                 rounded-md 
                 text-black
-                w-full
                 absolute
                 top-4
                 left-4
@@ -46,8 +44,8 @@ pub fn Register() -> Html {
                 class="absolute top-4 right-4 md:-w-56 md:w-56 md:h-auto w-0 h-0"
             />
             </section>
-            <section id="content" class="fade-in">
-            <div class="-height mt-12 flex flex-col items-center">
+            <section id="content" class="fade-in w-full max-w-lg">
+            <div class="flex flex-col items-start">
                 <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>
diff --git a/src/pages/relationship.rs b/src/pages/relationship.rs
index 37b09fc..85536da 100644
--- a/src/pages/relationship.rs
+++ b/src/pages/relationship.rs
@@ -8,8 +8,8 @@ pub fn Relationship() -> Html {
     let classes = classes!("fade-in");
 
     html! {
-        <div class="px-6 mt-4 md:mt-24 ">
-            <section id="navigation">
+        <div class="flex flex-col justify-center items-center h-full space-y-16 px-8 m-0">
+            <section id="navigation" class="mb-2 md:mb-32">
             <div class="flex justify-between">
                 <h3
                     class="text-primary
@@ -19,11 +19,10 @@ pub fn Relationship() -> Html {
                 hover:cursor-pointer
                 transition duration-150 
                 font-bold text-xl 
-                max-w-xl 
                 rounded-md 
                 text-black
-                w-full
                 absolute
+                text-center
                 top-4
                 left-4
             "
@@ -51,8 +50,8 @@ pub fn Relationship() -> Html {
             </div>
             </section>
             <section id="content" class={classes}>
-            <div class="mt-24 md:mt-32 flex flex-col items-center ">
-                <h3 class="text-3xl font-bold mb-6">
+            <div class="flex flex-col items-center ">
+                <h3 class="text-3xl font-bold mb-6 text-center">
                     { "In welcher Beziehung stehst du zu der verstorbenen Person?" }
                 </h3>
                 <div class="flex flex-col items-start min-w-72 md:w-auto mb-32">
diff --git a/src/pages/signup.rs b/src/pages/signup.rs
index e43ac36..cd30a54 100644
--- a/src/pages/signup.rs
+++ b/src/pages/signup.rs
@@ -6,8 +6,9 @@ use crate::router::Route;
 #[function_component]
 pub fn SignUp() -> Html {
     html! {
-        <div class="h-full  px-6 mt-4">
-            <section id="navigation">
+            <div class="flex flex-col justify-center items-center h-full space-y-16 px-8 m-0">
+            <section id="navigation" class="mb-12">
+
             <h3
                 class="text-primary
                 hover:bg-text-dark 
@@ -16,10 +17,8 @@ pub fn SignUp() -> Html {
                 hover:cursor-pointer
                 transition duration-150 
                 font-bold text-xl 
-                max-w-xl 
                 rounded-md 
                 text-black
-                w-full
                 top-4
                 left-4
                 absolute
@@ -46,7 +45,7 @@ pub fn SignUp() -> Html {
                 class="top-4 right-4 absolute md:min-w-56 md:w-56 w-0"
             />
             </section>
-            <section id="content" class="fade-in">
+            <section id="content" class="w-full fade-in">
             <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>
diff --git a/src/pages/verify.rs b/src/pages/verify.rs
index 6c0350d..1a12d2a 100644
--- a/src/pages/verify.rs
+++ b/src/pages/verify.rs
@@ -6,93 +6,94 @@ use crate::router::Route;
 #[function_component]
 pub fn Verify() -> Html {
     html! {
-        <div class="px-6 mt-4 md:mt-24">
-            <section id="navigation">
-                <h3
-                    class="text-primary
+            <div class="flex flex-col justify-center items-center h-full space-y-16 px-8 m-0">
+            <section id="navigation" class="mb-2 md:mb-12 lg:mb-0">
+                    <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"
-                                viewBox="0 0 24 24"
-                                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"
-                />
-                </section>
-                <section id="content" class="fade-in">
-            <div class="mt-64 flex flex-col items-center">
-                <h3 class="text-3xl font-bold mb-6">{ "Verifizieren" }</h3>
-                <div class="flex flex-col items-start min-w-72 md:w-auto">
-                    <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">
-                    <Link<Route>
-                        to={Route::Register}
-                        classes={classes!(
-                    "bg-primary",
-                    "hover:bg-primary-dark",
-                    "hover:text-white",
-                    "hover:-translate-y-1",
-                    "hover:cursor-pointer",
-                    "transition", "duration-150",
-                    "font-bold", "text-xl",
-                    "rounded-md",
-                    "text-black",
-                    "text-center",
-                    "max-w-sm",
-                    "w-full",
-                    "min-h-12",
-                    "h-12",
-                    "flex", "justify-center", "items-center",
-                                )}
                     >
-                        { "Weiter" }
-                    </Link<Route>>
-                </div>
-                <div class="flex flex-col items-start min-w-72 md:w-auto">
-                    <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
+                        <Link<Route> to={Route::SignUp}>
+                            <div class="flex items-center">
+                                <svg
+                                    class="w-8 "
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    viewBox="0 0 24 24"
+                                    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"
+                    />
+                    </section>
+                    <section id="content" class="fade-in">
+                <div class="flex flex-col items-center">
+                    <h3 class="text-3xl font-bold mb-6">{ "Verifizieren" }</h3>
+                    <div class="flex flex-col items-start min-w-72 md:w-auto">
+                        <p class="mb-3">{ "Bitte verifiziere deine E-Mail Adresse." }</p>
+                        <p class="mb-8">{ "Wir haben dir eine E-Mail geschickt." }</p>
+    <div class="h-24 w-full">
+    <svg class="mail-animation mb-12 w-16 text-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
+    </div>
+                        <p class="mb-8">{ "Dann geht es hier weiter." }</p>
+                    </div>
+                    <div class="flex justify-center max-w-56 w-full mb-6">
+                        <Link<Route>
+                            to={Route::Register}
+                            classes={classes!(
+                        "bg-primary",
+                        "hover:bg-primary-dark",
+                        "hover:text-white",
+                        "hover:-translate-y-1",
+                        "hover:cursor-pointer",
+                        "transition", "duration-150",
+                        "font-bold", "text-xl",
+                        "rounded-md",
+                        "text-black",
+                        "text-center",
+                        "max-w-sm",
+                        "w-full",
+                        "min-h-12",
+                        "h-12",
+                        "flex", "justify-center", "items-center",
+                                    )}
+                        >
+                            { "Weiter" }
+                        </Link<Route>>
+                    </div>
+                    <div class="flex flex-col items-start min-w-72 md:w-auto">
+                        <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>>
+                        >
+                            <Link<Route> to={Route::SignUp}>{ "Erneut senden" }</Link<Route>>
+                        </div>
                     </div>
                 </div>
-            </div>
-        </section>
-            </div>
-    }
+            </section>
+                </div>
+        }
 }
