diff --git a/src/app/cart/page.tsx b/src/app/cart/page.tsx
index e878364..bc1a615 100644
--- a/src/app/cart/page.tsx
+++ b/src/app/cart/page.tsx
@@ -1,27 +1,32 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 import ProductCart from '@/components/ecommerce/cart/ProductCart';
 
 export default function CartPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingInline
-        navItems={[{ name: "Home", id: "/" }, { name: "Products", id: "/#catalog" }]} 
-        brandName="Pilicat"
-      />
+    <ThemeProvider defaultButtonVariant="hover-magnetic" 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">
+        <NavbarStyleApple 
+          navItems={[{ name: "Home", id: "/" }, { name: "Cart", id: "/cart" }, { name: "Checkout", id: "/checkout" }, { name: "Profile", id: "/profile" }]} 
+          brandName="Pilicat"
+          button={{ text: "Contact", href: "#contact" }}
+        />
+      </div>
       <div className="min-h-screen py-24 px-8">
          <ProductCart 
             isOpen={true} 
             onClose={() => {}} 
             items={[]} 
             total="$0.00"
-            buttons={[{ text: "Checkout", href: "#" }]}
+            buttons={[{ text: "Checkout", href: "/checkout" }]}
          />
       </div>
-      <FooterSimple columns={[]} />
+      <div id="footer" data-section="footer">
+        <FooterSimple columns={[]} bottomLeftText="© 2024 Pilicat." bottomRightText="Privacy Policy" />
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file
diff --git a/src/app/checkout/page.tsx b/src/app/checkout/page.tsx
index c35da97..ff21423 100644
--- a/src/app/checkout/page.tsx
+++ b/src/app/checkout/page.tsx
@@ -1,33 +1,33 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 import React from 'react';
 
 export default function CheckoutPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingInline
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "Products", id: "/#catalog" },
-          { name: "Checkout", id: "/checkout" },
-          { name: "Profile", id: "/profile" },
-        ]}
-        brandName="Pilicat"
-      />
+    <ThemeProvider defaultButtonVariant="hover-magnetic" 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">
+        <NavbarStyleApple 
+          navItems={[{ name: "Home", id: "/" }, { name: "Cart", id: "/cart" }, { name: "Checkout", id: "/checkout" }, { name: "Profile", id: "/profile" }]} 
+          brandName="Pilicat"
+          button={{ text: "Contact", href: "#contact" }}
+        />
+      </div>
       <main className="min-h-screen pt-24 px-8 pb-16">
         <h1 className="text-4xl font-bold mb-8">Checkout</h1>
         <div className="bg-card p-8 rounded-lg shadow-sm">
           <p className="text-lg">Complete your purchase by entering your shipping details and payment information below.</p>
-          {/* Checkout form logic would go here */}
         </div>
       </main>
-      <FooterSimple
-        columns={[]}
-        bottomLeftText="© 2024 Pilicat. All rights reserved."
-      />
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[]}
+          bottomLeftText="© 2024 Pilicat. All rights reserved."
+          bottomRightText="Terms of Service"
+        />
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file
diff --git a/src/app/product/[id]/page.tsx b/src/app/product/[id]/page.tsx
index 55b64ab..880363d 100644
--- a/src/app/product/[id]/page.tsx
+++ b/src/app/product/[id]/page.tsx
@@ -1,20 +1,26 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
+import React from 'react';
 
-export default function ProductDetail({ params }: { params: { id: string } }) {
+export default function ProductPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingInline
-        navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/cart" }]} 
-        brandName="Pilicat"
-      />
-      <div className="min-h-screen py-24 flex items-center justify-center">
-        <h1 className="text-4xl">Product Detail: {params.id}</h1>
+    <ThemeProvider defaultButtonVariant="hover-magnetic" 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">
+        <NavbarStyleApple 
+          navItems={[{ name: "Home", id: "/" }, { name: "Cart", id: "/cart" }, { name: "Checkout", id: "/checkout" }, { name: "Profile", id: "/profile" }]} 
+          brandName="Pilicat"
+          button={{ text: "Contact", href: "#contact" }}
+        />
+      </div>
+      <main className="min-h-screen pt-24 px-8 pb-16">
+        <h1 className="text-4xl font-bold mb-8">Product Details</h1>
+      </main>
+      <div id="footer" data-section="footer">
+        <FooterSimple columns={[]} bottomLeftText="© 2024 Pilicat." bottomRightText="Privacy Policy" />
       </div>
-      <FooterSimple columns={[]} />
     </ThemeProvider>
   );
 }
\ No newline at end of file
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index 6a283b7..720e758 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -1,32 +1,33 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 import React from 'react';
 
 export default function ProfilePage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingInline
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "Products", id: "/#catalog" },
-          { name: "Checkout", id: "/checkout" },
-          { name: "Profile", id: "/profile" },
-        ]}
-        brandName="Pilicat"
-      />
+    <ThemeProvider defaultButtonVariant="hover-magnetic" 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">
+        <NavbarStyleApple 
+          navItems={[{ name: "Home", id: "/" }, { name: "Cart", id: "/cart" }, { name: "Checkout", id: "/checkout" }, { name: "Profile", id: "/profile" }]} 
+          brandName="Pilicat"
+          button={{ text: "Contact", href: "#contact" }}
+        />
+      </div>
       <main className="min-h-screen pt-24 px-8 pb-16">
         <h1 className="text-4xl font-bold mb-8">My Account</h1>
         <div className="bg-card p-8 rounded-lg shadow-sm">
           <p className="text-lg">Welcome back! View your order history, manage your profile, and update your preferences here.</p>
         </div>
       </main>
-      <FooterSimple
-        columns={[]}
-        bottomLeftText="© 2024 Pilicat. All rights reserved."
-      />
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[]}
+          bottomLeftText="© 2024 Pilicat. All rights reserved."
+          bottomRightText="Settings"
+        />
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file