diff --git a/client/src/components/shared/SmartColorPicker.vue b/client/src/components/shared/SmartColorPicker.vue
index 3a62b6c..6d309d0 100644
--- a/client/src/components/shared/SmartColorPicker.vue
+++ b/client/src/components/shared/SmartColorPicker.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { Color } from "../../../../server/color";
 import type { SmartColor } from "../../../../server/types/SmartColor";
 
@@ -71,6 +71,24 @@ function onFormUpdate() {
 
   emit("smartColorUpdate", emitSmartColor);
 }
+
+function onSmartColorChange(newColor: SmartColor) {
+  selectedType.value = newColor.type;
+
+  if (newColor.type === "static") {
+    selectedColor.value = Color.toHex(newColor.color);
+  } else if (newColor.type === "gradient") {
+    selectedColorFrom.value = Color.toHex(newColor.parameters.colorFrom);
+    selectedColorTo.value = Color.toHex(newColor.parameters.colorTo);
+  } else {
+    selectedColor.value = "#000000";
+    selectedColorFrom.value = "#000000";
+    selectedColorTo.value = "#000000";
+  }
+}
+
+watch(() => props.smartColor, onSmartColorChange);
+
 </script>
 
 <style scoped>
diff --git a/client/src/views/LampPage.vue b/client/src/views/LampPage.vue
index 0590442..cf6538d 100644
--- a/client/src/views/LampPage.vue
+++ b/client/src/views/LampPage.vue
@@ -29,7 +29,6 @@
           class="input"
           v-if="option.type === 'number'"
           v-model="characteristics.array[i].value"
-          @change="onChange"
           type="number"
           :min="option.min"
           :max="option.max"
@@ -39,7 +38,6 @@
           class="input"
           v-if="option.type === 'select'"
           v-model="characteristics.array[i].value"
-          @change="onChange"
         >
           <option
             v-for="opt in option.options"
@@ -50,6 +48,12 @@
           </option>
         </select>
       </template>
+      <DynamicButton color="yellow" variant="normal" @click="refreshAnimationAndCharacteristics">
+        Refresh
+      </DynamicButton>
+      <DynamicButton color="green" variant="normal" @click="applyAnimation">
+        Apply
+      </DynamicButton>
       <label>Brightness</label>
       <vue-slider
         v-model="brightness"
@@ -65,6 +69,7 @@
 </template>
 
 <script setup lang="ts">
+import DynamicButton from "../components/shared/DynamicButton.vue";
 import VueSlider from "vue-slider-component";
 import "vue-slider-component/theme/antd.css";
 import SmartColorPicker from "../components/shared/SmartColorPicker.vue";
@@ -103,7 +108,6 @@ function refreshAnimationAndCharacteristics() {
       return JSON.parse(res.data);
     })
     .then(data => {
-      console.log(data);
       currentConfig.selectedAnimation = data.animation.name;
       onNewAnimation();
     })
@@ -111,11 +115,6 @@ function refreshAnimationAndCharacteristics() {
 
 function onSmartColorUpdate(smartColor: SmartColor, i: number) {
   characteristics.array[i].value = smartColor;
-  onChange();
-}
-
-function onChange() {
-  axiosInstance.post("/lamp/characteristics", characteristics.array);
 }
 
 function onNewAnimation() {
@@ -126,21 +125,31 @@ function onNewAnimation() {
     })
     .then(data => {
       options.array = data.options;
-      characteristics.array = options.array.map(o => {
+      characteristics.array.splice(0, characteristics.array.length);
+      for (let i = 0; i < options.array.length; i++) {
+        const o = options.array[i];
         switch (o.type) {
           case "number":
-            return { type: "number", value: o.currentCharacteristicValue };
+            characteristics.array.push({ type: o.type, value: o.currentCharacteristicValue });
+            break;
           case "select":
-            return { type: "select", value: o.currentCharacteristicValue };
+            characteristics.array.push({ type: o.type, value: o.currentCharacteristicValue });
+            break;
           case "color":
-            return { type: "color", value: o.currentCharacteristicValue };
+            console.log(i, { type: o.type, value: o.currentCharacteristicValue });
+            characteristics.array.push({ type: o.type, value: o.currentCharacteristicValue });
+            break;
         }
-      });
+      }
     });
+}
 
+function applyAnimation() {
   axiosInstance.post("/lamp/animation", {
     animation: currentConfig.selectedAnimation,
   });
+
+  axiosInstance.post("/lamp/characteristics", characteristics.array);
 }
 
 function onBrightnessChange(brightness: number) {
@@ -189,10 +198,6 @@ input[type="number"] {
   max-width: max-content;
 }
 
-.brightness-slider {
-  
-}
-
 label {
   font-size: calc(5 * var(--unit));
 }
diff --git a/package-lock.json b/package-lock.json
index a8e7413..a7db3ac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -45,7 +45,7 @@
         "nodemon": "^2.0.12",
         "prettier": "^2.8.0",
         "ts-jest": "^27.0.4",
-        "typescript": "^4.3.5"
+        "typescript": "^5.5.4"
       },
       "engines": {
         "node": ">=10.21.0 <11"
@@ -12006,16 +12006,16 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.3.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.5.tgz",
-      "integrity": "sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==",
+      "version": "5.5.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
+      "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=4.2.0"
+        "node": ">=14.17"
       }
     },
     "node_modules/unbox-primitive": {
diff --git a/tsconfig.json b/tsconfig.json
index ca550ed..33ccfe2 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,7 +7,8 @@
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "declaration": true,
-    "downlevelIteration": true
+    "downlevelIteration": true,
+    "noFallthroughCasesInSwitch": true,
   },
   "exclude": [
     "public",