diff --git a/web/app/components/devtools/index.ts b/web/app/components/devtools/index.ts
index 029218598b..2964b277c5 100644
--- a/web/app/components/devtools/index.ts
+++ b/web/app/components/devtools/index.ts
@@ -1,3 +1,3 @@
 export { ReactScan } from './react-scan'
-export { default as ReactScanLoader } from './react-scan-loader'
-export { TanStackDevtoolsWrapper } from './tanstack-devtools'
+export { ReactScanLoader } from './react-scan'
+export { TanStackDevtoolsWrapper } from './tanstack'
diff --git a/web/app/components/devtools/react-scan/index.ts b/web/app/components/devtools/react-scan/index.ts
new file mode 100644
index 0000000000..3a328c075f
--- /dev/null
+++ b/web/app/components/devtools/react-scan/index.ts
@@ -0,0 +1,2 @@
+export { ReactScanLoader } from './loader'
+export { ReactScan } from './scan'
diff --git a/web/app/components/devtools/react-scan-loader.tsx b/web/app/components/devtools/react-scan/loader.tsx
similarity index 71%
rename from web/app/components/devtools/react-scan-loader.tsx
rename to web/app/components/devtools/react-scan/loader.tsx
index abd8160245..ee702216f7 100644
--- a/web/app/components/devtools/react-scan-loader.tsx
+++ b/web/app/components/devtools/react-scan/loader.tsx
@@ -4,12 +4,12 @@ import { lazy, Suspense } from 'react'
 import { IS_DEV } from '@/config'
 
 const ReactScan = lazy(() =>
-  import('./react-scan').then(module => ({
+  import('./scan').then(module => ({
     default: module.ReactScan,
   })),
 )
 
-const ReactScanLoader = () => {
+export const ReactScanLoader = () => {
   if (!IS_DEV)
     return null
 
@@ -19,5 +19,3 @@ const ReactScanLoader = () => {
     </Suspense>
   )
 }
-
-export default ReactScanLoader
diff --git a/web/app/components/devtools/react-scan.tsx b/web/app/components/devtools/react-scan/scan.tsx
similarity index 100%
rename from web/app/components/devtools/react-scan.tsx
rename to web/app/components/devtools/react-scan/scan.tsx
diff --git a/web/app/components/devtools/tanstack-devtools.tsx b/web/app/components/devtools/tanstack/devtools.tsx
similarity index 100%
rename from web/app/components/devtools/tanstack-devtools.tsx
rename to web/app/components/devtools/tanstack/devtools.tsx
diff --git a/web/app/components/devtools/tanstack/index.ts b/web/app/components/devtools/tanstack/index.ts
new file mode 100644
index 0000000000..bad4aa8708
--- /dev/null
+++ b/web/app/components/devtools/tanstack/index.ts
@@ -0,0 +1 @@
+export { TanStackDevtoolsWrapper } from './devtools'
diff --git a/web/context/query-client.tsx b/web/context/query-client.tsx
index 8882048a63..e360cbed38 100644
--- a/web/context/query-client.tsx
+++ b/web/context/query-client.tsx
@@ -6,7 +6,7 @@ import { lazy, Suspense } from 'react'
 import { IS_DEV } from '@/config'
 
 const TanStackDevtoolsWrapper = lazy(() =>
-  import('@/app/components/devtools').then(module => ({
+  import('@/app/components/devtools/tanstack').then(module => ({
     default: module.TanStackDevtoolsWrapper,
   })),
 )