diff --git a/web/src/components/Button.jsx b/web/src/components/Button.jsx
index cb7333a94..a47f93265 100644
--- a/web/src/components/Button.jsx
+++ b/web/src/components/Button.jsx
@@ -7,48 +7,49 @@ const ButtonColors = {
     contained: 'bg-blue-500 focus:bg-blue-400 active:bg-blue-600 ring-blue-300',
     outlined:
       'text-blue-500 border-2 border-blue-500 hover:bg-blue-500 hover:bg-opacity-20 focus:bg-blue-500 focus:bg-opacity-40 active:bg-blue-500 active:bg-opacity-40',
-    text:
-      'text-blue-500 hover:bg-blue-500 hover:bg-opacity-20 focus:bg-blue-500 focus:bg-opacity-40 active:bg-blue-500 active:bg-opacity-40',
+    text: 'text-blue-500 hover:bg-blue-500 hover:bg-opacity-20 focus:bg-blue-500 focus:bg-opacity-40 active:bg-blue-500 active:bg-opacity-40',
+    iconOnly: 'text-blue-500 hover:text-blue-200',
   },
   red: {
     contained: 'bg-red-500 focus:bg-red-400 active:bg-red-600 ring-red-300',
     outlined:
       'text-red-500 border-2 border-red-500 hover:bg-red-500 hover:bg-opacity-20 focus:bg-red-500 focus:bg-opacity-40 active:bg-red-500 active:bg-opacity-40',
-    text:
-      'text-red-500 hover:bg-red-500 hover:bg-opacity-20 focus:bg-red-500 focus:bg-opacity-40 active:bg-red-500 active:bg-opacity-40',
+    text: 'text-red-500 hover:bg-red-500 hover:bg-opacity-20 focus:bg-red-500 focus:bg-opacity-40 active:bg-red-500 active:bg-opacity-40',
+    iconOnly: 'text-red-500 hover:text-red-200',
   },
   yellow: {
     contained: 'bg-yellow-500 focus:bg-yellow-400 active:bg-yellow-600 ring-yellow-300',
     outlined:
       'text-yellow-500 border-2 border-yellow-500 hover:bg-yellow-500 hover:bg-opacity-20 focus:bg-yellow-500 focus:bg-opacity-40 active:bg-yellow-500 active:bg-opacity-40',
-    text:
-      'text-yellow-500 hover:bg-yellow-500 hover:bg-opacity-20 focus:bg-yellow-500 focus:bg-opacity-40 active:bg-yellow-500 active:bg-opacity-40',
+    text: 'text-yellow-500 hover:bg-yellow-500 hover:bg-opacity-20 focus:bg-yellow-500 focus:bg-opacity-40 active:bg-yellow-500 active:bg-opacity-40',
+    iconOnly: 'text-yellow-500 hover:text-yellow-200',
   },
   green: {
     contained: 'bg-green-500 focus:bg-green-400 active:bg-green-600 ring-green-300',
     outlined:
       'text-green-500 border-2 border-green-500 hover:bg-green-500 hover:bg-opacity-20 focus:bg-green-500 focus:bg-opacity-40 active:bg-green-500 active:bg-opacity-40',
-    text:
-      'text-green-500 hover:bg-green-500 hover:bg-opacity-20 focus:bg-green-500 focus:bg-opacity-40 active:bg-green-500 active:bg-opacity-40',
+    text: 'text-green-500 hover:bg-green-500 hover:bg-opacity-20 focus:bg-green-500 focus:bg-opacity-40 active:bg-green-500 active:bg-opacity-40',
+    iconOnly: 'text-green-500 hover:text-green-200',
   },
   gray: {
     contained: 'bg-gray-500 focus:bg-gray-400 active:bg-gray-600 ring-gray-300',
     outlined:
       'text-gray-500 border-2 border-gray-500 hover:bg-gray-500 hover:bg-opacity-20 focus:bg-gray-500 focus:bg-opacity-40 active:bg-gray-500 active:bg-opacity-40',
-    text:
-      'text-gray-500 hover:bg-gray-500 hover:bg-opacity-20 focus:bg-gray-500 focus:bg-opacity-40 active:bg-gray-500 active:bg-opacity-40',
+    text: 'text-gray-500 hover:bg-gray-500 hover:bg-opacity-20 focus:bg-gray-500 focus:bg-opacity-40 active:bg-gray-500 active:bg-opacity-40',
+    iconOnly: 'text-gray-500 hover:text-gray-200',
   },
   disabled: {
     contained: 'bg-gray-400',
     outlined:
       'text-gray-500 border-2 border-gray-500 hover:bg-gray-500 hover:bg-opacity-20 focus:bg-gray-500 focus:bg-opacity-40 active:bg-gray-500 active:bg-opacity-40',
-    text:
-      'text-gray-500 hover:bg-gray-500 hover:bg-opacity-20 focus:bg-gray-500 focus:bg-opacity-40 active:bg-gray-500 active:bg-opacity-40',
+    text: 'text-gray-500 hover:bg-gray-500 hover:bg-opacity-20 focus:bg-gray-500 focus:bg-opacity-40 active:bg-gray-500 active:bg-opacity-40',
+    iconOnly: 'text-gray-500 hover:text-gray-200',
   },
   black: {
     contained: '',
     outlined: '',
     text: 'text-black dark:text-white',
+    iconOnly: '',
   },
 };
 
