diff --git a/src/assets/images/ProgressBarIcon.svg b/src/assets/images/ProgressBarIcon.svg
new file mode 100644
index 00000000..21072a8e
--- /dev/null
+++ b/src/assets/images/ProgressBarIcon.svg
@@ -0,0 +1,7 @@
+<svg width="74" height="3" viewBox="0 0 74 3" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 36811">
+<rect id="Rectangle 2586" x="0.0184326" y="0.0751953" width="22" height="2" rx="1" fill="#29DDF6"/>
+<rect id="Rectangle 2587" x="25.8544" y="0.0751953" width="22" height="2" rx="1" fill="#29DDF6"/>
+<rect id="Rectangle 2588" x="51.1543" y="0.0751953" width="22" height="2" rx="1" fill="#D7D7D7"/>
+</g>
+</svg>
diff --git a/src/assets/images/profileImg.svg b/src/assets/images/profileImg.svg
new file mode 100644
index 00000000..5b23886b
--- /dev/null
+++ b/src/assets/images/profileImg.svg
@@ -0,0 +1,7 @@
+<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 36722">
+<circle id="Ellipse 517" cx="40.7227" cy="40.0752" r="40" fill="#EDEDED"/>
+<circle id="Ellipse 33" cx="8.12698" cy="8.12698" r="8.12698" transform="matrix(-1 0 0 1 48.849 22.2969)" fill="white" stroke="white" stroke-width="3.04762"/>
+<path id="Rectangle 2579" d="M26.5 50.6095C26.5 48.8615 27.5989 47.3021 29.2451 46.7142C36.6669 44.0635 44.7775 44.0635 52.1994 46.7142C53.8456 47.3021 54.9444 48.8615 54.9444 50.6095V53.2823C54.9444 55.6948 52.8076 57.5481 50.4193 57.2069L48.4802 56.9299C43.3343 56.1947 38.1101 56.1947 32.9643 56.9299L31.0251 57.2069C28.6368 57.5481 26.5 55.6948 26.5 53.2823V50.6095Z" fill="white" stroke="white" stroke-width="3.04762"/>
+</g>
+</svg>
diff --git a/src/components/common/icons/Icons.tsx b/src/components/common/icons/Icons.tsx
index c70960f0..f2266294 100644
--- a/src/components/common/icons/Icons.tsx
+++ b/src/components/common/icons/Icons.tsx
@@ -766,3 +766,96 @@ export const KakaoIcon = () => {
     </svg>
   );
 };
