diff --git a/src/apis/fetch.ts b/src/apis/fetch.ts
index ce20ac7..6f83f68 100644
--- a/src/apis/fetch.ts
+++ b/src/apis/fetch.ts
@@ -74,13 +74,21 @@ class Fetch {
       body: JSON.stringify(body),
     });
 
-    const data = await response.json();
-
     if (!response.ok) {
+      const data = await response.json();
       throw new ResponseError(data);
     }
 
-    return data as TData;
+    // 응답 본문이 있는지 확인
+    const text = await response.text();
+    if (text) {
+      // 응답 본문이 있으면 JSON으로 파싱
+      const data = JSON.parse(text);
+      return data as TData;
+    } else {
+      // 응답 본문이 없으면 null 반환
+      return null;
+    }
   }
 
   async delete<T>(path: string, body?: object): Promise<T> {
diff --git a/src/apis/profile/useProfile.ts b/src/apis/profile/useProfile.ts
index 888259c..3d503b7 100644
--- a/src/apis/profile/useProfile.ts
+++ b/src/apis/profile/useProfile.ts
@@ -1,18 +1,13 @@
 import { useMutation } from '@tanstack/react-query';
 
-import { PresignedURLResponse, ProfileResponse } from '@interfaces/api/profile';
+import {
+  ModifyProfileRequestDTO,
+  PresignedURLResponse,
+  ProfileResponse,
+} from '@interfaces/api/profile';
 
 import client from '@apis/fetch';
 
-// export interface profileRequestDTO {
-//   status?: 'VOTING' | 'CLOSED';
-//   keyword_id?: number;
-//   page?: number;
-//   size?: number;
-//   sort?: string;
-//   side?: 'TOPIC_A' | 'TOPIC_B';
-// }
-
 const getProfile = () => {
   return client.get<ProfileResponse>('/members/profile');
 };
@@ -35,6 +30,13 @@ const updateProfileImgURL = (profileImgURL: string) => {
   });
 };
 
+const modifyProfile = (req: ModifyProfileRequestDTO) => {
+  return client.put({
+    path: `/members/profile/information`,
+    body: req,
+  });
+};
+
 const deleteProfileImg = () => {
   return client.delete(`/members/profile/image`);
 };
@@ -51,4 +53,14 @@ const useDeleteProfileImg = () => {
   return useMutation({ mutationFn: () => deleteProfileImg() });
 };
 
-export { getProfile, useGetPresignedURL, useUpdateProfileImgURL, useDeleteProfileImg };
+const useModifyProfile = () => {
+  return useMutation({ mutationFn: modifyProfile });
+};
+
+export {
+  getProfile,
+  useGetPresignedURL,
+  useUpdateProfileImgURL,
+  useDeleteProfileImg,
+  useModifyProfile,
+};
diff --git a/src/components/commons/Modal/ActionModalButton.tsx b/src/components/commons/Modal/ActionModalButton.tsx
index 0577c1a..20e85f1 100644
--- a/src/components/commons/Modal/ActionModalButton.tsx
+++ b/src/components/commons/Modal/ActionModalButton.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { colors } from '@styles/theme';
+
 import { Row } from '../Flex/Flex';
 import Text from '../Text/Text';
 
@@ -14,7 +16,7 @@ const ActionModalButton = ({ handleClick, Icon, label }: ActionModalButtonProps)
     <button onClick={handleClick}>
       <Row alignItems={'center'} gap={14}>
         <Icon />
-        <Text size={16} weight={500}>
+        <Text size={16} weight={500} color={colors.black}>
           {label}
         </Text>
       </Row>
