diff --git a/web/src/components/bar/TimelineBar.tsx b/web/src/components/bar/TimelineBar.tsx
deleted file mode 100644
index fe05b876f..000000000
--- a/web/src/components/bar/TimelineBar.tsx
+++ /dev/null
@@ -1,191 +0,0 @@
-import { FrigateConfig } from "@/types/frigateConfig";
-import { GraphDataPoint } from "@/types/graph";
-import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
-import useSWR from "swr";
-import ActivityIndicator from "../indicators/activity-indicator";
-
-type TimelineBarProps = {
-  startTime: number;
-  graphData:
-    | {
-        objects: number[];
-        motion: GraphDataPoint[];
-      }
-    | undefined;
-  onClick?: () => void;
-};
-export default function TimelineBar({
-  startTime,
-  graphData,
-  onClick,
-}: TimelineBarProps) {
-  const { data: config } = useSWR<FrigateConfig>("config");
-
-  if (!config) {
-    return <ActivityIndicator />;
-  }
-
-  return (
-    <div
-      className="h-18 my-1 w-full cursor-pointer rounded border p-1 hover:bg-secondary hover:bg-opacity-30"
-      onClick={onClick}
-    >
-      {graphData != undefined && (
-        <div className="relative flex h-8 w-full">
-          {getHourBlocks().map((idx) => {
-            return (
-              <div
-                key={idx}
-                className={`h-2 flex-auto ${
-                  (graphData.motion.at(idx)?.y || 0) == 0
-                    ? ""
-                    : graphData.objects.includes(idx)
-                      ? "bg-object"
-                      : "bg-motion"
-                }`}
-              />
-            );
-          })}
-          <div className="absolute bottom-0 left-0 top-0 border-l border-gray-500 align-bottom">
-            <div className="absolute bottom-0 ml-1 text-sm text-gray-500">
-              {formatUnixTimestampToDateTime(startTime, {
-                strftime_fmt:
-                  config?.ui.time_format == "24hour" ? "%H:00" : "%I:00%P",
-                time_style: "medium",
-                date_style: "medium",
-              })}
-            </div>
-          </div>
-          <div className="absolute bottom-0 left-[8.3%] top-0 border-l border-gray-500 align-bottom">
-            <div className="absolute bottom-0 ml-1 text-sm text-gray-500">
-              {formatUnixTimestampToDateTime(startTime, {
-                strftime_fmt:
-                  config?.ui.time_format == "24hour" ? "%H:05" : "%I:05%P",
-                time_style: "medium",
-                date_style: "medium",
-              })}
-            </div>
-          </div>
-          <div className="absolute bottom-0 left-[16.7%] top-0 border-l border-gray-500 align-bottom">
-            <div className="absolute bottom-0 ml-1 text-sm text-gray-500">
-              {formatUnixTimestampToDateTime(startTime, {
-                strftime_fmt:
-                  config?.ui.time_format == "24hour" ? "%H:10" : "%I:10%P",
-                time_style: "medium",
-                date_style: "medium",
-              })}
-            </div>
-          </div>
-          <div className="absolute bottom-0 left-[25%] top-0 border-l border-gray-500 align-bottom">
-            <div className="absolute bottom-0 ml-1 text-sm text-gray-500">
-              {formatUnixTimestampToDateTime(startTime, {
-                strftime_fmt:
-                  config?.ui.time_format == "24hour" ? "%H:15" : "%I:15%P",
-                time_style: "medium",
-                date_style: "medium",
-              })}
-            </div>
-          </div>
-          <div className="absolute bottom-0 left-[33.3%] top-0 border-l border-gray-500 align-bottom">
-            <div className="absolute bottom-0 ml-1 text-sm text-gray-500">
-              {formatUnixTimestampToDateTime(startTime, {
-                strftime_fmt:
-                  config?.ui.time_format == "24hour" ? "%H:20" : "%I:20%P",
-                time_style: "medium",
-                date_style: "medium",
-              })}
-            </div>
-          </div>
-          <div className="absolute bottom-0 left-[41.7%] top-0 border-l border-gray-500 align-bottom">
-            <div className="absolute bottom-0 ml-1 text-sm text-gray-500">
-              {formatUnixTimestampToDateTime(startTime, {
-                strftime_fmt:
-                  config?.ui.time_format == "24hour" ? "%H:25" : "%I:25%P",
-                time_style: "medium",
-                date_style: "medium",
-              })}
-            </div>
-          </div>
-          <div className="absolute bottom-0 left-[50%] top-0 border-l border-gray-500 align-bottom">
-            <div className="absolute bottom-0 ml-1 text-sm text-gray-500">
-              {formatUnixTimestampToDateTime(startTime, {
-                strftime_fmt:
-                  config?.ui.time_format == "24hour" ? "%H:30" : "%I:30%P",
-                time_style: "medium",
-                date_style: "medium",
-              })}
-            </div>
-          </div>
-          <div className="absolute bottom-0 left-[58.3%] top-0 border-l border-gray-500 align-bottom">
-            <div className="absolute bottom-0 ml-1 text-sm text-gray-500">
-              {formatUnixTimestampToDateTime(startTime, {
-                strftime_fmt:
-                  config?.ui.time_format == "24hour" ? "%H:35" : "%I:35%P",
-                time_style: "medium",
-                date_style: "medium",
-              })}
-            </div>
-          </div>
-          <div className="absolute bottom-0 left-[66.7%] top-0 border-l border-gray-500 align-bottom">
-            <div className="absolute bottom-0 ml-1 text-sm text-gray-500">
-              {formatUnixTimestampToDateTime(startTime, {
-                strftime_fmt:
-                  config?.ui.time_format == "24hour" ? "%H:40" : "%I:40%P",
-                time_style: "medium",
-                date_style: "medium",
-              })}
-            </div>
-          </div>
-          <div className="absolute bottom-0 left-[75%] top-0 border-l border-gray-500 align-bottom">
-            <div className="absolute bottom-0 ml-1 text-sm text-gray-500">
-              {formatUnixTimestampToDateTime(startTime, {
-                strftime_fmt:
-                  config?.ui.time_format == "24hour" ? "%H:45" : "%I:45%P",
-                time_style: "medium",
-                date_style: "medium",
-              })}
-            </div>
-          </div>
-          <div className="absolute bottom-0 left-[83.3%] top-0 border-l border-gray-500 align-bottom">
-            <div className="absolute bottom-0 ml-1 text-sm text-gray-500">
-              {formatUnixTimestampToDateTime(startTime, {
-                strftime_fmt:
-                  config?.ui.time_format == "24hour" ? "%H:50" : "%I:50%P",
-                time_style: "medium",
-                date_style: "medium",
-              })}
-            </div>
-          </div>
-          <div className="absolute bottom-0 left-[91.7%] top-0 border-l border-gray-500 align-bottom">
-            <div className="absolute bottom-0 ml-1 text-sm text-gray-500">
-              {formatUnixTimestampToDateTime(startTime, {
-                strftime_fmt:
-                  config?.ui.time_format == "24hour" ? "%H:55" : "%I:55%P",
-                time_style: "medium",
-                date_style: "medium",
-              })}
-            </div>
-          </div>
-        </div>
-      )}
-      <div className="text-gray-500">
-        {formatUnixTimestampToDateTime(startTime, {
-          strftime_fmt:
-            config.ui.time_format == "24hour" ? "%m/%d %H:%M" : "%m/%d %I:%M%P",
-          time_style: "medium",
-          date_style: "medium",
-        })}
-      </div>
-    </div>
-  );
-}
-
-function getHourBlocks() {
-  const arr = [];
-
-  for (let x = 0; x <= 59; x++) {
-    arr.push(x);
-  }
-
-  return arr;
-}
diff --git a/web/src/components/timeline/segment-metadata.tsx b/web/src/components/timeline/segment-metadata.tsx
index 6ca71af24..6f5b0a82a 100644
--- a/web/src/components/timeline/segment-metadata.tsx
+++ b/web/src/components/timeline/segment-metadata.tsx
@@ -1,4 +1,6 @@
 import { FrigateConfig } from "@/types/frigateConfig";
