diff --git a/src/components/Veda2.jsx b/src/components/Veda2.jsx
index 5cc7b29..8dd260d 100644
--- a/src/components/Veda2.jsx
+++ b/src/components/Veda2.jsx
@@ -1,5 +1,8 @@
 'use client'
 
+import { H3, PXXS } from '@/components/text'
+import { Button } from '@/components/Button'
+
 import { useState } from 'react'
 import {
   Tab,
@@ -8,7 +11,7 @@ import {
   TabPanel,
   TabPanels,
 } from '@headlessui/react'
-import { H2, PS, PXS } from '@/components/text'
+import { H2, PS } from '@/components/text'
 
 const product = {
   name: 'VEDA II',
@@ -25,12 +28,6 @@ const product = {
       src: '/images/dahabiyas/veda2/veda2_8.jpg',
       alt: 'Veda2',
     },
-    {
-      id: 3,
-      name: 'Veda',
-      src: '/images/dahabiyas/veda2/veda2_10.jpg',
-      alt: 'Veda2',
-    },
     {
       id: 4,
       name: 'Veda',
@@ -128,10 +125,31 @@ export default function Veda2() {
 
   return (
     <div className="bg-transparent">
-      <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">
+      <div className="mx-auto max-w-2xl px-6 py-12 sm:px-6 lg:max-w-7xl lg:px-0">
+        <div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
           {/* Image gallery */}
-          <TabGroup className="lg:order-last">
+          <TabGroup className="flex flex-col-reverse">
+            {/* Image selector */}
+            <div className="mx-auto mt-6 hidden w-full max-w-2xl sm:block lg:max-w-none">
+              <TabList className="grid grid-cols-4 gap-6">
+                {product.images.map((image) => (
+                  <Tab
+                    key={image.id}
+                    className="group relative flex h-24 cursor-pointer items-center justify-center bg-white text-sm font-medium uppercase text-gray-900 hover:bg-gray-50 focus:outline-none focus:ring focus:ring-opacity-50 focus:ring-offset-4"
+                  >
+                    <H3 className="sr-only">{image.name}</H3>
+                    <span className="absolute inset-0 overflow-hidden">
+                      <img alt="" src={image.src} className="h-full w-full object-cover object-center" />
+                    </span>
+                    <span
+                      aria-hidden="true"
+                      className="pointer-events-none absolute inset-0 ring-2 ring-transparent ring-offset-2 group-data-[selected]:ring-indigo-500"
+                    />
+                  </Tab>
+                ))}
+              </TabList>
+            </div>
+
             <TabPanels className="aspect-h-9 aspect-w-16 w-full">
               {product.images.map((image) => (
                 <TabPanel key={image.id}>
@@ -143,79 +161,43 @@ export default function Veda2() {
                 </TabPanel>
               ))}
             </TabPanels>
-
-            {/* Image selector */}
-            <div className="mx-auto mt-6 w-full max-w-2xl sm:block lg:max-w-none">
-              <TabList className="grid grid-cols-4 gap-6">
-                {product.images.map((image) => (
-                  <Tab
-                    key={image.id}
-                    className={({ selected }) =>
-                      classNames(
-                        'group relative flex h-24 cursor-pointer items-center justify-center bg-white text-sm font-medium uppercase text-gray-900 hover:bg-gray-50 focus:outline-none focus:ring focus:ring-opacity-50 focus:ring-offset-4',
-                        selected ? 'ring-indigo-500' : 'ring-transparent'
-                      )
-                    }
-                  >
-                    <span className="sr-only">{image.name}</span>
-                    <span className="absolute inset-0 overflow-hidden">
-                      <img alt={image.alt} src={image.src} className="h-full w-full object-cover object-center" />
-                    </span>
-                    <span
-                      aria-hidden="true"
-                      className="pointer-events-none absolute inset-0 ring-2 ring-offset-2 group-focus:ring-indigo-500"
-                    />
-                  </Tab>
-                ))}
-              </TabList>
-            </div>
           </TabGroup>
 
           {/* Product info */}
-          <div className="mt-10 px-6 sm:mt-16 sm:px-0 lg:mt-0">
-            <h1 className="text-3xl font-bold tracking-tight text-gray-900">{product.name}</h1>
+          <div className="mt-10 px-6 sm:px-0 lg:mt-0">
+            <H2 className="">{product.name}</H2>
 
-            <div className="mt-3">
-              <H2 className="sr-only">Product information</H2>
-            </div>
-
-            <div className="mt-6">
-              <h3 className="sr-only">Description</h3>
-
-              <div className="space-y-6 text-base text-gray-700">
+            <div className="mt-2">
+              <div className="space-y-4 text-base text-gray-700">
                 {product.description.map((paragraph, index) => (
                   <PS key={index}>{paragraph}</PS>
                 ))}
               </div>
             </div>
 
-            <section aria-labelledby="details-heading" className="mt-12">
-              <H2 id="details-heading" className="sr-only">
-                Additional details
-              </H2>
-
+            <section aria-labelledby="details-heading" className="mt-6">
               <div className="border-t border-gray-200 pt-6">
-                <h3 className="text-lg font-medium text-gray-900">FEATURES</h3>
+                <H3 className="">Specifications</H3>
                 <div className="mt-4">
-                  <ul role="list" className="list-disc pl-5 space-y-2">
+                  <ul role="list" className="list-disc pl-5 space-y-1">
                     {product.details[0].items.map((item) => (
                       <li key={item} className="text-gray-700">
-                        <PXS>{item}</PXS>
+                        <PXXS>{item}</PXXS>
                       </li>
                     ))}
                   </ul>
                 </div>
               </div>
-              <form className="mt-6">
-                <div className="mt-10 flex">
-                  <button
-                    type="submit"
-                    className="flex max-w-xs flex-1 items-center justify-center border border-transparent bg-gold-800 px-8 py-3 text-base font-medium text-white hover:bg-gold-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-50 sm:w-full"
-                  >
-                    Book Now
-                  </button>
-                </div>
-              </form>
+              <form className="mt-12">
+              <div className=" flex">
+                <Button
+                  variant="solid"
+                  className="flex max-w-xs flex-1 items-center justify-center  border border-transparent bg-gold-800x-8 py-3 text-base font-medium text-white hover:bg-gold-700 focus:outline-none focus:ring-2 focus:ring-gold-500 focus:ring-offset-2 focus:ring-offset-gray-50 sm:w-full"
+                >
+                  Book Now
+                </Button>
+              </div>
+            </form>
             </section>
           </div>
         </div>
diff --git a/src/components/Veda3.jsx b/src/components/Veda3.jsx
index fdbb6b4..9774581 100644
--- a/src/components/Veda3.jsx
+++ b/src/components/Veda3.jsx
@@ -1,18 +1,17 @@
 'use client'
 
+import { H3, PXXS } from '@/components/text'
+import { Button } from '@/components/Button'
+
 import { useState } from 'react'
 import {
-  Radio,
-  RadioGroup,
   Tab,
   TabGroup,
   TabList,
   TabPanel,
   TabPanels,
 } from '@headlessui/react'
-import { StarIcon } from '@heroicons/react/20/solid'
-import { HeartIcon } from '@heroicons/react/24/outline'
-import { H2, PS, PXS } from '@/components/text'
+import { H2, PS } from '@/components/text'
 
 const product = {
   name: 'VEDA III',
@@ -117,7 +116,7 @@ export default function Veda3() {
 
   return (
     <div className="bg-transparent">
-      <div className="mx-auto max-w-2xl px-6 py-12 sm:px-6 lg:max-w-7xl lg:px-8">
+      <div className="mx-auto max-w-2xl px-6 py-12 sm:px-6 lg:max-w-7xl lg:px-0">
         <div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
           {/* Image gallery */}
           <TabGroup className="flex flex-col-reverse">
@@ -129,7 +128,7 @@ export default function Veda3() {
                     key={image.id}
                     className="group relative flex h-24 cursor-pointer items-center justify-center bg-white text-sm font-medium uppercase text-gray-900 hover:bg-gray-50 focus:outline-none focus:ring focus:ring-opacity-50 focus:ring-offset-4"
                   >
-                    <span className="sr-only">{image.name}</span>
+                    <H3 className="sr-only">{image.name}</H3>
                     <span className="absolute inset-0 overflow-hidden">
                       <img alt="" src={image.src} className="h-full w-full object-cover object-center" />
                     </span>
@@ -156,48 +155,38 @@ export default function Veda3() {
           </TabGroup>
 
           {/* Product info */}
-          <div className="mt-10 px-6 sm:mt-16 sm:px-0 lg:mt-0">
-            <h1 className="text-3xl font-bold tracking-tight text-gray-900">{product.name}</h1>
+          <div className="mt-10 px-6 sm:px-0 lg:mt-0">
+            <H2 className="">{product.name}</H2>
 
-            <div className="mt-3">
-              <H2 className="sr-only">Product information</H2>
-            </div>
-
-            <div className="mt-6">
-              <h3 className="sr-only">Description</h3>
-
-              <div className="space-y-6 text-base text-gray-700">
+            <div className="mt-2">
+              <div className="space-y-4 text-base text-gray-700">
                 {product.description.map((paragraph, index) => (
                   <PS key={index}>{paragraph}</PS>
                 ))}
               </div>
             </div>
 
-            <section aria-labelledby="details-heading" className="mt-12">
-              <H2 id="details-heading" className="sr-only">
-                Additional details
-              </H2>
-
+            <section aria-labelledby="details-heading" className="mt-6">
               <div className="border-t border-gray-200 pt-6">
-                <h3 className="text-lg font-medium text-gray-900">FEATURES</h3>
+                <H3 className="">Specifications</H3>
                 <div className="mt-4">
-                  <ul role="list" className="list-disc pl-5 space-y-2">
+                  <ul role="list" className="list-disc pl-5 space-y-1">
                     {product.details[0].items.map((item) => (
                       <li key={item} className="text-gray-700">
-                        <PXS>{item}</PXS>
+                        <PXXS>{item}</PXXS>
                       </li>
                     ))}
                   </ul>
                 </div>
               </div>
-              <form className="mt-6">
-              <div className="mt-10 flex">
-                <button
-                  type="submit"
-                  className="flex max-w-xs flex-1 items-center justify-center border border-transparent bg-gold-800 px-8 py-3 text-base font-medium text-white hover:bg-gold-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-50 sm:w-full"
+              <form className="mt-12">
+              <div className=" flex">
+                <Button
+                  variant="solid"
+                  className="flex max-w-xs flex-1 items-center justify-center  border border-transparent bg-gold-800x-8 py-3 text-base font-medium text-white hover:bg-gold-700 focus:outline-none focus:ring-2 focus:ring-gold-500 focus:ring-offset-2 focus:ring-offset-gray-50 sm:w-full"
                 >
                   Book Now
-                </button>
+                </Button>
               </div>
             </form>
             </section>
diff --git a/src/components/Veda4.jsx b/src/components/Veda4.jsx
index 88ffe0a..a4c2c8f 100644
--- a/src/components/Veda4.jsx
+++ b/src/components/Veda4.jsx
@@ -1,5 +1,8 @@
 'use client'
 
+import { H3, PXXS } from '@/components/text'
+import { Button } from '@/components/Button'
+
 import { useState } from 'react'
 import {
   Tab,
@@ -8,7 +11,7 @@ import {
   TabPanel,
   TabPanels,
 } from '@headlessui/react'
-import { H2, PS, PXS } from '@/components/text'
+import { H2, PS } from '@/components/text'
 
 const product = {
   name: 'VEDA IV',
@@ -93,8 +96,8 @@ const product = {
   ],
   description: [
     'This stunning 55-meter dahabiya offers a tranquil and organic platform for hosting personalized cruises, providing an unforgettable experience on the Nile.',
-    'VEDA IV accommodates up to 28 guests in 14 elegantly designed rooms. Each room is equipped with double beds that can be converted into singles, ensuring flexibility and comfort. All rooms feature private bathrooms. Among these, 4 rooms are luxurious suites with private balconies, offering spectacular views.',
-    'VEDA IV features two air-conditioned meeting spaces that can accommodate up to 50 people, ideal for gatherings and events. The upper deck meeting room offers a breathtaking 360-degree panoramic view, perfect for meetings or leisure. There are multiple areas designed for relaxation and suitable for workshops, yoga, or meditation, providing a serene environment for all guests. Additionally, a well-stocked library is available, featuring a curated collection of books on Egyptian history and awareness, offering guests a quiet place to read and learn.'
+    'VEDA IV accommodates up to 28 guests in 14 elegantly designed rooms. All rooms feature double bed and private bathrooms. Among these, 4 rooms are luxurious suites with private balconies, offering spectacular views.',
+    'VEDA IV features two air-conditioned meeting spaces that can accommodate up to 50 people, ideal for gatherings and events. Additionally, a well-stocked library is available, featuring a curated collection of books on Egyptian history and awareness, offering guests a quiet place to read and learn.'
   ],
   details: [
     {
@@ -122,10 +125,31 @@ export default function Veda4() {
 
   return (
     <div className="bg-transparent">
-      <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">
+      <div className="mx-auto max-w-2xl px-6 py-12 sm:px-6 lg:max-w-7xl lg:px-0">
+        <div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
           {/* Image gallery */}
-          <TabGroup className="lg:order-last">
+          <TabGroup className="flex flex-col-reverse">
+            {/* Image selector */}
+            <div className="mx-auto mt-6 hidden w-full max-w-2xl sm:block lg:max-w-none">
+              <TabList className="grid grid-cols-4 gap-6">
+                {product.images.map((image) => (
+                  <Tab
+                    key={image.id}
+                    className="group relative flex h-24 cursor-pointer items-center justify-center bg-white text-sm font-medium uppercase text-gray-900 hover:bg-gray-50 focus:outline-none focus:ring focus:ring-opacity-50 focus:ring-offset-4"
+                  >
+                    <H3 className="sr-only">{image.name}</H3>
+                    <span className="absolute inset-0 overflow-hidden">
+                      <img alt="" src={image.src} className="h-full w-full object-cover object-center" />
+                    </span>
+                    <span
+                      aria-hidden="true"
+                      className="pointer-events-none absolute inset-0 ring-2 ring-transparent ring-offset-2 group-data-[selected]:ring-indigo-500"
+                    />
+                  </Tab>
+                ))}
+              </TabList>
+            </div>
+
             <TabPanels className="aspect-h-9 aspect-w-16 w-full">
               {product.images.map((image) => (
                 <TabPanel key={image.id}>
@@ -137,79 +161,43 @@ export default function Veda4() {
                 </TabPanel>
               ))}
             </TabPanels>
-
-            {/* Image selector */}
-            <div className="mx-auto mt-6 w-full max-w-2xl sm:block lg:max-w-none">
-              <TabList className="grid grid-cols-4 gap-6">
-                {product.images.map((image) => (
-                  <Tab
-                    key={image.id}
-                    className={({ selected }) =>
-                      classNames(
-                        'group relative flex h-24 cursor-pointer items-center justify-center bg-white text-sm font-medium uppercase text-gray-900 hover:bg-gray-50 focus:outline-none focus:ring focus:ring-opacity-50 focus:ring-offset-4',
-                        selected ? 'ring-indigo-500' : 'ring-transparent'
-                      )
-                    }
-                  >
-                    <span className="sr-only">{image.name}</span>
-                    <span className="absolute inset-0 overflow-hidden">
-                      <img alt={image.alt} src={image.src} className="h-full w-full object-cover object-center" />
-                    </span>
-                    <span
-                      aria-hidden="true"
-                      className="pointer-events-none absolute inset-0 ring-2 ring-offset-2 group-focus:ring-indigo-500"
-                    />
-                  </Tab>
-                ))}
-              </TabList>
-            </div>
           </TabGroup>
 
           {/* Product info */}
-          <div className="mt-10 px-6 sm:mt-16 sm:px-0 lg:mt-0">
-            <h1 className="text-3xl font-bold tracking-tight text-gray-900">{product.name}</h1>
+          <div className="mt-10 px-6 sm:px-0 lg:mt-0">
+            <H2 className="">{product.name}</H2>
 
-            <div className="mt-3">
-              <H2 className="sr-only">Product information</H2>
-            </div>
-
-            <div className="mt-6">
-              <h3 className="sr-only">Description</h3>
-
-              <div className="space-y-6 text-base text-gray-700">
+            <div className="mt-2">
+              <div className="space-y-4 text-base text-gray-700">
                 {product.description.map((paragraph, index) => (
                   <PS key={index}>{paragraph}</PS>
                 ))}
               </div>
             </div>
 
-            <section aria-labelledby="details-heading" className="mt-12">
-              <H2 id="details-heading" className="sr-only">
-                Additional details
-              </H2>
-
+            <section aria-labelledby="details-heading" className="mt-6">
               <div className="border-t border-gray-200 pt-6">
-                <h3 className="text-lg font-medium text-gray-900">FEATURES</h3>
+                <H3 className="">Specifications</H3>
                 <div className="mt-4">
-                  <ul role="list" className="list-disc pl-5 space-y-2">
+                  <ul role="list" className="list-disc pl-5 space-y-1">
                     {product.details[0].items.map((item) => (
                       <li key={item} className="text-gray-700">
-                        <PXS>{item}</PXS>
+                        <PXXS>{item}</PXXS>
                       </li>
                     ))}
                   </ul>
                 </div>
               </div>
-              <form className="mt-6">
-                <div className="mt-10 flex">
-                  <button
-                    type="submit"
-                    className="flex max-w-xs flex-1 items-center justify-center border border-transparent bg-gold-800 px-8 py-3 text-base font-medium text-white hover:bg-gold-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-50 sm:w-full"
-                  >
-                    Book Now
-                  </button>
-                </div>
-              </form>
+              <form className="mt-12">
+              <div className=" flex">
+                <Button
+                  variant="solid"
+                  className="flex max-w-xs flex-1 items-center justify-center  border border-transparent bg-gold-800x-8 py-3 text-base font-medium text-white hover:bg-gold-700 focus:outline-none focus:ring-2 focus:ring-gold-500 focus:ring-offset-2 focus:ring-offset-gray-50 sm:w-full"
+                >
+                  Book Now
+                </Button>
+              </div>
+            </form>
             </section>
           </div>
         </div>