diff --git a/src/assets/images/icons/close-btn-white.svg b/src/assets/images/icons/close-btn-white.svg
new file mode 100644
index 0000000..ff633ba
--- /dev/null
+++ b/src/assets/images/icons/close-btn-white.svg
@@ -0,0 +1,14 @@
+<svg width="28" height="30" viewBox="0 0 28 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 29C21.732 29 28 22.732 28 15C28 7.26801 21.732 1 14 1C6.26801 1 0 7.26801 0 15C0 22.732 6.26801 29 14 29Z" fill="#C7C7CC"/>
+<g filter="url(#filter0_b_70_350)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.85518 9.85518C8.38161 10.3287 8.38161 11.0965 8.85518 11.5701L12.2851 15L8.85518 18.4299C8.38161 18.9035 8.38161 19.6713 8.85518 20.1448C9.32874 20.6184 10.0965 20.6184 10.5701 20.1448L14 16.7149L17.4299 20.1448C17.9035 20.6184 18.6713 20.6184 19.1448 20.1448C19.6184 19.6713 19.6184 18.9035 19.1448 18.4299L15.7149 15L19.1448 11.5701C19.6184 11.0965 19.6184 10.3287 19.1448 9.85518C18.6713 9.38161 17.9035 9.38161 17.4299 9.85518L14 13.2851L10.5701 9.85518C10.0965 9.38161 9.32874 9.38161 8.85518 9.85518Z" fill="white" fill-opacity="0.92"/>
+</g>
+<defs>
+<filter id="filter0_b_70_350" x="-18.6828" y="-17.6828" width="65.3656" height="65.3656" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="13.5914"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_70_350"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_70_350" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index fa7b901..ab4b42b 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { RouteObject } from 'react-router-dom';
 
 import DashBoardScreen from 'screens/Dashboard';
+import QuestionScreen from 'screens/Question';
 import SignInScreen from 'screens/SignIn';
 import SurveyScreen from 'screens/Survey';
 
@@ -11,6 +12,12 @@ export const paths = {
   root: '/',
   signIn: '/sign-in',
   survey: '/surveys/:id',
+  question: '/surveys/:id/questions',
+};
+
+export const questionPath = (): string => {
+  const questionPaths = paths.question.split('/');
+  return questionPaths[questionPaths.length - 1];
 };
 
 const routes: RouteObject[] = [
@@ -25,6 +32,10 @@ const routes: RouteObject[] = [
         path: paths.survey,
         element: <SurveyScreen />,
       },
+      {
+        path: paths.question,
+        element: <QuestionScreen />,
+      },
     ],
   },
   {
diff --git a/src/screens/Question/index.test.tsx b/src/screens/Question/index.test.tsx
new file mode 100644
index 0000000..d831dcc
--- /dev/null
+++ b/src/screens/Question/index.test.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import TestWrapper from 'tests/TestWrapper';
+
+import QuestionScreen, { questionScreenTestIds } from '.';
+
+describe('QuestionScreen', () => {
+  const TestComponent = (): JSX.Element => {
+    return (
+      <TestWrapper>
+        <QuestionScreen />
+      </TestWrapper>
+    );
+  };
+
+  it('renders Question screen and its components', () => {
+    render(<TestComponent />);
+
+    const currentIndex = screen.getByTestId(questionScreenTestIds.index);
+    const questionTitle = screen.getByTestId(questionScreenTestIds.title);
+    const closeButton = screen.getByTestId(questionScreenTestIds.closeButton);
+    const nextButton = screen.getByTestId(questionScreenTestIds.nextButton);
+
+    expect(currentIndex).toBeVisible();
+    expect(questionTitle).toBeVisible();
+    expect(closeButton).toBeVisible();
+    expect(nextButton).toBeVisible();
+  });
+});
diff --git a/src/screens/Question/index.tsx b/src/screens/Question/index.tsx
new file mode 100644
index 0000000..489e13f
--- /dev/null
+++ b/src/screens/Question/index.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+
+import { ReactComponent as ArrowRight } from 'assets/images/icons/arrow-right.svg';
+import { ReactComponent as CloseButton } from 'assets/images/icons/close-btn-white.svg';
+import AppSlider from 'components/AppSlider';
+import MainView from 'components/MainView';
+
+export const questionScreenTestIds = {
+  index: 'question__index',
+  title: 'question__title',
+  closeButton: 'question__close-button',
+  nextButton: 'question__next-button',
+};
+
+const QuestionScreen = (): JSX.Element => {
+  return (
+    <MainView backgroundUrl="https://dhdbhh0jsld0o.cloudfront.net/m/1ea51560991bcb7d00d0_">
+      <div className="flex flex-col h-full">
+        <button className="mt-8 mr-8 p-1 self-end" data-test-id={questionScreenTestIds.closeButton}>
+          <CloseButton />
+        </button>
+        <div className="w-1/2 self-center flex-1 flex flex-col justify-center">
+          <p
+            className="text-small font-extrabold tracking-survey-normal opacity-50 text-white"
+            data-test-id={questionScreenTestIds.index}
+          >
+            1/5
+          </p>
+          <p
+            className="text-x-large font-extrabold tracking-survey-tighest text-white mt-4 mb-8"
+            data-test-id={questionScreenTestIds.title}
+          >
+            How fulfilled did you feel during this WFH period?
+          </p>
+          <AppSlider
+            onValueChanged={() => {
+              // TODO
+            }}
+          />
+        </div>
+        <button
+          type="button"
+          className="w-[56px] h-[56px] mr-8 mb-8 bg-white rounded-full inline-flex items-center justify-center self-end justify-self-end text-black-chinese"
+          data-test-id={questionScreenTestIds.nextButton}
+        >
+          <ArrowRight />
+        </button>
+      </div>
+    </MainView>
+  );
+};
+
+export default QuestionScreen;
diff --git a/src/screens/Survey/index.tsx b/src/screens/Survey/index.tsx
index 3ff36e0..c953727 100644
--- a/src/screens/Survey/index.tsx
+++ b/src/screens/Survey/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { Link, useNavigate, useParams } from 'react-router-dom';
 import { ToastContainer, toast } from 'react-toastify';
 
 import { ReactComponent as ArrowBack } from 'assets/images/icons/arrow-back.svg';
@@ -7,6 +7,7 @@ import ElevatedButton from 'components/ElevatedButton';
 import LoadingDialog from 'components/LoadingDialog';
 import MainView from 'components/MainView';
 import { useAppDispatch, useAppSelector } from 'hooks';
+import { questionPath } from 'routes';
 import { getSurveyAsyncThunk } from 'store/reducers/Survey';
 
 import 'react-toastify/dist/ReactToastify.css';
@@ -75,9 +76,11 @@ const SurveyScreen = (): JSX.Element => {
                 {survey?.description}
               </p>
               <div className="pt-8">
-                <ElevatedButton isFullWidth type="submit" data-test-id={surveyScreenTestIds.startSurveyButton}>
-                  Start Survey
-                </ElevatedButton>
+                <Link to={questionPath()}>
+                  <ElevatedButton isFullWidth type="submit" data-test-id={surveyScreenTestIds.startSurveyButton}>
+                    Start Survey
+                  </ElevatedButton>
+                </Link>
               </div>
             </div>
           </div>