diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index f104dd8..20574ea 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -7,16 +7,19 @@ import FooterBase from '@/components/sections/footer/FooterBase';
 
 export default function AdminPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarLayoutFloatingInline
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Tournaments", id: "/tournaments" },
-            { name: "Admin", id: "/admin" },
-          ]}
-          brandName="ClanForce"
-        />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Tournaments", id: "/tournaments" },
+              { name: "Admin", id: "/admin" },
+            ]}
+            brandName="ClanForce"
+            button={{ text: "Login" }}
+          />
+        </div>
         <main className="pt-32 pb-20 px-6 max-w-7xl mx-auto min-h-screen">
           <h1 className="text-5xl font-bold mb-8">Commander Dashboard</h1>
           <p className="text-xl mb-12 text-muted-foreground">Manage user accounts, content, system settings, and analytics.</p>
@@ -27,7 +30,9 @@ export default function AdminPage() {
             </div>
           </div>
         </main>
-        <FooterBase logoText="ClanForce" columns={[]} />
+        <div id="footer" data-section="footer">
+          <FooterBase logoText="ClanForce" columns={[]} />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/free-agents/page.tsx b/src/app/free-agents/page.tsx
index fd26b0d..ba6b0a9 100644
--- a/src/app/free-agents/page.tsx
+++ b/src/app/free-agents/page.tsx
@@ -2,26 +2,37 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import FooterBase from '@/components/sections/footer/FooterBase';
 
 export default function FreeAgentsPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingInline navItems={[{ name: "Overview", id: "/" }, { name: "Players", id: "/players" }, { name: "Free Agents", id: "/free-agents" }]} brandName="ClanForce" />
-      <div className="pt-32">
-        <ProductCardTwo 
+    <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">
+        <NavbarLayoutFloatingInline 
+          navItems={[{ name: "Overview", id: "/" }, { name: "Players", id: "/players" }, { name: "Free Agents", id: "/free-agents" }]} 
+          brandName="ClanForce" 
+          button={{ text: "Connect" }}
+        />
+      </div>
+      <div className="pt-32" id="products" data-section="products">
+        <ProductCardFour 
           title="Free Agent Listings"
           description="Filter by skill, game, or region to find your next squad member."
           gridVariant="bento-grid"
           animationType="slide-up"
           textboxLayout="default"
+          useInvertedBackground={false}
           products={[
-            { id: "fa1", brand: "FPS", name: "ProScout_99", price: "Available", rating: 5, reviewCount: "10", imageSrc: "http://img.b2bpic.net/free-photo/professional-esports-gamer-back-side-view-rejoices-victory-generative-ai_191095-2015.jpg" }
+            { id: "fa1", name: "ProScout_99", price: "Available", variant: "Pro", imageSrc: "http://img.b2bpic.net/free-photo/professional-esports-gamer-back-side-view-rejoices-victory-generative-ai_191095-2015.jpg" },
+            { id: "fa2", name: "TacticalQueen", price: "Available", variant: "Pro", imageSrc: "http://img.b2bpic.net/free-photo/aesthetic-anime-character-gaming_23-2151560702.jpg" },
+            { id: "fa3", name: "AlphaLeader", price: "Available", variant: "Semi-Pro", imageSrc: "http://img.b2bpic.net/free-photo/smiling-viewer-changing-channels-television-set-with-remote-control_482257-92306.jpg" }
           ]}
         />
       </div>
-      <FooterBase columns={[]} logoText="ClanForce" />
+      <div id="footer" data-section="footer">
+        <FooterBase columns={[]} logoText="ClanForce" />
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file
diff --git a/src/app/leaderboards/page.tsx b/src/app/leaderboards/page.tsx
index 3077a2c..8fd9c70 100644
--- a/src/app/leaderboards/page.tsx
+++ b/src/app/leaderboards/page.tsx
@@ -3,41 +3,43 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
+import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import { Trophy } from "lucide-react";
 
 export default function LeaderboardsPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarLayoutFloatingInline
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Teams", id: "/teams" },
-            { name: "Leaderboards", id: "/leaderboards" }
-          ]}
-          brandName="ClanForce"
-        />
-        <div className="pt-24">
-          <MetricCardOne
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Teams", id: "/teams" },
+              { name: "Leaderboards", id: "/leaderboards" }
+            ]}
+            brandName="ClanForce"
+            button={{ text: "Join" }}
+          />
+        </div>
+        <div className="pt-24" id="metrics" data-section="metrics">
+          <MetricCardFourteen
             title="Global Leaderboards"
