diff --git a/web/src/components/TimelineEventOverlay.jsx b/web/src/components/TimelineEventOverlay.jsx
index 717b3809a..ea615be8d 100644
--- a/web/src/components/TimelineEventOverlay.jsx
+++ b/web/src/components/TimelineEventOverlay.jsx
@@ -1,7 +1,7 @@
 import { Fragment, h } from 'preact';
 import { useState } from 'preact/hooks';
 
-export default function TimelineEventOverlay({ eventOverlay, cameraConfig }) {
+export default function TimelineEventOverlay({ event, eventOverlay, cameraConfig }) {
   const boxLeftEdge = Math.round(eventOverlay.data.box[0] * 100);
   const boxTopEdge = Math.round(eventOverlay.data.box[1] * 100);
   const boxRightEdge = Math.round((1 - eventOverlay.data.box[2] - eventOverlay.data.box[0]) * 100);
@@ -56,6 +56,7 @@ export default function TimelineEventOverlay({ eventOverlay, cameraConfig }) {
       </div>
       {isHovering && (
         <div className="absolute bg-white dark:bg-slate-800 p-4 block dark:text-white text-lg" style={getHoverStyle()}>
+          {event.label == 'person' && event.sub_label && (<div>Name: {event.sub_label}</div>)}
           <div>{`Area: ${getObjectArea()} px`}</div>
           <div>{`Ratio: ${getObjectRatio()}`}</div>
         </div>
diff --git a/web/src/routes/Events.jsx b/web/src/routes/Events.jsx
index 9d503cb8b..82a38f900 100644
--- a/web/src/routes/Events.jsx
+++ b/web/src/routes/Events.jsx
@@ -719,6 +719,7 @@ export default function Events({ path, ...props }) {
                                 >
                                   {eventOverlay ? (
                                     <TimelineEventOverlay
+                                      event={event}
                                       eventOverlay={eventOverlay}
                                       cameraConfig={config.cameras[event.camera]}
                                     />