diff --git a/docs/DEVELOPMENT_SESSION_2025-12-12_Appointment_Details_Modal.md b/docs/DEVELOPMENT_SESSION_2025-12-12_Appointment_Details_Modal.md
new file mode 100644
index 0000000..b0d15fd
--- /dev/null
+++ b/docs/DEVELOPMENT_SESSION_2025-12-12_Appointment_Details_Modal.md
@@ -0,0 +1,264 @@
+# Development Session - 2025-12-12
+
+## Session Overview
+
+**Started**: 18:30  
+**Ended**: 22:10  
+**Branch**: `fix/automatic-groups-detection`  
+**Focus**: Appointment Details Modal Enhancement & Tag Filtering
+
+## Major Accomplishments
+
+### Phase 1: Bulk Operations Widget (18:30-19:00)
+
+- **Goal**: Add selection functionality to AdminTable and create reusable bulk operations widget
+- **Result**: Complete bulk operations system implemented
+- **Code Changes**:
+  - Created `BulkActionsWidget.vue` - Reusable component for bulk operations
+  - Added `useBulkAppointmentActions.ts` - Composable for appointment extension
+  - Enhanced `AdminTable.vue` with checkbox selection support
+  - Integrated bulk widget into `ExpiringAppointmentsAdmin.vue`
+
+**Key Features**:
+
+- Checkbox selection in AdminTable (selectable prop)
+- Selection count display in floating widget
+- Bulk appointment extension (3-24 months)
+- Toast notifications for operation results
+
+### Phase 2: Appointment Details Modal Overhaul (19:00-21:00)
+
+- **Goal**: Display all appointment information in structured, readable format
+- **Result**: Complete modal redesign with full API integration
+- **Code Changes**:
+  - Added `fetchAppointmentSeries()` API function
+  - Restructured modal with card-based layout
+  - Added all missing fields (subtitle, address, link, calendar color)
+  - Fixed data structure issues (image, description, additionals, exceptions)
+
+**Key Improvements**:
+
+- **Card-based Layout**: Separate cards for details, series info, tags, description, image
+- **Two-column Grid**: Responsive layout for appointment details
+- **Series Information**: Proper display using `repeatId` (DAILY=1, WEEKLY=7, etc.)
+- **Collapsible Exceptions**: Show 10, expand to show all (for appointments with many exceptions)
+- **Image Display**: Fixed using `imageUrl` from Image object
+- **Description**: Fixed using correct `description` field (not deprecated `note`)
+- **Additional Dates**: Fixed structure (array of objects with `date` field)
+- **Calendar Color**: Visual indicator with colored dot
+
+### Phase 3: Tag Filtering & Dropdown Issues (21:00-22:10)
+
+- **Goal**: Fix tag filtering to work client-side without API reloads
+- **Result**: Tag filtering works locally, dropdown positioning fixed
+- **Code Changes**:
+  - Modified `useExpiringAppointments` to load all appointments once
+  - Removed tag parameters from API query
+  - Fixed `applyFilters()` to work on cached data
+  - Improved dropdown positioning in `TagMultiSelect.vue`
+  - Fixed watch initialization order
+
+**Key Fixes**:
+
+- Tag filtering now client-side only (no API reload)
+- Dropdown appears directly under widget
+- Dropdown follows widget on scroll (instead of closing)
+- Fixed "Cannot access before initialization" error
+- Added debug logging for filter operations
+
+## Technical Decisions
+
+### Decision: Bulk Operations Widget Pattern (18:45)
+
+**Context**: Need reusable pattern for bulk operations across admin panels  
+**Decision**: Create generic `BulkActionsWidget` with slot-based actions  
+**Impact**: Can be reused in all admin panels with custom actions
+
+**Pattern**:
+
+```vue
+<BulkActionsWidget
+  :selected-ids="selectedIds"
+  singular-label="Item"
+  plural-label="Items"
+  @clear-selection="clearSelection"
+>
+  <template #actions="{ selectedCount }">
+    <!-- Custom actions here -->
+  </template>
+</BulkActionsWidget>
+```
+
+### Decision: API Integration for Modal (19:30)
+
+**Context**: Modal showed incomplete data from table preview  
+**Decision**: Use `GET /calendars/appointments/{id}/{startDate}` for full data  
+**Impact**: Modal shows complete appointment series with all details
+
+**Response Structure**:
+
+```json
+{
+  "data": {
+    "appointment": {
+      "base": {
+        /* all series data */
+      },
+      "calculated": {
+        /* computed data */
+      }
+    }
+  }
+}
+```
+
+### Decision: Client-Side Tag Filtering (21:30)
+
+**Context**: Tag changes triggered API reloads, causing flicker  
+**Decision**: Load all appointments once, filter locally  
+**Impact**: Instant filtering, no network requests, better UX
+
+**Implementation**:
+
+- Load 9999 days of appointments once
+- Apply tag filter in `applyFilters()` function
+- Watch for tag changes, re-filter locally
+
+### Decision: Dropdown Positioning Strategy (22:00)
+
+**Context**: Dropdown appeared above widget or disconnected  
+**Decision**: Update position on scroll instead of closing  
+**Impact**: Better UX, dropdown stays visible and follows widget
+
+## Challenges & Solutions
+
+### Challenge 1: Set Reactivity in AdminTable
+
+**Problem**: Checkbox state not updating when using `Set.add()` and `Set.delete()`  
+**Solution**: Create new Set instance on each change for Vue reactivity  
+**Code**:
+
+```javascript
+// Before (not reactive)
+selectedItems.value.add(itemId)
+
+// After (reactive)
+const newSet = new Set(selectedItems.value)
+newSet.add(itemId)
+selectedItems.value = newSet
+```
+
+### Challenge 2: Appointment Data Structure
+
+**Problem**: Multiple issues with nested data (image, description, additionals)  
+**Solution**: Understand API response structure and access correct fields  
+**Fixes**:
+
+- Image: `appointment.base.image.imageUrl` (not `image` directly)
+- Description: `appointment.base.description` (not deprecated `note`)
+- Additionals: Array of `{id, date}` objects (not date strings)
+- Series ID: `appointment.base.id` for row-key
+
+### Challenge 3: Watch Initialization Order
+
+**Problem**: "Cannot access 'applyFilters' before initialization" error  
+**Solution**: Remove `{ immediate: true }` from watch, call in `onMounted()` instead  
+**Reason**: Watch with immediate runs before function declaration
+
+### Challenge 4: Tag Filtering API Reloads
+
+**Problem**: Changing tags triggered API requests, causing data reload  
+**Solution**: Load all data once, filter client-side  
+**Implementation**:
+
+- Remove tag parameter from `useExpiringAppointments`
+- Filter in `applyFilters()` based on `selectedTagIds`
+- Watch only triggers local filtering
+
+## Performance Improvements
+
+1. **Reduced API Calls**: Tag filtering no longer triggers API requests
+2. **Cached Data**: TanStack Query caches appointments for 30 minutes
+3. **Local Filtering**: Instant response to filter changes
+4. **Optimized Rendering**: Card-based layout with conditional rendering
+
+## Code Quality
+
+- Added comprehensive debug logging for troubleshooting
+- Consistent error handling with try-catch blocks
+- TypeScript interfaces for type safety
+- Reusable components (BulkActionsWidget, TagMultiSelect)
+- Performance logging for API calls
+
+## Testing Notes
+
+- Tested with "Mädchenjungschar" (29 exceptions, proper display)
+- Tested with "Hauskreis Schaak" (21 additional dates, correct structure)
+- Tag filtering tested with multiple tags (187, 190)
+- Bulk extension tested with various month selections
+- Dropdown positioning tested with scroll and resize
+
+## Next Steps
+
+- [ ] Consider removing debug logs for production
+- [ ] Add bulk operations to other admin panels (Tags, Automatic Groups)
+- [ ] Add more bulk actions (delete, duplicate, etc.)
+- [ ] Improve exception display for very large lists (pagination?)
+- [ ] Add keyboard shortcuts for bulk operations
+
+## Lessons Learned
+
+### 1. Vue Reactivity with Collections
+
+**Problem**: Mutating Sets/Maps doesn't trigger Vue reactivity  
+**Solution**: Always create new instances when modifying collections  
+**Application**: Use this pattern for all Set/Map operations in Vue 3
+
+### 2. API Response Structure Understanding
+
+**Problem**: Assumed flat structure, but API returns nested objects  
+**Solution**: Log full response, understand actual structure before coding  
+**Application**: Always inspect API responses before implementing UI
+
+### 3. Watch Timing Issues
+
+**Problem**: Watches with `immediate: true` can run before dependencies are ready  
+**Solution**: Use `onMounted()` for initial setup, watches for changes only  
+**Application**: Separate initialization logic from reactive updates
+
+### 4. Client-Side vs Server-Side Filtering
+
+**Problem**: Server-side filtering causes unnecessary API calls  
+**Solution**: Load all data once, filter client-side for better UX  
+**Application**: Use client-side filtering for small-medium datasets (<1000 items)
+
+### 5. Dropdown Positioning in Portals
+
+**Problem**: Fixed positioning requires careful calculation with scroll offsets  
+**Solution**: Use `getBoundingClientRect()` + `window.scrollX/Y` for accurate positioning  
+**Application**: Always account for scroll position when using fixed positioning
+
+## Files Modified
+
+- `src/components/common/BulkActionsWidget.vue` (new)
+- `src/components/common/AdminTable.vue` (selection support)
+- `src/components/common/TagMultiSelect.vue` (positioning fixes)
+- `src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue` (major refactor)
+- `src/composables/useBulkAppointmentActions.ts` (new)
+- `src/composables/useExpiringAppointments.ts` (simplified)
+- `src/services/churchtools.ts` (added fetchAppointmentSeries)
+
+## Commits
+
+1. `c039afc` - feat: Add bulk operations widget with appointment extension
+2. `f3333f6` - feat: Improve appointment details modal with full API integration
+3. `b55cf03` - fix: Improve tag filtering and dropdown positioning
+
+## Session Statistics
+
+- **Duration**: ~3.5 hours
+- **Files Changed**: 7 files
+- **Lines Added**: ~850
+- **Lines Removed**: ~600
+- **Commits**: 3
+- **Issues Resolved**: 5 major issues
diff --git a/package-lock.json b/package-lock.json
index 78291ef..178f8f7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "churchtools-dashboard",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "churchtools-dashboard",
-      "version": "1.0.9",
+      "version": "1.0.10",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^7.0.1",
         "@fortawesome/free-solid-svg-icons": "^7.0.1",
@@ -15,6 +15,7 @@
         "@tanstack/query-sync-storage-persister": "^5.90.2",
         "@tanstack/vue-query": "^5.90.2",
         "@vitejs/plugin-vue": "^6.0.1",
