diff --git a/apps/core-api/package.json b/apps/core-api/package.json
index 4d3743a..09eefda 100644
--- a/apps/core-api/package.json
+++ b/apps/core-api/package.json
@@ -9,6 +9,7 @@
     "build": "tsc",
     "start": "ts-node src/server.ts",
     "start:prod": "node dist/server.js",
+    "typecheck": "tsc --noEmit",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
diff --git a/apps/web/app/brand-profile-page/page.tsx b/apps/web/app/brand-profile-page/page.tsx
index 8f68685..8df0816 100644
--- a/apps/web/app/brand-profile-page/page.tsx
+++ b/apps/web/app/brand-profile-page/page.tsx
@@ -45,7 +45,7 @@ interface BrandData {
 
 const LoadingState = () => (
     <>
-        <DashboardHeader />
+        <DashboardHeader isPill={true} />
         <div className="min-h-[80vh] flex flex-col items-center justify-center gap-4 text-emerald-500 pt-20">
             <div className="relative">
                 <Loader2 className="w-12 h-12 animate-spin" />
@@ -60,7 +60,7 @@ const LoadingState = () => (
 
 const ErrorState = ({ message }: { message: string }) => (
     <>
-        <DashboardHeader />
+        <DashboardHeader isPill={true} />
         <div className="min-h-[80vh] flex flex-col items-center justify-center gap-6 p-4 pt-20 text-center">
             <div className="w-20 h-20 bg-rose-50 text-rose-500 rounded-3xl flex items-center justify-center shadow-sm">
                 <AlertCircle className="w-10 h-10" />
@@ -108,7 +108,7 @@ function BrandProfileContent() {
 
     return (
         <div className="min-h-screen bg-[#FAFAFA] font-sans selection:bg-emerald-100 selection:text-emerald-900">
-            <DashboardHeader />
+            <DashboardHeader isPill={true} />
             
             <main className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 pt-28 space-y-8">
                 
diff --git a/apps/web/app/gig-details/page.tsx b/apps/web/app/gig-details/page.tsx
index d7696db..6f8c669 100644
--- a/apps/web/app/gig-details/page.tsx
+++ b/apps/web/app/gig-details/page.tsx
@@ -16,7 +16,8 @@ import {
 import { ReportingModal } from "@/components/shared/ReportingModal";
 import api from "@/lib/axios.client";
 import { useAuthStore } from "@/store/auth.store";
-import DashboardHeader from "@/components/DashboardHeader";
+import Navbar from "@/components/Navbar";
+import Footer from "@/components/Footer";
 
 interface GigData {
     _id: string;
@@ -173,9 +174,9 @@ function GigDetailsContent() {
             )}
 
             {/* Navbar */}
-            <DashboardHeader />
+            <Navbar />
 
-            <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 flex-1 w-full">
+            <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-28 sm:pt-36 pb-12 flex-1 w-full">
                 {/* Breadcrumb */}
                 <div className="flex items-center text-sm text-gray-500 mb-8 font-medium">
                     <Link href="/" className="hover:text-gray-900">Home</Link>
@@ -213,10 +214,12 @@ function GigDetailsContent() {
                             </div>
                         </div>
 
-                        {/* Header */}
+                        {/* Content Wrapper */}
                         <div>
-                            <Link href={`/influencer-profile-page?id=${influencer?._id}`} className="flex items-center gap-4 mb-6 hover:opacity-80 transition-opacity bg-white p-4 rounded-3xl border border-slate-100 shadow-sm w-fit">
-                                <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">
+                            {/* 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 
@@ -238,27 +241,45 @@ function GigDetailsContent() {
                                         (influencer?.fullName || "I").charAt(0).toUpperCase()
                                     )}
                                 </div>
-                                <div>
+                                <div className="min-w-0 flex-1">
                                     <div className="flex items-center gap-2">
-                                        <h1 className="text-xl font-bold text-gray-900">{influencer?.fullName || "Unknown Creator"}</h1>
+                                        <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-xs font-bold px-2 py-0.5 rounded-full flex items-center gap-1">
+                                            <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>
-                                    <div className="text-xs text-gray-500 flex items-center gap-2 mt-0.5 font-medium">
+                                    <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 Creator</span>
+                                            <span className="font-bold">New</span>
                                         </span>
                                     </div>
                                 </div>
                             </Link>
 
+                            {/* 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"
+                                >
+                                    {alreadyRequested ? "Requested" : "Request Now"}
+                                </button>
+                            </div>
+                        </div>
+
                             <h2 className="text-4xl font-black text-gray-900 leading-tight mb-5 pr-8">
                                 {gig.title}
                             </h2>
@@ -438,48 +459,6 @@ function GigDetailsContent() {
                 </div>
             </main>
 
-            {/* Footer */}
-            <footer className="bg-[#0F172A] pt-28 pb-16 text-slate-400 mt-20">
-                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                    <div className="flex flex-col md:flex-row justify-between items-center gap-12 pb-20 border-b border-white/5">
-                        <div className="flex items-center gap-3 group cursor-pointer">
-                            <div className="w-10 h-10 text-white bg-[#10B981] rounded-xl flex items-center justify-center transition-all group-hover:rotate-12">
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="h-6 w-6 text-white">
-                                    <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
-                                </svg>
-                            </div>
-                            <span className="text-2xl font-black text-white tracking-tight ">Noillin</span>
-                        </div>
-
-                        <div className="flex gap-16 text-[13px] font-bold uppercase tracking-widest">
-                            {["About", "Support", "Privacy", "Terms"].map(l => (
-                                <a key={l} href="#" className="hover:text-emerald-500 transition-colors">{l}</a>
-                            ))}
-                        </div>
-
-                        <div className="flex items-center gap-8">
-                            {[
-                                { label: "SECURE PAYMENTS", icon: "🔒" },
-                                { label: "VERIFIED PROFILES", icon: "✔" }
-                            ].map((badge, i) => (
-                                <div key={i} className="flex items-center gap-3 text-[10px] font-black tracking-[.2em] opacity-80 group">
-                                    <span className="text-emerald-500 text-lg group-hover:scale-125 transition-transform">{badge.icon}</span>
-                                    <span className="text-slate-100">{badge.label}</span>
-                                </div>
-                            ))}
-                        </div>
-                    </div>
-
-                    <div className="pt-12 flex flex-col md:flex-row justify-between items-center gap-6 text-[11px] font-bold tracking-widest opacity-30">
-                        <p>&copy; 2026 NOILLIN INC. ALL RIGHTS RESERVED.</p>
-                        <p className="flex items-center gap-2">
-                            <Zap className="w-3 h-3 fill-white" />
-                            BUILT FOR THE FUTURE OF INFLUENCE
-                        </p>
-                    </div>
-                </div>
-            </footer>
-
             {/* Booking Modal */}
             {/* Booking Modal */}
             {isModalOpen && (
@@ -557,6 +536,7 @@ function GigDetailsContent() {
                 entityId={gig._id}
                 entityType="GIG"
             />
+            <Footer />
         </div>
     );
 }
diff --git a/apps/web/app/gig-list/page.tsx b/apps/web/app/gig-list/page.tsx
index f0b6dd5..3b75b78 100644
--- a/apps/web/app/gig-list/page.tsx
+++ b/apps/web/app/gig-list/page.tsx
@@ -2,10 +2,11 @@
 import { useState, useEffect, useCallback } from "react";
 import Link from "next/link";
 import Image from "next/image";
-import { Zap, Check, ArrowRight, Calendar } from "lucide-react";
+import { Check, ArrowRight, Calendar } from "lucide-react";
 
 import api from "@/lib/axios.client";
-import DashboardHeader from "@/components/DashboardHeader";
+import Navbar from "@/components/Navbar";
+import Footer from "@/components/Footer";
 // ─── Types ───────────────────────────────────────────────────────────────────
 
 type ViewMode = "grid" | "list";
@@ -421,7 +422,7 @@ export default function ExploreGigs() {
   return (
     <div className="min-h-screen bg-[#F1F5F9] text-slate-900 font-sans selection:bg-emerald-100 selection:text-emerald-900 pt-20">
       {/* Navbar */}
-      <DashboardHeader />
+      <Navbar />
 
       <div className="max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-12">
         {/* Header Section */}
@@ -683,47 +684,7 @@ export default function ExploreGigs() {
         )}
       </div>
 
-      {/* Footer */}
-      <footer className="bg-[#0F172A] pt-28 pb-16 text-slate-400">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex flex-col md:flex-row justify-between items-center gap-12 pb-20 border-b border-white/5">
-            <div className="flex items-center gap-3 group cursor-pointer">
-              <div className="w-10 h-10 text-white bg-[#10B981] rounded-xl flex items-center justify-center transition-all group-hover:rotate-12">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="h-6 w-6 text-white">
-                  <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
-                </svg>
-              </div>
-              <span className="text-2xl font-black text-white tracking-tight ">Noillin</span>
-            </div>
-
-            <div className="flex gap-16 text-[13px] font-bold uppercase tracking-widest">
-              {["About", "Support", "Privacy", "Terms"].map(l => (
-                <a key={l} href="#" className="hover:text-emerald-500 transition-colors">{l}</a>
-              ))}
-            </div>
-
-            <div className="flex items-center gap-8">
-              {[
-                { label: "SECURE PAYMENTS", icon: "🔒" },
-                { label: "VERIFIED PROFILES", icon: "✔" }
-              ].map((badge, i) => (
-                <div key={i} className="flex items-center gap-3 text-[10px] font-black tracking-[.2em] opacity-80 group">
-                  <span className="text-emerald-500 text-lg group-hover:scale-125 transition-transform">{badge.icon}</span>
-                  <span className="text-slate-100">{badge.label}</span>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          <div className="pt-12 flex flex-col md:flex-row justify-between items-center gap-6 text-[11px] font-bold tracking-widest opacity-30">
-            <p>&copy; 2026 NOILLIN INC. ALL RIGHTS RESERVED.</p>
-            <p className="flex items-center gap-2">
-              <Zap className="w-3 h-3 fill-white" />
-              BUILT FOR THE FUTURE OF INFLUENCE
-            </p>
-          </div>
-        </div>
-      </footer >
-    </div >
+      <Footer />
+    </div>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/web/app/influencer-profile-page/page.tsx b/apps/web/app/influencer-profile-page/page.tsx
index 04dac08..1c3b889 100644
--- a/apps/web/app/influencer-profile-page/page.tsx
+++ b/apps/web/app/influencer-profile-page/page.tsx
@@ -12,12 +12,12 @@ import {
   Lock,
   Instagram,
   Youtube,
-  Twitter,
-  Linkedin,
   ArrowRight
 } from 'lucide-react';
 
 import api from "@/lib/axios.client";
+import Navbar from "@/components/Navbar";
+import Footer from "@/components/Footer";
 
 interface GigData {
   _id: string;
@@ -88,41 +88,9 @@ function ProfileContent() {
 
   return (
     <div className="min-h-screen bg-[#FDFDFD] text-slate-900 font-sans sm:px-0">
-      {/* Navigation */}
-      <nav className="bg-white border-b border-slate-100 sticky top-0 z-50">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between">
-          <div className="flex items-center gap-12">
-            {/* Logo */}
-            <div className="flex items-center gap-2 cursor-pointer">
-              <Link href="/">
-                <div className="flex items-center gap-2">
-                  <div className="w-8 h-8 bg-emerald-500 rounded flex items-center justify-center text-white font-bold text-xl">
-                    N
-                  </div>
-                  <span className="text-xl font-bold tracking-tight text-slate-900">Noillin</span>
-                </div>
-              </Link>
-            </div>
-          </div>
-
-          {/* Links */}
-          <div className="hidden md:flex items-center  gap-8 text-sm font-medium">
-            <Link href="#" className="text-slate-500 hover:text-slate-900 transition-colors">About</Link>
-            <Link href="/gig-list" className="text-slate-500 hover:text-slate-900 transition-colors">Influencers</Link>
-            <div className="relative h-20 flex items-center">
-              <Link href="#" className="text-emerald-600 font-semibold">Gigs</Link>
-              <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-emerald-600"></div>
-            </div>
-            <Link href="#" className="text-slate-500 hover:text-slate-900 transition-colors">Support</Link>
-          </div>
-
-
-          <div className="flex flex-row items-center gap-4 sm:gap-6 text-sm font-medium">
-            <Link href="/login" className="text-slate-600 hover:text-slate-900 hidden sm:block">Sign In</Link>
-            <Link href="/signup" className="px-4 py-2 sm:px-5 sm:py-2.5 text-white bg-emerald-500 hover:bg-emerald-600 rounded-lg transition-colors font-semibold">Get Started</Link>
-          </div>
-        </div>
-      </nav>
+      <Navbar />
+      
+      <div className="pt-24 sm:pt-32">
 
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 md:py-12 space-y-8">
 
@@ -475,61 +443,8 @@ function ProfileContent() {
         </div>
 
       </main>
-
-      {/* Footer */}
-      <footer className="bg-white border-t border-slate-100 py-16 px-4 md:px-8 mt-12">
-        <div className="max-w-7xl mx-auto">
-          <div className="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-5 gap-8 lg:gap-12 mb-16">
-            <div className="lg:col-span-2 space-y-4">
-              <div className="flex items-center gap-2">
-                <div className="w-8 h-8 bg-emerald-500 rounded flex items-center justify-center text-white font-bold text-xl">
-                  N
-                </div>
-                <span className="text-xl font-bold tracking-tight text-slate-900">Noillin</span>
-              </div>
-              <p className="text-slate-500 text-sm max-w-sm leading-relaxed">
-                The professional marketplace for influencer-brand collaborations.
-              </p>
-            </div>
-
-            <div className="space-y-4">
-              <h4 className="font-bold text-slate-900 text-sm">Platform</h4>
-              <ul className="space-y-3">
-                <li><Link href="#" className="text-slate-500 hover:text-emerald-600 text-sm transition-colors">Browse Influencers</Link></li>
-                <li><Link href="/gig-list" className="text-slate-500 hover:text-emerald-600 text-sm transition-colors">Explore Gigs</Link></li>
-                <li><Link href="#" className="text-slate-500 hover:text-emerald-600 text-sm transition-colors">How it Works</Link></li>
-              </ul>
-            </div>
-
-            <div className="space-y-4">
-              <h4 className="font-bold text-slate-900 text-sm">Company</h4>
-              <ul className="space-y-3">
-                <li><Link href="#" className="text-slate-500 hover:text-emerald-600 text-sm transition-colors">About Us</Link></li>
-                <li><Link href="#" className="text-slate-500 hover:text-emerald-600 text-sm transition-colors">Careers</Link></li>
-                <li><Link href="#" className="text-slate-500 hover:text-emerald-600 text-sm transition-colors">Blog</Link></li>
-              </ul>
-            </div>
-
-            <div className="space-y-4">
-              <h4 className="font-bold text-slate-900 text-sm">Support</h4>
-              <ul className="space-y-3">
-                <li><Link href="#" className="text-slate-500 hover:text-emerald-600 text-sm transition-colors">Help Center</Link></li>
-                <li><Link href="#" className="text-slate-500 hover:text-emerald-600 text-sm transition-colors">Terms of Service</Link></li>
-                <li><Link href="#" className="text-slate-500 hover:text-emerald-600 text-sm transition-colors">Privacy Policy</Link></li>
-              </ul>
-            </div>
-          </div>
-
-          <div className="pt-8 border-t border-slate-100 flex flex-col md:flex-row items-center justify-between gap-4">
-            <p className="text-slate-400 text-sm">© 2024 Noillin. All rights reserved.</p>
-            <div className="flex gap-4">
-              <Link href="#" className="text-slate-400 hover:text-slate-600 transition-colors"><Twitter className="w-5 h-5" /></Link>
-              <Link href="#" className="text-slate-400 hover:text-slate-600 transition-colors"><Instagram className="w-5 h-5" /></Link>
-              <Link href="#" className="text-slate-400 hover:text-slate-600 transition-colors"><Linkedin className="w-5 h-5" /></Link>
-            </div>
-          </div>
-        </div>
-      </footer>
+      </div>
+      <Footer />
     </div>
   );
 }
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index 719b70b..02c007b 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -3,7 +3,6 @@
 import React from "react";
 import Image from "next/image";
 import Link from "next/link";
-import { usePathname } from "next/navigation";
 import { motion, useInView, useSpring, useTransform } from "framer-motion";
 import { useEffect, useRef, useState } from "react";
 import {
@@ -12,7 +11,6 @@ import {
   Calendar,
   MessageCircle,
   ArrowRight,
-  CheckCircle2,
   Star,
   Search,
   CreditCard,
@@ -21,7 +19,8 @@ import {
 } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
-import NoillinIcon from "@/components/NoillinIcon";
+import Footer from "@/components/Footer";
+import Navbar from "@/components/Navbar";
 
 const fadeInUp = {
   initial: { opacity: 0, y: 20 },
@@ -78,64 +77,73 @@ interface Testimonial {
 
 function TestimonialSlider({ testimonials }: { testimonials: Testimonial[] }) {
   const [index, setIndex] = useState(0);
+  const [visibleCards, setVisibleCards] = useState(3);
   const ref = useRef(null);
   const isInView = useInView(ref, { once: true, amount: 0.1 });
 
-  // Triple the testimonials for a seamless loop effect
+  // Update visible cards on resize
+  useEffect(() => {
+    const handleResize = () => {
+      setVisibleCards(window.innerWidth < 768 ? 1 : 3);
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  // Extended array for seamless loop
   const extendedTestimonials = [...testimonials, ...testimonials, ...testimonials];
 
+  // Auto-slide logic
   useEffect(() => {
     if (testimonials.length === 0) return;
     const timer = setInterval(() => {
-      setIndex((prev) => (prev + 1) % testimonials.length);
-    }, 4000);
+      setIndex((prev) => prev + 1);
+    }, 5000);
     return () => clearInterval(timer);
   }, [testimonials.length]);
 
   return (
     <motion.div
       ref={ref}
-      initial={{ opacity: 0.2, y: 20 }}
+      initial={{ opacity: 0, y: 20 }}
       animate={isInView ? { opacity: 1, y: 0 } : {}}
       transition={{ duration: 0.8 }}
-      className="relative w-full overflow-hidden py-12"
+      className="relative w-full overflow-hidden"
     >
       <motion.div
-        animate={{ x: `-${(index + testimonials.length) * (100 / extendedTestimonials.length)}%` }}
+        animate={{ x: `-${(index) * (100 / extendedTestimonials.length)}%` }}
         transition={{
           type: "spring",
-          stiffness: 80,
+          stiffness: 50,
           damping: 20,
           mass: 1
         }}
         className="flex"
-        style={{ width: `${(extendedTestimonials.length * 100) / 3}%` }}
+        style={{ width: `${(extendedTestimonials.length * 100) / visibleCards}%` }}
       >
         {extendedTestimonials.map((t, i) => (
           <div
             key={i}
-            className="flex-none px-4"
+            className="flex-none px-3 sm:px-4"
             style={{ width: `${100 / extendedTestimonials.length}%` }}
           >
-            <div className="bg-white p-10 rounded-[3rem] border border-slate-100 shadow-xl shadow-slate-200/40 relative overflow-hidden group h-full flex flex-col justify-between transition-all duration-500 hover:shadow-2xl hover:shadow-emerald-100/50">
-              <div className="absolute top-0 right-0 w-32 h-32 bg-emerald-50 rounded-full -mr-16 -mt-16 blur-2xl opacity-40 group-hover:scale-150 transition-transform duration-1000" />
-
-              <div className="relative z-10">
-                <div className="flex gap-1 text-emerald-400 mb-8">
-                  {[1, 2, 3, 4, 5].map(s => <Star key={s} className="w-5 h-5 fill-emerald-400" />)}
-                </div>
-                <p className="text-slate-600 text-xl font-medium leading-relaxed italic mb-10">
-                  &quot;{t.text}&quot;
-                </p>
+            <div className="bg-white p-8 sm:p-10 rounded-3xl border border-slate-100 shadow-sm hover:shadow-md transition-all duration-500 h-full flex flex-col">
+              <div className="flex gap-0.5 text-yellow-400 mb-6">
+                {[1, 2, 3, 4, 5].map(s => <Star key={s} className="w-4 h-4 fill-current" />)}
               </div>
+              
+              <p className="text-slate-600 text-lg sm:text-xl font-medium leading-relaxed mb-8 flex-1">
+                &quot;{t.text}&quot;
+              </p>
 
-              <div className="flex items-center gap-5 mt-auto relative z-10 pt-6 border-t border-slate-50">
-                <div className="w-14 h-14 rounded-full overflow-hidden relative border-4 border-white shadow-lg">
-                  <Image fill src={`https://i.pravatar.cc/150?img=${t.img}`} alt={t.name || "Testimonial Avatar"} className="object-cover" />
+              <div className="flex items-center gap-4 pt-6 border-t border-slate-50">
+                <div className="w-12 h-12 rounded-full overflow-hidden relative shadow-sm">
+                  <Image fill src={`https://i.pravatar.cc/150?img=${t.img}`} alt={t.name} className="object-cover" />
                 </div>
                 <div>
-                  <h4 className="font-bold text-slate-900 text-base">{t.name}</h4>
-                  <p className="text-[11px] font-black text-emerald-500 tracking-[0.2em] uppercase">{t.role}</p>
+                  <h4 className="font-bold text-slate-900 text-sm">{t.name}</h4>
+                  <p className="text-[10px] font-bold text-emerald-500 uppercase tracking-widest">{t.role}</p>
                 </div>
               </div>
             </div>
@@ -143,18 +151,18 @@ function TestimonialSlider({ testimonials }: { testimonials: Testimonial[] }) {
         ))}
       </motion.div>
 
-      {/* Glassy Shadow Fades for Premium Look */}
-      <div className="absolute inset-y-0 left-0 w-32 bg-gradient-to-r from-gray-200 to-transparent pointer-events-none z-10" />
-      <div className="absolute inset-y-0 right-0 w-32 bg-gradient-to-l from-gray-200 to-transparent pointer-events-none z-10" />
-
       {/* Navigation Indicators */}
-      <div className="flex justify-center gap-2 mt-12">
+      <div className="flex justify-center gap-1.5 mt-10">
         {testimonials.map((_, i) => (
           <button
             key={i}
-            onClick={() => setIndex(i)}
-            className={`h-1.5 rounded-full transition-all duration-500 ${i === index ? "bg-emerald-500 w-8" : "bg-slate-300 w-2 hover:bg-slate-400"
-              }`}
+            onClick={() => {
+              const baseIndex = Math.floor(index / testimonials.length) * testimonials.length;
+              setIndex(baseIndex + i);
+            }}
+            className={`h-1 rounded-full transition-all duration-500 ${
+              (index % testimonials.length) === i ? "bg-emerald-500 w-6" : "bg-slate-200 w-1.5 hover:bg-slate-300"
+            }`}
           />
         ))}
       </div>
@@ -163,247 +171,122 @@ function TestimonialSlider({ testimonials }: { testimonials: Testimonial[] }) {
 }
 
 export default function HomePage() {
-  const pathname = usePathname();
   return (
     <div className="min-h-screen bg-[#F1F5F9] text-slate-900 font-sans selection:bg-emerald-100 selection:text-emerald-900">
-      {/* Navbar */}
-      <nav className="sticky top-0 z-50 bg-white/80 backdrop-blur-xl border-b border-slate-100">
-        <div className="max-w-[1440px] mx-auto px-4 sm:px-6 lg:px-6 py-4 flex items-center justify-between">
-          <motion.div
-            initial={{ opacity: 0, x: -20 }}
-            animate={{ opacity: 1, x: 0 }}
-          >
-            <NoillinIcon />
-          </motion.div>
+      <Navbar />
 
-          <div className="hidden md:flex items-center gap-10 text-[13px] font-semibold text-slate-500 uppercase tracking-wider">
-            {[
-              { name: "Home", href: "/" },
-              { name: "About", href: "#" },
-              { name: "Influencers", href: "#" },
-              { name: "Gigs", href: "/gig-list" },
-              { name: "Support", href: "#" }
-            ].map((item) => {
-              const isActive = item.href !== "#" && pathname === item.href;
-              return (
-                <Link key={item.name} href={item.href} className={`transition-colors relative group ${isActive ? "text-emerald-600" : "hover:text-emerald-600"}`}>
-                  {item.name}
-                  <span className={`absolute -bottom-1 left-0 h-0.5 bg-emerald-500 transition-all ${isActive ? "w-full" : "w-0 group-hover:w-full"}`} />
-                </Link>
-              );
-            })}
+      <main>
+        {/* Modern Minimal Hero Section */}
+        <section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-32">
+          {/* Background Image with Overlay */}
+          <div className="absolute inset-0 z-0">
+            <Image
+              src="/hero-bg-v2.png"
+              alt="Influencer & Brand Collaboration"
+              fill
+              className="object-cover scale-105"
+              priority
+            />
+            <div className="absolute inset-0 bg-slate-900/60 backdrop-blur-[1px]" />
+            <div className="absolute inset-0 bg-gradient-to-b from-slate-900/40 via-transparent to-[#F1F5F9]" />
           </div>
 
-          <motion.div
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            className="flex items-center gap-4"
-          >
-            <Link href="/login">
-              <Button variant="ghost" className="text-slate-600 font-semibold hover:text-emerald-600 hover:bg-emerald-50 transition-all px-6">
-                Sign In
-              </Button>
-            </Link>
-            <Link href="/signup">
-              <Button className="bg-emerald-500 hover:bg-emerald-600 text-white font-bold px-8 shadow-lg shadow-emerald-200 rounded-lg">
-                Get Started
-              </Button>
-            </Link>
-          </motion.div>
-        </div>
-      </nav>
-
-      <main>
-        {/* Hero Section */}
-        <section className="max-w-[1440px] mx-auto px-4 sm:px-6 lg:px-6 py-16 md:py-28 grid grid-cols-1 lg:grid-cols-2 gap-20 lg:gap-12 items-center overflow-hidden">
           <motion.div
             initial="initial"
             animate="animate"
             variants={staggerContainer}
-            className="relative z-10"
+            className="relative z-10 max-w-4xl mx-auto px-6 text-center"
           >
+            <motion.div
+              variants={fadeInUp}
+              className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-md border border-white/20 text-white text-[11px] font-bold uppercase tracking-[0.2em] mb-10 shadow-2xl"
+            >
+              <Zap className="w-4 h-4 text-emerald-400 fill-emerald-400" />
+              The Future of Influence
+            </motion.div>
+
             <motion.h1
               variants={fadeInUp}
-              className="text-6xl md:text-7xl font-extrabold tracking-tight leading-[1.05] mb-8 text-slate-900"
+              className="text-4xl sm:text-6xl md:text-8xl font-black tracking-tighter leading-[1.1] mb-8 text-white drop-shadow-2xl"
             >
               Book Trusted Influencers.<br />
-              <span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-500 to-teal-600">
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-teal-300">
                 Pay Securely.
               </span>
             </motion.h1>
+
             <motion.p
               variants={fadeInUp}
-              className="text-lg text-slate-500 mb-10 max-w-lg leading-relaxed"
+              className="text-lg sm:text-xl md:text-2xl text-white/80 mb-12 max-w-2xl mx-auto leading-relaxed font-medium"
             >
-              Discover, schedule, and collaborate with verified creators — all in one place.
+              Discover, schedule, and collaborate with verified creators — all in one seamless, high-performance ecosystem.
             </motion.p>
 
             <motion.div
               variants={fadeInUp}
-              className="flex flex-wrap items-center gap-5 mb-12"
+              className="flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-6 mb-16"
             >
-              <Link href="/gig-list">
-                <Button className="h-14 px-8 text-base font-bold text-white bg-emerald-500 hover:bg-emerald-600 rounded-xl shadow-xl shadow-emerald-200 group transition-all">
+              <Link href="/gig-list" className="w-full sm:w-auto">
+                <Button className="h-14 sm:h-16 w-full sm:px-10 text-base sm:text-lg font-bold text-white bg-emerald-500 hover:bg-emerald-600 rounded-2xl shadow-[0_20px_50px_rgba(16,185,129,0.3)] group transition-all">
                   Explore Gigs
-                  <ArrowRight className="ml-2 w-5 h-5 transition-transform group-hover:translate-x-1" />
+                  <ArrowRight className="ml-2 w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-1" />
                 </Button>
               </Link>
-              <Link href="/signup?role=INFLUENCER">
-                <Button variant="outline" className="h-14 px-8 text-base font-bold text-slate-700 bg-white border-slate-200 hover:bg-slate-50 rounded-xl transition-all">
-                  Become an Influencer
+              <Link href="/signup?role=INFLUENCER" className="w-full sm:w-auto">
+                <Button variant="outline" className="h-14 sm:h-16 w-full sm:px-10 text-base sm:text-lg font-bold text-white bg-white/10 backdrop-blur-md border-white/30 hover:bg-white/20 rounded-2xl transition-all">
+                  Join as Creator
                 </Button>
               </Link>
             </motion.div>
 
             <motion.div
               variants={fadeInUp}
-              className="flex items-center gap-4"
+              className="flex items-center justify-center gap-6 p-4 rounded-3xl bg-white/5 backdrop-blur-sm border border-white/10 w-fit mx-auto"
             >
               <div className="flex -space-x-3">
-                {[1, 2, 3].map((i) => (
-                  <div key={i} className="w-10 h-10 rounded-full border-4 border-white bg-slate-100 overflow-hidden relative shadow-sm">
+                {[1, 2, 3, 4].map((i) => (
+                  <div key={i} className="w-10 h-10 rounded-full border-2 border-emerald-500/30 bg-slate-800 overflow-hidden relative shadow-lg">
                     <Image fill src={`https://i.pravatar.cc/100?img=${i + 20}`} alt="user" className="object-cover" />
                   </div>
                 ))}
               </div>
-              <p className="text-[13px] text-slate-400 font-semibold tracking-wide">
-                Join <span className="text-emerald-600">2,000+</span> creators building today
+              <p className="text-sm text-white/70 font-semibold tracking-wide">
+                Join <span className="text-emerald-400">2,000+</span> creators building the future
               </p>
             </motion.div>
           </motion.div>
 
-          {/* Hero Mockup */}
-          <motion.div
-            initial={{ opacity: 0, scale: 0.9, rotate: 0 }}
-            animate={{ opacity: 1, scale: 1, rotate: 2 }}
-            transition={{ duration: 0.8, delay: 0.2 }}
-            className="relative"
-          >
-            {/* Background Accent */}
-            <div className="absolute -inset-10 bg-gradient-to-tr from-emerald-100 to-teal-50 rounded-[3rem] -z-10 blur-3xl opacity-60 animate-pulse" />
-
-            <div className="bg-white rounded-[2.5rem] shadow-[0_32px_64px_-16px_rgba(0,0,0,0.12)] border border-slate-100 p-8 relative overflow-hidden group">
-              {/* Header Bar */}
-              <div className="h-1 bg-slate-50 w-24 rounded-full mx-auto mb-8" />
-
-              {/* Profile Card Overlay */}
-              <div className="flex items-center gap-5 mb-10">
-                <div className="w-20 h-20 rounded-2xl overflow-hidden bg-emerald-50 relative border-4 border-white shadow-md">
-                  <Image fill src="https://i.pravatar.cc/150?img=5" alt="Sarah" className="object-cover" />
-                </div>
-                <div>
-                  <h3 className="font-bold text-slate-900 text-xl flex items-center gap-2">
-                    Sarah Jenkins
-                    <CheckCircle2 className="w-5 h-5 text-emerald-500 fill-emerald-50" />
-                  </h3>
-                  <p className="text-sm text-slate-400 font-medium mb-3 tracking-wide">Lifestyle & Beauty</p>
-                  <div className="flex gap-2">
-                    <span className="px-3 py-1 bg-emerald-50 text-emerald-600 text-[10px] font-bold uppercase rounded-lg tracking-wider">Instagram</span>
-                    <span className="px-3 py-1 bg-rose-50 text-rose-600 text-[10px] font-bold uppercase rounded-lg tracking-wider">TikTok</span>
-                  </div>
-                </div>
-                <div className="ml-auto w-10 h-10 bg-slate-50 rounded-full flex items-center justify-center text-slate-400">
-                  <ShieldCheck className="w-5 h-5 text-emerald-500" />
-                </div>
-              </div>
-
-              {/* Mini Calendar mockup with scroll animations */}
-              <motion.div
-                whileInView={{ opacity: 1, scale: 1 }}
-                initial={{ opacity: 0, scale: 0.9 }}
-                viewport={{ once: true }}
-                transition={{ duration: 0.6 }}
-                className="mb-10 p-6 bg-slate-50/50 rounded-3xl border border-slate-50 shadow-inner"
-              >
-                <div className="flex justify-between items-center mb-6">
-                  <p className="text-xs font-bold text-slate-400 uppercase tracking-widest">Availability</p>
-                  <motion.div
-                    animate={{ rotate: [0, 10, -10, 0] }}
-                    transition={{ duration: 4, repeat: Infinity }}
-                  >
-                    <Calendar className="w-4 h-4 text-emerald-500" />
-                  </motion.div>
-                </div>
-                <div className="grid grid-cols-7 gap-2">
-                  {['M', 'T', 'W', 'T', 'F', 'S', 'S'].map((d, i) => (
-                    <div key={i} className="text-[10px] text-slate-400 font-bold text-center">{d}</div>
-                  ))}
-                  {[1, 2, 3].map(d => (
-                    <motion.div
-                      key={d}
-                      whileInView={{ opacity: 1, y: 0 }}
-                      initial={{ opacity: 0, y: 10 }}
-                      viewport={{ once: true }}
-                      transition={{ delay: d * 0.05 }}
-                      className="h-10 text-[11px] flex items-center justify-center text-slate-300"
-                    >
-                      {d}
-                    </motion.div>
-                  ))}
-                  <motion.div
-                    whileInView={{ scale: [1, 1.2, 1] }}
-                    viewport={{ once: true }}
-                    transition={{ delay: 0.5, duration: 0.5 }}
-                    className="h-10 w-full bg-emerald-500 text-white text-[11px] font-bold flex items-center justify-center rounded-xl shadow-lg shadow-emerald-200"
-                  >
-                    4
-                  </motion.div>
-                  {[5, 6, 7].map(d => (
-                    <motion.div
-                      key={d}
-                      whileInView={{ opacity: 1, y: 0 }}
-                      initial={{ opacity: 0, y: 10 }}
-                      viewport={{ once: true }}
-                      transition={{ delay: d * 0.05 }}
-                      className="h-10 text-[11px] flex items-center justify-center text-slate-400 font-medium"
-                    >
-                      {d}
-                    </motion.div>
-                  ))}
-                </div>
-              </motion.div>
-
-              {/* Price Details */}
-              <div className="space-y-4 mb-8 px-2">
-                <div className="flex justify-between items-center border-b border-slate-50 pb-4">
-                  <span className="text-sm font-medium text-slate-400">Service Fee</span>
-                  <span className="text-sm font-bold text-slate-900">$150.00</span>
-                </div>
-                <div className="flex justify-between items-center">
-                  <span className="text-lg font-bold text-slate-900">Total</span>
-                  <span className="text-2xl font-black text-emerald-500 tracking-tight">$150.00</span>
-                </div>
-              </div>
-
-              <Button className="w-full h-14 bg-emerald-500 hover:bg-emerald-600 text-white font-bold rounded-2xl transition-all shadow-xl shadow-emerald-100">
-                Confirm & Pay
-              </Button>
-            </div>
-          </motion.div>
+          {/* Floating Glassmorphic Elements for Modern Feel */}
+          <div className="absolute top-1/4 -left-20 w-64 h-64 bg-emerald-500/20 rounded-full blur-[100px] animate-pulse" />
+          <div className="absolute bottom-1/4 -right-20 w-80 h-80 bg-teal-500/20 rounded-full blur-[120px] animate-pulse delay-700" />
         </section>
 
         {/* Stats Section */}
-        <section className="bg-[#F1F5F9]/50 py-20 border-y border-slate-100">
-          <div className="max-w-[1440px] mx-auto px-4 sm:px-6 lg:px-6">
-            <p className="text-center text-[11px] font-bold text-slate-400 uppercase tracking-[0.3em] mb-16">Trusted by brand & creators</p>
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-16 md:divide-x divide-slate-200">
+        <section className="bg-slate-900 py-24 relative overflow-hidden">
+          <div className="absolute top-0 left-0 w-full h-full opacity-10">
+            <div className="absolute top-0 left-0 w-64 h-64 bg-emerald-500 rounded-full blur-[100px]" />
+            <div className="absolute bottom-0 right-0 w-80 h-80 bg-teal-500 rounded-full blur-[120px]" />
+          </div>
+          <div className="max-w-[1440px] mx-auto px-4 sm:px-6 relative z-10">
+            <p className="text-center text-[10px] font-black text-emerald-500 uppercase tracking-[0.4em] mb-16 opacity-80">Empowering the Future Economy</p>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-12 divide-y md:divide-y-0 md:divide-x divide-slate-800">
               {[
-                { label: "Influencers", value: "1,000+" },
-                { label: "Processed", value: "$2M+" },
-                { label: "Secure", value: "100%" }
+                { label: "Active Creators", value: "1,000+" },
+                { label: "Brand Partnerships", value: "$2M+" },
+                { label: "Success Rate", value: "99.9%" }
               ].map((stat, idx) => (
                 <motion.div
                   key={idx}
                   whileInView={{ opacity: 1, y: 0 }}
                   initial={{ opacity: 0, y: 30 }}
                   viewport={{ once: true }}
-                  transition={{ duration: 0.8, delay: idx * 0.2 }}
-                  className="text-center px-8"
+                  transition={{ duration: 0.8, delay: idx * 0.1 }}
+                  className="text-center px-10 py-8 md:py-0"
                 >
-                  <h2 className="text-6xl font-black text-slate-900 mb-2">
+                  <h2 className="text-5xl md:text-7xl font-black text-white mb-4 tracking-tighter">
                     <CountingNumber value={stat.value} suffix={stat.value.includes('+') ? '+' : stat.value.includes('%') ? '%' : ''} />
                   </h2>
-                  <p className="text-sm font-bold text-slate-400 uppercase tracking-widest">{stat.label}</p>
+                  <p className="text-xs font-bold text-slate-400 uppercase tracking-widest leading-loose">{stat.label}</p>
                 </motion.div>
               ))}
             </div>
@@ -411,46 +294,51 @@ export default function HomePage() {
         </section>
 
         {/* How it Works */}
-        <section className="py-28 relative overflow-hidden bg-[#F1F5F9]">
-          <div className="max-w-[1440px] mx-auto px-4 sm:px-6 lg:px-6 relative z-10">
-            <div className="text-center max-w-2xl mx-auto mb-20">
-              <h2 className="text-4xl font-extrabold text-slate-900 mb-6">How Noillin Works</h2>
+        <section className="py-24 sm:py-32 relative overflow-hidden bg-white">
+          <div className="max-w-[1440px] mx-auto px-4 sm:px-6 relative z-10">
+            <div className="text-center max-w-2xl mx-auto mb-24">
+              <span className="text-emerald-600 font-bold text-xs uppercase tracking-widest mb-4 inline-block">Simple Workflow</span>
+              <h2 className="text-4xl md:text-5xl font-black text-slate-900 mb-6 tracking-tight">The Path to Success</h2>
               <p className="text-slate-500 font-medium text-lg leading-relaxed">
-                Connect brands with elite creators in three simple, secure steps.
+                Experience a streamlined collaboration process designed for elite speed.
               </p>
             </div>
 
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-12">
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
               {[
                 {
-                  title: "Discover",
-                  desc: "Browse verified influencer gigs based on your niche and budget.",
-                  icon: <Search className="w-8 h-8" />,
-                  color: "bg-blue-50 text-blue-500"
+                  title: "Discover Talent",
+                  desc: "Browse a curated list of verified creators across every niche imaginable.",
+                  icon: <Search className="w-6 h-6" />,
+                  color: "bg-blue-500"
                 },
                 {
-                  title: "Book",
-                  desc: "Select availability and packages that fit your campaign needs.",
-                  icon: <Calendar className="w-8 h-8" />,
-                  color: "bg-emerald-50 text-emerald-500"
+                  title: "Instant Booking",
+                  desc: "Check real-time availability and lock in your campaign with one click.",
+                  icon: <Calendar className="w-6 h-6" />,
+                  color: "bg-emerald-500"
                 },
                 {
-                  title: "Pay Securely",
-                  desc: "Funds are held securely until deliverables are confirmed.",
-                  icon: <CreditCard className="w-8 h-8" />,
-                  color: "bg-indigo-50 text-indigo-500"
+                  title: "Secure Delivery",
+                  desc: "Funds are released only when you're 100% satisfied with the results.",
+                  icon: <CreditCard className="w-6 h-6" />,
+                  color: "bg-indigo-500"
                 }
               ].map((step, i) => (
                 <motion.div
                   key={i}
-                  whileHover={{ y: -10 }}
-                  className="bg-white p-10 rounded-[2.5rem] border border-slate-100 shadow-xl shadow-slate-100/50 flex flex-col items-center text-center group transition-all"
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ delay: i * 0.2 }}
+                  className="relative p-8 sm:p-10 rounded-3xl bg-slate-50 border border-slate-100 hover:bg-white hover:shadow-[0_20px_50px_-20px_rgba(0,0,0,0.1)] transition-all duration-500 group"
                 >
-                  <div className={`p-6 rounded-2xl mb-8 group-hover:scale-110 transition-transform ${step.color}`}>
+                  <div className="absolute top-10 right-10 text-6xl font-black text-slate-200/50 group-hover:text-emerald-500/10 transition-colors">0{i + 1}</div>
+                  <div className={`w-14 h-14 rounded-2xl mb-8 flex items-center justify-center text-white shadow-lg ${step.color}`}>
                     {step.icon}
                   </div>
                   <h3 className="text-2xl font-bold text-slate-900 mb-4">{step.title}</h3>
-                  <p className="text-slate-400 text-sm font-medium leading-[1.6]">{step.desc}</p>
+                  <p className="text-slate-500 text-sm font-medium leading-relaxed">{step.desc}</p>
                 </motion.div>
               ))}
             </div>
@@ -458,33 +346,35 @@ export default function HomePage() {
         </section>
 
         {/* Platform Features */}
-        <section className="py-28 bg-[#F1F5F9] overflow-hidden">
-          <div className="max-w-[1440px] mx-auto px-4 sm:px-6 lg:px-6">
+        <section className="py-24 sm:py-32 bg-slate-50 relative">
+          <div className="max-w-[1440px] mx-auto px-4 sm:px-6">
             <div className="text-center mb-24">
-              <h2 className="text-4xl font-extrabold text-slate-900">Platform Features</h2>
+              <span className="bg-emerald-100 text-emerald-700 px-4 py-1.5 rounded-full text-[10px] font-black uppercase tracking-widest mb-6 inline-block">Cutting Edge</span>
+              <h2 className="text-4xl md:text-5xl font-black text-slate-900 tracking-tight">The Noillin Edge</h2>
             </div>
 
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
               {[
-                { title: "Availability Booking", desc: "See real-time calendar slots before you book. No more back-and-forth emails.", icon: <Calendar className="w-5 h-5" /> },
-                { title: "Secure Payments", desc: "Escrow-style protection ensures your money is safe until the job is done.", icon: <ShieldCheck className="w-5 h-5" /> },
-                { title: "Direct Chat", desc: "Communicate directly with influencers or brands via our secure platform.", icon: <MessageCircle className="w-5 h-5" /> },
-                { title: "Transparent Pricing", desc: "No hidden fees. What you see is exactly what you pay.", icon: <Star className="w-5 h-5" /> },
-                { title: "Group Collabs", desc: "Book multiple influencers for the same campaign effortlessly.", icon: <Users className="w-5 h-5" /> },
-                { title: "Fast Turnaround", desc: "Get confirmed bookings in minutes, not days.", icon: <Zap className="w-5 h-5" /> },
+                { title: "Live Booking", desc: "Real-time creator calendars integrated directly into the platform.", icon: <Calendar className="w-5 h-5" /> },
+                { title: "Escrow Security", desc: "Your capital is safe in our automated escrow system until delivery.", icon: <ShieldCheck className="w-5 h-5" /> },
+                { title: "Unified Messaging", desc: "No more Discord or Telegram leaks. Keep everything professional.", icon: <MessageCircle className="w-5 h-5" /> },
+                { title: "Smart Contracts", desc: "Automated agreements that protect both brand and creator.", icon: <Star className="w-5 h-5" /> },
+                { title: "Mass Outreach", desc: "Invite 50+ influencers to your campaign with a single click.", icon: <Users className="w-5 h-5" /> },
+                { title: "Instant Payouts", desc: "Creators get paid the moment work is approved. Zero friction.", icon: <Zap className="w-5 h-5" /> },
               ].map((feature, i) => (
                 <motion.div
                   key={i}
-                  initial={{ opacity: 0, y: 20 }}
+                  initial={{ opacity: 0, y: 10 }}
                   whileInView={{ opacity: 1, y: 0 }}
-                  transition={{ duration: 0.5, delay: i * 0.1 }}
-                  className="p-8 bg-gray-200 hover:bg-gray rounded-3xl border border-transparent hover:border-black hover hover:shadow-2xl hover:shadow-emerald-50! transition-all relative group"
+                  viewport={{ once: true }}
+                  transition={{ delay: i * 0.05 }}
+                  className="p-8 bg-white border border-slate-200/60 rounded-[2.5rem] hover:border-emerald-500/30 hover:shadow-[0_20px_50px_-20px_rgba(16,185,129,0.15)] transition-all duration-300 group"
                 >
-                  <div className="w-12 h-12 bg-white text-emerald-500 rounded-xl flex items-center justify-center mb-8 shadow-sm group-hover:bg-emerald-500 group-hover:text-white transition-all">
+                  <div className="w-12 h-12 rounded-2xl bg-slate-50 flex items-center justify-center text-slate-400 group-hover:bg-emerald-500 group-hover:text-white transition-all duration-300 mb-6">
                     {feature.icon}
                   </div>
-                  <h3 className="text-lg font-bold text-slate-900 mb-3">{feature.title}</h3>
-                  <p className="text-sm text-slate-500 leading-relaxed font-medium">{feature.desc}</p>
+                  <h3 className="text-lg font-bold text-slate-900 mb-3 group-hover:text-emerald-600 transition-colors">{feature.title}</h3>
+                  <p className="text-slate-500 text-sm font-medium leading-relaxed">{feature.desc}</p>
                 </motion.div>
               ))}
             </div>
@@ -492,65 +382,66 @@ export default function HomePage() {
         </section>
 
         {/* Brand vs Creator */}
-        <section className="max-w-[1440px] mx-auto px-4 sm:px-6 lg:px-6 py-20 grid grid-cols-1 lg:grid-cols-2 gap-10">
+        <section className="max-w-[1440px] mx-auto px-4 sm:px-6 py-24 sm:py-32 grid grid-cols-1 lg:grid-cols-2 gap-6 sm:gap-8">
           {/* Brand Card */}
           <motion.div
-            whileHover={{ scale: 1.01 }}
-            className="bg-slate-900 p-12 rounded-[3.5rem] relative overflow-hidden group shadow-2xl shadow-slate-200"
+            whileHover={{ y: -5 }}
+            className="bg-slate-900 p-8 sm:p-14 rounded-[2.5rem] sm:rounded-[3.5rem] relative overflow-hidden group shadow-[0_30px_60px_-15px_rgba(15,23,42,0.3)]"
           >
-            <div className="absolute top-0 right-0 w-64 h-64 bg-slate-800 rounded-full -mr-32 -mt-32 blur-3xl opacity-20 transition-all group-hover:opacity-40" />
-            <h2 className="text-3xl font-black text-white mb-10 leading-tight">Built for<br />Brands</h2>
-            <ul className="space-y-6 mb-12">
+            <div className="absolute top-0 right-0 w-64 h-64 bg-emerald-500/10 rounded-full -mr-20 -mt-20 blur-[100px] transition-all group-hover:bg-emerald-500/20" />
+            <h2 className="text-4xl font-black text-white mb-8 leading-tight">Scale Your<br /><span className="text-emerald-500">Brand Reach</span></h2>
+            <ul className="space-y-6 mb-14">
               {[
-                "Filter influencers by niche and platform",
-                "Clear deliverables and transparent pricing packages",
-                "Escrow-style payments protect your budget"
+                "Advanced creator discovery engine",
+                "Automated campaign management",
+                "Full escrow budget protection"
               ].map((item, i) => (
-                <li key={i} className="flex items-center gap-4 text-slate-300 font-medium">
-                  <div className="w-6 h-6 bg-slate-800 text-emerald-400 rounded-full flex items-center justify-center flex-shrink-0">
-                    <Check className="w-3 h-3 font-black" />
+                <li key={i} className="flex items-center gap-4 text-slate-400 font-medium text-sm">
+                  <div className="w-6 h-6 bg-emerald-500/10 text-emerald-500 rounded-full flex items-center justify-center flex-shrink-0">
+                    <Check className="w-3 h-3 font-bold" />
                   </div>
                   {item}
                 </li>
               ))}
             </ul>
             <Button className="h-16 w-full text-base font-bold bg-white text-slate-900 border-none hover:bg-slate-100 rounded-2xl shadow-xl transition-all">
-              Explore Influencers
+              Launch Brand Campaign
             </Button>
           </motion.div>
 
           {/* Creator Card */}
           <motion.div
-            whileHover={{ scale: 1.01 }}
-            className="bg-white p-12 rounded-[3.5rem] border border-slate-100 relative overflow-hidden group shadow-2xl shadow-slate-200"
+            whileHover={{ y: -5 }}
+            className="bg-white p-8 sm:p-14 rounded-[2.5rem] sm:rounded-[3.5rem] border border-slate-100 relative overflow-hidden group shadow-[0_30px_60px_-15px_rgba(0,0,0,0.05)]"
           >
-            <div className="absolute top-0 right-0 w-64 h-64 bg-emerald-50 rounded-full -mr-32 -mt-32 blur-3xl opacity-40 transition-all group-hover:opacity-60" />
-            <h2 className="text-3xl font-black text-slate-900 mb-10 leading-tight">Built for<br />Creators</h2>
-            <ul className="space-y-6 mb-12">
+            <div className="absolute top-0 right-0 w-64 h-64 bg-emerald-500/5 rounded-full -mr-20 -mt-20 blur-[100px] transition-all group-hover:bg-emerald-500/10" />
+            <h2 className="text-4xl font-black text-slate-900 mb-8 leading-tight">Monetize Your<br /><span className="text-emerald-600">Influence</span></h2>
+            <ul className="space-y-6 mb-14">
               {[
-                "Create single or group gigs easily",
-                "Manage availability like a pro",
-                "Get paid instantly once job is confirmed"
+                "Professional gig creation suite",
+                "Smart availability management",
+                "Instant, verified payouts"
               ].map((item, i) => (
-                <li key={i} className="flex items-center gap-4 text-slate-500 font-medium">
+                <li key={i} className="flex items-center gap-4 text-slate-500 font-medium text-sm">
                   <div className="w-6 h-6 bg-emerald-50 text-emerald-600 rounded-full flex items-center justify-center flex-shrink-0">
-                    <Check className="w-3 h-3 font-black" />
+                    <Check className="w-3 h-3 font-bold" />
                   </div>
                   {item}
                 </li>
               ))}
             </ul>
-            <Button className="h-16 w-full text-base font-bold bg-emerald-500 text-white hover:bg-emerald-600 rounded-2xl shadow-xl shadow-emerald-100 transition-all">
-              Create a Gig
+            <Button className="h-16 w-full text-base font-bold bg-emerald-500 text-white hover:bg-emerald-600 border-none rounded-2xl shadow-xl shadow-emerald-500/20 transition-all">
+              Become a Noillin Creator
             </Button>
           </motion.div>
         </section>
 
         {/* Testimonials */}
-        <section className="py-28 bg-[#F1F5F9]">
-          <div className="max-w-[1440px] mx-auto px-4 sm:px-6 lg:px-6">
+        <section className="py-24 sm:py-32 bg-white">
+          <div className="max-w-[1440px] mx-auto px-4 sm:px-6">
             <div className="text-center mb-24">
-              <h2 className="text-4xl font-extrabold text-slate-900">Community Stories</h2>
+              <span className="text-emerald-600 font-bold text-[10px] uppercase tracking-[0.3em] mb-4 inline-block">Success Stories</span>
+              <h2 className="text-4xl md:text-5xl font-black text-slate-900 tracking-tight">The Community Voice</h2>
             </div>
             <TestimonialSlider testimonials={[
               { name: "Alex Rivera", role: "TECHFLOW DIRECTOR", img: "11", text: "Noillin streamlined our influencer outreach. We found the perfect micro-influencers within hours." },
@@ -561,83 +452,39 @@ export default function HomePage() {
         </section>
 
         {/* Final CTA */}
-        <section className="px-4 sm:px-6 lg:px-8 py-10">
-          <div className="max-w-[1440px] mx-auto h-[500px] bg-emerald-500 rounded-[4rem] relative overflow-hidden flex flex-col items-center justify-center text-center px-6 group">
-            {/* Animated Circles */}
-            <motion.div
-              animate={{ scale: [1, 1.1, 1] }}
-              transition={{ duration: 10, repeat: Infinity, ease: "linear" }}
-              className="absolute top-1/2 left-0 w-[500px] h-[500px] bg-white/10 rounded-full blur-[100px] -translate-x-1/2 -translate-y-1/2"
-            />
-            <motion.div
-              animate={{ scale: [1, 1.2, 1] }}
-              transition={{ duration: 15, repeat: Infinity, ease: "linear" }}
-              className="absolute bottom-0 right-0 w-[600px] h-[600px] bg-white/10 rounded-full blur-[120px] translate-x-1/3 translate-y-1/3"
-            />
-
-            <h2 className="text-5xl md:text-6xl font-black text-white mb-8 max-w-2xl leading-tight relative mt-20">
-              Start Collaborating Today
-            </h2>
-            <p className="text-emerald-50 text-xl font-medium mb-12 max-w-xl leading-relaxed relative opacity-90">
-              Join thousands of brands and creators building the future of influence together.
-            </p>
-            <div className="flex flex-col sm:flex-row gap-6 relative mb-20">
-              <Link href="/signup">
-                <Button className="h-16 px-12 bg-white text-emerald-600 hover:bg-emerald-50 text-lg font-bold rounded-2xl shadow-2xl transition-all">
-                  Find Influencers
-                </Button>
-              </Link>
-              <Link href="/signup?role=INFLUENCER">
-                <Button variant="outline" className="h-16 px-12 text-white border-white/20 hover:text-emerald-600 bg-white/10 text-lg font-bold rounded-2xl transition-all">
-                  Join as Influencer
-                </Button>
-              </Link>
+        <section className="px-4 sm:px-6 py-16 sm:py-20">
+          <div className="max-w-[1440px] mx-auto h-auto sm:h-[550px] bg-slate-900 rounded-[2.5rem] sm:rounded-[4.5rem] relative overflow-hidden flex flex-col items-center justify-center text-center p-8 sm:px-8 group border border-slate-800 shadow-2xl py-20 sm:py-0">
+            {/* High-End Background Effects */}
+            <div className="absolute inset-0 opacity-40">
+              <div className="absolute top-0 left-0 w-96 h-96 bg-emerald-500 rounded-full blur-[150px] -translate-x-1/2 -translate-y-1/2" />
+              <div className="absolute bottom-0 right-0 w-96 h-96 bg-teal-500 rounded-full blur-[150px] translate-x-1/2 translate-y-1/2" />
             </div>
-          </div>
-        </section>
-      </main>
 
-      {/* Footer */}
-      <footer className="bg-[#0F172A] pt-28 pb-16 text-slate-400">
-        <div className="max-w-[1440px] mx-auto px-4 sm:px-6 lg:px-6">
-          <div className="flex flex-col md:flex-row justify-between items-center gap-12 pb-20 border-b border-white/5">
-            <div className="flex items-center gap-3 group cursor-pointer">
-              <div className="w-10 h-10 text-white bg-emerald-500 rounded-xl flex items-center justify-center transition-all group-hover:rotate-12">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" className="w-6 h-6">
-                  <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
-                </svg>
+            <div className="relative z-10 max-w-3xl">
+              <h2 className="text-4xl sm:text-5xl md:text-7xl font-black text-white mb-6 sm:mb-8 leading-[1.1] tracking-tighter">
+                Ready to Join the <br/><span className="text-emerald-500">Future Economy?</span>
+              </h2>
+              <p className="text-slate-400 text-base sm:text-lg md:text-xl font-medium mb-10 sm:mb-12 max-w-xl mx-auto leading-relaxed">
+                Unlock elite partnerships and scale your presence with the world&apos;s most advanced influencer infrastructure.
+              </p>
+              <div className="flex flex-col sm:flex-row items-center justify-center gap-6">
+                <Link href="/signup">
+                  <Button className="h-16 px-10 bg-emerald-500 hover:bg-emerald-600 text-white text-lg font-bold rounded-2xl shadow-xl shadow-emerald-500/20 transition-all border-none">
+                    Start Collaborating
+                  </Button>
+                </Link>
+                <Link href="/signup?role=INFLUENCER">
+                  <Button variant="outline" className="h-16 px-10 text-emerald-400 border-emerald-500/30 hover:bg-emerald-500/10 rounded-2xl transition-all font-bold text-lg">
+                    Register as Creator
+                  </Button>
+                </Link>
               </div>
-              <span className="text-2xl font-black text-white tracking-tight ">Noillin</span>
-            </div>
-
-            <div className="flex gap-16 text-[13px] font-bold uppercase tracking-widest">
-              {["About", "Support", "Privacy", "Terms"].map(l => (
-                <a key={l} href="#" className="hover:text-emerald-500 transition-colors">{l}</a>
-              ))}
-            </div>
-
-            <div className="flex items-center gap-8">
-              {[
-                { label: "SECURE PAYMENTS", icon: "🔒" },
-                { label: "VERIFIED PROFILES", icon: "✔" }
-              ].map((badge, i) => (
-                <div key={i} className="flex items-center gap-3 text-[10px] font-black tracking-[.2em] opacity-80 group">
-                  <span className="text-emerald-500 text-lg group-hover:scale-125 transition-transform">{badge.icon}</span>
-                  <span className="text-slate-100">{badge.label}</span>
-                </div>
-              ))}
             </div>
           </div>
+        </section>
+      </main>
 
-          <div className="pt-12 flex flex-col md:flex-row justify-between items-center gap-6 text-[11px] font-bold tracking-widest opacity-30">
-            <p>&copy; 2026 NOILLIN INC. ALL RIGHTS RESERVED.</p>
-            <p className="flex items-center gap-2">
-              <Zap className="w-3 h-3 fill-white" />
-              BUILT FOR THE FUTURE OF INFLUENCE
-            </p>
-          </div>
-        </div>
-      </footer>
+      <Footer />
     </div>
   );
 }
diff --git a/apps/web/components/AuthNavbar.tsx b/apps/web/components/AuthNavbar.tsx
index 7396de2..1d74e94 100644
--- a/apps/web/components/AuthNavbar.tsx
+++ b/apps/web/components/AuthNavbar.tsx
@@ -6,9 +6,9 @@ import NoillinIcon from "./NoillinIcon";
 
 export default function AuthNavbar() {
   return (
-    <nav className="fixed top-0 w-full z-50 bg-white/80 backdrop-blur-md border-b border-gray-100 shadow-sm">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex justify-between items-center h-16">
+    <nav className="fixed top-4 left-1/2 -translate-x-1/2 w-[95%] max-w-7xl z-50 bg-white/80 backdrop-blur-md border border-gray-100 rounded-full shadow-xl">
+      <div className="mx-auto px-6 sm:px-10">
+        <div className="flex justify-between items-center h-14">
           {/* Logo Section */}
           <div className="flex items-center">
             <NoillinIcon />
diff --git a/apps/web/components/DashboardHeader.tsx b/apps/web/components/DashboardHeader.tsx
index 4296bab..9eb0e28 100644
--- a/apps/web/components/DashboardHeader.tsx
+++ b/apps/web/components/DashboardHeader.tsx
@@ -20,6 +20,7 @@ interface DashboardHeaderProps {
     showBackButton?: boolean;
     backHref?: string;
     children?: React.ReactNode;
+    isPill?: boolean;
 }
 
 export default function DashboardHeader({
@@ -29,7 +30,8 @@ export default function DashboardHeader({
     hideLogo = false,
     showBackButton = false,
     backHref = "/influencer-dashboard",
-    children
+    children,
+    isPill = false
 }: DashboardHeaderProps) {
     const router = useRouter();
     const { user, clearAuth } = useAuthStore();
@@ -77,8 +79,11 @@ export default function DashboardHeader({
         }
     };
 
+    const headerBaseStyles = isFixed ? (isPill ? 'fixed top-4 left-1/2 -translate-x-1/2' : 'fixed top-0 left-0 right-0') : 'relative';
+    const pillStyles = isPill ? 'w-[95%] max-w-7xl rounded-full shadow-2xl border border-gray-100 px-6 sm:px-10' : 'w-full border-b border-gray-100 px-4 sm:px-8';
+
     return (
-        <header className={`${isFixed ? 'fixed top-0 left-0 right-0' : 'relative'} bg-white border-b border-gray-100 h-20 flex items-center justify-between px-4 sm:px-8 z-50`}>
+        <header className={`${headerBaseStyles} ${pillStyles} bg-white h-16 flex items-center justify-between z-50 transition-all duration-300`}>
             <div className="flex items-center gap-4">
                 {showSidebarToggle && (
                     <button
diff --git a/apps/web/components/Footer.tsx b/apps/web/components/Footer.tsx
new file mode 100644
index 0000000..2a6bb89
--- /dev/null
+++ b/apps/web/components/Footer.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+
+import NoillinIcon from "./NoillinIcon";
+
+export default function Footer() {
+  return (
+    <footer className="bg-white py-20 px-4 sm:px-6">
+      <div className="max-w-[1400px] mx-auto">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-16 mb-20">
+          <div className="md:col-span-1 space-y-6">
+            <NoillinIcon />
+            <p className="text-slate-500 text-sm font-medium leading-relaxed max-w-xs">
+              The world&apos;s most advanced infrastructure for professional brand-creator collaborations.
+            </p>
+          </div>
+          
+          <div className="space-y-6">
+            <h4 className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Platform</h4>
+            <ul className="space-y-4 text-sm font-bold text-slate-600">
+              <li><Link href="/gig-list" className="hover:text-emerald-500 transition-colors">Explore Gigs</Link></li>
+              <li><Link href="/signup" className="hover:text-emerald-500 transition-colors">Register Brand</Link></li>
+              <li><Link href="/signup?role=INFLUENCER" className="hover:text-emerald-500 transition-colors">Join as Creator</Link></li>
+            </ul>
+          </div>
+
+          <div className="space-y-6">
+            <h4 className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Resources</h4>
+            <ul className="space-y-4 text-sm font-bold text-slate-600">
+              <li><Link href="#" className="hover:text-emerald-500 transition-colors">Help Center</Link></li>
+              <li><Link href="#" className="hover:text-emerald-500 transition-colors">Security</Link></li>
+              <li><Link href="#" className="hover:text-emerald-500 transition-colors">Status</Link></li>
+            </ul>
+          </div>
+
+          <div className="space-y-6">
+            <h4 className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Legal</h4>
+            <ul className="space-y-4 text-sm font-bold text-slate-600">
+              <li><Link href="#" className="hover:text-emerald-500 transition-colors">Terms of Service</Link></li>
+              <li><Link href="#" className="hover:text-emerald-500 transition-colors">Privacy Policy</Link></li>
+              <li><Link href="#" className="hover:text-emerald-500 transition-colors">Cookie Policy</Link></li>
+            </ul>
+          </div>
+        </div>
+
+        <div className="pt-10 border-t border-slate-100 flex flex-col md:flex-row justify-between items-center gap-6">
+          <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">
+            © 2026 Noillin Inc. Crafted for the future.
+          </p>
+          <div className="flex items-center gap-8 text-[10px] font-black text-slate-400 tracking-[0.2em]">
+            <div className="flex items-center gap-2">
+              <span className="text-emerald-500 text-base">🔒</span> SECURE PAYMENTS
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-emerald-500 text-base">✔</span> VERIFIED CREATORS
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/apps/web/components/Navbar.tsx b/apps/web/components/Navbar.tsx
index ee52978..d2bb065 100644
--- a/apps/web/components/Navbar.tsx
+++ b/apps/web/components/Navbar.tsx
@@ -1,322 +1,247 @@
-"use client";
-
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { useState, useEffect, useRef } from "react";
-import Image from "next/image";
-import { LogOut, LayoutDashboard, ChevronDown } from "lucide-react";
-
-import NoillinIcon from "./NoillinIcon";
-
-import { useAuthStore } from "@/store/auth.store";
-import api from "@/lib/axios.client";
-
-
-
-export default function Navbar() {
-  const [isOpen, setIsOpen] = useState(false);
-  const [scrolled, setScrolled] = useState(false);
-  const [isProfileOpen, setIsProfileOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  const pathname = usePathname();
-  const { user, clearAuth } = useAuthStore();
-  const [profile, setProfile] = useState<{ fullName?: string; profileImageUrl?: string } | null>(null);
-
-  useEffect(() => {
-    if (user) {
-      api.get("/profile/get_profile")
-        .then((res) => setProfile(res.data.data))
-        .catch(() => { });
-    }
-  }, [user]);
-
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        setIsProfileOpen(false);
-      }
-    }
-    if (isProfileOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
-    }
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [isProfileOpen]);
-
-  const handleLogout = async () => {
-    try {
-      await api.post("/auth/logout");
-    } catch (e) {
-      console.error("Logout error", e);
-    } finally {
-      clearAuth();
-      window.location.href = "/login";
-    }
-  };
-
-  const displayName = profile?.fullName || user?.fullName || user?.email?.split("@")[0] || "User";
-  const profileImage = profile?.profileImageUrl || user?.profileImageUrl || user?.profileImage;
-  const dashboardPath = user?.role === "INFLUENCER" ? "/influencer-dashboard" : "/brand-dashboard";
-
-
-  useEffect(() => {
-    const handleScroll = () => {
-      if (window.scrollY > 10) {
-        setScrolled(true);
-      } else {
-        setScrolled(false);
-      }
-    };
-    window.addEventListener("scroll", handleScroll);
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, []);
-
-  const isActive = (path: string) => pathname === path;
-
-  return (
-    <nav
-      className={`fixed top-0 w-full z-50 transition-all duration-300 ${scrolled ? "bg-white/80 backdrop-blur-md shadow-sm border-b border-gray-100" : "bg-transparent border-b border-transparent"
-        }`}
-    >
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex justify-between items-center h-20">
-          {/* Logo Section */}
-          <div className="flex items-center">
-            <NoillinIcon />
-          </div>
-
-          {/* Desktop Navigation */}
-          <div className="hidden md:flex items-center space-x-8">
-            <Link
-              href="/explore"
-              className={`text-sm font-medium transition-colors hover:text-[#059669] ${isActive("/explore") ? "text-[#059669]" : "text-gray-600"
-                }`}
-            >
-              Explore
-            </Link>
-            <Link
-              href="/how-it-works"
-              className={`text-sm font-medium transition-colors hover:text-[#059669] ${isActive("/how-it-works") ? "text-[#059669]" : "text-gray-600"
-                }`}
-            >
-              How it Works
-            </Link>
-            <Link
-              href="/blog"
-              className={`text-sm font-medium transition-colors hover:text-[#059669] ${isActive("/blog") ? "text-[#059669]" : "text-gray-600"
-                }`}
-            >
-              Blog
-            </Link>
-            <Link
-              href="/our-story"
-              className={`text-sm font-medium transition-colors hover:text-[#059669] ${isActive("/our-story") ? "text-[#059669]" : "text-gray-600"
-                }`}
-            >
-              Our Story
-            </Link>
-          </div>
-
-          {/* Auth Buttons / Profile Dropdown */}
-          <div className="hidden md:flex items-center space-x-6">
-            {!user ? (
-              <>
-                <Link
-                  href="/login"
-                  className="text-gray-900 hover:text-[#059669] px-4 py-2 text-sm font-semibold transition-colors"
-                >
-                  Log In
-                </Link>
-                <Link
-                  href="/signup"
-                  className="bg-[#10B981] hover:bg-[#059669] text-white px-6 py-2.5 rounded-full text-sm font-semibold shadow-sm hover:shadow-md transition-all transform hover:-translate-y-0.5"
-                >
-                  Get Started
-                </Link>
-              </>
-            ) : (
-              <div className="relative" ref={dropdownRef}>
-                <button
-                  onClick={() => setIsProfileOpen(!isProfileOpen)}
-                  className="flex items-center gap-3 group px-2 py-1.5 rounded-xl hover:bg-gray-50 transition-all border border-transparent hover:border-gray-100"
-                >
-                  <div className="w-9 h-9 rounded-full bg-emerald-100 flex items-center justify-center text-emerald-600 font-bold border border-white shadow-sm overflow-hidden shrink-0">
-                    {profileImage ? (
-                      <Image src={profileImage} alt={displayName} width={36} height={36} className="w-full h-full object-cover" />
-                    ) : (
-                      displayName.charAt(0).toUpperCase()
-                    )}
-                  </div>
-                  <div className="text-left hidden lg:block">
-                    <p className="text-xs font-bold text-gray-900 leading-tight truncate max-w-[100px]">{displayName}</p>
-                    <p className="text-[10px] text-gray-400 font-bold uppercase tracking-wider">{user.role}</p>
-                  </div>
-                  <ChevronDown className={`w-4 h-4 text-gray-400 transition-transform ${isProfileOpen ? 'rotate-180' : ''}`} />
-                </button>
-
-                {isProfileOpen && (
-                  <div className="absolute right-0 mt-3 w-56 bg-white rounded-2xl shadow-[0_10px_40px_-10px_rgba(0,0,0,0.15)] border border-gray-100 py-2 z-50 animate-in fade-in zoom-in-95 origin-top-right">
-                    <div className="px-4 py-3 border-b border-gray-50 mb-1">
-                      <p className="text-[10px] text-gray-400 font-bold uppercase tracking-widest mb-0.5">Account</p>
-                      <p className="text-sm text-gray-900 font-bold truncate">{user.email}</p>
-                    </div>
-
-                    <Link
-                      href={dashboardPath}
-                      className="flex items-center gap-2 px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"
-                      onClick={() => setIsProfileOpen(false)}
-                    >
-                      <LayoutDashboard className="w-4 h-4" />
-                      Dashboard
-                    </Link>
-
-                    <button
-                      onClick={handleLogout}
-                      className="w-full flex items-center gap-2 px-4 py-2.5 text-sm font-medium text-red-600 hover:bg-red-50 transition-colors"
-                    >
-                      <LogOut className="w-4 h-4" />
-                      Sign Out
-                    </button>
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
-
-          {/* Mobile menu button */}
-          <div className="flex items-center md:hidden">
-            <button
-              onClick={() => setIsOpen(!isOpen)}
-              className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none"
-            >
-              <span className="sr-only">Open main menu</span>
-              {!isOpen ? (
-                <svg
-                  className="block h-6 w-6"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M4 6h16M4 12h16M4 18h16"
-                  />
-                </svg>
-              ) : (
-                <svg
-                  className="block h-6 w-6"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M6 18L18 6M6 6l12 12"
-                  />
-                </svg>
-              )}
-            </button>
-          </div>
-        </div>
-      </div>
-
-      {/* Mobile menu */}
-      {isOpen && (
-        <div className="md:hidden bg-white border-b border-gray-100 animate-in slide-in-from-top-5">
-          <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
-            <Link
-              href="/explore"
-              className={`block px-3 py-2 rounded-md text-base font-medium ${isActive("/explore")
-                ? "bg-green-50 text-[#059669]"
-                : "text-gray-700 hover:text-[#059669] hover:bg-gray-50"
-                }`}
-            >
-              Explore
-            </Link>
-            <Link
-              href="/how-it-works"
-              className={`block px-3 py-2 rounded-md text-base font-medium ${isActive("/how-it-works")
-                ? "bg-green-50 text-[#059669]"
-                : "text-gray-700 hover:text-[#059669] hover:bg-gray-50"
-                }`}
-            >
-              How it Works
-            </Link>
-            <Link
-              href="/blog"
-              className={`block px-3 py-2 rounded-md text-base font-medium ${isActive("/blog")
-                ? "bg-green-50 text-[#059669]"
-                : "text-gray-700 hover:text-[#059669] hover:bg-gray-50"
-                }`}
-            >
-              Blog
-            </Link>
-            <Link
-              href="/our-story"
-              className={`block px-3 py-2 rounded-md text-base font-medium ${isActive("/our-story")
-                ? "bg-green-50 text-[#059669]"
-                : "text-gray-700 hover:text-[#059669] hover:bg-gray-50"
-                }`}
-            >
-              Our Story
-            </Link>
-          </div>
-          <div className="pt-4 pb-4 border-t border-gray-200">
-            {!user ? (
-              <div className="flex flex-col px-4 space-y-3">
-                <Link
-                  href="/login"
-                  className="block w-full text-center px-4 py-3 border border-gray-200 rounded-lg text-base font-medium text-gray-700 hover:bg-gray-50"
-                  onClick={() => setIsOpen(false)}
-                >
-                  Log In
-                </Link>
-                <Link
-                  href="/signup"
-                  className="block w-full text-center px-4 py-3 border border-transparent rounded-lg text-base font-medium text-white bg-[#10B981] hover:bg-[#059669]"
-                  onClick={() => setIsOpen(false)}
-                >
-                  Get Started
-                </Link>
-              </div>
-            ) : (
-              <div className="px-4 space-y-3">
-                <div className="flex items-center gap-3 px-2 py-2">
-                  <div className="w-10 h-10 rounded-full bg-emerald-100 flex items-center justify-center text-emerald-600 font-bold border border-white overflow-hidden shadow-sm">
-                    {profileImage ? (
-                      <Image src={profileImage} alt={displayName} width={40} height={40} className="w-full h-full object-cover" />
-                    ) : (
-                      displayName.charAt(0).toUpperCase()
-                    )}
-                  </div>
-                  <div>
-                    <p className="text-sm font-bold text-gray-900">{displayName}</p>
-                    <p className="text-xs text-gray-500">{user.email}</p>
-                  </div>
-                </div>
-                <Link
-                  href={dashboardPath}
-                  className="block w-full px-4 py-3 rounded-lg text-base font-medium text-gray-700 hover:bg-gray-50"
-                  onClick={() => setIsOpen(false)}
-                >
-                  Go to Dashboard
-                </Link>
-                <button
-                  onClick={handleLogout}
-                  className="block w-full text-left px-4 py-3 rounded-lg text-base font-medium text-red-600 hover:bg-red-50"
-                >
-                  Sign Out
-                </button>
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-    </nav>
-  );
-}
+"use client";
+
+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, 
+  ChevronDown,
+  User as UserIcon
+} from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+
+import NoillinIcon from "./NoillinIcon";
+import { Button } from "./ui/button";
+
+import { useAuthStore } from "@/store/auth.store";
+import api from "@/lib/axios.client";
+
+export default function Navbar() {
+  const pathname = usePathname();
+  const router = useRouter();
+  const { user, clearAuth } = useAuthStore();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isProfileOpen, setIsProfileOpen] = useState(false);
+  const [profile, setProfile] = useState<{ fullName?: string; profileImageUrl?: string } | null>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (user) {
+      api.get("/profile/get_profile")
+        .then((res) => setProfile(res.data.data))
+        .catch(() => { });
+    }
+  }, [user]);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsProfileOpen(false);
+      }
+    }
+    if (isProfileOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isProfileOpen]);
+
+  const handleLogout = async () => {
+    try {
+      await api.post("/auth/logout");
+    } catch (e) {
+      console.error("Logout error", e);
+    } finally {
+      clearAuth();
+      router.push("/login");
+      setIsMenuOpen(false);
+    }
+  };
+
+  const navLinks = [
+    { name: "Home", href: "/" },
+    { name: "Gigs", href: "/gig-list" },
+    { name: "About", href: "#" },
+    { name: "Support", href: "#" }
+  ];
+
+  const displayName = profile?.fullName || user?.fullName || user?.email?.split("@")[0] || "User";
+  const profileImage = profile?.profileImageUrl || user?.profileImageUrl || user?.profileImage;
+  const dashboardPath = user?.role === "INFLUENCER" ? "/influencer-dashboard" : "/brand-dashboard";
+
+  return (
+    <nav 
+      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 ease-in-out overflow-hidden ${
+        isMenuOpen ? "rounded-[2rem] h-auto" : "rounded-full h-[72px] sm:h-[84px]"
+      }`}
+    >
+      <div className="mx-auto px-4 sm:px-8 h-[72px] sm:h-[84px] flex items-center justify-between">
+        <motion.div
+          initial={{ opacity: 0, x: -20 }}
+          animate={{ opacity: 1, x: 0 }}
+          className="flex items-center"
+        >
+          <NoillinIcon />
+        </motion.div>
+
+        {/* Desktop Nav Links */}
+        <div className="hidden lg:flex items-center gap-10 text-[11px] font-bold text-slate-500 uppercase tracking-widest">
+          {navLinks.map((item) => {
+            const isActive = item.href !== "#" && pathname === item.href;
+            return (
+              <Link key={item.name} href={item.href} className={`transition-colors relative group ${isActive ? "text-emerald-600" : "hover:text-emerald-600"}`}>
+                {item.name}
+                <span className={`absolute -bottom-1 left-0 h-0.5 bg-emerald-500 transition-all ${isActive ? "w-full" : "w-0 group-hover:w-full"}`} />
+              </Link>
+            );
+          })}
+        </div>
+
+        <motion.div
+          initial={{ opacity: 0, x: 20 }}
+          animate={{ opacity: 1, x: 0 }}
+          className="flex items-center gap-2 sm:gap-4"
+        >
+          {!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">
+                  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">
+                  Get Started
+                </Button>
+              </Link>
+            </>
+          ) : (
+            <div className="relative" ref={dropdownRef}>
+              <button
+                onClick={() => setIsProfileOpen(!isProfileOpen)}
+                className="flex items-center gap-3 group px-2 py-1 sm:py-1.5 rounded-full hover:bg-slate-50 transition-all border border-transparent hover:border-slate-100"
+              >
+                <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-emerald-100 flex items-center justify-center text-emerald-600 font-bold border-2 border-white shadow-sm overflow-hidden shrink-0">
+                  {profileImage ? (
+                    <Image src={profileImage} alt={displayName} width={40} height={40} className="w-full h-full object-cover" />
+                  ) : (
+                    displayName.charAt(0).toUpperCase()
+                  )}
+                </div>
+                <div className="text-left hidden sm:block">
+                  <p className="text-xs font-bold text-slate-900 leading-tight truncate max-w-[100px]">{displayName}</p>
+                  <p className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">{user.role}</p>
+                </div>
+                <ChevronDown className={`w-4 h-4 text-slate-400 transition-transform hidden sm:block ${isProfileOpen ? 'rotate-180' : ''}`} />
+              </button>
+
+              <AnimatePresence>
+                {isProfileOpen && (
+                  <motion.div
+                    initial={{ opacity: 0, y: 10, scale: 0.95 }}
+                    animate={{ opacity: 1, y: 0, scale: 1 }}
+                    exit={{ opacity: 0, y: 10, scale: 0.95 }}
+                    className="absolute right-0 mt-4 w-64 bg-white rounded-3xl shadow-[0_20px_50px_-10px_rgba(0,0,0,0.15)] border border-slate-100 py-3 z-50 origin-top-right"
+                  >
+                    <div className="px-5 py-4 border-b border-slate-50 mb-2">
+                      <p className="text-[10px] text-slate-400 font-bold uppercase tracking-widest mb-1">Signed in as</p>
+                      <p className="text-sm text-slate-900 font-bold truncate">{user.email}</p>
+                    </div>
+
+                    <Link
+                      href={dashboardPath}
+                      className="flex items-center gap-3 px-5 py-3 text-sm font-bold text-slate-600 hover:bg-slate-50 hover:text-emerald-600 transition-all"
+                      onClick={() => setIsProfileOpen(false)}
+                    >
+                      <LayoutDashboard className="w-4 h-4" />
+                      Dashboard
+                    </Link>
+
+                    <Link
+                      href="/settings"
+                      className="flex items-center gap-3 px-5 py-3 text-sm font-bold text-slate-600 hover:bg-slate-50 hover:text-emerald-600 transition-all"
+                      onClick={() => setIsProfileOpen(false)}
+                    >
+                      <UserIcon className="w-4 h-4" />
+                      Settings
+                    </Link>
+
+                    <button
+                      onClick={handleLogout}
+                      className="w-full flex items-center gap-3 px-5 py-3 text-sm font-bold text-red-500 hover:bg-red-50 transition-all"
+                    >
+                      <LogOut className="w-4 h-4" />
+                      Sign Out
+                    </button>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+          )}
+          
+          {/* Mobile Menu Toggle */}
+          <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"
+          >
+            {isMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
+          </button>
+        </motion.div>
+      </div>
+
+      {/* Mobile Menu Overlay */}
+      <AnimatePresence>
+        {isMenuOpen && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: "auto", opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            className="lg:hidden overflow-hidden bg-white border-t border-slate-100 rounded-b-[2rem] px-6"
+          >
+            <div className="flex flex-col gap-6 py-8">
+              {navLinks.map((item) => (
+                <Link 
+                  key={item.name} 
+                  href={item.href} 
+                  onClick={() => setIsMenuOpen(false)}
+                  className="text-lg font-bold text-slate-900 hover:text-emerald-600 transition-colors"
+                >
+                  {item.name}
+                </Link>
+              ))}
+              <hr className="border-slate-100" />
+              {!user ? (
+                <Link href="/login" onClick={() => setIsMenuOpen(false)}>
+                  <Button variant="outline" className="w-full h-14 rounded-2xl font-bold text-slate-900">
+                    Sign In
+                  </Button>
+                </Link>
+              ) : (
+                <div className="flex flex-col gap-4">
+                  <Link 
+                    href={dashboardPath}
+                    onClick={() => setIsMenuOpen(false)}
+                    className="flex items-center gap-3 text-lg font-bold text-slate-900"
+                  >
+                    <LayoutDashboard className="w-5 h-5 text-emerald-500" />
+                    Dashboard
+                  </Link>
+                  <button 
+                    onClick={handleLogout}
+                    className="flex items-center gap-3 text-lg font-bold text-red-500"
+                  >
+                    <LogOut className="w-5 h-5" />
+                    Sign Out
+                  </button>
+                </div>
+              )}
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </nav>
+  );
+}
diff --git a/apps/web/components/SetupNavbar.tsx b/apps/web/components/SetupNavbar.tsx
index 66822d8..30a1312 100644
--- a/apps/web/components/SetupNavbar.tsx
+++ b/apps/web/components/SetupNavbar.tsx
@@ -26,9 +26,9 @@ export default function SetupNavbar({ step = 3, mode = "onboarding" }: SetupNavb
   const currentStep = steps.find((s) => s.id === step) || steps[2];
 
   return (
-    <nav className="fixed top-0 w-full z-50 bg-white/80 backdrop-blur-md border-b border-gray-100 shadow-sm">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex justify-between items-center h-16">
+    <nav className="fixed top-4 left-1/2 -translate-x-1/2 w-[95%] max-w-7xl z-50 bg-white/80 backdrop-blur-md border border-gray-100 rounded-3xl shadow-xl overflow-hidden">
+      <div className="mx-auto px-6 sm:px-10">
+        <div className="flex justify-between items-center h-14">
           {/* Logo Section */}
           <div className="flex items-center">
             <NoillinIcon />
@@ -37,7 +37,7 @@ export default function SetupNavbar({ step = 3, mode = "onboarding" }: SetupNavb
       </div>
 
       {/* Progress Bar */}
-      <div className="h-1.5 w-full bg-gray-100/50 overflow-hidden">
+      <div className="h-1.5 w-full bg-gray-100/50">
         <motion.div
           className="h-full bg-linear-to-r from-emerald-400 via-teal-500 to-[#10B981] animate-progress-flow"
           initial={{ width: 0 }}
diff --git a/apps/web/package.json b/apps/web/package.json
index 5dff749..bee3540 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.1006.0",
diff --git a/apps/web/public/hero-bg-v2.png b/apps/web/public/hero-bg-v2.png
new file mode 100644
index 0000000..4768b8b
Binary files /dev/null and b/apps/web/public/hero-bg-v2.png differ
diff --git a/apps/web/public/hero-bg.png b/apps/web/public/hero-bg.png
new file mode 100644
index 0000000..ea4017a
Binary files /dev/null and b/apps/web/public/hero-bg.png differ
diff --git a/apps/worker/package.json b/apps/worker/package.json
index 7900901..406babc 100644
--- a/apps/worker/package.json
+++ b/apps/worker/package.json
@@ -8,6 +8,7 @@
     "start": "tsx src/main.ts",
     "build": "tsc",
     "start:prod": "node dist/main.js",
+    "typecheck": "tsc --noEmit",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
diff --git a/package.json b/package.json
index ca55ec6..25db4e8 100644
--- a/package.json
+++ b/package.json
@@ -5,9 +5,10 @@
   "main": "index.js",
   "type": "module",
   "scripts": {
-    "dev": "pnpm -r dev",
+    "dev": "pnpm -r dev ",
     "build": "pnpm -r build",
     "lint": "pnpm -r lint",
+    "typecheck": "pnpm -r typecheck",
     "test": "echo \"Error: no test specified\" && exit 1",
     "prepare": "husky"
   },
@@ -30,7 +31,7 @@
   },
   "lint-staged": {
     "*.{ts,tsx,js,jsx}": [
-      "eslint --fix"
+      "eslint --fix --max-warnings 0"
     ],
     "*.{json,md,yml,yaml}": [
       "prettier --write"
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 2665139..f754677 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -5,7 +5,8 @@
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "build": "tsc"
+    "build": "tsc",
+    "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
     "typescript": "^5.9.3"