diff --git a/public/icon/l/icon-left2.svg b/public/icon/l/icon-left2.svg
new file mode 100644
index 0000000..1e8bc18
--- /dev/null
+++ b/public/icon/l/icon-left2.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M15.5657 18.5657C15.2533 18.8781 14.7468 18.8781 14.4344 18.5657L8.4344 12.5657C8.1219 12.2533 8.1219 11.7468 8.4344 11.4344L14.4344 5.4344C14.7468 5.1219 15.2533 5.1219 15.5657 5.4344C15.8782 5.7468 15.8782 6.2533 15.5657 6.5657L10.1314 12L15.5657 17.4344C15.8782 17.7468 15.8782 18.2533 15.5657 18.5657Z" fill="#BABCBD"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/Lesson/Popular/Popular.module.scss b/src/components/Lesson/Popular/Popular.module.scss
index b3108a3..5998eed 100644
--- a/src/components/Lesson/Popular/Popular.module.scss
+++ b/src/components/Lesson/Popular/Popular.module.scss
@@ -13,6 +13,7 @@
   padding: 20px 20px 32px;
   display: flex;
   flex-direction: column;
+  position: relative;
   gap: 11px;
 
   .titleContainer {
@@ -71,6 +72,28 @@
   }
 }
 
+.navButtonLeft {
+  position: absolute;
+  border: none;
+  outline: none;
+  background: none;
+  cursor: pointer;
+  z-index: 10;
+  top: 40%;
+  left: 0;
+}
+
+.navButtonRight {
+  position: absolute;
+  border: none;
+  outline: none;
+  background: none;
+  cursor: pointer;
+  z-index: 10;
+  top: 40%;
+  right: 0;
+}
+
 .midContainer {
   height: 10px;
   background-color: $gray10;
diff --git a/src/components/Lesson/Popular/index.tsx b/src/components/Lesson/Popular/index.tsx
index 94fa6b3..7112e6c 100644
--- a/src/components/Lesson/Popular/index.tsx
+++ b/src/components/Lesson/Popular/index.tsx
@@ -23,7 +23,9 @@ import SportsImageComponent from '@/components/Asset/SportsImage';
 import { SPORTSIMAGES } from '@/constants/asset';
 import { formatCurrency } from '@/utils/formatCurrency';
 import { Swiper, SwiperSlide } from 'swiper/react';
+import { Navigation } from 'swiper/modules';
 import 'swiper/css';
+import 'swiper/css/navigation';
 import useOutsideClick from '@/hooks/useOutsideClick';
 import { toggleState } from '@/states/toggleState';
 import PopularSchedule from '@/components/Schedule/PopularSchedule';
@@ -235,22 +237,32 @@ export default function Popular() {
               {`인기 시설 TOP ${topFacilities.length}`}
             </div>
             <div className={styles.bestContainer}>
+              <div className={styles.navigationButtons}>
+                <button className={`${styles.navButtonLeft} custom-prev`}>
+                  <IconComponent name="left2" size="l" />
+                </button>
+              </div>
               <Swiper
                 spaceBetween={12}
                 loop={true}
                 pagination={{ clickable: true }}
+                navigation={{
+                  nextEl: '.custom-next',
+                  prevEl: '.custom-prev',
+                }}
+                modules={[Navigation]}
                 breakpoints={{
                   0: {
                     slidesPerView: 2,
                   },
-                  390: {
+                  430: {
                     slidesPerView: 2.2,
                   },
-                  430: {
+                  600: {
                     slidesPerView: 3,
                   },
                   1024: {
-                    slidesPerView: 3.5,
+                    slidesPerView: 3.2,
                   },
                 }}
               >
@@ -287,6 +299,11 @@ export default function Popular() {
                   </SwiperSlide>
                 ))}
               </Swiper>
+              <div className={styles.navigationButtons}>
+                <button className={`${styles.navButtonRight} custom-next`}>
+                  <IconComponent name="right" size="l" />
+                </button>
+              </div>
             </div>
           </div>
           <div className={styles.midContainer} />
diff --git a/src/components/MapHome/MapContainer/index.tsx b/src/components/MapHome/MapContainer/index.tsx
index 0b9857b..500cc92 100644
--- a/src/components/MapHome/MapContainer/index.tsx
+++ b/src/components/MapHome/MapContainer/index.tsx
@@ -384,7 +384,11 @@ export default function MapContainer() {
       </div>
       <div
         id="map"
-        style={{ width: '100%', height: '100vh', position: 'relative' }}
+        style={{
+          width: '100%',
+          height: 'calc(100vh - 121px)',
+          position: 'relative',
+        }}
       ></div>
       {indicatorMode === 'sports' ? (
         <PopularSports
diff --git a/src/constants/asset.tsx b/src/constants/asset.tsx
index ef0dfae..9c95c30 100644
--- a/src/constants/asset.tsx
+++ b/src/constants/asset.tsx
@@ -60,6 +60,9 @@ export const ICONS = {
     m: '/icon/m/icon-left.svg',
     s: '/icon/s/icon-left.svg',
   },
+  left2: {
+    l: '/icon/l/icon-left2.svg',
+  },
   menu: {
     l: '/icon/l/icon-menu.svg',
     m: '/icon/m/icon-menu.svg',