diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8340fbe..7b861af 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -70,7 +70,7 @@ export default function HomePage() {
           description="Discover authentic streetwear and casual apparel designed for urban culture. Premium quality, bold designs, and timeless aesthetics."
           tag="New Collection"
           tagIcon={Sparkles}
-          background={{ variant: "plain" }}
+          background={{ variant: "noiseDiagonalGradient" }}
           mediaItems={[
             {
               imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-cool-man-with-electric-scooter_23-2149356776.jpg",              imageAlt: "Urban streetwear model wearing black jacket"},
diff --git a/src/app/product/[id]/page.tsx b/src/app/product/[id]/page.tsx
index ef99212..f7294c7 100644
--- a/src/app/product/[id]/page.tsx
+++ b/src/app/product/[id]/page.tsx
@@ -6,6 +6,7 @@ import FooterCard from "@/components/sections/footer/FooterCard";
 import { Instagram, Twitter, Youtube, ShoppingCart, Heart } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
+import { useParams } from "next/navigation";
 
 const TikTok = (props: React.SVGProps<SVGSVGElement>) => (
   <svg
@@ -20,27 +21,17 @@ const TikTok = (props: React.SVGProps<SVGSVGElement>) => (
   </svg>
 );
 
-const products: { [key: string]: any } = {
-  "1": {
-    id: "1",    name: "Classic Black Hoodie",    price: "$89.99",    image: "http://img.b2bpic.net/free-photo/medium-shot-man-posing-with-hoodie-indoors_23-2149359859.jpg",    description: "Premium oversized black hoodie perfect for street style. Made with 100% organic cotton for maximum comfort.",    sizes: ["XS", "S", "M", "L", "XL", "XXL"],
-    colors: ["Black", "Charcoal", "Navy"],
-  },
-  "2": {
-    id: "2",    name: "Vintage Denim Jacket",    price: "$129.99",    image: "http://img.b2bpic.net/free-photo/fashionable-woman-wearing-denim-jacket_23-2148859621.jpg",    description: "Authentic vintage-inspired denim jacket with distressed details. Perfect layering piece for any streetwear outfit.",    sizes: ["XS", "S", "M", "L", "XL"],
-    colors: ["Indigo", "Light Blue", "Black"],
-  },
-  "3": {
-    id: "3",    name: "Cargo Pants - Khaki",    price: "$79.99",    image: "http://img.b2bpic.net/free-photo/young-woman-wearing-trucker-hat_23-2149432334.jpg",    description: "Multi-pocket cargo pants in breathable khaki. Comfortable and functional for everyday wear.",    sizes: ["28", "30", "32", "34", "36"],
-    colors: ["Khaki", "Olive", "Black"],
-  },
-};
+const products = [
+  {
+    id: "1",    name: "Classic Black Hoodie",    price: "$89.99",    imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-posing-with-hoodie-indoors_23-2149359859.jpg",    description: "Our signature black hoodie crafted from premium organic cotton blend. Features a relaxed fit, front kangaroo pocket, and reinforced stitching for durability.",    details: "Material: 60% organic cotton, 40% polyester | Fit: Oversized | Care: Machine wash cold"},
+  {
+    id: "2",    name: "Vintage Denim Jacket",    price: "$129.99",    imageSrc: "http://img.b2bpic.net/free-photo/fashionable-woman-wearing-denim-jacket_23-2148859621.jpg",    description: "A timeless denim jacket with authentic vintage vibes. Perfect layering piece for any streetwear aesthetic.",    details: "Material: 100% denim | Fit: Relaxed | Care: Machine wash cold"},
+];
 
-export default function ProductPage({ params }: { params: { id: string } }) {
-  const product = products[params.id] || products["1"];
-  const [quantity, setQuantity] = useState(1);
-  const [selectedSize, setSelectedSize] = useState(product.sizes[0]);
-  const [selectedColor, setSelectedColor] = useState(product.colors[0]);
-  const [isFavorited, setIsFavorited] = useState(false);
+export default function ProductPage() {
+  const params = useParams();
+  const productId = params.id as string;
+  const product = products.find((p) => p.id === productId) || products[0];
 
   const navItems = [
     { name: "Shop", id: "products" },
@@ -50,6 +41,10 @@ export default function ProductPage({ params }: { params: { id: string } }) {
     { name: "Contact", id: "contact" },
   ];
 
+  const [selectedSize, setSelectedSize] = useState("M");
+  const [quantity, setQuantity] = useState(1);
+  const [isFavorited, setIsFavorited] = useState(false);
+
   const socialLinks = [
     { icon: Instagram, href: "https://instagram.com/umbra", ariaLabel: "Instagram" },
     { icon: Twitter, href: "https://twitter.com/umbra", ariaLabel: "Twitter" },
@@ -86,33 +81,31 @@ export default function ProductPage({ params }: { params: { id: string } }) {
             </Link>
 
             <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
-              <div className="flex items-center justify-center">
+              <div className="flex items-center justify-center bg-card/30 rounded-soft p-8">
                 <img
-                  src={product.image}
+                  src={product.imageSrc}
                   alt={product.name}
-                  className="w-full h-auto object-cover rounded-soft"
+                  className="max-w-md w-full h-auto object-cover rounded-soft"
                 />
               </div>
 
-              <div className="flex flex-col justify-center">
+              <div className="flex flex-col justify-start">
                 <h1 className="text-4xl font-light text-foreground mb-4">{product.name}</h1>
                 <p className="text-3xl font-bold text-background-accent mb-6">{product.price}</p>
 
-                <p className="text-foreground/70 mb-8">{product.description}</p>
+                <p className="text-foreground/70 mb-8 text-lg">{product.description}</p>
 
                 <div className="mb-8">
-                  <label className="block text-sm font-semibold text-foreground mb-3">
-                    Size
-                  </label>
-                  <div className="flex gap-3 flex-wrap">
-                    {product.sizes.map((size: string) => (
+                  <h3 className="text-sm font-semibold text-foreground mb-3">Size</h3>
+                  <div className="flex gap-3">
+                    {["XS", "S", "M", "L", "XL", "XXL"].map((size) => (
                       <button
                         key={size}
                         onClick={() => setSelectedSize(size)}
                         className={`px-4 py-2 rounded-soft border transition-colors ${
                           selectedSize === size
                             ? "bg-background-accent text-primary-cta-text border-background-accent"
-                            : "border-accent/50 text-foreground hover:border-accent"
+                            : "border-accent/30 text-foreground hover:border-background-accent"
                         }`}
                       >
                         {size}
@@ -122,65 +115,45 @@ export default function ProductPage({ params }: { params: { id: string } }) {
                 </div>
 
                 <div className="mb-8">
-                  <label className="block text-sm font-semibold text-foreground mb-3">
-                    Color
-                  </label>
-                  <div className="flex gap-3 flex-wrap">
-                    {product.colors.map((color: string) => (
-                      <button
-                        key={color}
-                        onClick={() => setSelectedColor(color)}
-                        className={`px-4 py-2 rounded-soft border transition-colors ${
-                          selectedColor === color
-                            ? "bg-background-accent text-primary-cta-text border-background-accent"
-                            : "border-accent/50 text-foreground hover:border-accent"
-                        }`}
-                      >
-                        {color}
-                      </button>
-                    ))}
-                  </div>
-                </div>
-
-                <div className="mb-8">
-                  <label className="block text-sm font-semibold text-foreground mb-3">
-                    Quantity
-                  </label>
-                  <div className="flex items-center gap-4">
+                  <h3 className="text-sm font-semibold text-foreground mb-3">Quantity</h3>
+                  <div className="flex items-center gap-3 w-fit">
                     <button
                       onClick={() => setQuantity(Math.max(1, quantity - 1))}
-                      className="px-4 py-2 border border-accent/50 rounded-soft hover:bg-accent/10"
+                      className="px-3 py-2 border border-accent/30 rounded-soft hover:bg-accent/10 transition-colors"
                     >
                       −
                     </button>
-                    <span className="text-lg font-semibold text-foreground w-12 text-center">
-                      {quantity}
-                    </span>
+                    <span className="w-12 text-center font-semibold text-foreground">{quantity}</span>
                     <button
                       onClick={() => setQuantity(quantity + 1)}
-                      className="px-4 py-2 border border-accent/50 rounded-soft hover:bg-accent/10"
+                      className="px-3 py-2 border border-accent/30 rounded-soft hover:bg-accent/10 transition-colors"
                     >
                       +
                     </button>
                   </div>
                 </div>
 
-                <div className="flex gap-4">
-                  <button className="flex-1 px-6 py-3 bg-background-accent text-primary-cta-text font-semibold rounded-soft hover:bg-primary-cta hover:text-primary-cta-text transition-colors flex items-center justify-center gap-2">
+                <div className="flex gap-4 mb-8">
+                  <button className="flex-1 px-8 py-4 bg-background-accent text-primary-cta-text font-semibold rounded-soft hover:bg-primary-cta hover:text-primary-cta-text transition-colors flex items-center justify-center gap-2">
                     <ShoppingCart size={20} />
                     Add to Cart
                   </button>
                   <button
                     onClick={() => setIsFavorited(!isFavorited)}
-                    className={`px-6 py-3 border rounded-soft transition-colors ${
+                    className={`px-6 py-4 rounded-soft border transition-colors ${
                       isFavorited
-                        ? "bg-background-accent/20 border-background-accent text-background-accent"
-                        : "border-accent/50 text-foreground hover:border-accent"
+                        ? "bg-background-accent/20 border-background-accent"
+                        : "border-accent/30 hover:border-background-accent"
                     }`}
                   >
-                    <Heart size={20} fill={isFavorited ? "currentColor" : "none"} />
+                    <Heart size={20} className={isFavorited ? "fill-background-accent text-background-accent" : "text-foreground"} />
                   </button>
                 </div>
+
+                <div className="pt-8 border-t border-accent/20">
+                  <h3 className="text-sm font-semibold text-foreground mb-3">Product Details</h3>
+                  <p className="text-foreground/70 text-sm">{product.details}</p>
+                </div>
               </div>
             </div>
           </div>