diff --git a/web/app/(commonLayout)/layout.tsx b/web/app/(commonLayout)/layout.tsx
index be9c4fe49a..bd5b9bead2 100644
--- a/web/app/(commonLayout)/layout.tsx
+++ b/web/app/(commonLayout)/layout.tsx
@@ -10,6 +10,7 @@ import { ProviderContextProvider } from '@/context/provider-context'
 import { ModalContextProvider } from '@/context/modal-context'
 import GotoAnything from '@/app/components/goto-anything'
 import Zendesk from '@/app/components/base/zendesk'
+import Splash from '../components/splash'
 
 const Layout = ({ children }: { children: ReactNode }) => {
   return (
@@ -25,6 +26,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
                 </HeaderWrapper>
                 {children}
                 <GotoAnything />
+                <Splash />
               </ModalContextProvider>
             </ProviderContextProvider>
           </EventEmitterContextProvider>
diff --git a/web/app/components/splash.tsx b/web/app/components/splash.tsx
new file mode 100644
index 0000000000..22e3217f01
--- /dev/null
+++ b/web/app/components/splash.tsx
@@ -0,0 +1,21 @@
+'use client'
+import type { FC, PropsWithChildren } from 'react'
+import React from 'react'
+import { useIsLogin } from '@/service/use-common'
+import Loading from './base/loading'
+
+const Splash: FC<PropsWithChildren> = () => {
+  // would auto redirect to signin page if not logged in
+  const { isLoading, data: loginData } = useIsLogin()
+  const isLoggedIn = loginData?.logged_in
+
+  if (isLoading || !isLoggedIn) {
+    return (
+      <div className='fixed inset-0 z-[9999999] flex h-full items-center justify-center bg-background-body'>
+        <Loading />
+      </div>
+    )
+  }
+  return null
+}
+export default React.memo(Splash)