diff --git a/frontend/src/pages/MainPage/MainPage.styles.ts b/frontend/src/pages/MainPage/MainPage.styles.ts
index bb2ff7b32..dfd25d32d 100644
--- a/frontend/src/pages/MainPage/MainPage.styles.ts
+++ b/frontend/src/pages/MainPage/MainPage.styles.ts
@@ -48,3 +48,16 @@ export const FilterWrapper = styled.div`
   justify-content: right;
   margin: 20px 0;
 `;
+
+export const EmptyResult = styled.div`
+  padding: 80px 20px;
+  text-align: center;
+  color: #555;
+  font-size: 1.125rem;
+  line-height: 1.6;
+  white-space: pre-line;
+
+  @media (max-width: 500px) {
+    font-size: 0.95rem;
+  }
+`;
diff --git a/frontend/src/pages/MainPage/MainPage.tsx b/frontend/src/pages/MainPage/MainPage.tsx
index 4c65e2c47..248203484 100644
--- a/frontend/src/pages/MainPage/MainPage.tsx
+++ b/frontend/src/pages/MainPage/MainPage.tsx
@@ -11,6 +11,7 @@ import Banner from '@/pages/MainPage/components/Banner/Banner';
 import { DesktopBannerImageList } from '@/constants/banners';
 import { MobileBannerImageList } from '@/constants/banners';
 import { Club } from '@/types/club';
+import Spinner from '@/components/common/Spinner/Spinner';
 import * as Styled from './MainPage.styles';
 
 const MainPage = () => {
@@ -23,13 +24,12 @@ const MainPage = () => {
   const recruitmentStatus = isFilterActive ? 'OPEN' : 'all';
   const division = 'all';
 
-  const { data: clubs, error } = useGetCardList(
-    keyword,
-    recruitmentStatus,
-    division,
-    selectedCategory,
-  );
-
+  const {
+    data: clubs,
+    error,
+    isLoading,
+  } = useGetCardList(keyword, recruitmentStatus, division, selectedCategory);
+  const isEmpty = !isLoading && (!clubs || clubs.length === 0);
   const hasData = clubs && clubs.length > 0;
 
   const clubList = useMemo(() => {
@@ -54,7 +54,17 @@ const MainPage = () => {
           <StatusRadioButton onChange={setIsFilterActive} />
         </Styled.FilterWrapper>
         <Styled.ContentWrapper>
-          <Styled.CardList>{hasData && clubList}</Styled.CardList>
+          {isLoading ? (
+            <Spinner />
+          ) : isEmpty ? (
+            <Styled.EmptyResult>
+              앗, 조건에 맞는 동아리가 없어요.
+              <br />
+              다른 키워드나 조건으로 다시 시도해보세요!
+            </Styled.EmptyResult>
+          ) : (
+            <Styled.CardList>{clubList}</Styled.CardList>
+          )}
         </Styled.ContentWrapper>
       </Styled.PageContainer>
       <Footer />