diff --git a/chameleon-client/src/store.js b/chameleon-client/src/store.js
index 1a7a45987..a5d291e36 100644
--- a/chameleon-client/src/store.js
+++ b/chameleon-client/src/store.js
@@ -21,6 +21,7 @@ export default new Vuex.Store({
             exposure: 0,
             brightness: 0,
             orientation: 0,
+            isColorPick: false,
             hue: [0, 15],
             saturation: [0, 15],
             value: [0, 25],
diff --git a/chameleon-client/src/views/CameraViewes/ThresholdTab.vue b/chameleon-client/src/views/CameraViewes/ThresholdTab.vue
index 4067bb804..150081c46 100644
--- a/chameleon-client/src/views/CameraViewes/ThresholdTab.vue
+++ b/chameleon-client/src/views/CameraViewes/ThresholdTab.vue
@@ -1,9 +1,17 @@
 <template>
-    <div>
-        <CVrangeSlider v-model="value.hue" name="Hue" :min="0" :max="180" @input="handleData('hue')"/>
+    <div>        
+        <CVswitch v-model="value.isColorPick" name="Colorpick Calibration"/>
+        <v-divider color="white"/>
+        <CVrangeSlider v-model="value.hue" name="Hue" :min="0" :max="180" @input="handleData('hue')" :disabled="isAutomaticHSV"/>
         <CVrangeSlider v-model="value.saturation" name="Saturation" :min="0" :max="255"
                        @input="handleData('saturation')"/>
         <CVrangeSlider v-model="value.value" name="Value" :min="0" :max="255" @input="handleData('value')"/>
+        <v-divider color="white"/>
+        <v-btn style="margin: 20px;" tile color="#4baf62" :disabled="isManualHSV">
+                    <v-icon>C</v-icon>
+                    Colorpick Calibration
+                </v-btn>
+        <v-divider color="white"/>
         <CVswitch v-model="value.erode" name="Erode" @input="handleData('erode')"/>
         <CVswitch v-model="value.dilate" name="Dilate" @input="handleData('dilate')"/>
     </div>
@@ -23,9 +31,25 @@ import CVswitch from '../../components/cv-switch'
             return {
             }
         },
-        computed:{
+        computed: {            
+            isAutomaticHSV() {
+                if (typeof this.pipeline.isColorPick === "boolean") {
+                    return this.pipeline.isColorPick;
+                }
+            },
+            pipeline: {
+                get() {
+                    return this.$store.state.pipeline;
+                }
+            },
+            isManualHSV()
+            {
+                if (typeof this.pipeline.isColorPick === "boolean") {
+                    return !this.pipeline.isColorPick;
+                }
+            },
         },
-        methods:{
+        methods:{  
             handleData(val){
                 this.handleInput(val,this.value[val]);
                 this.$emit('update')