diff --git a/src/app/shop/[id]/page.tsx b/src/app/shop/[id]/page.tsx
index a76be59..5f156f1 100644
--- a/src/app/shop/[id]/page.tsx
+++ b/src/app/shop/[id]/page.tsx
@@ -225,60 +225,74 @@ export default function ProductPage({ params }: ProductPageProps) {
         >
             <ReactLenis root>
                 <div id="navbar" data-section="navbar">
-                <NavbarLayoutFloatingInline
-                    brandName="CreatorHub"
-                    navItems={[
-                        { name: "Home", id: "/" },
-                        { name: "Features", id: "features" },
-                        { name: "Pricing", id: "pricing" },
-                        { name: "Creators", id: "creators" },
-                        { name: "Reviews", id: "testimonials" },
-                        { name: "Shop", id: "/shop" }
-                    ]}
-                    button={{ text: "Get Started", href: "contact" }}
-                />
+                    <NavbarLayoutFloatingInline
+                        brandName="CreatorHub"
+                        navItems={[
+                            { name: "Home", id: "/" },
+                            { name: "Features", id: "features" },
+                            { name: "Pricing", id: "pricing" },
+                            { name: "Creators", id: "creators" },
+                            { name: "Reviews", id: "testimonials" },
+                            { name: "Shop", id: "/shop" }
+                        ]}
+                        button={{ text: "Cart", onClick: () => setCartOpen(true) }}
+                    />
                 </div>
-                <div id="productCatalog" data-section="productCatalog">
-                <ProductCatalog
-                    layout="page"
-                    products={products}
-                    searchValue={search}
-                    onSearchChange={setSearch}
-                    searchPlaceholder="Search products..."
-                    filters={filters}
-                    emptyMessage="No products found"
-                />
+                
+                <div id="productDetail" data-section="productDetail">
+                    <ProductDetailCard
+                        product={product}
+                        images={images}
+                        variants={variants}
+                        onAddToCart={handleAddToCart}
+                        onBuyNow={handleBuyNow}
+                        meta={meta}
+                        selectedQuantity={selectedQuantity}
+                        quantityVariant={quantityVariant}
+                    />
                 </div>
+
+                <ProductCart
+                    isOpen={cartOpen}
+                    onClose={() => setCartOpen(false)}
+                    items={cartItems}
+                    onUpdateQuantity={updateQuantity}
+                    onRemoveItem={removeItem}
+                    total={cartTotal}
+                    onCheckout={handleCheckout}
+                    isLoading={isCheckoutLoading}
+                />
+
                 <div id="footer" data-section="footer">
-                <FooterBaseReveal
-                    columns={[
-                        {
-                            title: "Product",                            items: [
-                                { label: "Features", href: "features-bento" },
-                                { label: "Pricing", href: "pricing" },
-                                { label: "Creator Tools", href: "features-border" },
-                                { label: "Security", href: "https://creatorhub.com/security" }
-                            ]
-                        },
-                        {
-                            title: "Resources",                            items: [
-                                { label: "Documentation", href: "https://docs.creatorhub.com" },
-                                { label: "Blog", href: "https://blog.creatorhub.com" },
-                                { label: "Tutorials", href: "https://learn.creatorhub.com" },
-                                { label: "API Reference", href: "https://api.creatorhub.com" }
-                            ]
-                        },
-                        {
-                            title: "Company",                            items: [
-                                { label: "About Us", href: "https://creatorhub.com/about" },
-                                { label: "Careers", href: "https://careers.creatorhub.com" },
-                                { label: "Contact", href: "contact" },
-                                { label: "Brand Partners", href: "https://creatorhub.com/brands" }
-                            ]
-                        }
-                    ]}
-                    copyrightText="© 2025 CreatorHub. All rights reserved. Empowering creators worldwide."
-                />
+                    <FooterBaseReveal
+                        columns={[
+                            {
+                                title: "Product",                                items: [
+                                    { label: "Features", href: "features-bento" },
+                                    { label: "Pricing", href: "pricing" },
+                                    { label: "Creator Tools", href: "features-border" },
+                                    { label: "Security", href: "https://creatorhub.com/security" }
+                                ]
+                            },
+                            {
+                                title: "Resources",                                items: [
+                                    { label: "Documentation", href: "https://docs.creatorhub.com" },
+                                    { label: "Blog", href: "https://blog.creatorhub.com" },
+                                    { label: "Tutorials", href: "https://learn.creatorhub.com" },
+                                    { label: "API Reference", href: "https://api.creatorhub.com" }
+                                ]
+                            },
+                            {
+                                title: "Company",                                items: [
+                                    { label: "About Us", href: "https://creatorhub.com/about" },
+                                    { label: "Careers", href: "https://careers.creatorhub.com" },
+                                    { label: "Contact", href: "contact" },
+                                    { label: "Brand Partners", href: "https://creatorhub.com/brands" }
+                                ]
+                            }
+                        ]}
+                        copyrightText="© 2025 CreatorHub. All rights reserved. Empowering creators worldwide."
+                    />
                 </div>
             </ReactLenis>
         </ThemeProvider>