diff --git a/src/app/shop/[id]/page.tsx b/src/app/shop/[id]/page.tsx
new file mode 100644
index 0000000..e28ccfe
--- /dev/null
+++ b/src/app/shop/[id]/page.tsx
@@ -0,0 +1,217 @@
+"use client";
+
+import { Suspense, use, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import ReactLenis from "lenis/react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ProductDetailCard from "@/components/ecommerce/productDetail/ProductDetailCard";
+import ProductCart from "@/components/ecommerce/cart/ProductCart";
+import { useProductDetail } from "@/hooks/useProductDetail";
+import { useCart } from "@/hooks/useCart";
+import { useCheckout } from "@/hooks/useCheckout";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+
+interface ProductPageProps {
+    params: Promise<{ id: string }>;
+}
+
+export default function ProductPage({ params }: ProductPageProps) {
+    return (
+        <Suspense fallback={null}>
+            <ProductPageContent params={params} />
+        </Suspense>
+    );
+}
+
+function ProductPageContent({ params }: ProductPageProps) {
+    const { id } = use(params);
+    const router = useRouter();
+
+    const {
+        product,
+        isLoading,
+        images,
+        meta,
+        variants,
+        quantityVariant,
+        selectedQuantity,
+        createCartItem,
+    } = useProductDetail(id);
+
+    const {
+        items: cartItems,
+        isOpen: cartOpen,
+        setIsOpen: setCartOpen,
+        addItem,
+        updateQuantity,
+        removeItem,
+        total: cartTotal,
+        getCheckoutItems,
+    } = useCart();
+
+    const { buyNow, checkout, isLoading: isCheckoutLoading } = useCheckout();
+
+    const handleAddToCart = useCallback(() => {
+        const item = createCartItem();
+        if (item) {
+            addItem(item);
+        }
+    }, [createCartItem, addItem]);
+
+    const handleBuyNow = useCallback(() => {
+        if (product) {
+            buyNow(product, selectedQuantity);
+        }
+    }, [product, selectedQuantity, buyNow]);
+
+    const handleCheckout = useCallback(async () => {
+        if (cartItems.length === 0) return;
+
+        const currentUrl = new URL(window.location.href);
+        currentUrl.searchParams.set("success", "true");
+
+        await checkout(getCheckoutItems(), { successUrl: currentUrl.toString() });
+    }, [cartItems, checkout, getCheckoutItems]);
+
+    if (isLoading) {
+        return (
+            <ThemeProvider defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="compact"
+      sizing="mediumLargeSizeLargeTitles"
+      background="noiseDiagonalGradient"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="solid"
+      headingFontWeight="semibold">
+                <ReactLenis root>
+                    <div id="nav" data-section="nav">
+
+                    <NavbarStyleFullscreen navItems={[
+            { name: "The News", id: "announcement" },
+            { name: "Timeline", id: "timeline" },
+            { name: "Gallery", id: "gallery" },
+            { name: "FAQ", id: "faq" },
+            { name: "Contact", id: "contact" }
+          ]}
+          brandName="DMITRY"
+          bottomLeftText="Breaking News"
+          bottomRightText="dmitry@transformation.com" />
+                </div>
+                    <main className="min-h-screen flex items-center justify-center pt-20">
+                        <p className="text-foreground">Loading product...</p>
+                    </main>
+                </ReactLenis>
+            </ThemeProvider>
+        );
+    }
+
+    if (!product) {
+        return (
+            <ThemeProvider
+                defaultButtonVariant="icon-arrow"
+                defaultTextAnimation="entrance-slide"
+                borderRadius="rounded"
+                contentWidth="medium"
+                sizing="medium"
+                background="none"
+                cardStyle="gradient-bordered"
+                primaryButtonStyle="gradient"
+                secondaryButtonStyle="layered"
+                headingFontWeight="medium"
+            >
+                <ReactLenis root>
+                    <div id="nav" data-section="nav">
+                        <NavbarLayoutFloatingInline
+                            navItems={[
+                                { name: "Home", id: "/" }
+                            ]}
+                            brandName="Mandarin"
+                            button={{ text: "Cart", onClick: () => setCartOpen(true) }}
+                        />
+                    </div>
+                    <main className="min-h-screen flex items-center justify-center pt-20">
+                        <div className="text-center">
+                            <p className="text-foreground mb-4">Product not found</p>
+                            <button
+                                onClick={() => router.push("/shop")}
+                                className="primary-button px-6 py-2 rounded-theme text-primary-cta-text"
+                            >
+                                Back to Shop
+                            </button>
+                        </div>
+                    </main>
+                </ReactLenis>
+            </ThemeProvider>
+        );
+    }
+
+    return (
+        <ThemeProvider
+            defaultButtonVariant="icon-arrow"
+            defaultTextAnimation="entrance-slide"
+            borderRadius="rounded"
+            contentWidth="medium"
+            sizing="medium"
+            background="none"
+            cardStyle="gradient-bordered"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="layered"
+            headingFontWeight="medium"
+        >
+            <ReactLenis root>
+                <div id="nav" data-section="nav">
+                <NavbarStyleApple
+                    brandName="Mandarin"
+                    navItems={[
+                        { name: "Home", id: "/" },
+                        { name: "Shop", id: "/shop" },
+                        { name: "About", id: "/about" },
+                        { name: "Contact", id: "/contact" },
+                    ]}
+                    button={{ text: "Cart", onClick: () => setCartOpen(true) }}
+                />
+                </div>
+                <div id="productDetailCard" data-section="productDetailCard">
+                <ProductDetailCard
+                    layout="page"
+                    name={product.name}
+                    price={product.price}
+                    salePrice={meta.salePrice}
+                    rating={product.rating || 0}
+                    description={product.description}
+                    images={images}
+                    variants={variants.length > 0 ? variants : undefined}
+                    quantity={quantityVariant}
+                    ribbon={meta.ribbon}
+                    inventoryStatus={meta.inventoryStatus}
+                    inventoryQuantity={meta.inventoryQuantity}
+                    sku={meta.sku}
+                    buttons={[
+                        { text: "Add To Cart", onClick: handleAddToCart },
+                        { text: "Buy Now", onClick: handleBuyNow },
+                    ]}
+                />
+                </div>
+                <div id="productCart" data-section="productCart">
+                <ProductCart
+                    isOpen={cartOpen}
+                    onClose={() => setCartOpen(false)}
+                    items={cartItems}
+                    onQuantityChange={updateQuantity}
+                    onRemove={removeItem}
+                    total={`$${cartTotal}`}
+                    buttons={[
+                        {
+                            text: isCheckoutLoading ? "Processing..." : "Check Out",
+                            onClick: handleCheckout,
+                        },
+                    ]}
+                />
+                </div>
+            </ReactLenis>
+        </ThemeProvider>
+    );
+}
diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
new file mode 100644
index 0000000..bede681
--- /dev/null
+++ b/src/app/shop/page.tsx
@@ -0,0 +1,99 @@
+"use client";
+
+import { Suspense } from "react";
+import ReactLenis from "lenis/react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
+import { useProductCatalog } from "@/hooks/useProductCatalog";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+
+function ShopPageContent() {
+    const {
+        products,
+        isLoading,
+        search,
+        setSearch,
+        filters,
+    } = useProductCatalog({ basePath: "/shop" });
+
+    if (isLoading) {
+        return (
+            <ThemeProvider defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="compact"
+      sizing="mediumLargeSizeLargeTitles"
+      background="noiseDiagonalGradient"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="solid"
+      headingFontWeight="semibold">
+                <ReactLenis root>
+                    <div id="nav" data-section="nav">
+
+                    <NavbarStyleFullscreen navItems={[
+            { name: "The News", id: "announcement" },
+            { name: "Timeline", id: "timeline" },
+            { name: "Gallery", id: "gallery" },
+            { name: "FAQ", id: "faq" },
+            { name: "Contact", id: "contact" }
+          ]}
+          brandName="DMITRY"
+          bottomLeftText="Breaking News"
+          bottomRightText="dmitry@transformation.com" />
+                </div>
+                    <main className="min-h-screen flex items-center justify-center pt-20">
+                        <p className="text-foreground">Loading products...</p>
+                    </main>
+                </ReactLenis>
+            </ThemeProvider>
+        );
+    }
+
+    return (
+        <ThemeProvider
+            defaultButtonVariant="icon-arrow"
+            defaultTextAnimation="entrance-slide"
+            borderRadius="rounded"
+            contentWidth="medium"
+            sizing="medium"
+            background="none"
+            cardStyle="gradient-bordered"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="layered"
+            headingFontWeight="medium"
+        >
+            <ReactLenis root>
+                <div id="nav" data-section="nav">
+                <NavbarLayoutFloatingInline
+                    navItems={[
+                        { name: "Home", id: "/" }
+                    ]}
+                    brandName="Mandarin"
+                    button={{ text: "Cart", onClick: () => console.log("cart") }}
+                />
+                </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>
+            </ReactLenis>
+        </ThemeProvider>
+    );
+}
+
+export default function ShopPage() {
+    return (
+        <Suspense>
+            <ShopPageContent />
+        </Suspense>
+    );
+}