diff --git a/src/components/follow/UserListItem.tsx b/src/components/follow/UserListItem.tsx
index b756e946..cd85fc7e 100644
--- a/src/components/follow/UserListItem.tsx
+++ b/src/components/follow/UserListItem.tsx
@@ -43,7 +43,7 @@ const UserListItem = ({
           userId={userId}
           post={true}
         />
-        {userId !== myId && <FollowBtn userId={userId} />}
+        {myId && userId !== myId && <FollowBtn userId={userId} />}
       </div>
     ),
     []
diff --git a/src/components/home/WeeklyPopular.tsx b/src/components/home/WeeklyPopular.tsx
index 8cde550a..67588fb5 100644
--- a/src/components/home/WeeklyPopular.tsx
+++ b/src/components/home/WeeklyPopular.tsx
@@ -1,4 +1,4 @@
-import { lazy } from 'react';
+import { Suspense, lazy } from 'react';
 import { useGetPopularList } from '@/hooks/home/useGetPopularList';
 import { TODAY_CAFFEINE_INFO_TEXTS } from '@/constants/home';
 import { styled } from 'styled-system/jsx';
@@ -25,11 +25,12 @@ const WeeklyPopular = () => {
           brandList.map(
             (item, idx) =>
               item && (
-                <WeeklyPopularItem
-                  data={item}
-                  idx={idx}
-                  key={item?.brand}
-                />
+                <Suspense key={item?.brand}>
+                  <WeeklyPopularItem
+                    data={item}
+                    idx={idx}
+                  />
+                </Suspense>
               )
           )}
       </WeeklyPopularList>
diff --git a/src/components/mypage/MyProfile.tsx b/src/components/mypage/MyProfile.tsx
index 9ea1a6bd..18129c1c 100644
--- a/src/components/mypage/MyProfile.tsx
+++ b/src/components/mypage/MyProfile.tsx
@@ -1,4 +1,4 @@
-import { lazy, useRef } from 'react';
+import { Suspense, lazy, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 
@@ -96,7 +96,11 @@ const MyProfile = () => {
 
   return (
     <>
-      {isModal && <ConfirmDeleteUser />}
+      {isModal && (
+        <Suspense>
+          <ConfirmDeleteUser />
+        </Suspense>
+      )}
       <>
         <EditProfileImg
           profileImg={userData && userData.profileUrl}
diff --git a/src/components/post/CommentProto.tsx b/src/components/post/CommentProto.tsx
index fcb8eba1..c894bdb1 100644
--- a/src/components/post/CommentProto.tsx
+++ b/src/components/post/CommentProto.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { Suspense, useState } from 'react';
 import { styled } from 'styled-system/jsx';
 import { Flex, Column } from '@/styles/layout';
 
@@ -88,13 +88,15 @@ const CommentProto = ({
         {signedIn && (
           <>
             <Target ref={ref} />
-            <CommentAction
-              myComment={myComment}
-              comment={comment}
-              id={id}
-              postNum={postNum}
-              parentCommentId={parentCommentId}
-            />
+            <Suspense>
+              <CommentAction
+                myComment={myComment}
+                comment={comment}
+                id={id}
+                postNum={postNum}
+                parentCommentId={parentCommentId}
+              />
+            </Suspense>
           </>
         )}
       </Container>
diff --git a/src/components/post/PostDetail.tsx b/src/components/post/PostDetail.tsx
index 2630ab29..b068fc32 100644
--- a/src/components/post/PostDetail.tsx
+++ b/src/components/post/PostDetail.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { Suspense, useRef } from 'react';
 import { useQueries } from '@tanstack/react-query';
 
 import MiniProfile from '@/components/common/MiniProfile';
@@ -63,23 +63,29 @@ const PostDetail = ({ postNum }: { postNum: string }) => {
   return (
     <>
       {toggle && isPostOwner && (
-        <PostOwnerOption
-          cancleOptions={cancelOptions}
-          setConfirm={setConfirm}
-          postId={postNum}
-        />
+        <Suspense>
+          <PostOwnerOption
+            cancleOptions={cancelOptions}
+            setConfirm={setConfirm}
+            postId={postNum}
+          />
+        </Suspense>
       )}
       {toggle && !isPostOwner && (
-        <PublicOption
-          handleToggle={cancelOptions}
-          postId={postNum}
-        />
+        <Suspense>
+          <PublicOption
+            handleToggle={cancelOptions}
+            postId={postNum}
+          />
+        </Suspense>
       )}
       {confirm && (
-        <ConfirmDelete
-          cancelConfirm={cancelConfirm}
-          postId={postNum}
-        />
+        <Suspense>
+          <ConfirmDelete
+            cancelConfirm={cancelConfirm}
+            postId={postNum}
+          />
+        </Suspense>
       )}
       {postData && socialCounts && (
         <>
@@ -122,7 +128,9 @@ const PostDetail = ({ postNum }: { postNum: string }) => {
               commentCount={socialCounts.data.totalComments}
             />
           </InputContext.Provider>
-          <ReplyToPanel />
+          <Suspense>
+            <ReplyToPanel />
+          </Suspense>
           <PostInput
             inputRef={inputRef}
             postId={postNum}
diff --git a/src/components/posts/following/PostBody.tsx b/src/components/posts/following/PostBody.tsx
index b4e960b3..39f4462a 100644
--- a/src/components/posts/following/PostBody.tsx
+++ b/src/components/posts/following/PostBody.tsx
@@ -5,7 +5,7 @@ import { FollowingPost } from '@/types/types';
 import { styled } from 'styled-system/jsx';
 import { PostContent } from '@/styles/styles';
 import { PaddingT12 } from '@/styles/styles';
-import { lazy } from 'react';
+import { Suspense, lazy } from 'react';
 
 const ImageErrorCTA = lazy(() => import('../../common/ImageErrorCTA'));
 
@@ -44,10 +44,12 @@ const PostBody = ({
       <PostContent onClick={onClick}>{postTitle}</PostContent>
       {isError ? (
         <ImgErrorContainer>
-          <ImageErrorCTA
-            text={'이미지를 로드할 수 없습니다.'}
-            handleOnclick={handleReloadImg}
-          />
+          <Suspense>
+            <ImageErrorCTA
+              text={'이미지를 로드할 수 없습니다.'}
+              handleOnclick={handleReloadImg}
+            />
+          </Suspense>
         </ImgErrorContainer>
       ) : (
         <PostImg
diff --git a/src/components/posts/following/PostCard.tsx b/src/components/posts/following/PostCard.tsx
index 92b2e74d..f527fde0 100644
--- a/src/components/posts/following/PostCard.tsx
+++ b/src/components/posts/following/PostCard.tsx
@@ -13,7 +13,7 @@ import { usePostOptions } from '@/hooks/post/usePostOptions';
 import { useNavigateTo } from '@/hooks/useNavigateTo';
 import PostBody from '@/components/posts/following/PostBody';
 import { useVerifyOwner } from '@/hooks/post/useVerifyOwner';
-import React from 'react';
+import React, { Suspense } from 'react';
 
 const PublicOption = React.lazy(
   () => import('../../post/overlay/PublicOption')
@@ -67,24 +67,30 @@ const PostCard = ({ ...props }: FollowingPost) => {
   return (
     <>
       {toggle && !isPostOwner && (
-        <PublicOption
-          handleToggle={cancelOptions}
-          postId={postId}
-        />
+        <Suspense>
+          <PublicOption
+            handleToggle={cancelOptions}
+            postId={postId}
+          />
+        </Suspense>
       )}
       {toggle && isPostOwner && (
-        <PostOwnerOption
-          cancleOptions={cancelOptions}
-          postId={postId}
-          setConfirm={setConfirm}
-        />
+        <Suspense>
+          <PostOwnerOption
+            cancleOptions={cancelOptions}
+            postId={postId}
+            setConfirm={setConfirm}
+          />
+        </Suspense>
       )}
       {confirm && (
-        <ConfirmDelete
-          cancelConfirm={cancelConfirm}
-          postId={postId}
-          posts={true}
-        />
+        <Suspense>
+          <ConfirmDelete
+            cancelConfirm={cancelConfirm}
+            postId={postId}
+            posts={true}
+          />
+        </Suspense>
       )}
       <Container>
         <UserProfile className={cx(Flex, Between)}>
diff --git a/src/components/posts/following/PostsFollowing.tsx b/src/components/posts/following/PostsFollowing.tsx
index 01c102d0..9fcffbad 100644
--- a/src/components/posts/following/PostsFollowing.tsx
+++ b/src/components/posts/following/PostsFollowing.tsx
@@ -1,4 +1,4 @@
-import React, { useId } from 'react';
+import React, { Suspense, useId } from 'react';
 
 import PostCard from '@/components/posts/following/PostCard';
 import SEOMeta from '@/components/common/SEOMeta';
@@ -33,8 +33,16 @@ const PostsFollowing = () => {
           <Target ref={ref} />
         </Container>
       )}
-      {postsData && postsData.length === 0 && <FollowDiscoveryCTA />}
-      {!postsData && <SignInCTA />}
+      {postsData && postsData.length === 0 && (
+        <Suspense>
+          <FollowDiscoveryCTA />
+        </Suspense>
+      )}
+      {!postsData && (
+        <Suspense>
+          <SignInCTA />
+        </Suspense>
+      )}
     </>
   );
 };
diff --git a/src/components/profile/EmptyPostGrid.tsx b/src/components/profile/EmptyPostGrid.tsx
index d93537c3..b25eef02 100644
--- a/src/components/profile/EmptyPostGrid.tsx
+++ b/src/components/profile/EmptyPostGrid.tsx
@@ -1,4 +1,4 @@
-import { lazy } from 'react';
+import { lazy, Suspense } from 'react';
 import { PROFILE_TEXTS } from '@/constants/profile';
 
 import { css, cx } from 'styled-system/css';
@@ -27,11 +27,13 @@ const EmptyPostGrid = ({
 
   return (
     <Container className={cx(Justify, userId === profileId && DefaultHeight)}>
-      <CTA
-        text={myProfile ? my.text : another}
-        actionText={myProfile ? my.actionText : ''}
-        fn={myProfile ? handleClickBtn : undefined}
-      />
+      <Suspense>
+        <CTA
+          text={myProfile ? my.text : another}
+          actionText={myProfile ? my.actionText : ''}
+          fn={myProfile ? handleClickBtn : undefined}
+        />
+      </Suspense>
     </Container>
   );
 };
diff --git a/src/components/profile/FollowCount.tsx b/src/components/profile/FollowCount.tsx
index 219743f3..945f01e6 100644
--- a/src/components/profile/FollowCount.tsx
+++ b/src/components/profile/FollowCount.tsx
@@ -33,7 +33,10 @@ const FollowCount = ({ data }: FollowCountProps) => {
 
   const { userId: profileId, postCount } = data;
 
-  const { isFollowing, getCheckFollowing } = useGetCheckFollowing(profileId);
+  const { isFollowing, getCheckFollowing } = useGetCheckFollowing(
+    profileId,
+    signedIn
+  );
   const { userFollowCount } = useGetFollowCount(profileId, isFollowing);
 
   const handleFollowBtn = async () => {
diff --git a/src/components/profile/MemberProfile.tsx b/src/components/profile/MemberProfile.tsx
index 1319c75e..20578ee7 100644
--- a/src/components/profile/MemberProfile.tsx
+++ b/src/components/profile/MemberProfile.tsx
@@ -1,4 +1,4 @@
-import { lazy } from 'react';
+import { lazy, Suspense } from 'react';
 
 import { useTargetInfiniteScroll } from '@/hooks/useTargetInfiniteScroll';
 import { getProfilePostIQParam } from '@/hooks/useInfiniteScroll';
@@ -40,19 +40,25 @@ const MemberProfile = ({
   return (
     <Container className={Column}>
       <div className={cx(Column, Between)}>
-        <ProfileDetail userId={profileId} />
-        <FollowCount data={followCountData} />
+        <Suspense>
+          <ProfileDetail userId={profileId} />
+          <FollowCount data={followCountData} />
+        </Suspense>
       </div>
       {allCount != 0 ? (
-        <PostsGrid
-          data={postsData}
-          postRef={postRef}
-        />
+        <Suspense>
+          <PostsGrid
+            data={postsData}
+            postRef={postRef}
+          />
+        </Suspense>
       ) : (
-        <EmptyPostGrid
-          profileId={profileId}
-          userId={userId}
-        />
+        <Suspense>
+          <EmptyPostGrid
+            profileId={profileId}
+            userId={userId}
+          />
+        </Suspense>
       )}
     </Container>
   );
diff --git a/src/components/profile/PostsGrid.tsx b/src/components/profile/PostsGrid.tsx
index 32524db8..0defd1cf 100644
--- a/src/components/profile/PostsGrid.tsx
+++ b/src/components/profile/PostsGrid.tsx
@@ -1,4 +1,4 @@
-import { lazy } from 'react';
+import { lazy, Suspense } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useImgErrorCTA } from '@/hooks/useImgErrorCTA';
 import { PostsGridProps, UserProfilePostsTypes } from '@/types/types';
@@ -26,10 +26,12 @@ const PostsGrid = ({ data, postRef }: PostsGridProps) => {
     <>
       {isError ? (
         <Container>
-          <ImageErrorCTA
-            text={'게시물을 불러올 수 없습니다.'}
-            handleOnclick={refresh}
-          />
+          <Suspense>
+            <ImageErrorCTA
+              text={'게시물을 불러올 수 없습니다.'}
+              handleOnclick={refresh}
+            />
+          </Suspense>
         </Container>
       ) : (
         <GridContainer className={cx(Grid, Center)}>
diff --git a/src/components/search/SearchListItem.tsx b/src/components/search/SearchListItem.tsx
index 19d21ebf..9b5a5f62 100644
--- a/src/components/search/SearchListItem.tsx
+++ b/src/components/search/SearchListItem.tsx
@@ -4,7 +4,7 @@ import { Align, Between } from '@/styles/layout';
 import { styled } from 'styled-system/jsx';
 import { cx } from 'styled-system/css';
 import { useSetHistory } from '@/hooks/search/useSetHistory';
-import { memo, lazy, useState } from 'react';
+import { memo, lazy, useState, Suspense } from 'react';
 
 const SearchMore = lazy(() => import('@/components/search/SearchMore'));
 const SearchMoreList = lazy(() => import('@/components/search/SearchMoreList'));
@@ -40,9 +40,15 @@ const SearchListItem = memo(({ users, search }: SearchList) => {
           </Container>
         ))}
       {users.length == 5 && !loadMore && (
-        <SearchMore onClick={handleSearchMore({ keyword: search })} />
+        <Suspense>
+          <SearchMore onClick={handleSearchMore({ keyword: search })} />
+        </Suspense>
+      )}
+      {loadMore && (
+        <Suspense>
+          <SearchMoreList search={search} />
+        </Suspense>
       )}
-      {loadMore && <SearchMoreList search={search} />}
     </>
   );
 });
diff --git a/src/components/support/CustomerCenter.tsx b/src/components/support/CustomerCenter.tsx
index ebf81b74..4ea625f5 100644
--- a/src/components/support/CustomerCenter.tsx
+++ b/src/components/support/CustomerCenter.tsx
@@ -1,4 +1,4 @@
-import { lazy } from 'react';
+import { lazy, Suspense } from 'react';
 import Taps from '@/components/common/Taps';
 import SEOMeta from '@/components/common/SEOMeta';
 import SEO_DATA from '@/constants/SEOData';
@@ -20,7 +20,8 @@ const CustomerCenter = () => {
         selectedTab={seletedTap}
         handleButtonClick={handleSelectTap}
       />
-      {seletedTap === taps[0] ? <Notice /> : <FAQ />}
+
+      <Suspense>{seletedTap === taps[0] ? <Notice /> : <FAQ />}</Suspense>
     </>
   );
 };
diff --git a/src/components/support/FAQ.tsx b/src/components/support/FAQ.tsx
index 388eacb5..40ee94cd 100644
--- a/src/components/support/FAQ.tsx
+++ b/src/components/support/FAQ.tsx
@@ -1,4 +1,4 @@
-import { lazy } from 'react';
+import { Suspense, lazy } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import SearchBar from '@/components/search/SearchBar';
 import { getSupportList } from '@/api/support';
@@ -44,10 +44,12 @@ const FAQ = () => {
         FAQList.filter((item: FAQData) =>
           search ? item.title.includes(search) : item
         ).map((item: FAQData) => (
-          <FoldableCard
-            key={item.postId}
-            data={item}
-          />
+          <Suspense>
+            <FoldableCard
+              key={item.postId}
+              data={item}
+            />
+          </Suspense>
         ))}
     </Continer>
   );
diff --git a/src/hooks/profile/useGetCheckFollowing.ts b/src/hooks/profile/useGetCheckFollowing.ts
index 0153c43a..83386f90 100644
--- a/src/hooks/profile/useGetCheckFollowing.ts
+++ b/src/hooks/profile/useGetCheckFollowing.ts
@@ -1,7 +1,10 @@
 import { checkFollowing } from '@/api/follow';
 import { useEffect, useState } from 'react';
 
-const useGetCheckFollowing = (ProfileId: string | undefined) => {
+const useGetCheckFollowing = (
+  ProfileId: string | undefined,
+  signedIn: string | undefined
+) => {
   const [isFollowing, setIsFollowing] = useState(true);
 
   const getCheckFollowing = async () => {
@@ -10,7 +13,7 @@ const useGetCheckFollowing = (ProfileId: string | undefined) => {
   };
 
   useEffect(() => {
-    getCheckFollowing();
+    signedIn && getCheckFollowing();
   }, [isFollowing]);
 
   return { isFollowing, getCheckFollowing };
diff --git a/src/pages/Page-Coffee.tsx b/src/pages/Page-Coffee.tsx
index 6714880e..80fea093 100644
--- a/src/pages/Page-Coffee.tsx
+++ b/src/pages/Page-Coffee.tsx
@@ -1,4 +1,4 @@
-import { lazy, useRef } from 'react';
+import { Suspense, lazy, useRef } from 'react';
 import MyCalendar from '@/components/coffee/MyCalendar';
 import MyCoffeeSum from '@/components/coffee/MyCoffeeSum';
 import SEOMeta from '@/components/common/SEOMeta';
@@ -20,8 +20,16 @@ const Coffee = () => {
       <MyCoffeeSum signedIn={signedIn} />
       <MyCalendar signedIn={signedIn} />
       <Target ref={targetRef} />
-      {!signedIn && <LogInCTA />}
-      {!signedIn && <ScrollInducer targetRef={targetRef} />}
+      {!signedIn && (
+        <Suspense>
+          <LogInCTA />
+        </Suspense>
+      )}
+      {!signedIn && (
+        <Suspense>
+          <ScrollInducer targetRef={targetRef} />
+        </Suspense>
+      )}
     </>
   );
 };
diff --git a/src/pages/Page-Notification.tsx b/src/pages/Page-Notification.tsx
index 21650c30..de4a8e90 100644
--- a/src/pages/Page-Notification.tsx
+++ b/src/pages/Page-Notification.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useId } from 'react';
+import React, { Suspense, useEffect, useId } from 'react';
 import { useQuery } from '@tanstack/react-query';
 
 import CTA from '@/components/common/CTA';
@@ -63,7 +63,11 @@ const Notification = () => {
             <CTA text={CTA_TEXTS.emptyNotification} />
           </div>
         )}
-        {!signedIn && <SignInCTA location="notice" />}
+        {!signedIn && (
+          <Suspense>
+            <SignInCTA location="notice" />
+          </Suspense>
+        )}
       </Container>
     </>
   );
diff --git a/src/pages/Page-Post.tsx b/src/pages/Page-Post.tsx
index 8da4f2c4..17f36600 100644
--- a/src/pages/Page-Post.tsx
+++ b/src/pages/Page-Post.tsx
@@ -1,4 +1,4 @@
-import { lazy } from 'react';
+import { Suspense, lazy } from 'react';
 import { useParams } from 'react-router-dom';
 import { useComposeHeader } from '@/hooks/useComposeHeader';
 
@@ -45,14 +45,24 @@ const Post = () => {
   return (
     <>
       <SEOMeta pageData={metaData()} />
-      {register && <PostRegister />}
+      {register && (
+        <Suspense>
+          <PostRegister />
+        </Suspense>
+      )}
       {update && !register && (
-        <PostRegister
-          update
-          postid={postId}
-        />
+        <Suspense>
+          <PostRegister
+            update
+            postid={postId}
+          />
+        </Suspense>
+      )}
+      {!update && !register && postId && (
+        <Suspense>
+          <PostDetail postNum={postId} />
+        </Suspense>
       )}
-      {!update && !register && postId && <PostDetail postNum={postId} />}
     </>
   );
 };
diff --git a/src/pages/Page-Posts.tsx b/src/pages/Page-Posts.tsx
index 5cfe7551..bf5e248b 100644
--- a/src/pages/Page-Posts.tsx
+++ b/src/pages/Page-Posts.tsx
@@ -1,4 +1,4 @@
-import { useState, lazy } from 'react';
+import { useState, lazy, Suspense } from 'react';
 import PostTabs from '@/components/posts/PostsTabs';
 import { useComposeHeader } from '@/hooks/useComposeHeader';
 import { TABS_TEXTS } from '@/constants/texts';
@@ -21,8 +21,16 @@ export const Posts = () => {
       />
       <div className={Divider} />
 
-      {postsTab === TABS_TEXTS.trend[0] && <PostsTrend />}
-      {postsTab === TABS_TEXTS.following[0] && <PostsFollowing />}
+      {postsTab === TABS_TEXTS.trend[0] && (
+        <Suspense>
+          <PostsTrend />
+        </Suspense>
+      )}
+      {postsTab === TABS_TEXTS.following[0] && (
+        <Suspense>
+          <PostsFollowing />
+        </Suspense>
+      )}
     </>
   );
 };
diff --git a/src/pages/Page-Profile.tsx b/src/pages/Page-Profile.tsx
index 735ea657..e8017555 100644
--- a/src/pages/Page-Profile.tsx
+++ b/src/pages/Page-Profile.tsx
@@ -1,4 +1,4 @@
-import { lazy } from 'react';
+import { Suspense, lazy } from 'react';
 import { useRecoilValue } from 'recoil';
 import { useParams } from 'react-router-dom';
 
@@ -35,14 +35,6 @@ const Profile = () => {
     goToSignIn();
   };
 
-  const AnonymousModalCTA = isModal && !userId && (
-    <ModalCTA
-      actionText={signIn2}
-      text={signIn.text}
-      fn={handleActions}
-    />
-  );
-
   const pageData = {
     ...SEO_DATA.profile,
     pageUrl: `${SEO_DATA.profile.pageUrl}/${profileId}`
@@ -53,14 +45,26 @@ const Profile = () => {
       <SEOMeta pageData={pageData} />
       {!nonMembers ? (
         <>
-          {AnonymousModalCTA}
-          <MemberProfile
-            userId={userId}
-            profileId={profileId}
-          />
+          {isModal && !userId && (
+            <Suspense>
+              <ModalCTA
+                actionText={signIn2}
+                text={signIn.text}
+                fn={handleActions}
+              />
+            </Suspense>
+          )}
+          <Suspense>
+            <MemberProfile
+              userId={userId}
+              profileId={profileId}
+            />
+          </Suspense>
         </>
       ) : (
-        <AnonymousUserCard />
+        <Suspense>
+          <AnonymousUserCard />
+        </Suspense>
       )}
     </>
   );
diff --git a/src/pages/Page-Start.tsx b/src/pages/Page-Start.tsx
index 4296b7f1..b9609af3 100644
--- a/src/pages/Page-Start.tsx
+++ b/src/pages/Page-Start.tsx
@@ -1,4 +1,4 @@
-import { useEffect, lazy } from 'react';
+import { useEffect, lazy, Suspense } from 'react';
 import { useParams } from 'react-router-dom';
 import { useNavigateTo } from '@/hooks/useNavigateTo';
 import { useShowFooter } from '@/hooks/useShowFooter';
@@ -33,9 +33,21 @@ const Start = () => {
     <>
       <SEOMeta pageData={id === '1' ? SEO_DATA.start : SEO_DATA.signUp} />
       <div>
-        {!accessToken && id === '1' && <SignIn />}
-        {id === '2' && <InitialForm />}
-        {id === '3' && <SelectFavBrand />}
+        {!accessToken && id === '1' && (
+          <Suspense>
+            <SignIn />
+          </Suspense>
+        )}
+        {id === '2' && (
+          <Suspense>
+            <InitialForm />
+          </Suspense>
+        )}
+        {id === '3' && (
+          <Suspense>
+            <SelectFavBrand />
+          </Suspense>
+        )}
       </div>
     </>
   );
diff --git a/src/pages/Page-Support.tsx b/src/pages/Page-Support.tsx
index f8f168d0..c4056bd1 100644
--- a/src/pages/Page-Support.tsx
+++ b/src/pages/Page-Support.tsx
@@ -1,4 +1,4 @@
-import { lazy } from 'react';
+import { Suspense, lazy } from 'react';
 import { useParams } from 'react-router-dom';
 import { useComposeHeader } from '@/hooks/useComposeHeader';
 import { SUPPORT_TEXTS } from '@/constants/support';
@@ -39,10 +39,26 @@ const Support = () => {
 
   return (
     <>
-      {customer && <CustomerCenter />}
-      {notice && <NoticeDetail />}
-      {tos && <TOS />}
-      {privacy && <PrivacyPolicy />}
+      {customer && (
+        <Suspense>
+          <CustomerCenter />
+        </Suspense>
+      )}
+      {notice && (
+        <Suspense>
+          <NoticeDetail />
+        </Suspense>
+      )}
+      {tos && (
+        <Suspense>
+          <TOS />
+        </Suspense>
+      )}
+      {privacy && (
+        <Suspense>
+          <PrivacyPolicy />
+        </Suspense>
+      )}
     </>
   );
 };