diff --git a/src/components/CTASection.jsx b/src/components/CTASection.jsx
index deeb0f0..924ab78 100644
--- a/src/components/CTASection.jsx
+++ b/src/components/CTASection.jsx
@@ -5,8 +5,8 @@ import Input from "./ui/Input"
 
 const CTASection = () => {
   return (
-    <section className="py-20 bg-lime-400">
-      <div className="container mx-auto px-6">
+    <section className="py-20 bg-gradient-to-br from-[#0f1f1b] via-[#143529] to-[#1a2e22] text-white">
+      <div className="max-w-6xl mx-auto px-6 sm:px-10 md:px-16">
         <motion.div
           initial={{ opacity: 0, y: 30 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -14,22 +14,29 @@ const CTASection = () => {
           viewport={{ once: true }}
           className="text-center"
         >
-          <h2 className="text-5xl lg:text-6xl font-bold text-black mb-6">
-            Connect Engage <br />
-            <span className="text-gray-800">Transform</span>
+          <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
+            Connect <span className="text-green-400">Engage </span>
+            <span className="text-green-500">Transform</span>
           </h2>
-          <p className="text-xl text-black/80 mb-8 max-w-2xl mx-auto">
+
+          <p className="text-lg md:text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
             Join our community and start your transformation journey today
           </p>
 
-          <div className="max-w-md mx-auto flex gap-4">
+          <div className="max-w-lg mx-auto flex flex-col  sm:flex-row gap-4">
+
             <Input
               type="email"
               placeholder="Enter your email"
-              className="bg-white border-0 text-black placeholder:text-gray-500 flex-1"
+              className="bg-transparent border border-white/50 text-white placeholder:text-gray-400 rounded-md px-4 py-3 flex-1 transition-all duration-300 focus:outline-none focus:ring-0 focus:placeholder:text-gray-500"
             />
-            <Button className="bg-black hover:bg-gray-800 text-white px-8">Join Now</Button>
+
+
+            <Button className="bg-green-700 hover:bg-emerald-900 text-white px-6 py-3 rounded-md font-semibold transition duration-300">
+              Join Now
+            </Button>
           </div>
+
         </motion.div>
       </div>
     </section>
diff --git a/src/pages/About.jsx b/src/pages/About.jsx
index 84e856c..b19178b 100644
--- a/src/pages/About.jsx
+++ b/src/pages/About.jsx
@@ -79,7 +79,7 @@ const AboutUs = () => {
   return (
     <div className="bg-black text-white">
 
-  {/* Hero Section */}
+      {/* Hero Section */}
       <section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-black pt-20">
         {/* Background Floating Elements */}
         <div className="absolute inset-0">
@@ -144,10 +144,10 @@ const AboutUs = () => {
                 transition={{ duration: 0.8, delay: 0.4 }}
                 className="text-xl text-gray-300 mb-8 max-w-lg leading-relaxed"
               >
-                Transforming lives through fitness since 2019. We're more than just a gym – 
+                Transforming lives through fitness since 2019. We're more than just a gym –
                 we're your partners in achieving a healthier, stronger, and more confident you.
               </motion.p>
-              
+
               <motion.div
                 initial={{ opacity: 0, y: 30 }}
                 animate={{ opacity: 1, y: 0 }}
@@ -155,8 +155,8 @@ const AboutUs = () => {
                 className="flex flex-col sm:flex-row gap-4"
               >
                 <Button
-                size="lg"
-                className="bg-lime-400 hover:bg-lime-500 text-lime-500 font-semibold px-8 py-4 text-lg"
+                  size="lg"
+                  className="bg-lime-400 hover:bg-lime-500 text-lime-500 font-semibold px-8 py-4 text-lg"
                 > Our Story </Button>
 
                 <Button
@@ -182,7 +182,7 @@ const AboutUs = () => {
                   alt="Man doing weight lifting"
                   className="w-full max-w-md h-auto object-cover rounded-lg"
                 />
-               </div>
+              </div>
             </motion.div>
           </div>
         </div>
@@ -222,17 +222,17 @@ const AboutUs = () => {
                 Who We <span className="text-lime-400">Are</span>
               </h2>
               <p className="text-xl text-gray-300 mb-6 leading-relaxed">
-                Fitolution was born from a simple belief: everyone deserves access to quality fitness 
-                guidance and a supportive community. Founded in 2019 by a team of passionate fitness 
-                professionals, we started with a vision to revolutionize how people approach their 
+                Fitolution was born from a simple belief: everyone deserves access to quality fitness
+                guidance and a supportive community. Founded in 2019 by a team of passionate fitness
+                professionals, we started with a vision to revolutionize how people approach their
                 health and wellness journey.
               </p>
               <p className="text-lg text-gray-300 mb-6 leading-relaxed">
-                What began as a small local gym has evolved into a comprehensive fitness platform 
+                What began as a small local gym has evolved into a comprehensive fitness platform
                 that combines cutting-edge technology with personalized training approaches.
               </p>
               <p className="text-lg text-gray-300 leading-relaxed">
-                Today, Fitolution continues to innovate, offering both in-person and digital 
+                Today, Fitolution continues to innovate, offering both in-person and digital
                 solutions to make fitness accessible, enjoyable, and sustainable for everyone.
               </p>
             </motion.div>
@@ -269,8 +269,8 @@ const AboutUs = () => {
               Our <span className="text-lime-400">Mission</span>
             </h2>
             <p className="text-xl text-gray-300 max-w-4xl mx-auto leading-relaxed">
-              To empower individuals to transform their lives through fitness, providing expert 
-              guidance, state-of-the-art facilities, and a supportive community that makes 
+              To empower individuals to transform their lives through fitness, providing expert
+              guidance, state-of-the-art facilities, and a supportive community that makes
               achieving health goals both achievable and enjoyable.
             </p>
           </motion.div>
@@ -335,7 +335,7 @@ const AboutUs = () => {
       </section>
 
       {/* Team Section */}
- <section className="py-20 bg-black">
+      <section className="py-20 bg-black">
         <div className="container mx-auto px-6">
           <motion.div
             initial={{ opacity: 0, y: 30 }}
@@ -368,7 +368,7 @@ const AboutUs = () => {
                     alt={member.name}
                     className="w-24 h-24 rounded-full mx-auto object-cover"
                   />
-        
+
                 </div>
                 <h3 className="text-xl font-semibold text-white mb-2">{member.name}</h3>
                 <p className="text-lime-400 font-medium mb-2">{member.role}</p>
@@ -381,8 +381,9 @@ const AboutUs = () => {
       </section>
 
       {/* CTA Section - Matching your existing style */}
-      <section className="py-20 bg-lime-400">
-        <div className="container mx-auto px-6">
+
+      <section className="py-20 bg-gradient-to-br from-[#0f1f1b] via-[#143529] to-[#1a2e22] text-white">
+        <div className="container mx-auto px-4 md:px-6">
           <motion.div
             initial={{ opacity: 0, y: 30 }}
             whileInView={{ opacity: 1, y: 0 }}
@@ -390,31 +391,29 @@ const AboutUs = () => {
             viewport={{ once: true }}
             className="text-center"
           >
-            <h2 className="text-5xl lg:text-6xl font-bold text-black mb-6">
-              Ready to Start <br />
-              <span className="text-gray-800">Your Journey?</span>
+            <h2 className="text-4xl md:text-5xl font-bold mb-4 leading-tight">
+              Ready to Start Your Journey?
             </h2>
-            <p className="text-xl text-black/80 mb-8 max-w-2xl mx-auto">
-              Join thousands of members who have transformed their lives with Fitolution. 
+            <p className="text-base md:text-lg text-white/80 mb-6 max-w-2xl mx-auto leading-relaxed">
+              Join thousands who have transformed their lives with Fitolution.
               Your healthiest, strongest self is waiting.
             </p>
 
-            <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <Button className="bg-black hover:bg-gray-800 text-white px-8 py-4 text-lg">
+            <div className="flex flex-col sm:flex-row gap-4 justify-center mt-6">
+              <button className="bg-green-500 hover:bg-green-400 text-black px-6 py-3 text-base font-semibold rounded-md transition duration-300 transform hover:scale-105">
                 Start Your Journey
-              </Button>
-             <Button
-                variant="outline"
-                className="border-black text-black hover:bg-black hover:text-white px-8 py-4 text-lg bg-white"
-              >
+              </button>
+
+              <button className="bg-green-500 hover:bg-green-400 text-black px-6 py-3 text-base font-semibold rounded-md transition duration-300 transform hover:scale-105">
                 View Programs
-              </Button>
+              </button>
             </div>
           </motion.div>
         </div>
       </section>
+
     </div>
   )
 }
 
-export default AboutUs
\ No newline at end of file
+export default AboutUs
diff --git a/src/pages/Services.jsx b/src/pages/Services.jsx
index 926e614..569514d 100644
--- a/src/pages/Services.jsx
+++ b/src/pages/Services.jsx
@@ -1,8 +1,8 @@
-"use client";
-import { motion } from "framer-motion";
-import { Dumbbell, Users, Clock, Target, Zap, Heart } from "lucide-react";
-import Button from "../components/ui/Button";
-import Card from "../components/ui/Card";
+"use client"
+import { motion } from "framer-motion"
+import { Dumbbell, Users, Clock, Target, Zap, Heart } from "lucide-react"
+import Button from "../components/ui/Button"
+import Card from "../components/ui/Card"
 
 const services = [
   {
@@ -47,7 +47,7 @@ const services = [
     features: ["Keycard access", "Security cameras", "Emergency support", "Flexible hours"],
     image: "https://images.unsplash.com/photo-1571902943202-507ec2618e8f?w=500&h=300&fit=crop",
   },
-];
+]
 
 const containerVariants = {
   hidden: { opacity: 0 },
@@ -57,7 +57,7 @@ const containerVariants = {
       staggerChildren: 0.1,
     },
   },
-};
+}
 
 const itemVariants = {
   hidden: { opacity: 0, y: 20 },
@@ -68,22 +68,22 @@ const itemVariants = {
       duration: 0.5,
     },
   },
-};
+}
 
 const Services = () => {
   return (
-    <div className="min-h-screen bg-black overflow-x-hidden pt-20">
+    <div className="min-h-screen bg-black pt-20">
       {/* Hero Section */}
-      <section className="relative py-20 overflow-x-hidden">
+      <section className="relative py-20 overflow-hidden">
         <div className="absolute inset-0 bg-gradient-to-r from-lime-400/20 to-green-400/20" />
-        <div className="max-w-screen-xl w-full mx-auto px-4 relative z-10">
+        <div className="container mx-auto px-4 relative z-10">
           <motion.div
             initial={{ opacity: 0, y: 30 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.8 }}
             className="text-center max-w-4xl mx-auto"
           >
-            <h1 className="text-5xl md:text-6xl font-bold text-white mb-6 break-words">
+            <h1 className="text-5xl md:text-6xl font-bold text-white mb-6">
               Our <span className="text-lime-400">Services</span>
             </h1>
             <p className="text-xl text-gray-300 mb-8">
@@ -94,8 +94,8 @@ const Services = () => {
       </section>
 
       {/* Services Grid */}
-      <section className="py-20 overflow-x-hidden">
-        <div className="max-w-screen-xl w-full mx-auto px-4">
+      <section className="py-20">
+        <div className="container mx-auto px-4">
           <motion.div
             variants={containerVariants}
             initial="hidden"
@@ -137,27 +137,33 @@ const Services = () => {
       </section>
 
       {/* CTA Section */}
-      <section className="py-20 bg-gradient-to-r from-lime-400 to-green-400 overflow-x-hidden">
-        <div className="max-w-screen-xl w-full mx-auto px-4 text-center">
+      <section className="py-20 bg-gradient-to-br from-[#0f1f1b] via-[#143529] to-[#1a2e22] text-white">
+        <div className="container mx-auto px-4 text-center">
           <motion.div
             initial={{ opacity: 0, y: 30 }}
             whileInView={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.8 }}
             viewport={{ once: true }}
           >
-            <h2 className="text-4xl font-bold text-black mb-6">Ready to Start Your Fitness Journey?</h2>
-            <p className="text-xl text-black/80 mb-8 max-w-2xl mx-auto">
+
+            <h2 className="text-4xl md:text-5xl font-bold mb-4 leading-tight">
+              Ready to Start Your Journey?
+            </h2>
+
+            <p className="text-base md:text-lg text-white/80 mb-6 max-w-2xl mx-auto leading-relaxed">
               Join thousands of members who have transformed their lives with our expert guidance and world-class
               facilities.
             </p>
-            <Button size="lg" className="bg-black text-lime-400 hover:bg-gray-800 px-8 py-3 text-lg">
+
+            <button className="bg-green-500 hover:bg-green-400 text-black px-6 py-3 text-base font-semibold rounded-md transition duration-300 transform hover:scale-105">
               Get Started Today
-            </Button>
+            </button>
+
           </motion.div>
         </div>
       </section>
     </div>
-  );
-};
+  )
+}
 
-export default Services;
+export default Services