diff --git a/src/renderer/components/modal/modal-types/edit-version-modal.component.tsx b/src/renderer/components/modal/modal-types/edit-version-modal.component.tsx
index d0e8e7c7..bc775ac0 100644
--- a/src/renderer/components/modal/modal-types/edit-version-modal.component.tsx
+++ b/src/renderer/components/modal/modal-types/edit-version-modal.component.tsx
@@ -44,13 +44,13 @@ export function EditVersionModal({resolver, clone = false}: {resolver: (x: Modal
             <div className="relative w-full h-7 mb-4 bg-light-main-color-1 dark:bg-main-color-1 flex justify-center rounded-md py-1 z-[1]">
                <SettingColorChooser color={color} onChange={setColor} pickerClassName="!h-32 !w-32"/>
                <div className="absolute right-2 top-0 h-full flex items-center">
-                  <BsmButton onClick={resetColor} className="px-2 font-bold italic text-sm rounded-md bg-light-main-color-2 dark:bg-main-color-2 hover:bg-light-main-color-3 dark:hover:bg-main-color-3" text="pages.settings.appearance.reset" withBar={false}/>
+                  <BsmButton onClick={resetColor} className="px-2 font-bold italic text-sm rounded-md" text="pages.settings.appearance.reset" withBar={false}/>
                </div>
             </div>
          </div>
          <div className="grid grid-flow-col grid-cols-2 gap-4">
-            <BsmButton className="rounded-md text-center bg-gray-500 hover:brightness-110 transition-all" onClick={() => {resolver({exitCode: ModalExitCode.CANCELED})}} withBar={false} text="misc.cancel"/>
-            <BsmButton typeColor="primary" className="z-0 px-1 rounded-md text-center hover:brightness-110 transition-all" type="submit" withBar={false} text={!clone ? "modals.edit-version.buttons.submit" : "modals.clone-version.buttons.submit"}/>
+            <BsmButton typeColor="cancel" className="rounded-md text-center transition-all" onClick={() => {resolver({exitCode: ModalExitCode.CANCELED})}} withBar={false} text="misc.cancel"/>
+            <BsmButton typeColor="primary" className="z-0 px-1 rounded-md text-center transition-all" type="submit" withBar={false} text={!clone ? "modals.edit-version.buttons.submit" : "modals.clone-version.buttons.submit"}/>
          </div>
       </form>
    )
diff --git a/src/renderer/components/modal/modal-types/guard-modal.component.tsx b/src/renderer/components/modal/modal-types/guard-modal.component.tsx
index 0e486b30..fcd49bb9 100644
--- a/src/renderer/components/modal/modal-types/guard-modal.component.tsx
+++ b/src/renderer/components/modal/modal-types/guard-modal.component.tsx
@@ -24,8 +24,8 @@ export function GuardModal({resolver}: {resolver: (x: ModalResponse<string>) =>
             <input className="w-full bg-light-main-color-1 dark:bg-main-color-1 px-2 rounded-md py-[2px]" onChange={e => setGuardCode(e.target.value.toUpperCase())} value={guardCode} type="guard" name="guard" id="guard" placeholder={t("modals.guard.inputs.guard-code.placeholder")}/>
         </div>
         <div className="grid grid-flow-col grid-cols-2 gap-4">
-            <BsmButton className="rounded-md text-center bg-gray-500 hover:brightness-110 transition-all" onClick={() => {resolver({exitCode: ModalExitCode.CANCELED})}} withBar={false} text="misc.cancel"/>
-            <BsmButton className="rounded-md text-center bg-blue-500 hover:brightness-110 transition-all" type="submit" withBar={false} text="modals.guard.buttons.submit"/>
+            <BsmButton typeColor="cancel" className="rounded-md text-center transition-all" onClick={() => {resolver({exitCode: ModalExitCode.CANCELED})}} withBar={false} text="misc.cancel"/>
+            <BsmButton typeColor="primary" className="rounded-md text-center transition-all" type="submit" withBar={false} text="modals.guard.buttons.submit"/>
         </div>
     </form>
   )
diff --git a/src/renderer/components/modal/modal-types/installation-folder-modal.component.tsx b/src/renderer/components/modal/modal-types/installation-folder-modal.component.tsx
index 2c06515a..d84f3beb 100644
--- a/src/renderer/components/modal/modal-types/installation-folder-modal.component.tsx
+++ b/src/renderer/components/modal/modal-types/installation-folder-modal.component.tsx
@@ -15,8 +15,8 @@ export function InstallationFolderModal({resolver}: {resolver: (x: ModalResponse
         <BsmImage className="mx-auto h-24" image={BeatConflict}/>
         <p className="max-w-sm text-gray-800 dark:text-gray-200">{t("modals.install-folder.description")}</p>
         <div className="grid grid-flow-col grid-cols-2 gap-4 mt-4">
-            <BsmButton className="rounded-md text-center bg-gray-500 hover:brightness-110 transition-all" onClick={() => resolver({exitCode: ModalExitCode.CANCELED})} withBar={false} text="misc.cancel"/>
-            <BsmButton className="rounded-md text-center bg-blue-500 hover:brightness-110 transition-all" onClick={() => resolver({exitCode: ModalExitCode.COMPLETED})} withBar={false} text="modals.install-folder.buttons.submit"/>
+            <BsmButton typeColor="cancel" className="rounded-md text-center transition-all" onClick={() => resolver({exitCode: ModalExitCode.CANCELED})} withBar={false} text="misc.cancel"/>
+            <BsmButton typeColor="primary" className="rounded-md text-center transition-all" onClick={() => resolver({exitCode: ModalExitCode.COMPLETED})} withBar={false} text="modals.install-folder.buttons.submit"/>
         </div>
     </>
   )
diff --git a/src/renderer/components/modal/modal-types/login-modal.component.tsx b/src/renderer/components/modal/modal-types/login-modal.component.tsx
index c8535faa..81b58349 100644
--- a/src/renderer/components/modal/modal-types/login-modal.component.tsx
+++ b/src/renderer/components/modal/modal-types/login-modal.component.tsx
@@ -34,8 +34,8 @@ export function LoginModal({resolver}: {resolver: (x: ModalResponse<any>) => voi
             <label className="cursor-pointer text-gray-800 dark:text-gray-200" htmlFor="stay">{t("modals.steam-login.inputs.stay.label")}</label>
         </div>
         <div className="grid grid-flow-col grid-cols-2 gap-4">
-            <BsmButton className="rounded-md text-center bg-gray-500 hover:brightness-110 transition-all" onClick={() => {resolver({exitCode: ModalExitCode.CANCELED})}} withBar={false} text="misc.cancel"/>
-            <BsmButton className="rounded-md text-center bg-blue-500 hover:brightness-110 transition-all" type="submit" withBar={false} text={t("modals.steam-login.buttons.submit")}/>
+            <BsmButton typeColor="cancel" className="rounded-md text-center transition-all" onClick={() => {resolver({exitCode: ModalExitCode.CANCELED})}} withBar={false} text="misc.cancel"/>
+            <BsmButton typeColor="primary" className="rounded-md text-center transition-all" type="submit" withBar={false} text={t("modals.steam-login.buttons.submit")}/>
         </div>
     </form>
   )
diff --git a/src/renderer/components/modal/modal-types/uninstall-modal.component.tsx b/src/renderer/components/modal/modal-types/uninstall-modal.component.tsx
index b820b4fb..812db48c 100644
--- a/src/renderer/components/modal/modal-types/uninstall-modal.component.tsx
+++ b/src/renderer/components/modal/modal-types/uninstall-modal.component.tsx
@@ -16,8 +16,8 @@ export function UninstallModal({resolver}: {resolver: (x: ModalResponse) => void
         <BsmImage className="mx-auto h-24" image={BeatConflict}/>
         <p className="max-w-sm text-gray-800 dark:text-gray-200">{t("modals.bs-uninstall.description", {version: version.BSVersion})}</p>
         <div className="grid grid-flow-col grid-cols-2 gap-4 mt-4">
-            <BsmButton className="rounded-md text-center bg-gray-500 hover:brightness-110 transition-all" onClick={() => {resolver({exitCode: ModalExitCode.CANCELED})}} withBar={false} text="misc.cancel"/>
-            <BsmButton className="rounded-md text-center bg-blue-500 hover:brightness-110 transition-all" type="submit" withBar={false} text="modals.bs-uninstall.buttons.submit"/>
+            <BsmButton typeColor="cancel" className="rounded-md text-center transition-all" onClick={() => {resolver({exitCode: ModalExitCode.CANCELED})}} withBar={false} text="misc.cancel"/>
+            <BsmButton typeColor="primary" className="rounded-md text-center transition-all" type="submit" withBar={false} text="modals.bs-uninstall.buttons.submit"/>
         </div>
     </form>
   )
diff --git a/src/renderer/components/nav-bar/bs-version-item.component.tsx b/src/renderer/components/nav-bar/bs-version-item.component.tsx
index 8ac1b1b3..d1451a08 100644
--- a/src/renderer/components/nav-bar/bs-version-item.component.tsx
+++ b/src/renderer/components/nav-bar/bs-version-item.component.tsx
@@ -77,7 +77,7 @@ export function BsVersionItem(props: {version: BSVersion}) {
                <ReactFitty maxSize={19} minSize={9} className='align-middle pb-[2px] max-w-full overflow-hidden text-ellipsis'>{props.version.name || props.version.BSVersion}</ReactFitty>
             </div>
          </Link>
-         {downloading && <BsmButton onClick={cancel} className="my-1 text-xs text-white rounded-md text-center hover:brightness-125" withBar={false} text="misc.cancel" typeColor="error"/>}
+         {downloading && <BsmButton onClick={cancel} className="my-1 text-xs text-white rounded-md text-center" withBar={false} text="misc.cancel" typeColor="error"/>}
       </div>
     </div>
 
diff --git a/src/renderer/components/shared/bsm-button.component.tsx b/src/renderer/components/shared/bsm-button.component.tsx
index c3e04b01..71ae2c05 100644
--- a/src/renderer/components/shared/bsm-button.component.tsx
+++ b/src/renderer/components/shared/bsm-button.component.tsx
@@ -41,9 +41,18 @@ export function BsmButton({className, style, imgClassName, icon, image, text, ty
     return (L > 0.179) ? "#000" : "fff";
   })();
 
+  const renderTypeColor = (() => {
+    if(typeColor === "primary"){ return null; }
+    if(!typeColor){ return `bg-light-main-color-2 dark:bg-main-color-2 ${!withBar && "hover:bg-light-main-color-3 dark:hover:bg-main-color-3"}`; }
+    if(typeColor === "cancel"){ return "bg-gray-500"; }
+    if(typeColor === "error"){ return "bg-red-500"; }
+    if(typeColor === "success"){ return "bg-green-500"; }
+    return "";
+  })()
+
   return (
     <OutsideClickHandler onOutsideClick={e => onClickOutside && onClickOutside(e)}>
-      <div onClick={e => onClick && onClick(e)} className={`${className} overflow-hidden cursor-pointer group ${disabled && "brightness-75 cursor-not-allowed"} ${typeColor === "error" && 'bg-red-500'}`} style={{...style, ...(!!primaryColor && {backgroundColor: primaryColor})}}>
+      <div onClick={e => onClick && onClick(e)} className={`${className} overflow-hidden cursor-pointer group ${!withBar && !!typeColor && "hover:brightness-[1.15]"} ${disabled && "brightness-75 cursor-not-allowed"} ${renderTypeColor}`} style={{...style, ...(!!primaryColor && {backgroundColor: primaryColor})}}>
         { image && <BsmImage image={image} className={imgClassName}/> }
         { icon && <BsmIcon icon={icon} className="h-full w-full text-gray-800 dark:text-white"/> }
         {text && (type === "submit" ? <button className="w-full h-full" style={{...(!!textColor && {color: textColor})}}>{t(text)}</button> : <span style={{...(!!textColor && {color: textColor})}} >{t(text)}</span>)}
diff --git a/src/renderer/components/shared/bsm-dropdown-button.component.tsx b/src/renderer/components/shared/bsm-dropdown-button.component.tsx
index 743d850e..1a43937d 100644
--- a/src/renderer/components/shared/bsm-dropdown-button.component.tsx
+++ b/src/renderer/components/shared/bsm-dropdown-button.component.tsx
@@ -13,7 +13,7 @@ export function BsmDropdownButton({className, items, align}: {className?: string
 
    return (
       <div className={`${className}`}>
-         <BsmButton onClick={() => setExpanded(!expanded)} className='relative bg-light-main-color-2 dark:bg-main-color-2 z-[1] p-1 rounded-md text-inherit w-full h-full shadow-md shadow-black' icon="settings" active={expanded} onClickOutside={() => {setExpanded(false)}}/>
+         <BsmButton onClick={() => setExpanded(!expanded)} className='relative z-[1] p-1 rounded-md text-inherit w-full h-full shadow-md shadow-black' icon="settings" active={expanded} onClickOutside={() => {setExpanded(false)}}/>
          <div className={`pt-1 pb-1 w-fit absolute cursor-pointer top-[calc(100%-4px)] rounded-md overflow-hidden bg-light-main-color-2 dark:bg-main-color-2 text-sm text-gray-800 dark:text-gray-200 shadow-md shadow-black transition-transform ease-in-out ${align === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right"}`} style={{transform: expanded ? "scale(1)" : "scale(0)"}}>
             { items?.map((i, index) => !!i &&(
                <div key={index} onClick={!!i.onClick ? i.onClick : undefined} className="flex justify-start items-center w-full pr-3 pl-3 pt-2 pb-2 hover:bg-light-main-color-3 dark:hover:bg-main-color-3">
diff --git a/src/renderer/pages/available-versions-list.components.tsx b/src/renderer/pages/available-versions-list.components.tsx
index d8061965..3bbf8283 100644
--- a/src/renderer/pages/available-versions-list.components.tsx
+++ b/src/renderer/pages/available-versions-list.components.tsx
@@ -51,7 +51,7 @@ export function AvailableVersionsList() {
       <AnimatePresence>
         { versionSelected && !currentVersionDownloading && (
           <motion.div initial={{y:"150%"}} animate={{y:"0%"}} exit={{y:"150%"}} className="absolute bottom-5" onClick={startDownload}>
-            <BsmButton text={versionManagerService.isVersionInstalled(versionSelected) ? "misc.verify" : "misc.download"} className="relative bg-light-main-color-2 text-gray-800 dark:text-gray-100 dark:bg-main-color-2 rounded-md text-3xl font-bold italic tracking-wide px-3 pb-2 pt-1 shadow-md shadow-black"/>
+            <BsmButton text={versionManagerService.isVersionInstalled(versionSelected) ? "misc.verify" : "misc.download"} className="relative text-gray-800 dark:text-gray-100 rounded-md text-3xl font-bold italic tracking-wide px-3 pb-2 pt-1 shadow-md shadow-black"/>
           </motion.div>
         )}
       </AnimatePresence>
diff --git a/src/renderer/pages/settings-page.component.tsx b/src/renderer/pages/settings-page.component.tsx
index 2d719b13..c098c429 100644
--- a/src/renderer/pages/settings-page.component.tsx
+++ b/src/renderer/pages/settings-page.component.tsx
@@ -118,7 +118,7 @@ export function SettingsPage() {
             <SettingColorChooser color={firstColor} onChange={setFirstColorSetting}/>
             <SettingColorChooser color={secondColor} onChange={setSecondColorSetting}/>
             <div className="absolute right-2 top-0 h-full flex items-center">
-              <BsmButton onClick={resetColors} className="px-2 font-bold italic text-sm rounded-md bg-light-main-color-2 dark:bg-main-color-2 hover:bg-light-main-color-3 dark:hover:bg-main-color-3" text="pages.settings.appearance.reset" withBar={false}/>
+              <BsmButton onClick={resetColors} className="px-2 font-bold italic text-sm rounded-md" text="pages.settings.appearance.reset" withBar={false}/>
             </div>
           </div>
           <SettingContainer minorTitle="pages.settings.appearance.sub-title" className="mt-3">
@@ -129,7 +129,7 @@ export function SettingsPage() {
         <SettingContainer title="pages.settings.installation-folder.title" description="pages.settings.installation-folder.description">
         <div className="relative flex items-center justify-between w-full h-8 bg-light-main-color-1 dark:bg-main-color-1 rounded-md pl-2 py-1">
           <span className="block text-ellipsis overflow-hidden min-w-0" title={installationFolder}>{installationFolder}</span>
-          <BsmButton onClick={setDefaultInstallationFolder} className="shrink-0 whitespace-nowrap mr-2 px-2 font-bold italic text-sm rounded-md bg-light-main-color-2 dark:bg-main-color-2 hover:bg-light-main-color-3 dark:hover:bg-main-color-3" text="pages.settings.installation-folder.choose-folder" withBar={false}/>
+          <BsmButton onClick={setDefaultInstallationFolder} className="shrink-0 whitespace-nowrap mr-2 px-2 font-bold italic text-sm rounded-md" text="pages.settings.installation-folder.choose-folder" withBar={false}/>
         </div>
         </SettingContainer>
 
diff --git a/src/renderer/pages/version-viewer.component.tsx b/src/renderer/pages/version-viewer.component.tsx
index 38cc7a08..7efdd267 100644
--- a/src/renderer/pages/version-viewer.component.tsx
+++ b/src/renderer/pages/version-viewer.component.tsx
@@ -115,7 +115,7 @@ export function VersionViewer() {
               <ToogleLunchMod icon='terminal' onClick={() => setMode(LaunchMods.DEBUG_MOD, !debugMode)} active={debugMode} text="pages.version-viewer.launch-mods.debug"/>
             </div>
             <div className='grow flex justify-center items-center'>
-              <BsmButton onClick={launchBs} className='relative text-5xl text-gray-800 dark:text-gray-200 bg-light-main-color-2 dark:bg-main-color-2 font-bold tracking-wide pt-1 pb-3 px-7 rounded-lg shadow-md italic shadow-black active:scale-90 transition-transform' text="misc.launch"/>
+              <BsmButton onClick={launchBs} className='relative text-5xl text-gray-800 dark:text-gray-200 font-bold tracking-wide pt-1 pb-3 px-7 rounded-lg shadow-md italic shadow-black active:scale-90 transition-transform' text="misc.launch"/>
             </div>
           </div>
           <div className='shrink-0 w-full h-full flex justify-center'>