diff --git a/web/src/components/TimelineSummary.jsx b/web/src/components/TimelineSummary.jsx
index cf966c6ba..ffa22584e 100644
--- a/web/src/components/TimelineSummary.jsx
+++ b/web/src/components/TimelineSummary.jsx
@@ -12,7 +12,9 @@ export default function TimelineSummary({ event }) {
     },
   ]);
 
-  if (!eventTimeline) {
+  const { data: config } = useSWR('config');
+
+  if (!eventTimeline || !config) {
     return <ActivityIndicator />;
   }
 
@@ -20,18 +22,18 @@ export default function TimelineSummary({ event }) {
     <div>
       <Heading>Timeline:</Heading>
       {eventTimeline.map((item, index) => (
-        <div key="index">{getTimelineItemDescription(item, event, index)}</div>
+        <div key="index">{getTimelineItemDescription(config, item, event, index)}</div>
       ))}
     </div>
   );
 }
 
-function getTimelineItemDescription(timelineItem, event, index) {
+function getTimelineItemDescription(config, timelineItem, event, index) {
   if (timelineItem.class_type == 'visible') {
-    return `${index}. ${event.label} detected at ${formatUnixTimestampToDateTime(event.start_time, { date_style: "short", time_style: "medium" })}`;
+    return `${index + 1}. ${event.label} detected at ${formatUnixTimestampToDateTime(timelineItem.timestamp, { date_style: "short", time_style: "medium", time_format: config.ui.time_format })}`;
   } else if (timelineItem.class_type == 'entered_zone') {
-    return `${index}. ${event.label} entered ${timelineItem.data.zones} at ${formatUnixTimestampToDateTime(event.start_time, { date_style: "short", time_style: "medium" })}`;
+    return `${index + 1}. ${event.label} entered ${timelineItem.data.zones} at ${formatUnixTimestampToDateTime(timelineItem.timestamp, { date_style: "short", time_style: "medium", time_format: config.ui.time_format })}`;
   }
 
-  return `${index}. ${event.label} left at ${formatUnixTimestampToDateTime(event.start_time, { date_style: "short", time_style: "medium" })}`;
+  return `${index + 1}. ${event.label} left at ${formatUnixTimestampToDateTime(timelineItem.timestamp, { date_style: "short", time_style: "medium", time_format: config.ui.time_format })}`;
 }