diff --git a/src/components/IdolCard.jsx b/src/components/IdolCard.jsx
index 2870a4a..ddc9e4b 100644
--- a/src/components/IdolCard.jsx
+++ b/src/components/IdolCard.jsx
@@ -9,6 +9,7 @@ const IdolCard = ({
   isDisabled = false,
   sizeClass = 'w-[98px] h-[98px] tablet:w-[128px] tablet:h-[128px]',
   onClick,
+  isMyPage = true,
 }) => {
   const defaultImage = 'https://link24.kr/9iFIhh0';
 
@@ -22,7 +23,7 @@ const IdolCard = ({
         } //  비활성화된 경우 클릭 방지
       >
         {children}
-        <div className="absolute inset-0 rounded-full border-[1.3px] border-coralRed z-10"></div>
+        <div className="absolute inset-0 rounded-full border-[1.3px] border-coralRed"></div>
 
         <div className="absolute inset-0 m-1.5 rounded-full overflow-hidden">
           <img
@@ -42,15 +43,21 @@ const IdolCard = ({
 
         {isSelected && isSelectable && (
           <>
-            <div className="absolute inset-0 rounded-full bg-gradient-to-r from-coralRed to-pinkPunch opacity-50 z-20" />
+            <div className="absolute inset-0 rounded-full bg-gradient-to-r from-coralRed to-pinkPunch opacity-50" />
             <img
               src={checkIcon}
               alt="check"
-              className="absolute w-[40%] h-[40%] top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-30"
+              className="absolute w-[40%] h-[40%] top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
             />
           </>
         )}
       </div>
+      {isMyPage && (
+        <div className="mt-1 text-center">
+          <p className="text-white text-mobile font-bold">{idol.name}</p>
+          <p className="text-white/70 text-xs">{idol.group || '그룹 없음'}</p>
+        </div>
+      )}
     </div>
   );
 };
diff --git a/src/components/Modal.jsx b/src/components/Modal.jsx
index 412f4b9..9d689df 100644
--- a/src/components/Modal.jsx
+++ b/src/components/Modal.jsx
@@ -4,7 +4,7 @@ import exitArrow from '@/assets/icons/exitArrow.svg';
 import { useEffect, useState } from 'react';
 
 function Modal({ title, onClose, children }) {
-  const [isMobile, setIsMobile] = useState(false);
+  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
 
   useEffect(() => {
     document.body.style.overflow = 'hidden'; // 모달창 열려 있으면 뒤의 배경 스크롤 막기
@@ -14,19 +14,14 @@ function Modal({ title, onClose, children }) {
   }, []);
 
   useEffect(() => {
-    const handleResize = () => {
-      setIsMobile(window.innerWidth < 768);
-    };
-
+    const handleResize = () => setIsMobile(window.innerWidth < 768);
     window.addEventListener('resize', handleResize);
-    handleResize();
     return () => window.removeEventListener('resize', handleResize);
   }, []);
 
   if (title.includes('아이돌') && isMobile) {
     return (
-      // z-[9999] : 모달창이 열렸을 때 리스트 페이지에 있는 아이돌 이미지 보더가 같이 보이는 현상 해결을 위해 작성
-      <div className="fixed flex flex-col top-0 left-0 size-full bg-midnightBlack z-[9999]">
+      <div className="fixed flex flex-col top-0 left-0 size-full bg-midnightBlack">
         <img
           src={leftTopGradient}
           alt="leftTopGradient"
@@ -53,7 +48,7 @@ function Modal({ title, onClose, children }) {
   }
 
   return (
-    <div className="fixed top-0 left-0 w-[100%] h-[100%] flex justify-center items-center bg-midnightBlack/80 font-pretendard z-[9999]">
+    <div className="fixed top-0 left-0 w-[100%] h-[100%] flex justify-center items-center bg-midnightBlack/80 font-pretendard">
       <div className="relative bg-deepCharcoal p-[20px] rounded-[8px] py-[24px] px-[16px]">
         <img
           src={closeButton}
diff --git a/src/pages/listPage/monthlyChart/MonthlyChartItem.jsx b/src/pages/listPage/monthlyChart/MonthlyChartItem.jsx
index 7b3a437..a40cce7 100644
--- a/src/pages/listPage/monthlyChart/MonthlyChartItem.jsx
+++ b/src/pages/listPage/monthlyChart/MonthlyChartItem.jsx
@@ -15,11 +15,14 @@ const MonthlyChartItem = ({
       {layout === 'default' ? (
         <div className="flex w-full h-[70px] justify-between items-center">
           <div className="flex items-center gap-[12px] font-medium">
-            <IdolCard
-              idol={idol}
-              isSelected={false}
-              sizeClass="w-[70px] h-[70px]"
-            />
+            <div className="pointer-events-none">
+              <IdolCard
+                idol={idol}
+                isSelected={false}
+                isMyPage={false}
+                sizeClass="w-[70px] h-[70px]"
+              />
+            </div>
             <h4 className="text-coralRed">{rank}</h4>
             <div className="flex justify-between w-max">
               <p className="text-white/[0.87]">
@@ -40,6 +43,7 @@ const MonthlyChartItem = ({
                 isSelected={selectedIdol === idol.id}
                 sizeClass="w-[70px] h-[70px]"
                 isSelectable={false}
+                isMyPage={false}
               />
               {selectedIdol === idol.id && (
                 <div className="absolute inset-0 m-1.5 rounded-full overflow-hidden z-10">
diff --git a/src/pages/listPage/monthlyChart/MonthlyChartSection.jsx b/src/pages/listPage/monthlyChart/MonthlyChartSection.jsx
index 7d03840..922a12c 100644
--- a/src/pages/listPage/monthlyChart/MonthlyChartSection.jsx
+++ b/src/pages/listPage/monthlyChart/MonthlyChartSection.jsx
@@ -33,7 +33,6 @@ const MonthlyChartSection = ({
 
   const loadIdolData = async () => {
     setLoading(true);
-    console.log('loadIdolData:', gender, voteTrigger, cursor);
     const cursorValue = voteTrigger ? 0 : cursor;
     try {
       const response = await getLists(gender, cursorValue, pageSize);