diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_searchbar.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_searchbar.scss
index c035bc19..6e1f3cf5 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_searchbar.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_searchbar.scss
@@ -2,7 +2,7 @@
     @apply hidden relative lg:block lg:container lg:px-0 -mt-20 mb-8;
     @apply bg-gradient-to-tr from-ep-primary-light via-ep-primary-medium to-ep-primary-dark;
 
-    &--sticky {
+    &.sticky {
         @apply fixed z-50 top-0 left-0 mt-8 mb-0 inset-x-0 max-w-full shadow-lg;
     }
 }
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss
index e9a6e86a..b2377300 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss
@@ -7,36 +7,32 @@
     @import "base/typography";
     @import "base/images";
 
-    [x-cloak] {
-        @apply hidden;
-    }
-
     [data-rte-content] {
         @import "base/rte-content";
     }
 
-    // LEGACY FROM HERE
-    @import "components/badges";
+    // LEGACY
     @import "components/product";
     @import "components/searchresult";
-    @import "components/slider";
     @import "components/teaserbox";
 }
 
 @layer components {
     @import "~microtip/microtip";
-    @import "components/cookie-consent";
     @import "components/background";
-    @import "components/calendar";
-    @import "components/searchbar";
-    @import "components/herounit";
-    @import "components/map";
-    @import "components/lightbox";
-    @import "components/datepicker";
+    @import "components/badges";
+    @import "components/buttons";
     @import "components/contact-bar";
+    @import "components/cookie-consent";
+    @import "components/calendar";
+    @import "components/datepicker";
+    @import "components/herounit";
+    @import "components/lightbox";
+    @import "components/map";
     @import "components/misc";
+    @import "components/searchbar";
+    @import "components/slider";
     @import "components/tiles";
-    @import "components/buttons"
 }
 
 @layer utilities {
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html
index 604a1d05..c16a757d 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html
@@ -69,14 +69,16 @@
                                 <div class="col-span-2">
                                     <p class="mb-4">
                                         <button class="flex items-center space-x-2"
-                                                x-data="watchlistToggle('{hotel.uid}:{product.uid}')"
-                                                x-bind="trigger">
-                                            <span data-microtip-position="top" x-bind:aria-label="label" role="tooltip">
+                                                data-controller="watchlist-toggle"
+                                                data-watchlist-toggle-key-value="{hotel.uid}:{product.uid}"
+                                                data-action="watchlist-toggle#toggle">
+                                            <span data-microtip-position="top" aria-label="" role="tooltip" data-watchlist-toggle-target="label">
                                                 <svg class="w-5 h-5">
-                                                    <use x-bind:href="onList() ? '#icon-minus-circle' : '#icon-plus-circle'"></use>
+                                                    <use href="#icon-plus-circle"
+                                                         data-watchlist-toggle-target="icon"></use>
                                                 </svg>
                                             </span>
-                                            <span x-text="label"></span>
+                                            <span></span>
                                         </button>
                                     </p>
                                     <p class="mb-4">
@@ -287,16 +289,14 @@
                                         </svg>
                                     </div>
                                     <button class="button button--light button--small hidden md:block"
-                                            x-on:click.prevent="$store.show.modal = 'services-' + row.dateUid"
                                             data-microtip-position="top" aria-label="Alle Inklusivleistungen anzeigen" role="tooltip">
                                         Leistungen
                                     </button>
-                                    <a href="#" x-on:click.prevent="$store.show.modal = 'services-' + row.dateUid"
-                                       class="md:hidden">
+                                    <button class="md:hidden">
                                         <svg class="w-4 h-4">
                                             <use href="#icon-info-circle"></use>
                                         </svg>
-                                    </a>
+                                    </button>
                                 </div>
                             </td>
                             <td class="px-2 py-1 hidden sm:table-cell">
@@ -347,7 +347,6 @@
             </template>
             <template x-for="row in datesRows">
                 <div x-bind:id="'services-' + row.dateUid"
-                     x-show="$store.show.modal === $el.id"
                      x-transition:enter="transition duration-200 ease-in-out"
                      x-transition:enter-start="opacity-0"
                      x-transition:enter-end="opacity-100"
@@ -355,15 +354,17 @@
                      x-transition:leave-start="opacity-100"
                      x-transition:leave-end="opacity-0"
                      x-cloak
-                     class="fixed inset-0 w-full h-full z-50">
-                    <div class="absolute inset-0 w-full h-full bg-overlay-black" x-on:click="$store.show.modal = null"></div>
+                     class="hidden fixed inset-0 w-full h-full z-50">
+                    <div class="absolute inset-0 w-full h-full bg-overlay-black"></div>
                     <div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 bg-white p-8 shadow w-full max-w-3xl rounded">
                         <div class="flex justify-between border-b border-gray-200 pb-2 mb-4">
                             <span class="text-lg font-bold">
                                 Inklusivleistungen
                             </span>
-                            <button x-on:click.prevent="$store.show.modal = null" class="inline-block">
-                                <svg class="w-8 h-8"><use href="#icon-close"></use></svg>
+                            <button class="inline-block">
+                                <svg class="w-8 h-8">
+                                    <use href="#icon-close"></use>
+                                </svg>
                             </button>
                         </div>
                         <table class="table table-striped">
@@ -446,13 +447,11 @@
                         <td class="px-2 py-1">
                             <button x-show="row.roomHasOptionalServices && row.roomAvailable"
                                     class="hidden sm:block button button--light button--small"
-                                    x-on:click.prevent="$store.show.modal = 'optional-services-' + row.roomUid"
                                     data-microtip-position="top" aria-label="Alle Zusatzleistungen anzeigen" role="tooltip">
                                 Optionen
                             </button>
                             <button x-show="row.roomHasOptionalServices && row.roomAvailable"
-                                    class="sm:hidden ep:text-ep-primary"
-                               x-on:click.prevent="$store.show.modal = 'optional-services-' + row.roomUid">
+                                    class="sm:hidden ep:text-ep-primary">
                                 <svg class="w-4 h-4">
                                     <use href="#icon-info-circle"></use>
                                 </svg>
@@ -481,23 +480,23 @@
         </div>
         <template x-for="row in pricesRows">
             <div x-bind:id="'optional-services-' + row.roomUid"
-                 x-show="$store.show.modal === $el.id"
                  x-transition:enter="transition duration-200 ease-in-out"
                  x-transition:enter-start="opacity-0"
                  x-transition:enter-end="opacity-100"
                  x-transition:leave="transition duration-200 ease-in-out"
                  x-transition:leave-start="opacity-100"
                  x-transition:leave-end="opacity-0"
-                 x-cloak
-                 class="fixed inset-0 w-full h-full z-50">
-                <div class="absolute inset-0 w-full h-full bg-overlay-black z-25 flex items-center justify-center" x-on:click="$store.show.modal = null"></div>
+                 class="hidden fixed inset-0 w-full h-full z-50">
+                <div class="absolute inset-0 w-full h-full bg-overlay-black z-25 flex items-center justify-center"></div>
                 <div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 bg-white p-8 shadow w-full max-w-3xl h-128 overflow-y-scroll rounded">
                     <div class="flex justify-between pb-2 mb-4">
                         <span class="text-2xl font-bold">
                             Optionale Zusatzleistungen
                         </span>
-                        <button x-on:click.prevent="$store.show.modal = null" class="inline-block">
-                            <svg class="w-8 h-8"><use href="#icon-close"></use></svg>
+                        <button class="inline-block">
+                            <svg class="w-8 h-8">
+                                <use href="#icon-close"></use>
+                            </svg>
                         </button>
                     </div>
                     <template x-for="section in row.roomOptionalServices">
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchbar.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchbar.html
index 96481bf7..ebf3206d 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchbar.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchbar.html
@@ -14,7 +14,7 @@
             sticky: <f:if condition="{fixed}"><f:then>true</f:then><f:else>false</f:else></f:if>
         </f:format.raw>
         })'>
