diff --git a/src/renderer/components/shared/bsm-checkbox.component.tsx b/src/renderer/components/shared/bsm-checkbox.component.tsx
index 5fb00b79..eaba2db1 100644
--- a/src/renderer/components/shared/bsm-checkbox.component.tsx
+++ b/src/renderer/components/shared/bsm-checkbox.component.tsx
@@ -5,7 +5,7 @@ import { getCorrectTextColor } from "renderer/helpers/correct-text-color"
 type Props = {className?:string, checked?: boolean, onChange?: (val: boolean) => void, disabled?: boolean}
 
 export function BsmCheckbox({className, checked, onChange, disabled} : Props) {
-    
+
     const checkedColor = useThemeColor("first-color");
     const iconColor = getCorrectTextColor(checkedColor);
 
@@ -17,8 +17,8 @@ export function BsmCheckbox({className, checked, onChange, disabled} : Props) {
     return (
         <div className={`group ${className}`}>
             {!disabled && <span className="glow-on-hover !w-[calc(100%+6px)] !h-[calc(100%+6px)] !-top-[3px] !-left-[3px] group-hover:opacity-100"/>}
-            
-            <span className={`w-full h-full flex items-center justify-center rounded-md border-2 border-current overflow-hidden bg-light-main-color-3 dark:bg-main-color-1 ${disabled ? "brightness-50 cursor-not-allowed" : "cursor-pointer"}`} onClickCapture={e => {e.stopPropagation(); handleClick()}}>
+
+            <span className={`w-full h-full flex items-center justify-center rounded-md border-2 border-current overflow-hidden bg-light-main-color-3 dark:bg-main-color-1 ${disabled ? "opacity-30 cursor-not-allowed" : "cursor-pointer"}`} onClickCapture={e => {e.stopPropagation(); handleClick()}}>
                 <BsmIcon className="w-full h-full" icon="check" style={{color: iconColor, backgroundColor: checkedColor, visibility: checked ? "visible" : "hidden"}}/>
             </span>
         </div>