diff --git a/.eslintrc.json b/.eslintrc.json
index 82d37c6..873d97a 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -7,7 +7,6 @@
   "plugins": ["prettier"],
   "rules": {
     "prettier/prettier": ["error"],
-    "no-unused-vars": "warn",
     "@typescript-eslint/no-unused-vars": "warn"
   }
 }
diff --git a/src/app/mypage/components/Button.module.css b/src/app/mypage/components/Button.module.css
deleted file mode 100644
index 98e57e4..0000000
--- a/src/app/mypage/components/Button.module.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.button {
-  width: 100%;
-  background-color: var(--violet);
-  border-radius: 8px;
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 24px;
-  color: var(--white);
-}
-
-.button:disabled {
-  background-color: var(--gray-400);
-  cursor: auto;
-}
diff --git a/src/app/mypage/components/Button.tsx b/src/app/mypage/components/Button.tsx
deleted file mode 100644
index cf832c9..0000000
--- a/src/app/mypage/components/Button.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ButtonHTMLAttributes, PropsWithChildren } from 'react';
-import styles from './Button.module.css';
-
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  className?: string;
-}
-
-export default function Button({
-  className = '',
-  children,
-  ...props
-}: PropsWithChildren<ButtonProps>) {
-  return (
-    <button className={`${styles.button} ${className}`} {...props}>
-      {children}
-    </button>
-  );
-}
diff --git a/src/app/mypage/components/FileInput.tsx b/src/app/mypage/components/FileInput.tsx
index 2872e21..11f1b56 100644
--- a/src/app/mypage/components/FileInput.tsx
+++ b/src/app/mypage/components/FileInput.tsx
@@ -1,28 +1,35 @@
+import { useEffect } from 'react';
 import { ChangeEvent, useState } from 'react';
 import Image from 'next/image';
-import { UseFormSetValue } from 'react-hook-form';
-import { FormValues } from './ProfileForm';
 import styles from './FileInput.module.css';
 
 interface FileInputProps {
-  name: 'imgFile';
-  setValue: UseFormSetValue<FormValues>;
+  id: string;
+  name: 'image';
+  setValue: (name: 'image', value: File | null) => void;
+  url?: string | null;
 }
 
