diff --git a/src/frontend/lib/functions/Navigation.tsx b/src/frontend/lib/functions/Navigation.tsx
index 21e9324d2089..a5ff6dec6862 100644
--- a/src/frontend/lib/functions/Navigation.tsx
+++ b/src/frontend/lib/functions/Navigation.tsx
@@ -1,9 +1,11 @@
-import type { NavigateFunction } from 'react-router-dom';
 import { ModelInformationDict } from '../enums/ModelInformation';
 import type { ModelType } from '../enums/ModelType';
 import { apiUrl } from './Api';
 import { cancelEvent } from './Events';
 
+// NavigateFunction type compatible with both React Router and TanStack Router
+export type NavigateFunction = (to: string | number, options?: any) => void;
+
 export const getBaseUrl = (): string =>
   (window as any).INVENTREE_SETTINGS?.base_url || 'web';
 
diff --git a/src/frontend/lib/functions/navigation.ts b/src/frontend/lib/functions/navigation.ts
new file mode 100644
index 000000000000..d52601f1aa24
--- /dev/null
+++ b/src/frontend/lib/functions/navigation.ts
@@ -0,0 +1,14 @@
+/**
+ * Navigation utilities for TanStack Router
+ * Provides compatibility layer between React Router v6 and TanStack Router
+ */
+
+// Export types and functions from custom hooks
+export type { NavigateFunction, NavigateOptions } from '../hooks/UseNavigate';
+export { useNavigate } from '../hooks/UseNavigate';
+export { useSearchParams } from '../hooks/UseSearchParams';
+
+/**
+ * Type for Link 'to' prop
+ */
+export type To = string;
diff --git a/src/frontend/lib/hooks/UseNavigate.tsx b/src/frontend/lib/hooks/UseNavigate.tsx
new file mode 100644
index 000000000000..20d79f8a4070
--- /dev/null
+++ b/src/frontend/lib/hooks/UseNavigate.tsx
@@ -0,0 +1,40 @@
+/**
+ * Custom hook that provides React Router v6-like useNavigate behavior
+ * This makes migration from React Router to TanStack Router easier
+ */
+
+import { useNavigate as useTanstackNavigate } from '@tanstack/react-router';
+import { useCallback } from 'react';
+
+export type NavigateOptions = {
+  replace?: boolean;
+  state?: any;
+};
+
+export type NavigateFunction = (
+  to: string | number,
+  options?: NavigateOptions
+) => void;
+
+/**
+ * Hook that returns a navigate function compatible with React Router v6
+ */
+export function useNavigate(): NavigateFunction {
+  const tanstackNavigate = useTanstackNavigate();
+
+  return useCallback(
+    ((to: string | number, options?: NavigateOptions) => {
+      if (typeof to === 'number') {
+        window.history.go(to);
+        return;
+      }
+
+      tanstackNavigate({
+        to: to as any,
+        replace: options?.replace,
+        state: options?.state
+      } as any);
+    }) as NavigateFunction,
+    [tanstackNavigate]
+  );
+}
diff --git a/src/frontend/lib/hooks/UseSearchParams.tsx b/src/frontend/lib/hooks/UseSearchParams.tsx
new file mode 100644
index 000000000000..0d53fd7f1040
--- /dev/null
+++ b/src/frontend/lib/hooks/UseSearchParams.tsx
@@ -0,0 +1,39 @@
+/**
+ * Custom hook that provides React Router v6-like useSearchParams behavior
+ * This makes migration from React Router to TanStack Router easier
+ */
+
+import { useNavigate as useTanstackNavigate, useSearch } from '@tanstack/react-router';
+import { useCallback, useMemo } from 'react';
+
+/**
+ * Hook that returns search params compatible with React Router v6
+ * Returns [URLSearchParams, setSearchParams] tuple
+ */
+export function useSearchParams(): [URLSearchParams, (params: Record<string, any>) => void] {
+  const search = useSearch({ strict: false }) as Record<string, any>;
+  const navigate = useTanstackNavigate();
+
+  const searchParams = useMemo(() => {
+    const params = new URLSearchParams();
+    if (search) {
+      Object.entries(search).forEach(([key, value]) => {
+        if (value !== undefined && value !== null) {
+          params.set(key, String(value));
+        }
+      });
+    }
+    return params;
+  }, [search]);
+
+  const setSearchParams = useCallback(
+    (params: Record<string, any>) => {
+      navigate({
+        search: params as any
+      } as any);
+    },
+    [navigate]
+  );
+
+  return [searchParams, setSearchParams];
+}
diff --git a/src/frontend/lib/types/Plugins.tsx b/src/frontend/lib/types/Plugins.tsx
index cc10083b6e54..0f8aff1384c3 100644
--- a/src/frontend/lib/types/Plugins.tsx
+++ b/src/frontend/lib/types/Plugins.tsx
@@ -2,7 +2,7 @@ import type { I18n } from '@lingui/core';
 import type { MantineColorScheme, MantineTheme } from '@mantine/core';
 import type { QueryClient } from '@tanstack/react-query';
 import type { AxiosInstance } from 'axios';
