diff --git a/PRODUCT_PAGE_IMPLEMENTATION.md b/PRODUCT_PAGE_IMPLEMENTATION.md
new file mode 100644
index 0000000..9292376
--- /dev/null
+++ b/PRODUCT_PAGE_IMPLEMENTATION.md
@@ -0,0 +1,331 @@
+# Product Page Implementation Plan
+
+## 🎯 What We Have (Current State)
+
+### Backend (API):
+✅ Product data with variations
+✅ Product attributes
+✅ Images array (featured + gallery)
+✅ Variation images
+✅ Price, stock status, SKU
+✅ Description, short description
+✅ Categories, tags
+✅ Related products
+
+### Frontend (Existing):
+✅ Basic product page structure
+✅ Image gallery with thumbnails (implemented but needs enhancement)
+✅ Add to cart functionality
+✅ Cart store (Zustand)
+✅ Toast notifications
+✅ Responsive layout
+
+### Missing:
+❌ Horizontal scrollable thumbnail slider
+❌ Variation selector dropdowns
+❌ Variation image auto-switching
+❌ Reviews section
+❌ Specifications table
+❌ Shipping/Returns info
+❌ Wishlist/Save feature
+❌ Related products display
+❌ Social proof elements
+❌ Trust badges
+
+---
+
+## 📋 Implementation Priority (What Makes Sense Now)
+
+### **Phase 1: Core Product Page (Implement Now)** ⭐
+
+#### 1.1 Image Gallery Enhancement
+- ✅ Horizontal scrollable thumbnail slider
+- ✅ Arrow navigation for >4 images
+- ✅ Active thumbnail highlight
+- ✅ Click thumbnail to change main image
+- ✅ Responsive (swipeable on mobile)
+
+**Why:** Critical for user experience, especially for products with multiple images
+
+#### 1.2 Variation Selector
+- ✅ Dropdown for each attribute
+- ✅ Auto-switch image when variation selected
+- ✅ Update price based on variation
+- ✅ Update stock status
+- ✅ Disable Add to Cart if no variation selected
+
+**Why:** Essential for variable products, directly impacts conversion
+
+#### 1.3 Enhanced Buy Section
+- ✅ Price display (regular + sale)
+- ✅ Stock status with color coding
+- ✅ Quantity selector (plus/minus buttons)
+- ✅ Add to Cart button (with loading state)
+- ✅ Product meta (SKU, categories)
+
+**Why:** Core e-commerce functionality
+
+#### 1.4 Product Information Sections
+- ✅ Tabs for Description, Additional Info, Reviews
+- ✅ Vertical layout (avoid horizontal tabs)
+- ✅ Specifications table (from attributes)
+- ✅ Expandable sections on mobile
+
+**Why:** Users need detailed product info, research shows vertical > horizontal
+
+---
+
+### **Phase 2: Trust & Conversion (Next Sprint)** 🎯
+
+#### 2.1 Reviews Section
+- ⏳ Display existing WooCommerce reviews
+- ⏳ Star rating display
+- ⏳ Review count
+- ⏳ Link to write review (WooCommerce native)
+
+**Why:** Reviews are #2 most important content after images
+
+#### 2.2 Trust Elements
+- ⏳ Payment method icons
+- ⏳ Secure checkout badge
+- ⏳ Free shipping threshold
+- ⏳ Return policy link
+
+**Why:** Builds trust, reduces cart abandonment
+
+#### 2.3 Related Products
+- ⏳ Display related products (from API)
+- ⏳ Horizontal carousel
+- ⏳ Product cards
+
+**Why:** Increases average order value
+
+---
+
+### **Phase 3: Advanced Features (Future)** 🚀
+
+#### 3.1 Wishlist/Save for Later
+- 📅 Add to wishlist button
+- 📅 Wishlist page
+- 📅 Persist across sessions
+
+#### 3.2 Social Proof
+- 📅 "X people viewing"
+- 📅 "X sold today"
+- 📅 Customer photos
+
+#### 3.3 Enhanced Media
+- 📅 Image zoom/lightbox
+- 📅 Video support
+- 📅 360° view
+
+---
+
+## 🛠️ Phase 1 Implementation Details
+
+### Component Structure:
+```
+Product/
+├── index.tsx (main component)
+├── components/
+│   ├── ImageGallery.tsx
+│   ├── ThumbnailSlider.tsx
+│   ├── VariationSelector.tsx
+│   ├── BuySection.tsx
+│   ├── ProductTabs.tsx
+│   ├── SpecificationTable.tsx
+│   └── ProductMeta.tsx
+```
+
+### State Management:
+```typescript
+// Product page state
+const [product, setProduct] = useState<Product | null>(null);
+const [selectedImage, setSelectedImage] = useState<string>('');
+const [selectedVariation, setSelectedVariation] = useState<any>(null);
+const [selectedAttributes, setSelectedAttributes] = useState<Record<string, string>>({});
+const [quantity, setQuantity] = useState(1);
+const [activeTab, setActiveTab] = useState('description');
+```
+
+### Key Features:
+
+#### 1. Thumbnail Slider
+```tsx
+<div className="relative">
+  {/* Prev Arrow */}
+  <button onClick={scrollPrev} className="absolute left-0">
+    <ChevronLeft />
+  </button>
+  
+  {/* Scrollable Container */}
+  <div ref={sliderRef} className="flex overflow-x-auto scroll-smooth gap-2">
+    {images.map((img, i) => (
+      <button
+        key={i}
+        onClick={() => setSelectedImage(img)}
+        className={selectedImage === img ? 'ring-2 ring-primary' : ''}
+      >
+        <img src={img} />
+      </button>
+    ))}
+  </div>
+  
+  {/* Next Arrow */}
+  <button onClick={scrollNext} className="absolute right-0">
+    <ChevronRight />
+  </button>
+</div>
+```
+
+#### 2. Variation Selector
+```tsx
+{product.attributes?.map(attr => (
+  <div key={attr.name}>
+    <label>{attr.name}</label>
+    <select
+      value={selectedAttributes[attr.name] || ''}
+      onChange={(e) => handleAttributeChange(attr.name, e.target.value)}
+    >
+      <option value="">Choose {attr.name}</option>
+      {attr.options.map(option => (
+        <option key={option} value={option}>{option}</option>
+      ))}
+    </select>
+  </div>
+))}
+```
+
+#### 3. Auto-Switch Variation Image
+```typescript
+useEffect(() => {
+  if (selectedVariation && selectedVariation.image) {
+    setSelectedImage(selectedVariation.image);
+  }
+}, [selectedVariation]);
+
+// Find matching variation
+useEffect(() => {
+  if (product?.variations && Object.keys(selectedAttributes).length > 0) {
+    const variation = product.variations.find(v => {
+      return Object.entries(selectedAttributes).every(([key, value]) => {
+        return v.attributes[key] === value;
+      });
+    });
+    setSelectedVariation(variation || null);
+  }
+}, [selectedAttributes, product]);
+```
+
+---
+
+## 📐 Layout Design
+
+```
+┌─────────────────────────────────────────────────────────┐
+│  Breadcrumb: Home > Shop > Category > Product Name     │
+├──────────────────────┬──────────────────────────────────┤
+│                      │  Product Name (H1)               │
+│   Main Image         │  ⭐⭐⭐⭐⭐ (24 reviews)           │
+│   (Large)            │                                  │
+│                      │  $99.00 $79.00 (Save 20%)        │
+│                      │  ✅ In Stock                      │
+│                      │                                  │
+│   [Thumbnail Slider] │  Short description text...       │
+│   ◀ [img][img][img] ▶│                                  │
+│                      │  Color: [Dropdown ▼]             │
+│                      │  Size:  [Dropdown ▼]             │
+│                      │                                  │
+│                      │  Quantity: [-] 1 [+]             │
+│                      │                                  │
+│                      │  [🛒 Add to Cart]                │
+│                      │  [♡ Add to Wishlist]             │
+│                      │                                  │
+│                      │  🔒 Secure Checkout              │
+│                      │  🚚 Free Shipping over $50       │
+│                      │  ↩️  30-Day Returns               │
+├──────────────────────┴──────────────────────────────────┤
+│                                                         │
+│  [Description] [Additional Info] [Reviews (24)]        │
+│  ─────────────                                         │
+│                                                         │
+│  Full product description here...                      │
+│  • Feature 1                                           │
+│  • Feature 2                                           │
+│                                                         │
+├─────────────────────────────────────────────────────────┤
+│  Related Products                                       │
+│  [Product] [Product] [Product] [Product]               │
+└─────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 🎨 Styling Guidelines
+
+### Colors:
+```css
+--price-sale: #DC2626 (red)
+--stock-in: #10B981 (green)
+--stock-low: #F59E0B (orange)
+--stock-out: #EF4444 (red)
+--primary-cta: var(--primary)
+--border-active: var(--primary)
+```
+
+### Spacing:
+```css
+--section-gap: 2rem
+--element-gap: 1rem
+--thumbnail-size: 80px
+--thumbnail-gap: 0.5rem
+```
+
+---
+
+## ✅ Acceptance Criteria
+
+### Image Gallery:
+- [ ] Thumbnails scroll horizontally
+- [ ] Show 4 thumbnails at a time on desktop
+- [ ] Arrow buttons appear when >4 images
+- [ ] Active thumbnail has colored border
+- [ ] Click thumbnail changes main image
+- [ ] Swipeable on mobile
+- [ ] Smooth scroll animation
+
+### Variation Selector:
+- [ ] Dropdown for each attribute
+- [ ] "Choose an option" placeholder
+- [ ] When variation selected, image auto-switches
+- [ ] Price updates based on variation
+- [ ] Stock status updates
+- [ ] Add to Cart disabled until all attributes selected
+- [ ] Clear error message if incomplete
+
+### Buy Section:
+- [ ] Sale price shown in red
+- [ ] Regular price strikethrough
+- [ ] Savings percentage/amount shown
+- [ ] Stock status color-coded
+- [ ] Quantity buttons work correctly
+- [ ] Add to Cart shows loading state
+- [ ] Success toast with cart preview
+- [ ] Cart count updates in header
+
+### Product Info:
+- [ ] Tabs work correctly
+- [ ] Description renders HTML
+- [ ] Specifications show as table
+- [ ] Mobile: sections collapsible
+- [ ] Smooth scroll to reviews
+
+---
+
+## 🚀 Ready to Implement
+
+**Estimated Time:** 4-6 hours
+**Priority:** HIGH
+**Dependencies:** None (all APIs ready)
+
+Let's build Phase 1 now! 🎯
diff --git a/PRODUCT_PAGE_SOP.md b/PRODUCT_PAGE_SOP.md
new file mode 100644
index 0000000..6c35f40
--- /dev/null
+++ b/PRODUCT_PAGE_SOP.md
@@ -0,0 +1,436 @@
+# Product Page Design SOP - Industry Best Practices
+
+**Document Version:** 1.0  
+**Last Updated:** November 26, 2025  
+**Purpose:** Guide for building industry-standard product pages in Customer SPA
+
+---
+
+## 📋 Executive Summary
+
+This SOP consolidates research-backed best practices for e-commerce product pages based on Baymard Institute's 2025 UX research and industry standards. Since Customer SPA is not fully customizable by end-users, we must implement the best practices as defaults.
+
+---
+
+## 🎯 Core Principles
+
+1. **Avoid Horizontal Tabs** - 27% of users overlook horizontal tabs entirely
+2. **Vertical Collapsed Sections** - Only 8% overlook content (vs 27% for tabs)
+3. **Images Are Critical** - After images, reviews are the most important content
+4. **Trust & Social Proof** - Essential for conversion
+5. **Mobile-First** - But optimize desktop experience separately
+
+---
+
+## 📐 Layout Structure (Priority Order)
+
+### 1. **Hero Section** (Above the Fold)
+```
+┌─────────────────────────────────────────┐
+│  Breadcrumb                             │
+├──────────────┬──────────────────────────┤
+│              │  Product Title           │
+│   Product    │  Price (with sale)       │
+│   Images     │  Rating & Reviews Count  │
+│   Gallery    │  Stock Status            │
+│              │  Short Description       │
+│              │  Variations Selector     │
+│              │  Quantity                │
+│              │  Add to Cart Button      │
+│              │  Wishlist/Save           │
+│              │  Trust Badges            │
+└──────────────┴──────────────────────────┘
+```
+
+### 2. **Product Information** (Below the Fold - Vertical Sections)
+- ✅ Full Description (expandable)
+- ✅ Specifications/Attributes (scannable table)
+- ✅ Shipping & Returns Info
+- ✅ Size Guide (if applicable)
+- ✅ Reviews Section
+- ✅ Related Products
+- ✅ Recently Viewed
+
+---
+
+## 🖼️ Image Gallery Requirements
+
+### Must-Have Features:
+1. **Main Image Display**
+   - Large, zoomable image
+   - High resolution (min 1200px width)
+   - Aspect ratio: 1:1 or 4:3
+
+2. **Thumbnail Slider**
+   - Horizontal scrollable
+   - 4-6 visible thumbnails
+   - Active thumbnail highlighted
+   - Arrow navigation for >4 images
+   - Touch/swipe enabled on mobile
+
+3. **Image Types Required:**
+   - ✅ Product on white background (default)
+   - ✅ "In Scale" images (with reference object/person)
+   - ✅ "Human Model" images (for wearables)
+   - ✅ Lifestyle/context images
+   - ✅ Detail shots (close-ups)
+   - ✅ 360° view (optional but recommended)
+
+4. **Variation Images:**
+   - Each variation should have its own image
+   - Auto-switch main image when variation selected
+   - Variation image highlighted in thumbnail slider
+
+### Image Gallery Interaction:
+```javascript
+// User Flow:
+1. Click thumbnail → Change main image
+2. Select variation → Auto-switch to variation image
+3. Click main image → Open lightbox/zoom
+4. Swipe thumbnails → Scroll horizontally
+5. Hover thumbnail → Preview in main (desktop)
+```
+
+---
+
+## 🛒 Buy Section Elements
+
+### Required Elements (in order):
+1. **Product Title** - H1, clear, descriptive
+2. **Price Display:**
+   - Regular price (strikethrough if on sale)
+   - Sale price (highlighted in red/primary)
+   - Savings amount/percentage
+   - Unit price (for bulk items)
+
+3. **Rating & Reviews:**
+   - Star rating (visual)
+   - Number of reviews (clickable → scroll to reviews)
+   - "Write a Review" link
+
+4. **Stock Status:**
+   - ✅ In Stock (green)
+   - ⚠️ Low Stock (orange, show quantity)
+   - ❌ Out of Stock (red, "Notify Me" option)
+
+5. **Variation Selector:**
+   - Dropdown for each attribute
+   - Visual swatches for colors
+   - Size chart link (for apparel)
+   - Clear labels
+   - Disabled options grayed out
+
+6. **Quantity Selector:**
+   - Plus/minus buttons
+   - Number input
+   - Min/max validation
+   - Bulk pricing info (if applicable)
+
+7. **Action Buttons:**
+   - **Primary:** Add to Cart (large, prominent)
+   - **Secondary:** Buy Now (optional)
+   - **Tertiary:** Add to Wishlist/Save for Later
+
+8. **Trust Elements:**
+   - Security badges (SSL, payment methods)
+   - Free shipping threshold
+   - Return policy summary
+   - Warranty info
+
+---
+
+## 📝 Product Information Sections
+
+### 1. Description Section
+```
+Format: Vertical collapsed/expandable
+- Short description (2-3 sentences) always visible
+- Full description expandable
+- Rich text formatting
+- Bullet points for features
+- Video embed support
+```
+
+### 2. Specifications/Attributes
+```
+Format: Scannable table
+- Two-column layout (Label | Value)
+- Grouped by category
+- Tooltips for technical terms
+- Expandable for long lists
+- Copy-to-clipboard for specs
+```
+
+### 3. Shipping & Returns
+```
+Always visible near buy section:
+- Estimated delivery date
+- Shipping cost calculator
+- Return policy link
+- Free shipping threshold
+- International shipping info
+```
+
+### 4. Size Guide (Apparel/Footwear)
+```
+- Modal/drawer popup
+- Size chart table
+- Measurement instructions
+- Fit guide (slim, regular, loose)
+- Model measurements
+```
+
+---
+
+## ⭐ Reviews Section
+
+### Must-Have Features:
+1. **Review Summary:**
+   - Overall rating (large)
+   - Rating distribution (5-star breakdown)
+   - Total review count
+   - Verified purchase badge
+
+2. **Review Filters:**
+   - Sort by: Most Recent, Highest Rating, Lowest Rating, Most Helpful
+   - Filter by: Rating (1-5 stars), Verified Purchase, With Photos
+
+3. **Individual Review Display:**
+   - Reviewer name (or anonymous)
+   - Rating (stars)
+   - Date
+   - Verified purchase badge
+   - Review text
+   - Helpful votes (thumbs up/down)
+   - Seller response (if any)
+   - Review images (clickable gallery)
+
+4. **Review Submission:**
+   - Star rating (required)
+   - Title (optional)
+   - Review text (required, min 50 chars)
+   - Photo upload (optional)
+   - Recommend product (yes/no)
+   - Fit guide (for apparel)
+
+5. **Review Images Gallery:**
+   - Navigate all customer photos
+   - Filter reviews by "with photos"
+   - Lightbox view
+
+---
+
+## 🎁 Promotions & Offers
+
+### Display Locations:
+1. **Product Badge** (on image)
+   - "Sale" / "New" / "Limited"
+   - Percentage off
+   - Free shipping
+
+2. **Price Section:**
+   - Coupon code field
+   - Auto-apply available coupons
+   - Bulk discount tiers
+   - Member pricing
+
+3. **Sticky Banner** (optional):
+   - Site-wide promotions
+   - Flash sales countdown
+   - Free shipping threshold
+
+### Coupon Integration:
+```
+- Auto-detect applicable coupons
+- One-click apply
+- Show savings in cart preview
+- Stackable coupons indicator
+```
+
+---
+
+## 🔒 Trust & Social Proof Elements
+
+### 1. Trust Badges (Near Add to Cart):
+- Payment security (SSL, PCI)
+- Payment methods accepted
+- Money-back guarantee
+- Secure checkout badge
+
+### 2. Social Proof:
+- "X people viewing this now"
+- "X sold in last 24 hours"
+- "X people added to cart today"
+- Customer photos/UGC
+- Influencer endorsements
+
+### 3. Credibility Indicators:
+- Brand certifications
+- Awards & recognition
+- Press mentions
+- Expert reviews
+
+---
+
+## 📱 Mobile Optimization
+
+### Mobile-Specific Considerations:
+1. **Image Gallery:**
+   - Swipeable main image
+   - Thumbnail strip below (horizontal scroll)
+   - Pinch to zoom
+
+2. **Sticky Add to Cart:**
+   - Fixed bottom bar
+   - Price + Add to Cart always visible
+   - Collapse on scroll down, expand on scroll up
+
+3. **Collapsed Sections:**
+   - All info sections collapsed by default
+   - Tap to expand
+   - Smooth animations
+
+4. **Touch Targets:**
+   - Min 44x44px for buttons
+   - Adequate spacing between elements
+   - Large, thumb-friendly controls
+
+---
+
+## 🎨 Visual Design Guidelines
+
+### Typography:
+- **Product Title:** 28-32px, bold
+- **Price:** 24-28px, bold
+- **Body Text:** 14-16px
+- **Labels:** 12-14px, medium weight
+
+### Colors:
+- **Primary CTA:** High contrast, brand color
+- **Sale Price:** Red (#DC2626) or brand accent
+- **Success:** Green (#10B981)
+- **Warning:** Orange (#F59E0B)
+- **Error:** Red (#EF4444)
+
+### Spacing:
+- Section padding: 24-32px
+- Element spacing: 12-16px
+- Button padding: 12px 24px
+
+---
+
+## 🔄 Interaction Patterns
+
+### 1. Variation Selection:
+```javascript
+// When user selects variation:
+1. Update price
+2. Update stock status
+3. Switch main image
+4. Update SKU
+5. Highlight variation image in gallery
+6. Enable/disable Add to Cart
+```
+
+### 2. Add to Cart:
+```javascript
+// On Add to Cart click:
+1. Validate selection (all variations selected)
+2. Show loading state
+3. Add to cart (API call)
+4. Show success toast with cart preview
+5. Update cart count in header
+6. Offer "View Cart" or "Continue Shopping"
+```
+
+### 3. Image Gallery:
+```javascript
+// Image interactions:
+1. Click thumbnail → Change main image
+2. Click main image → Open lightbox
+3. Swipe main image → Next/prev image
+4. Hover thumbnail → Preview (desktop)
+```
+
+---
+
+## 📊 Performance Metrics
+
+### Key Metrics to Track:
+- Time to First Contentful Paint (< 1.5s)
+- Largest Contentful Paint (< 2.5s)
+- Image load time (< 1s)
+- Add to Cart conversion rate
+- Bounce rate
+- Time on page
+- Scroll depth
+
+---
+
+## ✅ Implementation Checklist
+
+### Phase 1: Core Features (MVP)
+- [ ] Responsive image gallery with thumbnails
+- [ ] Horizontal scrollable thumbnail slider
+- [ ] Variation selector with image switching
+- [ ] Price display with sale pricing
+- [ ] Stock status indicator
+- [ ] Quantity selector
+- [ ] Add to Cart button
+- [ ] Product description (expandable)
+- [ ] Specifications table
+- [ ] Breadcrumb navigation
+
+### Phase 2: Enhanced Features
+- [ ] Reviews section with filtering
+- [ ] Review submission form
+- [ ] Related products carousel
+- [ ] Wishlist/Save for later
+- [ ] Share buttons
+- [ ] Shipping calculator
+- [ ] Size guide modal
+- [ ] Image zoom/lightbox
+
+### Phase 3: Advanced Features
+- [ ] 360° product view
+- [ ] Video integration
+- [ ] Live chat integration
+- [ ] Recently viewed products
+- [ ] Personalized recommendations
+- [ ] Social proof notifications
+- [ ] Coupon auto-apply
+- [ ] Bulk pricing display
+
+---
+
+## 🚫 What to Avoid
+
+1. ❌ Horizontal tabs for content
+2. ❌ Hiding critical info below the fold
+3. ❌ Auto-playing videos
+4. ❌ Intrusive popups
+5. ❌ Tiny product images
+6. ❌ Unclear variation selectors
+7. ❌ Hidden shipping costs
+8. ❌ Complicated checkout process
+9. ❌ Fake urgency/scarcity
+10. ❌ Too many CTAs (decision paralysis)
+
+---
+
+## 📚 References
+
+- Baymard Institute - Product Page UX 2025
+- Nielsen Norman Group - E-commerce UX
+- Shopify - Product Page Best Practices
+- ConvertCart - Social Proof Guidelines
+- Google - Mobile Page Speed Guidelines
+
+---
+
+## 🔄 Version History
+
+| Version | Date | Changes |
+|---------|------|---------|
+| 1.0 | 2025-11-26 | Initial SOP creation based on industry research |
+
diff --git a/admin-spa/src/routes/Products/partials/tabs/GeneralTab.tsx b/admin-spa/src/routes/Products/partials/tabs/GeneralTab.tsx
index edb2363..60f215c 100644
--- a/admin-spa/src/routes/Products/partials/tabs/GeneralTab.tsx
+++ b/admin-spa/src/routes/Products/partials/tabs/GeneralTab.tsx
@@ -209,13 +209,22 @@ export function GeneralTab({
                     onDragStart={(e) => {
                       e.dataTransfer.effectAllowed = 'move';
                       e.dataTransfer.setData('text/plain', index.toString());
+                      e.currentTarget.classList.add('opacity-50');
+                    }}
+                    onDragEnd={(e) => {
+                      e.currentTarget.classList.remove('opacity-50');
                     }}
                     onDragOver={(e) => {
                       e.preventDefault();
                       e.dataTransfer.dropEffect = 'move';
+                      e.currentTarget.classList.add('ring-2', 'ring-primary', 'ring-offset-2');
+                    }}
+                    onDragLeave={(e) => {
+                      e.currentTarget.classList.remove('ring-2', 'ring-primary', 'ring-offset-2');
                     }}
                     onDrop={(e) => {
                       e.preventDefault();
+                      e.currentTarget.classList.remove('ring-2', 'ring-primary', 'ring-offset-2');
                       const fromIndex = parseInt(e.dataTransfer.getData('text/plain'));
                       const toIndex = index;
                       
@@ -226,7 +235,7 @@ export function GeneralTab({
                         setImages(newImages);
                       }
                     }}
-                    className="relative group aspect-square border rounded-lg overflow-hidden bg-gray-50 cursor-move hover:border-primary transition-colors"
+                    className="relative group aspect-square border-2 border-dashed border-gray-300 rounded-lg overflow-hidden bg-gray-50 cursor-move hover:border-primary transition-all"
                   >
                     <img
                       src={image}
diff --git a/customer-spa/src/index.css b/customer-spa/src/index.css
index 8eb6101..3f19982 100644
--- a/customer-spa/src/index.css
+++ b/customer-spa/src/index.css
@@ -2,6 +2,19 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer utilities {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .scrollbar-hide {
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+  }
+}
+
 /* WooNooW Customer SPA - Global Theme */
 @layer base {
   :root {
diff --git a/customer-spa/src/pages/Product/index.tsx b/customer-spa/src/pages/Product/index.tsx
index a126e35..f971017 100644
--- a/customer-spa/src/pages/Product/index.tsx
+++ b/customer-spa/src/pages/Product/index.tsx
@@ -1,13 +1,475 @@
-import React from 'react';
-import { useParams } from 'react-router-dom';
+import React, { useState, useEffect, useRef } from 'react';
+import { useParams, Link, useNavigate } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
+import { apiClient } from '@/lib/api/client';
+import { useCartStore } from '@/lib/cart/store';
+import { Button } from '@/components/ui/button';
+import Container from '@/components/Layout/Container';
+import { formatPrice } from '@/lib/currency';
+import { ShoppingCart, Minus, Plus, ArrowLeft, ChevronLeft, ChevronRight, Heart } from 'lucide-react';
+import { toast } from 'sonner';
+import type { Product as ProductType, ProductsResponse } from '@/types/product';
 
 export default function Product() {
-  const { id } = useParams<{ id: string }>();
-  
+  const { slug } = useParams<{ slug: string }>();
+  const navigate = useNavigate();
+  const [quantity, setQuantity] = useState(1);
+  const [activeTab, setActiveTab] = useState<'description' | 'additional' | 'reviews'>('description');
+  const [selectedImage, setSelectedImage] = useState<string | undefined>();
+  const [selectedVariation, setSelectedVariation] = useState<any>(null);
+  const [selectedAttributes, setSelectedAttributes] = useState<Record<string, string>>({});
+  const thumbnailsRef = useRef<HTMLDivElement>(null);
+  const { addItem } = useCartStore();
+
+  // Fetch product details by slug
+  const { data: product, isLoading, error } = useQuery<ProductType | null>({
+    queryKey: ['product', slug],
+    queryFn: async () => {
+      if (!slug) return null;
+      
+      const response = await apiClient.get<ProductsResponse>(apiClient.endpoints.shop.products, {
+        slug,
+        per_page: 1,
+      });
+      
+      if (response && response.products && response.products.length > 0) {
+        return response.products[0];
+      }
+      
+      return null;
+    },
+    enabled: !!slug,
+  });
+
+  // Set initial image when product loads
+  useEffect(() => {
+    if (product && !selectedImage) {
+      setSelectedImage(product.image || product.images?.[0]);
+    }
+  }, [product]);
+
+  // Find matching variation when attributes change
+  useEffect(() => {
+    if (product?.type === 'variable' && product.variations && Object.keys(selectedAttributes).length > 0) {
+      const variation = (product.variations as any[]).find(v => {
+        return Object.entries(selectedAttributes).every(([key, value]) => {
+          const attrKey = `attribute_${key.toLowerCase()}`;
+          return v.attributes[attrKey] === value.toLowerCase();
+        });
+      });
+      setSelectedVariation(variation || null);
+    }
+  }, [selectedAttributes, product]);
+
+  // Auto-switch image when variation selected
+  useEffect(() => {
+    if (selectedVariation && selectedVariation.image) {
+      setSelectedImage(selectedVariation.image);
+    }
+  }, [selectedVariation]);
+
+  // Scroll thumbnails
+  const scrollThumbnails = (direction: 'left' | 'right') => {
+    if (thumbnailsRef.current) {
+      const scrollAmount = 200;
+      thumbnailsRef.current.scrollBy({
+        left: direction === 'left' ? -scrollAmount : scrollAmount,
+        behavior: 'smooth'
+      });
+    }
+  };
+
+  const handleAttributeChange = (attributeName: string, value: string) => {
+    setSelectedAttributes(prev => ({
+      ...prev,
+      [attributeName]: value
+    }));
+  };
+
+  const handleAddToCart = async () => {
+    if (!product) return;
+
+    // Validate variation selection for variable products
+    if (product.type === 'variable') {
+      if (!selectedVariation) {
+        toast.error('Please select all product options');
+        return;
+      }
+    }
+
+    try {
+      await apiClient.post(apiClient.endpoints.cart.add, {
+        product_id: product.id,
+        quantity,
+        variation_id: selectedVariation?.id || 0,
+      });
+
+      addItem({
+        key: `${product.id}${selectedVariation ? `-${selectedVariation.id}` : ''}`,
+        product_id: product.id,
+        name: product.name,
+        price: parseFloat(selectedVariation?.price || product.price),
+        quantity,
+        image: selectedImage || product.image,
+      });
+
+      toast.success(`${product.name} added to cart!`, {
+        action: {
+          label: 'View Cart',
+          onClick: () => navigate('/cart'),
+        },
+      });
+    } catch (error) {
+      toast.error('Failed to add to cart');
+      console.error(error);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <Container>
+        <div className="animate-pulse max-w-6xl mx-auto py-8">
+          <div className="h-8 bg-gray-200 rounded w-1/4 mb-4"></div>
+          <div className="grid md:grid-cols-2 gap-8">
+            <div className="aspect-square bg-gray-200 rounded"></div>
+            <div className="space-y-4">
+              <div className="h-8 bg-gray-200 rounded w-3/4"></div>
+              <div className="h-6 bg-gray-200 rounded w-1/4"></div>
+              <div className="h-24 bg-gray-200 rounded"></div>
+              <div className="h-12 bg-gray-200 rounded w-1/2"></div>
+            </div>
+          </div>
+        </div>
+      </Container>
+    );
+  }
+
+  if (error || !product) {
+    return (
+      <Container>
+        <div className="text-center max-w-2xl mx-auto py-12">
+          <h2 className="text-2xl font-bold mb-4">Product Not Found</h2>
+          <p className="text-gray-600 mb-6">The product you're looking for doesn't exist.</p>
+          <Button onClick={() => navigate('/shop')}>
+            <ArrowLeft className="mr-2 h-4 w-4" />
+            Back to Shop
+          </Button>
+        </div>
+      </Container>
+    );
+  }
+
+  const currentPrice = selectedVariation?.price || product.price;
+  const regularPrice = selectedVariation?.regular_price || product.regular_price;
+  const isOnSale = selectedVariation ? parseFloat(selectedVariation.sale_price || '0') > 0 : product.on_sale;
+  const stockStatus = selectedVariation?.in_stock !== undefined ? (selectedVariation.in_stock ? 'instock' : 'outofstock') : product.stock_status;
+
   return (
-    <div className="container-safe py-8">
-      <h1 className="text-3xl font-bold mb-6">Product #{id}</h1>
-      <p className="text-muted-foreground">Product detail coming soon...</p>
-    </div>
+    <Container>
+      <div className="max-w-6xl mx-auto py-8">
+        {/* Breadcrumb */}
+        <nav className="mb-6 text-sm">
+          <Link to="/shop" className="text-gray-600 hover:text-gray-900">
+            Shop
+          </Link>
+          <span className="mx-2 text-gray-400">/</span>
+          <span className="text-gray-900">{product.name}</span>
+        </nav>
+
+        <div className="grid md:grid-cols-2 gap-8 lg:gap-12">
+          {/* Product Images */}
+          <div>
+            {/* Main Image */}
+            <div className="relative w-full aspect-square rounded-lg overflow-hidden bg-gray-100 mb-4">
+              {selectedImage ? (
+                <img
+                  src={selectedImage}
+                  alt={product.name}
+                  className="w-full h-full object-cover"
+                />
+              ) : (
+                <div className="w-full h-full flex items-center justify-center text-gray-400">
+                  No image
+                </div>
+              )}
+            </div>
+            
+            {/* Thumbnail Slider */}
+            {product.images && product.images.length > 1 && (
+              <div className="relative">
+                {/* Left Arrow */}
+                {product.images.length > 4 && (
+                  <button
+                    onClick={() => scrollThumbnails('left')}
+                    className="absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-white shadow-lg rounded-full p-2 hover:bg-gray-100 transition-colors"
+                  >
+                    <ChevronLeft className="h-4 w-4" />
+                  </button>
+                )}
+                
+                {/* Scrollable Thumbnails */}
+                <div
+                  ref={thumbnailsRef}
+                  className="flex gap-2 overflow-x-auto scroll-smooth scrollbar-hide px-8"
+                  style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
+                >
+                  {product.images.map((img, index) => (
+                    <button
+                      key={index}
+                      onClick={() => setSelectedImage(img)}
+                      className={`flex-shrink-0 w-20 h-20 rounded-lg overflow-hidden border-2 transition-all ${
+                        selectedImage === img
+                          ? 'border-primary ring-2 ring-primary ring-offset-2'
+                          : 'border-gray-200 hover:border-gray-300'
+                      }`}
+                    >
+                      <img
+                        src={img}
+                        alt={`${product.name} ${index + 1}`}
+                        className="w-full h-full object-cover"
+                      />
+                    </button>
+                  ))}
+                </div>
+                
+                {/* Right Arrow */}
+                {product.images.length > 4 && (
+                  <button
+                    onClick={() => scrollThumbnails('right')}
+                    className="absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-white shadow-lg rounded-full p-2 hover:bg-gray-100 transition-colors"
+                  >
+                    <ChevronRight className="h-4 w-4" />
+                  </button>
+                )}
+              </div>
+            )}
+          </div>
+
+          {/* Product Info */}
+          <div>
+            <h1 className="text-3xl font-bold mb-4">{product.name}</h1>
+
+            {/* Price */}
+            <div className="mb-6">
+              {isOnSale && regularPrice ? (
+                <div className="flex items-center gap-3">
+                  <span className="text-3xl font-bold text-red-600">
+                    {formatPrice(currentPrice)}
+                  </span>
+                  <span className="text-xl text-gray-400 line-through">
+                    {formatPrice(regularPrice)}
+                  </span>
+                  <span className="bg-red-100 text-red-600 px-2 py-1 rounded text-sm font-semibold">
+                    SALE
+                  </span>
+                </div>
+              ) : (
+                <span className="text-3xl font-bold">{formatPrice(currentPrice)}</span>
+              )}
+            </div>
+
+            {/* Stock Status */}
+            <div className="mb-6">
+              {stockStatus === 'instock' ? (
+                <span className="text-green-600 font-medium flex items-center gap-2">
+                  <span className="w-2 h-2 bg-green-600 rounded-full"></span>
+                  In Stock
+                </span>
+              ) : (
+                <span className="text-red-600 font-medium flex items-center gap-2">
+                  <span className="w-2 h-2 bg-red-600 rounded-full"></span>
+                  Out of Stock
+                </span>
+              )}
+            </div>
+
+            {/* Short Description */}
+            {product.short_description && (
+              <div
+                className="prose prose-sm mb-6 text-gray-600"
+                dangerouslySetInnerHTML={{ __html: product.short_description }}
+              />
+            )}
+
+            {/* Variation Selector */}
+            {product.type === 'variable' && product.attributes && product.attributes.length > 0 && (
+              <div className="mb-6 space-y-4">
+                {product.attributes.map((attr: any, index: number) => (
+                  attr.variation && (
+                    <div key={index}>
+                      <label className="block font-medium mb-2 text-sm">{attr.name}:</label>
+                      <select
+                        value={selectedAttributes[attr.name] || ''}
+                        onChange={(e) => handleAttributeChange(attr.name, e.target.value)}
+                        className="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-primary focus:border-primary"
+                      >
+                        <option value="">Choose {attr.name}</option>
+                        {attr.options && attr.options.map((option: string, optIndex: number) => (
+                          <option key={optIndex} value={option}>
+                            {option}
+                          </option>
+                        ))}
+                      </select>
+                    </div>
+                  )
+                ))}
+              </div>
+            )}
+
+            {/* Quantity & Add to Cart */}
+            {stockStatus === 'instock' && (
+              <div className="space-y-4">
+                {/* Quantity Selector */}
+                <div className="flex items-center gap-4">
+                  <label className="font-medium text-sm">Quantity:</label>
+                  <div className="flex items-center border border-gray-300 rounded-lg">
+                    <button
+                      onClick={() => setQuantity(Math.max(1, quantity - 1))}
+                      className="p-2.5 hover:bg-gray-100 transition-colors"
+                    >
+                      <Minus className="h-4 w-4" />
+                    </button>
+                    <input
+                      type="number"
+                      value={quantity}
+                      onChange={(e) => setQuantity(Math.max(1, parseInt(e.target.value) || 1))}
+                      className="w-16 text-center border-x border-gray-300 py-2 focus:outline-none"
+                      min="1"
+                    />
+                    <button
+                      onClick={() => setQuantity(quantity + 1)}
+                      className="p-2.5 hover:bg-gray-100 transition-colors"
+                    >
+                      <Plus className="h-4 w-4" />
+                    </button>
+                  </div>
+                </div>
+
+                {/* Action Buttons */}
+                <div className="flex gap-3">
+                  <Button
+                    onClick={handleAddToCart}
+                    size="lg"
+                    className="flex-1 h-12 text-base"
+                  >
+                    <ShoppingCart className="mr-2 h-5 w-5" />
+                    Add to Cart
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="lg"
+                    className="h-12 px-4"
+                  >
+                    <Heart className="h-5 w-5" />
+                  </Button>
+                </div>
+              </div>
+            )}
+
+            {/* Product Meta */}
+            <div className="mt-8 pt-8 border-t border-gray-200 space-y-2 text-sm">
+              {product.sku && (
+                <div className="flex gap-2">
+                  <span className="text-gray-600">SKU:</span>
+                  <span className="font-medium">{product.sku}</span>
+                </div>
+              )}
+              {product.categories && product.categories.length > 0 && (
+                <div className="flex gap-2">
+                  <span className="text-gray-600">Categories:</span>
+                  <span className="font-medium">
+                    {product.categories.map((cat: any) => cat.name).join(', ')}
+                  </span>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Product Tabs */}
+        <div className="mt-12">
+          {/* Tab Headers */}
+          <div className="border-b border-gray-200">
+            <div className="flex gap-8">
+              <button
+                onClick={() => setActiveTab('description')}
+                className={`pb-4 px-1 border-b-2 font-medium transition-colors ${
+                  activeTab === 'description'
+                    ? 'border-primary text-primary'
+                    : 'border-transparent text-gray-600 hover:text-gray-900'
+                }`}
+              >
+                Description
+              </button>
+              <button
+                onClick={() => setActiveTab('additional')}
+                className={`pb-4 px-1 border-b-2 font-medium transition-colors ${
+                  activeTab === 'additional'
+                    ? 'border-primary text-primary'
+                    : 'border-transparent text-gray-600 hover:text-gray-900'
+                }`}
+              >
+                Additional Information
+              </button>
+              <button
+                onClick={() => setActiveTab('reviews')}
+                className={`pb-4 px-1 border-b-2 font-medium transition-colors ${
+                  activeTab === 'reviews'
+                    ? 'border-primary text-primary'
+                    : 'border-transparent text-gray-600 hover:text-gray-900'
+                }`}
+              >
+                Reviews
+              </button>
+            </div>
+          </div>
+
+          {/* Tab Content */}
+          <div className="py-8">
+            {activeTab === 'description' && (
+              <div>
+                {product.description ? (
+                  <div
+                    className="prose prose-sm max-w-none"
+                    dangerouslySetInnerHTML={{ __html: product.description }}
+                  />
+                ) : (
+                  <p className="text-gray-600">No description available.</p>
+                )}
+              </div>
+            )}
+
+            {activeTab === 'additional' && (
+              <div>
+                {product.attributes && product.attributes.length > 0 ? (
+                  <table className="w-full">
+                    <tbody>
+                      {product.attributes.map((attr: any, index: number) => (
+                        <tr key={index} className="border-b border-gray-200">
+                          <td className="py-3 pr-4 font-medium text-gray-900 w-1/3">
+                            {attr.name}
+                          </td>
+                          <td className="py-3 text-gray-600">
+                            {Array.isArray(attr.options) ? attr.options.join(', ') : attr.options}
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                ) : (
+                  <p className="text-gray-600">No additional information available.</p>
+                )}
+              </div>
+            )}
+
+            {activeTab === 'reviews' && (
+              <div>
+                <p className="text-gray-600">Reviews coming soon...</p>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </Container>
   );
 }