diff --git a/src/app/checkout/page.tsx b/src/app/checkout/page.tsx
index 6f09714..ef998ea 100644
--- a/src/app/checkout/page.tsx
+++ b/src/app/checkout/page.tsx
@@ -3,31 +3,46 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import ContactCenter from '@/components/sections/contact/ContactCenter';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
 import ReactLenis from "lenis/react";
 
 export default function CheckoutPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider 
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
       <ReactLenis root>
-        <NavbarLayoutFloatingOverlay 
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Shop", id: "/shop" },
-            { name: "Checkout", id: "/checkout" }
-          ]} 
-          brandName="SSW" 
-        />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay 
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Shop", id: "/shop" },
+              { name: "Checkout", id: "/checkout" }
+            ]} 
+            brandName="SSW" 
+          />
+        </div>
         <div className="pt-32 pb-20 px-6 max-w-4xl mx-auto">
           <h1 className="text-4xl font-bold mb-8">Checkout</h1>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
             <div>
               <h2 className="text-xl font-semibold mb-4">Verzendgegevens</h2>
-              <ContactCenter 
+              <ContactCTA 
+                tag="Bestellen"
                 title="Vul uw gegevens in"
                 description="Wij bezorgen uw modulaire keuken direct aan huis."
-                inputPlaceholder="E-mailadres"
-                buttonText="Bevestigen"
+                buttons={[{ text: "Bevestigen" }]}
+                background={{ variant: "plain" }}
+                useInvertedBackground={false}
               />
             </div>
             <div className="bg-gray-50 p-6 rounded-xl">
@@ -39,12 +54,14 @@ export default function CheckoutPage() {
             </div>
           </div>
         </div>
-        <FooterBaseCard 
-          logoText="SSW"
-          columns={[
-            { title: "Ecosysteem", items: [{ label: "Home", href: "/" }, { label: "Shop", href: "/shop" }] }
-          ]}
-        />
+        <div id="footer" data-section="footer">
+          <FooterBaseCard 
+            logoText="SSW"
+            columns={[
+              { title: "Ecosysteem", items: [{ label: "Home", href: "/" }, { label: "Shop", href: "/shop" }] }
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );