diff --git a/src/components/common/store/StoreList.jsx b/src/components/common/store/StoreList.jsx
index c86f794..c8a4761 100644
--- a/src/components/common/store/StoreList.jsx
+++ b/src/components/common/store/StoreList.jsx
@@ -142,7 +142,12 @@ const StoreList = () => {
         setOrderByRating(null);
     };
 
-    if (isLoading) return <Loading />;
+    if (isLoading)
+        return (
+            <LoadingContainer>
+                <Loading />
+            </LoadingContainer>
+        );
     return (
         <StoreListLayout>
             <FilteringContentsContainer>
@@ -295,3 +300,9 @@ const Alert = styled.h3`
     font-size: 15px;
     color: ${Orange};
 `;
+
+const LoadingContainer = styled.div`
+    @media screen and (max-width: 450px) {
+        margin-right: 90px;
+    }
+`;
diff --git a/src/components/main/CategoryContainer.jsx b/src/components/main/CategoryAndMap.jsx
similarity index 75%
rename from src/components/main/CategoryContainer.jsx
rename to src/components/main/CategoryAndMap.jsx
index 9999df4..fe17c29 100644
--- a/src/components/main/CategoryContainer.jsx
+++ b/src/components/main/CategoryAndMap.jsx
@@ -1,27 +1,30 @@
 import styled from 'styled-components';
-import { Category } from '../common';
+import { Category, MyMap } from '../common';
 import { Grey } from '../../color';
 import { ReactComponent as CategoryIcon } from '../../assets/Icon/main/CategoryIcon.svg';
 
-const CategoryContainer = () => {
+const CategoryAndMap = () => {
     return (
-        <CategoryLayout>
+        <CategoryAndMapLayout>
             <label>
                 <CategoryIcon />
                 <h3>카테고리로 검색하기</h3>
             </label>
-            <CategoryBox>
+            <CategoryAndMapBox>
                 <div>
                     <Category />
                 </div>
-            </CategoryBox>
-        </CategoryLayout>
+                <div>
+                    <MyMap />
+                </div>
+            </CategoryAndMapBox>
+        </CategoryAndMapLayout>
     );
 };
 
-export default CategoryContainer;
+export default CategoryAndMap;
 
-const CategoryLayout = styled.div`
+const CategoryAndMapLayout = styled.div`
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -41,11 +44,11 @@ const CategoryLayout = styled.div`
     }
 `;
 
-const CategoryBox = styled.div`
+const CategoryAndMapBox = styled.div`
     display: flex;
     justify-content: center;
     flex-direction: row;
-    gap: 10px;
+    gap: 50px;
 
     & > div {
         width: 50%;
diff --git a/src/components/main/MapContainer.jsx b/src/components/main/MapContainer.jsx
deleted file mode 100644
index 169bd4a..0000000
--- a/src/components/main/MapContainer.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { MyMap } from '../common';
-import styled from 'styled-components';
-import { Grey } from '../../color';
-
-const MapContainer = () => {
-    return (
-        <MapBox>
-            <MyMap />
-        </MapBox>
-    );
-};
-
-export default MapContainer;
-
-const MapBox = styled.div`
-    height: 300px;
-    margin-top: 80px;
-    display: flex;
-    justify-content: center;
-    flex-direction: row;
-    gap: 10px;
-    border-radius: 10px;
-    width: 40%;
-    height: 300px;
-    overflow: scroll;
-    border-radius: 20px;
-    box-shadow: 2px 2px 2px ${Grey};
-
-    @media screen and (max-width: 1024px) {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        width: 90%;
-    }
-`;
diff --git a/src/components/main/index.js b/src/components/main/index.js
index 371f18f..6a26c43 100644
--- a/src/components/main/index.js
+++ b/src/components/main/index.js
@@ -1,5 +1,6 @@
 import TopRecommendations from './TopRecommendations';
-import CategoryContainer from './CategoryContainer';
+import CategoryContainer from './CategoryAndMap';
 import SearchKeyword from './SearchKeyword';
-import MapContainer from './MapContainer';
-export { TopRecommendations, CategoryContainer, SearchKeyword, MapContainer };
+import CategoryAndMap from './CategoryAndMap';
+
+export { TopRecommendations, CategoryContainer, SearchKeyword, CategoryAndMap };
diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx
index 43b56be..bb49ab6 100644
--- a/src/pages/MainPage.jsx
+++ b/src/pages/MainPage.jsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { ReactComponent as Banner } from '../assets/Icon/banner/Banner.svg';
 import { useIsFetch, useSaveBookmarkId } from '../store';
-import { CategoryContainer, SearchKeyword, TopRecommendations, MapContainer } from '../components/main';
+import { CategoryAndMap, SearchKeyword, TopRecommendations } from '../components/main';
 import { SearchBar, Button, Footer } from '../components/common';
 import { getBookmarksStores } from '../apis/api/bookmarks';
 
@@ -95,8 +95,7 @@ const MainPage = () => {
                 <SearchKeyword />
                 <Button color="green" text="식당 찾아 보기" visible="true" onClickHandler={buttonClickHandler} />
                 <TopRecommendations />
-                <CategoryContainer />
-                <MapContainer />
+                <CategoryAndMap />
             </MainPageLayout>
             <Footer />
         </>
@@ -125,4 +124,8 @@ const SearchBarContainer = styled.div`
     @media screen and (max-width: 1024px) {
         width: 80%;
     }
+
+    @media screen and (max-width: 500px) {
+        display: none;
+    }
 `;
diff --git a/src/pages/index.js b/src/pages/index.js
index a6d036d..e4c95bb 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -4,5 +4,4 @@ import StoreDetailPage from './StoreDetailPage';
 import SignUpPage from './SignUpPage';
 import LoginPage from './LoginPage';
 import NotFoundPage from './NotFoundPage';
-import MapContainer from '../components/main/MapContainer';
-export { MainPage, WebMap, SignUpPage, LoginPage, StoreDetailPage, NotFoundPage, MapContainer };
+export { MainPage, WebMap, SignUpPage, LoginPage, StoreDetailPage, NotFoundPage };