diff --git a/web/src/components/navigation/Sidebar.tsx b/web/src/components/navigation/Sidebar.tsx
index 1956a8562..024c9113c 100644
--- a/web/src/components/navigation/Sidebar.tsx
+++ b/web/src/components/navigation/Sidebar.tsx
@@ -13,20 +13,23 @@ function Sidebar() {
       <span tabIndex={0} className="sr-only" />
       <div className="w-full flex flex-col gap-0 items-center">
         <Logo className="w-8 h-8 mb-6" />
-        {navbarLinks.map((item) => (
-          <div key={item.id}>
-            <NavItem
-              className={`mx-[10px] ${item.id == 1 ? "mb-2" : "mb-4"}`}
-              Icon={item.icon}
-              title={item.title}
-              url={item.url}
-              dev={item.dev}
-            />
-            {item.id == 1 && item.url == location.pathname && (
-              <CameraGroupSelector className="mb-4" />
-            )}
-          </div>
-        ))}
+        {navbarLinks.map((item) => {
+          const showCameraGroups =
+            item.id == 1 && item.url == location.pathname;
+
+          return (
+            <div key={item.id}>
+              <NavItem
+                className={`mx-[10px] ${showCameraGroups ? "mb-2" : "mb-4"}`}
+                Icon={item.icon}
+                title={item.title}
+                url={item.url}
+                dev={item.dev}
+              />
+              {showCameraGroups && <CameraGroupSelector className="mb-4" />}
+            </div>
+          );
+        })}
       </div>
       <SettingsNavItems className="hidden md:flex flex-col items-center mb-8" />
     </aside>