diff --git a/src/app/layout.jsx b/src/app/layout.jsx
index 313a1cb..1852e4a 100644
--- a/src/app/layout.jsx
+++ b/src/app/layout.jsx
@@ -1,4 +1,4 @@
-import { Inter, Lexend } from 'next/font/google'
+import { Inter, Lexend, Vollkorn } from 'next/font/google'
 import clsx from 'clsx'
 
 import '@/styles/tailwind.css'
@@ -24,17 +24,24 @@ const lexend = Lexend({
   variable: '--font-lexend',
 })
 
+const vollkorn = Vollkorn({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-vollkorn',
+})
+
 export default function RootLayout({ children }) {
   return (
     <html
       lang="en"
       className={clsx(
-        'h-full scroll-smooth bg-sand antialiased',
+        'h-full scroll-smooth bg-bg-sand antialiased',
         inter.variable,
         lexend.variable,
+        vollkorn.variable,
       )}
     >
-      <body className="flex h-full flex-col pt-20 bg-sand">{children}</body>
+      <body className="flex h-full flex-col pt-20 bg-bg-sand">{children}</body>
     </html>
   )
 }
diff --git a/src/app/page.jsx b/src/app/page.jsx
index c0b8265..9e84067 100644
--- a/src/app/page.jsx
+++ b/src/app/page.jsx
@@ -35,7 +35,6 @@ export default function Home() {
         <Route />
         <CnnVideo />
         <Testimonials />
-        <CallToAction3 />
       </main>
       <Footer />
     </>
diff --git a/src/components/Boat.jsx b/src/components/Boat.jsx
index fd93637..9003532 100644
--- a/src/components/Boat.jsx
+++ b/src/components/Boat.jsx
@@ -13,7 +13,7 @@ import { useCallback, useLayoutEffect, useRef, useState } from 'react'
 import useMeasure from 'react-use-measure'
 import { Container } from './Container'
 import { Link } from './link'
-import { Heading, Subheading, H2, P, PS, H3} from './text'
+import { Heading, Subheading, H2, P, PS, H3, H4 } from './text'
 import { Button } from './Button'
 
 const testimonials = [
@@ -100,7 +100,7 @@ function TestimonialCard({
     <motion.div
       ref={ref}
       {...props}
-      className="w-72 shrink-0 snap-start scroll-ml-(--scroll-padding) bg-transparent overflow-hidden sm:w-80 lg:w-96"
+      className="w-72 shrink-0 snap-start scroll-ml-(--scroll-padding) bg-bg-sand overflow-hidden sm:w-80 lg:w-96"
       style={{ aspectRatio: '360/460' }}
     >
       {/* Image Section */}
@@ -115,9 +115,9 @@ function TestimonialCard({
       {/* Content Section Below Image */}
       <div className="py-2 px-2" style={{ height: '25%' }}>
         <blockquote>
-          <H3 className="text-sm lg:text-base">
+          <H4 className="">
             {children}
-          </H3>
+          </H4>
         </blockquote>
         
         <PS className="mt-1 mb-2 text-xs lg:text-sm">
@@ -172,7 +172,7 @@ export function Boat() {
             </H2>
             <PS className="mt-4">
               Discover peaceful platforms where every detail ensures a truly memorable stay.
-            </PS>
+            </PS  >
             <PS className="mt-2 mb-6">
               Our fleet of traditional dahabiyas combines authentic Nile heritage with modern comfort, offering intimate sailing experiences that connect you with Egypt's timeless river culture.
             </PS>
diff --git a/src/components/CNNVIDEO.jsx b/src/components/CNNVIDEO.jsx
index 801b6f3..3c341ae 100644
--- a/src/components/CNNVIDEO.jsx
+++ b/src/components/CNNVIDEO.jsx
@@ -1,20 +1,22 @@
 import { Button } from '@/components/Button'
 import { Container } from '@/components/Container'
 import React from 'react'
+import { H2, P, PS, H3, PXS, H4 } from '@/components/text'
+
 
 
 const CnnVideo = () => {
     return (
       <Container>
-        <div className="mx-auto max-w-4xl md:text-center">
-          <h2 className="font-display text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
+        <div className="bg-bg-sand mx-auto max-w-7xl md:text-center pt-12">
+          <H2  className="">
           VEDA ON CNN 
-          </h2>
-          <p className="mb-6 sm:mb-10 mt-4 text-xl/5 font-medium tracking-[-0.045em] lg:tracking-[-0.02em] leading-[1.3] lg:leading-[1.4] lg:text-2xl text-darkgr">
+          </H2>
+          <P className="">
           CNN Travel visited the Veda boats to give you a first hand impression of what awaits you when cruising the Nile.
-          </p>
+          </P>
         </div>
-      <div className="video-container">
+      <div className="video-container mt-12 bg-bg-sand">
         <iframe
           src="https://player.vimeo.com/video/371621672?loop=1&muted=1"
           width="100%"
diff --git a/src/components/CallToAction2.jsx b/src/components/CallToAction2.jsx
index 006e79e..594f3c8 100644
--- a/src/components/CallToAction2.jsx
+++ b/src/components/CallToAction2.jsx
@@ -7,7 +7,7 @@ export function CallToAction2() {
   return (
     <section
       id="get-started-today"
-      className="relative overflow-hidden bg-transparent py-40 mt-4 mb-2"
+      className="relative overflow-hidden bg-bg-sand py-40 mt-4 mb-2"
     >
       <img
         className="absolute  left-1/2 top-1/2 max-w-none -translate-x-1/2 -translate-y-1/2"
diff --git a/src/components/CallToAction3.jsx b/src/components/CallToAction3.jsx
index 2879565..bc216bf 100644
--- a/src/components/CallToAction3.jsx
+++ b/src/components/CallToAction3.jsx
@@ -7,7 +7,7 @@ export function CallToAction3() {
   return (
     <section
       id="get-started-today"
-      className="relative overflow-hidden bg-transparent py-48 mt-4"
+      className="relative overflow-hidden bg-bg-sand py-48 mt-4"
     >
       <img
         className="absolute left-1/2 top-1/2 max-w-none -translate-x-1/2 -translate-y-1/2"
diff --git a/src/components/CallToAction4.jsx b/src/components/CallToAction4.jsx
index 68e8256..117943f 100644
--- a/src/components/CallToAction4.jsx
+++ b/src/components/CallToAction4.jsx
@@ -1,18 +1,18 @@
 
 import { Container } from '@/components/Container'
-import { H3, P } from '@/components/text'
+import { H2,H3, P } from '@/components/text'
 
 export function CallToAction4() {
   return (
     <section
       id="about"
-      className="relative overflow-hidden bg-bg-sand pt-16 pb-12"
+      className="relative overflow-hidden bg-bg-sand pt-24 pb-12"
     >
       <Container className="relative">
         <div className="mx-auto max-w-6xl text-center">
-          <H3 className="mb-6">
+          <H2  className="mb-4">
           Transformative Programs on the Nile
-          </H3>
+          </H2>
           <P className="mb-6">
           From intimate community gatherings to professional retreats, VEDA offers transformative programs on the Nile. Each space is thoughtfully designed to foster connection, creativity, and personal growth in an inspiring riverside setting.
           </P>
diff --git a/src/components/Carousel.jsx b/src/components/Carousel.jsx
index aca6eac..c09c214 100644
--- a/src/components/Carousel.jsx
+++ b/src/components/Carousel.jsx
@@ -85,7 +85,7 @@ const MultiCardCarousel = () => {
           {cards.slice(0, 3).map((card, index) => (
             <div
               key={index}
-              className="relative overflow-hidden bg-transparent"
+              className="relative overflow-hidden bg-bg-sand"
             >
               <div className="aspect-[4/5] overflow-hidden">
                 <img
diff --git a/src/components/Container.jsx b/src/components/Container.jsx
index a17ea3c..7ada694 100644
--- a/src/components/Container.jsx
+++ b/src/components/Container.jsx
@@ -3,7 +3,7 @@ import clsx from 'clsx'
 export function Container({ className, ...props }) {
   return (
     <div
-      className={clsx('mx-auto max-w-7xl px-4 sm:px-6 lg:px-8', className)}
+      className={clsx('mx-auto bg-bg-sand max-w-7xl px-4 sm:px-6 lg:px-8', className)}
       {...props}
     />
   )
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 00806bf..eaa14c6 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -3,11 +3,11 @@ import { Logo } from '@/components/Logo'
 
 export function Footer() {
   return (
-    <footer className="bg-bg-clay border-primary-olive border-t-2">
+    <footer className="bg-bg-sand border-gray-300 border-t-[1px]">
       <Container>
-        <div className="flex items-center justify-between py-8">
-          <Logo className="h-10 w-auto" />
-          <p className="text-sm text-primary-olive hover:text-primary-terracotta transition-colors duration-200">
+        <div className="flex items-center justify-between py-6">
+          <Logo className="h-8 w-auto" />
+          <p className="text-sm text-darkbrown hover:text-primary-terracotta transition-colors duration-200">
             Copyright &copy; {new Date().getFullYear()} VEDA. All rights reserved.
           </p>
         </div>
diff --git a/src/components/Logo.jsx b/src/components/Logo.jsx
index ba2d5ab..23ad913 100644
--- a/src/components/Logo.jsx
+++ b/src/components/Logo.jsx
@@ -38,7 +38,7 @@ const SvgIcon = (props) => (
 
 export function Logo(props) {
   return (
-    <div className="bg-transparent px-2 py-1 rounded">
+    <div className="bg-bg-sand px-2 py-1 rounded">
       <SvgIcon {...props} />
     </div>
   );
diff --git a/src/components/NavLink.jsx b/src/components/NavLink.jsx
index c28edd6..9f45a81 100644
--- a/src/components/NavLink.jsx
+++ b/src/components/NavLink.jsx
@@ -4,7 +4,7 @@ export function NavLink({ href, children }) {
   return (
     <Link
       href={href}
-      className="inline-block px-2 py-1 text-sm text-nav-dark hover:text-primary-terracotta transition-colors duration-200"
+      className="inline-block px-2 py-1 text-sm tracking-wide text-nav-dark hover:text-primary-olive transition-colors duration-200"
     >
       {children}
     </Link>
diff --git a/src/components/NewFeatures.jsx b/src/components/NewFeatures.jsx
index b8c0013..ea92a8c 100644
--- a/src/components/NewFeatures.jsx
+++ b/src/components/NewFeatures.jsx
@@ -23,7 +23,7 @@ const features = [
 
 export default function NewFeatures() {
   return (
-    <div className="overflow-hidden bg-transparent pb-0 pt-4 lg:pt-24 pb:12">
+    <div className="overflow-hidden bg-bg-sand pb-0 pt-4 lg:pt-24 pb:12">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto max-w-2xllg:max-w-7xl pb-10 lg:pb-16">
         <p className="mt-2 max-w-lg  text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
diff --git a/src/components/NewFeatures2.jsx b/src/components/NewFeatures2.jsx
index e3e4b33..4ee65f9 100644
--- a/src/components/NewFeatures2.jsx
+++ b/src/components/NewFeatures2.jsx
@@ -23,7 +23,7 @@ const features = [
 
 export default function NewFeatures2() {
   return (
-    <div className="overflow-hidden bg-transparent pt-0 lg:pt-12 lg:pb-24 pb-12">
+    <div className="overflow-hidden bg-bg-sand pt-0 lg:pt-12 lg:pb-24 pb-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="lg:order-first">
diff --git a/src/components/Route.jsx b/src/components/Route.jsx
index 2d2e4ff..13b3dbb 100644
--- a/src/components/Route.jsx
+++ b/src/components/Route.jsx
@@ -6,43 +6,42 @@ import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
 import clsx from 'clsx'
 import { Button } from '@/components/Button'
 import { Container } from '@/components/Container'
+import { H2, P, PS, PXS, H3 , H4   } from '@/components/text'
 
 
 export default function Route() {
   return (
-    <div className="overflow-hidden bg-transparent pt-6 pb-24 px-6 lg:px-8">
+    <div className="bg-bg-sand 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">
             <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-lg">
-              <p className="font-display text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">Itinerary</p>
-              <p className="mt-4 max-w-5xl text-xl/5 font-medium tracking-[-0.045em] lg:tracking-[-0.02em] leading-[1.3] lg:leading-[1.4] lg:text-2xl text-darkgr">
-              By following the natural flow of the Nile river you will discover some of the most sacred places of the world.</p>
-              <p className="my-6 max-w-5xl text-xl/5 font-medium tracking-[-0.045em] lg:tracking-[-0.02em] leading-[1.3] lg:leading-[1.4] lg:text-2xl text-darkgr">All our trips are designed according to your wishes. Your group's tailored itinerary will lead you to the locations and temples which fit your energy.
-              </p>
+              <H2 className="">Itinerary</H2>
+              <P className="mt-4 ">
+              By following the natural flow of the Nile river you will discover some of the most sacred places of the world.</P>
+              <P className="my-4">All our trips are designed according to your wishes. Your group's tailored itinerary will lead you to the locations and temples which fit your energy.
+              </P>
               <div className="relative z-10 mt-4 mb-10 lg:mb-40 lg:py-2 xs:mb-20 flex justify-startgap-x-6">
-              <Button href="/contact" color="blue">
-              <span className="font-semibold tracking-wide">
-                Book Now
-              </span>
-            </Button>
-            </div>
+              <Button href="/contact" variant="link" color="darkgr">
+              Learn More
+              </Button>
+              </div>
             </div>
           </div>
           <div className="sm:px-6 lg:px-0">
-            <div className="relative overflow-hidden sm:mx-auto sm:max-w-2xl sm:rounded-3xl lg:mx-0 lg:max-w-none">
+            <div className="relative overflow-hidden sm:mx-auto sm:max-w-2xl  lg:mx-0 lg:max-w-none">
               <div className="mx-auto max-w-2xl sm:mx-0 sm:max-w-none">
                 <img
                   alt="trip map"
                   src="/images/map.png"
                   width={500}
                   height={500}
-                  className="w-full max-w-full rounded-tl-xl bg-gray-800 ring-1 ring-white/10"
+                  className="w-full max-w-full bg-gray-800 ring-1 ring-white/10"
                 />
               </div>
               <div
                 aria-hidden="true"
-                className="pointer-events-none absolute inset-0 ring-1 ring-inset ring-black/10 sm:rounded-3xl"
+                className="pointer-events-none absolute inset-0 ring-1 ring-inset ring-black/10 "
               />
             </div>
           </div>
diff --git a/src/components/Testimonials.jsx b/src/components/Testimonials.jsx
index 69577a6..ae76cfe 100644
--- a/src/components/Testimonials.jsx
+++ b/src/components/Testimonials.jsx
@@ -1,5 +1,6 @@
 
 import { Container } from '@/components/Container'
+import { H2, P, PS, H3, PXS, H4, PXXS } from '@/components/text'
 
 const testimonials = [
   [
@@ -25,7 +26,7 @@ const testimonials = [
   [
     {
       content:
-        "The VEDA trip on the Nile was not only a journey in the geographic sense but really also a journey that my heart and soul took. I was not that happy about going but when I boarded the Veda boat in Luxor, I transformed in a second from a frowning person to a smiling one. The peaceful, serene, majestic nile effects reflect on you. I will never forget the trip and every part of me is begging me to return as soon as possible.",
+        "The VEDA trip on the Nile was not only a journey in the geographic sense but really also a journey that my heart and soul took. I was not that happy about going but when I boarded the Veda boat in Luxor, I transformed in a second from a frowning person to a smiling one. The peaceful, serene, majestic nile effects reflect on you.",
       author: {
         name: 'Owen',
         role: 'Retreat Guest',
@@ -86,32 +87,32 @@ export function Testimonials() {
     <section
       id="testimonials"
       aria-label="What our customers are saying"
-      className="bg-transparent lg:pt-24 pt-8 pb-24"
+      className="bg-bg-sand lg:pt-48 pt-8 pb-24"
     >
       <Container>
         <div className="mx-auto max-w-5xl md:text-center">
-          <h2 className="font-display text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
+          <H2 className="">
             Testimonials
-          </h2>
-          <p className="mb-8 mt-4 text-xl/5 font-medium tracking-[-0.045em] lg:tracking-[-0.02em] leading-[1.3] lg:leading-[1.4] lg:text-2xl text-darkgr">
+          </H2>
+          <P className="mt-4">
           Discover the heartfelt stories of joy, relaxation, and adventure that make VEDA a cherished choice for travelers seeking unique and sophisticated experiences on the Nile.
-          </p>
+          </P>
         </div>
         <ul
           role="list"
-          className="mx-auto mt-8 grid max-w-2xl grid-cols-1 gap-6 sm:gap-8 lg:mt-20 lg:max-w-none lg:grid-cols-3"
+          className="mx-auto mt-4 grid max-w-2xl grid-cols-1 gap-6 sm:gap-8 lg:mt-12 lg:max-w-none lg:grid-cols-3"
         >
           {testimonials.map((column, columnIndex) => (
             <li key={columnIndex}>
               <ul role="list" className="flex flex-col gap-y-6 sm:gap-y-8">
                 {column.map((testimonial, testimonialIndex) => (
                   <li key={testimonialIndex}>
-                    <figure className="relative rounded-lg bg-white p-6 shadow-xl shadow-slate-900/10">
+                    <figure className="relative rounded-lg bg-white py-6 px-8 shadow-xl shadow-slate-900/10">
                       <QuoteIcon className="absolute left-6 top-6 fill-slate-100" />
                       <blockquote className="relative">
-                        <p className="lg:text-base text-sm tracking-tight text-slate-900">
+                        <PXXS  >
                           {testimonial.content}
-                        </p>
+                        </PXXS>
                       </blockquote>
                       <figcaption className="relative mt-6 flex items-center justify-between border-t border-slate-100 pt-6">
                         <div>
diff --git a/src/components/text.jsx b/src/components/text.jsx
index 61100f2..9f43cfc 100644
--- a/src/components/text.jsx
+++ b/src/components/text.jsx
@@ -18,7 +18,7 @@ export function H2({ className, children, ...props }) {
   return (
     <h2
       className={clsx(
-        'text-2xl font-medium tracking-tight text-bg-darkbrown sm:text-3xl',
+        'font-vollkorn text-2xl font-medium tracking-tight text-bg-darkbrown sm:text-3xl',
         className
       )}
       {...props}
@@ -32,7 +32,7 @@ export function H3({ className, children, ...props }) {
   return (
     <h3
       className={clsx(
-        'text-xl  font-medium tracking-tight text-bg-darkbrown lg:text-2xl',
+        'font-vollkorn text-xl font-medium tracking-tight text-bg-darkbrown lg:text-2xl',
         className
       )}
       {...props}
@@ -46,7 +46,7 @@ export function H4({ className, children, ...props }) {
   return (
     <h4
       className={clsx(
-        'text-base font-medium tracking-tight text-bg-darkbrown lg:text-lg',
+        'font-vollkorn text-base font-medium tracking-tight text-bg-darkbrown lg:text-lg',
         className
       )}
       {...props}
@@ -98,6 +98,20 @@ export function PXS({ className, children, ...props }) {
   )
 }
 
+export function PXXS({ className, children, ...props }) {
+  return (
+    <p
+      className={clsx(
+        'text-sm text-gray-700 font-extralight leading-snug',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </p>
+  )
+}
+
 export function Subheading({ className, children, ...props }) {
   return (
     <h3
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index b5c61c9..8643b54 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -1,3 +1,10 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  html,
+  body {
+    @apply bg-bg-sand;
+  }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 1b8b0f6..b7f1c7d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -29,6 +29,7 @@ module.exports = {
       fontFamily: {
         sans: ['Montserrat', 'sans-serif'],
         display: ['Montserrat', 'sans-serif'],
+        vollkorn: ['var(--font-vollkorn)', 'serif'],
       },
       maxWidth: {
         '2xl': '40rem',
