diff --git a/photon-client/.eslintrc.json b/photon-client/.eslintrc.json
index 9396e813d0..3d22688745 100644
--- a/photon-client/.eslintrc.json
+++ b/photon-client/.eslintrc.json
@@ -2,7 +2,7 @@
   "root": true,
   "extends": [
     "eslint:recommended",
-    "plugin:vue/essential",
+    "plugin:vue/recommended",
     "@vue/eslint-config-typescript/recommended"
   ],
   "rules": {
diff --git a/photon-client/src/App.vue b/photon-client/src/App.vue
index 76ac107d2e..82dd1c5f36 100644
--- a/photon-client/src/App.vue
+++ b/photon-client/src/App.vue
@@ -49,22 +49,22 @@ useStateStore().$patch({ websocket: websocket });
 
 <template>
   <v-app>
-    <photon-sidebar/>
+    <photon-sidebar />
     <v-main>
       <v-container
-          fluid
-          fill-height
+        fluid
+        fill-height
       >
         <v-layout>
           <v-flex>
-            <router-view/>
+            <router-view />
           </v-flex>
         </v-layout>
       </v-container>
     </v-main>
 
-    <photon-log-view/>
-    <photon-error-snackbar/>
+    <photon-log-view />
+    <photon-error-snackbar />
   </v-app>
 </template>
 
diff --git a/photon-client/src/components/app/photon-3d-visualizer.vue b/photon-client/src/components/app/photon-3d-visualizer.vue
index de3c7de3c9..080543c589 100644
--- a/photon-client/src/components/app/photon-3d-visualizer.vue
+++ b/photon-client/src/components/app/photon-3d-visualizer.vue
@@ -175,9 +175,15 @@ const resetCamThirdPerson = () => {
 </script>
 
 <template>
-  <div style="width: 100%" id="container">
+  <div
+    id="container"
+    style="width: 100%"
+  >
     <v-row>
-      <v-col align-self="stretch" style="display: flex; justify-content: center">
+      <v-col
+        align-self="stretch"
+        style="display: flex; justify-content: center"
+      >
         <canvas
           id="view"
         />
@@ -186,16 +192,16 @@ const resetCamThirdPerson = () => {
     <v-row style="margin-bottom: 24px">
       <v-col style="display: flex; justify-content: center">
         <v-btn
-            color="secondary"
-            @click="resetCamFirstPerson"
+          color="secondary"
+          @click="resetCamFirstPerson"
         >
           First Person
         </v-btn>
       </v-col>
       <v-col style="display: flex; justify-content: center">
         <v-btn
-            color="secondary"
-            @click="resetCamThirdPerson"
+          color="secondary"
+          @click="resetCamThirdPerson"
         >
           Third Person
         </v-btn>
diff --git a/photon-client/src/components/app/photon-camera-stream.vue b/photon-client/src/components/app/photon-camera-stream.vue
index 4683288c0f..ba2da2752e 100644
--- a/photon-client/src/components/app/photon-camera-stream.vue
+++ b/photon-client/src/components/app/photon-camera-stream.vue
@@ -41,11 +41,11 @@ const handleClick = () => {
 
 <template>
   <img
-      :id="id"
-      crossorigin="anonymous"
-      :src="src"
-      :alt="alt"
-      :style="style"
-      @click="handleClick"
-  />
+    :id="id"
+    crossorigin="anonymous"
+    :src="src"
+    :alt="alt"
+    :style="style"
+    @click="handleClick"
+  >
 </template>
diff --git a/photon-client/src/components/app/photon-error-snackbar.vue b/photon-client/src/components/app/photon-error-snackbar.vue
index 6cc42392b2..950f49b229 100644
--- a/photon-client/src/components/app/photon-error-snackbar.vue
+++ b/photon-client/src/components/app/photon-error-snackbar.vue
@@ -4,10 +4,10 @@ import { useStateStore } from "@/stores/StateStore";
 
 <template>
   <v-snackbar
-      v-model="useStateStore().snackbarData.show"
-      top
-      :color="useStateStore().snackbarData.color"
-      :timeout="useStateStore().snackbarData.timeout"
+    v-model="useStateStore().snackbarData.show"
+    top
+    :color="useStateStore().snackbarData.color"
+    :timeout="useStateStore().snackbarData.timeout"
   >
     <p style="padding: 0; margin: 0; text-align: center">
       {{ useStateStore().snackbarData.message }}
diff --git a/photon-client/src/components/app/photon-log-view.vue b/photon-client/src/components/app/photon-log-view.vue
index 41f05ff4e1..39710939b0 100644
--- a/photon-client/src/components/app/photon-log-view.vue
+++ b/photon-client/src/components/app/photon-log-view.vue
@@ -48,18 +48,18 @@ document.addEventListener("keydown", e => {
     dark
   >
     <v-card
-        dark
-        class="pt-3"
-        color="primary"
-        flat
+      dark
+      class="pt-3"
+      color="primary"
+      flat
     >
       <v-card-title>
         View Program Logs
         <v-btn
-            color="secondary"
-            style="margin-left: auto;"
-            depressed
-            @click="handleLogExport"
+          color="secondary"
+          style="margin-left: auto;"
+          depressed
+          @click="handleLogExport"
         >
           <v-icon left>
             mdi-download
@@ -68,41 +68,44 @@ document.addEventListener("keydown", e => {
 
           <!-- Special hidden link that gets 'clicked' when the user exports journalctl logs -->
           <a
-              ref="exportLogFile"
-              style="color: black; text-decoration: none; display: none"
-              :href="`http://${backendAddress}/api/utils/photonvision-journalctl.txt`"
-              download="photonvision-journalctl.txt"
-              target="_blank"
+            ref="exportLogFile"
+            style="color: black; text-decoration: none; display: none"
+            :href="`http://${backendAddress}/api/utils/photonvision-journalctl.txt`"
+            download="photonvision-journalctl.txt"
+            target="_blank"
           />
         </v-btn>
       </v-card-title>
 
       <div class="pr-6 pl-6">
         <v-btn-toggle
-            v-model="selectedLogLevels"
-            dark
-            multiple
-            class="fill mb-4"
+          v-model="selectedLogLevels"
+          dark
+          multiple
+          class="fill mb-4"
         >
           <v-btn
-              v-for="(level) in [0, 1, 2, 3]"
-              :key="level"
-              color="secondary"
-              class="fill"
+            v-for="(level) in [0, 1, 2, 3]"
+            :key="level"
+            color="secondary"
+            class="fill"
           >
             {{ getLogLevelFromIndex(level) }}
           </v-btn>
         </v-btn-toggle>
-        <v-card-text style="font-size: 18px; font-weight: 600" v-if="logs.length === 0">
+        <v-card-text
+          v-if="logs.length === 0"
+          style="font-size: 18px; font-weight: 600"
+        >
           There are no Logs to show
         </v-card-text>
         <v-virtual-scroll
-            v-else
-            :items="logs"
-            item-height="50"
-            height="600"
+          v-else
+          :items="logs"
+          item-height="50"
+          height="600"
         >
-          <template v-slot="{item}">
+          <template #default="{item}">
             <div :class="[getLogColor(item.level) + '--text', 'log-item']">
               {{ item.message }}
             </div>
@@ -115,9 +118,9 @@ document.addEventListener("keydown", e => {
       <v-card-actions>
         <v-spacer />
         <v-btn
-            color="white"
-            text
-            @click="() => useStateStore().showLogModal = false"
+          color="white"
+          text
+          @click="() => useStateStore().showLogModal = false"
         >
           Close
         </v-btn>
diff --git a/photon-client/src/components/app/photon-sidebar.vue b/photon-client/src/components/app/photon-sidebar.vue
index 719f107093..f2f979db0f 100644
--- a/photon-client/src/components/app/photon-sidebar.vue
+++ b/photon-client/src/components/app/photon-sidebar.vue
@@ -14,37 +14,37 @@ const mdAndUp = computed<boolean>(() => getCurrentInstance()?.proxy.$vuetify.bre
 
 <template>
   <v-navigation-drawer
-      dark
-      app
-      permanent
-      :mini-variant="compact"
-      color="primary"
+    dark
+    app
+    permanent
+    :mini-variant="compact"
+    color="primary"
   >
     <v-list>
       <!-- List item for the heading; note that there are some tricks in setting padding and image width make things look right -->
       <v-list-item
-          :class="compact ? 'pr-0 pl-0' : ''"
-          style="display: flex; justify-content: center"
+        :class="compact ? 'pr-0 pl-0' : ''"
+        style="display: flex; justify-content: center"
       >
         <v-list-item-icon class="mr-0">
           <img
-              v-if="!compact"
-              class="logo"
-              src="@/assets/images/logoLarge.svg"
-              alt="large logo"
+            v-if="!compact"
+            class="logo"
+            src="@/assets/images/logoLarge.svg"
+            alt="large logo"
           >
           <img
-              v-else
-              class="logo"
-              src="@/assets/images/logoSmall.svg"
-              alt="small logo"
+            v-else
+            class="logo"
+            src="@/assets/images/logoSmall.svg"
+            alt="small logo"
           >
         </v-list-item-icon>
       </v-list-item>
 
       <v-list-item
-          link
-          to="/dashboard"
+        link
+        to="/dashboard"
       >
         <v-list-item-icon>
           <v-icon>mdi-view-dashboard</v-icon>
@@ -54,9 +54,9 @@ const mdAndUp = computed<boolean>(() => getCurrentInstance()?.proxy.$vuetify.bre
         </v-list-item-content>
       </v-list-item>
       <v-list-item
-          ref="camerasTabOpener"
-          link
-          to="/cameras"
+        ref="camerasTabOpener"
+        link
+        to="/cameras"
       >
         <v-list-item-icon>
           <v-icon>mdi-camera</v-icon>
@@ -66,8 +66,8 @@ const mdAndUp = computed<boolean>(() => getCurrentInstance()?.proxy.$vuetify.bre
         </v-list-item-content>
       </v-list-item>
       <v-list-item
-          link
-          to="/settings"
+        link
+        to="/settings"
       >
         <v-list-item-icon>
           <v-icon>mdi-cog</v-icon>
@@ -77,8 +77,8 @@ const mdAndUp = computed<boolean>(() => getCurrentInstance()?.proxy.$vuetify.bre
         </v-list-item-content>
       </v-list-item>
       <v-list-item
-          link
-          to="/docs"
+        link
+        to="/docs"
       >
         <v-list-item-icon>
           <v-icon>mdi-bookshelf</v-icon>
@@ -88,9 +88,9 @@ const mdAndUp = computed<boolean>(() => getCurrentInstance()?.proxy.$vuetify.bre
         </v-list-item-content>
       </v-list-item>
       <v-list-item
-          v-if="mdAndUp"
-          link
-          @click="() => compact = !compact"
+        v-if="mdAndUp"
+        link
+        @click="() => compact = !compact"
       >
         <v-list-item-icon>
           <v-icon v-if="compact">
@@ -115,35 +115,35 @@ const mdAndUp = computed<boolean>(() => getCurrentInstance()?.proxy.$vuetify.bre
               mdi-robot
             </v-icon>
             <v-icon
-                v-else
-                style="border-radius: 100%"
+              v-else
+              style="border-radius: 100%"
             >
               mdi-robot-off
             </v-icon>
           </v-list-item-icon>
           <v-list-item-content>
             <v-list-item-title
-                v-if="useSettingsStore().network.runNTServer"
-                class="text-wrap"
+              v-if="useSettingsStore().network.runNTServer"
+              class="text-wrap"
             >
               NetworkTables server running for <span class="accent--text">{{ useStateStore().ntConnectionStatus.clients }}</span> clients
             </v-list-item-title>
             <v-list-item-title
-                v-else-if="useStateStore().ntConnectionStatus.connected && useStateStore().backendConnected"
-                class="text-wrap"
-                style="flex-direction: column; display: flex"
+              v-else-if="useStateStore().ntConnectionStatus.connected && useStateStore().backendConnected"
+              class="text-wrap"
+              style="flex-direction: column; display: flex"
             >
               NetworkTables Server Connected!
               <span
-                  class="accent--text"
+                class="accent--text"
               >
-                  {{ useStateStore().ntConnectionStatus.address }}
-                </span>
+                {{ useStateStore().ntConnectionStatus.address }}
+              </span>
             </v-list-item-title>
             <v-list-item-title
-                v-else
-                class="text-wrap"
-                style="flex-direction: column; display: flex"
+              v-else
+              class="text-wrap"
+              style="flex-direction: column; display: flex"
             >
               Not connected to NetworkTables Server!
             </v-list-item-title>
@@ -156,8 +156,8 @@ const mdAndUp = computed<boolean>(() => getCurrentInstance()?.proxy.$vuetify.bre
               mdi-server-network
             </v-icon>
             <v-icon
-                v-else
-                style="border-radius: 100%;"
+              v-else
+              style="border-radius: 100%;"
             >
               mdi-server-network-off
             </v-icon>
diff --git a/photon-client/src/components/cameras/CalibrationCard.vue b/photon-client/src/components/cameras/CalibrationCard.vue
index 65ad44d39a..67a5cde008 100644
--- a/photon-client/src/components/cameras/CalibrationCard.vue
+++ b/photon-client/src/components/cameras/CalibrationCard.vue
@@ -170,84 +170,84 @@ const endCalibration = () => {
 <template>
   <div>
     <v-card
-        class="pr-6 pb-3"
-        color="primary"
-        dark
+      class="pr-6 pb-3"
+      color="primary"
+      dark
     >
       <v-card-title>Camera Calibration</v-card-title>
       <div class="ml-5">
         <v-row>
           <v-col
-              cols="12"
-              md="6"
+            cols="12"
+            md="6"
           >
             <v-form
-                ref="form"
-                v-model="settingsValid"
+              ref="form"
+              v-model="settingsValid"
             >
               <cv-select
-                  v-model="useCameraSettingsStore().currentPipelineSettings.cameraVideoModeIndex"
-                  label="Resolution"
-                  :select-cols="7"
-                  :disabled="isCalibrating"
-                  tooltip="Resolution to calibrate at (you will have to calibrate every resolution you use 3D mode on)"
-                  :items="useCameraSettingsStore().currentCameraSettings.validVideoFormats.map(f => `${f.resolution.width} X ${f.resolution.height}`)"
-                  @input="v => useCameraSettingsStore().changeCurrentPipelineSetting({cameraVideoModeIndex: v}, false)"
+                v-model="useCameraSettingsStore().currentPipelineSettings.cameraVideoModeIndex"
+                label="Resolution"
+                :select-cols="7"
+                :disabled="isCalibrating"
+                tooltip="Resolution to calibrate at (you will have to calibrate every resolution you use 3D mode on)"
+                :items="useCameraSettingsStore().currentCameraSettings.validVideoFormats.map(f => `${f.resolution.width} X ${f.resolution.height}`)"
+                @input="v => useCameraSettingsStore().changeCurrentPipelineSetting({cameraVideoModeIndex: v}, false)"
               />
               <cv-select
-                  v-model="useCameraSettingsStore().currentPipelineSettings.streamingFrameDivisor"
-                  label="Decimation"
-                  tooltip="Resolution to which camera frames are downscaled for detection. Calibration still uses full-res"
-                  :items="calibrationDivisors"
-                  :select-cols="7"
-                  @input="v => useCameraSettingsStore().changeCurrentPipelineSetting({streamingFrameDivisor: v}, false)"
+                v-model="useCameraSettingsStore().currentPipelineSettings.streamingFrameDivisor"
+                label="Decimation"
+                tooltip="Resolution to which camera frames are downscaled for detection. Calibration still uses full-res"
+                :items="calibrationDivisors"
+                :select-cols="7"
+                @input="v => useCameraSettingsStore().changeCurrentPipelineSetting({streamingFrameDivisor: v}, false)"
               />
               <cv-select
-                  v-model="boardType"
-                  label="Board Type"
-                  tooltip="Calibration board pattern to use"
-                  :select-cols="7"
-                  :items="['Chessboard', 'Dotboard']"
-                  :disabled="isCalibrating"
+                v-model="boardType"
+                label="Board Type"
+                tooltip="Calibration board pattern to use"
+                :select-cols="7"
+                :items="['Chessboard', 'Dotboard']"
+                :disabled="isCalibrating"
               />
               <cv-number-input
-                  v-model="squareSizeIn"
-                  label="Pattern Spacing (in)"
-                  tooltip="Spacing between pattern features in inches"
-                  :disabled="isCalibrating"
-                  :rules="[v => (v > 0) || 'Size must be positive']"
-                  :label-cols="7"
+                v-model="squareSizeIn"
+                label="Pattern Spacing (in)"
+                tooltip="Spacing between pattern features in inches"
+                :disabled="isCalibrating"
+                :rules="[v => (v > 0) || 'Size must be positive']"
+                :label-cols="7"
               />
               <cv-number-input
-                  v-model="patternWidth"
-                  label="Board Width (in)"
-                  tooltip="Width of the board in dots or chessboard squares"
-                  :disabled="isCalibrating"
-                  :rules="[v => (v >= 4) || 'Width must be at least 4']"
-                  :label-cols="7"
+                v-model="patternWidth"
+                label="Board Width (in)"
+                tooltip="Width of the board in dots or chessboard squares"
+                :disabled="isCalibrating"
+                :rules="[v => (v >= 4) || 'Width must be at least 4']"
+                :label-cols="7"
               />
               <cv-number-input
-                  v-model="patternHeight"
-                  label="Board Height (in)"
-                  tooltip="Height of the board in dots or chessboard squares"
-                  :disabled="isCalibrating"
-                  :rules="[v => (v >= 4) || 'Height must be at least 4']"
-                  :label-cols="7"
+                v-model="patternHeight"
+                label="Board Height (in)"
+                tooltip="Height of the board in dots or chessboard squares"
+                :disabled="isCalibrating"
+                :rules="[v => (v >= 4) || 'Height must be at least 4']"
+                :label-cols="7"
               />
             </v-form>
           </v-col>
           <v-col
-              cols="12"
-              md="6"
+            cols="12"
+            md="6"
           >
             <v-row
-                align="start"
-                class="pb-4"
+              align="start"
+              class="pb-4"
             >
               <v-simple-table
-                  fixed-header
-                  height="100%"
-                  dense
+                fixed-header
+                height="100%"
+                dense
               >
                 <thead>
                   <tr>
@@ -260,7 +260,7 @@ const endCalibration = () => {
                     <th>
                       Standard Deviation
                     </th>
-                    <th >
+                    <th>
                       Horizontal FOV
                     </th>
                     <th>
@@ -272,25 +272,25 @@ const endCalibration = () => {
                   </tr>
                 </thead>
                 <tbody>
-                <tr
-                  v-for="(value, index) in useCameraSettingsStore().currentCameraSettings.validVideoFormats"
-                  :key="index"
-                >
-                  <td>{{value.resolution.width}} X {{value.resolution.height}}</td>
-                  <td>{{value.mean !== undefined ? value.mean.toFixed(2) + "px" : "-"}}</td>
-                  <td>{{value.standardDeviation !== undefined ? value.standardDeviation.toFixed(2) + "px" : "-"}}</td>
-                  <td>{{value.horizontalFOV !== undefined ? value.horizontalFOV.toFixed(2) + "°" : "-"}}</td>
-                  <td>{{value.verticalFOV !== undefined ? value.verticalFOV.toFixed(2) + "°" : "-"}}</td>
-                  <td>{{value.diagonalFOV !== undefined ? value.diagonalFOV.toFixed(2) + "°" : "-"}}</td>
-                </tr>
+                  <tr
+                    v-for="(value, index) in useCameraSettingsStore().currentCameraSettings.validVideoFormats"
+                    :key="index"
+                  >
+                    <td>{{ value.resolution.width }} X {{ value.resolution.height }}</td>
+                    <td>{{ value.mean !== undefined ? value.mean.toFixed(2) + "px" : "-" }}</td>
+                    <td>{{ value.standardDeviation !== undefined ? value.standardDeviation.toFixed(2) + "px" : "-" }}</td>
+                    <td>{{ value.horizontalFOV !== undefined ? value.horizontalFOV.toFixed(2) + "°" : "-" }}</td>
+                    <td>{{ value.verticalFOV !== undefined ? value.verticalFOV.toFixed(2) + "°" : "-" }}</td>
+                    <td>{{ value.diagonalFOV !== undefined ? value.diagonalFOV.toFixed(2) + "°" : "-" }}</td>
+                  </tr>
                 </tbody>
               </v-simple-table>
             </v-row>
             <v-row justify="center">
               <v-chip
-                  v-show="isCalibrating"
-                  label
-                  :color="useStateStore().calibrationData.hasEnoughImages ? 'secondary' : 'gray'"
+                v-show="isCalibrating"
+                label
+                :color="useStateStore().calibrationData.hasEnoughImages ? 'secondary' : 'gray'"
               >
                 Snapshots: {{ useStateStore().calibrationData.imageCount }} of at least {{ useStateStore().calibrationData.minimumImageCount }}
               </v-chip>
@@ -299,62 +299,62 @@ const endCalibration = () => {
         </v-row>
         <v-row v-if="isCalibrating">
           <v-col
-              cols="12"
-              class="pt-0"
+            cols="12"
+            class="pt-0"
           >
             <cv-slider
-                v-model="useCameraSettingsStore().currentPipelineSettings.cameraExposure"
-                :disabled="useCameraSettingsStore().currentCameraSettings.pipelineSettings.cameraAutoExposure"
-                label="Exposure"
-                tooltip="Directly controls how much light is allowed to fall onto the sensor, which affects apparent brightness"
-                :min="0"
-                :max="100"
-                :slider-cols="8"
-                :step="0.1"
-                @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraExposure: args}, false)"
+              v-model="useCameraSettingsStore().currentPipelineSettings.cameraExposure"
+              :disabled="useCameraSettingsStore().currentCameraSettings.pipelineSettings.cameraAutoExposure"
+              label="Exposure"
+              tooltip="Directly controls how much light is allowed to fall onto the sensor, which affects apparent brightness"
+              :min="0"
+              :max="100"
+              :slider-cols="8"
+              :step="0.1"
+              @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraExposure: args}, false)"
             />
             <cv-slider
-                v-model="useCameraSettingsStore().currentPipelineSettings.cameraBrightness"
-                label="Brightness"
-                :min="0"
-                :max="100"
-                :slider-cols="8"
-                @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraBrightness: args}, false)"
+              v-model="useCameraSettingsStore().currentPipelineSettings.cameraBrightness"
+              label="Brightness"
+              :min="0"
+              :max="100"
+              :slider-cols="8"
+              @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraBrightness: args}, false)"
             />
             <cv-switch
-                v-model="useCameraSettingsStore().currentPipelineSettings.cameraAutoExposure"
-                class="pt-2"
-                label="Auto Exposure"
-                :label-cols="4"
-                tooltip="Enables or Disables camera automatic adjustment for current lighting conditions"
-                @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraAutoExposure: args}, false)"
+              v-model="useCameraSettingsStore().currentPipelineSettings.cameraAutoExposure"
+              class="pt-2"
+              label="Auto Exposure"
+              :label-cols="4"
+              tooltip="Enables or Disables camera automatic adjustment for current lighting conditions"
+              @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraAutoExposure: args}, false)"
             />
             <cv-slider
-                v-if="useCameraSettingsStore().currentPipelineSettings.cameraGain >= 0"
-                v-model="useCameraSettingsStore().currentPipelineSettings.cameraGain"
-                label="Camera Gain"
-                tooltip="Controls camera gain, similar to brightness"
-                :min="0"
-                :max="100"
-                @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraGain: args}, false)"
+              v-if="useCameraSettingsStore().currentPipelineSettings.cameraGain >= 0"
+              v-model="useCameraSettingsStore().currentPipelineSettings.cameraGain"
+              label="Camera Gain"
+              tooltip="Controls camera gain, similar to brightness"
+              :min="0"
+              :max="100"
+              @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraGain: args}, false)"
             />
             <cv-slider
-                v-if="useCameraSettingsStore().currentPipelineSettings.cameraRedGain !== -1"
-                v-model="useCameraSettingsStore().currentPipelineSettings.cameraRedGain"
-                label="Red AWB Gain"
-                :min="0"
-                :max="100"
-                tooltip="Controls red automatic white balance gain, which affects how the camera captures colors in different conditions"
-                @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraRedGain: args}, false)"
+              v-if="useCameraSettingsStore().currentPipelineSettings.cameraRedGain !== -1"
+              v-model="useCameraSettingsStore().currentPipelineSettings.cameraRedGain"
+              label="Red AWB Gain"
+              :min="0"
+              :max="100"
+              tooltip="Controls red automatic white balance gain, which affects how the camera captures colors in different conditions"
+              @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraRedGain: args}, false)"
             />
             <cv-slider
-                v-if="useCameraSettingsStore().currentPipelineSettings.cameraBlueGain !== -1"
-                v-model="useCameraSettingsStore().currentPipelineSettings.cameraBlueGain"
-                label="Blue AWB Gain"
-                :min="0"
-                :max="100"
-                tooltip="Controls blue automatic white balance gain, which affects how the camera captures colors in different conditions"
-                @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraBlueGain: args}, false)"
+              v-if="useCameraSettingsStore().currentPipelineSettings.cameraBlueGain !== -1"
+              v-model="useCameraSettingsStore().currentPipelineSettings.cameraBlueGain"
+              label="Blue AWB Gain"
+              :min="0"
+              :max="100"
+              tooltip="Controls blue automatic white balance gain, which affects how the camera captures colors in different conditions"
+              @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraBlueGain: args}, false)"
             />
           </v-col>
         </v-row>
@@ -362,23 +362,23 @@ const endCalibration = () => {
         <v-row>
           <v-col :cols="6">
             <v-btn
-                small
-                color="secondary"
-                style="width: 100%;"
-                :disabled="!settingsValid"
-                @click="isCalibrating ? useCameraSettingsStore().takeCalibrationSnapshot(true) : startCalibration()"
+              small
+              color="secondary"
+              style="width: 100%;"
+              :disabled="!settingsValid"
+              @click="isCalibrating ? useCameraSettingsStore().takeCalibrationSnapshot(true) : startCalibration()"
             >
               {{ isCalibrating ? "Take Snapshot" : "Start Calibration" }}
             </v-btn>
           </v-col>
           <v-col :cols="6">
             <v-btn
-                small
-                :color="useStateStore().calibrationData.hasEnoughImages ? 'accent' : 'red'"
-                :class="useStateStore().calibrationData.hasEnoughImages ? 'black--text' : 'white---text'"
-                style="width: 100%;"
-                :disabled="!isCalibrating || !settingsValid"
-                @click="endCalibration"
+              small
+              :color="useStateStore().calibrationData.hasEnoughImages ? 'accent' : 'red'"
+              :class="useStateStore().calibrationData.hasEnoughImages ? 'black--text' : 'white---text'"
+              style="width: 100%;"
+              :disabled="!isCalibrating || !settingsValid"
+              @click="endCalibration"
             >
               {{ useStateStore().calibrationData.hasEnoughImages ? "Finish Calibration" : "Cancel Calibration" }}
             </v-btn>
@@ -387,12 +387,12 @@ const endCalibration = () => {
         <v-row>
           <v-col :cols="6">
             <v-btn
-                color="accent"
-                small
-                outlined
-                style="width: 100%;"
-                :disabled="!settingsValid"
-                @click="downloadCalibBoard"
+              color="accent"
+              small
+              outlined
+              style="width: 100%;"
+              :disabled="!settingsValid"
+              @click="downloadCalibBoard"
             >
               <v-icon left>
                 mdi-download
@@ -402,11 +402,11 @@ const endCalibration = () => {
           </v-col>
           <v-col :cols="6">
             <v-btn
-                color="secondary"
-                :disabled="isCalibrating"
-                small
-                style="width: 100%;"
-                @click="openCalibUploadPrompt"
+              color="secondary"
+              :disabled="isCalibrating"
+              small
+              style="width: 100%;"
+              @click="openCalibUploadPrompt"
             >
               <v-icon left>
                 mdi-upload
@@ -414,32 +414,34 @@ const endCalibration = () => {
               Import From CalibDB
             </v-btn>
             <input
-                ref="importCalibrationFromCalibDB"
-                type="file"
-                accept=".json"
-                style="display: none;"
-                @change="readImportedCalibration"
+              ref="importCalibrationFromCalibDB"
+              type="file"
+              accept=".json"
+              style="display: none;"
+              @change="readImportedCalibration"
             >
           </v-col>
         </v-row>
       </div>
     </v-card>
     <v-dialog
-        v-model="showCalibEndDialog"
-        width="500px"
-        :persistent="true"
+      v-model="showCalibEndDialog"
+      width="500px"
+      :persistent="true"
     >
       <v-card
-          color="primary"
-          dark
+        color="primary"
+        dark
       >
-        <v-card-title class="pb-8"> Camera Calibration </v-card-title>
+        <v-card-title class="pb-8">
+          Camera Calibration
+        </v-card-title>
         <div class="ml-3">
           <v-col style="text-align: center">
             <template v-if="calibCanceled">
               <v-icon
-                  color="blue"
-                  size="70"
+                color="blue"
+                size="70"
               >
                 mdi-cancel
               </v-icon>
@@ -447,26 +449,26 @@ const endCalibration = () => {
             </template>
             <template v-else-if="isCalibrating">
               <v-progress-circular
-                  indeterminate
-                  :size="70"
-                  :width="8"
-                  color="accent"
+                indeterminate
+                :size="70"
+                :width="8"
+                color="accent"
               />
               <v-card-text>Camera is being calibrated. This process may take several minutes...</v-card-text>
             </template>
             <template v-else-if="calibSuccess">
               <v-icon
-                  color="green"
-                  size="70"
+                color="green"
+                size="70"
               >
                 mdi-check-bold
               </v-icon>
-              <v-card-text>Camera has been successfully calibrated for {{useCameraSettingsStore().currentVideoFormat.resolution}}!</v-card-text>
+              <v-card-text>Camera has been successfully calibrated for {{ useCameraSettingsStore().currentVideoFormat.resolution }}!</v-card-text>
             </template>
             <template v-else>
               <v-icon
-                  color="red"
-                  size="70"
+                color="red"
+                size="70"
               >
                 mdi-close
               </v-icon>
@@ -477,10 +479,10 @@ const endCalibration = () => {
         <v-card-actions>
           <v-spacer />
           <v-btn
-              v-if="!isCalibrating"
-              color="white"
-              text
-              @click="showCalibEndDialog = false"
+            v-if="!isCalibrating"
+            color="white"
+            text
+            @click="showCalibEndDialog = false"
           >
             OK
           </v-btn>
diff --git a/photon-client/src/components/cameras/CameraSettingsCard.vue b/photon-client/src/components/cameras/CameraSettingsCard.vue
index 10307c622c..e484e33690 100644
--- a/photon-client/src/components/cameras/CameraSettingsCard.vue
+++ b/photon-client/src/components/cameras/CameraSettingsCard.vue
@@ -41,34 +41,34 @@ const saveCameraSettings = () => {
 
 <template>
   <v-card
-      class="mb-3 pr-6 pb-3"
-      color="primary"
-      dark
+    class="mb-3 pr-6 pb-3"
+    color="primary"
+    dark
   >
     <v-card-title>Camera Settings</v-card-title>
     <div class="ml-5">
       <cv-select
-          v-model="useStateStore().currentCameraIndex"
-          label="Camera"
-          :items="useCameraSettingsStore().cameraNames"
-          :disabled="useCameraSettingsStore().cameraNames.length <= 1"
-          :select-cols="8"
-          @input="args => useCameraSettingsStore().setCurrentCameraIndex(args)"
+        v-model="useStateStore().currentCameraIndex"
+        label="Camera"
+        :items="useCameraSettingsStore().cameraNames"
+        :disabled="useCameraSettingsStore().cameraNames.length <= 1"
+        :select-cols="8"
+        @input="args => useCameraSettingsStore().setCurrentCameraIndex(args)"
       />
       <cv-number-input
-          v-model="currentFov"
-          :tooltip="!useCameraSettingsStore().currentCameraSettings.fov.managedByVendor ? 'Field of view (in degrees) of the camera measured across the diagonal of the frame, in a video mode which covers the whole sensor area.' : 'This setting is managed by a vendor'"
-          label="Maximum Diagonal FOV"
-          :disabled="useCameraSettingsStore().currentCameraSettings.fov.managedByVendor"
-          :label-cols="4"
+        v-model="currentFov"
+        :tooltip="!useCameraSettingsStore().currentCameraSettings.fov.managedByVendor ? 'Field of view (in degrees) of the camera measured across the diagonal of the frame, in a video mode which covers the whole sensor area.' : 'This setting is managed by a vendor'"
+        label="Maximum Diagonal FOV"
+        :disabled="useCameraSettingsStore().currentCameraSettings.fov.managedByVendor"
+        :label-cols="4"
       />
       <br>
       <v-btn
-          style="margin-top:10px"
-          small
-          color="secondary"
-          @click="saveCameraSettings"
-          :disabled="currentFov === useCameraSettingsStore().currentCameraSettings.fov.value"
+        style="margin-top:10px"
+        small
+        color="secondary"
+        :disabled="currentFov === useCameraSettingsStore().currentCameraSettings.fov.value"
+        @click="saveCameraSettings"
       >
         <v-icon left>
           mdi-content-save
diff --git a/photon-client/src/components/common/cv-icon.vue b/photon-client/src/components/common/cv-icon.vue
index 7dec9d02cc..4b100c710f 100644
--- a/photon-client/src/components/common/cv-icon.vue
+++ b/photon-client/src/components/common/cv-icon.vue
@@ -21,12 +21,12 @@ const hoverClass = props.hover ? "hover" : "";
       nudge-right="10"
       :disabled="tooltip === undefined"
     >
-      <template v-slot:activator="{ on, attrs }">
+      <template #activator="{ on, attrs }">
         <v-icon
           :class="hoverClass"
           :color="color"
-          v-on="on"
           v-bind="attrs"
+          v-on="on"
           @click="$emit('click')"
         >
           {{ iconName }}
diff --git a/photon-client/src/components/common/cv-range-slider.vue b/photon-client/src/components/common/cv-range-slider.vue
index a1925fe623..3b600e0cef 100644
--- a/photon-client/src/components/common/cv-range-slider.vue
+++ b/photon-client/src/components/common/cv-range-slider.vue
@@ -64,10 +64,9 @@ const changeFromSlot = (v, i) => {
           thumb-color="accent"
           :step="step"
         >
-          <template v-slot:prepend>
+          <template #prepend>
             <v-text-field
               :value="localValue[0]"
-              @input="v => changeFromSlot(v, 0)"
               dark
               color="accent"
               class="mt-0 pt-0"
@@ -78,12 +77,12 @@ const changeFromSlot = (v, i) => {
               :step="step"
               type="number"
               style="width: 60px"
+              @input="v => changeFromSlot(v, 0)"
             />
           </template>
-          <template v-slot:append>
+          <template #append>
             <v-text-field
               :value="localValue[1]"
-              @input="v => changeFromSlot(v, 1)"
               dark
               color="accent"
               class="mt-0 pt-0"
@@ -94,6 +93,7 @@ const changeFromSlot = (v, i) => {
               :step="step"
               type="number"
               style="width: 60px"
+              @input="v => changeFromSlot(v, 1)"
             />
           </template>
         </v-range-slider>
diff --git a/photon-client/src/components/common/cv-slider.vue b/photon-client/src/components/common/cv-slider.vue
index c31ac04281..e938f17927 100644
--- a/photon-client/src/components/common/cv-slider.vue
+++ b/photon-client/src/components/common/cv-slider.vue
@@ -52,7 +52,7 @@ const localValue = computed({
           :disabled="disabled"
           :step="step"
         >
-          <template v-slot:append>
+          <template #append>
             <v-text-field
               v-model="localValue"
               dark
diff --git a/photon-client/src/components/common/cv-tooltipped-label.vue b/photon-client/src/components/common/cv-tooltipped-label.vue
index db90e15449..2372da343c 100644
--- a/photon-client/src/components/common/cv-tooltipped-label.vue
+++ b/photon-client/src/components/common/cv-tooltipped-label.vue
@@ -12,7 +12,7 @@ defineProps<{
       right
       open-delay="300"
     >
-      <template v-slot:activator="{ on, attrs }">
+      <template #activator="{ on, attrs }">
         <span
           style="cursor: text !important;"
           class="white--text"
diff --git a/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue b/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
index 60022f10ef..a2f8aeec4d 100644
--- a/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
+++ b/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
@@ -120,119 +120,132 @@ const cancelChangePipelineType = () => {
 
 <template>
   <v-card
-      color="primary"
+    color="primary"
   >
     <v-row style="padding: 12px 12px 0 24px">
-      <v-col cols="10" class="pa-0">
+      <v-col
+        cols="10"
+        class="pa-0"
+      >
         <cv-select
-            v-if="!isCameraNameEdit"
-            v-model="useStateStore().currentCameraIndex"
-            label="Camera"
-            :items="useCameraSettingsStore().cameraNames"
-            :disabled="useCameraSettingsStore().cameraNames.length <= 1"
-            @input="args => useCameraSettingsStore().setCurrentCameraIndex(args)"
+          v-if="!isCameraNameEdit"
+          v-model="useStateStore().currentCameraIndex"
+          label="Camera"
+          :items="useCameraSettingsStore().cameraNames"
+          :disabled="useCameraSettingsStore().cameraNames.length <= 1"
+          @input="args => useCameraSettingsStore().setCurrentCameraIndex(args)"
         />
         <cv-input
-            v-else
-            class="pt-2"
-            v-model="currentCameraName"
-            :input-cols="12-3"
-            :rules="[v => checkCameraName(v)]"
-            label="Camera"
-            @onEnter="saveCameraNameEdit"
-            @onEscape="cancelCameraNameEdit"
+          v-else
+          v-model="currentCameraName"
+          class="pt-2"
+          :input-cols="12-3"
+          :rules="[v => checkCameraName(v)]"
+          label="Camera"
+          @onEnter="saveCameraNameEdit"
+          @onEscape="cancelCameraNameEdit"
         />
       </v-col>
-      <v-col cols="2" style="display: flex; align-items: center; justify-content: center">
+      <v-col
+        cols="2"
+        style="display: flex; align-items: center; justify-content: center"
+      >
         <cv-icon
-            color="#c5c5c5"
-            icon-name="mdi-pencil"
-            tooltip="Edit Camera Name"
-            @click="isCameraNameEdit = true"
+          color="#c5c5c5"
+          icon-name="mdi-pencil"
+          tooltip="Edit Camera Name"
+          @click="isCameraNameEdit = true"
         />
       </v-col>
     </v-row>
     <v-row style="padding: 0 12px 0 24px;">
-      <v-col cols="10" class="pa-0">
-          <cv-select
-              v-if="!isPipelineNameEdit"
-              v-bind:value="useCameraSettingsStore().currentCameraSettings.currentPipelineIndex"
-              label="Pipeline"
-              tooltip="Each pipeline runs on a camera output and stores a unique set of processing settings"
-              :disabled="useCameraSettingsStore().isDriverMode
-                          || useCameraSettingsStore().isCalibrationMode
-                          || useCameraSettingsStore().pipelineNames.length <= 1"
-              :items="pipelineNamesWrapper"
-              @input="args => useCameraSettingsStore().changeCurrentPipelineIndex(args, true)"
-          />
+      <v-col
+        cols="10"
+        class="pa-0"
+      >
+        <cv-select
+          v-if="!isPipelineNameEdit"
+          :value="useCameraSettingsStore().currentCameraSettings.currentPipelineIndex"
+          label="Pipeline"
+          tooltip="Each pipeline runs on a camera output and stores a unique set of processing settings"
+          :disabled="useCameraSettingsStore().isDriverMode
+            || useCameraSettingsStore().isCalibrationMode
+            || useCameraSettingsStore().pipelineNames.length <= 1"
+          :items="pipelineNamesWrapper"
+          @input="args => useCameraSettingsStore().changeCurrentPipelineIndex(args, true)"
+        />
         <cv-input
-            v-else
-            v-model="currentPipelineName"
-            :input-cols="12-3"
-            :rules="[v => checkPipelineName(v)]"
-            label="Pipeline"
-            @onEnter="v => savePipelineNameEdit(v)"
-            @onEscape="cancelPipelineNameEdit"
+          v-else
+          v-model="currentPipelineName"
+          :input-cols="12-3"
+          :rules="[v => checkPipelineName(v)]"
+          label="Pipeline"
+          @onEnter="v => savePipelineNameEdit(v)"
+          @onEscape="cancelPipelineNameEdit"
         />
       </v-col>
-      <v-col cols="2" class="pa-0" style="display: flex; align-items: center; justify-content: center">
+      <v-col
+        cols="2"
+        class="pa-0"
+        style="display: flex; align-items: center; justify-content: center"
+      >
         <v-menu
           v-if="!useCameraSettingsStore().isDriverMode"
           offset-y
           nudge-bottom="7"
           auto
         >
-          <template v-slot:activator="{ on }">
+          <template #activator="{ on }">
             <v-icon
-                color="#c5c5c5"
-                v-on="on"
-                @click="cancelPipelineNameEdit"
+              color="#c5c5c5"
+              v-on="on"
+              @click="cancelPipelineNameEdit"
             >
               mdi-menu
             </v-icon>
           </template>
           <v-list
-              dark
-              dense
-              color="primary"
+            dark
+            dense
+            color="primary"
           >
             <v-list-item @click="isPipelineNameEdit = true">
               <v-list-item-title>
                 <cv-icon
-                    color="#c5c5c5"
-                    :right="true"
-                    icon-name="mdi-pencil"
-                    tooltip="Edit pipeline name"
-                 />
+                  color="#c5c5c5"
+                  :right="true"
+                  icon-name="mdi-pencil"
+                  tooltip="Edit pipeline name"
+                />
               </v-list-item-title>
             </v-list-item>
             <v-list-item @click="showPipelineCreationDialog = true">
               <v-list-item-title>
                 <cv-icon
-                    color="#c5c5c5"
-                    :right="true"
-                    icon-name="mdi-plus"
-                    tooltip="Add new pipeline"
+                  color="#c5c5c5"
+                  :right="true"
+                  icon-name="mdi-plus"
+                  tooltip="Add new pipeline"
                 />
               </v-list-item-title>
             </v-list-item>
             <v-list-item @click="showPipelineDeletionConfirmationDialog = true">
               <v-list-item-title>
                 <cv-icon
-                    color="red darken-2"
-                    :right="true"
-                    icon-name="mdi-delete"
-                    tooltip="Delete pipeline"
+                  color="red darken-2"
+                  :right="true"
+                  icon-name="mdi-delete"
+                  tooltip="Delete pipeline"
                 />
               </v-list-item-title>
             </v-list-item>
             <v-list-item @click="useCameraSettingsStore().duplicatePipeline(useCameraSettingsStore().currentCameraSettings.currentPipelineIndex)">
               <v-list-item-title>
                 <cv-icon
-                    color="#c5c5c5"
-                    :right="true"
-                    icon-name="mdi-content-copy"
-                    tooltip="Duplicate pipeline"
+                  color="#c5c5c5"
+                  :right="true"
+                  icon-name="mdi-content-copy"
+                  tooltip="Duplicate pipeline"
                 />
               </v-list-item-title>
             </v-list-item>
@@ -241,69 +254,72 @@ const cancelChangePipelineType = () => {
       </v-col>
     </v-row>
     <v-row style="padding: 0 12px 12px 24px;">
-      <v-col cols="10" class="pa-0">
+      <v-col
+        cols="10"
+        class="pa-0"
+      >
         <cv-select
-            v-model="currentPipelineType"
-            label="Tracking Type"
-            tooltip="Changes the pipeline type, which changes the type of processing that will happen on input frames"
-            :items="[
-                {name: 'Reflective', value: WebsocketPipelineType.Reflective},
-                {name: 'Colored Shape', value: WebsocketPipelineType.ColoredShape},
-                {name: 'AprilTag', value: WebsocketPipelineType.AprilTag}]"
-            @input="showPipelineTypeChangeDialog = true"
+          v-model="currentPipelineType"
+          label="Tracking Type"
+          tooltip="Changes the pipeline type, which changes the type of processing that will happen on input frames"
+          :items="[
+            {name: 'Reflective', value: WebsocketPipelineType.Reflective},
+            {name: 'Colored Shape', value: WebsocketPipelineType.ColoredShape},
+            {name: 'AprilTag', value: WebsocketPipelineType.AprilTag}]"
+          @input="showPipelineTypeChangeDialog = true"
         />
       </v-col>
     </v-row>
     <v-dialog
-        v-model="showPipelineCreationDialog"
-        dark
-        persistent
-        width="500"
+      v-model="showPipelineCreationDialog"
+      dark
+      persistent
+      width="500"
     >
       <v-card
-          dark
-          color="primary"
+        dark
+        color="primary"
       >
         <v-card-title
-            class="headline"
-            style="font-family: 'Prompt', sans-serif !important;"
-            primary-title
+          class="headline"
+          style="font-family: 'Prompt', sans-serif !important;"
+          primary-title
         >
           Create New Pipeline
         </v-card-title>
         <v-card-text>
           <cv-input
-              v-model="newPipelineName"
-              placeholder="Pipeline Name"
-              :label-cols="3"
-              :input-cols="12-3"
-              label="Pipeline Name"
-              :rules="[v => checkPipelineName(v)]"
+            v-model="newPipelineName"
+            placeholder="Pipeline Name"
+            :label-cols="3"
+            :input-cols="12-3"
+            label="Pipeline Name"
+            :rules="[v => checkPipelineName(v)]"
           />
           <cv-select
-              v-model="newPipelineType"
-              :select-cols="12-3"
-              label="Tracking Type"
-              tooltip="Pipeline type, which changes the type of processing that will happen on input frames"
-              :items="[
-                    {name: 'Reflective', value: WebsocketPipelineType.Reflective},
-                    {name: 'Colored Shape', value: WebsocketPipelineType.ColoredShape},
-                    {name: 'AprilTag', value: WebsocketPipelineType.AprilTag}]"
+            v-model="newPipelineType"
+            :select-cols="12-3"
+            label="Tracking Type"
+            tooltip="Pipeline type, which changes the type of processing that will happen on input frames"
+            :items="[
+              {name: 'Reflective', value: WebsocketPipelineType.Reflective},
+              {name: 'Colored Shape', value: WebsocketPipelineType.ColoredShape},
+              {name: 'AprilTag', value: WebsocketPipelineType.AprilTag}]"
           />
         </v-card-text>
         <v-divider />
         <v-card-actions>
           <v-spacer />
           <v-btn
-              color="#ffd843"
-              :disabled="checkPipelineName(newPipelineName) !== true"
-              @click="createNewPipeline"
+            color="#ffd843"
+            :disabled="checkPipelineName(newPipelineName) !== true"
+            @click="createNewPipeline"
           >
             Save
           </v-btn>
           <v-btn
-              @click="cancelPipelineCreation"
-              color="error"
+            color="error"
+            @click="cancelPipelineCreation"
           >
             Cancel
           </v-btn>
@@ -311,18 +327,18 @@ const cancelChangePipelineType = () => {
       </v-card>
     </v-dialog>
     <v-dialog
-        v-model="showPipelineDeletionConfirmationDialog"
-        dark
-        width="500"
+      v-model="showPipelineDeletionConfirmationDialog"
+      dark
+      width="500"
     >
       <v-card
-          dark
-          color="primary"
+        dark
+        color="primary"
       >
         <v-card-title
-            class="headline"
-            style="font-family: 'Prompt', sans-serif !important;"
-            primary-title
+          class="headline"
+          style="font-family: 'Prompt', sans-serif !important;"
+          primary-title
         >
           Pipeline Deletion Confirmation
         </v-card-title>
@@ -333,14 +349,14 @@ const cancelChangePipelineType = () => {
         <v-card-actions>
           <v-spacer />
           <v-btn
-              color="error"
-              @click="confirmDeleteCurrentPipeline"
+            color="error"
+            @click="confirmDeleteCurrentPipeline"
           >
             Yes, Im Sure
           </v-btn>
           <v-btn
-              color="#ffd843"
-              @click="showPipelineDeletionConfirmationDialog = false"
+            color="#ffd843"
+            @click="showPipelineDeletionConfirmationDialog = false"
           >
             No, Take me Back
           </v-btn>
@@ -348,13 +364,13 @@ const cancelChangePipelineType = () => {
       </v-card>
     </v-dialog>
     <v-dialog
-        v-model="showPipelineTypeChangeDialog"
-        persistent
-        width="600"
+      v-model="showPipelineTypeChangeDialog"
+      persistent
+      width="600"
     >
       <v-card
-          color="primary"
-          dark
+        color="primary"
+        dark
       >
         <v-card-title>Change Pipeline Type</v-card-title>
         <v-card-text>
@@ -364,14 +380,14 @@ const cancelChangePipelineType = () => {
         <v-card-actions>
           <v-spacer />
           <v-btn
-              color="error"
-              @click="confirmChangePipelineType"
+            color="error"
+            @click="confirmChangePipelineType"
           >
             Yes, Im Sure
           </v-btn>
           <v-btn
-              color="#ffd843"
-              @click="cancelChangePipelineType"
+            color="#ffd843"
+            @click="cancelChangePipelineType"
           >
             No, Take me Back
           </v-btn>
diff --git a/photon-client/src/components/dashboard/CamerasCard.vue b/photon-client/src/components/dashboard/CamerasCard.vue
index 1f68122837..357ec7dd2f 100644
--- a/photon-client/src/components/dashboard/CamerasCard.vue
+++ b/photon-client/src/components/dashboard/CamerasCard.vue
@@ -30,22 +30,22 @@ const fpsTooLow = computed<boolean>(() => {
 
 <template>
   <v-card
-      color="primary"
-      height="100%"
-      style="display: flex; flex-direction: column"
-      dark
+    color="primary"
+    height="100%"
+    style="display: flex; flex-direction: column"
+    dark
   >
     <v-card-title
-        class="pb-0 mb-0 pl-4 pt-1"
-        style="min-height: 50px; justify-content: space-between; align-content: center"
+      class="pb-0 mb-0 pl-4 pt-1"
+      style="min-height: 50px; justify-content: space-between; align-content: center"
     >
       <div class="pt-2">
         <span class="mr-4">Cameras</span>
         <v-chip
-            label
-            :color="fpsTooLow ? 'error' : 'transparent'"
-            :text-color="fpsTooLow ? '#C7EA46' : '#ff4d00'"
-            style="font-size: 1rem; padding: 0; margin: 0"
+          label
+          :color="fpsTooLow ? 'error' : 'transparent'"
+          :text-color="fpsTooLow ? '#C7EA46' : '#ff4d00'"
+          style="font-size: 1rem; padding: 0; margin: 0"
         >
           <span class="pr-1">
             Processing @ {{ Math.round(useStateStore().pipelineResults?.fps || 0) }}&nbsp;FPS &ndash;
@@ -63,17 +63,20 @@ const fpsTooLow = computed<boolean>(() => {
       </div>
       <div>
         <v-switch
-            v-model="driverMode"
-            label="Driver Mode"
-            style="margin-left: auto;"
-            color="accent"
-            class="pt-2"
+          v-model="driverMode"
+          label="Driver Mode"
+          style="margin-left: auto;"
+          color="accent"
+          class="pt-2"
         />
       </div>
     </v-card-title>
-    <v-divider style="border-color: white"/>
+    <v-divider style="border-color: white" />
     <!-- TODO do this better -->
-    <v-row class="pl-3 pr-3 pt-3 pb-3" style="flex-wrap: nowrap; justify-content: center">
+    <v-row
+      class="pl-3 pr-3 pt-3 pb-3"
+      style="flex-wrap: nowrap; justify-content: center"
+    >
       <v-col
         v-for="(viewIndex, index) in [0, 1]"
         v-show="value.includes(viewIndex)"
@@ -81,9 +84,9 @@ const fpsTooLow = computed<boolean>(() => {
         style="max-width: 500px; display: flex; align-items: center"
       >
         <photon-camera-stream
-            :stream-type="index === 0 ? 'Raw' : 'Processed'"
-            :id="index === 0 ? 'input-camera-stream' : 'output-camera-stream'"
-            style="width: 100%; height: auto"
+          :id="index === 0 ? 'input-camera-stream' : 'output-camera-stream'"
+          :stream-type="index === 0 ? 'Raw' : 'Processed'"
+          style="width: 100%; height: auto"
         />
       </v-col>
     </v-row>
diff --git a/photon-client/src/components/dashboard/PipelineConfigCard.vue b/photon-client/src/components/dashboard/PipelineConfigCard.vue
index 777dbcbb0d..1f5a0d4a5c 100644
--- a/photon-client/src/components/dashboard/PipelineConfigCard.vue
+++ b/photon-client/src/components/dashboard/PipelineConfigCard.vue
@@ -116,35 +116,38 @@ onBeforeUpdate(() => {
 </script>
 
 <template>
-  <v-row no-gutters class="tabGroups">
+  <v-row
+    no-gutters
+    class="tabGroups"
+  >
     <v-col
       v-for="(tabGroupData, tabGroupIndex) in tabGroups"
-      :class="tabGroupIndex !== tabGroups.length - 1 && 'pr-3'"
       :key="tabGroupIndex"
+      :class="tabGroupIndex !== tabGroups.length - 1 && 'pr-3'"
     >
       <v-card
-          color="primary"
-          height="100%"
-          class="pr-4 pl-4"
+        color="primary"
+        height="100%"
+        class="pr-4 pl-4"
       >
         <v-tabs
-            v-model="selectedTabs[tabGroupIndex]"
-            grow
-            background-color="primary"
-            dark
-            height="48"
-            slider-color="accent"
+          v-model="selectedTabs[tabGroupIndex]"
+          grow
+          background-color="primary"
+          dark
+          height="48"
+          slider-color="accent"
         >
           <v-tab
-              v-for="(tabConfig, index) in tabGroupData"
-              :key="index"
+            v-for="(tabConfig, index) in tabGroupData"
+            :key="index"
           >
-            {{tabConfig.tabName}}
+            {{ tabConfig.tabName }}
           </v-tab>
         </v-tabs>
         <div class="pl-4 pr-4 pt-4 pb-2">
           <KeepAlive>
-            <Component :is="tabGroupData[selectedTabs[tabGroupIndex]].component"/>
+            <Component :is="tabGroupData[selectedTabs[tabGroupIndex]].component" />
           </KeepAlive>
         </div>
       </v-card>
diff --git a/photon-client/src/components/dashboard/PipelineConfigTabs/AprilTagTab.vue b/photon-client/src/components/dashboard/PipelineConfigTabs/AprilTagTab.vue
index d7e6d76c98..d64c9927ed 100644
--- a/photon-client/src/components/dashboard/PipelineConfigTabs/AprilTagTab.vue
+++ b/photon-client/src/components/dashboard/PipelineConfigTabs/AprilTagTab.vue
@@ -17,69 +17,69 @@ const interactiveCols = computed(() => (getCurrentInstance()?.proxy.$vuetify.bre
 <template>
   <div v-if="currentPipelineSettings.pipelineType === PipelineType.AprilTag">
     <cv-select
-        v-model="currentPipelineSettings.tagFamily"
-        label="Target family"
-        :items="['AprilTag Family 36h11', 'AprilTag Family 25h9', 'AprilTag Family 16h5']"
-        :select-cols="interactiveCols"
-        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({tagFamily: value}, false)"
+      v-model="currentPipelineSettings.tagFamily"
+      label="Target family"
+      :items="['AprilTag Family 36h11', 'AprilTag Family 25h9', 'AprilTag Family 16h5']"
+      :select-cols="interactiveCols"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({tagFamily: value}, false)"
     />
     <cv-slider
-        v-model="currentPipelineSettings.decimate"
-        class="pt-2"
-        :slider-cols="interactiveCols"
-        label="Decimate"
-        tooltip="Increases FPS at the expense of range by reducing image resolution initially"
-        :min="1"
-        :max="8"
-        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({decimate: value}, false)"
+      v-model="currentPipelineSettings.decimate"
+      class="pt-2"
+      :slider-cols="interactiveCols"
+      label="Decimate"
+      tooltip="Increases FPS at the expense of range by reducing image resolution initially"
+      :min="1"
+      :max="8"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({decimate: value}, false)"
     />
     <cv-slider
-        v-model="currentPipelineSettings.blur"
-        class="pt-2"
-        :slider-cols="interactiveCols"
-        label="Blur"
-        tooltip="Gaussian blur added to the image, high FPS cost for slightly decreased noise"
-        :min="0"
-        :max="5"
-        :step="0.1"
-        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({blur: value}, false)"
+      v-model="currentPipelineSettings.blur"
+      class="pt-2"
+      :slider-cols="interactiveCols"
+      label="Blur"
+      tooltip="Gaussian blur added to the image, high FPS cost for slightly decreased noise"
+      :min="0"
+      :max="5"
+      :step="0.1"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({blur: value}, false)"
     />
     <cv-slider
-        v-model="currentPipelineSettings.threads"
-        class="pt-2"
-        :slider-cols="interactiveCols"
-        label="Threads"
-        tooltip="Number of threads spawned by the AprilTag detector"
-        :min="1"
-        :max="8"
-        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({threads: value}, false)"
+      v-model="currentPipelineSettings.threads"
+      class="pt-2"
+      :slider-cols="interactiveCols"
+      label="Threads"
+      tooltip="Number of threads spawned by the AprilTag detector"
+      :min="1"
+      :max="8"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({threads: value}, false)"
     />
     <cv-switch
-        v-model="currentPipelineSettings.refineEdges"
-        class="pt-2"
-        label="Refine Edges"
-        tooltip="Further refines the AprilTag corner position initial estimate, suggested left on"
-        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({refineEdges: value}, false)"
+      v-model="currentPipelineSettings.refineEdges"
+      class="pt-2"
+      label="Refine Edges"
+      tooltip="Further refines the AprilTag corner position initial estimate, suggested left on"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({refineEdges: value}, false)"
     />
     <cv-slider
-        v-model="currentPipelineSettings.decisionMargin"
-        class="pt-2 pb-4"
-        :slider-cols="interactiveCols"
-        label="Decision Margin Cutoff"
-        tooltip="Tags with a 'margin' (decoding quality score) less than this wil be rejected. Increase this to reduce the number of false positive detections"
-        :min="0"
-        :max="250"
-        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({decisionMargin: value}, false)"
+      v-model="currentPipelineSettings.decisionMargin"
+      class="pt-2 pb-4"
+      :slider-cols="interactiveCols"
+      label="Decision Margin Cutoff"
+      tooltip="Tags with a 'margin' (decoding quality score) less than this wil be rejected. Increase this to reduce the number of false positive detections"
+      :min="0"
+      :max="250"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({decisionMargin: value}, false)"
     />
     <cv-slider
-        v-model="currentPipelineSettings.numIterations"
-        class="pt-2 pb-4"
-        :slider-cols="interactiveCols"
-        label="Pose Estimation Iterations"
-        tooltip="Number of iterations the pose estimation algorithm will run, 50-100 is a good starting point"
-        :min="0"
-        :max="500"
-        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({numIterations: value}, false)"
+      v-model="currentPipelineSettings.numIterations"
+      class="pt-2 pb-4"
+      :slider-cols="interactiveCols"
+      label="Pose Estimation Iterations"
+      tooltip="Number of iterations the pose estimation algorithm will run, 50-100 is a good starting point"
+      :min="0"
+      :max="500"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({numIterations: value}, false)"
     />
   </div>
 </template>
diff --git a/photon-client/src/components/dashboard/PipelineConfigTabs/ArucoTab.vue b/photon-client/src/components/dashboard/PipelineConfigTabs/ArucoTab.vue
index 1a91719c25..88487467f8 100644
--- a/photon-client/src/components/dashboard/PipelineConfigTabs/ArucoTab.vue
+++ b/photon-client/src/components/dashboard/PipelineConfigTabs/ArucoTab.vue
@@ -15,36 +15,36 @@ const interactiveCols = computed(() => (getCurrentInstance()?.proxy.$vuetify.bre
 <template>
   <div v-if="currentPipelineSettings.pipelineType === PipelineType.Aruco">
     <cv-slider
-        v-model="currentPipelineSettings.decimate"
-        class="pt-2"
-        :slider-cols="interactiveCols"
-        label="Decimate"
-        tooltip="Increases FPS at the expense of range by reducing image resolution initially"
-        :min="1"
-        :max="8"
-        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({decimate: value}, false)"
+      v-model="currentPipelineSettings.decimate"
+      class="pt-2"
+      :slider-cols="interactiveCols"
+      label="Decimate"
+      tooltip="Increases FPS at the expense of range by reducing image resolution initially"
+      :min="1"
+      :max="8"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({decimate: value}, false)"
     />
     <cv-slider
-        v-model="currentPipelineSettings.numIterations"
-        class="pt-2"
-        :slider-cols="interactiveCols"
-        label="Corner Iterations"
-        tooltip="How many iterations are going to be used in order to refine corners. Higher values are lead to more accuracy at the cost of performance"
-        :min="30"
-        :max="1000"
-        :step="5"
-        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({numIterations: value}, false)"
+      v-model="currentPipelineSettings.numIterations"
+      class="pt-2"
+      :slider-cols="interactiveCols"
+      label="Corner Iterations"
+      tooltip="How many iterations are going to be used in order to refine corners. Higher values are lead to more accuracy at the cost of performance"
+      :min="30"
+      :max="1000"
+      :step="5"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({numIterations: value}, false)"
     />
     <cv-slider
-        v-model="currentPipelineSettings.cornerAccuracy"
-        class="pt-2"
-        :slider-cols="interactiveCols"
-        label="Corner Accuracy"
-        tooltip="Minimum accuracy for the corners, lower is better but more performance intensive "
-        :min="0.01"
-        :max="100"
-        :step="0.01"
-        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({cornerAccuracy: value}, false)"
+      v-model="currentPipelineSettings.cornerAccuracy"
+      class="pt-2"
+      :slider-cols="interactiveCols"
+      label="Corner Accuracy"
+      tooltip="Minimum accuracy for the corners, lower is better but more performance intensive "
+      :min="0.01"
+      :max="100"
+      :step="0.01"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({cornerAccuracy: value}, false)"
     />
   </div>
 </template>
diff --git a/photon-client/src/components/dashboard/PipelineConfigTabs/ContoursTab.vue b/photon-client/src/components/dashboard/PipelineConfigTabs/ContoursTab.vue
index 67ea2fa0cf..77ab033a9d 100644
--- a/photon-client/src/components/dashboard/PipelineConfigTabs/ContoursTab.vue
+++ b/photon-client/src/components/dashboard/PipelineConfigTabs/ContoursTab.vue
@@ -47,110 +47,110 @@ const interactiveCols = computed(() => (getCurrentInstance()?.proxy.$vuetify.bre
 <template>
   <div>
     <cv-range-slider
-        v-model="contourArea"
-        label="Area"
-        :min="0"
-        :max="100"
-        :slider-cols="interactiveCols"
-        :step="0.01"
-        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourArea: value}, false)"
+      v-model="contourArea"
+      label="Area"
+      :min="0"
+      :max="100"
+      :slider-cols="interactiveCols"
+      :step="0.01"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourArea: value}, false)"
     />
     <cv-range-slider
-        v-if="useCameraSettingsStore().currentPipelineType !== PipelineType.ColoredShape"
-        v-model="contourRatio"
-        label="Ratio (W/H)"
-        tooltip="Min and max ratio between the width and height of a contour's bounding rectangle"
-        :min="0"
-        :max="100"
-        :slider-cols="interactiveCols"
-        :step="0.1"
-        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourRatio: value}, false)"
+      v-if="useCameraSettingsStore().currentPipelineType !== PipelineType.ColoredShape"
+      v-model="contourRatio"
+      label="Ratio (W/H)"
+      tooltip="Min and max ratio between the width and height of a contour's bounding rectangle"
+      :min="0"
+      :max="100"
+      :slider-cols="interactiveCols"
+      :step="0.1"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourRatio: value}, false)"
     />
     <cv-select
-        v-model="useCameraSettingsStore().currentPipelineSettings.contourTargetOrientation"
-        label="Target Orientation"
-        tooltip="Used to determine how to calculate target landmarks, as well as aspect ratio"
-        :items="['Portrait', 'Landscape']"
-        :select-cols="interactiveCols"
-        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourTargetOrientation: value}, false)"
+      v-model="useCameraSettingsStore().currentPipelineSettings.contourTargetOrientation"
+      label="Target Orientation"
+      tooltip="Used to determine how to calculate target landmarks, as well as aspect ratio"
+      :items="['Portrait', 'Landscape']"
+      :select-cols="interactiveCols"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourTargetOrientation: value}, false)"
     />
     <cv-range-slider
-        v-if="useCameraSettingsStore().currentPipelineType === PipelineType.ColoredShape"
-        v-model="contourFullness"
-        label="Fullness"
-        tooltip="Min and max ratio between a contour's area and its bounding rectangle"
-        :min="0"
-        :max="100"
-        :slider-cols="interactiveCols"
-        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourFullness: value}, false)"
+      v-if="useCameraSettingsStore().currentPipelineType === PipelineType.ColoredShape"
+      v-model="contourFullness"
+      label="Fullness"
+      tooltip="Min and max ratio between a contour's area and its bounding rectangle"
+      :min="0"
+      :max="100"
+      :slider-cols="interactiveCols"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourFullness: value}, false)"
     />
     <cv-range-slider
-        v-if="currentPipelineSettings.pipelineType === PipelineType.ColoredShape"
-        v-model="contourPerimeter"
-        label="Perimeter"
-        tooltip="Min and max perimeter of the shape, in pixels"
-        min="0"
-        max="4000"
-        :slider-cols="interactiveCols"
-        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourPerimeter: value}, false)"
+      v-if="currentPipelineSettings.pipelineType === PipelineType.ColoredShape"
+      v-model="contourPerimeter"
+      label="Perimeter"
+      tooltip="Min and max perimeter of the shape, in pixels"
+      min="0"
+      max="4000"
+      :slider-cols="interactiveCols"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourPerimeter: value}, false)"
     />
     <cv-slider
-        v-model="useCameraSettingsStore().currentPipelineSettings.contourSpecklePercentage"
-        label="Speckle Rejection"
-        tooltip="Rejects contours whose average area is less than the given percentage of the average area of all the other contours"
-        :min="0"
-        :max="100"
-        :slider-cols="interactiveCols"
-        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourSpecklePercentage: value}, false)"
+      v-model="useCameraSettingsStore().currentPipelineSettings.contourSpecklePercentage"
+      label="Speckle Rejection"
+      tooltip="Rejects contours whose average area is less than the given percentage of the average area of all the other contours"
+      :min="0"
+      :max="100"
+      :slider-cols="interactiveCols"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourSpecklePercentage: value}, false)"
     />
     <template v-if="currentPipelineSettings.pipelineType === PipelineType.Reflective">
       <cv-slider
-          v-model="currentPipelineSettings.contourFilterRangeX"
-          label="X Filter Tightness"
-          tooltip="Rejects contours whose center X is further than X standard deviations above/below the mean X location"
-          :min="0.1"
-          :max="4"
-          :step="0.1"
-          :slider-cols="interactiveCols"
-          @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourFilterRangeX: value}, false)"
+        v-model="currentPipelineSettings.contourFilterRangeX"
+        label="X Filter Tightness"
+        tooltip="Rejects contours whose center X is further than X standard deviations above/below the mean X location"
+        :min="0.1"
+        :max="4"
+        :step="0.1"
+        :slider-cols="interactiveCols"
+        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourFilterRangeX: value}, false)"
       />
       <cv-slider
-          v-model="currentPipelineSettings.contourFilterRangeY"
-          label="Y Filter Tightness"
-          tooltip="Rejects contours whose center Y is further than X standard deviations above/below the mean Y location"
-          :min="0.1"
-          :max="4"
-          :step="0.1"
-          :slider-cols="interactiveCols"
-          @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourFilterRangeY: value}, false)"
+        v-model="currentPipelineSettings.contourFilterRangeY"
+        label="Y Filter Tightness"
+        tooltip="Rejects contours whose center Y is further than X standard deviations above/below the mean Y location"
+        :min="0.1"
+        :max="4"
+        :step="0.1"
+        :slider-cols="interactiveCols"
+        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourFilterRangeY: value}, false)"
       />
       <cv-select
