diff --git a/admin-spa/src/routes/Products/Attributes.tsx b/admin-spa/src/routes/Products/Attributes.tsx
index 7151c72..91c2e77 100644
--- a/admin-spa/src/routes/Products/Attributes.tsx
+++ b/admin-spa/src/routes/Products/Attributes.tsx
@@ -138,7 +138,7 @@ export default function ProductAttributes() {
             placeholder={__('Search attributes...')}
             value={search}
             onChange={(e) => setSearch(e.target.value)}
-            className="pl-9"
+            className="!pl-9"
           />
         </div>
       </div>
diff --git a/admin-spa/src/routes/Products/Categories.tsx b/admin-spa/src/routes/Products/Categories.tsx
index 9365cd5..a5d3650 100644
--- a/admin-spa/src/routes/Products/Categories.tsx
+++ b/admin-spa/src/routes/Products/Categories.tsx
@@ -129,7 +129,7 @@ export default function ProductCategories() {
             placeholder={__('Search categories...')}
             value={search}
             onChange={(e) => setSearch(e.target.value)}
-            className="pl-9"
+            className="!pl-9"
           />
         </div>
       </div>
diff --git a/admin-spa/src/routes/Products/Tags.tsx b/admin-spa/src/routes/Products/Tags.tsx
index 9312859..014c125 100644
--- a/admin-spa/src/routes/Products/Tags.tsx
+++ b/admin-spa/src/routes/Products/Tags.tsx
@@ -127,7 +127,7 @@ export default function ProductTags() {
             placeholder={__('Search tags...')}
             value={search}
             onChange={(e) => setSearch(e.target.value)}
-            className="pl-9"
+            className="!pl-9"
           />
         </div>
       </div>
diff --git a/customer-spa/src/pages/Wishlist.tsx b/customer-spa/src/pages/Wishlist.tsx
index 7bd2c0e..6d3ff1d 100644
--- a/customer-spa/src/pages/Wishlist.tsx
+++ b/customer-spa/src/pages/Wishlist.tsx
@@ -6,6 +6,7 @@ import { useCartStore } from '@/lib/cart/store';
 import { Button } from '@/components/ui/button';
 import { toast } from 'sonner';
 import { apiClient } from '@/lib/api/client';
+import { formatPrice } from '@/lib/utils';
 
 interface ProductData {
   id: number;
@@ -56,8 +57,16 @@ export default function Wishlist() {
     setGuestProducts(prev => prev.filter(p => p.id !== productId));
   };
 
-  const handleAddToCart = (productId: number, productName: string) => {
-    navigate(`/product/${productId}`);
+  const handleAddToCart = (product: ProductData) => {
+    addItem({
+      key: `product-${product.id}`,
+      product_id: product.id,
+      name: product.name,
+      price: parseFloat(product.sale_price || product.regular_price || product.price.replace(/[^0-9.]/g, '')),
+      quantity: 1,
+      image: product.image,
+    });
+    toast.success(`${product.name} added to cart`);
   };
 
   if (isLoading || loadingGuest) {
@@ -134,13 +143,24 @@ export default function Wishlist() {
                   )}
                   <div>
                     <h3 className="font-semibold">{product.name}</h3>
-                    <p className="text-sm text-gray-600">{product.price}</p>
+                    <p className="text-sm text-gray-600">
+                      {formatPrice(parseFloat(product.sale_price || product.regular_price || product.price.replace(/[^0-9.]/g, '')))}
+                    </p>
                     {product.stock_status === 'outofstock' && (
                       <p className="text-sm text-red-600">Out of stock</p>
                     )}
                   </div>
                 </div>
                 <div className="flex items-center gap-2">
+                  <Button
+                    variant="default"
+                    size="sm"
+                    onClick={() => handleAddToCart(product)}
+                    disabled={product.stock_status === 'outofstock'}
+                  >
+                    <ShoppingCart className="w-4 h-4 mr-1" />
+                    Add to Cart
+                  </Button>
                   <Button
                     variant="outline"
                     size="sm"
@@ -180,13 +200,34 @@ export default function Wishlist() {
                   )}
                   <div>
                     <h3 className="font-semibold">{item.name}</h3>
-                    <p className="text-sm text-gray-600">{item.price}</p>
+                    <p className="text-sm text-gray-600">
+                      {formatPrice(parseFloat(item.price.replace(/[^0-9.]/g, '')))}
+                    </p>
                     {item.stock_status === 'outofstock' && (
                       <p className="text-sm text-red-600">Out of stock</p>
                     )}
                   </div>
                 </div>
                 <div className="flex items-center gap-2">
+                  <Button
+                    variant="default"
+                    size="sm"
+                    onClick={() => {
+                      addItem({
+                        key: `product-${item.product_id}`,
+                        product_id: item.product_id,
+                        name: item.name,
+                        price: parseFloat(item.price.replace(/[^0-9.]/g, '')),
+                        quantity: 1,
+                        image: item.image,
+                      });
+                      toast.success(`${item.name} added to cart`);
+                    }}
+                    disabled={item.stock_status === 'outofstock'}
+                  >
+                    <ShoppingCart className="w-4 h-4 mr-1" />
+                    Add to Cart
+                  </Button>
                   <Button
                     variant="outline"
                     size="sm"