diff --git a/src/assets/images/icons/arrow-back.svg b/src/assets/images/icons/arrow-back.svg
new file mode 100644
index 0000000..5d30782
--- /dev/null
+++ b/src/assets/images/icons/arrow-back.svg
@@ -0,0 +1,3 @@
+<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="M16.5371 25.0827L7.29215 15.9458C6.90262 15.5612 6.90262 14.9398 7.29215 14.5542L16.5371 5.41733C17.0995 4.86089 18.0144 4.86089 18.5777 5.41733C19.14 5.97378 19.14 6.87687 18.5777 7.43332L10.6691 15.2505L18.5777 23.0657C19.14 23.6231 19.14 24.5262 18.5777 25.0827C18.0144 25.6391 17.0995 25.6391 16.5371 25.0827Z" fill="white"/>
+</svg>
diff --git a/src/screens/Survey/index.test.tsx b/src/screens/Survey/index.test.tsx
new file mode 100644
index 0000000..f1497b9
--- /dev/null
+++ b/src/screens/Survey/index.test.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import TestWrapper from 'tests/TestWrapper';
+
+import SurveyScreen, { surveyScreenTestIds } from '.';
+
+describe('SurveyScreen', () => {
+  const TestComponent = (): JSX.Element => {
+    return (
+      <TestWrapper>
+        <SurveyScreen />
+      </TestWrapper>
+    );
+  };
+
+  it('renders Survey screen and its components', () => {
+    render(<TestComponent />);
+    const backgroundImage = screen.getByTestId(surveyScreenTestIds.backgroundImage);
+    const backButton = screen.getByTestId(surveyScreenTestIds.backButton);
+    const coverImage = screen.getByTestId(surveyScreenTestIds.coverImage);
+    const title = screen.getByTestId(surveyScreenTestIds.title);
+    const description = screen.getByTestId(surveyScreenTestIds.description);
+    const startSurveyButton = screen.getByTestId(surveyScreenTestIds.startSurveyButton);
+
+    expect(backgroundImage).toBeVisible();
+    expect(backButton).toBeVisible();
+    expect(coverImage).toBeVisible();
+    expect(title).toBeVisible();
+    expect(description).toBeVisible();
+    expect(startSurveyButton).toBeVisible();
+    expect(startSurveyButton).toHaveTextContent('Start Survey');
+  });
+});
diff --git a/src/screens/Survey/index.tsx b/src/screens/Survey/index.tsx
index d997b23..896888f 100644
--- a/src/screens/Survey/index.tsx
+++ b/src/screens/Survey/index.tsx
@@ -1,10 +1,53 @@
 import React from 'react';
-import { useParams } from 'react-router-dom';
 
-const SurveyScreen = (): JSX.Element => {
-  const { id } = useParams();
+import { ReactComponent as ArrowBack } from 'assets/images/icons/arrow-back.svg';
+import BackgroundImage from 'components/BackgroundImage';
+import ElevatedButton from 'components/ElevatedButton';
+
+export const surveyScreenTestIds = {
+  backgroundImage: 'survey__background-image',
+  backButton: 'survey__back-button',
+  coverImage: 'survey__cover-image',
+  title: 'survey__title-text',
+  description: 'survey__description-text',
+  startSurveyButton: 'survey__start-survey-button',
+};
 
-  return <div>Dashboard detail {id}</div>;
+const SurveyScreen = (): JSX.Element => {
+  return (
+    <BackgroundImage
+      backgroundUrl="https://dhdbhh0jsld0o.cloudfront.net/m/1ea51560991bcb7d00d0_"
+      data-test-id={surveyScreenTestIds.backgroundImage}
+    >
+      <div className="flex flex-col">
+        <button className="mt-[37px] ml-[39px] p-1" data-test-id={surveyScreenTestIds.backButton}>
+          <ArrowBack />
+        </button>
+        <div className="w-1/2 self-center pt-36">
+          <img
+            src="https://dhdbhh0jsld0o.cloudfront.net/m/1ea51560991bcb7d00d0_l"
+            className="w-full h-[302px] rounded-[12px] object-cover"
+            alt="survey"
+            data-test-id={surveyScreenTestIds.coverImage}
+          />
+          <p className="text-white text-x-large font-extrabold pt-8" data-test-id={surveyScreenTestIds.title}>
+            Working from home Check-In
+          </p>
+          <p
+            className="text-white text-regular tracking-survey-tight opacity-60 pt-2"
+            data-test-id={surveyScreenTestIds.description}
+          >
+            We would like to know how you feel about our work from home (WFH) experience.
+          </p>
+          <div className="pt-8">
+            <ElevatedButton isFullWidth type="submit" data-test-id={surveyScreenTestIds.startSurveyButton}>
+              Start Survey
+            </ElevatedButton>
+          </div>
+        </div>
+      </div>
+    </BackgroundImage>
+  );
 };
 
 export default SurveyScreen;