diff --git a/frigate/timeline.py b/frigate/timeline.py
index 73c0a61b4..3ac49de5c 100644
--- a/frigate/timeline.py
+++ b/frigate/timeline.py
@@ -74,6 +74,7 @@ class TimelineProcessor(threading.Thread):
                     camera_config.detect.height,
                     event_data["region"],
                 ),
+                "attribute": "",
             },
         }
         if event_type == "start":
@@ -93,6 +94,14 @@ class TimelineProcessor(threading.Thread):
                     "stationary" if event_data["stationary"] else "active"
                 )
                 Timeline.insert(timeline_entry).execute()
+            elif prev_event_data["attributes"] == {} and event_data["attributes"] != {}:
+                logger.error(f"Saving info {event_data['attributes']}")
+                timeline_entry[Timeline.class_type] = "attribute"
+                timeline_entry[Timeline.data]["attribute"] = list(
+                    event_data["attributes"].keys()
+                )[0]
+                logger.error(f"The data is {timeline_entry}")
+                Timeline.insert(timeline_entry).execute()
         elif event_type == "end":
             timeline_entry[Timeline.class_type] = "gone"
             Timeline.insert(timeline_entry).execute()
diff --git a/web/src/components/TimelineSummary.jsx b/web/src/components/TimelineSummary.jsx
index 92d79012e..02db2e26f 100644
--- a/web/src/components/TimelineSummary.jsx
+++ b/web/src/components/TimelineSummary.jsx
@@ -7,6 +7,7 @@ import ActiveObjectIcon from '../icons/ActiveObject';
 import PlayIcon from '../icons/Play';
 import ExitIcon from '../icons/Exit';
 import StationaryObjectIcon from '../icons/StationaryObject';
+import FaceIcon from '../icons/Face';
 import { Zone } from '../icons/Zone';
 import { useMemo, useState } from 'preact/hooks';
 import Button from './Button';
@@ -88,7 +89,7 @@ export default function TimelineSummary({ event, onFrameSelected }) {
               aria-label={window.innerWidth > 640 ? getTimelineItemDescription(config, item, event) : ''}
               onClick={() => onSelectMoment(index)}
             >
-              {getTimelineIcon(item.class_type)}
+              {getTimelineIcon(item)}
             </Button>
           ))}
         </div>
@@ -113,8 +114,8 @@ export default function TimelineSummary({ event, onFrameSelected }) {
   );
 }
 
-function getTimelineIcon(classType) {
-  switch (classType) {
+function getTimelineIcon(timelineItem) {
+  switch (timelineItem.class_type) {
     case 'visible':
       return <PlayIcon className="w-8" />;
     case 'gone':
@@ -125,6 +126,11 @@ function getTimelineIcon(classType) {
       return <StationaryObjectIcon className="w-8" />;
     case 'entered_zone':
       return <Zone className="w-8" />;
+    case 'attribute':
+      switch (timelineItem.data.attribute) {
+        case 'face':
+          return <FaceIcon className="w-8" />;
+      }
   }
 }
 
@@ -156,6 +162,15 @@ function getTimelineItemDescription(config, timelineItem, event) {
         time_style: 'medium',
         time_format: config.ui.time_format,
       })}`;
+    case 'attribute':
+      return `${timelineItem.data.attribute} detected for ${event.label} at ${formatUnixTimestampToDateTime(
+        timelineItem.timestamp,
+        {
+          date_style: 'short',
+          time_style: 'medium',
+          time_format: config.ui.time_format,
+        },
+      )}`;
     case 'gone':
       return `${event.label} left at ${formatUnixTimestampToDateTime(timelineItem.timestamp, {
         date_style: 'short',