diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index 4f313cd..f0bc8c1 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -11,13 +11,13 @@ export default function BlogPage() {
             defaultButtonVariant="hover-bubble"
             defaultTextAnimation="reveal-blur"
             borderRadius="rounded"
-            contentWidth="small"
-            sizing="largeSmallSizeLargeTitles"
-            background="aurora"
-            cardStyle="gradient-bordered"
-            primaryButtonStyle="double-inset"
-            secondaryButtonStyle="solid"
-            headingFontWeight="extrabold"
+            contentWidth="medium"
+            sizing="medium"
+            background="circleGradient"
+            cardStyle="glass-elevated"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="glass"
+            headingFontWeight="normal"
         >
             <div id="nav" data-section="nav">
                 <NavbarStyleCentered
@@ -39,6 +39,7 @@ export default function BlogPage() {
                 <BlogCardThree
                     title="Beauty Tips & Insights"
                     description="Expert advice for your skincare journey."
+                    blogs={[]}
                     animationType="slide-up"
                     textboxLayout="default"
                     useInvertedBackground={false}
@@ -54,4 +55,4 @@ export default function BlogPage() {
             </div>
         </ThemeProvider>
     );
-}
+}
\ No newline at end of file
diff --git a/src/app/eyeshadow/page.tsx b/src/app/eyeshadow/page.tsx
index cb27efe..e47c4f3 100644
--- a/src/app/eyeshadow/page.tsx
+++ b/src/app/eyeshadow/page.tsx
@@ -6,13 +6,31 @@ import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
 
 export default function EyeshadowPage() {
     return (
-        <ThemeProvider>
-            <NavbarStyleCentered brandName="Luminé Skincare" navItems={[{ name: "Home", id: "/" }, { name: "Lipstick", href: "/lipstick" }, { name: "Foundation", href: "/foundation" }, { name: "Eyeshadow", href: "/eyeshadow" }, { name: "Skincare", href: "/skincare" }]} />
+        <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 
+                    brandName="Luminé Skincare" 
+                    navItems={[{ name: "Home", id: "/" }, { name: "Lipstick", id: "/lipstick" }, { name: "Foundation", id: "/foundation" }, { name: "Eyeshadow", id: "/eyeshadow" }, { name: "Skincare", id: "/skincare" }]} 
+                />
+            </div>
             <div className="pt-32 pb-16">
                 <h1 className="text-center text-4xl font-bold">Eyeshadow Collection</h1>
                 <p className="text-center mt-4 text-lg">Stunning palettes for every look.</p>
             </div>
-            <FooterBaseCard logoText="Luminé" columns={[]} />
+            <div id="footer" data-section="footer">
+                <FooterBaseCard logoText="Luminé" columns={[]} />
+            </div>
         </ThemeProvider>
     );
 }
\ No newline at end of file
diff --git a/src/app/foundation/page.tsx b/src/app/foundation/page.tsx
index 5a0dbd3..554ec27 100644
--- a/src/app/foundation/page.tsx
+++ b/src/app/foundation/page.tsx
@@ -6,13 +6,31 @@ import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
 
 export default function FoundationPage() {
     return (
-        <ThemeProvider>
-            <NavbarStyleCentered brandName="Luminé Skincare" navItems={[{ name: "Home", id: "/" }, { name: "Lipstick", href: "/lipstick" }, { name: "Foundation", href: "/foundation" }, { name: "Eyeshadow", href: "/eyeshadow" }, { name: "Skincare", href: "/skincare" }]} />
+        <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 
+                    brandName="Luminé Skincare" 
+                    navItems={[{ name: "Home", id: "/" }, { name: "Lipstick", id: "/lipstick" }, { name: "Foundation", id: "/foundation" }, { name: "Eyeshadow", id: "/eyeshadow" }, { name: "Skincare", id: "/skincare" }]} 
+                />
+            </div>
             <div className="pt-32 pb-16">
                 <h1 className="text-center text-4xl font-bold">Foundation Collection</h1>
                 <p className="text-center mt-4 text-lg">Achieve the perfect base with our premium foundations.</p>
             </div>
-            <FooterBaseCard logoText="Luminé" columns={[]} />
+            <div id="footer" data-section="footer">
+                <FooterBaseCard logoText="Luminé" columns={[]} />
+            </div>
         </ThemeProvider>
     );
 }
