diff --git a/web/frontend/src/app-providers.tsx b/web/frontend/src/app-providers.tsx
new file mode 100644
index 000000000..bfb5dfb38
--- /dev/null
+++ b/web/frontend/src/app-providers.tsx
@@ -0,0 +1,13 @@
+import type { ReactNode } from "react"
+
+import { useHighlightTheme } from "./hooks/use-highlight-theme"
+
+interface AppProvidersProps {
+  children: ReactNode
+}
+
+export function AppProviders({ children }: AppProvidersProps) {
+  useHighlightTheme()
+
+  return <>{children}</>
+}
diff --git a/web/frontend/src/main.tsx b/web/frontend/src/main.tsx
index 17eb18291..313daf62d 100644
--- a/web/frontend/src/main.tsx
+++ b/web/frontend/src/main.tsx
@@ -3,7 +3,7 @@ import { RouterProvider, createRouter } from "@tanstack/react-router"
 import { StrictMode } from "react"
 import ReactDOM from "react-dom/client"
 
-import { useHighlightTheme } from "./hooks/use-highlight-theme"
+import { AppProviders } from "./app-providers"
 import "./i18n"
 import "./index.css"
 import { routeTree } from "./routeTree.gen"
@@ -23,22 +23,16 @@ declare module "@tanstack/react-router" {
   }
 }
 
-function AppProviders() {
-  useHighlightTheme()
-
-  return (
-    <QueryClientProvider client={queryClient}>
-      <RouterProvider router={router} />
-    </QueryClientProvider>
-  )
-}
-
 const rootElement = document.getElementById("root")!
 if (!rootElement.innerHTML) {
   const root = ReactDOM.createRoot(rootElement)
   root.render(
     <StrictMode>
-      <AppProviders />
+      <AppProviders>
+        <QueryClientProvider client={queryClient}>
+          <RouterProvider router={router} />
+        </QueryClientProvider>
+      </AppProviders>
     </StrictMode>,
   )
 }