diff --git a/apps/survey-web/src/app/survey/components/SurveyItem/SurveyItem.css.ts b/apps/survey-web/src/app/survey/components/SurveyItem/SurveyItem.css.ts
new file mode 100644
index 0000000..fe87f62
--- /dev/null
+++ b/apps/survey-web/src/app/survey/components/SurveyItem/SurveyItem.css.ts
@@ -0,0 +1,48 @@
+import { vars } from '@ssoon-servey/shared-ui';
+import { style } from '@vanilla-extract/css';
+
+export const cardWrapper = style({
+  padding: '24px',
+  paddingTop: '22px',
+});
+
+// SurveyItem
+export const itemTitle = style({
+  display: 'flex',
+  gap: '0.25em',
+});
+
+export const asterisk = style({
+  color: vars.color.red500,
+});
+
+//radioOptions
+export const optionContainer = style({
+  width: '100%',
+  minHeight: '24px',
+  padding: '0.5em 0.5em 0.5em 0',
+});
+export const optionWrapper = style({
+  width: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.75em',
+});
+
+// selectOptions
+export const selectBox = style({
+  position: 'relative',
+  width: '150px',
+  height: '45px',
+  borderRadius: '4px',
+  border: `1px solid ${vars.color.grayScale100}`,
+});
+
+export const select = style({
+  width: '100%',
+  height: '100%',
+  backgroundColor: 'transparent',
+  border: 0,
+  outline: 0,
+  padding: '6px',
+});
diff --git a/apps/survey-web/src/app/survey/components/SurveyItem/SurveyItem.tsx b/apps/survey-web/src/app/survey/components/SurveyItem/SurveyItem.tsx
new file mode 100644
index 0000000..ecf4c07
--- /dev/null
+++ b/apps/survey-web/src/app/survey/components/SurveyItem/SurveyItem.tsx
@@ -0,0 +1,78 @@
+import { Options } from '../../hooks/useSurvey';
+import { Block, Card, Checkbox, Radio } from '@ssoon-servey/shared-ui';
+import * as $ from './SurveyItem.css';
+
+const SurveyItem = ({
+  title,
+  type,
+  options,
+  isRequired,
+}: {
+  title: string;
+  type: 'radio' | 'select' | 'checkbox';
+  options: Options[];
+  isRequired: boolean;
+}) => {
+  return (
+    <Card>
+      <div className={$.cardWrapper}>
+        <div className={$.itemTitle}>
+          <span>{title}</span>
+          {isRequired && <span className={$.asterisk}>*</span>}
+        </div>
+        <Block height={15} />
+        <div>
+          {type === 'radio' && <RadioOptions options={options} />}
+          {type === 'checkbox' && <CheckboxOptions options={options} />}
+          {type === 'select' && <SelectOptions options={options} />}
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+export default SurveyItem;
+
+const RadioOptions = ({ options }: { options: Options[] }) => {
+  return (
+    <>
+      {options.map((option) => (
+        <div key={option.item_id} className={$.optionContainer}>
+          <label className={$.optionWrapper}>
+            <Radio value={option.option_text} name={option.option_text} />
+            <span>{option.option_text}</span>
+          </label>
+        </div>
+      ))}
+    </>
+  );
+};
+
+const CheckboxOptions = ({ options }: { options: Options[] }) => {
+  return (
+    <>
+      {options.map((option) => (
+        <div key={option.item_id} className={$.optionContainer}>
+          <label className={$.optionWrapper}>
+            <Checkbox value={option.option_text} name={option.option_text} />
+            <span>{option.option_text}</span>
+          </label>
+        </div>
+      ))}
+    </>
+  );
+};
+
+const SelectOptions = ({ options }: { options: Options[] }) => {
+  return (
+    <div className={$.selectBox}>
+      <select className={$.select}>
+        {options.map((option) => (
+          <option key={option.id} value={option.option_text} selected={false}>
+            {option.option_text}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
diff --git a/apps/survey-web/src/app/survey/components/SurveyItem/index.tsx b/apps/survey-web/src/app/survey/components/SurveyItem/index.tsx
new file mode 100644
index 0000000..77597a1
--- /dev/null
+++ b/apps/survey-web/src/app/survey/components/SurveyItem/index.tsx
@@ -0,0 +1 @@
+export { default } from './SurveyItem';
diff --git a/apps/survey-web/src/app/survey/components/SurveyNav/SurveyNav.css.ts b/apps/survey-web/src/app/survey/components/SurveyNav/SurveyNav.css.ts
new file mode 100644
index 0000000..b3e3d8e
--- /dev/null
+++ b/apps/survey-web/src/app/survey/components/SurveyNav/SurveyNav.css.ts
@@ -0,0 +1,50 @@
+import { vars } from '@ssoon-servey/shared-ui';
+import { style } from '@vanilla-extract/css';
+
+export const surveyNavContainer = style({
+  display: 'flex',
+  width: '100%',
+  justifyContent: 'space-between',
+});
+
+export const nextButton = style({
+  marginRight: '14px',
+  boxShadow:
+    '0 2px 1px -1px rgba(0, 0, 0, 0.2),0 1px 1px 0 rgba(0, 0, 0, 0.141), 0 1px 3px 0 rgba(0, 0, 0, 0.122)',
+  backgroundColor: vars.color.grayScale00,
+  fontSize: '14px',
+  borderRadius: '4px',
+  lineHeight: '36px',
+  padding: '0 24px',
+  color: vars.color.primary500,
+  ':hover': {
+    backgroundColor: '#f9f7fc',
+  },
+});
+
+export const backButton = style([nextButton]);
+
+export const submitButton = style({
+  fontSize: '14px',
+  borderRadius: '4px',
+  backgroundColor: vars.color.primary500,
+  color: vars.color.grayScale00,
+  lineHeight: '36px',
+  padding: '0 24px',
+  ':hover': {
+    backgroundColor: '#7654b4',
+    boxShadow:
+      '0px 2px 1px -1px rgba(103, 58, 183, 0.2),0px 1px 1px 0px rgba(103, 58, 183, 0.14),0px 1px 3px 0px rgba(103, 58, 183, 0.12)',
+  },
+});
+
+export const resetButton = style({
+  padding: '0px 8px',
+  fontSize: '14px',
+  borderRadius: '4px',
+  lineHeight: '36px',
+  color: vars.color.primary500,
+  ':hover': {
+    backgroundColor: vars.color.primary200,
+  },
+});
diff --git a/apps/survey-web/src/app/survey/components/SurveyNav/SurveyNav.tsx b/apps/survey-web/src/app/survey/components/SurveyNav/SurveyNav.tsx
new file mode 100644
index 0000000..44f143f
--- /dev/null
+++ b/apps/survey-web/src/app/survey/components/SurveyNav/SurveyNav.tsx
@@ -0,0 +1,42 @@
+import * as $ from './SurveyNav.css';
+
+const SectionNav = ({
+  isPrevious,
+  isNext,
+  goNext,
+  goBack,
+  onSubmit,
+}: {
+  isPrevious: boolean;
+  isNext: boolean;
+  goNext: () => void;
+  goBack: () => void;
+  onSubmit: () => void;
+}) => {
+  return (
+    <div className={$.surveyNavContainer}>
+      <div>
+        {isPrevious && (
+          <button className={$.backButton} onClick={goBack}>
+            뒤로
+          </button>
+        )}
+        {isNext && (
+          <button className={$.nextButton} onClick={goNext}>
+            다음
+          </button>
+        )}
+        {!isNext && (
+          <button className={$.submitButton} onClick={onSubmit}>
+            제출
+          </button>
+        )}
+      </div>
+      <div>
+        <button className={$.resetButton}>양식 지우기</button>
+      </div>
+    </div>
+  );
+};
+
+export default SectionNav;
diff --git a/apps/survey-web/src/app/survey/components/SurveyNav/index.ts b/apps/survey-web/src/app/survey/components/SurveyNav/index.ts
new file mode 100644
index 0000000..3f2159f
--- /dev/null
+++ b/apps/survey-web/src/app/survey/components/SurveyNav/index.ts
@@ -0,0 +1 @@
+export { default } from './SurveyNav';
diff --git a/apps/survey-web/src/app/survey/components/SurveyTitle/SurveyTitle.css.ts b/apps/survey-web/src/app/survey/components/SurveyTitle/SurveyTitle.css.ts
new file mode 100644
index 0000000..d543369
--- /dev/null
+++ b/apps/survey-web/src/app/survey/components/SurveyTitle/SurveyTitle.css.ts
@@ -0,0 +1,31 @@
+import { vars } from '@ssoon-servey/shared-ui';
+import { style } from '@vanilla-extract/css';
+
+export const borderTop = style({
+  backgroundColor: vars.color.primary500,
+  borderTopLeftRadius: '8px',
+  borderTopRightRadius: '8px',
+  height: '10px',
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+});
+
+export const surveyTitle = style({
+  fontSize: '24pt',
+  fontWeight: 400,
+  paddingBottom: '12px',
+});
+
+export const cardWrapper = style({
+  padding: '24px',
+  paddingTop: '22px',
+});
+
+export const emphasize = style({
+  fontSize: '14px',
+  fontWeight: 400,
+  marginTop: '14px',
+  color: vars.color.red500,
+});
diff --git a/apps/survey-web/src/app/survey/components/SurveyTitle/SurveyTitle.tsx b/apps/survey-web/src/app/survey/components/SurveyTitle/SurveyTitle.tsx
new file mode 100644
index 0000000..1606b48
--- /dev/null
+++ b/apps/survey-web/src/app/survey/components/SurveyTitle/SurveyTitle.tsx
@@ -0,0 +1,16 @@
+import { Card } from '@ssoon-servey/shared-ui';
+import * as $ from './SurveyTitle.css';
+
+const SurveyTitle = ({ title }: { title: string }) => {
+  return (
+    <Card>
+      <div className={$.borderTop} />
+      <div className={$.cardWrapper}>
+        <h2 className={$.surveyTitle}>{title}</h2>
+        <div className={$.emphasize}>* 표시는 필수 질문임</div>
+      </div>
+    </Card>
+  );
+};
+
+export default SurveyTitle;
diff --git a/apps/survey-web/src/app/survey/components/SurveyTitle/index.tsx b/apps/survey-web/src/app/survey/components/SurveyTitle/index.tsx
new file mode 100644
index 0000000..91713c6
--- /dev/null
+++ b/apps/survey-web/src/app/survey/components/SurveyTitle/index.tsx
@@ -0,0 +1 @@
+export { default } from './SurveyTitle';
diff --git a/apps/survey-web/src/app/survey/hooks/useSurvey.ts b/apps/survey-web/src/app/survey/hooks/useSurvey.ts
index 8c95d88..2efaa94 100644
--- a/apps/survey-web/src/app/survey/hooks/useSurvey.ts
+++ b/apps/survey-web/src/app/survey/hooks/useSurvey.ts
@@ -4,18 +4,18 @@ import {
 } from '@ssoon-servey/supabase';
 import { useEffect, useState } from 'react';
 
-type Options = {
+export type Options = {
   id: number;
   option_text: string;
   item_id: number | null;
 };
 
-type SurveyItems = {
+export type SurveyItems = {
   id: number;
   options: Options[];
   question_required: boolean;
   question_title: string;
-  question_type: string;
+  question_type: 'radio' | 'select' | 'checkbox';
   section_id: number | null;
 };
 
@@ -76,7 +76,15 @@ const getSurvey = async (supabase: SupabaseContextValue['supabase']) => {
       ...section,
       isNext: i !== sections.length - 1,
       isPrevious: i !== 0,
-      items: items
+      items: (
+        items as {
+          id: number;
+          question_required: boolean;
+          question_title: string;
+          question_type: 'radio' | 'select' | 'checkbox';
+          section_id: number | null;
+        }[]
+      )
         .filter((item) => item.section_id === section.id)
         .map((items) => ({
           ...items,
diff --git a/apps/survey-web/src/app/survey/page.css.ts b/apps/survey-web/src/app/survey/page.css.ts
index a3f0f7b..97432b9 100644
--- a/apps/survey-web/src/app/survey/page.css.ts
+++ b/apps/survey-web/src/app/survey/page.css.ts
@@ -1,4 +1,3 @@
-import { vars } from '@ssoon-servey/shared-ui';
 import { style } from '@vanilla-extract/css';
 
 export const cardContainer = style({
@@ -7,17 +6,6 @@ export const cardContainer = style({
   gap: '10px',
 });
 
-export const borderTop = style({
-  backgroundColor: vars.color.primary500,
-  borderTopLeftRadius: '8px',
-  borderTopRightRadius: '8px',
-  height: '10px',
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  right: 0,
-});
-
 export const cardWrapper = style({
   padding: '24px',
   paddingTop: '22px',
diff --git a/apps/survey-web/src/app/survey/page.tsx b/apps/survey-web/src/app/survey/page.tsx
index 548486b..69e223a 100644
--- a/apps/survey-web/src/app/survey/page.tsx
+++ b/apps/survey-web/src/app/survey/page.tsx
@@ -1,8 +1,10 @@
 import { useGetSurvey } from './hooks/useSurvey';
-import { Block, Card } from '@ssoon-servey/shared-ui';
 import * as $ from './page.css';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useEffect } from 'react';
+import SurveyTitle from './components/SurveyTitle';
+import SurveyItem from './components/SurveyItem';
+import SurveyNav from './components/SurveyNav';
 
 const INITIAL_ID = 1;
 
@@ -33,31 +35,32 @@ const SurveyPage = () => {
     navigate(-1);
   };
 
-  const sections = data.sections[sectionId - 1];
+  const onSubmit = () => {
+    navigate('');
+  };
+
+  const section = data.sections[sectionId - 1];
 
   return (
     <div className={$.cardContainer}>
-      <Card>
-        <div className={$.borderTop} />
-        <div className={$.cardWrapper}>
-          <span>{data?.title}</span>
-          <div>* 표시는 필수 질문임</div>
-        </div>
-      </Card>
-      {sections.items.map((item) => (
-        <Card key={item.id}>
-          <div className={$.cardWrapper}>
-            <div>{item.question_title}</div>
-            {item.options.map((option) => (
-              <div key={option.id}>{option.option_text}</div>
-            ))}
-          </div>
-        </Card>
+      <SurveyTitle title={data.title} />
+      {section.items.map((item) => (
+        <SurveyItem
+          key={item.id}
+          type={item.question_type}
+          title={item.question_title}
+          options={item.options}
+          isRequired={item.question_required}
+        />
       ))}
-
       <div>
-        {sections.isPrevious && <button onClick={goBackSection}>이전</button>}
-        {sections.isNext && <button onClick={goNextSection}>다음</button>}
+        <SurveyNav
+          isNext={section.isNext}
+          isPrevious={section.isPrevious}
+          goNext={goNextSection}
+          goBack={goBackSection}
+          onSubmit={onSubmit}
+        />
       </div>
     </div>
   );