diff --git a/resources/js/Pages/VacationRequest/Create.vue b/resources/js/Pages/VacationRequest/Create.vue
index 212ab31..7489fcf 100644
--- a/resources/js/Pages/VacationRequest/Create.vue
+++ b/resources/js/Pages/VacationRequest/Create.vue
@@ -142,7 +142,9 @@
                   :class="{ 'border-red-300 text-red-900 focus:ring-red-500 focus:border-red-500': form.errors.type, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.type }"
                 >
                   <template v-if="form.vacationType">
-                    <span class="block truncate">{{ form.vacationType.label }}</span>
+                    <span class="block truncate">
+                      <VacationType :type="form.vacationType.value" />
+                    </span>
                     <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
                       <SelectorIcon class="w-5 h-5 text-gray-400" />
                     </span>
@@ -166,7 +168,7 @@
                     >
                       <li :class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
                         <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
-                          {{ vacationType.label }}
+                          <VacationType :type="vacationType.value" />
                         </span>
 
                         <span
@@ -331,6 +333,7 @@ import { reactive, ref, watch } from 'vue'
 import axios from 'axios'
 import useCurrentYearPeriodInfo from '@/Composables/yearPeriodInfo'
 import VacationChart from '@/Shared/VacationChart'
+import VacationType from '@/Shared/VacationType'
 
 const props = defineProps({
   auth: Object,