diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
index 608a5281c..201ffc8cb 100644
--- a/web/src/components/Header.tsx
+++ b/web/src/components/Header.tsx
@@ -1,63 +1,11 @@
 import { Link } from "react-router-dom";
 import Logo from "@/components/Logo";
-import {
-  LuActivity,
-  LuGithub,
-  LuHardDrive,
-  LuLifeBuoy,
-  LuList,
-  LuMenu,
-  LuMoon,
-  LuPenSquare,
-  LuRotateCw,
-  LuSettings,
-  LuSun,
-  LuSunMoon,
-} from "react-icons/lu";
-import { IoColorPalette } from "react-icons/io5";
-import { CgDarkMode } from "react-icons/cg";
+import { LuMenu } from "react-icons/lu";
 import { Button } from "@/components/ui/button";
-import { VscAccount } from "react-icons/vsc";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import {
-  colorSchemes,
-  friendlyColorSchemeName,
-  useTheme,
-} from "@/context/theme-provider";
-import { useEffect, useState } from "react";
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from "./ui/sheet";
-import ActivityIndicator from "./ui/activity-indicator";
-import { useRestart } from "@/api/ws";
 import { ENV } from "@/env";
 import { NavLink } from "react-router-dom";
 import { navbarLinks } from "@/pages/site-navigation";
