diff --git a/src/app/page.tsx b/src/app/page.tsx
index b1a8f14..f2b6153 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import HeroCentered from '@/components/sections/hero/HeroCentered';
@@ -12,33 +13,33 @@ import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 export default function Page() {
   const navItems = [{ name: "Home", id: "/" }];
   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">
-        <NavbarLayoutFloatingInline navItems={navItems} />
+        <NavbarLayoutFloatingInline navItems={navItems} button={{ text: "Contact" }} />
       </div>
       <div id="hero" data-section="hero">
         <HeroCentered title="Hero Title" description="Description" avatars={[]} background={{ variant: "plain" }} />
       </div>
       <div id="historia" data-section="historia">
-        <TextAbout title="Historia" />
+        <TextAbout title="Historia" useInvertedBackground={false} />
       </div>
       <div id="origem" data-section="origem">
-        <FeatureCardEight title="Origem" textboxLayout="default" features={[{ title: "F1", description: "D1" }, { title: "F2", description: "D2" }]} />
+        <FeatureCardEight title="Origem" textboxLayout="default" useInvertedBackground={false} features={[{ title: "F1", description: "D1", imageSrc: "/" }, { title: "F2", description: "D2", imageSrc: "/" }]} />
       </div>
       <div id="diferenciais" data-section="diferenciais">
-        <FeatureCardEight title="Diferenciais" textboxLayout="default" features={[{ title: "D1", description: "D1" }, { title: "D2", description: "D2" }]} />
+        <FeatureCardEight title="Diferenciais" textboxLayout="default" useInvertedBackground={false} features={[{ title: "D1", description: "D1", imageSrc: "/" }, { title: "D2", description: "D2", imageSrc: "/" }]} />
       </div>
       <div id="produtos" data-section="produtos">
-        <ProductCardThree title="Produtos" textboxLayout="default" gridVariant="uniform-all-items-equal" animationType="none" products={[{ id: "1", name: "P1", price: "$10", imageSrc: "/" }, { id: "2", name: "P2", price: "$20", imageSrc: "/" }, { id: "3", name: "P3", price: "$30", imageSrc: "/" }]} />
+        <ProductCardThree title="Produtos" description="Desc" textboxLayout="default" useInvertedBackground={false} gridVariant="uniform-all-items-equal" animationType="none" products={[{ id: "1", name: "P1", price: "$10", imageSrc: "/" }, { id: "2", name: "P2", price: "$20", imageSrc: "/" }, { id: "3", name: "P3", price: "$30", imageSrc: "/" }]} />
       </div>
       <div id="precos" data-section="precos">
-        <PricingCardNine title="Preços" textboxLayout="default" animationType="none" plans={[{ id: "1", title: "Basic", price: "$10", period: "mo", features: ["F1"], button: { text: "Buy" } }, { id: "2", title: "Pro", price: "$20", period: "mo", features: ["F1"], button: { text: "Buy" } }]} />
+        <PricingCardNine title="Preços" description="Desc" textboxLayout="default" useInvertedBackground={false} animationType="none" plans={[{ id: "1", title: "Basic", price: "$10", period: "mo", features: ["F1"], button: { text: "Buy" } }, { id: "2", title: "Pro", price: "$20", period: "mo", features: ["F1"], button: { text: "Buy" } }]} />
       </div>
       <div id="parcerias" data-section="parcerias">
-        <SocialProofOne title="Parcerias" names={["P1", "P2"]} textboxLayout="default" />
+        <SocialProofOne title="Parcerias" description="Desc" names={["P1", "P2"]} textboxLayout="default" useInvertedBackground={false} />
       </div>
       <div id="contato" data-section="contato">
-        <ContactSplit tag="Tag" title="Contato" description="Desc" background={{ variant: "plain" }} />
+        <ContactSplit tag="Tag" title="Contato" description="Desc" useInvertedBackground={false} background={{ variant: "plain" }} />
       </div>
       <div id="footer" data-section="footer">
         <FooterLogoReveal logoText="Logo" leftLink={{ text: "L" }} rightLink={{ text: "R" }} />