diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 5dd2231..c6f805f 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -2,44 +2,44 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import ContactText from '@/components/sections/contact/ContactText';
-import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 
 export default function ContactPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingOverlay
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "About", id: "/about" },
-          { name: "Reservations", id: "/reservations" },
-          { name: "Contact", id: "/contact" },
-        ]}
-        brandName="Roof Bistro"
-      />
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "About", id: "/about" },
+            { name: "Reservations", id: "/reservations" },
+            { name: "Contact", id: "/contact" },
+          ]}
+          brandName="Roof Bistro"
+        />
+      </div>
       <main className="pt-20">
-        <ContactText
-            text="We are located at 123 Sky High Ave, Downtown. Reach out to us for any inquiries or feedback."
+        <div id="contact" data-section="contact">
+          <ContactCTA
+            tag="Inquiries"
+            title="Get in Touch"
+            description="We are located at 123 Sky High Ave, Downtown. Reach out to us for any inquiries or feedback."
+            buttons={[{ text: "Call Us", href: "tel:+38344999888" }]}
             background={{ variant: "plain" }}
-        />
-        <TestimonialCardSix
-            title="What Our Customers Say"
-            animationType="slide-up"
-            textboxLayout="default"
-            testimonials={[
-                { id: "1", name: "Alex P.", handle: "@alex_p", testimonial: "The best dining experience in town!" },
-                { id: "2", name: "Jamie D.", handle: "@jamie_d", testimonial: "Fantastic atmosphere and great cocktails." }
-            ]}
-        />
+            useInvertedBackground={false}
+          />
+        </div>
       </main>
-      <FooterBaseCard
-        logoText="Roof Bistro"
-        columns={[
-          { title: "Location & Contact", items: [{ label: "📍 123 Sky High Ave, Downtown", href: "#" }, { label: "📞 +383 44 999 888", href: "tel:+38344999888" }] },
-          { title: "Links", items: [{ label: "Home", href: "/" }, { label: "About", href: "/about" }, { label: "Reservations", href: "/reservations" }, { label: "Contact", href: "/contact" }] }
-        ]}
-      />
+      <div id="footer" data-section="footer">
+        <FooterBaseCard
+          logoText="Roof Bistro"
+          columns={[
+            { title: "Location & Contact", items: [{ label: "📍 123 Sky High Ave, Downtown", href: "#" }, { label: "📞 +383 44 999 888", href: "tel:+38344999888" }] },
+            { title: "Links", items: [{ label: "Home", href: "/" }, { label: "About", href: "/about" }, { label: "Reservations", href: "/reservations" }, { label: "Contact", href: "/contact" }] }
+          ]}
+        />
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file