diff --git a/frigate/stats/emitter.py b/frigate/stats/emitter.py
index 2c29548e9..a90be5271 100644
--- a/frigate/stats/emitter.py
+++ b/frigate/stats/emitter.py
@@ -16,7 +16,8 @@ from frigate.types import StatsTrackingTypes
 logger = logging.getLogger(__name__)
 
 
-MAX_STATS_POINTS = 120
+MAX_STATS_POINTS = 80
+FREQUENCY_STATS_POINTS = 15
 
 
 class StatsEmitter(threading.Thread):
@@ -70,9 +71,9 @@ class StatsEmitter(threading.Thread):
     def run(self) -> None:
         time.sleep(10)
         for counter in itertools.cycle(
-            range(int(self.config.mqtt.stats_interval / 10))
+            range(int(self.config.mqtt.stats_interval / FREQUENCY_STATS_POINTS))
         ):
-            if self.stop_event.wait(10):
+            if self.stop_event.wait(FREQUENCY_STATS_POINTS):
                 break
 
             logger.debug("Starting stats collection")
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 98385fc20..2f0853200 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -11,7 +11,6 @@ import { Suspense, lazy } from "react";
 const Live = lazy(() => import("@/pages/Live"));
 const Events = lazy(() => import("@/pages/Events"));
 const Export = lazy(() => import("@/pages/Export"));
-const Storage = lazy(() => import("@/pages/Storage"));
 const SubmitPlus = lazy(() => import("@/pages/SubmitPlus"));
 const ConfigEditor = lazy(() => import("@/pages/ConfigEditor"));
 const System = lazy(() => import("@/pages/System"));