+import SettingsDropdownMenu from "./settings/SettingsNavItems";
 
 type HeaderProps = {
   onToggleNavbar: () => void;
@@ -89,39 +37,8 @@ function HeaderNavigation() {
 }
 
 function Header({ onToggleNavbar }: HeaderProps) {
-  const { theme, colorScheme, setTheme, setColorScheme } = useTheme();
-  const [restartDialogOpen, setRestartDialogOpen] = useState(false);
-  const [restartingSheetOpen, setRestartingSheetOpen] = useState(false);
-  const [countdown, setCountdown] = useState(60);
-
-  const { send: sendRestart } = useRestart();
-
-  useEffect(() => {
-    let countdownInterval: NodeJS.Timeout;
-
-    if (restartingSheetOpen) {
-      countdownInterval = setInterval(() => {
-        setCountdown((prevCountdown) => prevCountdown - 1);
-      }, 1000);
-    }
-
-    return () => {
-      clearInterval(countdownInterval);
-    };
-  }, [restartingSheetOpen]);
-
-  useEffect(() => {
-    if (countdown === 0) {
-      window.location.href = "/";
-    }
-  }, [countdown]);
-
-  const handleForceReload = () => {
-    window.location.href = "/";
-  };
-
   return (
-    <div className="flex gap-10 lg:gap-20 justify-between pt-2 mb-2 border-b-[1px] px-4 items-center">
+    <div className="flex gap-10 lg:gap-20 justify-between pt-2 mb-2 border-b-[1px] px-4 items-center md:hidden">
       <div className="flex gap-4 items-center flex-shrink-0 m-1">
         <Button
           variant="ghost"
@@ -145,201 +62,7 @@ function Header({ onToggleNavbar }: HeaderProps) {
         </Link>
         <HeaderNavigation />
       </div>
-      <div className="flex flex-shrink-0 md:gap-2">
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button size="icon" variant="ghost">
-              <LuSettings />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent className="md:w-72 mr-5">
-            <DropdownMenuLabel>System</DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              <Link to="/storage">
-                <DropdownMenuItem>
-                  <LuHardDrive className="mr-2 h-4 w-4" />
-                  <span>Storage</span>
-                </DropdownMenuItem>
-              </Link>
-              <Link to="/system">
-                <DropdownMenuItem>
-                  <LuActivity className="mr-2 h-4 w-4" />
-                  <span>System metrics</span>
-                </DropdownMenuItem>
-              </Link>
-              <Link to="/logs">
-                <DropdownMenuItem>
-                  <LuList className="mr-2 h-4 w-4" />
-                  <span>System logs</span>
-                </DropdownMenuItem>
-              </Link>
-            </DropdownMenuGroup>
-            <DropdownMenuLabel className="mt-3">
-              Configuration
-            </DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              <Link to="/settings">
-                <DropdownMenuItem>
-                  <LuSettings className="mr-2 h-4 w-4" />
-                  <span>Settings</span>
-                </DropdownMenuItem>
-              </Link>
-              <Link to="/config">
-                <DropdownMenuItem>
-                  <LuPenSquare className="mr-2 h-4 w-4" />
-                  <span>Configuration editor</span>
-                </DropdownMenuItem>
-              </Link>
-              <DropdownMenuLabel className="mt-3">Appearance</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuSub>
-                <DropdownMenuSubTrigger>
-                  <LuSunMoon className="mr-2 h-4 w-4" />
-                  <span>Dark Mode</span>
-                </DropdownMenuSubTrigger>
-                <DropdownMenuPortal>
-                  <DropdownMenuSubContent>
-                    <DropdownMenuItem onClick={() => setTheme("light")}>
-                      {theme === "light" ? (
-                        <>
-                          <LuSun className="mr-2 h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-                          Light
-                        </>
-                      ) : (
-                        <span className="mr-2 ml-6">Light</span>
-                      )}
-                    </DropdownMenuItem>
-                    <DropdownMenuItem onClick={() => setTheme("dark")}>
-                      {theme === "dark" ? (
-                        <>
-                          <LuMoon className="mr-2 h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-                          Dark
-                        </>
-                      ) : (
-                        <span className="mr-2 ml-6">Dark</span>
-                      )}
-                    </DropdownMenuItem>
-                    <DropdownMenuItem onClick={() => setTheme("system")}>
-                      {theme === "system" ? (
-                        <>
-                          <CgDarkMode className="mr-2 h-4 w-4 scale-100 transition-all" />
-                          System
-                        </>
-                      ) : (
-                        <span className="mr-2 ml-6">System</span>
-                      )}
-                    </DropdownMenuItem>
-                  </DropdownMenuSubContent>
-                </DropdownMenuPortal>
-              </DropdownMenuSub>
-              <DropdownMenuSub>
-                <DropdownMenuSubTrigger>
-                  <LuSunMoon className="mr-2 h-4 w-4" />
-                  <span>Theme</span>
-                </DropdownMenuSubTrigger>
-                <DropdownMenuPortal>
-                  <DropdownMenuSubContent>
-                    {colorSchemes.map((scheme) => (
-                      <DropdownMenuItem
-                        key={scheme}
-                        onClick={() => setColorScheme(scheme)}
-                      >
-                        {scheme === colorScheme ? (
-                          <>
-                            <IoColorPalette className="mr-2 h-4 w-4 rotate-0 scale-100 transition-all" />
-                            {friendlyColorSchemeName(scheme)}
-                          </>
-                        ) : (
-                          <span className="mr-2 ml-6">
-                            {friendlyColorSchemeName(scheme)}
-                          </span>
-                        )}
-                      </DropdownMenuItem>
-                    ))}
-                  </DropdownMenuSubContent>
-                </DropdownMenuPortal>
-              </DropdownMenuSub>
-            </DropdownMenuGroup>
-            <DropdownMenuLabel className="mt-3">Help</DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <a href="https://docs.frigate.video">
-              <DropdownMenuItem>
-                <LuLifeBuoy className="mr-2 h-4 w-4" />
-                <span>Documentation</span>
-              </DropdownMenuItem>
-            </a>
-            <a href="https://github.com/blakeblackshear/frigate">
-              <DropdownMenuItem>
-                <LuGithub className="mr-2 h-4 w-4" />
-                <span>GitHub</span>
-              </DropdownMenuItem>
-            </a>
-            <DropdownMenuSeparator className="mt-3" />
-            <DropdownMenuItem onClick={() => setRestartDialogOpen(true)}>
-              <LuRotateCw className="mr-2 h-4 w-4" />
-              <span>Restart Frigate</span>
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-        <Button size="icon" variant="ghost">
-          <VscAccount />
-        </Button>
-      </div>
-      {restartDialogOpen && (
-        <AlertDialog
-          open={restartDialogOpen}
-          onOpenChange={() => setRestartDialogOpen(false)}
-        >
-          <AlertDialogContent>
-            <AlertDialogHeader>
-              <AlertDialogTitle>
-                Are you sure you want to restart Frigate?
-              </AlertDialogTitle>
-            </AlertDialogHeader>
-            <AlertDialogFooter>
-              <AlertDialogCancel>Cancel</AlertDialogCancel>
-              <AlertDialogAction
-                onClick={() => {
-                  setRestartingSheetOpen(true);
-                  sendRestart("restart");
-                }}
-              >
-                Restart
-              </AlertDialogAction>
-            </AlertDialogFooter>
-          </AlertDialogContent>
-        </AlertDialog>
-      )}
-      {restartingSheetOpen && (
-        <>
-          <Sheet
-            open={restartingSheetOpen}
-            onOpenChange={() => setRestartingSheetOpen(false)}
-          >
-            <SheetContent
-              side="top"
-              onInteractOutside={(e) => e.preventDefault()}
-            >
-              <div className="flex flex-col items-center">
-                <ActivityIndicator />
-                <SheetHeader className="mt-5 text-center">
-                  <SheetTitle className="text-center">
-                    Frigate is Restarting
-                  </SheetTitle>
-                  <SheetDescription className="text-center">
-                    <p>This page will reload in {countdown} seconds.</p>
-                  </SheetDescription>
-                </SheetHeader>
-                <Button size="lg" className="mt-5" onClick={handleForceReload}>
-                  Force Reload Now
-                </Button>
-              </div>
-            </SheetContent>
-          </Sheet>
-        </>
-      )}
+      <SettingsDropdownMenu className="flex flex-shrink-0 md:gap-2" />
     </div>
   );
 }
diff --git a/web/src/components/Logo.tsx b/web/src/components/Logo.tsx
index f5a220ce9..32cd52eda 100644
--- a/web/src/components/Logo.tsx
+++ b/web/src/components/Logo.tsx
@@ -1,6 +1,9 @@
-export default function Logo() {
+type LogoProps = {
+  className?: string;
+};
+export default function Logo({ className }: LogoProps) {
   return (
-    <svg viewBox="0 0 512 512" className="fill-current">
+    <svg viewBox="0 0 512 512" className={`fill-current ${className}`}>
       <path d="M130 446.5C131.6 459.3 145 468 137 470C129 472 94 406.5 86 378.5C78 350.5 73.5 319 75.5 301C77.4999 283 181 255 181 247.5C181 240 147.5 247 146 241C144.5 235 171.3 238.6 178.5 229C189.75 214 204 216.5 213 208.5C222 200.5 233 170 235 157C237 144 215 129 209 119C203 109 222 102 268 83C314 64 460 22 462 27C464 32 414 53 379 66C344 79 287 104 287 111C287 118 290 123.5 288 139.5C286 155.5 285.76 162.971 282 173.5C279.5 180.5 277 197 282 212C286 224 299 233 305 235C310 235.333 323.8 235.8 339 235C358 234 385 236 385 241C385 246 344 243 344 250C344 257 386 249 385 256C384 263 350 260 332 260C317.6 260 296.333 259.333 287 256L285 263C281.667 263 274.7 265 267.5 265C258.5 265 258 268 241.5 268C225 268 230 267 215 266C200 265 144 308 134 322C124 336 130 370 130 385.5C130 399.428 128 430.5 130 446.5Z" />
     </svg>
   );
diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx
index b12c76f06..e1dc6b4ed 100644
--- a/web/src/components/Sidebar.tsx
+++ b/web/src/components/Sidebar.tsx
@@ -4,6 +4,7 @@ import { Sheet, SheetContent } from "@/components/ui/sheet";
 import Logo from "./Logo";
 import { ENV } from "@/env";
 import { navbarLinks } from "@/pages/site-navigation";
+import SettingsDropdownMenu from "./settings/SettingsNavItems";
 
 function Sidebar({
   sheetOpen,
@@ -13,35 +14,34 @@ function Sidebar({
   setSheetOpen: (open: boolean) => void;
 }) {
   const sidebar = (
-    <aside className="sticky top-0 overflow-y-auto scrollbar-hidden py-4 lg:pt-0 flex flex-col ml-1 lg:w-56 gap-0">
-      {navbarLinks.map((item) => (
-        <SidebarItem
-          key={item.id}
-          Icon={item.icon}
-          title={item.title}
-          url={item.url}
-          dev={item.dev}
-          onClick={() => setSheetOpen(false)}
-        />
-      ))}
+    <aside className="w-[52px] h-full sticky top-0 overflow-y-auto scrollbar-hidden py-4 flex flex-col justify-between">
+      <div className="w-full flex flex-col gap-0 items-center">
+        <Logo className="w-8 h-8 mb-6" />
+        {navbarLinks.map((item) => (
+          <SidebarItem
+            key={item.id}
+            Icon={item.icon}
+            title={item.title}
+            url={item.url}
+            dev={item.dev}
+            onClick={() => setSheetOpen(false)}
+          />
+        ))}
+      </div>
+      <SettingsDropdownMenu className="flex flex-col items-center" />
     </aside>
   );
 
   return (
     <>
-      <div className="hidden">{sidebar}</div>
-
+      <div className="hidden md:block">{sidebar}</div>
       <Sheet
         open={sheetOpen}
         modal={false}
         onOpenChange={() => setSheetOpen(false)}
       >
-        <SheetContent side="left" className="w-[120px]">
-          <div className="w-full flex flex-row justify-center">
-            <div className="w-10">
-              <Logo />
-            </div>
-          </div>
+        <SheetContent side="left" className="w-[100px]">
+          <div className="w-full flex flex-row justify-center"></div>
           {sidebar}
         </SheetContent>
       </Sheet>
@@ -66,13 +66,15 @@ function SidebarItem({ Icon, title, url, dev, onClick }: SidebarItemProps) {
         to={url}
         onClick={onClick}
         className={({ isActive }) =>
-          `py-4 px-2 flex flex-col lg:flex-row items-center rounded-lg gap-2 lg:w-full hover:bg-border ${
-            isActive ? "font-bold bg-popover text-popover-foreground" : ""
+          `mx-[10px] mb-6 flex flex-col justify-center items-center rounded-lg ${
+            isActive
+              ? "font-bold text-white bg-blue-400"
+              : "text-muted-foreground bg-secondary"
           }`
         }
       >
-        <Icon className="w-6 h-6 mr-1" />
-        <div className="text-sm text-center">{title}</div>
+        <Icon className="w-5 h-5 m-[6px]" />
+        <div className="hidden">{title}</div>
       </NavLink>
     )
   );
diff --git a/web/src/components/settings/SettingsNavItems.tsx b/web/src/components/settings/SettingsNavItems.tsx
new file mode 100644
index 000000000..711b3df02
--- /dev/null
+++ b/web/src/components/settings/SettingsNavItems.tsx
@@ -0,0 +1,291 @@
+import {
+  LuActivity,
+  LuGithub,
+  LuHardDrive,
+  LuLifeBuoy,
+  LuList,
+  LuMoon,
+  LuPenSquare,
+  LuRotateCw,
+  LuSettings,
+  LuSun,
+  LuSunMoon,
+} from "react-icons/lu";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import { Button } from "../ui/button";
+import { Link } from "react-router-dom";
+import { CgDarkMode } from "react-icons/cg";
+import { VscAccount } from "react-icons/vsc";
+import {
+  colorSchemes,
+  friendlyColorSchemeName,
+  useTheme,
+} from "@/context/theme-provider";
+import { IoColorPalette } from "react-icons/io5";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "../ui/alert-dialog";
+import { useEffect, useState } from "react";
+import { useRestart } from "@/api/ws";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "../ui/sheet";
+import ActivityIndicator from "../ui/activity-indicator";
+
+type SettingsNavItemsProps = {
+  className?: string;
+};
+export default function SettingsNavItems({ className }: SettingsNavItemsProps) {
+  const { theme, colorScheme, setTheme, setColorScheme } = useTheme();
+  const [restartDialogOpen, setRestartDialogOpen] = useState(false);
+  const [restartingSheetOpen, setRestartingSheetOpen] = useState(false);
+  const [countdown, setCountdown] = useState(60);
+
+  const { send: sendRestart } = useRestart();
+
+  useEffect(() => {
+    let countdownInterval: NodeJS.Timeout;
+
+    if (restartingSheetOpen) {
+      countdownInterval = setInterval(() => {
+        setCountdown((prevCountdown) => prevCountdown - 1);
+      }, 1000);
+    }
+
+    return () => {
+      clearInterval(countdownInterval);
+    };
+  }, [restartingSheetOpen]);
+
+  useEffect(() => {
+    if (countdown === 0) {
+      window.location.href = "/";
+    }
+  }, [countdown]);
+
+  const handleForceReload = () => {
+    window.location.href = "/";
+  };
+
+  return (
+    <>
+      <div className={className}>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button size="icon" variant="ghost">
+              <LuSettings />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="md:w-72 mr-5">
+            <DropdownMenuLabel>System</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <Link to="/storage">
+                <DropdownMenuItem>
+                  <LuHardDrive className="mr-2 h-4 w-4" />
+                  <span>Storage</span>
+                </DropdownMenuItem>
+              </Link>
+              <Link to="/system">
+                <DropdownMenuItem>
+                  <LuActivity className="mr-2 h-4 w-4" />
+                  <span>System metrics</span>
+                </DropdownMenuItem>
+              </Link>
+              <Link to="/logs">
+                <DropdownMenuItem>
+                  <LuList className="mr-2 h-4 w-4" />
+                  <span>System logs</span>
+                </DropdownMenuItem>
+              </Link>
+            </DropdownMenuGroup>
+            <DropdownMenuLabel className="mt-3">
+              Configuration
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <Link to="/settings">
+                <DropdownMenuItem>
+                  <LuSettings className="mr-2 h-4 w-4" />
+                  <span>Settings</span>
+                </DropdownMenuItem>
+              </Link>
+              <Link to="/config">
+                <DropdownMenuItem>
+                  <LuPenSquare className="mr-2 h-4 w-4" />
+                  <span>Configuration editor</span>
+                </DropdownMenuItem>
+              </Link>
+              <DropdownMenuLabel className="mt-3">Appearance</DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuSub>
+                <DropdownMenuSubTrigger>
+                  <LuSunMoon className="mr-2 h-4 w-4" />
+                  <span>Dark Mode</span>
+                </DropdownMenuSubTrigger>
+                <DropdownMenuPortal>
+                  <DropdownMenuSubContent>
+                    <DropdownMenuItem onClick={() => setTheme("light")}>
+                      {theme === "light" ? (
+                        <>
+                          <LuSun className="mr-2 h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+                          Light
+                        </>
+                      ) : (
+                        <span className="mr-2 ml-6">Light</span>
+                      )}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => setTheme("dark")}>
+                      {theme === "dark" ? (
+                        <>
+                          <LuMoon className="mr-2 h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+                          Dark
+                        </>
+                      ) : (
+                        <span className="mr-2 ml-6">Dark</span>
+                      )}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => setTheme("system")}>
+                      {theme === "system" ? (
+                        <>
+                          <CgDarkMode className="mr-2 h-4 w-4 scale-100 transition-all" />
+                          System
+                        </>
+                      ) : (
+                        <span className="mr-2 ml-6">System</span>
+                      )}
+                    </DropdownMenuItem>
+                  </DropdownMenuSubContent>
+                </DropdownMenuPortal>
+              </DropdownMenuSub>
+              <DropdownMenuSub>
+                <DropdownMenuSubTrigger>
+                  <LuSunMoon className="mr-2 h-4 w-4" />
+                  <span>Theme</span>
+                </DropdownMenuSubTrigger>
+                <DropdownMenuPortal>
+                  <DropdownMenuSubContent>
+                    {colorSchemes.map((scheme) => (
+                      <DropdownMenuItem
+                        key={scheme}
+                        onClick={() => setColorScheme(scheme)}
+                      >
+                        {scheme === colorScheme ? (
+                          <>
+                            <IoColorPalette className="mr-2 h-4 w-4 rotate-0 scale-100 transition-all" />
+                            {friendlyColorSchemeName(scheme)}
+                          </>
+                        ) : (
+                          <span className="mr-2 ml-6">
+                            {friendlyColorSchemeName(scheme)}
+                          </span>
+                        )}
+                      </DropdownMenuItem>
+                    ))}
+                  </DropdownMenuSubContent>
+                </DropdownMenuPortal>
+              </DropdownMenuSub>
+            </DropdownMenuGroup>
+            <DropdownMenuLabel className="mt-3">Help</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <a href="https://docs.frigate.video">
+              <DropdownMenuItem>
+                <LuLifeBuoy className="mr-2 h-4 w-4" />
+                <span>Documentation</span>
+              </DropdownMenuItem>
+            </a>
+            <a href="https://github.com/blakeblackshear/frigate">
+              <DropdownMenuItem>
+                <LuGithub className="mr-2 h-4 w-4" />
+                <span>GitHub</span>
+              </DropdownMenuItem>
+            </a>
+            <DropdownMenuSeparator className="mt-3" />
+            <DropdownMenuItem onClick={() => setRestartDialogOpen(true)}>
+              <LuRotateCw className="mr-2 h-4 w-4" />
+              <span>Restart Frigate</span>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <Button size="icon" variant="ghost">
+          <VscAccount />
+        </Button>
+      </div>
+      {restartDialogOpen && (
+        <AlertDialog
+          open={restartDialogOpen}
+          onOpenChange={() => setRestartDialogOpen(false)}
+        >
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>
+                Are you sure you want to restart Frigate?
+              </AlertDialogTitle>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <AlertDialogAction
+                onClick={() => {
+                  setRestartingSheetOpen(true);
+                  sendRestart("restart");
+                }}
+              >
+                Restart
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      )}
+      {restartingSheetOpen && (
+        <>
+          <Sheet
+            open={restartingSheetOpen}
+            onOpenChange={() => setRestartingSheetOpen(false)}
+          >
+            <SheetContent
+              side="top"
+              onInteractOutside={(e) => e.preventDefault()}
+            >
+              <div className="flex flex-col items-center">
+                <ActivityIndicator />
+                <SheetHeader className="mt-5 text-center">
+                  <SheetTitle className="text-center">
+                    Frigate is Restarting
+                  </SheetTitle>
+                  <SheetDescription className="text-center">
+                    <p>This page will reload in {countdown} seconds.</p>
+                  </SheetDescription>
+                </SheetHeader>
+                <Button size="lg" className="mt-5" onClick={handleForceReload}>
+                  Force Reload Now
+                </Button>
+              </div>
+            </SheetContent>
+          </Sheet>
+        </>
+      )}
+    </>
+  );
+}