From d449e6bc08c3312f13220be56cbe1644c6a070aa Mon Sep 17 00:00:00 2001
From: Devolian <devondoyle@outlook.com>
Date: Sun, 13 Jul 2025 04:03:33 -0400
Subject: [PATCH 01/16] Save

---
 photon-client/src/App.vue                     |  6 +-
 .../assets/images/logoSmallTransparent.svg    | 25 ++++++
 .../src/assets/styles/variables.scss          |  4 +
 .../src/components/app/photon-sidebar.vue     | 38 +++++++-
 .../cameras/CameraCalibrationCard.vue         | 21 ++---
 .../components/cameras/CameraControlCard.vue  |  4 +-
 .../components/cameras/CameraSettingsCard.vue | 11 +--
 .../src/components/common/pv-slider.vue       | 10 +--
 .../src/components/common/pv-switch.vue       | 16 +---
 .../dashboard/CameraAndPipelineSelectCard.vue |  7 +-
 .../src/components/dashboard/CamerasCard.vue  |  7 +-
 .../components/dashboard/ConfigOptions.vue    | 54 +++---------
 .../components/dashboard/StreamConfigCard.vue | 17 ++--
 .../components/dashboard/tabs/TargetsTab.vue  |  1 -
 .../settings/ApriltagControlCard.vue          | 14 ++-
 .../components/settings/DeviceControlCard.vue | 39 +++------
 .../src/components/settings/MetricsCard.vue   | 86 ++++++-------------
 .../components/settings/NetworkingCard.vue    | 12 +--
 photon-client/src/plugins/vuetify.ts          | 81 +++++++++++------
 .../src/main/resources/web/index.html         | 15 +++-
 20 files changed, 232 insertions(+), 236 deletions(-)
 create mode 100644 photon-client/src/assets/images/logoSmallTransparent.svg

diff --git a/photon-client/src/App.vue b/photon-client/src/App.vue
index b23e2c756e..98b193ccd6 100644
--- a/photon-client/src/App.vue
+++ b/photon-client/src/App.vue
@@ -100,7 +100,7 @@ if (!is_demo) {
 }
 
 .main-container {
-  background-color: #232c37;
+  // background-color: #232c37;
   padding: 0 !important;
 }
 
