diff --git a/rust/gui-client/src-frontend/components/App.tsx b/rust/gui-client/src-frontend/components/App.tsx
index 40ff56aea..3bba01014 100644
--- a/rust/gui-client/src-frontend/components/App.tsx
+++ b/rust/gui-client/src-frontend/components/App.tsx
@@ -12,17 +12,17 @@ import { listen } from "@tauri-apps/api/event";
 import {
   Sidebar,
   SidebarCollapse,
-  SidebarItem,
   SidebarItemGroup,
   SidebarItems,
 } from "flowbite-react";
 import React, { useEffect, useState } from "react";
-import { Route, Routes, useNavigate, useLocation } from "react-router";
+import { Route, Routes } from "react-router";
 import { AdvancedSettingsViewModel } from "../generated/AdvancedSettingsViewModel";
 import { FileCount } from "../generated/FileCount";
 import { SessionViewModel } from "../generated/SessionViewModel";
 import About from "./AboutPage";
 import AdvancedSettingsPage from "./AdvancedSettingsPage";
+import ReactRouterSidebarItem from "./ReactRouterSidebarItem";
 import ColorPalette from "./ColorPalettePage";
 import Diagnostics from "./DiagnosticsPage";
 import GeneralSettingsPage from "./GeneralSettingsPage";
@@ -37,19 +37,6 @@ export default function App() {
   let [advancedSettings, setAdvancedSettings] =
     useState<AdvancedSettingsViewModel | null>(null);
 
-  const location = useLocation();
-  const navigate = useNavigate();
-
-  // Custom navigation handler for SidebarItems to avoid full page reloads
-  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
-    event.preventDefault();
-    const target = event.currentTarget;
-    const href = target.getAttribute("href");
-    if (href) {
-      navigate(href);
-    }
-  };
-
   useEffect(() => {
     const sessionChanged = listen<SessionViewModel>("session_changed", (e) => {
       let session = e.payload;
@@ -104,59 +91,35 @@ export default function App() {
       >
         <SidebarItems>
           <SidebarItemGroup>
-            <SidebarItem
-              active={location.pathname.startsWith("/overview")}
-              icon={HomeIcon}
-              href="/overview"
-              onClick={handleClick}
-            >
+            <ReactRouterSidebarItem icon={HomeIcon} href="/overview">
               Overview
-            </SidebarItem>
+            </ReactRouterSidebarItem>
             <SidebarCollapse label="Settings" open={true} icon={Bars3Icon}>
-              <SidebarItem
-                active={location.pathname.startsWith("/general-settings")}
-                icon={CogIcon}
-                href="/general-settings"
-                onClick={handleClick}
-              >
+              <ReactRouterSidebarItem icon={CogIcon} href="/general-settings">
                 General
-              </SidebarItem>
-              <SidebarItem
-                active={location.pathname.startsWith("/advanced-settings")}
+              </ReactRouterSidebarItem>
+              <ReactRouterSidebarItem
                 icon={WrenchScrewdriverIcon}
                 href="/advanced-settings"
-                onClick={handleClick}
               >
                 Advanced
-              </SidebarItem>
+              </ReactRouterSidebarItem>
             </SidebarCollapse>
-            <SidebarItem
-              active={location.pathname.startsWith("/diagnostics")}
+            <ReactRouterSidebarItem
               icon={DocumentMagnifyingGlassIcon}
               href="/diagnostics"
-              onClick={handleClick}
             >
               Diagnostics
-            </SidebarItem>
-            <SidebarItem
-              active={location.pathname.startsWith("/about")}
-              icon={InformationCircleIcon}
-              href="/about"
-              onClick={handleClick}
-            >
+            </ReactRouterSidebarItem>
+            <ReactRouterSidebarItem icon={InformationCircleIcon} href="/about">
               About
-            </SidebarItem>
+            </ReactRouterSidebarItem>
           </SidebarItemGroup>
           {isDev && (
             <SidebarItemGroup>
-              <SidebarItem
-                active={location.pathname.startsWith("/colour-palette")}
-                icon={SwatchIcon}
-                href="/colour-palette"
-                onClick={handleClick}
-              >
+              <ReactRouterSidebarItem icon={SwatchIcon} href="/colour-palette">
                 Color Palette
-              </SidebarItem>
+              </ReactRouterSidebarItem>
             </SidebarItemGroup>
           )}
         </SidebarItems>
diff --git a/rust/gui-client/src-frontend/components/ReactRouterSidebarItem.tsx b/rust/gui-client/src-frontend/components/ReactRouterSidebarItem.tsx
new file mode 100644
index 000000000..18463f925
--- /dev/null
+++ b/rust/gui-client/src-frontend/components/ReactRouterSidebarItem.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import type { FC, ComponentProps } from "react";
+import { useNavigate, useLocation } from "react-router";
+import { SidebarItem } from "flowbite-react";
+
+export default function ReactRouterSidebarItem({
+  href,
+  icon,
+  children,
+}: {
+  href: string;
+  icon: FC<ComponentProps<"svg">>;
+  children: React.ReactNode;
+}) {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  // Custom navigation handler for SidebarItems to avoid full page reloads
+  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    navigate(href);
+  };
+
+  return (
+    <SidebarItem
+      active={location.pathname.startsWith(href)}
+      href={href}
+      icon={icon}
+      onClick={handleClick}
+    >
+      {children}
+    </SidebarItem>
+  );
+}