diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3ea1c8d..21044fc 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -11,7 +11,7 @@ import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 import { Camera, Zap, Sparkles, Monitor, Shield, Star, Heart } from "lucide-react";
 import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
-import CardStack from '@/components/cardStack/CardStack';
+import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
 
 export default function LandingPage() {
   return (
@@ -205,29 +205,12 @@ export default function LandingPage() {
       </div>
 
       <div id="layout" data-section="layout">
-        <CardStack mode="buttons" gridVariant="timeline" title="Bestsellers" description="Check out our top-selling iPhone accessories." buttons={[{ text: "Shop Now", href: "#" }]} className="mb-8">
-            <div className="card">
-                <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" alt="Wireless Charger" />
-                <div className="card-content">
-                    <h3>Wireless Charger</h3>
-                    <p>Charge your iPhone wirelessly with ease.</p>
-                </div>
-            </div>
-            <div className="card">
-                <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" alt="Phone Case" />
-                <div className="card-content">
-                    <h3>Phone Case</h3>
-                    <p>Protect your iPhone with our stylish case.</p>
-                </div>
-            </div>
-            <div className="card">
-                <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" alt="Screen Protector" />
-                <div className="card-content">
-                    <h3>Screen Protector</h3>
-                    <p>Keep your iPhone screen scratch-free.</p>
-                </div>
-            </div>
-        </CardStack>
+        <FeatureCardThree features={[
+          { id: "1", title: "Wireless Charging Stand", description: "Elegant and efficient, charges your iPhone wirelessly.", imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "Wireless Charging Stand" },
+          { id: "2", title: "Clear iPhone Case", description: "Protect your iPhone with a clear, stylish case.", imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "Clear iPhone Case" },
+          { id: "3", title: "Bumper Case", description: "Durable bumper case for added protection.", imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "Bumper Case" },
+          { id: "4", title: "Screen Protector", description: "Keep your iPhone screen scratch-free with this high-quality protector.", imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "Screen Protector" }
+        ]} carouselMode="buttons" gridVariant="timeline" title="iPhone Accessories" description="Explore our range of iPhone accessories to enhance your device." buttons={[{ text: "Shop Now", href: "#" }]} textboxLayout="left" useInvertedBackground="light" ariaLabel="iPhone Accessories Section" className="mb-8" />
       </div>
 
       <div id="footer" data-section="footer">