-          v-model="useCameraSettingsStore().currentPipelineSettings.contourGroupingMode"
-          label="Target Grouping"
-          tooltip="Whether or not every two targets are paired with each other (good for e.g. 2019 targets)"
-          :select-cols="interactiveCols"
-          :items="['Single','Dual','Two or More']"
-          @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourGroupingMode: value}, false)"
+        v-model="useCameraSettingsStore().currentPipelineSettings.contourGroupingMode"
+        label="Target Grouping"
+        tooltip="Whether or not every two targets are paired with each other (good for e.g. 2019 targets)"
+        :select-cols="interactiveCols"
+        :items="['Single','Dual','Two or More']"
+        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourGroupingMode: value}, false)"
       />
       <cv-select
-          v-model="useCameraSettingsStore().currentPipelineSettings.contourIntersection"
-          label="Target Intersection"
-          tooltip="If target grouping is in dual mode it will use this dropdown to decide how targets are grouped with adjacent targets"
-          :select-cols="interactiveCols"
-          :items="['None','Up','Down','Left','Right']"
-          :disabled="useCameraSettingsStore().currentPipelineSettings.contourGroupingMode === 0"
-          @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourIntersection: value}, false)"
+        v-model="useCameraSettingsStore().currentPipelineSettings.contourIntersection"
+        label="Target Intersection"
+        tooltip="If target grouping is in dual mode it will use this dropdown to decide how targets are grouped with adjacent targets"
+        :select-cols="interactiveCols"
+        :items="['None','Up','Down','Left','Right']"
+        :disabled="useCameraSettingsStore().currentPipelineSettings.contourGroupingMode === 0"
+        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourIntersection: value}, false)"
       />
     </template>
     <template v-else-if="currentPipelineSettings.pipelineType === PipelineType.ColoredShape">
       <v-divider class="mt-3" />
       <cv-select
