diff --git a/packages/app/src/pages/_app.tsx b/packages/app/src/pages/_app.tsx
index b881f9c07..5f1c9499d 100644
--- a/packages/app/src/pages/_app.tsx
+++ b/packages/app/src/pages/_app.tsx
@@ -67,8 +67,8 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
 };
 
 const AppDefender = ({ children }: PropsWithChildren) => {
-  const { synced } = useAppState();
   const router = useRouter();
+  const { synced } = useAppState();
 
   useEffect(() => {
     if (router.asPath === '/') {
@@ -76,6 +76,11 @@ const AppDefender = ({ children }: PropsWithChildren) => {
     }
   }, [router]);
 
+  // if you visit /404, you will see the children directly
+  if (router.route === '/404') {
+    return <div>{children}</div>;
+  }
+
   return <div>{synced ? children : <PageLoading />}</div>;
 };