+        "@vueuse/core": "^14.1.0",
         "vue": "^3.5.21",
         "vue-i18n": "^9.14.5"
       },
@@ -1012,6 +1013,12 @@
         "undici-types": "~7.10.0"
       }
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
+      "license": "MIT"
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.1.tgz",
@@ -1134,6 +1141,44 @@
       "integrity": "sha512-+2k1EQpnYuVuu3N7atWyG3/xoFWIVJZq4Mz8XNOdScFI0etES75fbny/oU4lKWk/577P1zmg0ioYvpGEDZ3DLw==",
       "license": "MIT"
     },
+    "node_modules/@vueuse/core": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.1.0.tgz",
+      "integrity": "sha512-rgBinKs07hAYyPF834mDTigH7BtPqvZ3Pryuzt1SD/lg5wEcWqvwzXXYGEDb2/cP0Sj5zSvHl3WkmMELr5kfWw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "14.1.0",
+        "@vueuse/shared": "14.1.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-14.1.0.tgz",
+      "integrity": "sha512-7hK4g015rWn2PhKcZ99NyT+ZD9sbwm7SGvp7k+k+rKGWnLjS/oQozoIZzWfCewSUeBmnJkIb+CNr7Zc/EyRnnA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-14.1.0.tgz",
+      "integrity": "sha512-EcKxtYvn6gx1F8z9J5/rsg3+lTQnvOruQd8fUecW99DCK04BkWD7z5KQ/wTAx+DazyoEE9dJt/zV8OIEQbM6kw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
     "node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
diff --git a/package.json b/package.json
index 93d62bd..dca6faa 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "churchtools-dashboard",
   "private": true,
-  "version": "1.0.9",
+  "version": "1.0.10",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -40,6 +40,7 @@
     "@tanstack/query-sync-storage-persister": "^5.90.2",
     "@tanstack/vue-query": "^5.90.2",
     "@vitejs/plugin-vue": "^6.0.1",
+    "@vueuse/core": "^14.1.0",
     "vue": "^3.5.21",
     "vue-i18n": "^9.14.5"
   }
diff --git a/src/components/automatic-groups/AutomaticGroupsAdmin.vue b/src/components/automatic-groups/AutomaticGroupsAdmin.vue
index 5c7dc1a..9a34ec7 100644
--- a/src/components/automatic-groups/AutomaticGroupsAdmin.vue
+++ b/src/components/automatic-groups/AutomaticGroupsAdmin.vue
@@ -1,66 +1,80 @@
 <template>
-  <AdminTable
-    ref="adminTableRef"
-    :data="groups"
-    :loading="loading"
-    :error="error"
-    :columns="tableColumns"
-    row-key="id"
-    title="Automatische Gruppen - Admin Panel"
-    description="Überwachung und Verwaltung aller automatischen Gruppen"
-    searchable
-    search-placeholder="Gruppen durchsuchen..."
-    :search-fields="['name', 'groupTypeName']"
-    default-sort-field="id"
-    loading-text="Lade automatische Gruppen..."
-    empty-text="Keine automatischen Gruppen gefunden."
-    @retry="refreshGroups"
-    @reload="refreshGroups"
-  >
-    <!-- Custom Actions -->
-    <template #actions>
-      <button @click="clearSearch" class="ct-btn ct-btn-secondary" title="Suchfeld zurücksetzen">
-        Suche zurücksetzen
-      </button>
-      <button @click="refreshGroups" class="ct-btn ct-btn-primary refresh-btn" :disabled="loading">
-        <span v-if="loading" class="btn-spinner"></span>
-        {{ loading ? 'Lädt...' : 'Aktualisieren' }}
-      </button>
-    </template>
-
-    <!-- Custom Cell Rendering -->
-    <template #cell-name="{ item }">
-      <strong>{{ item.name }}</strong>
-    </template>
-
-    <template #cell-config="{ item }">
-      <span class="status-badge" :class="getConfigStatusClass(item.dynamicGroupStatus)">
-        {{ getConfigStatusText(item.dynamicGroupStatus) }}
-      </span>
-    </template>
-
-    <template #cell-status="{ item }">
-      <span class="status-badge" :class="getExecutionStatusClass(item.executionStatus)">
-        {{ getExecutionStatusText(item.executionStatus) }}
-      </span>
-    </template>
-
-    <template #cell-lastExecution="{ item }">
-      {{ formatDate(item.lastExecution) }}
-    </template>
-
-    <template #cell-actions="{ item }">
-      <a
-        :href="getGroupUrl(item.id)"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="ct-btn ct-btn-sm ct-btn-outline"
-        title="Gruppe in ChurchTools öffnen"
-      >
-        Öffnen
-      </a>
-    </template>
-  </AdminTable>
+  <div class="admin-container">
+    <!-- Selection Count Box - Always visible for testing -->
+    <div class="selection-count-box">
+      <strong>{{ selectedCount }}</strong>
+      {{ selectedCount === 1 ? 'Gruppe' : 'Gruppen' }} ausgewählt
+    </div>
+
+    <AdminTable
+      ref="adminTableRef"
+      :data="groups"
+      :loading="loading"
+      :error="error"
+      :columns="tableColumns"
+      row-key="id"
+      title="Automatische Gruppen - Admin Panel"
+      description="Überwachung und Verwaltung aller automatischen Gruppen"
+      searchable
+      search-placeholder="Gruppen durchsuchen..."
+      :search-fields="['name', 'groupTypeName']"
+      default-sort-field="id"
+      loading-text="Lade automatische Gruppen..."
+      empty-text="Keine automatischen Gruppen gefunden."
+      selectable
+      @retry="refreshGroups"
+      @reload="refreshGroups"
+      @selection-change="handleSelectionChange"
+    >
+      <!-- Custom Actions -->
+      <template #actions>
+        <button @click="clearSearch" class="ct-btn ct-btn-secondary" title="Suchfeld zurücksetzen">
+          Suche zurücksetzen
+        </button>
+        <button
+          @click="refreshGroups"
+          class="ct-btn ct-btn-primary refresh-btn"
+          :disabled="loading"
+        >
+          <span v-if="loading" class="btn-spinner"></span>
+          {{ loading ? 'Lädt...' : 'Aktualisieren' }}
+        </button>
+      </template>
+
+      <!-- Custom Cell Rendering -->
+      <template #cell-name="{ item }">
+        <strong>{{ item.name }}</strong>
+      </template>
+
+      <template #cell-config="{ item }">
+        <span class="status-badge" :class="getConfigStatusClass(item.dynamicGroupStatus)">
+          {{ getConfigStatusText(item.dynamicGroupStatus) }}
+        </span>
+      </template>
+
+      <template #cell-status="{ item }">
+        <span class="status-badge" :class="getExecutionStatusClass(item.executionStatus)">
+          {{ getExecutionStatusText(item.executionStatus) }}
+        </span>
+      </template>
+
+      <template #cell-lastExecution="{ item }">
+        {{ formatDate(item.lastExecution) }}
+      </template>
+
+      <template #cell-actions="{ item }">
+        <a
+          :href="getGroupUrl(item.id)"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="ct-btn ct-btn-sm ct-btn-outline"
+          title="Gruppe in ChurchTools öffnen"
+        >
+          Öffnen
+        </a>
+      </template>
+    </AdminTable>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -82,6 +96,13 @@ const loading = computed(() => isLoading.value || isFetching.value)
 // AdminTable reference
 const adminTableRef = ref()
 
+// Selection management
+const selectedCount = ref(0)
+
+const handleSelectionChange = (selectedIds: number[]) => {
+  selectedCount.value = selectedIds.length
+}
+
 // Table configuration
 const tableColumns: TableColumn[] = [
   { key: 'id', label: 'Gruppen-ID', sortable: true, resizable: true, width: 100 },
@@ -326,4 +347,44 @@ const clearSearch = () => {
     transform: rotate(360deg);
   }
 }