\ No newline at end of file
diff --git a/src/app/lipstick/page.tsx b/src/app/lipstick/page.tsx
index a7dd59f..2d78b4b 100644
--- a/src/app/lipstick/page.tsx
+++ b/src/app/lipstick/page.tsx
@@ -2,18 +2,35 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
-import ProductCardThree from "@/components/ecommerce/productDetail/ProductDetailCard";
 import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
 
 export default function LipstickPage() {
     return (
-        <ThemeProvider>
-            <NavbarStyleCentered brandName="Luminé Skincare" navItems={[{ name: "Home", id: "/" }, { name: "Lipstick", href: "/lipstick" }, { name: "Foundation", href: "/foundation" }, { name: "Eyeshadow", href: "/eyeshadow" }, { name: "Skincare", href: "/skincare" }]} />
+        <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 
+                    brandName="Luminé Skincare" 
+                    navItems={[{ name: "Home", id: "/" }, { name: "Lipstick", id: "/lipstick" }, { name: "Foundation", id: "/foundation" }, { name: "Eyeshadow", id: "/eyeshadow" }, { name: "Skincare", id: "/skincare" }]} 
+                />
+            </div>
             <div className="pt-32 pb-16">
                 <h1 className="text-center text-4xl font-bold">Lipstick Collection</h1>
                 <p className="text-center mt-4 text-lg">Discover our range of vibrant lip colors.</p>
             </div>
-            <FooterBaseCard logoText="Luminé" columns={[]} />
+            <div id="footer" data-section="footer">
+                <FooterBaseCard logoText="Luminé" columns={[]} />
+            </div>
         </ThemeProvider>
     );
 }
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index dc03bae..9209de7 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -16,13 +16,13 @@ export default function SkincareTemplatePage() {
             defaultButtonVariant="hover-bubble"
             defaultTextAnimation="reveal-blur"
             borderRadius="rounded"
-            contentWidth="small"
-            sizing="largeSmallSizeLargeTitles"
-            background="aurora"
-            cardStyle="gradient-bordered"
-            primaryButtonStyle="double-inset"
-            secondaryButtonStyle="solid"
-            headingFontWeight="extrabold"
+            contentWidth="medium"
+            sizing="medium"
+            background="circleGradient"
+            cardStyle="glass-elevated"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="glass"
+            headingFontWeight="normal"
         >
             <div id="nav" data-section="nav">
                 <NavbarStyleCentered
@@ -95,6 +95,7 @@ export default function SkincareTemplatePage() {
                 <BlogCardThree
                     title="Beauty Tips & Insights"
                     description="Expert advice for your skincare journey."
+                    blogs={[]}
                     animationType="slide-up"
                     textboxLayout="default"
                     useInvertedBackground={true}
@@ -130,4 +131,4 @@ export default function SkincareTemplatePage() {
             </div>
         </ThemeProvider>
     );
-}
+}
\ No newline at end of file
diff --git a/src/app/skincare/page.tsx b/src/app/skincare/page.tsx
index 2ae0994..66603ec 100644
--- a/src/app/skincare/page.tsx
+++ b/src/app/skincare/page.tsx
@@ -6,13 +6,31 @@ import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
 
 export default function SkincarePage() {
     return (
-        <ThemeProvider>
-            <NavbarStyleCentered brandName="Luminé Skincare" navItems={[{ name: "Home", id: "/" }, { name: "Lipstick", href: "/lipstick" }, { name: "Foundation", href: "/foundation" }, { name: "Eyeshadow", href: "/eyeshadow" }, { name: "Skincare", href: "/skincare" }]} />
+        <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 
+                    brandName="Luminé Skincare" 
+                    navItems={[{ name: "Home", id: "/" }, { name: "Lipstick", id: "/lipstick" }, { name: "Foundation", id: "/foundation" }, { name: "Eyeshadow", id: "/eyeshadow" }, { name: "Skincare", id: "/skincare" }]} 
+                />
+            </div>
             <div className="pt-32 pb-16">
                 <h1 className="text-center text-4xl font-bold">Skincare Essentials</h1>
                 <p className="text-center mt-4 text-lg">Pure, natural products for glowing skin.</p>
             </div>
-            <FooterBaseCard logoText="Luminé" columns={[]} />
+            <div id="footer" data-section="footer">
+                <FooterBaseCard logoText="Luminé" columns={[]} />
+            </div>
         </ThemeProvider>
     );
 }
\ No newline at end of file