diff --git a/web/src/components/menu/AccountSettings.tsx b/web/src/components/menu/AccountSettings.tsx
index afa63ae4c..72d05e81f 100644
--- a/web/src/components/menu/AccountSettings.tsx
+++ b/web/src/components/menu/AccountSettings.tsx
@@ -6,12 +6,15 @@ import {
 import { isDesktop } from "react-device-detect";
 import { VscAccount } from "react-icons/vsc";
 
-export default function AccountSettings() {
+type AccountSettingsProps = {
+  className?: string;
+};
+export default function AccountSettings({ className }: AccountSettingsProps) {
   return (
     <Tooltip>
       <TooltipTrigger asChild>
         <div
-          className={`flex flex-col justify-center items-center ${isDesktop ? "rounded-lg text-secondary-foreground bg-secondary hover:bg-muted cursor-pointer" : "text-secondary-foreground"}`}
+          className={`flex flex-col justify-center items-center ${isDesktop ? "rounded-lg text-secondary-foreground bg-secondary hover:bg-muted cursor-pointer" : "text-secondary-foreground"} ${className ?? ""}`}
         >
           <VscAccount className="size-5 md:m-[6px]" />
         </div>
diff --git a/web/src/components/menu/GeneralSettings.tsx b/web/src/components/menu/GeneralSettings.tsx
index aed5f2173..744fc4246 100644
--- a/web/src/components/menu/GeneralSettings.tsx
+++ b/web/src/components/menu/GeneralSettings.tsx
@@ -66,10 +66,10 @@ import {
   DialogTrigger,
 } from "../ui/dialog";
 
-type GeneralSettings = {
+type GeneralSettingsProps = {
   className?: string;
 };
-export default function GeneralSettings({ className }: GeneralSettings) {
+export default function GeneralSettings({ className }: GeneralSettingsProps) {
   const { theme, colorScheme, setTheme, setColorScheme } = useTheme();
   const [restartDialogOpen, setRestartDialogOpen] = useState(false);
   const [restartingSheetOpen, setRestartingSheetOpen] = useState(false);
diff --git a/web/src/components/navigation/Bottombar.tsx b/web/src/components/navigation/Bottombar.tsx
index 38086892e..6df529ccf 100644
--- a/web/src/components/navigation/Bottombar.tsx
+++ b/web/src/components/navigation/Bottombar.tsx
@@ -20,16 +20,19 @@ function Bottombar() {
   return (
     <div className="absolute h-16 inset-x-4 bottom-0 flex flex-row items-center justify-between">
       {navItems.map((item) => (
-        <NavItem key={item.id} item={item} Icon={item.icon} />
+        <NavItem key={item.id} className="p-2" item={item} Icon={item.icon} />
       ))}
-      <GeneralSettings />
-      <AccountSettings />
-      <StatusAlertNav />
+      <GeneralSettings className="p-2" />
+      <AccountSettings className="p-2" />
+      <StatusAlertNav className="p-2" />
     </div>
   );
 }
 
-function StatusAlertNav() {
+type StatusAlertNavProps = {
+  className?: string;
+};
+function StatusAlertNav({ className }: StatusAlertNavProps) {
   const { data: initialStats } = useSWR<FrigateStats>("stats", {
     revalidateOnFocus: false,
   });
@@ -64,7 +67,9 @@ function StatusAlertNav() {
       <DrawerTrigger>
         <IoIosWarning className="size-5 text-danger" />
       </DrawerTrigger>
-      <DrawerContent className="max-h-[75dvh] px-2 mx-1 rounded-t-2xl overflow-hidden">
+      <DrawerContent
+        className={`}max-h-[75dvh] px-2 mx-1 rounded-t-2xl overflow-hidden ${className ?? ""}`}
+      >
         <div className="w-full h-auto py-4 overflow-y-auto overflow-x-hidden flex flex-col items-center gap-2">
           {Object.entries(messages).map(([key, messageArray]) => (
             <div key={key} className="w-full flex items-center gap-2">