diff --git a/public/images/activities/community.jpg b/public/images/activities/community.jpg
new file mode 100644
index 0000000..1f9f8bf
Binary files /dev/null and b/public/images/activities/community.jpg differ
diff --git a/public/images/activities/events.jpg b/public/images/activities/events.jpg
new file mode 100644
index 0000000..dc25253
Binary files /dev/null and b/public/images/activities/events.jpg differ
diff --git a/public/images/activities/nomad.jpg b/public/images/activities/nomad.jpg
new file mode 100644
index 0000000..6caa8c1
Binary files /dev/null and b/public/images/activities/nomad.jpg differ
diff --git a/public/images/activities/private.jpg b/public/images/activities/private.jpg
new file mode 100644
index 0000000..0176188
Binary files /dev/null and b/public/images/activities/private.jpg differ
diff --git a/src/app/experiences/page.jsx b/src/app/experiences/page.jsx
index 135244b..fd6fd9f 100644
--- a/src/app/experiences/page.jsx
+++ b/src/app/experiences/page.jsx
@@ -8,14 +8,17 @@ import { Events } from '@/components/Events'
 import { Nomads } from '@/components/Nomads'
 import { Experience } from '@/components/Exp2'
 import FFVid from '@/components/FreeflowVideo'
+import { Experiences } from '@/components/Experiences'
 
