diff --git a/web/src/components/timeline/segment-metadata.tsx b/web/src/components/timeline/segment-metadata.tsx
index 6f5b0a82a..fa50c9fd2 100644
--- a/web/src/components/timeline/segment-metadata.tsx
+++ b/web/src/components/timeline/segment-metadata.tsx
@@ -42,22 +42,22 @@ export function MinimapBounds({
           className="pointer-events-none absolute inset-0 -bottom-7 z-20 flex w-full select-none scroll-mt-8 items-center justify-center text-center text-[10px] font-medium text-primary"
           ref={firstMinimapSegmentRef}
         >
-          {new Date(alignedMinimapStartTime * 1000).toLocaleTimeString([], {
-            hour12: config?.ui.time_format != "24hour",
-            hour: "2-digit",
-            minute: "2-digit",
-            ...(!dense && { month: "short", day: "2-digit" }),
+          {formatUnixTimestampToDateTime(alignedMinimapStartTime, {
+            timezone: config?.ui.timezone,
+            strftime_fmt: !dense
+              ? `%b %d ${config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p"}`
+              : `${config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p"}`,
           })}
         </div>
       )}
 
       {isLastSegmentInMinimap && (
         <div className="pointer-events-none absolute inset-0 -top-3 z-20 flex w-full select-none items-center justify-center text-center text-[10px] font-medium text-primary">
-          {new Date(alignedMinimapEndTime * 1000).toLocaleTimeString([], {
-            hour12: config?.ui.time_format != "24hour",
-            hour: "2-digit",
-            minute: "2-digit",
-            ...(!dense && { month: "short", day: "2-digit" }),
+          {formatUnixTimestampToDateTime(alignedMinimapEndTime, {
+            timezone: config?.ui.timezone,
+            strftime_fmt: !dense
+              ? `%b %d ${config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p"}`
+              : `${config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p"}`,
           })}
         </div>
       )}
@@ -106,8 +106,7 @@ export function Timestamp({
 
     return formatUnixTimestampToDateTime(timestamp.getTime() / 1000, {
       timezone: config?.ui.timezone,
-      strftime_fmt:
-        config?.ui.time_format == "24hour" ? "%d %b %H:%M" : "%I:%M %p",
+      strftime_fmt: config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p",
     });
   }, [config, timestamp, timestampSpread]);
 
diff --git a/web/src/hooks/use-draggable-element.ts b/web/src/hooks/use-draggable-element.ts
index 0168cd5a2..73013de58 100644
--- a/web/src/hooks/use-draggable-element.ts
+++ b/web/src/hooks/use-draggable-element.ts
@@ -10,6 +10,7 @@ import scrollIntoView from "scroll-into-view-if-needed";
 import { useTimelineUtils } from "./use-timeline-utils";
 import { FrigateConfig } from "@/types/frigateConfig";
 import useSWR from "swr";
+import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 
 type DraggableElementProps = {
   contentRef: React.RefObject<HTMLElement>;
@@ -168,6 +169,19 @@ function useDraggableElement({
     [segmentDuration, timelineStartAligned, segmentHeight],
   );
 
+  const getFormattedTimestamp = useCallback(
+    (segmentStartTime: number) => {
+      return formatUnixTimestampToDateTime(segmentStartTime, {
+        timezone: config?.ui.timezone,
+        strftime_fmt:
+          config?.ui.time_format == "24hour"
+            ? `%H:%M${segmentDuration < 60 && !dense ? ":%S" : ""}`
+            : `%I:%M${segmentDuration < 60 && !dense ? ":%S" : ""} %p`,
+      });
+    },
+    [config, dense, segmentDuration],
+  );
+
   const updateDraggableElementPosition = useCallback(
     (
       newElementPosition: number,
@@ -184,14 +198,8 @@ function useDraggableElement({
           }
 
           if (draggableElementTimeRef.current) {
-            draggableElementTimeRef.current.textContent = new Date(
-              segmentStartTime * 1000,
-            ).toLocaleTimeString([], {
-              hour12: config?.ui.time_format != "24hour",
-              hour: "2-digit",
-              minute: "2-digit",
-              ...(segmentDuration < 60 && !dense && { second: "2-digit" }),
-            });
+            draggableElementTimeRef.current.textContent =
+              getFormattedTimestamp(segmentStartTime);
             if (scrollTimeline && !userInteracting) {
               scrollIntoView(thumb, {
                 block: "center",
@@ -208,13 +216,11 @@ function useDraggableElement({
       }
     },
     [
-      segmentDuration,
       draggableElementTimeRef,
       draggableElementRef,
       setDraggableElementTime,
       setDraggableElementPosition,
-      dense,
-      config,
+      getFormattedTimestamp,
       userInteracting,
     ],
   );