diff --git a/public/icon/arrow_right_icon.svg b/public/icon/arrow_right_icon.svg
new file mode 100644
index 0000000..49a70bf
--- /dev/null
+++ b/public/icon/arrow_right_icon.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.359 9.99933L6.08176 3.72208C5.91616 3.55648 5.8355 3.35937 5.83976 3.13074C5.84404 2.90211 5.92898 2.705 6.09457 2.53941C6.26017 2.37381 6.45728 2.29102 6.68591 2.29102C6.91453 2.29102 7.11164 2.37381 7.27724 2.53941L13.6571 8.93204C13.8077 9.08268 13.9193 9.25147 13.992 9.43843C14.0646 9.62541 14.1009 9.81237 14.1009 9.99933C14.1009 10.1863 14.0646 10.3733 13.992 10.5602C13.9193 10.7472 13.8077 10.916 13.6571 11.0666L7.26443 17.4592C7.09883 17.6248 6.90385 17.7055 6.67949 17.7012C6.45514 17.697 6.26017 17.612 6.09457 17.4464C5.92898 17.2808 5.84618 17.0837 5.84618 16.8551C5.84618 16.6265 5.92898 16.4294 6.09457 16.2638L12.359 9.99933Z" fill="#333236"/>
+</svg>
diff --git a/src/app/(after-login)/mypage/_components/BackButton.tsx b/src/app/(after-login)/mypage/_components/BackButton.tsx
new file mode 100644
index 0000000..62eb7a8
--- /dev/null
+++ b/src/app/(after-login)/mypage/_components/BackButton.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import Image from "next/image";
+import BackIcon from "../../../../../public/icon/arrow_right_icon.svg";
+
+export default function BackButton() {
+  const router = useRouter();
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => {
+          router.back();
+        }}
+        className="flex gap-2 items-center"
+      >
+        <Image
+          src={BackIcon}
+          className="scale-x-[-1] w-[18px] h-[18px] tablet:w-[18px] tablet:h-[18px]"
+          alt=""
+        />
+        <div className="font-medium text-md text-gray-800 tablet:text-lg">
+          돌아가기
+        </div>
+      </button>
+    </div>
+  );
+}
diff --git a/src/app/(after-login)/mypage/_components/PasswordSection.tsx b/src/app/(after-login)/mypage/_components/PasswordSection.tsx
new file mode 100644
index 0000000..2b12ad1
--- /dev/null
+++ b/src/app/(after-login)/mypage/_components/PasswordSection.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import Button from "@/components/common/button/Button";
+import Input from "@/components/common/input/Input";
+
+export default function PasswordSection() {
+  return (
+    <div className="w-full p-4 rounded-lg bg-white tablet:p-6">
+      <div className="flex flex-col gap-10 tablet:gap-6">
+        <div className="font-bold text-2lg text-gray-800 tablet:text-2xl">
+          비밀번호 변경
+        </div>
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-4">
+            {/* 로그인/회원가입 페이지에서 한 것 처럼 패스워드 토글 버튼 넣어도 좋을 것 같네요 */}
+            <Input type="password" label="현재 비밀번호" />
+            <Input type="password" label="새 비밀번호" />
+            <Input type="password" label="새 비밀번호 확인" />
+          </div>
+          <Button variant="purple">변경</Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(after-login)/mypage/_components/ProfileSection.tsx b/src/app/(after-login)/mypage/_components/ProfileSection.tsx
new file mode 100644
index 0000000..d4444f8
--- /dev/null
+++ b/src/app/(after-login)/mypage/_components/ProfileSection.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { UserInfo } from "@/lib/types";
+import { fetchUser } from "@/lib/apis/usersApi";
+import { TOKEN_1 } from "@/lib/constants/tokens";
+import Button from "@/components/common/button/Button";
+import ImageInput from "@/components/common/input/ImageInput";
+import Input from "@/components/common/input/Input";
+
+export default function ProfileSection() {
+  const [data, setData] = useState<UserInfo | null>(null);
+
+  useEffect(() => {
+    const getData = async () => {
+      const res = await fetchUser({
+        token: TOKEN_1,
+      });
+      setData(res);
+    };
+
+    getData();
+  }, []);
+
+  if (!data) return;
+
+  const { email, nickname, profileImageUrl } = data;
+
+  // 이 밑으로 formData(닉네임, 이미지) state 생성하시고, 기본값으로 각각 위의 nickname, profileImageUrl 넣어주시면 될 거예요
+  // 아래는 vercel 배포를 위해 위 값들을 임시로 사용한 테스트 코드라 나중에 삭제해주시면 됩니다
+  console.log(nickname);
+  console.log(profileImageUrl);
+
+  return (
+    <div className="w-full p-4 rounded-lg bg-white tablet:p-6">
+      <div className="flex flex-col gap-10 tablet:gap-6">
+        <div className="font-bold text-2lg text-gray-800 tablet:text-2xl">
+          프로필
+        </div>
+        <div className="flex flex-col gap-10 tablet:flex-row tablet:gap-[42px]">
+          <div>
+            <ImageInput variant="profile" />
+          </div>
+          <div className="flex flex-col gap-6 grow">
+            <div className="flex flex-col gap-4">
+              {/* 이메일 인풋에는 나중에 disabled 속성 들어가야 합니다 */}
+              <Input label="이메일" value={email} />
+              <Input label="닉네임" />
+            </div>
+            <Button variant="purple">저장</Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(after-login)/mypage/page.tsx b/src/app/(after-login)/mypage/page.tsx
index c77a0a2..8093b20 100644
--- a/src/app/(after-login)/mypage/page.tsx
+++ b/src/app/(after-login)/mypage/page.tsx
@@ -1,3 +1,17 @@
+import BackButton from "./_components/BackButton";
+import PasswordSection from "./_components/PasswordSection";
+import ProfileSection from "./_components/ProfileSection";
+
 export default function Page() {
-  return <div>/mypage</div>;
+  return (
+    <div className="flex flex-col px-3 py-4">
+      <div className="flex flex-col gap-[6px] tablet:gap-[29px]">
+        <BackButton />
+        <div className="flex flex-col gap-4 max-w-[672px] tablet:gap-6">
+          <ProfileSection />
+          <PasswordSection />
+        </div>
+      </div>
+    </div>
+  );
 }