-            <div class="searchbar {f:if(condition: fixed, then: ' searchbar--sticky')}"{f:if(condition: fixed, else: ' data-controller="sticky" data-sticky-offset-value="650" data-sticky-sticky-class="searchbar--sticky"')}>
+            <div class="searchbar {f:if(condition: fixed, then: ' sticky')}"{f:if(condition: fixed, else: ' data-controller="sticky" data-sticky-offset-value="650" data-sticky-sticky-class="sticky"')}>
                 <f:form action="processSearch" controller="Search" method="post" name="searchParams"
                         object="{searchParams}" pluginName="searchresult" extensionName="epproducts"
                         pageUid="{settings.defaultSearchPageUid}" additionalAttributes="{ref: 'form'}">
@@ -26,20 +26,19 @@
                     <f:form.hidden property="pax" additionalAttributes="{x-model: 'searchParams.pax'}"/>
                     <f:form.hidden property="priceRange" additionalAttributes="{x-model: 'searchParams.priceRange'}"/>
                     <f:form.hidden property="pageUid" additionalAttributes="{x-model: 'searchParams.pageUid'}"/>
-                    <div class="flex" x-bind:class="{'flex-col': !sticky, 'container flex-row items-center space-x-8': sticky}">
-                        <div class="flex items-start justify-between" x-bind:class="{ 'flex-1 py-4': sticky, 'pt-8 px-8': ! sticky }">
+                    <div class="sticky:max-w-screen-xl sticky:mx-auto flex flex-col sticky:flex-row sticky:items-center">
+                        <div class="flex items-start justify-between sticky:flex-1 pt-8 px-8 sticky:py-4 sticky:px-0">
                             <div class="flex-1">
                                 <div class="relative border-b border-r border-white mr-8" x-init="initDatePicker()">
                                     <input type="text"
                                            class="w-full bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase px-2 py-1 cursor-pointer placeholder-white"
                                            placeholder="Zeitraum"