diff --git a/src/components/commons/SelectInput/SelectInput.tsx b/src/components/commons/SelectInput/SelectInput.tsx
index 0654c9a..d02ca8d 100644
--- a/src/components/commons/SelectInput/SelectInput.tsx
+++ b/src/components/commons/SelectInput/SelectInput.tsx
@@ -29,12 +29,11 @@ const StyledSelect = styled.select<{ selected: boolean }>`
   font-size: 1.4rem;
   font-weight: 600;
   line-height: 1.4;
-  color: ${({ theme }) => theme.colors.purple};
+  color: ${({ selected, theme }) => (selected ? theme.colors.white : theme.colors.purple_60)};
   appearance: none;
-  background-color: #342b52;
+  background-color: ${({ theme }) => theme.colors.navy2_40};
   border: none;
   border-radius: 10px;
-  opacity: 0.6;
 
   &:focus {
     outline: none;
@@ -61,7 +60,11 @@ const SelectInput = (props: SelectInputProps) => {
       <SelectLabel htmlFor={id}>
         <DownChevronIcon />
       </SelectLabel>
-      <StyledSelect {...register(id, options)} selected={watch(id) !== undefined} id={id}>
+      <StyledSelect
+        {...register(id, options)}
+        selected={watch(id) !== undefined && watch(id) !== ''}
+        id={id}
+      >
         <option value="" disabled selected style={{ display: 'none' }}>
           {placeholder}
         </option>
diff --git a/src/components/commons/TextInput/TextInput.styles.tsx b/src/components/commons/TextInput/TextInput.styles.tsx
index fc3b0c7..d5e68de 100644
--- a/src/components/commons/TextInput/TextInput.styles.tsx
+++ b/src/components/commons/TextInput/TextInput.styles.tsx
@@ -4,7 +4,7 @@ import { TextInputTheme } from './theme';
 
 const StyledInput = styled.input<{ inputTheme: TextInputTheme }>`
   width: 100%;
-  font-size: ${({ inputTheme }) => inputTheme.placeholderSize};
+  font-size: ${({ inputTheme }) => inputTheme.fontSize};
   font-weight: ${({ inputTheme }) => inputTheme.fontWeight};
   line-height: 1.4;
   color: ${({ theme }) => theme.colors.white};
