diff --git a/src/app/globals.css b/src/app/globals.css
index 4db63a850..b912eb050 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -406,4 +406,24 @@
 
 .vjs-text-track-cue {
   display: none !important;
-}
\ No newline at end of file
+}
+
+/* CSS styles for the floating navbar */
+/* Extra shadow for floating effect */
+.floating-nav {
+  position: fixed; 
+  top: 0; 
+  left: 0;
+  right: 0;
+  width: 100%;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+}
+    
+/* Mobile adjustment */
+@media (max-width: 640px) {
+  .floating-nav {
+   left: 0;
+   right: 0;
+  }
+}
+  
\ No newline at end of file
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 14e7375b5..3155e5b37 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -3,7 +3,7 @@
 import { motion, AnimatePresence } from 'framer-motion';
 import { useSession } from 'next-auth/react';
 import { usePathname, useRouter } from 'next/navigation';
-import React, { useState, useCallback, useMemo } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import Link from 'next/link';
 import { ArrowLeft, Menu, Search, X } from 'lucide-react';
 import { Button } from './ui/button';
@@ -13,122 +13,241 @@ import ProfileDropdown from './profile-menu/ProfileDropdown';
 import { SearchBar } from './search/SearchBar';
 
 export const Navbar = () => {
+  // Basic state for user session and navigation
   const { data: session } = useSession();
   const router = useRouter();
+  const pathname = usePathname();
+  
+  // State for menu and search toggles
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [isSearchOpen, setIsSearchOpen] = useState(false);
-  const pathname = usePathname();
+  
+  // Create a reference to the navbar container element
+  const navbarRef = useRef<HTMLDivElement>(null);
+  
+  // State for controlling navbar visibility
+  const [showNavbar, setShowNavbar] = useState(true);
+  const [previousScrollPosition, setPreviousScrollPosition] = useState(0);
+
+  // Function to handle opening/closing the menu
+  function toggleMenu() {
+    setIsMenuOpen(!isMenuOpen);
+  }
+  
+  // Function to handle opening/closing the search
+  function toggleSearch() {
+    setIsSearchOpen(!isSearchOpen);
+  }
+
+  // This runs when the user scrolls
+  useEffect(() => {
+    function handleScroll() {
+      // Get current scroll position
+      const currentScrollPosition = window.scrollY;
+      
+      // At the top of the page
+      if (currentScrollPosition === 0) {
+        setShowNavbar(true);
+        // Remove floating style if navbar exists
+        if (navbarRef.current) {
+          navbarRef.current.classList.remove('floating-nav');
+        }
+      } else if (currentScrollPosition > previousScrollPosition) {
+        setShowNavbar(false);
+        // Add floating style if navbar exists
+        if (navbarRef.current) {
+          navbarRef.current.classList.add('floating-nav');
+        }
+      } else if (currentScrollPosition < previousScrollPosition) {
+        setShowNavbar(true);
+        // Add floating style if navbar exists
+        if (navbarRef.current) {
+          navbarRef.current.classList.add('floating-nav');
+        }
+      }
+      
+      // Save current position for next comparison
+      setPreviousScrollPosition(currentScrollPosition);
+    }
 
-  // Memoizing the toggleMenu and toggleSearch functions
-  const toggleMenu = useCallback(() => setIsMenuOpen((prev) => !prev), []);
-  const toggleSearch = useCallback(() => setIsSearchOpen((prev) => !prev), []);
+    // Add scroll listener when component mounts
+    window.addEventListener('scroll', handleScroll);
+    
+    // Remove scroll listener when component unmounts
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [previousScrollPosition]);
 
-  // Memoizing the navItemVariants object
-  const navItemVariants = useMemo(
-    () => ({
-      hidden: { opacity: 0, y: -20 },
-      visible: (i: number) => ({
-        opacity: 1,
-        y: 0,
-        transition: {
-          delay: i * 0.1,
-          duration: 0.5,
-          ease: [0.43, 0.13, 0.23, 0.96],
-        },
-      }),
+  // Show or hide navbar based on scroll direction
+  useEffect(() => {
+    if (navbarRef.current) {
+      if (showNavbar) {
+        // Show navbar
+        navbarRef.current.style.transform = 'translateY(0)';
+        navbarRef.current.style.opacity = '1';
+      } else {
+        // Hide navbar
+        navbarRef.current.style.transform = 'translateY(-100%)';
+        navbarRef.current.style.opacity = '0';
+      }
+    }
+  }, [showNavbar]);
+
+  // Animation settings for navbar items
+  const navItemAnimations = {
+    hidden: { opacity: 0, y: -20 },
+    visible: (i: number) => ({
+      opacity: 1,
+      y: 0,
+      transition: {
+        delay: i * 0.1,
+        duration: 0.5,
+        ease: [0.43, 0.13, 0.23, 0.96],
+      },
     }),
-    [],
-  );
+  };
 
   return (
     <>
-      <motion.nav
-        initial={{ opacity: 0, y: -20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{
-          duration: 0.5,
-          type: 'spring',
-          damping: 10,
-          stiffness: 100,
-        }}
-        className="fixed top-0 z-[999] w-full border-b border-primary/10 bg-background"
+      {/* Main navbar container */}
+      <div 
+        ref={navbarRef} 
+        className="fixed w-full max-w-full px-4 top-4 z-[999] h-auto transition-all duration-300 sm:px-6"
       >
-        <div className="wrapper flex w-full items-center justify-between p-3">
-          <motion.div
-            className="flex items-center gap-4"
-            initial="hidden"
-            animate="visible"
-            variants={navItemVariants}
-            custom={0}
-          >
-            {session?.user && pathname !== '/home' && (
-              <Button
-                onClick={() => router.back()}
-                variant={'ghost'}
-                size={'icon'}
-                className="flex items-center gap-2"
-              >
-                <ArrowLeft className="size-6" />
-              </Button>
-            )}
-            <Link href={'/'} className="flex items-center gap-2">
-              <img
-                src={
-                  'https://appx-wsb-gcp.akamai.net.in/subject/2023-01-17-0.17044360120951185.jpg'
-                }
-                alt="100xDevs Logo"
-                className="size-10 rounded-full"
-              />
-              <p
-                className={`hidden bg-gradient-to-b from-blue-400 to-blue-700 bg-clip-text text-2xl font-black tracking-tighter text-transparent min-[410px]:block`}
-              >
-                100xDevs
-              </p>
-            </Link>
-          </motion.div>
+        {/* Navbar with animations */}
+        <motion.nav
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{
+            duration: 0.5,
+            type: 'spring',
+            damping: 10,
+            stiffness: 100,
+          }}
+          className="w-full rounded-lg border border-primary/10 bg-background/90 backdrop-blur-md shadow-lg"
+        >
+          {/* Navbar content */}
+          <div className="wrapper flex w-full items-center justify-between p-3">
+            {/* Left side - Logo and back button */}
+            <motion.div
+              className="flex items-center gap-2 md:gap-4"
+              initial="hidden"
+              animate="visible"
+              variants={navItemAnimations}
+              custom={0}
+            >
+              {/* Back button - only shows for logged in users not on home page */}
+              {session?.user && pathname !== '/home' && (
+                <Button
+                  onClick={() => router.back()}
+                  variant={'ghost'}
+                  size={'icon'}
+                  className="flex items-center gap-2"
+                >
+                  <ArrowLeft className="size-6" />
+                </Button>
+              )}
+              
+              {/* Logo and site name */}
+              <Link href={'/'} className="flex items-center gap-2">
+                <img
+                  src={
+                    'https://appx-wsb-gcp.akamai.net.in/subject/2023-01-17-0.17044360120951185.jpg'
+                  }
+                  alt="100xDevs Logo"
+                  className="size-10 rounded-full"
+                />
+                <p
+                  className={`hidden bg-gradient-to-b from-blue-400 to-blue-700 bg-clip-text text-2xl font-black tracking-tighter text-transparent min-[410px]:block`}
+                >
+                  100xDevs
+                </p>
+              </Link>
+            </motion.div>
 
-          <motion.div
-            className="flex items-center gap-4"
-            initial="hidden"
-            animate="visible"
-            variants={navItemVariants}
-            custom={1}
-          >
-            {/* Search Bar */}
-            {session?.user && (
-              <>
-                <div className="hidden md:block">
-                  <SearchBar />
-                </div>
-                <div className="md:hidden">
+            {/* Right side - Search, theme, profile */}
+            <motion.div
+              className="flex items-center gap-2 md:gap-4"
+              initial="hidden"
+              animate="visible"
+              variants={navItemAnimations}
+              custom={1}
+            >
+              {/* Search Bar - only for logged in users */}
+              {session?.user && (
+                <>
+                  {/* Desktop search */}
+                  <div className="hidden md:block">
+                    <SearchBar />
+                  </div>
+                  {/* Mobile search button */}
+                  <div className="md:hidden">
+                    <Button
+                      onClick={toggleSearch}
+                      variant={'ghost'}
+                      size={'icon'}
+                      className="mr-1 md:mr-2"
+                    >
+                      <Search className="size-6" />
+                    </Button>
+                  </div>
+                </>
+              )}
+
+              {/* Theme toggle button */}
+              <ThemeToggler />
+              
+              {/* User profile dropdown - only for logged in users */}
+              {session?.user && <ProfileDropdown />}
+
+              {/* Login/signup for logged out users */}
+              {!session?.user && (
+                <>
+                  {/* Mobile menu button */}
                   <Button
-                    onClick={toggleSearch}
+                    onClick={toggleMenu}
                     variant={'ghost'}
                     size={'icon'}
-                    className="mr-2"
+                    className="md:hidden"
                   >
-                    <Search className="size-6" />
+                    <Menu className="size-6" />
                   </Button>
-                </div>
-              </>
-            )}
-
-            <ThemeToggler />
-            {session?.user && <ProfileDropdown />}
+                  
+                  {/* Desktop auth buttons */}
+                  <div className="hidden items-center gap-2 md:flex">
+                    <AppbarAuth />
+                    <Button variant={'branding'}>
+                      <Link
+                        href={'https://harkirat.classx.co.in/new-courses'}
+                        target="_blank"
+                      >
+                        Join now
+                      </Link>
+                    </Button>
+                  </div>
+                </>
+              )}
+            </motion.div>
+          </div>
 
-            {!session?.user && (
-              <>
-                <Button
-                  onClick={toggleMenu}
-                  variant={'ghost'}
-                  size={'icon'}
-                  className="md:hidden"
+          {/* Mobile menu - shows when menu button is clicked */}
+          <AnimatePresence>
+            {!session?.user && isMenuOpen && (
+              <motion.div
+                className="bg-background/90 backdrop-blur-md p-4 rounded-b-lg md:hidden"
+                initial={{ opacity: 0, y: -20 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -20 }}
+              >
+                <motion.div
+                  className="flex gap-2"
+                  initial={{ opacity: 0, y: -20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -20 }}
                 >
-                  <Menu className="size-6" />
-                </Button>
-                <div className="hidden items-center gap-2 md:flex">
                   <AppbarAuth />
-                  <Button variant={'branding'}>
+                  <Button variant={'branding'} className="w-full">
                     <Link
                       href={'https://harkirat.classx.co.in/new-courses'}
                       target="_blank"
@@ -136,43 +255,14 @@ export const Navbar = () => {
                       Join now
                     </Link>
                   </Button>
-                </div>
-              </>
-            )}
-          </motion.div>
-        </div>
-
-        {/* Mobile menu */}
-        <AnimatePresence>
-          {!session?.user && isMenuOpen && (
-            <motion.div
-              className="bg-background p-4 md:hidden"
-              initial={{ opacity: 0, y: -20 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: -20 }}
-            >
-              <motion.div
-                className="flex gap-2"
-                initial={{ opacity: 0, y: -20 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: -20 }}
-              >
-                <AppbarAuth />
-                  <Button variant={'branding'} className="w-full">
-                  <Link
-                      href={'https://harkirat.classx.co.in/new-courses'}
-                    target="_blank"
-                  >
-                    Join now
-                  </Link>
-                </Button>
+                </motion.div>
               </motion.div>
-            </motion.div>
-          )}
-        </AnimatePresence>
-      </motion.nav>
+            )}
+          </AnimatePresence>
+        </motion.nav>
+      </div>
 
-      {/* Mobile search overlay */}
+      {/* Mobile search overlay - shows when search is opened on mobile */}
       <AnimatePresence>
         {isSearchOpen && (
           <motion.div
@@ -195,4 +285,4 @@ export const Navbar = () => {
       </AnimatePresence>
     </>
   );
-};
+};
\ No newline at end of file