diff --git a/src/app/nutrition/page.tsx b/src/app/nutrition/page.tsx
index 60cbfd8..f831f8e 100644
--- a/src/app/nutrition/page.tsx
+++ b/src/app/nutrition/page.tsx
@@ -4,8 +4,8 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
+import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
 
 export default function NutritionPage() {
   return (
@@ -26,20 +26,21 @@ export default function NutritionPage() {
             <NavbarStyleApple
               navItems={[
                 { name: "Home", id: "/" },
-                { name: "Nutrition", id: "products" },
-                { name: "Athlete Tracking", id: "metrics" },
+                { name: "Nutrition", id: "#products" },
+                { name: "Athlete Tracking", id: "#metrics" },
               ]}
               brandName="ElitePulse"
             />
         </div>
 
         <div id="products" data-section="products">
-          <ProductCardOne
+          <ProductCardThree
             title="Daily Meal Plans"
             description="Science-backed nutrition plans tailored to your specific caloric and protein requirements for maximum performance."
             gridVariant="three-columns-all-equal-width"
             animationType="slide-up"
             textboxLayout="default"
+            useInvertedBackground={false}
             products={[
               { id: "r1", name: "Muscle Builder Bowl", price: "45g Protein | 600kcal", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZNNEzFDqEt4znb3TV8kx2fQXF/professional-nutrition-plate-clean-layou-1774692653830-2c8f0353.png" },
               { id: "r2", name: "Recovery Shake", price: "30g Protein | 350kcal", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZNNEzFDqEt4znb3TV8kx2fQXF/modern-nutrition-plate-focused-on-health-1774692655299-60c96e5c.png" },
@@ -49,15 +50,17 @@ export default function NutritionPage() {
         </div>
 
         <div id="metrics" data-section="metrics">
-          <MetricCardSeven
+          <MetricCardTwo
             title="Athlete Development Tracking"
             description="Monitor your physiological data, training load, and recovery metrics in real-time."
             animationType="depth-3d"
             textboxLayout="default"
+            gridVariant="bento-grid"
+            useInvertedBackground={false}
             metrics={[
-              { id: "mt1", value: "85%", title: "Recovery Status", items: ["Muscle Repair Rate", "Sleep Quality", "Heart Rate Variability"] },
-              { id: "mt2", value: "120kg", title: "Strength Progression", items: ["Compound Lifts", "Power Output", "Muscle Mass Index"] },
-              { id: "mt3", value: "4.2", title: "Performance Load", items: ["Training Intensity", "VO2 Max Estimates", "Injury Prevention"] }
+              { id: "mt1", value: "85%", description: "Recovery Status" },
+              { id: "mt2", value: "120kg", description: "Strength Progression" },
+              { id: "mt3", value: "4.2", description: "Performance Load" }
             ]}
           />
         </div>
diff --git a/src/app/training-programs/page.tsx b/src/app/training-programs/page.tsx
index 3d249a8..4cbce45 100644
--- a/src/app/training-programs/page.tsx
+++ b/src/app/training-programs/page.tsx
@@ -4,8 +4,8 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
-import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
 
 export default function TrainingProgramsPage() {
   return (
@@ -34,34 +34,36 @@ export default function TrainingProgramsPage() {
         </div>
 
         <div id="programs" data-section="programs">
-          <FeatureCardSeven
+          <FeatureCardTwentySeven
             animationType="slide-up"
             textboxLayout="split"
             title="Workout Programs"
             description="Choose from our library of expert-designed training programs tailored to your specific goals and fitness levels."
+            gridVariant="two-items-per-row"
+            useInvertedBackground={false}
             features={[
               {
-                id: 1,
-                title: "Strength & Conditioning",                description: "Build foundational strength with progressive overload and periodized volume.",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZNNEzFDqEt4znb3TV8kx2fQXF/digital-visualization-of-workout-trainin-1774692654334-a6143c8e.png"
+                id: "f1",                title: "Strength & Conditioning",                description: "Build foundational strength with progressive overload and periodized volume.",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZNNEzFDqEt4znb3TV8kx2fQXF/digital-visualization-of-workout-trainin-1774692654334-a6143c8e.png"
               },
               {
-                id: 2,
-                title: "Athletic Performance",                description: "Enhance speed, agility, and explosiveness for competitive sports.",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZNNEzFDqEt4znb3TV8kx2fQXF/an-athlete-checking-a-progress-roadmap-o-1774692654511-eb37e293.png"
+                id: "f2",                title: "Athletic Performance",                description: "Enhance speed, agility, and explosiveness for competitive sports.",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZNNEzFDqEt4znb3TV8kx2fQXF/an-athlete-checking-a-progress-roadmap-o-1774692654511-eb37e293.png"
               }
             ]}
           />
         </div>
 
         <div id="exercises" data-section="exercises">
-          <ProductCardTwo
+          <ProductCardThree
             animationType="blur-reveal"
             gridVariant="three-columns-all-equal-width"
             title="Exercises Database"
             description="Browse our comprehensive library of movements, categorized by muscle group and equipment."
+            textboxLayout="default"
+            useInvertedBackground={false}
             products={[
-              { id: "e1", brand: "Upper Body", name: "Bench Press", price: "Level: Beginner", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZNNEzFDqEt4znb3TV8kx2fQXF/professional-weight-lifting-equipment-ar-1774692653792-bb66fa47.png" },
-              { id: "e2", brand: "Lower Body", name: "Squat", price: "Level: Intermediate", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZNNEzFDqEt4znb3TV8kx2fQXF/muscular-man-focusing-on-workout-recover-1774692653927-f50cbf8b.png" },
-              { id: "e3", brand: "Full Body", name: "Deadlift", price: "Level: Advanced", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZNNEzFDqEt4znb3TV8kx2fQXF/a-high-energy-cinematic-fitness-scene-in-1774692653848-117369e5.png" }
+              { id: "e1", name: "Bench Press", price: "Upper Body - Beginner", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZNNEzFDqEt4znb3TV8kx2fQXF/professional-weight-lifting-equipment-ar-1774692653792-bb66fa47.png" },
+              { id: "e2", name: "Squat", price: "Lower Body - Intermediate", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZNNEzFDqEt4znb3TV8kx2fQXF/muscular-man-focusing-on-workout-recover-1774692653927-f50cbf8b.png" },
+              { id: "e3", name: "Deadlift", price: "Full Body - Advanced", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZNNEzFDqEt4znb3TV8kx2fQXF/a-high-energy-cinematic-fitness-scene-in-1774692653848-117369e5.png" }
             ]}
           />
         </div>