diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index 70c7433..04661eb 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -28,14 +28,14 @@ export default function BlogPage() {
                     <NavbarStyleCentered
                         navItems={[
                             { name: "Home", id: "/" },
-                            { name: "About", id: "about" },
-                            { name: "Innovations", id: "features" },
-                            { name: "Metrics", id: "metrics" },
-                            { name: "Testimonials", id: "testimonials" },
-                            { name: "FAQ", id: "faq" },
-                            { name: "Contact", id: "contact" },
+                            { name: "About", id: "/#about" },
+                            { name: "Innovations", id: "/#features" },
+                            { name: "Metrics", id: "/#metrics" },
+                            { name: "Testimonials", id: "/#testimonials" },
+                            { name: "FAQ", id: "/#faq" },
+                            { name: "Contact", id: "/#contact" },
                         ]}
-                        button={{ text: "Hire Vitality", href: "contact" }}
+                        button={{ text: "Hire Vitality", href: "/#contact" }}
                         brandName="Vitality"
                     />
                 </div>
@@ -63,19 +63,19 @@ export default function BlogPage() {
                             columns={[
                                 {
                                     title: "Vitality",                                    items: [
-                                        { label: "About", href: "about" },
-                                        { label: "Innovations", href: "features" },
+                                        { label: "About", href: "/#about" },
+                                        { label: "Innovations", href: "/#features" },
                                     ],
                                 },
                                 {
                                     title: "Connect",                                    items: [
-                                        { label: "Contact", href: "contact" },
-                                        { label: "FAQ", href: "faq" },
+                                        { label: "Contact", href: "/#contact" },
+                                        { label: "FAQ", href: "/#faq" },
                                     ],
                                 },
                                 {
                                     title: "Resources",                                    items: [
-                                        { label: "Insights", href: "blog" },
+                                        { label: "Insights", href: "/blog" },
                                         { label: "Press", href: "#" },
                                     ],
                                 },
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 06ae91e..50a4c15 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -36,7 +36,7 @@ export default function LandingPage() {
         <HeroBillboard 
           title="Vitality: The Architect of Tomorrow's Digital World"
           description="Witness the unparalleled brilliance of the developer who consistently redefines the boundaries of innovation and engineering."
-          background={{variant:"grid"}}
+          background={{variant:"animated-grid"}}
           tag="World's Leading Developer"
           buttons={[{text:"Explore Innovations",href:"features"},{text:"Connect with Vitality",href:"contact"}]}
           imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_39wSE8YJoGda03bkKGOyyo2rjk4/a-highly-focused-developer-vitality-imme-1771605664028-da5b328a.png"
@@ -56,6 +56,7 @@ export default function LandingPage() {
           imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_39wSE8YJoGda03bkKGOyyo2rjk4/vitality-a-visionary-developer-deeply-fo-1771605666000-e060f0bb.png"
           imageAlt="Vitality focused on a holographic interface with complex designs"
           mediaAnimation="slide-up"
+          metricsAnimation="slide-up"
           useInvertedBackground={false}
           tag="About Vitality"
           tagIcon={Sparkles}
diff --git a/src/app/shop/[id]/page.tsx b/src/app/shop/[id]/page.tsx
index b8cf09e..4e7bf27 100644
--- a/src/app/shop/[id]/page.tsx
+++ b/src/app/shop/[id]/page.tsx
@@ -68,9 +68,9 @@ export default function ProductPage({ params }: ProductPageProps) {
 
     const navItems = [{ "name": "Home", "id": "/" }, { "name": "Shop", "id": "/shop" }];
     const footerColumns = [
-        { "title": "Vitality", "items": [{ "label": "About", "href": "about" }, { "label": "Innovations", "href": "features" }] },
-        { "title": "Connect", "items": [{ "label": "Contact", "href": "contact" }, { "label": "FAQ", "href": "faq" }] },
-        { "title": "Resources", "items": [{ "label": "Insights", "href": "blog" }, { "label": "Press", "href": "#" }] }
+        { "title": "Vitality", "items": [{ "label": "About", "href": "/#about" }, { "label": "Innovations", "href": "/#features" }] },
+        { "title": "Connect", "items": [{ "label": "Contact", "href": "/#contact" }, { "label": "FAQ", "href": "/#faq" }] },
+        { "title": "Resources", "items": [{ "label": "Insights", "href": "/blog" }, { "label": "Press", "href": "#" }] }
     ];
 
     if (isLoading) {
@@ -88,12 +88,11 @@ export default function ProductPage({ params }: ProductPageProps) {
                 headingFontWeight="medium"
             >
                 <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                    <div id="nav" data-section="nav">
                         <NavbarStyleCentered
                             navItems={navItems}
                             brandName="Vitality"
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
-                            mobileButton={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         />
                     </div>
                     <div id="loading-section" data-section="loading-section">
@@ -128,12 +127,11 @@ export default function ProductPage({ params }: ProductPageProps) {
                 headingFontWeight="medium"
             >
                 <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                    <div id="nav" data-section="nav">
                         <NavbarStyleCentered
                             navItems={navItems}
                             brandName="Vitality"
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
-                            mobileButton={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         />
                     </div>
                     <div id="not-found-section" data-section="not-found-section">
@@ -175,12 +173,11 @@ export default function ProductPage({ params }: ProductPageProps) {
             headingFontWeight="medium"
         >
             <ReactLenis root>
-                <div id="navbar" data-section="navbar">
+                <div id="nav" data-section="nav">
                     <NavbarStyleCentered
                         navItems={navItems}
                         brandName="Vitality"
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
-                        mobileButton={{ text: "Cart", onClick: () => setCartOpen(true) }}
                     />
                 </div>
                 <div id="product-detail-card" data-section="product-detail-card">
diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index dc5a575..5eb39ab 100644
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -18,9 +18,9 @@ export default function ShopPage() {
 
     const navItems = [{ "name": "Home", "id": "/" }, { "name": "Shop", "id": "/shop" }];
     const footerColumns = [
-        { "title": "Vitality", "items": [{ "label": "About", "href": "about" }, { "label": "Innovations", "href": "features" }] },
-        { "title": "Connect", "items": [{ "label": "Contact", "href": "contact" }, { "label": "FAQ", "href": "faq" }] },
-        { "title": "Resources", "items": [{ "label": "Insights", "href": "blog" }, { "label": "Press", "href": "#" }] }
+        { "title": "Vitality", "items": [{ "label": "About", "href": "/#about" }, { "label": "Innovations", "href": "/#features" }] },
+        { "title": "Connect", "items": [{ "label": "Contact", "href": "/#contact" }, { "label": "FAQ", "href": "/#faq" }] },
+        { "title": "Resources", "items": [{ "label": "Insights", "href": "/blog" }, { "label": "Press", "href": "#" }] }
     ];
 
     if (isLoading) {
@@ -38,12 +38,11 @@ export default function ShopPage() {
                 headingFontWeight="medium"
             >
                 <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                    <div id="nav" data-section="nav">
                         <NavbarStyleCentered
                             navItems={navItems}
                             brandName="Vitality"
                             button={{ text: "Cart", onClick: () => {} }}
-                            mobileButton={{ text: "Cart", onClick: () => {} }}
                         />
                     </div>
                     <div id="loading-section" data-section="loading-section">
@@ -77,12 +76,11 @@ export default function ShopPage() {
             headingFontWeight="medium"
         >
             <ReactLenis root>
-                <div id="navbar" data-section="navbar">
+                <div id="nav" data-section="nav">
                     <NavbarStyleCentered
                         navItems={navItems}
                         brandName="Vitality"
                         button={{ text: "Cart", onClick: () => {} }}
-                        mobileButton={{ text: "Cart", onClick: () => {} }}
                     />
                 </div>
                 <div id="product-catalog" data-section="product-catalog">