-export default function FileInput({ name, setValue }: FileInputProps) {
-  const [preview, setPreview] = useState('');
+export default function FileInput({ name, setValue, url, id }: FileInputProps) {
+  const [preview, setPreview] = useState<string | null>(null);
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
     if (file) {
       setPreview(URL.createObjectURL(file));
-      setValue('image', file);
+      setValue(name, file);
     }
   };
 
+  useEffect(() => {
+    if (url) {
+      setPreview(url);
+    }
+  }, [url]);
+
   return (
     <>
-      <label className={styles.label} htmlFor={name}>
+      <label className={styles.label} htmlFor={id}>
         {preview ? (
           <Image src={preview} alt="미리보기" fill />
         ) : (
@@ -34,9 +41,9 @@ export default function FileInput({ name, setValue }: FileInputProps) {
       <input
         className={styles.input}
         type="file"
-        accept="image/png, image/jpeg"
+        id={id}
         name={name}
-        id={name}
+        accept="image/png, image/jpeg"
         onChange={handleChange}
       />
     </>
diff --git a/src/app/mypage/components/PasswordForm.module.css b/src/app/mypage/components/Form.module.css
similarity index 94%
rename from src/app/mypage/components/PasswordForm.module.css
rename to src/app/mypage/components/Form.module.css
index 4e9c1e3..8ec100e 100644
--- a/src/app/mypage/components/PasswordForm.module.css
+++ b/src/app/mypage/components/Form.module.css
@@ -11,6 +11,7 @@
 }
 
 .button {
+  line-height: 24px;
   margin-top: 24px;
   padding: 15px 113.5px;
 }
diff --git a/src/app/mypage/components/Input.module.css b/src/app/mypage/components/Input.module.css
index 5d17657..a216e01 100644
--- a/src/app/mypage/components/Input.module.css
+++ b/src/app/mypage/components/Input.module.css
@@ -20,6 +20,7 @@
 }
 
 .input:read-only {
+  color: var(--gray-400);
   outline: none;
 }
 
diff --git a/src/app/mypage/components/PasswordForm.tsx b/src/app/mypage/components/PasswordForm.tsx
index 55cbdbc..588ade6 100644
--- a/src/app/mypage/components/PasswordForm.tsx
+++ b/src/app/mypage/components/PasswordForm.tsx
@@ -1,12 +1,12 @@
-'use client';
-
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import Input from './Input';
-import Button from './Button';
-import styles from './PasswordForm.module.css';
+import Button from '@/components/Button';
+import { ERROR_MESSAGES } from '../constants/message';
+import styles from './Form.module.css';
+import { updatePassword } from '../lib/authHelper';
 
-interface FormValues {
+export interface PasswordFormValues {
   currentPassword: string;
   newPassword: string;
   newPasswordConfirmation: string;
@@ -16,14 +16,18 @@ export default function PasswordForm() {
   const {
     register,
     handleSubmit,
-    formState: { errors, isValid },
+    formState: { errors },
     watch,
     trigger,
-  } = useForm<FormValues>({ mode: 'onChange' });
+    setError,
+    reset,
+  } = useForm<PasswordFormValues>({ mode: 'onChange' });
 
+  const customIsValid = Object.keys(errors).length === 0;
   const watchedPassword = watch('newPassword');
 
-  const onSubmit = () => {};
+  const onSubmit = async (data: PasswordFormValues) =>
+    updatePassword(data, reset, setError);
 
   useEffect(() => {
     if (watchedPassword) {
@@ -40,6 +44,8 @@ export default function PasswordForm() {
         name="currentPassword"
         label="현재 비밀번호"
         placeholder="비밀번호 입력"
+        register={register('currentPassword')}
+        error={errors.currentPassword}
       />
       <Input
         className={styles.input}
@@ -50,7 +56,7 @@ export default function PasswordForm() {
         register={register('newPassword', {
           minLength: {
             value: 8,
-            message: '비밀번호를 8자 이상 입력해주세요.',
+            message: ERROR_MESSAGES.PASSWORD_TOO_SHORT,
           },
         })}
         error={errors.newPassword}
@@ -63,12 +69,12 @@ export default function PasswordForm() {
         register={register('newPasswordConfirmation', {
           validate: {
             matchesPassword: (value) =>
-              value === watchedPassword || '비밀번호가 일치하지 않습니다.',
+              value === watchedPassword || ERROR_MESSAGES.PASSWORDS_MATCH,
           },
         })}
         error={errors.newPasswordConfirmation}
       />
-      <Button className={styles.button} type="submit" disabled={!isValid}>
+      <Button className={styles.button} type="submit" disabled={!customIsValid}>
         변경
       </Button>
     </form>
diff --git a/src/app/mypage/components/ProfileForm.module.css b/src/app/mypage/components/ProfileForm.module.css
deleted file mode 100644
index 4e9c1e3..0000000
--- a/src/app/mypage/components/ProfileForm.module.css
+++ /dev/null
@@ -1,28 +0,0 @@
-.form h2 {
-  font-size: 18px;
-  font-weight: 700;
-  line-height: 26px;
-  color: var(--black-100);
-  margin-bottom: 40px;
-}
-
-.input {
-  margin-bottom: 16px;
-}
-
-.button {
-  margin-top: 24px;
-  padding: 15px 113.5px;
-}
-
-@media screen and (min-width: 768px) {
-  .form h2 {
-    font-size: 24px;
-    line-height: 32px;
-    margin-bottom: 24px;
-  }
-
-  .button {
-    padding: 14px 236px;
-  }
-}
diff --git a/src/app/mypage/components/ProfileForm.tsx b/src/app/mypage/components/ProfileForm.tsx
index 4e55715..af4c453 100644
--- a/src/app/mypage/components/ProfileForm.tsx
+++ b/src/app/mypage/components/ProfileForm.tsx
@@ -1,32 +1,54 @@
-'use client';
-
+import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
-import Button from './Button';
-import Input from './Input';
-import styles from './ProfileForm.module.css';
+import useAuth from '../hooks/useAuth';
 import FileInput from './FileInput';
+import Input from './Input';
+import Button from '@/components/Button';
+import { updateProfile } from '../lib/authHelper';
+import styles from './Form.module.css';
 
-export interface FormValues {
-  image: File;
+export interface ProfileFormValues {
+  image: File | null;
   email: string;
   nickname: string;
 }
 
 export default function ProfileForm() {
-  const { handleSubmit, setValue } = useForm<FormValues>();
+  const { user } = useAuth();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    setValue,
+    reset,
+  } = useForm<ProfileFormValues>();
 
-  const onSubmit = () => {};
+  const customIsValid = Object.keys(errors).length === 0;
+
+  const onSubmit = async (data: ProfileFormValues) => updateProfile(data);
+
+  useEffect(() => {
+    if (user) {
+      const { email, nickname } = user;
+      reset({ email, nickname });
+    }
+  }, [reset, user]);
 
   return (
     <form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
       <h2>프로필</h2>
-      <FileInput name="imgFile" setValue={setValue} />
+      <FileInput
+        id="image"
+        name="image"
+        setValue={setValue}
+        url={user?.profileImageUrl}
+      />
       <Input
         className={styles.input}
         type="text"
         name="email"
         label="이메일"
-        placeholder="test@email.com"
+        register={register('email')}
         readOnly
       />
       <Input
@@ -35,8 +57,11 @@ export default function ProfileForm() {
         name="nickname"
         label="닉네임"
         placeholder="닉네임 입력"
+        register={register('nickname')}
       />
-      <Button className={styles.button}>저장</Button>
+      <Button className={styles.button} type="submit" disabled={!customIsValid}>
+        저장
+      </Button>
     </form>
   );
 }
diff --git a/src/app/mypage/constants/message.ts b/src/app/mypage/constants/message.ts
new file mode 100644
index 0000000..954c85d
--- /dev/null
+++ b/src/app/mypage/constants/message.ts
@@ -0,0 +1,6 @@
+export const ERROR_MESSAGES = {
+  CURRENT_PASSWORD_INCORRECT: '현재 비밀번호가 틀렸습니다.',
+  PASSWORDS_MATCH: '비밀번호가 일치하지 않습니다.',
+  SAME_AS_OLD_PASSWORD: '기존 비밀번호와 동일합니다.',
+  PASSWORD_TOO_SHORT: '비밀번호를 8자 이상 입력해주세요.',
+};
diff --git a/src/app/mypage/hooks/useAuth.ts b/src/app/mypage/hooks/useAuth.ts
new file mode 100644
index 0000000..74aa496
--- /dev/null
+++ b/src/app/mypage/hooks/useAuth.ts
@@ -0,0 +1,43 @@
+import useAuthStore from '../store/authStore';
+import axios from '../lib/axios';
+
+const useAuth = () => {
+  const { user, accessToken, setUser, setAccessToken } = useAuthStore();
+  const isAuthenticated = !!accessToken;
+
+  const getMe = async () => {
+    try {
+      const response = await axios.get('/users/me');
+      setUser(response.data);
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  const login = async () => {
+    try {
+      const response = await axios.post('/auth/login', {
+        email: 'bono@example.com',
+        password: '12341234',
+      });
+      setAccessToken(response.data.accessToken);
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  const logout = async () => {
+    setAccessToken(null);
+  };
+
+  return {
+    user,
+    accessToken,
+    isAuthenticated,
+    getMe,
+    login,
+    logout,
+  };
+};
+
+export default useAuth;
diff --git a/src/app/mypage/lib/authHelper.ts b/src/app/mypage/lib/authHelper.ts
new file mode 100644
index 0000000..f90c810
--- /dev/null
+++ b/src/app/mypage/lib/authHelper.ts
@@ -0,0 +1,62 @@
+import axios from './axios';
+import { UseFormSetError } from 'react-hook-form';
+import useAuthStore from '../store/authStore';
+import { ERROR_MESSAGES } from '../constants/message';
+import { ProfileFormValues } from '../components/ProfileForm';
+import { PasswordFormValues } from '../components/PasswordForm';
+
+export const updateProfile = async (data: ProfileFormValues) => {
+  const { image, nickname } = data;
+  const setUser = useAuthStore.getState().setUser;
+
+  let url = null;
+  try {
+    if (image) {
+      const formData = new FormData();
+      formData.append('image', image);
+      const response = await axios.post('/users/me/image', formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+      url = response.data.profileImageUrl;
+    }
+    const response = await axios.put('/users/me', {
+      nickname,
+      ...(url && { profileImageUrl: url }),
+    });
+    setUser(response.data);
+  } catch (error) {
+    if (error instanceof Error) {
+    }
+  }
+};
+
+export const updatePassword = async (
+  data: PasswordFormValues,
+  reset: () => void,
+  setError: UseFormSetError<PasswordFormValues>
+) => {
+  try {
+    await axios.put('/auth/password', {
+      password: data.currentPassword,
+      newPassword: data.newPassword,
+    });
+    reset();
+  } catch (error) {
+    if (error instanceof Error) {
+      if (error.message === ERROR_MESSAGES.CURRENT_PASSWORD_INCORRECT) {
+        setError('currentPassword', {
+          type: 'manual',
+          message: error.message,
+        });
+      }
+      if (error.message === ERROR_MESSAGES.SAME_AS_OLD_PASSWORD) {
+        setError('newPassword', {
+          type: 'manual',
+          message: error.message,
+        });
+      }
+    }
+  }
+};
diff --git a/src/app/mypage/lib/axios.ts b/src/app/mypage/lib/axios.ts
new file mode 100644
index 0000000..eb3adba
--- /dev/null
+++ b/src/app/mypage/lib/axios.ts
@@ -0,0 +1,36 @@
+import axios from 'axios';
+import useAuthStore from '../store/authStore';
+import { BASE_URL } from '@/constants/urls';
+
+const instance = axios.create({
+  baseURL: BASE_URL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  timeout: 10000,
+});
+
+instance.interceptors.request.use(
+  (config) => {
+    const accessToken = useAuthStore.getState().accessToken;
+    if (accessToken) {
+      config.headers.Authorization = `Bearer ${accessToken}`;
+    }
+    return config;
+  },
+  (error) => Promise.reject(error)
+);
+
+instance.interceptors.response.use(
+  (response) => {
+    return response;
+  },
+  (error) => {
+    if (error.response) {
+      throw new Error(error.response.data.message);
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default instance;
diff --git a/src/app/mypage/page.tsx b/src/app/mypage/page.tsx
index 4451f35..ecc1382 100644
--- a/src/app/mypage/page.tsx
+++ b/src/app/mypage/page.tsx
@@ -1,7 +1,22 @@
+'use client';
+
+import { useEffect } from 'react';
 import PasswordForm from './components/PasswordForm';
 import ProfileForm from './components/ProfileForm';
+import useAuth from './hooks/useAuth';
 
 export default function MyPage() {
+  const { login, getMe } = useAuth();
+
+  const handleLoad = async () => {
+    await login();
+    await getMe();
+  };
+
+  useEffect(() => {
+    handleLoad();
+  }, []);
+
   return (
     <>
       <ProfileForm />
diff --git a/src/app/mypage/store/authStore.ts b/src/app/mypage/store/authStore.ts
new file mode 100644
index 0000000..f9eb6b2
--- /dev/null
+++ b/src/app/mypage/store/authStore.ts
@@ -0,0 +1,18 @@
+import { create } from 'zustand';
+import { User } from '../types/user';
+
+interface AuthState {
+  accessToken: string | null;
+  user: User | null;
+  setAccessToken: (accessToken: string | null) => void;
+  setUser: (user: User | null) => void;
+}
+
+const useAuthStore = create<AuthState>((set) => ({
+  user: null,
+  accessToken: null,
+  setUser: (user) => set({ user }),
+  setAccessToken: (accessToken) => set({ accessToken }),
+}));
+
+export default useAuthStore;
diff --git a/src/app/mypage/types/user.ts b/src/app/mypage/types/user.ts
new file mode 100644
index 0000000..a46070a
--- /dev/null
+++ b/src/app/mypage/types/user.ts
@@ -0,0 +1,8 @@
+export interface User {
+  id: number;
+  email: string;
+  nickname: string;
+  profileImageUrl: string | null;
+  createdAt: string;
+  updatedAt: string;
+}