diff --git a/apps/web/src/modules/marketing/layout/header/header.tsx b/apps/web/src/modules/marketing/layout/header/header.tsx
index 3e4dba2..34d6c9e 100644
--- a/apps/web/src/modules/marketing/layout/header/header.tsx
+++ b/apps/web/src/modules/marketing/layout/header/header.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { useEffect, useRef, useState } from "react";
+
 import { useTranslation } from "@turbostarter/i18n";
 import { cn } from "@turbostarter/ui";
 import { buttonVariants } from "@turbostarter/ui-web/button";
@@ -33,9 +35,27 @@ const links = [
 
 export const Header = () => {
   const { t } = useTranslation("marketing");
+  const [hidden, setHidden] = useState(false);
+  const lastY = useRef(0);
+
+  useEffect(() => {
+    const onScroll = () => {
+      const y = window.scrollY;
+      // Only hide after scrolling past 100px, show immediately on scroll up
+      setHidden(y > 100 && y > lastY.current);
+      lastY.current = y;
+    };
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
 
   return (
-    <header className="bg-background sticky top-[var(--banner-height)] z-40 w-full py-3 lg:bg-background/80 lg:backdrop-blur-sm">
+    <header
+      className={cn(
+        "bg-background sticky top-[var(--banner-height)] z-40 w-full py-3 transition-transform duration-300 lg:bg-background/80 lg:backdrop-blur-sm",
+        hidden && "-translate-y-full",
+      )}
+    >
       <div className="flex items-center justify-between px-6 pr-4 sm:container">
         <TurboLink
           href={pathsConfig.index}