diff --git a/frontend/src/components/shared/FileUploadButton.tsx b/frontend/src/components/shared/FileUploadButton.tsx
index 27f58400f..434aad1b4 100644
--- a/frontend/src/components/shared/FileUploadButton.tsx
+++ b/frontend/src/components/shared/FileUploadButton.tsx
@@ -32,9 +32,10 @@ const FileUploadButton = ({
       onChange={onChange}
       accept={accept}
       disabled={disabled}
+
     >
       {(props) => (
-        <Button {...props} variant={variant} fullWidth={fullWidth}>
+        <Button {...props} variant={variant} fullWidth={fullWidth} color="blue">
           {file ? file.name : (placeholder || defaultPlaceholder)}
         </Button>
       )}
diff --git a/frontend/src/components/tools/addWatermark/WatermarkTypeSettings.tsx b/frontend/src/components/tools/addWatermark/WatermarkTypeSettings.tsx
index f97454c5c..84bbb296a 100644
--- a/frontend/src/components/tools/addWatermark/WatermarkTypeSettings.tsx
+++ b/frontend/src/components/tools/addWatermark/WatermarkTypeSettings.tsx
@@ -16,7 +16,7 @@ const WatermarkTypeSettings = ({ watermarkType, onWatermarkTypeChange, disabled
       <div style={{ display: 'flex', gap: '4px' }}>
         <Button
           variant={watermarkType === 'text' ? 'filled' : 'outline'}
-          color={watermarkType === 'text' ? 'blue' : 'gray'}
+          color={watermarkType === 'text' ? 'blue' : 'var(--text-muted)'}
           onClick={() => onWatermarkTypeChange('text')}
           disabled={disabled}
           style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
@@ -27,7 +27,7 @@ const WatermarkTypeSettings = ({ watermarkType, onWatermarkTypeChange, disabled
         </Button>
         <Button
           variant={watermarkType === 'image' ? 'filled' : 'outline'}
-          color={watermarkType === 'image' ? 'blue' : 'gray'}
+          color={watermarkType === 'image' ? 'blue' : 'var(--text-muted)'}
           onClick={() => onWatermarkTypeChange('image')}
           disabled={disabled}
           style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
diff --git a/frontend/src/components/tools/compress/CompressSettings.tsx b/frontend/src/components/tools/compress/CompressSettings.tsx
index d82a99453..42d270abb 100644
--- a/frontend/src/components/tools/compress/CompressSettings.tsx
+++ b/frontend/src/components/tools/compress/CompressSettings.tsx
@@ -23,7 +23,7 @@ const CompressSettings = ({ parameters, onParameterChange, disabled = false }: C
         <div style={{ display: 'flex', gap: '4px' }}>
           <Button
             variant={parameters.compressionMethod === 'quality' ? 'filled' : 'outline'}
-            color={parameters.compressionMethod === 'quality' ? 'blue' : 'gray'}
+            color={parameters.compressionMethod === 'quality' ? 'blue' : 'var(--text-muted)'}
             onClick={() => onParameterChange('compressionMethod', 'quality')}
             disabled={disabled}
             style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
@@ -34,7 +34,7 @@ const CompressSettings = ({ parameters, onParameterChange, disabled = false }: C
           </Button>
           <Button
             variant={parameters.compressionMethod === 'filesize' ? 'filled' : 'outline'}
-            color={parameters.compressionMethod === 'filesize' ? 'blue' : 'gray'}
+            color={parameters.compressionMethod === 'filesize' ? 'blue' : 'var(--text-muted)'}
             onClick={() => onParameterChange('compressionMethod', 'filesize')}
             disabled={disabled}
             style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}