-          v-model="currentPipelineSettings.contourShape"
-          label="Target Shape"
-          tooltip="The shape of targets to look for"
-          :select-cols="interactiveCols"
-          :items="['Circle', 'Polygon', 'Triangle', 'Quadrilateral']"
-          @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourShape: value}, false)"
+        v-model="currentPipelineSettings.contourShape"
+        label="Target Shape"
+        tooltip="The shape of targets to look for"
+        :select-cols="interactiveCols"
+        :items="['Circle', 'Polygon', 'Triangle', 'Quadrilateral']"
+        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourShape: value}, false)"
       />
       <cv-slider
         v-model="currentPipelineSettings.accuracyPercentage"
@@ -163,51 +163,51 @@ const interactiveCols = computed(() => (getCurrentInstance()?.proxy.$vuetify.bre
         @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({accuracyPercentage: value}, false)"
       />
       <cv-slider
-          v-model="currentPipelineSettings.circleDetectThreshold"
-          :disabled="currentPipelineSettings.contourShape !== 0"
-          label="Circle match distance"
-          tooltip="How close the centroid of a contour must be to the center of a circle in order for them to be matched"
-          :min="1"
-          :max="100"
-          :slider-cols="interactiveCols"
-          @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({circleDetectThreshold: value}, false)"
+        v-model="currentPipelineSettings.circleDetectThreshold"
+        :disabled="currentPipelineSettings.contourShape !== 0"
+        label="Circle match distance"
+        tooltip="How close the centroid of a contour must be to the center of a circle in order for them to be matched"
+        :min="1"
+        :max="100"
+        :slider-cols="interactiveCols"
+        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({circleDetectThreshold: value}, false)"
       />
       <cv-range-slider
-          v-model="contourRadius"
-          :disabled="currentPipelineSettings.contourShape !== 0"
-          label="Radius"
-          :min="0"
-          :max="100"
-          :slider-cols="interactiveCols"
-          @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourRadius: value}, false)"
+        v-model="contourRadius"
+        :disabled="currentPipelineSettings.contourShape !== 0"
+        label="Radius"
+        :min="0"
+        :max="100"
+        :slider-cols="interactiveCols"
+        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourRadius: value}, false)"
       />
       <cv-slider
