diff --git a/src/App.tsx b/src/App.tsx
index 2859b18..a76fab7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -10,7 +10,7 @@ const App = (): JSX.Element => {
 
   return (
     <div>
-      <main className="m-0 flex h-screen flex-col items-center justify-center p-0">{appRoutes}</main>
+      <main className="m-0 flex h-screen w-full flex-col items-center justify-center p-0">{appRoutes}</main>
     </div>
   );
 };
diff --git a/src/assets/images/arrow.svg b/src/assets/images/arrow.svg
new file mode 100644
index 0000000..411752c
--- /dev/null
+++ b/src/assets/images/arrow.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="21" viewBox="0 0 12 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.46286 20.0827L11.7078 10.9458C12.0974 10.5612 12.0974 9.93981 11.7078 9.5542L2.46286 0.417333C1.90053 -0.139111 0.985625 -0.139111 0.422297 0.417333C-0.140034 0.973776 -0.140034 1.87687 0.422297 2.43332L8.33087 10.2505L0.422297 18.0657C-0.140034 18.6231 -0.140034 19.5262 0.422297 20.0827C0.985625 20.6391 1.90053 20.6391 2.46286 20.0827Z" fill="#15151A"/>
+</svg>
diff --git a/src/assets/stylesheets/application.scss b/src/assets/stylesheets/application.scss
index 20d428b..8fdae55 100644
--- a/src/assets/stylesheets/application.scss
+++ b/src/assets/stylesheets/application.scss
@@ -35,9 +35,6 @@ body {
 }
 
 .survey-swiper {
-  width: 820px;
-  height: 100%;
-
   .swiper-pagination-bullet {
     width: 0.5rem;
 
@@ -48,4 +45,20 @@ body {
   .swiper-pagination-bullet-active {
     opacity: 1;
   }
+
+  &.swiper-pagination {
+    bottom: 2rem !important;
+  }
+}
+
+.arrow-button {
+  width: 56px;
+  height: 56px;
+
+  border-radius: 9999px;
+
+  background-color: #fff;
+  background-image: url('../images/arrow.svg');
+  background-repeat: no-repeat;
+  background-position: center;
 }
diff --git a/src/components/Survey/index.tsx b/src/components/Survey/index.tsx
index b88f4bf..0b4e44c 100644
--- a/src/components/Survey/index.tsx
+++ b/src/components/Survey/index.tsx
@@ -7,9 +7,17 @@ type SurveyProps = {
 function Survey({ title, description, coverImageUrl }: SurveyProps) {
   return (
     <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>
+      <img className="my-4 max-h-80 w-full rounded-xl" src={coverImageUrl} alt="cover" />
+      <div className="mt-8 flex items-center justify-between">
+        <div>
+          <p className="text-white"> {title}</p>
+          <p className="text-white opacity-60"> {description}</p>
+        </div>
+        <div>
+          {/* TODO: Convert to Link for Survey Detail page */}
+          <button className="arrow-button"></button>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/src/components/SurveyList/index.tsx b/src/components/SurveyList/index.tsx
index c2db806..d264c03 100644
--- a/src/components/SurveyList/index.tsx
+++ b/src/components/SurveyList/index.tsx
@@ -1,8 +1,6 @@
 import { Pagination } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/react';
 
-// Styles
-// import 'swiper/swiper.min.css';
 import 'swiper/swiper-bundle.min.css';
 
 import SurveyComponent from 'components/Survey';
@@ -12,21 +10,27 @@ type SurveyListProps = { surveys: Survey[] };
 
 function SurveyList({ surveys }: SurveyListProps) {
   return (
-    <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>
+    <>
+      <Swiper
+        className="survey-swiper"
+        modules={[Pagination]}
+        speed={800}
+        spaceBetween={100}
+        pagination={{ el: '.swiper-pagination', clickable: true, dynamicBullets: true }}
+        slidesPerView={1}
+      >
+        {surveys.map((survey) => {
+          return (
+            <>
+              <SwiperSlide key={survey.id}>
+                <SurveyComponent {...survey} />
+              </SwiperSlide>
+            </>
+          );
+        })}
+      </Swiper>
+      <div className="survey-swiper swiper-pagination"></div>
+    </>
   );
 }
 
diff --git a/src/screens/Home/index.test.tsx b/src/screens/Home/index.test.tsx
index 436904d..bc4c505 100644
--- a/src/screens/Home/index.test.tsx
+++ b/src/screens/Home/index.test.tsx
@@ -6,9 +6,9 @@ describe('HomeScreen', () => {
   test('renders learn react link', () => {
     render(<HomeScreen />);
 
-    const mainHeadingElement = screen.getByTestId('app-main-heading');
+    const surveyLoadingElement = screen.getByTestId('loading-surveys');
 
-    expect(mainHeadingElement).toBeInTheDocument();
-    expect(mainHeadingElement).toHaveTextContent('Home Screen');
+    expect(surveyLoadingElement).toBeInTheDocument();
+    expect(surveyLoadingElement).toHaveTextContent('Loading Surveys');
   });
 });
diff --git a/src/screens/Home/index.tsx b/src/screens/Home/index.tsx
index 4654366..486abde 100644
--- a/src/screens/Home/index.tsx
+++ b/src/screens/Home/index.tsx
@@ -36,7 +36,7 @@ const HomeScreen = (): JSX.Element => {
   }, []);
 
   if (!loaded) {
-    return <h3>Loading Surveys</h3>;
+    return <h3 data-test-id="loading-surveys">Loading Surveys</h3>;
   }
 
   return (
@@ -46,9 +46,9 @@ const HomeScreen = (): JSX.Element => {
         <p className="text-3xl font-extrabold">Today</p>
       </div>
 
-      <section className="h-full">
+      <div className="w-screen max-w-3xl">
         <SurveyList surveys={surveys} />
-      </section>
+      </div>
     </section>
   );
 };