diff --git a/web/src/components/player/MsePlayer.tsx b/web/src/components/player/MsePlayer.tsx
index 54b9244567..2b9a8d4fb4 100644
--- a/web/src/components/player/MsePlayer.tsx
+++ b/web/src/components/player/MsePlayer.tsx
@@ -328,7 +328,10 @@ function MSEPlayer({
 
           setBufferTimeout(
             setTimeout(() => {
-              if (document.visibilityState === "visible") {
+              if (
+                document.visibilityState === "visible" &&
+                wsRef.current != undefined
+              ) {
                 onError("stalled");
               }
             }, 3000),
diff --git a/web/src/components/player/WebRTCPlayer.tsx b/web/src/components/player/WebRTCPlayer.tsx
index 3baf26d19e..3498c31ffb 100644
--- a/web/src/components/player/WebRTCPlayer.tsx
+++ b/web/src/components/player/WebRTCPlayer.tsx
@@ -238,7 +238,10 @@ export default function WebRtcPlayer({
 
               setBufferTimeout(
                 setTimeout(() => {
-                  if (document.visibilityState === "visible") {
+                  if (
+                    document.visibilityState === "visible" &&
+                    pcRef.current != undefined
+                  ) {
                     onError("stalled");
                   }
                 }, 3000),
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index b94640e25a..2832ab3fd6 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -29,7 +29,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { isDesktop, isMobile } from "react-device-detect";
+import { isDesktop, isMobile, isMobileOnly } from "react-device-detect";
 import { LuFolderCheck, LuFolderX } from "react-icons/lu";
 import { MdCircle } from "react-icons/md";
 import useSWR from "swr";
@@ -50,6 +50,7 @@ import { Toaster } from "@/components/ui/sonner";
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
 import { FilterList } from "@/types/filter";
+import { GiSoundWaves } from "react-icons/gi";
 
 type EventViewProps = {
   reviewItems?: SegmentedReviewData;
@@ -243,46 +244,89 @@ export default function EventView({
           } // don't allow the severity to be unselected
         >
           <ToggleGroupItem
-            className={`${severityToggle == "alert" ? "" : "text-muted-foreground"}`}
+            className={cn(severityToggle != "alert" && "text-muted-foreground")}
             value="alert"
             aria-label="Select alerts"
           >
-            <MdCircle className="size-2 text-severity_alert md:mr-[10px]" />
-            <div className="hidden md:flex md:flex-row md:items-center">
-              Alerts
-              {reviewCounts.alert > -1 ? (
-                ` ∙ ${reviewCounts.alert}`
-              ) : (
-                <ActivityIndicator className="ml-2 size-4" />
-              )}
-            </div>
+            {isMobileOnly ? (
+              <div
+                className={cn(
+                  "flex size-6 items-center justify-center rounded text-severity_alert",
+                  severityToggle == "alert" ? "font-semibold" : "font-medium",
+                )}
+              >
+                {reviewCounts.alert > -1 ? (
+                  reviewCounts.alert
+                ) : (
+                  <ActivityIndicator className="size-4" />
+                )}
+              </div>
+            ) : (
+              <>
+                <MdCircle className="size-2 text-severity_alert md:mr-[10px]" />
+                <div className="hidden md:flex md:flex-row md:items-center">
+                  Alerts
+                  {reviewCounts.alert > -1 ? (
+                    ` ∙ ${reviewCounts.alert}`
+                  ) : (
+                    <ActivityIndicator className="ml-2 size-4" />
+                  )}
+                </div>
+              </>
+            )}
           </ToggleGroupItem>
           <ToggleGroupItem
-            className={`${severityToggle == "detection" ? "" : "text-muted-foreground"}`}
+            className={cn(
+              severityToggle != "detection" && "text-muted-foreground",
+            )}
             value="detection"
             aria-label="Select detections"
           >
-            <MdCircle className="size-2 text-severity_detection md:mr-[10px]" />
-            <div className="hidden md:flex md:flex-row md:items-center">
-              Detections
-              {reviewCounts.detection > -1 ? (
-                ` ∙ ${reviewCounts.detection}`
-              ) : (
-                <ActivityIndicator className="ml-2 size-4" />
-              )}
-            </div>
+            {isMobileOnly ? (
+              <div
+                className={cn(
+                  "flex size-6 items-center justify-center rounded text-severity_detection",
+                  severityToggle == "detection"
+                    ? "font-semibold"
+                    : "font-medium",
+                )}
+              >
+                {reviewCounts.detection > -1 ? (
+                  reviewCounts.detection
+                ) : (
+                  <ActivityIndicator className="size-4" />
+                )}
+              </div>
+            ) : (
+              <>
+                <MdCircle className="size-2 text-severity_detection md:mr-[10px]" />
+                <div className="hidden md:flex md:flex-row md:items-center">
+                  Detections
+                  {reviewCounts.detection > -1 ? (
+                    ` ∙ ${reviewCounts.detection}`
+                  ) : (
+                    <ActivityIndicator className="ml-2 size-4" />
+                  )}
+                </div>
+              </>
+            )}
           </ToggleGroupItem>
           <ToggleGroupItem
-            className={`rounded-lg px-3 py-4 ${
-              severityToggle == "significant_motion"
-                ? ""
-                : "text-muted-foreground"
-            }`}
+            className={cn(
+              "rounded-lg px-3 py-4",
+              severityToggle != "significant_motion" && "text-muted-foreground",
+            )}
             value="significant_motion"
             aria-label="Select motion"
           >
-            <MdCircle className="size-2 text-severity_significant_motion md:mr-[10px]" />
-            <div className="hidden md:block">Motion</div>
+            {isMobileOnly ? (
+              <GiSoundWaves className="size-6 rotate-90 text-severity_significant_motion" />
+            ) : (
+              <>
+                <MdCircle className="size-2 text-severity_significant_motion md:mr-[10px]" />
+                <div className="hidden md:block">Motion</div>
+              </>
+            )}
           </ToggleGroupItem>
         </ToggleGroup>