diff --git a/src/app/page.tsx b/src/app/page.tsx
index f402c51..0f2fe61 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -34,9 +34,10 @@ export default function SkincareTemplatePage() {
                         { name: "About", id: "about" },
                         { name: "Benefits", id: "benefits" },
                         { name: "Reviews", id: "reviews" },
+                        { name: "FAQ", id: "faq" },
                         { name: "Contact", id: "contact" }
                     ]}
-                    button={{ text: "Shop Now", href: "products" }}
+                    button={{ text: "Shop Now", href: "#products" }}
                 />
             </div>
 
@@ -77,25 +78,13 @@ export default function SkincareTemplatePage() {
                     description="Discover our carefully curated skincare essentials designed to nourish and revitalize your skin. Worldwide shipping available."
                     products={[
                         {
-                            id: "1",
-                            name: "Hydrating Moisturizer",
-                            price: "$68",
-                            imageSrc: "/templates/skincare/image2.webp",
-                            imageAlt: "Hydrating Moisturizer bottle"
+                            id: "1",                            name: "Hydrating Moisturizer",                            price: "$68",                            imageSrc: "/templates/skincare/image2.webp",                            imageAlt: "Hydrating Moisturizer bottle"
                         },
                         {
-                            id: "2",
-                            name: "Radiance Serum",
-                            price: "$85",
-                            imageSrc: "/templates/skincare/image3.webp",
-                            imageAlt: "Radiance Serum bottle"
+                            id: "2",                            name: "Radiance Serum",                            price: "$85",                            imageSrc: "/templates/skincare/image3.webp",                            imageAlt: "Radiance Serum bottle"
                         },
                         {
-                            id: "3",
-                            name: "Purifying Face Mask",
-                            price: "$52",
-                            imageSrc: "/templates/skincare/image1.webp",
-                            imageAlt: "Purifying Face Mask jar"
+                            id: "3",                            name: "Purifying Face Mask",                            price: "$52",                            imageSrc: "/templates/skincare/image1.webp",                            imageAlt: "Purifying Face Mask jar"
                         }
                     ]}
                     gridVariant="three-columns-all-equal-width"
@@ -111,20 +100,13 @@ export default function SkincareTemplatePage() {
                     description="Scientifically-formulated skincare products that deliver visible results with natural, sustainable ingredients. Available for worldwide shipping."
                     features={[
                         {
-                            title: "Worldwide Shipping",
-                            description: "Fast and reliable delivery to over 150 countries worldwide",
-                            bentoComponent: "globe"
+                            title: "Worldwide Shipping",                            description: "Fast and reliable delivery to over 150 countries worldwide",                            bentoComponent: "globe"
                         },
                         {
-                            title: "Clinically Proven",
-                            description: "Dermatologist-tested and proven effective in clinical trials",
-                            bentoComponent: "line-chart"
+                            title: "Clinically Proven",                            description: "Dermatologist-tested and proven effective in clinical trials",                            bentoComponent: "line-chart"
                         },
                         {
-                            title: "Sustainable",
-                            description: "Eco-conscious packaging and ethical sourcing practices",
-                            bentoComponent: "orbiting-icons",
-                            centerIcon: Leaf,
+                            title: "Sustainable",                            description: "Eco-conscious packaging and ethical sourcing practices",                            bentoComponent: "orbiting-icons",                            centerIcon: Leaf,
                             items: [
                                 { icon: Droplet, ring: 1 },
                                 { icon: Sprout, ring: 2 },
@@ -161,24 +143,16 @@ export default function SkincareTemplatePage() {
                     description="Everything you need to know about our skincare products, worldwide shipping, and delivery."
                     faqs={[
                         {
-                            id: "1",
-                            title: "How long does it take to see results?",
-                            content: "Most customers notice visible improvements in skin texture and radiance within 2-4 weeks of consistent use. For more significant results like reduced fine lines or hyperpigmentation, allow 6-8 weeks."
+                            id: "1",                            title: "How long does it take to see results?",                            content: "Most customers notice visible improvements in skin texture and radiance within 2-4 weeks of consistent use. For more significant results like reduced fine lines or hyperpigmentation, allow 6-8 weeks."
                         },
                         {
-                            id: "2",
-                            title: "Are your products suitable for sensitive skin?",
-                            content: "Yes! All Luminé products are formulated to be gentle and non-irritating. We use natural ingredients and avoid common irritants. We recommend patch testing first if you have very reactive skin."
+                            id: "2",                            title: "Are your products suitable for sensitive skin?",                            content: "Yes! All Luminé products are formulated to be gentle and non-irritating. We use natural ingredients and avoid common irritants. We recommend patch testing first if you have very reactive skin."
                         },
                         {
-                            id: "3",
-                            title: "Do you offer worldwide shipping?",
-                            content: "Absolutely! We ship to over 150 countries worldwide. Standard shipping typically takes 7-14 business days depending on your location. Express shipping options are also available for faster delivery."
+                            id: "3",                            title: "Do you offer worldwide shipping?",                            content: "Absolutely! We ship to over 150 countries worldwide. Standard shipping typically takes 7-14 business days depending on your location. Express shipping options are also available for faster delivery."
                         },
                         {
-                            id: "4",
-                            title: "What is your return policy?",
-                            content: "We offer a 60-day satisfaction guarantee on all purchases. If you're not completely happy with your skincare, return it for a full refund or exchange. Worldwide returns are processed efficiently through our international shipping partners."
+                            id: "4",                            title: "What is your return policy?",                            content: "We offer a 60-day satisfaction guarantee on all purchases. If you're not completely happy with your skincare, return it for a full refund or exchange. Worldwide returns are processed efficiently through our international shipping partners."
                         }
                     ]}
                     imageSrc="/templates/skincare/image4.webp"
@@ -211,8 +185,7 @@ export default function SkincareTemplatePage() {
                     logoText="Luminé"
                     columns={[
                         {
-                            title: "Product",
-                            items: [
+                            title: "Product",                            items: [
                                 { label: "Moisturizers", href: "#products" },
                                 { label: "Serums", href: "#products" },
                                 { label: "Masks", href: "#products" },
@@ -220,8 +193,7 @@ export default function SkincareTemplatePage() {
                             ]
                         },
                         {
-                            title: "Company",
-                            items: [
+                            title: "Company",                            items: [
                                 { label: "About Us", href: "#about" },
                                 { label: "Sustainability", href: "#about" },
                                 { label: "Blog", href: "#" },
@@ -229,8 +201,7 @@ export default function SkincareTemplatePage() {
                             ]
                         },
                         {
-                            title: "Support",
-                            items: [
+                            title: "Support",                            items: [
                                 { label: "Contact Us", href: "#contact" },
                                 { label: "FAQ", href: "#faq" },
                                 { label: "Worldwide Shipping", href: "#" },
@@ -238,8 +209,7 @@ export default function SkincareTemplatePage() {
                             ]
                         },
                         {
-                            title: "Connect",
-                            items: [
+                            title: "Connect",                            items: [
                                 { label: "Instagram", href: "#" },
                                 { label: "Facebook", href: "#" },
                                 { label: "Pinterest", href: "#" },
@@ -252,4 +222,4 @@ export default function SkincareTemplatePage() {
             </div>
         </ThemeProvider>
     );
-}
+}
\ No newline at end of file
diff --git a/src/app/product/[id]/page.tsx b/src/app/product/[id]/page.tsx
new file mode 100644
index 0000000..eef868d
--- /dev/null
+++ b/src/app/product/[id]/page.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ProductDetailCard from "@/components/ecommerce/productDetail/ProductDetailCard";
+
+export default function ProductDetailPage() {
+    const params = useParams();
+    
+    return (
+        <ThemeProvider
+            defaultButtonVariant="hover-bubble"
+            defaultTextAnimation="reveal-blur"
+            borderRadius="rounded"
+            contentWidth="medium"
+            sizing="largeSmallSizeLargeTitles"
+            background="aurora"
+            cardStyle="gradient-bordered"
+            primaryButtonStyle="double-inset"
+            secondaryButtonStyle="solid"
+            headingFontWeight="extrabold"
+        >
+            <div className="container py-20">
+                <ProductDetailCard
+                    layout="page"
+                    name="Signature Glow Moisturizer"
+                    price="$68"
+                    description="Experience the ultimate hydration with our flagship moisturizer, packed with botanical extracts and essential nutrients to revitalize your complexion."
+                    images={[{ src: "/templates/skincare/image2.webp", alt: "Signature Moisturizer" }]}
+                    variants={[
+                        { label: "Size", options: ["10ml", "50ml", "100ml"], selected: "50ml", onChange: (v) => console.log(v) }
+                    ]}
+                    quantity={{ label: "Quantity", options: ["1", "2", "3"], selected: "1", onChange: (v) => console.log(v) }}
+                    buttons={[
+                        { text: "Add to Cart", onClick: () => alert("Added to cart") },
+                        { text: "Back to Shop", href: "/" }
+                    ]}
+                />
+            </div>
+        </ThemeProvider>
+    );
+}
\ No newline at end of file
diff --git a/src/app/styles/variables.css b/src/app/styles/variables.css
index d45b6e6..710d0bb 100644
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #fcf6ec;
-  --card: #f3ede2;
-  --foreground: #2e2521;
-  --primary-cta: #2e2521;
+  --background: #ffffff;
+  --card: #fbfbfb;
+  --foreground: #1a1a1a;
+  --primary-cta: #c5a059;
   --primary-cta-text: #fcf6ec;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #f1f1f1;
   --secondary-cta-text: #2e2521;
-  --accent: #b2a28b;
-  --background-accent: #b2a28b;
+  --accent: #c5a059;
+  --background-accent: #f9f6f0;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);