diff --git a/src/app/products/[id]/page.tsx b/src/app/products/[id]/page.tsx
new file mode 100644
index 0000000..88e4bb4
--- /dev/null
+++ b/src/app/products/[id]/page.tsx
@@ -0,0 +1,162 @@
+'use client';
+
+import { ThemeProvider } from 'next-themes';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import TextAnimation from '@/components/text/TextAnimation';
+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';
+
+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 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 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',
+    },
+  ];
+
+  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">
+            <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>
+            </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"
+              />
+              <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>
+      </main>
+    </ThemeProvider>
+  );
+}
\ No newline at end of file