-export default function Experiences() {
+
+export default function ExperiencesPage() {
   return (
     <>
       <Header />
       <main>
-      <Experience/>
-      <Community />
+        <Experiences/>
+        <Experience />
+        <Community />
         <Retreats />
         <Events />
         <Nomads />
diff --git a/src/app/story/page.jsx b/src/app/story/page.jsx
index 6775aac..a7d7b3d 100644
--- a/src/app/story/page.jsx
+++ b/src/app/story/page.jsx
@@ -6,6 +6,7 @@ import Story2 from '@/components/Story2'
 import Team from '@/components/Team'
 
 
+
 export default function OurStory() {
   return (
     <>
diff --git a/src/components/ExpHero.jsx b/src/components/ExpHero.jsx
new file mode 100644
index 0000000..8f0d292
--- /dev/null
+++ b/src/components/ExpHero.jsx
@@ -0,0 +1,103 @@
+import { H1, H2, H3, H4, P, PS, PXS, PXXS } from '@/components/text'
+
+export function ExpHero() {
+  return (
+    <div className="bg-transparent py-24">
+      <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl">
+        <H2 className="mx-auto mt-2 max-w-lg text-center text-4xl font-semibold tracking-tight text-balance text-gray-950 sm:text-5xl">
+          Everything you need to deploy your app
+        </H2>
+        <div className="mt-10 grid gap-4 sm:mt-16 lg:grid-cols-3 lg:grid-rows-2">
+          <div className="relative lg:row-span-2">
+            <div className="absolute inset-px rounded-lg bg-white lg:rounded-l-4xl" />
+            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-l-[calc(2rem+1px)]">
+              <div className="px-8 pt-8 pb-3 sm:px-10 sm:pt-10 sm:pb-0">
+                <p className="mt-2 text-lg font-medium tracking-tight text-gray-950 max-lg:text-center">
+                  Mobile friendly
+                </p>
+                <p className="mt-2 max-w-lg text-sm/6 text-gray-600 max-lg:text-center">
+                  Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.
+                </p>
+              </div>
+              <div className="@container relative min-h-120 w-full grow max-lg:mx-auto max-lg:max-w-sm">
+                <div className="absolute inset-x-10 top-10 bottom-0 overflow-hidden rounded-t-[12cqw] border-x-[3cqw] border-t-[3cqw] border-gray-700 bg-gray-900 shadow-2xl">
+                  <img
+                    alt=""
+                    src="https://tailwindcss.com/plus-assets/img/component-images/bento-03-mobile-friendly.png"
+                    className="size-full object-cover object-top"
+                  />
+                </div>
+              </div>
+            </div>
+            <div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-black/5 lg:rounded-l-4xl" />
+          </div>
+          <div className="relative max-lg:row-start-1">
+            <div className="absolute inset-px rounded-lg bg-white max-lg:rounded-t-4xl" />
+            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)]">
+              <div className="px-8 pt-8 sm:px-10 sm:pt-10">
+                <p className="mt-2 text-lg font-medium tracking-tight text-gray-950 max-lg:text-center">Performance</p>
+                <p className="mt-2 max-w-lg text-sm/6 text-gray-600 max-lg:text-center">
+                  Lorem ipsum, dolor sit amet consectetur adipisicing elit maiores impedit.
+                </p>
+              </div>
+              <div className="flex flex-1 items-center justify-center px-8 max-lg:pt-10 max-lg:pb-12 sm:px-10 lg:pb-2">
+                <img
+                  alt=""
+                  src="https://tailwindcss.com/plus-assets/img/component-images/bento-03-performance.png"
+                  className="w-full max-lg:max-w-xs"
+                />
+              </div>
+            </div>
+            <div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-t-4xl" />
+          </div>
+          <div className="relative max-lg:row-start-3 lg:col-start-2 lg:row-start-2">
+            <div className="absolute inset-px rounded-lg bg-white" />
+            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
+              <div className="px-8 pt-8 sm:px-10 sm:pt-10">
+                <p className="mt-2 text-lg font-medium tracking-tight text-gray-950 max-lg:text-center">Security</p>
+                <p className="mt-2 max-w-lg text-sm/6 text-gray-600 max-lg:text-center">
+                  Morbi viverra dui mi arcu sed. Tellus semper adipiscing suspendisse semper morbi.
+                </p>
+              </div>
+              <div className="@container flex flex-1 items-center max-lg:py-6 lg:pb-2">
+                <img
+                  alt=""
+                  src="https://tailwindcss.com/plus-assets/img/component-images/bento-03-security.png"
+                  className="h-[min(152px,40cqw)] object-cover"
+                />
+              </div>
+            </div>
+            <div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-black/5" />
+          </div>
+          <div className="relative lg:row-span-2">
+            <div className="absolute inset-px rounded-lg bg-white max-lg:rounded-b-4xl lg:rounded-r-4xl" />
+            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-r-[calc(2rem+1px)]">
+              <div className="px-8 pt-8 pb-3 sm:px-10 sm:pt-10 sm:pb-0">
+                <p className="mt-2 text-lg font-medium tracking-tight text-gray-950 max-lg:text-center">
+                  Powerful APIs
+                </p>
+                <p className="mt-2 max-w-lg text-sm/6 text-gray-600 max-lg:text-center">
+                  Sit quis amet rutrum tellus ullamcorper ultricies libero dolor eget sem sodales gravida.
+                </p>
+              </div>
+              <div className="relative min-h-120 w-full grow">
+                <div className="absolute top-10 right-0 bottom-0 left-10 overflow-hidden rounded-tl-xl bg-gray-900 shadow-2xl outline outline-white/10">
+                  <div className="flex bg-gray-900 outline outline-white/5">
+                    <div className="-mb-px flex text-sm/6 font-medium text-gray-400">
+                      <div className="border-r border-b border-r-white/10 border-b-white/20 bg-white/5 px-4 py-2 text-white">
+                        NotificationSetting.jsx
+                      </div>
+                      <div className="border-r border-gray-600/10 px-4 py-2">App.jsx</div>
+                    </div>
+                  </div>
+                  <div className="px-6 pt-6 pb-14">{/* Your code example */}</div>
+                </div>
+              </div>
+            </div>
+            <div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-b-4xl lg:rounded-r-4xl" />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/Experiences.jsx b/src/components/Experiences.jsx
index d103039..8381f26 100644
--- a/src/components/Experiences.jsx
+++ b/src/components/Experiences.jsx
@@ -2,60 +2,57 @@ import { H2, P , PS, PXS, H3, H4 } from "@/components/text";
 
 
 export function Experiences() {
-  return (
-    <div className="bg-transparent pb-4">
-      <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">
-            <div className="w-full overflow-hidden">
+  return (           
+    <div className="bg-transparent">    
+      <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-0 mt-16">
+         <H2 className="mb-8">Discover a path to wellbeing that is uniquely yours.</H2>
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-6 lg:grid-rows-2">
+          {/* Photo 1 - Left large image */}
+          <div className="flex lg:col-span-2 lg:row-span-2">
+            <div className="w-full overflow-hidden relative">
               <img
                 alt=""
-                src="/images/community.jpg"
-                className="h-80 w-full object-cover object-center"
+                src="/images/activities/community.jpg"
+                className="h-60 lg:h-full w-full object-cover object-center"
               />
-              <div className="py-2">
-                <H4>Community building Space</H4>
-                <PXS>Foster connections and meaningful relationships through shared experiences.</PXS>
-              </div>
+              {/* Black overlay */}
+              <div className="absolute inset-0 bg-black opacity-30"></div>
             </div>
           </div>
-          <div className="flex lg:col-span-3">
-            <div className="w-full overflow-hidden">
+          {/* Photo 2 - Top middle */}
+          <div className="flex lg:col-span-2">
+            <div className="w-full overflow-hidden relative">
               <img
                 alt=""
-                src="/images/private.jpg"
-                className="h-80 w-full object-cover object-center"
+                src="/images/activities/events.jpg"
+                className="h-60 lg:h-full w-full object-cover object-center"
               />
-              <div className="py-4">
-                <H4>Private Retreats</H4>
-                <PXS>Exclusive experiences  for intimate groups and families.</PXS>
-              </div>
+              {/* Black overlay */}
+              <div className="absolute inset-0 bg-black opacity-30"></div>
             </div>
           </div>
-          <div className="flex lg:col-span-3">
-            <div className="w-full overflow-hidden">
+          {/* Photo 4 - Right large image */}
+          <div className="flex lg:col-span-2 lg:row-span-2">
+            <div className="w-full overflow-hidden relative">
               <img
                 alt=""
-                src="/images/events.jpg"
-                className="h-80 w-full object-cover object-center"
+                src="/images/activities/private.jpg"
+                className="h-80 lg:h-full w-full object-cover object-center"
               />
-              <div className="py-4">
-                <H4>Events & Conferences</H4>
-                <PXS>Professional gatherings in an inspiring riverside setting.</PXS>
-              </div>
+              {/* Black overlay */}
+              <div className="absolute inset-0 bg-black opacity-30"></div>
             </div>
           </div>
-          <div className="flex lg:col-span-5">
-            <div className="w-full overflow-hidden">
+          {/* Photo 3 - Bottom middle */}
+          <div className="flex lg:col-span-2">
+            <div className="w-full overflow-hidden relative">
               <img
                 alt=""
-                src="/images/nomads.jpg"
-                className="h-80 w-full object-cover object-center"
+                src="/images/activities/nomad.jpg"
+                className="h-60 lg:h-full w-full object-cover object-center"
               />
-              <div className="py-4">
-                <H4>Digital Nomad Hub</H4>
-                <PXS>Work remotely while surrounded by the tranquility of the Nile.</PXS>
-              </div>
+              {/* Black overlay */}
+              <div className="absolute inset-0 bg-black opacity-30"></div>
             </div>
           </div>
         </div>