diff --git a/web/src/components/settings/GeneralSettings.tsx b/web/src/components/settings/GeneralSettings.tsx
index fff82afe7..b13051ea4 100644
--- a/web/src/components/settings/GeneralSettings.tsx
+++ b/web/src/components/settings/GeneralSettings.tsx
@@ -1,6 +1,6 @@
 import {
+  LuActivity,
   LuGithub,
-  LuHardDrive,
   LuLifeBuoy,
   LuList,
   LuMoon,
@@ -137,7 +137,7 @@ export default function GeneralSettings({ className }: GeneralSettings) {
               <DropdownMenuLabel>System</DropdownMenuLabel>
               <DropdownMenuSeparator />
               <DropdownMenuGroup className={isDesktop ? "" : "flex flex-col"}>
-                <Link to="/storage">
+                <Link to="/system">
                   <MenuItem
                     className={
                       isDesktop
@@ -145,8 +145,8 @@ export default function GeneralSettings({ className }: GeneralSettings) {
                         : "p-2 flex items-center text-sm"
                     }
                   >
-                    <LuHardDrive className="mr-2 size-4" />
-                    <span>Storage</span>
+                    <LuActivity className="mr-2 size-4" />
+                    <span>System metrics</span>
                   </MenuItem>
                 </Link>
                 <Link to="/logs">
diff --git a/web/src/pages/System.tsx b/web/src/pages/System.tsx
index f2748ab43..9b8ba1abc 100644
--- a/web/src/pages/System.tsx
+++ b/web/src/pages/System.tsx
@@ -3,9 +3,12 @@ import { FrigateStats } from "@/types/stats";
 import { useState } from "react";
 import TimeAgo from "@/components/dynamic/TimeAgo";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
-import { isDesktop } from "react-device-detect";
+import { isDesktop, isMobile } from "react-device-detect";
 import GeneralMetrics from "@/views/system/GeneralMetrics";
 import StorageMetrics from "@/views/system/StorageMetrics";
+import { LuActivity, LuHardDrive } from "react-icons/lu";
+import { FaVideo } from "react-icons/fa";
+import Logo from "@/components/Logo";
 
 const metrics = ["general", "storage", "cameras"] as const;
 type SystemMetric = (typeof metrics)[number];
@@ -24,7 +27,10 @@ function System() {
 
   return (
     <div className="size-full p-2 flex flex-col">
-      <div className="w-full h-8 flex justify-between items-center">
+      <div className="w-full h-11 relative flex justify-between items-center">
+        {isMobile && (
+          <Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
+        )}
         <ToggleGroup
           className="*:px-3 *:py-4 *:rounded-md"
           type="single"
@@ -39,11 +45,14 @@ function System() {
           {Object.values(metrics).map((item) => (
             <ToggleGroupItem
               key={item}
-              className={`flex items-center justify-between gap-2 ${page == item ? "" : "text-gray-500"}`}
+              className={`flex items-center justify-between gap-2 ${page == item ? "" : "*:text-gray-500"}`}
               value={item}
               aria-label={`Select ${item}`}
             >
-              <div className="capitalize">{item}</div>
+              {item == "general" && <LuActivity className="size-4" />}
+              {item == "storage" && <LuHardDrive className="size-4" />}
+              {item == "cameras" && <FaVideo className="size-4" />}
+              {isDesktop && <div className="capitalize">{item}</div>}
             </ToggleGroupItem>
           ))}
         </ToggleGroup>