diff --git a/src/app/page.tsx b/src/app/page.tsx
index 989354c..69e4b45 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import HeroOverlay from '@/components/sections/hero/HeroOverlay';
@@ -10,7 +11,18 @@ const navItems = [{ name: "Home", id: "/" }];
 
 export default function Page() {
   return (
-    <ThemeProvider>
+    <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">
         <NavbarStyleFullscreen navItems={navItems} brandName="Gem Refrigeration" />
       </div>
@@ -18,16 +30,39 @@ export default function Page() {
         <HeroOverlay title="Professional Refrigeration Solutions" description="Reliable maintenance and installation for your business needs." />
       </div>
       <div id="services" data-section="services">
-        <FeatureCardNine title="Our Services" description="We provide top-tier refrigeration maintenance." animationType="blur-reveal" textboxLayout="default" showStepNumbers={false} features={[]} useInvertedBackground={false} />
+        <FeatureCardNine 
+          title="Our Services" 
+          description="We provide top-tier refrigeration maintenance." 
+          animationType="blur-reveal" 
+          textboxLayout="default" 
+          showStepNumbers={false} 
+          features={[]} 
+          useInvertedBackground={false} 
+        />
       </div>
       <div id="reviews" data-section="reviews">
-        <TestimonialCardFive title="Client Testimonials" description="Trusted by local businesses." textboxLayout="default" testimonials={[]} useInvertedBackground={false} />
+        <TestimonialCardFive 
+          title="Client Testimonials" 
+          description="Trusted by local businesses." 
+          textboxLayout="default" 
+          testimonials={[]} 
+          useInvertedBackground={false} 
+        />
       </div>
       <div id="contact" data-section="contact">
-        <ContactCenter tag="Contact" title="Get In Touch" description="Ready to keep your business cool? Contact us today." background={{ variant: "plain" }} useInvertedBackground={false} />
+        <ContactCenter 
+          tag="Contact" 
+          title="Get In Touch" 
+          description="Ready to keep your business cool? Contact us today." 
+          background={{ variant: "plain" }} 
+          useInvertedBackground={false} 
+        />
       </div>
       <div id="footer" data-section="footer">
-        <FooterBaseCard logoText="Gem Refrigeration" columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]} />
+        <FooterBaseCard 
+          logoText="Gem Refrigeration" 
+          columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]} 
+        />
       </div>
     </ThemeProvider>
   );