diff --git a/public/images/backgroundpattern.webp b/public/images/backgroundpattern.webp
new file mode 100644
index 0000000..5581ced
Binary files /dev/null and b/public/images/backgroundpattern.webp differ
diff --git a/src/app/features/landing/components/hero/hero.component.html b/src/app/features/landing/components/hero/hero.component.html
index 5627005..e100fee 100644
--- a/src/app/features/landing/components/hero/hero.component.html
+++ b/src/app/features/landing/components/hero/hero.component.html
@@ -1,6 +1,6 @@
 <section class="hero-section">
   <h1 class="hero-section__header">
-    <span>Digitales Handwerk</span>
+    <span>Digitales Handwerk</span> <br />
     <span>statt Standard-Baukasten</span>
   </h1>
   <p class="hero-section__claim">
diff --git a/src/app/features/landing/components/navigation/navigation.component.scss b/src/app/features/landing/components/navigation/navigation.component.scss
index 587fd24..32859c3 100644
--- a/src/app/features/landing/components/navigation/navigation.component.scss
+++ b/src/app/features/landing/components/navigation/navigation.component.scss
@@ -1,13 +1,11 @@
 @use "abstracts";
 
 .header {
+    max-width: 1200px;
+    margin: 0 auto;
     display: flex;
     justify-content: space-between;
     min-height: abstracts.rem(60);
-    border-radius: 0 0 10px 10px;
-    background-color: var(--nav-bg);
-    backdrop-filter: var(--nav-backdrop);
-    box-shadow: var(--nav-shadow);
     position: sticky;
     top: 0;
 
@@ -59,7 +57,7 @@
 }
 
 .burger-menu {
-    padding-right: var(--space-4);
+    padding: 0 var(--space-4) 0 var(--space-4);
     cursor: pointer;
 
     @include abstracts.breakpoint("md") {
diff --git a/src/styles/base/_tokens.scss b/src/styles/base/_tokens.scss
index f4d8a22..644185a 100644
--- a/src/styles/base/_tokens.scss
+++ b/src/styles/base/_tokens.scss
@@ -15,7 +15,7 @@
 :root {
     // Farben
     --brand-vue: 250;
-    --bg-surface: oklch(88% 0.01 250);
+    --bg-surface: oklch(100% 0.01 250);
     --bg-muted: oklch(99% 0.02 250);
     --text-main: oklch(20% 0.01 250);
     --text-muted: oklch(45% 0.02 250);
@@ -67,11 +67,12 @@
     --nav-backdrop: blur(10px);
     --nav-bg: oklch(100% 0.00011 271.152 / 0.05);
     --nav-height: abstracts.rem(60);
+}
 
-    // Dark Mode Overrides
-    [data-theme="dark"] {
-        // Navigation
-        --nav-shadow: 1px 2px 10px oklch(0% 0 250 / 0.5);
-        --nav-bg: oklch(20% 0.02 250 / 0.8);
-    }
+[data-theme="dark"] {
+    --text-on-accent: var(--color-white);
+
+    // Navigation
+    --nav-shadow: 1px 2px 10px oklch(0% 0 250 / 0.5);
+    --nav-bg: oklch(20% 0.02 250 / 0.8);
 }
\ No newline at end of file
diff --git a/src/styles/layout/_grid.scss b/src/styles/layout/_grid.scss
index cebf4af..807ad3f 100644
--- a/src/styles/layout/_grid.scss
+++ b/src/styles/layout/_grid.scss
@@ -12,6 +12,10 @@
 
 .grid-area-navigation {
     grid-area: navigation;
+    border-radius: 0 0 10px 10px;
+    background-color: var(--nav-bg);
+    backdrop-filter: var(--nav-backdrop);
+    box-shadow: var(--nav-shadow);
     position: sticky;
     top: 0;
     z-index: var(--z-index-sticky);
@@ -19,10 +23,22 @@
 
 .grid-area-hero {
     grid-area: hero;
+    margin-top: -60px;
+    padding-top: 60px;
     height: 100vh;
-
     display: flex;
     justify-content: center;
+    background:
+        linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 1)),
+        linear-gradient(0.25turn, oklch(56.347% 0.24089 260.834 / 0.8), oklch(55.088% 0.23462 260.772 / 0.8), oklch(56.347% 0.24089 260.834 / 0.8)),
+        url("/images/backgroundpattern.webp") center / cover no-repeat;
+}
+
+[data-theme="dark"] .grid-area-hero {
+    background:
+        linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)),
+        linear-gradient(0.25turn, oklch(20.648% 0.14311 250 / 0.5), oklch(27.99% 0.10701 258.719 / 0.5), oklch(20.648% 0.14311 250 / 0.5)),
+        url("/images/backgroundpattern.webp") center / cover no-repeat;
 }
 
 .grid-area-features {