diff --git a/web/src/layouts/SuspenseWrapper.tsx b/web/src/layouts/SuspenseWrapper.tsx
new file mode 100644
index 00000000..886ac613
--- /dev/null
+++ b/web/src/layouts/SuspenseWrapper.tsx
@@ -0,0 +1,13 @@
+import { Suspense } from "react";
+import { Outlet } from "react-router-dom";
+import Loading from "@/pages/Loading";
+
+function SuspenseWrapper() {
+  return (
+    <Suspense fallback={<Loading />}>
+      <Outlet />
+    </Suspense>
+  );
+}
+
+export default SuspenseWrapper;
diff --git a/web/src/router/index.tsx b/web/src/router/index.tsx
index 39c23cea..8c7369b7 100644
--- a/web/src/router/index.tsx
+++ b/web/src/router/index.tsx
@@ -1,6 +1,7 @@
 import { lazy } from "react";
 import { createBrowserRouter } from "react-router-dom";
 import App from "@/App";
+import SuspenseWrapper from "@/layouts/SuspenseWrapper";
 import { initialGlobalState } from "@/store/module";
 import AuthStatusProvider from "./AuthStatusProvider";
 
@@ -36,16 +37,22 @@ const router = createBrowserRouter([
     loader: () => initialGlobalStateLoader(),
     children: [
       {
-        path: "/auth",
-        element: <SignIn />,
-      },
-      {
-        path: "/auth/signup",
-        element: <SignUp />,
-      },
-      {
-        path: "/auth/callback",
-        element: <AuthCallback />,
+        path: "/auth/",
+        element: <SuspenseWrapper />,
+        children: [
+          {
+            path: "",
+            element: <SignIn />,
+          },
+          {
+            path: "signup",
+            element: <SignUp />,
+          },
+          {
+            path: "callback",
+            element: <AuthCallback />,
+          },
+        ],
       },
       {
         path: "/",