diff --git a/src/app/anime/[id]/page.tsx b/src/app/anime/[id]/page.tsx
index a79d2d4..03ce31e 100644
--- a/src/app/anime/[id]/page.tsx
+++ b/src/app/anime/[id]/page.tsx
@@ -4,40 +4,23 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import React from "react";
 
-export default function AnimeDetailPage() {
+export default function AnimePage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleFullscreen
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "Catalog", id: "/catalog" },
-        ]}
-        brandName="AniStream"
-      />
+    <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={[
+            { name: "Home", id: "/" },
+            { name: "Catalog", id: "/catalog" },
+            { name: "Dashboard", id: "/dashboard" },
+            { name: "Login", id: "/login" },
+            { name: "Signup", id: "/signup" },
+          ]}
+          brandName="AniStream"
+        />
+      </div>
       <main className="pt-32 pb-20 px-6 container mx-auto">
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-12">
-            <div className="col-span-1">
-                <div className="aspect-[2/3] bg-gray-200 rounded-lg mb-6" />
-                <button className="w-full bg-black text-white py-3 rounded-lg font-bold">Watch Now</button>
-            </div>
-            <div className="col-span-2">
-                <h1 className="text-5xl font-bold mb-4">Anime Title</h1>
-                <p className="text-xl text-gray-600 mb-6">Synopsis: An incredible journey through the cosmos...</p>
-                <div className="grid grid-cols-2 gap-4 mb-8">
-                    <div className="border p-4 rounded">Rating: 9.2/10</div>
-                    <div className="border p-4 rounded">Episodes: 24</div>
-                </div>
-                <h2 className="text-2xl font-bold mb-4">Related Recommendations</h2>
-                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-                    {[1, 2, 3, 4].map((i) => (
-                        <div key={i} className="border p-2 rounded text-center">
-                            <div className="h-32 bg-gray-100 rounded mb-2" />
-                            <p className="text-sm font-semibold">Recommendation {i}</p>
-                        </div>
-                    ))}
-                </div>
-            </div>
-        </div>
+        <h1 className="text-4xl font-bold">Anime Details</h1>
       </main>
     </ThemeProvider>
   );
diff --git a/src/app/catalog/page.tsx b/src/app/catalog/page.tsx
index 0e7f2cb..67ced61 100644
--- a/src/app/catalog/page.tsx
+++ b/src/app/catalog/page.tsx
@@ -6,31 +6,29 @@ import React from "react";
 
 export default function CatalogPage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleFullscreen
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "Catalog", id: "/catalog" },
-        ]}
-        brandName="AniStream"
-      />
+    <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={[
+            { name: "Home", id: "/" },
+            { name: "Catalog", id: "/catalog" },
+            { name: "Dashboard", id: "/dashboard" },
+            { name: "Login", id: "/login" },
+            { name: "Signup", id: "/signup" },
+          ]}
+          brandName="AniStream"
+        />
+      </div>
       <main className="pt-32 pb-20 px-6 container mx-auto">
         <h1 className="text-4xl font-bold mb-8">Anime Catalog</h1>
         <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
             <div className="col-span-1 border rounded-lg p-6 h-fit">
                 <h2 className="font-bold mb-4">Filters</h2>
-                <div className="space-y-4">
-                    <select className="w-full border p-2 rounded"><option>Genre</option></select>
-                    <select className="w-full border p-2 rounded"><option>Season</option></select>
-                    <select className="w-full border p-2 rounded"><option>Status</option></select>
-                </div>
             </div>
             <div className="col-span-3 grid grid-cols-2 md:grid-cols-3 gap-6">