-          v-model="currentPipelineSettings.maxCannyThresh"
-          :disabled="currentPipelineSettings.contourShape !== 0"
-          label="Max Canny Threshold"
-          :min="1"
-          :max="100"
-          :slider-cols="interactiveCols"
-          @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({maxCannyThresh: value}, false)"
+        v-model="currentPipelineSettings.maxCannyThresh"
+        :disabled="currentPipelineSettings.contourShape !== 0"
+        label="Max Canny Threshold"
+        :min="1"
+        :max="100"
+        :slider-cols="interactiveCols"
+        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({maxCannyThresh: value}, false)"
       />
       <cv-slider
-          v-model="currentPipelineSettings.circleAccuracy"
-          :disabled="currentPipelineSettings.contourShape !== 0"
-          label="Circle Accuracy"
-          :min="1"
-          :max="100"
-          :slider-cols="interactiveCols"
-          @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({circleAccuracy: value}, false)"
+        v-model="currentPipelineSettings.circleAccuracy"
+        :disabled="currentPipelineSettings.contourShape !== 0"
+        label="Circle Accuracy"
+        :min="1"
+        :max="100"
+        :slider-cols="interactiveCols"
+        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({circleAccuracy: value}, false)"
       />
       <v-divider class="mt-3" />
     </template>
     <cv-select
-        v-model="useCameraSettingsStore().currentPipelineSettings.contourSortMode"
-        label="Target Sort"
-        tooltip="Chooses the sorting mode used to determine the 'best' targets to provide to user code"
-        :select-cols="interactiveCols"
-        :items="['Largest','Smallest','Highest','Lowest','Rightmost','Leftmost','Centermost']"
-        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourSortMode: value}, false)"
+      v-model="useCameraSettingsStore().currentPipelineSettings.contourSortMode"
+      label="Target Sort"
+      tooltip="Chooses the sorting mode used to determine the 'best' targets to provide to user code"
+      :select-cols="interactiveCols"
+      :items="['Largest','Smallest','Highest','Lowest','Rightmost','Leftmost','Centermost']"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourSortMode: value}, false)"
     />
   </div>
 </template>
diff --git a/photon-client/src/components/dashboard/PipelineConfigTabs/InputTab.vue b/photon-client/src/components/dashboard/PipelineConfigTabs/InputTab.vue
index 7f9da91f8c..6523b4b84f 100644
--- a/photon-client/src/components/dashboard/PipelineConfigTabs/InputTab.vue
+++ b/photon-client/src/components/dashboard/PipelineConfigTabs/InputTab.vue
@@ -48,85 +48,85 @@ const interactiveCols = computed(() => (getCurrentInstance()?.proxy.$vuetify.bre
 <template>
   <div>
     <cv-slider
-        v-model="useCameraSettingsStore().currentPipelineSettings.cameraExposure"
-        :disabled="useCameraSettingsStore().currentCameraSettings.pipelineSettings.cameraAutoExposure"
-        label="Exposure"
-        tooltip="Directly controls how much light is allowed to fall onto the sensor, which affects apparent brightness"
-        :min="0"
-        :max="100"
-        :slider-cols="interactiveCols"
-        :step="0.1"
-        @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraExposure: args}, false)"
+      v-model="useCameraSettingsStore().currentPipelineSettings.cameraExposure"
+      :disabled="useCameraSettingsStore().currentCameraSettings.pipelineSettings.cameraAutoExposure"
+      label="Exposure"
+      tooltip="Directly controls how much light is allowed to fall onto the sensor, which affects apparent brightness"
+      :min="0"
+      :max="100"
+      :slider-cols="interactiveCols"
+      :step="0.1"
+      @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraExposure: args}, false)"
     />
     <cv-slider
-        v-model="useCameraSettingsStore().currentPipelineSettings.cameraBrightness"
-        label="Brightness"
-        :min="0"
-        :max="100"
-        :slider-cols="interactiveCols"
-        @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraBrightness: args}, false)"
+      v-model="useCameraSettingsStore().currentPipelineSettings.cameraBrightness"
+      label="Brightness"
+      :min="0"
+      :max="100"
+      :slider-cols="interactiveCols"
+      @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraBrightness: args}, false)"
     />
     <cv-switch
-        v-model="useCameraSettingsStore().currentPipelineSettings.cameraAutoExposure"
-        class="pt-2"
-        label="Auto Exposure"
-        :switch-cols="interactiveCols"
-        tooltip="Enables or Disables camera automatic adjustment for current lighting conditions"
-        @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraAutoExposure: args}, false)"
+      v-model="useCameraSettingsStore().currentPipelineSettings.cameraAutoExposure"
+      class="pt-2"
+      label="Auto Exposure"
+      :switch-cols="interactiveCols"
+      tooltip="Enables or Disables camera automatic adjustment for current lighting conditions"
+      @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraAutoExposure: args}, false)"
     />
     <cv-slider
-        v-if="useCameraSettingsStore().currentPipelineSettings.cameraGain >= 0"
-        v-model="useCameraSettingsStore().currentPipelineSettings.cameraGain"
-        label="Camera Gain"
-        tooltip="Controls camera gain, similar to brightness"
-        :min="0"
-        :max="100"
-        :slider-cols="interactiveCols"
-        @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraGain: args}, false)"
+      v-if="useCameraSettingsStore().currentPipelineSettings.cameraGain >= 0"
+      v-model="useCameraSettingsStore().currentPipelineSettings.cameraGain"
+      label="Camera Gain"
+      tooltip="Controls camera gain, similar to brightness"
+      :min="0"
+      :max="100"
+      :slider-cols="interactiveCols"
+      @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraGain: args}, false)"
     />
     <cv-slider
-        v-if="useCameraSettingsStore().currentPipelineSettings.cameraRedGain !== -1"
-        v-model="useCameraSettingsStore().currentPipelineSettings.cameraRedGain"
-        label="Red AWB Gain"
-        :min="0"
-        :max="100"
-        :slider-cols="interactiveCols"
-        tooltip="Controls red automatic white balance gain, which affects how the camera captures colors in different conditions"
-        @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraRedGain: args}, false)"
+      v-if="useCameraSettingsStore().currentPipelineSettings.cameraRedGain !== -1"
+      v-model="useCameraSettingsStore().currentPipelineSettings.cameraRedGain"
+      label="Red AWB Gain"
+      :min="0"
+      :max="100"
+      :slider-cols="interactiveCols"
+      tooltip="Controls red automatic white balance gain, which affects how the camera captures colors in different conditions"
+      @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraRedGain: args}, false)"
     />
     <cv-slider
-        v-if="useCameraSettingsStore().currentPipelineSettings.cameraBlueGain !== -1"
-        v-model="useCameraSettingsStore().currentPipelineSettings.cameraBlueGain"
-        label="Blue AWB Gain"
-        :min="0"
-        :max="100"
-        :slider-cols="interactiveCols"
-        tooltip="Controls blue automatic white balance gain, which affects how the camera captures colors in different conditions"
-        @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraBlueGain: args}, false)"
+      v-if="useCameraSettingsStore().currentPipelineSettings.cameraBlueGain !== -1"
+      v-model="useCameraSettingsStore().currentPipelineSettings.cameraBlueGain"
+      label="Blue AWB Gain"
+      :min="0"
+      :max="100"
+      :slider-cols="interactiveCols"
+      tooltip="Controls blue automatic white balance gain, which affects how the camera captures colors in different conditions"
+      @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraBlueGain: args}, false)"
     />
     <cv-select
