diff --git a/photon-client/package.json b/photon-client/package.json
index cf2485b2d0..1dd42013c8 100644
--- a/photon-client/package.json
+++ b/photon-client/package.json
@@ -18,6 +18,7 @@
     "@mdi/font": "^7.4.47",
     "@msgpack/msgpack": "^3.1.2",
     "axios": "^1.11.0",
+    "echarts": "^6.0.0",
     "jspdf": "^3.0.1",
     "pinia": "^3.0.2",
     "three": "^0.178.0",
diff --git a/photon-client/pnpm-lock.yaml b/photon-client/pnpm-lock.yaml
index b93de81445..ace715fd64 100644
--- a/photon-client/pnpm-lock.yaml
+++ b/photon-client/pnpm-lock.yaml
@@ -20,6 +20,9 @@ importers:
       axios:
         specifier: ^1.11.0
         version: 1.11.0
+      echarts:
+        specifier: ^6.0.0
+        version: 6.0.0
       jspdf:
         specifier: ^3.0.1
         version: 3.0.1
@@ -840,6 +843,9 @@ packages:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
 
+  echarts@6.0.0:
+    resolution: {integrity: sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==}
+
   entities@4.5.0:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
@@ -1385,6 +1391,9 @@ packages:
     peerDependencies:
       typescript: '>=4.8.4'
 
+  tslib@2.3.0:
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
+
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
@@ -1525,6 +1534,9 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
+  zrender@6.0.0:
+    resolution: {integrity: sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==}
+
 snapshots:
 
   '@babel/helper-string-parser@7.27.1': {}
@@ -2035,7 +2047,7 @@ snapshots:
       typescript: 5.8.3
       vue: 3.5.13(typescript@5.8.3)
 
-  '@vuetify/loader-shared@2.1.0(vue@3.5.13(typescript@5.8.3))(vuetify@3.8.3)':
+  '@vuetify/loader-shared@2.1.0(vue@3.5.13(typescript@5.8.3))(vuetify@3.8.3(typescript@5.8.3)(vite-plugin-vuetify@2.1.1)(vue@3.5.13(typescript@5.8.3)))':
     dependencies:
       upath: 2.0.1
       vue: 3.5.13(typescript@5.8.3)
@@ -2188,6 +2200,11 @@ snapshots:
       es-errors: 1.3.0
       gopd: 1.2.0
 
+  echarts@6.0.0:
+    dependencies:
+      tslib: 2.3.0
+      zrender: 6.0.0
+
   entities@4.5.0: {}
 
   es-define-property@1.0.1: {}
@@ -2746,6 +2763,8 @@ snapshots:
     dependencies:
       typescript: 5.8.3
 
+  tslib@2.3.0: {}
+
   tslib@2.8.1: {}
 
   type-check@0.4.0:
@@ -2781,7 +2800,7 @@ snapshots:
 
   vite-plugin-vuetify@2.1.1(vite@7.0.5(@types/node@22.15.14)(sass@1.89.2))(vue@3.5.13(typescript@5.8.3))(vuetify@3.8.3):
     dependencies:
-      '@vuetify/loader-shared': 2.1.0(vue@3.5.13(typescript@5.8.3))(vuetify@3.8.3)
+      '@vuetify/loader-shared': 2.1.0(vue@3.5.13(typescript@5.8.3))(vuetify@3.8.3(typescript@5.8.3)(vite-plugin-vuetify@2.1.1)(vue@3.5.13(typescript@5.8.3)))
       debug: 4.4.0
       upath: 2.0.1
       vite: 7.0.5(@types/node@22.15.14)(sass@1.89.2)
@@ -2851,3 +2870,7 @@ snapshots:
   xml-name-validator@4.0.0: {}
 
   yocto-queue@0.1.0: {}
