diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
index fcc9c74..abb47e0 100644
--- a/src/components/header/index.tsx
+++ b/src/components/header/index.tsx
@@ -7,10 +7,35 @@ import { MotionButton } from "@/components/button";
 import { cn } from "@/lib/utils";
 import Menu from "@/svgs/menu.svg";
 import Logo from "@/svgs/logo.svg";
+import { useState, useEffect, useRef } from "react";
 
 export default function Header() {
   const [, setOpenedMenu] = useRecoilState(menuAtom);
-  const isScrolled = true;
+  const [isVisible, setIsVisible] = useState(true);
+  const lastScrollY = useRef(0);
+
+  const handleScroll = () => {
+    const currentScrollY = window.scrollY;
+
+    if (currentScrollY > lastScrollY.current) {
+      // Scrolling down
+      setIsVisible(false);
+    } else {
+      // Scrolling up
+      setIsVisible(true);
+    }
+
+    lastScrollY.current = currentScrollY;
+  };
+
+  useEffect(() => {
+    window.addEventListener("scroll", handleScroll);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
   const MenuButton = () => (
     <MotionButton onClick={() => setOpenedMenu(true)}
       variant="light-green"
@@ -26,10 +51,10 @@ export default function Header() {
   );
 
   return (
-    <header className={cn("fixed inset-0 w-full h-[90px] py-6 flex z-40 transition-colors duration-500",
+    <header className={cn("fixed inset-0 w-full h-[90px] py-6 flex z-40 transition-transform duration-500 bg-blue-900",
       {
-        "bg-blue-900": isScrolled,
-        "bg-transparent": !isScrolled
+        "translate-y-0": isVisible,
+        "-translate-y-full": !isVisible
       })
     }>
       <div className="container flex justify-between items-center">
@@ -38,4 +63,4 @@ export default function Header() {
       </div>
     </header>
   );
-};
\ No newline at end of file
+};