diff --git a/src/pages/__components__/ItemListPageSkeleton/ItemListPageSkeleton.styles.ts b/src/pages/__components__/ItemListPageSkeleton/ItemListPageSkeleton.styles.ts
new file mode 100644
index 00000000..a16c0e7d
--- /dev/null
+++ b/src/pages/__components__/ItemListPageSkeleton/ItemListPageSkeleton.styles.ts
@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+
+import { Flex } from '@components/shared/Flex';
+
+export const PageContent = styled(Flex)`
+  padding: 10px 0 70px 0;
+`;
diff --git a/src/pages/__components__/ItemListPageSkeleton/ItemListPageSkeleton.tsx b/src/pages/__components__/ItemListPageSkeleton/ItemListPageSkeleton.tsx
new file mode 100644
index 00000000..6b92f249
--- /dev/null
+++ b/src/pages/__components__/ItemListPageSkeleton/ItemListPageSkeleton.tsx
@@ -0,0 +1,37 @@
+import { Header } from '@components/Header';
+import { ManageContainer } from '@components/Participation';
+import { Skeleton } from '@components/Skeleton';
+
+import { theme } from '@styles/theme';
+
+import { PageContent } from './ItemListPageSkeleton.styles';
+
+type ItemListPageSkeletonProps = {
+  name: string;
+};
+
+export const ItemListPageSkeleton = ({ name }: ItemListPageSkeletonProps) => {
+  return (
+    <Skeleton
+      width="100%"
+      height="60px"
+      radius="5px"
+      defaultColor={theme.PALETTE.GRAY_200}
+      gradientColor={theme.PALETTE.GRAY_300}
+    >
+      <ManageContainer>
+        <Header title={name} />
+        <PageContent direction="column" gap={10}>
+          <Skeleton.Item />
+          <Skeleton.Item />
+          <Skeleton.Item />
+          <Skeleton.Item />
+          <Skeleton.Item />
+          <Skeleton.Item />
+          <Skeleton.Item />
+          <Skeleton.Item />
+        </PageContent>
+      </ManageContainer>
+    </Skeleton>
+  );
+};
diff --git a/src/pages/__components__/ItemListPageSkeleton/index.ts b/src/pages/__components__/ItemListPageSkeleton/index.ts
new file mode 100644
index 00000000..6bed982d
--- /dev/null
+++ b/src/pages/__components__/ItemListPageSkeleton/index.ts
@@ -0,0 +1 @@
+export * from './ItemListPageSkeleton';
diff --git a/src/routes/router.tsx b/src/routes/router.tsx
index 97497bac..4eb8ae4d 100644
--- a/src/routes/router.tsx
+++ b/src/routes/router.tsx
@@ -8,6 +8,7 @@ import { Layout } from '@pages/Layout';
 import { MainPageLoading } from '@pages/MainPage';
 import { ProfilePageSkeleton } from '@pages/ProfilePage';
 import { CardListPageSkeleton } from '@pages/__components__/CardListPageSkeleton';
+import { ItemListPageSkeleton } from '@pages/__components__/ItemListPageSkeleton';
 import { ManagePageSkeleton } from '@pages/__components__/ManagePageSkeleton';
 
 import { LoginRequireBoundary } from './LoginRequireBoundary';
@@ -145,7 +146,11 @@ export const router = createBrowserRouter([
       },
       {
         path: 'crews/ranking',
-        element: <CrewsRankingPage />,
+        element: (
+          <Suspense fallback={<ItemListPageSkeleton name="크루 랭킹" />}>
+            <CrewsRankingPage />
+          </Suspense>
+        ),
       },
       {
         path: 'crews/:id',
@@ -198,7 +203,11 @@ export const router = createBrowserRouter([
       },
       {
         path: 'notification',
-        element: <NotificationPage />,
+        element: (
+          <Suspense fallback={<ItemListPageSkeleton name="알림" />}>
+            <NotificationPage />
+          </Suspense>
+        ),
       },
       {
         path: 'auth/kakao/callback',