diff --git a/src/app/shop/[id]/page.tsx b/src/app/shop/[id]/page.tsx
index bcbed1c..969657e 100644
--- a/src/app/shop/[id]/page.tsx
+++ b/src/app/shop/[id]/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { use, useCallback } from "react";
+import { use, useCallback, useState } from "react";
 import { useRouter } from "next/navigation";
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
@@ -19,6 +19,7 @@ interface ProductPageProps {
 export default function ProductPage({ params }: ProductPageProps) {
     const { id } = use(params);
     const router = useRouter();
+    const [cartOpen, setCartOpen] = useState(false);
 
     const {
         product,
@@ -33,8 +34,8 @@ export default function ProductPage({ params }: ProductPageProps) {
 
     const {
         items: cartItems,
-        isOpen: cartOpen,
-        setIsOpen: setCartOpen,
+        isOpen: isCartOpen,
+        setIsOpen: setIsCartOpen,
         addItem,
         updateQuantity,
         removeItem,
@@ -236,17 +237,27 @@ export default function ProductPage({ params }: ProductPageProps) {
                     logoHref="#"
                 />
                 </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}
+                    meta={meta}
+                    variants={variants}
+                    quantityVariant={quantityVariant}
+                    onAddToCart={handleAddToCart}
+                    onBuyNow={handleBuyNow}
                 />
                 </div>
+                <ProductCart
+                    isOpen={isCartOpen}
+                    onClose={() => setIsCartOpen(false)}
+                    items={cartItems}
+                    onUpdateQuantity={updateQuantity}
+                    onRemoveItem={removeItem}
+                    total={cartTotal}
+                    onCheckout={handleCheckout}
+                    isLoading={isCheckoutLoading}
+                />
                 <div id="footer" data-section="footer">
                 <FooterBaseReveal
                     columns={[
@@ -261,7 +272,7 @@ export default function ProductPage({ params }: ProductPageProps) {
                             title: "Legal",                            items: [
                                 { label: "Privacy Policy", href: "https://example.com/privacy" },
                                 { label: "Terms of Service", href: "https://example.com/terms" }
-                            ]
+                            }
                         },
                         {
                             title: "Connect",                            items: [