diff --git a/src/app/products/[id]/page.tsx b/src/app/products/[id]/page.tsx
index 88e4bb4..37ea6d7 100644
--- a/src/app/products/[id]/page.tsx
+++ b/src/app/products/[id]/page.tsx
@@ -1,162 +1,199 @@
 'use client';
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
 
-import { ThemeProvider } from 'next-themes';
-import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import TextAnimation from '@/components/text/TextAnimation';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 import ButtonTextShift from '@/components/button/ButtonTextShift/ButtonTextShift';
-import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
-import ProductCardThree from '@/components/sections/product/ProductCardThree';
-import { Sparkles, Star } from 'lucide-react';
+import TextAnimation from '@/components/text/TextAnimation';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+
+import { usePathname } from 'next/navigation';
+import { useState, useEffect } from 'react';
 
 export default function ProductDetailPage() {
-  const book = {
-    id: 'the-alchemist',
-    title: 'The Alchemist',
-    author: 'Paulo Coelho',
-    description: 'A captivating novel about a young shepherd who journeys to the Egyptian desert in search of a treasure. His quest leads him to discover a different kind of treasure than he originally envisioned.',
-    price: '$12.99',
-    imageSrc: 'https://pub-8b4931a55099479ca4d5a9d685ac336c.r2.dev/book-cover-alchemist.png',
-    imageAlt: 'The Alchemist book cover',
-    rating: 4.8,
-    reviewCount: 1500,
-  };
+  const pathname = usePathname();
+  const productId = pathname.split('/').pop();
 
-  const reviews = [
-    {
-      id: '1',
-      name: 'Sophia M.',
-      role: 'Avid Reader',
-      testimonial: 'An inspiring and thought-provoking read that I couldn\'t put down. Highly recommended!',
-      imageSrc: 'https://pub-8b4931a55099479ca4d5a9d685ac336c.r2.dev/customer-avatar-1.jpg',
-      icon: Star,
-    },
-    {
-      id: '2',
-      name: 'John D.',
-      role: 'Book Enthusiast',
-      testimonial: 'The story is beautifully written and full of wisdom. A true classic that everyone should read.',
-      imageSrc: 'https://pub-8b4931a55099479ca4d5a9d685ac336c.r2.dev/customer-avatar-2.jpg',
-      icon: Star,
-    },
-    {
-      id: '3',
-      name: 'Emily R.',
-      role: 'Philosophy Student',
-      testimonial: 'Changed my perspective on life and destiny. Deeply moving and thought-provoking.',
-      imageSrc: 'https://pub-8b4931a55099479ca4d5a9d685ac336c.r2.dev/customer-avatar-3.jpg',
-      icon: Star,
-    },
+  const [product, setProduct] = useState<any>(null);
+
+  useEffect(() => {
+    // Simulate fetching product details
+    const dummyProducts = [
+      {
+        id: "prod1", brand: "BrandA", name: "Stylish Shirt", price: "$29.99", rating: 4.5,
+        reviewCount: "120", imageSrc: "https://via.placeholder.com/600x400?text=Product+1", imageAlt: "Stylish Shirt",        description: "A very stylish shirt made from premium cotton. Perfect for any occasion.",        details: ["100% Cotton", "Machine Washable", "Available in S, M, L, XL"],
+        reviews: [
+            { author: "Alice", text: "Great shirt, very comfortable!", rating: 5 },
+            { author: "Bob", text: "Good quality for the price.", rating: 4 },
+        ]
+      },
+      {
+        id: "prod2", brand: "BrandB", name: "Comfy Jeans", price: "$49.99", rating: 4.2,
+        reviewCount: "85", imageSrc: "https://via.placeholder.com/600x400?text=Product+2", imageAlt: "Comfy Jeans",        description: "Comfortable and durable jeans, perfect for everyday wear.",        details: ["98% Cotton, 2% Spandex", "Regular Fit", "Multiple sizes available"],
+        reviews: [
+            { author: "Charlie", text: "My new favorite jeans!", rating: 5 },
+            { author: "Diana", text: "A bit snug, but good overall.", rating: 3 },
+        ]
+      },
+      {
+        id: "prod3", brand: "BrandC", name: "Running Shoes", price: "$79.99", rating: 4.8,
+        reviewCount: "200", imageSrc: "https://via.placeholder.com/600x400?text=Product+3", imageAlt: "Running Shoes",        description: "High-performance running shoes designed for ultimate comfort and speed.",        details: ["Lightweight design", "Breathable mesh", "Shock-absorbing sole"],
+        reviews: [
+            { author: "Eve", text: "Amazing shoes for long runs.", rating: 5 },
+            { author: "Frank", text: "Worth every penny.", rating: 5 },
+        ]
+      },
+    ];
+
+    const foundProduct = dummyProducts.find(p => p.id === productId);
+    setProduct(foundProduct);
+  }, [productId]);
+
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Cart", id: "/cart" },
+    { name: "Checkout", id: "/checkout" },
+    { name: "Order Conf", id: "/order-confirmation" },
+    { name: "Products", id: "/products/1" },
+    { name: "Collections", id: "/collections/all" }
   ];
 
-  const relatedProducts = [
-    {
-      id: 'little-prince',
-      name: 'The Little Prince',
-      price: '$9.99',
-      imageSrc: 'https://pub-8b4931a55099479ca4d5a9d685ac336c.r2.dev/book-cover-little-prince.png',
-      imageAlt: 'The Little Prince book cover',
-    },
-    {
-      id: 'siddhartha',
-      name: 'Siddhartha',
-      price: '$11.50',
-      imageSrc: 'https://pub-8b4931a55099479ca4d5a9d685ac336c.r2.dev/book-cover-siddhartha.png',
-      imageAlt: 'Siddhartha book cover',
-    },
-    {
-      id: 'jonathan-seagull',
-      name: 'Jonathan Livingston Seagull',
-      price: '$8.75',
-      imageSrc: 'https://pub-8b4931a55099479ca4d5a9d685ac336c.r2.dev/book-cover-jonathan-seagull.png',
-      imageAlt: 'Jonathan Livingston Seagull book cover',
-    },
-    {
-      id: 'the-prophet',
-      name: 'The Prophet',
-      price: '$10.25',
-      imageSrc: 'https://pub-8b4931a55099479ca4d5a9d685ac336c.r2.dev/book-cover-prophet.png',
-      imageAlt: 'The Prophet book cover',
-    },
-  ];
+  if (!product) {
+    return (
+      <ThemeProvider
+        defaultButtonVariant="hover-magnetic"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="medium"
+        sizing="medium"
+        background="none"
+        cardStyle="solid"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="bold"
+      >
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered navItems={navItems} brandName="Webild" logoSrc="https://via.placeholder.com/40" />
+        </div>
+        <main className="flex min-h-screen flex-col items-center justify-center p-24">
+          <p>Loading product details...</p>
+        </main>
+        <FooterBaseReveal
+          logoText="Webild"
+          columns={[
+            {
+              title: "Company", items: [
+                { label: "About Us", href: "/" },
+                { label: "Contact", href: "/" },
+              ],
+            },
+            {
+              title: "Legal", items: [
+                { label: "Privacy Policy", href: "/" },
+                { label: "Terms of Service", href: "/" },
+              ],
+            },
+          ]}
+          copyrightText="© 2023 Webild. All rights reserved."
+        />
+      </ThemeProvider>
+    );
+  }
 
   return (
-    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-      <NavbarLayoutFloatingInline
-        navItems={[
-          { name: 'Home', id: '/' },
-          { name: 'Products', id: '/products' },
-          { name: 'About', id: '/#about' }
-        ]}
-        brandName="Bookish"
-        button={{ text: 'Sign Up', href: '/#contact' }}
-      />
-      <main className="flex min-h-screen flex-col items-center justify-start p-8 md:p-16 relative z-10">
-        {/* Book Information Section */}
-        <section id="book-info" data-section="book-info" className="w-full max-w-6xl py-16 grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
-          <div className="flex justify-center md:justify-end">
-            <img
-              src={book.imageSrc}
-              alt={book.imageAlt}
-              className="w-full max-w-xs md:max-w-sm rounded-lg shadow-2xl transition-transform duration-300 hover:scale-105"
-            />
-          </div>
-          <div className="flex flex-col gap-6 text-center md:text-left">
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered navItems={navItems} brandName="Webild" logoSrc="https://via.placeholder.com/40" />
+      </div>
+      <main className="flex min-h-screen flex-col items-center justify-between p-24">
+        <div id="product-detail-hero" data-section="product-detail-hero" className="w-full max-w-4xl mx-auto">
+          <div className="text-center my-8">
             <TextAnimation
-              title={book.title}
               type="entrance-slide"
-              className="text-5xl md:text-6xl font-extrabold text-foreground leading-tight"
-            />
-            <p className="text-xl text-primary-cta font-medium">By {book.author}</p>
-            <p className="text-lg text-foreground-lighter">{book.description}</p>
-            <div className="flex items-center justify-center md:justify-start gap-2 text-xl text-yellow-500">
-              {Array.from({ length: Math.floor(book.rating) }).map((_, i) => (
-                <Star key={i} fill="currentColor" stroke="none" size={20} />
-              ))}
-              <span className="text-foreground text-base ml-1">({book.rating} / {book.reviewCount} reviews)</span>
+              className="text-4xl font-bold mb-4"
+            >
+              {`Details for ${product?.name || 'Product'}`}
+            </TextAnimation>
+          </div>
+
+          <div className="grid md:grid-cols-2 gap-8 my-10">
+            <div className="relative aspect-video">
+              <img src={product.imageSrc} alt={product.imageAlt} className="w-full h-full object-cover rounded-lg shadow-lg" />
             </div>
-            <p className="text-4xl font-bold text-foreground mt-4">{book.price}</p>
-            <div className="flex flex-col sm:flex-row items-center justify-center md:justify-start gap-4 mt-6">
-              <input
-                type="number"
-                defaultValue={1}
-                min={1}
-                className="w-20 p-3 border border-border-light rounded-md text-center bg-card text-foreground focus:ring-2 focus:ring-primary-cta focus:border-transparent transition-all duration-200"
+            <div>
+              <h2 className="text-3xl font-bold mb-2">{product.name}</h2>
+              <p className="text-2xl text-primary-cta font-semibold mb-4">{product.price}</p>
+              <div className="flex items-center mb-4">
+                <span className="text-yellow-500 mr-1">{'★'.repeat(Math.floor(product.rating))}</span>
+                <span className="text-gray-400">{'★'.repeat(5 - Math.floor(product.rating))}</span>
+                <span className="ml-2 text-sm text-gray-600">({product.reviewCount} Reviews)</span>
+              </div>
+              <p className="text-gray-700 mb-6">{product.description}</p>
+              <h3 className="text-xl font-semibold mb-2">Product Details</h3>
+              <ul className="list-disc list-inside text-gray-600 mb-6">
+                {product.details.map((detail: string, index: number) => (
+                  <li key={index}>{detail}</li>
+                ))}
+              </ul>
+              <ButtonTextShift
+                text="Add to Cart"
+                onClick={() => alert(`Added ${product.name} to cart!`)}
+                className="w-full py-3 text-lg"
+                textClassName="font-bold"
               />
-              <ButtonTextShift text="Add to Cart" className="w-full sm:w-auto px-8 py-3 rounded-lg font-semibold" />
             </div>
           </div>
-        </section>
 
-        {/* Reviews Section */}
-        <div id="reviews" data-section="reviews" className="w-full py-16">
-          <TestimonialCardTwo
-            testimonials={reviews}
-            title="What Our Readers Say"
-            description="Hear from our satisfied customers about their experience with this book."
-            animationType="blur-reveal"
-            carouselMode="buttons"
-            uniformGridCustomHeightClasses="min-h-none"
-            tag="Reviews"
-            tagIcon={Sparkles}
-            textboxLayout="default"
-            useInvertedBackground={false}
-          />
-        </div>
-
-        {/* Related Products Section */}
-        <div id="related-products" data-section="related-products" className="w-full py-16">
-          <ProductCardThree
-            products={relatedProducts}
-            title="You Might Also Like"
-            description="Discover other captivating titles that share similar themes."
-            gridVariant="four-items-2x2-equal-grid"
-            animationType="slide-up"
-            tag="More Books"
-            textboxLayout="default"
-            useInvertedBackground={false}
-          />
+          <div className="my-10">
+            <h3 className="text-2xl font-bold mb-4 text-center">Customer Reviews</h3>
+            {product.reviews.length > 0 ? (
+              <div className="grid md:grid-cols-2 gap-6">
+                {product.reviews.map((review: any, index: number) => (
+                  <div key={index} className="bg-card p-6 rounded-lg shadow-md">
+                    <div className="flex items-center mb-2">
+                      <span className="text-yellow-500 mr-1">{'★'.repeat(review.rating)}</span>
+                      <span className="text-gray-400">{'★'.repeat(5 - review.rating)}</span>
+                      <span className="ml-2 font-semibold">{review.author}</span>
+                    </div>
+                    <p className="text-gray-700">{review.text}</p>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <p className="text-center text-gray-600">No reviews yet for this product.</p>
+            )}
+          </div>
         </div>
       </main>
+      <FooterBaseReveal
+        logoText="Webild"
+        columns={[
+          {
+            title: "Company",            items: [
+              { label: "About Us", href: "/" },
+              { label: "Contact", href: "/" }
+            ]
+          },
+          {
+            title: "Legal",            items: [
+              { label: "Privacy Policy", href: "/" },
+              { label: "Terms of Service", href: "/" }
+            ]
+          }
+        ]}
+        copyrightText="© 2023 Webild. All rights reserved."
+      />
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}