diff --git a/src/app/layout.jsx b/src/app/layout.jsx
index 462d503..e472169 100644
--- a/src/app/layout.jsx
+++ b/src/app/layout.jsx
@@ -40,7 +40,7 @@ export default function RootLayout({ children }) {
         lexend.variable,
         vollkorn.variable,
       )}
-      style={{backgroundImage: 'url(/images/waterbg.jpg)', backgroundSize: 'cover', backgroundPosition: 'center', backgroundAttachment: 'fixed'}}
+      style={{backgroundImage: 'url(/images/waterbg2.jpg)', backgroundSize: 'cover', backgroundPosition: 'center', backgroundAttachment: 'fixed'}}
     >
       <body className="flex h-full flex-col pt-20" style={{backgroundColor: 'transparent'}}>{children}</body>
     </html>
diff --git a/src/app/story/page.jsx b/src/app/story/page.jsx
index 3a0b1df..6775aac 100644
--- a/src/app/story/page.jsx
+++ b/src/app/story/page.jsx
@@ -14,7 +14,6 @@ export default function OurStory() {
         <Story />
         <Story2 />
         <Team />
-        <CallToAction3 />
       </main>
       <Footer />
     </>
diff --git a/src/components/CallToAction.jsx b/src/components/CallToAction.jsx
index e3a1970..7143c20 100644
--- a/src/components/CallToAction.jsx
+++ b/src/components/CallToAction.jsx
@@ -3,6 +3,7 @@
 import { Button } from '@/components/Button'
 import { Container } from '@/components/Container'
 import { Logo } from '@/components/Logo'
+import { H2, PS } from '@/components/text'
   
 
 export function CallToAction() {
@@ -13,12 +14,12 @@ export function CallToAction() {
     >
       <Container className="relative">
         <div className="mx-auto max-w-3xl text-center">
-          <h2 className="lg:text-2xl font-light text-xl tracking-tight text-bg-darkbrown pt-4 lg:pt-6">
+          <H2>
           VEDA provides an unparalleled cruise experience on the Nile, blending authenticity with sophistication. Enjoy private journeys featuring organic cuisine, hollistic activities, and a dedicated, warm-hearted crew. 
-          </h2>
-          <p className="mt-4 text-lg lg:text-xl italic tracking-tight text-gold-900 pb-6">
+          </H2>
+          <PS>
           Discover a cruise like no other with us on the Nile.
-          </p>
+          </PS>
         </div>
       </Container>
     </section>
diff --git a/src/components/Community.jsx b/src/components/Community.jsx
index 76f7339..7a6d979 100644
--- a/src/components/Community.jsx
+++ b/src/components/Community.jsx
@@ -29,6 +29,7 @@ import {
   XMarkIcon,
 } from '@heroicons/react/24/outline'
 import { StarIcon } from '@heroicons/react/20/solid'
+import { H2, PS } from '@/components/text'
 
 
 const product = {
@@ -64,9 +65,7 @@ const product = {
     { id: 'white', name: 'White', classes: 'bg-white checked:outline-gray-400' },
     { id: 'washed-gray', name: 'Washed Gray', classes: 'bg-gray-500 checked:outline-gray-500' },
   ],
-  description: `
-    <p>Community building holds significant value by fostering a sense of belonging, providing social and emotional support, and promoting collective action. It enhances social capital, encourages collaboration. Human to human connection become more and more important as new technological times require us to collaborate more on a peer to peer level and connect on different levels with each other.</p>
-  `,
+  description: 'Community building holds significant value by fostering a sense of belonging, providing social and emotional support, and promoting collective action. It enhances social capital, encourages collaboration. Human to human connection become more and more important as new technological times require us to collaborate more on a peer to peer level and connect on different levels with each other.',
   details: [
     {
       name: 'Features',
@@ -181,7 +180,7 @@ export function Community() {
               <h1 className="text-3xl font-bold tracking-tight text-gray-900">{product.name}</h1>
 
               <div className="mt-3">
-                <h2 className="sr-only">Product information</h2>
+                <H2 className="sr-only">Product information</H2>
               </div>
 
               {/* Reviews */}
@@ -192,18 +191,17 @@ export function Community() {
               <div className="mt-6">
                 <h3 className="sr-only">Description</h3>
 
-                <div
-                  dangerouslySetInnerHTML={{ __html: product.description }}
-                  className="space-y-6 text-base text-gray-700"
-                />
+                <div className="space-y-6 text-base text-gray-700">
+                  <PS>{product.description}</PS>
+                </div>
               </div>
 
   
 
               <section aria-labelledby="details-heading" className="mt-12">
-                <h2 id="details-heading" className="sr-only">
+                <H2 id="details-heading" className="sr-only">
                   Additional details
-                </h2>
+                </H2>
 
                 <div className="divide-y divide-gray-200 border-t border-gray-200">
                   {product.details.map((detail) => (
diff --git a/src/components/ContactHero.jsx b/src/components/ContactHero.jsx
index 07664a9..3614e8b 100644
--- a/src/components/ContactHero.jsx
+++ b/src/components/ContactHero.jsx
@@ -3,7 +3,7 @@
 import { BuildingOffice2Icon, EnvelopeIcon } from '@heroicons/react/24/outline'
 import { Button } from '@/components/Button'
 import { Container } from '@/components/Container'
-import { H2 } from '@/components/text'
+import { H2, PS } from '@/components/text'
 import { useState } from 'react'
 
 export function ContactHero() {
@@ -52,9 +52,9 @@ export function ContactHero() {
             <H2 className="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">
               Get in Touch
             </H2>
-            <p className="mt-6 text-lg/8 text-gray-200">
-              At VEDA, we welcome your questions, ideas, and collaborations. Whether you’re curious about our retreats, interested in hosting a private gathering, or exploring partnership opportunities, we’re here to connect. Reach out to us today and let’s create transformative experiences along the timeless Nile.
-            </p>
+            <PS>
+              At VEDA, we welcome your questions, ideas, and collaborations. Whether you're curious about our retreats, interested in hosting a private gathering, or exploring partnership opportunities, we're here to connect. Reach out to us today and let's create transformative experiences along the timeless Nile.
+            </PS>
             <dl className="mt-10 space-y-4 text-base/7 text-gray-200">
               <div className="flex gap-x-4">
                 <dt className="flex-none">
diff --git a/src/components/Exp2.jsx b/src/components/Exp2.jsx
index d3b6f48..8a97b5b 100644
--- a/src/components/Exp2.jsx
+++ b/src/components/Exp2.jsx
@@ -1,22 +1,14 @@
-
+import { P, H2, H3, H4, PS, PXS, PXXS } from '@/components/text'
   
   export  function Experience() {
     return (
       <div className="bg-transparent">
-        <div aria-hidden="true" className="relative">
-          <img
-            alt=""
-            src="/images/exp.jpg"
-            className="h-96 w-full object-cover object-center"
-          />
-          <div className="absolute inset-0 bg-gradient-to-t from-creme-600" />
-        </div>
-        <div className="relative mx-auto -mt-12 max-w-7xl px-6 pb-16 sm:px-6 sm:pb-24 lg:px-8">
+        <div className="relative mx-auto mt-12 max-w-7xl px-6 pb-16   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 Programs</h2>
-            <p className="mt-4 text-gray-900">
+            <H2 className="">VEDA Programs</H2>
+            <P className="mt-4 text-gray-900">
               Join us for transformative journeys of wellness, creativity, and connection on the tranquil and sacred Nile.
-            </p>
+            </P >
           </div>
         </div>
       </div>
diff --git a/src/components/Story.jsx b/src/components/Story.jsx
index 8a7382b..5a7ea7a 100644
--- a/src/components/Story.jsx
+++ b/src/components/Story.jsx
@@ -1,5 +1,5 @@
 import { CloudArrowUpIcon, LockClosedIcon, ServerIcon, SparklesIcon } from '@heroicons/react/20/solid'
-import { P, H2, H3, PS, PXS } from '@/components/text'
+import { P, H2, H3, H4, PS, PXS, PXXS } from '@/components/text'
 
 export default function Story() {
   return (