+
+  zrender@6.0.0:
+    dependencies:
+      tslib: 2.3.0
diff --git a/photon-client/src/components/settings/DeviceCard.vue b/photon-client/src/components/settings/DeviceCard.vue
new file mode 100644
index 0000000000..abd8b31dc5
--- /dev/null
+++ b/photon-client/src/components/settings/DeviceCard.vue
@@ -0,0 +1,662 @@
+@ -0,0 +1,565 @@
+<script setup lang="ts">
+import { inject, computed, onBeforeMount, ref, watch } from "vue";
+import { useStateStore } from "@/stores/StateStore";
+import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
+import PvSelect from "@/components/common/pv-select.vue";
+import PvInput from "@/components/common/pv-input.vue";
+import axios from "axios";
+import MetricsChart from "./MetricsChart.vue";
+import { useTheme } from "vuetify";
+
+const theme = useTheme();
+
+const restartProgram = () => {
+  axios
+    .post("/utils/restartProgram")
+    .then(() => {
+      useStateStore().showSnackbarMessage({ message: "Successfully sent program restart request", color: "success" });
+    })
+    .catch((error) => {
+      // This endpoint always return 204 regardless of outcome
+      if (error.request) {
+        useStateStore().showSnackbarMessage({
+          message: "Error while trying to process the request! The backend didn't respond.",
+          color: "error"
+        });
+      } else {
+        useStateStore().showSnackbarMessage({
+          message: "An error occurred while trying to process the request.",
+          color: "error"
+        });
+      }
+    });
+};
+
+const restartDevice = () => {
+  axios
+    .post("/utils/restartDevice")
+    .then(() => {
+      useStateStore().showSnackbarMessage({
+        message: "Successfully dispatched the restart command. It isn't confirmed if a device restart will occur.",
+        color: "success"
+      });
+    })
+    .catch((error) => {
+      if (error.response) {
+        useStateStore().showSnackbarMessage({
+          message: "The backend is unable to fulfil the request to restart the device.",
+          color: "error"
+        });
+      } else if (error.request) {
+        useStateStore().showSnackbarMessage({
+          message: "Error while trying to process the request! The backend didn't respond.",
+          color: "error"
+        });
+      } else {
+        useStateStore().showSnackbarMessage({
+          message: "An error occurred while trying to process the request.",
+          color: "error"
+        });
+      }
+    });
+};
+
+const address = inject<string>("backendHost");
+
+const offlineUpdate = ref();
+const openOfflineUpdatePrompt = () => {
+  offlineUpdate.value.click();
+};
+const handleOfflineUpdate = () => {
+  const files = offlineUpdate.value.files;
+  if (files.length === 0) return;
+
+  const formData = new FormData();
+  formData.append("jarData", files[0]);
+
+  useStateStore().showSnackbarMessage({
+    message: "New Software Upload in Progress...",
+    color: "secondary",
+    timeout: -1
+  });
+
+  axios
+    .post("/utils/offlineUpdate", formData, {
+      headers: { "Content-Type": "multipart/form-data" },
+      onUploadProgress: ({ progress }) => {
+        const uploadPercentage = (progress || 0) * 100.0;
+        if (uploadPercentage < 99.5) {
+          useStateStore().showSnackbarMessage({
+            message: "New Software Upload in Process, " + uploadPercentage.toFixed(2) + "% complete",
+            color: "secondary",
+            timeout: -1
+          });
+        } else {
+          useStateStore().showSnackbarMessage({
+            message: "Installing uploaded software...",
+            color: "secondary",
+            timeout: -1
+          });
+        }
+      }
+    })
+    .then((response) => {
+      useStateStore().showSnackbarMessage({ message: response.data.text || response.data, color: "success" });
+    })
+    .catch((error) => {
+      if (error.response) {
+        useStateStore().showSnackbarMessage({
+          color: "error",
+          message: error.response.data.text || error.response.data
+        });
+      } else if (error.request) {
+        useStateStore().showSnackbarMessage({
+          color: "error",
+          message: "Error while trying to process the request! The backend didn't respond."
+        });
+      } else {
+        useStateStore().showSnackbarMessage({
+          color: "error",
+          message: "An error occurred while trying to process the request."
+        });
+      }
+    });
+};
+
+const exportLogFile = ref();
+const openExportLogsPrompt = () => {
+  exportLogFile.value.click();
+};
+
+const exportSettings = ref();
+const openExportSettingsPrompt = () => {
+  exportSettings.value.click();
+};
+
+enum ImportType {
+  AllSettings,
+  HardwareConfig,
+  HardwareSettings,
+  NetworkConfig,
+  ApriltagFieldLayout
+}
+
+const showImportDialog = ref(false);
+const importType = ref<ImportType | undefined>(undefined);
+const importFile = ref<File | null>(null);
+
+const handleSettingsImport = () => {
+  if (importType.value === undefined || importFile.value === null) return;
+
+  const formData = new FormData();
+  formData.append("data", importFile.value);
+
+  let settingsEndpoint: string;
+  switch (importType.value) {
+    case ImportType.HardwareConfig:
+      settingsEndpoint = "/hardwareConfig";
+      break;
+    case ImportType.HardwareSettings:
+      settingsEndpoint = "/hardwareSettings";
+      break;
+    case ImportType.NetworkConfig:
+      settingsEndpoint = "/networkConfig";
+      break;
+    case ImportType.ApriltagFieldLayout:
+      settingsEndpoint = "/aprilTagFieldLayout";
+      break;
+    default:
+    case ImportType.AllSettings:
+      settingsEndpoint = "";
+      break;
+  }
+
+  axios
+    .post(`/settings${settingsEndpoint}`, formData, { headers: { "Content-Type": "multipart/form-data" } })
+    .then((response) => {
+      useStateStore().showSnackbarMessage({ message: response.data.text || response.data, color: "success" });
+    })
+    .catch((error) => {
+      if (error.response) {
+        useStateStore().showSnackbarMessage({
+          color: "error",
+          message: error.response.data.text || error.response.data
+        });
+      } else if (error.request) {
+        useStateStore().showSnackbarMessage({
+          color: "error",
+          message: "Error while trying to process the request! The backend didn't respond."
+        });
+      } else {
+        useStateStore().showSnackbarMessage({
+          color: "error",
+          message: "An error occurred while trying to process the request."
+        });
+      }
+    });
+
+  showImportDialog.value = false;
+  importType.value = undefined;
+  importFile.value = null;
+};
+
+const showFactoryReset = ref(false);
+const expected = "Delete Everything";
+const yesDeleteMySettingsText = ref("");
+const nukePhotonConfigDirectory = () => {
+  axios
+    .post("/utils/nukeConfigDirectory")
+    .then(() => {
+      useStateStore().showSnackbarMessage({
+        message: "Successfully dispatched the reset command. Waiting for backend to start back up",
+        color: "success"
+      });
+    })
+    .catch((error) => {
+      if (error.response) {
+        useStateStore().showSnackbarMessage({
+          message: "The backend is unable to fulfill the request to reset the device.",
+          color: "error"
+        });
+      } else if (error.request) {
+        useStateStore().showSnackbarMessage({
+          message: "Error while trying to process the request! The backend didn't respond.",
+          color: "error"
+        });
+      } else {
+        useStateStore().showSnackbarMessage({
+          message: "An error occurred while trying to process the request.",
+          color: "error"
+        });
+      }
+    });
+  showFactoryReset.value = false;
+};
+
+interface MetricItem {
+  header: string;
+  value?: string;
+}
+
+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: "GPU Acceleration", value: useSettingsStore().general.gpuAcceleration || "Unknown" }
+  ];
+
+  if (!useSettingsStore().network.networkingDisabled) {
+    stats.push({ header: "IP Address", value: useSettingsStore().metrics.ipAddress || "Unknown" });
+  }
+
+  return stats;
+});
+
+// @ts-expect-error This uses Intl.DurationFormat which is newly implemented and not available in TS.
+const durationFormatter = new Intl.DurationFormat("en", { style: "narrow" });
+const platformMetrics = computed<MetricItem[]>(() => {
+  const metrics = useSettingsStore().metrics;
+  const stats = [
+    {
+      header: "Uptime",
+      value: (() => {
+        const seconds = metrics.uptime;
+        if (seconds === undefined) return "Unknown";
+
+        const days = Math.floor(seconds / 86400);
+        const hours = Math.floor((seconds % 86400) / 3600);
+        const minutes = Math.floor((seconds % 3600) / 60);
+        const secs = Math.floor(seconds % 60);
+
+        return durationFormatter.format({
+          days: days,
+          hours: hours,
+          minutes: minutes,
+          seconds: secs
+        });
+      })()
+    }
+  ];
+
+  if (metrics.npuUsage && metrics.npuUsage.length > 0) {
+    stats.push({
+      header: "NPU Usage",
+      value: metrics.npuUsage?.map((usage, index) => `Core${index} ${usage}%`).join(", ") || "Unknown"
+    });
+  }
+
+  if (metrics.gpuMem && metrics.gpuMemUtil && metrics.gpuMem > 0 && metrics.gpuMemUtil > 0) {
+    stats.push({
+      header: "GPU Memory Usage",
+      value: `${metrics.gpuMemUtil}MB of ${metrics.gpuMem}MB`
+    });
+  }
+
+  if (metrics.cpuThr) {
+    stats.push({
+      header: "CPU Throttling",
+      value: metrics.cpuThr.toString()
+    });
+  }
+
+  return stats;
+});
+
+const fetchMetrics = () => {
+  useSettingsStore()
+    .requestMetricsUpdate()
+    .catch((error) => {
+      if (error.request) {
+        useStateStore().showSnackbarMessage({
+          color: "error",
+          message: "Unable to fetch metrics! The backend didn't respond."
+        });
+      } else {
+        useStateStore().showSnackbarMessage({
+          color: "error",
+          message: "An error occurred while trying to fetch metrics."
+        });
+      }
+    });
+};
+
+onBeforeMount(() => {
+  fetchMetrics();
+});
+
+const cpuUsageData = ref<{ time: number; value: number }[]>([]);
+const cpuMemoryUsageData = ref<{ time: number; value: number }[]>([]);
+const cpuTempData = ref<{ time: number; value: number }[]>([]);
+const networkUsageData = ref<{ time: number; value: number }[]>([]);
+
+watch(useSettingsStore().metricsHistory, () => {
+  cpuUsageData.value = useSettingsStore().metricsHistory.map((entry) => ({
+    time: entry.time,
+    value: entry.metrics.cpuUtil ?? 0
+  }));
+  cpuMemoryUsageData.value = useSettingsStore().metricsHistory.map((entry) => ({
+    time: entry.time,
+    value: entry.metrics.ramUtil === -1 ? -1 : ((entry.metrics.ramUtil ?? 0) / (entry.metrics.ramMem ?? -1.0)) * 100
+  }));
+  cpuTempData.value = useSettingsStore().metricsHistory.map((entry) => ({
+    time: entry.time,
+    value: entry.metrics.cpuTemp ?? 0
+  }));
+  networkUsageData.value = useStateStore().networkUsageHistory.map((entry) => ({
+    time: entry.time,
+    value: entry.usage ?? 0
+  }));
+});
+</script>
+
+<template>
+  <v-row no-gutters>
+    <!-- Device control card -->
+    <v-col class="pr-3">
+      <v-card class="mb-3 rounded-12 fill-height d-flex flex-column justify-space-between" color="surface">
+        <v-card-title class="d-flex justify-space-between">
+          <span>Device Control</span>
+        </v-card-title>
+        <v-card-text class="flex-0-0">
+          <v-table>
+            <tbody>
+              <tr v-for="(item, itemIndex) in generalMetrics.concat(platformMetrics)" :key="itemIndex">
+                <td :key="itemIndex">
+                  {{ item.header }}
+                </td>
+                <td :key="itemIndex">
+                  {{ item.value }}
+                </td>
+              </tr>
+            </tbody>
+          </v-table>
+        </v-card-text>
+        <v-card-text class="pt-0 flex-0-0">
+          <v-row>
+            <v-col>
+              <v-btn
+                color="buttonPassive"
+                :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>
+              </v-btn>
+            </v-col>
+            <v-col>
+              <v-btn
+                color="buttonPassive"
+                :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>
+
+                <!-- Special hidden link that gets 'clicked' when the user exports journalctl logs -->
+                <a
+                  ref="exportLogFile"
+                  style="color: black; text-decoration: none; display: none"
+                  :href="`http://${address}/api/utils/photonvision-journalctl.txt`"
+                  download="photonvision-journalctl.txt"
+                  target="_blank"
+                />
+              </v-btn>
+            </v-col>
+          </v-row>
+        </v-card-text>
+        <v-card-text class="pt-0 flex-0-0">
+          <v-row>
+            <v-col>
+              <v-btn
+                color="buttonPassive"
+                :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>
+              </v-btn>
+            </v-col>
+            <v-col>
+              <v-btn
+                color="buttonPassive"
+                :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>
+              </v-btn>
+            </v-col>
+          </v-row>
+        </v-card-text>
+        <v-card-text class="pt-0 flex-0-0">
+          <v-row>
+            <v-col cols="12" sm="6"
+              ><v-btn
+                color="buttonActive"
+                :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 Software</span>
+              </v-btn>
+            </v-col>
+            <v-col cols="12" sm="6">
+              <v-btn
+                color="buttonPassive"
+                :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>
+              </v-btn>
+              <input
+                ref="offlineUpdate"
+                type="file"
+                accept=".jar"
+                style="display: none"
+                @change="handleOfflineUpdate"
+              />
+            </v-col>
+          </v-row>
+        </v-card-text>
+        <v-card-text class="pt-0 flex-0-0">
+          <v-row>
+            <v-col cols="12" sm="6">
+              <v-btn
+                color="buttonActive"
+                :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">Reboot Device</span>
+              </v-btn>
+            </v-col>
+            <v-col cols="12" sm="6">
+              <v-btn
+                color="error"
+                :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 </span>
+              </v-btn>
+            </v-col>
+          </v-row>
+        </v-card-text>
+      </v-card>
+    </v-col>
+
+    <!-- Device metrics card -->
+    <v-col>
+      <v-card class="mb-3 rounded-12 fill-height d-flex flex-column justify-space-between" color="surface">
+        <v-card-title class="d-flex justify-space-between">
+          <span>Device Metrics</span>
+          <v-btn variant="text" class="refresh" @click="fetchMetrics">
+            <v-icon start class="open-icon">mdi-reload</v-icon>
+            Force Refresh
+          </v-btn>
+        </v-card-title>
+        <v-card-text class="pt-0 flex-0-0 pb-2">
+          <div class="d-flex justify-space-between pb-3">
+            <span>CPU Usage</span>
+            <span>{{ Math.round(cpuUsageData.at(-1)?.value ?? 0) }}%</span>
+          </div>
+          <MetricsChart id="chart" :data="cpuUsageData" type="percentage" :min="0" :max="100" color="blue" />
+        </v-card-text>
+        <v-card-text class="pt-0 flex-0-0 pb-2">
+          <div class="d-flex justify-space-between pb-3 pt-3">
+            <span>CPU Memory Usage</span>
+            <span>{{ Math.round(cpuMemoryUsageData.at(-1)?.value ?? 0) }}%</span>
+          </div>
+          <MetricsChart id="chart" :data="cpuMemoryUsageData" type="percentage" :min="0" :max="100" color="purple" />
+        </v-card-text>
+        <v-card-text class="pt-0 flex-0-0 pb-2">
+          <div class="d-flex justify-space-between pb-3 pt-3">
+            <span>CPU Temperature</span>
+            <span>{{ Math.round(cpuTempData.at(-1)?.value ?? 0) }}°C</span>
+          </div>
+          <MetricsChart id="chart" :data="cpuTempData" type="temperature" color="red" />
+        </v-card-text>
+        <v-card-text class="pt-0 flex-0-0">
+          <div class="d-flex justify-space-between pb-3 pt-3">
+            <span>Network Usage</span>
+            <span>{{ networkUsageData.at(-1)?.value.toFixed(3) }} MB</span>
+          </div>
+          <MetricsChart id="chart" :data="networkUsageData" type="mb" :min="0" :max="6" color="green" />
+        </v-card-text>
+      </v-card>
+    </v-col>
+  </v-row>
+
+  <!-- Factory reset modal -->
+  <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="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" size="large">mdi-alert-outline</v-icon>
+        </span>
+      </v-card-title>
+      <v-card-text class="pt-0 pb-10px">
+        <v-row class="align-center text-white">
+          <v-col cols="12" md="6">
+            <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"
+              :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>
+              <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>
+      </v-card-text>
+      <v-card-text class="pt-0 pb-0">
+        <pv-input
+          v-model="yesDeleteMySettingsText"
+          :label="'Type &quot;' + expected + '&quot;:'"
+          :label-cols="6"
+          :input-cols="6"
+        />
+      </v-card-text>
+      <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"
+        >
+          <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>
+        </v-btn>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+
+  <!-- Import settings modal -->
+  <v-dialog
+    v-model="showImportDialog"
+    width="600"
+    @update:modelValue="
+      () => {
+        importType = undefined;
+        importFile = null;
+      }
+    "
+  >
+    <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
+        <div class="pa-5 pb-0">
+          <pv-select
+            v-model="importType"
+            label="Type"
+            tooltip="Select the type of settings file you are trying to upload"
+            :items="['All Settings', 'Hardware Config', 'Hardware Settings', 'Network Config', 'Apriltag Layout']"
+            :select-cols="10"
+            style="width: 100%"
+          />
+          <v-file-input
+            v-model="importFile"
+            class="pb-5"
+            variant="underlined"
+            :disabled="importType === undefined"
+            :error-messages="importType === undefined ? 'Settings type not selected' : ''"
+            :accept="importType === ImportType.AllSettings ? '.zip' : '.json'"
+          />
+          <v-btn
+            color="primary"
+            :disabled="importFile === null"
+            :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>
+          </v-btn>
+        </div>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+
+  <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"
+  />
+</template>
+
+<style scoped lang="scss">
+.v-btn:not(.refresh) {
+  width: 100%;
+}
+.fill-height {
+  height: calc(100% - 12px) !important;
+}
+@media only screen and (max-width: 351px) {
+  .open-icon {
+    margin: 0 !important;
+  }
+  .open-label {
+    display: none;
+  }
+}
+</style>
diff --git a/photon-client/src/components/settings/DeviceControlCard.vue b/photon-client/src/components/settings/DeviceControlCard.vue
deleted file mode 100644
index 76783f6dcb..0000000000
--- a/photon-client/src/components/settings/DeviceControlCard.vue
+++ /dev/null
@@ -1,462 +0,0 @@
-<script setup lang="ts">
-import { inject, ref } from "vue";
-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
-    .post("/utils/restartProgram")
-    .then(() => {
-      useStateStore().showSnackbarMessage({ message: "Successfully sent program restart request", color: "success" });
-    })
-    .catch((error) => {
-      // This endpoint always return 204 regardless of outcome
-      if (error.request) {
-        useStateStore().showSnackbarMessage({
-          message: "Error while trying to process the request! The backend didn't respond.",
-          color: "error"
-        });
-      } else {
-        useStateStore().showSnackbarMessage({
-          message: "An error occurred while trying to process the request.",
-          color: "error"
-        });
-      }
-    });
-};
-const restartDevice = () => {
-  axios
-    .post("/utils/restartDevice")
-    .then(() => {
-      useStateStore().showSnackbarMessage({
-        message: "Successfully dispatched the restart command. It isn't confirmed if a device restart will occur.",
-        color: "success"
-      });
-    })
-    .catch((error) => {
-      if (error.response) {
-        useStateStore().showSnackbarMessage({
-          message: "The backend is unable to fulfil the request to restart the device.",
-          color: "error"
-        });
-      } else if (error.request) {
-        useStateStore().showSnackbarMessage({
-          message: "Error while trying to process the request! The backend didn't respond.",
-          color: "error"
-        });
-      } else {
-        useStateStore().showSnackbarMessage({
-          message: "An error occurred while trying to process the request.",
-          color: "error"
-        });
-      }
-    });
-};
-
-const address = inject<string>("backendHost");
-
-const offlineUpdate = ref();
-const openOfflineUpdatePrompt = () => {
-  offlineUpdate.value.click();
-};
-const handleOfflineUpdate = () => {
-  const files = offlineUpdate.value.files;
-  if (files.length === 0) return;
-
-  const formData = new FormData();
-  formData.append("jarData", files[0]);
-
-  useStateStore().showSnackbarMessage({
-    message: "New Software Upload in Progress...",
-    color: "secondary",
-    timeout: -1
-  });
-
-  axios
-    .post("/utils/offlineUpdate", formData, {
-      headers: { "Content-Type": "multipart/form-data" },
-      onUploadProgress: ({ progress }) => {
-        const uploadPercentage = (progress || 0) * 100.0;
-        if (uploadPercentage < 99.5) {
-          useStateStore().showSnackbarMessage({
-            message: "New Software Upload in Process, " + uploadPercentage.toFixed(2) + "% complete",
-            color: "secondary",
-            timeout: -1
-          });
-        } else {
-          useStateStore().showSnackbarMessage({
-            message: "Installing uploaded software...",
-            color: "secondary",
-            timeout: -1
-          });
-        }
-      }
-    })
-    .then((response) => {
-      useStateStore().showSnackbarMessage({ message: response.data.text || response.data, color: "success" });
-    })
-    .catch((error) => {
-      if (error.response) {
-        useStateStore().showSnackbarMessage({
-          color: "error",
-          message: error.response.data.text || error.response.data
-        });
-      } else if (error.request) {
-        useStateStore().showSnackbarMessage({
-          color: "error",
-          message: "Error while trying to process the request! The backend didn't respond."
-        });
-      } else {
-        useStateStore().showSnackbarMessage({
-          color: "error",
-          message: "An error occurred while trying to process the request."
-        });
-      }
-    });
-};
-
-const exportLogFile = ref();
-const openExportLogsPrompt = () => {
-  exportLogFile.value.click();
-};
-
-const exportSettings = ref();
-const openExportSettingsPrompt = () => {
-  exportSettings.value.click();
-};
-
-enum ImportType {
-  AllSettings,
-  HardwareConfig,
-  HardwareSettings,
-  NetworkConfig,
-  ApriltagFieldLayout
-}
-const showImportDialog = ref(false);
-const importType = ref<ImportType | undefined>(undefined);
-const importFile = ref<File | null>(null);
-const handleSettingsImport = () => {
-  if (importType.value === undefined || importFile.value === null) return;
-
-  const formData = new FormData();
-  formData.append("data", importFile.value);
-
-  let settingsEndpoint: string;
-  switch (importType.value) {
-    case ImportType.HardwareConfig:
-      settingsEndpoint = "/hardwareConfig";
-      break;
-    case ImportType.HardwareSettings:
-      settingsEndpoint = "/hardwareSettings";
-      break;
-    case ImportType.NetworkConfig:
-      settingsEndpoint = "/networkConfig";
-      break;
-    case ImportType.ApriltagFieldLayout:
-      settingsEndpoint = "/aprilTagFieldLayout";
-      break;
-    default:
-    case ImportType.AllSettings:
-      settingsEndpoint = "";
-      break;
-  }
-
-  axios
-    .post(`/settings${settingsEndpoint}`, formData, { headers: { "Content-Type": "multipart/form-data" } })
-    .then((response) => {
-      useStateStore().showSnackbarMessage({ message: response.data.text || response.data, color: "success" });
-    })
-    .catch((error) => {
-      if (error.response) {
-        useStateStore().showSnackbarMessage({
-          color: "error",
-          message: error.response.data.text || error.response.data
-        });
-      } else if (error.request) {
-        useStateStore().showSnackbarMessage({
-          color: "error",
-          message: "Error while trying to process the request! The backend didn't respond."
-        });
-      } else {
-        useStateStore().showSnackbarMessage({
-          color: "error",
-          message: "An error occurred while trying to process the request."
-        });
-      }
-    });
-
-  showImportDialog.value = false;
-  importType.value = undefined;
-  importFile.value = null;
-};
-
-const showFactoryReset = ref(false);
-const expected = "Delete Everything";
-const yesDeleteMySettingsText = ref("");
-const nukePhotonConfigDirectory = () => {
-  axios
-    .post("/utils/nukeConfigDirectory")
-    .then(() => {
-      useStateStore().showSnackbarMessage({
-        message: "Successfully dispatched the reset command. Waiting for backend to start back up",
-        color: "success"
-      });
-    })
-    .catch((error) => {
-      if (error.response) {
-        useStateStore().showSnackbarMessage({
-          message: "The backend is unable to fulfill the request to reset the device.",
-          color: "error"
-        });
-      } else if (error.request) {
-        useStateStore().showSnackbarMessage({
-          message: "Error while trying to process the request! The backend didn't respond.",
-          color: "error"
-        });
-      } else {
-        useStateStore().showSnackbarMessage({
-          message: "An error occurred while trying to process the request.",
-          color: "error"
-        });
-      }
-    });
-  showFactoryReset.value = false;
-};
-</script>
-
-<template>
-  <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="buttonActive"
-            :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>
-          </v-btn>
-        </v-col>
-        <v-col cols="12" lg="4" md="6">
-          <v-btn
-            color="buttonActive"
-            :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>
-          </v-btn>
-        </v-col>
-        <v-col cols="12" lg="4">
-          <v-btn
-            color="buttonPassive"
-            :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>
-          </v-btn>
-          <input ref="offlineUpdate" type="file" accept=".jar" style="display: none" @change="handleOfflineUpdate" />
-        </v-col>
-      </v-row>
-      <v-row>
-        <v-col cols="12" sm="6">
-          <v-btn
-            color="buttonPassive"
-            :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>
-          </v-btn>
-          <v-dialog
-            v-model="showImportDialog"
-            width="600"
-            @update:modelValue="
-              () => {
-                importType = undefined;
-                importFile = null;
-              }
-            "
-          >
-            <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
-                <div class="pa-5 pb-0">
-                  <pv-select
-                    v-model="importType"
-                    label="Type"
-                    tooltip="Select the type of settings file you are trying to upload"
-                    :items="[
-                      'All Settings',
-                      'Hardware Config',
-                      'Hardware Settings',
-                      'Network Config',
-                      'Apriltag Layout'
-                    ]"
-                    :select-cols="10"
-                    style="width: 100%"
-                  />
-                  <v-file-input
-                    v-model="importFile"
-                    class="pb-5"
-                    variant="underlined"
-                    :disabled="importType === undefined"
-                    :error-messages="importType === undefined ? 'Settings type not selected' : ''"
-                    :accept="importType === ImportType.AllSettings ? '.zip' : '.json'"
-                  />
-                  <v-btn
-                    color="primary"
-                    :disabled="importFile === null"
-                    :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>
-                  </v-btn>
-                </div>
-              </v-card-text>
-            </v-card>
-          </v-dialog>
-        </v-col>
-        <v-col cols="12" sm="6">
-          <v-btn
-            color="buttonPassive"
-            :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>
-          </v-btn>
-          <a
-            ref="exportSettings"
-            style="color: black; text-decoration: none; display: none"
-            :href="`http://${address}/api/settings/photonvision_config.zip`"
-            download="photonvision-settings.zip"
-            target="_blank"
-          />
-        </v-col>
-        <v-col cols="12" sm="6">
-          <v-btn
-            color="buttonPassive"
-            :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>
-
-            <!-- Special hidden link that gets 'clicked' when the user exports journalctl logs -->
-            <a
-              ref="exportLogFile"
-              style="color: black; text-decoration: none; display: none"
-              :href="`http://${address}/api/utils/photonvision-journalctl.txt`"
-              download="photonvision-journalctl.txt"
-              target="_blank"
-            />
-          </v-btn>
-        </v-col>
-        <v-col cols="12" sm="6">
-          <v-btn
-            color="buttonPassive"
-            :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>
-          </v-btn>
-        </v-col>
-      </v-row>
-      <v-row>
-        <v-col cols="12">
-          <v-btn
-            color="error"
-            :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>
-          </v-btn>
-        </v-col>
-      </v-row>
-    </div>
-    <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="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" size="large">mdi-alert-outline</v-icon>
-          </span>
-        </v-card-title>
-        <v-card-text class="pt-0 pb-10px">
-          <v-row class="align-center text-white">
-            <v-col cols="12" md="6">
-              <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"
-                :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>
-                <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>
-        </v-card-text>
-        <v-card-text class="pt-0 pb-0">
-          <pv-input
-            v-model="yesDeleteMySettingsText"
-            :label="'Type &quot;' + expected + '&quot;:'"
-            :label-cols="6"
-            :input-cols="6"
-          />
-        </v-card-text>
-        <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"
-          >
-            <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>
-          </v-btn>
-        </v-card-text>
-      </v-card>
-    </v-dialog>
-  </v-card>
-</template>
-
-<style scoped>
-.v-btn {
-  width: 100%;
-}
-@media only screen and (max-width: 351px) {
-  .open-icon {
-    margin: 0 !important;
-  }
-  .open-label {
-    display: none;
-  }
-}
-</style>
diff --git a/photon-client/src/components/settings/MetricsCard.vue b/photon-client/src/components/settings/MetricsCard.vue
deleted file mode 100644
index 952e7c4ad0..0000000000
--- a/photon-client/src/components/settings/MetricsCard.vue
+++ /dev/null
@@ -1,292 +0,0 @@
-<script setup lang="ts">
-import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
-import { computed, onBeforeMount, ref } from "vue";
-import { useStateStore } from "@/stores/StateStore";
-
-interface MetricItem {
-  header: string;
-  value?: string;
-}
-
-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: "GPU Acceleration", value: useSettingsStore().general.gpuAcceleration || "Unknown" }
-  ];
-
-  if (!useSettingsStore().network.networkingDisabled) {
-    stats.push({ header: "IP Address", value: useSettingsStore().metrics.ipAddress || "Unknown" });
-  }
-
-  return stats;
-});
-
-// @ts-expect-error This uses Intl.DurationFormat which is newly implemented and not available in TS.
-const durationFormatter = new Intl.DurationFormat("en", { style: "narrow" });
-const platformMetrics = computed<MetricItem[]>(() => {
-  const metrics = useSettingsStore().metrics;
-  const stats = [
-    {
-      header: "CPU Temp",
-      value: metrics.cpuTemp === undefined || metrics.cpuTemp == -1 ? "Unknown" : `${metrics.cpuTemp}°C`
-    },
-    {
-      header: "CPU Usage",
-      value: metrics.cpuUtil === undefined ? "Unknown" : `${metrics.cpuUtil}%`
-    },
-    {
-      header: "CPU Memory Usage",
-      value:
-        metrics.ramUtil && metrics.ramMem && metrics.ramUtil >= 0 && metrics.ramMem >= 0
-          ? `${metrics.ramUtil}MB of ${metrics.ramMem}MB`
-          : "Unknown"
-    },
-    {
-      header: "Uptime",
-      value: (() => {
-        const seconds = metrics.uptime;
-        if (seconds === undefined) return "Unknown";
-
-        const days = Math.floor(seconds / 86400);
-        const hours = Math.floor((seconds % 86400) / 3600);
-        const minutes = Math.floor((seconds % 3600) / 60);
-        const secs = Math.floor(seconds % 60);
-
-        return durationFormatter.format({
-          days: days,
-          hours: hours,
-          minutes: minutes,
-          seconds: secs
-        });
-      })()
-    },
-    {
-      header: "Disk Usage",
-      value: metrics.diskUtilPct === undefined ? "Unknown" : `${metrics.diskUtilPct}%`
-    }
-  ];
-
-  if (metrics.npuUsage && metrics.npuUsage.length > 0) {
-    stats.push({
-      header: "NPU Usage",
-      value: metrics.npuUsage?.map((usage, index) => `Core${index} ${usage}%`).join(", ") || "Unknown"
-    });
-  }
-
-  if (metrics.gpuMem && metrics.gpuMemUtil && metrics.gpuMem > 0 && metrics.gpuMemUtil > 0) {
-    stats.push({
-      header: "GPU Memory Usage",
-      value: `${metrics.gpuMemUtil}MB of ${metrics.gpuMem}MB`
-    });
-  }
-
-  if (metrics.cpuThr) {
-    stats.push({
-      header: "CPU Throttling",
-      value: metrics.cpuThr.toString()
-    });
-  }
-
-  return stats;
-});
-
-const metricsLastFetched = ref("Never");
-const fetchMetrics = () => {
-  useSettingsStore()
-    .requestMetricsUpdate()
-    .catch((error) => {
-      if (error.request) {
-        useStateStore().showSnackbarMessage({
-          color: "error",
-          message: "Unable to fetch metrics! The backend didn't respond."
-        });
-      } else {
-        useStateStore().showSnackbarMessage({
-          color: "error",
-          message: "An error occurred while trying to fetch metrics."
-        });
-      }
-    })
-    .finally(() => {
-      const pad = (num: number): string => {
-        return String(num).padStart(2, "0");
-      };
-
-      const date = new Date();
-      metricsLastFetched.value = `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
-    });
-};
-
-onBeforeMount(() => {
-  fetchMetrics();
-});
-</script>
-
-<template>
-  <v-card class="mb-3 rounded-12" color="surface">
-    <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" size="large">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</v-card-subtitle>
-      <v-table class="metrics-table mt-3">
-        <thead>
-          <tr>
-            <th
-              v-for="(item, itemIndex) in generalMetrics"
-              :key="itemIndex"
-              class="metric-item metric-item-title"
-              :class="{
-                tl: itemIndex === 0,
-                tr: itemIndex === generalMetrics.length - 1,
-                t: 0 < itemIndex && itemIndex < generalMetrics.length - 1
-              }"
-            >
-              {{ item.header }}
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td
-              v-for="(item, itemIndex) in generalMetrics"
-              :key="itemIndex"
-              class="metric-item"
-              :class="{
-                bl: itemIndex === 0,
-                br: itemIndex === generalMetrics.length - 1,
-                b: 0 < itemIndex && itemIndex < generalMetrics.length - 1
-              }"
-            >
-              {{ item.value }}
-            </td>
-          </tr>
-        </tbody>
-      </v-table>
-    </v-card-text>
-    <v-card-text class="pt-4">
-      <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>
-            <th
-              v-for="(item, itemIndex) in platformMetrics"
-              :key="itemIndex"
-              class="metric-item metric-item-title"
-              :class="{
-                tl: itemIndex === 0,
-                tr: itemIndex === platformMetrics.length - 1,
-                t: 0 < itemIndex && itemIndex < platformMetrics.length - 1
-              }"
-            >
-              {{ item.header }}
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td
-              v-for="(item, itemIndex) in platformMetrics"
-              :key="itemIndex"
-              class="metric-item"
-              :class="{
-                bl: itemIndex === 0,
-                br: itemIndex === platformMetrics.length - 1,
-                b: 0 < itemIndex && itemIndex < platformMetrics.length - 1
-              }"
-            >
-              <span v-if="useSettingsStore().metrics.cpuUtil !== undefined">{{ item.value }}</span>
-              <span v-else>---</span>
-            </td>
-          </tr>
-        </tbody>
-      </v-table>
-    </v-card-text>
-  </v-card>
-</template>
-
-<style scoped lang="scss">
-.metrics-table {
-  width: 100%;
-  text-align: center;
-}
-
-$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 {
-  border-bottom: 1px solid $stats-table-border;
-  border-right: 1px solid $stats-table-border;
-}
-
-.tl {
-  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;
-}
-
-.bl {
-  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 $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 $stats-table-border;
-  font-weight: normal;
-  color: white !important;
-  text-align: center !important;
-}
-
-.metric-item-title {
-  font-size: 18px !important;
-}
-
-.v-table {
-  ::-webkit-scrollbar {
-    width: 0;
-    height: 0.55em;
-    border-radius: 5px;
-  }
-
-  ::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-    border-radius: 10px;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background-color: rgb(var(--v-theme-accent));
-    border-radius: 10px;
-  }
-}
-</style>
diff --git a/photon-client/src/components/settings/MetricsChart.vue b/photon-client/src/components/settings/MetricsChart.vue
new file mode 100644
index 0000000000..2006749c0b
--- /dev/null
+++ b/photon-client/src/components/settings/MetricsChart.vue
@@ -0,0 +1,210 @@
+<script setup lang="ts">
+import * as echarts from "echarts";
+import { onMounted, ref, onBeforeUnmount, watch } from "vue";
+import { useTheme } from "vuetify";
+
+// Color  -  original        (adjusted)
+// blue   -   59, 130, 246   (r:  92, g: 154, b: 255)
+// purple -  154, 100, 180   (r: 167, g: 104, b: 196)
+// green  -   65, 181, 127   (r:  75, g: 209, b: 147)
+// red    -  238, 102, 102   (r: 238, g: 102, b: 102)
+const colors = {
+  "blue-LightTheme": { r: 255, g: 216, b: 67 },
+  "blue-DarkTheme": { r: 92, g: 154, b: 255 },
+  "purple-LightTheme": { r: 255, g: 216, b: 67 },
+  "purple-DarkTheme": { r: 167, g: 104, b: 196 },
+  "red-LightTheme": { r: 255, g: 216, b: 67 },
+  "red-DarkTheme": { r: 238, g: 102, b: 102 },
+  "green-LightTheme": { r: 255, g: 216, b: 67 },
+  "green-DarkTheme": { r: 75, g: 209, b: 147 }
+};
+const DEFAULT_COLOR = "blue";
+
+const typeLabels = {
+  percentage: "%",
+  temperature: "°C",
+  mb: " MB"
+};
+
+const theme = useTheme();
+const chartRef = ref(null);
+let chart: echarts.ECharts | null = null;
+
+const getOptions = (data: ChartData[] = []) => {
+  const now = Date.now();
+  return {
+    title: {
+      show: false
+    },
+    tooltip: {
+      trigger: "axis",
+      formatter: (params: any) => {
+        const p = params[0];
+        const append = typeLabels[props.type];
+        return `<div style="text-align: right;">${new Date(p.value[0]).toLocaleTimeString([], { hour12: false })}<br/>${p.value[1].toFixed(props.type === "mb" ? 3 : 2)}${append}</div>`;
+      },
+      backgroundColor: theme.themes.value[theme.global.name.value].colors.background,
+      textStyle: {
+        color: theme.themes.value[theme.global.name.value].colors.onBackground
+      },
+      axisPointer: {
+        animation: false
+      }
+    },
+    grid: {
+      top: 0,
+      bottom: 10,
+      left: 0,
+      right: 50,
+      containLabel: false
+    },
+    xAxis: {
+      type: "time",
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#ffffff18"
+        }
+      },
+      splitNumber: 4,
+      min: now - 55 * 1000,
+      axisLine: {
+        lineStyle: {
+          color: theme.global.name.value === "LightTheme" ? "#aaa" : "#777"
+        }
+      },
+      axisLabel: {
+        align: "left",
+        color: theme.global.name.value === "LightTheme" ? "#fff" : "#ddd",
+        formatter: (value: number) => {
+          const date = new Date(value);
+          return date.toLocaleTimeString([], {
+            hour: "2-digit",
+            minute: "2-digit",
+            second: "2-digit",
+            hour12: false
+          });
+        }
+      }
+    },
+    yAxis: {
+      type: "value",
+      position: "right",
+      min:
+        props.min ??
+        function (value) {
+          return Math.max(0, (value.min - 10) | 0);
+        },
+      max:
+        props.max ??
+        function (value) {
+          return (value.max + 10) | 0;
+        },
+      splitNumber: 2,
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#ffffff18"
+        }
+      },
+      axisLabel: {
+        color: theme.global.name.value === "LightTheme" ? "#fff" : "#ddd"
+      }
+    },
+    series: getSeries(data),
+    animation: false
+  };
+};
+
+const getSeries = (data: ChartData[] = []) => {
+  const color = colors[`${props.color ?? DEFAULT_COLOR}-${theme.global.name.value}`];
+  return [
+    {
+      type: "line",
+      showSymbol: false,
+      data: data.map((d) => [d.time, d.value]),
+      lineStyle: {
+        color:
+          theme.global.name.value === "LightTheme"
+            ? theme.themes.value[theme.global.name.value].colors.primary
+            : `rgb(${color.r}, ${color.g}, ${color.b})`
+      },
+      areaStyle: {
+        color: {
+          type: "linear",
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color:
+                theme.global.name.value === "LightTheme"
+                  ? `${theme.themes.value[theme.global.name.value].colors.primary}80`
+                  : `rgba(${color.r}, ${color.g}, ${color.b}, 0.35)`
+            },
+            {
+              offset: 1,
+              color:
+                theme.global.name.value === "LightTheme"
+                  ? `${theme.themes.value[theme.global.name.value].colors.primary}00`
+                  : `rgba(${color.r}, ${color.g}, ${color.b}, 0)`
+            }
+          ]
+        }
+      }
+    }
+  ];
+};
+
+interface ChartData {
+  time: number;
+  value: number;
+}
+
+// Type options: "percentage", "temperature", "mb"
+const props = defineProps<{
+  data: ChartData[];
+  type: string;
+  min?: number;
+  max?: number;
+  color?: string;
+}>();
+
+onMounted(() => {
+  chart = echarts.init(chartRef.value);
+  chart.setOption(getOptions(props.data));
+
+  window.addEventListener("resize", resizeChart);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", resizeChart);
+  chart?.dispose();
+});
+
+function resizeChart() {
+  chart?.resize();
+}
+
+watch(
+  () => props.data,
+  (data) => {
+    chart?.setOption(getOptions(data));
+  },
+  { deep: true }
+);
+</script>
+
+<template>
+  <div ref="chartRef"></div>
+</template>
+
+<style scoped>
+div {
+  width: calc(100% + 20px);
+  height: 100px;
+  margin-right: -20px;
+}
+</style>
diff --git a/photon-client/src/stores/StateStore.ts b/photon-client/src/stores/StateStore.ts
index 2c4e7edabf..79d52a360c 100644
--- a/photon-client/src/stores/StateStore.ts
+++ b/photon-client/src/stores/StateStore.ts
@@ -16,6 +16,11 @@ export interface NTConnectionStatus {
   clients?: number;
 }
 
+interface NetworkUsageEntry {
+  time: number;
+  usage: number;
+}
+
 interface StateStore {
   backendConnected: boolean;
   websocket?: AutoReconnectingWebsocket;
@@ -24,6 +29,7 @@ interface StateStore {
   sidebarFolded: boolean;
   logMessages: LogMessage[];
   currentCameraUniqueName: string;
+  networkUsageHistory: NetworkUsageEntry[];
 
   backendResults: Record<number, PipelineResult>;
   multitagResultBuffer: Record<string, MultitagResult[]>;
@@ -62,6 +68,7 @@ export const useStateStore = defineStore("state", {
         localStorage.getItem("sidebarFolded") === null ? false : localStorage.getItem("sidebarFolded") === "true",
       logMessages: [],
       currentCameraUniqueName: Object.keys(cameraStore.cameras)[0],
+      networkUsageHistory: [],
 
       backendResults: {
         0: {
@@ -165,6 +172,10 @@ export const useStateStore = defineStore("state", {
         color: data.color,
         timeout: data.timeout || 2000
       };
+    },
+    addNetworkUsageHistory(bytes: number) {
+      // this.networkUsageHistory.push({ time: Date.now(), usage: bytes / 1e6 });
+      // while (this.networkUsageHistory.length > MAX_METRIC_HISTORY) this.networkUsageHistory.shift();
     }
   }
 });
diff --git a/photon-client/src/stores/settings/GeneralSettingsStore.ts b/photon-client/src/stores/settings/GeneralSettingsStore.ts
index 28b0f7ad03..5559995ce2 100644
--- a/photon-client/src/stores/settings/GeneralSettingsStore.ts
+++ b/photon-client/src/stores/settings/GeneralSettingsStore.ts
@@ -10,15 +10,26 @@ import { NetworkConnectionType } from "@/types/SettingTypes";
 import { useStateStore } from "@/stores/StateStore";
 import axios from "axios";
 import type { WebsocketSettingsUpdate } from "@/types/WebsocketDataTypes";
+import { ref } from "vue";
+
+interface MetricsEntry {
+  time: number;
+  metrics: MetricData;
+}
 
 interface GeneralSettingsStore {
   general: GeneralSettings;
   network: NetworkSettings;
   lighting: LightingSettings;
   metrics: MetricData;
+  metricsHistory: MetricsEntry[];
   currentFieldLayout;
 }
 
+const MAX_METRIC_HISTORY = 60;
+const UPDATE_INTERVAL_MS = 900;
+const updateTimeElapsed = ref(true);
+
 export const useSettingsStore = defineStore("settings", {
   state: (): GeneralSettingsStore => ({
     general: {
@@ -66,6 +77,7 @@ export const useSettingsStore = defineStore("settings", {
       ipAddress: undefined,
       uptime: undefined
     },
+    metricsHistory: [],
     currentFieldLayout: {
       field: {
         length: 16.4592,
@@ -100,6 +112,14 @@ export const useSettingsStore = defineStore("settings", {
         ipAddress: data.ipAddress || undefined,
         uptime: data.uptime || undefined
       };
+      if (updateTimeElapsed.value) {
+        updateTimeElapsed.value = false;
+        setTimeout(() => (updateTimeElapsed.value = true), UPDATE_INTERVAL_MS);
+
+        const now = Date.now();
+        this.metricsHistory.push({ time: now, metrics: this.metrics });
+        while (this.metricsHistory.length > MAX_METRIC_HISTORY) this.metricsHistory.shift();
+      }
     },
     updateGeneralSettingsFromWebsocket(data: WebsocketSettingsUpdate) {
       this.general = {
diff --git a/photon-client/src/types/SettingTypes.ts b/photon-client/src/types/SettingTypes.ts
index 59fa0d39a8..2e47a08eed 100644
--- a/photon-client/src/types/SettingTypes.ts
+++ b/photon-client/src/types/SettingTypes.ts
@@ -36,6 +36,7 @@ export interface MetricData {
   npuUsage?: number[];
   ipAddress?: string;
   uptime?: number;
+  // networkUsage?: number;
 }
 
 export enum NetworkConnectionType {
diff --git a/photon-client/src/views/GeneralSettingsView.vue b/photon-client/src/views/GeneralSettingsView.vue
index 09a2ae08c4..134407e382 100644
--- a/photon-client/src/views/GeneralSettingsView.vue
+++ b/photon-client/src/views/GeneralSettingsView.vue
@@ -1,24 +1,21 @@
 <script setup lang="ts">
-import MetricsCard from "@/components/settings/MetricsCard.vue";
-import DeviceControlCard from "@/components/settings/DeviceControlCard.vue";
 import ObjectDetectionCard from "@/components/settings/ObjectDetectionCard.vue";
 import NetworkingCard from "@/components/settings/NetworkingCard.vue";
 import LightingControlCard from "@/components/settings/LEDControlCard.vue";
 import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
 import ApriltagControlCard from "@/components/settings/ApriltagControlCard.vue";
+import DeviceCard from "@/components/settings/DeviceCard.vue";
 </script>
 
 <template>
   <div class="pa-3">
-    <MetricsCard />
-    <DeviceControlCard />
+    <DeviceCard />
     <NetworkingCard />
     <ObjectDetectionCard v-if="useSettingsStore().general.supportedBackends.length > 0" />
     <LightingControlCard v-if="useSettingsStore().lighting.supported" />
     <Suspense>
       <!-- Allows us to import three js when it's actually needed  -->
       <ApriltagControlCard />
-
       <template #fallback> Loading... </template>
     </Suspense>
   </div>
diff --git a/photon-core/src/main/java/org/photonvision/common/hardware/HardwareManager.java b/photon-core/src/main/java/org/photonvision/common/hardware/HardwareManager.java
index 81205d25c8..935e713148 100644
--- a/photon-core/src/main/java/org/photonvision/common/hardware/HardwareManager.java
+++ b/photon-core/src/main/java/org/photonvision/common/hardware/HardwareManager.java
@@ -77,7 +77,7 @@ private HardwareManager(HardwareConfig hardwareConfig, HardwareSettings hardware
         this.metricsManager.setConfig(hardwareConfig);
 
         TimedTaskManager.getInstance()
-                .addTask("Metrics Publisher", this.metricsManager::publishMetrics, 5000);
+                .addTask("Metrics Publisher", this.metricsManager::publishMetrics, 1000);
 
         ledModeRequest =
                 NetworkTablesManager.getInstance()