@@ -114,4 +114,8 @@ if (!is_demo) {
 div.v-layout {
   overflow: unset !important;
 }
+
+.v-card.rounded-lg {
+  border-radius: 12px !important;
+}
 </style>
diff --git a/photon-client/src/assets/images/logoSmallTransparent.svg b/photon-client/src/assets/images/logoSmallTransparent.svg
new file mode 100644
index 0000000000..8abba5d008
--- /dev/null
+++ b/photon-client/src/assets/images/logoSmallTransparent.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 508 507" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     xml:space="preserve"
+     style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-1279,0)">
+        <g id="PhotonVision-Icon-BG" transform="matrix(0.264062,0,0,0.469444,1279.5,0)">
+            <rect x="0" y="0" width="1920" height="1080" style="fill:none;"/>
+            <clipPath id="_clip1">
+                <rect x="0" y="0" width="1920" height="1080"/>
+            </clipPath>
+            <g clip-path="url(#_clip1)">
+                <g transform="matrix(4.27015,0,0,2.40196,-20444.8,-3235.56)">
+                    <circle cx="5012.55" cy="1571.77" r="224.918" style="fill:rgb(0,100,146,0);"/>
+                </g>
+                <g transform="matrix(4.95901,0,0,2.78944,-13955,-10313.5)">
+                    <path d="M3055.09,3977.51C3050.3,3984.25 3045,3990.56 3039.21,3996.35C2987.91,4047.65 2917.1,4038.77 2881.16,3976.54C2845.23,3914.3 2857.71,3822.13 2909.01,3770.83C2960.31,3719.53 3031.13,3728.41 3067.06,3790.64C3069.85,3795.48 3072.35,3800.49 3074.56,3805.67L3039.78,3811.64C3012.82,3769.64 2962.9,3764.58 2926.45,3801.04C2888.89,3838.59 2879.76,3906.07 2906.07,3951.63C2932.37,3997.19 2984.22,4003.69 3021.77,3966.14L3021.89,3966.01L3055.09,3977.51ZM3085.02,3841.47C3090.86,3875.56 3086.6,3912.35 3073.22,3944.57L3043.91,3934.42C3056.74,3907.59 3060.53,3875.54 3054.13,3846.78L3085.02,3841.47Z" style="fill:white;"/>
+                </g>
+                <g transform="matrix(4.95901,0,0,2.78944,-13955,-3827.86)">
+                    <path d="M2906.78,1571.77L3111.02,1642.48L3116.61,1626.34L3147.2,1664.74L3099.42,1675.99L3105,1659.86L2910.03,1592.35C2908.25,1585.69 2907.18,1578.77 2906.78,1571.77ZM2917.45,1517.07L3114.77,1483.17L3111.88,1466.34L3157.2,1485.21L3120.78,1518.13L3117.88,1501.3L2910.22,1536.97C2911.99,1530.09 2914.41,1523.4 2917.45,1517.07Z" style="fill:rgb(255,216,67);"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/photon-client/src/assets/styles/variables.scss b/photon-client/src/assets/styles/variables.scss
index f1181d8c22..e56ad0a3f0 100644
--- a/photon-client/src/assets/styles/variables.scss
+++ b/photon-client/src/assets/styles/variables.scss
@@ -72,3 +72,7 @@ html {
 .pa-10px {
   padding: 10px !important;
 }
+
+.rounded-12 {
+  border-radius: 12px;
+}
\ No newline at end of file
diff --git a/photon-client/src/components/app/photon-sidebar.vue b/photon-client/src/components/app/photon-sidebar.vue
index e8e2d619b0..64e3dd247f 100644
--- a/photon-client/src/components/app/photon-sidebar.vue
+++ b/photon-client/src/components/app/photon-sidebar.vue
@@ -4,7 +4,7 @@ import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
 import { useStateStore } from "@/stores/StateStore";
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import { useRoute } from "vue-router";
-import { useDisplay } from "vuetify";
+import { useDisplay, useTheme } from "vuetify";
 
 const compact = computed<boolean>({
   get: () => {
@@ -16,17 +16,19 @@ const compact = computed<boolean>({
 });
 const { mdAndUp } = useDisplay();
 
+const theme = useTheme();
+
 const renderCompact = computed<boolean>(() => compact.value || !mdAndUp.value);
 </script>
 
 <template>
-  <v-navigation-drawer permanent :rail="renderCompact" color="primary">
-    <v-list nav>
+  <v-navigation-drawer permanent :rail="renderCompact" color="sidebar">
+    <v-list nav color="accent">
       <!-- 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="renderCompact ? 'pr-0 pl-0' : ''" style="display: flex; justify-content: center">
         <template #prepend>
           <img v-if="!renderCompact" class="logo" src="@/assets/images/logoLarge.svg" alt="large logo" />
-          <img v-else class="logo" src="@/assets/images/logoSmall.svg" alt="small logo" />
+          <img v-else class="logo" src="@/assets/images/logoSmallTransparent.svg" alt="small logo" />
         </template>
       </v-list-item>
 
@@ -61,6 +63,15 @@ const renderCompact = computed<boolean>(() => compact.value || !mdAndUp.value);
     </v-list>
     <template #append>
       <v-list nav>
+        <v-list-item
+          v-if="mdAndUp"
+          link
+          :prepend-icon="`mdi-chevron-${compact || !mdAndUp ? 'right' : 'left'}`"
+          @click="theme.global.name.value = theme.global.name.value === 'LightTheme' ? 'DarkTheme' : 'LightTheme'"
+        >
+          <v-list-item-title>Theme</v-list-item-title>
+        </v-list-item>
+
         <v-list-item
           v-if="mdAndUp"
           link
@@ -114,6 +125,25 @@ const renderCompact = computed<boolean>(() => compact.value || !mdAndUp.value);
 </template>
 
 <style scoped>
+/* .v-navigation-drawer {
+  margin: 12px !important;
+  width: calc(256px - 24px) !important;
+  height: calc(100% - 24px) !important;
+  border-radius: 12px;
+}
+
+.v-navigation-drawer--rail {
+  width: calc(56px - 24px) !important;
+} */
+
+.v-navigation-drawer {
+  border: none;
+}
+
+.v-navigation-drawer--rail {
+  border: none;
+}
+
 .v-list-item-title {
   font-size: 1rem !important;
   line-height: 1.2rem !important;
diff --git a/photon-client/src/components/cameras/CameraCalibrationCard.vue b/photon-client/src/components/cameras/CameraCalibrationCard.vue
index abcf8cba35..d1dda0dacd 100644
--- a/photon-client/src/components/cameras/CameraCalibrationCard.vue
+++ b/photon-client/src/components/cameras/CameraCalibrationCard.vue
@@ -128,10 +128,7 @@ const downloadCalibBoard = () => {
       charucoImage.src = CharucoImage;
       doc.addImage(charucoImage, "PNG", 0.25, 1.5, 8, 8);
 
-      doc.text("8 x 8 | 1in & 0.75in", paperWidth - 1, 1.0, {
-        maxWidth: (paperWidth - 2.0) / 2,
-        align: "right"
-      });
+      doc.text("8 x 8 | 1in & 0.75in", paperWidth - 1, 1.0, { maxWidth: (paperWidth - 2.0) / 2, align: "right" });
 
       break;
   }
@@ -214,7 +211,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
 
 <template>
   <div>
-    <v-card class="mb-3" color="primary" dark>
+    <v-card class="mb-3 rounded-12" color="surface" dark>
       <v-card-title>Camera Calibration</v-card-title>
       <v-card-text v-show="!isCalibrating">
         <v-card-subtitle class="pt-0 pl-0 pr-0 text-white">Current Calibration</v-card-subtitle>
@@ -241,7 +238,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
               <v-tooltip location="bottom">
                 <template #activator="{ props }">
                   <td v-bind="props" @click="setSelectedVideoFormat(value)">
-                    <v-icon size="small">mdi-information</v-icon>
+                    <v-icon size="small" color="primary">mdi-information</v-icon>
                   </td>
                 </template>
                 <span>Click for more info on this calibration.</span>
@@ -336,8 +333,8 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
               <v-banner
                 v-if="useSettingsStore().general.mrCalWorking"
                 rounded
-                bg-color="secondary"
-                color="secondary"
+                bg-color="accent"
+                color="accent"
                 text-color="white"
                 icon="mdi-alert-circle-outline"
               >
@@ -460,7 +457,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
             <v-btn
               size="small"
               block
-              color="secondary"
+              color="accent"
               :disabled="!settingsValid || tooManyPoints"
               @click="isCalibrating ? useCameraSettingsStore().takeCalibrationSnapshot() : startCalibration()"
             >
@@ -487,7 +484,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
         </div>
         <div class="pt-5">
           <v-btn
-            color="accent"
+            color="secondary"
             size="small"
             block
             variant="outlined"
@@ -559,12 +556,12 @@ th {
 
   th,
   td {
-    background-color: #006492 !important;
+    // background-color: #006492 !important;
     font-size: 1rem !important;
   }
 
   tbody :hover td {
-    background-color: #005281 !important;
+    // background-color: #005281 !important;
     cursor: pointer;
   }
 
diff --git a/photon-client/src/components/cameras/CameraControlCard.vue b/photon-client/src/components/cameras/CameraControlCard.vue
index 348a622f27..7f65edb931 100644
--- a/photon-client/src/components/cameras/CameraControlCard.vue
+++ b/photon-client/src/components/cameras/CameraControlCard.vue
@@ -91,10 +91,10 @@ const expanded = ref([]);
 </script>
 
 <template>
-  <v-card style="background-color: #006492">
+  <v-card color="surface">
     <v-card-title>Camera Control</v-card-title>
     <v-card-text class="pt-0">
-      <v-btn color="secondary" @click="fetchSnapshots">
+      <v-btn color="accent" @click="fetchSnapshots">
         <v-icon start class="open-icon"> mdi-folder </v-icon>
         <span class="open-label">Show Saved Snapshots</span>
       </v-btn>
diff --git a/photon-client/src/components/cameras/CameraSettingsCard.vue b/photon-client/src/components/cameras/CameraSettingsCard.vue
index 8b53203d9b..7f4974e6a4 100644
--- a/photon-client/src/components/cameras/CameraSettingsCard.vue
+++ b/photon-client/src/components/cameras/CameraSettingsCard.vue
@@ -73,10 +73,7 @@ const saveCameraSettings = () => {
   useCameraSettingsStore()
     .updateCameraSettings(tempSettingsStruct.value)
     .then((response) => {
-      useStateStore().showSnackbarMessage({
-        color: "success",
-        message: response.data.text || response.data
-      });
+      useStateStore().showSnackbarMessage({ color: "success", message: response.data.text || response.data });
 
       // Update the local settings cause the backend checked their validity. Assign is to deref value
       useCameraSettingsStore().currentCameraSettings.fov.value = tempSettingsStruct.value.fov;
@@ -125,9 +122,7 @@ const deleteThisCamera = () => {
   if (deletingCamera.value) return;
   deletingCamera.value = true;
 
-  const payload = {
-    cameraUniqueName: useStateStore().currentCameraUniqueName
-  };
+  const payload = { cameraUniqueName: useStateStore().currentCameraUniqueName };
 
   axios
     .post("/utils/nukeOneCamera", payload)
@@ -169,7 +164,7 @@ const wrappedCameras = computed<SelectItem[]>(() =>
 </script>
 
 <template>
-  <v-card class="mb-3" color="primary" dark>
+  <v-card class="mb-3 rounded-12" color="surface" dark>
     <v-card-title class="pb-0">Camera Settings</v-card-title>
     <v-card-text class="pt-3">
       <pv-select
diff --git a/photon-client/src/components/common/pv-slider.vue b/photon-client/src/components/common/pv-slider.vue
index 7f3cebd6bb..aa84ec4b3b 100644
--- a/photon-client/src/components/common/pv-slider.vue
+++ b/photon-client/src/components/common/pv-slider.vue
@@ -13,15 +13,9 @@ const props = withDefaults(
     disabled?: boolean;
     sliderCols?: number;
   }>(),
-  {
-    step: 1,
-    disabled: false,
-    sliderCols: 8
-  }
+  { step: 1, disabled: false, sliderCols: 8 }
 );
-const emit = defineEmits<{
-  (e: "update:modelValue", value: number): void;
-}>();
+const emit = defineEmits<{ (e: "update:modelValue", value: number): void }>();
 
 // Debounce function
 function debounce(func: (...args: any[]) => void, wait: number) {
diff --git a/photon-client/src/components/common/pv-switch.vue b/photon-client/src/components/common/pv-switch.vue
index 5bd06d95aa..de15b9484d 100644
--- a/photon-client/src/components/common/pv-switch.vue
+++ b/photon-client/src/components/common/pv-switch.vue
@@ -3,18 +3,8 @@ import TooltippedLabel from "@/components/common/pv-tooltipped-label.vue";
 
 const value = defineModel<boolean>();
 withDefaults(
-  defineProps<{
-    label?: string;
-    tooltip?: string;
-    disabled?: boolean;
-    labelCols?: number;
-    switchCols?: number;
-  }>(),
-  {
-    disabled: false,
-    labelCols: 2,
-    switchCols: 8
-  }
+  defineProps<{ label?: string; tooltip?: string; disabled?: boolean; labelCols?: number; switchCols?: number }>(),
+  { disabled: false, labelCols: 2, switchCols: 8 }
 );
 </script>
 
@@ -24,7 +14,7 @@ withDefaults(
       <tooltipped-label :tooltip="tooltip" :label="label" />
     </v-col>
     <v-col :cols="switchCols || 12 - labelCols" class="d-flex align-center pr-0">
-      <v-switch v-model="value" :disabled="disabled" color="#ffd843" hide-details density="compact" />
+      <v-switch v-model="value" :disabled="disabled" color="accent" hide-details density="compact" />
     </v-col>
   </div>
 </template>
diff --git a/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue b/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
index 860fcafe09..be6fa10b2b 100644
--- a/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
+++ b/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
@@ -53,10 +53,7 @@ const saveCameraNameEdit = (newName: string) => {
   useCameraSettingsStore()
     .changeCameraNickname(newName, false)
     .then((response) => {
-      useStateStore().showSnackbarMessage({
-        color: "success",
-        message: response.data.text || response.data
-      });
+      useStateStore().showSnackbarMessage({ color: "success", message: response.data.text || response.data });
       useCameraSettingsStore().currentCameraSettings.nickname = newName;
     })
     .catch((error) => {
@@ -241,7 +238,7 @@ const wrappedCameras = computed<SelectItem[]>(() =>
 </script>
 
 <template>
-  <v-card color="primary">
+  <v-card color="surface" class="rounded-12">
     <v-row no-gutters class="pl-4 pt-2 pb-0">
       <v-col cols="10" class="pa-0">
         <pv-select
diff --git a/photon-client/src/components/dashboard/CamerasCard.vue b/photon-client/src/components/dashboard/CamerasCard.vue
index acb8fd34b3..d7a5293a58 100644
--- a/photon-client/src/components/dashboard/CamerasCard.vue
+++ b/photon-client/src/components/dashboard/CamerasCard.vue
@@ -39,16 +39,15 @@ const performanceRecommendation = computed<string>(() => {
 </script>
 
 <template>
-  <v-card color="primary" height="100%" class="d-flex flex-column" dark>
+  <v-card color="surface" height="100%" class="d-flex flex-column rounded-12" dark>
     <v-card-title class="justify-space-between align-center pt-1 pb-1 d-flex">
       <span>Cameras</span>
       <v-chip
         v-if="useCameraSettingsStore().currentCameraSettings.isConnected"
         label
-        :color="fpsTooLow ? 'error' : ''"
+        :color="fpsTooLow ? 'error' : 'accent'"
         style="font-size: 1rem; padding: 0; margin: 0"
-        :variant="fpsTooLow ? 'tonal' : 'text'"
-        :style="{ color: fpsTooLow ? '#C7EA46' : '#ff4d00' }"
+        variant="text"
       >
         <span class="pr-1"
           >Processing @ {{ Math.round(useStateStore().currentPipelineResults?.fps || 0) }}&nbsp;FPS &ndash;</span
diff --git a/photon-client/src/components/dashboard/ConfigOptions.vue b/photon-client/src/components/dashboard/ConfigOptions.vue
index 03b5b492cc..a18656124f 100644
--- a/photon-client/src/components/dashboard/ConfigOptions.vue
+++ b/photon-client/src/components/dashboard/ConfigOptions.vue
@@ -22,46 +22,16 @@ interface ConfigOption {
 }
 
 const allTabs = Object.freeze({
-  inputTab: {
-    tabName: "Input",
-    component: InputTab
-  },
-  thresholdTab: {
-    tabName: "Threshold",
-    component: ThresholdTab
-  },
-  contoursTab: {
-    tabName: "Contours",
-    component: ContoursTab
-  },
-  apriltagTab: {
-    tabName: "AprilTag",
-    component: AprilTagTab
-  },
-  arucoTab: {
-    tabName: "Aruco",
-    component: ArucoTab
-  },
-  objectDetectionTab: {
-    tabName: "Object Detection",
-    component: ObjectDetectionTab
-  },
-  outputTab: {
-    tabName: "Output",
-    component: OutputTab
-  },
-  targetsTab: {
-    tabName: "Targets",
-    component: TargetsTab
-  },
-  pnpTab: {
-    tabName: "PnP",
-    component: PnPTab
-  },
-  map3dTab: {
-    tabName: "3D",
-    component: Map3DTab
-  }
+  inputTab: { tabName: "Input", component: InputTab },
+  thresholdTab: { tabName: "Threshold", component: ThresholdTab },
+  contoursTab: { tabName: "Contours", component: ContoursTab },
+  apriltagTab: { tabName: "AprilTag", component: AprilTagTab },
+  arucoTab: { tabName: "Aruco", component: ArucoTab },
+  objectDetectionTab: { tabName: "Object Detection", component: ObjectDetectionTab },
+  outputTab: { tabName: "Output", component: OutputTab },
+  targetsTab: { tabName: "Targets", component: TargetsTab },
+  pnpTab: { tabName: "PnP", component: PnPTab },
+  map3dTab: { tabName: "3D", component: Map3DTab }
 });
 
 const selectedTabs = ref([0, 0, 0, 0]);
@@ -160,8 +130,8 @@ const onBeforeTabUpdate = () => {
         :class="tabGroupIndex !== tabGroups.length - 1 && 'pr-3'"
         @vue:before-update="onBeforeTabUpdate"
       >
-        <v-card color="primary" height="100%" class="pr-5 pl-5">
-          <v-tabs v-model="selectedTabs[tabGroupIndex]" grow bg-color="primary" height="48" slider-color="accent">
+        <v-card color="surface" height="100%" class="pr-5 pl-5 rounded-12">
+          <v-tabs v-model="selectedTabs[tabGroupIndex]" grow bg-color="surface" height="48" slider-color="accent">
             <v-tab v-for="(tabConfig, index) in tabGroupData" :key="index">
               {{ tabConfig.tabName }}
             </v-tab>
diff --git a/photon-client/src/components/dashboard/StreamConfigCard.vue b/photon-client/src/components/dashboard/StreamConfigCard.vue
index 423ae43e6c..5af5c3f325 100644
--- a/photon-client/src/components/dashboard/StreamConfigCard.vue
+++ b/photon-client/src/components/dashboard/StreamConfigCard.vue
@@ -18,8 +18,8 @@ const processingMode = computed<number>({
 <template>
   <v-card
     :disabled="useCameraSettingsStore().isDriverMode || useStateStore().colorPickingMode"
-    class="mt-3"
-    color="primary"
+    class="mt-3 rounded-12"
+    color="surface"
     style="flex-grow: 1; display: flex; flex-direction: column"
   >
     <v-row class="pa-3 pb-0 align-center">
@@ -27,7 +27,7 @@ const processingMode = computed<number>({
         <p style="color: white">Processing Mode</p>
         <v-btn-toggle v-model="processingMode" mandatory base-color="surface-variant" class="fill w-100">
           <v-btn
-            color="secondary"
+            color="toggle"
             :disabled="!useCameraSettingsStore().hasConnected"
             class="w-50"
             prepend-icon="mdi-square-outline"
@@ -35,7 +35,7 @@ const processingMode = computed<number>({
             <span>2D</span>
           </v-btn>
           <v-btn
-            color="secondary"
+            color="toggle"
             :disabled="
               !useCameraSettingsStore().hasConnected || !useCameraSettingsStore().isCurrentVideoFormatCalibrated
             "
@@ -51,11 +51,11 @@ const processingMode = computed<number>({
       <v-col class="pa-4 pt-0">
         <p style="color: white">Stream Display</p>
         <v-btn-toggle v-model="value" :multiple="true" mandatory base-color="surface-variant" class="fill w-100">
-          <v-btn color="secondary" class="fill w-50">
+          <v-btn color="toggle" class="fill w-50">
             <v-icon start class="mode-btn-icon">mdi-import</v-icon>
             <span class="mode-btn-label">Raw</span>
           </v-btn>
-          <v-btn color="secondary" class="fill w-50">
+          <v-btn color="toggle" class="fill w-50">
             <v-icon start class="mode-btn-icon">mdi-export</v-icon>
             <span class="mode-btn-label">Processed</span>
           </v-btn>
@@ -70,6 +70,11 @@ const processingMode = computed<number>({
   background-color: #191919 !important;
 }
 
+.mode-btn-label,
+.mode-btn-label > * {
+  color: white;
+}
+
 th {
   width: 80px;
   text-align: center;
diff --git a/photon-client/src/components/dashboard/tabs/TargetsTab.vue b/photon-client/src/components/dashboard/tabs/TargetsTab.vue
index 8051ab4778..7ac942b707 100644
--- a/photon-client/src/components/dashboard/tabs/TargetsTab.vue
+++ b/photon-client/src/components/dashboard/tabs/TargetsTab.vue
@@ -274,7 +274,6 @@ th {
   padding-right: 8px !important;
 }
 .v-table {
-  background-color: #006492 !important;
   width: 100%;
   font-size: 1rem !important;
 
diff --git a/photon-client/src/components/settings/ApriltagControlCard.vue b/photon-client/src/components/settings/ApriltagControlCard.vue
index 418d22da97..5ff4c456aa 100644
--- a/photon-client/src/components/settings/ApriltagControlCard.vue
+++ b/photon-client/src/components/settings/ApriltagControlCard.vue
@@ -8,23 +8,19 @@ const quaternionToEuler = (rot_quat: Quaternion): { x: number; y: number; z: num
   const quat = new ThreeQuat(rot_quat.X, rot_quat.Y, rot_quat.Z, rot_quat.W);
   const euler = new Euler().setFromQuaternion(quat, "ZYX");
 
-  return {
-    x: toDeg(euler.x),
-    y: toDeg(euler.y),
-    z: toDeg(euler.z)
-  };
+  return { x: toDeg(euler.x), y: toDeg(euler.y), z: toDeg(euler.z) };
 };
 </script>
 
 <template>
-  <v-card style="background-color: #006492">
+  <v-card color="surface" class="rounded-12">
     <v-card-title>AprilTag Field Layout</v-card-title>
     <v-card-text class="pt-0">
       <p>Field width: {{ useSettingsStore().currentFieldLayout.field.width.toFixed(2) }} meters</p>
       <p>Field length: {{ useSettingsStore().currentFieldLayout.field.length.toFixed(2) }} meters</p>
 
       <!-- Simple table height must be set here and in the CSS for the fixed-header to work -->
-      <v-table fixed-header height="100%" density="compact" dark>
+      <v-table fixed-header height="100%" density="compact">
         <template #default>
           <thead style="font-size: 1.25rem">
             <tr>
@@ -57,11 +53,11 @@ const quaternionToEuler = (rot_quat: Quaternion): { x: number; y: number; z: num
   width: 100%;
   height: 100%;
   text-align: center;
-  background-color: #006492 !important;
+  // background-color: #006492 !important;
 
   th,
   td {
-    background-color: #006492 !important;
+    // background-color: #006492 !important;
     font-size: 1rem !important;
     color: white !important;
   }
diff --git a/photon-client/src/components/settings/DeviceControlCard.vue b/photon-client/src/components/settings/DeviceControlCard.vue
index 23c14f025b..ead5336636 100644
--- a/photon-client/src/components/settings/DeviceControlCard.vue
+++ b/photon-client/src/components/settings/DeviceControlCard.vue
@@ -9,10 +9,7 @@ const restartProgram = () => {
   axios
     .post("/utils/restartProgram")
     .then(() => {
-      useStateStore().showSnackbarMessage({
-        message: "Successfully sent program restart request",
-        color: "success"
-      });
+      useStateStore().showSnackbarMessage({ message: "Successfully sent program restart request", color: "success" });
     })
     .catch((error) => {
       // This endpoint always return 204 regardless of outcome
@@ -98,10 +95,7 @@ const handleOfflineUpdate = () => {
       }
     })
     .then((response) => {
-      useStateStore().showSnackbarMessage({
-        message: response.data.text || response.data,
-        color: "success"
-      });
+      useStateStore().showSnackbarMessage({ message: response.data.text || response.data, color: "success" });
     })
     .catch((error) => {
       if (error.response) {
@@ -170,14 +164,9 @@ const handleSettingsImport = () => {
   }
 
   axios
-    .post(`/settings${settingsEndpoint}`, formData, {
-      headers: { "Content-Type": "multipart/form-data" }
-    })
+    .post(`/settings${settingsEndpoint}`, formData, { headers: { "Content-Type": "multipart/form-data" } })
     .then((response) => {
-      useStateStore().showSnackbarMessage({
-        message: response.data.text || response.data,
-        color: "success"
-      });
+      useStateStore().showSnackbarMessage({ message: response.data.text || response.data, color: "success" });
     })
     .catch((error) => {
       if (error.response) {
@@ -238,24 +227,24 @@ const nukePhotonConfigDirectory = () => {
 </script>
 
 <template>
-  <v-card class="mb-3" style="background-color: #006492">
+  <v-card class="mb-3 rounded-12" color="surface">
     <v-card-title>Device Control</v-card-title>
     <div class="pa-5 pt-0">
       <v-row>
         <v-col cols="12" lg="4" md="6">
-          <v-btn color="error" @click="restartProgram">
+          <v-btn color="warning" @click="restartProgram">
             <v-icon start class="open-icon"> mdi-restart </v-icon>
             <span class="open-label">Restart PhotonVision</span>
           </v-btn>
         </v-col>
         <v-col cols="12" lg="4" md="6">
-          <v-btn color="error" @click="restartDevice">
+          <v-btn color="warning" @click="restartDevice">
             <v-icon start class="open-icon"> mdi-restart-alert </v-icon>
             <span class="open-label">Restart Device</span>
           </v-btn>
         </v-col>
         <v-col cols="12" lg="4">
-          <v-btn color="secondary" @click="openOfflineUpdatePrompt">
+          <v-btn color="primary" @click="openOfflineUpdatePrompt">
             <v-icon start class="open-icon"> mdi-upload </v-icon>
             <span class="open-label">Offline Update</span>
           </v-btn>
@@ -265,7 +254,7 @@ const nukePhotonConfigDirectory = () => {
       <v-divider class="mt-3 pb-3" />
       <v-row>
         <v-col cols="12" sm="6">
-          <v-btn color="secondary" @click="() => (showImportDialog = true)">
+          <v-btn color="accent" @click="() => (showImportDialog = true)">
             <v-icon start class="open-icon"> mdi-import </v-icon>
             <span class="open-label">Import Settings</span>
           </v-btn>
@@ -306,7 +295,7 @@ const nukePhotonConfigDirectory = () => {
                     :error-messages="importType === undefined ? 'Settings type not selected' : ''"
                     :accept="importType === ImportType.AllSettings ? '.zip' : '.json'"
                   />
-                  <v-btn color="secondary" :disabled="importFile === null" @click="handleSettingsImport">
+                  <v-btn color="accent" :disabled="importFile === null" @click="handleSettingsImport">
                     <v-icon start class="open-icon"> mdi-import </v-icon>
                     <span class="open-label">Import Settings</span>
                   </v-btn>
@@ -316,7 +305,7 @@ const nukePhotonConfigDirectory = () => {
           </v-dialog>
         </v-col>
         <v-col cols="12" sm="6">
-          <v-btn color="secondary" @click="openExportSettingsPrompt">
+          <v-btn color="accent" @click="openExportSettingsPrompt">
             <v-icon start class="open-icon"> mdi-export </v-icon>
             <span class="open-label">Export Settings</span>
           </v-btn>
@@ -329,7 +318,7 @@ const nukePhotonConfigDirectory = () => {
           />
         </v-col>
         <v-col cols="12" sm="6">
-          <v-btn color="secondary" @click="openExportLogsPrompt">
+          <v-btn color="accent" @click="openExportLogsPrompt">
             <v-icon start class="open-icon"> mdi-download </v-icon>
             <span class="open-label">Download logs</span>
 
@@ -344,7 +333,7 @@ const nukePhotonConfigDirectory = () => {
           </v-btn>
         </v-col>
         <v-col cols="12" sm="6">
-          <v-btn color="secondary" @click="useStateStore().showLogModal = true">
+          <v-btn color="accent" @click="useStateStore().showLogModal = true">
             <v-icon start class="open-icon"> mdi-eye </v-icon>
             <span class="open-label">View program logs</span>
           </v-btn>
@@ -353,7 +342,7 @@ const nukePhotonConfigDirectory = () => {
       <v-divider class="mt-3 pb-3" />
       <v-row>
         <v-col cols="12">
-          <v-btn color="error" @click="() => (showFactoryReset = true)">
+          <v-btn color="secondary" @click="() => (showFactoryReset = true)">
             <v-icon start class="open-icon"> mdi-skull-crossbones </v-icon>
             <span class="open-icon">
               {{
diff --git a/photon-client/src/components/settings/MetricsCard.vue b/photon-client/src/components/settings/MetricsCard.vue
index 9bc5956adf..dce96c83e7 100644
--- a/photon-client/src/components/settings/MetricsCard.vue
+++ b/photon-client/src/components/settings/MetricsCard.vue
@@ -10,30 +10,15 @@ interface MetricItem {
 
 const generalMetrics = computed<MetricItem[]>(() => {
   const stats = [
-    {
-      header: "Version",
-      value: useSettingsStore().general.version || "Unknown"
-    },
-    {
-      header: "Hardware Model",
-      value: useSettingsStore().general.hardwareModel || "Unknown"
-    },
-    {
-      header: "Platform",
-      value: useSettingsStore().general.hardwarePlatform || "Unknown"
-    },
+    { header: "Version", value: useSettingsStore().general.version || "Unknown" },
+    { header: "Hardware Model", value: useSettingsStore().general.hardwareModel || "Unknown" },
+    { header: "Platform", value: useSettingsStore().general.hardwarePlatform || "Unknown" },
 
-    {
-      header: "GPU Acceleration",
-      value: useSettingsStore().general.gpuAcceleration || "Unknown"
-    }
+    { header: "GPU Acceleration", value: useSettingsStore().general.gpuAcceleration || "Unknown" }
   ];
 
   if (!useSettingsStore().network.networkingDisabled) {
-    stats.push({
-      header: "IP Address",
-      value: useSettingsStore().metrics.ipAddress || "Unknown"
-    });
+    stats.push({ header: "IP Address", value: useSettingsStore().metrics.ipAddress || "Unknown" });
   }
 
   return stats;
@@ -63,25 +48,13 @@ const platformMetrics = computed<MetricItem[]>(() => {
           ? "Unknown"
           : `${useSettingsStore().metrics.gpuMemUtil}MB of ${useSettingsStore().metrics.gpuMem}MB`
     },
-    {
-      header: "CPU Throttling",
-      value: useSettingsStore().metrics.cpuThr || "Unknown"
-    },
-    {
-      header: "CPU Uptime",
-      value: useSettingsStore().metrics.cpuUptime || "Unknown"
-    },
-    {
-      header: "Disk Usage",
-      value: useSettingsStore().metrics.diskUtilPct || "Unknown"
-    }
+    { header: "CPU Throttling", value: useSettingsStore().metrics.cpuThr || "Unknown" },
+    { header: "CPU Uptime", value: useSettingsStore().metrics.cpuUptime || "Unknown" },
+    { header: "Disk Usage", value: useSettingsStore().metrics.diskUtilPct || "Unknown" }
   ];
 
   if (useSettingsStore().metrics.npuUsage) {
-    stats.push({
-      header: "NPU Usage",
-      value: useSettingsStore().metrics.npuUsage || "Unknown"
-    });
+    stats.push({ header: "NPU Usage", value: useSettingsStore().metrics.npuUsage || "Unknown" });
   }
 
   return stats;
@@ -120,7 +93,7 @@ onBeforeMount(() => {
 </script>
 
 <template>
-  <v-card class="mb-3" style="background-color: #006492">
+  <v-card class="mb-3 rounded-12" color="surface">
     <v-card-title style="display: flex; justify-content: space-between">
       <span>Stats</span>
       <v-btn variant="text" @click="fetchMetrics">
@@ -212,46 +185,48 @@ onBeforeMount(() => {
   text-align: center;
 }
 
+$stats-table-border: rgba(255, 255, 255, 0.5);
+
 .t {
-  border-top: 1px solid white;
-  border-right: 1px solid white;
+  border-top: 1px solid $stats-table-border;
+  border-right: 1px solid $stats-table-border;
 }
 
 .b {
-  border-bottom: 1px solid white;
-  border-right: 1px solid white;
+  border-bottom: 1px solid $stats-table-border;
+  border-right: 1px solid $stats-table-border;
 }
 
 .tl {
-  border-top: 1px solid white;
-  border-left: 1px solid white;
-  border-right: 1px solid white;
+  border-top: 1px solid $stats-table-border;
+  border-left: 1px solid $stats-table-border;
+  border-right: 1px solid $stats-table-border;
   border-top-left-radius: 5px;
 }
 
 .tr {
-  border-top: 1px solid white;
-  border-right: 1px solid white;
+  border-top: 1px solid $stats-table-border;
+  border-right: 1px solid $stats-table-border;
   border-top-right-radius: 5px;
 }
 
 .bl {
-  border-bottom: 1px solid white;
-  border-left: 1px solid white;
-  border-right: 1px solid white;
+  border-bottom: 1px solid $stats-table-border;
+  border-left: 1px solid $stats-table-border;
+  border-right: 1px solid $stats-table-border;
   border-bottom-left-radius: 5px;
 }
 
 .br {
-  border-bottom: 1px solid white;
-  border-right: 1px solid white;
+  border-bottom: 1px solid $stats-table-border;
+  border-right: 1px solid $stats-table-border;
   border-bottom-right-radius: 5px;
 }
 
 .metric-item {
   font-size: 16px !important;
   padding: 1px 15px 1px 10px;
-  border-right: 1px solid;
+  border-right: 1px solid $stats-table-border;
   font-weight: normal;
   color: white !important;
   text-align: center !important;
@@ -264,14 +239,9 @@ onBeforeMount(() => {
 }
 
 .v-table {
-  thead,
-  tbody {
-    background-color: #006492;
-  }
-
   :hover {
     tbody > tr {
-      background-color: #005281 !important;
+      // background-color: #005281 !important;
     }
   }
 
diff --git a/photon-client/src/components/settings/NetworkingCard.vue b/photon-client/src/components/settings/NetworkingCard.vue
index a3528adaf3..4d4a164dd5 100644
--- a/photon-client/src/components/settings/NetworkingCard.vue
+++ b/photon-client/src/components/settings/NetworkingCard.vue
@@ -83,16 +83,10 @@ const saveGeneralSettings = () => {
   useSettingsStore()
     .updateGeneralSettings(payload)
     .then((response) => {
-      useStateStore().showSnackbarMessage({
-        message: response.data.text || response.data,
-        color: "success"
-      });
+      useStateStore().showSnackbarMessage({ message: response.data.text || response.data, color: "success" });
 
       // Update the local settings cause the backend checked their validity. Assign is to deref value
-      useSettingsStore().network = {
-        ...useSettingsStore().network,
-        ...Object.assign({}, tempSettingsStruct.value)
-      };
+      useSettingsStore().network = { ...useSettingsStore().network, ...Object.assign({}, tempSettingsStruct.value) };
     })
     .catch((error) => {
       resetTempSettingsStruct();
@@ -141,7 +135,7 @@ watchEffect(() => {
 </script>
 
 <template>
-  <v-card class="mb-3" style="background-color: #006492">
+  <v-card class="mb-3 rounded-12" color="surface">
     <v-card-title>Global Settings</v-card-title>
     <div class="pa-5 pt-0">
       <v-divider class="pb-2" />
diff --git a/photon-client/src/plugins/vuetify.ts b/photon-client/src/plugins/vuetify.ts
index 94fa9c683e..9f4f90f605 100644
--- a/photon-client/src/plugins/vuetify.ts
+++ b/photon-client/src/plugins/vuetify.ts
@@ -3,21 +3,35 @@ import "@mdi/font/css/materialdesignicons.css";
 import type { ThemeDefinition } from "vuetify/lib/composables/theme";
 import { createVuetify } from "vuetify";
 
-const commonColors = {
-  error: "#b80000",
-  info: "#2196F3",
-  success: "#4CAF50",
-  warning: "#FFC107"
-};
+const commonColors = { error: "#b80000", info: "#2196F3", success: "#4CAF50", warning: "#FFC107" };
 
 const DarkTheme: ThemeDefinition = {
   dark: true,
   colors: {
-    primary: "#006492",
-    secondary: "#39A4D5",
-    accent: "#FFD843",
-    background: "#232C37",
-    ...commonColors
+    // Blue primary
+    primary: "#39A4D5", // 006492
+
+    // Yellow secondary
+    secondary: "#FFD843",
+
+    // Near-black background
+    background: "#151515", // 232C37 (old) 121212 (very dark)
+    "on-background": "",
+
+    // Card/info background
+    surface: "#232C37",
+    "surface-variant": "#485b70",
+    "on-surface-variant": "#f0f0f0",
+
+    // Lighter blue
+    accent: "#39A4D5",
+
+    toggle: "#006492",
+
+    // Misc/mismatches between themes
+    sidebar: "#151515",
+
+    ...{ error: "#b80000", info: "#2196F3", success: "#4CAF50", warning: "#FFC107" }
   }
 };
 
@@ -31,26 +45,37 @@ const LightTheme: ThemeDefinition = {
     "surface-variant": "#358AB0",
     accent: "#FFD843",
     "surface-light": "#FFD843",
+    toggle: "#39A4D5",
+
+    // Misc/mismatches between themes
+    sidebar: "#006492",
+
     ...commonColors
   },
-  variables: {
-    "medium-emphasis-opacity": 1,
-    "high-emphasis-opacity": 1
-  }
+  variables: { "medium-emphasis-opacity": 1, "high-emphasis-opacity": 1 }
 };
 
 export default createVuetify({
-  theme: {
-    defaultTheme: "LightTheme",
-    themes: {
-      LightTheme: LightTheme,
-      DarkTheme: DarkTheme
-    }
-  },
-  display: {
-    thresholds: {
-      md: 1460,
-      lg: 2000
-    }
-  }
+  theme: { defaultTheme: "DarkTheme", themes: { LightTheme: LightTheme, DarkTheme: DarkTheme } },
+  display: { thresholds: { md: 1460, lg: 2000 } }
 });
+
+// const LightTheme: ThemeDefinition = {
+//   dark: false,
+//   colors: {
+//     background: "#232C37",
+//     primary: "#006492",
+//     surface: "#006492",
+//     secondary: "#39A4D5",
+//     "surface-variant": "#358AB0",
+//     accent: "#FFD843",
+//     "surface-light": "#FFD843",
+//     toggle: "#39A4D5",
+
+//     // Misc/mismatches between themes
+//     sidebar: "#006492",
+
+//     ...commonColors
+//   },
+//   variables: { "medium-emphasis-opacity": 1, "high-emphasis-opacity": 1 }
+// };
diff --git a/photon-server/src/main/resources/web/index.html b/photon-server/src/main/resources/web/index.html
index 641b6da394..729032c1b4 100644
--- a/photon-server/src/main/resources/web/index.html
+++ b/photon-server/src/main/resources/web/index.html
@@ -1 +1,14 @@
-<p>UIs should be copied, but yours wasn't!</p>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="./favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Photon Client</title>
+    <script type="module" crossorigin src="./assets/index-C56m3iSX.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-5r6IhDHx.css">
+  </head>
+  <body>
+    <div id="app"></div>

+  </body>
+</html>

From 2c8b4e4b385cea34ff36f03613201fda68633dc5 Mon Sep 17 00:00:00 2001
From: Devon Doyle <devondoyle@outlook.com>
Date: Sun, 27 Jul 2025 07:41:25 -0400
Subject: [PATCH 02/16] save plane

---
 .../components/settings/DeviceControlCard.vue |  2 +-
 .../components/settings/LEDControlCard.vue    |  2 +-
 photon-client/src/plugins/vuetify.ts          | 47 ++++++++++---------
 .../src/main/resources/web/index.html         |  4 +-
 4 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/photon-client/src/components/settings/DeviceControlCard.vue b/photon-client/src/components/settings/DeviceControlCard.vue
index ead5336636..ac6cb2b10f 100644
--- a/photon-client/src/components/settings/DeviceControlCard.vue
+++ b/photon-client/src/components/settings/DeviceControlCard.vue
@@ -342,7 +342,7 @@ const nukePhotonConfigDirectory = () => {
       <v-divider class="mt-3 pb-3" />
       <v-row>
         <v-col cols="12">
-          <v-btn color="secondary" @click="() => (showFactoryReset = true)">
+          <v-btn color="error" @click="() => (showFactoryReset = true)">
             <v-icon start class="open-icon"> mdi-skull-crossbones </v-icon>
             <span class="open-icon">
               {{
diff --git a/photon-client/src/components/settings/LEDControlCard.vue b/photon-client/src/components/settings/LEDControlCard.vue
index f1b0dc111a..19f8c1dabf 100644
--- a/photon-client/src/components/settings/LEDControlCard.vue
+++ b/photon-client/src/components/settings/LEDControlCard.vue
@@ -4,7 +4,7 @@ import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
 </script>
 
 <template>
-  <v-card class="mb-3" style="background-color: #006492">
+  <v-card class="mb-3" color="surface">
     <v-card-title class="pb-10px">LED Control</v-card-title>
     <v-card-text>
       <pv-slider
diff --git a/photon-client/src/plugins/vuetify.ts b/photon-client/src/plugins/vuetify.ts
index 9f4f90f605..23dec13656 100644
--- a/photon-client/src/plugins/vuetify.ts
+++ b/photon-client/src/plugins/vuetify.ts
@@ -5,51 +5,56 @@ import { createVuetify } from "vuetify";
 
 const commonColors = { error: "#b80000", info: "#2196F3", success: "#4CAF50", warning: "#FFC107" };
 
+const ThemeColors = {
+  photonBlue: "#006492",
+  photonYellow: "#FFD843",
+  lightBlue: "#39A4D5",
+  darkGray: "#151515",
+  gray: "#1c232c",
+  lightGray: "#232C37"
+};
+
+
 const DarkTheme: ThemeDefinition = {
   dark: true,
   colors: {
-    // Blue primary
-    primary: "#39A4D5", // 006492
+    background: ThemeColors.darkGray,
+    surface: ThemeColors.gray,
+    sidebar: ThemeColors.darkGray,
 
-    // Yellow secondary
-    secondary: "#FFD843",
+    primary: ThemeColors.lightBlue,
+    secondary: ThemeColors.photonYellow,
+    accent: ThemeColors.lightBlue,
 
-    // Near-black background
-    background: "#151515", // 232C37 (old) 121212 (very dark)
-    "on-background": "",
 
     // Card/info background
-    surface: "#232C37",
     "surface-variant": "#485b70",
     "on-surface-variant": "#f0f0f0",
 
-    // Lighter blue
-    accent: "#39A4D5",
 
     toggle: "#006492",
 
     // Misc/mismatches between themes
-    sidebar: "#151515",
 
-    ...{ error: "#b80000", info: "#2196F3", success: "#4CAF50", warning: "#FFC107" }
+    ...{ error: "#9b0000", info: "#2196F3", success: "#4CAF50", warning: "#FFC107" } //b80000
   }
 };
 
 const LightTheme: ThemeDefinition = {
   dark: false,
   colors: {
-    background: "#232C37",
-    primary: "#006492",
-    surface: "#006492",
-    secondary: "#39A4D5",
+    background: ThemeColors.lightGray,
+    surface: ThemeColors.photonBlue,
+    sidebar: ThemeColors.photonBlue,
+
+    primary: ThemeColors.photonBlue,
+    secondary: ThemeColors.lightBlue,
+    accent: ThemeColors.photonYellow,
+
     "surface-variant": "#358AB0",
-    accent: "#FFD843",
-    "surface-light": "#FFD843",
+    "surface-light": ThemeColors.photonYellow,
     toggle: "#39A4D5",
 
-    // Misc/mismatches between themes
-    sidebar: "#006492",
-
     ...commonColors
   },
   variables: { "medium-emphasis-opacity": 1, "high-emphasis-opacity": 1 }
diff --git a/photon-server/src/main/resources/web/index.html b/photon-server/src/main/resources/web/index.html
index 729032c1b4..45f76981aa 100644
--- a/photon-server/src/main/resources/web/index.html
+++ b/photon-server/src/main/resources/web/index.html
@@ -5,8 +5,8 @@
     <link rel="icon" href="./favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Photon Client</title>
-    <script type="module" crossorigin src="./assets/index-C56m3iSX.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-5r6IhDHx.css">
+    <script type="module" crossorigin src="./assets/index-BQzFa1Lb.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-CbRrrLUy.css">
   </head>
   <body>
     <div id="app"></div>


From d9de8c69ad08a6114808ebfbdb1644670b390649 Mon Sep 17 00:00:00 2001
From: Devon Doyle <devondoyle@outlook.com>
Date: Sun, 27 Jul 2025 13:48:10 -0400
Subject: [PATCH 03/16] save, needs cleanup

---
 photon-client/src/App.vue                     | 14 ++---
 .../src/assets/styles/variables.scss          |  4 +-
 .../src/components/app/photon-log-view.vue    |  9 +--
 .../src/components/app/photon-sidebar.vue     |  8 +--
 .../cameras/CameraCalibrationCard.vue         | 22 ++++---
 .../cameras/CameraCalibrationInfoCard.vue     | 16 +++--
 .../components/cameras/CameraControlCard.vue  |  9 ++-
 .../components/cameras/CameraSettingsCard.vue |  9 ++-
 .../src/components/cameras/CamerasView.vue    | 15 +++--
 .../src/components/common/pv-input.vue        |  6 +-
 .../src/components/common/pv-number-input.vue |  2 +-
 .../src/components/common/pv-radio.vue        |  2 +-
 .../src/components/common/pv-slider.vue       |  4 +-
 .../src/components/common/pv-switch.vue       |  2 +-
 .../dashboard/CameraAndPipelineSelectCard.vue | 55 +++++++++--------
 .../src/components/dashboard/CamerasCard.vue  |  2 +-
 .../components/dashboard/ConfigOptions.vue    |  2 +-
 .../components/dashboard/StreamConfigCard.vue | 15 +++--
 .../components/dashboard/tabs/OutputTab.vue   | 20 +++++--
 .../components/dashboard/tabs/TargetsTab.vue  |  4 +-
 .../settings/ApriltagControlCard.vue          |  6 +-
 .../components/settings/DeviceControlCard.vue | 27 +++++----
 .../components/settings/LEDControlCard.vue    |  2 +-
 .../src/components/settings/MetricsCard.vue   | 14 +++--
 .../components/settings/NetworkingCard.vue    |  7 ++-
 .../settings/ObjectDetectionCard.vue          |  2 +-
 photon-client/src/plugins/vuetify.ts          | 59 ++++++++++++-------
 .../src/views/CameraMatchingView.vue          | 47 +++++++++------
 photon-client/src/views/DashboardView.vue     |  9 ++-
 photon-client/src/views/DocsView.vue          | 22 +++++--
 30 files changed, 249 insertions(+), 166 deletions(-)

diff --git a/photon-client/src/App.vue b/photon-client/src/App.vue
index 98b193ccd6..470a6cb1c7 100644
--- a/photon-client/src/App.vue
+++ b/photon-client/src/App.vue
@@ -87,30 +87,30 @@ if (!is_demo) {
 }
 
 ::-webkit-scrollbar-track {
-  background: #232c37;
+  background: rgb(var(--v-theme-background));
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: #ffd843;
+  background-color: rgb(var(--v-theme-accent));
   border-radius: 10px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background-color: #e4c33c;
+  background-color: rgb(var(--v-theme-primary));
 }
 
 .main-container {
-  // background-color: #232c37;
   padding: 0 !important;
 }
 
+// TODO: WHAT IS THIS??
 .v-overlay__scrim {
   background-color: #202020;
 }
 
-#title {
-  color: #ffd843;
-}
+// #title {
+//   color: #ffd843;
+// }
 div.v-layout {
   overflow: unset !important;
 }
diff --git a/photon-client/src/assets/styles/variables.scss b/photon-client/src/assets/styles/variables.scss
index e56ad0a3f0..cc2d944ea7 100644
--- a/photon-client/src/assets/styles/variables.scss
+++ b/photon-client/src/assets/styles/variables.scss
@@ -3,7 +3,7 @@
 $default-font: "Prompt", sans-serif !default;
 $body-font-family: $default-font;
 $heading-font-family: $default-font;
-$body-background: #282c34;
+$body-background: rgb(var(--v-theme-background));
 
 body {
   background: $body-background;
@@ -21,7 +21,7 @@ html {
   > table
   > tbody
   > tr:hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper) {
-  background: #005281 !important;
+  background: rgba(0, 0, 0, 0.2);
 }
 
 .v-banner {
diff --git a/photon-client/src/components/app/photon-log-view.vue b/photon-client/src/components/app/photon-log-view.vue
index f3fa5f1fb8..b2d2a82b1d 100644
--- a/photon-client/src/components/app/photon-log-view.vue
+++ b/photon-client/src/components/app/photon-log-view.vue
@@ -74,7 +74,7 @@ document.addEventListener("keydown", (e) => {
 
 <template>
   <v-dialog v-model="useStateStore().showLogModal" width="1500" dark>
-    <v-card class="dialog-container pa-5" color="primary" flat>
+    <v-card class="dialog-container pa-5" color="surface" flat>
       <!-- Logs header -->
       <v-row class="pb-3">
         <v-col cols="4">
@@ -117,10 +117,11 @@ document.addEventListener("keydown", (e) => {
               clearable
               hide-details="auto"
               prepend-icon="mdi-magnify"
-              color="accent"
+              color="primary"
               label="Search"
               variant="underlined"
             />
+            <!-- TODO: CLEAN THIS UP -->
             <input v-model="timeInput" type="time" step="1" class="text-white pl-3" />
             <v-btn icon variant="flat" @click="timeInput = undefined">
               <v-icon>mdi-close-circle-outline</v-icon>
@@ -129,7 +130,7 @@ document.addEventListener("keydown", (e) => {
           <v-col v-for="level in [0, 1, 2, 3]" :key="level" class="pr-3">
             <div class="pb-0 pt-0" style="display: flex; align-items: center; flex: min-content">
               {{ getLogLevelFromIndex(level)
-              }}<v-switch v-model="selectedLogLevels[level]" class="pl-2" hide-details color="#ffd843"></v-switch>
+              }}<v-switch v-model="selectedLogLevels[level]" class="pl-2" hide-details color="rgb(var(--v-theme-primary))"></v-switch>
             </div>
           </v-col>
         </v-row>
@@ -170,7 +171,7 @@ document.addEventListener("keydown", (e) => {
   /* Dialog data size - options */
   height: calc(100% - 56px);
   padding: 10px;
-  background-color: #232c37 !important;
+  background-color: rgb(var(--v-theme-logsBackground)) !important;
   border-radius: 5px;
 }
 
diff --git a/photon-client/src/components/app/photon-sidebar.vue b/photon-client/src/components/app/photon-sidebar.vue
index 64e3dd247f..d392ecc5d5 100644
--- a/photon-client/src/components/app/photon-sidebar.vue
+++ b/photon-client/src/components/app/photon-sidebar.vue
@@ -23,7 +23,7 @@ const renderCompact = computed<boolean>(() => compact.value || !mdAndUp.value);
 
 <template>
   <v-navigation-drawer permanent :rail="renderCompact" color="sidebar">
-    <v-list nav color="accent">
+    <v-list nav color="primary">
       <!-- 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="renderCompact ? 'pr-0 pl-0' : ''" style="display: flex; justify-content: center">
         <template #prepend>
@@ -91,7 +91,7 @@ const renderCompact = computed<boolean>(() => compact.value || !mdAndUp.value);
         >
           <v-list-item-title v-if="useSettingsStore().network.runNTServer" v-show="!renderCompact" class="text-wrap">
             NetworkTables server running for
-            <span class="text-accent">{{ useStateStore().ntConnectionStatus.clients || 0 }}</span> clients
+            <span class="text-primary">{{ useStateStore().ntConnectionStatus.clients || 0 }}</span> clients
           </v-list-item-title>
           <v-list-item-title
             v-else-if="useStateStore().ntConnectionStatus.connected && useStateStore().backendConnected"
@@ -100,8 +100,8 @@ const renderCompact = computed<boolean>(() => compact.value || !mdAndUp.value);
             style="flex-direction: column; display: flex"
           >
             NetworkTables Server Connected!
-            <span class="text-accent">
-              {{ useStateStore().ntConnectionStatus.address }}
+            <span class="text-primary">
+              {{ useStateStore().ntConnectionStatus.address }} sdfsdfsdf
             </span>
           </v-list-item-title>
           <v-list-item-title
diff --git a/photon-client/src/components/cameras/CameraCalibrationCard.vue b/photon-client/src/components/cameras/CameraCalibrationCard.vue
index d1dda0dacd..2f84567cc6 100644
--- a/photon-client/src/components/cameras/CameraCalibrationCard.vue
+++ b/photon-client/src/components/cameras/CameraCalibrationCard.vue
@@ -15,6 +15,9 @@ import { WebsocketPipelineType } from "@/types/WebsocketDataTypes";
 import { getResolutionString, resolutionsAreEqual } from "@/lib/PhotonUtils";
 import CameraCalibrationInfoCard from "@/components/cameras/CameraCalibrationInfoCard.vue";
 import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
+import { useTheme } from "vuetify";
+
+const theme = useTheme();
 
 const settingsValid = ref(true);
 
@@ -329,6 +332,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
               tooltip="If enabled, Photon will use the old OpenCV pattern for calibration."
               :label-cols="4"
             />
+            <!-- TODO: CLEAN UP MRCAL BANNERS -->
             <div class="pb-5 pt-10px">
               <v-banner
                 v-if="useSettingsStore().general.mrCalWorking"
@@ -442,9 +446,10 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
             Too many corners. Finish calibration now!
           </v-banner>
         </div>
+        <!-- TODO: TEST CALIBRATION -->
         <div v-if="isCalibrating" class="d-flex justify-center align-center pt-10px pb-5">
           <v-chip
-            variant="flat"
+            variant="elevated"
             label
             :color="useStateStore().calibrationData.hasEnoughImages ? 'secondary' : 'grey-darken-2'"
           >
@@ -457,7 +462,8 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
             <v-btn
               size="small"
               block
-              color="accent"
+              color="lightBlue"
+              :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
               :disabled="!settingsValid || tooManyPoints"
               @click="isCalibrating ? useCameraSettingsStore().takeCalibrationSnapshot() : startCalibration()"
             >
@@ -469,7 +475,8 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
             <v-btn
               size="small"
               block
-              :color="useStateStore().calibrationData.hasEnoughImages ? 'accent' : 'error'"
+              :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+              :color="useStateStore().calibrationData.hasEnoughImages ? 'primary' : 'error'"
               :disabled="!isCalibrating || !settingsValid"
               @click="endCalibration"
             >
@@ -484,7 +491,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
         </div>
         <div class="pt-5">
           <v-btn
-            color="secondary"
+            color="photonYellow"
             size="small"
             block
             variant="outlined"
@@ -554,14 +561,11 @@ th {
   text-align: center;
   width: 100%;
 
-  th,
-  td {
-    // background-color: #006492 !important;
+  th, td {
     font-size: 1rem !important;
   }
 
   tbody :hover td {
-    // background-color: #005281 !important;
     cursor: pointer;
   }
 
@@ -577,7 +581,7 @@ th {
   }
 
   ::-webkit-scrollbar-thumb {
-    background-color: #ffd843;
+    background-color: rgb(var(--v-theme-accent));
     border-radius: 10px;
   }
 }
diff --git a/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue b/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue
index 5efe4fd87d..8dd7968800 100644
--- a/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue
+++ b/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue
@@ -4,6 +4,9 @@ import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import { useStateStore } from "@/stores/StateStore";
 import { computed, inject, ref } from "vue";
 import { getResolutionString, parseJsonFile } from "@/lib/PhotonUtils";
+import { useTheme } from "vuetify";
+
+const theme = useTheme();
 
 const props = defineProps<{
   videoFormat: VideoFormat;
@@ -90,13 +93,13 @@ const calibrationImageURL = (index: number) =>
 </script>
 
 <template>
-  <v-card color="primary" dark>
+  <v-card color="surface" dark>
     <div class="d-flex flex-wrap pt-2 pl-2 pr-2">
       <v-col cols="12" md="6">
         <v-card-title class="pa-0"> Calibration Details </v-card-title>
       </v-col>
       <v-col cols="6" md="3" class="d-flex align-center pt-0 pt-md-3 pl-6 pl-md-3">
-        <v-btn color="secondary" style="width: 100%" @click="openUploadPhotonCalibJsonPrompt">
+        <v-btn color="lightBlue" style="width: 100%" @click="openUploadPhotonCalibJsonPrompt" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
           <v-icon start> mdi-import</v-icon>
           <span>Import</span>
         </v-btn>
@@ -110,10 +113,11 @@ const calibrationImageURL = (index: number) =>
       </v-col>
       <v-col cols="6" md="3" class="d-flex align-center pt-0 pt-md-3 pr-6 pr-md-3">
         <v-btn
-          color="secondary"
+          color="lightBlue"
           :disabled="!currentCalibrationCoeffs"
           style="width: 100%"
           @click="openExportCalibrationPrompt"
+           :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
         >
           <v-icon start>mdi-export</v-icon>
           <span>Export</span>
@@ -132,8 +136,8 @@ const calibrationImageURL = (index: number) =>
     <v-card-text v-if="!currentCalibrationCoeffs">
       <v-banner
         rounded
-        bg-color="secondary"
-        color="secondary"
+        bg-color="accent"
+        color="accent"
         text-color="white"
         class="pt-3 pb-3"
         density="compact"
@@ -288,7 +292,7 @@ const calibrationImageURL = (index: number) =>
 
 <style scoped>
 .v-data-table {
-  background-color: #006492 !important;
+  /* background-color: #006492 !important; */
 }
 .snapshot-preview {
   max-width: 55%;
diff --git a/photon-client/src/components/cameras/CameraControlCard.vue b/photon-client/src/components/cameras/CameraControlCard.vue
index 7f65edb931..0313b6d0e2 100644
--- a/photon-client/src/components/cameras/CameraControlCard.vue
+++ b/photon-client/src/components/cameras/CameraControlCard.vue
@@ -2,6 +2,9 @@
 import { ref } from "vue";
 import axios from "axios";
 import { useStateStore } from "@/stores/StateStore";
+import { useTheme } from "vuetify";
+
+const theme = useTheme();
 
 interface SnapshotMetadata {
   snapshotName: string;
@@ -91,10 +94,10 @@ const expanded = ref([]);
 </script>
 
 <template>
-  <v-card color="surface">
+  <v-card color="surface" class="rounded-12">
     <v-card-title>Camera Control</v-card-title>
     <v-card-text class="pt-0">
-      <v-btn color="accent" @click="fetchSnapshots">
+      <v-btn color="lightBlue" @click="fetchSnapshots" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
         <v-icon start class="open-icon"> mdi-folder </v-icon>
         <span class="open-label">Show Saved Snapshots</span>
       </v-btn>
@@ -194,7 +197,7 @@ const expanded = ref([]);
   }
 
   ::-webkit-scrollbar-thumb {
-    background-color: #ffd843;
+    background-color: rgb(var(--v-theme-accent));
     border-radius: 10px;
   }
 }
diff --git a/photon-client/src/components/cameras/CameraSettingsCard.vue b/photon-client/src/components/cameras/CameraSettingsCard.vue
index 7f4974e6a4..7107544091 100644
--- a/photon-client/src/components/cameras/CameraSettingsCard.vue
+++ b/photon-client/src/components/cameras/CameraSettingsCard.vue
@@ -7,6 +7,9 @@ import { useStateStore } from "@/stores/StateStore";
 import { computed, inject, ref, watchEffect } from "vue";
 import { type CameraSettingsChangeRequest, ValidQuirks } from "@/types/SettingTypes";
 import axios from "axios";
+import { useTheme } from "vuetify";
+
+const theme = useTheme();
 
 const tempSettingsStruct = ref<CameraSettingsChangeRequest>({
   fov: useCameraSettingsStore().currentCameraSettings.fov.value,
@@ -199,14 +202,14 @@ const wrappedCameras = computed<SelectItem[]>(() =>
     </v-card-text>
     <v-card-text class="d-flex pt-0">
       <v-col cols="6" class="pa-0 pr-2">
-        <v-btn block size="small" color="secondary" :disabled="!settingsHaveChanged()" @click="saveCameraSettings">
+        <v-btn block size="small" color="primary" :disabled="!settingsHaveChanged()" @click="saveCameraSettings" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
           <v-icon start> mdi-content-save </v-icon>
           Save Changes
         </v-btn>
       </v-col>
       <v-col cols="6" class="pa-0 pl-2">
-        <v-btn block size="small" color="error" @click="() => (showDeleteCamera = true)">
-          <v-icon start> mdi-trash-can-outline </v-icon>
+        <v-btn block size="small" color="error" @click="() => (showDeleteCamera = true)" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
+          <v-icon start> mdi-delete </v-icon>
           Delete Camera
         </v-btn>
       </v-col>
diff --git a/photon-client/src/components/cameras/CamerasView.vue b/photon-client/src/components/cameras/CamerasView.vue
index 9dd6ed6657..b63e73bec4 100644
--- a/photon-client/src/components/cameras/CamerasView.vue
+++ b/photon-client/src/components/cameras/CamerasView.vue
@@ -5,6 +5,9 @@ import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import { PipelineType } from "@/types/PipelineTypes";
 import { useStateStore } from "@/stores/StateStore";
 import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
+import { useTheme } from "vuetify";
+
+const theme = useTheme();
 
 const value = defineModel<number[]>({ required: true });
 
@@ -29,7 +32,7 @@ const fpsTooLow = computed<boolean>(() => {
 </script>
 
 <template>
-  <v-card id="camera-settings-camera-view-card" class="camera-settings-camera-view-card" color="primary" dark>
+  <v-card id="camera-settings-camera-view-card" class="camera-settings-camera-view-card rounded-12" color="surface" dark>
     <v-card-title class="justify-space-between align-content-center pt-0 pb-0">
       <div class="d-flex flex-wrap align-center pt-4 pb-4">
         <span class="mr-4" style="white-space: nowrap"> Cameras </span>
@@ -39,8 +42,8 @@ const fpsTooLow = computed<boolean>(() => {
           :color="fpsTooLow ? 'error' : 'transparent'"
           style="font-size: 1rem; padding: 0; margin: 0"
         >
-          <span class="pr-1" :style="{ color: fpsTooLow ? '#C7EA46' : '#ff4d00' }">
-            {{ Math.round(useStateStore().currentPipelineResults?.fps || 0) }}&nbsp;FPS &ndash;
+          <span class="pr-1" :style="{ color: fpsTooLow ? 'rgb(var(--v-theme-error))' : 'rgb(var(--v-theme-primary))' }">
+            &nbsp;{{ Math.round(useStateStore().currentPipelineResults?.fps || 0) }}&nbsp;FPS &ndash;
             {{ Math.min(Math.round(useStateStore().currentPipelineResults?.latency || 0), 9999) }} ms latency
           </span>
         </v-chip>
@@ -88,16 +91,18 @@ const fpsTooLow = computed<boolean>(() => {
         base-color="surface-variant"
       >
         <v-btn
-          color="secondary"
+          color="lightBlue"
           class="fill"
+           :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
           :disabled="useCameraSettingsStore().isDriverMode || useCameraSettingsStore().isCalibrationMode"
         >
           <v-icon start class="mode-btn-icon">mdi-import</v-icon>
           <span class="mode-btn-label">Raw</span>
         </v-btn>
         <v-btn
-          color="secondary"
+          color="lightBlue"
           class="fill"
+           :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
           :disabled="useCameraSettingsStore().isDriverMode || useCameraSettingsStore().isCalibrationMode"
         >
           <v-icon start class="mode-btn-icon">mdi-export</v-icon>
diff --git a/photon-client/src/components/common/pv-input.vue b/photon-client/src/components/common/pv-input.vue
index 565248e484..4285585af3 100644
--- a/photon-client/src/components/common/pv-input.vue
+++ b/photon-client/src/components/common/pv-input.vue
@@ -38,8 +38,9 @@ const handleKeydown = ({ key }) => {
       break;
   }
 };
-</script>
 
+// TODO: fix error text theming
+</script>
 <template>
   <div class="d-flex">
     <v-col :cols="labelCols || 12 - inputCols" class="d-flex align-center pl-0 pt-10px pb-10px">
@@ -50,13 +51,12 @@ const handleKeydown = ({ key }) => {
       <v-text-field
         v-model="value"
         density="compact"
-        color="accent"
+        color="primary"
         :placeholder="placeholder"
         :disabled="disabled"
         :error-messages="errorMessage"
         :rules="rules"
         hide-details="auto"
-        class="light-error"
         variant="underlined"
         @keydown="handleKeydown"
       />
diff --git a/photon-client/src/components/common/pv-number-input.vue b/photon-client/src/components/common/pv-number-input.vue
index fd39db7ccf..babfedd8a7 100644
--- a/photon-client/src/components/common/pv-number-input.vue
+++ b/photon-client/src/components/common/pv-number-input.vue
@@ -38,7 +38,7 @@ const localValue = computed({
         density="compact"
         hide-details
         single-line
-        color="accent"
+        color="primary"
         type="number"
         variant="underlined"
         style="width: 70px"
diff --git a/photon-client/src/components/common/pv-radio.vue b/photon-client/src/components/common/pv-radio.vue
index b876f8d762..f2fe180405 100644
--- a/photon-client/src/components/common/pv-radio.vue
+++ b/photon-client/src/components/common/pv-radio.vue
@@ -30,7 +30,7 @@ withDefaults(
           v-for="(radioName, index) in list"
           :key="index"
           :value="index"
-          color="#ffd843"
+          color="rgb(var(--v-theme-primary))"
           :label="radioName"
           :model-value="index"
           :disabled="disabled"
diff --git a/photon-client/src/components/common/pv-slider.vue b/photon-client/src/components/common/pv-slider.vue
index aa84ec4b3b..e4aaf03879 100644
--- a/photon-client/src/components/common/pv-slider.vue
+++ b/photon-client/src/components/common/pv-slider.vue
@@ -48,7 +48,7 @@ const localValue = computed({
         :max="max"
         :min="min"
         hide-details
-        color="accent"
+        color="primary"
         :disabled="disabled"
         :step="step"
         append-icon="mdi-menu-right"
@@ -60,7 +60,7 @@ const localValue = computed({
     <v-col :cols="1" class="pr-0 pt-10px pb-10px">
       <v-text-field
         :model-value="localValue"
-        color="accent"
+        color="primary"
         :max="max"
         :min="min"
         :disabled="disabled"
diff --git a/photon-client/src/components/common/pv-switch.vue b/photon-client/src/components/common/pv-switch.vue
index de15b9484d..137f22b050 100644
--- a/photon-client/src/components/common/pv-switch.vue
+++ b/photon-client/src/components/common/pv-switch.vue
@@ -14,7 +14,7 @@ withDefaults(
       <tooltipped-label :tooltip="tooltip" :label="label" />
     </v-col>
     <v-col :cols="switchCols || 12 - labelCols" class="d-flex align-center pr-0">
-      <v-switch v-model="value" :disabled="disabled" color="accent" hide-details density="compact" />
+      <v-switch v-model="value" :disabled="disabled" color="primary" hide-details density="compact" />
     </v-col>
   </div>
 </template>
diff --git a/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue b/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
index be6fa10b2b..37f255fd58 100644
--- a/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
+++ b/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
@@ -8,6 +8,9 @@ import PvIcon from "@/components/common/pv-icon.vue";
 import PvInput from "@/components/common/pv-input.vue";
 import { PipelineType } from "@/types/PipelineTypes";
 import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
+import { useTheme } from "vuetify";
+
+const theme = useTheme();
 
 const changeCurrentCameraUniqueName = (cameraUniqueName: string) => {
   useCameraSettingsStore().setCurrentCameraUniqueName(cameraUniqueName, true);
@@ -235,6 +238,8 @@ const wrappedCameras = computed<SelectItem[]>(() =>
     value: cameraUniqueName
   }))
 );
+
+// TODO: check back on delete pipeline dialog verbiage
 </script>
 
 <template>
@@ -323,19 +328,19 @@ const wrappedCameras = computed<SelectItem[]>(() =>
                 <pv-icon color="#c5c5c5" :right="true" icon-name="mdi-pencil" tooltip="Edit pipeline name" />
               </v-list-item-title>
             </v-list-item>
-            <v-list-item @click="showCreatePipelineDialog">
+            <v-list-item @click="duplicateCurrentPipeline">
               <v-list-item-title>
-                <pv-icon color="#c5c5c5" :right="true" icon-name="mdi-plus" tooltip="Add new pipeline" />
+                <pv-icon color="#c5c5c5" :right="true" icon-name="mdi-content-copy" tooltip="Duplicate pipeline" />
               </v-list-item-title>
             </v-list-item>
-            <v-list-item @click="showPipelineDeletionConfirmationDialog = true">
+            <v-list-item @click="showCreatePipelineDialog">
               <v-list-item-title>
-                <pv-icon color="red-darken-2" :right="true" icon-name="mdi-delete" tooltip="Delete pipeline" />
+                <pv-icon color="green" :right="true" icon-name="mdi-plus" tooltip="Add new pipeline" />
               </v-list-item-title>
             </v-list-item>
-            <v-list-item @click="duplicateCurrentPipeline">
+            <v-list-item @click="showPipelineDeletionConfirmationDialog = true">
               <v-list-item-title>
-                <pv-icon color="#c5c5c5" :right="true" icon-name="mdi-content-copy" tooltip="Duplicate pipeline" />
+                <pv-icon color="red-darken-2" :right="true" icon-name="mdi-delete" tooltip="Delete pipeline" />
               </v-list-item-title>
             </v-list-item>
           </v-list>
@@ -367,7 +372,7 @@ const wrappedCameras = computed<SelectItem[]>(() =>
       </v-col>
     </v-row>
     <v-dialog v-model="showPipelineCreationDialog" persistent width="500">
-      <v-card color="primary">
+      <v-card color="surface">
         <v-card-title class="pb-0"> Create New Pipeline </v-card-title>
         <v-card-text class="pt-0 pb-0">
           <pv-input
@@ -387,43 +392,45 @@ const wrappedCameras = computed<SelectItem[]>(() =>
           />
         </v-card-text>
         <v-card-actions class="pr-5 pt-10px pb-5">
+          <v-btn color="error" variant="elevated" @click="cancelPipelineCreation"> Cancel </v-btn>
           <v-btn
-            color="#ffd843"
+            color="accent"
             :disabled="checkPipelineName(newPipelineName) !== true"
-            variant="flat"
+            variant="elevated"
             @click="createNewPipeline"
           >
             Save
           </v-btn>
-          <v-btn color="error" variant="elevated" @click="cancelPipelineCreation"> Cancel </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
     <v-dialog v-model="showPipelineDeletionConfirmationDialog" width="500">
-      <v-card color="primary">
-        <v-card-title class="pb-0">Pipeline Deletion Confirmation</v-card-title>
+      <v-card color="surface">
+        <v-card-title class="pb-0">Delete Pipeline</v-card-title>
         <v-card-text>
-          Are you sure you want to delete the pipeline
-          <b style="color: white; font-weight: bold">{{
+          Are you sure you want to delete
+          <span style="color: white">"{{
             useCameraSettingsStore().currentPipelineSettings.pipelineNickname
-          }}</b
+          }}"</span
           >? This cannot be undone.
         </v-card-text>
         <v-card-actions class="pa-5 pt-0">
-          <v-btn variant="flat" color="error" @click="confirmDeleteCurrentPipeline"> Yes, I'm sure </v-btn>
           <v-btn
-            variant="flat"
-            color="#ffd843"
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            color="primary"
             class="text-black"
             @click="showPipelineDeletionConfirmationDialog = false"
           >
-            No, take me back
+            Cancel
+          </v-btn>
+          <v-btn color="error" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" @click="confirmDeleteCurrentPipeline">
+            Delete
           </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
     <v-dialog v-model="showPipelineTypeChangeDialog" persistent width="600">
-      <v-card color="primary" dark>
+      <v-card color="surface" dark>
         <v-card-title class="pb-0">Change Pipeline Type</v-card-title>
         <v-card-text>
           Are you sure you want to change the current pipeline type? This will cause all the pipeline settings to be
@@ -431,9 +438,11 @@ const wrappedCameras = computed<SelectItem[]>(() =>
           settings.
         </v-card-text>
         <v-card-actions class="pa-5 pt-0">
-          <v-btn color="error" variant="elevated" @click="confirmChangePipelineType"> Yes, I'm sure </v-btn>
-          <v-btn color="#ffd843" variant="elevated" class="text-black" @click="cancelChangePipelineType">
-            No, take me back
+          <v-btn color="lightBlue" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" class="text-black" @click="cancelChangePipelineType">
+            Cancel
+          </v-btn>
+          <v-btn color="photonYellow" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" @click="confirmChangePipelineType">
+            Confirm
           </v-btn>
         </v-card-actions>
       </v-card>
diff --git a/photon-client/src/components/dashboard/CamerasCard.vue b/photon-client/src/components/dashboard/CamerasCard.vue
index d7a5293a58..22e8b2d412 100644
--- a/photon-client/src/components/dashboard/CamerasCard.vue
+++ b/photon-client/src/components/dashboard/CamerasCard.vue
@@ -45,7 +45,7 @@ const performanceRecommendation = computed<string>(() => {
       <v-chip
         v-if="useCameraSettingsStore().currentCameraSettings.isConnected"
         label
-        :color="fpsTooLow ? 'error' : 'accent'"
+        :color="fpsTooLow ? 'error' : 'primary'"
         style="font-size: 1rem; padding: 0; margin: 0"
         variant="text"
       >
diff --git a/photon-client/src/components/dashboard/ConfigOptions.vue b/photon-client/src/components/dashboard/ConfigOptions.vue
index a18656124f..1ed9588963 100644
--- a/photon-client/src/components/dashboard/ConfigOptions.vue
+++ b/photon-client/src/components/dashboard/ConfigOptions.vue
@@ -131,7 +131,7 @@ const onBeforeTabUpdate = () => {
         @vue:before-update="onBeforeTabUpdate"
       >
         <v-card color="surface" height="100%" class="pr-5 pl-5 rounded-12">
-          <v-tabs v-model="selectedTabs[tabGroupIndex]" grow bg-color="surface" height="48" slider-color="accent">
+          <v-tabs v-model="selectedTabs[tabGroupIndex]" grow bg-color="surface" height="48" slider-color="photonYellow">
             <v-tab v-for="(tabConfig, index) in tabGroupData" :key="index">
               {{ tabConfig.tabName }}
             </v-tab>
diff --git a/photon-client/src/components/dashboard/StreamConfigCard.vue b/photon-client/src/components/dashboard/StreamConfigCard.vue
index 5af5c3f325..45598aca8e 100644
--- a/photon-client/src/components/dashboard/StreamConfigCard.vue
+++ b/photon-client/src/components/dashboard/StreamConfigCard.vue
@@ -2,6 +2,9 @@
 import { computed } from "vue";
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import { useStateStore } from "@/stores/StateStore";
+import { useTheme } from "vuetify";
+
+const theme = useTheme();
 
 const value = defineModel<number[]>();
 
@@ -27,18 +30,20 @@ const processingMode = computed<number>({
         <p style="color: white">Processing Mode</p>
         <v-btn-toggle v-model="processingMode" mandatory base-color="surface-variant" class="fill w-100">
           <v-btn
-            color="toggle"
+            color="lightBlue"
             :disabled="!useCameraSettingsStore().hasConnected"
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
             class="w-50"
             prepend-icon="mdi-square-outline"
           >
             <span>2D</span>
           </v-btn>
           <v-btn
-            color="toggle"
+            color="lightBlue"
             :disabled="
               !useCameraSettingsStore().hasConnected || !useCameraSettingsStore().isCurrentVideoFormatCalibrated
             "
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
             class="w-50"
             prepend-icon="mdi-cube-outline"
           >
@@ -51,11 +56,11 @@ const processingMode = computed<number>({
       <v-col class="pa-4 pt-0">
         <p style="color: white">Stream Display</p>
         <v-btn-toggle v-model="value" :multiple="true" mandatory base-color="surface-variant" class="fill w-100">
-          <v-btn color="toggle" class="fill w-50">
+          <v-btn color="lightBlue" class="fill w-50" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
             <v-icon start class="mode-btn-icon">mdi-import</v-icon>
             <span class="mode-btn-label">Raw</span>
           </v-btn>
-          <v-btn color="toggle" class="fill w-50">
+          <v-btn color="lightBlue" class="fill w-50" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
             <v-icon start class="mode-btn-icon">mdi-export</v-icon>
             <span class="mode-btn-label">Processed</span>
           </v-btn>
@@ -72,7 +77,7 @@ const processingMode = computed<number>({
 
 .mode-btn-label,
 .mode-btn-label > * {
-  color: white;
+  /* color: white; */
 }
 
 th {
diff --git a/photon-client/src/components/dashboard/tabs/OutputTab.vue b/photon-client/src/components/dashboard/tabs/OutputTab.vue
index 953f6cccd5..520288be30 100644
--- a/photon-client/src/components/dashboard/tabs/OutputTab.vue
+++ b/photon-client/src/components/dashboard/tabs/OutputTab.vue
@@ -7,6 +7,9 @@ import { computed } from "vue";
 import { RobotOffsetType } from "@/types/SettingTypes";
 import { useStateStore } from "@/stores/StateStore";
 import { useDisplay } from "vuetify";
+import { useTheme } from "vuetify";
+
+const theme = useTheme();
 
 const isTagPipeline = computed(
   () =>
@@ -159,8 +162,9 @@ const interactiveCols = computed(() =>
           <v-btn
             size="small"
             block
-            color="accent"
+            color="primary"
             class="text-black"
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
             @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.Single)"
           >
             Take Point
@@ -170,7 +174,8 @@ const interactiveCols = computed(() =>
           <v-btn
             size="small"
             block
-            color="yellow-darken-3"
+            color="error"
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
             @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.Clear)"
           >
             Clear All Points
@@ -185,8 +190,9 @@ const interactiveCols = computed(() =>
           <v-btn
             size="small"
             block
-            color="accent"
+            color="primary"
             class="text-black"
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
             @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.DualFirst)"
           >
             Take First Point
@@ -196,8 +202,9 @@ const interactiveCols = computed(() =>
           <v-btn
             size="small"
             block
-            color="accent"
+            color="primary"
             class="text-black"
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
             @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.DualSecond)"
           >
             Take Second Point
@@ -207,7 +214,8 @@ const interactiveCols = computed(() =>
           <v-btn
             size="small"
             block
-            color="yellow-darken-3"
+            color="error"
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
             @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.Clear)"
           >
             Clear All Points
@@ -238,6 +246,6 @@ const interactiveCols = computed(() =>
 .metric-item-title {
   font-size: 18px;
   text-decoration: underline;
-  text-decoration-color: #ffd843;
+  text-decoration-color: rgb(var(--v-theme-primary));
 }
 </style>
diff --git a/photon-client/src/components/dashboard/tabs/TargetsTab.vue b/photon-client/src/components/dashboard/tabs/TargetsTab.vue
index 7ac942b707..e884b3ed8e 100644
--- a/photon-client/src/components/dashboard/tabs/TargetsTab.vue
+++ b/photon-client/src/components/dashboard/tabs/TargetsTab.vue
@@ -200,7 +200,7 @@ const resetCurrentBuffer = () => {
           >Multi-tag pose standard deviation over the last
           {{ useStateStore().currentMultitagBuffer?.length || "NaN" }}/100 samples
         </v-card-subtitle>
-        <v-btn color="secondary" class="mb-4 mt-1" style="width: min-content" variant="flat" @click="resetCurrentBuffer"
+        <v-btn color="secondary" class="mb-4 mt-1" style="width: min-content" variant="elevated" @click="resetCurrentBuffer"
           >Reset Samples</v-btn
         >
         <v-table density="compact">
@@ -312,7 +312,7 @@ th {
   }
 
   ::-webkit-scrollbar-thumb {
-    background-color: #ffd843;
+    background-color: rgb(var(--v-theme-accent));
     border-radius: 10px;
   }
 }
diff --git a/photon-client/src/components/settings/ApriltagControlCard.vue b/photon-client/src/components/settings/ApriltagControlCard.vue
index 5ff4c456aa..1854a58ea6 100644
--- a/photon-client/src/components/settings/ApriltagControlCard.vue
+++ b/photon-client/src/components/settings/ApriltagControlCard.vue
@@ -67,7 +67,7 @@ const quaternionToEuler = (rot_quat: Quaternion): { x: number; y: number; z: num
   }
 
   tbody :hover td {
-    background-color: #005281 !important;
+    // background-color: #005281 !important;
   }
 
   ::-webkit-scrollbar {
@@ -82,8 +82,8 @@ const quaternionToEuler = (rot_quat: Quaternion): { x: number; y: number; z: num
   }
 
   ::-webkit-scrollbar-thumb {
-    background-color: #ffd843;
+    background-color: rgb(var(--v-theme-accent));
     border-radius: 10px;
   }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/photon-client/src/components/settings/DeviceControlCard.vue b/photon-client/src/components/settings/DeviceControlCard.vue
index ac6cb2b10f..89fb7af499 100644
--- a/photon-client/src/components/settings/DeviceControlCard.vue
+++ b/photon-client/src/components/settings/DeviceControlCard.vue
@@ -4,6 +4,9 @@ import { useStateStore } from "@/stores/StateStore";
 import PvSelect from "@/components/common/pv-select.vue";
 import PvInput from "@/components/common/pv-input.vue";
 import axios from "axios";
+import { useTheme } from "vuetify";
+
+const theme = useTheme();
 
 const restartProgram = () => {
   axios
@@ -232,29 +235,29 @@ const nukePhotonConfigDirectory = () => {
     <div class="pa-5 pt-0">
       <v-row>
         <v-col cols="12" lg="4" md="6">
-          <v-btn color="warning" @click="restartProgram">
+          <v-btn color="photonYellow" @click="restartProgram" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
             <v-icon start class="open-icon"> mdi-restart </v-icon>
             <span class="open-label">Restart PhotonVision</span>
           </v-btn>
         </v-col>
         <v-col cols="12" lg="4" md="6">
-          <v-btn color="warning" @click="restartDevice">
+          <v-btn color="photonYellow" @click="restartDevice" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
             <v-icon start class="open-icon"> mdi-restart-alert </v-icon>
             <span class="open-label">Restart Device</span>
           </v-btn>
         </v-col>
         <v-col cols="12" lg="4">
-          <v-btn color="primary" @click="openOfflineUpdatePrompt">
+          <v-btn color="lightBlue" @click="openOfflineUpdatePrompt" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
             <v-icon start class="open-icon"> mdi-upload </v-icon>
             <span class="open-label">Offline Update</span>
           </v-btn>
           <input ref="offlineUpdate" type="file" accept=".jar" style="display: none" @change="handleOfflineUpdate" />
         </v-col>
       </v-row>
-      <v-divider class="mt-3 pb-3" />
+      <!-- <v-divider class="mt-3 pb-3" /> -->
       <v-row>
         <v-col cols="12" sm="6">
-          <v-btn color="accent" @click="() => (showImportDialog = true)">
+          <v-btn color="lightBlue" @click="() => (showImportDialog = true)" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
             <v-icon start class="open-icon"> mdi-import </v-icon>
             <span class="open-label">Import Settings</span>
           </v-btn>
@@ -268,7 +271,7 @@ const nukePhotonConfigDirectory = () => {
               }
             "
           >
-            <v-card color="primary" dark>
+            <v-card color="surface" dark>
               <v-card-title class="pb-0">Import Settings</v-card-title>
               <v-card-text>
                 Upload and apply previously saved or exported PhotonVision settings to this device
@@ -305,7 +308,7 @@ const nukePhotonConfigDirectory = () => {
           </v-dialog>
         </v-col>
         <v-col cols="12" sm="6">
-          <v-btn color="accent" @click="openExportSettingsPrompt">
+          <v-btn color="lightBlue" @click="openExportSettingsPrompt" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
             <v-icon start class="open-icon"> mdi-export </v-icon>
             <span class="open-label">Export Settings</span>
           </v-btn>
@@ -318,7 +321,7 @@ const nukePhotonConfigDirectory = () => {
           />
         </v-col>
         <v-col cols="12" sm="6">
-          <v-btn color="accent" @click="openExportLogsPrompt">
+          <v-btn color="lightBlue" @click="openExportLogsPrompt" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
             <v-icon start class="open-icon"> mdi-download </v-icon>
             <span class="open-label">Download logs</span>
 
@@ -333,16 +336,16 @@ const nukePhotonConfigDirectory = () => {
           </v-btn>
         </v-col>
         <v-col cols="12" sm="6">
-          <v-btn color="accent" @click="useStateStore().showLogModal = true">
+          <v-btn color="lightBlue" @click="useStateStore().showLogModal = true" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
             <v-icon start class="open-icon"> mdi-eye </v-icon>
-            <span class="open-label">View program logs</span>
+            <span class="open-label">View logs</span>
           </v-btn>
         </v-col>
       </v-row>
-      <v-divider class="mt-3 pb-3" />
+      <!-- <v-divider class="mt-3 pb-3" /> -->
       <v-row>
         <v-col cols="12">
-          <v-btn color="error" @click="() => (showFactoryReset = true)">
+          <v-btn color="error" @click="() => (showFactoryReset = true)" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
             <v-icon start class="open-icon"> mdi-skull-crossbones </v-icon>
             <span class="open-icon">
               {{
diff --git a/photon-client/src/components/settings/LEDControlCard.vue b/photon-client/src/components/settings/LEDControlCard.vue
index 19f8c1dabf..9d9f59003d 100644
--- a/photon-client/src/components/settings/LEDControlCard.vue
+++ b/photon-client/src/components/settings/LEDControlCard.vue
@@ -4,7 +4,7 @@ import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
 </script>
 
 <template>
-  <v-card class="mb-3" color="surface">
+  <v-card class="mb-3 rounded-12" color="surface">
     <v-card-title class="pb-10px">LED Control</v-card-title>
     <v-card-text>
       <pv-slider
diff --git a/photon-client/src/components/settings/MetricsCard.vue b/photon-client/src/components/settings/MetricsCard.vue
index dce96c83e7..f7e91e400b 100644
--- a/photon-client/src/components/settings/MetricsCard.vue
+++ b/photon-client/src/components/settings/MetricsCard.vue
@@ -95,14 +95,14 @@ onBeforeMount(() => {
 <template>
   <v-card class="mb-3 rounded-12" color="surface">
     <v-card-title style="display: flex; justify-content: space-between">
-      <span>Stats</span>
+      <span>Metrics</span>
       <v-btn variant="text" @click="fetchMetrics">
         <v-icon start class="open-icon">mdi-reload</v-icon>
         Last Fetched: {{ metricsLastFetched }}
       </v-btn>
     </v-card-title>
     <v-card-text class="pt-0 pb-3">
-      <v-card-subtitle class="pa-0" style="font-size: 16px">General Metrics</v-card-subtitle>
+      <v-card-subtitle class="pa-0" style="font-size: 16px">General</v-card-subtitle>
       <v-table class="metrics-table mt-3">
         <thead>
           <tr>
@@ -139,7 +139,7 @@ onBeforeMount(() => {
       </v-table>
     </v-card-text>
     <v-card-text class="pt-4">
-      <v-card-subtitle class="pa-0 pb-1" style="font-size: 16px">Hardware Metrics</v-card-subtitle>
+      <v-card-subtitle class="pa-0 pb-1" style="font-size: 16px">Hardware</v-card-subtitle>
       <v-table class="metrics-table mt-3">
         <thead>
           <tr>
@@ -186,10 +186,12 @@ onBeforeMount(() => {
 }
 
 $stats-table-border: rgba(255, 255, 255, 0.5);
+$stats-table-inner: rgba(255, 255, 255, 0.1);
 
 .t {
   border-top: 1px solid $stats-table-border;
   border-right: 1px solid $stats-table-border;
+  border-bottom: 1px solid $stats-table-inner !important;
 }
 
 .b {
@@ -201,12 +203,14 @@ $stats-table-border: rgba(255, 255, 255, 0.5);
   border-top: 1px solid $stats-table-border;
   border-left: 1px solid $stats-table-border;
   border-right: 1px solid $stats-table-border;
+  border-bottom: 1px solid $stats-table-inner !important;
   border-top-left-radius: 5px;
 }
 
 .tr {
   border-top: 1px solid $stats-table-border;
   border-right: 1px solid $stats-table-border;
+  border-bottom: 1px solid $stats-table-inner !important;
   border-top-right-radius: 5px;
 }
 
@@ -234,8 +238,6 @@ $stats-table-border: rgba(255, 255, 255, 0.5);
 
 .metric-item-title {
   font-size: 18px !important;
-  text-decoration: underline;
-  text-decoration-color: #ffd843;
 }
 
 .v-table {
@@ -257,7 +259,7 @@ $stats-table-border: rgba(255, 255, 255, 0.5);
   }
 
   ::-webkit-scrollbar-thumb {
-    background-color: #ffd843;
+    background-color: rgb(var(--v-theme-accent));
     border-radius: 10px;
   }
 }
diff --git a/photon-client/src/components/settings/NetworkingCard.vue b/photon-client/src/components/settings/NetworkingCard.vue
index 4d4a164dd5..64e7e04b96 100644
--- a/photon-client/src/components/settings/NetworkingCard.vue
+++ b/photon-client/src/components/settings/NetworkingCard.vue
@@ -7,6 +7,9 @@ import PvSwitch from "@/components/common/pv-switch.vue";
 import PvSelect from "@/components/common/pv-select.vue";
 import { type ConfigurableNetworkSettings, NetworkConnectionType } from "@/types/SettingTypes";
 import { useStateStore } from "@/stores/StateStore";
+import { useTheme } from "vuetify";
+
+const theme = useTheme();
 
 // Copy object to remove reference to store
 const tempSettingsStruct = ref<ConfigurableNetworkSettings>(Object.assign({}, useSettingsStore().network));
@@ -274,8 +277,8 @@ watchEffect(() => {
         <v-divider class="mt-10px pb-5" />
       </v-form>
       <v-btn
-        color="accent"
-        :variant="!settingsValid || !settingsHaveChanged() ? 'tonal' : 'elevated'"
+        color="primary"
+        :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
         style="color: black; width: 100%"
         :disabled="!settingsValid || !settingsHaveChanged()"
         @click="saveGeneralSettings"
diff --git a/photon-client/src/components/settings/ObjectDetectionCard.vue b/photon-client/src/components/settings/ObjectDetectionCard.vue
index c86f02ab22..2b96b35619 100644
--- a/photon-client/src/components/settings/ObjectDetectionCard.vue
+++ b/photon-client/src/components/settings/ObjectDetectionCard.vue
@@ -591,7 +591,7 @@ const handleBulkImport = () => {
   }
 
   ::-webkit-scrollbar-thumb {
-    background-color: #ffd843;
+    background-color: rgb(var(--v-theme-accent));
     border-radius: 10px;
   }
 }
diff --git a/photon-client/src/plugins/vuetify.ts b/photon-client/src/plugins/vuetify.ts
index 23dec13656..904f436ac2 100644
--- a/photon-client/src/plugins/vuetify.ts
+++ b/photon-client/src/plugins/vuetify.ts
@@ -3,9 +3,8 @@ import "@mdi/font/css/materialdesignicons.css";
 import type { ThemeDefinition } from "vuetify/lib/composables/theme";
 import { createVuetify } from "vuetify";
 
-const commonColors = { error: "#b80000", info: "#2196F3", success: "#4CAF50", warning: "#FFC107" };
 
-const ThemeColors = {
+const CommonColors = {
   photonBlue: "#006492",
   photonYellow: "#FFD843",
   lightBlue: "#39A4D5",
@@ -18,13 +17,22 @@ const ThemeColors = {
 const DarkTheme: ThemeDefinition = {
   dark: true,
   colors: {
-    background: ThemeColors.darkGray,
-    surface: ThemeColors.gray,
-    sidebar: ThemeColors.darkGray,
+    background: CommonColors.darkGray,
+    sidebar: CommonColors.darkGray,
+
+    surface: CommonColors.gray,
+    primary: CommonColors.lightBlue,
+    secondary: CommonColors.photonYellow,
+    accent: CommonColors.photonBlue,
+
+    toggle: CommonColors.photonBlue,
+    logsBackground: CommonColors.darkGray,
+
+
+    photonYellow: CommonColors.photonYellow,
+    lightBlue: CommonColors.lightBlue,
+
 
-    primary: ThemeColors.lightBlue,
-    secondary: ThemeColors.photonYellow,
-    accent: ThemeColors.lightBlue,
 
 
     // Card/info background
@@ -32,30 +40,37 @@ const DarkTheme: ThemeDefinition = {
     "on-surface-variant": "#f0f0f0",
 
 
-    toggle: "#006492",
-
-    // Misc/mismatches between themes
-
-    ...{ error: "#9b0000", info: "#2196F3", success: "#4CAF50", warning: "#FFC107" } //b80000
+    error: "#ff2e2e", //b80000
+    info: "#2196F3",
+    success: "#4CAF50",
+    warning: "#FFC107"
   }
 };
 
 const LightTheme: ThemeDefinition = {
   dark: false,
   colors: {
-    background: ThemeColors.lightGray,
-    surface: ThemeColors.photonBlue,
-    sidebar: ThemeColors.photonBlue,
+    background: CommonColors.lightGray,
+    sidebar: CommonColors.photonBlue,
+
+    surface: CommonColors.photonBlue,
+    primary: CommonColors.photonYellow,
+    secondary: CommonColors.lightBlue,
+    accent: CommonColors.photonYellow,
+
+    toggle: CommonColors.lightBlue,
+    logsBackground: CommonColors.lightGray,
+
+    photonYellow: CommonColors.photonYellow,
+    lightBlue: CommonColors.lightBlue,
+
+
 
-    primary: ThemeColors.photonBlue,
-    secondary: ThemeColors.lightBlue,
-    accent: ThemeColors.photonYellow,
 
     "surface-variant": "#358AB0",
-    "surface-light": ThemeColors.photonYellow,
-    toggle: "#39A4D5",
+    "surface-light": CommonColors.photonYellow,
 
-    ...commonColors
+    ...{ error: "#b80000", info: "#2196F3", success: "#4CAF50", warning: "#FFC107" }
   },
   variables: { "medium-emphasis-opacity": 1, "high-emphasis-opacity": 1 }
 };
diff --git a/photon-client/src/views/CameraMatchingView.vue b/photon-client/src/views/CameraMatchingView.vue
index cffb2f4e9b..1a8fff3bda 100644
--- a/photon-client/src/views/CameraMatchingView.vue
+++ b/photon-client/src/views/CameraMatchingView.vue
@@ -17,6 +17,9 @@ import PvCameraInfoCard from "@/components/common/pv-camera-info-card.vue";
 import axios from "axios";
 import PvCameraMatchCard from "@/components/common/pv-camera-match-card.vue";
 import type { WebsocketCameraSettingsUpdate } from "@/types/WebsocketDataTypes";
+import { useTheme } from "vuetify";
+
+const theme = useTheme();
 
 const formatUrl = (port) => `http://${inject("backendHostname")}:${port}/stream.mjpg`;
 const host = inject<string>("backendHost");
@@ -97,7 +100,7 @@ const deactivatingModule = ref(false);
 const deactivateModule = (cameraUniqueName: string) => {
   if (deactivatingModule.value) return;
   deactivatingModule.value = true;
-
+// TODO: FIX THEMING ON POPUPS
   axios
     .post("/utils/unassignCamera", { cameraUniqueName: cameraUniqueName })
     .then(() => {
@@ -291,7 +294,7 @@ const openExportSettingsPrompt = () => {
         lg="4"
         class="pr-0"
       >
-        <v-card color="primary">
+        <v-card color="surface" class="rounded-12">
           <v-card-title>{{ cameraInfoFor(module.matchedCameraInfo).name }}</v-card-title>
           <v-card-subtitle v-if="!cameraCononected(cameraInfoFor(module.matchedCameraInfo).uniquePath)"
             >Status: <span class="inactive-status">Disconnected</span></v-card-subtitle
@@ -361,8 +364,9 @@ const openExportSettingsPrompt = () => {
             <v-row>
               <v-col cols="12" md="4" class="pr-md-0 pb-0 pb-md-3">
                 <v-btn
-                  color="secondary"
+                  color="lightBlue"
                   style="width: 100%"
+                  :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
                   @click="
                     setCameraView(
                       module.matchedCameraInfo,
@@ -376,8 +380,9 @@ const openExportSettingsPrompt = () => {
               <v-col cols="6" md="5" class="pr-0">
                 <v-btn
                   class="text-black"
-                  color="accent"
+                  color="photonYellow"
                   style="width: 100%"
+                  :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
                   :loading="deactivatingModule"
                   @click="deactivateModule(module.uniqueName)"
                 >
@@ -385,7 +390,7 @@ const openExportSettingsPrompt = () => {
                 </v-btn>
               </v-col>
               <v-col cols="6" md="3">
-                <v-btn class="pa-0" color="error" style="width: 100%" @click="setCameraDeleting(module)">
+                <v-btn class="pa-0" color="error" style="width: 100%" @click="setCameraDeleting(module)" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
                   <v-icon>mdi-trash-can-outline</v-icon>
                 </v-btn>
               </v-col>
@@ -394,7 +399,7 @@ const openExportSettingsPrompt = () => {
         </v-card>
       </v-col>
 
-      <!-- Disabled modules -->
+      <!-- Deactivated modules -->
       <v-col
         v-for="module in disabledVisionModules"
         :key="`disabled-${module.uniqueName}`"
@@ -403,7 +408,7 @@ const openExportSettingsPrompt = () => {
         lg="4"
         class="pr-0"
       >
-        <v-card class="pr-0" color="primary">
+        <v-card class="pr-0 rounded-12" color="surface">
           <v-card-title>{{ module.nickname }}</v-card-title>
           <v-card-subtitle>Status: <span class="inactive-status">Deactivated</span></v-card-subtitle>
           <v-card-text class="pt-3">
@@ -439,8 +444,9 @@ const openExportSettingsPrompt = () => {
             <v-row>
               <v-col cols="12" md="4" class="pr-md-0 pb-0 pb-md-3">
                 <v-btn
-                  color="secondary"
+                  color="lightBlue"
                   style="width: 100%"
+                  :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
                   @click="
                     setCameraView(
                       module.matchedCameraInfo,
@@ -454,8 +460,9 @@ const openExportSettingsPrompt = () => {
               <v-col cols="6" md="5" class="pr-0">
                 <v-btn
                   class="text-black"
-                  color="accent"
+                  color="photonYellow"
                   style="width: 100%"
+                  :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
                   :loading="activatingModule"
                   @click="activateModule(module.uniqueName)"
                 >
@@ -463,7 +470,7 @@ const openExportSettingsPrompt = () => {
                 </v-btn>
               </v-col>
               <v-col cols="6" md="3">
-                <v-btn class="pa-0" color="error" style="width: 100%" @click="setCameraDeleting(module)">
+                <v-btn class="pa-0" color="error" style="width: 100%" @click="setCameraDeleting(module)" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
                   <v-icon>mdi-trash-can-outline</v-icon>
                 </v-btn>
               </v-col>
@@ -474,7 +481,7 @@ const openExportSettingsPrompt = () => {
 
       <!-- Unassigned cameras -->
       <v-col v-for="(camera, index) in unmatchedCameras" :key="index" cols="12" sm="6" lg="4" class="pr-0">
-        <v-card class="pr-0" color="primary">
+        <v-card class="pr-0 rounded-12" color="surface">
           <v-card-title>
             <span v-if="camera.PVUsbCameraInfo">USB Camera:</span>
             <span v-else-if="camera.PVCSICameraInfo">CSI Camera:</span>
@@ -489,16 +496,17 @@ const openExportSettingsPrompt = () => {
           <v-card-text class="pt-0">
             <v-row>
               <v-col cols="6" class="pr-0">
-                <v-btn color="secondary" style="width: 100%" @click="setCameraView(camera, false)">
+                <v-btn color="lightBlue" style="width: 100%" @click="setCameraView(camera, false)" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
                   <span>Details</span>
                 </v-btn>
               </v-col>
               <v-col cols="6">
                 <v-btn
                   class="text-black"
-                  color="accent"
+                  color="photonYellow"
                   style="width: 100%"
                   :loading="assigningCamera"
+                  :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
                   @click="assignCamera(camera)"
                 >
                   Activate
@@ -517,7 +525,7 @@ const openExportSettingsPrompt = () => {
           class="pl-6 pr-6 d-flex flex-column justify-center"
           style="background-color: transparent; height: 100%"
         >
-          <v-card-text class="d-flex flex-column align-center justify-center">
+          <v-card-text class="d-flex flex-column align-center justify-center" style="flex-grow: 0;">
             <v-icon size="64" color="primary">mdi-plus</v-icon>
           </v-card-text>
           <v-card-title>Additional plugged in cameras will display here!</v-card-title>
@@ -527,7 +535,7 @@ const openExportSettingsPrompt = () => {
 
     <!-- Camera details modal -->
     <v-dialog v-model="viewingDetails" max-width="800">
-      <v-card v-if="viewingCamera[0] !== null" flat color="primary">
+      <v-card v-if="viewingCamera[0] !== null" flat color="surface">
         <v-card-title class="d-flex justify-space-between">
           <span>{{ cameraInfoFor(viewingCamera[0])?.name ?? cameraInfoFor(viewingCamera[0])?.baseName }}</span>
           <v-btn variant="text" @click="setCameraView(null, null)">
@@ -552,7 +560,7 @@ const openExportSettingsPrompt = () => {
 
     <!-- Camera delete modal -->
     <v-dialog v-model="viewingDeleteCamera" width="800">
-      <v-card v-if="cameraToDelete !== null" class="dialog-container" color="primary" flat>
+      <v-card v-if="cameraToDelete !== null" class="dialog-container" color="surface" flat>
         <v-card-title> Delete {{ cameraToDelete.nickname }}? </v-card-title>
         <v-card-text class="pb-10px">
           <v-row class="align-center">
@@ -560,7 +568,7 @@ const openExportSettingsPrompt = () => {
               <span class="text-white"> This will delete ALL OF YOUR SETTINGS and restart PhotonVision. </span>
             </v-col>
             <v-col cols="12" md="6">
-              <v-btn color="secondary" block @click="openExportSettingsPrompt">
+              <v-btn color="lightBlue" block @click="openExportSettingsPrompt" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
                 <v-icon start class="open-icon"> mdi-export </v-icon>
                 <span class="open-label">Backup Settings</span>
                 <a
@@ -588,6 +596,7 @@ const openExportSettingsPrompt = () => {
             color="error"
             :disabled="yesDeleteMySettingsText.toLowerCase() !== cameraToDelete.nickname.toLowerCase()"
             :loading="deletingCamera"
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
             @click="deleteThisCamera(cameraToDelete.uniqueName)"
           >
             <v-icon start class="open-icon"> mdi-trash-can-outline </v-icon>
@@ -615,7 +624,7 @@ td {
 }
 
 .v-table {
-  background-color: #006492 !important;
+  /* background-color: #006492 !important; */
 }
 
 .active-status {
@@ -631,7 +640,7 @@ td {
 }
 
 a:hover {
-  color: pink;
+  /* color: pink; */
   background-color: transparent;
   text-decoration: underline;
 }
diff --git a/photon-client/src/views/DashboardView.vue b/photon-client/src/views/DashboardView.vue
index 7d59e0dc2a..07e9ce7d63 100644
--- a/photon-client/src/views/DashboardView.vue
+++ b/photon-client/src/views/DashboardView.vue
@@ -122,10 +122,10 @@ const showCameraSetupDialog = ref(useCameraSettingsStore().needsCameraConfigurat
       max-width="800"
       dark
     >
-      <v-card flat color="primary">
-        <v-card-title>Setup some cameras to get started!</v-card-title>
+      <v-card flat color="surface">
+        <v-card-title>Set up some cameras to get started!</v-card-title>
         <v-card-text class="pt-0">
-          No cameras activated - head to the <router-link to="/cameraConfigs">Camera matching tab</router-link> to set
+          No cameras activated - head to the <router-link to="/cameraConfigs" color="primary">Camera matching tab</router-link> to set
           some up!
         </v-card-text>
       </v-card>
@@ -135,17 +135,16 @@ const showCameraSetupDialog = ref(useCameraSettingsStore().needsCameraConfigurat
 
 <style scoped>
 a:link {
-  color: #ffd843;
   background-color: transparent;
   text-decoration: none;
 }
+/* TODO: FIX VISITED COLOR TO MATCH ORIGINAL PRIMARY */
 a:visited {
   color: #ffd843;
   background-color: transparent;
   text-decoration: none;
 }
 a:hover {
-  color: pink;
   background-color: transparent;
   text-decoration: underline;
 }
diff --git a/photon-client/src/views/DocsView.vue b/photon-client/src/views/DocsView.vue
index 47b0a43db8..1830268737 100644
--- a/photon-client/src/views/DocsView.vue
+++ b/photon-client/src/views/DocsView.vue
@@ -1,14 +1,24 @@
 <script setup lang="ts">
 const devMode = process.env.NODE_ENV === "development";
 </script>
-
+<!-- TODO: UPDATE DOC ICON -->
 <template>
   <div style="overflow: hidden; height: 100vh; width: 100%">
-    <div 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. Please recompile in production mode
-        with the documentation copied over after a full build.
-      </span>
+    <div v-if="devMode" style="width: 60%; height: 100%; margin: auto;">
+      <v-card
+        dark
+        flat
+        class="pl-6 pr-6 d-flex flex-column justify-center align-center"
+        style="background-color: transparent; height: 100%;"
+      >
+        <v-card-text class="d-flex flex-column" style="flex: 0;">
+          <v-icon size="64" color="primary">mdi-plus</v-icon>
+        </v-card-text>
+        <v-card-text style="width: 100%; flex-grow: 0; text-align: center;">
+          PhotonClient is in development mode so the documentation page will not load. Please recompile in production mode
+          with the documentation copied over after a full build.
+        </v-card-text>
+      </v-card>
     </div>
     <div v-else style="width: 100%; height: 100%">
       <!--suppress HtmlUnknownTarget -->

From 2a84d5e64635a11cebf7a925f825a2d89abc37d8 Mon Sep 17 00:00:00 2001
From: Devon Doyle <devondoyle@outlook.com>
Date: Sun, 27 Jul 2025 15:19:47 -0400
Subject: [PATCH 04/16] landing

---
 .../src/components/app/photon-sidebar.vue         |  2 +-
 .../components/cameras/CameraCalibrationCard.vue  |  3 ++-
 .../cameras/CameraCalibrationInfoCard.vue         |  3 ++-
 .../src/components/cameras/CameraSettingsCard.vue |  1 +
 .../src/components/cameras/CamerasView.vue        |  2 +-
 .../src/components/common/pv-range-slider.vue     | 10 +++++-----
 .../dashboard/CameraAndPipelineSelectCard.vue     |  8 ++++----
 .../src/components/dashboard/CamerasCard.vue      |  2 +-
 .../src/components/dashboard/ConfigOptions.vue    |  3 ++-
 .../components/dashboard/tabs/ThresholdTab.vue    | 15 +++++++++++----
 .../src/components/settings/DeviceControlCard.vue |  9 +++++----
 .../src/components/settings/NetworkingCard.vue    |  1 +
 photon-client/src/views/CameraMatchingView.vue    |  4 ++--
 13 files changed, 38 insertions(+), 25 deletions(-)

diff --git a/photon-client/src/components/app/photon-sidebar.vue b/photon-client/src/components/app/photon-sidebar.vue
index d392ecc5d5..a951dc02a9 100644
--- a/photon-client/src/components/app/photon-sidebar.vue
+++ b/photon-client/src/components/app/photon-sidebar.vue
@@ -66,7 +66,7 @@ const renderCompact = computed<boolean>(() => compact.value || !mdAndUp.value);
         <v-list-item
           v-if="mdAndUp"
           link
-          :prepend-icon="`mdi-chevron-${compact || !mdAndUp ? 'right' : 'left'}`"
+          :prepend-icon="theme.global.name.value === 'LightTheme' ? 'mdi-sunglasses' : 'mdi-moon-waning-crescent'"
           @click="theme.global.name.value = theme.global.name.value === 'LightTheme' ? 'DarkTheme' : 'LightTheme'"
         >
           <v-list-item-title>Theme</v-list-item-title>
diff --git a/photon-client/src/components/cameras/CameraCalibrationCard.vue b/photon-client/src/components/cameras/CameraCalibrationCard.vue
index 2f84567cc6..d57786ce77 100644
--- a/photon-client/src/components/cameras/CameraCalibrationCard.vue
+++ b/photon-client/src/components/cameras/CameraCalibrationCard.vue
@@ -217,7 +217,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
     <v-card class="mb-3 rounded-12" color="surface" dark>
       <v-card-title>Camera Calibration</v-card-title>
       <v-card-text v-show="!isCalibrating">
-        <v-card-subtitle class="pt-0 pl-0 pr-0 text-white">Current Calibration</v-card-subtitle>
+        <v-card-subtitle class="pt-0 pl-0 pr-0 text-white">Current Calibrations</v-card-subtitle>
         <v-table fixed-header height="100%" density="compact">
           <thead>
             <tr>
@@ -515,6 +515,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
             </v-card-text>
           </template>
           <!-- No result reported yet -->
+           <!-- TODO: VERIFY THEME (ACCENT) -->
           <template v-else-if="calibSuccess === undefined">
             <v-progress-circular indeterminate :size="70" :width="8" color="accent" />
             <v-card-text>Camera is being calibrated. This process may take several minutes...</v-card-text>
diff --git a/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue b/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue
index 8dd7968800..a73e32e6b1 100644
--- a/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue
+++ b/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue
@@ -91,7 +91,7 @@ const exportCalibrationURL = computed<string>(() =>
 const calibrationImageURL = (index: number) =>
   useCameraSettingsStore().getCalImageUrl(inject<string>("backendHost") as string, props.videoFormat.resolution, index);
 </script>
-
+<!-- TODO: CHECK ON THIS -->
 <template>
   <v-card color="surface" dark>
     <div class="d-flex flex-wrap pt-2 pl-2 pr-2">
@@ -134,6 +134,7 @@ const calibrationImageURL = (index: number) =>
       >{{ useCameraSettingsStore().currentCameraName }}@{{ getResolutionString(videoFormat.resolution) }}</v-card-title
     >
     <v-card-text v-if="!currentCalibrationCoeffs">
+      <!-- TODO: FIX -->
       <v-banner
         rounded
         bg-color="accent"
diff --git a/photon-client/src/components/cameras/CameraSettingsCard.vue b/photon-client/src/components/cameras/CameraSettingsCard.vue
index 7107544091..71f912adb4 100644
--- a/photon-client/src/components/cameras/CameraSettingsCard.vue
+++ b/photon-client/src/components/cameras/CameraSettingsCard.vue
@@ -221,6 +221,7 @@ const wrappedCameras = computed<SelectItem[]>(() =>
         <v-card-text class="pt-0 pb-10px">
           <v-row class="align-center">
             <v-col cols="12" md="6">
+              <!-- TODO: WTF????? -->
               <span class="text-white"> This will delete ALL OF YOUR SETTINGS and restart PhotonVision. </span>
             </v-col>
             <v-col cols="12" md="6">
diff --git a/photon-client/src/components/cameras/CamerasView.vue b/photon-client/src/components/cameras/CamerasView.vue
index b63e73bec4..70001dd956 100644
--- a/photon-client/src/components/cameras/CamerasView.vue
+++ b/photon-client/src/components/cameras/CamerasView.vue
@@ -55,7 +55,7 @@ const fpsTooLow = computed<boolean>(() => {
           :disabled="useCameraSettingsStore().isCalibrationMode || useCameraSettingsStore().pipelineNames.length === 0"
           label="Driver Mode"
           style="margin-left: auto"
-          color="accent"
+          color="primary"
           density="compact"
           hide-details="auto"
         />
diff --git a/photon-client/src/components/common/pv-range-slider.vue b/photon-client/src/components/common/pv-range-slider.vue
index 146971b1ee..08ec0de98f 100644
--- a/photon-client/src/components/common/pv-range-slider.vue
+++ b/photon-client/src/components/common/pv-range-slider.vue
@@ -67,15 +67,15 @@ const checkNumberRange = (v: string): boolean => {
         :disabled="disabled"
         hide-details
         class="align-center ml-0 mr-0"
-        :color="inverted ? 'rgba(255, 255, 255, 0.2)' : 'accent'"
-        :track-color="inverted ? 'accent' : undefined"
-        thumb-color="accent"
+        color="primary"
+        :track-color="inverted ? 'primary' : undefined"
+        thumb-color="primary"
         :step="step"
       >
         <template #prepend>
           <v-text-field
             :model-value="localValue[0]"
-            color="accent"
+            color="primary"
             class="mt-0 pt-0"
             density="compact"
             hide-details
@@ -93,7 +93,7 @@ const checkNumberRange = (v: string): boolean => {
         <template #append>
           <v-text-field
             :model-value="localValue[1]"
-            color="accent"
+            color="primary"
             class="mt-0 pt-0"
             density="compact"
             hide-details
diff --git a/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue b/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
index 37f255fd58..beb542cd03 100644
--- a/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
+++ b/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
@@ -392,14 +392,14 @@ const wrappedCameras = computed<SelectItem[]>(() =>
           />
         </v-card-text>
         <v-card-actions class="pr-5 pt-10px pb-5">
-          <v-btn color="error" variant="elevated" @click="cancelPipelineCreation"> Cancel </v-btn>
+          <v-btn color="lightBlue" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" @click="cancelPipelineCreation"> Cancel </v-btn>
           <v-btn
-            color="accent"
+            color="photonYellow"
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
             :disabled="checkPipelineName(newPipelineName) !== true"
-            variant="elevated"
             @click="createNewPipeline"
           >
-            Save
+            Create
           </v-btn>
         </v-card-actions>
       </v-card>
diff --git a/photon-client/src/components/dashboard/CamerasCard.vue b/photon-client/src/components/dashboard/CamerasCard.vue
index 22e8b2d412..0c5b77ae3b 100644
--- a/photon-client/src/components/dashboard/CamerasCard.vue
+++ b/photon-client/src/components/dashboard/CamerasCard.vue
@@ -60,7 +60,7 @@ const performanceRecommendation = computed<string>(() => {
         v-model="driverMode"
         :disabled="useCameraSettingsStore().isCalibrationMode || useCameraSettingsStore().pipelineNames.length === 0"
         label="Driver Mode"
-        color="accent"
+        color="primary"
         hide-details="auto"
       />
     </v-card-title>
diff --git a/photon-client/src/components/dashboard/ConfigOptions.vue b/photon-client/src/components/dashboard/ConfigOptions.vue
index 1ed9588963..c49dfe482f 100644
--- a/photon-client/src/components/dashboard/ConfigOptions.vue
+++ b/photon-client/src/components/dashboard/ConfigOptions.vue
@@ -113,10 +113,11 @@ const onBeforeTabUpdate = () => {
 
 <template>
   <v-row no-gutters class="tabGroups">
+    <!-- TODO: FIX FOR THEME, MAYBE CLEAN UP? -->
     <template v-if="!useCameraSettingsStore().hasConnected">
       <v-col cols="12">
         <v-card color="error">
-          <v-card-title class="text-white">
+          <v-card-title>
             Camera has not connected. Please check your connection and try again.
           </v-card-title>
         </v-card>
diff --git a/photon-client/src/components/dashboard/tabs/ThresholdTab.vue b/photon-client/src/components/dashboard/tabs/ThresholdTab.vue
index 0def1f4808..218c1dd746 100644
--- a/photon-client/src/components/dashboard/tabs/ThresholdTab.vue
+++ b/photon-client/src/components/dashboard/tabs/ThresholdTab.vue
@@ -6,6 +6,9 @@ import PvSwitch from "@/components/common/pv-switch.vue";
 import { useStateStore } from "@/stores/StateStore";
 import { ColorPicker, type HSV } from "@/lib/ColorPicker";
 import { useDisplay } from "vuetify";
+import { useTheme } from "vuetify";
+
+const theme = useTheme();
 
 const averageHue = computed<number>(() => {
   const isHueInverted = useCameraSettingsStore().currentPipelineSettings.hueInverted;
@@ -186,8 +189,9 @@ const interactiveCols = computed(() =>
             <v-btn
               size="small"
               block
-              color="accent"
+              color="primary"
               class="text-black"
+              :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
               @click="enableColorPicking(useCameraSettingsStore().currentPipelineSettings.hueInverted ? 2 : 3)"
             >
               <v-icon start> mdi-minus </v-icon>
@@ -195,7 +199,7 @@ const interactiveCols = computed(() =>
             </v-btn>
           </v-col>
           <v-col cols="4" class="pl-0 pr-0">
-            <v-btn color="accent" class="text-black" size="small" block @click="enableColorPicking(1)">
+            <v-btn color="primary" class="text-black" size="small" block @click="enableColorPicking(1)" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
               <v-icon start> mdi-plus-minus </v-icon>
               {{ useCameraSettingsStore().currentPipelineSettings.hueInverted ? "Exclude" : "Set to" }} Average
             </v-btn>
@@ -204,8 +208,9 @@ const interactiveCols = computed(() =>
             <v-btn
               size="small"
               block
-              color="accent"
+              color="primary"
               class="text-black"
+              :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
               @click="enableColorPicking(useCameraSettingsStore().currentPipelineSettings.hueInverted ? 3 : 2)"
             >
               <v-icon start> mdi-plus </v-icon>
@@ -215,7 +220,9 @@ const interactiveCols = computed(() =>
         </template>
         <template v-else>
           <v-card-text class="pa-0 pt-3 pb-3">
-            <v-btn block color="accent" class="text-black" size="small" @click="disableColorPicking"> Cancel </v-btn>
+            <v-btn block color="primary" class="text-black" size="small" @click="disableColorPicking" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
+              Cancel
+            </v-btn>
           </v-card-text>
         </template>
       </div>
diff --git a/photon-client/src/components/settings/DeviceControlCard.vue b/photon-client/src/components/settings/DeviceControlCard.vue
index 89fb7af499..cbe39dfbfc 100644
--- a/photon-client/src/components/settings/DeviceControlCard.vue
+++ b/photon-client/src/components/settings/DeviceControlCard.vue
@@ -298,7 +298,7 @@ const nukePhotonConfigDirectory = () => {
                     :error-messages="importType === undefined ? 'Settings type not selected' : ''"
                     :accept="importType === ImportType.AllSettings ? '.zip' : '.json'"
                   />
-                  <v-btn color="accent" :disabled="importFile === null" @click="handleSettingsImport">
+                  <v-btn color="primary" :disabled="importFile === null" @click="handleSettingsImport":variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
                     <v-icon start class="open-icon"> mdi-import </v-icon>
                     <span class="open-label">Import Settings</span>
                   </v-btn>
@@ -358,9 +358,9 @@ const nukePhotonConfigDirectory = () => {
         </v-col>
       </v-row>
     </div>
-
+<!-- TODO: CHANGE NUKE ICON, SEEMS UNPROFESSIONAL -->
     <v-dialog v-model="showFactoryReset" width="800" dark>
-      <v-card color="primary" flat>
+      <v-card color="surface" flat>
         <v-card-title style="display: flex; justify-content: center">
           <span class="open-label">
             <v-icon end color="error" class="open-icon ma-1">mdi-nuke</v-icon>
@@ -374,7 +374,7 @@ const nukePhotonConfigDirectory = () => {
               <span> This will delete ALL OF YOUR SETTINGS and restart PhotonVision. </span>
             </v-col>
             <v-col cols="12" md="6">
-              <v-btn color="secondary" style="float: right" @click="openExportSettingsPrompt">
+              <v-btn color="primary" style="float: right" @click="openExportSettingsPrompt" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
                 <v-icon start class="open-icon"> mdi-export </v-icon>
                 <span class="open-label">Backup Settings</span>
                 <a
@@ -399,6 +399,7 @@ const nukePhotonConfigDirectory = () => {
         <v-card-text class="pt-10px">
           <v-btn
             color="error"
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
             :disabled="yesDeleteMySettingsText.toLowerCase() !== expected.toLowerCase()"
             @click="nukePhotonConfigDirectory"
           >
diff --git a/photon-client/src/components/settings/NetworkingCard.vue b/photon-client/src/components/settings/NetworkingCard.vue
index 64e7e04b96..6b8c22d3a6 100644
--- a/photon-client/src/components/settings/NetworkingCard.vue
+++ b/photon-client/src/components/settings/NetworkingCard.vue
@@ -156,6 +156,7 @@ watchEffect(() => {
               'The NetworkTables Server Address must be a valid Team Number, IP address, or Hostname'
           ]"
         />
+        <!-- TODO: FIX BANNERS -->
         <v-banner
           v-if="!isValidNetworkTablesIP(tempSettingsStruct.ntServerAddress) && !tempSettingsStruct.runNTServer"
           rounded
diff --git a/photon-client/src/views/CameraMatchingView.vue b/photon-client/src/views/CameraMatchingView.vue
index 1a8fff3bda..915d5b744d 100644
--- a/photon-client/src/views/CameraMatchingView.vue
+++ b/photon-client/src/views/CameraMatchingView.vue
@@ -391,7 +391,7 @@ const openExportSettingsPrompt = () => {
               </v-col>
               <v-col cols="6" md="3">
                 <v-btn class="pa-0" color="error" style="width: 100%" @click="setCameraDeleting(module)" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
-                  <v-icon>mdi-trash-can-outline</v-icon>
+                  <v-icon>mdi-delete</v-icon>
                 </v-btn>
               </v-col>
             </v-row>
@@ -557,7 +557,7 @@ const openExportSettingsPrompt = () => {
         </v-card-text>
       </v-card>
     </v-dialog>
-
+<!-- TODO WTFFFFFF COME ON MAN I HOPE I DIDNT DO THIS -->
     <!-- Camera delete modal -->
     <v-dialog v-model="viewingDeleteCamera" width="800">
       <v-card v-if="cameraToDelete !== null" class="dialog-container" color="surface" flat>

From 1711d1d9e17fc6543f620fcbe670f8aebe3e6557 Mon Sep 17 00:00:00 2001
From: Devolian <devondoyle@outlook.com>
Date: Tue, 29 Jul 2025 11:23:59 -0400
Subject: [PATCH 05/16] pre-cleanup finalizations

---
 photon-client/src/App.vue                     |   6 +-
 .../src/assets/images/loading-transparent.svg |   2 +-
 .../src/assets/styles/variables.scss          |   4 -
 .../components/app/photon-error-snackbar.vue  |   4 +
 .../src/components/app/photon-log-view.vue    |  18 +-
 .../src/components/app/photon-sidebar.vue     |  82 +++++----
 .../cameras/CameraCalibrationCard.vue         | 155 +++++++++---------
 .../cameras/CameraCalibrationInfoCard.vue     |  28 ++--
 .../components/cameras/CameraControlCard.vue  |  43 +++--
 .../components/cameras/CameraSettingsCard.vue |  64 ++++----
 .../src/components/cameras/CamerasView.vue    |  20 ++-
 .../dashboard/CameraAndPipelineSelectCard.vue |  42 +++--
 .../src/components/dashboard/CamerasCard.vue  |   5 +-
 .../components/dashboard/ConfigOptions.vue    |  18 +-
 .../components/dashboard/StreamConfigCard.vue |  24 ++-
 .../dashboard/tabs/ThresholdTab.vue           |  24 ++-
 .../components/settings/DeviceControlCard.vue |  95 +++++++----
 .../src/components/settings/MetricsCard.vue   |   8 +-
 .../components/settings/NetworkingCard.vue    |  62 +++----
 photon-client/src/plugins/vuetify.ts          |  40 +----
 .../src/views/CameraMatchingView.vue          | 136 ++++++++-------
 photon-client/src/views/DashboardView.vue     |  58 +++----
 photon-client/src/views/DocsView.vue          |  15 +-
 23 files changed, 516 insertions(+), 437 deletions(-)

diff --git a/photon-client/src/App.vue b/photon-client/src/App.vue
index 470a6cb1c7..13900aa912 100644
--- a/photon-client/src/App.vue
+++ b/photon-client/src/App.vue
@@ -103,14 +103,10 @@ if (!is_demo) {
   padding: 0 !important;
 }
 
-// TODO: WHAT IS THIS??
 .v-overlay__scrim {
-  background-color: #202020;
+  background-color: #111111;
 }
 
-// #title {
-//   color: #ffd843;
-// }
 div.v-layout {
   overflow: unset !important;
 }
diff --git a/photon-client/src/assets/images/loading-transparent.svg b/photon-client/src/assets/images/loading-transparent.svg
index e0bdca029c..6c68b4221b 100644
--- a/photon-client/src/assets/images/loading-transparent.svg
+++ b/photon-client/src/assets/images/loading-transparent.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" width="200" height="200" style="shape-rendering: auto; display: block; background: rgb(0, 100, 146);" xmlns:xlink="http://www.w3.org/1999/xlink"><g><g transform="translate(80,50)">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" width="200" height="200" style="shape-rendering: auto; display: block; background: rgba(0, 100, 146, 0);" xmlns:xlink="http://www.w3.org/1999/xlink"><g><g transform="translate(80,50)">
 <g transform="rotate(0)">
 <circle fill-opacity="1" fill="#ffd943" r="6" cy="0" cx="0">
   <animateTransform repeatCount="indefinite" dur="0.9345794392523364s" keyTimes="0;1" values="1.5 1.5;1 1" begin="-0.8177570093457943s" type="scale" attributeName="transform"></animateTransform>
diff --git a/photon-client/src/assets/styles/variables.scss b/photon-client/src/assets/styles/variables.scss
index cc2d944ea7..f27a47f664 100644
--- a/photon-client/src/assets/styles/variables.scss
+++ b/photon-client/src/assets/styles/variables.scss
@@ -24,10 +24,6 @@ html {
   background: rgba(0, 0, 0, 0.2);
 }
 
-.v-banner {
-  padding: 4px !important;
-}
-
 .v-card-title,
 .v-dialog > .v-overlay__content > .v-card > .v-card-title,
 .v-dialog > .v-overlay__content > form > .v-card > .v-card-title {
diff --git a/photon-client/src/components/app/photon-error-snackbar.vue b/photon-client/src/components/app/photon-error-snackbar.vue
index 914d8b2817..0d291b3e39 100644
--- a/photon-client/src/components/app/photon-error-snackbar.vue
+++ b/photon-client/src/components/app/photon-error-snackbar.vue
@@ -1,11 +1,15 @@
 <script setup lang="ts">
 import { useStateStore } from "@/stores/StateStore";
+import { useTheme } from "vuetify";
+
+const theme = useTheme();
 </script>
 
 <template>
   <v-snackbar
     v-model="useStateStore().snackbarData.show"
     location="top"
+    :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
     :color="useStateStore().snackbarData.color"
     :timeout="useStateStore().snackbarData.timeout"
   >
diff --git a/photon-client/src/components/app/photon-log-view.vue b/photon-client/src/components/app/photon-log-view.vue
index b2d2a82b1d..5d219fc104 100644
--- a/photon-client/src/components/app/photon-log-view.vue
+++ b/photon-client/src/components/app/photon-log-view.vue
@@ -82,7 +82,7 @@ document.addEventListener("keydown", (e) => {
         </v-col>
         <v-col class="align-self-center pl-3" style="text-align: right">
           <v-btn variant="text" color="white" @click="handleLogExport">
-            <v-icon start class="menu-icon"> mdi-download </v-icon>
+            <v-icon start class="menu-icon" size="large"> mdi-download </v-icon>
             <span class="menu-label">Download</span>
 
             <!-- Special hidden link that gets 'clicked' when the user exports journalctl logs -->
@@ -95,11 +95,11 @@ document.addEventListener("keydown", (e) => {
             />
           </v-btn>
           <v-btn variant="text" color="white" @click="handleLogClear">
-            <v-icon start class="menu-icon"> mdi-trash-can-outline </v-icon>
+            <v-icon start class="menu-icon" size="large"> mdi-trash-can-outline </v-icon>
             <span class="menu-label">Clear Client Logs</span>
           </v-btn>
           <v-btn variant="text" color="white" @click="() => (useStateStore().showLogModal = false)">
-            <v-icon start class="menu-icon"> mdi-close </v-icon>
+            <v-icon start class="menu-icon" size="large"> mdi-close </v-icon>
             <span class="menu-label">Close</span>
           </v-btn>
         </v-col>
@@ -110,7 +110,7 @@ document.addEventListener("keydown", (e) => {
       <div class="dialog-data">
         <!-- Log view options -->
         <v-row no-gutters class="pt-4 pt-md-0" style="display: flex; justify-content: space-between">
-          <v-col cols="12" md="7" style="display: flex; align-items: center">
+          <v-col cols="12" md="7" style="display: flex; align-items: center" class="pr-3">
             <v-text-field
               v-model="searchQuery"
               density="compact"
@@ -121,16 +121,20 @@ document.addEventListener("keydown", (e) => {
               label="Search"
               variant="underlined"
             />
-            <!-- TODO: CLEAN THIS UP -->
             <input v-model="timeInput" type="time" step="1" class="text-white pl-3" />
             <v-btn icon variant="flat" @click="timeInput = undefined">
-              <v-icon>mdi-close-circle-outline</v-icon>
+              <v-icon>mdi-close</v-icon>
             </v-btn>
           </v-col>
           <v-col v-for="level in [0, 1, 2, 3]" :key="level" class="pr-3">
             <div class="pb-0 pt-0" style="display: flex; align-items: center; flex: min-content">
               {{ getLogLevelFromIndex(level)
-              }}<v-switch v-model="selectedLogLevels[level]" class="pl-2" hide-details color="rgb(var(--v-theme-primary))"></v-switch>
+              }}<v-switch
+                v-model="selectedLogLevels[level]"
+                class="pl-2"
+                hide-details
+                color="rgb(var(--v-theme-primary))"
+              ></v-switch>
             </div>
           </v-col>
         </v-row>
diff --git a/photon-client/src/components/app/photon-sidebar.vue b/photon-client/src/components/app/photon-sidebar.vue
index a951dc02a9..8d55bd04bb 100644
--- a/photon-client/src/components/app/photon-sidebar.vue
+++ b/photon-client/src/components/app/photon-sidebar.vue
@@ -5,6 +5,7 @@ import { useStateStore } from "@/stores/StateStore";
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import { useRoute } from "vue-router";
 import { useDisplay, useTheme } from "vuetify";
+import { onBeforeMount } from "vue";
 
 const compact = computed<boolean>({
   get: () => {
@@ -18,6 +19,19 @@ const { mdAndUp } = useDisplay();
 
 const theme = useTheme();
 
+const changeTheme = () => {
+  const newTheme = theme.global.name.value === "LightTheme" ? "DarkTheme" : "LightTheme";
+  theme.global.name.value = newTheme;
+  localStorage.setItem("theme", newTheme);
+};
+
+onBeforeMount(() => {
+  const storedTheme = localStorage.getItem("theme");
+  if (storedTheme) {
+    theme.global.name.value = storedTheme;
+  }
+});
+
 const renderCompact = computed<boolean>(() => compact.value || !mdAndUp.value);
 </script>
 
@@ -63,32 +77,40 @@ const renderCompact = computed<boolean>(() => compact.value || !mdAndUp.value);
     </v-list>
     <template #append>
       <v-list nav>
-        <v-list-item
-          v-if="mdAndUp"
-          link
-          :prepend-icon="theme.global.name.value === 'LightTheme' ? 'mdi-sunglasses' : 'mdi-moon-waning-crescent'"
-          @click="theme.global.name.value = theme.global.name.value === 'LightTheme' ? 'DarkTheme' : 'LightTheme'"
-        >
-          <v-list-item-title>Theme</v-list-item-title>
-        </v-list-item>
-
         <v-list-item
           v-if="mdAndUp"
           link
           :prepend-icon="`mdi-chevron-${compact || !mdAndUp ? 'right' : 'left'}`"
           @click="() => (compact = !compact)"
         >
-          <v-list-item-title>Compact Mode</v-list-item-title>
+          <v-list-item-title>Compact</v-list-item-title>
         </v-list-item>
         <v-list-item
-          :prepend-icon="
-            useSettingsStore().network.runNTServer
-              ? 'mdi-server'
-              : useStateStore().ntConnectionStatus.connected
-                ? 'mdi-robot'
-                : 'mdi-robot-off'
-          "
+          link
+          :prepend-icon="theme.global.name.value === 'LightTheme' ? 'mdi-white-balance-sunny' : 'mdi-weather-night'"
+          @click="changeTheme"
         >
+          <v-list-item-title>Theme</v-list-item-title>
+        </v-list-item>
+        <v-list-item>
+          <template #prepend>
+            <v-icon
+              :icon="
+                useSettingsStore().network.runNTServer
+                  ? 'mdi-server'
+                  : useStateStore().ntConnectionStatus.connected
+                    ? 'mdi-robot'
+                    : 'mdi-robot-off'
+              "
+              :color="
+                useSettingsStore().network.runNTServer
+                  ? '#00ff00'
+                  : useStateStore().ntConnectionStatus.connected
+                    ? '#00ff00'
+                    : '#ff0000'
+              "
+            />
+          </template>
           <v-list-item-title v-if="useSettingsStore().network.runNTServer" v-show="!renderCompact" class="text-wrap">
             NetworkTables server running for
             <span class="text-primary">{{ useStateStore().ntConnectionStatus.clients || 0 }}</span> clients
@@ -100,9 +122,7 @@ const renderCompact = computed<boolean>(() => compact.value || !mdAndUp.value);
             style="flex-direction: column; display: flex"
           >
             NetworkTables Server Connected!
-            <span class="text-primary">
-              {{ useStateStore().ntConnectionStatus.address }} sdfsdfsdf
-            </span>
+            <span class="text-primary"> {{ useStateStore().ntConnectionStatus.address }} </span>
           </v-list-item-title>
           <v-list-item-title
             v-else
@@ -113,10 +133,15 @@ const renderCompact = computed<boolean>(() => compact.value || !mdAndUp.value);
             Not connected to NetworkTables Server!
           </v-list-item-title>
         </v-list-item>
-
-        <v-list-item :prepend-icon="useStateStore().backendConnected ? 'mdi-server-network' : 'mdi-server-network-off'">
+        <v-list-item>
+          <template #prepend>
+            <v-icon
+              :icon="useStateStore().backendConnected ? 'mdi-server-network' : 'mdi-server-network-off'"
+              :color="useStateStore().backendConnected ? '#00ff00' : '#ff0000'"
+            />
+          </template>
           <v-list-item-title v-show="!renderCompact" class="text-wrap">
-            {{ useStateStore().backendConnected ? "Backend connected" : "Trying to connect to backend" }}
+            {{ useStateStore().backendConnected ? "Backend connected" : "Trying to connect to backend..." }}
           </v-list-item-title>
         </v-list-item>
       </v-list>
@@ -125,17 +150,6 @@ const renderCompact = computed<boolean>(() => compact.value || !mdAndUp.value);
 </template>
 
 <style scoped>
-/* .v-navigation-drawer {
-  margin: 12px !important;
-  width: calc(256px - 24px) !important;
-  height: calc(100% - 24px) !important;
-  border-radius: 12px;
-}
-
-.v-navigation-drawer--rail {
-  width: calc(56px - 24px) !important;
-} */
-
 .v-navigation-drawer {
   border: none;
 }
diff --git a/photon-client/src/components/cameras/CameraCalibrationCard.vue b/photon-client/src/components/cameras/CameraCalibrationCard.vue
index d57786ce77..285262bcf5 100644
--- a/photon-client/src/components/cameras/CameraCalibrationCard.vue
+++ b/photon-client/src/components/cameras/CameraCalibrationCard.vue
@@ -216,8 +216,8 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
   <div>
     <v-card class="mb-3 rounded-12" color="surface" dark>
       <v-card-title>Camera Calibration</v-card-title>
-      <v-card-text v-show="!isCalibrating">
-        <v-card-subtitle class="pt-0 pl-0 pr-0 text-white">Current Calibrations</v-card-subtitle>
+      <v-card-text v-if="!isCalibrating" class="pb-0">
+        <v-card-subtitle class="pa-0 pb-3 text-white">Current Calibrations</v-card-subtitle>
         <v-table fixed-header height="100%" density="compact">
           <thead>
             <tr>
@@ -244,16 +244,30 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
                     <v-icon size="small" color="primary">mdi-information</v-icon>
                   </td>
                 </template>
-                <span>Click for more info on this calibration.</span>
+                <span>View calibration information</span>
               </v-tooltip>
             </tr>
           </tbody>
         </v-table>
+      </v-card-text>
+      <v-card-text class="pt-0">
         <div v-if="useCameraSettingsStore().isConnected" class="d-flex flex-column">
-          <v-card-subtitle v-show="!isCalibrating" class="pl-0 pb-3 pt-3 text-white"
+          <v-card-subtitle v-if="!isCalibrating" class="pl-0 pb-3 pt-3 text-white"
             >Configure New Calibration</v-card-subtitle
           >
           <v-form ref="form" v-model="settingsValid">
+            <v-alert
+              closable
+              density="compact"
+              :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
+              :color="useSettingsStore().general.mrCalWorking ? 'lightBlue' : 'error'"
+              :icon="useSettingsStore().general.mrCalWorking ? 'mdi-check' : 'mdi-close'"
+              :text="
+                useSettingsStore().general.mrCalWorking
+                  ? 'Mrcal was successfully loaded and will be used!'
+                  : 'MrCal failed to load, check journalctl logs for details.'
+              "
+            />
             <!-- TODO: the default videoFormatIndex is 0, but the list of unique video mode indexes might not include 0. getUniqueVideoResolutionStrings indexing is also different from the normal video mode indexing -->
             <pv-select
               v-model="useStateStore().calibrationData.videoFormatIndex"
@@ -264,7 +278,15 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
               :items="getUniqueVideoResolutionStrings()"
             />
             <pv-select
-              v-show="isCalibrating && boardType != CalibrationBoardTypes.Charuco"
+              v-model="boardType"
+              label="Board Type"
+              tooltip="Calibration board pattern to use"
+              :select-cols="8"
+              :items="['Chessboard', 'Charuco']"
+              :disabled="isCalibrating"
+            />
+            <pv-select
+              v-if="boardType != CalibrationBoardTypes.Charuco"
               v-model="useCameraSettingsStore().currentPipelineSettings.streamingFrameDivisor"
               label="Decimation"
               tooltip="Resolution to which camera frames are downscaled for detection. Calibration still uses full-res"
@@ -275,15 +297,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
               "
             />
             <pv-select
-              v-model="boardType"
-              label="Board Type"
-              tooltip="Calibration board pattern to use"
-              :select-cols="8"
-              :items="['Chessboard', 'Charuco']"
-              :disabled="isCalibrating"
-            />
-            <pv-select
-              v-show="boardType == CalibrationBoardTypes.Charuco"
+              v-if="boardType == CalibrationBoardTypes.Charuco"
               v-model="tagFamily"
               label="Tag Family"
               tooltip="Dictionary of aruco markers on the charuco board"
@@ -300,7 +314,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
               :label-cols="4"
             />
             <pv-number-input
-              v-show="boardType == CalibrationBoardTypes.Charuco"
+              v-if="boardType == CalibrationBoardTypes.Charuco"
               v-model="markerSizeIn"
               label="Marker Size (in)"
               tooltip="Size of the tag markers in inches must be smaller than pattern spacing"
@@ -325,36 +339,13 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
               :label-cols="4"
             />
             <pv-switch
-              v-show="boardType == CalibrationBoardTypes.Charuco"
+              v-if="boardType === CalibrationBoardTypes.Charuco"
               v-model="useOldPattern"
               label="Old OpenCV Pattern"
               :disabled="isCalibrating"
               tooltip="If enabled, Photon will use the old OpenCV pattern for calibration."
               :label-cols="4"
             />
-            <!-- TODO: CLEAN UP MRCAL BANNERS -->
-            <div class="pb-5 pt-10px">
-              <v-banner
-                v-if="useSettingsStore().general.mrCalWorking"
-                rounded
-                bg-color="accent"
-                color="accent"
-                text-color="white"
-                icon="mdi-alert-circle-outline"
-              >
-                Mrcal was successfully loaded and will be used!
-              </v-banner>
-              <v-banner
-                v-else
-                rounded
-                bg-color="error"
-                color="error"
-                text-color="white"
-                icon="mdi-alert-circle-outline"
-              >
-                MrCal JNI could not be loaded! Consult journalctl logs for additional details.
-              </v-banner>
-            </div>
           </v-form>
         </div>
         <div v-if="isCalibrating">
@@ -383,7 +374,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
             tooltip="Directly controls how long the camera shutter remains open. Units are dependant on the underlying driver."
             :min="useCameraSettingsStore().minExposureRaw"
             :max="useCameraSettingsStore().maxExposureRaw"
-            :slider-cols="7"
+            :slider-cols="8"
             :step="1"
             @update:modelValue="
               (args) => useCameraSettingsStore().changeCurrentPipelineSetting({ cameraExposureRaw: args }, false)
@@ -394,7 +385,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
             label="Brightness"
             :min="0"
             :max="100"
-            :slider-cols="7"
+            :slider-cols="8"
             @update:modelValue="
               (args) => useCameraSettingsStore().changeCurrentPipelineSetting({ cameraBrightness: args }, false)
             "
@@ -406,7 +397,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
             tooltip="Controls camera gain, similar to brightness"
             :min="0"
             :max="100"
-            :slider-cols="7"
+            :slider-cols="8"
             @update:modelValue="
               (args) => useCameraSettingsStore().changeCurrentPipelineSetting({ cameraGain: args }, false)
             "
@@ -417,7 +408,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
             label="Red AWB Gain"
             :min="0"
             :max="100"
-            :slider-cols="7"
+            :slider-cols="8"
             tooltip="Controls red automatic white balance gain, which affects how the camera captures colors in different conditions"
             @update:modelValue="
               (args) => useCameraSettingsStore().changeCurrentPipelineSetting({ cameraRedGain: args }, false)
@@ -429,45 +420,58 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
             label="Blue AWB Gain"
             :min="0"
             :max="100"
-            :slider-cols="7"
+            :slider-cols="8"
             tooltip="Controls blue automatic white balance gain, which affects how the camera captures colors in different conditions"
             @update:modelValue="
               (args) => useCameraSettingsStore().changeCurrentPipelineSetting({ cameraBlueGain: args }, false)
             "
           />
-          <v-banner
-            v-if="tooManyPoints"
-            rounded
-            class="mt-3"
-            color="error"
-            text-color="white"
-            icon="mdi-alert-circle-outline"
-          >
-            Too many corners. Finish calibration now!
-          </v-banner>
         </div>
-        <!-- TODO: TEST CALIBRATION -->
         <div v-if="isCalibrating" class="d-flex justify-center align-center pt-10px pb-5">
           <v-chip
-            variant="elevated"
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
             label
-            :color="useStateStore().calibrationData.hasEnoughImages ? 'secondary' : 'grey-darken-2'"
+            :color="useStateStore().calibrationData.hasEnoughImages ? 'lightBlue' : 'light-grey'"
           >
             Snapshots: {{ useStateStore().calibrationData.imageCount }} of at least
             {{ useStateStore().calibrationData.minimumImageCount }}
           </v-chip>
         </div>
-        <div class="d-flex">
+        <div>
+          <v-btn
+            color="lightBlue"
+            size="small"
+            block
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            :disabled="!settingsValid"
+            @click="downloadCalibBoard"
+          >
+            <v-icon start class="calib-btn-icon" size="large"> mdi-download </v-icon>
+            <span class="calib-btn-label">Generate Board</span>
+          </v-btn>
+        </div>
+        <v-alert
+          v-if="tooManyPoints"
+          class="mt-5"
+          color="error"
+          density="compact"
+          text="Too many corners. Finish calibration now!"
+          icon="mdi-alert-circle-outline"
+          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
+        />
+        <div class="d-flex pt-5">
           <v-col cols="6" class="pa-0 pr-2">
             <v-btn
               size="small"
               block
-              color="lightBlue"
+              color="photonYellow"
               :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
               :disabled="!settingsValid || tooManyPoints"
               @click="isCalibrating ? useCameraSettingsStore().takeCalibrationSnapshot() : startCalibration()"
             >
-              <v-icon start class="calib-btn-icon"> {{ isCalibrating ? "mdi-camera" : "mdi-flag-outline" }} </v-icon>
+              <v-icon start class="calib-btn-icon" size="large">
+                {{ isCalibrating ? "mdi-camera" : "mdi-flag-outline" }}
+              </v-icon>
               <span class="calib-btn-label">{{ isCalibrating ? "Take Snapshot" : "Start Calibration" }}</span>
             </v-btn>
           </v-col>
@@ -476,11 +480,11 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
               size="small"
               block
               :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-              :color="useStateStore().calibrationData.hasEnoughImages ? 'primary' : 'error'"
+              :color="useStateStore().calibrationData.hasEnoughImages ? 'photonYellow' : 'error'"
               :disabled="!isCalibrating || !settingsValid"
               @click="endCalibration"
             >
-              <v-icon start class="calib-btn-icon">
+              <v-icon start class="calib-btn-icon" size="large">
                 {{ useStateStore().calibrationData.hasEnoughImages ? "mdi-flag-checkered" : "mdi-flag-off-outline" }}
               </v-icon>
               <span class="calib-btn-label">{{
@@ -489,40 +493,26 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
             </v-btn>
           </v-col>
         </div>
-        <div class="pt-5">
-          <v-btn
-            color="photonYellow"
-            size="small"
-            block
-            variant="outlined"
-            :disabled="!settingsValid"
-            @click="downloadCalibBoard"
-          >
-            <v-icon start class="calib-btn-icon"> mdi-download </v-icon>
-            <span class="calib-btn-label">Generate Board</span>
-          </v-btn>
-        </div>
       </v-card-text>
     </v-card>
     <v-dialog v-model="showCalibEndDialog" width="500px" :persistent="true">
-      <v-card color="primary" dark>
+      <v-card color="surface" dark>
         <v-card-title> Camera Calibration </v-card-title>
         <div style="text-align: center">
           <template v-if="calibCanceled">
-            <v-icon color="blue" size="70"> mdi-cancel </v-icon>
+            <v-icon color="primary" size="70"> mdi-cancel </v-icon>
             <v-card-text>
-              Camera Calibration has been Canceled, the backend is attempting to cleanly cancel the calibration process.
+              Camera calibration has been canceled. The backend is attempting to cleanly cancel the calibration process.
             </v-card-text>
           </template>
           <!-- No result reported yet -->
-           <!-- TODO: VERIFY THEME (ACCENT) -->
           <template v-else-if="calibSuccess === undefined">
-            <v-progress-circular indeterminate :size="70" :width="8" color="accent" />
+            <v-progress-circular indeterminate :size="70" :width="8" color="primary" />
             <v-card-text>Camera is being calibrated. This process may take several minutes...</v-card-text>
           </template>
           <!-- Got positive result -->
           <template v-else-if="calibSuccess">
-            <v-icon color="green" size="70"> mdi-check-bold </v-icon>
+            <v-icon color="#00ff00" size="70"> mdi-check </v-icon>
             <v-card-text>
               Camera has been successfully calibrated for
               {{
@@ -562,7 +552,8 @@ th {
   text-align: center;
   width: 100%;
 
-  th, td {
+  th,
+  td {
     font-size: 1rem !important;
   }
 
diff --git a/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue b/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue
index a73e32e6b1..92673f8343 100644
--- a/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue
+++ b/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue
@@ -91,7 +91,6 @@ const exportCalibrationURL = computed<string>(() =>
 const calibrationImageURL = (index: number) =>
   useCameraSettingsStore().getCalImageUrl(inject<string>("backendHost") as string, props.videoFormat.resolution, index);
 </script>
-<!-- TODO: CHECK ON THIS -->
 <template>
   <v-card color="surface" dark>
     <div class="d-flex flex-wrap pt-2 pl-2 pr-2">
@@ -99,8 +98,13 @@ const calibrationImageURL = (index: number) =>
         <v-card-title class="pa-0"> Calibration Details </v-card-title>
       </v-col>
       <v-col cols="6" md="3" class="d-flex align-center pt-0 pt-md-3 pl-6 pl-md-3">
-        <v-btn color="lightBlue" style="width: 100%" @click="openUploadPhotonCalibJsonPrompt" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
-          <v-icon start> mdi-import</v-icon>
+        <v-btn
+          color="lightBlue"
+          style="width: 100%"
+          @click="openUploadPhotonCalibJsonPrompt"
+          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+        >
+          <v-icon start size="large"> mdi-import</v-icon>
           <span>Import</span>
         </v-btn>
         <input
@@ -117,9 +121,9 @@ const calibrationImageURL = (index: number) =>
           :disabled="!currentCalibrationCoeffs"
           style="width: 100%"
           @click="openExportCalibrationPrompt"
-           :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
         >
-          <v-icon start>mdi-export</v-icon>
+          <v-icon start size="large">mdi-export</v-icon>
           <span>Export</span>
         </v-btn>
         <a
@@ -134,18 +138,14 @@ const calibrationImageURL = (index: number) =>
       >{{ useCameraSettingsStore().currentCameraName }}@{{ getResolutionString(videoFormat.resolution) }}</v-card-title
     >
     <v-card-text v-if="!currentCalibrationCoeffs">
-      <!-- TODO: FIX -->
-      <v-banner
-        rounded
-        bg-color="accent"
-        color="accent"
-        text-color="white"
+      <v-alert
         class="pt-3 pb-3"
+        color="primary"
         density="compact"
+        text="The selected video format has not been calibrated."
         icon="mdi-alert-circle-outline"
-      >
-        The selected video format has not been calibrated.
-      </v-banner>
+        :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
+      />
     </v-card-text>
     <v-card-text class="pt-0">
       <v-table density="compact" style="width: 100%">
diff --git a/photon-client/src/components/cameras/CameraControlCard.vue b/photon-client/src/components/cameras/CameraControlCard.vue
index 0313b6d0e2..1e0cbc2cc3 100644
--- a/photon-client/src/components/cameras/CameraControlCard.vue
+++ b/photon-client/src/components/cameras/CameraControlCard.vue
@@ -97,19 +97,36 @@ const expanded = ref([]);
   <v-card color="surface" class="rounded-12">
     <v-card-title>Camera Control</v-card-title>
     <v-card-text class="pt-0">
-      <v-btn color="lightBlue" @click="fetchSnapshots" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
-        <v-icon start class="open-icon"> mdi-folder </v-icon>
+      <v-btn
+        color="lightBlue"
+        @click="fetchSnapshots"
+        :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+      >
+        <v-icon start class="open-icon" size="large"> mdi-folder </v-icon>
         <span class="open-label">Show Saved Snapshots</span>
       </v-btn>
     </v-card-text>
     <v-dialog v-model="showSnapshotViewerDialog">
-      <v-card color="primary" flat>
-        <v-card-title> View Saved Frame Snapshots </v-card-title>
-        <v-divider />
-        <v-card-text v-if="imgData.length === 0" style="font-size: 18px; font-weight: 600" class="pt-4">
-          There are no snapshots saved
+      <v-card color="surface" flat>
+        <v-card-title> Saved Frame Snapshots </v-card-title>
+        <v-card-text v-if="imgData.length === 0" class="pt-0">
+          <v-alert
+            color="lightBlue"
+            density="compact"
+            text="There are currently no saved snapshots."
+            icon="mdi-information-outline"
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
+          />
         </v-card-text>
-        <v-card-text v-else>
+        <v-card-text v-else class="pt-0">
+          <v-alert
+            closable
+            color="lightBlue"
+            density="compact"
+            text="Snapshot timestamps depend on when the coprocessor was last connected to the internet."
+            icon="mdi-information-outline"
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
+          />
           <v-data-table
             v-model:expanded="expanded"
             :headers="[
@@ -154,10 +171,6 @@ const expanded = ref([]);
               </div>
             </template>
           </v-data-table>
-          <span
-            >Snapshot Timestamps may be incorrect as they depend on when the coprocessor was last connected to the
-            internet</span
-          >
         </v-card-text>
       </v-card>
     </v-dialog>
@@ -173,18 +186,12 @@ const expanded = ref([]);
 }
 .v-table {
   text-align: center;
-  background-color: #006492 !important;
 
   th,
   td {
-    background-color: #005281 !important;
     font-size: 1rem !important;
   }
 
-  tbody :hover tr {
-    background-color: #005281 !important;
-  }
-
   ::-webkit-scrollbar {
     width: 0;
     height: 0.55em;
diff --git a/photon-client/src/components/cameras/CameraSettingsCard.vue b/photon-client/src/components/cameras/CameraSettingsCard.vue
index 71f912adb4..cca8532b6f 100644
--- a/photon-client/src/components/cameras/CameraSettingsCard.vue
+++ b/photon-client/src/components/cameras/CameraSettingsCard.vue
@@ -202,44 +202,40 @@ const wrappedCameras = computed<SelectItem[]>(() =>
     </v-card-text>
     <v-card-text class="d-flex pt-0">
       <v-col cols="6" class="pa-0 pr-2">
-        <v-btn block size="small" color="primary" :disabled="!settingsHaveChanged()" @click="saveCameraSettings" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
-          <v-icon start> mdi-content-save </v-icon>
+        <v-btn
+          block
+          size="small"
+          color="primary"
+          :disabled="!settingsHaveChanged()"
+          @click="saveCameraSettings"
+          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+        >
+          <v-icon start size="large"> mdi-content-save </v-icon>
           Save Changes
         </v-btn>
       </v-col>
       <v-col cols="6" class="pa-0 pl-2">
-        <v-btn block size="small" color="error" @click="() => (showDeleteCamera = true)" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
-          <v-icon start> mdi-delete </v-icon>
+        <v-btn
+          block
+          size="small"
+          color="error"
+          @click="() => (showDeleteCamera = true)"
+          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+        >
+          <v-icon start size="large"> mdi-trash-can-outline </v-icon>
           Delete Camera
         </v-btn>
       </v-col>
     </v-card-text>
 
     <v-dialog v-model="showDeleteCamera" width="800">
-      <v-card color="primary" flat>
+      <v-card color="surface" flat>
         <v-card-title> Delete {{ useCameraSettingsStore().currentCameraSettings.nickname }}? </v-card-title>
         <v-card-text class="pt-0 pb-10px">
-          <v-row class="align-center">
-            <v-col cols="12" md="6">
-              <!-- TODO: WTF????? -->
-              <span class="text-white"> This will delete ALL OF YOUR SETTINGS and restart PhotonVision. </span>
-            </v-col>
-            <v-col cols="12" md="6">
-              <v-btn color="secondary" block @click="openExportSettingsPrompt">
-                <v-icon start class="open-icon"> mdi-export </v-icon>
-                <span class="open-label">Backup Settings</span>
-                <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"
-                />
-              </v-btn>
-            </v-col>
-          </v-row>
+          Are you sure you want to delete "{{ useCameraSettingsStore().currentCameraSettings.nickname }}"? This cannot
+          be undone.
         </v-card-text>
-        <v-card-text class="pt-0 pb-0">
+        <v-card-text class="pt-0 pb-10px">
           <pv-input
             v-model="yesDeleteMySettingsText"
             :label="'Type &quot;' + useCameraSettingsStore().currentCameraName + '&quot;:'"
@@ -247,20 +243,28 @@ const wrappedCameras = computed<SelectItem[]>(() =>
             :input-cols="6"
           />
         </v-card-text>
-        <v-card-text class="pt-10px">
+        <v-card-actions class="pa-5 pt-0">
+          <v-btn
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            color="primary"
+            class="text-black"
+            @click="showDeleteCamera = false"
+          >
+            Cancel
+          </v-btn>
           <v-btn
-            block
             color="error"
             :disabled="
               yesDeleteMySettingsText.toLowerCase() !== useCameraSettingsStore().currentCameraName.toLowerCase()
             "
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
             :loading="deletingCamera"
             @click="deleteThisCamera"
           >
-            <v-icon start class="open-icon"> mdi-trash-can-outline </v-icon>
-            <span class="open-label">DELETE (UNRECOVERABLE)</span>
+            <v-icon start class="open-icon" size="large"> mdi-trash-can-outline </v-icon>
+            <span class="open-label">Delete</span>
           </v-btn>
-        </v-card-text>
+        </v-card-actions>
       </v-card>
     </v-dialog>
   </v-card>
diff --git a/photon-client/src/components/cameras/CamerasView.vue b/photon-client/src/components/cameras/CamerasView.vue
index 70001dd956..60c36cad7c 100644
--- a/photon-client/src/components/cameras/CamerasView.vue
+++ b/photon-client/src/components/cameras/CamerasView.vue
@@ -32,7 +32,12 @@ const fpsTooLow = computed<boolean>(() => {
 </script>
 
 <template>
-  <v-card id="camera-settings-camera-view-card" class="camera-settings-camera-view-card rounded-12" color="surface" dark>
+  <v-card
+    id="camera-settings-camera-view-card"
+    class="camera-settings-camera-view-card rounded-12"
+    color="surface"
+    dark
+  >
     <v-card-title class="justify-space-between align-content-center pt-0 pb-0">
       <div class="d-flex flex-wrap align-center pt-4 pb-4">
         <span class="mr-4" style="white-space: nowrap"> Cameras </span>
@@ -42,7 +47,10 @@ const fpsTooLow = computed<boolean>(() => {
           :color="fpsTooLow ? 'error' : 'transparent'"
           style="font-size: 1rem; padding: 0; margin: 0"
         >
-          <span class="pr-1" :style="{ color: fpsTooLow ? 'rgb(var(--v-theme-error))' : 'rgb(var(--v-theme-primary))' }">
+          <span
+            class="pr-1"
+            :style="{ color: fpsTooLow ? 'rgb(var(--v-theme-error))' : 'rgb(var(--v-theme-primary))' }"
+          >
             &nbsp;{{ Math.round(useStateStore().currentPipelineResults?.fps || 0) }}&nbsp;FPS &ndash;
             {{ Math.min(Math.round(useStateStore().currentPipelineResults?.latency || 0), 9999) }} ms latency
           </span>
@@ -93,19 +101,19 @@ const fpsTooLow = computed<boolean>(() => {
         <v-btn
           color="lightBlue"
           class="fill"
-           :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
           :disabled="useCameraSettingsStore().isDriverMode || useCameraSettingsStore().isCalibrationMode"
         >
-          <v-icon start class="mode-btn-icon">mdi-import</v-icon>
+          <v-icon start class="mode-btn-icon" size="large">mdi-import</v-icon>
           <span class="mode-btn-label">Raw</span>
         </v-btn>
         <v-btn
           color="lightBlue"
           class="fill"
-           :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
           :disabled="useCameraSettingsStore().isDriverMode || useCameraSettingsStore().isCalibrationMode"
         >
-          <v-icon start class="mode-btn-icon">mdi-export</v-icon>
+          <v-icon start class="mode-btn-icon" size="large">mdi-export</v-icon>
           <span class="mode-btn-label">Processed</span>
         </v-btn>
       </v-btn-toggle>
diff --git a/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue b/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
index beb542cd03..8e29a1a63f 100644
--- a/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
+++ b/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
@@ -238,8 +238,6 @@ const wrappedCameras = computed<SelectItem[]>(() =>
     value: cameraUniqueName
   }))
 );
-
-// TODO: check back on delete pipeline dialog verbiage
 </script>
 
 <template>
@@ -340,7 +338,12 @@ const wrappedCameras = computed<SelectItem[]>(() =>
             </v-list-item>
             <v-list-item @click="showPipelineDeletionConfirmationDialog = true">
               <v-list-item-title>
-                <pv-icon color="red-darken-2" :right="true" icon-name="mdi-delete" tooltip="Delete pipeline" />
+                <pv-icon
+                  color="red-darken-2"
+                  :right="true"
+                  icon-name="mdi-trash-can-outline"
+                  tooltip="Delete pipeline"
+                />
               </v-list-item-title>
             </v-list-item>
           </v-list>
@@ -392,7 +395,13 @@ const wrappedCameras = computed<SelectItem[]>(() =>
           />
         </v-card-text>
         <v-card-actions class="pr-5 pt-10px pb-5">
-          <v-btn color="lightBlue" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" @click="cancelPipelineCreation"> Cancel </v-btn>
+          <v-btn
+            color="lightBlue"
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            @click="cancelPipelineCreation"
+          >
+            Cancel
+          </v-btn>
           <v-btn
             color="photonYellow"
             :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
@@ -409,10 +418,8 @@ const wrappedCameras = computed<SelectItem[]>(() =>
         <v-card-title class="pb-0">Delete Pipeline</v-card-title>
         <v-card-text>
           Are you sure you want to delete
-          <span style="color: white">"{{
-            useCameraSettingsStore().currentPipelineSettings.pipelineNickname
-          }}"</span
-          >? This cannot be undone.
+          <span style="color: white">"{{ useCameraSettingsStore().currentPipelineSettings.pipelineNickname }}"</span>?
+          This cannot be undone.
         </v-card-text>
         <v-card-actions class="pa-5 pt-0">
           <v-btn
@@ -423,7 +430,11 @@ const wrappedCameras = computed<SelectItem[]>(() =>
           >
             Cancel
           </v-btn>
-          <v-btn color="error" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" @click="confirmDeleteCurrentPipeline">
+          <v-btn
+            color="error"
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            @click="confirmDeleteCurrentPipeline"
+          >
             Delete
           </v-btn>
         </v-card-actions>
@@ -438,10 +449,19 @@ const wrappedCameras = computed<SelectItem[]>(() =>
           settings.
         </v-card-text>
         <v-card-actions class="pa-5 pt-0">
-          <v-btn color="lightBlue" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" class="text-black" @click="cancelChangePipelineType">
+          <v-btn
+            color="lightBlue"
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            class="text-black"
+            @click="cancelChangePipelineType"
+          >
             Cancel
           </v-btn>
-          <v-btn color="photonYellow" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" @click="confirmChangePipelineType">
+          <v-btn
+            color="photonYellow"
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            @click="confirmChangePipelineType"
+          >
             Confirm
           </v-btn>
         </v-card-actions>
diff --git a/photon-client/src/components/dashboard/CamerasCard.vue b/photon-client/src/components/dashboard/CamerasCard.vue
index 0c5b77ae3b..8002050907 100644
--- a/photon-client/src/components/dashboard/CamerasCard.vue
+++ b/photon-client/src/components/dashboard/CamerasCard.vue
@@ -46,11 +46,10 @@ const performanceRecommendation = computed<string>(() => {
         v-if="useCameraSettingsStore().currentCameraSettings.isConnected"
         label
         :color="fpsTooLow ? 'error' : 'primary'"
-        style="font-size: 1rem; padding: 0; margin: 0"
+        style="font-size: 1.1rem; padding: 0; margin: 0"
         variant="text"
       >
-        <span class="pr-1"
-          >Processing @ {{ Math.round(useStateStore().currentPipelineResults?.fps || 0) }}&nbsp;FPS &ndash;</span
+        <span class="pr-1">{{ Math.round(useStateStore().currentPipelineResults?.fps || 0) }}&nbsp;FPS &ndash;</span
         ><span>{{ performanceRecommendation }}</span>
       </v-chip>
       <v-chip v-else label variant="text" color="red" style="font-size: 1rem; padding: 0; margin: 0">
diff --git a/photon-client/src/components/dashboard/ConfigOptions.vue b/photon-client/src/components/dashboard/ConfigOptions.vue
index c49dfe482f..856773450b 100644
--- a/photon-client/src/components/dashboard/ConfigOptions.vue
+++ b/photon-client/src/components/dashboard/ConfigOptions.vue
@@ -15,6 +15,9 @@ import PnPTab from "@/components/dashboard/tabs/PnPTab.vue";
 import Map3DTab from "@/components/dashboard/tabs/Map3DTab.vue";
 import { WebsocketPipelineType } from "@/types/WebsocketDataTypes";
 import { useDisplay } from "vuetify/lib/composables/display";
+import { useTheme } from "vuetify";
+
+const theme = useTheme();
 
 interface ConfigOption {
   tabName: string;
@@ -113,15 +116,14 @@ const onBeforeTabUpdate = () => {
 
 <template>
   <v-row no-gutters class="tabGroups">
-    <!-- TODO: FIX FOR THEME, MAYBE CLEAN UP? -->
     <template v-if="!useCameraSettingsStore().hasConnected">
-      <v-col cols="12">
-        <v-card color="error">
-          <v-card-title>
-            Camera has not connected. Please check your connection and try again.
-          </v-card-title>
-        </v-card>
-      </v-col>
+      <v-alert
+        color="error"
+        density="compact"
+        text="Camera is not connected. Please check your connection and try again."
+        icon="mdi-alert-circle-outline"
+        :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
+      />
     </template>
     <template v-else>
       <v-col
diff --git a/photon-client/src/components/dashboard/StreamConfigCard.vue b/photon-client/src/components/dashboard/StreamConfigCard.vue
index 45598aca8e..3f4c5d929f 100644
--- a/photon-client/src/components/dashboard/StreamConfigCard.vue
+++ b/photon-client/src/components/dashboard/StreamConfigCard.vue
@@ -34,8 +34,10 @@ const processingMode = computed<number>({
             :disabled="!useCameraSettingsStore().hasConnected"
             :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
             class="w-50"
-            prepend-icon="mdi-square-outline"
           >
+            <template #prepend>
+              <v-icon size="large">mdi-square-outline</v-icon>
+            </template>
             <span>2D</span>
           </v-btn>
           <v-btn
@@ -45,8 +47,10 @@ const processingMode = computed<number>({
             "
             :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
             class="w-50"
-            prepend-icon="mdi-cube-outline"
           >
+            <template #prepend>
+              <v-icon size="large">mdi-cube-outline</v-icon>
+            </template>
             <span>3D</span>
           </v-btn>
         </v-btn-toggle>
@@ -56,12 +60,20 @@ const processingMode = computed<number>({
       <v-col class="pa-4 pt-0">
         <p style="color: white">Stream Display</p>
         <v-btn-toggle v-model="value" :multiple="true" mandatory base-color="surface-variant" class="fill w-100">
-          <v-btn color="lightBlue" class="fill w-50" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
-            <v-icon start class="mode-btn-icon">mdi-import</v-icon>
+          <v-btn
+            color="lightBlue"
+            class="fill w-50"
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          >
+            <v-icon start class="mode-btn-icon" size="large">mdi-import</v-icon>
             <span class="mode-btn-label">Raw</span>
           </v-btn>
-          <v-btn color="lightBlue" class="fill w-50" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
-            <v-icon start class="mode-btn-icon">mdi-export</v-icon>
+          <v-btn
+            color="lightBlue"
+            class="fill w-50"
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          >
+            <v-icon start class="mode-btn-icon" size="large">mdi-export</v-icon>
             <span class="mode-btn-label">Processed</span>
           </v-btn>
         </v-btn-toggle>
diff --git a/photon-client/src/components/dashboard/tabs/ThresholdTab.vue b/photon-client/src/components/dashboard/tabs/ThresholdTab.vue
index 218c1dd746..910630111f 100644
--- a/photon-client/src/components/dashboard/tabs/ThresholdTab.vue
+++ b/photon-client/src/components/dashboard/tabs/ThresholdTab.vue
@@ -194,13 +194,20 @@ const interactiveCols = computed(() =>
               :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
               @click="enableColorPicking(useCameraSettingsStore().currentPipelineSettings.hueInverted ? 2 : 3)"
             >
-              <v-icon start> mdi-minus </v-icon>
+              <v-icon start size="large"> mdi-minus </v-icon>
               Shrink Range
             </v-btn>
           </v-col>
           <v-col cols="4" class="pl-0 pr-0">
-            <v-btn color="primary" class="text-black" size="small" block @click="enableColorPicking(1)" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
-              <v-icon start> mdi-plus-minus </v-icon>
+            <v-btn
+              color="primary"
+              class="text-black"
+              size="small"
+              block
+              @click="enableColorPicking(1)"
+              :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            >
+              <v-icon start size="large"> mdi-plus-minus </v-icon>
               {{ useCameraSettingsStore().currentPipelineSettings.hueInverted ? "Exclude" : "Set to" }} Average
             </v-btn>
           </v-col>
@@ -213,14 +220,21 @@ const interactiveCols = computed(() =>
               :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
               @click="enableColorPicking(useCameraSettingsStore().currentPipelineSettings.hueInverted ? 3 : 2)"
             >
-              <v-icon start> mdi-plus </v-icon>
+              <v-icon start size="large"> mdi-plus </v-icon>
               Expand Range
             </v-btn>
           </v-col>
         </template>
         <template v-else>
           <v-card-text class="pa-0 pt-3 pb-3">
-            <v-btn block color="primary" class="text-black" size="small" @click="disableColorPicking" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
+            <v-btn
+              block
+              color="primary"
+              class="text-black"
+              size="small"
+              @click="disableColorPicking"
+              :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            >
               Cancel
             </v-btn>
           </v-card-text>
diff --git a/photon-client/src/components/settings/DeviceControlCard.vue b/photon-client/src/components/settings/DeviceControlCard.vue
index cbe39dfbfc..d1d611cf2a 100644
--- a/photon-client/src/components/settings/DeviceControlCard.vue
+++ b/photon-client/src/components/settings/DeviceControlCard.vue
@@ -235,20 +235,32 @@ const nukePhotonConfigDirectory = () => {
     <div class="pa-5 pt-0">
       <v-row>
         <v-col cols="12" lg="4" md="6">
-          <v-btn color="photonYellow" @click="restartProgram" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
-            <v-icon start class="open-icon"> mdi-restart </v-icon>
+          <v-btn
+            color="photonYellow"
+            @click="restartProgram"
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          >
+            <v-icon start class="open-icon" size="large"> mdi-restart </v-icon>
             <span class="open-label">Restart PhotonVision</span>
           </v-btn>
         </v-col>
         <v-col cols="12" lg="4" md="6">
-          <v-btn color="photonYellow" @click="restartDevice" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
-            <v-icon start class="open-icon"> mdi-restart-alert </v-icon>
+          <v-btn
+            color="photonYellow"
+            @click="restartDevice"
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          >
+            <v-icon start class="open-icon" size="large"> mdi-restart-alert </v-icon>
             <span class="open-label">Restart Device</span>
           </v-btn>
         </v-col>
         <v-col cols="12" lg="4">
-          <v-btn color="lightBlue" @click="openOfflineUpdatePrompt" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
-            <v-icon start class="open-icon"> mdi-upload </v-icon>
+          <v-btn
+            color="lightBlue"
+            @click="openOfflineUpdatePrompt"
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          >
+            <v-icon start class="open-icon" size="large"> mdi-upload </v-icon>
             <span class="open-label">Offline Update</span>
           </v-btn>
           <input ref="offlineUpdate" type="file" accept=".jar" style="display: none" @change="handleOfflineUpdate" />
@@ -257,8 +269,12 @@ const nukePhotonConfigDirectory = () => {
       <!-- <v-divider class="mt-3 pb-3" /> -->
       <v-row>
         <v-col cols="12" sm="6">
-          <v-btn color="lightBlue" @click="() => (showImportDialog = true)" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
-            <v-icon start class="open-icon"> mdi-import </v-icon>
+          <v-btn
+            color="lightBlue"
+            @click="() => (showImportDialog = true)"
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          >
+            <v-icon start class="open-icon" size="large"> mdi-import </v-icon>
             <span class="open-label">Import Settings</span>
           </v-btn>
           <v-dialog
@@ -298,7 +314,12 @@ const nukePhotonConfigDirectory = () => {
                     :error-messages="importType === undefined ? 'Settings type not selected' : ''"
                     :accept="importType === ImportType.AllSettings ? '.zip' : '.json'"
                   />
-                  <v-btn color="primary" :disabled="importFile === null" @click="handleSettingsImport":variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
+                  <v-btn
+                    color="primary"
+                    :disabled="importFile === null"
+                    @click="handleSettingsImport"
+                    :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                  >
                     <v-icon start class="open-icon"> mdi-import </v-icon>
                     <span class="open-label">Import Settings</span>
                   </v-btn>
@@ -308,8 +329,12 @@ const nukePhotonConfigDirectory = () => {
           </v-dialog>
         </v-col>
         <v-col cols="12" sm="6">
-          <v-btn color="lightBlue" @click="openExportSettingsPrompt" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
-            <v-icon start class="open-icon"> mdi-export </v-icon>
+          <v-btn
+            color="lightBlue"
+            @click="openExportSettingsPrompt"
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          >
+            <v-icon start class="open-icon" size="large"> mdi-export </v-icon>
             <span class="open-label">Export Settings</span>
           </v-btn>
           <a
@@ -321,8 +346,12 @@ const nukePhotonConfigDirectory = () => {
           />
         </v-col>
         <v-col cols="12" sm="6">
-          <v-btn color="lightBlue" @click="openExportLogsPrompt" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
-            <v-icon start class="open-icon"> mdi-download </v-icon>
+          <v-btn
+            color="lightBlue"
+            @click="openExportLogsPrompt"
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          >
+            <v-icon start class="open-icon" size="large"> mdi-download </v-icon>
             <span class="open-label">Download logs</span>
 
             <!-- Special hidden link that gets 'clicked' when the user exports journalctl logs -->
@@ -336,8 +365,12 @@ const nukePhotonConfigDirectory = () => {
           </v-btn>
         </v-col>
         <v-col cols="12" sm="6">
-          <v-btn color="lightBlue" @click="useStateStore().showLogModal = true" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
-            <v-icon start class="open-icon"> mdi-eye </v-icon>
+          <v-btn
+            color="lightBlue"
+            @click="useStateStore().showLogModal = true"
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          >
+            <v-icon start class="open-icon" size="large"> mdi-eye </v-icon>
             <span class="open-label">View logs</span>
           </v-btn>
         </v-col>
@@ -345,27 +378,24 @@ const nukePhotonConfigDirectory = () => {
       <!-- <v-divider class="mt-3 pb-3" /> -->
       <v-row>
         <v-col cols="12">
-          <v-btn color="error" @click="() => (showFactoryReset = true)" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
-            <v-icon start class="open-icon"> mdi-skull-crossbones </v-icon>
-            <span class="open-icon">
-              {{
-                $vuetify.display.mdAndUp
-                  ? "Factory Reset PhotonVision and delete EVERYTHING"
-                  : "Factory Reset PhotonVision"
-              }}
-            </span>
+          <v-btn
+            color="error"
+            @click="() => (showFactoryReset = true)"
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          >
+            <v-icon start class="open-icon" size="large"> mdi-trash-can-outline </v-icon>
+            <span class="open-icon"> Factory Reset PhotonVision </span>
           </v-btn>
         </v-col>
       </v-row>
     </div>
-<!-- TODO: CHANGE NUKE ICON, SEEMS UNPROFESSIONAL -->
     <v-dialog v-model="showFactoryReset" width="800" dark>
       <v-card color="surface" flat>
         <v-card-title style="display: flex; justify-content: center">
           <span class="open-label">
-            <v-icon end color="error" class="open-icon ma-1">mdi-nuke</v-icon>
+            <v-icon end color="red" class="open-icon ma-1">mdi-alert-outline</v-icon>
             Factory Reset PhotonVision
-            <v-icon end color="error" class="open-icon ma-1">mdi-nuke</v-icon>
+            <v-icon end color="red" class="open-icon ma-1">mdi-alert-outline</v-icon>
           </span>
         </v-card-title>
         <v-card-text class="pt-0 pb-10px">
@@ -374,8 +404,13 @@ const nukePhotonConfigDirectory = () => {
               <span> This will delete ALL OF YOUR SETTINGS and restart PhotonVision. </span>
             </v-col>
             <v-col cols="12" md="6">
-              <v-btn color="primary" style="float: right" @click="openExportSettingsPrompt" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
-                <v-icon start class="open-icon"> mdi-export </v-icon>
+              <v-btn
+                color="primary"
+                style="float: right"
+                @click="openExportSettingsPrompt"
+                :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+              >
+                <v-icon start class="open-icon" size="large"> mdi-export </v-icon>
                 <span class="open-label">Backup Settings</span>
                 <a
                   ref="exportSettings"
@@ -403,7 +438,7 @@ const nukePhotonConfigDirectory = () => {
             :disabled="yesDeleteMySettingsText.toLowerCase() !== expected.toLowerCase()"
             @click="nukePhotonConfigDirectory"
           >
-            <v-icon start class="open-icon"> mdi-trash-can-outline </v-icon>
+            <v-icon start class="open-icon" size="large"> mdi-trash-can-outline </v-icon>
             <span class="open-label">
               {{ $vuetify.display.mdAndUp ? "Delete everything, I have backed up what I need" : "Delete Everything" }}
             </span>
diff --git a/photon-client/src/components/settings/MetricsCard.vue b/photon-client/src/components/settings/MetricsCard.vue
index f7e91e400b..0a2f6a9ebb 100644
--- a/photon-client/src/components/settings/MetricsCard.vue
+++ b/photon-client/src/components/settings/MetricsCard.vue
@@ -97,7 +97,7 @@ onBeforeMount(() => {
     <v-card-title style="display: flex; justify-content: space-between">
       <span>Metrics</span>
       <v-btn variant="text" @click="fetchMetrics">
-        <v-icon start class="open-icon">mdi-reload</v-icon>
+        <v-icon start class="open-icon" size="large">mdi-reload</v-icon>
         Last Fetched: {{ metricsLastFetched }}
       </v-btn>
     </v-card-title>
@@ -241,12 +241,6 @@ $stats-table-inner: rgba(255, 255, 255, 0.1);
 }
 
 .v-table {
-  :hover {
-    tbody > tr {
-      // background-color: #005281 !important;
-    }
-  }
-
   ::-webkit-scrollbar {
     width: 0;
     height: 0.55em;
diff --git a/photon-client/src/components/settings/NetworkingCard.vue b/photon-client/src/components/settings/NetworkingCard.vue
index 6b8c22d3a6..708bc621b4 100644
--- a/photon-client/src/components/settings/NetworkingCard.vue
+++ b/photon-client/src/components/settings/NetworkingCard.vue
@@ -156,17 +156,15 @@ watchEffect(() => {
               'The NetworkTables Server Address must be a valid Team Number, IP address, or Hostname'
           ]"
         />
-        <!-- TODO: FIX BANNERS -->
-        <v-banner
+        <v-alert
           v-if="!isValidNetworkTablesIP(tempSettingsStruct.ntServerAddress) && !tempSettingsStruct.runNTServer"
-          rounded
-          bg-color="error"
-          text-color="white"
-          style="margin: 10px 0"
+          class="pt-3 pb-3"
+          color="error"
+          density="compact"
+          text="The NetworkTables Server Address is not set or is invalid. NetworkTables is unable to connect."
           icon="mdi-alert-circle-outline"
-        >
-          The NetworkTables Server Address is not set or is invalid. NetworkTables is unable to connect.
-        </v-banner>
+          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
+        />
         <pv-radio
           v-show="!useSettingsStore().network.networkingDisabled"
           v-model="tempSettingsStruct.connectionType"
@@ -228,35 +226,34 @@ watchEffect(() => {
           tooltip="Name of the interface PhotonVision should manage the IP address of"
           :items="useSettingsStore().networkInterfaceNames"
         />
-        <v-banner
+        <v-alert
           v-if="
             !useSettingsStore().networkInterfaceNames.length &&
             tempSettingsStruct.shouldManage &&
             useSettingsStore().network.canManage &&
             !useSettingsStore().network.networkingDisabled
           "
-          rounded
-          bg-color="error"
-          text-color="white"
-          icon="mdi-information-outline"
-        >
-          Photon cannot detect any wired connections! Please send program logs to the developers for help.
-        </v-banner>
+          class="pt-3 pb-3"
+          color="error"
+          density="compact"
+          text="Cannot detect any wired connections! Send program logs to the developers for help."
+          icon="mdi-alert-circle-outline"
+          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
+        />
         <pv-switch
           v-model="tempSettingsStruct.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."
           :label-cols="4"
         />
-        <v-banner
+        <v-alert
           v-if="tempSettingsStruct.runNTServer"
-          rounded
-          bg-color="error"
-          text-color="white"
+          color="photonYellow"
+          density="compact"
+          text="This mode is intended for debugging and should be off for proper usage. PhotonLib will NOT work!"
           icon="mdi-information-outline"
-        >
-          This mode is intended for debugging; it should be off for proper usage. PhotonLib will NOT work!
-        </v-banner>
+          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
+        />
         <v-divider class="mt-10px pb-2" />
         <v-card-title class="pl-0 pt-3 pb-10px">Miscellaneous</v-card-title>
         <pv-switch
@@ -265,16 +262,14 @@ watchEffect(() => {
           tooltip="If enabled, Photon will publish all pipeline results in both the Packet and Protobuf formats. This is useful for visualizing pipeline results from NT viewers such as glass and logging software such as AdvantageScope. Note: photon-lib will ignore this value and is not recommended on the field for performance."
           :label-cols="4"
         />
-        <v-banner
+        <v-alert
           v-if="tempSettingsStruct.shouldPublishProto"
-          rounded
-          bg-color="error"
-          text-color="white"
+          color="photonYellow"
+          density="compact"
+          text="This mode is intended for debugging and may reduce performance; it should be off for field use."
           icon="mdi-information-outline"
-        >
-          This mode is intended for debugging; it should be off for field use. You may notice a performance hit by using
-          this mode.
-        </v-banner>
+          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
+        />
         <v-divider class="mt-10px pb-5" />
       </v-form>
       <v-btn
@@ -294,7 +289,4 @@ watchEffect(() => {
 .mt-10px {
   margin-top: 10px !important;
 }
-.v-banner__wrapper {
-  padding: 6px !important;
-}
 </style>
diff --git a/photon-client/src/plugins/vuetify.ts b/photon-client/src/plugins/vuetify.ts
index 904f436ac2..8c7867ce17 100644
--- a/photon-client/src/plugins/vuetify.ts
+++ b/photon-client/src/plugins/vuetify.ts
@@ -3,7 +3,6 @@ import "@mdi/font/css/materialdesignicons.css";
 import type { ThemeDefinition } from "vuetify/lib/composables/theme";
 import { createVuetify } from "vuetify";
 
-
 const CommonColors = {
   photonBlue: "#006492",
   photonYellow: "#FFD843",
@@ -13,7 +12,6 @@ const CommonColors = {
   lightGray: "#232C37"
 };
 
-
 const DarkTheme: ThemeDefinition = {
   dark: true,
   colors: {
@@ -28,19 +26,13 @@ const DarkTheme: ThemeDefinition = {
     toggle: CommonColors.photonBlue,
     logsBackground: CommonColors.darkGray,
 
-
     photonYellow: CommonColors.photonYellow,
     lightBlue: CommonColors.lightBlue,
 
-
-
-
-    // Card/info background
     "surface-variant": "#485b70",
     "on-surface-variant": "#f0f0f0",
 
-
-    error: "#ff2e2e", //b80000
+    error: "#ff2e2e",
     info: "#2196F3",
     success: "#4CAF50",
     warning: "#FFC107"
@@ -64,38 +56,18 @@ const LightTheme: ThemeDefinition = {
     photonYellow: CommonColors.photonYellow,
     lightBlue: CommonColors.lightBlue,
 
-
-
-
     "surface-variant": "#358AB0",
     "surface-light": CommonColors.photonYellow,
 
-    ...{ error: "#b80000", info: "#2196F3", success: "#4CAF50", warning: "#FFC107" }
+    error: "#b80000",
+    info: "#2196F3",
+    success: "#4CAF50",
+    warning: "#FFC107"
   },
   variables: { "medium-emphasis-opacity": 1, "high-emphasis-opacity": 1 }
 };
 
 export default createVuetify({
-  theme: { defaultTheme: "DarkTheme", themes: { LightTheme: LightTheme, DarkTheme: DarkTheme } },
+  theme: { defaultTheme: "LightTheme", themes: { LightTheme: LightTheme, DarkTheme: DarkTheme } },
   display: { thresholds: { md: 1460, lg: 2000 } }
 });
-
-// const LightTheme: ThemeDefinition = {
-//   dark: false,
-//   colors: {
-//     background: "#232C37",
-//     primary: "#006492",
-//     surface: "#006492",
-//     secondary: "#39A4D5",
-//     "surface-variant": "#358AB0",
-//     accent: "#FFD843",
-//     "surface-light": "#FFD843",
-//     toggle: "#39A4D5",
-
-//     // Misc/mismatches between themes
-//     sidebar: "#006492",
-
-//     ...commonColors
-//   },
-//   variables: { "medium-emphasis-opacity": 1, "high-emphasis-opacity": 1 }
-// };
diff --git a/photon-client/src/views/CameraMatchingView.vue b/photon-client/src/views/CameraMatchingView.vue
index 915d5b744d..a2f8da64c2 100644
--- a/photon-client/src/views/CameraMatchingView.vue
+++ b/photon-client/src/views/CameraMatchingView.vue
@@ -100,7 +100,6 @@ const deactivatingModule = ref(false);
 const deactivateModule = (cameraUniqueName: string) => {
   if (deactivatingModule.value) return;
   deactivatingModule.value = true;
-// TODO: FIX THEMING ON POPUPS
   axios
     .post("/utils/unassignCamera", { cameraUniqueName: cameraUniqueName })
     .then(() => {
@@ -310,12 +309,24 @@ const openExportSettingsPrompt = () => {
           <v-card-text class="pt-3">
             <v-table density="compact">
               <tbody>
-                <tr>
-                  <td>Streams:</td>
+                <tr
+                  v-if="
+                    cameraCononected(cameraInfoFor(module.matchedCameraInfo).uniquePath) &&
+                    useStateStore().backendResults[module.uniqueName]
+                  "
+                >
+                  <td style="width: 50%">Frames Processed</td>
                   <td>
-                    <a :href="formatUrl(module.stream.inputPort)" target="_blank" class="stream-link"> Input </a>
-                    /
-                    <a :href="formatUrl(module.stream.outputPort)" target="_blank" class="stream-link"> Output </a>
+                    {{ useStateStore().backendResults[module.uniqueName].sequenceID }} ({{
+                      useStateStore().backendResults[module.uniqueName].fps
+                    }}
+                    FPS)
+                  </td>
+                </tr>
+                <tr v-else>
+                  <td>Name</td>
+                  <td>
+                    {{ module.nickname }}
                   </td>
                 </tr>
                 <tr>
@@ -331,18 +342,12 @@ const openExportSettingsPrompt = () => {
                     }}
                   </td>
                 </tr>
-                <tr
-                  v-if="
-                    cameraCononected(cameraInfoFor(module.matchedCameraInfo).uniquePath) &&
-                    useStateStore().backendResults[module.uniqueName]
-                  "
-                >
-                  <td style="width: 50%">Frames Processed</td>
+                <tr>
+                  <td>Streams:</td>
                   <td>
-                    {{ useStateStore().backendResults[module.uniqueName].sequenceID }} ({{
-                      useStateStore().backendResults[module.uniqueName].fps
-                    }}
-                    FPS)
+                    <a :href="formatUrl(module.stream.inputPort)" target="_blank" class="stream-link"> Input </a>
+                    /
+                    <a :href="formatUrl(module.stream.outputPort)" target="_blank" class="stream-link"> Output </a>
                   </td>
                 </tr>
               </tbody>
@@ -390,8 +395,14 @@ const openExportSettingsPrompt = () => {
                 </v-btn>
               </v-col>
               <v-col cols="6" md="3">
-                <v-btn class="pa-0" color="error" style="width: 100%" @click="setCameraDeleting(module)" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
-                  <v-icon>mdi-delete</v-icon>
+                <v-btn
+                  class="pa-0"
+                  color="error"
+                  style="width: 100%"
+                  @click="setCameraDeleting(module)"
+                  :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                >
+                  <v-icon size="x-large">mdi-trash-can-outline</v-icon>
                 </v-btn>
               </v-col>
             </v-row>
@@ -409,7 +420,7 @@ const openExportSettingsPrompt = () => {
         class="pr-0"
       >
         <v-card class="pr-0 rounded-12" color="surface">
-          <v-card-title>{{ module.nickname }}</v-card-title>
+          <v-card-title>{{ module.cameraQuirks.baseName }}</v-card-title>
           <v-card-subtitle>Status: <span class="inactive-status">Deactivated</span></v-card-subtitle>
           <v-card-text class="pt-3">
             <v-table density="compact">
@@ -417,17 +428,13 @@ const openExportSettingsPrompt = () => {
                 <tr>
                   <td>Name</td>
                   <td>
-                    {{ module.cameraQuirks.baseName }}
+                    {{ module.nickname }}
                   </td>
                 </tr>
                 <tr>
                   <td>Pipelines</td>
                   <td>{{ module.pipelineNicknames.join(", ") }}</td>
                 </tr>
-                <tr>
-                  <td>Connected</td>
-                  <td>{{ cameraCononected(cameraInfoFor(module.matchedCameraInfo).uniquePath) }}</td>
-                </tr>
                 <tr>
                   <td>Calibrations</td>
                   <td>
@@ -437,6 +444,10 @@ const openExportSettingsPrompt = () => {
                     }}
                   </td>
                 </tr>
+                <tr>
+                  <td>Connected</td>
+                  <td>{{ cameraCononected(cameraInfoFor(module.matchedCameraInfo).uniquePath) }}</td>
+                </tr>
               </tbody>
             </v-table>
           </v-card-text>
@@ -470,8 +481,14 @@ const openExportSettingsPrompt = () => {
                 </v-btn>
               </v-col>
               <v-col cols="6" md="3">
-                <v-btn class="pa-0" color="error" style="width: 100%" @click="setCameraDeleting(module)" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
-                  <v-icon>mdi-trash-can-outline</v-icon>
+                <v-btn
+                  class="pa-0"
+                  color="error"
+                  style="width: 100%"
+                  @click="setCameraDeleting(module)"
+                  :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                >
+                  <v-icon size="x-large">mdi-trash-can-outline</v-icon>
                 </v-btn>
               </v-col>
             </v-row>
@@ -496,7 +513,12 @@ const openExportSettingsPrompt = () => {
           <v-card-text class="pt-0">
             <v-row>
               <v-col cols="6" class="pr-0">
-                <v-btn color="lightBlue" style="width: 100%" @click="setCameraView(camera, false)" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
+                <v-btn
+                  color="lightBlue"
+                  style="width: 100%"
+                  @click="setCameraView(camera, false)"
+                  :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                >
                   <span>Details</span>
                 </v-btn>
               </v-col>
@@ -525,7 +547,7 @@ const openExportSettingsPrompt = () => {
           class="pl-6 pr-6 d-flex flex-column justify-center"
           style="background-color: transparent; height: 100%"
         >
-          <v-card-text class="d-flex flex-column align-center justify-center" style="flex-grow: 0;">
+          <v-card-text class="d-flex flex-column align-center justify-center" style="flex-grow: 0">
             <v-icon size="64" color="primary">mdi-plus</v-icon>
           </v-card-text>
           <v-card-title>Additional plugged in cameras will display here!</v-card-title>
@@ -539,17 +561,21 @@ const openExportSettingsPrompt = () => {
         <v-card-title class="d-flex justify-space-between">
           <span>{{ cameraInfoFor(viewingCamera[0])?.name ?? cameraInfoFor(viewingCamera[0])?.baseName }}</span>
           <v-btn variant="text" @click="setCameraView(null, null)">
-            <v-icon>mdi-close-thick</v-icon>
+            <v-icon size="x-large">mdi-close</v-icon>
           </v-btn>
         </v-card-title>
         <v-card-text v-if="!viewingCamera[1]">
           <PvCameraInfoCard :camera="viewingCamera[0]" />
         </v-card-text>
-        <v-card-text v-else-if="!camerasMatch(getMatchedDevice(viewingCamera[0]), viewingCamera[0])">
-          <v-banner rounded bg-color="error" text-color="white" icon="mdi-information-outline" class="mb-3">
-            It looks like a different camera may have been connected to this device! Compare the following information
-            carefully.
-          </v-banner>
+        <v-card-text v-else-if="camerasMatch(getMatchedDevice(viewingCamera[0]), viewingCamera[0])">
+          <v-alert
+            class="mb-3"
+            color="photonYellow"
+            density="compact"
+            text="A different camera may have been connected to this device! Compare the following information carefully."
+            icon="mdi-information-outline"
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
+          />
           <PvCameraMatchCard :saved="viewingCamera[0]" :current="getMatchedDevice(viewingCamera[0])" />
         </v-card-text>
         <v-card-text v-else>
@@ -557,32 +583,15 @@ const openExportSettingsPrompt = () => {
         </v-card-text>
       </v-card>
     </v-dialog>
-<!-- TODO WTFFFFFF COME ON MAN I HOPE I DIDNT DO THIS -->
+
     <!-- Camera delete modal -->
     <v-dialog v-model="viewingDeleteCamera" width="800">
       <v-card v-if="cameraToDelete !== null" class="dialog-container" color="surface" flat>
         <v-card-title> Delete {{ cameraToDelete.nickname }}? </v-card-title>
         <v-card-text class="pb-10px">
-          <v-row class="align-center">
-            <v-col cols="12" md="6">
-              <span class="text-white"> This will delete ALL OF YOUR SETTINGS and restart PhotonVision. </span>
-            </v-col>
-            <v-col cols="12" md="6">
-              <v-btn color="lightBlue" block @click="openExportSettingsPrompt" :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'">
-                <v-icon start class="open-icon"> mdi-export </v-icon>
-                <span class="open-label">Backup Settings</span>
-                <a
-                  ref="exportSettings"
-                  style="color: black; text-decoration: none; display: none"
-                  :href="`http://${host}/api/settings/photonvision_config.zip`"
-                  download="photonvision-settings.zip"
-                  target="_blank"
-                />
-              </v-btn>
-            </v-col>
-          </v-row>
+          Are you sure you want to delete "{{ cameraToDelete.nickname }}"? This cannot be undone.
         </v-card-text>
-        <v-card-text class="pt-0 pb-0">
+        <v-card-text class="pt-0 pb-10px">
           <pv-input
             v-model="yesDeleteMySettingsText"
             :label="'Type &quot;' + cameraToDelete.nickname + '&quot;:'"
@@ -590,19 +599,26 @@ const openExportSettingsPrompt = () => {
             :input-cols="6"
           />
         </v-card-text>
-        <v-card-text class="pt-10px">
+        <v-card-actions class="pa-5 pt-0">
+          <v-btn
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            color="primary"
+            class="text-black"
+            @click="cameraToDelete = null"
+          >
+            Cancel
+          </v-btn>
           <v-btn
-            block
             color="error"
             :disabled="yesDeleteMySettingsText.toLowerCase() !== cameraToDelete.nickname.toLowerCase()"
             :loading="deletingCamera"
             :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
             @click="deleteThisCamera(cameraToDelete.uniqueName)"
           >
-            <v-icon start class="open-icon"> mdi-trash-can-outline </v-icon>
-            <span class="open-label">DELETE (UNRECOVERABLE)</span>
+            <v-icon start class="open-icon" size="large"> mdi-trash-can-outline </v-icon>
+            <span class="open-label">Delete</span>
           </v-btn>
-        </v-card-text>
+        </v-card-actions>
       </v-card>
     </v-dialog>
   </div>
diff --git a/photon-client/src/views/DashboardView.vue b/photon-client/src/views/DashboardView.vue
index 07e9ce7d63..3c689c104f 100644
--- a/photon-client/src/views/DashboardView.vue
+++ b/photon-client/src/views/DashboardView.vue
@@ -7,6 +7,9 @@ import PipelineConfigCard from "@/components/dashboard/ConfigOptions.vue";
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import { useStateStore } from "@/stores/StateStore";
 import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
+import { useTheme } from "vuetify";
+
+const theme = useTheme();
 
 const cameraViewType = computed<number[]>({
   get: (): number[] => {
@@ -64,46 +67,43 @@ const showCameraSetupDialog = ref(useCameraSettingsStore().needsCameraConfigurat
 
 <template>
   <v-container class="pa-3" fluid>
-    <v-banner
+    <v-alert
       v-if="arducamWarningShown"
-      rounded
-      bg-color="error"
-      color="error"
-      dark
       class="mb-3"
+      color="error"
+      density="compact"
       icon="mdi-alert-circle-outline"
+      :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
     >
-      <span
-        >Arducam Camera Detected! Please configure the camera model in the <a href="#/cameras">Cameras tab</a>!
+      <span>
+        Arducam camera detected! Please configure the camera model in the <a href="#/cameras">Camera tab</a>!
       </span>
-    </v-banner>
-    <v-banner
+    </v-alert>
+    <v-alert
       v-if="conflictingHostnameShown"
-      rounded
-      bg-color="error"
-      color="error"
-      dark
       class="mb-3"
+      color="error"
+      density="compact"
       icon="mdi-alert-circle-outline"
+      :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
     >
-      <span
-        >Conflicting Hostname Detected! Please change the hostname in the <a href="#/settings">Settings tab</a>!
+      <span>
+        Conflicting hostname detected! Please change the hostname in the <a href="#/settings">Settings tab</a>!
       </span>
-    </v-banner>
-    <v-banner
+    </v-alert>
+    <v-alert
       v-if="conflictingCameraShown"
-      rounded
-      bg-color="error"
-      color="error"
-      dark
       class="mb-3"
+      color="error"
+      density="compact"
       icon="mdi-alert-circle-outline"
+      :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
     >
       <span
-        >Conflicting Camera Name(s) Detected! Please change the name(s) of
+        >Conflicting camera name(s) detected! Please change the name(s) of
         {{ useSettingsStore().general.conflictingCameras }}!
       </span>
-    </v-banner>
+    </v-alert>
     <v-row no-gutters>
       <v-col cols="12" class="pb-3 pr-lg-3" lg="8" align-self="stretch">
         <CamerasCard v-model="cameraViewType" />
@@ -125,8 +125,8 @@ const showCameraSetupDialog = ref(useCameraSettingsStore().needsCameraConfigurat
       <v-card flat color="surface">
         <v-card-title>Set up some cameras to get started!</v-card-title>
         <v-card-text class="pt-0">
-          No cameras activated - head to the <router-link to="/cameraConfigs" color="primary">Camera matching tab</router-link> to set
-          some up!
+          No cameras activated - head to the
+          <router-link to="/cameraConfigs" color="photonYellow">camera matching tab</router-link> to set some up!
         </v-card-text>
       </v-card>
     </v-dialog>
@@ -138,9 +138,8 @@ a:link {
   background-color: transparent;
   text-decoration: none;
 }
-/* TODO: FIX VISITED COLOR TO MATCH ORIGINAL PRIMARY */
 a:visited {
-  color: #ffd843;
+  color: rgb(var(--v-theme-photonYellow));
   background-color: transparent;
   text-decoration: none;
 }
@@ -148,10 +147,11 @@ a:hover {
   background-color: transparent;
   text-decoration: underline;
 }
-
 a:active {
-  color: yellow;
   background-color: transparent;
   text-decoration: none;
 }
+/* .v-alert {
+  border-radius: 12px;
+} */
 </style>
diff --git a/photon-client/src/views/DocsView.vue b/photon-client/src/views/DocsView.vue
index 1830268737..64a4c8c12a 100644
--- a/photon-client/src/views/DocsView.vue
+++ b/photon-client/src/views/DocsView.vue
@@ -1,22 +1,21 @@
 <script setup lang="ts">
 const devMode = process.env.NODE_ENV === "development";
 </script>
-<!-- TODO: UPDATE DOC ICON -->
 <template>
   <div style="overflow: hidden; height: 100vh; width: 100%">
-    <div v-if="devMode" style="width: 60%; height: 100%; margin: auto;">
+    <div v-if="devMode" style="width: 60%; height: 100%; margin: auto">
       <v-card
         dark
         flat
         class="pl-6 pr-6 d-flex flex-column justify-center align-center"
-        style="background-color: transparent; height: 100%;"
+        style="background-color: transparent; height: 100%"
       >
-        <v-card-text class="d-flex flex-column" style="flex: 0;">
-          <v-icon size="64" color="primary">mdi-plus</v-icon>
+        <v-card-text class="d-flex flex-column" style="flex: 0">
+          <v-icon size="64" color="primary">mdi-web-off</v-icon>
         </v-card-text>
-        <v-card-text style="width: 100%; flex-grow: 0; text-align: center;">
-          PhotonClient is in development mode so the documentation page will not load. Please recompile in production mode
-          with the documentation copied over after a full build.
+        <v-card-text style="width: 100%; flex-grow: 0; text-align: center">
+          PhotonClient is in development mode so the documentation page will not load. Please recompile in production
+          mode with the documentation copied over after a full build.
         </v-card-text>
       </v-card>
     </div>

From b3e28630da5b9813f3b4de82cab29cc5ea4aa69a Mon Sep 17 00:00:00 2001
From: Devolian <devondoyle@outlook.com>
Date: Tue, 29 Jul 2025 12:35:14 -0400
Subject: [PATCH 06/16] Some cleanup

---
 photon-client/src/App.vue                         |  4 ----
 .../components/cameras/CameraCalibrationCard.vue  |  6 +++---
 .../cameras/CameraCalibrationInfoCard.vue         |  3 ---
 .../src/components/dashboard/StreamConfigCard.vue |  5 -----
 .../components/settings/ApriltagControlCard.vue   |  8 +-------
 .../src/components/settings/DeviceControlCard.vue |  2 --
 .../components/settings/ObjectDetectionCard.vue   |  2 +-
 photon-client/src/views/CameraMatchingView.vue    |  5 -----
 photon-client/src/views/DashboardView.vue         |  3 ---
 photon-server/src/main/resources/web/index.html   | 15 +--------------
 10 files changed, 6 insertions(+), 47 deletions(-)

diff --git a/photon-client/src/App.vue b/photon-client/src/App.vue
index 13900aa912..07b145a006 100644
--- a/photon-client/src/App.vue
+++ b/photon-client/src/App.vue
@@ -110,8 +110,4 @@ if (!is_demo) {
 div.v-layout {
   overflow: unset !important;
 }
-
-.v-card.rounded-lg {
-  border-radius: 12px !important;
-}
 </style>
diff --git a/photon-client/src/components/cameras/CameraCalibrationCard.vue b/photon-client/src/components/cameras/CameraCalibrationCard.vue
index 285262bcf5..1bf57df848 100644
--- a/photon-client/src/components/cameras/CameraCalibrationCard.vue
+++ b/photon-client/src/components/cameras/CameraCalibrationCard.vue
@@ -286,7 +286,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
               :disabled="isCalibrating"
             />
             <pv-select
-              v-if="boardType != CalibrationBoardTypes.Charuco"
+              v-if="boardType !== CalibrationBoardTypes.Charuco"
               v-model="useCameraSettingsStore().currentPipelineSettings.streamingFrameDivisor"
               label="Decimation"
               tooltip="Resolution to which camera frames are downscaled for detection. Calibration still uses full-res"
@@ -297,7 +297,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
               "
             />
             <pv-select
-              v-if="boardType == CalibrationBoardTypes.Charuco"
+              v-if="boardType === CalibrationBoardTypes.Charuco"
               v-model="tagFamily"
               label="Tag Family"
               tooltip="Dictionary of aruco markers on the charuco board"
@@ -314,7 +314,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
               :label-cols="4"
             />
             <pv-number-input
-              v-if="boardType == CalibrationBoardTypes.Charuco"
+              v-if="boardType === CalibrationBoardTypes.Charuco"
               v-model="markerSizeIn"
               label="Marker Size (in)"
               tooltip="Size of the tag markers in inches must be smaller than pattern spacing"
diff --git a/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue b/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue
index 92673f8343..aa64f03678 100644
--- a/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue
+++ b/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue
@@ -292,9 +292,6 @@ const calibrationImageURL = (index: number) =>
 </template>
 
 <style scoped>
-.v-data-table {
-  /* background-color: #006492 !important; */
-}
 .snapshot-preview {
   max-width: 55%;
 }
diff --git a/photon-client/src/components/dashboard/StreamConfigCard.vue b/photon-client/src/components/dashboard/StreamConfigCard.vue
index 3f4c5d929f..958ec15f6c 100644
--- a/photon-client/src/components/dashboard/StreamConfigCard.vue
+++ b/photon-client/src/components/dashboard/StreamConfigCard.vue
@@ -87,11 +87,6 @@ const processingMode = computed<number>({
   background-color: #191919 !important;
 }
 
-.mode-btn-label,
-.mode-btn-label > * {
-  /* color: white; */
-}
-
 th {
   width: 80px;
   text-align: center;
diff --git a/photon-client/src/components/settings/ApriltagControlCard.vue b/photon-client/src/components/settings/ApriltagControlCard.vue
index 1854a58ea6..9bd79a61c5 100644
--- a/photon-client/src/components/settings/ApriltagControlCard.vue
+++ b/photon-client/src/components/settings/ApriltagControlCard.vue
@@ -53,11 +53,9 @@ const quaternionToEuler = (rot_quat: Quaternion): { x: number; y: number; z: num
   width: 100%;
   height: 100%;
   text-align: center;
-  // background-color: #006492 !important;
 
   th,
   td {
-    // background-color: #006492 !important;
     font-size: 1rem !important;
     color: white !important;
   }
@@ -66,10 +64,6 @@ const quaternionToEuler = (rot_quat: Quaternion): { x: number; y: number; z: num
     font-family: monospace !important;
   }
 
-  tbody :hover td {
-    // background-color: #005281 !important;
-  }
-
   ::-webkit-scrollbar {
     width: 0;
     height: 0.55em;
@@ -86,4 +80,4 @@ const quaternionToEuler = (rot_quat: Quaternion): { x: number; y: number; z: num
     border-radius: 10px;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/photon-client/src/components/settings/DeviceControlCard.vue b/photon-client/src/components/settings/DeviceControlCard.vue
index d1d611cf2a..9a3d5478f5 100644
--- a/photon-client/src/components/settings/DeviceControlCard.vue
+++ b/photon-client/src/components/settings/DeviceControlCard.vue
@@ -266,7 +266,6 @@ const nukePhotonConfigDirectory = () => {
           <input ref="offlineUpdate" type="file" accept=".jar" style="display: none" @change="handleOfflineUpdate" />
         </v-col>
       </v-row>
-      <!-- <v-divider class="mt-3 pb-3" /> -->
       <v-row>
         <v-col cols="12" sm="6">
           <v-btn
@@ -375,7 +374,6 @@ const nukePhotonConfigDirectory = () => {
           </v-btn>
         </v-col>
       </v-row>
-      <!-- <v-divider class="mt-3 pb-3" /> -->
       <v-row>
         <v-col cols="12">
           <v-btn
diff --git a/photon-client/src/components/settings/ObjectDetectionCard.vue b/photon-client/src/components/settings/ObjectDetectionCard.vue
index 2b96b35619..33069a1cf2 100644
--- a/photon-client/src/components/settings/ObjectDetectionCard.vue
+++ b/photon-client/src/components/settings/ObjectDetectionCard.vue
@@ -401,7 +401,7 @@ const handleBulkImport = () => {
                     @click="() => (confirmDeleteDialog = { show: true, model })"
                     title="Delete Model"
                   >
-                    <v-icon>mdi-delete</v-icon>
+                    <v-icon>mdi-trash-can-outline</v-icon>
                   </v-btn>
                 </td>
                 <td class="text-right">
diff --git a/photon-client/src/views/CameraMatchingView.vue b/photon-client/src/views/CameraMatchingView.vue
index a2f8da64c2..26dcc7dde0 100644
--- a/photon-client/src/views/CameraMatchingView.vue
+++ b/photon-client/src/views/CameraMatchingView.vue
@@ -639,10 +639,6 @@ td {
   text-wrap-mode: wrap !important;
 }
 
-.v-table {
-  /* background-color: #006492 !important; */
-}
-
 .active-status {
   color: rgb(14, 240, 14);
   background-color: transparent;
@@ -656,7 +652,6 @@ td {
 }
 
 a:hover {
-  /* color: pink; */
   background-color: transparent;
   text-decoration: underline;
 }
diff --git a/photon-client/src/views/DashboardView.vue b/photon-client/src/views/DashboardView.vue
index 3c689c104f..50128f4ef1 100644
--- a/photon-client/src/views/DashboardView.vue
+++ b/photon-client/src/views/DashboardView.vue
@@ -151,7 +151,4 @@ a:active {
   background-color: transparent;
   text-decoration: none;
 }
-/* .v-alert {
-  border-radius: 12px;
-} */
 </style>
diff --git a/photon-server/src/main/resources/web/index.html b/photon-server/src/main/resources/web/index.html
index 45f76981aa..3f903b1eda 100644
--- a/photon-server/src/main/resources/web/index.html
+++ b/photon-server/src/main/resources/web/index.html
@@ -1,14 +1 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="./favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Photon Client</title>
-    <script type="module" crossorigin src="./assets/index-BQzFa1Lb.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-CbRrrLUy.css">
-  </head>
-  <body>
-    <div id="app"></div>

-  </body>
-</html>
+<p>UIs should be copied, but yours wasn't!</p>
\ No newline at end of file

From 3fe67922ca9c0373afadbf5ee5e1ac7a8170132c Mon Sep 17 00:00:00 2001
From: Devolian <devondoyle@outlook.com>
Date: Tue, 29 Jul 2025 12:36:44 -0400
Subject: [PATCH 07/16] ignore index

---
 .gitignore                                      | 1 +
 photon-server/src/main/resources/web/index.html | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 63d518c8da..743ad15527 100644
--- a/.gitignore
+++ b/.gitignore
@@ -146,3 +146,4 @@ photon-server/src/main/resources/web/*
 node_modules
 dist
 components.d.ts
+photon-server/src/main/resources/web/index.html
diff --git a/photon-server/src/main/resources/web/index.html b/photon-server/src/main/resources/web/index.html
index 3f903b1eda..641b6da394 100644
--- a/photon-server/src/main/resources/web/index.html
+++ b/photon-server/src/main/resources/web/index.html
@@ -1 +1 @@
-<p>UIs should be copied, but yours wasn't!</p>
\ No newline at end of file
+<p>UIs should be copied, but yours wasn't!</p>

From b1774b9b8ed9e136d9ddf2f780fae3b42139b484 Mon Sep 17 00:00:00 2001
From: Devolian <devondoyle@outlook.com>
Date: Tue, 29 Jul 2025 12:58:42 -0400
Subject: [PATCH 08/16] oops

---
 photon-client/src/views/CameraMatchingView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/photon-client/src/views/CameraMatchingView.vue b/photon-client/src/views/CameraMatchingView.vue
index 26dcc7dde0..69a0495285 100644
--- a/photon-client/src/views/CameraMatchingView.vue
+++ b/photon-client/src/views/CameraMatchingView.vue
@@ -567,7 +567,7 @@ const openExportSettingsPrompt = () => {
         <v-card-text v-if="!viewingCamera[1]">
           <PvCameraInfoCard :camera="viewingCamera[0]" />
         </v-card-text>
-        <v-card-text v-else-if="camerasMatch(getMatchedDevice(viewingCamera[0]), viewingCamera[0])">
+        <v-card-text v-else-if="!camerasMatch(getMatchedDevice(viewingCamera[0]), viewingCamera[0])">
           <v-alert
             class="mb-3"
             color="photonYellow"

From 2ee6916505b2f1a825326354505b22fcdd147290 Mon Sep 17 00:00:00 2001
From: Sam948-byte <samf.236@proton.me>
Date: Tue, 29 Jul 2025 17:59:50 -0500
Subject: [PATCH 09/16] hack in OD pipeline

---
 .../common/hardware/Platform.java             | 148 +++++++++---------
 1 file changed, 75 insertions(+), 73 deletions(-)

diff --git a/photon-targeting/src/main/java/org/photonvision/common/hardware/Platform.java b/photon-targeting/src/main/java/org/photonvision/common/hardware/Platform.java
index 087d364289..c1644a8f30 100644
--- a/photon-targeting/src/main/java/org/photonvision/common/hardware/Platform.java
+++ b/photon-targeting/src/main/java/org/photonvision/common/hardware/Platform.java
@@ -128,7 +128,8 @@ public static boolean isLinux() {
     }
 
     public static boolean isRK3588() {
-        return Platform.isOrangePi() || Platform.isCoolPi4b() || Platform.isRock5C();
+        return true;
+        // return Platform.isOrangePi() || Platform.isCoolPi4b() || Platform.isRock5C();
     }
 
     public static boolean isQCS6490() {
@@ -175,78 +176,79 @@ public static boolean isAthena() {
 
     // TODO: add rubik, but waiting for more info on architecture
     public static Platform getCurrentPlatform() {
-        String OS_NAME;
-        if (Platform.OS_NAME != null) {
-            OS_NAME = Platform.OS_NAME;
-        } else {
-            OS_NAME = System.getProperty("os.name");
-        }
-
-        String OS_ARCH;
-        if (Platform.OS_ARCH != null) {
-            OS_ARCH = Platform.OS_ARCH;
-        } else {
-            OS_ARCH = System.getProperty("os.arch");
-        }
-
-        if (OS_NAME.startsWith("Windows")) {
-            if (OS_ARCH.equals("x86") || OS_ARCH.equals("i386")) {
-                return WINDOWS_32;
-            } else if (OS_ARCH.equals("amd64") || OS_ARCH.equals("x86_64")) {
-                return WINDOWS_64;
-            } else {
-                // please don't try this
-                return UNKNOWN;
-            }
-        }
-
-        if (OS_NAME.startsWith("Mac")) {
-            // TODO - once we have real support, this might have to be more granular
-            return MACOS;
-        }
-
-        if (OS_NAME.startsWith("Linux")) {
-            if (isPiSBC()) {
-                if (OS_ARCH.equals("arm") || OS_ARCH.equals("arm32")) {
-                    return LINUX_RASPBIAN32;
-                } else if (OS_ARCH.equals("aarch64") || OS_ARCH.equals("arm64")) {
-                    return LINUX_RASPBIAN64;
-                } else {
-                    // Unknown/exotic installation
-                    return UNKNOWN;
-                }
-            } else if (isJetsonSBC()) {
-                if (OS_ARCH.equals("aarch64") || OS_ARCH.equals("arm64")) {
-                    // TODO - do we need to check OS version?
-                    return LINUX_AARCH64;
-                } else {
-                    // Unknown/exotic installation
-                    return UNKNOWN;
-                }
-            } else if (OS_ARCH.equals("amd64") || OS_ARCH.equals("x86_64")) {
-                return LINUX_64;
-            } else if (OS_ARCH.equals("x86") || OS_ARCH.equals("i386")) {
-                return LINUX_32;
-            } else if (OS_ARCH.equals("aarch64") || OS_ARCH.equals("arm64")) {
-                // TODO - os detection needed?
-                if (isRK3588()) {
-                    return LINUX_RK3588_64;
-                } else if (isQCS6490()) {
-                    return LINUX_QCS6490;
-
-                } else {
-                    return LINUX_AARCH64;
-                }
-            } else if (OS_ARCH.equals("arm") || OS_ARCH.equals("arm32")) {
-                return LINUX_ARM32;
-            } else {
-                // Unknown or otherwise unsupported platform
-                return Platform.UNKNOWN;
-            }
-        }
-
-        // If we fall through all the way to here,
-        return Platform.UNKNOWN;
+        return Platform.LINUX_RK3588_64;
+        // String OS_NAME;
+        // if (Platform.OS_NAME != null) {
+        //     OS_NAME = Platform.OS_NAME;
+        // } else {
+        //     OS_NAME = System.getProperty("os.name");
+        // }
+
+        // String OS_ARCH;
+        // if (Platform.OS_ARCH != null) {
+        //     OS_ARCH = Platform.OS_ARCH;
+        // } else {
+        //     OS_ARCH = System.getProperty("os.arch");
+        // }
+
+        // if (OS_NAME.startsWith("Windows")) {
+        //     if (OS_ARCH.equals("x86") || OS_ARCH.equals("i386")) {
+        //         return WINDOWS_32;
+        //     } else if (OS_ARCH.equals("amd64") || OS_ARCH.equals("x86_64")) {
+        //         return WINDOWS_64;
+        //     } else {
+        //         // please don't try this
+        //         return UNKNOWN;
+        //     }
+        // }
+
+        // if (OS_NAME.startsWith("Mac")) {
+        //     // TODO - once we have real support, this might have to be more granular
+        //     return MACOS;
+        // }
+
+        // if (OS_NAME.startsWith("Linux")) {
+        //     if (isPiSBC()) {
+        //         if (OS_ARCH.equals("arm") || OS_ARCH.equals("arm32")) {
+        //             return LINUX_RASPBIAN32;
+        //         } else if (OS_ARCH.equals("aarch64") || OS_ARCH.equals("arm64")) {
+        //             return LINUX_RASPBIAN64;
+        //         } else {
+        //             // Unknown/exotic installation
+        //             return UNKNOWN;
+        //         }
+        //     } else if (isJetsonSBC()) {
+        //         if (OS_ARCH.equals("aarch64") || OS_ARCH.equals("arm64")) {
+        //             // TODO - do we need to check OS version?
+        //             return LINUX_AARCH64;
+        //         } else {
+        //             // Unknown/exotic installation
+        //             return UNKNOWN;
+        //         }
+        //     } else if (OS_ARCH.equals("amd64") || OS_ARCH.equals("x86_64")) {
+        //         return LINUX_64;
+        //     } else if (OS_ARCH.equals("x86") || OS_ARCH.equals("i386")) {
+        //         return LINUX_32;
+        //     } else if (OS_ARCH.equals("aarch64") || OS_ARCH.equals("arm64")) {
+        //         // TODO - os detection needed?
+        //         if (isRK3588()) {
+        //             return LINUX_RK3588_64;
+        //         } else if (isQCS6490()) {
+        //             return LINUX_QCS6490;
+
+        //         } else {
+        //             return LINUX_AARCH64;
+        //         }
+        //     } else if (OS_ARCH.equals("arm") || OS_ARCH.equals("arm32")) {
+        //         return LINUX_ARM32;
+        //     } else {
+        //         // Unknown or otherwise unsupported platform
+        //         return Platform.UNKNOWN;
+        //     }
+        // }
+
+        // // If we fall through all the way to here,
+        // return Platform.UNKNOWN;
     }
 
     // Check for various known SBC types

From 37bffb15094266fb175a364ea5d8adb386cf473a Mon Sep 17 00:00:00 2001
From: Devolian <devondoyle@outlook.com>
Date: Thu, 31 Jul 2025 16:28:25 -0400
Subject: [PATCH 10/16] Revert "hack in OD pipeline"

This reverts commit 2ee6916505b2f1a825326354505b22fcdd147290.
---
 .../common/hardware/Platform.java             | 148 +++++++++---------
 1 file changed, 73 insertions(+), 75 deletions(-)

diff --git a/photon-targeting/src/main/java/org/photonvision/common/hardware/Platform.java b/photon-targeting/src/main/java/org/photonvision/common/hardware/Platform.java
index c1644a8f30..087d364289 100644
--- a/photon-targeting/src/main/java/org/photonvision/common/hardware/Platform.java
+++ b/photon-targeting/src/main/java/org/photonvision/common/hardware/Platform.java
@@ -128,8 +128,7 @@ public static boolean isLinux() {
     }
 
     public static boolean isRK3588() {
-        return true;
-        // return Platform.isOrangePi() || Platform.isCoolPi4b() || Platform.isRock5C();
+        return Platform.isOrangePi() || Platform.isCoolPi4b() || Platform.isRock5C();
     }
 
     public static boolean isQCS6490() {
@@ -176,79 +175,78 @@ public static boolean isAthena() {
 
     // TODO: add rubik, but waiting for more info on architecture
     public static Platform getCurrentPlatform() {
-        return Platform.LINUX_RK3588_64;
-        // String OS_NAME;
-        // if (Platform.OS_NAME != null) {
-        //     OS_NAME = Platform.OS_NAME;
-        // } else {
-        //     OS_NAME = System.getProperty("os.name");
-        // }
-
-        // String OS_ARCH;
-        // if (Platform.OS_ARCH != null) {
-        //     OS_ARCH = Platform.OS_ARCH;
-        // } else {
-        //     OS_ARCH = System.getProperty("os.arch");
-        // }
-
-        // if (OS_NAME.startsWith("Windows")) {
-        //     if (OS_ARCH.equals("x86") || OS_ARCH.equals("i386")) {
-        //         return WINDOWS_32;
-        //     } else if (OS_ARCH.equals("amd64") || OS_ARCH.equals("x86_64")) {
-        //         return WINDOWS_64;
-        //     } else {
-        //         // please don't try this
-        //         return UNKNOWN;
-        //     }
-        // }
-
-        // if (OS_NAME.startsWith("Mac")) {
-        //     // TODO - once we have real support, this might have to be more granular
-        //     return MACOS;
-        // }
-
-        // if (OS_NAME.startsWith("Linux")) {
-        //     if (isPiSBC()) {
-        //         if (OS_ARCH.equals("arm") || OS_ARCH.equals("arm32")) {
-        //             return LINUX_RASPBIAN32;
-        //         } else if (OS_ARCH.equals("aarch64") || OS_ARCH.equals("arm64")) {
-        //             return LINUX_RASPBIAN64;
-        //         } else {
-        //             // Unknown/exotic installation
-        //             return UNKNOWN;
-        //         }
-        //     } else if (isJetsonSBC()) {
-        //         if (OS_ARCH.equals("aarch64") || OS_ARCH.equals("arm64")) {
-        //             // TODO - do we need to check OS version?
-        //             return LINUX_AARCH64;
-        //         } else {
-        //             // Unknown/exotic installation
-        //             return UNKNOWN;
-        //         }
-        //     } else if (OS_ARCH.equals("amd64") || OS_ARCH.equals("x86_64")) {
-        //         return LINUX_64;
-        //     } else if (OS_ARCH.equals("x86") || OS_ARCH.equals("i386")) {
-        //         return LINUX_32;
-        //     } else if (OS_ARCH.equals("aarch64") || OS_ARCH.equals("arm64")) {
-        //         // TODO - os detection needed?
-        //         if (isRK3588()) {
-        //             return LINUX_RK3588_64;
-        //         } else if (isQCS6490()) {
-        //             return LINUX_QCS6490;
-
-        //         } else {
-        //             return LINUX_AARCH64;
-        //         }
-        //     } else if (OS_ARCH.equals("arm") || OS_ARCH.equals("arm32")) {
-        //         return LINUX_ARM32;
-        //     } else {
-        //         // Unknown or otherwise unsupported platform
-        //         return Platform.UNKNOWN;
-        //     }
-        // }
-
-        // // If we fall through all the way to here,
-        // return Platform.UNKNOWN;
+        String OS_NAME;
+        if (Platform.OS_NAME != null) {
+            OS_NAME = Platform.OS_NAME;
+        } else {
+            OS_NAME = System.getProperty("os.name");
+        }
+
+        String OS_ARCH;
+        if (Platform.OS_ARCH != null) {
+            OS_ARCH = Platform.OS_ARCH;
+        } else {
+            OS_ARCH = System.getProperty("os.arch");
+        }
+
+        if (OS_NAME.startsWith("Windows")) {
+            if (OS_ARCH.equals("x86") || OS_ARCH.equals("i386")) {
+                return WINDOWS_32;
+            } else if (OS_ARCH.equals("amd64") || OS_ARCH.equals("x86_64")) {
+                return WINDOWS_64;
+            } else {
+                // please don't try this
+                return UNKNOWN;
+            }
+        }
+
+        if (OS_NAME.startsWith("Mac")) {
+            // TODO - once we have real support, this might have to be more granular
+            return MACOS;
+        }
+
+        if (OS_NAME.startsWith("Linux")) {
+            if (isPiSBC()) {
+                if (OS_ARCH.equals("arm") || OS_ARCH.equals("arm32")) {
+                    return LINUX_RASPBIAN32;
+                } else if (OS_ARCH.equals("aarch64") || OS_ARCH.equals("arm64")) {
+                    return LINUX_RASPBIAN64;
+                } else {
+                    // Unknown/exotic installation
+                    return UNKNOWN;
+                }
+            } else if (isJetsonSBC()) {
+                if (OS_ARCH.equals("aarch64") || OS_ARCH.equals("arm64")) {
+                    // TODO - do we need to check OS version?
+                    return LINUX_AARCH64;
+                } else {
+                    // Unknown/exotic installation
+                    return UNKNOWN;
+                }
+            } else if (OS_ARCH.equals("amd64") || OS_ARCH.equals("x86_64")) {
+                return LINUX_64;
+            } else if (OS_ARCH.equals("x86") || OS_ARCH.equals("i386")) {
+                return LINUX_32;
+            } else if (OS_ARCH.equals("aarch64") || OS_ARCH.equals("arm64")) {
+                // TODO - os detection needed?
+                if (isRK3588()) {
+                    return LINUX_RK3588_64;
+                } else if (isQCS6490()) {
+                    return LINUX_QCS6490;
+
+                } else {
+                    return LINUX_AARCH64;
+                }
+            } else if (OS_ARCH.equals("arm") || OS_ARCH.equals("arm32")) {
+                return LINUX_ARM32;
+            } else {
+                // Unknown or otherwise unsupported platform
+                return Platform.UNKNOWN;
+            }
+        }
+
+        // If we fall through all the way to here,
+        return Platform.UNKNOWN;
     }
 
     // Check for various known SBC types

From f0269a93f21e9f97fd8db1e9c9d7c6fd79942217 Mon Sep 17 00:00:00 2001
From: Devolian <devondoyle@outlook.com>
Date: Sun, 3 Aug 2025 18:52:37 -0400
Subject: [PATCH 11/16] conform object detection elements to theme

---
 .../components/dashboard/tabs/TargetsTab.vue  |  15 +-
 .../components/settings/DeviceControlCard.vue |   4 +-
 .../settings/ObjectDetectionCard.vue          | 135 +++++++++++++-----
 3 files changed, 108 insertions(+), 46 deletions(-)

diff --git a/photon-client/src/components/dashboard/tabs/TargetsTab.vue b/photon-client/src/components/dashboard/tabs/TargetsTab.vue
index e884b3ed8e..4c5263b78b 100644
--- a/photon-client/src/components/dashboard/tabs/TargetsTab.vue
+++ b/photon-client/src/components/dashboard/tabs/TargetsTab.vue
@@ -4,6 +4,9 @@ import { type ActivePipelineSettings, PipelineType } from "@/types/PipelineTypes
 import { useStateStore } from "@/stores/StateStore";
 import { angleModulus, toDeg } from "@/lib/MathUtils";
 import { computed } from "vue";
+import { useTheme } from "vuetify";
+
+const theme = useTheme();
 
 // TODO fix pipeline typing in order to fix this, the store settings call should be able to infer that only valid pipeline type settings are exposed based on pre-checks for the entire config section
 // Defer reference to store access method
@@ -200,7 +203,12 @@ const resetCurrentBuffer = () => {
           >Multi-tag pose standard deviation over the last
           {{ useStateStore().currentMultitagBuffer?.length || "NaN" }}/100 samples
         </v-card-subtitle>
-        <v-btn color="secondary" class="mb-4 mt-1" style="width: min-content" variant="elevated" @click="resetCurrentBuffer"
+        <v-btn
+          color="photonYellow"
+          class="mb-4 mt-1"
+          style="width: min-content"
+          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          @click="resetCurrentBuffer"
           >Reset Samples</v-btn
         >
         <v-table density="compact">
@@ -286,11 +294,6 @@ th {
     }
   }
   tbody {
-    :hover {
-      td {
-        background-color: #005281 !important;
-      }
-    }
     tr {
       td {
         padding: 0 !important;
diff --git a/photon-client/src/components/settings/DeviceControlCard.vue b/photon-client/src/components/settings/DeviceControlCard.vue
index 9a3d5478f5..73ad650f80 100644
--- a/photon-client/src/components/settings/DeviceControlCard.vue
+++ b/photon-client/src/components/settings/DeviceControlCard.vue
@@ -391,9 +391,9 @@ const nukePhotonConfigDirectory = () => {
       <v-card color="surface" flat>
         <v-card-title style="display: flex; justify-content: center">
           <span class="open-label">
-            <v-icon end color="red" class="open-icon ma-1">mdi-alert-outline</v-icon>
+            <v-icon end color="red" class="open-icon ma-1" size="large">mdi-alert-outline</v-icon>
             Factory Reset PhotonVision
-            <v-icon end color="red" class="open-icon ma-1">mdi-alert-outline</v-icon>
+            <v-icon end color="red" class="open-icon ma-1" size="large">mdi-alert-outline</v-icon>
           </span>
         </v-card-title>
         <v-card-text class="pt-0 pb-10px">
diff --git a/photon-client/src/components/settings/ObjectDetectionCard.vue b/photon-client/src/components/settings/ObjectDetectionCard.vue
index 33069a1cf2..f4f07dd5dc 100644
--- a/photon-client/src/components/settings/ObjectDetectionCard.vue
+++ b/photon-client/src/components/settings/ObjectDetectionCard.vue
@@ -5,6 +5,9 @@ import { useStateStore } from "@/stores/StateStore";
 import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
 import type { ObjectDetectionModelProperties } from "@/types/SettingTypes";
 import pvInput from "@/components/common/pv-input.vue";
+import { useTheme } from "vuetify";
+
+const theme = useTheme();
 
 const showImportDialog = ref(false);
 const showInfo = ref({ show: false, model: {} as ObjectDetectionModelProperties });
@@ -270,12 +273,17 @@ const handleBulkImport = () => {
 </script>
 
 <template>
-  <v-card class="mb-3" style="background-color: #006492">
+  <v-card class="mb-3" color="surface">
     <v-card-title>Object Detection</v-card-title>
     <div class="pa-5 pt-0">
       <v-row>
         <v-col cols="12" sm="6">
-          <v-btn color="secondary" class="justify-center" @click="() => (showImportDialog = true)">
+          <v-btn
+            color="photonYellow"
+            class="justify-center"
+            @click="() => (showImportDialog = true)"
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          >
             <v-icon start class="open-icon"> mdi-import </v-icon>
             <span class="open-label">Import Model</span>
           </v-btn>
@@ -292,7 +300,7 @@ const handleBulkImport = () => {
               }
             "
           >
-            <v-card color="primary" dark>
+            <v-card color="surface" dark>
               <v-card-title class="pb-0">Import New Object Detection Model</v-card-title>
               <v-card-text>
                 Upload a new object detection model to this device that can be used in a pipeline. Note that ONLY
@@ -316,7 +324,7 @@ const handleBulkImport = () => {
                     :items="['YOLOv5', 'YOLOv8', 'YOLO11']"
                   />
                   <v-btn
-                    color="secondary"
+                    color="photonYellow"
                     width="100%"
                     :disabled="
                       importModelFile === null ||
@@ -326,8 +334,9 @@ const handleBulkImport = () => {
                       importVersion === null
                     "
                     @click="handleImport()"
+                    :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
                   >
-                    <v-icon start class="open-icon"> mdi-import </v-icon>
+                    <v-icon start class="open-icon" size="large"> mdi-import </v-icon>
                     <span class="open-label">Import Object Detection Model</span>
                   </v-btn>
                 </div>
@@ -336,20 +345,31 @@ const handleBulkImport = () => {
           </v-dialog>
         </v-col>
         <v-col cols="12" sm="6">
-          <v-btn color="secondary" class="justify-center" @click="() => (showBulkImportDialog = true)">
+          <v-btn
+            color="photonYellow"
+            class="justify-center"
+            @click="() => (showBulkImportDialog = true)"
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          >
             <v-icon start class="open-icon"> mdi-import </v-icon>
             <span class="open-label">Bulk Import</span>
           </v-btn>
           <v-dialog v-model="showBulkImportDialog" width="600">
-            <v-card color="primary" dark>
+            <v-card color="surface" dark>
               <v-card-title class="pb-0">Import Multiple Object Detection Models</v-card-title>
               <v-card-text>
                 Upload a zip file containing multiple object detection models to this device. Note this zip file should
                 only come from a previous export of object detection models.
                 <div class="pa-5 pb-0">
                   <v-file-input v-model="importFile" variant="underlined" label="Zip File" accept=".zip" />
-                  <v-btn color="secondary" width="100%" :disabled="importFile === null" @click="handleBulkImport()">
-                    <v-icon start class="open-icon"> mdi-import </v-icon>
+                  <v-btn
+                    color="photonYellow"
+                    width="100%"
+                    :disabled="importFile === null"
+                    @click="handleBulkImport()"
+                    :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                  >
+                    <v-icon start class="open-icon" size="large"> mdi-import </v-icon>
                     <span class="open-label">Bulk Import</span>
                   </v-btn>
                 </div>
@@ -358,7 +378,11 @@ const handleBulkImport = () => {
           </v-dialog>
         </v-col>
         <v-col cols="12" sm="6">
-          <v-btn color="secondary" @click="openExportPrompt">
+          <v-btn
+            color="lightBlue"
+            @click="openExportPrompt"
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          >
             <v-icon start class="open-icon"> mdi-export </v-icon>
             <span class="open-label">Export Models</span>
           </v-btn>
@@ -371,7 +395,11 @@ const handleBulkImport = () => {
           />
         </v-col>
         <v-col cols="12" sm="6">
-          <v-btn color="error" @click="() => (showNukeDialog = true)">
+          <v-btn
+            color="error"
+            @click="() => (showNukeDialog = true)"
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          >
             <v-icon left class="open-icon"> mdi-trash </v-icon>
             <span class="open-label">Clear and reset models</span>
           </v-btn>
@@ -400,43 +428,64 @@ const handleBulkImport = () => {
                     color="error"
                     @click="() => (confirmDeleteDialog = { show: true, model })"
                     title="Delete Model"
+                    :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
                   >
-                    <v-icon>mdi-trash-can-outline</v-icon>
+                    <v-icon size="large">mdi-trash-can-outline</v-icon>
                   </v-btn>
                 </td>
                 <td class="text-right">
                   <v-btn
                     icon
                     small
-                    color="primary"
+                    color="photonYellow"
                     @click="() => (showRenameDialog = { show: true, model, newName: '' })"
                     title="Rename Model"
+                    :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
                   >
-                    <v-icon>mdi-pencil</v-icon>
+                    <v-icon size="large">mdi-pencil</v-icon>
                   </v-btn>
                 </td>
                 <td class="text-right">
-                  <v-btn icon small color="info" @click="() => (showInfo = { show: true, model })">
-                    <v-icon>mdi-information</v-icon>
+                  <v-btn
+                    icon
+                    small
+                    color="lightBlue"
+                    @click="() => (showInfo = { show: true, model })"
+                    :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                  >
+                    <v-icon size="large">mdi-information</v-icon>
                   </v-btn>
                 </td>
               </tr>
             </tbody>
           </v-table>
+
           <v-dialog v-model="confirmDeleteDialog.show" width="600">
-            <v-card color="primary" dark>
+            <v-card color="surface" dark>
               <v-card-title>Delete Object Detection Model</v-card-title>
               <v-card-text class="pt-0">
                 Are you sure you want to delete the model {{ confirmDeleteDialog.model.nickname }}?
                 <v-card-actions class="pt-5 pb-0 pr-0" style="justify-content: flex-end">
-                  <v-btn variant="elevated" color="error" @click="deleteModel(confirmDeleteDialog.model)">Delete</v-btn>
-                  <v-btn variant="elevated" @click="confirmDeleteDialog.show = false" color="secondary">Cancel</v-btn>
+                  <v-btn
+                    :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                    @click="confirmDeleteDialog.show = false"
+                    color="lightBlue"
+                  >
+                    Cancel
+                  </v-btn>
+                  <v-btn
+                    :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                    color="error"
+                    @click="deleteModel(confirmDeleteDialog.model)"
+                  >
+                    Delete
+                  </v-btn>
                 </v-card-actions>
               </v-card-text>
             </v-card>
           </v-dialog>
           <v-dialog v-model="showRenameDialog.show" width="600">
-            <v-card color="primary" dark>
+            <v-card color="surface" dark>
               <v-card-title>Rename Object Detection Model</v-card-title>
               <v-card-text class="pt-0">
                 Enter a new name for the model {{ showRenameDialog.model.nickname }}:
@@ -445,22 +494,32 @@ const handleBulkImport = () => {
                 </div>
                 <v-card-actions class="pt-5 pb-0 pr-0" style="justify-content: flex-end">
                   <v-btn
-                    variant="elevated"
-                    color="secondary"
+                    :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                    @click="showRenameDialog.show = false"
+                    color="error"
+                    >Cancel</v-btn
+                  >
+                  <v-btn
+                    :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                    color="photonYellow"
                     @click="renameModel(showRenameDialog.model, showRenameDialog.newName)"
                     >Rename</v-btn
                   >
-                  <v-btn variant="elevated" @click="showRenameDialog.show = false" color="error">Cancel</v-btn>
                 </v-card-actions>
               </v-card-text>
             </v-card>
           </v-dialog>
           <v-dialog v-model="showInfo.show" width="600">
-            <v-card color="primary" dark>
+            <v-card color="surface" dark>
               <v-card-title>Object Detection Model Info</v-card-title>
               <v-card-text class="pt-0">
-                <v-btn color="secondary" width="100%" @click="openExportIndividualModelPrompt">
-                  <v-icon left class="open-icon"> mdi-export </v-icon>
+                <v-btn
+                  color="lightBlue"
+                  width="100%"
+                  @click="openExportIndividualModelPrompt"
+                  :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                >
+                  <v-icon left class="open-icon" size="large"> mdi-export </v-icon>
                   <span class="open-label">Export Model</span>
                 </v-btn>
                 <a
@@ -486,12 +545,12 @@ const handleBulkImport = () => {
     </div>
 
     <v-dialog v-model="showNukeDialog" width="800" dark>
-      <v-card color="primary" flat>
+      <v-card color="surface" flat>
         <v-card-title style="display: flex; justify-content: center">
           <span class="open-label">
-            <v-icon end color="error" class="open-icon ma-1">mdi-nuke</v-icon>
+            <v-icon end color="error" class="open-icon ma-1" size="large">mdi-alert-outline</v-icon>
             Clear and Reset Object Detection Models
-            <v-icon end color="error" class="open-icon ma-1">mdi-nuke</v-icon>
+            <v-icon end color="error" class="open-icon ma-1" size="large">mdi-alert-outline</v-icon>
           </span>
         </v-card-title>
         <v-card-text class="pt-0 pb-10px">
@@ -500,8 +559,13 @@ const handleBulkImport = () => {
               <span> This will delete ALL OF YOUR MODELS and re-extract the default models. </span>
             </v-col>
             <v-col cols="12" md="6">
-              <v-btn color="secondary" style="float: right" @click="openExportPrompt">
-                <v-icon start class="open-icon"> mdi-export </v-icon>
+              <v-btn
+                color="photonYellow"
+                style="float: right"
+                @click="openExportPrompt"
+                :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+              >
+                <v-icon start class="open-icon" size="large"> mdi-export </v-icon>
                 <span class="open-label">Backup Models</span>
                 <a
                   ref="exportModels"
@@ -528,8 +592,9 @@ const handleBulkImport = () => {
             width="100%"
             :disabled="yesDeleteMyModelsText.toLowerCase() !== expected.toLowerCase()"
             @click="nukeModels"
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
           >
-            <v-icon start class="open-icon"> mdi-trash-can-outline </v-icon>
+            <v-icon start class="open-icon" size="large"> mdi-trash-can-outline </v-icon>
             <span class="open-label">
               {{ $vuetify.display.mdAndUp ? "Delete models, I have backed up what I need" : "Delete Models" }}
             </span>
@@ -561,11 +626,9 @@ const handleBulkImport = () => {
   width: 100%;
   height: 100%;
   text-align: center;
-  background-color: #006492 !important;
 
   th,
   td {
-    background-color: #006492 !important;
     font-size: 1rem !important;
     color: white !important;
     text-align: center !important;
@@ -575,10 +638,6 @@ const handleBulkImport = () => {
     font-family: monospace !important;
   }
 
-  tbody :hover td {
-    background-color: #005281 !important;
-  }
-
   ::-webkit-scrollbar {
     width: 0;
     height: 0.55em;

From aee153fef98ef96d9a9df1f811322fbe1adf7b1e Mon Sep 17 00:00:00 2001
From: Devolian <devondoyle@outlook.com>
Date: Sun, 3 Aug 2025 19:11:08 -0400
Subject: [PATCH 12/16] refactor yellow and blue to active and passive in
 themes

---
 .../cameras/CameraCalibrationCard.vue         | 10 ++++-----
 .../cameras/CameraCalibrationInfoCard.vue     |  4 ++--
 .../components/cameras/CameraControlCard.vue  |  6 ++---
 .../src/components/cameras/CamerasView.vue    |  4 ++--
 .../dashboard/CameraAndPipelineSelectCard.vue |  8 +++----
 .../components/dashboard/ConfigOptions.vue    |  2 +-
 .../components/dashboard/StreamConfigCard.vue |  8 +++----
 .../components/dashboard/tabs/TargetsTab.vue  |  2 +-
 .../components/settings/DeviceControlCard.vue | 14 ++++++------
 .../components/settings/NetworkingCard.vue    |  4 ++--
 .../settings/ObjectDetectionCard.vue          | 22 +++++++++----------
 photon-client/src/plugins/vuetify.ts          |  8 +++----
 .../src/views/CameraMatchingView.vue          | 14 ++++++------
 photon-client/src/views/DashboardView.vue     |  4 ++--
 14 files changed, 55 insertions(+), 55 deletions(-)

diff --git a/photon-client/src/components/cameras/CameraCalibrationCard.vue b/photon-client/src/components/cameras/CameraCalibrationCard.vue
index 7675699d39..638b52b1b5 100644
--- a/photon-client/src/components/cameras/CameraCalibrationCard.vue
+++ b/photon-client/src/components/cameras/CameraCalibrationCard.vue
@@ -263,7 +263,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
               closable
               density="compact"
               :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
-              :color="useSettingsStore().general.mrCalWorking ? 'lightBlue' : 'error'"
+              :color="useSettingsStore().general.mrCalWorking ? 'buttonPassive' : 'error'"
               :icon="useSettingsStore().general.mrCalWorking ? 'mdi-check' : 'mdi-close'"
               :text="
                 useSettingsStore().general.mrCalWorking
@@ -434,7 +434,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
           <v-chip
             :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
             label
-            :color="useStateStore().calibrationData.hasEnoughImages ? 'lightBlue' : 'light-grey'"
+            :color="useStateStore().calibrationData.hasEnoughImages ? 'buttonPassive' : 'light-grey'"
           >
             Snapshots: {{ useStateStore().calibrationData.imageCount }} of at least
             {{ useStateStore().calibrationData.minimumImageCount }}
@@ -442,7 +442,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
         </div>
         <div>
           <v-btn
-            color="lightBlue"
+            color="buttonPassive"
             size="small"
             block
             :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
@@ -467,7 +467,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
             <v-btn
               size="small"
               block
-              color="photonYellow"
+              color="buttonActive"
               :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
               :disabled="!settingsValid || tooManyPoints"
               @click="isCalibrating ? useCameraSettingsStore().takeCalibrationSnapshot() : startCalibration()"
@@ -483,7 +483,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
               size="small"
               block
               :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-              :color="useStateStore().calibrationData.hasEnoughImages ? 'photonYellow' : 'error'"
+              :color="useStateStore().calibrationData.hasEnoughImages ? 'buttonActive' : 'error'"
               :disabled="!isCalibrating || !settingsValid"
               @click="endCalibration"
             >
diff --git a/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue b/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue
index aa64f03678..a87c01607f 100644
--- a/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue
+++ b/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue
@@ -99,7 +99,7 @@ const calibrationImageURL = (index: number) =>
       </v-col>
       <v-col cols="6" md="3" class="d-flex align-center pt-0 pt-md-3 pl-6 pl-md-3">
         <v-btn
-          color="lightBlue"
+          color="buttonPassive"
           style="width: 100%"
           @click="openUploadPhotonCalibJsonPrompt"
           :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
@@ -117,7 +117,7 @@ const calibrationImageURL = (index: number) =>
       </v-col>
       <v-col cols="6" md="3" class="d-flex align-center pt-0 pt-md-3 pr-6 pr-md-3">
         <v-btn
-          color="lightBlue"
+          color="buttonPassive"
           :disabled="!currentCalibrationCoeffs"
           style="width: 100%"
           @click="openExportCalibrationPrompt"
diff --git a/photon-client/src/components/cameras/CameraControlCard.vue b/photon-client/src/components/cameras/CameraControlCard.vue
index 1e0cbc2cc3..bae2d1147e 100644
--- a/photon-client/src/components/cameras/CameraControlCard.vue
+++ b/photon-client/src/components/cameras/CameraControlCard.vue
@@ -98,7 +98,7 @@ const expanded = ref([]);
     <v-card-title>Camera Control</v-card-title>
     <v-card-text class="pt-0">
       <v-btn
-        color="lightBlue"
+        color="buttonPassive"
         @click="fetchSnapshots"
         :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
       >
@@ -111,7 +111,7 @@ const expanded = ref([]);
         <v-card-title> Saved Frame Snapshots </v-card-title>
         <v-card-text v-if="imgData.length === 0" class="pt-0">
           <v-alert
-            color="lightBlue"
+            color="buttonPassive"
             density="compact"
             text="There are currently no saved snapshots."
             icon="mdi-information-outline"
@@ -121,7 +121,7 @@ const expanded = ref([]);
         <v-card-text v-else class="pt-0">
           <v-alert
             closable
-            color="lightBlue"
+            color="buttonPassive"
             density="compact"
             text="Snapshot timestamps depend on when the coprocessor was last connected to the internet."
             icon="mdi-information-outline"
diff --git a/photon-client/src/components/cameras/CamerasView.vue b/photon-client/src/components/cameras/CamerasView.vue
index 60c36cad7c..e91afdee1a 100644
--- a/photon-client/src/components/cameras/CamerasView.vue
+++ b/photon-client/src/components/cameras/CamerasView.vue
@@ -99,7 +99,7 @@ const fpsTooLow = computed<boolean>(() => {
         base-color="surface-variant"
       >
         <v-btn
-          color="lightBlue"
+          color="buttonPassive"
           class="fill"
           :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
           :disabled="useCameraSettingsStore().isDriverMode || useCameraSettingsStore().isCalibrationMode"
@@ -108,7 +108,7 @@ const fpsTooLow = computed<boolean>(() => {
           <span class="mode-btn-label">Raw</span>
         </v-btn>
         <v-btn
-          color="lightBlue"
+          color="buttonPassive"
           class="fill"
           :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
           :disabled="useCameraSettingsStore().isDriverMode || useCameraSettingsStore().isCalibrationMode"
diff --git a/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue b/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
index 8e29a1a63f..d882930607 100644
--- a/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
+++ b/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
@@ -396,14 +396,14 @@ const wrappedCameras = computed<SelectItem[]>(() =>
         </v-card-text>
         <v-card-actions class="pr-5 pt-10px pb-5">
           <v-btn
-            color="lightBlue"
+            color="buttonPassive"
             :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
             @click="cancelPipelineCreation"
           >
             Cancel
           </v-btn>
           <v-btn
-            color="photonYellow"
+            color="buttonActive"
             :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
             :disabled="checkPipelineName(newPipelineName) !== true"
             @click="createNewPipeline"
@@ -450,7 +450,7 @@ const wrappedCameras = computed<SelectItem[]>(() =>
         </v-card-text>
         <v-card-actions class="pa-5 pt-0">
           <v-btn
-            color="lightBlue"
+            color="buttonPassive"
             :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
             class="text-black"
             @click="cancelChangePipelineType"
@@ -458,7 +458,7 @@ const wrappedCameras = computed<SelectItem[]>(() =>
             Cancel
           </v-btn>
           <v-btn
-            color="photonYellow"
+            color="buttonActive"
             :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
             @click="confirmChangePipelineType"
           >
diff --git a/photon-client/src/components/dashboard/ConfigOptions.vue b/photon-client/src/components/dashboard/ConfigOptions.vue
index 856773450b..0ade012877 100644
--- a/photon-client/src/components/dashboard/ConfigOptions.vue
+++ b/photon-client/src/components/dashboard/ConfigOptions.vue
@@ -134,7 +134,7 @@ const onBeforeTabUpdate = () => {
         @vue:before-update="onBeforeTabUpdate"
       >
         <v-card color="surface" height="100%" class="pr-5 pl-5 rounded-12">
-          <v-tabs v-model="selectedTabs[tabGroupIndex]" grow bg-color="surface" height="48" slider-color="photonYellow">
+          <v-tabs v-model="selectedTabs[tabGroupIndex]" grow bg-color="surface" height="48" slider-color="buttonActive">
             <v-tab v-for="(tabConfig, index) in tabGroupData" :key="index">
               {{ tabConfig.tabName }}
             </v-tab>
diff --git a/photon-client/src/components/dashboard/StreamConfigCard.vue b/photon-client/src/components/dashboard/StreamConfigCard.vue
index 958ec15f6c..d75bd9ad9b 100644
--- a/photon-client/src/components/dashboard/StreamConfigCard.vue
+++ b/photon-client/src/components/dashboard/StreamConfigCard.vue
@@ -30,7 +30,7 @@ const processingMode = computed<number>({
         <p style="color: white">Processing Mode</p>
         <v-btn-toggle v-model="processingMode" mandatory base-color="surface-variant" class="fill w-100">
           <v-btn
-            color="lightBlue"
+            color="buttonPassive"
             :disabled="!useCameraSettingsStore().hasConnected"
             :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
             class="w-50"
@@ -41,7 +41,7 @@ const processingMode = computed<number>({
             <span>2D</span>
           </v-btn>
           <v-btn
-            color="lightBlue"
+            color="buttonPassive"
             :disabled="
               !useCameraSettingsStore().hasConnected || !useCameraSettingsStore().isCurrentVideoFormatCalibrated
             "
@@ -61,7 +61,7 @@ const processingMode = computed<number>({
         <p style="color: white">Stream Display</p>
         <v-btn-toggle v-model="value" :multiple="true" mandatory base-color="surface-variant" class="fill w-100">
           <v-btn
-            color="lightBlue"
+            color="buttonPassive"
             class="fill w-50"
             :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
           >
@@ -69,7 +69,7 @@ const processingMode = computed<number>({
             <span class="mode-btn-label">Raw</span>
           </v-btn>
           <v-btn
-            color="lightBlue"
+            color="buttonPassive"
             class="fill w-50"
             :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
           >
diff --git a/photon-client/src/components/dashboard/tabs/TargetsTab.vue b/photon-client/src/components/dashboard/tabs/TargetsTab.vue
index 4c5263b78b..fc2c2b59aa 100644
--- a/photon-client/src/components/dashboard/tabs/TargetsTab.vue
+++ b/photon-client/src/components/dashboard/tabs/TargetsTab.vue
@@ -204,7 +204,7 @@ const resetCurrentBuffer = () => {
           {{ useStateStore().currentMultitagBuffer?.length || "NaN" }}/100 samples
         </v-card-subtitle>
         <v-btn
-          color="photonYellow"
+          color="buttonActive"
           class="mb-4 mt-1"
           style="width: min-content"
           :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
diff --git a/photon-client/src/components/settings/DeviceControlCard.vue b/photon-client/src/components/settings/DeviceControlCard.vue
index 73ad650f80..25bacd26f2 100644
--- a/photon-client/src/components/settings/DeviceControlCard.vue
+++ b/photon-client/src/components/settings/DeviceControlCard.vue
@@ -236,7 +236,7 @@ const nukePhotonConfigDirectory = () => {
       <v-row>
         <v-col cols="12" lg="4" md="6">
           <v-btn
-            color="photonYellow"
+            color="buttonActive"
             @click="restartProgram"
             :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
           >
@@ -246,7 +246,7 @@ const nukePhotonConfigDirectory = () => {
         </v-col>
         <v-col cols="12" lg="4" md="6">
           <v-btn
-            color="photonYellow"
+            color="buttonActive"
             @click="restartDevice"
             :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
           >
@@ -256,7 +256,7 @@ const nukePhotonConfigDirectory = () => {
         </v-col>
         <v-col cols="12" lg="4">
           <v-btn
-            color="lightBlue"
+            color="buttonPassive"
             @click="openOfflineUpdatePrompt"
             :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
           >
@@ -269,7 +269,7 @@ const nukePhotonConfigDirectory = () => {
       <v-row>
         <v-col cols="12" sm="6">
           <v-btn
-            color="lightBlue"
+            color="buttonPassive"
             @click="() => (showImportDialog = true)"
             :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
           >
@@ -329,7 +329,7 @@ const nukePhotonConfigDirectory = () => {
         </v-col>
         <v-col cols="12" sm="6">
           <v-btn
-            color="lightBlue"
+            color="buttonPassive"
             @click="openExportSettingsPrompt"
             :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
           >
@@ -346,7 +346,7 @@ const nukePhotonConfigDirectory = () => {
         </v-col>
         <v-col cols="12" sm="6">
           <v-btn
-            color="lightBlue"
+            color="buttonPassive"
             @click="openExportLogsPrompt"
             :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
           >
@@ -365,7 +365,7 @@ const nukePhotonConfigDirectory = () => {
         </v-col>
         <v-col cols="12" sm="6">
           <v-btn
-            color="lightBlue"
+            color="buttonPassive"
             @click="useStateStore().showLogModal = true"
             :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
           >
diff --git a/photon-client/src/components/settings/NetworkingCard.vue b/photon-client/src/components/settings/NetworkingCard.vue
index 708bc621b4..1b76ce5bc1 100644
--- a/photon-client/src/components/settings/NetworkingCard.vue
+++ b/photon-client/src/components/settings/NetworkingCard.vue
@@ -248,7 +248,7 @@ watchEffect(() => {
         />
         <v-alert
           v-if="tempSettingsStruct.runNTServer"
-          color="photonYellow"
+          color="buttonActive"
           density="compact"
           text="This mode is intended for debugging and should be off for proper usage. PhotonLib will NOT work!"
           icon="mdi-information-outline"
@@ -264,7 +264,7 @@ watchEffect(() => {
         />
         <v-alert
           v-if="tempSettingsStruct.shouldPublishProto"
-          color="photonYellow"
+          color="buttonActive"
           density="compact"
           text="This mode is intended for debugging and may reduce performance; it should be off for field use."
           icon="mdi-information-outline"
diff --git a/photon-client/src/components/settings/ObjectDetectionCard.vue b/photon-client/src/components/settings/ObjectDetectionCard.vue
index f4f07dd5dc..b3db9592bd 100644
--- a/photon-client/src/components/settings/ObjectDetectionCard.vue
+++ b/photon-client/src/components/settings/ObjectDetectionCard.vue
@@ -279,7 +279,7 @@ const handleBulkImport = () => {
       <v-row>
         <v-col cols="12" sm="6">
           <v-btn
-            color="photonYellow"
+            color="buttonActive"
             class="justify-center"
             @click="() => (showImportDialog = true)"
             :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
@@ -324,7 +324,7 @@ const handleBulkImport = () => {
                     :items="['YOLOv5', 'YOLOv8', 'YOLO11']"
                   />
                   <v-btn
-                    color="photonYellow"
+                    color="buttonActive"
                     width="100%"
                     :disabled="
                       importModelFile === null ||
@@ -346,7 +346,7 @@ const handleBulkImport = () => {
         </v-col>
         <v-col cols="12" sm="6">
           <v-btn
-            color="photonYellow"
+            color="buttonActive"
             class="justify-center"
             @click="() => (showBulkImportDialog = true)"
             :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
@@ -363,7 +363,7 @@ const handleBulkImport = () => {
                 <div class="pa-5 pb-0">
                   <v-file-input v-model="importFile" variant="underlined" label="Zip File" accept=".zip" />
                   <v-btn
-                    color="photonYellow"
+                    color="buttonActive"
                     width="100%"
                     :disabled="importFile === null"
                     @click="handleBulkImport()"
@@ -379,7 +379,7 @@ const handleBulkImport = () => {
         </v-col>
         <v-col cols="12" sm="6">
           <v-btn
-            color="lightBlue"
+            color="buttonPassive"
             @click="openExportPrompt"
             :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
           >
@@ -437,7 +437,7 @@ const handleBulkImport = () => {
                   <v-btn
                     icon
                     small
-                    color="photonYellow"
+                    color="buttonActive"
                     @click="() => (showRenameDialog = { show: true, model, newName: '' })"
                     title="Rename Model"
                     :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
@@ -449,7 +449,7 @@ const handleBulkImport = () => {
                   <v-btn
                     icon
                     small
-                    color="lightBlue"
+                    color="buttonPassive"
                     @click="() => (showInfo = { show: true, model })"
                     :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
                   >
@@ -469,7 +469,7 @@ const handleBulkImport = () => {
                   <v-btn
                     :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
                     @click="confirmDeleteDialog.show = false"
-                    color="lightBlue"
+                    color="buttonPassive"
                   >
                     Cancel
                   </v-btn>
@@ -501,7 +501,7 @@ const handleBulkImport = () => {
                   >
                   <v-btn
                     :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-                    color="photonYellow"
+                    color="buttonActive"
                     @click="renameModel(showRenameDialog.model, showRenameDialog.newName)"
                     >Rename</v-btn
                   >
@@ -514,7 +514,7 @@ const handleBulkImport = () => {
               <v-card-title>Object Detection Model Info</v-card-title>
               <v-card-text class="pt-0">
                 <v-btn
-                  color="lightBlue"
+                  color="buttonPassive"
                   width="100%"
                   @click="openExportIndividualModelPrompt"
                   :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
@@ -560,7 +560,7 @@ const handleBulkImport = () => {
             </v-col>
             <v-col cols="12" md="6">
               <v-btn
-                color="photonYellow"
+                color="buttonActive"
                 style="float: right"
                 @click="openExportPrompt"
                 :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
diff --git a/photon-client/src/plugins/vuetify.ts b/photon-client/src/plugins/vuetify.ts
index 2018f25bff..4fe2c865fc 100644
--- a/photon-client/src/plugins/vuetify.ts
+++ b/photon-client/src/plugins/vuetify.ts
@@ -26,8 +26,8 @@ const DarkTheme: ThemeDefinition = {
     toggle: CommonColors.photonBlue,
     logsBackground: CommonColors.darkGray,
 
-    photonYellow: CommonColors.photonYellow,
-    lightBlue: CommonColors.lightBlue,
+    buttonActive: CommonColors.photonYellow,
+    buttonPassive: CommonColors.lightBlue,
 
     "surface-variant": "#485b70",
     "on-surface-variant": "#f0f0f0",
@@ -53,8 +53,8 @@ const LightTheme: ThemeDefinition = {
     toggle: CommonColors.lightBlue,
     logsBackground: CommonColors.lightGray,
 
-    photonYellow: CommonColors.photonYellow,
-    lightBlue: CommonColors.lightBlue,
+    buttonActive: CommonColors.photonYellow,
+    buttonPassive: CommonColors.lightBlue,
 
     "surface-variant": "#358AB0",
     "surface-light": CommonColors.photonYellow,
diff --git a/photon-client/src/views/CameraMatchingView.vue b/photon-client/src/views/CameraMatchingView.vue
index 69a0495285..0e713f9c85 100644
--- a/photon-client/src/views/CameraMatchingView.vue
+++ b/photon-client/src/views/CameraMatchingView.vue
@@ -369,7 +369,7 @@ const openExportSettingsPrompt = () => {
             <v-row>
               <v-col cols="12" md="4" class="pr-md-0 pb-0 pb-md-3">
                 <v-btn
-                  color="lightBlue"
+                  color="buttonPassive"
                   style="width: 100%"
                   :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
                   @click="
@@ -385,7 +385,7 @@ const openExportSettingsPrompt = () => {
               <v-col cols="6" md="5" class="pr-0">
                 <v-btn
                   class="text-black"
-                  color="photonYellow"
+                  color="buttonActive"
                   style="width: 100%"
                   :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
                   :loading="deactivatingModule"
@@ -455,7 +455,7 @@ const openExportSettingsPrompt = () => {
             <v-row>
               <v-col cols="12" md="4" class="pr-md-0 pb-0 pb-md-3">
                 <v-btn
-                  color="lightBlue"
+                  color="buttonPassive"
                   style="width: 100%"
                   :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
                   @click="
@@ -471,7 +471,7 @@ const openExportSettingsPrompt = () => {
               <v-col cols="6" md="5" class="pr-0">
                 <v-btn
                   class="text-black"
-                  color="photonYellow"
+                  color="buttonActive"
                   style="width: 100%"
                   :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
                   :loading="activatingModule"
@@ -514,7 +514,7 @@ const openExportSettingsPrompt = () => {
             <v-row>
               <v-col cols="6" class="pr-0">
                 <v-btn
-                  color="lightBlue"
+                  color="buttonPassive"
                   style="width: 100%"
                   @click="setCameraView(camera, false)"
                   :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
@@ -525,7 +525,7 @@ const openExportSettingsPrompt = () => {
               <v-col cols="6">
                 <v-btn
                   class="text-black"
-                  color="photonYellow"
+                  color="buttonActive"
                   style="width: 100%"
                   :loading="assigningCamera"
                   :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
@@ -570,7 +570,7 @@ const openExportSettingsPrompt = () => {
         <v-card-text v-else-if="!camerasMatch(getMatchedDevice(viewingCamera[0]), viewingCamera[0])">
           <v-alert
             class="mb-3"
-            color="photonYellow"
+            color="buttonActive"
             density="compact"
             text="A different camera may have been connected to this device! Compare the following information carefully."
             icon="mdi-information-outline"
diff --git a/photon-client/src/views/DashboardView.vue b/photon-client/src/views/DashboardView.vue
index 50128f4ef1..8729416b78 100644
--- a/photon-client/src/views/DashboardView.vue
+++ b/photon-client/src/views/DashboardView.vue
@@ -126,7 +126,7 @@ const showCameraSetupDialog = ref(useCameraSettingsStore().needsCameraConfigurat
         <v-card-title>Set up some cameras to get started!</v-card-title>
         <v-card-text class="pt-0">
           No cameras activated - head to the
-          <router-link to="/cameraConfigs" color="photonYellow">camera matching tab</router-link> to set some up!
+          <router-link to="/cameraConfigs" color="buttonActive">camera matching tab</router-link> to set some up!
         </v-card-text>
       </v-card>
     </v-dialog>
@@ -139,7 +139,7 @@ a:link {
   text-decoration: none;
 }
 a:visited {
-  color: rgb(var(--v-theme-photonYellow));
+  color: rgb(var(--v-theme-buttonActive));
   background-color: transparent;
   text-decoration: none;
 }

From ade2ec463873c85bb915ea3efc939b34ca2cd6f8 Mon Sep 17 00:00:00 2001
From: Devolian <devondoyle@outlook.com>
Date: Sun, 3 Aug 2025 19:25:20 -0400
Subject: [PATCH 13/16] revert snackbar variant

---
 photon-client/src/components/app/photon-error-snackbar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/photon-client/src/components/app/photon-error-snackbar.vue b/photon-client/src/components/app/photon-error-snackbar.vue
index 0d291b3e39..95f9cdeaf3 100644
--- a/photon-client/src/components/app/photon-error-snackbar.vue
+++ b/photon-client/src/components/app/photon-error-snackbar.vue
@@ -9,7 +9,7 @@ const theme = useTheme();
   <v-snackbar
     v-model="useStateStore().snackbarData.show"
     location="top"
-    :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
+    variant="elevated"
     :color="useStateStore().snackbarData.color"
     :timeout="useStateStore().snackbarData.timeout"
   >

From aa1985b66f613e9cda7a7b4729147810e9e6ba9a Mon Sep 17 00:00:00 2001
From: Devolian <devondoyle@outlook.com>
Date: Sun, 3 Aug 2025 20:15:46 -0400
Subject: [PATCH 14/16] lint etc

---
 .../src/assets/styles/variables.scss          |  2 +-
 .../components/app/photon-error-snackbar.vue  |  3 --
 .../cameras/CameraCalibrationInfoCard.vue     |  4 +--
 .../components/cameras/CameraControlCard.vue  |  2 +-
 .../components/cameras/CameraSettingsCard.vue | 13 ++------
 .../dashboard/tabs/ThresholdTab.vue           |  4 +--
 .../components/settings/DeviceControlCard.vue | 22 ++++++-------
 .../settings/ObjectDetectionCard.vue          | 32 +++++++++----------
 .../src/views/CameraMatchingView.vue          | 11 ++-----
 9 files changed, 39 insertions(+), 54 deletions(-)

diff --git a/photon-client/src/assets/styles/variables.scss b/photon-client/src/assets/styles/variables.scss
index f27a47f664..77850717fb 100644
--- a/photon-client/src/assets/styles/variables.scss
+++ b/photon-client/src/assets/styles/variables.scss
@@ -71,4 +71,4 @@ html {
 
 .rounded-12 {
   border-radius: 12px;
-}
\ No newline at end of file
+}
diff --git a/photon-client/src/components/app/photon-error-snackbar.vue b/photon-client/src/components/app/photon-error-snackbar.vue
index 95f9cdeaf3..d654d53435 100644
--- a/photon-client/src/components/app/photon-error-snackbar.vue
+++ b/photon-client/src/components/app/photon-error-snackbar.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
 import { useStateStore } from "@/stores/StateStore";
-import { useTheme } from "vuetify";
-
-const theme = useTheme();
 </script>
 
 <template>
diff --git a/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue b/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue
index a87c01607f..166820227d 100644
--- a/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue
+++ b/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue
@@ -101,8 +101,8 @@ const calibrationImageURL = (index: number) =>
         <v-btn
           color="buttonPassive"
           style="width: 100%"
-          @click="openUploadPhotonCalibJsonPrompt"
           :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          @click="openUploadPhotonCalibJsonPrompt"
         >
           <v-icon start size="large"> mdi-import</v-icon>
           <span>Import</span>
@@ -120,8 +120,8 @@ const calibrationImageURL = (index: number) =>
           color="buttonPassive"
           :disabled="!currentCalibrationCoeffs"
           style="width: 100%"
-          @click="openExportCalibrationPrompt"
           :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          @click="openExportCalibrationPrompt"
         >
           <v-icon start size="large">mdi-export</v-icon>
           <span>Export</span>
diff --git a/photon-client/src/components/cameras/CameraControlCard.vue b/photon-client/src/components/cameras/CameraControlCard.vue
index bae2d1147e..98b4fb3518 100644
--- a/photon-client/src/components/cameras/CameraControlCard.vue
+++ b/photon-client/src/components/cameras/CameraControlCard.vue
@@ -99,8 +99,8 @@ const expanded = ref([]);
     <v-card-text class="pt-0">
       <v-btn
         color="buttonPassive"
-        @click="fetchSnapshots"
         :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+        @click="fetchSnapshots"
       >
         <v-icon start class="open-icon" size="large"> mdi-folder </v-icon>
         <span class="open-label">Show Saved Snapshots</span>
diff --git a/photon-client/src/components/cameras/CameraSettingsCard.vue b/photon-client/src/components/cameras/CameraSettingsCard.vue
index cca8532b6f..18d760bcf7 100644
--- a/photon-client/src/components/cameras/CameraSettingsCard.vue
+++ b/photon-client/src/components/cameras/CameraSettingsCard.vue
@@ -4,7 +4,7 @@ import PvInput from "@/components/common/pv-input.vue";
 import PvNumberInput from "@/components/common/pv-number-input.vue";
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import { useStateStore } from "@/stores/StateStore";
-import { computed, inject, ref, watchEffect } from "vue";
+import { computed, ref, watchEffect } from "vue";
 import { type CameraSettingsChangeRequest, ValidQuirks } from "@/types/SettingTypes";
 import axios from "axios";
 import { useTheme } from "vuetify";
@@ -112,13 +112,6 @@ watchEffect(() => {
 });
 
 const showDeleteCamera = ref(false);
-
-const address = inject<string>("backendHost");
-const exportSettings = ref();
-const openExportSettingsPrompt = () => {
-  exportSettings.value.click();
-};
-
 const yesDeleteMySettingsText = ref("");
 const deletingCamera = ref(false);
 const deleteThisCamera = () => {
@@ -207,8 +200,8 @@ const wrappedCameras = computed<SelectItem[]>(() =>
           size="small"
           color="primary"
           :disabled="!settingsHaveChanged()"
-          @click="saveCameraSettings"
           :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          @click="saveCameraSettings"
         >
           <v-icon start size="large"> mdi-content-save </v-icon>
           Save Changes
@@ -219,8 +212,8 @@ const wrappedCameras = computed<SelectItem[]>(() =>
           block
           size="small"
           color="error"
-          @click="() => (showDeleteCamera = true)"
           :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          @click="() => (showDeleteCamera = true)"
         >
           <v-icon start size="large"> mdi-trash-can-outline </v-icon>
           Delete Camera
diff --git a/photon-client/src/components/dashboard/tabs/ThresholdTab.vue b/photon-client/src/components/dashboard/tabs/ThresholdTab.vue
index 910630111f..e59c78f1be 100644
--- a/photon-client/src/components/dashboard/tabs/ThresholdTab.vue
+++ b/photon-client/src/components/dashboard/tabs/ThresholdTab.vue
@@ -204,8 +204,8 @@ const interactiveCols = computed(() =>
               class="text-black"
               size="small"
               block
-              @click="enableColorPicking(1)"
               :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+              @click="enableColorPicking(1)"
             >
               <v-icon start size="large"> mdi-plus-minus </v-icon>
               {{ useCameraSettingsStore().currentPipelineSettings.hueInverted ? "Exclude" : "Set to" }} Average
@@ -232,8 +232,8 @@ const interactiveCols = computed(() =>
               color="primary"
               class="text-black"
               size="small"
-              @click="disableColorPicking"
               :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+              @click="disableColorPicking"
             >
               Cancel
             </v-btn>
diff --git a/photon-client/src/components/settings/DeviceControlCard.vue b/photon-client/src/components/settings/DeviceControlCard.vue
index 25bacd26f2..76783f6dcb 100644
--- a/photon-client/src/components/settings/DeviceControlCard.vue
+++ b/photon-client/src/components/settings/DeviceControlCard.vue
@@ -237,8 +237,8 @@ const nukePhotonConfigDirectory = () => {
         <v-col cols="12" lg="4" md="6">
           <v-btn
             color="buttonActive"
-            @click="restartProgram"
             :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            @click="restartProgram"
           >
             <v-icon start class="open-icon" size="large"> mdi-restart </v-icon>
             <span class="open-label">Restart PhotonVision</span>
@@ -247,8 +247,8 @@ const nukePhotonConfigDirectory = () => {
         <v-col cols="12" lg="4" md="6">
           <v-btn
             color="buttonActive"
-            @click="restartDevice"
             :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            @click="restartDevice"
           >
             <v-icon start class="open-icon" size="large"> mdi-restart-alert </v-icon>
             <span class="open-label">Restart Device</span>
@@ -257,8 +257,8 @@ const nukePhotonConfigDirectory = () => {
         <v-col cols="12" lg="4">
           <v-btn
             color="buttonPassive"
-            @click="openOfflineUpdatePrompt"
             :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            @click="openOfflineUpdatePrompt"
           >
             <v-icon start class="open-icon" size="large"> mdi-upload </v-icon>
             <span class="open-label">Offline Update</span>
@@ -270,8 +270,8 @@ const nukePhotonConfigDirectory = () => {
         <v-col cols="12" sm="6">
           <v-btn
             color="buttonPassive"
-            @click="() => (showImportDialog = true)"
             :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            @click="() => (showImportDialog = true)"
           >
             <v-icon start class="open-icon" size="large"> mdi-import </v-icon>
             <span class="open-label">Import Settings</span>
@@ -306,8 +306,8 @@ const nukePhotonConfigDirectory = () => {
                     style="width: 100%"
                   />
                   <v-file-input
-                    class="pb-5"
                     v-model="importFile"
+                    class="pb-5"
                     variant="underlined"
                     :disabled="importType === undefined"
                     :error-messages="importType === undefined ? 'Settings type not selected' : ''"
@@ -316,8 +316,8 @@ const nukePhotonConfigDirectory = () => {
                   <v-btn
                     color="primary"
                     :disabled="importFile === null"
-                    @click="handleSettingsImport"
                     :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                    @click="handleSettingsImport"
                   >
                     <v-icon start class="open-icon"> mdi-import </v-icon>
                     <span class="open-label">Import Settings</span>
@@ -330,8 +330,8 @@ const nukePhotonConfigDirectory = () => {
         <v-col cols="12" sm="6">
           <v-btn
             color="buttonPassive"
-            @click="openExportSettingsPrompt"
             :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            @click="openExportSettingsPrompt"
           >
             <v-icon start class="open-icon" size="large"> mdi-export </v-icon>
             <span class="open-label">Export Settings</span>
@@ -347,8 +347,8 @@ const nukePhotonConfigDirectory = () => {
         <v-col cols="12" sm="6">
           <v-btn
             color="buttonPassive"
-            @click="openExportLogsPrompt"
             :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            @click="openExportLogsPrompt"
           >
             <v-icon start class="open-icon" size="large"> mdi-download </v-icon>
             <span class="open-label">Download logs</span>
@@ -366,8 +366,8 @@ const nukePhotonConfigDirectory = () => {
         <v-col cols="12" sm="6">
           <v-btn
             color="buttonPassive"
-            @click="useStateStore().showLogModal = true"
             :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            @click="useStateStore().showLogModal = true"
           >
             <v-icon start class="open-icon" size="large"> mdi-eye </v-icon>
             <span class="open-label">View logs</span>
@@ -378,8 +378,8 @@ const nukePhotonConfigDirectory = () => {
         <v-col cols="12">
           <v-btn
             color="error"
-            @click="() => (showFactoryReset = true)"
             :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            @click="() => (showFactoryReset = true)"
           >
             <v-icon start class="open-icon" size="large"> mdi-trash-can-outline </v-icon>
             <span class="open-icon"> Factory Reset PhotonVision </span>
@@ -405,8 +405,8 @@ const nukePhotonConfigDirectory = () => {
               <v-btn
                 color="primary"
                 style="float: right"
-                @click="openExportSettingsPrompt"
                 :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                @click="openExportSettingsPrompt"
               >
                 <v-icon start class="open-icon" size="large"> mdi-export </v-icon>
                 <span class="open-label">Backup Settings</span>
diff --git a/photon-client/src/components/settings/ObjectDetectionCard.vue b/photon-client/src/components/settings/ObjectDetectionCard.vue
index b3db9592bd..db4147d8bb 100644
--- a/photon-client/src/components/settings/ObjectDetectionCard.vue
+++ b/photon-client/src/components/settings/ObjectDetectionCard.vue
@@ -21,7 +21,7 @@ const showRenameDialog = ref({
 const address = inject<string>("backendHost");
 
 const importModelFile = ref<File | null>(null);
-const importLabels = ref<String | null>(null);
+const importLabels = ref<string | null>(null);
 const importHeight = ref<number | null>(null);
 const importWidth = ref<number | null>(null);
 const importVersion = ref<string | null>(null);
@@ -223,7 +223,7 @@ const handleBulkImport = () => {
   formData.append("data", importFile.value);
 
   axios
-    .post(`/objectdetection/bulkimport`, formData, {
+    .post("/objectdetection/bulkimport", formData, {
       headers: { "Content-Type": "multipart/form-data" },
       onUploadProgress: ({ progress }) => {
         const uploadPercentage = (progress || 0) * 100.0;
@@ -281,8 +281,8 @@ const handleBulkImport = () => {
           <v-btn
             color="buttonActive"
             class="justify-center"
-            @click="() => (showImportDialog = true)"
             :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            @click="() => (showImportDialog = true)"
           >
             <v-icon start class="open-icon"> mdi-import </v-icon>
             <span class="open-label">Import Model</span>
@@ -333,8 +333,8 @@ const handleBulkImport = () => {
                       importHeight === null ||
                       importVersion === null
                     "
-                    @click="handleImport()"
                     :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                    @click="handleImport()"
                   >
                     <v-icon start class="open-icon" size="large"> mdi-import </v-icon>
                     <span class="open-label">Import Object Detection Model</span>
@@ -348,8 +348,8 @@ const handleBulkImport = () => {
           <v-btn
             color="buttonActive"
             class="justify-center"
-            @click="() => (showBulkImportDialog = true)"
             :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            @click="() => (showBulkImportDialog = true)"
           >
             <v-icon start class="open-icon"> mdi-import </v-icon>
             <span class="open-label">Bulk Import</span>
@@ -366,8 +366,8 @@ const handleBulkImport = () => {
                     color="buttonActive"
                     width="100%"
                     :disabled="importFile === null"
-                    @click="handleBulkImport()"
                     :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                    @click="handleBulkImport()"
                   >
                     <v-icon start class="open-icon" size="large"> mdi-import </v-icon>
                     <span class="open-label">Bulk Import</span>
@@ -380,8 +380,8 @@ const handleBulkImport = () => {
         <v-col cols="12" sm="6">
           <v-btn
             color="buttonPassive"
-            @click="openExportPrompt"
             :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            @click="openExportPrompt"
           >
             <v-icon start class="open-icon"> mdi-export </v-icon>
             <span class="open-label">Export Models</span>
@@ -397,8 +397,8 @@ const handleBulkImport = () => {
         <v-col cols="12" sm="6">
           <v-btn
             color="error"
-            @click="() => (showNukeDialog = true)"
             :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            @click="() => (showNukeDialog = true)"
           >
             <v-icon left class="open-icon"> mdi-trash </v-icon>
             <span class="open-label">Clear and reset models</span>
@@ -426,9 +426,9 @@ const handleBulkImport = () => {
                     icon
                     small
                     color="error"
-                    @click="() => (confirmDeleteDialog = { show: true, model })"
                     title="Delete Model"
                     :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                    @click="() => (confirmDeleteDialog = { show: true, model })"
                   >
                     <v-icon size="large">mdi-trash-can-outline</v-icon>
                   </v-btn>
@@ -438,9 +438,9 @@ const handleBulkImport = () => {
                     icon
                     small
                     color="buttonActive"
-                    @click="() => (showRenameDialog = { show: true, model, newName: '' })"
                     title="Rename Model"
                     :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                    @click="() => (showRenameDialog = { show: true, model, newName: '' })"
                   >
                     <v-icon size="large">mdi-pencil</v-icon>
                   </v-btn>
@@ -450,8 +450,8 @@ const handleBulkImport = () => {
                     icon
                     small
                     color="buttonPassive"
-                    @click="() => (showInfo = { show: true, model })"
                     :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                    @click="() => (showInfo = { show: true, model })"
                   >
                     <v-icon size="large">mdi-information</v-icon>
                   </v-btn>
@@ -468,8 +468,8 @@ const handleBulkImport = () => {
                 <v-card-actions class="pt-5 pb-0 pr-0" style="justify-content: flex-end">
                   <v-btn
                     :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-                    @click="confirmDeleteDialog.show = false"
                     color="buttonPassive"
+                    @click="confirmDeleteDialog.show = false"
                   >
                     Cancel
                   </v-btn>
@@ -495,8 +495,8 @@ const handleBulkImport = () => {
                 <v-card-actions class="pt-5 pb-0 pr-0" style="justify-content: flex-end">
                   <v-btn
                     :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-                    @click="showRenameDialog.show = false"
                     color="error"
+                    @click="showRenameDialog.show = false"
                     >Cancel</v-btn
                   >
                   <v-btn
@@ -516,8 +516,8 @@ const handleBulkImport = () => {
                 <v-btn
                   color="buttonPassive"
                   width="100%"
-                  @click="openExportIndividualModelPrompt"
                   :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                  @click="openExportIndividualModelPrompt"
                 >
                   <v-icon left class="open-icon" size="large"> mdi-export </v-icon>
                   <span class="open-label">Export Model</span>
@@ -562,8 +562,8 @@ const handleBulkImport = () => {
               <v-btn
                 color="buttonActive"
                 style="float: right"
-                @click="openExportPrompt"
                 :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                @click="openExportPrompt"
               >
                 <v-icon start class="open-icon" size="large"> mdi-export </v-icon>
                 <span class="open-label">Backup Models</span>
@@ -591,8 +591,8 @@ const handleBulkImport = () => {
             color="error"
             width="100%"
             :disabled="yesDeleteMyModelsText.toLowerCase() !== expected.toLowerCase()"
-            @click="nukeModels"
             :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            @click="nukeModels"
           >
             <v-icon start class="open-icon" size="large"> mdi-trash-can-outline </v-icon>
             <span class="open-label">
diff --git a/photon-client/src/views/CameraMatchingView.vue b/photon-client/src/views/CameraMatchingView.vue
index 0e713f9c85..35d8401aa4 100644
--- a/photon-client/src/views/CameraMatchingView.vue
+++ b/photon-client/src/views/CameraMatchingView.vue
@@ -22,7 +22,6 @@ import { useTheme } from "vuetify";
 const theme = useTheme();
 
 const formatUrl = (port) => `http://${inject("backendHostname")}:${port}/stream.mjpg`;
-const host = inject<string>("backendHost");
 
 const activatingModule = ref(false);
 const activateModule = (moduleUniqueName: string) => {
@@ -275,10 +274,6 @@ const setCameraDeleting = (camera: UiCameraConfiguration | WebsocketCameraSettin
   cameraToDelete.value = camera;
 };
 const yesDeleteMySettingsText = ref("");
-const exportSettings = ref();
-const openExportSettingsPrompt = () => {
-  exportSettings.value.click();
-};
 </script>
 
 <template>
@@ -399,8 +394,8 @@ const openExportSettingsPrompt = () => {
                   class="pa-0"
                   color="error"
                   style="width: 100%"
-                  @click="setCameraDeleting(module)"
                   :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                  @click="setCameraDeleting(module)"
                 >
                   <v-icon size="x-large">mdi-trash-can-outline</v-icon>
                 </v-btn>
@@ -485,8 +480,8 @@ const openExportSettingsPrompt = () => {
                   class="pa-0"
                   color="error"
                   style="width: 100%"
-                  @click="setCameraDeleting(module)"
                   :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                  @click="setCameraDeleting(module)"
                 >
                   <v-icon size="x-large">mdi-trash-can-outline</v-icon>
                 </v-btn>
@@ -516,8 +511,8 @@ const openExportSettingsPrompt = () => {
                 <v-btn
                   color="buttonPassive"
                   style="width: 100%"
-                  @click="setCameraView(camera, false)"
                   :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                  @click="setCameraView(camera, false)"
                 >
                   <span>Details</span>
                 </v-btn>

From a28fe7ef4b3c4f7f34ef0b3f13fa034b89229e40 Mon Sep 17 00:00:00 2001
From: Devolian <devondoyle@outlook.com>
Date: Sun, 3 Aug 2025 21:57:57 -0400
Subject: [PATCH 15/16] simplify icon color

---
 photon-client/src/components/app/photon-sidebar.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/photon-client/src/components/app/photon-sidebar.vue b/photon-client/src/components/app/photon-sidebar.vue
index 8d55bd04bb..4801f04464 100644
--- a/photon-client/src/components/app/photon-sidebar.vue
+++ b/photon-client/src/components/app/photon-sidebar.vue
@@ -103,11 +103,9 @@ const renderCompact = computed<boolean>(() => compact.value || !mdAndUp.value);
                     : 'mdi-robot-off'
               "
               :color="
-                useSettingsStore().network.runNTServer
+                useSettingsStore().network.runNTServer || useStateStore().ntConnectionStatus.connected
                   ? '#00ff00'
-                  : useStateStore().ntConnectionStatus.connected
-                    ? '#00ff00'
-                    : '#ff0000'
+                  : '#ff0000'
               "
             />
           </template>

From 98901afffcc73f95a898043f598863ca1967f51a Mon Sep 17 00:00:00 2001
From: Devolian <devondoyle@outlook.com>
Date: Sun, 3 Aug 2025 21:59:43 -0400
Subject: [PATCH 16/16] wtf

---
 photon-client/src/components/settings/MetricsCard.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/photon-client/src/components/settings/MetricsCard.vue b/photon-client/src/components/settings/MetricsCard.vue
index ef1b9b3151..952e7c4ad0 100644
--- a/photon-client/src/components/settings/MetricsCard.vue
+++ b/photon-client/src/components/settings/MetricsCard.vue
@@ -13,7 +13,6 @@ const generalMetrics = computed<MetricItem[]>(() => {
     { header: "Version", value: useSettingsStore().general.version || "Unknown" },
     { header: "Hardware Model", value: useSettingsStore().general.hardwareModel || "Unknown" },
     { header: "Platform", value: useSettingsStore().general.hardwarePlatform || "Unknown" },
-
     { header: "GPU Acceleration", value: useSettingsStore().general.gpuAcceleration || "Unknown" }
   ];