diff --git a/app/app.vue b/app/app.vue
old mode 100755
new mode 100644
index a738821..91fe27f
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,11 +1,5 @@
 <template>
-  <div class="page-wrapper">
-    <PpHeader />
-    <div class="page">
-      <NuxtPage />
-    </div>
-    <PpFooter />
-  </div>
-</template>
-<script setup lang="ts">
-</script>
\ No newline at end of file
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
\ No newline at end of file
diff --git a/app/assets/styles/general.css b/app/assets/styles/general.css
index 4130039..9e1e996 100755
--- a/app/assets/styles/general.css
+++ b/app/assets/styles/general.css
@@ -58,6 +58,7 @@
   --padding-xxs: calc(var(--padding-xs) / var(--scaling-factor));
   --padding-l: calc(var(--padding-default) * var(--scaling-factor));
   --padding-xl: calc(var(--padding-l) * var(--scaling-factor));
+  --padding-xxl: calc(var(--padding-xl) * var(--scaling-factor));
 
   --radius-default: calc(var(--font-size-normal) / 3);
   --radius-border: var(--font-size-normal);
@@ -130,6 +131,10 @@ h3 {
   background-color: var(--color-main-dark);
 }
 
+.bg-main-darkest {
+  background-color: var(--color-main-darkest);
+}
+
 .bg-main-dark-hover:hover {
   background-color: var(--color-main-dark);
 }
diff --git a/app/assets/styles/landingpage.css b/app/assets/styles/landingpage.css
new file mode 100644
index 0000000..66e1a84
--- /dev/null
+++ b/app/assets/styles/landingpage.css
@@ -0,0 +1,30 @@
+.home-hero {
+    background-image: url("/img/hero-image.webp");
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: cover;
+    color: var(--color-text-invert);
+    text-align: center;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    button {
+        margin: var(--padding-xxl) auto 0;
+    }
+
+    .text {
+        padding: var(--padding-default);
+    }
+
+    h1 {
+        font-size: var(--font-size-xxl);
+    }
+}
+
+.home-text {
+    padding: var(--padding-xxl) var(--padding-default);
+    text-align: center;
+}
+
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
new file mode 100755
index 0000000..cbd7b6c
--- /dev/null
+++ b/app/layouts/default.vue
@@ -0,0 +1,11 @@
+<template>
+    <div class="page-wrapper">
+      <PpHeader />
+      <div class="page">
+        <NuxtPage />
+      </div>
+      <PpFooter />
+    </div>
+</template>
+<script setup lang="ts">
+</script>
\ No newline at end of file
diff --git a/app/layouts/landingpage.vue b/app/layouts/landingpage.vue
new file mode 100644
index 0000000..e731440
--- /dev/null
+++ b/app/layouts/landingpage.vue
@@ -0,0 +1,10 @@
+<template>
+    <div class="page-wrapper">
+      <div class="page">
+        <NuxtPage />
+      </div>
+      <PpFooter />
+    </div>
+</template>
+<script setup lang="ts">
+</script>
\ No newline at end of file
diff --git a/app/pages/landingpage.vue b/app/pages/landingpage.vue
new file mode 100644
index 0000000..102b124
--- /dev/null
+++ b/app/pages/landingpage.vue
@@ -0,0 +1,24 @@
+<template>
+  <section class="Home flex-col content full">
+    <div class="home-hero">
+      <div class="text">
+        <h1>
+          Du zahlst zuviel fürs Papier?
+        </h1>
+        <Button class="cta">Preise vergleichen</Button>
+      </div>
+    </div>
+    <div class="home-text padding ">
+      <p>
+        Mit <strong>ProPapier</strong> vergleichst du schnell & unkompliziert Preise für Klo-, Küchen- und Haushaltspapier und sparst so bares Geld.
+      </p>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import Button from "~/components/Pp/Button.vue";
+definePageMeta({
+  layout: 'landingpage'
+})
+</script>
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index f1fe86c..68a8b95 100755
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -57,6 +57,7 @@ export default defineNuxtConfig({
     './app/assets/styles/toolbar.css',
     './app/assets/styles/page.css',
     './app/assets/styles/dialog.css',
+    './app/assets/styles/landingpage.css',
   ],
 
   site: {
diff --git a/public/img/hero-image.webp b/public/img/hero-image.webp
new file mode 100644
index 0000000..062741b
Binary files /dev/null and b/public/img/hero-image.webp differ