diff --git a/src/lib/ui-kit-client-side-routing.tsx b/src/lib/ui-kit-client-side-routing.tsx
new file mode 100644
index 00000000..6ad759cf
--- /dev/null
+++ b/src/lib/ui-kit-client-side-routing.tsx
@@ -0,0 +1,12 @@
+import { useNavigate } from "react-router-dom";
+import { RouterProvider } from "@stacklok/ui-kit";
+
+export function UiKitClientSideRoutingProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const navigate = useNavigate();
+
+  return <RouterProvider navigate={navigate}>{children}</RouterProvider>;
+}
diff --git a/src/main.tsx b/src/main.tsx
index 22e8943c..b3d25e3f 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -10,6 +10,7 @@ import { DarkModeProvider, Toaster } from "@stacklok/ui-kit";
 import { client } from "./api/generated/index.ts";
 import { QueryClientProvider } from "./components/react-query-provider.tsx";
 import { BrowserRouter } from "react-router-dom";
+import { UiKitClientSideRoutingProvider } from "./lib/ui-kit-client-side-routing.tsx";
 
 // Initialize the API client
 client.setConfig({
@@ -19,16 +20,18 @@ client.setConfig({
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <BrowserRouter>
-      <DarkModeProvider>
-        <SidebarProvider>
-          <QueryClientProvider>
-            <ErrorBoundary fallback={<Error />}>
-              <Toaster />
-              <App />
-            </ErrorBoundary>
-          </QueryClientProvider>
-        </SidebarProvider>
-      </DarkModeProvider>
+      <UiKitClientSideRoutingProvider>
+        <DarkModeProvider>
+          <SidebarProvider>
+            <QueryClientProvider>
+              <ErrorBoundary fallback={<Error />}>
+                <Toaster />
+                <App />
+              </ErrorBoundary>
+            </QueryClientProvider>
+          </SidebarProvider>
+        </DarkModeProvider>
+      </UiKitClientSideRoutingProvider>
     </BrowserRouter>
   </StrictMode>,
 );