diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8982a4c..2d7c494 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -4,10 +4,10 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import FooterBase from '@/components/sections/footer/FooterBase';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
-import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
-import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
-import { Cpu, Zap, Target } from "lucide-react";
+import HeroSplit from '@/components/sections/hero/HeroSplit';
+import SplitAbout from '@/components/sections/about/SplitAbout';
+import AboutMetric from '@/components/sections/about/AboutMetric';
+import { Cpu, Zap, Target, ArrowRight, ShieldCheck, BarChart3 } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -28,50 +28,48 @@ export default function LandingPage() {
           <NavbarStyleCentered
             navItems={[
               { name: "Home", id: "#hero" },
-              { name: "Philosophy", id: "#about" },
-              { name: "Metrics", id: "#metric" },
+              { name: "About", id: "#about" },
+              { name: "Performance", id: "#metric" },
             ]}
             brandName="Vertex Design"
           />
         </div>
 
         <div id="hero" data-section="hero">
-          <HeroBillboardGallery
+          <HeroSplit
             title="Precision Engineering, Digital Innovation"
             description="Crafting robust, scalable digital infrastructure through design excellence. We define the standard for high-performance interfaces."
             background={{ variant: "sparkles-gradient" }}
-            mediaItems={[
-              { imageSrc: "http://img.b2bpic.net/free-photo/abstract-metallic-textures-perforated-metal-background_1048-6358.jpg?_wi=1" },
-              { imageSrc: "http://img.b2bpic.net/free-photo/abstract-technology-background-connecting-dots-digital-network-design_53876-160195.jpg?_wi=1" },
-              { imageSrc: "http://img.b2bpic.net/free-photo/modern-office-space-with-futuristic-decor-furniture_23-2151797628.jpg?_wi=1" }
-            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/abstract-metallic-textures-perforated-metal-background_1048-6358.jpg?_wi=1"
             buttons={[{ text: "Explore Work", href: "#about" }]}
+            imagePosition="right"
           />
         </div>
 
         <div id="about" data-section="about">
-          <TextSplitAbout
+          <SplitAbout
             title="Engineered for Complexity"
-            description={[
-              "Vertex Design specializes in translating complex technical requirements into intuitive, human-centric interfaces. Our design process is rooted in precision, reliability, and modular architecture.",              "We bridge the gap between heavy industrial workflows and modern usability, ensuring every interaction is optimized for high-stakes environments."
+            description="Vertex Design specializes in translating complex technical requirements into intuitive, human-centric interfaces. Our design process is rooted in precision, reliability, and modular architecture."
+            bulletPoints={[
+              { title: "Industrial Grade", description: "High-performance frameworks for critical operations.", icon: ShieldCheck },
+              { title: "Modular Design", description: "Scalable components built for enterprise growth.", icon: Cpu },
+              { title: "Human Centric", description: "Interfaces that prioritize user experience and usability.", icon: Target }
             ]}
-            showBorder={true}
+            imageSrc="http://img.b2bpic.net/free-photo/modern-office-space-with-futuristic-decor-furniture_23-2151797628.jpg?_wi=1"
+            textboxLayout="split"
             useInvertedBackground={true}
           />
         </div>
 
         <div id="metric" data-section="metric">
-          <MetricCardOne
-            title="Defining Performance"
-            description="Our impact measured through tangible outcomes and engineering benchmarks."
-            gridVariant="bento-grid"
-            animationType="depth-3d"
+          <AboutMetric
+            title="Proven Impact"
             metrics={[
-              { id: "m1", value: "99.9%", title: "Interface Reliability", description: "Validated performance across critical systems.", icon: Cpu },
-              { id: "m2", value: "40%", title: "Workflow Efficiency", description: "Reduction in task completion time for users.", icon: Zap },
-              { id: "m3", value: "25x", title: "Scalability", description: "Framework growth factor for enterprise integration.", icon: Target }
+              { value: "99.9%", label: "System Reliability", icon: Cpu },
+              { value: "40%", label: "Efficiency Boost", icon: Zap },
+              { value: "25x", label: "Growth Potential", icon: BarChart3 }
             ]}
-            textboxLayout="split"
+            useInvertedBackground={false}
           />
         </div>