diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
index c41af7f..e2ed8d9 100644
--- a/app/components/Navbar.tsx
+++ b/app/components/Navbar.tsx
@@ -1,3 +1,6 @@
+"use client";
+
+import { useEffect, useState } from "react";
 import Link from "next/link";
 import Image from "next/image";
 
@@ -9,8 +12,22 @@ const navLinks = [
 ];
 
 export function Navbar() {
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 8);
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+
   return (
-    <header className="w-full bg-[#f5f0e8] h-[6.25rem] flex items-center px-[2rem]">
+    <header
+      className={`sticky top-0 z-50 w-full h-[6.25rem] flex items-center px-[2rem] transition-[background-color,backdrop-filter] duration-300 ${
+        scrolled
+          ? "bg-[#f5f0e8]/80 backdrop-blur-md shadow-sm"
+          : "bg-[#f5f0e8]"
+      }`}
+    >
       <div className="w-full flex items-center justify-between">
 
         {/* Logo — exported directly from Figma */}
diff --git a/app/globals.css b/app/globals.css
index 5d16751..d5f9e85 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -12,6 +12,10 @@
   --font-mono: var(--font-geist-mono);
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   background: var(--background);
   color: var(--foreground);