diff --git a/src/stores/colors.ts b/src/stores/colors.ts
index 4ef7779c..2c0dc32d 100644
--- a/src/stores/colors.ts
+++ b/src/stores/colors.ts
@@ -2,11 +2,16 @@ import { defineStore } from 'pinia';
 
 const STORE_UI_COLORS = 'ftUIColorSettings';
 
+export enum ColorPreferences {
+  GREEN_UP = 'greenUp',
+  RED_UP = 'redUp',
+}
+
 export const useColorStore = defineStore('colorStore', {
   // other options...
   state: () => {
     return {
-      colorPreference: 'greenUp',
+      colorPreference: ColorPreferences.GREEN_UP,
       colorUp: '#26A69A',
       colorDown: '#EF5350',
       colorProfit: '#26A69A', //12bb7b
@@ -17,7 +22,9 @@ export const useColorStore = defineStore('colorStore', {
   actions: {
     updateProfitLossColor() {
       const [colorUp, colorDown] =
-        this.colorPreference === 'greenUp' ? ['#26A69A', '#ef5350'] : ['#ef5350', '#26A69A'];
+        this.colorPreference === ColorPreferences.GREEN_UP
+          ? ['#26A69A', '#ef5350']
+          : ['#ef5350', '#26A69A'];
       this.colorUp = colorUp;
       this.colorDown = colorDown;
     },
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
index bd3e7066..d7e7db28 100644
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -17,6 +17,7 @@
             v-model="colorStore.colorPreference"
             :options="colorPreferenceOptions"
             name="color-preference-options"
+            @change="colorStore.updateProfitLossColor"
           ></b-form-radio-group>
         </b-form-group>
         <b-form-group
@@ -69,7 +70,7 @@ import { OpenTradeVizOptions, useSettingsStore } from '@/stores/settings';
 import { useLayoutStore } from '@/stores/layout';
 import { showAlert } from '@/shared/alerts';
 import { FtWsMessageTypes } from '@/types/wsMessageTypes';
-import { useColorStore } from '@/stores/colors';
+import { ColorPreferences, useColorStore } from '@/stores/colors';
 
 const settingsStore = useSettingsStore();
 const colorStore = useColorStore();
@@ -82,8 +83,8 @@ const openTradesOptions = [
   { value: OpenTradeVizOptions.noOpenTrades, text: "Don't show open trades in header" },
 ];
 const colorPreferenceOptions = [
-  { value: 'greenUp', text: 'Green Up/Red Down' },
-  { value: 'redUp', text: 'Green Down/Red Up' },
+  { value: ColorPreferences.GREEN_UP, text: 'Green Up/Red Down' },
+  { value: ColorPreferences.RED_UP, text: 'Green Down/Red Up' },
 ];
 
 //