diff --git a/apps/web/app/gig-details/page.tsx b/apps/web/app/gig-details/page.tsx
index 6f8c669..c3e6f48 100644
--- a/apps/web/app/gig-details/page.tsx
+++ b/apps/web/app/gig-details/page.tsx
@@ -217,68 +217,98 @@ function GigDetailsContent() {
                         {/* Content Wrapper */}
                         <div>
                             {/* Header & Mobile Action */}
-                            <div className="flex flex-row items-center justify-between gap-3 sm:gap-6 mb-8">
-                                <Link href={`/influencer-profile-page?id=${influencer?._id}`} className="flex items-center gap-3 sm:gap-4 hover:opacity-80 transition-opacity bg-white p-2.5 sm:p-4 rounded-2xl sm:rounded-3xl border border-slate-100 shadow-sm flex-1 min-w-0 group">
-                                <div className="relative w-12 h-12 sm:w-16 sm:h-16 rounded-full overflow-hidden border-2 border-emerald-100 shadow-sm bg-emerald-50 flex items-center justify-center font-bold text-emerald-600 text-lg sm:text-xl">
-                                    {avatar ? (
-                                        <>
-                                            <Image 
-                                                src={avatar} 
-                                                alt={influencer?.fullName || "Influencer"} 
-                                                fill 
-                                                unoptimized
-                                                className="object-cover"
-                                                onError={(e) => {
-                                                    const target = e.target as HTMLImageElement;
-                                                    target.style.display = 'none';
-                                                    const fallback = target.nextElementSibling as HTMLElement;
-                                                    if (fallback) fallback.style.display = 'block';
-                                                }}
-                                            />
-                                            <span className="hidden">{(influencer?.fullName || "I").charAt(0).toUpperCase()}</span>
-                                        </>
-                                    ) : (
-                                        (influencer?.fullName || "I").charAt(0).toUpperCase()
-                                    )}
-                                </div>
-                                <div className="min-w-0 flex-1">
-                                    <div className="flex items-center gap-2">
-                                        <h1 className="text-lg sm:text-xl font-bold text-gray-900 truncate">{influencer?.fullName || "Unknown Creator"}</h1>
-                                        {influencer?.isVerified && (
-                                            <span className="bg-[#E6F6ED] text-[#0CAF60] text-[10px] sm:text-xs font-bold px-2 py-0.5 rounded-full flex items-center gap-1">
-                                                <CheckCircle2 className="w-3 h-3 fill-current" />
-                                                Verified
-                                            </span>
+                            <div className="flex flex-row items-stretch justify-between gap-3 sm:gap-4 mb-12 lg:hidden">
+                                <Link 
+                                    href={`/influencer-profile-page?id=${influencer?._id}`} 
+                                    className="flex items-center gap-2 sm:gap-4 hover:opacity-80 transition-opacity bg-white p-3 sm:p-5 rounded-[2rem] border border-slate-100 shadow-sm basis-0 grow min-w-0 group"
+                                >
+                                    <div className="relative w-10 h-10 sm:w-16 sm:h-16 rounded-full overflow-hidden border-2 border-emerald-100 shadow-sm bg-emerald-50 flex items-center justify-center font-bold text-emerald-600 text-base sm:text-xl shrink-0">
+                                        {avatar ? (
+                                            <>
+                                                <Image 
+                                                    src={avatar} 
+                                                    alt={influencer?.fullName || "Influencer"} 
+                                                    fill 
+                                                    unoptimized
+                                                    className="object-cover"
+                                                    onError={(e) => {
+                                                        const target = e.target as HTMLImageElement;
+                                                        target.style.display = 'none';
+                                                        const fallback = target.nextElementSibling as HTMLElement;
+                                                        if (fallback) fallback.style.display = 'block';
+                                                    }}
+                                                />
+                                                <span className="hidden">{(influencer?.fullName || "I").charAt(0).toUpperCase()}</span>
+                                            </>
+                                        ) : (
+                                            (influencer?.fullName || "I").charAt(0).toUpperCase()
                                         )}
                                     </div>
-                                    <div className="text-[10px] sm:text-xs text-gray-500 flex items-center gap-2 mt-0.5 font-medium">
-                                        <span>{influencer.categories.join(" & ")}</span>
-                                        <span className="w-1 h-1 bg-gray-300 rounded-full"></span>
-                                        <span className="flex items-center text-gray-700">
-                                            <Star className="w-3.5 h-3.5 fill-yellow-400 text-yellow-400 mr-1" />
-                                            <span className="font-bold">New</span>
-                                        </span>
+                                    <div className="min-w-0 flex-1">
+                                        <div className="flex items-center gap-1.5">
+                                            <h1 className="text-xs sm:text-lg font-black text-gray-900 truncate tracking-tight">{influencer?.fullName?.split(' ')[0] || "Creator"}</h1>
+                                            {influencer?.isVerified && (
+                                                <CheckCircle2 className="w-3 h-3 text-[#0CAF60] fill-current shrink-0" />
+                                            )}
+                                        </div>
+                                        <p className="text-[9px] sm:text-xs text-emerald-600 font-black uppercase tracking-wider truncate">Profile</p>
                                     </div>
+                                </Link>
+
+                                <div className="basis-0 grow min-w-0">
+                                    <button
+                                        onClick={() => {
+                                            if (!user) {
+                                                router.push(`/login?redirect=${encodeURIComponent(window.location.pathname + window.location.search)}`);
+                                                return;
+                                            }
+                                            setIsModalOpen(true);
+                                        }}
+                                        disabled={!isInitialized || alreadyRequested || isRequestSuccess}
+                                        className="w-full h-full bg-emerald-500 hover:bg-emerald-600 disabled:bg-slate-300 disabled:cursor-not-allowed disabled:shadow-none text-white px-3 sm:px-6 rounded-[2rem] font-bold text-[13px] sm:text-lg transition-all shadow-lg flex items-center justify-center gap-1 sm:gap-2 group"
+                                    >
+                                        <span className="truncate">
+                                            {alreadyRequested ? "Already Requested" : "Request Booking"}
+                                        </span>
+                                        {!alreadyRequested && <ChevronRight className="w-4 h-4 sm:w-6 sm:h-6 group-hover:translate-x-1 transition-transform shrink-0" />}
+                                    </button>
                                 </div>
-                            </Link>
+                            </div>
 
-                            {/* Mobile/Tablet Request Button */}
-                            <div className="lg:hidden">
-                                <button
-                                    onClick={() => {
-                                        if (!user) {
-                                            router.push(`/login?redirect=${encodeURIComponent(window.location.pathname + window.location.search)}`);
-                                            return;
-                                        }
-                                        setIsModalOpen(true);
-                                    }}
-                                    disabled={!isInitialized || alreadyRequested || isRequestSuccess}
-                                    className="h-12 sm:h-14 px-8 bg-emerald-500 hover:bg-emerald-600 disabled:bg-slate-200 disabled:text-slate-400 text-white rounded-2xl font-bold text-sm sm:text-base transition-all shadow-lg shadow-emerald-500/20 whitespace-nowrap"
+                            {/* Desktop Header Only */}
+                            <div className="hidden lg:flex items-center gap-6 mb-8">
+                                <Link 
+                                    href={`/influencer-profile-page?id=${influencer?._id}`} 
+                                    className="flex items-center gap-4 hover:opacity-80 transition-opacity bg-white p-4 rounded-3xl border border-slate-100 shadow-sm group"
                                 >
-                                    {alreadyRequested ? "Requested" : "Request Now"}
-                                </button>
+                                    <div className="relative w-16 h-16 rounded-full overflow-hidden border-2 border-emerald-100 shadow-sm bg-emerald-50 flex items-center justify-center font-bold text-emerald-600 text-xl">
+                                        {avatar ? (
+                                            <Image src={avatar} alt={influencer?.fullName || "Influencer"} fill unoptimized className="object-cover" />
+                                        ) : (
+                                            (influencer?.fullName || "I").charAt(0).toUpperCase()
+                                        )}
+                                    </div>
+                                    <div>
+                                        <div className="flex items-center gap-2">
+                                            <h1 className="text-xl font-bold text-gray-900">{influencer?.fullName || "Unknown Creator"}</h1>
+                                            {influencer?.isVerified && (
+                                                <span className="bg-[#E6F6ED] text-[#0CAF60] text-xs font-bold px-2 py-0.5 rounded-full flex items-center gap-1">
+                                                    <CheckCircle2 className="w-3 h-3 fill-current" />
+                                                    Verified
+                                                </span>
+                                            )}
+                                        </div>
+                                        <div className="text-xs text-gray-500 flex items-center gap-2 mt-0.5 font-medium">
+                                            <span>{influencer.categories.join(" & ")}</span>
+                                            <span className="w-1 h-1 bg-gray-300 rounded-full"></span>
+                                            <span className="flex items-center text-gray-700 font-bold">
+                                                <Star className="w-3.5 h-3.5 fill-yellow-400 text-yellow-400 mr-1" />
+                                                New
+                                            </span>
+                                        </div>
+                                    </div>
+                                </Link>
                             </div>
-                        </div>
 
                             <h2 className="text-4xl font-black text-gray-900 leading-tight mb-5 pr-8">
                                 {gig.title}
@@ -439,7 +469,7 @@ function GigDetailsContent() {
                                             setIsModalOpen(true);
                                         }}
                                         disabled={!isInitialized || alreadyRequested || isRequestSuccess}
-                                        className="w-full bg-emerald-500 hover:bg-emerald-600 disabled:bg-slate-300 disabled:cursor-not-allowed disabled:shadow-none text-white py-5 rounded-2xl font-black text-lg transition-all shadow-lg flex items-center justify-center gap-3 group"
+                                        className="w-full bg-emerald-500 hover:bg-emerald-600 disabled:bg-slate-300 disabled:cursor-not-allowed disabled:shadow-none text-white py-5 rounded-2xl font-bold text-lg xl:text-xl transition-all shadow-lg flex items-center justify-center gap-3 group"
                                     >
                                         {alreadyRequested ? "Already Requested" : "Request Booking"}
                                         {!alreadyRequested && <ChevronRight className="w-6 h-6 group-hover:translate-x-1 transition-transform" />}
diff --git a/apps/web/app/gig-list/page.tsx b/apps/web/app/gig-list/page.tsx
index 5bd419a..5b6136d 100644
--- a/apps/web/app/gig-list/page.tsx
+++ b/apps/web/app/gig-list/page.tsx
@@ -260,6 +260,24 @@ export default function ExploreGigs() {
   const [committedSearch, setCommittedSearch] = useState<string>("");
   const [committedMaxPrice, setCommittedMaxPrice] = useState<number>(MAX_PRICE_LIMIT);
   const [isFilterOpen, setIsFilterOpen] = useState<boolean>(false);
+  const [isNavbarVisible, setIsNavbarVisible] = useState<boolean>(true);
+  const [lastScrollY, setLastScrollY] = useState<number>(0);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const currentScrollY = window.scrollY;
+      if (currentScrollY < 10) {
+        setIsNavbarVisible(true);
+      } else if (currentScrollY > lastScrollY) {
+        setIsNavbarVisible(false);
+      } else {
+        setIsNavbarVisible(true);
+      }
+      setLastScrollY(currentScrollY);
+    };
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [lastScrollY]);
 
   const fetchGigs = useCallback(async (
     opts: {
@@ -382,7 +400,7 @@ export default function ExploreGigs() {
         </div>
 
         {/* Premium Minimal Filter System */}
-        <div className="sticky top-24 z-40 mb-12">
+        <div className={`sticky z-40 mb-12 transition-all duration-500 ${!isNavbarVisible ? "top-6" : "top-32"}`}>
           <div className="flex items-center gap-3 md:gap-4">
             {/* Unified Search Bar */}
             <div className="relative flex-1 group">
diff --git a/apps/web/components/Navbar.tsx b/apps/web/components/Navbar.tsx
index cd70763..09fe50e 100644
--- a/apps/web/components/Navbar.tsx
+++ b/apps/web/components/Navbar.tsx
@@ -4,11 +4,11 @@ import React, { useState, useEffect, useRef } from "react";
 import Link from "next/link";
 import Image from "next/image";
 import { usePathname, useRouter } from "next/navigation";
-import { 
-  Menu, 
-  X, 
-  LogOut, 
-  LayoutDashboard, 
+import {
+  Menu,
+  X,
+  LogOut,
+  LayoutDashboard,
   ChevronDown,
   User as UserIcon
 } from "lucide-react";
@@ -27,8 +27,27 @@ export default function Navbar() {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [isProfileOpen, setIsProfileOpen] = useState(false);
   const [profile, setProfile] = useState<{ fullName?: string; profileImageUrl?: string } | null>(null);
+  const [isVisible, setIsVisible] = useState(true);
+  const [lastScrollY, setLastScrollY] = useState(0);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
+  useEffect(() => {
+    const handleScroll = () => {
+      const currentScrollY = window.scrollY;
+      if (currentScrollY < 10) {
+        setIsVisible(true);
+      } else if (currentScrollY > lastScrollY) {
+        setIsVisible(false);
+      } else {
+        setIsVisible(true);
+      }
+      setLastScrollY(currentScrollY);
+    };
+
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [lastScrollY]);
+
   useEffect(() => {
     if (user) {
       api.get("/profile/get_profile")
@@ -73,12 +92,11 @@ export default function Navbar() {
   const dashboardPath = user?.role === "INFLUENCER" ? "/influencer-dashboard" : "/brand-dashboard";
 
   return (
-    <motion.nav 
+    <motion.nav
       layout
       initial={false}
-      className={`fixed top-6 left-1/2 -translate-x-1/2 w-[92%] sm:w-[95%] max-w-[1400px] z-50 bg-white/80 backdrop-blur-xl border border-white/40 shadow-[0_8px_32px_0_rgba(0,0,0,0.1)] ${
-        isMenuOpen ? "rounded-[32px] overflow-hidden" : "rounded-full overflow-visible"
-      }`}
+      className={`fixed top-6 left-1/2 -translate-x-1/2 w-[92%] sm:w-[95%] max-w-[1400px] z-50 bg-white/80 backdrop-blur-xl border border-white/40 shadow-[0_8px_32px_0_rgba(0,0,0,0.1)] transition-all duration-500 ${isMenuOpen ? "rounded-[32px] overflow-hidden" : "rounded-full overflow-visible"
+        } ${isVisible ? "translate-y-0 opacity-100" : "-translate-y-32 opacity-0"}`}
       transition={{
         type: "spring",
         stiffness: 400,
@@ -115,12 +133,12 @@ export default function Navbar() {
           {!user ? (
             <>
               <Link href="/login" className="hidden sm:block">
-                <Button variant="ghost" className="text-slate-600 text-xs font-bold hover:text-emerald-600 hover:bg-emerald-50 transition-all px-4">
+                <Button variant="ghost" className="text-slate-500 text-[10px] font-black uppercase tracking-[0.15em] hover:text-slate-900 hover:bg-slate-50 transition-all px-6">
                   Sign In
                 </Button>
               </Link>
               <Link href="/signup">
-                <Button className="bg-emerald-500 hover:bg-emerald-600 text-white text-xs font-bold px-6 sm:px-8 py-5 sm:py-6 shadow-lg shadow-emerald-200 rounded-full">
+                <Button className="bg-slate-900 hover:bg-slate-800 text-white text-[10px] font-black uppercase tracking-[0.15em] px-8 py-6 rounded-full shadow-xl shadow-slate-900/10 hover:shadow-slate-900/20 transition-all active:scale-95">
                   Get Started
                 </Button>
               </Link>
@@ -203,9 +221,9 @@ export default function Navbar() {
               </AnimatePresence>
             </div>
           )}
-          
+
           {/* Mobile Menu Toggle */}
-          <button 
+          <button
             onClick={() => setIsMenuOpen(!isMenuOpen)}
             className="lg:hidden w-10 h-10 flex items-center justify-center text-slate-600 hover:bg-slate-50 rounded-full transition-colors"
           >
@@ -223,7 +241,7 @@ export default function Navbar() {
             exit={{ height: 0, opacity: 0 }}
             className="lg:hidden overflow-hidden bg-white border-t border-slate-100 rounded-b-[2rem] px-6"
           >
-            <motion.div 
+            <motion.div
               initial="closed"
               animate="open"
               exit="closed"
@@ -241,8 +259,8 @@ export default function Navbar() {
                     closed: { opacity: 0, x: -10 }
                   }}
                 >
-                  <Link 
-                    href={item.href} 
+                  <Link
+                    href={item.href}
                     onClick={() => setIsMenuOpen(false)}
                     className="text-lg font-bold text-slate-900 hover:text-emerald-600 transition-colors"
                   >
@@ -259,7 +277,7 @@ export default function Navbar() {
                 </Link>
               ) : (
                 <div className="flex flex-col gap-4">
-                  <Link 
+                  <Link
                     href={dashboardPath}
                     onClick={() => setIsMenuOpen(false)}
                     className="flex items-center gap-3 text-lg font-bold text-slate-900"
@@ -267,7 +285,7 @@ export default function Navbar() {
                     <LayoutDashboard className="w-5 h-5 text-emerald-500" />
                     Dashboard
                   </Link>
-                  <button 
+                  <button
                     onClick={handleLogout}
                     className="flex items-center gap-3 text-lg font-bold text-red-500"
                   >