-        v-model="useCameraSettingsStore().currentPipelineSettings.inputImageRotationMode"
-        label="Orientation"
-        tooltip="Rotates the camera stream"
-        :items="cameraRotations"
-        :select-cols="interactiveCols"
-        @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({inputImageRotationMode: args}, false)"
+      v-model="useCameraSettingsStore().currentPipelineSettings.inputImageRotationMode"
+      label="Orientation"
+      tooltip="Rotates the camera stream"
+      :items="cameraRotations"
+      :select-cols="interactiveCols"
+      @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({inputImageRotationMode: args}, false)"
     />
     <cv-select
-        v-model="useCameraSettingsStore().currentPipelineSettings.cameraVideoModeIndex"
-        label="Resolution"
-        tooltip="Resolution and FPS the camera should directly capture at"
-        :items="cameraResolutions"
-        :select-cols="interactiveCols"
-        @input="args => handleResolutionChange(args)"
+      v-model="useCameraSettingsStore().currentPipelineSettings.cameraVideoModeIndex"
+      label="Resolution"
+      tooltip="Resolution and FPS the camera should directly capture at"
+      :items="cameraResolutions"
+      :select-cols="interactiveCols"
+      @input="args => handleResolutionChange(args)"
     />
     <cv-select
-        v-model="useCameraSettingsStore().currentPipelineSettings.streamingFrameDivisor"
-        label="Stream Resolution"
-        tooltip="Resolution to which camera frames are downscaled for streaming to the dashboard"
-        :items="streamResolutions"
-        :select-cols="interactiveCols"
-        @input="args => handleStreamResolutionChange(args)"
+      v-model="useCameraSettingsStore().currentPipelineSettings.streamingFrameDivisor"
+      label="Stream Resolution"
+      tooltip="Resolution to which camera frames are downscaled for streaming to the dashboard"
+      :items="streamResolutions"
+      :select-cols="interactiveCols"
+      @input="args => handleStreamResolutionChange(args)"
     />
   </div>
 </template>
diff --git a/photon-client/src/components/dashboard/PipelineConfigTabs/Map3DTab.vue b/photon-client/src/components/dashboard/PipelineConfigTabs/Map3DTab.vue
index 21c57da550..77fc5853fb 100644
--- a/photon-client/src/components/dashboard/PipelineConfigTabs/Map3DTab.vue
+++ b/photon-client/src/components/dashboard/PipelineConfigTabs/Map3DTab.vue
@@ -22,14 +22,16 @@ const trackedTargets = computed<PhotonTarget[]>(() => useStateStore().pipelineRe
 <template>
   <div>
     <v-row style="width: 100%">
-      <v-col
-      >
+      <v-col>
         <span class="white--text">Target Visualization</span>
       </v-col>
     </v-row>
     <v-row style="width: 100%">
       <v-col style="display: flex; align-items: center; justify-content: center">
-        <photon3d-visualizer :horizontal-f-o-v="horizontalFOV" :targets="trackedTargets"/>
+        <photon3d-visualizer
+          :horizontal-f-o-v="horizontalFOV"
+          :targets="trackedTargets"
+        />
       </v-col>
     </v-row>
   </div>
diff --git a/photon-client/src/components/dashboard/PipelineConfigTabs/OutputTab.vue b/photon-client/src/components/dashboard/PipelineConfigTabs/OutputTab.vue
index a9fdd8e67c..02a637c7e5 100644
--- a/photon-client/src/components/dashboard/PipelineConfigTabs/OutputTab.vue
+++ b/photon-client/src/components/dashboard/PipelineConfigTabs/OutputTab.vue
@@ -41,64 +41,75 @@ const interactiveCols = computed(() => (getCurrentInstance()?.proxy.$vuetify.bre
 <template>
   <div>
     <cv-select
-        v-model="useCameraSettingsStore().currentPipelineSettings.contourTargetOffsetPointEdge"
-        label="Target Offset Point"
-        tooltip="Changes where the 'center' of the target is (used for calculating e.g. pitch and yaw)"
-        :items="['Center','Top','Bottom','Left','Right']"
-        :select-cols="interactiveCols"
-        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourTargetOffsetPointEdge: value}, false)"
+      v-model="useCameraSettingsStore().currentPipelineSettings.contourTargetOffsetPointEdge"
+      label="Target Offset Point"
+      tooltip="Changes where the 'center' of the target is (used for calculating e.g. pitch and yaw)"
+      :items="['Center','Top','Bottom','Left','Right']"
+      :select-cols="interactiveCols"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourTargetOffsetPointEdge: value}, false)"
     />
     <cv-select
-        v-if="!isTagPipeline"
-        v-model="useCameraSettingsStore().currentPipelineSettings.contourTargetOrientation"
-        label="Target Orientation"
-        tooltip="Used to determine how to calculate target landmarks (e.g. the top, left, or bottom of the target)"
-        :items="['Portrait', 'Landscape']"
-        :select-cols="interactiveCols"
-        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourTargetOrientation: value}, false)"
+      v-if="!isTagPipeline"
+      v-model="useCameraSettingsStore().currentPipelineSettings.contourTargetOrientation"
+      label="Target Orientation"
+      tooltip="Used to determine how to calculate target landmarks (e.g. the top, left, or bottom of the target)"
+      :items="['Portrait', 'Landscape']"
+      :select-cols="interactiveCols"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourTargetOrientation: value}, false)"
     />
     <cv-switch
-        v-model="useCameraSettingsStore().currentPipelineSettings.outputShowMultipleTargets"
-        label="Show Multiple Targets"
-        tooltip="If enabled, up to five targets will be displayed and sent to user code, instead of just one"
-        :disabled="isTagPipeline"
-        :switch-cols="interactiveCols"
-        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({outputShowMultipleTargets: value}, false)"
+      v-model="useCameraSettingsStore().currentPipelineSettings.outputShowMultipleTargets"
+      label="Show Multiple Targets"
+      tooltip="If enabled, up to five targets will be displayed and sent to user code, instead of just one"
+      :disabled="isTagPipeline"
+      :switch-cols="interactiveCols"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({outputShowMultipleTargets: value}, false)"
     />
-    <v-divider/>
-    <table class="metrics-table mt-3 mb-3" v-if="useCameraSettingsStore().currentPipelineSettings.offsetRobotOffsetMode !== RobotOffsetPointMode.None">
+    <v-divider />
+    <table
+      v-if="useCameraSettingsStore().currentPipelineSettings.offsetRobotOffsetMode !== RobotOffsetPointMode.None"
+      class="metrics-table mt-3 mb-3"
+    >
       <tr>
-        <th v-for="(item, itemIndex) in offsetPoints" :key="itemIndex" class="metric-item metric-item-title">
-          {{item.header}}
+        <th
+          v-for="(item, itemIndex) in offsetPoints"
+          :key="itemIndex"
+          class="metric-item metric-item-title"
+        >
+          {{ item.header }}
         </th>
       </tr>
       <tr>
-        <td v-for="(item, itemIndex) in offsetPoints" :key="itemIndex" class="metric-item">
-          {{item.value}}
+        <td
+          v-for="(item, itemIndex) in offsetPoints"
+          :key="itemIndex"
+          class="metric-item"
+        >
+          {{ item.value }}
         </td>
       </tr>
     </table>
     <cv-select
-        v-model="useCameraSettingsStore().currentPipelineSettings.offsetRobotOffsetMode"
-        label="Robot Offset Mode"
-        tooltip="Used to add an arbitrary offset to the location of the targeting crosshair"
-        :items="['None','Single Point','Dual Point']"
-        :select-cols="interactiveCols"
-        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({offsetRobotOffsetMode: value}, false)"
+      v-model="useCameraSettingsStore().currentPipelineSettings.offsetRobotOffsetMode"
+      label="Robot Offset Mode"
+      tooltip="Used to add an arbitrary offset to the location of the targeting crosshair"
+      :items="['None','Single Point','Dual Point']"
+      :select-cols="interactiveCols"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({offsetRobotOffsetMode: value}, false)"
     />
     <v-row
-        v-if="useCameraSettingsStore().currentPipelineSettings.offsetRobotOffsetMode !== RobotOffsetPointMode.None"
-        align="center"
-        justify="start"
+      v-if="useCameraSettingsStore().currentPipelineSettings.offsetRobotOffsetMode !== RobotOffsetPointMode.None"
+      align="center"
+      justify="start"
     >
       <v-row v-if="useCameraSettingsStore().currentPipelineSettings.offsetRobotOffsetMode === RobotOffsetPointMode.Single">
         <v-col>
           <v-btn
-              small
-              color="accent"
-              style="width: 100%;"
-              class="black--text"
-              @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.Single)"
+            small
+            color="accent"
+            style="width: 100%;"
+            class="black--text"
+            @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.Single)"
           >
             Take Point
           </v-btn>
@@ -107,22 +118,22 @@ const interactiveCols = computed(() => (getCurrentInstance()?.proxy.$vuetify.bre
       <v-row v-else-if="useCameraSettingsStore().currentPipelineSettings.offsetRobotOffsetMode === RobotOffsetPointMode.Dual">
         <v-col>
           <v-btn
-              small
-              color="accent"
-              style="width: 100%;"
-              class="black--text"
-              @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.DualFirst)"
+            small
+            color="accent"
+            style="width: 100%;"
+            class="black--text"
+            @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.DualFirst)"
           >
             Take First Point
           </v-btn>
         </v-col>
         <v-col>
           <v-btn
-              small
-              color="accent"
-              style="width: 100%;"
-              class="black--text"
-              @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.DualSecond)"
+            small
+            color="accent"
+            style="width: 100%;"
+            class="black--text"
+            @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.DualSecond)"
           >
             Take Second Point
           </v-btn>
@@ -130,10 +141,10 @@ const interactiveCols = computed(() => (getCurrentInstance()?.proxy.$vuetify.bre
       </v-row>
       <v-col>
         <v-btn
-            small
-            color="yellow darken-3"
-            style="width: 100%;"
-            @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.Clear)"
+          small
+          color="yellow darken-3"
+          style="width: 100%;"
+          @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.Clear)"
         >
           Clear All Points
         </v-btn>
diff --git a/photon-client/src/components/dashboard/PipelineConfigTabs/PnPTab.vue b/photon-client/src/components/dashboard/PipelineConfigTabs/PnPTab.vue
index 59fb0fabed..225fbad678 100644
--- a/photon-client/src/components/dashboard/PipelineConfigTabs/PnPTab.vue
+++ b/photon-client/src/components/dashboard/PipelineConfigTabs/PnPTab.vue
@@ -12,30 +12,30 @@ const interactiveCols = computed(() => (getCurrentInstance()?.proxy.$vuetify.bre
 <template>
   <div>
     <cv-select
-        v-model="useCameraSettingsStore().currentPipelineSettings.targetModel"
-        label="Target Model"
-        :items="[
-            {name: '2020 High Goal Outer', value: TargetModel.k2020HighGoalOuter},
-            {name: '2020 High Goal Inner', value: TargetModel.k2020HighGoalInner},
-            {name: '2019 Dual Target', value: TargetModel.k2019DualTarget},
-            {name: '2020 Power Cell (7in)', value: TargetModel.kCircularPowerCell7in},
-            {name: '2022 Cargo Ball (9.5in)', value: TargetModel.k2022CircularCargoBall},
-            {name: '2016 High Goal', value: TargetModel.k2016HighGoal},
-            {name: '200mm AprilTag', value: TargetModel.k200mmAprilTag},
-            {name: '6in (16h5) Aruco', value: TargetModel.kAruco6in_16h5},
-            {name: '6in (16h5) AprilTag', value: TargetModel.k6in_16h5}
-        ]"
-        :select-cols="interactiveCols"
-        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({targetModel: value}, false)"
+      v-model="useCameraSettingsStore().currentPipelineSettings.targetModel"
+      label="Target Model"
+      :items="[
+        {name: '2020 High Goal Outer', value: TargetModel.k2020HighGoalOuter},
+        {name: '2020 High Goal Inner', value: TargetModel.k2020HighGoalInner},
+        {name: '2019 Dual Target', value: TargetModel.k2019DualTarget},
+        {name: '2020 Power Cell (7in)', value: TargetModel.kCircularPowerCell7in},
+        {name: '2022 Cargo Ball (9.5in)', value: TargetModel.k2022CircularCargoBall},
+        {name: '2016 High Goal', value: TargetModel.k2016HighGoal},
+        {name: '200mm AprilTag', value: TargetModel.k200mmAprilTag},
+        {name: '6in (16h5) Aruco', value: TargetModel.kAruco6in_16h5},
+        {name: '6in (16h5) AprilTag', value: TargetModel.k6in_16h5}
+      ]"
+      :select-cols="interactiveCols"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({targetModel: value}, false)"
     />
     <cv-slider
-        v-model="useCameraSettingsStore().currentPipelineSettings.cornerDetectionAccuracyPercentage"
-        class="pt-2"
-        :slider-cols="interactiveCols"
-        label="Contour simplification Percentage"
-        :min="0"
-        :max="100"
-        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({cornerDetectionAccuracyPercentage: value}, false)"
+      v-model="useCameraSettingsStore().currentPipelineSettings.cornerDetectionAccuracyPercentage"
+      class="pt-2"
+      :slider-cols="interactiveCols"
+      label="Contour simplification Percentage"
+      :min="0"
+      :max="100"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({cornerDetectionAccuracyPercentage: value}, false)"
     />
   </div>
 </template>
diff --git a/photon-client/src/components/dashboard/PipelineConfigTabs/TargetsTab.vue b/photon-client/src/components/dashboard/PipelineConfigTabs/TargetsTab.vue
index 31b66bac0f..9e9d5db817 100644
--- a/photon-client/src/components/dashboard/PipelineConfigTabs/TargetsTab.vue
+++ b/photon-client/src/components/dashboard/PipelineConfigTabs/TargetsTab.vue
@@ -7,26 +7,26 @@ import { useStateStore } from "@/stores/StateStore";
 <template>
   <div>
     <v-row
-        align="start"
-        class="pb-4"
-        style="height: 300px;"
+      align="start"
+      class="pb-4"
+      style="height: 300px;"
     >
       <!-- Simple table height must be set here and in the CSS for the fixed-header to work -->
       <v-simple-table
-          fixed-header
-          height="100%"
-          dense
-          dark
+        fixed-header
+        height="100%"
+        dense
+        dark
       >
-        <template v-slot:default>
+        <template #default>
           <thead style="font-size: 1.25rem;">
             <tr>
               <th class="text-center">
                 Target Count
               </th>
               <th
-                  v-if="useCameraSettingsStore().currentPipelineType === PipelineType.AprilTag || useCameraSettingsStore().currentPipelineType === PipelineType.Aruco"
-                  class="text-center"
+                v-if="useCameraSettingsStore().currentPipelineType === PipelineType.AprilTag || useCameraSettingsStore().currentPipelineType === PipelineType.Aruco"
+                class="text-center"
               >
                 Fiducial ID
               </th>
@@ -63,29 +63,29 @@ import { useStateStore } from "@/stores/StateStore";
             </tr>
           </thead>
           <tbody>
