diff --git a/src/components/player/atoms/settings/CaptionSettingsView.tsx b/src/components/player/atoms/settings/CaptionSettingsView.tsx
index 5bbbb433..67589d98 100644
--- a/src/components/player/atoms/settings/CaptionSettingsView.tsx
+++ b/src/components/player/atoms/settings/CaptionSettingsView.tsx
@@ -328,15 +328,21 @@ export function CaptionSettingsView({
               />
             ))}
             {/* Add Color Picker */}
-            <input
-              type="color"
-              value={styling.color}
-              onChange={(e) => {
-                const color = e.target.value;
-                handleStylingChange({ ...styling, color });
-              }}
-              className="w-10 h-10 border rounded-md cursor-pointer"
-            />
+            <div className="relative inline-block">
+              <input
+                type="color"
+                value={styling.color}
+                onChange={(e) => {
+                  const color = e.target.value;
+                  handleStylingChange({ ...styling, color });
+                }}
+                className="absolute opacity-0 cursor-pointer w-10 h-10"
+              />
+              <div
+                className="w-10 h-10 border-2 border-gray-300 rounded-full"
+                style={{ backgroundColor: styling.color }}
+              />
+            </div>
           </div>
         </div>
       </Menu.Section>
diff --git a/src/pages/parts/settings/CaptionsPart.tsx b/src/pages/parts/settings/CaptionsPart.tsx
index 22bdcf4e..77758ed8 100644
--- a/src/pages/parts/settings/CaptionsPart.tsx
+++ b/src/pages/parts/settings/CaptionsPart.tsx
@@ -168,19 +168,25 @@ export function CaptionsPart(props: {
                 />
               ))}
               {/* Add Color Picker */}
-              <input
-                type="color"
-                value={props.styling.color}
-                onChange={(e) => {
-                  const color = e.target.value;
-                  handleStylingChange({ ...props.styling, color });
-                  subtitleStore.updateStyling({
-                    ...props.styling,
-                    color,
-                  });
-                }}
-                className="w-10 h-10 border rounded-md cursor-pointer"
-              />
+              <div className="relative">
+                <input
+                  type="color"
+                  value={props.styling.color}
+                  onChange={(e) => {
+                    const color = e.target.value;
+                    handleStylingChange({ ...props.styling, color });
+                    subtitleStore.updateStyling({
+                      ...props.styling,
+                      color,
+                    });
+                  }}
+                  className="absolute opacity-0 cursor-pointer w-8 h-8"
+                />
+                <div
+                  className="w-8 h-8 border-2 border-gray-300 rounded-full"
+                  style={{ backgroundColor: props.styling.color }}
+                />
+              </div>
             </div>
           </div>
         </div>