diff --git a/public/css/custom.css b/public/css/custom.css
index 2003a9d..be038c6 100644
--- a/public/css/custom.css
+++ b/public/css/custom.css
@@ -3,7 +3,6 @@
 
 /* 휴가 */
 
-
 /* 이벤트 선 없게 */
 .fc-event {
   border: none;
@@ -94,8 +93,72 @@ opacity: 0.6; /* 흐려 보이게 */
 }
 
 
-/* 본인 모달 */
-/* 닫기 버튼 */
+/* 휴가 모달 */
+.vac-modal-dialog {
+    background: none !important;
+    box-shadow: none !important;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    padding-bottom: 20px;
+}
+.vac-modal-content {
+    background: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.1); /* 위쪽 그림자만 적용 */
+    max-width: 500px;
+    width: 100%;
+    position: relative;
+}
+.vac-modal-body {
+  max-height: 140px;
+  overflow-y: auto;
+  }
+.vac-modal-text {
+  font-size: 14px;
+  text-align: center;
+  margin-bottom: 20px;
+}
+.count-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  margin-bottom: 10px;
+}
+.count-value {
+  font-size: 23px;
+  font-weight: bold;
+  min-width: 50px;
+  text-align: center;
+}
+.custom-button {
+  background: none;
+  border: none;
+  width: 55px;
+  height: 55px;
+  font-size: 26px;
+  color: white;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.vac-modal-title {
+  margin-bottom: 10px;
+}
+.vacation-item {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 8px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  background: #f9f9f9;
+}
 .close-btn {
   position: absolute;
   top: 10px;
@@ -108,41 +171,6 @@ opacity: 0.6; /* 흐려 보이게 */
 .close-btn:hover {
   color: #525252;
 }
-/* 모달 배경 투명하게 */
-.vac-modal-dialog {
-  background: none !important;
-  box-shadow: none !important;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  padding-bottom: 20px;
-  }
-  /* 모달 본문 스타일 */
-  .vac-modal-content {
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.1); /* 위쪽 그림자만 적용 */
-  max-width: 500px;
-  width: 100%;
-  position: relative;
-  }
-/* 리스트 아이템 */
-.vacation-item {
-  display: flex;
-  align-items: center;
-  font-size: 16px;
-  font-weight: bold;
-  margin-bottom: 8px;
-  padding: 5px 10px;
-  border-radius: 5px;
-  background: #f9f9f9;
-}
-
-
-/* 선물하기 모달 */
-/* 연차 개수 버튼 */
 .count-btn {
   font-size: 18px;
   padding: 2px 10px;
@@ -159,29 +187,179 @@ opacity: 0.6; /* 흐려 보이게 */
   background: #cccccc;
   cursor: not-allowed;
 }
-/* 버튼 컨테이너 (우측 정렬) */
 .custom-button-container {
   display: flex;
   justify-content: flex-end;
   align-items: center;
 }
-/* 버튼 기본 스타일 */
 .custom-button {
-  background: none; /* 배경색 없음 */
-  border: none; /* 테두리 없음 */
-  padding: 10px; /* 크기 조정 */
-  cursor: pointer; /* 클릭 가능하도록 변경 */
+  background: none; 
+  border: none;
+  padding: 10px;
+  cursor: pointer;
 }
-/* 아이콘 색상 변경 (기본) */
 .custom-button i {
-  color: #282538; /* 기본 아이콘 색상 */
-  font-size: 25px; /* 아이콘 크기 */
+  color: #282538;
+  font-size: 25px;
 }
-/* 버튼 호버 효과 */
 .custom-button:hover i {
-  color: #ff0800; /* 호버 시 아이콘 색상 변경 */
+  color: #ff0800;
 }
 
+/* 휴가 사원프로필 */
+.profile-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 10px;
+  padding: 0;
+}
+.profile-img {
+  transition: all 0.2s ease-in-out;
+}
+
+/* 오전/오후반차,저장버튼 */
+/* 버튼 기본 스타일 */
+.vac-btn {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease-in-out;
+  display: inline-block;
+  font-weight: 400;
+  line-height: 1.53;
+  color: #697a8d;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+/* 마우스를 올렸을 때 */
+  .vac-btn:hover {
+  filter: brightness(90%);
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
+  transform: scale(1.05);
+}
+/* 버튼이 눌렸을 때 */
+  .vac-btn:active {
+  transform: scale(0.9);
+  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
+}
+/* 선택된 (눌린) 버튼 */
+.vac-btn.active {
+  border: 3px solid #ff0000; /* 붉은색 테두리 적용 */
+  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
+  transform: scale(1.1);
+}
+.vac-btn-warning{
+  color: #fff;
+  background-color: #ffab00;
+  border-color: #ffab00;
+  box-shadow: 0 0.125rem 0.25rem 0 rgba(255, 171, 0, 0.4);
+}
+/* AM 버튼 (선택된 상태) */
+.vac-btn-warning.active {
+  background-color: #ffca2c !important;
+  color: black;
+}
+.vac-btn-info {
+    color: #fff;
+    background-color: #03c3ec;
+    border-color: #03c3ec;
+    box-shadow: 0 0.125rem 0.25rem 0 rgba(3, 195, 236, 0.4);
+}
+/* PM 버튼 (선택된 상태) */
+.vac-btn-info.active {
+  background-color: #0b5ed7 !important;
+  color: white;
+}
+/* 버튼 기본 (비활성화일 때 기본 녹색) */
+.btn-success {
+  font-size: 24px;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease-in-out;
+  background-color: #871919 !important;
+  color: white;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+/* 버튼 활성화 */
+.btn-success.active {
+  background-color: #ff0000 !important;
+  color: white !important;
+  border: 3px solid #eb9f9f !important;
+  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
+  transform: scale(1.1);
+}
+/* 버튼 비활성화 */
+.btn-success.disabled {
+  background-color: #bbb8b8 !important;
+  color: white !important;
+  cursor: not-allowed !important;
+  box-shadow: none;
+  transform: none;
+  opacity: 0.5;
+}
+
+/* 작은 화면에서 버튼 크기 조정 */
+@media (max-width: 1600px) {
+  .count-btn {
+      width: 28px;
+      height: 28px;
+      font-size: 15px;
+  }
+  .count-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0px;
+      margin-bottom: 8px;
+  }
+  .count-value {
+      font-size: 20px;
+  }
+  .custom-button {
+      width: 45px;
+      height: 45px;
+      font-size: 22px;
+  }
+  .vac-grant-modal-title {
+      font-size: 16px;
+  }
+  .vac-modal-text {
+      font-size: 11px;
+  }
+  .vac-modal-title {
+      font-size: 14px;
+      margin-bottom: 10px;
+  }
+  .vacation-item {
+      font-size: 12px;
+      text-align: center;
+      margin-bottom: 5px;
+  }
+  .vac-btn {
+    width: 40px;
+    height: 40px;
+    font-size: 18px;
+  }
+  .btn-success {
+    font-size: 20px;
+    width: 40px;
+    height: 40px;
+  }
+}
+
+  
 
 .grayscaleImg {
   filter: grayscale(100%);
diff --git a/src/components/button/HalfDayButtons.vue b/src/components/button/HalfDayButtons.vue
index c4fa6ee..aeb2ed2 100644
--- a/src/components/button/HalfDayButtons.vue
+++ b/src/components/button/HalfDayButtons.vue
@@ -1,30 +1,28 @@
 <template>
     <div class="menu gap-4 justify-content-center mt-5">
-      <!-- 오전 반차 버튼 -->
-      <button
-        class="btn btn-warning"
-        :class="{ active: halfDayType === 'AM' }"
-        @click="toggleHalfDay('AM')"
-      >
+        <!-- 오전 반차 버튼 -->
+        <button
+            class="vac-btn vac-btn-warning"
+            :class="{ active: halfDayType === 'AM' }"
+            @click="toggleHalfDay('AM')"
+        >
         <i class="bi bi-sun"></i>
-      </button>
-
-      <!-- 오후 반차 버튼 -->
-      <button
-        class="btn btn-info"
-        :class="{ active: halfDayType === 'PM' }"
-        @click="toggleHalfDay('PM')"
-      >
-        <i class="bi bi-moon"></i>
-      </button>
-
-      <!-- 저장 버튼 -->
-      <div class="save-button-container">
-        <button class="btn btn-success" @click="addVacationRequests"
-                :class="{ active: !isDisabled, disabled: isDisabled }">
-          ✔
         </button>
-      </div>
+        <!-- 오후 반차 버튼 -->
+        <button
+            class="vac-btn vac-btn-info"
+            :class="{ active: halfDayType === 'PM' }"
+            @click="toggleHalfDay('PM')"
+        >
+        <i class="bi bi-moon"></i>
+        </button>
+        <!-- 저장 버튼 -->
+        <div class="save-button-container">
+            <button class="btn-success" @click="addVacationRequests"
+                    :class="{ active: !isDisabled, disabled: isDisabled }">
+                ✔
+            </button>
+        </div>
     </div>
 </template>
 
@@ -32,113 +30,37 @@
 import { defineEmits, ref, defineProps, watch } from "vue";
 
 const props = defineProps({
-  isDisabled: Boolean,
-  selectedDate: String // 날짜 선택 값을 props로 받음
+isDisabled: Boolean,
+selectedDate: String // 날짜 선택 값을 props로 받음
 });
 
 const emit = defineEmits(["toggleHalfDay", "addVacationRequests", "resetHalfDay"]);
 const halfDayType = ref(null);
 
 const toggleHalfDay = (type) => {
-  halfDayType.value = halfDayType.value === type ? null : type;
-  emit("toggleHalfDay", halfDayType.value);
+halfDayType.value = halfDayType.value === type ? null : type;
+emit("toggleHalfDay", halfDayType.value);
 };
 
 // `selectedDate`가 변경되면 반차 선택 초기화
 watch(() => props.selectedDate, (newDate) => {
-  if (newDate) {
-    resetHalfDay();
-  }
+if (newDate) {
+resetHalfDay();
+}
 });
 
 // 날짜 선택 후 반차 버튼 상태 초기화
 const resetHalfDay = () => {
-  halfDayType.value = null;
-  emit("resetHalfDay");
+halfDayType.value = null;
+emit("resetHalfDay");
 };
 
 const addVacationRequests = () => {
-  emit("addVacationRequests");
+emit("addVacationRequests");
 };
 
 defineExpose({ resetHalfDay });
 </script>
 
 <style scoped>
-/* 버튼 기본 스타일 */
-.btn {
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-  font-size: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease-in-out;
-}
-
-/* 마우스를 올렸을 때 */
-.btn:hover {
-  filter: brightness(90%);
-  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
-  transform: scale(1.05);
-}
-
-/* 버튼이 눌렸을 때 */
-.btn:active {
-  transform: scale(0.9);
-  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
-}
-
-/* 선택된 (눌린) 버튼 */
-.btn.active {
-  border: 3px solid #ff0000; /* 붉은색 테두리 적용 */
-  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
-  transform: scale(1.1);
-}
-
-/* AM 버튼 (선택된 상태) */
-.btn-warning.active {
-  background-color: #ffca2c !important;
-  color: black;
-}
-
-/* PM 버튼 (선택된 상태) */
-.btn-info.active {
-  background-color: #0b5ed7 !important;
-  color: white;
-}
-
-/* ✔ 버튼 기본 (비활성화일 때 기본 녹색) */
-.btn-success {
-  font-size: 24px;
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease-in-out;
-  background-color: #871919 !important;
-  color: white;
-}
-
-/* ✔ 버튼 활성화 */
-.btn-success.active {
-  background-color: #ff0000 !important;
-  color: white !important;
-  border: 3px solid #eb9f9f !important;
-  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
-  transform: scale(1.1);
-}
-
-/* ✔ 버튼 비활성화 */
-.btn-success.disabled {
-  background-color: #bbb8b8 !important;
-  color: white !important;
-  cursor: not-allowed !important;
-  box-shadow: none;
-  transform: none;
-  opacity: 0.5;
-}
 </style>
diff --git a/src/components/modal/VacationGrantModal.vue b/src/components/modal/VacationGrantModal.vue
index 9cb093f..ac977fd 100644
--- a/src/components/modal/VacationGrantModal.vue
+++ b/src/components/modal/VacationGrantModal.vue
@@ -1,20 +1,17 @@
 <template>
     <div v-if="isOpen" class="vac-modal-dialog" @click.self="closeModal">
         <div class="vac-modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title">To. {{ targetUser.MEMBERNAM }} 🎁</h5>
+            <div class="vac-modal-header">
+                <h5 class="vac-grant-modal-title">To. {{ targetUser.MEMBERNAM }} 🎁</h5>
                 <button class="close-btn" @click="closeModal">✖</button>
             </div>
-
-            <div class="modal-body">
-                <p class="modal-text">선물할 연차 개수를 선택하세요.</p>
-
+            <div class="vac-modal-body">
+                <p class="vac-modal-text">선물할 연차 개수를 선택하세요.</p>
                 <div class="count-container">
                     <button @click="decreaseCount" :disabled="grantCount < 2" class="count-btn">-</button>
                     <span class="count-value">{{ grantCount }}</span>
                     <button @click="increaseCount" :disabled="grantCount >= availableQuota" class="count-btn">+</button>
                 </div>
-
                 <div class="custom-button-container">
                     <button class="custom-button" @click="saveVacationGrant" :disabled="grantCount === 0">
                         <i class="bx bx-gift"></i>
@@ -42,6 +39,7 @@ const maxQuota = 2;
 const sentCount = ref(0);
 const availableQuota = ref(2);
 
+// 사원 별 남은 보내기 개수
 const fetchSentVacationCount = async () => {
     try {
         const payload = { receiverId: props.targetUser.MEMBERSEQ };
@@ -56,18 +54,20 @@ const fetchSentVacationCount = async () => {
     }
 };
 
+// 개수 증가
 const increaseCount = () => {
     if (grantCount.value < availableQuota.value) {
         grantCount.value++;
     }
 };
-
+// 개수 감소
 const decreaseCount = () => {
     if (grantCount.value > 0) {
         grantCount.value--;
     }
 };
 
+// 연차 선물하기
 const saveVacationGrant = async () => {
     try {
         const payload = [{
@@ -86,11 +86,11 @@ const saveVacationGrant = async () => {
             toastStore.onToast(' 연차 선물 중 오류가 발생했습니다.', 'e');
         }
     } catch (error) {
-        console.error("🚨 연차 추가 실패:", error);
         toastStore.onToast(' 연차 선물 실패!!.', 'e');
     }
 };
 
+// 모달 닫기기
 const closeModal = () => {
     emit("close");
 };
@@ -100,7 +100,6 @@ watch(() => props.isOpen, async (newVal) => {
         await fetchSentVacationCount();
     }
 });
-
 watch(() => props.targetUser, async (newUser) => {
     if (newUser?.MEMBERSEQ) {
         await fetchSentVacationCount();
@@ -115,152 +114,4 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-/* ✅ 반응형 모달 크기 조정 */
-.vac-modal-dialog {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.4);
-    z-index: 9999;
-    overflow: hidden; /* 풀 화면에서 스크롤 방지 */
-}
-
-.vac-modal-content {
-    background: white;
-    padding: 20px;
-    border-radius: 10px;
-    width: 500px;
-    height: auto;
-    max-height: 90vh;
-    transition: all 0.3s ease-in-out;
-    overflow: hidden;
-}
-
-/* ✅ 제목 스타일 */
-.modal-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.modal-title {
-    font-size: 20px;
-    font-weight: bold;
-}
-
-.close-btn {
-    background: transparent;
-    border: none;
-    font-size: 20px;
-    cursor: pointer;
-}
-
-/* ✅ 본문 텍스트 스타일 */
-.modal-text {
-    font-size: 15px;
-    text-align: center;
-    margin-bottom: 20px;
-}
-
-/* ✅ 숫자 선택 영역 */
-.count-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 10px;
-    margin-bottom: 15px;
-}
-
-/* ✅ 숫자 값 크기 증가 */
-.count-value {
-    font-size: 26px;
-    font-weight: bold;
-    min-width: 50px;
-    text-align: center;
-}
-
-/* ✅ 숫자 버튼 */
-.count-btn {
-    width: 45px;
-    height: 45px;
-    font-size: 22px;
-    border: none;
-    background: #2C3E50;
-    color: white;
-    border-radius: 50%;
-    cursor: pointer;
-    transition: all 0.2s;
-}
-
-.count-btn:disabled {
-    background: #ccc;
-    cursor: not-allowed;
-}
-
-/* ✅ 선물 아이콘 버튼 */
-.custom-button-container {
-    display: flex;
-    justify-content: center;
-}
-
-.custom-button {
-    background: none;
-    border: none;
-    width: 55px;
-    height: 55px;
-    font-size: 26px;
-    color: white;
-    border-radius: 50%;
-    cursor: pointer;
-    transition: all 0.2s;
-}
-
-/* ✅ 작은 화면에서 버튼 크기 조정 */
-@media (max-width: 1024px) {
-    .count-btn {
-        width: 35px;
-        height: 35px;
-        font-size: 18px;
-    }
-
-    .count-value {
-        font-size: 24px;
-    }
-
-    .custom-button {
-        width: 45px;
-        height: 45px;
-        font-size: 22px;
-    }
-}
-
-@media (max-width: 768px) {
-    .modal-title {
-        font-size: 16px;
-    }
-
-    .modal-text {
-        font-size: 12px;
-    }
-
-    .count-btn {
-        width: 28px;
-        height: 28px;
-        font-size: 16px;
-    }
-
-    .count-value {
-        font-size: 22px;
-    }
-
-    .custom-button {
-        width: 40px;
-        height: 40px;
-        font-size: 20px;
-    }
-}
 </style>
diff --git a/src/components/modal/VacationModal.vue b/src/components/modal/VacationModal.vue
index 22db837..2592d53 100644
--- a/src/components/modal/VacationModal.vue
+++ b/src/components/modal/VacationModal.vue
@@ -1,141 +1,122 @@
 <template>
     <div v-if="isOpen" class="vac-modal-dialog" @click.self="closeModal">
-      <div class="vac-modal-content p-5 modal-scroll">
-        <h5 class="modal-title">📅 내 연차 사용 내역</h5>
-        <button class="close-btn" @click="closeModal">✖</button>
-
-        <!-- 연차 목록 -->
-        <div class="modal-body" v-if="mergedVacations.length > 0">
-          <ol class="list-group-numbered px-0 mt-4">
-            <li
-              v-for="(vac, index) in mergedVacations"
-              :key="vac._expandIndex"
-              class="vacation-item"
-            >
-              <!-- Used 항목만 인덱스 표시 -->
-              <span v-if="vac.category === 'used'" class="fw-bold text-dark me-2">
-                {{ usedVacationIndexMap[vac._expandIndex] }})
-              </span>
-
-              <span :class="vac.category === 'used' ? 'fw-bold text-danger me-2' : 'fw-bold text-primary me-2'">
-                {{ vac.category === 'used' ? '-' : '+' }}
-              </span>
-
-              <span
-                :style="{ color: userColors[vac.senderId || vac.receiverId] || '#000' }"
-              >
-                {{ formatDate(vac.date) }}
-              </span>
-            </li>
-          </ol>
+        <div class="vac-modal-content p-5 modal-scroll">
+            <h5 class="vac-modal-title">📅 내 연차 사용 내역</h5>
+            <button class="close-btn" @click="closeModal">✖</button>
+            <!-- 연차 목록 -->
+            <div class="vac-modal-body" v-if="mergedVacations.length > 0">
+                <ol class="list-group-numbered px-0 mt-4">
+                <li
+                    v-for="(vac, index) in mergedVacations"
+                    :key="vac._expandIndex"
+                    class="vacation-item"
+                >
+                    <span v-if="vac.category === 'used'" class="fw-bold text-dark me-2">
+                        {{ usedVacationIndexMap[vac._expandIndex] }})
+                    </span>
+                    <span :class="vac.category === 'used' ? 'fw-bold text-danger me-2' : 'fw-bold text-primary me-2'">
+                        {{ vac.category === 'used' ? '-' : '+' }}
+                    </span>
+                    <span
+                    :style="{ color: userColors[vac.senderId || vac.receiverId] || '#000' }"
+                    >
+                        {{ formatDate(vac.date) }}
+                    </span>
+                </li>
+                </ol>
+            </div>
+            <!-- 연차 데이터 없음 -->
+            <p v-else class="text-sm-center mt-10 text-gray">
+                🚫 사용한 연차가 없습니다.
+            </p>
         </div>
-
-        <!-- 연차 데이터 없음 -->
-        <p v-else class="text-sm-center mt-10 text-gray">
-          🚫 사용한 연차가 없습니다.
-        </p>
-      </div>
     </div>
-  </template>
+</template>
 
 <script setup>
 import { defineProps, defineEmits, computed } from "vue";
 import { formatDate } from '@/common/formattedDate.js';
 
 const props = defineProps({
-  isOpen: Boolean,
-  myVacations: {
-    type: Array,
-    default: () => [],
-  },
-  receivedVacations: {
-    type: Array,
-    default: () => [],
-  },
-  userColors: {
-    type: Object,
-    default: () => ({}),
-  },
+    isOpen: Boolean,
+    myVacations: {
+        type: Array,
+        default: () => [],
+    },
+    receivedVacations: {
+        type: Array,
+        default: () => [],
+    },
+    userColors: {
+        type: Object,
+        default: () => ({}),
+    },
 });
 
 const emit = defineEmits(["close"]);
 
-/**
- * 1) Used 휴가를 used_quota만큼 펼치기
- *    - category: "used"
- *    - code: 휴가 코드(예: LOCVACTYP)
- *    - _expandIndex: 각 항목마다 고유한 확장 인덱스 (누적 인덱스 매핑에 사용)
- */
-let globalCounter = 0; // 확장 시 사용할 전역 카운터
+// 사용한 휴가(선물,연차사용)
+let globalCounter = 0;
 const usedVacations = computed(() => {
-  const result = [];
-  props.myVacations.forEach((v) => {
-    const count = v.used_quota || 1;
-    for (let i = 0; i < count; i++) {
-      result.push({
-        ...v,
-        category: "used",
-        code: v.LOCVACTYP,         // 휴가 코드 (700103 등)
-        _expandIndex: globalCounter++,
-      });
-    }
-  });
-  return result;
+    const result = [];
+    props.myVacations.forEach((v) => {
+        const count = v.used_quota || 1;
+        for (let i = 0; i < count; i++) {
+            result.push({
+                ...v,
+                category: "used",
+                code: v.LOCVACTYP,
+                _expandIndex: globalCounter++,
+            });
+        }
+    });
+    return result;
 });
 
-/**
- * 2) Received 휴가: category: "received"
- */
+// 받은 휴가
 const receivedVacations = computed(() =>
-  props.receivedVacations.map((v) => ({
-    ...v,
-    category: "received",
-  }))
+    props.receivedVacations.map((v) => ({
+        ...v,
+        category: "received",
+    }))
 );
 
-/**
- * 3) Used 휴가만 날짜 오름차순 정렬 → 누적 인덱스 계산
- *    - type === "700103"이면 +1
- *    - 그 외이면 +0.5
- */
+// 필터링
 const sortedUsedVacationsAsc = computed(() => {
-  return [...usedVacations.value].sort((a, b) => {
-    return new Date(a.date) - new Date(b.date) || (a._expandIndex - b._expandIndex);
-  });
+    return [...usedVacations.value].sort((a, b) => {
+        return new Date(a.date) - new Date(b.date) || (a._expandIndex - b._expandIndex);
+    });
 });
 
+// 누적 인덱스 계산 type === "700103"이면 +1 그 외이면 +0.5
 const usedVacationIndexMap = computed(() => {
-  let cumulative = 0;
-  const map = {};
-  sortedUsedVacationsAsc.value.forEach((item) => {
-    const increment = item.type === "700103" ? 1 : 0.5;
-    cumulative += increment;
-    map[item._expandIndex] = cumulative;
-  });
-  return map;
+    let cumulative = 0;
+    const map = {};
+    sortedUsedVacationsAsc.value.forEach((item) => {
+        const increment = item.type === "700103" ? 1 : 0.5;
+        cumulative += increment;
+        map[item._expandIndex] = cumulative;
+    });
+    return map;
 });
 
-/**
- * 4) 최종 표시할 merged 리스트 (Used + Received)
- *    - 날짜 내림차순 정렬 (최신 → 과거)
- */
+// 최종 표시할 merged 리스트 (Used + Received) 날짜 내림차순 정렬 (최신 → 과거)
 const mergedVacations = computed(() => {
-  const all = [...usedVacations.value, ...receivedVacations.value];
-  // 날짜 내림차순 + 확장 인덱스 내림차순
-  all.sort((a, b) => {
-    const dateDiff = new Date(b.date) - new Date(a.date);
-    if (dateDiff !== 0) return dateDiff;
-    return b._expandIndex - a._expandIndex;
-  });
-  return all;
+    const all = [...usedVacations.value, ...receivedVacations.value];
+    // 날짜 내림차순 + 확장 인덱스 내림차순
+    all.sort((a, b) => {
+        const dateDiff = new Date(b.date) - new Date(a.date);
+        if (dateDiff !== 0) return dateDiff;
+        return b._expandIndex - a._expandIndex;
+    });
+    return all;
 });
 
-
-/** 모달 닫기 */
+// 모달 닫기
 const closeModal = () => {
   emit("close");
 };
 </script>
+<style scoped>
+</style>
 
-  <style scoped>
-  </style>
diff --git a/src/components/vacation/ProfileList.vue b/src/components/vacation/ProfileList.vue
index 5ed4142..7fa0981 100644
--- a/src/components/vacation/ProfileList.vue
+++ b/src/components/vacation/ProfileList.vue
@@ -1,153 +1,115 @@
 <template>
     <div class="card-body d-flex justify-content-center m-n5">
-      <ul class="list-unstyled profile-list">
-        <li
-          v-for="(user, index) in sortedUserList"
-          :key="index"
-          :class="{ disabled: user.disabled }"
-          @click="$emit('profileClick', user)"
-          data-bs-placement="top"
-          :aria-label="user.MEMBERSEQ"
-        >
-          <img
-            class="rounded-circle profile-img"
-            :src="getUserProfileImage(user.MEMBERPRF)"
-            alt="user"
-            :style="getDynamicStyle(user)"
-            @error="setDefaultImage"
-            @load="showImage"
-          />
-          <span class="remaining-vacation">
-            {{ remainingVacationData[user.MEMBERSEQ] || 0 }}
-          </span>
-        </li>
-      </ul>
+        <ul class="list-unstyled profile-list">
+            <li
+                v-for="(user, index) in sortedUserList"
+                :key="index"
+                :class="{ disabled: user.disabled }"
+                @click="$emit('profileClick', user)"
+                data-bs-placement="top"
+                :aria-label="user.MEMBERSEQ"
+            >
+                <img
+                    class="rounded-circle profile-img"
+                    :src="getUserProfileImage(user.MEMBERPRF)"
+                    alt="user"
+                    :style="getDynamicStyle(user)"
+                    @error="setDefaultImage"
+                    @load="showImage"
+                />
+                <span class="mt-2 text-sm-center d-block fs-6 remaining-vacation">
+                    {{ remainingVacationData[user.MEMBERSEQ] || 0 }}
+                </span>
+            </li>
+        </ul>
     </div>
-  </template>
+</template>
 
-  <script setup>
-  import { onMounted, ref, computed, nextTick } from "vue";
-  import { useUserInfoStore } from "@s/useUserInfoStore";
-  import { useUserStore } from "@s/userList";
-  import $api from "@api";
+<script setup>
+import { onMounted, ref, computed, nextTick } from "vue";
+import { useUserInfoStore } from "@s/useUserInfoStore";
+import { useUserStore } from "@s/userList";
+import $api from "@api";
 
-  defineEmits(["profileClick"]);
-  defineProps({ remainingVacationData: Object });
+defineEmits(["profileClick"]);
+defineProps({ remainingVacationData: Object });
 
-  const userStore = useUserInfoStore();
-  const userListStore = useUserStore();
+const userStore = useUserInfoStore();
+const userListStore = useUserStore();
 
-  const userList = ref([]);
-  const baseUrl = $api.defaults.baseURL.replace(/api\/$/, "");
-  const defaultProfile = "/img/icons/icon.png";
-  const employeeId = ref(null);
-  const userColors = ref({});
-  const windowWidth = ref(window.innerWidth);
+const userList = ref([]);
+const baseUrl = $api.defaults.baseURL.replace(/api\/$/, "");
+const defaultProfile = "/img/icons/icon.png";
+const employeeId = ref(null);
+const userColors = ref({});
+const windowWidth = ref(window.innerWidth);
 
-  const updateWindowWidth = () => {
-    windowWidth.value = window.innerWidth;
-  };
+const updateWindowWidth = () => {
+windowWidth.value = window.innerWidth;
+};
 
-  onMounted(async () => {
-    window.addEventListener("resize", updateWindowWidth);
+onMounted(async () => {
+window.addEventListener("resize", updateWindowWidth);
 
-    await userStore.userInfo();
-    employeeId.value = userStore.user?.id ?? null;
+await userStore.userInfo();
+employeeId.value = userStore.user?.id ?? null;
 
-    await userListStore.fetchUserList();
-    userList.value = userListStore.userList;
+await userListStore.fetchUserList();
+userList.value = userListStore.userList;
 
-    userList.value.forEach(user => {
-      userColors.value[user.MEMBERSEQ] = user.usercolor || "#ccc";
+userList.value.forEach(user => {
+    userColors.value[user.MEMBERSEQ] = user.usercolor || "#ccc";
+});
+
+nextTick(() => {
+    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(tooltip => {
+    new bootstrap.Tooltip(tooltip);
     });
+});
+});
 
-    nextTick(() => {
-      document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(tooltip => {
-        new bootstrap.Tooltip(tooltip);
-      });
-    });
-  });
+const sortedUserList = computed(() => {
+if (!employeeId.value) return userList.value;
+const myProfile = userList.value.find(user => user.MEMBERSEQ === employeeId.value);
+const otherUsers = userList.value.filter(user => user.MEMBERSEQ !== employeeId.value);
+return myProfile ? [myProfile, ...otherUsers] : userList.value;
+});
 
-  const sortedUserList = computed(() => {
-    if (!employeeId.value) return userList.value;
-    const myProfile = userList.value.find(user => user.MEMBERSEQ === employeeId.value);
-    const otherUsers = userList.value.filter(user => user.MEMBERSEQ !== employeeId.value);
-    return myProfile ? [myProfile, ...otherUsers] : userList.value;
-  });
+const getUserProfileImage = (profilePath) =>
+profilePath && profilePath.trim() ? `${baseUrl}upload/img/profile/${profilePath}` : defaultProfile;
 
-  const getUserProfileImage = (profilePath) =>
-    profilePath && profilePath.trim() ? `${baseUrl}upload/img/profile/${profilePath}` : defaultProfile;
+const setDefaultImage = (event) => (event.target.src = defaultProfile);
+const showImage = (event) => (event.target.style.visibility = "visible");
 
-  const setDefaultImage = (event) => (event.target.src = defaultProfile);
-  const showImage = (event) => (event.target.style.visibility = "visible");
+// 화면 크기에 따라 프로필 크기 동적 조정
+const profileSize = computed(() => {
+const totalUsers = userList.value.length;
 
-  // ✅ 화면 크기에 따라 프로필 크기 동적 조정
-  const profileSize = computed(() => {
-    const totalUsers = userList.value.length;
+if (windowWidth.value >= 1650) {
+    if (totalUsers <= 10) return "68px";
+    if (totalUsers <= 15) return "55px";
+    return "45px";
+} else if (windowWidth.value >= 1300) {
+    if (totalUsers <= 10) return "45px";
+    if (totalUsers <= 15) return "40px";
+    return "30px";
+} else if (windowWidth.value >= 1024) {
+    if (totalUsers <= 10) return "40px";
+    if (totalUsers <= 15) return "30px";
+    return "20px";
+} else {
+    return "20px";
+}
+});
 
-    if (windowWidth.value >= 1650) {
-      if (totalUsers <= 10) return "68px";
-      if (totalUsers <= 15) return "55px";
-      return "45px";
-    } else if (windowWidth.value >= 1300) {
-      if (totalUsers <= 10) return "45px";
-      if (totalUsers <= 15) return "40px";
-      return "30px";
-    } else if (windowWidth.value >= 1024) {
-      if (totalUsers <= 10) return "40px";
-      if (totalUsers <= 15) return "30px";
-      return "20px";
-    } else {
-      return "20px"; // 모바일 최소 크기
-    }
-  });
+const getDynamicStyle = (user) => ({
+width: profileSize.value,
+height: profileSize.value,
+borderWidth: "4px",
+borderColor: user.usercolor || "#ccc",
+borderStyle: "solid",
+});
+</script>
 
-  const getDynamicStyle = (user) => ({
-    width: profileSize.value,
-    height: profileSize.value,
-    borderWidth: "4px",
-    borderColor: user.usercolor || "#ccc",
-    borderStyle: "solid",
-  });
-  </script>
-
-  <style scoped>
-  /* ✅ 프로필 리스트 반응형 정렬 */
-  .profile-list {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 10px;
-    padding: 0;
-  }
-
-  /* ✅ 프로필 이미지 반응형 스타일 */
-  .profile-img {
-    transition: all 0.2s ease-in-out;
-  }
-
-  /* ✅ 남은 연차 개수 스타일 */
-  .remaining-vacation {
-    display: block;
-    text-align: center;
-    font-size: 14px;
-    color: #333;
-    margin-top: 3px;
-  }
-
-  /* ✅ 작은 화면에서 프로필 크기 조정 */
-  @media (max-width: 1024px) {
-    .remaining-vacation {
-      font-size: 12px;
-    }
-  }
-
-  @media (max-width: 768px) {
-    .profile-list {
-      gap: 4px; /* 작은 화면에서는 간격 축소 */
-    }
-    .remaining-vacation {
-      font-size: 8px;
-    }
-  }
-  </style>
+<style scoped>
+</style>
diff --git a/src/views/vacation/VacationManagement.vue b/src/views/vacation/VacationManagement.vue
index b166c3e..d3c4fae 100644
--- a/src/views/vacation/VacationManagement.vue
+++ b/src/views/vacation/VacationManagement.vue
@@ -15,24 +15,24 @@
                         />
                         </div>
                         <ProfileList
-                        @profileClick="handleProfileClick"
-                        :remainingVacationData="remainingVacationData"
+                            @profileClick="handleProfileClick"
+                            :remainingVacationData="remainingVacationData"
                         />
                         <VacationModal
-                        v-if="isModalOpen"
-                        :isOpen="isModalOpen"
-                        :myVacations="filteredMyVacations"
-                        :receivedVacations="filteredReceivedVacations"
-                        :userColors="userColors"
-                        @close="isModalOpen = false"
+                            v-if="isModalOpen"
+                            :isOpen="isModalOpen"
+                            :myVacations="filteredMyVacations"
+                            :receivedVacations="filteredReceivedVacations"
+                            :userColors="userColors"
+                            @close="isModalOpen = false"
                         />
                         <VacationGrantModal
-                        v-if="isGrantModalOpen"
-                        :isOpen="isGrantModalOpen"
-                        :targetUser="selectedUser"
-                        :remainingQuota="remainingVacationData[selectedUser?.MEMBERSEQ] || 0"
-                        @close="isGrantModalOpen = false"
-                        @updateVacation="fetchRemainingVacation"
+                            v-if="isGrantModalOpen"
+                            :isOpen="isGrantModalOpen"
+                            :targetUser="selectedUser"
+                            :remainingQuota="remainingVacationData[selectedUser?.MEMBERSEQ] || 0"
+                            @close="isGrantModalOpen = false"
+                            @updateVacation="fetchRemainingVacation"
                         />
                     </div>
                 </div>
@@ -554,8 +554,8 @@ onMounted(async () => {
             const dpEl = calendarDatepicker.value;
             dpEl.style.display = 'block';
             dpEl.style.position = 'fixed';
-            dpEl.style.top = '22%';
-            dpEl.style.left = '66%';
+            dpEl.style.top = '25%';
+            dpEl.style.left = '50%';
             dpEl.style.transform = 'translate(-50%, -50%)';
             dpEl.style.zIndex = '9999';
             dpEl.style.border = 'none';
@@ -568,11 +568,4 @@ onMounted(async () => {
 })
 </script>
 <style>
-  /* 모달 본문 스크롤 */
-  .modal-body {
-  max-height: 140px;
-  overflow-y: auto;
-  }
-
-
 </style>