diff --git a/src/components/ColorModelCard.vue b/src/components/ColorModelCard.vue
new file mode 100644
index 0000000..6e557e1
--- /dev/null
+++ b/src/components/ColorModelCard.vue
@@ -0,0 +1,154 @@
+<template>
+  <MyCard icon="img:icons/palette_outlined.svg" title="Color">
+    <q-card-section>
+      <div class="text-h6 col-auto self-center q-gutter-md">
+        <q-select
+          v-model="colorModel"
+          :options="colorOptions"
+          label="Color Model"
+          style="width: 200px"
+          dropdown-icon="img:icons/arrow_drop_down.svg"
+        >
+          <template #dropdown-icon>
+            <img
+              src="/icons/arrow_drop_down.svg"
+              alt="Dropdown Icon"
+              style="width: 24px; height: 24px"
+            />
+          </template>
+        </q-select>
+      </div>
+    </q-card-section>
+    <q-card-section style="width: 80%">
+      <ColorSlider
+        v-for="colorSlider in colorSliders"
+        :key="colorSlider.label"
+        :min="colorSlider.min"
+        :max="colorSlider.max"
+        :label="colorSlider.label"
+        :value="getColorSliderValue(colorSlider.model)"
+        :color="colorSlider.color"
+        @update:model="updateColorSlider(colorSlider.model, $event)"
+      />
+    </q-card-section>
+  </MyCard>
+</template>
+
+<script>
+import { ref, watch, computed, onMounted } from "vue";
+import { configDataStore } from "src/stores/configDataStore";
+import ColorSlider from "src/components/ColorSlider.vue";
+import MyCard from "src/components/myCard.vue";
+
+export default {
+  components: {
+    MyCard,
+    ColorSlider,
+  },
+  setup() {
+    const configData = configDataStore();
+
+    const colorModel = ref("");
+    const defaultColorOptions = ["RGB", "RGBWW", "RGBCW", "RGBWWCW"];
+    const colorOptions = ref([]);
+
+    const colorSliders = computed(() => {
+      const sliders = [
+        {
+          label: "Red",
+          model: "color.brightness.red",
+          min: 0,
+          max: 100,
+          color: "red",
+        },
+        {
+          label: "Green",
+          model: "color.brightness.green",
+          min: 0,
+          max: 100,
+          color: "green",
+        },
+        {
+          label: "Blue",
+          model: "color.brightness.blue",
+          min: 0,
+          max: 100,
+          color: "blue",
+        },
+      ];
+
+      if (colorModel.value === "RGBWW" || colorModel.value === "RGBWWCW") {
+        sliders.push({
+          label: "Warm White",
+          model: "color.brightness.ww",
+          min: 0,
+          max: 100,
+          color: "yellow",
+        });
+      }
+
+      if (colorModel.value === "RGBCW" || colorModel.value === "RGBWWCW") {
+        sliders.push({
+          label: "Cold White",
+          model: "color.brightness.cw",
+          min: 0,
+          max: 100,
+          color: "cyan",
+        });
+      }
+
+      return sliders;
+    });
+
+    const getColorSliderValue = (model) => {
+      return model.split(".").reduce((o, i) => o[i], configData.data);
+    };
+
+    const updateColorSlider = (model, value) => {
+      configData.updateData(model, value);
+    };
+
+    const updateColorModel = (newColorModel) => {
+      const modelIndex = colorOptions.value.indexOf(newColorModel);
+      configData.updateData("color.color_mode", modelIndex);
+      colorModel.value = newColorModel; // Ensure the ref is updated
+    };
+
+    watch(colorModel, (newColorModel, oldColorModel) => {
+      console.log(
+        `Selected color model changed from ${oldColorModel} to ${newColorModel}`,
+      );
+      updateColorModel(newColorModel);
+    });
+
+    // Initialize values from configDataStore when the component is mounted
+    onMounted(() => {
+      // Initialize colorOptions and colorModel
+      colorOptions.value =
+        configData.data.general?.supported_color_models.length > 0
+          ? configData.data.general.supported_color_models
+          : defaultColorOptions;
+      const colorModelIndex = configData.data.color.color_mode;
+      if (colorModelIndex >= 0 && colorModelIndex < colorOptions.value.length) {
+        colorModel.value = colorOptions.value[colorModelIndex];
+      } else {
+        console.error(`Invalid color.color_mode: ${colorModelIndex}`);
+        colorModel.value = colorOptions.value[0]; // Default to the first option
+      }
+    });
+
+    return {
+      colorModel,
+      colorOptions,
+      colorSliders,
+      getColorSliderValue,
+      updateColorSlider,
+      updateColorModel,
+    };
+  },
+};
+</script>
+
+<style scoped>
+/* Add any necessary styles here */
+</style>
diff --git a/src/components/TransitionModeCard.vue b/src/components/TransitionModeCard.vue
new file mode 100644
index 0000000..1b3f4ed
--- /dev/null
+++ b/src/components/TransitionModeCard.vue
@@ -0,0 +1,153 @@
+<template>
+  <MyCard icon="img:icons/tune_outlined.svg" title="Transition Mode">
+    <q-card-section>
+      <div class="text-h6 col-auto self-center q-gutter-md">
+        <q-select
+          v-model="transitionModel"
+          :options="transitionOptions"
+          label="Transition Mode"
+          style="width: 200px"
+          dropdown-icon="img:icons/arrow_drop_down.svg"
+          @update:model-value="updateTransitionMode"
+        />
+      </div>
+    </q-card-section>
+
+    <q-card-section v-if="transitionModel !== 'Rainbow'" style="width: 80%">
+      <ColorSlider
+        v-for="colorGain in colorGains"
+        :key="colorGain.label"
+        :min="colorGain.min"
+        :max="colorGain.max"
+        :label="colorGain.label"
+        :value="colorGain.value"
+        :color="colorGain.color"
+        @update:model="
+          ($event) => {
+            console.log('in function:', $event);
+            updateColorSlider(colorGain.model, $event);
+          }
+        "
+      />
+    </q-card-section>
+  </MyCard>
+</template>
+
+<script>
+import { ref, watch, onMounted } from "vue";
+import { configDataStore } from "src/stores/configDataStore";
+import ColorSlider from "src/components/ColorSlider.vue";
+import MyCard from "src/components/myCard.vue";
+
+export default {
+  components: {
+    MyCard,
+    ColorSlider,
+  },
+  setup() {
+    const configData = configDataStore();
+
+    const transitionOptions = ["Normal", "Spektrum", "Rainbow"];
+    const transitionModel = ref(
+      transitionOptions[configData.data.color.hsv.model],
+    );
+
+    const colorGains = ref([
+      {
+        label: "Red",
+        model: "color.hsv.red",
+        min: -30,
+        max: 30,
+        color: "red",
+        value: configData.data.color.hsv.red,
+      },
+      {
+        label: "Yellow",
+        model: "color.hsv.yellow",
+        min: -30,
+        max: 30,
+        color: "yellow",
+        value: configData.data.color.hsv.yellow,
+      },
+      {
+        label: "Green",
+        model: "color.hsv.green",
+        min: -30,
+        max: 30,
+        color: "green",
+        value: configData.data.color.hsv.green,
+      },
+      {
+        label: "Cyan",
+        model: "color.hsv.cyan",
+        min: -30,
+        max: 30,
+        color: "cyan",
+        value: configData.data.color.hsv.cyan,
+      },
+      {
+        label: "Blue",
+        model: "color.hsv.blue",
+        min: -30,
+        max: 30,
+        color: "blue",
+        value: configData.data.color.hsv.blue,
+      },
+      {
+        label: "Magenta",
+        model: "color.hsv.magenta",
+        min: -30,
+        max: 30,
+        color: "#ff0090",
+        value: configData.data.color.hsv.magenta,
+      },
+    ]);
+
+    const updateColorSlider = (model, value) => {
+      console.log("update for", model);
+      console.log("new value", value);
+      configData.updateData(model, value);
+    };
+
+    const updateTransitionMode = (newTransitionModel) => {
+      console.log(
+        `from update trigger: \nTransition model changed to ${newTransitionModel}`,
+      );
+      const modelIndex = transitionOptions.indexOf(newTransitionModel);
+      console.log(
+        "old transition model:",
+        configData.data.color.hsv.model,
+        " new transition model: ",
+        modelIndex,
+      );
+      configData.updateData("color.hsv.model", modelIndex);
+    };
+
+    watch(transitionModel, (newModel) => {
+      console.log("transition model change to ", newModel);
+      updateTransitionMode(newModel);
+    });
+
+    onMounted(() => {
+      // Initialize transition model and color gains
+      transitionModel.value =
+        transitionOptions[configData.data.color.hsv.model];
+      colorGains.value.forEach((gain) => {
+        gain.value = configData.data.color.hsv[gain.model.split(".").pop()];
+      });
+    });
+
+    return {
+      transitionModel,
+      transitionOptions,
+      colorGains,
+      updateColorSlider,
+      updateTransitionMode,
+    };
+  },
+};
+</script>
+
+<style scoped>
+/* Add any necessary styles here */
+</style>
diff --git a/src/components/WhiteBalanceCard.vue b/src/components/WhiteBalanceCard.vue
new file mode 100644
index 0000000..00196bb
--- /dev/null
+++ b/src/components/WhiteBalanceCard.vue
@@ -0,0 +1,72 @@
+<template>
+  <MyCard icon="img:icons/exposure_outlined.svg" title="White balance">
+    <q-card-section>
+      <ColorSlider
+        v-for="colorTemperature in colorTemperatures"
+        :key="colorTemperature.label"
+        :min="colorTemperature.min"
+        :max="colorTemperature.max"
+        :label="colorTemperature.label"
+        :value="getColorTemperatureValue(colorTemperature.model)"
+        :color="colorTemperature.color"
+        @update:model="updateColorTemperature(colorTemperature.model, $event)"
+      />
+    </q-card-section>
+  </MyCard>
+</template>
+
+<script>
+import { ref, onMounted } from "vue";
+import { configDataStore } from "src/stores/configDataStore";
+import ColorSlider from "src/components/ColorSlider.vue";
+import MyCard from "src/components/myCard.vue";
+
+export default {
+  components: {
+    MyCard,
+    ColorSlider,
+  },
+  setup() {
+    const configData = configDataStore();
+
+    const colorTemperatures = ref([
+      {
+        label: "warm white",
+        model: "color.colortemp.ww",
+        min: 2500,
+        max: 8000,
+        color: "yellow",
+      },
+      {
+        label: "cold white",
+        model: "color.colortemp.cw",
+        min: 2500,
+        max: 8000,
+        color: "cyan",
+      },
+    ]);
+
+    const getColorTemperatureValue = (model) => {
+      return model.split(".").reduce((o, i) => o[i], configData.data);
+    };
+
+    const updateColorTemperature = (model, value) => {
+      configData.updateData(model, value);
+    };
+
+    onMounted(() => {
+      console.log("Mounted WhiteBalanceCard");
+    });
+
+    return {
+      colorTemperatures,
+      getColorTemperatureValue,
+      updateColorTemperature,
+    };
+  },
+};
+</script>
+
+<style scoped>
+/* Add any necessary styles here */
+</style>
diff --git a/src/pages/ColorSettings.vue b/src/pages/ColorSettings.vue
index 26269d1..9f07b39 100644
--- a/src/pages/ColorSettings.vue
+++ b/src/pages/ColorSettings.vue
@@ -1,323 +1,52 @@
 <template>
