diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index c4ab0fc..e7864f3 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -2,9 +2,9 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import ContactCTA from "@/components/sections/contact/ContactCTA";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
 import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
-import { Mail } from "lucide-react";
+import { useState } from "react";
 
 export default function ContactPage() {
   const navItems = [
@@ -13,6 +13,18 @@ export default function ContactPage() {
     { name: "Contact", id: "/contact" },
   ];
 
+  const [email, setEmail] = useState("");
+  const [submitted, setSubmitted] = useState(false);
+
+  const handleEmailSubmit = (submittedEmail: string) => {
+    setEmail(submittedEmail);
+    setSubmitted(true);
+    setTimeout(() => {
+      setSubmitted(false);
+      setEmail("");
+    }, 3000);
+  };
+
   const footerColumns = [
     {
       title: "Product",      items: [
@@ -59,21 +71,103 @@ export default function ContactPage() {
         />
       </div>
 
-      <div id="contact" data-section="contact">
-        <ContactCTA
-          tag="Get in Touch"
-          tagIcon={Mail}
-          title="Connect with @motivation_tomillions"
-          description="Ready to get premium vendor access? Reach out directly on Instagram to purchase vendor contacts, ask questions, or get personalized recommendations for your reselling business. We're here to help you succeed."
-          buttons={[
-            { text: "DM on Instagram", href: "https://instagram.com/motivation_tomillions" },
-            { text: "Back to Home", href: "/" },
-          ]}
+      <div id="contact-info" data-section="contact-info" className="py-20">
+        <div className="content-width mx-auto px-4 space-y-12">
+          <div className="space-y-4 text-center max-w-2xl mx-auto">
+            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold">Get in Touch</h1>
+            <p className="text-base md:text-lg opacity-75">
+              Have questions about our vendor services? Want to purchase vendor access or need more information? Reach out to us through any of the channels below.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-8 max-w-3xl mx-auto">
+            <div className="text-center space-y-3">
+              <h3 className="text-lg font-semibold">Direct Contact</h3>
+              <p className="opacity-75 text-sm">DM us on Instagram for immediate support and vendor inquiries</p>
+              <a
+                href="https://instagram.com/motivation_tomillions"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-block text-primary-cta font-medium hover:underline"
+              >
+                @motivation_tomillions
+              </a>
+            </div>
+            <div className="text-center space-y-3">
+              <h3 className="text-lg font-semibold">Business Hours</h3>
+              <p className="opacity-75 text-sm">Available 24/7 for vendor access and purchase support</p>
+              <p className="font-medium">Always Open</p>
+            </div>
+            <div className="text-center space-y-3">
+              <h3 className="text-lg font-semibold">Response Time</h3>
+              <p className="opacity-75 text-sm">Quick responses to all vendor and purchase inquiries</p>
+              <p className="font-medium">Within 1 Hour</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="contact-form" data-section="contact-form">
+        <ContactCenter
+          tag="Newsletter"
+          title="Stay Updated on New Vendors"
+          description="Subscribe to receive updates about new vendors, exclusive deals, and platform improvements. We only send important updates."
           background={{ variant: "sparkles-gradient" }}
           useInvertedBackground={false}
+          inputPlaceholder="Enter your email"
+          buttonText="Subscribe"
+          onSubmit={handleEmailSubmit}
         />
       </div>
 
+      <div id="contact-details" data-section="contact-details" className="py-20">
+        <div className="content-width mx-auto px-4 max-w-2xl space-y-8">
+          <div className="space-y-4">
+            <h2 className="text-2xl md:text-3xl font-semibold">Why Contact Us?</h2>
+            <p className="opacity-75">
+              Whether you have questions about our vendor directory, need help with your purchase, want to become a vendor partner, or have feedback about our service, we're here to help.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 gap-6">
+            <div className="space-y-2">
+              <h3 className="font-semibold">Vendor Questions</h3>
+              <p className="opacity-75 text-sm">
+                Need details about specific vendors or product categories before purchasing?
+              </p>
+            </div>
+            <div className="space-y-2">
+              <h3 className="font-semibold">Purchase Support</h3>
+              <p className="opacity-75 text-sm">
+                Issues with your order or need help accessing vendor contacts after purchase?
+              </p>
+            </div>
+            <div className="space-y-2">
+              <h3 className="font-semibold">Vendor Partnerships</h3>
+              <p className="opacity-75 text-sm">
+                Interested in partnering with us or listing your vendor services?
+              </p>
+            </div>
+            <div className="space-y-2">
+              <h3 className="font-semibold">Feedback & Suggestions</h3>
+              <p className="opacity-75 text-sm">
+                Have ideas to improve VendorLinks or want to share your experience?
+              </p>
+            </div>
+          </div>
+
+          <div className="bg-card rounded-lg p-6 space-y-3 border border-accent/20">
+            <h3 className="font-semibold">Quick Start Guide</h3>
+            <ol className="space-y-2 text-sm opacity-75 list-decimal list-inside">
+              <li>Browse our vendor directory or get the complete bundle</li>
+              <li>Contact us via Instagram to confirm your purchase</li>
+              <li>Receive vendor WhatsApp numbers and direct links</li>
+              <li>Start connecting with suppliers immediately</li>
+            </ol>
+          </div>
+        </div>
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterBaseCard
           logoText="VendorLinks"
diff --git a/src/app/vendors/page.tsx b/src/app/vendors/page.tsx
index ed41cf3..c8b37d6 100644
--- a/src/app/vendors/page.tsx
+++ b/src/app/vendors/page.tsx
@@ -2,11 +2,10 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
 import ProductCardOne from "@/components/sections/product/ProductCardOne";
 import ContactCenter from "@/components/sections/contact/ContactCenter";
 import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
-import { MessageCircle, ExternalLink, Share2 } from "lucide-react";
+import { Sparkles } from "lucide-react";
 
 export default function VendorsPage() {
   const navItems = [
@@ -15,16 +14,7 @@ export default function VendorsPage() {
     { name: "Contact", id: "/contact" },
   ];
 
-  const heroMediaItems = [
-    {
-      imageSrc: "http://img.b2bpic.net/free-photo/businessman-presenting-invisible-hologram-projecting-from-tablet-advanced-technology_53876-111206.jpg?_wi=2",      imageAlt: "vendor dashboard modern interface"},
-    {
-      imageSrc: "http://img.b2bpic.net/free-photo/diverse-amazed-colleagues-excited-by-online-win-result-achievement_1163-4618.jpg?_wi=1",      imageAlt: "vendor success team achievement"},
-    {
-      imageSrc: "http://img.b2bpic.net/free-vector/world-map-business-infographic_23-2148307428.jpg?_wi=2",      imageAlt: "global vendor network map"},
-  ];
-
-  const allVendors = [
+  const vendorProducts = [
     {
       id: "1",      name: "Cologne Vendor",      price: "$15",      imageSrc: "http://img.b2bpic.net/free-photo/top-view-valentines-day-present-fragnance-dark-surface-gift-perfume-love-color-couple-woman-ring-marriage_140725-108988.jpg?_wi=1",      imageAlt: "premium cologne fragrance bottle"},
     {
@@ -42,19 +32,17 @@ export default function VendorsPage() {
     {
       id: "8",      name: "Lululemon Jacket Vendor",      price: "$15",      imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-woman-posing-sportswear-towel_23-2148429331.jpg?_wi=1",      imageAlt: "lululemon yoga jacket athletic"},
     {
-      id: "9",      name: "Essentials Vendor",      price: "$15",      imageSrc: "http://img.b2bpic.net/free-photo/essentials-clothes-flat-lay_23-2149399999.jpg?_wi=1",      imageAlt: "essentials clothing collection"},
+      id: "9",      name: "Gucci Bag Vendor",      price: "$15",      imageSrc: "http://img.b2bpic.net/free-photo/beautiful-luxury-handbag-desk-elegant-fashion-accesories_1203-8206.jpg?_wi=1",      imageAlt: "designer luxury handbag gucci"},
     {
-      id: "10",      name: "Moissanite Earrings Vendor",      price: "$15",      imageSrc: "http://img.b2bpic.net/free-photo/diamond-earrings-luxury-jewelry_8353-10192.jpg?_wi=1",      imageAlt: "moissanite diamond earrings jewelry"},
-    {
-      id: "11",      name: "Premium Accessories Bundle",      price: "$15",      imageSrc: "http://img.b2bpic.net/free-photo/luxury-accessories-collection_23-2149400000.jpg?_wi=1",      imageAlt: "luxury accessories collection bundle"},
+      id: "10",      name: "Nike SB Dunk Vendor",      price: "$15",      imageSrc: "http://img.b2bpic.net/free-photo/sneaker-shoes-advertising_23-2149387140.jpg?_wi=1",      imageAlt: "nike sb dunk sneaker shoes"},
   ];
 
   const footerColumns = [
     {
       title: "Product",      items: [
-        { label: "Home", href: "/" },
         { label: "Vendors", href: "/vendors" },
         { label: "Pricing", href: "/" },
+        { label: "Bundle", href: "/vendors" },
       ],
     },
     {
@@ -95,38 +83,24 @@ export default function VendorsPage() {
         />
       </div>
 
-      <div id="hero" data-section="hero">
-        <HeroBillboardCarousel
-          title="Complete Vendor Directory"
-          description="Browse our complete collection of 11 premium vendors. Each listing includes WhatsApp contact information, direct product links, and referral messages for easy communication with suppliers."
-          tag="All Vendors"
-          background={{ variant: "rotated-rays-animated" }}
-          buttons={[
-            { text: "Get Bundle", href: "/contact" },
-            { text: "Back to Home", href: "/" },
-          ]}
-          mediaItems={heroMediaItems}
-        />
-      </div>
-
-      <div id="vendors-section" data-section="vendors-section">
+      <div id="vendors" data-section="vendors">
         <ProductCardOne
-          products={allVendors}
-          title="All 11 Premium Vendors"
-          description="Direct contact information, product links, and referral messages for each vendor. Access WhatsApp numbers and connect instantly."
-          tag="Complete Directory"
-          gridVariant="three-columns-all-equal-width"
+          products={vendorProducts}
+          title="All Available Vendors"
+          description="Browse our complete collection of premium vendor contacts across fashion, jewelry, electronics, and lifestyle product categories. Click on any vendor to learn more and purchase access."
+          tag="Complete Vendor Directory"
+          gridVariant="four-items-2x2-equal-grid"
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
         />
       </div>
 
-      <div id="contact" data-section="contact">
+      <div id="cta" data-section="cta">
         <ContactCenter
-          tag="Ready to Connect?"
-          title="Get Instant Vendor Access"
-          description="Purchase your vendor package today on Instagram @motivation_tomillions. Individual vendors for $15 each or complete bundle for $100. All contacts delivered instantly via email."
+          tag="Get Started"
+          title="Purchase Vendor Access Today"
+          description="Choose individual vendors for $15 each or get the complete bundle of all 10 vendors for $100. Get instant access to WhatsApp contacts and direct product links."
           background={{ variant: "sparkles-gradient" }}
           useInvertedBackground={false}
         />