diff --git a/assets/Startpage ingredients.jpg b/assets/Startpage ingredients.jpg
new file mode 100644
index 0000000..c54c18b
Binary files /dev/null and b/assets/Startpage ingredients.jpg differ
diff --git a/css/landingpage.css b/css/landingpage.css
index 2c5151a..85e9719 100644
--- a/css/landingpage.css
+++ b/css/landingpage.css
@@ -3,6 +3,8 @@
 :root {
   --black: #000000;
   --white: #ffffff;
+  --button-green: #6b6b05;
+  --button-green-dark: #514c04;
 }
 
 body {
@@ -50,11 +52,206 @@ body {
   gap: 16px; 
 }
 
+.top-nav-wrap {
+  background: #FFFDE3;
+  padding: 18px 0;
+}
+
+.top-nav {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 30px;
+  box-shadow: 0 3px 12px rgba(102, 52, 13, 0.1);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-height: 58px;
+  padding: 12px 24px;
+  width: 100%;
+  max-width: none;
+  box-sizing: border-box;
+  margin: 0 0 40px;
+}
+
+.brand {
+  display: inline-flex;
+  align-items: center;
+  height: 50px;
+  text-decoration: none;
+}
+
+.brand img {
+  width: auto;
+  height: 100%;
+  max-width: 104px;
+  display: block;
+}
+
+.top-nav-links {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.nav-link {
+  color: #221c1a;
+  line-height: 1.3;
+  text-decoration: none;
+  padding: 8px 20px;
+  border: 2px solid #e5e1b7;
+  border-radius: 20px;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.nav-link:hover,
+.nav-link.active,
+.nav-link:focus-visible {
+  background: #6b6b05;
+  color: #ffffff;
+  border-color: #6b6b05;
+}
+
+.nav-link--login {
+  background: #6b6b05;
+  color: #ffffff;
+  border-color: #6b6b05;
+}
+
+.nav-link--login:hover,
+.nav-link--login:focus-visible {
+  background: #ffffff;
+  color: #6b6b05;
+  border-color: #6b6b05;
+}
+
+.main-content {
+  width: min(100% - 4rem, 1120px);
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
 .hero { 
   display: grid; 
   grid-template-columns: 1fr 1fr; 
-  gap: 40px; 
-  margin-bottom: 60px; 
+  gap: 50px; 
+  margin-bottom: 80px; 
+  align-items: center;
+  padding: 40px 0;
+}
+
+.how-it-works {
+  margin-bottom: 70px;
+}
+
+.how-it-works__header {
+  text-align: center;
+  margin-bottom: 32px;
+}
+
+.how-it-works__header h2 {
+  font-size: 2rem;
+  margin: 0;
+  color: #221c1a;
+}
+
+.how-it-works__steps {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(180px, 1fr));
+  gap: 20px;
+}
+
+.how-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 28px 20px;
+  background: #ffffff;
+  border-radius: 28px;
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
+}
+
+.how-step__icon {
+  width: 64px;
+  height: 64px;
+  display: grid;
+  place-items: center;
+  background: var(--button-green);
+  color: var(--white);
+  border-radius: 50%;
+  font-size: 1.4rem;
+}
+
+.how-step__number {
+  width: 36px;
+  height: 36px;
+  display: grid;
+  place-items: center;
+  background: #f4efd7;
+  color: #221c1a;
+  border-radius: 50%;
+  font-weight: 700;
+}
+
+.how-step__label {
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.6;
+  font-weight: 600;
+  color: #221c1a;
+  text-align: center;
+}
+
+@media (max-width: 900px) {
+  .how-it-works__steps {
+    grid-template-columns: 1fr;
+  }
+}
+
+.hero__left {
+  max-width: 520px;
+}
+
+.hero__left p {
+  margin: 24px 0 32px;
+  line-height: 1.8;
+}
+
+.hero__right {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.image-card {
+  width: 100%;
+  max-width: 396px;
+  overflow: hidden;
+  border-radius: 30px;
+}
+
+.hero-image {
+  width: 100%;
+  max-width: 396px;
+  max-height: 464px;
+  height: auto;
+  border-radius: 30px;
+  object-fit: cover;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
+}
+
+@media (max-width: 900px) {
+  .hero {
+    grid-template-columns: 1fr;
+    padding: 30px 0;
+  }
+
+  .hero__right {
+    order: -1;
+  }
+
+  .hero-image {
+    min-height: 320px;
+  }
 }
 
 /* Container for the 3 photos */
@@ -84,21 +281,24 @@ body {
 
 /* --- 2. Button & Link Styling --- */
 .btn {
-  border: 2px solid var(--black);
-  background: var(--white);
-  color: var(--black);
-  padding: 10px 18px;
+  border: none;
+  background: var(--button-green);
+  color: var(--white);
+  padding: 12px 22px;
   font-weight: 700;
   cursor: pointer;
   text-decoration: none; /* Keeps the link from having an underline */
   display: inline-flex;
   align-items: center;
-  font-size: 0.9rem;
-  transition: background-color 0.2s ease;
+  justify-content: center;
+  border-radius: 999px;
+  font-size: 0.95rem;
+  transition: background-color 0.2s ease, transform 0.2s ease;
 }
 
 .btn:hover {
-  background-color: #f0f0f0;
+  background-color: var(--button-green-dark);
+  transform: translateY(-1px);
 }
 
 .nav__link {
diff --git a/index.html b/index.html
index 528a355..5389a1c 100644
--- a/index.html
+++ b/index.html
@@ -8,31 +8,59 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-dU7ZrF1pFq5kVnPzlV9+04YhARzNjCX5Q5P1shgMpuN4s5I8mI8QD4981h7kYtV7sSgNldR0z5pZW5bS2ZpY3Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 </head>
 <body>
-    <!-- Header: uses .header, .header__brand, .header__actions, .btn, and .nav__link to match the Invité top bar style -->
-    <header class="header">
-      <div class="header__brand">Invité</div>
-      <div class="header__actions">
-        <a class="nav__link" href="#">Event finden</a>
-        <button class="btn" type="button">Event erstellen</button>
+    <!-- Header: matches event detail/create with invite logo and pill navigation links -->
+    <header class="top-nav-wrap">
+      <div class="top-nav">
+        <a class="brand" href="index.html" aria-label="Zur Startseite">
+          <img src="assets/invite-logo.svg" alt="Invité">
+        </a>
+
+        <nav class="top-nav-links" aria-label="Hauptnavigation">
+          <a class="nav-link" href="event_create.html">Event erstellen</a>
+          <a class="nav-link nav-link--login" href="login.html">Login</a>
+        </nav>
       </div>
     </header>
 
     <main class="main-content">
-      <!-- Hero: uses .hero, .btn, .image-card, and .image-card__placeholder for a polished first impression -->
+      <!-- Hero: uses .hero, .btn, .image-card, and .hero-image for a polished first impression -->
       <section class="hero">
         <div class="hero__left">
           <h1>Events entdecken, Plätze sichern, Genuss teilen.</h1>
           <p>Finde kulinarische Erlebnisse in deiner Nähe oder erstelle dein eigenes Event – alles in einer warmen, einladenden Invité-Atmosphäre.</p>
-          <button class="btn" type="button">Anmelden</button>
+          <a class="btn" href="login.html">Anmelden</a>
         </div>
 
         <div class="hero__right">
           <div class="image-card">
-            <div class="image-card__placeholder"></div>
+            <img class="hero-image" src="assets/Startpage ingredients.jpg" alt="Startpage Ingredients" />
           </div>
         </div>
       </section>
 
+      <section class="how-it-works">
+        <div class="how-it-works__header">
+          <h2>So funktioniert's</h2>
+        </div>
+        <div class="how-it-works__steps">
+          <article class="how-step">
+            <div class="how-step__icon"><i class="fas fa-user-plus" aria-hidden="true"></i></div>
+            <div class="how-step__number">1</div>
+            <p class="how-step__label">Anmelden</p>
+          </article>
+          <article class="how-step">
+            <div class="how-step__icon"><i class="fas fa-calendar-plus" aria-hidden="true"></i></div>
+            <div class="how-step__number">2</div>
+            <p class="how-step__label">Event erstellen</p>
+          </article>
+          <article class="how-step">
+            <div class="how-step__icon"><i class="fas fa-utensils" aria-hidden="true"></i></div>
+            <div class="how-step__number">3</div>
+            <p class="how-step__label">Gemeinsam essen</p>
+          </article>
+        </div>
+      </section>
+
       <!-- Main Content: uses .gallery, .gallery__track, .gallery__item, .placeholder, and .gallery__info to present event cards and overview content -->
       <section class="gallery">
         <div class="gallery__track">