diff --git a/src/assets/ERU.png b/src/assets/ERU.png
new file mode 100644
index 0000000..454167d
Binary files /dev/null and b/src/assets/ERU.png differ
diff --git a/src/assets/FRA.png b/src/assets/FRA.png
new file mode 100644
index 0000000..62775bb
Binary files /dev/null and b/src/assets/FRA.png differ
diff --git a/src/assets/MEA.png b/src/assets/MEA.png
new file mode 100644
index 0000000..a2a5f53
Binary files /dev/null and b/src/assets/MEA.png differ
diff --git a/src/assets/MRA.png b/src/assets/MRA.png
new file mode 100644
index 0000000..b98d6e2
Binary files /dev/null and b/src/assets/MRA.png differ
diff --git a/src/components/VehicleStatus/Battery.vue b/src/components/VehicleStatus/Battery.vue
index d85d569..bd6e2bf 100644
--- a/src/components/VehicleStatus/Battery.vue
+++ b/src/components/VehicleStatus/Battery.vue
@@ -106,7 +106,7 @@
     }
 
     #battery_progress {
-        background-color: rgb(116, 194, 92); 
+        background-color: rgb(83, 255, 83); 
         border-radius: 12%;
         height:100%;
         width: 100%; 
@@ -132,7 +132,7 @@
         height:100%;
     }
     .normalPercent {
-        background-color: rgb(116, 194, 92); 
+        background-color: rgb(87, 255, 87); 
         border-radius: 12%;
     }
 
diff --git a/src/components/VehicleStatus/Connection.vue b/src/components/VehicleStatus/Connection.vue
index 741c822..d8c2b45 100644
--- a/src/components/VehicleStatus/Connection.vue
+++ b/src/components/VehicleStatus/Connection.vue
@@ -13,7 +13,7 @@
             <div v-if="latency >= 40 || latency == 0" class="grayed_bar" style='height: 80%'></div>
             <div v-else class="bar" style='height: 80%'></div>
         </div>
-        <span class="connection_number">{{ latency }} ms</span>
+        <!-- <span class="connection_number">{{ latency }} ms</span> -->
     </div>
     
     </template>
