diff --git a/src/app/(with-header-sidebar)/mypage/_components/AlertModal.module.css b/src/app/(with-header-sidebar)/mypage/_components/AlertModal.module.css
new file mode 100644
index 0000000..1921720
--- /dev/null
+++ b/src/app/(with-header-sidebar)/mypage/_components/AlertModal.module.css
@@ -0,0 +1,31 @@
+.modal {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 32px;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 26px;
+  color: var(--black-100);
+  padding: 32px 40px;
+}
+
+.button {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 24px;
+  padding: 9px 83.5px;
+}
+
+@media screen and (min-width: 768px) {
+  .modal {
+    font-size: 20px;
+    line-height: 32px;
+    padding: 40px 64px;
+  }
+  .button {
+    font-size: 16px;
+    line-height: 26px;
+    padding: 11px 106px;
+  }
+}
diff --git a/src/app/(with-header-sidebar)/mypage/_components/AlertModal.tsx b/src/app/(with-header-sidebar)/mypage/_components/AlertModal.tsx
new file mode 100644
index 0000000..1150b36
--- /dev/null
+++ b/src/app/(with-header-sidebar)/mypage/_components/AlertModal.tsx
@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import Button from '@/components/Button';
+import styles from './AlertModal.module.css';
+import useModalStore from '../_store/modalStore';
+
+export default function AlertModal({ children }: { children: ReactNode }) {
+  const { closeModal } = useModalStore();
+
+  return (
+    <div className={styles.modal}>
+      {children}
+      <Button className={styles.button} onClick={closeModal}>
+        확인
+      </Button>
+    </div>
+  );
+}
diff --git a/src/app/mypage/components/FileInput.module.css b/src/app/(with-header-sidebar)/mypage/_components/FileInput.module.css
similarity index 60%
rename from src/app/mypage/components/FileInput.module.css
rename to src/app/(with-header-sidebar)/mypage/_components/FileInput.module.css
index f9a08af..767db80 100644
--- a/src/app/mypage/components/FileInput.module.css
+++ b/src/app/(with-header-sidebar)/mypage/_components/FileInput.module.css
@@ -20,6 +20,26 @@
   display: none;
 }
 
