diff --git a/src/app/page.tsx b/src/app/page.tsx
index a25bd48..0c58a45 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -18,7 +18,7 @@ const navItems = [
 
 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">
         <NavbarStyleCentered navItems={navItems} brandName="Webild" />
       </div>
@@ -50,6 +50,7 @@ export default function Page() {
           gridVariant="three-columns-all-equal-width"
           animationType="slide-up"
           textboxLayout="default"
+          useInvertedBackground={false}
           products={[
             { id: "p1", brand: "Brand A", name: "Product 1", price: "$99", rating: 4, reviewCount: "10", imageSrc: "/img1.jpg" },
             { id: "p2", brand: "Brand B", name: "Product 2", price: "$199", rating: 5, reviewCount: "20", imageSrc: "/img2.jpg" },