diff --git a/src/app/product-detail/page.tsx b/src/app/product-detail/page.tsx
index 4537048..1f8ce44 100644
--- a/src/app/product-detail/page.tsx
+++ b/src/app/product-detail/page.tsx
@@ -6,14 +6,20 @@ import ButtonTextStagger from "@/components/button/ButtonTextStagger/ButtonTextS
 
 export default function ProductDetailPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingOverlay
-        brandName="Webild"
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "Shop", id: "/shop" },
-        ]}
-      />
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          brandName="Webild"
+          navItems={[
+            { name: "Mobile Phones", id: "/mobile-phones" },
+            { name: "Laptops", id: "/laptops" },
+            { name: "Computer Parts", id: "/computer-parts" },
+            { name: "Accessories", id: "/accessories" },
+            { name: "Checkout", id: "/checkout" },
+            { name: "Shop", id: "/shop" },
+          ]}
+        />
+      </div>
       <div className="pt-32 pb-20 container mx-auto px-6">
         <div className="grid md:grid-cols-2 gap-12 items-center">
           <img 
@@ -34,4 +40,4 @@ export default function ProductDetailPage() {
       </div>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file