diff --git a/src/assets/icons/check.svg b/public/img/icons/check.svg
similarity index 100%
rename from src/assets/icons/check.svg
rename to public/img/icons/check.svg
diff --git a/src/assets/icons/desktop_outline.svg b/public/img/icons/desktop_outline.svg
similarity index 100%
rename from src/assets/icons/desktop_outline.svg
rename to public/img/icons/desktop_outline.svg
diff --git a/public/img/icons/landing_graphic.svg b/public/img/icons/landing_graphic.svg
new file mode 100644
index 0000000..0c50fa5
--- /dev/null
+++ b/public/img/icons/landing_graphic.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 542 173"><defs><style>.a{fill:#516281;}.b{fill:#0fcdc1;}</style></defs><path class="a" d="M28.75,155.78h0a10.08,10.08,0,0,1-9.88-7.86l-6.65-28.78a10.19,10.19,0,0,1,5.86-11.6l31-13.29a10.15,10.15,0,0,1,11.84,2.91l12,14.62a99.35,99.35,0,0,0,43.72-43.72L102,56.09a10.18,10.18,0,0,1-2.92-11.83l13.3-31A10.24,10.24,0,0,1,124,7.35L152.78,14a10.09,10.09,0,0,1,7.86,9.88C160.63,96.63,101.47,155.78,28.75,155.78Zm24.31-55.35a3.1,3.1,0,0,0-1.22.25L20.85,114A3.18,3.18,0,0,0,19,117.58l6.64,28.77a3.13,3.13,0,0,0,3.06,2.43A125,125,0,0,0,153.64,23.91a3.13,3.13,0,0,0-2.44-3.09l-28.78-6.64A3.2,3.2,0,0,0,118.79,16L105.51,47a3.16,3.16,0,0,0,.91,3.66L125.3,66.13l-1.16,2.47a106.37,106.37,0,0,1-50.71,50.71L71,120.47,55.5,101.59A3.14,3.14,0,0,0,53.06,100.43Z"/><path class="a" d="M481.94,163.78H406.41a10.14,10.14,0,0,1,.08-20.28H424l2.09-6.28H377.8A16.82,16.82,0,0,1,361,120.45V31.88A16.82,16.82,0,0,1,377.8,15.1H510.63a16.8,16.8,0,0,1,16.78,16.78v88.56a16.82,16.82,0,0,1-16.78,16.78H462.35l2.09,6.28H482a10.14,10.14,0,0,1-.07,20.28Zm-.09-7a3.15,3.15,0,0,0,2.28-.89A3.14,3.14,0,0,0,482,150.5H459.4l-6.75-20.28h58a9.8,9.8,0,0,0,9.78-9.78V31.88a9.79,9.79,0,0,0-9.78-9.78H377.8A9.81,9.81,0,0,0,368,31.88v88.56a9.81,9.81,0,0,0,9.79,9.78h58L429,150.5H406.58a3.18,3.18,0,0,0-3.23,3.11,3.14,3.14,0,0,0,3.1,3.17Z"/><path class="b" d="M347.58,94.89h-10v-10h10Zm-30,0h-10v-10h10Zm-30,0h-10v-10h10Zm-30,0h-10v-10h10Zm-30,0h-10v-10h10Zm-30,0h-10v-10h10Zm-30,0h-10v-10h10Z"/><path class="a" d="M509.52,119.87h-131V33.17h131Zm-124-7h117V40.17h-117Z"/></svg>
\ No newline at end of file
diff --git a/public/img/icons/logo.svg b/public/img/icons/logo.svg
new file mode 100644
index 0000000..671cd52
--- /dev/null
+++ b/public/img/icons/logo.svg
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 144.3 144.3" style="enable-background:new 0 0 144.3 144.3;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#8FCDC1;}
+	.st1{fill:#4F617F;}
+	.st2{fill:#FFFFFF;}
+	.st3{fill:#6C86AB;}
+</style>
+<g>
+	<circle class="st0" cx="72.1" cy="72.1" r="68.9"/>
+	<g>
+		<path class="st1" d="M144.3,72.1c0,9.7-1.9,19.2-5.7,28.1c-3.6,8.6-8.8,16.3-15.5,22.9c-6.6,6.6-14.3,11.8-22.9,15.5
+			c-8.9,3.8-18.3,5.7-28.1,5.7s-19.2-1.9-28.1-5.7c-8.6-3.6-16.3-8.8-22.9-15.5c-6.6-6.6-11.8-14.3-15.5-22.9
+			C1.9,91.3,0,81.9,0,72.1s1.9-19.2,5.7-28.1c3.6-8.6,8.8-16.3,15.5-22.9S35.5,9.3,44.1,5.7C52.9,1.9,62.4,0,72.1,0
+			c9.7,0,19.2,1.9,28.1,5.7c8.6,3.6,16.3,8.8,22.9,15.5c6.6,6.6,11.8,14.3,15.5,22.9C142.4,52.9,144.3,62.4,144.3,72.1z M3.2,72.1
+			c0,9.3,1.8,18.3,5.4,26.8c3.5,8.2,8.4,15.6,14.8,21.9c6.3,6.3,13.7,11.3,21.9,14.8c8.5,3.6,17.5,5.4,26.8,5.4
+			c9.3,0,18.3-1.8,26.8-5.4c8.2-3.5,15.6-8.4,21.9-14.8c6.3-6.3,11.3-13.7,14.8-21.9c3.6-8.5,5.4-17.5,5.4-26.8
+			c0-9.3-1.8-18.3-5.4-26.8c-3.5-8.2-8.4-15.6-14.8-21.9c-6.3-6.3-13.7-11.3-21.9-14.8c-8.5-3.6-17.5-5.4-26.8-5.4
+			c-9.3,0-18.3,1.8-26.8,5.4c-8.2,3.5-15.6,8.4-21.9,14.8c-6.3,6.3-11.3,13.7-14.8,21.9C5.1,53.8,3.2,62.8,3.2,72.1z"/>
+	</g>
+	<path class="st2" d="M131.1,75.1c0,8.2-3.2,15.9-9,21.8c-5.8,5.8-13.4,9-21.6,9.1c0,0-0.1,0-0.1,0H47.7c-4,0-7.3-3.3-7.3-7.3
+		c0-1.5,0.4-2.9,1.3-4.2c0,0,0-0.1,0-0.1c0,0,0-0.1,0-0.1c0-0.1-0.1-0.1-0.1-0.1h-7.5c-4,0-7.3-3.3-7.3-7.3c0-1.5,0.4-2.9,1.3-4.2
+		c0,0,0-0.1,0-0.1c0,0,0-0.1,0-0.1c0-0.1-0.1-0.1-0.1-0.1h-7.5c-4,0-7.3-3.3-7.3-7.3c0-4,3.3-7.3,7.3-7.3h7.5c0.1,0,0.1,0,0.1-0.1
+		c0,0,0,0,0-0.1c0,0,0-0.1,0-0.1c-0.8-1.2-1.3-2.7-1.3-4.2c0-4.1,3.3-7.3,7.3-7.3h24.2c0.1,0,0.1,0,0.2-0.1c0,0,0,0,0-0.1
+		c0,0,0-0.1-0.1-0.1c-2.9-2.5-4.6-6.2-4.6-10c0-2.3,0.6-4.6,1.8-6.6c0.2-0.4,0.6-0.6,1-0.7c0.4-0.1,0.9,0.1,1.2,0.4
+		C61.5,42,66.1,44,71,44.2l29.5,0c0,0,0.1,0,0.1,0c8.2,0.1,15.8,3.3,21.6,9.1C128,59.1,131.1,66.9,131.1,75.1z"/>
+	<path class="st3" d="M56.7,38.2c-0.5,0.1-0.9,0.4-1.2,0.8c-1.2,2-1.8,4.3-1.8,6.7c0,4,1.8,7.7,4.6,10.1H34.1
+		c-4.1,0-7.5,3.4-7.5,7.5c0,1.5,0.5,3,1.3,4.3h-7.5c-4.1,0-7.5,3.4-7.5,7.5c0,4.1,3.4,7.5,7.5,7.5h7.5c-0.9,1.2-1.3,2.7-1.3,4.3
+		c0,4.1,3.4,7.5,7.5,7.5h7.5c-0.9,1.2-1.3,2.7-1.3,4.2c0,4.1,3.4,7.5,7.5,7.5h52.7c0,0,0.1,0,0.1,0c8.2-0.1,15.9-3.3,21.7-9.1
+		c5.8-5.8,9-13.6,9-21.9c0-8.3-3.2-16-9-21.9c-5.8-5.8-13.5-9.1-21.7-9.1c0,0-0.1,0-0.1,0H71c-4.8-0.2-9.4-2.2-13-5.5
+		C57.6,38.3,57.1,38.1,56.7,38.2z M70.9,47.3C70.9,47.3,70.9,47.3,70.9,47.3l29.5,0c0,0,0.1,0,0.1,0c7.4,0,14.3,2.9,19.5,8.2
+		c5.2,5.2,8.1,12.2,8.1,19.6c0,4.4-1,8.6-2.9,12.4c0,0-0.1,0.1-0.1,0.1c-1.1,2.2-2.6,4-4.3,5.3c-4.5,3.3-10.1,5-15.7,4.6
+		c-5.7-0.4-11-2.8-15-6.9c-7.2-7.2-7.2-19,0-26.2c5.7-5.7,14.9-5.7,20.5,0c4.4,4.4,4.4,11.6,0,16c-3.4,3.4-8.9,3.4-12.3,0
+		c-1.3-1.3-1.9-2.9-1.9-4.7v0c0-1.8,0.7-3.4,1.9-4.7c0.6-0.6,0.6-1.7,0-2.3c-0.6-0.6-1.7-0.6-2.3,0c-1.9,1.9-2.9,4.3-2.9,7v0
+		c0,2.6,1,5.1,2.9,7c4.7,4.7,12.2,4.7,16.9,0c5.7-5.7,5.7-14.9,0-20.5c-6.9-6.9-18.2-6.9-25.1,0c-8.5,8.5-8.5,22.3,0,30.8
+		c4.6,4.6,10.6,7.3,17.1,7.8c2.5,0.2,5,0,7.4-0.5c-3.6,1.7-7.6,2.6-11.8,2.7c0,0,0,0-0.1,0H47.7c-2.3,0-4.2-1.9-4.2-4.2
+		c0-2.3,1.9-4.2,4.2-4.2h29.1c0.9,0,1.6-0.7,1.6-1.6c0-0.9-0.7-1.6-1.6-1.6H34.1c-2.3,0-4.3-1.9-4.3-4.2c0-2.3,1.9-4.3,4.3-4.3h37.4
+		c0.9,0,1.6-0.7,1.6-1.6c0-0.9-0.7-1.6-1.6-1.6H20.5c-2.3,0-4.2-1.9-4.2-4.2c0-2.3,1.9-4.3,4.2-4.3h51.1c0.9,0,1.6-0.7,1.6-1.6
+		c0-0.9-0.7-1.6-1.6-1.6H34.1c-2.3,0-4.3-1.9-4.3-4.3c0-2.3,1.9-4.2,4.3-4.2h42.7c0.9,0,1.6-0.7,1.6-1.6c0-0.9-0.7-1.6-1.6-1.6H66.4
+		C61.1,55.5,57,51,57,45.7c0-1.1,0.2-2.2,0.5-3.3C61.3,45.4,66,47.1,70.9,47.3z"/>
+</g>
+</svg>
diff --git a/src/assets/icons/phone.svg b/public/img/icons/phone.svg
similarity index 100%
rename from src/assets/icons/phone.svg
rename to public/img/icons/phone.svg
diff --git a/src/assets/icons/phone_outline.svg b/public/img/icons/phone_outline.svg
similarity index 100%
rename from src/assets/icons/phone_outline.svg
rename to public/img/icons/phone_outline.svg
diff --git a/src/assets/icons/plus.svg b/public/img/icons/plus.svg
similarity index 100%
rename from src/assets/icons/plus.svg
rename to public/img/icons/plus.svg
diff --git a/src/App.vue b/src/App.vue
index 3943904..7de07d6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,32 +1,5 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
     <router-view/>
   </div>
 </template>
-
-<style lang="scss">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
-}
-</style>
diff --git a/src/assets/icons/landing_graphic.svg b/src/assets/icons/landing_graphic.svg
deleted file mode 100644
index c18283c..0000000
--- a/src/assets/icons/landing_graphic.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="0 0 542 173" xmlns="http://www.w3.org/2000/svg"><path d="m115.58 14.64-13.29 31a6.64 6.64 0 0 0 1.91 7.75l16.8 13.72a102.56 102.56 0 0 1 -49 49l-13.79-16.74a6.64 6.64 0 0 0 -7.75-1.91l-31 13.28a6.7 6.7 0 0 0 -3.85 7.61l6.65 28.78a6.63 6.63 0 0 0 6.47 5.15 128.39 128.39 0 0 0 128.41-128.37 6.63 6.63 0 0 0 -5.14-6.5l-28.78-6.65a6.72 6.72 0 0 0 -7.64 3.88z" fill="none" stroke="#8a00ef" stroke-width="7"/><g fill="#8a00ef"><path d="m481.94 163.78h-75.53a10.14 10.14 0 0 1 .08-20.28h17.51l2.09-6.28h-48.29a16.82 16.82 0 0 1 -16.8-16.77v-88.57a16.82 16.82 0 0 1 16.8-16.78h132.83a16.8 16.8 0 0 1 16.78 16.78v88.56a16.82 16.82 0 0 1 -16.78 16.78h-48.28l2.09 6.28h17.56a10.14 10.14 0 0 1 -.07 20.28zm-.09-7a3.15 3.15 0 0 0 2.28-.89 3.14 3.14 0 0 0 -2.13-5.39h-22.6l-6.75-20.28h58a9.8 9.8 0 0 0 9.78-9.78v-88.56a9.79 9.79 0 0 0 -9.78-9.78h-132.85a9.81 9.81 0 0 0 -9.8 9.78v88.56a9.81 9.81 0 0 0 9.79 9.78h58l-6.79 20.28h-22.42a3.18 3.18 0 0 0 -3.23 3.11 3.14 3.14 0 0 0 3.1 3.17z"/><path d="m347.58 94.89h-10v-10h10zm-30 0h-10v-10h10zm-30 0h-10v-10h10zm-30 0h-10v-10h10zm-30 0h-10v-10h10zm-30 0h-10v-10h10zm-30 0h-10v-10h10z"/><path d="m509.52 119.87h-131v-86.7h131zm-124-7h117v-72.7h-117z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/styles/_colors.scss b/src/assets/styles/_colors.scss
index 5ea0248..7630e01 100644
--- a/src/assets/styles/_colors.scss
+++ b/src/assets/styles/_colors.scss
@@ -1 +1 @@
-$primary: #8A00EF;
\ No newline at end of file
+$primary: #526381;
\ No newline at end of file
diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss
index f391629..4189af4 100644
--- a/src/assets/styles/_variables.scss
+++ b/src/assets/styles/_variables.scss
@@ -1,2 +1,6 @@
 $font-weight-regular: 400;
-$font-weight-bold: 700;
\ No newline at end of file
+$font-weight-bold: 700;
+
+$desktop: "only screen and (min-width: 1024px)";
+$tablet: "only screen and (min-width: 768px) and (max-width: 1023px)";
+$mobile: "only screen and (max-width: 767px)";
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 79ca858..b78fa1f 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -4,10 +4,36 @@
 "_fonts.scss";
 
 body {
-    color: $primary;
-    font-family: 'Lato', 'sans-serif';
+  color: $primary;
+  font-family: 'Lato', 'sans-serif';
 }
 
 * {
-    box-sizing: border-box;
-}
\ No newline at end of file
+  box-sizing: border-box;
+}
+
+a {
+  color: $primary;
+  text-decoration: none;
+}
+
+h1, h2 ,h3 ,h4 ,h5 ,h6 {
+  font-family: 'Baloo 2', 'sans-serif';
+}
+
+.page-container {
+  margin: auto;
+  max-width: 1200px;
+
+  &.home main {
+    margin: 0 auto;
+
+    @media #{$desktop} {
+      max-width: 800px;
+    }
+
+    @media #{$tablet} {
+      max-width: 600px;
+    }
+  }
+}
diff --git a/src/components/Card.vue b/src/components/Card.vue
new file mode 100644
index 0000000..4e5312b
--- /dev/null
+++ b/src/components/Card.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="card">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Card',
+};
+</script>
+
+<style lang="scss" scoped>
+  .card {
+    background: #EDF2F7;
+    border-radius: 20px 20px 0 0;
+    box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.25);
+    padding: 30px 20px;
+    margin: 0 5px;
+    text-align: center;
+  }
+</style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
new file mode 100644
index 0000000..779c3c5
--- /dev/null
+++ b/src/components/Header.vue
@@ -0,0 +1,108 @@
+<template>
+  <header class="header">
+    <div class="header__logo logo">
+      <img
+        class="logo__image"
+        src="/img/icons/logo.svg"
+        :alt="$t('meta.title')"
+      />
+      <h1 class="logo__text">{{ $t('meta.title') }}</h1>
+    </div>
+    <h2 class="header__phone phone">
+      <a class="phone__link" :href="phone">{{ $t('meta.phone') }}</a>
+      <div class="phone__image-wrapper">
+        <img
+          class="phone__image"
+          src="/img/icons/phone.svg"
+          alt=""
+        />
+      </div>
+    </h2>
+  </header>
+</template>
+
+<script>
+export default {
+  name: 'Header',
+  computed: {
+    phone() {
+      return `tel:${this.$t('meta.phone')}`;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+  .header {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 20px 20px 0;
+
+    @media #{$tablet}, #{$desktop} {
+      flex-wrap: nowrap;
+    }
+
+    &__logo {
+      flex: 1 1 100%
+    }
+
+    &__phone {
+      flex: 1 1 100%;
+      margin: 0;
+      text-align: center;
+
+      @media #{$tablet}, #{$desktop} {
+        font-size: 2em;
+      }
+    }
+  }
+
+  .logo {
+    display: flex;
+    justify-content: center;
+
+    @media #{$tablet}, #{$desktop} {
+      justify-content: flex-start;
+    }
+
+    &__image {
+      width: 30px;
+      margin-right: 10px;
+    }
+
+    &__text {
+      margin: 0;
+    }
+  }
+
+  .phone {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    @media #{$tablet}, #{$desktop} {
+      justify-content: flex-end;
+    }
+
+    &__image-wrapper {
+      display: none;
+      border-radius: 100%;
+      height: 35px;
+      width: 35px;
+      background: #90CCC0;
+      margin-left: 10px;
+
+      @media #{$tablet}, #{$desktop} {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+
+    &__image {
+      width: 20px;
+      filter: invert(100%)
+        sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
+    }
+  }
+</style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 8a3b827..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa" target="_blank" rel="noopener">pwa</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest" target="_blank" rel="noopener">unit-jest</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String,
-  },
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
new file mode 100644
index 0000000..c0cfb10
--- /dev/null
+++ b/src/components/Navigation.vue
@@ -0,0 +1,52 @@
+<template>
+    <nav class="navigation">
+      <ul class="navigation__list">
+        <li class="navigation__list-item">
+          <router-link to="/impressum">{{ $t('navigation.imprint') }}</router-link>
+        </li>
+        <li class="navigation__list-item">
+          <router-link to="/wirvsvirus">{{ $t('navigation.wirvsvirus') }}</router-link>
+        </li>
+        <li class="navigation__list-item">
+          <router-link
+            :class="navigation__link"
+            to="/contribute"
+          >
+            {{ $t('navigation.contribute') }}
+          </router-link>
+        </li>
+      </ul>
+    </nav>
+</template>
+
+<script>
+export default {
+  name: 'Navigation',
+};
+</script>
+
+<style lang="scss" scoped>
+  .navigation {
+    font-size: 24px;
+    margin-top: 50px;
+
+    &__list {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    &__list-item {
+      margin-bottom: 20px;
+      text-align: center;
+
+      &:last-child {
+        margin: 0;
+      }
+    }
+
+    a {
+      text-decoration: none;
+    }
+  }
+</style>
diff --git a/src/components/RegistrationForm.vue b/src/components/RegistrationForm.vue
new file mode 100644
index 0000000..7830fe2
--- /dev/null
+++ b/src/components/RegistrationForm.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="registation-form">
+    <div class="registation-form__info info">
+      <h2 class="info__heading">{{ $t('home.overlay.hello') }}</h2>
+      <div class="info__text">{{ $t('home.overlay.main') }}</div>
+    </div>
+    <form>
+      <label for="email">
+        <h2 class="registation-form__heading">{{ $t('home.overlay.help_us') }}</h2>
+      </label>
+      <input
+        class="registation-form__input"
+        v-model="email"
+        type="email"
+        id="email"
+        :placeholder="$t('home.overlay.email_placeholder')"
+      />
+      <button class="registation-form__button">
+        <img class="plus-icon" src="/img/icons/plus.svg" alt="" />
+      </button>
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RegistationForm',
+  data() {
+    return {
+      email: '',
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+  .registation-form {
+    &__heading {
+      margin: 0 0 15px;
+    }
+
+    &__input {
+      border: none;
+      padding: 5px 28px 5px 5px;
+      border-radius: 20px;
+      font-style: italic;
+      text-align: center;
+      box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
+    }
+
+    &__button {
+      border: none;
+      border-radius: 100%;
+      background: #8FCDC1;
+      color: #fff;
+      width: 28px;
+      height: 28px;
+      margin-left: -28px;
+    }
+
+    &__info {
+      max-width: 300px;
+
+      @media #{$desktop} {
+        max-width: 400px;
+      }
+    }
+
+    .plus-icon {
+      vertical-align: middle;
+      margin-top: -3px;
+      filter: invert(100%)
+        sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
+    }
+  }
+
+  .info {
+    margin: 0 auto;
+
+    &__heading {
+      margin: 0 0 15px;
+    }
+
+    &__text {
+      margin-bottom: 20px;
+    }
+  }
+</style>
diff --git a/src/locales/de.json b/src/locales/de.json
index 8a5aef7..c9b8657 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -1,5 +1,20 @@
 {
   "meta": {
-    "title": "Hilfstelefon"
+    "title": "Hilfstelefon",
+    "phone": "0800 7237019441"
+  },
+  "home": {
+    "main": "Ruf uns an und stelle deine Frage. Wir suchen dir eine Antwort und rufen dich zurück und vermitteln dir einen Helfer in deiner Nähe.",
+    "overlay": {
+      "hello": "Hallo?",
+      "main": "Wie können wir Menschen ohne Zugang zu sozialen Netzwerken mit anderen Menschen vernetzen?",
+      "help_us": "Hilf uns!",
+      "email_placeholder": "deine@email.de"
+    }
+  },
+  "navigation": {
+    "imprint": "Impressum",
+    "wirvsvirus": "#WirVsVirus",
+    "contribute": "Contribute"
   }
 }
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 6655f97..30cf105 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,19 +1,68 @@
 <template>
-  <div class="home">
-    <h1> {{ $t('meta.title') }}</h1>
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <div class="page-container home">
+    <Header />
+    <main>
+      <div class="content">
+        <div class="content__logo logo">
+          <img class="logo__image" src="/img/icons/landing_graphic.svg" :alt="$t('meta.title')" />
+        </div>
+        <div class="content__text">{{ $t('home.main') }}</div>
+      </div>
+      <Card>
+        <RegistrationForm />
+        <Navigation />
+      </Card>
+    </main>
   </div>
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue';
+import RegistrationForm from '../components/RegistrationForm.vue';
+import Navigation from '../components/Navigation.vue';
+import Card from '../components/Card.vue';
+import Header from '../components/Header.vue';
 
 export default {
   name: 'Home',
   components: {
-    HelloWorld,
+    Card, Header, RegistrationForm, Navigation,
   },
 };
 </script>
+
+<style lang="scss">
+  .content {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 50px auto;
+    padding: 0;
+    max-width: 300px;
+
+    @media #{$desktop} {
+      max-width: 400px;
+    }
+
+    &__logo {
+      flex: 1 1 100%;
+      display: flex;
+      justify-content: center;
+    }
+
+    &__text {
+      flex: 1 1 100%;
+      text-align: center;
+    }
+  }
+
+  .logo {
+    margin-bottom: 10px;
+
+    &__image {
+      max-width: 50%;
+
+      @media #{$desktop} {
+        max-width: 100%;
+      }
+    }
+  }
+</style>