diff --git a/photon-client/README.md b/photon-client/README.md
index 36cff5a2e..60b36119d 100644
--- a/photon-client/README.md
+++ b/photon-client/README.md
@@ -1,8 +1,8 @@
-# Chameleon Client UI
+# PhotonVision Client UI
 
 ## Install Node.js
 
-Follow [this](https://nodejs.org/en/) link
+Follow [this](https://nodejs.org/en/) link.
 
 ## Project setup
 Run this one time, this command downloades the packages the UI uses and it might take a short while
@@ -12,7 +12,8 @@ npm install
 ```
 
 ### Compiles and hot-reloads for development
-Run this every developing session, this command auto-build the UI after every change your make
+Run this every development session, this command auto-builds the UI after every change you make
+
 ```
 npm run serve
 ```
@@ -33,4 +34,4 @@ npm run lint
 ```
 
 ### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+See Node.js' [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/photon-client/package-lock.json b/photon-client/package-lock.json
index c0d9ff9c3..f5f9bbaa8 100644
--- a/photon-client/package-lock.json
+++ b/photon-client/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "chameleon-client",
+  "name": "photon-client",
   "version": "3.0.0",
   "lockfileVersion": 1,
   "requires": true,
diff --git a/photon-client/package.json b/photon-client/package.json
index 0359cd017..3acef2efc 100644
--- a/photon-client/package.json
+++ b/photon-client/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "chameleon-client",
+  "name": "photon-client",
   "version": "3.0.0",
   "private": true,
   "scripts": {
diff --git a/photon-client/public/Roboto.css b/photon-client/public/Roboto.css
deleted file mode 100644
index 2f097ca52..000000000
--- a/photon-client/public/Roboto.css
+++ /dev/null
@@ -1,336 +0,0 @@
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 100;
-  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxFIzIFKw.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 100;
-  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxMIzIFKw.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 100;
-  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxEIzIFKw.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 100;
-  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxLIzIFKw.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 100;
-  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxHIzIFKw.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 100;
-  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxGIzIFKw.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 100;
-  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxIIzI.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fCRc4EsA.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fABc4EsA.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fCBc4EsA.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBxc4EsA.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fCxc4EsA.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fChc4EsA.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fCRc4EsA.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fABc4EsA.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fCBc4EsA.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBxc4EsA.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fCxc4EsA.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fChc4EsA.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 900;
-  src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfCRc4EsA.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 900;
-  src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfABc4EsA.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 900;
-  src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfCBc4EsA.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 900;
-  src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfBxc4EsA.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 900;
-  src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfCxc4EsA.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 900;
-  src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfChc4EsA.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 900;
-  src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfBBc4.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
diff --git a/photon-client/public/favicon.png b/photon-client/public/favicon.png
deleted file mode 100644
index ee155f3b3..000000000
Binary files a/photon-client/public/favicon.png and /dev/null differ
diff --git a/photon-client/public/index.html b/photon-client/public/index.html
index 320cfd559..4346bd5be 100644
--- a/photon-client/public/index.html
+++ b/photon-client/public/index.html
@@ -5,12 +5,16 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.png">
-    <title>Chameleon Vision</title>
-    <link rel="stylesheet" href="<%= BASE_URL %>Roboto.css">
+    <title>PhotonVision</title>
+    <style>
+      body {
+        font-family: "Lato", sans-serif;
+      }
+    </style>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but Chameleon Vision doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>We're sorry but PhotonVision doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
diff --git a/photon-client/src/App.vue b/photon-client/src/App.vue
index ff088e710..7c5cac9a4 100644
--- a/photon-client/src/App.vue
+++ b/photon-client/src/App.vue
@@ -4,22 +4,20 @@
       app
       dense
       clipped-left
+      color="#006492"
       dark
     >
       <img
         class="imgClass"
         src="./assets/logo.png"
       >
-      <v-toolbar-title id="title">
-        Chameleon Vision
-      </v-toolbar-title>
       <div class="flex-grow-1" />
       <v-toolbar-items>
         <v-tabs
-          background-color="#272727"
+          background-color="#006492"
           dark
           height="48"
-          slider-color="#4baf62"
+          slider-color="#ffd843"
         >
           <v-tab to="vision">
             Vision
@@ -42,7 +40,7 @@
               v-model="saveSnackbar"
               :timeout="1000"
               top
-              color="#4baf62"
+              color="#ffd843"
             >
               <div style="text-align: center;width: 100%;">
                 <h4>Saved All changes</h4>
@@ -153,10 +151,6 @@
 </script>
 
 <style>
-    html {
-        overflow-y: hidden !important;
-    }
-
     .imgClass {
         width: auto;
         height: 45px;
@@ -186,17 +180,17 @@
 
 
     ::-webkit-scrollbar-thumb {
-        background-color: #4baf62;
+        background-color: #ffd843;
         border-radius: 10px;
     }
 
     .container {
-        background-color: #212121;
+        background-color: #232c37;
         padding: 0 !important;
     }
 
     #title {
-        color: #4baf62;
+        color: #ffd843;
     }
 
     span {
diff --git a/photon-client/src/assets/logo.png b/photon-client/src/assets/logo.png
index 0e5825527..ba8fa5ee9 100644
Binary files a/photon-client/src/assets/logo.png and b/photon-client/src/assets/logo.png differ
diff --git a/photon-client/src/components/common/cv-radio.vue b/photon-client/src/components/common/cv-radio.vue
index b5b5ea074..a2e6bac7d 100644
--- a/photon-client/src/components/common/cv-radio.vue
+++ b/photon-client/src/components/common/cv-radio.vue
@@ -9,7 +9,7 @@
       <v-radio
         v-for="(name,index) in list"
         :key="index"
-        color="#4baf62"
+        color="#ffd843"
         :label="name"
         :value="index"
       />
diff --git a/photon-client/src/components/common/cv-range-slider.vue b/photon-client/src/components/common/cv-range-slider.vue
index 92c8197cf..563543ad5 100644
--- a/photon-client/src/components/common/cv-range-slider.vue
+++ b/photon-client/src/components/common/cv-range-slider.vue
@@ -15,7 +15,7 @@
           hide-details
           class="align-center"
           dark
-          color="#4baf62"
+          color="#ffd843"
           :step="step"
           @input="handleInput"
           @mousedown="$emit('rollback', localValue)"
diff --git a/photon-client/src/components/common/cv-select.vue b/photon-client/src/components/common/cv-select.vue
index 56bb545c4..da7e9d9ba 100644
--- a/photon-client/src/components/common/cv-select.vue
+++ b/photon-client/src/components/common/cv-select.vue
@@ -14,8 +14,8 @@
           item-text="name"
           item-value="index"
           dark
-          color="#4baf62"
-          item-color="green"
+          color="#fcf6de"
+          item-color="blue"
           :disabled="disabled"
           @change="$emit('rollback', localValue)"
         />
diff --git a/photon-client/src/components/common/cv-slider.vue b/photon-client/src/components/common/cv-slider.vue
index fb125cb0f..0a173ba69 100644
--- a/photon-client/src/components/common/cv-slider.vue
+++ b/photon-client/src/components/common/cv-slider.vue
@@ -15,7 +15,7 @@
           :max="max"
           :min="min"
           hide-details
-          color="#4baf62"
+          color="#ffd843"
           :step="step"
           @start="isClicked = true"
           @end="isClicked = false"
diff --git a/photon-client/src/components/common/cv-switch.vue b/photon-client/src/components/common/cv-switch.vue
index 6d777af8b..af49b328c 100644
--- a/photon-client/src/components/common/cv-switch.vue
+++ b/photon-client/src/components/common/cv-switch.vue
@@ -12,7 +12,7 @@
           v-model="localValue"
           dark
           :disabled="disabled"
-          color="#4baf62"
+          color="#ffd843"
           @change="$emit('rollback', localValue)"
         />
       </v-col>
diff --git a/photon-client/src/components/pipeline/CameraAndPipelineSelect.vue b/photon-client/src/components/pipeline/CameraAndPipelineSelect.vue
index 783b05c4f..7592e3729 100644
--- a/photon-client/src/components/pipeline/CameraAndPipelineSelect.vue
+++ b/photon-client/src/components/pipeline/CameraAndPipelineSelect.vue
@@ -128,7 +128,7 @@
       <v-btn
         style="position: absolute; top:5px;right: 0;"
         tile
-        color="#4baf62"
+        color="#ffd843"
         @click="handleInput('command','save')"
       >
         <v-icon>save</v-icon>
@@ -172,7 +172,7 @@
         <v-card-actions>
           <v-spacer />
           <v-btn
-            color="#4baf62"
+            color="#ffd843"
             @click="duplicatePipeline"
           >
             Duplicate
@@ -212,7 +212,7 @@
         <v-card-actions>
           <v-spacer />
           <v-btn
-            color="#4baf62"
+            color="#ffd843"
             :disabled="checkPipelineName !==''"
             @click="savePipelineNameChange"
           >
diff --git a/photon-client/src/components/pipeline/OutputTab/DualCalibration.vue b/photon-client/src/components/pipeline/OutputTab/DualCalibration.vue
index a5453e9fe..492baaa00 100644
--- a/photon-client/src/components/pipeline/OutputTab/DualCalibration.vue
+++ b/photon-client/src/components/pipeline/OutputTab/DualCalibration.vue
@@ -10,7 +10,7 @@
       >
         <v-btn
           small
-          color="#4baf62"
+          color="#ffd843"
           @click="takePointA"
         >
           Take Point A
@@ -22,7 +22,7 @@
       >
         <v-btn
           small
-          color="#4baf62"
+          color="#ffd843"
           @click="takePointB"
         >
           Take Point B
diff --git a/photon-client/src/components/pipeline/OutputTab/SingleCalibration.vue b/photon-client/src/components/pipeline/OutputTab/SingleCalibration.vue
index c5bb8adcc..ac20b4723 100644
--- a/photon-client/src/components/pipeline/OutputTab/SingleCalibration.vue
+++ b/photon-client/src/components/pipeline/OutputTab/SingleCalibration.vue
@@ -10,7 +10,7 @@
       >
         <v-btn
           small
-          color="#4baf62"
+          color="#ffd843"
           @click="takePoint"
         >
           Take Point
diff --git a/photon-client/src/store/modules/generalSettings.js b/photon-client/src/store/modules/generalSettings.js
index 49ab1e975..26ad25a3e 100644
--- a/photon-client/src/store/modules/generalSettings.js
+++ b/photon-client/src/store/modules/generalSettings.js
@@ -1,10 +1,10 @@
 export default {
     state:{
-        teamNumber: 1577,
+        teamNumber: 0,
         connectionType: 0,
         ip: "",
         gateway: "",
         netmask: "",
-        hostname: "chameleon-vision"
+        hostname: "photon-vision"
     }
 }
\ No newline at end of file
diff --git a/photon-client/src/views/PipelineView.vue b/photon-client/src/views/PipelineView.vue
index 3557080ac..ba4cb2b77 100644
--- a/photon-client/src/views/PipelineView.vue
+++ b/photon-client/src/views/PipelineView.vue
@@ -1,20 +1,23 @@
 <template>
   <div>
     <camera-and-pipeline-select />
-    <v-row>
+    <v-row no-gutters>
       <!-- vision tabs -->
       <v-col
-        cols="6"
-        class="colsClass"
+        cols="12"
+        sm="12"
+        md="7"
+        xl="6"
+        class="colsClass pr-8"
       >
         <v-tabs
           v-if="($store.getters.currentPipelineIndex + 1) !== 0"
           v-model="selectedTab"
           fixed-tabs
-          background-color="#212121"
+          background-color="#232c37"
           dark
           height="48"
-          slider-color="#4baf62"
+          slider-color="#ffd843"
         >
           <v-tab>Input</v-tab>
           <v-tab>Threshold</v-tab>
@@ -39,7 +42,10 @@
         </div>
       </v-col>
       <v-col
-        cols="6"
+        cols="12"
+        sm="12"
+        md="5"
+        xl="6"
         class="colsClass"
       >
         <div>
@@ -47,10 +53,10 @@
           <v-tabs
             v-if="($store.getters.currentPipelineIndex + 1) !== 0"
             v-model="isBinaryNumber"
-            background-color="#212121"
+            background-color="#232c37"
             dark
             height="48"
-            slider-color="#4baf62"
+            slider-color="#ffd843"
             centered
             style="padding-bottom:10px"
             @change="handleInput('isBinary',$store.getters.pipeline.isBinary)"
@@ -65,15 +71,16 @@
           <!-- camera image stream -->
           <div class="videoClass">
             <v-row align="center">
-              <cvImage
-                :address="$store.getters.streamAddress"
-                :scale="75"
-                @click="onImageClick"
-              />
-            </v-row>
-            <v-row justify="end">
-              <span style="margin-right: 45px">FPS:{{ parseFloat(fps).toFixed(2) }}</span>
+              <div style="position: relative; width: 100%; height: 100%;">
+                <cvImage
+                  :address="$store.getters.streamAddress"
+                  :scale="75"
+                  @click="onImageClick"
+                />
+                <span style=" position: absolute; top: 0.2%; left: 13%;">FPS:{{ parseFloat(fps).toFixed(2) }}</span>
+              </div>
             </v-row>
+
             <v-row align="center">
               <v-simple-table
                 style="text-align: center;background-color: transparent; display: block;margin: auto"
@@ -137,11 +144,11 @@
 <script>
     import CameraAndPipelineSelect from "../components/pipeline/CameraAndPipelineSelect";
     import cvImage from '../components/common/cv-image'
-    import InputTab from './PipelineViewes/InputTab'
-    import ThresholdTab from './PipelineViewes/ThresholdTab'
-    import ContoursTab from './PipelineViewes/ContoursTab'
-    import OutputTab from './PipelineViewes/OutputTab'
-    import pnpTab from './PipelineViewes/3D'
+    import InputTab from './PipelineViews/InputTab'
+    import ThresholdTab from './PipelineViews/ThresholdTab'
+    import ContoursTab from './PipelineViews/ContoursTab'
+    import OutputTab from './PipelineViews/OutputTab'
+    import pnpTab from './PipelineViews/3D'
 
     export default {
         name: 'CameraTab',
diff --git a/photon-client/src/views/PipelineViewes/3D.vue b/photon-client/src/views/PipelineViews/3D.vue
similarity index 99%
rename from photon-client/src/views/PipelineViewes/3D.vue
rename to photon-client/src/views/PipelineViews/3D.vue
index f5e9cb410..9a3cf582a 100644
--- a/photon-client/src/views/PipelineViewes/3D.vue
+++ b/photon-client/src/views/PipelineViews/3D.vue
@@ -54,7 +54,7 @@
           item-text="name"
           item-value="data"
           dark
-          color="#4baf62"
+          color="#ffd843"
           item-color="green"
         />
         <v-btn
diff --git a/photon-client/src/views/PipelineViewes/ContoursTab.vue b/photon-client/src/views/PipelineViews/ContoursTab.vue
similarity index 100%
rename from photon-client/src/views/PipelineViewes/ContoursTab.vue
rename to photon-client/src/views/PipelineViews/ContoursTab.vue
diff --git a/photon-client/src/views/PipelineViewes/InputTab.vue b/photon-client/src/views/PipelineViews/InputTab.vue
similarity index 100%
rename from photon-client/src/views/PipelineViewes/InputTab.vue
rename to photon-client/src/views/PipelineViews/InputTab.vue
diff --git a/photon-client/src/views/PipelineViewes/OutputTab.vue b/photon-client/src/views/PipelineViews/OutputTab.vue
similarity index 100%
rename from photon-client/src/views/PipelineViewes/OutputTab.vue
rename to photon-client/src/views/PipelineViews/OutputTab.vue
diff --git a/photon-client/src/views/PipelineViewes/ThresholdTab.vue b/photon-client/src/views/PipelineViews/ThresholdTab.vue
similarity index 86%
rename from photon-client/src/views/PipelineViewes/ThresholdTab.vue
rename to photon-client/src/views/PipelineViews/ThresholdTab.vue
index 3accb89ac..f40b32bec 100644
--- a/photon-client/src/views/PipelineViewes/ThresholdTab.vue
+++ b/photon-client/src/views/PipelineViews/ThresholdTab.vue
@@ -25,37 +25,39 @@
       @rollback="e => rollback('value',e)"
     />
     <v-divider
-      color="darkgray "
+      color="black"
       style="margin-top: 5px"
     />
-    <v-btn
-      style="margin: 20px;"
-      color="#4baf62"
-      small
-      @click="setFunction(1)"
-    >
-      <v-icon>colorize</v-icon>
-      Eye drop
-    </v-btn>
-    <v-btn
-      style="margin: 20px;"
-      color="#4baf62"
-      small
-      @click="setFunction(2)"
-    >
-      <v-icon>add</v-icon>
-      Expand Selection
-    </v-btn>
-    <v-btn
-      style="margin: 20px;"
-      color="#4baf62"
-      small
-      @click="setFunction(3)"
-    >
-      <v-icon>remove</v-icon>
-      Shrink Selection
-    </v-btn>
-    <v-divider color="darkgray " />
+    <v-row justify="center">
+      <v-btn
+        style="margin: 20px;"
+        color="#ffd843"
+        small
+        @click="setFunction(1)"
+      >
+        <v-icon>colorize</v-icon>
+        Eye drop
+      </v-btn>
+      <v-btn
+        style="margin: 20px;"
+        color="#ffd843"
+        small
+        @click="setFunction(2)"
+      >
+        <v-icon>add</v-icon>
+        Expand Selection
+      </v-btn>
+      <v-btn
+        style="margin: 20px;"
+        color="#ffd843"
+        small
+        @click="setFunction(3)"
+      >
+        <v-icon>remove</v-icon>
+        Shrink Selection
+      </v-btn>
+    </v-row>
+    <v-divider color="black" />
     <CVswitch
       v-model="value.erode"
       name="Erode"
diff --git a/photon-client/src/views/SettingsView.vue b/photon-client/src/views/SettingsView.vue
index 08b911f1a..d18094c29 100644
--- a/photon-client/src/views/SettingsView.vue
+++ b/photon-client/src/views/SettingsView.vue
@@ -7,11 +7,11 @@
       >
         <v-tabs
           v-model="selectedTab"
-          background-color="#212121"
+          background-color="#232c37"
           dark
           fixed-tabs
           height="50"
-          slider-color="#4baf62"
+          slider-color="#ffd843"
         >
           <v-tab to="">
             General
@@ -43,8 +43,8 @@
 </template>
 
 <script>
-    import General from './SettingsViewes/General'
-    import Cameras from './SettingsViewes/Cameras'
+    import General from './SettingsViews/General'
+    import Cameras from './SettingsViews/Cameras'
     import cvImage from '../components/common/cv-image'
 
 
diff --git a/photon-client/src/views/SettingsViewes/Cameras.vue b/photon-client/src/views/SettingsViews/Cameras.vue
similarity index 99%
rename from photon-client/src/views/SettingsViewes/Cameras.vue
rename to photon-client/src/views/SettingsViews/Cameras.vue
index 9aff7e6b1..d33820220 100644
--- a/photon-client/src/views/SettingsViewes/Cameras.vue
+++ b/photon-client/src/views/SettingsViews/Cameras.vue
@@ -21,7 +21,7 @@
       <v-btn
         style="margin-top:10px"
         small
-        color="#4baf62"
+        color="#ffd843"
         @click="sendCameraSettings"
       >
         Save Camera Settings
diff --git a/photon-client/src/views/SettingsViewes/General.vue b/photon-client/src/views/SettingsViews/General.vue
similarity index 99%
rename from photon-client/src/views/SettingsViewes/General.vue
rename to photon-client/src/views/SettingsViews/General.vue
index eb10776d4..cb128429b 100644
--- a/photon-client/src/views/SettingsViewes/General.vue
+++ b/photon-client/src/views/SettingsViews/General.vue
@@ -36,7 +36,7 @@
     <v-btn
       style="margin-top:10px"
       small
-      color="#4baf62"
+      color="#ffd843"
       @click="sendGeneralSettings"
     >
       Save General Settings