-  <MyCard>
-    <q-card-section>
-      <div class="text-h6">
-        <q-icon name="img:icons/tune_outlined.svg" />
-        HSV
-      </div>
-    </q-card-section>
-    <q-separator />
-    <q-card-section>
-      <div class="text-h6 col-auto self-center q-gutter-md">
-        <q-select
-          v-model="transitionModel"
-          :options="transitionOptions"
-          label="Transition Mode"
-          style="width: 200px"
-          dropdown-icon="img:icons/arrow_drop_down.svg"
-        >
-        </q-select>
-      </div>
-    </q-card-section>
-
-    <q-card-section v-if="transitionModel !== 'Rainbow'" style="width: 80%">
-      <ColorSlider
-        v-for="colorGain in colorGains"
-        :key="colorGain.label"
-        :min="colorGain.min"
-        :max="colorGain.max"
-        :label="colorGain.label"
-        :value="getColorGainValue(colorGain.model)"
-        :color="colorGain.color"
-        @update:model="updateColorGain(colorGain.model, $event)"
-      />
-    </q-card-section>
-  </MyCard>
-  <MyCard>
-    <q-card-section>
-      <div class="text-h6">
-        <q-icon name="img:icons/palette_outlined.svg" />
-        Color
-      </div>
-    </q-card-section>
-    <q-separator />
-    <q-card-section>
-      <div class="text-h6 col-auto self-center q-gutter-md">
-        <q-select
-          v-model="colorModel"
-          :options="colorOptions"
-          label="Color Model"
-          style="width: 200px"
-          dropdown-icon="img:icons/arrow_drop_down.svg"
-        >
-          <template #dropdown-icon>
-            <img
-              src="/icons/arrow_drop_down.svg"
-              alt="Dropdown Icon"
-              style="width: 24px; height: 24px"
-            />
-          </template>
-        </q-select>
-      </div>
-    </q-card-section>
-    <q-card-section style="width: 80%">
-      <ColorSlider
-        v-for="colorSlider in colorSliders"
-        :key="colorSlider.label"
-        :min="colorSlider.min"
-        :max="colorSlider.max"
-        :label="colorSlider.label"
-        :value="getColorSliderValue(colorSlider.model)"
-        :color="colorSlider.color"
-        @update:model="updateColorSlider(colorSlider.model, $event)"
-      />
-    </q-card-section>
-  </MyCard>
-  <MyCard v-if="colorModel === 'RGBWWCW'">
-    <q-card-section>
-      <div class="text-h6">
-        <q-icon name="img:icons/exposure_outlined.svg" />
-        White balance
-      </div>
-    </q-card-section>
-    <q-searator />
-    <q-card-section>
-      <ColorSlider
-        v-for="colorTemperature in colorTemperatures"
-        :key="colorTemperature.label"
-        :min="colorTemperature.min"
-        :max="colorTemperature.max"
-        :label="colorTemperature.label"
-        :value="getColorTemperatureValue(colorTemperature.model)"
-        :color="colorTemperature.color"
-        @update:model="updateColorTemperature(colorTemperature.model, $event)"
-      />
-    </q-card-section>
-  </MyCard>
+  <TransitionModeCard />
+  <ColorModelCard />
+  <WhiteBalanceCard v-if="colorMode.value === 3" />
 </template>
 
 <script>