diff --git a/src/components/VehicleStatus/Coordinate.vue b/src/components/VehicleStatus/Coordinate.vue
new file mode 100644
index 0000000..3a2efa2
--- /dev/null
+++ b/src/components/VehicleStatus/Coordinate.vue
@@ -0,0 +1,38 @@
+<template>
+    <div class="coordinate-container">
+        <div class="coordinate-div">Longitude: {{ coordinates.longitude }}</div>
+        <div class="coordinate-div">Latitude: {{ coordinates.latitude }}</div>
+    </div>
+</template>
+    
+<script lang="ts">
+    export default {
+        props: {
+            coordinates: { required: true, type: Object }
+        },
+        computed: {
+
+        }
+    };
+</script>
+    
+    
+<style scoped>
+    .coordinate-container {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        width: 75%;
+        /* border: 0.05em solid black; */
+    }
+
+    .coordinate-div {
+        position: relative;
+        padding: 1%;
+        font-size: 1.2em;
+        color: black;
+        width: 100%;
+    }
+
+
+</style> 
\ No newline at end of file
diff --git a/src/components/VehicleStatus/EmergencyStop.vue b/src/components/VehicleStatus/EmergencyStop.vue
new file mode 100644
index 0000000..1ebcae1
--- /dev/null
+++ b/src/components/VehicleStatus/EmergencyStop.vue
@@ -0,0 +1,44 @@
+<template>
+    <div class="emergency-stop-div">
+        <button class="emergency-button"> EMERGENCY STOP </button>
+    </div>
+    
+</template>
+    
+<script lang="ts">
+
+    export default {
+        data() {
+            return {};    
+        },
+        // props: {
+        // },
+        // computed: {
+        // }
+    };
+</script>
+    
+    
+<style scoped>
+    .emergency-stop-div {
+        position: relative;
+        display: flex;
+        height: 20%;
+        width: 70%;  
+        text-align: center;
+    }
+
+    .emergency-button {
+        position: relative;
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+        background-color: rgb(255, 57, 57);
+        font-size: 0.96em;
+        transition: background-color 0.20s;
+    } 
+
+    .emergency-button:hover {
+        background-color: rgb(192, 40, 40);
+    }
+</style> 
\ No newline at end of file
diff --git a/src/components/VehicleStatus/Open.vue b/src/components/VehicleStatus/Open.vue
new file mode 100644
index 0000000..07d7310
--- /dev/null
+++ b/src/components/VehicleStatus/Open.vue
@@ -0,0 +1,35 @@
+<template>
+    <button class="open-button">OPEN</button>
+</template>
+    
+<script lang="ts">
+
+    export default {
+        data() {
+            return {};    
+        },
+        // props: {
+        // },
+        // computed: {
+        // }
+    };
+</script>
+    
+    
+<style scoped>
+
+    .open-button {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        width: 30%;
+        height: 20%;
+        background-color: #011949;
+        font-size: 1em;
+        transition: background-color 0.20s;
+    } 
+
+    .open-button:hover {
+        background-color: #194398;
+    }
+</style> 
\ No newline at end of file
diff --git a/src/components/VehicleStatus/VehicleTitle.vue b/src/components/VehicleStatus/VehicleTitle.vue
new file mode 100644
index 0000000..3b67670
--- /dev/null
+++ b/src/components/VehicleStatus/VehicleTitle.vue
@@ -0,0 +1,55 @@
+<template>
+    <div class="vehicle-title-container">
+        <div class="vehicle-name-div"> 
+                {{ vehicleName }} 
+              <!--  <img src="../../assets/MEA.png" class="vehicle-icon"></img>--> 
+        </div>
+        <div class="vehicle-status-div">Status: {{ vehicleStatus }}</div>
+    </div>
+    
+    </template>
+    
+<script lang="ts">
+
+    export default {
+        props: {
+            vehicleName: { required: true, type: String },
+            vehicleStatus: { required: true, type: String },
+            vehicleIcon: { type: Object }
+        }
+    };
+</script>
+    
+    
+<style scoped>
+
+    .vehicle-title-container {
+        position: relative;
+        width: 100%;
+        padding-top: 8%;
+        padding-left: 6%;
+    }
+
+    /* .vehicle-name-div {
+        position: relative;
+        font-size: 2.3em;
+    } */
+
+    .vehicle-name-div {
+        position: relative;
+        display: flex;
+        font-size: 2.3em;
+    }
+
+    .vehicle-status-div {
+        position: relative;
+        font-size: 1.4em;  
+        margin-top: 5%;
+    }
+
+    .vehicle-icon {
+        position: relative;
+        width: 22%;
+    }
+
+</style> 
\ No newline at end of file
diff --git a/src/components/VehicleStatusComponent.vue b/src/components/VehicleStatusComponent.vue
new file mode 100644
index 0000000..da9f95d
--- /dev/null
+++ b/src/components/VehicleStatusComponent.vue
@@ -0,0 +1,161 @@
+<script lang="ts">
+    import Battery from './VehicleStatus/Battery.vue';
+    import Connection from './VehicleStatus/Connection.vue';
+    import VehicleTitle from './VehicleStatus/VehicleTitle.vue';
+    import EmergencyStop from './VehicleStatus/EmergencyStop.vue';
+    import Open from './VehicleStatus/Open.vue';
+    import Coordinate from './VehicleStatus/Coordinate.vue';
+
+    export default {
+        props: {
+            vehicleName: { required: true, type: String},
+            vehicleStatus: { required: true, type: String},
+            batteryPct: {required: true, type: Number},
+            latency: { required: true, type: Number },
+            coordinates: { required: true, type: Object }
+        },
+        components: {
+            VehicleTitle,
+            Battery,
+            Connection,
+            EmergencyStop,
+            Open,
+            Coordinate
+        },
+    };
+</script>
+
+<template>
+    <div class="status_container">
+
+        <!-- Left side of container (Name, Status, Battery, Connection)-->
+        <div class="left-container">
+            <VehicleTitle :vehicleName="vehicleName" :vehicleStatus="vehicleStatus"/>
+            <!-- <Battery :percentage = "batteryPct" :charging="false" class="adjust-battery"/> -->
+            <div class="battery-status-container">
+                <Battery :percentage = "batteryPct" :charging="false" class="adjust-battery"/>
+                <span style="margin-top: 4%; font-size: 1.4em;">{{ batteryPct }}%</span>
+            </div>
+            <!-- <Connection :latency="latency" class="adjust-connection"/>  -->
+            <div class="connection-status-container">
+                <Connection :latency="latency" class="adjust-connection"/> 
+                <div class="connection-status-specifics">
+                    <span style="font-size: 0.9em;">Connection: </span>
+                    <span style="font-size: 0.9em;">Last Packet: </span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Right side of container (Open button, Coordinates, Emergency Stop)-->
+        <div class="right-container">
+            <Open class="adjust-open-button"></Open>
+            <Coordinate :coordinates="coordinates" class="adjust-coordinates"></Coordinate>
+            <EmergencyStop class="adjust-emergency-button"/>
+        </div>
+    </div>
+</template>
+    
+    
+<style scoped>
+    .status_container {
+        display: flex;
+        position: relative;
+        height: 100%;
+
+        /* width: 25%;  */
+        width: 100%; 
+
+        border: 0.1em solid black;
+        background-color: white;
+        color: black;
+    }
+
+    .battery-status-container {
+        display: flex;
+        position: relative;
+        width: 100%; 
+        height: 20%;
+        gap: 6%;
+        margin-top: auto;
+    }
+
+    .connection-status-container {
+        display: flex;
+        position: relative;
+        width: 100%; 
+        height: 30%;
+        /* margin-bottom: 2%;  
+        margin-left: 10%;  */
+    }
+
+    .connection-status-specifics {
+        display: flex;
+        flex-direction: column;
+        padding-left: 5%;
+        padding-top: 5%;
+    }
+
+    .left-container {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        width: 37%;
+    }
+
+    .right-container {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        height: 100%;   
+        width: 63%; 
+    }
+
+/* --- These adjust the sizing and positions of the individual components --- */
+
+/* below is CSS adjustment for Battery component if it was by itself */
+    /* .adjust-battery {
+        height: 17%;
+        width: 36%;
+        margin-top: auto;
+        margin-left: 8%;
+    } */
+
+    .adjust-battery {
+        height: 84%;
+        width: 38%;
+        margin-left: 8%;
+    }
+
+/* below is CSS adjustment for the Connection component if it was by itself */
+    /* .adjust-connection {
+        height: 28%;
+        width: 26%; 
+        margin-top: 2%;
+        margin-bottom: 4%;  
+        margin-left: 10%; 
+    } */
+
+    .adjust-connection {
+        height: 90%;
+        width: 26%; 
+        padding-left: 10%;
+    }
+
+    .adjust-emergency-button {
+        margin-top: auto;
+        margin-bottom: 4%;  
+        margin-left: 20%;
+    }
+
+    .adjust-open-button {
+        margin-top: 4%;
+        margin-left: 60%;
+    }
+
+    .adjust-coordinates {
+        margin-top: 10%;
+        margin-left: 20%;   
+    }
+ 
+</style> 
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index c33641e..bb86d75 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,4 +3,4 @@ import "./styles.css";
 import App from "./App.vue";
 import router from "./router";
 
