diff --git a/app/app.tsx b/app/app.tsx
index 847d587f45..07dedc12b1 100644
--- a/app/app.tsx
+++ b/app/app.tsx
@@ -28,20 +28,20 @@ const App = () => (
     <Router>
       <QuickMenu />
       <Routes>
-        <Route path="/" element={<Navigate to="/projects" replace={true} />} />
+        <Route index element={<Navigate to="/projects" replace={true} />} />
 
         {/* ORG */}
         <Route path="projects" element={<OrgLayout />}>
           {/* separate from project detail pages because of the different layout */}
-          <Route path="/" element={<ProjectsPage />} />
+          <Route index element={<ProjectsPage />} />
           <Route path="new" element={<ProjectCreatePage />} />
         </Route>
 
         {/* PROJECT */}
-        <Route path="/projects/:projectName" element={<ProjectLayout />}>
-          <Route element={<ProjectPage />} />
+        <Route path="projects/:projectName" element={<ProjectLayout />}>
+          <Route index element={<ProjectPage />} />
           <Route path="instances">
-            <Route path="/" element={<ProjectPage />} />
+            <Route index element={<ProjectPage />} />
             <Route path="new" element={<InstanceCreatePage />} />
           </Route>
           <Route path="networking" />
@@ -54,10 +54,10 @@ const App = () => (
 
         {/* INSTANCE */}
         <Route
-          path="/projects/:projectName/instances/:instanceName"
+          path="projects/:projectName/instances/:instanceName"
           element={<InstanceLayout />}
         >
-          <Route path="/" />
+          <Route index />
           <Route path="metrics" />
           <Route path="activity" />
           <Route path="access" />
diff --git a/app/components/QuickMenu.tsx b/app/components/QuickMenu.tsx
index 88fe4eef3c..1bb0ecf97e 100644
--- a/app/components/QuickMenu.tsx
+++ b/app/components/QuickMenu.tsx
@@ -31,9 +31,11 @@ const projectPaths: Record<string, (s: string) => string> = {
   'Project access': (projectName) => `/projects/${projectName}/access`,
 }
 
+// can't use useParams because QuickMenu is not rendered inside the route tree, so
+// it does not have access to the current route
 function useProjectName(): string | null {
   const match = useMatch('/projects/:projectName')
-  return match && match.params.projectName !== 'new'
+  return match?.params.projectName && match.params.projectName !== 'new'
     ? match.params.projectName
     : null
 }
@@ -42,7 +44,7 @@ function useProjectName(): string | null {
 // eslint-disable-next-line
 function useInstanceName(): string | null {
   const match = useMatch('/projects/:projectName/instances/:instanceName')
-  return match && match.params.instanceName !== 'new'
+  return match?.params.instanceName && match.params.instanceName !== 'new'
     ? match.params.instanceName
     : null
 }
diff --git a/app/layouts/OrgLayout.tsx b/app/layouts/OrgLayout.tsx
index c67ea3a677..a12bbeb4ef 100644
--- a/app/layouts/OrgLayout.tsx
+++ b/app/layouts/OrgLayout.tsx
@@ -21,7 +21,6 @@ const ProjectList = (props: { className?: string }) => {
             <NavLink
               className="inline-flex w-full p-1"
               to={`/projects/${p.name}`}
-              activeClassName="text-white"
               end
             >
               {p.name}
diff --git a/app/layouts/helpers.tsx b/app/layouts/helpers.tsx
index dfb57d0f44..a50a38191d 100644
--- a/app/layouts/helpers.tsx
+++ b/app/layouts/helpers.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import { Link, NavLink } from 'react-router-dom'
 
 import { classed } from '@oxide/ui'
+import cn from 'classnames'
 
 export const PageContainer = classed.div`grid h-screen grid-cols-[14rem,auto]`
 export const Sidebar = classed.div`pb-6 pt-1 overflow-auto bg-gray-500`
@@ -46,8 +47,12 @@ export const NavLinkItem = (props: {
   <li>
     <NavLink
       to={props.to}
-      className="flex items-center p-1 hover:bg-gray-400 svg:mr-2 svg:text-gray-300"
-      activeClassName="text-white svg:!text-green-500"
+      className={({ isActive }) =>
+        cn(
+          'flex items-center p-1 hover:bg-gray-400 svg:mr-2 svg:text-gray-300',
+          { 'text-white svg:!text-green-500': isActive }
+        )
+      }
       end
     >
       {props.children}
diff --git a/package.json b/package.json
index 86077785d2..ffb5620c26 100644
--- a/package.json
+++ b/package.json
@@ -37,8 +37,8 @@
     "react-is": "^17.0.2",
     "react-popper": "^2.2.5",
     "react-query": "^3.13.12",
-    "react-router": "^6.0.0-beta.2",
-    "react-router-dom": "^6.0.0-beta.2",
+    "react-router": "^6.0.0-beta.6",
+    "react-router-dom": "^6.0.0-beta.6",
     "react-table": "^7.7.0",
     "react-transition-group": "^4.4.1",
     "tslib": "^2.0.0",
diff --git a/yarn.lock b/yarn.lock
index 66c35e2615..e8d7086a02 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10612,17 +10612,17 @@ react-remove-scroll@^2.4.2:
     use-callback-ref "^1.2.3"
     use-sidecar "^1.0.1"
 
-react-router-dom@^6.0.0-beta.2:
-  version "6.0.0-beta.2"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.0.0-beta.2.tgz#f001f862e94787853363dd845d70340ab55c8744"
-  integrity sha512-ZOauHu+clEYCRsW77F21/q6Ou5zmJvL6FvKsbmvO+J+4e7OXglh0VJy8yph8xoz20Ak5UYDExubE6n5+2QP1pw==
+react-router-dom@^6.0.0-beta.6:
+  version "6.0.0-beta.6"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.0.0-beta.6.tgz#326c39382674c337b27f5d183026cdbab6373034"
+  integrity sha512-8pca4/YgQi+azEoY4KtfQMuhkIgRurmqa+mBXIICZRp71nPQX/x1lAnTw6Q2/J5dFu2rIRx1V+HA4hZ1AV0x2Q==
   dependencies:
-    react-router "6.0.0-beta.2"
+    react-router "6.0.0-beta.6"
 
-react-router@6.0.0-beta.2, react-router@^6.0.0-beta.2:
-  version "6.0.0-beta.2"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.0.0-beta.2.tgz#7c804e4d1f86ebfd397ed8b1e05a63d24bf3313f"
-  integrity sha512-oyVEfpVT9VbClWaZNNShfprq8HA5rSLfo/ZsXFT08/6mldM6onHzqr6Lc1ybBYEB7/c+rr1VOA99as7hEoAoXw==
+react-router@6.0.0-beta.6, react-router@^6.0.0-beta.6:
+  version "6.0.0-beta.6"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.0.0-beta.6.tgz#147e8313d3ce5b4a53b8fc1dae6f20664f5df69a"
+  integrity sha512-wuwkFWb464LwWcGuO75kYfzWPE9f5Wgj9/cRVVh8kh/IjOIDpM+8nYCs11ukMJwnwT+3pIps9t/lB9Hnk67zpw==
 
 react-sizeme@^3.0.1:
   version "3.0.1"