@@ -56,6 +57,7 @@ const ButtonTypes = {
   contained: 'text-white shadow focus:shadow-xl hover:shadow-md',
   outlined: '',
   text: 'transition-opacity',
+  iconOnly: 'transition-opacity',
 };
 
 export default function Button({
@@ -73,7 +75,7 @@ export default function Button({
   let classes = `whitespace-nowrap flex items-center space-x-1 ${className} ${ButtonTypes[type]} ${
     ButtonColors[disabled ? 'disabled' : color][type]
   } font-sans inline-flex font-bold uppercase text-xs px-1.5 md:px-2 py-2 rounded outline-none focus:outline-none ring-opacity-50 transition-shadow transition-colors ${
-    disabled ? 'cursor-not-allowed' : 'focus:ring-2 cursor-pointer'
+    disabled ? 'cursor-not-allowed' : `${type == 'iconOnly' ? '' : 'focus:ring-2'} cursor-pointer`
   }`;
 
   if (disabled) {
diff --git a/web/src/components/TimelineSummary.jsx b/web/src/components/TimelineSummary.jsx
index 7a16bb1aa..8bf5bd1d7 100644
--- a/web/src/components/TimelineSummary.jsx
+++ b/web/src/components/TimelineSummary.jsx
@@ -2,6 +2,7 @@ import { h } from 'preact';
 import useSWR from 'swr';
 import ActivityIndicator from './ActivityIndicator';
 import { formatUnixTimestampToDateTime } from '../utils/dateUtil';
+import About from '../icons/About';
 import PlayIcon from '../icons/Play';
 import ExitIcon from '../icons/Exit';
 import { Zone } from '../icons/Zone';
@@ -81,7 +82,7 @@ export default function TimelineSummary({ event, onFrameSelected }) {
               <Button
                 key={index}
                 className="rounded-full"
-                type="text"
+                type="iconOnly"
                 color={index == timeIndex ? 'blue' : 'gray'}
                 aria-label={window.innerWidth > 640 ? getTimelineItemDescription(config, item, event) : ''}
                 onClick={() => onSelectMoment(index)}
@@ -92,7 +93,7 @@ export default function TimelineSummary({ event, onFrameSelected }) {
               <Button
                 key={index}
                 className="rounded-full"
-                type="text"
+                type="iconOnly"
                 color={index == timeIndex ? 'blue' : 'gray'}
                 aria-label={window.innerWidth > 640 ? getTimelineItemDescription(config, item, event) : ''}
                 onClick={() => onSelectMoment(index)}
@@ -104,9 +105,19 @@ export default function TimelineSummary({ event, onFrameSelected }) {
         </div>
       </div>
       {timeIndex >= 0 ? (
-        <div className="bg-gray-500 p-4 m-2 max-w-md self-center">
-          Disclaimer: This data comes from the detect feed but is shown on the recordings, it is unlikely that the
-          streams are perfectly in sync so the bounding box and the footage will not line up perfectly.
+        <div className="m-2 max-w-md self-center">
+          <div className="flex justify-start">
+            <div className="text-lg flex justify-between py-4">Bounding boxes may not align</div>
+            <Button
+              className="rounded-full"
+              type="text"
+              color="gray"
+              aria-label=" Disclaimer: This data comes from the detect feed but is shown on the recordings, it is unlikely that the
+                      streams are perfectly in sync so the bounding box and the footage will not line up perfectly. The annotation_offset field can be used to adjust this."
+            >
+              <About className="w-4" />
+            </Button>
+          </div>
         </div>
       ) : null}
     </div>
diff --git a/web/src/icons/About.jsx b/web/src/icons/About.jsx
index 444ad3227..6271b2d52 100644
--- a/web/src/icons/About.jsx
+++ b/web/src/icons/About.jsx
@@ -17,4 +17,3 @@ export function About({ className = '' }) {
 }
 
 export default memo(About);
-
diff --git a/web/src/routes/Events.jsx b/web/src/routes/Events.jsx
index 30e3507f6..9c479f8b8 100644
--- a/web/src/routes/Events.jsx
+++ b/web/src/routes/Events.jsx
@@ -724,7 +724,7 @@ export default function Events({ path, ...props }) {
                                       }}
                                     >
                                       {eventOverlay.class_type == 'entered_zone' ? (
-                                        <div className="absolute w-2 h-2 bg-yellow-500 left-[50%] bottom-0" />
+                                        <div className="absolute w-2 h-2 bg-yellow-500 left-[50%] -translate-x-1/2 translate-y-3/4 bottom-0" />
                                       ) : null}
                                     </div>
                                   ) : null}