+
+/* Admin container */
+.admin-container {
+  position: relative;
+}
+
+/* Selection count box */
+.selection-count-box {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  background: white;
+  border: 2px solid var(--ct-primary, #3498db);
+  border-radius: 8px;
+  padding: 1rem 1.5rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 9999;
+  font-size: 0.95rem;
+  color: var(--ct-text-primary, #2c3e50);
+  animation: slideIn 0.3s ease-out;
+  min-width: 200px;
+  text-align: center;
+}
+
+.selection-count-box strong {
+  color: var(--ct-primary, #3498db);
+  font-size: 1.2rem;
+  margin-right: 0.25rem;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 </style>
diff --git a/src/components/common/AdminTable.vue b/src/components/common/AdminTable.vue
index 6d8e62b..fe83bcc 100644
--- a/src/components/common/AdminTable.vue
+++ b/src/components/common/AdminTable.vue
@@ -79,6 +79,14 @@
           <table class="admin-data-table" ref="tableRef">
             <thead>
               <tr>
+                <th v-if="selectable" class="checkbox-column">
+                  <input
+                    type="checkbox"
+                    :checked="isAllSelected"
+                    @change="toggleSelectAll"
+                    class="ct-checkbox"
+                  />
+                </th>
                 <th
                   v-for="(column, index) in columns"
                   :key="column.key"
@@ -90,10 +98,18 @@
                   :style="{ width: columnWidths[index] + 'px' }"
                   @click="column.sortable && sortBy(column.key)"
                 >
-                  {{ column.label }}
-                  <span v-if="column.sortable && sortField === column.key" class="sort-indicator">
-                    {{ sortDirection === 'asc' ? '↑' : '↓' }}
-                  </span>
+                  <!-- Custom Header Slot -->
+                  <slot v-if="column.headerSlot" :name="column.headerSlot" :column="column">
+                    {{ column.label }}
+                  </slot>
+                  <!-- Default Header Content -->
+                  <template v-else>
+                    {{ column.label }}
+                    <span v-if="column.sortable && sortField === column.key" class="sort-indicator">
+                      {{ sortDirection === 'asc' ? '↑' : '↓' }}
+                    </span>
+                  </template>
+
                   <div
                     v-if="column.resizable"
                     class="resize-handle"
@@ -104,6 +120,14 @@
             </thead>
             <tbody>
               <tr v-for="item in filteredData" :key="item[rowKey]" class="data-row">
+                <td v-if="selectable" class="checkbox-column">
+                  <input
+                    type="checkbox"
+                    :checked="selectedItems.has(item[rowKey])"
+                    @change="toggleSelectItem(item[rowKey])"
+                    class="ct-checkbox"
+                  />
+                </td>
                 <td v-for="column in columns" :key="column.key">
                   <!-- Custom Cell Rendering via Slots -->
                   <slot
@@ -155,6 +179,9 @@ interface Props {
   defaultSortField?: string
   defaultSortDirection?: SortDirection
 
+  // Selection
+  selectable?: boolean
+
   // Text customization
   loadingText?: string
   retryText?: string
@@ -167,6 +194,7 @@ const props = withDefaults(defineProps<Props>(), {
   searchPlaceholder: 'Suchen...',
   searchFields: () => [],
   defaultSortDirection: 'asc',
+  selectable: false,
   loadingText: 'Lädt...',
   retryText: 'Erneut versuchen',
   reloadText: 'Erneut laden',
@@ -176,6 +204,7 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<{
   retry: []
   reload: []
+  'selection-change': [selectedIds: any[]]
 }>()
 
 // Development mode detection
@@ -211,6 +240,38 @@ const hasActiveFilters = computed(() => {
   return searchTerm.value !== ''
 })
 
+// Selection management
+const selectedItems = ref<Set<any>>(new Set())
+
+const isAllSelected = computed(() => {
+  return filteredData.value.length > 0 && selectedItems.value.size === filteredData.value.length
+})
+
+const toggleSelectAll = () => {
+  if (isAllSelected.value) {
+    selectedItems.value = new Set()
+  } else {
+    selectedItems.value = new Set(filteredData.value.map((item) => item[props.rowKey]))
+  }
+  emit('selection-change', Array.from(selectedItems.value))
+}
+
+const toggleSelectItem = (itemId: any) => {
+  const newSet = new Set(selectedItems.value)
+  if (newSet.has(itemId)) {
+    newSet.delete(itemId)
+  } else {
+    newSet.add(itemId)
+  }
+  selectedItems.value = newSet
+  emit('selection-change', Array.from(selectedItems.value))
+}
+
+const clearSelection = () => {
+  selectedItems.value = new Set()
+  emit('selection-change', [])
+}
+
 // Clear search function for parent components
 const clearSearch = () => {
   searchTerm.value = ''
@@ -220,7 +281,9 @@ const clearSearch = () => {
 defineExpose({
   searchTerm: readonly(searchTerm),
   filteredData: readonly(filteredData),
+  selectedItems: readonly(selectedItems),
   clearSearch,
+  clearSelection,
 })
 </script>
 
@@ -437,7 +500,8 @@ defineExpose({
 .table-container {
   width: 100%;
   max-width: 100%;
-  overflow: auto;
+  overflow-x: auto;
+  overflow-y: auto;
   border-radius: 8px;
   background: var(--ct-bg-primary, #ffffff);
   margin-bottom: 0;
@@ -485,10 +549,19 @@ defineExpose({
 .admin-data-table td {
   padding: 0.75rem 1rem;
   border-bottom: 1px solid var(--ct-border-color, #f0f2f5);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
   vertical-align: middle;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  white-space: normal;
+  max-width: 300px; /* Default max-width for all cells */
+}
+
+/* Specific style for description cells */
+.admin-data-table td.description-cell {
+  white-space: normal;
+  min-width: 200px;
+  max-width: 400px;
+  word-break: break-word;
 }
 
 .admin-data-table th.sortable {
@@ -536,6 +609,20 @@ defineExpose({
   background-color: var(--ct-bg-secondary, #f8f9fa);
 }
 
+/* Checkbox column */
+.checkbox-column {
+  width: 40px;
+  text-align: center;
+  padding: 0.75rem 0.5rem;
+}
+
+.ct-checkbox {
+  cursor: pointer;
+  width: 18px;
+  height: 18px;
+  accent-color: var(--ct-primary, #3498db);
+}
+
 /* Buttons */
 .ct-btn {
   padding: 0.75rem 1.5rem;
diff --git a/src/components/common/BulkActionsWidget.vue b/src/components/common/BulkActionsWidget.vue
new file mode 100644
index 0000000..1e27557
--- /dev/null
+++ b/src/components/common/BulkActionsWidget.vue
@@ -0,0 +1,210 @@
+<template>
+  <div v-if="selectedCount > 0" class="bulk-actions-widget">
+    <div class="widget-header">
+      <div class="selection-info">
+        <strong>{{ selectedCount }}</strong>
+        {{ itemLabel }}
+      </div>
+      <button @click="$emit('clear-selection')" class="clear-btn" title="Auswahl aufheben">
+        ✕
+      </button>
+    </div>
+
+    <div class="widget-actions">
+      <slot name="actions" :selectedCount="selectedCount" :selectedIds="selectedIds">
+        <!-- Default: No actions -->
+        <p class="no-actions">Keine Aktionen verfügbar</p>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  selectedIds: number[]
+  singularLabel: string
+  pluralLabel: string
+}
+
+const props = defineProps<Props>()
+
+defineEmits<{
+  'clear-selection': []
+}>()
+
+const selectedCount = computed(() => props.selectedIds.length)
+
+const itemLabel = computed(() => {
+  return selectedCount.value === 1
+    ? `${props.singularLabel} ausgewählt`
+    : `${props.pluralLabel} ausgewählt`
+})
+</script>
+
+<style scoped>
+.bulk-actions-widget {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  background: white;
+  border: 2px solid var(--ct-primary, #3498db);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 9999;
+  min-width: 280px;
+  max-width: 400px;
+  animation: slideIn 0.3s ease-out;
+}
+
+.widget-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--ct-border-color, #e0e0e0);
+  background: var(--ct-bg-secondary, #f8f9fa);
+  border-radius: 6px 6px 0 0;
+}
+
+.selection-info {
+  font-size: 0.95rem;
+  color: var(--ct-text-primary, #2c3e50);
+}
+
+.selection-info strong {
+  color: var(--ct-primary, #3498db);
+  font-size: 1.2rem;
+  margin-right: 0.25rem;
+}
+
+.clear-btn {
+  background: transparent;
+  border: none;
+  font-size: 1.5rem;
+  color: var(--ct-text-secondary, #6c757d);
+  cursor: pointer;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.clear-btn:hover {
+  background: rgba(220, 53, 69, 0.1);
+  color: #dc3545;
+}
+
+.widget-actions {
+  padding: 1rem 1.5rem;
+}
+
+.no-actions {
+  margin: 0;
+  color: var(--ct-text-secondary, #6c757d);
+  font-size: 0.9rem;
+  text-align: center;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Action button styles for slotted content */
+:deep(.bulk-action-btn) {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  margin-bottom: 0.5rem;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.9rem;
+  font-weight: 500;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+:deep(.bulk-action-btn:last-child) {
+  margin-bottom: 0;
+}
+
+:deep(.bulk-action-btn:disabled) {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+:deep(.bulk-action-btn.primary) {
+  background-color: var(--ct-primary, #3498db);
+  color: white;
+}
+
+:deep(.bulk-action-btn.primary:hover:not(:disabled)) {
+  background-color: var(--ct-primary-dark, #2980b9);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+:deep(.bulk-action-btn.success) {
+  background-color: var(--ct-success, #28a745);
+  color: white;
+}
+
+:deep(.bulk-action-btn.success:hover:not(:disabled)) {
+  background-color: #218838;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+:deep(.bulk-action-btn.danger) {
+  background-color: var(--ct-danger, #dc3545);
+  color: white;
+}
+
+:deep(.bulk-action-btn.danger:hover:not(:disabled)) {
+  background-color: #c82333;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+:deep(.bulk-action-btn.secondary) {
+  background-color: var(--ct-secondary, #6c757d);
+  color: white;
+}
+
+:deep(.bulk-action-btn.secondary:hover:not(:disabled)) {
+  background-color: var(--ct-secondary-dark, #5a6268);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+:deep(.action-spinner) {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/src/components/common/TagMultiSelect.vue b/src/components/common/TagMultiSelect.vue
new file mode 100644
index 0000000..0170a53
--- /dev/null
+++ b/src/components/common/TagMultiSelect.vue
@@ -0,0 +1,592 @@
+<template>
+  <div class="tag-multiselect" ref="containerRef">
+    <div class="select-header" @click="toggleDropdown">
+      <div class="selected-tags">
+        <span v-if="selectedTags.length === 0" class="placeholder">Filter nach Tags</span>
+        <div v-else class="chips-container">
+          <span
+            v-for="tag in selectedTags"
+            :key="tag.id"
+            class="chip"
+            :style="{
+              '--tag-bg': getTagColor(tag.color),
+              '--tag-text': getContrastColor(getTagColor(tag.color)),
+            }"
+          >
+            <span class="chip-text">{{ tag.name }}</span>
+            <button
+              class="chip-remove"
+              @click.stop="removeTag(tag.id)"
+              :style="{ color: getContrastColor(getTagColor(tag.color)) }"
+              aria-label="Tag entfernen"
+            >
+              &times;
+            </button>
+          </span>
+        </div>
+      </div>
+      <span class="dropdown-icon" :class="{ open: isOpen }">▼</span>
+    </div>
+
+    <Teleport to="body">
+      <div v-if="isOpen" class="dropdown-portal">
+        <div ref="dropdownRef" class="dropdown-content">
+          <div class="search-container">
+            <input
+              ref="searchInput"
+              v-model="searchQuery"
+              type="text"
+              placeholder="Tags durchsuchen..."
+              class="search-input"
+              @click.stop
+            />
+          </div>
+
+          <div class="tags-list">
+            <div
+              v-for="tag in filteredTags"
+              :key="tag.id"
+              class="tag-option"
+              @click="toggleTag(tag)"
+            >
+              <div class="tag-color" :style="{ backgroundColor: tag.color }"></div>
+              <span class="tag-name">{{ tag.name }}</span>
+              <span v-if="isSelected(tag.id)" class="checkmark">✓</span>
+            </div>
+
+            <div v-if="filteredTags.length === 0" class="no-results">
+              Keine passenden Tags gefunden
+            </div>
+          </div>
+
+          <div v-if="selectedTags.length > 0" class="dropdown-actions">
+            <div class="action-buttons">
+              <button class="action-btn select-all" @click.stop="selectAll">Alle auswählen</button>
+              <button class="action-btn select-none" @click.stop="clearSelection">
+                Keine auswählen
+              </button>
+            </div>
+            <button class="clear-btn" @click.stop="clearSelection">Auswahl zurücksetzen</button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount, nextTick, watch } from 'vue'
+import { onClickOutside } from '@vueuse/core'
+
+const props = defineProps({
+  modelValue: {
+    type: Array as () => number[],
+    default: () => [],
+  },
+  tags: {
+    type: Array as () => Array<{ id: number; name: string; color: string }>,
+    required: true,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const isOpen = ref(false)
+const searchQuery = ref('')
+const containerRef = ref<HTMLElement | null>(null)
+const dropdownRef = ref<HTMLElement | null>(null)
+const searchInput = ref<HTMLInputElement | null>(null)
+
+const filteredTags = computed(() => {
+  const query = searchQuery.value.toLowerCase()
+  return props.tags.filter((tag) => tag.name.toLowerCase().includes(query))
+})
+
+const selectedTags = computed(() => {
+  return props.tags.filter((tag) => props.modelValue.includes(tag.id))
+})
+
+const isSelected = (tagId: number) => {
+  return props.modelValue.includes(tagId)
+}
+
+const toggleTag = (tag: { id: number }) => {
+  const newValue = [...props.modelValue]
+  const index = newValue.indexOf(tag.id)
+
+  if (index === -1) {
+    newValue.push(tag.id)
+  } else {
+    newValue.splice(index, 1)
+  }
+
+  emit('update:modelValue', newValue)
+}
+
+const removeTag = (tagId: number) => {
+  const newValue = props.modelValue.filter((id) => id !== tagId)
+  emit('update:modelValue', newValue)
+}
+
+const clearSelection = () => {
+  emit('update:modelValue', [])
+  searchQuery.value = ''
+}
+
+const selectAll = () => {
+  const allTagIds = props.tags.map((tag) => tag.id)
+  emit('update:modelValue', [...allTagIds])
+}
+
+const toggleDropdown = (event: Event) => {
+  event.stopPropagation()
+  isOpen.value = !isOpen.value
+  if (isOpen.value) {
+    searchQuery.value = ''
+    nextTick(() => {
+      positionDropdown()
+      searchInput.value?.focus()
+    })
+  }
+}
+
+const positionDropdown = () => {
+  if (!dropdownRef.value || !containerRef.value) {
+    console.log('❌ positionDropdown: missing refs', {
+      dropdown: !!dropdownRef.value,
+      container: !!containerRef.value,
+    })
+    return
+  }
+
+  const containerRect = containerRef.value.getBoundingClientRect()
+  const dropdown = dropdownRef.value
+
+  console.log('📍 Positioning dropdown:', {
+    containerRect: {
+      left: containerRect.left,
+      top: containerRect.top,
+      bottom: containerRect.bottom,
+      width: containerRect.width,
+    },
+    scrollX: window.scrollX,
+    scrollY: window.scrollY,
+  })
+
+  // Set the width to match the container
+  dropdown.style.width = `${containerRect.width}px`
+
+  // Position the dropdown directly below the container
+  const left = containerRect.left + window.scrollX
+  const top = containerRect.bottom + window.scrollY + 4
+
+  dropdown.style.left = `${left}px`
+  dropdown.style.top = `${top}px`
+  dropdown.style.bottom = 'auto'
+
+  console.log('📍 Applied styles:', {
+    left: dropdown.style.left,
+    top: dropdown.style.top,
+    width: dropdown.style.width,
+  })
+
+  // Check if there's enough space below, if not, position above
+  const spaceBelow = window.innerHeight - containerRect.bottom
+  const spaceAbove = containerRect.top
+
+  // Only position above if there's very little space below (less than 200px)
+  // AND significantly more space above
+  if (spaceBelow < 200 && spaceAbove > spaceBelow + 100) {
+    // Position above if there's more space above
+    dropdown.style.top = 'auto'
+    dropdown.style.bottom = `${window.innerHeight - containerRect.top + window.scrollY - 4}px`
+    console.log('📍 Positioned above (not enough space below)')
+  }
+}
+
+const handleClickOutside = (event: MouseEvent) => {
+  if (containerRef.value && !containerRef.value.contains(event.target as Node)) {
+    isOpen.value = false
+    document.removeEventListener('click', handleClickOutside, { capture: true })
+  }
+}
+
+const getTagColor = (colorName: string): string => {
+  // Map of color names to hex values - matching the table's color scheme
+  const colorMap: Record<string, string> = {
+    basic: '#e0e0e0',
+    blue: '#2196F3',
+    green: '#4CAF50',
+    yellow: '#FFC107',
+    red: '#F44336',
+    purple: '#9C27B0',
+    orange: '#FF9800',
+    teal: '#009688',
+    pink: '#E91E63',
+    brown: '#795548',
+    gray: '#9E9E9E',
+    black: '#000000',
+  }
+
+  // Return the hex color if it's already a hex value
+  if (colorName.startsWith('#')) {
+    return colorName
+  }
+
+  // Return the mapped color or a default gray if not found
+  return colorMap[colorName.toLowerCase()] || '#e0e0e0'
+}
+
+// Helper function to get contrasting text color based on background color
+const getContrastColor = (hexColor: string) => {
+  // If the color is light, return dark text color, otherwise return light text
+  const r = parseInt(hexColor.slice(1, 3), 16)
+  const g = parseInt(hexColor.slice(3, 5), 16)
+  const b = parseInt(hexColor.slice(5, 7), 16)
+  const brightness = (r * 299 + g * 587 + b * 114) / 1000
+  return brightness > 128 ? '#000000' : '#ffffff'
+}
+
+// Close dropdown when clicking outside
+onClickOutside(
+  dropdownRef,
+  () => {
+    isOpen.value = false
+  },
+  { ignore: [containerRef] }
+)
+
+// Watch for dropdown open state and reposition
+watch(isOpen, (newValue) => {
+  if (newValue) {
+    nextTick(() => {
+      positionDropdown()
+    })
+  }
+})
+
+// Close dropdown when window is scrolled or resized
+onMounted(() => {
+  window.addEventListener('scroll', handleScroll, { passive: true })
+  window.addEventListener('resize', handleResize, { passive: true })
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('scroll', handleScroll)
+  window.removeEventListener('resize', handleResize)
+})
+
+const handleScroll = () => {
+  if (isOpen.value) {
+    positionDropdown()
+  }
+}
+
+const handleResize = () => {
+  if (isOpen.value) {
+    positionDropdown()
+  }
+}
+</script>
+
+<style scoped>
+.tag-multiselect {
+  position: relative;
+  min-width: 250px;
+  max-width: 400px; /* Maximum width for the widget */
+  width: 100%;
+  z-index: 1;
+  font-size: 0.9375rem;
+  line-height: 1.5;
+}
+
+.select-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  background-color: white;
+  cursor: pointer;
+  min-height: 42px;
+  gap: 0.5rem;
+  width: 100%;
+  box-sizing: border-box;
+  transition:
+    border-color 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out;
+  overflow: hidden; /* Ensure content doesn't overflow the rounded corners */
+}
+
+.select-header:focus-within {
+  border-color: #4d90fe;
+  box-shadow: 0 0 0 1px #4d90fe;
+  outline: none;
+}
+
+.select-header:hover {
+  border-color: #b3b3b3;
+}
+
+.selected-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+  flex-grow: 1;
+  min-height: 1.5rem;
+  align-items: center;
+  min-width: 0; /* Prevents flex items from overflowing */
+  overflow: hidden;
+  max-height: 100px; /* Maximum height before scrolling */
+  overflow-y: auto; /* Add scrollbar if content is too tall */
+  padding: 0.1rem 0; /* Add some vertical padding */
+  align-content: flex-start; /* Align wrapped lines to the start */
+}
+
+.placeholder {
+  color: #9e9e9e;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  padding: 0.25rem 0;
+}
+
+.chips-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  align-items: center;
+  width: 100%;
+  padding: 0.2rem 0;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  padding: 0 10px;
+  border-radius: 3px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  background-color: var(--tag-bg, #e0e0e0);
+  color: var(--tag-text, #333);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  position: relative;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  cursor: default;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.chip:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+}
+
+.chip-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-right: 0.25rem;
+}
+
+.chip-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 0.25rem;
+  background: none;
+  border: none;
+  width: 14px;
+  height: 14px;
+  padding: 0;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 0.9rem;
+  line-height: 1;
+  opacity: 0.7;
+  color: inherit;
+  transition: all 0.15s ease;
+}
+
+.chip-remove:hover {
+  opacity: 1;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.chip-remove:active {
+  transform: scale(0.9);
+}
+
+.dropdown-icon {
+  margin-left: 0.5rem;
+  font-size: 0.7rem;
+  color: #666;
+  transition: transform 0.2s ease;
+}
+
+.dropdown-icon.open {
+  transform: rotate(180deg);
+}
+
+.dropdown-portal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 9999;
+  pointer-events: none;
+}
+
+.dropdown-content {
+  position: absolute;
+  background: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  max-height: min(400px, 70vh);
+  min-width: 250px;
+  width: auto;
+  overflow-y: auto;
+  z-index: 9999;
+  pointer-events: auto;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  will-change: transform;
+}
+
+.search-container {
+  padding: 0.5rem;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.search-input {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  font-size: 0.9rem;
+}
+
+.tags-list {
+  padding: 0.5rem 0;
+}
+
+.tag-option {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  position: relative;
+  transition: background-color 0.1s ease;
+}
+
+.tag-option:hover {
+  background-color: #f5f5f5;
+}
+
+.tag-color {
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+  margin-right: 0.75rem;
+  flex-shrink: 0;
+}
+
+.tag-name {
+  flex-grow: 1;
+  margin-right: 1.5rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.checkmark {
+  position: absolute;
+  right: 1rem;
+  color: #3498db;
+  font-weight: bold;
+}
+
+.no-results {
+  padding: 0.75rem 1rem;
+  color: #666;
+  text-align: center;
+  font-style: italic;
+}
+
+.dropdown-actions {
+  padding: 0.5rem;
+  border-top: 1px solid #e0e0f0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.action-btn {
+  padding: 0.25rem 0.5rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 3px;
+  background: #f8f9fa;
+  color: #2c3e50;
+  font-size: 0.8rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.action-btn:hover {
+  background: #e9ecef;
+  border-color: #ced4da;
+}
+
+.action-btn.select-all {
+  background: #e8f4fd;
+  border-color: #b8d8f8;
+  color: #0d6efd;
+}
+
+.action-btn.select-none {
+  background: #f8e8e8;
+  border-color: #f8b8b8;
+  color: #dc3545;
+}
+
+.action-btn.select-all:hover {
+  background: #d0e7ff;
+}
+
+.action-btn.select-none:hover {
+  background: #ffd6d6;
+}
+
+.clear-btn {
+  background: none;
+  border: none;
+  color: #3498db;
+  font-size: 0.8rem;
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  border-radius: 3px;
+  transition: background-color 0.2s ease;
+}
+
+.clear-btn:hover {
+  background-color: #f5f5f5;
+  text-decoration: underline;
+}
+</style>
diff --git a/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue b/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
index ef2702c..c80c78a 100644
--- a/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
+++ b/src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue
@@ -1,21 +1,207 @@
 <template>
+  <!-- Bulk Actions Widget -->
+  <BulkActionsWidget
+    :selected-ids="selectedAppointments"
+    singular-label="Termin"
+    plural-label="Termine"
+    @clear-selection="clearSelection"
+  >
+    <template #actions="{ selectedCount }">
+      <div class="extend-section">
+        <label for="extension-months">Verlängern um:</label>
+        <select id="extension-months" v-model="extensionMonths" class="ct-select">
+          <option value="3">3 Monate</option>
+          <option value="6">6 Monate</option>
+          <option value="12">12 Monate</option>
+          <option value="18">18 Monate</option>
+          <option value="24">24 Monate</option>
+        </select>
+      </div>
+      <button
+        @click="handleExtendAppointments"
+        :disabled="isProcessing"
+        class="bulk-action-btn success"
+      >
+        <span v-if="isProcessing" class="action-spinner"></span>
+        {{ isProcessing ? 'Verlängere...' : `${selectedCount} Termine verlängern` }}
+      </button>
+    </template>
+  </BulkActionsWidget>
+
+  <!-- Appointment Details Modal -->
+  <div v-if="selectedAppointment" class="modal-overlay">
+    <div class="modal-content" @click.stop>
+      <div class="modal-header">
+        <h3>{{ selectedAppointment.base?.title || 'Termin' }}</h3>
+        <button class="close-btn" @click="selectedAppointment = null">&times;</button>
+      </div>
+      <div class="modal-body">
+        <div class="appointment-details">
+          <!-- Basic Info Card -->
+          <div class="detail-card">
+            <h4>Termindetails</h4>
+            <div class="detail-grid-two-col">
+              <div class="detail-item">
+                <span class="detail-label">Titel:</span>
+                <span>{{ selectedAppointment.base?.title || '-' }}</span>
+              </div>
+              <div class="detail-item" v-if="selectedAppointment.base?.subtitle">
+                <span class="detail-label">Untertitel:</span>
+                <span>{{ selectedAppointment.base.subtitle }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="detail-label">Kalender:</span>
+                <div class="calendar-badge">
+                  <span
+                    class="calendar-color"
+                    :style="{ backgroundColor: selectedAppointment.base?.calendar?.color }"
+                  ></span>
+                  <span>{{ selectedAppointment.base?.calendar?.name || '-' }}</span>
+                </div>
+              </div>
+              <div class="detail-item">
+                <span class="detail-label">Serienbeginn:</span>
+                <span>{{ formatDate(selectedAppointment.base?.startDate) }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="detail-label">Serienende:</span>
+                <span>{{ getEffectiveEndDate(selectedAppointment) }}</span>
+              </div>
+              <div class="detail-item" v-if="selectedAppointment.base?.address">
+                <span class="detail-label">Adresse:</span>
+                <span>{{ formatAddress(selectedAppointment.base.address) }}</span>
+              </div>
+              <div class="detail-item" v-if="selectedAppointment.base?.link">
+                <span class="detail-label">Link:</span>
+                <a :href="selectedAppointment.base.link" target="_blank" class="appointment-link">
+                  {{ selectedAppointment.base.link }}
+                </a>
+              </div>
+            </div>
+          </div>
+
+          <!-- Series Information Card -->
+          <div class="detail-card" v-if="selectedAppointment.base?.repeatId">
+            <h4>Serientermin</h4>
+            <div class="detail-grid-two-col">
+              <div class="detail-item">
+                <span class="detail-label">Serie:</span>
+                <span>
+                  {{ getRepetitionText(selectedAppointment.base) }}
+                </span>
+              </div>
+            </div>
+
+            <!-- Exceptions -->
+            <div class="detail-list" v-if="selectedAppointment.base.exceptions?.length">
+              <div class="detail-list-header">
+                <span class="detail-label">
+                  Ausnahmen ({{ selectedAppointment.base.exceptions.length }}):
+                </span>
+                <button
+                  v-if="selectedAppointment.base.exceptions.length > 10"
+                  @click="showAllExceptions = !showAllExceptions"
+                  class="toggle-btn"
+                >
+                  {{ showAllExceptions ? 'Weniger anzeigen' : 'Alle anzeigen' }}
+                </button>
+              </div>
+              <div class="date-chips">
+                <span
+                  v-for="(exception, index) in displayedExceptions"
+                  :key="exception.id || index"
+                  class="date-chip"
+                >
+                  {{ formatDate(exception.date) }}
+                </span>
+              </div>
+            </div>
+
+            <!-- Additional Dates -->
+            <div class="detail-list" v-if="selectedAppointment.base.additionals?.length">
+              <span class="detail-label">Weitere Termine:</span>
+              <div class="date-chips">
+                <span
+                  v-for="additional in selectedAppointment.base.additionals"
+                  :key="additional.id"
+                  class="date-chip"
+                >
+                  {{ formatDate(additional.date) }}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Tags Card -->
+          <div class="detail-card" v-if="selectedAppointment.tags?.length">
+            <h4>Tags</h4>
+            <div class="tags-container">
+              <span
+                v-for="tag in [...selectedAppointment.tags].sort((a, b) =>
+                  a.name.localeCompare(b.name)
+                )"
+                :key="tag.id"
+                class="tag-badge"
+                :style="{
+                  '--tag-bg': getTagColor(tag.color),
+                  '--tag-text': getContrastColor(getTagColor(tag.color)),
+                }"
+              >
+                {{ tag.name }}
+              </span>
+            </div>
+          </div>
+
+          <!-- Description Card -->
+          <div class="detail-card" v-if="selectedAppointment.base?.description">
+            <h4>Beschreibung</h4>
+            <div class="description-content" v-html="selectedAppointment.base.description"></div>
+          </div>
+
+          <!-- Image Card -->
+          <div class="detail-card" v-if="selectedAppointment.base?.image?.imageUrl">
+            <h4>Bild</h4>
+            <img
+              :src="selectedAppointment.base.image.imageUrl"
+              :alt="selectedAppointment.base?.title"
+              class="appointment-image"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <a
+          :href="getAppointmentUrl(selectedAppointment)"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="ct-btn ct-btn-primary"
+        >
+          In ChurchTools öffnen
+        </a>
+        <button class="ct-btn ct-btn-outline" @click="selectedAppointment = null">Schließen</button>
+      </div>
+    </div>
+  </div>
+
   <AdminTable
     ref="adminTableRef"
     :data="appointments"
     :loading="isLoading"
     :error="error"
     :columns="tableColumns"
-    row-key="id"
+    row-key="seriesId"
     title="auslaufende Terminserien - Admin Panel"
     description="Überwachung und Verwaltung aller auslaufenden Terminserien"
     searchable
     search-placeholder="Suche nach ID, Titel oder Kalender..."
-    :search-fields="['id', 'base.title', 'base.calendar.name']"
-    default-sort-field="id"
+    :search-fields="['seriesId', 'base.title', 'base.calendar.name']"
+    default-sort-field="seriesId"
     loading-text="Lade auslaufende Terminserien..."
     empty-text="Keine auslaufenden Termine gefunden."
+    selectable
     @retry="refreshData"
     @reload="refreshData"
+    @selection-change="handleSelectionChange"
   >
     <!-- Header Controls -->
     <template #header-controls>
@@ -25,13 +211,12 @@
           <select v-model="daysInAdvance" @change="refreshData" class="ct-select">
             <option value="alle">alle</option>
             <option value="1">1</option>
-            <option value="7">7</option>
-            <option value="14">14</option>
-            <option value="30">30</option>
-            <option value="60">60</option>
-            <option value="90">90</option>
-            <option value="180">180</option>
-            <option value="365">365</option>
+            <option value="14">14 Tage</option>
+            <option value="60">60 Tage</option>
+            <option value="180">6 Monate</option>
+            <option value="365">12 Monate</option>
+            <option value="450">15 Monate</option>
+            <option value="550">18 Monate</option>
           </select>
           <span v-if="daysInAdvance !== 'alle'">Tagen enden</span>
           <span v-else>Termine anzeigen</span>
@@ -49,6 +234,14 @@
           </option>
         </select>
       </div>
+
+      <div class="filter-container">
+        <TagMultiSelect
+          v-model="selectedTagIds"
+          :tags="appointmentTags"
+          @update:modelValue="refreshData"
+        />
+      </div>
       <div class="filter-container">
         <select v-model="statusFilter" class="ct-select filter-select">
           <option value="">Alle Status</option>
@@ -77,7 +270,7 @@
 
     <!-- Custom Cell Rendering -->
     <template #cell-id="{ item }">
-      <span class="id-cell">{{ item.id || item.base?.id || 'NO_ID' }}</span>
+      <span class="id-cell">{{ item.seriesId || item.base?.id || 'NO_ID' }}</span>
     </template>
 
     <template #cell-title="{ item }">
@@ -106,16 +299,38 @@
       {{ getEffectiveEndDate(item) }}
     </template>
 
+    <template #cell-tags="{ item }">
+      <div class="appointment-tags">
+        <template v-if="item.tags && item.tags.length > 0">
+          <div class="tags-container">
+            <div
+              v-for="tag in [...item.tags].sort((a, b) => a.name.localeCompare(b.name))"
+              :key="tag.id"
+              class="tag-badge"
+              :style="{
+                '--tag-bg': getTagColor(tag.color),
+                '--tag-text': getContrastColor(getTagColor(tag.color)),
+              }"
+              :title="tag.description"
+            >
+              {{ tag.name }}
+            </div>
+          </div>
+        </template>
+        <span v-else class="no-tags">-</span>
+      </div>
+    </template>
+
     <template #cell-actions="{ item }">
-      <a
-        :href="getAppointmentUrl(item)"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="ct-btn ct-btn-sm ct-btn-outline"
-        title="Termin in ChurchTools öffnen"
-      >
-        Öffnen
-      </a>
+      <div class="action-buttons">
+        <button
+          @click="showAppointmentDetails(item)"
+          class="ct-btn ct-btn-sm ct-btn-outline"
+          title="Details anzeigen"
+        >
+          Details
+        </button>
+      </div>
     </template>
   </AdminTable>
 </template>
@@ -123,10 +338,20 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, watch } from 'vue'
 import type { DashboardModule } from '@/types/modules'
+import TagMultiSelect from '@/components/common/TagMultiSelect.vue'
+import BulkActionsWidget from '@/components/common/BulkActionsWidget.vue'
 import type { TableColumn } from '@/types/table'
-import { findExpiringSeries, getAppointmentUrl, type Appointment } from '@/services/churchtools'
+import {
+  findExpiringSeries,
+  getAppointmentUrl,
+  fetchAppointmentSeries,
+  type Appointment,
+} from '@/services/churchtools'
 import { useExpiringAppointments } from '@/composables/useExpiringAppointments'
+import { useTags } from '@/composables/useTags'
+import { useBulkAppointmentActions } from '@/composables/useBulkAppointmentActions'
 import AdminTable from '@/components/common/AdminTable.vue'
+import { useToast } from '@/composables/useToast'
 
 defineProps<{
   module: DashboardModule
@@ -135,24 +360,275 @@ defineProps<{
 // Configuration
 const DAYS_TO_SHOW = 90
 
-// Use cached appointments data from TanStack Query
-const {
-  data: cachedAppointments,
-  isLoading: cacheLoading,
-  error: cacheError,
-  refetch,
-} = useExpiringAppointments()
-
 // Local state
 const localLoading = ref(false)
 const localError = ref<string | null>(null)
 const calendarFilter = ref('')
 const statusFilter = ref('')
 const daysInAdvance = ref('alle') // Default to "alle"
+const selectedTagIds = ref<number[]>([])
 
-// AdminTable reference
+// Selection state
+const selectedAppointments = ref<number[]>([])
 const adminTableRef = ref()
 
+// Bulk actions
+const { isProcessing, extendAppointments } = useBulkAppointmentActions()
+const extensionMonths = ref(12)
+
+// Handle selection changes from AdminTable
+const handleSelectionChange = (selectedIds: number[]) => {
+  selectedAppointments.value = selectedIds
+}
+
+// Modal state
+const selectedAppointment = ref<any>(null)
+const showAllExceptions = ref(false)
+
+// Show appointment details in modal
+const showAppointmentDetails = async (appointment: any) => {
+  const startTime = performance.now()
+  console.log('🔍 Opening appointment details...')
+
+  // Show modal immediately with preview data
+  selectedAppointment.value = appointment
+  showAllExceptions.value = false
+
+  try {
+    // Fetch full appointment series data
+    const appointmentId = appointment.base?.id || appointment.seriesId
+    const startDate = appointment.base?.startDate?.split('T')[0] || appointment.base?.startDate
+
+    console.log(`📡 Fetching series ${appointmentId} with startDate ${startDate}`)
+    const fetchStart = performance.now()
+
+    if (appointmentId && startDate) {
+      const fullData = await fetchAppointmentSeries(appointmentId, startDate)
+      const fetchEnd = performance.now()
+      console.log(`✅ API call took ${(fetchEnd - fetchStart).toFixed(0)}ms`)
+      console.log('📦 Full data structure:', fullData)
+      console.log('📦 Has base?', !!fullData.base)
+      console.log('📦 Has calculated?', !!fullData.calculated)
+      console.log('📦 Has tags?', !!fullData.tags)
+
+      // Update with full data
+      const updateStart = performance.now()
+
+      // The API returns { appointment: { base, calculated } }
+      const appointmentData = fullData.appointment || fullData
+      selectedAppointment.value = {
+        base: appointmentData.base,
+        calculated: appointmentData.calculated,
+        tags: appointmentData.base?.tags || appointment.tags,
+        seriesId: appointmentData.base?.id,
+      }
+
+      const updateEnd = performance.now()
+      console.log(`✅ Data update took ${(updateEnd - updateStart).toFixed(0)}ms`)
+      console.log('📦 Updated appointment:', selectedAppointment.value)
+    }
+
+    const totalTime = performance.now() - startTime
+    console.log(`✅ Total time: ${totalTime.toFixed(0)}ms`)
+  } catch (error) {
+    console.error('❌ Error loading appointment details:', error)
+    // Keep showing preview data if loading fails
+  }
+}
+
+// Computed property for displayed exceptions
+const displayedExceptions = computed(() => {
+  if (!selectedAppointment.value?.base?.exceptions) return []
+  const exceptions = selectedAppointment.value.base.exceptions
+  if (showAllExceptions.value || exceptions.length <= 10) {
+    return exceptions
+  }
+  return exceptions.slice(0, 10)
+})
+
+// Format address
+const formatAddress = (address: any) => {
+  if (!address) return '-'
+  if (typeof address === 'string') return address
+
+  const parts = []
+  if (address.street) parts.push(address.street)
+  if (address.addition) parts.push(address.addition)
+  if (address.zip || address.city) {
+    const cityPart = [address.zip, address.city].filter(Boolean).join(' ')
+    parts.push(cityPart)
+  }
+
+  return parts.join(', ') || '-'
+}
+
+// Format date for display (date only)
+const formatDate = (dateInput: string | Date | null | undefined | { date: string }) => {
+  if (!dateInput) return 'Nicht angegeben'
+
+  try {
+    let date: Date
+    let dateString: string | Date = dateInput
+
+    // Handle Proxy objects by converting to plain object
+    if (dateInput && typeof dateInput === 'object' && 'date' in dateInput) {
+      dateString = (dateInput as { date: string }).date
+    }
+
+    if (dateString instanceof Date) {
+      date = dateString
+    } else {
+      // Handle YYYY-MM-DD format (which is what we get from the API)
+      if (/^\d{4}-\d{2}-\d{2}$/.test(dateString as string)) {
+        date = new Date(dateString + 'T00:00:00')
+      } else {
+        date = new Date(dateString as string)
+      }
+    }
+
+    // Check if date is valid
+    if (isNaN(date.getTime())) {
+      console.error('Invalid date:', dateInput)
+      return 'Ungültiges Datum'
+    }
+
+    return date.toLocaleDateString('de-DE', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+    })
+  } catch (e) {
+    console.error('Error formatting date:', e, 'Input was:', dateInput)
+    return 'Ungültiges Datum'
+  }
+}
+
+// Format date and time for display
+const formatDateTime = (dateString: string | null | undefined) => {
+  if (!dateString) return 'Nicht angegeben'
+
+  try {
+    const date = new Date(dateString)
+    return date.toLocaleString('de-DE', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+    })
+  } catch (e) {
+    console.error('Error formatting date:', e)
+    return 'Ungültiges Datum/Zeit'
+  }
+}
+
+// Get full repetition text based on repeatId and repeatFrequency
+const getRepetitionText = (base: any) => {
+  if (!base.repeatId || base.repeatId === 0) {
+    return 'Keine Wiederholung'
+  }
+
+  if (base.repeatId === 999) {
+    return 'Manuell'
+  }
+
+  const frequency = base.repeatFrequency || 1
+  let typeText = ''
+  let intervalText = ''
+
+  // Determine type based on repeatId
+  switch (base.repeatId) {
+    case 1: // DAILY
+      typeText = frequency === 1 ? 'Täglich' : 'Alle ' + frequency + ' Tage'
+      break
+    case 7: // WEEKLY
+      typeText = frequency === 1 ? 'Wöchentlich' : 'Alle ' + frequency + ' Wochen'
+      break
+    case 31: // MONTHLY_BY_DATE
+      typeText =
+        frequency === 1
+          ? 'Monatlich (am gleichen Tag)'
+          : 'Alle ' + frequency + ' Monate (am gleichen Tag)'
+      break
+    case 32: // MONTHLY_BY_WEEKDAY
+      typeText =
+        frequency === 1
+          ? 'Monatlich (am gleichen Wochentag)'
+          : 'Alle ' + frequency + ' Monate (am gleichen Wochentag)'
+      break
+    case 365: // YEARLY
+      typeText = frequency === 1 ? 'Jährlich' : 'Alle ' + frequency + ' Jahre'
+      break
+    default:
+      typeText = 'Benutzerdefiniert'
+  }
+
+  // Add end date info
+  if (base.repeatUntil) {
+    return typeText + ', bis ' + formatDate(base.repeatUntil)
+  } else {
+    return typeText + ', ohne Enddatum'
+  }
+}
+
+// Format repetition type for display (kept for backward compatibility)
+const formatRepetitionType = (type: string | undefined) => {
+  if (!type) return 'Keine'
+
+  const types: Record<string, string> = {
+    daily: 'Täglich',
+    weekly: 'Wöchentlich',
+    monthly: 'Monatlich',
+    yearly: 'Jährlich',
+    workday: 'Jeden Werktag',
+    custom: 'Benutzerdefiniert',
+  }
+
+  return types[type] || type
+}
+
+const clearSelection = () => {
+  if (adminTableRef.value?.clearSelection) {
+    adminTableRef.value.clearSelection()
+  }
+}
+
+// Bulk action handlers
+const handleExtendAppointments = async () => {
+  if (selectedAppointments.value.length === 0) return
+
+  const result = await extendAppointments(selectedAppointments.value, extensionMonths.value)
+
+  if (result.success > 0) {
+    // Clear selection and refresh data
+    clearSelection()
+    await refreshData()
+  }
+}
+
+const clearAppointmentSelections = () => {
+  selectedAppointments.value = []
+}
+
+// Fetch tags for filtering
+const { data: allTags } = useTags()
+
+// Filter tags to only show appointment tags
+const appointmentTags = computed(() => {
+  return allTags.value?.filter((tag) => tag.domainType === 'appointment') || []
+})
+
+// Use cached appointments data from TanStack Query
+// Load all appointments - tag filtering happens client-side in applyFilters()
+const {
+  data: cachedAppointments,
+  isLoading: cacheLoading,
+  error: cacheError,
+  refetch,
+} = useExpiringAppointments(9999) // Load all appointments
+
+// AdminTable reference is already declared in the selection state
+
 // Data - prefer cached data
 const appointments = ref<Appointment[]>([])
 const isLoading = computed(() => cacheLoading.value || localLoading.value)
@@ -163,7 +639,8 @@ watch(
   cachedAppointments,
   (newCachedAppointments) => {
     if (newCachedAppointments && newCachedAppointments.length > 0) {
-      appointments.value = newCachedAppointments
+      // Apply filters when new data arrives
+      applyFilters()
     }
   },
   { immediate: true }
@@ -171,7 +648,14 @@ watch(
 
 // Table configuration
 const tableColumns: TableColumn[] = [
-  { key: 'id', label: 'ID', sortable: true, resizable: true, width: 55, cellSlot: 'cell-id' },
+  {
+    key: 'seriesId',
+    label: 'Serien-ID',
+    sortable: true,
+    resizable: true,
+    width: 80,
+    cellSlot: 'cell-id',
+  },
   {
     key: 'base.title',
     label: 'Titel',
@@ -204,6 +688,20 @@ const tableColumns: TableColumn[] = [
     width: 180,
     cellSlot: 'cell-endDate',
   },
+  {
+    key: 'base.tags',
+    label: 'Tags',
+    sortable: true,
+    resizable: true,
+    width: 200,
+    cellSlot: 'cell-tags',
+    // Custom sort function to sort by tag names
+    sortFn: (a: any, b: any) => {
+      const tagsA = (a.base.tags || []).map((t: any) => t.name).join(', ')
+      const tagsB = (b.base.tags || []).map((t: any) => t.name).join(', ')
+      return tagsA.localeCompare(tagsB)
+    },
+  },
   { key: 'actions', label: 'Aktionen', resizable: false, width: 120, cellSlot: 'cell-actions' },
 ]
 
@@ -259,24 +757,37 @@ const getAppointmentStatus = (appointment: Appointment): 'active' | 'expiring' |
   return 'active'
 }
 
-// Helper functions
-const formatDate = (dateString: string | null) => {
-  if (!dateString) return 'Nie'
-
-  try {
-    const date = new Date(dateString)
-    return date.toLocaleString('de-DE', {
-      year: 'numeric',
-      month: '2-digit',
-      day: '2-digit',
-      hour: '2-digit',
-      minute: '2-digit',
-    })
-  } catch {
-    return 'Ungültiges Datum'
+// Helper function to map color names to hex values
+const getTagColor = (colorName: string): string => {
+  const colorMap: Record<string, string> = {
+    basic: '#e0e0e0',
+    blue: '#2196F3',
+    green: '#4CAF50',
+    yellow: '#FFC107',
+    red: '#F44336',
+    purple: '#9C27B0',
+    orange: '#FF9800',
+    teal: '#009688',
+    pink: '#E91E63',
+    brown: '#795548',
+    gray: '#9E9E9E',
+    black: '#000000',
   }
+  return colorMap[colorName] || '#e0e0e0'
+}
+
+// Helper function to get contrasting text color based on background color
+const getContrastColor = (hexColor: string) => {
+  // If the color is light, return dark text color, otherwise return light text
+  const r = parseInt(hexColor.slice(1, 3), 16)
+  const g = parseInt(hexColor.slice(3, 5), 16)
+  const b = parseInt(hexColor.slice(5, 7), 16)
+  const brightness = (r * 299 + g * 587 + b * 114) / 1000
+  return brightness > 128 ? '#000000' : '#ffffff'
 }
 
+// Helper functions - formatDate is defined above
+
 const getEffectiveEndDate = (appointment: Appointment) => {
   if (appointment.base.repeatUntil) {
     return formatDate(appointment.base.repeatUntil)
@@ -304,10 +815,10 @@ const getEffectiveEndDate = (appointment: Appointment) => {
 
 // Filter functions
 const clearFilters = () => {
-  // Reset own filters
   calendarFilter.value = ''
   statusFilter.value = ''
   daysInAdvance.value = 'alle'
+  selectedTagIds.value = []
 
   // Reset AdminTable search
   if (adminTableRef.value?.clearSearch) {
@@ -315,19 +826,28 @@ const clearFilters = () => {
   }
 }
 
-// Data loading
-const fetchData = async () => {
+// Filter functions
+const applyFilters = () => {
+  console.log('🔍 applyFilters called with:', {
+    daysInAdvance: daysInAdvance.value,
+    calendarFilter: calendarFilter.value,
+    statusFilter: statusFilter.value,
+    selectedTagIds: selectedTagIds.value,
+    cachedAppointmentsCount: cachedAppointments.value?.length || 0,
+  })
+
   localLoading.value = true
   localError.value = null
 
   try {
-    const expiringSeries = await findExpiringSeries(300000)
-    if (expiringSeries.length > 0) {
-      // First appointment structure available
+    if (!cachedAppointments.value) {
+      console.log('⚠️ No cached appointments available')
+      return
     }
 
     // Apply filters
-    let filtered = expiringSeries
+    let filtered = [...cachedAppointments.value]
+    console.log('📊 Starting with', filtered.length, 'appointments')
 
     // Filter by days in advance
     const now = new Date()
@@ -379,7 +899,40 @@ const fetchData = async () => {
       )
     }
 
-    appointments.value = filtered
+    // Filter by tags
+    if (selectedTagIds.value.length > 0) {
+      console.log('🏷️ Filtering by tags:', selectedTagIds.value)
+      console.log('📊 Before tag filter:', filtered.length, 'appointments')
+      filtered = filtered.filter((appointment) => {
+        const appointmentTags = appointment.base.tags || []
+        const hasMatchingTag = selectedTagIds.value.some((tagId) =>
+          appointmentTags.some((tag: any) => tag.id === tagId)
+        )
+        return hasMatchingTag
+      })
+      console.log('📊 After tag filter:', filtered.length, 'appointments')
+    }
+
+    // Normalize appointments to ensure seriesId exists for row-key
+    appointments.value = filtered.map((appointment) => ({
+      ...appointment,
+      seriesId: appointment.base?.id,
+    }))
+    console.log('✅ Applied filters, result:', appointments.value.length, 'appointments')
+  } catch (err) {
+    console.error('❌ Error filtering appointments:', err)
+    localError.value = 'Fehler beim Filtern der Termine.'
+  } finally {
+    localLoading.value = false
+  }
+}
+
+// Fetch data using the composable
+const fetchData = async () => {
+  localLoading.value = true
+  try {
+    await refetch()
+    applyFilters()
   } catch (err) {
     console.error('Error fetching appointments:', err)
     localError.value = 'Fehler beim Laden der Termine. Bitte versuchen Sie es erneut.'
@@ -388,16 +941,22 @@ const fetchData = async () => {
   }
 }
 
+// Refresh data function
 const refreshData = () => {
-  refetch() // Refresh cached data
-  fetchData() // Also refresh local data if needed
+  refetch()
 }
 
+// Watch for changes to filters and apply them
+watch([daysInAdvance, calendarFilter, statusFilter, selectedTagIds], () => {
+  applyFilters()
+})
+
 // Initialize component
 onMounted(() => {
-  // Only fetch if no cached data available
   if (!cachedAppointments.value || cachedAppointments.value.length === 0) {
     fetchData()
+  } else {
+    applyFilters()
   }
 })
 </script>
@@ -441,6 +1000,19 @@ onMounted(() => {
 
 .filter-container {
   min-width: 180px;
+  margin-bottom: 0.5rem;
+}
+
+/* Style for multi-select dropdown */
+select[multiple] {
+  min-height: 38px;
+  padding: 0.25rem;
+}
+
+select[multiple] option {
+  padding: 0.25rem 0.5rem;
+  margin: 0.125rem 0;
+  border-radius: 3px;
 }
 
 .filter-select {
@@ -531,6 +1103,348 @@ onMounted(() => {
   background-color: rgba(52, 152, 219, 0.1);
 }
 
+/* Modal Styles */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow-y: auto;
+}
+
+.modal-content {
+  background: white;
+  border-radius: 8px;
+  width: 100%;
+  max-width: 800px;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
+  color: #333; /* Set default text color */
+}
+
+.modal-header {
+  padding: 20px;
+  border-bottom: 1px solid #e5e7eb;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #f9fafb;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+
+.modal-header h3 {
+  margin: 0;
+  color: #1f2937;
+  font-size: 1.25rem;
+}
+
+.modal-body {
+  padding: 1.5rem;
+  background: #f9fafb;
+  max-height: 70vh;
+  overflow-y: auto;
+}
+
+.appointment-details {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* Detail Cards */
+.detail-card {
+  background: white;
+  border-radius: 8px;
+  padding: 1.25rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.detail-card h4 {
+  margin: 0 0 1rem 0;
+  color: #1f2937;
+  font-size: 1rem;
+  font-weight: 600;
+  border-bottom: 2px solid #e5e7eb;
+  padding-bottom: 0.5rem;
+}
+
+/* Two-column grid for details */
+.detail-grid-two-col {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
+
+@media (max-width: 768px) {
+  .detail-grid-two-col {
+    grid-template-columns: 1fr;
+  }
+}
+
+.detail-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.detail-label {
+  font-weight: 600;
+  color: #6b7280;
+  font-size: 0.875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+
+.detail-item > span:not(.detail-label) {
+  color: #1f2937;
+  font-size: 0.95rem;
+}
+
+/* List items */
+.detail-list {
+  margin-top: 1rem;
+}
+
+.detail-list .detail-label {
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+/* Date chips */
+.date-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.date-chip {
+  display: inline-block;
+  padding: 0.375rem 0.75rem;
+  background: #f3f4f6;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  color: #374151;
+  border: 1px solid #e5e7eb;
+}
+
+/* Detail list header */
+.detail-list-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.toggle-btn {
+  padding: 0.25rem 0.75rem;
+  background: #f3f4f6;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  font-size: 0.875rem;
+  color: #374151;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.toggle-btn:hover {
+  background: #e5e7eb;
+  border-color: #9ca3af;
+}
+
+/* Calendar badge */
+.calendar-badge {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.calendar-color {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  flex-shrink: 0;
+}
+
+/* Appointment link */
+.appointment-link {
+  color: var(--ct-primary, #3498db);
+  text-decoration: none;
+  word-break: break-all;
+}
+
+.appointment-link:hover {
+  text-decoration: underline;
+}
+
+/* Tags styling */
+.tags-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.tag-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.375rem 0.875rem;
+  background-color: var(--tag-bg) !important;
+  border-radius: 1rem;
+  font-size: 0.85rem;
+  font-weight: 500;
+  line-height: 1.5;
+  white-space: nowrap;
+}
+
+/* Description styling */
+.description-content {
+  color: #374151;
+  font-size: 0.95rem;
+  line-height: 1.6;
+  white-space: pre-wrap;
+}
+
+.description-content :deep(p) {
+  margin: 0 0 0.75rem 0;
+}
+
+.description-content :deep(p:last-child) {
+  margin-bottom: 0;
+}
+
+/* Image styling */
+.appointment-image {
+  width: 100%;
+  max-width: 600px;
+  height: auto;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.modal-footer {
+  padding: 16px 20px;
+  border-top: 1px solid #e5e7eb;
+  background: #f9fafb;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+
+/* Tag styles */
+.tags-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 0.25rem 0;
+}
+
+.tag-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--tag-bg) !important;
+  height: 24px;
+  padding: 0 10px;
+  border-radius: 3px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  background-color: var(--tag-bg, #e0e0e0);
+  color: var(--tag-text, #333);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  position: relative;
+  cursor: help;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+.tag-badge:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+}
+
+.tag-badge[title]:hover::after {
+  content: attr(title);
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  max-width: 300px;
+  width: max-content;
+  transform: translateX(-50%) translateY(-8px);
+  background-color: #2d3748;
+  color: #fff;
+  padding: 0.5rem 0.75rem;
+  border-radius: 4px;
+  font-size: 0.8rem;
+  line-height: 1.4;
+  white-space: normal;
+  z-index: 1000;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.15s ease-out;
+  pointer-events: none;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+  word-wrap: break-word;
+  font-weight: 400;
+  text-align: left;
+}
+
+.tag-badge[title]:hover::before {
+  content: '';
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-3px);
+  border-width: 5px 5px 0 5px;
+  border-style: solid;
+  border-color: #2d3748 transparent transparent transparent;
+  z-index: 1001;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.15s ease-out;
+}
+
+.tag-badge[title]:hover::after,
+.tag-badge[title]:hover::before {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(-50%) translateY(0);
+}
+
+.data-row:hover {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+.data-row.row-selected {
+  background-color: rgba(52, 152, 219, 0.1);
+}
+
+.data-row.row-selected:hover {
+  background-color: rgba(52, 152, 219, 0.15);
+}
+
+.no-tags {
+  color: #9e9e9e;
+  font-style: italic;
+  font-size: 0.875rem;
+  padding: 0.5rem 0;
+  display: inline-block;
+}
+
 .ct-btn-sm {
   padding: 0.5rem 1rem;
   font-size: 0.85rem;
@@ -569,4 +1483,33 @@ onMounted(() => {
     transform: rotate(360deg);
   }
 }
+
+/* Bulk actions widget customization */
+.extend-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.extend-section label {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: var(--ct-text-primary, #2c3e50);
+}
+
+.ct-select {
+  padding: 0.5rem;
+  border: 1px solid var(--ct-border-color, #e0e0e0);
+  border-radius: 4px;
+  font-size: 0.9rem;
+  background: white;
+  cursor: pointer;
+}
+
+.ct-select:focus {
+  outline: none;
+  border-color: var(--ct-primary, #3498db);
+  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
+}
 </style>
diff --git a/src/components/tags/TagsAdmin.vue b/src/components/tags/TagsAdmin.vue
index 8ab8323..2ce5f17 100644
--- a/src/components/tags/TagsAdmin.vue
+++ b/src/components/tags/TagsAdmin.vue
@@ -365,7 +365,14 @@ const tableColumns: TableColumn[] = [
     width: 150,
     cellSlot: 'cell-color',
   },
-  { key: 'description', label: 'Beschreibung', sortable: true, resizable: true, width: 250 },
+  {
+    key: 'description',
+    label: 'Beschreibung',
+    sortable: true,
+    resizable: true,
+    width: 250,
+    cellClass: 'description-cell',
+  },
   {
     key: 'actions',
     label: 'Aktionen',
diff --git a/src/composables/useBulkAppointmentActions.ts b/src/composables/useBulkAppointmentActions.ts
new file mode 100644
index 0000000..cf7dfd2
--- /dev/null
+++ b/src/composables/useBulkAppointmentActions.ts
@@ -0,0 +1,95 @@
+import { ref } from 'vue'
+import { churchtoolsClient } from '@churchtools/churchtools-client'
+import { useToast } from './useToast'
+
+export function useBulkAppointmentActions() {
+  const { showSuccess, showError, showWarning } = useToast()
+  const isProcessing = ref(false)
+  const processedCount = ref(0)
+  const errorCount = ref(0)
+
+  /**
+   * Extend the repeat-until date for multiple appointments
+   */
+  const extendAppointments = async (
+    appointmentIds: number[],
+    extensionMonths: number
+  ): Promise<{ success: number; failed: number }> => {
+    isProcessing.value = true
+    processedCount.value = 0
+    errorCount.value = 0
+
+    const results = {
+      success: 0,
+      failed: 0,
+    }
+
+    for (const appointmentId of appointmentIds) {
+      try {
+        // Fetch current appointment data
+        const response: any = await churchtoolsClient.get(`/appointments/${appointmentId}`)
+        const appointment = response.appointment || response
+
+        if (!appointment || !appointment.base) {
+          console.error(`Appointment ${appointmentId} not found or has no base data`)
+          results.failed++
+          errorCount.value++
+          continue
+        }
+
+        const base = appointment.base
+
+        // Calculate new repeat-until date
+        let newRepeatUntil: string
+
+        if (base.repeatUntil) {
+          // Extend existing repeatUntil
+          const currentDate = new Date(base.repeatUntil)
+          currentDate.setMonth(currentDate.getMonth() + extensionMonths)
+          newRepeatUntil = currentDate.toISOString().split('T')[0]
+        } else {
+          // No repeatUntil set, extend from start date
+          const startDate = new Date(base.startDate)
+          startDate.setMonth(startDate.getMonth() + extensionMonths)
+          newRepeatUntil = startDate.toISOString().split('T')[0]
+        }
+
+        // Update appointment
+        await churchtoolsClient.patch(`/appointments/${appointmentId}`, {
+          repeatUntil: newRepeatUntil,
+        })
+
+        results.success++
+        processedCount.value++
+      } catch (error) {
+        console.error(`Failed to extend appointment ${appointmentId}:`, error)
+        results.failed++
+        errorCount.value++
+      }
+    }
+
+    isProcessing.value = false
+
+    // Show result toast
+    if (results.success > 0 && results.failed === 0) {
+      showSuccess(
+        `${results.success} ${results.success === 1 ? 'Termin' : 'Termine'} erfolgreich verlängert`
+      )
+    } else if (results.success > 0 && results.failed > 0) {
+      showWarning(
+        `${results.success} ${results.success === 1 ? 'Termin' : 'Termine'} verlängert, ${results.failed} fehlgeschlagen`
+      )
+    } else {
+      showError(`Fehler beim Verlängern der Termine`)
+    }
+
+    return results
+  }
+
+  return {
+    isProcessing,
+    processedCount,
+    errorCount,
+    extendAppointments,
+  }
+}
diff --git a/src/composables/useExpiringAppointments.ts b/src/composables/useExpiringAppointments.ts
index f694cb8..201b34c 100644
--- a/src/composables/useExpiringAppointments.ts
+++ b/src/composables/useExpiringAppointments.ts
@@ -6,9 +6,11 @@ export function useExpiringAppointments(daysInAdvance: number = 300000) {
   if (import.meta.env.DEV) {
     console.log('📅 Setting up expiring appointments query for', daysInAdvance, 'days')
   }
+
+  // Load ALL appointments without tag filtering - filtering happens client-side
   return useQuery({
     queryKey: ['expiring-appointments', daysInAdvance],
-    queryFn: () => findExpiringSeries(daysInAdvance),
+    queryFn: () => findExpiringSeries(daysInAdvance, []),
     staleTime: 30 * 60 * 1000, // 30 minutes - appointments don't change often
     gcTime: 60 * 60 * 1000, // 1 hour cache time
     refetchInterval: 15 * 60 * 1000, // Background update every 15 minutes
diff --git a/src/services/churchtools.ts b/src/services/churchtools.ts
index c760df4..5526c87 100644
--- a/src/services/churchtools.ts
+++ b/src/services/churchtools.ts
@@ -30,22 +30,44 @@ export async function fetchCalendars(): Promise<Calendar[]> {
   return response || []
 }
 
+/**
+ * Fetches a single appointment series with all details
+ */
+export async function fetchAppointmentSeries(
+  appointmentId: number,
+  startDate: string
+): Promise<any> {
+  const response = await churchtoolsClient.get(
+    `/calendars/appointments/${appointmentId}/${startDate}`
+  )
+  return response
+}
+
 /**
  * Fetches appointments for a specific calendar within a date range
  */
 export async function fetchAppointments(
   calendarIds: number[],
   startDate: Date,
-  endDate: Date
+  endDate: Date,
+  tagIds: number[] = []
 ): Promise<Appointment[]> {
   const start = startDate.toISOString().split('T')[0]
   const end = endDate.toISOString().split('T')[0]
 
-  const response = await churchtoolsClient.get<Appointment[]>('/calendars/appointments', {
+  const params: Record<string, any> = {
     from: start,
     to: end,
     'calendar_ids[]': calendarIds,
-  })
+    include: ['tags'],
+  }
+
+  // Add tag filter if tags are provided
+  if (tagIds.length > 0) {
+    params['tag_ids[]'] = tagIds
+  }
+
+  const response = await churchtoolsClient.get<Appointment[]>('/calendars/appointments', params)
 
   // Ensure we always return an array of Appointment objects
   return Array.isArray(response) ? response : []
@@ -69,7 +91,10 @@ export async function identifyCalendars(): Promise<{
 /**
  * Finds all recurring appointment series that are about to end
  */
-export async function findExpiringSeries(daysInAdvance: number = 60): Promise<Appointment[]> {
+export async function findExpiringSeries(
+  daysInAdvance: number = 60,
+  tagIds: number[] = []
+): Promise<Appointment[]> {
   const now = new Date()
   const endDate = new Date()
   endDate.setDate(now.getDate() + daysInAdvance)
@@ -88,14 +113,42 @@ export async function findExpiringSeries(daysInAdvance: number = 60): Promise<Ap
     (v, i, a) => a.indexOf(v) === i
   ) // Remove duplicates
 
-  // Fetching appointments for calendar IDs
-  // Fetch appointments
-  const appointments = await fetchAppointments(allCalendarIds, now, endDate)
+  // Fetching appointments for calendar IDs with optional tag filtering and include tags
+  const appointments = await fetchAppointments(allCalendarIds, now, endDate, tagIds)
+
+  // Log the first appointment to debug tags
+  if (appointments.length > 0) {
+    console.log('First appointment with tags:', JSON.parse(JSON.stringify(appointments[0])))
+  }
+
+  // Process appointments to ensure consistent structure with tags
+  const processedAppointments = appointments.map((appointment) => {
+    // Get tags from the root level if they exist
+    const tags = 'tags' in appointment ? appointment.tags : []
+
+    // Return the appointment with tags properly set in base.tags
+    // Handle both AppointmentBase and AppointmentCalculated
+    if ('base' in appointment) {
+      return {
+        ...appointment,
+        base: {
+          ...(appointment as any).base,
+          tags: Array.isArray(tags) ? tags : [],
+        },
+      }
+    } else {
+      // For AppointmentBase, add tags directly
+      return {
+        ...appointment,
+        tags: Array.isArray(tags) ? tags : [],
+      }
+    }
+  })
 
   // Find recurring appointments that are ending soon
-  const expiringSeries = appointments.filter((appointment) => {
+  const expiringSeries = processedAppointments.filter((appointment) => {
     // Handle both AppointmentBase and AppointmentCalculated types
-    const base = 'base' in appointment ? appointment.base : appointment
+    const base = 'base' in appointment ? (appointment as any).base : appointment
 
     // Only consider recurring appointments (must have repeatId)
     if (!base.repeatId) return false
@@ -108,9 +161,9 @@ export async function findExpiringSeries(daysInAdvance: number = 60): Promise<Ap
     } else if (base.additionals && Array.isArray(base.additionals) && base.additionals.length > 0) {
       // Find the latest date in additionals
       const latestAdditional = base.additionals
-        .map((additional) => new Date(additional.date || additional.date))
-        .filter((date) => !isNaN(date.getTime()))
-        .sort((a, b) => b.getTime() - a.getTime())[0]
+        .map((additional: any) => new Date(additional.date || additional.startDate))
+        .filter((date: Date) => !isNaN(date.getTime()))
+        .sort((a: Date, b: Date) => b.getTime() - a.getTime())[0]
 
       if (latestAdditional) {
         effectiveEndDate = latestAdditional