diff --git a/public/videos/.DS_Store b/public/videos/.DS_Store
index 1df887e..5008ddf 100644
Binary files a/public/videos/.DS_Store and b/public/videos/.DS_Store differ
diff --git a/src/components/Button.jsx b/src/components/Button.jsx
index 4a56105..1092b77 100644
--- a/src/components/Button.jsx
+++ b/src/components/Button.jsx
@@ -29,6 +29,12 @@ const variantStyles = {
     white:
       'ring-slate-700 text-white hover:ring-slate-300 active:ring-slate-200 active:text-slate-100 focus-visible:outline-white',
   },
+  link: {
+    slate:
+      'text-slate-900 hover:text-slate-700 focus-visible:outline-gold-600 border-b border-slate-900 hover:border-slate-700',
+    white:
+      'text-white hover:text-slate-300 focus-visible:outline-white border-b border-white hover:border-slate-300',
+  },
 }
 
 export function Button({ className, ...props }) {
@@ -43,7 +49,9 @@ export function Button({ className, ...props }) {
         ? variantStyles.solid[props.color]
         : props.variant === 'solidNoRounded'
           ? variantStyles.solidNoRounded[props.color]
-          : undefined,
+          : props.variant === 'link'
+            ? variantStyles.link[props.color]
+            : undefined,
     className,
   )
 
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index e5e4d15..7471230 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -53,18 +53,18 @@ function MobileNavigation() {
   return (
     <Popover>
       <PopoverButton
-        className="relative z-10 flex h-6 w-6 items-center justify-center ui-not-focus-visible:outline-none"
+        className="relative z-50 flex h-8 w-8 items-center justify-center ui-not-focus-visible:outline-none"
         aria-label="Toggle Navigation"
       >
         {({ open }) => <MobileNavIcon open={open} />}
       </PopoverButton>
       <PopoverBackdrop
         transition
-        className="fixed inset-0 bg-slate-50/50 duration-150 data-[closed]:opacity-0 data-[enter]:ease-out data-[leave]:ease-in"
+        className="fixed inset-0 z-40 bg-slate-900/20 backdrop-blur-sm duration-150 data-[closed]:opacity-0 data-[enter]:ease-out data-[leave]:ease-in"
       />
       <PopoverPanel
         transition
-        className="absolute inset-x-0 top-full mt-4 flex origin-top flex-col rounded-lg bg-bg-sand  p-4 text-lg tracking-tight text-nav-dark 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-bg-sand border border-slate-200/20 p-4 text-lg tracking-tight text-nav-dark 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"
       >
         <MobileNavLink href="/">HOME</MobileNavLink>
         <MobileNavLink href="/story">STORY</MobileNavLink>
@@ -80,14 +80,14 @@ function MobileNavigation() {
 
 export function Header() {
   return (
-    <header className="fixed top-0 left-0 right-0 z-50 bg-bg-sand backdrop-blur-sm py-4">
+    <header className="fixed top-0 left-0 right-0 z-50 bg-bg-sand/95 backdrop-blur-sm border-b border-slate-200/20 shadow-sm">
       <Container>
-        <nav className="relative z-50 flex justify-between">
-          <div className="flex items-center md:gap-x-12">
-            <Link href="/" aria-label="Home" className="overflow-visible">
-              <Logo className="h-8 w-auto max-w-none sm:h-9 md:h-10 lg:h-11 xl:h-12" />
+        <nav className="relative z-50 flex items-center justify-between py-3 lg:py-4">
+          <div className="flex items-center md:gap-x-8 lg:gap-x-12">
+            <Link href="/" aria-label="Home" className="overflow-visible flex-shrink-0">
+              <Logo className="h-7 w-auto max-w-none sm:h-8 md:h-9 lg:h-10" />
             </Link>
-            <div className="hidden md:flex md:gap-x-6">
+            <div className="hidden md:flex md:gap-x-4 lg:gap-x-6">
               <NavLink href="/">HOME</NavLink>
               <NavLink href="/story">STORY</NavLink>
               <NavLink href="/experiences">EXPERIENCES</NavLink>
@@ -95,13 +95,13 @@ export function Header() {
               <NavLink href="/itinerary">ITINERARY</NavLink>
             </div>
           </div>
-          <div className="flex items-center gap-x-5 md:gap-x-8">
-            <Button href="/contact" variant="solidNoRounded" color="bookNow">
-              <span className="tracking-wide">
+          <div className="flex items-center gap-x-3 md:gap-x-4">
+            <Button href="/contact" variant="solidNoRounded" color="bookNow" className="text-xs sm:text-sm">
+              <span className="tracking-wide font-medium">
                 Book Now
               </span>
             </Button>
-            <div className="-mr-1 md:hidden">
+            <div className="md:hidden">
               <MobileNavigation />
             </div>
           </div>
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index b6b9d44..cf161f7 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -5,21 +5,32 @@ import Image from 'next/image'
 
 export function Hero() {
   return (
-    <div className="mx-auto max-w-7xl px-6 lg:px-8 -z-10 -mt-10">
+    <div className=" max-w-8xl px-6 lg:px-8 -z-10 -mt-5 mx-0 bg-bg-sand pb-24">
       {/* Background Image with opacity to show sand background */}
-      <div className="relative overflow-hidden pt-16">
-        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+      <div className="relative overflow-hidden">
+        <div className="mx-auto max-w-7xl">
           <img
             alt="App screenshot"
             src="/images/hero.jpg"
-            width={2432}
-            height={1442}
+            width={1360}
+            height={600}
           />
-          <div aria-hidden="true" className="relative">
-            <div className="absolute -inset-x-20 bottom-0 bg-linear-to-t from-white pt-[7%]" />
-          </div>
         </div>
       </div> 
+      <div className="max-w-7xl ml-3 px-6 lg:px-8 mx-0">
+          <h2 className="mt-8 text-2xl font-medium tracking-tight text-bg-darkbrown sm:text-3xl">
+            Nile Cruises, Reimagined.
+          </h2>
+          <p className="mt-4 text-lg/8 text-gray-600 font-extralight leading-tight">
+            Veda welcomes you into her home providing unique wellness cruises blending cultural authentic experiences with unparalleled freedom and privacy.<br/>
+            Our organic cuisine, cultural activities and dedicated warm hearted crew will make your veda cruise an unforgettable experience.
+          </p>
+          <button className="mt-4 text-sm lg:text-sm tracking-wide">
+            <Button variant="link" color="slate">
+              Learn More
+            </Button>
+          </button>
+        </div>
     </div>
   )
 }