diff --git a/src/app/mypage/my-active/my-comment/page.tsx b/src/app/mypage/my-active/my-comment/page.tsx
index c69e1e6..480939f 100644
--- a/src/app/mypage/my-active/my-comment/page.tsx
+++ b/src/app/mypage/my-active/my-comment/page.tsx
@@ -1,4 +1,4 @@
-// import CommentList from '@/domains/shared/components/comment/CommentList';
+import MyComment from '@/domains/mypage/components/pages/my-active/MyComment';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {
@@ -7,6 +7,6 @@ export const metadata: Metadata = {
 };
 
 function Page() {
-  return <>{/* <CommentList /> */}</>;
+  return <MyComment />;
 }
 export default Page;
diff --git a/src/app/mypage/my-active/my-like/page.tsx b/src/app/mypage/my-active/my-like/page.tsx
index 0a8e73e..fb9205a 100644
--- a/src/app/mypage/my-active/my-like/page.tsx
+++ b/src/app/mypage/my-active/my-like/page.tsx
@@ -1,4 +1,5 @@
 // import PostCard from '@/domains/community/main/PostCard';
+import MyLike from '@/domains/mypage/components/pages/my-active/MyLike';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {
@@ -7,6 +8,6 @@ export const metadata: Metadata = {
 };
 
 function Page() {
-  return <section>{/* <PostCard posts={posts} isLoading={isLoading} /> */}</section>;
+  // return <MyLike />;
 }
 export default Page;
diff --git a/src/app/mypage/my-active/my-post/page.tsx b/src/app/mypage/my-active/my-post/page.tsx
index 70c47d8..775ac07 100644
--- a/src/app/mypage/my-active/my-post/page.tsx
+++ b/src/app/mypage/my-active/my-post/page.tsx
@@ -1,4 +1,4 @@
-// import PostCard from '@/domains/community/main/PostCard';
+import MyPost from '@/domains/mypage/components/pages/my-active/MyPost';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {
@@ -7,6 +7,6 @@ export const metadata: Metadata = {
 };
 
 function Page() {
-  return <div>{/* <PostCard posts={posts} isLoading={isLoading} /> */}</div>;
+  return <MyPost />;
 }
 export default Page;
diff --git a/src/app/mypage/my-alarm/page.tsx b/src/app/mypage/my-alarm/page.tsx
index ec9e77c..c094bd4 100644
--- a/src/app/mypage/my-alarm/page.tsx
+++ b/src/app/mypage/my-alarm/page.tsx
@@ -1,4 +1,4 @@
-import Alarm from '@/domains/mypage/components/Alarm';
+import MyAlarm from '@/domains/mypage/components/pages/my-alarm/MyAlarm';
 
 import { Metadata } from 'next';
 
@@ -10,10 +10,7 @@ export const metadata: Metadata = {
 function Page() {
   return (
     <div className="flex flex-col gap-3">
-      <Alarm></Alarm>
-      <Alarm></Alarm>
-      <Alarm></Alarm>
-      <Alarm></Alarm>
+      <MyAlarm />
     </div>
   );
 }
diff --git a/src/app/mypage/my-bar/page.tsx b/src/app/mypage/my-bar/page.tsx
index 4c12cc4..54fa638 100644
--- a/src/app/mypage/my-bar/page.tsx
+++ b/src/app/mypage/my-bar/page.tsx
@@ -1,4 +1,4 @@
-import CocktailCard from '@/domains/shared/components/cocktail-card/CocktailCard';
+import MyBar from '@/domains/mypage/components/pages/my-bar/MyBar';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {
@@ -7,19 +7,6 @@ export const metadata: Metadata = {
 };
 
 function Page() {
-  return (
-    <div
-      className="grid grid-cols-1 justify-items-center mt-10 gap-8  sm:[grid-template-columns:repeat(2,minmax(0,320px))]  sm:justify-evenly md:[grid-template-columns:repeat(3,minmax(0,250px))]  
-  "
-    >
-      <CocktailCard
-        src=""
-        textSize1="text-xl"
-        name="Old Pashioned"
-        nameKo="올드 패션드"
-        keep={false}
-      ></CocktailCard>
-    </div>
-  );
+  return <MyBar />;
 }
 export default Page;
diff --git a/src/domains/mypage/api/fetchProfile.ts b/src/domains/mypage/api/fetchProfile.ts
new file mode 100644
index 0000000..6dbc620
--- /dev/null
+++ b/src/domains/mypage/api/fetchProfile.ts
@@ -0,0 +1,36 @@
+'use client';
+import { getApi } from '@/app/api/config/appConfig';
+import { useEffect, useState } from 'react';
+
+interface Profile {
+  abvDegree: number;
+  abvLabel: string;
+  abvLevel: number;
+  email?: string;
+  id: number;
+  myCommentCount: number;
+  myKeepCount: number;
+  myLikedPostCount: number;
+  myPostCount: number;
+  nickname: string;
+}
+
+function useFetchProfile() {
+  const [profile, setProfile] = useState<Profile | null>(null);
+
+  const fetchProfile = async () => {
+    const res = await fetch(`${getApi}/me/profile`, {
+      method: 'GET',
+      credentials: 'include',
+    });
+    const json = await res.json();
+    setProfile(json.data);
+  };
+
+  useEffect(() => {
+    fetchProfile();
+  }, []);
+
+  return { profile, fetchProfile };
+}
+export default useFetchProfile;
diff --git a/src/domains/mypage/components/Alarm.tsx b/src/domains/mypage/components/Alarm.tsx
index 9031a73..880c11c 100644
--- a/src/domains/mypage/components/Alarm.tsx
+++ b/src/domains/mypage/components/Alarm.tsx
@@ -4,7 +4,12 @@ import clsx from 'clsx';
 import Image from 'next/image';
 import { useState } from 'react';
 
-function Alarm() {
+interface Props {
+  title: string;
+  content: string;
+}
+
+function Alarm({ title, content }: Props) {
   const [isClick, setIsClick] = useState(false);
 
   const handleClick = () => {
@@ -27,8 +32,8 @@ function Alarm() {
           <p className="text-sm text-white/80">10분 전</p>
         </div>
         <div className="flex flex-col">
-          <h2 className="text-lg font-bold">새로운 좋아요 알림</h2>
-          <p className="text-sm text-white/80">User님이 내 글에 좋아요를 누르셨습니다.</p>
+          <h2 className="text-lg font-bold">{title}</h2>
+          <p className="text-sm text-white/80">{content}</p>
         </div>
       </div>
     </div>
diff --git a/src/domains/mypage/components/EditNickName.tsx b/src/domains/mypage/components/EditNickName.tsx
index e1d744b..0e92de8 100644
--- a/src/domains/mypage/components/EditNickName.tsx
+++ b/src/domains/mypage/components/EditNickName.tsx
@@ -1,27 +1,76 @@
+import { getApi } from '@/app/api/config/appConfig';
 import Button from '@/shared/components/button/Button';
 import TextButton from '@/shared/components/button/TextButton';
 import Input from '@/shared/components/Input-box/Input';
 import ModalLayout from '@/shared/components/modal-pop/ModalLayout';
+import { useToast } from '@/shared/hook/useToast';
+import { Dispatch, SetStateAction } from 'react';
 
 interface Props {
   open: boolean;
   onClose: () => void;
+  setNickName: (v: string) => void;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+  editNickName: string;
+  setEditNickName: Dispatch<SetStateAction<string>>;
 }
 
-function EditNickName({ open, onClose }: Props) {
+function EditNickName({
+  open,
+  onClose,
+  setNickName,
+  setIsOpen,
+  editNickName,
+  setEditNickName,
+}: Props) {
+  const { toastError } = useToast();
+  const handlesave = async () => {
+    if (editNickName.length <= 1) {
+      toastError('닉네임은 2글자 이상 입력해야합니다');
+      return;
+    }
+
+    await setNickName(editNickName);
+
+    await fetch(`${getApi}/me/profile`, {
+      method: 'PATCH',
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        nickname: editNickName,
+      }),
+    });
+    await setIsOpen(false);
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setEditNickName(e.target.value);
+  };
+
   return (
     <ModalLayout
       title="닉네임 수정"
       description="닉네임을 수정해주세요."
       open={open}
       onClose={onClose}
-      buttons={<Button>저장</Button>}
+      buttons={
+        <Button type="submit" onClick={handlesave}>
+          저장
+        </Button>
+      }
     >
       <div className="flex flex-col gap-3 items-end">
         <label htmlFor="editNickName" className="sr-only">
           닉네임변경
         </label>
-        <Input placeholder="8글자 이내로 입력해주세요" id="editNicName" className="w-full" />
+        <Input
+          onChange={(e) => handleChange(e)}
+          placeholder="8글자 이내로 입력해주세요"
+          id="editNickName"
+          className="w-full"
+        />
         <TextButton onClick={onClose}>기존 이름으로 돌아가기</TextButton>
       </div>
     </ModalLayout>
diff --git a/src/domains/mypage/components/ToggleBtn.tsx b/src/domains/mypage/components/ToggleBtn.tsx
index 447bb1c..d6fda4a 100644
--- a/src/domains/mypage/components/ToggleBtn.tsx
+++ b/src/domains/mypage/components/ToggleBtn.tsx
@@ -1,13 +1,45 @@
 'use client';
+import { getApi } from '@/app/api/config/appConfig';
+import { useToast } from '@/shared/hook/useToast';
 import clsx from 'clsx';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 function ToggleBtn() {
-  const [isClick, setIsClick] = useState(false);
+  const [isClick, setIsClick] = useState<boolean | null>(null);
+  const { toastSuccess } = useToast();
 
-  const handleClick = () => {
-    setIsClick(!isClick);
+  useEffect(() => {
+    const fetchToggle = async () => {
+      try {
+        const res = await fetch(`${getApi}/me/notification-setting`, {
+          method: 'GET',
+          credentials: 'include',
+        });
+        const json = await res.json();
+        setIsClick(json.data.enabled);
+      } catch {
+        console.error();
+      }
+    };
+    fetchToggle();
+  }, []);
+
+  const handleClick = async () => {
+    if (isClick === null) return;
+    const next = !isClick;
+    setIsClick(next);
+
+    await fetch(`${getApi}/me/notification-setting`, {
+      method: 'PATCH',
+      credentials: 'include',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        enabled: next,
+      }),
+    });
+    next ? toastSuccess('알림이 설정되었습니다.') : toastSuccess('알림이 해제되었습니다');
   };
+
   return (
     <button
       className={clsx(
diff --git a/src/domains/mypage/components/WithdrawModal.tsx b/src/domains/mypage/components/WithdrawModal.tsx
index 80f645b..da931b2 100644
--- a/src/domains/mypage/components/WithdrawModal.tsx
+++ b/src/domains/mypage/components/WithdrawModal.tsx
@@ -1,7 +1,10 @@
+'use client';
+
 import CrySsury from '@/shared/assets/ssury/ssury_cry.webp';
 import Image from 'next/image';
 import ModalLayout from '@/shared/components/modal-pop/ModalLayout';
 import Button from '@/shared/components/button/Button';
+
 interface Props {
   open: boolean;
   onClose: () => void;
diff --git a/src/domains/mypage/components/pages/my-active/MyComment.tsx b/src/domains/mypage/components/pages/my-active/MyComment.tsx
new file mode 100644
index 0000000..c52be8b
--- /dev/null
+++ b/src/domains/mypage/components/pages/my-active/MyComment.tsx
@@ -0,0 +1,36 @@
+'use client';
+import { getApi } from '@/app/api/config/appConfig';
+import { CommentType } from '@/domains/community/types/post';
+import CommentList from '@/domains/shared/components/comment/CommentList';
+import { useEffect, useState } from 'react';
+
+function MyComment() {
+  const [myComment, setMyComment] = useState<CommentType[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const fetchComment = async () => {
+    const res = await fetch(`${getApi}/me/comments`, {
+      method: 'GET',
+      credentials: 'include',
+    });
+    const json = await res.json();
+    console.log(json);
+    setMyComment(json.data.items);
+  };
+
+  useEffect(() => {
+    fetchComment();
+  }, []);
+
+  return (
+    <section>
+      {/* {CommentList.length !== 0 ? (
+        <CommentList comments={myComment} isLoading={isLoading} />
+      ) : (
+        <div className="flex justify-center">
+          <p>작성한 댓글이 없습니다.</p>
+        </div>
+      )} */}
+    </section>
+  );
+}
+export default MyComment;
diff --git a/src/domains/mypage/components/pages/my-active/MyLike.tsx b/src/domains/mypage/components/pages/my-active/MyLike.tsx
new file mode 100644
index 0000000..7785690
--- /dev/null
+++ b/src/domains/mypage/components/pages/my-active/MyLike.tsx
@@ -0,0 +1,32 @@
+'use client';
+import { getApi } from '@/app/api/config/appConfig';
+import PostCard from '@/domains/community/main/PostCard';
+import { useEffect, useState } from 'react';
+
+interface MyLike {
+  postId: number;
+  title: string;
+  likedAt: Date;
+  posetCreatedAt: Date;
+}
+
+function MyLike() {
+  const [myLike, setMyLike] = useState<MyLike[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const fetchLike = async () => {
+    const res = await fetch(`${getApi}/me/likes/posts`, {
+      method: 'GET',
+      credentials: 'include',
+    });
+    const json = await res.json();
+    // setMyLike(json.data.items);
+  };
+
+  useEffect(() => {
+    fetchLike();
+  }, []);
+
+  // return <PostCard posts={myLike} isLoading={isLoading} />;
+}
+export default MyLike;
diff --git a/src/domains/mypage/components/pages/my-active/MyPost.tsx b/src/domains/mypage/components/pages/my-active/MyPost.tsx
new file mode 100644
index 0000000..24515b3
--- /dev/null
+++ b/src/domains/mypage/components/pages/my-active/MyPost.tsx
@@ -0,0 +1,25 @@
+'use client';
+import { getApi } from '@/app/api/config/appConfig';
+import PostCard from '@/domains/community/main/PostCard';
+import { useEffect, useState } from 'react';
+
+function MyPost() {
+  const [myPost, setMyPost] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const fetchPost = async () => {
+    const res = await fetch(`${getApi}/me/posts`, {
+      method: 'GET',
+      credentials: 'include',
+    });
+    const json = await res.json();
+    setMyPost(json.data.items);
+  };
+
+  useEffect(() => {
+    console.log(myPost);
+    fetchPost();
+  }, []);
+
+  return <PostCard posts={myPost} isLoading={isLoading} />;
+}
+export default MyPost;
diff --git a/src/domains/mypage/components/pages/my-alarm/MyAlarm.tsx b/src/domains/mypage/components/pages/my-alarm/MyAlarm.tsx
new file mode 100644
index 0000000..d0b2431
--- /dev/null
+++ b/src/domains/mypage/components/pages/my-alarm/MyAlarm.tsx
@@ -0,0 +1,44 @@
+'use client';
+import { useEffect, useState } from 'react';
+import Alarm from '../../Alarm';
+import { getApi } from '@/app/api/config/appConfig';
+
+interface MyAlarm {
+  notificationId: number;
+  title: string;
+  content: string;
+  isRead: boolean;
+  createdAt: Date;
+}
+
+function MyAlarm() {
+  const [myAlarm, setMyAlarm] = useState<MyAlarm[]>([]);
+
+  const fetchAlarm = async () => {
+    const res = await fetch(`${getApi}/me/notifications`, {
+      method: 'GET',
+      credentials: 'include',
+    });
+    const json = await res.json();
+    setMyAlarm(json.data.items);
+  };
+
+  useEffect(() => {
+    fetchAlarm();
+  }, []);
+
+  return (
+    <section>
+      {myAlarm.length !== 0 ? (
+        myAlarm.map(({ notificationId, title, content }) => (
+          <Alarm key={notificationId} title={title} content={content} />
+        ))
+      ) : (
+        <div className="flex justify-center">
+          <p>알림이 없습니다.</p>
+        </div>
+      )}
+    </section>
+  );
+}
+export default MyAlarm;
diff --git a/src/domains/mypage/components/pages/my-bar/MyBar.tsx b/src/domains/mypage/components/pages/my-bar/MyBar.tsx
new file mode 100644
index 0000000..c20b0e2
--- /dev/null
+++ b/src/domains/mypage/components/pages/my-bar/MyBar.tsx
@@ -0,0 +1,54 @@
+'use client';
+import { getApi } from '@/app/api/config/appConfig';
+import CocktailCard from '@/domains/shared/components/cocktail-card/CocktailCard';
+import { useEffect, useState } from 'react';
+
+interface MyCocktail {
+  cocktailId: number;
+  cocktailName: string;
+  id: number;
+  imageUrl: string;
+}
+
+function MyBar() {
+  const [myCocktail, setMyCocktail] = useState<MyCocktail[]>([]);
+  const fetchData = async () => {
+    const res = await fetch(`${getApi}/me/bar`, {
+      method: 'GET',
+      credentials: 'include',
+    });
+    const json = await res.json();
+    setMyCocktail(json.data.items ?? []);
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  return (
+    <div>
+      {myCocktail.length !== 0 ? (
+        <div
+          className="grid grid-cols-1 justify-items-center mt-10 gap-8  sm:[grid-template-columns:repeat(2,minmax(0,320px))]  sm:justify-evenly md:[grid-template-columns:repeat(3,minmax(0,250px))]  
+  "
+        >
+          {myCocktail.map(({ cocktailId, cocktailName, imageUrl }) => (
+            <CocktailCard
+              key={cocktailId}
+              src={imageUrl}
+              textSize1="text-xl"
+              name={cocktailName}
+              nameKo="올드 패션드"
+              keep={false}
+            ></CocktailCard>
+          ))}
+        </div>
+      ) : (
+        <div className="flex justify-center">
+          <p>아직 저장하신 칵테일이 없습니다.</p>
+        </div>
+      )}
+    </div>
+  );
+}
+export default MyBar;
diff --git a/src/domains/mypage/hook/useProfileSsury.tsx b/src/domains/mypage/hook/useProfileSsury.tsx
new file mode 100644
index 0000000..d683fb6
--- /dev/null
+++ b/src/domains/mypage/hook/useProfileSsury.tsx
@@ -0,0 +1,22 @@
+import Ssury1 from '@/shared/assets/ssury/ssury_level1.webp';
+import Ssury2 from '@/shared/assets/ssury/ssury_level2.webp';
+import Ssury3 from '@/shared/assets/ssury/ssury_level3.webp';
+import Ssury4 from '@/shared/assets/ssury/ssury_level4.webp';
+import Ssury5 from '@/shared/assets/ssury/ssury_level5.webp';
+import Ssury6 from '@/shared/assets/ssury/ssury_level6.webp';
+import Image, { StaticImageData } from 'next/image';
+
+const SSURY_MAP: Record<number, StaticImageData> = {
+  1: Ssury1,
+  2: Ssury2,
+  3: Ssury3,
+  4: Ssury4,
+  5: Ssury5,
+  6: Ssury6,
+};
+
+function useProfileSsury(level: number) {
+  const src = SSURY_MAP[level] ?? Ssury1;
+  return src;
+}
+export default useProfileSsury;
diff --git a/src/domains/mypage/main/MyAbv.tsx b/src/domains/mypage/main/MyAbv.tsx
index fd2dc31..0b1d88b 100644
--- a/src/domains/mypage/main/MyAbv.tsx
+++ b/src/domains/mypage/main/MyAbv.tsx
@@ -3,10 +3,11 @@ import Help from '@/shared/assets/icons/help_24.svg';
 import ToolTip from '@/shared/components/tool-tip/ToolTip';
 import useMedia from '../hook/useMedia';
 
-function MyAbv() {
+function MyAbv({ abv }: { abv: number }) {
   const isMd = useMedia('(min-width:768px)');
   const position = isMd ? 'leftTop' : 'top';
   const viewPoint = isMd ? 'web' : 'mobileLongText';
+  const fixedAbv = abv.toFixed(1);
 
   return (
     <dl className="flex justify-between items-center text-gray-dark gap-2">
@@ -22,7 +23,7 @@ function MyAbv() {
         </ToolTip>
       </dt>
       <dd className="text-base">
-        <span className="text-2xl md:text-4xl font-bold">83</span>%
+        <span className="text-2xl md:text-4xl font-bold">{fixedAbv}</span>%
       </dd>
     </dl>
   );
diff --git a/src/domains/mypage/main/MyNav.tsx b/src/domains/mypage/main/MyNav.tsx
index bff0aca..fac49fd 100644
--- a/src/domains/mypage/main/MyNav.tsx
+++ b/src/domains/mypage/main/MyNav.tsx
@@ -9,7 +9,7 @@ import { usePathname } from 'next/navigation';
 const MAIN_TABMENU = [
   {
     title: '나만의 BAR',
-    href: '/mypage/mybar',
+    href: '/mypage/my-bar',
   },
   {
     title: '내 활동',
diff --git a/src/domains/mypage/main/MyProfile.tsx b/src/domains/mypage/main/MyProfile.tsx
index 11f1760..b3206ec 100644
--- a/src/domains/mypage/main/MyProfile.tsx
+++ b/src/domains/mypage/main/MyProfile.tsx
@@ -1,41 +1,65 @@
-import Image from 'next/image';
-import Ssury from '@/shared/assets/ssury/ssury_level4.webp';
+'use client';
+
 import AbvGraph from '@/domains/shared/components/abv-graph/AbvGraph';
 import MyAbv from './MyAbv';
+import SsuryImage from './SsuryImage';
+import useFetchProfile from '../api/fetchProfile';
+import { useEffect } from 'react';
 
 function MyProfile() {
+  const { profile, fetchProfile } = useFetchProfile();
+  useEffect(() => {
+    fetchProfile();
+  }, [profile?.nickname]);
+
+  if (!profile) return;
+  const {
+    nickname,
+    abvLevel,
+    myLikedPostCount,
+    myPostCount,
+    myCommentCount,
+    myKeepCount,
+    abvDegree,
+  } = profile;
+
   return (
     <section className="h-auto  p-6 bg-white rounded-2xl">
       <header className="flex flex-col gap-8 md:gap-3 md:flex-row md:justify-between ">
-        <div className="flex flex-col pb-4 md:pb-0 md:flex-col gap-6">
-          <div className="rounded-full w-17.5 h-17.5 flex items-center gap-2">
-            <Image src={Ssury} alt="" />
-            <p className="text-gray-dark text-2xl font-bold">UserName</p>
-          </div>
-          <ul className="flex gap-3 text-gray-dark text-xs">
-            <li className="flex gap-1">
-              <p>좋아요 0</p>
-            </li>
-            <span>|</span>
-            <li className="flex gap-1">
-              <p>글 0</p>
-            </li>
-            <span>|</span>
-            <li className="flex gap-1">
-              <p>댓글 0</p>
-            </li>
-            <span>|</span>
-            <li className="flex gap-1">
-              <p>칵테일 킵 0</p>
-            </li>
-          </ul>
-        </div>
-        <aside className="flex flex-col gap-2 md:pt-3">
-          <MyAbv />
-          <AbvGraph />
-        </aside>
+        {profile && (
+          <>
+            <div className="flex flex-col pb-4 md:pb-0 md:flex-col gap-6">
+              <div className="rounded-full w-17.5 h-17.5 flex items-center gap-2">
+                <SsuryImage abvLevel={abvLevel} />
+                <p className="text-gray-dark text-2xl whitespace-nowrap font-bold">{nickname}</p>
+              </div>
+              <ul className="flex gap-3 text-gray-dark text-xs">
+                <li className="flex gap-1">
+                  <p>좋아요 {myLikedPostCount}</p>
+                </li>
+                <span>|</span>
+                <li className="flex gap-1">
+                  <p>글 {myPostCount}</p>
+                </li>
+                <span>|</span>
+                <li className="flex gap-1">
+                  <p>댓글 {myCommentCount}</p>
+                </li>
+                <span>|</span>
+                <li className="flex gap-1">
+                  <p>칵테일 킵 {myKeepCount}</p>
+                </li>
+              </ul>
+            </div>
+            <aside className="flex flex-col gap-2 md:pt-3">
+              <MyAbv abv={abvDegree} />
+              <AbvGraph max={100} abv={abvDegree} type="myAbv" />
+            </aside>
+          </>
+        )}
       </header>
     </section>
   );
 }
+
 export default MyProfile;
diff --git a/src/domains/mypage/main/MySetting.tsx b/src/domains/mypage/main/MySetting.tsx
index f50e9ac..061b9fe 100644
--- a/src/domains/mypage/main/MySetting.tsx
+++ b/src/domains/mypage/main/MySetting.tsx
@@ -4,19 +4,41 @@ import ToggleBtn from '@/domains/mypage/components/ToggleBtn';
 import WithdrawModal from '@/domains/mypage/components/WithdrawModal';
 import Button from '@/shared/components/button/Button';
 import TextButton from '@/shared/components/button/TextButton';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import useFetchProfile from '../api/fetchProfile';
 
 function MySetting() {
+  const { profile } = useFetchProfile();
   const [isOpen, setIsOpen] = useState(false);
   const [isQuit, setIsQuit] = useState(false);
+  const [nickname, setNickName] = useState(profile?.nickname);
+  const [editNickName, setEditNickName] = useState('');
+
+  const handleEditNickName = async () => {
+    setIsOpen(!isOpen);
+  };
+
+  useEffect(() => {
+    if (profile) setNickName(profile?.nickname);
+  }, [profile]);
+
   return (
     <section className="flex flex-col h-80 md:h-100 lg:h-125 justify-between">
-      {isOpen && <EditNickName open={isOpen} onClose={() => setIsOpen(!isOpen)} />}
+      {isOpen && (
+        <EditNickName
+          setIsOpen={setIsOpen}
+          editNickName={editNickName}
+          setEditNickName={setEditNickName}
+          open={isOpen}
+          onClose={() => setIsOpen(!isOpen)}
+          setNickName={setNickName}
+        />
+      )}
       {isQuit && <WithdrawModal open={isQuit} onClose={() => setIsQuit(!isQuit)} />}
       <div>
         <div className="flex justify-between py-5 border-b-1 border-gray-light">
-          <div className="text-lg">닉네임 : UserName</div>
-          <TextButton onClick={() => setIsOpen(!isOpen)}>수정하기</TextButton>
+          <div className="text-lg">닉네임 : {nickname}</div>
+          <TextButton onClick={handleEditNickName}>수정하기</TextButton>
         </div>
         <div className="flex justify-between py-5">
           <h2>알람설정</h2>
diff --git a/src/domains/mypage/main/SsuryImage.tsx b/src/domains/mypage/main/SsuryImage.tsx
new file mode 100644
index 0000000..e6fdb49
--- /dev/null
+++ b/src/domains/mypage/main/SsuryImage.tsx
@@ -0,0 +1,9 @@
+import useProfileSsury from '../hook/useProfileSsury';
+import Image from 'next/image';
+
+function SsuryImage({ abvLevel }: { abvLevel: number }) {
+  const profileImage = useProfileSsury(abvLevel);
+
+  return <Image src={profileImage} alt="" />;
+}
+export default SsuryImage;
diff --git a/src/domains/shared/components/abv-graph/AbvGraph.tsx b/src/domains/shared/components/abv-graph/AbvGraph.tsx
index bbe99c1..31291b1 100644
--- a/src/domains/shared/components/abv-graph/AbvGraph.tsx
+++ b/src/domains/shared/components/abv-graph/AbvGraph.tsx
@@ -1,11 +1,26 @@
+import tw from '@/shared/utills/tw';
+import { cva } from 'class-variance-authority';
 import clsx from 'clsx';
 
 interface Props {
   max?: number;
   abv?: number;
+  type?: 'myAbv' | 'cocktail';
 }
 
-function AbvGraph({ max, abv }: Props) {
+export const abvClass = cva(
+  `h-3 rounded-full overflow-hidden border-[0.5px] border-gray relative`,
+  {
+    variants: {
+      type: {
+        myAbv: 'w-full md:w-55 ',
+        cocktail: 'w-45',
+      },
+    },
+  }
+);
+
+function AbvGraph({ max, abv, type = 'cocktail' }: Props) {
   if (!abv) return;
   const safeMax = Math.max(0, max || 0.0001);
   const rawPct = (abv / safeMax) * 100;
@@ -19,7 +34,7 @@ function AbvGraph({ max, abv }: Props) {
 
   return (
     <div
-      className="w-45 h-3 rounded-full overflow-hidden border-[0.5px] border-gray relative"
+      className={tw(abvClass({ type }))}
       role="progressbar"
       aria-label="나의 알코올 도수"
       aria-valuemin={0}
diff --git a/src/shared/components/Input-box/Input.tsx b/src/shared/components/Input-box/Input.tsx
index 6b703c7..3f2fb1c 100644
--- a/src/shared/components/Input-box/Input.tsx
+++ b/src/shared/components/Input-box/Input.tsx
@@ -18,7 +18,7 @@ interface Props {
   size?: 'default' | 'lg';
   variant?: 'default' | 'search' | 'comment';
   className?: string;
-  onChange?: () => void;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   id: string;
 }