diff --git a/estore/src/components/ColorPicker.tsx b/estore/src/components/ColorPicker.tsx
index 522edbb..6d6fdba 100644
--- a/estore/src/components/ColorPicker.tsx
+++ b/estore/src/components/ColorPicker.tsx
@@ -353,13 +353,14 @@ export default function ColorPicker({ product, maxColors, onClose, editingEntry
                         <span style={{ display: 'flex', gap: '3px', flexShrink: 0 }}>
                           {family.colors.slice(0, 7).map((c) => (
                             <span key={c.name} style={{
-                              width:        '13px',
-                              height:       '13px',
-                              borderRadius: '50%',
-                              background:   c.image ? `url('/color/${c.image}') center/cover` : c.hex,
-                              border:       '1px solid rgba(0,0,0,0.12)',
-                              flexShrink:   0,
-                              display:      'inline-block',
+                              width:           '13px',
+                              height:          '13px',
+                              borderRadius:    '50%',
+                              background:      c.image ? `url('/color/${c.image}') center/cover` : c.hex,
+                              backgroundSize:  c.image ? '220%' : undefined,
+                              border:          '1px solid rgba(0,0,0,0.12)',
+                              flexShrink:      0,
+                              display:         'inline-block',
                             }} />
                           ))}
                         </span>