diff --git a/src/app/page.tsx b/src/app/page.tsx
index deac710..0156119 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -9,6 +9,7 @@ import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatin
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
 import TextAbout from '@/components/sections/about/TextAbout';
+import { Zap, Heart, RefreshCw } from 'lucide-react';
 
 export default function LandingPage() {
   return (
@@ -28,9 +29,9 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        { name: "Home", id: "#hero" },
-        { name: "Shop", id: "#shop" },
-        { name: "Testimonials", id: "#testimonials" },
+        { name: "Home", id: "hero" },
+        { name: "Shop", id: "shop" },
+        { name: "Testimonials", id: "testimonials" },
       ]}
       brandName="Wavy Trend"
     />
@@ -65,9 +66,9 @@ export default function LandingPage() {
 
   <div id="about" data-section="about">
       <TextAbout
-      useInvertedBackground={false}
       title="Why Wavy Trend is Your Go-To Choice"
       buttons={[{ text: "Learn More", href: "#shop" }]}
+      useInvertedBackground={false}
     />
   </div>
 
@@ -114,9 +115,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       metrics={[
-        { value: "10,000+", description: "Satisfied Customers" },
-        { value: "50,000+", description: "Orders Delivered" },
-        { value: "99%", description: "Refreshment Rate" },
+        { icon: Zap, label: "Orders", value: "10,000+" },
+        { icon: Heart, label: "Customers", value: "50,000+" },
+        { icon: RefreshCw, label: "Satisfaction", value: "99%" },
       ]}
       title="Our Impact"
       description="Measuring the smiles we deliver every single day."