diff --git a/frontend/app/color-preview/page.tsx b/frontend/app/color-preview/page.tsx
index b937fb15..7552806e 100644
--- a/frontend/app/color-preview/page.tsx
+++ b/frontend/app/color-preview/page.tsx
@@ -93,11 +93,11 @@ export default function ColorPreview() {
             <button
               key={key}
               onClick={() => setSelected(key as keyof typeof palettes)}
-              className="p-4 rounded-lg transition-all"
+              className="p-4 rounded-lg transition-all cursor-pointer hover:scale-105 active:scale-95 focus:outline-none focus:ring-2"
               style={{
                 backgroundColor: selected === key ? p.colors.primary : p.colors.surface,
                 border: `2px solid ${selected === key ? p.colors.foreground : p.colors.muted}`,
-                color: selected === key ? palette.colors.foreground : p.colors.secondary,
+                color: selected === key ? p.colors.background : p.colors.secondary,
               }}
             >
               <div className="font-bold text-sm">{p.name}</div>