diff --git a/src/components/Answer/index.test.tsx b/src/components/Answer/index.test.tsx
new file mode 100644
index 0000000..3a76e8e
--- /dev/null
+++ b/src/components/Answer/index.test.tsx
@@ -0,0 +1,176 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import { Question } from 'types/question';
+
+import Answer from '.';
+
+describe('Answer', () => {
+  describe('given the display type is star', () => {
+    it('renders Rating component', () => {
+      const question: Question = {
+        id: 'id',
+        resourceType: 'question',
+        displayType: 'star',
+        answers: [],
+      };
+      const dataTestId = 'answer';
+      render(<Answer question={question} data-test-id={dataTestId} />);
+
+      const star = screen.getByTestId(dataTestId);
+
+      expect(star).toBeVisible();
+      expect(star).toHaveAttribute('id', 'rating-id');
+    });
+  });
+
+  describe('given the display type is choice', () => {
+    it('renders MultiChoice component', () => {
+      const question: Question = {
+        id: 'id',
+        resourceType: 'question',
+        displayType: 'choice',
+        answers: [],
+      };
+      const dataTestId = 'answer';
+      render(<Answer question={question} data-test-id={dataTestId} />);
+
+      const multiChoice = screen.getByTestId(dataTestId);
+
+      expect(multiChoice).toBeVisible();
+      expect(multiChoice).toHaveAttribute('id', 'multi-choice-id');
+    });
+  });
+
+  describe('given the display type is nps', () => {
+    it('renders Nps component', () => {
+      const question: Question = {
+        id: 'id',
+        resourceType: 'question',
+        displayType: 'nps',
+        answers: [],
+      };
+      const dataTestId = 'answer';
+      render(<Answer question={question} data-test-id={dataTestId} />);
+
+      const nps = screen.getByTestId(dataTestId);
+
+      expect(nps).toBeVisible();
+      expect(nps).toHaveAttribute('id', 'nps-id');
+    });
+  });
+
+  describe('given the display type is textarea', () => {
+    it('renders TextArea component', () => {
+      const question: Question = {
+        id: 'id',
+        resourceType: 'question',
+        displayType: 'textarea',
+        answers: [
+          {
+            id: 'id',
+            resourceType: 'answer',
+            text: '',
+          },
+        ],
+      };
+      const dataTestId = 'answer';
+      render(<Answer question={question} data-test-id={dataTestId} />);
+
+      const textArea = screen.getByTestId(dataTestId);
+
+      expect(textArea).toBeVisible();
+      expect(textArea).toHaveAttribute('id', 'text-area-id');
+    });
+  });
+
+  describe('given the display type is textfield', () => {
+    it('renders MultiInputs component', () => {
+      const question: Question = {
+        id: 'id',
+        resourceType: 'question',
+        displayType: 'textfield',
+        answers: [
+          {
+            id: 'id',
+            resourceType: 'answer',
+            text: '',
+          },
+        ],
+      };
+      const dataTestId = 'answer';
+      render(<Answer question={question} data-test-id={dataTestId} />);
+
+      const multiInputs = screen.getByTestId(dataTestId);
+
+      expect(multiInputs).toBeVisible();
+      expect(multiInputs).toHaveAttribute('id', 'multi-inputs-id');
+    });
+  });
+
+  describe('given the display type is dropdown', () => {
+    it('renders Dropdown component', () => {
+      const question: Question = {
+        id: 'id',
+        resourceType: 'question',
+        displayType: 'dropdown',
+        answers: [
+          {
+            id: 'id',
+            resourceType: 'answer',
+            text: '',
+          },
+        ],
+      };
+      const dataTestId = 'answer';
+      render(<Answer question={question} data-test-id={dataTestId} />);
+
+      const dropdown = screen.getByTestId(dataTestId);
+
+      expect(dropdown).toBeVisible();
+      expect(dropdown).toHaveAttribute('id', 'dropdown-id');
+    });
+  });
+
+  describe('given the display type is slider', () => {
+    it('renders Dropdown component', () => {
+      const question: Question = {
+        id: 'id',
+        resourceType: 'question',
+        displayType: 'slider',
+        answers: [
+          {
+            id: 'id',
+            resourceType: 'answer',
+            text: '',
+          },
+        ],
+      };
+      const dataTestId = 'answer';
+      render(<Answer question={question} data-test-id={dataTestId} />);
+
+      const slider = screen.getByTestId(dataTestId);
+
+      expect(slider).toBeVisible();
+      expect(slider).toHaveAttribute('id', 'slider-id');
+    });
+  });
+
+  describe('given the display type is intro', () => {
+    it('renders Dropdown component', () => {
+      const question: Question = {
+        id: 'id',
+        resourceType: 'question',
+        displayType: 'intro',
+        answers: [],
+      };
+      const dataTestId = 'answer';
+      render(<Answer question={question} data-test-id={dataTestId} />);
+
+      const intro = screen.getByTestId(dataTestId);
+
+      expect(intro).toBeVisible();
+    });
+  });
+});
diff --git a/src/components/Answer/index.tsx b/src/components/Answer/index.tsx
new file mode 100644
index 0000000..a9ed91c
--- /dev/null
+++ b/src/components/Answer/index.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+
+import AppSlider from 'components/AppSlider';
+import Dropdown from 'components/Dropdown';
+import MultiChoice from 'components/MultiChoice';
+import MultiInputs from 'components/MultiInputs';
+import Nps from 'components/Nps';
+import Rating from 'components/Rating';
+import TextArea from 'components/TextArea';
+import { DisplayType, Question, getDisplayTypeEnum } from 'types/question';
+
+interface AnswerProps {
+  question: Question;
+  'data-test-id'?: string;
+}
+const Answer = ({ question, ...rest }: AnswerProps): JSX.Element => {
+  const displayTypeEnum = getDisplayTypeEnum(question);
+
+  switch (displayTypeEnum) {
+    case DisplayType.Heart:
+    case DisplayType.Smiley:
+    case DisplayType.Thumbs:
+    case DisplayType.Star:
+      return (
+        <Rating
+          questionId={question.id}
+          items={question.answers}
+          displayType={displayTypeEnum}
+          data-test-id={rest['data-test-id']}
+        />
+      );
+    case DisplayType.Choice:
+      return (
+        <MultiChoice
+          questionId={question.id}
+          items={question.answers}
+          isPickOne={question?.pick === 'one'}
+          data-test-id={rest['data-test-id']}
+        />
+      );
+    case DisplayType.Nps:
+      return <Nps questionId={question.id} items={question.answers} data-test-id={rest['data-test-id']} />;
+    case DisplayType.Textarea:
+      return <TextArea questionId={question.id} items={question.answers} data-test-id={rest['data-test-id']} />;
+    case DisplayType.Textfield:
+      return <MultiInputs questionId={question.id} items={question.answers} data-test-id={rest['data-test-id']} />;
+    case DisplayType.Dropdown:
+      return <Dropdown questionId={question.id} items={question.answers} data-test-id={rest['data-test-id']} />;
+    case DisplayType.Slider:
+      return <AppSlider questionId={question.id} items={question.answers} data-test-id={rest['data-test-id']} />;
+    case DisplayType.Unknown:
+    case DisplayType.Intro:
+    case DisplayType.Outro:
+    default:
+      return <div {...rest}></div>;
+  }
+};
+
+export default Answer;
diff --git a/src/components/AppSlider/index.test.tsx b/src/components/AppSlider/index.test.tsx
index 680fe17..4418350 100644
--- a/src/components/AppSlider/index.test.tsx
+++ b/src/components/AppSlider/index.test.tsx
@@ -6,7 +6,11 @@ import AppSlider, { appSliderDataTestIds } from '.';
 
 describe('AppSlider', () => {
   it('renders AppSlider component', () => {
-    render(<AppSlider onValueChanged={jest.fn()} />);
+    const onValueChanged = () => {
+      // Do nothing
+    };
+
+    render(<AppSlider onValueChanged={onValueChanged} />);
 
     const appSlider = screen.getByTestId(appSliderDataTestIds.base);
     const slider = screen.getByRole('slider');
diff --git a/src/components/AppSlider/index.tsx b/src/components/AppSlider/index.tsx
index 3eb2217..b06794a 100644
--- a/src/components/AppSlider/index.tsx
+++ b/src/components/AppSlider/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import Slider from 'rc-slider';
 
@@ -14,9 +14,9 @@ interface SliderProps {
 }
 
 const AppSlider = ({ min = 1, max = 100, step = 1, onValueChanged }: SliderProps): JSX.Element => {
-  const handleOnChange = (value: number) => {
-    onValueChanged(value);
-  };
+  useEffect(() => {
+    onValueChanged(min);
+  }, [min, onValueChanged]);
 
   return (
     <div className="flex w-full h-[56px] justify-center items-center" data-test-id={appSliderDataTestIds.base}>
@@ -45,7 +45,7 @@ const AppSlider = ({ min = 1, max = 100, step = 1, onValueChanged }: SliderProps
         min={min}
         max={max}
         step={step}
-        onChange={(value) => handleOnChange(value as number)}
+        onChange={(value) => onValueChanged(value as number)}
       />
     </div>
   );
diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
index 3e5f167..ba5bc47 100644
--- a/src/components/Dropdown/index.tsx
+++ b/src/components/Dropdown/index.tsx
@@ -12,6 +12,7 @@ interface DropdownProps {
   items: Answer[];
   onValueChanged: (value: Answer) => void;
 }
+
 const Dropdown = ({ questionId, items, onValueChanged }: DropdownProps): JSX.Element => {
   const [isOpen, setIsOpen] = useState(false);
   const [selectedValue, setSelectedValue] = useState(items[0].text);
diff --git a/src/components/ElevatedButton/index.tsx b/src/components/ElevatedButton/index.tsx
index 04d1961..0212d04 100644
--- a/src/components/ElevatedButton/index.tsx
+++ b/src/components/ElevatedButton/index.tsx
@@ -12,7 +12,7 @@ const ElevatedButton = ({ children, isFullWidth, ...rest }: ElevatedButtonProps)
     'bg-white text-black-chinese font-bold text-regular tracking-survey-tight rounded-[10px] focus:outline-none focus:shadow-outline h-14';
 
   return (
-    <button type="button" className={classNames(DEFAULT_CLASS_NAMES, { 'w-full': isFullWidth })} {...rest}>
+    <button type="button" className={classNames(DEFAULT_CLASS_NAMES, { 'w-full': isFullWidth, 'px-8': !isFullWidth })} {...rest}>
       {children}
     </button>
   );
diff --git a/src/components/MultiChoice/index.tsx b/src/components/MultiChoice/index.tsx
index ba0a899..31f1fd3 100644
--- a/src/components/MultiChoice/index.tsx
+++ b/src/components/MultiChoice/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import classNames from 'classnames';
 
@@ -43,6 +43,10 @@ const MultiChoice = ({ items, isPickOne, onValuesChanged }: MultiChoiceProps): J
     onValuesChanged(newSelectedValues);
   };
 
+  useEffect(() => {
+    setSelectedValues([]);
+  }, []);
+
   return (
     <div className="flex flex-col w-full" data-test-id={multiChoiceDataTestIds.base}>
       {items.map((item, index) => (
diff --git a/src/components/MultiInputs/index.test.tsx b/src/components/MultiInputs/index.test.tsx
new file mode 100644
index 0000000..c3389e1
--- /dev/null
+++ b/src/components/MultiInputs/index.test.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { render, screen, within } from '@testing-library/react';
+
+import MultiInputs from '.';
+
+describe('MultiInputs', () => {
+  const multiInputsDataTestId = 'multiInputs';
+
+  it('renders a multi inputs component', () => {
+    const answers = [
+      { id: '1', resourceType: 'answer', text: 'Test 1' },
+      { id: '2', resourceType: 'answer', text: 'Test 2' },
+      { id: '3', resourceType: 'answer', text: 'Test 3' },
+    ];
+    render(<MultiInputs questionId="question id" items={answers} data-test-id={multiInputsDataTestId} />);
+
+    const multiInputs = screen.getByTestId(multiInputsDataTestId);
+
+    expect(multiInputs).toBeVisible();
+    expect(within(multiInputs).getByPlaceholderText('Test 1')).toBeVisible();
+    expect(within(multiInputs).getByPlaceholderText('Test 2')).toBeVisible();
+    expect(within(multiInputs).getByPlaceholderText('Test 3')).toBeVisible();
+  });
+});
diff --git a/src/components/MultiInputs/index.tsx b/src/components/MultiInputs/index.tsx
new file mode 100644
index 0000000..2f0a5f9
--- /dev/null
+++ b/src/components/MultiInputs/index.tsx
@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from 'react';
+
+import TextInput from 'components/TextInput';
+import { Answer } from 'types/answer';
+import { AnswerRequest } from 'types/request/surveySubmitRequest';
+
+interface MultiInputProps {
+  questionId: string;
+  items: Answer[];
+  onValuesChanged?: (answers: AnswerRequest[]) => void;
+  'data-test-id'?: string;
+}
+const MultiInputs = ({ questionId, items, onValuesChanged, ...rest }: MultiInputProps): JSX.Element => {
+  const [selectedValues, setSelectedValues] = useState<AnswerRequest[]>([]);
+
+  const handleValuesChanged = (answer: Answer, content: string) => {
+    const newSelectedValues = selectedValues;
+    const itemIndex = newSelectedValues.findIndex((value) => value.id === answer.id);
+    if (itemIndex !== -1) {
+      newSelectedValues[itemIndex].answer = content;
+    }
+    setSelectedValues(newSelectedValues);
+    onValuesChanged?.(newSelectedValues);
+  };
+
+  useEffect(() => {
+    const newSelectedValues: AnswerRequest[] = [];
+    for (let i = 0; i < items.length; i++) {
+      newSelectedValues.push({
+        id: items[i].id,
+        answer: '',
+      });
+    }
+    setSelectedValues(newSelectedValues);
+  }, [questionId, items]);
+
+  return (
+    <div id={`multi-inputs-${questionId}`} {...rest}>
+      {items.map((item) => (
+        <div key={item.id}>
+          <TextInput
+            inputAttributes={{
+              id: `answer-text-input__${item.id}`,
+              required: true,
+              type: 'text',
+              placeholder: item.text,
+              onChange: (event) => handleValuesChanged(item, event.target.value),
+            }}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default MultiInputs;
diff --git a/src/components/Nps/index.tsx b/src/components/Nps/index.tsx
index 10ff529..6a35e5e 100644
--- a/src/components/Nps/index.tsx
+++ b/src/components/Nps/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import classNames from 'classnames';
 
@@ -34,6 +34,10 @@ const Nps = ({ items, onValuesChanged }: NpsProps): JSX.Element => {
     onValuesChanged(selectedValues);
   };
 
+  useEffect(() => {
+    setCurrentScore(Math.round(items.length / 2));
+  }, [items]);
+
   return (
     <div className="flex justify-center" data-test-id={npsDataTestIds.base}>
       <div className="flex flex-col w-[335px]">
diff --git a/src/components/Rating/index.tsx b/src/components/Rating/index.tsx
index fdabde6..b9c4e51 100644
--- a/src/components/Rating/index.tsx
+++ b/src/components/Rating/index.tsx
@@ -8,13 +8,12 @@ export const ratingDataTestIds = {
 };
 
 interface RatingProps {
-  questionId: string;
   items: Answer[];
   displayType: DisplayType;
   onValueChanged: (answer: Answer) => void;
 }
 
-const Rating = ({ questionId, items, displayType, onValueChanged }: RatingProps): JSX.Element => {
+const Rating = ({ items, displayType, onValueChanged }: RatingProps): JSX.Element => {
   const [selectedIndex, setSelectedIndex] = useState(0);
 
   const handleOnSelectRating = (index: number, answer: Answer) => {
@@ -49,7 +48,7 @@ const Rating = ({ questionId, items, displayType, onValueChanged }: RatingProps)
 
   useEffect(() => {
     setSelectedIndex(0);
-  }, [questionId]);
+  }, []);
 
   return (
     <div
diff --git a/src/components/TextArea/index.test.tsx b/src/components/TextArea/index.test.tsx
index b548c91..0373eb8 100644
--- a/src/components/TextArea/index.test.tsx
+++ b/src/components/TextArea/index.test.tsx
@@ -10,8 +10,11 @@ import TextArea, { textAreaDataTestIds } from '.';
 describe('TextArea', () => {
   it('renders a text area component', () => {
     const answers: Answer[] = answerFabricator.times(2);
+    const onValueChanged = () => {
+      // Do nothing
+    };
 
-    render(<TextArea items={answers} />);
+    render(<TextArea items={answers} onValueChange={onValueChanged} />);
 
     const textArea = screen.getByTestId(textAreaDataTestIds.base);
 
diff --git a/src/components/TextArea/index.tsx b/src/components/TextArea/index.tsx
index 6297657..8df26f1 100644
--- a/src/components/TextArea/index.tsx
+++ b/src/components/TextArea/index.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import _get from 'lodash/get';
 
 import { Answer } from 'types/answer';
+import { AnswerRequest } from 'types/request/surveySubmitRequest';
 
 export const textAreaDataTestIds = {
   base: 'text-area__base',
@@ -10,7 +11,7 @@ export const textAreaDataTestIds = {
 
 type TextAreaProps = {
   items: Answer[];
-  onValueChange?: (id: string, value: string) => void;
+  onValueChange: (answerRequest: AnswerRequest) => void;
 };
 
 const TextArea = ({ items, onValueChange }: TextAreaProps): JSX.Element => {
@@ -19,8 +20,11 @@ const TextArea = ({ items, onValueChange }: TextAreaProps): JSX.Element => {
   const handleOnChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
     event.preventDefault();
 
-    const answerId = currentAnswer?.id ?? '';
-    onValueChange?.(answerId, event.target.value);
+    const answerRequest = {
+      id: currentAnswer?.id ?? '',
+      answer: event.target.value,
+    };
+    onValueChange(answerRequest);
   };
 
   return (
diff --git a/src/screens/Question/index.tsx b/src/screens/Question/index.tsx
index cd5d7bb..55ca8cc 100644
--- a/src/screens/Question/index.tsx
+++ b/src/screens/Question/index.tsx
@@ -1,9 +1,12 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import { ReactComponent as ArrowRight } from 'assets/images/icons/arrow-right.svg';
 import { ReactComponent as CloseButton } from 'assets/images/icons/close-btn.svg';
-import AppSlider from 'components/AppSlider';
+import Answer from 'components/Answer';
+import ElevatedButton from 'components/ElevatedButton';
 import MainView from 'components/MainView';
+import { useAppSelector } from 'hooks';
 
 export const questionScreenTestIds = {
   index: 'question__index',
@@ -13,10 +16,33 @@ export const questionScreenTestIds = {
 };
 
 const QuestionScreen = (): JSX.Element => {
+  const { survey } = useAppSelector((state) => state.survey);
+  const navigate = useNavigate();
+
+  const [currentQuestion, setCurrentQuestion] = useState(survey?.questions?.at(0));
+  const [questionIndex, setQuestionIndex] = useState(0);
+
+  const onNextClick = () => {
+    const nextQuestionIndex = questionIndex + 1;
+    if (nextQuestionIndex >= (survey?.questions?.length ?? 0)) {
+      return;
+    }
+    setCurrentQuestion(survey?.questions?.at(nextQuestionIndex));
+    setQuestionIndex(nextQuestionIndex);
+  };
+
+  const onSubmitClick = () => {
+    // TODO submit survey
+  };
+
+  function goBack() {
+    navigate(-1);
+  }
+
   return (
-    <MainView backgroundUrl="https://dhdbhh0jsld0o.cloudfront.net/m/1ea51560991bcb7d00d0_">
+    <MainView backgroundUrl={currentQuestion?.coverImageUrl}>
       <div className="flex flex-col h-full">
-        <button className="mt-8 mr-8 p-1 self-end text-white" data-test-id={questionScreenTestIds.closeButton}>
+        <button className="mt-8 mr-8 p-1 self-end" data-test-id={questionScreenTestIds.closeButton} onClick={goBack}>
           <CloseButton />
         </button>
         <div className="w-1/2 self-center flex-1 flex flex-col justify-center">
@@ -24,27 +50,36 @@ const QuestionScreen = (): JSX.Element => {
             className="text-small font-extrabold tracking-survey-normal opacity-50 text-white"
             data-test-id={questionScreenTestIds.index}
           >
-            1/5
+            {`${questionIndex + 1}/${survey?.questions?.length ?? 0}`}
           </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?
+            {currentQuestion?.text}
           </p>
-          <AppSlider
-            onValueChanged={() => {
-              // TODO
-            }}
-          />
+          {currentQuestion && (
+            <div className="mt-16">
+              <Answer question={currentQuestion} />
+            </div>
+          )}
         </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>
+        {questionIndex === (survey?.questions?.length ?? 0) - 1 ? (
+          <div className="mr-8 mb-8 self-end">
+            <ElevatedButton isFullWidth={false} onClick={onSubmitClick}>
+              Submit
+            </ElevatedButton>
+          </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"
+            onClick={onNextClick}
+            data-test-id={questionScreenTestIds.nextButton}
+          >
+            <ArrowRight />
+          </button>
+        )}
       </div>
     </MainView>
   );
diff --git a/src/store/reducers/Survey/action.ts b/src/store/reducers/Survey/action.ts
index 06e698a..fc95dec 100644
--- a/src/store/reducers/Survey/action.ts
+++ b/src/store/reducers/Survey/action.ts
@@ -1,10 +1,17 @@
 import { AsyncThunkPayloadCreator } from '@reduxjs/toolkit';
 
-import { getSurvey } from 'adapters/Survey';
+import { getSurvey, submitSurvey } from 'adapters/Survey';
 import { DeserializableResponse, deserialize } from 'helpers/deserializer';
 import { JSONObject } from 'helpers/json';
+import { SurveySubmitRequest } from 'types/request/surveySubmitRequest';
 import { Survey } from 'types/survey';
 
 export const getSurveyThunkCreator: AsyncThunkPayloadCreator<Survey, string, JSONObject> = async (surveyId: string) => {
   return getSurvey(surveyId).then((response: DeserializableResponse) => deserialize<Survey>(response.data, response.included));
 };
+
+export const submitSurveyThunkCreator: AsyncThunkPayloadCreator<void, SurveySubmitRequest, JSONObject> = (
+  surveySubmitRequest
+) => {
+  return submitSurvey(surveySubmitRequest).then();
+};
diff --git a/src/store/reducers/Survey/index.ts b/src/store/reducers/Survey/index.ts
index 1561bfe..a2e4ea7 100644
--- a/src/store/reducers/Survey/index.ts
+++ b/src/store/reducers/Survey/index.ts
@@ -1,13 +1,15 @@
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 
+import { SurveySubmitRequest } from 'types/request/surveySubmitRequest';
 import { Survey } from 'types/survey';
 
-import { getSurveyThunkCreator } from './action';
+import { getSurveyThunkCreator, submitSurveyThunkCreator } from './action';
 
 export interface SurveyState {
   survey?: Survey;
   isLoading: boolean;
   isError: boolean;
+  surveySubmitRequest?: SurveySubmitRequest;
 }
 
 export const initialState: SurveyState = {
@@ -17,6 +19,8 @@ export const initialState: SurveyState = {
 
 export const getSurveyAsyncThunk = createAsyncThunk('survey/getSurvey', getSurveyThunkCreator);
 
+export const submitSurveyAsyncThunk = createAsyncThunk('survey/submitSurvey', submitSurveyThunkCreator);
+
 export const surveySlice = createSlice({
   name: 'survey',
   initialState,
diff --git a/src/types/question.ts b/src/types/question.ts
index 0bf2e06..4370691 100644
--- a/src/types/question.ts
+++ b/src/types/question.ts
@@ -25,6 +25,7 @@ export enum DisplayType {
   Thumbs = 'thumbs',
   Choice = 'choice',
   Nps = 'nps',
+  Slider = 'slider',
   Textarea = 'textarea',
   Textfield = 'textfield',
   Dropdown = 'dropdown',
diff --git a/src/types/request/surveySubmitRequest.ts b/src/types/request/surveySubmitRequest.ts
index c07795a..615d561 100644
--- a/src/types/request/surveySubmitRequest.ts
+++ b/src/types/request/surveySubmitRequest.ts
@@ -8,7 +8,7 @@ interface QuestionRequest {
   answers: AnswerRequest[];
 }
 
-interface AnswerRequest {
+export interface AnswerRequest {
   id: string;
   answer?: string;
 }