-import { ref, watch, computed, onMounted } from "vue";
+import { ref, watch, onMounted } from "vue";
 import { configDataStore } from "src/stores/configDataStore";
-import ColorSlider from "src/components/ColorSlider.vue";
-import MyCard from "src/components/myCard.vue";
+import TransitionModeCard from "src/components/TransitionModeCard.vue";
+import ColorModelCard from "src/components/ColorModelCard.vue";
+import WhiteBalanceCard from "src/components/WhiteBalanceCard.vue";
 
 export default {
   components: {
-    MyCard,
-    ColorSlider,
+    TransitionModeCard,
+    ColorModelCard,
+    WhiteBalanceCard,
   },
   setup() {
     const configData = configDataStore();
 
-    const transitionOptions = ["Normal", "Spektrum", "Rainbow"];
-    const transitionModel = ref("");
-    const colorModel = ref("");
-    const defaultColorOptions = ["RGB", "RGBWW", "RGBCW", "RGBWWCW"];
-    const colorOptions = ref([]);
-
-    const colorGains = [
-      {
-        label: "Red",
-        model: "color.hsv.red",
-        min: -30,
-        max: 30,
-        color: "red",
-      },
-      {
-        label: "Yellow",
-        model: "color.hsv.yellow",
-        min: -30,
-        max: 30,
-        color: "yellow",
-      },
-      {
-        label: "Green",
-        model: "color.hsv.green",
-        min: -30,
-        max: 30,
-        color: "green",
-      },
-      {
-        label: "Cyan",
-        model: "color.hsv.cyan",
-        min: -30,
-        max: 30,
-        color: "cyan",
-      },
-      {
-        label: "Blue",
-        model: "color.hsv.blue",
-        min: -30,
-        max: 30,
-        color: "blue",
-      },
-      {
-        label: "Magenta",
-        model: "color.hsv.magenta",
-        min: -30,
-        max: 30,
-        color: "#ff0090",
-      },
-    ];
-
-    const colorSliders = computed(() => {
-      const sliders = [
-        {
-          label: "Red",
-          model: "color.brightness.red",
-          min: 0,
-          max: 100,
-          color: "red",
-        },
-        {
-          label: "Green",
-          model: "color.brightness.green",
-          min: 0,
-          max: 100,
-          color: "green",
-        },
-        {
-          label: "Blue",
-          model: "color.brightness.blue",
-          min: 0,
-          max: 100,
-          color: "blue",
-        },
-      ];
+    const colorMode = ref(configData.data.color.color_mode || 0);
 
-      if (colorModel.value === "RGBWW" || colorModel.value === "RGBWWCW") {
-        sliders.push({
-          label: "Warm White",
-          model: "color.brightness.ww",
-          min: 0,
-          max: 100,
-          color: "yellow",
-        });
-      }
-
-      if (colorModel.value === "RGBCW" || colorModel.value === "RGBWWCW") {
-        sliders.push({
-          label: "Cold White",
-          model: "color.brightness.cw",
-          min: 0,
-          max: 100,
-          color: "cyan",
-        });
-      }
-
-      return sliders;
-    });
-
-    const colorTemperatures = [
-      {
-        label: "warm white",
-        model: "color.colortemp.ww",
-        min: 2500,
-        max: 8000,
-        color: "yellow",
-      },
-      {
-        label: "cold white",
-        model: "color.colortemp.cw",
-        min: 2500,
-        max: 8000,
-        color: "cyan",
+    watch(
+      () => configData.data.color.color_mode,
+      (newMode) => {
+        console.log("Watcher triggered: colorMode changed to ", newMode);
+        colorMode.value = newMode;
       },
-    ];
-
-    const getColorGainValue = (model) => {
-      return model.split(".").reduce((o, i) => o[i], configData.data);
-    };
-
-    const updateColorGain = (model, value) => {
-      configData.updateData(model, value);
-    };
+      { deep: true },
+    );
 
-    const getColorSliderValue = (model) => {
-      return model.split(".").reduce((o, i) => o[i], configData.data);
-    };
-
-    const updateColorSlider = (model, value) => {
-      configData.updateData(model, value);
-    };
-
-    const getColorTemperatureValue = (model) => {
-      return model.split(".").reduce((o, i) => o[i], configData.data);
-    };
-
-    const updateColorTemperature = (model, value) => {
-      configData.updateData(model, value);
-    };
-
-    const updateTransitionMode = (newTransitionModel) => {
-      const modelIndex = transitionOptions.indexOf(newTransitionModel);
-      configData.updateData("color.hsv.model", modelIndex);
-    };
-
-    const updateColorModel = (newColorModel) => {
-      const modelIndex = colorOptions.value.indexOf(newColorModel);
-      configData.updateData("color.outputmode", modelIndex);
-      colorModel.value = newColorModel; // Ensure the ref is updated
-    };
-
-    watch(transitionModel, (newTransitionModel) => {
-      updateTransitionMode(newTransitionModel);
-    });
-
-    watch(colorModel, (newColorModel, oldColorModel) => {
-      console.log(
-        `Selected color model changed from ${oldColorModel} to ${newColorModel}`,
-      );
-      updateColorModel(newColorModel);
-    });
-
-    // Initialize values from configDataStore when the component is mounted
     onMounted(() => {
-      // Initialize transitionModel
-      const transitionModelIndex = configData.data.color.hsv.model;
-      if (
-        transitionModelIndex >= 0 &&
-        transitionModelIndex < transitionOptions.length
-      ) {
-        transitionModel.value = transitionOptions[transitionModelIndex];
-      } else {
-        console.error(`Invalid color.hsv.model: ${transitionModelIndex}`);
-        transitionModel.value = transitionOptions[0]; // Default to the first option
-      }
-
-      // Initialize colorOptions and colorModel
-      colorOptions.value =
-        configData.data.general?.supported_color_models.length > 0
-          ? configData.data.general.supported_color_models
-          : defaultColorOptions;
-      const colorModelIndex = configData.data.color.color_mode;
-      if (colorModelIndex >= 0 && colorModelIndex < colorOptions.value.length) {
-        colorModel.value = colorOptions.value[colorModelIndex];
-      } else {
-        console.error(`Invalid color.color_mode: ${colorModelIndex}`);
-        colorModel.value = colorOptions.value[0]; // Default to the first option
-      }
+      // Initialize color mode
+      colorMode.value = configData.data.color.color_mode || 0;
+      console.log("Mounted ColorSettings with colorMode:", colorMode.value);
     });
 
     return {
-      transitionModel,
-      colorModel,
-      transitionOptions,
-      colorGains,
-      colorSliders,
-      colorOptions,
-      colorTemperatures,
-      getColorGainValue,
-      updateColorGain,
-      getColorSliderValue,
-      updateColorSlider,
-      getColorTemperatureValue,
-      updateColorTemperature,
-      updateTransitionMode,
-      updateColorModel,
-      configData,
+      colorMode,
+      TransitionModeCard,
+      ColorModelCard,
+      WhiteBalanceCard,
     };
   },
 };
 </script>
+
+<style scoped>
+/* Add any necessary styles here */
+</style>
diff --git a/src/stores/storeConstants.js b/src/stores/storeConstants.js
index 55cd94f..8c50fe5 100644
--- a/src/stores/storeConstants.js
+++ b/src/stores/storeConstants.js
@@ -2,7 +2,7 @@ export const localhost = {
   hostname: "localhost",
   ip_address:
     process.env.NODE_ENV === "development"
-      ? "192.168.29.198"
+      ? "192.168.29.39"
       : window.location.hostname,
 };