diff --git a/src/components/commons/TextInput/theme.ts b/src/components/commons/TextInput/theme.ts
index 5f2f0da..cf7f7b3 100644
--- a/src/components/commons/TextInput/theme.ts
+++ b/src/components/commons/TextInput/theme.ts
@@ -18,7 +18,8 @@ export const theme1: TextInputTheme = {
   fontSize: '1.4rem',
   fontWeight: 600,
   backgroundColor: colors.navy2_40,
-  placeholderColor: colors.purple,
+  placeholderColor: colors.purple_60,
+  placeholderSize: '1.4rem',
 };
 
 export const theme2: TextInputTheme = {
@@ -28,6 +29,7 @@ export const theme2: TextInputTheme = {
   fontWeight: 500,
   backgroundColor: colors.navy2_40,
   placeholderColor: colors.purple,
+  placeholderSize: '1.6rem',
 };
 
 export const theme3: TextInputTheme = {
diff --git a/src/interfaces/api/profile.ts b/src/interfaces/api/profile.ts
index ff52e68..a76a0bd 100644
--- a/src/interfaces/api/profile.ts
+++ b/src/interfaces/api/profile.ts
@@ -10,4 +10,9 @@ interface PresignedURLResponse {
   presignedUrl: string;
 }
 
-export type { ProfileResponse, PresignedURLResponse };
+interface ModifyProfileRequestDTO {
+  nickname: string;
+  job: string;
+}
+
+export type { ProfileResponse, PresignedURLResponse, ModifyProfileRequestDTO };
diff --git a/src/routes/Auth/signup/Signup.tsx b/src/routes/Auth/signup/Signup.tsx
index 251ea35..5519d56 100644
--- a/src/routes/Auth/signup/Signup.tsx
+++ b/src/routes/Auth/signup/Signup.tsx
@@ -103,7 +103,7 @@ const Signup = () => {
                 options={CONFIG.NICKNAME.options}
                 placeholder={'한글, 영문, 숫자 최대 8자'}
                 right={() => (
-                  <Text size={14} weight={700} color={colors.purple}>
+                  <Text size={14} weight={700} color={colors.purple_60}>
                     {nicknameProgress}
                   </Text>
                 )}
diff --git a/src/routes/MyPage/ModifyProfile/ModifyProfile.styles.tsx b/src/routes/MyPage/ModifyProfile/ModifyProfile.styles.tsx
new file mode 100644
index 0000000..7572f29
--- /dev/null
+++ b/src/routes/MyPage/ModifyProfile/ModifyProfile.styles.tsx
@@ -0,0 +1,40 @@
+import { color } from 'framer-motion';
+import { styled } from 'styled-components';
+
+import { colors } from '@styles/theme';
+
+export const Container = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  width: 100%;
+  height: 100%;
+  padding: 24px 20px 0;
+  background-color: ${(props) => props.theme.colors.navy};
+`;
+export const BackButton = styled.button`
+  width: 24px;
+  height: 24px;
+  padding: 3.6px 7.8px;
+`;
+
+export const Divider = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 1px;
+  background-color: ${colors.white_20};
+`;
+
+export const SubmitButton = styled.div`
+  position: absolute;
+  bottom: 48px;
+  left: 50%;
+  justify-content: center;
+  width: 100%;
+  padding: 0 20px;
+  transform: translateX(-50%);
+`;
diff --git a/src/routes/MyPage/ModifyProfile/ModifyProfile.tsx b/src/routes/MyPage/ModifyProfile/ModifyProfile.tsx
new file mode 100644
index 0000000..d7c635e
--- /dev/null
+++ b/src/routes/MyPage/ModifyProfile/ModifyProfile.tsx
@@ -0,0 +1,137 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+import { useModifyProfile } from '@apis/profile/useProfile';
+import DefaultButton from '@components/commons/Button/DefaultButton';
+import { Col, Row } from '@components/commons/Flex/Flex';
+import InputField from '@components/commons/InputField/InputField';
+import Layout from '@components/commons/Layout/Layout';
+import SelectInput from '@components/commons/SelectInput/SelectInput';
+import Text from '@components/commons/Text/Text';
+import TextInput from '@components/commons/TextInput/TextInput';
+import { theme1, theme2 } from '@components/commons/TextInput/theme';
+import { Toast } from '@components/commons/Toast/Toast';
+import { ModifyProfileRequestDTO } from '@interfaces/api/profile';
+
+import { CONFIG, INPUT_TYPE } from '@constants/form';
+import { JOBS } from '@constants/signup';
+
+import { colors, theme } from '@styles/theme';
+
+import { RightChevronIcon } from '@icons/index';
+
+import { ResponseError } from '@apis/fetch';
+
+import { BackButton, Container, Divider, SubmitButton } from './ModifyProfile.styles';
+
+interface ModifyProfileProps {
+  birth: string;
+  gender: string;
+}
+
+const MAX_NICKNAME_LENGTH = 8;
+
+const ModifyProfile = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { birth, gender } = location.state as ModifyProfileProps;
+
+  const methods = useForm<ModifyProfileRequestDTO>({ mode: 'onChange' });
+  const modifyProfileMutation = useModifyProfile();
+
+  const nicknameProgress = methods.watch(INPUT_TYPE.NICKNAME)
+    ? `${methods.watch(INPUT_TYPE.NICKNAME)?.length}/${MAX_NICKNAME_LENGTH}`
+    : '';
+
+  const handleSubmitForm = async () => {
+    const data = methods.getValues();
+    try {
+      const res = await modifyProfileMutation.mutateAsync({
+        nickname: data.nickname,
+        job: data.job,
+      });
+      console.log(res);
+      navigate(-1);
+    } catch (error) {
+      console.log(error);
+      if (error instanceof ResponseError) {
+        Toast.error(error.errorData.errorContent.message);
+      }
+    }
+  };
+
+  return (
+    <Layout
+      hasBottomNavigation={false}
+      HeaderLeft={
+        <BackButton onClick={() => navigate(-1)}>
+          <RightChevronIcon style={{ transform: 'rotate(180deg)' }} stroke={colors.white} />
+        </BackButton>
+      }
+      HeaderCenter={
+        <Text size={20} weight={600} color={colors.white}>
+          내 정보 수정
+        </Text>
+      }
+    >
+      <FormProvider {...methods}>
+        <Container>
+          <Col gap={24} alignItems="flex-start">
+            <Col gap={20} alignItems="flex-start">
+              <Row gap={12} alignItems="center">
+                <Text size={14} weight={600} color={colors.white_40}>
+                  생년월일
+                </Text>
+                <Text size={14} weight={400} color={colors.white_60}>
+                  {birth}
+                </Text>
+              </Row>
+              <Row gap={12} alignItems="center">
+                <Text size={14} weight={600} color={colors.white_40}>
+                  성별
+                </Text>
+                <Text size={14} weight={400} color={colors.white_60}>
+                  {gender}
+                </Text>
+              </Row>
+            </Col>
+            <Divider />
+            <Col gap={40} alignItems="flex-start" justifyContent="space-between">
+              <InputField label="변경할 닉네임을 입력해 주세요">
+                <TextInput
+                  id={INPUT_TYPE.NICKNAME}
+                  theme={theme1}
+                  options={CONFIG.NICKNAME.options}
+                  placeholder={'한글, 영문, 숫자 최대 8자'}
+                  right={() => (
+                    <Text size={14} weight={700} color={colors.purple_60}>
+                      {nicknameProgress}
+                    </Text>
+                  )}
+                />
+              </InputField>
+              <InputField label="변경할 직업을 입력해 주세요">
+                <SelectInput
+                  id={INPUT_TYPE.JOB}
+                  options={CONFIG.JOB.options}
+                  placeholder="직업 선택하기"
+                  selectOptions={JOBS}
+                />
+              </InputField>
+            </Col>
+          </Col>
+          <SubmitButton>
+            <DefaultButton
+              title={'변경하기'}
+              onClick={handleSubmitForm}
+              disabled={!methods.formState.isValid}
+            />
+          </SubmitButton>
+        </Container>
+      </FormProvider>
+    </Layout>
+  );
+};
+
+export default ModifyProfile;
diff --git a/src/routes/MyPage/MyPage.styles.tsx b/src/routes/MyPage/MyPage.styles.tsx
index 4887ec0..11b5442 100644
--- a/src/routes/MyPage/MyPage.styles.tsx
+++ b/src/routes/MyPage/MyPage.styles.tsx
@@ -27,7 +27,7 @@ export const BackButton = styled.button`
   padding: 3.6px 7.8px;
 `;
 
-export const MyInfoUpdateButton = styled.button`
+export const ModifyProfileButton = styled.button`
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/src/routes/MyPage/MyPage.tsx b/src/routes/MyPage/MyPage.tsx
index 240c35b..462f641 100644
--- a/src/routes/MyPage/MyPage.tsx
+++ b/src/routes/MyPage/MyPage.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { set } from 'react-hook-form';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 import {
   getProfile,
@@ -25,7 +25,7 @@ import {
   Divider,
   ImageInput,
   ModalDivider,
-  MyInfoUpdateButton,
+  ModifyProfileButton,
   PhotoButton,
   ProfileImgContainer,
 } from './MyPage.styles';
@@ -37,6 +37,8 @@ const MyPage = () => {
 
   const [profileImg, setProfileImg] = useState<string | null>(null);
   const [nickName, setNickName] = useState<string>('');
+  const [birth, setBirth] = useState<string>('');
+  const [gender, setGender] = useState<string>('');
   const [fileName, setFileName] = useState<string>('');
   const [file, setFile] = useState<File>();
   const [presignedURL, setpresignedURL] = useState<string>('');
@@ -117,6 +119,10 @@ const MyPage = () => {
     toggleModal();
   };
 
+  const handleOnClickModifyProfile = () => {
+    navigate('/mypage/modify-profile', { state: { birth, gender } });
+  };
+
   useEffect(() => {
     const fetchProfile = async () => {
       try {
@@ -125,6 +131,8 @@ const MyPage = () => {
           setProfileImg(response.profileImageUrl);
         }
         setNickName(response.nickname);
+        setBirth(response.birth.replace(/-/g, '/'));
+        setGender(response.gender === 'FEMALE' ? '여자' : '남자');
       } catch (error) {
         console.error(error);
       }
@@ -168,15 +176,26 @@ const MyPage = () => {
           </Col>
           <Col gap={32} alignItems="flex-start">
             <Row padding="0 7px" gap={3} alignItems="center">
-              <Text size={16} weight={400} color={colors.white}>
+              <Text
+                size={16}
+                weight={400}
+                color={colors.white}
+                onClick={handleOnClickModifyProfile}
+              >
                 내 정보 수정
               </Text>
-              <MyInfoUpdateButton>
+              <ModifyProfileButton onClick={handleOnClickModifyProfile}>
                 <RightChevronIcon stroke={colors.white_40} />
-              </MyInfoUpdateButton>
+              </ModifyProfileButton>
             </Row>
             <Divider />
-            <Text style={{ padding: '0 7px' }} size={16} weight={400} color={colors.white}>
+            <Text
+              style={{ padding: '0 7px' }}
+              size={16}
+              weight={400}
+              color={colors.white}
+              align="start"
+            >
               약관
             </Text>
             <Row padding="0 7px" gap={10} alignItems="center">
@@ -188,7 +207,13 @@ const MyPage = () => {
               </Text>
             </Row>
             <Divider />
-            <Text style={{ padding: '0 7px' }} size={16} weight={400} color={colors.white_40}>
+            <Text
+              style={{ padding: '0 7px' }}
+              size={16}
+              weight={400}
+              color={colors.white_40}
+              align="start"
+            >
               로그아웃
             </Text>
           </Col>
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index be96534..bac38c2 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -12,7 +12,6 @@ import Loading from '@components/commons/Loading/Loading';
 
 import { useAuthStore } from '@store/auth';
 
-
 const Home = lazy(() => import('./Home/Home'));
 const ATopics = lazy(() => import('./A/ATopics'));
 const BTopic = lazy(() => import('./B/BTopic'));
@@ -20,13 +19,13 @@ const BTopics = lazy(() => import('./B/BTopics'));
 const TopicSideSelection = lazy(() => import('./Topic/TopicSideSelection'));
 const TopicCreate = lazy(() => import('./Topic/Create/TopicCreate'));
 const MyPage = lazy(() => import('./MyPage/MyPage'));
+const ModifyProfile = lazy(() => import('./MyPage/ModifyProfile/ModifyProfile'));
 const Notification = lazy(() => import('./Notification/Notification'));
 const Login = lazy(() => import('./Auth/login/Login'));
 const KakaoLogin = lazy(() => import('./Auth/kakao/KakaoLogin'));
 const GoogleLogin = lazy(() => import('./Auth/google/GoogleLogin'));
 const Signup = lazy(() => import('./Auth/signup/Signup'));
 
-
 const AuthRoute = () => {
   const reLogin = useAuthStore((store) => store.reLogin);
 
@@ -72,7 +71,10 @@ const Router = () => {
             <Route path="create" element={<TopicSideSelection />} />
             <Route path="create/:topicSide" element={<TopicCreate />} />
           </Route>
-          <Route path="mypage" element={<MyPage />} />
+          <Route path="mypage">
+            <Route index element={<MyPage />} />
+            <Route path="modify-profile" element={<ModifyProfile />} />
+          </Route>
           <Route path="notifications" element={<Notification />} />
         </Route>
         <Route path="login">