diff --git a/packages/webui/src/routes/__root.tsx b/packages/webui/src/routes/__root.tsx
index 15223eb..1cfcd30 100644
--- a/packages/webui/src/routes/__root.tsx
+++ b/packages/webui/src/routes/__root.tsx
@@ -1,4 +1,12 @@
 import { Outlet, createRootRoute } from "@tanstack/react-router"
+import { Suspense, lazy } from "react"
+
+
+const TanStackRouterDevtools = process.env.NODE_ENV === "production"
+    ? () => null
+    : lazy(() => import("@tanstack/router-devtools").then(res => ({
+        default: res.TanStackRouterDevtools
+    })))
 
 
 export const Route = createRootRoute({ component: Root })
@@ -8,5 +16,7 @@ export function Root() {
         <div className="container mx-auto">
             <Outlet />
         </div>
+
+        <Suspense><TanStackRouterDevtools /></Suspense>
     </>
 }