diff --git a/apps/web/src/routes/__root.tsx b/apps/web/src/routes/__root.tsx
index ec525fa2316..7ac3416b9b5 100644
--- a/apps/web/src/routes/__root.tsx
+++ b/apps/web/src/routes/__root.tsx
@@ -99,19 +99,20 @@ export const Route = createRootRouteWithContext<{
   }),
 });
 
+const APP_SHELL = (
+  <CommandPalette>
+    <AppSidebarLayout>
+      <Outlet />
+    </AppSidebarLayout>
+  </CommandPalette>
+);
+
 function RootRouteView() {
   const pathname = useLocation({ select: (location) => location.pathname });
   const { authGateState } = Route.useRouteContext();
   const primaryEnvironmentAuthenticated = authGateState.status === "authenticated";
 
-  useEffect(() => {
-    const frame = window.requestAnimationFrame(() => {
-      syncBrowserChromeTheme();
-    });
-    return () => {
-      window.cancelAnimationFrame(frame);
-    };
-  }, [pathname]);
+  useBrowserChromeThemeSync(pathname);
 
   if (pathname === "/pair") {
     return <Outlet />;
@@ -121,14 +122,6 @@ function RootRouteView() {
     return <Outlet />;
   }
 
-  const appShell = (
-    <CommandPalette>
-      <AppSidebarLayout>
-        <Outlet />
-      </AppSidebarLayout>
-    </CommandPalette>
-  );
-
   return (
     <ToastProvider>
       <AnchoredToastProvider>
@@ -142,15 +135,26 @@ function RootRouteView() {
         {primaryEnvironmentAuthenticated ? <WebSocketConnectionCoordinator /> : null}
         {primaryEnvironmentAuthenticated ? <SlowRpcAckToastCoordinator /> : null}
         {primaryEnvironmentAuthenticated ? (
-          <WebSocketConnectionSurface>{appShell}</WebSocketConnectionSurface>
+          <WebSocketConnectionSurface>{APP_SHELL}</WebSocketConnectionSurface>
         ) : (
-          appShell
+          APP_SHELL
         )}
       </AnchoredToastProvider>
     </ToastProvider>
   );
 }
 
+function useBrowserChromeThemeSync(pathname: string) {
+  useEffect(() => {
+    const frame = window.requestAnimationFrame(() => {
+      syncBrowserChromeTheme();
+    });
+    return () => {
+      window.cancelAnimationFrame(frame);
+    };
+  }, [pathname]);
+}
+
 function HostedStaticEnvironmentBootstrap() {
   const savedEnvironmentCount = useSavedEnvironmentRegistryStore(
     (state) => Object.keys(state.byId).length,
diff --git a/react-scan-recordings/after/react-scan-root-shell-after.webm b/react-scan-recordings/after/react-scan-root-shell-after.webm
new file mode 100644
index 00000000000..ef0cf8579e8
Binary files /dev/null and b/react-scan-recordings/after/react-scan-root-shell-after.webm differ
diff --git a/react-scan-recordings/before/react-scan-root-shell-before.webm b/react-scan-recordings/before/react-scan-root-shell-before.webm
new file mode 100644
index 00000000000..1691e4cc16e
Binary files /dev/null and b/react-scan-recordings/before/react-scan-root-shell-before.webm differ