diff --git a/gatsby-browser.js b/gatsby-browser.js
deleted file mode 100644
index 9f28e5e..0000000
--- a/gatsby-browser.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import React from "react"
-import Layout from "./src/components/Layout"
-import "./src/styles/fonts.css"
-import "bootstrap/dist/css/bootstrap.min.css"
-import "./src/styles/style.css"
-import Modals from "./src/components/Modals"
-// import { AvailableModalsViews } from "./src/store"
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
-import PrefetchData from "./src/components/PrefetchData"
-import PageLayout from "./src/components/PageLayout"
-import { useBrowserStore, usePersistentStore } from "./src/store"
-import { versionService } from "./src/services"
-import Page from "./src/components/Page"
-
-// Logs when the client route changes
-export function onRouteUpdate({ location, prevLocation }) {
-  console.log("[Layout] render")
-  console.log(
-    "[gatsby-browser]@onRouteUpdate new pathname",
-    location.pathname,
-    "prev pathname",
-    prevLocation?.pathname,
-  )
-  useBrowserStore.getState().setPath(location.pathname, prevLocation?.pathname)
-}
-
-// Create a client
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      refetchOnWindowFocus: false,
-      retry: false,
-      // Add a timeout of 10 seconds
-      staleTime: 10000,
-    },
-  },
-})
-console.info(
-  "Impresso datalab",
-  "\n - PATH_PREFIX:",
-  process.env.PATH_PREFIX,
-  "\n - GATSBY_PATH_PREFIX:",
-  process.env.GATSBY_PATH_PREFIX,
-)
-
-setTimeout(() => {
-  console.info("[gatsby-browser] load version...")
-  versionService.find().then((data) => {
-    console.info("[gatsby-browser] use version:", data)
-  })
-}, 3000)
-
-// Wraps every page in a component
-export function wrapRootElement({ element, props }) {
-  console.log("[gatsby-browser]@wrapRootElement")
-
-  // get fresh data from the localstorage
-  const existingToken = window.localStorage.getItem("feathers-jwt")
-
-  if (existingToken && usePersistentStore.getState().token === null) {
-    console.info("[usePersistentStore] use existing token from feathers-jwt")
-    usePersistentStore.setState({ token: existingToken })
-  } else {
-    console.info("[usePersistentStore] use fresh token")
-  }
-
-  return (
-    <QueryClientProvider client={queryClient}>
-      <PrefetchData />
-      <Modals />
-      <Layout {...props}>{element}</Layout>
-    </QueryClientProvider>
-  )
-}
-
-// wraps every page in a component
-export function wrapPageElement({ element, props }) {
-  console.log("[gatsby-browser]@wrapPageElement", props)
-
-  if (props.path === "/plans/") {
-    return <Page {...props}>hello{element}</Page>
-  }
-  // display all other pages a s modals
-  return (
-    <main className="position-fixed">
-      <PageLayout {...props}>{element}</PageLayout>
-    </main>
-  )
-}
-
-export function shouldUpdateScroll() {
-  return false
-}
diff --git a/gatsby-browser.tsx b/gatsby-browser.tsx
new file mode 100644
index 0000000..fa563a9
--- /dev/null
+++ b/gatsby-browser.tsx
@@ -0,0 +1,50 @@
+import React, { Suspense } from "react"
+
+import "./src/styles/fonts.css"
+import "bootstrap/dist/css/bootstrap.min.css"
+import "./src/styles/style.css"
+
+// import { useBrowserStore } from "./src/store"
+import App from "./src/components/App"
+import PageLayout from "./src/components/PageLayout"
+
+const AppLazy = React.lazy(() => import("./src/components/App"))
+const PageLayoutLazy = React.lazy(() => import("./src/components/PageLayout"))
+// Logs when the client route changes
+export function onRouteUpdate({ location, prevLocation }) {
+  console.log("[Layout] render")
+  console.log(
+    "[gatsby-browser]@onRouteUpdate new pathname",
+    location.pathname,
+    "prev pathname",
+    prevLocation?.pathname,
+  )
+  // useBrowserStore.getState().setPath(location.pathname, prevLocation?.pathname)
+}
+
+// Wraps every page in a component
+export function wrapRootElement({ element, props }) {
+  return (
+    <Suspense>
+      <AppLazy {...props}>{element}</AppLazy>
+    </Suspense>
+  )
+}
+
+// wraps every page in a component
+export function wrapPageElement({ element, props }) {
+  console.log("[gatsby-browser]@wrapPageElement", props)
+
+  // display all other pages a s modals
+  return (
+    <main className="position-fixed">
+      <Suspense>
+        <PageLayoutLazy {...props}>{element}</PageLayoutLazy>
+      </Suspense>
+    </main>
+  )
+}
+
+export function shouldUpdateScroll() {
+  return false
+}
diff --git a/src/components/App.tsx b/src/components/App.tsx
new file mode 100644
index 0000000..fb76d9d
--- /dev/null
+++ b/src/components/App.tsx
@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from "react"
+import { usePersistentStore } from "../store"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import Layout from "../components/Layout"
+import PrefetchData from "../components/PrefetchData"
+import Modals from "../components/Modals"
+
+console.info(
+  "Impresso datalab",
+  "\n - PATH_PREFIX:",
+  process.env.PATH_PREFIX,
+  "\n - GATSBY_PATH_PREFIX:",
+  process.env.GATSBY_PATH_PREFIX,
+)
+
+// setTimeout(() => {
+//   console.info("[gatsby-browser] load version...")
+//   versionService.find().then((data) => {
+//     console.info("[gatsby-browser] use version:", data)
+//   })
+// }, 3000)
+
+const App: React.FC = ({ props, children }) => {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            refetchOnWindowFocus: false,
+            retry: false,
+            // Add a timeout of 10 seconds
+            staleTime: 10000,
+          },
+        },
+      }),
+  )
+  console.log("[App] rendering...", window)
+  useEffect(() => {
+    // get fresh data from the localstorage
+    const existingToken = window.localStorage.getItem("feathers-jwt")
+
+    if (existingToken && usePersistentStore.getState().token === null) {
+      console.info("[usePersistentStore] use existing token from feathers-jwt")
+      usePersistentStore.setState({ token: existingToken })
+    } else {
+      console.info("[usePersistentStore] use fresh token")
+    }
+  }, [])
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <PrefetchData />
+      <Modals />
+      <Layout {...props}>{children}</Layout>
+    </QueryClientProvider>
+  )
+}
+
+export default App
diff --git a/src/pages/access-to-api.tsx b/src/pages/access-to-api.tsx
index c3d3b07..1308948 100644
--- a/src/pages/access-to-api.tsx
+++ b/src/pages/access-to-api.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useEffect } from "react"
 import { graphql, PageProps } from "gatsby"
 import AccessToApi from "../components/AccessToApi"
 import { usePersistentStore } from "../store"
@@ -14,15 +14,18 @@ type DataProps = {
 
 const AccessToApiRoute = ({ data: { site } }: PageProps<DataProps>) => {
   const llToken = usePersistentStore((state) => state.token)
-  console.info("[pages/access-to-api AccessToApiRoute] llToken:", llToken)
+
   // double check if the user is authentified
-  if (!llToken) {
-    console.info(
-      "[pages/access-to-api AccessToApiRoute] no token found, redirecting to /login",
-    )
-    navigate("/login")
-    return
-  }
+  useEffect(() => {
+    console.info("[pages/access-to-api AccessToApiRoute] llToken:", llToken)
+
+    if (!llToken) {
+      console.info(
+        "[pages/access-to-api AccessToApiRoute] no token found, redirecting to /login",
+      )
+      navigate("/login")
+    }
+  }, [llToken])
   return <AccessToApi llToken={llToken} />
 }