diff --git a/src/components/Veda1.jsx b/src/components/Veda1.jsx
index 61dfe94..38d2f52 100644
--- a/src/components/Veda1.jsx
+++ b/src/components/Veda1.jsx
@@ -1,5 +1,8 @@
 'use client'
 
+import { H1, H3, H4, P, PXS, PXXS } from '@/components/text'
+import { Button } from '@/components/Button'
+
 import { useState } from 'react'
 import {
   Radio,
@@ -126,7 +129,7 @@ export default function Example() {
 
   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">
@@ -138,7 +141,7 @@ export default function Example() {
                     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>
@@ -165,48 +168,38 @@ export default function Example() {
           </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">
-                        <span className="text-gray-900">{item}</span>
+                        <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-800x-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/Veda2.jsx b/src/components/Veda2.jsx
index 1cede40..5cc7b29 100644
--- a/src/components/Veda2.jsx
+++ b/src/components/Veda2.jsx
@@ -8,7 +8,7 @@ import {
   TabPanel,
   TabPanels,
 } from '@headlessui/react'
-import { H2, PS } from '@/components/text'
+import { H2, PS, PXS } from '@/components/text'
 
 const product = {
   name: 'VEDA II',
@@ -200,7 +200,7 @@ export default function Veda2() {
                   <ul role="list" className="list-disc pl-5 space-y-2">
                     {product.details[0].items.map((item) => (
                       <li key={item} className="text-gray-700">
-                        <span className="text-gray-900">{item}</span>
+                        <PXS>{item}</PXS>
                       </li>
                     ))}
                   </ul>
diff --git a/src/components/Veda3.jsx b/src/components/Veda3.jsx
index bcf85f7..fdbb6b4 100644
--- a/src/components/Veda3.jsx
+++ b/src/components/Veda3.jsx
@@ -12,7 +12,7 @@ import {
 } from '@headlessui/react'
 import { StarIcon } from '@heroicons/react/20/solid'
 import { HeartIcon } from '@heroicons/react/24/outline'
-import { H2, PS } from '@/components/text'
+import { H2, PS, PXS } from '@/components/text'
 
 const product = {
   name: 'VEDA III',
@@ -184,7 +184,7 @@ export default function Veda3() {
                   <ul role="list" className="list-disc pl-5 space-y-2">
                     {product.details[0].items.map((item) => (
                       <li key={item} className="text-gray-700">
-                        <span className="text-gray-900">{item}</span>
+                        <PXS>{item}</PXS>
                       </li>
                     ))}
                   </ul>
diff --git a/src/components/Veda4.jsx b/src/components/Veda4.jsx
index e09fa56..88ffe0a 100644
--- a/src/components/Veda4.jsx
+++ b/src/components/Veda4.jsx
@@ -8,7 +8,7 @@ import {
   TabPanel,
   TabPanels,
 } from '@headlessui/react'
-import { H2, PS } from '@/components/text'
+import { H2, PS, PXS } from '@/components/text'
 
 const product = {
   name: 'VEDA IV',
@@ -194,7 +194,7 @@ export default function Veda4() {
                   <ul role="list" className="list-disc pl-5 space-y-2">
                     {product.details[0].items.map((item) => (
                       <li key={item} className="text-gray-700">
-                        <span className="text-gray-900">{item}</span>
+                        <PXS>{item}</PXS>
                       </li>
                     ))}
                   </ul>