diff --git a/web/src/components/config-form/sectionExtras/NotificationsSettingsExtras.tsx b/web/src/components/config-form/sectionExtras/NotificationsSettingsExtras.tsx
index a18667f326..caec913f5e 100644
--- a/web/src/components/config-form/sectionExtras/NotificationsSettingsExtras.tsx
+++ b/web/src/components/config-form/sectionExtras/NotificationsSettingsExtras.tsx
@@ -24,7 +24,7 @@ import {
   useState,
 } from "react";
 import { useForm } from "react-hook-form";
-import { LuCheck, LuExternalLink, LuX } from "react-icons/lu";
+import { LuCheck, LuChevronDown, LuExternalLink, LuX } from "react-icons/lu";
 import { CiCircleAlert } from "react-icons/ci";
 import { Link } from "react-router-dom";
 import { toast } from "sonner";
@@ -36,12 +36,13 @@ import {
   useNotificationTest,
 } from "@/api/ws";
 import {
-  Select,
-  SelectTrigger,
-  SelectValue,
-  SelectContent,
-  SelectItem,
-} from "@/components/ui/select";
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { selectTriggerClassName } from "@/components/ui/select";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 import { use24HourTime } from "@/hooks/use-date-utils";
 import FilterSwitch from "@/components/filter/FilterSwitch";
@@ -814,41 +815,41 @@ export function CameraNotificationSwitch({
       </div>
 
       {!isSuspended ? (
-        <div className="flex items-center gap-2">
-          <Select onValueChange={handleSuspend}>
-            <SelectTrigger className="w-auto">
-              <SelectValue
-                placeholder={t("notification.suspendTime.suspend")}
-              />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="5">
-                {t("notification.suspendTime.5minutes")}
-              </SelectItem>
-              <SelectItem value="10">
-                {t("notification.suspendTime.10minutes")}
-              </SelectItem>
-              <SelectItem value="30">
-                {t("notification.suspendTime.30minutes")}
-              </SelectItem>
-              <SelectItem value="60">
-                {t("notification.suspendTime.1hour")}
-              </SelectItem>
-              <SelectItem value="840">
-                {t("notification.suspendTime.12hours")}
-              </SelectItem>
-              <SelectItem value="1440">
-                {t("notification.suspendTime.24hours")}
-              </SelectItem>
-              <SelectItem value="off">
-                {t("notification.suspendTime.untilRestart")}
-              </SelectItem>
-            </SelectContent>
-          </Select>
-          <Button size="sm" onClick={() => setCustomDialogOpen(true)}>
-            {t("notification.suspendTime.custom")}
-          </Button>
-        </div>
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            className={cn(selectTriggerClassName, "w-auto gap-2")}
+          >
+            {t("notification.suspendTime.suspend")}
+            <LuChevronDown className="h-4 w-4 opacity-50" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem onClick={() => handleSuspend("5")}>
+              {t("notification.suspendTime.5minutes")}
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => handleSuspend("10")}>
+              {t("notification.suspendTime.10minutes")}
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => handleSuspend("30")}>
+              {t("notification.suspendTime.30minutes")}
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => handleSuspend("60")}>
+              {t("notification.suspendTime.1hour")}
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => handleSuspend("840")}>
+              {t("notification.suspendTime.12hours")}
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => handleSuspend("1440")}>
+              {t("notification.suspendTime.24hours")}
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => handleSuspend("off")}>
+              {t("notification.suspendTime.untilRestart")}
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={() => setCustomDialogOpen(true)}>
+              {t("notification.suspendTime.custom")}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
       ) : (
         <Button
           variant="destructive"
diff --git a/web/src/components/menu/LiveContextMenu.tsx b/web/src/components/menu/LiveContextMenu.tsx
index 8694408d53..00ac0e21a4 100644
--- a/web/src/components/menu/LiveContextMenu.tsx
+++ b/web/src/components/menu/LiveContextMenu.tsx
@@ -275,7 +275,7 @@ export default function LiveContextMenu({
 
   return (
     <div className={cn("w-full", className)}>
-      <ContextMenu key={camera} onOpenChange={handleOpenChange}>
+      <ContextMenu key={camera} modal={false} onOpenChange={handleOpenChange}>
         <ContextMenuTrigger>{children}</ContextMenuTrigger>
         <ContextMenuContent>
           <div className="flex flex-col items-start gap-1 py-1 pl-2">
diff --git a/web/src/components/ui/select.tsx b/web/src/components/ui/select.tsx
index 8eabc46518..b6959d38b6 100644
--- a/web/src/components/ui/select.tsx
+++ b/web/src/components/ui/select.tsx
@@ -10,16 +10,16 @@ const SelectGroup = SelectPrimitive.Group;
 
 const SelectValue = SelectPrimitive.Value;
 
+export const selectTriggerClassName =
+  "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-background_alt [&>span]:line-clamp-1";
+
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 >(({ className, children, ...props }, ref) => (
   <SelectPrimitive.Trigger
     ref={ref}
-    className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-background_alt [&>span]:line-clamp-1",
-      className,
-    )}
+    className={cn(selectTriggerClassName, className)}
     {...props}
   >
     {children}