-          <tr
-            v-for="(target, index) in useStateStore().pipelineResults?.targets"
-            :key="index"
-          >
-            <td>{{ index }}</td>
-            <td v-if="useCameraSettingsStore().currentPipelineType === PipelineType.AprilTag || useCameraSettingsStore().currentPipelineType === PipelineType.Aruco">
-              {{target.fiducialId}}
-            </td>
-            <template v-if="!useCameraSettingsStore().currentPipelineSettings.solvePNPEnabled">
-              <td>{{target.pitch.toFixed(2)}}&deg;</td>
-              <td>{{target.yaw.toFixed(2)}}&deg;</td>
-              <td>{{target.skew.toFixed(2)}}&deg;</td>
-              <td>{{target.area.toFixed(2)}}&deg;</td>
-            </template>
-            <template v-else-if="useCameraSettingsStore().currentPipelineSettings.solvePNPEnabled">
-              <td>{{target.pose?.x.toFixed(2)}}&nbsp;m</td>
-              <td>{{target.pose?.y.toFixed(2)}}&nbsp;m</td>
-              <td>{{(target.pose?.angle_z * 180.0 / Math.PI).toFixed(2)}}&deg;</td>
-            </template>
-            <template v-if="useCameraSettingsStore().currentPipelineType === PipelineType.AprilTag && useCameraSettingsStore().currentPipelineSettings.solvePNPEnabled">
-              <td>{{target.ambiguity?.toFixed(2)}}%</td>
-            </template>
-          </tr>
+            <tr
+              v-for="(target, index) in useStateStore().pipelineResults?.targets"
+              :key="index"
+            >
+              <td>{{ index }}</td>
+              <td v-if="useCameraSettingsStore().currentPipelineType === PipelineType.AprilTag || useCameraSettingsStore().currentPipelineType === PipelineType.Aruco">
+                {{ target.fiducialId }}
+              </td>
+              <template v-if="!useCameraSettingsStore().currentPipelineSettings.solvePNPEnabled">
+                <td>{{ target.pitch.toFixed(2) }}&deg;</td>
+                <td>{{ target.yaw.toFixed(2) }}&deg;</td>
+                <td>{{ target.skew.toFixed(2) }}&deg;</td>
+                <td>{{ target.area.toFixed(2) }}&deg;</td>
+              </template>
+              <template v-else-if="useCameraSettingsStore().currentPipelineSettings.solvePNPEnabled">
+                <td>{{ target.pose?.x.toFixed(2) }}&nbsp;m</td>
+                <td>{{ target.pose?.y.toFixed(2) }}&nbsp;m</td>
+                <td>{{ (target.pose?.angle_z * 180.0 / Math.PI).toFixed(2) }}&deg;</td>
+              </template>
+              <template v-if="useCameraSettingsStore().currentPipelineType === PipelineType.AprilTag && useCameraSettingsStore().currentPipelineSettings.solvePNPEnabled">
+                <td>{{ target.ambiguity?.toFixed(2) }}%</td>
+              </template>
+            </tr>
           </tbody>
         </template>
       </v-simple-table>
