diff --git a/package-lock.json b/package-lock.json
index 9677131..721a875 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,8 @@
                 "next": "14.1.3",
                 "react": "^18",
                 "react-dom": "^18.2.0",
-                "react-icons": "^5.0.1"
+                "react-icons": "^5.0.1",
+                "swiper": "^11.1.1"
             },
             "devDependencies": {
                 "@svgr/webpack": "^8.1.0",
@@ -7147,6 +7148,24 @@
                 "node": ">= 10"
             }
         },
+        "node_modules/swiper": {
+            "version": "11.1.1",
+            "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.1.tgz",
+            "integrity": "sha512-jGmEA/fNz1lACIcY4/40ggm1Gcyv+EUivmgV/Jd2WFPsEJhbWXnRAwzZR8OPjkBLtDxmzcoYG/iiAMWfRs0YKQ==",
+            "funding": [
+                {
+                    "type": "patreon",
+                    "url": "https://www.patreon.com/swiperjs"
+                },
+                {
+                    "type": "open_collective",
+                    "url": "http://opencollective.com/swiper"
+                }
+            ],
+            "engines": {
+                "node": ">= 4.7.0"
+            }
+        },
         "node_modules/tailwindcss": {
             "version": "3.4.1",
             "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz",
diff --git a/package.json b/package.json
index 1b52702..3ecdba9 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,8 @@
         "next": "14.1.3",
         "react": "^18",
         "react-dom": "^18.2.0",
-        "react-icons": "^5.0.1"
+        "react-icons": "^5.0.1",
+        "swiper": "^11.1.1"
     },
     "devDependencies": {
         "@svgr/webpack": "^8.1.0",
diff --git a/src/components/home/activity/Activity.tsx b/src/components/home/activity/Activity.tsx
index d7f8903..9ac1d29 100644
--- a/src/components/home/activity/Activity.tsx
+++ b/src/components/home/activity/Activity.tsx
@@ -1,5 +1,13 @@
+'use client';
 import HomeTitle from '../title/HomeTitle';
 
+import { Navigation, Autoplay } from 'swiper/modules';
+
+import 'swiper/css';
+import 'swiper/css/navigation';
+
+import { Swiper, SwiperSlide } from 'swiper/react';
+
 const ActivityCard: React.FC<Activity> = ({ icon, title, description }) => {
   return (
     <div className="flex-grow">
@@ -89,10 +97,23 @@ const Activity = () => {
               <img className="w-[352px] h-[198px] flex-shrink-0 bg-red-900" />
               <img className="w-[352px] h-[198px] flex-shrink-0 bg-red-900" />
             </div>
-
             {/* 스크롤되는 부분 */}
 
-            {/* 스크롤되는 부분 */}
+            <Swiper
+              // navigation={true}
+              autoplay={{ delay: 2000 }}
+              modules={[Navigation, Autoplay]}
+              className="tablet:hidden flex w-full"
+              loop
+            >
+              {[1, 2, 3].map((item, index) => {
+                return (
+                  <SwiperSlide key={index}>
+                    <img className="w-[352px] h-[198px] flex-shrink-0 bg-red-900" />
+                  </SwiperSlide>
+                );
+              })}
+            </Swiper>
           </div>
           {/* 내용 */}
         </section>
diff --git a/src/components/home/storiesFrom/StoriesFrom.tsx b/src/components/home/storiesFrom/StoriesFrom.tsx
index 10e208f..1ea0479 100644
--- a/src/components/home/storiesFrom/StoriesFrom.tsx
+++ b/src/components/home/storiesFrom/StoriesFrom.tsx
@@ -1,11 +1,32 @@
-const ImageBox: React.FC<{ label: string; img: string }> = ({ label, img }) => {
+'use client';
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+import 'swiper/css';
+import 'swiper/css/navigation';
+
+import { Navigation, Autoplay } from 'swiper/modules';
+
+interface Story {
+  label: string;
+  img: string;
+}
+
+const ImageBox: React.FC<Story> = ({ label, img }) => {
   return (
-    <div className="flex flex-col gap-6">
-      <img className="w-full  bg-red-900 " src="/images/main/story_ex.png" />
-      <div className="H6">사진에 대한 제목이 들어갑니다.</div>
+    <div className="flex flex-col gap-6 w-full">
+      <img className="w-full   bg-red-900 " src="/images/main/story_ex.png" />
+      <div className="H6">{label}</div>
     </div>
   );
 };
+
+const StoryList: Story[] = [
+  { label: '일번', img: '22' },
+  { label: '이번', img: '22' },
+  { label: '삼번', img: '22' },
+  { label: '사번', img: '22' },
+];
+
 const StoriesFrom = () => {
   return (
     <div className="w-full flex justify-center items-center  bg-white ">
@@ -35,9 +56,22 @@ const StoriesFrom = () => {
           </div>
         </div>
 
-        <div className="tablet:hidden flex">
-          <ImageBox label="1" img="" />
-        </div>
+        <Swiper
+          // navigation={true}
+          autoplay={{ delay: 3000 }}
+          modules={[Navigation, Autoplay]}
+          className="tablet:hidden flex w-full"
+          loop
+        >
+          {StoryList.map((item, index) => {
+            return (
+              <SwiperSlide key={index}>
+                <ImageBox label={item.label} img={item.img} />
+              </SwiperSlide>
+            );
+          })}
+        </Swiper>
+
         {/* content */}
       </section>
     </div>
diff --git a/src/components/navigation.tsx b/src/components/navigation.tsx
index f622f2a..c538fb0 100644
--- a/src/components/navigation.tsx
+++ b/src/components/navigation.tsx
@@ -110,7 +110,7 @@ export default function Navigation() {
 
         {/* -- 사이드 바 -- */}
         {isSideBarOpen ? (
-          <div className=" bg-black w-full tablet:px-10 px-4 pt-4 pb-20 rounded-b-lg desktop:hidden">
+          <div className=" bg-mono_900 w-full tablet:px-10 px-4 pt-4 pb-16 rounded-b-lg desktop:hidden">
             <div className="gap-10 flex flex-col ">
               {NavgationList.map((item, index) => {
                 return item.length == 1 ? (
@@ -140,7 +140,7 @@ export default function Navigation() {
       {isModalOpen ? (
         <div
           className={`fixed left-0 top-0 z-0 w-lvw h-lvh mix-blend-multiply  ${
-            isSideBarOpen ? 'bg-slate-200' : ''
+            isSideBarOpen ? ' desktop:bg-transparent bg-mono_200' : ''
           }`}
           onClick={setIsModalClose}
         />
@@ -190,7 +190,7 @@ const NavToggle: React.FC<{ label: NavItem; navList: NavItem[] }> = ({
       )}
 
       {label.isModalShow ? (
-        <div className="absolute px-6 py-4 z-999 bg-mono_900 flex flex-col rounded-lg  gap-3  right-0 top-12">
+        <div className="absolute px-6 py-4 z-999 bg-mono_900 flex flex-col rounded-lg  gap-3  right-0 top-10">
           {navList.map((item, index) => {
             return (
               <NavButton key={index} label={item.label} link={item.link} />