@@ -38,7 +37,6 @@ function App() {
                   <Route path="/" element={<Live />} />
                   <Route path="/events" element={<Events />} />
                   <Route path="/export" element={<Export />} />
-                  <Route path="/storage" element={<Storage />} />
                   <Route path="/plus" element={<SubmitPlus />} />
                   <Route path="/system" element={<System />} />
                   <Route path="/settings" element={<Settings />} />
diff --git a/web/src/components/filter/ReviewFilterGroup.tsx b/web/src/components/filter/ReviewFilterGroup.tsx
index 4d2e1db8e..f5b09836b 100644
--- a/web/src/components/filter/ReviewFilterGroup.tsx
+++ b/web/src/components/filter/ReviewFilterGroup.tsx
@@ -2,7 +2,7 @@ import { Button } from "../ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import useSWR from "swr";
 import { CameraGroupConfig, FrigateConfig } from "@/types/frigateConfig";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -29,6 +29,7 @@ import ReviewActivityCalendar from "../overlay/ReviewActivityCalendar";
 import MobileReviewSettingsDrawer, {
   DrawerFeatures,
 } from "../overlay/MobileReviewSettingsDrawer";
+import useOptimisticState from "@/hooks/use-optimistic-state";
 
 const REVIEW_FILTERS = [
   "cameras",
@@ -361,13 +362,19 @@ function ShowReviewFilter({
   showReviewed,
   setShowReviewed,
 }: ShowReviewedFilterProps) {
+  const [showReviewedSwitch, setShowReviewedSwitch] = useOptimisticState(
+    showReviewed,
+    setShowReviewed,
+  );
   return (
     <>
       <div className="hidden h-9 md:flex p-2 justify-start items-center text-sm bg-secondary hover:bg-secondary/80 text-secondary-foreground rounded-md cursor-pointer">
         <Switch
           id="reviewed"
-          checked={showReviewed == 1}
-          onCheckedChange={() => setShowReviewed(showReviewed == 0 ? 1 : 0)}
+          checked={showReviewedSwitch == 1}
+          onCheckedChange={() =>
+            setShowReviewedSwitch(showReviewedSwitch == 0 ? 1 : 0)
+          }
         />
         <Label className="ml-2 cursor-pointer" htmlFor="reviewed">
           Show Reviewed
@@ -378,10 +385,10 @@ function ShowReviewFilter({
         className="block md:hidden"
         size="sm"
         variant="secondary"
-        onClick={() => setShowReviewed(showReviewed == 0 ? 1 : 0)}
+        onClick={() => setShowReviewedSwitch(showReviewedSwitch == 0 ? 1 : 0)}
       >
         <FaCheckCircle
-          className={`${showReviewed == 1 ? "text-selected" : "text-muted-foreground"}`}
+          className={`${showReviewedSwitch == 1 ? "text-selected" : "text-muted-foreground"}`}
         />
       </Button>
     </>
@@ -631,11 +638,9 @@ function ShowMotionOnlyButton({
   motionOnly,
   setMotionOnly,
 }: ShowMotionOnlyButtonProps) {
-  const [motionOnlyButton, setMotionOnlyButton] = useState(motionOnly);
-
-  useEffect(
-    () => setMotionOnly(motionOnlyButton),
-    [motionOnlyButton, setMotionOnly],
+  const [motionOnlyButton, setMotionOnlyButton] = useOptimisticState(
+    motionOnly,
+    setMotionOnly,
   );
 
   return (
@@ -659,10 +664,10 @@ function ShowMotionOnlyButton({
         <Button
           size="sm"
           variant="secondary"
-          onClick={() => setMotionOnly(!motionOnly)}
+          onClick={() => setMotionOnlyButton(!motionOnlyButton)}
         >
           <FaRunning
-            className={`${motionOnly ? "text-selected" : "text-muted-foreground"}`}
+            className={`${motionOnlyButton ? "text-selected" : "text-muted-foreground"}`}
           />
         </Button>
       </div>
diff --git a/web/src/components/graph/SystemGraph.tsx b/web/src/components/graph/SystemGraph.tsx
index ec750dceb..a6ca219b0 100644
--- a/web/src/components/graph/SystemGraph.tsx
+++ b/web/src/components/graph/SystemGraph.tsx
@@ -5,7 +5,7 @@ import { useCallback, useEffect, useMemo } from "react";
 import Chart from "react-apexcharts";
 import useSWR from "swr";
 
-type SystemGraphProps = {
+type ThresholdBarGraphProps = {
   graphId: string;
   name: string;
   unit: string;
@@ -13,14 +13,14 @@ type SystemGraphProps = {
   updateTimes: number[];
   data: ApexAxisChartSeries;
 };
-export default function SystemGraph({
+export function ThresholdBarGraph({
   graphId,
   name,
   unit,
   threshold,
   updateTimes,
   data,
-}: SystemGraphProps) {
+}: ThresholdBarGraphProps) {
   const { data: config } = useSWR<FrigateConfig>("config", {
     revalidateOnFocus: false,
   });
@@ -87,8 +87,12 @@ export default function SystemGraph({
       tooltip: {
         theme: systemTheme || theme,
       },
+      markers: {
+        size: 0,
+      },
       xaxis: {
-        tickAmount: 6,
+        tickAmount: 4,
+        tickPlacement: "on",
         labels: {
           formatter: formatTime,
         },
@@ -104,7 +108,7 @@ export default function SystemGraph({
         min: 0,
         max: threshold.warning + 10,
       },
-    };
+    } as ApexCharts.ApexOptions;
   }, [graphId, threshold, systemTheme, theme, formatTime]);
 
   useEffect(() => {
@@ -124,3 +128,110 @@ export default function SystemGraph({
     </div>
   );
 }
+
+const getUnitSize = (MB: number) => {
+  if (isNaN(MB) || MB < 0) return "Invalid number";
+  if (MB < 1024) return `${MB} MiB`;
+  if (MB < 1048576) return `${(MB / 1024).toFixed(2)} GiB`;
+
+  return `${(MB / 1048576).toFixed(2)} TiB`;
+};
+
+type StorageGraphProps = {
+  graphId: string;
+  used: number;
+  total: number;
+};
+export function StorageGraph({ graphId, used, total }: StorageGraphProps) {
+  const { theme, systemTheme } = useTheme();
+
+  const options = useMemo(() => {
+    return {
+      chart: {
+        id: graphId,
+        background: (systemTheme || theme) == "dark" ? "#404040" : "#E5E5E5",
+        selection: {
+          enabled: false,
+        },
+        toolbar: {
+          show: false,
+        },
+        zoom: {
+          enabled: false,
+        },
+      },
+      grid: {
+        show: false,
+        padding: {
+          bottom: -40,
+          top: -60,
+          left: -20,
+          right: 0,
+        },
+      },
+      legend: {
+        show: false,
+      },
+      dataLabels: {
+        enabled: false,
+      },
+      plotOptions: {
+        bar: {
+          horizontal: true,
+        },
+      },
+      tooltip: {
+        theme: systemTheme || theme,
+      },
+      xaxis: {
+        axisBorder: {
+          show: false,
+        },
+        axisTicks: {
+          show: false,
+        },
+        labels: {
+          show: false,
+        },
+      },
+      yaxis: {
+        show: false,
+        min: 0,
+        max: 100,
+      },
+    };
+  }, [graphId, systemTheme, theme]);
+
+  useEffect(() => {
+    ApexCharts.exec(graphId, "updateOptions", options, true, true);
+  }, [graphId, options]);
+
+  return (
+    <div className="w-full flex flex-col gap-2.5">
+      <div className="w-full flex justify-between items-center gap-1">
+        <div className="flex items-center gap-1">
+          <div className="text-xs text-primary-foreground">
+            {getUnitSize(used)}
+          </div>
+          <div className="text-xs text-primary-foreground">/</div>
+          <div className="text-xs text-muted-foreground">
+            {getUnitSize(total)}
+          </div>
+        </div>
+        <div className="text-xs text-primary-foreground">
+          {Math.round((used / total) * 100)}%
+        </div>
+      </div>
+      <div className="h-5 rounded-md overflow-hidden">
+        <Chart
+          type="bar"
+          options={options}
+          series={[
+            { data: [{ x: "storage", y: Math.round((used / total) * 100) }] },
+          ]}
+          height="100%"
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/components/overlay/ExportDialog.tsx b/web/src/components/overlay/ExportDialog.tsx
index a9d597f83..5475dd00c 100644
--- a/web/src/components/overlay/ExportDialog.tsx
+++ b/web/src/components/overlay/ExportDialog.tsx
@@ -216,11 +216,11 @@ export function ExportContent({
           <DialogHeader>
             <DialogTitle>Export</DialogTitle>
           </DialogHeader>
-          <SelectSeparator className="bg-secondary" />
+          <SelectSeparator className="my-4 bg-secondary" />
         </>
       )}
       <RadioGroup
-        className={`flex flex-col gap-3 ${isDesktop ? "" : "mt-4"}`}
+        className={`flex flex-col gap-4 ${isDesktop ? "" : "mt-4"}`}
         onValueChange={(value) => onSelectTime(value as ExportOption)}
       >
         {EXPORT_OPTIONS.map((opt) => {
@@ -254,13 +254,13 @@ export function ExportContent({
         />
       )}
       <Input
-        className="mt-3"
+        className="my-6"
         type="search"
         placeholder="Name the Export"
         value={name}
         onChange={(e) => setName(e.target.value)}
       />
-      {isDesktop && <SelectSeparator className="bg-secondary" />}
+      {isDesktop && <SelectSeparator className="my-4 bg-secondary" />}
       <DialogFooter
         className={isDesktop ? "" : "mt-3 flex flex-col-reverse gap-4"}
       >
@@ -371,7 +371,7 @@ function CustomTimeSelector({
 
   return (
     <div
-      className={`flex items-center bg-secondary rounded-lg ${isDesktop ? "mx-8 px-2 gap-2" : "pl-2 mt-3"}`}
+      className={`mt-3 flex items-center bg-secondary rounded-lg ${isDesktop ? "mx-8 px-2 gap-2" : "pl-2"}`}
     >
       <FaCalendarAlt />
       <Popover
diff --git a/web/src/components/overlay/MobileReviewSettingsDrawer.tsx b/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
index bf39632e9..0a3319918 100644
--- a/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
+++ b/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
@@ -17,7 +17,6 @@ import axios from "axios";
 import SaveExportOverlay from "./SaveExportOverlay";
 import { isMobile } from "react-device-detect";
 
-const ATTRIBUTES = ["amazon", "face", "fedex", "license_plate", "ups"];
 type DrawerMode = "none" | "select" | "export" | "calendar" | "filter";
 
 const DRAWER_FEATURES = ["export", "calendar", "filter"] as const;
@@ -109,9 +108,7 @@ export default function MobileReviewSettingsDrawer({
     cameras.forEach((camera) => {
       const cameraConfig = config.cameras[camera];
       cameraConfig.objects.track.forEach((label) => {
-        if (!ATTRIBUTES.includes(label)) {
-          labels.add(label);
-        }
+        labels.add(label);
       });
 
       if (cameraConfig.audio.enabled_in_config) {
diff --git a/web/src/components/settings/GeneralSettings.tsx b/web/src/components/settings/GeneralSettings.tsx
index e225257f3..b13051ea4 100644
--- a/web/src/components/settings/GeneralSettings.tsx
+++ b/web/src/components/settings/GeneralSettings.tsx
@@ -1,7 +1,6 @@
 import {
   LuActivity,
   LuGithub,
-  LuHardDrive,
   LuLifeBuoy,
   LuList,
   LuMoon,
@@ -138,18 +137,6 @@ export default function GeneralSettings({ className }: GeneralSettings) {
               <DropdownMenuLabel>System</DropdownMenuLabel>
               <DropdownMenuSeparator />
               <DropdownMenuGroup className={isDesktop ? "" : "flex flex-col"}>
-                <Link to="/storage">
-                  <MenuItem
-                    className={
-                      isDesktop
-                        ? "cursor-pointer"
-                        : "p-2 flex items-center text-sm"
-                    }
-                  >
-                    <LuHardDrive className="mr-2 size-4" />
-                    <span>Storage</span>
-                  </MenuItem>
-                </Link>
                 <Link to="/system">
                   <MenuItem
                     className={
diff --git a/web/src/hooks/use-optimistic-state.ts b/web/src/hooks/use-optimistic-state.ts
new file mode 100644
index 000000000..ca33fe885
--- /dev/null
+++ b/web/src/hooks/use-optimistic-state.ts
@@ -0,0 +1,43 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+
+type OptimisticStateResult<T> = [T, (newValue: T) => void];
+
+const useOptimisticState = <T>(
+  initialState: T,
+  setState: (newValue: T) => void,
+  delay: number = 20,
+): OptimisticStateResult<T> => {
+  const [optimisticValue, setOptimisticValue] = useState<T>(initialState);
+  const debounceTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const handleValueChange = useCallback(
+    (newValue: T) => {
+      // Update the optimistic value immediately
+      setOptimisticValue(newValue);
+
+      // Clear any pending debounce timeout
+      if (debounceTimeout.current) {
+        clearTimeout(debounceTimeout.current);
+      }
+
+      // Set a new debounce timeout
+      debounceTimeout.current = setTimeout(() => {
+        // Update the actual value using the provided setter function
+        setState(newValue);
+      }, delay);
+    },
+    [delay, setState],
+  );
+
+  useEffect(() => {
+    return () => {
+      if (debounceTimeout.current) {
+        clearTimeout(debounceTimeout.current);
+      }
+    };
+  }, []);
+
+  return [optimisticValue, handleValueChange];
+};
+
+export default useOptimisticState;
diff --git a/web/src/pages/Storage.tsx b/web/src/pages/Storage.tsx
deleted file mode 100644
index ad0d7774d..000000000
--- a/web/src/pages/Storage.tsx
+++ /dev/null
@@ -1,245 +0,0 @@
-import { useWs } from "@/api/ws";
-import ActivityIndicator from "@/components/indicators/activity-indicator";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import Heading from "@/components/ui/heading";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { useMemo } from "react";
-import { LuAlertCircle } from "react-icons/lu";
-import useSWR from "swr";
-
-type CameraStorage = {
-  [key: string]: {
-    bandwidth: number;
-    usage: number;
-    usage_percent: number;
-  };
-};
-
-const emptyObject = Object.freeze({});
-
-function Storage() {
-  const { data: storage } = useSWR<CameraStorage>("recordings/storage");
-
-  const {
-    value: { payload: stats },
-  } = useWs("stats", "");
-  const { data: initialStats } = useSWR("stats");
-
-  const { service } = stats || initialStats || emptyObject;
-
-  const hasSeparateMedia = useMemo(() => {
-    return (
-      service &&
-      service["storage"]["/media/frigate/recordings"]["total"] !=
-        service["storage"]["/media/frigate/clips"]["total"]
-    );
-  }, [service]);
-
-  const getUnitSize = (MB: number) => {
-    if (isNaN(MB) || MB < 0) return "Invalid number";
-    if (MB < 1024) return `${MB} MiB`;
-    if (MB < 1048576) return `${(MB / 1024).toFixed(2)} GiB`;
-
-    return `${(MB / 1048576).toFixed(2)} TiB`;
-  };
-
-  if (!service || !storage) {
-    return <ActivityIndicator />;
-  }
-
-  return (
-    <>
-      <Heading as="h2">Storage</Heading>
-
-      <Heading className="my-4" as="h3">
-        Overview
-      </Heading>
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <Card>
-          <CardHeader>
-            <div className="flex items-center">
-              <CardTitle>Data</CardTitle>
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button size="icon" variant="ghost">
-                      <LuAlertCircle />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>
-                      Overview of total used storage and total capacity of the
-                      drives that hold the recordings and snapshots directories.
-                    </p>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-            </div>
-          </CardHeader>
-          <CardContent>
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>Location</TableHead>
-                  <TableHead>Used</TableHead>
-                  <TableHead>Total</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                <TableRow>
-                  <TableCell>
-                    {hasSeparateMedia ? "Recordings" : "Recordings & Snapshots"}
-                  </TableCell>
-                  <TableCell>
-                    {getUnitSize(
-                      service["storage"]["/media/frigate/recordings"]["used"],
-                    )}
-                  </TableCell>
-                  <TableCell>
-                    {getUnitSize(
-                      service["storage"]["/media/frigate/recordings"]["total"],
-                    )}
-                  </TableCell>
-                </TableRow>
-                {hasSeparateMedia && (
-                  <TableRow>
-                    <TableCell>Snapshots</TableCell>
-                    <TableCell>
-                      {getUnitSize(
-                        service["storage"]["/media/frigate/clips"]["used"],
-                      )}
-                    </TableCell>
-                    <TableCell>
-                      {getUnitSize(
-                        service["storage"]["/media/frigate/clips"]["total"],
-                      )}
-                    </TableCell>
-                  </TableRow>
-                )}
-              </TableBody>
-            </Table>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <div className="flex items-center">
-              <CardTitle>Memory</CardTitle>
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button size="icon" variant="ghost">
-                      <LuAlertCircle />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>Overview of used and total memory in frigate process.</p>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-            </div>
-          </CardHeader>
-          <CardContent>
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>Location</TableHead>
-                  <TableHead>Used</TableHead>
-                  <TableHead>Total</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                <TableRow>
-                  <TableCell>/dev/shm</TableCell>
-                  <TableCell>
-                    {getUnitSize(service["storage"]["/dev/shm"]["used"])}
-                  </TableCell>
-                  <TableCell>
-                    {getUnitSize(service["storage"]["/dev/shm"]["total"])}
-                  </TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableCell>/tmp/cache</TableCell>
-                  <TableCell>
-                    {getUnitSize(service["storage"]["/tmp/cache"]["used"])}
-                  </TableCell>
-                  <TableCell>
-                    {getUnitSize(service["storage"]["/tmp/cache"]["total"])}
-                  </TableCell>
-                </TableRow>
-              </TableBody>
-            </Table>
-          </CardContent>
-        </Card>
-      </div>
-
-      <div className="flex items-center my-4">
-        <Heading as="h4">Cameras</Heading>
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button size="icon" variant="ghost">
-                <LuAlertCircle />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>Overview of per-camera storage usage and bandwidth.</p>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      </div>
-
-      <div className="grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 gap-4">
-        {Object.entries(storage).map(([name, camera]) => (
-          <Card key={name}>
-            <div className="capitalize text-lg flex justify-between">
-              <Button variant="link">
-                <a className="capitalize" href={`/cameras/${name}`}>
-                  {name.replaceAll("_", " ")}
-                </a>
-              </Button>
-            </div>
-            <div className="p-2">
-              <Table className="w-full">
-                <TableHeader>
-                  <TableRow>
-                    <TableCell>Usage</TableCell>
-                    <TableCell>Stream Bandwidth</TableCell>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  <TableRow>
-                    <TableCell>
-                      {Math.round(camera["usage_percent"] ?? 0)}%
-                    </TableCell>
-                    <TableCell>
-                      {camera["bandwidth"]
-                        ? `${getUnitSize(camera["bandwidth"])}/hr`
-                        : "Calculating..."}
-                    </TableCell>
-                  </TableRow>
-                </TableBody>
-              </Table>
-            </div>
-          </Card>
-        ))}
-      </div>
-    </>
-  );
-}
-
-export default Storage;
diff --git a/web/src/pages/System.tsx b/web/src/pages/System.tsx
index 9412ad1c1..a0fd69b95 100644
--- a/web/src/pages/System.tsx
+++ b/web/src/pages/System.tsx
@@ -1,19 +1,15 @@
 import useSWR from "swr";
 import { FrigateStats } from "@/types/stats";
-import { useEffect, useMemo, useState } from "react";
-import SystemGraph from "@/components/graph/SystemGraph";
-import { useFrigateStats } from "@/api/ws";
+import { useState } from "react";
 import TimeAgo from "@/components/dynamic/TimeAgo";
-import {
-  DetectorCpuThreshold,
-  DetectorMemThreshold,
-  GPUMemThreshold,
-  GPUUsageThreshold,
-  InferenceThreshold,
-} from "@/types/graph";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
-import { Button } from "@/components/ui/button";
-import VainfoDialog from "@/components/overlay/VainfoDialog";
+import { isDesktop, isMobile } from "react-device-detect";
+import GeneralMetrics from "@/views/system/GeneralMetrics";
+import StorageMetrics from "@/views/system/StorageMetrics";
+import { LuActivity, LuHardDrive } from "react-icons/lu";
+import { FaVideo } from "react-icons/fa";
+import Logo from "@/components/Logo";
+import useOptimisticState from "@/hooks/use-optimistic-state";
 
 const metrics = ["general", "storage", "cameras"] as const;
 type SystemMetric = (typeof metrics)[number];
@@ -22,6 +18,7 @@ function System() {
   // stats page
 
   const [page, setPage] = useState<SystemMetric>("general");
+  const [pageToggle, setPageToggle] = useOptimisticState(page, setPage, 100);
   const [lastUpdated, setLastUpdated] = useState<number>(Date.now() / 1000);
 
   // stats collection
@@ -32,26 +29,32 @@ function System() {
 
   return (
     <div className="size-full p-2 flex flex-col">
-      <div className="w-full h-8 flex justify-between items-center">
+      <div className="w-full h-11 relative flex justify-between items-center">
+        {isMobile && (
+          <Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
+        )}
         <ToggleGroup
           className="*:px-3 *:py-4 *:rounded-md"
           type="single"
           size="sm"
-          value={page}
+          value={pageToggle}
           onValueChange={(value: SystemMetric) => {
             if (value) {
-              setPage(value);
+              setPageToggle(value);
             }
           }} // don't allow the severity to be unselected
         >
           {Object.values(metrics).map((item) => (
             <ToggleGroupItem
               key={item}
-              className={`flex items-center justify-between gap-2 ${page == item ? "" : "text-gray-500"}`}
+              className={`flex items-center justify-between gap-2 ${pageToggle == item ? "" : "*:text-gray-500"}`}
               value={item}
               aria-label={`Select ${item}`}
             >
-              <div className="capitalize">{item}</div>
+              {item == "general" && <LuActivity className="size-4" />}
+              {item == "storage" && <LuHardDrive className="size-4" />}
+              {item == "cameras" && <FaVideo className="size-4" />}
+              {isDesktop && <div className="capitalize">{item}</div>}
             </ToggleGroupItem>
           ))}
         </ToggleGroup>
@@ -78,6 +81,7 @@ function System() {
           setLastUpdated={setLastUpdated}
         />
       )}
+      {page == "storage" && <StorageMetrics setLastUpdated={setLastUpdated} />}
     </div>
   );
 }
@@ -182,13 +186,13 @@ export default System;
             if (camera.enabled) {
               return (
                 <div key={camera.name} className="grid grid-cols-2">
-                  <SystemGraph
+                  <ThresholdBarGraph
                     graphId={`${camera.name}-cpu`}
                     title={`${camera.name.replaceAll("_", " ")} CPU`}
                     unit="%"
                     data={Object.values(cameraCpuSeries[camera.name] || {})}
                   />
-                  <SystemGraph
+                  <ThresholdBarGraph
                     graphId={`${camera.name}-fps`}
                     title={`${camera.name.replaceAll("_", " ")} FPS`}
                     unit=""
@@ -202,401 +206,3 @@ export default System;
           })}
       </div>
  */
-
-type GeneralMetricsProps = {
-  lastUpdated: number;
-  setLastUpdated: (last: number) => void;
-};
-function GeneralMetrics({ lastUpdated, setLastUpdated }: GeneralMetricsProps) {
-  // extra info
-
-  const [showVainfo, setShowVainfo] = useState(false);
-
-  // stats
-
-  const { data: initialStats } = useSWR<FrigateStats[]>(
-    [
-      "stats/history",
-      { keys: "cpu_usages,detectors,gpu_usages,processes,service" },
-    ],
-    {
-      revalidateOnFocus: false,
-    },
-  );
-
-  const [statsHistory, setStatsHistory] = useState<FrigateStats[]>([]);
-  const { payload: updatedStats } = useFrigateStats();
-
-  useEffect(() => {
-    if (initialStats == undefined || initialStats.length == 0) {
-      return;
-    }
-
-    if (statsHistory.length == 0) {
-      setStatsHistory(initialStats);
-      return;
-    }
-
-    if (!updatedStats) {
-      return;
-    }
-
-    if (updatedStats.service.last_updated > lastUpdated) {
-      setStatsHistory([...statsHistory, updatedStats]);
-      setLastUpdated(Date.now() / 1000);
-    }
-  }, [initialStats, updatedStats, statsHistory, lastUpdated, setLastUpdated]);
-
-  // timestamps
-
-  const updateTimes = useMemo(
-    () => statsHistory.map((stats) => stats.service.last_updated),
-    [statsHistory],
-  );
-
-  // detectors stats
-
-  const detInferenceTimeSeries = useMemo(() => {
-    if (!statsHistory) {
-      return [];
-    }
-
-    const series: {
-      [key: string]: { name: string; data: { x: number; y: number }[] };
-    } = {};
-
-    statsHistory.forEach((stats, statsIdx) => {
-      if (!stats) {
-        return;
-      }
-
-      Object.entries(stats.detectors).forEach(([key, stats]) => {
-        if (!(key in series)) {
-          series[key] = { name: key, data: [] };
-        }
-
-        series[key].data.push({ x: statsIdx, y: stats.inference_speed });
-      });
-    });
-    return Object.values(series);
-  }, [statsHistory]);
-
-  const detCpuSeries = useMemo(() => {
-    if (!statsHistory) {
-      return [];
-    }
-
-    const series: {
-      [key: string]: { name: string; data: { x: number; y: string }[] };
-    } = {};
-
-    statsHistory.forEach((stats, statsIdx) => {
-      if (!stats) {
-        return;
-      }
-
-      Object.entries(stats.detectors).forEach(([key, detStats]) => {
-        if (!(key in series)) {
-          series[key] = { name: key, data: [] };
-        }
-
-        series[key].data.push({
-          x: statsIdx,
-          y: stats.cpu_usages[detStats.pid.toString()].cpu,
-        });
-      });
-    });
-    return Object.values(series);
-  }, [statsHistory]);
-
-  const detMemSeries = useMemo(() => {
-    if (!statsHistory) {
-      return [];
-    }
-
-    const series: {
-      [key: string]: { name: string; data: { x: number; y: string }[] };
-    } = {};
-
-    statsHistory.forEach((stats, statsIdx) => {
-      if (!stats) {
-        return;
-      }
-
-      Object.entries(stats.detectors).forEach(([key, detStats]) => {
-        if (!(key in series)) {
-          series[key] = { name: key, data: [] };
-        }
-
-        series[key].data.push({
-          x: statsIdx,
-          y: stats.cpu_usages[detStats.pid.toString()].mem,
-        });
-      });
-    });
-    return Object.values(series);
-  }, [statsHistory]);
-
-  // gpu stats
-
-  const gpuSeries = useMemo(() => {
-    if (!statsHistory) {
-      return [];
-    }
-
-    const series: {
-      [key: string]: { name: string; data: { x: number; y: string }[] };
-    } = {};
-
-    statsHistory.forEach((stats, statsIdx) => {
-      if (!stats) {
-        return;
-      }
-
-      Object.entries(stats.gpu_usages || []).forEach(([key, stats]) => {
-        if (!(key in series)) {
-          series[key] = { name: key, data: [] };
-        }
-
-        series[key].data.push({ x: statsIdx, y: stats.gpu });
-      });
-    });
-    return Object.keys(series).length > 0 ? Object.values(series) : [];
-  }, [statsHistory]);
-
-  const gpuMemSeries = useMemo(() => {
-    if (!statsHistory) {
-      return [];
-    }
-
-    const series: {
-      [key: string]: { name: string; data: { x: number; y: string }[] };
-    } = {};
-
-    statsHistory.forEach((stats, statsIdx) => {
-      if (!stats) {
-        return;
-      }
-
-      Object.entries(stats.gpu_usages || {}).forEach(([key, stats]) => {
-        if (!(key in series)) {
-          series[key] = { name: key, data: [] };
-        }
-
-        series[key].data.push({ x: statsIdx, y: stats.mem });
-      });
-    });
-    return Object.values(series);
-  }, [statsHistory]);
-
-  // other processes stats
-
-  const otherProcessCpuSeries = useMemo(() => {
-    if (!statsHistory) {
-      return [];
-    }
-
-    const series: {
-      [key: string]: { name: string; data: { x: number; y: string }[] };
-    } = {};
-
-    statsHistory.forEach((stats, statsIdx) => {
-      if (!stats) {
-        return;
-      }
-
-      Object.entries(stats.processes).forEach(([key, procStats]) => {
-        if (procStats.pid.toString() in stats.cpu_usages) {
-          if (!(key in series)) {
-            series[key] = { name: key, data: [] };
-          }
-
-          series[key].data.push({
-            x: statsIdx,
-            y: stats.cpu_usages[procStats.pid.toString()].cpu,
-          });
-        }
-      });
-    });
-    return Object.keys(series).length > 0 ? Object.values(series) : [];
-  }, [statsHistory]);
-
-  const otherProcessMemSeries = useMemo(() => {
-    if (!statsHistory) {
-      return [];
-    }
-
-    const series: {
-      [key: string]: { name: string; data: { x: number; y: string }[] };
-    } = {};
-
-    statsHistory.forEach((stats, statsIdx) => {
-      if (!stats) {
-        return;
-      }
-
-      Object.entries(stats.processes).forEach(([key, procStats]) => {
-        if (procStats.pid.toString() in stats.cpu_usages) {
-          if (!(key in series)) {
-            series[key] = { name: key, data: [] };
-          }
-
-          series[key].data.push({
-            x: statsIdx,
-            y: stats.cpu_usages[procStats.pid.toString()].mem,
-          });
-        }
-      });
-    });
-    return Object.values(series);
-  }, [statsHistory]);
-
-  if (statsHistory.length == 0) {
-    return;
-  }
-
-  return (
-    <>
-      <VainfoDialog showVainfo={showVainfo} setShowVainfo={setShowVainfo} />
-
-      <div className="size-full mt-4 flex flex-col overflow-y-auto">
-        <div className="text-muted-foreground text-sm font-medium">
-          Detectors
-        </div>
-        <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
-          <div className="p-2.5 bg-primary rounded-2xl flex-col">
-            <div className="mb-5">Detector Inference Speed</div>
-            {detInferenceTimeSeries.map((series) => (
-              <SystemGraph
-                key={series.name}
-                graphId={`${series.name}-inference`}
-                name={series.name}
-                unit="ms"
-                threshold={InferenceThreshold}
-                updateTimes={updateTimes}
-                data={[series]}
-              />
-            ))}
-          </div>
-          <div className="p-2.5 bg-primary rounded-2xl flex-col">
-            <div className="mb-5">Detector CPU Usage</div>
-            {detCpuSeries.map((series) => (
-              <SystemGraph
-                key={series.name}
-                graphId={`${series.name}-cpu`}
-                unit="%"
-                name={series.name}
-                threshold={DetectorCpuThreshold}
-                updateTimes={updateTimes}
-                data={[series]}
-              />
-            ))}
-          </div>
-          <div className="p-2.5 bg-primary rounded-2xl flex-col">
-            <div className="mb-5">Detector Memory Usage</div>
-            {detMemSeries.map((series) => (
-              <SystemGraph
-                key={series.name}
-                graphId={`${series.name}-mem`}
-                unit="%"
-                name={series.name}
-                threshold={DetectorMemThreshold}
-                updateTimes={updateTimes}
-                data={[series]}
-              />
-            ))}
-          </div>
-        </div>
-
-        {statsHistory.length > 0 && statsHistory[0].gpu_usages && (
-          <>
-            <div className="mt-4 flex items-center justify-between">
-              <div className="text-muted-foreground text-sm font-medium">
-                GPUs
-              </div>
-              {Object.keys(statsHistory[0].gpu_usages).filter(
-                (key) =>
-                  key == "amd-vaapi" ||
-                  key == "intel-vaapi" ||
-                  key == "intel-qsv",
-              ).length > 0 && (
-                <Button
-                  className="cursor-pointer"
-                  variant="secondary"
-                  size="sm"
-                  onClick={() => setShowVainfo(true)}
-                >
-                  Hardware Info
-                </Button>
-              )}
-            </div>
-            <div className=" mt-4 grid grid-cols-1 sm:grid-cols-2 gap-2">
-              <div className="p-2.5 bg-primary rounded-2xl flex-col">
-                <div className="mb-5">GPU Usage</div>
-                {gpuSeries.map((series) => (
-                  <SystemGraph
-                    key={series.name}
-                    graphId={`${series.name}-gpu`}
-                    name={series.name}
-                    unit=""
-                    threshold={GPUUsageThreshold}
-                    updateTimes={updateTimes}
-                    data={[series]}
-                  />
-                ))}
-              </div>
-              <div className="p-2.5 bg-primary rounded-2xl flex-col">
-                <div className="mb-5">GPU Memory</div>
-                {gpuMemSeries.map((series) => (
-                  <SystemGraph
-                    key={series.name}
-                    graphId={`${series.name}-mem`}
-                    unit=""
-                    name={series.name}
-                    threshold={GPUMemThreshold}
-                    updateTimes={updateTimes}
-                    data={[series]}
-                  />
-                ))}
-              </div>
-            </div>
-          </>
-        )}
-
-        <div className="mt-4 text-muted-foreground text-sm font-medium">
-          Other Processes
-        </div>
-        <div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-2">
-          <div className="p-2.5 bg-primary rounded-2xl flex-col">
-            <div className="mb-5">Process CPU Usage</div>
-            {otherProcessCpuSeries.map((series) => (
-              <SystemGraph
-                key={series.name}
-                graphId={`${series.name}-cpu`}
-                name={series.name.replaceAll("_", " ")}
-                unit="%"
-                threshold={DetectorCpuThreshold}
-                updateTimes={updateTimes}
-                data={[series]}
-              />
-            ))}
-          </div>
-          <div className="p-2.5 bg-primary rounded-2xl flex-col">
-            <div className="mb-5">Process Memory Usage</div>
-            {otherProcessMemSeries.map((series) => (
-              <SystemGraph
-                key={series.name}
-                graphId={`${series.name}-mem`}
-                unit="%"
-                name={series.name.replaceAll("_", " ")}
-                threshold={DetectorMemThreshold}
-                updateTimes={updateTimes}
-                data={[series]}
-              />
-            ))}
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index 05cfa182c..8a12ec347 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -41,6 +41,7 @@ import { RecordingStartingPoint } from "@/types/record";
 import VideoControls from "@/components/player/VideoControls";
 import { TimeRange } from "@/types/timeline";
 import { useCameraMotionNextTimestamp } from "@/hooks/use-camera-activity";
+import useOptimisticState from "@/hooks/use-optimistic-state";
 
 type EventViewProps = {
   reviews?: ReviewSegment[];
@@ -199,6 +200,11 @@ export default function EventView({
   );
 
   const [motionOnly, setMotionOnly] = useState(false);
+  const [severityToggle, setSeverityToggle] = useOptimisticState(
+    severity,
+    setSeverity,
+    100,
+  );
 
   if (!config) {
     return <ActivityIndicator />;
@@ -214,13 +220,13 @@ export default function EventView({
           className="*:px-3 *:py-4 *:rounded-md"
           type="single"
           size="sm"
-          value={severity}
+          value={severityToggle}
           onValueChange={(value: ReviewSeverity) =>
-            value ? setSeverity(value) : null
+            value ? setSeverityToggle(value) : null
           } // don't allow the severity to be unselected
         >
           <ToggleGroupItem
-            className={`${severity == "alert" ? "" : "text-gray-500"}`}
+            className={`${severityToggle == "alert" ? "" : "text-gray-500"}`}
             value="alert"
             aria-label="Select alerts"
           >
@@ -230,7 +236,7 @@ export default function EventView({
             </div>
           </ToggleGroupItem>
           <ToggleGroupItem
-            className={`${severity == "detection" ? "" : "text-gray-500"}`}
+            className={`${severityToggle == "detection" ? "" : "text-gray-500"}`}
             value="detection"
             aria-label="Select detections"
           >
@@ -242,7 +248,7 @@ export default function EventView({
           </ToggleGroupItem>
           <ToggleGroupItem
             className={`px-3 py-4 rounded-2xl ${
-              severity == "significant_motion" ? "" : "text-gray-500"
+              severityToggle == "significant_motion" ? "" : "text-gray-500"
             }`}
             value="significant_motion"
             aria-label="Select motion"
@@ -845,7 +851,7 @@ function MotionReview({
                   onClick={() =>
                     onOpenRecording({
                       camera: camera.name,
-                      startTime: currentTime,
+                      startTime: Math.min(currentTime, Date.now() / 1000 - 10),
                       severity: "significant_motion",
                     })
                   }
diff --git a/web/src/views/events/RecordingView.tsx b/web/src/views/events/RecordingView.tsx
index c6cc866e9..dbcc37752 100644
--- a/web/src/views/events/RecordingView.tsx
+++ b/web/src/views/events/RecordingView.tsx
@@ -142,7 +142,7 @@ export function RecordingView({
   );
 
   useEffect(() => {
-    if (scrubbing) {
+    if (scrubbing || exportRange) {
       if (
         currentTime > currentTimeRange.before + 60 ||
         currentTime < currentTimeRange.after - 60
@@ -157,6 +157,8 @@ export function RecordingView({
         controller.scrubToTimestamp(currentTime);
       });
     }
+    // we only want to seek when current time updates
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     currentTime,
     scrubbing,
@@ -486,7 +488,9 @@ function Timeline({
 
       setExportRange({ after: exportStart, before: exportEnd });
     }
-  }, [exportRange, exportStart, exportEnd, setExportRange, setCurrentTime]);
+    // we only want to update when the export parts change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [exportStart, exportEnd, setExportRange, setCurrentTime]);
 
   return (
     <div
diff --git a/web/src/views/system/GeneralMetrics.tsx b/web/src/views/system/GeneralMetrics.tsx
new file mode 100644
index 000000000..ba486b2e6
--- /dev/null
+++ b/web/src/views/system/GeneralMetrics.tsx
@@ -0,0 +1,441 @@
+import useSWR from "swr";
+import { FrigateStats } from "@/types/stats";
+import { useEffect, useMemo, useState } from "react";
+import { useFrigateStats } from "@/api/ws";
+import {
+  DetectorCpuThreshold,
+  DetectorMemThreshold,
+  GPUMemThreshold,
+  GPUUsageThreshold,
+  InferenceThreshold,
+} from "@/types/graph";
+import { Button } from "@/components/ui/button";
+import VainfoDialog from "@/components/overlay/VainfoDialog";
+import { ThresholdBarGraph } from "@/components/graph/SystemGraph";
+import { Skeleton } from "@/components/ui/skeleton";
+
+type GeneralMetricsProps = {
+  lastUpdated: number;
+  setLastUpdated: (last: number) => void;
+};
+export default function GeneralMetrics({
+  lastUpdated,
+  setLastUpdated,
+}: GeneralMetricsProps) {
+  // extra info
+
+  const [showVainfo, setShowVainfo] = useState(false);
+
+  // stats
+
+  const { data: initialStats } = useSWR<FrigateStats[]>(
+    [
+      "stats/history",
+      { keys: "cpu_usages,detectors,gpu_usages,processes,service" },
+    ],
+    {
+      revalidateOnFocus: false,
+    },
+  );
+
+  const [statsHistory, setStatsHistory] = useState<FrigateStats[]>([]);
+  const { payload: updatedStats } = useFrigateStats();
+
+  useEffect(() => {
+    if (initialStats == undefined || initialStats.length == 0) {
+      return;
+    }
+
+    if (statsHistory.length == 0) {
+      setStatsHistory(initialStats);
+      return;
+    }
+
+    if (!updatedStats) {
+      return;
+    }
+
+    if (updatedStats.service.last_updated > lastUpdated) {
+      setStatsHistory([...statsHistory, updatedStats]);
+      setLastUpdated(Date.now() / 1000);
+    }
+  }, [initialStats, updatedStats, statsHistory, lastUpdated, setLastUpdated]);
+
+  // timestamps
+
+  const updateTimes = useMemo(
+    () => statsHistory.map((stats) => stats.service.last_updated),
+    [statsHistory],
+  );
+
+  // detectors stats
+
+  const detInferenceTimeSeries = useMemo(() => {
+    if (!statsHistory) {
+      return [];
+    }
+
+    const series: {
+      [key: string]: { name: string; data: { x: number; y: number }[] };
+    } = {};
+
+    statsHistory.forEach((stats, statsIdx) => {
+      if (!stats) {
+        return;
+      }
+
+      Object.entries(stats.detectors).forEach(([key, stats]) => {
+        if (!(key in series)) {
+          series[key] = { name: key, data: [] };
+        }
+
+        series[key].data.push({ x: statsIdx, y: stats.inference_speed });
+      });
+    });
+    return Object.values(series);
+  }, [statsHistory]);
+
+  const detCpuSeries = useMemo(() => {
+    if (!statsHistory) {
+      return [];
+    }
+
+    const series: {
+      [key: string]: { name: string; data: { x: number; y: string }[] };
+    } = {};
+
+    statsHistory.forEach((stats, statsIdx) => {
+      if (!stats) {
+        return;
+      }
+
+      Object.entries(stats.detectors).forEach(([key, detStats]) => {
+        if (!(key in series)) {
+          series[key] = { name: key, data: [] };
+        }
+
+        series[key].data.push({
+          x: statsIdx,
+          y: stats.cpu_usages[detStats.pid.toString()].cpu,
+        });
+      });
+    });
+    return Object.values(series);
+  }, [statsHistory]);
+
+  const detMemSeries = useMemo(() => {
+    if (!statsHistory) {
+      return [];
+    }
+
+    const series: {
+      [key: string]: { name: string; data: { x: number; y: string }[] };
+    } = {};
+
+    statsHistory.forEach((stats, statsIdx) => {
+      if (!stats) {
+        return;
+      }
+
+      Object.entries(stats.detectors).forEach(([key, detStats]) => {
+        if (!(key in series)) {
+          series[key] = { name: key, data: [] };
+        }
+
+        series[key].data.push({
+          x: statsIdx,
+          y: stats.cpu_usages[detStats.pid.toString()].mem,
+        });
+      });
+    });
+    return Object.values(series);
+  }, [statsHistory]);
+
+  // gpu stats
+
+  const gpuSeries = useMemo(() => {
+    if (!statsHistory) {
+      return [];
+    }
+
+    const series: {
+      [key: string]: { name: string; data: { x: number; y: string }[] };
+    } = {};
+
+    statsHistory.forEach((stats, statsIdx) => {
+      if (!stats) {
+        return;
+      }
+
+      Object.entries(stats.gpu_usages || []).forEach(([key, stats]) => {
+        if (!(key in series)) {
+          series[key] = { name: key, data: [] };
+        }
+
+        series[key].data.push({ x: statsIdx, y: stats.gpu });
+      });
+    });
+    return Object.keys(series).length > 0 ? Object.values(series) : [];
+  }, [statsHistory]);
+
+  const gpuMemSeries = useMemo(() => {
+    if (!statsHistory) {
+      return [];
+    }
+
+    const series: {
+      [key: string]: { name: string; data: { x: number; y: string }[] };
+    } = {};
+
+    statsHistory.forEach((stats, statsIdx) => {
+      if (!stats) {
+        return;
+      }
+
+      Object.entries(stats.gpu_usages || {}).forEach(([key, stats]) => {
+        if (!(key in series)) {
+          series[key] = { name: key, data: [] };
+        }
+
+        series[key].data.push({ x: statsIdx, y: stats.mem });
+      });
+    });
+    return Object.values(series);
+  }, [statsHistory]);
+
+  // other processes stats
+
+  const otherProcessCpuSeries = useMemo(() => {
+    if (!statsHistory) {
+      return [];
+    }
+
+    const series: {
+      [key: string]: { name: string; data: { x: number; y: string }[] };
+    } = {};
+
+    statsHistory.forEach((stats, statsIdx) => {
+      if (!stats) {
+        return;
+      }
+
+      Object.entries(stats.processes).forEach(([key, procStats]) => {
+        if (procStats.pid.toString() in stats.cpu_usages) {
+          if (!(key in series)) {
+            series[key] = { name: key, data: [] };
+          }
+
+          series[key].data.push({
+            x: statsIdx,
+            y: stats.cpu_usages[procStats.pid.toString()].cpu,
+          });
+        }
+      });
+    });
+    return Object.keys(series).length > 0 ? Object.values(series) : [];
+  }, [statsHistory]);
+
+  const otherProcessMemSeries = useMemo(() => {
+    if (!statsHistory) {
+      return [];
+    }
+
+    const series: {
+      [key: string]: { name: string; data: { x: number; y: string }[] };
+    } = {};
+
+    statsHistory.forEach((stats, statsIdx) => {
+      if (!stats) {
+        return;
+      }
+
+      Object.entries(stats.processes).forEach(([key, procStats]) => {
+        if (procStats.pid.toString() in stats.cpu_usages) {
+          if (!(key in series)) {
+            series[key] = { name: key, data: [] };
+          }
+
+          series[key].data.push({
+            x: statsIdx,
+            y: stats.cpu_usages[procStats.pid.toString()].mem,
+          });
+        }
+      });
+    });
+    return Object.values(series);
+  }, [statsHistory]);
+
+  return (
+    <>
+      <VainfoDialog showVainfo={showVainfo} setShowVainfo={setShowVainfo} />
+
+      <div className="size-full mt-4 flex flex-col overflow-y-auto">
+        <div className="text-muted-foreground text-sm font-medium">
+          Detectors
+        </div>
+        <div className="w-full mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
+          {detInferenceTimeSeries.length != 0 ? (
+            <div className="p-2.5 bg-primary rounded-2xl flex-col">
+              <div className="mb-5">Detector Inference Speed</div>
+              {detInferenceTimeSeries.map((series) => (
+                <ThresholdBarGraph
+                  key={series.name}
+                  graphId={`${series.name}-inference`}
+                  name={series.name}
+                  unit="ms"
+                  threshold={InferenceThreshold}
+                  updateTimes={updateTimes}
+                  data={[series]}
+                />
+              ))}
+            </div>
+          ) : (
+            <Skeleton className="w-full aspect-video" />
+          )}
+          {statsHistory.length != 0 ? (
+            <div className="p-2.5 bg-primary rounded-2xl flex-col">
+              <div className="mb-5">Detector CPU Usage</div>
+              {detCpuSeries.map((series) => (
+                <ThresholdBarGraph
+                  key={series.name}
+                  graphId={`${series.name}-cpu`}
+                  unit="%"
+                  name={series.name}
+                  threshold={DetectorCpuThreshold}
+                  updateTimes={updateTimes}
+                  data={[series]}
+                />
+              ))}
+            </div>
+          ) : (
+            <Skeleton className="w-full aspect-video" />
+          )}
+          {statsHistory.length != 0 ? (
+            <div className="p-2.5 bg-primary rounded-2xl flex-col">
+              <div className="mb-5">Detector Memory Usage</div>
+              {detMemSeries.map((series) => (
+                <ThresholdBarGraph
+                  key={series.name}
+                  graphId={`${series.name}-mem`}
+                  unit="%"
+                  name={series.name}
+                  threshold={DetectorMemThreshold}
+                  updateTimes={updateTimes}
+                  data={[series]}
+                />
+              ))}
+            </div>
+          ) : (
+            <Skeleton className="w-full aspect-video" />
+          )}
+        </div>
+
+        {(statsHistory.length == 0 || statsHistory[0].gpu_usages) && (
+          <>
+            <div className="mt-4 flex items-center justify-between">
+              <div className="text-muted-foreground text-sm font-medium">
+                GPUs
+              </div>
+              {statsHistory.length > 0 &&
+                Object.keys(statsHistory[0].gpu_usages ?? {}).filter(
+                  (key) =>
+                    key == "amd-vaapi" ||
+                    key == "intel-vaapi" ||
+                    key == "intel-qsv",
+                ).length > 0 && (
+                  <Button
+                    className="cursor-pointer"
+                    variant="secondary"
+                    size="sm"
+                    onClick={() => setShowVainfo(true)}
+                  >
+                    Hardware Info
+                  </Button>
+                )}
+            </div>
+            <div className=" mt-4 grid grid-cols-1 sm:grid-cols-2 gap-2">
+              {statsHistory.length != 0 ? (
+                <div className="p-2.5 bg-primary rounded-2xl flex-col">
+                  <div className="mb-5">GPU Usage</div>
+                  {gpuSeries.map((series) => (
+                    <ThresholdBarGraph
+                      key={series.name}
+                      graphId={`${series.name}-gpu`}
+                      name={series.name}
+                      unit=""
+                      threshold={GPUUsageThreshold}
+                      updateTimes={updateTimes}
+                      data={[series]}
+                    />
+                  ))}
+                </div>
+              ) : (
+                <Skeleton className="w-full aspect-video" />
+              )}
+              {statsHistory.length != 0 ? (
+                <div className="p-2.5 bg-primary rounded-2xl flex-col">
+                  <div className="mb-5">GPU Memory</div>
+                  {gpuMemSeries.map((series) => (
+                    <ThresholdBarGraph
+                      key={series.name}
+                      graphId={`${series.name}-mem`}
+                      unit=""
+                      name={series.name}
+                      threshold={GPUMemThreshold}
+                      updateTimes={updateTimes}
+                      data={[series]}
+                    />
+                  ))}
+                </div>
+              ) : (
+                <Skeleton className="w-full aspect-video" />
+              )}
+            </div>
+          </>
+        )}
+
+        <div className="mt-4 text-muted-foreground text-sm font-medium">
+          Other Processes
+        </div>
+        <div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-2">
+          {statsHistory.length != 0 ? (
+            <div className="p-2.5 bg-primary rounded-2xl flex-col">
+              <div className="mb-5">Process CPU Usage</div>
+              {otherProcessCpuSeries.map((series) => (
+                <ThresholdBarGraph
+                  key={series.name}
+                  graphId={`${series.name}-cpu`}
+                  name={series.name.replaceAll("_", " ")}
+                  unit="%"
+                  threshold={DetectorCpuThreshold}
+                  updateTimes={updateTimes}
+                  data={[series]}
+                />
+              ))}
+            </div>
+          ) : (
+            <Skeleton className="w-full aspect-tall" />
+          )}
+          {statsHistory.length != 0 ? (
+            <div className="p-2.5 bg-primary rounded-2xl flex-col">
+              <div className="mb-5">Process Memory Usage</div>
+              {otherProcessMemSeries.map((series) => (
+                <ThresholdBarGraph
+                  key={series.name}
+                  graphId={`${series.name}-mem`}
+                  unit="%"
+                  name={series.name.replaceAll("_", " ")}
+                  threshold={DetectorMemThreshold}
+                  updateTimes={updateTimes}
+                  data={[series]}
+                />
+              ))}
+            </div>
+          ) : (
+            <Skeleton className="w-full aspect-tall" />
+          )}
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/web/src/views/system/StorageMetrics.tsx b/web/src/views/system/StorageMetrics.tsx
new file mode 100644
index 000000000..d275e72fe
--- /dev/null
+++ b/web/src/views/system/StorageMetrics.tsx
@@ -0,0 +1,92 @@
+import { StorageGraph } from "@/components/graph/SystemGraph";
+import { FrigateStats } from "@/types/stats";
+import { useMemo } from "react";
+import useSWR from "swr";
+
+type CameraStorage = {
+  [key: string]: {
+    bandwidth: number;
+    usage: number;
+    usage_percent: number;
+  };
+};
+
+type StorageMetricsProps = {
+  setLastUpdated: (last: number) => void;
+};
+export default function StorageMetrics({
+  setLastUpdated,
+}: StorageMetricsProps) {
+  const { data: cameraStorage } = useSWR<CameraStorage>("recordings/storage");
+  const { data: stats } = useSWR<FrigateStats>("stats");
+
+  const totalStorage = useMemo(() => {
+    if (!cameraStorage || !stats) {
+      return undefined;
+    }
+
+    const totalStorage = {
+      used: 0,
+      total: stats.service.storage["/media/frigate/recordings"]["total"],
+    };
+
+    Object.values(cameraStorage).forEach(
+      (cam) => (totalStorage.used += cam.usage),
+    );
+    setLastUpdated(Date.now() / 1000);
+    return totalStorage;
+  }, [cameraStorage, stats, setLastUpdated]);
+
+  if (!cameraStorage || !stats || !totalStorage) {
+    return;
+  }
+
+  return (
+    <div className="size-full mt-4 flex flex-col overflow-y-auto">
+      <div className="text-muted-foreground text-sm font-medium">
+        General Storage
+      </div>
+      <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
+        <div className="p-2.5 bg-primary rounded-2xl flex-col">
+          <div className="mb-5">Recordings</div>
+          <StorageGraph
+            graphId="general-recordings"
+            used={totalStorage.used}
+            total={totalStorage.total}
+          />
+        </div>
+        <div className="p-2.5 bg-primary rounded-2xl flex-col">
+          <div className="mb-5">/tmp/cache</div>
+          <StorageGraph
+            graphId="general-cache"
+            used={stats.service.storage["/tmp/cache"]["used"]}
+            total={stats.service.storage["/tmp/cache"]["total"]}
+          />
+        </div>
+        <div className="p-2.5 bg-primary rounded-2xl flex-col">
+          <div className="mb-5">/dev/shm</div>
+          <StorageGraph
+            graphId="general-shared-memory"
+            used={stats.service.storage["/dev/shm"]["used"]}
+            total={stats.service.storage["/dev/shm"]["total"]}
+          />
+        </div>
+      </div>
+      <div className="mt-4 text-muted-foreground text-sm font-medium">
+        Camera Storage
+      </div>
+      <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
+        {Object.keys(cameraStorage).map((camera) => (
+          <div className="p-2.5 bg-primary rounded-2xl flex-col">
+            <div className="mb-5 capitalize">{camera.replaceAll("_", " ")}</div>
+            <StorageGraph
+              graphId={`${camera}-storage`}
+              used={cameraStorage[camera].usage}
+              total={totalStorage.used}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}