diff --git a/public/images/waterbg.png b/public/images/waterbg.png
new file mode 100644
index 0000000..0842c96
Binary files /dev/null and b/public/images/waterbg.png differ
diff --git a/public/images/waterbg2.jpg b/public/images/waterbg2.jpg
new file mode 100644
index 0000000..c074766
Binary files /dev/null and b/public/images/waterbg2.jpg differ
diff --git a/public/images/waterbg2.png b/public/images/waterbg2.png
new file mode 100644
index 0000000..738325e
Binary files /dev/null and b/public/images/waterbg2.png differ
diff --git a/public/images/waterbg3.png b/public/images/waterbg3.png
new file mode 100644
index 0000000..42bf593
Binary files /dev/null and b/public/images/waterbg3.png differ
diff --git a/src/app/layout.jsx b/src/app/layout.jsx
index 1852e4a..e472169 100644
--- a/src/app/layout.jsx
+++ b/src/app/layout.jsx
@@ -35,13 +35,14 @@ export default function RootLayout({ children }) {
     <html
       lang="en"
       className={clsx(
-        'h-full scroll-smooth bg-bg-sand antialiased',
+        'h-full scroll-smooth antialiased',
         inter.variable,
         lexend.variable,
         vollkorn.variable,
       )}
+      style={{backgroundImage: 'url(/images/waterbg2.jpg)', backgroundSize: 'cover', backgroundPosition: 'center', backgroundAttachment: 'fixed'}}
     >
-      <body className="flex h-full flex-col pt-20 bg-bg-sand">{children}</body>
+      <body className="flex h-full flex-col pt-20" style={{backgroundColor: 'transparent'}}>{children}</body>
     </html>
   )
 }