-            description="Ranked standings based on competitive performance across all platforms."
-            gridVariant="bento-grid"
-            animationType="slide-up"
-            textboxLayout="default"
+            tag="Rankings"
+            metricsAnimation="slide-up"
             useInvertedBackground={false}
             metrics={[
-              { id: "1", value: "#1", title: "Alpha Vanguard", description: "Score: 24,500", icon: Trophy },
-              { id: "2", value: "#2", title: "Nova Squad", description: "Score: 23,800", icon: Trophy },
-              { id: "3", value: "#3", title: "Zero Point", description: "Score: 22,100", icon: Trophy }
+              { id: "1", value: "#1", description: "Alpha Vanguard - 24,500 pts" },
+              { id: "2", value: "#2", description: "Nova Squad - 23,800 pts" },
+              { id: "3", value: "#3", description: "Zero Point - 22,100 pts" }
             ]}
           />
         </div>
-        <FooterBase
-          columns={[]}
-          logoText="ClanForce"
-        />
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={[]}
+            logoText="ClanForce"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/matches/page.tsx b/src/app/matches/page.tsx
index 59ae444..3b1f301 100644
--- a/src/app/matches/page.tsx
+++ b/src/app/matches/page.tsx
@@ -6,15 +6,18 @@ import ReactLenis from "lenis/react";
 
 export default function MatchesPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarLayoutFloatingInline
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Matches", id: "/matches" },
-            { name: "Seasons", id: "/seasons" },
-          ]}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Matches", id: "/matches" },
+              { name: "Seasons", id: "/seasons" },
+            ]}
+            button={{ text: "Schedule" }}
+          />
+        </div>
         <div className="pt-32 pb-20 px-6 max-w-4xl mx-auto">
           <h1 className="text-4xl font-bold mb-6">Match System</h1>
           <p>View upcoming schedules, past results, and historical match data for your clan.</p>
@@ -22,4 +25,4 @@ export default function MatchesPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/players/page.tsx b/src/app/players/page.tsx
index 2b995cb..1598fbc 100644
--- a/src/app/players/page.tsx
+++ b/src/app/players/page.tsx
@@ -2,25 +2,32 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import TeamCardTen from '@/components/sections/team/TeamCardTen';
+import TeamCardOne from '@/components/sections/team/TeamCardOne';
 import FooterBase from '@/components/sections/footer/FooterBase';
 
 export default function PlayersPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingInline navItems={[{ name: "Overview", id: "/" }, { name: "Players", id: "/players" }, { name: "Free Agents", id: "/free-agents" }]} brandName="ClanForce" />
-      <div className="pt-32">
-        <TeamCardTen 
+    <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">
+        <NavbarLayoutFloatingInline navItems={[{ name: "Overview", id: "/" }, { name: "Players", id: "/players" }, { name: "Free Agents", id: "/free-agents" }]} brandName="ClanForce" button={{ text: "Search" }} />
+      </div>
+      <div className="pt-32" id="team" data-section="team">
+        <TeamCardOne 
           title="Pro Player Profiles" 
           tag="Roster"
-          memberVariant="card"
+          gridVariant="uniform-all-items-equal"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
           members={[
-            { id: "1", name: "AlphaLeader", imageSrc: "http://img.b2bpic.net/free-photo/smiling-viewer-changing-channels-television-set-with-remote-control_482257-92306.jpg" },
-            { id: "2", name: "TacticalQueen", imageSrc: "http://img.b2bpic.net/free-photo/aesthetic-anime-character-gaming_23-2151560702.jpg" }
+            { id: "1", name: "AlphaLeader", role: "Captain", imageSrc: "http://img.b2bpic.net/free-photo/smiling-viewer-changing-channels-television-set-with-remote-control_482257-92306.jpg" },
+            { id: "2", name: "TacticalQueen", role: "Strategist", imageSrc: "http://img.b2bpic.net/free-photo/aesthetic-anime-character-gaming_23-2151560702.jpg" }
           ]}
         />
       </div>
