diff --git a/docs/docs/configuration/audio_detectors.md b/docs/docs/configuration/audio_detectors.md
index bf71f8d81..3bf57b1a7 100644
--- a/docs/docs/configuration/audio_detectors.md
+++ b/docs/docs/configuration/audio_detectors.md
@@ -144,4 +144,10 @@ In order to use transcription and translation for past events, you must enable a
 
 The transcribed/translated speech will appear in the description box in the Tracked Object Details pane. If Semantic Search is enabled, embeddings are generated for the transcription text and are fully searchable using the description search type.
 
-Recorded `speech` events will always use a `whisper` model, regardless of the `model_size` config setting. Without a GPU, generating transcriptions for longer `speech` events may take a fair amount of time, so be patient.
+:::note
+
+Only one `speech` event may be transcribed at a time. Frigate does not automatically transcribe `speech` events or implement a queue for long-running transcription model inference.
+
+:::
+
+Recorded `speech` events will always use a `whisper` model, regardless of the `model_size` config setting. Without a supported Nvidia GPU, generating transcriptions for longer `speech` events may take a fair amount of time, so be patient.
diff --git a/docs/docs/configuration/reference.md b/docs/docs/configuration/reference.md
index 907bda21e..f8b49303f 100644
--- a/docs/docs/configuration/reference.md
+++ b/docs/docs/configuration/reference.md
@@ -700,11 +700,11 @@ genai:
 # Optional: Configuration for audio transcription
 # NOTE: only the enabled option can be overridden at the camera level
 audio_transcription:
-  # Optional: Enable license plate recognition (default: shown below)
+  # Optional: Enable live and speech event audio transcription (default: shown below)
   enabled: False
-  # Optional: The device to run the models on (default: shown below)
+  # Optional: The device to run the models on for live transcription. (default: shown below)
   device: CPU
-  # Optional: Set the model size used for transcription. (default: shown below)
+  # Optional: Set the model size used for live transcription. (default: shown below)
   model_size: small
   # Optional: Set the language used for transcription translation. (default: shown below)
   # List of language codes: https://github.com/openai/whisper/blob/main/whisper/tokenizer.py#L10
diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index 65257326f..ada72bee3 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -1376,329 +1376,343 @@ function FrigateCameraFeatures({
           title={t("cameraSettings.title", { camera })}
         />
       </DrawerTrigger>
-      <DrawerContent className="rounded-2xl px-2 py-4">
-        <div className="mt-2 flex flex-col gap-2">
-          {isAdmin && (
-            <>
-              <FilterSwitch
-                label={t("cameraSettings.cameraEnabled")}
-                isChecked={enabledState == "ON"}
-                onCheckedChange={() =>
-                  sendEnabled(enabledState == "ON" ? "OFF" : "ON")
-                }
-              />
-              <FilterSwitch
-                label={t("cameraSettings.objectDetection")}
-                isChecked={detectState == "ON"}
-                onCheckedChange={() =>
-                  sendDetect(detectState == "ON" ? "OFF" : "ON")
-                }
-              />
-              {recordingEnabled && (
+      <DrawerContent className="max-h-[75dvh] overflow-hidden rounded-2xl">
+        <div className="scrollbar-container mt-2 flex h-auto flex-col gap-2 overflow-y-auto px-2 py-4">
+          <>
+            {isAdmin && (
+              <>
                 <FilterSwitch
-                  label={t("cameraSettings.recording")}
-                  isChecked={recordState == "ON"}
+                  label={t("cameraSettings.cameraEnabled")}
+                  isChecked={enabledState == "ON"}
                   onCheckedChange={() =>
-                    sendRecord(recordState == "ON" ? "OFF" : "ON")
+                    sendEnabled(enabledState == "ON" ? "OFF" : "ON")
                   }
                 />
-              )}
-              <FilterSwitch
-                label={t("cameraSettings.snapshots")}
-                isChecked={snapshotState == "ON"}
-                onCheckedChange={() =>
-                  sendSnapshot(snapshotState == "ON" ? "OFF" : "ON")
-                }
-              />
-              {audioDetectEnabled && (
                 <FilterSwitch
-                  label={t("cameraSettings.audioDetection")}
-                  isChecked={audioState == "ON"}
+                  label={t("cameraSettings.objectDetection")}
+                  isChecked={detectState == "ON"}
                   onCheckedChange={() =>
-                    sendAudio(audioState == "ON" ? "OFF" : "ON")
+                    sendDetect(detectState == "ON" ? "OFF" : "ON")
                   }
                 />
-              )}
-              {audioDetectEnabled && transcriptionEnabled && (
+                {recordingEnabled && (
+                  <FilterSwitch
+                    label={t("cameraSettings.recording")}
+                    isChecked={recordState == "ON"}
+                    onCheckedChange={() =>
+                      sendRecord(recordState == "ON" ? "OFF" : "ON")
+                    }
+                  />
+                )}
                 <FilterSwitch
-                  label={t("cameraSettings.transcription")}
-                  disabled={audioState == "OFF"}
-                  isChecked={transcriptionState == "ON"}
+                  label={t("cameraSettings.snapshots")}
+                  isChecked={snapshotState == "ON"}
                   onCheckedChange={() =>
-                    sendTranscription(transcriptionState == "ON" ? "OFF" : "ON")
+                    sendSnapshot(snapshotState == "ON" ? "OFF" : "ON")
                   }
                 />
-              )}
-              {autotrackingEnabled && (
-                <FilterSwitch
-                  label={t("cameraSettings.autotracking")}
-                  isChecked={autotrackingState == "ON"}
-                  onCheckedChange={() =>
-                    sendAutotracking(autotrackingState == "ON" ? "OFF" : "ON")
-                  }
-                />
-              )}
-            </>
-          )}
-        </div>
+                {audioDetectEnabled && (
+                  <FilterSwitch
+                    label={t("cameraSettings.audioDetection")}
+                    isChecked={audioState == "ON"}
+                    onCheckedChange={() =>
+                      sendAudio(audioState == "ON" ? "OFF" : "ON")
+                    }
+                  />
+                )}
+                {audioDetectEnabled && transcriptionEnabled && (
+                  <FilterSwitch
+                    label={t("cameraSettings.transcription")}
+                    disabled={audioState == "OFF"}
+                    isChecked={transcriptionState == "ON"}
+                    onCheckedChange={() =>
+                      sendTranscription(
+                        transcriptionState == "ON" ? "OFF" : "ON",
+                      )
+                    }
+                  />
+                )}
+                {autotrackingEnabled && (
+                  <FilterSwitch
+                    label={t("cameraSettings.autotracking")}
+                    isChecked={autotrackingState == "ON"}
+                    onCheckedChange={() =>
+                      sendAutotracking(autotrackingState == "ON" ? "OFF" : "ON")
+                    }
+                  />
+                )}
+              </>
+            )}
 
-        <div className="mt-3 flex flex-col gap-5">
-          {!isRestreamed && (
-            <div className="flex flex-col gap-2 p-2">
-              <Label>{t("stream.title")}</Label>
-              <div className="flex flex-row items-center gap-1 text-sm text-muted-foreground">
-                <LuX className="size-4 text-danger" />
-                <div>
-                  {t("streaming.restreaming.disabled", {
-                    ns: "components/dialog",
-                  })}
-                </div>
-                <Popover>
-                  <PopoverTrigger asChild>
-                    <div className="cursor-pointer p-0">
-                      <LuInfo className="size-4" />
-                      <span className="sr-only">
-                        {t("button.info", { ns: "common" })}
-                      </span>
-                    </div>
-                  </PopoverTrigger>
-                  <PopoverContent className="w-80 text-xs">
-                    {t("streaming.restreaming.desc.title", {
-                      ns: "components/dialog",
-                    })}
-                    <div className="mt-2 flex items-center text-primary">
-                      <Link
-                        to={getLocaleDocUrl("configuration/live")}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="inline"
-                      >
-                        {t("readTheDocumentation", { ns: "common" })}
-                        <LuExternalLink className="ml-2 inline-flex size-3" />
-                      </Link>
-                    </div>
-                  </PopoverContent>
-                </Popover>
-              </div>
-            </div>
-          )}
-          {isRestreamed && Object.values(camera.live.streams).length > 0 && (
-            <div className="mt-1 p-2">
-              <div className="mb-1 text-sm">{t("stream.title")}</div>
-              <Select
-                value={streamName}
-                onValueChange={(value) => {
-                  setStreamName?.(value);
-                }}
-                disabled={debug}
-              >
-                <SelectTrigger className="w-full">
-                  <SelectValue>
-                    {Object.keys(camera.live.streams).find(
-                      (key) => camera.live.streams[key] === streamName,
-                    )}
-                  </SelectValue>
-                </SelectTrigger>
-
-                <SelectContent>
-                  <SelectGroup>
-                    {Object.entries(camera.live.streams).map(
-                      ([stream, name]) => (
-                        <SelectItem
-                          key={stream}
-                          className="cursor-pointer"
-                          value={name}
-                        >
-                          {stream}
-                        </SelectItem>
-                      ),
-                    )}
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-
-              {debug && (
-                <div className="flex flex-row items-center gap-1 text-sm text-muted-foreground">
-                  <>
-                    <LuX className="size-8 text-danger" />
-                    <div>{t("stream.debug.picker")}</div>
-                  </>
-                </div>
-              )}
-
-              {preferredLiveMode != "jsmpeg" && !debug && isRestreamed && (
-                <div className="mt-1 flex flex-row items-center gap-1 text-sm text-muted-foreground">
-                  {supportsAudioOutput ? (
-                    <>
-                      <LuCheck className="size-4 text-success" />
-                      <div>{t("stream.audio.available")}</div>
-                    </>
-                  ) : (
-                    <>
-                      <LuX className="size-4 text-danger" />
-                      <div>{t("stream.audio.unavailable")}</div>
-                      <Popover>
-                        <PopoverTrigger asChild>
-                          <div className="cursor-pointer p-0">
-                            <LuInfo className="size-4" />
-                            <span className="sr-only">
-                              {t("button.info", { ns: "common" })}
-                            </span>
-                          </div>
-                        </PopoverTrigger>
-                        <PopoverContent className="w-52 text-xs">
-                          {t("stream.audio.tips.title")}
-                          <div className="mt-2 flex items-center text-primary">
-                            <Link
-                              to={getLocaleDocUrl("configuration/live")}
-                              target="_blank"
-                              rel="noopener noreferrer"
-                              className="inline"
-                            >
-                              {t("readTheDocumentation", { ns: "common" })}
-                              <LuExternalLink className="ml-2 inline-flex size-3" />
-                            </Link>
-                          </div>
-                        </PopoverContent>
-                      </Popover>
-                    </>
-                  )}
-                </div>
-              )}
-              {preferredLiveMode != "jsmpeg" &&
-                !debug &&
-                isRestreamed &&
-                supportsAudioOutput && (
+            <div className="mt-3 flex flex-col gap-5">
+              {!isRestreamed && (
+                <div className="flex flex-col gap-2 p-2">
+                  <Label>{t("stream.title")}</Label>
                   <div className="flex flex-row items-center gap-1 text-sm text-muted-foreground">
-                    {supports2WayTalk ? (
-                      <>
-                        <LuCheck className="size-4 text-success" />
-                        <div>{t("stream.twoWayTalk.available")}</div>
-                      </>
-                    ) : (
-                      <>
-                        <LuX className="size-4 text-danger" />
-                        <div>{t("stream.twoWayTalk.unavailable")}</div>
-                        <Popover>
-                          <PopoverTrigger asChild>
-                            <div className="cursor-pointer p-0">
-                              <LuInfo className="size-4" />
-                              <span className="sr-only">
-                                {t("button.info", { ns: "common" })}
-                              </span>
-                            </div>
-                          </PopoverTrigger>
-                          <PopoverContent className="w-52 text-xs">
-                            {t("stream.twoWayTalk.tips")}
-                            <div className="mt-2 flex items-center text-primary">
-                              <Link
-                                to={getLocaleDocUrl(
-                                  "configuration/live/#webrtc-extra-configuration",
-                                )}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="inline"
+                    <LuX className="size-4 text-danger" />
+                    <div>
+                      {t("streaming.restreaming.disabled", {
+                        ns: "components/dialog",
+                      })}
+                    </div>
+                    <Popover>
+                      <PopoverTrigger asChild>
+                        <div className="cursor-pointer p-0">
+                          <LuInfo className="size-4" />
+                          <span className="sr-only">
+                            {t("button.info", { ns: "common" })}
+                          </span>
+                        </div>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-80 text-xs">
+                        {t("streaming.restreaming.desc.title", {
+                          ns: "components/dialog",
+                        })}
+                        <div className="mt-2 flex items-center text-primary">
+                          <Link
+                            to={getLocaleDocUrl("configuration/live")}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="inline"
+                          >
+                            {t("readTheDocumentation", { ns: "common" })}
+                            <LuExternalLink className="ml-2 inline-flex size-3" />
+                          </Link>
+                        </div>
+                      </PopoverContent>
+                    </Popover>
+                  </div>
+                </div>
+              )}
+              {isRestreamed &&
+                Object.values(camera.live.streams).length > 0 && (
+                  <div className="mt-1 p-2">
+                    <div className="mb-1 text-sm">{t("stream.title")}</div>
+                    <Select
+                      value={streamName}
+                      onValueChange={(value) => {
+                        setStreamName?.(value);
+                      }}
+                      disabled={debug}
+                    >
+                      <SelectTrigger className="w-full">
+                        <SelectValue>
+                          {Object.keys(camera.live.streams).find(
+                            (key) => camera.live.streams[key] === streamName,
+                          )}
+                        </SelectValue>
+                      </SelectTrigger>
+
+                      <SelectContent>
+                        <SelectGroup>
+                          {Object.entries(camera.live.streams).map(
+                            ([stream, name]) => (
+                              <SelectItem
+                                key={stream}
+                                className="cursor-pointer"
+                                value={name}
                               >
-                                {t("readTheDocumentation", { ns: "common" })}
-                                <LuExternalLink className="ml-2 inline-flex size-3" />
-                              </Link>
-                            </div>
-                          </PopoverContent>
-                        </Popover>
-                      </>
+                                {stream}
+                              </SelectItem>
+                            ),
+                          )}
+                        </SelectGroup>
+                      </SelectContent>
+                    </Select>
+
+                    {debug && (
+                      <div className="flex flex-row items-center gap-1 text-sm text-muted-foreground">
+                        <>
+                          <LuX className="size-8 text-danger" />
+                          <div>{t("stream.debug.picker")}</div>
+                        </>
+                      </div>
+                    )}
+
+                    {preferredLiveMode != "jsmpeg" &&
+                      !debug &&
+                      isRestreamed && (
+                        <div className="mt-1 flex flex-row items-center gap-1 text-sm text-muted-foreground">
+                          {supportsAudioOutput ? (
+                            <>
+                              <LuCheck className="size-4 text-success" />
+                              <div>{t("stream.audio.available")}</div>
+                            </>
+                          ) : (
+                            <>
+                              <LuX className="size-4 text-danger" />
+                              <div>{t("stream.audio.unavailable")}</div>
+                              <Popover>
+                                <PopoverTrigger asChild>
+                                  <div className="cursor-pointer p-0">
+                                    <LuInfo className="size-4" />
+                                    <span className="sr-only">
+                                      {t("button.info", { ns: "common" })}
+                                    </span>
+                                  </div>
+                                </PopoverTrigger>
+                                <PopoverContent className="w-52 text-xs">
+                                  {t("stream.audio.tips.title")}
+                                  <div className="mt-2 flex items-center text-primary">
+                                    <Link
+                                      to={getLocaleDocUrl("configuration/live")}
+                                      target="_blank"
+                                      rel="noopener noreferrer"
+                                      className="inline"
+                                    >
+                                      {t("readTheDocumentation", {
+                                        ns: "common",
+                                      })}
+                                      <LuExternalLink className="ml-2 inline-flex size-3" />
+                                    </Link>
+                                  </div>
+                                </PopoverContent>
+                              </Popover>
+                            </>
+                          )}
+                        </div>
+                      )}
+                    {preferredLiveMode != "jsmpeg" &&
+                      !debug &&
+                      isRestreamed &&
+                      supportsAudioOutput && (
+                        <div className="flex flex-row items-center gap-1 text-sm text-muted-foreground">
+                          {supports2WayTalk ? (
+                            <>
+                              <LuCheck className="size-4 text-success" />
+                              <div>{t("stream.twoWayTalk.available")}</div>
+                            </>
+                          ) : (
+                            <>
+                              <LuX className="size-4 text-danger" />
+                              <div>{t("stream.twoWayTalk.unavailable")}</div>
+                              <Popover>
+                                <PopoverTrigger asChild>
+                                  <div className="cursor-pointer p-0">
+                                    <LuInfo className="size-4" />
+                                    <span className="sr-only">
+                                      {t("button.info", { ns: "common" })}
+                                    </span>
+                                  </div>
+                                </PopoverTrigger>
+                                <PopoverContent className="w-52 text-xs">
+                                  {t("stream.twoWayTalk.tips")}
+                                  <div className="mt-2 flex items-center text-primary">
+                                    <Link
+                                      to={getLocaleDocUrl(
+                                        "configuration/live/#webrtc-extra-configuration",
+                                      )}
+                                      target="_blank"
+                                      rel="noopener noreferrer"
+                                      className="inline"
+                                    >
+                                      {t("readTheDocumentation", {
+                                        ns: "common",
+                                      })}
+                                      <LuExternalLink className="ml-2 inline-flex size-3" />
+                                    </Link>
+                                  </div>
+                                </PopoverContent>
+                              </Popover>
+                            </>
+                          )}
+                        </div>
+                      )}
+                    {preferredLiveMode == "jsmpeg" && isRestreamed && (
+                      <div className="mt-2 flex flex-col items-center gap-3">
+                        <div className="flex flex-row items-center gap-2">
+                          <IoIosWarning className="mr-1 size-8 text-danger" />
+                          <p className="text-sm">
+                            {t("stream.lowBandwidth.tips")}
+                          </p>
+                        </div>
+                        <Button
+                          className={`flex items-center gap-2.5 rounded-lg`}
+                          aria-label={t("stream.lowBandwidth.resetStream")}
+                          variant="outline"
+                          size="sm"
+                          disabled={debug}
+                          onClick={() => setLowBandwidth(false)}
+                        >
+                          <MdOutlineRestartAlt className="size-5 text-primary-variant" />
+                          <div className="text-primary-variant">
+                            {t("stream.lowBandwidth.resetStream")}
+                          </div>
+                        </Button>
+                      </div>
                     )}
                   </div>
                 )}
-              {preferredLiveMode == "jsmpeg" && isRestreamed && (
-                <div className="mt-2 flex flex-col items-center gap-3">
-                  <div className="flex flex-row items-center gap-2">
-                    <IoIosWarning className="mr-1 size-8 text-danger" />
-                    <p className="text-sm">{t("stream.lowBandwidth.tips")}</p>
-                  </div>
+              <div className="flex flex-col gap-1 px-2">
+                <div className="mb-1 text-sm font-medium leading-none">
+                  {t("manualRecording.title")}
+                </div>
+                <div className="flex flex-row items-stretch gap-2">
                   <Button
-                    className={`flex items-center gap-2.5 rounded-lg`}
-                    aria-label={t("stream.lowBandwidth.resetStream")}
-                    variant="outline"
-                    size="sm"
-                    disabled={debug}
-                    onClick={() => setLowBandwidth(false)}
+                    onClick={handleSnapshotClick}
+                    disabled={!cameraEnabled || debug || isSnapshotLoading}
+                    className="h-auto w-full whitespace-normal"
                   >
-                    <MdOutlineRestartAlt className="size-5 text-primary-variant" />
-                    <div className="text-primary-variant">
-                      {t("stream.lowBandwidth.resetStream")}
-                    </div>
+                    {isSnapshotLoading && (
+                      <ActivityIndicator className="mr-2 size-4" />
+                    )}
+                    {t("snapshot.takeSnapshot")}
+                  </Button>
+                  <Button
+                    onClick={handleEventButtonClick}
+                    className={cn(
+                      "h-auto w-full whitespace-normal",
+                      isRecording &&
+                        "animate-pulse bg-red-500 hover:bg-red-600",
+                    )}
+                    disabled={debug}
+                  >
+                    {t("manualRecording." + (isRecording ? "end" : "start"))}
                   </Button>
                 </div>
+                <p className="text-sm text-muted-foreground">
+                  {t("manualRecording.tips")}
+                </p>
+              </div>
+              {isRestreamed && (
+                <>
+                  <div className="flex flex-col gap-2">
+                    <FilterSwitch
+                      label={t("manualRecording.playInBackground.label")}
+                      isChecked={playInBackground}
+                      onCheckedChange={(checked) => {
+                        setPlayInBackground(checked);
+                      }}
+                      disabled={debug}
+                    />
+                    <p className="mx-2 -mt-2 text-sm text-muted-foreground">
+                      {t("manualRecording.playInBackground.desc")}
+                    </p>
+                  </div>
+                  <div className="flex flex-col gap-2">
+                    <FilterSwitch
+                      label={t("manualRecording.showStats.label")}
+                      isChecked={showStats}
+                      onCheckedChange={(checked) => {
+                        setShowStats(checked);
+                      }}
+                      disabled={debug}
+                    />
+                    <p className="mx-2 -mt-2 text-sm text-muted-foreground">
+                      {t("manualRecording.showStats.desc")}
+                    </p>
+                  </div>
+                </>
               )}
-            </div>
-          )}
-          <div className="flex flex-col gap-1 px-2">
-            <div className="mb-1 text-sm font-medium leading-none">
-              {t("manualRecording.title")}
-            </div>
-            <div className="flex flex-row items-stretch gap-2">
-              <Button
-                onClick={handleSnapshotClick}
-                disabled={!cameraEnabled || debug || isSnapshotLoading}
-                className="h-auto w-full whitespace-normal"
-              >
-                {isSnapshotLoading && (
-                  <ActivityIndicator className="mr-2 size-4" />
-                )}
-                {t("snapshot.takeSnapshot")}
-              </Button>
-              <Button
-                onClick={handleEventButtonClick}
-                className={cn(
-                  "h-auto w-full whitespace-normal",
-                  isRecording && "animate-pulse bg-red-500 hover:bg-red-600",
-                )}
-                disabled={debug}
-              >
-                {t("manualRecording." + (isRecording ? "end" : "start"))}
-              </Button>
-            </div>
-            <p className="text-sm text-muted-foreground">
-              {t("manualRecording.tips")}
-            </p>
-          </div>
-          {isRestreamed && (
-            <>
-              <div className="flex flex-col gap-2">
+              <div className="mb-3 flex flex-col">
                 <FilterSwitch
-                  label={t("manualRecording.playInBackground.label")}
-                  isChecked={playInBackground}
-                  onCheckedChange={(checked) => {
-                    setPlayInBackground(checked);
-                  }}
-                  disabled={debug}
+                  label={t("streaming.debugView", { ns: "components/dialog" })}
+                  isChecked={debug}
+                  onCheckedChange={(checked) => setDebug(checked)}
                 />
-                <p className="mx-2 -mt-2 text-sm text-muted-foreground">
-                  {t("manualRecording.playInBackground.desc")}
-                </p>
               </div>
-              <div className="flex flex-col gap-2">
-                <FilterSwitch
-                  label={t("manualRecording.showStats.label")}
-                  isChecked={showStats}
-                  onCheckedChange={(checked) => {
-                    setShowStats(checked);
-                  }}
-                  disabled={debug}
-                />
-                <p className="mx-2 -mt-2 text-sm text-muted-foreground">
-                  {t("manualRecording.showStats.desc")}
-                </p>
-              </div>
-            </>
-          )}
-          <div className="mb-3 flex flex-col">
-            <FilterSwitch
-              label={t("streaming.debugView", { ns: "components/dialog" })}
-              isChecked={debug}
-              onCheckedChange={(checked) => setDebug(checked)}
-            />
-          </div>
+            </div>
+          </>
         </div>
       </DrawerContent>
     </Drawer>
diff --git a/web/src/views/settings/AuthenticationView.tsx b/web/src/views/settings/AuthenticationView.tsx
index 5c11d8914..19f157b46 100644
--- a/web/src/views/settings/AuthenticationView.tsx
+++ b/web/src/views/settings/AuthenticationView.tsx
@@ -784,7 +784,7 @@ 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-10 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2 md:order-none md:mr-3 md:mt-0">
+      <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}
         {!section && (
diff --git a/web/src/views/settings/CameraManagementView.tsx b/web/src/views/settings/CameraManagementView.tsx
index 1a626fa02..8f1b5eae5 100644
--- a/web/src/views/settings/CameraManagementView.tsx
+++ b/web/src/views/settings/CameraManagementView.tsx
@@ -65,7 +65,7 @@ export default function CameraManagementView({
         closeButton
       />
       <div className="flex size-full flex-col md:flex-row">
-        <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2 md:order-none">
+        <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">
           {viewMode === "settings" ? (
             <>
               <Heading as="h4" className="mb-2">
diff --git a/web/src/views/settings/CameraReviewSettingsView.tsx b/web/src/views/settings/CameraReviewSettingsView.tsx
index 47ea5c22a..7a7b92e4e 100644
--- a/web/src/views/settings/CameraReviewSettingsView.tsx
+++ b/web/src/views/settings/CameraReviewSettingsView.tsx
@@ -298,7 +298,7 @@ export default function CameraReviewSettingsView({
     <>
       <div className="flex size-full flex-col md:flex-row">
         <Toaster position="top-center" closeButton={true} />
-        <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2 md:order-none">
+        <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">
           <Heading as="h4" className="mb-2">
             {t("cameraReview.title")}
           </Heading>
diff --git a/web/src/views/settings/EnrichmentsSettingsView.tsx b/web/src/views/settings/EnrichmentsSettingsView.tsx
index e3b0626b9..6aba50dd3 100644
--- a/web/src/views/settings/EnrichmentsSettingsView.tsx
+++ b/web/src/views/settings/EnrichmentsSettingsView.tsx
@@ -244,7 +244,7 @@ export default function EnrichmentsSettingsView({
   return (
     <div className="flex size-full flex-col md:flex-row">
       <Toaster position="top-center" closeButton={true} />
-      <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2 md:order-none">
+      <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">
         <Heading as="h4" className="mb-2">
           {t("enrichments.title")}
         </Heading>
diff --git a/web/src/views/settings/FrigatePlusSettingsView.tsx b/web/src/views/settings/FrigatePlusSettingsView.tsx
index 52af94354..80d98b197 100644
--- a/web/src/views/settings/FrigatePlusSettingsView.tsx
+++ b/web/src/views/settings/FrigatePlusSettingsView.tsx
@@ -211,7 +211,7 @@ export default function FrigatePlusSettingsView({
     <>
       <div className="flex size-full flex-col md:flex-row">
         <Toaster position="top-center" closeButton={true} />
-        <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2 md:order-none">
+        <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">
           <Heading as="h4" className="mb-2">
             {t("frigatePlus.title")}
           </Heading>
diff --git a/web/src/views/settings/MasksAndZonesView.tsx b/web/src/views/settings/MasksAndZonesView.tsx
index 27c542e87..efeaa9be0 100644
--- a/web/src/views/settings/MasksAndZonesView.tsx
+++ b/web/src/views/settings/MasksAndZonesView.tsx
@@ -434,7 +434,7 @@ 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-10 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">
+          <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">
             {editPane == "zone" && (
               <ZoneEditPane
                 polygons={editingPolygons}
diff --git a/web/src/views/settings/MotionTunerView.tsx b/web/src/views/settings/MotionTunerView.tsx
index 34aaac22f..1cdaa54f1 100644
--- a/web/src/views/settings/MotionTunerView.tsx
+++ b/web/src/views/settings/MotionTunerView.tsx
@@ -191,7 +191,7 @@ 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-10 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">
+      <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")}
         </Heading>
diff --git a/web/src/views/settings/NotificationsSettingsView.tsx b/web/src/views/settings/NotificationsSettingsView.tsx
index 6280ca6a8..77da16386 100644
--- a/web/src/views/settings/NotificationsSettingsView.tsx
+++ b/web/src/views/settings/NotificationsSettingsView.tsx
@@ -331,7 +331,7 @@ export default function NotificationView({
 
   if (!("Notification" in window) || !window.isSecureContext) {
     return (
-      <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2 md:order-none">
+      <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">
         <div className="grid w-full grid-cols-1 gap-4 md:grid-cols-2">
           <div className="col-span-1">
             <Heading as="h4" className="mb-2">
@@ -385,7 +385,7 @@ export default function NotificationView({
     <>
       <div className="flex size-full flex-col md:flex-row">
         <Toaster position="top-center" closeButton={true} />
-        <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto px-2 md:order-none">
+        <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(
               isAdmin && "grid w-full grid-cols-1 gap-4 md:grid-cols-2",
diff --git a/web/src/views/settings/ObjectSettingsView.tsx b/web/src/views/settings/ObjectSettingsView.tsx
index 765e5e75b..53ad85efa 100644
--- a/web/src/views/settings/ObjectSettingsView.tsx
+++ b/web/src/views/settings/ObjectSettingsView.tsx
@@ -164,7 +164,7 @@ export default function ObjectSettingsView({
   return (
     <div className="mt-1 flex size-full flex-col pb-2 md:flex-row">
       <Toaster position="top-center" closeButton={true} />
-      <div className="scrollbar-container order-last mb-10 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:mb-0 md:mr-2 md:mt-0 md:w-3/12">
+      <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:mb-0 md:mr-2 md:mt-0 md:w-3/12">
         <Heading as="h4" className="mb-2">
           {t("debug.title")}
         </Heading>
@@ -434,7 +434,7 @@ function ObjectList({ cameraConfig, objects }: ObjectListProps) {
                         {t("debug.objectShapeFilterDrawing.area")}
                       </p>
                       {obj.area ? (
-                        <>
+                        <div className="text-end">
                           <div className="text-xs">
                             px: {obj.area.toString()}
                           </div>
@@ -448,7 +448,7 @@ function ObjectList({ cameraConfig, objects }: ObjectListProps) {
                               .toFixed(4)
                               .toString()}
                           </div>
-                        </>
+                        </div>
                       ) : (
                         "-"
                       )}
diff --git a/web/src/views/settings/TriggerView.tsx b/web/src/views/settings/TriggerView.tsx
index 0b004fd82..a0e19f5b2 100644
--- a/web/src/views/settings/TriggerView.tsx
+++ b/web/src/views/settings/TriggerView.tsx
@@ -440,7 +440,7 @@ export default function TriggerView({
   return (
     <div className="flex size-full flex-col md:flex-row">
       <Toaster position="top-center" closeButton={true} />
-      <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2 md:order-none md:mr-3 md:mt-0">
+      <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">
         {!isSemanticSearchEnabled ? (
           <div className="mb-5 flex flex-row items-center justify-between gap-2">
             <div className="flex flex-col items-start">
diff --git a/web/src/views/settings/UiSettingsView.tsx b/web/src/views/settings/UiSettingsView.tsx
index 8ec484aa3..34df0ddc8 100644
--- a/web/src/views/settings/UiSettingsView.tsx
+++ b/web/src/views/settings/UiSettingsView.tsx
@@ -108,7 +108,7 @@ export default function UiSettingsView() {
     <>
       <div className="flex size-full flex-col md:flex-row">
         <Toaster position="top-center" closeButton={true} />
-        <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2 md:order-none">
+        <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">
           <Heading as="h4" className="mb-2">
             {t("general.title")}
           </Heading>