diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index 0df9928..b35b6b3 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -5,7 +5,7 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import { useBlogPosts } from "@/hooks/useBlogPosts";
 
 // Import the specified Navbar component
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 
 // Import the specified Blog Section component
 import BlogCardThree from '@/components/sections/blog/BlogCardThree';
@@ -30,19 +30,21 @@ export default function BlogPage() {
             headingFontWeight="semibold"
         >
             <ReactLenis root>
-                <NavbarStyleFullscreen
-                    navItems={[
-                        { name: "Home", id: "/" },
-                        { name: "Features", id: "features" },
-                        { name: "About", id: "about" },
-                        { name: "Pricing", id: "pricing" },
-                        { name: "Testimonials", id: "testimonials" },
-                        { name: "Contact", id: "contact" },
-                    ]}
-                    brandName="AI Voyage"
-                    bottomLeftText="Explore Smarter"
-                    bottomRightText="hello@aivoyage.com"
-                />
+                <div id="nav" data-section="nav">
+                    <NavbarLayoutFloatingInline
+                        navItems={[
+                            { name: "Home", id: "/" },
+                            { name: "Features", id: "#features" },
+                            { name: "About", id: "#about" },
+                            { name: "Pricing", id: "#pricing" },
+                            { name: "Testimonials", id: "#testimonials" },
+                            { name: "Blog", id: "/blog" },
+                            { name: "Shop", id: "/shop" }
+                        ]}
+                        brandName="AI Voyage"
+                        button={{ text: "Get Started", href: "#contact" }}
+                    />
+                </div>
 
                 {isLoading ? (
                     <div className="w-content-width mx-auto py-20 text-center">
diff --git a/src/app/page.tsx b/src/app/page.tsx
index f52f9ca..e77b6d5 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
 import FeatureBento from '@/components/sections/feature/FeatureBento';
 import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
@@ -52,11 +52,10 @@ export default function LandingPage() {
       headingFontWeight="semibold"
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleFullscreen 
-          navItems={[{name:"Features",id:"features"},{name:"About",id:"about"},{name:"Pricing",id:"pricing"},{name:"Testimonials",id:"testimonials"},{name:"Contact",id:"contact"}]}
+        <NavbarLayoutFloatingInline 
+          navItems={[{name:"Home", id:"/"}, {name:"Features",id:"#features"},{name:"About",id:"#about"},{name:"Pricing",id:"#pricing"},{name:"Testimonials",id:"#testimonials"}, {name:"Blog", id:"/blog"}, {name:"Shop", id:"/shop"}]}
           brandName="AI Voyage"
-          bottomLeftText="Explore Smarter"
-          bottomRightText="hello@aivoyage.com"
+          button={{ text: "Get Started", href: "#contact" }}
         />
       </div>
       <div id="hero" data-section="hero">
diff --git a/src/app/shop/[id]/page.tsx b/src/app/shop/[id]/page.tsx
index 4d000fd..580e33f 100644
--- a/src/app/shop/[id]/page.tsx
+++ b/src/app/shop/[id]/page.tsx
@@ -4,7 +4,7 @@ import { Suspense, use, useCallback } from "react";
 import { useRouter } from "next/navigation";
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import ProductDetailCard from "@/components/ecommerce/productDetail/ProductDetailCard";
 import ProductCart from "@/components/ecommerce/cart/ProductCart";
@@ -89,12 +89,11 @@ function ProductPageContent({ params }: ProductPageProps) {
                 headingFontWeight="semibold"
             >
                 <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
-                        <NavbarStyleFullscreen
-                            navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
+                    <div id="nav" data-section="nav">
+                        <NavbarLayoutFloatingInline
+                            navItems={[{ name: "Home", id: "/" }, { name: "Features", id: "#features" }, { name: "About", id: "#about" }, { name: "Pricing", id: "#pricing" }, { name: "Testimonials", id: "#testimonials" }, { name: "Blog", id: "/blog" }, { name: "Shop", id: "/shop" }]}                        
                             brandName="AI Voyage"
-                            bottomLeftText="Explore Smarter"
-                            bottomRightText="hello@aivoyage.com"
+                            button={{ text: "Get Started", href: "#contact" }}
                         />
                     </div>
                     <div id="loading-state" data-section="loading-state">
@@ -122,12 +121,11 @@ function ProductPageContent({ params }: ProductPageProps) {
                 headingFontWeight="semibold"
             >
                 <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
-                        <NavbarStyleFullscreen
-                            navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
+                    <div id="nav" data-section="nav">
+                        <NavbarLayoutFloatingInline
+                            navItems={[{ name: "Home", id: "/" }, { name: "Features", id: "#features" }, { name: "About", id: "#about" }, { name: "Pricing", id: "#pricing" }, { name: "Testimonials", id: "#testimonials" }, { name: "Blog", id: "/blog" }, { name: "Shop", id: "/shop" }]}                        
                             brandName="AI Voyage"
-                            bottomLeftText="Explore Smarter"
-                            bottomRightText="hello@aivoyage.com"
+                            button={{ text: "Get Started", href: "#contact" }}
                         />
                     </div>
                     <div id="not-found-state" data-section="not-found-state">
@@ -162,12 +160,11 @@ function ProductPageContent({ params }: ProductPageProps) {
             headingFontWeight="semibold"
         >
             <ReactLenis root>
-                <div id="navbar" data-section="navbar">
-                    <NavbarStyleFullscreen
-                        navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
+                <div id="nav" data-section="nav">
+                    <NavbarLayoutFloatingInline
+                        navItems={[{ name: "Home", id: "/" }, { name: "Features", id: "#features" }, { name: "About", id: "#about" }, { name: "Pricing", id: "#pricing" }, { name: "Testimonials", id: "#testimonials" }, { name: "Blog", id: "/blog" }, { name: "Shop", id: "/shop" }]}                        
                         brandName="AI Voyage"
-                        bottomLeftText="Explore Smarter"
-                        bottomRightText="hello@aivoyage.com"
+                        button={{ text: "Get Started", href: "#contact" }}
                     />
                 </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 6161848..1baeb9f 100644
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -3,7 +3,7 @@
 import { Suspense } from "react";
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
 import { useProductCatalog } from "@/hooks/useProductCatalog";
@@ -32,12 +32,11 @@ function ShopPageContent() {
                 headingFontWeight="semibold"
             >
                 <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
-                        <NavbarStyleFullscreen
-                            navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
+                    <div id="nav" data-section="nav">
+                        <NavbarLayoutFloatingInline
+                            navItems={[{ name: "Home", id: "/" }, { name: "Features", id: "#features" }, { name: "About", id: "#about" }, { name: "Pricing", id: "#pricing" }, { name: "Testimonials", id: "#testimonials" }, { name: "Blog", id: "/blog" }, { name: "Shop", id: "/shop" }]}                        
                             brandName="AI Voyage"
-                            bottomLeftText="Explore Smarter"
-                            bottomRightText="hello@aivoyage.com"
+                            button={{ text: "Get Started", href: "#contact" }}
                         />
                     </div>
                     <main className="min-h-screen flex items-center justify-center pt-20">
@@ -74,12 +73,11 @@ function ShopPageContent() {
             headingFontWeight="semibold"
         >
             <ReactLenis root>
-                <div id="navbar" data-section="navbar">
-                    <NavbarStyleFullscreen
-                        navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
+                <div id="nav" data-section="nav">
+                    <NavbarLayoutFloatingInline
+                        navItems={[{ name: "Home", id: "/" }, { name: "Features", id: "#features" }, { name: "About", id: "#about" }, { name: "Pricing", id: "#pricing" }, { name: "Testimonials", id: "#testimonials" }, { name: "Blog", id: "/blog" }, { name: "Shop", id: "/shop" }]}                        
                         brandName="AI Voyage"
-                        bottomLeftText="Explore Smarter"
-                        bottomRightText="hello@aivoyage.com"
+                        button={{ text: "Get Started", href: "#contact" }}
                     />
                 </div>
                 <div id="product-catalog" data-section="product-catalog">