diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 2ddcd20..558b7ea 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -2,7 +2,7 @@
 
 import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import ContactForm from '@/components/form/ContactForm';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 
 export default function ContactPage() {
@@ -30,16 +30,13 @@ export default function ContactPage() {
           button={{ text: "Get Started" }}
         />
       </div>
-      <div id="contact-form" data-section="contact-form" className="py-20">
-        <ContactForm
-          tag="Contact Us"
-          title="Let's work together"
-          description="Have questions or want to collaborate? Send us a message and we'll be in touch."
-          centered={true}
+      <div id="contact-home" data-section="contact-home">
+        <ContactCenter 
+          tag="Contact"
+          title="Let's Connect"
+          description="Reach out to us for any inquiries."
+          background={{ variant: "plain" }}
           useInvertedBackground={false}
-          inputPlaceholder="Your email address"
-          buttonText="Send Message"
-          onSubmit={(email) => console.log("Form submitted for:", email)}
         />
       </div>
       <div id="footer" data-section="footer">
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2bd32d4..ed3ffd9 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -7,8 +7,9 @@ import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwen
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
+import { Zap } from 'lucide-react';
 
-export default function HomePage() {
+export default function Page() {
   const navItems = [
     { name: "Home", id: "/" },
     { name: "Contact", id: "/contact" }
@@ -35,45 +36,47 @@ export default function HomePage() {
       </div>
       <div id="hero" data-section="hero">
         <HeroOverlayTestimonial
-          title="Welcome to Our Platform"
-          description="Experience the next generation of digital solutions designed for your growth."
-          testimonials={[
-            { name: "John Doe", handle: "@johndoe", testimonial: "Amazing experience!", rating: 5, imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=200&h=200&auto=format&fit=crop" }
-          ]}
+          title="Welcome to Webild"
+          description="Your premier partner for digital transformation."
+          testimonials={[{
+            name: "Alex Johnson",            handle: "@alexj",            testimonial: "Transformed our business overnight!",            rating: 5
+          }]}
         />
       </div>
       <div id="services-list" data-section="services-list">
-        <FeatureCardTwentyFour
+        <FeatureCardTwentyFour 
           title="Our Services"
-          description="We provide top-notch services to help you scale."
+          description="Comprehensive solutions for your needs."
+          animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
-          animationType="slide-up"
-          features={[
-            { id: "1", title: "Service One", author: "Admin", description: "High quality service.", tags: ["web"], imageSrc: "https://images.unsplash.com/photo-1551434678-e076c223a692?q=80&w=400&h=300&auto=format&fit=crop" }
-          ]}
+          features={[{
+            id: "1",            title: "Service 1",            author: "Admin",            description: "Description of service 1",            tags: ["Tech"],
+            imageSrc: "https://example.com/image.jpg"
+          }]}
         />
       </div>
       <div id="before-after" data-section="before-after">
-        <ProductCardOne
-          title="Our Products"
-          description="Explore our curated selection of tools."
-          gridVariant="three-columns-all-equal-width"
+        <ProductCardOne 
+          title="Featured Products"
+          description="Our top products for you."
+          gridVariant="uniform-all-items-equal"
           animationType="slide-up"
           textboxLayout="default"
-          useInvertedBackground={false}
-          products={[
-            { id: "p1", name: "Product A", price: "$99", imageSrc: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?q=80&w=300&h=300&auto=format&fit=crop" },
-            { id: "p2", name: "Product B", price: "$149", imageSrc: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?q=80&w=300&h=300&auto=format&fit=crop" },
-            { id: "p3", name: "Product C", price: "$199", imageSrc: "https://images.unsplash.com/photo-1572635196237-14b3f281503f?q=80&w=300&h=300&auto=format&fit=crop" }
-          ]}
+          products={[{
+            id: "1",            name: "Product 1",            price: "$99",            imageSrc: "https://example.com/image.jpg"
+          },{
+            id: "2",            name: "Product 2",            price: "$199",            imageSrc: "https://example.com/image.jpg"
+          },{
+            id: "3",            name: "Product 3",            price: "$299",            imageSrc: "https://example.com/image.jpg"
+          }]}
         />
       </div>
       <div id="contact-home" data-section="contact-home">
-        <ContactCenter
-          tag="Get In Touch"
-          title="Ready to get started?"
-          description="Contact us for a consultation today."
+        <ContactCenter 
+          tag="Contact"
+          title="Let's Connect"
+          description="Reach out to us for any inquiries."
           background={{ variant: "plain" }}
           useInvertedBackground={false}
         />