diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
new file mode 100644
index 0000000..788e972
--- /dev/null
+++ b/src/components/Navigation.tsx
@@ -0,0 +1,11 @@
+const Navigation = () => {
+  return (
+    <>
+      <div className="flex h-16 w-full items-center px-4 shadow-md">
+        <h1 className="text-2xl font-bold text-[#0D2D84]">Snowgent</h1>
+      </div>
+    </>
+  );
+};
+
+export default Navigation;
diff --git a/src/components/onboarding/FormButton.tsx b/src/components/onboarding/FormButton.tsx
new file mode 100644
index 0000000..615735e
--- /dev/null
+++ b/src/components/onboarding/FormButton.tsx
@@ -0,0 +1,39 @@
+const FormButton = ({ type, onClick }: { type: string; onClick: () => void }) => {
+  const buttonStyle =
+    'bg-[#1d4ed8] w-full text-white py-3 rounded-lg text-center font-medium cursor-pointer';
+
+  const grayButtonStyle =
+    'bg-gray-300 w-full text-gray-700 py-3 rounded-lg text-center font-medium cursor-pointer';
+
+  const handleClick = () => {
+    onClick();
+  };
+
+  switch (type) {
+    case 'next':
+      return (
+        <div className={buttonStyle} onClick={handleClick}>
+          다음
+        </div>
+      );
+
+    case 'prev':
+      return (
+        <div className={grayButtonStyle} onClick={handleClick}>
+          이전
+        </div>
+      );
+
+    case 'submit':
+      return (
+        <div className={buttonStyle} onClick={handleClick}>
+          완료
+        </div>
+      );
+
+    default:
+      break;
+  }
+};
+
+export default FormButton;
diff --git a/src/components/onboarding/MultiSelect.tsx b/src/components/onboarding/MultiSelect.tsx
new file mode 100644
index 0000000..eff49e0
--- /dev/null
+++ b/src/components/onboarding/MultiSelect.tsx
@@ -0,0 +1,12 @@
+const MultiSelect = ({ title }: { title: string }) => {
+  return (
+    <div className="flex flex-col gap-6">
+      {/* 제목 */}
+      <p className="text-[24px] font-semibold">{title}을 선택하세요</p>
+      {/* 입력칸 */}
+      <input type="text" className="rounded-xl border border-gray-200 px-2 py-4 text-[20px]" />
+    </div>
+  );
+};
+
+export default MultiSelect;
diff --git a/src/components/onboarding/PriceInput.tsx b/src/components/onboarding/PriceInput.tsx
new file mode 100644
index 0000000..ae5dc0d
--- /dev/null
+++ b/src/components/onboarding/PriceInput.tsx
@@ -0,0 +1,32 @@
+import { useState } from 'react';
+
+const PriceInput = ({ title, placeholder }: { title: string; placeholder?: string }) => {
+  const [value, setValue] = useState('');
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    // 숫자만 입력 가능하도록
+    const numericValue = e.target.value.replace(/[^0-9]/g, '');
+    setValue(numericValue);
+  };
+
+  return (
+    <div className="flex flex-col gap-6">
+      {/* 제목 */}
+      <p className="text-[24px] font-semibold">{title}을 입력해주세요</p>
+
+      {/* 입력칸 */}
+      <div className="relative flex items-center rounded-xl border border-gray-200">
+        <input
+          type="text"
+          value={value}
+          onChange={handleChange}
+          placeholder={placeholder || '0'}
+          className="flex-1 rounded-xl px-4 py-4 text-[20px] outline-none"
+        />
+        <span className="pointer-events-none pr-4 text-[20px] text-gray-500">만원</span>
+      </div>
+    </div>
+  );
+};
+
+export default PriceInput;
diff --git a/src/components/onboarding/SingleSelect.tsx b/src/components/onboarding/SingleSelect.tsx
new file mode 100644
index 0000000..3e45ca0
--- /dev/null
+++ b/src/components/onboarding/SingleSelect.tsx
@@ -0,0 +1,31 @@
+const defaultOptions = [
+  { id: 1, name: 'option1' },
+  { id: 2, name: 'option2' },
+  { id: 3, name: 'option3' },
+  { id: 4, name: 'option4' },
+  { id: 5, name: 'option5' },
+  { id: 6, name: 'option6' },
+  { id: 7, name: 'option7' },
+];
+
+const SingleSelect = ({ title }: { title: string }) => {
+  return (
+    <div className="flex flex-col gap-6">
+      {/* 제목 */}
+      <p className="text-[24px] font-semibold">{title} 선택하세요</p>
+      {/* 단일 선택 버튼 */}
+      <select className="rounded-xl border border-gray-200 px-2 py-4 text-[20px] outline-none focus:border-gray-200">
+        <option className="" value="">
+          선택하세요
+        </option>
+        {defaultOptions.map((option) => (
+          <option key={option.id} value={option.id}>
+            {option.name}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+
+export default SingleSelect;
diff --git a/src/components/onboarding/TextInput.tsx b/src/components/onboarding/TextInput.tsx
new file mode 100644
index 0000000..6ef140b
--- /dev/null
+++ b/src/components/onboarding/TextInput.tsx
@@ -0,0 +1,16 @@
+const TextInput = ({ title, placeholder }: { title: string; placeholder?: string }) => {
+  return (
+    <div className="flex flex-col gap-6">
+      {/* 제목 */}
+      <p className="text-[24px] font-semibold">{title} 입력해주세요</p>
+      {/* 입력칸 */}
+      <input
+        type="text"
+        placeholder={placeholder}
+        className="rounded-xl border border-gray-200 px-2 py-4 text-[20px] outline-none focus:border-gray-200"
+      />
+    </div>
+  );
+};
+
+export default TextInput;
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 3b7c740..e79c14a 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -6,7 +6,7 @@ const HomePage = () => {
   return (
     <div className="flex h-full flex-col items-center justify-center gap-8">
       <img src={logo} alt="Vite logo" className="h-40" />
-      <h1 className="text-6xl text-[#0D2D84]">Snowgent</h1>
+      <h1 className="text-6xl font-bold text-[#0D2D84]">Snowgent</h1>
       <button
         onClick={() => navigate('/onboarding')}
         className="cursor-pointer rounded-lg bg-blue-50 px-10 py-5 text-xl font-semibold text-[#0D2D84] hover:bg-blue-100"
diff --git a/src/pages/onboarding/Onboarding.tsx b/src/pages/onboarding/Onboarding.tsx
index c13d166..74e11e5 100644
--- a/src/pages/onboarding/Onboarding.tsx
+++ b/src/pages/onboarding/Onboarding.tsx
@@ -1,5 +1,82 @@
+import { useState } from 'react';
+import Navigation from '../../components/Navigation';
+import FormButton from '../../components/onboarding/FormButton';
+import { useNavigate } from 'react-router-dom';
+import TextInput from '../../components/onboarding/TextInput';
+import PriceInput from '../../components/onboarding/PriceInput';
+import SingleSelect from '../../components/onboarding/SingleSelect';
+import MultiSelect from '../../components/onboarding/MultiSelect';
+
 const Onboarding = () => {
-  return <div>Onboarding</div>;
+  const navigate = useNavigate();
+  const [currentStep, setCurrentStep] = useState(1);
+  const totalSteps = 5;
+
+  const handlePrev = () => {
+    if (currentStep > 1) {
+      setCurrentStep(currentStep - 1);
+    }
+  };
+
+  const handleNext = () => {
+    if (currentStep < totalSteps) {
+      setCurrentStep(currentStep + 1);
+    }
+  };
+
+  const handleComplete = () => {
+    navigate('/chat');
+  };
+
+  const renderStepContent = () => {
+    switch (currentStep) {
+      case 1:
+        return <SingleSelect key="step1" title="업종을" />;
+      case 2:
+        return <TextInput key="step2" title="업체명을" placeholder="" />;
+      case 3:
+        return <TextInput key="step3" title="위치(시군구)를" placeholder="" />;
+      case 4:
+        return <PriceInput key="step4" title="평균 월매출" placeholder="숫자" />;
+      case 5:
+        return <PriceInput key="step5" title="목표 월매출" placeholder="숫자" />;
+      default:
+        return <MultiSelect key="default" title="원하는 타겟층" />;
+    }
+  };
+
+  return (
+    <div className="flex h-full flex-col">
+      <Navigation />
+      <div className="flex flex-1 flex-col p-5">
+        <div className="mb-6">
+          <div className="mb-2 flex justify-between text-sm text-gray-600">
+            <span>단계 {currentStep}</span>
+            <span>
+              {currentStep} / {totalSteps}
+            </span>
+          </div>
+          <div className="h-2 w-full rounded-full bg-gray-200">
+            <div
+              className="h-2 rounded-full bg-blue-500 transition-all duration-300"
+              style={{ width: `${(currentStep / totalSteps) * 100}%` }}
+            />
+          </div>
+        </div>
+
+        <div className="flex-1 overflow-y-auto">{renderStepContent()}</div>
+
+        <div className="mt-6 flex gap-3">
+          {currentStep > 1 && <FormButton type="prev" onClick={handlePrev} />}
+          {currentStep === totalSteps ? (
+            <FormButton type="submit" onClick={handleComplete} />
+          ) : (
+            <FormButton type="next" onClick={handleNext} />
+          )}
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default Onboarding;