diff --git a/package-lock.json b/package-lock.json
index 62f5b61..0d9f539 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@tauri-apps/api": "^1.4.0",
         "vue": "^3.2.45",
+        "vue-flight-indicators": "^0.1.1",
         "vue-router": "^4.3.0"
       },
       "devDependencies": {
@@ -5932,9 +5933,9 @@
       }
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.5",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
-      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
       "dev": true,
       "funding": [
         {
@@ -7178,9 +7179,9 @@
       }
     },
     "node_modules/ip": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.8.tgz",
-      "integrity": "sha512-PuExPYUiu6qMBQb4l06ecm6T6ujzhmh+MeJcW9wa89PoAz5pvd4zPgN5WJV104mb6S2T1AwNIAaB70JNrLQWhg==",
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.9.tgz",
+      "integrity": "sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ==",
       "dev": true
     },
     "node_modules/ip-regex": {
@@ -14173,6 +14174,14 @@
         "node": ">=16.14"
       }
     },
+    "node_modules/vue-flight-indicators": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/vue-flight-indicators/-/vue-flight-indicators-0.1.1.tgz",
+      "integrity": "sha512-Qwu7IMl2/IRiB7mtyi5C/rt+ty4jJNkvsjCU8GiuFNp2NcYGaQlUhzQmIeQBbjgTBA/Tnh0sy+rQXjIp7rymeA==",
+      "peerDependencies": {
+        "vue": ">=2.0.0"
+      }
+    },
     "node_modules/vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -16518,9 +16527,9 @@
       "peer": true
     },
     "node_modules/webpack-dev-middleware": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.3.tgz",
-      "integrity": "sha512-hj5CYrY0bZLB+eTO+x/j67Pkrquiy7kWepMHmUMoPsmcUaeEnQJqFzHJOyxgWlq746/wUuA64p9ta34Kyb01pA==",
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz",
+      "integrity": "sha512-BVdTqhhs+0IfoeAf7EoH5WE+exCmqGerHfDM0IL096Px60Tq2Mn9MAbnaGUe6HiMa41KMCYF19gyzZmBcq/o4Q==",
       "dev": true,
       "peer": true,
       "dependencies": {
diff --git a/package.json b/package.json
index f9988c8..2904ad3 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "@tauri-apps/api": "^1.4.0",
     "vue": "^3.2.45",
+    "vue-flight-indicators": "^0.1.1",
     "vue-router": "^4.3.0"
   },
   "devDependencies": {
diff --git a/src/components/FlightComponents/Airspeed.vue b/src/components/FlightComponents/Airspeed.vue
new file mode 100644
index 0000000..cc222ed
--- /dev/null
+++ b/src/components/FlightComponents/Airspeed.vue
@@ -0,0 +1,33 @@
+<script>
+import {Airspeed} from  'vue-flight-indicators'
+
+export  default {
+	name:  'airspeed',
+    props: {
+        airspeed: { required: true, type: Number},
+    },  
+	components: {
+		Airspeed
+	}
+}
+</script>
+
+<template>
+	<div class="airspeed-div">
+		<Airspeed :size="200" :airspeed="airspeed"/>
+        <span style="font-size: 1.2em;"> Airspeed: {{ airspeed }} ft/s</span>
+	</div>
+</template>
+
+<style scoped>
+    .airspeed-div {
+        position: relative;
+        height: 100%;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        border: 1px solid black;
+    }
+
+</style>
\ No newline at end of file
diff --git a/src/components/FlightComponents/Altimeter.vue b/src/components/FlightComponents/Altimeter.vue
new file mode 100644
index 0000000..5a2e448
--- /dev/null
+++ b/src/components/FlightComponents/Altimeter.vue
@@ -0,0 +1,33 @@
+<script>
+import {Altimeter} from  'vue-flight-indicators'
+
+export  default {
+	name:  'altimeter',
+    props: {
+        altitude: { required: true, type: Number},
+    },  
+	components: {
+		Altimeter
+	}
+}
+</script>
+
+<template>
+	<div class="altimeter-div">
+		<Altimeter :size="200" :altitude="altitude"/>
+        <span style="font-size: 1.2em;"> Altitude: {{ altitude }} ft/s</span>
+	</div>
+</template>
+
+<style scoped>
+    .altimeter-div {
+        position: relative;
+        height: 100%;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        border: 1px solid black;
+    }
+
+</style>
\ No newline at end of file
diff --git a/src/components/FlightComponents/Altitude.vue b/src/components/FlightComponents/Altitude.vue
new file mode 100644
index 0000000..b32c11f
--- /dev/null
+++ b/src/components/FlightComponents/Altitude.vue
@@ -0,0 +1,34 @@
+<script>
+import {Attitude} from  'vue-flight-indicators'
+
+export  default {
+	name:  'altitude',
+    props: {
+        pitch: { required: true, type: Number},
+        roll: {required: true, type: Number},
+    },  
+	components: {
+		Attitude
+	}
+}
+</script>
+
+<template>
+	<div class="altitude-div">
+		<Attitude :size="200" :pitch="pitch" :roll="roll" />
+        <span style="font-size: 1.2em;"> Pitch: {{ pitch }} </span>
+        <span style="font-size: 1.2em;"> Roll: {{ roll }} </span>
+	</div>
+</template>
+
+<style scoped>
+    .altitude-div {
+        position: relative;
+        height: 100%;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        border: 1px solid black;
+    }
+</style>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index bb86d75..5db3436 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,5 +2,6 @@ import { createApp } from "vue";
 import "./styles.css";
 import App from "./App.vue";
 import router from "./router";
+import testDisplayComponents from "./testDisplayComponents.vue";
 
 createApp(App).use(router).mount("#app");
\ No newline at end of file
diff --git a/src/testDisplayComponents.vue b/src/testDisplayComponents.vue
index 75c4f9e..a61255e 100644
--- a/src/testDisplayComponents.vue
+++ b/src/testDisplayComponents.vue
@@ -1,12 +1,10 @@
-<!-- Using this to see how the Battery and Connection components look -->
+<!-- Using this to see how the our components look -->
 
 <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'
-
+import Coordinate from './components/VehicleStatus/Coordinate.vue';
+import Altitude from './components/FlightComponents/Altitude.vue';
+import Altimeter from './components/FlightComponents/Altimeter.vue';
+import Airspeed from './components/FlightComponents/Airspeed.vue';
 
 let testObject = {
         longitude: -177.9325790,
@@ -15,10 +13,19 @@ let testObject = {
 </script>
 
 <template>
-  <!-- <Status :batteryPct=48 :vehicleName="'ERU'" :vehicleStatus="'Offline'"/> -->
 
-  <Coordinate :coordinates="testObject"></Coordinate>
+  <div class="altitude-outer-div">
+    <Altitude :pitch=2 :roll=10></Altitude>
+  </div>
 
+  <div class="altimeter-outer-div">
+    <Altimeter :altitude=200></Altimeter>
+  </div>
+
+  <div class="altitude-outer-div">
+    <Airspeed :airspeed=100></Airspeed>
+  </div>
+  
 
 </template>
 
@@ -33,18 +40,14 @@ let testObject = {
   width: 200px;  */
 }
 
-.border_div_2 {
-  display: flex;
-  border: 0.4em solid black;
-  height: 180px;
-  width: 380px;
-  /* height: 100px;
-  width: 200px;  */
+.altitude-outer-div {
+  height: 50;
+  width: 10%;
 }
 
-.additional_battery_prop {
-  top: 4%;
-  margin-right: 2%;
+.altimeter-outer-div {
+  height: 50;
+  width: 10%;
 }
 
 </style>