diff --git a/Main/pom.xml b/Main/pom.xml
index 2f2659eea..b95fa0f9c 100644
--- a/Main/pom.xml
+++ b/Main/pom.xml
@@ -89,6 +89,11 @@
             <artifactId>gson</artifactId>
             <version>2.8.5</version>
         </dependency>
+        <dependency>
+            <groupId>org.msgpack</groupId>
+            <artifactId>msgpack</artifactId>
+            <version>0.6.12</version>
+        </dependency>
         <dependency>
             <groupId>org.springframework</groupId>
             <artifactId>spring-beans</artifactId>
diff --git a/New client/chameleon-client/package-lock.json b/New client/chameleon-client/package-lock.json
index 9891ff371..2beadcea2 100644
--- a/New client/chameleon-client/package-lock.json	
+++ b/New client/chameleon-client/package-lock.json	
@@ -2160,6 +2160,15 @@
       "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==",
       "dev": true
     },
+    "bl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-2.2.0.tgz",
+      "integrity": "sha512-wbgvOpqopSr7uq6fJrLH8EsvYMJf9gzfo2jCsL2eTy75qXPukA4pCgHamOQkZtY5vmfVtjB+P3LNlMHW5CEZXA==",
+      "requires": {
+        "readable-stream": "^2.3.5",
+        "safe-buffer": "^5.1.1"
+      }
+    },
     "bluebird": {
       "version": "3.5.5",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.5.tgz",
@@ -3156,8 +3165,7 @@
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
-      "dev": true
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
     },
     "cosmiconfig": {
       "version": "5.2.1",
@@ -6292,8 +6300,7 @@
     "inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "inquirer": {
       "version": "3.3.0",
@@ -6683,8 +6690,7 @@
     "isarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
-      "dev": true
+      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
     },
     "isexe": {
       "version": "2.0.0",
@@ -7375,6 +7381,17 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
+    "msgpack5": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/msgpack5/-/msgpack5-4.2.1.tgz",
+      "integrity": "sha512-Xo7nE9ZfBVonQi1rSopNAqPdts/QHyuSEUwIEzAkB+V2FtmkkLUbP6MyVqVVQxsZYI65FpvW3Bb8Z9ZWEjbgHQ==",
+      "requires": {
+        "bl": "^2.0.1",
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.3.6",
+        "safe-buffer": "^5.1.2"
+      }
+    },
     "multicast-dns": {
       "version": "6.2.3",
       "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-6.2.3.tgz",
@@ -8738,8 +8755,7 @@
     "process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
-      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
-      "dev": true
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
     },
     "progress": {
       "version": "2.0.3",
@@ -8942,7 +8958,6 @@
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
       "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
-      "dev": true,
       "requires": {
         "core-util-is": "~1.0.0",
         "inherits": "~2.0.3",
@@ -9360,8 +9375,7 @@
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "dev": true
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
     "safe-regex": {
       "version": "1.1.0",
@@ -10192,7 +10206,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
       "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "dev": true,
       "requires": {
         "safe-buffer": "~5.1.0"
       }
@@ -10870,8 +10883,7 @@
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
-      "dev": true
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
     },
     "util.promisify": {
       "version": "1.0.0",
@@ -13481,8 +13493,7 @@
             },
             "code-point-at": {
               "version": "1.1.0",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "concat-map": {
               "version": "0.0.1",
@@ -13491,8 +13502,7 @@
             },
             "console-control-strings": {
               "version": "1.1.0",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -13595,8 +13605,7 @@
             },
             "inherits": {
               "version": "2.0.3",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "ini": {
               "version": "1.3.5",
@@ -13606,7 +13615,6 @@
             "is-fullwidth-code-point": {
               "version": "1.0.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -13632,7 +13640,6 @@
             "minipass": {
               "version": "2.2.4",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.1",
                 "yallist": "^3.0.0"
@@ -13649,7 +13656,6 @@
             "mkdirp": {
               "version": "0.5.1",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -13722,8 +13728,7 @@
             },
             "number-is-nan": {
               "version": "1.0.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -13733,7 +13738,6 @@
             "once": {
               "version": "1.4.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -13839,7 +13843,6 @@
             "string-width": {
               "version": "1.0.2",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
diff --git a/New client/chameleon-client/package.json b/New client/chameleon-client/package.json
index 927101ecb..4761e12ba 100644
--- a/New client/chameleon-client/package.json	
+++ b/New client/chameleon-client/package.json	
@@ -10,6 +10,7 @@
   "dependencies": {
     "core-js": "^2.6.5",
     "material-design-icons-iconfont": "^5.0.1",
+    "msgpack5": "^4.2.1",
     "vue": "^2.6.10",
     "vue-native-websocket": "^2.0.13",
     "vue-router": "^3.0.3",
diff --git a/New client/chameleon-client/src/components/cv-icon.vue b/New client/chameleon-client/src/components/cv-icon.vue
index 1466ba8d9..a98b8a0f4 100644
--- a/New client/chameleon-client/src/components/cv-icon.vue	
+++ b/New client/chameleon-client/src/components/cv-icon.vue	
@@ -2,7 +2,7 @@
     <div>
         <v-tooltip :right="right" :bottom="!right" nudge-right="10">
             <template v-slot:activator="{ on }">
-                <v-icon @click="handleClick"  v-on="on" :color="color">{{text}}</v-icon>
+                <v-icon :class="hoverClass" @click="handleClick"  v-on="on" :color="color">{{text}}</v-icon>
             </template>
             <span>{{tooltip}}</span>
         </v-tooltip>
@@ -12,7 +12,7 @@
 <script>
     export default {
         name: 'Icon',
-        props:['color','tooltip','text','right'],
+        props:['color','tooltip','text','right','hover'],
         data() {
             return {
                 
@@ -22,10 +22,20 @@
             handleClick(){
                 this.$emit('click');
             }
-        }
+        },
+        computed:{
+            hoverClass(){
+                if(this.hover !== undefined){
+                    return "hover";
+                }
+            }
+        },
+
     }
 </script>
 
-<style lang="" scoped>
-    
+<style scoped>
+.hover:hover{
+     color: white !important;
+ }
 </style>
\ No newline at end of file
diff --git a/New client/chameleon-client/src/main.js b/New client/chameleon-client/src/main.js
index 8d3c07995..28d81966a 100644
--- a/New client/chameleon-client/src/main.js	
+++ b/New client/chameleon-client/src/main.js	
@@ -4,9 +4,12 @@ import router from './router'
 import store from './store'
 import vuetify from './plugins/vuetify';
 import VueNativeSock from 'vue-native-websocket';
+import msgPack from 'msgpack5';
+
 Vue.config.productionTip = false;
 // Vue.use(VueNativeSock,'ws://' + location.host + '/websocket',{format: 'json'});
 Vue.use(VueNativeSock,'ws://'+location.hostname+':8888/websocket',{format:'JSON'});
+Vue.prototype.$msgPack = msgPack;
 new Vue({
   router,
   store,
diff --git a/New client/chameleon-client/src/views/Camera.vue b/New client/chameleon-client/src/views/Camera.vue
index c742e06fa..4fbf618e2 100644
--- a/New client/chameleon-client/src/views/Camera.vue	
+++ b/New client/chameleon-client/src/views/Camera.vue	
@@ -8,7 +8,7 @@
                     </div>
                 </v-col>
                 <v-col :cols="1">
-                    <CVicon color="white" text="edit" tooltip="Edit camera name"></CVicon>
+                    <CVicon color="#c5c5c5" hover text="edit" @click="test" tooltip="Edit camera name"></CVicon>
                 </v-col>
                 <v-col :cols="3" class="colsClass">
                     <CVselect name="Pipeline" :list="pipelineList" v-model="currentPipelineIndex"></CVselect>
@@ -21,12 +21,12 @@
                             <v-list dense>
                                 <v-list-item @click="test">
                                     <v-list-item-title>
-                                        <CVicon color="white" :right="true" text="edit" tooltip="Edit pipeline name"></CVicon>
+                                        <CVicon color="#c5c5c5" :right="true" text="edit" tooltip="Edit pipeline name"></CVicon>
                                     </v-list-item-title>
                                 </v-list-item>
                                       <v-list-item @click="test">
                                     <v-list-item-title>
-                                        <CVicon color="white" :right="true" text="add" tooltip="Add new pipeline"></CVicon>
+                                        <CVicon color="#c5c5c5" :right="true" text="add" tooltip="Add new pipeline"></CVicon>
                                     </v-list-item-title>
                                 </v-list-item>
                                 <v-list-item @click="test">
@@ -36,7 +36,7 @@
                                 </v-list-item>
                                 <v-list-item @click="test">
                                     <v-list-item-title>
-                                        <CVicon color="white" :right="true" text="mdi-content-copy" tooltip="Duplicate pipeline"></CVicon>
+                                        <CVicon color="#c5c5c5" :right="true" text="mdi-content-copy" tooltip="Duplicate pipeline"></CVicon>
                                     </v-list-item-title>
                                 </v-list-item>
                             </v-list>
@@ -63,7 +63,8 @@
                         <v-tab>Threshold</v-tab>
                     </v-tabs>
                     <div class="videoClass">
-                        <img :src="steamAdress">
+                        <img v-if="cameraList.length > 0" :src="steamAdress">
+                        <span v-else>No Cameras Are connected</span>
                     </div>
                     <h5 id="Point">{{point}}</h5>
                 </div>
@@ -91,7 +92,8 @@ import CVicon from '../components/cv-icon'
         },
         methods:{
             test(){
-
+                let o = this.$msgPack().encode("dasd");
+                console.log(o);
             }
         },
         data() {
@@ -100,16 +102,18 @@ import CVicon from '../components/cv-icon'
             }
         },
         computed:{
-            selectedComponent(){
-                switch(this.selectedTab){
-                    case 0:
-                        return "InputTab";
-                    case 1:
-                        return "ThresholdTab";
-                    case 2:
-                        return "ContoursTab";
-                    case 3:
-                        return "OutputTab";
+            selectedComponent:{
+                get(){
+                    switch(this.selectedTab){
+                        case 0:
+                            return "InputTab";
+                        case 1:
+                            return "ThresholdTab";
+                        case 2:
+                            return "ContoursTab";
+                        case 3:
+                            return "OutputTab";
+                    }
                 }
             },
             point:{
diff --git a/New client/chameleon-client/src/views/CameraViewes/InputTab.vue b/New client/chameleon-client/src/views/CameraViewes/InputTab.vue
index d5a4c93ca..cb2ea75ad 100644
--- a/New client/chameleon-client/src/views/CameraViewes/InputTab.vue	
+++ b/New client/chameleon-client/src/views/CameraViewes/InputTab.vue	
@@ -16,7 +16,6 @@ import CVswitch from '../../components/cv-switch'
         props:['value'],
         components:{
             CVslider,
-            rangeSlider,
             CVselect,
             CVswitch
         },