diff --git a/src/components/Boat.jsx b/src/components/Boat.jsx
index a00d323..f03fe48 100644
--- a/src/components/Boat.jsx
+++ b/src/components/Boat.jsx
@@ -100,7 +100,7 @@ function TestimonialCard({
     <motion.div
       ref={ref}
       {...props}
-      className="w-72 shrink-0 snap-start scroll-ml-(--scroll-padding) bg-bg-sand overflow-hidden sm:w-80 lg:w-96"
+      className="w-72 shrink-0 snap-start scroll-ml-(--scroll-padding) bg-transparent overflow-hidden sm:w-80 lg:w-96"
       style={{ aspectRatio: '360/460' }}
     >
       {/* Image Section */}
@@ -162,7 +162,7 @@ export function Boat() {
   }
 
   return (
-    <div className="pt-12 pb-12 bg-bg-sand">
+    <div className="pt-12 pb-12 bg-transparent">
       <Container>
         <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-start">
           {/* Text Content - Left Side */}
diff --git a/src/components/CNNVIDEO.jsx b/src/components/CNNVIDEO.jsx
index 3c341ae..eaf843b 100644
--- a/src/components/CNNVIDEO.jsx
+++ b/src/components/CNNVIDEO.jsx
@@ -8,7 +8,7 @@ import { H2, P, PS, H3, PXS, H4 } from '@/components/text'
 const CnnVideo = () => {
     return (
       <Container>
-        <div className="bg-bg-sand mx-auto max-w-7xl md:text-center pt-12">
+        <div className="bg-transparent mx-auto max-w-7xl md:text-center pt-12">
           <H2  className="">
           VEDA ON CNN 
           </H2>
@@ -16,7 +16,7 @@ const CnnVideo = () => {
           CNN Travel visited the Veda boats to give you a first hand impression of what awaits you when cruising the Nile.
           </P>
         </div>
-      <div className="video-container mt-12 bg-bg-sand">
+      <div className="video-container mt-12 bg-transparent">
         <iframe
           src="https://player.vimeo.com/video/371621672?loop=1&muted=1"
           width="100%"
@@ -31,4 +31,4 @@ const CnnVideo = () => {
     );
   };
   
-  export default CnnVideo;
\ No newline at end of file
+  export default CnnVideo;
diff --git a/src/components/CallToAction.jsx b/src/components/CallToAction.jsx
index ffc21ac..e3a1970 100644
--- a/src/components/CallToAction.jsx
+++ b/src/components/CallToAction.jsx
@@ -9,7 +9,7 @@ export function CallToAction() {
   return (
     <section
       id="about"
-      className="relative overflow-hidden bg-bg-sand py-16"
+      className="relative overflow-hidden bg-transparent py-16"
     >
       <Container className="relative">
         <div className="mx-auto max-w-3xl text-center">
diff --git a/src/components/CallToAction4.jsx b/src/components/CallToAction4.jsx
index 117943f..27d5c51 100644
--- a/src/components/CallToAction4.jsx
+++ b/src/components/CallToAction4.jsx
@@ -6,7 +6,7 @@ export function CallToAction4() {
   return (
     <section
       id="about"
-      className="relative overflow-hidden bg-bg-sand pt-24 pb-12"
+      className="relative overflow-hidden bg-transparent pt-24 pb-12"
     >
       <Container className="relative">
         <div className="mx-auto max-w-6xl text-center">
diff --git a/src/components/Carousel.jsx b/src/components/Carousel.jsx
index c09c214..dabae1f 100644
--- a/src/components/Carousel.jsx
+++ b/src/components/Carousel.jsx
@@ -71,7 +71,7 @@ const MultiCardCarousel = () => {
   const displayCards = isMobile ? [cards[currentIndex]] : cards.slice(currentIndex, currentIndex + 3);
 
   return (
-    <div className="bg-bg-sand flex items-center justify-center py-16 lg:py-24 px-6">
+    <div className="bg-transparent flex items-center justify-center py-16 lg:py-24 px-6">
       <div className="w-full max-w-7xl ">
         <div className="text-left mx-auto max-w-7xl ">
           <H2 className="">
@@ -85,7 +85,7 @@ const MultiCardCarousel = () => {
           {cards.slice(0, 3).map((card, index) => (
             <div
               key={index}
-              className="relative overflow-hidden bg-bg-sand"
+              className="relative overflow-hidden bg-transparent"
             >
               <div className="aspect-[4/5] overflow-hidden">
                 <img
diff --git a/src/components/Experiences.jsx b/src/components/Experiences.jsx
index fdefce0..f57179d 100644
--- a/src/components/Experiences.jsx
+++ b/src/components/Experiences.jsx
@@ -3,7 +3,7 @@ import { H2, P , PS, PXS, H3, H4 } from "@/components/text";
 
 export function Experiences() {
   return (
-    <div className="bg-bg-sand  pb-12">
+    <div className="bg-transparent  pb-12">
       <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
         <div className=" grid grid-cols-1 gap-4 lg:grid-cols-8 lg:grid-rows-2">
           <div className="flex lg:col-span-5">
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index eaa14c6..5fd44f1 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -3,7 +3,7 @@ import { Logo } from '@/components/Logo'
 
 export function Footer() {
   return (
-    <footer className="bg-bg-sand border-gray-300 border-t-[1px]">
+    <footer className="bg-transparent border-gray-300 border-t-[1px]">
       <Container>
         <div className="flex items-center justify-between py-6">
           <Logo className="h-8 w-auto" />
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 7471230..fa8a0af 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -64,7 +64,7 @@ function MobileNavigation() {
       />
       <PopoverPanel
         transition
-        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"
+        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-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,7 +80,7 @@ function MobileNavigation() {
 
 export function Header() {
   return (
-    <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">
+    <header className="fixed top-0 left-0 right-0 z-50 bg-transparent backdrop-blur-sm border-b border-slate-200/20 shadow-sm">
       <Container>
         <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">
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index 816393d..4c07de6 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -7,7 +7,7 @@ import Image from 'next/image'
 
 export function Hero() {
   return (
-    <div className=" max-w-8xl px-6 lg:px-8 -z-10 -mt-5 mx-0 bg-bg-sand pb-12">
+    <div className=" max-w-8xl px-6 lg:px-8 -z-10 -mt-5 mx-0 bg-transparent pb-12">
       {/* Background Image with opacity to show sand background i changed the src for now bc its not uploaded to server*/}
       <div className="relative overflow-hidden">
         <div className="mx-auto max-w-7xl">
diff --git a/src/components/Route.jsx b/src/components/Route.jsx
index 3faf3b8..3fa6ed3 100644
--- a/src/components/Route.jsx
+++ b/src/components/Route.jsx
@@ -11,7 +11,7 @@ import { H2, P, PS, PXS, H3 , H4   } from '@/components/text'
 
 export default function Route() {
   return (
-    <div className="bg-bg-sand overflow-hidden pt-12 pb-24 px-6 lg:px-8">
+    <div className="bg-transparent overflow-hidden pt-12 pb-24 px-6 lg:px-8">
       <div className="mx-auto max-w-7xl ">
         <div className="grid grid-cols-1 gap-x-8 gap-y-4 lg:gap-y-16 lg:grid-cols-2 lg:items-start">
           <div className="lg:pr-4 lg:pt-4">
diff --git a/src/components/Testimonials.jsx b/src/components/Testimonials.jsx
index f24e640..b897c33 100644
--- a/src/components/Testimonials.jsx
+++ b/src/components/Testimonials.jsx
@@ -87,7 +87,7 @@ export function Testimonials() {
     <section
       id="testimonials"
       aria-label="What our customers are saying"
-      className="bg-bg-sand lg:pt-48 pt-8 pb-24"
+      className="bg-transparent lg:pt-48 pt-8 pb-24"
     >
       <Container>
         <div className="mx-auto max-w-5xl md:text-center">
@@ -123,7 +123,7 @@ export function Testimonials() {
                             {testimonial.author.role}
                           </div>
                         </div>
-                        <div className="overflow-hidden rounded-full bg-bg-sand">
+                        <div className="overflow-hidden rounded-full bg-transparent">
                           <img
                             className="h-14 w-14 object-cover"
                             src={testimonial.author.image}
