diff --git a/chameleon-client/src/router.js b/chameleon-client/src/router.js
index 6319584d0..4ee4809f5 100644
--- a/chameleon-client/src/router.js
+++ b/chameleon-client/src/router.js
@@ -22,6 +22,11 @@ export default new Router({
       path: '/settings',
       name: 'Settings',
       component: lazyLoad('Settings')
+    },
+    {
+      path: '/picker',
+      name: 'Picker',
+      component: lazyLoad('ColorPicker')
     }
   ]
 })
diff --git a/chameleon-client/src/views/CameraViewes/ThresholdTab.vue b/chameleon-client/src/views/CameraViewes/ThresholdTab.vue
index 9f4e2a69b..880851618 100644
--- a/chameleon-client/src/views/CameraViewes/ThresholdTab.vue
+++ b/chameleon-client/src/views/CameraViewes/ThresholdTab.vue
@@ -6,7 +6,7 @@
         <CVrangeSlider v-model="value.saturation" name="Saturation" :min="0" :max="255" @input="handleData('saturation')" :disabled="isAutomaticHSV"/>
         <CVrangeSlider v-model="value.value" name="Value" :min="0" :max="255" @input="handleData('value')" :disabled="isAutomaticHSV"/>
         <v-divider color="darkgray "/>
-        <v-btn style="margin: 20px;" tile color="#4baf62" :disabled="isManualHSV">
+        <v-btn style="margin: 20px;" tile color="#4baf62" :disabled="isManualHSV" @click="openPickerTab">
                     <v-icon>colorize</v-icon>
                     Colorpick Calibration
                 </v-btn>
@@ -19,6 +19,7 @@
 <script>
 import CVrangeSlider from '../../components/cv-range-slider'
 import CVswitch from '../../components/cv-switch'
+
     export default {
         name: 'Threshold',
         props:['value'],
@@ -49,6 +50,11 @@ import CVswitch from '../../components/cv-switch'
             },
         },
         methods:{  
+            openPickerTab()
+            {
+                console.log("opening picker tab");
+                this.$router.push("picker");
+            },
             handleData(val){
                 this.handleInput(val,this.value[val]);
                 this.$emit('update')
diff --git a/chameleon-client/src/views/ColorPicker.vue b/chameleon-client/src/views/ColorPicker.vue
new file mode 100644
index 000000000..bb46d2ac6
--- /dev/null
+++ b/chameleon-client/src/views/ColorPicker.vue
@@ -0,0 +1,37 @@
+<template>
+    <div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'ColorPicker',
+        components: {
+        },
+        methods: {
+        }
+    }
+</script>
+
+<style scoped>
+    .colsClass {
+        padding: 0 !important;
+
+    }
+
+    .videoClass {
+        text-align: center;
+    }
+
+    .videoClass img {
+        height: auto !important;
+        width: 70%;
+        vertical-align: middle;
+    }
+
+    #Point {
+        padding-top: 5px;
+        text-align: center;
+        color: #f4f4f4;
+    }
+</style>
\ No newline at end of file