diff --git a/PROJECT_SOP.md b/PROJECT_SOP.md
index 206aefa..a267ce5 100644
--- a/PROJECT_SOP.md
+++ b/PROJECT_SOP.md
@@ -260,6 +260,59 @@ When updating an existing module to follow this pattern:
 </Toolbar>
 ```
 
+#### Toolbar Button Standards
+
+All CRUD list pages MUST use consistent button styling in the toolbar:
+
+**Button Types:**
+
+| Button Type | Classes | Use Case |
+|-------------|---------|----------|
+| **Delete (Destructive)** | `border rounded-md px-3 py-2 text-sm bg-red-600 text-white hover:bg-red-700 disabled:opacity-50 inline-flex items-center gap-2` | Bulk delete action |
+| **Refresh** | `border rounded-md px-3 py-2 text-sm hover:bg-accent disabled:opacity-50 inline-flex items-center gap-2` | Refresh data |
+| **Export/Secondary** | `border rounded-md px-3 py-2 text-sm hover:bg-accent disabled:opacity-50 inline-flex items-center gap-2` | Secondary actions |
+
+**Button Structure:**
+```tsx
+<button 
+  className="border rounded-md px-3 py-2 text-sm bg-red-600 text-white hover:bg-red-700 disabled:opacity-50 inline-flex items-center gap-2"
+  onClick={handleAction}
+  disabled={condition}
+>
+  <IconComponent className="w-4 h-4" />
+  {__('Button Label')}
+</button>
+```
+
+**Rules:**
+1. ✅ **Delete button** - Always use `bg-red-600` (NOT `bg-black`)
+2. ✅ **Icon placement** - Use `inline-flex items-center gap-2` (NOT `inline mr-2`)
+3. ✅ **Destructive actions** - Only show when items selected (conditional render)
+4. ✅ **Non-destructive actions** - Can be always visible (use `disabled` state)
+5. ✅ **Consistent spacing** - Use `gap-2` between icon and text
+6. ✅ **Hover states** - Destructive: `hover:bg-red-700`, Secondary: `hover:bg-accent`
+7. ❌ **Never use `bg-black`** for delete buttons
+8. ❌ **Never use `inline mr-2`** - use `inline-flex gap-2` instead
+
+**Toolbar Layout:**
+```tsx
+<div className="flex gap-3">
+  {/* Bulk Actions - Show only when items selected */}
+  {selectedIds.length > 0 && (
+    <button className="...bg-red-600...">
+      <Trash2 className="w-4 h-4" />
+      {__('Delete')} ({selectedIds.length})
+    </button>
+  )}
+  
+  {/* Always-visible actions */}
+  <button className="...hover:bg-accent...">
+    <RefreshCw className="w-4 h-4" />
+    {__('Refresh')}
+  </button>
+</div>
+```
+
 #### Table/List UI Standards
 
 All CRUD list pages MUST follow these consistent UI patterns:
diff --git a/admin-spa/src/routes/Products/index.tsx b/admin-spa/src/routes/Products/index.tsx
index 33b852c..643cc01 100644
--- a/admin-spa/src/routes/Products/index.tsx
+++ b/admin-spa/src/routes/Products/index.tsx
@@ -226,21 +226,23 @@ export default function Products() {
       <div className="hidden md:block rounded-lg border border-border p-4 bg-card">
         <div className="flex flex-col lg:flex-row lg:justify-between lg:items-center gap-3">
           <div className="flex gap-3">
-            <button 
-              className="border rounded-md px-3 py-2 text-sm bg-black text-white disabled:opacity-50" 
-              onClick={handleDeleteClick}
-              disabled={selectedIds.length === 0}
-            >
-              <Trash2 className="w-4 h-4 inline mr-2" />
-              {selectedIds.length > 0 ? __(`Delete (${selectedIds.length})`) : __('Delete')}
-            </button>
+            {selectedIds.length > 0 && (
+              <button 
+                className="border rounded-md px-3 py-2 text-sm bg-red-600 text-white hover:bg-red-700 disabled:opacity-50 inline-flex items-center gap-2"
+                onClick={handleDeleteClick}
+                disabled={deleteMutation.isPending}
+              >
+                <Trash2 className="w-4 h-4" />
+                {__('Delete')} ({selectedIds.length})
+              </button>
+            )}
             
             <button 
-              className="border rounded-md px-3 py-2 text-sm hover:bg-accent disabled:opacity-50"
+              className="border rounded-md px-3 py-2 text-sm hover:bg-accent disabled:opacity-50 inline-flex items-center gap-2"
               onClick={handleRefresh}
               disabled={q.isLoading || isRefreshing}
             >
-              <RefreshCw className={`w-4 h-4 inline mr-2 ${isRefreshing ? 'animate-spin' : ''}`} />
+              <RefreshCw className={`w-4 h-4 ${isRefreshing ? 'animate-spin' : ''}`} />
               {__('Refresh')}
             </button>
           </div>