diff --git a/web/src/components/graph/SystemGraph.tsx b/web/src/components/graph/SystemGraph.tsx
index 0ac536931..ec750dceb 100644
--- a/web/src/components/graph/SystemGraph.tsx
+++ b/web/src/components/graph/SystemGraph.tsx
@@ -1,7 +1,9 @@
 import { useTheme } from "@/context/theme-provider";
+import { FrigateConfig } from "@/types/frigateConfig";
 import { Threshold } from "@/types/graph";
 import { useCallback, useEffect, useMemo } from "react";
 import Chart from "react-apexcharts";
+import useSWR from "swr";
 
 type SystemGraphProps = {
   graphId: string;
@@ -19,6 +21,10 @@ export default function SystemGraph({
   updateTimes,
   data,
 }: SystemGraphProps) {
+  const { data: config } = useSWR<FrigateConfig>("config", {
+    revalidateOnFocus: false,
+  });
+
   const lastValue = useMemo<number>(
     // @ts-expect-error y is valid
     () => data[0].data[data[0].data.length - 1]?.y ?? 0,
@@ -30,9 +36,13 @@ export default function SystemGraph({
   const formatTime = useCallback(
     (val: unknown) => {
       const date = new Date(updateTimes[Math.round(val as number)] * 1000);
-      return `${date.getHours() > 12 ? date.getHours() - 12 : date.getHours()}:${date.getMinutes()}`;
+      return date.toLocaleTimeString([], {
+        hour12: config?.ui.time_format != "24hour",
+        hour: "2-digit",
+        minute: "2-digit",
+      });
     },
-    [updateTimes],
+    [config, updateTimes],
   );
 
   const options = useMemo(() => {
diff --git a/web/src/pages/Logs.tsx b/web/src/pages/Logs.tsx
index 3983a38d2..9f75c3cd0 100644
--- a/web/src/pages/Logs.tsx
+++ b/web/src/pages/Logs.tsx
@@ -283,7 +283,7 @@ function Logs() {
     <div className="size-full p-2 flex flex-col">
       <div className="flex justify-between items-center">
         <ToggleGroup
-          className="*:px-3 *:py-4 *:rounded-2xl"
+          className="*:px-3 *:py-4 *:rounded-md"
           type="single"
           size="sm"
           value={logService}
diff --git a/web/src/pages/System.tsx b/web/src/pages/System.tsx
index 9e7ece82d..18c5dfd68 100644
--- a/web/src/pages/System.tsx
+++ b/web/src/pages/System.tsx
@@ -34,7 +34,7 @@ function System() {
     <div className="size-full p-2 flex flex-col">
       <div className="w-full h-8 flex justify-between items-center">
         <ToggleGroup
-          className="*:px-3 *:py-4 *:rounded-2xl"
+          className="*:px-3 *:py-4 *:rounded-md"
           type="single"
           size="sm"
           value={page}