diff --git a/web/src/components/player/DynamicVideoPlayer.tsx b/web/src/components/player/DynamicVideoPlayer.tsx
index 37a4d509a..590c98481 100644
--- a/web/src/components/player/DynamicVideoPlayer.tsx
+++ b/web/src/components/player/DynamicVideoPlayer.tsx
@@ -29,7 +29,7 @@ type DynamicVideoPlayerProps = {
   timeRange: { start: number; end: number };
   cameraPreviews: Preview[];
   previewOnly?: boolean;
-  onControllerReady?: (controller: DynamicVideoController) => void;
+  onControllerReady: (controller: DynamicVideoController) => void;
   onClick?: () => void;
 };
 export default function DynamicVideoPlayer({
@@ -86,14 +86,17 @@ export default function DynamicVideoPlayer({
   }, [camera, config, previewOnly]);
 
   useEffect(() => {
-    if (!controller) {
+    if (!playerRef.current && !previewRef.current) {
       return;
     }
 
-    if (onControllerReady) {
+    if (controller) {
       onControllerReady(controller);
     }
-  }, [controller, onControllerReady]);
+
+    // we only want to fire once when players are ready
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [playerRef, previewRef]);
 
   const [hasRecordingAtTime, setHasRecordingAtTime] = useState(true);
 
@@ -277,10 +280,6 @@ export default function DynamicVideoPlayer({
               player.on("ended", () =>
                 controller.fireClipChangeEvent("forward"),
               );
-
-              if (onControllerReady) {
-                onControllerReady(controller);
-              }
             }}
             onDispose={() => {
               playerRef.current = undefined;
diff --git a/web/src/components/ui/button.tsx b/web/src/components/ui/button.tsx
index 28a234664..60636b470 100644
--- a/web/src/components/ui/button.tsx
+++ b/web/src/components/ui/button.tsx
@@ -9,7 +9,8 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-selected text-primary-foreground hover:bg-opacity-60",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        select: "bg-select text-white hover:bg-select/90",
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index ec70cef62..743ca0653 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -212,9 +212,11 @@ export default function EventView({
         <ToggleGroup
           className="*:px-3 *:py-4 *:rounded-2xl"
           type="single"
-          defaultValue="alert"
           size="sm"
-          onValueChange={(value: ReviewSeverity) => setSeverity(value)}
+          value={severity}
+          onValueChange={(value: ReviewSeverity) =>
+            value ? setSeverity(value) : null
+          } // don't allow the severity to be unselected
         >
           <ToggleGroupItem
             className={`${severity == "alert" ? "" : "text-gray-500"}`}
@@ -510,7 +512,11 @@ function DetectionReview({
           {currentItems && (
             <div className="col-span-full flex justify-center items-center">
               {reachedEnd ? (
-                <Button className="text-white" onClick={markAllReviewed}>
+                <Button
+                  className="text-white"
+                  variant="select"
+                  onClick={markAllReviewed}
+                >
                   Mark all items as reviewed
                 </Button>
               ) : (