diff --git a/app/page.tsx b/app/page.tsx
index 9f4d422..68a4c05 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2,7 +2,7 @@
 import Accordian from "@/components/Accordian";
 import ContactPage from "@/components/Contact";
 import HeroSection from "@/components/main/Hero";
-import PricingSection from "@/components/PricingSection";
+import PricingSection from "@/components/Pricing/PricingSection";
 
 import Services from "@/components/Services";
 import TeamPage from "@/components/Team";
diff --git a/app/pricing/page.tsx b/app/pricing/page.tsx
index 0dbddc5..7d58239 100644
--- a/app/pricing/page.tsx
+++ b/app/pricing/page.tsx
@@ -1,4 +1,4 @@
-import PricingSection from "@/components/PricingSection"
+import PricingSection from "@/components/Pricing/PricingSection"
 
 const page = ()=> {
     
diff --git a/components/Pricing/GrowthCard.tsx b/components/Pricing/GrowthCard.tsx
new file mode 100644
index 0000000..c1c23cc
--- /dev/null
+++ b/components/Pricing/GrowthCard.tsx
@@ -0,0 +1,55 @@
+import { Check} from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import Link from "next/link"
+
+export const GrowthCard = () => {
+    return(
+        <Card className="relative bg-white rounded-3xl p-8 shadow-2xl flex flex-col justify-between transition-all duration-300 hover:shadow-[0_0_30px_rgba(255,255,255,0.2)] hover:scale-105 border border-gray-200">
+        <div>
+          <div className="absolute -top-3 left-6">
+            <span className="bg-gray-800 text-white px-4 py-1.5 rounded-full text-sm shadow-lg">
+              Ongoing Support
+            </span>
+          </div>
+          <div className="inline-block bg-gray-800 text-white px-4 py-1.5 rounded-full text-sm mb-6 shadow-lg">
+            Monthly Retainer
+          </div>
+          <h2 className="text-2xl font-bold mb-2 text-gray-800">Growth Retainer Package</h2>
+          <div className="mb-4">
+            <span className="text-4xl font-bold text-gray-800">$2497/month</span>
+          </div>
+          <p className="text-gray-600 mb-8">No commitment, cancel anytime</p>
+          
+          <div className="mb-8">
+            <h3 className="text-xl font-semibold mb-4 text-gray-800">Dedicated Monthly Services:</h3>
+            <ul className="space-y-4">
+              {[
+                "60 hours of development time per month",
+                "Flexible hours allocation",
+                "Weekly strategy calls",
+                "Priority feature development",
+                "Continuous maintenance & optimization",
+                "Same-day emergency support"
+              ].map((feature, index) => (
+                <li key={index} className="flex items-center gap-3">
+                  <div className="bg-gray-800 rounded-full p-1 shadow-md">
+                    <Check className="w-4 h-4 text-white" />
+                  </div>
+                  <span className="text-gray-600">{feature}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+        
+        <Link href="https://cal.com/acex-labs">
+        <div className="space-y-4">
+          <Button className="w-full bg-gray-800 text-white hover:bg-gray-700 rounded-xl py-6 text-lg transition-all duration-300 shadow-lg hover:shadow-xl">
+            Schedule a Call →
+          </Button>
+        </div>
+        </Link>
+      </Card>
+    )
+}
\ No newline at end of file
diff --git a/components/Pricing/MvpCard.tsx b/components/Pricing/MvpCard.tsx
new file mode 100644
index 0000000..a67fa73
--- /dev/null
+++ b/components/Pricing/MvpCard.tsx
@@ -0,0 +1,58 @@
+import { Check} from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import Link from "next/link"
+
+
+export const MvpCard = () => {
+    
+    return (
+        <Card className="relative bg-white rounded-3xl p-8 shadow-2xl flex flex-col justify-between transition-all duration-300 hover:shadow-[0_0_30px_rgba(255,255,255,0.2)] hover:scale-105 border border-gray-200">
+        <div>
+          <div className="absolute -top-3 left-6">
+            <span className="bg-gray-800 text-white px-4 py-1.5 rounded-full text-sm font-medium shadow-lg">
+              Most Popular
+            </span>
+          </div>
+          <div className="inline-block bg-gray-800 text-white px-4 py-1.5 rounded-full text-sm mb-6 shadow-lg">
+            One time
+          </div>
+          <h2 className="text-2xl font-bold mb-2 text-gray-800">MVP Development Package</h2>
+          <div className="mb-4">
+            <span className="text-4xl font-bold text-gray-800">Starting at $1997</span>
+          </div>
+          <p className="text-red-600 mb-8">20% off for early adopters</p>
+          
+          <div className="mb-8">
+            <h3 className="text-xl font-semibold mb-4 text-gray-800">What&apos;s Included:</h3>
+            <ul className="space-y-4">
+              {[
+                "Complete MVP development in 2-3 weeks",
+                "Web application/ Mobile App",
+                "Modern, scalable tech stack",
+                "Seamless integrations (payments, auth, etc.)",
+                "30 days of free maintenance",
+                "Personalized, founder-led development",
+                "Regular updates and transparent process"
+              ].map((feature, index) => (
+                <li key={index} className="flex items-center gap-3">
+                  <div className="bg-gray-800 rounded-full p-1 shadow-md">
+                    <Check className="w-4 h-4 text-white" />
+                  </div>
+                  <span className="text-gray-600">{feature}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+        
+        <Link href="https://cal.com/acex-labs">
+        <div className="space-y-4">
+          <Button className="w-full bg-gray-800 text-white hover:bg-gray-700 rounded-xl py-6 text-lg transition-all duration-300 shadow-lg hover:shadow-xl">
+            Get Started Now →
+          </Button>
+        </div>
+        </Link>
+      </Card>
+    )
+}
\ No newline at end of file
diff --git a/components/Pricing/PricingSection.tsx b/components/Pricing/PricingSection.tsx
new file mode 100644
index 0000000..7784c89
--- /dev/null
+++ b/components/Pricing/PricingSection.tsx
@@ -0,0 +1,35 @@
+'use client'
+
+import { Button } from "@/components/ui/button"
+import { usePathname, useRouter } from "next/navigation"
+import { MvpCard } from "./MvpCard"
+import { StartupCard } from "./StartupCard"
+import { GrowthCard } from "./GrowthCard"
+
+export default function Component() {
+  const router = useRouter();
+  const currentPath = usePathname();
+
+  return (
+    <div className="container mx-auto px-4 py-16 max-w-7xl ">
+      <div className="grid md:grid-cols-3 gap-8">
+        {/* MVP Development Package Card */}
+        <MvpCard/>
+        {/* Startup Booster Package Card */}
+        <StartupCard/>
+        {/* Growth Retainer Package Card */}
+        <GrowthCard/>
+      </div>
+      { currentPath === '/' &&
+      <div className="mx-auto flex justify-center items-center">
+        <Button variant="outline" className="w-auto mt-12 text-white border-white hover:bg-white hover:text-black rounded-xl py-4 px-8 text-sm transition-all duration-300"
+        onClick={()=>{
+          router.push("/pricing");
+        }}>
+              View Details
+            </Button>
+            </div>
+}
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/components/Pricing/StartupCard.tsx b/components/Pricing/StartupCard.tsx
new file mode 100644
index 0000000..f1b6102
--- /dev/null
+++ b/components/Pricing/StartupCard.tsx
@@ -0,0 +1,52 @@
+import { Check} from "lucide-react"
+import Link from "next/link"
+import { Button } from "../ui/button"
+import { Card } from "../ui/card"
+
+export const StartupCard = () => {
+    return(
+        <Card className="relative bg-black rounded-3xl p-8 shadow-2xl flex flex-col justify-between transition-all duration-300 hover:shadow-[0_0_30px_rgba(255,255,255,0.2)] hover:scale-105 border border-gray-700">
+        <div>
+          <div className="inline-block bg-white text-black px-4 py-1.5 rounded-full text-sm mb-6 shadow-lg">
+            Quarterly Plan
+          </div>
+          <h2 className="text-2xl font-bold mb-2 text-white">Startup Booster Package</h2>
+          <div className="mb-4">
+            <span className="text-4xl font-bold text-white">$4997/quarter</span>
+          </div>
+          <p className="text-gray-400 mb-8">Billed quarterly, 3-month minimum</p>
+          
+          <div className="mb-8">
+            <h3 className="text-xl font-semibold mb-4 text-white">What&apos;s Included:</h3>
+            <ul className="space-y-4">
+              {[
+                "120 hours of development time per quarter",
+                "Bi-weekly strategy calls",
+                "Priority bug fixes and feature updates",
+                "Quarterly performance review",
+                "Dedicated project manager",
+                "Scalability planning and implementation",
+                "24/7 emergency support"
+              ].map((feature, index) => (
+                <li key={index} className="flex items-center gap-3">
+                  <div className="bg-white rounded-full p-1 shadow-md">
+                    <Check className="w-4 h-4 text-black" />
+                  </div>
+                  <span className="text-gray-300">{feature}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+
+        <Link href="https://cal.com/acex-labs">
+        <div className="space-y-4">
+          <Button className="w-full bg-white text-black hover:bg-gray-200 rounded-xl py-6 text-lg transition-all duration-300 shadow-lg hover:shadow-xl">
+            Start Your Journey →
+          </Button>
+        </div>
+        </Link>
+      </Card>
+
+    )
+}
\ No newline at end of file
diff --git a/components/PricingSection.tsx b/components/PricingSection.tsx
deleted file mode 100644
index 3a241fc..0000000
--- a/components/PricingSection.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-'use client'
-
-import { Check } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import { Card } from "@/components/ui/card"
-
-export default function Component() {
-  return (
-    <div className="container mx-auto px-4 py-16 max-w-7xl ">
-      <div className="grid md:grid-cols-3 gap-8">
-        {/* MVP Development Package Card */}
-        <Card className="relative bg-white rounded-3xl p-8 shadow-2xl flex flex-col justify-between transition-all duration-300 hover:shadow-[0_0_30px_rgba(255,255,255,0.2)] hover:scale-105 border border-gray-200">
-          <div>
-            <div className="absolute -top-3 left-6">
-              <span className="bg-gray-800 text-white px-4 py-1.5 rounded-full text-sm font-medium shadow-lg">
-                Most Popular
-              </span>
-            </div>
-            <div className="inline-block bg-gray-800 text-white px-4 py-1.5 rounded-full text-sm mb-6 shadow-lg">
-              One time
-            </div>
-            <h2 className="text-2xl font-bold mb-2 text-gray-800">MVP Development Package</h2>
-            <div className="mb-4">
-              <span className="text-4xl font-bold text-gray-800">Starting at $1997</span>
-            </div>
-            <p className="text-red-600 mb-8">20% off for early adopters</p>
-            
-            <div className="mb-8">
-              <h3 className="text-xl font-semibold mb-4 text-gray-800">What&apos;s Included:</h3>
-              <ul className="space-y-4">
-                {[
-                  "Complete MVP development in 2-3 weeks",
-                  "Web application/ Mobile App",
-                  "Modern, scalable tech stack",
-                  "Seamless integrations (payments, auth, etc.)",
-                  "30 days of free maintenance",
-                  "Personalized, founder-led development",
-                  "Regular updates and transparent process"
-                ].map((feature, index) => (
-                  <li key={index} className="flex items-center gap-3">
-                    <div className="bg-gray-800 rounded-full p-1 shadow-md">
-                      <Check className="w-4 h-4 text-white" />
-                    </div>
-                    <span className="text-gray-600">{feature}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          </div>
-          
-          <div className="space-y-4">
-            <Button className="w-full bg-gray-800 text-white hover:bg-gray-700 rounded-xl py-6 text-lg transition-all duration-300 shadow-lg hover:shadow-xl">
-              Get Started Now →
-            </Button>
-            <Button variant="outline" className="w-full text-white-800 border-gray-800 hover:bg-gray-800 hover:text-white rounded-xl py-4 text-sm transition-all duration-300">
-              View Details
-            </Button>
-          </div>
-        </Card>
-
-        {/* Startup Booster Package Card */}
-        <Card className="relative bg-black rounded-3xl p-8 shadow-2xl flex flex-col justify-between transition-all duration-300 hover:shadow-[0_0_30px_rgba(255,255,255,0.2)] hover:scale-105 border border-gray-700">
-          <div>
-            <div className="inline-block bg-white text-black px-4 py-1.5 rounded-full text-sm mb-6 shadow-lg">
-              Quarterly Plan
-            </div>
-            <h2 className="text-2xl font-bold mb-2 text-white">Startup Booster Package</h2>
-            <div className="mb-4">
-              <span className="text-4xl font-bold text-white">$4997/quarter</span>
-            </div>
-            <p className="text-gray-400 mb-8">Billed quarterly, 3-month minimum</p>
-            
-            <div className="mb-8">
-              <h3 className="text-xl font-semibold mb-4 text-white">What&apos;s Included:</h3>
-              <ul className="space-y-4">
-                {[
-                  "120 hours of development time per quarter",
-                  "Bi-weekly strategy calls",
-                  "Priority bug fixes and feature updates",
-                  "Quarterly performance review",
-                  "Dedicated project manager",
-                  "Scalability planning and implementation",
-                  "24/7 emergency support"
-                ].map((feature, index) => (
-                  <li key={index} className="flex items-center gap-3">
-                    <div className="bg-white rounded-full p-1 shadow-md">
-                      <Check className="w-4 h-4 text-black" />
-                    </div>
-                    <span className="text-gray-300">{feature}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          </div>
-          
-          <div className="space-y-4">
-            <Button className="w-full bg-white text-black hover:bg-gray-200 rounded-xl py-6 text-lg transition-all duration-300 shadow-lg hover:shadow-xl">
-              Start Your Journey →
-            </Button>
-            <Button variant="outline" className="w-full text-white border-white hover:bg-white hover:text-black rounded-xl py-4 text-sm transition-all duration-300">
-              View Details
-            </Button>
-          </div>
-        </Card>
-
-        {/* Growth Retainer Package Card */}
-        <Card className="relative bg-white rounded-3xl p-8 shadow-2xl flex flex-col justify-between transition-all duration-300 hover:shadow-[0_0_30px_rgba(255,255,255,0.2)] hover:scale-105 border border-gray-200">
-          <div>
-            <div className="absolute -top-3 left-6">
-              <span className="bg-gray-800 text-white px-4 py-1.5 rounded-full text-sm shadow-lg">
-                Ongoing Support
-              </span>
-            </div>
-            <div className="inline-block bg-gray-800 text-white px-4 py-1.5 rounded-full text-sm mb-6 shadow-lg">
-              Monthly Retainer
-            </div>
-            <h2 className="text-2xl font-bold mb-2 text-gray-800">Growth Retainer Package</h2>
-            <div className="mb-4">
-              <span className="text-4xl font-bold text-gray-800">$2497/month</span>
-            </div>
-            <p className="text-gray-600 mb-8">No commitment, cancel anytime</p>
-            
-            <div className="mb-8">
-              <h3 className="text-xl font-semibold mb-4 text-gray-800">Dedicated Monthly Services:</h3>
-              <ul className="space-y-4">
-                {[
-                  "60 hours of development time per month",
-                  "Flexible hours allocation",
-                  "Weekly strategy calls",
-                  "Priority feature development",
-                  "Continuous maintenance & optimization",
-                  "Same-day emergency support"
-                ].map((feature, index) => (
-                  <li key={index} className="flex items-center gap-3">
-                    <div className="bg-gray-800 rounded-full p-1 shadow-md">
-                      <Check className="w-4 h-4 text-white" />
-                    </div>
-                    <span className="text-gray-600">{feature}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          </div>
-          
-          <div className="space-y-4">
-            <Button className="w-full bg-gray-800 text-white hover:bg-gray-700 rounded-xl py-6 text-lg transition-all duration-300 shadow-lg hover:shadow-xl">
-              Schedule a Call →
-            </Button>
-            <Button variant="outline" className="w-full text-white-800 border-gray-800 hover:bg-gray-800 hover:text-white rounded-xl py-4 text-sm transition-all duration-300">
-              View Details
-            </Button>
-          </div>
-        </Card>
-      </div>
-    </div>
-  )
-}
\ No newline at end of file