diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx
index 72c343b..df74c39 100644
--- a/app/components/Hero.tsx
+++ b/app/components/Hero.tsx
@@ -1,65 +1,74 @@
 import Link from "next/link";
 import Image from "next/image";
 
+const avatars = [
+  { src: "/avatar-1.jpg", alt: "Nutzer 1" },
+  { src: "/avatar-2.jpg", alt: "Nutzer 2" },
+  { src: "/avatar-3.jpg", alt: "Nutzer 3" },
+];
+
 export function Hero() {
   return (
-    <section className="bg-[#f5f0e8] flex items-stretch min-h-[36.4375rem]">
+    <section className="bg-[#f5f0e8] flex items-center h-[36.4375rem] overflow-hidden">
+
       {/* Left: text content */}
-      <div className="flex-1 flex flex-col justify-center gap-6 px-[5rem] py-[3.625rem]">
+      <div className="flex flex-col gap-[1.75rem] pl-[5rem] pr-[2.5rem] flex-1 min-w-0">
+
         {/* Heading */}
         <h1
-          className="text-[clamp(2.5rem,4.5vw,4.5rem)] font-extrabold leading-[1.08] tracking-tight text-[#1a1a1a]"
+          className="text-[4rem] font-semibold leading-[4.5rem] text-black"
           style={{ fontFamily: "var(--font-playfair)" }}
         >
-          Produktivität
-          <br />
-          darf sich leicht
-          <br />
-          anfühlen<span className="text-[#f5c518]">.</span>
+          Produktivität darf sich leicht anfühlen
+          <span className="text-[#fdb705]">.</span>
         </h1>
 
         {/* Subheading */}
-        <p className="text-[1.125rem] font-medium text-[#1a1a1a] leading-[1.4] max-w-[22rem]">
-          Für Menschen mit Familie,
-          <br />
-          Verantwortung und zu wenig Zeit
+        <p className="text-[1.5rem] font-semibold text-[#222221] leading-[2.375rem]">
+          Für Menschen mit Familie, Verantwortung und zu wenig Zeit
         </p>
 
-        {/* CTA button */}
+        {/* CTA */}
         <Link
           href="/challenge"
-          className="inline-flex items-center gap-3 self-start px-6 py-4 rounded-xl bg-[#f5c518] text-[1rem] font-bold text-[#1a1a1a] hover:brightness-95 transition-all"
+          className="inline-flex items-center gap-[1rem] self-start px-[1.5rem] py-[0.75rem] rounded-[0.5rem] bg-[#f6a701] text-[1.375rem] font-semibold text-[#222221] hover:brightness-95 transition-all"
         >
           Starte mit der 7-Tage-Challenge
-          <span className="text-[#1a1a1a]">✓</span>
+          <Image
+            src="/icon-check.png"
+            alt=""
+            width={25}
+            height={19}
+          />
         </Link>
 
         {/* Social proof */}
-        <div className="flex items-center gap-3">
-          <div className="flex -space-x-2">
-            {[
-              { bg: "#c8a882", label: "Person 1" },
-              { bg: "#a0785a", label: "Person 2" },
-              { bg: "#8b6b5a", label: "Person 3" },
-            ].map((a) => (
+        <div className="flex items-center gap-[0.75rem]">
+          <div className="flex items-center">
+            {avatars.map((avatar, i) => (
               <div
-                key={a.label}
-                className="w-9 h-9 rounded-full border-2 border-[#f5f0e8]"
-                style={{ background: a.bg }}
-                aria-label={a.label}
-              />
+                key={avatar.src}
+                className="w-[2.8125rem] h-[2.8125rem] rounded-full overflow-hidden border-2 border-[#f5f0e8]"
+                style={{ marginLeft: i === 0 ? 0 : "-0.5rem" }}
+              >
+                <Image
+                  src={avatar.src}
+                  alt={avatar.alt}
+                  width={45}
+                  height={45}
+                  className="object-cover w-full h-full"
+                />
+              </div>
             ))}
           </div>
-          <p className="text-[0.875rem] text-[#3a3a3a] leading-[1.3]">
-            <span className="font-semibold">10.000+</span> Menschen vertrauen
-            <br />
-            einfach-produktiv
+          <p className="text-[1rem] text-[#222221] leading-[1.5rem]">
+            <span className="font-semibold">10.000+</span> Menschen vertrauen einfach-produktiv
           </p>
         </div>
       </div>
 
       {/* Right: hero image */}
-      <div className="relative w-[48%] shrink-0 overflow-hidden">
+      <div className="relative h-full w-[55.4375rem] shrink-0">
         <Image
           src="/hero.jpg"
           alt="Notizbuch mit Tagesplan und Kaffee"
@@ -68,6 +77,7 @@ export function Hero() {
           priority
         />
       </div>
+
     </section>
   );
 }
diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
index 3b55018..87bbc3b 100644
--- a/app/components/Navbar.tsx
+++ b/app/components/Navbar.tsx
@@ -1,4 +1,5 @@
 import Link from "next/link";
+import Image from "next/image";
 
 const navLinks = [
   { label: "Werkzeuge", href: "/werkzeuge" },
@@ -9,43 +10,27 @@ const navLinks = [
 
 export function Navbar() {
   return (
-    <header className="w-full bg-[#f5f0e8] px-8 h-[6.25rem] flex items-center">
-      <div className="w-full flex items-center justify-between gap-8">
+    <header className="w-full bg-[#f5f0e8] h-[6.25rem] flex items-center px-[2rem]">
+      <div className="w-full flex items-center justify-between">
 
-        {/* Logo */}
-        <Link href="/" className="flex flex-col gap-1 shrink-0">
-          <span className="relative inline-block">
-            {/* Brush stroke SVG background */}
-            <svg
-              className="absolute inset-0 w-full h-full"
-              viewBox="0 0 180 36"
-              preserveAspectRatio="none"
-              aria-hidden="true"
-            >
-              <path
-                d="M4,8 C20,2 60,0 100,3 C130,5 165,4 176,9 C180,14 178,22 172,27 C155,34 110,36 70,35 C35,34 5,32 2,26 C-1,20 2,12 4,8 Z"
-                fill="#f5c518"
-              />
-            </svg>
-            <span
-              className="relative text-[1.5rem] font-bold text-[#1a1a1a] leading-none px-3 py-1.5 block"
-              style={{ fontFamily: "var(--font-caveat)" }}
-            >
-              einfach produktiv
-            </span>
-          </span>
-          <span className="text-[0.5rem] uppercase tracking-[0.12em] text-[#6b6b6b] pl-1">
-            Weil du auch noch ein Leben hast
-          </span>
+        {/* Logo — exported directly from Figma */}
+        <Link href="/" className="shrink-0">
+          <Image
+            src="/logo.png"
+            alt="einfach produktiv"
+            width={181}
+            height={61}
+            priority
+          />
         </Link>
 
         {/* Nav links */}
-        <nav className="flex items-center gap-10">
+        <nav className="flex items-center gap-[3rem]">
           {navLinks.map((link) => (
             <Link
               key={link.href}
               href={link.href}
-              className="text-[0.9375rem] font-medium text-[#1a1a1a] hover:text-[#f5c518] transition-colors"
+              className="text-[1.125rem] font-semibold text-[#222221] tracking-[0.01125rem] hover:text-[#f6a701] transition-colors"
             >
               {link.label}
             </Link>
@@ -53,16 +38,16 @@ export function Navbar() {
         </nav>
 
         {/* CTA buttons */}
-        <div className="flex items-center gap-3 shrink-0">
+        <div className="flex items-center gap-[0.75rem] p-[0.5rem]">
           <Link
             href="/newsletter"
-            className="px-5 py-2.5 rounded-lg border border-[#1a1a1a] text-[0.9375rem] font-semibold text-[#1a1a1a] hover:bg-[#1a1a1a] hover:text-white transition-colors"
+            className="px-[1.5rem] py-[1rem] rounded-[0.5rem] border border-[#868686] text-[1.125rem] font-bold text-[#222221] hover:bg-[#222221] hover:text-white transition-colors"
           >
             Newsletter
           </Link>
           <Link
             href="/challenge"
-            className="px-5 py-2.5 rounded-lg bg-[#f5c518] text-[0.9375rem] font-semibold text-[#1a1a1a] hover:brightness-95 transition-all"
+            className="px-[1.5rem] py-[1rem] rounded-[0.5rem] bg-[#f6a701] text-[1.125rem] font-bold text-[#222221] hover:brightness-95 transition-all"
           >
             7-Tage-Challenge
           </Link>
diff --git a/public/avatar-1.jpg b/public/avatar-1.jpg
new file mode 100644
index 0000000..5eceb0c
Binary files /dev/null and b/public/avatar-1.jpg differ
diff --git a/public/avatar-2.jpg b/public/avatar-2.jpg
new file mode 100644
index 0000000..b3489e4
Binary files /dev/null and b/public/avatar-2.jpg differ
diff --git a/public/avatar-3.jpg b/public/avatar-3.jpg
new file mode 100644
index 0000000..e2665a7
Binary files /dev/null and b/public/avatar-3.jpg differ
diff --git a/public/hero.jpg b/public/hero.jpg
new file mode 100644
index 0000000..80f3fb8
Binary files /dev/null and b/public/hero.jpg differ
diff --git a/public/icon-check.png b/public/icon-check.png
new file mode 100644
index 0000000..1eab123
--- /dev/null
+++ b/public/icon-check.png
@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 25 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="icon-arrow" d="M0.0362033 8.87937C0.150575 7.23588 1.58631 7.28918 2.57423 8.1784C3.65308 9.1495 4.07602 11.1443 4.75472 12.4142C5.70844 14.199 5.6507 14.1648 6.99015 12.6429C8.21796 11.2479 9.61386 9.95886 11.0121 8.74582C13.6167 6.48626 16.562 4.55349 19.3701 2.56693C20.5275 1.74809 22.251 0.204931 23.7279 0.0246462C25.281 -0.164915 25.2828 0.76999 24.4261 1.76453C23.382 2.97656 21.7806 3.96298 20.572 5.00299C19.127 6.24638 17.699 7.50404 16.3109 8.81393C13.7059 11.2721 10.9738 13.6986 8.81127 16.5888C7.04164 18.9539 5.59317 20.223 3.46426 17.3263C1.99087 15.3215 -0.2581 11.49 0.0362033 8.87937C0.0580072 8.56624 -0.0552244 9.69034 0.0362033 8.87937Z" fill="var(--fill-0, #222221)"/>
+</svg>
diff --git a/public/logo.png b/public/logo.png
new file mode 100644
index 0000000..5da46d5
Binary files /dev/null and b/public/logo.png differ