diff --git a/resources/js/Shared/Widgets/Calendar/DayComponent.vue b/resources/js/Shared/Widgets/Calendar/DayComponent.vue
index 0e0c159..b311f27 100644
--- a/resources/js/Shared/Widgets/Calendar/DayComponent.vue
+++ b/resources/js/Shared/Widgets/Calendar/DayComponent.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="[ (day.isVacation || day.isPendingVacation) && 'border-b-2 border-dashed', day.isPendingVacation && 'border-lime-500', day.isVacation && 'border-blumilk-500' ]"
+    :class="[ (day.isVacation || day.isPendingVacation) && `border-b-2 border-dashed ${getVacationBorder(day)}` ]"
   >
     <Popper
       v-if="day.isHoliday"
@@ -39,9 +39,7 @@
         {{ day.dayNumber }}
       </time>
       <template #content>
-        <div class="py-2 px-6 text-sm font-semibold text-left text-gray-700 bg-white rounded-lg border border-gray-400">
-          {{ getHolidayDescription(day) }}
-        </div>
+        <VacationPopup :vacation="getVacationInfo(day)" />
       </template>
     </Popper>
     <div
@@ -62,13 +60,20 @@
 <script setup>
 import Popper from 'vue3-popper'
 import { defineProps, ref } from 'vue'
+import VacationPopup from '@/Shared/VacationPopup'
 
-const props = defineProps({
+defineProps({
   day: {
     type: Object,
     required: true,
   },
-  holidayDescription: {
+  getHolidayDescription: {
+    type: Function,
+  },
+  getVacationBorder: {
+    type: Function,
+  },
+  getVacationInfo: {
     type: Function,
   },
 })
@@ -84,9 +89,4 @@ function onMouseleave() {
   if (isActive.value)
     isActive.value = false
 }
-
-function getHolidayDescription(day) {
-  return props.holidayDescription(day)
-}
-
 </script>
\ No newline at end of file
diff --git a/resources/js/Shared/Widgets/VacationCalendar.vue b/resources/js/Shared/Widgets/VacationCalendar.vue
index bbbf8d5..d834fd2 100644
--- a/resources/js/Shared/Widgets/VacationCalendar.vue
+++ b/resources/js/Shared/Widgets/VacationCalendar.vue
@@ -126,7 +126,9 @@
             :day="day"
             class="flex flex-col relative py-2 px-3"
             :class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', { 'hover:bg-blumilk-25': day.isCurrentMonth && !day.isWeekend }, { 'day': calendarState.viewMode.isWeek }, { 'bg-red-100': day.isCurrentMonth && day.isWeekend }, { 'bg-red-50': !day.isCurrentMonth && day.isWeekend }, { 'text-red-800': day.isWeekend }]"
-            :holiday-description="getHolidayDescription"
+            :get-holiday-description="getHolidayDescription"
+            :get-vacation-border="getVacationBorder"
+            :get-vacation-info="getVacationInfo"
           />
         </div>
       </div>
@@ -139,6 +141,7 @@ import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from '@
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
 import { ref, watch, computed, reactive } from 'vue'
 import { DateTime } from 'luxon'
+import useVacationTypeInfo from '@/Composables/vacationTypeInfo'
 import useCurrentYearPeriodInfo from '@/Composables/yearPeriodInfo'
 import { useMonthInfo } from '@/Composables/monthInfo'
 import { viewModes, find as findViewMode } from '@/Shared/Widgets/Calendar/ViewModeOptions'
@@ -159,6 +162,7 @@ function getCurrentDate() {
 const currentDate = getCurrentDate()
 
 const months = useMonthInfo().getMonths()
+const { findType } = useVacationTypeInfo()
 const selectedYear = useCurrentYearPeriodInfo().year.value
 
 const calendar = {
@@ -349,6 +353,14 @@ function isVacation(date) {
 function isPendingVacation(date) {
   return props.pendingVacations[date.toISODate()] !== undefined
 }
+
+function getVacationBorder(day) {
+  return findType(getVacationInfo(day).type)?.border
+}
+
+function getVacationInfo(day) {
+  return day.isVacation ? props.approvedVacations[day.date] : props.pendingVacations[day.date]
+}
 </script>
 
 <style lang="css">