diff --git a/src/@types/auth.types.ts b/src/@types/auth.types.ts
index b6e1ac93..6c73fabe 100644
--- a/src/@types/auth.types.ts
+++ b/src/@types/auth.types.ts
@@ -1,9 +1,10 @@
-import {
+import type {
   FieldErrors,
   UseFormGetValues,
   UseFormRegister,
   UseFormResetField,
   UseFormSetError,
+  UseFormSetValue,
 } from 'react-hook-form';
 
 export interface AuthRequest {
@@ -50,3 +51,9 @@ export interface AuthNicknameInputBoxProps extends AuthInputBoxProps {
   getValues: UseFormGetValues<any>;
   setError: UseFormSetError<any>;
 }
+
+export interface AuthImgProps {
+  register: UseFormRegister<any>;
+  inputValue: string;
+  setValue: UseFormSetValue<any>;
+}
diff --git a/src/api/member.ts b/src/api/member.ts
index dd73f20f..09da9bf5 100644
--- a/src/api/member.ts
+++ b/src/api/member.ts
@@ -29,10 +29,12 @@ export const putMemberPassword = async (pwDataa: EditPasswordProps) => {
 };
 
 // 프로필 이미지 업로드
-export const postMember = async (imgData: any) => {
-  authClient.defaults.headers.post['Content-Type'] = 'multipart/form-data';
-  const res = await authClient.post(`member`, imgData);
-  authClient.defaults.headers.post['Content-Type'] = 'application/json';
+export const postMember = async (formData: FormData) => {
+  const res = await authClient.post(`member`, formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+  });
 
   return res;
 };
diff --git a/src/assets/images/defaultProfileImg.svg b/src/assets/images/defaultProfileImg.svg
deleted file mode 100644
index 39bf316b..00000000
--- a/src/assets/images/defaultProfileImg.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<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.3086" cy="40.4521" r="40" fill="#EDEDED"/>
-<circle id="Ellipse 33" cx="8.12698" cy="8.12698" r="8.12698" transform="matrix(-1 0 0 1 48.4346 22.6738)" fill="white" stroke="white" stroke-width="3.04762"/>
-<path id="Rectangle 2579" d="M26.0859 50.9864C26.0859 49.2384 27.1848 47.6791 28.831 47.0912C36.2529 44.4405 44.3634 44.4405 51.7853 47.0912C53.4315 47.6791 54.5304 49.2384 54.5304 50.9864V53.6592C54.5304 56.0718 52.3936 57.925 50.0053 57.5838L48.0661 57.3068C42.9203 56.5717 37.696 56.5717 32.5502 57.3068L30.6111 57.5838C28.2227 57.925 26.0859 56.0718 26.0859 53.6592V50.9864Z" fill="white" stroke="white" stroke-width="3.04762"/>
-</g>
-</svg>
diff --git a/src/components/Auth/AuthInput/AuthInputBox/AuthNicknameInputBox.tsx b/src/components/Auth/AuthInput/AuthInputBox/AuthNicknameInputBox.tsx
index 0efa08be..e83c28fe 100644
--- a/src/components/Auth/AuthInput/AuthInputBox/AuthNicknameInputBox.tsx
+++ b/src/components/Auth/AuthInput/AuthInputBox/AuthNicknameInputBox.tsx
@@ -1,6 +1,8 @@
 import { getCheckNickname } from '@api/auth';
 import { AuthInputWrapper, AuthInput, ErrorMessage } from './AuthInputItem';
 import type { AuthNicknameInputBoxProps } from '@/@types/auth.types';
+import { useRecoilValue } from 'recoil';
+import { UserInfoState } from '@recoil/Auth.atom';
 
 const AuthNicknameInputBox = ({
   register,
@@ -15,8 +17,13 @@ const AuthNicknameInputBox = ({
   const nicknameError = errors.nickname;
   const nicknameErrorMessage = nicknameError?.message;
 
+  const userInfo = useRecoilValue(UserInfoState);
+
   const onNicknameBlur = async () => {
-    if (nicknamePatternValue.test(getValues('nickname'))) {
+    if (
+      nicknamePatternValue.test(getValues('nickname')) &&
+      userInfo?.nickname !== inputValue
+    ) {
       try {
         const res = await getCheckNickname(getValues('nickname'));
         if (res.status === 200) {
diff --git a/src/components/Auth/Login/KakaoLogin.tsx b/src/components/Auth/Login/KakaoLogin.tsx
index dfc5dd26..70c5f97c 100644
--- a/src/components/Auth/Login/KakaoLogin.tsx
+++ b/src/components/Auth/Login/KakaoLogin.tsx
@@ -11,8 +11,6 @@ const KakaoLogin = () => {
   const [searchParams, _] = useSearchParams();
   const nickname = searchParams.get('nickname');
   const email = searchParams.get('email');
-  const gender = searchParams.get('gender');
-  const age_range = searchParams.get('age_range');
   const accessToken = searchParams.get('token');
   const profile_image = searchParams.get('profile_image');
   const signup = searchParams.get('signup');
@@ -24,8 +22,8 @@ const KakaoLogin = () => {
         nickname: nickname!,
         email: email!,
         profileImageUrl: profile_image,
-        ageType: age_range,
-        genderType: gender,
+        ageType: null,
+        genderType: null,
         survey: null,
       });
       if (signup === 'true') {
diff --git a/src/components/Auth/SignupInfo/AuthDropDown/AuthDropDown.tsx b/src/components/Auth/SignupInfo/AuthDropDown/AuthDropDown.tsx
index 94c38aed..0ff87eea 100644
--- a/src/components/Auth/SignupInfo/AuthDropDown/AuthDropDown.tsx
+++ b/src/components/Auth/SignupInfo/AuthDropDown/AuthDropDown.tsx
@@ -1,17 +1,31 @@
-import { useState } from 'react';
 import AuthDropDownOption from './AuthDropDownOption';
 import * as Select from '@radix-ui/react-select';
 import { DownIcon } from '@components/common/icons/Icons';
+import { UseFormRegister, UseFormSetValue } from 'react-hook-form';
 
 interface Props {
   label: string;
   text: string;
   options: SelectOption[];
+  name: string;
+  register: UseFormRegister<any>;
+  setValue: UseFormSetValue<any>;
+
+  // initialState: string | null;
+  // setState: React.Dispatch<React.SetStateAction<string | null>>;
 }
 
-const AuthDropDown = ({ label, text, options }: Props) => {
-  // const [isShow, setIsShow] = useState<boolean>(false);
-  const [_, setIsSelected] = useState<string>(text);
+const AuthDropDown = ({
+  label,
+  text,
+  options,
+  name,
+  register,
+  setValue,
+}: Props) => {
+  const onSelectClick = (e: any) => {
+    setValue(name, e);
+  };
 
   return (
     // <div className="z-10 flex flex-col">
@@ -45,95 +59,32 @@ const AuthDropDown = ({ label, text, options }: Props) => {
     //     )}
     //   </div>
     // </div>
-
-    <Select.Root onValueChange={() => setIsSelected('dd')}>
-      <h2 className="body2 mb-2 text-main1">{label}</h2>
-      <Select.Trigger className="data-[placeholder]:body5 relative flex h-12 items-center justify-center rounded-lg border border-solid border-gray3 bg-white hover:bg-gray1 data-[state=open]:rounded-b-none data-[placeholder]:text-gray4">
-        <Select.Value className="body5 text-gray6" placeholder={text} />
-        <Select.Icon className="absolute right-[10px] top-4">
-          <DownIcon size={20} color="#888888" />
-        </Select.Icon>
-      </Select.Trigger>
-      <Select.Portal>
-        <Select.Content
-          position={'popper'}
-          collisionPadding={0}
-          // avoidCollisions={isSelected ? false : true}
-          className="h-36 overflow-hidden rounded-b-lg border-x border-b border-solid border-gray3 bg-white">
-          <Select.Viewport>
-            {options.map((option) => (
-              <AuthDropDownOption value={option.value}>
-                {option.value}
-              </AuthDropDownOption>
-            ))}
-          </Select.Viewport>
-        </Select.Content>
-      </Select.Portal>
-    </Select.Root>
+    <div className="w-full">
+      <Select.Root onValueChange={onSelectClick} {...register(name)}>
+        <h2 className="body2 mb-2 text-main1">{label}</h2>
+        <Select.Trigger className="data-[placeholder]:body5 relative flex h-12 w-full items-center justify-center rounded-lg border border-solid border-gray3 bg-white hover:bg-gray1 data-[state=open]:rounded-b-none data-[placeholder]:text-gray4">
+          <Select.Value className="body5 text-gray6" placeholder={text} />
+          <Select.Icon className="absolute right-[10px] top-4">
+            <DownIcon size={20} color="#888888" />
+          </Select.Icon>
+        </Select.Trigger>
+        <Select.Portal>
+          <Select.Content
+            position={'popper'}
+            collisionPadding={0}
+            className="h-36 overflow-hidden rounded-b-lg border-x border-b border-solid border-gray3 bg-white">
+            <Select.Viewport>
+              {options.map((option) => (
+                <AuthDropDownOption key={option.id} value={option.id}>
+                  {option.value}
+                </AuthDropDownOption>
+              ))}
+            </Select.Viewport>
+          </Select.Content>
+        </Select.Portal>
+      </Select.Root>
+    </div>
   );
 };
 
 export default AuthDropDown;
-
-{
-  /* <Select.Root>
-<Select.Trigger
-  className="inline-flex items-center justify-center rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-violet11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-violet9 outline-none"
-  aria-label="Food"
->
-  <Select.Value placeholder="Select a fruit…" />
-  <Select.Icon className="text-violet11">
-    <ChevronDownIcon />
-  </Select.Icon>
-</Select.Trigger>
-<Select.Portal>
-  <Select.Content className="overflow-hidden bg-white rounded-md shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)]">
-    <Select.ScrollUpButton className="flex items-center justify-center h-[25px] bg-white text-violet11 cursor-default">
-      <ChevronUpIcon />
-    </Select.ScrollUpButton>
-    <Select.Viewport className="p-[5px]">
-      <Select.Group>
-        <Select.Label className="px-[25px] text-xs leading-[25px] text-mauve11">
-          Fruits
-        </Select.Label>
-        <AuthDropDownOption value="apple">Apple</AuthDropDownOption>
-        <AuthDropDownOption value="banana">Banana</AuthDropDownOption>
-        <AuthDropDownOption value="blueberry">Blueberry</AuthDropDownOption>
-        <AuthDropDownOption value="grapes">Grapes</AuthDropDownOption>
-        <AuthDropDownOption value="pineapple">Pineapple</AuthDropDownOption>
-      </Select.Group>
-
-      <Select.Separator className="h-[1px] bg-violet6 m-[5px]" />
-
-      <Select.Group>
-        <Select.Label className="px-[25px] text-xs leading-[25px] text-mauve11">
-          Vegetables
-        </Select.Label>
-        <AuthDropDownOption value="aubergine">Aubergine</AuthDropDownOption>
-        <AuthDropDownOption value="broccoli">Broccoli</AuthDropDownOption>
-        <AuthDropDownOption value="carrot" disabled>
-          Carrot
-        </AuthDropDownOption>
-        <AuthDropDownOption value="courgette">Courgette</AuthDropDownOption>
-        <AuthDropDownOption value="leek">Leek</AuthDropDownOption>
-      </Select.Group>
-
-      <Select.Separator className="h-[1px] bg-violet6 m-[5px]" />
-
-      <Select.Group>
-        <Select.Label className="px-[25px] text-xs leading-[25px] text-mauve11">
-          Meat
-        </Select.Label>
-        <AuthDropDownOption value="beef">Beef</AuthDropDownOption>
-        <AuthDropDownOption value="chicken">Chicken</AuthDropDownOption>
-        <AuthDropDownOption value="lamb">Lamb</AuthDropDownOption>
-        <AuthDropDownOption value="pork">Pork</AuthDropDownOption>
-      </Select.Group>
-    </Select.Viewport>
-    <Select.ScrollDownButton className="flex items-center justify-center h-[25px] bg-white text-violet11 cursor-default">
-      <ChevronDownIcon />
-    </Select.ScrollDownButton>
-  </Select.Content>
-</Select.Portal>
-</Select.Root> */
-}
diff --git a/src/components/Auth/SignupInfo/SignupInfoForm.tsx b/src/components/Auth/SignupInfo/SignupInfoForm.tsx
index 9ac4f054..8c5732ff 100644
--- a/src/components/Auth/SignupInfo/SignupInfoForm.tsx
+++ b/src/components/Auth/SignupInfo/SignupInfoForm.tsx
@@ -23,22 +23,28 @@ const SignupInfoForm = () => {
     mode: 'onChange',
     criteriaMode: 'all',
   });
+  // const [genderType, setGenderType] = useState<string | null>(null);
+  // const [ageType, setAgeType] = useState<string | null>(null);
+
   const navigate = useNavigate();
 
   const userInfo = useRecoilValue(UserInfoState);
   useEffect(() => {
     setValue('nickname', userInfo?.nickname);
+    setValue('profileImageUrl', userInfo?.profileImageUrl);
+    setValue('genderType', userInfo?.genderType);
+    setValue('ageType', userInfo?.ageType);
   }, [userInfo]);
 
   const onInfoSubmit: SubmitHandler<any> = async (data) => {
-    const { nickname } = data;
+    const { nickname, profileImageUrl, genderType, ageType } = data;
 
     try {
       const res = await putMember({
         nickname: nickname,
-        profileImageUrl: '',
-        ageType: null,
-        genderType: null,
+        profileImageUrl: profileImageUrl,
+        genderType: genderType,
+        ageType: ageType,
       });
       if (res.status === 200) {
         navigate('/');
@@ -49,10 +55,16 @@ const SignupInfoForm = () => {
   };
 
   return (
-    <form onSubmit={handleSubmit(onInfoSubmit)} className="w-full">
+    <form
+      onSubmit={handleSubmit(onInfoSubmit)}
+      className="flex h-[100vh] w-full flex-col justify-between">
       <div>
         <div className="mb-10">
-          <UserInfoImg />
+          <UserInfoImg
+            register={register}
+            setValue={setValue}
+            inputValue={watch('profileImageUrl')}
+          />
         </div>
         <AuthNicknameInputBox
           register={register}
@@ -67,11 +79,17 @@ const SignupInfoForm = () => {
             label="성별"
             text={'성별을 선택해주세요.'}
             options={genderArr}
+            name={'genderType'}
+            register={register}
+            setValue={setValue}
           />
           <AuthDropDown
             label="연령대"
             text={'연령대를 선택해주세요.'}
             options={ageArr}
+            name={'ageType'}
+            register={register}
+            setValue={setValue}
           />
         </div>
       </div>
@@ -85,15 +103,15 @@ const SignupInfoForm = () => {
 export default SignupInfoForm;
 
 const genderArr: SelectOption[] = [
-  { id: '1', value: '여' },
-  { id: '2', value: '남' },
-  { id: '3', value: '기타' },
+  { id: 'FEMALE', value: '여' },
+  { id: 'MALE', value: '남' },
+  { id: 'NON_BINARY', value: '기타' },
 ];
 
 const ageArr: SelectOption[] = [
-  { id: '1', value: '10대' },
-  { id: '2', value: '20대' },
-  { id: '3', value: '30대' },
-  { id: '4', value: '40대' },
-  { id: '5', value: '50대 이상' },
+  { id: 'TEENAGER', value: '10대' },
+  { id: 'TWENTIES', value: '20대' },
+  { id: 'THIRTIES', value: '30대' },
+  { id: 'FOURTIES', value: '40대' },
+  { id: 'ABOVE_FIFTIES', value: '50대 이상' },
 ];
diff --git a/src/components/Auth/SignupInfo/UserInfoImg.tsx b/src/components/Auth/SignupInfo/UserInfoImg.tsx
index 94431846..904fd8b9 100644
--- a/src/components/Auth/SignupInfo/UserInfoImg.tsx
+++ b/src/components/Auth/SignupInfo/UserInfoImg.tsx
@@ -1,18 +1,24 @@
-import { CameraIcon } from '@components/common/icons/Icons';
+import type { AuthImgProps } from '@/@types/auth.types';
+import { postMember } from '@api/member';
+import { CameraIcon, CloseIcon } from '@components/common/icons/Icons';
 
-const UserInfoImg = () => {
-  const onImgChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    console.log(e);
-
-    // let fileArr = e.target.files;
-    // setPostImg(Array.from(fileArr));
-
-    // let fileRead = new FileReader();
-    // fileRead.onload = function(){
-    //     setPreviewImg(fileRead.result);
-    // };
+const UserInfoImg = ({ register, setValue, inputValue }: AuthImgProps) => {
+  const onImgChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    try {
+      const formData = new FormData();
+      formData.append('images', (e.target.files as FileList)[0]);
+      const res = await postMember(formData);
+      if (res.data.status === 200) {
+        setValue('profileImageUrl', res.data.data.imageUrl);
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  };
 
-    // fileRead.readAsDataURL(file[0]);
+  const onRemoveClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    setValue('profileImageUrl', null);
   };
   return (
     <div className="w-full">
@@ -21,11 +27,22 @@ const UserInfoImg = () => {
         className="relative mx-auto flex h-20 w-20 cursor-pointer justify-center overflow-hidden">
         <img
           className="rounded-full"
-          src="https://d2v80xjmx68n4w.cloudfront.net/gigs/FyS0m1682137694.jpg"
+          src={
+            inputValue !== null
+              ? inputValue
+              : 'https://elasticbeanstalk-ap-northeast-2-077853585725.s3.ap-northeast-2.amazonaws.com/static/387fde04-f7d4-443d-88e1-b678ab5e079ddefaultProfileImg.svg'
+          }
         />
-        <div className="absolute bottom-0 right-0">
+        {inputValue && (
+          <button
+            type="button"
+            onClick={onRemoveClick}
+            className="absolute right-0 top-0">
+            <CloseIcon size={20} fill="#D7D7D7" />
+          </button>
+        )}
+        <div className="absolute bottom-0 right-0 flex h-6 w-6 items-center justify-center rounded-2xl border border-solid border-gray3 bg-white">
           <CameraIcon />
-          <img src="@/assets/images/cameraCircle.svg" />
         </div>
       </label>
       <input
@@ -35,6 +52,12 @@ const UserInfoImg = () => {
         accept="image/*"
         onChange={onImgChange}
       />
+      <input
+        className="hidden"
+        id="profileImage"
+        type="text"
+        {...register('profileImageUrl')}
+      />
     </div>
   );
 };
diff --git a/src/components/Mypage/DeleteMemberButton.tsx b/src/components/Mypage/DeleteMemberButton.tsx
index 8313f23b..ca73c422 100644
--- a/src/components/Mypage/DeleteMemberButton.tsx
+++ b/src/components/Mypage/DeleteMemberButton.tsx
@@ -18,7 +18,7 @@ const DeleteMemberButton = () => {
         alert('회원 탈퇴되었습니다. 감사합니다.');
       }
     } catch (err) {
-      console.log(err);
+      console.error(err);
     }
   };
 
@@ -31,7 +31,7 @@ const DeleteMemberButton = () => {
       message="정말 탈퇴하시겠어요?"
       onConfirm={handleConfirm}
       onCancel={handleCancel}>
-      <button className="body5 text-gray4">회원 탈퇴</button>
+      <button className="body5 mt-3 text-gray4">회원 탈퇴</button>
     </Alert>
   );
 };
diff --git a/src/components/Mypage/LogoutButton.tsx b/src/components/Mypage/LogoutButton.tsx
index 5a5fd2c4..0e6666d7 100644
--- a/src/components/Mypage/LogoutButton.tsx
+++ b/src/components/Mypage/LogoutButton.tsx
@@ -9,7 +9,7 @@ const LogoutButton = () => {
   const navigate = useNavigate();
   const setUserInfo = useSetRecoilState(UserInfoState);
 
-  const onLogoutClick = async (e: any) => {
+  const onLogoutClick = async (e: React.MouseEvent<HTMLElement>) => {
     e.stopPropagation();
   };
 
diff --git a/src/components/Mypage/MypageInfo.tsx b/src/components/Mypage/MypageInfo.tsx
index f3001824..b18ae669 100644
--- a/src/components/Mypage/MypageInfo.tsx
+++ b/src/components/Mypage/MypageInfo.tsx
@@ -22,7 +22,7 @@ const MypageInfo = () => {
             src={
               userInfo?.profileImageUrl
                 ? userInfo.profileImageUrl
-                : 'http://k.kakaocdn.net/dn/1G9kp/btsAot8liOn/8CWudi3uy07rvFNUkk3ER0/img_110x110.jpg'
+                : 'https://elasticbeanstalk-ap-northeast-2-077853585725.s3.ap-northeast-2.amazonaws.com/static/387fde04-f7d4-443d-88e1-b678ab5e079ddefaultProfileImg.svg'
             }
           />
         </div>
diff --git a/src/components/Mypage/UserInfoForm.tsx b/src/components/Mypage/UserInfoForm.tsx
index cb32de66..2925a017 100644
--- a/src/components/Mypage/UserInfoForm.tsx
+++ b/src/components/Mypage/UserInfoForm.tsx
@@ -28,15 +28,16 @@ const UserInfoForm = () => {
   const userInfo = useRecoilValue(UserInfoState);
   useEffect(() => {
     setValue('nickname', userInfo?.nickname);
+    setValue('profileImageUrl', userInfo?.profileImageUrl);
   }, [userInfo]);
 
   const onInfoSubmit: SubmitHandler<any> = async (data) => {
-    const { nickname } = data;
+    const { nickname, profileImageUrl } = data;
 
     try {
       const res = await putMember({
         nickname: nickname,
-        profileImageUrl: '',
+        profileImageUrl: profileImageUrl,
         ageType: null,
         genderType: null,
       });
@@ -49,14 +50,20 @@ const UserInfoForm = () => {
   };
 
   return (
-    <form onSubmit={handleSubmit(onInfoSubmit)} className="w-full">
+    <form
+      onSubmit={handleSubmit(onInfoSubmit)}
+      className="flex h-[85vh] w-full flex-col justify-between">
       <div>
-        <div className="mb-4">
-          <UserInfoImg />
+        <div className="mb-4 mt-6">
+          <UserInfoImg
+            register={register}
+            setValue={setValue}
+            inputValue={watch('profileImageUrl')}
+          />
         </div>
         <div className="mb-12 flex flex-col items-center">
           <div className="body5 mb-2 h-8 rounded-full border border-solid border-gray2 px-3 py-2 text-gray5">
-            email
+            {userInfo?.email}
           </div>
           <Link to="password" className="body4 text-gray4">
             비밀번호 변경
@@ -75,11 +82,17 @@ const UserInfoForm = () => {
             label="성별"
             text={'성별을 선택해주세요.'}
             options={genderArr}
+            name={'genderType'}
+            register={register}
+            setValue={setValue}
           />
           <AuthDropDown
             label="연령대"
             text={'연령대를 선택해주세요.'}
             options={ageArr}
+            name={'ageType'}
+            register={register}
+            setValue={setValue}
           />
         </div>
       </div>
diff --git a/src/pages/mypage/editPassword.page.tsx b/src/pages/mypage/editPassword.page.tsx
index a15f89e6..06c276ed 100644
--- a/src/pages/mypage/editPassword.page.tsx
+++ b/src/pages/mypage/editPassword.page.tsx
@@ -9,7 +9,7 @@ const EditPassword = () => {
       <BackBox
         showBack
         backHandler={() => {
-          navigate('/mypage');
+          navigate('/mypage/info');
         }}>
         비밀번호 변경
       </BackBox>
diff --git a/src/pages/signup/signupInfo.page.tsx b/src/pages/signup/signupInfo.page.tsx
index b5d89a8a..1482ef3a 100644
--- a/src/pages/signup/signupInfo.page.tsx
+++ b/src/pages/signup/signupInfo.page.tsx
@@ -1,13 +1,14 @@
 import { AuthTitle } from '@components/Auth';
 import SignupInfoForm from '@components/Auth/SignupInfo/SignupInfoForm';
 import { BackBox } from '@components/common';
+import { ProgressBarIcon } from '@components/common/icons/Icons';
 import { useNavigate } from 'react-router-dom';
 
 const SignupInfo = () => {
   const navigate = useNavigate();
 
   return (
-    <div className="flex h-[95vh] flex-col">
+    <div className="relative flex h-[95vh] flex-col">
       <BackBox
         showBack
         backHandler={() => {
@@ -18,6 +19,9 @@ const SignupInfo = () => {
           navigate('/');
         }}
       />
+      <div className="absolute right-0 top-12">
+        <ProgressBarIcon full />
+      </div>
       <AuthTitle
         title={
           <>