diff --git a/src/app/product-detail/page.tsx b/src/app/product-detail/page.tsx
new file mode 100644
index 0000000..b2ec0a6
--- /dev/null
+++ b/src/app/product-detail/page.tsx
@@ -0,0 +1,126 @@
+"use client";
+
+import { ThemeProvider } from "next-themes";
+import { Sparkles, ShoppingCart, Heart, Share2, Scale } from "lucide-react"; // Example icons
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+
+export default function ProductDetailPage() {
+  const product = {
+    name: "Minimalist Wooden Desk",    price: "$299.00",    discount: "33% off",    originalPrice: "$450.00",    stockStatus: "In Stock",    deliveryEstimate: "2-3 business days",    images: [
+      { src: "https://r2.webild.com/ecommerce/ecommerce-product-mockup-1.webp", alt: "Product image 1" },
+      { src: "https://r2.webild.com/ecommerce/ecommerce-product-mockup-2.webp", alt: "Product image 2" },
+      { src: "https://r2.webild.com/ecommerce/ecommerce-product-mockup-3.webp", alt: "Product image 3" },
+      { src: "https://r2.webild.com/ecommerce/ecommerce-product-mockup-4.webp", alt: "Product image 4" }
+    ],
+    description: "Experience the perfect blend of functionality and Scandinavian elegance with our Minimalist Wooden Desk. Crafted from sustainably sourced oak, this desk offers a spacious work surface and a clean, uncluttered design that enhances any modern interior. Its robust construction ensures durability, while the natural wood grain adds a touch of organic warmth to your workspace.",    specifications: [
+      { label: "Dimensions", value: "L 120cm x W 60cm x H 75cm" },
+      { label: "Material", value: "Solid Oak, Veneer" },
+      { label: "Weight", value: "25 kg" },
+      { label: "Color", value: "Natural Oak" }
+    ],
+    materials: "100% FSC-certified solid oak and oak veneer. Finished with a non-toxic, water-based lacquer.",    sustainability: "Our desk is crafted from wood sourced from responsibly managed forests, ensuring environmental protection and social benefits. We prioritize minimal waste production and use eco-friendly packaging materials.",    shippingReturns: {
+      shipping: "Free standard shipping on all orders over $100. Expedited shipping options available at checkout. Estimated delivery: 2-3 business days.",      returns: "30-day hassle-free returns. Product must be in original condition and packaging. See full policy for details."
+    }
+  };
+
+  const navItems = [
+    { name: 'Home', id: '/' },
+    { name: 'Product', id: '/product-detail' }
+  ];
+
+  return (
+    <ThemeProvider attribute="class" enableSystem>
+      <NavbarStyleApple navItems={navItems} brandName="Hara Minimalist Living" />
+      <main className="min-h-screen bg-background text-foreground">
+        <div className="container mx-auto px-4 py-8">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+            {/* Product Gallery & Image Zoom */}
+            <div className="flex flex-col gap-4">
+              <div className="relative overflow-hidden rounded-lg shadow-lg aspect-w-16 aspect-h-9 sm:aspect-h-10 md:aspect-h-11 lg:aspect-h-12 xl:aspect-h-13 2xl:aspect-h-14">
+                <img
+                  src={product.images[0].src}
+                  alt={product.images[0].alt}
+                  className="w-full h-full object-cover transition-transform duration-500 hover:scale-110 cursor-zoom-in"
+                />
+              </div>
+              <div className="grid grid-cols-4 gap-2">
+                {product.images.map((image, index) => (
+                  <img
+                    key={index}
+                    src={image.src}
+                    alt={image.alt}
+                    className="w-full h-24 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-primary-cta"
+                  />
+                ))}
+              </div>
+            </div>
+
+            {/* Product Info & Actions */}
+            <div className="flex flex-col gap-6">
+              <h1 className="text-4xl font-extrabold text-foreground">{product.name}</h1>
+              <div className="flex items-baseline gap-2">
+                <span className="text-3xl font-bold text-primary-cta">{product.price}</span>
+                <span className="text-lg text-muted-foreground line-through">{product.originalPrice}</span>
+                <span className="text-lg font-semibold text-accent">{product.discount}</span>
+              </div>
+              <div className="text-md text-foreground flex items-center gap-2">
+                <Sparkles className="h-5 w-5 text-accent" /> {product.stockStatus}
+              </div>
+              <p className="text-sm text-muted-foreground">Delivery: {product.deliveryEstimate}</p>
+
+              {/* Action Buttons */}
+              <div className="flex flex-col sm:flex-row gap-4">
+                <button className="flex-1 px-6 py-3 bg-primary-cta text-primary-cta-foreground rounded-lg font-semibold shadow-md hover:bg-primary-cta/90 transition-colors flex items-center justify-center gap-2">
+                  <ShoppingCart className="h-5 w-5" /> Add to Cart
+                </button>
+                <button className="flex-1 px-6 py-3 bg-foreground text-background rounded-lg font-semibold shadow-md hover:bg-foreground/90 transition-colors">
+                  Buy Now
+                </button>
+                <button className="p-3 bg-card text-foreground rounded-lg shadow-md hover:bg-card/90 transition-colors flex items-center justify-center">
+                  <Heart className="h-5 w-5" />
+                </button>
+                <button className="p-3 bg-card text-foreground rounded-lg shadow-md hover:bg-card/90 transition-colors flex items-center justify-center">
+                  <Scale className="h-5 w-5" />
+                </button>
+                <button className="p-3 bg-card text-foreground rounded-lg shadow-md hover:bg-card/90 transition-colors flex items-center justify-center">
+                  <Share2 className="h-5 w-5" />
+                </button>
+              </div>
+
+              {/* Product Details Sections */}
+              <div className="mt-8 space-y-6">
+                <div>
+                  <h2 className="text-2xl font-bold text-foreground mb-2">Description</h2>
+                  <p className="text-muted-foreground">{product.description}</p>
+                </div>
+                <div>
+                  <h2 className="text-2xl font-bold text-foreground mb-2">Specifications</h2>
+                  <ul className="list-disc list-inside text-muted-foreground space-y-1">
+                    {product.specifications.map((spec, index) => (
+                      <li key={index}>
+                        <strong>{spec.label}:</strong> {spec.value}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+                <div>
+                  <h2 className="text-2xl font-bold text-foreground mb-2">Materials</h2>
+                  <p className="text-muted-foreground">{product.materials}</p>
+                </div>
+                <div>
+                  <h2 className="text-2xl font-bold text-foreground mb-2">Sustainability</h2>
+                  <p className="text-muted-foreground">{product.sustainability}</p>
+                </div>
+                <div>
+                  <h2 className="text-2xl font-bold text-foreground mb-2">Shipping & Returns</h2>
+                  <p className="text-muted-foreground mb-2"><strong>Shipping:</strong> {product.shippingReturns.shipping}</p>
+                  <p className="text-muted-foreground"><strong>Returns:</strong> {product.shippingReturns.returns}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </ThemeProvider>
+  );
+}
\ No newline at end of file