diff --git a/package-lock.json b/package-lock.json
index b121a2c..50b85db 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "react-router-dom": "6.3.0",
         "react-scripts": "5.0.1",
         "sass": "1.49.11",
+        "swiper": "^9.1.0",
         "web-vitals": "2.1.4"
       },
       "devDependencies": {
@@ -21294,6 +21295,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ssr-window": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
+      "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
+    },
     "node_modules/stable": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
@@ -22057,6 +22063,27 @@
         "boolbase": "~1.0.0"
       }
     },
+    "node_modules/swiper": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-9.1.0.tgz",
+      "integrity": "sha512-Ck8CywwfUghkbUAHbxTAWyeUAcNrIDNJ6EnKFBGGcHDjeqbh0Jq08RbmD5fMu1a0oOv1eIkUGVkqNJy/asm+yA==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "dependencies": {
+        "ssr-window": "^4.0.2"
+      },
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -39884,6 +39911,11 @@
         "tweetnacl": "~0.14.0"
       }
     },
+    "ssr-window": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
+      "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
+    },
     "stable": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
@@ -40512,6 +40544,14 @@
         }
       }
     },
+    "swiper": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-9.1.0.tgz",
+      "integrity": "sha512-Ck8CywwfUghkbUAHbxTAWyeUAcNrIDNJ6EnKFBGGcHDjeqbh0Jq08RbmD5fMu1a0oOv1eIkUGVkqNJy/asm+yA==",
+      "requires": {
+        "ssr-window": "^4.0.2"
+      }
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
diff --git a/package.json b/package.json
index 847d51b..0439c52 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "react-router-dom": "6.3.0",
     "react-scripts": "5.0.1",
     "sass": "1.49.11",
+    "swiper": "9.1.0",
     "web-vitals": "2.1.4"
   },
   "scripts": {
diff --git a/src/assets/stylesheets/application.scss b/src/assets/stylesheets/application.scss
index 1cfc413..20d428b 100644
--- a/src/assets/stylesheets/application.scss
+++ b/src/assets/stylesheets/application.scss
@@ -18,7 +18,6 @@
 }
 
 html {
-  width: 100%;
   height: 100%;
   margin: 0 auto;
 
@@ -34,3 +33,19 @@ html {
 body {
   height: 100%;
 }
+
+.survey-swiper {
+  width: 820px;
+  height: 100%;
+
+  .swiper-pagination-bullet {
+    width: 0.5rem;
+
+    opacity: 0.2;
+    background-color: #fff !important;
+  }
+
+  .swiper-pagination-bullet-active {
+    opacity: 1;
+  }
+}
diff --git a/src/components/Survey/index.tsx b/src/components/Survey/index.tsx
index d659237..b88f4bf 100644
--- a/src/components/Survey/index.tsx
+++ b/src/components/Survey/index.tsx
@@ -6,11 +6,11 @@ type SurveyProps = {
 
 function Survey({ title, description, coverImageUrl }: SurveyProps) {
   return (
-    <>
-      <img className="my-4 h-full max-h-80 w-full max-w-full" src={coverImageUrl} alt="cover" />
+    <div>
+      <img className="h-80 w-full" src={coverImageUrl} alt="cover" />
       <p className="text-white"> {title}</p>
       <p className="text-white opacity-60"> {description}</p>
-    </>
+    </div>
   );
 }
 
diff --git a/src/components/SurveyList/index.tsx b/src/components/SurveyList/index.tsx
index d005467..c2db806 100644
--- a/src/components/SurveyList/index.tsx
+++ b/src/components/SurveyList/index.tsx
@@ -1,21 +1,32 @@
-import { useState } from 'react';
+import { Pagination } from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+// Styles
+// import 'swiper/swiper.min.css';
+import 'swiper/swiper-bundle.min.css';
 
-import Button from 'components/Button';
 import SurveyComponent from 'components/Survey';
 import { Survey } from 'types/Survey';
 
 type SurveyListProps = { surveys: Survey[] };
 
 function SurveyList({ surveys }: SurveyListProps) {
-  const [index, setIndex] = useState(0);
-
   return (
-    <>
-      <SurveyComponent {...surveys[index]} />
-
-      {/* TODO: For testing */}
-      <Button type="button" onButtonClick={() => setIndex(index + 1)} text="Next" />
-    </>
+    <Swiper
+      className="survey-swiper"
+      modules={[Pagination]}
+      speed={800}
+      pagination={{ clickable: true, dynamicBullets: true }}
+      slidesPerView={1}
+    >
+      {surveys.map((survey) => {
+        return (
+          <SwiperSlide key={survey.id}>
+            <SurveyComponent {...survey} />
+          </SwiperSlide>
+        );
+      })}
+    </Swiper>
   );
 }
 
diff --git a/src/screens/Home/index.tsx b/src/screens/Home/index.tsx
index 465aaf6..4654366 100644
--- a/src/screens/Home/index.tsx
+++ b/src/screens/Home/index.tsx
@@ -40,18 +40,16 @@ const HomeScreen = (): JSX.Element => {
   }
 
   return (
-    <>
-      {surveys.length > 0 && (
-        <section>
-          <div className="my-8 text-white" data-test-id="app-main-heading">
-            <p>{new Date().toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })}</p>
-            <p className="text-3xl font-extrabold">Today</p>
-          </div>
-
-          <SurveyList surveys={surveys} />
-        </section>
-      )}
-    </>
+    <section>
+      <div className="my-8 text-white" data-test-id="app-main-heading">
+        <p>{new Date().toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })}</p>
+        <p className="text-3xl font-extrabold">Today</p>
+      </div>
+
+      <section className="h-full">
+        <SurveyList surveys={surveys} />
+      </section>
+    </section>
   );
 };