diff --git a/web/src/components/player/PreviewThumbnailPlayer.tsx b/web/src/components/player/PreviewThumbnailPlayer.tsx
index f5829f777..28e4acce8 100644
--- a/web/src/components/player/PreviewThumbnailPlayer.tsx
+++ b/web/src/components/player/PreviewThumbnailPlayer.tsx
@@ -39,6 +39,7 @@ export default function PreviewThumbnailPlayer({
   const playerRef = useRef<Player | null>(null);
 
   const [visible, setVisible] = useState(false);
+  const [hoverTimeout, setHoverTimeout] = useState<NodeJS.Timeout | null>();
   const [hover, setHover] = useState(false);
   const [progress, setProgress] = useState(0);
 
@@ -49,8 +50,17 @@ export default function PreviewThumbnailPlayer({
       }
 
       if (isHovered) {
-        setHover(true);
+        setHoverTimeout(
+          setTimeout(() => {
+            setHover(true);
+            setHoverTimeout(null);
+          }, 500)
+        );
       } else {
+        if (hoverTimeout) {
+          clearTimeout(hoverTimeout);
+        }
+
         setHover(false);
         setProgress(0);
 
@@ -62,7 +72,7 @@ export default function PreviewThumbnailPlayer({
         }
       }
     },
-    [relevantPreview, review, playerRef]
+    [hoverTimeout, relevantPreview, review, playerRef]
   );
 
   const autoPlayObserver = useRef<IntersectionObserver | null>();
@@ -234,7 +244,7 @@ function PreviewContent({
           controls: false,
           muted: true,
           fluid: true,
-          aspectRatio: '16:9',
+          aspectRatio: "16:9",
           loadingSpinner: false,
           sources: relevantPreview
             ? [
@@ -253,7 +263,11 @@ function PreviewContent({
             return;
           }
 
-          const playerStartTime = review.start_time - relevantPreview.start;
+          // start with a bit of padding
+          const playerStartTime = Math.max(
+            0,
+            review.start_time - relevantPreview.start - 8
+          );
 
           player.playbackRate(slowPlayack ? 2 : 8);
           player.currentTime(playerStartTime);
diff --git a/web/src/pages/Events.tsx b/web/src/pages/Events.tsx
index 3fe65dd5a..0e8d2bfe2 100644
--- a/web/src/pages/Events.tsx
+++ b/web/src/pages/Events.tsx
@@ -19,7 +19,7 @@ import { MdCircle } from "react-icons/md";
 import useSWR from "swr";
 import useSWRInfinite from "swr/infinite";
 
-const API_LIMIT = 100;
+const API_LIMIT = 250;
 
 export default function Events() {
   const { data: config } = useSWR<FrigateConfig>("config");
@@ -245,7 +245,7 @@ export default function Events() {
             value="alert"
             aria-label="Select alerts"
           >
-            <MdCircle className="w-2 h-2 mr-[10px] text-danger" />
+            <MdCircle className="w-2 h-2 mr-[10px] text-severity_alert" />
             Alerts
           </ToggleGroupItem>
           <ToggleGroupItem
@@ -255,7 +255,7 @@ export default function Events() {
             value="detection"
             aria-label="Select detections"
           >
-            <MdCircle className="w-2 h-2 mr-[10px] text-orange-400" />
+            <MdCircle className="w-2 h-2 mr-[10px] text-severity_detection" />
             Detections
           </ToggleGroupItem>
           <ToggleGroupItem
@@ -265,7 +265,7 @@ export default function Events() {
             value="significant_motion"
             aria-label="Select motion"
           >
-            <MdCircle className="w-2 h-2 mr-[10px] text-yellow-400" />
+            <MdCircle className="w-2 h-2 mr-[10px] text-severity_motion" />
             Motion
           </ToggleGroupItem>
         </ToggleGroup>
@@ -314,7 +314,7 @@ export default function Events() {
           );
         })}
       </div>
-      <div className="absolute top-0 right-0 bottom-0">
+      <div className="absolute top-12 right-0 bottom-0">
         <EventReviewTimeline
           segmentDuration={60} // seconds per segment
           timestampSpread={15} // minutes between each major timestamp