-      <FooterBase columns={[]} logoText="ClanForce" />
+      <div id="footer" data-section="footer">
+        <FooterBase columns={[]} logoText="ClanForce" />
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file
diff --git a/src/app/seasons/page.tsx b/src/app/seasons/page.tsx
index e218b58..c2b3f87 100644
--- a/src/app/seasons/page.tsx
+++ b/src/app/seasons/page.tsx
@@ -6,15 +6,18 @@ import ReactLenis from "lenis/react";
 
 export default function SeasonsPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarLayoutFloatingInline
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Matches", id: "/matches" },
-            { name: "Seasons", id: "/seasons" },
-          ]}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Matches", id: "/matches" },
+              { name: "Seasons", id: "/seasons" },
+            ]}
+            button={{ text: "View" }}
+          />
+        </div>
         <div className="pt-32 pb-20 px-6 max-w-4xl mx-auto">
           <h1 className="text-4xl font-bold mb-6">Season Progress</h1>
           <p>Track your clan's performance across active seasons and view historical progression.</p>
@@ -22,4 +25,4 @@ export default function SeasonsPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/teams/page.tsx b/src/app/teams/page.tsx
index 79fb757..7b3a166 100644
--- a/src/app/teams/page.tsx
+++ b/src/app/teams/page.tsx
@@ -3,23 +3,26 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import TeamCardSix from '@/components/sections/team/TeamCardSix';
+import TeamCardOne from '@/components/sections/team/TeamCardOne';
 import FooterBase from '@/components/sections/footer/FooterBase';
 
 export default function TeamsPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarLayoutFloatingInline
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Teams", id: "/teams" },
-            { name: "Leaderboards", id: "/leaderboards" }
-          ]}
-          brandName="ClanForce"
-        />
-        <div className="pt-24">
-          <TeamCardSix
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Teams", id: "/teams" },
+              { name: "Leaderboards", id: "/leaderboards" }
+            ]}
+            brandName="ClanForce"
+            button={{ text: "Create Team" }}
+          />
+        </div>
+        <div className="pt-24" id="teams" data-section="teams">
+          <TeamCardOne
             title="Active Clans & Teams"
             description="Discover and connect with the most competitive teams currently on the platform."
             gridVariant="uniform-all-items-equal"
@@ -33,10 +36,12 @@ export default function TeamsPage() {
             ]}
           />
         </div>
-        <FooterBase
-          columns={[]}
-          logoText="ClanForce"
-        />
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={[]}
+            logoText="ClanForce"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/tournaments/page.tsx b/src/app/tournaments/page.tsx
index 0719fbd..705b132 100644
--- a/src/app/tournaments/page.tsx
+++ b/src/app/tournaments/page.tsx
@@ -7,28 +7,32 @@ import FooterBase from '@/components/sections/footer/FooterBase';
 
 export default function TournamentsPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarLayoutFloatingInline
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Tournaments", id: "/tournaments" },
-            { name: "Admin", id: "/admin" },
-          ]}
-          brandName="ClanForce"
-        />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Tournaments", id: "/tournaments" },
+              { name: "Admin", id: "/admin" },
+            ]}
+            brandName="ClanForce"
+            button={{ text: "Register" }}
+          />
+        </div>
         <main className="pt-32 pb-20 px-6 max-w-7xl mx-auto min-h-screen">
           <h1 className="text-5xl font-bold mb-8">Tournament Hub</h1>
           <p className="text-xl mb-12 text-muted-foreground">Browse active tournaments, view brackets, and manage your team's entry.</p>
           <div className="grid gap-8">
-            {/* Placeholder for Tournament Listing/Management Components */}
             <div className="p-8 border rounded-xl shadow-sm">
               <h2 className="text-2xl font-semibold mb-4">Active Tournaments</h2>
               <p>Tournament listings and bracket visualizations will appear here.</p>
             </div>
           </div>
         </main>
-        <FooterBase logoText="ClanForce" columns={[]} />
+        <div id="footer" data-section="footer">
+          <FooterBase logoText="ClanForce" columns={[]} />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );