diff --git a/src/apis/students/index.ts b/src/apis/students/index.ts
index ddf9e86..8bca755 100644
--- a/src/apis/students/index.ts
+++ b/src/apis/students/index.ts
@@ -16,7 +16,10 @@ export const Signup = () => {
 
   return useMutation(
     async (body: RequestBody) => {
-      const response = await axios.post<ResponseBody>(`${process.env.NEXT_PUBLIC_BASE_URL}${router}`, body);
+      const response = await axios.post<ResponseBody>(
+        `${process.env.NEXT_PUBLIC_BASE_URL}${router}`,
+        body
+      );
       return response.data;
     },
     {
@@ -72,7 +75,10 @@ export const Signup = () => {
 export const MyProfile = () => {
   return useQuery(
     ["myProfile"],
-    async () => await instance.get<MyProfileProps>(`${router}/my`),
+    async () => {
+      const { data } = await instance.get<MyProfileProps>(`${router}/my`);
+      return data;
+    },
     {
       refetchOnWindowFocus: false,
     }
diff --git a/src/apis/students/type.ts b/src/apis/students/type.ts
index 3c11875..eae66df 100644
--- a/src/apis/students/type.ts
+++ b/src/apis/students/type.ts
@@ -11,6 +11,10 @@ export interface RequestBody {
 export interface MyProfileProps {
   student_name: string;
   student_gcn: string;
-  department: string; // 소개과 | 임베과 | 정보보안 | 인공지능
+  department:
+    | "SOFTWARE_DEVELOP"
+    | "EMBEDDED_SOFTWARE"
+    | "INFORMATION_SECURITY"
+    | "AI_SOFTWARE";
   profile_image_url: string;
 }
diff --git a/src/app/mypage/page.tsx b/src/app/mypage/page.tsx
index 2f63214..04e1428 100644
--- a/src/app/mypage/page.tsx
+++ b/src/app/mypage/page.tsx
@@ -1,3 +1,9 @@
+import DetailProfile from "@/components/mypage/DetailProfile";
+
 export default function MyPage() {
-  return <>mypage</>;
+  return (
+    <>
+      <DetailProfile />
+    </>
+  );
 }
diff --git a/src/components/SuggestionHeader.tsx b/src/components/SuggestionHeader.tsx
index 721968c..ed89a12 100644
--- a/src/components/SuggestionHeader.tsx
+++ b/src/components/SuggestionHeader.tsx
@@ -9,7 +9,7 @@ interface PropsType {
 }
 
 export default function SuggestionHeader({ listType }: PropsType) {
-  const { data } = MyProfile();
+  const { data: profile } = MyProfile();
 
   const suggestionHeaderDummy = {
     Company: {
@@ -17,7 +17,7 @@ export default function SuggestionHeader({ listType }: PropsType) {
       router: "/companies",
     },
     Recruitments: {
-      title: `👩‍💻 ${data?.data.student_name || "사용자"}님의 관심 분야에요`,
+      title: `👩‍💻 ${profile?.student_name || "사용자"}님의 관심 분야에요`,
 
       router: "/recruitments",
     },
diff --git a/src/components/common/Chips.tsx b/src/components/common/Chips.tsx
index b1dc358..467fde4 100644
--- a/src/components/common/Chips.tsx
+++ b/src/components/common/Chips.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { TechCodeResponensType } from "@/util/type";
+import { TechCodeResponensType } from "@/util/type/type";
 import React from "react";
 
 interface PropsType {
diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
index 0968003..2a6bbb3 100644
--- a/src/components/common/Header.tsx
+++ b/src/components/common/Header.tsx
@@ -14,7 +14,7 @@ function Header() {
     return null;
   }
 
-  const profile = MyProfile();
+  const { data: profile } = MyProfile();
 
   return (
     <div
@@ -62,15 +62,15 @@ function Header() {
             width={28}
             height={28}
             src={`${
-              profile.data?.data.profile_image_url &&
+              profile?.profile_image_url &&
               process.env.NEXT_PUBLIC_IMAGE_URL +
                 "/" +
-                profile.data.data.profile_image_url
+                profile?.profile_image_url
             }`}
             alt="프로필사진"
           />
           <p className="text-[#333333] text-b2 font-r">
-            {profile.data?.data.student_name}
+            {profile?.student_name}
           </p>
         </div>
         <div>
diff --git a/src/components/common/SearchDropDown.tsx b/src/components/common/SearchDropDown.tsx
index 008c7cb..9484a16 100644
--- a/src/components/common/SearchDropDown.tsx
+++ b/src/components/common/SearchDropDown.tsx
@@ -7,7 +7,7 @@ import TextFiled from "./TextFiled";
 import useForm from "@/hook/useForm";
 import Chips from "./Chips";
 import { GetCode } from "@/apis/code";
-import { TechCodeResponensType } from "@/util/type";
+import { TechCodeResponensType } from "@/util/type/type";
 import GhostBtn from "./Button/GhostBtn";
 import { setQueryStringType, useQueryString } from "@/hook/useQueryString";
 
@@ -46,7 +46,7 @@ function SearchDropDown({ title }: PropsType) {
 function TechCodeDropDownComponent({
   closeDropDown,
   setQueryString,
-  getQueryString
+  getQueryString,
 }: {
   closeDropDown: () => void;
   setQueryString: (newValue: setQueryStringType) => void;
diff --git a/src/components/mypage/DetailProfile.tsx b/src/components/mypage/DetailProfile.tsx
new file mode 100644
index 0000000..1458a2a
--- /dev/null
+++ b/src/components/mypage/DetailProfile.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import { MyProfile } from "@/apis/students";
+import { departmentEnum } from "@/util/object/enum";
+import { KebabItemType } from "@/util/type/kebabMenu";
+import { useToastStore } from "@team-return/design-system";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { Cookies } from "react-cookie";
+import KebabMenu from "../common/Dropdown/KebabMenu";
+import GhostTag from "./GhostTag";
+
+export default function DetailProfile() {
+  const { append } = useToastStore();
+  const navigator = useRouter();
+  const cookies = new Cookies();
+
+  const { data: profile } = MyProfile();
+
+  const kebabItems: KebabItemType[] = [
+    {
+      label: "프로필 수정",
+      onClick: () => {
+        append({
+          title: "",
+          message: "개발 중인 기능입니다.",
+          type: "YELLOW",
+        });
+      },
+    },
+    {
+      label: "비밀변호 변경",
+      onClick: () => {
+        append({
+          title: "",
+          message: "개발 중인 기능입니다.",
+          type: "YELLOW",
+        });
+      },
+    },
+    {
+      label: "버그 제보하기",
+      onClick: () => {
+        append({
+          title: "",
+          message: "개발 중인 기능입니다.",
+          type: "YELLOW",
+        });
+      },
+    },
+    {
+      label: "로그아웃",
+      onClick: () => {
+        navigator.push("/account/login");
+        cookies.remove("access_token");
+        cookies.remove("refresh_token");
+      },
+    },
+  ];
+
+  return (
+    <div className="flex items-center gap-6 px-[9vw]">
+      <div className="w-[100px] h-[100px] rounded-[50%] shadow-elevaiton overflow-hidden flex items-center justify-center">
+        <Image
+          width={100}
+          height={100}
+          src={
+            profile
+              ? `${process.env.NEXT_PUBLIC_IMAGE_URL}/${profile.profile_image_url}`
+              : ""
+          }
+          alt="프로필 사진"
+        />
+      </div>
+      <div className="flex-1">
+        <div className="flex items-center gap-2">
+          <p className="text-h5 leading-h5 font-m">{profile?.student_name}</p>
+          <GhostTag>{profile?.student_gcn}</GhostTag>
+        </div>
+        <p className="text-b3 leading-b3 font-r text-[#7F7F7F]">
+          {profile && departmentEnum[profile.department]}
+        </p>
+      </div>
+      <KebabMenu items={kebabItems} />
+    </div>
+  );
+}
diff --git a/src/components/mypage/GhostTag.tsx b/src/components/mypage/GhostTag.tsx
new file mode 100644
index 0000000..c033111
--- /dev/null
+++ b/src/components/mypage/GhostTag.tsx
@@ -0,0 +1,13 @@
+interface PropsType {
+  children?: string | number;
+}
+
+export default function GhostTag({ children }: PropsType) {
+  return (
+    <div className="px-2 py-[2px] border border-[#18DB89] rounded-[100px] h-fit w-fit">
+      <p className="text-caption leading-caption font-m text-[#18DB89]">
+        {children}
+      </p>
+    </div>
+  );
+}
diff --git a/src/components/recruitments/RecruitmentsTable.tsx b/src/components/recruitments/RecruitmentsTable.tsx
index 0b90de8..2bc0a33 100644
--- a/src/components/recruitments/RecruitmentsTable.tsx
+++ b/src/components/recruitments/RecruitmentsTable.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { RecruitmentsDetailTable } from "@/apis/recruitments/type";
-import { hiringProgressEnum } from "@/util/enum";
+import { hiringProgressEnum } from "@/util/object/enum";
 import { money_regex, time_parsing } from "@/util/regex";
 import { Icon } from "@team-return/design-system";
 import React, { useState } from "react";
diff --git a/src/util/enum.ts b/src/util/object/enum.ts
similarity index 58%
rename from src/util/enum.ts
rename to src/util/object/enum.ts
index 5628a90..3ea9e25 100644
--- a/src/util/enum.ts
+++ b/src/util/object/enum.ts
@@ -9,3 +9,10 @@ export enum hiringProgressEnum {
   AI = "AI면접",
   CODING_TEST = "코딩테스트",
 }
+
+export enum departmentEnum {
+  SOFTWARE_DEVELOP = '소프트웨어개발과',
+  EMBEDDED_SOFTWARE = '임베디드소프트웨어과',
+  INFORMATION_SECURITY = '정보보안과',
+  AI_SOFTWARE = '인공지능스프트웨어과'
+}
diff --git a/src/util/type.ts b/src/util/type/type.ts
similarity index 100%
rename from src/util/type.ts
rename to src/util/type/type.ts