diff --git a/src/app/page.tsx b/src/app/page.tsx
index 075cd60..b891fc6 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -66,6 +66,8 @@ export default function Home() {
   const [lang, setLang] = useState<Language>('fr');
   const [isLangOpen, setIsLangOpen] = useState(false);
   const langDropdownRef = useRef<HTMLDivElement>(null);
+  const [navVisible, setNavVisible] = useState(true);
+  const lastScrollY = useRef(0);
 
   const t = translations[lang];
 
@@ -76,6 +78,17 @@ export default function Home() {
     value: t.modules.items[i].value,
   }));
 
+  // Hide navbar on scroll down, show on scroll up
+  useEffect(() => {
+    const handleScroll = () => {
+      const currentY = window.scrollY;
+      setNavVisible(currentY < lastScrollY.current || currentY < 10);
+      lastScrollY.current = currentY;
+    };
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
   // Lock body scroll when mobile menu is open
   useEffect(() => {
     if (isMenuOpen) {
@@ -140,7 +153,7 @@ export default function Home() {
   return (
     <main className="bg-slate-50 text-slate-900 selection:bg-primary/30 font-display">
       {/* Top Navigation */}
-      <header className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-slate-200">
+      <header className={`fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-slate-200 transition-transform duration-300 ${navVisible ? 'translate-y-0' : '-translate-y-full'}`}>
         <div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
           <a className="flex items-center gap-3 shrink-0" href="#">
             <img