diff --git a/public/images/components/Boats.jsx b/public/images/components/Boats.jsx
index 9b2dc2b..91d0cb4 100644
--- a/public/images/components/Boats.jsx
+++ b/public/images/components/Boats.jsx
@@ -58,7 +58,7 @@ const people = [
 
 export default function Boats() {
     return (
-        <div className="bg-creme-600 py-24">
+        <div className="bg-bg-sand py-24">
             <div className="mx-auto grid max-w-7xl grid-cols-1 gap-x-8 gap-y-20 px-6 lg:px-8 xl:grid-cols-3">
                 <div className="mx-auto max-w-2xl lg:mx-0">
                     <h2 className="text-3xl font-bold tracking-tight text-gray-800 sm:text-4xl">Our team</h2>
diff --git a/public/images/components/Daha1.jsx b/public/images/components/Daha1.jsx
index 731bf99..c2dd16a 100644
--- a/public/images/components/Daha1.jsx
+++ b/public/images/components/Daha1.jsx
@@ -1,6 +1,6 @@
 export default function Example() {
     return (
-      <div className="relative isolate overflow-hidden bg-creme-600 py-24 sm:py-32">
+      <div className="relative isolate overflow-hidden bg-bg-sand py-24 sm:py-32">
         <img
           alt=""
           src="/images/daha1.jpg"
diff --git a/public/images/components/Daha2.jsx b/public/images/components/Daha2.jsx
index 4a53c0f..bef53c8 100644
--- a/public/images/components/Daha2.jsx
+++ b/public/images/components/Daha2.jsx
@@ -33,7 +33,7 @@ const categories = [
 
 export default function Example() {
   return (
-    <div className="bg-creme-600">
+    <div className="bg-bg-sand">
       <div className="mx-auto max-w-xl px-6 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
         <h2 className="text-2xl font-bold tracking-tight text-gray-900">DAHABIYAS</h2>
         <p className="mt-4 text-base text-gray-500">
diff --git a/public/images/components/Exp.jsx b/public/images/components/Exp.jsx
index f3b872c..a58226c 100644
--- a/public/images/components/Exp.jsx
+++ b/public/images/components/Exp.jsx
@@ -9,7 +9,7 @@ const features = [
   
   export default function Example() {
     return (
-      <div className="bg-creme-600">
+      <div className="bg-bg-sand">
         <div className="mt-24 relative mx-auto  max-w-7xl px-6 pb-16 sm:px-6 sm:pb-24 lg:px-8">
           <div className="mx-auto max-w-2xl text-center lg:max-w-4xl">
             <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">VEDA EXPERIENCES</h2>
diff --git a/public/images/components/Exp1.jsx b/public/images/components/Exp1.jsx
index 4954045..21ffe44 100644
--- a/public/images/components/Exp1.jsx
+++ b/public/images/components/Exp1.jsx
@@ -1,6 +1,6 @@
 export default function Example() {
     return (
-      <div className="relative isolate overflow-hidden bg-creme-600 py-24 sm:py-32">
+      <div className="relative isolate overflow-hidden bg-bg-sand py-24 sm:py-32">
         <img
           alt=""
           src="/images/daha1.jpg"
diff --git a/public/images/components/Exp2.jsx b/public/images/components/Exp2.jsx
index bc0edbd..e660566 100644
--- a/public/images/components/Exp2.jsx
+++ b/public/images/components/Exp2.jsx
@@ -2,7 +2,7 @@
   
   export  function Experience() {
     return (
-      <div className="bg-creme-600">
+      <div className="bg-bg-sand">
         <div aria-hidden="true" className="relative">
           <img
             alt=""
diff --git a/public/images/components/FreeflowVideo.jsx b/public/images/components/FreeflowVideo.jsx
index c98c1ec..d2172bb 100644
--- a/public/images/components/FreeflowVideo.jsx
+++ b/public/images/components/FreeflowVideo.jsx
@@ -8,7 +8,7 @@ const FFVid = () => {
         <section
       id="testimonials"
       aria-label="What our customers are saying"
-      className="bg-creme-600 pt-6 pb-24"
+      className="bg-bg-sand pt-6 pb-24"
     >
       <Container>
         <div className="mx-auto max-w-5xl md:text-center">
diff --git a/public/images/components/Iti1.jsx b/public/images/components/Iti1.jsx
index b45e807..b76d327 100644
--- a/public/images/components/Iti1.jsx
+++ b/public/images/components/Iti1.jsx
@@ -1,6 +1,6 @@
 export default function Example() {
     return (
-      <div className="relative isolate overflow-hidden bg-creme-600 py-24 sm:py-32">
+      <div className="relative isolate overflow-hidden bg-bg-sand py-24 sm:py-32">
         <img
           alt=""
           src="/images/iti.jpg"
diff --git a/public/images/components/Story.jsx b/public/images/components/Story.jsx
index 2c520f6..3e037fd 100644
--- a/public/images/components/Story.jsx
+++ b/public/images/components/Story.jsx
@@ -1,4 +1,5 @@
 import { CloudArrowUpIcon, LockClosedIcon, ServerIcon, SparklesIcon } from '@heroicons/react/20/solid'
+import { H2, P, H3,  } from './text'
 
 const features = [
 
@@ -6,7 +7,7 @@ const features = [
 
 export default function NewFeatures() {
   return (
-    <div className="overflow-hidden bg-creme-600 pb-0 pt-12 lg:pt-12">
+    <div className="overflow-hidden bg-bg-sand pb-0 pt-12 lg:pt-12">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
         <div className="flex items-start justify-end lg:justify-start lg:order-first">
@@ -19,17 +20,17 @@ export default function NewFeatures() {
         </div>
           <div className="lg:ml-auto lg:pl-4 lg:pt-0">
             <div className="lg:max-w-lg">
-              <p className="mt-2 text-3xl font-bold tracking-tight text-gray-800 sm:text-4xl">OUR STORY</p>
-              <p className="mt-4 text-xl leading-8 tracking-wide ITALIC font-normal text-gray-200">
+              <H2 className="mt-2">Our Story</H2>
+              <P className="mt-4 tracking-wide italic  text-gold-900">
               THE TALE OF SACRED ENERGIES OF THE NILE
-              </p>
-              <p className="mt-6 text-lg leading-7 font-light text-gray-500">
+              </P>
+              <P className="mt-6 ">
               Our founders, Isabelle Peeters and Kristof De Spiegeleer fell in love with the Nile and envisioned creating clean, unique, and high-energy boats for people to experience its sacred energies.
-              </p>
-              <p className="mt-6 text-lg leading-7 font-light text-gray-500">
+              </P>
+              <p className="mt-6 ">
               Their goal is to offer a sanctuary for the body, mind, and spirit, a safe space to open yourself to new experiences, and allow these sacred energies to enter your consciousness, helping you reconnect with your true essence.
               </p>
-              <p className="mt-4 text-lg leading-7 font-light text-gray-500">
+              <p className="mt-4">
               We are in unique times, marked by the energies of the Aquarian Age. As chaotic as these times may seem, they bring a shift in energies and an opportunity for transformation. The Nile is a powerful energy vortex, and we are here to help you align with its frequencies.
               </p>
             </div>
diff --git a/public/images/components/Story2.jsx b/public/images/components/Story2.jsx
index 1fd2951..bdaa9fc 100644
--- a/public/images/components/Story2.jsx
+++ b/public/images/components/Story2.jsx
@@ -5,7 +5,7 @@ const features = [
 
 export default function NewFeatures2() {
   return (
-    <div className="overflow-hidden bg-creme-600 pb-10 pt-0 lg:pt-10 lg:pb-24">
+    <div className="overflow-hidden bg-bg-sand pb-10 pt-0 lg:pt-10 lg:pb-24">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
           <div className="lg:order-first">
diff --git a/public/images/components/Team.jsx b/public/images/components/Team.jsx
index c76012b..7ce872e 100644
--- a/public/images/components/Team.jsx
+++ b/public/images/components/Team.jsx
@@ -28,7 +28,7 @@ const people = [
   
   export default function Team() {
     return (
-      <div className="bg-creme-600 py-12 md:py-32 lg:py-12">
+      <div className="bg-bg-sand py-12 md:py-32 lg:py-12">
         <div className="mx-auto grid max-w-7xl grid-cols-1 gap-x-8 gap-y-20 px-6 lg:px-8 xl:grid-cols-3">
           <div className="mx-auto max-w-2xl lg:mx-0">
             <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">OUR PEOPLE</h2>
diff --git a/public/images/components/Testimonials.jsx b/public/images/components/Testimonials.jsx
index 69577a6..e073668 100644
--- a/public/images/components/Testimonials.jsx
+++ b/public/images/components/Testimonials.jsx
@@ -122,7 +122,7 @@ export function Testimonials() {
                             {testimonial.author.role}
                           </div>
                         </div>
-                        <div className="overflow-hidden rounded-full bg-creme-600">
+                        <div className="overflow-hidden rounded-full bg-bg-sand">
                           <img
                             className="h-14 w-14 object-cover"
                             src={testimonial.author.image}
diff --git a/public/images/components/Timeline.jsx b/public/images/components/Timeline.jsx
index 494a1aa..b00edcf 100644
--- a/public/images/components/Timeline.jsx
+++ b/public/images/components/Timeline.jsx
@@ -92,7 +92,7 @@ const features = [
   
   export default function Example() {
     return (
-      <div className="bg-creme-600">
+      <div className="bg-bg-sand">
         <div className="mx-auto max-w-2xl px-4 py-24 sm:px-6 sm:py-32 lg:max-w-7xl lg:px-8">
           <div className="mx-auto max-w-3xl text-center">
             <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">VEDA ITINERARY SAMPLE</h2>
diff --git a/public/images/components/Veda1.jsx b/public/images/components/Veda1.jsx
index 447ca55..c4e3cff 100644
--- a/public/images/components/Veda1.jsx
+++ b/public/images/components/Veda1.jsx
@@ -101,7 +101,7 @@ export default function Example() {
   const [selectedColor, setSelectedColor] = useState(product.colors[0])
 
   return (
-    <div className="bg-creme-600">
+    <div className="bg-bg-sand">
       <div className="mx-auto max-w-2xl px-6 py-12 sm:px-6 lg:max-w-7xl lg:px-8">
         <div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
           {/* Image gallery */}
diff --git a/public/images/components/Veda2.jsx b/public/images/components/Veda2.jsx
index 82d77a8..f0924c4 100644
--- a/public/images/components/Veda2.jsx
+++ b/public/images/components/Veda2.jsx
@@ -96,7 +96,7 @@ export default function Example() {
   const [selectedColor, setSelectedColor] = useState(product.colors[0])
 
   return (
-    <div className="bg-creme-600">
+    <div className="bg-bg-sand">
       <div className="mx-auto max-w-2xl px-6 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
         <div className="lg:grid lg:grid-cols-2 lg:gap-x-8">
           {/* Image gallery */}
diff --git a/public/images/components/Veda3.jsx b/public/images/components/Veda3.jsx
index 2589b98..74126e9 100644
--- a/public/images/components/Veda3.jsx
+++ b/public/images/components/Veda3.jsx
@@ -98,7 +98,7 @@ export default function Example() {
   const [selectedColor, setSelectedColor] = useState(product.colors[0])
 
   return (
-    <div className="bg-creme-600">
+    <div className="bg-bg-sand">
       <div className="mx-auto max-w-2xl px-6 py-12 sm:px-6 lg:max-w-7xl lg:px-8">
         <div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
           {/* Image gallery */}
diff --git a/public/images/components/Veda4.jsx b/public/images/components/Veda4.jsx
index 9172606..1426631 100644
--- a/public/images/components/Veda4.jsx
+++ b/public/images/components/Veda4.jsx
@@ -96,7 +96,7 @@ export default function Example() {
   const [selectedColor, setSelectedColor] = useState(product.colors[0])
 
   return (
-    <div className="bg-creme-600">
+    <div className="bg-bg-sand">
       <div className="mx-auto max-w-2xl px-6 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
         <div className="lg:grid lg:grid-cols-2 lg:gap-x-8">
           {/* Image gallery */}
diff --git a/src/components/Boats.jsx b/src/components/Boats.jsx
index 9b2dc2b..91d0cb4 100644
--- a/src/components/Boats.jsx
+++ b/src/components/Boats.jsx
@@ -58,7 +58,7 @@ const people = [
 
 export default function Boats() {
     return (
-        <div className="bg-creme-600 py-24">
+        <div className="bg-bg-sand py-24">
             <div className="mx-auto grid max-w-7xl grid-cols-1 gap-x-8 gap-y-20 px-6 lg:px-8 xl:grid-cols-3">
                 <div className="mx-auto max-w-2xl lg:mx-0">
                     <h2 className="text-3xl font-bold tracking-tight text-gray-800 sm:text-4xl">Our team</h2>
diff --git a/src/components/Daha1.jsx b/src/components/Daha1.jsx
index 731bf99..c2dd16a 100644
--- a/src/components/Daha1.jsx
+++ b/src/components/Daha1.jsx
@@ -1,6 +1,6 @@
 export default function Example() {
     return (
-      <div className="relative isolate overflow-hidden bg-creme-600 py-24 sm:py-32">
+      <div className="relative isolate overflow-hidden bg-bg-sand py-24 sm:py-32">
         <img
           alt=""
           src="/images/daha1.jpg"
diff --git a/src/components/Daha2.jsx b/src/components/Daha2.jsx
index 4a53c0f..bef53c8 100644
--- a/src/components/Daha2.jsx
+++ b/src/components/Daha2.jsx
@@ -33,7 +33,7 @@ const categories = [
 
 export default function Example() {
   return (
-    <div className="bg-creme-600">
+    <div className="bg-bg-sand">
       <div className="mx-auto max-w-xl px-6 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
         <h2 className="text-2xl font-bold tracking-tight text-gray-900">DAHABIYAS</h2>
         <p className="mt-4 text-base text-gray-500">
diff --git a/src/components/Exp.jsx b/src/components/Exp.jsx
index f3b872c..a58226c 100644
--- a/src/components/Exp.jsx
+++ b/src/components/Exp.jsx
@@ -9,7 +9,7 @@ const features = [
   
   export default function Example() {
     return (
-      <div className="bg-creme-600">
+      <div className="bg-bg-sand">
         <div className="mt-24 relative mx-auto  max-w-7xl px-6 pb-16 sm:px-6 sm:pb-24 lg:px-8">
           <div className="mx-auto max-w-2xl text-center lg:max-w-4xl">
             <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">VEDA EXPERIENCES</h2>
diff --git a/src/components/Exp1.jsx b/src/components/Exp1.jsx
index 4954045..21ffe44 100644
--- a/src/components/Exp1.jsx
+++ b/src/components/Exp1.jsx
@@ -1,6 +1,6 @@
 export default function Example() {
     return (
-      <div className="relative isolate overflow-hidden bg-creme-600 py-24 sm:py-32">
+      <div className="relative isolate overflow-hidden bg-bg-sand py-24 sm:py-32">
         <img
           alt=""
           src="/images/daha1.jpg"
diff --git a/src/components/Exp2.jsx b/src/components/Exp2.jsx
index bc0edbd..e660566 100644
--- a/src/components/Exp2.jsx
+++ b/src/components/Exp2.jsx
@@ -2,7 +2,7 @@
   
   export  function Experience() {
     return (
-      <div className="bg-creme-600">
+      <div className="bg-bg-sand">
         <div aria-hidden="true" className="relative">
           <img
             alt=""
diff --git a/src/components/FreeflowVideo.jsx b/src/components/FreeflowVideo.jsx
index c98c1ec..d2172bb 100644
--- a/src/components/FreeflowVideo.jsx
+++ b/src/components/FreeflowVideo.jsx
@@ -8,7 +8,7 @@ const FFVid = () => {
         <section
       id="testimonials"
       aria-label="What our customers are saying"
-      className="bg-creme-600 pt-6 pb-24"
+      className="bg-bg-sand pt-6 pb-24"
     >
       <Container>
         <div className="mx-auto max-w-5xl md:text-center">
diff --git a/src/components/Iti1.jsx b/src/components/Iti1.jsx
index b45e807..b76d327 100644
--- a/src/components/Iti1.jsx
+++ b/src/components/Iti1.jsx
@@ -1,6 +1,6 @@
 export default function Example() {
     return (
-      <div className="relative isolate overflow-hidden bg-creme-600 py-24 sm:py-32">
+      <div className="relative isolate overflow-hidden bg-bg-sand py-24 sm:py-32">
         <img
           alt=""
           src="/images/iti.jpg"
diff --git a/src/components/Story.jsx b/src/components/Story.jsx
index 2c520f6..445fe26 100644
--- a/src/components/Story.jsx
+++ b/src/components/Story.jsx
@@ -6,7 +6,7 @@ const features = [
 
 export default function NewFeatures() {
   return (
-    <div className="overflow-hidden bg-creme-600 pb-0 pt-12 lg:pt-12">
+    <div className="overflow-hidden bg-bg-sand pb-0 pt-12 lg:pt-12">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
         <div className="flex items-start justify-end lg:justify-start lg:order-first">
diff --git a/src/components/Story2.jsx b/src/components/Story2.jsx
index 1fd2951..bdaa9fc 100644
--- a/src/components/Story2.jsx
+++ b/src/components/Story2.jsx
@@ -5,7 +5,7 @@ const features = [
 
 export default function NewFeatures2() {
   return (
-    <div className="overflow-hidden bg-creme-600 pb-10 pt-0 lg:pt-10 lg:pb-24">
+    <div className="overflow-hidden bg-bg-sand pb-10 pt-0 lg:pt-10 lg:pb-24">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
           <div className="lg:order-first">
diff --git a/src/components/Team.jsx b/src/components/Team.jsx
index 17b882c..23bb145 100644
--- a/src/components/Team.jsx
+++ b/src/components/Team.jsx
@@ -29,7 +29,7 @@ const people = [
   
   export default function Team() {
     return (
-      <div className="bg-creme-600 py-12 md:py-32 lg:py-12">
+      <div className="bg-bg-sand py-12 md:py-32 lg:py-12">
         <div className="mx-auto grid max-w-7xl grid-cols-1 gap-x-8 gap-y-20 px-6 lg:px-8 xl:grid-cols-3">
           <div className="mx-auto max-w-2xl lg:mx-0">
             <H2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">OUR PEOPLE</H2>
diff --git a/src/components/Testimonials.jsx b/src/components/Testimonials.jsx
index ae76cfe..b851ba6 100644
--- a/src/components/Testimonials.jsx
+++ b/src/components/Testimonials.jsx
@@ -123,7 +123,7 @@ export function Testimonials() {
                             {testimonial.author.role}
                           </div>
                         </div>
-                        <div className="overflow-hidden rounded-full bg-creme-600">
+                        <div className="overflow-hidden rounded-full bg-bg-sand">
                           <img
                             className="h-14 w-14 object-cover"
                             src={testimonial.author.image}
diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx
index 494a1aa..b00edcf 100644
--- a/src/components/Timeline.jsx
+++ b/src/components/Timeline.jsx
@@ -92,7 +92,7 @@ const features = [
   
   export default function Example() {
     return (
-      <div className="bg-creme-600">
+      <div className="bg-bg-sand">
         <div className="mx-auto max-w-2xl px-4 py-24 sm:px-6 sm:py-32 lg:max-w-7xl lg:px-8">
           <div className="mx-auto max-w-3xl text-center">
             <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">VEDA ITINERARY SAMPLE</h2>
diff --git a/src/components/Veda1.jsx b/src/components/Veda1.jsx
index 3c563d5..092eacf 100644
--- a/src/components/Veda1.jsx
+++ b/src/components/Veda1.jsx
@@ -124,7 +124,7 @@ export default function Example() {
   const [selectedColor, setSelectedColor] = useState(product.colors[0])
 
   return (
-    <div className="bg-creme-600">
+    <div className="bg-bg-sand">
       <div className="mx-auto max-w-2xl px-6 py-12 sm:px-6 lg:max-w-7xl lg:px-8">
         <div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
           {/* Image gallery */}
diff --git a/src/components/Veda2.jsx b/src/components/Veda2.jsx
index 475abe0..d04a739 100644
--- a/src/components/Veda2.jsx
+++ b/src/components/Veda2.jsx
@@ -96,7 +96,7 @@ export default function Example() {
   const [selectedColor, setSelectedColor] = useState(product.colors[0])
 
   return (
-    <div className="bg-creme-600">
+    <div className="bg-bg-sand">
       <div className="mx-auto max-w-2xl px-6 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
         <div className="lg:grid lg:grid-cols-2 lg:gap-x-8">
           {/* Image gallery */}
diff --git a/src/components/Veda3.jsx b/src/components/Veda3.jsx
index 2589b98..74126e9 100644
--- a/src/components/Veda3.jsx
+++ b/src/components/Veda3.jsx
@@ -98,7 +98,7 @@ export default function Example() {
   const [selectedColor, setSelectedColor] = useState(product.colors[0])
 
   return (
-    <div className="bg-creme-600">
+    <div className="bg-bg-sand">
       <div className="mx-auto max-w-2xl px-6 py-12 sm:px-6 lg:max-w-7xl lg:px-8">
         <div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
           {/* Image gallery */}
diff --git a/src/components/Veda4.jsx b/src/components/Veda4.jsx
index 9172606..1426631 100644
--- a/src/components/Veda4.jsx
+++ b/src/components/Veda4.jsx
@@ -96,7 +96,7 @@ export default function Example() {
   const [selectedColor, setSelectedColor] = useState(product.colors[0])
 
   return (
-    <div className="bg-creme-600">
+    <div className="bg-bg-sand">
       <div className="mx-auto max-w-2xl px-6 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
         <div className="lg:grid lg:grid-cols-2 lg:gap-x-8">
           {/* Image gallery */}