diff --git a/src/app/page.tsx b/src/app/page.tsx
index be43957..633fc20 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -7,8 +7,8 @@ import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
 import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
 import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
-import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FooterBase from '@/components/sections/footer/FooterBase';
+import ContactText from '@/components/sections/contact/ContactText';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
 
 export default function Page() {
   const navItems = [{ name: 'Home', id: '/' }, { name: 'About', id: '/about' }, { name: 'Contact', id: '/contact' }];
@@ -37,10 +37,10 @@ export default function Page() {
         <PricingCardFive title="Pricing" description="Simple, transparent pricing plans." animationType="slide-up" textboxLayout="default" useInvertedBackground={false} plans={[{ id: 'basic', tag: 'Start', price: '$49', period: '/mo', description: 'Essential tools for small teams.', button: { text: 'Get Started' }, featuresTitle: 'Includes:', features: ['Feature 1', 'Feature 2'] }, { id: 'pro', tag: 'Growth', price: '$99', period: '/mo', description: 'Advanced features for scaling.', button: { text: 'Go Pro' }, featuresTitle: 'Includes:', features: ['All Basic features', 'Priority Support'] }]} />
       </div>
       <div id="contact" data-section="contact">
-        <ContactCenter tag="Connect" title="Get in touch" description="Have a project in mind? We'd love to hear from you." background={{ variant: 'plain' }} useInvertedBackground={false} />
+        <ContactText text="Ready to transform your brand identity? Let's build something exceptional together." background={{ variant: 'radial-gradient' }} buttons={[{ text: 'Start Project', href: '#contact' }]} />
       </div>
       <div id="footer" data-section="footer">
-        <FooterBase logoText="Webild" columns={[{ title: 'Navigation', items: [{ label: 'Home', href: '/' }, { label: 'About', href: '/about' }] }]} />
+        <FooterMedia logoText="Webild" columns={[{ title: 'Navigation', items: [{ label: 'Home', href: '/' }, { label: 'About', href: '/about' }] }]} imageSrc="https://images.unsplash.com/photo-1497215728101-856f4ea42174?q=80&w=800&auto=format&fit=crop" />
       </div>
     </ThemeProvider>
   );