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