diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index e96ccae..c073962 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -7,25 +7,35 @@ import { LayoutDashboard, PenTool, Image, User, Settings } from "lucide-react";
 
 export default function DashboardPage() {
   return (
-    <ThemeProvider>
-        <NavbarStyleApple
-            navItems={[
-                { name: "Home", id: "/" },
-                { name: "Dashboard", id: "/dashboard" },
-                { name: "Logout", id: "/" }
-            ]}
-            brandName="StoryCraft"
-        />
-        <HeroBillboardDashboard
-            title="Welcome Back, Creator"
-            description="Manage your submissions, view engagement statistics, and update your profile."
-            dashboard={{
-                title: "User Dashboard",                stats: [{ title: "Total Submissions", values: [12, 14, 18], description: "Stories and art pieces uploaded." }],
-                logoIcon: LayoutDashboard,
-                sidebarItems: [{ icon: PenTool }, { icon: Image }, { icon: User }, { icon: Settings }],
-                imageSrc: "http://img.b2bpic.net/free-photo/spotlight-portrait-golden-hour_23-2151915127.jpg"
-            }}
-        />
+    <ThemeProvider defaultButtonVariant="hover-magnetic" 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">
+            <NavbarStyleApple
+                navItems={[
+                    { name: "Home", id: "/" },
+                    { name: "Dashboard", id: "/dashboard" },
+                    { name: "Login", id: "/login" },
+                    { name: "Sign Up", id: "/signup" }
+                ]}
+                brandName="StoryCraft"
+            />
+        </div>
+        <div id="dashboard-hero" data-section="dashboard-hero">
+            <HeroBillboardDashboard
+                title="Welcome Back, Creator"
+                description="Manage your submissions, view engagement statistics, and update your profile."
+                dashboard={{
+                    title: "User Dashboard",                
+                    stats: [
+                        { title: "Total Submissions", values: [12, 14, 18], description: "Stories and art pieces uploaded." },
+                        { title: "Engagement", values: [85, 92, 78], description: "Views and interactions on your art." },
+                        { title: "Followers", values: [150, 200, 250], description: "Your growing community base." }
+                    ],
+                    logoIcon: LayoutDashboard,
+                    sidebarItems: [{ icon: PenTool }, { icon: Image }, { icon: User }, { icon: Settings }],
+                    imageSrc: "http://img.b2bpic.net/free-photo/spotlight-portrait-golden-hour_23-2151915127.jpg"
+                }}
+            />
+        </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 4267388..34c1e4c 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -6,21 +6,28 @@ import ContactCenter from '@/components/sections/contact/ContactCenter';
 
 export default function LoginPage() {
   return (
-    <ThemeProvider>
-        <NavbarStyleApple
-            navItems={[
-                { name: "Home", id: "/" },
-                { name: "Login", id: "/login" },
-                { name: "Sign Up", id: "/signup" }
-            ]}
-            brandName="StoryCraft"
-        />
-        <ContactCenter
-            tag="Welcome Back"
-            title="Login to Your Account"
-            description="Continue sharing your creative journey with our community."
-            buttonText="Login"
-        />
+    <ThemeProvider defaultButtonVariant="hover-magnetic" 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">
+            <NavbarStyleApple
+                navItems={[
+                    { name: "Home", id: "/" },
+                    { name: "Dashboard", id: "/dashboard" },
+                    { name: "Login", id: "/login" },
+                    { name: "Sign Up", id: "/signup" }
+                ]}
+                brandName="StoryCraft"
+            />
+        </div>
+        <div id="login-center" data-section="login-center">
+            <ContactCenter
+                tag="Welcome Back"
+                title="Login to Your Account"
+                description="Continue sharing your creative journey with our community."
+                buttonText="Login"
+                background={{ variant: "plain" }}
+                useInvertedBackground={false}
+            />
+        </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file
diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
index ca464da..f4bf76f 100644
--- a/src/app/signup/page.tsx
+++ b/src/app/signup/page.tsx
@@ -6,21 +6,28 @@ import ContactCenter from '@/components/sections/contact/ContactCenter';
 
 export default function SignUpPage() {
   return (
-    <ThemeProvider>
-        <NavbarStyleApple
-            navItems={[
-                { name: "Home", id: "/" },
-                { name: "Login", id: "/login" },
-                { name: "Sign Up", id: "/signup" }
-            ]}
-            brandName="StoryCraft"
-        />
-        <ContactCenter
-            tag="Join Us"
-            title="Create Your Account"
-            description="Get started by creating your account to begin sharing stories and art."
-            buttonText="Sign Up"
-        />
+    <ThemeProvider defaultButtonVariant="hover-magnetic" 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">
+            <NavbarStyleApple
+                navItems={[
+                    { name: "Home", id: "/" },
+                    { name: "Dashboard", id: "/dashboard" },
+                    { name: "Login", id: "/login" },
+                    { name: "Sign Up", id: "/signup" }
+                ]}
+                brandName="StoryCraft"
+            />
+        </div>
+        <div id="signup-center" data-section="signup-center">
+            <ContactCenter
+                tag="Join Us"
+                title="Create Your Account"
+                description="Get started by creating your account to begin sharing stories and art."
+                buttonText="Sign Up"
+                background={{ variant: "plain" }}
+                useInvertedBackground={false}
+            />
+        </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file