diff --git a/public/mobile/modules/lager/shippingnote/SearchSelectModal.js b/public/mobile/modules/lager/shippingnote/SearchSelectModal.js
new file mode 100644
index 000000000..ecb8c9a17
--- /dev/null
+++ b/public/mobile/modules/lager/shippingnote/SearchSelectModal.js
@@ -0,0 +1,254 @@
+/**
+ * SearchSelectModal Component
+ *
+ * Reusable bottom sheet modal for searching and selecting items.
+ * Works correctly with iPhone Dynamic Island by using bottom sheet pattern.
+ *
+ * Usage:
+ * <SearchSelectModal
+ *     :show="showModal"
+ *     title="Select Item"
+ *     :searchable="true"
+ *     :items="items"
+ *     :loading="loading"
+ *     v-model="searchQuery"
+ *     @select="handleSelect"
+ *     @close="showModal = false"
+ * >
+ *     <template #item="{ item }">
+ *         <div>{{ item.name }}</div>
+ *     </template>
+ * </SearchSelectModal>
+ */
+
+export default {
+    name: 'SearchSelectModal',
+    emits: ['select', 'close', 'update:modelValue'],
+    props: {
+        show: {
+            type: Boolean,
+            default: false
+        },
+        title: {
+            type: String,
+            default: 'Auswählen'
+        },
+        searchable: {
+            type: Boolean,
+            default: false
+        },
+        searchPlaceholder: {
+            type: String,
+            default: 'Suchen...'
+        },
+        modelValue: {
+            type: String,
+            default: ''
+        },
+        items: {
+            type: Array,
+            default: () => []
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        emptyText: {
+            type: String,
+            default: 'Keine Ergebnisse gefunden'
+        },
+        emptyIcon: {
+            type: String,
+            default: 'search' // search, users, box, list
+        },
+        selectedId: {
+            type: [String, Number],
+            default: null
+        },
+        itemKey: {
+            type: String,
+            default: 'id'
+        },
+        showNoneOption: {
+            type: Boolean,
+            default: false
+        },
+        noneOptionText: {
+            type: String,
+            default: 'Keine Auswahl'
+        }
+    },
+
+    setup(props, { emit, slots }) {
+        const { ref, computed, watch } = Vue;
+
+        const searchInput = ref(null);
+
+        // Focus search input when modal opens
+        watch(() => props.show, (newVal) => {
+            if (newVal && props.searchable) {
+                setTimeout(() => {
+                    searchInput.value?.focus();
+                }, 100);
+            }
+        });
+
+        const updateSearch = (event) => {
+            emit('update:modelValue', event.target.value);
+        };
+
+        const selectItem = (item) => {
+            emit('select', item);
+        };
+
+        const selectNone = () => {
+            emit('select', null);
+        };
+
+        const close = () => {
+            emit('close');
+        };
+
+        const isSelected = (item) => {
+            if (props.selectedId === null || props.selectedId === undefined) return false;
+            return item[props.itemKey] === props.selectedId;
+        };
+
+        // Icons for empty states
+        const emptyIcons = {
+            search: `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />`,
+            users: `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />`,
+            box: `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />`,
+            list: `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />`
+        };
+
+        const getEmptyIcon = computed(() => {
+            return emptyIcons[props.emptyIcon] || emptyIcons.search;
+        });
+
+        return {
+            searchInput,
+            updateSearch,
+            selectItem,
+            selectNone,
+            close,
+            isSelected,
+            getEmptyIcon
+        };
+    },
+
+    template: `
+        <teleport to="body">
+            <transition name="fade">
+                <div v-if="show" class="fixed inset-0 z-50">
+                    <!-- Backdrop -->
+                    <div class="absolute inset-0 bg-black/50" @click="close"></div>
+
+                    <!-- Sheet -->
+                    <transition name="slide-up-sheet">
+                        <div v-if="show" class="absolute bottom-0 left-0 right-0 bg-white dark:bg-slate-800 rounded-t-2xl shadow-xl max-h-[85vh] flex flex-col">
+                            <!-- Handle -->
+                            <div class="flex justify-center pt-2 pb-1 flex-shrink-0">
+                                <div class="w-10 h-1 bg-slate-300 dark:bg-slate-600 rounded-full"></div>
+                            </div>
+
+                            <!-- Header -->
+                            <div class="px-4 pb-3 border-b border-slate-100 dark:border-slate-700 flex-shrink-0">
+                                <h3 class="text-lg font-semibold text-slate-800 dark:text-white text-center">
+                                    {{ title }}
+                                </h3>
+                            </div>
+
+                            <!-- Search Input (optional) -->
+                            <div v-if="searchable" class="px-4 py-3 flex-shrink-0">
+                                <div class="relative">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                                    </svg>
+                                    <input
+                                        ref="searchInput"
+                                        type="text"
+                                        :value="modelValue"
+                                        @input="updateSearch"
+                                        :placeholder="searchPlaceholder"
+                                        class="w-full pl-10 pr-4 py-3 bg-slate-100 dark:bg-slate-700 rounded-xl text-slate-800 dark:text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-primary"
+                                    >
+                                </div>
+                            </div>
+
+                            <!-- Results List -->
+                            <div class="flex-1 overflow-y-auto px-4 pb-6">
+                                <!-- Loading -->
+                                <div v-if="loading" class="py-8 text-center">
+                                    <div class="animate-spin w-8 h-8 border-3 border-primary border-t-transparent rounded-full mx-auto"></div>
+                                </div>
+
+                                <!-- Empty State -->
+                                <div v-else-if="items.length === 0" class="py-8 text-center text-slate-500 dark:text-slate-400">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-3 text-slate-300 dark:text-slate-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" v-html="getEmptyIcon"></svg>
+                                    <p>{{ emptyText }}</p>
+                                </div>
+
+                                <!-- Items List -->
+                                <div v-else class="space-y-2">
+                                    <!-- None Option -->
+                                    <button
+                                        v-if="showNoneOption"
+                                        @click="selectNone"
+                                        class="w-full flex items-center p-3 bg-slate-50 dark:bg-slate-700/50 rounded-xl hover:bg-slate-100 dark:hover:bg-slate-700 transition text-left"
+                                    >
+                                        <div class="w-10 h-10 bg-slate-200 dark:bg-slate-600 rounded-full flex items-center justify-center flex-shrink-0">
+                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                                            </svg>
+                                        </div>
+                                        <div class="ml-3 flex-1">
+                                            <p class="font-medium text-slate-500 dark:text-slate-400">{{ noneOptionText }}</p>
+                                        </div>
+                                    </button>
+
+                                    <!-- Regular Items -->
+                                    <button
+                                        v-for="item in items"
+                                        :key="item[itemKey]"
+                                        @click="selectItem(item)"
+                                        :class="[
+                                            'w-full flex items-center p-3 rounded-xl transition text-left',
+                                            isSelected(item)
+                                                ? 'bg-primary/10 border-2 border-primary'
+                                                : 'bg-slate-50 dark:bg-slate-700/50 hover:bg-slate-100 dark:hover:bg-slate-700'
+                                        ]"
+                                    >
+                                        <!-- Custom slot for item content -->
+                                        <slot name="item" :item="item" :selected="isSelected(item)">
+                                            <!-- Default item rendering -->
+                                            <div class="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
+                                                <span class="text-primary font-semibold text-sm">
+                                                    {{ (item.name || item.title || '?').charAt(0).toUpperCase() }}
+                                                </span>
+                                            </div>
+                                            <div class="ml-3 flex-1 min-w-0">
+                                                <p class="font-medium text-slate-800 dark:text-white truncate">
+                                                    {{ item.name || item.title }}
+                                                </p>
+                                                <p v-if="item.subtitle" class="text-sm text-slate-500 dark:text-slate-400 truncate">
+                                                    {{ item.subtitle }}
+                                                </p>
+                                            </div>
+                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-slate-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                                            </svg>
+                                        </slot>
+                                    </button>
+                                </div>
+                            </div>
+
+                            <!-- Safe area padding for iOS -->
+                            <div class="h-6 flex-shrink-0"></div>
+                        </div>
+                    </transition>
+                </div>
+            </transition>
+        </teleport>
+    `
+};
diff --git a/public/mobile/modules/lager/shippingnote/ShippingNoteForm.js b/public/mobile/modules/lager/shippingnote/ShippingNoteForm.js
index ad884ca5f..c0735ea9a 100644
--- a/public/mobile/modules/lager/shippingnote/ShippingNoteForm.js
+++ b/public/mobile/modules/lager/shippingnote/ShippingNoteForm.js
@@ -11,6 +11,7 @@
 import { shippingNoteApi } from '/mobile/modules/lager/shippingnote/ShippingNoteModule.js';
 import DatePicker from '/mobile/modules/lager/shippingnote/DatePicker.js';
 import EmployeeSelector from '/mobile/modules/lager/shippingnote/EmployeeSelector.js';
+import SearchSelectModal from '/mobile/modules/lager/shippingnote/SearchSelectModal.js';
 
 export default {
     name: 'ShippingNoteForm',
@@ -20,7 +21,8 @@ export default {
     },
     components: {
         DatePicker,
-        EmployeeSelector
+        EmployeeSelector,
+        SearchSelectModal
     },
 
     setup(props, { emit }) {
@@ -455,8 +457,8 @@ export default {
 
         const selectCar = (car) => {
             if (hoursEntries.value[carSelectEntryIndex.value]) {
-                hoursEntries.value[carSelectEntryIndex.value].carId = car.id;
-                hoursEntries.value[carSelectEntryIndex.value].carName = car.name;
+                hoursEntries.value[carSelectEntryIndex.value].carId = car?.id || null;
+                hoursEntries.value[carSelectEntryIndex.value].carName = car?.name || '';
             }
             showCarSelect.value = false;
             navigator.vibrate?.([30]);
@@ -951,114 +953,123 @@ export default {
             />
 
             <!-- Customer Search Modal -->
-            <teleport to="body">
-                <transition name="slide-up">
-                    <div v-if="showCustomerSearch" class="fixed inset-0 z-50 flex flex-col bg-white dark:bg-slate-900">
-                        <div class="flex items-center px-4 py-3 border-b border-slate-200 dark:border-slate-700">
-                            <button @click="showCustomerSearch = false" class="p-2 -ml-2">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                                </svg>
-                            </button>
-                            <h2 class="ml-2 text-lg font-semibold text-slate-800 dark:text-white">Kunde suchen</h2>
-                        </div>
-                        <div class="p-4">
-                            <input type="text" v-model="customerSearchQuery" autofocus class="w-full px-4 py-3 bg-slate-100 dark:bg-slate-800 rounded-xl text-base" placeholder="Name, Firma, Kundennummer..." />
-                        </div>
-                        <div class="flex-1 overflow-y-auto px-4">
-                            <div v-if="customerSearchLoading" class="text-center py-8 text-slate-500">Suche...</div>
-                            <div v-else-if="customerSearchResults.length === 0 && customerSearchQuery.length >= 1" class="text-center py-8 text-slate-500">Keine Kunden gefunden</div>
-                            <div v-else class="space-y-2">
-                                <button v-for="customer in customerSearchResults" :key="customer.id" @click="selectCustomer(customer)" class="w-full text-left p-3 bg-slate-50 dark:bg-slate-800 rounded-xl active:bg-slate-100 dark:active:bg-slate-700">
-                                    <div class="font-medium text-slate-800 dark:text-white">{{ customer.displayName }}</div>
-                                    <div v-if="customer.company && customer.company !== customer.displayName" class="text-sm text-primary">{{ customer.company }}</div>
-                                    <div class="text-sm text-slate-500 dark:text-slate-400">{{ customer.street }}, {{ customer.zip }} {{ customer.city }}</div>
-                                    <div v-if="customer.customerNumber" class="text-xs text-slate-400 dark:text-slate-500 mt-1">KNr: {{ customer.customerNumber }}</div>
-                                </button>
-                            </div>
-                        </div>
+            <SearchSelectModal
+                :show="showCustomerSearch"
+                title="Kunde suchen"
+                :searchable="true"
+                search-placeholder="Name, Firma, Kundennummer..."
+                v-model="customerSearchQuery"
+                :items="customerSearchResults"
+                :loading="customerSearchLoading"
+                empty-text="Keine Kunden gefunden"
+                empty-icon="users"
+                @select="selectCustomer"
+                @close="showCustomerSearch = false"
+            >
+                <template #item="{ item: customer }">
+                    <div class="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
+                        <span class="text-primary font-semibold text-sm">
+                            {{ (customer.displayName || customer.company || '?').charAt(0).toUpperCase() }}
+                        </span>
                     </div>
-                </transition>
-            </teleport>
+                    <div class="ml-3 flex-1 min-w-0">
+                        <p class="font-medium text-slate-800 dark:text-white truncate">{{ customer.displayName }}</p>
+                        <p v-if="customer.company && customer.company !== customer.displayName" class="text-sm text-primary truncate">{{ customer.company }}</p>
+                        <p class="text-sm text-slate-500 dark:text-slate-400 truncate">{{ customer.street }}, {{ customer.zip }} {{ customer.city }}</p>
+                        <p v-if="customer.customerNumber" class="text-xs text-slate-400 dark:text-slate-500">KNr: {{ customer.customerNumber }}</p>
+                    </div>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-slate-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                    </svg>
+                </template>
+            </SearchSelectModal>
 
             <!-- Article Search Modal -->
-            <teleport to="body">
-                <transition name="slide-up">
-                    <div v-if="showArticleSearch" class="fixed inset-0 z-50 flex flex-col bg-white dark:bg-slate-900">
-                        <div class="flex items-center px-4 py-3 border-b border-slate-200 dark:border-slate-700">
-                            <button @click="showArticleSearch = false" class="p-2 -ml-2">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                                </svg>
-                            </button>
-                            <h2 class="ml-2 text-lg font-semibold text-slate-800 dark:text-white">Artikel suchen</h2>
-                        </div>
-                        <div class="p-4">
-                            <input type="text" v-model="articleSearchQuery" autofocus class="w-full px-4 py-3 bg-slate-100 dark:bg-slate-800 rounded-xl text-base" placeholder="Artikelnummer oder Name..." />
-                        </div>
-                        <div class="flex-1 overflow-y-auto px-4">
-                            <div v-if="articleSearchLoading" class="text-center py-8 text-slate-500">Suche...</div>
-                            <div v-else-if="articleSearchResults.length === 0 && articleSearchQuery.length >= 1" class="text-center py-8 text-slate-500">Keine Artikel gefunden</div>
-                            <div v-else class="space-y-2">
-                                <button v-for="article in articleSearchResults" :key="article.id" @click="addArticle(article)" class="w-full text-left p-3 bg-slate-50 dark:bg-slate-800 rounded-xl active:bg-slate-100 dark:active:bg-slate-700">
-                                    <div class="font-medium text-slate-800 dark:text-white">{{ article.title }}</div>
-                                    <div class="text-sm text-slate-500 dark:text-slate-400">{{ article.articleNumber }}</div>
-                                </button>
-                            </div>
-                        </div>
+            <SearchSelectModal
+                :show="showArticleSearch"
+                title="Artikel suchen"
+                :searchable="true"
+                search-placeholder="Artikelnummer oder Name..."
+                v-model="articleSearchQuery"
+                :items="articleSearchResults"
+                :loading="articleSearchLoading"
+                empty-text="Keine Artikel gefunden"
+                empty-icon="box"
+                @select="addArticle"
+                @close="showArticleSearch = false"
+            >
+                <template #item="{ item: article }">
+                    <div class="w-10 h-10 bg-amber-500/10 rounded-full flex items-center justify-center flex-shrink-0">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+                        </svg>
                     </div>
-                </transition>
-            </teleport>
+                    <div class="ml-3 flex-1 min-w-0">
+                        <p class="font-medium text-slate-800 dark:text-white truncate">{{ article.title }}</p>
+                        <p class="text-sm text-slate-500 dark:text-slate-400">{{ article.articleNumber }}</p>
+                    </div>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+                    </svg>
+                </template>
+            </SearchSelectModal>
 
             <!-- Car Select Modal -->
-            <teleport to="body">
-                <transition name="slide-up">
-                    <div v-if="showCarSelect" class="fixed inset-0 z-50 flex flex-col bg-white dark:bg-slate-900">
-                        <div class="flex items-center px-4 py-3 border-b border-slate-200 dark:border-slate-700">
-                            <button @click="showCarSelect = false" class="p-2 -ml-2">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                                </svg>
-                            </button>
-                            <h2 class="ml-2 text-lg font-semibold text-slate-800 dark:text-white">Fahrzeug wählen</h2>
-                        </div>
-                        <div class="flex-1 overflow-y-auto p-4 space-y-2">
-                            <button v-for="car in allCars" :key="car.id" @click="selectCar(car)"
-                                :class="['w-full text-left p-3 rounded-xl', hoursEntries[carSelectEntryIndex]?.carId === car.id ? 'bg-primary/10 border-2 border-primary' : 'bg-slate-50 dark:bg-slate-800']"
-                            >
-                                <div class="font-medium text-slate-800 dark:text-white">{{ car.name }}</div>
-                                <div v-if="car.plate" class="text-sm text-slate-500 dark:text-slate-400">{{ car.plate }}</div>
-                            </button>
-                            <button @click="selectCar({id: null, name: ''})" class="w-full text-left p-3 bg-slate-50 dark:bg-slate-800 rounded-xl text-slate-500">
-                                Kein Fahrzeug
-                            </button>
-                        </div>
+            <SearchSelectModal
+                :show="showCarSelect"
+                title="Fahrzeug wählen"
+                :searchable="false"
+                :items="allCars"
+                empty-text="Keine Fahrzeuge verfügbar"
+                empty-icon="list"
+                :selected-id="hoursEntries[carSelectEntryIndex]?.carId"
+                :show-none-option="true"
+                none-option-text="Kein Fahrzeug"
+                @select="selectCar"
+                @close="showCarSelect = false"
+            >
+                <template #item="{ item: car, selected }">
+                    <div class="w-10 h-10 bg-blue-500/10 rounded-full flex items-center justify-center flex-shrink-0">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h8m-8 4h8m-6 4h4M3 21h18M3 17V7c0-1.1.9-2 2-2h14a2 2 0 012 2v10" />
+                        </svg>
                     </div>
-                </transition>
-            </teleport>
+                    <div class="ml-3 flex-1 min-w-0">
+                        <p class="font-medium text-slate-800 dark:text-white truncate">{{ car.name }}</p>
+                        <p v-if="car.plate" class="text-sm text-slate-500 dark:text-slate-400">{{ car.plate }}</p>
+                    </div>
+                    <svg v-if="selected" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                    </svg>
+                </template>
+            </SearchSelectModal>
 
             <!-- Hour Type Select Modal -->
-            <teleport to="body">
-                <transition name="slide-up">
-                    <div v-if="showHourTypeSelect" class="fixed inset-0 z-50 flex flex-col bg-white dark:bg-slate-900">
-                        <div class="flex items-center px-4 py-3 border-b border-slate-200 dark:border-slate-700">
-                            <button @click="showHourTypeSelect = false" class="p-2 -ml-2">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                                </svg>
-                            </button>
-                            <h2 class="ml-2 text-lg font-semibold text-slate-800 dark:text-white">Stundenart wählen</h2>
-                        </div>
-                        <div class="flex-1 overflow-y-auto p-4 space-y-2">
-                            <button v-for="ht in hourTypes" :key="ht.id" @click="selectHourType(ht)"
-                                :class="['w-full text-left p-4 rounded-xl', hoursEntries[hourTypeSelectEntryIndex]?.hourType === ht.id ? 'bg-primary/10 border-2 border-primary' : 'bg-slate-50 dark:bg-slate-800']"
-                            >
-                                <div class="font-medium text-slate-800 dark:text-white">{{ ht.name }}</div>
-                            </button>
-                        </div>
+            <SearchSelectModal
+                :show="showHourTypeSelect"
+                title="Stundenart wählen"
+                :searchable="false"
+                :items="hourTypes"
+                empty-text="Keine Stundenarten verfügbar"
+                empty-icon="list"
+                :selected-id="hoursEntries[hourTypeSelectEntryIndex]?.hourType"
+                @select="selectHourType"
+                @close="showHourTypeSelect = false"
+            >
+                <template #item="{ item: ht, selected }">
+                    <div class="w-10 h-10 bg-green-500/10 rounded-full flex items-center justify-center flex-shrink-0">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
                     </div>
-                </transition>
-            </teleport>
+                    <div class="ml-3 flex-1 min-w-0">
+                        <p class="font-medium text-slate-800 dark:text-white truncate">{{ ht.name }}</p>
+                    </div>
+                    <svg v-if="selected" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                    </svg>
+                </template>
+            </SearchSelectModal>
         </div>
     `
 };