-                                           x-bind:class="loading && 'cursor-not-allowed'"
                                            x-bind:value="dateRangeLabel"
                                            x-on:click.prevent="show = show === 'dateRange' ? null : 'dateRange'"/>
                                     <svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1">
                                         <use href="#icon-calendar"></use>
                                     </svg>
-                                    <div class="absolute top-100 mt-2 left-0 bg-white p-4 shadow-md" x-show="show === 'dateRange'" x-transition x-cloak>
+                                    <div class="absolute top-100 mt-2 left-0 bg-white p-4 shadow-md" x-show="show === 'dateRange'" x-cloak>
                                         <template x-if="datePresets">
                                             <div class="flex items-center justify-between pb-2">
                                                 <template x-for="preset in datePresets">
@@ -72,7 +71,7 @@
                                     <svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1">
                                         <use href="#icon-user-group"></use>
                                     </svg>
-                                    <div class="absolute top-100 mt-2 left-0 bg-white p-4 shadow-md w-full h-48 overflow-y-scroll" x-show="show === 'pax'" x-transition x-cloak>
+                                    <div class="absolute top-100 mt-2 left-0 bg-white p-4 shadow-md w-full h-48 overflow-y-scroll" x-show="show === 'pax'" x-cloak>
                                         <ul class="m-0 p-0">
                                             <template x-for="paxOption in filterOptions.pax">
                                                 <li>
@@ -95,7 +94,7 @@
                                     <svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1 transform rotate-45">
                                         <use href="#icon-airplane"></use>
                                     </svg>
-                                    <div class="absolute top-100 left-0 bg-white p-4 shadow-md min-w-full h-48 overflow-y-scroll" x-show="show === 'destination'" x-transition x-cloak>
+                                    <div class="absolute top-100 left-0 bg-white p-4 shadow-md min-w-full h-48 overflow-y-scroll" x-show="show === 'destination'" x-cloak>
                                         <template x-if="filterOptions.destinations && !conceptSelected">
                                             <template x-for="destination in filterOptions.destinations">
                                                 <div class="flex items-start justify-between">
@@ -170,14 +169,12 @@
                                 </div>
                             </div>
                         </div>
-                        <button type="submit" x-show="sticky" x-cloak x-bind:disabled="loading">
+                        <button type="submit" class="hidden sticky:block sticky:ml-4">
                             <svg class="w-8 h-8 text-white">
                                 <use href="#icon-chevron-right"></use>
                             </svg>
                         </button>
-                        <div class="flex justify-end mt-4"
-                             x-show="!sticky"
-                             x-cloak>
+                        <div class="flex justify-end mt-4 sticky:hidden">
                             <button type="submit" class="w-1/3 text-white uppercase py-2" x-bind:disabled="loading">
                                 Detailsuche
                             </button>
diff --git a/tailwind.config.js b/tailwind.config.js
index d4480ffb..849ee5a7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -109,13 +109,16 @@ module.exports = {
             borderWidth: [ 'even', 'odd', 'first', 'last' ],
             textColor: [ 'sbw', 'sbw-hover', 'snz', 'snz-hover', 'uch', 'uch-hover' ],
             borderColor: [ 'sbw','snz', 'uch' ],
-            display: ['group-hover'],
+            display: ['group-hover', 'sticky'],
             visibility: ['group-hover'],
             opacity: ['group-hover'],
             rotate: ['group-hover'],
-            flexDirection: ['even', 'odd'],
-            padding: ['even', 'odd', 'first', 'last'],
-            margin: ['even', 'odd', 'first', 'last'],
+            flex: ['sticky'],
+            flexDirection: ['even', 'odd', 'sticky'],
+            alignItems: ['sticky'],
+            padding: ['even', 'odd', 'first', 'last', 'sticky'],
+            margin: ['even', 'odd', 'first', 'last', 'sticky'],
+            maxWidth: ['sticky'],
         },
     },
     plugins: [
@@ -138,5 +141,12 @@ module.exports = {
                 })
             })
         }),
+        plugin(function ({addVariant, e}) {
+            addVariant('sticky', ({modifySelectors, separator}) => {
+                modifySelectors(({className}) => {
+                    return `.sticky .${e(`sticky${separator}${className}`)}`
+                })
+            })
+        }),
     ],
 }