diff --git a/.circleci/config.yml b/.circleci/config.yml
new file mode 100644
index 000000000..24b8ba214
--- /dev/null
+++ b/.circleci/config.yml
@@ -0,0 +1,76 @@
+version: 2
+jobs:
+  build_ui:
+    working_directory: ~/project/chameleon-client
+    docker:
+      - image: node:latest
+
+    steps:
+      - checkout:
+          path: ~/project
+      
+      - run: npm install
+      - run: npm run build
+      
+      - persist_to_workspace:
+          root: .
+          paths:
+            - dist
+
+  
+  build_jar:
+    working_directory: ~/project/Main
+    docker:
+      - image: maven:3.6.2-jdk-12
+    steps:
+      - checkout:
+          path: ~/project
+      - attach_workspace:
+          at: /UI
+      
+      - run: rm -rf src/main/resources/web/*
+      - run: cp -r /UI/dist/. src/main/resources/web/
+      - run: mvn package
+      - store_artifacts: 
+          path: target/
+      - persist_to_workspace:
+          root: ./target
+          paths:
+            - .
+
+  deploy:
+    docker:
+      - image: cibuilds/github:0.10
+    steps:
+      - attach_workspace:
+            at: ./
+      - run:
+          name: Publish Release on GitHub"
+          command: |
+            VERSION=$(find . -name 'chameleon-vision-*.jar' | sed 's/.*chameleon-vision-//; s/.jar//' )
+            ghr -t ${GITHUB_TOKEN} -u ${CIRCLE_PROJECT_USERNAME} -r ${CIRCLE_PROJECT_REPONAME} -c ${CIRCLE_SHA1} -delete ${VERSION} ./$(find . -name "chameleon-vision-*")
+        
+workflows:
+  version: 2
+  release:
+    jobs:
+      - build_ui:
+          filters:
+            branches:
+              only: 
+                - master
+                - dev
+      - build_jar:
+          requires:
+            - build_ui
+          filters:
+            branches:
+              only:
+                - master
+                - dev
+      - deploy:
+          requires:
+            - build_jar
+          filters:
+            branches:
+              only: master
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index badf4ec29..d7c7d8888 100644
--- a/.gitignore
+++ b/.gitignore
@@ -111,4 +111,8 @@ Main/target
 New client/chameleon-client/node_modules/
 Main/dependency-reduced-pom.xml
 Main/src/main/java/META-INF
+Main/.settings/org.eclipse.jdt.core.prefs
+Main/.classpath
+Main/.project
 *.prefs
+
diff --git a/Main/.settings/org.eclipse.jdt.core.prefs b/Main/.settings/org.eclipse.jdt.core.prefs
deleted file mode 100644
index 6eecfaf0f..000000000
--- a/Main/.settings/org.eclipse.jdt.core.prefs
+++ /dev/null
@@ -1,9 +0,0 @@
-eclipse.preferences.version=1
-org.eclipse.jdt.core.compiler.codegen.targetPlatform=12
-org.eclipse.jdt.core.compiler.compliance=12
-org.eclipse.jdt.core.compiler.problem.enablePreviewFeatures=disabled
-org.eclipse.jdt.core.compiler.problem.forbiddenReference=warning
-org.eclipse.jdt.core.compiler.problem.reportPreviewFeatures=ignore
-org.eclipse.jdt.core.compiler.processAnnotations=disabled
-org.eclipse.jdt.core.compiler.release=enabled
-org.eclipse.jdt.core.compiler.source=12
diff --git a/Main/src/main/java/com/chameleonvision/Main.java b/Main/src/main/java/com/chameleonvision/Main.java
index c767beb2b..3e861e0b8 100644
--- a/Main/src/main/java/com/chameleonvision/Main.java
+++ b/Main/src/main/java/com/chameleonvision/Main.java
@@ -24,7 +24,7 @@ public class Main {
     private static final String IGNORE_ROOT_KEY = "--ignore-root"; // no args for this setting
     private static final String TEST_MODE_KEY = "--cv-development";
 
-    private static final int DEFAULT_PORT = 8888;
+    private static final int DEFAULT_PORT = 5800;
 
     private static boolean ntServerMode = false;
     private static boolean manageNetwork = true;
diff --git a/Main/src/main/java/com/chameleonvision/web/Requesthandler.java b/Main/src/main/java/com/chameleonvision/web/Requesthandler.java
new file mode 100644
index 000000000..e4fc89d9d
--- /dev/null
+++ b/Main/src/main/java/com/chameleonvision/web/Requesthandler.java
@@ -0,0 +1,66 @@
+package com.chameleonvision.web;
+
+import com.chameleonvision.network.NetworkIPMode;
+import com.chameleonvision.settings.GeneralSettings;
+import com.chameleonvision.settings.SettingsManager;
+import com.chameleonvision.vision.camera.CameraException;
+import com.chameleonvision.vision.camera.CameraManager;
+import com.fasterxml.jackson.core.JsonProcessingException;
+import com.fasterxml.jackson.databind.JsonMappingException;
+import com.fasterxml.jackson.databind.ObjectMapper;
+import io.javalin.http.Context;
+
+import java.util.HashMap;
+import java.util.Map;
+
+public class Requesthandler {
+
+    public static void onGeneralSettings(Context ctx) {
+        ObjectMapper objectMapper = new ObjectMapper();
+        try {
+            Map map = objectMapper.readValue(ctx.body(), Map.class);
+            SettingsManager.GeneralSettings.teamNumber = (int) map.get("teamNumber");
+            SettingsManager.GeneralSettings.connectionType = NetworkIPMode.values()[(int) map.get("connectionType")];
+            SettingsManager.GeneralSettings.ip = (String) map.get("ip");
+            SettingsManager.GeneralSettings.netmask = (String) map.get("netmask");
+            SettingsManager.GeneralSettings.gateway = (String) map.get("gateway");
+            SettingsManager.GeneralSettings.hostname = (String) map.get("hostname");
+            SettingsManager.saveSettings();
+            SocketHandler.sendFullSettings();
+            ctx.status(200);
+        } catch (JsonProcessingException e) {
+            ctx.status(500);
+        }
+    }
+
+    public static void onCameraSettings(Context ctx) {
+        ObjectMapper objectMapper = new ObjectMapper();
+        try {
+            Map camSettings = objectMapper.readValue(ctx.body(), Map.class);
+            var curCam = CameraManager.getCurrentCamera();
+
+            Number newFOV = (Number) camSettings.get("fov");
+            Integer newStreamDivisor = (Integer) camSettings.get("streamDivisor");
+            Integer newResolution = (Integer) camSettings.get("resolution");
+
+            curCam.setFOV(newFOV);
+
+            var currentStreamDivisorOrdinal = curCam.getStreamDivisor().ordinal();
+            if (currentStreamDivisorOrdinal != newStreamDivisor) {
+                curCam.setStreamDivisor(newStreamDivisor, true);
+            }
+
+            var currentResolutionIndex = curCam.getVideoModeIndex();
+            if (currentResolutionIndex != newResolution) {
+                curCam.setCamVideoMode(newResolution, true);
+            }
+
+            CameraManager.saveCameras();
+            SocketHandler.sendFullSettings();
+            ctx.status(200);
+        } catch (JsonProcessingException | CameraException e) {
+            e.printStackTrace();
+            ctx.status(500);
+        }
+    }
+}
diff --git a/Main/src/main/java/com/chameleonvision/web/Server.java b/Main/src/main/java/com/chameleonvision/web/Server.java
index 121b78634..d17aadc9c 100644
--- a/Main/src/main/java/com/chameleonvision/web/Server.java
+++ b/Main/src/main/java/com/chameleonvision/web/Server.java
@@ -3,30 +3,33 @@ package com.chameleonvision.web;
 import com.chameleonvision.config.ConfigManager;
 import io.javalin.Javalin;
 
-
 public class Server {
-    public static ServerHandler handler;
+    private static SocketHandler socketHandler;
 
     public static void main(int port) {
-        handler = new ServerHandler();
+        socketHandler = new SocketHandler();
 
-        Javalin app = Javalin.create(javalinConfig -> javalinConfig.showJavalinBanner = false);
-        app.config.addStaticFiles("web");
+        Javalin app = Javalin.create(javalinConfig -> {
+            javalinConfig.showJavalinBanner = false;
+            javalinConfig.addStaticFiles("web");
+            javalinConfig.enableCorsForAllOrigins();
+        });
         app.ws("/websocket", ws -> {
             ws.onConnect(ctx -> {
-                handler.onConnect(ctx);
+                socketHandler.onConnect(ctx);
                 System.out.println("Socket Connected");
             });
             ws.onClose(ctx -> {
-                handler.onClose(ctx);
+                socketHandler.onClose(ctx);
                 System.out.println("Socket Disconnected");
                 ConfigManager.saveGeneralSettings();
             });
             ws.onBinaryMessage(ctx -> {
-                handler.onBinaryMessage(ctx);
+                socketHandler.onBinaryMessage(ctx);
             });
         });
-
+        app.post("/api/settings/general", Requesthandler::onGeneralSettings);
+        app.post("/api/settings/camera", Requesthandler::onCameraSettings);
         app.start(port);
     }
-}
\ No newline at end of file
+}
diff --git a/Main/src/main/java/com/chameleonvision/web/ServerHandler.java b/Main/src/main/java/com/chameleonvision/web/SocketHandler.java
similarity index 87%
rename from Main/src/main/java/com/chameleonvision/web/ServerHandler.java
rename to Main/src/main/java/com/chameleonvision/web/SocketHandler.java
index 822b9551d..1c75d88de 100644
--- a/Main/src/main/java/com/chameleonvision/web/ServerHandler.java
+++ b/Main/src/main/java/com/chameleonvision/web/SocketHandler.java
@@ -23,12 +23,12 @@ import java.nio.ByteBuffer;
 import java.util.*;
 
 
-public class ServerHandler {
+public class SocketHandler {
 
     private static List<WsContext> users;
     private static ObjectMapper objectMapper;
 
-    ServerHandler() {
+    SocketHandler() {
         users = new ArrayList<>();
         objectMapper = new ObjectMapper(new MessagePackFactory());
     }
@@ -53,15 +53,6 @@ public class ServerHandler {
                 CVPipeline currentPipeline = currentProcess.getCurrentPipeline();
 
                 switch (entry.getKey()) {
-                    case "generalSettings": {
-                        HashMap<String, Object> data = (HashMap<String, Object>) entry.getValue();
-                        for (HashMap.Entry<String, Object> e : data.entrySet()) {
-                            setField(ConfigManager.settings, e.getKey(), e.getValue());
-                        }
-                        ConfigManager.saveGeneralSettings();
-                        sendFullSettings();
-                        break;
-                    }
                     case "driverMode": {
                         HashMap<String, Object> data = (HashMap<String, Object>) entry.getValue();
                         currentProcess.getDriverModeSettings().exposure = (Integer) data.get("exposure");
@@ -71,29 +62,6 @@ public class ServerHandler {
                         VisionManager.saveCurrentCameraDriverMode();
                         break;
                     }
-                    case "cameraSettings": {
-                        HashMap camSettings = (HashMap) entry.getValue();
-
-                        Number newFOV = (Number) camSettings.get("fov");
-                        StreamDivisor newStreamDivisor = StreamDivisor.values()[(Integer) camSettings.get("streamDivisor")];
-//                        Integer newResolution = (Integer) camSettings.get("resolution");
-
-                        currentCamera.getProperties().FOV = (double) newFOV;
-
-                        if (currentProcess.cameraStreamer.getDivisor() != newStreamDivisor) {
-                            currentProcess.cameraStreamer.setDivisor(newStreamDivisor, false);
-                        }
-
-                        // TODO (HIGH) get and set video modes!
-//                        var currentResolutionIndex = currentPipeline.getVideoModeIndex();
-//                        if (currentResolutionIndex != newResolution) {
-//                            currentCamera.getProperties().setCamVideoMode(newResolution, true);
-//                        }
-
-                        VisionManager.saveCurrentCameraSettings();
-                        sendFullSettings();
-                        break;
-                    }
                     case "changeCameraName": {
                         currentCamera.getProperties().setNickname((String) entry.getValue());
                         sendFullSettings();
diff --git a/Main/src/main/resources/web/js/app.415345a3.js b/Main/src/main/resources/web/js/app.415345a3.js
index 86d438e65..1a1ad66b9 100644
--- a/Main/src/main/resources/web/js/app.415345a3.js
+++ b/Main/src/main/resources/web/js/app.415345a3.js
@@ -1,2 +1,2 @@
-(function(e){function t(t){for(var a,r,o=t[0],s=t[1],u=t[2],d=0,l=[];d<o.length;d++)r=o[d],Object.prototype.hasOwnProperty.call(i,r)&&i[r]&&l.push(i[r][0]),i[r]=0;for(a in s)Object.prototype.hasOwnProperty.call(s,a)&&(e[a]=s[a]);h&&h(t);while(l.length)l.shift()();return c.push.apply(c,u||[]),n()}function n(){for(var e,t=0;t<c.length;t++){for(var n=c[t],a=!0,r=1;r<n.length;r++){var o=n[r];0!==i[o]&&(a=!1)}a&&(c.splice(t--,1),e=s(s.s=n[0]))}return e}var a={},r={app:0},i={app:0},c=[];function o(e){return s.p+"js/"+({}[e]||e)+"."+{"chunk-716fb61c":"84a36d26","chunk-234aed0c":"9eb772b5","chunk-2d0cbefe":"8112a72c","chunk-32a68574":"6f5a9b82","chunk-055d8c90":"64f8a304","chunk-1dc1c444":"113adf3d","chunk-3af6ee7f":"dfe1a485","chunk-402ab08c":"949bfdb2","chunk-98e0c8cc":"cea7479c","chunk-efc64be2":"5d5761a8","chunk-a5bde65a":"fea4d04a","chunk-444d206f":"518cd8ff"}[e]+".js"}function s(t){if(a[t])return a[t].exports;var n=a[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,s),n.l=!0,n.exports}s.e=function(e){var t=[],n={"chunk-716fb61c":1,"chunk-234aed0c":1,"chunk-32a68574":1,"chunk-055d8c90":1,"chunk-1dc1c444":1,"chunk-402ab08c":1,"chunk-efc64be2":1,"chunk-a5bde65a":1,"chunk-444d206f":1};r[e]?t.push(r[e]):0!==r[e]&&n[e]&&t.push(r[e]=new Promise((function(t,n){for(var a="css/"+({}[e]||e)+"."+{"chunk-716fb61c":"ab43288b","chunk-234aed0c":"62cd23bf","chunk-2d0cbefe":"31d6cfe0","chunk-32a68574":"42871998","chunk-055d8c90":"4ec9a65d","chunk-1dc1c444":"d7d51460","chunk-3af6ee7f":"31d6cfe0","chunk-402ab08c":"d47fe89d","chunk-98e0c8cc":"31d6cfe0","chunk-efc64be2":"05cedd19","chunk-a5bde65a":"09316a61","chunk-444d206f":"a8b2af47"}[e]+".css",i=s.p+a,c=document.getElementsByTagName("link"),o=0;o<c.length;o++){var u=c[o],d=u.getAttribute("data-href")||u.getAttribute("href");if("stylesheet"===u.rel&&(d===a||d===i))return t()}var l=document.getElementsByTagName("style");for(o=0;o<l.length;o++){u=l[o],d=u.getAttribute("data-href");if(d===a||d===i)return t()}var h=document.createElement("link");h.rel="stylesheet",h.type="text/css",h.onload=t,h.onerror=function(t){var a=t&&t.target&&t.target.src||i,c=new Error("Loading CSS chunk "+e+" failed.\n("+a+")");c.code="CSS_CHUNK_LOAD_FAILED",c.request=a,delete r[e],h.parentNode.removeChild(h),n(c)},h.href=i;var f=document.getElementsByTagName("head")[0];f.appendChild(h)})).then((function(){r[e]=0})));var a=i[e];if(0!==a)if(a)t.push(a[2]);else{var c=new Promise((function(t,n){a=i[e]=[t,n]}));t.push(a[2]=c);var u,d=document.createElement("script");d.charset="utf-8",d.timeout=120,s.nc&&d.setAttribute("nonce",s.nc),d.src=o(e);var l=new Error;u=function(t){d.onerror=d.onload=null,clearTimeout(h);var n=i[e];if(0!==n){if(n){var a=t&&("load"===t.type?"missing":t.type),r=t&&t.target&&t.target.src;l.message="Loading chunk "+e+" failed.\n("+a+": "+r+")",l.name="ChunkLoadError",l.type=a,l.request=r,n[1](l)}i[e]=void 0}};var h=setTimeout((function(){u({type:"timeout",target:d})}),12e4);d.onerror=d.onload=u,document.head.appendChild(d)}return Promise.all(t)},s.m=e,s.c=a,s.d=function(e,t,n){s.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},s.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(s.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)s.d(n,a,function(t){return e[t]}.bind(null,a));return n},s.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/",s.oe=function(e){throw console.error(e),e};var u=window["webpackJsonp"]=window["webpackJsonp"]||[],d=u.push.bind(u);u.push=t,u=u.slice();for(var l=0;l<u.length;l++)t(u[l]);var h=d;c.push([0,"chunk-vendors"]),n()})({0:function(e,t,n){e.exports=n("56d7")},"034f":function(e,t,n){"use strict";var a=n("1356"),r=n.n(a);r.a},1:function(e,t){},1356:function(e,t,n){},"1a5d":function(e,t,n){var a={"./Camera.vue":["6ec0","chunk-716fb61c","chunk-234aed0c","chunk-32a68574","chunk-055d8c90"],"./CameraViewes/ContoursTab.vue":["5c73","chunk-716fb61c","chunk-234aed0c","chunk-efc64be2"],"./CameraViewes/InputTab.vue":["50ef","chunk-716fb61c","chunk-234aed0c","chunk-402ab08c"],"./CameraViewes/OutputTab.vue":["4c92","chunk-716fb61c","chunk-234aed0c","chunk-2d0cbefe"],"./CameraViewes/ThresholdTab.vue":["1a40","chunk-716fb61c","chunk-32a68574","chunk-a5bde65a"],"./Settings.vue":["26d3","chunk-716fb61c","chunk-234aed0c","chunk-32a68574","chunk-1dc1c444"],"./SettingsViewes/Cameras.vue":["0b81","chunk-716fb61c","chunk-234aed0c","chunk-98e0c8cc"],"./SettingsViewes/DriverMode.vue":["e5f2","chunk-716fb61c","chunk-234aed0c","chunk-32a68574","chunk-3af6ee7f"],"./SettingsViewes/General.vue":["13f2","chunk-716fb61c","chunk-444d206f"]};function r(e){if(!n.o(a,e))return Promise.resolve().then((function(){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}));var t=a[e],r=t[0];return Promise.all(t.slice(1).map(n.e)).then((function(){return n(r)}))}r.keys=function(){return Object.keys(a)},r.id="1a5d",e.exports=r},2:function(e,t){},"56d7":function(e,t,n){"use strict";n.r(t);var a=n("2b0e"),r=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("v-app",[a("v-app-bar",{attrs:{app:"",dense:"","clipped-left":"",dark:""}},[a("img",{staticClass:"imgClass",attrs:{src:n("cf05")}}),a("v-toolbar-title",{attrs:{id:"title"}},[e._v("Chameleon Vision")]),a("div",{staticClass:"flex-grow-1"}),a("v-toolbar-items",[a("v-tabs",{attrs:{dark:"",height:"48","slider-color":"#4baf62"}},[a("v-tab",{attrs:{to:"vision"}},[e._v("Vision")]),a("v-tab",{attrs:{to:"settings"}},[e._v("Settings")])],1)],1)],1),a("v-content",[a("v-container",{attrs:{fluid:"","fill-height":""}},[a("v-layout",[a("v-flex",[a("router-view",{on:{save:e.startTimer}}),a("v-snackbar",{attrs:{timeout:1e3,top:"",color:"#4baf62"},model:{value:e.saveSnackbar,callback:function(t){e.saveSnackbar=t},expression:"saveSnackbar"}},[a("div",{staticStyle:{"text-align":"center",width:"100%"}},[a("h4",[e._v("Saved All changes")])])])],1)],1)],1)],1)],1)},i=[],c={name:"App",components:{},methods:{handleMessage(e,t){if(this.$store.state.hasOwnProperty(e))this.$store.commit(e,t);else if(this.$store.state.pipeline.hasOwnProperty(e))this.$store.commit("setPipeValues",{[e]:t});else switch(e){default:console.log(e+" : "+t)}},saveSettings(){clearInterval(this.timer),this.saveSnackbar=!0,this.handleInput("command","save")},startTimer(){void 0!==this.timer&&clearInterval(this.timer),this.timer=setInterval(this.saveSettings,4e3)}},data:()=>({saveSnackbar:!1,timer:void 0}),created(){this.$options.sockets.onmessage=async e=>{try{var t=await e.data.arrayBuffer();let n=this.$msgPack.decode(t);for(let e in n)n.hasOwnProperty(e)&&this.handleMessage(e,n[e])}catch(n){console.error("error: "+e.data+" , "+n)}}}},o=c,s=(n("034f"),n("2877")),u=n("6544"),d=n.n(u),l=n("7496"),h=n("40dc"),f=n("a523"),p=n("a75b"),v=n("0e8f"),m=n("a722"),b=n("2db4"),k=n("71a3"),g=n("fe57"),y=n("2a7f"),w=Object(s["a"])(o,r,i,!1,null,null,null),S=w.exports;d()(w,{VApp:l["a"],VAppBar:h["a"],VContainer:f["a"],VContent:p["a"],VFlex:v["a"],VLayout:m["a"],VSnackbar:b["a"],VTab:k["a"],VTabs:g["a"],VToolbarItems:y["a"],VToolbarTitle:y["b"]});var x=n("8c4f");function C(e){return()=>n("1a5d")(`./${e}.vue`)}a["a"].use(x["a"]);var P=new x["a"]({base:"/",routes:[{path:"/",redirect:"/vision"},{path:"/vision",name:"Vision",component:C("Camera")},{path:"/settings",name:"Settings",component:C("Settings")}]}),V=n("2f62");a["a"].use(V["a"]);const L=e=>(t,n)=>{a["a"].set(t,e,n)};var T=new V["a"].Store({state:{settings:{teamNumber:1577,connectionType:0,ip:"",gateway:"",netmask:"",hostname:"Chameleon-vision"},pipeline:{exposure:0,brightness:0,orientation:0,hue:[0,15],saturation:[0,15],value:[0,25],erode:!1,dilate:!1,area:[0,12],ratio:[0,12],extent:[0,12],speckle:5,targetGrouping:0,targetIntersection:0,sortMode:0,isBinary:0,calibrationMode:0},driverMode:{isDriver:!1,driverExposure:0,driverBrightness:0},cameraSettings:{},resolutionList:[],port:1181,currentCameraIndex:0,currentPipelineIndex:0,cameraList:[],pipelineList:[],point:{}},mutations:{settings:L("settings"),pipeline:L("pipeline"),cameraSettings:L("cameraSettings"),resolutionList:L("resolutionList"),port:L("port"),currentCameraIndex:L("currentCameraIndex"),currentPipelineIndex:L("currentPipelineIndex"),cameraList:L("cameraList"),pipelineList:L("pipelineList"),point:L("point"),setPipeValues(e,t){for(let n in t)a["a"].set(e.pipeline,n,t[n])},driverMode:L("driverMode")},actions:{settings:e=>e.settings,pipeline:e=>e.pipeline,cameraSettings:e=>e.cameraSettings,resolutionList:e=>e.resolutionList,port:e=>e.port,currentCameraIndex:e=>e.currentCameraIndex,currentPipelineIndex:e=>e.currentPipelineIndex,cameraList:e=>e.cameraList,pipelineList:e=>e.pipelineList,point:e=>e.point,driverMode:e=>e.driverMode}}),O=(n("5363"),n("d1e7"),n("f309"));a["a"].use(O["a"]);var I=new O["a"]({icons:{}}),_=n("b408"),M=n.n(_),j=n("7d47"),E=n.n(j);a["a"].config.productionTip=!1,a["a"].use(M.a,"ws://"+location.hostname+":8888/websocket"),a["a"].prototype.$msgPack=E()(!0),a["a"].mixin({methods:{handleInput(e,t){let n=this.$msgPack.encode({[e]:t});this.$socket.send(n)}}}),new a["a"]({router:P,store:T,vuetify:I,render:e=>e(S)}).$mount("#app")},cf05:function(e,t,n){e.exports=n.p+"img/logo.e82307fd.png"}});
+(function(e){function t(t){for(var a,r,o=t[0],s=t[1],u=t[2],d=0,l=[];d<o.length;d++)r=o[d],Object.prototype.hasOwnProperty.call(i,r)&&i[r]&&l.push(i[r][0]),i[r]=0;for(a in s)Object.prototype.hasOwnProperty.call(s,a)&&(e[a]=s[a]);h&&h(t);while(l.length)l.shift()();return c.push.apply(c,u||[]),n()}function n(){for(var e,t=0;t<c.length;t++){for(var n=c[t],a=!0,r=1;r<n.length;r++){var o=n[r];0!==i[o]&&(a=!1)}a&&(c.splice(t--,1),e=s(s.s=n[0]))}return e}var a={},r={app:0},i={app:0},c=[];function o(e){return s.p+"js/"+({}[e]||e)+"."+{"chunk-716fb61c":"84a36d26","chunk-234aed0c":"9eb772b5","chunk-2d0cbefe":"8112a72c","chunk-32a68574":"6f5a9b82","chunk-055d8c90":"64f8a304","chunk-1dc1c444":"113adf3d","chunk-3af6ee7f":"dfe1a485","chunk-402ab08c":"949bfdb2","chunk-98e0c8cc":"cea7479c","chunk-efc64be2":"5d5761a8","chunk-a5bde65a":"fea4d04a","chunk-444d206f":"518cd8ff"}[e]+".js"}function s(t){if(a[t])return a[t].exports;var n=a[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,s),n.l=!0,n.exports}s.e=function(e){var t=[],n={"chunk-716fb61c":1,"chunk-234aed0c":1,"chunk-32a68574":1,"chunk-055d8c90":1,"chunk-1dc1c444":1,"chunk-402ab08c":1,"chunk-efc64be2":1,"chunk-a5bde65a":1,"chunk-444d206f":1};r[e]?t.push(r[e]):0!==r[e]&&n[e]&&t.push(r[e]=new Promise((function(t,n){for(var a="css/"+({}[e]||e)+"."+{"chunk-716fb61c":"ab43288b","chunk-234aed0c":"62cd23bf","chunk-2d0cbefe":"31d6cfe0","chunk-32a68574":"42871998","chunk-055d8c90":"4ec9a65d","chunk-1dc1c444":"d7d51460","chunk-3af6ee7f":"31d6cfe0","chunk-402ab08c":"d47fe89d","chunk-98e0c8cc":"31d6cfe0","chunk-efc64be2":"05cedd19","chunk-a5bde65a":"09316a61","chunk-444d206f":"a8b2af47"}[e]+".css",i=s.p+a,c=document.getElementsByTagName("link"),o=0;o<c.length;o++){var u=c[o],d=u.getAttribute("data-href")||u.getAttribute("href");if("stylesheet"===u.rel&&(d===a||d===i))return t()}var l=document.getElementsByTagName("style");for(o=0;o<l.length;o++){u=l[o],d=u.getAttribute("data-href");if(d===a||d===i)return t()}var h=document.createElement("link");h.rel="stylesheet",h.type="text/css",h.onload=t,h.onerror=function(t){var a=t&&t.target&&t.target.src||i,c=new Error("Loading CSS chunk "+e+" failed.\n("+a+")");c.code="CSS_CHUNK_LOAD_FAILED",c.request=a,delete r[e],h.parentNode.removeChild(h),n(c)},h.href=i;var f=document.getElementsByTagName("head")[0];f.appendChild(h)})).then((function(){r[e]=0})));var a=i[e];if(0!==a)if(a)t.push(a[2]);else{var c=new Promise((function(t,n){a=i[e]=[t,n]}));t.push(a[2]=c);var u,d=document.createElement("script");d.charset="utf-8",d.timeout=120,s.nc&&d.setAttribute("nonce",s.nc),d.src=o(e);var l=new Error;u=function(t){d.onerror=d.onload=null,clearTimeout(h);var n=i[e];if(0!==n){if(n){var a=t&&("load"===t.type?"missing":t.type),r=t&&t.target&&t.target.src;l.message="Loading chunk "+e+" failed.\n("+a+": "+r+")",l.name="ChunkLoadError",l.type=a,l.request=r,n[1](l)}i[e]=void 0}};var h=setTimeout((function(){u({type:"timeout",target:d})}),12e4);d.onerror=d.onload=u,document.head.appendChild(d)}return Promise.all(t)},s.m=e,s.c=a,s.d=function(e,t,n){s.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},s.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(s.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)s.d(n,a,function(t){return e[t]}.bind(null,a));return n},s.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/",s.oe=function(e){throw console.error(e),e};var u=window["webpackJsonp"]=window["webpackJsonp"]||[],d=u.push.bind(u);u.push=t,u=u.slice();for(var l=0;l<u.length;l++)t(u[l]);var h=d;c.push([0,"chunk-vendors"]),n()})({0:function(e,t,n){e.exports=n("56d7")},"034f":function(e,t,n){"use strict";var a=n("1356"),r=n.n(a);r.a},1:function(e,t){},1356:function(e,t,n){},"1a5d":function(e,t,n){var a={"./Camera.vue":["6ec0","chunk-716fb61c","chunk-234aed0c","chunk-32a68574","chunk-055d8c90"],"./CameraViewes/ContoursTab.vue":["5c73","chunk-716fb61c","chunk-234aed0c","chunk-efc64be2"],"./CameraViewes/InputTab.vue":["50ef","chunk-716fb61c","chunk-234aed0c","chunk-402ab08c"],"./CameraViewes/OutputTab.vue":["4c92","chunk-716fb61c","chunk-234aed0c","chunk-2d0cbefe"],"./CameraViewes/ThresholdTab.vue":["1a40","chunk-716fb61c","chunk-32a68574","chunk-a5bde65a"],"./Settings.vue":["26d3","chunk-716fb61c","chunk-234aed0c","chunk-32a68574","chunk-1dc1c444"],"./SettingsViewes/Cameras.vue":["0b81","chunk-716fb61c","chunk-234aed0c","chunk-98e0c8cc"],"./SettingsViewes/DriverMode.vue":["e5f2","chunk-716fb61c","chunk-234aed0c","chunk-32a68574","chunk-3af6ee7f"],"./SettingsViewes/General.vue":["13f2","chunk-716fb61c","chunk-444d206f"]};function r(e){if(!n.o(a,e))return Promise.resolve().then((function(){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}));var t=a[e],r=t[0];return Promise.all(t.slice(1).map(n.e)).then((function(){return n(r)}))}r.keys=function(){return Object.keys(a)},r.id="1a5d",e.exports=r},2:function(e,t){},"56d7":function(e,t,n){"use strict";n.r(t);var a=n("2b0e"),r=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("v-app",[a("v-app-bar",{attrs:{app:"",dense:"","clipped-left":"",dark:""}},[a("img",{staticClass:"imgClass",attrs:{src:n("cf05")}}),a("v-toolbar-title",{attrs:{id:"title"}},[e._v("Chameleon Vision")]),a("div",{staticClass:"flex-grow-1"}),a("v-toolbar-items",[a("v-tabs",{attrs:{dark:"",height:"48","slider-color":"#4baf62"}},[a("v-tab",{attrs:{to:"vision"}},[e._v("Vision")]),a("v-tab",{attrs:{to:"settings"}},[e._v("Settings")])],1)],1)],1),a("v-content",[a("v-container",{attrs:{fluid:"","fill-height":""}},[a("v-layout",[a("v-flex",[a("router-view",{on:{save:e.startTimer}}),a("v-snackbar",{attrs:{timeout:1e3,top:"",color:"#4baf62"},model:{value:e.saveSnackbar,callback:function(t){e.saveSnackbar=t},expression:"saveSnackbar"}},[a("div",{staticStyle:{"text-align":"center",width:"100%"}},[a("h4",[e._v("Saved All changes")])])])],1)],1)],1)],1)],1)},i=[],c={name:"App",components:{},methods:{handleMessage(e,t){if(this.$store.state.hasOwnProperty(e))this.$store.commit(e,t);else if(this.$store.state.pipeline.hasOwnProperty(e))this.$store.commit("setPipeValues",{[e]:t});else switch(e){default:console.log(e+" : "+t)}},saveSettings(){clearInterval(this.timer),this.saveSnackbar=!0,this.handleInput("command","save")},startTimer(){void 0!==this.timer&&clearInterval(this.timer),this.timer=setInterval(this.saveSettings,4e3)}},data:()=>({saveSnackbar:!1,timer:void 0}),created(){this.$options.sockets.onmessage=async e=>{try{var t=await e.data.arrayBuffer();let n=this.$msgPack.decode(t);for(let e in n)n.hasOwnProperty(e)&&this.handleMessage(e,n[e])}catch(n){console.error("error: "+e.data+" , "+n)}}}},o=c,s=(n("034f"),n("2877")),u=n("6544"),d=n.n(u),l=n("7496"),h=n("40dc"),f=n("a523"),p=n("a75b"),v=n("0e8f"),m=n("a722"),b=n("2db4"),k=n("71a3"),g=n("fe57"),y=n("2a7f"),w=Object(s["a"])(o,r,i,!1,null,null,null),S=w.exports;d()(w,{VApp:l["a"],VAppBar:h["a"],VContainer:f["a"],VContent:p["a"],VFlex:v["a"],VLayout:m["a"],VSnackbar:b["a"],VTab:k["a"],VTabs:g["a"],VToolbarItems:y["a"],VToolbarTitle:y["b"]});var x=n("8c4f");function C(e){return()=>n("1a5d")(`./${e}.vue`)}a["a"].use(x["a"]);var P=new x["a"]({base:"/",routes:[{path:"/",redirect:"/vision"},{path:"/vision",name:"Vision",component:C("Camera")},{path:"/settings",name:"Settings",component:C("Settings")}]}),V=n("2f62");a["a"].use(V["a"]);const L=e=>(t,n)=>{a["a"].set(t,e,n)};var T=new V["a"].Store({state:{settings:{teamNumber:1577,connectionType:0,ip:"",gateway:"",netmask:"",hostname:"Chameleon-vision"},pipeline:{exposure:0,brightness:0,orientation:0,hue:[0,15],saturation:[0,15],value:[0,25],erode:!1,dilate:!1,area:[0,12],ratio:[0,12],extent:[0,12],speckle:5,targetGrouping:0,targetIntersection:0,sortMode:0,isBinary:0,calibrationMode:0},driverMode:{isDriver:!1,driverExposure:0,driverBrightness:0},cameraSettings:{},resolutionList:[],port:1181,currentCameraIndex:0,currentPipelineIndex:0,cameraList:[],pipelineList:[],point:{}},mutations:{settings:L("settings"),pipeline:L("pipeline"),cameraSettings:L("cameraSettings"),resolutionList:L("resolutionList"),port:L("port"),currentCameraIndex:L("currentCameraIndex"),currentPipelineIndex:L("currentPipelineIndex"),cameraList:L("cameraList"),pipelineList:L("pipelineList"),point:L("point"),setPipeValues(e,t){for(let n in t)a["a"].set(e.pipeline,n,t[n])},driverMode:L("driverMode")},actions:{settings:e=>e.settings,pipeline:e=>e.pipeline,cameraSettings:e=>e.cameraSettings,resolutionList:e=>e.resolutionList,port:e=>e.port,currentCameraIndex:e=>e.currentCameraIndex,currentPipelineIndex:e=>e.currentPipelineIndex,cameraList:e=>e.cameraList,pipelineList:e=>e.pipelineList,point:e=>e.point,driverMode:e=>e.driverMode}}),O=(n("5363"),n("d1e7"),n("f309"));a["a"].use(O["a"]);var I=new O["a"]({icons:{}}),_=n("b408"),M=n.n(_),j=n("7d47"),E=n.n(j);a["a"].config.productionTip=!1,a["a"].use(M.a,"ws://"+location.hostname+":5800/websocket"),a["a"].prototype.$msgPack=E()(!0),a["a"].mixin({methods:{handleInput(e,t){let n=this.$msgPack.encode({[e]:t});this.$socket.send(n)}}}),new a["a"]({router:P,store:T,vuetify:I,render:e=>e(S)}).$mount("#app")},cf05:function(e,t,n){e.exports=n.p+"img/logo.e82307fd.png"}});
 //# sourceMappingURL=app.415345a3.js.map
\ No newline at end of file
diff --git a/chameleon-client/package-lock.json b/chameleon-client/package-lock.json
index 963d66adc..6864f47ab 100644
--- a/chameleon-client/package-lock.json
+++ b/chameleon-client/package-lock.json
@@ -1947,6 +1947,43 @@
       "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==",
       "dev": true
     },
+    "axios": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz",
+      "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
+      "requires": {
+        "follow-redirects": "1.5.10",
+        "is-buffer": "^2.0.2"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.5.10",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+          "requires": {
+            "debug": "=3.1.0"
+          }
+        },
+        "is-buffer": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
+          "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A=="
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -10957,6 +10994,11 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
       "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
     },
+    "vue-axios": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/vue-axios/-/vue-axios-2.1.5.tgz",
+      "integrity": "sha512-th5xVbInVoyIoe+qY+9GCflEVezxAvztD4xpFF39SRQYqpoKD2qkmX8yv08jJG9a2SgNOCjirjJGSwg/wTrbmA=="
+    },
     "vue-cli-plugin-vuetify": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-0.6.3.tgz",
@@ -13493,8 +13535,7 @@
             },
             "code-point-at": {
               "version": "1.1.0",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "concat-map": {
               "version": "0.0.1",
@@ -13503,8 +13544,7 @@
             },
             "console-control-strings": {
               "version": "1.1.0",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -13607,8 +13647,7 @@
             },
             "inherits": {
               "version": "2.0.3",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "ini": {
               "version": "1.3.5",
@@ -13618,7 +13657,6 @@
             "is-fullwidth-code-point": {
               "version": "1.0.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -13631,20 +13669,17 @@
             "minimatch": {
               "version": "3.0.4",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
             },
             "minimist": {
               "version": "0.0.8",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "minipass": {
               "version": "2.2.4",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.1",
                 "yallist": "^3.0.0"
@@ -13661,7 +13696,6 @@
             "mkdirp": {
               "version": "0.5.1",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -13734,8 +13768,7 @@
             },
             "number-is-nan": {
               "version": "1.0.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -13745,7 +13778,6 @@
             "once": {
               "version": "1.4.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -13851,7 +13883,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/chameleon-client/package.json b/chameleon-client/package.json
index 4761e12ba..44588b6e3 100644
--- a/chameleon-client/package.json
+++ b/chameleon-client/package.json
@@ -8,10 +8,12 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.19.0",
     "core-js": "^2.6.5",
     "material-design-icons-iconfont": "^5.0.1",
     "msgpack5": "^4.2.1",
     "vue": "^2.6.10",
+    "vue-axios": "^2.1.5",
     "vue-native-websocket": "^2.0.13",
     "vue-router": "^3.0.3",
     "vuetify": "^2.0.0",
diff --git a/chameleon-client/src/App.vue b/chameleon-client/src/App.vue
index 07c7953cb..fb105fc0a 100644
--- a/chameleon-client/src/App.vue
+++ b/chameleon-client/src/App.vue
@@ -61,7 +61,6 @@
             }
         },
         data: () => ({
-            saveSnackbar: false,
             timer: undefined
         }),
         created() {
@@ -78,6 +77,16 @@
                     console.error('error: ' + data.data + " , " + error);
                 }
             }
+        },
+        computed: {
+            saveSnackbar: {
+                get() {
+                    return this.$store.state.saveBar;
+                },
+                set(value) {
+                    this.$store.commit("saveBar", value);
+                }
+            }
         }
     };
 </script>
diff --git a/chameleon-client/src/main.js b/chameleon-client/src/main.js
index 86192f4ea..4eac4e078 100644
--- a/chameleon-client/src/main.js
+++ b/chameleon-client/src/main.js
@@ -5,11 +5,22 @@ import store from './store'
 import vuetify from './plugins/vuetify';
 import VueNativeSock from 'vue-native-websocket';
 import msgPack from 'msgpack5';
+import axios from 'axios';
+import VueAxios from "vue-axios";
 
 Vue.config.productionTip = false;
-// Vue.use(VueNativeSock,'ws://' + location.host + '/websocket',{format: 'json'});
-Vue.use(VueNativeSock, 'ws://' + location.hostname + ':8888/websocket');
+
+if (process.env.NODE_ENV === "production"){
+    Vue.prototype.$address = location.host;
+} else if (process.env.NODE_ENV === "development"){
+    Vue.prototype.$address = location.hostname + ":5800";
+}
+
+
+Vue.use(VueNativeSock, 'ws://' + Vue.prototype.$address + '/websocket');
+Vue.use(VueAxios, axios);
 Vue.prototype.$msgPack = msgPack(true);
+
 Vue.mixin({
     methods: {
         handleInput(key, value) {
diff --git a/chameleon-client/src/store.js b/chameleon-client/src/store.js
index c4353706b..6b44eb550 100644
--- a/chameleon-client/src/store.js
+++ b/chameleon-client/src/store.js
@@ -48,7 +48,8 @@ export default new Vuex.Store({
         currentPipelineIndex: 0,
         cameraList: [],
         pipelineList: [],
-        point: {}
+        point: {},
+        saveBar: false
     },
     mutations: {
         settings: set('settings'),
@@ -66,7 +67,8 @@ export default new Vuex.Store({
                 Vue.set(state.pipeline, i, obj[i]);
             }
         },
-        driverMode: set('driverMode')
+        driverMode: set('driverMode'),
+        saveBar: set("saveBar")
     },
     actions: {
         settings: state => state.settings,
@@ -79,6 +81,7 @@ export default new Vuex.Store({
         cameraList: state => state.cameraList,
         pipelineList: state => state.pipelineList,
         point: state => state.point,
-        driverMode: state => state.driverMode
+        driverMode: state => state.driverMode,
+        saveBar: state => state.saveBar
     }
 })
diff --git a/chameleon-client/src/views/SettingsViewes/Cameras.vue b/chameleon-client/src/views/SettingsViewes/Cameras.vue
index 926c69e50..f824660e3 100644
--- a/chameleon-client/src/views/SettingsViewes/Cameras.vue
+++ b/chameleon-client/src/views/SettingsViewes/Cameras.vue
@@ -3,7 +3,7 @@
         <CVselect name="Camera" :list="cameraList" v-model="currentCameraIndex"/>
         <CVselect name="Resolution" v-model="cameraSettings.resolution" :list="resolutionList"/>
         <CVselect name="Stream Resolution" v-model="cameraSettings.streamDivisor"
-                  :list="['1:1','1:2','1:4','1:6']"/>
+                  :list="streamResolutionList"/>
         <CVnumberinput name="Diagonal FOV" v-model="cameraSettings.fov"/>
         <v-btn style="margin-top:10px" small color="#4baf62" @click="sendCameraSettings">Save Camera Settings</v-btn>
     </div>
@@ -24,12 +24,18 @@
         },
         methods: {
             sendCameraSettings() {
-                this.handleInput('cameraSettings', this.cameraSettings);
+                const self = this;
+                this.axios.post("http://" + this.$address + "/api/settings/camera", this.cameraSettings).then(
+                    function (response) {
+                        if (response.status === 200){
+                            self.$store.state.saveBar = true;
+                        }
+                    }
+                )
             },
 
         },
         computed: {
-
             currentCameraIndex: {
                 get() {
                     return this.$store.state.currentCameraIndex;
@@ -48,7 +54,23 @@
             },
             resolutionList: {
                 get() {
-                    return this.$store.state.resolutionList;
+                    let tmp_list = [];
+                    for (let i of this.$store.state.resolutionList){
+                        tmp_list.push(`${i['width']} X ${i['height']} at ${i['fps']} FPS, ${i['pixelFormat']}`)
+                    }
+                    return tmp_list;
+                }
+            },
+            streamResolutionList:{
+                get(){
+                    let cam_res = this.$store.state.resolutionList[this.cameraSettings.resolution];
+                    let tmp_list = [];
+                    let x = 1;
+                    for (let i = 0; i < 4; i++){
+                        tmp_list.push(`${cam_res['width']/x} X ${cam_res['height']/x}`);
+                        x *= 2;
+                    }
+                    return tmp_list;
                 }
             },
             cameraSettings: {
diff --git a/chameleon-client/src/views/SettingsViewes/General.vue b/chameleon-client/src/views/SettingsViewes/General.vue
index 87b28c56e..fe655c19e 100644
--- a/chameleon-client/src/views/SettingsViewes/General.vue
+++ b/chameleon-client/src/views/SettingsViewes/General.vue
@@ -29,7 +29,14 @@
         },
         methods: {
             sendGeneralSettings() {
-                this.handleInput('generalSettings', this.settings);
+                const self = this;
+                this.axios.post("http://" + this.$address + "/api/settings/general", this.settings).then(
+                    function (response) {
+                        if (response.status === 200){
+                            self.$store.state.saveBar = true;
+                        }
+                    }
+                )
             }
         },
         computed: {