diff --git a/components/ProfileCard/index.tsx b/components/ProfileCard/index.tsx
index 23e9610..c9336bf 100644
--- a/components/ProfileCard/index.tsx
+++ b/components/ProfileCard/index.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Nav, Textarea } from '@/components/index.tsx';
+import EditProfile from '@/pages/profile/editProfile';
 import { useForm } from 'react-hook-form';
 import MyPosting from '@/public/icons/myPosting.svg';
 import ChangePassword from '@/public/icons/Password.svg';
@@ -41,7 +42,7 @@ export default function ProfileCard({ name, age, gender, imageSrc }: ProfileCard
               custom: true,
               customHeader: true,
             },
-            children: <div>hi</div>,
+            children: <EditProfile imageSrc={`${imageSrc}`}/>,
           });
     }
 
diff --git a/pages/profile/editProfile.tsx b/pages/profile/editProfile.tsx
new file mode 100644
index 0000000..cc5043e
--- /dev/null
+++ b/pages/profile/editProfile.tsx
@@ -0,0 +1,173 @@
+import React, { useState } from 'react';
+import { FieldError, useForm as UseForm } from 'react-hook-form';
+import useModal from '@/hooks/useModal.ts';
+import { isValidEmail } from '@/utils/validCheck.ts';
+import {
+  Textarea,
+  Button,
+  Input,
+} from '@/components/index.tsx';
+import { FieldValues, SubmitHandler } from 'react-hook-form';
+import Calendar from '@/components/Calendar/Calendar.tsx';
+
+import ProfileCamera from '@/public/icons/profileCamera.svg';
+
+interface ProfileProps {
+    name?: string;
+    age?: number;
+    gender?: 'Male' | 'Female';
+    imageSrc : string;
+};
+
+export default function EditProfile({ imageSrc }: ProfileProps) {
+  const { openModal, closeModal } = useModal();
+  const subHeader = 'font-pretendard font-semibold text-[16px]';
+  const {
+    register,
+    watch,
+    handleSubmit,
+    formState: { errors },
+  } = UseForm({ mode: 'onChange' });
+  const [buttonState, setButtonState] = useState('Male');
+  const [isCalendarShow, setCalendarShow] = useState(false);
+
+  const onSubmit: SubmitHandler<FieldValues> = (data) => {
+    openModal({
+      props: {
+        title: 'My Postings',
+        size: 'full',
+        custom: true,
+        customHeader: true,
+      },
+      children: <>hi</>,
+    });
+  };
+ 
+  const handleCalendarShow = (isShow: boolean) => {
+    setCalendarShow(isShow);
+  }
+
+  const isPostingComplete = () => {
+    return true;
+  }
+
+  const handleButtonClick = (value: string) => {
+    setButtonState(value);
+  };
+
+  const getButtonColor = (value: string) => {
+    return buttonState === value ? 'r1' : 'outlined';
+  };
+  
+  const genderButtons = [
+    { label: 'Male'},
+    { label: 'Female'},
+    { label: 'Others'}
+  ];
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+        <div className="h-screen overflow-y-scroll font-pretendard">
+            <div className="flex justify-center items-center h-[90px] mt-[20px] mb-[36px]">
+                <div style={{ position: 'relative', width: 90, height: 90 }} className="flex items-center justify-center">
+                    <div style={{ borderRadius: '50%', overflow: 'hidden', width: '100%', height: '100%' }} className="flex items-center justify-center">
+                        <img src={imageSrc} alt={`${name}'s profile`} className="object-cover" />
+                    </div>
+                    <div className="absolute border-g2 border-[1px] bottom-0 right-0 bg-g0 flex items-center justify-center" style={{ width: '32px', height: '32px', borderRadius: '50%', overflow: "" }}>
+                        <ProfileCamera className="w-[20px] h-[20px]" />
+                    </div>
+                </div>
+            </div>
+
+            <div className="mb-[12px]">
+                <div className={subHeader}>Email</div>
+            </div>
+            <div className="mb-[8px]">
+                <Input
+                    type="email"
+                    placeholder="Your email"
+                    register={register('email', {
+                        validate: (value) => {
+                        return isValidEmail(value, `Invalid email`);
+                        },
+                    })}
+                    error={errors.email as FieldError}
+                />
+            </div>
+            <div className="py-[28px]">
+                <div className="mb-[12px]">
+                    <div className={subHeader}>Name</div>
+                </div>
+                <div className="mb-[8px]">
+                    <Input
+                        placeholder="First Name"
+                        type="text"
+                        register={register('firstName', {
+                        validate: () => {
+                            return true;
+                        },
+                        })}
+                    />
+                </div>
+                <div className="mb-[8px]">
+                    <Input
+                        placeholder="Last Name"
+                        type="text"
+                        register={register('lastName', {
+                        validate: () => {
+                            return true;
+                        },
+                        })}
+                    />
+                </div>
+            </div>
+            <div className="mb-[12px]">
+                <div className={subHeader}>Gender</div>
+            </div>
+            <div className="mb-[32px]">
+                <div className="mb-3 grid grid-cols-3 gap-0 text-g0">
+                    {genderButtons.map( (button,index) => (
+                        <div key={button.label + index} >
+                            <Button 
+                                size="lg"
+                                type="button"
+                                color={getButtonColor(button.label)}
+                                onClick={() => handleButtonClick(button.label)}
+                            >
+                            {button.label}
+                            </Button>
+                        </div>
+                        ))}
+                </div>
+            </div>
+            <div className="mb-[12px]">
+                <div className={subHeader}>Date of birth</div>
+            </div>
+            <section className='mb-[8px]'>
+                <Calendar placeholder="MM-DD-YYYY" type="text" register={register('dateAvailable')} disabled={watch('availableChecked')} handleCalendarShow={handleCalendarShow}/>
+            </section>
+            <div className="mb-[12px] mt-[32px]">
+                <div className={subHeader}>About you</div>
+            </div>
+            <div className="mb-[250px]">
+                <Textarea placeholder={"Describe you to others!"} register={register('describe')} maxByte={250} className={'h-[172px] text-g7 border-g4 border-[1px]'}/>
+            </div>
+            <div className="mt-[255px] fixed bottom-0 w-full overflow-x-hidden left-[50%] translate-x-[-50%] px-[20px] max-w-max">
+                <div className="w-full">
+                    <div className="mb-[13px]">
+                        <Button 
+                            size="lg" 
+                            type="submit" 
+                            disabled={isPostingComplete()} 
+                            onClick={() => {}}
+                        >
+                        {"Complete"}
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+  );
+}
+
diff --git a/pages/resetPassword/step1.tsx b/pages/resetPassword/step1.tsx
index 6c0117f..fbafd2e 100644
--- a/pages/resetPassword/step1.tsx
+++ b/pages/resetPassword/step1.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import ResetPasswordLayout from '@/components/layouts/ResetPasswordLayout.tsx';
 import { Link, Stepper, Button, ModalBox, Input, Space, Typography } from '@/components/index.tsx';
 import { FieldError, useForm as UseForm } from 'react-hook-form';
diff --git a/public/icons/profileCamera.svg b/public/icons/profileCamera.svg
new file mode 100644
index 0000000..b3ff64a
--- /dev/null
+++ b/public/icons/profileCamera.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Icon16/Image">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M7.82036 2.25C7.53688 2.25 7.26671 2.37032 7.07707 2.58104L5.275 4.58333H3.25C2.14543 4.58333 1.25 5.47877 1.25 6.58334V14.25C1.25 15.3546 2.14543 16.25 3.25 16.25H16.75C17.8546 16.25 18.75 15.3546 18.75 14.25V6.58333C18.75 5.47876 17.8546 4.58333 16.75 4.58333H14.725L12.9229 2.58104C12.7333 2.37032 12.4631 2.25 12.1796 2.25H7.82036ZM12.9165 9.75C12.9165 11.3608 11.6106 12.6667 9.9998 12.6667C8.38897 12.6667 7.08313 11.3608 7.08313 9.75C7.08313 8.13917 8.38897 6.83333 9.9998 6.83333C11.6106 6.83333 12.9165 8.13917 12.9165 9.75Z" fill="#BDBDBD"/>
+</g>
+</svg>