+import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
+import { useMemo } from "react";
 import useSWR from "swr";
 
 type MinimapSegmentProps = {
@@ -92,6 +94,23 @@ export function Timestamp({
 }: TimestampSegmentProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
 
+  const formattedTimestamp = useMemo(() => {
+    if (
+      !(
+        timestamp.getMinutes() % timestampSpread === 0 &&
+        timestamp.getSeconds() === 0
+      )
+    ) {
+      return undefined;
+    }
+
+    return formatUnixTimestampToDateTime(timestamp.getTime() / 1000, {
+      timezone: config?.ui.timezone,
+      strftime_fmt:
+        config?.ui.time_format == "24hour" ? "%d %b %H:%M" : "%I:%M %p",
+    });
+  }, [config, timestamp, timestampSpread]);
+
   return (
     <div className="absolute left-[15px] z-10 h-[8px]">
       {!isFirstSegmentInMinimap && !isLastSegmentInMinimap && (
@@ -99,13 +118,7 @@ export function Timestamp({
           key={`${segmentKey}_timestamp`}
           className="pointer-events-none select-none text-[8px] text-neutral_variant dark:text-neutral"
         >
-          {timestamp.getMinutes() % timestampSpread === 0 &&
-            timestamp.getSeconds() === 0 &&
-            timestamp.toLocaleTimeString([], {
-              hour12: config?.ui.time_format != "24hour",
-              hour: "2-digit",
-              minute: "2-digit",
-            })}
+          {formattedTimestamp}
         </div>
       )}
     </div>