+
+interface ProgressBarProps {
+  progress: number;
+}
+
+export const ProgressBarIcon = ({ progress }: ProgressBarProps) => {
+  return (
+    <svg
+      width="74"
+      height="3"
+      viewBox="0 0 74 3"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <g id="Group 36811">
+        <rect
+          id="Rectangle 2586"
+          x="0.0184326"
+          y="0.0751953"
+          width="22"
+          height="2"
+          rx="1"
+          fill="#29DDF6"
+        />
+        <rect
+          id="Rectangle 2587"
+          x="25.8544"
+          y="0.0751953"
+          width="22"
+          height="2"
+          rx="1"
+          fill={progress > 1 ? '#29DDF6' : '#D7D7D7'}
+        />
+        <rect
+          id="Rectangle 2588"
+          x="51.1543"
+          y="0.0751953"
+          width="22"
+          height="2"
+          rx="1"
+          fill={progress > 2 ? '#29DDF6' : '#D7D7D7'}
+        />
+      </g>
+    </svg>
+  );
+};
+
+export const CircleIcon = () => {
+  return (
+    <svg
+      width="25"
+      height="25"
+      viewBox="0 0 25 25"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <g id="Circle">
+        <circle
+          id="Ellipse 537"
+          cx="12.875"
+          cy="12.0908"
+          r="11.3939"
+          fill="white"
+          stroke="#D7D7D7"
+          stroke-width="1.21212"
+        />
+        <svg
+          x="6"
+          y="6"
+          width="14"
+          height="12"
+          viewBox="0 0 14 12"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg">
+          <g id="Group 36734">
+            <path
+              id="Union (Stroke)"
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M5.2222 1.43945C4.71182 1.43945 4.26848 1.79052 4.15149 2.2873L4.01121 2.88298C3.93641 3.2006 3.6528 3.51529 3.23582 3.51529H2.475C1.86749 3.51529 1.375 4.00778 1.375 4.61529V9.64246C1.375 10.25 1.86749 10.7425 2.475 10.7425H11.275C11.8825 10.7425 12.375 10.25 12.375 9.64246V4.61529C12.375 4.00778 11.8825 3.51529 11.275 3.51529H10.5149C10.0996 3.51529 9.81689 3.20191 9.74282 2.88489L9.60366 2.28921C9.48739 1.7915 9.04362 1.43945 8.53251 1.43945H5.2222ZM3.17812 2.05807C3.40147 1.10966 4.24784 0.439453 5.2222 0.439453H8.53251C9.50826 0.439453 10.3555 1.11155 10.5774 2.06172L10.6834 2.51529H11.275C12.4348 2.51529 13.375 3.45549 13.375 4.61529V9.64246C13.375 10.8023 12.4348 11.7425 11.275 11.7425H2.475C1.3152 11.7425 0.375 10.8023 0.375 9.64246V4.61529C0.375 3.45549 1.3152 2.51529 2.475 2.51529H3.07044L3.17812 2.05807Z"
+              fill="#1E1E1E"
+            />
+            <path
+              id="Ellipse 536 (Stroke)"
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M6.87493 4.79492C5.90442 4.79492 5.11768 5.58167 5.11768 6.55217C5.11768 7.52268 5.90442 8.30942 6.87493 8.30942C7.84543 8.30942 8.63218 7.52268 8.63218 6.55217C8.63218 5.58167 7.84543 4.79492 6.87493 4.79492ZM4.11768 6.55217C4.11768 5.02939 5.35214 3.79492 6.87493 3.79492C8.39771 3.79492 9.63218 5.02939 9.63218 6.55217C9.63218 8.07496 8.39771 9.30942 6.87493 9.30942C5.35214 9.30942 4.11768 8.07496 4.11768 6.55217Z"
+              fill="#1E1E1E"
+            />
+          </g>
+        </svg>
+      </g>
+    </svg>
+  );
+};
diff --git a/src/components/user/useInputBox/UserInputBox.tsx b/src/components/user/useInputBox/UserInputBox.tsx
index 89841c33..c985da3e 100644
--- a/src/components/user/useInputBox/UserInputBox.tsx
+++ b/src/components/user/useInputBox/UserInputBox.tsx
@@ -3,6 +3,7 @@ import { CloseIcon } from '@components/common/icons/Icons';
 
 interface Props {
   label: string;
+  subLabel?: string;
   type?: string;
   name: string;
   placeholder: string;
@@ -14,6 +15,7 @@ interface Props {
 
 const UserInputBox = ({
   label,
+  subLabel,
   type = 'password',
   name,
   placeholder,
@@ -31,6 +33,7 @@ const UserInputBox = ({
       <div className="flex flex-col gap-2">
         <label htmlFor={label} className="body3 text-main2">
           {label}
+          {subLabel && <span className="body5">{subLabel}</span>}
         </label>
         <div className="focus-within:border-main1 flex h-10 items-center border-b-[1.25px] border-solid border-gray3">
           <input
diff --git a/src/pages/signup/signup.page.tsx b/src/pages/signup/signup.page.tsx
index d28637c1..0ff7189b 100644
--- a/src/pages/signup/signup.page.tsx
+++ b/src/pages/signup/signup.page.tsx
@@ -1,3 +1,5 @@
+import { Back } from '@components/common';
+import { ProgressBarIcon } from '@components/common/icons/Icons';
 import { UserEmailInputBox, UserPwInputBox } from '@components/user';
 import { useState } from 'react';
 
@@ -6,7 +8,11 @@ const Signup = () => {
 
   return (
     <div className="relative">
-      <h1 className="title1 my-11">
+      <Back />
+      <div className=" mt-2 flex justify-end">
+        <ProgressBarIcon progress={1} />
+      </div>
+      <h1 className="title1 mb-9 mt-8">
         위플플 이용을 위해
         <br />
         회원가입을 해주세요
diff --git a/src/pages/signupInfo/signupInfo.page.tsx b/src/pages/signupInfo/signupInfo.page.tsx
new file mode 100644
index 00000000..543adf04
--- /dev/null
+++ b/src/pages/signupInfo/signupInfo.page.tsx
@@ -0,0 +1,55 @@
+import { Back, Button } from '@components/common';
+import {
+  CameraIcon,
+  CircleIcon,
+  ProgressBarIcon,
+} from '@components/common/icons/Icons';
+import {
+  UserEmailInputBox,
+  UserInputBox,
+  UserPwInputBox,
+} from '@components/user';
+import { useState } from 'react';
+import profileImg from '@assets/images/profileImg.svg';
+
+const SignupInfo = () => {
+  const [isActive, setIsActive] = useState<boolean>(false);
+
+  return (
+    <div className="relative">
+      <Back />
+      <div className="mt-2 flex justify-end">
+        <ProgressBarIcon progress={2} />
+      </div>
+      <h1 className="title1 mb-9 mt-8">
+        프로필 사진과 닉네임을
+        <br />
+        설정해주세요.
+      </h1>
+      <div className="mb-10 flex justify-center">
+        <label htmlFor="profileImg" className="relative">
+          <img src={profileImg} alt="유저 프로필" />
+          <div className="absolute bottom-0 right-0">
+            <CircleIcon />
+          </div>
+        </label>
+        <input type="file" id="profileImg" className="m-[-1px] h-px w-px" />
+      </div>
+      <form>
+        <UserInputBox
+          type="text"
+          label="닉네임"
+          placeholder="닉네임을 입력하세요"
+        />
+        <div>성별</div>
+        <div>여</div>
+        <div>나이</div>
+        <div>10대</div>
+
+        <Button isActive={false}>다음</Button>
+      </form>
+    </div>
+  );
+};
+
+export default SignupInfo;
diff --git a/src/router/mainRouter.tsx b/src/router/mainRouter.tsx
index eccf616c..b66fed53 100644
--- a/src/router/mainRouter.tsx
+++ b/src/router/mainRouter.tsx
@@ -6,6 +6,7 @@ import Detail from '@pages/detail/detail.page';
 import { Signup } from '@pages/index';
 import PostingReview from '@pages/postingReview/postingReview.page';
 import Signin from '@pages/signin/signin.page';
+import SignupInfo from '@pages/signupInfo/signupInfo.page';
 
 export function MainLayout() {
   return (
@@ -27,6 +28,7 @@ const MainRouter = () => {
           <Route index element={<Main />} />
           <Route path="/detail/:id" element={<Detail />} />
           <Route path="/signup" element={<Signup />} />
+          <Route path="/signup/info" element={<SignupInfo />} />
           <Route path="/postingReview/:id" element={<PostingReview />} />
           <Route path="/signin" element={<Signin />} />
         </Route>