-                {[1, 2, 3, 4, 5, 6].map((i) => (
-                    <div key={i} className="border p-4 rounded-lg hover:shadow-lg transition cursor-pointer">
-                        <div className="h-48 bg-gray-200 rounded mb-4" />
+                {[1, 2, 3].map((i) => (
+                    <div key={i} className="border p-4 rounded-lg">
                         <h3 className="font-bold">Anime Title {i}</h3>
-                        <p className="text-sm text-gray-500">Action • 2024</p>
                     </div>
                 ))}
             </div>
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index 1684507..e1eecc5 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -6,18 +6,30 @@ import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwe
 
 export default function DashboardPage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleFullscreen navItems={[{ name: "Home", id: "/" }, { name: "Profile", id: "/profile" }]} brandName="AniStream" />
-      <div className="pt-32 px-6">
+    <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={[
+            { name: "Home", id: "/" },
+            { name: "Catalog", id: "/catalog" },
+            { name: "Dashboard", id: "/dashboard" },
+            { name: "Login", id: "/login" },
+            { name: "Signup", id: "/signup" },
+          ]}
+          brandName="AniStream"
+        />
+      </div>
+      <div id="features" data-section="features" className="pt-32 px-6">
         <FeatureCardTwentyEight 
           title="Your Dashboard"
-          description="Welcome back! Here is your watch history and recent recommendations."
+          description="Welcome back!"
           features={[
-            { id: "1", title: "Continue Watching", subtitle: "From your last session", category: "History", value: "3 Items" },
-            { id: "2", title: "Recommended for You", subtitle: "Based on your favorites", category: "Suggested", value: "Top Picks" }
+            { id: "1", title: "Continue", subtitle: "History", category: "History", value: "3" },
+            { id: "2", title: "Picks", subtitle: "Suggested", category: "Suggested", value: "Top" }
           ]}
           textboxLayout="default"
           animationType="slide-up"
+          useInvertedBackground={false}
         />
       </div>
     </ThemeProvider>
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index dd7da3a..401471a 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -6,14 +6,27 @@ import ContactCTA from '@/components/sections/contact/ContactCTA';
 
 export default function LoginPage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleFullscreen navItems={[{ name: "Home", id: "/" }]} brandName="AniStream" />
-      <div className="min-h-screen flex items-center justify-center pt-20">
+    <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={[
+            { name: "Home", id: "/" },
+            { name: "Catalog", id: "/catalog" },
+            { name: "Dashboard", id: "/dashboard" },
+            { name: "Login", id: "/login" },
+            { name: "Signup", id: "/signup" },
+          ]} 
+          brandName="AniStream" 
+        />
+      </div>
+      <div id="contact" data-section="contact" className="min-h-screen flex items-center justify-center pt-20">
         <ContactCTA 
           tag="Login" 
           title="Welcome Back" 
-          description="Sign in to your account to continue watching."
+          description="Sign in to your account to continue."
           buttons={[{ text: "Login" }, { text: "Sign Up", href: "/signup" }]}
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
         />
       </div>
     </ThemeProvider>
diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
index b5901af..b1fa145 100644
--- a/src/app/signup/page.tsx
+++ b/src/app/signup/page.tsx
@@ -6,14 +6,27 @@ import ContactCTA from '@/components/sections/contact/ContactCTA';
 
 export default function SignupPage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleFullscreen navItems={[{ name: "Home", id: "/" }]} brandName="AniStream" />
-      <div className="min-h-screen flex items-center justify-center pt-20">
+    <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={[
+            { name: "Home", id: "/" },
+            { name: "Catalog", id: "/catalog" },
+            { name: "Dashboard", id: "/dashboard" },
+            { name: "Login", id: "/login" },
+            { name: "Signup", id: "/signup" },
+          ]} 
+          brandName="AniStream" 
+        />
+      </div>
+      <div id="contact" data-section="contact" className="min-h-screen flex items-center justify-center pt-20">
         <ContactCTA 
           tag="Sign Up" 
           title="Join the Fanbase" 
-          description="Create an account and start your journey today."
+          description="Create an account today."
           buttons={[{ text: "Create Account" }, { text: "Login", href: "/login" }]}
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
         />
       </div>
     </ThemeProvider>