diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index ae1c454..a679d08 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -17,7 +17,7 @@ import { NavLink } from '@/components/NavLink'
 
 function MobileNavLink({ href, children }) {
   return (
-    <PopoverButton as={Link} href={href} className="block w-full p-2">
+    <PopoverButton as={Link} href={href} className="block w-full p-3 font-semibold text-base hover:bg-white/10 rounded-md transition-colors duration-200">
       {children}
     </PopoverButton>
   )
@@ -65,14 +65,14 @@ function MobileNavigation() {
       />
       <PopoverPanel
         transition
-        className="absolute inset-x-0 top-full z-50 mt-4 flex origin-top flex-col rounded-lg bg-transparent border border-slate-200/20 p-4 text-lg tracking-tight text-bg-darkbrown shadow-xl ring-1 ring-slate-900/5 data-[closed]:scale-95 data-[closed]:opacity-0 data-[enter]:duration-150 data-[leave]:duration-100 data-[enter]:ease-out data-[leave]:ease-in"
+        className="absolute inset-x-0 top-full z-50 mt-4 flex origin-top flex-col rounded-lg bg-white/95 backdrop-blur-sm border border-slate-200 p-5 text-lg tracking-tight text-bg-darkbrown shadow-2xl ring-1 ring-slate-900/10 data-[closed]:scale-95 data-[closed]:opacity-0 data-[enter]:duration-150 data-[leave]:duration-100 data-[enter]:ease-out data-[leave]:ease-in"
       >
         <MobileNavLink href="/">HOME</MobileNavLink>
         <MobileNavLink href="/story">STORY</MobileNavLink>
         <MobileNavLink href="/experiences">EXPERIENCES</MobileNavLink>
         <MobileNavLink href="/dahabiyas">DAHABIYAS</MobileNavLink>
         <MobileNavLink href="/itinerary">ITINERARY</MobileNavLink>
-        <hr className="m-2 border-slate-300/40" />
+        <hr className="my-3 border-slate-300/60" />
         <MobileNavLink href="/contact">Book Now</MobileNavLink>
       </PopoverPanel>
     </Popover>