-createApp(App).use(router).mount("#app");
+createApp(App).use(router).mount("#app");
\ No newline at end of file
diff --git a/src/testDisplayComponents.vue b/src/testDisplayComponents.vue
index a2f96b9..75c4f9e 100644
--- a/src/testDisplayComponents.vue
+++ b/src/testDisplayComponents.vue
@@ -3,25 +3,22 @@
 <script setup>
 import Battery from './components/VehicleStatus/Battery.vue';
 import Connection from './components/VehicleStatus/Connection.vue';
+import Status from "./components/VehicleStatusComponent.vue";
+import yuh from "./components/VehicleStatus/VehicleTitle.vue"
+import Coordinate from './components/VehicleStatus/Coordinate.vue'
+
+
+let testObject = {
+        longitude: -177.9325790,
+        latitude: 33.9325790
+    }
 </script>
 
 <template>
-  <!-- <h2>Below is the Connection component</h2>
-  <div class="border_div">
-    <Connection :latency=100 />                    
-  </div> -->
+  <!-- <Status :batteryPct=48 :vehicleName="'ERU'" :vehicleStatus="'Offline'"/> -->
 
+  <Coordinate :coordinates="testObject"></Coordinate>
 
-  <!-- <h2>Below is the Battery component</h2>
-  <div class="border_div">
-    <Battery :percentage=12 :charging="false"/>    pass in the current percentage into percentage prop. charging is a boolean ! -->
-  <!-- </div> -->
-
-  <h2>Below is both in one div</h2>
-  <div class="border_div_2">
-    <Battery :percentage=12 :charging="false" class="additional_battery_prop"/>    
-    <Connection :latency=56 />                    
-  </div>
 
 </template>
 
diff --git a/src/views/testMapScreen.vue b/src/views/testMapScreen.vue
new file mode 100644
index 0000000..444b9cb
--- /dev/null
+++ b/src/views/testMapScreen.vue
@@ -0,0 +1,58 @@
+<!-- <script setup> -->
+<script setup>
+import Status from '../components/VehicleStatusComponent.vue';
+import NavBar from '../components/Navbar.vue';
+
+let testCoordinateObject = {
+        longitude: -177.9325790,
+        latitude: 33.9325790
+    }
+let testCoordinateObject2 = {
+    longitude: 40.748440,
+    latitude: -73.984559
+}
+
+</script>
+<template>
+  <NavBar></NavBar>
+  <div class="screen_div">
+    <!-- Map component will be placed below -->
+    <div class="map_div"></div>
+
+    <div class="status_rightside">
+        <Status :batteryPct=100 :latency=50 :coordinates="testCoordinateObject2" :vehicleName="'ERU'" :vehicleStatus="'In Use'"/>
+        <Status :batteryPct=48 :latency=30 :coordinates="testCoordinateObject" :vehicleName="'MEA'" :vehicleStatus="'Standby'"/>
+        <Status :batteryPct=0 :latency=97 :coordinates="testCoordinateObject2" :vehicleName="'MRA'" :vehicleStatus="'Offline'"/>
+        <Status :batteryPct=10 :latency=0 :coordinates="testCoordinateObject" :vehicleName="'FRA'" :vehicleStatus="'Offline'"/>
+
+    </div>
+  
+  </div>
+
+
+
+</template>
+
+<style scoped>
+
+.screen_div {
+    display: flex;
+    border: 0.003em solid black;
+    height: 88vh;
+    width: 99vw;
+}
+
+.status_rightside {
+    display: flex;
+    flex-direction: column;
+    border: 0.003em solid black;
+    height: 100%;
+    width: 23%;
+    margin-left: auto
+}
+
+.map_div {
+    background-color: pink;
+}
+
+</style>