diff --git a/src/components/modules/Navbar/Navbar.tsx b/src/components/modules/Navbar/Navbar.tsx
index 412c3ad..b664e66 100644
--- a/src/components/modules/Navbar/Navbar.tsx
+++ b/src/components/modules/Navbar/Navbar.tsx
@@ -1,5 +1,33 @@
+import { Gamepad2 } from 'lucide-react';
+import { useEffect, useState } from 'react';
 const Navbar = () => {
-  return <div className="fixed z-[99] px-[] w-full py-4 bg-transparent h-[400px] "></div>;
+  const [backgroundNavbar, setBackgroundNavbar] = useState('bg-transparent');
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY >= 100) {
+        setBackgroundNavbar('bg-black/30');
+      } else {
+        setBackgroundNavbar('bg-transparent');
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  return (
+    <div
+      className={`fixed z-[99] w-full px-[50px] py-4 bg-transparent  animation-background duration-1000  ${backgroundNavbar}`}
+    >
+      <div className="text-secondary flex items-center gap-1">
+        <Gamepad2 className=" text-xl" />
+        <span className="cool-text text-xl">F</span>
+      </div>
+    </div>
+  );
 };
 
 export default Navbar;