diff --git a/estore/src/components/BouquetPicker.tsx b/estore/src/components/BouquetPicker.tsx
index 72f98e8..ffc9ad1 100644
--- a/estore/src/components/BouquetPicker.tsx
+++ b/estore/src/components/BouquetPicker.tsx
@@ -803,18 +803,31 @@ export default function BouquetPicker({ product, onClose }: Props) {
                                     <div style={{
                                       border: '1px solid #b2e0e4', borderTop: 'none',
                                       borderRadius: '0 0 8px 8px', padding: '0.6rem 0.75rem',
-                                      display: 'flex', flexWrap: 'wrap', gap: 8,
+                                      background: '#fff',
                                     }}>
-                                      {family.colors.map((c) => (
-                                        <button key={c.name} type="button" title={c.name}
-                                          onClick={() => selectLatexColor(c.name)}
-                                          style={{
-                                            width: 30, height: 30, borderRadius: '50%', cursor: 'pointer', flexShrink: 0,
-                                            background: c.image ? `url('/color/${c.image}') center/cover` : c.hex,
-                                            border: '2px solid rgba(0,0,0,0.15)',
-                                          }}
-                                        />
-                                      ))}
+                                      <div className="swatch-container">
+                                        {family.colors.map((c) => {
+                                          const imageSrc = c.image ? `/color/${c.image}` : null
+                                          return (
+                                            <div key={c.name} className="swatch-wrapper"
+                                              onClick={() => selectLatexColor(c.name)}
+                                              role="button" title={c.name}>
+                                              <div className="color-swatch">
+                                                {imageSrc ? (
+                                                  <div className="color-background finish-image"
+                                                    style={{ backgroundImage: `url('${imageSrc}')` }} />
+                                                ) : (
+                                                  <div className="color-background"
+                                                    style={{ backgroundColor: c.hex }} />
+                                                )}
+                                                {/* eslint-disable-next-line @next/next/no-img-element */}
+                                                <img className="color-shine" src="/color/shine.svg" alt="" aria-hidden="true" />
+                                              </div>
+                                              <span className="color-name">{c.name}</span>
+                                            </div>
+                                          )
+                                        })}
+                                      </div>
                                     </div>
                                   )}
                                 </div>