diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0b13b99..1ee6687 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -4,7 +4,7 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FaqSplitText from '@/components/sections/faq/FaqSplitText';
-import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
+import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
 import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
@@ -32,7 +32,7 @@ export default function LandingPage() {
       <NavbarLayoutFloatingInline
       navItems={[
         { name: "FPS", id: "hero" },
-        { name: "MMORPG", id: "features" },
+        { name: "Modes", id: "features" },
         { name: "Store", id: "products" },
         { name: "Community", id: "testimonials" },
         { name: "Contact", id: "contact" },
@@ -81,16 +81,26 @@ export default function LandingPage() {
   </div>
 
   <div id="features" data-section="features">
-      <FeatureCardEight
+      <FeatureCardTwelve
+      animationType="slide-up"
       textboxLayout="split"
       useInvertedBackground={false}
       features={[
-        { title: "Classic Mode", description: "Experience the pure battle royale experience. No time limits, focus on survival. Squads of 4.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3irtom&_wi=2" },
-        { title: "Clash Squad", description: "High intensity 4v4 combat. Tactical rounds with no time limit. Master your gear. Squads of 4.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=f7g7ve&_wi=2" },
-        { title: "Squad Coordination", description: "Tactical voice channels and strategic planning for your 4-member squad.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=wcelss&_wi=2" },
+        {
+          id: "f1",          label: "Classic Mode",          title: "Battle Royale",          items: ["No time limit", "Survival focused", "4-player squad", "Voice integration enabled"],
+          buttons: [{ text: "Start Chat", onClick: () => console.log("Opening interaction channel...") }]
+        },
+        {
+          id: "f2",          label: "Clash Squad",          title: "4v4 Combat",          items: ["Tactical rounds", "In-game voice", "Communication focused", "Strategy planning"],
+          buttons: [{ text: "Open Channel", onClick: () => console.log("Enabling team chat...") }]
+        },
+        {
+          id: "f3",          label: "Community Events",          title: "Global Hub",          items: ["Integrated chatrooms", "Direct squad messaging", "Social engagement", "Weekly coordination"],
+          buttons: [{ text: "Connect", onClick: () => console.log("Joining voice channel...") }]
+        },
       ]}
-      title="Game Modes & Squads"
-      description="Jump into battle with your 4-member squad. No time limits, just pure skill."
+      title="Game Modes & Communication"
+      description="Jump into battle with your squad and utilize our integrated voice and text channels to dominate the competition."
     />
   </div>
 
@@ -207,4 +217,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}