diff --git a/src/shared/components/ColorPicker.client.js b/src/shared/components/ColorPicker.client.js
index d16a6d2..ff895ce 100644
--- a/src/shared/components/ColorPicker.client.js
+++ b/src/shared/components/ColorPicker.client.js
@@ -2,9 +2,10 @@
 
 import { useState, useRef, useEffect } from 'react';
 
-const ROW1 = ['#1abc9c', '#2ecc71', '#3498db', '#9b59b6', '#e91e63', '#f1c40f', '#e67e22', '#e74c3c', '#95a5a6'];
-const ROW2 = ['#11806a', '#1f8b4c', '#206694', '#71368a', '#ad1457', '#c27c0e', '#a84300', '#992d22', '#546e7a'];
-const PRESET_COLORS = [...ROW1, ...ROW2];
+const ROW1 = ['#0d9488', '#16a34a', '#0284c7', '#2563eb', '#4f46e5', '#7c3aed', '#9333ea', '#c026d3', '#db2777', '#e11d48'];
+const ROW2 = ['#0f766e', '#15803d', '#0369a1', '#1d4ed8', '#4338ca', '#6d28d9', '#7e22ce', '#a21caf', '#be185d', '#be123c'];
+const ROW3 = ['#b45309', '#c2410c', '#b91c1c', '#92400e', '#4d7c0f', '#047857', '#155e75', '#1e3a8a', '#312e81', '#581c87'];
+const PRESET_COLORS = [...ROW1, ...ROW2, ...ROW3];
 
 const isValidHex = (hex) => /^#[0-9a-fA-F]{6}$/.test(hex);
 
@@ -108,9 +109,9 @@ const ColorPicker = ({
                     />
                 </div>
 
-                {/* Right: 9×2 preset grid */}
+                {/* Right: 10×3 preset grid */}
                 <div className="flex flex-col gap-1.5">
-                    {[ROW1, ROW2].map((row, rowIdx) => (
+                    {[ROW1, ROW2, ROW3].map((row, rowIdx) => (
                         <div key={rowIdx} className="flex gap-1.5">
                             {row.map((color) => {
                                 const isSelected = selected === color.toLowerCase();