diff --git a/photon-client/src/components/dashboard/PipelineConfigTabs/ThresholdTab.vue b/photon-client/src/components/dashboard/PipelineConfigTabs/ThresholdTab.vue
index 79691ceddd..357dc51910 100644
--- a/photon-client/src/components/dashboard/PipelineConfigTabs/ThresholdTab.vue
+++ b/photon-client/src/components/dashboard/PipelineConfigTabs/ThresholdTab.vue
@@ -106,7 +106,10 @@ const interactiveCols = computed(() => (getCurrentInstance()?.proxy.$vuetify.bre
 </script>
 
 <template>
-  <div class="threshold-modifiers" :style="{'--averageHue': averageHue}">
+  <div
+    class="threshold-modifiers"
+    :style="{'--averageHue': averageHue}"
+  >
     <cv-range-slider
       id="hue-slider"
       v-model="hsvHue"
@@ -120,51 +123,51 @@ const interactiveCols = computed(() => (getCurrentInstance()?.proxy.$vuetify.bre
       @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({hsvHue: value}, false)"
     />
     <cv-range-slider
-        id="sat-slider"
-        v-model="hsvSaturation"
-        class="normal-slider"
-        label="Saturation"
-        tooltip="Describes colorfulness; the smaller this value the 'whiter' the color becomes"
-        :min="0"
-        :max="255"
-        :slider-cols="interactiveCols"
-        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({hsvSaturation: value}, false)"
+      id="sat-slider"
+      v-model="hsvSaturation"
+      class="normal-slider"
+      label="Saturation"
+      tooltip="Describes colorfulness; the smaller this value the 'whiter' the color becomes"
+      :min="0"
+      :max="255"
+      :slider-cols="interactiveCols"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({hsvSaturation: value}, false)"
     />
     <cv-range-slider
-        id="value-slider"
-        v-model="hsvValue"
-        class="normal-slider"
-        label="Value"
-        tooltip="Describes lightness; the smaller this value the 'blacker' the color becomes"
-        :min="0"
-        :max="255"
-        :slider-cols="interactiveCols"
-        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({hsvValue: value}, false)"
+      id="value-slider"
+      v-model="hsvValue"
+      class="normal-slider"
+      label="Value"
+      tooltip="Describes lightness; the smaller this value the 'blacker' the color becomes"
+      :min="0"
+      :max="255"
+      :slider-cols="interactiveCols"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({hsvValue: value}, false)"
     />
     <cv-switch
-        v-model="useCameraSettingsStore().currentPipelineSettings.hueInverted"
-        label="Invert Hue"
-        :switch-cols="interactiveCols"
-        tooltip="Selects the hue range outside of the hue slider bounds instead of inside"
-        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({hueInverted: value}, false)"
+      v-model="useCameraSettingsStore().currentPipelineSettings.hueInverted"
+      label="Invert Hue"
+      :switch-cols="interactiveCols"
+      tooltip="Selects the hue range outside of the hue slider bounds instead of inside"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({hueInverted: value}, false)"
     />
     <v-divider
-        class="mt-3"
+      class="mt-3"
     />
     <div>
       <div class="pt-3 white--text">
         Color Picker
       </div>
       <v-row
-          justify="center"
-          class="mt-3 mb-3"
+        justify="center"
+        class="mt-3 mb-3"
       >
         <template v-if="!useStateStore().colorPickingMode">
           <v-btn
-              color="accent"
-              class="ma-2 black--text"
-              small
-              @click="enableColorPicking(useCameraSettingsStore().currentPipelineSettings.hueInverted ? 2 : 3)"
+            color="accent"
+            class="ma-2 black--text"
+            small
+            @click="enableColorPicking(useCameraSettingsStore().currentPipelineSettings.hueInverted ? 2 : 3)"
           >
             <v-icon left>
               mdi-minus
@@ -172,10 +175,10 @@ const interactiveCols = computed(() => (getCurrentInstance()?.proxy.$vuetify.bre
             Shrink Range
           </v-btn>
           <v-btn
-              color="accent"
-              class="ma-2 black--text"
-              small
-              @click="enableColorPicking(1)"
+            color="accent"
+            class="ma-2 black--text"
+            small
+            @click="enableColorPicking(1)"
           >
             <v-icon left>
               mdi-plus-minus
@@ -183,10 +186,10 @@ const interactiveCols = computed(() => (getCurrentInstance()?.proxy.$vuetify.bre
             {{ useCameraSettingsStore().currentPipelineSettings.hueInverted ? "Exclude" : "Set to" }} Average
           </v-btn>
           <v-btn
-              color="accent"
-              class="ma-2 black--text"
-              small
-              @click="enableColorPicking(useCameraSettingsStore().currentPipelineSettings.hueInverted ? 3: 2)"
+            color="accent"
+            class="ma-2 black--text"
+            small
+            @click="enableColorPicking(useCameraSettingsStore().currentPipelineSettings.hueInverted ? 3: 2)"
           >
             <v-icon left>
               mdi-plus
@@ -196,11 +199,11 @@ const interactiveCols = computed(() => (getCurrentInstance()?.proxy.$vuetify.bre
         </template>
         <template v-else>
           <v-btn
-              color="accent"
-              class="ma-2 black--text"
-              style="width: 30%;"
-              small
-              @click="disableColorPicking"
+            color="accent"
+            class="ma-2 black--text"
+            style="width: 30%;"
+            small
+            @click="disableColorPicking"
           >
             Cancel
           </v-btn>
diff --git a/photon-client/src/components/dashboard/StreamConfigCard.vue b/photon-client/src/components/dashboard/StreamConfigCard.vue
index 652a9c87a1..9f7b29790c 100644
--- a/photon-client/src/components/dashboard/StreamConfigCard.vue
+++ b/photon-client/src/components/dashboard/StreamConfigCard.vue
@@ -35,28 +35,28 @@ const processingMode = computed<number>({
     color="primary"
   >
     <v-row
-        align="center"
-        class="pa-sm-3"
+      align="center"
+      class="pa-sm-3"
     >
       <v-col lg="12">
         <p style="color: white;">
           Processing Mode
         </p>
         <v-btn-toggle
-            v-model="processingMode"
-            mandatory
-            dark
-            class="fill"
+          v-model="processingMode"
+          mandatory
+          dark
+          class="fill"
         >
           <v-btn
-              color="secondary"
+            color="secondary"
           >
             <v-icon>mdi-square-outline</v-icon>
             <span>2D</span>
           </v-btn>
           <v-btn
-              color="secondary"
-              :disabled="!useCameraSettingsStore().isCurrentVideoFormatCalibrated"
+            color="secondary"
+            :disabled="!useCameraSettingsStore().isCurrentVideoFormatCalibrated"
           >
             <v-icon>mdi-cube-outline</v-icon>
             <span>3D</span>
@@ -68,22 +68,22 @@ const processingMode = computed<number>({
           Stream Display
         </p>
         <v-btn-toggle
-            v-model="localValue"
-            :multiple="true"
-            mandatory
-            dark
-            class="fill"
+          v-model="localValue"
+          :multiple="true"
+          mandatory
+          dark
+          class="fill"
         >
           <v-btn
-              color="secondary"
-              class="fill"
+            color="secondary"
+            class="fill"
           >
             <v-icon>mdi-import</v-icon>
             <span>Raw</span>
           </v-btn>
           <v-btn
-              color="secondary"
-              class="fill"
+            color="secondary"
+            class="fill"
           >
             <v-icon>mdi-export</v-icon>
             <span>Processed</span>
diff --git a/photon-client/src/components/settings/DeviceControlCard.vue b/photon-client/src/components/settings/DeviceControlCard.vue
index 9af5f87319..b78f1a962b 100644
--- a/photon-client/src/components/settings/DeviceControlCard.vue
+++ b/photon-client/src/components/settings/DeviceControlCard.vue
@@ -189,21 +189,21 @@ const handleSettingsImport = () => {
 
 <template>
   <v-card
-      dark
-      class="mb-3 pr-6 pb-3"
-      style="background-color: #006492;"
+    dark
+    class="mb-3 pr-6 pb-3"
+    style="background-color: #006492;"
   >
     <v-card-title>Device Control</v-card-title>
     <div class="ml-5">
       <v-row>
         <v-col
-            cols="12"
-            lg="4"
-            md="6"
+          cols="12"
+          lg="4"
+          md="6"
         >
           <v-btn
-              color="red"
-              @click="restartProgram"
+            color="red"
+            @click="restartProgram"
           >
             <v-icon left>
               mdi-restart
@@ -212,13 +212,13 @@ const handleSettingsImport = () => {
           </v-btn>
         </v-col>
         <v-col
-            cols="12"
-            lg="4"
-            md="6"
+          cols="12"
+          lg="4"
+          md="6"
         >
           <v-btn
-              color="red"
-              @click="restartDevice"
+            color="red"
+            @click="restartDevice"
           >
             <v-icon left>
               mdi-restart-alert
@@ -227,12 +227,12 @@ const handleSettingsImport = () => {
           </v-btn>
         </v-col>
         <v-col
-            cols="12"
-            lg="4"
+          cols="12"
+          lg="4"
         >
           <v-btn
-              color="secondary"
-              @click="openOfflineUpdatePrompt"
+            color="secondary"
+            @click="openOfflineUpdatePrompt"
           >
             <v-icon left>
               mdi-upload
@@ -240,23 +240,23 @@ const handleSettingsImport = () => {
             Offline Update
           </v-btn>
           <input
-              ref="offlineUpdate"
-              type="file"
-              accept=".jar"
-              style="display: none;"
-              @change="handleOfflineUpdate"
+            ref="offlineUpdate"
+            type="file"
+            accept=".jar"
+            style="display: none;"
+            @change="handleOfflineUpdate"
           >
         </v-col>
       </v-row>
-      <v-divider style="margin: 12px 0;"/>
+      <v-divider style="margin: 12px 0;" />
       <v-row>
         <v-col
-            cols="12"
-            sm="6"
+          cols="12"
+          sm="6"
         >
           <v-btn
-              color="secondary"
-              @click="() => showImportDialog = true"
+            color="secondary"
+            @click="() => showImportDialog = true"
           >
             <v-icon left>
               mdi-import
@@ -264,50 +264,50 @@ const handleSettingsImport = () => {
             Import Settings
           </v-btn>
           <v-dialog
-              v-model="showImportDialog"
-              width="600"
-              @input="() => {
-                importType = -1;
-                importFile = null;
-              }"
+            v-model="showImportDialog"
+            width="600"
+            @input="() => {
+              importType = -1;
+              importFile = null;
+            }"
           >
             <v-card
-                color="primary"
-                dark
+              color="primary"
+              dark
             >
               <v-card-title>Import Settings</v-card-title>
               <v-card-text>
                 Upload and apply previously saved or exported PhotonVision settings to this device
                 <v-row
-                    class="mt-6 ml-4"
+                  class="mt-6 ml-4"
                 >
                   <cv-select
-                      v-model="importType"
-                      label="Type"
-                      tooltip="Select the type of settings file you are trying to upload"
-                      :items="['All Settings', 'Hardware Config', 'Hardware Settings', 'Network Config']"
-                      :select-cols="10"
+                    v-model="importType"
+                    label="Type"
+                    tooltip="Select the type of settings file you are trying to upload"
+                    :items="['All Settings', 'Hardware Config', 'Hardware Settings', 'Network Config']"
+                    :select-cols="10"
                   />
                 </v-row>
                 <v-row
-                    class="mt-6 ml-4 mr-8"
+                  class="mt-6 ml-4 mr-8"
                 >
                   <v-file-input
-                      :disabled="importType === -1"
-                      :error-messages="importType === -1 ? 'Settings type not selected' : ''"
-                      :accept="importType === ImportType.AllSettings ? '.zip' : '.json'"
-                      @change="(file) => importFile = file"
+                    :disabled="importType === -1"
+                    :error-messages="importType === -1 ? 'Settings type not selected' : ''"
+                    :accept="importType === ImportType.AllSettings ? '.zip' : '.json'"
+                    @change="(file) => importFile = file"
                   />
                 </v-row>
                 <v-row
-                    class="mt-12 ml-8 mr-8 mb-1"
-                    style="display: flex; align-items: center; justify-content: center"
-                    align="center"
+                  class="mt-12 ml-8 mr-8 mb-1"
+                  style="display: flex; align-items: center; justify-content: center"
+                  align="center"
                 >
                   <v-btn
-                      color="secondary"
-                      :disabled="importFile === null"
-                      @click="handleSettingsImport"
+                    color="secondary"
+                    :disabled="importFile === null"
+                    @click="handleSettingsImport"
                   >
                     <v-icon left>
                       mdi-import
@@ -320,12 +320,12 @@ const handleSettingsImport = () => {
           </v-dialog>
         </v-col>
         <v-col
-            cols="12"
-            sm="6"
+          cols="12"
+          sm="6"
         >
           <v-btn
-              color="secondary"
-              @click="openExportSettingsPrompt"
+            color="secondary"
+            @click="openExportSettingsPrompt"
           >
             <v-icon left>
               mdi-export
@@ -333,20 +333,20 @@ const handleSettingsImport = () => {
             Export Settings
           </v-btn>
           <a
-              ref="exportSettings"
-              style="color: black; text-decoration: none; display: none"
-              :href="`http://${address}/api/settings/photonvision_config.zip`"
-              download="photonvision-settings.zip"
-              target="_blank"
+            ref="exportSettings"
+            style="color: black; text-decoration: none; display: none"
+            :href="`http://${address}/api/settings/photonvision_config.zip`"
+            download="photonvision-settings.zip"
+            target="_blank"
           />
         </v-col>
         <v-col
-            cols="12"
-            sm="6"
+          cols="12"
+          sm="6"
         >
           <v-btn
-              color="secondary"
-              @click="openExportLogsPrompt"
+            color="secondary"
+            @click="openExportLogsPrompt"
           >
             <v-icon left>
               mdi-download
@@ -355,21 +355,21 @@ const handleSettingsImport = () => {
 
             <!-- Special hidden link that gets 'clicked' when the user exports journalctl logs -->
             <a
-                ref="exportLogFile"
-                style="color: black; text-decoration: none; display: none"
-                :href="'http://' + address + '/api/utils/logs/photonvision-journalctl.txt'"
-                download="photonvision-journalctl.txt"
-                target="_blank"
+              ref="exportLogFile"
+              style="color: black; text-decoration: none; display: none"
+              :href="'http://' + address + '/api/utils/logs/photonvision-journalctl.txt'"
+              download="photonvision-journalctl.txt"
+              target="_blank"
             />
           </v-btn>
         </v-col>
         <v-col
-            cols="12"
-            sm="6"
+          cols="12"
+          sm="6"
         >
           <v-btn
-              color="secondary"
-              @click="useStateStore().showLogModal = true"
+            color="secondary"
+            @click="useStateStore().showLogModal = true"
           >
             <v-icon left>
               mdi-eye
diff --git a/photon-client/src/components/settings/LightingControlCard.vue b/photon-client/src/components/settings/LightingControlCard.vue
index 02f850d121..0a792a4604 100644
--- a/photon-client/src/components/settings/LightingControlCard.vue
+++ b/photon-client/src/components/settings/LightingControlCard.vue
@@ -5,20 +5,20 @@ import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
 
 <template>
   <v-card
-      dark
-      class="mb-3 pr-6 pb-3"
-      style="background-color: #006492;"
+    dark
+    class="mb-3 pr-6 pb-3"
+    style="background-color: #006492;"
   >
     <v-card-title>Lighting Control</v-card-title>
     <div class="ml-5">
       <cv-slider
-          v-model="useSettingsStore().lighting.brightness"
-          label="Brightness"
-          class="pt-2"
-          :slider-cols="12"
-          :min="0"
-          :max="100"
-          @input="args => useSettingsStore().changeLEDBrightness(args)"
+        v-model="useSettingsStore().lighting.brightness"
+        label="Brightness"
+        class="pt-2"
+        :slider-cols="12"
+        :min="0"
+        :max="100"
+        @input="args => useSettingsStore().changeLEDBrightness(args)"
       />
     </div>
   </v-card>
diff --git a/photon-client/src/components/settings/MetricsCard.vue b/photon-client/src/components/settings/MetricsCard.vue
index ff7e3096e4..4b98ffbcdc 100644
--- a/photon-client/src/components/settings/MetricsCard.vue
+++ b/photon-client/src/components/settings/MetricsCard.vue
@@ -82,47 +82,73 @@ onBeforeMount(() => {
 
 <template>
   <v-card
-      dark
-      class="mb-3 pr-6 pb-3"
-      style="background-color: #006492;"
+    dark
+    class="mb-3 pr-6 pb-3"
+    style="background-color: #006492;"
   >
     <v-card-title style="display: flex; justify-content: space-between">
       <span>Stats</span>
       <cv-icon
-          icon-name="mdi-reload"
-          color="white"
-          tooltip="Reload Metrics"
-          hover
-          @click="fetchMetrics"
+        icon-name="mdi-reload"
+        color="white"
+        tooltip="Reload Metrics"
+        hover
+        @click="fetchMetrics"
       />
     </v-card-title>
     <v-row class="pa-4 ml-5">
       <div style="width: 100%">
-        <v-card-subtitle class="ma-0 pa-0 pb-2">PhotonVision General Metrics</v-card-subtitle>
-        <table id="general-metrics" class="metrics-table">
+        <v-card-subtitle class="ma-0 pa-0 pb-2">
+          PhotonVision General Metrics
+        </v-card-subtitle>
+        <table
+          id="general-metrics"
+          class="metrics-table"
+        >
           <tr>
-            <th v-for="(item, itemIndex) in generalMetrics" :key="itemIndex" class="metric-item metric-item-title">
-              {{item.header}}
+            <th
+              v-for="(item, itemIndex) in generalMetrics"
+              :key="itemIndex"
+              class="metric-item metric-item-title"
+            >
+              {{ item.header }}
             </th>
           </tr>
           <tr>
-            <td v-for="(item, itemIndex) in generalMetrics" :key="itemIndex" class="metric-item">
-              {{item.value}}
+            <td
+              v-for="(item, itemIndex) in generalMetrics"
+              :key="itemIndex"
+              class="metric-item"
+            >
+              {{ item.value }}
             </td>
           </tr>
         </table>
       </div>
       <div style="width: 100%">
-        <v-card-subtitle class="ma-0 pa-0 pb-2">PhotonVision Hardware Metrics</v-card-subtitle>
-        <table id="device-metrics" class="metrics-table">
+        <v-card-subtitle class="ma-0 pa-0 pb-2">
+          PhotonVision Hardware Metrics
+        </v-card-subtitle>
+        <table
+          id="device-metrics"
+          class="metrics-table"
+        >
           <tr>
-            <th v-for="(item, itemIndex) in platformMetrics" :key="itemIndex" class="metric-item metric-item-title">
-              {{item.header}}
+            <th
+              v-for="(item, itemIndex) in platformMetrics"
+              :key="itemIndex"
+              class="metric-item metric-item-title"
+            >
+              {{ item.header }}
             </th>
           </tr>
           <tr>
-            <td v-for="(item, itemIndex) in platformMetrics" :key="itemIndex" class="metric-item">
-              <span v-if="useSettingsStore().metrics.cpuUtil !== undefined">{{item.value}}</span>
+            <td
+              v-for="(item, itemIndex) in platformMetrics"
+              :key="itemIndex"
+              class="metric-item"
+            >
+              <span v-if="useSettingsStore().metrics.cpuUtil !== undefined">{{ item.value }}</span>
               <span v-else>---</span>
             </td>
           </tr>
diff --git a/photon-client/src/components/settings/NetworkingCard.vue b/photon-client/src/components/settings/NetworkingCard.vue
index 72d9b7cefd..0363f77445 100644
--- a/photon-client/src/components/settings/NetworkingCard.vue
+++ b/photon-client/src/components/settings/NetworkingCard.vue
@@ -77,15 +77,15 @@ const saveGeneralSettings = () => {
 
 <template>
   <v-card
-      dark
-      class="mb-3 pr-6 pb-3"
-      style="background-color: #006492;"
+    dark
+    class="mb-3 pr-6 pb-3"
+    style="background-color: #006492;"
   >
     <v-card-title>Networking</v-card-title>
     <div class="ml-5">
       <v-form
-          ref="form"
-          v-model="settingsValid"
+        ref="form"
+        v-model="settingsValid"
       >
         <cv-input
           v-model="useSettingsStore().network.ntServerAddress"
@@ -106,34 +106,33 @@ const saveGeneralSettings = () => {
           The NetworkTables Server Address is not set or is invalid. NetworkTables is unable to connect.
         </v-banner>
         <cv-radio
-            v-show="useSettingsStore().network.shouldMange"
-            v-model="useSettingsStore().network.connectionType"
-            label="IP Assignment Mode"
-            tooltip="DHCP will make the radio (router) automatically assign an IP address; this may result in an IP address that changes across reboots. Static IP assignment means that you pick the IP address and it won't change."
-            :input-cols="12-3"
-            :list="['DHCP','Static']"
+          v-show="useSettingsStore().network.shouldMange"
+          v-model="useSettingsStore().network.connectionType"
+          label="IP Assignment Mode"
+          tooltip="DHCP will make the radio (router) automatically assign an IP address; this may result in an IP address that changes across reboots. Static IP assignment means that you pick the IP address and it won't change."
+          :input-cols="12-3"
+          :list="['DHCP','Static']"
         />
         <cv-input
-            v-if="useSettingsStore().network.connectionType === NetworkConnectionType.Static"
-            v-model="useSettingsStore().network.staticIp"
-            :input-cols="12-3"
-            label="Static IP"
-            :rules="[v => isValidIPv4(v) || 'Invalid IPv4 address']"
+          v-if="useSettingsStore().network.connectionType === NetworkConnectionType.Static"
+          v-model="useSettingsStore().network.staticIp"
+          :input-cols="12-3"
+          label="Static IP"
+          :rules="[v => isValidIPv4(v) || 'Invalid IPv4 address']"
         />
         <cv-input
-            v-show="useSettingsStore().network.shouldMange"
-            v-model="useSettingsStore().network.hostname"
-            label="Hostname"
-            :input-cols="12-3"
-            :rules="[v => isValidHostname(v) || 'Invalid hostname']"
-
+          v-show="useSettingsStore().network.shouldMange"
+          v-model="useSettingsStore().network.hostname"
+          label="Hostname"
+          :input-cols="12-3"
+          :rules="[v => isValidHostname(v) || 'Invalid hostname']"
         />
         <cv-switch
-            v-model="useSettingsStore().network.runNTServer"
-            label="Run NetworkTables Server (Debugging Only)"
-            tooltip="If enabled, this device will create a NT server. This is useful for home debugging, but should be disabled on-robot."
-            class="mt-3 mb-3"
-            :label-cols="3"
+          v-model="useSettingsStore().network.runNTServer"
+          label="Run NetworkTables Server (Debugging Only)"
+          tooltip="If enabled, this device will create a NT server. This is useful for home debugging, but should be disabled on-robot."
+          class="mt-3 mb-3"
+          :label-cols="3"
         />
         <v-banner
           v-show="useSettingsStore().network.runNTServer"
@@ -146,11 +145,11 @@ const saveGeneralSettings = () => {
         </v-banner>
       </v-form>
       <v-btn
-          color="accent"
-          :class="useSettingsStore().network.runNTServer ? 'mt-3' : ''"
-          style="color: black; width: 100%;"
-          :disabled="!settingsValid && !useSettingsStore().network.runNTServer"
-          @click="saveGeneralSettings"
+        color="accent"
+        :class="useSettingsStore().network.runNTServer ? 'mt-3' : ''"
+        style="color: black; width: 100%;"
+        :disabled="!settingsValid && !useSettingsStore().network.runNTServer"
+        @click="saveGeneralSettings"
       >
         Save
       </v-btn>
diff --git a/photon-client/src/views/CameraSettingsView.vue b/photon-client/src/views/CameraSettingsView.vue
index c200467ec4..b9711458b3 100644
--- a/photon-client/src/views/CameraSettingsView.vue
+++ b/photon-client/src/views/CameraSettingsView.vue
@@ -14,25 +14,25 @@ onMounted(() => {
 <template>
   <div>
     <v-row
-        no-gutters
-        class="pa-3"
+      no-gutters
+      class="pa-3"
     >
       <v-col
-          cols="12"
-          md="7"
+        cols="12"
+        md="7"
       >
-        <CamerasCard/>
-        <CalibrationCard/>
+        <CamerasCard />
+        <CalibrationCard />
       </v-col>
       <v-col
-          class="pl-md-3 pt-3 pt-md-0"
-          cols="12"
-          style="display: flex; align-items: center"
-          md="5"
+        class="pl-md-3 pt-3 pt-md-0"
+        cols="12"
+        style="display: flex; align-items: center"
+        md="5"
       >
         <photon-camera-stream
-            stream-type="Processed"
-            style="width: 100%"
+          stream-type="Processed"
+          style="width: 100%"
         />
       </v-col>
     </v-row>
diff --git a/photon-client/src/views/DashboardView.vue b/photon-client/src/views/DashboardView.vue
index f772956ba0..086f1b4c40 100644
--- a/photon-client/src/views/DashboardView.vue
+++ b/photon-client/src/views/DashboardView.vue
@@ -37,32 +37,32 @@ const cameraViewType = computed<number[]>({
 
 <template>
   <v-container
-      class="pa-3"
-      fluid
+    class="pa-3"
+    fluid
   >
     <v-row
-        no-gutters
-        align="center"
-        justify="center"
+      no-gutters
+      align="center"
+      justify="center"
     >
       <v-col
-          cols="12"
-          :class="['pb-3 ', 'pr-lg-3']"
-          lg="8"
-          align-self="stretch"
+        cols="12"
+        :class="['pb-3 ', 'pr-lg-3']"
+        lg="8"
+        align-self="stretch"
       >
-        <CamerasCard v-model="cameraViewType"/>
+        <CamerasCard v-model="cameraViewType" />
       </v-col>
       <v-col
-          cols="12"
-          class="pb-3"
-          lg="4"
-          style="display: flex; flex-direction: column"
+        cols="12"
+        class="pb-3"
+        lg="4"
+        style="display: flex; flex-direction: column"
       >
-        <PipelineConfigCard/>
-        <StreamConfigCard v-model="cameraViewType"/>
+        <PipelineConfigCard />
+        <StreamConfigCard v-model="cameraViewType" />
       </v-col>
     </v-row>
-    <OperationConfigCard/>
+    <OperationConfigCard />
   </v-container>
 </template>
diff --git a/photon-client/src/views/DocsView.vue b/photon-client/src/views/DocsView.vue
index aea64def76..e5c8a5d9ec 100644
--- a/photon-client/src/views/DocsView.vue
+++ b/photon-client/src/views/DocsView.vue
@@ -4,11 +4,11 @@ const devMode = process.env.NODE_ENV === "development";
 
 <template>
   <div
-      style="overflow:hidden; height:100%; width:100%"
+    style="overflow:hidden; height:100%; width:100%"
   >
     <div
-        v-if="devMode"
-        style="width: 100%; height: 100%; padding: 16px"
+      v-if="devMode"
+      style="width: 100%; height: 100%; padding: 16px"
     >
       <span style="color: white; font-weight: bold">
         PhotonClient is in development mode so the documentation page will not load.
@@ -16,13 +16,13 @@ const devMode = process.env.NODE_ENV === "development";
       </span>
     </div>
     <div
-        v-else
-        style="width: 100%; height: 100%"
+      v-else
+      style="width: 100%; height: 100%"
     >
       <!--suppress HtmlUnknownTarget -->
       <iframe
-          src="docs/index.html"
-          style="overflow:hidden; height:100%; width:100%; border: 0"
+        src="docs/index.html"
+        style="overflow:hidden; height:100%; width:100%; border: 0"
       />
     </div>
   </div>
diff --git a/photon-client/src/views/GeneralSettingsView.vue b/photon-client/src/views/GeneralSettingsView.vue
index f88de44aa7..e76696e8b7 100644
--- a/photon-client/src/views/GeneralSettingsView.vue
+++ b/photon-client/src/views/GeneralSettingsView.vue
@@ -8,17 +8,17 @@ import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
 
 <template>
   <v-row
-      class="pa-3"
-      no-gutters
+    class="pa-3"
+    no-gutters
   >
     <v-col
-        cols="12"
-        style="max-width: 1400px"
+      cols="12"
+      style="max-width: 1400px"
     >
-      <MetricsCard/>
-      <DeviceControlCard/>
-      <NetworkingCard/>
-      <LightingControlCard v-if="useSettingsStore().lighting.supported"/>
+      <MetricsCard />
+      <DeviceControlCard />
+      <NetworkingCard />
+      <LightingControlCard v-if="useSettingsStore().lighting.supported" />
     </v-col>
   </v-row>
 </template>
diff --git a/photon-client/src/views/NotFoundView.vue b/photon-client/src/views/NotFoundView.vue
index ea4ee157f7..9e71928661 100644
--- a/photon-client/src/views/NotFoundView.vue
+++ b/photon-client/src/views/NotFoundView.vue
@@ -9,9 +9,9 @@
       </v-card-subtitle>
     </div>
     <img
-        src="@/assets/images/notfound.webp"
-        alt="missing-page"
-        style="margin-top: 64px"
+      src="@/assets/images/notfound.webp"
+      alt="missing-page"
+      style="margin-top: 64px"
     >
   </div>
 </template>