diff --git a/src/app/cart/page.tsx b/src/app/cart/page.tsx
new file mode 100644
index 0000000..e878364
--- /dev/null
+++ b/src/app/cart/page.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+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"
+      />
+      <div className="min-h-screen py-24 px-8">
+         <ProductCart 
+            isOpen={true} 
+            onClose={() => {}} 
+            items={[]} 
+            total="$0.00"
+            buttons={[{ text: "Checkout", href: "#" }]}
+         />
+      </div>
+      <FooterSimple columns={[]} />
+    </ThemeProvider>
+  );
+}
\ No newline at end of file
diff --git a/src/app/checkout/page.tsx b/src/app/checkout/page.tsx
new file mode 100644
index 0000000..c35da97
--- /dev/null
+++ b/src/app/checkout/page.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+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"
+      />
+      <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."
+      />
+    </ThemeProvider>
+  );
+}
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index af2cb81..19c5817 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -6,7 +6,7 @@ import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FaqSplitText from '@/components/sections/faq/FaqSplitText';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 import HeroLogo from '@/components/sections/hero/HeroLogo';
-import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 
@@ -26,17 +26,16 @@ export default function LandingPage() {
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
-      navItems={[
-        {
-          name: "Home",          id: "hero"},
-        {
-          name: "Products",          id: "catalog"},
-        {
-          name: "Support",          id: "contact"},
-      ]}
+      <NavbarStyleApple
       brandName="Pilicat"
-      button={{ text: "Contact", href: "#contact" }}
+      navItems={[
+        { name: "Home", id: "hero" },
+        { name: "Shop", id: "catalog" },
+        { name: "Categories", id: "catalog" },
+        { name: "Search", id: "catalog" },
+        { name: "Cart", id: "cart" },
+        { name: "Account", id: "account" }
+      ]}
     />
   </div>
 
@@ -141,4 +140,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/product/[id]/page.tsx b/src/app/product/[id]/page.tsx
new file mode 100644
index 0000000..55b64ab
--- /dev/null
+++ b/src/app/product/[id]/page.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+
+export default function ProductDetail({ params }: { params: { id: string } }) {
+  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>
+      </div>
+      <FooterSimple columns={[]} />
+    </ThemeProvider>
+  );
+}
\ No newline at end of file
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
new file mode 100644
index 0000000..6a283b7
--- /dev/null
+++ b/src/app/profile/page.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+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"
+      />
+      <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."
+      />
+    </ThemeProvider>
+  );
+}
\ No newline at end of file