diff --git a/src/app/cart/page.tsx b/src/app/cart/page.tsx
index 7c8e45b..155a8a7 100644
--- a/src/app/cart/page.tsx
+++ b/src/app/cart/page.tsx
@@ -59,6 +59,13 @@ export default function CartPage() {
   const tax = subtotal * 0.08;
   const total = subtotal + shipping + tax;
 
+  const socialLinks = [
+    { icon: Instagram, href: "https://instagram.com/umbra", ariaLabel: "Instagram" },
+    { icon: Twitter, href: "https://twitter.com/umbra", ariaLabel: "Twitter" },
+    { icon: TikTok, href: "https://tiktok.com/@umbra", ariaLabel: "TikTok" },
+    { icon: Youtube, href: "https://youtube.com/@umbra", ariaLabel: "YouTube" },
+  ];
+
   return (
     <ThemeProvider
       defaultButtonVariant="shift-hover"
@@ -223,12 +230,7 @@ export default function CartPage() {
         <FooterCard
           logoText="Umbra"
           copyrightText="© 2025 | Umbra Streetwear. All rights reserved."
-          socialLinks={[
-            { icon: Instagram, href: "https://instagram.com/umbra", ariaLabel: "Instagram" },
-            { icon: Twitter, href: "https://twitter.com/umbra", ariaLabel: "Twitter" },
-            { icon: TikTok as React.ComponentType<React.SVGProps<SVGSVGElement>>, href: "https://tiktok.com/@umbra", ariaLabel: "TikTok" },
-            { icon: Youtube, href: "https://youtube.com/@umbra", ariaLabel: "YouTube" },
-          ]}
+          socialLinks={socialLinks}
         />
       </div>
     </ThemeProvider>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 46d2889..8340fbe 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -37,7 +37,7 @@ export default function HomePage() {
   const socialLinks = [
     { icon: Instagram, href: "https://instagram.com/umbra", ariaLabel: "Instagram" },
     { icon: Twitter, href: "https://twitter.com/umbra", ariaLabel: "Twitter" },
-    { icon: TikTok as React.ComponentType<React.SVGProps<SVGSVGElement>>, href: "https://tiktok.com/@umbra", ariaLabel: "TikTok" },
+    { icon: TikTok, href: "https://tiktok.com/@umbra", ariaLabel: "TikTok" },
     { icon: Youtube, href: "https://youtube.com/@umbra", ariaLabel: "YouTube" },
   ];
 
diff --git a/src/app/product/[id]/page.tsx b/src/app/product/[id]/page.tsx
index ebdcd37..ef99212 100644
--- a/src/app/product/[id]/page.tsx
+++ b/src/app/product/[id]/page.tsx
@@ -4,6 +4,7 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
 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";
 
 const TikTok = (props: React.SVGProps<SVGSVGElement>) => (
@@ -19,7 +20,28 @@ const TikTok = (props: React.SVGProps<SVGSVGElement>) => (
   </svg>
 );
 
-export default function ProductPage() {
+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"],
+  },
+};
+
+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);
+
   const navItems = [
     { name: "Shop", id: "products" },
     { name: "Collections", id: "collections" },
@@ -28,9 +50,12 @@ export default function ProductPage() {
     { name: "Contact", id: "contact" },
   ];
 
-  const [isFavorited, setIsFavorited] = useState(false);
-  const [selectedSize, setSelectedSize] = useState("M");
-  const [selectedColor, setSelectedColor] = useState("Black");
+  const socialLinks = [
+    { icon: Instagram, href: "https://instagram.com/umbra", ariaLabel: "Instagram" },
+    { icon: Twitter, href: "https://twitter.com/umbra", ariaLabel: "Twitter" },
+    { icon: TikTok, href: "https://tiktok.com/@umbra", ariaLabel: "TikTok" },
+    { icon: Youtube, href: "https://youtube.com/@umbra", ariaLabel: "YouTube" },
+  ];
 
   return (
     <ThemeProvider
@@ -56,57 +81,38 @@ export default function ProductPage() {
       <div id="product" data-section="product" className="mx-auto px-4 md:px-6">
         <div className="py-20">
           <div className="max-w-6xl mx-auto">
+            <Link href="/shop" className="text-accent hover:text-background-accent mb-8 inline-block">
+              ← Back to Shop
+            </Link>
+
             <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
-              {/* Product Image */}
-              <div className="relative">
-                <div className="bg-card/50 border border-accent/20 rounded-soft overflow-hidden aspect-square">
-                  <img
-                    src="http://img.b2bpic.net/free-photo/medium-shot-man-posing-with-hoodie-indoors_23-2149359859.jpg"
-                    alt="Classic Black Hoodie"
-                    className="w-full h-full object-cover"
-                  />
-                </div>
-                <button
-                  onClick={() => setIsFavorited(!isFavorited)}
-                  className="absolute top-4 right-4 p-3 bg-card/80 backdrop-blur rounded-soft hover:bg-background-accent transition-colors"
-                >
-                  <Heart
-                    size={24}
-                    className={isFavorited ? "fill-background-accent text-background-accent" : "text-foreground"}
-                  />
-                </button>
+              <div className="flex items-center justify-center">
+                <img
+                  src={product.image}
+                  alt={product.name}
+                  className="w-full h-auto object-cover rounded-soft"
+                />
               </div>
 
-              {/* Product Details */}
-              <div className="flex flex-col justify-start">
-                <div className="mb-8">
-                  <p className="text-accent text-sm font-semibold mb-2">UMBRA COLLECTION</p>
-                  <h1 className="text-4xl font-light text-foreground mb-4">Classic Black Hoodie</h1>
-                  <div className="flex items-center gap-4">
-                    <span className="text-3xl font-bold text-background-accent">$89.99</span>
-                    <span className="text-foreground/50 line-through">$129.99</span>
-                    <span className="text-background-accent text-sm font-semibold">30% OFF</span>
-                  </div>
-                </div>
+              <div className="flex flex-col justify-center">
+                <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>
 
-                <div className="mb-8 pb-8 border-b border-accent/20">
-                  <p className="text-foreground/70 leading-relaxed">
-                    Experience ultimate comfort and style with our Classic Black Hoodie. Crafted from premium materials, this versatile piece is perfect for urban exploration. Features a relaxed fit, warm lining, and timeless design that works with any streetwear ensemble.
-                  </p>
-                </div>
+                <p className="text-foreground/70 mb-8">{product.description}</p>
 
-                {/* Size Selection */}
                 <div className="mb-8">
-                  <label className="block text-foreground font-semibold mb-4">Size</label>
-                  <div className="grid grid-cols-4 gap-3">
-                    {["XS", "S", "M", "L", "XL", "XXL"].map((size) => (
+                  <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) => (
                       <button
                         key={size}
                         onClick={() => setSelectedSize(size)}
-                        className={`py-3 px-2 rounded-soft border-2 font-semibold text-sm transition-all ${
+                        className={`px-4 py-2 rounded-soft border transition-colors ${
                           selectedSize === size
-                            ? "border-background-accent bg-background-accent text-primary-cta-text"
-                            : "border-accent/30 text-foreground hover:border-accent/50"
+                            ? "bg-background-accent text-primary-cta-text border-background-accent"
+                            : "border-accent/50 text-foreground hover:border-accent"
                         }`}
                       >
                         {size}
@@ -115,18 +121,19 @@ export default function ProductPage() {
                   </div>
                 </div>
 
-                {/* Color Selection */}
                 <div className="mb-8">
-                  <label className="block text-foreground font-semibold mb-4">Color</label>
-                  <div className="flex gap-4">
-                    {["Black", "Grey", "Navy"].map((color) => (
+                  <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-6 py-3 rounded-soft border-2 font-semibold transition-all ${
+                        className={`px-4 py-2 rounded-soft border transition-colors ${
                           selectedColor === color
-                            ? "border-background-accent bg-background-accent text-primary-cta-text"
-                            : "border-accent/30 text-foreground hover:border-accent/50"
+                            ? "bg-background-accent text-primary-cta-text border-background-accent"
+                            : "border-accent/50 text-foreground hover:border-accent"
                         }`}
                       >
                         {color}
@@ -135,32 +142,45 @@ export default function ProductPage() {
                   </div>
                 </div>
 
-                {/* Add to Cart */}
+                <div className="mb-8">
+                  <label className="block text-sm font-semibold text-foreground mb-3">
+                    Quantity
+                  </label>
+                  <div className="flex items-center gap-4">
+                    <button
+                      onClick={() => setQuantity(Math.max(1, quantity - 1))}
+                      className="px-4 py-2 border border-accent/50 rounded-soft hover:bg-accent/10"
+                    >
+                      −
+                    </button>
+                    <span className="text-lg font-semibold text-foreground w-12 text-center">
+                      {quantity}
+                    </span>
+                    <button
+                      onClick={() => setQuantity(quantity + 1)}
+                      className="px-4 py-2 border border-accent/50 rounded-soft hover:bg-accent/10"
+                    >
+                      +
+                    </button>
+                  </div>
+                </div>
+
                 <div className="flex gap-4">
-                  <button className="flex-1 px-8 py-4 bg-background-accent text-primary-cta-text font-semibold rounded-soft hover:bg-primary-cta transition-colors flex items-center justify-center gap-2">
+                  <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">
                     <ShoppingCart size={20} />
                     Add to Cart
                   </button>
-                  <button className="px-8 py-4 border border-accent/50 text-foreground font-semibold rounded-soft hover:bg-accent/10 transition-colors">
-                    Buy Now
+                  <button
+                    onClick={() => setIsFavorited(!isFavorited)}
+                    className={`px-6 py-3 border rounded-soft transition-colors ${
+                      isFavorited
+                        ? "bg-background-accent/20 border-background-accent text-background-accent"
+                        : "border-accent/50 text-foreground hover:border-accent"
+                    }`}
+                  >
+                    <Heart size={20} fill={isFavorited ? "currentColor" : "none"} />
                   </button>
                 </div>
-
-                {/* Product Info */}
-                <div className="mt-12 pt-8 border-t border-accent/20 space-y-4">
-                  <div className="flex justify-between">
-                    <span className="text-foreground/70">SKU:</span>
-                    <span className="text-foreground font-semibold">UMBRA-BH-001</span>
-                  </div>
-                  <div className="flex justify-between">
-                    <span className="text-foreground/70">Material:</span>
-                    <span className="text-foreground font-semibold">100% Premium Cotton</span>
-                  </div>
-                  <div className="flex justify-between">
-                    <span className="text-foreground/70">Care:</span>
-                    <span className="text-foreground font-semibold">Machine wash cold</span>
-                  </div>
-                </div>
               </div>
             </div>
           </div>
@@ -171,12 +191,7 @@ export default function ProductPage() {
         <FooterCard
           logoText="Umbra"
           copyrightText="© 2025 | Umbra Streetwear. All rights reserved."
-          socialLinks={[
-            { icon: Instagram, href: "https://instagram.com/umbra", ariaLabel: "Instagram" },
-            { icon: Twitter, href: "https://twitter.com/umbra", ariaLabel: "Twitter" },
-            { icon: TikTok as React.ComponentType<React.SVGProps<SVGSVGElement>>, href: "https://tiktok.com/@umbra", ariaLabel: "TikTok" },
-            { icon: Youtube, href: "https://youtube.com/@umbra", ariaLabel: "YouTube" },
-          ]}
+          socialLinks={socialLinks}
         />
       </div>
     </ThemeProvider>
diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index ece15e3..13f86dc 100644
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -34,7 +34,7 @@ export default function ShopPage() {
   const socialLinks = [
     { icon: Instagram, href: "https://instagram.com/umbra", ariaLabel: "Instagram" },
     { icon: Twitter, href: "https://twitter.com/umbra", ariaLabel: "Twitter" },
-    { icon: TikTok as React.ComponentType<React.SVGProps<SVGSVGElement>>, href: "https://tiktok.com/@umbra", ariaLabel: "TikTok" },
+    { icon: TikTok, href: "https://tiktok.com/@umbra", ariaLabel: "TikTok" },
     { icon: Youtube, href: "https://youtube.com/@umbra", ariaLabel: "YouTube" },
   ];