diff --git a/web/src/components/auth/AuthForm.tsx b/web/src/components/auth/AuthForm.tsx
index 8798b5d00..e621d120c 100644
--- a/web/src/components/auth/AuthForm.tsx
+++ b/web/src/components/auth/AuthForm.tsx
@@ -107,7 +107,7 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
                 <FormLabel>{t("form.user")}</FormLabel>
                 <FormControl>
                   <Input
-                    className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                    className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                     autoFocus
                     autoCapitalize="off"
                     autoCorrect="off"
@@ -125,7 +125,7 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
                 <FormLabel>{t("form.password")}</FormLabel>
                 <FormControl>
                   <Input
-                    className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                    className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                     type="password"
                     {...field}
                   />
diff --git a/web/src/components/card/ExportCard.tsx b/web/src/components/card/ExportCard.tsx
index 58600ed3f..958135d29 100644
--- a/web/src/components/card/ExportCard.tsx
+++ b/web/src/components/card/ExportCard.tsx
@@ -257,7 +257,7 @@ export function ExportCard({
           {editName && (
             <>
               <Input
-                className="text-md mt-3"
+                className="mt-3"
                 type="search"
                 placeholder={editName?.original}
                 value={
@@ -275,7 +275,6 @@ export function ExportCard({
               <DialogFooter>
                 <Button
                   aria-label={t("editExport.saveExport")}
-                  size="sm"
                   variant="select"
                   disabled={(editName?.update?.length ?? 0) == 0}
                   onClick={() => submitRename()}
diff --git a/web/src/components/card/SettingsGroupCard.tsx b/web/src/components/card/SettingsGroupCard.tsx
index 4bfaa1402..819ec212a 100644
--- a/web/src/components/card/SettingsGroupCard.tsx
+++ b/web/src/components/card/SettingsGroupCard.tsx
@@ -14,7 +14,7 @@ type SettingsGroupCardProps = {
 export function SettingsGroupCard({ title, children }: SettingsGroupCardProps) {
   return (
     <div className="space-y-4 rounded-lg border border-border/70 bg-card/30 p-4">
-      <div className="text-md border-b border-border/60 pb-4 font-semibold text-primary-variant">
+      <div className="border-b border-border/60 pb-4 font-semibold text-primary-variant">
         {title}
       </div>
       {children}
diff --git a/web/src/components/chat/ChatSettings.tsx b/web/src/components/chat/ChatSettings.tsx
index 0f68ef22d..ad6369459 100644
--- a/web/src/components/chat/ChatSettings.tsx
+++ b/web/src/components/chat/ChatSettings.tsx
@@ -48,7 +48,7 @@ export default function ChatSettings({
     <div className="my-3 space-y-5 py-3 md:mt-0 md:py-0">
       <div className="space-y-3">
         <div className="space-y-0.5">
-          <div className="text-md">{t("settings.show_stats.title")}</div>
+          <div>{t("settings.show_stats.title")}</div>
           <div className="text-xs text-muted-foreground">
             {t("settings.show_stats.desc")}
           </div>
@@ -77,7 +77,7 @@ export default function ChatSettings({
       <DropdownMenuSeparator />
       <div className="flex items-center justify-between gap-3">
         <div className="space-y-0.5">
-          <Label htmlFor="auto-scroll" className="text-md cursor-pointer">
+          <Label htmlFor="auto-scroll" className="cursor-pointer">
             {t("settings.auto_scroll.title")}
           </Label>
           <div className="text-xs text-muted-foreground">
diff --git a/web/src/components/classification/ClassificationModelEditDialog.tsx b/web/src/components/classification/ClassificationModelEditDialog.tsx
index 77b0780f7..ac49ee4db 100644
--- a/web/src/components/classification/ClassificationModelEditDialog.tsx
+++ b/web/src/components/classification/ClassificationModelEditDialog.tsx
@@ -485,7 +485,7 @@ export default function ClassificationModelEditDialog({
                             <FormControl>
                               <div className="flex items-center gap-2">
                                 <Input
-                                  className="text-md h-8"
+                                  className="h-8"
                                   placeholder={t(
                                     "wizard.step1.classPlaceholder",
                                   )}
diff --git a/web/src/components/classification/wizard/Step1NameAndDefine.tsx b/web/src/components/classification/wizard/Step1NameAndDefine.tsx
index e6fe64bfc..239951008 100644
--- a/web/src/components/classification/wizard/Step1NameAndDefine.tsx
+++ b/web/src/components/classification/wizard/Step1NameAndDefine.tsx
@@ -214,7 +214,7 @@ export default function Step1NameAndDefine({
                 </FormLabel>
                 <FormControl>
                   <Input
-                    className="text-md h-8"
+                    className="h-8"
                     placeholder={t("wizard.step1.namePlaceholder")}
                     {...field}
                   />
@@ -457,7 +457,7 @@ export default function Step1NameAndDefine({
                       <FormControl>
                         <div className="flex items-center gap-2">
                           <Input
-                            className="text-md h-8"
+                            className="h-8"
                             placeholder={t("wizard.step1.classPlaceholder")}
                             {...field}
                           />
@@ -489,7 +489,7 @@ export default function Step1NameAndDefine({
         </form>
       </Form>
 
-      <div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4">
+      <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
         <Button type="button" onClick={onCancel} className="sm:flex-1">
           {t("button.cancel", { ns: "common" })}
         </Button>
diff --git a/web/src/components/classification/wizard/Step2StateArea.tsx b/web/src/components/classification/wizard/Step2StateArea.tsx
index 84367a877..7da1a62dc 100644
--- a/web/src/components/classification/wizard/Step2StateArea.tsx
+++ b/web/src/components/classification/wizard/Step2StateArea.tsx
@@ -458,7 +458,7 @@ export default function Step2StateArea({
         </div>
       </div>
 
-      <div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4">
+      <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
         <Button type="button" onClick={onBack} className="sm:flex-1">
           {t("button.back", { ns: "common" })}
         </Button>
diff --git a/web/src/components/classification/wizard/Step3ChooseExamples.tsx b/web/src/components/classification/wizard/Step3ChooseExamples.tsx
index c6693d029..75f4d263f 100644
--- a/web/src/components/classification/wizard/Step3ChooseExamples.tsx
+++ b/web/src/components/classification/wizard/Step3ChooseExamples.tsx
@@ -1,4 +1,4 @@
-import { Button } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import { useTranslation } from "react-i18next";
 import { useState, useEffect, useCallback, useMemo } from "react";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
@@ -540,7 +540,7 @@ export default function Step3ChooseExamples({
             </AlertDialogCancel>
             <AlertDialogAction
               onClick={doRefresh}
-              className="bg-destructive text-white hover:bg-destructive/90"
+              className={cn(buttonVariants({ variant: "destructive" }))}
             >
               {t("button.continue", { ns: "common" })}
             </AlertDialogAction>
@@ -693,7 +693,7 @@ export default function Step3ChooseExamples({
       )}
 
       {!isTraining && (
-        <div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4">
+        <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
           <Button type="button" onClick={handleBack} className="sm:flex-1">
             {t("button.back", { ns: "common" })}
           </Button>
diff --git a/web/src/components/config-form/sectionExtras/NotificationsSettingsExtras.tsx b/web/src/components/config-form/sectionExtras/NotificationsSettingsExtras.tsx
index fb53055bc..cf8b6778c 100644
--- a/web/src/components/config-form/sectionExtras/NotificationsSettingsExtras.tsx
+++ b/web/src/components/config-form/sectionExtras/NotificationsSettingsExtras.tsx
@@ -10,7 +10,6 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Toaster } from "@/components/ui/sonner";
 import { StatusBarMessagesContext } from "@/context/statusbar-provider";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -491,7 +490,6 @@ export default function NotificationsSettingsExtras({
 
   return (
     <div className="flex size-full flex-col md:flex-row">
-      <Toaster position="top-center" closeButton={true} />
       <div className="scrollbar-container order-last mb-2 mt-2 flex h-full w-full flex-col overflow-y-auto px-2 md:order-none">
         <div className={cn("w-full max-w-5xl space-y-6")}>
           {isAdmin && (
@@ -521,7 +519,7 @@ export default function NotificationsSettingsExtras({
                             <FormControl>
                               <Input
                                 id="notification-email"
-                                className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark] md:w-72"
+                                className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark] md:w-72"
                                 placeholder={t(
                                   "notification.email.placeholder",
                                 )}
@@ -788,7 +786,7 @@ export function CameraNotificationSwitch({
           )}
           <div className="flex flex-col">
             <CameraNameLabel
-              className="text-md cursor-pointer text-primary smart-capitalize"
+              className="cursor-pointer text-primary smart-capitalize"
               htmlFor="camera"
               camera={camera}
             />
diff --git a/web/src/components/config-form/sections/BaseSection.tsx b/web/src/components/config-form/sections/BaseSection.tsx
index b3261a5cc..685b06ebe 100644
--- a/web/src/components/config-form/sections/BaseSection.tsx
+++ b/web/src/components/config-form/sections/BaseSection.tsx
@@ -32,7 +32,7 @@ import { ProfileOverridesBadge } from "./ProfileOverridesBadge";
 import { useSectionSchema } from "@/hooks/use-config-schema";
 import type { FrigateConfig } from "@/types/frigateConfig";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import { LuChevronDown, LuChevronRight } from "react-icons/lu";
 import Heading from "@/components/ui/heading";
 import get from "lodash/get";
@@ -1236,7 +1236,7 @@ export function ConfigSection({
               {t("button.cancel", { ns: "common" })}
             </AlertDialogCancel>
             <AlertDialogAction
-              className="bg-destructive text-white hover:bg-destructive/90"
+              className={cn(buttonVariants({ variant: "destructive" }))}
               onClick={() => {
                 onDeleteProfileSection?.();
                 setIsDeleteProfileDialogOpen(false);
diff --git a/web/src/components/config-form/theme/templates/ObjectFieldTemplate.tsx b/web/src/components/config-form/theme/templates/ObjectFieldTemplate.tsx
index bdd61eb1f..9d703b3c8 100644
--- a/web/src/components/config-form/theme/templates/ObjectFieldTemplate.tsx
+++ b/web/src/components/config-form/theme/templates/ObjectFieldTemplate.tsx
@@ -371,7 +371,7 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
             key={group.groupKey}
             className="space-y-4 rounded-lg border border-border/70 bg-card/30 p-4"
           >
-            <div className="text-md border-b border-border/60 pb-4 font-semibold text-primary-variant">
+            <div className="border-b border-border/60 pb-4 font-semibold text-primary-variant">
               {group.label}
             </div>
             <div className="space-y-6">
diff --git a/web/src/components/config-form/theme/widgets/ArrayAsTextWidget.tsx b/web/src/components/config-form/theme/widgets/ArrayAsTextWidget.tsx
index 21bba78cc..2f32de645 100644
--- a/web/src/components/config-form/theme/widgets/ArrayAsTextWidget.tsx
+++ b/web/src/components/config-form/theme/widgets/ArrayAsTextWidget.tsx
@@ -79,7 +79,7 @@ export function ArrayAsTextWidget(props: WidgetProps) {
     return (
       <Textarea
         id={id}
-        className={cn("text-md", fieldClassName)}
+        className={cn(fieldClassName)}
         value={text}
         disabled={disabled || readonly}
         rows={(options.rows as number) || 3}
diff --git a/web/src/components/config-form/theme/widgets/CameraPathWidget.tsx b/web/src/components/config-form/theme/widgets/CameraPathWidget.tsx
index 31c52296d..8f1a43916 100644
--- a/web/src/components/config-form/theme/widgets/CameraPathWidget.tsx
+++ b/web/src/components/config-form/theme/widgets/CameraPathWidget.tsx
@@ -124,7 +124,7 @@ export function CameraPathWidget(props: WidgetProps) {
     <div className={cn("relative", fieldClassName)}>
       <Input
         id={id}
-        className={cn("text-md", canToggle ? "pr-10" : undefined)}
+        className={cn(canToggle ? "pr-10" : undefined)}
         type="text"
         value={displayValue}
         disabled={disabled || readonly}
diff --git a/web/src/components/config-form/theme/widgets/TextWidget.tsx b/web/src/components/config-form/theme/widgets/TextWidget.tsx
index 16919f14b..9c408797d 100644
--- a/web/src/components/config-form/theme/widgets/TextWidget.tsx
+++ b/web/src/components/config-form/theme/widgets/TextWidget.tsx
@@ -26,7 +26,7 @@ export function TextWidget(props: WidgetProps) {
   return (
     <Input
       id={id}
-      className={cn("text-md", fieldClassName)}
+      className={cn(fieldClassName)}
       type="text"
       value={value ?? ""}
       disabled={disabled || readonly}
diff --git a/web/src/components/config-form/theme/widgets/TextareaWidget.tsx b/web/src/components/config-form/theme/widgets/TextareaWidget.tsx
index 4e260a816..b4aad0506 100644
--- a/web/src/components/config-form/theme/widgets/TextareaWidget.tsx
+++ b/web/src/components/config-form/theme/widgets/TextareaWidget.tsx
@@ -26,7 +26,7 @@ export function TextareaWidget(props: WidgetProps) {
   return (
     <Textarea
       id={id}
-      className={cn("text-md", fieldClassName)}
+      className={cn(fieldClassName)}
       value={value ?? ""}
       disabled={disabled || readonly}
       placeholder={placeholder || (options.placeholder as string) || ""}
diff --git a/web/src/components/filter/CameraGroupSelector.tsx b/web/src/components/filter/CameraGroupSelector.tsx
index 9d9189c8a..d4f01481f 100644
--- a/web/src/components/filter/CameraGroupSelector.tsx
+++ b/web/src/components/filter/CameraGroupSelector.tsx
@@ -15,6 +15,7 @@ import {
   Dialog,
   DialogContent,
   DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
 } from "../ui/dialog";
@@ -847,7 +848,7 @@ export function CameraGroupEdit({
               <FormLabel>{t("group.name.label")}</FormLabel>
               <FormControl>
                 <Input
-                  className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                  className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                   placeholder={t("group.name.placeholder")}
                   {...field}
                 />
@@ -973,10 +974,9 @@ export function CameraGroupEdit({
 
         <Separator className="my-2 flex bg-secondary" />
 
-        <div className="flex flex-row gap-2 py-5 md:pb-0">
+        <DialogFooter className="py-5 md:pb-0">
           <Button
             type="button"
-            className="flex flex-1"
             aria-label={t("button.cancel", { ns: "common" })}
             onClick={onCancel}
           >
@@ -985,7 +985,6 @@ export function CameraGroupEdit({
           <Button
             variant="select"
             disabled={isLoading}
-            className="flex flex-1"
             aria-label={t("button.save", { ns: "common" })}
             type="submit"
           >
@@ -998,7 +997,7 @@ export function CameraGroupEdit({
               t("button.save", { ns: "common" })
             )}
           </Button>
-        </div>
+        </DialogFooter>
       </form>
     </Form>
   );
diff --git a/web/src/components/filter/LogSettingsButton.tsx b/web/src/components/filter/LogSettingsButton.tsx
index 024f04c21..57ba76531 100644
--- a/web/src/components/filter/LogSettingsButton.tsx
+++ b/web/src/components/filter/LogSettingsButton.tsx
@@ -40,7 +40,7 @@ export function LogSettingsButton({
     <div className={cn("my-3 space-y-3 py-3 md:mt-0 md:py-0")}>
       <div className="space-y-4">
         <div className="space-y-0.5">
-          <div className="text-md">{t("filter")}</div>
+          <div>{t("filter")}</div>
           <div className="space-y-1 text-xs text-muted-foreground">
             {t("logSettings.filterBySeverity")}
           </div>
@@ -53,7 +53,7 @@ export function LogSettingsButton({
       <DropdownMenuSeparator />
       <div className="space-y-4">
         <div className="space-y-0.5">
-          <div className="text-md">{t("logSettings.loading.title")}</div>
+          <div>{t("logSettings.loading.title")}</div>
           <div className="mt-2.5 flex flex-col gap-2.5">
             <div className="space-y-1 text-xs text-muted-foreground">
               {t("logSettings.loading.desc")}
diff --git a/web/src/components/icons/IconPicker.tsx b/web/src/components/icons/IconPicker.tsx
index b74029e0b..a4775ae21 100644
--- a/web/src/components/icons/IconPicker.tsx
+++ b/web/src/components/icons/IconPicker.tsx
@@ -119,7 +119,7 @@ export default function IconPicker({
             placeholder={t("iconPicker.search.placeholder", {
               ns: "components/icons",
             })}
-            className="text-md mb-3 md:text-sm"
+            className="mb-3 md:text-sm"
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
           />
diff --git a/web/src/components/input/InputWithTags.tsx b/web/src/components/input/InputWithTags.tsx
index 771f65f26..a46627f26 100755
--- a/web/src/components/input/InputWithTags.tsx
+++ b/web/src/components/input/InputWithTags.tsx
@@ -696,7 +696,7 @@ export default function InputWithTags({
             onFocus={handleInputFocus}
             onBlur={handleInputBlur}
             onKeyDown={handleInputKeyDown}
-            className="text-md h-9 pr-32"
+            className="h-9 pr-32"
             placeholder={t("placeholder.search")}
           />
           <div className="absolute right-3 top-0 flex h-full flex-row items-center justify-center gap-5">
diff --git a/web/src/components/input/NameAndIdFields.tsx b/web/src/components/input/NameAndIdFields.tsx
index a3bbf56fe..0651914a0 100644
--- a/web/src/components/input/NameAndIdFields.tsx
+++ b/web/src/components/input/NameAndIdFields.tsx
@@ -112,11 +112,7 @@ export default function NameAndIdFields<T extends FieldValues = FieldValues>({
               </span>
             </div>
             <FormControl>
-              <Input
-                className="text-md"
-                placeholder={placeholderName}
-                {...field}
-              />
+              <Input placeholder={placeholderName} {...field} />
             </FormControl>
             {nameDescription && (
               <FormDescription>{nameDescription}</FormDescription>
@@ -134,7 +130,6 @@ export default function NameAndIdFields<T extends FieldValues = FieldValues>({
               <FormLabel>{idLabel ?? t("label.ID")}</FormLabel>
               <FormControl>
                 <Input
-                  className="text-md"
                   placeholder={placeholderId}
                   disabled={idDisabled}
                   {...field}
diff --git a/web/src/components/input/SaveSearchDialog.tsx b/web/src/components/input/SaveSearchDialog.tsx
index 5eebdda74..de83ef18f 100644
--- a/web/src/components/input/SaveSearchDialog.tsx
+++ b/web/src/components/input/SaveSearchDialog.tsx
@@ -69,7 +69,6 @@ export function SaveSearchDialog({
         </DialogHeader>
         <Input
           value={searchName}
-          className="text-md"
           onChange={(e) => setSearchName(e.target.value)}
           placeholder={t("search.saveSearch.placeholder")}
         />
@@ -88,7 +87,6 @@ export function SaveSearchDialog({
           <Button
             onClick={handleSave}
             variant="select"
-            className="mb-2 md:mb-0"
             aria-label={t("search.saveSearch.button.save.label")}
           >
             {t("button.save", { ns: "common" })}
diff --git a/web/src/components/input/TextEntry.tsx b/web/src/components/input/TextEntry.tsx
index 4abf942ac..b71d2c959 100644
--- a/web/src/components/input/TextEntry.tsx
+++ b/web/src/components/input/TextEntry.tsx
@@ -77,7 +77,7 @@ export default function TextEntry({
               <FormControl>
                 <Input
                   {...field}
-                  className="text-md w-full"
+                  className="w-full"
                   placeholder={placeholder}
                   type="text"
                 />
diff --git a/web/src/components/menu/LiveContextMenu.tsx b/web/src/components/menu/LiveContextMenu.tsx
index c5c8c56c9..6aa37ec02 100644
--- a/web/src/components/menu/LiveContextMenu.tsx
+++ b/web/src/components/menu/LiveContextMenu.tsx
@@ -276,7 +276,7 @@ export default function LiveContextMenu({
         <ContextMenuTrigger>{children}</ContextMenuTrigger>
         <ContextMenuContent>
           <div className="flex flex-col items-start gap-1 py-1 pl-2">
-            <div className="text-md text-primary-variant smart-capitalize">
+            <div className="text-primary-variant smart-capitalize">
               <CameraNameLabel camera={camera} />
             </div>
             {preferredLiveMode == "jsmpeg" && isRestreamed && (
diff --git a/web/src/components/overlay/CreateRoleDialog.tsx b/web/src/components/overlay/CreateRoleDialog.tsx
index 2a1b79b76..fef205ea4 100644
--- a/web/src/components/overlay/CreateRoleDialog.tsx
+++ b/web/src/components/overlay/CreateRoleDialog.tsx
@@ -213,36 +213,30 @@ export default function CreateRoleDialog({
               <FormMessage />
             </div>
 
-            <DialogFooter className="flex gap-2 pt-2 sm:justify-end">
-              <div className="flex flex-1 flex-col justify-end">
-                <div className="flex flex-row gap-2 pt-5">
-                  <Button
-                    className="flex flex-1"
-                    aria-label={t("button.cancel", { ns: "common" })}
-                    disabled={isLoading}
-                    onClick={handleCancel}
-                    type="button"
-                  >
-                    {t("button.cancel", { ns: "common" })}
-                  </Button>
-                  <Button
-                    variant="select"
-                    aria-label={t("button.save", { ns: "common" })}
-                    disabled={isLoading || !form.formState.isValid}
-                    className="flex flex-1"
-                    type="submit"
-                  >
-                    {isLoading ? (
-                      <div className="flex flex-row items-center gap-2">
-                        <ActivityIndicator className="size-4" />
-                        <span>{t("button.saving", { ns: "common" })}</span>
-                      </div>
-                    ) : (
-                      t("button.save", { ns: "common" })
-                    )}
-                  </Button>
-                </div>
-              </div>
+            <DialogFooter className="pt-2">
+              <Button
+                aria-label={t("button.cancel", { ns: "common" })}
+                disabled={isLoading}
+                onClick={handleCancel}
+                type="button"
+              >
+                {t("button.cancel", { ns: "common" })}
+              </Button>
+              <Button
+                variant="select"
+                aria-label={t("button.save", { ns: "common" })}
+                disabled={isLoading || !form.formState.isValid}
+                type="submit"
+              >
+                {isLoading ? (
+                  <div className="flex flex-row items-center gap-2">
+                    <ActivityIndicator className="size-4" />
+                    <span>{t("button.saving", { ns: "common" })}</span>
+                  </div>
+                ) : (
+                  t("button.save", { ns: "common" })
+                )}
+              </Button>
             </DialogFooter>
           </form>
         </Form>
diff --git a/web/src/components/overlay/CreateTriggerDialog.tsx b/web/src/components/overlay/CreateTriggerDialog.tsx
index 1db934e3c..ecd993f7e 100644
--- a/web/src/components/overlay/CreateTriggerDialog.tsx
+++ b/web/src/components/overlay/CreateTriggerDialog.tsx
@@ -433,36 +433,30 @@ export default function CreateTriggerDialog({
               )}
             />
 
-            <DialogFooter className="flex gap-2 pt-2 sm:justify-end">
-              <div className="flex flex-1 flex-col justify-end">
-                <div className="flex flex-row gap-2 pt-5">
-                  <Button
-                    className="flex flex-1"
-                    aria-label={t("button.cancel", { ns: "common" })}
-                    disabled={isLoading}
-                    onClick={handleCancel}
-                    type="button"
-                  >
-                    {t("button.cancel", { ns: "common" })}
-                  </Button>
-                  <Button
-                    variant="select"
-                    aria-label={t("button.save", { ns: "common" })}
-                    disabled={isLoading || !form.formState.isValid}
-                    className="flex flex-1"
-                    type="submit"
-                  >
-                    {isLoading ? (
-                      <div className="flex flex-row items-center gap-2">
-                        <ActivityIndicator className="size-4" />
-                        <span>{t("button.saving", { ns: "common" })}</span>
-                      </div>
-                    ) : (
-                      t("button.save", { ns: "common" })
-                    )}
-                  </Button>
-                </div>
-              </div>
+            <DialogFooter className="pt-2">
+              <Button
+                aria-label={t("button.cancel", { ns: "common" })}
+                disabled={isLoading}
+                onClick={handleCancel}
+                type="button"
+              >
+                {t("button.cancel", { ns: "common" })}
+              </Button>
+              <Button
+                variant="select"
+                aria-label={t("button.save", { ns: "common" })}
+                disabled={isLoading || !form.formState.isValid}
+                type="submit"
+              >
+                {isLoading ? (
+                  <div className="flex flex-row items-center gap-2">
+                    <ActivityIndicator className="size-4" />
+                    <span>{t("button.saving", { ns: "common" })}</span>
+                  </div>
+                ) : (
+                  t("button.save", { ns: "common" })
+                )}
+              </Button>
             </DialogFooter>
           </form>
         </Form>
diff --git a/web/src/components/overlay/CreateUserDialog.tsx b/web/src/components/overlay/CreateUserDialog.tsx
index c0e17bb37..3b003f261 100644
--- a/web/src/components/overlay/CreateUserDialog.tsx
+++ b/web/src/components/overlay/CreateUserDialog.tsx
@@ -411,36 +411,30 @@ export default function CreateUserDialog({
               )}
             />
 
-            <DialogFooter className="flex gap-2 pt-2 sm:justify-end">
-              <div className="flex flex-1 flex-col justify-end">
-                <div className="flex flex-row gap-2 pt-5">
-                  <Button
-                    className="flex flex-1"
-                    aria-label={t("button.cancel", { ns: "common" })}
-                    disabled={isLoading}
-                    onClick={handleCancel}
-                    type="button"
-                  >
-                    {t("button.cancel", { ns: "common" })}
-                  </Button>
-                  <Button
-                    variant="select"
-                    aria-label={t("button.save", { ns: "common" })}
-                    disabled={isLoading || !form.formState.isValid}
-                    className="flex flex-1"
-                    type="submit"
-                  >
-                    {isLoading ? (
-                      <div className="flex flex-row items-center gap-2">
-                        <ActivityIndicator className="size-4" />
-                        <span>{t("button.saving", { ns: "common" })}</span>
-                      </div>
-                    ) : (
-                      t("button.save", { ns: "common" })
-                    )}
-                  </Button>
-                </div>
-              </div>
+            <DialogFooter className="pt-2">
+              <Button
+                aria-label={t("button.cancel", { ns: "common" })}
+                disabled={isLoading}
+                onClick={handleCancel}
+                type="button"
+              >
+                {t("button.cancel", { ns: "common" })}
+              </Button>
+              <Button
+                variant="select"
+                aria-label={t("button.save", { ns: "common" })}
+                disabled={isLoading || !form.formState.isValid}
+                type="submit"
+              >
+                {isLoading ? (
+                  <div className="flex flex-row items-center gap-2">
+                    <ActivityIndicator className="size-4" />
+                    <span>{t("button.saving", { ns: "common" })}</span>
+                  </div>
+                ) : (
+                  t("button.save", { ns: "common" })
+                )}
+              </Button>
             </DialogFooter>
           </form>
         </Form>
diff --git a/web/src/components/overlay/CustomTimeSelector.tsx b/web/src/components/overlay/CustomTimeSelector.tsx
index ab0d3a6b1..f16447111 100644
--- a/web/src/components/overlay/CustomTimeSelector.tsx
+++ b/web/src/components/overlay/CustomTimeSelector.tsx
@@ -144,7 +144,7 @@ export function CustomTimeSelector({
             />
             <SelectSeparator className="bg-secondary" />
             <input
-              className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+              className="mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
               id="startTime"
               type="time"
               value={startClock}
@@ -210,7 +210,7 @@ export function CustomTimeSelector({
             />
             <SelectSeparator className="bg-secondary" />
             <input
-              className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+              className="mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
               id="endTime"
               type="time"
               value={endClock}
diff --git a/web/src/components/overlay/DebugReplayDialog.tsx b/web/src/components/overlay/DebugReplayDialog.tsx
index 665040dc5..3aa4b87e1 100644
--- a/web/src/components/overlay/DebugReplayDialog.tsx
+++ b/web/src/components/overlay/DebugReplayDialog.tsx
@@ -113,19 +113,14 @@ export function DebugReplayContent({
 
       {isDesktop && <SelectSeparator className="my-4 bg-secondary" />}
 
-      <DialogFooter
-        className={isDesktop ? "" : "mt-3 flex flex-col-reverse gap-2"}
-      >
+      <DialogFooter className="mt-3 sm:mt-0">
         <Button
-          className={isDesktop ? "" : "w-full"}
           aria-label={t("button.cancel", { ns: "common" })}
-          variant="outline"
           onClick={onCancel}
         >
           {t("button.cancel", { ns: "common" })}
         </Button>
         <Button
-          className={isDesktop ? "" : "w-full"}
           variant="select"
           disabled={isStarting}
           onClick={() => {
diff --git a/web/src/components/overlay/DeleteRoleDialog.tsx b/web/src/components/overlay/DeleteRoleDialog.tsx
index ad5fc8d06..7c8cbe119 100644
--- a/web/src/components/overlay/DeleteRoleDialog.tsx
+++ b/web/src/components/overlay/DeleteRoleDialog.tsx
@@ -70,38 +70,31 @@ export default function DeleteRoleDialog({
           </div>
         </div>
 
-        <DialogFooter className="flex gap-2 pt-2 sm:justify-end">
-          <div className="flex flex-1 flex-col justify-end">
-            <div className="flex flex-row gap-2 pt-5">
-              <Button
-                className="flex flex-1"
-                aria-label={t("button.cancel", { ns: "common" })}
-                variant="outline"
-                disabled={isLoading}
-                onClick={onCancel}
-                type="button"
-              >
-                {t("button.cancel", { ns: "common" })}
-              </Button>
-              <Button
-                className="flex flex-1"
-                aria-label={t("button.delete", { ns: "common" })}
-                variant="destructive"
-                disabled={isLoading}
-                onClick={handleDelete}
-                type="button"
-              >
-                {isLoading ? (
-                  <div className="flex flex-row items-center gap-2">
-                    <ActivityIndicator />
-                    <span>{t("roles.dialog.deleteRole.deleting")}</span>
-                  </div>
-                ) : (
-                  t("button.delete", { ns: "common" })
-                )}
-              </Button>
-            </div>
-          </div>
+        <DialogFooter>
+          <Button
+            aria-label={t("button.cancel", { ns: "common" })}
+            disabled={isLoading}
+            onClick={onCancel}
+            type="button"
+          >
+            {t("button.cancel", { ns: "common" })}
+          </Button>
+          <Button
+            aria-label={t("button.delete", { ns: "common" })}
+            variant="destructive"
+            disabled={isLoading}
+            onClick={handleDelete}
+            type="button"
+          >
+            {isLoading ? (
+              <div className="flex flex-row items-center gap-2">
+                <ActivityIndicator />
+                <span>{t("roles.dialog.deleteRole.deleting")}</span>
+              </div>
+            ) : (
+              t("button.delete", { ns: "common" })
+            )}
+          </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
diff --git a/web/src/components/overlay/DeleteTriggerDialog.tsx b/web/src/components/overlay/DeleteTriggerDialog.tsx
index 0a7c93d9c..4c34f46dc 100644
--- a/web/src/components/overlay/DeleteTriggerDialog.tsx
+++ b/web/src/components/overlay/DeleteTriggerDialog.tsx
@@ -43,36 +43,30 @@ export default function DeleteTriggerDialog({
             </Trans>
           </DialogDescription>
         </DialogHeader>
-        <DialogFooter className="flex gap-3 sm:justify-end">
-          <div className="flex flex-1 flex-col justify-end">
-            <div className="flex flex-row gap-2 pt-5">
-              <Button
-                className="flex flex-1"
-                aria-label={t("button.cancel", { ns: "common" })}
-                onClick={onCancel}
-                type="button"
-                disabled={isLoading}
-              >
-                {t("button.cancel", { ns: "common" })}
-              </Button>
-              <Button
-                variant="destructive"
-                aria-label={t("button.delete", { ns: "common" })}
-                className="flex flex-1 text-white"
-                onClick={onDelete}
-                disabled={isLoading}
-              >
-                {isLoading ? (
-                  <div className="flex flex-row items-center gap-2">
-                    <ActivityIndicator />
-                    <span>{t("button.delete", { ns: "common" })}</span>
-                  </div>
-                ) : (
-                  t("button.delete", { ns: "common" })
-                )}
-              </Button>
-            </div>
-          </div>
+        <DialogFooter>
+          <Button
+            aria-label={t("button.cancel", { ns: "common" })}
+            onClick={onCancel}
+            type="button"
+            disabled={isLoading}
+          >
+            {t("button.cancel", { ns: "common" })}
+          </Button>
+          <Button
+            variant="destructive"
+            aria-label={t("button.delete", { ns: "common" })}
+            onClick={onDelete}
+            disabled={isLoading}
+          >
+            {isLoading ? (
+              <div className="flex flex-row items-center gap-2">
+                <ActivityIndicator />
+                <span>{t("button.delete", { ns: "common" })}</span>
+              </div>
+            ) : (
+              t("button.delete", { ns: "common" })
+            )}
+          </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
diff --git a/web/src/components/overlay/DeleteUserDialog.tsx b/web/src/components/overlay/DeleteUserDialog.tsx
index 162ef2241..e9c73cb94 100644
--- a/web/src/components/overlay/DeleteUserDialog.tsx
+++ b/web/src/components/overlay/DeleteUserDialog.tsx
@@ -46,27 +46,21 @@ export default function DeleteUserDialog({
           </p>
         </div>
 
-        <DialogFooter className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
-          <div className="flex flex-1 flex-col justify-end">
-            <div className="flex flex-row gap-2 pt-5">
-              <Button
-                className="flex flex-1"
-                aria-label={t("button.cancel", { ns: "common" })}
-                onClick={onCancel}
-                type="button"
-              >
-                {t("button.cancel", { ns: "common" })}
-              </Button>
-              <Button
-                variant="destructive"
-                aria-label={t("button.delete", { ns: "common" })}
-                className="flex flex-1 text-white"
-                onClick={onDelete}
-              >
-                {t("button.delete", { ns: "common" })}
-              </Button>
-            </div>
-          </div>
+        <DialogFooter>
+          <Button
+            aria-label={t("button.cancel", { ns: "common" })}
+            onClick={onCancel}
+            type="button"
+          >
+            {t("button.cancel", { ns: "common" })}
+          </Button>
+          <Button
+            variant="destructive"
+            aria-label={t("button.delete", { ns: "common" })}
+            onClick={onDelete}
+          >
+            {t("button.delete", { ns: "common" })}
+          </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
diff --git a/web/src/components/overlay/EditRoleCamerasDialog.tsx b/web/src/components/overlay/EditRoleCamerasDialog.tsx
index f23dc0931..cfa84db81 100644
--- a/web/src/components/overlay/EditRoleCamerasDialog.tsx
+++ b/web/src/components/overlay/EditRoleCamerasDialog.tsx
@@ -105,13 +105,15 @@ export default function EditRoleCamerasDialog({
         <Form {...form}>
           <form
             onSubmit={form.handleSubmit(onSubmit)}
-            className="space-y-5 pt-4"
+            className="space-y-5 pt-2"
           >
-            <div className="space-y-2">
-              <FormLabel>{t("roles.dialog.form.cameras.title")}</FormLabel>
-              <FormDescription className="text-xs text-muted-foreground">
-                {t("roles.dialog.form.cameras.desc")}
-              </FormDescription>
+            <div className="space-y-3">
+              <div>
+                <FormLabel>{t("roles.dialog.form.cameras.title")}</FormLabel>
+                <FormDescription className="text-xs text-muted-foreground">
+                  {t("roles.dialog.form.cameras.desc")}
+                </FormDescription>
+              </div>
               <div className="scrollbar-container max-h-[40dvh] space-y-2 overflow-y-auto">
                 {cameras.map((camera) => (
                   <FormField
@@ -159,36 +161,30 @@ export default function EditRoleCamerasDialog({
               <FormMessage />
             </div>
 
-            <DialogFooter className="flex gap-2 pt-2 sm:justify-end">
-              <div className="flex flex-1 flex-col justify-end">
-                <div className="flex flex-row gap-2 pt-5">
-                  <Button
-                    className="flex flex-1"
-                    aria-label={t("button.cancel", { ns: "common" })}
-                    disabled={isLoading}
-                    onClick={handleCancel}
-                    type="button"
-                  >
-                    {t("button.cancel", { ns: "common" })}
-                  </Button>
-                  <Button
-                    variant="select"
-                    aria-label={t("button.save", { ns: "common" })}
-                    disabled={isLoading || !form.formState.isValid}
-                    className="flex flex-1"
-                    type="submit"
-                  >
-                    {isLoading ? (
-                      <div className="flex flex-row items-center gap-2">
-                        <ActivityIndicator className="size-4" />
-                        <span>{t("button.saving", { ns: "common" })}</span>
-                      </div>
-                    ) : (
-                      t("button.save", { ns: "common" })
-                    )}
-                  </Button>
-                </div>
-              </div>
+            <DialogFooter>
+              <Button
+                aria-label={t("button.cancel", { ns: "common" })}
+                disabled={isLoading}
+                onClick={handleCancel}
+                type="button"
+              >
+                {t("button.cancel", { ns: "common" })}
+              </Button>
+              <Button
+                variant="select"
+                aria-label={t("button.save", { ns: "common" })}
+                disabled={isLoading || !form.formState.isValid}
+                type="submit"
+              >
+                {isLoading ? (
+                  <div className="flex flex-row items-center gap-2">
+                    <ActivityIndicator className="size-4" />
+                    <span>{t("button.saving", { ns: "common" })}</span>
+                  </div>
+                ) : (
+                  t("button.save", { ns: "common" })
+                )}
+              </Button>
             </DialogFooter>
           </form>
         </Form>
diff --git a/web/src/components/overlay/ExportDialog.tsx b/web/src/components/overlay/ExportDialog.tsx
index 12f2141a4..3419f199f 100644
--- a/web/src/components/overlay/ExportDialog.tsx
+++ b/web/src/components/overlay/ExportDialog.tsx
@@ -794,7 +794,6 @@ export function ExportContent({
           )}
 
           <Input
-            className="text-md"
             type="search"
             placeholder={t("export.name.placeholder")}
             value={name}
@@ -835,13 +834,11 @@ export function ExportContent({
               {selectedCaseId === "new" && (
                 <div className="space-y-2 pt-1">
                   <Input
-                    className="text-md"
                     placeholder={t("export.case.newCaseNamePlaceholder")}
                     value={singleNewCaseName}
                     onChange={(e) => setSingleNewCaseName(e.target.value)}
                   />
                   <Textarea
-                    className="text-md"
                     placeholder={t("export.case.newCaseDescriptionPlaceholder")}
                     value={singleNewCaseDescription}
                     onChange={(e) =>
@@ -988,7 +985,6 @@ export function ExportContent({
               {t("export.multiCamera.nameLabel")}
             </Label>
             <Input
-              className="text-md"
               type="search"
               placeholder={t("export.multiCamera.namePlaceholder")}
               value={name}
@@ -1028,13 +1024,11 @@ export function ExportContent({
               {batchCaseSelection === "new" && (
                 <div className="space-y-2 pt-1">
                   <Input
-                    className="text-md"
                     placeholder={t("export.case.newCaseNamePlaceholder")}
                     value={newCaseName}
                     onChange={(event) => setNewCaseName(event.target.value)}
                   />
                   <Textarea
-                    className="text-md"
                     placeholder={t("export.case.newCaseDescriptionPlaceholder")}
                     value={newCaseDescription}
                     onChange={(event) =>
@@ -1049,20 +1043,15 @@ export function ExportContent({
       </Tabs>
 
       {isDesktop && <SelectSeparator className="my-4 bg-secondary" />}
-      <DialogFooter
-        className={isDesktop ? "" : "mt-3 flex flex-col-reverse gap-2"}
-      >
+      <DialogFooter className="mt-3 sm:mt-0">
         <Button
-          className={isDesktop ? "" : "w-full"}
           aria-label={t("button.cancel", { ns: "common" })}
-          variant="outline"
           onClick={onCancel}
         >
           {t("button.cancel", { ns: "common" })}
         </Button>
         {activeTab === "export" ? (
           <Button
-            className={isDesktop ? "" : "w-full"}
             aria-label={t("export.selectOrExport")}
             variant="select"
             disabled={isStartingExport}
@@ -1086,12 +1075,10 @@ export function ExportContent({
           </Button>
         ) : (
           <Button
-            className={isDesktop ? "" : "w-full"}
             aria-label={t("export.multiCamera.exportButton", {
               count: selectedCameraCount,
             })}
             variant="select"
-            size="sm"
             disabled={!canStartBatchExport}
             onClick={() => void startBatchExport()}
           >
diff --git a/web/src/components/overlay/ImagePicker.tsx b/web/src/components/overlay/ImagePicker.tsx
index 2f7c88953..def9be28f 100644
--- a/web/src/components/overlay/ImagePicker.tsx
+++ b/web/src/components/overlay/ImagePicker.tsx
@@ -85,7 +85,7 @@ export default function ImagePicker({
     <Input
       type="text"
       placeholder={t("imagePicker.search.placeholder")}
-      className="text-md mb-3 md:text-sm"
+      className="mb-3 md:text-sm"
       value={searchTerm}
       onChange={(e) => {
         setSearchTerm(e.target.value);
diff --git a/web/src/components/overlay/MultiExportDialog.tsx b/web/src/components/overlay/MultiExportDialog.tsx
index f37b99b84..b4c92111c 100644
--- a/web/src/components/overlay/MultiExportDialog.tsx
+++ b/web/src/components/overlay/MultiExportDialog.tsx
@@ -290,7 +290,6 @@ export default function MultiExportDialog({
   const newCaseInputs = (
     <div className="space-y-2 pt-1">
       <Input
-        className="text-md"
         placeholder={t("export.case.newCaseNamePlaceholder")}
         value={newCaseName}
         onChange={(event) => setNewCaseName(event.target.value)}
@@ -298,7 +297,6 @@ export default function MultiExportDialog({
         autoFocus={isDesktop}
       />
       <Textarea
-        className="text-md"
         placeholder={t("export.case.newCaseDescriptionPlaceholder")}
         value={newCaseDescription}
         onChange={(event) => setNewCaseDescription(event.target.value)}
@@ -344,11 +342,7 @@ export default function MultiExportDialog({
 
   const footer = (
     <>
-      <Button
-        variant="outline"
-        onClick={() => handleOpenChange(false)}
-        disabled={isExporting}
-      >
+      <Button onClick={() => handleOpenChange(false)} disabled={isExporting}>
         {t("button.cancel", { ns: "common" })}
       </Button>
       <Button
@@ -380,7 +374,7 @@ export default function MultiExportDialog({
             </DialogDescription>
           </DialogHeader>
           {body}
-          <DialogFooter className="gap-2">{footer}</DialogFooter>
+          <DialogFooter>{footer}</DialogFooter>
         </DialogContent>
       </Dialog>
     );
@@ -399,7 +393,7 @@ export default function MultiExportDialog({
           </DrawerDescription>
         </DrawerHeader>
         {body}
-        <div className="mt-4 flex flex-col-reverse gap-2">{footer}</div>
+        <DialogFooter className="mt-4">{footer}</DialogFooter>
       </DrawerContent>
     </Drawer>
   );
diff --git a/web/src/components/overlay/RoleChangeDialog.tsx b/web/src/components/overlay/RoleChangeDialog.tsx
index 2e4399033..a3bae3924 100644
--- a/web/src/components/overlay/RoleChangeDialog.tsx
+++ b/web/src/components/overlay/RoleChangeDialog.tsx
@@ -117,30 +117,23 @@ export default function RoleChangeDialog({
           </Select>
         </div>
 
-        <DialogFooter className="flex gap-3 sm:justify-end">
-          <div className="flex flex-1 flex-col justify-end">
-            <div className="flex flex-row gap-2 pt-5">
-              <Button
-                className="flex flex-1"
-                aria-label={t("button.cancel", { ns: "common" })}
-                variant="outline"
-                onClick={onCancel}
-                type="button"
-              >
-                {t("button.cancel", { ns: "common" })}
-              </Button>
-              <Button
-                variant="select"
-                aria-label={t("button.save", { ns: "common" })}
-                className="flex flex-1"
-                onClick={() => onSave(selectedRole)}
-                type="button"
-                disabled={selectedRole === currentRole}
-              >
-                {t("button.save", { ns: "common" })}
-              </Button>
-            </div>
-          </div>
+        <DialogFooter>
+          <Button
+            aria-label={t("button.cancel", { ns: "common" })}
+            onClick={onCancel}
+            type="button"
+          >
+            {t("button.cancel", { ns: "common" })}
+          </Button>
+          <Button
+            variant="select"
+            aria-label={t("button.save", { ns: "common" })}
+            onClick={() => onSave(selectedRole)}
+            type="button"
+            disabled={selectedRole === currentRole}
+          >
+            {t("button.save", { ns: "common" })}
+          </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
diff --git a/web/src/components/overlay/SetPasswordDialog.tsx b/web/src/components/overlay/SetPasswordDialog.tsx
index 96c29ffdb..f93fd3277 100644
--- a/web/src/components/overlay/SetPasswordDialog.tsx
+++ b/web/src/components/overlay/SetPasswordDialog.tsx
@@ -450,36 +450,30 @@ export default function SetPasswordDialog({
               </div>
             )}
 
-            <DialogFooter className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
-              <div className="flex flex-1 flex-col justify-end">
-                <div className="flex flex-row gap-2 pt-5">
-                  <Button
-                    className="flex flex-1"
-                    aria-label={t("button.cancel", { ns: "common" })}
-                    onClick={onCancel}
-                    type="button"
-                    disabled={isLoading}
-                  >
-                    {t("button.cancel", { ns: "common" })}
-                  </Button>
-                  <Button
-                    variant="select"
-                    aria-label={t("button.save", { ns: "common" })}
-                    className="flex flex-1"
-                    type="submit"
-                    disabled={isLoading || !form.formState.isValid}
-                  >
-                    {isLoading ? (
-                      <div className="flex flex-row items-center gap-2">
-                        <ActivityIndicator className="size-4" />
-                        <span>{t("button.saving", { ns: "common" })}</span>
-                      </div>
-                    ) : (
-                      t("button.save", { ns: "common" })
-                    )}
-                  </Button>
-                </div>
-              </div>
+            <DialogFooter>
+              <Button
+                aria-label={t("button.cancel", { ns: "common" })}
+                onClick={onCancel}
+                type="button"
+                disabled={isLoading}
+              >
+                {t("button.cancel", { ns: "common" })}
+              </Button>
+              <Button
+                variant="select"
+                aria-label={t("button.save", { ns: "common" })}
+                type="submit"
+                disabled={isLoading || !form.formState.isValid}
+              >
+                {isLoading ? (
+                  <div className="flex flex-row items-center gap-2">
+                    <ActivityIndicator className="size-4" />
+                    <span>{t("button.saving", { ns: "common" })}</span>
+                  </div>
+                ) : (
+                  t("button.save", { ns: "common" })
+                )}
+              </Button>
             </DialogFooter>
           </form>
         </Form>
diff --git a/web/src/components/overlay/ShareTimestampDialog.tsx b/web/src/components/overlay/ShareTimestampDialog.tsx
index 234579819..a5f480150 100644
--- a/web/src/components/overlay/ShareTimestampDialog.tsx
+++ b/web/src/components/overlay/ShareTimestampDialog.tsx
@@ -196,21 +196,16 @@ export function ShareTimestampContent({
 
       {isDesktop && <Separator className="my-4 bg-secondary" />}
 
-      <DialogFooter
-        className={cn("mt-4", !isDesktop && "flex flex-col-reverse gap-2")}
-      >
+      <DialogFooter className="mt-3 sm:mt-0">
         {onCancel && (
           <Button
-            className={cn(!isDesktop && "w-full")}
             aria-label={t("button.cancel", { ns: "common" })}
-            variant="outline"
             onClick={onCancel}
           >
             {t("button.cancel", { ns: "common" })}
           </Button>
         )}
         <Button
-          className={cn(!isDesktop && "w-full")}
           variant="select"
           onClick={() => onShareTimestamp(Math.floor(selectedTimestamp))}
         >
@@ -338,7 +333,7 @@ function CustomTimestampSelector({
             />
             <div className="my-3 h-px w-full bg-secondary" />
             <input
-              className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+              className="mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
               id="shareTimestamp"
               type="time"
               value={clock}
diff --git a/web/src/components/overlay/detail/AnnotationSettingsPane.tsx b/web/src/components/overlay/detail/AnnotationSettingsPane.tsx
index f8303db09..04f02d237 100644
--- a/web/src/components/overlay/detail/AnnotationSettingsPane.tsx
+++ b/web/src/components/overlay/detail/AnnotationSettingsPane.tsx
@@ -145,7 +145,7 @@ export function AnnotationSettingsPane({
 
   return (
     <div className="p-4">
-      <div className="text-md mb-2">
+      <div className="mb-2">
         {t("trackingDetails.annotationSettings.title")}
       </div>
 
diff --git a/web/src/components/overlay/detail/FaceCreateWizardDialog.tsx b/web/src/components/overlay/detail/FaceCreateWizardDialog.tsx
index 86eae6acb..1ab0ffa1b 100644
--- a/web/src/components/overlay/detail/FaceCreateWizardDialog.tsx
+++ b/web/src/components/overlay/detail/FaceCreateWizardDialog.tsx
@@ -131,7 +131,7 @@ export default function CreateFaceWizardDialog({
             forbiddenPattern={/#/}
             forbiddenErrorMessage={t("description.nameCannotContainHash")}
           >
-            <div className="flex justify-end py-2">
+            <div className="flex flex-col-reverse gap-2 py-2 sm:flex-row sm:justify-end">
               <Button variant="select" type="submit">
                 {t("button.next", { ns: "common" })}
               </Button>
@@ -144,7 +144,7 @@ export default function CreateFaceWizardDialog({
               {t("steps.description.uploadFace", { name })}
             </div>
             <ImageEntry onSave={onUploadImage}>
-              <div className="flex justify-end py-2">
+              <div className="flex flex-col-reverse gap-2 py-2 sm:flex-row sm:justify-end">
                 <Button variant="select" type="submit">
                   {t("button.next", { ns: "common" })}
                 </Button>
@@ -173,7 +173,7 @@ export default function CreateFaceWizardDialog({
                 <LuExternalLink className="ml-2 inline-flex size-3" />
               </Link>
             </div>
-            <div className="flex justify-end">
+            <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
               <Button
                 variant="select"
                 onClick={() => {
diff --git a/web/src/components/overlay/detail/SearchDetailDialog.tsx b/web/src/components/overlay/detail/SearchDetailDialog.tsx
index de1105daf..518b7e69e 100644
--- a/web/src/components/overlay/detail/SearchDetailDialog.tsx
+++ b/web/src/components/overlay/detail/SearchDetailDialog.tsx
@@ -1569,7 +1569,7 @@ function ObjectDetailsTab({
                       {t("button.yes", { ns: "common" })}
                     </Button>
                     <Button
-                      className="flex-1 text-white"
+                      className="flex-1"
                       aria-label={t("button.no", { ns: "common" })}
                       variant="destructive"
                       onClick={() => {
@@ -1706,7 +1706,7 @@ function ObjectDetailsTab({
         ) : (
           <div className="flex flex-col gap-2">
             <Textarea
-              className="text-md h-32 md:text-sm"
+              className="h-32 md:text-sm"
               placeholder={t("details.description.placeholder")}
               value={desc}
               onChange={(e) => setDesc(e.target.value)}
diff --git a/web/src/components/overlay/detail/TrackingDetails.tsx b/web/src/components/overlay/detail/TrackingDetails.tsx
index e916964c1..66843d3e4 100644
--- a/web/src/components/overlay/detail/TrackingDetails.tsx
+++ b/web/src/components/overlay/detail/TrackingDetails.tsx
@@ -821,7 +821,7 @@ export function TrackingDetails({
                 </div>
                 <div className="flex items-center gap-2">
                   <span className="capitalize">{label}</span>
-                  <div className="md:text-md flex items-center text-xs text-secondary-foreground">
+                  <div className="flex items-center text-xs text-secondary-foreground">
                     {formattedStart ?? ""}
                     {event.end_time != null ? (
                       <> - {formattedEnd}</>
@@ -1072,7 +1072,7 @@ function LifecycleIconRow({
 
         <div className="ml-2 flex w-full min-w-0 flex-1">
           <div className="flex flex-col">
-            <div className="text-md flex items-start break-words text-left">
+            <div className="flex items-start break-words text-left">
               {getLifecycleItemDescription(item)}
             </div>
             {/* Only show Score/Ratio/Area for object events, not for audio (heard) or manual API (external) events */}
diff --git a/web/src/components/overlay/dialog/DeleteCameraDialog.tsx b/web/src/components/overlay/dialog/DeleteCameraDialog.tsx
index 472e6bfa7..be5ebda1d 100644
--- a/web/src/components/overlay/dialog/DeleteCameraDialog.tsx
+++ b/web/src/components/overlay/dialog/DeleteCameraDialog.tsx
@@ -121,28 +121,22 @@ export default function DeleteCameraDialog({
                 ))}
               </SelectContent>
             </Select>
-            <DialogFooter className="flex gap-3 sm:justify-end">
-              <div className="flex flex-1 flex-col justify-end">
-                <div className="flex flex-row gap-2 pt-5">
-                  <Button
-                    className="flex flex-1"
-                    aria-label={t("button.cancel", { ns: "common" })}
-                    onClick={handleClose}
-                    type="button"
-                  >
-                    {t("button.cancel", { ns: "common" })}
-                  </Button>
-                  <Button
-                    variant="destructive"
-                    aria-label={t("button.delete", { ns: "common" })}
-                    className="flex flex-1 text-white"
-                    onClick={handleDelete}
-                    disabled={!selectedCamera}
-                  >
-                    {t("button.delete", { ns: "common" })}
-                  </Button>
-                </div>
-              </div>
+            <DialogFooter>
+              <Button
+                aria-label={t("button.cancel", { ns: "common" })}
+                onClick={handleClose}
+                type="button"
+              >
+                {t("button.cancel", { ns: "common" })}
+              </Button>
+              <Button
+                variant="destructive"
+                aria-label={t("button.delete", { ns: "common" })}
+                onClick={handleDelete}
+                disabled={!selectedCamera}
+              >
+                {t("button.delete", { ns: "common" })}
+              </Button>
             </DialogFooter>
           </>
         ) : (
@@ -173,39 +167,31 @@ export default function DeleteCameraDialog({
                 {t("cameraManagement.deleteCameraDialog.deleteExports")}
               </Label>
             </div>
-            <DialogFooter className="flex gap-3 sm:justify-end">
-              <div className="flex flex-1 flex-col justify-end">
-                <div className="flex flex-row gap-2 pt-5">
-                  <Button
-                    className="flex flex-1"
-                    aria-label={t("button.back", { ns: "common" })}
-                    onClick={handleBack}
-                    type="button"
-                    disabled={isDeleting}
-                  >
-                    {t("button.back", { ns: "common" })}
-                  </Button>
-                  <Button
-                    variant="destructive"
-                    className="flex flex-1 text-white"
-                    onClick={handleConfirmDelete}
-                    disabled={isDeleting}
-                  >
-                    {isDeleting ? (
-                      <div className="flex flex-row items-center gap-2">
-                        <ActivityIndicator />
-                        <span>
-                          {t(
-                            "cameraManagement.deleteCameraDialog.confirmButton",
-                          )}
-                        </span>
-                      </div>
-                    ) : (
-                      t("cameraManagement.deleteCameraDialog.confirmButton")
-                    )}
-                  </Button>
-                </div>
-              </div>
+            <DialogFooter>
+              <Button
+                aria-label={t("button.back", { ns: "common" })}
+                onClick={handleBack}
+                type="button"
+                disabled={isDeleting}
+              >
+                {t("button.back", { ns: "common" })}
+              </Button>
+              <Button
+                variant="destructive"
+                onClick={handleConfirmDelete}
+                disabled={isDeleting}
+              >
+                {isDeleting ? (
+                  <div className="flex flex-row items-center gap-2">
+                    <ActivityIndicator />
+                    <span>
+                      {t("cameraManagement.deleteCameraDialog.confirmButton")}
+                    </span>
+                  </div>
+                ) : (
+                  t("cameraManagement.deleteCameraDialog.confirmButton")
+                )}
+              </Button>
             </DialogFooter>
           </>
         )}
diff --git a/web/src/components/overlay/dialog/FrigatePlusDialog.tsx b/web/src/components/overlay/dialog/FrigatePlusDialog.tsx
index 33ae58f88..d1737df8f 100644
--- a/web/src/components/overlay/dialog/FrigatePlusDialog.tsx
+++ b/web/src/components/overlay/dialog/FrigatePlusDialog.tsx
@@ -173,7 +173,7 @@ export function FrigatePlusDialog({
                                 {t("button.yes", { ns: "common" })}
                               </Button>
                               <Button
-                                className="flex-1 text-white"
+                                className="flex-1"
                                 aria-label={t("button.no", { ns: "common" })}
                                 variant="destructive"
                                 onClick={() => {
diff --git a/web/src/components/overlay/dialog/MultiSelectDialog.tsx b/web/src/components/overlay/dialog/MultiSelectDialog.tsx
index b30ac9cf5..f347d6c77 100644
--- a/web/src/components/overlay/dialog/MultiSelectDialog.tsx
+++ b/web/src/components/overlay/dialog/MultiSelectDialog.tsx
@@ -7,9 +7,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { cn } from "@/lib/utils";
 import { useState } from "react";
-import { isMobile } from "react-device-detect";
 import { useTranslation } from "react-i18next";
 import FilterSwitch from "@/components/filter/FilterSwitch";
 
@@ -77,7 +75,7 @@ export default function MultiSelectDialog({
             />
           ))}
         </div>
-        <DialogFooter className={cn("pt-4", isMobile && "gap-2")}>
+        <DialogFooter className="pt-4">
           <Button type="button" onClick={() => setOpen(false)}>
             {t("button.cancel")}
           </Button>
diff --git a/web/src/components/overlay/dialog/OptionAndInputDialog.tsx b/web/src/components/overlay/dialog/OptionAndInputDialog.tsx
index 0225d1826..1d3b55fab 100644
--- a/web/src/components/overlay/dialog/OptionAndInputDialog.tsx
+++ b/web/src/components/overlay/dialog/OptionAndInputDialog.tsx
@@ -144,18 +144,13 @@ export default function OptionAndInputDialog({
               <label className="text-sm font-medium text-secondary-foreground">
                 {nameLabel}
               </label>
-              <Input
-                className="text-md"
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-              />
+              <Input value={name} onChange={(e) => setName(e.target.value)} />
             </div>
             <div className="space-y-1">
               <label className="text-sm font-medium text-secondary-foreground">
                 {descriptionLabel}
               </label>
               <Textarea
-                className="text-md"
                 value={descriptionValue}
                 onChange={(e) => setDescriptionValue(e.target.value)}
                 rows={2}
@@ -164,10 +159,9 @@ export default function OptionAndInputDialog({
           </div>
         )}
 
-        <DialogFooter className={cn("pt-2", isMobile && "gap-2")}>
+        <DialogFooter>
           <Button
             type="button"
-            variant="outline"
             disabled={isLoading}
             onClick={() => {
               setOpen(false);
diff --git a/web/src/components/overlay/dialog/SearchFilterDialog.tsx b/web/src/components/overlay/dialog/SearchFilterDialog.tsx
index eb1188257..a0b099ea3 100644
--- a/web/src/components/overlay/dialog/SearchFilterDialog.tsx
+++ b/web/src/components/overlay/dialog/SearchFilterDialog.tsx
@@ -349,7 +349,7 @@ function TimeRangeFilterContent({
           </PopoverTrigger>
           <PopoverContent className="flex flex-row items-center justify-center">
             <input
-              className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+              className="mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
               id="startTime"
               type="time"
               value={selectedAfterHour}
@@ -389,7 +389,7 @@ function TimeRangeFilterContent({
           </PopoverTrigger>
           <PopoverContent className="flex flex-col items-center">
             <input
-              className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+              className="mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
               id="startTime"
               type="time"
               value={
diff --git a/web/src/components/overlay/dialog/TextEntryDialog.tsx b/web/src/components/overlay/dialog/TextEntryDialog.tsx
index 38fcee657..27372352e 100644
--- a/web/src/components/overlay/dialog/TextEntryDialog.tsx
+++ b/web/src/components/overlay/dialog/TextEntryDialog.tsx
@@ -9,8 +9,6 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { cn } from "@/lib/utils";
-import { isMobile } from "react-device-detect";
 import { useTranslation } from "react-i18next";
 
 type TextEntryDialogProps = {
@@ -63,7 +61,7 @@ export default function TextEntryDialog({
           forbiddenPattern={forbiddenPattern}
           forbiddenErrorMessage={forbiddenErrorMessage}
         >
-          <DialogFooter className={cn("pt-4", isMobile && "gap-2")}>
+          <DialogFooter>
             <Button
               type="button"
               disabled={isSaving}
diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index 0170f9dd1..e117a33bf 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -443,7 +443,7 @@ export default function LivePlayer({
           <div className="absolute inset-0 rounded-lg bg-black/50 md:rounded-2xl" />
           <div className="absolute inset-0 left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center">
             <div className="flex flex-col items-center justify-center gap-2 rounded-lg bg-background/50 p-3 text-center">
-              <div className="text-md">{t("streamOffline.title")}</div>
+              <div>{t("streamOffline.title")}</div>
               <TbExclamationCircle className="size-6" />
               {!isCompact && (
                 <p className="text-center text-sm">
diff --git a/web/src/components/settings/CloneCameraDialog.tsx b/web/src/components/settings/CloneCameraDialog.tsx
index 61458211b..9b85a3fbd 100644
--- a/web/src/components/settings/CloneCameraDialog.tsx
+++ b/web/src/components/settings/CloneCameraDialog.tsx
@@ -977,7 +977,7 @@ export default function CloneCameraDialog({
               )}
             </div>
 
-            <DialogFooter className="flex flex-col items-stretch gap-3 sm:flex-row sm:items-center sm:justify-between sm:space-x-0">
+            <DialogFooter variant="split">
               <div className="flex flex-col gap-1 text-sm text-muted-foreground">
                 {changeCount > 0 && (
                   <>
@@ -1005,7 +1005,7 @@ export default function CloneCameraDialog({
                   </>
                 )}
               </div>
-              <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row">
+              <div className="flex w-full flex-col-reverse gap-2 sm:w-auto sm:flex-row">
                 <Button
                   type="button"
                   disabled={isSubmitting}
diff --git a/web/src/components/settings/MotionMaskEditPane.tsx b/web/src/components/settings/MotionMaskEditPane.tsx
index 961b0f927..7bc3a9e37 100644
--- a/web/src/components/settings/MotionMaskEditPane.tsx
+++ b/web/src/components/settings/MotionMaskEditPane.tsx
@@ -22,7 +22,6 @@ import { FrigateConfig } from "@/types/frigateConfig";
 import { flattenPoints, interpolatePoints } from "@/utils/canvasUtil";
 import axios from "axios";
 import { toast } from "sonner";
-import { Toaster } from "../ui/sonner";
 import ActivityIndicator from "../indicators/activity-indicator";
 import { Link } from "react-router-dom";
 import { LuExternalLink } from "react-icons/lu";
@@ -327,7 +326,6 @@ export default function MotionMaskEditPane({
 
   return (
     <>
-      <Toaster position="top-center" closeButton={true} />
       <Heading as="h3" className="my-2">
         {polygon.name.length
           ? t("masksAndZones.motionMasks.edit")
diff --git a/web/src/components/settings/ObjectMaskEditPane.tsx b/web/src/components/settings/ObjectMaskEditPane.tsx
index 5ec090122..546d32df5 100644
--- a/web/src/components/settings/ObjectMaskEditPane.tsx
+++ b/web/src/components/settings/ObjectMaskEditPane.tsx
@@ -31,7 +31,6 @@ import { FaCheckCircle } from "react-icons/fa";
 import { flattenPoints, interpolatePoints } from "@/utils/canvasUtil";
 import axios from "axios";
 import { toast } from "sonner";
-import { Toaster } from "../ui/sonner";
 import ActivityIndicator from "../indicators/activity-indicator";
 import { useTranslation } from "react-i18next";
 import { getTranslatedLabel } from "@/utils/i18n";
@@ -335,7 +334,6 @@ export default function ObjectMaskEditPane({
 
   return (
     <>
-      <Toaster position="top-center" closeButton={true} />
       <Heading as="h3" className="my-2">
         {polygon.name.length
           ? t("masksAndZones.objectMasks.edit")
diff --git a/web/src/components/settings/PolygonItem.tsx b/web/src/components/settings/PolygonItem.tsx
index af2e7813a..ffd85eaec 100644
--- a/web/src/components/settings/PolygonItem.tsx
+++ b/web/src/components/settings/PolygonItem.tsx
@@ -24,12 +24,12 @@ import { toRGBColorString } from "@/utils/canvasUtil";
 import { Polygon, PolygonType } from "@/types/canvas";
 import { useCallback, useMemo, useState } from "react";
 import axios from "axios";
-import { Toaster } from "@/components/ui/sonner";
 import { toast } from "sonner";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { reviewQueries } from "@/utils/zoneEdutUtil";
 import IconWrapper from "../ui/icon-wrapper";
+import { buttonVariants } from "@/components/ui/button";
 import { Trans, useTranslation } from "react-i18next";
 import ActivityIndicator from "../indicators/activity-indicator";
 import { cn } from "@/lib/utils";
@@ -368,8 +368,6 @@ export default function PolygonItem({
 
   return (
     <>
-      <Toaster position="top-center" closeButton={true} />
-
       <div
         key={index}
         className="transition-background relative my-1.5 flex flex-row items-center justify-between rounded-lg p-1 duration-100"
@@ -511,7 +509,7 @@ export default function PolygonItem({
                 {t("button.cancel", { ns: "common" })}
               </AlertDialogCancel>
               <AlertDialogAction
-                className="bg-destructive text-white hover:bg-destructive/90"
+                className={cn(buttonVariants({ variant: "destructive" }))}
                 onClick={handleDelete}
               >
                 {polygon.polygonSource === "override"
diff --git a/web/src/components/settings/SearchSettings.tsx b/web/src/components/settings/SearchSettings.tsx
index 54d1f801a..8c746584e 100644
--- a/web/src/components/settings/SearchSettings.tsx
+++ b/web/src/components/settings/SearchSettings.tsx
@@ -59,9 +59,7 @@ export default function ExploreSettings({
     <div className={cn(className, "my-3 space-y-5 py-3 md:mt-0 md:py-0")}>
       <div className="space-y-4">
         <div className="space-y-0.5">
-          <div className="text-md">
-            {t("explore.settings.defaultView.title")}
-          </div>
+          <div>{t("explore.settings.defaultView.title")}</div>
           <div className="space-y-1 text-xs text-muted-foreground">
             {t("explore.settings.defaultView.desc")}
           </div>
@@ -97,9 +95,7 @@ export default function ExploreSettings({
           <DropdownMenuSeparator />
           <div className="flex w-full flex-col space-y-4">
             <div className="space-y-0.5">
-              <div className="text-md">
-                {t("explore.settings.gridColumns.title")}
-              </div>
+              <div>{t("explore.settings.gridColumns.title")}</div>
               <div className="space-y-1 text-xs text-muted-foreground">
                 {t("explore.settings.gridColumns.desc")}
               </div>
@@ -162,9 +158,7 @@ export function SearchTypeContent({
       <div className="overflow-x-hidden">
         <DropdownMenuSeparator className="mb-3" />
         <div className="space-y-0.5">
-          <div className="text-md">
-            {t("explore.settings.searchSource.label")}
-          </div>
+          <div>{t("explore.settings.searchSource.label")}</div>
           <div className="space-y-1 text-xs text-muted-foreground">
             {t("explore.settings.searchSource.desc")}
           </div>
diff --git a/web/src/components/settings/ZoneEditPane.tsx b/web/src/components/settings/ZoneEditPane.tsx
index 29e25d80f..88213445c 100644
--- a/web/src/components/settings/ZoneEditPane.tsx
+++ b/web/src/components/settings/ZoneEditPane.tsx
@@ -24,7 +24,6 @@ import { Label } from "../ui/label";
 import PolygonEditControls from "./PolygonEditControls";
 import { FaCheckCircle } from "react-icons/fa";
 import axios from "axios";
-import { Toaster } from "@/components/ui/sonner";
 import { toast } from "sonner";
 import { flattenPoints, interpolatePoints } from "@/utils/canvasUtil";
 import ActivityIndicator from "../indicators/activity-indicator";
@@ -628,7 +627,6 @@ export default function ZoneEditPane({
 
   return (
     <>
-      <Toaster position="top-center" closeButton={true} />
       <Heading as="h3" className="my-2">
         {polygon.name.length
           ? t("masksAndZones.zones.edit")
@@ -709,7 +707,7 @@ export default function ZoneEditPane({
                 <FormLabel>{t("masksAndZones.zones.inertia.title")}</FormLabel>
                 <FormControl>
                   <Input
-                    className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                    className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                     placeholder="3"
                     {...field}
                   />
@@ -734,7 +732,7 @@ export default function ZoneEditPane({
                 </FormLabel>
                 <FormControl>
                   <Input
-                    className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                    className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                     placeholder="0"
                     {...field}
                   />
@@ -864,7 +862,7 @@ export default function ZoneEditPane({
                       </FormLabel>
                       <FormControl>
                         <Input
-                          className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                          className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                           {...field}
                           onFocus={() => setActiveLine(1)}
                           onBlur={() => setActiveLine(undefined)}
@@ -891,7 +889,7 @@ export default function ZoneEditPane({
                       </FormLabel>
                       <FormControl>
                         <Input
-                          className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                          className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                           {...field}
                           onFocus={() => setActiveLine(2)}
                           onBlur={() => setActiveLine(undefined)}
@@ -918,7 +916,7 @@ export default function ZoneEditPane({
                       </FormLabel>
                       <FormControl>
                         <Input
-                          className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                          className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                           {...field}
                           onFocus={() => setActiveLine(3)}
                           onBlur={() => setActiveLine(undefined)}
@@ -945,7 +943,7 @@ export default function ZoneEditPane({
                       </FormLabel>
                       <FormControl>
                         <Input
-                          className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                          className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                           {...field}
                           onFocus={() => setActiveLine(4)}
                           onBlur={() => setActiveLine(undefined)}
@@ -972,7 +970,7 @@ export default function ZoneEditPane({
                       </FormLabel>
                       <FormControl>
                         <Input
-                          className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                          className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                           {...field}
                         />
                       </FormControl>
diff --git a/web/src/components/settings/wizard/Step1NameCamera.tsx b/web/src/components/settings/wizard/Step1NameCamera.tsx
index 3e9c69ae1..9c5545db4 100644
--- a/web/src/components/settings/wizard/Step1NameCamera.tsx
+++ b/web/src/components/settings/wizard/Step1NameCamera.tsx
@@ -171,7 +171,7 @@ export default function Step1NameCamera({
                 </FormLabel>
                 <FormControl>
                   <Input
-                    className="text-md h-8"
+                    className="h-8"
                     placeholder={t("cameraWizard.step1.cameraNamePlaceholder")}
                     {...field}
                   />
@@ -192,7 +192,7 @@ export default function Step1NameCamera({
                   </FormLabel>
                   <FormControl>
                     <Input
-                      className="text-md h-8"
+                      className="h-8"
                       placeholder="192.168.1.100"
                       {...field}
                     />
@@ -212,7 +212,7 @@ export default function Step1NameCamera({
                   </FormLabel>
                   <FormControl>
                     <Input
-                      className="text-md h-8"
+                      className="h-8"
                       placeholder={t("cameraWizard.step1.usernamePlaceholder")}
                       {...field}
                     />
@@ -233,7 +233,7 @@ export default function Step1NameCamera({
                   <FormControl>
                     <div className="relative">
                       <Input
-                        className="text-md h-8 pr-10"
+                        className="h-8 pr-10"
                         type={showPassword ? "text" : "password"}
                         placeholder={t(
                           "cameraWizard.step1.passwordPlaceholder",
@@ -316,7 +316,7 @@ export default function Step1NameCamera({
                   </FormLabel>
                   <FormControl>
                     <Input
-                      className="text-md h-8"
+                      className="h-8"
                       type="text"
                       {...field}
                       placeholder="80"
@@ -440,7 +440,7 @@ export default function Step1NameCamera({
                       </FormLabel>
                       <FormControl>
                         <Input
-                          className="text-md h-8"
+                          className="h-8"
                           placeholder="rtsp://username:password@host:port/path"
                           {...field}
                         />
@@ -455,7 +455,7 @@ export default function Step1NameCamera({
         </form>
       </Form>
 
-      <div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4">
+      <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
         <Button type="button" onClick={onCancel} className="sm:flex-1">
           {t("button.cancel", { ns: "common" })}
         </Button>
diff --git a/web/src/components/settings/wizard/Step2ProbeOrSnapshot.tsx b/web/src/components/settings/wizard/Step2ProbeOrSnapshot.tsx
index 7a52c8d04..1f805594d 100644
--- a/web/src/components/settings/wizard/Step2ProbeOrSnapshot.tsx
+++ b/web/src/components/settings/wizard/Step2ProbeOrSnapshot.tsx
@@ -626,7 +626,7 @@ function ProbeFooterButtons({
           <ActivityIndicator className="size-4" />
           {t("cameraWizard.step2.probing")}
         </div>
-        <div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4">
+        <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
           <Button type="button" onClick={onBack} disabled className="sm:flex-1">
             {t("button.back", { ns: "common" })}
           </Button>
@@ -649,7 +649,7 @@ function ProbeFooterButtons({
     return (
       <div className="space-y-4">
         <div className="text-sm text-destructive">{probeError}</div>
-        <div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4">
+        <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
           <Button type="button" onClick={onBack} className="sm:flex-1">
             {t("button.back", { ns: "common" })}
           </Button>
@@ -670,7 +670,7 @@ function ProbeFooterButtons({
   // If manual mode, show Continue when test succeeded, otherwise show Test (calls onManualTest)
   if (mode === "manual") {
     return (
-      <div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4">
+      <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
         <Button type="button" onClick={onBack} className="sm:flex-1">
           {t("button.back", { ns: "common" })}
         </Button>
@@ -707,7 +707,7 @@ function ProbeFooterButtons({
 
   // Default probe footer
   return (
-    <div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4">
+    <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
       <Button type="button" onClick={onBack} className="sm:flex-1">
         {t("button.back", { ns: "common" })}
       </Button>
diff --git a/web/src/components/settings/wizard/Step3StreamConfig.tsx b/web/src/components/settings/wizard/Step3StreamConfig.tsx
index 39d8406f8..170a4bc30 100644
--- a/web/src/components/settings/wizard/Step3StreamConfig.tsx
+++ b/web/src/components/settings/wizard/Step3StreamConfig.tsx
@@ -731,7 +731,7 @@ export default function Step3StreamConfig({
         </div>
       )}
 
-      <div className="flex flex-col gap-3 pt-6 sm:flex-row sm:justify-end sm:gap-4">
+      <div className="flex flex-col-reverse gap-2 pt-6 sm:flex-row sm:justify-end">
         {onBack && (
           <Button type="button" onClick={onBack} className="sm:flex-1">
             {t("button.back", { ns: "common" })}
diff --git a/web/src/components/settings/wizard/Step4Validation.tsx b/web/src/components/settings/wizard/Step4Validation.tsx
index b739fe1ab..4b9b72dba 100644
--- a/web/src/components/settings/wizard/Step4Validation.tsx
+++ b/web/src/components/settings/wizard/Step4Validation.tsx
@@ -490,7 +490,7 @@ export default function Step4Validation({
         </div>
       </div>
 
-      <div className="flex flex-col gap-3 pt-6 sm:flex-row sm:justify-end sm:gap-4">
+      <div className="flex flex-col-reverse gap-2 pt-6 sm:flex-row sm:justify-end">
         {onBack && (
           <Button type="button" onClick={onBack} className="sm:flex-1">
             {t("button.back", { ns: "common" })}
diff --git a/web/src/components/trigger/wizard/Step1NameAndType.tsx b/web/src/components/trigger/wizard/Step1NameAndType.tsx
index 62e5ee962..23afd8cc4 100644
--- a/web/src/components/trigger/wizard/Step1NameAndType.tsx
+++ b/web/src/components/trigger/wizard/Step1NameAndType.tsx
@@ -176,20 +176,15 @@ export default function Step1NameAndType({
           )}
         />
 
-        <div className="flex gap-2 pt-4">
-          <Button
-            type="button"
-            variant="outline"
-            onClick={onCancel}
-            className="flex-1"
-          >
+        <div className="flex flex-col-reverse gap-2 pt-4 sm:flex-row sm:justify-end">
+          <Button type="button" onClick={onCancel} className="sm:flex-1">
             {t("button.cancel", { ns: "common" })}
           </Button>
           <Button
             type="submit"
             variant="select"
             disabled={!form.formState.isValid}
-            className="flex-1"
+            className="sm:flex-1"
           >
             {t("button.next", { ns: "common" })}
           </Button>
diff --git a/web/src/components/trigger/wizard/Step2ConfigureData.tsx b/web/src/components/trigger/wizard/Step2ConfigureData.tsx
index 7cbb74cad..e14bf7564 100644
--- a/web/src/components/trigger/wizard/Step2ConfigureData.tsx
+++ b/web/src/components/trigger/wizard/Step2ConfigureData.tsx
@@ -109,20 +109,15 @@ export default function Step2ConfigureData({
           )}
         />
 
-        <div className="flex gap-2 pt-4">
-          <Button
-            type="button"
-            variant="outline"
-            onClick={onBack}
-            className="flex-1"
-          >
+        <div className="flex flex-col-reverse gap-2 pt-4 sm:flex-row sm:justify-end">
+          <Button type="button" onClick={onBack} className="sm:flex-1">
             {t("button.back", { ns: "common" })}
           </Button>
           <Button
             type="submit"
             variant="select"
             disabled={!form.formState.isValid}
-            className="flex-1"
+            className="sm:flex-1"
           >
             {t("button.next", { ns: "common" })}
           </Button>
diff --git a/web/src/components/trigger/wizard/Step3ThresholdAndActions.tsx b/web/src/components/trigger/wizard/Step3ThresholdAndActions.tsx
index 2b560ded3..062bfa15c 100644
--- a/web/src/components/trigger/wizard/Step3ThresholdAndActions.tsx
+++ b/web/src/components/trigger/wizard/Step3ThresholdAndActions.tsx
@@ -181,20 +181,15 @@ export default function Step3ThresholdAndActions({
           )}
         />
 
-        <div className="flex gap-2 pt-4">
-          <Button
-            type="button"
-            variant="outline"
-            onClick={onBack}
-            className="flex-1"
-          >
+        <div className="flex flex-col-reverse gap-2 pt-4 sm:flex-row sm:justify-end">
+          <Button type="button" onClick={onBack} className="sm:flex-1">
             {t("button.back", { ns: "common" })}
           </Button>
           <Button
             type="button"
             onClick={handleSave}
             disabled={isLoading}
-            className="flex-1"
+            className="sm:flex-1"
             variant="select"
           >
             {isLoading && <ActivityIndicator className="mr-2 size-5" />}
diff --git a/web/src/components/ui/alert-dialog.tsx b/web/src/components/ui/alert-dialog.tsx
index 151909842..b26f74992 100644
--- a/web/src/components/ui/alert-dialog.tsx
+++ b/web/src/components/ui/alert-dialog.tsx
@@ -1,6 +1,8 @@
 import * as React from "react";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 
+import { cva, type VariantProps } from "class-variance-authority";
+
 import { cn } from "@/lib/utils";
 import { buttonVariants } from "@/components/ui/button";
 
@@ -59,15 +61,35 @@ const AlertDialogHeader = ({
 );
 AlertDialogHeader.displayName = "AlertDialogHeader";
 
+const alertDialogFooterVariants = cva(
+  "flex flex-col-reverse gap-2 sm:flex-row",
+  {
+    variants: {
+      variant: {
+        // 1-2 action buttons: full-width stacked on mobile, right-aligned auto on desktop.
+        // [&>button] only targets real button children, so non-button siblings are untouched.
+        actions: "sm:justify-end [&>button]:w-full sm:[&>button]:w-auto",
+        // context content (text/popover) alongside actions: space-between on desktop.
+        // flex-col (not -reverse) keeps the context above the buttons when stacked on mobile.
+        split: "flex-col sm:items-center sm:justify-between",
+        // alignment only; never touches children. Escape hatch for unusual content.
+        plain: "sm:justify-end",
+      },
+    },
+    defaultVariants: {
+      variant: "actions",
+    },
+  },
+);
+
 const AlertDialogFooter = ({
   className,
+  variant,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+}: React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof alertDialogFooterVariants>) => (
   <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className,
-    )}
+    className={cn(alertDialogFooterVariants({ variant }), className)}
     {...props}
   />
 );
diff --git a/web/src/components/ui/button.tsx b/web/src/components/ui/button.tsx
index 685ab92a2..55c540592 100644
--- a/web/src/components/ui/button.tsx
+++ b/web/src/components/ui/button.tsx
@@ -11,8 +11,7 @@ const buttonVariants = cva(
       variant: {
         default: "bg-secondary text-primary hover:bg-secondary/80",
         select: "bg-selected text-selected-foreground hover:bg-opacity-90",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90",
         outline:
           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
         secondary: "bg-primary text-primary-foreground hover:bg-primary/90",
diff --git a/web/src/components/ui/dialog.tsx b/web/src/components/ui/dialog.tsx
index f65adbff0..3ad0795e6 100644
--- a/web/src/components/ui/dialog.tsx
+++ b/web/src/components/ui/dialog.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
 import { X } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { useHistoryBack } from "@/hooks/use-history-back";
@@ -107,15 +108,32 @@ const DialogHeader = ({
 );
 DialogHeader.displayName = "DialogHeader";
 
+const dialogFooterVariants = cva("flex flex-col-reverse gap-2 sm:flex-row", {
+  variants: {
+    variant: {
+      // 1-2 action buttons: full-width stacked on mobile, right-aligned auto on desktop.
+      // [&>button] only targets real button children, so non-button siblings are untouched.
+      actions: "sm:justify-end [&>button]:w-full sm:[&>button]:w-auto",
+      // context content (text/popover) alongside actions: space-between on desktop.
+      // flex-col (not -reverse) keeps the context above the buttons when stacked on mobile.
+      split: "flex-col sm:items-center sm:justify-between",
+      // alignment only; never touches children. Escape hatch for unusual content.
+      plain: "sm:justify-end",
+    },
+  },
+  defaultVariants: {
+    variant: "actions",
+  },
+});
+
 const DialogFooter = ({
   className,
+  variant,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+}: React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof dialogFooterVariants>) => (
   <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className,
-    )}
+    className={cn(dialogFooterVariants({ variant }), className)}
     {...props}
   />
 );
diff --git a/web/src/pages/Exports.tsx b/web/src/pages/Exports.tsx
index 244fcf763..dc77a302b 100644
--- a/web/src/pages/Exports.tsx
+++ b/web/src/pages/Exports.tsx
@@ -608,7 +608,6 @@ function Exports() {
               {t("button.cancel", { ns: "common" })}
             </AlertDialogCancel>
             <Button
-              className="text-white"
               aria-label="Delete Export"
               variant="destructive"
               onClick={() => onHandleDelete()}
@@ -658,7 +657,6 @@ function Exports() {
               {t("button.cancel", { ns: "common" })}
             </AlertDialogCancel>
             <Button
-              className="text-white"
               variant="destructive"
               onClick={() => void handleDeleteCase()}
             >
@@ -744,7 +742,7 @@ function Exports() {
                 </Button>
               )}
               <Input
-                className="text-md w-full bg-muted md:w-1/2"
+                className="w-full bg-muted md:w-1/2"
                 placeholder={t("search")}
                 value={search}
                 onChange={(e) => setSearch(e.target.value)}
@@ -1277,8 +1275,8 @@ function CaseEditorDialog({
             value={description}
             onChange={(event) => setDescription(event.target.value)}
           />
-          <div className="flex justify-end gap-2">
-            <Button variant="outline" onClick={onClose}>
+          <DialogFooter>
+            <Button onClick={onClose}>
               {t("button.cancel", { ns: "common" })}
             </Button>
             <Button
@@ -1295,7 +1293,7 @@ function CaseEditorDialog({
                 ? t("button.save", { ns: "common" })
                 : t("toolbar.newCase")}
             </Button>
-          </div>
+          </DialogFooter>
         </div>
       </DialogContent>
     </Dialog>
@@ -1427,13 +1425,12 @@ function CaseAddExportDialog({
             )}
           </div>
         </div>
-        <DialogFooter className="flex-row justify-end gap-2">
-          <Button variant="outline" size="sm" onClick={onClose}>
+        <DialogFooter>
+          <Button onClick={onClose}>
             {t("button.cancel", { ns: "common" })}
           </Button>
           <Button
             variant="select"
-            size="sm"
             disabled={selectedIds.length === 0 || isAdding}
             onClick={() => void handleAdd()}
           >
diff --git a/web/src/pages/FaceLibrary.tsx b/web/src/pages/FaceLibrary.tsx
index a57196327..f84af7804 100644
--- a/web/src/pages/FaceLibrary.tsx
+++ b/web/src/pages/FaceLibrary.tsx
@@ -567,7 +567,6 @@ function LibrarySelector({
             </Button>
             <Button
               variant="destructive"
-              className="text-white"
               onClick={() => {
                 if (confirmDelete) {
                   handleDeleteFace(confirmDelete);
diff --git a/web/src/pages/Replay.tsx b/web/src/pages/Replay.tsx
index f43e52ee2..9de8bb51c 100644
--- a/web/src/pages/Replay.tsx
+++ b/web/src/pages/Replay.tsx
@@ -332,7 +332,7 @@ export default function Replay() {
               <Button
                 variant="destructive"
                 size="sm"
-                className="flex items-center gap-2 text-white"
+                className="flex items-center gap-2"
                 disabled={isStopping}
               >
                 {isStopping && <ActivityIndicator className="size-4" />}
@@ -355,10 +355,7 @@ export default function Replay() {
                 </AlertDialogCancel>
                 <AlertDialogAction
                   onClick={handleStop}
-                  className={cn(
-                    buttonVariants({ variant: "destructive" }),
-                    "text-white",
-                  )}
+                  className={cn(buttonVariants({ variant: "destructive" }))}
                 >
                   {t("page.confirmStop.confirm")}
                 </AlertDialogAction>
@@ -687,7 +684,7 @@ function ObjectList({ cameraConfig, objects, config }: ObjectListProps) {
                 </div>
               </div>
               <div className="flex w-8/12 flex-row items-center justify-end">
-                <div className="text-md mr-2 w-1/3">
+                <div className="mr-2 w-1/3">
                   <div className="flex flex-col items-end justify-end">
                     <p className="mb-1.5 text-sm text-primary-variant">
                       {t("debug.objectShapeFilterDrawing.score", {
@@ -697,7 +694,7 @@ function ObjectList({ cameraConfig, objects, config }: ObjectListProps) {
                     {obj.score ? (obj.score * 100).toFixed(1).toString() : "-"}%
                   </div>
                 </div>
-                <div className="text-md mr-2 w-1/3">
+                <div className="mr-2 w-1/3">
                   <div className="flex flex-col items-end justify-end">
                     <p className="mb-1.5 text-sm text-primary-variant">
                       {t("debug.objectShapeFilterDrawing.ratio", {
@@ -707,7 +704,7 @@ function ObjectList({ cameraConfig, objects, config }: ObjectListProps) {
                     {obj.ratio ? obj.ratio.toFixed(2).toString() : "-"}
                   </div>
                 </div>
-                <div className="text-md mr-2 w-1/3">
+                <div className="mr-2 w-1/3">
                   <div className="flex flex-col items-end justify-end">
                     <p className="mb-1.5 text-sm text-primary-variant">
                       {t("debug.objectShapeFilterDrawing.area", {
diff --git a/web/src/pages/Settings.tsx b/web/src/pages/Settings.tsx
index d46b372ab..f49c657b4 100644
--- a/web/src/pages/Settings.tsx
+++ b/web/src/pages/Settings.tsx
@@ -1616,7 +1616,7 @@ export default function Settings() {
   if (isMobile) {
     return (
       <>
-        <Toaster position="top-center" />
+        <Toaster position="top-center" closeButton={true} />
         {!contentMobileOpen && (
           <div
             key={`mobile-menu-${selectedCamera}`}
@@ -1872,7 +1872,7 @@ export default function Settings() {
 
   return (
     <div className="flex h-full flex-col">
-      <Toaster position="top-center" />
+      <Toaster position="top-center" closeButton={true} />
       <div className="flex min-h-16 items-center justify-between border-b border-secondary p-3">
         <div className="mr-2 flex w-full items-center justify-between gap-3">
           <Heading as="h3" className="mb-0">
diff --git a/web/src/views/classification/ModelTrainingView.tsx b/web/src/views/classification/ModelTrainingView.tsx
index dd4f3c9c0..cb3ad0b60 100644
--- a/web/src/views/classification/ModelTrainingView.tsx
+++ b/web/src/views/classification/ModelTrainingView.tsx
@@ -668,7 +668,6 @@ function LibrarySelector({
                 </Button>
                 <Button
                   variant="destructive"
-                  className="text-white"
                   onClick={() => {
                     if (confirmDelete) {
                       handleDeleteCategory(confirmDelete);
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index 86ab91037..dd89e7878 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -1389,9 +1389,8 @@ function MotionReview({
                     selectedCells={pendingFilterCells}
                     onCellsChange={setPendingFilterCells}
                   />
-                  <DialogFooter className="justify-end gap-1">
+                  <DialogFooter>
                     <Button
-                      variant="outline"
                       disabled={pendingFilterCells.size === 0}
                       onClick={() => {
                         setPendingFilterCells(new Set());
@@ -1432,9 +1431,7 @@ function MotionReview({
                   <div className="space-y-4 py-2">
                     {!isDesktop && (
                       <div className="space-y-1">
-                        <div className="text-md">
-                          {t("motionPreviews.mobileSettingsTitle")}
-                        </div>
+                        <div>{t("motionPreviews.mobileSettingsTitle")}</div>
                         <div className="text-xs text-muted-foreground">
                           {t("motionPreviews.mobileSettingsDesc")}
                         </div>
@@ -1443,9 +1440,7 @@ function MotionReview({
 
                     <div className="space-y-3">
                       <div className="space-y-0.5">
-                        <div className="text-md">
-                          {t("motionPreviews.speed")}
-                        </div>
+                        <div>{t("motionPreviews.speed")}</div>
                         <div className="text-xs text-muted-foreground">
                           {t("motionPreviews.speedDesc")}
                         </div>
@@ -1474,7 +1469,7 @@ function MotionReview({
 
                     <div className="space-y-3">
                       <div className="space-y-0.5">
-                        <div className="text-md">{t("motionPreviews.dim")}</div>
+                        <div>{t("motionPreviews.dim")}</div>
                         <div className="text-xs text-muted-foreground">
                           {t("motionPreviews.dimDesc")}
                         </div>
diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index 50e8a12d5..e9f009690 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -784,7 +784,7 @@ export default function LiveCameraView({
               transcription != null && (
                 <div
                   ref={transcriptionRef}
-                  className="text-md scrollbar-container absolute bottom-4 left-1/2 max-h-[15vh] w-[75%] -translate-x-1/2 overflow-y-auto rounded-lg bg-black/70 p-2 text-white md:w-[50%]"
+                  className="scrollbar-container absolute bottom-4 left-1/2 max-h-[15vh] w-[75%] -translate-x-1/2 overflow-y-auto rounded-lg bg-black/70 p-2 text-white md:w-[50%]"
                 >
                   {transcription}
                 </div>
diff --git a/web/src/views/motion-search/MotionSearchDialog.tsx b/web/src/views/motion-search/MotionSearchDialog.tsx
index c5f3274be..72f349736 100644
--- a/web/src/views/motion-search/MotionSearchDialog.tsx
+++ b/web/src/views/motion-search/MotionSearchDialog.tsx
@@ -630,7 +630,7 @@ function SearchRangeSelector({
               />
               <SelectSeparator className="bg-secondary" />
               <input
-                className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                className="mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                 id="startTime"
                 type="time"
                 value={startClock}
@@ -696,7 +696,7 @@ function SearchRangeSelector({
               />
               <SelectSeparator className="bg-secondary" />
               <input
-                className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                className="mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                 id="endTime"
                 type="time"
                 value={endClock}
diff --git a/web/src/views/motion-search/MotionSearchView.tsx b/web/src/views/motion-search/MotionSearchView.tsx
index 8a5ce680d..f3a6592e2 100644
--- a/web/src/views/motion-search/MotionSearchView.tsx
+++ b/web/src/views/motion-search/MotionSearchView.tsx
@@ -1052,7 +1052,6 @@ export default function MotionSearchView({
               </div>
               <Button
                 variant="destructive"
-                className="text-white"
                 size="sm"
                 onClick={() => {
                   void cancelMotionSearchJob(jobId, jobCamera);
diff --git a/web/src/views/settings/AuthenticationView.tsx b/web/src/views/settings/AuthenticationView.tsx
index 225de37f8..006640bea 100644
--- a/web/src/views/settings/AuthenticationView.tsx
+++ b/web/src/views/settings/AuthenticationView.tsx
@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { FrigateConfig } from "@/types/frigateConfig";
-import { Toaster } from "@/components/ui/sonner";
 import useSWR from "swr";
 import Heading from "@/components/ui/heading";
 import { User } from "@/types/user";
@@ -790,7 +789,6 @@ export default function AuthenticationView({
 
   return (
     <div className="flex size-full flex-col">
-      <Toaster position="top-center" closeButton={true} />
       <div className="scrollbar-container order-last mb-2 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2 md:order-none md:mr-3 md:mt-0">
         {section === "users" && UsersSection}
         {section === "roles" && RolesSection}
diff --git a/web/src/views/settings/CameraManagementView.tsx b/web/src/views/settings/CameraManagementView.tsx
index 96ac32136..db8d5fc3b 100644
--- a/web/src/views/settings/CameraManagementView.tsx
+++ b/web/src/views/settings/CameraManagementView.tsx
@@ -250,7 +250,7 @@ export default function CameraManagementView({
                 <Button
                   variant="destructive"
                   onClick={() => setShowDeleteDialog(true)}
-                  className="mb-2 flex max-w-48 items-center gap-2 text-white"
+                  className="mb-2 flex max-w-48 items-center gap-2"
                 >
                   <LuTrash2 className="h-4 w-4" />
                   {t("cameraManagement.deleteCamera")}
@@ -261,7 +261,7 @@ export default function CameraManagementView({
             {enabledCameras.length + disabledCameras.length > 0 && (
               <div className="mb-5 space-y-3">
                 <div className="space-y-0.5">
-                  <div className="text-md font-medium">
+                  <div className="font-medium">
                     {t("cameraManagement.clone.sectionTitle")}
                   </div>
                   <p className="text-sm text-muted-foreground">
diff --git a/web/src/views/settings/DetectorsAndModelSettingsView.tsx b/web/src/views/settings/DetectorsAndModelSettingsView.tsx
index ebbad2b52..78f28124d 100644
--- a/web/src/views/settings/DetectorsAndModelSettingsView.tsx
+++ b/web/src/views/settings/DetectorsAndModelSettingsView.tsx
@@ -22,7 +22,6 @@ import ActivityIndicator from "@/components/indicators/activity-indicator";
 import Heading from "@/components/ui/heading";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Toaster } from "@/components/ui/sonner";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import {
@@ -598,7 +597,6 @@ export default function DetectorsAndModelSettingsView({
 
   return (
     <div className="flex size-full flex-col md:pr-2">
-      <Toaster position="top-center" closeButton={true} />
       <div className="mb-1 flex items-center justify-between gap-4 pt-2">
         <div className="flex max-w-5xl flex-col">
           <Heading as="h4">{t("detectorsAndModel.title")}</Heading>
diff --git a/web/src/views/settings/EnrichmentsSettingsView.tsx b/web/src/views/settings/EnrichmentsSettingsView.tsx
index f066f2df9..7ad3d286a 100644
--- a/web/src/views/settings/EnrichmentsSettingsView.tsx
+++ b/web/src/views/settings/EnrichmentsSettingsView.tsx
@@ -306,9 +306,7 @@ export default function EnrichmentsSettingsView({
           </div>
           <div className="mt-2 flex flex-col space-y-6">
             <div className="space-y-0.5">
-              <div className="text-md">
-                {t("enrichments.semanticSearch.modelSize.label")}
-              </div>
+              <div>{t("enrichments.semanticSearch.modelSize.label")}</div>
               <div className="space-y-1 text-sm text-muted-foreground">
                 <p>
                   <Trans ns="views/settings">
@@ -436,9 +434,7 @@ export default function EnrichmentsSettingsView({
               </div>
             </div>
             <div className="space-y-0.5">
-              <div className="text-md">
-                {t("enrichments.faceRecognition.modelSize.label")}
-              </div>
+              <div>{t("enrichments.faceRecognition.modelSize.label")}</div>
               <div className="space-y-1 text-sm text-muted-foreground">
                 <p>
                   <Trans ns="views/settings">
diff --git a/web/src/views/settings/FrigatePlusSettingsView.tsx b/web/src/views/settings/FrigatePlusSettingsView.tsx
index c45817b16..7bc60fa1f 100644
--- a/web/src/views/settings/FrigatePlusSettingsView.tsx
+++ b/web/src/views/settings/FrigatePlusSettingsView.tsx
@@ -4,7 +4,6 @@ import { Link, useNavigate } from "react-router-dom";
 import useSWR from "swr";
 import { CheckCircle2, XCircle } from "lucide-react";
 import { LuExternalLink } from "react-icons/lu";
-import { Toaster } from "@/components/ui/sonner";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { Button } from "@/components/ui/button";
 import Heading from "@/components/ui/heading";
@@ -35,7 +34,6 @@ export default function FrigatePlusSettingsView(_props: SettingsPageProps) {
 
   return (
     <div className="flex size-full flex-col md:pr-2">
-      <Toaster position="top-center" closeButton={true} />
       <div className="w-full max-w-5xl space-y-6 pt-2">
         <div className="flex flex-col gap-0">
           <Heading as="h4" className="mb-2">
diff --git a/web/src/views/settings/Go2RtcStreamsSettingsView.tsx b/web/src/views/settings/Go2RtcStreamsSettingsView.tsx
index 73fac7e9b..f1bf2b360 100644
--- a/web/src/views/settings/Go2RtcStreamsSettingsView.tsx
+++ b/web/src/views/settings/Go2RtcStreamsSettingsView.tsx
@@ -446,10 +446,7 @@ export default function Go2RtcStreamsSettingsView({
               {t("button.cancel", { ns: "common" })}
             </AlertDialogCancel>
             <AlertDialogAction
-              className={cn(
-                buttonVariants({ variant: "destructive" }),
-                "text-white",
-              )}
+              className={cn(buttonVariants({ variant: "destructive" }))}
               onClick={() => deleteDialog && deleteStream(deleteDialog)}
             >
               {t("go2rtcStreams.deleteStream")}
@@ -533,7 +530,6 @@ function RenameStreamDialog({
         <div className="space-y-2 py-2">
           <Label>{t("go2rtcStreams.newStreamName")}</Label>
           <Input
-            className="text-md"
             value={newName}
             onChange={(e) => setNewName(e.target.value)}
             onKeyDown={(e) => {
@@ -547,7 +543,7 @@ function RenameStreamDialog({
             <p className="text-xs text-destructive">{nameError}</p>
           )}
         </div>
-        <DialogFooter className="gap-2 sm:justify-end md:gap-0">
+        <DialogFooter>
           <DialogClose asChild>
             <Button>{t("button.cancel", { ns: "common" })}</Button>
           </DialogClose>
@@ -614,7 +610,6 @@ function AddStreamDialog({
           <Label>{t("go2rtcStreams.streamName")}</Label>
           <Input
             value={name}
-            className="text-md"
             onChange={(e) => setName(e.target.value)}
             onKeyDown={(e) => {
               if (e.key === "Enter" && canSubmit) {
@@ -628,7 +623,7 @@ function AddStreamDialog({
             <p className="text-xs text-destructive">{nameError}</p>
           )}
         </div>
-        <DialogFooter className="gap-2 sm:justify-end md:gap-0">
+        <DialogFooter>
           <DialogClose asChild>
             <Button>{t("button.cancel", { ns: "common" })}</Button>
           </DialogClose>
@@ -924,7 +919,7 @@ function StreamUrlEntry({
         <div className="flex items-center gap-2">
           <div className="relative flex-1">
             <Input
-              className="text-md h-8 pr-10"
+              className="h-8 pr-10"
               value={baseUrlForDisplay}
               onChange={(e) => handleBaseUrlChange(e.target.value)}
               onFocus={() => setIsFocused(true)}
diff --git a/web/src/views/settings/MasksAndZonesView.tsx b/web/src/views/settings/MasksAndZonesView.tsx
index 84b27d51a..5db190141 100644
--- a/web/src/views/settings/MasksAndZonesView.tsx
+++ b/web/src/views/settings/MasksAndZonesView.tsx
@@ -15,7 +15,6 @@ import {
 } from "@/components/ui/hover-card";
 import copy from "copy-to-clipboard";
 import { toast } from "sonner";
-import { Toaster } from "@/components/ui/sonner";
 import { Button } from "@/components/ui/button";
 import {
   Tooltip,
@@ -730,7 +729,6 @@ export default function MasksAndZonesView({
     <>
       {cameraConfig && editingPolygons && (
         <div className="flex size-full flex-col md:flex-row">
-          <Toaster position="top-center" closeButton={true} />
           <div className="scrollbar-container order-last mb-2 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mr-3 md:mt-0 md:w-3/12 md:min-w-0 md:shrink-0">
             {editPane == "zone" && (
               <ZoneEditPane
@@ -793,7 +791,7 @@ export default function MasksAndZonesView({
                       <div className="my-3 flex flex-row items-center justify-between">
                         <HoverCard>
                           <HoverCardTrigger asChild>
-                            <div className="text-md cursor-default">
+                            <div className="cursor-default">
                               {t("masksAndZones.zones.label")}
                             </div>
                           </HoverCardTrigger>
@@ -871,7 +869,7 @@ export default function MasksAndZonesView({
                       <div className="my-3 flex flex-row items-center justify-between">
                         <HoverCard>
                           <HoverCardTrigger asChild>
-                            <div className="text-md cursor-default">
+                            <div className="cursor-default">
                               {t("masksAndZones.motionMasks.label")}
                             </div>
                           </HoverCardTrigger>
@@ -953,7 +951,7 @@ export default function MasksAndZonesView({
                       <div className="my-3 flex flex-row items-center justify-between">
                         <HoverCard>
                           <HoverCardTrigger asChild>
-                            <div className="text-md cursor-default">
+                            <div className="cursor-default">
                               {t("masksAndZones.objectMasks.label")}
                             </div>
                           </HoverCardTrigger>
diff --git a/web/src/views/settings/MediaSyncSettingsView.tsx b/web/src/views/settings/MediaSyncSettingsView.tsx
index e03f9cd73..6f70dc60a 100644
--- a/web/src/views/settings/MediaSyncSettingsView.tsx
+++ b/web/src/views/settings/MediaSyncSettingsView.tsx
@@ -2,7 +2,6 @@ import Heading from "@/components/ui/heading";
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { Separator } from "@/components/ui/separator";
-import { Toaster } from "@/components/ui/sonner";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -105,7 +104,6 @@ export default function MediaSyncSettingsView() {
   return (
     <>
       <div className="flex size-full flex-col md:flex-row">
-        <Toaster position="top-center" closeButton={true} />
         <div className="scrollbar-container order-last mb-2 mt-2 flex h-full w-full flex-col overflow-y-auto px-2 md:order-none">
           <div className="grid w-full grid-cols-1 gap-4 md:grid-cols-2">
             <div className="col-span-1">
diff --git a/web/src/views/settings/MotionTunerView.tsx b/web/src/views/settings/MotionTunerView.tsx
index 2989f5827..365250634 100644
--- a/web/src/views/settings/MotionTunerView.tsx
+++ b/web/src/views/settings/MotionTunerView.tsx
@@ -15,7 +15,6 @@ import {
 import { Skeleton } from "@/components/ui/skeleton";
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
-import { Toaster } from "@/components/ui/sonner";
 import { toast } from "sonner";
 import { Separator } from "@/components/ui/separator";
 import { Link } from "react-router-dom";
@@ -184,7 +183,6 @@ export default function MotionTunerView({
 
   return (
     <div className="flex size-full flex-col md:flex-row">
-      <Toaster position="top-center" closeButton={true} />
       <div className="scrollbar-container order-last mb-2 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mr-3 md:mt-0 md:w-3/12">
         <Heading as="h4" className="mb-2">
           {t("motionDetectionTuner.title")}
@@ -208,7 +206,7 @@ export default function MotionTunerView({
         <div className="flex w-full flex-col space-y-6">
           <div className="mt-2 space-y-6">
             <div className="space-y-0.5">
-              <Label htmlFor="motion-threshold" className="text-md">
+              <Label htmlFor="motion-threshold">
                 {t("motionDetectionTuner.Threshold.title")}
               </Label>
               <div className="my-2 text-sm text-muted-foreground">
@@ -237,7 +235,7 @@ export default function MotionTunerView({
           </div>
           <div className="mt-2 space-y-6">
             <div className="space-y-0.5">
-              <Label htmlFor="motion-threshold" className="text-md">
+              <Label htmlFor="motion-threshold">
                 {t("motionDetectionTuner.contourArea.title")}
               </Label>
               <div className="my-2 text-sm text-muted-foreground">
diff --git a/web/src/views/settings/ObjectSettingsView.tsx b/web/src/views/settings/ObjectSettingsView.tsx
index d30036b60..fcc8950f6 100644
--- a/web/src/views/settings/ObjectSettingsView.tsx
+++ b/web/src/views/settings/ObjectSettingsView.tsx
@@ -415,7 +415,7 @@ function ObjectList({ cameraConfig, objects }: ObjectListProps) {
                   </div>
                 </div>
                 <div className="flex w-8/12 flex-row items-center justify-end">
-                  <div className="text-md mr-2 w-1/3">
+                  <div className="mr-2 w-1/3">
                     <div className="flex flex-col items-end justify-end">
                       <p className="mb-1.5 text-sm text-primary-variant">
                         {t("debug.objectShapeFilterDrawing.score")}
@@ -426,7 +426,7 @@ function ObjectList({ cameraConfig, objects }: ObjectListProps) {
                       %
                     </div>
                   </div>
-                  <div className="text-md mr-2 w-1/3">
+                  <div className="mr-2 w-1/3">
                     <div className="flex flex-col items-end justify-end">
                       <p className="mb-1.5 text-sm text-primary-variant">
                         {t("debug.objectShapeFilterDrawing.ratio")}
@@ -434,7 +434,7 @@ function ObjectList({ cameraConfig, objects }: ObjectListProps) {
                       {obj.ratio ? obj.ratio.toFixed(2).toString() : "-"}
                     </div>
                   </div>
-                  <div className="text-md mr-2 w-1/3">
+                  <div className="mr-2 w-1/3">
                     <div className="flex flex-col items-end justify-end">
                       <p className="mb-1.5 text-sm text-primary-variant">
                         {t("debug.objectShapeFilterDrawing.area")}
@@ -505,7 +505,7 @@ function AudioList({ cameraConfig, audioDetections }: AudioListProps) {
                 <div className="ml-3 text-lg">{getTranslatedLabel(key)}</div>
               </div>
               <div className="flex w-8/12 flex-row items-center justify-end">
-                <div className="text-md mr-2 w-1/3">
+                <div className="mr-2 w-1/3">
                   <div className="flex flex-col items-end justify-end">
                     <p className="mb-1.5 text-sm text-primary-variant">
                       {t("debug.audio.score")}
diff --git a/web/src/views/settings/ProfilesView.tsx b/web/src/views/settings/ProfilesView.tsx
index 8991e38f6..9e9bf459f 100644
--- a/web/src/views/settings/ProfilesView.tsx
+++ b/web/src/views/settings/ProfilesView.tsx
@@ -24,7 +24,7 @@ import { resolveCameraName } from "@/hooks/use-camera-friendly-name";
 import { useDocDomain } from "@/hooks/use-doc-domain";
 import { cn } from "@/lib/utils";
 import Heading from "@/components/ui/heading";
-import { Button } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
 import NameAndIdFields from "@/components/input/NameAndIdFields";
@@ -654,10 +654,9 @@ export default function ProfilesView({
                   ns: "views/settings",
                 })}
               />
-              <DialogFooter className="gap-2 md:gap-0">
+              <DialogFooter>
                 <Button
                   type="button"
-                  variant="outline"
                   onClick={() => setAddDialogOpen(false)}
                   disabled={addingProfile}
                 >
@@ -709,7 +708,7 @@ export default function ProfilesView({
               {t("button.cancel", { ns: "common" })}
             </AlertDialogCancel>
             <AlertDialogAction
-              className="bg-destructive text-white hover:bg-destructive/90"
+              className={cn(buttonVariants({ variant: "destructive" }))}
               onClick={(e) => {
                 e.preventDefault();
                 handleDeleteProfile();
@@ -746,7 +745,6 @@ export default function ProfilesView({
             />
             <DialogFooter>
               <Button
-                variant="outline"
                 onClick={() => setRenameProfile(null)}
                 disabled={renaming}
               >
diff --git a/web/src/views/settings/RegionGridSettingsView.tsx b/web/src/views/settings/RegionGridSettingsView.tsx
index 8ab571a3f..32c8524e6 100644
--- a/web/src/views/settings/RegionGridSettingsView.tsx
+++ b/web/src/views/settings/RegionGridSettingsView.tsx
@@ -10,7 +10,6 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
-import { Toaster } from "@/components/ui/sonner";
 import { useCallback, useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
 import axios from "axios";
@@ -59,7 +58,6 @@ export default function RegionGridSettingsView({
   return (
     <>
       <div className="flex size-full flex-col md:flex-row">
-        <Toaster position="top-center" closeButton={true} />
         <div className="scrollbar-container order-last mb-2 mt-2 flex h-full w-full flex-col overflow-y-auto px-2 md:order-none">
           <Heading as="h4" className="mb-2 hidden md:block">
             {t("maintenance.regionGrid.title")}
@@ -85,7 +83,7 @@ export default function RegionGridSettingsView({
               onClick={() => setIsConfirmOpen(true)}
               disabled={isClearing}
               variant="destructive"
-              className="flex flex-1 text-white md:max-w-sm"
+              className="flex flex-1 md:max-w-sm"
             >
               {t("maintenance.regionGrid.clear")}
             </Button>
@@ -108,10 +106,7 @@ export default function RegionGridSettingsView({
               {t("button.cancel", { ns: "common" })}
             </AlertDialogCancel>
             <AlertDialogAction
-              className={cn(
-                buttonVariants({ variant: "destructive" }),
-                "text-white",
-              )}
+              className={cn(buttonVariants({ variant: "destructive" }))}
               onClick={handleClear}
             >
               {t("maintenance.regionGrid.clear")}
diff --git a/web/src/views/settings/TriggerView.tsx b/web/src/views/settings/TriggerView.tsx
index 204fd4dc9..ece43078e 100644
--- a/web/src/views/settings/TriggerView.tsx
+++ b/web/src/views/settings/TriggerView.tsx
@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { toast } from "sonner";
-import { Toaster } from "@/components/ui/sonner";
 import useSWR from "swr";
 import axios from "axios";
 import { Button } from "@/components/ui/button";
@@ -443,7 +442,6 @@ export default function TriggerView({
 
   return (
     <div className="flex size-full flex-col md:flex-row">
-      <Toaster position="top-center" closeButton={true} />
       <div
         className={cn(
           "scrollbar-container order-last mb-2 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2",
diff --git a/web/src/views/settings/UiSettingsView.tsx b/web/src/views/settings/UiSettingsView.tsx
index daf23ac57..153b1b565 100644
--- a/web/src/views/settings/UiSettingsView.tsx
+++ b/web/src/views/settings/UiSettingsView.tsx
@@ -1,7 +1,7 @@
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { ReactNode, useCallback, useContext, useEffect } from "react";
-import { Toaster, toast } from "sonner";
+import { toast } from "sonner";
 import { Button } from "../../components/ui/button";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
@@ -211,7 +211,6 @@ export default function UiSettingsView() {
 
   return (
     <div className="flex size-full flex-col">
-      <Toaster position="top-center" closeButton={true} />
       <div className="scrollbar-container mb-2 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2">
         <Heading as="h4" className="mb-3">
           {t("general.title")}