diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 7d3e50f..825f528 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -1,15 +1,15 @@
 "use client";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import ContactCTA from '@/components/sections/contact/ContactCTA';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
 
 export default function ContactPage() {
   return (
-    <ThemeProvider>
-      <div id="nav"><NavbarStyleCentered navItems={[{name: "Home", id: "/"}, {name: "About", id: "/about"}, {name: "Contact", id: "/contact"}, {name: "Policy", id: "/policy"}]} brandName="Tradesman Hardware" /></div>
-      <ContactCTA tag="Support" title="Get in Touch" description="Reach out for any hardware queries." buttons={[{text: "Email Us"}]} />
-      <FooterBaseCard logoText="Tradesman Hardware" columns={[{title: "Links", items: [{label: "Home", href: "/"}]}]} />
+    <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 /></div>
+      <ContactCTA tag="Support" title="Get in Touch" description="Reach out for any hardware queries." buttons={[{text: "Email Us"}]} background={{ variant: "plain" }} useInvertedBackground={false} />
+      <FooterSimple columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]} />
     </ThemeProvider>
   );
 }
\ No newline at end of file