diff --git a/src/renderer/components/modal/modal.component.tsx b/src/renderer/components/modal/modal.component.tsx
index b15bbef0..47245a30 100644
--- a/src/renderer/components/modal/modal.component.tsx
+++ b/src/renderer/components/modal/modal.component.tsx
@@ -6,17 +6,14 @@ import { UninstallModal } from "./modal-types/uninstall-modal.component";
 import { InstallationFolderModal } from "./modal-types/installation-folder-modal.component";
 import { EditVersionModal } from "./modal-types/edit-version-modal.component";
 import { useObservable } from "renderer/hooks/use-observable.hook";
-import { ConfigurationService } from "renderer/services/configuration.service";
-import { DefaultConfigKey } from "renderer/config/default-configuration.config";
+import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
 
 export function Modal() {
 
    const modalSevice = ModalService.getInsance();
-   const configService = ConfigurationService.getInstance();
 
    const modalType = useObservable(modalSevice.modalType$);
-   const firstColor = useObservable(configService.watch("first-color" as DefaultConfigKey));
-   const secondColor = useObservable(configService.watch("second-color" as DefaultConfigKey));
+   const {firstColor, secondColor} = useThemeColor();
 
   return  (
       <AnimatePresence>
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 7b2cadb0..8ac1b1b3 100644
--- a/src/renderer/components/nav-bar/bs-version-item.component.tsx
+++ b/src/renderer/components/nav-bar/bs-version-item.component.tsx
@@ -10,7 +10,6 @@ import { BSUninstallerService } from "renderer/services/bs-uninstaller.service";
 import { BSVersionManagerService } from "renderer/services/bs-version-manager.service";
 import { BsmIcon } from "../svgs/bsm-icon.component";
 import { ReactFitty } from "react-fitty";
-import { DefaultConfigKey } from 'renderer/config/default-configuration.config';
 import { useThemeColor } from 'renderer/hooks/use-theme-color.hook';
 
 export function BsVersionItem(props: {version: BSVersion}) {
@@ -25,9 +24,7 @@ export function BsVersionItem(props: {version: BSVersion}) {
 
   const [downloading, setDownloading] = useState(false);
   const [downloadPercent, setDownloadPercent] = useState(0);
-  const [color, setColor] = useState("");
-  const firstColor = useThemeColor("first-color");
-  const secondColor = useThemeColor("second-color");
+  const {firstColor, secondColor} = useThemeColor();
 
   const isActive = (): boolean => {
     return props.version?.BSVersion === state?.BSVersion && props?.version.steam === state?.steam && props?.version.name === state?.name;
@@ -65,23 +62,17 @@ export function BsVersionItem(props: {version: BSVersion}) {
          }
       });
       subs.push(downloadSub);
-      if(props.version?.color){ setColor(props.version.color); }
-      else{
-         const colorSub = configService.watch<string>("second-color" as DefaultConfigKey).subscribe(color => setColor(color));
-         subs.push(colorSub);
-      }
-
       return () => { subs.forEach(s => s.unsubscribe()); }
   }, []);
 
 
   return (
     <div className={`outline-none relative p-[1px] overflow-hidden rounded-xl flex justify-center items-center mb-1 ${downloading && "nav-item-download"} active:translate-y-[1px]`}>
-      <div className="download-progress absolute top-0 w-full h-full" style={{transform: `translate(${-(100 - downloadPercent)}%, 0)`, background: `linear-gradient(90deg, ${firstColor}, ${secondColor}, ${firstColor}, ${secondColor})`}}></div>
+      {downloading && <div className="download-progress absolute top-0 w-full h-full" style={{transform: `translate(${-(100 - downloadPercent)}%, 0)`, background: `linear-gradient(90deg, ${firstColor}, ${secondColor}, ${firstColor}, ${secondColor})`}}/>}
       <div className={`wrapper z-[1] px-1 py-[3px] w-full rounded-xl ${downloading && 'bg-black'} ${!downloading && "hover:bg-light-main-color-3 dark:hover:bg-main-color-3"} ${(isActive() && !downloading) && "bg-light-main-color-3 dark:bg-main-color-3"}`}>
          <Link onDoubleClick={handleDoubleClick} to={`/bs-version/${props.version.BSVersion}`} state={props.version} title={props.version.name && `${props.version.BSVersion} - ${props.version.name}`} className="w-full flex items-center justify-start content-center max-w-full">
             {props.version.steam && <BsmIcon icon="steam" className="w-[19px] h-[19px] mr-[5px] shrink-0"/>}
-            {!props.version.steam && <BsmIcon icon="bsNote" className="w-[19px] h-[19px] mr-[5px] shrink-0" style={{color: color}}/>}
+            {!props.version.steam && <BsmIcon icon="bsNote" className="w-[19px] h-[19px] mr-[5px] shrink-0" style={{color: props.version?.color ?? secondColor}}/>}
             <div className="overflow-hidden whitespace-nowrap text-xl dark:text-gray-200 text-gray-800 font-bold tracking-wide">
                <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>
diff --git a/src/renderer/components/nav-bar/nav-bar.component.tsx b/src/renderer/components/nav-bar/nav-bar.component.tsx
index f7aa4ba8..c2564965 100644
--- a/src/renderer/components/nav-bar/nav-bar.component.tsx
+++ b/src/renderer/components/nav-bar/nav-bar.component.tsx
@@ -2,19 +2,16 @@ import './nav-bar.component.css'
 import { BsVersionItem } from './bs-version-item.component';
 import { BSVersionManagerService } from '../../services/bs-version-manager.service';
 import { Link } from 'react-router-dom';
-import { ConfigurationService } from 'renderer/services/configuration.service';
 import { BsmIcon } from '../svgs/bsm-icon.component';
 import { useObservable } from 'renderer/hooks/use-observable.hook';
+import { useThemeColor } from 'renderer/hooks/use-theme-color.hook';
 
 export function NavBar() {
 
-  const configService = ConfigurationService.getInstance();
   const bsVersionServoce =  BSVersionManagerService.getInstance();
 
   const installedVersions = useObservable(bsVersionServoce.installedVersions$);
-
-  const firstColor = useObservable(configService.watch<string>("first-color"));
-  const secondColor = useObservable(configService.watch<string>("second-color"));
+  const {firstColor, secondColor} = useThemeColor();
 
   return (
     <div id='nav-bar' className='z-10 flex flex-col h-full max-h-full items-center p-1 bg-light-main-color-1 dark:bg-main-color-1'>
diff --git a/src/renderer/components/progress-bar/bsm-progress-bar.component.tsx b/src/renderer/components/progress-bar/bsm-progress-bar.component.tsx
index 6f4ecb42..cc94cffa 100644
--- a/src/renderer/components/progress-bar/bsm-progress-bar.component.tsx
+++ b/src/renderer/components/progress-bar/bsm-progress-bar.component.tsx
@@ -9,10 +9,9 @@ export function BsmProgressBar() {
 
     const progressBarService = ProgressBarService.getInstance();
 
-    const progress= useObservable(progressBarService.progression$);
+    const progress = useObservable(progressBarService.progression$);
     const visible = useObservable(progressBarService.visible$);
-    const firstColor = useThemeColor("first-color");
-    const secondColor = useThemeColor("second-color");
+    const {firstColor, secondColor} = useThemeColor();
 
   return (
     <AnimatePresence> { visible && 
diff --git a/src/renderer/hooks/use-theme-color.hook.ts b/src/renderer/hooks/use-theme-color.hook.ts
index ac19bb68..9b673251 100644
--- a/src/renderer/hooks/use-theme-color.hook.ts
+++ b/src/renderer/hooks/use-theme-color.hook.ts
@@ -1,22 +1,43 @@
 import { useEffect, useState } from "react";
+import { DefaultConfigKey } from "renderer/config/default-configuration.config";
 import { ConfigurationService } from "renderer/services/configuration.service";
 
-export function useThemeColor(themeColor: "first-color"|"second-color"){
+export function useThemeColor(): {firstColor: string, secondColor: string};
+export function useThemeColor(themeColor: "first-color"|"second-color"): string;
+export function useThemeColor(themeColor?: "first-color"|"second-color"): string|{firstColor: string, secondColor: string}{
    const configService = ConfigurationService.getInstance();
 
-   const [color, setColor] = useState("");
+   if(themeColor){
+      const [color, setColor] = useState("");
+
+      useEffect(() => {
+         const sub = configService.watch<string>(themeColor).subscribe(color => {
+            setColor(color);
+         })
+         return () => {
+            sub.unsubscribe();
+         }
+      }, []);
+
+      return color;
+   }
+   
+   const [firstColor, setFirstColor] = useState("");
+   const [secondColor, setSecondColor] = useState("");
 
    useEffect(() => {
-      const obs = configService.watch<string>(themeColor)
-      obs.subscribe(color => {
-         setColor(color);
-      })
+      const sub1 = configService.watch<string>("first-color" as DefaultConfigKey).subscribe(color => {
+         setFirstColor(color);
+      });
+      const sub2 = configService.watch<string>("second-color" as DefaultConfigKey).subscribe(color => {
+         setSecondColor(color);
+      });
       return () => {
-         configService.stopWatch(color, obs);
-         obs.unsubscribe();
+         sub1.unsubscribe();
+         sub2.unsubscribe();
       }
    }, []);
 
-   return color;
+   return {firstColor, secondColor}
    
 }
\ No newline at end of file
diff --git a/src/renderer/pages/settings-page.component.tsx b/src/renderer/pages/settings-page.component.tsx
index dca8fcbb..cbb5847c 100644
--- a/src/renderer/pages/settings-page.component.tsx
+++ b/src/renderer/pages/settings-page.component.tsx
@@ -6,7 +6,7 @@ import { BsmButton } from "renderer/components/shared/bsm-button.component";
 import { BsmIconType } from "renderer/components/svgs/bsm-icon.component";
 import { DefaultConfigKey, ThemeConfig } from "renderer/config/default-configuration.config";
 import { useObservable } from "renderer/hooks/use-observable.hook";
-import { useTranslation } from "renderer/hooks/use-translation.hook";
+import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
 import { AuthUserService } from "renderer/services/auth-user.service";
 import { BsDownloaderService } from "renderer/services/bs-downloader.service";
 import { ConfigurationService } from "renderer/services/configuration.service"
@@ -29,8 +29,7 @@ export function SettingsPage() {
   const notificationService: NotificationService = NotificationService.getInstance();
   const i18nService: I18nService = I18nService.getInstance();
 
-  const firstColor = useObservable(configService.watch<string>("first-color"));
-  const secondColor = useObservable(configService.watch<string>("second-color"));
+  const {firstColor, secondColor} = useThemeColor();
   const sessionExist = useObservable(authService.sessionExist$);
 
   const themeItem: RadioItem[] = [