diff --git a/New client/chameleon-client/src/App.vue b/New client/chameleon-client/src/App.vue
index 531f9164d..734c266d8 100644
--- a/New client/chameleon-client/src/App.vue	
+++ b/New client/chameleon-client/src/App.vue	
@@ -1,26 +1,5 @@
 <template>
  <v-app>
-    <!-- <v-navigation-drawer app clipped dark width="200">
-      <v-list dense>
-        <v-list-item link to="Vision">
-          <v-list-item-action>
-            <v-icon>mdi-video</v-icon>
-          </v-list-item-action>
-          <v-list-item-content>
-            <v-list-item-title>Vision</v-list-item-title>
-          </v-list-item-content>
-        </v-list-item>
-        <v-list-item link to="Settings">
-          <v-list-item-action>
-            <v-icon>mdi-settings</v-icon>
-          </v-list-item-action>
-          <v-list-item-content>
-            <v-list-item-title>Settings</v-list-item-title>
-          </v-list-item-content>
-        </v-list-item>
-      </v-list>
-    </v-navigation-drawer> -->
-
     <v-app-bar app clipped-left dark>
       <img class="imgClass" src="./assets/logo.png">
       <v-toolbar-title id="title">Chameleon Vision</v-toolbar-title>
@@ -42,7 +21,7 @@
       </v-container>
     </v-content>
     <v-footer app dark>
-      <span>&copy; 2019 Chameleon Vision Project</span>
+      <span>&copy; 2019 Chameleon Vision</span>
     </v-footer>
   </v-app>
 </template>
@@ -66,7 +45,6 @@ export default {
   html{
     overflow-y: hidden !important;
   }
-  
   .imgClass{
     width: auto;
     height: 58px;
diff --git a/New client/chameleon-client/src/views/Camera.vue b/New client/chameleon-client/src/views/Camera.vue
index 30c5e032a..336d10b74 100644
--- a/New client/chameleon-client/src/views/Camera.vue	
+++ b/New client/chameleon-client/src/views/Camera.vue	
@@ -2,29 +2,50 @@
     <div>
         <v-row >
             <v-col cols="6" class="colsClass">
-                <v-tabs fixed-tabs background-color="#212121" dark height="50" slider-color="#4baf62">
-                    <v-tab to="">Input</v-tab>
-                    <v-tab to="">Threshold</v-tab>
-                    <v-tab to="">Contours</v-tab>
-                    <v-tab to="">Output</v-tab>
+                <v-tabs fixed-tabs background-color="#212121" dark height="50" slider-color="#4baf62" v-model="selectedTab">
+                    <v-tab>Input</v-tab>
+                    <v-tab>Threshold</v-tab>
+                    <v-tab>Contours</v-tab>
+                    <v-tab>Output</v-tab>
                 </v-tabs>
                 <div>
-                    
+                    <component :is="selectedComponent"></component>
                 </div>
             </v-col>
             <v-col cols="6">
-                <img class="videoClass" src="https://pbs.twimg.com/profile_images/846659478120366082/K-kZVvT8_400x400.jpg">
+                <div>
+                    <img class="videoClass" src="https://pbs.twimg.com/profile_images/846659478120366082/K-kZVvT8_400x400.jpg">
+                    <h5 id="Point">Yaw: 222 Pitch: 111 FPS: 15</h5>
+                </div>
             </v-col>
       </v-row>
     </div>
 </template>
 
 <script>
+import InputTab from './CameraViewes/InputTab'
     export default {
-        name: '',
+        name: 'CameraTab',
+        components:{
+            InputTab
+        },
         data() {
             return {
-                
+                selectedTab:0,
+            }
+        },
+        computed:{
+            selectedComponent(){
+                switch(this.selectedTab){
+                    case 0:
+                        return "InputTab";
+                    case 1:
+                        return "ThresholdTab";
+                    case 2:
+                        return "ContoursTab";
+                    case 3:
+                        return "OutputTab";
+                }
             }
         }
     }
@@ -40,4 +61,9 @@
         margin-right: auto;
         margin-left: auto;
     }
+    #Point{
+        padding-top: 5px;
+        text-align: center;
+        color: #f4f4f4;
+    }
 </style>
\ No newline at end of file
diff --git a/New client/chameleon-client/src/views/CameraViewes/ContoursTab.vue b/New client/chameleon-client/src/views/CameraViewes/ContoursTab.vue
new file mode 100644
index 000000000..9a609c3db
--- /dev/null
+++ b/New client/chameleon-client/src/views/CameraViewes/ContoursTab.vue	
@@ -0,0 +1,18 @@
+<template>
+    
+</template>
+
+<script>
+    export default {
+        name: '',
+        data() {
+            return {
+                
+            }
+        }
+    }
+</script>
+
+<style lang="" scoped>
+    
+</style>
\ No newline at end of file
diff --git a/New client/chameleon-client/src/views/CameraViewes/InputTab.vue b/New client/chameleon-client/src/views/CameraViewes/InputTab.vue
new file mode 100644
index 000000000..3a556a4de
--- /dev/null
+++ b/New client/chameleon-client/src/views/CameraViewes/InputTab.vue	
@@ -0,0 +1,18 @@
+<template>
+    <span>aaaaaaaaaaad</span>
+</template>
+
+<script>
+    export default {
+        name: 'Input',
+        data() {
+            return {
+                
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    
+</style>
\ No newline at end of file
diff --git a/New client/chameleon-client/src/views/CameraViewes/OutputTab.vue b/New client/chameleon-client/src/views/CameraViewes/OutputTab.vue
new file mode 100644
index 000000000..9a609c3db
--- /dev/null
+++ b/New client/chameleon-client/src/views/CameraViewes/OutputTab.vue	
@@ -0,0 +1,18 @@
+<template>
+    
+</template>
+
+<script>
+    export default {
+        name: '',
+        data() {
+            return {
+                
+            }
+        }
+    }
+</script>
+
+<style lang="" scoped>
+    
+</style>
\ No newline at end of file
diff --git a/New client/chameleon-client/src/views/CameraViewes/ThresholdTab.vue b/New client/chameleon-client/src/views/CameraViewes/ThresholdTab.vue
new file mode 100644
index 000000000..9a609c3db
--- /dev/null
+++ b/New client/chameleon-client/src/views/CameraViewes/ThresholdTab.vue	
@@ -0,0 +1,18 @@
+<template>
+    
+</template>
+
+<script>
+    export default {
+        name: '',
+        data() {
+            return {
+                
+            }
+        }
+    }
+</script>
+
+<style lang="" scoped>
+    
+</style>
\ No newline at end of file
diff --git a/New client/chameleon-client/src/views/Settings.vue b/New client/chameleon-client/src/views/Settings.vue
index 0046b2b49..2bda8f0ea 100644
--- a/New client/chameleon-client/src/views/Settings.vue	
+++ b/New client/chameleon-client/src/views/Settings.vue	
@@ -1,15 +1,19 @@
 <template>
     <div>
-        <v-tabs background-color="#212121" dark height="50" slider-color="#4baf62">
-            <v-tab to="">General</v-tab>
-            <v-tab to="">Cameras</v-tab>
-        </v-tabs>
+        <v-row >
+            <v-col cols="6" class="colsClass">
+                <v-tabs background-color="#212121" dark height="50" fixed-tabs slider-color="#4baf62">
+                    <v-tab to="">General</v-tab>
+                    <v-tab to="">Cameras</v-tab>
+                </v-tabs>
+            </v-col>
+      </v-row>
     </div>
 </template>
 
 <script>
     export default {
-        name: '',
+        name: 'SettingsTab',
         data() {
             return {