diff --git a/package-lock.json b/package-lock.json
index 58d2a88..62f5b61 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "@tauri-apps/api": "^1.4.0",
-        "vue": "^3.2.45"
+        "vue": "^3.2.45",
+        "vue-router": "^4.3.0"
       },
       "devDependencies": {
         "@tauri-apps/cli": "^1.4.0",
@@ -2052,6 +2053,11 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.1",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.1.tgz",
+      "integrity": "sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA=="
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.4.18",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.18.tgz",
@@ -14297,6 +14303,20 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/vue-router": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.3.0.tgz",
+      "integrity": "sha512-dqUcs8tUeG+ssgWhcPbjHvazML16Oga5w34uCUmsk7i0BcnskoLGwjpa15fqMr2Fa5JgVBrdL2MEgqz6XZ/6IQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
diff --git a/src/App.vue b/src/App.vue
index ff6ccdd..9eb8283 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,26 +4,14 @@
 import Greet from "./components/Greet.vue";
 import Navbar from "./components/Navbar.vue";
 import Camera from "./components/Camera.vue";
+import { RouterView } from "vue-router";
 </script>
 
 <template>
   <div>
     <Navbar/>
   </div>
-  <div class="grid">
-    <div>
-      <Camera/>
-    </div>
-    <div>
-      <Camera/>
-    </div>
-    <div>
-      <Camera/>
-    </div>
-    <div>
-      <Camera/>
-    </div>
-  </div>
+  <RouterView/>
   <!-- <div class="container">
     <h1>Welcome to Tauri!</h1>
     <div class="row">
diff --git a/src/assets/lightning-icon-png-5.png b/src/assets/lightning-icon-png-5.png
new file mode 100644
index 0000000..1410412
Binary files /dev/null and b/src/assets/lightning-icon-png-5.png differ
diff --git a/src/components/Battery.vue b/src/components/Battery.vue
new file mode 100644
index 0000000..e226761
--- /dev/null
+++ b/src/components/Battery.vue
@@ -0,0 +1,141 @@
+<template>
+    <div class="outer_div">
+        <div class="battery_container">
+            <!-- <div :class="percentageCSS" :style="{ width: this.percentage + '%' }"></div> -->
+            <div :class="percentageCSS" :style="[percentage > 15 ? { width: percentage + '%' } : { width: '15%'}]"></div>
+        </div>
+        <div class="battery_widget"></div> 
+        <img class="lightingSymbol" :class="batteryStatus" src="..\assets\lightning-icon-png-5.png" >
+    </div>
+    
+</template>
+    
+<script lang="ts">
+
+    export default {
+        data() {
+            return {};    
+        },
+        props: {
+            percentage: { required: true, type: Number},
+            charging: { required: true, type: Boolean},
+        },
+        computed: {
+            percentageCSS() {
+                if (this.percentage <= 0) {
+                    return 'zeroPercent'
+                } else if ((this.percentage > 0) && (this.percentage <= 15)) {
+                    return 'tenPercent'
+                } else if ((this.percentage > 15) && (this.percentage <= 30)) {
+                    return 'twentyFivePercent'
+                } else if ((this.percentage > 30) && (this.percentage <= 50)) {
+                    return 'fiftyPercent'
+                } else {
+                    return 'normalPercent'
+                }
+            },
+            batteryStatus() {
+                if (this.charging == true) {
+                    return 'charging'
+                } else if (this.percentage <= 0) {
+                    return 'dead'
+                }
+            }
+        },
+    };
+</script>
+    
+    
+<style scoped>
+    .outer_div {
+        display: flex;
+        position: relative;
+        /* height: 110px;
+        width: 225px;     */
+        height: 12%;
+        width: 12%;  
+    }
+
+    .battery_widget {
+        position: relative;
+        height: 50%;
+        width: 10%;  
+        background-color:black; 
+        top: 30%;
+        left: 1%;
+        /* top: 30%; */
+        /* border-radius: 0 12px 12px 0; */
+        border-radius: 0 25% 25% 0;
+    }
+
+    /* .battery_icon {
+        position: absolute;
+        width: 40%;
+        left: 30%;
+        top: 15%;
+        animation: blinker 1s linear infinite;
+        visibility: hidden;
+    } */
+    .lightingSymbol {
+        position: absolute;
+        width: 40%;
+        left: 30%;
+        top: 15%;
+        visibility: hidden;
+    }
+    .dead {
+        visibility: visible;
+        animation: blinker 1s linear infinite;
+    }
+    .charging {
+        visibility: visible;
+    }
+
+    @keyframes blinker {
+        50% {
+            opacity: 0;
+        }
+    }   
+
+    .battery_container {
+        position: relative;
+        display: flex;
+        border: 0.1em solid black;
+        height: 100%;
+        width: 100%;
+        border-radius: 12%;
+        background-color: white;
+    }
+
+    #battery_progress {
+        background-color: rgb(116, 194, 92); 
+        border-radius: 12%;
+        height:100%;
+        width: 100%; 
+    }
+
+    .zeroPercent {
+        width: 0%;
+
+    }
+    .tenPercent {
+        background-color: red; 
+        border-radius: 12%;
+        height:100%;    
+    }
+    .twentyFivePercent {
+        background-color: rgb(116, 115, 109);
+        border-radius: 12%;
+        height:100%;
+    }
+    .fiftyPercent {
+        background-color: rgb(245, 225, 44); 
+        border-radius: 12%;
+        height:100%;
+    }
+    .normalPercent {
+        background-color: rgb(116, 194, 92); 
+        border-radius: 12%;
+    }
+
+</style> 
\ No newline at end of file
diff --git a/src/components/Camera.vue b/src/components/Camera.vue
index 6d3ef47..7fce0ee 100644
--- a/src/components/Camera.vue
+++ b/src/components/Camera.vue
@@ -1,57 +1,63 @@
   <script>
   export default {
+    props: ['cameraNumber'],
     data() {
       return {
-        
+        localIp: 'http://192.168.1.173', //maybe change accordingly
+        port: '5000', //maybe change accordingly
+        cameraUrls: { 
+          1: 'video_feed', //cam url here
+          2: 'video_feed2',
+
+        }
       };
     },
     mounted() {
-      this.initCam();
+      // this.initCam();
     },
     methods: {
-      async initCam() {
-        try {
-          const constraints = { video: true };
-          const stream = await navigator.mediaDevices.getUserMedia(constraints);
-          this.streams.push(stream);
-        } catch (error) {
-          console.error('Error accessing camera:', error);
-        }
+      // async initCam() {
+      //   try {
+      //     const constraints = { video: true };
+      //     const stream = await navigator.mediaDevices.getUserMedia(constraints);
+      //     this.streams.push(stream);
+      //   } catch (error) {
+      //     console.error('Error accessing camera:', error);
+      //   }
+      // },
+        getCameraImageUrl(cameraNumber) {
+          return `${this.localIp}:${this.port}/${this.cameraUrls[cameraNumber]}`;
       }
     }
   };
   </script>
   <template>
-    <!-- <div class="app">
-        <div class="video-section" v-for="(stream, index) in streams" :key="index">
-          <video ref="videoPlayer" :srcObject="stream" controls></video>
-      </div>
-    </div> -->
     <div class="box video-section">
-        <video ref="videoPlayer" :srcObject="stream" controls></video>
+        <img :src="getCameraImageUrl(cameraNumber)" class="video-image">
     </div>
   </template>
   <style scoped>
-  .app {
+  /* .app {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
-  }
+  } */
   
   .video-section {
-    width: 100%; /* Adjust according to your layout */
-    height: 100%; /* Adjust according to your layout */
+    width: 100%; 
+    height: 100%; 
     box-sizing: border-box;
-    border: 2px solid #ccc; /* Adding a small border */
+    border: 2px solid #ccc; 
   }
   
-  .video-section video {
+  .video-image {
     width: 100%;
     height: 100%;
+    /* object-fit: contain; */
   }
   .box{
-    border: 2px solid #030303; /* Adding a small border */
+    border: 2px solid #030303; 
   }
   </style>
   
\ No newline at end of file
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 1d896da..f198508 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -15,19 +15,22 @@ export default {
   }
 };
 </script>
+
 <template>
     <nav style="background-color: #011949; padding: 10px;">
       <div style="display: flex; align-items: center;">
-        <a href="#" style="text-decoration: none;">
+        <router-link to="/" style="text-decoration: none;">
           <img src="../assets/NGCP.svg" alt="" width="40" height="24">
           <span style="font-weight: bold; font-size: 1.2rem; margin-left: 10px;">NG</span>
           <span style="font-weight: bold; font-size: 1.2rem; color: white">CP</span>
-        </a>
+        </router-link>
         <div style="width: 12rem; height:4rem;border: 2px solid rgb(52, 49, 49); background-color: rgb(255, 255, 255); margin-left: auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;">
             <div>
                 <span style="font-weight: bold; font-size: 1.2rem; color: rgb(0, 0, 0);">Mission 1</span>
                 <button style="border: 2px solid rgb(0, 0, 0); margin-left: 1.2rem; color: rgb(0, 0, 0); padding: 3px 6px; font-size: 0.8rem;" type="button" @click="">
+                  <router-link to="/1" class="router-link">
                     <span style="font-weight: bold; font-size: 0.8rem;">OPEN</span>
+                  </router-link>
                 </button>
             </div>
             <div>
@@ -38,7 +41,9 @@ export default {
             <div>
                 <span style="font-weight: bold; font-size: 1.2rem; color: rgb(0, 0, 0);">Mission 2</span>
                 <button style="border: 2px solid rgb(0, 0, 0); margin-left: 1.2rem; color: rgb(0, 0, 0); padding: 3px 6px; font-size: 0.8rem;" type="button" @click="">
+                  <router-link to="/2" class="router-link">
                     <span style="font-weight: bold; font-size: 0.8rem;">OPEN</span>
+                  </router-link>
                 </button>
             </div>
             <div>
@@ -68,7 +73,7 @@ export default {
           <!-- Insert your menu items here -->
           <li><a href="#" style="text-decoration: none;">Home</a></li>
           <li><a href="#" style="text-decoration: none;">Link</a></li>
-          <li><a href="#" style="text-decoration: none;">Disabled</a></li>
+          <li><router-link to="/test" style="text-decoration: none;">Disabled</router-link></li>
         </ul>
       </div>
     </nav>
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 0000000..5b56169
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,22 @@
+import { createRouter, createWebHashHistory } from "vue-router"
+import fourCam from "../views/fourCam.vue";
+import Cam1Focus from "../views/Cam1Focus.vue";
+import Cam2Focus from "../views/Cam2Focus.vue";
+import test from "../views/test.vue";
+
+
+const routes = [
+  { path: '/', component: fourCam },
+  { path: '/1', component: Cam1Focus },
+  { path: '/2', component: Cam2Focus },
+  { path: '/test', component: test },
+]
+
+const router = createRouter({
+  // 4. Provide the history implementation to use. We
+  // are using the hash history for simplicity here.
+  history: createWebHashHistory(),
+  routes, // short for `routes: routes`
+})
+
+export default router
diff --git a/src/testDisplayComponents.vue b/src/testDisplayComponents.vue
new file mode 100644
index 0000000..943aa5d
--- /dev/null
+++ b/src/testDisplayComponents.vue
@@ -0,0 +1,31 @@
+<script setup>
+import Battery from './components/Battery.vue';
+
+</script>
+
+<template>
+  <h2>Below is the Connection component</h2>
+  <!-- <div class="bruh">
+    <Connection :latency=20 />
+  </div> -->
+
+
+  <h2>Below is the Battery component</h2>
+  <div class="border_div">
+    <Battery :percentage=10 :charging="false"/>
+  </div>
+
+</template>
+
+<style scoped>
+
+.border_div {
+  /* display: flex; */
+  border: 0.4em solid black;
+  height: 200px;
+  width: 400px;
+  /* height: 100px;
+  width: 200px;  */
+}
+
+</style>
diff --git a/src/views/Cam1Focus.vue b/src/views/Cam1Focus.vue
new file mode 100644
index 0000000..4535e1e
--- /dev/null
+++ b/src/views/Cam1Focus.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+
+import Camera from "../components/Camera.vue";
+</script>
+
+<template>
+    <div class="camera-container">
+        <Camera :cameraNumber="1" />
+    </div>
+</template>
+  
+<style scoped>
+.camera-container {
+    height: 90vh; /* Set the height of the container to 100% of the viewport height */
+    width: 75%;
+    display: flex; /* Use flexbox to align items vertically */
+    justify-content: center; /* Center the child element horizontally */
+    align-items: center; /* Center the child element vertically */
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Cam2Focus.vue b/src/views/Cam2Focus.vue
new file mode 100644
index 0000000..fd80919
--- /dev/null
+++ b/src/views/Cam2Focus.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+
+import Camera from "../components/Camera.vue";
+</script>
+
+<template>
+    <div class="camera-container">
+        <Camera :cameraNumber="2" />
+    </div>
+</template>
+  
+<style scoped>
+.camera-container {
+    height: 90vh; /* Set the height of the container to 100% of the viewport height */
+    width: 75%;
+    display: flex; /* Use flexbox to align items vertically */
+    justify-content: center; /* Center the child element horizontally */
+    align-items: center; /* Center the child element vertically */
+}
+</style>
\ No newline at end of file
diff --git a/src/views/fourCam.vue b/src/views/fourCam.vue
new file mode 100644
index 0000000..bf9d7c6
--- /dev/null
+++ b/src/views/fourCam.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+
+import Camera from "../components/Camera.vue";
+</script>
+
+<template>
+    <div class="grid">
+        <div>
+            <Camera :cameraNumber="1"/>
+        </div>
+        <div>
+            <Camera :cameraNumber="2"/>
+        </div>
+        <div>
+            <Camera :cameraNumber="2"/>
+        </div>
+        <div>
+            <Camera :cameraNumber="1"/>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/views/test.vue b/src/views/test.vue
new file mode 100644
index 0000000..df09912
--- /dev/null
+++ b/src/views/test.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+
+
+</script>
+
+<template>
+    <div class="grid">
+        <div>
+            <h1>
+                TESTESTES
+            </h1>
+        </div>
+    </div>
+</template>
\ No newline at end of file