diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index b0a4807..2dabedc 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -88,58 +88,76 @@ export function Navbar() {
       {/* Mobile Menu Overlay */}
       <div 
         className={cn(
-          "fixed inset-0 bg-background/98 z-[200] lg:hidden flex flex-col p-8 transition-all duration-500",
+          "fixed inset-0 z-[200] lg:hidden flex flex-col p-8 transition-all duration-500 overflow-hidden",
           mobileMenuOpen ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-full pointer-events-none"
         )}
       >
-        <div className="flex justify-between items-center mb-16">
-          <div className="flex flex-col">
-            <span className="font-headline text-3xl font-black text-white tracking-tighter">AYDOĞAN</span>
-            <span className="font-label text-xs text-primary font-bold tracking-[0.3em] uppercase">Nakliyat & Vinç</span>
-          </div>
-          <button 
-            onClick={() => setMobileMenuOpen(false)}
-            className="p-4 bg-white/5 text-white"
-          >
-            <X size={32} />
-          </button>
+        {/* Background Image for Mobile Menu */}
+        <div className="absolute inset-0 z-0">
+          <Image 
+            src="https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=2070&auto=format&fit=crop"
+            alt="Mobile menu background"
+            fill
+            sizes="100vw"
+            className="object-cover grayscale brightness-[0.15]"
+          />
+          <div className="absolute inset-0 bg-gradient-to-b from-primary/10 via-background/95 to-background" />
         </div>
 
-        <div className="flex flex-col gap-8">
-          {NAV_LINKS.map((link, idx) => (
-            <Link 
-              key={link.name}
-              href={link.href}
+        <div className="relative z-10 flex flex-col h-full">
+          <div className="flex justify-between items-center mb-16">
+            <div className="flex flex-col">
+              <span className="font-headline text-3xl font-black text-white tracking-tighter">AYDOĞAN</span>
+              <span className="font-label text-xs text-primary font-bold tracking-[0.3em] uppercase">Nakliyat & Vinç</span>
+            </div>
+            <button 
               onClick={() => setMobileMenuOpen(false)}
-              className={cn(
-                "font-headline text-4xl font-bold uppercase tracking-tighter transition-all hover:translate-x-4",
-                pathname === link.href ? "text-primary" : "text-white/60"
-              )}
-              style={{ transitionDelay: `${idx * 50}ms` }}
+              className="p-4 bg-white/5 text-white rounded-full hover:bg-primary transition-colors"
             >
-              {link.name}
-            </Link>
-          ))}
-        </div>
+              <X size={24} />
+            </button>
+          </div>
 
-        <div className="mt-auto flex flex-col gap-4">
-          <button 
-            onClick={() => {
-              handleWhatsApp();
-              setMobileMenuOpen(false);
-            }}
-            className="w-full bg-primary text-on-primary font-headline font-black uppercase tracking-widest py-6 text-xl flex items-center justify-center gap-3 active:scale-95 transition-all"
-          >
-            <MessageCircle className="w-6 h-6" />
-            HIZLI TEKLİF AL
-          </button>
-          <a 
-            href={`tel:${siteConfig.contact.phone.replace(/\s+/g, '')}`}
-            className="w-full border border-white/10 text-white font-headline font-bold uppercase tracking-widest py-6 text-lg text-center flex items-center justify-center gap-3"
-          >
-            <Phone className="w-5 h-5" />
-            {siteConfig.contact.phone}
-          </a>
+          <div className="flex flex-col gap-8">
+            {NAV_LINKS.map((link, idx) => (
+              <Link 
+                key={link.name}
+                href={link.href}
+                onClick={() => setMobileMenuOpen(false)}
+                className={cn(
+                  "font-headline text-4xl font-bold uppercase tracking-tighter transition-all hover:translate-x-4 flex items-center gap-4 group",
+                  pathname === link.href ? "text-primary" : "text-white/60"
+                )}
+                style={{ transitionDelay: `${idx * 50}ms` }}
+              >
+                <div className={cn(
+                  "w-2 h-2 bg-primary rounded-full transition-all group-hover:scale-150",
+                  pathname === link.href ? "opacity-100" : "opacity-0 group-hover:opacity-100"
+                )} />
+                {link.name}
+              </Link>
+            ))}
+          </div>
+
+          <div className="mt-auto flex flex-col gap-4">
+            <button 
+              onClick={() => {
+                handleWhatsApp();
+                setMobileMenuOpen(false);
+              }}
+              className="w-full bg-primary text-on-primary font-headline font-black uppercase tracking-widest py-6 text-xl flex items-center justify-center gap-3 active:scale-95 transition-all shadow-[0_20px_50px_rgba(234,179,8,0.2)]"
+            >
+              <MessageCircle className="w-6 h-6" />
+              HIZLI TEKLİF AL
+            </button>
+            <a 
+              href={`tel:${siteConfig.contact.phone.replace(/\s+/g, '')}`}
+              className="w-full border border-white/10 bg-white/5 backdrop-blur-sm text-white font-headline font-bold uppercase tracking-widest py-6 text-lg text-center flex items-center justify-center gap-3 hover:bg-white/10 transition-all"
+            >
+              <Phone className="w-5 h-5" />
+              {siteConfig.contact.phone}
+            </a>
+          </div>
         </div>
       </div>
     </nav>