diff --git a/packages/shared/components/Loader.tsx b/packages/shared/components/Loader.tsx
new file mode 100644
index 00000000..d794a803
--- /dev/null
+++ b/packages/shared/components/Loader.tsx
@@ -0,0 +1,15 @@
+import { Flex, Spinner } from '@chakra-ui/react';
+
+export default function Loader() {
+  return (
+    <Flex justify="center" align="center">
+      <Spinner
+        thickness="4px"
+        speed="0.65s"
+        emptyColor="gray.200"
+        color="orange.400"
+        size="xl"
+      />
+    </Flex>
+  );
+}
diff --git a/packages/shared/layout/index.tsx b/packages/shared/layout/index.tsx
index 3e77a665..3b989e5c 100644
--- a/packages/shared/layout/index.tsx
+++ b/packages/shared/layout/index.tsx
@@ -1,7 +1,8 @@
 import { Box, Container } from '@chakra-ui/react';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 
+import Loader from '../components/Loader';
 import LocalErrorBoundary from '../components/LocalErrorBoundary';
 import useAuthStore from '../store/authStore';
 import { AppType } from '../types/app';
@@ -20,6 +21,7 @@ export default function Layout({ appType }: LayoutProps) {
   const navigate = useNavigate();
   const { pathname } = useLocation();
   const { setUser } = useAuthStore();
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
     try {
@@ -36,6 +38,8 @@ export default function Layout({ appType }: LayoutProps) {
       if (pathname === '/') {
         navigate('/signin');
       }
+    } finally {
+      setIsLoading(false);
     }
 
     //TODO 액세스 토큰 갱신 api 정상화 되면 연결
@@ -59,6 +63,10 @@ export default function Layout({ appType }: LayoutProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  if (isLoading) {
+    return <Loader />;
+  }
+
   return (
     <Container pos="relative" maxW="container.sm" h="100vh" p={0} centerContent>
       <Header appType={appType} />