+.image {
+  border-radius: 8px;
+}
+
+.hoverContent {
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.label:hover .image {
+  filter: brightness(50%);
+  transition: filter 0.3s ease-in-out;
+}
+
+.label:hover .hoverContent {
+  opacity: 1;
+  transition: opacity 0.3s ease-in-out;
+  z-index: 1;
+}
+
 @media screen and (min-width: 768px) {
   .label {
     width: 182px;
diff --git a/src/app/mypage/components/FileInput.tsx b/src/app/(with-header-sidebar)/mypage/_components/FileInput.tsx
similarity index 78%
rename from src/app/mypage/components/FileInput.tsx
rename to src/app/(with-header-sidebar)/mypage/_components/FileInput.tsx
index 11f1b56..9bd3793 100644
--- a/src/app/mypage/components/FileInput.tsx
+++ b/src/app/(with-header-sidebar)/mypage/_components/FileInput.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect } from 'react';
 import { ChangeEvent, useState } from 'react';
 import Image from 'next/image';
@@ -31,7 +33,16 @@ export default function FileInput({ name, setValue, url, id }: FileInputProps) {
     <>
       <label className={styles.label} htmlFor={id}>
         {preview ? (
-          <Image src={preview} alt="미리보기" fill />
+          <>
+            <Image src={preview} alt="미리보기" fill className={styles.image} />
+            <Image
+              src="/icons/edit.svg"
+              alt="이미지수정"
+              width={30}
+              height={30}
+              className={styles.hoverContent}
+            />
+          </>
         ) : (
           <div className={styles.iconContainer}>
             <Image src="/icons/add.svg" alt="이미지 추가" fill />
diff --git a/src/app/(with-header-sidebar)/mypage/_components/Form.module.css b/src/app/(with-header-sidebar)/mypage/_components/Form.module.css
new file mode 100644
index 0000000..fa6efce
--- /dev/null
+++ b/src/app/(with-header-sidebar)/mypage/_components/Form.module.css
@@ -0,0 +1,64 @@
+.form {
+  background-color: var(--white);
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.profile {
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+}
+
+.userInfo {
+  flex: 1;
+}
+
+.form h2 {
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 26px;
+  color: var(--black-100);
+  margin-bottom: 40px;
+}
+
+.input {
+  margin-bottom: 16px;
+}
+
+.button {
+  line-height: 24px;
+  margin-top: 24px;
+  padding: 15px 0;
+}
+
+@media screen and (min-width: 768px) {
+  .form {
+    padding: 24px;
+  }
+
+  .form h2 {
+    font-size: 24px;
+    line-height: 32px;
+    margin-bottom: 24px;
+  }
+
+  .profile {
+    flex-direction: row;
+    gap: 42px;
+  }
+
+  .button {
+    padding: 14px 0;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .form {
+    max-width: 672px;
+  }
+
+  .userInfo {
+    max-width: 400px;
+  }
+}
diff --git a/src/app/mypage/components/Input.module.css b/src/app/(with-header-sidebar)/mypage/_components/Input.module.css
similarity index 100%
rename from src/app/mypage/components/Input.module.css
rename to src/app/(with-header-sidebar)/mypage/_components/Input.module.css
diff --git a/src/app/mypage/components/Input.tsx b/src/app/(with-header-sidebar)/mypage/_components/Input.tsx
similarity index 92%
rename from src/app/mypage/components/Input.tsx
rename to src/app/(with-header-sidebar)/mypage/_components/Input.tsx
index d2bc323..7730077 100644
--- a/src/app/mypage/components/Input.tsx
+++ b/src/app/(with-header-sidebar)/mypage/_components/Input.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { ReactNode } from 'react';
 import { FieldError, UseFormRegisterReturn } from 'react-hook-form';
 import Label from './Label';
@@ -38,8 +40,8 @@ export default function Input({
           {...register}
         />
         {children}
-        {error && <span className={styles.error}>{error.message}</span>}
       </div>
+      {error && <span className={styles.error}>{error.message}</span>}
     </div>
   );
 }
diff --git a/src/app/mypage/components/Label.module.css b/src/app/(with-header-sidebar)/mypage/_components/Label.module.css
similarity index 100%
rename from src/app/mypage/components/Label.module.css
rename to src/app/(with-header-sidebar)/mypage/_components/Label.module.css
diff --git a/src/app/mypage/components/Label.tsx b/src/app/(with-header-sidebar)/mypage/_components/Label.tsx
similarity index 100%
rename from src/app/mypage/components/Label.tsx
rename to src/app/(with-header-sidebar)/mypage/_components/Label.tsx
diff --git a/src/app/(with-header-sidebar)/mypage/_components/Modal.module.css b/src/app/(with-header-sidebar)/mypage/_components/Modal.module.css
new file mode 100644
index 0000000..15ee52f
--- /dev/null
+++ b/src/app/(with-header-sidebar)/mypage/_components/Modal.module.css
@@ -0,0 +1,17 @@
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+}
+
+.modal {
+  background: var(--white);
+  border-radius: 16px;
+}
diff --git a/src/app/(with-header-sidebar)/mypage/_components/Modal.tsx b/src/app/(with-header-sidebar)/mypage/_components/Modal.tsx
new file mode 100644
index 0000000..266912f
--- /dev/null
+++ b/src/app/(with-header-sidebar)/mypage/_components/Modal.tsx
@@ -0,0 +1,35 @@
+import { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import useModalStore from '../_store/modalStore';
+import styles from './modal.module.css';
+
+export default function Modal() {
+  const { modals, closeModal } = useModalStore();
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        closeModal();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [closeModal]);
+
+  if (modals.length === 0) return null;
+
+  return createPortal(
+    <div className={styles.overlay}>
+      {modals.map((content, index) => (
+        <div key={index} className={styles.modal}>
+          {content}
+        </div>
+      ))}
+    </div>,
+    document.body
+  );
+}
diff --git a/src/app/mypage/components/PasswordForm.tsx b/src/app/(with-header-sidebar)/mypage/_components/PasswordForm.tsx
similarity index 57%
rename from src/app/mypage/components/PasswordForm.tsx
rename to src/app/(with-header-sidebar)/mypage/_components/PasswordForm.tsx
index 588ade6..d05a4cd 100644
--- a/src/app/mypage/components/PasswordForm.tsx
+++ b/src/app/(with-header-sidebar)/mypage/_components/PasswordForm.tsx
@@ -1,10 +1,14 @@
+'use client';
+
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import Input from './Input';
 import Button from '@/components/Button';
-import { ERROR_MESSAGES } from '../constants/message';
+import { ERROR_MESSAGES } from '../_constants/message';
 import styles from './Form.module.css';
-import { updatePassword } from '../lib/authHelper';
+import useModalStore from '../_store/modalStore';
+import axios from '../_lib/axios';
+import AlertModal from './AlertModal';
 
 export interface PasswordFormValues {
   currentPassword: string;
@@ -16,18 +20,43 @@ export default function PasswordForm() {
   const {
     register,
     handleSubmit,
-    formState: { errors },
+    formState: { errors, isValid },
     watch,
     trigger,
     setError,
     reset,
   } = useForm<PasswordFormValues>({ mode: 'onChange' });
+  const { openModal } = useModalStore();
 
   const customIsValid = Object.keys(errors).length === 0;
   const watchedPassword = watch('newPassword');
 
-  const onSubmit = async (data: PasswordFormValues) =>
-    updatePassword(data, reset, setError);
+  const onSubmit = async (data: 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) {
+          openModal(<AlertModal>{error.message}</AlertModal>);
+          setError('currentPassword', {
+            type: 'manual',
+            message: error.message,
+          });
+        }
+        if (error.message === ERROR_MESSAGES.SAME_AS_OLD_PASSWORD) {
+          openModal(<AlertModal>{error.message}</AlertModal>);
+          setError('newPassword', {
+            type: 'manual',
+            message: error.message,
+          });
+        }
+      }
+    }
+  };
 
   useEffect(() => {
     if (watchedPassword) {
@@ -44,7 +73,9 @@ export default function PasswordForm() {
         name="currentPassword"
         label="현재 비밀번호"
         placeholder="비밀번호 입력"
-        register={register('currentPassword')}
+        register={register('currentPassword', {
+          required: ERROR_MESSAGES.PASSWORD_REQUIRE,
+        })}
         error={errors.currentPassword}
       />
       <Input
@@ -54,6 +85,7 @@ export default function PasswordForm() {
         label="새 비밀번호"
         placeholder="새 비밀번호 입력"
         register={register('newPassword', {
+          required: ERROR_MESSAGES.PASSWORD_REQUIRE,
           minLength: {
             value: 8,
             message: ERROR_MESSAGES.PASSWORD_TOO_SHORT,
@@ -70,11 +102,17 @@ export default function PasswordForm() {
           validate: {
             matchesPassword: (value) =>
               value === watchedPassword || ERROR_MESSAGES.PASSWORDS_MATCH,
+            required: (value) =>
+              value !== '' || ERROR_MESSAGES.PASSWORD_REQUIRE,
           },
         })}
         error={errors.newPasswordConfirmation}
       />
-      <Button className={styles.button} type="submit" disabled={!customIsValid}>
+      <Button
+        className={styles.button}
+        type="submit"
+        disabled={!(isValid && customIsValid)}
+      >
         변경
       </Button>
     </form>
diff --git a/src/app/(with-header-sidebar)/mypage/_components/ProfileForm.tsx b/src/app/(with-header-sidebar)/mypage/_components/ProfileForm.tsx
new file mode 100644
index 0000000..236a598
--- /dev/null
+++ b/src/app/(with-header-sidebar)/mypage/_components/ProfileForm.tsx
@@ -0,0 +1,75 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import useAuth from '../_hooks/useAuth';
+import FileInput from './FileInput';
+import Input from './Input';
+import Button from '@/components/Button';
+import { updateProfile } from '../_lib/userService';
+import styles from './Form.module.css';
+import { ERROR_MESSAGES } from '../_constants/message';
+
+export interface ProfileFormValues {
+  image: File | null;
+  email: string;
+  nickname: string;
+}
+
+export default function ProfileForm() {
+  const { user } = useAuth();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid },
+    setValue,
+    reset,
+  } = useForm<ProfileFormValues>({ mode: 'onChange' });
+
+  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>
+      <div className={styles.profile}>
+        <FileInput
+          id="image"
+          name="image"
+          setValue={setValue}
+          url={user?.profileImageUrl}
+        />
+        <div className={styles.userInfo}>
+          <Input
+            className={styles.input}
+            type="text"
+            name="email"
+            label="이메일"
+            register={register('email')}
+            readOnly
+          />
+          <Input
+            className={styles.input}
+            type="text"
+            name="nickname"
+            label="닉네임"
+            placeholder="닉네임 입력"
+            register={register('nickname', {
+              required: ERROR_MESSAGES.NICKNAME_REQUIRE,
+            })}
+            error={errors.nickname}
+          />
+          <Button className={styles.button} type="submit" disabled={!isValid}>
+            저장
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+}
diff --git a/src/app/mypage/constants/message.ts b/src/app/(with-header-sidebar)/mypage/_constants/message.ts
similarity index 73%
rename from src/app/mypage/constants/message.ts
rename to src/app/(with-header-sidebar)/mypage/_constants/message.ts
index 954c85d..50d2a15 100644
--- a/src/app/mypage/constants/message.ts
+++ b/src/app/(with-header-sidebar)/mypage/_constants/message.ts
@@ -3,4 +3,6 @@ export const ERROR_MESSAGES = {
   PASSWORDS_MATCH: '비밀번호가 일치하지 않습니다.',
   SAME_AS_OLD_PASSWORD: '기존 비밀번호와 동일합니다.',
   PASSWORD_TOO_SHORT: '비밀번호를 8자 이상 입력해주세요.',
+  NICKNAME_REQUIRE: '닉네임을 입력해주세요.',
+  PASSWORD_REQUIRE: '비밀번호를 입력해주세요.',
 };
diff --git a/src/app/mypage/hooks/useAuth.ts b/src/app/(with-header-sidebar)/mypage/_hooks/useAuth.ts
similarity index 90%
rename from src/app/mypage/hooks/useAuth.ts
rename to src/app/(with-header-sidebar)/mypage/_hooks/useAuth.ts
index 74aa496..d123096 100644
--- a/src/app/mypage/hooks/useAuth.ts
+++ b/src/app/(with-header-sidebar)/mypage/_hooks/useAuth.ts
@@ -1,5 +1,5 @@
-import useAuthStore from '../store/authStore';
-import axios from '../lib/axios';
+import useAuthStore from '../_store/authStore';
+import axios from '../_lib/axios';
 
 const useAuth = () => {
   const { user, accessToken, setUser, setAccessToken } = useAuthStore();
diff --git a/src/app/mypage/lib/axios.ts b/src/app/(with-header-sidebar)/mypage/_lib/axios.ts
similarity index 93%
rename from src/app/mypage/lib/axios.ts
rename to src/app/(with-header-sidebar)/mypage/_lib/axios.ts
index eb3adba..c320985 100644
--- a/src/app/mypage/lib/axios.ts
+++ b/src/app/(with-header-sidebar)/mypage/_lib/axios.ts
@@ -1,5 +1,5 @@
 import axios from 'axios';
-import useAuthStore from '../store/authStore';
+import useAuthStore from '../_store/authStore';
 import { BASE_URL } from '@/constants/urls';
 
 const instance = axios.create({
diff --git a/src/app/mypage/lib/authHelper.ts b/src/app/(with-header-sidebar)/mypage/_lib/userService.ts
similarity index 86%
rename from src/app/mypage/lib/authHelper.ts
rename to src/app/(with-header-sidebar)/mypage/_lib/userService.ts
index f90c810..5220dc5 100644
--- a/src/app/mypage/lib/authHelper.ts
+++ b/src/app/(with-header-sidebar)/mypage/_lib/userService.ts
@@ -1,9 +1,9 @@
 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';
+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;
diff --git a/src/app/mypage/store/authStore.ts b/src/app/(with-header-sidebar)/mypage/_store/authStore.ts
similarity index 91%
rename from src/app/mypage/store/authStore.ts
rename to src/app/(with-header-sidebar)/mypage/_store/authStore.ts
index f9eb6b2..3b1fd31 100644
--- a/src/app/mypage/store/authStore.ts
+++ b/src/app/(with-header-sidebar)/mypage/_store/authStore.ts
@@ -1,5 +1,5 @@
 import { create } from 'zustand';
-import { User } from '../types/user';
+import { User } from '@/types/user';
 
 interface AuthState {
   accessToken: string | null;
diff --git a/src/app/(with-header-sidebar)/mypage/_store/modalStore.ts b/src/app/(with-header-sidebar)/mypage/_store/modalStore.ts
new file mode 100644
index 0000000..54e0579
--- /dev/null
+++ b/src/app/(with-header-sidebar)/mypage/_store/modalStore.ts
@@ -0,0 +1,22 @@
+import { create } from 'zustand';
+import { ReactNode } from 'react';
+
+interface ModalState {
+  modals: ReactNode[];
+  openModal: (content: ReactNode) => void;
+  closeModal: () => void;
+}
+
+const useModalStore = create<ModalState>((set) => ({
+  modals: [],
+  openModal: (content) =>
+    set((state) => ({
+      modals: [...state.modals, content],
+    })),
+  closeModal: () =>
+    set((state) => ({
+      modals: state.modals.slice(0, -1),
+    })),
+}));
+
+export default useModalStore;
diff --git a/src/app/(with-header-sidebar)/mypage/layout.module.css b/src/app/(with-header-sidebar)/mypage/layout.module.css
new file mode 100644
index 0000000..a760cfb
--- /dev/null
+++ b/src/app/(with-header-sidebar)/mypage/layout.module.css
@@ -0,0 +1,37 @@
+.layout {
+  background-color: var(--gray-100);
+  padding: 16px 12px;
+}
+
+.button.button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background-color: transparent;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 24px;
+  color: var(--black-100);
+  width: auto;
+  margin-bottom: 29px;
+}
+
+@media screen and (min-width: 768px) {
+  .layout {
+    padding: 16px;
+  }
+
+  .button.button {
+    font-size: 16px;
+    line-height: 26px;
+  }
+  .button img {
+    width: 20px;
+    height: 20px;
+  }
+}
+@media screen and (min-width: 1200px) {
+  .layout {
+    padding: 20px;
+  }
+}
diff --git a/src/app/(with-header-sidebar)/mypage/layout.tsx b/src/app/(with-header-sidebar)/mypage/layout.tsx
new file mode 100644
index 0000000..e18a78d
--- /dev/null
+++ b/src/app/(with-header-sidebar)/mypage/layout.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import { ReactNode } from 'react';
+import Image from 'next/image';
+import Button from '@/components/Button';
+import styles from './layout.module.css';
+import { useRouter } from 'next/navigation';
+import Modal from './_components/Modal';
+
+export default function Layout({ children }: { children: ReactNode }) {
+  const router = useRouter();
+
+  const handleBack = () => {
+    router.back();
+  };
+
+  return (
+    <section className={styles.layout}>
+      <Button className={styles.button} onClick={handleBack}>
+        <Image
+          src="/icons/arrow_left.svg"
+          width={18}
+          height={18}
+          alt="돌아가기"
+        />
+        돌아가기
+      </Button>
+      {children}
+      <Modal />
+    </section>
+  );
+}
diff --git a/src/app/(with-header-sidebar)/mypage/page.module.css b/src/app/(with-header-sidebar)/mypage/page.module.css
new file mode 100644
index 0000000..c62eb9a
--- /dev/null
+++ b/src/app/(with-header-sidebar)/mypage/page.module.css
@@ -0,0 +1,11 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+@media screen and (min-width: 768px) {
+  .page {
+    gap: 24px;
+  }
+}
diff --git a/src/app/mypage/page.tsx b/src/app/(with-header-sidebar)/mypage/page.tsx
similarity index 57%
rename from src/app/mypage/page.tsx
rename to src/app/(with-header-sidebar)/mypage/page.tsx
index ecc1382..34e5932 100644
--- a/src/app/mypage/page.tsx
+++ b/src/app/(with-header-sidebar)/mypage/page.tsx
@@ -1,9 +1,10 @@
 'use client';
 
 import { useEffect } from 'react';
-import PasswordForm from './components/PasswordForm';
-import ProfileForm from './components/ProfileForm';
-import useAuth from './hooks/useAuth';
+import PasswordForm from './_components/PasswordForm';
+import ProfileForm from './_components/ProfileForm';
+import useAuth from './_hooks/useAuth';
+import styles from './page.module.css';
 
 export default function MyPage() {
   const { login, getMe } = useAuth();
@@ -18,9 +19,9 @@ export default function MyPage() {
   }, []);
 
   return (
-    <>
+    <div className={styles.page}>
       <ProfileForm />
       <PasswordForm />
-    </>
+    </div>
   );
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index b8e2136..5a2fd58 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from 'next';
 import localFont from 'next/font/local';
-import { Montserrat } from 'next/font/google';
+// import { Montserrat } from 'next/font/google';
 import './variables.css';
 import './reset.css';
 
@@ -11,11 +11,11 @@ const pretendard = localFont({
   variable: '--font-pretendard',
 });
 
-export const montserrat = Montserrat({
-  display: 'swap',
-  subsets: ['latin'],
-  variable: '--font-montserrat',
-});
+// export const montserrat = Montserrat({
+//   display: 'swap',
+//   subsets: ['latin'],
+//   variable: '--font-montserrat',
+// });
 
 export const metadata: Metadata = {
   title: 'Taskify',
@@ -28,10 +28,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="kr">
-      <body className={`${pretendard.variable} ${montserrat.variable}`}>
-        {children}
-      </body>
+    <html lang="ko">
+      <body className={`${pretendard.variable}`}>{children}</body>
     </html>
   );
 }
diff --git a/src/app/mypage/components/Form.module.css b/src/app/mypage/components/Form.module.css
deleted file mode 100644
index 8ec100e..0000000
--- a/src/app/mypage/components/Form.module.css
+++ /dev/null
@@ -1,29 +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 {
-  line-height: 24px;
-  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
deleted file mode 100644
index af4c453..0000000
--- a/src/app/mypage/components/ProfileForm.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { useEffect } from 'react';
-import { useForm } from 'react-hook-form';
-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 ProfileFormValues {
-  image: File | null;
-  email: string;
-  nickname: string;
-}
-
-export default function ProfileForm() {
-  const { user } = useAuth();
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-    setValue,
-    reset,
-  } = useForm<ProfileFormValues>();
-
-  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
-        id="image"
-        name="image"
-        setValue={setValue}
-        url={user?.profileImageUrl}
-      />
-      <Input
-        className={styles.input}
-        type="text"
-        name="email"
-        label="이메일"
-        register={register('email')}
-        readOnly
-      />
-      <Input
-        className={styles.input}
-        type="text"
-        name="nickname"
-        label="닉네임"
-        placeholder="닉네임 입력"
-        register={register('nickname')}
-      />
-      <Button className={styles.button} type="submit" disabled={!customIsValid}>
-        저장
-      </Button>
-    </form>
-  );
-}
diff --git a/src/app/mypage/layout.tsx b/src/app/mypage/layout.tsx
deleted file mode 100644
index e3a0137..0000000
--- a/src/app/mypage/layout.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { ReactNode } from 'react';
-
-export default function Layout({ children }: { children: ReactNode }) {
-  return <>{children}</>;
-}
diff --git a/src/app/mypage/types/user.ts b/src/app/mypage/types/user.ts
deleted file mode 100644
index a46070a..0000000
--- a/src/app/mypage/types/user.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export interface User {
-  id: number;
-  email: string;
-  nickname: string;
-  profileImageUrl: string | null;
-  createdAt: string;
-  updatedAt: string;
-}
diff --git a/src/app/page.module.css b/src/app/page.module.css
index f4ef41b..fa056f9 100644
--- a/src/app/page.module.css
+++ b/src/app/page.module.css
@@ -70,7 +70,7 @@
 }
 
 .homeBrand {
-  font-family: var(--font-montserrat);
+  /* font-family: var(--font-montserrat); */
   font-size: 90px;
   font-weight: 700;
   color: var(--violet);