-import type { NavigateFunction } from 'react-router-dom';
+import type { NavigateFunction } from '../functions/Navigation';
 import type { ModelDict } from '../enums/ModelInformation';
 import type { ModelType } from '../enums/ModelType';
 import type {
diff --git a/src/frontend/lib/types/Tables.tsx b/src/frontend/lib/types/Tables.tsx
index ba0675e28521..7e3c7485efb4 100644
--- a/src/frontend/lib/types/Tables.tsx
+++ b/src/frontend/lib/types/Tables.tsx
@@ -4,10 +4,13 @@ import type {
   DataTableRowExpansionProps
 } from 'mantine-datatable';
 import type { ReactNode } from 'react';
-import type { NavigateFunction, SetURLSearchParams } from 'react-router-dom';
 import type { ModelType } from '../enums/ModelType';
 import type { FilterSetState, TableFilter } from './Filters';
 import type { ApiFormFieldType } from './Forms';
+import type { NavigateFunction } from '../functions/navigation';
+
+// Type for setting search params - compatible with React Router v6 and our wrapper
+type SetURLSearchParams = (params: Record<string, any>) => void;
 
 /*
  * Type definition for representing the state of a table:
diff --git a/src/frontend/package.json b/src/frontend/package.json
index 1e6d57d0b35d..63c99a275149 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -75,6 +75,8 @@
         "@sentry/react": "^10.7.0",
         "@tabler/icons-react": "^3.17.0",
         "@tanstack/react-query": "^5.56.2",
+        "@tanstack/react-router": "^1.150.0",
+        "@tanstack/router-devtools": "^1.150.0",
         "@uiw/codemirror-theme-vscode": "4.25.1",
         "@uiw/react-codemirror": "4.25.1",
         "@uiw/react-split": "^5.9.3",
diff --git a/src/frontend/src/components/barcodes/BarcodeScanDialog.tsx b/src/frontend/src/components/barcodes/BarcodeScanDialog.tsx
index 6e2eb5064065..76b76f8c42d9 100644
--- a/src/frontend/src/components/barcodes/BarcodeScanDialog.tsx
+++ b/src/frontend/src/components/barcodes/BarcodeScanDialog.tsx
@@ -7,8 +7,9 @@ import { t } from '@lingui/core/macro';
 import { Box, Divider, Modal } from '@mantine/core';
 import { hideNotification, showNotification } from '@mantine/notifications';
 import { useCallback, useState } from 'react';
-import { type NavigateFunction, useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 import { api } from '../../App';
+import type { NavigateFunction } from '@lib/functions/navigation';
 import { extractErrorMessage } from '../../functions/api';
 import { useUserState } from '../../states/UserState';
 import { StylishText } from '../items/StylishText';
diff --git a/src/frontend/src/components/calendar/OrderCalendar.tsx b/src/frontend/src/components/calendar/OrderCalendar.tsx
index a213358d36e9..88369007b779 100644
--- a/src/frontend/src/components/calendar/OrderCalendar.tsx
+++ b/src/frontend/src/components/calendar/OrderCalendar.tsx
@@ -19,7 +19,7 @@ import {
 } from '@tabler/icons-react';
 import dayjs from 'dayjs';
 import { useCallback, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 import { api } from '../../App';
 import useCalendar from '../../hooks/UseCalendar';
 import { useUserState } from '../../states/UserState';
diff --git a/src/frontend/src/components/dashboard/widgets/QueryCountDashboardWidget.tsx b/src/frontend/src/components/dashboard/widgets/QueryCountDashboardWidget.tsx
index af38a5ce8855..2e8b390586f9 100644
--- a/src/frontend/src/components/dashboard/widgets/QueryCountDashboardWidget.tsx
+++ b/src/frontend/src/components/dashboard/widgets/QueryCountDashboardWidget.tsx
@@ -2,7 +2,7 @@ import { ActionIcon, Anchor, Group, Loader } from '@mantine/core';
 import { IconExclamationCircle } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import { type ReactNode, useCallback, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { ModelInformationDict } from '@lib/enums/ModelInformation';
 import type { ModelType } from '@lib/enums/ModelType';
diff --git a/src/frontend/src/components/details/Details.tsx b/src/frontend/src/components/details/Details.tsx
index b04ce1d492e1..4ef5765c3eea 100644
--- a/src/frontend/src/components/details/Details.tsx
+++ b/src/frontend/src/components/details/Details.tsx
@@ -15,7 +15,7 @@ import {
 import { useQuery } from '@tanstack/react-query';
 import { getValueAtPath } from 'mantine-datatable';
 import { useCallback, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { ProgressBar } from '@lib/components/ProgressBar';
 import { YesNoButton } from '@lib/components/YesNoButton';
diff --git a/src/frontend/src/components/errors/GenericErrorPage.tsx b/src/frontend/src/components/errors/GenericErrorPage.tsx
index 36f1e87690eb..58685e635d17 100644
--- a/src/frontend/src/components/errors/GenericErrorPage.tsx
+++ b/src/frontend/src/components/errors/GenericErrorPage.tsx
@@ -11,7 +11,7 @@ import {
   Text
 } from '@mantine/core';
 import { IconArrowBack, IconExclamationCircle } from '@tabler/icons-react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { LanguageContext } from '../../contexts/LanguageContext';
 
diff --git a/src/frontend/src/components/forms/ApiForm.tsx b/src/frontend/src/components/forms/ApiForm.tsx
index 089ce4f36bf0..2e7b076360e6 100644
--- a/src/frontend/src/components/forms/ApiForm.tsx
+++ b/src/frontend/src/components/forms/ApiForm.tsx
@@ -20,7 +20,8 @@ import {
   type SubmitHandler,
   useForm
 } from 'react-hook-form';
-import { type NavigateFunction, useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
+import type { NavigateFunction } from '@lib/functions/navigation';
 
 import { isTrue } from '@lib/functions/Conversion';
 import { getDetailUrl } from '@lib/functions/Navigation';
diff --git a/src/frontend/src/components/forms/AuthenticationForm.tsx b/src/frontend/src/components/forms/AuthenticationForm.tsx
index 00700ceee186..d002606b5c94 100644
--- a/src/frontend/src/components/forms/AuthenticationForm.tsx
+++ b/src/frontend/src/components/forms/AuthenticationForm.tsx
@@ -19,7 +19,8 @@ import { useForm } from '@mantine/form';
 import { useDisclosure } from '@mantine/hooks';
 import { showNotification } from '@mantine/notifications';
 import { useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation } from '@tanstack/react-router';
+import { useNavigate } from '@lib/functions/navigation';
 import { useShallow } from 'zustand/react/shallow';
 import { api } from '../../App';
 import {
diff --git a/src/frontend/src/components/items/InfoItem.tsx b/src/frontend/src/components/items/InfoItem.tsx
index 2d9132db58ea..29138aa543ba 100644
--- a/src/frontend/src/components/items/InfoItem.tsx
+++ b/src/frontend/src/components/items/InfoItem.tsx
@@ -1,6 +1,7 @@
 import { Trans } from '@lingui/react/macro';
 import { Code, Flex, Group, Text } from '@mantine/core';
-import { Link, type To } from 'react-router-dom';
+import { Link } from '@tanstack/react-router';
+import type { To } from '@lib/functions/navigation';
 
 import { YesNoButton } from '@lib/components/YesNoButton';
 import { DetailDrawerLink } from '../nav/DetailDrawer';
diff --git a/src/frontend/src/components/items/InvenTreeLogo.tsx b/src/frontend/src/components/items/InvenTreeLogo.tsx
index f62300310304..99830ec50ec2 100644
--- a/src/frontend/src/components/items/InvenTreeLogo.tsx
+++ b/src/frontend/src/components/items/InvenTreeLogo.tsx
@@ -1,7 +1,7 @@
 import { t } from '@lingui/core/macro';
 import { ActionIcon } from '@mantine/core';
 import { forwardRef } from 'react';
-import { NavLink } from 'react-router-dom';
+import { Link } from '@tanstack/react-router';
 
 import InvenTreeIcon from './inventree.svg';
 
@@ -9,11 +9,11 @@ export const InvenTreeLogoHomeButton = forwardRef<HTMLDivElement>(
   (props, ref) => {
     return (
       <div ref={ref} {...props}>
-        <NavLink to={'/'}>
+        <Link to={'/' as any}>
           <ActionIcon size={28} variant='transparent'>
             <InvenTreeLogo />
           </ActionIcon>
-        </NavLink>
+        </Link>
       </div>
     );
   }
diff --git a/src/frontend/src/components/items/MenuLinks.tsx b/src/frontend/src/components/items/MenuLinks.tsx
index 7830ceb56344..65dcbac328c7 100644
--- a/src/frontend/src/components/items/MenuLinks.tsx
+++ b/src/frontend/src/components/items/MenuLinks.tsx
@@ -9,7 +9,7 @@ import {
   UnstyledButton
 } from '@mantine/core';
 import { type JSX, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { navigateToLink } from '@lib/functions/Navigation';
 import type { InvenTreeIconType } from '@lib/types/Icons';
diff --git a/src/frontend/src/components/modals/QrModal.tsx b/src/frontend/src/components/modals/QrModal.tsx
index 14d5ef2ee7bf..27aa57610f8a 100644
--- a/src/frontend/src/components/modals/QrModal.tsx
+++ b/src/frontend/src/components/modals/QrModal.tsx
@@ -1,6 +1,6 @@
 import {} from '@mantine/core';
 import type { ContextModalProps } from '@mantine/modals';
-import type { NavigateFunction } from 'react-router-dom';
+import type { NavigateFunction } from '@lib/functions/navigation';
 import { ScanInputHandler } from '../barcodes/BarcodeScanDialog';
 
 export function QrModal({
diff --git a/src/frontend/src/components/nav/BreadcrumbList.tsx b/src/frontend/src/components/nav/BreadcrumbList.tsx
index 3dadf45171e1..0a51329f0d69 100644
--- a/src/frontend/src/components/nav/BreadcrumbList.tsx
+++ b/src/frontend/src/components/nav/BreadcrumbList.tsx
@@ -8,7 +8,7 @@ import {
 } from '@mantine/core';
 import { IconMenu2 } from '@tabler/icons-react';
 import { useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { identifierString } from '@lib/functions/Conversion';
 import { getBaseUrl, navigateToLink } from '@lib/functions/Navigation';
diff --git a/src/frontend/src/components/nav/DetailDrawer.tsx b/src/frontend/src/components/nav/DetailDrawer.tsx
index dcc7d77e6a56..3465dcf88ada 100644
--- a/src/frontend/src/components/nav/DetailDrawer.tsx
+++ b/src/frontend/src/components/nav/DetailDrawer.tsx
@@ -1,8 +1,8 @@
 import { ActionIcon, Divider, Drawer, Group, Stack, Text } from '@mantine/core';
 import { IconChevronLeft } from '@tabler/icons-react';
 import { useCallback, useMemo } from 'react';
-import { Link, Route, Routes, useNavigate, useParams } from 'react-router-dom';
-import type { To } from 'react-router-dom';
+import { Link, useNavigate, useParams } from '@tanstack/react-router';
+import type { To } from '@lib/functions/navigation';
 
 import type { UiSizeType } from '@lib/types/Core';
 import { useShallow } from 'zustand/react/shallow';
@@ -33,7 +33,8 @@ function DetailDrawerComponent({
   renderContent
 }: Readonly<DrawerProps>) {
   const navigate = useNavigate();
-  const { id } = useParams();
+  const params = useParams({ strict: false }) as any;
+  const id = params?.id;
 
   const content = renderContent(id);
   const opened = useMemo(() => !!id && !!content, [id, content]);
@@ -46,7 +47,7 @@ function DetailDrawerComponent({
     <Drawer
       opened={opened}
       onClose={() => {
-        navigate('../');
+        navigate({ to: '../' } as any);
         addDetailDrawer(false);
       }}
       position={position}
@@ -60,7 +61,7 @@ function DetailDrawerComponent({
             <ActionIcon
               variant='outline'
               onClick={() => {
-                navigate(-1);
+                window.history.go(-1);
                 addDetailDrawer(-1);
               }}
             >
@@ -80,11 +81,7 @@ function DetailDrawerComponent({
 }
 
 export function DetailDrawer(props: Readonly<DrawerProps>) {
-  return (
-    <Routes>
-      <Route path=':id?/' element={<DetailDrawerComponent {...props} />} />
-    </Routes>
-  );
+  return <DetailDrawerComponent {...props} />;
 }
 
 export function DetailDrawerLink({
diff --git a/src/frontend/src/components/nav/Header.tsx b/src/frontend/src/components/nav/Header.tsx
index 14725a6002da..6fc9ac6bb8b2 100644
--- a/src/frontend/src/components/nav/Header.tsx
+++ b/src/frontend/src/components/nav/Header.tsx
@@ -16,7 +16,8 @@ import {
 import { IconBell, IconSearch } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import { type ReactNode, useEffect, useMemo, useState } from 'react';
-import { useMatch, useNavigate } from 'react-router-dom';
+import { useLocation } from '@tanstack/react-router';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { apiUrl } from '@lib/functions/Api';
@@ -207,8 +208,12 @@ export function Header() {
 function NavTabs() {
   const user = useUserState();
   const navigate = useNavigate();
-  const match = useMatch(':tabName/*');
-  const tabValue = match?.params.tabName;
+  const location = useLocation();
+  
+  // Extract the first path segment as tabName
+  const pathSegments = location.pathname.split('/').filter(Boolean);
+  const tabValue = pathSegments[0] || undefined;
+  
   const navTabs = getNavTabs(user);
   const userSettings = useUserSettingsState();
 
diff --git a/src/frontend/src/components/nav/Layout.tsx b/src/frontend/src/components/nav/Layout.tsx
index 6122133c8c6b..4847645c89bb 100644
--- a/src/frontend/src/components/nav/Layout.tsx
+++ b/src/frontend/src/components/nav/Layout.tsx
@@ -7,7 +7,8 @@ import {
 } from '@mantine/spotlight';
 import { IconSearch } from '@tabler/icons-react';
 import { type JSX, useEffect, useMemo, useState } from 'react';
-import { Navigate, Outlet, useLocation, useNavigate } from 'react-router-dom';
+import { Outlet, Navigate, useLocation } from '@tanstack/react-router';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { identifierString } from '@lib/functions/Conversion';
 import { ApiEndpoints, apiUrl } from '@lib/index';
@@ -40,10 +41,12 @@ export const ProtectedRoute = ({ children }: { children: JSX.Element }) => {
       <Navigate
         to='/logged-in'
         state={{
-          redirectUrl: location.pathname,
-          queryParams: location.search,
-          anchor: location.hash
-        }}
+          redirect: {
+            redirectUrl: location.pathname,
+            queryParams: location.search,
+            anchor: location.hash
+          }
+        } as any}
       />
     );
   }
diff --git a/src/frontend/src/components/nav/MainMenu.tsx b/src/frontend/src/components/nav/MainMenu.tsx
index eb25eadf4086..e3dc997e7f29 100644
--- a/src/frontend/src/components/nav/MainMenu.tsx
+++ b/src/frontend/src/components/nav/MainMenu.tsx
@@ -17,7 +17,8 @@ import {
   IconUserBolt,
   IconUserCog
 } from '@tabler/icons-react';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link } from '@tanstack/react-router';
+import { useNavigate } from '@lib/functions/navigation';
 import { useShallow } from 'zustand/react/shallow';
 import { aboutInvenTree } from '../../defaults/links';
 import { doLogout } from '../../functions/auth';
diff --git a/src/frontend/src/components/nav/NavigationTree.tsx b/src/frontend/src/components/nav/NavigationTree.tsx
index 9a4937a24a01..9ac53ce5eb27 100644
--- a/src/frontend/src/components/nav/NavigationTree.tsx
+++ b/src/frontend/src/components/nav/NavigationTree.tsx
@@ -21,7 +21,7 @@ import {
 } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import { useCallback, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 
 import type { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import type { ModelType } from '@lib/enums/ModelType';
diff --git a/src/frontend/src/components/nav/NotificationDrawer.tsx b/src/frontend/src/components/nav/NotificationDrawer.tsx
index b8f93ea8ed12..75b7f1e87d44 100644
--- a/src/frontend/src/components/nav/NotificationDrawer.tsx
+++ b/src/frontend/src/components/nav/NotificationDrawer.tsx
@@ -21,7 +21,7 @@ import {
 } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import { useCallback, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelInformationDict } from '@lib/enums/ModelInformation';
diff --git a/src/frontend/src/components/nav/SearchDrawer.tsx b/src/frontend/src/components/nav/SearchDrawer.tsx
index c3ecf0f5d821..20277eab6288 100644
--- a/src/frontend/src/components/nav/SearchDrawer.tsx
+++ b/src/frontend/src/components/nav/SearchDrawer.tsx
@@ -30,7 +30,8 @@ import {
 } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { type NavigateFunction, useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
+import type { NavigateFunction } from '@lib/functions/navigation';
 
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelInformationDict } from '@lib/enums/ModelInformation';
diff --git a/src/frontend/src/components/nav/SettingsHeader.tsx b/src/frontend/src/components/nav/SettingsHeader.tsx
index 6e6bacac8717..303bbdb416e3 100644
--- a/src/frontend/src/components/nav/SettingsHeader.tsx
+++ b/src/frontend/src/components/nav/SettingsHeader.tsx
@@ -1,7 +1,7 @@
 import { t } from '@lingui/core/macro';
 import { Group, SegmentedControl, Stack, Text } from '@mantine/core';
 import type { ReactNode } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { useUserState } from '../../states/UserState';
 import { StylishText } from '../items/StylishText';
diff --git a/src/frontend/src/components/panels/PanelGroup.tsx b/src/frontend/src/components/panels/PanelGroup.tsx
index 60efc37165bf..9156fde6896d 100644
--- a/src/frontend/src/components/panels/PanelGroup.tsx
+++ b/src/frontend/src/components/panels/PanelGroup.tsx
@@ -24,12 +24,10 @@ import {
 } from 'react';
 import {
   Navigate,
-  Route,
-  Routes,
   useLocation,
-  useNavigate,
   useParams
-} from 'react-router-dom';
+} from '@tanstack/react-router';
+import { useNavigate } from '@lib/functions/navigation';
 
 import type { ModelType } from '@lib/enums/ModelType';
 import { identifierString } from '@lib/functions/Conversion';
@@ -89,7 +87,8 @@ function BasePanelGroup({
   const location = useLocation();
   const navigate = useNavigate();
 
-  const { panel } = useParams();
+  const params = useParams({ strict: false }) as any;
+  const panel = params?.panel;
 
   const [expanded, setExpanded] = useState<boolean>(true);
 
@@ -372,10 +371,14 @@ function IndexPanelComponent({
  * @param collapsible - If true, the panel group can be collapsed (defaults to true)
  */
 export function PanelGroup(props: Readonly<PanelProps>) {
-  return (
-    <Routes>
-      <Route index element={<IndexPanelComponent {...props} />} />
-      <Route path='/:panel/*' element={<BasePanelGroup {...props} />} />
-    </Routes>
-  );
+  const params = useParams({ strict: false }) as any;
+  const panel = params?.panel;
+  
+  // If no panel parameter, show the index component
+  if (!panel) {
+    return <IndexPanelComponent {...props} />;
+  }
+  
+  // Otherwise show the main panel group
+  return <BasePanelGroup {...props} />;
 }
diff --git a/src/frontend/src/components/plugins/PluginContext.tsx b/src/frontend/src/components/plugins/PluginContext.tsx
index 26c62dd5dc6e..8a889cc745ff 100644
--- a/src/frontend/src/components/plugins/PluginContext.tsx
+++ b/src/frontend/src/components/plugins/PluginContext.tsx
@@ -1,6 +1,6 @@
 import { useMantineColorScheme, useMantineTheme } from '@mantine/core';
 import { useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 import { useShallow } from 'zustand/react/shallow';
 import { api, queryClient } from '../../App';
 import { useLocalState } from '../../states/LocalState';
diff --git a/src/frontend/src/components/plugins/PluginDrawer.tsx b/src/frontend/src/components/plugins/PluginDrawer.tsx
index ce3c7f73428c..7b05a0499682 100644
--- a/src/frontend/src/components/plugins/PluginDrawer.tsx
+++ b/src/frontend/src/components/plugins/PluginDrawer.tsx
@@ -2,7 +2,7 @@ import { t } from '@lingui/core/macro';
 import { Accordion, Alert, Card, Stack, Text } from '@mantine/core';
 import { IconExclamationCircle } from '@tabler/icons-react';
 import { useMemo } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams } from '@tanstack/react-router';
 
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { useInstance } from '../../hooks/UseInstance';
@@ -22,7 +22,7 @@ export default function PluginDrawer({
   pluginKey?: string;
   pluginInstance: PluginInterface;
 }>) {
-  const { id } = useParams();
+  const { id } = useParams({ strict: false });
 
   const pluginPrimaryKey: string = useMemo(() => {
     return pluginKey || id || '';
diff --git a/src/frontend/src/components/wizards/ImportPartWizard.tsx b/src/frontend/src/components/wizards/ImportPartWizard.tsx
index 68c3fa6aaeaf..21014f11b839 100644
--- a/src/frontend/src/components/wizards/ImportPartWizard.tsx
+++ b/src/frontend/src/components/wizards/ImportPartWizard.tsx
@@ -31,7 +31,7 @@ import {
   useMemo,
   useState
 } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from '@tanstack/react-router';
 import { api } from '../../App';
 import { usePartFields } from '../../forms/PartForms';
 import { InvenTreeIcon } from '../../functions/icons';
@@ -113,7 +113,7 @@ const SearchResult = ({
               </Badge>
             )}
           {searchResult.existing_part_id && (
-            <Link to={`/part/${searchResult.existing_part_id}`}>
+            <Link to={`/part/${searchResult.existing_part_id}` as any}>
               <Badge size='sm' color='blue'>
                 <Trans>Already Imported</Trans>
               </Badge>
@@ -597,7 +597,7 @@ export default function ImportPartWizard({
               rightSection={
                 importResult && (
                   <Group gap='xs'>
-                    <Link to={`/part/${importResult.part_id}`} target='_blank'>
+                    <Link to={`/part/${importResult.part_id}` as any} target='_blank'>
                       <InvenTreeIcon icon='part' />
                     </Link>
                     <ActionIcon
@@ -746,7 +746,7 @@ export default function ImportPartWizard({
               <Group justify='flex-end'>
                 <Button
                   component={Link}
-                  to={`/part/${importResult?.part_id}`}
+                  to={`/part/${importResult?.part_id}` as any}
                   variant='light'
                   aria-label='action-button-import-open-part'
                 >
diff --git a/src/frontend/src/defaults/actions.tsx b/src/frontend/src/defaults/actions.tsx
index cf42a8960f42..2c51bfc296a4 100644
--- a/src/frontend/src/defaults/actions.tsx
+++ b/src/frontend/src/defaults/actions.tsx
@@ -1,7 +1,6 @@
 import { t } from '@lingui/core/macro';
 import type { SpotlightActionData } from '@mantine/spotlight';
-import {
-  IconBarcode,
+import { IconBarcode,
   IconLink,
   IconPlug,
   IconPointer,
@@ -9,7 +8,7 @@ import {
   IconUserBolt,
   IconUserCog
 } from '@tabler/icons-react';
-import type { NavigateFunction } from 'react-router-dom';
+import type { NavigateFunction } from '@lib/functions/navigation';
 
 import { ModelInformationDict } from '@lib/enums/ModelInformation';
 import { UserRoles } from '@lib/index';
diff --git a/src/frontend/src/forms/StockForms.tsx b/src/frontend/src/forms/StockForms.tsx
index a7689e30e740..fe7f46492269 100644
--- a/src/frontend/src/forms/StockForms.tsx
+++ b/src/frontend/src/forms/StockForms.tsx
@@ -26,7 +26,7 @@ import { ActionButton } from '@lib/components/ActionButton';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelType } from '@lib/enums/ModelType';
 import dayjs from 'dayjs';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 import { api } from '../App';
 import RemoveRowButton from '../components/buttons/RemoveRowButton';
 import { StandaloneField } from '../components/forms/StandaloneField';
diff --git a/src/frontend/src/functions/auth.tsx b/src/frontend/src/functions/auth.tsx
index ae3c481e578b..28b9b41f9a9d 100644
--- a/src/frontend/src/functions/auth.tsx
+++ b/src/frontend/src/functions/auth.tsx
@@ -10,7 +10,7 @@ import { t } from '@lingui/core/macro';
 import { notifications, showNotification } from '@mantine/notifications';
 import axios from 'axios';
 import type { AxiosRequestConfig } from 'axios';
-import type { Location, NavigateFunction } from 'react-router-dom';
+import type { NavigateFunction } from '@lib/functions/navigation';
 import { api, setApiDefaults } from '../App';
 import { useLocalState } from '../states/LocalState';
 import { useServerApiState } from '../states/ServerApiState';
@@ -346,7 +346,7 @@ export function handleReset(
 
 export async function handleMfaLogin(
   navigate: NavigateFunction,
-  location: Location<any> | undefined,
+  location: any | undefined,
   values: { code: string; remember?: boolean },
   setError: (message: string | undefined) => void
 ) {
@@ -455,7 +455,7 @@ export const checkLoginState = async (
 function handleSuccessFullAuth(
   response: any,
   navigate: NavigateFunction,
-  location?: Location<any>,
+  location?: any,
   setError?: (message: string | undefined) => void
 ) {
   const { setAuthenticated, fetchUserState } = useUserState.getState();
@@ -567,7 +567,7 @@ export const getTotpSecret = async (setTotpQr: any) => {
 export function handleVerifyTotp(
   value: string,
   navigate: NavigateFunction,
-  location: Location<any>
+  location: any
 ) {
   return () => {
     authApi(apiUrl(ApiEndpoints.auth_totp), undefined, 'post', {
@@ -723,7 +723,7 @@ export function handleChangePassword(
 
 export async function handleWebauthnLogin(
   navigate: NavigateFunction,
-  location: Location<any>
+  location: any
 ) {
   const { setAuthContext } = useServerApiState.getState();
 
diff --git a/src/frontend/src/hooks/UseTable.tsx b/src/frontend/src/hooks/UseTable.tsx
index 79d10e87f42f..40b107682a1e 100644
--- a/src/frontend/src/hooks/UseTable.tsx
+++ b/src/frontend/src/hooks/UseTable.tsx
@@ -1,6 +1,6 @@
 import { randomId } from '@mantine/hooks';
 import { useCallback, useMemo, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from '@lib/functions/navigation';
 
 import type { FilterSetState } from '@lib/types/Filters';
 import type { TableState } from '@lib/types/Tables';
diff --git a/src/frontend/src/pages/Auth/ChangePassword.tsx b/src/frontend/src/pages/Auth/ChangePassword.tsx
index 3e969951f021..46224d6f8908 100644
--- a/src/frontend/src/pages/Auth/ChangePassword.tsx
+++ b/src/frontend/src/pages/Auth/ChangePassword.tsx
@@ -10,7 +10,7 @@ import {
   Text
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 import { StylishText } from '../../components/items/StylishText';
 import { handleChangePassword } from '../../functions/auth';
 import { useUserState } from '../../states/UserState';
diff --git a/src/frontend/src/pages/Auth/Layout.tsx b/src/frontend/src/pages/Auth/Layout.tsx
index ea56cfc04189..1b090c0da052 100644
--- a/src/frontend/src/pages/Auth/Layout.tsx
+++ b/src/frontend/src/pages/Auth/Layout.tsx
@@ -9,7 +9,8 @@ import {
   Paper,
   Stack
 } from '@mantine/core';
-import { Outlet, useNavigate } from 'react-router-dom';
+import { Outlet } from '@tanstack/react-router';
+import { useNavigate } from '@lib/functions/navigation';
 import SplashScreen from '../../components/SplashScreen';
 import { StylishText } from '../../components/items/StylishText';
 import { doLogout } from '../../functions/auth';
diff --git a/src/frontend/src/pages/Auth/LoggedIn.tsx b/src/frontend/src/pages/Auth/LoggedIn.tsx
index 750bd86bbd79..f180a8d0214a 100644
--- a/src/frontend/src/pages/Auth/LoggedIn.tsx
+++ b/src/frontend/src/pages/Auth/LoggedIn.tsx
@@ -1,7 +1,8 @@
 import { t } from '@lingui/core/macro';
 import { useDebouncedCallback } from '@mantine/hooks';
 import { useEffect } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation } from '@tanstack/react-router';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { checkLoginState } from '../../functions/auth';
 import { Wrapper } from './Layout';
diff --git a/src/frontend/src/pages/Auth/Login.tsx b/src/frontend/src/pages/Auth/Login.tsx
index 65abe4769aa9..0758cd97aeb8 100644
--- a/src/frontend/src/pages/Auth/Login.tsx
+++ b/src/frontend/src/pages/Auth/Login.tsx
@@ -3,7 +3,8 @@ import { Trans } from '@lingui/react/macro';
 import { Anchor, Divider, Group, Loader, Text } from '@mantine/core';
 import { useToggle } from '@mantine/hooks';
 import { useEffect, useMemo, useState } from 'react';
-import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+import { useLocation } from '@tanstack/react-router';
+import { useNavigate, useSearchParams } from '@lib/functions/navigation';
 
 import { useShallow } from 'zustand/react/shallow';
 import { setApiDefaults } from '../../App';
diff --git a/src/frontend/src/pages/Auth/Logout.tsx b/src/frontend/src/pages/Auth/Logout.tsx
index e50f3f2bf84b..46eaf7da66ed 100644
--- a/src/frontend/src/pages/Auth/Logout.tsx
+++ b/src/frontend/src/pages/Auth/Logout.tsx
@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { doLogout } from '../../functions/auth';
 import { Wrapper } from './Layout';
diff --git a/src/frontend/src/pages/Auth/MFA.tsx b/src/frontend/src/pages/Auth/MFA.tsx
index 06d7dadff7f5..5418f0344191 100644
--- a/src/frontend/src/pages/Auth/MFA.tsx
+++ b/src/frontend/src/pages/Auth/MFA.tsx
@@ -3,7 +3,8 @@ import { Trans } from '@lingui/react/macro';
 import { Button, Checkbox, TextInput } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useEffect, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation } from '@tanstack/react-router';
+import { useNavigate } from '@lib/functions/navigation';
 import { useShallow } from 'zustand/react/shallow';
 import { handleMfaLogin, handleWebauthnLogin } from '../../functions/auth';
 import { useServerApiState } from '../../states/ServerApiState';
diff --git a/src/frontend/src/pages/Auth/MFASetup.tsx b/src/frontend/src/pages/Auth/MFASetup.tsx
index 9a99e303129c..139f01ddaa2a 100644
--- a/src/frontend/src/pages/Auth/MFASetup.tsx
+++ b/src/frontend/src/pages/Auth/MFASetup.tsx
@@ -5,7 +5,8 @@ import { Wrapper } from './Layout';
 
 import { Button } from '@mantine/core';
 import { useEffect, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation } from '@tanstack/react-router';
+import { useNavigate } from '@lib/functions/navigation';
 import { QrRegistrationForm } from '../Index/Settings/AccountSettings/QrRegistrationForm';
 
 export default function MFASetup() {
diff --git a/src/frontend/src/pages/Auth/Register.tsx b/src/frontend/src/pages/Auth/Register.tsx
index 761fc8605ae0..2b462ec6ebc4 100644
--- a/src/frontend/src/pages/Auth/Register.tsx
+++ b/src/frontend/src/pages/Auth/Register.tsx
@@ -1,7 +1,7 @@
 import { t } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
 import { Anchor, Text } from '@mantine/core';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 import { RegistrationForm } from '../../components/forms/AuthenticationForm';
 import {} from '../../functions/auth';
 import { Wrapper } from './Layout';
diff --git a/src/frontend/src/pages/Auth/Reset.tsx b/src/frontend/src/pages/Auth/Reset.tsx
index 42377f06de18..fbb5ba686829 100644
--- a/src/frontend/src/pages/Auth/Reset.tsx
+++ b/src/frontend/src/pages/Auth/Reset.tsx
@@ -2,7 +2,7 @@ import { t } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
 import { Button, TextInput } from '@mantine/core';
 import { useForm } from '@mantine/form';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 import { handleReset } from '../../functions/auth';
 import { Wrapper } from './Layout';
 
diff --git a/src/frontend/src/pages/Auth/ResetPassword.tsx b/src/frontend/src/pages/Auth/ResetPassword.tsx
index da24a9e900d8..83bc3873dd5d 100644
--- a/src/frontend/src/pages/Auth/ResetPassword.tsx
+++ b/src/frontend/src/pages/Auth/ResetPassword.tsx
@@ -4,7 +4,7 @@ import { Button, PasswordInput } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { notifications } from '@mantine/notifications';
 import { useEffect } from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useNavigate, useSearchParams } from '@lib/functions/navigation';
 
 import { handlePasswordReset } from '../../functions/auth';
 import { Wrapper } from './Layout';
diff --git a/src/frontend/src/pages/Auth/VerifyEmail.tsx b/src/frontend/src/pages/Auth/VerifyEmail.tsx
index cc11efcd1726..393afbc37511 100644
--- a/src/frontend/src/pages/Auth/VerifyEmail.tsx
+++ b/src/frontend/src/pages/Auth/VerifyEmail.tsx
@@ -3,13 +3,14 @@ import { Trans } from '@lingui/react/macro';
 import { Button } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 import { useEffect } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from '@tanstack/react-router';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { handleVerifyEmail } from '../../functions/auth';
 import { Wrapper } from './Layout';
 
 export default function VerifyEmail() {
-  const { key } = useParams();
+  const { key } = useParams({ strict: false });
   const navigate = useNavigate();
 
   // make sure we have a key
diff --git a/src/frontend/src/pages/ErrorPage.tsx b/src/frontend/src/pages/ErrorPage.tsx
index b7a0aed8ba32..4b2a2dfd71d2 100644
--- a/src/frontend/src/pages/ErrorPage.tsx
+++ b/src/frontend/src/pages/ErrorPage.tsx
@@ -1,22 +1,14 @@
 import { t } from '@lingui/core/macro';
 import { useDocumentTitle } from '@mantine/hooks';
-import { useEffect, useState } from 'react';
-import { useRouteError } from 'react-router-dom';
+import { useState } from 'react';
 
 import type { ErrorResponse } from '@lib/types/Auth';
 import GenericErrorPage from '../components/errors/GenericErrorPage';
 
 export default function ErrorPage() {
-  const error = useRouteError() as ErrorResponse;
-  const [title, setTitle] = useState(t`Error`);
+  const [title] = useState(t`Error`);
   useDocumentTitle(title);
 
-  useEffect(() => {
-    if (error?.statusText) {
-      setTitle(t`Error: ${error.statusText}`);
-    }
-  }, [error]);
-
   return (
     <GenericErrorPage
       title={title}
diff --git a/src/frontend/src/pages/Index/Settings/AccountSettings/AccountDetailPanel.tsx b/src/frontend/src/pages/Index/Settings/AccountSettings/AccountDetailPanel.tsx
index f879e7790682..8371e5034b84 100644
--- a/src/frontend/src/pages/Index/Settings/AccountSettings/AccountDetailPanel.tsx
+++ b/src/frontend/src/pages/Index/Settings/AccountSettings/AccountDetailPanel.tsx
@@ -8,7 +8,7 @@ import { ActionButton } from '@lib/components/ActionButton';
 import { YesNoUndefinedButton } from '@lib/components/YesNoButton';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import type { ApiFormFieldSet } from '@lib/types/Forms';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 import { useShallow } from 'zustand/react/shallow';
 import { ActionDropdown } from '../../../../components/items/ActionDropdown';
 import { StylishText } from '../../../../components/items/StylishText';
diff --git a/src/frontend/src/pages/Index/Settings/AccountSettings/MFASettings.tsx b/src/frontend/src/pages/Index/Settings/AccountSettings/MFASettings.tsx
index c59121d3064a..8d410fc39523 100644
--- a/src/frontend/src/pages/Index/Settings/AccountSettings/MFASettings.tsx
+++ b/src/frontend/src/pages/Index/Settings/AccountSettings/MFASettings.tsx
@@ -28,7 +28,7 @@ import {
 } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 import { useShallow } from 'zustand/react/shallow';
 import { api, queryClient } from '../../../../App';
 import { CopyButton } from '../../../../components/buttons/CopyButton';
diff --git a/src/frontend/src/pages/build/BuildDetail.tsx b/src/frontend/src/pages/build/BuildDetail.tsx
index d5016e2909da..bc84d694f8d5 100644
--- a/src/frontend/src/pages/build/BuildDetail.tsx
+++ b/src/frontend/src/pages/build/BuildDetail.tsx
@@ -13,7 +13,7 @@ import {
   IconSitemap
 } from '@tabler/icons-react';
 import { useMemo } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams } from '@tanstack/react-router';
 
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelType } from '@lib/enums/ModelType';
@@ -139,7 +139,7 @@ function BuildAllocationsPanel({
  * Detail page for a single Build Order
  */
 export default function BuildDetail() {
-  const { id } = useParams();
+  const { id } = useParams({ strict: false });
 
   const user = useUserState();
   const globalSettings = useGlobalSettingsState();
diff --git a/src/frontend/src/pages/company/CompanyDetail.tsx b/src/frontend/src/pages/company/CompanyDetail.tsx
index 1c1383841ded..6ffafff640fe 100644
--- a/src/frontend/src/pages/company/CompanyDetail.tsx
+++ b/src/frontend/src/pages/company/CompanyDetail.tsx
@@ -12,7 +12,8 @@ import {
   IconUsersGroup
 } from '@tabler/icons-react';
 import { type ReactNode, useMemo } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from '@tanstack/react-router';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelType } from '@lib/enums/ModelType';
@@ -66,7 +67,7 @@ export type CompanyDetailProps = {
  * Detail view for a single company instance
  */
 export default function CompanyDetail(props: Readonly<CompanyDetailProps>) {
-  const { id } = useParams();
+  const { id } = useParams({ strict: false });
 
   const navigate = useNavigate();
   const user = useUserState();
diff --git a/src/frontend/src/pages/company/ManufacturerPartDetail.tsx b/src/frontend/src/pages/company/ManufacturerPartDetail.tsx
index 1ad145e45a7e..ff70a7210219 100644
--- a/src/frontend/src/pages/company/ManufacturerPartDetail.tsx
+++ b/src/frontend/src/pages/company/ManufacturerPartDetail.tsx
@@ -6,7 +6,8 @@ import {
   IconPackages
 } from '@tabler/icons-react';
 import { useMemo } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from '@tanstack/react-router';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelType } from '@lib/enums/ModelType';
@@ -45,7 +46,7 @@ import { SupplierPartTable } from '../../tables/purchasing/SupplierPartTable';
 import { StockItemTable } from '../../tables/stock/StockItemTable';
 
 export default function ManufacturerPartDetail() {
-  const { id } = useParams();
+  const { id } = useParams({ strict: false });
   const user = useUserState();
   const navigate = useNavigate();
 
diff --git a/src/frontend/src/pages/company/SupplierPartDetail.tsx b/src/frontend/src/pages/company/SupplierPartDetail.tsx
index e640c3e8dafa..56d5e6e5408d 100644
--- a/src/frontend/src/pages/company/SupplierPartDetail.tsx
+++ b/src/frontend/src/pages/company/SupplierPartDetail.tsx
@@ -7,7 +7,8 @@ import {
   IconShoppingCart
 } from '@tabler/icons-react';
 import { type ReactNode, useMemo } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from '@tanstack/react-router';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelType } from '@lib/enums/ModelType';
@@ -50,7 +51,7 @@ import SupplierPriceBreakTable from '../../tables/purchasing/SupplierPriceBreakT
 import { StockItemTable } from '../../tables/stock/StockItemTable';
 
 export default function SupplierPartDetail() {
-  const { id } = useParams();
+  const { id } = useParams({ strict: false });
 
   const user = useUserState();
 
diff --git a/src/frontend/src/pages/core/GroupDetail.tsx b/src/frontend/src/pages/core/GroupDetail.tsx
index 4344e36ec49f..6e82d53ff026 100644
--- a/src/frontend/src/pages/core/GroupDetail.tsx
+++ b/src/frontend/src/pages/core/GroupDetail.tsx
@@ -4,7 +4,7 @@ import { t } from '@lingui/core/macro';
 import { Paper, Skeleton, Stack } from '@mantine/core';
 import { IconInfoCircle } from '@tabler/icons-react';
 import { useMemo } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams } from '@tanstack/react-router';
 import {
   type DetailsField,
   DetailsTable
@@ -24,7 +24,7 @@ import { useInstance } from '../../hooks/UseInstance';
  * Detail page for a single group
  */
 export default function GroupDetail() {
-  const { id } = useParams();
+  const { id } = useParams({ strict: false });
 
   const { instance, instanceQuery } = useInstance({
     endpoint: ApiEndpoints.group_list,
diff --git a/src/frontend/src/pages/core/UserDetail.tsx b/src/frontend/src/pages/core/UserDetail.tsx
index e7dd1940ca6e..05a745dfe9fa 100644
--- a/src/frontend/src/pages/core/UserDetail.tsx
+++ b/src/frontend/src/pages/core/UserDetail.tsx
@@ -4,7 +4,7 @@ import { t } from '@lingui/core/macro';
 import { Badge, Group, Skeleton, Stack } from '@mantine/core';
 import { IconInfoCircle } from '@tabler/icons-react';
 import { type ReactNode, useMemo } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams } from '@tanstack/react-router';
 import {
   type DetailsField,
   DetailsTable
@@ -24,7 +24,7 @@ import { useUserState } from '../../states/UserState';
  * Detail page for a single user
  */
 export default function UserDetail() {
-  const { id } = useParams();
+  const { id } = useParams({ strict: false });
 
   const user = useUserState();
   const settings = useGlobalSettingsState();
diff --git a/src/frontend/src/pages/part/CategoryDetail.tsx b/src/frontend/src/pages/part/CategoryDetail.tsx
index a39ce98f5ee1..180dfa0ba6fa 100644
--- a/src/frontend/src/pages/part/CategoryDetail.tsx
+++ b/src/frontend/src/pages/part/CategoryDetail.tsx
@@ -10,7 +10,8 @@ import {
   IconTable
 } from '@tabler/icons-react';
 import { useMemo, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from '@tanstack/react-router';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelType } from '@lib/enums/ModelType';
@@ -55,7 +56,7 @@ import { StockItemTable } from '../../tables/stock/StockItemTable';
  * Note: If no category ID is supplied, this acts as the top-level part category page
  */
 export default function CategoryDetail() {
-  const { id: _id } = useParams();
+  const { id: _id } = useParams({ strict: false });
   const id = useMemo(
     () => (!Number.isNaN(Number.parseInt(_id || '')) ? _id : undefined),
     [_id]
diff --git a/src/frontend/src/pages/part/PartDetail.tsx b/src/frontend/src/pages/part/PartDetail.tsx
index e5f97edfa66d..22ff1b347746 100644
--- a/src/frontend/src/pages/part/PartDetail.tsx
+++ b/src/frontend/src/pages/part/PartDetail.tsx
@@ -38,7 +38,8 @@ import {
 } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import { type ReactNode, useMemo, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from '@tanstack/react-router';
+import { useNavigate } from '@lib/functions/navigation';
 import Select from 'react-select';
 
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
@@ -268,7 +269,7 @@ function BomValidationInformation({
  * Detail view for a single Part instance
  */
 export default function PartDetail() {
-  const { id } = useParams();
+  const { id } = useParams({ strict: false });
 
   const api = useApi();
   const navigate = useNavigate();
diff --git a/src/frontend/src/pages/purchasing/PurchaseOrderDetail.tsx b/src/frontend/src/pages/purchasing/PurchaseOrderDetail.tsx
index 0d0a2fc754da..3acd84548c0f 100644
--- a/src/frontend/src/pages/purchasing/PurchaseOrderDetail.tsx
+++ b/src/frontend/src/pages/purchasing/PurchaseOrderDetail.tsx
@@ -2,7 +2,7 @@ import { t } from '@lingui/core/macro';
 import { Accordion, Grid, Skeleton, Stack } from '@mantine/core';
 import { IconInfoCircle, IconList, IconPackages } from '@tabler/icons-react';
 import { type ReactNode, useMemo } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams } from '@tanstack/react-router';
 
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelType } from '@lib/enums/ModelType';
@@ -52,7 +52,7 @@ import { StockItemTable } from '../../tables/stock/StockItemTable';
  * Detail page for a single PurchaseOrder
  */
 export default function PurchaseOrderDetail() {
-  const { id } = useParams();
+  const { id } = useParams({ strict: false });
 
   const user = useUserState();
   const globalSettings = useGlobalSettingsState();
diff --git a/src/frontend/src/pages/sales/ReturnOrderDetail.tsx b/src/frontend/src/pages/sales/ReturnOrderDetail.tsx
index 5bce7c630608..44b8afe6c06d 100644
--- a/src/frontend/src/pages/sales/ReturnOrderDetail.tsx
+++ b/src/frontend/src/pages/sales/ReturnOrderDetail.tsx
@@ -2,7 +2,7 @@ import { t } from '@lingui/core/macro';
 import { Accordion, Grid, Skeleton, Stack, Text } from '@mantine/core';
 import { IconInfoCircle, IconList } from '@tabler/icons-react';
 import { type ReactNode, useMemo } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams } from '@tanstack/react-router';
 
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelType } from '@lib/enums/ModelType';
@@ -52,7 +52,7 @@ import ReturnOrderLineItemTable from '../../tables/sales/ReturnOrderLineItemTabl
  * Detail page for a single ReturnOrder
  */
 export default function ReturnOrderDetail() {
-  const { id } = useParams();
+  const { id } = useParams({ strict: false });
 
   const user = useUserState();
 
diff --git a/src/frontend/src/pages/sales/SalesOrderDetail.tsx b/src/frontend/src/pages/sales/SalesOrderDetail.tsx
index 15bc26cddae9..165f3fac28ef 100644
--- a/src/frontend/src/pages/sales/SalesOrderDetail.tsx
+++ b/src/frontend/src/pages/sales/SalesOrderDetail.tsx
@@ -8,7 +8,7 @@ import {
   IconTools
 } from '@tabler/icons-react';
 import { type ReactNode, useMemo } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams } from '@tanstack/react-router';
 
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelType } from '@lib/enums/ModelType';
@@ -61,7 +61,7 @@ import SalesOrderShipmentTable from '../../tables/sales/SalesOrderShipmentTable'
  * Detail page for a single SalesOrder
  */
 export default function SalesOrderDetail() {
-  const { id } = useParams();
+  const { id } = useParams({ strict: false });
 
   const user = useUserState();
 
diff --git a/src/frontend/src/pages/sales/SalesOrderShipmentDetail.tsx b/src/frontend/src/pages/sales/SalesOrderShipmentDetail.tsx
index 2a0954ea4285..240fb314235a 100644
--- a/src/frontend/src/pages/sales/SalesOrderShipmentDetail.tsx
+++ b/src/frontend/src/pages/sales/SalesOrderShipmentDetail.tsx
@@ -7,7 +7,8 @@ import {
   IconInfoCircle
 } from '@tabler/icons-react';
 import { useMemo } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from '@tanstack/react-router';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelType } from '@lib/enums/ModelType';
@@ -54,7 +55,7 @@ import { useUserState } from '../../states/UserState';
 import SalesOrderAllocationTable from '../../tables/sales/SalesOrderAllocationTable';
 
 export default function SalesOrderShipmentDetail() {
-  const { id } = useParams();
+  const { id } = useParams({ strict: false });
   const user = useUserState();
   const navigate = useNavigate();
 
diff --git a/src/frontend/src/pages/stock/LocationDetail.tsx b/src/frontend/src/pages/stock/LocationDetail.tsx
index 1cdd66d5b579..71cc322a25f7 100644
--- a/src/frontend/src/pages/stock/LocationDetail.tsx
+++ b/src/frontend/src/pages/stock/LocationDetail.tsx
@@ -14,7 +14,8 @@ import {
   IconTable
 } from '@tabler/icons-react';
 import { useMemo, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from '@tanstack/react-router';
+import { useNavigate } from '@lib/functions/navigation';
 import { api } from '../../App';
 import { useBarcodeScanDialog } from '../../components/barcodes/BarcodeScanDialog';
 import AdminButton from '../../components/buttons/AdminButton';
@@ -54,7 +55,7 @@ import StockLocationParametricTable from '../../tables/stock/StockLocationParame
 import { StockLocationTable } from '../../tables/stock/StockLocationTable';
 
 export default function Stock() {
-  const { id: _id } = useParams();
+  const { id: _id } = useParams({ strict: false });
 
   const id = useMemo(
     () => (!Number.isNaN(Number.parseInt(_id || '')) ? _id : undefined),
diff --git a/src/frontend/src/pages/stock/StockDetail.tsx b/src/frontend/src/pages/stock/StockDetail.tsx
index 3faf693eff0d..2b76a9786b50 100644
--- a/src/frontend/src/pages/stock/StockDetail.tsx
+++ b/src/frontend/src/pages/stock/StockDetail.tsx
@@ -25,7 +25,8 @@ import {
 } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import { type ReactNode, useMemo, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from '@tanstack/react-router';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { ActionButton } from '@lib/components/ActionButton';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
@@ -89,7 +90,7 @@ import StockItemTestResultTable from '../../tables/stock/StockItemTestResultTabl
 import { StockTrackingTable } from '../../tables/stock/StockTrackingTable';
 
 export default function StockDetail() {
-  const { id } = useParams();
+  const { id } = useParams({ strict: false });
 
   const api = useApi();
   const user = useUserState();
diff --git a/src/frontend/src/router-tanstack.tsx b/src/frontend/src/router-tanstack.tsx
new file mode 100644
index 000000000000..d8b486ebaa7b
--- /dev/null
+++ b/src/frontend/src/router-tanstack.tsx
@@ -0,0 +1,516 @@
+import { lazy } from 'react';
+import {
+  createRootRoute,
+  createRoute,
+  createRouter,
+  Navigate,
+  Outlet
+} from '@tanstack/react-router';
+
+import { Loadable } from './functions/loading';
+
+// Lazy loaded pages
+const LayoutComponent = Loadable(
+  lazy(() => import('./components/nav/Layout')),
+  true,
+  true
+);
+const LoginLayoutComponent = Loadable(
+  lazy(() => import('./pages/Auth/Layout')),
+  true,
+  true
+);
+
+const Home = Loadable(lazy(() => import('./pages/Index/Home')));
+
+const CompanyDetail = Loadable(
+  lazy(() => import('./pages/company/CompanyDetail'))
+);
+
+const CustomerDetail = Loadable(
+  lazy(() => import('./pages/company/CustomerDetail'))
+);
+
+const SupplierDetail = Loadable(
+  lazy(() => import('./pages/company/SupplierDetail'))
+);
+
+const ManufacturerDetail = Loadable(
+  lazy(() => import('./pages/company/ManufacturerDetail'))
+);
+
+const SupplierPartDetail = Loadable(
+  lazy(() => import('./pages/company/SupplierPartDetail'))
+);
+
+const ManufacturerPartDetail = Loadable(
+  lazy(() => import('./pages/company/ManufacturerPartDetail'))
+);
+
+const CategoryDetail = Loadable(
+  lazy(() => import('./pages/part/CategoryDetail'))
+);
+const PartDetail = Loadable(lazy(() => import('./pages/part/PartDetail')));
+
+const LocationDetail = Loadable(
+  lazy(() => import('./pages/stock/LocationDetail'))
+);
+
+const StockDetail = Loadable(lazy(() => import('./pages/stock/StockDetail')));
+
+const BuildIndex = Loadable(lazy(() => import('./pages/build/BuildIndex')));
+
+const BuildDetail = Loadable(lazy(() => import('./pages/build/BuildDetail')));
+
+const PurchasingIndex = Loadable(
+  lazy(() => import('./pages/purchasing/PurchasingIndex'))
+);
+
+const PurchaseOrderDetail = Loadable(
+  lazy(() => import('./pages/purchasing/PurchaseOrderDetail'))
+);
+
+const SalesIndex = Loadable(lazy(() => import('./pages/sales/SalesIndex')));
+
+const SalesOrderDetail = Loadable(
+  lazy(() => import('./pages/sales/SalesOrderDetail'))
+);
+
+const SalesOrderShipmentDetail = Loadable(
+  lazy(() => import('./pages/sales/SalesOrderShipmentDetail'))
+);
+
+const ReturnOrderDetail = Loadable(
+  lazy(() => import('./pages/sales/ReturnOrderDetail'))
+);
+
+const Scan = Loadable(lazy(() => import('./pages/Index/Scan')));
+
+const ErrorPage = Loadable(lazy(() => import('./pages/ErrorPage')));
+
+const Notifications = Loadable(lazy(() => import('./pages/Notifications')));
+
+const UserSettings = Loadable(
+  lazy(() => import('./pages/Index/Settings/UserSettings'))
+);
+
+const SystemSettings = Loadable(
+  lazy(() => import('./pages/Index/Settings/SystemSettings'))
+);
+
+const AdminCenter = Loadable(
+  lazy(() => import('./pages/Index/Settings/AdminCenter/Index'))
+);
+
+// Core object
+const CoreIndex = Loadable(lazy(() => import('./pages/core/CoreIndex')));
+const UserDetail = Loadable(lazy(() => import('./pages/core/UserDetail')));
+const GroupDetail = Loadable(lazy(() => import('./pages/core/GroupDetail')));
+
+const NotFound = Loadable(
+  lazy(() => import('./components/errors/NotFound'))
+);
+
+// Auth
+const Login = Loadable(lazy(() => import('./pages/Auth/Login')));
+const LoggedIn = Loadable(
+  lazy(() => import('./pages/Auth/LoggedIn')),
+  true,
+  true
+);
+const Logout = Loadable(lazy(() => import('./pages/Auth/Logout')));
+const Register = Loadable(lazy(() => import('./pages/Auth/Register')));
+const Mfa = Loadable(lazy(() => import('./pages/Auth/MFA')));
+const MfaSetup = Loadable(lazy(() => import('./pages/Auth/MFASetup')));
+const ChangePassword = Loadable(
+  lazy(() => import('./pages/Auth/ChangePassword'))
+);
+const Reset = Loadable(lazy(() => import('./pages/Auth/Reset')));
+const ResetPassword = Loadable(
+  lazy(() => import('./pages/Auth/ResetPassword'))
+);
+const VerifyEmail = Loadable(
+  lazy(() => import('./pages/Auth/VerifyEmail')),
+  true,
+  true
+);
+
+// Root route
+const rootRoute = createRootRoute({
+  component: Outlet,
+  errorComponent: ErrorPage,
+  notFoundComponent: NotFound
+});
+
+// Main layout route
+const mainLayoutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  id: 'main-layout',
+  component: LayoutComponent
+});
+
+// Auth layout route
+const authLayoutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  id: 'auth-layout',
+  component: LoginLayoutComponent
+});
+
+// Main app routes
+const indexRoute = createRoute({
+  getParentRoute: () => mainLayoutRoute,
+  path: '/',
+  component: Home
+});
+
+const homeRoute = createRoute({
+  getParentRoute: () => mainLayoutRoute,
+  path: '/home',
+  component: Home
+});
+
+const notificationsRoute = createRoute({
+  getParentRoute: () => mainLayoutRoute,
+  path: '/notifications',
+  component: Notifications
+});
+
+const scanRoute = createRoute({
+  getParentRoute: () => mainLayoutRoute,
+  path: '/scan',
+  component: Scan
+});
+
+// Settings routes
+const settingsIndexRoute = createRoute({
+  getParentRoute: () => mainLayoutRoute,
+  path: '/settings',
+  component: () => <Navigate to="/settings/admin" />
+});
+
+const settingsAdminRoute = createRoute({
+  getParentRoute: () => mainLayoutRoute,
+  path: '/settings/admin',
+  component: AdminCenter
+});
+
+const settingsSystemRoute = createRoute({
+  getParentRoute: () => mainLayoutRoute,
+  path: '/settings/system',
+  component: SystemSettings
+});
+
+const settingsUserRoute = createRoute({
+  getParentRoute: () => mainLayoutRoute,
+  path: '/settings/user',
+  component: UserSettings
+});
+
+// Part routes
+const partIndexRoute = createRoute({
+  getParentRoute: () => mainLayoutRoute,
+  path: '/part',
+  component: () => <Navigate to="/part/category/index" />
+});
+
+const partCategoryRoute = createRoute({
+  getParentRoute: () => mainLayoutRoute,
+  path: '/part/category/$id',
+  component: CategoryDetail
+});
+
+const partCategoryIndexRoute = createRoute({
+  getParentRoute: () => mainLayoutRoute,
+  path: '/part/category/index',
+  component: CategoryDetail
+});
+
+const partDetailRoute = createRoute({
+  getParentRoute: () => mainLayoutRoute,
+  path: '/part/$id',
+  component: PartDetail
+});
+
+// Stock routes
+const stockIndexRoute = createRoute({
+  getParentRoute: () => mainLayoutRoute,
+  path: '/stock',
+  component: () => <Navigate to="/stock/location/index" />
+});
+
+const stockLocationRoute = createRoute({
+  getParentRoute: () => mainLayoutRoute,
+  path: '/stock/location/$id',
+  component: LocationDetail
+});
+
+const stockLocationIndexRoute = createRoute({
+  getParentRoute: () => mainLayoutRoute,
+  path: '/stock/location/index',
+  component: LocationDetail
+});
+
+const stockItemRoute = createRoute({
+  getParentRoute: () => mainLayoutRoute,
+  path: '/stock/item/$id',
+  component: StockDetail
+});
+
+// Manufacturing routes
+const manufacturingIndexRoute = createRoute({
+  getParentRoute: () => mainLayoutRoute,
+  path: '/manufacturing',
+  component: () => <Navigate to="/manufacturing/index" />
+});
+
+const manufacturingBuildIndexRoute = createRoute({
+  getParentRoute: () => mainLayoutRoute,
+  path: '/manufacturing/index',
+  component: BuildIndex
+});
+
+const manufacturingBuildOrderRoute = createRoute({
+  getParentRoute: () => mainLayoutRoute,
+  path: '/manufacturing/build-order/$id',
+  component: BuildDetail
+});
+
+// Purchasing routes
+const purchasingIndexRoute = createRoute({
+  getParentRoute: () => mainLayoutRoute,
+  path: '/purchasing',
+  component: () => <Navigate to="/purchasing/index" />
+});
+
+const purchasingListRoute = createRoute({
+  getParentRoute: () => mainLayoutRoute,
+  path: '/purchasing/index',
+  component: PurchasingIndex
+});
+
+const purchaseOrderRoute = createRoute({
+  getParentRoute: () => mainLayoutRoute,
+  path: '/purchasing/purchase-order/$id',
+  component: PurchaseOrderDetail
+});
+
+const supplierRoute = createRoute({
+  getParentRoute: () => mainLayoutRoute,
+  path: '/purchasing/supplier/$id',
+  component: SupplierDetail
+});
+
+const supplierPartRoute = createRoute({
+  getParentRoute: () => mainLayoutRoute,
+  path: '/purchasing/supplier-part/$id',
+  component: SupplierPartDetail
+});
+
+const manufacturerRoute = createRoute({
+  getParentRoute: () => mainLayoutRoute,
+  path: '/purchasing/manufacturer/$id',
+  component: ManufacturerDetail
+});
+
+const manufacturerPartRoute = createRoute({
+  getParentRoute: () => mainLayoutRoute,
+  path: '/purchasing/manufacturer-part/$id',
+  component: ManufacturerPartDetail
+});
+
+const companyRoute = createRoute({
+  getParentRoute: () => mainLayoutRoute,
+  path: '/company/$id',
+  component: CompanyDetail
+});
+
+// Sales routes
+const salesIndexRoute = createRoute({
+  getParentRoute: () => mainLayoutRoute,
+  path: '/sales',
+  component: () => <Navigate to="/sales/index" />
+});
+
+const salesListRoute = createRoute({
+  getParentRoute: () => mainLayoutRoute,
+  path: '/sales/index',
+  component: SalesIndex
+});
+
+const salesOrderRoute = createRoute({
+  getParentRoute: () => mainLayoutRoute,
+  path: '/sales/sales-order/$id',
+  component: SalesOrderDetail
+});
+
+const salesShipmentRoute = createRoute({
+  getParentRoute: () => mainLayoutRoute,
+  path: '/sales/shipment/$id',
+  component: SalesOrderShipmentDetail
+});
+
+const returnOrderRoute = createRoute({
+  getParentRoute: () => mainLayoutRoute,
+  path: '/sales/return-order/$id',
+  component: ReturnOrderDetail
+});
+
+const customerRoute = createRoute({
+  getParentRoute: () => mainLayoutRoute,
+  path: '/sales/customer/$id',
+  component: CustomerDetail
+});
+
+// Core routes
+const coreIndexRoute = createRoute({
+  getParentRoute: () => mainLayoutRoute,
+  path: '/core',
+  component: () => <Navigate to="/core/index" />
+});
+
+const coreListRoute = createRoute({
+  getParentRoute: () => mainLayoutRoute,
+  path: '/core/index',
+  component: CoreIndex
+});
+
+const coreUserRoute = createRoute({
+  getParentRoute: () => mainLayoutRoute,
+  path: '/core/user/$id',
+  component: UserDetail
+});
+
+const coreGroupRoute = createRoute({
+  getParentRoute: () => mainLayoutRoute,
+  path: '/core/group/$id',
+  component: GroupDetail
+});
+
+// Auth routes
+const loginRoute = createRoute({
+  getParentRoute: () => authLayoutRoute,
+  path: '/login',
+  component: Login
+});
+
+const loggedInRoute = createRoute({
+  getParentRoute: () => authLayoutRoute,
+  path: '/logged-in',
+  component: LoggedIn
+});
+
+const logoutRoute = createRoute({
+  getParentRoute: () => authLayoutRoute,
+  path: '/logout',
+  component: Logout
+});
+
+const registerRoute = createRoute({
+  getParentRoute: () => authLayoutRoute,
+  path: '/register',
+  component: Register
+});
+
+const mfaRoute = createRoute({
+  getParentRoute: () => authLayoutRoute,
+  path: '/mfa',
+  component: Mfa
+});
+
+const mfaSetupRoute = createRoute({
+  getParentRoute: () => authLayoutRoute,
+  path: '/mfa-setup',
+  component: MfaSetup
+});
+
+const changePasswordRoute = createRoute({
+  getParentRoute: () => authLayoutRoute,
+  path: '/change-password',
+  component: ChangePassword
+});
+
+const resetPasswordRoute = createRoute({
+  getParentRoute: () => authLayoutRoute,
+  path: '/reset-password',
+  component: Reset
+});
+
+const setPasswordRoute = createRoute({
+  getParentRoute: () => authLayoutRoute,
+  path: '/set-password',
+  component: ResetPassword
+});
+
+const verifyEmailRoute = createRoute({
+  getParentRoute: () => authLayoutRoute,
+  path: '/verify-email/$key',
+  component: VerifyEmail
+});
+
+// Create route tree
+const routeTree = rootRoute.addChildren([
+  mainLayoutRoute.addChildren([
+    indexRoute,
+    homeRoute,
+    notificationsRoute,
+    scanRoute,
+    settingsIndexRoute,
+    settingsAdminRoute,
+    settingsSystemRoute,
+    settingsUserRoute,
+    partIndexRoute,
+    partCategoryRoute,
+    partCategoryIndexRoute,
+    partDetailRoute,
+    stockIndexRoute,
+    stockLocationRoute,
+    stockLocationIndexRoute,
+    stockItemRoute,
+    manufacturingIndexRoute,
+    manufacturingBuildIndexRoute,
+    manufacturingBuildOrderRoute,
+    purchasingIndexRoute,
+    purchasingListRoute,
+    purchaseOrderRoute,
+    supplierRoute,
+    supplierPartRoute,
+    manufacturerRoute,
+    manufacturerPartRoute,
+    companyRoute,
+    salesIndexRoute,
+    salesListRoute,
+    salesOrderRoute,
+    salesShipmentRoute,
+    returnOrderRoute,
+    customerRoute,
+    coreIndexRoute,
+    coreListRoute,
+    coreUserRoute,
+    coreGroupRoute
+  ]),
+  authLayoutRoute.addChildren([
+    loginRoute,
+    loggedInRoute,
+    logoutRoute,
+    registerRoute,
+    mfaRoute,
+    mfaSetupRoute,
+    changePasswordRoute,
+    resetPasswordRoute,
+    setPasswordRoute,
+    verifyEmailRoute
+  ])
+]);
+
+// Create router
+export const router = createRouter({
+  routeTree,
+  defaultPreload: 'intent'
+});
+
+// Register router for type safety
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router;
+  }
+}
diff --git a/src/frontend/src/router.tsx b/src/frontend/src/router.tsx
deleted file mode 100644
index 49b580fcfaf8..000000000000
--- a/src/frontend/src/router.tsx
+++ /dev/null
@@ -1,223 +0,0 @@
-import { lazy } from 'react';
-import { Navigate, Route, Routes } from 'react-router-dom';
-
-import { Loadable } from './functions/loading';
-
-// Lazy loaded pages
-export const LayoutComponent = Loadable(
-  lazy(() => import('./components/nav/Layout')),
-  true,
-  true
-);
-export const LoginLayoutComponent = Loadable(
-  lazy(() => import('./pages/Auth/Layout')),
-  true,
-  true
-);
-
-export const Home = Loadable(lazy(() => import('./pages/Index/Home')));
-
-export const CompanyDetail = Loadable(
-  lazy(() => import('./pages/company/CompanyDetail'))
-);
-
-export const CustomerDetail = Loadable(
-  lazy(() => import('./pages/company/CustomerDetail'))
-);
-
-export const SupplierDetail = Loadable(
-  lazy(() => import('./pages/company/SupplierDetail'))
-);
-
-export const ManufacturerDetail = Loadable(
-  lazy(() => import('./pages/company/ManufacturerDetail'))
-);
-
-export const SupplierPartDetail = Loadable(
-  lazy(() => import('./pages/company/SupplierPartDetail'))
-);
-
-export const ManufacturerPartDetail = Loadable(
-  lazy(() => import('./pages/company/ManufacturerPartDetail'))
-);
-
-export const CategoryDetail = Loadable(
-  lazy(() => import('./pages/part/CategoryDetail'))
-);
-export const PartDetail = Loadable(
-  lazy(() => import('./pages/part/PartDetail'))
-);
-
-export const LocationDetail = Loadable(
-  lazy(() => import('./pages/stock/LocationDetail'))
-);
-
-export const StockDetail = Loadable(
-  lazy(() => import('./pages/stock/StockDetail'))
-);
-
-export const BuildIndex = Loadable(
-  lazy(() => import('./pages/build/BuildIndex'))
-);
-
-export const BuildDetail = Loadable(
-  lazy(() => import('./pages/build/BuildDetail'))
-);
-
-export const PurchasingIndex = Loadable(
-  lazy(() => import('./pages/purchasing/PurchasingIndex'))
-);
-
-export const PurchaseOrderDetail = Loadable(
-  lazy(() => import('./pages/purchasing/PurchaseOrderDetail'))
-);
-
-export const SalesIndex = Loadable(
-  lazy(() => import('./pages/sales/SalesIndex'))
-);
-
-export const SalesOrderDetail = Loadable(
-  lazy(() => import('./pages/sales/SalesOrderDetail'))
-);
-
-export const SalesOrderShipmentDetail = Loadable(
-  lazy(() => import('./pages/sales/SalesOrderShipmentDetail'))
-);
-
-export const ReturnOrderDetail = Loadable(
-  lazy(() => import('./pages/sales/ReturnOrderDetail'))
-);
-
-export const Scan = Loadable(lazy(() => import('./pages/Index/Scan')));
-
-export const ErrorPage = Loadable(lazy(() => import('./pages/ErrorPage')));
-
-export const Notifications = Loadable(
-  lazy(() => import('./pages/Notifications'))
-);
-
-export const UserSettings = Loadable(
-  lazy(() => import('./pages/Index/Settings/UserSettings'))
-);
-
-export const SystemSettings = Loadable(
-  lazy(() => import('./pages/Index/Settings/SystemSettings'))
-);
-
-export const AdminCenter = Loadable(
-  lazy(() => import('./pages/Index/Settings/AdminCenter/Index'))
-);
-
-// Core object
-export const CoreIndex = Loadable(lazy(() => import('./pages/core/CoreIndex')));
-export const UserDetail = Loadable(
-  lazy(() => import('./pages/core/UserDetail'))
-);
-export const GroupDetail = Loadable(
-  lazy(() => import('./pages/core/GroupDetail'))
-);
-
-export const NotFound = Loadable(
-  lazy(() => import('./components/errors/NotFound'))
-);
-
-// Auth
-export const Login = Loadable(lazy(() => import('./pages/Auth/Login')));
-export const LoggedIn = Loadable(
-  lazy(() => import('./pages/Auth/LoggedIn')),
-  true,
-  true
-);
-export const Logout = Loadable(lazy(() => import('./pages/Auth/Logout')));
-export const Register = Loadable(lazy(() => import('./pages/Auth/Register')));
-export const Mfa = Loadable(lazy(() => import('./pages/Auth/MFA')));
-export const MfaSetup = Loadable(lazy(() => import('./pages/Auth/MFASetup')));
-export const ChangePassword = Loadable(
-  lazy(() => import('./pages/Auth/ChangePassword'))
-);
-export const Reset = Loadable(lazy(() => import('./pages/Auth/Reset')));
-export const ResetPassword = Loadable(
-  lazy(() => import('./pages/Auth/ResetPassword'))
-);
-export const VerifyEmail = Loadable(
-  lazy(() => import('./pages/Auth/VerifyEmail')),
-  true,
-  true
-);
-
-// Routes
-export const routes = (
-  <Routes>
-    <Route path='*' element={<NotFound />} errorElement={<ErrorPage />} />
-    <Route path='/' element={<LayoutComponent />} errorElement={<ErrorPage />}>
-      <Route index element={<Home />} />,
-      <Route path='home/' element={<Home />} />,
-      <Route path='notifications/*' element={<Notifications />} />,
-      <Route path='scan/' element={<Scan />} />,
-      <Route path='settings/'>
-        <Route index element={<Navigate to='admin/' />} />
-        <Route path='admin/*' element={<AdminCenter />} />
-        <Route path='system/*' element={<SystemSettings />} />
-        <Route path='user/*' element={<UserSettings />} />
-      </Route>
-      <Route path='part/'>
-        <Route index element={<Navigate to='category/index/' />} />
-        <Route path='category/:id?/*' element={<CategoryDetail />} />
-        <Route path=':id/*' element={<PartDetail />} />
-      </Route>
-      <Route path='stock/'>
-        <Route index element={<Navigate to='location/index/' />} />
-        <Route path='location/:id?/*' element={<LocationDetail />} />
-        <Route path='item/:id/*' element={<StockDetail />} />
-      </Route>
-      <Route path='manufacturing/'>
-        <Route index element={<Navigate to='index/' />} />
-        <Route path='index/*' element={<BuildIndex />} />
-        <Route path='build-order/:id/*' element={<BuildDetail />} />
-      </Route>
-      <Route path='purchasing/'>
-        <Route index element={<Navigate to='index/' />} />
-        <Route path='index/*' element={<PurchasingIndex />} />
-        <Route path='purchase-order/:id/*' element={<PurchaseOrderDetail />} />
-        <Route path='supplier/:id/*' element={<SupplierDetail />} />
-        <Route path='supplier-part/:id/*' element={<SupplierPartDetail />} />
-        <Route path='manufacturer/:id/*' element={<ManufacturerDetail />} />
-        <Route
-          path='manufacturer-part/:id/*'
-          element={<ManufacturerPartDetail />}
-        />
-      </Route>
-      <Route path='company/:id/*' element={<CompanyDetail />} />
-      <Route path='sales/'>
-        <Route index element={<Navigate to='index/' />} />
-        <Route path='index/*' element={<SalesIndex />} />
-        <Route path='sales-order/:id/*' element={<SalesOrderDetail />} />
-        <Route path='shipment/:id/*' element={<SalesOrderShipmentDetail />} />
-        <Route path='return-order/:id/*' element={<ReturnOrderDetail />} />
-        <Route path='customer/:id/*' element={<CustomerDetail />} />
-      </Route>
-      <Route path='core/'>
-        <Route index element={<Navigate to='index/' />} />
-        <Route path='index/*' element={<CoreIndex />} />
-        <Route path='user/:id/*' element={<UserDetail />} />
-        <Route path='group/:id/*' element={<GroupDetail />} />
-      </Route>
-    </Route>
-    <Route
-      path='/'
-      element={<LoginLayoutComponent />}
-      errorElement={<ErrorPage />}
-    >
-      <Route path='/login' element={<Login />} />,
-      <Route path='/logged-in' element={<LoggedIn />} />
-      <Route path='/logout' element={<Logout />} />,
-      <Route path='/register' element={<Register />} />,
-      <Route path='/mfa' element={<Mfa />} />,
-      <Route path='/mfa-setup' element={<MfaSetup />} />,
-      <Route path='/change-password' element={<ChangePassword />} />
-      <Route path='/reset-password' element={<Reset />} />
-      <Route path='/set-password' element={<ResetPassword />} />
-      <Route path='/verify-email/:key' element={<VerifyEmail />} />
-    </Route>
-  </Routes>
-);
diff --git a/src/frontend/src/tables/InvenTreeTable.tsx b/src/frontend/src/tables/InvenTreeTable.tsx
index 64d6c93876af..0d89396e81c4 100644
--- a/src/frontend/src/tables/InvenTreeTable.tsx
+++ b/src/frontend/src/tables/InvenTreeTable.tsx
@@ -24,7 +24,7 @@ import {
 } from 'mantine-datatable';
 import type React from 'react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 import { Boundary } from '../components/Boundary';
 import { useApi } from '../contexts/ApiContext';
 import { extractAvailableFields, mapFields } from '../functions/forms';
diff --git a/src/frontend/src/tables/bom/BomTable.tsx b/src/frontend/src/tables/bom/BomTable.tsx
index 9cb18a27203a..eed8f1846457 100644
--- a/src/frontend/src/tables/bom/BomTable.tsx
+++ b/src/frontend/src/tables/bom/BomTable.tsx
@@ -24,7 +24,7 @@ import {
   IconSwitch3
 } from '@tabler/icons-react';
 import { type ReactNode, useCallback, useMemo, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 import { Thumbnail } from '../../components/images/Thumbnail';
 import ImporterDrawer from '../../components/importer/ImporterDrawer';
 import { ActionDropdown } from '../../components/items/ActionDropdown';
diff --git a/src/frontend/src/tables/build/BuildLineTable.tsx b/src/frontend/src/tables/build/BuildLineTable.tsx
index a247b6901891..b5177f721b57 100644
--- a/src/frontend/src/tables/build/BuildLineTable.tsx
+++ b/src/frontend/src/tables/build/BuildLineTable.tsx
@@ -12,7 +12,7 @@ import {
 } from '@tabler/icons-react';
 import type { DataTableRowExpansionProps } from 'mantine-datatable';
 import { useCallback, useMemo, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { ActionButton } from '@lib/components/ActionButton';
 import { ProgressBar } from '@lib/components/ProgressBar';
diff --git a/src/frontend/src/tables/company/CompanyTable.tsx b/src/frontend/src/tables/company/CompanyTable.tsx
index ce02a7756d4d..a3b4edc50e43 100644
--- a/src/frontend/src/tables/company/CompanyTable.tsx
+++ b/src/frontend/src/tables/company/CompanyTable.tsx
@@ -1,6 +1,6 @@
 import { t } from '@lingui/core/macro';
 import { useCallback, useMemo, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { AddItemButton } from '@lib/components/AddItemButton';
 import { type RowAction, RowEditAction } from '@lib/components/RowActions';
diff --git a/src/frontend/src/tables/company/ContactTable.tsx b/src/frontend/src/tables/company/ContactTable.tsx
index 33082b96b30d..8bea725d4bd2 100644
--- a/src/frontend/src/tables/company/ContactTable.tsx
+++ b/src/frontend/src/tables/company/ContactTable.tsx
@@ -14,7 +14,7 @@ import { apiUrl } from '@lib/functions/Api';
 import { getDetailUrl } from '@lib/functions/Navigation';
 import type { ApiFormFieldSet } from '@lib/types/Forms';
 import type { TableColumn } from '@lib/types/Tables';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 import { RenderInlineModel } from '../../components/render/Instance';
 import {
   useCreateApiFormModal,
diff --git a/src/frontend/src/tables/general/BarcodeScanTable.tsx b/src/frontend/src/tables/general/BarcodeScanTable.tsx
index d13b5ec5f462..228f1d91b35d 100644
--- a/src/frontend/src/tables/general/BarcodeScanTable.tsx
+++ b/src/frontend/src/tables/general/BarcodeScanTable.tsx
@@ -4,7 +4,7 @@ import type { TableColumn } from '@lib/types/Tables';
 import { t } from '@lingui/core/macro';
 import { IconTrash } from '@tabler/icons-react';
 import { useCallback, useEffect, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 import type { BarcodeScanItem } from '../../components/barcodes/BarcodeScanItem';
 import { RenderInstance } from '../../components/render/Instance';
 import { useTable } from '../../hooks/UseTable';
diff --git a/src/frontend/src/tables/general/ParametricDataTable.tsx b/src/frontend/src/tables/general/ParametricDataTable.tsx
index 279f68e90bbd..e998369909ad 100644
--- a/src/frontend/src/tables/general/ParametricDataTable.tsx
+++ b/src/frontend/src/tables/general/ParametricDataTable.tsx
@@ -18,7 +18,7 @@ import { useHover } from '@mantine/hooks';
 import { IconCirclePlus } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import { type ReactNode, useCallback, useMemo, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 import { useApi } from '../../contexts/ApiContext';
 import { useParameterFields } from '../../forms/CommonForms';
 import {
diff --git a/src/frontend/src/tables/machine/MachineListTable.tsx b/src/frontend/src/tables/machine/MachineListTable.tsx
index 7ded77a8cfcf..7ff9a9727861 100644
--- a/src/frontend/src/tables/machine/MachineListTable.tsx
+++ b/src/frontend/src/tables/machine/MachineListTable.tsx
@@ -20,7 +20,7 @@ import { notifications } from '@mantine/notifications';
 import { IconCheck, IconRefresh } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import { useCallback, useMemo, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { AddItemButton } from '@lib/components/AddItemButton';
 import { YesNoButton } from '@lib/components/YesNoButton';
diff --git a/src/frontend/src/tables/machine/MachineTypeTable.tsx b/src/frontend/src/tables/machine/MachineTypeTable.tsx
index c9aebc29e8e8..4276f9567275 100644
--- a/src/frontend/src/tables/machine/MachineTypeTable.tsx
+++ b/src/frontend/src/tables/machine/MachineTypeTable.tsx
@@ -16,7 +16,7 @@ import {
 } from '@mantine/core';
 import { IconExclamationCircle, IconRefresh } from '@tabler/icons-react';
 import { useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { apiUrl } from '@lib/functions/Api';
diff --git a/src/frontend/src/tables/part/PartBuildAllocationsTable.tsx b/src/frontend/src/tables/part/PartBuildAllocationsTable.tsx
index ee4b58f65049..a2e0ab882a55 100644
--- a/src/frontend/src/tables/part/PartBuildAllocationsTable.tsx
+++ b/src/frontend/src/tables/part/PartBuildAllocationsTable.tsx
@@ -2,7 +2,7 @@ import { t } from '@lingui/core/macro';
 import { Group, Text } from '@mantine/core';
 import type { DataTableRowExpansionProps } from 'mantine-datatable';
 import { useCallback, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { ProgressBar } from '@lib/components/ProgressBar';
 import { RowViewAction } from '@lib/components/RowActions';
diff --git a/src/frontend/src/tables/part/PartSalesAllocationsTable.tsx b/src/frontend/src/tables/part/PartSalesAllocationsTable.tsx
index c4e7748ac8ac..3e4c436b88d5 100644
--- a/src/frontend/src/tables/part/PartSalesAllocationsTable.tsx
+++ b/src/frontend/src/tables/part/PartSalesAllocationsTable.tsx
@@ -2,7 +2,7 @@ import { t } from '@lingui/core/macro';
 import { Group, Text } from '@mantine/core';
 import type { DataTableRowExpansionProps } from 'mantine-datatable';
 import { useCallback, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { ProgressBar } from '@lib/components/ProgressBar';
 import { RowViewAction } from '@lib/components/RowActions';
diff --git a/src/frontend/src/tables/part/PartTestTemplateTable.tsx b/src/frontend/src/tables/part/PartTestTemplateTable.tsx
index f1779b8b05e5..b5ca9a356a4d 100644
--- a/src/frontend/src/tables/part/PartTestTemplateTable.tsx
+++ b/src/frontend/src/tables/part/PartTestTemplateTable.tsx
@@ -3,7 +3,7 @@ import { Trans } from '@lingui/react/macro';
 import { Alert, Badge, Stack, Text } from '@mantine/core';
 import { IconLock } from '@tabler/icons-react';
 import { type ReactNode, useCallback, useMemo, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { AddItemButton } from '@lib/components/AddItemButton';
 import {
diff --git a/src/frontend/src/tables/part/RelatedPartTable.tsx b/src/frontend/src/tables/part/RelatedPartTable.tsx
index 0ccadbfa017d..134af5b0fd02 100644
--- a/src/frontend/src/tables/part/RelatedPartTable.tsx
+++ b/src/frontend/src/tables/part/RelatedPartTable.tsx
@@ -1,7 +1,7 @@
 import { t } from '@lingui/core/macro';
 import { Group, Text } from '@mantine/core';
 import { type ReactNode, useCallback, useMemo, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { AddItemButton } from '@lib/components/AddItemButton';
 import {
diff --git a/src/frontend/src/tables/plugin/PluginListTable.tsx b/src/frontend/src/tables/plugin/PluginListTable.tsx
index 81fb8ee9de5a..fd886e57acdb 100644
--- a/src/frontend/src/tables/plugin/PluginListTable.tsx
+++ b/src/frontend/src/tables/plugin/PluginListTable.tsx
@@ -11,7 +11,7 @@ import {
   IconTrash
 } from '@tabler/icons-react';
 import { useCallback, useMemo, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { ActionButton } from '@lib/components/ActionButton';
 import type { RowAction } from '@lib/components/RowActions';
diff --git a/src/frontend/src/tables/purchasing/PurchaseOrderLineItemTable.tsx b/src/frontend/src/tables/purchasing/PurchaseOrderLineItemTable.tsx
index 3decd7c82499..aa6c218d63f4 100644
--- a/src/frontend/src/tables/purchasing/PurchaseOrderLineItemTable.tsx
+++ b/src/frontend/src/tables/purchasing/PurchaseOrderLineItemTable.tsx
@@ -20,7 +20,7 @@ import { apiUrl } from '@lib/functions/Api';
 import { formatDecimal } from '@lib/functions/Formatting';
 import type { TableFilter } from '@lib/types/Filters';
 import type { TableColumn } from '@lib/types/Tables';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 import ImporterDrawer from '../../components/importer/ImporterDrawer';
 import { RenderInstance } from '../../components/render/Instance';
 import { formatCurrency } from '../../defaults/formatters';
diff --git a/src/frontend/src/tables/sales/SalesOrderAllocationTable.tsx b/src/frontend/src/tables/sales/SalesOrderAllocationTable.tsx
index 4355366ac9e4..5073cffa3638 100644
--- a/src/frontend/src/tables/sales/SalesOrderAllocationTable.tsx
+++ b/src/frontend/src/tables/sales/SalesOrderAllocationTable.tsx
@@ -16,7 +16,7 @@ import type { StockOperationProps } from '@lib/types/Forms';
 import type { TableColumn } from '@lib/types/Tables';
 import { Alert } from '@mantine/core';
 import { IconCircleX, IconTruckDelivery } from '@tabler/icons-react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 import { formatDate } from '../../defaults/formatters';
 import { useSalesOrderAllocationFields } from '../../forms/SalesOrderForms';
 import {
diff --git a/src/frontend/src/tables/sales/SalesOrderLineItemTable.tsx b/src/frontend/src/tables/sales/SalesOrderLineItemTable.tsx
index 6826ac2a7f36..871f2e8f8cea 100644
--- a/src/frontend/src/tables/sales/SalesOrderLineItemTable.tsx
+++ b/src/frontend/src/tables/sales/SalesOrderLineItemTable.tsx
@@ -9,7 +9,7 @@ import {
 } from '@tabler/icons-react';
 import type { DataTableRowExpansionProps } from 'mantine-datatable';
 import { type ReactNode, useCallback, useMemo, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { ActionButton } from '@lib/components/ActionButton';
 import { AddItemButton } from '@lib/components/AddItemButton';
diff --git a/src/frontend/src/tables/sales/SalesOrderShipmentTable.tsx b/src/frontend/src/tables/sales/SalesOrderShipmentTable.tsx
index 52a90e6829bd..80da539f2d0b 100644
--- a/src/frontend/src/tables/sales/SalesOrderShipmentTable.tsx
+++ b/src/frontend/src/tables/sales/SalesOrderShipmentTable.tsx
@@ -5,7 +5,7 @@ import {
   IconTruckDelivery
 } from '@tabler/icons-react';
 import { useCallback, useMemo, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { AddItemButton } from '@lib/components/AddItemButton';
 import {
diff --git a/src/frontend/src/tables/settings/ErrorTable.tsx b/src/frontend/src/tables/settings/ErrorTable.tsx
index 293b4b043fb4..dc75d7169129 100644
--- a/src/frontend/src/tables/settings/ErrorTable.tsx
+++ b/src/frontend/src/tables/settings/ErrorTable.tsx
@@ -1,7 +1,8 @@
 import { t } from '@lingui/core/macro';
 import { Group, Loader, Stack, Table, Text } from '@mantine/core';
 import { useCallback, useMemo, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from '@tanstack/react-router';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { type RowAction, RowDeleteAction } from '@lib/components/RowActions';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
@@ -16,7 +17,8 @@ import { useUserState } from '../../states/UserState';
 import { InvenTreeTable } from '../InvenTreeTable';
 
 function ErrorDetail({ errorId }: Readonly<{ errorId?: number }>) {
-  const { id } = useParams();
+  const params = useParams({ strict: false }) as any;
+  const id = params?.id;
 
   const errorPrimaryKey = useMemo(() => {
     return errorId ?? id;
diff --git a/src/frontend/src/tables/settings/GroupTable.tsx b/src/frontend/src/tables/settings/GroupTable.tsx
index 98cf7c20f898..34ffbffb2a08 100644
--- a/src/frontend/src/tables/settings/GroupTable.tsx
+++ b/src/frontend/src/tables/settings/GroupTable.tsx
@@ -16,7 +16,7 @@ import { apiUrl } from '@lib/functions/Api';
 import { type ApiFormModalProps, getDetailUrl } from '@lib/index';
 import type { TableColumn, TableState } from '@lib/types/Tables';
 import { IconUsersGroup } from '@tabler/icons-react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 import { EditApiForm } from '../../components/forms/ApiForm';
 import { RoleTable, type RuleSet } from '../../components/items/RoleTable';
 import { StylishText } from '../../components/items/StylishText';
diff --git a/src/frontend/src/tables/settings/TemplateTable.tsx b/src/frontend/src/tables/settings/TemplateTable.tsx
index cddbbe517b70..40d75e2fea35 100644
--- a/src/frontend/src/tables/settings/TemplateTable.tsx
+++ b/src/frontend/src/tables/settings/TemplateTable.tsx
@@ -3,7 +3,7 @@ import { Trans } from '@lingui/react/macro';
 import { Group, LoadingOverlay, Stack, Text, Title } from '@mantine/core';
 import { IconFileCode } from '@tabler/icons-react';
 import { type ReactNode, useCallback, useMemo, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { AddItemButton } from '@lib/components/AddItemButton';
 import {
diff --git a/src/frontend/src/tables/settings/UserTable.tsx b/src/frontend/src/tables/settings/UserTable.tsx
index 66bd27754777..966547b511ed 100644
--- a/src/frontend/src/tables/settings/UserTable.tsx
+++ b/src/frontend/src/tables/settings/UserTable.tsx
@@ -24,7 +24,7 @@ import { type ApiFormModalProps, getDetailUrl } from '@lib/index';
 import type { TableFilter } from '@lib/types/Filters';
 import type { TableColumn, TableState } from '@lib/types/Tables';
 import { showNotification } from '@mantine/notifications';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 import { useShallow } from 'zustand/react/shallow';
 import { api } from '../../App';
 import { EditApiForm } from '../../components/forms/ApiForm';
diff --git a/src/frontend/src/tables/stock/StockItemTable.tsx b/src/frontend/src/tables/stock/StockItemTable.tsx
index 38d2e7e25ff1..ccbf7664de41 100644
--- a/src/frontend/src/tables/stock/StockItemTable.tsx
+++ b/src/frontend/src/tables/stock/StockItemTable.tsx
@@ -1,7 +1,7 @@
 import { t } from '@lingui/core/macro';
 import { Group, Text } from '@mantine/core';
 import { type ReactNode, useMemo, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { ActionButton } from '@lib/components/ActionButton';
 import { AddItemButton } from '@lib/components/AddItemButton';
diff --git a/src/frontend/src/tables/stock/StockTrackingTable.tsx b/src/frontend/src/tables/stock/StockTrackingTable.tsx
index 5e3acbe7d751..f56ec7b1c5f5 100644
--- a/src/frontend/src/tables/stock/StockTrackingTable.tsx
+++ b/src/frontend/src/tables/stock/StockTrackingTable.tsx
@@ -1,7 +1,7 @@
 import { t } from '@lingui/core/macro';
 import { Table, Text } from '@mantine/core';
 import { type ReactNode, useCallback, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelType } from '@lib/enums/ModelType';
diff --git a/src/frontend/src/views/DesktopAppView.tsx b/src/frontend/src/views/DesktopAppView.tsx
index ba9218114463..15991cc2ed18 100644
--- a/src/frontend/src/views/DesktopAppView.tsx
+++ b/src/frontend/src/views/DesktopAppView.tsx
@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { BrowserRouter } from 'react-router-dom';
+import { RouterProvider } from '@tanstack/react-router';
 
 import { getBaseUrl } from '@lib/functions/Navigation';
 import { useShallow } from 'zustand/react/shallow';
@@ -7,7 +7,7 @@ import { api, queryClient } from '../App';
 import { ApiProvider } from '../contexts/ApiContext';
 import { ThemeContext } from '../contexts/ThemeContext';
 import { defaultHostList } from '../defaults/defaultHostList';
-import { routes } from '../router';
+import { router } from '../router-tanstack';
 import { useLocalState } from '../states/LocalState';
 
 export default function DesktopAppView() {
@@ -19,10 +19,20 @@ export default function DesktopAppView() {
     }
   }, [hostList]);
 
+  // Update router basepath
+  useEffect(() => {
+    const basePath = getBaseUrl();
+    if (basePath && router.basepath !== `/${basePath}`) {
+      router.update({
+        basepath: `/${basePath}`
+      });
+    }
+  }, []);
+
   return (
     <ApiProvider client={queryClient} api={api}>
       <ThemeContext>
-        <BrowserRouter basename={getBaseUrl()}>{routes}</BrowserRouter>
+        <RouterProvider router={router} />
       </ThemeContext>
     </ApiProvider>
   );
diff --git a/src/frontend/yarn.lock b/src/frontend/yarn.lock
index 6bee0ccbef33..64bc11dd2309 100644
--- a/src/frontend/yarn.lock
+++ b/src/frontend/yarn.lock
@@ -1905,6 +1905,11 @@
   resolved "https://registry.npmjs.org/@tabler/icons/-/icons-3.34.1.tgz"
   integrity sha512-9gTnUvd7Fd/DmQgr3MKY+oJLa1RfNsQo8c/ir3TJAWghOuZXodbtbVp0QBY2DxWuuvrSZFys0HEbv1CoiI5y6A==
 
+"@tanstack/history@1.145.7":
+  version "1.145.7"
+  resolved "https://registry.yarnpkg.com/@tanstack/history/-/history-1.145.7.tgz#38a28b0b020fe3c6e1da0ec810cf1b64be66f978"
+  integrity sha512-gMo/ReTUp0a3IOcZoI3hH6PLDC2R/5ELQ7P2yu9F6aEkA0wSQh+Q4qzMrtcKvF2ut0oE+16xWCGDo/TdYd6cEQ==
+
 "@tanstack/query-core@5.85.9":
   version "5.85.9"
   resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.85.9.tgz#69e800f4d1c42ca4a110469229d8ecca409d477a"
@@ -1917,6 +1922,69 @@
   dependencies:
     "@tanstack/query-core" "5.85.9"
 
+"@tanstack/react-router-devtools@1.150.0":
+  version "1.150.0"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-router-devtools/-/react-router-devtools-1.150.0.tgz#d08bb7b6978855fac5ada6995bc0f3552653bce9"
+  integrity sha512-TlvTE+XK5XVCfYjazoMWkjyyPKe4kMw2nCA7EuWoYUJKOqRW5oKvBY7auViGWxp51FKDEjV3bbok3wPKBYwZww==
+  dependencies:
+    "@tanstack/router-devtools-core" "1.150.0"
+
+"@tanstack/react-router@^1.150.0":
+  version "1.150.0"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-router/-/react-router-1.150.0.tgz#e888f7b4f782740e3591d58167a3bd30dc0547b3"
+  integrity sha512-k/oycTCpBT2XoEk9dNd/nNYhF0X9fLSB10lT40+NVX1TjOtBq5whksk8MT6oRnSoQ8KWeb7La3G9kFaAeSULkA==
+  dependencies:
+    "@tanstack/history" "1.145.7"
+    "@tanstack/react-store" "^0.8.0"
+    "@tanstack/router-core" "1.150.0"
+    isbot "^5.1.22"
+    tiny-invariant "^1.3.3"
+    tiny-warning "^1.0.3"
+
+"@tanstack/react-store@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-store/-/react-store-0.8.0.tgz#af2e73f1a466e08897349829bae1073f6172e7da"
+  integrity sha512-1vG9beLIuB7q69skxK9r5xiLN3ztzIPfSQSs0GfeqWGO2tGIyInZx0x1COhpx97RKaONSoAb8C3dxacWksm1ow==
+  dependencies:
+    "@tanstack/store" "0.8.0"
+    use-sync-external-store "^1.6.0"
+
+"@tanstack/router-core@1.150.0":
+  version "1.150.0"
+  resolved "https://registry.yarnpkg.com/@tanstack/router-core/-/router-core-1.150.0.tgz#87a867ce0ed5ecdf4ed13c326aaf1d73141f98da"
+  integrity sha512-cAm44t/tUbfyzaDH+rE/WO4u3AgaZdpJp00xjQ4gNkC2O95ntVHq5fx+4fhtrkKpgdXoKldgk8OK66djiWpuGQ==
+  dependencies:
+    "@tanstack/history" "1.145.7"
+    "@tanstack/store" "^0.8.0"
+    cookie-es "^2.0.0"
+    seroval "^1.4.1"
+    seroval-plugins "^1.4.0"
+    tiny-invariant "^1.3.3"
+    tiny-warning "^1.0.3"
+
+"@tanstack/router-devtools-core@1.150.0":
+  version "1.150.0"
+  resolved "https://registry.yarnpkg.com/@tanstack/router-devtools-core/-/router-devtools-core-1.150.0.tgz#e8f73593b8033aa575ade880a3b0b9c2771516c7"
+  integrity sha512-61V+4fq2fOPru/48cuojKvWhQx2h/nuj4nVHwzu9E7O8h391h4Hks6axxRbY98/rIz96mn5TCoc0aYuoga53bg==
+  dependencies:
+    clsx "^2.1.1"
+    goober "^2.1.16"
+    tiny-invariant "^1.3.3"
+
+"@tanstack/router-devtools@^1.150.0":
+  version "1.150.0"
+  resolved "https://registry.yarnpkg.com/@tanstack/router-devtools/-/router-devtools-1.150.0.tgz#0dd0370bb2876f3cba355bac56a7cdf0c076ee1e"
+  integrity sha512-fT7fvpFvBpvls214mJrNqnlZATWcrgmEr/bOszASf6FFwxXeH5IDpNbLOPitIDvbBvNnv3JEZvXRbW/HwPO07w==
+  dependencies:
+    "@tanstack/react-router-devtools" "1.150.0"
+    clsx "^2.1.1"
+    goober "^2.1.16"
+
+"@tanstack/store@0.8.0", "@tanstack/store@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@tanstack/store/-/store-0.8.0.tgz#f1c533b9cff000fc792ed77edda178000abc9442"
+  integrity sha512-Om+BO0YfMZe//X2z0uLF2j+75nQga6TpTJgLJQBiq85aOyZNIhkCgleNcud2KQg4k4v9Y9l+Uhru3qWMPGTOzQ==
+
 "@types/argparse@1.0.38":
   version "1.0.38"
   resolved "https://registry.npmjs.org/@types/argparse/-/argparse-1.0.38.tgz"
@@ -2804,6 +2872,11 @@ convert-source-map@^2.0.0:
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
   integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
 
+cookie-es@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/cookie-es/-/cookie-es-2.0.0.tgz#ca6163d7ef8686ea6bbdd551f1de575569c1ed69"
+  integrity sha512-RAj4E421UYRgqokKUmotqAwuplYw15qtdXfY+hGzgCJ/MBjCVZcSoHK/kH9kocfjRjcDME7IiDWR/1WX1TM2Pg==
+
 cosmiconfig@^7.0.0:
   version "7.1.0"
   resolved "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz"
@@ -3499,6 +3572,11 @@ glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+goober@^2.1.16:
+  version "2.1.18"
+  resolved "https://registry.yarnpkg.com/goober/-/goober-2.1.18.tgz#b72d669bd24d552d441638eee26dfd5716ea6442"
+  integrity sha512-2vFqsaDVIT9Gz7N6kAL++pLpp41l3PfDuusHcjnGLfR6+huZkl6ziX+zgVC3ZxpqWhzH6pyDdGrCeDhMIvwaxw==
+
 gopd@^1.2.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz"
@@ -3690,6 +3768,11 @@ is-windows@^1.0.2:
   resolved "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz"
   integrity sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==
 
+isbot@^5.1.22:
+  version "5.1.32"
+  resolved "https://registry.yarnpkg.com/isbot/-/isbot-5.1.32.tgz#a75b327460c79f07d8a5d7e3456f5fb25c84d3d1"
+  integrity sha512-VNfjM73zz2IBZmdShMfAUg10prm6t7HFUQmNAEOAVS4YH92ZrZcvkMcGX6cIgBJAzWDzPent/EeAtYEHNPNPBQ==
+
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
@@ -4891,6 +4974,16 @@ semver@~7.5.4:
   dependencies:
     lru-cache "^6.0.0"
 
+seroval-plugins@^1.4.0:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/seroval-plugins/-/seroval-plugins-1.4.2.tgz#e903e9a9f4f77f82bf80714213fa4bcae3b395cf"
+  integrity sha512-X7p4MEDTi+60o2sXZ4bnDBhgsUYDSkQEvzYZuJyFqWg9jcoPsHts5nrg5O956py2wyt28lUrBxk0M0/wU8URpA==
+
+seroval@^1.4.1:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/seroval/-/seroval-1.4.2.tgz#0718ce33f0363407eee7c78272c24bc48ec940c8"
+  integrity sha512-N3HEHRCZYn3cQbsC4B5ldj9j+tHdf4JZoYPlcI4rRYu0Xy4qN8MQf1Z08EibzB0WpgRG5BGK08FTrmM66eSzKQ==
+
 set-blocking@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz"
@@ -5170,6 +5263,11 @@ tiny-invariant@^1.3.3:
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.3.tgz#46680b7a873a0d5d10005995eb90a70d74d60127"
   integrity sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==
 
+tiny-warning@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
 "tiny-worker@>= 2":
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/tiny-worker/-/tiny-worker-2.3.0.tgz#715ae34304c757a9af573ae9a8e3967177e6011e"
@@ -5343,6 +5441,11 @@ use-sync-external-store@^1.2.2, use-sync-external-store@^1.4.0:
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz#55122e2a3edd2a6c106174c27485e0fd59bcfca0"
   integrity sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==
 
+use-sync-external-store@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz#b174bfa65cb2b526732d9f2ac0a408027876f32d"
+  integrity sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==
+
 util-deprecate@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"